/* ============================================================
   Reeloq — base
   Remise à zéro, typographie, éléments communs.
   ============================================================ */

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

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

body{
  background:var(--fond);
  color:var(--texte);
  font-family:var(--f-texte);
  font-size:var(--t-base);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg,video{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
button,input,select,textarea{ font:inherit; color:inherit }
button{ background:none; border:0; cursor:pointer }
::selection{ background:var(--terre); color:#fff }

h1,h2,h3,h4{
  font-family:var(--f-titre);
  font-weight:500;
  line-height:1.08;
  letter-spacing:-.015em;
  text-wrap:balance;
}
h1{ font-size:var(--t-2xl) }
h2{ font-size:var(--t-xl) }
h3{ font-size:var(--t-lg) }
p{ text-wrap:pretty }

/* --- accessibilité : le focus doit toujours se voir --- */
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:2px;
}
.saut-contenu{
  position:absolute; left:-9999px;
  background:var(--brun); color:var(--creme);
  padding:var(--e-3) var(--e-4); z-index:999; border-radius:var(--rayon);
}
.saut-contenu:focus{ left:var(--e-4); top:var(--e-4) }

/* --- structure --- */
.contenant{
  width:100%;
  max-width:var(--largeur);
  margin-inline:auto;
  padding-inline:var(--gouttiere);
}
.section{ padding-block:clamp(3.5rem,8vw,7rem) }
.section--serree{ padding-block:clamp(2.5rem,5vw,4rem) }

/* --- éléments de texte --- */
.surtitre{
  display:inline-flex; align-items:center; gap:var(--e-3);
  font-size:var(--t-xs); font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent);
}
.surtitre::before{
  content:""; width:26px; height:1px; background:currentColor; opacity:.55;
}
.chapeau{
  font-size:var(--t-md);
  color:var(--texte-doux);
  line-height:1.75;
  max-width:60ch;
}

/* --- boutons --- */
.bouton{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--e-2);
  padding:.9rem 1.6rem;
  font-size:var(--t-sm); font-weight:600; letter-spacing:.02em;
  border:1.5px solid transparent; border-radius:var(--rayon);
  transition:background var(--transition), color var(--transition),
             border-color var(--transition), transform var(--transition);
  white-space:nowrap; cursor:pointer;
}
.bouton:hover{ transform:translateY(-1px) }
.bouton:active{ transform:translateY(0) }

.bouton--principal{ background:var(--accent); color:var(--accent-texte) }
.bouton--principal:hover{ background:var(--terre-clair) }

.bouton--contour{ border-color:var(--bordure-forte); color:var(--texte) }
.bouton--contour:hover{ border-color:var(--texte); background:rgba(60,44,31,.04) }
.theme-sombre .bouton--contour:hover{ background:rgba(228,216,201,.08) }

.bouton--sombre{ background:var(--brun); color:var(--creme) }
.bouton--sombre:hover{ background:var(--brun-clair) }

.bouton--petit{ padding:.6rem 1.1rem; font-size:var(--t-xs) }

/* --- champs de formulaire --- */
.champ{ display:grid; gap:var(--e-2); margin-bottom:var(--e-4) }
.champ label{
  font-size:var(--t-xs); font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--texte-faible);
}
.champ input, .champ textarea, .champ select{
  width:100%; padding:.85rem 1rem;
  background:var(--surface); color:var(--texte);
  border:1.5px solid var(--bordure); border-radius:var(--rayon);
  transition:border-color var(--transition);
}
.champ input:focus, .champ textarea:focus, .champ select:focus{
  outline:none; border-color:var(--accent);
}
.champ textarea{ min-height:8rem; resize:vertical }
.champ--erreur input, .champ--erreur textarea{ border-color:var(--alerte) }
.champ__erreur{ font-size:var(--t-sm); color:var(--alerte) }
.champ__aide{ font-size:var(--t-sm); color:var(--texte-faible) }

/* Champ piège anti-robot : invisible pour un humain, rempli par un automate. */
.piege{
  position:absolute !important; left:-9999px !important;
  width:1px; height:1px; overflow:hidden;
}

/* --- messages --- */
.message{
  padding:var(--e-3) var(--e-4); border-radius:var(--rayon);
  border-left:3px solid; font-size:var(--t-sm); margin-bottom:var(--e-4);
}
.message--succes{ border-color:var(--succes); background:rgba(94,140,97,.1) }
.message--alerte{ border-color:var(--alerte); background:rgba(180,71,47,.1) }
.message--info{   border-color:var(--terre);  background:rgba(169,100,59,.1) }

/* --- apparition au défilement --- */
.apparait{
  opacity:0; transform:translateY(20px);
  transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
}
.apparait.vu{ opacity:1; transform:none }
@media (prefers-reduced-motion: reduce){
  .apparait{ opacity:1; transform:none }
}