/* FORGE FP — transcription de 02_accueil_valide.png (08/10/2026)
   Aucun service externe, aucune image raster, Arial uniquement. */
:root {
  --navy: #09255f;
  --deep-blue: #0A4C9B;
  --royal: #075FF3;
  --turquoise: #00B3B3;
  --orange: #FF8A00;
  --hairline: #D1E3F9;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { margin:0; background: #fff; }
body { margin:0; font-family: Arial, Helvetica, sans-serif; color:var(--navy); -webkit-font-smoothing: antialiased; }
a { color:inherit; }
a:focus-visible { outline: 3px solid var(--orange); outline-offset:5px; border-radius:3px; }
.page-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: 156px minmax(0, 1fr) 136px;
  overflow: hidden;
  position: relative;
  background: radial-gradient(ellipse 38% 25% at 3% 7%, rgba(224,243,255,.18),transparent 75%),#fff;
}
.site-header { position:relative; z-index: 3; }
.header-inner {
  width: min(1280px, calc(100% - 112px));
  height:100%; margin:0 auto;
  display:flex; justify-content:space-between; align-items:flex-start;
}
.brand { display:flex; align-items:center; gap:14px; margin-top:39px; }
.brand-wheel { display:block; width:84px; height:91px; flex:none; }
.brand-wheel img { display:block; width:84px; height:84px; }
.brand-title { text-decoration:none; display:flex; flex-direction:column; margin-top:-1px; }
.brand-line { font-size:43px; font-weight:700; color:#0A4C9B; letter-spacing:.3px; line-height:1.05; white-space:nowrap; }
.brand-fp { color:#FF7800; }
.brand-subtitle { font-size:14px; font-weight:400; color:#0755D7; margin-top:3px; white-space:nowrap; }
.top-nav { margin-top:69px; display:flex; align-items:center; gap:46px; white-space:nowrap; }
.top-nav a { text-decoration:none; color:#002A7A; font-size:16px; line-height:1.25; }
.top-nav a:hover, .site-footer a:hover { color:#0871EC; text-decoration: underline; text-underline-offset:5px; }
.main-content { display:grid; grid-template-rows:minmax(0,1fr) 164px; min-height:0; }
.hero { position:relative; min-height:0; isolation:isolate; }
.hero-inner { width:min(1280px, calc(100% - 112px)); height:100%; margin:auto; position:relative; }
.hero-copy { position:relative; z-index:1; padding-top:54px; max-width:640px; }
.eyebrow { color:#0476F6; font-size:16px; font-weight:400; letter-spacing:3.35px; line-height:1.45; margin:0 0 32px; }
h1 { font-size:67px; line-height:1.04; letter-spacing:-2px; font-weight:700; color:#061D58; margin:0; white-space:nowrap; }
h1 span { color:#0663EE; }
.hero-description { font-size:19px; line-height:1.43; color:#173C86; margin:29px 0 0; max-width:590px; letter-spacing:.02px; }
.ornamental-bubble { position:absolute; pointer-events:none; z-index:-1; background:radial-gradient(circle at 56% 50%, #DFEFFD 0, #E9F4FF 70%, transparent 100%); opacity:.5; border-radius:50%; }
.bubble-left { width:175px; height:257px; left:-114px; top:91px; }
.hero-visual { position:absolute; z-index:0; right:-48px; top:-28px; width:700px; height:670px; }
.hero-visual::before { content:"";position:absolute; z-index:-1; left:8.14%; top:-11.8%;width:18.86%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 50% 50%, #E2F0FF 0%, #EAF5FF 86%, rgba(230,244,255,.65) 100%); opacity:.83;pointer-events:none; }
.network-illustration { display:block; width:100%; height:100%; }
.hero-wheel-hotspot { display:block; position:absolute; width:37.14%; height:38.81%; border-radius:50%; left:33.57%; top:27.31%; /* invisible portal */ }
.hero-wheel-hotspot:focus-visible { outline: 3px solid #FF8A00; outline-offset:5px; }
.pillars { min-height:0; position:relative; z-index:1; }
.pillars-inner {
  width:min(1374px, calc(100% - 32px)); margin-left:16px; margin-right:auto;
  height:100%; display:grid; grid-template-columns:repeat(5,1fr); align-items:start;
  padding-top:24px;
}
.pillar { display:flex; flex-direction:column; align-items:center; position:relative; gap:13px; min-width:0; color:#0665E8; }
.pillar:not(:last-child)::after { content:""; position:absolute; width:1px; height:110px; background:#C8DDF7; right:0; top:0; }
.pillar:nth-child(2) { color:#00A7C1; }
.pillar-orange { color:#FF7800; }
.pillar-teal { color:#00A9C4; }
.pillar-icon { width:54px; height:54px; filter:drop-shadow(0 3px 2px rgba(20,118,218,.08)); }
.pillar span { color:#042A79; text-align:center; font-size:15px; letter-spacing:1.9px; line-height:1.5; font-weight:400; white-space:nowrap; }
.site-footer { border-top:1px solid var(--hairline); position:relative; z-index:1; background:linear-gradient(180deg,rgba(240,248,255,.55),rgba(255,255,255,.4)); }
.footer-inner { width:min(1352px, calc(100% - 96px)); margin:0 auto; display:flex; justify-content:space-between; align-items:flex-start; padding-top:28px; font-size:13px; color:#5670B1; }
.site-footer nav { display:flex; align-items:center; gap:0; }
.site-footer nav a { text-decoration:none; padding:0 24px; line-height:16px; border-right:1px solid #A8C4EF; }
.site-footer nav a:last-child { padding-right:0; border-right:0; }
/* Compact notebook/desktop screens: all sections stay within the viewport. */
@media (min-width: 981px) and (max-height: 990px) {
  .page-shell { grid-template-rows: 109px minmax(0,1fr) 80px; }
  .brand {margin-top:20px; gap:10px;}
  .brand-wheel, .brand-wheel img {width:70px;height:70px;}
  .brand-line {font-size:35px;}
  .brand-subtitle {font-size:12px;}
  .top-nav {margin-top:44px;}
  .main-content {grid-template-rows:minmax(0,1fr) 146px;}
  .hero-copy {padding-top:35px;max-width:565px;}
  .eyebrow {font-size:13.8px;letter-spacing:2.6px;margin-bottom:21px;}
  h1 {font-size:clamp(46px,4.25vw,60px);letter-spacing:-1.6px;line-height:1.055;}
  .hero-description {font-size:17px;line-height:1.42;max-width:557px;margin-top:20px;}
  .hero-visual {width: min(670px,51vw);height:auto;aspect-ratio:700/670;top:-32px;right:-43px;}
  .hero-wheel-hotspot {width:37.14%; height:38.81%;left:33.57%;top:27.31%;}
  .pillars-inner {padding-top:12px;}
  .pillar-icon {width:46px;height:46px;}
  .pillar {gap:10px;}
  .pillar span {font-size:13px;letter-spacing:1.55px;line-height:1.45;}
  .pillar:not(:last-child)::after {height:95px;}
  .footer-inner {padding-top:24px;font-size:12px;}
}
@media (min-width:981px) and (max-height:820px) {
  .page-shell { grid-template-rows: 88px minmax(0,1fr) 60px; }
  .main-content {grid-template-rows:minmax(0,1fr) 126px;}
  .brand {margin-top:12px;}
  .brand-wheel, .brand-wheel img {width:62px;height:62px;}
  .brand-line {font-size:33px;}
  .brand-subtitle {font-size:11.5px;}
  .top-nav {margin-top:35px;gap:33px;}
  .top-nav a {font-size:14px;}
  .hero-copy {padding-top:26px;max-width:545px;}
  .eyebrow {font-size:12.4px;letter-spacing:2.3px;margin-bottom:20px;}
  h1 {font-size:clamp(45px,4.05vw,57px);line-height:1.052;letter-spacing:-1.75px;}
  .hero-description {font-size:16px;line-height:1.35;margin-top:17px;max-width:545px;}
  .hero-visual {width:min(615px,48vw);top:-32px;right:-32px;}
  .pillars-inner {padding-top:14px;}
  .pillar-icon {width:42px;height:42px;}
  .pillar span {font-size:12px;letter-spacing:1.35px;}
  .pillar:not(:last-child)::after {height:81px;}
  .footer-inner {padding-top:18px;}
}
/* Tablet: dynamic stacking and bottom flow */
@media (max-width:980px) {
  .page-shell {display:flex;flex-direction:column;overflow:visible;min-height:100dvh;}
  .main-content {display:block;}
  .header-inner,.hero-inner,.pillars-inner {width:min(100% - 48px,860px);}
  .site-header {min-height:110px;}
  .brand {margin-top:21px;}
  .brand-wheel,.brand-wheel img {width:65px;height:65px;}
  .brand-line {font-size:32px;}
  .brand-subtitle {font-size:11px;}
  .top-nav {margin-top:50px;gap:18px;}
  .top-nav a {font-size:13px;}
  .hero {min-height:695px;}
  .hero-inner {height:auto;min-height:690px;}
  .hero-copy {padding-top:30px;max-width:560px;}
  .eyebrow {font-size:13.5px;letter-spacing:2.4px;margin-bottom:22px;}
  h1 {font-size:clamp(44px,6vw,59px);letter-spacing:-1.5px;}
  .hero-description {font-size:16px;line-height:1.5;max-width:540px;margin-top:22px;}
  .hero-visual {right:-24px;top:280px;width:min(600px,78vw);height:auto;aspect-ratio:700/670;opacity:.99;}
  .hero-wheel-hotspot {width:37.14%;height:38.81%;left:33.57%;top:27.31%;}
  .pillars {padding:20px 0 34px;}
  .pillars-inner {grid-template-columns:repeat(5,1fr);padding-top:0;}
  .pillar-icon {width:42px;height:42px;}
  .pillar span {font-size:11px;letter-spacing:.8px;}
  .pillar:not(:last-child)::after {height:88px;}
  .site-footer {min-height:60px;}
  .footer-inner {width:calc(100% - 48px);padding-top:24px;font-size:11px;}
  .site-footer nav a {padding:0 12px;}
}
@media (max-width:650px) {
  .header-inner,.hero-inner,.pillars-inner {width:calc(100% - 36px);}
  .site-header {min-height:120px;}
  .header-inner {display:flex;flex-direction:column;justify-content:flex-start;gap:14px;}
  .brand {margin-top:14px;gap:8px;}
  .brand-wheel,.brand-wheel img {width:58px;height:58px;}
  .brand-line {font-size:29px;}
  .brand-subtitle {font-size:10px;}
  .top-nav {margin:0 0 12px auto;gap:17px;}
  .top-nav a {font-size:12px;}
  .hero {min-height:810px;}
  .hero-inner {min-height:810px;}
  .hero-copy {padding-top:25px;}
  .eyebrow {font-size:10.5px;letter-spacing:1.9px;line-height:1.55;margin-bottom:22px;}
  h1 {font-size:clamp(30px,7.7vw,48px);letter-spacing:-1px;line-height:1.095;white-space:normal;}
  .hero-description {font-size:15px;line-height:1.48;margin-top:20px;}
  .hero-visual {left:50%;top:382px;right:auto;transform:translateX(-50%);width:min(585px,100vw);height:auto;}
  .pillars {padding:30px 0;}
  .pillars-inner {grid-template-columns:repeat(2,1fr);row-gap:28px;justify-items:stretch;}
  .pillar {gap:7px;}
  .pillar:not(:last-child)::after {display:none;}
  .pillar:last-child {grid-column:1/-1;}
  .pillar span {font-size:11px;letter-spacing:1px;}
  .footer-inner {width:calc(100% - 32px);min-height:88px;display:flex;flex-direction:column;gap:18px;align-items:center;padding-top:20px;padding-bottom:18px;font-size:11px;}
  .site-footer nav a {padding:0 11px;}
}
@media (max-width:380px) {
  .brand-line {font-size:26px;}
  .top-nav {gap:12px;}
  .top-nav a {font-size:11px;}
  .hero {min-height:775px;}
  .hero-inner {min-height:775px;}
  .hero-visual {top:410px;}
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after {scroll-behavior:auto!important;animation:none!important;transition:none!important;} }