/* ==========================================================================
   DAPHNI — Style principal
   Cabinet d'expertise comptable BTP / Artisans / Services

   Architecture CSS :
   1. Design Tokens (custom properties)
   2. Modern Reset
   3. Base / Typography
   4. Utilities
   5. Accessibility (skip-link, focus, reduced-motion)
   [...]
   18. Section Profil — Olivia GALOIS
   19. Badges (OEC, CRCC)
   20. Footer LinkedIn
   6. Header & Navigation
   7. Hero
   8. Trust Bar
   9. Services (cards)
   10. Expertise sectorielle
   11. Why DAPHNI
   12. Contact / CTA
   13. Footer
   14. Sticky CTA mobile
   15. Responsive — Tablet (48rem / 768px)
   16. Responsive — Desktop (64rem / 1024px)
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS
   Palette minérale, typographie architecturale, espacement sur grille 8px.
   Tous les ratios de contraste sont WCAG AA validés.
   ========================================================================== */

:root {
  /* --- Couleurs --- */
  --color-anthracite: #002944;     /* Bleu marine TJN — titres, fonds sombres */
  --color-steel: #1565C0;          /* Bleu profond DAPHNI — accent, liens, CTA */
  --color-steel-dark: #0D47A1;     /* Hover bouton primaire */
  --color-slate: #445566;          /* Texte secondaire */
  --color-white: #FFFFFF;          /* Fond principal, texte sur foncé */
  --color-pearl: #E4E4DA;          /* Fond sections alternées */
  --color-border: #E0E0DB;         /* Bordures cartes, séparateurs */

  /* --- Typographie --- */
  --font-heading: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  --fs-base: 1rem;                 /* 16px */
  --fs-sm: 0.875rem;               /* 14px */
  --fs-lg: 1.125rem;               /* 18px */
  --fs-xl: 1.25rem;                /* 20px */
  --fs-2xl: 1.5rem;                /* 24px */
  --fs-3xl: 2rem;                  /* 32px — h1 mobile */
  --fs-4xl: 2.75rem;               /* 44px — h1 desktop */
  --fs-section: 1.75rem;           /* 28px — h2 mobile */
  --fs-section-lg: 2.25rem;        /* 36px — h2 desktop */

  --lh-tight: 1.2;
  --lh-normal: 1.6;
  --lh-relaxed: 1.75;

  /* --- Espacement (grille 8px) --- */
  --sp-1: 0.5rem;                  /* 8px */
  --sp-2: 1rem;                    /* 16px */
  --sp-3: 1.5rem;                  /* 24px */
  --sp-4: 2rem;                    /* 32px */
  --sp-5: 3rem;                    /* 48px */
  --sp-6: 4rem;                    /* 64px */
  --sp-7: 5rem;                    /* 80px */
  --sp-8: 6rem;                    /* 96px */

  /* --- Layout --- */
  --max-width: 72rem;              /* 1152px */
  --gutter: 1.25rem;               /* 20px mobile, élargi en responsive */

  /* --- Bordures --- */
  --radius-sm: 0.25rem;            /* 4px */
  --radius-md: 0.75rem;            /* 12px */
  --radius-pill: 100px;            /* Boutons TJN */

  /* --- Transitions (uniquement états hover/focus) --- */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;

  /* --- Focus (a11y) --- */
  --focus-width: 3px;
  --focus-color: var(--color-anthracite);
  --focus-offset: 3px;
}


/* ==========================================================================
   2. MODERN RESET
   Box-sizing, marges, images responsive, typo héritée.
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--color-anthracite);
  background-color: #F8F8F4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Padding pour compenser le sticky CTA mobile */
  padding-bottom: 4.5rem;
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

ul,
ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

address {
  font-style: normal;
}

strong {
  font-weight: 700;
}


/* ==========================================================================
   3. BASE / TYPOGRAPHY
   Hiérarchie des titres — Montserrat Bold pour tous les headings.
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: var(--lh-tight);
  color: var(--color-anthracite);
}

h1 {
  font-size: var(--fs-3xl);
  font-weight: 800;
  letter-spacing: -0.02em;
}

h2 {
  font-size: var(--fs-section);
}

h3 {
  font-size: var(--fs-xl);
}

p {
  margin-bottom: var(--sp-2);
}

p:last-child {
  margin-bottom: 0;
}


/* ==========================================================================
   4. UTILITIES
   Container, section spacing, screen-reader only, section titles.
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Espacement vertical standard pour chaque section */
.hero,
.trust,
.services,
.why,
.contact {
  padding-block: var(--sp-6);
}

/* Texte masqué visuellement mais lisible par les lecteurs d'é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;
}

/* Titres et sous-titres de section */
.section-title {
  text-align: center;
  margin-bottom: var(--sp-2);
}

.section-subtitle {
  text-align: center;
  font-size: var(--fs-lg);
  color: var(--color-slate);
  max-width: 38rem;
  margin-inline: auto;
  margin-bottom: var(--sp-5);
}

/* Lien démo inline dans section-subtitle */
.link-demo {
  display: inline-block;
  margin-top: var(--sp-1);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-anthracite);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.link-demo:hover {
  color: var(--color-steel);
  text-decoration: underline;
}

/* Variantes clair (pour section contact sur fond anthracite) */
.section-title--light {
  color: var(--color-white);
}

.section-subtitle--light {
  color: var(--color-border);
}


/* ==========================================================================
   5. ACCESSIBILITY
   Skip-link, focus-visible, prefers-reduced-motion.
   ========================================================================== */

/* Skip-link : invisible par défaut, apparaît au focus clavier */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--sp-2);
  background: var(--color-anthracite);
  color: var(--color-white);
  padding: var(--sp-1) var(--sp-3);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  border-radius: var(--radius-sm);
  z-index: 10000;
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: var(--sp-2);
}

/* Focus-visible : contour épais et contrasté sur TOUS les éléments interactifs */
:focus-visible {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}

/* Suppression des animations si l'utilisateur le demande (a11y RGAA) */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================================
   6. HEADER & NAVIGATION
   Mobile-first : menu plein écran via checkbox hack (sans JS).
   Desktop : barre horizontale.
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: var(--color-white);
  border-bottom: 1px solid transparent;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 5rem; /* 80px — identique au header TJN */
}

/* Logo */
.site-header__logo {
  display: inline-flex;
  align-items: center;
  z-index: 910;
}

/* Taille du logo gérée par .logo-img ci-dessous (section 20) */

/* ------- Hamburger (mobile) ------- */
/* Checkbox invisible qui contrôle l'état ouvert/fermé du menu */
.nav-toggle {
  display: none;
}

.nav-toggle-label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0.625rem;
  cursor: pointer;
  z-index: 910;
}

.nav-toggle-label__bar {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color-anthracite);
  border-radius: 1px;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

/* Animation hamburger → croix quand le menu est ouvert */
.nav-toggle:checked ~ .nav-toggle-label .nav-toggle-label__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle:checked ~ .nav-toggle-label .nav-toggle-label__bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle:checked ~ .nav-toggle-label .nav-toggle-label__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ------- Menu mobile (plein écran) ------- */
.main-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 900;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-normal), visibility var(--transition-normal);
}

.nav-toggle:checked ~ .main-nav {
  opacity: 1;
  visibility: visible;
}

.main-nav__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
}

.main-nav__link {
  font-family: var(--font-heading);
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--color-anthracite);
  padding: var(--sp-1) var(--sp-2);
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  transition: color var(--transition-fast);
}

.main-nav__link:hover {
  color: var(--color-steel);
}

/* CTA dans la nav (mobile) */
.main-nav__cta {
  margin-top: var(--sp-2);
}


/* ==========================================================================
   7. BUTTONS
   Composant réutilisable. Cibles tactiles minimum 44×44px (2.75rem).
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-base);
  line-height: 1;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  padding: 0.75rem 1.75rem;
  min-height: 2.75rem;
  min-width: 2.75rem;
  cursor: pointer;
  transition: background-color var(--transition-fast),
              border-color var(--transition-fast),
              color var(--transition-fast);
}

.btn--lg {
  font-size: var(--fs-lg);
  padding: 1rem 2rem;
  min-height: 3.25rem;
}

/* Primaire : fond steel, texte blanc */
.btn--primary {
  background-color: var(--color-steel);
  color: var(--color-white);
  border-color: var(--color-steel);
}

.btn--primary:hover {
  background-color: var(--color-steel-dark);
  border-color: var(--color-steel-dark);
}

/* Secondaire : contour anthracite, fond transparent */
.btn--secondary {
  background-color: transparent;
  color: var(--color-anthracite);
  border-color: var(--color-anthracite);
}

.btn--secondary:hover {
  background-color: var(--color-anthracite);
  color: var(--color-white);
}

/* Primaire inversé (sur fond foncé) : fond blanc, texte anthracite */
.btn--primary-inverted {
  background-color: var(--color-white);
  color: var(--color-anthracite);
  border-color: var(--color-white);
}

.btn--primary-inverted:hover {
  background-color: var(--color-pearl);
  border-color: var(--color-pearl);
}

/* Secondaire inversé (sur fond foncé) : contour blanc, texte blanc */
.btn--secondary-inverted {
  background-color: transparent;
  color: var(--color-white);
  border-color: var(--color-white);
}

.btn--secondary-inverted:hover {
  background-color: var(--color-white);
  color: var(--color-anthracite);
}

/* Focus spécial sur fond sombre */
.contact .btn:focus-visible {
  outline-color: var(--color-white);
}


/* ==========================================================================
   8. HERO
   Grande accroche + 2 CTA. Mobile-first, aéré.
   ========================================================================== */

.hero {
  padding-block: var(--sp-7) var(--sp-4);
}

.hero__inner {
  text-align: center;
  max-width: 42rem;
  margin-inline: auto;
}

.hero__title {
  margin-bottom: var(--sp-3);
}

.hero__subtitle {
  font-size: var(--fs-lg);
  color: var(--color-slate);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--sp-4);
}

.hero__actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  align-items: center;
}


/* ==========================================================================
   9. TRUST BAR
   3 métriques. Fond pearl pour rupture visuelle.
   ========================================================================== */

.trust {
  background-color: transparent;
  padding-block: 0;
  position: relative;
  z-index: 2;
  /* Chevauchement par-dessus le hero (effet carte flottante TJN) */
  margin-top: -4rem;
}

.trust__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  text-align: center;
  /* Carte blanche arrondie flottante */
  background: var(--color-white);
  border-radius: 28px;
  box-shadow: 0 12px 49px -8px rgba(0, 41, 68, 0.15);
  padding: var(--sp-5) var(--sp-4);
  max-width: calc(var(--max-width) - 6rem);
  margin-inline: auto;
}

.trust__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
}

.trust__icon {
  color: var(--color-steel);
}

.trust__number {
  font-family: var(--font-heading);
  font-size: var(--fs-2xl);
  font-weight: 800;
  color: var(--color-anthracite);
}

.trust__label {
  font-size: var(--fs-sm);
  color: var(--color-slate);
}


/* ==========================================================================
   10. SERVICES (CARDS)
   Grille de 3 cartes : 1 col mobile → 2 tablette → 3 desktop.
   Pas d'ombres, bordures sobres.
   ========================================================================== */

.services__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}

.card {
  background: var(--color-white);
  border: none;
  border-left: 5px solid var(--color-steel);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--sp-4);
  box-shadow: 0 3px 16px rgba(0, 41, 68, 0.09);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              border-left-color var(--transition-fast);
}

.card:hover {
  border-left-color: var(--color-steel-dark);
}

.card__icon {
  color: var(--color-steel);
  margin-bottom: var(--sp-3);
}

.card__title {
  margin-bottom: var(--sp-2);
  color: var(--color-anthracite);
}

.card__text {
  color: var(--color-slate);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--sp-3);
}

.card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--color-steel);
  min-height: 2.75rem;
  transition: gap var(--transition-fast);
}

.card__link:hover {
  gap: 0.625rem;
}

.card__link svg {
  display: inline-block;
  flex-shrink: 0;
}


/* Section "Expertise sectorielle" supprimée (non affichée dans le site) */


/* ==========================================================================
   12. WHY DAPHNI
   4 blocs de valeurs. Grille 2×2 desktop, empilée mobile.
   ========================================================================== */

.why__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}

.why__item {
  padding: var(--sp-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  transition: border-color var(--transition-fast);
}

.why__item:hover {
  border-color: var(--color-steel);
}

.why__icon {
  color: var(--color-steel);
  margin-bottom: var(--sp-2);
}

.why__title {
  margin-bottom: var(--sp-1);
}

.why__text {
  color: var(--color-slate);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
}


/* ==========================================================================
   13. CONTACT / CTA
   Fond anthracite. Texte blanc. 2 CTA massifs.
   ========================================================================== */

.contact {
  background-color: var(--color-anthracite);
  color: var(--color-white);
  padding-block: var(--sp-8);
}

.contact__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
}

.contact__ctas {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.contact__ctas .btn {
  width: 100%;
}

.contact__address {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--color-border);
}

.contact__address strong {
  color: var(--color-white);
  font-size: var(--fs-lg);
  display: block;
  margin-bottom: var(--sp-1);
}

.contact__link {
  color: var(--color-white);
  text-decoration: underline;
  text-underline-offset: 3px;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  transition: color var(--transition-fast);
}

.contact__link:hover {
  color: var(--color-pearl);
}

.contact__hours {
  margin-top: var(--sp-3);
  color: var(--color-border);
}

.contact__hours strong {
  color: var(--color-white);
  display: block;
  margin-bottom: 0.25rem;
}


/* ==========================================================================
   14. FOOTER
   Fond slate. Texte blanc (12:1 de contraste).
   3 colonnes desktop, empilées mobile.
   ========================================================================== */

.site-footer {
  background-color: var(--color-slate);
  color: var(--color-white);
  padding-top: var(--sp-6);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.site-footer__logo {
  height: 2rem;
  width: auto;
  margin-bottom: var(--sp-2);
}

.site-footer__tagline {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.7);
}

.site-footer__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.site-footer__link {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.8);
  padding: 0.25rem 0;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  transition: color var(--transition-fast);
}

.site-footer__link:hover {
  color: var(--color-white);
}

.site-footer__oec {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.6);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.site-footer__oec p {
  margin: 0;
  min-width: 0;
  line-height: 1.5;
  font-size: var(--fs-xs, 0.75rem);
}


.site-footer__bottom {
  padding-block: var(--sp-3);
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
}

.site-footer__legal-info {
  margin-top: var(--sp-1);
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 0.01em;
}


/* ==========================================================================
   15. STICKY CTA MOBILE
   Barre fixée en bas de l'écran, visible uniquement sur mobile/tablette.
   Masquée au-dessus de 64rem.
   ========================================================================== */

.sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 950;
  background: var(--color-anthracite);
  padding: var(--sp-1) var(--sp-2);
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.sticky-cta__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-lg);
  text-decoration: none;
  min-height: 3rem;
  width: 100%;
  max-width: 24rem;
  padding: var(--sp-2) var(--sp-4);
  background: var(--color-steel);
  border-radius: var(--radius-md);
  transition: background-color var(--transition-fast);
}

.sticky-cta__link:hover {
  background-color: var(--color-steel-dark);
}

/* Focus visible sur le sticky CTA (inversé pour fond sombre) */
.sticky-cta__link:focus-visible {
  outline-color: var(--color-white);
}


/* ==========================================================================
   16. RESPONSIVE — TABLET (min-width: 48rem / 768px)
   Passage en grilles multi-colonnes, augmentation de la typo.
   ========================================================================== */

@media (min-width: 48rem) {
  :root {
    --gutter: 2rem;
  }

  h1 {
    font-size: var(--fs-4xl);
  }

  h2 {
    font-size: var(--fs-section-lg);
  }

  /* Hero : actions en ligne */
  .hero {
    padding-block: var(--sp-8) var(--sp-4);
  }

  .hero__actions {
    flex-direction: row;
    justify-content: center;
  }

  /* Trust : 3 colonnes */
  .trust__inner {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Services : 2 colonnes */
  .services__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Why : 2 colonnes */
  .why__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Contact : 2 colonnes */
  .contact__grid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  .contact__ctas .btn {
    width: auto;
  }

  /* Footer : 3 colonnes */
  .site-footer__inner {
    grid-template-columns: 2fr 1fr 1fr;
  }
}


/* ==========================================================================
   17. RESPONSIVE — DESKTOP (min-width: 64rem / 1024px)
   Navigation horizontale, grilles élargies, sticky CTA masqué.
   ========================================================================== */

@media (min-width: 64rem) {
  :root {
    --gutter: 2.5rem;
  }

  /* --- Masquer le hamburger, afficher la nav horizontale --- */
  .nav-toggle-label {
    display: none;
  }

  .main-nav {
    position: static;
    opacity: 1;
    visibility: visible;
    background: none;
    display: flex;
    align-items: center;
  }

  .main-nav__list {
    flex-direction: row;
    gap: 0;
  }

  .main-nav__link {
    font-size: var(--fs-sm);
    padding: var(--sp-1) var(--sp-2);
    position: relative;
  }

  /* Underline hover pour les liens nav desktop */
  .main-nav__link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: var(--sp-2);
    right: var(--sp-2);
    height: 2px;
    background: var(--color-steel);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--transition-normal);
  }

  .main-nav__link:hover::after {
    transform: scaleX(1);
  }

  .main-nav__cta {
    margin-top: 0;
    margin-left: var(--sp-2);
  }

  /* --- Services : 2×2 (4 cartes équilibrées) --- */
  .services__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* --- Masquer le sticky CTA --- */
  .sticky-cta {
    display: none;
  }

  /* --- Plus de padding bottom pour le body --- */
  body {
    padding-bottom: 0;
  }

  /* --- Sections plus spacieuses --- */
  .hero,
  .trust,
  .services,
  .why,
  .contact {
    padding-block: var(--sp-8);
  }

  h1 {
    font-size: 3.5rem; /* ~56px — proche des 58px de TJN */
  }

  .hero {
    padding-block: 9rem var(--sp-4);
  }

  /* Profile section : spacieux sur desktop */
  .profile {
    padding-block: var(--sp-8);
  }
}


/* ==========================================================================
   18. SECTION PROFIL — OLIVIA GALOIS
   Fond blanc. Photo + contenu en 2 colonnes sur desktop.
   La photo est en N&B (fournie), ce qui renforce l'esthétique "Premium".
   ========================================================================== */

.profile {
  background-color: var(--color-white);
  padding-block: var(--sp-6);
  /* Séparation visuelle : fine ligne acier en haut */
  border-top: 3px solid var(--color-steel);
}

/* Grille : 1 col mobile → 2 col desktop (photo | contenu) */
.profile__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
  align-items: start;
}

/* Wrapper photo : fond dégradé en fallback si l'image est absente */
.profile__photo-wrap {
  overflow: hidden;
  background: linear-gradient(160deg, var(--color-slate) 0%, var(--color-anthracite) 100%);
}

.profile__photo {
  display: block;
  width: 100%;
  /* Ratio portrait 3/4 — maintenu par aspect-ratio sur l'image elle-même */
  aspect-ratio: 3 / 4;
  object-fit: cover;
  /* Centrer sur le visage */
  object-position: center top;
}

/* Badges : étiquettes de titre professionnel */
.profile__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin-bottom: var(--sp-3);
}

/* ==========================================================================
   19. BADGES (OEC, CRCC, titres)
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.875rem;
  background-color: var(--color-steel);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: 700;
  border-radius: var(--radius-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Nom de la personne */
.profile__name {
  font-size: var(--fs-3xl);
  font-weight: 800;
  color: var(--color-anthracite);
  margin-bottom: var(--sp-3);
  letter-spacing: -0.02em;
}

/* Pitch : le texte fourni par le client */
.profile__pitch {
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--color-slate);
  margin-bottom: var(--sp-2);
}

/* Liste d'accréditations */
.profile__credentials {
  margin-bottom: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: 0;
}

.profile__credential-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-base);
  color: var(--color-anthracite);
  line-height: var(--lh-normal);
}

.profile__credential-item:last-child {
  border-bottom: none;
}

/* L'icône SVG doit s'aligner avec la première ligne de texte */
.profile__credential-item svg {
  flex-shrink: 0;
  color: var(--color-steel);
  margin-top: 3px;
}

/* Bouton LinkedIn — bleu DAPHNI */
.profile__linkedin {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-steel);
  border-color: var(--color-steel);
}
.profile__linkedin:hover {
  background-color: var(--color-steel);
  border-color: var(--color-steel);
  color: var(--color-white);
}

/* ==========================================================================
   20. FOOTER — LIEN LINKEDIN
   ========================================================================== */

.site-footer__linkedin {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color var(--transition-fast);
  min-height: 2.75rem;
}

.site-footer__linkedin:hover {
  color: var(--color-white);
}

/* Logo SVG dans le header — légèrement agrandi pour plus de présence */
.site-header__logo .logo-img {
  height: 80px;
  width: 80px;
}

/* Logo SVG dans le footer */
.site-footer__logo {
  height: 140px;
  width: 140px;
  margin-bottom: var(--sp-2);
}

/* ==========================================================================
   21. RESPONSIVE PROFIL — Tablet (48rem) et Desktop (64rem)
   ========================================================================== */

@media (min-width: 48rem) {
  .profile__grid {
    grid-template-columns: 280px 1fr;
    gap: var(--sp-6);
  }

  .profile__name {
    font-size: var(--fs-4xl);
  }
}

@media (min-width: 64rem) {
  .profile__grid {
    grid-template-columns: 360px 1fr;
    gap: var(--sp-7);
  }

  /* photo-wrap suit le ratio de l'image */
}


/* ==========================================================================
   22. ANIMATIONS & EFFETS VISUELS — "Effet wahou" Premium Industriel
   Scroll reveal · Hero glow · Hover lift · Shimmer · Counter gradient
   Tout est annulé via @media (prefers-reduced-motion) en fin de bloc.
   ========================================================================== */

/* --- Hero : position et espace (le fond photo est défini en section 28) --- */
.hero {
  position: relative;
  overflow: hidden;
  /* Espace extra en bas pour le chevauchement de la trust bar */
  padding-bottom: calc(var(--sp-6) + 4rem) !important;
}

/* Blob bas-gauche — second halo */
.hero::before {
  content: '';
  position: absolute;
  bottom: -5%;
  left: -8%;
  width: 40vw;
  height: 40vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(46, 151, 237, 0.09) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
  animation: hero-halo 12s ease-in-out infinite reverse;
}

.hero::after {
  content: '';
  position: absolute;
  top: -20%;
  right: -10%;
  width: 55vw;
  height: 55vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(46, 151, 237, 0.12) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
  animation: hero-halo 9s ease-in-out infinite;
}

.hero__inner {
  position: relative;
  z-index: 1;
}

@keyframes hero-halo {
  0%,  100% { opacity: 0.55; transform: scale(1) translate(0, 0); }
  50%        { opacity: 1;    transform: scale(1.1) translate(-2%, 3%); }
}

/* --- Hero : animations d'entrée au chargement de la page --- */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

.hero__title {
  animation: fadeSlideUp 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
}

.hero__subtitle {
  animation: fadeSlideUp 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.22s both;
}

.hero__actions {
  animation: fadeSlideUp 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.40s both;
}

/* --- Scroll reveal — états initiaux (éléments masqués avant observation) --- */
[data-animate="fade-up"],
[data-animate="fade-left"],
[data-animate="fade-right"],
[data-animate="scale-up"] {
  opacity: 0;
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-animate="fade-up"]    { transform: translateY(28px); }
[data-animate="fade-left"]  { transform: translateX(-28px); }
[data-animate="fade-right"] { transform: translateX(28px); }
[data-animate="scale-up"]   { transform: scale(0.95); }

/* Rideau photo : wipe de gauche à droite (clip-path) */
[data-animate="curtain"] {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- État visible (ajouté par IntersectionObserver) --- */
[data-animate="fade-up"].is-visible,
[data-animate="fade-left"].is-visible,
[data-animate="fade-right"].is-visible,
[data-animate="scale-up"].is-visible {
  opacity: 1;
  transform: none;
}

[data-animate="curtain"].is-visible {
  clip-path: inset(0 0% 0 0);
}

/* --- Délais de stagger (s'appliquent via data-delay="N") --- */
[data-delay="1"] { transition-delay: 0.08s; }
[data-delay="2"] { transition-delay: 0.16s; }
[data-delay="3"] { transition-delay: 0.24s; }
[data-delay="4"] { transition-delay: 0.32s; }
[data-delay="5"] { transition-delay: 0.40s; }
[data-delay="6"] { transition-delay: 0.48s; }

/* --- Titres de section : trait d'acier animé (::after scaleX) --- */
.section-title {
  position: relative;
}

.section-title::after {
  content: '';
  display: block;
  width: 2.5rem;
  height: 3px;
  background: var(--color-steel);
  margin: 0.75rem auto 0;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
}

.section-title.is-visible::after {
  transform: scaleX(1);
}

/* --- Header : bordure + ombre apparaissent au scroll (classe ajoutée par JS) --- */
.site-header {
  transition: box-shadow 0.35s ease, border-color 0.35s ease;
}

.site-header.is-scrolled {
  border-bottom-color: var(--color-border);
  box-shadow: 0 2px 24px rgba(26, 26, 46, 0.12);
}

/* --- Cartes services : lift + glow acier au survol --- */
.card {
  transition: border-color var(--transition-fast),
              transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(46, 151, 237, 0.22),
              0 4px 16px rgba(0, 41, 68, 0.06);
  border-left-color: var(--color-steel-dark);
}

/* --- Blocs "Pourquoi DAPHNI" : lift au survol --- */
.why__item {
  transition: border-color var(--transition-fast),
              transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.why__item:hover {
  border-color: var(--color-steel);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(26, 26, 46, 0.08);
}

/* --- Boutons primaires : balayage de lumière (shimmer) au survol --- */
.btn--primary,
.btn--primary-inverted {
  position: relative;
  overflow: hidden;
}

.btn--primary::after,
.btn--primary-inverted::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 55%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.22),
    transparent
  );
  transform: skewX(-18deg);
  transition: left 0.55s ease;
  pointer-events: none;
}

.btn--primary:hover::after,
.btn--primary-inverted:hover::after {
  left: 160%;
}

/* --- Trust bar : chiffres en dégradé anthracite → acier --- */
.trust__number {
  background: linear-gradient(135deg, var(--color-anthracite) 35%, var(--color-steel) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* --- Accessibilité : désactiver toutes les animations si demandé --- */
@media (prefers-reduced-motion: reduce) {
  .hero::after {
    animation: none;
  }

  .hero__title,
  .hero__subtitle,
  .hero__actions {
    animation: none;
    opacity: 1;
    transform: none;
  }

  [data-animate="fade-up"],
  [data-animate="fade-left"],
  [data-animate="fade-right"],
  [data-animate="scale-up"] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  [data-animate="curtain"] {
    clip-path: none !important;
    transition: none !important;
  }

  .section-title::after {
    transform: scaleX(1);
    transition: none;
  }
}


/* ==========================================================================
   23. SERVICE DETAIL
   Sections de détail (Comptabilité, Social/Paie, Juridique).
   Grille 1 col mobile → 3 cols desktop. Fond blanc ou pearl selon variante.
   ========================================================================== */

.service-detail {
  padding-block: var(--sp-6);
  background-color: var(--color-white);
}

.service-detail--pearl {
  background-color: var(--color-pearl);
}

.service-detail__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}

.service-detail__card {
  display: flex;
  flex-direction: column;
  padding: var(--sp-4);
  background: var(--color-white);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  transition: border-color var(--transition-fast),
              transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* sur fond pearl les cartes sont blanches → déjà ok */
.service-detail--pearl .service-detail__card {
  background: var(--color-white);
}

/* sur fond blanc les cartes prennent le pearl */
.service-detail:not(.service-detail--pearl) .service-detail__card {
  background: var(--color-pearl);
}

.service-detail__card:hover {
  border-color: var(--color-steel);
  transform: translateY(-5px);
  box-shadow: 0 12px 36px rgba(46, 151, 237, 0.18),
              0 4px 12px rgba(0, 41, 68, 0.06);
}

.service-detail__card-icon {
  color: var(--color-steel);
  margin-bottom: var(--sp-3);
  flex-shrink: 0;
}

.service-detail__card-title {
  font-size: var(--fs-xl);
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-anthracite);
  margin-bottom: var(--sp-2);
}

.service-detail__card-text {
  font-size: var(--fs-base);
  color: var(--color-slate);
  line-height: var(--lh-relaxed);
  margin-bottom: 0;
}

/* Responsive service-detail */
@media (min-width: 48rem) {
  .service-detail__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Grille à 2 cartes : prend toute la largeur */
  .service-detail__grid--two {
    grid-template-columns: repeat(2, 1fr);
    max-width: 52rem;
    margin-inline: auto;
  }

  .service-detail {
    padding-block: var(--sp-7);
  }
}

@media (min-width: 64rem) {
  .service-detail {
    padding-block: var(--sp-8);
  }
}


/* ==========================================================================
   24. PACK CRÉATION
   Section "star" sur fond anthracite sombre (inspiré TJN fond bleu).
   Badge · Titre clair · 3 cartes légèrement translucides · CTA centré.
   ========================================================================== */

.pack-creation {
  /* Section transparente — le fond sombre est sur l'inner container */
  background-color: transparent;
  padding-block: 0;
  position: relative;
  z-index: 3;
}

/* Conteneur arrondi flottant, style TJN row_7 */
.pack-creation__inner {
  background-color: var(--color-anthracite);
  border-radius: 18px;
  padding: var(--sp-4) var(--sp-2);   /* mobile : 32px / 16px */
  max-width: 95%;
  margin-inline: auto;
  margin-top: 0;
  text-align: center;
}

/* Petite étiquette "Pack Création" au-dessus du titre */
.pack-creation__badge {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 1rem;
  background-color: var(--color-steel);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: 700;
  border-radius: 2rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--sp-3);
}

/* Variante light des titres/sous-titres déjà définie : --light */

.pack-creation__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-2);               /* mobile : 16px entre cartes */
  margin-top: var(--sp-3);        /* mobile : 24px au lieu de 48px */
}

.pack-creation__card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-md);
  padding: var(--sp-3);           /* mobile : 24px au lieu de 32px */
  text-align: left;
  transition: background-color var(--transition-normal),
              border-color var(--transition-normal),
              transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.pack-creation__card:hover {
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(255, 255, 255, 0.28);
  transform: translateY(-4px);
}

.pack-creation__card-icon {
  color: var(--color-steel);
  /* Légère teinte acier visible sur fond sombre */
  filter: brightness(1.5);
  margin-bottom: var(--sp-2);     /* mobile : 16px au lieu de 24px */
  flex-shrink: 0;
}

.pack-creation__card-title {
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: var(--sp-2);
}

.pack-creation__card-text {
  font-size: var(--fs-base);
  color: rgba(255, 255, 255, 0.72);
  line-height: var(--lh-relaxed);
  margin-bottom: 0;
}

.pack-creation__cta {
  margin-top: var(--sp-4);        /* mobile : 32px au lieu de 64px */
  text-align: center;
}

/* Responsive pack-creation */
@media (min-width: 48rem) {
  .pack-creation__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-4);
  }

  .pack-creation__inner {
    padding: var(--sp-7) var(--sp-5);
  }
}

@media (min-width: 64rem) {
  .pack-creation__inner {
    padding: var(--sp-8) var(--sp-6);
  }
}


/* ==========================================================================
   26. LOGO OEC — FILTRE ROUGE
   La cliente souhaite le logo de l'Ordre en rouge.
   On applique un filtre CSS sur les PNG du logo OEC (trust bar + footer).
   ========================================================================== */

/* Trust bar : conteneur des deux logos OEC + CNCC */
.trust__logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.trust__oec-logo {
  filter: none;
  width: 120px;
  height: auto;
  display: block;
}

.trust__cncc-logo {
  width: 90px;
  height: auto;
  display: block;
  border-radius: 4px;
}

.site-footer__logos-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.site-footer__badge-logo {
  display: block;
  height: 44px;
  width: auto;
  flex-shrink: 0;
  background-color: #fff;
  padding: 5px 8px;
  border-radius: 6px;
}

/* Désactiver animations si mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  .pack-creation__card-icon {
    filter: none;
  }
  .hero::before { animation: none; }
}


/* ==========================================================================
   27. EFFETS PREMIUM & ANIMATIONS COMPLÉMENTAIRES
   Trust bar accent · Badge pulse · Bouton active · Why icons · Scroll progress
   ========================================================================== */

/* --- Trust bar : trait acier en haut + séparateurs verticaux --- */
.trust__inner {
  border-top: 4px solid var(--color-steel);
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
}

@media (min-width: 48rem) {
  .trust__item + .trust__item {
    border-left: 1px solid var(--color-border);
    padding-left: var(--sp-4);
  }
}

/* --- Badge "Pack Création" : pulsation lumineuse --- */
@keyframes badge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(46, 151, 237, 0.55); }
  50%       { box-shadow: 0 0 0 10px rgba(46, 151, 237, 0); }
}

.pack-creation__badge {
  animation: badge-pulse 2.8s ease-in-out infinite;
}

/* --- Boutons : micro-feedback tactile au clic --- */
.btn:active {
  transform: scale(0.97);
  transition-duration: 80ms;
}

/* --- "Pourquoi DAPHNI" : icône animée au survol --- */
.why__icon {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.why__item:hover .why__icon {
  transform: scale(1.25) rotate(-8deg);
}

/* --- Scroll progress bar (injectée par JS) --- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--color-steel), var(--color-anthracite));
  pointer-events: none;
  transition: width 0.1s linear;
  border-radius: 0 2px 2px 0;
}

/* --- Profil photo : légère apparition à l'entrée dans le viewport --- */
.profile__photo-wrap {
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* --- Highlight au survol des credential items --- */
.profile__credential-item {
  transition: background-color 0.2s ease, padding-left 0.2s ease;
  border-radius: var(--radius-sm);
}

.profile__credential-item:hover {
  background-color: var(--color-pearl);
  padding-left: var(--sp-1);
}


/* Service detail CTA centré */
.service-detail__cta {
  text-align: center;
  margin-top: var(--sp-5);
}

/* ==========================================================================
   FAQ — accordéon
   ========================================================================== */

.faq {
  background: var(--color-white);
  padding: var(--sp-8) 0;
}

.faq__list {
  max-width: 800px;
  margin: var(--sp-5) auto 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.faq__item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}

.faq__item:has(.faq__question[aria-expanded="true"]) {
  box-shadow: var(--shadow-md);
  border-color: var(--color-steel);
}

.faq__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-anthracite);
  transition: background 0.2s ease, color 0.2s ease;
}

.faq__question:hover {
  background: var(--color-pearl);
  color: var(--color-steel);
}

.faq__question[aria-expanded="true"] {
  background: var(--color-pearl);
  color: var(--color-steel);
}

.faq__chevron {
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq__question[aria-expanded="true"] .faq__chevron {
  transform: rotate(180deg);
}

.faq__answer {
  padding: 0 var(--sp-6) var(--sp-5);
  border-top: 1px solid var(--color-border);
}

.faq__answer[hidden] {
  display: none;
}

.faq__answer p {
  color: var(--color-slate);
  line-height: 1.75;
  margin: var(--sp-4) 0 0;
}

.faq__answer a {
  color: var(--color-steel);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ==========================================================================
   CONTACT — nouveau layout avec formulaire
   ========================================================================== */

.contact__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
  margin-top: var(--sp-5);
}

@media (min-width: 64rem) {
  .contact__layout {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-7);
    align-items: start;
  }
}

/* --- Formulaire --- */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}

@media (max-width: 30rem) {
  .contact-form__row {
    grid-template-columns: 1fr;
  }
}

.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.contact-form__label {
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
}

.contact-form__label span {
  color: var(--color-steel);
}

.contact-form__input {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius-sm);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  padding: var(--sp-3) var(--sp-4);
  transition: border-color 0.2s ease, background 0.2s ease;
  outline: none;
  width: 100%;
}

.contact-form__input::placeholder {
  color: rgba(255,255,255,0.35);
}

.contact-form__input:focus {
  border-color: var(--color-steel);
  background: rgba(255,255,255,0.12);
  box-shadow: 0 0 0 3px rgba(46,151,237,0.2);
}

.contact-form__select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-4) center;
  padding-right: var(--sp-5);
  cursor: pointer;
}

.contact-form__select option {
  background: var(--color-anthracite);
  color: var(--color-white);
}

.contact-form__textarea {
  resize: vertical;
  min-height: 110px;
}

.contact-form__rgpd {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.5;
  margin: 0;
}

.contact-form__rgpd-link {
  color: rgba(255,255,255,0.75);
  text-underline-offset: 2px;
}

.contact-form__rgpd-link:hover {
  color: var(--color-white);
}

.contact-form__submit {
  align-self: flex-start;
  gap: var(--sp-2);
}

/* --- Colonne droite (infos) --- */
.contact__direct {
  margin-bottom: var(--sp-6);
}

.contact__direct-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-steel);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--sp-3);
}

.contact__direct-btns {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* Carte Google Maps */
.contact__map {
  margin-top: var(--sp-3);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
}

/* Badge Ordre des Experts-Comptables */
.contact__oec {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact__oec-img {
  display: block;
  width: 200px;
  height: auto;
}

/* ==========================================================================
   PAGES LÉGALES (mentions-legales.html / politique-de-confidentialite.html)
   ========================================================================== */

.legal-page {
  padding-top: calc(var(--header-h) + var(--sp-8));
  padding-bottom: var(--sp-8);
  min-height: 70vh;
}

.breadcrumb {
  margin-bottom: var(--sp-6);
}

.breadcrumb__list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--color-slate);
}

.breadcrumb__item + .breadcrumb__item::before {
  content: "›";
  color: var(--color-border);
}

.breadcrumb__link {
  color: var(--color-steel);
  text-decoration: none;
}

.breadcrumb__link:hover {
  text-decoration: underline;
}

.legal-page__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--color-anthracite);
  margin-bottom: var(--sp-1);
}

.legal-page__update {
  font-size: 0.875rem;
  color: var(--color-slate);
  margin-bottom: var(--sp-5);
}

.legal-section {
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-8);
  border-bottom: 1px solid var(--color-border);
}

.legal-section:last-of-type {
  border-bottom: none;
}

.legal-section h2 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--color-anthracite);
  margin-bottom: var(--sp-4);
}

.legal-section p,
.legal-section address {
  font-style: normal;
  line-height: 1.75;
  color: var(--color-slate);
  margin-bottom: var(--sp-3);
}

.legal-section a {
  color: var(--color-steel);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-section a:hover {
  color: var(--color-steel-dark);
}

/* Table de données personnelles */
.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  margin-top: var(--sp-4);
  overflow-x: auto;
  display: block;
}

.legal-table th,
.legal-table td {
  text-align: left;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--color-border);
  line-height: 1.5;
  vertical-align: top;
}

.legal-table th {
  background-color: var(--color-anthracite);
  color: var(--color-white);
  font-weight: 600;
  white-space: nowrap;
}

.legal-table tr:nth-child(even) td {
  background-color: var(--color-pearl);
}

/* Liste à puces légale */
.legal-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}

.legal-list li {
  padding-left: var(--sp-5);
  position: relative;
  color: var(--color-slate);
  line-height: 1.6;
}

.legal-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--color-steel);
  font-weight: 700;
}

/* Bouton retour */
.legal-back {
  margin-top: var(--sp-5);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--color-border);
}


/* ==========================================================================
   25. MODALE VIDÉO
   Overlay sombre avec iframe Claap en 16:9.
   Ouverte via JS au clic sur [data-video-modal].
   ========================================================================== */

/* --- Lien démo avec icône lecture --- */
.link-demo--video {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.3em 0.75em 0.3em 0.55em;
  background-color: var(--color-steel);
  border: 1.5px solid var(--color-steel);
  border-radius: 999px;
  color: var(--color-white);
  transition: color var(--transition-fast),
              background-color var(--transition-fast),
              border-color var(--transition-fast);
}

.link-demo--video:hover {
  background-color: var(--color-steel-dark);
  border-color: var(--color-steel-dark);
  color: var(--color-white);
  text-decoration: none;
}

/* --- Overlay --- */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
}

.video-modal[hidden] {
  display: none;
}

.video-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 10, 20, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
}

/* --- Boîte centrale --- */
.video-modal__box {
  position: relative;
  width: 100%;
  max-width: 880px;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6),
              0 0 0 1px rgba(255, 255, 255, 0.08);
  animation: modal-in 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes modal-in {
  from { opacity: 0; transform: scale(0.93) translateY(12px); }
  to   { opacity: 1; transform: scale(1)   translateY(0);     }
}

/* --- Player 16:9 --- */
.video-modal__player {
  position: relative;
  padding-bottom: 56.25%;   /* 16:9 */
  height: 0;
}

.video-modal__player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* --- Bouton fermeture --- */
.video-modal__close {
  position: absolute;
  top: -2.5rem;
  right: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease;
  padding: 0;
}

.video-modal__close:hover {
  background: rgba(255, 255, 255, 0.25);
}

.video-modal__close:focus-visible {
  outline: 2px solid var(--color-steel);
  outline-offset: 3px;
}

/* Réduit la taille du bouton sur mobile */
@media (max-width: 47.99rem) {
  .video-modal__close {
    top: -2rem;
    width: 1.75rem;
    height: 1.75rem;
  }
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .video-modal__box {
    animation: none;
  }
}


/* ==========================================================================
   28. HERO — PHOTO PANORAMIQUE LAC D'ENGHIEN
   Photo : Enghien-les-Bains - Front du lac - panoramique
   Licence : CC BY-SA 3.0 (Wikimedia Commons)
   Overlay sombre pour conserver la lisibilité du texte blanc.
   ========================================================================== */

/* Photo panoramique + voile marine pour lisibilité du texte */
.hero {
  background:
    linear-gradient(
      180deg,
      rgba(0, 41, 68, 0.70) 0%,
      rgba(0, 41, 68, 0.45) 45%,
      rgba(0, 41, 68, 0.60) 100%
    ),
    url('../assets/photo-lac-enghien.jpg') center 40% / cover no-repeat;
}

/* Titre et sous-titre : blanc sur fond photo */
.hero .hero__title,
.hero .hero__subtitle {
  color: var(--color-white);
  text-shadow: 0 2px 8px rgba(0, 41, 68, 0.50);
}

/* Bouton secondaire : adapté au fond sombre */
.hero .btn--secondary {
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.75);
}

.hero .btn--secondary:hover {
  background-color: var(--color-white);
  color: var(--color-anthracite);
  border-color: var(--color-white);
}

/* Focus : contour visible sur fond sombre */
.hero .btn:focus-visible {
  outline-color: var(--color-white);
}

/* Hero — 2 boutons alignés */
.hero__actions {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--sp-2);
  justify-content: flex-start;
  align-items: center;
}


/* ==========================================================================
   29. BLOC CALENDLY — Colonne droite de la section Contact
   ========================================================================== */

.contact__calendly {
  background: var(--color-pearl);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--sp-3) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

.contact__calendly-text {
  font-size: var(--fs-sm);
  color: var(--color-slate);
  line-height: var(--lh-relaxed);
  margin: 0;
}

.contact__calendly-btn {
  align-self: flex-start;
}


/* ==========================================================================
   30. MODAL DE CONFIRMATION — Formulaire de contact
   Overlay + boîte centrée + accessibilité (aria-modal, focus trap).
   ========================================================================== */

body.modal-open {
  overflow: hidden;
}

.modal-confirm {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-3);
  background: rgba(0, 41, 68, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.modal-confirm[hidden] {
  display: none;
}

.modal-confirm__box {
  background: var(--color-white);
  border-radius: var(--radius-md);
  max-width: 36rem;
  width: 100%;
  max-height: calc(100vh - var(--sp-6));
  overflow-y: auto;
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  box-shadow: 0 20px 60px rgba(0, 41, 68, 0.25);
}

/* En-tête print only (masqué à l'écran) */
.modal-confirm__print-header {
  display: none;
}

/* Icône succès */
.modal-confirm__icon {
  display: flex;
  justify-content: center;
}

.modal-confirm__icon svg {
  color: #22c55e;
}

/* Titre */
.modal-confirm__title {
  font-family: var(--font-heading);
  font-size: var(--fs-2xl);
  color: var(--color-anthracite);
  text-align: center;
  margin: 0;
}

/* Intro */
.modal-confirm__intro {
  font-size: var(--fs-sm);
  color: var(--color-slate);
  text-align: center;
  line-height: var(--lh-relaxed);
  margin: 0;
}

/* Récapitulatif */
.modal-confirm__recap {
  background: var(--color-pearl);
  border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-3);
}

.modal-confirm__recap dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.375rem var(--sp-2);
  margin: 0;
  font-size: var(--fs-sm);
}

/* Les div wrappers des lignes dt/dd deviennent transparents pour la grille */
.modal-confirm__recap-row {
  display: contents;
}

.modal-confirm__recap dt {
  font-weight: 600;
  color: var(--color-anthracite);
  white-space: nowrap;
}

.modal-confirm__recap dd {
  color: var(--color-slate);
  margin: 0;
  word-break: break-word;
}

/* Message suivant */
.modal-confirm__next {
  font-size: var(--fs-sm);
  color: var(--color-slate);
  line-height: var(--lh-relaxed);
  margin: 0;
}

/* Actions */
.modal-confirm__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: flex-end;
}


/* ==========================================================================
   31. ANIMATION SPIN — Icône loader dans le bouton submit
   ========================================================================== */

@keyframes spin {
  to { transform: rotate(360deg); }
}

.spin {
  animation: spin 0.8s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .spin {
    animation: none;
  }
}


/* ==========================================================================
   32. IMPRESSION / PDF — @media print
   Quand body.print-modal est actif, seule la modal de confirmation est imprimée.
   ========================================================================== */

@media print {
  body.print-modal * {
    visibility: hidden;
  }

  body.print-modal .modal-confirm,
  body.print-modal .modal-confirm * {
    visibility: visible;
  }

  body.print-modal .modal-confirm {
    position: absolute;
    inset: 0;
    background: none;
    backdrop-filter: none;
    display: block;
    padding: 0;
  }

  body.print-modal .modal-confirm__box {
    max-height: none;
    box-shadow: none;
    border: 1px solid #ccc;
    max-width: 100%;
    padding: 1.5cm;
  }

  body.print-modal .modal-confirm__print-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-bottom: 2px solid var(--color-anthracite);
    padding-bottom: 0.75rem;
    margin-bottom: 0.5rem;
  }

  body.print-modal .modal-confirm__print-header h1 {
    font-size: 1rem;
    margin: 0;
    color: var(--color-anthracite);
  }

  body.print-modal .modal-confirm__actions {
    display: none;
  }
}