/* =====================================================================
   Site d'Adrien Reboisson — feuille de style commune
   Référence : largeur bureau 1280 px (les maquettes d'origine sont archivées hors du site).
   Sommaire :
     1. Polices auto-hébergées
     2. Couleurs et réglages de base
     3. Page, en-tête, pied de page
     4. Grilles et gabarits
     5. Éléments communs (petits titres, emplacements d'image, sommaires)
     6. Notes de marge
     7. Accueil
     8. Instruments et vidéos
     9. Activités (enregistrements)
    10. Ressources (index, articles, dossiers)
    11. Petits écrans (moins de 800 px)
   ===================================================================== */


/* ---------- 1. Polices auto-hébergées (licence OFL) ---------- */

@font-face {
  font-family: "EB Garamond";
  src: url("/assets/fonts/eb-garamond-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("/assets/fonts/eb-garamond-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("/assets/fonts/eb-garamond-400-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "IM Fell English";
  src: url("/assets/fonts/im-fell-english-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IM Fell English";
  src: url("/assets/fonts/im-fell-english-400-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "IM Fell English SC";
  src: url("/assets/fonts/im-fell-english-sc-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/fonts/instrument-sans-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/fonts/instrument-sans-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}


/* ---------- 2. Couleurs et réglages de base ---------- */

:root {
  --background:  #FBFAF7;  /* blanc cassé, fond de toutes les pages */
  --ink:         #1F1A17;  /* texte et filets principaux */
  --accent:      #A8321F;  /* vermillon : lettrines, appels de note, élément actif, petits titres */
  --ink-soft:    #4A413A;  /* notes de marge, légendes */
  --grey-meta:   #5A5048;  /* métadonnées, fil d'Ariane */
  --grey-footer: #6B6259;  /* pied de page, mentions discrètes */
  --rule-light:  #D9CFBD;  /* séparateurs secondaires */
  --hatch:       #EAE2D2;  /* emplacements d'image */

  /* Piles de polices, avec repli */
  --font-text:      "EB Garamond", Georgia, serif;
  --font-title:     "IM Fell English", Georgia, serif;
  --font-site-name: "IM Fell English SC", Georgia, serif;
  --font-sans:      "Instrument Sans", system-ui, sans-serif;

  /* Écart entre les colonnes */
  --gap: 52px;
}

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  /* Frise ornementale en haut de page (reprise de l'ancien site), répétée en largeur.
     « multiply » fond le blanc de l'image dans la couleur de fond : pas de démarcation. */
  background: var(--background) url("/assets/img/frise.jpg") repeat-x left top;
  background-blend-mode: multiply;
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 20px;
  line-height: normal;
}

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--accent); }

/* Liens placés dans le texte courant (paragraphes, listes) : soulignement fin vermillon,
   pour qu'ils se repèrent sans survol. Menus, sommaires et titres n'en ont pas. */
.text-column p a,
.text-column li a {
  text-decoration: underline;
  text-decoration-color: rgba(168, 50, 31, 0.4); /* --accent à 40 % : discret */
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.text-column p a:hover,
.text-column li a:hover { text-decoration-color: var(--accent); }

img, svg { max-width: 100%; }
img { height: auto; }

h1, h2, h3, p, figure, blockquote { margin: 0; }

/* Exposants ordinaires (XIIe siècle…) : ne pas déranger l'interligne */
sup { line-height: 0; }


/* ---------- 3. Page, en-tête, pied de page ---------- */

/* Conteneur : 1136 px utiles, soit 1280 px moins 72 px de chaque côté */
.page {
  box-sizing: border-box;
  width: min(1136px, 100% - 32px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 56px 0 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* En-tête : nom · menu · sélecteur de langue, alignés sur la ligne de base */
.site-header {
  display: flex;
  align-items: baseline;
  gap: 48px;
}
.site-name {
  font-family: var(--font-site-name);
  font-size: 32px;
  letter-spacing: 0.02em;
}
.menu {
  display: flex;
  gap: 24px;
  font-family: var(--font-sans);
  font-size: 15px;
}
.menu a[aria-current] {
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
}
.languages {
  margin-left: auto;
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0.1em;
}
.languages .current-language {
  font-weight: 500;
  color: var(--accent);
}

/* Double filet sous l'en-tête */
.double-rule {
  height: 3px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--accent);
}

/* Pied de page, collé en bas */
.site-footer {
  margin-top: auto;
  border-top: 1px solid var(--rule-light);
  padding-top: 14px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--grey-footer);
}
.site-footer a { color: var(--grey-footer); }
.site-footer a:hover { color: var(--accent); }
/* Un peu d'air au-dessus du pied de page */
.content { margin-bottom: 40px; }


/* ---------- 4. Grilles et gabarits ---------- */

/* Grille libre de 12 colonnes */
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap);
}
.grid > * { grid-column: var(--start, auto) / span var(--span, 12); }

/* Gabarits nommés : colonnes exactes à 1280 px.
   --notes-ratio = largeur de la colonne de notes / largeur du texte,
   utilisé pour placer les notes de marge (section 6). */
.layout-home,
.layout-article,
.layout-wide,
.layout-full {
  display: grid;
  column-gap: var(--gap);
  padding-top: 36px;
  align-items: start;
}

/* photo · texte (240 + 52 + 844 = 1136).
   Pas de colonne de notes sur l'accueil : le texte prend toute la largeur
   et les notes s'affichent sous leur paragraphe (voir section 6). */
.layout-home {
  grid-template-columns: minmax(0, 240fr) minmax(0, 844fr);
}
/* Sans photo, le texte commence en colonne 1 */
.layout-home:not(:has(> .photo-column)) {
  grid-template-columns: minmax(0, 1fr);
}
.layout-home:not(:has(> .photo-column)) > .text-column { grid-column: 1; }

/* navigation · texte · notes (200 · 620 · 230) */
.layout-article {
  grid-template-columns: minmax(0, 200fr) minmax(0, 620fr) minmax(0, 230fr);
  --notes-ratio: calc(230 / 620);
}
/* À 1280 px et plus : largeurs exactes de la maquette
   (la colonne de notes déborde de 18 px dans la marge, comme sur la maquette) */
@media (min-width: 1280px) {
  .layout-article { grid-template-columns: 200px 620px 230px; }
}

/* navigation · contenu large (200 · 884) */
.layout-wide {
  grid-template-columns: minmax(0, 200fr) minmax(0, 884fr);
}

/* contenu seul, sur toute la largeur (1136) : ni navigation ni notes (ex. Mentions légales) */
.layout-full {
  grid-template-columns: minmax(0, 1fr);
}
.layout-full > .text-column { grid-column: 1; }

/* Placement des colonnes dans les gabarits */
.photo-column { grid-column: 1; }
.nav-column   { grid-column: 1; }
.text-column { grid-column: 2; min-width: 0; }
.margin-column { grid-column: 3; }


/* ---------- 5. Éléments communs ---------- */

/* Petit titre : « Derniers écrits », « Sur cette page »… */
.small-heading {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Métadonnées (dates, ensembles…) */
.meta {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--grey-meta);
}

/* Titres de page */
.page-title {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: 52px;
  line-height: 1.05;
}
.section-title {
  font-family: var(--font-title);
  font-weight: 400;
  font-style: italic;
  font-size: 36px;
}

/* Texte courant */
.text-column p { font-size: 20px; line-height: 1.55; }

/* Textes principaux : toujours justifiés, avec césure automatique
   (dans la langue de la page) pour éviter les grands blancs entre les mots.
   Les textes courts ou secondaires (résumés, notes, citations) restent alignés à gauche. */
.text-column p {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.text-column .entry-summary,
.text-column .sidenote,
.text-column .notes-below p,
.text-column .bilingual-quote p {
  text-align: left;
  hyphens: manual;
  -webkit-hyphens: manual;
}

/* Texte lu par les lecteurs d'écran seulement */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Appel de note */
sup.note-ref { color: var(--accent); }

/* Emplacement d'image hachuré, en attendant les vraies images */
.image-placeholder {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 20px;
  background: repeating-linear-gradient(135deg,
    var(--rule-light) 0px, var(--rule-light) 2px,
    var(--hatch) 2px, var(--hatch) 14px);
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink);
}

/* Sommaire de gauche (« Sur cette page », « Sommaire du dossier »…).
   C'est un <details> : repliable sur mobile, toujours déplié sur bureau. */
.toc {
  font-family: var(--font-sans);
  font-size: 14px;
}
.toc > summary {
  display: block;
  list-style: none;
  margin-bottom: 10px;
}
.toc > summary::-webkit-details-marker { display: none; }
.toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.toc li a { display: block; padding-left: 14px; }
/* Élément courant : bordure gauche vermillon */
.toc li a[aria-current] {
  padding-left: 10px;
  border-left: 4px solid var(--accent);
  font-weight: 500;
}
/* Nom du dossier, au-dessus de la liste des parties (sans retrait ni bordure) */
.toc li a.toc-series { padding-left: 0; border-left: 0; font-weight: 500; }

@media (min-width: 800px) {
  /* Sur bureau, le sommaire reste toujours déplié */
  .toc::details-content { content-visibility: visible; display: contents; }
  .toc > summary { cursor: default; pointer-events: none; }
}

/* Navigation simple (article isolé : lien vers Ressources seulement) */
.simple-nav {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
}


/* ---------- 6. Notes de marge ---------- */

/* La note est écrite dans le paragraphe, juste après son appel :
     …ménétriers<sup class="note-ref">1</sup><span class="sidenote"><span class="num">1</span> Texte.</span>…
   Sur bureau, elle flotte dans la colonne de droite, alignée sur la ligne de son appel.
   Sa largeur est calculée à partir de celle du texte (--notes-ratio du gabarit). */
.sidenote {
  float: right;
  clear: right;
  width: calc(100% * var(--notes-ratio, 0.37));
  margin-right: calc(-100% * var(--notes-ratio, 0.37) - var(--gap));
  margin-bottom: 22px;
  font-family: var(--font-text);
  font-size: 15px;
  line-height: 1.45;
  font-style: italic;
  font-weight: 400;
  color: var(--ink-soft);
}
/* Numéro de la note : en romain (droit), vermillon */
.sidenote .num { color: var(--accent); font-style: normal; }
/* Italique dans une note : repasse en romain */
.sidenote em, .sidenote cite { font-style: normal; }

/* Copie des notes sous le paragraphe (générée par PHP).
   Affichée sur mobile, et sur l'accueil à toutes les largeurs (pas de colonne de notes). */
.notes-below {
  display: none;
  padding-left: 12px;
  border-left: 1px solid var(--rule-light);
}
.text-column .notes-below p {
  font-size: 15px;
  line-height: 1.45;
  font-style: italic;
  color: var(--ink-soft);
}
.text-column .notes-below p + p { margin-top: 8px; }
.notes-below .num { color: var(--accent); font-style: normal; }
.notes-below em, .notes-below cite { font-style: normal; }

/* Gabarits sans colonne de notes (accueil, large) : notes sous leur paragraphe */
.layout-home .sidenote,
.layout-wide .sidenote { display: none; }
.layout-home .notes-below,
.layout-wide .notes-below { display: block; }

/* Colonne de marge libre (ex. mention sur l'index des ressources) */
.margin-column {
  padding-top: 150px; /* comme sur la maquette de l'index des ressources */
  display: flex;
  flex-direction: column;
  gap: 22px;
  font-size: 15px;
  line-height: 1.45;
  font-style: italic;
  color: var(--ink-soft);
}
.margin-column .normal { font-style: normal; }


/* ---------- 7. Accueil ---------- */

.home-photo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;  /* ne pas étirer l'image « taille réelle » sur toute la largeur */
  gap: 8px;
}
.home-photo .image-placeholder { height: 340px; }
.home-photo img { display: block; width: 100%; height: 340px; object-fit: cover; }
/* Image affichée à sa taille réelle (petite image de l'ancien site, à ne pas agrandir) */
.home-photo img.actual-size { width: auto; height: auto; max-width: 100%; }
.home-photo figcaption {
  font-size: 14px;
  font-style: italic;
  color: var(--ink-soft);
}
/* Crédit photo : en petit, discret */
.home-photo .photo-credit {
  font-family: var(--font-sans);
  font-size: 11px;
  font-style: normal;
  color: var(--grey-footer);
}

/* Pas de flex dans les colonnes de texte : les notes de marge flottantes
   doivent pouvoir déborder de leur paragraphe. Espacement par marges. */
.home-text > * + * { margin-top: 18px; }
.home-text h1 {
  font-family: var(--font-title);
  font-weight: 400;
  font-style: italic;
  font-size: 44px;
  line-height: 1.1;
}

/* Lettrine : chaque page de texte suivi commence par une lettrine.
   - accueil, bio… : ajouter class="drop-cap" au premier paragraphe ;
   - ressources (articles, parties, index de dossier) : automatique,
     sur le premier paragraphe qui suit la date (ou le titre, si la date est masquée). */
.drop-cap::first-letter,
.resource > .meta + p::first-letter,
.resource > .page-title + p::first-letter {
  float: left;
  font-family: var(--font-title);
  font-size: 96px;
  line-height: 0.78;
  padding: 6px 10px 0 0;
  color: var(--accent);
}

/* Dernier enregistrement · dernière ressource */
.latest-items {
  margin-top: 34px;
  border-top: 1px solid var(--ink);
  padding-top: 16px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
}
.latest {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.latest-cover,
.latest-cover.image-placeholder {
  width: 110px;
  height: 110px;
  flex-shrink: 0;
  padding: 0;
  font-size: 11px;
  object-fit: cover;
}
.latest-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.latest-title { font-size: 22px; }
.latest-title.italic { font-style: italic; }


/* ---------- 8. Instruments et vidéos ---------- */

.instruments {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.instrument {
  display: flex;
  flex-direction: column;
  gap: 18px;
  scroll-margin-top: 24px;
}
/* Filet entre les instruments */
.instrument + .instrument {
  border-top: 1px solid var(--ink);
  padding-top: 30px;
}
.instrument h2 {
  font-family: var(--font-title);
  font-weight: 400;
  font-style: italic;
  font-size: 38px;
}
.instrument-intro p {
  font-size: 19px;
  line-height: 1.55;
}
.instrument-intro p + p { margin-top: 14px; }

.videos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.video {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Bouton de lecture : image locale 16/9, pastille ronde et triangle vermillon */
.video-play {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  /* Hachures sombres si la vignette est absente */
  background: repeating-linear-gradient(135deg,
    #3A322C 0px, #3A322C 2px, #2A2420 2px, #2A2420 14px);
}
.video-play img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-play-icon { position: relative; width: 46px; height: 46px; }
.video-play-icon circle { fill: var(--background); }
.video-play:hover .video-play-icon circle,
.video-play:focus-visible .video-play-icon circle { fill: #FFFFFF; }
.video-play:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.video iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
}
.video figcaption { font-size: 17px; line-height: 1.3; }
/* Mention unique sous le titre de la page Instruments (au lieu d'une par vidéo) */
.text-column .video-notice {
  margin-top: -14px;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.4;
  color: var(--grey-meta);
  text-align: left;
}


/* ---------- 9. Activités ---------- */

.activities > * + * { margin-top: 16px; }
.activities > h2 { margin-top: 24px; scroll-margin-top: 24px; }         /* 16 + 8 sous le H1 */
.activities > h2 + * ~ h2 { margin-top: 42px; }                          /* 16 + 26 */

.records {
  list-style: none;
  margin-inline: 0;
  margin-bottom: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.record {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule-light);
}
.record-cover {
  display: block;
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  object-fit: cover;
}
.record-cover.image-placeholder {
  padding: 0;
  background: repeating-linear-gradient(135deg,
    var(--rule-light) 0px, var(--rule-light) 2px,
    var(--hatch) 2px, var(--hatch) 12px);
}
.record-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.record-title { font-size: 20px; }
.record-award { color: var(--accent); }
.record-year {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--accent);
  margin-right: 10px;
}


/* ---------- 10. Ressources ---------- */

/* Index : table des matières */
.resources-intro { margin-top: 14px; }
.topic {
  margin-top: 40px;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: 26px;
  font-variant: small-caps;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 6px;
  scroll-margin-top: 24px;
}
.entry {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule-light);
}
.entry-title {
  font-family: var(--font-title);
  font-style: italic;
  font-size: 30px;
  line-height: 1.15;
}
.text-column .entry-summary { font-size: 19px; line-height: 1.45; }
.entry-summary .meta { white-space: nowrap; }
/* Entrée avec illustration carrée à gauche (un peu plus grande que les pochettes de disques) */
.entry-illustrated {
  flex-direction: row;
  align-items: flex-start;
  gap: 22px;
}
.entry-illustration {
  display: block;
  width: 96px;
  height: 96px;
  flex-shrink: 0;
  object-fit: cover;
}
.entry-illustration.image-placeholder { padding: 0; }
.entry-illustration-link { display: block; flex-shrink: 0; }
.entry-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
} /* « — Article · date » d'un seul tenant */
.entry-parts {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-left: 18px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--grey-meta);
}
.dot { color: var(--accent); }

/* Fil d'Ariane */
.breadcrumb {
  padding-top: 8px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--grey-meta);
}
.breadcrumb .separator { color: var(--accent); }
/* Sous le fil d'Ariane : 14 px + 24 px, comme sur la maquette */
.breadcrumb + .layout-article,
.breadcrumb + .layout-wide { padding-top: 38px; }

/* Article ou partie de dossier */
.resource > * + * { margin-top: 18px; }
/* Listes dans le texte d'une ressource : même corps que les paragraphes */
.resource ul { margin-bottom: 0; padding-left: 1.2em; }
.resource li {
  font-size: 20px;
  line-height: 1.6;
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.resource li + li { margin-top: 8px; }
.resource li strong { font-weight: 500; }
.resource > .figure { margin-top: 24px; }
.resource > .prev-next { margin-top: 34px; }
.resource p { line-height: 1.6; }
.resource > h2 {
  margin-top: 28px;
  font-family: var(--font-text);
  font-weight: 400;
  font-style: italic;
  font-size: 28px;
}

/* Citation « original / traduction » en deux colonnes entre deux filets */
.bilingual-quote {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: 16px 0;
  font-size: 18px;
  line-height: 1.5;
}
.text-column .bilingual-quote p { font-size: 18px; line-height: 1.5; }
.bilingual-quote .original { font-style: italic; }
.bilingual-quote .translation { color: var(--ink-soft); }

/* Figure numérotée */
.figure {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.figure .image-placeholder { height: 230px; font-size: 13px; }
.figure img { display: block; width: 100%; }
.figure figcaption {
  font-size: 15px;
  line-height: 1.45;
  font-style: italic;
  color: var(--ink-soft);
}
.figure .fig-num { color: var(--accent); font-style: normal; }

/* Liens partie précédente / suivante */
.prev-next {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--accent);
  font-family: var(--font-sans);
  font-size: 14px;
}
.prev-next .next { margin-left: auto; text-align: right; }

/* Sommaire d'un dossier (sur son index) */
.resource > .series-parts { margin-top: 28px; }
.series-parts .entry:first-child { border-top: 1px solid var(--ink); }
.series-parts .entry-title { font-size: 26px; }


/* ---------- Calculateur de tubes pour hautbois (Ressources) ---------- */

.calculator { clear: both; margin-top: 28px; padding-top: 16px; } /* sous la lettrine éventuelle */
.calc-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.calc-field label {
  font-family: var(--font-sans);
  font-size: 14px;
}
.calc-field input {
  box-sizing: border-box;
  width: 9em;
  padding: 6px 8px;
  border: 1px solid var(--grey-meta);
  border-radius: 0;
  background: #FFFFFF;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
}
.calc-field input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.calc-field input.calc-invalid { border-color: var(--accent); }
.calc-error {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--accent);
}
.calc-error:empty { display: none; }

/* Épaisseur : réglage commun, au-dessus des deux blocs */
.calc-thickness {
  padding-bottom: 20px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--rule-light);
}

/* Deux blocs côte à côte */
.calc-blocks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
}
.calc-block {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
/* Schéma coté en tête de chaque bloc, centré dans sa colonne */
.calc-diagram { margin: 0 0 24px; text-align: center; }
.calc-diagram img { display: inline-block; height: 300px; width: auto; max-width: 100%; }
/* Symboles des cotes dans les libellés (comme sur les schémas) */
.calc-field label i { font-family: var(--font-text); font-size: 17px; }
.calc-field label sub { font-size: 11px; line-height: 0; }

.calc-block legend {
  padding: 0;
  margin-bottom: 16px;
  font-family: var(--font-text);
  font-style: italic;
  font-size: 28px;
  line-height: 1.3;
}

/* Résultats */
.calc-results {
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--ink);
}
.calc-results dl {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
  gap: 8px 24px;
  margin: 12px 0 0;
  font-family: var(--font-sans);
  font-size: 15px;
}
.calc-results dd { margin: 0; font-weight: 500; }
.calc-results output { font-variant-numeric: tabular-nums; }

.calc-no-js { font-size: 17px; }

/* ---------- Outil de recoupe de tube (Ressources) : compléments ---------- */

/* Le tube de départ : schéma à gauche, champs à droite, filet dessous */
.calc-start {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 var(--gap);
  align-items: start;
  margin: 0 0 28px;
  padding: 0 0 20px;
  border: 0;
  border-bottom: 1px solid var(--rule-light);
  min-width: 0;
}
.calc-start > legend {
  float: left;          /* place la légende dans la grille, comme un titre */
  grid-column: 1 / -1;
  padding: 0;
  margin-bottom: 16px;
  font-family: var(--font-text);
  font-style: italic;
  font-size: 28px;
  line-height: 1.3;
}
.calc-start .calc-diagram { margin: 0; }
/* Un seul schéma visible à la fois (par le bas ou par le haut, choisi par le script) */
.calc-diagram img[hidden] { display: none; }
.calc-start-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--gap);
  align-content: start;
}
.calc-info {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  font-family: var(--font-sans);
  font-size: 15px;
}
.calc-info output { font-weight: 500; font-variant-numeric: tabular-nums; }

/* Choix du côté de la recoupe (par le bas / par le haut) */
.calc-block .calc-side {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
  font-family: var(--font-sans);
  font-size: 15px;
}
.calc-block .calc-side legend {
  width: 100%;
  margin-bottom: 6px;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 14px;
  line-height: inherit;
}
.calc-side label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.calc-side input { margin: 0; accent-color: var(--accent); }

/* Deux listes de résultats par bloc : un peu d'air avant la seconde,
   et une première colonne de même largeur pour que les valeurs soient alignées */
.calc-results dl + .small-heading { margin-top: 20px; }
#recoupe-tubes .calc-results dl { grid-template-columns: 14em auto; }

/* ---------- Pages simples (bio, contact, mentions légales) ---------- */

/* Image de la page Contact (colonne de gauche), affichée à sa taille réelle */
.contact-image img { display: block; width: 114px; height: auto; }

.plain-text > * + * { margin-top: 18px; }
/* Paragraphe de conclusion (page Bio) : détaché par un espace (et sa lettrine) */
.plain-text > .conclusion {
  margin-top: 40px;
  padding-top: 28px;
}
.plain-text > h2 {
  margin-top: 28px;
  font-family: var(--font-title);
  font-weight: 400;
  font-style: italic;
  font-size: 36px;
}


/* ---------- 11. Petits écrans (moins de 800 px) ---------- */

@media (max-width: 799px) {
  .page { padding: 28px 0 28px; }

  /* Le menu passe à la ligne sous le nom */
  .site-header { flex-wrap: wrap; gap: 8px 24px; }
  .site-name { font-size: 28px; }
  .languages { order: 2; }
  .menu { order: 3; width: 100%; flex-wrap: wrap; gap: 6px 20px; }

  /* Toutes les colonnes s'empilent */
  .layout-home,
  .layout-home:not(:has(> .photo-column)),
  .layout-article,
  .layout-wide,
  .layout-full {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 28px;
    padding-top: 24px;
  }
  .margin-column { padding-top: 0; }
  .breadcrumb + .layout-article,
  .breadcrumb + .layout-wide { padding-top: 20px; }
  .photo-column, .nav-column, .text-column, .margin-column,
  .layout-home:not(:has(> .photo-column)) > .text-column { grid-column: 1; }

  /* Sommaire repliable, placé avant le texte */
  .toc {
    border-top: 1px solid var(--rule-light);
    border-bottom: 1px solid var(--rule-light);
    padding: 10px 0;
  }
  .toc > summary { cursor: pointer; margin-bottom: 0; }
  .toc > summary::after { content: " +"; }
  .toc[open] > summary::after { content: " −"; }
  .toc[open] > summary { margin-bottom: 10px; }

  /* Les notes de marge s'affichent en bloc sous le paragraphe qui les appelle */
  .sidenote { display: none; }
  .notes-below { display: block; }

  .page-title { font-size: 40px; }
  .home-text h1 { font-size: 36px; }
  .instrument h2 { font-size: 32px; }
  .section-title, .plain-text h2 { font-size: 30px; }
  .drop-cap::first-letter,
  .resource > .meta + p::first-letter,
  .resource > .page-title + p::first-letter { font-size: 80px; }
  .text-column p { font-size: 19px; }

  .home-photo .image-placeholder { height: 240px; }
  /* Photo entière, jamais recadrée (un portrait recadré en bandeau coupait la tête),
     à sa largeur du bureau */
  .home-photo img { height: auto; max-width: 240px; }
  .home-photo img.actual-size { height: auto; }


  .latest-items { grid-template-columns: minmax(0, 1fr); gap: 24px; }

  .videos { grid-template-columns: minmax(0, 1fr); }

  .bilingual-quote { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .calc-blocks { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  /* Outil de recoupe : schéma du tube de départ au-dessus de ses champs, champs en une colonne */
  .calc-start { grid-template-columns: minmax(0, 1fr); }
  .calc-start .calc-diagram { margin-bottom: 24px; }
  .calc-start-fields { grid-template-columns: minmax(0, 1fr); }
  .entry-title { font-size: 26px; }
  .entry-parts { padding-left: 0; }
}