/* ============================================================ TerraTrack — Base : reset, fonts, typo, grille, utilitaires ============================================================ */ /* ── Fonts locales (woff2 auto-hébergées) ──────────────────── */ @font-face{ font-family:'Archivo'; src:url('../fonts/archivo-100-900.woff2') format('woff2-variations'); font-weight:100 900; font-stretch:62% 125%; font-style:normal; font-display:swap; } /* Nunito retiré : la face « ronde » n'est pas celle de l'app. On reste system-ui. */ /* ── Reset minimal ─────────────────────────────────────────── */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{ -webkit-text-size-adjust:100%;text-size-adjust:100%; background:#060E0A;max-width:100%;overflow-x:hidden; } /* jamais de flash blanc entre pages */ body{ font-family:var(--font-body); background:var(--tt-background); color:var(--text-primary); line-height:1.55; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; padding-bottom:env(safe-area-inset-bottom); font-size:clamp(16px,1.05vw,18px); } @supports (overflow:clip){ html,body{overflow-x:clip} } /* Verrou de scroll : sur iOS c'est qui défile — verrouiller seul ne suffit pas. */ html.menu-open,body.menu-open{overflow:hidden} .sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important} img,svg,picture{display:block;max-width:100%} img{height:auto} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:none;cursor:pointer} input{font:inherit} ul{list-style:none} ::selection{background:var(--tt-leaf);color:var(--tt-forest-deep)} :focus-visible{outline:3px solid var(--tt-leaf);outline-offset:3px;border-radius:4px} /* Le lime reste très visible sur la nuit ; les surfaces jour et les cartes claires utilisent l'émeraude pour conserver un indicateur ≥ 3:1. */ .day :focus-visible, .scard-2:focus-visible, .scard-3:focus-visible, .stack-controls :focus-visible{outline-color:var(--tt-emerald)} /* ── Grain subtil global ───────────────────────────────────── */ body::after{ content:"";position:fixed;inset:0;z-index:1;pointer-events:none; opacity:.035;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ── Typo ──────────────────────────────────────────────────── */ .display{ font-family:var(--font-display); font-weight:900; font-stretch:var(--display-stretch); letter-spacing:var(--display-tracking); line-height:var(--display-leading); text-transform:uppercase; text-wrap:balance; } .rounded{font-family:var(--font-rounded);font-weight:800} .mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums} .tabular{font-variant-numeric:tabular-nums} h1.display{font-size:clamp(3.1rem,9.2vw,9.4rem)} h2.display{font-size:clamp(2.3rem,5.6vw,5.5rem)} h3.display{font-size:clamp(1.7rem,3.4vw,3.1rem)} .kicker{ font-family:var(--font-mono); /* plancher 11,5px : en dessous, le mono capitale devient illisible sur mobile */ font-size:clamp(.72rem,.78vw,.78rem); letter-spacing:.16em;text-transform:uppercase; color:var(--tt-leaf); display:inline-flex;align-items:center;gap:.6em; } .section-index{ font-family:var(--font-mono); font-size:.72rem;letter-spacing:.18em;text-transform:uppercase; color:var(--text-tertiary); } .lead{ font-size:clamp(1.06rem,1.5vw,1.32rem); color:var(--text-secondary);max-width:44ch; } .accent{color:var(--tt-leaf)} .dot{color:var(--tt-leaf)} /* Sur fond clair, le lime devient illisible (~1.2:1) → émeraude. Règle AA non négociable. */ .day .accent,.day .dot,.day .kicker{color:var(--accent-on-light)} /* ── Layout ────────────────────────────────────────────────── */ .wrap{max-width:var(--container-page);margin-inline:auto;padding-inline:var(--page-x)} .section{position:relative;padding-block:var(--section-y);isolation:isolate;overflow-x:clip} .page-hero{overflow-x:clip} .section-head{display:flex;flex-direction:column;gap:1rem;margin-bottom:clamp(2rem,4vw,3.5rem)} .section-head .row{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;justify-content:space-between} /* Les grands titres de section mordent la gouttière gauche (éditorial, casse la boîte centrée) */ .section-head h2.display{margin-left:var(--safe-pull)} /* ── Fonds nuit / jour ─────────────────────────────────────── */ .night{background:var(--tt-background);color:var(--text-primary)} .night-deep{background:var(--tt-ink);color:var(--text-primary)} .tropical{background:var(--bg-tropical);color:var(--text-primary)} .day{background:var(--bg-canopy);color:var(--ink-on-light)} .day .lead{color:var(--ink-on-light-soft)} .day .kicker{color:var(--accent-on-light)} .day .section-index{color:var(--ink-on-light-mute)} .day h2.display,.day h3.display{color:var(--ink-on-light)} .day .link-underline{color:var(--ink-on-light)} .day .link-underline::after{background:var(--accent-on-light)} /* ── Halos qui respirent ───────────────────────────────────── */ .bloom{position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none;z-index:-1} .bloom-leaf{background:radial-gradient(circle,var(--tt-leaf-soft),transparent 70%)} .bloom-emerald{background:radial-gradient(circle,rgba(14,57,43,.6),transparent 70%)} /* ── Système éditorial : full-bleed, largeur de lecture, débordement, zigzag ── */ /* Full-bleed sûr (body a overflow-x:hidden) : l'élément prend toute la largeur écran. */ .bleed{width:100vw;margin-inline:calc(50% - 50vw)} /* Largeur de lecture : SEULS les paragraphes sont bornés — titres/médias peuvent déborder. */ .prose,.lead,p.body-measure,.feature-copy p,.also .item p,.manifesto li,.horizon .big{max-width:var(--measure)} /* Débordement gauche des grands titres (mordre la gouttière, jamais un mot utile). */ .pull-left{margin-left:var(--pull)} /* Zigzag : respiration décalée d'une section à l'autre (asymétrie contrôlée). */ .shift-r{margin-left:clamp(0px,7vw,7rem)} .shift-l{margin-right:clamp(0px,7vw,7rem)} /* Chiffre/lettre display géant en marge (listes éditoriales). */ .mega-num{font-family:var(--font-display);font-weight:900;font-stretch:80%;line-height:.9;letter-spacing:-.02em} /* Marque : la VRAIE icône de l'app (icon-lizard.svg) peinte via masque CSS, recolorable. */ .brand-mark{display:block;width:26px;height:26px;background:var(--tt-leaf); -webkit-mask:url(../img/branding/icon-lizard.svg) center/contain no-repeat; mask:url(../img/branding/icon-lizard.svg) center/contain no-repeat} .day .brand-mark{background:var(--accent-on-light)} /* ── Utilitaires ───────────────────────────────────────────── */ .center{text-align:center} .stack{display:flex;flex-direction:column} .mt-xs{margin-top:.6rem} .mt-sm{margin-top:1rem} .mt-md{margin-top:1.6rem} .mt-lg{margin-top:2.4rem} .text-muted{color:var(--text-secondary)} .text-tertiary{color:var(--text-tertiary)} .section-tight-top{padding-top:clamp(2rem,4vw,3.5rem)} .section-tight-bottom{padding-bottom:clamp(1.5rem,3vw,2.5rem)} .section-flush-top{padding-top:0} .panel-pad{padding:1.6rem} .panel-soft{padding:clamp(1.25rem,2.4vw,1.8rem)} .max-prose{max-width:var(--measure)} .max-compact{max-width:760px} .hidden-visually{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .skip-link{ position:fixed;top:-100px;left:1rem;z-index:10000; background:var(--tt-leaf);color:var(--tt-forest-deep); padding:.7rem 1.2rem;border-radius:var(--radius-pill);font-weight:700; transition:top .2s; } .skip-link:focus{top:1rem} /* ── Reveal (état visible par défaut, JS pose le caché) ─────── */ .reveal{will-change:transform,opacity} /* ── prefers-reduced-motion : tout figé visible ────────────── */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important} } /* Filet anti-débordement : un mot plus long que sa colonne (e-mail, nom latin, titre display sur 320px) est coupé au lieu de pousser la page en scroll horizontal. */ h1,h2,h3,h4,p,li,dd,dt,figcaption{overflow-wrap:break-word} /* Échelle mobile dédiée : plus compacte sans sacrifier les zones tactiles. */ @media (max-width:680px){ :root{ --page-x:clamp(1rem,5vw,1.25rem); --section-y:clamp(3.5rem,14vw,4rem); } /* Cibles tactiles : les liens de pied de page faisaient 33px de haut. */ .footer-grid a{display:flex;align-items:center;min-height:44px;padding-block:.35rem} .footer-bottom a{padding-block:.5rem} } /* Les liens d'action « → » gagnent une zone de frappe sans bouger la mise en page : le padding d'un élément inline agrandit la cible sans changer la hauteur de ligne. Le filet ::after est décalé d'autant pour rester collé au texte. */ @media (max-width:680px),(hover:none),(pointer:coarse){ .link-underline{padding-block:.62rem} .link-underline::after{bottom:calc(.62rem - 3px)} }