/* ==========================================================================
   Fiche publique d'un professionnel (pro.php)

   Chargée après annuaire.css, dont elle reprend les couleurs, les boutons,
   l'en-tête et le pied : la fiche fait partie de l'annuaire. Cette feuille
   ne décrit que ce qui lui est propre. La page est souvent la première que
   voit quelqu'un arrivé depuis Google : rien ici ne dépend du JavaScript.
   ========================================================================== */
.fiche{ max-width:1180px; margin:0 auto; padding:0 var(--marge) 40px; }
.fil{ padding:18px 0 12px; font-size:.82rem; color:var(--encre-3); display:flex; flex-wrap:wrap; gap:6px; }
.fil a{ color:var(--encre-2); }
.fil span[aria-current]{ color:var(--encre); }

/* ---- En-tête ---------------------------------------------------------- */
.fiche-tete{
  position:relative; border-radius:var(--r3); overflow:hidden; background:var(--surface); border:1px solid var(--trait);
  box-shadow:var(--ombre);
}
.fiche-couverture{ display:block; width:100%; padding:0; border:0; cursor:zoom-in; position:relative; background:#0E1116; aspect-ratio:21/8; overflow:hidden; }
.fiche-couverture img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform var(--d3) var(--courbe); }
.fiche-couverture:hover img{ transform:scale(1.02); }
.fiche-couverture::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 45%, rgba(18,22,29,.85)); pointer-events:none; }
.fiche-couverture-nb{
  position:absolute; right:14px; bottom:14px; z-index:1; display:inline-flex; align-items:center; gap:6px;
  padding:7px 12px; border-radius:var(--rond); background:rgba(11,13,16,.75); backdrop-filter:blur(8px); color:var(--encre); font:600 .8rem/1 'Inter',sans-serif;
}
.fiche-identite{ display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:start; padding:26px 28px 8px; }
.fiche-tete.avec-photo .fiche-identite{ margin-top:-52px; position:relative; }
.fiche-logo{
  width:88px; height:88px; object-fit:contain; border-radius:20px; background:var(--surface-2); padding:8px;
  border:1px solid var(--trait-2); box-shadow:0 14px 30px -16px #000;
}
.fiche-initiale{ display:grid; place-items:center; font:800 2.2rem/1 'Archivo',sans-serif; color:var(--accent-2); background:radial-gradient(circle at 30% 20%, rgba(47,123,255,.3), var(--surface-2) 70%); }
.fiche-titres{ min-width:0; padding-top:4px; }
.fiche-tete.avec-photo .fiche-titres{ padding-top:56px; }
.fiche-tete h1{ font-size:clamp(1.6rem,3.6vw,2.4rem); font-weight:800; letter-spacing:-.035em; line-height:1.1; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.fiche-verif{ color:var(--accent-2); display:inline-flex; }
.fiche-situe{ margin:8px 0 0; color:var(--encre-2); font-size:.95rem; }
.fiche-zone{ color:var(--encre-3); }
.fiche-resume{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; margin-top:12px; }
.fiche-resume-note:hover{ text-decoration:none; }
.fiche-resume-note:hover b{ text-decoration:underline; }
.fiche-resume-prix{ font-size:.86rem; color:var(--encre-2); }
.fiche-resume-prix b{ color:var(--encre); }
.fiche-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:18px 28px 26px; }
.fiche-actions .an-btn{ min-height:46px; }
.fiche-partager[hidden]{ display:none; }

/* Barre d'outils : les réseaux puis « Partager », dans une seule pastille de
   la hauteur des boutons, poussée à droite. Elle passe à la ligne entière
   plutôt que de se couper quand la place manque. */
.fiche-actions-outils{
  margin-left:auto; display:flex; align-items:center; gap:2px;
  min-height:46px; padding:4px 3px; border-radius:999px;
  background:var(--surface-3); border:1px solid var(--trait-2);
}
.fiche-actions-outils:not(:has(> ul)):has(> .fiche-partager[hidden]){ display:none; }
.fiche-partager{
  display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 12px 0 10px;
  border:0; border-radius:999px; background:transparent; color:var(--encre);
  font:600 .9rem/1 'Inter', sans-serif; cursor:pointer; white-space:nowrap;
  transition:background var(--d2);
}
.fiche-partager:hover, .fiche-partager:focus-visible{ background:#262D3B; }
/* Un trait fin sépare les réseaux du partage. */
.fiche-actions-reseaux + .fiche-partager{ position:relative; margin-left:7px; }
.fiche-actions-reseaux + .fiche-partager::before{
  content:""; position:absolute; left:-5px; top:9px; bottom:9px; width:1px; background:var(--trait-2);
}
/* Les réseaux en icônes, dans la rangée d'actions (en doublon du bloc
   « Retrouver… » plus bas). Chacun prend la couleur de sa marque au survol :
   repérables sans crier dans une page sombre. */
.fiche-actions-reseaux{ list-style:none; margin:0; padding:0; display:flex; gap:2px; align-items:center; }
.fiche-reseau-icone{
  display:grid; place-items:center; width:34px; height:34px; padding:0;
  border:0; border-radius:50%; background:transparent;
  color:var(--encre-2); cursor:pointer; text-decoration:none;
  transition:color var(--d2), background var(--d2);
}
.fiche-reseau-icone:hover, .fiche-reseau-icone:focus-visible{ background:#262D3B; }
.fiche-reseau-icone.reseau-instagram:hover, .fiche-reseau-icone.reseau-instagram:focus-visible{ color:#E1306C; }
.fiche-reseau-icone.reseau-facebook:hover, .fiche-reseau-icone.reseau-facebook:focus-visible{ color:#4A8BFF; }
.fiche-reseau-icone.reseau-tiktok:hover, .fiche-reseau-icone.reseau-tiktok:focus-visible{ color:#25F4EE; }
.fiche-reseau-icone.reseau-snapchat:hover, .fiche-reseau-icone.reseau-snapchat:focus-visible{ color:#FFFC00; }
.fiche-reseau-icone.reseau-whatsapp:hover, .fiche-reseau-icone.reseau-whatsapp:focus-visible{ color:#25D366; }

/* ---- Colonnes --------------------------------------------------------- */
.fiche-colonnes{ display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:18px; align-items:start; margin-top:18px; }
.fiche-principal,.fiche-cote{ display:grid; gap:18px; min-width:0; }
.fiche-cote{ position:sticky; top:calc(var(--entete) + 16px); }
.fiche-bloc{ padding:24px; background:var(--surface); border:1px solid var(--trait); border-radius:var(--r3); box-shadow:var(--ombre); min-width:0; }
.fiche-bloc h2{ font-size:1.14rem; letter-spacing:-.02em; margin:0 0 14px; }
.fiche-bloc-tete{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:6px 16px; margin-bottom:14px; }
.fiche-bloc-tete h2{ margin:0; }
.fiche-texte{ margin:0; color:var(--encre-2); line-height:1.7; }
.fiche-note{ margin:14px 0 0; font-size:.8rem; color:var(--encre-3); }
.fiche-note a{ color:inherit; text-decoration:underline; }

/* Galerie */
/* Avant / après (formule Pro) : la photo « après » dessous, l'« avant » par-dessus,
   découpée jusqu'au curseur (--pos). On glisse au doigt ou à la souris (fiche-publique.js),
   au clavier par le curseur natif, invisible mais atteignable. */
.aa-liste{ display:grid; gap:16px; }
.fiche-galerie.apres-aa{ margin-top:16px; }
.aa{ margin:0; }
.aa-cadre{ position:relative; aspect-ratio:4/3; border-radius:var(--r1); overflow:hidden; background:#0E1116;
  cursor:ew-resize; touch-action:pan-y; user-select:none; -webkit-user-select:none; }
.aa-calque{ position:absolute; inset:0; pointer-events:none; }
.aa-calque img{ width:100%; height:100%; object-fit:cover; display:block; }
/* L'avant, et son étiquette, découpés jusqu'au curseur. */
.aa-calque-avant{ clip-path:inset(0 calc(100% - var(--pos)) 0 0); }
.aa-trait{ position:absolute; top:0; bottom:0; left:var(--pos); width:3px; margin-left:-1.5px; background:#fff;
  box-shadow:0 0 14px rgba(0,0,0,.55); pointer-events:none; }
.aa-poignee{ position:absolute; top:50%; left:var(--pos); width:46px; height:46px; margin:-23px 0 0 -23px; border-radius:50%;
  display:grid; place-items:center; background:#fff; color:#0B0D10; box-shadow:0 8px 24px rgba(0,0,0,.45); pointer-events:none; }
.aa-tag{ position:absolute; top:10px; padding:4px 10px; border-radius:var(--rond); background:rgba(11,13,16,.72); color:#fff;
  font:700 .7rem/1.2 'Inter',sans-serif; letter-spacing:.08em; text-transform:uppercase; pointer-events:none; }
.aa-tag-avant{ left:10px; }
.aa-tag-apres{ right:10px; }
.aa-curseur{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; pointer-events:none; }
.aa-curseur:focus-visible ~ .aa-poignee{ outline:3px solid var(--accent-2); outline-offset:3px; }
.aa figcaption{ margin-top:8px; font-size:.88rem; color:var(--encre-2); }
.fiche-galerie{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
.fiche-galerie button{ display:block; width:100%; padding:0; border:0; border-radius:var(--r1); overflow:hidden; cursor:zoom-in; aspect-ratio:4/3; background:#0E1116; }
.fiche-galerie img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform var(--d3) var(--courbe), opacity var(--d2); }
.fiche-galerie button:hover img{ transform:scale(1.05); }

/* Prestations */
.fiche-prestations{ margin:0; padding:0; list-style:none; }
.fiche-prestations li{ display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:baseline; gap:14px; padding:14px 0; border-bottom:1px dashed var(--trait); }
.fiche-prestations li:last-child{ border-bottom:0; }
.fp-nom{ font-weight:500; }
.fp-detail{ display:block; margin-top:5px; font-weight:400; font-size:.84rem; line-height:1.6; color:var(--encre-2); max-width:62ch; }
.fp-gabarits{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.fp-gabarits span{ font-size:.72rem; color:var(--encre-2); border:1px solid var(--trait); border-radius:var(--rond); padding:2px 8px; white-space:nowrap; }
.fp-duree{ font-size:.8rem; color:var(--encre-3); white-space:nowrap; }
.fp-prix{ font:700 1.02rem/1.2 'Archivo',sans-serif; color:var(--encre); text-align:right; white-space:nowrap; }
.fp-prix small{ display:block; font:400 .68rem/1.4 'Inter',sans-serif; color:var(--encre-3); }

/* Avis */
.avis-synthese{ display:grid; grid-template-columns:auto 1fr; gap:24px; align-items:center; padding:18px; border-radius:var(--r2); background:var(--surface-2); margin-bottom:18px; }
.avis-note{ display:grid; justify-items:start; gap:6px; max-width:220px; }
.avis-note > b{ font:800 2.6rem/1 'Archivo',sans-serif; letter-spacing:-.04em; }
.avis-note > span{ font-size:.76rem; color:var(--encre-3); }
.avis-note .an-note-nb{ display:inline; }
.avis-repartition{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.avis-repartition li{ display:grid; grid-template-columns:34px 1fr 26px; align-items:center; gap:10px; font-size:.8rem; color:var(--encre-2); }
.avis-repartition i{ height:6px; border-radius:6px; background:var(--surface-3); position:relative; overflow:hidden; }
.avis-repartition i::after{ content:""; position:absolute; inset:0 auto 0 0; width:var(--part); background:var(--or); border-radius:6px; }
.avis-repartition em{ font-style:normal; text-align:right; color:var(--encre-3); }
.avis-liste{ list-style:none; margin:0; padding:0; display:grid; gap:0; }
.avis{ position:relative; padding:16px 0; border-bottom:1px solid var(--trait); }
.avis:last-child{ border-bottom:0; }
.avis-tete{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; }
.avis-auteur{ font-weight:600; }
.avis-date{ font-size:.78rem; color:var(--encre-3); }
.avis p{ margin:8px 0 0; color:var(--encre-2); line-height:1.65; }
.avis-reponse{ margin:12px 0 0 14px; padding:10px 14px; border-left:2px solid var(--accent); background:rgba(47,123,255,.06); border-radius:0 var(--r1) var(--r1) 0; font-size:.88rem; }
.avis-reponse p{ margin-top:4px; }
.avis-signaler{
  position:absolute; right:0; top:16px; display:inline-flex; align-items:center; gap:4px; border:0; background:none; cursor:pointer;
  color:var(--encre-3); font:500 .74rem/1 'Inter',sans-serif; opacity:0; transition:opacity var(--d1), color var(--d1);
}
.avis:hover .avis-signaler,.avis-signaler:focus-visible{ opacity:1; }
.avis-signaler:hover{ color:var(--encre); }
@media (hover:none){ .avis-signaler{ opacity:1; } }

/* Colonne latérale */
.fiche-reserver p{ margin:0 0 16px; color:var(--encre-2); font-size:.92rem; }
.fiche-cta{ width:100%; }
.fiche-ecrire{ display:block; margin-top:12px; text-align:center; font-size:.86rem; font-weight:600; }
.fiche-horaires{ width:100%; border-collapse:collapse; }
.fiche-horaires th{ text-align:left; font-weight:500; color:var(--encre-2); padding:8px 0; font-size:.9rem; }
.fiche-horaires td{ text-align:right; padding:8px 0; font-size:.88rem; font-variant-numeric:tabular-nums; }
.fiche-horaires tr{ border-bottom:1px dashed var(--trait); }
.fiche-horaires tr:last-child{ border-bottom:0; }
.fiche-horaires tr.ferme th,.fiche-horaires tr.ferme td{ color:var(--encre-3); }
.fiche-horaires tr.aujourdhui th,.fiche-horaires tr.aujourdhui td{ color:var(--encre); font-weight:600; }
.fiche-horaires tr.aujourdhui th::after{ content:"aujourd'hui"; margin-left:8px; font-size:.68rem; font-weight:500; color:var(--accent-2); }
.fiche-lieu{ display:flex; gap:8px; align-items:flex-start; margin:0 0 8px; color:var(--encre-2); font-size:.9rem; }
.fiche-lieu .an-ic{ margin-top:3px; color:var(--encre-3); }
.fiche-carte{ margin-top:12px; height:220px; border-radius:var(--r2); overflow:hidden; background:#0E1116; border:1px solid var(--trait); position:relative; }
.fiche-carte > span{ position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:6px; color:var(--encre-3); font-size:.84rem; }
.fiche-carte.leaflet-container{ background:#0E1116; font-family:'Inter',sans-serif; }
.fiche-carte .leaflet-tile-pane{ filter:brightness(.62) contrast(1.08) saturate(.7); }
.fiche-carte .leaflet-control-attribution{ background:rgba(7,8,10,.72)!important; color:var(--encre-3)!important; font-size:10px; }
.fiche-carte .leaflet-control-attribution a{ color:var(--encre-2)!important; }
.fiche-infos{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:10px 16px; font-size:.88rem; }
.fiche-infos dt{ color:var(--encre-3); }
.fiche-infos dd{ margin:0; color:var(--encre); overflow-wrap:anywhere; }

/* ==========================================================================
   NUMÉRO MASQUÉ (FORMULE GRATUITE)
   Le numéro n'est pas dans la page : ces puces floutées tiennent sa place, et
   le clic le fait apparaître (voir pro.php et fiche-publique.js). Des puces et
   non un faux numéro : un moissonneur repart les mains vides, sans emporter
   les chiffres de quelqu'un d'autre.
   ========================================================================== */
.tel-flou{
  filter:blur(3.5px); font-variant-numeric:tabular-nums; letter-spacing:.06em;
  user-select:none; pointer-events:none;
}
.tel-masque{ cursor:pointer; }
/* Le bouton du tableau des informations n'est pas un bouton à l'œil : c'est la
   ligne « Téléphone », avec son numéro flou et de quoi l'afficher. */
.tel-ligne{
  display:inline-flex; align-items:baseline; gap:9px; padding:0; border:0;
  background:none; color:var(--encre); font:inherit; text-align:left;
}
.tel-ligne .tel-voir{ font-size:.78rem; font-weight:600; color:var(--accent-2); }
.tel-ligne:hover .tel-voir{ text-decoration:underline; }
a.tel-ligne{ text-decoration:none; }
/* Une fois dévoilé, le numéro ne clignote pas : il paraît, simplement. */
.tel-devoile{ animation:tel-parait .2s ease; }
@keyframes tel-parait{ from{ opacity:.35; } to{ opacity:1; } }
.calme .tel-devoile{ animation:none; }

/* ==========================================================================
   RÉSEAUX SOCIAUX
   Une ligne par réseau : le pictogramme, le nom, et l'identifiant en clair.
   L'identifiant est là pour qu'on puisse le retrouver à la main — sur un
   téléphone qui ouvre l'application plutôt que le navigateur, un lien ne suffit
   pas toujours.
   ========================================================================== */
.fiche-reseaux{ list-style:none; margin:0; padding:0; display:grid; gap:4px; }
.fiche-reseau{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:9px 10px; border:0; border-radius:var(--r1); background:none;
  color:var(--encre); font:inherit; font-size:.88rem; text-align:left; text-decoration:none;
  cursor:pointer; transition:background var(--d2);
}
.fiche-reseau:hover{ background:rgba(255,255,255,.05); }
.fiche-reseau .an-ic{ flex-shrink:0; color:var(--encre-2); }
.fiche-reseau:hover .an-ic{ color:var(--accent-2); }
.fiche-reseau > span{ font-weight:600; }
/* L'identifiant se range à droite et cède la place le premier : c'est le nom
   du réseau qu'on cherche des yeux, pas la suite de caractères. */
.fiche-reseau small{
  margin-left:auto; min-width:0; color:var(--encre-3); font-size:.78rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.fiche-reseau .tel-flou{ margin-left:auto; font-size:.78rem; }

/* Autres fiches */
.fiche-autres{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.fiche-autres li{ display:flex; justify-content:space-between; gap:12px; border-bottom:1px dashed var(--trait); padding-bottom:10px; }
.fiche-autres li:last-child{ border-bottom:0; }
.fiche-autres a{ color:var(--encre); font-weight:600; }
.fiche-autres span{ color:var(--encre-2); font-size:.86rem; text-align:right; }

/* Contact : section visible sans JavaScript, fenêtre avec. */
.fiche-contact{ margin-top:18px; max-width:760px; }
.fiche-form{ display:grid; gap:14px; }
.fiche-form label{ display:grid; gap:6px; font-size:.84rem; color:var(--encre-2); }
.fiche-form label em{ font-style:normal; color:var(--encre-3); }
.fiche-form input,.fiche-form textarea,.fiche-form select{
  width:100%; min-height:46px; padding:10px 14px; border-radius:var(--r1); border:1px solid var(--trait-2);
  background:var(--fond); color:var(--encre); font:400 16px/1.4 'Inter',sans-serif; resize:vertical;
  transition:border-color var(--d1), box-shadow var(--d1);
}
.fiche-form input:focus,.fiche-form textarea:focus,.fiche-form select:focus{ outline:0; border-color:rgba(107,162,255,.7); box-shadow:0 0 0 4px rgba(47,123,255,.16); }
.fiche-form-ligne{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.fiche-form .an-btn{ justify-self:start; }
.fiche-form-etat{ margin:0; font-size:.86rem; min-height:1em; }
.fiche-form-etat.ok{ color:var(--vert); }
.fiche-form-etat.erreur{ color:var(--rouge); }
.fiche-pot{ position:absolute!important; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* Fenêtres (dialog) : contact, signalement, galerie */
.fiche-dialogue{
  width:min(560px,calc(100vw - 24px)); max-height:calc(100dvh - 32px); padding:26px; border-radius:var(--r3);
  background:var(--surface-2); color:var(--encre); border:1px solid var(--trait-2); box-shadow:0 40px 90px -20px #000;
}
.fiche-dialogue::backdrop{ background:rgba(4,6,9,.7); backdrop-filter:blur(4px); }
.fiche-dialogue[open]{ animation:an-ouvre var(--d2) var(--courbe); }
.fiche-dialogue h2{ font-size:1.25rem; margin:0 0 6px; }
.fiche-dialogue .fiche-contact{ margin:0; padding:0; border:0; background:none; box-shadow:none; max-width:none; }
.fiche-dialogue-actions{ display:flex; justify-content:flex-end; align-items:center; gap:16px; }
.fiche-dialogue-actions button.an-lien-discret{ background:none; border:0; cursor:pointer; }
.fiche-dialogue-fermer{ position:absolute; top:14px; right:14px; width:38px; height:38px; display:grid; place-items:center; border-radius:50%; border:0; background:var(--surface-3); color:var(--encre); cursor:pointer; }
.fiche-lien-signaler{ background:none; border:0; padding:0; cursor:pointer; font:inherit; color:var(--encre-2); }
.fiche-lien-signaler:hover{ color:var(--encre); text-decoration:underline; }

.fiche-visionneuse{
  width:100vw; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; border:0;
  background:rgba(4,6,9,.94); color:var(--encre); display:none; align-items:center; justify-content:center;
}
.fiche-visionneuse[open]{ display:flex; animation:an-fondu var(--d2); }
.fiche-visionneuse::backdrop{ background:transparent; }
.fiche-visionneuse figure{ margin:0; max-width:min(1400px,92vw); text-align:center; }
.fiche-visionneuse img{ max-width:100%; max-height:82dvh; border-radius:var(--r2); box-shadow:0 30px 80px -20px #000; }
.fiche-visionneuse figcaption{ margin-top:12px; color:var(--encre-2); font-size:.9rem; min-height:1.2em; }
.fiche-visionneuse-fermer{ position:absolute; top:16px; right:16px; width:46px; height:46px; display:grid; place-items:center; border-radius:50%; border:0; background:rgba(255,255,255,.08); color:#fff; cursor:pointer; }
.fiche-visionneuse-nav{ position:absolute; top:50%; translate:0 -50%; width:52px; height:52px; border-radius:50%; border:0; background:rgba(255,255,255,.08); color:#fff; font-size:2rem; line-height:1; cursor:pointer; }
.fiche-visionneuse-nav:hover,.fiche-visionneuse-fermer:hover{ background:rgba(255,255,255,.16); }
.fiche-visionneuse-nav.prec{ left:16px; }
.fiche-visionneuse-nav.suiv{ right:16px; }

.fiche-barre-mobile{ display:none; }
.fiche-pied{ text-align:center; }

/* ---- Téléphone et tablette ------------------------------------------- */
@media (max-width:980px){
  .fiche-colonnes{ grid-template-columns:1fr; }
  .fiche-cote{ position:static; }
}
@media (max-width:640px){
  .fiche{ padding-bottom:96px; }
  .fiche-couverture{ aspect-ratio:16/10; }
  .fiche-identite{ grid-template-columns:1fr; gap:14px; padding:20px 18px 4px; }
  .fiche-tete.avec-photo .fiche-titres{ padding-top:0; }
  .fiche-logo{ width:72px; height:72px; }
  /* Une colonne ne peut pas dépasser sa part de l'écran. En `1fr` simple,
     elle gardait la largeur de son plus long libellé (« Contacter ce
     professionnel ») : la grille débordait, et le bouton voisin sortait du
     cadre, coupé net par le bord de l'écran. Le texte passe donc à la ligne
     au lieu de pousser. */
  .fiche-actions{ padding:14px 18px 20px; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); }
  .fiche-actions .fiche-action-principale{ grid-column:1 / -1; }
  /* Dans la grille des boutons, la barre d'outils garde une ligne à elle, centrée. */
  /* Un bouton resté seul sur la dernière ligne (nombre impair de boutons
     secondaires) prend toute la largeur au lieu d'une demi-case vide. La
     barre d'outils est le dernier enfant : ce bouton est l'avant-dernier,
     et il tombe en première colonne quand son rang est pair. */
  .fiche-actions > .an-btn:nth-last-child(2):nth-child(even){ grid-column:1 / -1; }
  /* La barre d'outils occupe toute la largeur, icônes réparties. */
  .fiche-actions .fiche-actions-outils{ grid-column:1 / -1; justify-self:stretch; margin-left:0; }
  .fiche-actions-outils .fiche-actions-reseaux{ flex:1; justify-content:space-around; }
  .fiche-actions-outils > .fiche-partager:only-child{ margin:0 auto; }
  .fiche-actions .an-btn{ white-space:normal; text-align:center; line-height:1.25; padding:8px 14px; }
  .fiche-bloc{ padding:20px 18px; }
  .fiche-prestations li{ grid-template-columns:minmax(0,1fr) auto; }
  .fp-duree{ grid-column:1; }
  .avis-synthese{ grid-template-columns:1fr; gap:16px; }
  .fiche-form-ligne{ grid-template-columns:1fr; }
  .fiche-barre-mobile{
    display:flex; gap:10px; position:fixed; left:0; right:0; bottom:0; z-index:900;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom)); background:rgba(11,13,16,.92);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-top:1px solid var(--trait-2);
    transform:translateY(110%); transition:transform var(--d3) var(--courbe);
  }
  .fiche-barre-mobile.visible{ transform:none; }
  .fiche-barre-mobile .an-btn{ flex:1; min-height:48px; }
  .fiche-barre-mobile .an-btn:last-child:not(:first-child){ flex:0 0 auto; }
  .fiche-visionneuse-nav{ top:auto; bottom:24px; translate:none; }
}

/* Sur les écrans les plus étroits, une demi-largeur ne laisse plus la place
   du plus long mot d'un libellé (« professionnel ») : il déborderait de son
   bouton, ou se couperait en deux. Un bouton par ligne, plutôt. */
@media (max-width:374px){
  .fiche-actions{ grid-template-columns:1fr; }
}

/* ---- Dépôt d'un avis vérifié (avis.php) -------------------------------- */
.avis-depot{ max-width:680px; padding-top:32px; }
.avis-depot h1{ font-size:clamp(1.4rem,3vw,1.9rem); margin:0 0 6px; }
.avis-depot-tete{ display:flex; align-items:center; gap:16px; margin-bottom:22px; }
.avis-depot-tete .fiche-logo{ width:64px; height:64px; border-radius:16px; }
.avis-etoiles-choix{ border:0; margin:0; padding:0; }
.avis-etoiles-choix legend{ font-size:.84rem; color:var(--encre-2); margin-bottom:6px; }
/* Les étoiles sont écrites de 5 à 1 puis retournées : survoler une étoile
   allume aussi celles qui la précèdent, en CSS seul. */
.avis-etoiles-rangee{ display:inline-flex; flex-direction:row-reverse; gap:4px; }
.avis-etoiles-rangee input{ position:absolute; opacity:0; width:1px; height:1px; }
.avis-etoiles-rangee label{ font-size:2.4rem; line-height:1; color:rgba(255,255,255,.16); cursor:pointer; transition:color var(--d1), transform var(--d1) var(--courbe); display:block; padding:2px; }
.avis-etoiles-rangee label:hover,.avis-etoiles-rangee label:hover ~ label,
.avis-etoiles-rangee input:checked ~ label{ color:var(--or); }
.avis-etoiles-rangee label:hover{ transform:scale(1.12); }
.avis-etoiles-rangee input:focus-visible + label{ outline:2px solid var(--accent-2); outline-offset:2px; border-radius:6px; }
.avis-atteste{ display:flex!important; grid-template-columns:none; align-items:flex-start; gap:10px!important; font-size:.84rem; }
.avis-atteste input{ width:18px!important; min-height:0!important; height:18px; margin-top:2px; accent-color:var(--accent); flex-shrink:0; }
.avis-merci{ text-align:center; padding:12px 0; }
.avis-merci-icone{ display:inline-grid; place-items:center; width:64px; height:64px; border-radius:50%; background:rgba(52,211,153,.14); color:var(--vert); font-size:1.8rem; margin-bottom:14px; animation:an-chute .6s var(--courbe); }
.avis-merci .fiche-texte{ max-width:46ch; margin:10px auto 22px; }
.avis-merci-actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.avis-google-suite{ margin:24px auto; padding:22px; max-width:560px; text-align:left; border:1px solid rgba(47,123,255,.38); border-radius:18px; background:linear-gradient(145deg,rgba(47,123,255,.13),rgba(255,255,255,.025)); }
.avis-google-suite h2{ margin:8px 0; font-size:1.2rem; }
.avis-google-suite p{ margin:0 0 16px; color:var(--encre-2); line-height:1.55; }
.avis-google-suite label{ display:block; margin-bottom:6px; color:var(--encre-2); font-size:.82rem; font-weight:700; }
.avis-google-suite textarea{ box-sizing:border-box; width:100%; resize:none; margin:0 0 12px; padding:12px 14px; border:1px solid var(--trait-2); border-radius:12px; background:rgba(0,0,0,.18); color:var(--encre); font:inherit; line-height:1.5; }
.avis-google-suite .an-btn{ margin:0 8px 8px 0; }
.avis-google-suite small{ display:block; margin-top:4px; color:var(--encre-3); line-height:1.45; }
.avis-google-etape{ display:inline-flex; padding:5px 9px; border-radius:999px; background:rgba(47,123,255,.2); color:#8DB8FF; font-size:.72rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.avis-google-suite .est-copie{ border-color:rgba(52,211,153,.45); color:var(--vert); }
@media (max-width:520px){
  .avis-google-suite{ padding:18px; }
  .avis-google-suite .an-btn{ display:flex; width:100%; margin:0 0 9px; justify-content:center; box-sizing:border-box; }
}

/* ---- Fiche importée (sans compte) ---------------------------------------- */
.fiche-prestations-simples li{ grid-template-columns:minmax(0,1fr); padding:11px 0; }
/* Immatriculation confirmee au registre des entreprises. Discrete : c est un fait
   verifiable, pas une recommandation, et l attribution a l INSEE est obligatoire
   (Licence Ouverte 2.0 : citer la source et sa date de mise a jour). */
.fiche-immat{ display:flex; gap:8px; align-items:flex-start; margin:0 0 10px; font-size:.82rem;
  line-height:1.55; color:var(--encre-2); }
.fiche-immat svg{ flex:0 0 auto; margin-top:2px; color:var(--encre-3); }
.fiche-immat b{ color:var(--encre); font-weight:600; }
.fiche-immat-source{ display:block; margin-top:2px; font-size:.76rem; color:var(--encre-3); }
.fiche-non-geree{ padding-top:14px; border-top:1px solid var(--trait); line-height:1.55; }
.fiche-non-geree a{ color:var(--accent-2); white-space:nowrap; }

/* ---- Conversation d'un visiteur (/messages/<lien>) ------------------------ */
.fil-messages{ list-style:none; margin:0 0 20px; padding:0; display:flex; flex-direction:column; gap:10px; }
.bulle{ max-width:85%; padding:11px 14px; border-radius:16px; background:var(--surface-2); border:1px solid var(--trait); line-height:1.5; overflow-wrap:anywhere; }
.bulle.de-moi{ align-self:flex-end; background:var(--accent-doux); border-color:rgba(47,123,255,.3); border-bottom-right-radius:6px; }
.bulle.de-lui{ align-self:flex-start; border-bottom-left-radius:6px; }
.bulle-auteur{ display:block; font-size:.74rem; color:var(--encre-3); margin-bottom:4px; }
.bulle p{ margin:0; }
.conversation-visiteur .fiche-form textarea{ min-height:110px; }
@media (max-width:560px){ .bulle{ max-width:94%; } }

/* ---- Aperçu par son titulaire, avant publication (pro.php) ---------------- */
.fiche-apercu-bandeau{
  max-width:1180px; margin:14px auto 0; padding:14px 18px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 20px;
  border-radius:var(--r2); border:1px solid rgba(47,123,255,.45); background:rgba(47,123,255,.12); color:var(--encre);
  width:calc(100% - 2 * var(--marge)); box-sizing:border-box;
}
.fiche-apercu-bandeau p{ margin:0; font-size:.92rem; line-height:1.5; flex:1 1 320px; }
.fiche-apercu-bandeau .an-btn{ flex:0 0 auto; }

/* Le client gère son rendez-vous (rendez-vous.php) : annuler, ou choisir un autre créneau. */
.gestion-rdv h2{ margin:26px 0 10px; font-size:1.05rem; }
.gestion-rdv-resume{ margin:16px 0; padding:14px 16px; border:1px solid var(--trait-2); border-radius:12px; background:var(--surface-2, rgba(255,255,255,.03)); }
.gestion-rdv-resume p{ margin:2px 0; }
.gestion-rdv-contacts{ display:flex; flex-wrap:wrap; gap:10px; }
.gestion-rdv-date{ grid-template-columns:minmax(0,220px) auto; align-items:end; }
.gestion-rdv-creneaux{ margin-top:14px; }
.gestion-rdv-grille{ display:flex; flex-wrap:wrap; gap:8px; margin:8px 0; }
.gestion-rdv-grille .an-btn{ min-width:78px; justify-content:center; }
.gestion-rdv-confirmer span{ display:flex; gap:8px; align-items:center; }
.gestion-rdv-confirmer input{ width:auto; }
.an-btn-danger{ background:transparent; color:var(--rouge); border-color:var(--rouge); box-shadow:none; }
.an-btn-danger:hover{ background:rgba(255,80,80,.1); box-shadow:none; }
@media (max-width:520px){ .gestion-rdv-date{ grid-template-columns:1fr; } }

/* ---------- le client répond à son devis (devis-client.php) ---------- */
.devis-client-table{ display:grid; margin:18px 0 12px; border:1px solid rgba(255,255,255,.1); border-radius:14px; overflow:hidden; }
.devis-client-ligne{ display:grid; grid-template-columns:minmax(0,1fr) 48px 120px; gap:10px; padding:11px 14px; border-top:1px solid rgba(255,255,255,.07); font-size:.92rem; }
.devis-client-ligne:first-child{ border-top:0; }
.devis-client-ligne span:nth-child(2), .devis-client-ligne span:nth-child(3){ text-align:right; font-variant-numeric:tabular-nums; }
.devis-client-ligne small{ color:rgba(255,255,255,.55); }
.devis-client-ligne.entete{ font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.55); background:rgba(255,255,255,.03); }
.devis-client-ligne.sous-total{ color:rgba(255,255,255,.7); }
.devis-client-ligne.total{ font-weight:800; font-size:1.05rem; background:rgba(47,123,255,.1); }
.devis-client-pdf{ margin:0 0 22px; }
.devis-client-accepter{ display:grid; gap:14px; }
.fiche-form label.devis-client-accord{ display:flex; flex-direction:row; align-items:flex-start; gap:10px; padding:12px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.03); cursor:pointer; line-height:1.45; }
.fiche-form .devis-client-accord input{ width:20px; height:20px; flex:none; margin:1px 0 0; accent-color:#2F7BFF; }
.devis-client-accept button, .devis-client-accepter > button{ justify-self:start; }
.devis-client-statut{ display:grid; gap:4px; margin:18px 0; padding:14px 16px; border-radius:14px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.03); }
.devis-client-statut.ok{ border-color:rgba(74,222,128,.45); background:rgba(74,222,128,.08); }
.devis-client-statut.ok b{ color:#4ADE80; }
.devis-client-refus{ margin:22px 0 6px; }
.devis-client-refus summary{ cursor:pointer; color:rgba(255,255,255,.7); font-size:.9rem; }
.devis-client-refus form{ margin-top:12px; display:grid; gap:12px; }
@media (max-width:520px){ .devis-client-ligne{ grid-template-columns:minmax(0,1fr) 34px 96px; padding:10px 12px; font-size:.86rem; } }