/* ========================================================================== INTIS MAROC — v4 Valeurs issues de la charte officielle « Intis — Logotype / Charte graphique », 2015, révision 0.9 (Studio Sinok), page 5 (couleurs) et page 9 (polices). Aucune couleur inventée. Zéro dépendance externe. ========================================================================== */ :root{ /* --- couleurs officielles, valeurs RVB de la charte p.5 --- */ --pink: #AA3F67; /* Pink — rvb 170 63 103 */ --pink-mid: #D16187; /* Pink dark — rvb 209 97 135 */ --pink-light: #EB7196; /* Pink light — rvb 235 113 150 */ --gray-dark: #464757; /* Dark gray — rvb 70 71 87 */ --black: #000000; /* Black */ --white: #FFFFFF; /* White */ /* --- alias conservés pour ne pas réécrire toutes les règles --- */ --sun: var(--pink-mid); /* accent principal, actions */ --sun-deep: var(--pink); /* survol, fin de dégradé */ --teal: var(--pink-light); /* accent secondaire, données */ --sun-tint: rgba(209,97,135,.14); --teal-tint: rgba(235,113,150,.14); --ink: var(--gray-dark); --ink-2: #2B2C36; /* Dark gray assombri, surfaces */ --ink-3: #55566A; /* Dark gray éclairci, filets */ --paper: var(--white); /* --- fonds sombres : Noir officiel, et Dark gray à 20% par-dessus --- */ --void: #000000; --void-2: #0E0E11; /* --- police officielle : Cabin (charte p.9) --- */ --font-display: 'Cabin', 'Roboto', Helvetica, Arial, sans-serif; --font-body: 'Cabin', 'Roboto', Helvetica, Arial, sans-serif; --font-mono: 'Cabin', 'Roboto', Helvetica, Arial, sans-serif; --wrap: 1240px; --pad: clamp(20px, 5vw, 64px); } /* Cabin n'a pas de graisse « display » très serrée : on compense le crénage sur les grands titres pour garder la tenue de la maquette. */ .display, .h2, .phero h1{ font-weight:700; } *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ margin:0; background:var(--void); color:#EDEFF5; font-family:var(--font-body); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; /* clip et non hidden : hidden ferait de un conteneur de défilement et casserait tous les position:sticky de la page */ overflow-x:clip; } img{max-width:100%;display:block} ul{margin:0;padding:0;list-style:none} a{color:inherit} .wrap{ max-width:var(--wrap); margin:0 auto; padding-inline:var(--pad); } /* labels mono */ .label{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:var(--sun); display:inline-flex; align-items:center; gap:10px; } .label::before{ content:""; width:28px; height:1px; background:var(--sun); } .label.teal{ color:var(--teal); } .label.teal::before{ background:var(--teal); } /* titres */ .display{ font-family:var(--font-display); font-weight:700; line-height:.98; letter-spacing:-.035em; margin:0; color:#fff; font-size:clamp(2.6rem, 8.2vw, 7.2rem); } .h2{ font-family:var(--font-display); font-weight:600; line-height:1.04; letter-spacing:-.03em; margin:0; color:#fff; font-size:clamp(2rem, 5.2vw, 4rem); } .lede{ font-size:clamp(1rem,1.5vw,1.22rem); color:#A7AEC2; max-width:52ch; } /* ---------------- barre haute ---------------- */ .topbar{ position:fixed; inset:0 0 auto 0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:18px var(--pad); background:linear-gradient(180deg, rgba(22,24,31,.92), rgba(22,24,31,0)); backdrop-filter:blur(6px); } .topbar .mark{ width:34px;height:34px;color:#fff;flex-shrink:0 } .brandline{ display:flex; align-items:center; gap:12px; text-decoration:none; } .brandline b{ font-family:var(--font-display); font-weight:600; font-size:1.05rem; text-transform:lowercase; letter-spacing:-.01em; color:#fff; line-height:1; } .brandline span{ display:block; font-family:var(--font-mono); font-size:.55rem; letter-spacing:.16em; color:rgba(255,255,255,.45); margin-top:3px; } .progress{ position:fixed; top:0; left:0; height:2px; z-index:101; background:linear-gradient(90deg,var(--sun),var(--teal)); width:0%; } .top-cta{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:#fff; text-decoration:none; border:1px solid rgba(255,255,255,.28); padding:11px 20px; border-radius:999px; transition:background .2s,border-color .2s,color .2s; white-space:nowrap; } .top-cta:hover{ background:var(--sun); border-color:var(--sun); color:#fff; } @media (max-width:640px){ .brandline span{display:none} .top-cta{padding:9px 14px;font-size:.65rem} } /* ---------------- HERO : moment 1 ---------------- */ #hero{ height:280vh; position:relative; } .hero-stage{ position:sticky; top:0; height:100vh; overflow:hidden; display:grid; place-items:center; } #viz{ position:absolute; inset:0; width:100%; height:100%; } .hero-copy{ position:relative; z-index:2; width:100%; max-width:var(--wrap); padding-inline:var(--pad); pointer-events:none; } .hero-copy .label{ margin-bottom:22px; } .hero-copy .display{ max-width:14ch; } .hero-sub{ margin-top:26px; max-width:44ch; font-size:clamp(1rem,1.4vw,1.18rem); color:#B6BCCE; } /* les deux sous-titres se superposent : la hauteur doit tenir le plus long, sinon le texte passe sous les boutons sur petit écran */ .hero-subs{ position:relative; min-height:11em; } @media (min-width:600px){ .hero-subs{ min-height:8em } } @media (min-width:1000px){ .hero-subs{ min-height:6.5em } } .hero-actions{ margin-top:34px; display:flex; gap:14px; flex-wrap:wrap; pointer-events:auto; } .scrollhint{ position:absolute; bottom:26px; left:50%; transform:translateX(-50%); font-family:var(--font-mono); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.4); display:flex; flex-direction:column; align-items:center; gap:8px; z-index:3; } .scrollhint i{ display:block; width:1px; height:34px; background:linear-gradient(180deg,var(--sun),transparent); } /* fade des blocs de texte du hero pilotés en JS */ .hero-phase{ transition:none; } /* ---------------- boutons ---------------- */ .btn{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-body); font-weight:600; font-size:.95rem; padding:15px 28px; border-radius:999px; text-decoration:none; border:1px solid transparent; cursor:pointer; transition:transform .18s cubic-bezier(.2,.8,.2,1), background .2s, color .2s, border-color .2s; } .btn:hover{ transform:translateY(-2px); } .btn-fill{ background:var(--sun); color:#fff; } .btn-fill:hover{ background:#fff; color:var(--void); } .btn-line{ border-color:rgba(255,255,255,.3); color:#fff; } .btn-line:hover{ border-color:#fff; background:rgba(255,255,255,.06); } /* ---------------- marquee fichiers ---------------- */ .marquee{ border-block:1px solid rgba(255,255,255,.09); padding:26px 0; overflow:hidden; background:var(--void-2); } .marquee-track{ display:flex; gap:44px; width:max-content; will-change:transform; } .marquee-track span{ font-family:var(--font-mono); font-size:clamp(.9rem,1.6vw,1.25rem); color:rgba(255,255,255,.22); white-space:nowrap; display:inline-flex; align-items:center; gap:44px; } .marquee-track span::after{ content:"·"; color:var(--sun); } /* ---------------- SYMPTÔMES : moment 2 (épinglé) ---------------- */ #symptomes{ position:relative; } .pin-stage{ position:sticky; top:0; height:100vh; display:grid; place-items:center; overflow:hidden; } .pin-item{ position:absolute; inset:0; display:grid; place-items:center; padding-inline:var(--pad); text-align:center; opacity:0; transform:translateY(38px); pointer-events:none; } .pin-item.on{ opacity:1; transform:translateY(0); pointer-events:auto; } .pin-item{ transition:opacity .45s ease, transform .55s cubic-bezier(.2,.8,.2,1); } .pin-item .n{ font-family:var(--font-mono); font-size:.75rem; letter-spacing:.24em; color:var(--sun); display:block; margin-bottom:20px; } .pin-item h3{ font-family:var(--font-display); font-weight:600; letter-spacing:-.03em; line-height:1.02; font-size:clamp(1.9rem,5.4vw,4.2rem); color:#fff; margin:0 auto; max-width:18ch; } .pin-item p{ margin:22px auto 0; max-width:44ch; color:#98A0B6; font-size:1.02rem; } .pin-rail{ position:absolute; left:var(--pad); top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:10px; } .pin-rail i{ width:2px; height:30px; background:rgba(255,255,255,.14); display:block; transition:background .3s; } .pin-rail i.on{ background:var(--sun); } @media (max-width:760px){ .pin-rail{ display:none } } /* ---------------- PILIERS (colonne collante) ---------------- */ #piliers{ padding:clamp(80px,12vh,150px) 0; } .pil-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(30px,6vw,90px); align-items:start; } .pil-sticky{ position:sticky; top:22vh; } .pil-big{ font-family:var(--font-display); font-weight:700; letter-spacing:-.04em; font-size:clamp(4.5rem,13vw,11rem); line-height:.82; color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.22); display:block; } .pil-cur{ margin-top:18px; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.2em; color:var(--teal); text-transform:uppercase; } .pil-list{ display:grid; } .pil{ padding:clamp(34px,6vh,64px) 0; border-top:1px solid rgba(255,255,255,.1); opacity:.32; transition:opacity .4s ease; } .pil:last-child{ border-bottom:1px solid rgba(255,255,255,.1); } .pil.on{ opacity:1; } .pil h3{ font-family:var(--font-display); font-weight:600; letter-spacing:-.02em; font-size:clamp(1.5rem,3vw,2.3rem); color:#fff; margin:0 0 14px; } .pil p{ margin:0; color:#98A0B6; max-width:50ch; } .pil .bar{ height:2px; background:rgba(255,255,255,.1); margin-top:26px; overflow:hidden; } .pil .bar i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--sun),var(--teal)); transition:width .9s cubic-bezier(.2,.8,.2,1); } .pil.on .bar i{ width:100%; } @media (max-width:900px){ .pil-grid{ grid-template-columns:1fr; } .pil-sticky{ position:static; } .pil-big{ font-size:clamp(3.4rem,18vw,5rem); } } /* ---------------- BASCULE : moment 3 (volet au scroll) ---------------- */ #bascule{ height:260vh; position:relative; } .bas-stage{ position:sticky; top:0; height:100vh; overflow:hidden; } .bas-panel{ position:absolute; inset:0; display:grid; place-items:center; padding-inline:var(--pad); } .bas-before{ background:var(--void-2); } .bas-after{ background:linear-gradient(135deg,var(--sun-deep),var(--sun)); clip-path:inset(0 100% 0 0); } .bas-inner{ width:100%; max-width:var(--wrap); } .bas-inner .label{ margin-bottom:26px; } .bas-after .label{ color:#fff } .bas-after .label::before{ background:#fff } .bas-rows{ display:grid; gap:0; margin-top:34px; } .bas-row{ display:grid; grid-template-columns:minmax(120px,.5fr) 1fr; gap:clamp(16px,4vw,50px); padding:clamp(12px,2.2vh,22px) 0; border-top:1px solid rgba(255,255,255,.12); align-items:baseline; } .bas-row dt{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.5); } .bas-after .bas-row dt{ color:rgba(255,255,255,.7) } .bas-row dd{ margin:0; font-family:var(--font-display); font-weight:500; letter-spacing:-.02em; font-size:clamp(1.05rem,2.3vw,1.75rem); color:#fff; } .bas-before .bas-row dd{ color:#7C8399; } .bas-seam{ position:absolute; top:0; bottom:0; width:2px; background:#fff; left:0; box-shadow:0 0 24px rgba(255,255,255,.6); opacity:0; } /* ---------------- IA ---------------- */ #ia{ padding:clamp(80px,14vh,170px) 0; background:var(--void-2); border-block:1px solid rgba(255,255,255,.08); } .ia-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,6vw,80px); align-items:center; } @media (max-width:900px){ .ia-grid{ grid-template-columns:1fr } } .term{ border:1px solid rgba(255,255,255,.12); background:var(--void); border-radius:14px; overflow:hidden; font-family:var(--font-mono); font-size:.92rem; } .term-bar{ display:flex; align-items:center; gap:7px; padding:12px 16px; border-bottom:1px solid rgba(255,255,255,.1); } .term-bar i{ width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.18);display:block } .term-bar em{ font-style:normal; margin-left:8px; font-size:.68rem; letter-spacing:.14em; color:rgba(255,255,255,.35); text-transform:uppercase } .term-body{ padding:24px 22px; min-height:290px; } .term-q{ color:#fff; margin:0 0 22px; } .term-q::before{ content:"› "; color:var(--sun); } .term-a{ color:#A7AEC2; margin:0; line-height:1.75; } .term-a b{ color:var(--teal); font-weight:500; } .caret{ display:inline-block; width:8px; height:1.05em; background:var(--sun); vertical-align:-2px; animation:blink 1s steps(2) infinite; } @keyframes blink{ 50%{opacity:0} } .ia-points{ display:grid; gap:26px; margin-top:36px; } .ia-points li{ display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start; } .ia-points .dot{ width:7px;height:7px;border-radius:50%;background:var(--teal);margin-top:11px } .ia-points b{ display:block; color:#fff; font-weight:600; font-size:1.02rem; } .ia-points span{ color:#98A0B6; font-size:.95rem; } /* ---------------- CTA ---------------- */ #cta{ background:linear-gradient(135deg,var(--sun) 0%,var(--sun-deep) 100%); padding:clamp(90px,16vh,180px) 0; } #cta .h2{ max-width:16ch; } #cta p{ color:rgba(255,255,255,.9); max-width:46ch; font-size:1.1rem; } .cta-list{ display:flex; gap:clamp(20px,4vw,50px); flex-wrap:wrap; margin:38px 0 44px; } .cta-list li{ max-width:24ch; } .cta-list b{ display:block; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.18em; color:rgba(255,255,255,.75); text-transform:uppercase; margin-bottom:8px; } .cta-list span{ color:#fff; font-weight:500; } #cta .btn-fill{ background:#fff; color:var(--sun-deep); } #cta .btn-fill:hover{ background:var(--void); color:#fff; } /* ---------------- pied ---------------- */ .foot{ padding:70px 0 40px; } .foot-top{ display:flex; justify-content:space-between; gap:34px; flex-wrap:wrap; align-items:flex-end; } .foot nav{ display:flex; gap:26px; flex-wrap:wrap; } .foot nav a{ color:#98A0B6; text-decoration:none; font-size:.92rem; } .foot nav a:hover{ color:#fff; } .foot-stack{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; } .chip{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.1em; border:1px solid rgba(255,255,255,.16); color:rgba(255,255,255,.55); padding:8px 16px; border-radius:999px; white-space:nowrap; } .foot-bot{ margin-top:44px; padding-top:22px; border-top:1px solid rgba(255,255,255,.1); display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:.78rem; color:#6E7689; } .note{ margin-top:26px; border:1px dashed rgba(255,255,255,.2); border-radius:10px; padding:16px 20px; font-size:.84rem; color:#8A92A8; } .note b{ color:#fff; } /* ---------------- apparitions ---------------- */ .up{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .8s cubic-bezier(.2,.8,.2,1); } .up.in{ opacity:1; transform:none; } .up.d1{ transition-delay:.08s } .up.d2{ transition-delay:.16s } .up.d3{ transition-delay:.24s } /* ---------------- schémas animés (flux + scénarios) ---------------- */ .diag{ padding:clamp(80px,13vh,160px) 0; } .diag-head{ max-width:56ch; margin-bottom:clamp(36px,6vh,64px); } .diag-head .h2{ margin-top:18px } .diag-head p{ color:#98A0B6; margin:18px 0 0 } .svg-scene{ width:100%; height:auto; display:block; overflow:visible; } .n-box{ fill:rgba(255,255,255,.04); stroke:rgba(255,255,255,.16); } .n-box.core{ fill:rgba(209,97,135,.14); stroke:var(--sun); } .n-box.out{ fill:rgba(235,113,150,.10); stroke:rgba(235,113,150,.55); } .n-t{ font-family:var(--font-body); font-size:19px; font-weight:600; fill:#EDEFF5; } .n-s{ font-family:var(--font-mono); font-size:13px; letter-spacing:.14em; fill:rgba(255,255,255,.42); text-transform:uppercase; } .n-t.core{ fill:#fff } .n-s.core{ fill:var(--pink-light) } .n-t.out{ fill:#fff } .n-s.out{ fill:var(--pink-light) } .wire{ fill:none; stroke:rgba(255,255,255,.22); stroke-width:1.5; } .wire.hot{ stroke:var(--sun); stroke-width:2; } .wire.cool{ stroke:var(--teal); stroke-width:2; } .spark{ fill:var(--sun); } .spark.cool{ fill:var(--teal); } .sc-lab{ font-family:var(--font-mono); font-size:15px; letter-spacing:.08em; fill:rgba(255,255,255,.55) } .sc-val{ font-family:var(--font-display); font-size:30px; font-weight:600; fill:#fff } .sc-val.up{ fill:var(--teal) } .sc-val.down{ fill:var(--sun) } .diag-note{ margin-top:34px; font-family:var(--font-mono); font-size:.74rem; letter-spacing:.1em; color:rgba(255,255,255,.3); text-transform:uppercase; } /* ---------------- accessibilité mouvement ---------------- */ @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; } #hero{ height:auto } .hero-stage{ position:static; height:auto; padding:26vh 0 12vh } /* sans parent positionné, le canevas se détacherait sur toute la page */ #viz{ display:none } .hero-phase{ position:static !important; opacity:1 !important } .hero-phase[data-phase="b"]{ display:none } .hero-copy > div{ min-height:0 !important } #bascule{ height:auto } .bas-stage{ position:static; height:auto } .bas-panel{ position:static; padding-block:60px } .bas-after{ clip-path:none } #symptomes{ height:auto !important } .pin-stage{ position:static; height:auto; padding-block:40px } .pin-item{ position:static; opacity:1; transform:none; padding-block:40px } .up{ opacity:1; transform:none } .marquee-track{ transform:none !important } .wire, .sc-wire{ stroke-dasharray:none !important; stroke-dashoffset:0 !important } .spark{ display:none } }