/*
  Les pages de contenu — standard téléphonique, secteurs, guides, pages légales, 404 — sur
  le système de site.css : mêmes jetons, mêmes polices, mêmes boutons, même en-tête et
  même pied de page que l'accueil. Ce fichier n'écrit que ce que ces pages ont en plus :
  une colonne de texte, un fil d'Ariane, un exemple de conversation, un prix, des tuiles,
  des accordéons et des tableaux.

  Le texte occupe toute la largeur du cadre (1280 px au plus) : c'est un choix du site,
  pas un oubli. Seuls l'exemple de conversation et la boîte de prix ont une largeur propre.
*/

/* ── Le cadre de la page ─────────────────────────────────────── */
.page{padding-block:2.5rem var(--sec-pad)}
@media (min-width:768px){.page{padding-top:3.5rem}}
.crumbs{display:flex;flex-wrap:wrap;gap:.25rem .5rem;margin-bottom:1.5rem;font-size:.875rem;line-height:1.5rem;color:var(--muted-fg)}
.crumbs a{display:inline-block;padding-block:.125rem;transition:color var(--dur)}
.crumbs a:hover{color:var(--fg)}
.crumbs [aria-current]{color:var(--fg)}
.page h1{font-size:clamp(2rem,1.3rem + 2.2vw,3rem);line-height:1.05;font-weight:800;letter-spacing:-.025em}
.byline,.stamp{margin-top:.875rem;font-size:.9375rem;line-height:1.5rem;color:var(--muted-fg)}
.page .lead{margin-top:1.25rem}

/* ── Le texte ────────────────────────────────────────────────── */
.page h2{margin-top:3rem;font-size:clamp(1.5rem,1.2rem + 1vw,1.875rem);line-height:1.2;font-weight:700;letter-spacing:-.02em}
.page h3{margin-top:2rem;font-size:1.25rem;line-height:1.3;font-weight:700}
.page p,.page ul,.page ol{margin-top:1rem;line-height:1.65}
.page h2 + p,.page h3 + p,.page h2 + ul,.page h3 + ul,.page h2 + ol{margin-top:.75rem}
.page ul{list-style:disc;padding-left:1.25rem}
.page ol{list-style:decimal;padding-left:1.25rem}
.page li + li{margin-top:.5rem}
.page li::marker{color:var(--muted-fg)}
.page a:not(.btn):not(.tiles a){color:var(--primary);text-decoration:underline;text-decoration-color:rgb(var(--primary-rgb)/.35);text-underline-offset:3px;transition:text-decoration-color var(--dur)}
.page a:not(.btn):not(.tiles a):hover{text-decoration-color:currentColor}
.page code{font-family:var(--font-mono);font-size:.9em;background:var(--muted);border-radius:var(--r-sm);padding:.1em .35em}
.note{font-size:.9375rem;line-height:1.5;color:var(--muted-fg)}

/* ── Un exemple de conversation, dans la langue de la démo de l'accueil :
      l'agent à gauche dans une bulle blanche, le client à droite dans une bulle sombre. */
.dialog{margin-top:1.5rem;max-width:40rem;display:flex;flex-direction:column;gap:.75rem;border:1px solid var(--border);border-radius:var(--r-2xl);background:rgb(var(--bg-rgb)/.6);padding:1.25rem;box-shadow:var(--shadow-lg)}
.dialog p{margin:0;max-width:85%;border-radius:var(--r-2xl);padding:.625rem 1rem;font-size:1rem;line-height:1.55}
.dialog .agent{align-self:flex-start;border:1px solid var(--border);border-bottom-left-radius:var(--r-sm);background:var(--card)}
.dialog .caller{align-self:flex-end;border-bottom-right-radius:var(--r-sm);background:var(--fg);color:var(--bg)}
.dialog .note{align-self:center;max-width:100%;margin-top:.25rem;border-radius:var(--r-lg);background:var(--signal);color:#fff;padding:.5rem .75rem;font-size:.9375rem;line-height:1.375rem;font-weight:500;text-align:center}
@media (max-width:479px){.dialog p{max-width:100%}}

/* ── Le prix ─────────────────────────────────────────────────── */
.price{margin-top:1.5rem;border:1px solid var(--border);border-radius:var(--r-2xl);background:var(--card);padding:1.25rem 1.5rem}
.price p{margin:0}
.price b{font-family:var(--font-mono);font-size:1.5rem;line-height:2rem;font-weight:600;letter-spacing:-.025em}

/* ── Les tuiles des index (secteurs, guides, 404) : toute la carte est le lien ── */
.tiles{margin-top:2rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,18rem),1fr));gap:1rem;padding:0;list-style:none}
.tiles li{position:relative;display:flex;flex-direction:column;gap:.5rem;margin:0;border:1px solid var(--border);border-radius:var(--r-2xl);background:var(--card);padding:1.25rem;transition:border-color var(--dur),box-shadow var(--dur)}
.tiles li:hover{border-color:var(--primary);box-shadow:var(--shadow-md)}
.tiles a{font-size:1.125rem;line-height:1.4;font-weight:700;letter-spacing:-.015em;color:var(--fg);transition:color var(--dur)}
.tiles a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.tiles li:hover a{color:var(--primary)}
.tiles p{margin:0;font-size:.9375rem;line-height:1.5;color:var(--muted-fg)}

/* ── Les accordéons (questions fréquentes), comme ceux de l'accueil ── */
.page details{border-top:1px solid var(--border)}
.page details:last-of-type{border-bottom:1px solid var(--border)}
.page h2 + details{margin-top:1rem}
.page summary{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-block:1.25rem;font-size:1.125rem;line-height:1.5;font-weight:600;cursor:pointer;list-style:none}
.page summary::-webkit-details-marker{display:none}
.page summary .i{width:1.25rem;height:1.25rem;transition:transform var(--dur)}
.page details[open] summary .i{transform:rotate(45deg)}
.page details > :not(summary){margin-top:0;padding:0 2.5rem 1.5rem 0;color:var(--muted-fg)}

/* ── Les tableaux : une boîte, un en-tête, et sur un téléphone une fiche par ligne
      (build_landing.py écrit l'intitulé de la colonne dans data-label de chaque cellule). */
.table{margin-top:1.5rem;overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-2xl);background:var(--card)}
.page table{width:100%;border-collapse:collapse;font-size:.9375rem;line-height:1.5}
.page th,.page td{text-align:left;vertical-align:top;padding:.75rem 1rem;border-bottom:1px solid var(--border)}
.page thead th{background:var(--muted);font-family:var(--font-mono);font-size:.75rem;line-height:1rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted-fg)}
.page tbody tr:last-child td{border-bottom:0}
@media (max-width:47.99rem){
  .page table,.page tbody,.page tr{display:block}
  .page thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .page tr{padding-block:.5rem;border-bottom:1px solid var(--border)}
  .page tr:last-child{border-bottom:0}
  .page td{display:block;border:0;padding:.375rem 1rem}
  .page td[data-label]{display:grid;grid-template-columns:minmax(6rem,30%) 1fr;gap:.75rem}
  .page td[data-label]::before{content:attr(data-label);padding-top:.2rem;font-family:var(--font-mono);font-size:.75rem;line-height:1rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted-fg)}
}