/* ==========================================================================
   FINDLY — Design system
   Rebrand 09/2026 (v2) : nouveau logo « Findly Maroc » (pin + loupe avec smile intégré au verre,
   dégradé turquoise→cyan→bleu, wordmark navy + accent vert), fichiers vectoriels fournis par le
   collaborateur — voir img/brand/ et includes/partials/navbar.php pour l'intégration du logo.
   L'action principale (CTA) passe du bleu au VERT de la nouvelle identité. Pour ne pas renommer
   40+ points d'appel dans tout le code, les tokens --coral/--orange/--violet/--blue GARDENT leur
   nom mais changent de VALEUR (déjà la convention des refontes précédentes) — un token nommé
   --orange qui vaut #17B14F est donc volontaire, pas une erreur.
   Typo : Space Grotesk (display) / Inter (texte) / JetBrains Mono (data) — inchangée.
   ========================================================================== */

:root{
  /* Identité 09/2026 v2 — dérivée du nouveau pack de marque (img/brand/) : #1152C8 (bleu),
     #12B6D8 (cyan), #25E0C0 (turquoise), #17B14F (vert, action), #16224F (navy, wordmark). */
  --ink-deep:    #16224F;   /* navy du logo — fond du hero et du chrome premium */
  --coral:       #17B14F;   /* vert du logo — seul accent réservé aux actions (CTA, liens actifs) */
  --coral-dark:  #0E9440;
  --gold:        #12B6D8;   /* cyan du logo — confiance : notes, badges premium */
  --sage:        #1152C8;   /* bleu du logo — accent secondaire */
  --cream:       #F7F4EF;   /* fond de page — plus chaleureux qu'un blanc pur */

  /* Anciens tons, valeurs rapprochées de la nouvelle identité (voir note ci-dessus) */
  --blue:        #1152C8;
  --blue-dark:   #0D3F99;
  --turquoise:   #25E0C0;
  --violet:      #1152C8;
  --orange:      #17B14F;
  --yellow:      #F2A93B;   /* aligné sur --fdl-rating du nouveau pack : couleur des notes/étoiles, indépendante des tokens d'action */
  --emerald:     #17B14F;
  --white:       #FFFFFF;
  --gray-50:     #F7F4EF;
  --gray-100:    #F1EEE7;
  --gray-200:    #E7E3DA;
  /* Accessibilité — contraste WCAG AA.
     #94A3B8 sur blanc ne donnait que 2,56:1, sous le minimum de 4,5:1 exigé pour du texte
     courant : les mentions secondaires (dates, compteurs, méta) étaient difficilement lisibles.
     #64748B atteint 4,76:1 tout en restant nettement plus clair que le texte principal.
     Cette variable ne sert qu'à colorer du texte (vérifié), la changer ici suffit. */
  --gray-400:    #64748B;
  --gray-600:    #475569;
  --gray-dark:   #1E293B;
  --ink:         #0F172A;

  /* Dégradé signature du hero (09/2026) : mêmes teintes que le pin du nouveau logo, bleu → cyan →
     sarcelle → vert, au lieu de l'ancien dégradé bleu/violet/orange. */
  --grad-hero: linear-gradient(120deg, #1152C8 0%, #12B6D8 35%, #25E0C0 70%, #17B14F 100%);
  /* Aplat plein (bandeaux compacts, price-box…) — même famille de tons que la nouvelle identité
     de marque (marine + vert), pour ce qui n'est pas le hero. */
  --grad-banner: linear-gradient(135deg, var(--ink-deep) 0%, var(--coral-dark) 100%);
  --grad-cta:  linear-gradient(135deg, var(--coral) 0%, var(--coral-dark) 100%);
  --grad-premium: linear-gradient(160deg, var(--ink-deep) 0%, #0D1636 100%);
  --grad-success: linear-gradient(135deg, #2ED06A 0%, #0E9440 100%);

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-full: 999px;

  --shadow-sm: 0 2px 8px rgba(15,23,42,.06);
  --shadow-md: 0 8px 24px rgba(15,23,42,.08);
  --shadow-lg: 0 20px 48px rgba(15,23,42,.12);
  --shadow-glow-blue: 0 8px 30px rgba(17,82,200,.25);
  --shadow-glow-orange: 0 8px 24px rgba(23,177,79,.35);   /* nom legacy : vaut désormais le vert de marque, pas l'orange */

  --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --ease: cubic-bezier(.22,1,.36,1);
}

/* Arabe (dir="rtl") : Noto Sans Arabic en tête de pile, Inter/Space Grotesk gardés en repli pour
   les fragments latins (chiffres, MAD, marque). Les 3 autres langues (fr/en/es) ne sont pas
   concernées. */
[dir="rtl"] {
  --font-display: 'Noto Sans Arabic', 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body: 'Noto Sans Arabic', 'Inter', 'Segoe UI', sans-serif;
}

*{ box-sizing: border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--gray-50);
  -webkit-font-smoothing: antialiased;
  line-height:1.55;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
input, select{ font-family:inherit; }
ul{ list-style:none; }
.container{ max-width:1240px; margin:0 auto; padding:0 24px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

h1,h2,h3,h4{ font-family: var(--font-display); letter-spacing:-0.02em; color:var(--gray-dark); }
h1{ font-size: clamp(2.4rem, 5vw, 4.2rem); font-weight:700; line-height:1.05; }
h2{ font-size: clamp(1.8rem, 3vw, 1.6rem); font-weight:700; line-height:1.15; }
h3{ font-size:1.3rem; font-weight:600; }
.eyebrow{
  font-family: var(--font-mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: var(--blue);
  font-weight:600;
}
.lede{ color: var(--gray-600); font-size:1.08rem; }
/* Un lien à l'intérieur d'un texte atténué héritait du même gris que le texte (a{color:inherit}) :
   sur login.php notamment, « Inscris-toi » et « Mot de passe oublié ? » étaient donc illisibles
   comme liens cliquables, indiscernables du texte autour. */
.lede a{ color:var(--blue); font-weight:600; }
.lede a:hover{ color:var(--blue-dark); text-decoration:underline; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 26px; border-radius: var(--radius-full);
  font-weight:600; font-size:.95rem; transition: all .25s var(--ease);
  white-space:nowrap;
}
.btn-primary{
  background: var(--grad-cta); color:#fff; box-shadow: var(--shadow-glow-orange);
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 14px 30px rgba(23,177,79,.42); }
.btn-secondary{
  background:#fff; color: var(--blue); border:1.5px solid var(--gray-200); box-shadow: var(--shadow-sm);
}
.btn-secondary:hover{ border-color:var(--blue); transform: translateY(-2px); }
.btn-ghost{ color: var(--gray-dark); padding:10px 16px; }
.btn-ghost:hover{ color:var(--blue); }
.btn-sm{ padding:9px 16px; font-size:.82rem; }

/* Puces de maillage interne (recherches fréquentes, villes/métiers voisins) : même forme que
   .btn-secondary, mais texte neutre au repos. Ce ne sont pas des appels à l'action — juste des
   liens de découverte — et affichées par dizaines, la couleur vive du bouton secondaire ressortait
   trop (« trop flashé »). */
.link-chip{
  display:inline-flex; align-items:center; justify-content:center;
  padding:9px 16px; border-radius: var(--radius-full);
  font-weight:600; font-size:.82rem; white-space:nowrap;
  background:#fff; color:var(--gray-600); border:1.5px solid var(--gray-200); box-shadow: var(--shadow-sm);
  transition: all .25s var(--ease);
}
.link-chip:hover{ color:var(--blue); border-color:var(--blue); transform: translateY(-2px); }
.btn-icon{
  width:44px; height:44px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background:#fff; border:1.5px solid var(--gray-200); transition: all .2s var(--ease);
}
.btn-icon:hover{ border-color:var(--blue); color:var(--blue); transform: translateY(-2px); }
.btn-icon.active{ background: var(--orange); border-color:var(--orange); color:#fff; }

/* ---------- Navbar ---------- */
.navbar{
  position:sticky; top:0; z-index:100;
  background: rgba(255,255,255,.82); backdrop-filter: blur(14px);
  border-bottom:1px solid var(--gray-200);
}
.navbar-inner{ display:flex; align-items:center; justify-content:space-between; padding:16px 24px; max-width:1240px; margin:0 auto; }
.logo{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:1.35rem; color:var(--gray-dark); }
.brand-logo{ height:58px; width:auto; display:block; }
.footer .logo{ display:flex; }
.nav-links{ display:flex; align-items:center; gap:6px; }
.nav-links a{ padding:10px 14px; border-radius:var(--radius-full); font-weight:500; font-size:.92rem; color:var(--gray-600); transition:.2s; }
.nav-links a:hover, .nav-links a.active{ background:var(--gray-100); color:var(--gray-dark); }
.nav-actions{ display:flex; align-items:center; gap:10px; }
.nav-badge-count{
  position:absolute; top:-6px; right:-6px; background:var(--orange); color:#fff;
  font-size:.65rem; font-weight:700; width:18px; height:18px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.nav-badge-count.is-zero{ display:none; }
.nav-icon-wrap{ position:relative; }

/* ---------- Bandeau de consentement aux cookies ----------
   Ancré en bas plutôt qu'en plein écran : il n'y a rien à cacher derrière un voile modal, et un
   voile empêcherait de lire la page pour décider. Le contenu du site reste consultable. */
.consent{
  position:fixed; left:0; right:0; bottom:0; z-index:1000;
  background:#fff; border-top:2px solid var(--gray-dark);
  box-shadow:0 -12px 32px rgba(15,23,42,.14);
  padding:18px 24px;
}
.consent-inner{
  max-width:1240px; margin:0 auto;
  display:flex; align-items:center; gap:26px; flex-wrap:wrap;
}
.consent-text{ flex:1 1 420px; font-size:.85rem; line-height:1.55; color:var(--gray-600); }
.consent-text p{ margin:0; }
.consent-title{
  font-family:var(--font-display); font-weight:700; font-size:1rem;
  color:var(--gray-dark); margin-bottom:4px !important;
}
.consent-link{ margin-top:6px !important; font-size:.8rem; }
/* Les deux boutons partagent la même taille : refuser doit être aussi simple qu'accepter, sinon
   le consentement n'est pas libre. Aucun n'est réduit, grisé ni relégué. */
.consent-actions{ display:flex; gap:10px; flex-wrap:wrap; flex:0 0 auto; }
.consent-actions .btn{ white-space:nowrap; }
@media (max-width: 700px){
  .consent{ padding:16px; max-height:70vh; overflow-y:auto; }
  .consent-actions{ width:100%; }
  .consent-actions .btn{ flex:1 1 auto; justify-content:center; }
}

/* Bouton de formulaire déguisé en lien, pour le pied de page (le choix se révoque en POST). */
.footer-link-button{
  background:none; border:0; padding:0; font:inherit; color:inherit;
  cursor:pointer; text-align:left; text-decoration:none;
}
.footer-link-button:hover{ text-decoration:underline; }

/* ---------- Saisie du code de confirmation ----------
   Gros caractères espacés : on recopie 6 chiffres depuis un autre écran, la lisibilité primer sur
   la compacité. Centré, parce qu'un code n'est pas une phrase. */
.code-input{
  font-size:1.6rem; font-weight:700; letter-spacing:.4em; text-align:center;
  font-variant-numeric: tabular-nums;
}

/* ---------- Boîte de secours du mode développement ----------
   Volontairement laide et orange : elle ne doit jamais passer pour un élément normal de la page,
   et sa présence en production doit sauter aux yeux. Voir dev_outbox_push(). */
.dev-outbox{
  margin-bottom:22px; padding:16px 18px; border-radius:var(--radius-md);
  background:#FEF3C7; border:2px dashed #D97706;
}
.dev-outbox-head{ margin:0 0 12px; font-size:.8rem; font-weight:700; color:#92400E; }
.dev-outbox-item{ font-size:.85rem; }
.dev-outbox-item + .dev-outbox-item{ margin-top:14px; padding-top:14px; border-top:1px dashed #D97706; }

/* ---------- Case à cocher suivie d'une phrase ----------
   Deux éléments flex seulement : la case, puis la phrase entière dans un span. Ne jamais laisser
   du texte ou des liens nus dans ce conteneur — chacun deviendrait une colonne. */
.checkbox-line{ display:flex; align-items:flex-start; gap:8px; font-weight:400; line-height:1.5; }
.checkbox-line > input[type="checkbox"]{ margin-top:4px; flex:0 0 auto; }

/* ---------- Champ piège anti-robot ----------
   Sorti de l'écran plutôt que display:none : certains robots ignorent explicitement les champs
   masqués par display/visibility, alors qu'un décalage de position les laisse les remplir — et
   c'est précisément ce qu'on veut détecter. Il reste invisible pour l'humain, et le balisage
   (aria-hidden, tabindex="-1") le retire des lecteurs d'écran et du parcours au clavier. */
.anti-robot-trap{
  /* inset-inline-start, pas left : voir la note de .skip-link — un décalage physique aussi
     extrême casse le rendu des pages RTL (page entièrement vide). */
  position:absolute; inset-inline-start:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
/* Ligne d'état de la preuve de travail. Discrète : c'est une information de confort, pas une
   action attendue de l'utilisateur — il n'a rien à faire. */
.pow-status{
  min-height:1.2em; margin:0 0 14px; font-size:.78rem; color:var(--gray-400);
}
/* Avertissement : couleur ambre dédiée plutôt que --orange — ce token vaut maintenant le bleu de
   marque, alors qu'un avertissement doit rester ambre par convention universelle, indépendamment
   de la couleur de marque (même logique que .dev-outbox un peu plus haut). */
.form-warn{
  margin:0 0 14px; padding:12px 14px; border-radius:var(--radius-sm);
  background:#FEF3C7; border:1px solid #D97706; font-size:.85rem;
}

/* ---------- Menu de compte (<details> natif) ----------
   Regroupe Mon activité / Espace pro / Mon compte / Déconnexion, qui étaient auparavant
   éparpillés entre les liens de navigation et les boutons d'action. <details>/<summary> donne
   gratuitement l'ouverture au clavier (Entrée, Espace) et l'annonce de l'état ouvert/fermé
   aux lecteurs d'écran ; le JS ne gère que la fermeture au clic extérieur et à Échap. */
.user-menu{ position:relative; }
.user-menu > summary{
  cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:6px;
}
.user-menu > summary::-webkit-details-marker{ display:none; }  /* Safari / Chrome anciens */
.user-menu > summary::marker{ content:''; }
.user-menu-name{
  max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.user-menu-caret{ font-size:.7rem; transition: transform .2s var(--ease); }
.user-menu[open] .user-menu-caret{ transform: rotate(180deg); }
.user-menu-panel{
  position:absolute; right:0; top:calc(100% + 10px); z-index:120;
  min-width:230px; padding:8px;
  background:#fff; border:1px solid var(--gray-200); border-radius:var(--radius-md);
  box-shadow: var(--shadow-lg);
  display:flex; flex-direction:column; gap:2px;
}
.user-menu-panel a{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 12px; border-radius:var(--radius-sm);
  font-size:.9rem; font-weight:500; color:var(--gray-600); white-space:nowrap;
}
.user-menu-panel a:hover, .user-menu-panel a:focus-visible, .user-menu-panel a.active{
  background:var(--gray-100); color:var(--gray-dark);
}
.user-menu-logout{
  margin-top:6px; padding-top:12px !important;
  border-top:1px solid var(--gray-200); color:#DC2626 !important;
}
.user-menu-logout:hover{ background:#FEF2F2 !important; }

/* ---------- Sélecteur de langue (<details> natif, même mécanique que .user-menu) ---------- */
.lang-menu{ position:relative; }
.lang-menu > summary{
  cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:5px;
  width:auto; height:44px; padding:0 13px; border-radius:var(--radius-full);
  background:#fff; border:1.5px solid var(--gray-200); transition: all .2s var(--ease);
  font-size:.8rem; font-weight:700; color:var(--gray-600);
}
.lang-menu > summary::-webkit-details-marker{ display:none; }
.lang-menu > summary::marker{ content:''; }
.lang-menu > summary:hover{ border-color:var(--blue); color:var(--blue); }
.lang-menu-code{ letter-spacing:.02em; }
.lang-menu-panel{
  position:absolute; inset-inline-end:0; top:calc(100% + 10px); z-index:120;
  min-width:170px; padding:8px;
  background:#fff; border:1px solid var(--gray-200); border-radius:var(--radius-md);
  box-shadow: var(--shadow-lg);
  display:flex; flex-direction:column; gap:2px;
}
.lang-menu-panel a{
  display:block; padding:10px 12px; border-radius:var(--radius-sm);
  font-size:.9rem; font-weight:500; color:var(--gray-600); white-space:nowrap;
}
.lang-menu-panel a:hover, .lang-menu-panel a:focus-visible{
  background:var(--gray-100); color:var(--gray-dark);
}
.lang-menu-panel a.active{
  background:#EFF6FF; color:var(--blue); font-weight:700;
}

/* ---------- Menu mobile ----------
   Le bouton ☰ basculait une classe .mobile-open pour laquelle aucune règle CSS n'existait :
   en dessous de 900 px, .nav-links était masqué et rien ne le remplaçait, donc l'intégralité
   de la navigation était inaccessible. Le panneau ci-dessous corrige cela. */
.mobile-toggle{ display:none; }
.mobile-panel{
  display:flex; flex-direction:column; padding:10px 16px 18px;
  border-top:1px solid var(--gray-200); background:#fff;
  max-height:calc(100vh - 80px); overflow-y:auto;
}
.mobile-panel[hidden]{ display:none; }
.mobile-panel a{
  padding:13px 12px; border-radius:var(--radius-sm);
  font-weight:500; font-size:.95rem; color:var(--gray-600);
}
.mobile-panel a:hover, .mobile-panel a.active{ background:var(--gray-100); color:var(--gray-dark); }
.mobile-panel-sep{
  margin:10px 0 4px; padding:10px 12px 0;
  border-top:1px solid var(--gray-200);
  font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--gray-400);
}

@media (max-width: 900px){
  .nav-links{ display:none; }
  .mobile-toggle{ display:flex; }
  /* Le contenu du menu de compte est repris dans le panneau mobile : l'afficher deux fois
     donnerait deux commandes concurrentes pour la même action. */
  .user-menu{ display:none; }
  /* Repris dans .mobile-panel (navbar.php) : la langue est déjà proposée là, pas besoin d'un
     deuxième contrôle côte à côte sur un écran étroit. */
  .lang-menu{ display:none; }
  /*
   * Repris dans .mobile-panel (navbar.php) pour un visiteur non connecté. Sans cette règle, un
   * visiteur anonyme sur mobile voyait ♡ (44px) + « Connexion » + « Inscription » + ☰ (44px)
   * côte à côte sans retour à la ligne possible : sur un écran de 375px, cela dépasse largement
   * la largeur utile et fait déborder toute la barre de navigation.
   */
  .nav-actions > a.btn{ display:none; }
}
@media (min-width: 901px){
  /* Filet de sécurité : si le panneau a été ouvert en mobile puis la fenêtre élargie,
     il ne doit pas rester visible alors que .nav-links est de nouveau affiché. */
  .mobile-panel{ display:none; }
}

/* ---------- Hero + Orbit Search (signature element) ---------- */
.hero{
  position:relative; overflow:hidden;
  background: var(--grad-hero);
  padding: 28px 24px 28px;
}
.hero::before{
  content:''; position:absolute; inset:0;
  background: radial-gradient(circle at 20% 20%, rgba(255,255,255,.18), transparent 40%),
              radial-gradient(circle at 85% 75%, rgba(255,255,255,.12), transparent 45%);
}
.hero-split{
  position:relative; max-width:1240px; margin:0 auto;
  display:grid; grid-template-columns: 1.2fr 0.8fr; gap:32px; align-items:center;
}
@media (max-width:900px){
  .hero-split{ grid-template-columns:1fr; }
}
.hero-copy{ color:#fff; }
.hero .eyebrow{ color: rgba(255,255,255,.92); background:rgba(255,255,255,.16); display:inline-block; padding:5px 13px; border-radius: var(--radius-full); font-size:.72rem; }
.hero h1{ color:#fff; margin: 12px 0 8px; font-size: clamp(1.5rem, 2.2vw, 2.05rem); line-height:1.16; }
.hero h1 em{ font-style:normal; text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness:3px; text-underline-offset:5px; }
.hero .lede{ color: rgba(255,255,255,.88); max-width:460px; margin:0 0 16px; font-size:.86rem; line-height:1.5; }

.search-core{ position:relative; z-index:5; max-width:480px; }
.search-box{
  background:#fff; border-radius: var(--radius-full); box-shadow: var(--shadow-lg);
  display:flex; align-items:center; gap:10px; padding:5px 5px 5px 18px;
}
.search-box svg{ flex-shrink:0; color:var(--gray-400); }
.search-box input{
  /* min-width:0 est indispensable : un élément flex a par défaut min-width:auto, qui pour un
     champ de texte vaut sa largeur intrinsèque (~170-200px selon le navigateur). Sans cette
     ligne, flex:1 ne peut jamais rétrécir le champ en dessous de cette largeur, et le bouton
     « Trouver un pro » se retrouve poussé hors de l'écran sur mobile — visible mais inatteignable
     au doigt. Cette règle est partagée par le hero et par la barre de resultats.php. */
  flex:1; min-width:0; border:none; outline:none; font-size:.88rem; color:var(--ink); padding:9px 0;
}
.search-box input::placeholder{ color:var(--gray-400); }
.search-box .btn-primary{ padding:9px 20px; font-size:.86rem; }

.hero-stats-inline{ display:flex; gap:10px; margin-top:20px; flex-wrap:wrap; }
/* Pastilles translucides (Concept V3) plutôt que du texte nu sur le dégradé — reprend le
   traitement "chip" du reste de l'identité V3 (catégories, badges). */
.hero-stat-inline{ background:rgba(255,255,255,.16); border-radius:14px; padding:8px 16px; text-align:center; }
.hero-stat-inline b{ font-family:var(--font-display); font-size:1rem; display:block; color:#fff; }
.hero-stat-inline span{ color:rgba(255,255,255,.8); font-size:.64rem; text-transform:uppercase; letter-spacing:.02em; }

/* ---------- Bannières illustrées du hero ---------- */
.promo-carousel{
  position:relative; max-width:1240px; margin:26px auto 0;
  border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-lg);
}
.promo-track{ position:relative; height:200px; }
.promo-slide{
  position:absolute; inset:0; background-size:cover; background-position:center;
  animation: promoFade .5s var(--ease);
}
.promo-slide[hidden]{ display:none; }
@keyframes promoFade{ from{ opacity:0; } to{ opacity:1; } }
/* Voile en dégradé indépendant de l'image : le texte reste lisible quelle que soit la bannière —
   y compris le jour où une vraie photo, plus contrastée qu'un aplat de couleur, prend le relais. */
.promo-slide-scrim{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center;
  padding:0 40px; max-width:640px;
  background: linear-gradient(90deg, rgba(15,23,42,.62) 0%, rgba(15,23,42,.30) 55%, transparent 90%);
}
.promo-slide-scrim h3{ color:#fff; font-family:var(--font-display); font-size:1.3rem; margin:0 0 8px; }
.promo-slide-scrim p{ color:rgba(255,255,255,.92); font-size:.86rem; line-height:1.5; margin:0; max-width:420px; }
.promo-dots{ position:absolute; left:40px; bottom:16px; display:flex; gap:8px; z-index:2; }
.promo-dot{
  width:8px; height:8px; border-radius:50%; border:1.5px solid rgba(255,255,255,.7);
  background:rgba(255,255,255,.25); padding:0; cursor:pointer; transition:.2s;
}
.promo-dot.active{ background:#fff; transform:scale(1.25); }
.promo-dot:hover{ background:rgba(255,255,255,.6); }
.promo-pause{
  position:absolute; right:16px; bottom:16px; z-index:2;
  width:32px; height:32px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(15,23,42,.45); color:#fff; font-size:.8rem; display:flex; align-items:center; justify-content:center;
}
.promo-pause:hover{ background:rgba(15,23,42,.65); }
@media (prefers-reduced-motion: reduce){
  .promo-slide{ animation:none; }
}
@media (max-width:640px){
  .promo-track{ height:260px; }
  .promo-slide-scrim{ padding:0 22px; max-width:none; background:linear-gradient(180deg, rgba(15,23,42,.15) 0%, rgba(15,23,42,.72) 75%); justify-content:flex-end; padding-bottom:46px; }
  .promo-dots{ left:22px; }
}

/* Hero visual — nouveau modèle : carte de recherche par métier */
.hero-visual{ display:flex; align-items:center; justify-content:center; }
/*
 * Masqué sous 900px : cette règle vivait plus haut dans le fichier, à l'intérieur d'un
 * @media (max-width:900px) précédant celui-ci. À spécificité égale, un sélecteur simple hors
 * media appliqué PLUS LOIN dans le fichier l'emportait toujours sur celui déclaré plus tôt DANS
 * un media — la présence d'une media query ne change rien à l'ordre de cascade. Résultat : cette
 * carte s'affichait sur mobile depuis sa création, alors que le commentaire ci-dessus l'annonçait
 * masquée. Elle doit rester APRÈS la règle `display:flex` ci-dessus pour gagner la cascade.
 */
@media (max-width:900px){ .hero-visual{ display:none; } }
.hero-chip-card{
  background:rgba(255,255,255,.97); border-radius:20px; padding:20px 22px;
  box-shadow: var(--shadow-lg); width:100%; max-width:360px;
}
.hero-chip-card-title{ display:block; font-family:var(--font-display); font-weight:700; font-size:.82rem; color:var(--gray-dark); margin-bottom:12px; }
.hero-chip-card-foot{ margin-top:14px; padding-top:12px; border-top:1px dashed var(--gray-200); font-size:.72rem; color:var(--gray-400); font-weight:600; }

/* Étapes (fixes) + encart qui alterne pro du moment / activité récente — remplace l'ancien
   carrousel de chips, redondant avec la grille de catégories de la page (retiré le 17/08/2026). */
.hero-steps{ display:flex; flex-direction:column; gap:10px; margin-bottom:14px; }
.hero-step{ display:flex; align-items:center; gap:10px; font-size:.82rem; font-weight:600; color:var(--gray-dark); }
.hero-step-num{
  width:22px; height:22px; border-radius:50%; background:var(--ink-deep); color:#fff;
  font-size:.72rem; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.hero-spotlight{ padding-top:12px; border-top:1px dashed var(--gray-200); min-height:56px; }
.hero-spotlight-label{ display:block; font-size:.72rem; font-weight:700; color:var(--gray-400); text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px; }
.hero-spotlight-pro{ display:flex; align-items:center; gap:10px; }
.hero-spotlight-pro img{ width:40px; height:40px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.hero-spotlight-pro b{ display:block; font-size:.86rem; color:var(--gray-dark); }
.hero-spotlight-meta{ display:block; font-size:.74rem; color:var(--gray-400); margin-top:1px; }
.hero-spotlight-activity{ font-size:.82rem; color:var(--gray-600); line-height:1.5; }

/* Encart partenaire (emplacement 'spotlight') : carte autonome plutôt qu'une ligne de plus dans le
   même style que le pro du moment — un slot vendu mérite d'être visuellement distinct et engageant. */
.hero-partner-spot{
  display:flex; align-items:center; gap:12px; text-decoration:none;
  background:linear-gradient(135deg, #EFF6FF 0%, #ffffff 100%); border:1px solid #BFDBFE;
  border-radius:14px; padding:12px 14px; transition: all .2s var(--ease);
}
.hero-partner-spot:hover{ border-color:var(--orange); transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.hero-partner-spot-logo{
  width:48px; height:48px; border-radius:12px; background:#fff; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-sm);
}
.hero-partner-spot-logo img{ max-width:70%; max-height:70%; object-fit:contain; }
.hero-partner-spot-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.hero-partner-spot-body b{ font-size:.88rem; color:var(--gray-dark); }
.hero-partner-spot-body span{ font-size:.76rem; color:var(--gray-600); display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hero-partner-spot-tag{
  align-self:flex-start; font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  color:var(--coral-dark); background:#fff; padding:3px 8px; border-radius:999px; flex-shrink:0;
}

/* ---------- Bannières partenaires (monétisation) ---------- */
.partner-banner{
  display:flex; align-items:center; gap:16px; background:#fff; border:1px solid var(--gray-200);
  border-radius:var(--radius-lg); padding:18px 20px; margin:24px 0; box-shadow:var(--shadow-sm);
  transition: all .25s var(--ease); text-decoration:none;
}
.partner-banner:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); }
.partner-banner img{ width:56px; height:56px; border-radius:12px; object-fit:contain; background:var(--gray-50); padding:6px; flex-shrink:0; }
.partner-banner-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.partner-banner-body b{ font-size:1rem; color:var(--gray-dark); }
.partner-banner-body span{ font-size:.84rem; color:var(--gray-600); }
.partner-banner-tag{ font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--gray-400); background:var(--gray-100); padding:4px 10px; border-radius:999px; flex-shrink:0; }

.partner-card{ text-decoration:none; align-items:center; text-align:center; justify-content:center; border-style:dashed; }
.partner-card-tag{ position:absolute; top:14px; left:14px; font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--gray-400); background:var(--gray-100); padding:3px 9px; border-radius:999px; }
.partner-card-logo{ width:56px; height:56px; border-radius:14px; background:var(--gray-50); display:flex; align-items:center; justify-content:center; margin-top:10px; }
.partner-card-logo img{ max-width:70%; max-height:70%; object-fit:contain; }
.partner-card-title{ font-family:var(--font-display); font-weight:700; font-size:.95rem; color:var(--gray-dark); }
.partner-card-body{ font-size:.82rem; color:var(--gray-600); }
.partner-card-cta{ margin-top:4px; }

/* Bandeau accueil (emplacement 'visibility') : volontairement plus neutre que .hero-partner-spot
   (Spotlight) — même famille de composant (logo encadré + badge), mais sans le dégradé chaud ni
   l'accent orange, pour que la hiérarchie de gamme se voie : Spotlight = premium, Visibilité = plus
   discret. Les distinguer visuellement est ce qui justifie leurs prix différents. */
.visibility-banner{
  display:flex; align-items:center; gap:16px; text-decoration:none;
  background:#fff; border:1px solid var(--gray-200);
  border-radius:var(--radius-lg); padding:16px 20px; box-shadow:var(--shadow-sm);
  transition: all .2s var(--ease);
}
.visibility-banner:hover{ border-color:var(--gray-400); }
.visibility-banner-logo{
  width:44px; height:44px; border-radius:10px; background:var(--gray-50); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.visibility-banner-logo img{ max-width:65%; max-height:65%; object-fit:contain; }
.visibility-banner-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.visibility-banner-body b{ font-family:var(--font-display); font-size:.94rem; color:var(--gray-dark); }
.visibility-banner-body span{ font-size:.82rem; color:var(--gray-400); }
.visibility-banner-tag{
  font-size:.64rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  color:var(--gray-400); background:var(--gray-100); padding:3px 9px; border-radius:999px; flex-shrink:0;
}

/* Jusqu'à 4 partenaires se relaient dans le même emplacement (voir index.php + js/app.js) : un
   seul visible à la fois via [hidden], le reste géré en JS comme le carrousel promo du hero. */
.visibility-rotator{ position:relative; }
.visibility-banner{ animation: visibilityFade .5s var(--ease); }
.visibility-banner[hidden]{ display:none; }
@keyframes visibilityFade{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }
.visibility-dots{ display:flex; gap:6px; justify-content:center; margin-top:14px; }
.visibility-dot{ width:7px; height:7px; border-radius:50%; border:none; padding:0; cursor:pointer; background:var(--gray-200); transition:.2s; }
.visibility-dot.active{ background:var(--gray-400); transform:scale(1.3); }
.visibility-dot:hover{ background:var(--gray-400); }
@media (prefers-reduced-motion: reduce){
  .visibility-banner{ animation:none; }
}

/* Wave divider */
.wave-divider{ display:block; margin-top:-6px; }

/* ---------- Sections ---------- */
.section{ padding:25px 0; }
.section-head{ text-align:center; max-width:640px; margin:0 auto 48px; }
.section-tight .section-head{ margin-bottom:32px; }

/* Category grid */
/* 4 par ligne, pour les 8 catégories tirées au hasard à chaque chargement (voir index.php) —
   2 lignes pleines plutôt qu'une grille pensée pour en afficher 20. */
.cat-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:18px; }
@media (max-width:700px){ .cat-grid{ grid-template-columns: repeat(2,1fr); } }
.cat-card{
  background:#fff; border-radius: var(--radius-lg); padding:26px 18px; text-align:center;
  border:1px solid var(--gray-200); transition: all .25s var(--ease); cursor:pointer;
}
.cat-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); border-color:transparent; }
.cat-icon{
  width:56px; height:56px; border-radius:18px; display:flex; align-items:center; justify-content:center;
  margin:0 auto 14px; background:var(--gray-100); color:var(--ink-deep); transition: all .2s var(--ease);
}
.cat-card:hover .cat-icon:not(.is-colored){ background:#DBEAFE; color:var(--coral-dark); }

/* Icônes catégorie en couleur (Concept V3, validé par le collaborateur — direction plus vive que
   la palette "sobre" de la refonte 08/2026). Tons dédiés, distincts des --blue/--violet/--emerald
   ci-dessus qui restent "sobres" pour ne pas changer d'autres éléments du site déjà migrés. */
.cat-icon.is-colored{ color:#fff; box-shadow:0 8px 18px -8px rgba(16,32,74,.4); }
.cat-card:hover .cat-icon.is-colored{ transform:scale(1.06); box-shadow:0 10px 22px -8px rgba(16,32,74,.5); }
.cat-grad-0{ background:linear-gradient(135deg, var(--blue) 0%, #06B6D4 100%); }
.cat-grad-1{ background:linear-gradient(135deg, var(--coral) 0%, var(--gold) 100%); }
.cat-grad-2{ background:linear-gradient(135deg, #7C3AED 0%, #EC4899 100%); }
.cat-grad-3{ background:linear-gradient(135deg, #10B981 0%, #06B6D4 100%); }
.cat-grad-4{ background:linear-gradient(135deg, #EC4899 0%, #7C3AED 100%); }
.cat-grad-5{ background:linear-gradient(135deg, var(--gold) 0%, var(--coral) 100%); }
.cat-grad-6{ background:linear-gradient(135deg, #06B6D4 0%, var(--blue) 100%); }
.cat-card h4{ font-size:.92rem; font-weight:600; color:var(--gray-dark); }
.cat-card span{ font-size:.76rem; color:var(--gray-400); }

/* Pro cards (grid) — refonte 08/2026, voir le commentaire d'en-tête de includes/partials/pro-card.php.
   Fini le bandeau plein écran au dégradé aléatoire : la carte est blanche, sobre, la couleur est
   réservée à ce qui porte une information (note, disponibilité, vérification) — plus de liséré
   décoratif en haut, retiré car il n'apportait pas d'information et rappelait le même excès de
   couleur que le bandeau qu'il remplaçait. */
.pro-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap:22px; }
.pro-card{
  background:#fff; border-radius: var(--radius-lg); border:1px solid var(--gray-200);
  transition: all .25s var(--ease); position:relative; display:flex; flex-direction:column;
  padding:18px; gap:12px;
}
.pro-card:hover{ box-shadow: var(--shadow-md); transform: translateY(-3px); border-color:var(--gray-200); }
.pro-card .fav-btn{
  position:absolute; top:14px; right:14px; width:32px; height:32px; border-radius:50%;
  background:var(--gray-50); display:flex; align-items:center; justify-content:center;
  color:var(--gray-400); transition:.2s;
}
.pro-card .fav-btn.active{ color: var(--orange); background:#EFF6FF; }
.pro-card .fav-btn:hover{ transform: scale(1.08); }
.pro-card-head{ display:flex; align-items:center; gap:10px; padding-right:34px; }
.pro-card-avatar{ position:relative; width:40px; height:40px; border-radius:50%; flex-shrink:0; background:var(--gray-100); }
.pro-card-avatar img{ width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; }
/* nowrap + ellipsis plutôt que flex-wrap : un nom long qui faisait passer le badge "Vérifié" à la
   ligne suivante décalait tout le bas de la carte (boutons, prix) par rapport aux cartes voisines
   dont le nom tenait sur une ligne — même cause que le correctif sur .pro-meta juste en dessous. */
.pro-card-name-row{ display:flex; align-items:center; gap:6px; flex-wrap:nowrap; min-width:0; }
.pro-card-heading h4{ font-size:.98rem; font-weight:700; color:var(--gray-dark); line-height:1.25; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pro-card-name-row .tag{ font-size:.64rem; padding:2px 8px; flex-shrink:0; }
.pro-card-cat{ font-size:.78rem; color:var(--blue); font-weight:600; }
.pro-card-body{ display:flex; flex-direction:column; gap:8px; flex:1; }
.pro-card-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.pro-rating{ display:flex; align-items:center; gap:4px; font-size:.82rem; font-weight:700; color:var(--gray-dark); white-space:nowrap; background:var(--gray-50); padding:3px 10px; border-radius:var(--radius-full); flex-shrink:0; }
.pro-rating svg{ color:var(--yellow); }
/* min-height réserve la place de 2 lignes même quand le texte tient sur une seule (localisation +
   expérience + langues, de longueur variable d'une carte à l'autre) : sans ça, les boutons Profil/RDV
   et le pied de carte (prix, comparer) ne s'alignaient pas entre les cartes d'une même rangée. */
.pro-meta{ display:flex; align-items:center; gap:6px; font-size:.8rem; color:var(--gray-600); min-height:2.5rem; }
/* Même logique que .pro-meta ci-dessus : une carte avec 2 badges (Dispo + À domicile) ne les fait
   pas toujours tenir sur une ligne à côté de la note, le second passe alors en dessous — sans cette
   réserve de hauteur, ces cartes-là décalaient tout leur bas par rapport aux cartes à 0 ou 1 badge. */
.pro-tags{ display:flex; flex-wrap:wrap; gap:6px; align-content:flex-start; min-height:3.5rem; }
.tag{ font-size:.7rem; font-weight:600; padding:4px 10px; border-radius: var(--radius-full); background:var(--gray-100); color:var(--gray-600); }
.tag-blue{ background:#EFF6FF; color:var(--blue); }
.tag-violet{ background:#F5F3FF; color:var(--violet); }
.tag-emerald{ background:#ECFDF5; color:#047857; }
.pro-card-actions{ display:flex; gap:6px; flex-wrap:wrap; }
/* Paddings réduits sur demande — la cible tactile descend sous les 44px WCAG recommandés pour rester
   compacte dans la carte ; accepté sciemment ici (contexte desktop, pas le principal point de contact). */
.pro-card-actions .btn{ flex:1; min-height:38px; padding:6px 8px; font-size:.76rem; white-space:nowrap; display:inline-flex; align-items:center; justify-content:center; }
/* RDV répété sur chaque carte d'une grille dense : un bouton plein (dégradé ou aplat vif) devenait
   trop imposant/criard multiplié par 12-24 cartes. Style "badge" à la place : fond teinté bleu clair,
   texte bleu foncé — même famille que --blue mais beaucoup plus doux, sans ombre. */
.pro-card-actions .btn-primary{ background:rgba(17,82,200,.16); color:var(--blue-dark); box-shadow:none; }
.pro-card-actions .btn-primary:hover{ background:rgba(17,82,200,.26); box-shadow:none; transform:none; }
.pro-card-footer{ display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:8px; border-top:1px dashed var(--gray-200); }
.price-tag{ font-family:var(--font-mono); font-weight:700; color:var(--gray-dark); }
.price-tag small{ font-family:var(--font-body); font-weight:500; color:var(--gray-400); font-size:.72rem; }
.compare-check{ display:flex; align-items:center; gap:6px; font-size:.75rem; color:var(--gray-600); }
/* .badge-verified reste utilisé par render_pro_list_item() (vue "Liste") — l'avatar y est plus
   grand (200px) et garde son badge superposé. */
.badge-verified{
  position:absolute; top:7px; left:7px; background: var(--grad-success); color:#fff;
  font-size:.64rem; font-weight:700; padding:4px 9px; border-radius: var(--radius-full);
  display:flex; align-items:center; gap:4px;
}

/* Why Findly */
.why-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:22px; }
@media (max-width:900px){ .why-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:560px){ .why-grid{ grid-template-columns: 1fr; } }
.why-card{ padding:28px 22px; border-radius: var(--radius-lg); background:#fff; border:1px solid var(--gray-200); }
.why-icon{ width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center; margin-bottom:16px; color:#fff; font-size:1.2rem; }

/* Reviews */
.reviews-strip{ display:flex; gap:20px; overflow-x:auto; padding-bottom:10px; scroll-snap-type:x mandatory; }
.review-card{ min-width:320px; scroll-snap-align:start; background:#fff; border-radius: var(--radius-lg); padding:24px; border:1px solid var(--gray-200); }
.review-stars{ color:var(--yellow); margin-bottom:10px; }
.review-quote{ color:var(--gray-dark); font-size:.95rem; margin-bottom:16px; }
.review-author{ display:flex; align-items:center; gap:10px; }
.review-author img{ width:38px; height:38px; border-radius:50%; object-fit:cover; }
.review-author b{ font-size:.85rem; display:block; }
.review-author span{ font-size:.75rem; color:var(--gray-400); }

/* CTA band */
.cta-band{
  background: var(--grad-premium); border-radius: var(--radius-xl); padding:64px 40px; text-align:center; color:#fff;
  position:relative; overflow:hidden;
}
/* pointer-events:none est indispensable : ce halo décoratif est peint APRÈS les boutons dans
   l'ordre d'empilement (les pseudo-éléments ::after sont toujours peints en dernier parmi les
   descendants positionnés d'un même contexte, quel que soit leur ordre dans le DOM) — sans cette
   ligne, il interceptait tous les clics sur .cta-band-actions, rendant les deux boutons inertes. */
.cta-band::after{ content:''; position:absolute; inset:0; background: radial-gradient(circle at 80% 20%, rgba(37,224,192,.3), transparent 45%); pointer-events:none; }
.cta-band h2{ color:#fff; position:relative; }
.cta-band p{ color:rgba(255,255,255,.85); position:relative; margin:14px auto 30px; max-width:480px; }
.cta-band-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; position:relative; }

/* Footer */
/* Bouton "remonter en haut" — desktop uniquement (absent du gabarit mobile, qui a déjà sa barre
   d'onglets fixe en bas ; l'ajouter là créerait une collision visuelle). Affiché en JS après un
   certain scroll (voir js/app.js). */
.back-to-top{
  position:fixed; right:28px; bottom:28px; z-index:500;
  width:46px; height:46px; border-radius:50%; background:var(--ink-deep); color:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-lg);
  opacity:0; transform:translateY(12px); pointer-events:none;
  transition: opacity .2s var(--ease), transform .2s var(--ease), background .2s var(--ease);
}
.back-to-top.visible{ opacity:1; transform:none; pointer-events:auto; }
.back-to-top:hover{ background:var(--coral-dark); }

.footer{ background: var(--gray-dark); color: rgba(255,255,255,.7); padding:64px 0 32px; margin-top:60px; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap:32px; margin-bottom:48px; }
@media (max-width:900px){ .footer-grid{ grid-template-columns: repeat(2,1fr); } }
.footer h5{ color:#fff; font-size:.85rem; margin-bottom:16px; font-weight:600; }
.footer ul li{ margin-bottom:10px; font-size:.85rem; }
.footer ul li a:hover{ color:#fff; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:24px; border-top:1px solid rgba(255,255,255,.1); font-size:.8rem; flex-wrap:wrap; gap:12px; }
.footer-social{ display:flex; gap:10px; }
.footer-social a{ width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; }

/* ---------- Results page layout ---------- */
.results-header{ background:#fff; border-bottom:1px solid var(--gray-200); padding:26px 0; }
.results-search{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.results-search .search-box{ flex:1; min-width:260px; box-shadow:none; border:1.5px solid var(--gray-200); }
/* Refonte 08/2026 : les filtres quittent la colonne de gauche pour un panneau déroulant
   horizontal, pleine largeur, au-dessus des résultats — la grille de professionnels récupère
   toute la largeur de la page au lieu de partager avec une colonne fixe de 280px. */
.results-layout{ position:relative; padding:0 0 80px; }
.filter-group{ margin-bottom:0; }
.filter-title{ font-size:.82rem; font-weight:700; color:var(--gray-dark); margin-bottom:10px; display:flex; justify-content:space-between; }
/* Zone cliquable élargie : une ligne de texte de 21px de haut est sous la cible tactile
   recommandée de 40-44px, particulièrement gênant ici avec 20 métiers empilés d'affilée. */
.filter-options label{ display:flex; align-items:center; gap:8px; font-size:.85rem; color:var(--gray-600); padding:8px 4px; margin-bottom:2px; cursor:pointer; border-radius:8px; }
.filter-options label:hover{ background:var(--gray-100); }
.range-value{ font-family:var(--font-mono); font-size:.78rem; color:var(--blue); font-weight:700; }
input[type="range"]{ width:100%; accent-color: var(--blue); }
.chip-toggle{ display:inline-flex; align-items:center; gap:6px; padding:7px 13px; border-radius:var(--radius-full); border:1.5px solid var(--gray-200); font-size:.78rem; font-weight:600; color:var(--gray-600); margin:0 6px 6px 0; transition:.2s; }
.chip-toggle.active{ background:var(--blue); border-color:var(--blue); color:#fff; }

/* ---------- Bouton d'ouverture des filtres — visible à toutes les largeurs désormais ---------- */
.filters-toggle-btn{
  display:inline-flex; align-items:center; gap:8px; margin:16px 0 0;
  background:#fff; border:1.5px solid var(--gray-200); border-radius:var(--radius-full);
  padding:11px 18px; font-weight:600; font-size:.88rem; color:var(--gray-dark);
  position:relative;
}
.filters-toggle-badge{
  background:var(--orange); color:#fff; font-size:.72rem; font-weight:700;
  min-width:18px; height:18px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  padding:0 4px;
}
.filters-panel-head{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:14px; margin-bottom:14px; border-bottom:1px solid var(--gray-200);
}
.filters-panel-title{ font-family:var(--font-display); font-weight:700; font-size:1rem; }
.filters-panel-close{
  width:36px; height:36px; border-radius:50%; border:none; background:var(--gray-100);
  font-size:1rem; color:var(--gray-600); flex-shrink:0;
}
.filters-panel-close:hover{ background:var(--gray-200); }

.filters-backdrop{
  position:fixed; inset:0; background:rgba(15,23,42,.4); z-index:290;
  opacity:0; pointer-events:none; transition:opacity .2s var(--ease);
}
.filters-backdrop.open{ opacity:1; pointer-events:auto; }

/* Panneau déroulant : pleine largeur, ancré sous le bouton « Filtres » (position:relative posée
   sur .results-layout, le parent commun). Les groupes de filtres passent en grille — la colonne
   « Catégorie » (20 métiers) s'étale sur 2 sous-colonnes internes via `columns`, pour ne pas
   étirer le panneau en hauteur démesurément une fois la largeur disponible. */
/* position:fixed avec top ET bottom (pas de max-height calculé) : la hauteur disponible s'adapte
   ainsi à n'importe quelle taille d'écran, et le panneau reste TOUJOURS entièrement contenu dans
   la fenêtre, avec son propre défilement interne — contrairement à un ancien essai en
   position:absolute ancré à .results-layout, où le panneau pouvait démarrer bas dans la page et
   déborder sous le bas de l'écran, hors de portée (page bloquée en scroll par ailleurs pendant
   l'ouverture) : rien n'était alors ni visible ni défilable. */
.filters-panel{
  position:fixed; top:90px; left:24px; right:24px; bottom:24px; z-index:300;
  background:#fff; border:1px solid var(--gray-200); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); padding:22px; overflow-y:auto;
  opacity:0; transform:translateY(-10px); pointer-events:none;
  transition:opacity .2s var(--ease), transform .2s var(--ease);
}
.filters-panel.open{ opacity:1; transform:none; pointer-events:auto; }
.filters-panel form{ display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; }
.filters-panel .filter-group[data-wide]{ grid-row:span 2; }
.filters-panel .filter-options.columns-2{ columns:2; column-gap:12px; }
.filters-panel .filter-options.columns-2 label{ break-inside:avoid; }
.filters-panel > form > a{ grid-column:1 / -1; }
@media (max-width:900px){
  .filters-panel form{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:600px){
  .filters-panel{ left:12px; right:12px; }
  .filters-panel form{ grid-template-columns:1fr; }
  .filters-panel .filter-options.columns-2{ columns:1; }
}

/* Rappel des filtres actifs — voir le commentaire dans resultats.php. Bleu clair plutôt que gris :
   ce sont des choix que l'utilisateur vient de faire, pas une information neutre, la couleur aide
   à les repérer d'un coup d'œil en haut de la page. */
.active-filters-recap{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.active-filters-label{ font-size:.82rem; font-weight:600; color:var(--gray-600); }
.filter-chip{
  display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:var(--radius-full);
  background:#EFF6FF; color:var(--blue-dark); font-size:.82rem; font-weight:600; border:1px solid #BFDBFE;
  transition:.15s;
}
.filter-chip:hover{ background:#DBEAFE; }
.filter-chip span{ font-size:.7rem; opacity:.7; }
.active-filters-reset{ font-size:.82rem; color:var(--gray-400); font-weight:600; text-decoration:underline; }
.active-filters-reset:hover{ color:var(--orange); }
.results-toolbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; flex-wrap:wrap; gap:12px; }
.results-count{ font-size:.9rem; color:var(--gray-600); }
.results-count b{ color:var(--gray-dark); }
.view-toggle{ display:flex; gap:4px; background:var(--gray-100); padding:4px; border-radius: var(--radius-full); }
.view-toggle button{ padding:8px 14px; border-radius: var(--radius-full); font-size:.8rem; font-weight:600; color:var(--gray-600); }
.view-toggle button.active{ background:#fff; color:var(--blue); box-shadow: var(--shadow-sm); }
.sort-select{ padding:9px 14px; border-radius: var(--radius-full); border:1.5px solid var(--gray-200); font-size:.82rem; font-weight:600; background:#fff; }

.pro-list-item{
  display:flex; gap:20px; background:#fff; border:1px solid var(--gray-200); border-radius: var(--radius-lg);
  padding:18px; margin-bottom:16px; transition: all .25s var(--ease);
}
.pro-list-item:hover{ box-shadow: var(--shadow-md); border-color:transparent; }
.pro-list-media{ width:150px; height:150px; border-radius: var(--radius-md); overflow:hidden; flex-shrink:0; position:relative; }
.pro-list-media img{ width:100%; height:100%; object-fit:cover; }
/* Sur mobile, la vignette de la vue liste passait en pleine largeur sur 180 px de haut : même
   défaut que la carte, l'avatar carré s'y faisait rogner et les initiales devenaient géantes. Elle
   reste donc carrée, simplement plus petite — et la ligne y gagne en compacité. */
@media (max-width:640px){
  .pro-list-item{ flex-direction:column; align-items:center; text-align:center; }
  .pro-list-media{ width:120px; height:120px; }
}

.map-mock{
  height:420px; border-radius: var(--radius-lg); background: linear-gradient(160deg,#E0F2FE, #EDE9FE 60%, #FEF9C3);
  position:relative; overflow:hidden; border:1px solid var(--gray-200);
}
.map-pin{ position:absolute; width:34px; height:34px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); background:var(--blue); box-shadow: var(--shadow-md); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.map-pin span{ transform:rotate(45deg); color:#fff; font-size:.85rem; }
.map-pin:hover{ z-index:10; background:var(--orange); }
.map-note{ position:absolute; bottom:14px; left:14px; background:rgba(255,255,255,.9); padding:8px 14px; border-radius: var(--radius-full); font-size:.75rem; color:var(--gray-600); }

.skeleton{ background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-200) 37%, var(--gray-100) 63%); background-size:400% 100%; animation: shimmer 1.4s ease infinite; border-radius: var(--radius-md); }
@keyframes shimmer{ 0%{ background-position: 100% 50%; } 100%{ background-position: 0 50%; } }

/* ---------- Profile page ---------- */
.profile-hero{ background:#fff; border-bottom:1px solid var(--gray-200); padding:40px 0; }
.profile-top{ display:flex; gap:28px; align-items:flex-start; flex-wrap:wrap; }
.profile-avatar{ width:120px; height:120px; border-radius: var(--radius-lg); overflow:hidden; flex-shrink:0; box-shadow: var(--shadow-md); }
.profile-avatar img{ width:100%; height:100%; object-fit:cover; }
.profile-info h1{ font-size:1.9rem; }
.profile-badges{ display:flex; gap:8px; flex-wrap:wrap; margin:10px 0; }
.profile-actions{ display:flex; gap:10px; margin-left:auto; flex-wrap:wrap; }
@media (max-width:800px){ .profile-actions{ margin-left:0; width:100%; } }

.profile-layout{ display:grid; grid-template-columns: 1fr 340px; gap:32px; padding:40px 0 80px; align-items:flex-start; }
@media (max-width:960px){ .profile-layout{ grid-template-columns:1fr; } }
/*
 * `.card` : utilisée sur 10 pages (formulaires de connexion, inscription, contact, mot de passe
 * oublié, confirmation de compte…) mais jamais définie. Sans règle, ces blocs s'affichaient sans
 * fond, sans bordure, sans ombre — flottant directement sur le gris de la page. Repéré lors de
 * l'audit mobile du 14/08/2026 : c'est sur mobile que ça se voit le plus, le formulaire y occupant
 * tout l'écran. Certaines des pages concernées (confirmer-email.php, inscription-en-attente.php)
 * ont été écrites CE JOUR en copiant le motif d'une page déjà atteinte du même défaut — le bug
 * s'est donc propagé silencieusement plutôt que d'être introduit une seule fois.
 */
.card{ background:#fff; border:1px solid var(--gray-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.profile-card{ background:#fff; border:1px solid var(--gray-200); border-radius: var(--radius-lg); padding:26px; margin-bottom:22px; }
.profile-card h3{ margin-bottom:16px; }
.gallery-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:10px; }
.gallery-grid img{ border-radius: var(--radius-md); aspect-ratio:4/3; object-fit:cover; }
.hours-row{ display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px dashed var(--gray-200); font-size:.88rem; }
.hours-row:last-child{ border-bottom:none; }
/*
 * Débordement horizontal sous ~420px : jour (90px) + case « Fermé » + 2 champs <input type="time">
 * (largeur minimale incompressible d'un navigateur à l'autre) + un tiret dépassent largement les
 * ~270px utiles sur un écran de 375px. Le jour passe sur sa propre ligne, le reste s'enroule
 * juste en dessous plutôt que de continuer à pousser hors de l'écran.
 */
@media (max-width:480px){
  .hours-row{ flex-wrap:wrap; row-gap:8px; }
  .hours-row > span:first-child{ flex:1 0 100%; font-weight:600; }
}
.sticky-side{ position:sticky; top:96px; }
.price-box{ background: var(--grad-banner); border-radius: var(--radius-lg); padding:24px; color:#fff; }
.price-box .amount{ font-family:var(--font-mono); font-size:1.8rem; font-weight:700; }
.service-row{ display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--gray-100); font-size:.9rem; }
.rating-summary{ display:flex; align-items:center; gap:16px; margin-bottom:20px; }
.rating-big{ font-family:var(--font-display); font-size:2.6rem; font-weight:700; }
.rating-bar-row{ display:flex; align-items:center; gap:8px; font-size:.78rem; color:var(--gray-600); margin-bottom:6px; }
.rating-bar-track{ flex:1; height:6px; background:var(--gray-100); border-radius:3px; overflow:hidden; }
.rating-bar-fill{ height:100%; background: var(--yellow); }

.modal-overlay{ position:fixed; inset:0; background:rgba(15,23,42,.55); backdrop-filter: blur(3px); display:none; align-items:center; justify-content:center; z-index:1000; padding:20px; }
.modal-overlay.open{ display:flex; }
.modal-box{ background:#fff; border-radius: var(--radius-lg); max-width:480px; width:100%; padding:32px; box-shadow: var(--shadow-lg); max-height:88vh; overflow-y:auto; }
.modal-box h3{ margin-bottom:6px; }
.form-group{ margin:16px 0; }
.form-group label{ font-size:.82rem; font-weight:600; color:var(--gray-dark); display:block; margin-bottom:6px; }
.form-group input, .form-group select, .form-group textarea{
  width:100%; padding:12px 14px; border:1.5px solid var(--gray-200); border-radius: var(--radius-sm); font-size:.9rem; outline:none; transition:.2s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{ border-color: var(--blue); }
.form-group input[type="checkbox"], .form-group input[type="radio"]{
  width:16px; height:16px; padding:0; border:1.5px solid var(--gray-200); margin:0 8px 0 0; vertical-align:middle; flex-shrink:0;
}
.form-group label:has(input[type="checkbox"]), .form-group label:has(input[type="radio"]){ display:flex; align-items:center; }
.modal-close{ position:absolute; top:22px; right:22px; }
.toast{
  position:fixed; bottom:24px; right:24px; background: var(--gray-dark); color:#fff; padding:16px 22px;
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg); display:flex; align-items:center; gap:12px;
  transform: translateY(120%); opacity:0; transition: all .35s var(--ease); z-index:1100;
}
.toast.show{ transform:translateY(0); opacity:1; }
.toast-icon{ width:32px; height:32px; border-radius:50%; background: var(--emerald); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.star-picker{ display:flex; gap:6px; font-size:1.8rem; }
.star-pick{ color: var(--gray-200); cursor:pointer; transition: color .15s, transform .15s; }
.star-pick:hover{ transform: scale(1.15); }
.star-pick.active{ color: var(--yellow); }

/* Empty state */
.empty-state{ text-align:center; padding:80px 20px; }
.empty-state .emoji{ font-size:3rem; margin-bottom:16px; }

/* Comparison table */
.compare-table{ width:100%; border-collapse:collapse; background:#fff; border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-sm); }
.compare-table th, .compare-table td{ padding:16px; text-align:left; border-bottom:1px solid var(--gray-100); font-size:.88rem; vertical-align:top; }
.compare-table th{ background:var(--gray-50); font-family:var(--font-display); }

/* Utility */
.flex{ display:flex; } .items-center{ align-items:center; } .gap-8{ gap:8px; } .gap-12{ gap:12px; }
.mt-8{ margin-top:8px; } .mt-16{ margin-top:16px; } .mt-24{ margin-top:24px; }
.text-center{ text-align:center; }
.hidden{ display:none !important; }
.badge-dot{ width:8px; height:8px; border-radius:50%; display:inline-block; }

/* ============================================================
   ACCESSIBILITÉ
   ============================================================ */

/* Indicateur de focus clavier.
   Les champs portaient `outline:none` sans rien en remplacement : un utilisateur naviguant au
   clavier ne voyait plus où il se trouvait. On rétablit un contour net sur TOUT élément
   interactif. :focus-visible ne se déclenche qu'au clavier, donc aucun contour parasite à la
   souris ; le repli sur :focus couvre les navigateurs qui ne le connaissent pas encore. */
a:focus, button:focus, input:focus, select:focus, textarea:focus, [tabindex]:focus,
summary:focus, [role="button"]:focus {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}
a:focus:not(:focus-visible), button:focus:not(:focus-visible),
input:focus:not(:focus-visible), select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible), [tabindex]:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible) {
  outline: none;
}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible, [role="button"]:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}
/* Le champ de recherche a un fond clair : un contour bleu y suffit, mais on garde la bordure. */
.search-box:focus-within { box-shadow: 0 0 0 3px rgba(17, 82, 200, .25); }

/* Lien d'évitement : premier élément focusable de la page, il permet d'atteindre le contenu
   sans parcourir toute la navigation au clavier. Invisible jusqu'à réception du focus. */
.skip-link {
  /* inset-inline-start (pas left) : un décalage physique à -9999px casse le rendu des pages RTL
     (ar) — le point de départ logique du document se retrouve à une position hors de l'écran,
     et le navigateur y ouvre la page entièrement vide. La propriété logique s'inverse toute
     seule avec dir="rtl", sans ce risque. */
  position: absolute; inset-inline-start: -9999px; top: 0; z-index: 999;
  background: var(--blue); color: #fff; padding: 12px 18px;
  border-radius: 0 0 var(--radius-sm) 0; font-weight: 600; text-decoration: none;
}
[dir="rtl"] .skip-link { border-radius: 0 0 0 var(--radius-sm); }
.skip-link:focus { inset-inline-start: 0; }

/* Réservé aux lecteurs d'écran : présent dans l'arbre d'accessibilité, invisible à l'écran. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Rangées de menu rendues actionnables au clavier (role="button" + tabindex). */
.menu-row[role="button"] { cursor: pointer; }

/* La préférence « réduire les animations » est déjà traitée en tête de fichier. */

/* Un <h1> dans un en-tête de section garde la taille visuelle d'un <h2>.
   Ces pages avaient un <h2> comme titre principal : sémantiquement incorrect (toute page doit
   avoir un <h1> unique, c'est ce qui structure la lecture pour un lecteur d'écran comme pour un
   moteur). On corrige la balise sans changer le rendu. */
.section-head h1 { font-size: clamp(1.8rem, 3vw, 1.6rem); font-weight: 700; line-height: 1.15; }

/* Les repères de carte sont devenus des <a> : on neutralise le style de lien par défaut. */
a.map-pin { text-decoration: none; color: inherit; }
/* Pages statiques : leur titre principal utilisait .mt-16 sur un <h2>, devenu <h1>. */
h1.mt-16 { font-size: clamp(1.8rem, 3vw, 1.6rem); font-weight: 700; line-height: 1.15; }