/* boitier-resistances.css — page d'element : le carnet.
   Une figure pleine coquille, un texte bride a 68ch, rien d'autre.

   Un seul rayon de coin sur cette page : 4 px. Le reste du site en compte
   encore cinq (voir §14 « Reste ouvert » de la spec d'ossature) ; autant ne
   pas en ajouter un sixieme. */

/* ------------------------------------------------------------- les figures */

/* Les figures sont des vignettes : a pleine coquille, une photo ecrasait le
   texte et forcait a defiler pour lire la suite. On les reduit et on les
   centre ; le clic les ouvre en grand (visionneuse.js, ou le lien seul sans
   script). La legende suit la vignette, centree sous elle. */
.figure {
  margin-block: 2.2rem;
  text-align: center;
}

.figure img,
.figure video {
  width: 100%;
  max-width: min(100%, 30rem);
  margin-inline: auto;
  border-radius: var(--rayon);
}

.figure figcaption {
  max-width: 68ch;
  margin: 0.7rem auto 0;
  color: var(--texte-2);
  font-size: var(--t-s);
  line-height: 1.5;
}

.agrandir {
  display: block;
  cursor: zoom-in;
}

/* La photo d'ouverture montre l'objet fini : le lecteur doit comprendre
   d'un coup d'oeil ce qui a ete fabrique. Seule figure plus grande que les
   vignettes. Elle est en hauteur : bridee par la hauteur de l'ecran, pour
   que le titre et le chapo restent visibles au-dessus. */
.hero img {
  width: auto;
  max-width: 100%;
  max-height: min(70vh, 40rem);
}

/* Les rendus CAO sortent du logiciel avec un fond transparent : ils se posent
   directement sur le fond de la page, sans cadre ni planche blanche. Un coin
   arrondi sur une image detouree n'aurait rien a arrondir — d'ou le rayon
   remis a zero ici. */
.rendu img {
  border-radius: 0;
  max-width: min(100%, 20rem);
}

/* ------------------------------------------------------------ les chapitres */

/* Un chapitre = un titre, un texte court, une figure. Sur grand ecran, le
   texte a gauche et sa figure a droite : on lit les deux d'un coup d'oeil au
   lieu de defiler sous l'image pour trouver la suite. Toujours dans ce sens,
   jamais en alternance — le texte se lit de haut en bas sans chercher de quel
   cote il est. Sur telephone, une colonne : texte, puis figure. */
.chapitre {
  margin-block: 2.6rem;
}

.chapitre h2 {
  margin-top: 0;
}

/* Separateur entre deux chapitres : un filet qui s'efface vers les bords,
   et sous lui une ombre douce, comme une rainure dans la page. Le filet
   reprend --filet-fort ; l'ombre est un noir transparent, plus appuye en
   mode sombre ou un noir leger ne se verrait pas sur le fond. */
.chapitre + .chapitre {
  --ombre-filet: rgb(0 0 0 / 0.14);
  position: relative;
  padding-top: 2.6rem;
}

@media (prefers-color-scheme: dark) {
  .chapitre + .chapitre { --ombre-filet: rgb(0 0 0 / 0.55); }
}

.chapitre + .chapitre::before,
.chapitre + .chapitre::after {
  content: "";
  position: absolute;
  inset-inline: 8%;
  top: 0;
}

.chapitre + .chapitre::before {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--filet-fort), transparent);
}

.chapitre + .chapitre::after {
  top: 1px;
  height: 0.7rem;
  background: radial-gradient(ellipse 50% 100% at 50% 0, var(--ombre-filet), transparent);
}

.chapitre .figure {
  margin-block: 1.4rem 0;
}

@media (min-width: 48rem) {
  .chapitre:has(.figure) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2.5rem;
    align-items: center;
  }

  .chapitre .figure {
    margin: 0;
  }
}

/* Le schema de la serie E12 se range sous le rendu du tiroir, dans la
   colonne des figures comme toutes les autres ; le texte du chapitre
   s'etend sur la hauteur des deux. Le schema contient du texte : trop petit
   a cette taille pour etre lu confortablement, le clic l'ouvre en grand. */
.chapitre .schema {
  margin-top: 2rem;
}

@media (min-width: 48rem) {
  .chapitre .schema {
    grid-column: 2;
    margin-top: 0;
  }

  .chapitre:has(.schema) .texte {
    grid-row: span 2;
  }
}

/* ------------------------------------------------------------ la galerie */

/* Trois vues du boitier fini, cote a cote sur une seule rangee, meme sur
   telephone : petites, mais le clic les ouvre en grand. Photos detourees,
   donc sans coin arrondi, posees directement sur le fond. */
.galerie {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.5rem, 3vw, 2rem);
  margin-top: 1.6rem;
}

.galerie img {
  width: 100%;
}

/* --------------------------------------------------------------- la video */

/* Les fichiers video sont reecrits en faststart (moov avant mdat) : le
   navigateur obtient les metadonnees en une requete de quelques kilo-octets
   au lieu d'aller chercher la fin du fichier. preload="metadata" ne coute
   donc presque rien, et affiche la premiere image au lieu d'un cadre noir.
   Pas de lecture automatique : ce serait une animation, et la spec impose
   qu'une animation soit conditionnee a prefers-reduced-motion, ce qu'on ne
   sait pas faire sur une video sans JavaScript. */
.figure video {
  display: block;
  background: var(--surface);
}

/* ---------------------------------------------------------- la visionneuse */

/* Creee par visionneuse.js. Le fond reprend l'encre la plus sombre des
   halos de l'en-tete, pour rester dans la palette. Pas d'animation
   d'ouverture : rien a garder derriere prefers-reduced-motion. */
.visionneuse {
  max-width: 100vw;
  max-height: 100dvh;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-out;
}

.visionneuse::backdrop {
  background: rgb(20 25 32 / 0.92);
}

.visionneuse img {
  max-width: 94vw;
  max-height: 92dvh;
  border-radius: var(--rayon);
}

.visionneuse .fermer {
  position: fixed;
  top: 0.75rem;
  right: 0.75rem;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: var(--rayon);
  background: transparent;
  color: var(--bandeau);
  font: inherit;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}

.visionneuse .fermer:focus-visible {
  outline-color: var(--accent-clair);
}