/* ==========================================================================
   HearthPhone — feuille de style unique, commune aux 5 versions linguistiques
   Direction : sombre, anguleux, éditorial. Aucun angle arrondi.
   Une seule famille typographique (Inter). Trame de filets d'un pixel.
   Marine Profond décliné en fonds, Or Doré en accent et en repères.
   ========================================================================== */

:root{
  --bg:#0E151A;               /* fond principal, marine assombri */
  --bg-2:#131E26;             /* surface élevée */
  --bg-3:#18242E;             /* survol, médias */
  --fg:#F2F5F7;
  --fg-2:#93A1AC;             /* 6,9:1 sur --bg — AA */
  --gold:#B68B4A;             /* 5,9:1 sur --bg — AA, utilisable en petit texte */
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.20);

  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --maxw:78rem;
  --gutter:clamp(1.25rem,4.5vw,3rem);
  --sec:clamp(4.5rem,8vw,7.5rem);
  --ease:cubic-bezier(.2,.6,.3,1);
  --t:180ms var(--ease);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--bg)}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  font-size:clamp(1rem,.96rem + .2vw,1.0625rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
ul{margin:0;padding:0;list-style:none}
dl,dd{margin:0}
h1,h2,h3,p{margin:0}

h1,h2,h3{font-weight:700;line-height:1.05;letter-spacing:-.035em;text-wrap:balance}
h1{font-size:clamp(2.75rem,1.7rem + 4.6vw,5.5rem);letter-spacing:-.045em}
h2{font-size:clamp(2rem,1.4rem + 2.8vw,3.5rem)}
h3{font-size:clamp(1.25rem,1.1rem + .6vw,1.6rem);letter-spacing:-.025em;line-height:1.15}

/* --- Utilitaires -------------------------------------------------------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.lede{color:var(--fg-2);font-size:clamp(1.05rem,1rem + .35vw,1.25rem);max-width:54ch}
.prose{color:var(--fg-2);max-width:62ch}
.prose + .prose{margin-top:1.1rem}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
:focus:not(:focus-visible){outline:none}

.skip{
  position:absolute;left:0;top:-4rem;z-index:60;
  background:var(--gold);color:#12191F;
  padding:.7rem 1.2rem;font-size:.875rem;font-weight:600;text-decoration:none;
  transition:top var(--t);
}
.skip:focus{top:0}

/* Repère de section : index chiffré + libellé, en or, chiffres tabulaires */
.idx{
  display:flex;align-items:center;gap:.7rem;
  font-size:.75rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);font-variant-numeric:tabular-nums;
}
.idx::after{content:"";flex:1;height:1px;background:var(--line)}

/* --- Boutons : angles vifs ---------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.95rem 1.75rem;
  border:1px solid var(--fg);background:var(--fg);color:var(--bg);
  font-size:.9375rem;font-weight:600;line-height:1.2;text-decoration:none;cursor:pointer;
  transition:background var(--t),color var(--t),border-color var(--t);
}
.btn:hover{background:var(--gold);border-color:var(--gold);color:#12191F}
.btn[disabled]{opacity:.5;cursor:progress}
.btn--line{background:none;color:var(--fg);border-color:var(--line-2)}
.btn--line:hover{background:none;color:var(--gold);border-color:var(--gold)}
.btn svg{width:1rem;height:1rem;stroke:currentColor;stroke-width:2;fill:none;transition:transform var(--t)}
.btn:hover svg{transform:translateX(3px)}

/* --- En-tête ------------------------------------------------------------ */
.site-header{
  position:sticky;top:0;z-index:30;
  background:var(--bg);border-bottom:1px solid transparent;
  transition:border-color var(--t);
}
.site-header.is-stuck{border-bottom-color:var(--line)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:3.75rem}
.brand{display:flex;align-items:center;gap:.6rem;font-size:.9375rem;font-weight:600;letter-spacing:.01em;text-decoration:none}
.brand img{width:1.375rem;height:1.375rem;object-fit:contain}

/* --- Sélecteur de langue ------------------------------------------------ */
.lang{position:relative}
.lang__btn{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.4rem .6rem;background:none;border:1px solid transparent;
  color:var(--fg-2);font-size:.75rem;font-weight:600;letter-spacing:.12em;cursor:pointer;
  transition:color var(--t),border-color var(--t);
}
.lang__btn:hover{color:var(--fg);border-color:var(--line-2)}
.lang__btn svg{width:.6rem;height:.6rem;stroke:currentColor;stroke-width:2.25;fill:none;transition:transform var(--t)}
.lang__btn[aria-expanded=true] svg{transform:rotate(180deg)}
.lang__menu{
  position:absolute;right:0;top:calc(100% + .4rem);z-index:40;
  min-width:11rem;background:var(--bg-2);border:1px solid var(--line-2);
}
.lang__menu[hidden]{display:none}
.lang__menu a{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.6rem .85rem;font-size:.9rem;text-decoration:none;color:var(--fg-2);
  border-bottom:1px solid var(--line);
  transition:background var(--t),color var(--t);
}
.lang__menu li:last-child a{border-bottom:0}
.lang__menu a:hover{background:var(--bg-3);color:var(--fg)}
.lang__menu a[aria-current=true]{color:var(--gold);font-weight:600}

/* --- Hero : image pleine largeur, voile dégradé, texte à gauche ---------- */
.hero{position:relative;display:flex;align-items:flex-end;min-height:min(90vh,50rem);overflow:hidden}
.hero__bg{position:absolute;inset:0}
.hero__bg picture{display:block;width:100%;height:100%}
.hero__bg img{width:100%;height:100%;object-fit:cover}
.hero__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(14,21,26,.74) 0%,rgba(14,21,26,.9) 55%,rgba(14,21,26,.98) 100%);
}
@media (min-width:60rem){
  .hero__bg::after{
    background:linear-gradient(96deg,rgba(14,21,26,.97) 0%,rgba(14,21,26,.95) 42%,rgba(14,21,26,.86) 56%,rgba(14,21,26,.26) 100%);
  }
}
.hero__inner{position:relative;width:100%;padding-block:clamp(4rem,9vw,7rem)}
.hero h1{max-width:13.5ch}
.hero__slogan{
  margin-top:1.5rem;color:var(--gold);
  font-size:clamp(.9375rem,.9rem + .25vw,1.0625rem);font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;line-height:1.5;
}
.hero__sub{margin-top:1.5rem;max-width:40ch;color:var(--fg-2);font-size:clamp(1.05rem,1rem + .4vw,1.3rem)}
.hero__cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.5rem}

/* Barre de repères sous le hero — remplace l'ancienne pastille */
.meta{border-top:1px solid var(--line);display:grid}
@media (min-width:48rem){.meta{grid-template-columns:repeat(3,1fr)}}
.meta > div{padding:1.25rem 0;border-bottom:1px solid var(--line)}
@media (min-width:48rem){
  .meta > div{border-bottom:0;border-left:1px solid var(--line);padding:1.5rem clamp(1rem,2.5vw,2rem)}
  .meta > div:first-child{border-left:0;padding-left:0}
}
.meta dt{
  font-size:.6875rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);margin-bottom:.35rem;
}
.meta dd{font-size:.9375rem;color:var(--fg)}

/* --- Trame de sections -------------------------------------------------- */
.sec{border-top:1px solid var(--line);padding-block:var(--sec)}
.sec__head{display:grid;gap:1.25rem}
@media (min-width:64rem){
  .sec__head{grid-template-columns:13rem 1fr;gap:1.25rem 3.5rem;align-items:start}
  .sec__head .idx{grid-row:span 2;padding-top:.6rem;align-items:flex-start}
  .sec__head .idx::after{display:none}
}
.sec__head .lede{margin-top:.25rem}

/* --- 01 Le constat : trois colonnes de texte séparées par des filets ---- */
.claims{display:grid;margin-top:clamp(2.5rem,5vw,4rem);border-top:1px solid var(--line)}
@media (min-width:56rem){.claims{grid-template-columns:repeat(3,1fr)}}
.claims li{padding:clamp(1.75rem,3vw,2.25rem) 0;border-bottom:1px solid var(--line)}
@media (min-width:56rem){
  .claims li{border-bottom:0;border-left:1px solid var(--line);padding:2.25rem clamp(1.25rem,2.5vw,2.25rem)}
  .claims li:first-child{border-left:0;padding-left:0}
  .claims li:last-child{padding-right:0}
}
.claims .n{
  display:block;margin-bottom:1rem;
  font-size:.75rem;font-weight:600;letter-spacing:.18em;color:var(--gold);
  font-variant-numeric:tabular-nums;
}
.claims h3{margin-bottom:.75rem}
.claims p{color:var(--fg-2);font-size:.9375rem}

/* --- 02 Le rituel : image large puis trois temps ------------------------ */
.band{margin-top:clamp(2.5rem,5vw,3.5rem);border:1px solid var(--line)}
.band img{width:100%}
.steps{display:grid;margin-top:clamp(2.5rem,5vw,3.5rem);border-top:1px solid var(--line)}
@media (min-width:56rem){.steps{grid-template-columns:repeat(3,1fr)}}
.steps li{padding:clamp(1.75rem,3vw,2.25rem) 0;border-bottom:1px solid var(--line)}
@media (min-width:56rem){
  .steps li{border-bottom:0;border-left:1px solid var(--line);padding:2.25rem clamp(1.25rem,2.5vw,2.25rem)}
  .steps li:first-child{border-left:0;padding-left:0}
  .steps li:last-child{padding-right:0}
}
.steps .n{
  display:block;margin-bottom:.9rem;
  font-size:.75rem;font-weight:600;letter-spacing:.18em;color:var(--gold);
  font-variant-numeric:tabular-nums;
}
.steps h3{margin-bottom:.7rem;font-size:clamp(1.15rem,1.05rem + .35vw,1.35rem)}
.steps p{color:var(--fg-2);font-size:.9375rem}

/* --- 03 L'objet : prose + tableau de caractéristiques ------------------- */
.object{display:grid;gap:clamp(2.5rem,5vw,4rem);margin-top:clamp(2.5rem,5vw,3.5rem)}
@media (min-width:64rem){.object{grid-template-columns:1fr 1fr;gap:4.5rem;align-items:start}}
.table{border-top:1px solid var(--line-2)}
.table > div{display:grid;gap:.35rem;padding:1.15rem 0;border-bottom:1px solid var(--line)}
@media (min-width:34rem){.table > div{grid-template-columns:11rem 1fr;gap:1.5rem;align-items:baseline}}
.table dt{font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.table dd{color:var(--fg-2);font-size:.9375rem}

/* --- 04 La gamme : comparaison deux à deux ----------------------------- */
.compare{display:grid;gap:clamp(1.5rem,3vw,2.25rem);margin-top:clamp(2.5rem,5vw,3.5rem)}
@media (min-width:56rem){.compare{grid-template-columns:1fr 1fr}}
.compare + .compare{margin-top:clamp(1.5rem,3vw,2.25rem)}
.prod{display:flex;flex-direction:column;border:1px solid var(--line);background:var(--bg-2);transition:border-color var(--t)}
.prod:hover{border-color:var(--line-2)}
.prod__media{border-bottom:1px solid var(--line);background:var(--bg-3)}
.prod__media img{width:100%}
.prod__body{padding:clamp(1.5rem,3vw,2rem);display:flex;flex-direction:column;flex:1}
.prod__k{
  font-size:.6875rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);font-variant-numeric:tabular-nums;
}
.prod h3{margin:.7rem 0 .2rem}
.prod__for{color:var(--fg);font-size:.9375rem;font-weight:500;margin-bottom:1rem}
.prod p.prose{font-size:.9375rem;margin-bottom:1.5rem}
.prod .table{margin-top:auto}
.prod .table > div{padding:.85rem 0}
@media (min-width:34rem){.prod .table > div{grid-template-columns:8.5rem 1fr;gap:1rem}}
.prod .table dd{font-size:.875rem}

/* --- 05 Les engagements ------------------------------------------------- */
.pledges{display:grid;margin-top:clamp(2.5rem,5vw,3.5rem);border-top:1px solid var(--line)}
@media (min-width:52rem){.pledges{grid-template-columns:1fr 1fr}}
.pledge{padding:clamp(1.75rem,3vw,2.25rem) 0;border-bottom:1px solid var(--line)}
@media (min-width:52rem){
  .pledge{padding:2.25rem clamp(1.5rem,3vw,2.5rem) 2.25rem 0}
  .pledge:nth-child(even){border-left:1px solid var(--line);padding-left:clamp(1.5rem,3vw,2.5rem);padding-right:0}
}
.pledge svg{width:1.25rem;height:1.25rem;stroke:var(--gold);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round;margin-bottom:1rem}
.pledge h3{margin-bottom:.7rem;font-size:clamp(1.15rem,1.05rem + .35vw,1.35rem)}
.pledge p{color:var(--fg-2);font-size:.9375rem;max-width:52ch}

/* --- 06 Liste d'attente ------------------------------------------------- */
.signup{display:grid;gap:clamp(2rem,4vw,3rem);margin-top:clamp(2rem,4vw,3rem)}
@media (min-width:64rem){.signup{grid-template-columns:1fr 1fr;gap:4.5rem;align-items:start}}
.form{display:grid;gap:.75rem;max-width:32rem}
@media (min-width:28rem){.form{grid-template-columns:1fr auto}}
.form input[type=email]{
  width:100%;padding:.95rem 1.1rem;
  border:1px solid var(--line-2);background:var(--bg-2);color:var(--fg);
  font:inherit;font-size:.9375rem;
}
.form input[type=email]::placeholder{color:var(--fg-2);opacity:1}
.form input[type=email]:focus-visible{outline-offset:0;border-color:var(--gold)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form-note{margin-top:1.1rem;max-width:44ch;font-size:.8125rem;color:var(--fg-2)}
.form-msg{margin-top:1rem;min-height:1.5em;font-size:.9375rem;font-weight:500}
.form-msg[data-state=ok]{color:#79D3A1}
.form-msg[data-state=err]{color:#EC9B9B}

/* --- Pied de page ------------------------------------------------------- */
.site-footer{border-top:1px solid var(--line);padding-block:clamp(3rem,6vw,4.5rem);font-size:.875rem;color:var(--fg-2)}
.footer__top{display:grid;gap:2.5rem;padding-bottom:2.5rem;border-bottom:1px solid var(--line)}
@media (min-width:48rem){.footer__top{grid-template-columns:1.4fr 1fr 1fr;gap:3rem}}
.footer__brand{color:var(--fg);font-size:1rem;font-weight:600}
.footer__tag{
  margin-top:.6rem;color:var(--gold);
  font-size:.75rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
}
.footer h2{
  font-size:.6875rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--fg-2);margin-bottom:1rem;
}
.social{display:flex;flex-wrap:wrap;gap:.15rem;margin-left:-.55rem}
.social a{display:grid;place-items:center;width:2.25rem;height:2.25rem;color:var(--fg-2);transition:color var(--t),background var(--t)}
.social a:hover{color:var(--gold);background:var(--bg-2)}
.social svg{width:1.05rem;height:1.05rem;fill:currentColor}
.contact a{color:var(--fg);text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:.15rem}
.contact a:hover{color:var(--gold)}
.footer__bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;padding-top:1.75rem;font-size:.8125rem}
.footer-langs{display:flex;flex-wrap:wrap;gap:.15rem;margin-left:-.6rem}
.footer-langs a{padding:.3rem .6rem;text-decoration:none;color:var(--fg-2);transition:color var(--t),background var(--t)}
.footer-langs a:hover{color:var(--fg);background:var(--bg-2)}
.footer-langs a[aria-current=true]{color:var(--gold);font-weight:600}

/* --- Apparition au défilement ------------------------------------------ */
.js .reveal{opacity:0;transform:translateY(14px)}
.js .reveal.is-in{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .6s var(--ease)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* --- Page racine de détection (sans mise en page) ----------------------- */
.redirect{max-width:26rem;margin:22vh auto;padding:0 1.5rem;text-align:center}
.redirect ul{display:flex;flex-wrap:wrap;justify-content:center;gap:.25rem;margin-top:1.5rem}
.redirect a{display:block;padding:.5rem .8rem;text-decoration:none;color:var(--fg-2)}
.redirect a:hover{color:var(--gold)}