/* ============================================================================
   Le Book Club — tokens et composants communs (cf. consignes-design.md).
   Zéro couleur en dur hors de ce fichier : studio.css et client.css
   ne consomment que les variables définies ici.
   ============================================================================ */

/* --- Polices auto-hébergées (SIL OFL), jamais de CDN --- */
@font-face {
    font-family: 'Fraunces';
    src: url('../fonts/fraunces-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Fraunces';
    src: url('../fonts/fraunces-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Fraunces';
    src: url('../fonts/fraunces-500italic.woff2') format('woff2');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* --- Palette --- */
:root {
    /* Fonds */
    --fond-page: #EFEEE5;
    --fond-panneau: #FBFAF6;
    --fond-actif: #E8E6DA;

    /* Encre */
    --encre: #22283A;
    --encre-douce: #5C6170;

    /* Accent — UN SEUL */
    --accent: #D96A5F;
    /* #B8544A initial ne passait AA que sur --fond-panneau (4,09:1 sur --fond-page) ;
       #AB4E45 passe sur les deux fonds (4,61:1 et 5,15:1). */
    --accent-fonce: #AB4E45;
    --accent-voile: rgb(217 106 95 / 0.13); /* fond de badge dérivé de l'accent */

    /* Fonctionnel */
    --ombre-livre: 0 12px 24px rgb(34 40 58 / 0.18);
    --rayon-carte: 16px;
    --rayon-pilule: 999px;

    /* Rayon virtuel (Lot 7A) : planche d'étagère chaleureuse, dérivée de la
       palette (reste dans la famille crème, jamais du faux bois criard). */
    --planche: #E1D9C6;          /* dessus de la planche */
    --planche-avant: #CBC1A8;    /* chant avant, plus sombre */
    --planche-ombre: rgb(34 40 58 / 0.16); /* ombre portée sous la planche */
    --livre-contact: rgb(34 40 58 / 0.22); /* ombre de contact au pied du livre */

    --police-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
    --police-sans: 'Inter', -apple-system, 'Segoe UI', sans-serif;
}

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

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

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

h1, h2, h3 {
    margin: 0 0 0.35em;
    font-weight: 600;
    line-height: 1.2;
}

.titre-serif {
    font-family: var(--police-serif);
    font-weight: 600;
}

h1.titre-serif { font-size: 32px; }
h2.titre-serif { font-size: 24px; }
h3 { font-size: 18px; }

p {
    margin: 0 0 0.75em;
}

.encre-douce {
    color: var(--encre-douce);
    font-size: 14px;
}

.surtitre {
    color: var(--encre-douce);
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 0.25em;
}

.surtitre a {
    color: inherit;
}

/* --- Liens --- */
a {
    color: var(--encre);
    text-decoration: none;
    transition: color 150ms ease;
}

.lien-souligne {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.lien-souligne:hover,
.lien-souligne:focus-visible {
    color: var(--accent-fonce);
}

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

/* --- Boutons : une seule pilule sombre par écran, le reste en liens --- */
.bouton-principal {
    display: inline-block;
    background: var(--encre);
    color: var(--fond-panneau);
    font: 500 16px var(--police-sans);
    border: none;
    border-radius: var(--rayon-pilule);
    padding: 10px 24px;
    cursor: pointer;
    transition: opacity 150ms ease;
}

.bouton-principal:hover,
.bouton-principal:focus-visible {
    opacity: 0.85;
}

.bouton-contour {
    display: inline-block;
    background: transparent;
    color: var(--encre);
    font: 500 14px var(--police-sans);
    border: 1.5px solid var(--encre);
    border-radius: var(--rayon-pilule);
    padding: 6px 16px;
    cursor: pointer;
    transition: background 150ms ease;
}

.bouton-contour:hover,
.bouton-contour:focus-visible {
    background: var(--fond-actif);
}

/* --- Badges de statut : codage discret, pas de vert/rouge sémaphore --- */
.badge {
    display: inline-block;
    background: var(--fond-actif);
    color: var(--encre-douce);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
    border-radius: var(--rayon-pilule);
    padding: 3px 12px;
    white-space: nowrap;
    vertical-align: middle;
}

.badge-accent,
.statut-valide,
.piste-retenue {
    background: var(--accent-voile);
    color: var(--accent-fonce);
}

.statut-brief,
.statut-en_cours,
.piste-presentee {
    background: var(--fond-actif);
    color: var(--encre-douce);
}

.statut-archive {
    background: transparent;
    color: var(--encre-douce);
}

.piste-abandonnee {
    background: transparent;
    color: var(--encre-douce);
    text-decoration: line-through;
}

/* --- Messages éphémères --- */
.flash {
    background: var(--fond-panneau);
    border-radius: var(--rayon-carte);
    padding: 12px 20px;
    margin: 0 0 24px;
    font-size: 14px;
    font-weight: 500;
}

.flash-succes { color: var(--encre); }
.flash-erreur { color: var(--accent-fonce); }

/* --- Panneaux : séparation par variation de fond, pas de bordures --- */
.panneau {
    background: var(--fond-panneau);
    border-radius: var(--rayon-carte);
    padding: 24px 28px;
    margin-bottom: 24px;
}

.panneau-entete {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.panneau-entete h2 {
    margin-bottom: 0;
}

/* --- Formulaires : un champ par ligne, libellé au-dessus --- */
.formulaire {
    max-width: 640px;
}

.champ {
    display: block;
    margin: 0 0 20px;
    border: none;
    padding: 0;
}

.champ label,
.champ legend {
    display: block;
    font-weight: 500;
    margin-bottom: 6px;
}

.champ input[type="text"],
.champ input[type="email"],
.champ input[type="password"],
.champ input[type="number"],
.champ input[type="date"],
.champ select,
.champ textarea {
    width: 100%;
    background: var(--fond-page);
    color: var(--encre);
    font: 400 16px var(--police-sans);
    line-height: 1.5;
    border: 1px solid var(--fond-actif);
    border-radius: 10px;
    padding: 10px 14px;
    transition: border-color 150ms ease;
}

.champ input:focus,
.champ select:focus,
.champ textarea:focus {
    outline: none;
    border-color: var(--encre-douce);
}

.champ-court input {
    max-width: 160px;
}

.aide {
    display: block;
    color: var(--encre-douce);
    font-size: 14px;
    margin-top: 6px;
}

.champ-actions {
    margin-top: 28px;
}

.champ-attenue {
    opacity: 0.55;
    transition: opacity 150ms ease;
}

/* --- Listes de définitions (brief, rétrospective) --- */
.liste-definitions {
    margin: 0;
}

.liste-definitions div {
    margin-bottom: 14px;
}

.liste-definitions dt {
    font-size: 14px;
    font-weight: 600;
    color: var(--encre-douce);
    margin-bottom: 2px;
}

.liste-definitions dd {
    margin: 0;
}

/* --- Divers --- */
.etat-vide {
    text-align: center;
    padding: 48px 28px;
}

.etat-vide-texte {
    color: var(--encre-douce);
}

.signature {
    margin-top: 16px;
    font-style: italic;
}

.note-etoiles {
    color: var(--accent);
    font-size: 18px;
    letter-spacing: 2px;
}

/* Bouton neutre présenté comme un lien (déconnexion, actions discrètes) */
.bouton-lien {
    background: none;
    border: none;
    padding: 0;
    font: 400 14px var(--police-sans);
    color: var(--encre);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.bouton-lien:hover,
.bouton-lien:focus-visible {
    color: var(--accent-fonce);
}

/* Intertitre discret séparant les sections d'un panneau (mesuré vs expérience) */
.libelle-section {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--encre-douce);
    margin: 20px 0 8px;
}

/* Champ à case à cocher : libellé sur la même ligne */
.champ-case label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

.lien-discret-petit {
    font-size: 13px;
}

/* Logo Studio Primo & Primo, à gauche du libellé « Le Book Club » */
.logo-marque {
    display: inline-block;
    height: 1.5em;
    width: auto;
    vertical-align: -0.28em;
}

.logo-grand {
    height: 44px;
    vertical-align: middle;
}

/* Titre de marque (écrans de connexion) : logo + libellé alignés */
.marque-titre {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

/* Visionneuse d'image en modal (viewer.js) */
.viewer-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    background: rgb(34 40 58 / 0.82);
    cursor: zoom-out;
}

.viewer-overlay[hidden] {
    display: none;
}

.viewer-image {
    max-width: 92vw;
    max-height: 92vh;
    border-radius: 6px;
    box-shadow: var(--ombre-livre);
    cursor: default;
}

.viewer-fermer {
    position: absolute;
    top: 20px;
    right: 24px;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: var(--rayon-pilule);
    background: var(--fond-panneau);
    color: var(--encre);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    transition: opacity 150ms ease;
}

.viewer-fermer:hover,
.viewer-fermer:focus-visible {
    opacity: 0.8;
}

/* Empêche le défilement de la page derrière le calque */
body.viewer-ouvert {
    overflow: hidden;
}

/* Libellé présent pour les lecteurs d'écran, invisible à l'écran */
.libelle-discret {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* --- Structure partagée studio / client --- */
.contenu {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 48px 80px;
}

.page-nue {
    display: grid;
    place-items: center;
    min-height: 100vh;
}

.page-nue .contenu {
    width: 100%;
    max-width: 480px;
    padding: 24px;
}

.carte-connexion,
.carte-erreur {
    background: var(--fond-panneau);
    border-radius: var(--rayon-carte);
    padding: 48px 40px;
    text-align: center;
}

.carte-connexion form {
    margin-top: 28px;
    text-align: left;
}

.carte-connexion .bouton-principal {
    width: 100%;
    margin-top: 8px;
}

.note-acces {
    margin: 20px 0 0;
}

.pastille {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: var(--rayon-pilule);
    background: var(--fond-actif);
    color: var(--encre);
    font-size: 13px;
    font-weight: 600;
}

.entete-page,
.fiche-entete {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin: 8px 0 32px;
}

.fiche-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: 8px;
}

/* --- Listes en cartes-lignes --- */
.liste-cartes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.carte-ligne {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: var(--fond-panneau);
    border-radius: var(--rayon-carte);
    padding: 18px 24px;
    transition: background 150ms ease;
}

.carte-ligne:hover,
.carte-ligne:focus-visible {
    background: var(--fond-actif);
}

.carte-ligne-corps {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.carte-ligne-titre {
    font-family: var(--police-serif);
    font-weight: 600;
    font-size: 18px;
}

.carte-ligne-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.carte-ligne-archivee {
    opacity: 0.7;
}

/* --- Pistes : la couverture est un objet physique --- */
.carte-piste {
    display: flex;
    gap: 24px;
    background: var(--fond-panneau);
    border-radius: var(--rayon-carte);
    padding: 24px 28px;
    margin-bottom: 16px;
}

.piste-visuel {
    flex-shrink: 0;
    padding: 8px 4px;
}

.couverture {
    width: 120px;
    border-radius: 3px;
    box-shadow: var(--ombre-livre);
    transition: translate 150ms ease;
}

a:hover .couverture,
a.couverture:hover {
    translate: 0 -3px;
}

.couverture-vide,
.couverture-pdf {
    display: grid;
    place-items: center;
    width: 120px;
    height: 170px;
    text-align: center;
    font-size: 13px;
    color: var(--encre-douce);
    background: var(--fond-page);
    border-radius: 3px;
}

.couverture-pdf {
    box-shadow: var(--ombre-livre);
    color: var(--encre);
    font-weight: 600;
}

.piste-corps {
    flex: 1;
    min-width: 0;
}

.piste-corps h3 {
    font-family: var(--police-serif);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.raison {
    background: var(--fond-page);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
}

.raison-libelle {
    display: block;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--accent-fonce);
    margin-bottom: 2px;
}

/* --- Fil de commentaires : LE composant mémoire --- */
.fil-commentaires {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
}

.fil-commentaires li {
    position: relative;
    display: flex;
    gap: 12px;
    padding-bottom: 18px;
}

/* Filet pointillé de la timeline, interrompu au dernier message */
.fil-commentaires li::before {
    content: '';
    position: absolute;
    left: 16px;
    top: 38px;
    bottom: 0;
    border-left: 1px dashed var(--encre-douce);
    opacity: 0.4;
}

.fil-commentaires li:last-child::before {
    display: none;
}

.pastille-fil {
    width: 33px;
    height: 33px;
    font-size: 12px;
    flex-shrink: 0;
}

.commentaire-studio .pastille-fil {
    background: var(--encre);
    color: var(--fond-panneau);
}

.commentaire-client .pastille-fil {
    background: var(--accent-voile);
    color: var(--accent-fonce);
}

.commentaire-corps {
    min-width: 0;
}

.commentaire-meta {
    margin: 0 0 2px;
    font-size: 13px;
}

.commentaire-contenu {
    margin: 0;
    font-size: 14px;
}

.form-commentaire {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-top: 14px;
    max-width: 560px;
}

.form-commentaire textarea {
    width: 100%;
    background: var(--fond-page);
    color: var(--encre);
    font: 400 14px var(--police-sans);
    line-height: 1.5;
    border: 1px solid var(--fond-actif);
    border-radius: 10px;
    padding: 8px 12px;
}

.form-commentaire textarea:focus {
    outline: none;
    border-color: var(--encre-douce);
}

/* --- Responsive partagé --- */
@media (max-width: 900px) {
    .contenu {
        padding: 24px 20px 60px;
    }

    .entete-page,
    .fiche-entete {
        flex-direction: column;
        gap: 12px;
    }

    .carte-piste {
        flex-direction: column;
    }
}