/* =========================================================
   BASE.CSS — reset, typographie, boutons, nav globale
   Chargé sur TOUTES les pages, en premier (après variables.css)
   ========================================================= */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'DM Sans', system-ui, sans-serif; background: #fff; color: var(--navy); -webkit-font-smoothing: antialiased; }
h1,h2,h3,h4 { font-family: 'DM Sans', sans-serif; }
img { display: block; }
a { text-decoration: none; }
button { font-family: 'DM Sans', sans-serif; cursor: pointer; }

/* ========== ROUTEUR / CONTENEUR DE PAGES ========== */
/* Dans la version modulaire, chaque page est chargée dynamiquement
   dans #app par js/navigation.js (voir les gabarits <template>) */
#app { min-height: 100vh; }

/* ========== GLOBAL NAV ========== */
.gnav {
  position: sticky; top: 0; z-index: 500; background: rgba(255,255,255,0.97);
  backdrop-filter: blur(12px); border-bottom: 1px solid var(--gray-100);
  height: 64px; padding: 0 2rem; display: flex; align-items: center; justify-content: space-between;
}
.gnav-logo { font-family: 'DM Sans', sans-serif; font-size: 20px; font-weight: 900; color: var(--navy); text-decoration: none; border-radius: 6px; }
.gnav-logo span { color: var(--orange); }
/* Le logo est un vrai lien vers l'accueil (mission 16, lot 4) : pas de
   soulignement, la couleur de la marque, et un focus clavier visible. */
.gnav-logo:hover, .gnav-logo:visited { color: var(--navy); text-decoration: none; }
.gnav-logo:focus-visible, .ds-logo:focus-visible, .prs-logo:focus-visible, .as-logo:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.gnav-links { display: flex; gap: 2rem; }

/* ── SOULIGNEMENT ANIMÉ DES LIENS DE NAVIGATION ────────────────────────
   Le trait est un pseudo-élément posé SOUS le lien, à `bottom: -6px` :
   il ne fait donc partie d'aucun calcul de hauteur. Ni le lien, ni la
   rangée, ni le bandeau de 64 px ne bougent — c'est la raison pour
   laquelle on n'ajoute pas de `padding-bottom`, qui aurait grandi le
   bandeau de quelques pixels à chaque survol.

   L'animation porte sur `transform: scaleX()`, pas sur `width` : une
   transformation ne déclenche aucun recalcul de mise en page, donc aucun
   texte ne tremble à côté.

   Elle s'applique UNIQUEMENT aux liens de .gnav-links : ni le logo, ni
   les boutons Connexion / Inscription, qui ne sont pas dans ce conteneur. */
.gnav-links a {
  position: relative;
  font-size: 14px; font-weight: 500; color: var(--gray-600);
  transition: color .15s;
  /* LA MAIN DE CLIC. Un <a> SANS href n'en reçoit pas du navigateur : les
     quatre liens du faux-SPA affichaient donc la flèche, et rien ne
     laissait deviner qu'ils étaient cliquables. On la pose ici, sur les
     liens du menu UNIQUEMENT — le logo est un <div> voisin, hors de ce
     conteneur, et garde la flèche.

     `user-select: none` évite l'autre défaut du clic sur un lien sans
     href : un double-clic un peu rapide sélectionnait le libellé au lieu
     de naviguer, laissant du texte en surbrillance dans le bandeau. */
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.gnav-links a::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -6px;
  height: 2px; border-radius: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 200ms ease;
}
.gnav-links a:hover { color: var(--navy); }
.gnav-links a:hover::after,
.gnav-links a:focus-visible::after,
.gnav-links a[aria-current="page"]::after { transform: scaleX(1); }
/* La page active garde son trait en permanence, et se lit aussi sans
   couleur grâce à aria-current. */
.gnav-links a[aria-current="page"] { color: var(--navy); font-weight: 600; }
/* Quatre de ces liens n'ont pas de href — le site est un faux-SPA à URL
   unique, et aucune URL ne représente encore « Trouver un pro » ou
   « Tarifs ». Sans tabindex ils seraient inatteignables au clavier.
   « Comment ça marche », lui, désigne une ancre RÉELLE de l'accueil : il
   porte un vrai href, il est donc focalisable nativement.
   L'anneau de focus vaut pour les deux cas, et il est bleu-gris comme
   partout ailleurs sur le site. */
.gnav-links a:focus-visible {
  outline: 2px solid var(--navy); outline-offset: 4px; border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .gnav-links a::after { transition: none; }
}
.gnav-right { display: flex; gap: 10px; align-items: center; }
.btn-ghost { border: 1.5px solid var(--gray-200); background: none; border-radius: 10px; padding: 8px 18px; font-size: 13px; font-weight: 600; color: var(--gray-800); transition: all .15s; }
.btn-ghost:hover { border-color: var(--navy); color: var(--navy); }
.btn-primary { background: var(--orange); color: #fff; border: none; border-radius: 10px; padding: 9px 20px; font-size: 13px; font-weight: 700; transition: all .15s; }
.btn-primary:hover { background: var(--orange-d); transform: translateY(-1px); }
.hamburger { display: none; background: none; border: none; font-size: 22px; }

/* ========== TOAST NOTIFICATIONS (partagé) ========== */
@keyframes toastIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
#toast {
  position: fixed; bottom: 24px; right: 24px; z-index: 99999;
  border-radius: 12px; padding: 14px 20px; font-size: 14px; font-weight: 600;
  font-family: 'DM Sans', sans-serif; max-width: 340px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  animation: toastIn .3s ease;
}
#toast.toast-success { background: var(--navy); color: #fff; border: 1px solid rgba(255,255,255,.1); }
#toast.toast-warn { background: #fef9c3; color: #92400e; border: 1px solid #fcd34d; }

@keyframes tagOut {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(.8); }
}

/* ========== SCROLLBAR VISIBLE EN PERMANENCE (partout sur le site) ==========
   ⚠️ Historique : une première version (façon Notion/Stripe/Slack) rendait
   le pouce transparent au repos, révélé seulement au survol/focus. Après
   retour utilisateur avec maquette annotée (3 barres distinctes attendues :
   page entière / zone de messages / liste des conversations, TOUJOURS
   visibles, pas seulement au survol), on repasse à une barre fine mais
   visible EN PERMANENCE — piste claire + pouce gris net, qui se fonce au
   survol et encore plus pendant le drag.

   IMPORTANT — liste de sélecteurs UNIQUE (source de vérité) : toute nouvelle
   zone défilante du site doit être ajoutée ICI, dans les blocs ci-dessous,
   PAS dans un fichier CSS de page individuel (évite les doublons silencieux
   qui s'étaient déjà produits une fois sur #proOppList — voir historique).
   La même liste (sans html/body) est dupliquée dans js/toast.js
   (enhanceScrollableFocus) pour rendre ces zones accessibles au clavier. */
html, body,
.dash-main, .dash-content, .client-panel,
.pro-main, .pro-content, .pro-panel-section,
#pg-facturation .fp-sidebar, #pg-facturation .fp-content,
#pg-facturation .fp-modal-body, #pg-facturation .fp-setup-card,
#pg-fiche .pro-sidebar,
.res-side, .res-list-pane, .conv-side,
#admDemandesTable, #admProsTable, #admClientsTable,
#admReviewsTable, #admSubsTable, #admNotifList,
#clientFavGrid, #clientAvisList,
#proAvisList, #proOppList, #clConvMessages, #proConvMessages,
#fpClientList {
  scrollbar-width: thin;
  scrollbar-color: var(--gray-400, #9ca3af) var(--gray-100, #f3f4f6);
}
html::-webkit-scrollbar, body::-webkit-scrollbar,
.dash-main::-webkit-scrollbar,
.dash-content::-webkit-scrollbar, .client-panel::-webkit-scrollbar,
.pro-main::-webkit-scrollbar, .pro-content::-webkit-scrollbar,
.pro-panel-section::-webkit-scrollbar,
#pg-facturation .fp-sidebar::-webkit-scrollbar, #pg-facturation .fp-content::-webkit-scrollbar,
#pg-facturation .fp-modal-body::-webkit-scrollbar, #pg-facturation .fp-setup-card::-webkit-scrollbar,
#pg-fiche .pro-sidebar::-webkit-scrollbar,
.res-side::-webkit-scrollbar, .res-list-pane::-webkit-scrollbar, .conv-side::-webkit-scrollbar,
#admDemandesTable::-webkit-scrollbar, #admProsTable::-webkit-scrollbar, #admClientsTable::-webkit-scrollbar,
#admReviewsTable::-webkit-scrollbar, #admSubsTable::-webkit-scrollbar, #admNotifList::-webkit-scrollbar,
#clientFavGrid::-webkit-scrollbar, #clientAvisList::-webkit-scrollbar,
#proAvisList::-webkit-scrollbar, #proOppList::-webkit-scrollbar, #clConvMessages::-webkit-scrollbar, #proConvMessages::-webkit-scrollbar,
#fpClientList::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
html::-webkit-scrollbar-track, body::-webkit-scrollbar-track,
.dash-main::-webkit-scrollbar-track,
.dash-content::-webkit-scrollbar-track, .client-panel::-webkit-scrollbar-track,
.pro-main::-webkit-scrollbar-track, .pro-content::-webkit-scrollbar-track,
.pro-panel-section::-webkit-scrollbar-track,
#pg-facturation .fp-sidebar::-webkit-scrollbar-track, #pg-facturation .fp-content::-webkit-scrollbar-track,
#pg-facturation .fp-modal-body::-webkit-scrollbar-track, #pg-facturation .fp-setup-card::-webkit-scrollbar-track,
#pg-fiche .pro-sidebar::-webkit-scrollbar-track,
.res-side::-webkit-scrollbar-track, .res-list-pane::-webkit-scrollbar-track, .conv-side::-webkit-scrollbar-track,
#admDemandesTable::-webkit-scrollbar-track, #admProsTable::-webkit-scrollbar-track, #admClientsTable::-webkit-scrollbar-track,
#admReviewsTable::-webkit-scrollbar-track, #admSubsTable::-webkit-scrollbar-track, #admNotifList::-webkit-scrollbar-track,
#clientFavGrid::-webkit-scrollbar-track, #clientAvisList::-webkit-scrollbar-track,
#proAvisList::-webkit-scrollbar-track, #proOppList::-webkit-scrollbar-track, #clConvMessages::-webkit-scrollbar-track, #proConvMessages::-webkit-scrollbar-track,
#fpClientList::-webkit-scrollbar-track {
  background: var(--gray-100, #f3f4f6);
}
html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb,
.dash-main::-webkit-scrollbar-thumb,
.dash-content::-webkit-scrollbar-thumb, .client-panel::-webkit-scrollbar-thumb,
.pro-main::-webkit-scrollbar-thumb, .pro-content::-webkit-scrollbar-thumb,
.pro-panel-section::-webkit-scrollbar-thumb,
#pg-facturation .fp-sidebar::-webkit-scrollbar-thumb, #pg-facturation .fp-content::-webkit-scrollbar-thumb,
#pg-facturation .fp-modal-body::-webkit-scrollbar-thumb, #pg-facturation .fp-setup-card::-webkit-scrollbar-thumb,
#pg-fiche .pro-sidebar::-webkit-scrollbar-thumb,
.res-side::-webkit-scrollbar-thumb, .res-list-pane::-webkit-scrollbar-thumb, .conv-side::-webkit-scrollbar-thumb,
#admDemandesTable::-webkit-scrollbar-thumb, #admProsTable::-webkit-scrollbar-thumb, #admClientsTable::-webkit-scrollbar-thumb,
#admReviewsTable::-webkit-scrollbar-thumb, #admSubsTable::-webkit-scrollbar-thumb, #admNotifList::-webkit-scrollbar-thumb,
#clientFavGrid::-webkit-scrollbar-thumb, #clientAvisList::-webkit-scrollbar-thumb,
#proAvisList::-webkit-scrollbar-thumb, #proOppList::-webkit-scrollbar-thumb, #clConvMessages::-webkit-scrollbar-thumb, #proConvMessages::-webkit-scrollbar-thumb,
#fpClientList::-webkit-scrollbar-thumb {
  background-color: var(--gray-400, #9ca3af);
  border-radius: 999px;
  border: 2px solid var(--gray-100, #f3f4f6);
  transition: background-color .2s ease;
}
/* Survol direct du pouce : un cran plus foncé. */
html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover,
.dash-main::-webkit-scrollbar-thumb:hover,
.dash-content::-webkit-scrollbar-thumb:hover, .client-panel::-webkit-scrollbar-thumb:hover,
.pro-main::-webkit-scrollbar-thumb:hover, .pro-content::-webkit-scrollbar-thumb:hover,
.pro-panel-section::-webkit-scrollbar-thumb:hover,
#pg-facturation .fp-sidebar::-webkit-scrollbar-thumb:hover, #pg-facturation .fp-content::-webkit-scrollbar-thumb:hover,
#pg-facturation .fp-modal-body::-webkit-scrollbar-thumb:hover, #pg-facturation .fp-setup-card::-webkit-scrollbar-thumb:hover,
#pg-fiche .pro-sidebar::-webkit-scrollbar-thumb:hover,
.res-side::-webkit-scrollbar-thumb:hover, .res-list-pane::-webkit-scrollbar-thumb:hover, .conv-side::-webkit-scrollbar-thumb:hover,
#admDemandesTable::-webkit-scrollbar-thumb:hover, #admProsTable::-webkit-scrollbar-thumb:hover, #admClientsTable::-webkit-scrollbar-thumb:hover,
#admReviewsTable::-webkit-scrollbar-thumb:hover, #admSubsTable::-webkit-scrollbar-thumb:hover, #admNotifList::-webkit-scrollbar-thumb:hover,
#clientFavGrid::-webkit-scrollbar-thumb:hover, #clientAvisList::-webkit-scrollbar-thumb:hover,
#proAvisList::-webkit-scrollbar-thumb:hover, #proOppList::-webkit-scrollbar-thumb:hover, #clConvMessages::-webkit-scrollbar-thumb:hover, #proConvMessages::-webkit-scrollbar-thumb:hover,
#fpClientList::-webkit-scrollbar-thumb:hover {
  background-color: var(--gray-400, #9ca3af);
}
/* Pendant le drag (glisser le pouce) : encore plus foncé. */
html::-webkit-scrollbar-thumb:active, body::-webkit-scrollbar-thumb:active,
.dash-main::-webkit-scrollbar-thumb:active,
.dash-content::-webkit-scrollbar-thumb:active, .client-panel::-webkit-scrollbar-thumb:active,
.pro-main::-webkit-scrollbar-thumb:active, .pro-content::-webkit-scrollbar-thumb:active,
.pro-panel-section::-webkit-scrollbar-thumb:active,
#pg-facturation .fp-sidebar::-webkit-scrollbar-thumb:active, #pg-facturation .fp-content::-webkit-scrollbar-thumb:active,
#pg-facturation .fp-modal-body::-webkit-scrollbar-thumb:active, #pg-facturation .fp-setup-card::-webkit-scrollbar-thumb:active,
#pg-fiche .pro-sidebar::-webkit-scrollbar-thumb:active,
.res-side::-webkit-scrollbar-thumb:active, .res-list-pane::-webkit-scrollbar-thumb:active, .conv-side::-webkit-scrollbar-thumb:active,
#admDemandesTable::-webkit-scrollbar-thumb:active, #admProsTable::-webkit-scrollbar-thumb:active, #admClientsTable::-webkit-scrollbar-thumb:active,
#admReviewsTable::-webkit-scrollbar-thumb:active, #admSubsTable::-webkit-scrollbar-thumb:active, #admNotifList::-webkit-scrollbar-thumb:active,
#clientFavGrid::-webkit-scrollbar-thumb:active, #clientAvisList::-webkit-scrollbar-thumb:active,
#proAvisList::-webkit-scrollbar-thumb:active, #proOppList::-webkit-scrollbar-thumb:active, #clConvMessages::-webkit-scrollbar-thumb:active, #proConvMessages::-webkit-scrollbar-thumb:active,
#fpClientList::-webkit-scrollbar-thumb:active {
  background-color: var(--gray-500, #6b7280);
}
/* Focus clavier visible (WCAG 2.2 SC 2.4.11/2.4.13) — --orange-d (pas
   --orange) car #FF6B35 seul tombe sous le ratio 3:1 requis par la SC
   1.4.11 sur fond blanc (~2.83:1 mesuré) ; #e85520 passe (~3.65:1). */
.dash-main:focus-visible, .dash-content:focus-visible, .client-panel:focus-visible,
.pro-main:focus-visible, .pro-content:focus-visible, .pro-panel-section:focus-visible,
#pg-facturation .fp-sidebar:focus-visible, #pg-facturation .fp-content:focus-visible,
#pg-facturation .fp-modal-body:focus-visible, #pg-facturation .fp-setup-card:focus-visible,
#pg-fiche .pro-sidebar:focus-visible,
.res-side:focus-visible, .res-list-pane:focus-visible, .conv-side:focus-visible,
#admDemandesTable:focus-visible, #admProsTable:focus-visible, #admClientsTable:focus-visible,
#admReviewsTable:focus-visible, #admSubsTable:focus-visible, #admNotifList:focus-visible,
#clientFavGrid:focus-visible, #clientAvisList:focus-visible,
#proAvisList:focus-visible, #proOppList:focus-visible, #clConvMessages:focus-visible, #proConvMessages:focus-visible {
  outline: 2px solid var(--orange-d, #e85520);
  outline-offset: -2px;
}

/* Listes de nav des sidebars (.prs-nav-scroll/.ds-nav-scroll/.as-nav-scroll,
   voir css/dashboard-pro.css, css/dashboard-client.css, css/admin.css) :
   overflow-y:auto reste actif (le menu doit pouvoir défiler si trop long
   sur un petit écran), mais SANS piste de scrollbar visible — contrairement
   aux listes de contenu (messages, avis, devis...), c'est un menu de
   navigation, une barre visible en permanence y ferait tache signalée par
   capture d'écran. */
.prs-nav-scroll, .ds-nav-scroll, .as-nav-scroll {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.prs-nav-scroll::-webkit-scrollbar, .ds-nav-scroll::-webkit-scrollbar, .as-nav-scroll::-webkit-scrollbar {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   LE COMPOSEUR DE MESSAGES — UN SEUL, POUR LES DEUX ESPACES

   ── LE DÉFAUT QUI A RENDU CETTE CLASSE NÉCESSAIRE ────────────────────────
   Les deux composeurs étaient écrits à l'identique dans index.html, tout
   en style en ligne, dont `display:flex`. Côté professionnel, le champ
   apparaissait pourtant minuscule et collé à gauche, avec le bouton orange
   passé à la ligne.

   La cause n'était pas dans le CSS mais dans une ligne de JavaScript :

       zone.style.display = verrouille ? 'none' : '';

   Affecter la chaîne VIDE ne veut pas dire « valeur par défaut » : cela
   SUPPRIME la déclaration de l'attribut style. Le `display:flex` du
   balisage disparaissait donc dès la première ouverture de conversation,
   et le div retombait sur `display:block` — faute d'une règle de feuille
   de style pour le rattraper. En block, `flex:1` ne veut plus rien dire :
   l'input reprenait sa largeur intrinsèque, et le bouton, qui porte lui
   aussi `display:flex`, devenait une boîte de niveau bloc passée à la
   ligne. Le composeur client, jamais touché par ce code, restait intact.

   Poser la mise en page ICI change la nature du remède : `style.display`
   remis à '' retombe désormais sur `flex`, et le défaut redevient
   impossible même si quelqu'un réécrit la ligne fautive. La ligne est
   corrigée en plus, pas à la place.

   ── LES TROIS DÉCLARATIONS QUI FONT LE TRAVAIL ───────────────────────────
   `flex: 1` fait grandir le champ, `min-width: 0` l'autorise à rétrécir
   sous sa largeur intrinsèque — sans elle, un élément flex refuse de
   descendre en dessous et pousse son voisin hors de l'écran — et
   `flex-shrink: 0` garde le bouton entier. Aucune largeur devinée, aucune
   marge de rattrapage, aucun positionnement absolu.
   ═══════════════════════════════════════════════════════════════════════ */
.msg-composeur {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  background: #fff;
  border-top: 1px solid var(--gray-100);
  /* Marges gauche et droite identiques : le composeur n'essaie pas de
     s'aligner sur la zone de messages, qui porte une barre de défilement
     permanente à droite. Compenser cette barre en dur casserait à la
     première différence de navigateur. */
  padding: 14px 20px;
}

.msg-champ {
  flex: 1;
  /* La déclaration la plus souvent oubliée, et la seule qui empêche le
     bouton d'être poussé hors de l'écran sur petit écran. */
  min-width: 0;
  box-sizing: border-box;
  min-height: 44px;
  border: 1.5px solid var(--gray-200);
  border-radius: 24px;
  padding: 10px 16px;
  /* 16 px : c'est aussi le seuil sous lequel iOS zoome automatiquement à
     la mise au point, ce qui déplace toute la page. */
  font-size: var(--texte-champ);
  font-family: inherit;
  outline: none;
}
.msg-champ:disabled { background: var(--gray-50); cursor: not-allowed; }

.msg-envoyer {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--orange);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ========== RESPONSIVE (global) ========== */
@media (max-width: 768px) {
  .gnav-links { display: none; }
  .hamburger { display: block; }
}

/* Sous 480 px, on récupère de la largeur sur les marges plutôt que sur le
   champ : c'est lui qu'on veut voir grandir. Le bouton garde sa cible de
   44 px, et rien ne passe à la ligne. */
@media (max-width: 480px) {
  .msg-composeur { padding: 10px 12px; gap: 8px; }
  .msg-champ { padding: 10px 14px; }
}

/* ── RETOUR DISCRET (js/toast.js retourDiscret) ─────────────────────────
   Un mot à côté du bouton, jamais par-dessus l'écran. Visible 4 s, puis
   le texte s'efface ; la zone reste pour rester annoncée. */
.retour-discret { display: inline-block; margin-left: 10px; font-size: 13px; font-weight: 700; color: #15803d; opacity: 0; transition: opacity .2s; vertical-align: middle; }
.retour-discret.visible { opacity: 1; }
.retour-discret:empty { margin-left: 0; }

/* ── MODALE « LAISSER UN AVIS » (#avisModal, js/modals.js) ───────────────
   Partagée par la fiche artisan et l'espace client. Fond marine translucide,
   fenêtre blanche compacte, orange réservé au bouton principal et aux
   étoiles choisies. Les étoiles sont de vrais boutons radio : le focus
   clavier reste visible, la sélection se lit sans couleur (étoiles pleines
   + libellé « 4 étoiles — Très bien »). */
.am-backdrop { position: fixed; inset: 0; z-index: 820; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(26, 26, 46, .55); }
.am-backdrop[hidden] { display: none; }
.am-fenetre { background: #fff; border-radius: 16px; width: 100%; max-width: 440px; max-height: 92vh; overflow-y: auto; padding: 1.5rem 1.5rem 1.25rem; box-shadow: 0 18px 50px rgba(15, 15, 35, .25); }
.am-titre { margin: 0 0 2px; font-size: 18px; font-weight: 800; color: var(--navy); }
.am-cible { margin: 0 0 14px; font-size: 13px; color: var(--gray-500); }
.am-cible:empty { display: none; }
.am-etoiles { border: 0; padding: 0; margin: 0 0 14px; }
.am-legende, .am-label { display: block; font-size: 13px; font-weight: 700; color: var(--gray-600); margin-bottom: 6px; }
.am-obligatoire { color: var(--orange); }
.am-etoiles-ligne { display: flex; gap: 2px; }
.am-etoiles input[type="radio"] { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
.am-etoile { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 8px; color: var(--gray-200); cursor: pointer; }
.am-etoile .ic { width: 28px; height: 28px; }
.am-etoiles input[type="radio"]:focus-visible + .am-etoile { outline: 2px solid var(--navy); outline-offset: 1px; }
.am-etoiles.am-choisi-1 .am-etoile:nth-of-type(-n+1), .am-etoiles.am-choisi-2 .am-etoile:nth-of-type(-n+2), .am-etoiles.am-choisi-3 .am-etoile:nth-of-type(-n+3), .am-etoiles.am-choisi-4 .am-etoile:nth-of-type(-n+4), .am-etoiles.am-choisi-5 .am-etoile:nth-of-type(-n+5) { color: var(--orange); }
.am-note-libelle { margin: 4px 0 0; min-height: 18px; font-size: 13px; color: var(--gray-600); }
.am-textarea { width: 100%; box-sizing: border-box; border: 1.5px solid var(--gray-200); border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 14px; line-height: 1.5; color: var(--navy); resize: vertical; }
.am-textarea:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; border-color: var(--navy); }
.am-sous { display: flex; justify-content: space-between; gap: 10px; margin-top: 4px; font-size: 13px; color: var(--gray-500); }
.am-compteur.am-hors-limite { color: #b91c1c; font-weight: 700; }
.am-public { margin: 12px 0 8px; font-size: 13px; line-height: 1.55; color: var(--gray-500); }
.am-photo { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--gray-600); cursor: pointer; }
.am-photo input { margin-top: 3px; }
.am-erreur { margin: 8px 0 0; font-size: 13px; font-weight: 600; color: #b91c1c; }
.am-erreur:empty { display: none; }
.am-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.am-btn-second, .am-btn-principal { border-radius: 9px; padding: 10px 16px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.am-btn-second { background: #f7f8fa; color: var(--navy); border: 1.5px solid var(--gray-200); }
.am-btn-principal { background: var(--orange); color: #fff; border: 1.5px solid var(--orange); }
.am-btn-principal:hover { background: var(--orange-d); border-color: var(--orange-d); }
.am-btn-principal[disabled] { opacity: .6; cursor: default; }
.am-btn-second:focus-visible, .am-btn-principal:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
@media (max-width: 480px) {
  .am-backdrop { padding: 0; align-items: flex-end; }
  .am-fenetre { border-radius: 16px 16px 0 0; max-height: 94vh; }
  .am-actions { flex-direction: column-reverse; }
  .am-btn-second, .am-btn-principal { width: 100%; }
}

/* ── MENU « ⋯ » ET DIALOGUE « MASQUER » D'UNE CONVERSATION (js/modals.js) ──
   Partagés par les messageries du client et du professionnel. Le bouton
   reste dans le flux de la ligne, discret au repos (opacité faible, jamais
   invisible au clavier), et le menu se pose juste sous lui. */
.conv-menu-btn { flex-shrink: 0; align-self: center; width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: var(--gray-500); font-size: 18px; line-height: 1; cursor: pointer; opacity: .55; font-family: inherit; position: relative; }
.conv-ligne:hover .conv-menu-btn, .conv-menu-btn:hover, .conv-menu-btn:focus-visible, .conv-menu-btn[aria-expanded="true"] { opacity: 1; }
.conv-menu-btn:hover { background: var(--gray-100); color: var(--navy); }
.conv-menu-btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; }
.conv-menu { position: absolute; right: 12px; margin-top: 40px; z-index: 30; background: #fff; border: 1.5px solid var(--gray-200); border-radius: 10px; box-shadow: 0 10px 30px rgba(15, 15, 35, .15); padding: 4px; min-width: 200px; }
.conv-menu-item { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 9px 12px; border-radius: 7px; font: inherit; font-size: 13px; font-weight: 600; color: var(--navy); cursor: pointer; }
.conv-menu-item:hover { background: var(--gray-100); }
.conv-menu-item:focus-visible { outline: 2px solid var(--navy); outline-offset: -2px; }
.conv-dialog-fond { position: fixed; inset: 0; background: rgba(26, 26, 46, .45); display: flex; align-items: center; justify-content: center; z-index: 9999; padding: 16px; }
.conv-dialog { background: #fff; border-radius: 14px; max-width: 440px; width: 100%; padding: 24px; box-shadow: 0 20px 50px rgba(0, 0, 0, .25); }
.conv-dialog-titre { margin: 0 0 10px; font-size: 17px; font-weight: 800; color: var(--navy); }
.conv-dialog-texte { margin: 0 0 8px; font-size: 14px; line-height: 1.55; color: var(--gray-600); }
.conv-dialog-avec { margin: 0 0 18px; font-size: 13px; color: var(--gray-500); }
.conv-dialog-actions { display: flex; gap: 10px; justify-content: flex-end; }
.conv-dialog-annuler, .conv-dialog-confirmer { padding: 10px 18px; border-radius: 9px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.conv-dialog-annuler { border: 1.5px solid var(--gray-200); background: #fff; color: var(--navy); }
.conv-dialog-confirmer { border: 1.5px solid var(--navy); background: var(--navy); color: #fff; }
.conv-dialog-annuler:focus-visible, .conv-dialog-confirmer:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.conv-dialog-erreur { margin: 12px 0 0; font-size: 13px; color: #b91c1c; }
@media (max-width: 480px) {
  .conv-dialog-actions { flex-direction: column-reverse; }
  .conv-dialog-annuler, .conv-dialog-confirmer { width: 100%; }
}