/* ==========================================================================
 *  ESPACE COMPTE « Paramètre du profil » (acc-) — layout sidebar + contenu :
 *  favoris (3 onglets), listes, notifications, parrainage, déconnexion.
 * ======================================================================== */

/* Maquette « Mes favoris » : la colonne de gauche va de x102 a x400 (298), la
   colonne de contenu de x416 a x1336 (920 = 3 cartes de 296 + 2 gouttieres de
   16, la grille d'images du site). D'ou 102 + 298 + 16 = 416. */
.acc-page {
    max-width: 1440px; margin: 0 auto; padding: 0 104px 70px 102px;
    display: grid; grid-template-columns: 299px 1fr; gap: 15px;
    align-items: start;
}
/* La boite du menu est collee sous la navbar dans la maquette : pas de bord
   haut (celui de la navbar en tient lieu) et pas de marge au-dessus. */
.acc-aside { align-self: stretch; }
.acc-main { padding-top: 38px; min-width: 0; }

/* --------------------------------------------------------------------------
 *  <AccountSidebar> : carte profil + menu.
 * ------------------------------------------------------------------------ */

/* Maquette : bords lateraux a x102 et x400 partant de la navbar (y100) jusqu'a
   y1047, coins BAS arrondis seulement — le haut est coupe par la navbar. Le
   surlignage de l'entree active va de x126 a x376, soit 24px de retrait. */
.acc-card {
    background: var(--pl-white); border: 1px solid var(--pl-border); border-top: 0;
    border-radius: 0 0 16px 16px; padding: 24px 24px 80px;
}
.acc-profile { display: flex; gap: 8px; align-items: flex-start; padding: 39px 0 23px 7px; }
/* --pl-border (#e5e7eb, quasi blanc) passait inaperçu autour d'un avatar
   rond. Un `border` classique pose en plus un autre problème sur un
   <img> avec object-fit : il mange sur la boîte de l'image (mode
   border-box), donc la photo se redessine à l'intérieur d'un cadre plus
   petit — un rendu qui varie selon les navigateurs et peut laisser une
   bande vide d'un côté du cercle. `box-shadow` dessine l'anneau EN PLUS
   de la boîte de l'image, sans y toucher : la photo continue de remplir
   tout le cercle jusqu'à son bord, et l'anneau reste net et uniforme
   tout autour (comme sur LinkedIn, Airbnb…). */
.acc-profile__avatar {
    width: 78px; height: 78px; border-radius: 50%; object-fit: cover; flex: none;
    box-shadow: 0 0 0 3px #b9bec7;
}
/* Aperçu de la photo de profil dans le formulaire des paramètres : même
   anneau que .acc-profile__avatar, y compris pendant la prévisualisation
   de l'image sélectionnée avant envoi. */
.acc-photo-preview {
    width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: none;
    box-shadow: 0 0 0 3px #b9bec7;
}
.acc-profile__id { display: grid; gap: 3px; min-width: 0; }
.acc-profile__id strong { font-size: 16px; color: var(--pl-text-strong); }
.acc-profile__id > span { font-size: 13px; color: var(--pl-text-muted); }
/* Maquette : pastille de 150x24, texte en graisse NORMALE (nous l'avions en
   gras, ce qui la faisait mesurer 178x27). Ce gabarit vient de « Membre
   depuis Mai 2026 » (3 lettres de mois) : un compte réel créé en septembre
   ou décembre ne tient plus sur 150px en une ligne. La règle portait
   `white-space: nowrap`, qui forçait alors la pastille à déborder de la
   carte (299px) jusque dans le contenu principal, à droite (signalé le
   14/09). Retirée : la pastille repasse à la ligne au lieu de déborder,
   quitte à grandir un peu en hauteur. */
.acc-profile__badge {
    display: inline-block; justify-self: start; margin-top: 5px; max-width: 100%;
    background: var(--pl-action); color: var(--pl-white) !important;
    font-size: 10.5px; font-weight: 400; line-height: 14px;
    padding: 5px 8px; border-radius: 6px;
}

/* Maquette : une entree tous les 80px (boite de 64 + 16 d'ecart) ; nous etions
   a 68,5 (boite de 65 + 4), d'ou une colonne 160px trop courte. */
.acc-menu { display: grid; gap: 16px; }
.acc-menu__item {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 11px 15px; border-radius: 10px; text-decoration: none;
    color: var(--pl-text-strong);
}
.acc-menu__item:hover { background: var(--pl-surface-dashboard); color: var(--pl-text-strong); }
.acc-menu__icon { display: inline-flex; margin-top: 2px; color: var(--pl-text-strong); }
.acc-menu__text { display: grid; gap: 2px; min-width: 0; }
.acc-menu__text strong { font-size: 15px; font-weight: 600; }
.acc-menu__text small { font-size: 12px; color: var(--pl-text-muted); }
.acc-menu__item.is-active { background: var(--pl-action-light); }
.acc-menu__item.is-active strong, .acc-menu__item.is-active .acc-menu__icon { color: var(--pl-action); }
.acc-menu__item.is-active.is-danger { background: #fdeaea; }
.acc-menu__item.is-active.is-danger strong, .acc-menu__item.is-active.is-danger .acc-menu__icon { color: var(--pl-error); }
/* Entrees sans ecran (albums, reservations...) : signale le 14/09, un clic
   sans route ni indice se lisait comme un menu casse. */
.acc-menu__item.is-disabled { cursor: default; opacity: .55; }
.acc-menu__item.is-disabled:hover { background: none; }
.acc-menu__item.is-disabled .acc-menu__text small { font-style: italic; }
.acc-menu__count {
    margin-left: auto; flex: none; width: 20px; height: 20px; border-radius: 50%;
    background: var(--pl-error); color: var(--pl-white); font-size: 11px;
    font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}

/* --------------------------------------------------------------------------
 *  <AccountPageHeader> : fil d'Ariane + H1 + sous-titre.
 * ------------------------------------------------------------------------ */

/* Maquette : fil d'Ariane de 233px d'encre en graisse NORMALE (nous l'avions
   en gras sur 287), titre de 48px comme partout ailleurs (nous etions a 40),
   sous-titre de 16px. */
/* Maquette : le fil d'Ariane demarre a x427 (11px a droite du bord de colonne)
   et « Acceuil » n'y mesure que 33px d'encre contre 38 chez nous — soit 9,5px
   et non 12,5 en gras. Releve identique sur les 4 ecrans du compte. */
.acc-crumb { margin: 5px 0 31px 11px; font-size: 10px; font-weight: 400; }
.acc-crumb [aria-current] { font-weight: 400; }
.acc-crumb-current { color: var(--pl-action); }
.acc-title { margin: 0 0 18px; font-size: 48px; font-weight: 500; color: var(--pl-text-strong); }
.acc-subtitle { margin: 0 0 22px; font-size: 16px; color: var(--pl-text); }

/* --------------------------------------------------------------------------
 *  Mes favoris : onglets + contrôles d'affichage + compteur/tri + grille.
 * ------------------------------------------------------------------------ */

.acc-tabs-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
/* Maquette : les onglets se touchent (leur padding de 14 fait l'ecart) et le
   libelle est en 16,5px — 93px d'encre pour « Prestataires » contre 88. */
.acc-tabs { display: flex; gap: 0; }
.acc-tab {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 14px 14px; font-size: 16.5px; font-weight: 600;
    color: var(--pl-text-strong); text-decoration: none;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.acc-tab.is-active { color: var(--pl-action); border-bottom-color: var(--pl-action); }
.acc-tab:hover { color: var(--pl-action); }

/* Maquette : « Afficher la carte » fait 158x40 et s'arrête à x1222, puis 23px
   d'écart, le bouton des filtres (40x40) et 12px d'écart, le bouton liste. */
.acc-view { display: flex; gap: 12px; align-items: center; padding-bottom: 10px; }
/* MESURÉ SUR LA MAQUETTE LE 26/08 (assets/profil/Mes favoris.png, bouton
   relevé à x1065-1223, y312-352, soit 158x40) :
     - bordure  rgb(157,171,199) = #9dabc7, un gris BLEUTÉ, et non le gris
       neutre --pl-border (#e5e7eb) que portait le bouton ;
     - libellé  rgb(100,116,139) = #64748b, ce qui est déjà --pl-text-secondary,
       inchangé donc ;
     - fond     moyenne (218,221,220) sur une bande sans texte.

   Le voile blanc à 55 % remontait cette moyenne à (246,245,242) : le plan
   devenait presque invisible, alors que la maquette le montre lisible. Il est
   retiré. Sans lui le site tombe à (239,238,234) : il reste plus pâle que la
   maquette, mais l'écart qui subsiste vient de la TEXTURE elle-même —
   map-button.jpg est un recadrage délavé et symétrisé, dont on voit les
   raccords. Le remplacer demande un export propre du plan. */
.acc-view__map {
    width: 158px; height: 40px; margin-right: 11px;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: 1px solid #9dabc7; border-radius: 10px; cursor: pointer;
    background: url("../images/account/map-button-LUavxWr.jpg") center / cover;
    color: var(--pl-text-secondary);
    font-size: 14px; font-weight: 600; padding: 0;
}
.acc-view__btn {
    width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--pl-border); border-radius: 10px; cursor: pointer;
    background: var(--pl-white); color: var(--pl-text-strong);
}
/* Maquette : le bouton des filtres est un carré plein #f8fafc SANS bordure et
   le bouton liste n'a ni fond ni bordure, seulement son pictogramme gris. */
.acc-view__btn--fill { background: var(--pl-surface-dashboard); border-color: transparent; color: #757b86; }
.acc-view__btn--bare { background: transparent; border-color: transparent; color: #c2cbdc; }
/* Survol uniforme (25/08) : toute la boite se teinte, comme .acc-logout__cancel
   juste en dessous et comme le reste du site.

   « Afficher la carte » est TENU A PART, et volontairement : son fond porte la
   texture de carte relevee sur la maquette. Lui poser une couleur l'effacerait.
   Il garde donc son liseré et son libellé teintés, sans remplissage. */
.acc-view__btn:hover { border-color: var(--pl-action); color: var(--pl-action); background: var(--pl-action-light); }
.acc-view__map:hover { border-color: var(--pl-action); color: var(--pl-action); }

.acc-count-row { display: flex; align-items: center; justify-content: space-between; margin: 14px 0 12px; }
.acc-count { font-size: 14.5px; color: var(--pl-text-muted); }
.acc-sort {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    border: 1px solid var(--pl-border); border-radius: 10px; background: var(--pl-white);
    padding: 11px 15px; font-size: 14px; color: var(--pl-text);
}
.acc-sort strong { color: var(--pl-text-strong); }

/* Maquette « Mes favoris » : cartes de 296 et gouttiere de 16 comme toutes les
   grilles d'images du site (416->711, 728->1023, 1040->1335), pas vertical de
   434px d'une rangee a l'autre (carte de 418 + 16 d'ecart). */
.acc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.acc-grid--list { margin-top: 9px; }

/* Maquette : la carte de l'espace compte est plus aeree que celle des listings
   — 33px entre le lieu et le titre, 31 entre le titre et la note (contre 19 et
   19). Le pied (filet + prix) est identique, on ne touche donc qu'aux deux
   premiers ecarts, et uniquement dans l'espace compte. */
.acc-fav .pl-card__title { margin-top: 14px; }
.acc-fav .act-card__meta { margin-top: 14px; }
.acc-fav .pl-card__body { padding-top: 16px; padding-bottom: 16px; }
.acc-fav .pl-card__foot { padding-top: 14px; }

/* <FavoriteCard> : cœur rouge plein + variante placeholder. */
.acc-fav__heart.is-on { color: var(--pl-error); }

/* Bandeau « Retiré de vos favoris — Annuler », posé au-dessus de la grille
   quand un cœur vient d'être vidé sur cette page. Rien de tel dans la
   maquette : elle ne dessine pas ce qui se passe APRÈS un retrait, alors
   qu'elle invite explicitement à retirer (« Vous pouvez la supprimer de vos
   favoris à tout moment »). Sans recours, un clic de travers effacerait un
   favori sans moyen de le retrouver depuis cette page.
   Composé de jetons du socle uniquement, pour rester recalable. */
.acc-fav-undo {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--pl-sp-16);
    margin-bottom: var(--pl-sp-16);
    padding: var(--pl-sp-14) var(--pl-sp-20);
    border-radius: var(--pl-radius-sm);
    background: var(--pl-action-light);
    color: var(--pl-text);
    font-size: var(--pl-fs-body-sm);
}
.acc-fav-undo__btn {
    border: 0; background: none; padding: 0;
    color: var(--pl-action);
    font-weight: var(--pl-fw-semibold);
    text-decoration: underline;
    cursor: pointer;
}
.acc-fav__placeholder {
    position: absolute; inset: 0; background: #d5d7dc; color: #9aa1ad;
    display: flex; align-items: center; justify-content: center;
}
.acc-fav .pl-card__media { position: relative; }
.acc-fav__ph-badge {
    position: absolute; top: 12px; left: 12px; background: #eceef2;
    color: var(--pl-text); font-size: 12.5px; font-weight: 600;
    padding: 5px 12px; border-radius: 100px;
}

/* <FavoritesFooterBanner> */
/* Maquette : bandeau de 105px de haut (nous etions a 88), pose 18px sous la
   derniere rangee ; retrait interne de 32 (et non 22), coeur de 28, titre de
   18px et sous-titre de 16px (nous etions a 15,5 et 14,5). */
.acc-banner {
    margin-top: 18px; background: var(--pl-surface-dashboard);
    border-radius: 12px; padding: 26px 32px;
    display: flex; align-items: center; gap: 20px;
}
.acc-banner__icon { color: var(--pl-action); display: inline-flex; flex: none; }
.acc-banner__text { display: grid; gap: 3px; }
.acc-banner__text strong { font-size: 18px; color: var(--pl-action); }
.acc-banner__text span { font-size: 16px; color: var(--pl-text); }
/* Maquette : bouton de 190x32. */
.acc-banner .pl-btn {
    margin-left: auto; flex: none;
    width: 190px; height: 32px; padding: 0; font-size: 14px;
    display: inline-flex; align-items: center; justify-content: center;
}

/* <EmptyState> OOPS */
.acc-empty { text-align: center; padding: 66px 20px 120px; }
.acc-empty__img { width: 200px; display: block; margin: 0 auto 16px; }
.acc-empty__title { margin: 0 0 10px; font-size: 23px; font-weight: 700; color: var(--pl-text-strong); }
.acc-empty__text { margin: 0 0 24px; font-size: 15px; line-height: 1.6; color: var(--pl-text); }

/* --------------------------------------------------------------------------
 *  Notifications : onglets à compteurs, sections, items, charger plus.
 * ------------------------------------------------------------------------ */

.acc-ntabs-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 24px; }
/* Maquette : onglets jointifs, libelles en 16,5px, les onglets INACTIFS en
   gris #64748b (nous les mettions en texte principal), et le compteur est un
   petit CERCLE de 16px a simple filet, de la couleur de l'onglet — pas une
   pastille grise pleine. */
.acc-ntabs { display: flex; gap: 0; }
.acc-ntab {
    display: inline-flex; align-items: center; gap: 12px;
    padding: 10px 14px 14px; font-size: 16.5px; font-weight: 600;
    color: var(--pl-text-secondary); text-decoration: none;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.acc-ntab.is-active { color: var(--pl-action); border-bottom-color: var(--pl-action); }
.acc-ntab__count {
    width: 16px; height: 16px; padding: 0; border-radius: 50%;
    border: 1px solid currentColor; background: transparent;
    color: inherit; font-size: 10px; font-weight: 600;
    display: inline-flex; align-items: center; justify-content: center;
}
.acc-ntab.is-active .acc-ntab__count { background: transparent; color: var(--pl-action); }
.acc-nactions { display: flex; gap: 22px; padding-bottom: 10px; }
.acc-nlink { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--pl-action); text-decoration: none; }
.acc-nlink:hover { text-decoration: underline; color: var(--pl-action); }
button.acc-nlink { appearance: none; background: none; border: none; padding: 0; cursor: pointer; }

.acc-nsection { margin: 26px 0 14px; font-size: 18px; font-weight: 700; color: var(--pl-text-strong); }
/* Maquette : ligne de 88px (416->1336), fond #f8fafc pour toutes les lignes,
   pastille RONDE de 56 et vignette de 72 collee a 10px du bord.

   DISTINCTION LU/NON LU RÉTABLIE (18/09) : `.acc-notif--muted` (lu, voir
   `n.muted` = `Notification::isRead()`) portait exactement le même fond que
   `.acc-notif` — aucune différence visuelle entre lu et non lu, alors que
   c'est justement ce que cette classe existe pour montrer. Non lu garde le
   gris de la maquette (c'est lui qui doit se remarquer) ; lu redevient
   blanc et simple, sans rien qui attire l'œil une fois la notification
   déjà vue. */
.acc-nlist { display: grid; gap: 12px; }
.acc-notif {
    display: flex; align-items: center; gap: 14px;
    background: var(--pl-surface-dashboard); border: 1px solid var(--pl-surface-dashboard);
    border-radius: 12px; padding: 8px 10px 8px 15px;
}
.acc-notif--muted { background: var(--pl-white); border-color: var(--pl-border); }
.acc-notif__icon {
    width: 56px; height: 56px; border-radius: 50%; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
}
.acc-notif__icon--violet { background: var(--pl-action-light); color: var(--pl-action); }
.acc-notif__icon--green { background: #e8f7ee; color: var(--pl-success); }
.acc-notif__icon--blue { background: #e8effc; color: var(--pl-info); }
.acc-notif__icon--yellow { background: #fdf6e3; color: var(--pl-warning); }
.acc-notif__body { display: grid; gap: 3px; min-width: 0; }
.acc-notif__body strong { font-size: 16px; color: var(--pl-text-strong); }
.acc-notif__detail { font-size: 14px; color: var(--pl-text); }
.acc-notif__sep { color: var(--pl-text-disabled); margin: 0 4px; }
.acc-notif__time { font-size: 12px; color: var(--pl-text-muted); }
.acc-notif__thumb { width: 72px; height: 72px; border-radius: 10px; object-fit: cover; margin-left: auto; flex: none; }
.acc-nmore { text-align: center; margin: 30px 0 10px; }

/* --------------------------------------------------------------------------
 *  Messagerie (§14 du CDC) : aucune maquette, repris ici (18/09) dans le
 *  même langage que les notifications ci-dessus plutôt qu'un `.list-group`
 *  Bootstrap brut — cartes `.acc-conv` pour la liste, bulles `.acc-chat`
 *  pour un fil. Même règle lu/non lu que les notifications (18/09) : gris +
 *  pastille rouge tant que non lu — c'est lui qui doit se remarquer —
 *  blanc et simple une fois lu.
 * ------------------------------------------------------------------------ */
.acc-conv-list { display: grid; gap: 12px; }
.acc-conv {
    display: flex; align-items: center; gap: 14px;
    background: var(--pl-surface-dashboard); border: 1px solid var(--pl-surface-dashboard);
    border-radius: 12px; padding: 12px 15px;
    text-decoration: none; color: inherit;
    transition: background-color .15s ease, border-color .15s ease;
}
.acc-conv:hover { background: var(--pl-border); border-color: var(--pl-border); }
.acc-conv--muted { background: var(--pl-white); border-color: var(--pl-border); }
.acc-conv--muted:hover { background: var(--pl-action-light); border-color: var(--pl-action-light); }
.acc-conv__avatar {
    width: 48px; height: 48px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--pl-action-light); color: var(--pl-action);
    font-size: 18px; font-weight: 700;
}
.acc-conv__body { display: grid; gap: 3px; min-width: 0; flex: 1; }
.acc-conv__body strong { font-size: 16px; color: var(--pl-text-strong); }
.acc-conv__preview {
    display: block; font-size: 14px; color: var(--pl-text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 32rem;
}
.acc-conv__meta { display: grid; gap: 6px; justify-items: end; flex: none; }
.acc-conv__time { font-size: 12px; color: var(--pl-text-muted); white-space: nowrap; }
.acc-conv__badge { width: 10px; height: 10px; border-radius: 50%; background: var(--pl-error); justify-self: end; }

/* Fil d'une conversation : bulles dans une carte, comme le reste de
   l'espace compte, plutôt que flottantes sur le fond blanc de la page. */
.acc-chat {
    display: flex; flex-direction: column; gap: 12px;
    background: var(--pl-surface-dashboard); border-radius: var(--pl-radius-md);
    padding: 20px; margin-bottom: 20px; max-height: 60vh; overflow-y: auto;
}
.acc-chat__row { display: flex; flex-direction: column; max-width: 32rem; }
.acc-chat__row--mine { align-self: flex-end; align-items: flex-end; }
.acc-chat__bubble {
    background: var(--pl-white); border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius-md); padding: 10px 14px;
}
.acc-chat__bubble--mine { background: var(--pl-action); border-color: var(--pl-action); color: var(--pl-white); }
.acc-chat__text { margin: 0 0 4px; white-space: pre-line; }
.acc-chat__time { font-size: 12px; color: var(--pl-text-muted); }
.acc-chat__bubble--mine .acc-chat__time { color: rgb(255 255 255 / .7); }
.acc-chat__report { margin-top: 4px; }
.acc-chat__form { display: flex; gap: 8px; }

/* --------------------------------------------------------------------------
 *  Déconnexion : illustration + arguments + confirmation + aide.
 * ------------------------------------------------------------------------ */

/* Maquette : l'illustration demarre 72px sous le titre (nous etions a 30) et
   la colonne de droite commence a x950 (illustration 416->912 + 38). */
.acc-logout { display: grid; grid-template-columns: 495px 1fr; gap: 38px; align-items: start; margin-top: 63px; }
.acc-logout__img { width: 100%; border-radius: 14px; display: block; }
.acc-logout__side { padding-top: 12px; }
.acc-logout__hello { margin: 0 0 16px; font-size: 34px; font-weight: 700; color: var(--pl-text-strong); }
/* Maquette : 18px en gris secondaire (nous l'avions en 16 texte principal). */
.acc-logout__text { margin: 0 0 46px; font-size: 18px; line-height: 1.6; color: var(--pl-text-secondary); }
.acc-logout__args { display: grid; gap: 18px; margin-bottom: 26px; }
.acc-logout__arg { display: flex; gap: 14px; align-items: flex-start; }
.acc-logout__argicon {
    width: 44px; height: 44px; border-radius: 10px; flex: none;
    background: var(--pl-action-light); color: var(--pl-action);
    display: inline-flex; align-items: center; justify-content: center;
}
/* La regle `.acc-logout__arg span` visait aussi la pastille d'icone (c'est un
   <span>) et lui imposait la couleur du texte : les pictogrammes sortaient en
   bleu nuit alors que la maquette les donne VIOLETS. On ne cible plus que la
   description. Maquette : elle est en gris #64748b et coupee a 290px de large
   (« Connectez-vous a tout moment pour / retrouver... »). */
.acc-logout__arg div { display: grid; gap: 3px; max-width: 290px; }
.acc-logout__arg strong { font-size: 15.5px; color: var(--pl-text-strong); }
.acc-logout__arg div span { font-size: 14px; color: var(--pl-text-secondary); line-height: 1.5; }
/* Maquette : la question de confirmation est en gris #64748b, pas en gras. */
.acc-logout__confirm { margin: 0 0 16px; font-size: 16px; font-weight: 400; color: var(--pl-text-secondary); }
/* Maquette : les deux boutons occupent toute la colonne — 238 + 37 + 111. */
.acc-logout__actions { display: flex; gap: 37px; }
.acc-logout__yes {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    border: 1.5px solid var(--pl-error); border-radius: 10px;
    color: var(--pl-error); background: var(--pl-white); text-decoration: none;
    font-size: 15px; font-weight: 600; width: 238px; height: 40px; padding: 0;
    /* Devenu un <button> le 25/08 (déconnexion en POST) : un bouton n'a pas
       la main du curseur par défaut, contrairement à un lien. */
    cursor: pointer;
}
.acc-logout__yes:hover { background: #fdeaea; color: var(--pl-error); }
.acc-logout__cancel {
    border: 1.5px solid var(--pl-action); border-radius: 10px; cursor: pointer;
    color: var(--pl-action); background: var(--pl-white);
    font-size: 15px; font-weight: 600; width: 111px; height: 40px; padding: 0;
}
.acc-logout__cancel:hover { background: var(--pl-action-light); }

.acc-help {
    /* Maquette : bandeau de 104px de haut, retrait interne de 26. */
    margin-top: 30px; background: #e8effc; border-radius: 12px;
    padding: 28px 26px; display: flex; align-items: center; gap: 16px;
}
.acc-help__icon { color: var(--pl-info); display: inline-flex; flex: none; }
.acc-help__text { display: grid; gap: 3px; }
/* Maquette : « Besoin d'aide ? » est en BLEU #2563eb, pas en texte principal. */
.acc-help__text strong { font-size: 15.5px; color: var(--pl-info); }
.acc-help__text span { font-size: 14.5px; color: var(--pl-text); }
.acc-help__btn {
    margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 8px;
    border: 1px solid var(--pl-info); border-radius: 8px; text-decoration: none;
    color: var(--pl-info); background: var(--pl-white);
    font-size: 14.5px; font-weight: 600; padding: 11px 18px;
}
.acc-help__btn:hover { background: #dbe7fb; color: var(--pl-info); }

/* --------------------------------------------------------------------------
 *  ALBUM PHOTO (Lot L, 17/09) — §4 de docs/corrections-client-2026-07-27.md.
 *  La grille elle-même (`.evn-album*`) vient du domaine Événements, déjà
 *  maquetté (voir templates/private_activity/album_show.html.twig) ; ce qui
 *  suit est propre à cet écran, absent des captures Événements : la case
 *  vide d'un album sans photo, la zone d'ajout et le bouton de suppression.
 * ------------------------------------------------------------------------ */

.evn-album__media--empty {
    display: flex; align-items: center; justify-content: center;
    background: var(--pl-surface-dashboard); color: var(--pl-text-muted);
}

.pl-album-upload { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.pl-album-upload input[type="file"] { max-width: 320px; }

.pl-album-photo { position: relative; display: block; border-radius: var(--pl-radius-md); overflow: hidden; }
.pl-album-photo img { border-radius: var(--pl-radius-md); aspect-ratio: 295 / 217; object-fit: cover; width: 100%; display: block; }
.pl-album-photo__form { position: absolute; top: 10px; right: 10px; margin: 0; }
.pl-album-photo__delete {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    background: var(--pl-white); color: var(--pl-text-secondary);
    border: 0; border-radius: var(--pl-radius-pill);
    box-shadow: var(--pl-shadow-sm);
    cursor: pointer;
}
.pl-album-photo__delete:hover { color: var(--pl-error); }

/* --------------------------------------------------------------------------
 *  <ReviewStarsInput> : saisie de la note en étoiles (formulaire « Publier
 *  mon avis », quote/demande_detail.html.twig). Aucune maquette (écran
 *  ajouté au Lot H) : un chiffre en étoiles se donne comme il se lit
 *  ailleurs sur le site (review-card__stars, home.css), pas via un <select>
 *  "5/5, 4/5…". Widget CSS pur : 5 radios en ordre inversé (5 → 1) + la
 *  ligne posée en `row-reverse`, pour que le survol/la sélection d'une
 *  étoile allume aussi celles à sa gauche via `~` (sélecteur « frères
 *  suivants ») sans une ligne de JS.
 * ------------------------------------------------------------------------ */
.review-stars-input { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.review-stars-input input {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0; pointer-events: none;
}
.review-stars-input label { display: flex; cursor: pointer; color: var(--pl-border); }
.review-stars-input label:hover,
.review-stars-input label:hover ~ label,
.review-stars-input input:checked ~ label {
    color: var(--pl-warning);
}
.review-stars-input input:focus-visible + label { outline: 2px solid var(--pl-action); outline-offset: 2px; }

/* --------------------------------------------------------------------------
 *  RESPONSIVE.
 * ------------------------------------------------------------------------ */

@media (max-width: 1199.98px) {
    .acc-page { grid-template-columns: 1fr; padding: 0 24px 50px; }
    .acc-aside { border-right: 0; padding-right: 0; }
    .acc-card { position: static; }
    .acc-grid { grid-template-columns: repeat(2, 1fr); }
    .acc-logout { grid-template-columns: 1fr; }
}

@media (max-width: 767.98px) {
    .acc-grid { grid-template-columns: 1fr; }
    .acc-tabs-row, .acc-ntabs-row, .acc-count-row { flex-wrap: wrap; }
    .acc-banner, .acc-help { flex-direction: column; align-items: flex-start; }
    .acc-banner .pl-btn, .acc-help__btn { margin-left: 0; }
}