/*
 * Espace abonné — L'investisseur sans costume (issue #98)
 *
 * TOUT le style de l'espace abonné vit ici ; les gabarits (src/main/resources/espace/*.mustache)
 * ne portent que des classes. Une passe de design ne doit toucher que ce fichier et les gabarits.
 *
 * Contraintes : audience senior et navigateurs anciens. Donc ni variables CSS, ni flexbox, ni
 * grid : des blocs, des marges, des floats. La page se lit sur une colonne ; les deux colonnes
 * d'une carte de mois ne sont qu'une amélioration des grands écrans. Aucun JavaScript sur ces pages.
 *
 * Palette
 *   rouge du logo   #A31D21   (texte blanc dessus : contraste 7,6:1)
 *   rouge foncé     #7D1619   (survol, focus)
 *   encre           #222222
 *   gris texte      #555555
 *   fond            #FAF7F2
 *   filet           #E2DAD0
 */

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

body {
    margin: 0;
    padding: 0;
    background: #FAF7F2;
    color: #222222;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    line-height: 1.6;
}

a {
    color: #A31D21;
}

a:hover,
a:focus {
    color: #7D1619;
}

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

.entete {
    background: #FFFFFF;
    border-top: 6px solid #A31D21;
    border-bottom: 1px solid #E2DAD0;
}

.entete-contenu {
    max-width: 720px;
    margin: 0 auto;
    padding: 20px 20px 16px 20px;
}

.marque {
    margin: 0;
    color: #A31D21;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 28px;
    font-weight: bold;
    line-height: 1.2;
}

.sous-marque {
    margin: 4px 0 0 0;
    color: #555555;
    font-size: 16px;
}

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

.page {
    max-width: 720px;
    margin: 0 auto;
    padding: 8px 20px 40px 20px;
}

h1 {
    margin: 28px 0 12px 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 32px;
    line-height: 1.25;
    font-weight: bold;
}

h2 {
    margin: 0 0 16px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid #A31D21;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 24px;
    line-height: 1.3;
    font-weight: bold;
}

p {
    margin: 0 0 16px 0;
}

.chapeau {
    font-size: 20px;
}

.aide {
    color: #555555;
    font-size: 16px;
}

.bloc {
    margin: 24px 0;
    padding: 24px;
    background: #FFFFFF;
    border: 1px solid #E2DAD0;
    border-radius: 6px;
}

/* ---------- Bandeaux ---------- */

.bandeau {
    margin: 20px 0;
    padding: 16px 20px;
    border-left: 6px solid #555555;
    background: #FFFFFF;
    border-radius: 4px;
}

.bandeau p {
    margin: 0;
}

.bandeau-succes {
    border-left-color: #2E7D32;
    background: #EAF5EA;
}

.bandeau-attention {
    border-left-color: #A31D21;
    background: #FBECEC;
}

/* Prélèvement en échec (#360) : le bouton vers la page de paiement sous la phrase. */
.bandeau-paiement form {
    margin-top: 12px;
}

.bandeau-info {
    border-left-color: #A31D21;
    background: #FAF7F2;
    font-weight: bold;
}

/* ---------- Statut d'abonnement ---------- */

.statut {
    font-size: 20px;
    font-weight: bold;
}

.statut-actif {
    color: #2E7D32;
}

.statut-inactif {
    color: #555555;
}

/* ---------- Formulaires et boutons ---------- */

label {
    display: block;
    margin-bottom: 4px;
    font-weight: bold;
    font-size: 20px;
}

.champ {
    display: block;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 0 20px 0;
    padding: 14px 16px;
    border: 2px solid #555555;
    border-radius: 4px;
    background: #FFFFFF;
    color: #222222;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
}

.champ:focus {
    border-color: #A31D21;
    outline: 3px solid #E9B9BB;
}

form {
    margin: 0 0 12px 0;
}

.bouton {
    display: inline-block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 4px 0;
    padding: 16px 28px;
    border: 2px solid #A31D21;
    border-radius: 6px;
    background: #A31D21;
    color: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-weight: bold;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    -webkit-appearance: none;
}

.bouton:hover,
.bouton:focus {
    background: #7D1619;
    border-color: #7D1619;
    color: #FFFFFF;
}

.bouton:focus {
    outline: 3px solid #E9B9BB;
}

.bouton-secondaire {
    background: #FFFFFF;
    color: #A31D21;
}

.bouton-secondaire:hover,
.bouton-secondaire:focus {
    background: #A31D21;
    color: #FFFFFF;
}

/* ---------- Listes et éléments (emails, dossiers d'une carte) ---------- */

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

.element {
    margin: 0;
    padding: 20px 0;
    border-top: 1px solid #E2DAD0;
    overflow: hidden; /* contient le float de la couverture */
}

.liste .element:first-child {
    border-top: 0;
    padding-top: 4px;
}

.couverture {
    float: left;
    width: 120px;
    height: auto;
    margin: 0 20px 8px 0;
    border: 1px solid #E2DAD0;
}

/*
 * La couverture d'un numéro (#360) : un cadre au format des couvertures (500 x 455). Sans couverture, le cadre
 * montre le numéro ; une couverture introuvable est recouverte par le même repli (pseudo-élément d'une image
 * cassée : Chrome, Edge, Firefox ; ailleurs, l'icône du navigateur reste dans le cadre).
 */
.couverture-cadre {
    position: relative;
    height: 109px; /* 120 x 455 / 500, sans aspect-ratio, inconnu des navigateurs anciens */
    background: #FFFFFF;
}

.couverture-cadre img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.couverture-repli,
.couverture-cadre img::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F1E9DF;
    color: #A31D21;
    font: bold 22px Georgia, "Times New Roman", serif;
}

.couverture-cadre img::after {
    content: attr(data-repli);
}

.element-texte {
    overflow: hidden; /* le texte ne passe pas sous la couverture */
}

.element-genre {
    margin: 0 0 2px 0;
    color: #A31D21;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.element-titre {
    margin: 0 0 4px 0;
    font-size: 20px;
    font-weight: bold;
    line-height: 1.35;
}

.element-detail {
    margin: 0 0 4px 0;
}

.element-date {
    margin: 0 0 12px 0;
    color: #555555;
    font-size: 16px;
}

/* ---------- Page d'accès : plus large, pour les cartes d'un mois sur deux colonnes ---------- */

.page-large,
.entete-large {
    max-width: 960px;
}

h3 {
    margin: 0 0 12px 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 21px;
    line-height: 1.3;
    font-weight: bold;
}

.bouton-compact {
    padding: 10px 18px;
    font-size: 18px;
}

.etiquette {
    display: inline-block;
    padding: 2px 10px;
    border: 1px solid #555555;
    border-radius: 12px;
    color: #555555;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
    vertical-align: middle;
}

.etiquette-forte {
    border-color: #2E7D32;
    color: #2E7D32;
}

.fin-colonnes {
    clear: both;
}

/* ---------- À la une : les tuiles au-dessus des onglets ---------- */

.une {
    margin: 20px 0 8px 0;
}

.tuile {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 0 12px 0;
    padding: 14px 18px;
    background: #FFFFFF;
    border: 1px solid #E2DAD0;
    border-left: 6px solid #A31D21;
    border-radius: 4px;
}

.tuile p {
    margin: 0 0 6px 0;
}

.tuile form {
    margin: 6px 0 0 0;
}

.tuile-titre {
    color: #A31D21;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.tuile-texte {
    font-size: 20px;
    font-weight: bold;
    line-height: 1.35;
}

.tuile-detail {
    color: #555555;
}

/* Ouvert à tous, gratuit : en pointillés, pour ne pas le confondre avec la conférence des abonnés. */
.tuile-ouverte {
    border: 2px dashed #555555;
}

.tuile-ouverte .tuile-titre {
    color: #555555;
}

/* ---------- Onglets ---------- */

.onglets {
    margin: 24px 0 0 0;
    border-bottom: 2px solid #A31D21;
}

.onglet {
    display: inline-block;
    margin: 0 2px 0 0;
    padding: 12px 10px;
    border: 1px solid #E2DAD0;
    border-bottom: 0;
    border-radius: 6px 6px 0 0;
    background: #FFFFFF;
    font-size: 17px;
    font-weight: bold;
    text-decoration: none;
}

.onglet-courant,
.onglet-courant:hover,
.onglet-courant:focus {
    border-color: #A31D21;
    background: #A31D21;
    color: #FFFFFF;
}

/* ---------- La Conférence : une carte par mois ---------- */

.mois {
    margin: 24px 0;
    padding: 24px;
    background: #FFFFFF;
    border: 1px solid #E2DAD0;
    border-radius: 6px;
}

.mois-titre {
    padding-bottom: 10px;
    border-bottom: 2px solid #A31D21;
    font-size: 24px;
}

.mois-colonne {
    margin-bottom: 8px;
}

.mois-rubrique {
    margin: 0 0 4px 0;
    color: #555555;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.mois-rubrique + .element {
    border-top: 0;
    padding-top: 8px;
}

.point {
    padding: 14px 0;
}

/* La vignette d'une conférence : une image fixe, la vidéo est dans l'email. */
.vignette {
    position: relative;
    float: left;
    width: 120px;
    height: 68px;
    margin: 0 20px 8px 0;
    border-radius: 4px;
    background: #222222;
}

.vignette:after {
    content: "";
    position: absolute;
    left: 50px;
    top: 20px;
    border-style: solid;
    border-width: 14px 0 14px 24px;
    border-color: transparent transparent transparent #FFFFFF;
}

/* ---------- Dossiers spéciaux : le fil de suivi ---------- */

.fil-titre {
    clear: both;
    margin-top: 20px;
}

.fil {
    margin: 0 0 0 6px;
    padding: 0 0 0 18px;
    border-left: 3px solid #E2DAD0;
    list-style: none;
}

.fil-element {
    margin: 0;
    padding: 12px 0;
    border-top: 1px solid #E2DAD0;
}

.fil-element:first-child {
    border-top: 0;
    padding-top: 0;
}

.fil-element .element-date {
    margin-bottom: 4px;
}

/* ---------- Mes emails : les filtres ---------- */

.filtres {
    margin: 0 0 8px 0;
}

.filtre {
    display: inline-block;
    margin: 0 6px 8px 0;
    padding: 8px 16px;
    border: 2px solid #A31D21;
    border-radius: 22px;
    background: #FFFFFF;
    font-weight: bold;
    text-decoration: none;
}

.filtre-courant,
.filtre-courant:hover,
.filtre-courant:focus {
    background: #A31D21;
    color: #FFFFFF;
}

/* ---------- En-tête de la page d'accès : une ligne, les onglets collés dessous (#329) ---------- */

.entete-ligne {
    padding: 10px 20px 0 20px;
    overflow: hidden; /* contient les floats de la marque et de l'adresse */
}

.entete-ligne .marque {
    float: left;
    padding: 4px 0 10px 0;
    font-size: 24px;
}

.compte {
    float: right;
    margin: 0;
    padding: 10px 0 0 0;
    color: #555555;
    font-size: 15px;
}

.compte strong {
    color: #222222;
}

.entete-ligne .onglets {
    clear: both;
    margin: 0;
    border-bottom: 0;
}

.entete-ligne .onglet {
    padding: 10px 12px;
    font-size: 16px;
}

/* ---------- Dossiers spéciaux : la rangée de couvertures, qui sert de sous-onglets (#329) ---------- */

.etagere {
    margin: 20px 0 0 0;
}

.rayon {
    display: inline-block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 23%;
    margin: 0 1.5% 10px 0;
    padding: 10px 8px 8px 8px;
    vertical-align: top;
    background: #FFFFFF;
    border: 1px solid #E2DAD0;
    border-radius: 6px;
    color: #222222;
    text-align: center;
    text-decoration: none;
}

.rayon:hover,
.rayon:focus {
    border-color: #A31D21;
    color: #222222;
}

.rayon img {
    display: block;
    width: 90px;
    height: auto;
    margin: 0 auto 4px auto;
}

.rayon-vide {
    display: block;
    width: 66px;
    height: 82px;
    margin: 0 auto 4px auto;
    background: #F2EDE5;
    border: 1px solid #E2DAD0;
}

.rayon-titre {
    display: block;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.25;
}

.rayon-date {
    display: block;
    color: #555555;
    font-size: 13px;
}

.rayon-courant,
.rayon-courant:hover,
.rayon-courant:focus {
    padding: 8px 6px 6px 6px;
    border: 3px solid #A31D21;
}

.rayon-courant .rayon-titre {
    color: #A31D21;
}

/* ---------- Dossiers spéciaux : la carte du dossier choisi ---------- */

.dossier-special .couverture {
    width: 130px;
    border: 0;
}

.ds-tete {
    overflow: hidden; /* le texte reste à droite de la couverture */
}

.ds-titre {
    margin: 0 0 2px 0;
    padding: 0;
    border: 0;
    font-size: 27px;
    line-height: 1.2;
}

.ds-sous-titre {
    margin: 0 0 8px 0;
    color: #555555;
    font-size: 17px;
    font-style: italic;
}

.ds-meta {
    margin: 0 0 10px 0;
    color: #555555;
    font-size: 15px;
}

.ds-sans-pdf p {
    margin: 8px 0 0 0;
    color: #555555;
    font-size: 16px;
}

/* Un renvoi d'email, en lien : discret, comme le veut la maquette. */
.lien-discret {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: #A31D21;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    text-decoration: underline;
    cursor: pointer;
    -webkit-appearance: none;
}

.lien-discret:hover,
.lien-discret:focus {
    color: #7D1619;
}

.maj-titre {
    clear: both;
    margin: 18px 0 4px 0;
    padding-top: 14px;
    border-top: 2px solid #A31D21;
    color: #555555;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
}

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

.maj li {
    padding: 9px 0;
    border-top: 1px solid #EEE7DD;
    overflow: hidden; /* contient le float de la date */
}

.maj li:first-child {
    border-top: 0;
}

.maj-date {
    float: left;
    width: 150px;
    margin: 0;
    padding-top: 2px;
    color: #555555;
    font-size: 15px;
}

.maj-corps {
    overflow: hidden;
}

.maj-objet {
    margin: 0;
    font-size: 17px;
    line-height: 1.35;
}

.maj-liens {
    margin: 2px 0 0 0;
    font-size: 15px;
}

.maj-liens a {
    margin-right: 14px;
}

.maj-liens form {
    display: inline;
    margin: 0;
}

.maj-plus {
    margin: 8px 0 0 0;
    font-size: 15px;
}

/* L'envoi concerne un autre dossier : la mise à jour Pétrole partie aussi aux acheteurs de la Bible. */
.pastille {
    display: inline-block;
    margin-left: 6px;
    padding: 0 7px;
    border: 1px solid #999999;
    border-radius: 10px;
    color: #555555;
    font-size: 12px;
    font-weight: bold;
    vertical-align: 2px;
}

/* ---------- Pied ---------- */

.pied {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid #E2DAD0;
    color: #555555;
    font-size: 16px;
}

/* ---------- Aperçu d'admin (#313) : la page d'un profil, vue depuis l'écran Publications ---------- */

.apercu-bandeau {
    margin: 0 0 20px 0;
    padding: 8px 14px;
    border-radius: 6px;
    background: #2B2B2B;
    color: #FFFFFF;
    font-size: 15px;
}

.apercu-inerte {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.apercu-inerte button {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ---------- Grands écrans : tuiles côte à côte, carte d'un mois sur deux colonnes ---------- */

@media (min-width: 760px) {
    .tuile {
        display: inline-block;
        width: 48%;
        margin-right: 1%;
        vertical-align: top;
    }

    .mois-deux-colonnes .mois-colonne {
        float: left;
        width: 48%;
    }

    .mois-deux-colonnes .mois-colonne + .mois-colonne {
        float: right;
    }
}

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

@media (max-width: 520px) {
    .marque {
        font-size: 24px;
    }

    h1 {
        font-size: 27px;
    }

    .bloc {
        padding: 18px;
    }

    .bouton {
        display: block;
        width: 100%;
    }

    .couverture {
        width: 90px;
        margin-right: 14px;
    }

    .couverture-cadre {
        height: 82px;
    }

    .couverture-repli,
    .couverture-cadre img::after {
        font-size: 18px;
    }

    .onglets {
        border-bottom: 0;
    }

    /* Les onglets se suivent sur deux ou trois lignes, au lieu d'en prendre cinq. */
    .onglet,
    .entete-ligne .onglet {
        margin: 0 4px 4px 0;
        padding: 6px 9px;
        border-bottom: 1px solid #E2DAD0;
        border-radius: 5px;
        font-size: 15px;
    }

    .entete-ligne .marque {
        float: none;
        padding-bottom: 0;
        font-size: 21px;
    }

    .compte {
        float: none;
        padding: 0 0 8px 0;
        font-size: 13px;
    }

    /* Deux couvertures par ligne : 46 % laisse la place de l'espace entre deux blocs en ligne. */
    .rayon {
        width: 46%;
        margin-right: 2%;
    }

    .dossier-special .couverture {
        width: 86px;
        margin-right: 14px;
    }

    .ds-titre {
        font-size: 22px;
    }

    .maj-date {
        float: none;
        width: auto;
        padding: 0;
        font-size: 14px;
    }

    .mois {
        padding: 18px;
    }

    .vignette {
        width: 90px;
        height: 51px;
        margin-right: 14px;
    }

    .vignette:after {
        left: 36px;
        top: 12px;
    }
}