/* Base technique commune des sites Webkal : mise en page, menu, formulaire, accessibilité.
   Le design du client (couleurs, polices, matières, ornements) va dans styles.css,
   qui redéfinit les variables ci-dessous et habille les sections. */

:root{
  --fond:#F6F5F2;
  --surface:#FFFFFF;
  --texte:#16171A;
  --texte-doux:#5A5D66;
  --ligne:#E2E0DA;
  --accent:#16171A;
  --accent-texte:#FFFFFF;
  --rayon:18px;
  --rayon-bouton:999px;
  --police-titres:Georgia, "Times New Roman", serif;
  --police-texte:system-ui, -apple-system, "Segoe UI", sans-serif;
  --largeur:1120px;
  --entete-hauteur:72px;
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--fond); color:var(--texte);
  font-family:var(--police-texte); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg,video{max-width:100%; display:block}
img{height:auto}
h1,h2,h3{font-family:var(--police-titres); line-height:1.12; margin:0 0 .5em; text-wrap:balance}
p{margin:0 0 1em}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:6px}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

.conteneur{width:min(var(--largeur), 100% - 32px); margin-inline:auto}
section{padding:72px 0; scroll-margin-top:calc(var(--entete-hauteur) + 16px)}

/* --- En-tête et menu --- */
.entete{position:sticky; top:0; z-index:20; background:var(--fond)}
.entete-in{display:flex; align-items:center; gap:16px; min-height:var(--entete-hauteur)}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none; font-family:var(--police-titres); font-size:20px; font-weight:700; margin-right:auto}
.logo img{height:36px; width:auto}
.menu{display:flex; align-items:center; gap:4px}
.menu a{padding:10px 14px; border-radius:var(--rayon-bouton); text-decoration:none; font-size:15px; min-height:44px; display:inline-flex; align-items:center}
.menu a:hover,.menu a[aria-current="page"]{background:var(--surface)}
.burger{
  display:none; width:44px; height:44px; border-radius:50%; border:1px solid var(--ligne);
  background:var(--surface); color:var(--texte); align-items:center; justify-content:center; cursor:pointer;
}
.burger svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round}
.burger .fermer{display:none}
.burger[aria-expanded="true"] .ouvrir{display:none}
.burger[aria-expanded="true"] .fermer{display:block}
.menu-mobile{display:flex; flex-direction:column; gap:4px; padding:8px 0 16px}
.menu-mobile[hidden]{display:none}
.menu-mobile a{padding:14px 16px; border-radius:12px; text-decoration:none; min-height:48px; display:flex; align-items:center}
.menu-mobile a:hover,.menu-mobile a[aria-current="page"]{background:var(--surface)}
@media (max-width:780px){
  .menu{display:none}
  .burger{display:inline-flex}
}
@media (min-width:781px){ .menu-mobile{display:none !important} }

/* --- Boutons --- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:12px 22px; border-radius:var(--rayon-bouton);
  font:600 16px/1.2 var(--police-texte); text-decoration:none; cursor:pointer;
  border:1px solid transparent; transition:transform .2s ease, background .2s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-principal{background:var(--accent); color:var(--accent-texte)}
.btn-secondaire{background:transparent; color:var(--texte); border-color:currentColor}
.btn svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}
@media (max-width:599px){
  .actions{flex-direction:column; align-items:stretch}
  .actions .btn{width:100%}
}

/* --- Apparition douce --- */
.monte{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease}
.monte.vu{opacity:1; transform:none}

/* --- Formulaire --- */
.champs{display:grid; gap:18px; grid-template-columns:1fr}
@media (min-width:700px){ .champs{grid-template-columns:1fr 1fr} }
.champ{display:flex; flex-direction:column; gap:7px; min-width:0}
.champ.large{grid-column:1/-1}
.champ label{font-size:14px; font-weight:600}
.champ .aide{font-size:13px; color:var(--texte-doux)}
.champ .requis{font-weight:400; color:var(--texte-doux)}
.champ input,.champ select,.champ textarea{
  width:100%; min-height:48px; padding:12px 14px; border-radius:12px;
  border:1px solid var(--ligne); background:var(--surface); color:var(--texte);
  font:16px/1.4 var(--police-texte);
}
.champ textarea{min-height:150px; resize:vertical}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:2px solid var(--accent); outline-offset:1px}
.form-pied{display:flex; flex-wrap:wrap; gap:14px 18px; align-items:center; margin-top:24px}
.form-pied .mention{font-size:13px; color:var(--texte-doux); max-width:44ch}
.piege{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.reponse{margin-top:20px; padding:16px 18px; border-radius:14px; border:1px solid var(--ligne); background:var(--surface)}
.reponse[hidden]{display:none}
.reponse .titre-rep{font-weight:700; margin-bottom:4px}
.reponse p{margin:0}

/* --- Pied de page --- */
.pied{padding:40px 0 32px; font-size:14px; color:var(--texte-doux)}
.pied-in{display:flex; flex-wrap:wrap; gap:12px 28px; align-items:center; justify-content:space-between}
.pied a{color:inherit}
.pied .credit{font-size:13px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important; transition:none !important}
  .monte{opacity:1; transform:none}
}