/* Atelier 28 — feuille de style unique.
   Les couleurs sont declarees une fois ici : changer la palette du site revient
   a changer ces quelques lignes.

   PARTI GRAPHIQUE — « papier, encre & instruments », pose le 26/09/2026.
   Un fond de papier creme, un filet noir plutot qu'une ombre, des angles
   presque droits (--rayon: 2px) et une monospace pour tout ce qui joue le role
   d'une etiquette d'atelier. L'idee : une fiche d'atelier, pas une plaquette.
   Consequence a connaitre avant de toucher a une couleur : il n'y a plus de
   theme sombre, voir color-scheme juste dessous. */

:root {
  --fond: #f4f0e5;            /* papier */
  --fond-carte: #fffdf5;
  --fond-appui: #e9e5d8;
  --texte: #242a26;           /* encre */
  --texte-doux: #434a41;      /* voir la note sur le fond de page */
  --accent: #ae3518;          /* cuivre : l'electronique et l'etabli */
  --accent-fonce: #862710;
  --accent-clair: #f5e2ce;
  --encre: #242a26;           /* banniere et pied */
  --bord: #b9b9aa;
  --orange: #f2653d;          /* les ombres portees et le filet du pied */
  --rayon: 2px;
  --largeur: 78rem;
  --police: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Consolas, monospace;

  /* « light » et non « light dark » : ce parti graphique est celui d'une
     feuille de papier, et une feuille de papier n'a pas de version sombre.
     Sans cette ligne, le navigateur peindrait quand meme les champs, les
     listes deroulantes et les ascenseurs en sombre chez qui a choisi ce
     reglage, sur un fond creme reste clair. */
  color-scheme: light;
}

/* Contrastes mesures le 26/09/2026, sur cette palette :

       texte / fond .............. 12,9:1
       texte-doux / fond .......... 8,0:1
       texte-doux / carte ......... 9,0:1
       accent / fond .............. 5,6:1   (.surtitre, petit texte)
       etiquette : encre/orange ... 4,7:1

   Le minimum est 4,5:1 pour du texte courant, 3:1 pour du grand.

   POURQUOI --texte-doux EST SI FONCE. Un gris de 6:1 suffirait sur du creme
   nu, et c'est ce qu'il valait au depart (#555c53). Mais l'accroche de la
   banniere s'en sert, et elle passe sur la photo : a #555c53, elle tombe a
   3,72:1 derriere une photo a 22 %. A #434a41 elle tient a 4,93:1.

   C'est donc la photo de banniere qui fixe ce gris. L'eclaircir obligerait a
   redescendre la photo, ou a donner une couleur a part a cette seule accroche
   — ce qui avait ete fait, puis defait, parce qu'une couleur en dur pour un
   seul paragraphe ne se justifiait plus.

   --orange n'a pas de marge non plus : 4,67:1 sous le texte de l'etiquette. */

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--police);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--texte);
  background: var(--fond);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main { flex: 1; }

.conteneur {
  width: 100%;
  max-width: var(--largeur);
  margin: 0 auto;
  padding-inline: clamp(1.25rem, 4vw, 3.5rem);
}

a { color: var(--accent); text-underline-offset: .22em; }
a:hover { text-decoration: none; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }

h1, h2, h3 { line-height: 1.2; font-weight: 800; letter-spacing: -.045em; }
h1 { font-size: clamp(1.9rem, 5vw, 2.7rem); margin: 0 0 .6rem; }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.8rem); margin: 3rem 0 1rem; }
h3 { font-size: 1.15rem; margin: 0 0 .4rem; }

code {
  font-family: var(--mono);
  font-size: .9em;
  background: var(--accent-clair);
  padding: .1em .35em;
  border-radius: 4px;
}

.evitement {
  position: absolute;
  left: -9999px;
  background: var(--accent);
  color: #fff;
  padding: .6rem 1rem;
}
.evitement:focus { left: .5rem; top: .5rem; z-index: 10; }

/* En-tete ------------------------------------------------------------- */
.entete { background: var(--fond); border-bottom: 1px solid var(--texte); }

.entete__barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  min-height: 90px;
  padding-top: .9rem;
  padding-bottom: .9rem;
}

.marque {
  font-weight: 900;
  font-size: 1.55rem;
  letter-spacing: -.06em;
  color: var(--texte);
  text-decoration: none;
  display: flex;
  flex-direction: column;
}

.marque__sous {
  font: .65rem var(--mono);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--texte-doux);
  margin-top: .15rem;
}

.menu__liste { display: flex; gap: 1.6rem; list-style: none; margin: 0; padding: 0; }
.menu__liste a {
  text-decoration: none;
  color: var(--texte);
  font-size: .85rem;
  font-weight: 650;
  padding: .2rem 0;
}
.menu__liste a:hover,
.menu__liste a[aria-current="page"] {
  color: var(--texte);
  border-bottom: 2px solid var(--accent);
}

.menu__bouton { display: none; }

@media (max-width: 40rem) {
  .menu__bouton[hidden] { display: none; }
  .menu__bouton {
    display: block;
    font: inherit;
    color: var(--texte);
    background: var(--fond-appui);
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
    padding: .35rem .9rem;
    cursor: pointer;
  }
  .menu[hidden] { display: none; }
  .menu { width: 100%; }
  .menu__liste { flex-direction: column; gap: .5rem; }
}

/* Banniere ------------------------------------------------------------ */

/* Plus d'aplat sombre ni de voile : la banniere est du papier comme le reste,
   separee de la page par un filet et non par un changement de couleur. Le
   texte y est donc en --texte, pas en blanc, et n'a besoin d'aucune ombre
   portee pour rester lisible.
   isolation: isolate cree un contexte d'empilement : les enfants en z-index
   negatif se peignent derriere le contenu mais devant le fond de la page. */
.banniere,
.banniere--photo {
  position: relative;
  isolation: isolate;
  /* Opaque, et non transparent : la photo de fond de page est posee derriere
     toute la page. Sans ce creme plein, les deux photos se superposeraient
     ici, et les mesures de lisibilite faites sur l'une seule ne vaudraient
     plus rien. La banniere a la sienne, la page a la sienne. */
  background: var(--fond);
  color: var(--texte);
  padding: 4.6rem 0 4rem;
  border-bottom: 1px solid var(--texte);

  /* Garde-fou, pas correctif d'un defaut constate : l'oscilloscope et son
     etiquette sont pivotes, et le debordement d'une rotation COMPTE dans la
     largeur du document. Une page plus large que l'ecran rognerait tous les
     textes a droite. Ici la rotation reste dans la marge du conteneur, mais
     elle n'y resterait plus si on augmentait l'angle ou l'ombre.
     « clip » et non « hidden » : hidden ferait de la banniere une zone
     defilante, ce qui casserait le « position: sticky » de l'en-tete. */
  overflow-x: clip;
}

/* Le quadrillage : deux degrades d'un pixel, repetes tous les 28 px. Du papier
   millimetre, pour presque rien — ni image, ni requete. */
.banniere::before,
.banniere--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(#242a2610 1px, transparent 1px),
    linear-gradient(90deg, #242a2610 1px, transparent 1px);
  background-size: 28px 28px;
}

/* La photo de banniere ne porte plus le titre, elle donne de la matiere :
   desaturee, elle se lit sous le quadrillage. D'ou aussi la disparition du
   degrade de dissolution : il n'y a plus de zone sombre a raccorder a la page.

   22 %, ET PAS DAVANTAGE. Mesure sur la moitie gauche de la photo — celle qui
   passe sous le texte — desaturee puis melangee au creme, pire pixel :

       opacite    accent-fonce   accroche #3d443c   --texte
         18 %        5,39             5,96           8,68
         22 %        4,89             5,41           7,88   <- ici
         24 %        4,68             5,18           7,55
         26 %        4,44  SOUS LA BARRE

   C'est le surtitre qui limite, pas l'accroche : d'ou --accent-fonce plus bas,
   --accent ordinaire tombant deja a 4,61 des 9 %. Remonter au-dela de 24 %
   demanderait de renoncer a l'accent dans la banniere. */
.banniere__fond {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  opacity: .22;
  filter: grayscale(1);
}

/* Deux colonnes : le discours a gauche, l'instrument a droite. */
.banniere__composition {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 2.5rem;
  align-items: center;
}

/* Un element de grille refuse par defaut de descendre sous la largeur de son
   contenu — « min-width: auto ». Aux largeurs intermediaires, la colonne de
   l'oscilloscope se retrouve plus etroite que lui ; sans cette ligne, c'est la
   page qui s'elargit plutot que le dessin qui retrecit. */
.banniere__composition > * { min-width: 0; }

.banniere__texte { max-width: none; }

.banniere h1 {
  color: var(--texte);
  font-size: clamp(2.5rem, 4.7vw, 4.1rem);
  line-height: 1.06;
}

/* Le mot souligne du titre. <em> plutot qu'une <span class="...">: c'est bien
   une emphase, et un lecteur d'ecran doit l'entendre comme telle. */
.banniere h1 em {
  color: var(--accent);
  font-style: normal;
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: .14em;
}

/* Le surtitre est fonce ici, et seulement ici : il passe sur la photo, pas sur
   du creme nu. Avec --accent ordinaire, la banniere ne pourrait pas depasser
   9 % — voir le tableau sous .banniere__fond. L'accroche, elle, garde
   --texte-doux : mesuree a 4,93:1 sur cette photo a 22 %. */
.banniere .surtitre { color: var(--accent-fonce); margin-bottom: 1.7rem; }
.banniere .accroche {
  font-size: 1rem;
  max-width: 31rem;
  margin-top: 1.8rem;
}

.banniere__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.7rem 0 0; }

.surtitre {
  margin: 0 0 .5rem;
  font: 600 .7rem/1.6 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Le titre de section : un repere numerote, puis le titre. */
.section-entete { margin: 4.2rem 0 2rem; }
.section-entete h2 { margin: .5rem 0; }

/* L'etabli -------------------------------------------------------------

   Un oscilloscope dessine en CSS : aucune image, aucun script, quelques
   centaines d'octets. Il ne dit rien que le texte ne dise deja — c'est de la
   decoration, d'ou l'aria-hidden pose sur le bloc dans le gabarit. Un lecteur
   d'ecran n'a pas a epeler « ▥ ▥ ▥ ▥ ▥ ». */
.etabli { position: relative; padding: 2rem 0 5.2rem; }
.etabli__repere { font: .6rem var(--mono); letter-spacing: .12em; margin: 0 0 1rem 1rem; }

.oscillo {
  padding: 1.2rem;
  background: #dadbc9;
  border: 2px solid var(--texte);
  border-radius: 16px;
  box-shadow: 8px 9px 0 #242a26;
  transform: rotate(-4deg);
}

.oscillo__haut,
.oscillo__bas { display: flex; justify-content: space-between; font: 600 .55rem var(--mono); gap: .5rem; }
.oscillo__haut { margin-bottom: 1rem; }
.oscillo__bas { margin-top: 1rem; }
.oscillo__bas b { color: #516c25; }

.oscillo__corps { display: grid; grid-template-columns: 1fr 44px; gap: 1rem; }

.oscillo__ecran {
  position: relative;
  min-height: 175px;
  border: 7px solid #434b40;
  border-radius: 18px;
  background-color: #1e352e;
  background-image:
    linear-gradient(#bad8a519 1px, transparent 1px),
    linear-gradient(90deg, #bad8a519 1px, transparent 1px);
  background-size: 23px 23px;
  overflow: hidden;
}

/* La trace : un seul polygone, aller puis retour decale de trois points, ce
   qui donne un trait d'epaisseur constante sans dessiner deux formes. */
.oscillo__trace {
  position: absolute;
  inset: 25% 0 20%;
  background: #c8efa2;
  clip-path: polygon(0 52%, 24% 52%, 30% 38%, 36% 63%, 45% 0, 53% 95%, 61% 40%,
    68% 52%, 100% 52%, 100% 55%, 67% 55%, 61% 46%, 53% 100%, 45% 12%, 37% 70%,
    30% 44%, 25% 55%, 0 55%);
}

.oscillo__mesure { position: absolute; bottom: 10px; left: 10px; color: #c8efa2; font: .5rem var(--mono); }

.oscillo__reglages { display: flex; flex-direction: column; align-items: center; justify-content: space-around; }
.oscillo__reglages i {
  width: 33px;
  height: 33px;
  border: 6px solid #4d5449;
  border-radius: 50%;
  background: linear-gradient(90deg, #242a26 45%, #e2dfc5 45%, #e2dfc5 55%, #242a26 55%);
  box-shadow: 2px 2px 0 #888b78;
}
.oscillo__reglages span { font: .6rem/1.5 var(--mono); text-align: center; }

.etiquette {
  position: absolute;
  right: -.3rem;
  bottom: 2.3rem;
  transform: rotate(7deg);
  background: var(--orange);
  color: #242a26;
  border: 1px solid var(--texte);
  padding: 1rem 1.3rem;
  box-shadow: 4px 4px 0 #242a26;
}
.etiquette span { display: block; font: 600 .52rem/1.7 var(--mono); letter-spacing: .04em; }
.etiquette strong { display: block; font-size: 2rem; letter-spacing: -.05em; }

.etabli__note { font: .68rem/1.6 var(--mono); margin: 2rem 0 0 .8rem; max-width: 12rem; }

/* Bande de chiffres --------------------------------------------------- */
.bande {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
  padding-block: 2.2rem;
  border-bottom: 1px solid var(--texte);
}

.bande__chiffre { display: flex; align-items: center; gap: 1rem; flex: 1 1 24rem; }
.bande__chiffre p { margin: 0; color: var(--texte-doux); max-width: 13rem; font-size: .84rem; }
/* « .bande__chiffre .chiffre » et non « .chiffre » seul : la regle juste
   au-dessus vise « .bande__chiffre p », qui compte deux selecteurs et
   l'emporterait sur un seul — le chiffre resterait a la taille du texte. */
.bande__chiffre .chiffre {
  color: var(--accent);
  font-size: 3.5rem;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: -.07em;
}
.bande__texte {
  flex: 1 1 22rem;
  margin: 0;
  font-size: .9rem;
  border-left: 1px solid var(--bord);
  padding-left: 2rem;
}

/* Cartes -------------------------------------------------------------- */

/* Une grille jointive : les cartes ne sont plus des tuiles posees cote a cote
   mais les cases d'un meme tableau. D'ou gap: 0, et les filets portes par la
   grille a gauche et en haut, par chaque carte a droite et en bas — sinon les
   bordures doublent d'epaisseur aux jointures. */
.cartes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--texte);
  border-left: 1px solid var(--texte);
  counter-reset: service;
}

.carte {
  position: relative;
  background: var(--fond-carte);
  border: 0;
  border-right: 1px solid var(--texte);
  border-bottom: 1px solid var(--texte);
  border-radius: 0;
  padding: 1.8rem;
}

/* La numerotation vient du compteur CSS : ajouter ou retirer une carte
   renumerote tout seul, et le numero n'est pas dans le texte de la page. */
.carte::before {
  counter-increment: service;
  content: "0" counter(service) " /";
  display: block;
  font: .7rem var(--mono);
  color: var(--accent);
  margin-bottom: 2rem;
}

.carte h3 { font-size: 1.45rem; margin-bottom: .8rem; }
.carte p { margin: 0; color: var(--texte-doux); font-size: .92rem; }
.carte--accent { background: #e5eacb; }
.carte--accent p { color: var(--texte); }
.carte--accent .lien-fort { display: inline-block; margin-top: 1rem; }
.lien-fort { font-weight: 650; }

/* Interventions ------------------------------------------------------- */
.titre-page { padding-top: 2.5rem; }
.accroche { font-size: 1.15rem; color: var(--texte-doux); max-width: 40rem; }

.publics {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  margin-top: 1.5rem;
}

.public {
  background: var(--fond-carte);
  border: 1px solid var(--texte);
  border-top: 3px solid var(--accent);
  border-radius: var(--rayon);
  padding: 1.4rem;
}

.public h2 { margin: 0 0 .6rem; font-size: 1.2rem; }
.public p { margin: 0 0 .7rem; color: var(--texte-doux); }

.avertissement {
  font-weight: 650;
  color: var(--accent-fonce) !important;
  background: var(--accent-clair);
  border-radius: var(--rayon);
  padding: .4rem .7rem;
  display: inline-block;
}

/* Temoignages et galerie ---------------------------------------------- */
.temoignages, .galerie__grille {
  display: grid;
  gap: 1.7rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

/* Des tirages poses sur l'etabli : une marge blanche, un filet, une ombre
   franche — et la deuxieme legerement de travers, pour que la rangee n'ait pas
   l'air imprimee. */
.temoignage, .galerie figure {
  margin: 0;
  background: var(--fond-carte);
  border: 1px solid var(--texte);
  border-radius: 0;
  padding: .65rem;
  box-shadow: 4px 4px 0 var(--fond-appui);
}

.galerie figure:nth-child(2) { transform: rotate(2deg); }

.temoignage img, .galerie img {
  width: 100%;
  height: 16rem;
  object-fit: cover;
  display: block;
  background: var(--fond-appui);
  filter: saturate(.7);
}

/* Un temoignage sans photo : on remplace l'image par un filet d'accent, pour
   qu'il ait l'air voulu a cote de ceux qui en ont une. */
.temoignage--sans-photo {
  border-top: 3px solid var(--accent);
  display: flex;
  flex-direction: column;
  justify-content: center;   /* sans image, le texte se centre plutot que de
                                laisser un vide sous lui */
}

.temoignage blockquote { margin: 0; padding: 1rem 1.2rem .3rem; font-size: .98rem; }
.temoignage figcaption {
  padding: 0 1.2rem 1.1rem;
  color: var(--texte-doux);
  font-size: .88rem;
}
.galerie figcaption {
  padding: 1rem .3rem .4rem;
  font: .72rem/1.5 var(--mono);
  color: var(--texte);
}

.note { color: var(--texte-doux); font-size: .92rem; }

.appel {
  background: var(--fond-appui);
  border: 1px solid var(--texte);
  border-radius: var(--rayon);
  padding: 1.75rem;
  margin: 3rem auto;
  text-align: center;
}
.appel h2 { margin-top: 0; }

/* Contact ------------------------------------------------------------- */
.contact {
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  align-items: start;
  padding-bottom: 3rem;
}

@media (max-width: 46rem) {
  .contact { grid-template-columns: 1fr; }
}

.contact__coordonnees {
  background: var(--fond-carte);
  border: 1px solid var(--texte);
  border-radius: var(--rayon);
  padding: 1.4rem;
}
.contact__coordonnees h2 { margin: 0 0 .6rem; font-size: 1.15rem; }
.contact__coordonnees p { margin: 0 0 .7rem; }

.champ { margin: 0 0 1rem; display: flex; flex-direction: column; gap: .3rem; }
.champ label { font-weight: 600; font-size: .95rem; }
.requis { color: var(--accent); }

.champ input, .champ textarea {
  font: inherit;
  color: var(--texte);
  background: var(--fond-carte);
  border: 1px solid var(--texte-doux);
  border-radius: var(--rayon);
  padding: .6rem .7rem;
  width: 100%;
}

.champ input:focus, .champ textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.piege { position: absolute; left: -9999px; }

.message { border-radius: var(--rayon); padding: 1rem 1.2rem; margin-bottom: 1.5rem; }
.message p { margin: 0; }
.message ul { margin: .5rem 0 0; padding-left: 1.2rem; }
.message--ok { background: #e7f4ec; border: 1px solid #b6dcc5; color: #1c5334; }
.message--erreur { background: var(--accent-clair); border: 1px solid var(--accent); color: var(--accent-fonce); }

/* Boutons ------------------------------------------------------------- */

/* Un bouton tampon : fond encre, filet, et une ombre portee franche en orange
   plutot qu'un flou. Il se souleve au survol — d'ou la transition, coupee plus
   bas pour qui a demande moins d'animation. */
.bouton {
  display: inline-block;
  padding: .9rem 1.15rem;
  border-radius: var(--rayon);
  background: var(--texte);
  color: var(--fond-carte);
  text-decoration: none;
  font-weight: 650;
  font-size: .85rem;
  border: 1px solid var(--texte);
  box-shadow: 3px 3px 0 var(--orange);
  cursor: pointer;
  font-family: inherit;
  transition: transform .15s;
}
.bouton:hover { transform: translateY(-2px); background: var(--accent-fonce); border-color: var(--accent-fonce); }

.bouton--creux { background: var(--fond); color: var(--texte); box-shadow: none; }
.bouton--creux:hover { background: var(--fond-appui); color: var(--texte); border-color: var(--texte); }

@media (prefers-reduced-motion: reduce) {
  .bouton { transition: none; }
  .bouton:hover { transform: none; }
}

/* Pied ---------------------------------------------------------------- */
.pied {
  background: var(--encre);
  color: #e0e4d6;
  margin-top: 5rem;
  border-top: 6px solid var(--orange);
  padding: 2.25rem 0 1.25rem;
  font-size: .95rem;
}

.pied a { color: #e5ebf0; }
.pied p { margin: 0 0 .3rem; }
.pied__nom { font-weight: 700; color: #fff; font-size: 1.05rem; }

.pied__grille {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  padding-bottom: 1.5rem;
}

.pied__bas {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.5rem;
  justify-content: space-between;
  align-items: baseline;
  border-top: 1px solid #737d6c;
  padding-top: 1rem;
}

/* Version et date de compilation : presentes mais discretes. Pour les retirer,
   supprimer ce bloc et le paragraphe correspondant dans partials/pied.html. */
.pied__version { font-size: .8rem; opacity: .7; }

/* En-tete collant : sur les pages longues — galeries, catalogue — on garde la
   navigation sous la main sans devoir remonter.
   z-index 20 : au-dessus du contenu, mais sous la visionneuse de galerie (50),
   qui doit pouvoir le recouvrir.
   max-height : sur telephone, le menu deplie pourrait depasser l'ecran ; il
   devient defilant plutot que de tout recouvrir. */
.entete {
  position: sticky;
  top: 0;
  z-index: 20;
  max-height: 100vh;
  overflow-y: auto;
}

/* Une cible d'ancre ne doit pas se retrouver cachee derriere l'en-tete. */
:target { scroll-margin-top: 6rem; }

/* ---------- la photo de fond de page ----------

   L'INTERRUPTEUR EST SUR ARRET : photoFond vaut "" dans handlers.go, donc le
   gabarit n'emet pas l'image et cette regle ne sert a rien aujourd'hui. Elle
   reste, avec ses mesures, pour que rallumer ne demande pas de tout refaire.

   Ecartee apres essai : trop discrete on ne la voit pas, assez visible elle se
   bat avec le quadrillage et les ombres franches du parti « papier ».

   LES VALEURS, SI ON LA RALLUME. Le probleme de cette photo est une petite
   zone tres sombre — un classeur noir. C'est ELLE qui fixe la limite, pas
   l'ensemble : le pire pixel decide. Mesure sur les 43 680 pixels, le critere
   etant l'etendue VISIBLE (l'ecart de luminance entre le 5e et le 95e centile
   une fois melangee au creme) sous contrainte de 4,5:1 au pire pixel :

       --texte-doux   opacite max   etendue visible
         #555c53         15 %           0,15
         #434a41         25 %           0,28   <- le gris actuel
         #3d443c         30 %           0,32

   « brightness(1.3) » eclaircit surtout le classeur noir, ce qui remonte le
   pire pixel sans effacer le reste : c'est lui qui autorise les 25 %, ou le
   pire cas vaut 4,76:1. Sans ce filtre, la meme opacite tombe a 3,9.

   Elle ne se verrait ni dans la banniere, ni dans l'en-tete, ni dans le pied :
   ces trois-la ont un fond opaque, pour que deux photos ne se superposent
   jamais — voir .banniere.

   « fixed » plutot que « background-attachment: fixed » : Safari sur iPhone
   repeint la page a chaque mouvement du doigt avec ce dernier. */
.fond-page {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  opacity: .25;
  filter: brightness(1.3);
  pointer-events: none;
}

/* Adaptations ---------------------------------------------------------- */

@media (max-width: 62rem) {
  .banniere__composition { gap: 2rem; }
  .banniere h1 { font-size: 3rem; }
  .banniere__actions { flex-direction: column; align-items: flex-start; }
  .oscillo { padding: .8rem; }
  .oscillo__ecran { min-height: 150px; }
  .etiquette { right: 0; }
}

@media (max-width: 48rem) {
  .banniere, .banniere--photo { padding: 2.5rem 0; }
  .banniere__composition { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .banniere h1 { font-size: clamp(2.35rem, 8vw, 3.6rem); }

  .etabli { width: min(100%, 430px); margin: auto; padding-top: 1rem; }
  .etabli__repere { margin-left: 0; }
  .oscillo { margin-inline: .8rem; }

  .cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .carte { padding: 1.25rem; }
  .bande__texte { border-left: 0; padding-left: 0; }
  .section-entete { margin-top: 3rem; }

  .galerie__grille { grid-template-columns: 1fr; }
  .galerie figure:nth-child(2) { transform: none; }
  .galerie img { height: 19rem; }
}

@media (max-width: 30rem) {
  .cartes { grid-template-columns: minmax(0, 1fr); }
  .carte::before { margin-bottom: 1rem; }
  .bande__chiffre { flex-wrap: wrap; }
  .etiquette { padding: .8rem; }
  .etiquette strong { font-size: 1.6rem; }
  .oscillo__haut { font-size: .46rem; }
  .etabli__note { font-size: .57rem; max-width: 10rem; }
}