/* ==========================================================================
   Chapitre Universalis — feuille de style unique, écrite à la main.
   Pas d'outil de build : ce fichier est servi tel quel.
   Priorités : lisibilité (public senior), contrastes forts, grandes cibles.
   ========================================================================== */

:root {
    /* Palette « papier et encre » : chaleureuse, contrastée, littéraire. */
    --papier:        #faf6ee;  /* fond crème */
    --papier-fonce:  #f1e9da;  /* encadrés */
    --encre:         #2b2118;  /* texte principal, brun très foncé */
    --encre-douce:   #5a4c3f;  /* texte secondaire */
    --bordeaux:      #7a2233;  /* accent : boutons, liens */
    --bordeaux-fonce:#5c1a27;  /* survol */
    --filet:         #d8cdbb;  /* traits fins */
}

* {
    box-sizing: border-box;
}

html {
    /* Base volontairement grande : le cahier impose une interface très lisible. */
    font-size: 20px;
}

body {
    margin: 0;
    background: var(--papier);
    color: var(--encre);
    font-family: system-ui, "Segoe UI", Roboto, Arial, sans-serif;
    line-height: 1.65;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.page {
    width: 100%;
    max-width: 44rem;
    margin: 0 auto;
    padding: 3rem 1.5rem 2rem;
    flex: 1;
}

/* --- En-tête ---------------------------------------------------------- */

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

.surtitre {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--encre-douce);
}

h1 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: normal;
    font-size: clamp(2.2rem, 6vw, 3.2rem);
    line-height: 1.15;
}

h2 {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: normal;
    font-size: 1.4rem;
    margin: 0 0 0.6rem;
}

/* --- Corps de page ----------------------------------------------------- */

.presentation p {
    margin: 0 0 1.1rem;
}

.contact {
    margin-top: 2.5rem;
    padding: 1.4rem 1.6rem;
    background: var(--papier-fonce);
    border: 1px solid var(--filet);
    border-radius: 10px;
}

.contact p {
    margin: 0;
}

a {
    color: var(--bordeaux);
    text-underline-offset: 3px;
}

a:hover {
    color: var(--bordeaux-fonce);
}

/* --- Bouton « Espace membres » ----------------------------------------- */

.acces {
    text-align: center;
    margin: 2.5rem 0;
}

.bouton {
    display: inline-block;
    padding: 0.9rem 2.2rem;          /* grande cible tactile (> 48 px) */
    background: var(--bordeaux);
    color: #ffffff;
    font-size: 1.1rem;
    text-decoration: none;
    border-radius: 10px;
}

.bouton:hover {
    background: var(--bordeaux-fonce);
    color: #ffffff;
}

.bouton-secondaire {
    background: transparent;
    color: var(--bordeaux);
    border: 2px solid var(--bordeaux);
}

.bouton-secondaire:hover {
    background: var(--papier-fonce);
    color: var(--bordeaux-fonce);
}

/* Contour net au clavier : indispensable pour l'accessibilité. */
a:focus-visible,
.bouton:focus-visible {
    outline: 3px solid var(--bordeaux);
    outline-offset: 3px;
}

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

.pied {
    border-top: 1px solid var(--filet);
    text-align: center;
    color: var(--encre-douce);
    font-size: 0.85rem;
    padding: 1rem 1.5rem;
}

.pied p {
    margin: 0;
}

/* --- Encadré d'avertissement -------------------------------------------- */

.avertissement {
    margin: 0 0 2rem;
    padding: 1.2rem 1.4rem;
    background: var(--papier-fonce);
    border-left: 4px solid var(--bordeaux);
    border-radius: 6px;
}

.avertissement p { margin: 0 0 0.8rem; font-size: 0.9rem; }
.avertissement p:last-child { margin: 0; }

/* --- Barre du membre connecté ------------------------------------------ */

.barre-membre {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.2rem;
    align-items: baseline;
    justify-content: space-between;
    padding: 0.7rem 1.5rem;
    border-bottom: 1px solid var(--filet);
    background: var(--papier-fonce);
    font-size: 0.85rem;
}

.barre-membre-actions {
    display: flex;
    gap: 1.2rem;
    align-items: baseline;
}

.barre-membre form { display: inline; margin: 0; }

.qualite {
    color: var(--encre-douce);
}

.entete .qualite {
    margin: 0.6rem 0 0;
    font-size: 0.95rem;
}

.lien-bouton {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--bordeaux);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

/* --- Fil d'Ariane ------------------------------------------------------- */

.fil {
    margin-bottom: 2rem;
    font-size: 0.85rem;
    color: var(--encre-douce);
    line-height: 2;
}

.fil-separateur { margin: 0 0.45rem; color: var(--filet); }

/* --- Emblèmes ----------------------------------------------------------- */

.frontispice {
    display: block;
    max-width: 190px;
    max-height: 190px;
    width: auto;
    height: auto;
    margin: 0 auto 1.4rem;
}

/* --- Cartes (espaces, membres) ------------------------------------------ */

.cartes {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin: 2rem 0;
}

.carte {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    width: 100%;
    padding: 1.1rem 1.4rem;
    background: var(--papier-fonce);
    border: 1px solid var(--filet);
    border-radius: 10px;
    text-align: left;
    text-decoration: none;
    color: var(--encre);
    font: inherit;
    cursor: pointer;
}

.carte:hover {
    border-color: var(--bordeaux);
    color: var(--encre);
}

/* Réservé même sans image : les noms restent alignés d'une carte à l'autre. */
.carte-embleme {
    flex: 0 0 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 72px;
}

.carte-embleme img {
    max-width: 96px;
    max-height: 96px;
    width: auto;
    height: auto;
}

.carte-texte {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.carte-nom {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.25rem;
}

.carte-detail {
    font-size: 0.8rem;
    color: var(--encre-douce);
}

.carte-membre { margin-bottom: 0.9rem; }

.liste-membres { display: flex; flex-direction: column; }

/* --- Documents ----------------------------------------------------------- */

.titre-section {
    margin: 2.5rem 0 1rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--filet);
}

.documents {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Année de classement, quand au moins un document de l'espace est daté. */
.documents-annee {
    margin: 2rem 0 0.3rem;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: normal;
    font-size: 1.15rem;
    color: var(--encre-douce);
}

.document {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem 1.2rem;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
    border-bottom: 1px solid var(--filet);
}

.document-texte {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.document-titre { font-size: 1.05rem; }

.document-detail {
    font-size: 0.8rem;
    color: var(--encre-douce);
}

.document .bouton {
    padding: 0.6rem 1.4rem;
    font-size: 0.95rem;
}

.vide {
    margin: 2.5rem 0;
    padding: 1.4rem 1.6rem;
    background: var(--papier-fonce);
    border: 1px dashed var(--filet);
    border-radius: 10px;
    color: var(--encre-douce);
}

/* --- Messages et erreurs ------------------------------------------------ */

.message {
    margin: 0 0 2rem;
    padding: 1rem 1.3rem;
    background: var(--papier-fonce);
    border-left: 4px solid var(--bordeaux);
    border-radius: 6px;
    font-size: 0.95rem;
}

.erreurs {
    margin: 0 0 1.8rem;
    padding: 1rem 1.3rem;
    border: 2px solid var(--bordeaux);
    border-radius: 8px;
    color: var(--bordeaux-fonce);
}

.erreurs p { margin: 0 0 0.4rem; font-size: 0.95rem; }
.erreurs p:last-child { margin: 0; }

.rappel {
    margin: 0 0 2rem;
    color: var(--encre-douce);
}

/* --- Formulaires --------------------------------------------------------- */

.formulaire { margin: 0; }

.champ {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin: 0 0 2rem;
}

.champ label {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.15rem;
}

.champ input[type="text"],
.champ input[type="email"],
.champ input[type="file"],
.champ select,
.champ textarea {
    width: 100%;
    padding: 0.75rem 0.9rem;
    background: #fff;
    border: 2px solid var(--filet);
    border-radius: 8px;
    font: inherit;
    color: var(--encre);
}

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

.aide,
.aide-en-ligne {
    font-size: 0.8rem;
    color: var(--encre-douce);
}

.formulaire button.bouton { border: none; cursor: pointer; }

.acces .bouton { margin: 0 0.4rem 0.6rem; }

.lien-discret {
    margin-top: 0.35rem;
    font-size: 0.8rem;
}

/* --- Logo de l'accueil --------------------------------------------------- */

.logo {
    display: block;
    width: 160px;
    height: auto;
    margin: 0 auto 1.5rem;
}

/* --- Listes en lignes (membres, corbeille…) ------------------------------ */

.liste {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ligne {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem 1.2rem;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
    border-bottom: 1px solid var(--filet);
}

.ligne-texte {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.ligne-nom { font-size: 1.05rem; }

.ligne-detail {
    font-size: 0.8rem;
    color: var(--encre-douce);
}

.ligne .bouton {
    padding: 0.6rem 1.4rem;
    font-size: 0.95rem;
}

/* --- Cases à cocher et boutons radio ------------------------------------- */

.etiquette {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.15rem;
}

.champ-case {
    display: flex;
    gap: 0.8rem;
    align-items: flex-start;
    margin: 0 0 2rem;
}

.champ-case input[type="checkbox"] {
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
    margin-top: 0.2rem;
    accent-color: var(--bordeaux);
}

.champ-case label {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.15rem;
    cursor: pointer;
}

.choix {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.choix label {
    display: flex;
    gap: 0.8rem;
    align-items: center;
    font-family: inherit;
    font-size: 1rem;
    cursor: pointer;
}

.choix input[type="radio"] {
    flex: 0 0 auto;
    width: 1.4rem;
    height: 1.4rem;
    accent-color: var(--bordeaux);
}

/* --- Arbre des espaces (administration) ---------------------------------- */

.arbre {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
}

.arbre-ligne {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--filet);
}

.arbre-texte {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 12rem;
    flex: 1 1 12rem;
}

.arbre-nom { font-size: 1rem; }

.arbre-alerte {
    font-size: 0.75rem;
    color: var(--bordeaux);
}

.arbre-reglages {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.8rem;
    align-items: center;
}

.arbre-reglages select {
    padding: 0.45rem 0.6rem;
    background: #fff;
    border: 2px solid var(--filet);
    border-radius: 8px;
    font: inherit;
    font-size: 0.85rem;
    color: var(--encre);
    max-width: 100%;
}

.arbre-reglages select:focus-visible {
    outline: none;
    border-color: var(--bordeaux);
}

.fleche {
    width: 2.2rem;
    height: 2.2rem;
    padding: 0;
    background: var(--papier-fonce);
    border: 1px solid var(--filet);
    border-radius: 8px;
    color: var(--encre);
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
}

.fleche:hover {
    border-color: var(--bordeaux);
    color: var(--bordeaux);
}

/* --- Zone à manier avec précaution --------------------------------------- */

.zone-prudence {
    margin-top: 3.5rem;
    padding: 1.4rem 1.6rem;
    border: 1px dashed var(--filet);
    border-radius: 10px;
}

.zone-prudence h2 { font-size: 1.15rem; }

.zone-prudence p { margin: 0 0 1rem; }

.zone-prudence .bouton { font-size: 0.95rem; padding: 0.6rem 1.4rem; }

/* Lu par les lecteurs d'écran, invisible à l'œil. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Actions groupées en bout de ligne ------------------------------------ */

.ligne-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    align-items: center;
}

.ligne-actions form { margin: 0; }

.etiquette-courante {
    margin-left: 0.5rem;
    padding: 0.1rem 0.5rem;
    background: var(--bordeaux);
    border-radius: 999px;
    color: #fff;
    font-size: 0.7rem;
    vertical-align: 0.15em;
}

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

@media (max-width: 480px) {
    html { font-size: 18px; }
    .page { padding-top: 2rem; }

    .carte { gap: 0.9rem; padding: 1rem; }
    .carte-embleme { flex-basis: 76px; min-height: 60px; }
    .carte-embleme img { max-width: 76px; max-height: 76px; }
    .rencontre { gap: 0.9rem; padding: 1rem; }
    .rencontre-date { flex-basis: 3.4rem; padding-right: 0.9rem; }
    .rencontre-jour { font-size: 1.7rem; }
    .ma-reponse .bouton { width: 100%; text-align: center; margin: 0 0 0.6rem; }
    .document .bouton { width: 100%; text-align: center; }
    .ligne .bouton { width: 100%; text-align: center; }

    .code-saisie { font-size: 1.9rem; }
    .bouton-large { width: 100%; }
}

/* --- Connexion ---------------------------------------------------------- */
/* Écrans volontairement dépouillés : un seul champ, un seul bouton, de gros
   caractères. Rien qui puisse détourner l'attention ou faire hésiter. */

.connexion {
    max-width: 30rem;
    margin: 0 auto;
}

.connexion h1 {
    margin-bottom: 0.6rem;
}

.connexion-intro {
    font-size: 1.05rem;
    line-height: 1.55;
    margin-bottom: 1.8rem;
}

.connexion-formulaire {
    margin-bottom: 1.6rem;
}

.connexion-formulaire label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
    color: #5a5045;
}

.champ-large {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0.85rem 0.9rem;
    margin-bottom: 1.1rem;
    font-family: inherit;
    font-size: 1.15rem;
    color: var(--encre);
    background: #fff;
    border: 1px solid var(--filet);
}

.champ-large:focus {
    outline: 2px solid var(--bordeaux);
    outline-offset: 1px;
}

/* Les six chiffres : espacés et en chasse fixe, pour se relire sans effort. */
.code-saisie {
    font-family: 'Courier New', monospace;
    font-size: 2.1rem;
    font-weight: bold;
    letter-spacing: 0.22em;
    text-align: center;
}

.bouton-large {
    display: inline-block;
    padding: 0.9rem 2rem;
    font-size: 1.1rem;
}

.connexion-aide {
    font-size: 0.95rem;
    line-height: 1.55;
    color: #5a5045;
    margin-bottom: 1rem;
}

.connexion-renvoi {
    margin-bottom: 1rem;
}

.erreur {
    margin: -0.6rem 0 1.1rem;
    padding: 0.6rem 0.8rem;
    font-size: 0.98rem;
    color: var(--bordeaux);
    background: #f6ece9;
    border-left: 3px solid var(--bordeaux);
}

/* --- Textes libres ------------------------------------------------------ */
/* Tout ce qu'un administrateur rédige lui-même passe par ici : présentation
   d'un espace, texte de la page d'accueil. Le HTML est produit par
   App\Support\Texte, donc seules ces quelques balises peuvent apparaître. */

.texte > :first-child { margin-top: 0; }
.texte > :last-child { margin-bottom: 0; }

.texte p { margin: 0 0 1.1rem; }

.texte ul,
.texte ol {
    margin: 0 0 1.1rem;
    padding-left: 1.5rem;
}

.texte li { margin-bottom: 0.3rem; }

.texte strong { font-weight: 600; }

/* Non annoncés dans l'aide, mais possibles : mieux vaut qu'ils soient beaux
   que laissés aux styles du navigateur. */
.texte h1,
.texte h2,
.texte h3 {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: normal;
    font-size: 1.3rem;
    margin: 1.6rem 0 0.6rem;
}

.texte blockquote {
    margin: 0 0 1.1rem;
    padding-left: 1rem;
    border-left: 3px solid var(--filet);
    color: var(--encre-douce);
}

/* --- Aide de mise en forme, sous les zones de saisie -------------------- */

.aide-format {
    margin-top: 0.3rem;
    padding: 0.8rem 1rem;
    background: var(--papier-fonce);
    border: 1px solid var(--filet);
    border-radius: 8px;
    font-size: 0.8rem;
    color: var(--encre-douce);
}

.aide-format-titre { color: var(--encre); }

.aide-format p { margin: 0 0 0.5rem; }
.aide-format p:last-child { margin: 0; }

.aide-format ul {
    margin: 0 0 0.5rem;
    padding-left: 1.2rem;
}

.aide-format li { margin-bottom: 0.15rem; }

.aide-format code {
    padding: 0.05rem 0.3rem;
    background: #fff;
    border: 1px solid var(--filet);
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.95em;
}

/* --- Aperçu d'un texte enregistré --------------------------------------- */

.apercu {
    margin-top: 3rem;
    padding: 1.4rem 1.6rem;
    background: var(--papier-fonce);
    border: 1px solid var(--filet);
    border-radius: 10px;
}

.apercu h2 { font-size: 1.15rem; }

.apercu .lien-discret { margin-top: 1.2rem; }

/* --- Calendrier ---------------------------------------------------------- */
/* Une liste, pas une grille : un mois en cases est surtout fait de vide, en
   petits caractères. Ici chaque rencontre est une ligne, avec la date détachée
   à gauche, lisible d'un coup d'œil. */

.rencontres {
    list-style: none;
    margin: 2rem 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.rencontre {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1.1rem 1.4rem;
    background: var(--papier-fonce);
    border: 1px solid var(--filet);
    border-radius: 10px;
    text-decoration: none;
    color: var(--encre);
}

.rencontre:hover {
    border-color: var(--bordeaux);
    color: var(--encre);
}

.rencontre-date {
    flex: 0 0 4.2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-right: 1.2rem;
    border-right: 1px solid var(--filet);
    line-height: 1.1;
}

.rencontre-jour {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 2rem;
}

.rencontre-mois {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--encre-douce);
}

.rencontre-annee {
    font-size: 0.7rem;
    color: var(--encre-douce);
}

.rencontre-texte {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.rencontre-titre {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.25rem;
}

.rencontre-detail,
.rencontre-reponse {
    font-size: 0.8rem;
    color: var(--encre-douce);
}

.rencontre-reponse { color: var(--bordeaux); }

/* --- Réponses à une rencontre --------------------------------------------- */

.ma-reponse {
    margin: 2.5rem 0;
    padding: 1.4rem 1.6rem;
    background: var(--papier-fonce);
    border: 1px solid var(--filet);
    border-radius: 10px;
}

.ma-reponse h2 { font-size: 1.2rem; }
.ma-reponse .rappel { margin-bottom: 1rem; font-size: 0.95rem; }
.ma-reponse .acces { margin: 0; }

.reponses {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 2.5rem;
    margin: 1.5rem 0;
}

.colonne-reponse {
    flex: 1 1 12rem;
    min-width: 0;
}

.colonne-titre {
    margin: 0 0 0.5rem;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.1rem;
}

.noms {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.95rem;
}

.noms li {
    padding: 0.25rem 0;
    border-bottom: 1px solid var(--filet);
}

.noms li:last-child { border-bottom: none; }