/* ==========================================================================
   Vitrine du domaine : accueil, /installer, /engagement, pages d'erreur
   --------------------------------------------------------------------------
   Refonte visuelle d'août 2026. Direction artistique commune (palette du
   logo, EB Garamond pour les titres, DM Sans pour le courant, un seul filet
   d'or par page, sous le titre). La charte du logo prime : pastille blanche
   sous le médaillon dès que le fond n'est plus clair.

   Couleurs : uniquement celles relevées dans la charte (identite/CHARTE.md,
   section 3) et leurs dérivées mesurées. L'or #BC8D2A ne porte JAMAIS de
   texte en thème clair : 2,9 : 1 sur le papier, sous le seuil des 3 : 1.
   Il ne sert qu'au filet. En thème sombre, l'or #CC9E36 remonte à 7,4 : 1
   et peut porter les accents ; les éléments interactifs passent au bleu
   clair #7FA3E0 (7,2 : 1), le bleu marine étant illisible sur sombre
   (1,4 : 1, mesuré dans la charte).

   Contrastes mesurés (WCAG, arrondis) :
     thème clair : encre 15,1 · encre-2 5,7 · accent 12,2 · blanc sur
     accent 12,8 · seconde ligne du bouton 8,5 ;
     thème sombre : texte 15,1 · texte-2 8,3 · bleu clair 7,2 · encre sur
     bleu clair 7,2 · seconde ligne 4,9 · or 7,4.

   Fontes auto-hébergées (sous-ensemble latin, licences OFL dans /fontes) :
   jamais de CDN, la page est lue à Conakry sur des forfaits payés au
   mégaoctet. Poids à froid de l'accueil, fontes comprises : environ 95 ko.
   ========================================================================== */

@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;         /* papier : blanc cassé chaud */
    --carte: #FFFFFF;
    --trait: #E6E3DC;        /* filets de séparation, ornement */
    --encre: #1A2233;        /* 15,1 : 1 sur le papier */
    --encre-2: #5A6478;      /*  5,7 : 1 sur le papier */
    --accent: #042F6E;       /* bleu marine CSE, 12,2 : 1 sur le papier */
    --or: #BC8D2A;           /* le filet, rien d'autre en thème clair */

    --plein: #042F6E;        /* fond de la porte principale */
    --plein-encre: #FFFFFF;  /* 12,8 : 1 */
    --plein-encre-2: #C9D3E6;/*  8,5 : 1 */
    --sceau: #FFFFFF;        /* pastille sous le médaillon */

    /* Le contour d'un champ n'est pas un ornement : c'est la seule chose
       qui dit où écrire. Il lui faut les 3 : 1 des éléments d'interface.
       Mesuré : 3,6 sur le blanc du champ, 3,4 sur le papier. */
    --bord-champ: #7F8794;

    --rayon: 8px;            /* réservé aux surfaces interactives */

    --serif: "EB Garamond", Georgia, "Iowan Old Style", "Palatino Linotype",
             "Times New Roman", serif;
    --sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, sans-serif;
}

/* Le médaillon est majoritairement bleu marine : sur fond sombre il tombe
   sous 1,5 : 1 et disparaît. Le remède prévu par la charte (section 4) est
   la pastille claire : c'est --sceau. Les éléments interactifs passent au
   bleu clair, l'or éclairci porte le filet. */
@media (prefers-color-scheme: dark) {
    :root {
        --fond: #10151F;
        --carte: #1A2130;
        --trait: #2A3243;
        --encre: #E9EAE6;        /* 15,1 : 1 */
        --encre-2: #A6AFC2;      /*  8,3 : 1 */
        --accent: #7FA3E0;       /*  7,2 : 1 */
        --or: #CC9E36;           /*  7,4 : 1 */

        --plein: #7FA3E0;
        --plein-encre: #10151F;  /*  7,2 : 1 */
        --plein-encre-2: #223452;/*  4,9 : 1 */
        --sceau: #FAF9F6;

        /* Mesuré : 4,2 sur la carte, 4,8 sur le fond. */
        --bord-champ: #78829B;
    }
}

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

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

body {
    margin: 0;
    background: var(--fond);
    color: var(--encre);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.55;
}

/* Une colonne calme : 640 px au plus, quelle que soit la largeur de
   l'écran. La page ne s'étale pas, elle respire. */
.vitrine {
    max-width: 40rem;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 2.5rem;
}

/* ---------- L'annonce ---------- */

.annonce { text-align: center; }

/* Le sceau : le médaillon dans sa pastille. En thème clair la pastille se
   fond dans le papier ; en thème sombre elle devient le disque qui rend le
   médaillon lisible. Le médaillon occupe 76 % du disque : il reste 12 % de
   vide de chaque côté, davantage que la zone de respiration de la charte
   (un dixième de la hauteur du logo). */
.sceau {
    width: clamp(8.25rem, 41vw, 10.5rem);
    height: clamp(8.25rem, 41vw, 10.5rem);
    margin: 0 auto 1.15rem;
    border-radius: 50%;
    background: var(--sceau);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sceau img {
    display: block;
    width: 76%;
    height: auto;
}

h1 {
    margin: 0;
    font-family: var(--serif);
    font-weight: 600;
    color: var(--accent);
    font-size: clamp(2rem, 8.4vw, 2.65rem);
    line-height: 1.08;
    letter-spacing: 0.005em;
}

/* Le millésime sur sa propre ligne, espacé : l'affiche de concert plutôt
   que le titre de page. */
h1 .an {
    display: block;
    font-weight: 600;
    font-size: 0.82em;
    letter-spacing: 0.12em;
}

/* LE filet d'or : la signature de la maison, héritée du filet à fleur de
   lys du logo. Un trait de 2 px sous le titre de la page, et une seule
   fois par page. Nulle part ailleurs. */
.filet {
    width: 3.5rem;
    height: 2px;
    margin: 1.05rem auto;
    border: 0;
    background: var(--or);
}

.quand {
    margin: 0;
    font-family: var(--serif);
    font-weight: 600;
    font-size: 1.19rem;
    line-height: 1.45;
}

/* « à 19 h 00 » ne se coupe pas : à 320 px la phrase passe à la ligne
   entière plutôt que d'abandonner l'heure toute seule en bas. */
.quand .heure { white-space: nowrap; }

.quand .lieu {
    display: block;
    margin-top: 0.1rem;
    font-family: var(--sans);
    font-weight: 400;
    color: var(--encre-2);
    font-size: 0.8em;
}

/* ---------- Les portes ---------- */

.portes { margin-top: 2rem; }

/* La première. Aplat plein, pleine largeur : c'est la seule action que la
   plupart des choristes auront à faire, et une testeuse de soixante et un
   ans ne l'avait pas trouvée quand les portes se ressemblaient. Le seul
   bouton plein de la page. */
.maitresse {
    display: block;
    min-height: 4rem;
    padding: 1rem 1.15rem;
    border-radius: var(--rayon);
    background: var(--plein);
    color: var(--plein-encre);
    text-decoration: none;
    transition: transform 120ms ease;
}

.maitresse b {
    display: block;
    font-size: 1.1rem;
    line-height: 1.3;
}

.maitresse span {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--plein-encre-2);
}

/* Les autres sont des recours : même surface tactile, aucun aplat.
   La hiérarchie se lit sans avoir à lire. */
.recours {
    margin-top: 1.6rem;
    border-top: 1px solid var(--trait);
}

.recours a {
    display: flex;
    gap: 0.75rem;
    align-items: baseline;
    min-height: 44px;
    padding: 0.9rem 0.15rem;
    border-bottom: 1px solid var(--trait);
    color: var(--encre);
    text-decoration: none;
}

.recours .texte { flex: 1; }

.recours b {
    display: block;
    color: var(--accent);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
}

.recours span {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.87rem;
    line-height: 1.45;
    color: var(--encre-2);
}

.chevron {
    flex: none;
    color: var(--accent);
    font-size: 1.35rem;
    font-weight: 400;
    line-height: 1;
}

/* ---------- Le filet de secours ---------- */

.aide {
    margin: 1.6rem 0 0;
    padding: 0.9rem 1rem;
    background: var(--carte);
    border: 1px solid var(--trait);
    font-size: 0.9rem;
    line-height: 1.5;
}

.aide b {
    display: block;
    color: var(--accent);
    font-weight: 700;
}

/* ---------- Le pied ---------- */

.pied {
    margin: 2.25rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--trait);
    text-align: center;
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    line-height: 1.5;
    color: var(--encre-2);
}

/* ---------- Doigt et clavier ---------- */

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

.maitresse:active { transform: translateY(1px); }

.recours a:active { background: var(--trait); }

@media (hover: hover) {
    .maitresse:hover { filter: brightness(1.12); }
    .recours a:hover b { text-decoration: underline; }
}

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

/* ---------- Écran large ----------
   La colonne reste une colonne : elle descend simplement de quelques
   centimètres et gagne des marges. Le calme ne change pas de registre. */

@media (min-width: 48rem) {
    .vitrine { padding: 4rem 1.5rem 3.5rem; }

    .sceau {
        width: 11.5rem;
        height: 11.5rem;
        margin-bottom: 1.4rem;
    }
}

/* ---------- La page /installer ----------
   La marche d'entrée Android : la pédagogie d'abord, le bouton en bas.
   Même papier, mêmes encres que l'accueil ; une colonne plus étroite
   encore, parce que c'est une page qui se lit, pas un écran de choix. */

.installer {
    max-width: 34rem;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 2.5rem;
}

@media (min-width: 48rem) {
    .installer { padding-top: 3.5rem; }
}

.retour {
    margin: 0 0 1.2rem;
    font-size: 0.9rem;
}

.retour a {
    color: var(--accent);
    text-decoration: none;
}

.retour a:hover,
.retour a:focus-visible { text-decoration: underline; }

/* Plus petit que le h1 d'affiche de l'accueil : ici on lit, on n'annonce
   pas. Le filet d'or de la page se pose sous ce titre, une seule fois. */
.installer h1 {
    font-size: clamp(1.6rem, 6.5vw, 2rem);
    line-height: 1.18;
}

.installer h1::after {
    content: "";
    display: block;
    width: 3.5rem;
    height: 2px;
    margin-top: 0.85rem;
    background: var(--or);
}

.pourquoi {
    margin: 0.8rem 0 1.5rem;
    color: var(--encre-2);
    line-height: 1.55;
}

/* Le poids, avant tout le reste : l'encadré qui dit ce que le geste va
   coûter. Un cadre au filet, sans barre de couleur : le chiffre en
   Garamond suffit à le faire parler. */
.poids {
    padding: 0.95rem 1.05rem;
    background: var(--carte);
    border: 1px solid var(--trait);
}

.poids p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
}

.poids .chiffre {
    margin: 0 0 0.4rem;
    font-family: var(--serif);
    font-weight: 600;
    font-size: 1.3rem;
    line-height: 1.3;
    color: var(--accent);
}

.installer h2 {
    margin: 1.8rem 0 0.75rem;
    font-family: var(--serif);
    font-weight: 600;
    font-size: 1.35rem;
    color: var(--accent);
}

/* Les étapes numérotées : le numéro en couleur d'accent, le texte qui
   respire. */
.etapes {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: etape;
}

.etapes li {
    position: relative;
    counter-increment: etape;
    padding: 0 0 0.95rem 2.1rem;
    line-height: 1.55;
    font-size: 0.97rem;
}

.etapes li::before {
    content: counter(etape) ".";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--accent);
}

.installer code {
    font-family: ui-monospace, Consolas, "Courier New", monospace;
    font-size: 0.88em;
    background: var(--carte);
    border: 1px solid var(--trait);
    border-radius: 4px;
    padding: 0 0.25rem;
    white-space: nowrap;
}

/* Le bouton de téléchargement reprend l'habit de la porte principale
   (.maitresse) : même aplat, même autorité. Il vient après les étapes. */
.telecharger {
    margin-top: 1.6rem;
    text-align: center;
}

/* ---------- Le lien TestFlight, sur /installer-iphone ----------
   Il s'affiche EN TOUTES LETTRES et sélectionnable, parce que c'est la
   forme qui survit a tout : au copier-coller, a la capture d'ecran envoyee
   sur WhatsApp, au recopiage a la main sur un autre appareil. Le bouton
   « copier » n'est qu'un confort par-dessus.

   `word-break` parce qu'une adresse ne se coupe pas aux espaces : sans lui
   elle deborde de la colonne sur un telephone etroit. */
.lien-testflight {
    margin: 0.9rem 0 0.8rem;
    padding: 0.85rem 1rem;
    background: var(--carte);
    border: 1px solid var(--trait);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.98rem;
    line-height: 1.5;
    word-break: break-all;
    user-select: all;
}

.copier-ligne {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 1.4rem;
}

.copier {
    padding: 0.6rem 1.1rem;
    min-height: 44px;
    background: var(--accent);
    border: 0;
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.copier:hover,
.copier:focus-visible { background: var(--encre); }

.copier-etat {
    font-size: 0.92rem;
    color: var(--encre-2);
}

.installer .pied {
    margin: 2.25rem 0 0;
    text-align: center;
}

/* ---------- La page /engagement ----------
   L'appel à engagement, sous forme numérique. Même colonne étroite que
   /installer (la classe .installer est posée sur le <main>) ; ne vivent
   ici que les habits du formulaire. L'erreur se signale par le bleu
   d'accent et la graisse : aucun rouge n'existe dans la charte. */

.erreurs {
    margin: 0 0 1.2rem;
    padding: 0.9rem 1rem;
    background: var(--carte);
    border: 1px solid var(--trait);
    border-left: 3px solid var(--accent);
}

.erreurs p {
    margin: 0 0 0.35rem;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--accent);
}

.erreurs p:last-child { margin-bottom: 0; }

.formulaire-engagement .champ { margin: 0 0 1.2rem; }

.formulaire-engagement label {
    display: block;
    margin: 0 0 0.3rem;
    font-weight: 700;
    color: var(--accent);
}

.formulaire-engagement .indice {
    margin: 0 0 0.45rem;
    font-size: 0.86rem;
    line-height: 1.45;
    color: var(--encre-2);
}

.formulaire-engagement input[type="text"],
.formulaire-engagement input[type="tel"],
.formulaire-engagement select,
.formulaire-engagement textarea {
    width: 100%;
    padding: 0.7rem 0.8rem;
    font: inherit;
    color: var(--encre);
    background: var(--carte);
    border: 1px solid var(--bord-champ);
    border-radius: 6px;
}

.formulaire-engagement textarea { resize: vertical; }

.formulaire-engagement input:focus-visible,
.formulaire-engagement select:focus-visible,
.formulaire-engagement textarea:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 1px;
}

/* La case d'engagement : c'est la phrase qui engage, elle mérite son
   cadre. Interactive, donc arrondie comme les commandes. */
.case-engagement {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
    margin: 1.4rem 0;
    padding: 0.9rem 1rem;
    background: var(--carte);
    border: 1px solid var(--bord-champ);
    border-radius: var(--rayon);
    cursor: pointer;
}

.case-engagement input {
    flex: none;
    width: 1.2rem;
    height: 1.2rem;
    margin: 0.15rem 0 0;
    accent-color: var(--accent);
}

.case-engagement span {
    font-size: 0.93rem;
    line-height: 1.5;
}

/* Le bouton d'envoi porte l'habit de la porte principale (.maitresse) :
   c'est la seule action de la page. Un <button> n'a pas les défauts d'un
   <a>, on les lui retire. */
.formulaire-engagement button.maitresse {
    width: 100%;
    border: 0;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.formulaire-engagement button.maitresse:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

/* Le champ piège : hors de l'écran, jamais display:none (certains robots
   sautent ce qui est déclaré invisible). Une personne ne le voit pas, ne
   le tabule pas, ne le remplit pas. */
.piege {
    position: absolute !important;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---------- Les pages d'erreur ----------
   Même colonne que /installer. Le numéro de l'erreur est une étiquette
   discrète au-dessus du titre : la page dit d'abord quoi faire. */

.erreur-code {
    margin: 0 0 0.35rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--encre-2);
}