/* ============================================================
   MoniTao — Couche de compatibilité « Console » pour les pages SEO

   Les 356 pages du cocon SEO emploient un vocabulaire de classes
   antérieur à la refonte (.content-page, .faq-item, .steps-box…).
   Cette feuille les habille avec les jetons Console sans toucher
   à leur markup : aucun risque sur les données structurées, les
   ancres internes ou les traductions.

   Elle suppose monitao.css chargée avant elle, et tout est porté
   sous .landing-page pour n'atteindre aucune page applicative.

   À terme, ce fichier disparaît au profit des classes .mt-*.
   ============================================================ */

/* ---- fonds ------------------------------------------------
   Le corps de l'article est en Console Paper. Le bandeau de
   titre, le chrome haut et l'appel à l'action forment des îlots
   Console Dark : les jetons y sont redéclarés localement, ce qui
   suffit à basculer tous les composants qu'ils contiennent. */
.landing-page {
  background: var(--bg-base);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
}

.landing-page .landing-header,
.landing-page .hero,
.landing-page .cta-final {
  --bg-base: #0D1114;
  --bg-surface: #12161A;
  --bg-raised: #171C22;
  --bg-inset: #0A0D10;
  --border: #262D35;
  --border-strong: #333C46;
  --text: #E4E9EE;
  --text-muted: #8A949F;
  --text-faint: #5E6873;
  --ok: #4FBF6A;
  --warn: #E0A53A;
  --crit: #F2685F;
  --info: #5FA8D3;
  --accent-text: #F0A02C;
  background: var(--bg-base);
  color: var(--text);
}

.landing-page .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--s5);
}

@media (max-width: 520px) {
  .landing-page .container { padding: 0 var(--s4); }
}

/* ---- chrome haut ------------------------------------------ */
.landing-page .landing-header {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--border);
}

.landing-page .landing-header .container {
  display: flex;
  align-items: center;
  gap: var(--s4);
  flex-wrap: wrap;
  padding-top: var(--s3);
  padding-bottom: var(--s3);
}

.landing-page .logo {
  display: flex;
  align-items: center;
  gap: var(--s3);
  text-decoration: none;
  color: var(--text);
  flex: none;
}

.landing-page .logo-text {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
}

.landing-page .header-nav {
  display: flex;
  align-items: center;
  gap: var(--s4);
  flex: 1;
  min-width: 0;
}

.landing-page .header-nav-left {
  display: flex;
  gap: var(--s5);
  margin-left: var(--s5);
  flex-wrap: wrap;
}

.landing-page .header-nav-left a {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: none;
}

.landing-page .header-nav-left a:hover { color: var(--text); }

.landing-page .header-nav-right {
  margin-left: auto;
  display: flex;
  gap: var(--s2);
  align-items: center;
}

@media (max-width: 820px) {
  .landing-page .header-nav-left { display: none; }
}

/* boutons du chrome, calqués sur .mt-btn */
.landing-page .btn-login,
.landing-page .btn-register-header {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .02em;
  min-height: 28px;
  padding: 0 10px;
  border-radius: var(--r);
  border: 1px solid transparent;
  text-decoration: none;
  text-shadow: none;
  box-shadow: none;
  transition: background var(--t), border-color var(--t), color var(--t);
  white-space: nowrap;
}

.landing-page .btn-login {
  background: transparent;
  color: var(--text-muted);
  border-color: transparent;
}

.landing-page .btn-login:hover {
  background: var(--bg-raised);
  color: var(--text);
  transform: none;
}

.landing-page .btn-register-header,
.landing-page .header-nav a.btn-register-header {
  background: var(--accent);
  color: var(--accent-on);
  border-color: var(--accent);
}

.landing-page .btn-register-header:hover,
.landing-page .header-nav a.btn-register-header:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--accent-on);
  transform: none;
}

/* sélecteur de langue */
.landing-page .lang-switcher { position: relative; display: inline-block; }

.landing-page .lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--r);
}

.landing-page .lang-toggle:hover { color: var(--text); background: var(--bg-raised); }

.landing-page .lang-dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  min-width: 160px;
  z-index: 20;
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r);
  padding: var(--s1) 0;
  box-shadow: none;
}

/* Ouverture au survol et au clavier ; app.js gère en plus le clic,
   en basculant le style en ligne, ce qui prime sur ces règles. */
.landing-page .lang-switcher:hover .lang-dropdown,
.landing-page .lang-switcher:focus-within .lang-dropdown {
  display: block;
}

.landing-page .lang-dropdown a {
  display: block;
  padding: 7px 12px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text);
  text-decoration: none;
}

.landing-page .lang-dropdown a:hover { background: var(--bg-raised); color: var(--accent-text); }
.landing-page .lang-dropdown a.active { color: var(--accent-text); }

/* ---- bandeau de titre ------------------------------------- */
.landing-page .hero {
  padding: var(--s7) 0 var(--s8);
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.landing-page .hero h1 {
  font-family: var(--mono);
  font-size: 44px;
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1.1;
  margin: 0;
  max-width: 22ch;
  text-wrap: balance;
  color: var(--text);
}

.landing-page .hero .tagline {
  margin: var(--s4) 0 0;
  font-size: 17px;
  color: var(--text-muted);
  max-width: 64ch;
  text-wrap: pretty;
}

@media (max-width: 640px) {
  .landing-page .hero { padding: var(--s5) 0 var(--s6); }
  .landing-page .hero h1 { font-size: 26px; }
  .landing-page .hero .tagline { font-size: 15px; }
}

/* fil d'ariane */
.landing-page .breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: var(--s5);
}

.landing-page .breadcrumb a { color: var(--text-muted); text-decoration: none; }
.landing-page .breadcrumb a:hover { color: var(--accent-text); text-decoration: underline; }

/* ---- corps de l'article : Console Paper -------------------- */
.landing-page .content-page {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--s7) var(--s5) var(--s8);
  border-top: 2px solid var(--border-strong);
}

.landing-page .content-page > p,
.landing-page .content-page > ul,
.landing-page .content-page > ol {
  font-size: 16px;
  line-height: 1.75;
  color: var(--text);
  max-width: 68ch;
  margin: 0 0 var(--s4);
}

.landing-page .content-page h1 {
  font-family: var(--mono);
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1.1;
  margin: 0 0 var(--s5);
  color: var(--text);
}

.landing-page .content-page h2 {
  font-family: var(--mono);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1.15;
  margin: var(--s8) 0 var(--s4);
  padding-top: var(--s5);
  border-top: 1px solid var(--border);
  color: var(--text);
  text-wrap: balance;
}

.landing-page .content-page h3 {
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.2;
  margin: var(--s6) 0 var(--s3);
  color: var(--text);
}

.landing-page .content-page ul,
.landing-page .content-page ol { padding-left: var(--s5); }

.landing-page .content-page li {
  margin-bottom: var(--s2);
  line-height: 1.75;
  color: var(--text);
}

.landing-page .content-page li::marker { color: var(--text-faint); }

.landing-page .content-page strong { font-weight: 600; }

/* Les liens de prose prennent la couleur d'accent, mais pas les boutons :
   un sélecteur descendant l'emporterait sur la règle du bouton, et dans un
   îlot sombre --accent-text vaut l'ambre — soit un libellé ambre sur un
   aplat ambre. L'exclusion se fait sur la classe, pas sur l'ordre. */
.landing-page .content-page a:not([class*="btn"]):not([class*="cta"]) {
  color: var(--accent-text);
  text-underline-offset: 3px;
}

/* code */
.landing-page .content-page pre {
  margin: 0 0 var(--s5);
  padding: var(--s4);
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.7;
  color: var(--text);
}

.landing-page .content-page code { font-family: var(--mono); font-size: .92em; }

.landing-page .inline-code {
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 1px 5px;
  font-family: var(--mono);
  font-size: .88em;
  color: var(--text);
}

/* ---- encadrés --------------------------------------------- */
.landing-page .use-cases-box,
.landing-page .steps-box,
.landing-page .info-box {
  margin: var(--s6) 0;
  padding: var(--s5);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--r) var(--r) 0;
}

.landing-page .use-cases-box h4,
.landing-page .steps-box h4,
.landing-page .info-box h3 {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0 0 var(--s4);
}

.landing-page .use-cases-box ul,
.landing-page .steps-box ul,
.landing-page .steps-box ol {
  margin: 0;
  padding-left: var(--s5);
}

.landing-page .use-cases-box li,
.landing-page .steps-box li {
  margin-bottom: var(--s2);
  font-size: 15px;
  line-height: 1.7;
  color: var(--text);
}

.landing-page .steps-box ol {
  counter-reset: mt-step;
  list-style: none;
  padding-left: 0;
}

.landing-page .steps-box ol li {
  counter-increment: mt-step;
  position: relative;
  padding-left: var(--s7);
  margin-bottom: var(--s4);
}

.landing-page .steps-box ol li::before {
  content: counter(mt-step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 2px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--accent-text);
}

/* listes à cocher des pages ressources */
.landing-page .checklist-items {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--s5);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
}

.landing-page .checklist-items li {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  margin: 0;
  padding: var(--s3) var(--s4);
  border-top: 1px solid var(--border);
  background: var(--bg-surface);
  font-size: 15px;
}

.landing-page .checklist-items li:first-child { border-top: 0; }

.landing-page .checklist-items li::before {
  content: "\2610";
  flex: none;
  font-family: var(--mono);
  color: var(--accent-text);
  line-height: 1.6;
}

/* ---- tableaux et glossaires -------------------------------- */
.landing-page .content-page table,
.landing-page .sla-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin: 0 0 var(--s5);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  display: table;
}

.landing-page .content-page th,
.landing-page .content-page td {
  text-align: left;
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--border);
}

.landing-page .content-page thead th {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--bg-raised);
  white-space: nowrap;
}

.landing-page .content-page tbody tr:last-child td { border-bottom: 0; }

/* Trois gabarits enveloppent leur tableau ou emploient une variante :
   ces classes n'avaient jamais reçu de style, elles en reçoivent un ici. */
.landing-page .table-responsive {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r);
  margin: 0 0 var(--s5);
}

.landing-page .table-responsive table,
.landing-page .table-responsive .sla-table {
  margin: 0;
  border: 0;
  min-width: 520px;
}

.landing-page .comparison-table td:not(:first-child),
.landing-page .comparison-table th:not(:first-child) {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.landing-page .glossary-list { margin: 0 0 var(--s5); }

.landing-page .glossary-list dt {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--border);
}

.landing-page .glossary-list dt:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.landing-page .glossary-list dd {
  margin: var(--s2) 0 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-muted);
}

/* ---- FAQ --------------------------------------------------- */
.landing-page .faq-section {
  margin-top: var(--s5);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
}

.landing-page .faq-item {
  padding: var(--s5);
  border-top: 1px solid var(--border);
  background: var(--bg-surface);
}

.landing-page .faq-item:first-child { border-top: 0; }

.landing-page .faq-item h3 {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 500;
  margin: 0 0 var(--s3);
  color: var(--text);
}

.landing-page .faq-item p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 68ch;
}

/* ---- liens internes ---------------------------------------- */
.landing-page .internal-links {
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: 1px solid var(--border);
}

.landing-page .internal-links h4 {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 var(--s4);
}

.landing-page .internal-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
}

.landing-page .internal-links li { margin: 0; background: var(--bg-surface); }

.landing-page .internal-links a {
  display: block;
  padding: var(--s3) var(--s4);
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text);
  text-decoration: none;
}

.landing-page .internal-links a:hover { background: var(--bg-raised); color: var(--accent-text); }

/* ---- pages de rubrique (hubs) ------------------------------ */
.landing-page .section { padding: var(--s9) 0; border-top: 1px solid var(--border); }
.landing-page .section:first-of-type { border-top: 0; }
.landing-page .section-gray { background: var(--bg-raised); }

@media (max-width: 640px) {
  .landing-page .section { padding: var(--s7) 0; }
}

.landing-page .section-title {
  font-family: var(--mono);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1.1;
  margin: 0 0 var(--s3);
  color: var(--text);
  text-align: left;
}

.landing-page .section-subtitle {
  margin: 0 0 var(--s6);
  font-size: 16px;
  color: var(--text-muted);
  max-width: 68ch;
  text-align: left;
  text-wrap: pretty;
}

.landing-page .cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  margin-top: var(--s5);
}

.landing-page .feature-card {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--s5);
  background: var(--bg-surface);
  border: 0;
  border-radius: 0;
  text-decoration: none;
  color: inherit;
  transition: background var(--t);
}

.landing-page .feature-card:hover {
  background: var(--bg-raised);
  transform: none;
  box-shadow: none;
  border-color: transparent;
}

.landing-page .feature-card h3 {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 500;
  margin: 0;
  color: var(--text);
}

.landing-page .feature-card:hover h3 { color: var(--accent-text); }

.landing-page .feature-card p {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-muted);
}


/* ---- appel à l'action -------------------------------------- */
.landing-page .cta-final {
  padding: var(--s7) 0;
  border-top: 2px solid var(--border-strong);
  text-align: left;
}

.landing-page .cta-final .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  flex-wrap: wrap;
}

.landing-page .cta-final h2 {
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -.02em;
  margin: 0;
  color: var(--text);
  max-width: 40ch;
}

.landing-page .cta-final p {
  margin: var(--s2) 0 0;
  font-size: 15px;
  color: var(--text-muted);
  max-width: 60ch;
}

/* align-items explicite : en étirement par défaut, la moindre différence
   de propriété entre deux boutons de la rangée se traduit par des hauteurs
   inégales. Ici tous font 36 px, quelle que soit leur variante. */
.landing-page .cta-buttons {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
}

/* ---- boutons de contenu ------------------------------------ */
.landing-page .btn-hero,
.landing-page .btn-cta-final,
.landing-page .btn-cta-secondary,
.landing-page .cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .02em;
  min-height: 36px;
  padding: 0 14px;
  border-radius: var(--r);
  border: 1px solid transparent;
  text-decoration: none;
  text-shadow: none;
  transition: background var(--t), border-color var(--t), color var(--t);
}

.landing-page .btn-primary-hero,
.landing-page .btn-cta-final,
.landing-page .cta-button {
  background: var(--accent);
  color: var(--accent-on);
  border-color: var(--accent);
}

/* .cta-button est un lien isolé au bas d'un encadré, pas un élément de
   rangée : lui seul se décolle et se cale à gauche. Ces deux propriétés
   appliquées aux boutons de rangée empêchaient l'étirement du bouton
   principal, qui se retrouvait plus court que celui d'à côté. */
.landing-page .cta-button {
  align-self: flex-start;
  margin-top: var(--s2);
}

.landing-page .btn-primary-hero:hover,
.landing-page .btn-cta-final:hover,
.landing-page .cta-button:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--accent-on);
  transform: none;
  box-shadow: none;
}

.landing-page .btn-secondary-hero,
.landing-page .btn-cta-secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--border-strong);
}

.landing-page .btn-secondary-hero:hover,
.landing-page .btn-cta-secondary:hover {
  border-color: var(--accent);
  color: var(--accent-text);
  background: transparent;
  transform: none;
}

/* ============================================================
   Pages publiques hors cocon SEO : documentation, contact,
   CGU et CGV. Chacune portait sa propre feuille en ligne ; le
   vocabulaire de classes est conservé, seul l'habillage change.
   ============================================================ */

/* ---- ossature commune -------------------------------------- */
.landing-page .legal-page,
.landing-page .contact-page,
.landing-page .docs-page {
  background: var(--bg-base);
  padding-bottom: var(--s8);
}

.landing-page .update-date {
  font-family: var(--mono);
  font-size: 12px !important;
  letter-spacing: .06em;
}

.landing-page .legal-container,
.landing-page .contact-container,
.landing-page .docs-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--s5);
}

/* ---- corps rédactionnel : CGU, CGV, documentation ---------- */
.landing-page .legal-content,
.landing-page .docs-content {
  max-width: 760px;
  padding: var(--s7) 0 var(--s6);
  font-size: 16px;
  line-height: 1.75;
  color: var(--text);
}

.landing-page .legal-content h2,
.landing-page .docs-content h2 {
  font-family: var(--mono);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1.15;
  margin: var(--s8) 0 var(--s4);
  padding-top: var(--s5);
  border-top: 1px solid var(--border);
  color: var(--text);
}

.landing-page .legal-content h2:first-child,
.landing-page .docs-content h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.landing-page .legal-content h3,
.landing-page .docs-content h3 {
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 500;
  margin: var(--s6) 0 var(--s3);
  color: var(--text);
}

.landing-page .legal-content p,
.landing-page .docs-content p { margin: 0 0 var(--s4); max-width: 68ch; }

.landing-page .legal-content ul,
.landing-page .legal-content ol,
.landing-page .docs-content ul,
.landing-page .docs-content ol {
  margin: 0 0 var(--s4);
  padding-left: var(--s5);
  max-width: 68ch;
}

.landing-page .legal-content li,
.landing-page .docs-content li { margin-bottom: var(--s2); }

.landing-page .legal-content li::marker,
.landing-page .docs-content li::marker { color: var(--text-faint); }

.landing-page .docs-content pre {
  margin: 0 0 var(--s5);
  padding: var(--s4);
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.7;
  color: var(--text);
}

.landing-page .docs-content code { font-family: var(--mono); font-size: .92em; }

/* ---- documentation : sommaire latéral ---------------------- */
.landing-page .docs-container {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: var(--s8);
  align-items: start;
}

.landing-page .docs-sidebar {
  position: sticky;
  top: 72px;
  padding: var(--s7) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

/* Cette annulation doit rester APRÈS la règle ci-dessus : à spécificité
   égale, c'est la dernière déclarée qui gagne, media query ou non. Placée
   avant, elle était sans effet et le sommaire restait collé en haut de
   l'écran sur téléphone, le corps de la page défilant par-dessous. */
@media (max-width: 1000px) {
  .landing-page .docs-container { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }

  .landing-page .docs-sidebar {
    position: static;
    top: auto;
    padding-top: var(--s5);
    padding-bottom: var(--s5);
    border-bottom: 1px solid var(--border);
  }
}

.landing-page .docs-nav { display: flex; flex-direction: column; gap: var(--s1); }

.landing-page .docs-nav a {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: none;
  padding: 5px 0 5px var(--s3);
  border-left: 2px solid transparent;
}

.landing-page .docs-nav a:hover { color: var(--accent-text); border-left-color: var(--accent); }

/* ---- encadrés de la documentation -------------------------- */
.landing-page .info-box,
.landing-page .warning-box,
.landing-page .success-box {
  margin: var(--s5) 0;
  padding: var(--s4) var(--s5);
  border: 1px solid var(--border);
  border-left: 2px solid var(--info);
  border-radius: 0 var(--r) var(--r) 0;
  background: var(--bg-raised);
}

.landing-page .warning-box { border-left-color: var(--warn); }
.landing-page .success-box { border-left-color: var(--ok); }

.landing-page .info-box h3,
.landing-page .warning-box h3,
.landing-page .success-box h3 {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: 0 0 var(--s3);
  color: var(--info);
}

.landing-page .warning-box h3 { color: var(--warn); }
.landing-page .success-box h3 { color: var(--ok); }

.landing-page .info-box p:last-child,
.landing-page .warning-box p:last-child,
.landing-page .success-box p:last-child { margin-bottom: 0; }

/* ---- page de contact --------------------------------------- */
.landing-page .contact-content {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--s8);
  padding: var(--s7) 0 var(--s6);
  align-items: start;
}

@media (max-width: 860px) {
  .landing-page .contact-content { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
}

.landing-page .contact-form,
.landing-page .contact-info {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: var(--s5);
}

.landing-page .contact-item {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  padding: var(--s4) 0;
  border-top: 1px solid var(--border);
}

.landing-page .contact-item:first-child { border-top: 0; padding-top: 0; }

.landing-page .contact-item-content {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  min-width: 0;
}

.landing-page .contact-item-content h3 {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  margin: 0;
  color: var(--text);
}

.landing-page .contact-item-content p { margin: 0; font-size: 13px; color: var(--text-muted); }


/* ---- formulaires ------------------------------------------- */
.landing-page .form-group { display: flex; flex-direction: column; gap: var(--s2); margin-bottom: var(--s4); }

.landing-page .form-group label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.landing-page .form-group input,
.landing-page .form-group select,
.landing-page .form-group textarea {
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.4;
  color: var(--text);
  background: var(--bg-inset);
  border: 1px solid var(--border-strong);
  border-radius: var(--r);
  padding: 9px 12px;
  min-height: 40px;
  width: 100%;
  transition: border-color var(--t);
}

.landing-page .form-group textarea { min-height: 120px; resize: vertical; font-size: 15px; }

.landing-page .form-group input:hover,
.landing-page .form-group select:hover,
.landing-page .form-group textarea:hover { border-color: var(--text-muted); }

.landing-page .form-error { font-family: var(--mono); font-size: 12px; color: var(--crit); }

.landing-page .btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .02em;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--accent);
  border-radius: var(--r);
  background: var(--accent);
  color: var(--accent-on);
  cursor: pointer;
  transition: background var(--t), border-color var(--t);
}

.landing-page .btn-submit:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

/* ---- lien de retour ---------------------------------------- */
.landing-page .back-link {
  padding: var(--s5) 0 var(--s7);
  border-top: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text-muted);
}

.landing-page .back-link a { color: var(--accent-text); text-decoration: none; }
.landing-page .back-link a:hover { text-decoration: underline; }

/* ============================================================
   Mobile

   Le système Console est conçu en grilles auto-ajustables, la
   plupart des blocs se replient donc seuls. Cette section traite
   les cas qui ne se replient pas : le pied de page à six colonnes,
   les tableaux rédactionnels, les longues chaînes techniques des
   pages SEO, et le journal de l'aperçu d'accueil.

   Aucune règle overflow-x:hidden n'est posée sur un ancêtre : cela
   désactiverait le position:sticky de l'en-tête. Les débordements
   sont traités à la source.
   ============================================================ */

/* ---- rien ne dépasse de l'écran ---------------------------- */
.landing-page img,
.landing-page svg,
.landing-page video,
.landing-page iframe { max-width: 100%; }

/* Les pages SEO citent des URL, des en-têtes HTTP et des chemins
   qui ne comportent aucune espace : sans cela, ils repoussent la
   largeur de la page entière. */
.landing-page .content-page p,
.landing-page .content-page li,
.landing-page .content-page dd,
.landing-page .legal-content p,
.landing-page .legal-content li,
.landing-page .docs-content p,
.landing-page .docs-content li,
.landing-page .faq-item p,
.landing-page .mt-obj__a,
.landing-page .glossary-list dd { overflow-wrap: break-word; }

.landing-page .inline-code { overflow-wrap: break-word; }

/* ---- pied de page ------------------------------------------ */
@media (max-width: 900px) {
  .mt-foot__cols {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--s5);
  }
}

@media (max-width: 560px) {
  .mt-foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); }
  .mt-foot__col:first-child { grid-column: 1 / -1; }
  .mt-foot__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s3);
  }
  .mt-foot__legal { gap: var(--s3); }
}

/* ---- chrome haut ------------------------------------------- */
.landing-page .header-nav-right { flex-wrap: wrap; row-gap: var(--s2); }

@media (max-width: 420px) {
  .landing-page .btn-login,
  .landing-page .btn-register-header { font-size: 11px; padding: 0 8px; }
  .landing-page .logo-text { font-size: 14px; }
}

/* ---- aperçu de l'accueil ----------------------------------- */
@media (max-width: 640px) {
  .mt-term__log { overflow-x: auto; font-size: 11px; }
  .mt-term__log div { white-space: nowrap; }
  .mt-term__row { gap: var(--s2); font-size: 11px; }
  .mt-term__bar { font-size: 11px; }
}

/* ---- tableaux rédactionnels -------------------------------- */
/* Les gabarits SEO posent leurs tableaux sans conteneur : on rend
   le tableau lui-même défilant plutôt que d'éditer 356 fichiers. */
@media (max-width: 820px) {
  .landing-page .content-page table,
  .landing-page .sla-table,
  .landing-page .comparison-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
  }
  .landing-page .table-responsive table { white-space: nowrap; }
}

/* ---- respiration verticale --------------------------------- */
@media (max-width: 640px) {
  .landing-page .content-page {
    padding-left: var(--s4);
    padding-right: var(--s4);
    padding-top: var(--s5);
  }
  .landing-page .content-page h1 { font-size: 26px; }
  .landing-page .content-page h2 { font-size: 20px; margin-top: var(--s6); }
  .landing-page .content-page h3 { font-size: 15px; }
  .landing-page .content-page > p,
  .landing-page .content-page > ul,
  .landing-page .content-page > ol { font-size: 15px; }

  .landing-page .legal-content,
  .landing-page .docs-content { padding-top: var(--s5); font-size: 15px; }

  .landing-page .legal-content h2,
  .landing-page .docs-content h2 { font-size: 20px; margin-top: var(--s6); }

  .landing-page .use-cases-box,
  .landing-page .steps-box,
  .landing-page .info-box,
  .landing-page .warning-box,
  .landing-page .success-box { padding: var(--s4); }

  .landing-page .faq-item { padding: var(--s4); }

  .landing-page .cta-final { padding: var(--s6) 0; }
  .landing-page .cta-final .container { align-items: flex-start; gap: var(--s4); }
  .landing-page .cta-final h2 { font-size: 17px; }

  .landing-page .contact-form,
  .landing-page .contact-info { padding: var(--s4); }
}

/* Les cibles tactiles des listes de liens internes et du sommaire
   gagnent de la hauteur : 44 px est le minimum confortable. */
@media (pointer: coarse) {
  .landing-page .internal-links a,
  .landing-page .docs-nav a,
  .landing-page .lang-dropdown a { min-height: 44px; display: flex; align-items: center; }
}

/* ---- bande tarifaire --------------------------------------- */
/* La grille de prix quitte la colonne de lecture : elle prend
   toute la largeur, sur le fond sombre, dans la continuité du
   bandeau de titre. Le corps rédactionnel reprend ensuite. */
.landing-page .pricing-band {
  --bg-base: #0D1114;
  --bg-surface: #12161A;
  --bg-raised: #171C22;
  --bg-inset: #0A0D10;
  --border: #262D35;
  --border-strong: #333C46;
  --text: #E4E9EE;
  --text-muted: #8A949F;
  --text-faint: #5E6873;
  --ok: #4FBF6A;
  --warn: #E0A53A;
  --crit: #F2685F;
  --info: #5FA8D3;
  --accent-text: #F0A02C;
  background: var(--bg-base);
  color: var(--text);
  padding: 0 0 var(--s8);
}

.landing-page .pricing-band .mt-plans { margin-top: 0; }

.landing-page .pricing-band__note {
  margin: var(--s6) 0 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.9;
  color: var(--text-muted);
}

.landing-page .pricing-band__note strong { color: var(--text); font-weight: 500; }

@media (max-width: 640px) {
  .landing-page .pricing-band { padding-bottom: var(--s6); }
  .landing-page .pricing-band__note { text-align: left; }
}

/* Les pictogrammes de contact sont passés de l'emoji à l'icône du jeu :
   ils restent visibles, alignés sur le texte qu'ils accompagnent. */
.landing-page .contact-icon {
  flex: none;
  color: var(--accent-text);
  padding-top: 2px;
}

/* Visiteur connecté : le nom du compte précède l'accès à l'espace client. */
.landing-page .header-account {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-muted);
  max-width: 18ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.landing-page .btn-register-header .mt-ico {
  width: 14px;
  height: 14px;
  flex: none;
  margin-right: var(--s2);
}

@media (max-width: 560px) {
  .landing-page .header-account { display: none; }
}

/* ============================================================
   Correctifs mobile — constatés au rendu, pas déduits du code

   Trois causes de débordement horizontal, vérifiées par capture
   d'écran à 390 px sur la production :

   1. La rangée de l'en-tête ne pouvait pas se replier : ses
      boutons sont en white-space:nowrap et rien n'autorisait le
      retour à la ligne du groupe de droite.
   2. La grille du hero repassait à « 1fr » sous 960 px. Une piste
      « 1fr » vaut minmax(auto, 1fr) : sa largeur minimale est
      celle de son contenu, et l'aperçu de console, dont le journal
      est en nowrap, imposait donc sa largeur à toute la page.
   3. Les titres en 34 px de chasse fixe dépassaient la colonne.
   ============================================================ */

/* ---- 1. en-tête repliable ---------------------------------- */
.landing-page .header-nav {
  flex-wrap: wrap;
  row-gap: var(--s2);
}

@media (max-width: 560px) {
  .landing-page .landing-header .container {
    gap: var(--s2);
    padding-top: var(--s2);
    padding-bottom: var(--s2);
  }
  .landing-page .header-nav-right {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
  }
  /* Sans cela le libellé, en nowrap, déborde de son bouton rétréci et
     entraîne toute la page avec lui. Il se replie sur deux lignes. */
  .landing-page .btn-login,
  .landing-page .btn-register-header {
    white-space: normal;
    text-align: center;
    line-height: 1.25;
    padding: 6px 10px;
    min-width: 0;
  }
  .landing-page .btn-register-header { flex: 1 1 auto; }
}

/* ---- 2. le hero ne subit plus la largeur de son contenu ----- */
@media (max-width: 960px) {
  .mt-hero { grid-template-columns: minmax(0, 1fr); }
}

.mt-hero > * { min-width: 0; }
.mt-term { min-width: 0; }
.mt-term__row { min-width: 0; }

/* ---- 3. titres ---------------------------------------------- */
@media (max-width: 560px) {
  .mt-hero h1 { font-size: 26px; }
  .mt-sect__title { font-size: 20px; }
  .mt-plan__price { font-size: 26px; }
  .mt-strip__value { font-size: 20px; }
}

@media (max-width: 400px) {
  .mt-hero h1 { font-size: 23px; }
  .landing-page .hero h1 { font-size: 23px; }
}

/* Les titres de chasse fixe ne se coupent pas d'eux-mêmes : sans
   cela, un mot composé ou une URL dans un titre déborde. */
.mt-hero h1,
.mt-sect__title,
.landing-page .hero h1,
.landing-page .content-page h1,
.landing-page .content-page h2,
.landing-page .content-page h3 { overflow-wrap: break-word; }

/* ---- 4. garde-fou ------------------------------------------- */
/* Aucun overflow-x:hidden sur un ancêtre : cela désactiverait le
   position:sticky de l'en-tête. On borne les blocs susceptibles
   d'imposer leur largeur, à la source. */
.mt-surf__cell,
.mt-plan,
.mt-path__step,
.mt-obj__cell,
.mt-chan__cell { min-width: 0; }

.mt-surf dl { grid-template-columns: minmax(0, auto) minmax(0, 1fr); }

@media (max-width: 480px) {
  .mt-surf dl { grid-template-columns: minmax(0, 1fr); gap: var(--s1); }
  .mt-surf dt { margin-top: var(--s2); }
}


/* ============================================================
   Chrome public en petite largeur

   La barre gardait cinq éléments de front sur 390 px : marque,
   sélecteur de langue, connexion, appel à l'action, et des liens
   de rubrique purement masqués. Résultat illisible, et aucune
   navigation accessible.

   Sous 820 px, la barre ne conserve que la marque et un bouton.
   Tout le reste — rubriques, langue, connexion, inscription —
   descend dans un panneau unique, en pleine largeur.
   ============================================================ */

.landing-page .header-burger {
  display: none;
  width: 34px;
  min-height: 34px;
  margin-left: auto;
  align-items: center;
  justify-content: center;
  flex: none;
  background: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--r);
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--t), border-color var(--t);
}

.landing-page .header-burger:hover { color: var(--text); border-color: var(--accent); }

@media (max-width: 820px) {
  .landing-page .header-burger { display: inline-flex; }

  .landing-page .landing-header { position: relative; }
  .landing-page .landing-header .container { flex-wrap: nowrap; gap: var(--s3); }

  /* Le panneau : masqué, déployé par le bouton. */
  .landing-page .header-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--s3);
    padding: var(--s3);
    background: var(--bg-surface);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    z-index: 30;
  }

  .landing-page .landing-header[data-nav="open"] .header-nav { display: flex; }

  /* Rubriques */
  .landing-page .header-nav-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-left: 0;
  }

  .landing-page .header-nav-left a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 12px;
    font-size: 14px;
    border-radius: var(--r);
  }

  .landing-page .header-nav-left a:hover { background: var(--bg-raised); color: var(--accent-text); }

  /* Compte et actions, séparés des rubriques par un filet */
  .landing-page .header-nav-right {
    margin-left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--s2);
    padding-top: var(--s3);
    border-top: 1px solid var(--border);
  }

  .landing-page .btn-login,
  .landing-page .btn-register-header {
    min-height: 44px;
    font-size: 13px;
    white-space: normal;
    text-align: center;
  }

  .landing-page .header-account {
    max-width: none;
    padding: 0 4px var(--s1);
  }

  /* Le survol ne convient pas au tactile : la liste des langues est
     posée à plat dans le panneau, sans mécanisme d'ouverture. */
  .landing-page .lang-switcher { width: 100%; }

  .landing-page .lang-toggle { display: none; }

  .landing-page .lang-dropdown,
  .landing-page .lang-switcher:hover .lang-dropdown {
    display: flex;
    position: static;
    width: 100%;
    min-width: 0;
    gap: var(--s2);
    padding: 0;
    background: none;
    border: 0;
  }

  .landing-page .lang-dropdown a {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 10px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r);
    font-size: 13px;
  }

  .landing-page .lang-dropdown a.active {
    border-color: var(--accent);
    color: var(--accent-text);
    background: var(--bg-raised);
  }
}


/* ============================================================
   Haut de page « atterrissage » pour les articles du cocon

   Trois blocs pensés pour être lus en dix secondes, cités, et
   repris ailleurs. Écrits une fois ici, réutilisables tels quels
   par n'importe quelle page de la même famille.

   La bande de faits prolonge le bandeau de titre : même fond
   sombre, pleine largeur, avant que le corps ne passe en papier.
   ============================================================ */

/* ---- bande de faits clés ----------------------------------- */
.landing-page .seo-facts {
  --bg-base: #0D1114;
  --bg-surface: #12161A;
  --bg-raised: #171C22;
  --border: #262D35;
  --border-strong: #333C46;
  --text: #E4E9EE;
  --text-muted: #8A949F;
  --accent-text: #F0A02C;
  background: var(--bg-base);
  color: var(--text);
  padding: 0 0 var(--s7);
}

.landing-page .seo-facts__label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: var(--s4);
}

/* Quatre faits : deux colonnes, jamais une ligne orpheline. */
.landing-page .seo-facts__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
}

/* Quatre colonnes seulement quand chaque case peut accueillir la plus
   longue valeur — un code d'erreur — sans la couper en deux. */
@media (min-width: 1200px) {
  .landing-page .seo-facts__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .landing-page .seo-facts__grid { grid-template-columns: minmax(0, 1fr); }
}

.landing-page .seo-fact {
  background: var(--bg-surface);
  padding: var(--s4) var(--s5);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  min-width: 0;
}

.landing-page .seo-fact__value {
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.2;
  color: var(--accent-text);
  overflow-wrap: break-word;
}

.landing-page .seo-fact__label {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
}

/* ---- diagnostic en une commande ----------------------------- */
.landing-page .seo-cmd {
  margin: 0 0 var(--s7);
  padding-bottom: var(--s6);
  border-bottom: 1px solid var(--border);
}

.landing-page .seo-cmd h2 { margin-top: 0 !important; padding-top: 0 !important; border-top: 0 !important; }

.landing-page .seo-cmd .mt-code { margin: var(--s4) 0; }

.landing-page .seo-cmd pre { margin: 0; white-space: pre; }

.landing-page .seo-cmd__note {
  font-size: 14px !important;
  color: var(--text-muted);
}

/* ---- trois points à retenir --------------------------------- */
.landing-page .seo-takeaway {
  margin: 0 0 var(--s7);
  padding: var(--s5);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--r) var(--r) 0;
}

.landing-page .seo-takeaway h2 {
  margin: 0 0 var(--s4) !important;
  padding-top: 0 !important;
  border-top: 0 !important;
  font-size: 17px !important;
}

.landing-page .seo-takeaway ol {
  counter-reset: seo-take;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}

.landing-page .seo-takeaway li {
  counter-increment: seo-take;
  position: relative;
  padding-left: var(--s7);
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
}

.landing-page .seo-takeaway li::before {
  content: counter(seo-take, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 3px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--accent-text);
}

@media (max-width: 560px) {
  .landing-page .seo-takeaway { padding: var(--s4); }
  .landing-page .seo-takeaway li { padding-left: var(--s6); }
}

/* ============================================================
   Grilles de l'accueil : des lignes pleines, à toutes les tailles

   Les sections étaient toutes en repeat(auto-fit, minmax(…)). Le
   nombre de colonnes dépendait alors de la largeur disponible, sans
   rapport avec le nombre d'éléments : quatre cartes tombaient en
   3 + 1, trois forfaits en 2 + 1. D'où l'impression d'une mise en
   forme qui change au hasard selon l'écran.

   Chaque grille reçoit maintenant un nombre de colonnes explicite,
   choisi pour que la dernière ligne soit toujours pleine.
   ============================================================ */

/* Quatre cellules : une ou deux colonnes, jamais trois. */
.mt-surf { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 700px) {
  .mt-surf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Le couple libellé/description s'empilait mal : la colonne de
   libellé se dimensionnait sur le plus long intitulé et réduisait la
   description à un ruban d'un mot par ligne. Ils sont désormais
   toujours l'un au-dessus de l'autre. */
.mt-surf dl {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s4);
}

.mt-surf dt { margin: 0; }

.mt-surf dd { margin: var(--s1) 0 0; }

/* Trois étapes : une colonne, puis trois d'un coup. */
.mt-path { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 760px) {
  .mt-path { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Trois forfaits : idem, avec un seuil plus haut car ils sont denses. */
.mt-plans { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 880px) {
  .mt-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Six cellules : 1, 2 ou 3 colonnes — les trois divisent six. */
.mt-obj { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 640px) {
  .mt-obj { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1040px) {
  .mt-obj { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* La FAQ n'a que quatre entrées : elle reste sur deux colonnes,
   sinon la dernière ligne n'en porte qu'une. */
@media (min-width: 1040px) {
  .mt-obj--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Trois canaux d'alerte. */
.mt-chan { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 760px) {
  .mt-chan { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Une piste « 1fr » vaut minmax(auto, 1fr) : sa largeur minimale est celle
   de son contenu. Un bloc de code large y impose donc sa largeur à toute
   la page, quel que soit l'overflow-x posé sur lui. Les colonnes de la
   documentation et de l'article sont bornées à zéro, et les blocs
   susceptibles d'être larges le sont aussi. */
.landing-page .docs-content,
.landing-page .docs-sidebar,
.landing-page .legal-content,
.landing-page .content-page,
.landing-page .contact-form,
.landing-page .contact-info { min-width: 0; }

.landing-page .docs-content pre,
.landing-page .legal-content pre,
.landing-page .content-page pre { max-width: 100%; }