/* Alpine.js cloak - hide elements until Alpine loads */
[x-cloak] { display: none !important; }

:root {
  --primary: #e91e63;
  --primary-light: #ff4081;
  --primary-dark: #c2185b;
  --primary-50: #fce4ec;
  --primary-100: #f8bbd9;
  --primary-gradient: linear-gradient(135deg, #e91e63 0%, #ff4081 100%);
  
  --success: #10b981;
  --success-light: #d1fae5;
  --warning: #f59e0b;
  --warning-light: #fef3c7;
  --danger: #ef4444;
  --danger-light: #fee2e2;
  
  --gray-50: #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;
  
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  
  --radius: 16px;
  --radius-sm: 8px;
  --radius-lg: 24px;
  --radius-full: 9999px;
  
  --transition: all 0.2s ease;
  --transition-slow: all 0.3s ease;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  color: var(--gray-800);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.btn-primary {
  background: var(--primary-gradient);
  color: white;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-shadow: 0 4px 14px 0 rgba(233, 30, 99, 0.35);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px 0 rgba(233, 30, 99, 0.45);
}

.btn-secondary {
  background: white;
  color: var(--gray-700);
  font-weight: 500;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--gray-200);
  cursor: pointer;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.btn-secondary:hover {
  background: var(--gray-50);
  border-color: var(--gray-300);
}

/* Tableau de bord : les deux encarts de solde cote a cote des 640 px,
   empiles sur mobile. lg:grid-cols-2 n'existe pas dans le Tailwind
   compile, d'ou cette regle. */
.cartes-solde {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .cartes-solde {
    grid-template-columns: 1fr 1fr;
  }
}

/* Champ fichier : le rendu natif du navigateur jure avec le reste des
   formulaires. On habille le champ comme un .form-input et son bouton
   interne comme un bouton secondaire, via ::file-selector-button. */
.form-file {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  background: white;
  font-size: 0.875rem;
  color: var(--gray-600);
  cursor: pointer;
  transition: var(--transition);
}

.form-file:hover {
  border-color: var(--gray-300);
}

.form-file:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-50);
}

.form-file::file-selector-button {
  margin-right: 0.75rem;
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  background: var(--gray-50);
  color: var(--gray-700);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.form-file::file-selector-button:hover {
  background: var(--gray-100);
  border-color: var(--gray-300);
  color: var(--primary);
}


/* ==================================================================
   UTILITAIRES TAILWIND RENDUS PRIORITAIRES SUR LES CLASSES COMPOSANT

   styles.css est chargee APRES tailwind.css. Une classe composant
   (.card, .btn-primary, .form-input...) et un utilitaire (.p-4, .hidden,
   .text-sm...) ont la meme specificite (0,1,0) : a egalite c'est l'ordre
   qui tranche, donc le composant gagne et l'utilitaire pose a cote de lui
   ne sert a rien.

   Audit du 25/08/2026, mene en mesurant le style calcule de chaque
   combinaison reellement presente dans le site : 55 paires concernees,
   17 classes composant. Les cas ci-dessous sont donc exhaustifs pour le
   balisage actuel — mais toute NOUVELLE combinaison retombera dans le
   piege et devra etre ajoutee ici.

   Solutions globales ecartees, et pourquoi :
   - :where(.card) pour ramener le composant a une specificite nulle : le
     preflight de Tailwind cible « button, input, select, textarea » et
     « h1..h6 » par nom d'element (0,0,1), qui l'emporterait alors et
     effacerait bordures, padding et graisses.
   - @layer autour de styles.css : une regle en couche perd contre toute
     regle hors couche, preflight compris. Meme probleme, en pire.
   La correction durable serait de recompiler Tailwind APRES styles.css
   dans un unique passage, ou de passer les composants en @apply.
   ================================================================== */

/* --- Boutons : padding, corps de texte, affichage --- */
.btn-primary.px-3,
.btn-secondary.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.btn-primary.px-4,
.btn-secondary.px-4 { padding-left: 1rem; padding-right: 1rem; }
.btn-primary.px-8   { padding-left: 2rem; padding-right: 2rem; }
.btn-primary.py-2,
.btn-secondary.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.btn-primary.py-4   { padding-top: 1rem; padding-bottom: 1rem; }
.btn-primary.text-sm,
.btn-secondary.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.btn-primary.w-full,
.btn-secondary.w-full  { width: 100%; }
.btn-primary.flex,
.btn-secondary.flex    { display: flex; }
.btn-primary.cursor-not-allowed { cursor: not-allowed; }

/* .hidden ignore : le bouton reste visible alors qu'il devait disparaitre.
   Le seul defaut de la liste qui ne soit pas cosmetique. */
.btn-primary.hidden    { display: none; }
.sidebar-compte.hidden { display: none; }

/* --- Cartes : padding, fond, bordures --- */
.card.p-2 { padding: 0.5rem; }
.card.p-3 { padding: 0.75rem; }
.card.p-4 { padding: 1rem; }
.card.p-5 { padding: 1.25rem; }
.card.p-8 { padding: 2rem; }

.card.bg-amber-50   { background-color: rgb(255 251 235); }
.card.bg-green-50   { background-color: rgb(240 253 244); }
.card.bg-primary-50 { background-color: rgb(252 228 236); }
.card.bg-slate-50   { background-color: rgb(248 250 252); }
/* Encart « Générez votre ERP » des pages risques et métiers : .card pose un
   fond blanc APRÈS Tailwind et effaçait le dégradé (texte blanc sur blanc,
   signalé le 07/09/2026). Les utilitaires d'opacité ne sont pas compilés. */
.card.bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--tw-gradient-stops, #e91e63, #d81b60)); }
.card.bg-primary-500    { background-color: #e91e63; }
.card.bg-primary-600    { background-color: #d81b60; }
.card .text-white\/80   { color: rgb(255 255 255 / 0.8); }
.card .hover\:bg-white\/90:hover { background-color: rgb(255 255 255 / 0.9); }

.card.border-2 { border-width: 2px; }
.card.border-amber-200   { border-color: rgb(253 230 138); }
.card.border-green-100   { border-color: rgb(220 252 231); }
.card.border-green-200   { border-color: rgb(187 247 208); }
.card.border-primary-100 { border-color: rgb(248 187 217); }
.card.border-slate-200   { border-color: rgb(226 232 240); }

/* Liseres colores a gauche des encarts d'avertissement. */
.card.border-l-4         { border-left-width: 4px; }
.card.border-l-amber-500 { border-left-color: rgb(245 158 11); }
.card.border-l-blue-500  { border-left-color: rgb(59 130 246); }
.card.border-l-red-500   { border-left-color: rgb(239 68 68); }

/* --- Navigation : couleurs et graisse --- */
.mobile-nav-link.font-semibold     { font-weight: 600; }
.mobile-nav-link.text-primary-500  { color: rgb(233 30 99); }
.mobile-nav-link.text-red-500,
.sidebar-link.text-red-500         { color: rgb(239 68 68); }

/* --- Champs --- */
.form-input.pr-10 { padding-right: 2.5rem; }
.form-label.mb-0  { margin-bottom: 0; }
.search-input-lg.border-0    { border-width: 0; }
.search-input-lg.shadow-none { box-shadow: none; }

/* --- Titres et blocs editoriaux --- */
.section-title.text-left    { text-align: left; }
.section-subtitle.max-w-3xl { max-width: 48rem; }
.pricing-price.text-2xl     { font-size: 1.5rem; line-height: 2rem; }
.pricing-title.text-sm      { font-size: 0.875rem; line-height: 1.25rem; }
.chip.text-xs               { font-size: 0.75rem; line-height: 1rem; }
.feature-icon.mb-3          { margin-bottom: 0.75rem; }
.footer-bottom.flex-col     { flex-direction: column; }

/* ==================================================================
   RETABLISSEMENT DES VARIANTES RESPONSIVES

   Le bloc precedent monte les utilitaires en (0,2,0) pour qu'ils passent
   devant les classes composant. Effet de bord immediat : une variante
   responsive comme .lg\:block vaut (0,1,0), et UNE MEDIA QUERY N'AJOUTE
   AUCUNE SPECIFICITE. Donc .sidebar-compte.hidden battait .lg\:block a
   toutes les tailles, et la colonne de navigation de l'espace prive
   disparaissait aussi sur grand ecran — alors qu'elle ne devait l'etre
   que sur mobile (« hidden lg:block »).

   On remonte donc chaque variante en (0,3,0) dans sa media query. Liste
   etablie en croisant les 52 paires du bloc precedent avec toutes les
   variantes responsives presentes dans le balisage : 13 conflits, 159
   occurrences.

   A retenir pour la suite : toute paire ajoutee au bloc precedent doit
   etre confrontee aux variantes responsives du meme groupe de proprietes,
   sans quoi elle les neutralise silencieusement.
   ================================================================== */

@media (min-width: 640px) {
  .btn-primary.hidden.sm\:inline-flex   { display: inline-flex; }
  .btn-primary.w-full.sm\:w-auto,
  .btn-secondary.w-full.sm\:w-auto      { width: auto; }
  .btn-primary.py-2.sm\:py-2\.5         { padding-top: 0.625rem; padding-bottom: 0.625rem; }
  .btn-primary.text-sm.sm\:text-base,
  .btn-secondary.text-sm.sm\:text-base  { font-size: 1rem; line-height: 1.5rem; }
  .card.p-4.sm\:p-5                     { padding: 1.25rem; }
  .card.p-5.sm\:p-6                     { padding: 1.5rem; }
  .pricing-title.text-sm.sm\:text-base  { font-size: 1rem; line-height: 1.5rem; }
  .pricing-price.text-2xl.sm\:text-3xl  { font-size: 1.875rem; line-height: 2.25rem; }
}

@media (min-width: 768px) {
  .footer-bottom.flex-col.md\:flex-row  { flex-direction: row; }
}

@media (min-width: 1024px) {
  .sidebar-compte.hidden.lg\:block      { display: block; }
  .card.p-8.lg\:p-12                    { padding: 3rem; }
}

/* ------------------------------------------------------------------
   Utilitaires Tailwind poses a cote de .form-input

   styles.css est chargee APRES tailwind.css, et .form-input declare width,
   padding, font-size et background. Un utilitaire comme .w-20 a la meme
   specificite (0,1,0) : a egalite c'est l'ordre qui tranche, donc .form-input
   gagne et l'utilitaire est purement decoratif. Le select « Afficher N
   entrees » de mes-erp.php porte « form-input w-20 py-1 text-xs » et voyait
   ses trois utilitaires ignores — il s'affichait pleine largeur, au mauvais
   corps.

   Les regles ci-dessous redeclarent les combinaisons EFFECTIVEMENT utilisees
   dans le site, en (0,2,0) pour reprendre la main. Pour en ajouter une, il
   faut donc l'ecrire ici : c'est le prix de la coexistence entre une feuille
   applicative et un Tailwind compile charge avant elle.

   Pas de :where(.form-input) pour ramener la specificite a zero : le preflight
   de Tailwind cible « button, input, select, textarea » par leur nom d'element
   (0,0,1), qui l'emporterait alors et effacerait bordure et padding.
   ------------------------------------------------------------------ */
.form-input.w-14   { width: 3.5rem; }
.form-input.w-20   { width: 5rem; }
.form-input.w-64   { width: 16rem; }
.form-input.w-72   { width: 18rem; }
.form-input.w-auto { width: auto; }

.form-input.text-xs { font-size: 0.75rem; }
.form-input.text-sm { font-size: 0.875rem; }

.form-input.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }

.form-input.bg-slate-100 { background: #f1f5f9; }

/* Champs a icone : le picto est pose en absolu a gauche et le champ recoit
   pl-10 pour lui laisser la place. Sans cette regle, l'utilitaire ne passe
   pas - styles.css est charge apres tailwind.css, donc a specificite egale
   le padding de .form-input l'emporte et le texte du placeholder demarre
   sous l'icone. Meme piege que .btn-sm plus bas. */
.form-input.pl-10 {
  /* 3 rem et non 2,5 : le formulaire public habille ses champs a icone avec
     .input-icon-left input, qui vaut 3 rem (voir plus bas). Les pages
     connectees passaient par .pl-10 a 2,5 rem, soit 8 px de respiration
     apres l'icone contre 16. Meme intention, deux mecanismes, deux rendus :
     on aligne sur la valeur la plus lisible. */
  padding-left: 3rem;
}

/* Colonne de navigation des pages privees. Elle valait lg:w-64 (16 rem),
   trop etroit pour ses libelles. Declaree ici plutot qu'avec un utilitaire :
   le Tailwind compile n'expose aucune largeur lg: au-dela de w-64. */
@media (min-width: 1024px) {
  .sidebar-compte {
    width: 20rem;
  }
}

/* Variante compacte, pour les pieds de dialogue ou un bouton pleine taille
   ecrase la boite. A declarer ici et non via py-2/px-4 : styles.css est
   charge apres tailwind.css, donc le padding de .btn-primary l'emporterait. */
.btn-sm {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  border-radius: var(--radius-sm);
}

.card {
  background: white;
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow);
  border: 1px solid var(--gray-100);
  transition: var(--transition);
}

.card:hover {
  box-shadow: var(--shadow-lg);
}

.card-lift:hover {
  transform: translateY(-4px);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
}

.badge-success {
  background: var(--success-light);
  color: var(--success);
}

.badge-warning {
  background: var(--warning-light);
  color: var(--warning);
}

.badge-danger {
  background: var(--danger-light);
  color: var(--danger);
}

.badge-primary {
  background: var(--primary-50);
  color: var(--primary);
}

.form-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  transition: var(--transition);
  background: white;
}

.form-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(233, 30, 99, 0.1);
}

.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-700);
  margin-bottom: 0.5rem;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  color: var(--gray-600);
  font-weight: 500;
  border-radius: var(--radius-sm);
  transition: var(--transition);
  text-decoration: none;
  position: relative;
}

.sidebar-link:hover {
  background: var(--gray-50);
  color: var(--gray-900);
}

.sidebar-link.active {
  background: var(--primary-50);
  color: var(--primary);
}

.sidebar-link.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background: var(--primary);
  border-radius: 0 2px 2px 0;
}

.table-row {
  transition: var(--transition);
}

.table-row:hover {
  background: var(--gray-50);
}

.icon-btn {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--gray-200);
  background: white;
  color: var(--gray-500);
  cursor: pointer;
  transition: var(--transition);
}

.icon-btn:hover {
  background: var(--gray-50);
  color: var(--primary);
  border-color: var(--primary-100);
}

.gradient-text {
  background: var(--primary-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stepper-dot {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  transition: var(--transition);
}

.stepper-dot.active {
  background: var(--primary-gradient);
  color: white;
  box-shadow: 0 4px 14px 0 rgba(233, 30, 99, 0.35);
}

.stepper-dot.completed {
  background: var(--success);
  color: white;
}

.stepper-dot.pending {
  background: var(--gray-100);
  color: var(--gray-400);
}

.toggle-switch {
  position: relative;
  width: 3rem;
  height: 1.5rem;
  background: var(--gray-200);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: var(--transition);
}

.toggle-switch.active {
  background: var(--primary);
}

.toggle-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1.25rem;
  height: 1.25rem;
  background: white;
  border-radius: 50%;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
}

.toggle-switch.active::after {
  transform: translateX(1.5rem);
}

/* Container large */
.container-xl {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

@media (min-width: 1536px) {
  .container-xl {
    max-width: 1536px;
  }
}

/* Pricing Cards - Modern Style */
.pricing-card {
  position: relative;
  overflow: hidden;
  background: white;
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--gray-100);
  transition: var(--transition);
}

.pricing-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
}

.pricing-card.popular {
  border: 2px solid var(--primary);
  box-shadow: 0 20px 40px -10px rgba(233, 30, 99, 0.2);
}

.pricing-card.popular::before {
  content: 'Populaire';
  position: absolute;
  top: 1rem;
  right: -2rem;
  background: var(--primary-gradient);
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 2.5rem;
  transform: rotate(45deg);
}

.pricing-header {
  text-align: center;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--gray-100);
  margin-bottom: 1.5rem;
}

.pricing-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--gray-800);
  margin-bottom: 0.5rem;
}

.pricing-price {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--primary);
}

.pricing-price span {
  font-size: 1rem;
  font-weight: 500;
  color: var(--gray-500);
}

.pricing-features {
  list-style: none;
  margin-bottom: 1.5rem;
}

.pricing-features li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0;
  color: var(--gray-600);
  font-size: 0.9375rem;
}

.pricing-features li svg {
  color: var(--success);
  flex-shrink: 0;
}

.pricing-btn {
  width: 100%;
  padding: 0.875rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.pricing-btn-primary {
  background: var(--primary-gradient);
  color: white;
  border: none;
  box-shadow: 0 4px 14px 0 rgba(233, 30, 99, 0.35);
}

.pricing-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px 0 rgba(233, 30, 99, 0.45);
}

.pricing-btn-outline {
  background: white;
  color: var(--primary);
  border: 2px solid var(--primary);
}

.pricing-btn-outline:hover {
  background: var(--primary-50);
}

.map-placeholder {
  background: linear-gradient(135deg, var(--gray-100) 0%, var(--gray-50) 100%);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  border: 2px dashed var(--gray-200);
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.animate-fadeInUp {
  animation: fadeInUp 0.5s ease forwards;
}

.skeleton {
  background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-50) 50%, var(--gray-100) 75%);
  background-size: 200% 100%;
  animation: pulse 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

/* Public Pages Styles */
.hero-gradient {
  background: linear-gradient(135deg, #f0f4ff 0%, #fce4ec 50%, #fff5f5 100%);
}

.hero-image-overlay {
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.7) 0%, rgba(30, 41, 59, 0.9) 100%);
}

.section-gradient {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.footer {
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  color: white;
}

.nav-link {
  color: var(--gray-600);
  font-weight: 500;
  font-size: 0.9375rem;
  padding: 0.5rem 0.875rem;
  transition: var(--transition);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.nav-link:hover {
  color: var(--primary);
}

.nav-link.active {
  color: var(--primary);
  border-bottom: 2px solid var(--primary);
}

/* Mobile Menu */
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: auto;
  max-height: 85vh;
  overflow-y: auto;
  background: white;
  z-index: 100;
  padding: 1rem 1.25rem;
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 99;
}

.mobile-nav-link {
  display: block;
  padding: 0.5rem 0;
  color: var(--gray-700);
  font-weight: 500;
  font-size: 0.9375rem;
  text-decoration: none;
  border-bottom: 1px solid var(--gray-100);
  transition: var(--transition);
}

.mobile-nav-link:hover, .mobile-nav-link.active {
  color: var(--primary);
}

.mobile-nav-link.active {
  border-left: 3px solid var(--primary);
  padding-left: 1rem;
  margin-left: -1rem;
}

.feature-icon {
  width: 3.5rem;
  height: 3.5rem;
  background: var(--primary-50);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
}

.feature-icon-lg {
  width: 4rem;
  height: 4rem;
  background: linear-gradient(135deg, var(--primary-50) 0%, white 100%);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  box-shadow: var(--shadow);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.875rem;
  border-radius: var(--radius-full);
  font-size: 0.8125rem;
  font-weight: 500;
  background: white;
  border: 1px solid var(--gray-200);
  color: var(--gray-600);
  transition: var(--transition);
  cursor: pointer;
}

.chip:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.chip.active {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

.city-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4/3;
}

.city-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-slow);
}

.city-card:hover img {
  transform: scale(1.05);
}

.city-card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  color: white;
}

.article-card {
  border-radius: var(--radius);
  overflow: hidden;
  background: white;
  box-shadow: var(--shadow);
  transition: var(--transition);
}

.article-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.article-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.risk-block {
  background: white;
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow);
  border-left: 4px solid var(--primary);
  transition: var(--transition);
}

.risk-block:hover {
  box-shadow: var(--shadow-lg);
}

.accordion-item {
  background: white;
  border-radius: var(--radius);
  margin-bottom: 0.75rem;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.accordion-trigger {
  width: 100%;
  padding: 1.25rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  color: var(--gray-800);
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
}

.accordion-content {
  padding: 0 1.5rem 1.25rem;
  color: var(--gray-600);
  line-height: 1.6;
}

.cta-banner {
  background: var(--primary-gradient);
  border-radius: var(--radius-lg);
  padding: 3rem 2rem;
  text-align: center;
  color: white;
}

.cta-banner h3 {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.cta-banner p {
  opacity: 0.9;
  margin-bottom: 1.5rem;
}

.btn-white {
  background: white;
  color: var(--primary);
  font-weight: 600;
  padding: 0.875rem 1.75rem;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-white:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.15);
}

.btn-outline {
  background: transparent;
  color: var(--gray-700);
  font-weight: 500;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--gray-300);
  cursor: pointer;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.btn-outline:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.search-input-lg {
  width: 100%;
  padding: 1rem 1.25rem 1rem 3rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  font-size: 1rem;
  transition: var(--transition);
  background: white;
  box-shadow: var(--shadow);
}

.search-input-lg:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(233, 30, 99, 0.1), var(--shadow-md);
}

.kpi-card {
  background: white;
  border-radius: var(--radius);
  padding: 1.25rem;
  text-align: center;
  box-shadow: var(--shadow);
}

.kpi-icon {
  width: 3rem;
  height: 3rem;
  background: var(--primary-50);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  margin: 0 auto 0.75rem;
}

.tab-btn {
  padding: 0.625rem 1.25rem;
  border-radius: var(--radius-full);
  font-weight: 500;
  font-size: 0.875rem;
  border: none;
  cursor: pointer;
  transition: var(--transition);
  background: transparent;
  color: var(--gray-600);
}

.tab-btn:hover {
  background: var(--gray-100);
}

.tab-btn.active {
  background: var(--primary);
  color: white;
}

.input-icon-left {
  position: relative;
}

.input-icon-left svg {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray-400);
  width: 1.25rem;
  height: 1.25rem;
}

.input-icon-left input {
  padding-left: 3rem;
}

.social-icon {
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  transition: var(--transition);
}

.social-icon:hover {
  background: var(--primary);
}

.benefits-card {
  background: linear-gradient(135deg, var(--primary-50) 0%, white 100%);
  border-radius: var(--radius);
  padding: 1.5rem;
  border: 1px solid var(--primary-100);
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  color: var(--gray-700);
}

.check-list li svg {
  color: var(--primary);
  flex-shrink: 0;
  margin-top: 0.125rem;
}

/* Homepage Sections */
.section-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--gray-800);
  text-align: center;
  margin-bottom: 0.75rem;
}

.section-subtitle {
  font-size: 1.125rem;
  color: var(--gray-500);
  text-align: center;
  max-width: 600px;
  margin: 0 auto 3rem;
}

.section-pink {
  background: linear-gradient(180deg, #fce4ec 0%, #fff5f8 100%);
}

.section-gray {
  background: var(--gray-50);
}

/* How it works steps */
.step-card {
  background: white;
  border-radius: var(--radius-lg);
  padding: 2rem;
  text-align: center;
  box-shadow: var(--shadow);
  position: relative;
}

.step-number {
  width: 3rem;
  height: 3rem;
  background: var(--primary-gradient);
  color: white;
  font-weight: 700;
  font-size: 1.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
  box-shadow: 0 4px 14px 0 rgba(233, 30, 99, 0.35);
}

.step-card h4 {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--gray-800);
  margin-bottom: 0.5rem;
}

.step-card p {
  color: var(--gray-500);
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* Metiers cards */
.metier-card {
  background: white;
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: var(--transition);
}

.metier-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.metier-icon {
  width: 3.5rem;
  height: 3.5rem;
  background: var(--primary-50);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  flex-shrink: 0;
}

.metier-card h4 {
  font-weight: 600;
  color: var(--gray-800);
  margin-bottom: 0.25rem;
}

.metier-card p {
  font-size: 0.875rem;
  color: var(--gray-500);
}

/* Feature cards */
.feature-card {
  background: white;
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow);
  transition: var(--transition);
  text-align: center;
}

.feature-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.feature-icon {
  width: 3.5rem;
  height: 3.5rem;
  background: var(--primary-50);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  margin: 0 auto 1rem;
}

.feature-card h4 {
  font-weight: 600;
  color: var(--gray-800);
  margin-bottom: 0.5rem;
}

.feature-card p {
  font-size: 0.875rem;
  color: var(--gray-500);
  line-height: 1.5;
}

/* Content cards */
.content-card {
  background: white;
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow);
  transition: var(--transition);
}

.content-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.content-card h4 {
  margin-bottom: 0.5rem;
}

/* Obligation checker */
.obligation-card {
  background: white;
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  box-shadow: var(--shadow-lg);
  max-width: 600px;
  margin: 0 auto;
}

/* Footer styles */
.footer-link {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-size: 0.9375rem;
  transition: var(--transition);
  display: block;
  padding: 0.375rem 0;
}

.footer-link:hover {
  color: white;
}

.footer-title {
  color: white;
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 1rem;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 2rem;
  margin-top: 3rem;
}

/* Article single page */
.article-content {
  max-width: 800px;
  margin: 0 auto;
}

.article-content h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gray-800);
  margin: 2rem 0 1rem;
}

.article-content h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--gray-700);
  margin: 1.5rem 0 0.75rem;
}

.article-content p {
  color: var(--gray-600);
  line-height: 1.8;
  margin-bottom: 1.25rem;
}

.article-content ul, .article-content ol {
  margin: 1rem 0 1.5rem 1.5rem;
  color: var(--gray-600);
  line-height: 1.8;
}

.article-content li {
  margin-bottom: 0.5rem;
}

.article-meta {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  color: var(--gray-500);
  font-size: 0.9375rem;
  margin-bottom: 2rem;
}

/* Stepper for multi-step forms */
.stepper {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.stepper-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.stepper-line {
  width: 4rem;
  height: 2px;
  background: var(--gray-200);
}

.stepper-line.completed {
  background: var(--success);
}

/* Stripe payment form */
.payment-card {
  background: white;
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--gray-100);
}

.payment-summary {
  background: var(--gray-50);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.payment-row {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
  color: var(--gray-600);
}

.payment-row.total {
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--gray-800);
  border-top: 1px solid var(--gray-200);
  padding-top: 1rem;
  margin-top: 0.5rem;
}

/* ------------------------------------------------------------------ */
/* Cadastre IGN sur les cartes Leaflet                                */
/* Les tuiles PARCELLAIRE_EXPRESS sont oranges par defaut : rotation  */
/* de teinte vers le rose du site (~#e91e63) + opacite reduite pour   */
/* un rendu discret, harmonise a la charte.                           */
/* ------------------------------------------------------------------ */
.leaflet-cadastre-pane {
  filter: hue-rotate(330deg) saturate(1.8) opacity(0.72);
}

/* ------------------------------------------------------------------ */
/* En-tete : le logo ne doit jamais etre comprime                     */
/*                                                                    */
/* La barre est un flex a trois elements : logo, nav, boutons de       */
/* compte. Entre 1024 et 1280 px la nav complete apparait (lg:flex)    */
/* mais la place manque : 166 + 744 + 204 px demandes pour ~961 px     */
/* disponibles. Le logo etant retractable comme les autres, il         */
/* absorbait tout le deficit - mesure a 14 x 40 px au lieu de          */
/* 166 x 40, soit un ratio de 0,34 pour 4,15.                          */
/*                                                                    */
/* Deux garde-fous : sur cette plage on revient au menu burger, et le  */
/* logo est verrouille en largeur quoi qu'il arrive. Les selecteurs    */
/* d'attribut passent devant les classes Tailwind en specificite ;     */
/* les variantes xl: n'existent pas dans le CSS compile, d'ou ce       */
/* passage par une media query ecrite a la main.                       */
/* ------------------------------------------------------------------ */
header a:has(> img[src$="logo.png"]),
header img[src$="logo.png"] {
  flex-shrink: 0;
}

header img[src$="logo.png"] {
  object-fit: contain;
}

@media (min-width: 1024px) and (max-width: 1279.98px) {
  header nav[class~="lg:flex"] {
    display: none;
  }

  header button[class~="lg:hidden"] {
    display: inline-flex;
  }
}


/* Etiquette de parcelle sur les cartes Leaflet (numero de section + parcelle).

   Declaree ici et non dans chaque page : tableau-de-bord.php posait bien la
   classe .parcelle-map-label sur son tooltip mais ne la definissait nulle part,
   si bien qu'en mode connecte l'etiquette retombait sur le style par defaut de
   Leaflet — une boite blanche a bordure, en Helvetica, nettement plus lourde
   que la pastille utilisee sur etablir-erp.php.

   Le font-family est explicite : .leaflet-container impose sa propre pile
   Helvetica/Arial a tout ce qu'il contient, donc l'etiquette n'heritait pas
   de l'Inter du site. */
/* Selecteur double a dessein. Leaflet declare .leaflet-tooltip { background:
   #fff; color: #222 } avec la MEME specificite (0,1,0) que .parcelle-map-label :
   a egalite, c'est l'ordre de chargement qui tranche, et il differe d'une page
   a l'autre — leaflet.css est chargee AVANT styles.css sur
   generer-diagnostic-erp-en-ligne.html, mais APRES sur etablir-erp.php et
   tableau-de-bord.php. La regle simple ne s'appliquait donc que sur une page
   sur trois. .leaflet-tooltip.parcelle-map-label vaut (0,2,0) et l'emporte
   partout, quel que soit l'ordre. */
.leaflet-tooltip.parcelle-map-label,
.parcelle-map-label {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.3;
  color: #fff;
  background: rgba(233, 30, 99, 0.94);
  border: 0;
  border-radius: 5px;
  padding: 2px 6px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
  white-space: nowrap;
}

/* Leaflet dessine une fleche en ::before sur ses tooltips : inutile ici,
   l'etiquette est posee au centre de la parcelle. */
.leaflet-tooltip.parcelle-map-label::before,
.leaflet-tooltip.parcelle-map-label:before,
.parcelle-map-label::before,
.parcelle-map-label:before {
  display: none !important;
}