/* ============================================================
   Page d'écoute — Concert de Noël 2026 (lot 3)
   Cible : Safari iOS 13+, Chrome Android 8+. Aucune dépendance.
   Pas de gap sur flex (Safari < 14.1) : marges explicites.

   Refonte visuelle d'août 2026 : palette et fontes de la direction
   artistique commune (EB Garamond pour le titre, DM Sans courant,
   fontes auto-hébergées dans /fontes, licences OFL, aucun CDN).
   En thème sombre, les éléments interactifs passent au bleu clair
   #7FA3E0 (7,2 : 1 mesuré) : le bleu marine s'y noie (1,4 : 1,
   charte section 3), et l'or reste un ornement.
   ============================================================ */

@font-face {
    font-family: "EB Garamond";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("fontes/eb-garamond-600.woff2") format("woff2");
}

@font-face {
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fontes/dm-sans-400.woff2") format("woff2");
}

@font-face {
    font-family: "DM Sans";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("fontes/dm-sans-400-italique.woff2") format("woff2");
}

@font-face {
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("fontes/dm-sans-700.woff2") format("woff2");
}

:root {
    color-scheme: light dark;

    --fond: #FAF9F6;
    --carte: #ffffff;
    --trait: #E6E3DC;
    /* --trait borde les cartes de chant et sépare les sections : c'est de
       l'ornement, et 1,29 pour 1 n'y gêne personne. Le contour du champ de
       code, lui, est la seule chose qui montre où taper, et cette page
       n'existe que pour ce geste-là. Il lui faut les 3 pour 1 des éléments
       d'interface. Mesuré : 3,62 sur le blanc du champ, 3,44 sur la page. */
    --trait-champ: #7f8794;
    /* Même raisonnement pour les commandes qui n'ont qu'un contour : le
       pupitre non sélectionné et le lien de partition. Leur remplissage
       ne se détache pas de ce qu'il y a derrière, le contour est tout ce
       qui les dessine. Mesuré : 3,62 sur leur remplissage, 3,44 sur la
       page. */
    --trait-commande: #7f8794;
    --encre: #1A2233;                      /* 15,1 : 1 sur le papier */
    --encre-2: #5A6478;                    /*  5,7 : 1 */
    --accent: #042F6E;                     /* bleu marine du logo, CHARTE.md § 3 */
    --accent-fonce: #021D45;               /* bleu nuit, l'appui */
    --accent-texte: #ffffff;
    --accent-voile: rgba(4, 47, 110, 0.08);
    --or: #BC8D2A;                         /* LE filet sous le titre */
    --serif: "EB Garamond", Georgia, "Times New Roman", serif;

    /* Le halo n'est plus un voile mais un double anneau, et il contient
       l'ombre entière, pas une couleur. Un voile de la couleur d'accent
       ne peut pas être vu des deux côtés à la fois : plus il devient
       opaque, mieux il se détache de la page et moins il se détache du
       bouton. Mesuré sur l'ancien voile : 1,75 pour 1 contre la page. Le
       double anneau — un liseré de la couleur de la page, puis l'accent —
       donne 12,2 pour 1 des deux côtés en thème clair et 7,2 en sombre.
       Reste un box-shadow, pas un outline : sur Safari 13 et Chrome
       Android 8, l'outline ignore encore le rayon des angles. */
    --halo: 0 0 0 2px var(--fond), 0 0 0 5px var(--accent);
    --erreur: #A8322A;
    --erreur-voile: rgba(168, 50, 42, 0.08);

    --ease-sortie: cubic-bezier(0.23, 1, 0.32, 1);
}

@media (prefers-color-scheme: dark) {
    :root {
        --fond: #10151F;
        --carte: #1A2130;
        --trait: #2A3243;
        --trait-champ: #78829B;    /* 4,2 sur la carte, 4,8 sur la page */
        --trait-commande: #78829B; /* idem pour les commandes à contour */
        --encre: #E9EAE6;          /* 15,1 : 1 */
        --encre-2: #A6AFC2;        /*  8,3 : 1 */
        /* Le bleu marine ne peut pas servir d'accent ici : sur ce fond il
           donne 1,4 pour 1, il disparaît (charte, § 3 et § 6). Les
           éléments interactifs passent au bleu clair de la direction
           artistique, 7,2 : 1 mesuré ; l'or éclairci reste l'ornement. */
        --accent: #7FA3E0;
        --accent-fonce: #6E94D6;
        --accent-texte: #10151F;   /* 7,2 : 1 sur le bleu clair */
        --accent-voile: rgba(127, 163, 224, 0.14);
        --or: #CC9E36;             /* 7,4 : 1 sur le fond */
        --halo: 0 0 0 2px var(--fond), 0 0 0 5px var(--accent);
        --erreur: #E8938C;         /* 7,8 : 1 */
        --erreur-voile: rgba(232, 147, 140, 0.1);
    }
}

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

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

body {
    font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    font-size: 16px;
    line-height: 1.55;
    background: var(--fond);
    color: var(--encre);
    min-height: 100vh;
}

/* ---------- Gabarit ---------- */

.page {
    max-width: 40rem;
    margin: 0 auto;
    padding: calc(1.5rem + env(safe-area-inset-top)) 1.25rem calc(3rem + env(safe-area-inset-bottom));
}

/* ---------- Typographie d'en-tête ---------- */

.avant-titre {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--accent);
}

h1 {
    font-family: var(--serif);
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: 0.005em;
    margin-top: 0.25rem;
}

/* LE filet d'or de la maison : un trait de 2 px sous le titre de la page,
   une seule fois par page, jamais ailleurs. */
h1::after {
    content: "";
    display: block;
    width: 3rem;
    height: 2px;
    margin-top: 0.55rem;
    background: var(--or);
}

/* Sur l'écran d'entrée, le titre est centré : son filet aussi. */
.entete-entree h1::after {
    margin-left: auto;
    margin-right: auto;
}

.sous-entete {
    margin-top: 0.375rem;
    font-size: 0.9375rem;
    color: var(--encre-2);
}

.entete {
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--trait);
}

/* ---------- Écran d'entrée ---------- */

.page-entree {
    padding-top: calc(14vh + env(safe-area-inset-top));
}

.entete-entree {
    text-align: center;
    margin-bottom: 2.5rem;
}

.formulaire-code {
    max-width: 22rem;
    margin: 0 auto;
}

.etiquette {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.champ-code {
    display: block;
    width: 100%;
    min-height: 3.5rem;
    padding: 0.625rem 1rem;
    font-family: inherit;
    font-size: 1.5rem;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: var(--encre);
    background: var(--carte);
    border: 1.5px solid var(--trait-champ);
    border-radius: 8px;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.champ-code:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--halo);
}

.champ-erreur {
    border-color: var(--erreur);
}

.message-erreur {
    margin-top: 0.625rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: var(--erreur);
    background: var(--erreur-voile);
}

.aide {
    margin-top: 1rem;
    font-size: 0.8125rem;
    line-height: 1.55;
    text-align: center;
    color: var(--encre-2);
}

/* ---------- Boutons et éléments pressables ---------- */

.bouton {
    display: block;
    width: 100%;
    min-height: 3.25rem;
    margin-top: 1rem;
    padding: 0.75rem 1.25rem;
    font-family: inherit;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--accent-texte);
    background: var(--accent);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 160ms var(--ease-sortie), background-color 150ms ease;
}

.bouton:active {
    transform: scale(0.97);
    background: var(--accent-fonce);
}

.bouton:focus {
    outline: none;
    box-shadow: var(--halo);
}

.bouton:focus:not(:focus-visible) {
    box-shadow: none;
}

.bouton:focus-visible {
    box-shadow: var(--halo);
}

@media (hover: hover) and (pointer: fine) {
    .bouton:hover {
        background: var(--accent-fonce);
    }
}

/* ---------- Sélecteur de pupitre (encadrement) ---------- */

.selecteur {
    margin-top: 1.25rem;
    margin-bottom: -0.5rem;
}

.pastille {
    display: inline-block;
    min-height: 2.5rem;
    margin: 0 0.5rem 0.5rem 0;
    padding: 0.4375rem 1rem;
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--encre);
    background: var(--carte);
    border: 1.5px solid var(--trait-commande);
    border-radius: 8px;
    -webkit-tap-highlight-color: transparent;
    transition: transform 160ms var(--ease-sortie), background-color 150ms ease, border-color 150ms ease;
}

.pastille:active {
    transform: scale(0.96);
}

.pastille:focus {
    outline: none;
    box-shadow: var(--halo);
}

.pastille:focus:not(:focus-visible) {
    box-shadow: none;
}

.pastille:focus-visible {
    box-shadow: var(--halo);
}

.pastille-active {
    color: var(--accent-texte);
    background: var(--accent);
    border-color: var(--accent);
}

/* ---------- Blocs et chants ---------- */

.bloc {
    margin-top: 2.25rem;
}

.bloc h2 {
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--encre-2);
    margin-bottom: 0.875rem;
}

.chant {
    padding: 1rem 1.125rem 1.125rem;
    background: var(--carte);
    border: 1px solid var(--trait);
}

.chant + .chant {
    margin-top: 0.75rem;
}

.chant-entete {
    display: flex;
    align-items: flex-start;
}

.numero {
    flex: none;
    display: inline-block;
    min-width: 2.25rem;
    margin-right: 0.75rem;
    padding: 0.3125rem 0.375rem;
    font-size: 0.875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
    color: var(--accent);
    background: var(--accent-voile);
    border-radius: 4px;
}

.chant-titres {
    min-width: 0;
}

.titre {
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.35;
}

.sous {
    font-size: 0.8125rem;
    color: var(--encre-2);
    font-variant-numeric: tabular-nums;
}

audio {
    display: block;
    width: 100%;
    margin-top: 0.875rem;
}

.poids {
    margin-top: 0.375rem;
    font-size: 0.75rem;
    color: var(--encre-2);
}

.muet {
    margin-top: 0.75rem;
    font-size: 0.875rem;
    font-style: italic;
    color: var(--encre-2);
}

.lien-pdf {
    display: inline-block;
    min-height: 2.75rem;
    margin-top: 0.75rem;
    padding: 0.5625rem 1rem;
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--accent);
    background: transparent;
    border: 1.5px solid var(--trait-commande);
    border-radius: 8px;
    -webkit-tap-highlight-color: transparent;
    transition: transform 160ms var(--ease-sortie), border-color 150ms ease, background-color 150ms ease;
}

.lien-pdf:active {
    transform: scale(0.97);
    background: var(--accent-voile);
}

.lien-pdf:focus {
    outline: none;
    box-shadow: var(--halo);
}

.lien-pdf:focus:not(:focus-visible) {
    box-shadow: none;
}

.lien-pdf:focus-visible {
    box-shadow: var(--halo);
}

@media (hover: hover) and (pointer: fine) {
    .lien-pdf:hover {
        border-color: var(--accent);
    }
}

/* ---------- Liens discrets ---------- */

.lien-sortie {
    display: inline-block;
    padding: 0.375rem 0.25rem; /* zone de touche élargie, rendu discret */
    margin: -0.375rem -0.25rem;
    color: var(--encre-2);
    text-decoration: underline;
    text-underline-offset: 2px;
    -webkit-tap-highlight-color: transparent;
}

.lien-sortie:focus {
    outline: none;
    border-radius: 0.375rem;
    box-shadow: var(--halo);
}

.lien-sortie:focus:not(:focus-visible) {
    box-shadow: none;
}

.lien-sortie:focus-visible {
    box-shadow: var(--halo);
}

/* ---------- États vides et pied de page ---------- */

.vide {
    margin-top: 3.5rem;
    text-align: center;
    color: var(--encre);
}

.vide .sous {
    margin-top: 0.375rem;
}

.pied {
    margin-top: 3rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--trait);
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--encre-2);
}

/* ---------- Mouvement réduit ---------- */

@media (prefers-reduced-motion: reduce) {
    .bouton,
    .pastille,
    .lien-pdf {
        transition: background-color 150ms ease, border-color 150ms ease;
    }

    .bouton:active,
    .pastille:active,
    .lien-pdf:active {
        transform: none;
    }
}

/* ---------- Page d'accueil du domaine : les trois portes ---------- */

.portes {
    margin-top: 1.75rem;
}

.porte {
    display: block;
    margin-bottom: 0.75rem;
    padding: 1.125rem 1.25rem;
    background: var(--carte);
    border: 1px solid var(--trait);
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: transform 180ms var(--ease-sortie), border-color 180ms ease;
}

.porte:last-child {
    margin-bottom: 0;
}

@media (hover: hover) {
    .porte:hover {
        border-color: var(--accent);
    }
}

.porte:active {
    transform: scale(0.985);
}

.porte:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.porte b {
    display: block;
    margin-bottom: 0.1875rem;
    font-size: 1.0625rem;
    font-weight: 600;
}

.porte span {
    display: block;
    font-size: 0.9375rem;
    line-height: 1.45;
    color: var(--encre-2);
}

@media (prefers-reduced-motion: reduce) {
    .porte:active {
        transform: none;
    }
}

/* ---------- Identité de la chorale ----------
   Charte du logo, sections 4 et 7 :
   - logo complet jamais en dessous de 300 px de large, sinon la ligne
     « CATHÉDRALE SAINTE-MARIE DE CONAKRY » se referme en trame grise ;
   - médaillon seul jamais en dessous de 64 px ;
   - zone de respiration égale au dixième de la hauteur, d'où les
     32 px sous le logo de la vitrine et les 14 px autour du médaillon.
   Aucune ombre, aucun contour, aucune rotation : la charte les interdit. */

.logo-vitrine {
    display: block;
    width: 100%;
    max-width: 300px;
    height: auto;
    margin: 0 auto 2rem;
}

/* Le logo mange de la hauteur : on rend au bas de l'écran ce qu'il prend
   en haut, pour que la première porte, celle du choriste, reste visible
   sans faire défiler. */
.page-vitrine {
    padding-top: calc(6vh + env(safe-area-inset-top));
}

.medaillon-marque {
    display: block;
    flex: none;
    width: 64px;
    height: 64px;
}

.medaillon-centre {
    margin: 0 auto 1rem;
}

/* Le médaillon à gauche du titre : sur un téléphone, le haut de la liste
   est la place la plus chère de la page. */
.entete-marquee {
    display: flex;
    align-items: center;
}

.entete-marquee .medaillon-marque {
    margin-right: 0.875rem;
}

.entete-textes {
    min-width: 0;
}

/* En thème sombre, le médaillon garde sa pastille blanche. Vérifié au
   moment du passage au bleu marine, puisque la pastille avait été posée
   du temps du bordeaux : elle reste nécessaire, et pour une raison qui
   n'a rien à voir avec le bordeaux. Le médaillon est majoritairement
   bleu marine ; sur le fond #151312 ce bleu donne 1,44 pour 1, il
   disparaît. Sur la pastille il donne 12,8. Le thème clair, lui, n'en a
   pas besoin : 12,2 pour 1 directement sur #faf9f7, et il n'y en a pas.
   La charte prévoit la pastille pour les fonds où le bleu se noie ; la
   version claire du logo redevient alors la bonne version, puisqu'elle
   se retrouve bien posée sur du blanc. */
@media (prefers-color-scheme: dark) {
    .medaillon-marque {
        box-sizing: content-box;
        padding: 6px;
        background: #ffffff;
        border-radius: 50%;
    }
}