/* ==========================================================================
   Mon Auditorium — feuille de style unique du site vitrine
   --------------------------------------------------------------------------
   UNE seule feuille pour les dix-huit pages (neuf en français, neuf en anglais).
   Avant, chaque page portait son propre bloc <style> : la même déclaration de
   navigation existait en neuf exemplaires, et corriger une marge demandait
   neuf modifications identiques. C'est ce qui rendait impossible d'ouvrir une
   seconde langue — vingt copies au lieu de dix.

   Deux polices, et ce sont EXACTEMENT celles de l'application :
   Playfair Display pour les titres, DM Sans pour le texte courant. Le site
   utilisait Cormorant Garamond, qui est une belle garalde mais que l'on ne
   retrouve nulle part dans l'app : le visiteur passait donc d'une identité à
   une autre entre la page de vente et la première capture d'écran.

   Règle héritée de l'app et maintenue ici : les DATES et les NOMBRES sont
   toujours en sans-serif, jamais en serif. Les grands chiffres de la section
   « repères » y font exception assumée — ils sont un ornement typographique,
   pas une donnée à lire dans une phrase.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Jetons
   -------------------------------------------------------------------------- */
:root {
    --navy:        #0a192f;
    --navy-mid:    #112240;
    --navy-soft:   rgba(17, 34, 64, 0.55);
    --gold:        #d4af37;
    --gold-light:  #e8c84a;
    --gold-pale:   rgba(212, 175, 55, 0.10);
    --gold-line:   rgba(212, 175, 55, 0.15);
    --white:       #ffffff;
    /* Le bleu pâle du texte secondaire. Il valait #8892b0, soit 5,69:1 sur le
       navy : au-dessus du minimum réglementaire, et pourtant en dessous du
       confort — c'est la couleur d'une bonne moitié de la prose du site
       (chapeaux, légendes, réponses des questions), et la lire demandait un
       effort qu'aucun visiteur ne devrait fournir pour un argumentaire de
       vente. #a8b2d1 la porte à 8,34:1 sans rien perdre de la hiérarchie :
       elle reste nettement en retrait de `--text` (12,17:1), qui garde les
       phrases qu'on veut voir en premier. */
    --gray:        #a8b2d1;
    --text:        #ccd6f6;
    --hairline:    rgba(255, 255, 255, 0.06);
    --hairline-2:  rgba(255, 255, 255, 0.12);

    --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --sans:  'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --page:   1200px;
    --gutter: 60px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--sans);
    background: var(--navy);
    color: var(--white);
    overflow-x: hidden;
    line-height: 1.6;
}

/* Le mouvement n'est jamais le message : qui a demandé moins d'animation
   n'en reçoit plus aucune. Le carrousel reste utilisable, il ne glisse
   simplement plus. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* `height: auto` n'est PAS une redondance : sans lui, l'attribut `height` du
   HTML (posé sur chaque capture pour réserver la place et éviter le saut de
   mise en page) reste une consigne de présentation que le navigateur applique.
   Une règle qui ne fixe que `width: 100%` laisse donc la hauteur bloquée sur la
   valeur native — 1434 px pour les captures — et l'image sort étirée en
   hauteur, écrasée en largeur. C'est exactement ce qui est arrivé aux cinq
   familles de maquettes (`.mock-single/-duo/-trio/-tablet`, `.carousel-slide`),
   alors que `.hero-phone`, seule à porter `height: auto`, était juste.
   La règle est ici, au niveau de l'élément, pour qu'aucune nouvelle famille de
   maquette ne puisse l'oublier ; les images à hauteur imposée (logos, badges de
   store) la surchargent, en pensant alors à poser `width` avec. */
img { max-width: 100%; height: auto; }

::selection { background: rgba(212, 175, 55, 0.28); color: var(--white); }

:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Le lien d'évitement : invisible tant qu'on ne l'atteint pas au clavier,
   premier arrêt de la tabulation une fois là. Sans lui, atteindre le contenu
   d'une page demande de traverser toute la navigation à chaque page. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 3000;
    background: var(--gold);
    color: var(--navy);
    padding: 12px 22px;
    border-radius: 0 0 8px 0;
    font-weight: 600;
    text-decoration: none;
}
.skip-link:focus { left: 0; }

.inner { max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter); }

/* --------------------------------------------------------------------------
   2. Navigation
   -------------------------------------------------------------------------- */
/* Scopé sur l'identifiant, jamais sur l'élément : un sélecteur `nav` nu
   habillait en barre fixe TOUT `<nav>` de la page. Le sommaire de chapitres de
   la page Fonctionnalités (`.chapter-nav`, un vrai `<nav>` puisqu'il navigue)
   se posait donc en `position: fixed` au-dessus de la barre et recouvrait
   « Mon Auditorium » — le retour à l'accueil devenait injoignable, sur la seule
   page qui porte un second `<nav>`. Un futur fil d'Ariane retomberait dans le
   même piège. */
#mainNav {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    padding: 0 var(--gutter);
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(10, 25, 47, 0.93);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--gold-line);
    transition: height .3s, background .3s;
}
#mainNav.scrolled { height: 60px; background: rgba(10, 25, 47, 0.99); }

.nav-logo a {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    font-family: var(--serif);
    font-size: 25px;
    font-weight: 600;
    letter-spacing: -0.2px;
    white-space: nowrap;
}
.nav-logo img { height: 32px; width: 32px; border-radius: 7px; object-fit: cover; }
.nav-logo .w { color: var(--white); }
.nav-logo .g { color: var(--gold); }

.nav-links { display: flex; gap: 30px; align-items: center; }
.nav-links > a {
    color: var(--gray);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: color .2s;
}
.nav-links > a:hover,
.nav-links > a[aria-current="page"] { color: var(--white); }
.nav-links > a[aria-current="page"] { color: var(--gold); }

/* Le bouton d'appel de la barre : c'est le TÉLÉCHARGEMENT, plus l'accès web.
   Le web y figurait en doré pleine largeur, donc plus visible que les stores
   eux-mêmes, alors que c'est l'usage que nous cherchons le moins à pousser. */
.nav-cta {
    background: var(--gold);
    color: var(--navy) !important;
    padding: 10px 20px;
    border-radius: 7px;
    font-weight: 600 !important;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
    transition: background .2s;
}
.nav-cta:hover { background: var(--gold-light); }

/* Sélecteur de langue — deux jetons, celui de la langue courante allumé. */
.lang-switch { display: inline-flex; align-items: center; gap: 2px; }
.lang-switch a {
    color: var(--gray);
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    padding: 5px 8px;
    border-radius: 5px;
    transition: color .2s, background .2s;
}
.lang-switch a:hover { color: var(--white); }
.lang-switch a[aria-current="true"] { color: var(--navy); background: var(--gold); }
.lang-switch span { color: rgba(136, 146, 176, 0.4); font-size: 11px; }

/* Bouton hamburger — masqué au-dessus de 1000 px. */
.nav-burger {
    display: none;
    width: 42px;
    height: 42px;
    border: 1px solid var(--hairline-2);
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    padding: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
}
.nav-burger span {
    display: block;
    width: 18px;
    height: 1.5px;
    background: var(--white);
    transition: transform .25s, opacity .2s;
}
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   3. Boutons
   -------------------------------------------------------------------------- */
.btn-primary, .btn-secondary, .btn-quiet {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 30px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 15px;
    font-family: var(--sans);
    transition: all .25s;
    cursor: pointer;
}
.btn-primary {
    background: var(--gold);
    color: var(--navy);
    font-weight: 600;
    border: 1px solid var(--gold);
    box-shadow: 0 8px 24px rgba(212, 175, 55, 0.22);
}
.btn-primary:hover { background: var(--gold-light); transform: translateY(-2px); }
.btn-secondary {
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: var(--white);
    font-weight: 500;
    background: transparent;
}
.btn-secondary:hover { border-color: rgba(212, 175, 55, 0.5); color: var(--gold); }

/* Le troisième niveau : un lien souligné, sans cadre. C'est là que vit
   désormais l'accès navigateur — présent pour qui le cherche, jamais en
   concurrence visuelle avec le téléchargement. */
.btn-quiet {
    padding: 8px 0;
    color: var(--gray);
    font-size: 14px;
    font-weight: 500;
    border-bottom: 1px solid rgba(136, 146, 176, 0.35);
    border-radius: 0;
    gap: 7px;
}
.btn-quiet:hover { color: var(--gold); border-bottom-color: rgba(212, 175, 55, 0.6); }

/* Badges de store — le geste principal du site. */
.store-badges { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; align-items: center; }
.store-badges img { display: block; height: 52px; width: auto; transition: transform .2s; }
.store-badges a:hover img { transform: translateY(-2px); }
.store-badges.small img { height: 40px; }

/* --------------------------------------------------------------------------
   4. Titraille commune
   -------------------------------------------------------------------------- */
/* Le haut-titre doré qui annonce chaque section. Il NOMME le sujet — « Ma
   Saison », « Vos billets », « La Loge » — et c'est souvent le seul mot qui
   permette de savoir où l'on est sur une page très longue. À 11 px avec 4 px
   d'approche, il se lisait comme un filet décoratif.

   ⚠️ La correction n'est pas seulement une taille. **L'approche large est ce
   qui coûtait le plus** : au-delà de 3 px elle disperse un mot court au lieu
   de le poser, et le gain de deux points de corps y serait passé tout entier.
   On monte donc le corps ET on resserre l'approche — c'est exactement le
   réglage que la page Professionnels avait déjà trouvé pour son propre compte
   (14 px / 2,4 px), et qui n'avait pas été remonté au jeton commun.

   Le poids reste à 600 et la couleur inchangée : ces libellés surmontent des
   titres de 52 px qu'ils annoncent sans les concurrencer. */
.section-label {
    font-size: 13px;
    letter-spacing: 2.6px;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 600;
    margin-bottom: 18px;
    display: block;
}
/* Sur la page Professionnels, ces libellés portent une charge de plus : ils
   nomment à QUI s'adresse chacun des trois chapitres (les salles, les artistes
   et agents, la presse), et le même mot les annonce en tête de page. Ils y
   gagnent un demi-point et un poids de plus.

   ⚠️ Cette exception a longtemps été le SEUL endroit où le réglage juste
   existait : elle avait trouvé 14 px / 2,4 px pendant que le jeton commun
   restait à 11 px / 4 px, et son commentaire justifiait de ne pas remonter la
   correction. C'était une erreur de lecture — le défaut qu'elle décrit (un mot
   court dispersé par une approche trop large) n'avait rien de propre à cette
   page. Le jeton commun a rattrapé l'essentiel du chemin ; il ne reste ici
   qu'un écart d'accent, pas de nature. */
.page-pro .section-label {
    font-size: 14px;
    letter-spacing: 2.4px;
    font-weight: 700;
    margin-bottom: 14px;
}

.section-title {
    font-family: var(--serif);
    font-size: clamp(30px, 4.2vw, 52px);
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: -0.5px;
}
.section-title em { font-style: italic; color: var(--gold); }
.section-lede {
    font-size: 16px;
    color: var(--gray);
    max-width: 620px;
    line-height: 1.75;
    margin-top: 18px;
}
.gold-line { width: 48px; height: 1px; background: var(--gold); margin: 22px 0; }

/* --------------------------------------------------------------------------
   5. Hero
   -------------------------------------------------------------------------- */
.hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 128px 40px 80px;
    position: relative;
    overflow: hidden;
}
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 80% 50% at 50% -5%, rgba(212, 175, 55, 0.09) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 10% 90%, rgba(29, 52, 97, 0.5) 0%, transparent 60%);
}
.hero > * { position: relative; z-index: 1; }

.hero-logo {
    width: 88px; height: 88px; border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08);
    display: block; margin: 0 auto 30px;
}
.hero h1 {
    font-family: var(--serif);
    font-size: clamp(42px, 6.4vw, 82px);
    font-weight: 400;
    line-height: 1.06;
    letter-spacing: -1.5px;
    margin-bottom: 26px;
}
.hero h1 em { font-style: italic; color: var(--gold); }
.hero-sub {
    max-width: 600px;
    font-size: 17.5px;
    line-height: 1.75;
    color: var(--text);
    margin: 0 auto 38px;
}
.hero-proof {
    margin-top: 22px;
    font-size: 13px;
    color: var(--gray);
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.hero-proof .sep { color: rgba(136, 146, 176, 0.4); }

.hero-eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 50px; padding: 8px 20px;
    font-size: 12px; font-weight: 500; letter-spacing: 2px;
    text-transform: uppercase; color: var(--gold); margin-bottom: 32px;
    text-decoration: none;
}
a.hero-eyebrow:hover { background: var(--gold-pale); }
.hero-eyebrow::before {
    content: ''; width: 6px; height: 6px; background: var(--gold);
    border-radius: 50%; animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.7); } }

.hero-phones {
    margin-top: 64px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 24px;
}
.hero-phone {
    border-radius: 40px;
    overflow: hidden;
    border: 6px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04);
    flex-shrink: 0;
}
.hero-phone img { display: block; width: 100%; height: auto; }
.hero-phone.main { width: 280px; z-index: 3; }
.hero-phone.side { width: 236px; margin-top: 50px; opacity: .88; z-index: 2; }

/* --------------------------------------------------------------------------
   6. Bandeau défilant des salles
   -------------------------------------------------------------------------- */
.marquee-section {
    border-top: 1px solid var(--gold-line);
    border-bottom: 1px solid var(--gold-line);
    padding: 16px 0;
    overflow: hidden;
}
.marquee-track { display: flex; gap: 60px; animation: marquee 34s linear infinite; width: max-content; }
/* Les noms de salles qui défilent. Ce ne sont pas un ornement : ce sont les
   institutions dont le visiteur cherche justement à savoir si elles sont
   couvertes — l'Opéra de Paris et la Philharmonie répondent à sa question
   avant n'importe quel argumentaire. À 45 % d'opacité sur un doré déjà sombre,
   ils passaient inaperçus, et le mouvement rendait la lecture plus difficile
   encore. 72 % les rend lisibles au vol sans en faire un titre. */
.marquee-item {
    font-family: var(--serif);
    font-size: 13px; letter-spacing: 3px; text-transform: uppercase;
    color: rgba(212, 175, 55, 0.72); white-space: nowrap;
    display: flex; align-items: center; gap: 60px;
}
/* Le losange reste un séparateur, donc nettement en retrait des noms : il
   sépare, il ne se lit pas. */
.marquee-item::after { content: '✦'; color: rgba(212, 175, 55, 0.38); font-size: 9px; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* --------------------------------------------------------------------------
   7. Repères chiffrés
   -------------------------------------------------------------------------- */
.stats-section { padding: 100px 0; }
.stats-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1px;
    background: var(--hairline);
    border: 1px solid var(--hairline);
    border-radius: 16px;
    overflow: hidden;
    margin-top: 54px;
}
.stat-item { padding: 42px 18px; background: var(--navy-mid); text-align: center; transition: background .3s; }
.stat-item:hover { background: rgba(212, 175, 55, 0.06); }
.stat-number {
    font-family: var(--serif);
    font-size: 46px; font-weight: 600; color: var(--gold);
    line-height: 1; margin-bottom: 10px;
}
.stat-label { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gray); }
.stats-note { font-size: 12.5px; color: var(--gray); margin-top: 20px; text-align: right; }

/* --------------------------------------------------------------------------
   8. Blocs de fonctionnalité (texte / visuel en alternance)
   -------------------------------------------------------------------------- */
.features-deep { padding: 30px 0; }
.feat-block { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--hairline); }
.feat-block.reverse { direction: rtl; }
.feat-block.reverse > * { direction: ltr; }
.feat-text {
    padding: 78px 68px;
    display: flex; flex-direction: column; justify-content: center;
    background: var(--navy-mid);
}
.feat-block:nth-child(even) .feat-text { background: var(--navy-soft); }
.feat-number {
    font-family: var(--serif); font-size: 66px; font-weight: 400;
    color: rgba(212, 175, 55, 0.10); line-height: 1; display: block; margin-bottom: -6px;
}
.feat-text h2 {
    font-family: var(--serif); font-size: clamp(28px, 3vw, 36px);
    font-weight: 600; line-height: 1.15; margin-bottom: 16px;
}
.feat-text > p { font-size: 15.5px; color: var(--gray); line-height: 1.8; margin-bottom: 28px; }
.feat-details { list-style: none; }
.feat-details li {
    font-size: 14.5px; color: var(--text);
    padding: 11px 0 11px 22px;
    border-bottom: 1px solid var(--hairline);
    position: relative; line-height: 1.55;
}
.feat-details li:last-child { border-bottom: none; }
.feat-details li::before { content: '—'; position: absolute; left: 0; color: var(--gold); font-size: 12px; top: 13px; }
.feat-details li strong { color: var(--white); font-weight: 600; }

.badge-loge {
    display: inline-block; font-size: 9.5px; font-weight: 700;
    letter-spacing: 1.5px; text-transform: uppercase;
    padding: 3px 9px; border-radius: 4px; margin-left: 8px; vertical-align: middle; background: var(--gold-pale); border: 1px solid rgba(212, 175, 55, 0.45); color: var(--gold); }

.feat-visual {
    position: relative; overflow: hidden; background: var(--navy);
    display: flex; align-items: center; justify-content: center; padding: 60px 40px;
}
.feat-block:nth-child(even) .feat-visual { background: rgba(10, 25, 47, 0.7); }
.feat-visual::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(212, 175, 55, 0.07) 0%, transparent 70%);
}

/* Maquettes de téléphone */
.mock-single {
    position: relative; z-index: 2; width: 280px; border-radius: 40px; overflow: hidden;
    border: 7px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.mock-single img { width: 100%; display: block; }

.mock-duo { position: relative; width: 440px; height: 620px; }
.mock-duo .mb {
    position: absolute; width: 250px; top: 0; right: 0; border-radius: 36px; overflow: hidden;
    border: 6px solid rgba(255, 255, 255, 0.09); box-shadow: 0 28px 60px rgba(0, 0, 0, 0.5);
    opacity: .82; z-index: 1;
}
.mock-duo .mf {
    position: absolute; width: 265px; bottom: 0; left: 0; border-radius: 38px; overflow: hidden;
    border: 7px solid rgba(255, 255, 255, 0.13); box-shadow: 0 36px 72px rgba(0, 0, 0, 0.6); z-index: 2;
}
.mock-duo img { width: 100%; display: block; }

.mock-trio { position: relative; width: 480px; height: 640px; }
.mock-trio .mt {
    position: absolute; width: 245px; top: 0; left: 50%; transform: translateX(-50%); z-index: 3;
    border-radius: 36px; overflow: hidden; border: 6px solid rgba(255, 255, 255, 0.13);
    box-shadow: 0 36px 72px rgba(0, 0, 0, 0.6);
}
.mock-trio .ml, .mock-trio .mr {
    position: absolute; width: 205px; bottom: 0; z-index: 2; border-radius: 32px; overflow: hidden;
    border: 5px solid rgba(255, 255, 255, 0.09); box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5); opacity: .88;
}
.mock-trio .ml { left: 0; transform: translateX(-18px) rotate(-3deg); }
.mock-trio .mr { right: 0; transform: translateX(18px) rotate(3deg); }
.mock-trio img { width: 100%; display: block; }

/* Maquette large (tablette) */
.mock-tablet {
    position: relative; z-index: 2; width: 100%; max-width: 560px;
    border-radius: 22px; overflow: hidden;
    border: 8px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.mock-tablet img { width: 100%; display: block; }

/* --------------------------------------------------------------------------
   9. Carrousel de captures
   -------------------------------------------------------------------------- */
.carousel-section {
    padding: 96px 0;
    background: var(--navy-mid);
    border-top: 1px solid rgba(212, 175, 55, 0.1);
    border-bottom: 1px solid rgba(212, 175, 55, 0.1);
}
.carousel-header {
    display: flex; align-items: flex-end; justify-content: space-between;
    margin-bottom: 50px; flex-wrap: wrap; gap: 24px;
}
.carousel-header p { font-size: 15px; color: var(--gray); max-width: 380px; line-height: 1.7; margin-top: 14px; }
.carousel-outer { position: relative; }
.carousel-track-wrap { overflow: hidden; border-radius: 20px; }
.carousel-track {
    display: flex; gap: 20px;
    transition: transform .45s cubic-bezier(.25, .46, .45, .94);
    padding: 12px 0 20px;
}
.carousel-slide { flex: 0 0 auto; width: 220px; }
.carousel-slide img {
    width: 100%; border-radius: 30px; display: block;
    border: 5px solid rgba(255, 255, 255, 0.11);
    box-shadow: 0 28px 56px rgba(0, 0, 0, 0.55);
    transition: transform .35s, box-shadow .35s;
}
.carousel-slide img:hover { transform: translateY(-8px); box-shadow: 0 40px 72px rgba(0, 0, 0, 0.65); }
.carousel-slide:nth-child(2n) img { margin-top: 32px; }
.carousel-label { font-size: 12px; color: var(--gray); text-align: center; margin-top: 14px; }

.carousel-controls { display: flex; gap: 12px; margin-top: 32px; justify-content: center; }
.carousel-btn {
    width: 48px; height: 48px; border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
    color: var(--white); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all .2s; font-size: 18px;
}
.carousel-btn:hover:not(:disabled) { background: var(--gold-pale); border-color: rgba(212, 175, 55, 0.4); color: var(--gold); }
.carousel-btn:disabled { opacity: .3; cursor: not-allowed; }
.carousel-dots { display: flex; gap: 8px; justify-content: center; margin-top: 20px; flex-wrap: wrap; }
.carousel-dots button {
    width: 6px; height: 6px; border-radius: 50%; border: none; padding: 0;
    background: rgba(255, 255, 255, 0.2); transition: all .3s; cursor: pointer;
}
.carousel-dots button.active { background: var(--gold); width: 20px; border-radius: 3px; }

/* --------------------------------------------------------------------------
   10. Grilles de cartes
   -------------------------------------------------------------------------- */
.features-summary { padding: 96px 0; }
.pills-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 50px; }
.pill-card {
    background: var(--navy-mid); border: 1px solid var(--hairline);
    border-radius: 16px; padding: 30px 26px;
    transition: border-color .3s, transform .3s;
    position: relative; overflow: hidden;
}
.pill-card::after {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity: 0; transition: opacity .3s;
}
.pill-card:hover { border-color: rgba(212, 175, 55, 0.2); transform: translateY(-4px); }
.pill-card:hover::after { opacity: 1; }
.pill-icon { font-size: 25px; margin-bottom: 14px; display: block; }
.pill-card h3 { font-family: var(--serif); font-size: 21px; font-weight: 600; margin-bottom: 10px; line-height: 1.25; }
.pill-card p { font-size: 14px; color: var(--gray); line-height: 1.7; }

/* --------------------------------------------------------------------------
   11. La Loge — l'unique surface où le doré prend le dessus
   -------------------------------------------------------------------------- */
.loge-section {
    padding: 110px 0;
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--gold-line);
    border-bottom: 1px solid var(--gold-line);
    background:
        radial-gradient(ellipse 60% 70% at 78% 30%, rgba(212, 175, 55, 0.10) 0%, transparent 65%),
        var(--navy);
}
.loge-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 70px; align-items: center; }
.loge-crest {
    display: inline-flex; align-items: center; gap: 12px;
    border: 1px solid rgba(212, 175, 55, 0.4);
    border-radius: 50px; padding: 7px 8px 7px 18px;
    margin-bottom: 24px;
}
.loge-crest span {
    font-size: 11px; letter-spacing: 3px; text-transform: uppercase;
    color: var(--gold); font-weight: 600;
}
.loge-crest img { height: 26px; width: 26px; border-radius: 50%; object-fit: cover; }
.loge-section h2 {
    font-family: var(--serif); font-size: clamp(32px, 4vw, 50px);
    font-weight: 400; line-height: 1.12; letter-spacing: -0.5px; margin-bottom: 20px;
}
.loge-section h2 em { font-style: italic; color: var(--gold); }
.loge-section > .inner > .loge-grid > div > p { font-size: 16.5px; color: var(--text); line-height: 1.8; }

.loge-list { list-style: none; margin: 30px 0 34px; }
.loge-list li {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 13px 0; border-bottom: 1px solid var(--hairline);
    font-size: 15px; line-height: 1.55;
}
.loge-list li:last-child { border-bottom: none; }
.loge-list .mark { color: var(--gold); flex-shrink: 0; font-size: 13px; line-height: 1.7; }
.loge-list strong { display: block; font-weight: 600; color: var(--white); margin-bottom: 2px; }
.loge-list span.d { color: var(--gray); font-size: 14px; }

.loge-price {
    background: var(--navy-mid);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 18px;
    padding: 34px 32px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
}
.loge-price .tag {
    display: inline-block; background: var(--gold); color: var(--navy);
    font-size: 10.5px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
    padding: 4px 11px; border-radius: 4px; margin-bottom: 18px;
}
.loge-price .amount { font-family: var(--serif); font-size: 52px; font-weight: 600; color: var(--gold); line-height: 1; }
.loge-price .amount small { font-family: var(--sans); font-size: 15px; font-weight: 500; color: var(--gray); letter-spacing: 0; }
.loge-price .was { font-size: 14px; color: var(--gray); margin-top: 10px; }
.loge-price .was s { opacity: .7; }
.loge-price .split { margin-top: 6px; font-size: 13.5px; color: var(--gray); }
.loge-price hr { border: none; border-top: 1px solid var(--hairline); margin: 22px 0; }
/* ⚠️ **Ce qui est réellement débité se lit en OR, pas en gris.** Le prix
   affiché en grand est un prix MENSUALISÉ (2,08 €) — une commodité de lecture,
   pas ce qui part du compte. La somme qui part, elle, est de 24,99 € en une
   fois, et elle était rangée dans la même ligne grise que le tarif de
   reconduction. Un montant qu'on découvre à l'écran de paiement fait renoncer,
   et à juste titre : l'annoncer franchement coûte moins cher qu'une
   déception. */
.loge-price .was .debit { color: var(--gold-light); font-weight: 700; }

/* Le paiement passe par le store, et le dire est un ARGUMENT.
   « Confier sa carte à une application inconnue » est la crainte qui arrête un
   abonnement, et elle est ici sans objet : nous ne voyons jamais la carte.
   Cette phrase était noyée au milieu du pavé de mentions légales, en 12 px
   gris, là où elle rassure — donc elle doit se lire avant. */
.loge-price .paiement {
    font-size: 13px; color: var(--text); line-height: 1.7;
    background: var(--gold-pale);
    border: 1px solid var(--gold-line);
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 16px;
}
.loge-price .paiement strong { color: var(--gold-light); font-weight: 700; }

.loge-price .fine { font-size: 12px; color: var(--gray); line-height: 1.65; }
.loge-price .fine a { color: var(--gold); }

.loge-free {
    margin-top: 26px; padding: 18px 20px;
    border: 1px dashed rgba(136, 146, 176, 0.3); border-radius: 12px;
    font-size: 13.5px; color: var(--gray); line-height: 1.65;
}
.loge-free strong { color: var(--text); font-weight: 600; }

/* --------------------------------------------------------------------------
   12. Appel final
   -------------------------------------------------------------------------- */
.cta-section { padding: 140px 0; text-align: center; position: relative; overflow: hidden; }
.cta-section::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(212, 175, 55, 0.07) 0%, transparent 70%);
}
.cta-section .inner { position: relative; }
.cta-section h2 {
    font-family: var(--serif); font-size: clamp(34px, 5.4vw, 62px);
    font-weight: 400; line-height: 1.1; margin-bottom: 20px; letter-spacing: -1px;
}
.cta-section h2 em { font-style: italic; color: var(--gold); }
.cta-section > .inner > p { font-size: 16.5px; color: var(--gray); max-width: 520px; margin: 0 auto 42px; line-height: 1.75; }
.cta-web { margin-top: 30px; }

/* La version navigateur, sous les deux badges de store.
   ⚠️ Elle existe depuis toujours (`app.mon-auditorium.fr`) et le site la
   citait déjà — dans son pied de page, dans les mentions légales, dans les
   CGU. Elle manquait au seul endroit où on la cherche : le bloc sur lequel
   « Télécharger » fait atterrir. On y voyait iOS et Android, donc on en
   concluait qu'il n'y avait que ça — alors que consulter sa saison sur grand
   écran, et surtout ouvrir la billetterie d'une salle depuis un ordinateur,
   est exactement ce que beaucoup préfèrent faire. */
.footer-web { margin-top: 14px; }
.footer-web a {
    font-size: 13.5px; color: var(--gray); text-decoration: none;
    border-bottom: 1px solid rgba(168, 178, 209, 0.3);
    padding-bottom: 2px; transition: color .2s, border-color .2s;
}
.footer-web a:hover { color: var(--gold); border-bottom-color: rgba(212, 175, 55, 0.6); }

/* --------------------------------------------------------------------------
   13. Pied de page
   -------------------------------------------------------------------------- */
footer { background: var(--navy-mid); border-top: 1px solid var(--hairline); padding: 76px var(--gutter) 38px; }
.footer-grid {
    max-width: var(--page); margin: 0 auto 54px;
    display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 56px;
}
.footer-brand .logo { font-family: var(--serif); font-size: 27px; font-weight: 600; margin-bottom: 14px; }
.footer-brand .logo .g { color: var(--gold); }
.footer-brand p { font-size: 14px; color: var(--gray); line-height: 1.75; max-width: 280px; }
.footer-stores { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
/* `width: auto` obligatoire dès qu'on impose une hauteur : sans lui, l'attribut
   `width` du HTML s'applique et le badge est déformé (même piège que ci-dessus,
   dans l'autre sens). */
.footer-stores img { height: 36px; width: auto; display: block; }
.footer-col h2 { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--white); margin-bottom: 18px; }
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 11px; }
.footer-col ul li a { text-decoration: none; color: var(--gray); font-size: 14px; transition: color .2s; }
.footer-col ul li a:hover { color: var(--gold); }
.footer-bottom {
    max-width: var(--page); margin: 0 auto; padding-top: 26px;
    border-top: 1px solid var(--hairline);
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;
}
.footer-bottom p { font-size: 13px; color: var(--gray); }
.footer-social { display: flex; gap: 14px; }
.footer-social a { color: var(--gray); display: flex; align-items: center; transition: color .2s; }
.footer-social a:hover { color: var(--gold); }
.footer-legal { display: flex; gap: 22px; flex-wrap: wrap; }
.footer-legal a { font-size: 13px; color: var(--gray); text-decoration: none; transition: color .2s; }
.footer-legal a:hover { color: var(--white); }

/* --------------------------------------------------------------------------
   14. Pages de documents (CGU, confidentialité, mentions légales)
   -------------------------------------------------------------------------- */
.doc-wrap { max-width: 1080px; margin: 0 auto; padding: 136px var(--gutter) 90px; display: grid; grid-template-columns: 230px 1fr; gap: 56px; align-items: start; }
.toc { position: sticky; top: 100px; }
.toc h4 { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }
.toc ul { list-style: none; }
.toc li { margin-bottom: 9px; }
.toc a {
    font-size: 13.5px; color: var(--gray); text-decoration: none;
    display: block; padding: 4px 0 4px 12px; border-left: 1px solid var(--hairline);
    transition: color .2s, border-color .2s;
}
.toc a:hover, .toc a.active { color: var(--gold); border-left-color: var(--gold); }

.doc-head { margin-bottom: 46px; }
.doc-head h1 { font-family: var(--serif); font-size: clamp(34px, 4.6vw, 52px); font-weight: 400; line-height: 1.1; letter-spacing: -0.8px; }
.doc-head .updated { font-size: 13px; color: var(--gray); margin-top: 14px; }
.doc-summary {
    background: var(--navy-mid); border: 1px solid rgba(212, 175, 55, 0.22);
    border-radius: 14px; padding: 22px 24px; margin-top: 26px;
    font-size: 14.5px; color: var(--text); line-height: 1.75;
}
.doc-summary strong { color: var(--gold); }

.doc-section { margin-bottom: 46px; scroll-margin-top: 100px; }
.doc-section h2 { font-family: var(--serif); font-size: 27px; font-weight: 600; margin-bottom: 16px; line-height: 1.2; }
.doc-section h3 { font-size: 15px; font-weight: 600; color: var(--white); margin: 24px 0 10px; }
.doc-section p { font-size: 15px; color: var(--text); line-height: 1.85; margin-bottom: 14px; }
.doc-section ul, .doc-section ol { margin: 4px 0 16px 20px; }
.doc-section li { font-size: 15px; color: var(--text); line-height: 1.8; margin-bottom: 8px; }
.doc-section a { color: var(--gold); }
.doc-section strong { color: var(--white); }
.doc-note {
    border-left: 2px solid var(--gold); background: var(--gold-pale);
    padding: 16px 20px; border-radius: 0 10px 10px 0; margin: 18px 0;
}
.doc-note p:last-child { margin-bottom: 0; }
.doc-table { width: 100%; border-collapse: collapse; margin: 16px 0 20px; font-size: 14px; }
.doc-table th, .doc-table td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.doc-table th { color: var(--white); font-weight: 600; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; }
.doc-table td { color: var(--text); line-height: 1.6; }
.doc-scroll { overflow-x: auto; }

/* --------------------------------------------------------------------------
   15. Page intérieure générique (fonctionnalités, professionnels, contact)
   -------------------------------------------------------------------------- */
.page-hero { padding: 150px 0 70px; text-align: center; position: relative; overflow: hidden; }
.page-hero::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(212, 175, 55, 0.08) 0%, transparent 65%);
}
.page-hero .inner { position: relative; }
.page-hero h1 {
    font-family: var(--serif); font-size: clamp(36px, 5.4vw, 62px);
    font-weight: 400; line-height: 1.1; letter-spacing: -1px; margin-bottom: 20px;
}
.page-hero h1 em { font-style: italic; color: var(--gold); }
.page-hero p { font-size: 17px; color: var(--gray); max-width: 660px; margin: 0 auto; line-height: 1.8; }

.chapter { padding: 70px 0; border-top: 1px solid var(--hairline); scroll-margin-top: 90px; }
.chapter-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.chapter-head h2 { font-family: var(--serif); font-size: clamp(26px, 3.2vw, 38px); font-weight: 600; line-height: 1.15; }
.chapter > .inner > p.lede { font-size: 16px; color: var(--gray); line-height: 1.8; max-width: 720px; margin-bottom: 34px; }
.chapter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.chapter-card {
    background: var(--navy-mid); border: 1px solid var(--hairline);
    border-radius: 14px; padding: 26px 24px; transition: border-color .3s, transform .3s;
}
.chapter-card:hover { border-color: rgba(212, 175, 55, 0.22); transform: translateY(-3px); }
.chapter-card h3 { font-size: 16px; font-weight: 600; margin-bottom: 9px; color: var(--white); }
.chapter-card p { font-size: 14px; color: var(--gray); line-height: 1.7; }
.chapter-card strong { color: var(--white); font-weight: 600; }
/* La source d'un chiffre, dite sur place plutôt qu'en note de bas de page :
   personne ne descend vérifier une note, et un pourcentage sans provenance
   sur une page de vente ne vaut rien. Plus petite que le texte, jamais plus
   pâle — `--gray` est déjà le gris de service, l'affaiblir encore la rendrait
   illisible sur le navy. */
.chapter-card .src { font-size: 11.5px; opacity: .8; }

/* --------------------------------------------------------------------------
   15 bis. Chapitre en deux colonnes : les arguments à gauche, l'écran à droite
   --------------------------------------------------------------------------
   Une liste de quinze cartes est un cahier des charges ; la même liste avec
   l'application ouverte à côté est une démonstration. Le visiteur d'une page
   « professionnels » ne connaît pas le produit — il lisait donc quinze
   promesses sans avoir jamais vu l'objet dont elles parlent.

   La colonne de droite est COLLANTE (`sticky`) : elle accompagne la lecture
   au lieu de défiler avec elle, si bien qu'un argument et la capture qui
   l'illustre restent à l'écran ensemble. C'est tout l'intérêt du montage —
   sans `sticky`, deux colonnes qui défilent de concert n'apportent rien qu'un
   bloc d'images posé plus haut n'aurait fait.

   ⚠️ **Sur mobile, le visuel passe DEVANT les cartes** (`order`), alors que
   l'ordre du document est l'inverse. Le HTML est écrit dans l'ordre de la
   LECTURE (les arguments d'abord, c'est ce que lit un lecteur d'écran et ce
   qu'indexe un moteur) ; en une seule colonne, quinze cartes avant la première
   capture enterreraient les captures sous un mur de texte.
   -------------------------------------------------------------------------- */
.pro-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 46px;
    align-items: start;
}
.pro-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pro-visuel { position: sticky; top: 104px; }

/* Le diaporama lui-même. Fondu enchaîné plutôt que glissement : les captures
   ont toutes la même silhouette, un défilement latéral n'y donnerait qu'une
   impression de bougé. */
.diapo-cadre {
    position: relative;
    border-radius: 30px;
    overflow: hidden;
    border: 5px solid rgba(255, 255, 255, 0.11);
    box-shadow: 0 28px 56px rgba(0, 0, 0, 0.55);
    /* La hauteur vient du ratio des captures (660 × 1434), pas du contenu :
       les images étant superposées en absolu, le cadre n'aurait sinon aucune
       hauteur propre et s'effondrerait à zéro. */
    aspect-ratio: 660 / 1434;
    background: var(--navy-mid);
}
.diapo-cadre img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
    opacity: 0; transition: opacity .5s ease;
}
.diapo-cadre img.visible { opacity: 1; }
.diapo-legende {
    font-size: 12.5px; color: var(--gray); text-align: center;
    margin-top: 16px; line-height: 1.5; min-height: 38px;
}
.diapo-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 6px; }
.diapo-fleche {
    width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
    color: var(--white); cursor: pointer; font-size: 15px;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s, border-color .2s, color .2s;
}
.diapo-fleche:hover { background: var(--gold-pale); border-color: rgba(212, 175, 55, 0.4); color: var(--gold); }
.diapo-points { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.diapo-points button {
    width: 6px; height: 6px; border-radius: 50%; border: none; padding: 0;
    background: rgba(255, 255, 255, 0.2); cursor: pointer; transition: all .3s;
}
.diapo-points button.active { background: var(--gold); width: 18px; border-radius: 3px; }

@media (max-width: 980px) {
    .pro-split { grid-template-columns: 1fr; gap: 34px; }
    .pro-cards { order: 2; }
    /* ⚠️ `width` explicite + `justify-self`, JAMAIS `margin: 0 auto`.
       Des marges automatiques sur un élément de grille le font passer en
       largeur AJUSTÉE AU CONTENU (fit-content) au lieu de remplir sa colonne.
       Or le contenu d'ici change à chaque vue : la légende est un paragraphe
       dont le texte varie d'une capture à l'autre. La colonne changeait donc
       de largeur à chaque diapositive, et le cadre — dont la hauteur vient de
       son `aspect-ratio` — sautait avec elle. Les deux diaporamas de la page
       n'avaient pas la même taille pour la même raison : ils n'ont pas les
       mêmes légendes. */
    .pro-visuel { order: 1; position: static; width: 260px; max-width: 100%; justify-self: center; }
}
@media (max-width: 640px) {
    .pro-cards { grid-template-columns: 1fr; }
}

/* Barre d'ancres des chapitres */
.chapter-nav {
    display: flex; gap: 10px; flex-wrap: wrap;
    justify-content: center; padding: 0 var(--gutter) 10px;
    max-width: var(--page); margin: 0 auto 20px;
}
.chapter-nav a {
    font-size: 13px; color: var(--gray); text-decoration: none;
    border: 1px solid var(--hairline-2); border-radius: 50px; padding: 8px 16px;
    transition: all .2s;
}
.chapter-nav a:hover { color: var(--gold); border-color: rgba(212, 175, 55, 0.4); }

/* --------------------------------------------------------------------------
   16. Formulaire de contact
   -------------------------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 56px; align-items: start; padding: 40px 0 100px; }
.contact-aside h2 { font-family: var(--serif); font-size: 30px; font-weight: 600; margin-bottom: 16px; line-height: 1.2; }
.contact-aside p { font-size: 15px; color: var(--gray); line-height: 1.8; margin-bottom: 26px; }
.contact-facts { list-style: none; }
.contact-facts li {
    font-size: 14.5px; color: var(--text); padding: 12px 0;
    border-bottom: 1px solid var(--hairline); display: flex; gap: 12px; align-items: center;
}
.contact-facts li:last-child { border-bottom: none; }

.contact-form {
    background: var(--navy-mid); border: 1px solid var(--hairline);
    border-radius: 18px; padding: 34px 32px;
}
.field { margin-bottom: 20px; }
.field label { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; color: var(--gray); margin-bottom: 8px; }
.field input, .field select, .field textarea {
    width: 100%; background: rgba(10, 25, 47, 0.7);
    border: 1px solid var(--hairline-2); border-radius: 9px;
    padding: 13px 15px; color: var(--white);
    font-family: var(--sans); font-size: 15px; transition: border-color .2s;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: rgba(212, 175, 55, 0.55); outline: none; }
.field textarea { resize: vertical; min-height: 150px; line-height: 1.6; }
.field select option { background: var(--navy-mid); color: var(--white); }
.field-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-consent { font-size: 12.5px; color: var(--gray); line-height: 1.7; margin: 4px 0 22px; }
.form-consent a { color: var(--gold); }
.contact-form button { width: 100%; border: none; }

.audience-chips { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 34px; }
.audience-chips span {
    font-size: 13px; color: var(--text); border: 1px solid var(--hairline-2);
    border-radius: 50px; padding: 8px 16px;
}

/* --------------------------------------------------------------------------
   17. Bandeau cookies
   -------------------------------------------------------------------------- */
.cookie-banner {
    position: fixed; left: 20px; right: 20px; bottom: 20px; z-index: 2000;
    background: var(--navy-mid); border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 14px; padding: 20px 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
    display: none; max-width: 640px; margin: 0 auto;
}
.cookie-banner.visible { display: block; }
.cookie-banner p { font-size: 13.5px; color: var(--text); line-height: 1.6; margin-bottom: 16px; }
.cookie-banner a { color: var(--gold); }
.cookie-banner-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.cookie-btn {
    padding: 10px 20px; border-radius: 8px; font-size: 13px; font-weight: 600;
    font-family: var(--sans); cursor: pointer;
    border: 1px solid var(--hairline-2); background: transparent; color: var(--white);
}
.cookie-btn-accept { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.cookie-btn-accept:hover { background: var(--gold-light); }
.cookie-btn-decline:hover { border-color: rgba(255, 255, 255, 0.3); }

/* --------------------------------------------------------------------------
   18. Page « merci » et page 404
   -------------------------------------------------------------------------- */
.standalone {
    min-height: 100vh; display: flex; flex-direction: column;
    align-items: center; justify-content: center; text-align: center; padding: 140px 24px 80px;
}
.standalone .mark { font-size: 40px; color: var(--gold); margin-bottom: 24px; }
.standalone h1 { font-family: var(--serif); font-size: clamp(34px, 5vw, 54px); font-weight: 400; margin-bottom: 18px; }
.standalone p { font-size: 16px; color: var(--gray); max-width: 480px; line-height: 1.8; margin-bottom: 34px; }

/* --------------------------------------------------------------------------
   19. Adaptations d'écran
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
    :root { --gutter: 28px; }
    .loge-grid { grid-template-columns: 1fr; gap: 44px; }
    .feat-block { grid-template-columns: 1fr; }
    .feat-block.reverse { direction: ltr; }
    .feat-text { padding: 52px 34px; }
    .feat-visual { padding: 50px 28px; }
    .pills-grid { grid-template-columns: repeat(2, 1fr); }
    .stats-grid { grid-template-columns: repeat(3, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
    .contact-grid { grid-template-columns: 1fr; gap: 40px; }
    .doc-wrap { grid-template-columns: 1fr; gap: 34px; padding-top: 120px; }
    .toc { position: static; }
    .toc ul { display: flex; flex-wrap: wrap; gap: 8px; }
    .toc li { margin: 0; }
    .toc a { border-left: none; border: 1px solid var(--hairline-2); border-radius: 50px; padding: 6px 14px; }
    .toc a:hover, .toc a.active { border-color: var(--gold); }
}

/* Le point de bascule de la navigation : c'est ici que le menu déroulant
   remplace les liens en ligne. L'ancienne feuille les MASQUAIT sans rien
   mettre à la place — sous 1100 px, le site n'avait plus aucun menu, et les
   pages Fonctionnalités, Professionnels et Contact devenaient inatteignables
   depuis un téléphone autrement que par le pied de page. */
@media (max-width: 1000px) {
    .nav-burger { display: flex; }
    .nav-links {
        position: fixed;
        top: 72px; left: 0; right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        /* Fond OPAQUE, pas translucide : à 0,985 d'alpha le titre du hero
           restait lisible derrière les entrées du menu, et deux textes
           superposés ne se lisent ni l'un ni l'autre. */
        background: var(--navy);
        border-bottom: 1px solid var(--gold-line);
        padding: 10px 28px 26px;
        max-height: calc(100vh - 72px);
        overflow-y: auto;
        transform: translateY(-12px);
        opacity: 0;
        visibility: hidden;
        transition: opacity .22s, transform .22s, visibility .22s;
    }
    .nav-links.open { transform: translateY(0); opacity: 1; visibility: visible; }
    .nav-links > a {
        padding: 15px 0;
        font-size: 16px;
        border-bottom: 1px solid var(--hairline);
        color: var(--text);
    }
    .nav-cta { text-align: center; margin-top: 18px; padding: 14px 20px; border-bottom: none !important; }
    .nav-mobile-extra { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding-top: 18px; }
}

@media (max-width: 640px) {
    :root { --gutter: 20px; }
    .hero { padding: 100px 20px 60px; }
    .hero-phone.main { width: 178px; }
    .hero-phone.side { width: 150px; margin-top: 34px; }
    .hero-phones { gap: 10px; margin-top: 48px; }
    .hero-sub { font-size: 16px; }
    .feat-text { padding: 44px 22px; }
    .feat-visual { padding: 40px 18px; }
    .mock-single { width: 220px; }
    .mock-duo { transform: scale(.8); transform-origin: center; }
    .mock-trio { transform: scale(.74); transform-origin: center; }
    .pills-grid, .chapter-grid { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .stats-note { text-align: left; }
    .footer-grid { grid-template-columns: 1fr; gap: 34px; }
    footer { padding: 56px 20px 30px; }
    .footer-bottom { flex-direction: column; text-align: center; }
    .carousel-slide { width: 170px; }
    .store-badges img { height: 46px; }
    .cta-section { padding: 96px 0; }
    .loge-section { padding: 80px 0; }
    .loge-price { padding: 28px 24px; }
    .contact-form { padding: 26px 22px; }
    .cookie-banner { left: 12px; right: 12px; bottom: 12px; padding: 18px; }
    .cookie-banner-actions { justify-content: stretch; }
    .cookie-btn { flex: 1; }
    .doc-section h2 { font-size: 23px; }
}

/* Les deux téléphones latéraux du hero sortent sous 420 px : trois vignettes
   de 110 px n'informent plus, elles encombrent. */
@media (max-width: 420px) {
    .hero-phone.side { display: none; }
    .hero-phone.main { width: 230px; }
}

/* --------------------------------------------------------------------------
   20. Bandeau de confiance
   --------------------------------------------------------------------------
   L'aperçu de notification dessiné en HTML vivait ici. Il a été retiré le
   11/08/2026 : la vraie capture existe (une notification « Places disponibles »
   sur un écran verrouillé), et une photographie de la chose vaut mieux qu'un
   dessin, si fidèle soit-il. Rien ne le référence plus.
   -------------------------------------------------------------------------- */
.trust { padding: 90px 0; border-top: 1px solid var(--hairline); }
.trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 46px; }
.trust-item h3 { font-family: var(--serif); font-size: 22px; font-weight: 600; margin-bottom: 12px; line-height: 1.25; }
.trust-item p { font-size: 14.5px; color: var(--gray); line-height: 1.8; }
.trust-item .num {
    font-family: var(--serif); font-size: 13px; color: var(--gold);
    letter-spacing: 3px; display: block; margin-bottom: 14px;
}
@media (max-width: 900px) { .trust-grid { grid-template-columns: 1fr; gap: 30px; } }

/* LA MARQUE DE LA LOGE — le « L » doré au violon, `logo-la-loge.png`.
   ⚠️ Ce n'est PAS le logo de l'application (`logo.png`, le « A » à l'archet).
   Le design system l'énonce comme une règle : tout ce qui représente
   l'abonnement porte la marque de La Loge, et rien d'autre. Les intervertir ne
   casse rien et ne se voit presque pas en relecture — d'où deux fichiers aux
   noms explicites plutôt qu'un seul « logo ».
   La taille est un plancher, pas un réglage : sous 40 px, le « L » sur son
   rideau de velours n'est plus qu'une pastille rouge. */
.crest-loge {
    height: 40px; width: 40px; border-radius: 50%; object-fit: cover;
    border: 1px solid rgba(212, 175, 55, 0.45);
}
.loge-crest { padding: 6px 6px 6px 20px; }

.loge-medallion {
    width: 104px; height: 104px; border-radius: 50%; object-fit: cover;
    display: block; margin: 0 auto 28px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5), 0 0 0 6px rgba(212, 175, 55, 0.08);
}

/* Un enfant de grille refuse de descendre sous la largeur de son contenu
   (`min-width: auto` par défaut) : le tableau des sous-traitants poussait donc
   la page entière à 406 px sur un écran de 390, malgré son conteneur en
   `overflow-x: auto`. Le conteneur ne peut défiler que si on l'autorise
   d'abord à être plus étroit que ce qu'il contient. */
.doc-wrap > * { min-width: 0; }

/* --------------------------------------------------------------------------
   18. Deux surfaces plein écran : la visionneuse de captures, et le choix
       du store

   Elles partagent leur fond (navy très opaque + flou) et leur bouton de
   fermeture. `hidden` suffit à les masquer — pas de classe `.ouverte` en plus :
   un attribut que le lecteur d'écran comprend déjà vaut mieux qu'une classe
   qu'il faut lui traduire.
   -------------------------------------------------------------------------- */
.visionneuse,
.stores-modale {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(6, 16, 30, 0.94);
    backdrop-filter: blur(10px);
    animation: apparait .18s ease;
}
.visionneuse[hidden],
.stores-modale[hidden] { display: none; }

@keyframes apparait { from { opacity: 0; } to { opacity: 1; } }

.visionneuse-fermer,
.stores-fermer {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    line-height: 1;
    color: var(--white);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 50%;
    cursor: pointer;
    transition: background .2s, border-color .2s;
}
.visionneuse-fermer:hover,
.stores-fermer:hover {
    background: rgba(212, 175, 55, 0.18);
    border-color: var(--gold);
}

/* ── La visionneuse ─────────────────────────────────────────────────────── */

/* Le curseur en main et le halo ne sont posés QUE par le script (voir
   `site.js` §5) : sans lui, la vignette reste une image, et rien ne promet un
   agrandissement qui n'arrivera pas. */
.carousel-slide img.agrandissable { cursor: zoom-in; }

.visionneuse-scene {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 100%;
    margin: 0;
}
.visionneuse-scene img {
    /* Le bornage est en `vh` ET en `vw` : une capture de téléphone est très
       haute, et une contrainte de hauteur seule la fait déborder en largeur
       sur un écran de portable posé en paysage. */
    max-height: 78vh;
    max-width: min(100%, 46vh);
    border-radius: 26px;
    border: 5px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 40px 90px rgba(0, 0, 0, 0.7);
}
.visionneuse-scene figcaption {
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
}
.visionneuse-scene .legende {
    font-family: var(--serif);
    font-size: 20px;
    color: var(--white);
}
.visionneuse-scene .compteur {
    font-size: 13px;
    letter-spacing: 1.5px;
    color: var(--gold);
}

.visionneuse-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    line-height: 1;
    color: var(--white);
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(212, 175, 55, 0.28);
    border-radius: 50%;
    cursor: pointer;
    transition: background .2s, border-color .2s;
}
.visionneuse-nav:hover {
    background: rgba(212, 175, 55, 0.18);
    border-color: var(--gold);
}
.visionneuse-nav.prec { left: 20px; }
.visionneuse-nav.suiv { right: 20px; }

/* ── Le choix du store ──────────────────────────────────────────────────── */
.stores-boite {
    position: relative;
    max-width: 420px;
    width: 100%;
    padding: 46px 34px 34px;
    text-align: center;
    background: var(--navy-mid);
    border: 1px solid rgba(212, 175, 55, 0.28);
    border-radius: 22px;
    box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6);
}
.stores-boite h2 {
    font-family: var(--serif);
    font-size: 27px;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 10px;
}
.stores-boite p {
    font-size: 14.5px;
    color: var(--gray);
    margin-bottom: 26px;
}
/* Empilés, pas côte à côte : les deux badges n'ont pas le même rapport de
   forme, et une rangée les rend inégaux au point qu'on croit l'un privilégié.
   Empilés, c'est la LARGEUR qu'il faut égaliser, pas la hauteur — deux blocs
   de largeurs différentes l'un sous l'autre se lisent comme un classement. */
.stores-boite .store-badges { flex-direction: column; gap: 14px; align-items: center; }
.stores-boite .store-badges img { width: 210px; height: auto; }
.stores-boite .stores-fermer { top: 12px; right: 12px; width: 38px; height: 38px; font-size: 25px; }

@media (max-width: 700px) {
    .visionneuse, .stores-modale { padding: 16px; }
    .visionneuse-scene img { max-height: 68vh; }
    .visionneuse-scene .legende { font-size: 17px; }
    /* Sous les chevrons plutôt qu'à côté : à cette largeur ils mordraient sur
       la capture. Le balayage horizontal reste le geste principal. */
    .visionneuse-nav { top: auto; bottom: 18px; transform: none; width: 46px; height: 46px; }
    .visionneuse-nav.prec { left: 22%; }
    .visionneuse-nav.suiv { right: 22%; }
}

/* --------------------------------------------------------------------------
   19. Emblèmes — les illustrations du paywall de l'app, portées ici

   Le carrousel du paywall (`la_loge_sheet.dart`) ne montre pas que des
   captures : trois de ses pages n'en ont AUCUNE, parce que l'écran qu'elles
   annoncent n'existe pas encore ou n'est pas dans l'app (les deux Wallet, les
   deux calendriers, le compte à rebours du soir). Il les dessine.

   La page La Loge du site montrait à ces trois endroits une capture prise
   ailleurs — « Mon abonnement » pour illustrer l'écran verrouillé du soir du
   concert, un billet ordinaire pour illustrer Wallet. Ce n'est pas un défaut
   de goût : c'est une promesse illustrée par autre chose qu'elle-même, et le
   visiteur qui reconnaît l'écran comprend qu'on lui montre du remplissage.

   Un emblème occupe la même place qu'une maquette de téléphone et porte les
   vraies marques (fournies par Apple et Google, jamais redessinées — même
   règle que `lib/design/marques_tierces.dart` côté app).
   -------------------------------------------------------------------------- */
.emblem {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 340px;
    padding: 38px 30px;
    text-align: center;
    background: linear-gradient(160deg, rgba(212, 175, 55, 0.09), rgba(17, 34, 64, 0.9));
    border: 1px solid rgba(212, 175, 55, 0.26);
    border-radius: 26px;
    box-shadow: 0 36px 72px rgba(0, 0, 0, 0.5);
}
.emblem-label {
    font-size: 10.5px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--gold);
    margin-bottom: 22px;
}
/* Les marques tierces sont posées à HAUTEUR imposée et largeur automatique :
   c'est la seule façon de respecter deux chartes différentes sans en déformer
   une (`height: auto` global ci-dessus ferait sinon appliquer l'attribut
   `width`). */
.emblem-marques { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }
.emblem-marques img { height: 64px; width: auto; display: block; }
/* Les deux badges Wallet sont EMPILÉS : c'est la largeur qu'il faut égaliser,
   pas la hauteur — deux blocs de largeurs différentes l'un sous l'autre se
   lisent comme un classement. Même raison que dans la boîte des stores. */
.emblem-marques.badges { flex-direction: column; gap: 12px; }
.emblem-marques.badges img { height: auto; width: 188px; }
.emblem-note {
    margin-top: 22px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--gray);
}

/* Le compte à rebours du soir : la seule des trois qui ne se raconte pas avec
   un logo. Reprend la composition de la Live Activity — heure restante en
   grand, rang et place au-dessous. */
.emblem-compte { font-family: var(--sans); }
.emblem-compte .duree {
    font-size: 46px;
    font-weight: 700;
    letter-spacing: -1px;
    color: var(--gold);
    line-height: 1;
}
.emblem-compte .quoi {
    margin-top: 8px;
    font-family: var(--serif);
    font-size: 18px;
    color: var(--white);
}
.emblem-places {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}
.emblem-places span {
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--hairline-2);
    border-radius: 9px;
}

@media (max-width: 900px) {
    .emblem { margin: 0 auto; }
}

/* --------------------------------------------------------------------------
   20. La notification, agrandie

   Sur une capture de téléphone entière rendue à 250 px de large, la bande de
   notification fait une quarantaine de pixels de haut : on voit qu'il y a une
   notification, on ne lit pas ce qu'elle dit. Or c'est la promesse centrale de
   La Loge, et son texte — « 2 places viennent de se libérer pour… » — EST
   l'argument.

   La scène garde donc le téléphone du remplissage en arrière-plan (le chiffre)
   et pose devant un cadrage serré sur la notification (la promesse). Le
   recadrage se fait par `object-position`, pas par un fichier découpé : la
   capture reste la même, et un nouveau jeu d'écrans ne demande pas de
   redécouper quoi que ce soit.
   -------------------------------------------------------------------------- */
.notif-scene { position: relative; width: 480px; height: 560px; }
.notif-phone {
    position: absolute; top: 0; right: 0; width: 240px;
    border-radius: 36px; overflow: hidden;
    border: 6px solid rgba(255, 255, 255, 0.09);
    box-shadow: 0 28px 60px rgba(0, 0, 0, 0.5);
    opacity: .8; z-index: 1;
}
.notif-phone img { width: 100%; display: block; }
.notif-zoom {
    position: absolute; bottom: 10px; left: 0; z-index: 2;
    /* La largeur du cadre PLAFONNE le grossissement : la bande de notification
       occupe presque toute la largeur de la capture, donc l'agrandir au-delà
       de la largeur du cadre reviendrait à en couper le texte — ce qui est
       arrivé au premier essai. On élargit donc le cadre plutôt que de zoomer
       dedans. */
    width: 400px; aspect-ratio: 25 / 7;
    margin: 0; overflow: hidden;
    border-radius: 20px;
    border: 1px solid rgba(212, 175, 55, 0.35);
    box-shadow: 0 34px 68px rgba(0, 0, 0, 0.62);
}
/* `height: 100%` surcharge le `height: auto` global — c'est voulu et c'est le
   seul endroit du site où ça l'est : le cadrage EST le rendu, le rapport de
   forme du fichier n'a plus à être conservé puisqu'on n'en montre qu'une part.
   `object-fit: cover` garantit qu'aucun pixel n'est étiré au passage. */
.notif-zoom img {
    width: 100%; height: 100%; display: block;
    object-fit: cover;
    /* La position verticale de la bande dans la capture, mesurée. Pas de
       `transform: scale()` par-dessus : il grossissait AUSSI en largeur et
       tronquait la phrase à droite, alors que c'est elle l'argument.
       Le cadrage se règle donc par ces deux valeurs SEULES — la hauteur du
       cadre (`aspect-ratio` ci-dessus) et ce pourcentage —, et elles se
       calculent l'une avec l'autre : `object-fit: cover` place la fenêtre à
       ce pourcentage du DÉBORDEMENT vertical, qui dépend lui-même de la
       hauteur du cadre. Rogner le cadre sans corriger le pourcentage
       décentrerait la bande au lieu de la resserrer. */
    object-position: 50% 86%;
}

@media (max-width: 900px) {
    .notif-scene { width: 100%; max-width: 400px; height: 500px; margin: 0 auto; }
    .notif-zoom { width: 100%; }
}

/* --------------------------------------------------------------------------
   21. Le sceau de La Loge, à gauche de son titre

   Le médaillon était une pastille de 40 px posée dans un chip surtitré
   « L'abonnement ». Deux défauts : le « L » au violon sur son rideau de velours
   n'est plus lisible à cette taille (le CLAUDE.md de l'app pose 40 px comme un
   PLANCHER, pas comme une taille de confort), et le surtitre disait ce que le
   titre dit déjà.
   -------------------------------------------------------------------------- */
.loge-titre { display: flex; align-items: center; gap: 22px; margin-bottom: 22px; }
.loge-titre h2 { margin-bottom: 0; }
.loge-sceau {
    flex-shrink: 0;
    width: 96px; height: 96px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(212, 175, 55, 0.45);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), 0 0 0 6px rgba(212, 175, 55, 0.07);
}
@media (max-width: 700px) {
    .loge-titre { gap: 16px; }
    .loge-sceau { width: 68px; height: 68px; }
}



/* --------------------------------------------------------------------------
   24. L'adresse écrite « at »

   Sans JavaScript, c'est ce span que l'on voit : il doit se lire et se
   recopier comme une adresse. Le « at » est simplement détaché, jamais mis en
   évidence — souligner l'astuce attirerait l'œil sur la protection plutôt que
   sur l'adresse.
   -------------------------------------------------------------------------- */
.courriel { white-space: nowrap; }
.courriel .at { opacity: .75; padding: 0 1px; }
.courriel-lien { color: inherit; }

/* Le logo de l'app en tête de la boîte des stores. */
.stores-logo {
    width: 68px; height: 68px;
    border-radius: 16px;
    display: block;
    margin: 0 auto 18px;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* Le motif d'un envoi qui n'est pas parti — au-dessus du formulaire, en rouge
   TONAL et non en aplat (même règle que les dialogues de l'app : un aplat
   rouge sur fond navy ne passe pas les contrastes). */
.form-erreur {
    margin-bottom: 22px;
    padding: 16px 18px;
    font-size: 14.5px;
    line-height: 1.65;
    color: #ffd9dc;
    background: rgba(255, 89, 94, 0.12);
    border: 1px solid rgba(255, 89, 94, 0.42);
    border-radius: 12px;
}
.form-erreur a { color: var(--gold); }

/* --------------------------------------------------------------------------
   22. Le calendrier de saison — la copie EXACTE de l'aperçu du paywall

   `_CalendrierAnnuelApercu` (`la_loge_sheet.dart`) : douze mois en trois
   rangées de quatre, chacun une grille de 4 x 7 points, deux ou trois marqués
   en doré — « assez pour qu'on voie que c'est habité, pas assez pour que ça
   ressemble à un agenda de bureau ». Le cadre (doré à 7 %, liseré à 28 %) est
   celui de tous les aperçus du carrousel ; posée nue, la grille se lirait
   comme un motif de fond plutôt que comme un objet.

   Les soirées marquées sont RECOPIÉES du fichier Dart, index par index : ce
   sont ces positions-là qui donnent au dessin son irrégularité. Les tirer au
   hasard produirait un semis régulier, c'est-à-dire un motif.

   Toutes les dimensions dérivent d'`--u`, l'unité du dessin dans l'app
   (3,5 px pour un point). Le site le rend à une échelle plus grande sans
   qu'aucune proportion ne bouge — changer `--u` suffit.
   -------------------------------------------------------------------------- */
.calendrier-app {
    --u: 5.6px;             /* le point : 3,5 px dans l'app, x1,6 ici */
    --ecart: calc(var(--u) * 0.72);   /* 2,5 px dans l'app */
    --ecart-mois: calc(var(--u) * 2.3);  /* 8 px dans l'app */
    display: grid;
    grid-template-columns: repeat(4, max-content);
    gap: var(--ecart-mois);
    justify-content: center;
    padding: calc(var(--u) * 3.9);
    background: rgba(212, 175, 55, 0.07);
    border: 1px solid rgba(212, 175, 55, 0.28);
    border-radius: calc(var(--u) * 3.9);
}
.calendrier-app .mois b {
    display: block;
    font-size: calc(var(--u) * 2.43);   /* 8,5 px dans l'app */
    font-weight: 700;
    line-height: 1;
    margin-bottom: calc(var(--u) * 0.86);
    color: rgba(255, 255, 255, 0.4);
}
.calendrier-app .jours {
    display: grid;
    grid-template-columns: repeat(7, var(--u));
    gap: var(--ecart);
}
.calendrier-app i {
    width: var(--u);
    height: var(--u);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
}
/* La soirée retenue. C'est le seul or du dessin, et c'est tout l'argument :
   douze mois habités contre deux. */
.calendrier-app i.s { background: var(--gold); }

@media (max-width: 700px) {
    .calendrier-app { --u: 4.6px; }
}