/* =========================================================
   Senfina Inspiring — Refinements (additif à main.css)
   Améliorations design, alignement et responsivité.
   ========================================================= */

/* ---------- Sections : fix iOS Safari (toolbar) ---------- */
@supports (min-height: 100svh) {
  .section { min-height: 100svh; }
}

/* ---------- Mini-mark : masqué (redondant avec le logo de la nav, et entre
                en conflit avec le bouton hamburger en mobile/tablette) ---------- */
.mini-mark { display: none; }

/* ---------- Logo "senfina" : toujours blanc, peu importe la section visible ----------
   Le système original adaptait la couleur au bandeau derrière (utile quand la nav
   était transparente), mais ça rendait le logo invisible dès que la nav passait en
   mode .scrolled (fond bleu nuit) sur une section claire. */
nav.on-light .logo,
nav.on-sable .logo,
nav.on-rose  .logo,
nav.on-dark  .logo,
nav          .logo { color: var(--ivoire); }

/* ---------- Bandeau Constat : accents alignés sur le corail du logo ----------
   Le rose original (#EF265F) était trop saturé par rapport au "INSPIRING" du
   logo (#F37E80). On uniformise pour cohérence de marque. */
.constat .small-eyebrow,
.constat h2 em,
.constat .symptome .num { color: #F37E80; }
/* Bordure haute des symptômes : on l'aligne aussi sur le ton corail-doux */
.constat .symptome { border-top-color: rgba(243, 126, 128, 0.35); }

/* ---------- Hamburger : barres toujours blanches, même logique ---------- */
nav.on-light .nav-toggle span,
nav.on-sable .nav-toggle span,
nav.on-rose  .nav-toggle span,
nav.on-dark  .nav-toggle span,
nav          .nav-toggle span { background: var(--ivoire); }

/* ---------- Images de fond des sections : intégration plus fluide ----------
   Avant : un rectangle de 50-55% de la largeur, ancré dans un coin, sans fondu —
   ce qui donnait l'impression d'une image "collée" dans le coin.
   Maintenant : l'image remplit la section (cover) et se fond progressivement
   vers le texte via un mask en dégradé. Elle suit la taille du viewport. */
.constat .section-tex,
.accomp .section-tex,
.formations .section-tex,
.reflexions .section-tex {
  background-size: cover !important;
  background-position: right center !important;
  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 85%);
          mask-image: linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 85%);
}

/* Ajustement d'opacité pour rester subtil en cover (plus de surface couverte) */
.constat   .section-tex { opacity: 0.30 !important; }
.accomp    .section-tex { opacity: 0.35 !important; }
.formations .section-tex { opacity: 0.40 !important; }
.reflexions .section-tex { opacity: 0.28 !important; }

/* Sur mobile, la mask devient plus douce (moins de surface texte = moins besoin de masquer) */
@media (max-width: 700px) {
  .constat .section-tex,
  .accomp .section-tex,
  .formations .section-tex,
  .reflexions .section-tex {
    -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 70%, rgba(0,0,0,0) 100%);
            mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 70%, rgba(0,0,0,0) 100%);
  }
}

/* ---------- Grilles fluides : remplace les colonnes rigides par auto-fit ---------- */
/* Évite l'effet "boîtes écrasées" entre 901px et 1200px (tablette paysage) */
.symptomes  { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(24px, 3vw, 48px); }
.bascules   { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.accomp-grid{ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.articles   { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.promises   { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* ---------- Apropos : passe en une colonne plus tôt pour respirer ---------- */
@media (max-width: 1100px) {
  .apropos-grid { grid-template-columns: 1fr; gap: 56px; }
}

/* ---------- Stats : reste sur 3 colonnes même mobile (valeurs courtes : 15, 40+, ∞) ---------- */
@media (max-width: 900px) {
  .stats { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .stat .num { font-size: clamp(28px, 8vw, 42px); }
  .stat .cap { font-size: 10px; }
}

/* ---------- Tablette intermédiaire (901-1100px) : f-item et sec-line plus serrés ---------- */
@media (min-width: 901px) and (max-width: 1100px) {
  .f-item   { grid-template-columns: 48px 1fr 150px 170px 32px; gap: 20px; }
  .sec-line { grid-template-columns: 48px 1fr 180px 32px; gap: 20px; }
  .f-item .f-title { font-size: 19px; }
  .sec-line .sl-title { font-size: clamp(20px, 2vw, 28px); }
}

/* ---------- F-item mobile : duration/date visibles sous le titre (plus masquées) ---------- */
@media (max-width: 900px) {
  .f-item {
    grid-template-columns: 40px 1fr 28px;
    gap: 14px;
    padding: 20px 0;
  }
  .f-item .f-duration {
    display: block;
    grid-column: 2;
    font-size: 10.5px;
    opacity: 0.55;
    margin-top: 4px;
  }
  .f-item .f-date {
    display: block;
    grid-column: 2;
    font-size: 12px;
    margin-top: 2px;
  }
}

/* ---------- Sec-line mobile : client visible sous le titre ---------- */
@media (max-width: 900px) {
  .sec-line {
    grid-template-columns: 40px 1fr 28px;
    gap: 14px;
    padding: 22px 0;
  }
  .sec-line .sl-client {
    display: block;
    grid-column: 2;
    font-size: 10px;
    margin-top: 6px;
  }
}

/* ---------- Padding sections : plus généreux sur mobile petit ---------- */
@media (max-width: 480px) {
  .section { padding: 96px 18px 60px; }
  .apropos { padding: 72px 18px 40px; }
}

/* ---------- Nav : compact zone intermédiaire (~1024-1100px) ---------- */
@media (min-width: 901px) and (max-width: 1100px) {
  nav { padding: 20px 24px; }
  nav ul { gap: 22px; }
  nav ul a { font-size: 13px; letter-spacing: 0.2px; }
}

/* ---------- Hero : scroll-cue masqué quand chevauchement probable ---------- */
@media (max-height: 700px), (max-width: 600px) {
  .hero .scroll-cue { display: none; }
}

/* ---------- Hero CTA : compact en mobile, zone tactile suffisante ---------- */
@media (max-width: 480px) {
  .hero-cta { gap: 10px; }
  .hero-cta .btn { padding: 14px 22px; font-size: 12px; }
}

/* ---------- Boutons : zone tactile a11y >= 48px en mobile ---------- */
@media (max-width: 600px) {
  .btn, .contact-box button { min-height: 48px; }
}

/* ---------- Footer-bar : empilement propre en mobile ---------- */
@media (max-width: 700px) {
  .footer-bar { flex-direction: column; align-items: flex-start; gap: 20px; }
  .socials { flex-wrap: wrap; row-gap: 8px; }
}

/* ---------- Contact form : focus visible (a11y + finition) ---------- */
.field { transition: border-color 0.3s; }
.field:focus-within { border-bottom-color: var(--corail); }
.field input::placeholder,
.field textarea::placeholder { color: rgba(248, 248, 244, 0.32); }
.contact-box input:focus-visible,
.contact-box textarea:focus-visible { outline: none; }

/* ---------- Reflexions-head : alignement plus propre ---------- */
.reflexions-head { align-items: baseline; }
@media (max-width: 700px) { .reflexions h2 { font-size: clamp(34px, 8vw, 52px); } }

/* ---------- Articles : visuel avec ratio constant (plus de "boîte écrasée") ---------- */
.article .a-visual {
  aspect-ratio: 4 / 3;
  height: auto;
  min-height: 200px;
}

/* ---------- Bascule : évite overflow horizontal des libellés longs ---------- */
.bascule { min-width: 0; }
.bascule .b-old,
.bascule .b-new { overflow-wrap: anywhere; }

/* ---------- Lang switcher : boutons sémantiques + a11y ---------- */
nav .lang {
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  opacity: 1; /* annule l'ancien opacity 0.5 du main.css */
  font-size: 12px;
  letter-spacing: 1px;
}
nav .lang-btn {
  background: transparent;
  border: none;
  padding: 6px 4px;
  margin: 0;
  font: inherit;
  font-size: 12px;
  letter-spacing: 1px;
  color: currentColor;
  opacity: 0.55;
  cursor: pointer;
  transition: color 0.3s, opacity 0.3s;
  border-radius: 2px;
}
nav .lang-btn.is-active {
  color: var(--corail);
  opacity: 1;
  cursor: default;
}
nav .lang-btn:hover:not(.is-active):not([aria-disabled="true"]) {
  opacity: 1;
  color: var(--corail);
}
nav .lang-btn.is-soon {
  cursor: help;
  position: relative;
}
nav .lang-btn.is-soon:hover { opacity: 0.85; color: var(--corail); }
nav .lang-btn:focus-visible {
  outline: 2px solid var(--corail);
  outline-offset: 3px;
  opacity: 1;
}
nav .lang-sep {
  opacity: 0.35;
  user-select: none;
}

/* Bulle d'information "Bientôt disponible" au clic sur EN */
.lang-toast {
  position: fixed;
  top: 80px;
  right: 24px;
  background: var(--bleu-nuit);
  color: var(--ivoire);
  border: 1px solid rgba(254, 128, 128, 0.4);
  padding: 14px 20px;
  border-radius: 4px;
  font-size: 13px;
  letter-spacing: 0.3px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  z-index: 200;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
  max-width: min(280px, calc(100vw - 48px));
}
.lang-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.lang-toast strong { color: var(--corail); font-weight: 500; }

/* Sur mobile, le toast se positionne près du panneau */
@media (max-width: 900px) {
  .lang-toast {
    top: auto;
    bottom: 24px;
    right: 50%;
    transform: translate(50%, 8px);
    left: auto;
  }
  .lang-toast.is-visible { transform: translate(50%, 0); }
}

/* ---------- Promise : finition arrondi cohérent ---------- */
.promise { border-radius: 2px; }

/* ---------- F-item / sec-line : focus clavier visible ---------- */
.f-item:focus-visible,
.sec-line:focus-visible,
.accomp-card:focus-visible,
.article:focus-visible {
  outline: 2px solid var(--corail);
  outline-offset: 4px;
}

/* ---------- Hero h1 : limite letter-spacing négatif sur petit écran (lisibilité) ---------- */
@media (max-width: 600px) {
  .hero h1 { letter-spacing: -1.5px; }
}

/* ---------- Conviction-lede / approche-lede : largeur optimale lecture (~65ch) ---------- */
.conviction-lede,
.approche-lede,
.formations-lede { max-width: min(680px, 65ch); }

/* ---------- Apropos contact-box : padding mobile mesuré ---------- */
@media (max-width: 600px) {
  .contact-box { padding: 24px 20px; }
  .contact-box h3 { font-size: 24px; margin-bottom: 20px; }
}

/* ---------- Conviction/secteurs heading : letter-spacing un peu plus aéré ---------- */
.conviction h2,
.secteurs h2 { letter-spacing: -1px; }

/* ---------- Smooth scroll : respect prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero .scroll-cue::after { animation: none; }
}

/* =========================================================
   MENU HAMBURGER MOBILE
   ========================================================= */

/* Bouton hamburger — invisible par défaut (desktop) */
.nav-toggle {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 10px;
  width: 44px;
  height: 44px;
  position: relative;
  z-index: 110;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--ivoire);
  border-radius: 2px;
  transition: transform 0.35s ease, opacity 0.25s ease, background 0.35s ease;
}
/* (Règle d'adaptation au bandeau supprimée — voir override "toujours blanc" plus haut.) */

/* État ouvert : transforme en croix */
.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
  background: var(--ivoire);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
  background: var(--ivoire);
}

/* Activation en mobile : on cache nav ul + lang, on affiche le bouton */
@media (max-width: 900px) {
  .nav-toggle { display: flex; }

  /* Le menu devient un panneau plein écran, masqué par défaut */
  nav ul {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    top: 0; right: 0;
    width: min(82vw, 380px);
    height: 100vh;
    height: 100dvh;
    padding: 96px 36px 36px;
    background: var(--bleu-nuit);
    box-shadow: -20px 0 60px rgba(0,0,0,0.4);
    gap: 0;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index: 105;
  }
  nav ul li {
    border-bottom: 1px solid rgba(248, 248, 244, 0.08);
  }
  nav ul li a {
    display: block;
    padding: 22px 0;
    font-family: 'Fraunces', serif;
    font-size: 22px;
    font-weight: 300;
    letter-spacing: 0;
    opacity: 1;
    color: var(--ivoire);
  }
  nav ul li a::after { display: none; } /* on retire le soulignement hover */

  /* Lang switcher : visible en bas du panneau */
  nav .lang {
    position: fixed;
    top: 0; right: 0;
    width: min(82vw, 380px);
    padding: 0 36px 40px;
    bottom: 0; top: auto; height: auto;
    align-self: flex-end;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index: 106;
    opacity: 1;
    font-size: 13px;
    letter-spacing: 2px;
  }

  /* Quand le menu est ouvert (classe sur nav) */
  nav.menu-open ul,
  nav.menu-open .lang { transform: translateX(0); }

  /* Backdrop derrière le panneau */
  nav.menu-open::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(5, 16, 31, 0.55);
    backdrop-filter: blur(4px);
    z-index: 104;
    animation: fadeIn 0.3s ease;
  }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

  /* Bloquer le scroll du body quand le menu est ouvert */
  body.menu-open { overflow: hidden; }
}

/* Sur mobile, le hamburger reste blanc même sur fond clair quand le menu est ouvert
   (puisque le panneau est bleu nuit) */
@media (max-width: 900px) {
  nav.menu-open .nav-toggle span { background: var(--ivoire); }
}