@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

* { box-sizing: border-box; margin: 0; padding: 0; }

html { overflow-x: hidden; }

body {
    font-family: 'Inter', sans-serif;
    background-color: #f4f6f8;
    color: #333333;
    line-height: 1.5;
    overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

.conteneur-site {
    max-width: 1200px;
    margin: 0 auto;
    background-color: #ffffff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ---------- HEADER ---------- */

/* ⚠️ L'EN-TETE RESPIRE UN PEU PLUS. Son texte etait a 0,88 rem et son
   rembourrage a 15 px : sur l'ecran d'un telephone, les quatre entrees
   de navigation se lisaient en plissant les yeux. On ne touche pas a la
   hauteur de la barre pour rien — c'est de la place prise au contenu —
   mais deux points de police et quelques pixels de rembourrage se
   payent une fois et se lisent a chaque page. */
header.site {
    background-color: #d1ece5;
    padding: 18px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #bce2d7;
    flex-wrap: wrap;
    gap: 12px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #1b4d3e;
    font-weight: 700;
    font-size: 1.18rem;
}

.logo svg { width: 26px; height: 26px; fill: #1b4d3e; flex-shrink: 0; }

nav.principale { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

nav.principale a {
    color: #2c5e50;
    font-size: 0.98rem;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: 4px;
    transition: background-color 0.2s;
}
nav.principale a:hover, nav.principale a.active { background-color: rgba(255,255,255,0.6); color: #0f382c; text-decoration: none; }
nav.principale a.bouton, nav.principale a.bouton:hover { color: #fff; }
nav.principale a.bouton.discret, nav.principale a.bouton.discret:hover { color: #1b4d3e; }

.bouton {
    display: inline-block;
    background: #1b4d3e;
    color: #fff;
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 0.88rem;
}
.bouton:hover { background: #163f33; text-decoration: none; }

.bouton.discret {
    background: rgba(255,255,255,0.6);
    color: #1b4d3e;
    border: 1px solid rgba(27,77,62,0.2);
}
.bouton.discret:hover { background: rgba(255,255,255,0.9); }

.bouton.rouge { background: #82b8a9; color: #fff; }
.bouton.rouge:hover { background: #6da293; }

/* ---------- HERO ---------- */

.hero {
    background: linear-gradient(135deg, #e8f5f1 0%, #f4fbf9 100%);
    padding: 32px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e1efe9;
    flex-wrap: wrap;
    gap: 24px;
}

.hero-text { max-width: 450px; }

.hero h1 {
    font-size: 1.7rem;
    color: #1b4d3e;
    margin-bottom: 18px;
    line-height: 1.25;
    font-weight: 700;
}

.recherche { position: relative; max-width: 380px; display: flex; }

.recherche input[type="text"] {
    width: 100%;
    padding: 12px 40px 12px 16px;
    border: 1px solid #b0d8ce;
    border-radius: 6px;
    font-size: 0.9rem;
    outline: none;
    background-color: #ffffff;
    color: #444;
    font-family: 'Inter', sans-serif;
}
.recherche input[type="text"]::placeholder { color: #8faea5; }

.recherche .icone-recherche {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    fill: #689689;
    pointer-events: none;
}

.recherche button.bouton { display: none; }

.hero-vitrine {
    background: #ffffff;
    padding: 16px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    display: flex;
    gap: 16px;
    border: 1px solid #e2eee9;
}

.couverture-vedette { width: 92px; text-align: center; display: block; }
.couverture-vedette:hover { text-decoration: none; }

.couverture-vedette .image {
    width: 100%;
    height: 128px;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    margin-bottom: 6px;
    background: linear-gradient(160deg, #1b4d3e 0%, #4a7266 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.couverture-vedette .image svg { width: 26px; height: 26px; }
.couverture-vedette .titre { font-size: 0.7rem; font-weight: 600; color: #333; line-height: 1.3; }

/* ---------- CONTENU / MAIN LAYOUT ---------- */

.disposition-catalogue {
    display: flex;
    padding: 30px 24px;
    gap: 30px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.barre-categories { width: 200px; flex-shrink: 0; align-self: flex-start; }

.barre-categories h3 {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #2c5e50;
    margin-bottom: 14px;
    font-weight: 700;
}

.liste-categories { list-style: none; display: flex; flex-direction: column; gap: 8px; }

.pilule-categorie {
    display: block;
    width: 100%;
    padding: 10px 14px;
    background: #ffffff;
    border: 1px solid #d8e6e1;
    border-radius: 20px;
    text-align: center;
    color: #335c50;
    font-weight: 500;
    font-size: 0.88rem;
    cursor: pointer;
    transition: all 0.2s;
}
.pilule-categorie:hover { background-color: #eaf5f2; border-color: #b3d6cb; text-decoration: none; }
.pilule-categorie.actif { background: #1b4d3e; color: #fff; border-color: #1b4d3e; }

.zone-contenu { flex-grow: 1; flex-basis: 0; min-width: 0; }

.section-pleine-largeur {
    padding: 0 24px 30px;
}

.section-titre { margin-bottom: 40px; }

.section-titre h2 {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #1b4d3e;
    margin-bottom: 18px;
    font-weight: 700;
}

/* ---------- Grille "Sélection du Mois" ---------- */

/* ⚠️ QUATRE COLONNES AU PLUS, ET DES PALIERS ECRITS. En `auto-fit`,
   un grand ecran en poserait cinq ou six, et des boites a image
   deviennent alors des timbres-poste alignes ; sur un telephone, la
   meme regle retombe a une seule colonne et l'on empile de grandes
   images. Les paliers sont donc nommes — deux, trois, quatre — et le
   nombre de livres suit : huit, soit deux lignes pleines. */
.grille-mois {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
/* ⚠️ 820 ET PAS 700, ET LE CHIFFRE EST MESURE. La grille ne vit pas
   dans la fenetre mais dans `.zone-contenu`, a cote d'une barre de
   categories de 200 px : le contenu vaut la fenetre moins 278 px
   environ. A 700 px de fenetre, trois colonnes donnaient une couverture
   de 99 px de large — plus PETITE que les 150 px d'avant, alors qu'on
   les voulait plus grandes. A 820, elle fait 139 px, et deux colonnes
   en dessous en donnent 177. */
@media (min-width: 820px) {
    .grille-mois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 980px) {
    .grille-mois { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.carte-livre-mois {
    background: #f8faf9;
    border: 1px solid #e1ebe7;
    border-radius: 6px;
    padding: 14px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.carte-livre-mois:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(27,77,62,0.1); text-decoration: none; }

/* ⚠️ LE FORMAT A4, ET `aspect-ratio` PLUTOT QU'UNE HAUTEUR EN PIXELS.
   Une couverture de livre est un A4 ou presque — 1 pour 1,414 — et
   c'est ce rapport qui la fait reconnaitre d'un coup d'oeil. Fixee a
   210 px de haut, la boite gardait la meme hauteur quelle que soit la
   largeur de la colonne : sur un grand ecran l'image restait petite
   au milieu d'une carte large, sur un telephone elle debordait du
   rapport. Avec le rapport, elle grandit AVEC sa colonne.

   Et le plafond de 150 px est retire : c'est lui qui empechait la
   couverture de remplir la carte, donc de se voir. */
.carte-livre-mois .couverture {
    width: 100%;
    aspect-ratio: 1 / 1.414;
    object-fit: cover;
    border-radius: 3px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.12);
    margin-bottom: 8px;
    background: linear-gradient(160deg, #1b4d3e 0%, #4a7266 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.carte-livre-mois .couverture svg { width: 30px; height: 30px; }

.carte-livre-mois .titre {
    font-size: 0.82rem;
    font-weight: 600;
    color: #222;
    margin-bottom: 2px;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.carte-livre-mois .sous-titre { font-size: 0.7rem; color: #689689; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* ---------- Grille "Dernières acquisitions" ---------- */

.grille-recentes {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.carte-livre-recente {
    background: #f8faf9;
    border: 1px solid #e1ebe7;
    border-radius: 6px;
    padding: 12px 8px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.carte-livre-recente:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(27,77,62,0.1); text-decoration: none; }

/* ⚠️ PLUS HAUTE, ET AU MEME RAPPORT QUE LA SELECTION. Elle faisait
   110x150 — un rapport de 1,36, ni carre ni A4, et surtout trop petite
   pour qu'une couverture se lise. Le plafond de 110 px l'empechait de
   remplir sa carte : c'est lui qui bornait la taille, pas la colonne.

   `aspect-ratio` plutot qu'une hauteur en pixels, pour la meme raison
   que la selection : la boite grandit AVEC sa colonne, au lieu de
   garder la meme hauteur quelle que soit la largeur disponible. */
.carte-livre-recente .couverture {
    width: 100%;
    /* ⚠️ UN PLAFOND, ET PAS CELUI D'AVANT. Sans aucun, la couverture
       atteignait 201 px de large a 1280 px de fenetre — PLUS GRANDE que
       celle de la « Selection du moment » (187 px), qui est pourtant la
       rangee mise en avant. Les acquisitions sont secondaires : elles
       doivent respirer davantage qu'avec leurs 110 px, pas davantage
       que la selection. Mesure dans Chrome avant et apres. */
    max-width: 150px;
    aspect-ratio: 1 / 1.414;
    border-radius: 3px;
    margin-bottom: 6px;
    background: linear-gradient(160deg, #1b4d3e 0%, #4a7266 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.carte-livre-recente .couverture svg { width: 24px; height: 24px; }

.carte-livre-recente .titre {
    font-size: 0.74rem;
    font-weight: 600;
    color: #222;
    margin-bottom: 2px;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.carte-livre-recente .auteur { font-size: 0.64rem; color: #777; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.carte-livre-recente .stats { font-size: 0.6rem; color: #689689; }

/* ---------- Fiche livre ---------- */

main.page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px 24px 50px;
}

.fiche-livre {
    background: #f8faf9;
    border: 1px solid #e1ebe7;
    border-radius: 8px;
    padding: 28px;
}

.fiche-entete {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 2px solid #d1ece5;
    padding-bottom: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.fiche-entete .numero-fiche { font-size: 0.75rem; color: #689689; }
.fiche-entete h1 { color: #1b4d3e; }

.apercu-pdf {
    border: 1px solid #e1ebe7;
    border-radius: 8px;
    overflow: hidden;
    background: #eaf5f2;
    margin: 20px 0;
}
.apercu-pdf iframe { display: block; width: 100%; height: 560px; border: none; }

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

.carte-formulaire {
    max-width: 420px;
    margin: 40px auto;
    background: #f8faf9;
    border: 1px solid #e1ebe7;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    padding: 32px;
    text-align: center;
}
.carte-formulaire h2 { color: #1b4d3e; margin-bottom: 8px; }
.carte-formulaire form { text-align: left; }

.champ { margin-bottom: 16px; }
.champ label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 0.88rem; color: #2c5e50; }
.champ input, .champ select, .champ textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d8e6e1;
    border-radius: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
}
.champ textarea { min-height: 100px; resize: vertical; }

.erreur { background: #fbeaea; color: #a14545; padding: 10px 14px; border-radius: 6px; margin-bottom: 16px; font-size: 0.88rem; }
.succes { background: #eaf5f2; color: #1b4d3e; padding: 10px 14px; border-radius: 6px; margin-bottom: 16px; font-size: 0.88rem; }

/* ---------- Tableaux (admin / stats) ---------- */

table.tableau {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid #e1ebe7;
    border-radius: 8px;
    overflow: hidden;
}
table.tableau th, table.tableau td {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid #e1ebe7;
    font-size: 0.9rem;
}
table.tableau th {
    background: #1b4d3e;
    color: #fff;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
table.tableau tr:last-child td { border-bottom: none; }
table.tableau tr:hover td { background: #eaf5f2; }

.badge {
    display: inline-block;
    background: #d1ece5;
    color: #1b4d3e;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
}

.grille-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 30px; }
.carte-stat { background: #f8faf9; border: 1px solid #e1ebe7; border-left: 4px solid #82b8a9; border-radius: 8px; padding: 18px; }
.carte-stat .valeur { font-size: 2rem; font-weight: 700; color: #1b4d3e; display: block; }
.carte-stat .label { font-size: 0.7rem; text-transform: uppercase; color: #689689; letter-spacing: 0.05em; }

/* ---------- FOOTER ---------- */

footer.site {
    margin-top: auto;
    background-color: #dcece8;
    padding: 26px 24px 15px;
    border-top: 1px solid #cbe2dc;
    font-size: 0.8rem;
    color: #4a6b61;
}

.footer-interieur {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 24px;
    margin-bottom: 20px;
}

.footer-interieur h4 { color: #1b4d3e; font-size: 0.82rem; margin-bottom: 10px; font-weight: 700; }
.footer-interieur a { display: block; color: #4a6b61; margin-bottom: 6px; }
.footer-interieur a:hover { text-decoration: underline; }

.footer-bas {
    text-align: center;
    padding-top: 14px;
    border-top: 1px solid #c4ded7;
    font-size: 0.75rem;
    color: #6b8c82;
}

/* ---------- Utilitaires ---------- */

.vide { text-align: center; padding: 50px 20px; color: #689689; }

.avis-connexion {
    background: #f8faf9;
    border: 1px dashed #b3d6cb;
    border-radius: 8px;
    padding: 18px 22px;
    margin-bottom: 24px;
}

@media (max-width: 600px) {
    .hero-vitrine { display: none; }
    .disposition-catalogue { flex-direction: column; }
    .barre-categories { width: 100%; }
    /* ⚠️ SANS CETTE LIGNE, LA ZONE DE CONTENU FAISAIT 186 px SUR UN
       TELEPHONE — tout le catalogue, pas seulement la grille. En
       `flex-direction: column`, le `flex-basis: 0` de `.zone-contenu`
       porte sur la HAUTEUR, et c'est l'`align-items: flex-start` du
       parent qui decide alors de sa largeur : il la rabat sur celle de
       son contenu. La barre, elle, avait son `width: 100%` et paraissait
       donc normale — rien ne signalait le defaut.

       Trouve en mesurant la grille dans Chrome le 5 novembre 2026 : a
       480 px de fenetre, la barre prenait 432 px et le contenu 186. */
    .zone-contenu { width: 100%; }
    .liste-categories { flex-direction: row; flex-wrap: wrap; }
    .pilule-categorie { flex: 1; min-width: 90px; }
}

/* ⚠️ `.grille-mois` N'EST PLUS REGLEE ICI. Ses paliers sont declares
   une seule fois, en `min-width`, avec la regle elle-meme. Ces deux
   surcharges en `max-width` venaient PLUS BAS dans la feuille : a poids
   egal, c'est la derniere ecrite qui gagne, et elles ramenaient donc
   tout ce qui est sous 900 px a deux colonnes — y compris les paliers
   de trois et quatre qu'on venait d'ecrire. Le defaut ne se lit pas
   dans la regle qu'on modifie : il est cent lignes plus bas. */
@media (max-width: 900px) {
    .grille-recentes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .hero h1 { font-size: 1.4rem; }
    .fiche-livre { padding: 18px; }
    .apercu-pdf iframe { height: 400px; }
    .grille-recentes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ⚠️ DEUX COLONNES SOUS 480 px, SINON LES COUVERTURES RETRECISSENT.
   A trois colonnes dans 342 px de grille, chacune faisait 87 px de
   large — MOINS que les 110 px d'avant, alors qu'on voulait leur
   donner plus de place. Deux colonnes y rendent 138 px. */
@media (max-width: 480px) {
    .grille-recentes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===== Livres payants ===== */
.couverture-vedette .image, .carte-livre-mois .couverture, .carte-livre-recente .couverture { position: relative; }
.badge-prix {
    position: absolute; top: 6px; left: 6px; z-index: 2;
    background: #1b4d3e; color: #fff; font-size: 0.68rem; font-weight: 700;
    padding: 2px 7px; border-radius: 10px; line-height: 1.4; white-space: nowrap;
}
.badge.ok { background: #d1ece5; color: #1b4d3e; }
.badge.attente { background: #fdf0d5; color: #8a5a00; }
.badge.ko { background: #fbeaea; color: #a14545; }

/* ============================================================
   UNE LIGNE « INTITULÉ → VALEUR »
   ============================================================
   ⚠️ CETTE CLASSE A DÉJÀ ÉTÉ POSÉE SANS RÈGLE, côté FOCUS Akademi :
   l'intitulé et la valeur se lisaient alors comme une seule phrase
   — « Dernière connexion 5 novembre 2026 » —, et sur une fiche c'est
   justement la colonne des valeurs qu'on parcourt des yeux. Une classe
   absente ne se signale jamais : il avait fallu une capture d'écran
   pour la voir. On ne refait pas la même.

   `space-between` met l'intitulé à gauche, la valeur à droite ; le
   `gap` empêche les deux de se toucher quand la ligne est serrée. */
.compte-ligne {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 18px;
    margin: 0 0 8px;
    font-size: 0.92rem;
}
.compte-ligne > span { color: #689689; }
.compte-ligne > strong { text-align: right; }

/* ============================================================
   « MON COMPTE » — DEUX BLOCS, ET AUCUN TEXTE CENTRÉ
   ============================================================
   ⚠️ CET ÉCRAN ÉTAIT UNE `.carte-formulaire`, et c'était le mauvais
   habit. Cette classe est une boîte de 420 px, centrée dans la page,
   `text-align: center` : elle convient à un formulaire de connexion —
   trois champs et un bouton — et pas à un écran qui porte une fiche, un
   état d'abonnement et un formulaire. Les intitulés et les valeurs s'y
   lisaient au milieu, et la fiche n'avait donc plus de colonne à
   parcourir des yeux.

   Deux blocs côte à côte au-delà de 820 px, l'un sous l'autre en
   dessous : la fiche se LIT, le formulaire se REMPLIT, et ce ne sont
   pas les mêmes gestes.

   `align-items: start` — sans lui, le plus court des deux blocs
   s'étirerait à la hauteur de l'autre, et son fond descendrait loin
   sous son dernier mot. */
.grille-compte {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: start;
}
@media (min-width: 820px) {
    .grille-compte { grid-template-columns: 1fr 1fr; }
}

.bloc-compte {
    background: #f8faf9;
    border: 1px solid #e1ebe7;
    border-radius: 8px;
    padding: 22px 24px;
    /* Dit explicitement, et pas seulement herite : cet ecran a deja
       ete centre une fois par une classe voisine. */
    text-align: left;
}
.bloc-compte h3 {
    margin: 0 0 14px;
    font-size: 1.02rem;
    color: #1b4d3e;
}
.bloc-compte form { text-align: left; }
.bloc-compte .champ:last-of-type { margin-bottom: 20px; }

.note-compte {
    font-size: 0.84rem;
    color: #689689;
    line-height: 1.5;
    margin: 10px 0 14px;
}

/* ============================================================
   LE PANIER
   ============================================================
   ⚠️ CES CLASSES SONT DEFINIES ICI, et pas seulement posees dans le
   gabarit. Ce projet a deja pose `.compte-ligne` sans aucune regle —
   l'intitule et la valeur se lisaient alors comme une seule phrase, et
   il avait fallu une capture d'ecran pour le voir. Une classe absente
   ne se signale jamais. */
.panier-total {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1b4d3e;
    white-space: nowrap;
}
.panier-auteur {
    font-size: 0.82rem;
    color: #689689;
    margin-top: 2px;
}
/* Les deux gestes cote a cote — regler, retirer — et sur une seule
   ligne : `nowrap` empeche « Retirer » de passer sous « Regler », ou il
   se confondrait avec la ligne suivante du tableau. */
.panier-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: nowrap;
    white-space: nowrap;
}
.panier-retirer { margin: 0; }

/* Les deux gestes de la fiche : regler, ou garder pour plus tard. */
.fiche-achat-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.fiche-achat-form { margin: 0; }

/* ============================================================
   L'ICONE DE « MON COMPTE », ET LE BLOC REPLIE DU MOT DE PASSE
   ============================================================
   L'icone est choisie par la MESURE, pas a l'oeil : sur ce fond vert
   pale (#d1ece5), 61 % des pixels dessines de celle-ci depassent 3:1,
   contre 38 % pour l'autre. L'inverse sur la barre bleu nuit de FOCUS
   Akademi, qui a donc recu l'autre. */
.lien-compte {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.icone-compte {
    width: 26px;
    height: 26px;
    /* `block` : sans lui, l'image est traitee comme du texte et son
       alignement sur la ligne de base ajoute quelques pixels sous
       elle — la barre grandit sans qu'on voie pourquoi. */
    display: block;
    flex-shrink: 0;
}

/* ⚠️ `<details>`, ET PAS UN BOUTON AVEC UNE CLASSE. L'element se replie
   sans une ligne de script, s'ouvre au clavier, et reste dans le bon
   etat meme si aucun script n'arrive — ce qui, sur une liaison
   haitienne, dure plusieurs secondes. */
.depli-mdp > summary {
    cursor: pointer;
    font-size: 1.02rem;
    font-weight: 600;
    color: #1b4d3e;
    /* Le marqueur par defaut est garde : c'est lui qui dit que la
       chose s'ouvre. Le retirer obligerait a le redessiner. */
    list-style-position: outside;
    margin-bottom: 12px;
}
.depli-mdp > summary:hover { text-decoration: underline; }
.depli-mdp[open] > summary { margin-bottom: 14px; }

/* ⚠️ LE MOT DE PASSE EST EN PIED DE FICHE, et le trait le dit. Posé à
   la suite des lignes d'information sans rien pour l'en séparer, le
   sommaire du `<details>` se lisait comme une ligne de plus de la
   fiche — « Nom », « Adresse e-mail », « Changer mon mot de passe » —
   alors que c'est une ACTION, pas une information. */
.bloc-mdp-pied {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #e1ebe7;
}