/* =====================================================================
   Tramavia — pages de compte et de lecture, à l'identique des maquettes
   docs/maquettes/manuscrit/ : Connexion, Inscription, MotDePasseOublie,
   Reinitialiser, Profil, Preferences, AbonnementSucces, AbonnementAnnule,
   MaLecture, MesAchats. Préfixe « mc- » (maquette compte).
   Les couleurs passent par les variables de manuscrit.css, plus quelques
   teintes propres aux cadres (fiche plus claire que le vélin, champs) que
   les thèmes sombre et sépia redéfinissent ci-dessous.
   ===================================================================== */

:root {
    --mc-fiche: #FBF6E4;                    /* papier des cadres et de l'ex-libris */
    --mc-champ: #FFFDF5;                    /* fond des champs et des cartes de choix */
    --mc-champ-bord: #8C7B5E;
    --mc-cadre: rgba(26, 20, 16, .6);       /* filet d'encre d'un cadre */
    --mc-cadre-pale: rgba(26, 20, 16, .18); /* second filet, décalé */
    --mc-carte-bord: rgba(26, 20, 16, .35); /* carte de choix non cochée */
    --mc-ligne-bord: rgba(26, 20, 16, .45); /* ligne d'ouvrage, état vide */
    --mc-pointille: rgba(94, 81, 64, .4);
    --mc-or-filet: rgba(198, 161, 91, .6);
    --mc-or-filet-fort: rgba(198, 161, 91, .7);
    --mc-apercu: #F3EEDB;
    --mc-apercu-bord: #E8DFC8;
    --mc-trait: rgba(26, 20, 16, .55);      /* traits de l'aperçu de largeur */
    --mc-ombre-fiche: 0 14px 30px rgba(60, 40, 10, .10);
    --mc-or-pale: rgba(198, 161, 91, .35);
}
[data-theme="sombre"] {
    --mc-fiche: #2A2018;
    --mc-champ: #1C150F;
    --mc-champ-bord: #7A6A50;
    --mc-cadre: rgba(232, 223, 206, .45);
    --mc-cadre-pale: rgba(232, 223, 206, .14);
    --mc-carte-bord: rgba(232, 223, 206, .3);
    --mc-ligne-bord: rgba(232, 223, 206, .35);
    --mc-pointille: rgba(185, 173, 149, .4);
    --mc-apercu: #1E1711;
    --mc-apercu-bord: #3A2F22;
    --mc-trait: rgba(232, 223, 206, .55);
    --mc-ombre-fiche: 0 14px 30px rgba(0, 0, 0, .35);
}
[data-theme="sepia"] {
    --mc-fiche: #EFE2C2;
    --mc-champ: #F3E8CC;
    --mc-champ-bord: #8C7458;
    --mc-cadre: rgba(58, 40, 24, .6);
    --mc-cadre-pale: rgba(58, 40, 24, .2);
    --mc-carte-bord: rgba(58, 40, 24, .35);
    --mc-ligne-bord: rgba(58, 40, 24, .45);
    --mc-apercu: #E0CEA8;
    --mc-apercu-bord: #D8C8A8;
    --mc-trait: rgba(58, 40, 24, .55);
}

/* ------- Page : corps de texte de la maquette (EB Garamond 19 px) ------- */

.mc-page {
    font-family: var(--font-page);
    font-size: 19px;
    line-height: 1.7;
    color: var(--ms-encre);
}
.mc-page a { color: var(--ms-bordeaux); }
.mc-page a:hover { color: var(--ms-bordeaux-fonce); }
.mc-page p { margin: 0; }

/* ------- Boutons de la maquette ------------------------------------------ */

.mc-btn {
    display: inline-block;
    padding: 11px 22px;
    border-radius: 2px;
    cursor: pointer;
    text-decoration: none;
    font-family: var(--font-interface);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
}
.mc-page .mc-btn-bleu,
.mc-btn-bleu { background: var(--ms-bleu-fond); color: var(--ms-sur-fond); border: 1px solid var(--ms-bleu-fond); }
.mc-page .mc-btn-bleu:hover,
.mc-btn-bleu:hover { background: var(--ms-bleu-fond-fonce); border-color: var(--ms-bleu-fond-fonce); color: var(--ms-sur-fond); }
.mc-page .mc-btn-trait,
.mc-btn-trait { background: transparent; color: var(--ms-encre); border: 1px solid var(--ms-encre); }
.mc-page .mc-btn-trait:hover,
.mc-btn-trait:hover { background: var(--ms-encre); color: var(--ms-velin); }
.mc-btn-petit { padding: 7px 14px; font-size: 14px; }

/* ------- L'ex-libris (Connexion, Inscription, mot de passe) -------------- */

.mc-section-fiche { padding: 70px 56px 70px; }
.mc-page .mc-fiche.ms-exlibris {
    max-width: 598px;              /* 500 px de contenu + rembourrage + filet (maquette en content-box) */
    margin: 0 auto;
    border-radius: 0 !important;
    background: var(--mc-fiche);
    border: 1px solid var(--ms-or);
    outline: 3px double var(--ms-or);
    outline-offset: 7px;
    padding: 44px 48px 36px;
    box-shadow: var(--mc-ombre-fiche);
    font-family: var(--font-page);
}
.mc-ornement { display: block; width: 160px; height: 36px; margin: 0 auto 10px; }
.mc-ornement path { fill: none; stroke: var(--ms-or); stroke-width: 1.8; }
.mc-ornement circle.plein { fill: var(--ms-or); }
.mc-ornement circle.vide { fill: none; stroke: var(--ms-or); stroke-width: 1.5; }
.mc-fiche-surtitre {
    text-align: center;
    font-family: var(--font-capitales);
    font-size: 18px;
    letter-spacing: .24em;
    color: var(--ms-bordeaux);
}
.mc-page .mc-fiche-titre {
    margin: 4px 0 0;
    text-align: center;
    font-family: var(--font-titre);
    font-weight: 600;
    font-size: 46px;
    line-height: 1.1;
    color: var(--ms-encre);
}
.mc-page .mc-fiche-fleuron { margin: 14px 0 26px; text-align: center; font-size: 22px; line-height: 1; color: var(--ms-or); }
.mc-page .mc-fiche-fleuron.court { margin-bottom: 20px; }
.mc-page .mc-fiche-chapeau { margin: 0 0 24px; font-style: italic; color: var(--ms-gris); text-align: center; }
.mc-champ { margin: 0 0 20px; }
.mc-champ.dernier { margin-bottom: 28px; }
.mc-page .mc-fiche label.mc-label {
    display: block;
    margin: 0 0 6px;
    font-family: var(--font-capitales);
    font-size: 19px;
    letter-spacing: .06em;
    color: var(--ms-encre);
}
.mc-page .mc-fiche .mc-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    font-family: var(--font-page);
    font-size: 19px;
    line-height: normal;
    color: var(--ms-encre);
    background: var(--mc-champ);
    border: 1px solid var(--mc-champ-bord);
    border-radius: 2px;
}
.mc-input:focus { outline: 2px solid var(--ms-bleu); outline-offset: 1px; }
.mc-page .mc-erreur { margin: 4px 0 0; font-family: var(--font-interface); font-size: 14px; line-height: 1.4; color: var(--ms-bordeaux); }
.mc-souvenir { display: flex; align-items: center; gap: 10px; margin: 0 0 26px; }
.mc-souvenir input { width: 18px; height: 18px; margin: 0; accent-color: var(--ms-bordeaux-fond); }
.mc-souvenir label { font-size: 18px; color: var(--ms-encre); }
.mc-page .mc-btn-bordeaux {
    display: block;
    width: 100%;
    padding: 13px 24px;
    background: var(--ms-bordeaux-fond);
    color: var(--ms-sur-fond);
    border: 0;
    border-radius: 2px;
    cursor: pointer;
    font-family: var(--font-capitales);
    font-size: 21px;
    line-height: normal;
    letter-spacing: .06em;
}
.mc-page .mc-btn-bordeaux:hover { background: var(--ms-bordeaux-fond-fonce); }
.mc-fiche-pied a { text-decoration: underline; }
.mc-fiche-pied { margin: 28px 0 0; padding: 20px 0 0; border-top: 1px solid var(--mc-or-filet); text-align: center; }
.mc-page .mc-fiche-pied p + p { margin-top: 6px; font-size: 17px; }

@media (max-width: 640px) {
    .mc-section-fiche { padding-left: 22px; padding-right: 22px; }
    .mc-page .mc-fiche.ms-exlibris { padding: 32px 22px 28px; }
}
@media (max-width: 400px) {
    /* le titre de 46 px ne tient pas sur un téléphone de 320 px (« Réinitialiser ») */
    .mc-page .mc-fiche-titre { font-size: 38px; }
}

/* ------- Pages internes : en-tête de page --------------------------------- */

.mc-pad { padding-left: 48px; padding-right: 48px; }
.mc-entete { padding-top: 50px; padding-bottom: 10px; }
.mc-surtitre { margin: 0 0 6px !important; font-family: var(--font-capitales); font-size: 19px; letter-spacing: .2em; color: var(--ms-bordeaux); }
.mc-page .mc-h1 {
    margin: 0;
    font-family: var(--font-titre);
    font-weight: 600;
    font-size: clamp(42px, 5vw, 66px);
    line-height: 1.02;
    color: var(--ms-encre);
}
.mc-page .mc-chapeau { margin: 14px 0 0; max-width: 760px; font-style: italic; font-size: 20px; color: var(--ms-gris); }

/* ------- Cadre à double filet d'encre (Profil, Préférences, Ma lecture) --- */

.mc-cadre {
    border: 1px solid var(--mc-cadre);
    outline: 1px solid var(--mc-cadre-pale);
    outline-offset: 3px;
    background: var(--mc-fiche);
    min-width: 0;
}
.mc-page .mc-cadre-titre {
    margin: 0;
    padding: 16px 28px 12px;
    font-family: var(--font-capitales);
    font-weight: 600;
    font-size: 25px;
    letter-spacing: .06em;
    color: var(--ms-bleu);
    border-bottom: 1px solid var(--mc-or-filet-fort);
    line-height: 1.6;
}
.mc-cadre-titre .orne { color: var(--ms-or-texte); }
.mc-cadre-corps { padding: 24px 28px 28px; }

/* Champs d'interface (Work Sans) des cadres */
.mc-page label.mc-label-ui,
.mc-label-ui {
    display: block;
    margin: 0 0 6px;
    font-family: var(--font-interface);
    font-size: 14px;
    font-weight: 500;
    color: var(--ms-encre);
}
.mc-page .mc-input-ui {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    font-family: var(--font-interface);
    font-size: 16px;
    line-height: normal;
    color: var(--ms-encre);
    background: var(--mc-champ);
    border: 1px solid var(--mc-champ-bord);
    border-radius: 2px;
}
.mc-page select.mc-input-ui { appearance: auto; }
.mc-aide { margin: 6px 0 0 !important; font-family: var(--font-interface); font-size: 13px; line-height: 1.45; color: var(--ms-gris); }

@media (max-width: 760px) {
    .mc-pad { padding-left: 20px; padding-right: 20px; }
    .mc-cadre-corps, .mc-page .mc-cadre-titre { padding-left: 18px; padding-right: 18px; }
}

/* ------- Profil ------------------------------------------------------------ */

.mc-profil-grille {
    padding-top: 34px;
    padding-bottom: 50px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 500px), 1fr));
    gap: 34px;
    align-items: start;
}
.mc-profil-colonne { display: flex; flex-direction: column; gap: 34px; min-width: 0; }
.mc-abonnement-corps { padding: 18px 28px 28px; }
.mc-sceau { display: flex; align-items: center; gap: 18px; margin: 6px 0 14px; }
.mc-sceau svg { flex: 0 0 64px; width: 64px; height: 64px; }
.mc-sceau .disque { fill: var(--ms-bordeaux-fond); }
.mc-sceau .anneau { fill: none; stroke: var(--ms-or); stroke-width: 1.5; }
.mc-sceau text { fill: var(--ms-sur-fond); font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 30px; }
.mc-page .mc-sceau-nom { margin: 0; font-family: var(--font-titre); font-weight: 600; font-size: 34px; line-height: 1.1; color: var(--ms-bordeaux); }
.mc-registre { display: grid; grid-template-columns: minmax(0, 15em) minmax(0, 1fr); margin: 0; }
.mc-registre dt {
    margin: 0;
    padding: 12px 0;
    font-family: var(--font-capitales);
    font-weight: 400;
    font-size: 19px;
    letter-spacing: .04em;
    color: var(--ms-gris);
    border-bottom: 1px dotted var(--mc-pointille);
}
.mc-registre dd { margin: 0; padding: 12px 0; font-size: 20px; color: var(--ms-encre); border-bottom: 1px dotted var(--mc-pointille); }
@media (max-width: 760px) {
    /* sur téléphone, la colonne des intitulés (15em) ne laisse plus de place aux valeurs */
    .mc-registre { grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; }
    .mc-registre dd { text-align: right; white-space: nowrap; }
}
.mc-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.mc-abonnement-corps .mc-actions { margin: 26px 0 0; }
.mc-page .mc-note-stripe {
    margin: 22px 0 0;
    padding: 14px 0 0;
    border-top: 1px solid var(--mc-or-filet);
    font-style: italic;
    font-size: 17px;
    line-height: 1.5;
    color: var(--ms-gris);
}
.mc-champ-ui { margin: 0 0 20px; }
.mc-champ-ui.dernier { margin-bottom: 24px; }

/* ------- Préférences : cartes de choix ------------------------------------ */

.mc-pref-form { padding-top: 30px; padding-bottom: 40px; }
.mc-pref-form .mc-cadre { margin: 0 0 36px; }
.mc-pref-form .mc-cadre.editeur { margin-bottom: 30px; }
.mc-pref-interface { padding: 24px 28px 6px; }
.mc-pref-editeur { padding: 22px 28px 8px; }
.mc-pref-langue { max-width: 420px; margin: 0 0 28px; }
.mc-page .mc-pref-intro { margin: 0 0 26px; font-style: italic; color: var(--ms-gris); font-size: 18px; }
.mc-choix { margin: 0 0 30px; padding: 0; border: 0; min-width: 0; }
.mc-choix legend {
    float: none;
    width: auto;
    margin: 0 0 4px;
    padding: 0;
    font-family: var(--font-capitales);
    font-size: 21px;
    line-height: 1.7;
    letter-spacing: .05em;
    color: var(--ms-encre);
}
.mc-choix-grille { display: grid; gap: 14px; margin-top: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.mc-choix-grille.polices { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.mc-choix-grille.tailles { grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); }
.mc-choix-grille.demi { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.mc-deux-choix { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); gap: 0 34px; }
.mc-carte {
    display: block;
    position: relative;
    cursor: pointer;
    padding: 14px 14px 12px;
    background: var(--mc-champ);
    border: 1px solid var(--mc-carte-bord);
    border-radius: 2px;
    margin: 0;
}
/* carte cochée : filet bleu de 2 px (le rembourrage perd 1 px pour garder la taille) */
.mc-carte:has(input:checked) {
    padding: 13px 13px 11px;
    border: 2px solid var(--ms-bleu);
    box-shadow: inset 0 0 0 3px rgba(29, 92, 122, .08);
}
.mc-carte:has(input:focus-visible) { outline: 2px solid var(--ms-bleu); outline-offset: 2px; }
.mc-carte input {
    position: absolute;
    top: 12px;
    right: 12px;
    margin: 0;
    accent-color: var(--ms-bleu-fond);
    width: 16px;
    height: 16px;
}
.mc-carte-nom { display: block; margin-top: 10px; font-family: var(--font-interface); font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--ms-encre); }
.mc-carte-note { display: block; font-family: var(--font-interface); font-size: 12.5px; line-height: 1.5; color: var(--ms-gris); }

/* Thème : vignettes aux couleurs réelles de chaque thème (fixes : ce sont des échantillons) */
.mc-vignette-theme {
    display: block;
    height: 96px;
    padding: 12px 14px;
    box-sizing: border-box;
    font-family: 'Lora', Georgia, serif;
    font-size: 13px;
    line-height: 1.55;
    overflow: hidden;
}
.mc-vignette-theme b { display: block; font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 17px; margin-bottom: 4px; }
.mc-vignette-theme.clair { background: #f3eedb; border: 1px solid #e8dfc8; color: #1a1410; }
.mc-vignette-theme.sombre { background: #1a1410; border: 1px solid #3a2f22; box-shadow: inset 0 0 26px rgba(0, 0, 0, .75); color: #e8dfce; }
.mc-vignette-theme.sepia { background: #e8d9b8; border: 1px solid #d8c8a8; color: #3a2818; }

/* Police : « Aa Éé » et une phrase dans la police */
.mc-vignette-police { display: block; padding-right: 22px; color: var(--ms-encre); }
.mc-vignette-police .aa { display: block; font-size: 34px; line-height: 1.1; }
.mc-vignette-police .phrase { display: block; margin-top: 6px; line-height: 1.45; }
.police-cormorant { font-family: 'Cormorant Garamond', Garamond, serif; }
.police-lora { font-family: 'Lora', Georgia, serif; }
.police-crimson { font-family: 'Crimson Pro', Georgia, serif; }
.police-source { font-family: 'Source Serif 4', Georgia, serif; }
.police-ia-mono { font-family: 'IBM Plex Mono', monospace; }
.police-inter { font-family: 'Inter', sans-serif; }
.police-cormorant .phrase { font-size: 19px; }
.police-lora .phrase { font-size: 16px; }
.police-crimson .phrase { font-size: 18px; }
.police-source .phrase { font-size: 16px; }
.police-ia-mono .phrase { font-size: 14px; }
.police-inter .phrase { font-size: 15px; }

/* Taille : « Marie referma » à la taille proposée */
.mc-vignette-taille {
    display: flex;
    align-items: flex-end;
    height: 44px;
    padding-right: 22px;
    font-family: 'Lora', Georgia, serif;
    line-height: 1.2;
    color: var(--ms-encre);
}

/* Interligne : un paragraphe à l'interligne proposé */
.mc-vignette-interligne {
    display: block;
    height: 92px;
    overflow: hidden;
    padding-right: 22px;
    font-family: 'Lora', Georgia, serif;
    font-size: 13px;
    color: var(--ms-encre);
}

/* Largeur : une page avec des traits de la largeur proposée */
.mc-vignette-largeur {
    display: block;
    padding: 12px 10px 6px;
    margin-right: 22px;
    background: var(--mc-apercu);
    border: 1px solid var(--mc-apercu-bord);
}
.mc-vignette-largeur span { display: block; height: 4px; margin: 0 0 6px; background: var(--mc-trait); }

/* Aperçu en direct */
.mc-apercu {
    margin: 4px 0 26px;
    padding: 30px 24px 22px;
    background: var(--mc-apercu);
    border: 1px solid var(--mc-apercu-bord);
    border-top: 3px double var(--ms-or);
}
.mc-page .mc-apercu-legende { margin: 0 0 18px; text-align: center; font-family: var(--font-interface); font-size: 13px; line-height: 1.5; font-style: italic; color: var(--ms-gris); }
.mc-page .mc-apercu-legende.bas { margin: 20px 0 0; }
.mc-page #apercu-bloc p { margin: 0 0 18px; }
.mc-page #apercu-bloc p:last-child { margin: 0; }

/* ------- Abonnement : confirmation et annulation --------------------------- */

.mc-confirmation { padding-top: 70px; padding-bottom: 60px; text-align: center; }
.mc-confirmation.annule { padding-top: 80px; padding-bottom: 80px; }
.mc-confirmation .mc-ornement { margin-bottom: 12px; }
.mc-page .mc-grand-titre {
    margin: 0;
    font-family: var(--font-titre);
    font-weight: 600;
    font-size: clamp(40px, 5vw, 60px);
    line-height: 1.05;
    color: var(--ms-encre);
}
.mc-grand-titre .orne { color: var(--ms-or-texte); }
.mc-page .mc-confirmation-texte { margin: 20px auto 0; max-width: 560px; font-size: 22px; line-height: 1.55; }
.mc-page .mc-confirmation-note { margin: 12px auto 0; max-width: 560px; font-style: italic; color: var(--ms-gris); }
.mc-confirmation .mc-actions { justify-content: center; margin: 32px 0 0; }
.mc-confirmation.annule .mc-actions { margin-top: 34px; }
.mc-livre { display: flex; justify-content: center; margin: 0 0 22px; }
.mc-livre-couverture {
    width: 120px;
    height: 168px;
    box-sizing: border-box;
    padding: 12px 10px;
    background: #2E2A26;
    border-left: 7px solid rgba(0, 0, 0, .35);
    box-shadow: 3px 4px 0 rgba(26, 20, 16, .2);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    overflow: hidden;
}
.mc-livre-couverture .auteur { font-family: var(--font-capitales); font-size: 11px; line-height: 1.4; letter-spacing: .12em; color: #C6A15B; }
.mc-livre-couverture .titre {
    display: block;
    border-top: 1px solid #C6A15B;
    border-bottom: 1px solid #C6A15B;
    padding: 8px 0;
    font-family: var(--font-titre);
    font-weight: 600;
    font-size: 19px;
    line-height: 1.1;
    color: #F6F0DC;
    overflow-wrap: anywhere;
}
.mc-livre-couverture .fleur { font-size: 13px; line-height: 1.4; color: #C6A15B; }
.mc-livre img { width: 120px; height: 168px; object-fit: cover; box-shadow: 3px 4px 0 rgba(26, 20, 16, .2); }
.mc-telechargements { max-width: 498px; margin: 30px auto 0; padding: 16px 18px; background: var(--mc-fiche); border: 1px solid var(--mc-ligne-bord); }
.mc-page .mc-telechargements p { margin: 0 0 10px; font-family: var(--font-interface); font-size: 14px; line-height: 1.5; color: var(--ms-gris); }
.mc-telechargements .mc-actions { justify-content: center; gap: 10px; margin: 0; }
.mc-telechargements .mc-btn { padding: 7px 14px; font-size: 14px; }
.mc-separateur { margin: 0; text-align: center; font-size: 24px; line-height: 1.7; color: var(--ms-or); letter-spacing: 1em; }

/* ------- Ma lecture ------------------------------------------------------- */

.mc-lecture { padding-top: 36px; padding-bottom: 40px; max-width: 1096px; } /* 1000 px de contenu (maquette en content-box) */
.mc-page .mc-rubrique {
    margin: 0 0 18px;
    padding: 0 0 8px;
    font-family: var(--font-capitales);
    font-weight: 600;
    font-size: 30px;
    line-height: 1.6;
    letter-spacing: .06em;
    color: var(--ms-bleu);
    border-bottom: 1px solid var(--ms-or);
}
.mc-page .mc-rubrique.suite { margin-top: 44px; }
.mc-serie {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    padding: 20px 24px;
    margin: 0 0 22px;
    align-items: flex-start;
}
.mc-serie-couv { flex: 0 0 110px; }
.mc-serie-couv img { display: block; width: 110px; height: 150px; object-fit: cover; box-shadow: 2px 3px 0 rgba(26, 20, 16, .18); }
.mc-serie-livre {
    width: 110px;
    height: 150px;
    box-sizing: border-box;
    padding: 10px 9px;
    background: var(--ms-bleu-fond);
    border-left: 6px solid rgba(0, 0, 0, .22);
    box-shadow: 2px 3px 0 rgba(26, 20, 16, .18);
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}
.mc-serie-livre.bordeaux { background: var(--ms-bordeaux-fond); }
.mc-serie-livre .titre {
    display: block;
    border-top: 1px solid var(--ms-or);
    border-bottom: 1px solid var(--ms-or);
    padding: 8px 0;
    font-family: var(--font-titre);
    font-weight: 600;
    font-size: 16px;
    line-height: 1.15;
    color: var(--ms-sur-fond);
    overflow-wrap: anywhere;
}
.mc-serie-livre .fleur { display: block; margin-top: 8px; font-size: 13px; line-height: 1.4; color: var(--ms-or); }
.mc-serie-corps { flex: 1 1 280px; min-width: 0; }
.mc-page .mc-serie-titre { margin: 0 0 10px; font-family: var(--font-titre); font-weight: 600; font-size: 30px; line-height: 1.15; color: var(--ms-encre); }
.mc-tomes { margin: 0 0 16px; }
.mc-tome {
    display: inline-block;
    margin: 0 18px 4px 0;
    white-space: nowrap;
    font-family: var(--font-interface);
    font-size: 15px;
    line-height: 1.5;
    font-weight: 500;
    color: var(--ms-encre);
}
.mc-tome.en-cours { color: var(--ms-bordeaux); }
.mc-tome.pas-commence { color: var(--ms-gris); font-weight: 400; }
.mc-serie .mc-actions { gap: 10px; }
.mc-isole {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 22px;
    padding: 14px 20px;
    margin: 0 0 10px;
    background: var(--mc-fiche);
    border: 1px solid var(--mc-ligne-bord);
}
.mc-isole-titre { flex: 1 1 260px; min-width: 0; font-family: var(--font-titre); font-weight: 600; font-size: 24px; line-height: 1.2; }
.mc-isole-statut { font-family: var(--font-interface); font-size: 14px; line-height: 1.5; font-weight: 500; color: var(--ms-encre); }
.mc-isole-statut.en-cours { color: var(--ms-bordeaux); }
.mc-isole-statut.pas-commence { color: var(--ms-gris); font-weight: 400; }
.mc-page .mc-vide a { text-decoration: underline; }
.mc-vide { padding: 16px 20px; border: 1px dashed var(--mc-ligne-bord); background: var(--mc-fiche); }

/* ------- Mes achats -------------------------------------------------------- */

.mc-achats-entete { padding-top: 26px; padding-bottom: 6px; }
.mc-page .mc-achats-entete .mc-surtitre { margin: 0 0 4px !important; font-size: 18px; }
.mc-page .mc-achats-entete .mc-h1 { font-size: clamp(40px, 5vw, 64px); }
.mc-page .mc-achats-chapeau { margin: 10px 0 0; font-family: var(--font-titre); font-style: italic; font-size: 22px; line-height: 1.5; color: var(--ms-gris); }
.mc-achats-grille-section { padding-top: 34px; padding-bottom: 10px; }
.mc-achats-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 40px 30px; }
.mc-achat { display: flex; flex-direction: column; min-width: 0; }
.mc-achat-couv { display: flex; justify-content: center; align-items: flex-end; min-height: 250px; margin-bottom: 14px; }
.mc-achat-couv img { width: 180px; max-width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 2px; box-shadow: 0 4px 18px rgba(0, 0, 0, .18), 0 2px 4px rgba(0, 0, 0, .08); }
.mc-achat-couv .ex-libris { width: 180px; max-width: 100%; }
.mc-page .mc-achat-titre { margin: 0 0 2px; font-family: var(--font-titre); font-weight: 600; font-size: 22px; line-height: 1.2; }
.mc-page .mc-achat-titre a { color: var(--ms-encre); text-decoration: none; }
.mc-page .mc-achat-titre a:hover { color: var(--ms-bordeaux); }
.mc-page .mc-achat-auteur { margin: 0 0 4px; font-size: 16px; line-height: 1.5; font-style: italic; color: var(--ms-gris); }
.mc-page .mc-achat-date { margin: 0 0 12px; font-family: var(--font-interface); font-size: 13px; line-height: 1.5; color: var(--ms-gris); }
.mc-achat-actions { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.mc-page .mc-achat-lire {
    display: block;
    padding: 8px 18px;
    border-radius: 2px;
    text-align: center;
    text-decoration: none;
    font-family: var(--font-capitales);
    font-size: 19px;
    line-height: 1.3;
    letter-spacing: .06em;
    background: var(--ms-bleu-fond);
    color: var(--ms-sur-fond);
    border: 1px solid var(--ms-bleu-fond);
}
.mc-page .mc-achat-lire:hover { background: var(--ms-bleu-fond-fonce); color: var(--ms-sur-fond); }
.mc-achat-formats { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.mc-page .mc-achat-formats a {
    padding: 4px 10px;
    border: 1px solid var(--mc-trait);
    color: var(--ms-encre);
    text-decoration: none;
    border-radius: 2px;
    font-family: var(--font-interface);
    font-size: 13px;
    line-height: 1.5;
}
.mc-page .mc-achat-formats a:hover { border-color: var(--ms-encre); }
.mc-page .mc-achats-sep { margin: 30px 0; text-align: center; font-size: 26px; line-height: 1.7; color: var(--ms-or); letter-spacing: 1em; }
.mc-commandes { padding-top: 0; padding-bottom: 10px; }
.mc-page .mc-commandes-titre { margin: 0; font-family: var(--font-titre); font-weight: 600; font-size: 40px; line-height: 1.1; color: var(--ms-encre); }
.mc-page .mc-commandes-chapeau { margin: 6px 0 20px; font-family: var(--font-titre); font-style: italic; font-size: 21px; line-height: 1.5; color: var(--ms-gris); }
.mc-commandes-corps { display: flex; flex-wrap: wrap; gap: 36px; align-items: flex-start; }
.mc-commandes-liste { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.mc-commande {
    background: var(--mc-fiche);
    border: 1px solid var(--mc-cadre);
    outline: 1px solid var(--mc-cadre-pale);
    outline-offset: 3px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px 20px;
    padding: 14px 18px;
}
.mc-commande > div:first-child { min-width: 0; }
.mc-page .mc-commande-titre { margin: 0; font-family: var(--font-titre); font-weight: 600; font-size: 22px; line-height: 1.2; }
.mc-page .mc-commande-meta { margin: 2px 0 0; font-size: 16px; line-height: 1.5; font-style: italic; color: var(--ms-gris); }
.mc-commande-statut { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.mc-page .mc-commande-statut a { text-decoration: underline; font-size: 17px; color: var(--ms-bordeaux); white-space: nowrap; }
.mc-etat {
    display: inline-block;
    padding: 4px 11px;
    border-radius: 2px;
    border: 1px solid transparent;
    font-family: var(--font-interface);
    font-size: 13px;
    line-height: 1.5;
    font-weight: 500;
    font-style: normal;
    white-space: nowrap;
}
.mc-etat--en_attente_paiement { color: var(--ms-gris); background: transparent; border-color: var(--ms-gris); }
.mc-etat--paye, .mc-etat--en_production { color: var(--ms-encre); background: var(--mc-or-pale); border-color: var(--mc-or-pale); }
.mc-etat--expedie, .mc-etat--livre { color: var(--ms-sur-fond); background: var(--ms-bleu-fond); border-color: var(--ms-bleu-fond); }
.mc-etat--erreur, .mc-etat--annule { color: var(--ms-sur-fond); background: var(--ms-bordeaux-fond); border-color: var(--ms-bordeaux-fond); }
.mc-commandes-marge { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.mc-commandes-marge .note {
    padding-left: 16px;
    border-left: 2px solid var(--ms-or);
    font-family: var(--font-titre);
    font-style: italic;
    font-size: 19px;
    line-height: 1.45;
    color: var(--ms-bleu);
}
.mc-commandes-marge .etats { display: block; margin-top: 10px; }
.mc-commandes-marge .mc-etat { margin: 0 6px 8px 0; padding: 3px 10px; font-weight: 400; white-space: normal; }
.mc-achats-vide { padding-top: 34px; padding-bottom: 10px; }
.mc-achats-vide .mc-vide p + p { margin-top: 6px; }

@media (max-width: 640px) {
    .mc-commandes .mc-commandes-titre { font-size: 34px; }
}

/* Un libellé de bouton trop long pour un téléphone passe à la ligne au lieu d'être coupé */
.mc-page .mc-btn, .mc-page .mc-btn-bordeaux { white-space: normal; max-width: 100%; }

/* Couverture ex-libris : son titre est un h1, que manuscrit.css peint à l'encre du thème
   (illisible sur le parchemin en thème sombre) ; il garde la couleur de sa couverture. */
:where(.mc-achat-couv) .ex-libris-titre { color: inherit; }

/* Mes achats : interligne du texte de la maquette (1,6) dans l'en-tête */
.mc-achats-entete .mc-surtitre, .mc-achats-entete .mc-achats-chapeau { line-height: 1.6; }
/* Maquettes Profil, Préférences, Ma lecture, Mes achats, Abonnement : texte à l'interligne 1,6
   (les pages de connexion gardent 1,7) ; Mes achats en 18 px */
.mc-page.mc-interligne { line-height: 1.6; }
.mc-page.mc-achats-page { font-size: 18px; }