/* =========================================================
   PROFILE.CSS — fiche professionnelle publique
   Chargé uniquement par le gabarit tpl-fiche
   ========================================================= */

/* Valeurs reprises telles quelles de la maquette de reference
   (monartisan_v3_pro) : 2.5rem de hauteur, photo 110px, rayon 22px. */
.pro-hero { background: var(--navy); padding: 2.5rem 2rem; }
.pro-hero-inner { max-width: 1000px; margin: 0 auto; display: flex; gap: 2rem; align-items: flex-start; }
.pro-hero-photo { width: 110px; height: 110px; border-radius: 22px; overflow: hidden; flex-shrink: 0; border: 4px solid rgba(255,255,255,.1); }
.pro-hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.pro-hero-info { flex: 1; }
.pro-hero-name { font-family: 'DM Sans', sans-serif; font-size: 28px; font-weight: 900; color: #fff; margin-bottom: 4px; line-height: 1.15; word-break: break-word; }
.pro-hero-job { font-size: 16px; color: var(--orange); font-weight: 600; margin-bottom: 10px; }
.pro-hero-metas { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 12px; }
.phm { font-size: 13px; color: rgba(255,255,255,.5); display: flex; align-items: center; gap: 5px; }
.pro-hero-bdg { display: flex; gap: 8px; flex-wrap: wrap; }
.phb { padding: 4px 12px; border-radius: 100px; font-size: 13px; font-weight: 700; }
.phb-g { background: rgba(34,197,94,.15); color: #4ade80; border: 1px solid rgba(34,197,94,.2); }
.phb-b { background: rgba(59,130,246,.15); color: #93c5fd; border: 1px solid rgba(59,130,246,.2); }
.phb-o { background: rgba(249,115,22,.15); color: #fb923c; border: 1px solid rgba(249,115,22,.2); }
.pro-hero-actions { display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; }
.pha-btn1 { background: var(--orange); color: #fff; border: none; border-radius: 12px; padding: 13px 24px; font-size: 14px; font-weight: 700; width: 190px; cursor: pointer; transition: all .15s; }
.pha-btn1:hover { background: var(--orange-d); }
.pha-btn2 { background: rgba(255,255,255,.08); color: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.15); border-radius: 12px; padding: 11px 24px; font-size: 14px; font-weight: 600; width: 190px; cursor: pointer; transition: all .15s; }
.pha-btn2:hover { background: rgba(255,255,255,.14); }
.pha-btn3 { background: none; color: rgba(255,255,255,.4); border: none; font-size: 13px; cursor: pointer; text-align: center; }

/* Corps centre : 1000px et laterale 310px, mesures exactes de la maquette.
   Seule difference volontaire avec la maquette : minmax(0,1fr) au lieu de
   1fr. Avec 1fr, une image ou un mot long pousse la colonne au-dela du
   conteneur et fait apparaitre une barre de defilement horizontale sur
   toute la page. Le rendu est identique, le debordement en moins. */
.pro-body-wrap { max-width: 1000px; margin: 0 auto; padding: 2rem 1.5rem; display: grid; grid-template-columns: minmax(0,1fr) 310px; gap: 1.5rem; align-items: start; }
.pro-main-col { min-width: 0; }
.pro-panel { background: #fff; border: 1px solid var(--gray-100); border-radius: var(--radius-lg); padding: 1.5rem; margin-bottom: 1rem; }
.pp-title { font-size: 16px; font-weight: 700; margin-bottom: 1rem; padding-bottom: .875rem; border-bottom: 1px solid var(--gray-100); }
.photos-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.photo-thumb { height: 100px; border-radius: 10px; overflow: hidden; }
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* La vignette est un <button> : elle recoit donc les styles par defaut du
   navigateur, qu'il faut neutraliser. On la garde comme bouton plutot que
   d'ajouter un onclick sur un <div> — un vrai bouton est atteignable au
   clavier, annonce comme tel par les lecteurs d'ecran, et declenchable
   par Entree comme par Espace, sans une ligne de JavaScript. */
button.photo-thumb {
  padding: 0;
  border: 0;
  background: var(--gray-100);
  display: block;
  width: 100%;
  position: relative;
  cursor: zoom-in;
  transition: transform .15s ease, box-shadow .15s ease;
}
button.photo-thumb img { transition: transform .25s ease; }
button.photo-thumb:hover { box-shadow: 0 4px 14px rgba(15,15,35,.18); }
button.photo-thumb:hover img { transform: scale(1.06); }
button.photo-thumb:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}

/* Petite loupe discrete, en bas a droite. Dessinee en CSS avec une image
   SVG en ligne : aucun fichier a telecharger, aucun caractere de police
   exotique, et rien a ajouter dans le HTML de chaque vignette. */
button.photo-thumb::after {
  content: '';
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background-color: rgba(15,15,35,.55);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px 13px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21M10.5 7.6v5.8M7.6 10.5h5.8'/%3E%3C/svg%3E");
  opacity: .82;
  transition: opacity .15s ease, background-color .15s ease;
  pointer-events: none;
}
button.photo-thumb:hover::after,
button.photo-thumb:focus-visible::after {
  opacity: 1;
  background-color: var(--orange);
}

/* ═══════════════════════════════════════════════════════════════════
   AGRANDISSEMENT D'UNE REALISATION (lightbox)

   Aucune bibliotheque externe. Le fond reprend le bleu nuit MonArtisan
   avec de la transparence, les commandes sont blanches et passent a
   l'orange au survol.
   ═══════════════════════════════════════════════════════════════════ */
.fx-lb {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 10, 24, .93);
  padding: 0;
  /* Aucun defilement possible a l'interieur : ni vertical, ni surtout
     horizontal, qui ferait apparaitre une barre sur telephone. */
  overflow: hidden;
  overscroll-behavior: contain;
  animation: fx-lb-apparition .16s ease-out;
}
.fx-lb[hidden] { display: none; }

@keyframes fx-lb-apparition { from { opacity: 0; } to { opacity: 1; } }

/* La scene fait exactement la taille de son contenu : tout ce qui
   l'entoure est donc le fond, et un clic dessus ferme la fenetre.
   Un clic sur l'image, lui, ne la ferme pas. */
.fx-lb-scene {
  margin: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: 92vw;
  max-height: 88vh;
}

.fx-lb-scene img {
  display: block;
  /* Dimensions demandees : l'image entiere, sans deformation ni
     rognage, adaptee a l'ecran. */
  max-width: 92vw;
  max-height: 88vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  background: rgba(255,255,255,.04);
  animation: fx-lb-zoom .18s ease-out;
}
@keyframes fx-lb-zoom { from { transform: scale(.97); } to { transform: scale(1); } }

/* Legende : n'apparait que si l'artisan en a saisi une (attribut hidden
   pilote par le JS). Aucun texte de remplacement. */
.fx-lb-legende {
  color: rgba(255,255,255,.85);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  max-width: min(92vw, 640px);
  overflow-wrap: anywhere;
}
.fx-lb-legende[hidden] { display: none; }

/* Message d'attente ou d'erreur, superpose au centre de la scene. */
.fx-lb-etat {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: rgba(255,255,255,.7);
  font-size: 13px;
  text-align: center;
  pointer-events: none;
}
.fx-lb-etat:empty { display: none; }

/* ── Commandes ── */
.fx-lb-fermer, .fx-lb-nav {
  position: absolute;
  z-index: 2;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(15,15,35,.55);
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.fx-lb-fermer:hover, .fx-lb-nav:hover {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}
.fx-lb-fermer:focus-visible, .fx-lb-nav:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}

.fx-lb-fermer {
  top: 14px;
  right: 14px;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  font-size: 28px;
  padding-bottom: 3px;
}

.fx-lb-nav {
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 64px;
  border-radius: 12px;
  font-size: 34px;
  padding-bottom: 4px;
}
.fx-lb-prec { left: 14px; }
.fx-lb-suiv { right: 14px; }
/* Une seule photo : les deux fleches disparaissent completement, elles
   ne sont donc pas non plus atteignables au clavier. */
.fx-lb-nav[hidden] { display: none; }

.fx-lb-compteur {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  background: rgba(15,15,35,.55);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 100px;
  padding: 5px 14px;
}
.fx-lb-compteur:empty { display: none; }

/* ── Telephone : commandes plus proches des bords, image plus large ── */
@media (max-width: 640px) {
  .fx-lb-scene, .fx-lb-scene img { max-width: 96vw; }
  .fx-lb-scene img { max-height: 74vh; }
  .fx-lb-fermer { top: 10px; right: 10px; width: 38px; height: 38px; font-size: 25px; }
  .fx-lb-nav { width: 38px; height: 54px; font-size: 28px; }
  .fx-lb-prec { left: 8px; }
  .fx-lb-suiv { right: 8px; }
  .fx-lb-compteur { bottom: 12px; }
}

/* Respect du reglage systeme « reduire les animations ». */
@media (prefers-reduced-motion: reduce) {
  .fx-lb, .fx-lb-scene img { animation: none; }
  button.photo-thumb, button.photo-thumb img { transition: none; }
  button.photo-thumb:hover img { transform: none; }
}
.specs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.spec-item { background: var(--gray-50); border-radius: 9px; padding: 9px 12px; font-size: 13px; color: var(--gray-600); display: flex; align-items: center; gap: 7px; }
.rating-section { display: flex; gap: 2rem; align-items: center; margin-bottom: 1.5rem; }
.rating-big-num { font-family: 'DM Sans', sans-serif; font-size: 52px; font-weight: 900; color: var(--orange); line-height: 1; }
.rating-stars-big { font-size: 22px; color: var(--amber); margin-bottom: 4px; }
.rating-total { font-size: 13px; color: var(--gray-400); }
.rating-bars { flex: 1; }
.rb-row { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.rb-label { font-size: 13px; color: var(--gray-400); width: 30px; }
.rb-track { flex: 1; height: 6px; background: var(--gray-100); border-radius: 3px; overflow: hidden; }
.rb-fill { height: 100%; background: var(--orange); border-radius: 3px; }
.rb-count { font-size: 13px; color: var(--gray-400); width: 18px; text-align: right; }
.reviews-list { display: flex; flex-direction: column; gap: 1.25rem; }
.review-item { padding-bottom: 1.25rem; border-bottom: 1px solid var(--gray-100); }
.review-item:last-child { border: none; padding-bottom: 0; }
.review-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.rev-av { width: 38px; height: 38px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.rev-av img { width: 100%; height: 100%; object-fit: cover; }
/* Repli quand le client n'a pas televerse de photo : ses initiales sur
   fond gris, meme gabarit que l'avatar. La maquette avait toujours une
   photo parce que ses donnees etaient inventees. */
.rev-av-initiales { display: flex; align-items: center; justify-content: center;
  background: var(--gray-100); color: var(--gray-500); font-size: 13px; font-weight: 800; }
.rev-name { font-size: 14px; font-weight: 700; }
.rev-date { font-size: 13px; color: var(--gray-400); }
.rev-stars { margin-left: auto; color: var(--amber); font-size: 13px; }
/* Mission 18, lot 1 — le commentaire d'un avis et la réponse publique du
   professionnel sont du texte saisi : ses retours à la ligne, ses
   paragraphes et ses espaces sont conservés à l'affichage, comme pour la
   bio (#pg-fiche .fiche-bio ci-dessous). Sans cette règle le navigateur
   réduit tout à une seule ligne. Aucune couleur n'est touchée. */
.rev-text { font-size: 13px; color: var(--gray-600); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.rev-type { font-size: 13px; color: var(--gray-400); margin-top: 5px; }
.pro-sidebar { background: #fff; }
/* Laterale collante : regle exacte de la maquette. Le defilement interne
   ne se declenche que si la colonne depasse la hauteur de l'ecran. */
#pg-fiche .pro-sidebar { position: sticky; top: 58px; align-self: start; min-width: 0; max-height: calc(100vh - 70px); overflow-y: auto; }
.ps-cta { background: var(--navy); border-radius: 14px; padding: 1.5rem; text-align: center; margin-bottom: 1rem; overflow: hidden; }
.ps-cta h3 { font-size: 17px; font-weight: 700; color: #fff; margin-bottom: 5px; }
.ps-cta p { font-size: 13px; color: rgba(255,255,255,.4); margin-bottom: 1.25rem; line-height: 1.5; }
.ps-btn1 { width: 100%; background: var(--orange); color: #fff; border: none; border-radius: 11px; padding: 13px; font-size: 14px; font-weight: 700; cursor: pointer; margin-bottom: 8px; font-family: inherit; }
.ps-btn2 { width: 100%; background: rgba(255,255,255,.06); color: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.12); border-radius: 11px; padding: 11px; font-size: 13px; cursor: pointer; font-family: inherit; }
.ps-info { background: #fff; border: 1px solid var(--gray-100); border-radius: var(--radius-lg); padding: 1.25rem; }
.ps-info-title { font-size: 15px; font-weight: 700; margin-bottom: 1rem; }
.info-line { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--gray-50); }
.info-line:last-child { border: none; }
.il-icon { font-size: 16px; flex-shrink: 0; }
.il-label { font-size: 14px; color: var(--gray-400); margin-bottom: 2px; }
.il-val { font-size: 13px; font-weight: 700; }
/* Conseil « À vérifier avant de signer » dans le bloc Informations de la
   fiche : texte courant, pas une valeur en gras. */
.il-conseil { font-size: 13px; line-height: 1.55; color: var(--gray-600); }
.info-line-conseil { border-top: 1px solid var(--gray-100); margin-top: 4px; padding-top: 12px; }

@media (max-width: 768px) {
  .pro-hero-inner { flex-direction: column; }
  .pro-body-wrap { grid-template-columns: minmax(0,1fr); }
}

/* ═══════════════════════════════════════════════════════════════════
   FICHE PUBLIQUE — reprise de l'organisation de l'ancien site.
   Aucun bloc n'est ajoute pour du contenu inexistant : les elements
   sans donnee reelle sont masques par le JS, pas remplis de texte
   generique.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Galerie de realisations ──
   On utilise .photos-grid / .photo-thumb de la maquette (3 colonnes,
   vignettes de 100px). Une seule difference : la maquette n'avait que
   trois photos figees, ici le nombre est reel et la grille se poursuit
   sur plusieurs lignes. Sous 560px on passe a 2 colonnes, sinon les
   vignettes deviennent illisibles sur telephone. */
#pg-fiche .photos-grid img { display: block; }

#pg-fiche .fiche-bio {
  font-size: 14px;
  color: #4b5563;
  line-height: 1.75;
  white-space: pre-line;
  overflow-wrap: anywhere;
  margin: 0;
}

/* ── Etats vides : une phrase, pas un bloc vide sous un titre ── */
#pg-fiche .fiche-vide {
  font-size: 13.5px;
  color: var(--gray-400);
  padding: 4px 0;
  margin: 0;
}

/* ── Prochains creneaux (colonne laterale) ── */
#pg-fiche .fiche-creneaux { display: flex; flex-direction: column; gap: 7px; }

/* Trois etats colores repris tels quels de la maquette : vert pour
   aujourd'hui, orange pour demain, gris ensuite. Ce sont uniquement des
   couleurs d'affichage — le creneau lui-meme vient de l'agenda reel. */
#pg-fiche .fiche-creneau {
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: all .15s;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}
#pg-fiche .fiche-creneau .fiche-creneau-h { font-weight: 700; white-space: nowrap; }
#pg-fiche .fiche-creneau--vert   { background: #f0fdf4; border: 1.5px solid #bbf7d0; color: #166534; }
#pg-fiche .fiche-creneau--orange { background: #fff7f4; border: 1.5px solid #fed7aa; color: #9a3412; }
#pg-fiche .fiche-creneau--gris   { background: #f9fafb; border: 1.5px solid #e5e7eb; color: #374151; }
#pg-fiche .fiche-creneau:hover   { filter: brightness(.97); }

/* Lien « Voir tous les creneaux » de la maquette : il deplie le vrai
   selecteur de date au lieu d'afficher un message d'attente. */
#pg-fiche .fiche-creneaux-plus-lien { text-align: center; margin-top: .875rem; }
#pg-fiche .fiche-creneaux-plus-lien button {
  background: none; border: none; padding: 0;
  font-family: inherit; font-size: 14px; font-weight: 700;
  color: var(--teal, #0d9488); cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
#pg-fiche .fiche-creneaux-plus { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--gray-100); }
#pg-fiche .fiche-creneaux-plus label {
  display: block; font-size: 14px; color: var(--gray-400); margin-bottom: 5px; font-weight: 600;
}
#pg-fiche .fiche-creneaux-plus input[type="date"] {
  width: 100%; border: 1.5px solid var(--gray-200); border-radius: 9px;
  padding: 7px 9px; font-size: 13px; font-family: inherit; outline: none;
}
#pg-fiche .fiche-slots { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
#pg-fiche .fiche-slot {
  background: #fff; border: 1.5px solid var(--gray-200); color: var(--navy);
  border-radius: 8px; padding: 6px 11px; font-size: 14px; font-weight: 700;
  cursor: pointer; font-family: inherit; transition: all .15s;
}
#pg-fiche .fiche-slot:hover { border-color: var(--orange); color: var(--orange); }

/* ── Aucun debordement horizontal, quelle que soit la largeur ── */
#pg-fiche { overflow-x: hidden; }
#pg-fiche img, #pg-fiche .pro-panel, #pg-fiche .ps-info { max-width: 100%; }

/* ═══ TABLETTE ═══ */
@media (max-width: 1024px) {
  #pg-fiche .pro-body-wrap { padding: 1.5rem 1.25rem; }
}

/* ═══ TABLETTE ETROITE ET TELEPHONE ═══ */
@media (max-width: 860px) {
  /* Une seule colonne : la carte d'action passe SOUS le contenu
     principal, comme demande. `order` suffit, la grille est deja
     lineaire a ce stade. */
  #pg-fiche .pro-body-wrap { grid-template-columns: minmax(0, 1fr); padding: 1.25rem 1rem 2.5rem; }
  #pg-fiche .pro-main-col { order: 1; }
  #pg-fiche .pro-sidebar  { order: 2; position: static; top: auto;
                            max-height: none; overflow-y: visible; }  /* sticky et defilement interne desactives */

  #pg-fiche .pro-hero { padding: 1.25rem 1rem; }
  #pg-fiche .pro-hero-inner { gap: 1rem; }
  #pg-fiche .pro-hero-name { font-size: 22px; }
  #pg-fiche .pro-hero-actions { width: 100%; }
  #pg-fiche .pro-hero-actions button { width: 100%; }   /* boutons pleine largeur */
}

@media (max-width: 560px) {
  #pg-fiche .photos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #pg-fiche .pro-hero-photo { width: 78px; height: 78px; }
  #pg-fiche .pro-panel { padding: 1.1rem; }
}


/* ── Bandeau « vous voyez votre fiche comme un client » ──
   N'apparait que pour l'artisan proprietaire, jamais pour un visiteur.
   Couleurs MonArtisan : fond bleu nuit legerement eclairci, accent orange
   sur l'action principale. */
#pg-fiche .fiche-bandeau-proprio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 16px;
  background: #1b1b3a;
  border-bottom: 1px solid rgba(255,255,255,.1);
  padding: 10px 1.25rem;
  color: rgba(255,255,255,.75);
  font-size: 13px;
}
#pg-fiche .fbp-texte { font-weight: 600; }
#pg-fiche .fbp-actions { display: flex; flex-wrap: wrap; gap: 8px; }
#pg-fiche .fbp-btn {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.85);
  border-radius: 9px;
  padding: 7px 14px;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
#pg-fiche .fbp-btn:hover { background: rgba(255,255,255,.16); }
#pg-fiche .fbp-btn-1 { background: var(--orange); border-color: var(--orange); color: #fff; }
#pg-fiche .fbp-btn-1:hover { background: var(--orange-d, #e85a2a); border-color: var(--orange-d, #e85a2a); }
#pg-fiche .fbp-btn:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

@media (max-width: 640px) {
  #pg-fiche .fiche-bandeau-proprio { padding: 9px 1rem; font-size: 13px; }
  #pg-fiche .fbp-actions { width: 100%; }
  #pg-fiche .fbp-btn { flex: 1; }
}

/* ── « Laisser un avis » et réponse du professionnel (mission 16, lot 2) ──
   Un bouton discret (blanc, bordure grise) : l'action principale de la
   fiche reste « Demander un devis ». Le lien vers la connexion est une
   simple phrase soulignée. */
.fiche-avis-action { margin: -4px 0 12px; }
.fiche-avis-action:empty { display: none; }
.fiche-avis-btn { display: inline-flex; align-items: center; gap: 6px; background: #fff; color: var(--navy); border: 1.5px solid var(--gray-200); border-radius: 9px; padding: 8px 14px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.fiche-avis-btn:hover { border-color: var(--navy); }
.fiche-avis-btn .ic { width: 16px; height: 16px; color: var(--orange); }
.fiche-avis-info { margin: 0; font-size: 13px; color: var(--gray-500); }
.fiche-avis-lien { background: none; border: 0; padding: 0; font: inherit; font-size: 13px; color: var(--navy); text-decoration: underline; cursor: pointer; }
.fiche-avis-btn:focus-visible, .fiche-avis-lien:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.rev-reponse { margin: 10px 0 0 14px; padding: 8px 12px; border-left: 3px solid var(--gray-200); }
.rev-reponse-titre { font-size: 13px; font-weight: 700; color: var(--gray-600); margin-bottom: 3px; }