/* Base de consultation des Chroniques de la Recherche, charte graphique de Christophe Deschamps (v2). */

@font-face { font-family: "Spectral"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../fonts/spectral-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Spectral"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../fonts/spectral-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Spectral"; font-weight: 400; font-style: italic; font-display: swap;
  src: url("../fonts/spectral-400-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Spectral"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("../fonts/spectral-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Spectral"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("../fonts/spectral-600-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Spectral"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("../fonts/spectral-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Sans 3"; font-weight: 200 900; font-style: normal; font-display: swap;
  src: url("../fonts/source-sans-3-variable-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Sans 3"; font-weight: 200 900; font-style: normal; font-display: swap;
  src: url("../fonts/source-sans-3-variable-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../fonts/ibm-plex-mono-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("../fonts/ibm-plex-mono-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Palette calée sur le thème en ligne d'outilsfroids.net (theme.json), pour que l'onglet L'atelier
   ne change pas d'univers : papier chaud et bleu du site, mêmes noms de jetons que la charte. */
:root {
  --papier: #F9F6F0; --blanc: #FFFFFF; --brume: #EFE9DF; --filet: #E2DACB;
  --ardoise: #4C5F6B; --encre: #15232B;
  --bleu-froid: #1A4A73; --bleu-moyen: #2B6A9E; --bleu-pale: #DFE7F1;
  --terracotta: #B85042; --terracotta-pale: #F6E2DE;
  --vert: #4A6B3A;
  --titre: Spectral, Cambria, Georgia, serif;
  --texte: "Source Sans 3", "Segoe UI", Calibri, sans-serif;
  --mono: "IBM Plex Mono", Consolas, monospace;
  --rayon: 2px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--papier); color: var(--encre);
  font: 400 17px/1.65 var(--texte);
}
a { color: var(--bleu-froid); text-decoration: underline; text-underline-offset: 2px; }
a:hover, a:focus-visible { color: var(--encre); }
:focus-visible { outline: 2px solid var(--bleu-froid); outline-offset: 2px; }
[hidden] { display: none !important; }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.evitement { position: absolute; left: 16px; top: -64px; background: var(--blanc); padding: 8px 16px; z-index: 10; }
.evitement:focus { top: 8px; }

.cadre { max-width: 1240px; margin: 0 auto; padding: 0 24px; }

/* En-tête */
.entete { background: var(--blanc); border-bottom: 1px solid var(--filet); padding-top: 40px; }
.entete-haut { margin: 0 0 16px; display: flex; flex-wrap: wrap; gap: 16px; }
.surtitre { font: 500 13px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ardoise); }
a.surtitre { text-decoration: none; }
a.surtitre:hover { color: var(--bleu-froid); text-decoration: underline; }
.surtitre-sep::before { content: "/"; margin-right: 16px; color: var(--filet); }
h1 { font: 600 36px/1.15 var(--titre); color: var(--bleu-froid); margin: 0 0 16px; letter-spacing: -.01em; max-width: 24em; }
h2 { font: 600 28px/1.2 var(--titre); color: var(--bleu-froid); margin: 40px 0 16px; }
.chapeau { margin: 0 0 8px; max-width: 46em; }
.partenariat { margin: 0 0 24px; font-size: 14px; color: var(--ardoise); }
.partenariat a { color: var(--ardoise); }

.onglets { display: flex; gap: 8px; flex-wrap: wrap; }
.onglet {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  font-weight: 600; text-decoration: none; color: var(--ardoise);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.onglet:hover { color: var(--bleu-froid); }
.onglet[aria-current="page"] { color: var(--bleu-froid); border-bottom-color: var(--bleu-froid); }

/* Recherche et filtres */
.outils { padding: 16px 0 8px; }
.barre-outils { display: flex; gap: 8px; align-items: stretch; }
.barre-outils .recherche { flex: 1; min-width: 0; }
.bouton-filtres { min-height: 48px; white-space: nowrap; }
.bouton-filtres[aria-expanded="true"] { background: var(--bleu-pale); border-color: var(--bleu-froid); }
.recherche input {
  width: 100%; min-height: 48px; padding: 8px 16px; font: 400 17px/1.4 var(--texte); color: var(--encre);
  background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--rayon);
}
.recherche input:focus { border-color: var(--bleu-froid); }
.filtres { margin-top: 8px; padding: 16px; background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--rayon); }
.filtres summary { cursor: pointer; font-weight: 600; color: var(--bleu-froid); min-height: 44px; display: flex; align-items: center; }
.filtres-grille {
  display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); align-items: end;
  padding: 0;
}
.filtres-grille > * { min-width: 0; }
.filtres-grille select { width: 100%; }
.filtres-grille label, .resultats-barre label { display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--ardoise); }
select {
  min-height: 44px; padding: 0 8px; font: 400 16px var(--texte); color: var(--encre);
  background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--rayon); max-width: 100%;
}
.poles { grid-column: 1 / -1; border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.poles legend { font-size: 14px; color: var(--ardoise); padding: 0; margin-bottom: 8px; }
.pole {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
  background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--rayon);
  font: 400 15px var(--texte); color: var(--encre); cursor: pointer;
}
.pole[aria-pressed="true"] { border-color: var(--bleu-froid); background: var(--bleu-pale); font-weight: 600; }
.pastille { width: 12px; height: 12px; border-radius: 50%; flex: none; display: inline-block; }

.etat { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 16px; min-height: 44px; }
.compte { margin: 0; font-weight: 600; }
.selection { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.puce-selection {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 8px 0 16px;
  background: var(--bleu-froid); color: var(--blanc); border: 0; border-radius: var(--rayon);
  font: 600 15px var(--texte); cursor: pointer;
}
.puce-selection span[aria-hidden] { font-size: 18px; line-height: 1; padding: 0 4px; }
.bouton-texte { background: none; border: 0; padding: 0 8px; min-height: 44px; color: var(--bleu-froid); font: 600 15px var(--texte); text-decoration: underline; cursor: pointer; }

.bouton {
  min-height: 44px; padding: 0 16px; font: 600 15px var(--texte); color: var(--bleu-froid);
  background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--rayon); cursor: pointer;
}
.bouton:hover { border-color: var(--bleu-froid); }
.bouton-plein { background: var(--bleu-froid); color: var(--blanc); border-color: var(--bleu-froid); }
.bouton-plein:hover { background: var(--encre); border-color: var(--encre); }

/* Vue base */
.base { display: grid; grid-template-columns: 300px 1fr; gap: 40px; padding: 8px 0 64px; }
.titre-colonne { font: 500 13px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ardoise); margin: 0 0 16px; }
.facettes input {
  width: 100%; min-height: 44px; padding: 0 16px; margin-bottom: 16px; font: 400 15px var(--texte);
  background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--rayon); color: var(--encre);
}
.groupe-desc { margin-bottom: 24px; }
.groupe-desc h3 { display: flex; align-items: center; gap: 8px; font: 600 15px/1.3 var(--texte); color: var(--encre); margin: 0 0 8px; }
.groupe-desc ul { list-style: none; margin: 0; padding: 0; }
.desc-facette {
  width: 100%; display: flex; justify-content: space-between; gap: 8px; align-items: baseline; text-align: left;
  min-height: 44px; padding: 8px; background: none; border: 0; border-radius: var(--rayon);
  font: 400 15px/1.3 var(--texte); color: var(--encre); cursor: pointer;
}
.desc-facette:hover { background: var(--brume); }
.desc-facette[aria-pressed="true"] { background: var(--bleu-pale); font-weight: 600; }
.desc-facette .n { color: var(--ardoise); font-variant-numeric: tabular-nums; }
.desc-facette.vide { color: var(--ardoise); opacity: .55; }

.resultats-barre { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 16px; }
.resultats-barre label { flex-direction: row; align-items: center; }
.liste-refs { list-style: none; margin: 0; padding: 0; }
.ref { background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--rayon); padding: 24px; margin-bottom: 16px; }
.ref-haut { margin: 0 0 8px; font: 500 13px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ardoise); }
.ref-titre { font: 600 21px/1.3 var(--titre); color: var(--encre); margin: 0 0 8px; overflow-wrap: anywhere; }
.ref-auteurs { margin: 0 0 8px; font-size: 15px; color: var(--ardoise); }
.ref-support { font-style: italic; }
.ref-desc { list-style: none; margin: 16px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.puce-desc {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 8px;
  background: var(--papier); border: 1px solid var(--filet); border-radius: var(--rayon);
  font: 400 14px/1.2 var(--texte); color: var(--encre); cursor: pointer; text-align: left;
}
.puce-desc:hover { border-color: var(--bleu-froid); }
.puce-desc .pastille { width: 8px; height: 8px; }
.ref-facettes { margin: 0 0 16px; font-size: 14px; color: var(--ardoise); }
.ref-liens { margin: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 15px; }
.ref-liens .doi { color: var(--ardoise); font-family: var(--mono); font-size: 14px; overflow-wrap: anywhere; }
.ref-liens .lien-source { color: var(--ardoise); }
.ref-liens .sans-lien { color: var(--ardoise); font-style: italic; }
/* Zone unique de terracotta : la colonne des liens vers la chronique ou la source. */
.lien-lecture { color: var(--terracotta); font-weight: 600; }
.lien-lecture:hover, .lien-lecture:focus-visible { color: var(--encre); }
mark { background: var(--bleu-pale); color: inherit; padding: 0 1px; }
.vide-message { background: var(--blanc); border: 1px solid var(--filet); padding: 24px; border-radius: var(--rayon); }

/* Vue carto : plus large que le cadre de la page (jusqu'à 1 680 px), trois colonnes. */
#vue-carte { width: min(1680px, calc(100vw - 64px)); margin-left: calc(50% - min(840px, 50vw - 32px)); }
.carte { display: grid; grid-template-columns: 280px minmax(0, 1fr) 340px; grid-template-areas: "aide aide aide" "nav scene refs"; gap: 16px; padding: 8px 0 64px; align-items: start; }
.carte-scene { grid-area: scene; }
.panneau-nav { grid-area: nav; }
.panneau-refs { grid-area: refs; }
.carte-scene { position: relative; background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--rayon); overflow: hidden; }
#carte-svg { display: block; width: 100%; height: min(78vh, 860px); min-height: 420px; touch-action: none; cursor: grab; user-select: none; }
/* Plein écran (API du navigateur ou repli sur toute la fenêtre) : les trois colonnes occupent l'écran. */
.carte:fullscreen, .carte.agrandie { background: var(--papier); padding: 16px; height: 100vh; width: 100vw; overflow-y: auto; }
.carte.agrandie { position: fixed; inset: 0; z-index: 20; }
.carte:fullscreen .carte-scene, .carte.agrandie .carte-scene { display: flex; flex-direction: column; height: calc(100vh - 32px); }
.carte:fullscreen #carte-svg, .carte.agrandie #carte-svg { flex: 1; height: auto; min-height: 0; }
.carte:fullscreen .panneau, .carte.agrandie .panneau { max-height: calc(100vh - 32px); }
body.carto-agrandie { overflow: hidden; }
#carte-svg:focus-visible { outline-offset: -4px; }
#carte-svg.glisse { cursor: grabbing; }
.lien-carte { stroke: var(--ardoise); stroke-opacity: .32; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.lien-carte.fort { stroke: var(--bleu-froid); stroke-opacity: .6; }
.noeud { cursor: pointer; }
.noeud .disque { stroke: var(--encre); stroke-opacity: .55; stroke-width: 1; vector-effect: non-scaling-stroke; }
.noeud.choisi .disque { stroke-opacity: 1; stroke-width: 3; }
.noeud .zone-clic { fill: transparent; pointer-events: all; }
.noeud .anneau { fill: none; stroke: none; vector-effect: non-scaling-stroke; }
.noeud:focus-visible .anneau { stroke: var(--encre); stroke-width: 2; stroke-dasharray: 4 3; }
.noeud.eteint { opacity: .14; }
.noeud.eteint text { display: none; }
.noeud text {
  font-family: var(--texte); font-size: 13px; font-weight: 600; fill: var(--encre); paint-order: stroke; stroke: var(--blanc); stroke-width: 4px; stroke-linejoin: round;
  pointer-events: none;
}
.noeud text.discret { display: none; }
.noeud:hover text.discret, .noeud:focus text.discret, .noeud.choisi text.discret { display: inline; }
.noeud:focus { outline: none; }
.noeud.eteint { cursor: default; }
.carte-commandes { position: absolute; top: 16px; right: 16px; left: 16px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; pointer-events: none; }
.carte-commandes .bouton { pointer-events: auto; }
.carte-commandes .bouton[aria-pressed="true"], .carte-commandes .bouton[aria-expanded="true"] { background: var(--bleu-pale); border-color: var(--bleu-froid); }
.carte-commandes .bouton { min-width: 44px; }
.infobulle {
  position: absolute; pointer-events: none; margin: 0; padding: 8px; max-width: 260px;
  background: var(--encre); color: var(--blanc); font-size: 14px; line-height: 1.35; border-radius: var(--rayon);
}
.carte-signal { position: absolute; left: 50%; bottom: 72px; transform: translateX(-50%); margin: 0; padding: 8px 16px;
  background: var(--encre); color: var(--blanc); font-size: 14px; border-radius: var(--rayon); pointer-events: none; }
.legende { list-style: none; margin: 0; padding: 16px; display: flex; flex-wrap: wrap; gap: 8px 24px; border-top: 1px solid var(--filet); font-size: 14px; }
.legende li { display: flex; align-items: center; gap: 8px; }
.panneau { background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--rayon); padding: 24px 16px; max-height: calc(min(78vh, 860px) + 58px); overflow-y: auto; }
/* Sous-volet repliable (descripteurs associés) et liste complète. */
.sous-volet { margin: 24px 0 16px; border-top: 1px solid var(--filet); }
.sous-volet-titre { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 44px; padding: 8px 0; background: none; border: 0; cursor: pointer; text-align: left;
  font: 500 13px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ardoise); }
.sous-volet-titre:hover { color: var(--bleu-froid); }
.sous-volet-titre .chevron { font: 600 20px/1 var(--texte); letter-spacing: 0; color: var(--bleu-froid); }
.tous-desc { margin-top: 16px; }
.tous-desc > .bouton { width: 100%; }
.liste-complete { margin-top: 16px; }
.liste-complete input { width: 100%; min-height: 44px; padding: 0 16px; margin-bottom: 16px; font: 400 15px var(--texte); background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--rayon); color: var(--encre); }
.liste-complete h4 { display: flex; align-items: center; gap: 8px; font: 600 15px/1.3 var(--texte); margin: 0 0 8px; }
.panneau-refs .bouton-plein { margin-bottom: 8px; }
.panneau-refs > .bouton:last-child { margin-top: 16px; width: 100%; }
/* Volet d'aide : bandeau pleine largeur au-dessus de la carto (jamais par-dessus le nuage), refermable. */
.aide { grid-area: aide; background: var(--blanc); border: 1px solid var(--bleu-froid); border-radius: var(--rayon); padding: 24px; font-size: 15px; line-height: 1.55; }
.aide h2 { font: 600 21px/1.3 var(--titre); color: var(--bleu-froid); margin: 0 0 8px; }
.aide-colonnes { columns: 3 300px; column-gap: 40px; }
.aide h3 { font: 500 13px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ardoise); margin: 16px 0 8px; break-after: avoid; }
.aide p, .aide ul { margin: 0 0 8px; }
.aide ul { padding-left: 16px; }
.aide .bouton { margin-top: 16px; }
.panneau h2 { font: 600 21px/1.3 var(--titre); margin: 0 0 8px; }
.panneau h3 { font: 500 13px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ardoise); margin: 24px 0 8px; }
.panneau p { margin: 0 0 16px; }
.panneau ul { list-style: none; margin: 0; padding: 0; }
.associe { width: 100%; display: flex; justify-content: space-between; gap: 8px; align-items: center; text-align: left; min-height: 44px; padding: 8px; background: none; border: 0; border-bottom: 1px solid var(--brume); font: 400 15px/1.3 var(--texte); color: var(--encre); cursor: pointer; }
.associe:hover { background: var(--brume); }
.associe .gauche { display: flex; align-items: center; gap: 8px; }
.associe .n { color: var(--ardoise); font-variant-numeric: tabular-nums; }
.ref-compacte { padding: 16px 0; border-bottom: 1px solid var(--brume); }
.ref-compacte .ref-titre { font-size: 17px; margin-bottom: 8px; }
.ref-compacte .ref-auteurs { font-size: 14px; margin-bottom: 8px; }

/* À propos */
.apropos { max-width: 46em; padding-bottom: 64px; }
.apropos h2:first-child { margin-top: 24px; }

.pied { border-top: 1px solid var(--filet); background: var(--blanc); padding: 24px 0; font-size: 14px; color: var(--ardoise); }
.pied p { margin: 0; }
.pied a { color: var(--ardoise); }

@media (max-width: 1200px) {
  .carte { grid-template-columns: 260px minmax(0, 1fr); grid-template-areas: "aide aide" "nav scene" "refs refs"; }
  .panneau-refs { max-height: none; }
}
@media (max-width: 960px) {
  .carte { grid-template-columns: 1fr; grid-template-areas: "aide" "scene" "nav" "refs"; }
  #carte-svg { touch-action: pan-y; }   /* un doigt à la verticale fait défiler la page */
  #carte-svg { height: min(70vh, 560px); min-height: 320px; }
  .base { grid-template-columns: 1fr; }
  .facettes { order: 2; }
  .panneau { max-height: none; }
}
@media (max-width: 600px) {
  #carte-svg { height: auto; min-height: 0; aspect-ratio: 1 / 1.1; }
  .carte-commandes .bouton { min-width: 44px; padding: 0 8px; }
  .carte-commandes { position: static; justify-content: flex-start; padding: 8px; border-bottom: 1px solid var(--filet); }
  .cadre { padding: 0 16px; }
  h1 { font-size: 28px; }
  .entete { padding-top: 24px; }
  .ref { padding: 16px; }
  .ref-titre { font-size: 19px; }
  .filtres-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .resultats-barre .bouton { width: 100%; }
}


/* Outils (visite, pont, diagramme) : même cadre que la carto, plus large que la page. */
.vue-outil { padding: 24px 0 64px; }
#vue-visite, #vue-pont, #vue-diagramme { width: min(1680px, calc(100vw - 64px)); margin-left: calc(50% - min(840px, 50vw - 32px)); }

/* Introduction de l'onglet, juste sous les onglets. */
.intro-vue { max-width: 60em; margin: 16px 0 0; font-size: 17px; line-height: 1.55; color: var(--encre); }
.intro-vue + .outils { padding-top: 16px; }