/* Vars / reset */
:root {
  --bg-page: #ffffff;
  --bg-alt: #eef4ff;
  --bg-dark: #0f1a33;

  --text-main: #1a1a1a;
  --text-dim: #4a4a4a;
  --text-invert: #ffffff;

  --accent: #1760ff;

  --radius-card: 16px;
  --radius-big: 24px;

  --shadow-card: 0 16px 32px rgba(0,0,0,0.07);

  --wrap-max: 1280px;
  --wrap-pad: 2rem;

  --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI",
                Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

body.page {
  background: var(--bg-page);
  font-family: var(--font-stack);
  color: var(--text-main);
  line-height: 1.4;
}

/* helper container */
.wrap {
  max-width: var(--wrap-max);
  padding: 0 var(--wrap-pad);
  margin: 0 auto;
}

/* NAV */
.topnav {
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  padding: .5rem 0; /* header compact */
}
.topnav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand-logo {
  height: 28px; /* logo réduit */
  display: block;
}
.topnav-right {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.topnav-link {
  font-size: .9rem;
  text-decoration: none;
  color: var(--accent);
  font-weight: 500;
}
.topnav-link:hover {
  text-decoration: underline;
}

/* HERO (règles communes) */
.hero {
  background: var(--bg-alt);
  padding: 1.5rem 0 1rem;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

.hero-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 2rem;
  row-gap: 1.5rem;
  align-items: center;
  padding: 0; /* padding rétabli au besoin côté Pitch Up plus bas */
  grid-template-areas: "text logos";
}

.hero-text {
  grid-area: text;
  max-width: none;
}

.hero-visual { grid-area: logos; }

@media (min-width:1100px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr) 260px; }
}

/* Mobile : 1 colonne */
@media(max-width:800px){
  .hero-inner {
    grid-template-columns: 1fr;
    grid-template-areas:
      "text"
      "logos";
    text-align: center;
    padding: 0;
  }
}

.hero-title {
  font-size: clamp(1.8rem, 1vw + 1.4rem, 2.2rem);
  font-weight: 700;
  color: var(--accent);
  line-height: 1.2;
}
.hero-sub { display: block; font-weight: 500; color: var(--text-main); }

.hero-desc {
  margin-top: 1rem;
  font-size: 1.0rem;
  color: var(--text-main);
  max-width: 40ch; /* sera élargi côté Pitch Up uniquement */
}
@media(max-width:800px){ .hero-desc { margin-left: auto; margin-right: auto; } }

.hero-bullets {
  margin: 1rem 0 0;
  padding-left: 1.2rem;
  list-style: none;
  color: var(--text-main);
  font-size: 1.0rem;
  line-height: 1.4;
}
.hero-bullets li {
  position: relative;
  padding-left: 1rem;
  margin: .25rem 0;
}
.hero-bullets li::before {
  content: "•";
  color: var(--accent);
  font-weight: 700;
  position: absolute;
  left: 0;
  top: 0;
}
.hero-bullets li strong { color: var(--accent); font-weight: 600; }

.hero-meta { font-size: .9rem; color: var(--text-dim); margin-top: 1.5rem; line-height: 1.4; }
.hero-visual { text-align: center; }
@media(max-width:800px){ .hero-visual { margin-top: 1rem; } }
@media(min-width:801px){ .hero-visual { margin-top: 0; } }

/* GENERIC SECTION */
.section { padding: 4rem 0; background: var(--bg-page); }
.alt-bg { background: var(--bg-alt); }
.section-eyebrow {
  text-transform: uppercase; font-size: .7rem; font-weight: 600;
  color: var(--accent); letter-spacing: .05em; margin-bottom: .5rem;
}
.section-title {
  font-size: 1.4rem; font-weight: 600; color: var(--text-main);
  margin-bottom: 1rem; line-height: 1.3;
}

/* FEATURE BLOCKS */
.feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem 3rem;
  align-items: center;
}
@media(max-width:900px){ .feature-grid { grid-template-columns: 1fr; } }
.reverse-on-desktop { direction: rtl; }
.reverse-on-desktop > * { direction: ltr; }
@media(max-width:900px){ .reverse-on-desktop { direction: ltr; } }

.feature-text { font-size: .95rem; line-height: 1.45; color: var(--text-main); }
.feature-desc { color: var(--text-main); margin-bottom: 1rem; }
.feature-bullets { list-style: disc; padding-left: 1.2rem; color: var(--text-main); font-size: .95rem; line-height: 1.4; }
.feature-bullets li + li { margin-top: .5rem; }

/* MEDIA PREVIEW */
.feature-media { display: flex; flex-direction: column; align-items: center; }

/* HERO & VIDEOS — style harmonisé */
.hero-shot, .media-frame {
  width: 100%;
  border-radius: var(--radius-big);
  box-shadow: var(--shadow-card);
  background: #000;
  object-fit: cover;
  border: 4px solid rgba(255, 255, 255, 0.8);
  overflow: hidden;
  max-width: 100%;
}
.media-frame { max-width: 560px; }

@media (prefers-color-scheme: dark) {
  .hero-shot, .media-frame { border-color: rgba(255, 255, 255, 0.2); }
}

/* Hover (desktop) */
@media (hover: hover) and (pointer: fine) {
  .hero-shot, .media-frame {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .hero-shot:hover, .media-frame:hover {
    transform: translateY(-2px) scale(1.015);
    box-shadow: 0 24px 48px rgba(0,0,0,0.12);
  }
}

.media-caption {
  font-size: .8rem; line-height: 1.4; color: var(--text-dim);
  margin-top: .75rem; max-width: 560px; text-align: center;
}

/* CTA zone */
.cta-zone {
  background: var(--bg-page);
  border-top: 1px solid rgba(0,0,0,0.05);
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.cta-wrap { display: flex; justify-content: center; text-align: center; }
.cta-block {
  background: var(--bg-alt); border-radius: var(--radius-big);
  box-shadow: var(--shadow-card); padding: 2rem 2rem 2.5rem;
  max-width: 480px; width: 100%;
}
.cta-eyebrow { text-transform: uppercase; font-size: .7rem; font-weight: 600; color: var(--accent); letter-spacing: .05em; margin-bottom: .5rem; }
.cta-title { font-size: 1.3rem; font-weight: 600; color: var(--text-main); }
.cta-desc { font-size: .9rem; line-height: 1.4; color: var(--text-dim); margin: .75rem 0 1rem; }
.cta-link { display: inline-block; font-size: .9rem; font-weight: 600; color: var(--accent); text-decoration: none; }
.cta-link:hover { text-decoration: underline; }

/* FOOTER — par défaut (toutes pages) : foncé */
.footer {
  background: var(--bg-dark);
  color: var(--text-invert);
  padding: 2rem 0 3rem;
  font-size: .8rem;
  line-height: 1.4;
}
.footer-inner {
  display: flex; flex-wrap: wrap; gap: 2rem; justify-content: space-between;
}
.footer-title { font-weight: 600; color: var(--text-invert); margin-bottom: .25rem; }
.footer-small { color: rgba(255,255,255,0.7); max-width: 32ch; }

/* =========================================================
   CTA LOGOS (accueil)
   ========================================================= */
.cta-logo-grid {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem;
}
.cta-logo-grid { gap: 1rem; }
@media (max-width:800px) { .cta-logo-grid { margin-top: 1rem; } }

.cta-logo-card {
  width: 220px; height: 120px; display: flex; align-items: center; justify-content: center;
  background: #fff; border-radius: var(--radius-big); box-shadow: var(--shadow-card);
  border: 1px solid rgba(0,0,0,0.05); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  text-align: center;
}
.cta-logo-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(0,0,0,0.12); border-color: rgba(0,0,0,0.1); }
.cta-logo-img { max-width: 140px; max-height: 70px; object-fit: contain; display: block; }

@media (max-width:800px) {
  .cta-logo-grid { flex-direction: row; gap: 1rem; margin-top: 1rem; }
  .cta-logo-card { width: 160px; height: 90px; }
  .cta-logo-img { max-width: 100px; max-height: 60px; }
}

/* Titres de section (accueil) */
.section-headline {
  font-size: 1.4rem; font-weight: 600; color: var(--text-main);
  line-height: 1.25; margin: 0 0 .5rem;
}
.section-subtitle {
  font-size: 1rem; font-weight: 500; color: var(--accent);
  line-height: 1.3; margin: 0 0 1rem;
}

/* Grille logos clients */
.client-logos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(120px,1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.client-logo-card {
  background: #fff; border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  border: 1px solid rgba(0,0,0,0.05); display: flex; align-items: center; justify-content: center;
  padding: 1rem; min-height: 80px;
}
.client-logo-img { max-width: 100%; max-height: 50px; object-fit: contain; display: block; }

/* VALUE GRID (accueil) */
.value-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 3rem; }
@media(max-width:900px){ .value-grid { grid-template-columns: 1fr; } }

.value-item {
  background: var(--bg-alt); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card); border: 1px solid rgba(0,0,0,0.04);
  padding: 1rem 1rem 1.25rem;
}
.value-head { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: .5rem; }
.value-icon {
  width: 32px; height: 32px; border-radius: 8px; background: #fff; box-shadow: var(--shadow-card);
  border: 1px solid rgba(0,0,0,0.05); display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden;
}
.value-icon img { max-width: 24px; max-height: 24px; object-fit: contain; display: block; }
.value-title { font-size: 1rem; font-weight: 600; line-height: 1.3; color: var(--text-main); margin: 0; }
.value-desc { font-size: .9rem; line-height: 1.4; color: var(--text-main); margin: 0; }

/* Contact (accueil) */
.contact-form {
  background: var(--bg-alt); border-radius: var(--radius-big);
  box-shadow: var(--shadow-card); border: 1px solid rgba(0,0,0,0.05);
  padding: 2rem; max-width: 480px;
}
.contact-field { display: flex; flex-direction: column; margin-bottom: 1rem; font-size: .9rem; }
.contact-field label { font-weight: 500; color: var(--text-main); margin-bottom: .4rem; }
.contact-field input, .contact-field textarea {
  font-family: var(--font-stack); font-size: .9rem; line-height: 1.4;
  padding: .6rem .75rem; border-radius: 8px; border: 1px solid rgba(0,0,0,0.2); outline: none;
}
.contact-field input:focus, .contact-field textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px rgba(23,96,255,0.15);
}
.contact-actions { margin-top: 1rem; }
.contact-submit, .contact-button {
  appearance: none; border: 0; border-radius: 999px; background: var(--accent); color: #fff;
  font-weight: 600; font-size: .9rem; line-height: 1.2; padding: .8rem 1.2rem; cursor: pointer;
  box-shadow: var(--shadow-card); transition: box-shadow .2s ease, transform .2s ease;
}
.contact-submit:hover, .contact-button:hover { box-shadow: 0 16px 32px rgba(0,0,0,0.12); transform: translateY(-2px); }

.section-subtitle.center { text-align: center; }

/* Masques optionnels */
.hidden-section { display: none !important; }

/* ===========================
   HERO (accueil) tweaks
   =========================== */
.hero-title--home {
  font-size: clamp(1.1rem, 0.4vw + 0.8rem, 1.2rem);
  font-weight: 600;
  color: var(--text-main);
  line-height: 1.3;
  margin: 0;
  display: block;
}
.hero-sub--home {
  display: block; font-size: .9rem; font-weight: 500; color: var(--text-dim);
  line-height: 1.4; margin-top: .4rem; text-transform: none;
}
.hero-desc--home {
  max-width: 90ch; font-size: 1rem; line-height: 1.45; color: var(--text-main);
  margin-top: 1rem;
}
.hero-desc--home strong { color: var(--accent); font-weight: 600; }
.hero-bullets--home {
  margin: 1rem 0 0; padding-left: 1.2rem; list-style: none; font-size: 1rem; color: var(--text-main); line-height: 1.45;
}
.hero-bullets--home li { position: relative; padding-left: 1rem; margin: .3rem 0; }
.hero-bullets--home li::before {
  content: "•"; color: var(--accent); font-weight: 700; position: absolute; left: 0; top: 0;
}
.hero-bullets--home li strong { color: var(--text-main); font-weight: 600; }

/* =========================================================
   SPÉCIFIQUE PITCH UP (scope .page--pitchup)
   ========================================================= */

/* Alternance des bandeaux (hero = 1er bleu) */
.page--pitchup .section:nth-of-type(odd) { background: var(--bg-page); }
.page--pitchup .section:nth-of-type(even) { background: var(--bg-alt); }

/* Hero : marges latérales cohérentes avec les autres sections */
.page--pitchup .hero-inner { padding: 0 var(--wrap-pad); }
@media (max-width: 800px) {
  .page--pitchup .hero-inner { padding: 0; }
}

/* Hero : corriger la grille en largeur intermédiaire (801–1099px) */
@media (min-width: 801px) and (max-width: 1099px) {
  .page--pitchup .hero-inner { grid-template-columns: minmax(0, 1fr) 320px; }
  .page--pitchup .hero-visual { max-width: 320px; }
  .page--pitchup .hero-shot { width: 100%; height: auto; }
}

/* Hero : élargir la zone de texte (lever la limite 40ch) */
@media (min-width: 1000px) {
  .page--pitchup .hero-desc { max-width: 72ch; } /* ajuste si tu veux 70–80ch */
}

/* Bullets mobile : alignement propre sur Pitch Up uniquement */
@media (max-width: 800px) {
  .page--pitchup .hero-bullets {
    display: inline-block;
    text-align: left;
    padding-left: 0;
    margin-left: auto; margin-right: auto;
  }
  .page--pitchup .hero-bullets li {
    padding-left: 1.1rem; margin: .25rem 0;
  }
  .page--pitchup .hero-bullets li::before { left: 0; }
}

/* Footer Pitch Up : bleu pastel distinct */
.page--pitchup .footer {
  background: #cfdcff;
  color: var(--text-main);
}
.page--pitchup .footer-small { color: #1a1a1a; }

/* Spécifique section "Ils nous ont fait confiance" (Pitch Up) */
.page--pitchup .section.alt-bg.trusted { padding-top: 2rem; }

/* Mise en valeur légère (Pitch Up) */
.page--pitchup .hero-desc strong,
.page--pitchup .feature-desc strong {
  color: var(--accent);
  font-weight: 600;
}

/* =========================================================
   SPÉCIFIQUE ACCUEIL (page--home)
   ========================================================= */

/* 1️⃣ Hero : mêmes marges horizontales que les sections */
.page--home .hero-inner {
  padding: 0 var(--wrap-pad);
}
@media (max-width: 800px) {
  .page--home .hero-inner {
    padding: 0;
  }
}

/* 2️⃣ Hero (mobile) : alignement propre des bullets */
@media (max-width: 800px) {
  .page--home .hero-bullets--home {
    display: inline-block;   /* centre le UL dans le hero */
    text-align: left;        /* texte à gauche à l’intérieur */
    padding-left: 0;
    margin-left: auto;
    margin-right: auto;
  }
  .page--home .hero-bullets--home li {
    padding-left: 1.1rem;    /* espace pour la puce custom */
    margin: .25rem 0;
  }
  .page--home .hero-bullets--home li::before {
    left: 0;
  }
}

/* ====== Language switch — version only-flags, pill style ====== */
.lang-switch {
  display:flex; justify-content:center; align-items:center;
  gap:.6rem; margin:0 0 .75rem;
}

/* Chaque drapeau vit dans un petit bouton rond (pills) */
.lang-switch a{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:9999px;
  background:linear-gradient(180deg, #ffffff, #f6f7f8);
  box-shadow:
    0 1px 2px rgba(0,0,0,.06),
    inset 0 0 0 1px rgba(0,0,0,.06);
  text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}

/* Survol : léger lift + ombre douce */
.lang-switch a:hover{
  transform:translateY(-1px);
  box-shadow:
    0 6px 16px rgba(0,0,0,.12),
    inset 0 0 0 1px rgba(0,0,0,.08);
}

/* Focus accessible : anneau net autour du bouton (pas rectangulaire) */
.lang-switch a:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 3px var(--accent),
    0 6px 16px rgba(0,0,0,.12);
}

/* Langue active : fond légèrement bleuté + anneau fin */
.lang-switch a[aria-current="page"]{
  background:linear-gradient(180deg, #ffffff, #eef5ff);
  box-shadow:
    0 0 0 2px var(--accent),
    0 6px 16px rgba(0,0,0,.12);
  pointer-events:none; /* évite le clic sur la langue déjà active */
  opacity:.95;
}

/* Le drapeau (rectangulaire) dans le bouton rond */
.lang-flag{
  width:28px; height:20px; border-radius:4px; overflow:hidden; display:inline-block;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}

/* On cache le label FR/EN (pas besoin de toucher au HTML) */
.lang-switch .lbl{ display:none; }

/* Liens interactifs dans la phrase d’intro du Hero */
.hero-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease, text-decoration 0.2s ease;
}

.hero-link:hover {
  text-decoration: underline;
  color: #003dcc; /* accent légèrement plus foncé */
}