/* =====================================================================
   RAYOR — Page d'accueil · Refonte « Style Suisse » (International Typographic Style)
   2026-06-27. Tout est scopé sous .rayor-home + body.page-home pour ne PAS
   impacter les pages outils. Tokens de base hérités de newstyles.css.
   Principes : grille, grotesque Helvetica (stack système, 0 web-font),
   encre/papier + un seul accent rouge, filets 1px, aplats, survol par inversion.
   Compatible thème clair/sombre via les variables locales ci-dessous.
   ===================================================================== */

/* Palette locale définie sur body.page-home pour couvrir AUSSI la navbar et
   le footer (rendus hors de .rayor-home). Bascule sombre via html.dark. */
body.page-home{
  --ink:#0a0a0a;            /* encre */
  --ground:#ffffff;         /* papier */
  --panel:#ffffff;          /* surface des blocs */
  --accent:#8e0004;         /* rouge OFFICIEL Rayor (#8e0004) */
  --line:rgba(10,10,10,.14);     /* filet discret */
  --rule:rgba(10,10,10,.92);     /* filet fort (règles de grille) */
  --soft:rgba(10,10,10,.58);     /* texte secondaire */
  --maxw:1240px;
  --gutter:clamp(18px,5vw,64px);
  --font:"Helvetica Neue",Helvetica,Arial,"Inter","Segoe UI",system-ui,sans-serif;
  --mono:"SFMono-Regular",ui-monospace,Menlo,Consolas,monospace;
  background:var(--ground);
}
html.dark body.page-home{
  --ink:#f4f4f4;
  --ground:#0b0b0c;
  --panel:#101013;
  --accent:#e23b3f;         /* rouge Rayor éclairci pour lisibilité sur fond sombre */
  --line:rgba(255,255,255,.16);
  --rule:rgba(255,255,255,.92);
  --soft:rgba(255,255,255,.62);
  background:var(--ground);
}
.rayor-home{
  width:100%;
  overflow-x:clip;
  color:var(--ink);
  background:var(--ground);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* Force la grotesque suisse sur TOUTE la page (newstyles.css impose Nunito au
   niveau élément p/span/a/li/button — on le bat ici). Le monospace voulu
   (.rh-type, .mono, swatches…) garde une spécificité supérieure et survit. */
body.page-home,
body.page-home p, body.page-home span, body.page-home li,
body.page-home a, body.page-home button, body.page-home input,
body.page-home textarea, body.page-home select,
body.page-home h1, body.page-home h2, body.page-home h3,
body.page-home h4, body.page-home h5, body.page-home h6{
  font-family:var(--font);
}

.rayor-home *{ box-sizing:border-box; }
.rayor-home .rh-wrap{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding-inline:var(--gutter);
}
.rayor-home section{ position:relative; }
.rayor-home a{ color:inherit; text-decoration:none; }

/* Neutralise les décors « non-suisses » du markup existant */
.rayor-home .rh-aurora,
.rayor-home .feat-glow{ display:none !important; }
.rayor-home .rh-grad-text{
  background:none !important;
  -webkit-text-fill-color:currentColor;
  color:var(--accent);
}

/* =================== NAVBAR (scopée à la home) =================== */
body.page-home .navbar{
  background:var(--ground);
  border-bottom:1px solid var(--rule);
  backdrop-filter:none;
  box-shadow:none;
  font-family:var(--font);
  padding-inline:var(--gutter);
}
body.page-home .navbar .nav-links a,
body.page-home .navbar .nav-links li > a{
  font-family:var(--font);
  font-weight:600;
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--ink);
}
body.page-home .navbar .nav-links a:hover{ color:var(--accent); }
body.page-home .navbar .nav-cta{
  background:var(--ink) !important;
  color:var(--ground) !important;
  border-radius:0 !important;
  padding:.62rem 1.15rem !important;
  font-weight:700 !important;
  letter-spacing:.05em;
  text-transform:uppercase;
  font-size:.78rem;
  border:1px solid var(--ink);
  box-shadow:none !important;
  transition:background .15s,color .15s,border-color .15s;
}
body.page-home .navbar .nav-cta:hover{ background:var(--accent) !important; border-color:var(--accent); color:#fff !important; transform:none; filter:none; }
body.page-home .navbar #theme-toggle{
  background:transparent !important;
  border:1px solid var(--rule) !important;
  border-radius:0 !important;
  width:38px !important; height:38px !important;
  color:var(--ink) !important;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .15s,color .15s !important;
}
body.page-home .navbar #theme-toggle:hover{
  background:var(--ink) !important; color:var(--ground) !important; transform:none !important;
}
body.page-home .navbar #theme-toggle svg{ width:17px; height:17px; display:block; }

/* =================== HERO =================== */
.rayor-home .rh-hero{
  padding:clamp(3.5rem,8vw,7rem) 0 clamp(2.5rem,5vw,4rem);
  border-bottom:1px solid var(--rule);
}
.rayor-home .rh-hero .rh-wrap{ max-width:var(--maxw); }
.rayor-home .rh-hero-badge{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em;
  color:var(--ink);
  border:1px solid var(--rule);
  border-radius:0;
  padding:.4rem .7rem;
  background:transparent;
}
.rayor-home .rh-hero-badge .dot{ display:none; }
.rayor-home .rh-title{
  font-family:var(--font);
  font-weight:800;
  font-size:clamp(2.6rem,1rem + 7vw,6.2rem);
  line-height:.96;
  letter-spacing:-.035em;
  margin:1.6rem 0 0;
  max-width:16ch;
  text-wrap:balance;
}
.rayor-home .rh-sub{
  font-size:clamp(1.05rem,.9rem + .6vw,1.35rem);
  line-height:1.45;
  color:var(--soft);
  max-width:54ch;
  margin:1.5rem 0 0;
  font-weight:400;
}
.rayor-home .rh-type{
  font-family:var(--mono);
  font-size:.92rem;
  color:var(--ink);
  margin-top:1.1rem;
  min-height:1.4em;
  letter-spacing:0;
}
.rayor-home .rh-type .cursor{ color:var(--accent); font-weight:700; }
.rayor-home .rh-cta-row{
  display:flex; flex-wrap:wrap; gap:.8rem;
  margin-top:2.2rem;
}
.rayor-home .rh-btn,
.rayor-home .rh-btn-ghost{
  display:inline-flex; align-items:center; gap:.55rem;
  font-weight:700; font-size:.9rem; letter-spacing:.03em; text-transform:uppercase;
  padding:.95rem 1.5rem;
  border-radius:0;
  border:1px solid var(--ink);
  transition:background .15s,color .15s,border-color .15s,transform .05s;
}
.rayor-home .rh-btn{ background:var(--ink); color:var(--ground); }
.rayor-home .rh-btn:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }
.rayor-home .rh-btn-ghost{ background:transparent; color:var(--ink); }
.rayor-home .rh-btn-ghost:hover{ background:var(--ink); color:var(--ground); }
.rayor-home .rh-btn:active,
.rayor-home .rh-btn-ghost:active{ transform:translateY(1px); }
.rayor-home .rh-btn svg,
.rayor-home .rh-btn-ghost svg{ width:1.05em; height:1.05em; }

/* Bandeau de stats — façon ligne de données suisse */
.rayor-home .rh-stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin-top:3rem;
  border-top:1px solid var(--rule);
}
.rayor-home .rh-stat{
  display:flex; align-items:center; gap:.5rem;
  padding:1rem .2rem;
  font-size:.86rem; font-weight:600; color:var(--ink);
  border-right:1px solid var(--line);
}
.rayor-home .rh-stat:last-child{ border-right:0; }
.rayor-home .rh-stat b{ font-weight:800; }
.rayor-home .rh-stat svg{ width:1.1em; height:1.1em; color:var(--accent); }

/* =================== TITRES DE SECTION =================== */
.rayor-home section.rh-featured,
.rayor-home section.rh-catalog,
.rayor-home section.rh-why,
.rayor-home section.rh-journey,
.rayor-home section.rh-trust,
.rayor-home section.rh-faq{
  padding:clamp(3rem,6vw,5.5rem) 0;
  border-bottom:1px solid var(--rule);
}
.rayor-home .rh-head{ margin-bottom:2.6rem; max-width:var(--maxw); }
.rayor-home .rh-eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.14em;
  color:var(--soft);
  padding:0; border:0; border-radius:0; background:none;
}
.rayor-home .rh-eyebrow::before{
  content:""; width:22px; height:2px; border-radius:0;
  background:var(--accent);
}
.rayor-home .rh-h2{
  font-family:var(--font);
  font-size:clamp(1.8rem,1rem + 3vw,3.2rem);
  font-weight:800; letter-spacing:-.03em; line-height:1.02;
  margin:.9rem 0 .6rem;
  max-width:20ch; text-wrap:balance;
}
.rayor-home .rh-lead{
  font-size:1.02rem; color:var(--soft); max-width:62ch; line-height:1.55; font-weight:400;
}

/* =================== SERVICES PHARES (bento) =================== */
.rayor-home .rh-bento{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--rule);
  border-left:1px solid var(--line);
}
.rayor-home .feat{
  position:relative;
  display:flex; flex-direction:column;
  padding:1.6rem 1.5rem 1.4rem;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--panel);
  min-height:230px;
  transition:background .16s,color .16s;
}
.rayor-home .feat.feat-lg{ grid-column:span 2; }
.rayor-home .feat .feat-ico{
  display:inline-flex; width:34px; height:34px;
  color:var(--ink);
}
.rayor-home .feat .feat-ico svg{ width:30px; height:30px; }
.rayor-home .feat h3{
  font-size:1.15rem; font-weight:800; letter-spacing:-.01em;
  margin:1.1rem 0 .5rem; display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
}
.rayor-home .feat .feat-tag{
  font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em;
  color:var(--accent); border:1px solid currentColor; padding:.12rem .4rem;
}
.rayor-home .feat p{ font-size:.92rem; line-height:1.5; color:var(--soft); margin:0; }
.rayor-home .feat .feat-go{
  margin-top:auto; padding-top:1.1rem;
  font-size:.76rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  display:inline-flex; align-items:center; gap:.4rem; color:var(--ink);
}
.rayor-home .feat .feat-go svg{ width:1em; height:1em; transition:transform .16s; }
/* Survol = inversion (encre pleine) */
.rayor-home .feat:hover{ background:var(--ink); color:var(--ground); }
.rayor-home .feat:hover h3,
.rayor-home .feat:hover .feat-ico,
.rayor-home .feat:hover .feat-go{ color:var(--ground); }
.rayor-home .feat:hover p{ color:rgba(255,255,255,.72); }
.rayor-home .feat:hover .feat-tag{ color:#fff; }
.rayor-home .feat:hover .feat-go svg{ transform:translateX(4px); }

/* =================== CATALOGUE =================== */
.rayor-home .rh-toolbar{
  display:flex; flex-wrap:wrap; gap:1.2rem; align-items:center; justify-content:space-between;
  margin-bottom:2rem; padding-bottom:1.2rem;
  border-bottom:1px solid var(--rule);
}
.rayor-home .rh-search{
  display:inline-flex; align-items:center; gap:.6rem;
  flex:1 1 280px; max-width:420px;
  border:0; border-bottom:1px solid var(--rule);
  padding:.55rem .2rem;
}
.rayor-home .rh-search svg{ width:1.1em; height:1.1em; color:var(--soft); }
.rayor-home .rh-search input{
  border:0; outline:0; background:transparent; width:100%;
  font-family:var(--font); font-size:.98rem; color:var(--ink);
}
.rayor-home .rh-search input::placeholder{ color:var(--soft); }
.rayor-home .rh-chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.rayor-home .rh-chip{
  font-family:var(--font);
  font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  padding:.5rem .85rem;
  border:1px solid var(--rule); border-radius:0; background:transparent; color:var(--ink);
  cursor:pointer; transition:background .14s,color .14s;
}
.rayor-home .rh-chip:hover{ background:var(--line); }
.rayor-home .rh-chip.active{ background:var(--ink); color:var(--ground); border-color:var(--ink); }

.rayor-home .rh-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}
.rayor-home .svc{
  display:flex; gap:1rem; align-items:flex-start;
  padding:1.25rem 1.3rem;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--panel);
  transition:background .14s,color .14s;
}
.rayor-home .svc.is-hidden{ display:none; }
.rayor-home .svc-tile{
  flex:0 0 auto; width:46px; height:46px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line);
  background:var(--ground);
  overflow:hidden;
}
.rayor-home .svc-tile img{ width:30px; height:30px; object-fit:contain; }
.rayor-home .svc-tile .mono{ font-family:var(--mono); font-weight:700; font-size:1.05rem; color:var(--ink); }
.rayor-home .svc-body h4{ font-size:1rem; font-weight:800; margin:.05rem 0 .3rem; letter-spacing:-.01em; }
.rayor-home .svc-body p{ font-size:.85rem; line-height:1.45; color:var(--soft); margin:0 0 .55rem; }
.rayor-home .svc-cat{
  font-size:.64rem; font-weight:700; text-transform:uppercase; letter-spacing:.09em;
  color:var(--soft); border:1px solid var(--line); padding:.12rem .45rem; display:inline-block;
}
.rayor-home .svc:hover{ background:var(--ink); color:var(--ground); }
.rayor-home .svc:hover .svc-body h4{ color:var(--ground); }
.rayor-home .svc:hover .svc-body p{ color:rgba(255,255,255,.7); }
.rayor-home .svc:hover .svc-cat{ color:#fff; border-color:rgba(255,255,255,.4); }
.rayor-home .svc:hover .svc-tile{ background:#fff; }
.rayor-home .rh-empty{
  display:none; text-align:center; color:var(--soft); padding:2.5rem 0 0; font-size:.95rem;
}
.rayor-home .rh-empty.show{ display:block; }

/* =================== POURQUOI =================== */
.rayor-home .rh-why-grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--rule); border-left:1px solid var(--line);
}
.rayor-home .why-card{
  padding:1.6rem 1.4rem;
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
}
.rayor-home .why-ico{ display:inline-flex; color:var(--accent); }
.rayor-home .why-ico svg{ width:26px; height:26px; }
.rayor-home .why-card h3{ font-size:1.05rem; font-weight:800; margin:1rem 0 .5rem; letter-spacing:-.01em; }
.rayor-home .why-card p{ font-size:.9rem; line-height:1.5; color:var(--soft); margin:0; }

/* =================== COMMENT ÇA MARCHE =================== */
.rayor-home .rh-steps{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  border-top:1px solid var(--rule);
}
.rayor-home .step{
  padding:1.8rem 1.6rem 1.6rem;
  border-right:1px solid var(--line);
}
.rayor-home .step:last-child{ border-right:0; }
.rayor-home .step-n{
  font-family:var(--font); font-size:2.6rem; font-weight:800; line-height:1;
  color:var(--accent); display:block; letter-spacing:-.04em;
}
.rayor-home .step h4{ font-size:1.05rem; font-weight:800; margin:1rem 0 .5rem; }
.rayor-home .step p{ font-size:.9rem; line-height:1.5; color:var(--soft); margin:0; }

/* =================== CONFIANCE (marquee) =================== */
.rayor-home .rh-trust .rh-eyebrow{ margin-bottom:1.6rem; }
.rayor-home .rh-marquee{ overflow:hidden; border-block:1px solid var(--line); padding:1.4rem 0; }
.rayor-home .rh-mq-track{ display:flex; align-items:center; gap:3.5rem; width:max-content; animation:rh-mq 34s linear infinite; }
.rayor-home .rh-mq-track a{ flex:0 0 auto; opacity:.6; transition:opacity .2s; }
.rayor-home .rh-mq-track a:hover{ opacity:1; }
.rayor-home .rh-mq-track img{ height:30px; width:auto; filter:grayscale(1) contrast(.9); }
html.dark .rayor-home .rh-mq-track img{ filter:grayscale(1) brightness(0) invert(1) opacity(.8); }
@keyframes rh-mq{ to{ transform:translateX(-50%); } }

/* =================== FAQ =================== */
.rayor-home .rh-faq-list{ border-top:1px solid var(--rule); max-width:880px; }
.rayor-home .rh-faq-list details{ border-bottom:1px solid var(--line); }
.rayor-home .rh-faq-list summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.15rem .2rem;
  font-size:1.05rem; font-weight:700; letter-spacing:-.01em; color:var(--ink);
}
.rayor-home .rh-faq-list summary::-webkit-details-marker{ display:none; }
.rayor-home .rh-faq-list summary::after{
  content:"+"; font-family:var(--mono); font-size:1.3rem; color:var(--accent); font-weight:400; line-height:1;
}
.rayor-home .rh-faq-list details[open] summary::after{ content:"–"; }
.rayor-home .rh-faq-a{ padding:0 .2rem 1.2rem; font-size:.95rem; line-height:1.6; color:var(--soft); max-width:70ch; }

/* =================== CTA FINALE =================== */
.rayor-home .rh-cta{ padding:clamp(3rem,6vw,5.5rem) 0; }
.rayor-home .rh-cta-panel{
  background:var(--ink); color:var(--ground);
  padding:clamp(2.4rem,5vw,4rem);
  display:flex; flex-direction:column; align-items:flex-start; gap:1rem;
}
.rayor-home .rh-cta-panel h2{
  font-size:clamp(1.8rem,1rem + 3vw,3rem); font-weight:800; letter-spacing:-.03em; line-height:1.02; margin:0; max-width:18ch;
}
.rayor-home .rh-cta-panel p{ font-size:1.05rem; color:rgba(255,255,255,.72); max-width:54ch; margin:0; line-height:1.5; }
.rayor-home .rh-cta-panel .rh-btn{
  background:var(--accent); border-color:var(--accent); color:#fff; margin-top:.6rem;
}
.rayor-home .rh-cta-panel .rh-btn:hover{ background:#fff; border-color:#fff; color:var(--ink); }

/* =================== FOOTER (scopé à la home) =================== */
body.page-home .footer.site-footer{
  background:var(--ground,#fff);
  border-top:1px solid var(--rule);
  color:var(--ink);
  font-family:var(--font);
  box-shadow:none;
}
html.dark body.page-home .footer.site-footer{ background:#0b0b0c; }
body.page-home .footer .foot-col h4{
  text-transform:uppercase; letter-spacing:.1em; font-size:.74rem; font-weight:700; color:var(--accent);
}
body.page-home .footer .foot-col a,
body.page-home .footer .foot-brand p{ font-family:var(--font); }
body.page-home .footer .foot-col a:hover{ color:var(--accent); }
body.page-home .footer .foot-bottom{ border-top:1px solid var(--line); }

/* =================== FORMULAIRE CONTACT (scopé home) =================== */
body.page-home .contact-form{ font-family:var(--font); }
body.page-home .contact-form input,
body.page-home .contact-form textarea{
  border-radius:0; border:1px solid var(--rule,#0a0a0a);
}
body.page-home .contact-form button{ border-radius:0; background:#0a0a0a; color:#fff; text-transform:uppercase; letter-spacing:.05em; }

/* =================== RÉVÉLATION AU SCROLL =================== */
.rayor-home .reveal{ opacity:0; transform:translateY(14px); transition:opacity .5s ease,transform .5s ease; }
.rayor-home .reveal.in{ opacity:1; transform:none; }
.rayor-home .feat.reveal{ transition-delay:calc(var(--d,0) * 40ms); }
@media (prefers-reduced-motion:reduce){
  .rayor-home .reveal{ opacity:1; transform:none; transition:none; }
  .rayor-home .rh-mq-track{ animation:none; }
}

/* =================== RESPONSIVE =================== */
@media (max-width:980px){
  .rayor-home .rh-bento{ grid-template-columns:repeat(2,1fr); }
  .rayor-home .feat.feat-lg{ grid-column:span 2; }
  .rayor-home .rh-why-grid{ grid-template-columns:repeat(2,1fr); }
  .rayor-home .rh-stats{ grid-template-columns:repeat(2,1fr); }
  .rayor-home .rh-stat:nth-child(2){ border-right:0; }
  .rayor-home .rh-stat{ border-bottom:1px solid var(--line); }
}
@media (max-width:640px){
  .rayor-home .rh-bento{ grid-template-columns:1fr; }
  .rayor-home .feat.feat-lg{ grid-column:span 1; }
  .rayor-home .rh-why-grid{ grid-template-columns:1fr; }
  .rayor-home .rh-steps{ grid-template-columns:1fr; }
  .rayor-home .step{ border-right:0; border-bottom:1px solid var(--line); }
  .rayor-home .rh-toolbar{ flex-direction:column; align-items:stretch; }
  .rayor-home .rh-search{ max-width:none; }
}