/* =========================================================
   Jonathan Berne — feuille de style
   Structure et mécanique. Les variables pilotent tout.
   ========================================================= */

:root{
  /* couleurs */
  --violet:#512C54;
  --fond:#FFFFFF;
  --encre:#1B1B19;
  --gris:#6E6A64;
  --trait:rgba(27,27,25,.12);

  /* typo */
  --police:"Lato","Helvetica Neue",Helvetica,Arial,sans-serif;

  /* mesures */
  --max:1080px;
  --gutter:clamp(20px,5vw,48px);
  --section:clamp(64px,10vw,140px);
  --radius:999px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--fond);
  color:var(--encre);
  font-family:var(--police);
  font-size:clamp(15px,1vw,17px);
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

img,svg{max-width:100%;height:auto;display:block}
a{color:inherit}
p{margin:0 0 1em}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
section{padding:var(--section) 0}

/* masqué à l'œil, conservé au clavier */
.vh{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
:focus-visible{outline:2px solid var(--violet);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ---------------- HERO ----------------
   Deux réglages pilotent tout :
   --etui-h       hauteur de l'étui à l'écran
   --recouvrement fraction de --etui-h dont le bloc du bas remonte dessus
   ------------------------------------- */
.hero{
  --etui-h:clamp(320px,68vh,820px);      /* hauteur de l'étui, depuis le bas */
  --remontee:.10;                        /* texte du bas au-dessus du bord bas */
  --ecart-titre:.64;                     /* écart entre le bloc titre et le bloc bas */

  position:relative;
  min-height:100svh;                     /* svh : tient compte de la barre mobile */
  display:flex;
  flex-direction:column;
  justify-content:flex-end;              /* tout se cale par rapport au bas */
  text-align:center;
  padding:clamp(28px,5vh,64px) 0 0;      /* aucun padding en bas : l'étui y touche */
  overflow:hidden;

  background-image:url("img/fond.jpg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

.hero .mark{
  display:block;
  width:auto;
  height:clamp(48px,6vw,72px);           /* marque verticale : on pilote la hauteur */
  margin:0 auto clamp(20px,3vw,36px);
}

.hero-haut,.hero-bas{width:100%;position:relative;z-index:1}

/* l'étui détouré : ancré au bas du bloc, le bras sort du cadre */
.etui{
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  height:var(--etui-h);
  width:auto;
  max-width:100%;
  object-fit:contain;
  z-index:0;
  pointer-events:none;
}

/* le bloc titre se cale au-dessus du bloc bas, pas en haut de l'écran */
.hero-haut{
  margin-bottom:calc(var(--etui-h) * var(--ecart-titre));
}

/* le texte du bas se pose sur la partie basse de l'étui */
.hero-bas{
  margin-bottom:calc(var(--etui-h) * var(--remontee));
}

@media (min-width:900px){
  .hero{--etui-h:clamp(400px,78vh,1000px)}
}

.hero h1{
  margin:0;
  font-size:clamp(26px,4vw,44px);
  line-height:1.15;
  font-weight:300;
  letter-spacing:.01em;
}
.hero h1 strong{font-weight:700}

.hero .metier{
  margin:.3em 0 0;
  font-size:clamp(18px,2.4vw,28px);
  font-weight:300;
}
.hero .secteur{
  margin:.25em 0 0;
  font-size:clamp(14px,1.5vw,18px);
  color:var(--gris);
}

.accroche{
  margin:0 auto;
  max-width:16ch;
  font-size:clamp(22px,3.4vw,40px);
  line-height:1.2;
  font-weight:300;
}
.accroche strong{font-weight:700}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:clamp(24px,4vw,44px);
  padding:.85em 2.8em;
  min-height:44px;
  background:var(--violet);
  color:#fff;
  border-radius:var(--radius);
  text-decoration:none;
  letter-spacing:.06em;
  transition:opacity .2s ease;
}
.btn:hover{opacity:.88}

/* ---------------- BLOCS DE TEXTE ---------------- */
h2{
  margin:0 0 1.8em;
  font-size:clamp(20px,2.6vw,30px);
  font-weight:400;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--violet);
  text-align:center;
}

.texte{max-width:66ch;margin:0 auto;text-align:center}
.texte .lead{font-weight:700}

/* ---------------- FORMULES ---------------- */
.switch{
  display:flex;
  justify-content:center;
  gap:1.5em;
  margin-bottom:2.4em;
}
.switch label{
  cursor:pointer;
  color:var(--gris);
  padding:.4em .2em;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  transition:color .2s ease;
}

#t-libre:checked ~ .switch label[for="t-libre"],
#t-eng:checked   ~ .switch label[for="t-eng"]{
  color:var(--encre);
  font-weight:700;
}

#t-libre:focus-visible ~ .switch label[for="t-libre"],
#t-eng:focus-visible   ~ .switch label[for="t-eng"]{
  outline:2px solid var(--violet);
  outline-offset:3px;
}

.formules{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:clamp(28px,5vw,64px);
  text-align:center;
}
.formule .nom{
  margin:0 0 .6em;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:.9em;
}
.formule .prix{
  margin:0 0 .4em;
  font-size:clamp(24px,3vw,36px);
  line-height:1.1;
  font-weight:300;
}
.formule .prix small{
  font-size:.42em;
  color:var(--gris);
  letter-spacing:.04em;
}
.formule .quoi{margin:0;font-size:.85em;color:var(--gris)}

/* bascule des prix — 100 % CSS */
.p-eng{display:none}
#t-eng:checked ~ .formules .p-eng{display:inline}
#t-eng:checked ~ .formules .p-libre{display:none}

.conditions{
  max-width:60ch;
  margin:clamp(40px,6vw,72px) auto 0;
  text-align:center;
  color:var(--gris);
  font-size:.88em;
}
.conditions strong{color:var(--encre)}

/* ---------------- FAQ ---------------- */
.faq{max-width:66ch;margin:0 auto}
.faq details{border-top:1px solid var(--trait)}
.faq details:last-of-type{border-bottom:1px solid var(--trait)}

.faq summary{
  padding:1.1em 2em 1.1em 0;
  cursor:pointer;
  list-style:none;
  position:relative;
  font-weight:700;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  font-weight:400;
  font-size:1.3em;
  color:var(--violet);
}
.faq details[open] summary::after{content:"–"}
.faq .reponse{padding:0 0 1.4em;color:var(--gris)}

/* ---------------- CONTACT ---------------- */
.contact{text-align:center}
.contact a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font-size:clamp(17px,2vw,22px);
  text-decoration:none;
  border-bottom:1px solid currentColor;
}
.contact .ville{color:var(--gris)}

footer{
  padding:2em 0 4em;
  color:var(--gris);
  font-size:.8em;
  text-align:center;
}
footer a{color:inherit}

/* ---------------- PAGE MENTIONS LÉGALES ---------------- */
.legal{
  max-width:none;
  padding:clamp(40px,8vh,80px) 0 clamp(64px,10vh,120px);
}
.legal .wrap{max-width:66ch}
.legal .retour{font-size:.9em;color:var(--gris);margin-bottom:3em}
.legal .retour a{text-decoration:none}

.legal h1{
  margin:0 0 1.6em;
  font-size:clamp(24px,3vw,34px);
  font-weight:300;
}
.legal h2{
  margin:2.6em 0 .8em;
  font-size:.8em;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-align:left;
  color:var(--violet);
}
.legal p{margin:0 0 1em}