/* =======================================================================
   UNIFIED STYLE 2026 — Correctifs de cohérence globale
   Chargé en DERNIER (après main.css) : ce fichier ne redéfinit JAMAIS les
   composants déjà possédés par main.css (§ RESTYLE 2026 — .btn, .btn-*,
   .pagination, .form-control, .annonce/.tddiv/.mini-card/.news-card/etc.)
   Il ne couvre que ce qui n'est nulle part ailleurs : styles inline
   obsolètes dans les fichiers PHP, composants sans définition centrale
   (alertes, mynav, recherche plein écran, tableaux, modales), et
   correctifs de bugs CSS ponctuels (barre de vote, couleurs hors palette).
   Utilise les mêmes variables que main.css (:root défini dans main.css).
   ======================================================================= */

/* -----------------------------------------------------------------------
   1. CHAMPS DE FORMULAIRE BRUTS — .form-control est déjà couvert par
   main.css ; ceci couvre les <input>/<select>/<textarea> sans cette
   classe (formulaires legacy du site).
   ----------------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="date"],
input[type="number"],
select,
textarea {
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--border) !important;
  padding: 10px 14px !important;
  font-size: 0.92rem !important;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
  border-color: var(--brand-accent-2) !important;
  box-shadow: 0 0 0 3px rgba(44, 177, 140, 0.15) !important;
  outline: none !important;
}

/* -----------------------------------------------------------------------
   2. ALERTES — la classe réellement générée par fonction.php/config.ini.php
   est "alert error" ou "alert verify" (valeurs de $clerror/$clsuccess),
   pas ".clerror"/".clsuccess" (ce sont des noms de variables PHP).
   ----------------------------------------------------------------------- */
.alert {
  border-radius: var(--radius-sm) !important;
  padding: 12px 16px !important;
  font-size: 0.9rem !important;
  border: 1px solid transparent !important;
  box-shadow: var(--shadow-sm) !important;
}
.alert.error {
  background-color: #fef2f2 !important;
  color: #b91c1c !important;
  border-color: #fecaca !important;
}
.alert.verify {
  background-color: #f0fdf4 !important;
  color: #166534 !important;
  border-color: #bbf7d0 !important;
}

/* -----------------------------------------------------------------------
   3. LECTEUR AUDIO — pas d'habillage : juste le lecteur natif du
   navigateur, sans boîte de fond/bordure derrière (demandé), en contexte
   clair comme sombre.
   ----------------------------------------------------------------------- */
audio {
  outline: none !important;
}

/* -----------------------------------------------------------------------
   4. OMBRES — neutralise le style inline .shadow de footer.php
   ----------------------------------------------------------------------- */
.shadow {
  box-shadow: var(--shadow-sm) !important;
}

/* -----------------------------------------------------------------------
   5. CARTES VOIX (compte_voix.php) — pas de définition centrale ailleurs
   ----------------------------------------------------------------------- */
.voixcell {
  background-color: var(--surface) !important;
  padding: 16px !important;
  border-radius: var(--radius-md) !important;
  text-align: center !important;
  font-size: 0.9em !important;
  box-shadow: var(--shadow-sm) !important;
  border: 1px solid var(--border) !important;
  margin: 20px 0 !important;
  transition: box-shadow .25s var(--ease), transform .25s var(--ease) !important;
}
.voixcell:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-2px) !important;
}

/* Lecteur d'enregistrement (modale "Enregistrer un son") */
.lecteur {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 10px !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 12px !important;
  background: var(--surface-alt) !important;
  border: 1px solid var(--border) !important;
}
.lecteur label {
  margin-bottom: 0 !important;
}

/* Boutons ronds d'enregistrement — composent avec .btn, ne redéfinissent
   que la forme circulaire (couleur/fond viennent de .btn-info/.btn-danger
   déjà posés dans le markup). Largeur ET hauteur fixes + centrage flex :
   sans hauteur explicite, le padding hérité de .btn étirait le bouton en
   ovale au lieu d'un cercle (width forcé à 50px, height libre). */
.record,
.downloadrecord {
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

/* -----------------------------------------------------------------------
   6. COULEURS OBSOLÈTES — styles inline hérités remplacés par la palette
   de marque (couleurs codées en dur dans les .php, avant l'introduction
   des variables CSS). Sélecteur d'attribut sans nom de balise : ces
   couleurs apparaissent sur des <span>/<a>/<b>/<i>/<small>/<div>/<h1>/<h4>
   selon les pages — un ciblage par balise ratait plus de la moitié des cas.
   ----------------------------------------------------------------------- */
[style*="#36A18B"],
[style*="#138496"],
[style*="#43B5AD"] {
  color: var(--brand-accent-2) !important;
}

[style*="#FD6B27"] {
  color: #f59e0b !important;
}

/* -----------------------------------------------------------------------
   7. NAVIGATION COMPTE (mynav) — markup réel : Bootstrap navbar avec
   .nav-item/.nav-link (voir compte.php et al.), pas de simples <a>.
   ----------------------------------------------------------------------- */
.mynav {
  background-color: var(--brand-primary) !important;
  border-radius: 10px !important;
  padding: 8px 12px !important;
  box-shadow: var(--shadow-sm) !important;
  color: #fff;
}
/* Sur annonce_detail/article_detail/faq/portfolio.php (#portfolio),
   .mynav n'entoure qu'un simple texte ("Autres annonces") sans .nav-link :
   pas de barre violette ici, juste un titre de section centré, en
   majuscule, sans fond. */
#portfolio .mynav {
  background: transparent !important;
  box-shadow: none !important;
  padding: 10px 0 !important;
}
#portfolio .mynav .navbar-nav {
  justify-content: center;
}
#portfolio .mynav .nav-item {
  color: var(--brand-primary) !important;
  text-transform: uppercase;
  font-size: 1.3em;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.mynav .nav-link {
  color: rgba(255, 255, 255, 0.85) !important;
  font-weight: 500 !important;
  border-radius: 6px !important;
  padding: 8px 14px !important;
  transition: all 0.2s ease !important;
}
.mynav .nav-link:hover {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
}
.mynav .nav-item.active .nav-link {
  color: #ffffff !important;
  background-color: var(--brand-accent-2) !important;
  border-radius: 6px !important;
}
.mynav .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.3) !important;
}
.mynav .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255, 255, 255, 0.85)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* -----------------------------------------------------------------------
   8. BANNIÈRES — la hauteur mobile par défaut de .banner est déjà gérée
   par main.css (hauteur fluide sous 575px). Ici on ne traite que le cas
   des bannières à hauteur inline réduite (style="height: 150px"), qui
   coupaient le texte sur petit écran.
   ----------------------------------------------------------------------- */
.banner[style*="height: 150px"] {
  height: auto !important;
  min-height: 220px !important;
}
@media (max-width: 575px) {
  .banner[style*="height: 150px"] {
    min-height: 170px !important;
  }
}

/* -----------------------------------------------------------------------
   9. TABLEAUX — pas de définition centrale ailleurs
   ----------------------------------------------------------------------- */
.table {
  border-radius: var(--radius-md) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-sm) !important;
}
.table td, .table th {
  padding: 12px 16px !important;
  border-color: var(--surface-alt) !important;
  vertical-align: middle !important;
}
.table h4 {
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
  margin-bottom: 4px !important;
}
.table b {
  color: var(--ink) !important;
}

/* -----------------------------------------------------------------------
   10. MODALES — pas de définition centrale ailleurs
   ----------------------------------------------------------------------- */
.modal-content {
  border-radius: var(--radius-md) !important;
  border: none !important;
  box-shadow: var(--shadow-md) !important;
}
.modal-header {
  border-bottom: 1px solid var(--surface-alt) !important;
  padding: 16px 20px !important;
}
.modal-footer {
  border-top: 1px solid var(--surface-alt) !important;
  padding: 12px 20px !important;
}
.modal-body {
  padding: 20px !important;
}

/* -----------------------------------------------------------------------
   11. RECHERCHE PLEIN ÉCRAN (#qnimate/#search, header.php) — tout le
   composant était dupliqué dans un <style> inline embarqué dans
   header.php (chargé sur presque toutes les pages) : déplacé ici, seule
   définition, avec les couleurs héritées (#eee, #888, #138496) remplacées
   par les tokens de marque.
   ----------------------------------------------------------------------- */
#qnimate {
  background-color: var(--surface-alt) !important;
}
.off {
  display: none;
  z-index: 99999;
}
.popup-box-on {
  display: block !important;
}
#search {
  background-color: var(--surface) !important;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  transition: all 0.5s ease-in-out 0s;
  width: 100%;
  z-index: 99999;
}
#search.open {
  opacity: 1;
  transform: translate(0px, 0px) scale(1, 1);
}
#search .close {
  color: var(--brand-primary) !important;
  font-size: 40px;
  opacity: 1;
  padding: 10px 17px;
  position: fixed;
  right: 15px;
  top: 15px;
}
button.close {
  background: transparent none repeat scroll 0 0;
  border: 0 none;
  cursor: pointer;
}
.close {
  float: right;
  font-weight: bold;
  line-height: 1;
  text-shadow: 0 1px 0 #fff;
}
#search input[type="text"] {
  background-color: var(--surface-alt) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  color: var(--ink) !important;
  font-size: 32px !important;
  margin: -51px auto 0;
  outline: medium none;
  padding-left: 30px;
  padding-right: 30px;
  position: absolute;
  text-align: center;
  top: 50%;
  width: 100%;
}
#search .btn {
  left: 50%;
  margin-top: 60px;
  padding: 10px 50px;
  position: absolute;
  top: 50%;
  transform: translateX(-50%);
}

/* -----------------------------------------------------------------------
   12. RESPONSIVE — ajustements finaux propres à ce fichier
   ----------------------------------------------------------------------- */
@media (max-width: 768px) {
  .mynav {
    padding: 6px 8px !important;
  }
  .mynav .nav-link {
    padding: 6px 10px !important;
    font-size: 0.85rem !important;
  }
  .voixcell {
    padding: 12px !important;
    margin: 15px 0 !important;
  }
  #search input[type="text"] {
    font-size: 22px !important;
  }
}

@media (max-width: 576px) {
  .table td, .table th {
    padding: 10px 12px !important;
  }
}

/* -----------------------------------------------------------------------
   13. PANNEAU COMPTE — VERSEMENT (compte_versement.php) — remplace les
   tableaux/couleurs codées en dur (fond orange #EDA122, notice
   #FF6C2C) par des cartes centrées cohérentes avec le reste du site.
   ----------------------------------------------------------------------- */
.account-panel {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.payment-switch {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}
.payment-switch-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 50px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--brand-primary);
  font-weight: 600;
  font-size: 0.92em;
  box-shadow: var(--shadow-sm);
  transition: all .2s var(--ease);
}
.payment-switch-btn img { height: 20px; }
.payment-switch-btn:hover,
.payment-switch-btn.active {
  background: var(--grad-brand);
  border-color: transparent;
  color: #fff;
  text-decoration: none;
}
.account-card {
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 22px;
  margin-bottom: 20px;
  text-align: center;
}
.account-card-baridi {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.account-card-logo { height: 44px; }
.account-card-label { font-size: 0.85em; color: var(--muted); }
.account-card-value { font-weight: 700; color: var(--ink); letter-spacing: .3px; }
.account-card-highlight {
  background: #FEF6E7;
  border: 1px solid #F4E4BC;
}
.account-info-list {
  display: inline-grid;
  grid-template-columns: auto auto;
  gap: 6px 16px;
  margin: 16px auto;
  text-align: left;
}
.account-info-list dt { color: var(--muted); text-align: right; font-weight: 400; }
.account-info-list dd { margin: 0; font-weight: 700; color: var(--ink); }
.account-card-note { color: #92400e; margin-top: 10px; }
.account-example-link { display: inline-block; margin-top: 10px; }
.account-example-link img {
  max-width: 260px;
  width: 100%;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.account-card form label { display: block; font-weight: 600; margin-bottom: 10px; }
.account-card form .form-control { max-width: 360px; margin: 0 auto 8px; }
.account-hint { display: block; color: var(--brand-accent-2); margin-bottom: 16px; }
.account-notice {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  margin-bottom: 20px;
}

/* -----------------------------------------------------------------------
   14. TABLEAU DE BORD COMPTE — bandeau stats + liens rapides GS Books/Voix
   (compte.php, menu_gsbooks.php). Tout est centré et posé en ligne flex :
   volontairement, pour rester correct aussi bien en RTL (arabe, langue par
   défaut du site) qu'en LTR (français...), sans dépendre d'un text-align
   left/right codé en dur qui se retrouverait à l'envers selon la langue.
   ----------------------------------------------------------------------- */
.account-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 28px;
  padding: 14px 16px;
  text-align: center;
}
.account-stat { display: inline-flex; align-items: baseline; gap: 6px; }
.account-stat-label { color: var(--muted); font-size: 0.9em; }
.account-stat-value { color: var(--brand-accent-2); font-weight: 700; }
.account-stat-recharge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border-radius: 50px;
  background: var(--surface-alt);
  color: var(--brand-primary) !important;
  font-weight: 600;
  font-size: 0.85em;
  transition: all .2s var(--ease);
}
.account-stat-recharge:hover { background: var(--grad-brand); color: #fff !important; text-decoration: none; }

.account-quicklinks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 30px;
  padding: 26px 16px;
}
.account-quicklink {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-width: 220px;
}
.account-quicklink-logo img { max-width: 130px; width: 100%; height: auto; }
.account-quicklink-title {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 2.6em;
  font-weight: 700;
  color: var(--brand-accent);
}
.account-quicklink-title:hover { color: var(--brand-accent-2); text-decoration: none; }
.account-quicklink-actions { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; }
.account-quicklink-actions .btn {
  padding: 5px 12px !important;
  font-size: 0.75rem !important;
  font-weight: 400 !important;
}
.account-quicklink-divider {
  width: 1px;
  align-self: stretch;
  min-height: 60px;
  background: var(--border);
}
@media (max-width: 767px) {
  .account-quicklink-divider { display: none; }
}

/* -----------------------------------------------------------------------
   15. DÉTAILS DU COMPTE (compte_detail.php) — remplace le <table> brut par
   des lignes label/valeur propres, plus un bouton copier sur le lien de
   parrainage.
   ----------------------------------------------------------------------- */
.account-profile-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.account-profile-logo { max-width: 160px; width: 100%; height: auto; }

.account-details { text-align: left; }
.account-detail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 13px 4px;
  border-bottom: 1px solid var(--border);
}
.account-detail-row:last-child { border-bottom: none; }
.account-detail-label { color: var(--muted); font-size: 0.88em; font-weight: 600; }
.account-detail-value { color: var(--ink); font-weight: 600; text-align: right; }
.account-detail-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--brand-accent-2);
  font-weight: 600;
  font-size: 0.9em;
}
.account-detail-action:hover { color: var(--brand-primary); text-decoration: none; }
.account-detail-check { color: #28a745; margin-left: 6px; }

.account-referral {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 50px;
  padding: 5px 6px 5px 16px;
  max-width: 100%;
}
.account-referral span {
  font-family: monospace;
  font-size: 0.85em;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}
.account-copy-btn {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 50%;
  border: none;
  background: var(--brand-accent-2);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .2s var(--ease);
}
.account-copy-btn:hover { background: var(--brand-primary); }
.account-copy-btn.copied { background: #28a745; }

.account-balance-card {
  text-align: center;
  color: #fff;
  background: var(--grad-brand);
}
.account-balance-card .account-detail-label,
.account-balance-card b { color: #fff; }
.account-balance-card .btn { margin-top: 10px; }

.account-pending-card {
  text-align: center;
  background: #FEF6E7;
  border: 1px solid #F4E4BC;
  color: #92400e;
}

@media (max-width: 575px) {
  .account-referral span { max-width: 140px; }
}

/* -----------------------------------------------------------------------
   16. ACHAT DE CARTES (compte_acheter.php) — grille de cartes propre à la
   place des div flottées / <table> brut, plus un vrai message d'erreur
   quand le solde est insuffisant (la branche était vide avant : rien ne
   s'affichait, l'utilisateur ne savait pas pourquoi ça ne marchait pas).
   ----------------------------------------------------------------------- */
.buy-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  padding: 10px 0;
}
.buy-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 190px;
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 18px;
  text-align: center;
  color: inherit;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.buy-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  text-decoration: none;
  color: inherit;
}
.buy-card img { width: 100%; max-width: 120px; height: auto; margin-bottom: 12px; }
.buy-card-price { font-weight: 700; color: var(--ink); margin-bottom: 12px; }

.buy-confirm { max-width: 380px; margin: 0 auto; text-align: center; }
.buy-confirm img { max-width: 120px; width: 100%; height: auto; margin-bottom: 10px; }
.buy-confirm-price { font-size: 1.7em; font-weight: 700; color: var(--brand-primary); margin-bottom: 16px; }
.buy-warning {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin-bottom: 16px;
}
.buy-code {
  display: inline-block;
  font-size: 1.6em;
  font-weight: 700;
  letter-spacing: 2px;
  background: var(--surface-alt);
  border: 1px dashed var(--brand-accent-2);
  border-radius: var(--radius-sm);
  padding: 14px 22px;
  color: var(--brand-primary);
  margin-top: 6px;
}

/* -----------------------------------------------------------------------
   17. ZONE DE CONTENU COMPTE — hauteur minimale pour que les pages courtes
   (peu de contenu, ex. compte_recharge.php) ne s'écrasent pas sur une
   bande grise trop fine.
   ----------------------------------------------------------------------- */
.account-content {
  min-height: 400px;
}

/* -----------------------------------------------------------------------
   18. COMMANDES (compte_commande.php) — accordéon recoloré à la marque
   (gris/noir avant), classes JS conservées (accordionItem/Heading/
   Content, open/close) : ne change que le CSS, pas le comportement.
   ----------------------------------------------------------------------- */
.accordionItem {
  width: 100%;
  margin-bottom: 14px;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  background: var(--surface);
}
.accordionItemHeading {
  cursor: pointer;
  margin: 0;
  padding: 14px 18px;
  width: 100%;
  background: var(--surface-alt);
  font-weight: 600;
  font-size: 0.95em;
  color: var(--ink);
  transition: background .2s var(--ease);
}
.accordionItemHeading:hover { background: var(--border); }
.close .accordionItemContent {
  height: 0;
  overflow: hidden;
  transform: scaleY(0);
  transition: all .3s ease-out;
}
.close { color: var(--ink); text-shadow: none !important; }
.open .accordionItemContent {
  padding: 20px;
  background: var(--surface);
  width: 100%;
  transform: scaleY(1);
  transform-origin: top;
  transition: transform .3s ease;
}
.open .accordionItemHeading {
  background: var(--grad-brand);
  color: #fff !important;
}
.order-detail { display: flex; flex-wrap: wrap; gap: 20px; text-align: left; }
.order-detail-img { flex: 0 0 160px; }
.order-detail-img img { width: 100%; border-radius: var(--radius-sm); }
.order-detail-body { flex: 1; min-width: 220px; }

/* -----------------------------------------------------------------------
   19. HISTORIQUE (compte_historique.php) — une carte par ligne au lieu
   d'un <hr> entre chaque entrée.
   ----------------------------------------------------------------------- */
.history-item {
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 16px 18px;
  margin-bottom: 14px;
  text-align: center;
}
.history-item-date { color: var(--muted); font-size: 0.85em; margin-bottom: 4px; }
.history-item-amount { font-size: 1.2em; font-weight: 700; color: var(--brand-accent-2); margin: 4px 0; }
.history-item-type { font-weight: 600; color: var(--ink); margin: 4px 0; }
.history-item-note { font-size: 0.88em; color: var(--muted); margin-top: 4px; }

/* -----------------------------------------------------------------------
   20. GS BOOKS / VOIX — mes livres/vocaux (compte_gsbooks.php et
   compte_voix.php) : une carte par élément au lieu de div flottées avec
   des <li> hors liste et des <hr> entre chaque ligne.
   ----------------------------------------------------------------------- */
.gsbook-item, .my-item {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 18px;
  margin-bottom: 16px;
  text-align: left;
}
.gsbook-item-img, .my-item-img { flex: 0 0 140px; text-align: center; }
.gsbook-item-img img, .my-item-img img {
  width: 100%;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  margin-bottom: 8px;
}
.gsbook-item-order { display: flex; justify-content: center; gap: 14px; font-size: 1.1em; }
.gsbook-item-order a, .my-item-order a { color: var(--brand-primary); }
.gsbook-item-body, .my-item-body { flex: 1; min-width: 220px; }
.gsbook-item-title, .my-item-title { font-weight: 700; margin-bottom: 6px; color: var(--ink); }
.gsbook-item-meta, .my-item-meta { color: var(--muted); font-size: 0.88em; margin-bottom: 4px; }
.gsbook-item-price, .my-item-price { color: var(--brand-accent-2); font-weight: 700; }
.gsbook-item-actions, .my-item-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; }
.gsbook-item-status, .my-item-status { margin-top: 8px; font-size: 0.9em; }

/* -----------------------------------------------------------------------
   21. BANDEAU "COMPTE NON CONFIRMÉ" (compte.php/compte2.php) — reste
   compact (petit padding/texte), juste plus lisible que le texte rouge
   brut d'avant.
   ----------------------------------------------------------------------- */
.account-notice-compact {
  width: 100%;
  margin: 10px auto;
  padding: 9px 16px;
  font-size: 0.85em;
  line-height: 1.5;
}
.account-notice-compact a {
  color: var(--brand-primary);
  font-weight: 600;
}