/* ══════════════════════════════════════════════════════════════
   AZUROTEC — couche éditoriale
   Chargée après polish.css : dernier mot sur la mise en page.

   Pourquoi cette couche existe : app.js anime déjà tous les blocs
   (titres, eyebrows, cartes, galerie, stats). Ajouter du mouvement
   n'aurait rien changé de visible. Ce qui manquait, c'est la mise en
   page — respiration, hiérarchie, échelle typographique.

   Règle absolue : ne jamais poser opacity ni transform sur un élément
   animé par app.js hors état :hover — GSAP écrit sur les mêmes
   propriétés et le dernier qui écrit gagne, ce qui produit des blocs
   invisibles. Ici on ne touche qu'à l'espace, au type et aux filets.
   ══════════════════════════════════════════════════════════════ */

/* ═══ 1. Respiration ════════════════════════════════════════ */

/* Densité « spacious » : le luxe se lit d'abord au blanc tournant.
   Les sections passaient à ~6rem, très serré pour du plein écran. */
:root {
  --sec-y: clamp(6rem, 13vh, 11rem);
  --sec-y-lg: clamp(8rem, 19vh, 16rem);
  --measure: 62ch;
}

.preuve,
.process,
.services,
.offres,
.contact,
.era-arch-section { padding-block: var(--sec-y); }

.era-burgundy-panel,
.ba-section { padding-block: var(--sec-y-lg); }

/* Le texte courant ne dépasse jamais la mesure lisible. */
.section-sub,
.service-desc,
.process-desc,
.footer-tagline { max-width: var(--measure); }

/* ═══ 2. Têtes de section ═══════════════════════════════════ */

/* Structure éditoriale : filet, eyebrow espacé, titre surdimensionné.
   L'eyebrow devient une ligne de registre, pas une étiquette. */
.section-eyebrow {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  color: var(--color-muted);
}
.section-eyebrow::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: currentColor;
  opacity: .3;
}
[lang="ar"] .section-eyebrow { letter-spacing: 0; }

/* Le titre gagne en échelle et perd en interlignage : le contraste
   Didone ne s'exprime qu'à grande taille. */
.section-title {
  font-size: clamp(2.5rem, 6.2vw, 5.75rem);
  line-height: var(--leading-tight);
  letter-spacing: var(--track-display);
  max-width: 18ch;
  text-wrap: balance;
}
[lang="ar"] .section-title { line-height: var(--leading-snug); letter-spacing: 0; }

/* L'accent passe en italique optique — le geste Didone par excellence,
   plus juste ici qu'une couleur d'accent. */
.section-title .accent,
.hero-title .accent { font-style: italic; }

/* ═══ 3. Héros ══════════════════════════════════════════════ */

/* Le titre occupe la pleine largeur optique ; le sous-titre recule. */
.hero-title {
  font-size: clamp(3.25rem, 13.5vw, 14rem);
  line-height: var(--leading-display);
  letter-spacing: var(--track-display);
}
.hero-sub { max-width: 46ch; }

/* Voile cinématographique : dégradé en trois arrêts plutôt qu'un
   aplat, pour que le texte tienne sans assombrir toute l'image. */
.hero-overlay {
  background: linear-gradient(
    to bottom,
    rgba(36, 8, 26, .78) 0%,
    rgba(36, 8, 26, .42) 42%,
    rgba(36, 8, 26, .88) 100%
  );
}

/* Indice de défilement : un filet qui respire, pas une flèche. */
.hero-scroll { opacity: .72; letter-spacing: var(--track-widest); }

/* ═══ 4. Cartes — traitement éditorial ═════════════════════ */

/* On quitte la « boîte » : plus de fond plein, une grille de filets.
   Le visuel porte la carte, le texte s'aligne dessous comme une
   légende de catalogue. */
.service-card,
.process-card,
.pricing-card {
  background: transparent;
  border: 0;
  border-top: 1px solid rgba(23, 35, 59, .18);
  padding-block-start: var(--space-lg);
}
.service-card:hover,
.process-card:hover,
.pricing-card:hover {
  box-shadow: none;
  border-top-color: var(--color-burgundy);
}

/* Le numéro devient un repère de composition, pas une décoration. */
.service-num,
.process-num {
  display: block;
  margin-bottom: var(--space-sm);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-widest);
  color: var(--color-gold);
}

.service-name,
.process-name,
.pricing-name {
  font-size: clamp(1.35rem, 2.1vw, 1.85rem);
  line-height: var(--leading-snug);
  letter-spacing: var(--track-tight);
  margin-block: var(--space-sm) var(--space-xs);
}

.service-desc,
.process-desc { color: var(--color-ink-2); line-height: var(--leading-body); }

/* Le lien de carte se souligne au survol de la carte entière. */
.service-link {
  display: inline-block;
  margin-top: var(--space-md);
  font-size: var(--text-label);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-s) var(--ease-out);
}
.service-card:hover .service-link { border-bottom-color: currentColor; }

/* Grilles plus aérées : la densité tuait la lecture. */
.service-grid,
.process-grid,
.pricing-grid { gap: clamp(2rem, 4.5vw, 4.5rem); }

/* ═══ 5. Galerie — priorité au visuel ══════════════════════ */

/* Le motif « Portfolio Grid » : fond neutre, aucun cadre, l'image
   seule. Une légende ne s'affiche qu'au survol. */
.gallery-item {
  border: 0;
  background: transparent;
  overflow: hidden;
}
.gallery-item figcaption {
  margin-top: var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--color-muted);
}

/* ═══ 6. Panneaux pleine largeur ═══════════════════════════ */

/* Les transitions bordeaux gagnent en amplitude : elles doivent
   fonctionner comme une page de garde entre deux chapitres. */
.era-burgundy-panel .section-title,
.ba-head h2 { font-size: clamp(2.75rem, 7.5vw, 7rem); max-width: 15ch; }

.era-burgundy-panel .section-eyebrow,
.ba-head .section-eyebrow { color: var(--color-sky); }

/* ═══ 7. Détails ═══════════════════════════════════════════ */

/* Chiffres et prix en chasse fixe tabulaire : les colonnes s'alignent. */
.pricing-price,
.stat-value { font-variant-numeric: tabular-nums; letter-spacing: var(--track-tight); }

/* Filets de séparation cohérents partout. */
.site-header { border-bottom: 1px solid rgba(23, 35, 59, .12); }

/* Les titres n'orphelinent plus un mot seul en fin de ligne. */
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* ═══ 8. Mobile ════════════════════════════════════════════ */

@media (max-width: 700px) {
  .section-title { max-width: none; font-size: clamp(2.15rem, 9vw, 3rem); }
  .hero-title { font-size: clamp(2.75rem, 17vw, 5rem); }
  .service-grid, .process-grid, .pricing-grid { gap: var(--space-xl); }
  .section-eyebrow::after { display: none; }
}