/* =========================

   BASE.css (mobile-first)

========================= */



*,

*::before,

*::after {

  box-sizing: border-box;

}



/* Empêche le scroll horizontal quel que soit le niveau de zoom */
html {

  overflow-x: hidden;

}



body {

  margin: 0;

  font-family: var(--font-sans);

  color: var(--text);

  background: var(--bg-page);

  line-height: 1.6;

  font-size: 16px;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  /* overflow-x: clip ne casse pas position:sticky (contrairement à hidden) */
  overflow-x: clip;

}



/* =========================

   HEADINGS (mobile)

========================= */



h1,

h2 {

  font-family: var(--font-serif);

  margin: 0 0 12px;

  font-weight: 400;

  letter-spacing: 0.04em;

  color: var(--text);

}



h1 {

  font-size: 20px;

  line-height: 1.2;

}



h2 {

  font-size: 25px;

  line-height: 1.25;

}



h3 {

  font-size: 18px;

  line-height: 1.3;

}



/* =========================

   TEXT

========================= */



p {

  margin: 0 0 14px;

  color: var(--text);

}



.text-muted {

  color: var(--text-muted);

}



/* =========================

   LINKS

========================= */



a {

  color: inherit;

  text-decoration: none;

  transition: color .2s ease;

}



a:hover {

  color: var(--link-hover-muted);

}









/* Galaxy S8+ / petits 360px et hauteur ~740 */



@media (max-width: 375px) and (max-height: 890px) {

  body {

    font-size: 16px;

  }



  h1 {

    font-size: 19px;

    line-height: 1.2;

  }

}



@media (max-width: 360px) and (max-height: 890px) {

  body {

    font-size: 16px;

  }



  h1 {

    font-size: 18px;

    line-height: 1.2;

  }

}



@media (max-width: 345px) and (max-height: 890px) {

  body {

    font-size: 15px;

  }



  h1 {

    font-size: 17px;

    line-height: 1.2;

  }

}



/* =========================

   TYPO DESKTOP & TABLETTES

========================= */



@media (min-width: 768px) {

  body {

    font-size: 24px;

  }



  h1 {

    font-size: 40px;

    line-height: 1.15;

  }



  h2 {

    font-size: 40px;

  }



  h3 {

    font-size: 26px;

  }

}



@media (min-width: 820px) {

  body {

    font-size: 28px;

  }



  h1 {

    font-size: 42px;

  }



  h2 {

    font-size: 45px;

  }



  h3 {

    font-size: 30px;

  }

}



@media (min-width: 992px) {

  body {

    font-size: 30px;

  }



  h1 {

    font-size: 42px;

    line-height: 1.15;

  }



  h2 {

    font-size: 50px;

  }



  h3 {

    font-size: 35px;

  }

}



/* Transition douce entre tablette (30px à 992px) et desktop (18px à 1200px) */
/* Évite le saut brutal visible au zoom entre ~1025px et 1199px            */
@media (min-width: 1100px) {

  body {

    font-size: 22px;

  }



  h1 {

    font-size: 44px;

    line-height: 1.15;

  }



  h2 {

    font-size: 38px;

  }



  h3 {

    font-size: 26px;

  }

}



@media (min-width: 1200px) {

  body {

    font-size: 18px;

  }



  h1 {

    font-size: 50px;

    line-height: 1.15;

  }



  h2 {

    font-size: 35px;

  }



  h3 {

    font-size: 22px;

  }

}



/* =========================

   REVEAL ON SCROLL (CSS)

   -> à mettre dans components.css (ou base.css)

========================= */



.reveal{

  opacity: 0;

  transform: translateY(18px);

  transition: opacity .6s ease, transform .6s ease;

  will-change: opacity, transform;

}



.reveal.is-visible{

  opacity: 1;

  transform: translateY(0);

}



/* Variantes */

.reveal--soft{ transform: translateY(12px); }

.reveal--zoom{ transform: scale(.985); }

.reveal--zoom.is-visible{ transform: scale(1); }



/* Petit “stagger” (cascade) : on joue sur le delay */

.reveal--stagger{ transition-delay: var(--reveal-delay, 0ms); }



/* Accessibilité */

@media (prefers-reduced-motion: reduce){

  .reveal{

    opacity: 1;

    transform: none;

    transition: none;

  }

}



/* =========================

   TAILLES DE POLICES CENTRALISÉES

   Modifier ici pour propager sur tout le site.

========================= */

/* Variable bouton — utilisée aussi dans les overrides MailPoet / CF7 */
:root { --fs-btn: 16px; }
@media (min-width: 768px)  { :root { --fs-btn: 20px; } }
@media (min-width: 820px)  { :root { --fs-btn: 24px; } }
@media (min-width: 992px)  { :root { --fs-btn: 26px; } }
@media (min-width: 1100px) { :root { --fs-btn: 20px; } }
@media (min-width: 1200px) { :root { --fs-btn: 16px; } }

/* Boutons */
button,
input[type="submit"] {
  font-family: var(--font-sans);
  font-size: var(--fs-btn);
  font-weight: 500;
}

/* Labels de formulaire */
label {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}
@media (min-width: 768px)  { label { font-size: 18px; } }
@media (min-width: 820px)  { label { font-size: 20px; } }
@media (min-width: 992px)  { label { font-size: 22px; } }
@media (min-width: 1200px) { label { font-size: 15px; } }

/* Champs de saisie */
input[type="text"],
input[type="email"],
textarea,
select {
  font-family: var(--font-sans);
  font-size: 15px;
}
@media (min-width: 768px)  { input[type="text"], input[type="email"], textarea, select { font-size: 18px; } }
@media (min-width: 820px)  { input[type="text"], input[type="email"], textarea, select { font-size: 20px; } }
@media (min-width: 992px)  { input[type="text"], input[type="email"], textarea, select { font-size: 22px; } }
@media (min-width: 1200px) { input[type="text"], input[type="email"], textarea, select { font-size: 15px; } }