/* ==========================================================================
   Le Poème le plus Long — maquette « affiche jaune » (Adobe Express,
   Dick Annegarn, juillet 2026) : feuille jaune #ffc904 sur fond noir,
   titre en capitales multicolores, poème noir en italique.

   Polices (Google Fonts, libres) :
   - Poème        : Cormorant Garamond 16 pt (italique)
   - Titres       : Faustina 16–18 pt
   - Indications  : Source Sans 3 12–14 pt
   ========================================================================== */

:root {
    --jaune: #ffc904;      /* fond de la feuille */
    --noir: #111111;       /* fond de la page, encre */
    --encre: #000000;
    --bleu: #4497d5;
    --rouge: #df642b;
    --orange: #f15b04;
    --vert: #31734d;
    /* Variantes assombries pour le texte fonctionnel sur fond jaune #ffc904 —
       les couleurs vives ci-dessus servent aux lettres du titre et aux bordures
       décoratives, jamais à du texte à lire (contraste WCAG < 3:1 sur jaune). */
    --rouge-texte: #8a2f0f;   /* ~5.3:1 sur --jaune */
    --vert-texte: #1f4a31;    /* ~7.6:1 sur --jaune */
    --poeme: "Cormorant Garamond", Georgia, serif;
    --titres: "Faustina", Georgia, serif;
    --indications: "Source Sans 3", "Source Sans Pro", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

.lien-evitement {
    position: fixed;
    left: 1rem;
    top: -4rem;
    z-index: 20;
    padding: 0.5rem 0.8rem;
    background: #fff;
    color: #000;
    font-family: var(--indications);
}
.lien-evitement:focus { top: 1rem; }

body {
    margin: 0;
    background: var(--noir);
    color: var(--encre);
    font-family: var(--poeme);
    font-size: 16pt;
    line-height: 1.55;
}

/* La feuille jaune, posée sur le fond noir comme dans la maquette. */
.feuille {
    max-width: 52rem;
    margin: 2.5rem auto;
    background: var(--jaune);
    padding: 3rem clamp(1.2rem, 6vw, 4.5rem) 3.5rem;
}
@media (max-width: 56rem) {
    .feuille { margin: 0; }
}

h1, h2, h3 {
    font-family: var(--titres);
    font-weight: 500;
    color: var(--encre);
}

/* Texte noir souligné plutôt qu'une couleur vive : les couleurs de la palette
   sont trop claires sur le jaune pour du texte lisible (contraste WCAG). */
a {
    color: var(--encre);
    text-decoration-color: var(--bleu);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.12em;
}
a:hover { text-decoration-color: var(--orange); }

mark {
    background: transparent;
    color: inherit;
    border-bottom: 2px solid var(--encre);
    padding: 0 0.05em;
}

/* --------------------------------------------------------------------------
   En-tête : titre multicolore
   -------------------------------------------------------------------------- */

.hero { text-align: center; padding: 1rem 0 2rem; }
.hero-mini { padding: 0.5rem 0 1rem; }

.hero-sur {
    margin: 0 0 1.6rem;
    font-family: var(--indications);
    font-size: 12pt;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.titre {
    margin: 0;
    font-size: 18pt;
    font-weight: 600;
    letter-spacing: 0.025em;
    text-transform: uppercase;
    line-height: 1.4;
}
/* Couleurs lettre à lettre, comme sur l'affiche. */
.titre .c-bleu { color: var(--bleu); }
.titre .c-rouge { color: var(--rouge); }
.titre .c-orange { color: var(--orange); }
.titre .c-vert { color: var(--vert); }
.titre .c-noir { color: var(--encre); }

.hero-sous {
    margin: 0.65rem auto 1.8rem;
    max-width: 30em;
    font-family: var(--indications);
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
}

/* --------------------------------------------------------------------------
   Boutons & messages — en Source Sans (indications de fonctionnement)
   -------------------------------------------------------------------------- */

.bouton {
    display: inline-block;
    border: 2px solid var(--encre);
    border-radius: 0;
    padding: 0.55em 1.6em;
    font-family: var(--indications);
    font-size: 13pt;
    letter-spacing: 0.04em;
    background: var(--encre);
    color: var(--jaune);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}
.bouton:hover { background: transparent; color: var(--encre); }
.bouton-orange { background: var(--encre); }
.bouton-bleu { background: transparent; color: var(--encre); }
.bouton-bleu:hover { background: var(--encre); color: var(--jaune); }
.bouton-vert { background: var(--vert); border-color: var(--vert); color: #fff; }
.bouton-vert:hover { background: transparent; color: var(--vert); }
.bouton:disabled, .bouton[disabled] {
    background: #9a9a9a;
    border-color: #9a9a9a;
    color: #e5e5e5;
    cursor: not-allowed;
}
.bouton:disabled:hover, .bouton[disabled]:hover {
    background: #9a9a9a;
    color: #e5e5e5;
}
.bouton-jaune { background: transparent; color: var(--encre); }
.bouton-jaune:hover { background: var(--encre); color: var(--jaune); }
.bouton-rouge { background: var(--rouge); border-color: var(--rouge); color: #fff; }
.bouton-rouge:hover { background: transparent; color: var(--rouge); }

.message {
    font-family: var(--indications);
    font-size: 13pt;
    border: 2px solid var(--encre);
    padding: 0.8rem 1.1rem;
    margin: 1.2rem 0;
}
.message-vert { border-color: var(--vert); color: var(--vert-texte); }
.message-rouge { border-color: var(--rouge); color: var(--rouge-texte); }
.message ul { margin: 0.4rem 0 0; padding-left: 1.2rem; }

/* --------------------------------------------------------------------------
   Règles du jeu
   -------------------------------------------------------------------------- */

.regles { padding: 1.5rem 0 0.5rem; text-align: center; }
.regles h2 {
    font-family: var(--indications);
    font-size: 10.5pt;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 0.55rem;
    opacity: 0.78;
}
.regles-intro {
    max-width: 36em;
    margin: 0 auto;
    font-family: var(--indications);
    font-size: calc(13pt - 2px);
}

.cartes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.4rem;
    margin: 1.8rem 0 1rem;
    text-align: left;
}
.carte { border-top: 4px solid var(--encre); padding-top: 0.7rem; }
.carte h3 {
    margin: 0 0 0.4rem;
    font-family: var(--indications);
    font-size: calc(16pt - 3px);
    font-weight: 500;
}
.carte p {
    margin: 0;
    font-family: var(--indications);
    font-size: calc(12pt - 3px);
    line-height: 1.5;
}
.carte-bleu { border-top-color: var(--bleu); }
.carte-orange { border-top-color: var(--orange); }
.carte-jaune { border-top-color: var(--rouge); }
.carte-vert { border-top-color: var(--vert); }

/* --------------------------------------------------------------------------
   Le poème — Cormorant Garamond 16 pt, noir sur jaune, comme l'affiche
   -------------------------------------------------------------------------- */

.poeme { padding: 1.5rem 0; }
.bouton-bas { text-align: center; margin: 2rem 0 0.5rem; }
.poeme h2 {
    text-align: center;
    font-size: 17pt;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 1.6rem;
}

.strophe {
    max-width: 34em;
    margin: 0 auto 2.2rem;
}

.vers {
    margin: 0.1rem 0;
    font-style: italic;
    font-size: 16pt;
    line-height: 1.5;
}

.signature {
    margin: 0.7rem 0 0;
    text-align: right;
    font-family: var(--indications);
    font-size: 12pt;
}
.date-pub { opacity: 0.65; }

.strophe-star .badge-star { margin-bottom: 0.5rem; }
.badge-star {
    display: inline-block;
    font-family: var(--indications);
    font-size: 12pt;
    border: 2px solid var(--encre);
    padding: 0.1em 0.8em;
}

.strophe-retiree {
    border: 2px dashed var(--encre);
    padding: 1rem 1.2rem;
    text-align: center;
    font-family: var(--indications);
    font-size: 13pt;
}
.strophe-retiree p { margin: 0.2rem 0; }

/* --------------------------------------------------------------------------
   Participer — popup « Ajoutez votre nouveau texte »
   -------------------------------------------------------------------------- */

/* <dialog> natif : fond jaune façon feuillet, par-dessus un rideau sombre.
   Ouvert via showModal() (voir script.js) — pas d'affichage par défaut. */
dialog.popup-formulaire {
    position: fixed;
    max-width: 34rem;
    width: calc(100% - 2.4rem);
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    margin: auto;
    background: var(--jaune);
    color: var(--encre);
    border: none;
    padding: 2.2rem clamp(1.2rem, 5vw, 2.4rem) 1.8rem;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.55);
}
dialog.popup-formulaire::backdrop {
    background: rgba(0, 0, 0, 0.72);
}

.popup-fermer {
    position: absolute;
    top: 0.7rem;
    right: 0.9rem;
    width: 2rem;
    height: 2rem;
    border: none;
    background: transparent;
    color: var(--encre);
    font-family: var(--titres);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}
.popup-fermer:hover { color: var(--orange); }

.popup-formulaire h2 {
    text-align: center;
    font-family: var(--indications);
    font-weight: 400;
    font-size: 14pt;
    letter-spacing: 0.02em;
    margin: 0 0 1rem;
}

.amorce-intro {
    margin: 0.5rem 0 0.2rem;
    text-align: center;
    font-family: var(--indications);
    font-size: 12pt;
}
.amorce-vers {
    margin: 0.2rem 0;
    text-align: center;
    font-style: italic;
    font-size: 16pt;
}
.amorce-regle {
    text-align: center;
    margin: 0.4rem 0;
    font-family: var(--indications);
    font-size: 13pt;
}
.mot-cle { color: var(--rouge-texte); font-weight: 600; }

.pot-de-miel { position: absolute; left: -9999px; top: -9999px; }

.octain-champ { max-width: 36em; margin: 1.5rem auto; }

/* Vers précédent figé : le vers complet (pas seulement le mot), grisé et non
   modifiable, soudé au-dessus du champ de saisie comme une ligne verrouillée. */
.vers-ancre {
    margin: 0;
    padding: 0.6em 0.8em;
    border: 2px solid var(--encre);
    border-bottom: none;
    background: rgba(0, 0, 0, 0.06);
    color: rgba(0, 0, 0, 0.5);
    font-family: var(--poeme);
    font-style: italic;
    font-size: 16pt;
    line-height: 1.5;
}

/* Champ unique de 8 lignes, façon feuillet — la continuation du vers figé. */
.octain-textarea {
    display: block;
    width: 100%;
    font-family: var(--poeme);
    font-style: italic;
    font-size: 16pt;
    line-height: 1.7;
    padding: 0.6em 0.8em;
    border: 2px solid var(--encre);
    background: transparent;
    color: var(--encre);
    resize: vertical;
}
.octain-textarea-suite { border-top: none; }
.octain-textarea::placeholder { color: rgba(0, 0, 0, 0.4); }
.octain-textarea:focus {
    outline: none;
    border-color: var(--bleu);
    box-shadow: 0 0 0 2px rgba(68, 151, 213, 0.25);
}

.aide-octain {
    min-height: 1.4em;
    margin: 0.4rem 0 0;
    font-family: var(--indications);
    font-size: 12pt;
    color: rgba(0, 0, 0, 0.55);
}
.aide-octain.aide-ok { color: var(--vert-texte); font-weight: 600; }
.aide-octain.aide-ko { color: var(--rouge-texte); font-weight: 600; }

.champs-identite { max-width: 36em; margin: 1.5rem auto; display: grid; gap: 1.1rem; }
.champs-identite label {
    display: block;
    font-family: var(--indications);
    font-size: 12pt;
}
.champs-identite input {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    font-family: var(--indications);
    font-size: 13pt;
    padding: 0.4em 0.2em;
    border: none;
    border-bottom: 2px solid var(--encre);
    background: transparent;
    color: var(--encre);
}
.champs-identite input::placeholder { color: rgba(0, 0, 0, 0.4); }
.champs-identite input:focus {
    outline: none;
    border-bottom-color: var(--bleu);
    box-shadow: 0 2px 0 0 var(--bleu);
}
.respect-vie-privee {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.85em;
    font-weight: 400;
    color: var(--vert-texte);
}
.aide-email {
    display: block;
    min-height: 1.1em;
    margin-top: 0.25rem;
    font-size: 0.85em;
    font-weight: 600;
}
.aide-email-ko { color: var(--rouge-texte); }
.note-envoi {
    text-align: center;
    margin: 0.6rem 0 0;
    font-family: var(--indications);
    font-size: 0.85em;
    color: rgba(0, 0, 0, 0.6);
}
.obligatoire { color: var(--rouge-texte); }
.facultatif { opacity: 0.65; font-size: 0.9em; }

#formulaire { position: relative; text-align: center; }
#formulaire .octain-champ,
#formulaire .champs-identite { text-align: left; }

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */

.pied {
    text-align: center;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 2px solid var(--encre);
    font-family: var(--indications);
    font-size: 12pt;
}
.pied p { margin: 0.35rem 0; }
.pied-evenements { font-style: italic; }

/* --------------------------------------------------------------------------
   Page arbitre
   -------------------------------------------------------------------------- */

.form-login { max-width: 22rem; margin: 0 auto; text-align: center; }
.form-login label {
    display: block;
    font-family: var(--indications);
    font-size: 12pt;
    margin-bottom: 1rem;
}
.form-login input {
    display: block;
    width: 100%;
    margin-top: 0.3rem;
    font-family: var(--indications);
    font-size: 13pt;
    padding: 0.4em 0.2em;
    border: none;
    border-bottom: 2px solid var(--encre);
    background: transparent;
}
.form-login input:focus { outline: none; border-bottom-color: var(--bleu); }

.arbitre-barre {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}
.arbitre-barre h2 { margin: 0; }
.arbitre-aide { font-family: var(--indications); font-size: 12pt; }
.arbitre-meta {
    font-family: var(--indications);
    font-size: 12pt;
    margin: 0 0 0.5rem;
    border-top: 2px solid var(--encre);
    padding-top: 0.6rem;
}
.arbitre-actions { display: flex; gap: 0.6rem; margin-top: 0.7rem; }
.arbitre-actions .bouton { font-size: 11pt; padding: 0.35em 1em; }
.strophe-retiree-admin { opacity: 0.5; }
.etiquette-retiree {
    border: 2px solid var(--rouge);
    color: var(--rouge-texte);
    padding: 0.05em 0.6em;
}
.arbitre-section-titre {
    font-size: 16pt;
    margin: 1.6rem 0 0.4rem;
    padding-top: 1rem;
    border-top: 2px solid var(--encre);
}
.strophe-attente { border: 2px dashed var(--bleu); }
.arbitre-vers-ancre {
    margin: 0 0 0.4rem;
    font-family: var(--indications);
    font-size: 11pt;
    font-style: italic;
    color: rgba(0, 0, 0, 0.55);
}
.etiquette-attente {
    display: inline-block;
    margin-bottom: 0.5rem;
    border: 2px solid var(--bleu);
    color: var(--bleu);
    font-family: var(--indications);
    font-size: 11pt;
    padding: 0.05em 0.7em;
}

/* --------------------------------------------------------------------------
   Petits écrans
   -------------------------------------------------------------------------- */

@media (max-width: 560px) {
    .feuille { padding: 2rem 1.1rem 2.5rem; }
    .arbitre-barre { flex-direction: column; align-items: flex-start; }
}

/* Sur smartphone, le popup occupe tout l'écran (pas de carte flottante avec
   marges) : plus de place pour le champ de 8 lignes, plus facile à toucher. */
@media (max-width: 640px) {
    dialog.popup-formulaire {
        max-width: none;
        width: 100%;
        height: 100%;
        height: 100dvh; /* tient compte de la barre d'adresse mobile */
        max-height: none;
        margin: 0;
        inset: 0;
        padding: 1.3rem 1.1rem 1.6rem;
        box-shadow: none;
    }
    .popup-fermer {
        top: 0.5rem;
        right: 0.6rem;
        width: 2.4rem;
        height: 2.4rem;
        font-size: 1.7rem;
    }
    .octain-textarea { font-size: 15pt; }
}