/* ============================================================
   accueil.css : page d'accueil bancale.org (Compagnie BaNCALE)
   Portage du handoff de design « Accueil Bancale ».

   Système propre à l'accueil : il ne partage RIEN avec la feuille du site
   Monsieur Patate (ip-styles.css), qui sert une autre identité (la fiction
   Institut Patate). Seules les polices sont communes (_shared/fonts).

   Plan : tokens · base · bandeau · hero · compagnie · spectacles · agenda
          · contact · responsive · mouvement réduit
   ============================================================ */

/* ======================= TOKENS ======================= */
:root {
    /* Couleurs */
    --ink:            #0E0E0E;   /* encre, fonds sombres */
    --white:          #FFFFFF;
    --stage:          #EDEDED;   /* fond de scène, derrière la page */
    --surface-alt:    #F4F6F8;   /* fond clair alternatif (bloc spectacle) */
    --title:          #111111;   /* titres sur fond clair */
    --body:           #535353;   /* texte courant */
    --body-strong:    #333333;
    --body-dark:      #1F1F1F;
    --on-dark:        #C9C9C9;   /* texte secondaire sur fond sombre */
    --on-dark-soft:   #A8A8A8;
    --on-dark-dim:    #9A9A9A;
    --muted:          #727272;   /* mention discrète sur clair : 4.81:1 sur blanc */
    --muted-dark:     #8A8A8A;   /* la même, sur fond sombre : 5.59:1 sur --ink */
    --rule:           #E2E2E2;   /* filets sur clair */
    --rule-dark:      #262626;   /* filets sur sombre */
    --field:          #181818;   /* fond des champs de formulaire */
    --field-border:   #666666;   /* 3.09:1 sur --field : la limite du champ reste perceptible */
    --institut:       #0A2A86;   /* bleu Institut : liens et labels sur clair */
    --accent:         #0092F5;   /* bleu accent : survol et labels sur fond SOMBRE, contour de focus */
    --accent-strong:  #006EBC;   /* le même rôle sur fond CLAIR : #0092F5 n'y fait que 3.27:1 */

    /* Rythme */
    --pad-block:      clamp(48px, 8vw, 96px);
    --pad-inline:     clamp(24px, 5vw, 64px);
    --gutter:         clamp(28px, 5vw, 72px);

    /* Hero */
    --hero-h:         min(720px, 82vh);
    --panel-basis:    430px;     /* doit rester synchronisé avec BASIS dans seam.js */
    --overlap:        76px;      /* débord du panneau blanc en mode empilé (OVERLAP_Y) */

    --radius:         2px;       /* champs et bouton ; partout ailleurs : 0 */
}

/* ======================= BASE ======================= */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--stage);
    color: var(--body);
    font-family: Montserrat, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.page {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    background: var(--white);
}

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

/* Une règle d'auteur (.label { display: block }) l'emporte sur le [hidden] de
   la feuille du navigateur : on le réaffirme, le JS masque avec .hidden = true. */
[hidden] { display: none !important; }

a { color: var(--institut); text-decoration: none; }
a:hover { color: var(--accent-strong); }

h1, h2, p { margin: 0; }

button, input, textarea { font: inherit; }

/* Le focus clavier reste visible partout, y compris sur les panneaux du hero. */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 10;
    padding: 12px 18px;
    background: var(--white);
    color: var(--ink);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.skip-link:focus { left: 0; }

/* ---- Vocabulaire typographique ---- */
.label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    line-height: 1.4;
}
.label-accent   { color: var(--accent-strong); }
/* Sur fond sombre le bleu d'origine est lisible (5.91:1) : on l'y conserve. */
.contact .label-accent { color: var(--accent); }
.label-institut { color: var(--institut); }
.label-soft     { color: var(--on-dark-soft); }
.label-dim      { color: var(--on-dark); }

.lede {
    margin-top: 18px;
    font-size: clamp(26px, 3vw, 36px);
    line-height: 1.14;
    font-weight: 700;
    color: var(--title);
    text-wrap: pretty;
}

.prose p { margin: 0 0 16px; line-height: 1.75; text-wrap: pretty; }
.prose p:last-child { margin-bottom: 0; }

/* ======================= BANDEAU D'IDENTITÉ ======================= */
.ident {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px 32px;
    padding: clamp(20px, 3vw, 30px) var(--pad-inline);
    background: var(--ink);
    border-bottom: 1px solid var(--rule-dark);
}

.ident-name {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px 16px;
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
}

.wordmark {
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: var(--white);
    /* Le « a » minuscule du logo : aucune transformation de casse ici. */
}

.ident-name .label-dim { color: var(--on-dark-dim); letter-spacing: 0.42em; }

.nav {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px 28px;
}
.nav a {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--on-dark);
}
.nav a:hover { color: var(--white); }

/* Le bouton du menu replié. Trois barres de 2 px, qui se croisent en X une
   fois le panneau ouvert. Il n'apparaît qu'en dessous de 1024 px (bloc
   RESPONSIVE) ; l'alignement sur la ligne de base du bandeau ne lui convient
   pas, ses barres n'en ont aucune, d'où le align-self. */
.burger {
    display: none;
    align-self: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
}
.burger span {
    display: block;
    width: 22px;
    height: 2px;
    margin: 5px auto;
    background: var(--on-dark);
    transition: transform 0.25s ease, opacity 0.2s ease;
}
.burger:hover span { background: var(--white); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ======================= HERO DIPTYQUE ======================= */
.hero {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    overflow: hidden;
    background: var(--ink);
}

.panel {
    position: relative;
    display: block;
    flex: 1 1 var(--panel-basis);
    min-height: 380px;
    height: var(--hero-h);
    overflow: hidden;
    color: inherit;
}
.panel-mf { background: var(--ink); }
.panel-mp { background: var(--white); }

.panel picture { position: absolute; inset: 0; }
.panel img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }

.veil { position: absolute; inset: 0; pointer-events: none; }
.veil-mf {
    background: linear-gradient(0deg,
        rgba(14, 14, 14, 0.94) 0%,
        rgba(14, 14, 14, 0.45) 34%,
        rgba(14, 14, 14, 0.08) 70%);
}
/* Le voile du panneau blanc change d'axe selon l'orientation (voir plus bas) :
   diagonale en diptyque, vertical quand les panneaux sont empilés. */
.veil-mp {
    background: linear-gradient(215deg,
        rgba(255, 255, 255, 0.96) 0%,
        rgba(255, 255, 255, 0.86) 22%,
        rgba(255, 255, 255, 0.55) 52%,
        rgba(255, 255, 255, 0.20) 78%,
        rgba(255, 255, 255, 0.06) 100%);
}

.copy {
    position: absolute;
    display: block;
    width: min(440px, 84%);
    pointer-events: none;   /* le clic appartient au panneau entier */
}
.copy-mf { left: var(--pad-inline); bottom: 68px; }
.copy-mp { right: var(--pad-inline); top: 96px; text-align: right; }

.panel-title {
    display: block;
    margin-top: 14px;
    font-size: clamp(38px, 5.4vw, 68px);
    line-height: 0.92;
    font-weight: 800;
}
.panel-quote {
    display: block;
    margin-top: 20px;
    font-size: 17px;
    font-style: italic;
    text-wrap: pretty;
}
.panel-meta {
    display: block;
    margin-top: 22px;
    font-size: 12px;
    font-weight: 600;
}

.copy-mf .panel-title { color: var(--white); }
.copy-mf .panel-quote { color: var(--white); }
.copy-mf .panel-meta  { color: var(--on-dark); }

.copy-mp .panel-title { color: var(--ink); }
.copy-mp .panel-quote { color: var(--body-dark); margin-left: auto; }
.copy-mp .panel-meta  { color: var(--body-strong); }

/* ---- Orientation : classes posées par seam.js ----
   Sans JS (ou sans clip-path), les panneaux restent en flex 50/50 avec une
   séparation droite : la page reste lisible et cliquable, seule la couture
   animée disparaît. */
/* Les deux panneaux sortent du flux et se superposent : le hero porte donc
   lui-même la hauteur, sans quoi il se replierait à zéro. */
.hero.is-diptych { height: var(--hero-h); }
.hero.is-diptych .panel {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.hero.is-diptych .copy { width: min(440px, 40%); }
.hero.is-diptych .copy-mp { max-width: calc(50% - 96px); }

.hero.is-stacked { flex-direction: column-reverse; height: auto; }
.hero.is-stacked .panel { position: relative; height: var(--hero-h); }
/* Le débord n'a de sens qu'avec la couture : sans clip-path, le panneau
   blanc recouvrirait le noir d'un bord droit. */
.hero.has-seam.is-stacked .panel-mp { margin-bottom: calc(-1 * var(--overlap)); }
.hero.is-stacked .veil-mp {
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.96) 0%,
        rgba(255, 255, 255, 0.88) 34%,
        rgba(255, 255, 255, 0.58) 66%,
        rgba(255, 255, 255, 0.22) 100%);
}
/* ======================= LA COMPAGNIE ======================= */
.compagnie {
    display: grid;
    /* min() : sans lui le plancher de 320 px s'ajoute au padding et fait
       déborder la page sous 344 px de large (RGAA 10.11). */
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: var(--gutter);
    padding: var(--pad-block) var(--pad-inline);
    background: var(--white);
}

/* ======================= LES SPECTACLES ======================= */
/* Sans gap : les deux blocs se touchent, la bascule de fond fait la séparation. */
.spectacles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

.show {
    display: block;
    position: relative;
    padding: clamp(28px, 4vw, 40px);
    color: inherit;
}

/* Le lien ne porte que l'intitulé (son nom accessible faisait 182 caractères
   quand il enveloppait tout le bloc) et sa zone de clic couvre la carte via
   ::after. Le h2 reste ainsi un titre exposé, ce qu'il n'était plus. */
.show-title a {
    color: inherit;
    text-decoration: none;
}
.show-title a::after {
    content: '';
    position: absolute;
    inset: 0;
}
.show-title a:focus-visible { outline: none; }
.show-title a:focus-visible::after {
    outline: 2px solid var(--accent);
    outline-offset: -4px;
}
.show-dark  { background: var(--ink);         color: var(--white); }
.show-light { background: var(--surface-alt); color: var(--title); }

.show-title { font-size: 26px; line-height: 1.2; font-weight: 700; }
.show-quote {
    margin-top: 12px;
    max-width: 420px;
    font-size: 15px;
    font-style: italic;
    text-wrap: pretty;
}
.show-dark  .show-quote { color: var(--on-dark); }
.show-light .show-quote { color: var(--body); }

.show-cta {
    margin-top: 26px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.show-dark  .show-cta { color: var(--white); }
.show-light .show-cta { color: var(--institut); }

.show-dark:hover  .show-cta,
.show-dark:focus-within .show-cta { color: var(--accent); }
.show-light:hover .show-cta,
.show-light:focus-within .show-cta { color: var(--accent-strong); }

/* ======================= AGENDA ======================= */
.agenda {
    padding: var(--pad-block) var(--pad-inline);
    background: var(--white);
}

.cal {
    display: grid;
    margin-top: clamp(28px, 4vw, 44px);
    border-top: 1px solid var(--rule);
}

/* Quatre colonnes : date · spectacle · lieu · description.
   La colonne spectacle vient de l'agenda d'origine (un agenda par spectacle,
   cf. _shared/php/calendar.php) : c'est un ajout à la maquette, demandé après
   coup pour que l'accueil puisse porter les dates des deux spectacles. */
.cal-items {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cal-row {
    display: grid;
    grid-template-columns:
        minmax(110px, 0.5fr) minmax(120px, 0.7fr) minmax(130px, 0.8fr) minmax(180px, 1.5fr);
    gap: 8px 32px;
    align-items: baseline;
    padding: 26px 0;
    border-bottom: 1px solid var(--rule);
}
.cal-row.is-clickable { cursor: pointer; }
.cal-row.is-clickable:hover { background: var(--surface-alt); }

.cal-date {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--title);
}
/* Horaire : absent de la maquette (dates à la journée), affiché quand
   l'événement Google en porte un. */
.cal-time {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--muted);
}

.cal-show {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--title);
    text-wrap: pretty;
}
/* Le nom du spectacle mène à sa page : souligné, sans changer de couleur,
   pour rester un titre de colonne et non un lien de plus. */
.cal-show a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--rule);
}
.cal-show a:hover,
.cal-show a:focus-visible { color: var(--accent-strong); text-decoration-color: currentColor; }

.cal-place { font-size: 15px; font-weight: 600; }
.cal-place a { color: var(--institut); }
.cal-place a:hover { color: var(--accent-strong); }

/* Valeur que l'agenda ne donne pas encore (lieu, horaire) : annoncée plutôt
   que laissée en blanc. Italique 400 : la seule italique hébergée en Montserrat. */
.is-tbd {
    font-weight: 400;
    font-style: italic;
    color: var(--muted);
    text-transform: none;
    letter-spacing: 0;
}

.cal-desc {
    font-size: 14px;
    line-height: 1.6;
    color: var(--body);
    text-wrap: pretty;
}
.cal-desc p { margin: 0 0 8px; }
/* Liens noyés dans un bloc de texte : la couleur seule ne suffit pas. */
.cal-desc a { text-decoration: underline; text-underline-offset: 3px; }
.cal-desc p:last-child { margin-bottom: 0; }
.cal-desc ul, .cal-desc ol { margin: 0 0 8px; padding-left: 18px; }

/* Troncature : on borne la hauteur et on fond le bas, plutôt que de couper le
   texte. La mise en forme reste intacte et la fiche n'a rien à reconstruire.
   La classe est retirée par le JS si le contenu tient déjà. */
.cal-desc.is-clamped {
    max-height: calc(1.6em * 3);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
}

/* Ouvre la fiche. Porte l'accessibilité de la ligne : la ligne elle-même
   n'entre pas dans la tabulation. */
.cal-more {
    margin-top: 12px;
    padding: 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--institut);
    background: none;
    border: 0;
    cursor: pointer;
}
.cal-more:hover { color: var(--accent-strong); }

.cal-empty {
    padding: 26px 0;
    border-bottom: 1px solid var(--rule);
    font-size: 14px;
    line-height: 1.6;
    color: var(--body);
    text-wrap: pretty;
}

/* ======================= CONTACT ======================= */
.contact {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: var(--gutter);
    padding: var(--pad-block) var(--pad-inline);
    background: var(--ink);
    color: var(--white);
}
.contact .lede { color: var(--white); }

.coord {
    display: grid;
    gap: 14px;
    justify-items: start;
    margin-top: clamp(28px, 4vw, 40px);
}
.coord a { font-size: 20px; font-weight: 700; color: var(--white); }
.coord a:hover { color: var(--accent); }

/* Mentions obligatoires : la maquette n'a pas de pied de page, elles tiennent
   dans le bloc contact, au même niveau de discrétion que les mentions grises. */
.legal {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    margin-top: 28px;
    font-size: 12px;
}
.legal a { color: var(--muted-dark); }
.legal a:hover { color: var(--accent); }

/* ---- Formulaire ---- */
.form { display: grid; gap: 16px; align-content: start; }
.form-req { margin: 0; font-size: 12px; color: var(--on-dark); }

.field { display: grid; gap: 8px; }
.field input, .field textarea {
    padding: 13px 14px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--white);
    background: var(--field);
    border: 1px solid var(--field-border);
    border-radius: var(--radius);
}
.field textarea { resize: vertical; }
.field input:focus, .field textarea:focus {
    border-color: var(--accent);
    outline: none;
}
.field input:focus-visible, .field textarea:focus-visible { outline: none; }
/* Champ signalé en erreur par le JS après une réponse du serveur. */
.field.is-error input, .field.is-error textarea { border-color: #E5484D; }

/* Honeypot : hors écran, jamais annoncé, jamais atteignable au clavier. */
.hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.consent {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: start;
    font-size: 12px;
    line-height: 1.6;
    color: var(--on-dark);
}
.consent input { margin: 3px 0 0; accent-color: var(--accent); }
.consent a { color: var(--on-dark); text-decoration: underline; }
.consent a:hover { color: var(--accent); }

.form button {
    justify-self: start;
    padding: 15px 28px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink);
    background: var(--white);
    border: 0;
    border-radius: var(--radius);
    cursor: pointer;
}
.form button:hover { background: var(--accent-strong); color: var(--white); }
.form button[disabled], .form button.is-busy { opacity: 0.6; cursor: progress; }

.form-status {
    min-height: 18px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--accent);
}
.form-status.is-error { color: #FF8A8F; }

/* ======================= FICHE D'UNE DATE (modale) ======================= */
/* Ouverte depuis une ligne de l'agenda : la liste ne montre qu'un aperçu de la
   description, la fiche porte le détail complet. */
.scrim {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(16px, 4vw, 40px);
    background: rgba(14, 14, 14, 0.72);
    overflow-y: auto;
}
.scrim[hidden] { display: none; }

.sheet {
    position: relative;
    width: min(560px, 100%);
    max-height: 100%;
    overflow-y: auto;
    padding: clamp(28px, 4vw, 40px);
    background: var(--white);
    border-radius: var(--radius);
}

.sheet-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    font-size: 15px;
    line-height: 1;
    color: var(--body);
    background: none;
    border: 0;
    border-radius: var(--radius);
    cursor: pointer;
}
.sheet-close:hover { color: var(--accent-strong); background: var(--surface-alt); }

.sheet-title {
    margin-top: 14px;
    font-size: clamp(24px, 3vw, 30px);
    line-height: 1.15;
    font-weight: 700;
    color: var(--title);
    text-wrap: pretty;
    padding-right: 36px;
}
.sheet-when {
    margin-top: 10px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--title);
}

.sheet-block { margin-top: 26px; }
.sheet-block h3 {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent-strong);
}
.sheet-block p { line-height: 1.6; }
.sheet-venue { color: var(--body); }
.sheet-city { font-size: 17px; font-weight: 700; color: var(--title); }
/* .sheet-city est déclarée après .is-tbd : elle la réécrirait sans ce rappel. */
.sheet-city.is-tbd {
    font-size: 15px;
    font-weight: 400;
    font-style: italic;
    color: var(--muted);
}
/* Le spectacle, en tête de fiche, mène à sa page. */
#dateShow a { color: inherit; text-underline-offset: 3px; }

.sheet-map {
    display: inline-block;
    margin-top: 12px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--institut);
}
.sheet-map:hover { color: var(--accent-strong); }

/* ======================= PAGES LÉGALES ======================= */
/* mentions-legales.html et confidentialite.html : même système que l'accueil,
   en colonne de lecture étroite. Préfixe .lg- pour ne rien croiser avec le
   bloc .legal du formulaire de contact. */
.lg-top {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px 16px;
    padding: clamp(20px, 3vw, 30px) var(--pad-inline);
    background: var(--ink);
    border-bottom: 1px solid var(--rule-dark);
}
.lg-top a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 16px; }
.lg-top .label { color: var(--on-dark-dim); letter-spacing: 0.42em; }
.lg-top a:hover .wordmark { color: var(--accent); }

.lg-main {
    max-width: 760px;
    padding: clamp(40px, 7vw, 80px) var(--pad-inline) clamp(56px, 9vw, 96px);
    background: var(--white);
}

.lg-back {
    display: inline-block;
    margin-bottom: 26px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
}
.lg-back:hover { color: var(--accent-strong); }

.lg-main h1 {
    margin-top: 18px;
    font-size: clamp(30px, 4vw, 44px);
    line-height: 1.1;
    font-weight: 700;
    color: var(--title);
}
.lg-main h2 {
    margin: 40px 0 12px;
    font-size: 20px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--title);
}
.lg-main p, .lg-main li { line-height: 1.75; text-wrap: pretty; }
.lg-main p { margin-bottom: 14px; }
.lg-main ul { margin: 8px 0 14px; padding-left: 20px; }

/* Valeur encore à fournir : visible, sans casser la lecture. */
.lg-todo {
    display: inline-block;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--institut);
    background: var(--surface-alt);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
}

.lg-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    margin-top: 48px;
    padding-top: 22px;
    border-top: 1px solid var(--rule);
    font-size: 12px;
}
.lg-foot a { color: var(--muted); }
.lg-foot a:hover { color: var(--accent-strong); }

/* ======================= RESPONSIVE ======================= */
/* Le nom de la compagnie et les quatre intitulés ne tiennent plus sur une
   ligne : plutôt que d'empiler la navigation sous le nom, elle passe derrière
   le bouton, comme sur Monsieur Patate, qui bascule à la même largeur.
   Le panneau ouvert prend toute la largeur du bandeau (flex-basis: 100%) et
   pousse le hero vers le bas : rien ne le recouvre, le bandeau n'est pas
   collant. */
@media (max-width: 1024px) {
    .burger { display: block; }
    /* Sans base nulle, le nom réclame sa largeur de contenu entière et
       renvoie le bouton à la ligne dès que le wordmark et son libellé ne
       tiennent plus côte à côte. */
    .ident-name { flex: 1 1 0; min-width: 0; }
    .nav {
        flex-basis: 100%;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        border-top: 1px solid var(--rule-dark);
    }
    .nav.is-open { display: flex; }
    .nav a {
        padding: 15px 0;
        border-bottom: 1px solid var(--rule-dark);
    }
    .nav a:last-child { border-bottom: 0; }
}

/* L'agenda est la seule grille qui ne se démonte pas seule : ses trois colonnes
   sont bornées en minmax(), elles doivent passer en pile sur petit écran. */
@media (max-width: 860px) {
    .cal-row {
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 22px 0;
    }
    .cal-row.is-clickable:hover { background: none; }
}

/* ======================= MOUVEMENT RÉDUIT ======================= */
/* seam.js fige déjà la couture ; on coupe aussi le défilement animé. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .burger span { transition: none; }
}