/*
 * Feuille de style du site de démonstration.
 *
 * Délibérément éloignée de l'identité LCH : le site filmé doit ressembler au site de
 * n'importe qui, pas au nôtre. Un spectateur qui reconnaîtrait lch-agency.com croirait
 * voir une fonctionnalité de l'agence plutôt que le résultat de son propre scénario.
 *
 * Contraintes de tournage : contrastes élevés et corps de texte généreux, parce que la
 * vidéo est cadrée en 1920×1080 et qu'une partie de l'audience la regardera sur
 * téléphone ; aucune police distante, pour que rien ne dépende du réseau pendant une
 * prise ; aucune animation d'apparition, qui à l'écran ressemblerait à une latence.
 */

:root {
    --bg: #0b1220;
    --surface: #131c2e;
    --surface-2: #1a2540;
    --line: #253352;
    --text: #eef2f9;
    --muted: #9fb0cc;
    --accent: #6ee7ff;
    --radius: 14px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 16px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
}

img {
    max-width: 100%;
    display: block;
}

/* ── En-tête ─────────────────────────────────────────────────────────────── */

.topbar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 28px;
    border-bottom: 1px solid var(--line);
    background: rgba(11, 18, 32, .92);
}

.mark {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.01em;
    text-decoration: none;
}

.mark .glyph {
    color: var(--accent);
}

/* Le badge n'est pas une coquetterie : il reste à l'écran pendant toute la vidéo pour
   qu'aucune capture ne puisse être prise pour un vrai site d'agence. */
.badge {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--accent);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 4px 11px;
}

/* ── Structure ───────────────────────────────────────────────────────────── */

.wrap {
    max-width: 1080px;
    margin: 0 auto;
    padding: 56px 28px 80px;
}

.hero h1 {
    font-size: clamp(30px, 4.4vw, 46px);
    line-height: 1.1;
    letter-spacing: -.02em;
    margin: 0 0 14px;
}

.lede {
    color: var(--muted);
    font-size: 17px;
    max-width: 60ch;
    margin: 0;
}

/* Le compteur est l'élément que la vidéo filme deux fois : « 3 en ligne » avant, « 4 en
   ligne » après. Il doit se lire d'un coup d'œil, sans arrêt sur image. */
.count {
    margin: 26px 0 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--accent);
}

/* ── Grille ──────────────────────────────────────────────────────────────── */

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 22px;
    margin-top: 34px;
}

/* height:100% — les cartes d'une même rangée s'alignent en bas même quand un nom de client
   passe sur deux lignes. Sans ça, la grille est en escalier dès qu'on publie une fiche au
   titre plus long que ses voisines : exactement ce qui arrive en direct dans la vidéo. */
.card a {
    display: block;
    height: 100%;
    text-decoration: none;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color .15s ease, transform .15s ease;
}

.card a:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}

.card .body {
    padding: 18px 20px 22px;
}

.card h2 {
    font-size: 20px;
    line-height: 1.3;
    letter-spacing: -.01em;
    margin: 6px 0 0;
}

.meta {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0;
}

/* 3:2 et pas 16:9 : c'est le format que produit slides/visuel-demo.html, aussi bien pour
   les vignettes du seed que pour la pièce jointe Airtable de la fiche publiée en direct.
   Un ratio différent recadrerait les deux sources différemment — et la carte qui apparaît
   pendant la démonstration se distinguerait de ses voisines à l'écran. */
.cover {
    aspect-ratio: 3 / 2;
    position: relative;
}

.cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.techs {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
}

.techs li {
    font-size: 12px;
    color: var(--muted);
    background: var(--surface-2);
    border-radius: 6px;
    padding: 3px 9px;
}

.techs.big li {
    font-size: 14px;
    padding: 5px 12px;
}

/* ── Fiche ───────────────────────────────────────────────────────────────── */

.article {
    max-width: 760px;
}

.article h1 {
    font-size: clamp(27px, 3.6vw, 38px);
    line-height: 1.15;
    letter-spacing: -.02em;
    margin: 8px 0 26px;
}

.article h2 {
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
    margin: 36px 0 12px;
}

.article .cover {
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--line);
}

.resume {
    font-size: 18px;
    line-height: 1.7;
    margin: 28px 0 0;
}

.back {
    margin: 0 0 30px;
    font-size: 14px;
}

.back a,
.etude a {
    color: var(--accent);
    text-decoration: none;
}

.back a:hover,
.etude a:hover {
    text-decoration: underline;
}

.etude {
    margin: 34px 0 0;
    font-weight: 600;
}

/* ── Pied ────────────────────────────────────────────────────────────────── */

.foot {
    border-top: 1px solid var(--line);
    padding: 26px 28px 40px;
}

.foot p {
    max-width: 1080px;
    margin: 0 auto;
    color: var(--muted);
    font-size: 13px;
}