@charset "UTF-8";
/* =========================================================================
   panoramasystemes.com
   Feuille unique. Aucune dependance, aucun import distant.

    1. Jetons
    2. Polices
    3. Reinitialisation
    4. Mise en page
    5. Typographie de lecture
    6. En-tete
    7. Pied de page
    8. Article
    9. Figures
   10. Connecteurs #
   11. Rubrique et sommaires
   12. Partage
   13. Accessibilite et mouvement
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Jetons
   Contrastes verifies sur papier blanc :
     encre    #121212  18,73:1
     gris     #5A5A5A   6,90:1
     rouge    #D70925   5,31:1
   Le gris de TOWeb, #787878, tombait a 4,42:1, sous le seuil AA. Il servait
   pour toutes les legendes d'images. Ne pas le reintroduire.
   ------------------------------------------------------------------------- */
:root {
  --pap:    #FFFFFF;   /* papier */
  --pap-2:  #F7F5F2;   /* fond de section, encarts */
  --enc:    #121212;   /* texte, noir de presse et non noir pur */
  --gris:   #5A5A5A;   /* legendes, dates, texte secondaire */
  --fil:    #DEDEDE;   /* filets */
  --fil-2:  #B8B8B8;   /* filets appuyes */
  --acc:    #D70925;   /* rouge, repris du site TOWeb */
  --acc-2:  #A80019;   /* rouge assombri, pour les survols */

  --page:   62rem;     /* largeur maximale de la page */
  --col:    38rem;     /* colonne de lecture, 608 px */

  --serif:  "Source Serif 4", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --titre:  "DM Serif Display", "Playfair Display", Georgia, serif;
  /* Le bandeau seul. Si elle ne charge pas, on retombe sur la police des
     titres : le bandeau reste compose, il perd seulement son caractere. */
  --bandeau: "Manufacturing Consent", "DM Serif Display", Georgia, serif;
  /* La police du schema, celle de ses etiquettes internes, telle que le
     dessin d'origine la nomme. Elle n'est **pas auto-hebergee** : c'est une
     pile systeme, donc aucune requete et aucun CDN, mais aussi aucune
     garantie qu'une machine l'ait. C'est deja le cas des etiquettes du
     dessin, et c'est ce qui permet au titre du site de tomber dans le meme
     repli qu'elles plutot que dans un autre. */
  --schema: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;

  --marge:  1.25rem;
}

/* -------------------------------------------------------------------------
   2. Polices
   Auto-hebergees, fabriquees par tools/polices.py. Jamais de Google Fonts
   ni de CDN.
   L'espace fine insecable U+202F n'est dessinee dans aucune des deux
   polices : les insecables du site sont des U+00A0.
   ------------------------------------------------------------------------- */
@font-face {
  font-family: "DM Serif Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/dm-serif-display-regular.woff2") format("woff2");
}
@font-face {
  font-family: "DM Serif Display";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/dm-serif-display-italic.woff2") format("woff2");
}
/* Le nom du site, et rien d'autre. Fraktur derivee de « Chomsky », qui
   reconstitue le bandeau du New York Times. Sous-ensemble aux seules lettres
   de ce nom, treize glyphes : elle ne peut rien composer d'autre. */
@font-face {
  font-family: "Manufacturing Consent";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/manufacturing-consent-nom.woff2") format("woff2");
}
/* Source Serif 4 est variable. Ses deux axes d'origine, wght 200-900 et
   opsz 8-60, pesaient 220 ko a deux fontes. L'axe opsz est fige a 14, la
   taille optique du texte courant, et wght ramene a 400-700 : 63 ko a deux.
   Un vrai italique et un vrai gras, plus aucune simulation par le navigateur. */
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/source-serif-4-var.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/source-serif-4-italic-var.woff2") format("woff2");
}

/* -------------------------------------------------------------------------
   3. Reinitialisation
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  /* L'en-tete du telephone est fixe : sans cela une ancre, « Aller au
     contenu » compris, poserait sa cible sous la barre. Remis a zero des
     640 px, ou l'en-tete redevient un bandeau qui defile. */
  scroll-padding-top: 4.75rem;
}

body {
  margin: 0;
  background: var(--pap);
  color: var(--enc);
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.65;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

h1, h2, h3, h4 { margin: 0; font-weight: 400; }

ul, ol { margin: 0; padding: 0; }

/* -------------------------------------------------------------------------
   4. Mise en page
   ------------------------------------------------------------------------- */
.page {
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 var(--marge);
}

.colonne {
  max-width: var(--col);
  margin-left: auto;
  margin-right: auto;
}

.saut-contenu {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--enc);
  color: var(--pap);
  padding: 0.75rem 1rem;
  z-index: 10;
}
.saut-contenu:focus { left: 0; }

/* Lu, jamais vu : le nom d'un bouton qui ne porte qu'un dessin. Un
   `aria-label` suffirait le plus souvent, mais du texte reel se traduit et
   ne depend d'aucun rendu de l'attribut. */
.hors-ecran {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* -------------------------------------------------------------------------
   5. Typographie de lecture
   ------------------------------------------------------------------------- */
p { margin: 0 0 1.15em; }

.corps > :first-child { margin-top: 0; }
.corps > :last-child  { margin-bottom: 0; }

.corps h2 {
  font-family: var(--titre);
  font-size: 1.5rem;
  line-height: 1.25;
  margin: 2.2rem 0 0.6rem;
}

.corps h3 {
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gris);
  margin: 2rem 0 0.5rem;
}

.corps a {
  color: var(--enc);
  text-decoration: underline;
  text-decoration-color: var(--fil-2);
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
}
.corps a:hover,
.corps a:focus-visible {
  color: var(--acc-2);
  text-decoration-color: currentColor;
}

.corps ul { margin: 0 0 1.15em; padding-left: 1.1em; }
.corps li { margin-bottom: 0.4em; }

/* Puces a pictogramme. Les trois familles de la page d'accueil portent le
   pictogramme du schema plutot qu'un point : le dollar, le marteau et la
   silhouette, chacun dans la couleur de son bloc. Fabriques par
   tools/pictos.py, poses en SVG dans le HTML.
   Le retrait negatif annule le padding-left de la liste : la puce reprend
   ainsi la marge de la colonne de lecture, comme un point l'aurait fait. */
li.puce {
  list-style: none;
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin-bottom: 1.1em;
}
/* Dans le corps d'un texte, le retrait negatif annule le padding de la liste
   pour que la puce reprenne la marge de la colonne. Dans le triptyque de
   l'accueil la liste n'a pas de padding, il n'y a donc rien a annuler. */
.corps li.puce { margin-left: -1.1em; }
.triptyque__points ul { list-style: none; padding-left: 0; margin: 0; }

.puce__picto {
  width: 2.125rem;
  height: 2.125rem;
  flex: none;
  margin-top: 0.18em;
}

.puce__texte { display: block; }

blockquote {
  margin: 1.6rem 0;
  padding-left: 1.1rem;
  border-left: 3px solid var(--acc);
  font-style: italic;
  color: var(--gris);
}

/* -------------------------------------------------------------------------
   6. En-tete
   ------------------------------------------------------------------------- */
/* **Sur le telephone, l'en-tete est fixe**, demande du client du 1er
   septembre 2026 : la marque, le nom et le bouton du menu restent sous les
   yeux pendant toute la lecture. `sticky` et non `fixed` : la barre garde sa
   place dans le flux, rien n'a besoin d'etre compense en tete de `<main>`.

   Elle est aussi le repere du panneau du menu, qui se pose en absolu juste
   dessous : c'est le `position` qui le lui permet.

   Des 640 px elle redevient le bandeau qui defile avec la page : la
   proportion de journal veut que la une commence par son bandeau, et un
   ecran large a la hauteur qu'il faut. */
.entete {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--pap);
  /* **Gris tres clair et non le filet fort**, demande du client du
     1er septembre 2026 : le trait noir sous le bandeau n'est pas du modele.
     Il n'est pas retire pour autant, et il ne peut pas l'etre : l'en-tete
     est fixe, sans une limite le texte defilerait sous une barre blanche
     sans separation. Il redevient le filet fort des 640 px, ou l'en-tete
     defile avec la page et ou le bandeau ouvre la une. */
  border-bottom: 1px solid var(--fil);
  padding: 0.7rem 0 0.65rem;
}

/* La barre du telephone : la marque et le nom a gauche, le bouton du menu a
   droite. Le bandeau perd donc son centrage sous 640 px, et il le fallait :
   a 375 px le nom occupe deja toute la largeur qui reste, un bouton centre
   de chaque cote lui aurait coute un tiers de son corps. Il le reprend des
   640 px, ou la nav redevient un bandeau sous le titre. */
.entete__barre {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* **Le nom se centre dans la page**, demande du client du 1er septembre
   2026, comme le nom du journal du modele. Le retrait de gauche pose plus
   tot le meme jour tombe avec ce centrage : il decalerait le bandeau.

   Le bouton est a droite et fausserait le centre a lui seul, de la moitie de
   sa largeur et de son ecart, 20 px. Un contrepoids invisible de **la meme
   largeur que le bouton** est donc pose a gauche, et le titre, en `1fr`
   entre les deux, se centre alors sur la page entiere. Sans lui il faudrait
   sortir le bouton du flux, ce qui lui ferait servir de repere au panneau du
   menu a la place de l'en-tete. */
.entete__barre::before {
  content: "";
  width: 2rem;
  flex: none;
}
.entete__titre { flex: 1; }

/* Le bandeau de titre. La marque et le nom sont **sur une seule ligne a
   toutes les tailles**, demande du client du 30 aout 2026 : la marque se
   posait au-dessus du nom en pile, ce qui donnait deux etages la ou un
   bandeau de journal n'en a qu'un. C'est ce qui a fait raccourcir le nom du
   site, « Panorama Systèmes » et non plus « panorama des systèmes » : le
   nom complet est passe dans la devise, juste en dessous. */
.entete__titre {
  margin: 0;
  min-width: 0;
}
.entete__titre a {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  text-decoration: none;
}

/* **La marque quitte le groupe centre**, demande du client du 1er septembre
   2026 : elle se cale a la marge de gauche et le nom se centre seul sur la
   page. Elle perd **30 %** au passage, 2,5rem devenant 1,75.

   Elle est posee en absolu, et son repere est l'en-tete : c'est le premier
   ancetre positionne, par le `sticky` du telephone. Le lien du titre, lui,
   ne doit surtout pas etre positionne, sans quoi il deviendrait ce repere.

   Des 640 px elle revient dans le flux, a cote du nom, et reprend sa taille
   pleine : le bandeau y a ses deux etages et son groupe centre. */
.entete__marque {
  position: absolute;
  left: var(--marge);
  top: 50%;
  transform: translateY(-50%);
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
  display: block;
}

.entete__nom {
  font-family: var(--bandeau);
  /* 56 px, et non les 42 px de la police des titres : la fraktur a une chasse
     de 23 % plus etroite, elle a besoin de cette taille pour retrouver la meme
     largeur de bandeau et la meme presence. Une seule taille a tous les
     ecrans, comme avant. */
  /* En pile, la taille suit la place qui reste : c'est la seule facon de
     tenir la marque et le nom sur une meme ligne jusqu'a 320 px.

     5,75rem est ce que le nom n'a pas : les deux marges de page (2 x 1,25),
     la marque (2,5) et l'ecart (0,75). 7,4 est le rapport largeur / corps du
     nom compose dans la fraktur, mesure a 7,24, arrondi au-dessus pour la
     marge d'erreur. Le plafond de 56 px est atteint des 533 px de fenetre :
     la valeur fixe vaut donc partout ailleurs. */
  /* **Sur la pile, 15 % de moins**, demande du client du 31 aout 2026 : le
     bandeau pesait trop lourd sur un ecran de telephone. Le plafond passe de
     3,5 a 2,975rem (47,6 px) et le diviseur de 7,4 a 8,7, soit le meme
     rapport largeur / corps augmente d'autant : la reduction est donc la
     meme a toutes les largeurs de la pile, et le nom tient toujours sur une
     ligne jusqu'a 320 px. La taille pleine revient des 640 px. */
  /* **La place n'est plus la contrainte.** La marque ayant quitte le flux, le
     nom pourrait aller jusqu'a (100vw - 7,5rem) / 7,4 sans toucher ni elle
     ni le bouton, soit 34,5 px a 375 de fenetre. La soustraction est laissee
     a **10,75rem** parce que c'est le corps que le client a valide, 27,4 px
     a 375 : ce n'est donc plus une place qu'on calcule mais une taille qu'on
     tient, et les 3,25rem d'ecart sont le blanc de chaque cote du nom.

     Le diviseur est **7,4**, le rapport largeur / corps du nom dans la
     fraktur, mesure a 7,24 et arrondi au-dessus. 20 px a 320 de fenetre. */
  font-size: min(2.6rem, calc((100vw - 10.75rem) / 7.4));
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

/* La devise de la une. Elle se pose dans le blanc que laissaient les deux
   filets forts du haut de page, celui de l'en-tete et celui du triptyque :
   c'est le bandeau de devise d'une une de journal. Gris fonce, 6,90:1 sur
   blanc, elle enonce ce que le nom raccourci ne dit plus.

   **Dans la police du texte, pas dans celle des titres.** Elle a paru une
   journee en DM Serif Display, comme les titres qui l'entourent : le client
   a signale que ses capitales n'etaient pas celles du texte. C'en est en
   effet une autre, et le rapprochement se voit d'autant plus qu'elle est
   composee petit. La devise d'un journal est du texte, pas un titre. */
/* **A gauche sur le telephone**, demande du client du 1er septembre 2026 :
   completee, elle y tient sur quatre lignes, et quatre lignes centrees dont
   la derniere est courte font un drapeau au lieu d'un bandeau. Elle reprend
   son centrage des 640 px, ou elle est de nouveau posee entre les deux
   filets forts d'une une.

   **Elle devient une bande grise**, meme demande, sur le modele de la bande
   de date qui suit le bandeau du New York Times : fond `--pap-2`, un filet
   gris en bas, et un cran de corps en moins. Elle se lit alors comme un
   bandeau de devise et non comme un premier paragraphe.

   Les marges negatives la portent **bord a bord** : elle est dans une
   `.page`, dont le retrait lateral la couperait avant les bords de l'ecran.
   Elles valent exactement ce retrait, il n'y a donc pas de debordement.

   **Elle se colle a l'en-tete et n'a pas de filet du haut** : c'est celui de
   l'en-tete, desormais gris tres clair lui aussi, qui le lui sert. Elle a eu
   les deux, et un blanc de 1,25rem pour ne pas doubler le filet noir qui
   fermait alors l'en-tete ; le noir parti, le blanc et le filet en trop
   n'avaient plus de raison d'etre, et la bande vient sous le bandeau comme
   sur le modele.

   **Le gris du filet est celui des filets du site**, `--fil`, et non
   `--gris` : le client a demande le gris tres clair du modele apres l'avoir
   vu en gris fonce. */
/* **La bande porte desormais deux colonnes**, demande du client du
   1er septembre 2026, toujours sur le modele : la date a gauche sur un
   cinquieme de la largeur, la devise sur les quatre autres. Le fond et le
   filet sont montes de la devise a la bande, qui les tient toutes les deux.

   20 % et non une colonne fixe : la date est courte et le texte long, le
   rapport tient donc a toutes les largeurs de la pile sans qu'on ait a le
   remesurer. */
.bandeau {
  display: grid;
  /* 15 % et non 20 : la date n'a besoin que de sa plus longue ligne, et le
     texte gagne ce qu'elle rend. Un pourcentage et non une colonne fixe : la
     date est courte et le texte long, le rapport tient donc a toutes les
     largeurs de la pile sans qu'on ait a le remesurer.

     `minmax` et non `15%` seul : a 320 px de fenetre la colonne tombe a
     42 px, tout juste la largeur de « 1er Sept », et un mois plus large y
     coupait la ligne en deux. Le minimum reste 15 % — c'est lui qui gagne
     partout ou il suffit, la valeur est donc exacte — et la colonne ne
     s'elargit que quand le mois l'exige. */
  grid-template-columns: minmax(15%, max-content) 1fr;
  column-gap: 0.75rem;
  align-items: start;
  margin: 0 calc(var(--marge) * -1);
  padding: 0.75rem var(--marge) 0.8rem;
  background: var(--pap-2);
  border-bottom: 1px solid var(--fil);
}

/* La date. Deux lignes, le jour et le mois abrege puis l'annee, dans la
   police du schema : c'est la seule sans-serif du site, et le client la veut
   ici comme sur le modele. Elle est en noir et en gras, la devise etant
   grise : c'est ce qui les separe, il n'y a pas de filet entre les deux
   colonnes. */
.bandeau__date {
  margin: 0;
  /* **Centree dans sa colonne, en hauteur comme en largeur**, demande du
     client du 1er septembre 2026. Le `align-self` la centre sur la hauteur
     que la devise donne a la bande ; `align-items: start` reste sur la
     grille, sans quoi c'est la devise qui se centrerait aussi et son premier
     mot ne serait plus a la hauteur du bandeau. */
  align-self: center;
  text-align: center;
  /* La date ne se coupe jamais : c'est ce qui donne sa largeur a la colonne,
     et une ligne cassee en deux y ferait trois lignes au lieu de deux. */
  white-space: nowrap;
  font-family: var(--schema);
  font-stretch: condensed;
  font-weight: 700;
  font-size: 0.8125rem;
  line-height: 1.25;
  color: var(--enc);
}
/* Les deux lignes sont deux `<span>` : un `<br>` dans un `<time>` se copierait
   avec lui, et la date n'a qu'une valeur lisible par machine, son `datetime`. */
.bandeau__date span { display: block; }

.devise {
  margin: 0;
  padding: 0;
  text-align: left;
  font-family: var(--serif);
  /* Le corps des amorces des depliants, `.depliant__extrait`, demande du
     client du 1er septembre 2026 : ce sont les deux textes secondaires de
     la une, ils doivent se lire au meme cran. */
  font-size: 0.9375rem;
  line-height: 1.3;
  color: var(--gris);
}

/* -------------------------------------------------------------------------
   Le menu du telephone.

   Sous 640 px les sept entrees passent derriere un bouton en haut a droite,
   demande du client du 1er septembre 2026. C'est un `<details>`, le meme
   idiome que les depliants de la une : sans JavaScript le menu reste
   deploye, et c'est l'en-tete d'avant. Des 640 px le bouton disparait et la
   liste redevient le bandeau de rubriques sous le nom.
   ------------------------------------------------------------------------- */
.menu { margin-left: auto; }

/* Le bouton. Trois traits au filet, ni caractere ni image, comme le chevron
   des depliants et les pictogrammes de la une. La cible fait 44 px de haut. */
/* **Plus petit et plus gras depuis le 1er septembre 2026**, demande du
   client : le dessin passe de 21,6 x 15,4 px a 17,6 x 14,2, et les traits de
   1 a 2 px. La boite, elle, ne change pas de hauteur : c'est la cible du
   doigt, et elle reste a 44 px. */
.menu__bouton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2.75rem;
  cursor: pointer;
  list-style: none;             /* Firefox : retire le triangle par defaut */
}
.menu__bouton::-webkit-details-marker { display: none; }

/* Les trois traits sont des boites de 1 px a fond plein, et non des
   `border-top` : une bordure vit **au-dessus** du padding box, quand le `top`
   des deux autres traits se compte **depuis** ce padding box. Le trait du
   milieu etait donc decale d'un pixel par rapport a son propre repere, et les
   blancs tombaient a 5,2 px en haut contre 7,2 en bas. Le client l'a vu. Avec
   trois boites, le repere est le meme pour les trois et les blancs sont
   egaux. */
.menu__barres {
  position: relative;
  display: block;
  width: 1.1rem;
  height: 2px;
  background: var(--enc);
}
.menu__barres::before,
.menu__barres::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--enc);
  transition: transform 0.2s ease;
}
.menu__barres::before { top: -0.38rem; }
.menu__barres::after  { top:  0.38rem; }

/* Ouvert, les trois traits deviennent une croix : le trait du milieu
   s'efface et les deux autres se croisent au centre. La rotation tombe sous
   `prefers-reduced-motion`, comme toute animation du site. */
.menu__pli[open] > .menu__bouton .menu__barres { background: transparent; }
.menu__pli[open] > .menu__bouton .menu__barres::before { transform: translateY(0.38rem) rotate(45deg); }
.menu__pli[open] > .menu__bouton .menu__barres::after  { transform: translateY(-0.38rem) rotate(-45deg); }

/* Le panneau se pose en absolu sous la barre, et non dans son flux : il
   recouvre le haut de la page au lieu de la pousser vers le bas. Son repere
   est l'en-tete, que son `position: sticky` rend positionne. */
.nav {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 6;
  display: flex;
  flex-direction: column;
  background: var(--pap);
  border-bottom: 1px solid var(--enc);
  padding: 0 var(--marge) 0.4rem;
  list-style: none;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.menu__pli > .nav li { border-top: 1px solid var(--fil); }
.menu__pli > .nav li:first-child { border-top: 0; }
.menu__pli > .nav a { display: block; padding: 0.85rem 0; border-bottom: 0; }
/* Le filet sous le lien ne peut pas marquer la page courante dans une liste
   en colonne, ou il se lirait comme un separateur : c'est la graisse qui
   s'en charge, la couleur pleine restant commune au survol. */
.menu__pli > .nav [aria-current="page"] { font-weight: 600; }
.nav a {
  /* Gris fonce et non noir : la navigation passe derriere le bandeau, qui
     doit rester la seule chose forte du haut de page. 6,90:1 sur blanc, bien
     au-dessus du seuil AA. La page courante et le survol reprennent leur
     couleur pleine, sans quoi l'etat actif ne se verrait plus. */
  color: var(--gris);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}
.nav a:hover,
.nav a:focus-visible { color: var(--acc); }
.nav [aria-current="page"] { color: var(--enc); }
.nav a:hover,
.nav a:focus-visible { border-bottom-color: var(--acc); }
.nav [aria-current="page"] { border-bottom-color: var(--enc); }


/* -------------------------------------------------------------------------
   Les cartes d'extrait de la une, et le bloc « au hasard ».

   Les trois longs developpements de la page d'accueil ont chacun leur page
   depuis le 30 aout 2026 ; la une n'en garde qu'un extrait. Fond gris tres
   clair, demande du client : ces trois blocs ne sont pas du texte courant,
   ce sont des portes.
   ------------------------------------------------------------------------- */
.cartes {
  display: grid;
  gap: 1.5rem;
  margin: 2.5rem 0;
}

/* Au filet et non a l'aplat, comme les blocs de la page « Comprendre » de
   repertoire.finance : un fond gris les aurait mis en retrait, alors que ce
   sont les trois portes d'entree de la une. */
.carte {
  background: var(--pap);
  border: 1px solid var(--fil);
}

.carte__lien {
  display: block;
  height: 100%;
  padding: 0 1.2rem 1.3rem;
  color: inherit;
  text-decoration: none;
}
.carte__lien:hover .carte__titre,
.carte__lien:focus-visible .carte__titre { color: var(--acc-2); }

/* Le cadrage est biaise vers le haut, comme l'image de partage : sur une
   photo de personnes, un cadrage centre rogne le haut des tetes. */
.carte__image {
  width: calc(100% + 2.4rem);
  /* La regle generale « img { max-width: 100% } » ecretait cette largeur a
     celle de la colonne de texte : la vignette s'arretait 2,4rem avant le
     filet de droite. Le debord est voulu, il faut donc lever le plafond. */
  max-width: none;
  margin-left: -1.2rem;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}

.carte__titre {
  font-family: var(--titre);
  font-size: 1.375rem;
  line-height: 1.2;
  margin: 1rem 0 0.6rem;
}

.carte__extrait {
  margin: 0 0 0.9rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--gris);
}

.carte__meta {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gris);
}

.carte__suite {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--acc);
}

/* La rangee « a decouvrir » : trois domaines tires au sort. Meme logique de
   bloc que les cartes, en plus sobre : pas de vignette, le tirage change a
   chaque visite et une image y serait une requete de plus a chaque fois. */
.decouvrir { margin: 0 0 3rem; }

.decouvrir__titre {
  font-family: var(--titre);
  font-size: 1.75rem;
  line-height: 1.2;
  margin: 0 0 1.2rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--enc);
}

.decouvrir__grille {
  display: grid;
  gap: 1.5rem;
}

.hasard {
  background: var(--pap);
  border: 1px solid var(--fil);
  padding: 1.2rem;
}

.hasard__rubrique {
  margin: 0 0 0.3rem;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--acc);
}

.hasard__titre {
  font-family: var(--titre);
  font-size: 1.375rem;
  line-height: 1.2;
  margin: 0 0 0.6rem;
}
.hasard__titre a { text-decoration: none; color: inherit; }
.hasard__titre a:hover,
.hasard__titre a:focus-visible { color: var(--acc-2); }

.hasard__extrait {
  margin: 0 0 0.9rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--gris);
}

.hasard__meta {
  margin: 0;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gris);
}


/* -------------------------------------------------------------------------
   Les extraits video.

   Mise en ligne decidee par le client le 30 aout 2026 : ces extraits sont
   sous droits, et la citation en dessous nomme l'oeuvre et son auteur, ce que
   l'article L.122-5 du code de la propriete intellectuelle exige.

   `preload="none"` dans le HTML : rien ne part sur le reseau avant que le
   lecteur ne clique. Les fichiers pesent de 4 a 26 Mo. C'est la vignette
   d'attente qui tient la place, prise a 10 % de la duree.

   **Aucune video n'est agrandie**, meme regle que les images : le dessin
   anime de Disney fait 320 px de large, l'etirer sur la colonne de 608 le
   rendrait flou. Il est servi a sa taille, centre.
   ------------------------------------------------------------------------- */
.video {
  margin: 2rem 0;
}

.video__lecteur {
  display: block;
  width: 100%;
  max-width: var(--largeur, 100%);
  height: auto;
  background: var(--enc);
}

.video--petite .video__lecteur { margin: 0 auto; }

.video__credit {
  margin-top: 0.7rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--gris);
}
.video__credit cite { font-style: italic; }

.video__mention {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.8125rem;
}

/* -------------------------------------------------------------------------
   7. Pied de page
   ------------------------------------------------------------------------- */
.pied {
  border-top: 1px solid var(--fil);
  margin-top: 4rem;
  padding: 2rem 0 3rem;
  font-size: 0.9375rem;
  color: var(--gris);
}
.pied a { text-decoration: underline; text-decoration-color: var(--fil-2); }
.pied a:hover, .pied a:focus-visible { color: var(--enc); }

/* -------------------------------------------------------------------------
   8. Article
   ------------------------------------------------------------------------- */
.article { padding-top: 2.5rem; }

.surtitre {
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--acc);
  margin-bottom: 0.6rem;
}
.surtitre a { text-decoration: none; }
.surtitre a:hover, .surtitre a:focus-visible { text-decoration: underline; }

.article__titre {
  font-family: var(--titre);
  font-size: 2.375rem;
  line-height: 1.1;
  margin: 0 0 0.9rem;
}

.article__chapo {
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--gris);
  margin: 0 0 1.6rem;
}

.notes {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--fil);
  font-size: 0.9375rem;
  color: var(--gris);
  list-style: none;
}
.notes li { margin-bottom: 0.5em; }

/* -------------------------------------------------------------------------
   9. Figures
   Les images du site TOWeb plafonnent bas : 12 des 41 sont sous 640 px.
   Une image n'est jamais agrandie au-dela de sa definition. Le generateur
   pose .figure--pleine quand l'image remplit la colonne, .figure--petite
   sinon, auquel cas elle est centree a sa taille naturelle.
   ------------------------------------------------------------------------- */
.figure { margin: 0 0 1.8rem; }

.figure img {
  width: 100%;
  background: var(--pap-2);
}

/* Une image qui ne remplit pas la colonne est bornee a sa definition d'origine,
   portee par --largeur, et centree. Elle retrecit sur petit ecran, elle ne
   grandit jamais.
   Ne pas remplacer par « width: auto » : sur une image en chargement differe,
   la largeur se calcule alors a 0 px tant que le fichier n'est pas arrive.
   L'image n'entre donc jamais dans le champ de vision, et n'est jamais
   chargee. Le blocage est circulaire et silencieux. */
.figure--petite img {
  width: 100%;
  max-width: var(--largeur, 100%);
  margin: 0 auto;
}

.figure figcaption {
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--gris);
  margin-top: 0.5rem;
}

/* -------------------------------------------------------------------------
   10. Connecteurs #
   Le site est bati sur le symbole « # » comme lien entre domaines. Il est
   rendu visible mais discret : c'est un connecteur, pas un bouton.
   ------------------------------------------------------------------------- */
.lien-domaine {
  color: var(--enc);
  text-decoration: none;
  border-bottom: 1px solid var(--acc);
  white-space: nowrap;
}
.lien-domaine:hover,
.lien-domaine:focus-visible {
  color: var(--acc-2);
  background: var(--pap-2);
}
.lien-domaine__diese { color: var(--acc); }

/* -------------------------------------------------------------------------
   10 bis. Pages : accueil, le livre, a propos
   ------------------------------------------------------------------------- */
.section { margin-bottom: 2.8rem; }

/* -------------------------------------------------------------------------
   Le triptyque de la page d'accueil.

   Sur grand ecran, trois colonnes : « Notre projet », le schema, les trois
   familles. En dessous de 960 px, tout se remet en pile.

   L'ordre du HTML est celui de la pile mobile : schema, chapeau, les trois
   familles, notre projet. Les colonnes de desktop sont placees explicitement
   dans la grille, ce qui evite de toucher a l'ordre de lecture. Aucun des
   quatre blocs ne contient de lien, la difference entre ordre visuel et
   ordre du document est donc sans consequence au clavier.
   ------------------------------------------------------------------------- */
.page--large { max-width: 80rem; }

/* Tant que la pile dure, les textes restent a la largeur de lecture. */
.triptyque__points,
.triptyque__projet {
  max-width: var(--col);
  margin-left: auto;
  margin-right: auto;
}

.section > h2,
.triptyque__titre {
  font-family: var(--titre);
  font-size: 1.75rem;
  line-height: 1.2;
  margin: 0 0 1rem;
}

/* « LES CONCEPTS » repond a « NOTRE PROJET », qui est en capitales dans le
   texte source. Les capitales sont posees par le style et non saisies : un
   lecteur d'ecran recoit « Les concepts » et ne risque pas de l'epeler. */
.triptyque__titre { text-transform: uppercase; }

/* Le titre du schema. Il a quitte le SVG : le dessin n'a plus de titre en
   propre, celui-ci le remplace a toutes les tailles. Centre, parce qu'il
   titre une figure centree, la ou les deux autres ouvrent une colonne.

   **Sur le telephone il passe sous le filet fort**, a l'interieur du cadre
   du schema, et s'ecrit « Fonctionnement du Systeme Capitaliste » en petit
   et en gris fonce : demande du client du 1er septembre 2026. C'est un
   intitule de planche, pas un titre de colonne, et il en prend la forme,
   celle du surtitre du site.

   **Rien ne bouge dans le document** : c'est le filet qui change de
   proprietaire. Le titre prend le filet fort du haut, la figure le perd, et
   le titre se lit donc dessous tout en restant ecrit dessus. Un
   reordonnancement ferait passer le titre sous la figure entiere, donc sous
   le filet du bas.

   Des 640 px, tout revient : grand, noir, dans la police des titres, et
   au-dessus du filet, qui redevient celui de la figure. */
.triptyque__titre--schema {
  text-align: center;
  margin: 1.75rem 0 0;
  padding: 0.9rem 0 0;
  border-top: 1px solid var(--enc);
  /* **La police de la figure, et en noir**, demande du client du
     1er septembre 2026 : le titre et le dessin qu'il annonce se lisent alors
     d'un seul tenant. C'est le seul texte du site compose dans une
     sans-serif, et c'est justifie par ce voisinage seul : hors du telephone,
     ce titre reprend la police des titres et s'aligne sur ses deux voisins
     de colonne. */
  font-family: var(--schema);
  font-stretch: condensed;
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  color: var(--enc);
}

/* Le renvoi vers les sous-systemes. Ils ne sont pas detailles sur la une,
   a la difference des trois familles de concepts : un lien suffit.

   Il ferme la colonne du milieu et porte son propre titre, « SOUS-SYSTÈMES »,
   qui reprend la police et le corps de « NOTRE PROJET » et « LES CONCEPTS ».
   Demande du client : quatrieme entree de meme rang que les trois autres, et
   non plus un lien seul flottant sous l'accroche. */
/* En pile il s'intercale entre le schema et « NOTRE PROJET » : sans un
   blanc franc dessous, son titre se lirait comme celui du bloc suivant. */
/* Sous 640 px, c'est un depliant comme les deux autres : aligne a gauche,
   sans marge propre, la tete du depliant portant son blanc. Il reprend son
   centrage des 640 px, voir le point de rupture. */
.triptyque__renvoi .triptyque__titre { margin-bottom: 0.35rem; }

.triptyque__lien {
  margin: 1.1rem 0 0;
  font-size: 0.9375rem;
}
.triptyque__renvoi .triptyque__lien { margin-top: 0; }
.triptyque__lien a { font-weight: 600; }

/* -------------------------------------------------------------------------
   Les depliants de la pile.

   **Sur le telephone seul**, sous 640 px, la une ne deroule plus a la suite
   les textes des trois entrees qui suivent le schema. Chacune se presente par
   son titre et une amorce tres courte, et s'ouvre au clic. Demande du client
   du 31 aout 2026, dans l'ordre qu'il a donne : le projet, les concepts, les
   sous-systemes. Des 640 px, tablette comprise, tout est deploye.

   Les titres sont **a gauche**, meme demande : le renvoi vers les
   sous-systemes etait centre, il s'aligne desormais sur les deux autres.

   Elles sont ecrites `<details open>` : sans JavaScript tout reste deploye,
   c'est-a-dire la page d'avant les depliants. C'est le script de la une qui
   les referme sous 640 px et qui les rouvre au-dela.
   ------------------------------------------------------------------------- */
.depliant {
  max-width: var(--col);
  margin: 0 auto;
  border-top: 1px solid var(--fil);
}
.depliant:last-of-type { border-bottom: 1px solid var(--fil); }

/* La tete : le titre, l'amorce dessous, le chevron a droite des deux. Le
   `<summary>` porte tout, c'est donc toute la tete qui ouvre l'entree et non
   le seul chevron. La cible fait plus de 60 px de haut. */
.depliant__tete {
  display: grid;
  grid-template-columns: 1fr 1.25rem;
  column-gap: 1rem;
  padding: 1.1rem 0;
  text-align: left;
  cursor: pointer;
  list-style: none;             /* Firefox : retire le triangle par defaut */
}
.depliant__tete::-webkit-details-marker { display: none; }
.depliant__tete .triptyque__titre { grid-column: 1; margin: 0; }

/* L'amorce ne se lit que ferme : ouverte, elle repeterait la premiere phrase
   du texte qu'elle annonce, a trente pixels d'intervalle. C'est le meme
   doublon qui avait fait retirer l'accroche le 30 aout 2026. */
.depliant__extrait {
  grid-column: 1;
  margin-top: 0.35rem;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--gris);
}
.depliant[open] > .depliant__tete .depliant__extrait { display: none; }

/* Le chevron est trace au filet, comme tout le reste de la maquette : deux
   cotes d'un carre vide, tournes. Ni caractere, ni image, ni emoji. Il tient
   sur les deux lignes de la tete, d'ou `grid-row: 1 / 3` : ouvert, l'amorce
   n'est plus la et la deuxieme rangee est simplement vide. */
.depliant__tete::after {
  content: "";
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  justify-self: end;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 1px solid var(--enc);
  border-bottom: 1px solid var(--enc);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.depliant[open] > .depliant__tete::after { transform: rotate(-135deg); }

.depliant__corps { padding-bottom: 1.4rem; }
.depliant__corps > .section { margin-bottom: 0; }

/* Le schema des trois sous-systemes.

   Il sort de la colonne de lecture et prend toute la largeur de la page :
   c'est une planche, pas une vignette, et son dessin est dense.

   Son cadre gris et l'ancien logo en bas a droite ont ete retires du fichier
   par tools/images.py, et sa viewBox resserree sur le dessin. Le cadre ici
   est donc celui du site : un fond gris tres clair, a coins arrondis, avec
   une respiration qui suit la largeur de l'ecran.

   Pas de borne de hauteur : elle laisserait des bandes vides de part et
   d'autre du dessin, alors que la demande est justement de le presenter plus
   en largeur.

   Le fond reste **blanc** : un aplat gris salissait le dessin, dont les gris
   font partie du propos. Le cadrage se fait au filet, comme un journal cadre
   ses encarts : c'est la seule facon de poser une limite sans ajouter de
   matiere.

   Deux traitements, parce que les deux formats n'appellent pas le meme
   geste :
   - **mobile**, un filet horizontal au-dessus et au-dessous. La planche
     occupe toute la largeur, il n'y a pas de cote libre pour un filet
     vertical.
   - **desktop**, deux filets verticaux qui flanquent la planche, comme les
     filets de colonne d'une une de journal. Ils bornent le dessin sans le
     fermer. */
/* Sous 640 px le filet du haut est passe au titre, qui se pose entre lui et
   le dessin : la figure n'en garde donc que le blanc, et le filet du bas. */
.figure--schema {
  margin: 0 auto 2.5rem;
  padding: 0.9rem 0 1.4rem;
  border-bottom: 1px solid var(--enc);
}

.figure--schema img {
  width: 100%;
  height: auto;
}

.renvoi {
  margin-top: 2rem;
  padding: 0.9rem 1.1rem;
  background: var(--pap-2);
  border-left: 3px solid var(--acc);
  font-size: 0.9375rem;
}
.renvoi a { color: var(--enc); }

/* La bande de bas de une : les trois dernieres questions de la page, chacune
   dans son bloc, et le sommaire des rubriques en quatrieme. Demande du
   client du 30 aout 2026, contre un paragraphe unique suivi d'une liste.

   Filet fort en tete de chaque bloc, et rien d'autre : c'est le geste des
   colonnes d'un bas de une, et les blocs a filet complet sont deja pris par
   les cartes et par « Au hasard », juste au-dessus. */
.enjeux {
  display: grid;
  gap: 1.6rem 2rem;
  margin: 0 0 1rem;
}

.enjeux__bloc {
  padding-top: 1.1rem;
  border-top: 1px solid var(--enc);
  font-size: 1rem;
  line-height: 1.55;
}

.rubriques {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--enc);
}

/* Dans la bande, le sommaire prend le filet du bloc : le sien ferait double.
   Ses intitules descendent d'un cran, la colonne ne fait plus qu'un quart de
   la largeur. */
.enjeux .rubriques {
  margin-top: 0;
  padding-top: 1.1rem;
}
.enjeux .rubriques__nom { font-size: 1.25rem; }
.enjeux .rubriques a { padding: 0.6rem 0; }
.rubriques__titre {
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gris);
  margin-bottom: 0.9rem;
}
.rubriques ul { list-style: none; }
.rubriques li { border-bottom: 1px solid var(--fil); }
.rubriques a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 0;
  text-decoration: none;
}
.rubriques a:hover .rubriques__nom,
.rubriques a:focus-visible .rubriques__nom { color: var(--acc-2); }
.rubriques__nom {
  font-family: var(--titre);
  font-size: 1.5rem;
  line-height: 1.1;
}
.rubriques__compte {
  font-size: 0.875rem;
  color: var(--gris);
  white-space: nowrap;
}

/* -------------------------------------------------------------------------
   11. Rubrique et sommaires
   ------------------------------------------------------------------------- */
.rubrique__titre {
  font-family: var(--titre);
  font-size: 2.75rem;
  line-height: 1.05;
  margin: 2.5rem 0 0.75rem;
}

.sommaire {
  list-style: none;
  border-top: 1px solid var(--enc);
}

.sommaire__item { border-bottom: 1px solid var(--fil); }

.sommaire__lien {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 1.1rem;
  align-items: start;
  padding: 1.1rem 0;
  text-decoration: none;
}
.sommaire__lien:hover .sommaire__titre,
.sommaire__lien:focus-visible .sommaire__titre { color: var(--acc-2); }

.sommaire__vignette {
  width: 5.5rem;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--pap-2);
}

.sommaire__titre {
  display: block;
  font-family: var(--titre);
  font-size: 1.375rem;
  line-height: 1.15;
  margin-bottom: 0.25rem;
}

.sommaire__extrait {
  display: block;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--gris);
}

/* -------------------------------------------------------------------------
   12. Partage
   Liens simples vers les URL de partage. Aucun SDK, aucun widget tiers :
   ils pistent le lecteur avant meme qu'il clique.
   ------------------------------------------------------------------------- */
.partage {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 2.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--fil);
}

.partage__intitule {
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gris);
  margin-right: 0.3rem;
}

.partage__lien {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.375rem;
  height: 2.375rem;
  border: 1px solid var(--fil-2);
  border-radius: 50%;
  color: var(--enc);
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}
.partage__lien:hover,
.partage__lien:focus-visible {
  border-color: var(--acc);
  color: var(--acc);
  background: var(--pap-2);
}
.partage__lien svg { width: 1.0625rem; height: 1.0625rem; fill: currentColor; }

.partage__retour {
  font-size: 0.8125rem;
  color: var(--gris);
  margin-left: auto;
}

/* -------------------------------------------------------------------------
   13. Accessibilite et mouvement
   ------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* -------------------------------------------------------------------------
   Points de rupture
   ------------------------------------------------------------------------- */
@media (min-width: 40em) {          /* 640 px */
  :root { --marge: 2rem; }
  /* Plus d'ancre a decaler : l'en-tete defile de nouveau avec la page. */
  html { scroll-padding-top: 0; }
  .entete {
    position: static;
    border-bottom-color: var(--enc);
    padding: 1.1rem 0 0.9rem;
  }
  /* Le bandeau reprend ses deux etages, le titre centre puis les rubriques
     dessous, et le titre son centrage : il n'y a plus de bouton a sa droite
     pour lui disputer la largeur. */
  /* Le retrait de gauche est du telephone seul : ici il vaudrait moins que
     la marge de page, qui passe a 2rem, et decalerait le bandeau de 4 px. */
  .entete__barre { display: block; }
  /* Le contrepoids du bouton n'a plus d'objet : il n'y a plus de bouton, et
     le bandeau reprend ses deux etages. */
  .entete__barre::before { content: none; }
  .entete__titre { margin: 0 0 0.85rem; }
  .entete__titre a {
    justify-content: center;   /* sans quoi le groupe se cale a gauche du
                                  lien, qui occupe toute la largeur */
    gap: 1.35rem;
  }
  /* La marque revient dans le flux, a cote du nom : le bandeau reprend son
     groupe centre sur deux etages. */
  .entete__marque {
    position: static;
    transform: none;
    width: 2.875rem;
    height: 2.875rem;
  }
  /* **Le menu n'est plus un menu** : le bouton disparait et le panneau
     redevient le bandeau de rubriques, en ligne et centre. Le `<details>`
     reste ouvert, c'est le script de l'en-tete qui repose son attribut. */
  .menu { margin-left: 0; }
  .menu__bouton { display: none; }
  .nav {
    position: static;
    z-index: auto;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem 1.4rem;
    background: none;
    border-bottom: 0;
    padding: 0;
  }
  .menu__pli > .nav li { border-top: 0; }
  .menu__pli > .nav a { display: inline; padding: 0 0 2px; border-bottom: 2px solid transparent; }
  .menu__pli > .nav [aria-current="page"] { font-weight: 400; border-bottom-color: var(--enc); }
  /* Le nom reprend ses 56 px : la reduction de 15 % ne vaut que sur la pile.
     Le plafond de la formule fluide etant atteint des 533 px, la valeur est
     de toute facon fixe a partir d'ici. */
  .entete__nom { font-size: 3.5rem; }
  /* La bande grise est du telephone seul : des 640 px la devise redevient la
     ligne centree entre les deux filets forts du haut de une. */
  /* La bande grise est du telephone seul : des 640 px la devise redevient la
     ligne centree entre les deux filets forts du haut de une, et **la date
     disparait**. Elle n'aurait pas de place a la gauche d'une ligne centree
     sans en rompre le centrage, et le desktop n'a pas le bandeau de date du
     modele mais la devise d'une une de journal. */
  .bandeau {
    display: block;
    margin: 0;
    padding: 0;
    background: none;
    border-bottom: 0;
  }
  .bandeau__date { display: none; }
  .devise {
    margin: 0;
    padding: 1rem 0 1.1rem;
    font-size: 1.125rem;
    text-align: center;
  }
  .article__titre { font-size: 3rem; }
  /* Sur desktop la planche est haute : les filets horizontaux seuls la
     laisseraient flotter. On ajoute les deux filets de colonne, plus clairs.
     Hierarchie de journal : le filet fort marque la section, le filet clair
     borde la colonne. */
  .figure--schema {
    margin-top: 1.75rem;
    padding: 1.6rem clamp(1.5rem, 4vw, 3rem);
    border-top: 1px solid var(--enc);
    border-left: 1px solid var(--fil);
    border-right: 1px solid var(--fil);
  }
  /* Le titre rend le filet a la figure et redevient un titre de colonne :
     grand, noir, dans la police des titres, au-dessus du dessin. Le prefixe
     « Fonctionnement du » est du telephone seul, ou le titre est petit et
     gris ; ici il alourdirait une ligne deja composee en capitales. */
  .triptyque__titre--schema {
    margin: 0 0 1rem;
    padding: 0;
    border-top: 0;
    font-family: var(--titre);
    font-stretch: normal;
    font-weight: 400;
    font-size: 1.75rem;
    letter-spacing: normal;
    color: var(--enc);
  }
  .titre-schema__prefixe { display: none; }
  .section > h2 { font-size: 1.75rem; }
  /* Trois de front des 640 px : les blocs sont courts, ils tiennent. */
  .cartes,
  .decouvrir__grille { grid-template-columns: repeat(3, 1fr); }
  /* La bande de bas de une passe a deux de front : a quatre, les colonnes
     tomberaient sous 150 px et les questions se casseraient mot a mot. */
  .enjeux { grid-template-columns: repeat(2, 1fr); }
  .rubrique__titre { font-size: 3.5rem; }
  .sommaire__lien { grid-template-columns: 8rem 1fr; }
  .sommaire__vignette { width: 8rem; }

  /* **Des 640 px il n'y a plus de depliant.** Demande du client du 31 aout
     2026 : ils sont pour le telephone et pour lui seul. Sur tablette la page
     est encore en pile, mais elle a la hauteur d'ecran qu'il faut pour tout
     lire d'affilee, et les trois entrees se deroulent comme avant.

     Les tetes redeviennent de simples titres : ni chevron, ni amorce, ni
     filet, et le blanc entre les entrees vient de leur marge. C'est le
     script de la une qui repose l'attribut `open`, le style ne peut pas le
     faire seul. */
  .depliant,
  .depliant:last-of-type { border: 0; }
  .depliant { margin: 0 auto 2.5rem; }
  .depliant__tete { display: block; padding: 0; cursor: default; }
  .depliant__tete::after { content: none; }
  .depliant__extrait { display: none; }
  .depliant__corps { padding-bottom: 0; }
  /* Le titre reprend le blanc des titres de colonne, que la tete du depliant
     lui avait retire. Le renvoi garde le sien, plus serre : il n'ouvre pas
     une colonne de texte mais un lien. */
  .depliant__tete .triptyque__titre { margin-bottom: 1rem; }
  .triptyque__renvoi .depliant__tete .triptyque__titre { margin-bottom: 0.35rem; }
  /* Le renvoi **reprend son centrage des 640 px**, titre compris : demande du
     client du 31 aout 2026. Il n'est a gauche que sous 640 px, ou il est la
     derniere d'une pile de trois entrees alignees a gauche. La tete est
     visee en propre, sans quoi elle garderait le `text-align: left` du
     depliant et le titre serait a gauche sous un lien centre. */
  .triptyque__renvoi,
  .triptyque__renvoi .depliant__tete { text-align: center; }
}

@media (min-width: 60em) {          /* 960 px */
  body { font-size: 1.1875rem; }

  /* Le triptyque prend la largeur de l'ecran. Les trois colonnes sont
     inegales a dessein : « Notre projet » pese 38 mots, les trois familles
     114, et le schema doit rester le point d'ancrage visuel. */
  .triptyque {
    display: grid;
    /* La colonne du milieu est large : mesure faite, en dessous de 500 px
       les etiquettes du schema tombent sous 12 px. La colonne de gauche a
       ete elargie de 0,75 a 0,9 pour absorber le retrait du bloc grise sans
       reduire sa largeur de texte. */
    grid-template-columns: 0.9fr 1.75fr 1.05fr;
    /* Trois rangees : le titre du schema, le schema, puis le renvoi vers les
       sous-systemes. Le renvoi prend toute la hauteur restante, ce qui fait
       descendre les filets de colonne jusqu'en bas de la bande au lieu de les
       arreter au bas du schema. */
    grid-template-rows: auto auto 1fr;
    column-gap: 2.5rem;
    row-gap: 0;
    align-items: start;
    /* Pas de marge en tete : le blanc au-dessus du filet fort est celui de la
       devise, qui doit se tenir au milieu des deux filets et non contre le
       second. */
    margin: 0 auto 3rem;
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
    border-top: 1px solid var(--enc);
    border-bottom: 1px solid var(--enc);
  }
  /* Les colonnes laterales enjambent les trois rangees. */
  .triptyque__projet { grid-column: 1; grid-row: 1 / 4; max-width: none; }
  .triptyque__points { grid-column: 3; grid-row: 1 / 4; max-width: none; }

  /* Les trois titres doivent partir de la meme ligne. Le bloc grise a un
     retrait de 1,25rem en haut : les deux autres colonnes prennent le meme,
     sans quoi « NOTRE PROJET » descendrait seul. */
  .triptyque__points { padding-top: 1.25rem; }
  /* Le blanc sous le titre est un **padding**, pas une marge : une marge
     tombe hors de la cellule de grille et coupait les deux filets de colonne
     sur 16 px entre le titre et le schema. Les trois cellules du milieu se
     touchent, le filet est d'un seul trait du haut au bas de la bande. */
  .triptyque .triptyque__titre--schema {
    grid-column: 2;
    grid-row: 1;
    margin-bottom: 0;
    padding: 1.25rem 1rem 2.5rem;
    border-left: 1px solid var(--fil);
    border-right: 1px solid var(--fil);
  }

  /* Le bloc « Notre projet » sur un fond gris tres clair : c'est le seul
     encadre de la bande, il tient la colonne de gauche qui serait sinon la
     plus maigre des trois. Fond seul, sans filet : le filet est deja le
     langage des colonnes voisines. */
  .triptyque__projet {
    background: var(--pap-2);
    padding: 1.25rem 1.2rem 1.4rem;
  }

  /* Les trois colonnes partent de la meme ligne, comme les colonnes d'un
     journal. */
  .triptyque .figure--schema {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    margin: 0;
    padding: 0 1rem;
    border-top: none;
    border-bottom: none;
  }

  /* Le renvoi ferme la colonne du milieu. Il prend **toute la hauteur qui
     reste** sous le schema et se pose en bas de sa cellule : c'est ce qui
     fait courir les deux filets de colonne d'un seul trait jusqu'au filet
     fort du bas. Cale en simple `align-self: end`, ses filets s'arreteraient
     a son propre texte et la colonne serait coupee.

     C'est l'accroche qui tenait ce role jusqu'au 30 aout 2026, avant que le
     client ne la fasse retirer. Son texte **se centre** dans ce blanc plutot
     que de se caler en bas de bande : demande du client du 30 aout 2026, le
     vide laisse par l'accroche se lisait comme un trou. Il n'est donc plus
     aligne sur le bas des trois autres colonnes. */
  .triptyque .triptyque__renvoi {
    grid-column: 2;
    grid-row: 3;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0;
    padding: 0 1rem 0.2rem;
    border-left: 1px solid var(--fil);
    border-right: 1px solid var(--fil);
  }


  /* Les trois entrees sont les trois colonnes du triptyque : elles perdent
     la largeur de lecture et le centrage qu'elles gardaient en pile. */
  .depliant { max-width: none; margin: 0; }

  /* Texte de colonne laterale : un cran en dessous du corps de lecture. */
  .triptyque__projet,
  .triptyque__points { font-size: 1rem; }
  .triptyque .section { margin-bottom: 1.3rem; }
  .triptyque .section:last-child { margin-bottom: 0; }
  .triptyque__points li.puce:last-child { margin-bottom: 0; }
  /* Les trois questions et le sommaire, quatre de front : la demande du
     client est une rangee de quatre pour fermer la une. */
  .enjeux { grid-template-columns: repeat(4, 1fr); }
  /* La devise se centre dans le blanc que bornent les deux filets forts.
     1,15rem et non 2rem : le blanc paraissait trop ouvert au client, la ligne
     flottait entre les deux filets au lieu de faire bandeau avec eux. */
  .devise { padding: 1.15rem 0; }
  .article { padding-top: 3.5rem; }
  /* La marque est calee sur la hauteur du nom, 56 px, moins un cran : elle
     accompagne le titre au lieu de le suivre de loin. */
  .entete__marque { width: 3.25rem; height: 3.25rem; }
  .entete__titre a { gap: 1.6rem; }
}