/* OSDIGITALIS · site complet
Système de design P1 « L'épure », élevé : noir, grands titres Space Grotesk très serrés,
encre pour les réalisations, cadre teinté des captures, bande contact bleue, bandeau spectre.
Sommaire : 1 jetons · 2 base · 3 boutons et liens · 4 en-tête · 5 pied · 6 composants partagés
· 7 accueil · 8 mouvement · 9 adaptations. */
/* ===== Polices locales (variables, sous-ensemble latin) : aucune requête vers un service tiers. ===== */
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("assets/fonts/space-grotesk-latin.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("assets/fonts/inter-latin.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url("assets/fonts/jetbrains-mono-latin.woff2") format("woff2"); }
/* ===== 1. Jetons ===== */
:root {
color-scheme: dark;
--brand-green: #1EBA61;
--brand-blue: #164CA9;
--brand-teal: #17A7CE;
--brand-amber: #F8B021;
--brand-magenta: #AD258D;
/* Couleurs des domaines de l'espace formation, tirées de la charte et ajustées par thème pour garder 3:1 au moins
contre les fonds de tuile et de section (sombre : #0A0A0A et #14233B ; clair : #FFFFFF et #F4F6F9). */
--fam-os: var(--brand-teal);
--fam-prog: color-mix(in srgb, var(--brand-blue) 60%, #fff);
--fam-devops: var(--brand-green);
--fam-db: color-mix(in srgb, var(--brand-magenta) 75%, #fff);
--logo-bg: #0A0A0A;
--ico-linkedin: #5AA5F2;
--ico-whatsapp: #25D366;
--bg: #0A0A0A;
--surface: #14233B;
--surface-deep: #101B2C;
--text: #F4F6F9;
--muted: #B6C3D2;
--line: #354359;
--accent: #1EBA61;
--accent-line: var(--accent);
--accent-ink: #0A0A0A;
--link: #92BFFF;
--focus: #F8B021;
--ghost: #5C6877;
--off: #8C99AB;
--bezel: #0A0A0A;
--tile-bg: var(--surface);
--tile-line: var(--line);
/* Encre des initiales sur les pastilles à initiale des applications (voir « Logos d'applications »). */
--on-fam: #0A0A0A;
--frame-base: var(--bg);
--display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
--body: "Inter", "Helvetica Neue", Arial, sans-serif;
--mono: "JetBrains Mono", Consolas, "Courier New", monospace;
--max-width: 1240px;
--gutter: clamp(22px, 5vw, 72px);
--col-gap: clamp(16px, 2vw, 32px);
--hdr: 128px;
--hdr-compact: 72px;
--ease: cubic-bezier(.2, .7, .2, 1);
--section-y: clamp(72px, 9vw, 144px);
/* Rythme des sections serrées (zone de transition, section d'appoint) : 56 px sur mobile, 88 px au plus sur grand écran. */
--section-y-tight: clamp(56px, 6vw, 88px);
--fs-h2: clamp(25px, 3.2vw, 46px);
--fs-h3: clamp(21px, 2vw, 30px);
font-family: var(--body);
font-synthesis: none;
}
:root[data-theme="light"] {
--ico-linkedin: #0A66C2;
--ico-whatsapp: #128C7E;
color-scheme: light;
--logo-bg: #FFFFFF;
--bg: #F4F6F9;
--surface: #FFFFFF;
--surface-deep: #E6EAEF;
--text: #14233B;
--muted: #5B6B7B;
--line: #C9D2DD;
--accent-line: #0E8F45;
--link: #164CA9;
--focus: #164CA9;
--ghost: #7D8B9C;
--off: #627084;
--bezel: #14233B;
--tile-line: var(--ghost);
--on-fam: #FFFFFF;
--frame-base: var(--surface);
--fam-os: color-mix(in srgb, var(--brand-teal) 80%, #000);
--fam-prog: var(--brand-blue);
--fam-devops: color-mix(in srgb, var(--brand-green) 75%, #000);
--fam-db: var(--brand-magenta);
}
@media (max-width: 480px) {
:root { --hdr: 112px; }
}
/* ===== 2. Base ===== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr-compact) + 24px); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { position: relative; margin: 0; background: var(--bg); color: var(--text); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
[hidden] { display: none !important; }
::selection { background: var(--accent); color: var(--accent-ink); }
h1, h2, h3, h4, p, figure, dl, dd, blockquote { margin: 0; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; }
h1, h2, h3 { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
h1 { font-weight: 700; letter-spacing: -.05em; line-height: 1.06; }
h2 { font-size: var(--fs-h2); line-height: 1.12; letter-spacing: -.04em; }
h3 { font-size: var(--fs-h3); line-height: 1.18; letter-spacing: -.035em; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
a, button, summary { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.container { width: min(var(--max-width), calc(100% - 2 * var(--gutter))); margin-inline: auto; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 100; padding: 12px 18px; background: var(--text); color: var(--bg); font-weight: 500; transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }
.scroll-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 140px; pointer-events: none; }
.mono { font-family: var(--mono); }
.lead { font-size: clamp(18px, 1.7vw, 22px); line-height: 1.65; max-width: 62ch; }
.section-label { margin-bottom: 20px; color: var(--muted); font-size: 13px; line-height: 1.4; }
.dot { display: inline-block; flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; }
.dot--dev { background: var(--brand-blue); }
.dot--devops { background: var(--brand-green); }
.dot--formation { background: var(--brand-amber); }
.dot--magenta { background: var(--brand-magenta); }
/* ===== 3. Boutons et liens ===== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 16px; min-height: 52px; padding: 14px 24px; border: 1px solid transparent; border-radius: 6px; background: none; font-family: var(--body); font-size: 15px; font-weight: 500; line-height: 1.25; text-align: center; transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .1s var(--ease); }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { background: var(--text); color: var(--bg); }
.btn--secondary { border-color: var(--line); }
.btn--secondary:hover { border-color: var(--accent); background: var(--surface); }
.btn--sm { min-height: 44px; padding: 10px 18px; font-size: 14px; }
.btn--block { display: flex; width: 100%; }
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.btn > span[aria-hidden="true"] { font-size: 18px; line-height: 1; transition: transform .2s var(--ease); }
.text-link { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding-block: 8px; font-size: 15px; font-weight: 500; }
.text-link > span[aria-hidden="true"] { font-size: 20px; line-height: 1; color: var(--link); transition: transform .2s var(--ease); }
/* Flèches : « → » page du site, « ↗ » lien externe, « ↓ » téléchargement. Le glissé suit le sens de la flèche,
déduit de la destination du lien (aucune classe à ajouter). */
:is(.text-link, .btn):hover > span[aria-hidden="true"] { transform: translate(2px, -2px); }
:is(.text-link, .btn):not([href^="http"], [href^="mailto:"], [download]):hover > span[aria-hidden="true"] { transform: translateX(3px); }
:is(.text-link, .btn)[download]:hover > span[aria-hidden="true"] { transform: translateY(3px); }
.text-link:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.link-inline { color: var(--link); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.link-inline:hover { text-decoration-thickness: 2px; }
/* ===== 4. En-tête ===== */
.header-shell { --hdr-now: var(--hdr); position: relative; height: var(--hdr); }
.header-shell.is-compact { --hdr-now: var(--hdr-compact); }
.site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 50; height: var(--hdr-now); background: var(--logo-bg); border-bottom: 1px solid var(--line); transition: height 240ms var(--ease); }
.js .site-header { position: fixed; }
.spectrum { position: absolute; top: 0; left: 0; right: 0; height: 3px; display: flex; overflow: hidden; pointer-events: none; }
.spectrum > span:not(.spectrum-cover) { flex: 1 1 0; }
.spectrum > span:nth-child(1) { background: var(--brand-green); }
.spectrum > span:nth-child(2) { background: var(--brand-blue); }
.spectrum > span:nth-child(3) { background: var(--brand-teal); }
.spectrum > span:nth-child(4) { background: var(--brand-amber); }
.spectrum > span:nth-child(5) { background: var(--brand-magenta); }
.spectrum-cover { position: absolute; inset: 0; background: var(--line); transform: scaleX(0); transform-origin: 100% 50%; will-change: transform; }
.header-bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 100%; }
/* Marque et actions de même largeur : la navigation reste au même endroit quand l'en-tête passe en compact. */
.header-bar > .brand, .header-bar > .header-actions { flex: 1 1 0; }
.brand { display: inline-flex; align-items: center; gap: 20px; flex-shrink: 0; }
.brand-logo { display: block; width: 96px; height: 96px; background: var(--logo-bg); }
.brand-face { display: none; width: auto; height: 40px; background: var(--logo-bg); }
.brand-name { font-family: var(--display); font-size: 18px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
.brand-name > span { display: block; margin-top: 4px; font-family: var(--body); font-size: 11px; font-weight: 400; letter-spacing: .02em; color: var(--muted); }
.header-shell.is-compact .brand-logo { display: none; }
.header-shell.is-compact .brand-face { display: block; }
.header-shell.is-compact .brand { gap: 12px; }
.header-shell.is-compact .brand-name > span { display: none; }
.main-nav { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 34px); }
.nav-item { position: relative; }
.nav-link { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 2px; border: 0; background: none; color: var(--muted); font-family: var(--body); font-size: 14px; font-weight: 400; line-height: 1.2; transition: color .2s var(--ease); }
.nav-link:hover, .nav-link[aria-expanded="true"], .nav-link[aria-current="page"], .nav-link.is-current { color: var(--text); }
.nav-link[aria-current="page"]::after, .nav-link.is-current::after { content: ""; position: absolute; left: 2px; right: 2px; bottom: 6px; height: 2px; background: var(--accent-line); }
.nav-trigger svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--ease); }
.nav-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.expertises-panel { position: absolute; top: calc(100% + 14px); left: -20px; z-index: 60; width: min(440px, 80vw); padding: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.expertises-panel ul { display: grid; gap: 2px; }
.expertises-panel a { display: grid; grid-template-columns: 8px 1fr; column-gap: 16px; align-items: start; padding: 14px 16px; border-radius: 6px; }
.expertises-panel a:hover, .expertises-panel a[aria-current="page"] { background: var(--surface-deep); }
.expertises-panel .dot { margin-top: 8px; }
.panel-name { display: block; font-family: var(--display); font-size: 17px; font-weight: 600; letter-spacing: -.02em; line-height: 1.3; }
.panel-desc { display: block; margin-top: 2px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.header-cta { border-color: var(--line); font-size: 13px; }
.header-cta:hover { border-color: var(--accent); }
.header-cta[aria-current="page"] { border-color: var(--accent-line); }
.theme-toggle { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; }
.theme-toggle:hover { background: var(--surface); }
.theme-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.icon-moon, [data-theme="light"] .icon-sun { display: none; }
[data-theme="light"] .icon-moon { display: block; }
.menu-toggle { position: relative; display: none; place-items: center; width: 44px; height: 44px; padding: 0; background: transparent; border: 0; }
.menu-toggle span { position: absolute; left: 11px; top: calc(50% - .75px); display: block; width: 22px; height: 1.5px; background: var(--text); transition: transform .24s var(--ease); }
.menu-toggle span:first-child { transform: translateY(-4px); }
.menu-toggle span:last-child { transform: translateY(4px); }
.menu-toggle[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: rotate(-45deg); }
.menu-panel { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; overflow-y: auto; padding: calc(var(--hdr-now) + 24px) var(--gutter) 32px; background: var(--logo-bg); overscroll-behavior: contain; }
.menu-nav > a, .menu-nav > div > a:first-child { display: block; padding: 8px 0; font-family: var(--display); font-size: 32px; font-weight: 600; letter-spacing: -.04em; line-height: 1.2; }
.menu-sub { margin: 2px 0 14px; }
.menu-sub a { display: flex; align-items: center; gap: 14px; min-height: 56px; padding-block: 6px; color: var(--muted); }
.menu-sub .panel-name { color: var(--text); }
.menu-sub .panel-desc { font-size: 14px; }
.menu-sub a:hover, .menu-sub a[aria-current="page"] { color: var(--text); }
/* Page courante : filet vert à gauche, texte en pleine couleur. */
.menu-nav a[aria-current="page"] { padding-left: 14px; border-left: 2px solid var(--accent-line); color: var(--text); }
.menu-foot { margin-top: auto; padding-top: 32px; }
.menu-foot .btn { margin-bottom: 20px; }
.menu-foot a:not(.btn) { display: flex; align-items: center; gap: 10px; min-height: 44px; font-family: var(--mono); font-size: 14px; color: var(--muted); }
html.menu-open { overflow: hidden; }
/* ===== 5. Pied de page ===== */
.site-footer { background: var(--logo-bg); border-top: 1px solid var(--line); padding-block: clamp(56px, 7vw, 96px) 32px; }
.footer-main { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 48px; }
.footer-title { margin-bottom: 8px; color: var(--muted); font-family: var(--body); font-size: 13px; font-weight: 400; letter-spacing: 0; line-height: 1.4; }
.footer-links a { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; }
.footer-links a:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.footer-links .mono { font-family: var(--mono); font-size: 13px; }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 32px; margin-top: clamp(40px, 5vw, 72px); padding-top: 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; line-height: 1.6; }
.footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.footer-bottom a:hover { color: var(--text); }
/* ===== 6. Composants partagés ===== */
/* Fil d'Ariane */
.breadcrumb { padding-top: 8px; }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; }
.breadcrumb li { display: inline-flex; align-items: center; color: var(--muted); font-size: 13px; }
.breadcrumb li:not(:last-child)::after { content: "›"; margin-inline: 10px; color: var(--muted); }
.breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; text-decoration-color: var(--line); }
.breadcrumb a:hover { color: var(--text); text-decoration-color: currentColor; }
.breadcrumb [aria-current="page"] { color: var(--text); }
/* Héros de page (pages intérieures) */
.page-hero { padding-block: clamp(20px, 3vw, 40px) clamp(40px, 5vw, 72px); }
.page-hero-label { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; color: var(--muted); font-size: 14px; line-height: 1.4; }
.page-hero-label .dot { width: 10px; height: 10px; flex-basis: 10px; }
.page-hero h1 { max-width: 22ch; font-size: clamp(32px, 4.4vw, 64px); letter-spacing: -.045em; line-height: 1.08; }
.page-hero h1.is-wide { max-width: 30ch; }
.page-hero .lead { margin-top: clamp(24px, 3vw, 40px); color: var(--text); }
.page-hero .lead + .lead { margin-top: 16px; color: var(--muted); }
.page-meta { display: flex; flex-wrap: wrap; gap: 20px clamp(28px, 4vw, 64px); margin-top: clamp(36px, 5vw, 64px); padding-top: 24px; border-top: 1px solid var(--line); }
.page-meta dt { color: var(--muted); font-size: 13px; line-height: 1.4; }
.page-meta dd { margin-top: 4px; font-family: var(--mono); font-size: 14px; line-height: 1.5; }
.page-meta dd.is-text { font-family: var(--body); }
/* Sections */
.section { padding-block: var(--section-y); }
.section--surface { background: var(--surface); border-top: 1px solid var(--line); --tile-bg: var(--bg); }
.section--deep { background: var(--surface-deep); }
.section--rule { border-top: 1px solid var(--line); }
.section-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 20px; align-items: end; margin-bottom: clamp(40px, 5vw, 72px); }
.section-head > :first-child { grid-column: 1 / span 7; }
.section-head > :last-child:not(:first-child) { grid-column: 9 / -1; color: var(--muted); font-size: 15px; line-height: 1.75; padding-bottom: 6px; }
.section-head .section-label { margin-bottom: 20px; }
.section-text { max-width: 58ch; color: var(--muted); font-size: 17px; line-height: 1.75; }
.section-text + .section-text { margin-top: 16px; }
/* Liste à filets : intitulé + phrase */
.rule-list { border-bottom: 1px solid var(--line); }
.rule-list > li { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 8px; padding-block: clamp(22px, 2.6vw, 34px); border-top: 1px solid var(--line); }
.rule-list h3, .rule-list .rule-title { grid-column: 1 / span 5; font-size: clamp(21px, 1.9vw, 26px); letter-spacing: -.03em; line-height: 1.25; }
.rule-list p { grid-column: 7 / -1; color: var(--muted); font-size: 16px; line-height: 1.7; }
/* Technologies, en mono */
.tech-list { display: flex; flex-wrap: wrap; gap: 8px 22px; font-family: var(--mono); font-size: 13px; line-height: 1.5; }
.tech-list li { display: flex; align-items: center; gap: 9px; }
.tech-list li::before { content: ""; flex: 0 0 4px; width: 4px; height: 4px; border-radius: 50%; background: var(--accent-line); }
.tech-list li:has(.tl)::before { content: none; }
.tl { flex: none; width: 17px; height: 17px; fill: currentColor; color: var(--text); opacity: .86; }
.stack-line { margin-top: 18px; color: var(--muted); }
.stack-line .tl { color: var(--muted); opacity: 1; }
.ico { flex: none; width: 18px; height: 18px; color: var(--muted); }
.ico--linkedin { color: var(--ico-linkedin); }
.ico--whatsapp { color: var(--ico-whatsapp); }
.btn .ico, .contact-band .ico { color: currentColor; }
/* Cadre teinté des captures : la couleur de l'application (--app, vert par défaut) en teinte douce sur le fond du thème (--frame-base),
avec un liseré fin. Même fond pour la scène du téléphone (.case-stage, css/realisations.css).
Une couleur par application : .app--sporthub (vert) et .app--pendula (ambre), posées sur le bloc qui contient les cadres. */
.app--sporthub { --app: var(--brand-green); }
.app--pendula { --app: var(--brand-amber); }
.frame, .case-stage { background: color-mix(in srgb, var(--app, var(--brand-green)) 17%, var(--frame-base)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--app, var(--brand-green)) 38%, transparent); }
.frame { display: block; margin: 0; padding: clamp(12px, 2.2vw, 28px); border-radius: 10px; }
.frame img { width: 100%; border-radius: 5px; }
.frame-caption { margin-top: 14px; color: var(--muted); font-size: 12px; line-height: 1.5; }
/* Logos d'applications, devant le nom du projet. SportHub et Pendula : logos reçus de Mohammed le 23/10 (dérivés webp, assets/img/logo-*.webp),
posés tels quels, sans recoloration, ombre, contour ni déformation ; alt vide car le nom est écrit à côté.
RentGo, Gestion des escales et Pipeline CI/CD : pastilles à initiale, à remplacer si des logos arrivent (pastille neutre, carré arrondi
et initiale, aux couleurs de la charte). Le logo suit la taille du titre (em) et se pose sur la ligne.
Pour remplacer une pastille : 
à la place du