/* Pages publiques : la vitrine, la méthode, les mentions légales (lot I, 2026-11-04).

   Le monde est celui de l'application (DESIGN.md) : Inter, un seul bleu, des filets d'un pixel, une seule élévation.
   Ce qui change, c'est l'ossature — pas de barre latérale, une colonne de lecture centrée — et la hiérarchie, plus
   affirmée : la page doit se comprendre en un écran par quelqu'un qui n'a jamais ouvert l'outil. Aucun effet : pas de
   dégradé, pas de bannière illustrée, pas de cartes identiques. La démonstration est une mesure (`.avance`). */

.public { min-height: 100vh; display: flex; flex-direction: column; }

.public-entete,
.public-page,
.public-pied {
    width: 100%;
    max-width: 72rem;
    margin: 0 auto;
    padding-left: var(--e4);
    padding-right: var(--e4);
    box-sizing: border-box;
}

/* --- En-tête et pied ----------------------------------------------------------------------------------------- */

.public-entete {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--e2) var(--e4);
    padding-top: var(--e3);
    padding-bottom: var(--e3);
    border-bottom: 1px solid var(--bordure);
}
.public-entete .marque { padding: 0; }
.public-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e1) var(--e3); }
.public-nav a:not(.bouton) { color: var(--texte-doux); font-weight: 520; }
.public-nav a:not(.bouton):hover { color: var(--texte); text-decoration: none; }
.public-nav a[aria-current="page"] { color: var(--texte); font-weight: 620; }

.public-page { flex: 1 0 auto; padding-top: var(--e5); padding-bottom: var(--e5); }

.public-pied {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--e2) var(--e4);
    padding-top: var(--e3);
    padding-bottom: var(--e4);
    border-top: 1px solid var(--bordure);
    color: var(--texte-faible);
    font-size: var(--t-sm);
}
.public-pied nav { display: flex; flex-wrap: wrap; gap: var(--e1) var(--e3); }
.public-pied-marque { font-weight: 620; color: var(--texte-doux); }

/* Titre des pages de lecture (méthode, mentions). */
.public-titre { max-width: 46rem; margin-bottom: var(--e4); }
.public-titre h1 { margin: 0 0 var(--e2); font-size: var(--t-titre); font-weight: 650; line-height: 1.15; letter-spacing: -0.028em; }
.public-chapeau { margin: 0; color: var(--texte-doux); font-size: var(--t-md); line-height: 1.6; }
.public-etat { margin: var(--e2) 0 0; color: var(--texte-doux); }

/* --- Vitrine : l'ouverture ----------------------------------------------------------------------------------- */

.vitrine-ouverture {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--e5);
    align-items: center;
    padding-bottom: var(--e5);
}
.vitrine-these h1 {
    margin: 0;
    max-width: 17ch;
    font-size: var(--t-chiffre);
    font-weight: 650;
    line-height: 1.12;
    letter-spacing: -0.03em;
    text-wrap: balance;
}
.vitrine-chapeau {
    max-width: 34rem;
    margin: var(--e3) 0 0;
    color: var(--texte-doux);
    font-size: var(--t-lg);
    line-height: 1.55;
}
.vitrine-actions { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e4); }

/* La démonstration : le délai médian de chaque fait avant le marché, en barres qui finissent toutes sur l'avis. Une
   piste de douze colonnes, une par mois ; la barre part du mois du fait et s'arrête au bord droit, où paraît l'avis.
   Camaïeu du bleu acier (une quantité, DESIGN.md), jamais le bleu d'action. */
.avance {
    margin: 0;
    padding: var(--e3) var(--e4) var(--e3);
    background: var(--surface);
    border: var(--carte-bordure);
    border-radius: var(--rayon);
    box-shadow: var(--carte-ombre);
}
.avance figcaption { display: grid; gap: var(--e0); margin-bottom: var(--e3); }
.avance-titre { font-size: var(--t-md); font-weight: 620; }
.avance-note { color: var(--texte-faible); font-size: var(--t-xs); line-height: 1.45; }
.avance-liste { display: grid; gap: var(--e2); margin: 0; padding: 0; list-style: none; }
.avance-ligne {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 6.5rem;
    grid-template-areas: "fait fait" "piste mois";
    gap: var(--e0) var(--e2);
    align-items: center;
}
.avance-fait { grid-area: fait; font-size: var(--t-sm); }
.avance-mois { grid-area: mois; color: var(--texte-doux); font-size: var(--t-xs); font-variant-numeric: tabular-nums; text-align: right; }
.avance-piste {
    grid-area: piste;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    height: 0.5rem;
    background: var(--creux);
    border-radius: var(--rayon-trait);
    box-shadow: inset 0 0 0 1px var(--bordure);
}
.avance-barre { grid-row: 1; background: var(--rampe-1); border-radius: var(--rayon-trait); }
.avance-1 { grid-column: 12 / 13; }
.avance-2 { grid-column: 11 / 13; }
.avance-3 { grid-column: 10 / 13; }
.avance-4 { grid-column: 9 / 13; }
.avance-5 { grid-column: 8 / 13; }
.avance-6 { grid-column: 7 / 13; }
.avance-7 { grid-column: 6 / 13; }
.avance-8 { grid-column: 5 / 13; }
.avance-9 { grid-column: 4 / 13; }
.avance-10 { grid-column: 3 / 13; }
.avance-11 { grid-column: 2 / 13; }
.avance-12 { grid-column: 1 / 13; }
/* L'axe, sous la dernière piste et à sa largeur : 12 mois à gauche, 6 au milieu, l'avis au bord droit. */
.avance-axe {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: var(--e2) calc(6.5rem + var(--e2)) 0 0;
    padding-top: var(--e1);
    border-top: 1px solid var(--bordure);
    color: var(--texte-faible);
    font-size: var(--t-xs);
}
.avance-axe span { white-space: nowrap; }
.avance-axe span:nth-child(2) { text-align: center; }
.avance-axe-avis { text-align: right; color: var(--texte); font-weight: 560; }

/* --- Vitrine : les sections ---------------------------------------------------------------------------------- */

.vitrine-section { padding: var(--e5) 0 0; border-top: 1px solid var(--bordure); margin-top: var(--e4); }
.vitrine-section-tete { max-width: 46rem; margin-bottom: var(--e4); }
.vitrine-section-tete h2 { margin: 0 0 var(--e1); font-size: var(--t-section); font-weight: 650; letter-spacing: -0.018em; }
.vitrine-section-tete p { margin: 0 0 var(--e1); color: var(--texte-doux); line-height: 1.6; }

/* Les volumes : une liste dense, le nombre à sa taille de chiffre clé, ce qu'il compte et d'où, en dessous. Des
   filets d'un pixel entre les cases (l'écart de grille sur le fond `bordure`), comme la bande de chiffres. */
.volumes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
    gap: 1px;
    margin: 0;
    background: var(--bordure);
    border: var(--carte-bordure);
    border-radius: var(--rayon);
    overflow: hidden;
}
.volume { padding: var(--e3); background: var(--surface); }
.volume-nombre { font-size: var(--t-chiffre); font-weight: 650; line-height: 1.1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.volume dd { display: grid; gap: var(--e0); margin: var(--e1) 0 0; }
.volume-quoi { font-weight: 560; }
.volume-source { color: var(--texte-faible); font-size: var(--t-sm); }

/* Ce que l'outil fait : quatre affirmations, chacune en une ligne de définition filée — pas quatre cartes. */
.principes { margin: 0; border-top: 1px solid var(--bordure); }
.principe {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--e1) var(--e4);
    padding: var(--e3) 0;
    border-bottom: 1px solid var(--bordure);
}
.principe dt { font-size: var(--t-md); font-weight: 620; }
.principe dd { margin: 0; max-width: 44rem; color: var(--texte-doux); line-height: 1.6; }

.mesure-table td:first-child { min-width: 14rem; }
.vitrine-limites { max-width: 46rem; margin-top: var(--e3); }
.vitrine-limites p { margin: 0 0 var(--e2); color: var(--texte-doux); line-height: 1.6; }

.vitrine-editeur { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--e3); }
.vitrine-editeur .vitrine-section-tete { margin-bottom: 0; }
.vitrine-editeur .vitrine-actions { margin-top: 0; }

/* --- Méthode et sources -------------------------------------------------------------------------------------- */

.methode-famille { margin-bottom: var(--e5); }
.methode-famille h2 { margin: 0 0 var(--e2); font-size: var(--t-section); font-weight: 650; letter-spacing: -0.018em; }
.methode-table td { vertical-align: top; }
.methode-source { min-width: 12rem; }
.methode-nom { display: block; font-weight: 620; }
.methode-producteur { display: block; color: var(--texte-faible); font-size: var(--t-xs); }
.methode-apport { min-width: 16rem; max-width: 30rem; color: var(--texte-doux); }
.methode-rythme { min-width: 9rem; color: var(--texte-doux); font-size: var(--t-sm); }
.methode-aucune { color: var(--texte-faible); }
.methode-texte { max-width: 46rem; }
.methode-texte h2 { margin: var(--e4) 0 var(--e2); font-size: var(--t-section); font-weight: 650; letter-spacing: -0.018em; }
.methode-texte p, .methode-texte li { color: var(--texte-doux); line-height: 1.65; }
.methode-texte ul { padding-left: var(--e3); }
.methode-note { color: var(--texte-faible); font-size: var(--t-xs); }

/* --- Mentions légales ---------------------------------------------------------------------------------------- */

.texte-legal { max-width: 46rem; line-height: 1.65; }
.texte-legal h2 { margin: var(--e4) 0 var(--e2); font-size: var(--t-lg); font-weight: 650; }
.texte-legal p { margin: 0 0 var(--e2); color: var(--texte-doux); }
.texte-legal-note { padding: var(--e2) var(--e3); background: var(--fond-etiquette); border-radius: var(--rayon); }
.fiche-legale { display: grid; gap: 0; margin: 0; border-top: 1px solid var(--bordure); }
.fiche-legale > div {
    display: grid;
    grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
    gap: var(--e0) var(--e3);
    padding: var(--e2) 0;
    border-bottom: 1px solid var(--bordure);
}
.fiche-legale dt { color: var(--texte-doux); font-weight: 560; }
.fiche-legale dd { margin: 0; overflow-wrap: anywhere; }

/* --- Adaptatif ----------------------------------------------------------------------------------------------- */

@media (min-width: 60rem) {
    .vitrine-ouverture { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
    .principe { grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); }
}

/* Sous 1 100 px, style.css efface le nom de la marque (il est dans un bandeau de navigation étroit). Ici l'en-tête a
   la place : le nom reste lu. */
@media (max-width: 1100px) {
    .public-entete .marque-texte {
        position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; white-space: normal;
    }
}

@media (max-width: 640px) {
    .public-entete, .public-page, .public-pied { padding-left: var(--e3); padding-right: var(--e3); }
    .public-entete .marque-sous { display: none; }
    /* Au téléphone, la marque mène déjà à la présentation : son lien part, la méthode et la connexion tiennent sur
       une ligne, la connexion à droite. */
    .public-nav { flex: 1 1 100%; justify-content: space-between; }
    .public-nav a[href="/presentation"] { display: none; }
    .public-page { padding-top: var(--e4); }
    .avance { padding: var(--e3); }
    .fiche-legale > div { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 400px) {
    .public-entete, .public-page, .public-pied { padding-left: 1rem; padding-right: 1rem; }
}