/**
 * @file        local-premium.css
 * @project     SurBesançon.fr
 * @description Design premium sophistiqué pour pages locales
 * @version     2.0.0
 */

/* ══════════════════════════════════════════════════════════
   TYPOGRAPHIE PREMIUM SOPHISTIQUÉE
══════════════════════════════════════════════════════════ */

/* Paragraphes avec emphases sélectives */
.section p strong {
  font-weight: var(--font-bold);
  color: var(--c-primary);
  letter-spacing: -0.01em;
}

.section p em {
  font-style: italic;
  color: var(--c-text);
  font-weight: var(--font-medium);
}

/* Lead paragraphe : premier paragraphe d'une section */
.section__lead {
  font-size: clamp(var(--text-base), 1.8vw, var(--text-lg));
  line-height: 1.6;
  color: var(--c-text);
  font-weight: var(--font-medium);
  margin-bottom: var(--sp-8);
  letter-spacing: -0.015em;
  max-width: 65ch;
}

/* Chiffres et données clés en évidence */
.stat-inline {
  font-weight: var(--font-bold);
  color: var(--c-accent);
  font-variant-numeric: tabular-nums;
  background: rgba(var(--clr-accent-500-rgb), 0.08);
  padding: 0.15em 0.4em;
  border-radius: var(--r-sm);
  white-space: nowrap;
}

/* Citations et éléments mis en avant */
.highlight-box {
  background: linear-gradient(135deg, rgba(var(--clr-accent-500-rgb), 0.05), rgba(var(--clr-accent-500-rgb), 0.02));
  border-left: 3px solid var(--c-accent);
  padding: var(--sp-8) var(--sp-10);
  border-radius: var(--r-xl);
  margin-block: var(--sp-10);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.highlight-box p {
  color: var(--c-text);
  font-weight: var(--font-medium);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  max-width: 100%;
}

/* Listes premium avec icônes élégantes */
.liste-icones {
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-6);
}

.liste-icones li {
  position: relative;
  padding-left: var(--sp-8);
  margin-bottom: var(--sp-4);
  line-height: 1.7;
  font-size: clamp(var(--text-sm), 1.6vw, var(--text-base));
  color: var(--c-text);
}

.liste-icones li::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--c-accent);
  font-weight: var(--font-bold);
  font-size: 1.1em;
}

/* Section sous-titre premium */
.section-sous-titre {
  font-size: clamp(var(--text-lg), 2vw, var(--text-xl));
  font-weight: var(--font-bold);
  color: var(--c-primary);
  margin-bottom: var(--sp-6);
  margin-top: var(--sp-10);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.section-sous-titre:first-child {
  margin-top: 0;
}

/* Espacements généreux entre paragraphes */
.section .cols-2 p + p {
  margin-top: var(--sp-6);
}

.section p {
  font-size: clamp(var(--text-sm), 1.6vw, var(--text-base));
  line-height: 1.75;
  color: var(--c-text);
  margin-bottom: var(--sp-5);
}

/* Liens inline premium */
.section a {
  color: var(--c-accent);
  font-weight: var(--font-semibold);
  text-decoration: none;
  border-bottom: 1.5px solid rgba(var(--clr-accent-500-rgb), 0.3);
  transition: border-color var(--t-fast), color var(--t-fast);
  padding-bottom: 1px;
}

.section a:hover {
  color: var(--c-accent-h);
  border-bottom-color: var(--c-accent-h);
}

/* Label section premium */
.label-section {
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--c-accent);
  margin-bottom: var(--sp-5);
  display: inline-block;
  position: relative;
  padding-left: var(--sp-6);
}

.label-section::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 2px;
  background: var(--c-accent);
}

/* Section titre premium avec meilleur contraste */
.section-titre {
  font-size: clamp(var(--text-2xl), 3.5vw, var(--text-4xl));
  font-weight: 900;
  color: var(--c-primary);
  line-height: 1.15;
  margin-bottom: var(--sp-8);
  letter-spacing: -0.03em;
  max-width: 28ch;
}

/* Section accroche premium */
.section-accroche {
  font-size: clamp(var(--text-base), 1.8vw, var(--text-xl));
  line-height: 1.5;
  color: var(--c-text-soft);
  font-weight: var(--font-medium);
  margin-bottom: var(--sp-10);
  max-width: 55ch;
  letter-spacing: -0.01em;
}

/* Hero accroche enrichie */
.hero__accroche {
  font-size: clamp(var(--text-lg), 2.5vw, var(--text-xl));
  line-height: var(--leading-relaxed);
  color: var(--c-text-soft);
  font-weight: var(--font-medium);
  max-width: 52ch;
  margin-inline: auto;
}

/* Zones liste premium */
.zones-liste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-6);
}

.zone-tag {
  display: inline-block;
  padding: var(--sp-3) var(--sp-5);
  background: var(--c-bg-elevated);
  color: var(--c-text);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  border-radius: var(--r-full);
  border: 1.5px solid var(--c-border);
  transition: all var(--t-fast);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.zone-tag:hover {
  background: rgba(var(--clr-accent-500-rgb), 0.08);
  border-color: var(--c-accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(var(--clr-accent-500-rgb), 0.15);
}

.zone-tag--actif {
  background: var(--c-accent);
  color: var(--clr-white);
  border-color: var(--c-accent);
  box-shadow: 0 4px 12px rgba(var(--clr-accent-500-rgb), 0.25);
}

/* Cartes offres premium */
.offre-carte {
  padding: var(--sp-8);
  border-radius: var(--r-2xl);
  transition: transform var(--t-normal), box-shadow var(--t-normal);
}

.offre-carte:hover {
  transform: translateY(-4px);
}

.offre-carte__titre {
  font-size: clamp(var(--text-lg), 2vw, var(--text-xl));
  font-weight: var(--font-bold);
  color: var(--c-primary);
  margin-bottom: var(--sp-4);
  letter-spacing: -0.02em;
}

.offre-carte__texte {
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--c-text-soft);
  margin-bottom: var(--sp-6);
}

.offre-carte__lien {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: var(--font-bold);
  font-size: var(--text-base);
  color: var(--c-accent);
  text-decoration: none;
  transition: gap var(--t-fast), color var(--t-fast);
}

/* Désactiver la flèche automatique du 04-components.css */
.offre-carte__lien::after {
  content: none !important;
}

.offre-carte__lien:hover {
  gap: var(--sp-4);
  color: var(--c-accent-h);
}

/* FAQ premium sophistiquée */
.faq-liste {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.faq-liste details {
  background: var(--c-bg-elevated);
  border-radius: var(--r-xl);
  border: 1px solid var(--c-border);
  overflow: hidden;
  transition: box-shadow var(--t-fast);
}

.faq-liste details:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.faq-liste details summary {
  font-size: clamp(var(--text-sm), 1.8vw, var(--text-base));
  font-weight: var(--font-semibold);
  color: var(--c-primary);
  cursor: pointer;
  padding: var(--sp-6) var(--sp-8);
  border-radius: var(--r-xl);
  transition: background var(--t-fast), color var(--t-fast);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.faq-liste details summary::-webkit-details-marker {
  display: none;
}

.faq-liste details summary::after {
  content: "+";
  font-size: 1.5em;
  font-weight: var(--font-bold);
  color: var(--c-accent);
  transition: transform var(--t-fast);
}

.faq-liste details[open] summary::after {
  transform: rotate(45deg);
}

.faq-liste details summary:hover {
  background: rgba(var(--clr-accent-500-rgb), 0.05);
  color: var(--c-accent);
}

.faq-liste details[open] summary {
  color: var(--c-accent);
  font-weight: var(--font-bold);
  background: rgba(var(--clr-accent-500-rgb), 0.08);
}

.faq-liste details div {
  padding: 0 var(--sp-8) var(--sp-6) var(--sp-8);
}

.faq-liste details div p {
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--c-text);
}

.faq-liste details div p strong {
  font-weight: var(--font-bold);
  color: var(--c-primary);
}

.faq-liste details div p a {
  font-weight: var(--font-semibold);
  color: var(--c-accent);
  border-bottom: 1.5px solid rgba(var(--clr-accent-500-rgb), 0.3);
}

/* Garanties hero premium */
.hero__garanties {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  justify-content: center;
  margin-top: var(--sp-8);
}

.garantie {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-6);
  background: rgba(var(--clr-accent-500-rgb), 0.08);
  border: 1.5px solid rgba(var(--clr-accent-500-rgb), 0.25);
  border-radius: var(--r-full);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--c-accent);
  box-shadow: 0 2px 8px rgba(var(--clr-accent-500-rgb), 0.1);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}

.garantie:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(var(--clr-accent-500-rgb), 0.2);
}

.garantie::before {
  content: "✓";
  font-weight: var(--font-bold);
  font-size: var(--text-lg);
}

/* Section entete avec meilleur espacement */
.section-entete {
  margin-bottom: var(--sp-12);
}

/* Hero accroche premium */
.hero__accroche {
  font-size: clamp(var(--text-base), 1.8vw, var(--text-lg));
  line-height: 1.5;
  color: var(--c-text-soft);
  font-weight: var(--font-medium);
  max-width: 55ch;
  margin-inline: auto;
  margin-bottom: var(--sp-8);
  letter-spacing: -0.01em;
}

/* Cols-2 avec meilleur espacement */
.cols-2 {
  gap: var(--sp-12);
}

/* Responsive premium */
@media (max-width: 48em) {
  .section__lead {
    font-size: var(--text-base);
  }
  
  .section-titre {
    font-size: var(--text-xl);
    max-width: 100%;
  }
  
  .section-accroche {
    font-size: var(--text-base);
  }
  
  .section-sous-titre {
    font-size: var(--text-lg);
  }
  
  .cols-2 {
    gap: var(--sp-8);
  }
  
  .section-entete {
    margin-bottom: var(--sp-8);
  }
}