/* ── Jetons ────────────────────────────────────────────────────────── Mêmes valeurs et même logique que atelier.css (l'app desktop) : clair par défaut, [data-theme="sombre"] en surcharge, posé sur par le script inline de chaque page avant le premier rendu. */ :root { color-scheme: light; --fond:#F4F5F8; --surface:#FFFFFF; --texte:#16202E; --texte-doux:#5A6577; --bordure:#E4E7ED; --bordure-forte:#D2D7E0; --accent:#5B5BD6; --accent-fort:#4A4AC4; --accent-doux:#EEEEFB; --accent-texte:#4B45C7; --logo-pale:color-mix(in srgb, var(--accent) 28%, var(--surface)); --logo-doux:color-mix(in srgb, var(--accent) 62%, var(--surface)); --ombre-1:0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.06); --ombre-2:0 2px 6px rgba(16,24,40,.06), 0 8px 20px rgba(16,24,40,.08); --sans:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Inter","Helvetica Neue",Arial,sans-serif; --mono:"Cascadia Mono",ui-monospace,SFMono-Regular,Consolas,monospace; } :root[data-theme="sombre"] { color-scheme: dark; --fond:#12151C; --surface:#1A1F28; --texte:#E4E8EF; --texte-doux:#98A2B3; --bordure:#2A313D; --bordure-forte:#3A4351; --accent:#6366E8; --accent-fort:#5457D8; --accent-doux:#242451; --accent-texte:#A5A6F6; --ombre-1:none; --ombre-2:0 4px 16px rgba(0,0,0,.35); } /* ── Base ── */ * { box-sizing:border-box; } body { margin:0; background:var(--fond); color:var(--texte); font-family:var(--sans); -webkit-font-smoothing:antialiased; min-height:100vh; display:flex; flex-direction:column; transition:background-color .15s, color .15s; } main { flex:1; } a { color:var(--accent-texte); } /* ── En-tête / pied de page, communs aux 4 pages ── */ .site-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.6rem 1rem; padding:1.1rem clamp(1.1rem,5vw,2rem); background:var(--surface); border-bottom:1px solid var(--bordure); transition:background-color .15s, border-color .15s; } .marque { display:flex; align-items:center; gap:.55rem; text-decoration:none; } .marque svg { flex:none; } .marque-texte { font-weight:650; font-size:.95rem; letter-spacing:-.01em; color:var(--texte); } .marque-ia { color:var(--accent); } .entete-actions { display:flex; align-items:center; flex-wrap:wrap; justify-content:flex-end; gap:.2rem .3rem; } .lien-entete { display:inline-flex; align-items:center; white-space:nowrap; font-size:.85rem; font-weight:550; color:var(--texte-doux); text-decoration:none; padding:.4rem .6rem; border-radius:8px; transition:background-color .12s; } .lien-entete:hover { background:color-mix(in srgb, var(--texte) 6%, transparent); } .btn-theme { display:inline-flex; align-items:center; justify-content:center; width:2.15rem; height:2.15rem; padding:0; border:none; background:none; color:var(--texte-doux); border-radius:8px; cursor:pointer; transition:background-color .12s, color .12s; } .btn-theme:hover { background:color-mix(in srgb, var(--texte) 6%, transparent); } .btn-theme svg { display:block; } .btn-theme .icone-lune { display:none; } .btn-theme .icone-soleil { display:block; } :root[data-theme="sombre"] .btn-theme .icone-lune { display:block; } :root[data-theme="sombre"] .btn-theme .icone-soleil { display:none; } .site-footer { display:flex; align-items:center; flex-wrap:wrap; gap:.5rem; padding:1.2rem clamp(1.1rem,5vw,2rem); background:var(--surface); border-top:1px solid var(--bordure); font-size:.8rem; color:var(--texte-doux); transition:background-color .15s, border-color .15s; } .site-footer svg { flex:none; } .footer-liens { margin-left:auto; display:flex; align-items:center; flex-wrap:wrap; gap:1rem; } .footer-liens a { color:var(--texte-doux); text-decoration:none; font-weight:550; } .footer-liens a:hover { color:var(--accent-texte); } /* ── Boutons pilule (hero) ── */ .btn-pilule { display:inline-flex; align-items:center; gap:.55rem; font-family:inherit; font-weight:650; font-size:.92rem; padding:.75rem 1.35rem; border-radius:999px; text-decoration:none; cursor:pointer; transition:background-color .12s, border-color .12s; } .btn-pilule svg { flex:none; } .btn-pilule.primaire { background:var(--accent); color:#FFFFFF; border:1px solid var(--accent); box-shadow:var(--ombre-1); padding:.75rem 1.5rem; } .btn-pilule.secondaire { background:var(--surface); color:var(--texte); border:1px solid var(--bordure-forte); box-shadow:var(--ombre-1); } .btn-pilule.secondaire:hover { background:var(--bordure); } /* ── Hero (landing) ── */ .hero { flex:1; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:clamp(3rem,10vw,5rem) clamp(1.1rem,5vw,2rem); overflow:hidden; } .hero-fond { position:absolute; top:50%; left:50%; transform:translate(-50%,-52%) rotate(-8deg); opacity:.05; pointer-events:none; } .hero-logo { position:relative; filter:drop-shadow(0 14px 28px rgba(91,91,214,.22)); } @keyframes fanSwayPale { 0%,100% { transform: rotate(-18deg); } 50% { transform: rotate(-33deg); } } @keyframes fanSwayFront { 0%,100% { transform: rotate(18deg); } 50% { transform: rotate(33deg); } } @keyframes fanPulseDoux { 0%,100% { opacity: 1; } 50% { opacity: .82; } } .hero-logo .pale { transform-box:view-box; transform-origin:50px 92px; transform:rotate(-18deg); animation:fanSwayPale 4.6s ease-in-out infinite; } .hero-logo .doux { animation:fanPulseDoux 4.6s ease-in-out infinite; } .hero-logo .front { transform-box:view-box; transform-origin:50px 92px; transform:rotate(18deg); animation:fanSwayFront 4.6s ease-in-out infinite; } .hero h1 { position:relative; margin:1.6rem 0 0; font-size:clamp(3rem,9vw,5.5rem); font-weight:800; letter-spacing:-.03em; line-height:1; color:var(--texte); } .hero h1 .marque-ia { font-weight:800; } .hero p { position:relative; margin:1.4rem 0 0; max-width:34rem; font-size:1.15rem; line-height:1.65; color:var(--texte-doux); } .hero-actions { position:relative; display:flex; align-items:center; justify-content:center; gap:.7rem; flex-wrap:wrap; margin-top:2.2rem; } /* ── Aperçu / captures d'écran ── */ .section-apercu { padding:clamp(3rem,8vw,5rem) clamp(1.1rem,5vw,2rem); background:var(--surface); border-top:1px solid var(--bordure); transition:background-color .15s, border-color .15s; } .section-apercu h2 { margin:0 0 1.8rem; font-size:clamp(1.5rem,4vw,2rem); font-weight:800; letter-spacing:-.02em; color:var(--texte); text-align:center; } .capture-principale { max-width:58rem; margin:0 auto; text-align:center; } .capture-cadre { border-radius:16px; overflow:hidden; border:1px solid var(--bordure); box-shadow:var(--ombre-2); } .capture-cadre img { display:block; width:100%; height:auto; } .capture-cadre .sombre { display:none; } :root[data-theme="sombre"] .capture-cadre .clair { display:none; } :root[data-theme="sombre"] .capture-cadre .sombre { display:block; } .legende-donnees { margin:.7rem 0 0; font-size:.78rem; color:var(--texte-doux); } .grille-captures { max-width:64rem; margin:2.2rem auto 0; display:grid; grid-template-columns:repeat(auto-fit, minmax(13rem, 1fr)); gap:1.2rem; text-align:left; } .grille-captures figure { margin:0; } .grille-captures a { display:block; } .grille-captures img { display:block; width:100%; height:auto; aspect-ratio:1600/1000; object-fit:cover; object-position:top; border-radius:10px; border:1px solid var(--bordure); box-shadow:var(--ombre-1); } .grille-captures figcaption { margin-top:.6rem; font-size:.85rem; color:var(--texte-doux); } /* ── Démo vidéo (modale) ── */ @keyframes vcFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes vcRise { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } } .demo-fond { position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center; padding:clamp(1rem,4vw,2.5rem); background:rgba(9,11,16,.72); backdrop-filter:blur(4px); animation:vcFadeIn .16s ease-out; } .demo-fond[hidden] { display:none; } .demo-carte { width:min(64rem,100%); background:var(--surface); border:1px solid var(--bordure); border-radius:16px; overflow:hidden; box-shadow:0 24px 64px rgba(9,11,16,.4); animation:vcRise .2s cubic-bezier(.2,.7,.3,1); } .demo-entete { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.85rem 1rem .85rem 1.15rem; border-bottom:1px solid var(--bordure); } .demo-entete span { font-size:.88rem; font-weight:650; letter-spacing:-.01em; color:var(--texte); } .demo-fermer { display:inline-flex; align-items:center; justify-content:center; width:2rem; height:2rem; padding:0; border:none; background:none; color:var(--texte-doux); border-radius:8px; cursor:pointer; } .demo-fermer:hover { background:var(--bordure); } .demo-corps { position:relative; background:#000; aspect-ratio:16/9; } .demo-corps iframe { position:absolute; inset:0; width:100%; height:100%; border:0; display:block; } .demo-attente { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.7rem; background:repeating-linear-gradient(135deg, #16181F 0 12px, #1C1F28 12px 24px); color:#9AA3B2; font-family:var(--mono); font-size:.82rem; text-align:center; padding:1.5rem; } .demo-attente strong { color:#C7CEDA; font-weight:400; } /* ── Document imprimable (mentions légales, politique) ── */ .page-document { background:var(--fond); } .document-corps { flex:1; padding:2rem clamp(1rem,4vw,2rem); } .papier { max-width:50rem; margin:0 auto; background:var(--surface); border:1px solid var(--bordure); border-radius:16px; box-shadow:var(--ombre-1); padding:clamp(2rem,6vw,4rem); } .papier h1 { font-size:1.8rem; font-weight:800; letter-spacing:-.02em; margin:0 0 1.6rem; color:var(--texte); } .papier h2 { font-size:1.15rem; font-weight:700; margin:1.8rem 0 .5rem; color:var(--texte); } .papier p, .papier li { font-size:1rem; line-height:1.65; color:var(--texte); margin:.6rem 0; } .papier .discret { font-size:.88rem; color:var(--texte-doux); } /* ── Page Documentation (aperçu à venir) ── */ .section-doc-attente { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:.8rem; padding:clamp(3rem,10vw,5rem) clamp(1.1rem,5vw,2rem); } .section-doc-attente h1 { margin:0; font-size:clamp(1.8rem,5vw,2.4rem); font-weight:800; letter-spacing:-.02em; color:var(--texte); } .section-doc-attente p { margin:0; max-width:30rem; font-size:1rem; line-height:1.65; color:var(--texte-doux); }