/* =========================================================
   UPGROUP ..  Apple-inspired global theme
   Unifie la typographie, les boutons et ajoute les animations
   d'apparition au scroll utilisées sur toute la page.
   ========================================================= */

:root{
  --up-ink:#1d1d1f;
  --up-gray:#6e6e73;
  --up-bg:#f5f5f7;
  --up-dark:#0d575c;
  --up-dark-2:#0c3444;
  --up-accent:#ffc74e;
  --ease:cubic-bezier(.22,1,.36,1);
}

/* ---------- Anti débordement horizontal (mobile) ---------- */
html, body{
  overflow-x:hidden;
  max-width:100%;
}

/* ---------- Typographie unifiée ---------- */
html, body{
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6,
.navbar-link, .btn, p, a, span, li, input, textarea, label{
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
body{ color:var(--up-gray); }

h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6{
  font-weight:700 !important;
  letter-spacing:-0.02em;
  color:var(--up-ink) !important;
}

.texte-darkgreen{ color:var(--up-ink) !important; }

/* Exceptions : titres sur fonds sombres restent blancs */
.footer h1,.footer h2,.footer h3,.footer h4,.footer h5,.footer h6,
.counter h1,.counter h2,.counter h3,.counter h4,.counter h5,.counter h6,
.contact-apple h1,.contact-apple h2,.contact-apple h3,.contact-apple h4{
  color:#fff !important;
}
.footer .widget p, .footer .widget a{ color:rgba(255,255,255,0.75) !important; }
.footer .widget a:hover{ color:#ffc74e !important; }
.footer h3, .footer h4{ font-weight:600 !important; letter-spacing:0; }

/* Titres de section homogènes partout */
.mysoustitle{
  font-size:40px !important;
  font-weight:700 !important;
  letter-spacing:-0.02em;
}
.section-kicker{
  display:inline-block;
  font-size:13px;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--up-dark);
  margin-bottom:12px;
}

/* ---------- Boutons style pilule ---------- */
.btn{
  border-radius:980px !important;
  text-transform:none !important;
  font-weight:500 !important;
  letter-spacing:0 !important;
  padding:0.85rem 1.9rem !important;
  transition:all .3s var(--ease) !important;
}
.btn-main{
  background:var(--up-ink) !important;
  border-color:var(--up-ink) !important;
  color:#fff !important;
}
.btn-main:hover{
  background:#000 !important;
  border-color:#000 !important;
  color:#fff !important;
  transform:translateY(-2px);
}
.mybtn1{ border-radius:980px !important; }
.mybtn1:hover{ transform:translateY(-2px); }

/* ---------- Animations liées au scroll (scroll-scrubbed) ----------
   L'opacité et la transformation de ces éléments sont pilotées en
   continu par static/js/reveal.js en fonction de la position de
   scroll : ils apparaissent en entrant dans le viewport et
   disparaissent en en ressortant. Ces règles ne fixent que l'état
   de départ (avant que le JS ne prenne le relais / si JS désactivé).
   ---------------------------------------------------------------- */
.reveal, .reveal-zoom, .reveal-left, .reveal-right, .reveal-stagger > *{
  opacity:0;
  will-change:opacity, transform;
}
.reveal{ transform:translateY(46px); }
.reveal-zoom{ transform:scale(.88); }
.reveal-left{ transform:translateX(-70px); }
.reveal-right{ transform:translateX(70px); }
.reveal-stagger > *{ transform:translateY(46px); }

/* léger parallaxe (voir data-parallax) */
[data-parallax]{ will-change:transform; }

@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-zoom, .reveal-left, .reveal-right, .reveal-stagger > *{
    opacity:1 !important; transform:none !important;
  }
  [data-parallax]{ transform:none !important; }
}

/* Sans JavaScript, on affiche tout normalement */
.no-js .reveal, .no-js .reveal-zoom, .no-js .reveal-left,
.no-js .reveal-right, .no-js .reveal-stagger > *{
  opacity:1 !important; transform:none !important;
}