/* ================================================================ PROJECTION — Design system Klipa (accueil + pages-outil) Version : v2 — pages secondaires ajoutées (auth, annuaire/blog, dashboard, atelier, comparatif/crédits/cas d'usage/contact/job/ légal/erreurs) ; v1 = accueil + page-outil pilote seuls. ================================================================ Source : maquette.html (accueil, validée) + outils-maquettes/ video-compressor.html (pilote page-outil, validé). Toutes les valeurs (couleurs, tailles, espacements, ombres, easings) sont copiées à l'identique — ce fichier FACTORISE, il ne réinterprète rien. Toute divergence entre accueil et page-outil est documentée sous forme de variante (jamais fondue en une valeur moyenne). Parti pris (etude.md PARTIE 4) : une salle de projection, pas une plaquette. Fond nuit bleu-noir éclairé par le bleu de marque traité comme lumière ; zones de décision (tarifs, FAQ) sur studio clair ; audace concentrée sur le karaoké du titre héros. PORTÉE / COLLISION — IMPORTANT Le site en production utilise déjà des classes génériques qui PORTENT LE MÊME NOM que des composants Projection : .hero, .btn, .plan, .faq, .chip, .kicker (vus dans static/css/home.css et static/css/style.css, jusqu'à 57 occurrences pour .btn). Pour ne RIEN casser ailleurs sur le site, tout ce fichier est scopé sous une classe racine .proj — exactement le même procédé que static/css/home.css utilise déjà pour scoper l'accueil actuel sous .khm. Toute page qui charge projection.css doit poser class="proj" sur (voir guide-integration.md, §3). Les variables --kl-* du site (header-footer.css, [data-theme]) NE SONT PAS réutilisées : Projection n'est pas theme-aware (nuit/ clair fixes par section, pas de bascule utilisateur) — les jetons ci-dessous (--night, --beam, --ink…) ne collisionnent avec aucune variable existante (vérifié : 0 occurrence dans static/css/*.css). PERF (non négociable, déjà validé) : - Aucune animation CSS @keyframes infinie. - Toute animation répétée (karaoké, révélations, jauges) est pilotée en JS par IntersectionObserver : l'intervalle ne tourne que pendant que l'élément est à l'écran. - Seules opacity et transform sont animées (jamais width/height/ aspect-ratio : le navigateur traverserait des états intermédiaires et recalculerait la mise en page à chaque image). - prefers-reduced-motion:reduce coupe tout. - Contraste : chaque paire texte/fond mesurée ≥ 4,5:1 (outils/verify_contrast.py côté accueil, verify_contrast_compressor.py côté outil). ================================================================ */ /* --------------------------------------------------------------- POLICES Anton : display (titres, prix, badges). Bangers : un seul style de sous-titre (« MrBeast »). Les deux en woff2, sous-ensemble latin, embarquées localement (jamais de Google Fonts en prod — perf). --------------------------------------------------------------- */ @font-face{ font-family:"Anton"; font-style:normal;font-weight:400;font-display:swap; src:url(../assets/anton-latin.woff2) format("woff2"); } @font-face{ font-family:"Bangers"; font-style:normal;font-weight:400;font-display:swap; src:url(../assets/bangers-latin.woff2) format("woff2"); } /* --------------------------------------------------------------- TOKENS — palette, typo, forme (etude.md 4.1/4.2/4.3) Globaux (:root), pas de collision avec les --kl-* existants. --------------------------------------------------------------- */ :root{ /* nuit — fond héros/nuit + panneaux */ --night:#070B14; /* fond nuit bleu-noir (héros, footer plus sombre encore) */ --night-2:#0C1322; /* panneaux sur nuit : drop, dd-panel, cartes chip/post */ --night-3:#131C31; /* cartes/chips secondaires (float-card, tl-label) */ /* bleu-projecteur = LUMIÈRE (halos, faisceaux, liens, focus) */ --beam:#2563EB; /* bleu de marque — CTA plein, halos, liens sur clair */ --beam-bright:#4D82F3; /* cœur des glows, survols sur nuit, curseur timeline */ --violet:#7C3AED; /* PREMIUM UNIQUEMENT — rare : badge Pro, éclat IA */ /* jaune sous-titre — motivé produit : karaoké, surlignages */ --caption:#FFD34D; /* studio clair — zones de décision (tarifs, FAQ, dossier SEO) */ --paper:#F7F8FA; --card:#FFFFFF; --ink:#111827; /* neutres — texte secondaire, chaque teinte ≥ 4,5:1 sur son fond */ --muted-l:#4B5563; /* secondaire sur clair */ --muted-d:#94A3BE; /* secondaire sur nuit */ --faint-l:#5A6779; /* tertiaire sur clair (micro-copy) */ --kick-d:#8FB0F9; /* kicker mono sur nuit */ /* traits */ --line-d:rgba(77,130,243,.14); --line-l:#E3E7EE; /* erreurs seulement (etude.md 4.1) — absent des deux maquettes, ajouté ici pour complétude système, ne pas l'utiliser ailleurs */ --danger:#DC2626; /* typographie */ --mono:ui-monospace,"SF Mono","Cascadia Mono","JetBrains Mono",Menlo,monospace; --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --display:"Anton",Impact,"Arial Narrow",sans-serif; /* easing unique du système */ --ease:cubic-bezier(.2,.7,.3,1); } /* --------------------------------------------------------------- RACINE DE SCOPE + RESET .proj = classe posée sur (ou un wrapper englobant toute la page) par le gabarit qui utilise ce design system. --------------------------------------------------------------- */ .proj,.proj *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} .proj{font-family:var(--sans);font-size:17px;line-height:1.6;color:#E8EDF7; background:var(--night);-webkit-font-smoothing:antialiased} .proj img{max-width:100%} .proj a{color:var(--beam-bright);text-decoration:none} .proj .wrap{max-width:1180px;margin:0 auto;padding:0 24px} .proj section{padding:104px 0} .proj section[id],.proj div[id]{scroll-margin-top:84px} /* --------------------------------------------------------------- TYPOGRAPHIE — display / kicker / sous-titre de section / .light Composants : le kicker mono « 01· Nom de section » précède TOUJOURS un h2.display — pattern répété dans chaque section (voir etude.md PARTIE 5, numérotation = ordre de la conversation de vente). .light bascule un bloc entier (section) du nuit vers le studio clair : réutilisé par les zones de décision (tarifs, FAQ, dossier SEO). --------------------------------------------------------------- */ .proj .display{font-family:var(--display);font-weight:400;text-transform:uppercase; letter-spacing:.005em;line-height:1.04} .proj h2.display{font-size:clamp(30px,4vw,48px);margin-bottom:16px} .proj .kicker{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em; text-transform:uppercase;color:var(--kick-d);display:block;margin-bottom:18px; counter-increment:kl-sec} /* Le NUMÉRO est compté par le navigateur, jamais écrit dans le gabarit : plusieurs sections sont conditionnelles (démo sans image, cas d'usage sans contenu, témoignages, conclusion). Une numérotation figée sautait alors un cran — vu en ligne sur logo-overlay, qui n'a pas de cas d'usage et affichait « 04 » puis « 06 ». Compter les chapeaux RÉELLEMENT présents supprime le trou par construction, sur les 35 pages et pour toute section qui naîtrait demain. */ body{counter-reset:kl-sec} .proj .kicker .n{color:var(--muted-d)} .proj .kicker .n::before{content:counter(kl-sec,decimal-leading-zero) "·"} .proj .sub{font-size:18px;color:var(--muted-d);max-width:620px} .proj .light{background:var(--paper);color:var(--ink)} .proj .light .sub{color:var(--muted-l)} .proj .light .kicker{color:var(--beam)} .proj .light .kicker .n{color:var(--faint-l)} .proj .light a{color:var(--beam)} /* îlot nuit dans une section .light (ex. .pass sur #pricing) : `.light a` ci-dessus (specificité 0,2,1) bat .btn-ghost-d (0,2,0) et forçait son texte en --beam — mesuré 3,81:1 sur le fond nuit de la carte, sous le seuil. Restaure le texte clair du ghost nuit ; le survol (:hover, specificité 0,3,0) bat déjà .light a et n'a jamais eu besoin de ce correctif. */ .proj .light .btn-ghost-d{color:#E8EDF7} /* --------------------------------------------------------------- BOUTONS — primaire (beam), secondaires ghost nuit/clair Utilisés partout : héros, démo, étapes, tarifs, FAQ, CTA final, pilule collante, menu mobile. --------------------------------------------------------------- */ .proj .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px; min-height:50px;padding:0 26px;border-radius:8px;font-size:16px;font-weight:600; cursor:pointer;border:0;font-family:var(--sans); transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s} .proj .btn-beam{background:var(--beam);color:#fff; box-shadow:0 0 0 1px rgba(77,130,243,.35),0 8px 32px rgba(37,99,235,.45)} .proj .btn-beam:hover{background:#1D4ED8;transform:translateY(-1px); box-shadow:0 0 0 1px rgba(77,130,243,.5),0 10px 40px rgba(37,99,235,.6)} .proj .btn-ghost-d{background:transparent;color:#E8EDF7;border:1px solid var(--line-d)} .proj .btn-ghost-d:hover{border-color:var(--beam-bright);color:var(--beam-bright)} .proj .btn-ghost-l{background:var(--card);color:var(--ink);border:1.5px solid #D7DDE7} .proj .btn-ghost-l:hover{border-color:var(--beam);color:var(--beam)} .proj .btn:focus-visible{outline:2px solid var(--beam-bright);outline-offset:2px} /* --------------------------------------------------------------- EN-TÊTE — collant, nuit translucide, 64 px. Identique accueil et page-outil (page-outil = page autonome, mêmes chemins relatifs adaptés — voir guide-integration.md §5). Sous-composants : nav-links (menus texte), has-dd (déclenche un menu déroulant desktop au survol/focus), dd-panel (le panneau du menu déroulant, contient un lien vedette dd-studio + des dd-item), nav-right (liens rapides + séparateur + CTA), burger (3 barres dessinées, jamais un caractère texte, animées → croix). --------------------------------------------------------------- */ .proj header{position:sticky;top:0;z-index:50;height:64px; background:rgba(7,11,20,.97); border-bottom:1px solid var(--line-d)} .proj .nav{height:64px;display:flex;align-items:center;gap:26px} .proj .logo{display:flex;align-items:center;flex:none} .proj .logo img{height:26px;width:auto;display:block} .proj .nav-links{display:flex;gap:4px;align-items:center} .proj .nav-item{position:relative} .proj .nav-link{display:inline-flex;align-items:center;gap:6px;padding:10px 11px; border-radius:8px;color:var(--muted-d);font-size:14.5px;font-weight:500; background:none;border:0;cursor:pointer;font-family:var(--sans);line-height:1.2} .proj .nav-link:hover,.proj .has-dd:focus-within .nav-link{color:#fff;background:rgba(77,130,243,.1)} .proj .nav-link svg{transition:transform .18s var(--ease)} .proj .has-dd:hover .nav-link svg,.proj .has-dd:focus-within .nav-link svg{transform:rotate(180deg)} /* menu déroulant desktop */ .proj .dd{position:absolute;top:100%;left:0;padding-top:10px;min-width:330px;z-index:60; opacity:0;visibility:hidden;transform:translateY(6px); transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s} .proj .has-dd:hover .dd,.proj .has-dd:focus-within .dd{opacity:1;visibility:visible;transform:none} .proj .dd-panel{background:var(--night-2);border:1px solid var(--line-d);border-radius:14px; padding:10px;box-shadow:0 24px 70px rgba(0,0,0,.55),0 0 40px rgba(37,99,235,.12)} .proj .dd-studio{display:flex;gap:14px;align-items:center;background: linear-gradient(120deg,rgba(37,99,235,.22),rgba(124,58,237,.14)); border:1px solid rgba(77,130,243,.3);border-radius:10px;padding:14px;margin-bottom:8px} .proj .dd-studio img{width:34px;height:auto;flex:none} .proj .dd-studio b{display:block;font-family:var(--display);font-weight:400; text-transform:uppercase;font-size:16px;letter-spacing:.03em;color:#fff} .proj .dd-studio span{font-size:13px;color:var(--muted-d);line-height:1.45;display:block} .proj .dd-studio:hover{border-color:var(--beam-bright)} .proj .dd a.dd-item{display:block;padding:10px 12px;border-radius:8px} .proj .dd a.dd-item:hover{background:rgba(77,130,243,.1)} .proj .dd a.dd-item b{display:block;font-size:14.5px;font-weight:600;color:#fff} .proj .dd a.dd-item span{font-size:12.5px;color:var(--muted-d)} .proj .nav-right{margin-left:auto;display:flex;align-items:center;gap:16px;flex:none} .proj .nav-right .qlink{color:var(--muted-d);font-size:14.5px;font-weight:500} .proj .nav-right .qlink:hover{color:#fff} .proj .nav-sep{width:1px;height:20px;background:var(--line-d)} .proj .nav-right .btn{min-height:42px;padding:0 18px;font-size:14.5px} .proj .burger{display:none;width:44px;height:44px;background:none;border:0;cursor:pointer; position:relative;flex:none;border-radius:8px} .proj .burger:focus-visible{outline:2px solid var(--beam-bright)} .proj .burger i{position:absolute;left:11px;right:11px;height:2px;border-radius:2px; background:#fff;transition:transform .22s var(--ease),opacity .18s; top:50%} .proj .burger i:nth-child(1){transform:translateY(-7px)} .proj .burger i:nth-child(3){transform:translateY(7px)} .proj .menu-open .burger i:nth-child(1){transform:rotate(45deg)} .proj .menu-open .burger i:nth-child(2){opacity:0} .proj .menu-open .burger i:nth-child(3){transform:rotate(-45deg)} /* --------------------------------------------------------------- MENU MOBILE PLEIN ÉCRAN — sous le header (top:64px), groupes de liens en mono (mnav-group), item avec libellé + sous-texte, CTA empilés en bas. Ouvert via .menu-open sur (JS burger). --------------------------------------------------------------- */ .proj .mnav{position:fixed;top:64px;left:0;right:0;bottom:0;z-index:49;background:var(--night); overflow-y:auto;-webkit-overflow-scrolling:touch;padding:20px 20px 32px; opacity:0;visibility:hidden;transform:translateY(-8px); transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s} .proj .menu-open .mnav{opacity:1;visibility:visible;transform:none} .proj .menu-open{overflow:hidden} .proj .mnav .dd-studio{margin-bottom:18px} .proj .mnav-group{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em; text-transform:uppercase;color:var(--kick-d);margin:20px 4px 6px} .proj .mnav a.mitem{display:flex;justify-content:space-between;align-items:center; min-height:48px;padding:0 12px;border-radius:10px;color:#E8EDF7;font-size:16.5px; font-weight:500} .proj .mnav a.mitem span{font-size:13px;color:var(--muted-d);font-weight:400} .proj .mnav a.mitem:active,.proj .mnav a.mitem:hover{background:rgba(77,130,243,.1)} .proj .mnav-ctas{display:grid;gap:10px;margin-top:26px;padding-top:22px; border-top:1px solid var(--line-d)} .proj .mnav-ctas .btn{width:100%} /* --------------------------------------------------------------- HÉROS — nuit, faisceau bleu radial, grille 7/5 alignée à gauche. Variante ACCUEIL (par défaut) : sur-titre .hero-sur (note ★) au dessus du H1. Variante PAGE-OUTIL : fil d'Ariane .crumbs au même emplacement (une page-outil n'a pas de note à afficher en tête, elle a un fil d'Ariane SEO) + héros plus compact (moins de respiration verticale car une page-outil a plus de contenu sous la ligne de flottaison) + H1 légèrement plus petit. Poser .hero--tool EN PLUS de .hero sur les pages-outil pour appliquer ces overrides. --------------------------------------------------------------- */ .proj .hero{position:relative;padding:72px 0 56px;overflow:hidden} .proj .hero--tool{padding:56px 0 48px} .proj .hero::before{content:"";position:absolute;inset:0;pointer-events:none; background: radial-gradient(1100px 640px at 18% -18%, rgba(37,99,235,.34), transparent 62%), radial-gradient(700px 460px at 88% 112%, rgba(37,99,235,.14), transparent 60%)} .proj .hero .wrap{position:relative;display:grid;grid-template-columns:7fr 5fr;gap:56px; align-items:center} .proj .hero .wrap>*{min-width:0} /* sur-titre — variante accueil (note étoilée) */ .proj .hero-sur{font-family:var(--mono);font-size:12.5px;letter-spacing:.12em; text-transform:uppercase;color:var(--muted-d);margin-bottom:18px;display:block} .proj .hero-sur b{color:var(--caption);font-weight:600;letter-spacing:.06em} /* fil d'Ariane — variante page-outil, même position que .hero-sur */ .proj .crumbs{font-family:var(--mono);font-size:12px;letter-spacing:.06em; color:var(--muted-d);margin-bottom:20px;display:block} .proj .crumbs a{color:var(--muted-d)} .proj .crumbs a:hover{color:#fff} .proj .crumbs .sep{color:var(--beam-bright);margin:0 7px} .proj .crumbs .here{color:#E8EDF7} .proj .hero h1{font-family:var(--display);font-weight:400;text-transform:uppercase; font-size:clamp(34px,5.2vw,68px);line-height:1.04;letter-spacing:.005em; color:#fff;margin-bottom:20px} .proj .hero--tool h1{font-size:clamp(32px,4.6vw,60px);line-height:1.06} /* karaoké du titre : LE différenciateur visuel n°1 (etude.md 4.0). Boîte seule sur sa ligne, marge négative égale au padding pour aligner le bord gauche du texte sur les lignes du dessus. Le mot actif est piloté en JS (data-kara = ms/mot) — voir guide-integration.md §6. */ .proj .cap-live{display:inline-flex;gap:.2em;background:rgba(0,0,0,.55); border:1px solid rgba(255,211,77,.25);border-radius:.16em; padding:.07em .16em;margin-left:-.16em;vertical-align:baseline} .proj .cap-live .w{color:rgba(255,255,255,.78);transition:color .12s} .proj .cap-live .w.on{color:var(--caption);text-shadow:0 0 22px rgba(255,211,77,.55)} .proj .hero .lead{font-size:18.5px;color:var(--muted-d);max-width:520px;margin-bottom:30px} /* --------------------------------------------------------------- ZONE DE DÉPÔT — widget de conversion héros (repris aussi au CTA final). drop-zone = cible glisser-déposer/clic ; drop-or = séparateur « ou collez un lien » (accueil, avec champ URL) ; drop-row = ligne d'action (accueil : champ + bouton ; page-outil : bouton seul, « Parcourir ») ; reassure = mini-liste de réassurance en mono ; drop-hint = ligne de plafonds (page-outil uniquement, valeurs dynamiques — voir guide-integration.md §4). --------------------------------------------------------------- */ .proj .drop{background:var(--night-2);border:1px solid var(--line-d);border-radius:14px; padding:22px;max-width:560px;box-shadow:0 24px 80px rgba(0,0,0,.5)} .proj .drop-zone{border:1.5px dashed rgba(77,130,243,.4);border-radius:10px; padding:20px 18px;text-align:center;cursor:pointer; transition:border-color .2s,background .2s} .proj .drop-zone:hover,.proj .drop-zone.dragover{border-color:var(--beam-bright); background:rgba(37,99,235,.08)} .proj .drop-ico{width:42px;height:42px;margin:0 auto 10px;border-radius:10px; background:rgba(37,99,235,.16);display:flex;align-items:center;justify-content:center; color:var(--beam-bright)} .proj .drop-zone strong{font-size:16px;color:#fff} .proj .drop-zone p{font-size:13.5px;color:var(--muted-d);margin-top:3px} .proj .drop-or{display:flex;align-items:center;gap:12px;font-family:var(--mono); font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-d); margin:14px 0} .proj .drop-or::before,.proj .drop-or::after{content:"";flex:1;height:1px;background:var(--line-d)} .proj .drop-row{display:flex;gap:10px;margin-top:14px} .proj .drop-row input{flex:1;min-height:50px;border:1px solid var(--line-d);border-radius:8px; padding:0 15px;font-size:15px;background:var(--night);color:#E8EDF7;min-width:0} .proj .drop-row input::placeholder{color:#8091AD} .proj .drop-row input:focus{outline:2px solid var(--beam);outline-offset:1px} .proj .drop-row .btn{flex:1} .proj .reassure{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px; font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--muted-d)} .proj .reassure span::before{content:"·";color:var(--beam-bright);margin-right:7px} .proj .see-demo{display:inline-block;margin-top:14px;font-size:14.5px;font-weight:600; color:var(--kick-d)} .proj .drop-hint{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em; color:var(--muted-d);margin-top:12px;line-height:1.5} .proj .drop-hint em{font-style:normal;color:#8091AD} /* --------------------------------------------------------------- TÉLÉPHONE HÉROS — vraie vidéo verticale (vraie personne, jamais de capture d'interface générée), sous-titres/mesure incrustés par code. Variante accueil : phone-caption (karaoké) + phone-bar (barre de lecture). Variante page-outil : phone-weigh + .meter (jauge de poids avant→après, une seule transition au premier passage à l'écran, pilotée par [data-meter] + classe .in). float-card = pastille flottante mono (score OU gain de poids) ; float-formats/float-fmt = pastille de formats/qualité. --------------------------------------------------------------- */ .proj .hero-visual{position:relative;display:flex;justify-content:center} .proj .phone{width:262px;aspect-ratio:9/17;background:#05080F;border-radius:30px; border:6px solid #16203A;position:relative;overflow:hidden; box-shadow:0 0 0 1px rgba(77,130,243,.25),0 30px 90px rgba(0,0,0,.6), 0 0 80px rgba(37,99,235,.25)} .proj .phone-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; object-position:50% 18%} .proj .phone-shade{position:absolute;inset:0;background: linear-gradient(180deg,rgba(5,8,15,.18) 0%,transparent 26%,transparent 55%, rgba(5,8,15,.82) 100%)} /* variante accueil — karaoké + barre de lecture */ .proj .phone-caption{position:absolute;left:10px;right:10px;bottom:17%;text-align:center; font-size:20px;line-height:1.3} .proj .phone-bar{position:absolute;left:14px;right:14px;bottom:12px;height:4px; border-radius:2px;background:rgba(255,255,255,.14);overflow:hidden} .proj .phone-bar i{display:block;height:100%;width:100%;background:var(--beam-bright); border-radius:2px;transform-origin:left;transform:scaleX(.12); transition:transform .4s linear} /* variante page-outil — jauge de poids avant/après */ .proj .phone-weigh{position:absolute;left:12px;right:12px;bottom:14px} .proj .phone-weigh .t{font-family:var(--mono);font-size:12px;letter-spacing:.05em; color:#E8EDF7;display:flex;justify-content:space-between;margin-bottom:8px} .proj .phone-weigh .t b{color:var(--caption);font-weight:600} .proj .meter{height:5px;border-radius:3px;background:rgba(255,255,255,.16);overflow:hidden} .proj .meter i{display:block;height:100%;width:100%;background:var(--beam-bright); border-radius:3px;transform-origin:left;transform:scaleX(1); transition:transform 1.2s var(--ease)} .proj .in .meter i,.proj .meter.in i{transform:scaleX(.53)} /* pastilles flottantes — communes, contenu variable */ .proj .float-card{position:absolute;background:var(--night-3);border:1px solid var(--line-d); border-radius:10px;padding:11px 15px;font-family:var(--mono);font-size:11.5px; letter-spacing:.08em;text-transform:uppercase;color:var(--muted-d); box-shadow:0 16px 48px rgba(0,0,0,.5)} .proj .float-score{top:16%;right:-2%} .proj .float-score b{display:block;font-family:var(--display);font-size:26px;color:#fff; letter-spacing:.02em} .proj .float-score b::after{content:" /100";font-size:12px;color:var(--muted-d)} .proj .float-formats{bottom:7%;left:-4%} .proj .float-formats span{display:inline-block;background:rgba(37,99,235,.18); color:var(--beam-bright);border-radius:5px;padding:2px 7px;margin:6px 4px 0 0; font-size:11px} .proj .float-gain{top:14%;right:-4%} .proj .float-gain b{display:block;font-family:var(--display);font-size:26px;color:#fff; letter-spacing:.02em} .proj .float-fmt{bottom:24%;left:-7%} .proj .float-fmt span{display:inline-block;background:rgba(37,99,235,.18); color:var(--beam-bright);border-radius:5px;padding:2px 7px;margin:6px 4px 0 0; font-size:11px;text-transform:none} /* --------------------------------------------------------------- PASTILLES DE STYLES DE SOUS-TITRES — specs RÉELLES du moteur de rendu (pas des images) : karaoke, hormozi_v2, mrbeast, glow, neon_box. Rendues par le même code que les exports (etude.md 4.4). Utilisées : téléphone héros, clips démo, bento sous-titres, chips de la section « Styles ». `.w` = un mot, `.w.on` = mot actif (bascule pilotée par le moteur karaoké JS, §guide-integration §6). `.brk` = saut de ligne forcé dans le flux flex (mrbeast, 2 mots/ligne). --------------------------------------------------------------- */ .proj .capline{font-weight:400;color:#fff} .proj .capline .w{display:inline-block; transition:color .12s,transform .12s,opacity .12s} .proj .capline .brk{flex-basis:100%;height:0} /* karaoke — Impact, mot actif surligné #A55200 (style CapCut) */ .proj .sty-karaoke{font-family:Impact,"Anton",sans-serif;letter-spacing:.01em; text-shadow:0 2px 6px rgba(0,0,0,.85)} .proj .sty-karaoke .w.on{background:#A55200;border-radius:.14em;padding:0 .1em; margin:0 -.1em;text-shadow:none} /* hormozi_v2 — Anton, capitales grasses, mot actif #FFD700, pop-in */ .proj .sty-hormozi{font-family:var(--display);text-transform:uppercase; letter-spacing:.02em;text-shadow:0 2px 0 rgba(0,0,0,.9),0 4px 14px rgba(0,0,0,.7)} .proj .sty-hormozi .w.on{color:#FFD700;transform:scale(1.1)} /* mrbeast — Bangers, 2 mots/ligne, contour épais, mot actif #00FF00 */ .proj .sty-mrbeast{font-family:"Bangers",var(--display),sans-serif;letter-spacing:.04em; text-shadow:-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000,2px 2px 0 #000, 0 3px 0 #000,0 5px 10px rgba(0,0,0,.6)} .proj .sty-mrbeast .w.on{color:#00FF00} /* glow (Neon Pulse) — halo néon sur le mot actif */ .proj .sty-glow{font-family:var(--sans);font-weight:800; text-shadow:0 2px 8px rgba(0,0,0,.9)} .proj .sty-glow .w.on{text-shadow:0 0 10px #22D3EE,0 0 30px #0891B2,0 2px 8px rgba(0,0,0,.9)} /* neon_box — cadre néon autour du mot actif */ .proj .sty-neonbox{font-family:var(--sans);font-weight:800; text-shadow:0 2px 8px rgba(0,0,0,.9)} .proj .sty-neonbox .w.on{box-shadow:0 0 0 2px #22D3EE,0 0 18px rgba(34,211,238,.75); border-radius:.12em} /* --------------------------------------------------------------- BANDEAU PREUVE SOCIALE Variante ACCUEIL (.trust) : 4 statistiques alignées en mono, dans le flux nuit, juste sous le héros. Variante PAGE-OUTIL (.proof) : note + étoiles (.rating) + « repères vérifiés » en chips (.datab .chip) — valeurs DYNAMIQUES, voir guide-integration.md §4. --------------------------------------------------------------- */ .proj .trust{padding:26px 0 60px} .proj .trust .wrap{display:flex;justify-content:flex-start;gap:56px;flex-wrap:wrap} .proj .trust .stat{font-family:var(--mono);font-size:12.5px;letter-spacing:.1em; text-transform:uppercase;color:var(--muted-d)} .proj .trust b{display:block;font-family:var(--display);font-size:30px;color:#fff; letter-spacing:.02em;margin-bottom:2px} .proj .trust .stat:last-child b{color:var(--caption)} /* Bandeau de preuve. La maquette y pose la note ET les repères chiffrés ; sur le site les repères vivent dans leur propre module daté et sourcé (.klfacts), juste dessous. Le bandeau ne porte donc que la note : sans les pastilles, la respiration basse de la maquette n'ouvrait qu'un vide. */ .proj .proof{padding:20px 0 32px} .proj .proof:has(.datab){padding-bottom:56px} .proj .proof .wrap{display:flex;align-items:center;gap:40px;flex-wrap:wrap} .proj .rating{display:flex;align-items:center;gap:12px;flex:none;flex-wrap:wrap; max-width:100%} .proj .rating b{font-family:var(--display);font-size:30px;color:#fff;letter-spacing:.02em} .proj .stars{color:var(--caption);font-size:15px;letter-spacing:2px} .proj .rating span{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em; color:var(--muted-d)} .proj .rating span strong{color:#E8EDF7} .proj .datab{display:flex;gap:10px;flex-wrap:wrap;align-items:center} .proj .datab .chip{background:var(--night-2);border:1px solid var(--line-d);border-radius:8px; padding:8px 13px;font-family:var(--mono);font-size:11.5px;letter-spacing:.05em; color:var(--muted-d)} .proj .datab .chip b{color:#E8EDF7;font-weight:600} .proj .datab .note{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em; color:#8091AD;width:100%} /* --------------------------------------------------------------- DÉMONSTRATION AVANT/APRÈS Variante ACCUEIL : vidéo longue 16:9 + timeline à moments forts pulsants (demo-grid/demo-long/demo-timeline) à gauche, 3 clips verticaux scorés (.clip, .clip.mid surélevé, .clip.r45 = 4:5) à droite. Variante PAGE-OUTIL : un seul cadre (demo-frame) présentant le résultat produit par CET outil. --------------------------------------------------------------- */ .proj .demo{position:relative;overflow:hidden} .proj .demo::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(800px 500px at 82% 0%, rgba(37,99,235,.16), transparent 60%)} .proj .demo .wrap{position:relative} .proj .demo-grid{display:grid;grid-template-columns:5fr 7fr;gap:52px;align-items:center; margin-top:52px} .proj .demo-long{background:var(--night-2);border:1px solid var(--line-d);border-radius:14px; padding:16px} .proj .demo-screen{aspect-ratio:16/9;border-radius:8px;position:relative;overflow:hidden} .proj .demo-screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .proj .demo-screen::after{content:"1 H 12 MIN";position:absolute;right:10px;bottom:10px; font-family:var(--mono);font-size:10.5px;letter-spacing:.1em; background:rgba(0,0,0,.6);border-radius:4px;padding:3px 8px;color:#cbd5ea} .proj .demo-timeline{display:flex;gap:3px;margin-top:12px;height:32px;align-items:flex-end} .proj .demo-timeline i{flex:1;background:var(--night-3);border-radius:2px;height:34%} .proj .demo-timeline i.hot{background:var(--beam-bright);height:100%; box-shadow:0 0 14px rgba(77,130,243,.6)} .proj .demo-caption{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em; text-transform:uppercase;color:var(--muted-d);margin-top:12px} .proj .demo-clips{display:flex;gap:18px;justify-content:center;align-items:flex-end} .proj .clip{width:152px;aspect-ratio:9/16;border-radius:12px;position:relative;overflow:hidden; background:#0A0F1F;border:1px solid var(--line-d); box-shadow:0 22px 60px rgba(0,0,0,.55)} .proj .clip img.media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .proj .clip .shade{position:absolute;inset:0;background: linear-gradient(180deg,rgba(5,8,15,.25) 0%,transparent 30%,transparent 52%, rgba(5,8,15,.85) 100%)} .proj .clip.mid{transform:translateY(-18px) scale(1.07); box-shadow:0 22px 60px rgba(0,0,0,.55),0 0 44px rgba(37,99,235,.35)} .proj .clip.r45{aspect-ratio:4/5} .proj .clip .score{position:absolute;top:8px;left:8px;font-family:var(--mono);font-size:10.5px; letter-spacing:.05em;border-radius:4px;padding:2px 6px; background:rgba(37,99,235,.9);color:#fff;z-index:2} .proj .clip .fmt{position:absolute;top:8px;right:8px;font-family:var(--mono);font-size:10px; border-radius:4px;padding:2px 5px;background:rgba(0,0,0,.55);color:#dbe4f5;z-index:2} .proj .clip .cap{position:absolute;left:6px;right:6px;bottom:16%;text-align:center; font-size:14px;line-height:1.3;z-index:2} .proj .clip .title{position:absolute;left:8px;right:8px;bottom:6px;font-size:10px;z-index:2; color:rgba(255,255,255,.92);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* Reset explicite : static/css/style.css:1222 définit AUSSI un .demo-cta non scopé (ancienne page /demo, background/padding/border/text-align) — collision de nom non documentée en tête de fichier. Sans ce reset, ce CTA nuit hérite d'un fond clair (--bg-secondary) qui rend son texte #E8EDF7 quasi invisible (mesuré : la barre apparaît blanche). */ .proj .demo-cta{margin-top:56px;background:none;padding:0;border:0;text-align:center} .proj .demo-frame{background:var(--night-2);border:1px solid var(--line-d);border-radius:14px; padding:16px;max-width:820px;margin:52px auto 0;box-shadow:0 24px 80px rgba(0,0,0,.5)} .proj .demo-frame img{display:block;width:100%;border-radius:8px} /* --------------------------------------------------------------- TROIS ÉTAPES — studio clair, réduit le coût perçu. Commun aux deux familles. Sur page-outil, chaque step peut contenir une petite illustration systémique (step-illu) : zone de dépôt réduite (mini-drop), chips de formats (mini-chips), niveaux à choix (levels, .on = sélectionné), ligne de fichier + bouton de téléchargement rond (dl-row/dl-file/dl-btn). --------------------------------------------------------------- */ .proj .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px} .proj .step{background:var(--card);border-radius:14px;padding:30px 26px; box-shadow:0 2px 8px rgba(17,24,39,.05)} .proj .step .n{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em; color:var(--beam);display:block;margin-bottom:14px} .proj .step h3{font-family:var(--display);font-weight:400;text-transform:uppercase; font-size:24px;letter-spacing:.02em;color:var(--ink);margin-bottom:8px} .proj .step p{font-size:15.5px;color:var(--muted-l)} .proj .step small{display:block;margin-top:16px;font-family:var(--mono);font-size:11.5px; letter-spacing:.08em;text-transform:uppercase;color:var(--faint-l)} .proj .step-illu{border-radius:10px;background:var(--paper);border:1px solid var(--line-l); min-height:120px;display:flex;flex-direction:column;gap:10px;align-items:center; justify-content:center;padding:16px} .proj .mini-drop{border:1.5px dashed rgba(37,99,235,.45);border-radius:8px; padding:10px 22px;display:flex;flex-direction:column;align-items:center;gap:6px; color:var(--beam)} .proj .mini-chips{display:flex;gap:5px;flex-wrap:wrap;justify-content:center} .proj .mini-chips span{font-family:var(--mono);font-size:10px;letter-spacing:.04em; background:#fff;border:1px solid var(--line-l);border-radius:5px;padding:3px 7px; color:var(--muted-l)} .proj .levels{display:flex;gap:8px;flex-wrap:wrap;justify-content:center} .proj .levels span{font-size:13px;font-weight:600;color:var(--muted-l);background:#fff; border:1.5px solid #D7DDE7;border-radius:999px;padding:8px 15px} .proj .levels span.on{background:var(--night);color:#fff;border-color:var(--night)} .proj .level-note{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em; color:var(--faint-l)} /* Variante MUETTE du choix : les options changent d'un outil a l'autre, une etiquette generique serait une promesse fausse. La geometrie dit « on choisit parmi plusieurs », sans rien affirmer. */ .proj .levels--muet span{min-width:58px;height:30px;padding:0} /* Entree par LIEN et par SUJET LIBRE : memes materiaux que la zone de depot, forme differente — l'etape 1 n'est pas un depot de fichier pour tout le monde. */ .proj .mini-drop--lien{border-style:solid;border-color:rgba(37,99,235,.3); padding:12px 30px} .proj .mini-field{width:100%;max-width:210px;background:#fff;border:1px solid var(--line-l); border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:7px} .proj .mini-field i{display:block;height:6px;border-radius:3px;background:var(--line-l)} .proj .mini-field i:nth-child(1){width:100%} .proj .mini-field i:nth-child(2){width:78%} .proj .mini-field i:nth-child(3){width:46%;background:rgba(37,99,235,.35)} .proj .dl-row{display:flex;align-items:center;gap:12px} .proj .dl-file{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--ink); background:#fff;border:1px solid var(--line-l);border-radius:8px;padding:10px 14px} .proj .dl-file b{color:var(--beam)} .proj .dl-btn{width:38px;height:38px;border-radius:50%;background:var(--beam);color:#fff; display:flex;align-items:center;justify-content:center;flex:none; box-shadow:0 6px 20px rgba(37,99,235,.4)} /* --------------------------------------------------------------- BENTO OUTILS — accueil uniquement. Grille asymétrique (2 grandes cellules + 4 normales), présente les familles d'outils. cell-media montre un rendu réel annoté (score/format/sous-titre incrusté) ; .wave = mini-visualisation de silences supprimés ; cell-more = dernière cellule, lien vers le catalogue complet des 33 outils. --------------------------------------------------------------- */ .proj .bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:164px;gap:16px; margin-top:52px} .proj .cell{background:var(--card);border-radius:14px;padding:24px; box-shadow:0 2px 8px rgba(17,24,39,.05);display:flex;flex-direction:column; justify-content:flex-end;transition:transform .25s var(--ease),box-shadow .25s; position:relative;overflow:hidden} .proj .cell:hover{transform:translateY(-3px);box-shadow:0 14px 36px rgba(17,24,39,.1)} .proj .cell h3{font-family:var(--display);font-weight:400;text-transform:uppercase; font-size:20px;letter-spacing:.02em;color:var(--ink);margin-bottom:5px} .proj .cell p{font-size:14px;color:var(--muted-l)} .proj .cell-big{grid-column:span 2;grid-row:span 2} .proj .cell-big h3{font-size:25px} .proj .cell-tag{font-family:var(--mono);font-size:11px;letter-spacing:.12em; text-transform:uppercase;color:var(--beam);margin-bottom:10px} .proj .cell-media{position:relative;border-radius:10px;overflow:hidden;margin-bottom:16px; aspect-ratio:16/8.4;background:var(--night)} .proj .cell-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .proj .cell-media .score{position:absolute;top:10px;left:10px;font-family:var(--mono); font-size:11px;letter-spacing:.05em;border-radius:4px;padding:3px 7px; background:rgba(37,99,235,.9);color:#fff} .proj .cell-media .fmt{position:absolute;top:10px;right:10px;font-family:var(--mono); font-size:10.5px;border-radius:4px;padding:3px 6px;background:rgba(0,0,0,.55); color:#dbe4f5} .proj .cell-media .capover{position:absolute;left:8px;right:8px;bottom:9px; text-align:center;font-size:17px;line-height:1.25} .proj .wave{display:flex;align-items:center;gap:3px;height:24px;margin-bottom:auto} .proj .wave i{width:4px;border-radius:2px;background:var(--beam)} .proj .wave i:nth-child(odd){height:60%}.proj .wave i:nth-child(even){height:100%} .proj .wave i.cut{background:#E3E7EE;height:28%} .proj .cell-more{background:var(--night);justify-content:center;align-items:flex-start} .proj .cell-more a{font-family:var(--display);text-transform:uppercase;font-size:19px; letter-spacing:.03em;color:#fff} .proj .cell-more a:hover{color:var(--beam-bright)} .proj .cell-more p{color:var(--muted-d)} /* --------------------------------------------------------------- CHIPS DE STYLES DE SOUS-TITRES (section « Styles ») — accueil uniquement. Chaque chip présente un .capline vivant (voir plus haut) + son nom en mono. --------------------------------------------------------------- */ .proj .styles-sec{position:relative;overflow:hidden} .proj .styles-sec::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(900px 520px at 50% -10%, rgba(37,99,235,.2), transparent 65%)} .proj .styles-sec .wrap{position:relative} .proj .styles-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:48px} .proj .chip{background:var(--night-2);border:1px solid var(--line-d);border-radius:12px; padding:22px;min-width:186px;flex:1;text-align:center; transition:transform .25s var(--ease),border-color .25s,box-shadow .25s} .proj .chip:hover{transform:translateY(-3px);border-color:var(--beam-bright); box-shadow:0 0 32px rgba(37,99,235,.25)} .proj .chip .capline{font-size:21px;min-height:60px;display:flex;align-items:center; justify-content:center;flex-wrap:wrap;line-height:1.25;gap:.05em .24em} .proj .chip .name{font-family:var(--mono);font-size:11px;letter-spacing:.14em; text-transform:uppercase;color:var(--muted-d);margin-top:12px} .proj .styles-note{font-family:var(--mono);font-size:12px;letter-spacing:.08em; text-transform:uppercase;color:var(--muted-d);margin-top:28px} /* --------------------------------------------------------------- TIMELINE STUDIO — accueil uniquement, aperçu du Studio Klipa. Multipiste dessinée par code : tl-track (une piste), tl-seg.v (vignette vidéo, background-image = la vraie miniature du clip), tl-seg.t (segment titre/texte, jaune caption), tl-seg.i (segment image/logo, violet premium), tl-audio (waveform SVG), tl-head (curseur de lecture). --------------------------------------------------------------- */ .proj .studio-sec{position:relative;overflow:hidden;padding-top:0} .proj .studio-grid{display:grid;grid-template-columns:5fr 7fr;gap:52px;align-items:center; margin-top:8px} .proj .studio-points{list-style:none;margin:26px 0 30px;display:grid;gap:12px} .proj .studio-points li{font-size:15.5px;color:var(--muted-d);padding-left:26px;position:relative} .proj .studio-points li::before{content:"→";position:absolute;left:0;color:var(--beam-bright); font-weight:700} .proj .studio-points b{color:#fff;font-weight:600} .proj .studio-board{background:var(--night-2);border:1px solid var(--line-d);border-radius:14px; padding:18px;box-shadow:0 24px 80px rgba(0,0,0,.5);position:relative} .proj .tl-ruler{height:18px;border-bottom:1px solid var(--line-d);margin-bottom:12px; background:repeating-linear-gradient(90deg,rgba(148,163,190,.4) 0 1px,transparent 1px 56px); background-size:auto 8px;background-position:bottom;background-repeat:repeat-x} .proj .tl-track{display:flex;gap:6px;align-items:stretch;margin-bottom:8px;height:52px} .proj .tl-track.slim{height:30px} .proj .tl-label{flex:none;width:26px;display:flex;align-items:center;justify-content:center; font-family:var(--mono);font-size:10.5px;color:var(--muted-d); background:var(--night-3);border-radius:6px} .proj .tl-seg{border-radius:6px;position:relative;overflow:hidden;border:1px solid rgba(77,130,243,.28)} .proj .tl-seg.v{background-size:cover;background-position:center 26%} .proj .tl-seg.t{background:rgba(255,211,77,.16);border-color:rgba(255,211,77,.4); display:flex;align-items:center;justify-content:center;font-family:var(--display); font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--caption)} .proj .tl-seg.i{background:rgba(124,58,237,.2);border-color:rgba(124,58,237,.45); display:flex;align-items:center;justify-content:center;font-family:var(--mono); font-size:10px;color:#C4B5FD} .proj .tl-audio{flex:1;color:var(--beam-bright);background:rgba(37,99,235,.08); border:1px solid var(--line-d);border-radius:6px;display:flex;align-items:center; padding:0 8px;overflow:hidden} .proj .tl-audio svg{width:100%;height:26px} .proj .tl-head{position:absolute;top:14px;bottom:14px;left:46%;width:2px; background:var(--beam-bright);box-shadow:0 0 12px rgba(77,130,243,.9);border-radius:2px} .proj .tl-head::before{content:"";position:absolute;top:-7px;left:-5px; border:6px solid transparent;border-top-color:var(--beam-bright)} .proj .studio-caption{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em; text-transform:uppercase;color:var(--muted-d);margin-top:12px} /* --------------------------------------------------------------- MISE EN PAGE « DOSSIER » SEO — page-outil uniquement (le long-form qui porte le texte éditorial principal, sommaire ancré + blocs alternés texte/figure). C'est LE gabarit à réutiliser pour les 33 pages-outil : voir guide-integration.md §5. - .toc : sommaire ancré (le lien de chaque item pointe vers l'id du .doss-item correspondant) - .doss-item : bloc 6/6, alterne texte/figure ; .flip inverse l'ordre visuel (figure à gauche) sans changer l'ordre du DOM (accessibilité : lecture toujours texte→figure en HTML) - figures possibles : .doors (schéma de décision à 3 portes), .zoneimg (photo annotée avec zones .cut/.keep), .bars (barres de gain), .durs (bandes durée vs poids) - .clean-callout : encadré de réassurance en fin de dossier --------------------------------------------------------------- */ .proj .doss-head{max-width:760px} .proj .doss-lede{font-size:18px;color:var(--muted-l);margin-top:6px} .proj .doss-lede strong{color:var(--ink)} .proj .toc{margin:36px 0 0;padding:22px 26px;background:var(--card);border-radius:14px; box-shadow:0 2px 8px rgba(17,24,39,.05);max-width:760px} .proj .toc p{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em; text-transform:uppercase;color:var(--beam);margin-bottom:12px} .proj .toc ol{list-style:none;display:grid;gap:8px} .proj .toc a{display:flex;gap:12px;align-items:baseline;color:var(--ink);font-size:15px; font-weight:500;padding:4px 0} .proj .toc a:hover{color:var(--beam)} .proj .toc .n{font-family:var(--mono);font-size:11.5px;color:var(--beam);flex:none} .proj .doss-item{display:grid;grid-template-columns:6fr 6fr;gap:52px;align-items:center; margin-top:88px} .proj .doss-item.flip .doss-txt{order:2} .proj .doss-item.flip .doss-fig{order:1} /* Variante LECTURE — un dossier au texte long face à UNE seule figure. `align-items:center` (le défaut, prévu pour un bloc court en vis-à-vis d'un schéma) centrait une image basse au milieu d'une colonne de texte très haute : l'image flottait dans un grand vide, et le texte était comprimé sur la moitié de la largeur. Ici la figure se cale en HAUT et SUIT la lecture, la colonne de texte reprend la part qui lui revient, et le texte garde une longueur de ligne lisible plutôt que de s'étirer. */ .proj .doss-item.is-read{grid-template-columns:minmax(0,7fr) minmax(0,5fr); align-items:start;gap:56px;margin-top:40px} .proj .doss-item.is-read .doss-txt{max-width:68ch} .proj .doss-item.is-read .doss-fig{position:sticky;top:96px} .proj .doss-item.is-read .doss-txt > h3{margin-top:34px} .proj .doss-item.is-read .doss-txt > h3:first-child{margin-top:0} .proj .doss-item.is-read .doss-txt > p + p{margin-top:12px} @media (max-width:900px){ .proj .doss-item.is-read{grid-template-columns:1fr;gap:32px} .proj .doss-item.is-read .doss-fig{position:static;order:-1} } .proj .doss-n{font-family:var(--mono);font-size:12px;letter-spacing:.14em; color:var(--beam);display:block;margin-bottom:12px} .proj .doss-item h3{font-family:var(--display);font-weight:400;text-transform:uppercase; font-size:clamp(21px,2.2vw,27px);letter-spacing:.015em;line-height:1.15; color:var(--ink);margin-bottom:14px} .proj .doss-item p{font-size:16px;color:var(--muted-l)} .proj .doss-item p strong{color:var(--ink)} .proj .doss-fig{min-width:0} /* figure : schéma « 3 portes » (décision) */ .proj .doors{display:grid;gap:12px} .proj .door{display:flex;align-items:center;gap:16px;background:var(--card); border:1px solid var(--line-l);border-radius:12px;padding:16px 18px} .proj .door .q{flex:1;font-size:14.5px;color:var(--muted-l)} .proj .door .q b{display:block;color:var(--ink);font-size:15px} .proj .door .r{flex:none;font-family:var(--mono);font-size:11.5px;letter-spacing:.05em; color:var(--beam);text-align:right} .proj .door.on{background:#EEF3FE;border-color:rgba(37,99,235,.35); box-shadow:0 10px 30px rgba(37,99,235,.12)} .proj .door.on .r{color:var(--ink);background:var(--night);border-radius:6px; padding:6px 10px;color:#fff} .proj .door-arrow{width:26px;height:26px;flex:none;border-radius:7px; background:rgba(37,99,235,.1);display:flex;align-items:center;justify-content:center; color:var(--beam)} /* figure : photo annotée (zones expliquées) */ .proj .zoneimg{position:relative;border-radius:14px;overflow:hidden;background:var(--night); box-shadow:0 18px 56px rgba(17,24,39,.16)} .proj .zoneimg img{display:block;width:100%} .proj .zone{position:absolute;border-radius:10px;pointer-events:none} .proj .zone.cut{border:2px dashed rgba(255,255,255,.7)} .proj .zone.keep{border:2px solid var(--beam-bright); box-shadow:0 0 24px rgba(77,130,243,.45)} .proj .zone label{position:absolute;left:8px;top:8px;font-family:var(--mono); font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:#E8EDF7; background:rgba(0,0,0,.62);border-radius:5px;padding:3px 8px;white-space:nowrap} .proj .zone.keep label{color:#fff;background:rgba(29,78,216,.92);left:auto;right:8px; top:auto;bottom:8px} .proj .figcap{font-family:var(--mono);font-size:11px;letter-spacing:.06em; text-transform:uppercase;color:var(--faint-l);margin-top:12px} .proj .factors{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px} .proj .factors span{font-family:var(--mono);font-size:11.5px;letter-spacing:.05em; background:var(--card);border:1px solid var(--line-l);border-radius:6px; padding:6px 11px;color:var(--muted-l)} .proj .factors b{color:var(--beam);font-weight:600} /* figure : barres de gain (une seule transition à l'entrée à l'écran) */ .proj .bars{background:var(--card);border:1px solid var(--line-l);border-radius:14px; padding:24px 26px;display:grid;gap:18px} .proj .bar-row .l{display:flex;justify-content:space-between;align-items:baseline; font-size:14px;color:var(--muted-l);margin-bottom:8px} .proj .bar-row .l b{font-family:var(--mono);font-size:13px;color:var(--ink); letter-spacing:.02em} .proj .bar-row .l .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em; color:var(--beam)} .proj .track{height:10px;border-radius:5px;background:#EBEEF3;overflow:hidden} .proj .track i{display:block;height:100%;border-radius:5px;background:var(--beam); transform-origin:left;transform:scaleX(0);transition:transform .9s var(--ease)} .proj .in .track i{transform:none} /* figure : durée vs poids (bandes) */ .proj .durs{background:var(--card);border:1px solid var(--line-l);border-radius:14px; padding:24px 26px;display:grid;gap:20px} .proj .dur .l{display:flex;justify-content:space-between;font-size:14px; color:var(--muted-l);margin-bottom:8px} .proj .dur .l b{font-family:var(--mono);font-size:13px;color:var(--ink)} .proj .dur .strip{display:flex;gap:3px} .proj .dur .strip i{height:22px;flex:1;border-radius:4px;background:#D8DFEA} .proj .dur.long .strip i{background:var(--night-3)} .proj .dur.long .strip i:nth-child(odd){background:#1C2A4A} .proj .dur.short .strip{max-width:9%} .proj .dur.short .strip i{background:var(--beam)} /* encadré de réassurance en fin de dossier */ .proj .clean-callout{background:var(--night);border-radius:14px;padding:30px 32px; color:#E8EDF7;display:flex;gap:26px;align-items:center;flex-wrap:wrap; margin-top:88px;position:relative;overflow:hidden} .proj .clean-callout::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(420px 260px at 12% 0%, rgba(37,99,235,.3), transparent 65%)} .proj .clean-badge{flex:none;position:relative;font-family:var(--display);font-size:30px; letter-spacing:.02em;color:var(--caption);border:1px solid rgba(255,211,77,.35); border-radius:10px;padding:14px 20px;text-transform:uppercase} .proj .clean-callout>div{flex:1;min-width:260px;position:relative} .proj .clean-callout h3{font-family:var(--display);font-weight:400;text-transform:uppercase; font-size:22px;letter-spacing:.02em;margin-bottom:8px} .proj .clean-callout p{font-size:15.5px;color:var(--muted-d)} /* --------------------------------------------------------------- BÉNÉFICES (grille 2×2) — page-outil uniquement. bene-visual est un fond nuit qui héberge une petite illustration systémique variable : gain-readout (jauge + lecture chiffrée), wm-frame (cadre image + badge « sans filigrane »), tri-levels (3 colonnes de niveaux empilés), fmt-flow (flux formats entrée→sortie). --------------------------------------------------------------- */ .proj .bene{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:52px} .proj .bene-card{background:var(--card);border-radius:14px;overflow:hidden; box-shadow:0 2px 8px rgba(17,24,39,.05);display:flex;flex-direction:column} .proj .bene-visual{background:var(--night);padding:24px;display:flex;align-items:center; justify-content:center;min-height:132px;position:relative;overflow:hidden} .proj .bene-visual::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(320px 180px at 30% 0%, rgba(37,99,235,.28), transparent 70%)} .proj .bene-body{padding:24px 26px 28px} .proj .bene-body h3{font-family:var(--display);font-weight:400;text-transform:uppercase; font-size:21px;letter-spacing:.02em;color:var(--ink);margin-bottom:8px} .proj .bene-body p{font-size:15px;color:var(--muted-l)} .proj .gain-readout{position:relative;width:100%;max-width:320px} .proj .gain-readout .t{font-family:var(--mono);font-size:13px;letter-spacing:.05em; color:#E8EDF7;display:flex;justify-content:space-between;margin-bottom:10px} .proj .gain-readout .t b{color:var(--caption);font-weight:600} .proj .gain-note{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em; color:var(--muted-d);margin-top:10px} .proj .wm-frame{position:relative;width:100%;max-width:320px;aspect-ratio:16/8; border-radius:10px;overflow:hidden} .proj .wm-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; object-position:50% 30%} .proj .wm-frame .b{position:absolute;right:8px;bottom:8px;font-family:var(--mono); font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:#fff; background:rgba(29,78,216,.92);border-radius:5px;padding:4px 9px} .proj .tri-levels{position:relative;display:flex;gap:18px;align-items:flex-end} .proj .tri-levels .col{display:flex;flex-direction:column;align-items:center;gap:8px} .proj .tri-levels .stack{width:44px;border-radius:6px;background:rgba(77,130,243,.24); border:1px solid rgba(77,130,243,.4)} .proj .tri-levels .col:nth-child(1) .stack{height:64px} .proj .tri-levels .col:nth-child(2) .stack{height:44px;background:rgba(77,130,243,.5)} .proj .tri-levels .col:nth-child(3) .stack{height:26px;background:var(--beam-bright)} .proj .tri-levels span{font-family:var(--mono);font-size:10px;letter-spacing:.04em; color:var(--muted-d);text-transform:uppercase} .proj .fmt-flow{position:relative;display:flex;align-items:center;gap:14px;flex-wrap:wrap; justify-content:center} .proj .fmt-in{display:grid;grid-template-columns:repeat(2,auto);gap:6px} .proj .fmt-in span,.proj .fmt-out{font-family:var(--mono);font-size:11px;letter-spacing:.04em; background:rgba(255,255,255,.08);border:1px solid var(--line-d);border-radius:6px; padding:5px 9px;color:#E8EDF7;text-align:center} .proj .fmt-arrow{color:var(--beam-bright);flex:none} .proj .fmt-out{background:rgba(37,99,235,.25);border-color:rgba(77,130,243,.5); font-weight:600} /* --------------------------------------------------------------- CAS D'USAGE — page-outil uniquement, liste verticale de cartes nuit (uc), icône + numéro mono + titre + description. --------------------------------------------------------------- */ .proj .uc-list{margin-top:52px;display:grid;gap:14px;max-width:880px} .proj .uc{display:flex;gap:22px;background:var(--night-2);border:1px solid var(--line-d); border-radius:14px;padding:24px 26px; transition:border-color .25s,transform .25s var(--ease)} .proj .uc:hover{border-color:rgba(77,130,243,.4);transform:translateY(-2px)} .proj .uc-ico{flex:none;width:46px;height:46px;border-radius:11px; background:rgba(37,99,235,.14);display:flex;align-items:center;justify-content:center; color:var(--beam-bright)} .proj .uc-n{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--muted-d); display:block;margin-bottom:5px} .proj .uc h3{font-size:17px;font-weight:700;color:#fff;margin-bottom:6px;line-height:1.35} .proj .uc p{font-size:15px;color:var(--muted-d)} .proj .mid-cta{margin-top:64px;text-align:center} .proj .mid-cta .btn{min-width:260px} /* --------------------------------------------------------------- OUTILS COMPLÉMENTAIRES (maillage interne) — page-outil uniquement, grille de 4 cartes claires vers d'autres outils. Alimenté par le moteur de recommandation, PAS une liste éditoriale figée — voir guide-integration.md §4. --------------------------------------------------------------- */ .proj .rel{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:52px} .proj .rel a{background:var(--card);border-radius:12px;padding:20px 22px; box-shadow:0 2px 8px rgba(17,24,39,.05);display:flex;flex-direction:column;gap:8px; transition:transform .25s var(--ease),box-shadow .25s} .proj .rel a:hover{transform:translateY(-3px);box-shadow:0 14px 36px rgba(17,24,39,.1)} .proj .rel b{font-size:15.5px;font-weight:700;color:var(--ink)} .proj .rel b::after{content:" →";color:var(--beam)} .proj .rel span{font-family:var(--mono);font-size:11px;letter-spacing:.03em; color:var(--faint-l)} /* --------------------------------------------------------------- TÉMOIGNAGES — commun. Variante accueil : .metric (résultat chiffré en display, ex. « ×3 »). Variante page-outil : .stars (étoiles en tête de carte) au lieu du métrique. --------------------------------------------------------------- */ .proj .quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px} .proj .quote{background:var(--card);border-radius:14px;padding:28px; box-shadow:0 2px 8px rgba(17,24,39,.05);display:flex;flex-direction:column;gap:16px} .proj .quote .metric{font-family:var(--display);font-size:36px;color:var(--ink); letter-spacing:.01em} .proj .quote .metric small{display:block;font-family:var(--mono);font-size:11px; letter-spacing:.1em;text-transform:uppercase;color:var(--beam);margin-top:4px} .proj .quote .stars{font-size:14px} .proj .quote p{font-size:15px;color:var(--muted-l)} .proj .quote .who{display:flex;align-items:center;gap:12px;margin-top:auto} .proj .who b{display:block;font-size:14.5px;color:var(--ink)} .proj .who span{font-size:13px;color:var(--faint-l)} /* --------------------------------------------------------------- TARIFS — accueil uniquement (une page-outil renvoie vers #tarifs de l'accueil, elle ne duplique pas la grille de plans). Bascule mensuel/annuel (toggle-box, [data-monthly]/[data-annual] permutés par JS — voir guide-integration.md §4 : PRIX = DONNÉE SERVEUR, jamais figée dans le HTML). Plan vedette = .plan-star (voile bleu pâle + badge). .pass = carte pleine largeur sous la grille. --------------------------------------------------------------- */ .proj .toggle{display:flex;margin:38px 0 42px} .proj .toggle-box{display:flex;background:#EBEEF3;border-radius:999px;padding:4px;gap:4px} .proj .toggle-box button{border:0;background:none;border-radius:999px;padding:10px 20px; font-size:15px;font-weight:600;color:var(--muted-l);cursor:pointer; font-family:var(--sans);transition:background .2s,color .2s} .proj .toggle-box button.on{background:var(--night);color:#fff} .proj .toggle-box .gift{font-family:var(--mono);color:var(--caption);font-size:11.5px; margin-left:6px;letter-spacing:.04em} .proj .toggle-box button:not(.on) .gift{color:var(--beam)} .proj .plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch} .proj .plan{background:var(--card);border-radius:14px;padding:30px 26px; box-shadow:0 2px 8px rgba(17,24,39,.05);display:flex;flex-direction:column; position:relative} .proj .plan-star{background:#EEF3FE;box-shadow:0 18px 56px rgba(37,99,235,.16)} .proj .plan-badge{position:absolute;top:-13px;left:26px;background:var(--night);color:#fff; font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase; border-radius:6px;padding:5px 12px} .proj .plan-badge b{color:var(--caption);font-weight:600} .proj .plan h3{font-family:var(--display);font-weight:400;text-transform:uppercase; font-size:24px;letter-spacing:.02em;color:var(--ink)} .proj .plan .for{font-size:13.5px;color:var(--faint-l);margin:3px 0 18px} .proj .price{font-family:var(--display);font-size:46px;color:var(--ink);letter-spacing:.01em} .proj .price small{font-family:var(--sans);font-size:14px;color:var(--faint-l);font-weight:500} .proj .price-note{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em; color:var(--muted-l);min-height:20px;margin:2px 0 20px} .proj .plan ul{list-style:none;margin:0 0 26px;display:grid;gap:10px} .proj .plan li{font-size:15px;padding-left:24px;position:relative;color:var(--muted-l)} .proj .plan li::before{content:"→";position:absolute;left:0;color:var(--beam);font-weight:700} .proj .plan li b{color:var(--ink)} .proj .plan li.no{color:var(--faint-l)} .proj .plan li.no::before{content:"—";color:#9AA3B2} .proj .plan .btn{margin-top:auto;width:100%} .proj .plan-micro{text-align:center;font-family:var(--mono);font-size:11px; letter-spacing:.05em;color:var(--faint-l);margin-top:10px} .proj .pass{margin-top:24px;background:var(--night);border-radius:14px;padding:26px 30px; display:flex;align-items:center;gap:24px;flex-wrap:wrap;color:#E8EDF7} .proj .pass-tag{font-family:var(--mono);font-size:11px;letter-spacing:.12em; text-transform:uppercase;color:var(--caption);border:1px solid rgba(255,211,77,.35); border-radius:6px;padding:6px 10px;flex:none} .proj .pass b{font-family:var(--display);font-weight:400;text-transform:uppercase; font-size:19px;letter-spacing:.02em;display:block} .proj .pass p{font-size:14.5px;color:var(--muted-d)} .proj .pass .btn{margin-left:auto} .proj .pricing-note{font-family:var(--mono);font-size:11.5px;letter-spacing:.05em; color:var(--faint-l);margin-top:24px} /* --------------------------------------------------------------- FAQ ACCORDÉON — commun. Accueil : colonne unique (.faq, largeur 760 px). Page-outil : deux colonnes (.faq-grid) car plus de questions.

natifs (pas de JS pour l'ouverture : le seul comportement natif du navigateur) ; le « + » pivote en croix à l'ouverture. --------------------------------------------------------------- */ .proj .faq{max-width:760px;margin:48px 0 0} .proj .faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 22px;margin-top:48px; align-items:start} .proj details{background:var(--card);border-radius:10px;padding:20px 24px;margin-bottom:10px; box-shadow:0 2px 8px rgba(17,24,39,.04)} .proj summary{cursor:pointer;font-weight:600;font-size:16.5px;color:var(--ink); list-style:none;position:relative;padding-right:32px} .proj summary::-webkit-details-marker{display:none} .proj summary::after{content:"+";position:absolute;right:2px;top:-3px;font-size:22px; color:var(--beam);transition:transform .2s var(--ease)} .proj details[open] summary::after{transform:rotate(45deg)} .proj details p{margin-top:12px;font-size:15px;color:var(--muted-l)} /* --------------------------------------------------------------- ARTICLES LIÉS (blog) — commun (fond nuit). Contenu sélectionné par similarité vocabulaire (app/tool_articles.py) sur page-outil, jamais une liste éditoriale figée — voir guide-integration.md §4. --------------------------------------------------------------- */ .proj .blog-sec{position:relative;overflow:hidden} .proj .blog-sec::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(760px 460px at 14% 0%, rgba(37,99,235,.16), transparent 62%)} .proj .blog-sec .wrap{position:relative} .proj .posts{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px} .proj .post{display:flex;flex-direction:column;background:var(--night-2); border:1px solid var(--line-d);border-radius:14px;overflow:hidden;color:#E8EDF7; transition:transform .25s var(--ease),border-color .25s,box-shadow .25s} .proj .post:hover{transform:translateY(-4px);border-color:var(--beam-bright); box-shadow:0 18px 50px rgba(0,0,0,.5)} .proj .post-media{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center; background:radial-gradient(320px 200px at 50% 60%, rgba(37,99,235,.3), transparent 75%), linear-gradient(180deg,#101A33,#0A101F)} .proj .post-media img{width:56%;height:auto;filter:drop-shadow(0 14px 30px rgba(0,0,0,.5))} .proj .post-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1} .proj .post h3{font-size:17.5px;font-weight:700;line-height:1.4;margin-bottom:8px;color:#fff} .proj .post p{font-size:14px;color:var(--muted-d);flex:1} .proj .post-meta{display:flex;justify-content:space-between;align-items:center;margin-top:16px; font-family:var(--mono);font-size:11.5px;letter-spacing:.06em; text-transform:uppercase;color:var(--muted-d)} .proj .post-meta b{color:var(--kick-d);font-weight:600} .proj .blog-cta{margin-top:44px} .proj .blog-note{font-family:var(--mono);font-size:12px;letter-spacing:.08em; text-transform:uppercase;color:var(--muted-d);margin-top:28px} /* --------------------------------------------------------------- CTA FINAL — commun (nuit, halo, widget de dépôt répété). Variante page-outil : .concl (bloc de conclusion avant le CTA, montre le Studio sur ordinateur + téléphone superposés via .devices). --------------------------------------------------------------- */ .proj .final{position:relative;overflow:hidden} .proj .final::before{content:"";position:absolute;inset:0;pointer-events:none; background: radial-gradient(760px 420px at 30% -10%, rgba(37,99,235,.32), transparent 62%), radial-gradient(520px 320px at 90% 110%, rgba(37,99,235,.16), transparent 60%)} .proj .final .wrap{position:relative;display:grid;grid-template-columns:6fr 6fr;gap:56px; align-items:center} .proj .final h2{margin-bottom:14px;font-size:clamp(26px,3.4vw,42px)} .proj .final .sub{margin-bottom:0} .proj .final-deco{position:absolute;width:170px;right:4%;top:-30px;opacity:.9; filter:drop-shadow(0 20px 50px rgba(37,99,235,.4));pointer-events:none} .proj .final-micro{text-align:center;font-family:var(--mono);font-size:11px; letter-spacing:.05em;color:var(--muted-d);margin-top:12px} .proj .concl{padding-top:0} .proj .concl .wrap{display:grid;grid-template-columns:6fr 6fr;gap:56px;align-items:center} /* IMAGES DE CONTENU — celles que le moteur insère sans classe (intro, démo, conclusion). Elles portent `width`/`height` en attributs, ce qui est bon pour éviter les sauts de mise en page, mais le CSS ne remettait jamais `height:auto` : la largeur se réduisait à la colonne pendant que la hauteur restait figée, donc l'image était ÉCRASÉE. Mesuré sur video-resizer : 51 % de déformation sur la conclusion, 50 % sur l'intro, 14 % sur la démo — sur les 35 pages. On en profite pour leur donner un cadre : coins arrondis et liseré, dans le vocabulaire des écrans de la maquette. */ .proj section img:not([class]){display:block;width:100%;height:auto;max-width:100%; border-radius:14px} .proj section:not(.light) img:not([class]){ box-shadow:0 0 0 1px rgba(77,130,243,.22),0 26px 70px rgba(0,0,0,.45)} .proj .light img:not([class]){ box-shadow:0 0 0 1px rgba(17,24,39,.08),0 18px 46px rgba(17,24,39,.10)} /* SUJETS DÉTOURÉS (canal alpha) — intro, atouts, conclusion. Ils se posent directement sur le fond de la section : pas de liseré ni d'ombre, qui dessineraient un rectangle autour du vide, et pas d'étirement à la largeur de la colonne — une personne n'est pas une capture d'écran. Le buste s'arrête au bord bas du fichier : il s'y fond, au lieu d'être tranché net. */ .proj .kl-cut{display:block;width:auto;max-width:100%;height:auto;margin:0 auto; border-radius:0;box-shadow:none; -webkit-mask-image:linear-gradient(180deg,#000 78%,transparent 99%); mask-image:linear-gradient(180deg,#000 78%,transparent 99%)} /* HAUTEUR FERME, jamais `max-height` seule : tant qu'elle n'est pas chargee, une image en largeur/hauteur automatiques n'occupe aucune place — donc elle n'entre jamais dans le champ, donc `loading="lazy"` ne la charge jamais. Mesure : 0x0 px sur les trois cartes d'atouts. */ .proj .doss-fig .kl-cut,.proj .concl .kl-cut{height:460px} .proj .steps .kl-cut{height:250px;margin-bottom:14px} @media (max-width:900px){ .proj .doss-fig .kl-cut,.proj .concl .kl-cut{height:340px} } /* Les actions du CTA final s'empilent dans leur cellule, jamais côte à côte, et se centrent : ce bloc est centré, un bouton calé à gauche y flottait de travers. */ .proj .final-actions{display:flex;flex-direction:column;align-items:center;gap:12px} .proj .concl h2.display{font-size:clamp(24px,3vw,36px)} .proj .concl p{font-size:16px;color:var(--muted-d)} .proj .devices{position:relative;display:flex;justify-content:center;align-items:flex-end; gap:0} .proj .dev-laptop{width:78%;background:#05080F;border:5px solid #16203A;border-radius:14px; overflow:hidden;position:relative; box-shadow:0 0 0 1px rgba(77,130,243,.22),0 26px 70px rgba(0,0,0,.55)} .proj .dev-laptop img{display:block;width:100%;aspect-ratio:16/9.6;object-fit:cover} .proj .dev-badge{position:absolute;left:10px;bottom:10px;font-family:var(--mono); font-size:10.5px;letter-spacing:.06em;color:#fff;background:rgba(29,78,216,.92); border-radius:5px;padding:4px 9px} .proj .dev-phone{width:26%;margin-left:-9%;aspect-ratio:9/17;background:#05080F; border:4px solid #16203A;border-radius:18px;overflow:hidden;position:relative; box-shadow:0 0 0 1px rgba(77,130,243,.25),0 22px 60px rgba(0,0,0,.6), 0 0 60px rgba(37,99,235,.22);z-index:2} .proj .dev-phone img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; object-position:50% 20%} .proj .dev-phone .dev-badge{left:6px;right:6px;bottom:6px;text-align:center} /* --------------------------------------------------------------- PIED DE PAGE — 4 blocs + barre légale. Commun, identique sur toutes les pages qui portent .proj. --------------------------------------------------------------- */ .proj footer{background:#05080F;color:var(--muted-d);padding:72px 0 32px; border-top:1px solid var(--line-d)} .proj .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px; margin-bottom:56px} .proj .foot-grid h4{font-family:var(--mono);color:#fff;font-size:12px;font-weight:600; letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px} .proj .foot-grid a{display:block;color:var(--muted-d);font-size:14.5px;margin-bottom:10px} .proj .foot-grid a:hover{color:#fff} .proj .foot-grid a.logo{margin-bottom:0} .proj .foot-grid .logo img{height:24px} .proj .foot-brand p{font-size:14.5px;margin:14px 0 20px;max-width:270px} .proj .lang{display:inline-flex;gap:8px;border:1px solid var(--line-d);border-radius:8px; padding:8px 14px;font-family:var(--mono);font-size:12px;letter-spacing:.06em} .proj .lang a{display:inline;margin:0;color:var(--muted-d)} .proj .lang a.on{color:#fff} .proj .foot-legal{border-top:1px solid var(--line-d);padding-top:26px;display:flex; justify-content:space-between;flex-wrap:wrap;gap:14px;font-size:13.5px} .proj .foot-legal a{color:var(--muted-d);margin-left:20px} .proj .foot-legal a:hover{color:#fff} /* --------------------------------------------------------------- PILULE D'ACTION COLLANTE — ne recouvre jamais la lecture : rétractée pendant le défilement vers le bas, visible à l'arrêt ou en remontée, masquée près du CTA final et du footer (logique JS, voir guide-integration.md §6). Variante accueil : champ URL visible (.sticky-pill input). Variante page-outil, plus étroite : un libellé mono (.lbl) au lieu du champ. La classe .show (posée par JS) est ce qui la fait apparaître — jamais une animation en boucle. --------------------------------------------------------------- */ .proj .sticky-pill{position:fixed;left:50%;bottom:18px;transform:translate(-50%,140%); z-index:60;display:flex;gap:8px;align-items:center;background:var(--night-2); border:1px solid var(--line-d);border-radius:999px;padding:8px; box-shadow:0 18px 60px rgba(0,0,0,.6),0 0 44px rgba(37,99,235,.3); transition:transform .3s var(--ease);max-width:min(560px,calc(100vw - 24px)); pointer-events:none} .proj .sticky-pill--tool{max-width:min(430px,calc(100vw - 24px))} .proj .sticky-pill.show{transform:translate(-50%,0);pointer-events:auto} .proj .sticky-pill input{border:0;background:transparent;color:#E8EDF7;font-size:14.5px; padding:0 10px 0 16px;min-width:0;flex:1;width:230px} .proj .sticky-pill input::placeholder{color:#8091AD} .proj .sticky-pill input:focus{outline:none} .proj .sticky-pill .lbl{font-family:var(--mono);font-size:12px;letter-spacing:.05em; color:var(--muted-d);padding:0 8px 0 16px;white-space:nowrap} .proj .sticky-pill .btn{border-radius:999px;min-height:48px;padding:0 22px;font-size:15px; white-space:nowrap} /* --------------------------------------------------------------- RÉVÉLATIONS AU DÉFILEMENT + TOAST + prefers-reduced-motion .reveal : opacity/transform uniquement, activée une fois par IntersectionObserver (jamais rejouée) — voir guide-integration.md §6. .toast : rappel ponctuel (maquette uniquement — en production, ce mécanisme est remplacé par les vrais retours produit ; ne PAS porter le texte « Maquette : … » tel quel, voir guide-integration.md §7). --------------------------------------------------------------- */ .proj .reveal{opacity:0;transform:translateY(22px); transition:opacity .5s var(--ease),transform .5s var(--ease)} .proj .reveal.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .proj *,.proj *::before,.proj *::after{animation:none!important;transition:none!important} .proj .reveal{opacity:1;transform:none} .proj .sticky-pill{transition:none} .proj .meter i{transform:scaleX(.53)} .proj .track i{transform:none} } .proj .toast{position:fixed;left:50%;bottom:88px;transform:translate(-50%,20px);z-index:70; background:#fff;color:var(--ink);border-radius:10px;padding:13px 22px; font-size:14.5px;opacity:0;transition:opacity .3s,transform .3s;pointer-events:none; max-width:90vw;text-align:center;box-shadow:0 18px 60px rgba(0,0,0,.45)} .proj .toast.show{opacity:1;transform:translate(-50%,0)} /* --------------------------------------------------------------- RESPONSIVE Points de rupture communs aux deux familles ; les règles marquées « PAGE-OUTIL » ne s'appliquent qu'aux classes propres au gabarit dossier/bénéfices/cas d'usage/maillage. --------------------------------------------------------------- */ @media (max-width:1080px){ .proj .nav-right .qlink,.proj .nav-sep{display:none} } @media (max-width:1020px){ .proj .hero .wrap{grid-template-columns:1fr;gap:48px} .proj .hero-visual{justify-content:flex-start;padding-left:8px} .proj .phone{width:230px} .proj .demo-grid{grid-template-columns:1fr} .proj .studio-grid{grid-template-columns:1fr;gap:36px} .proj .bento{grid-template-columns:repeat(2,1fr)} .proj .steps,.proj .quotes,.proj .plans,.proj .posts{grid-template-columns:1fr;max-width:520px} .proj .final .wrap{grid-template-columns:1fr;gap:40px} .proj .foot-grid{grid-template-columns:1fr 1fr} /* PAGE-OUTIL */ .proj .doss-item{grid-template-columns:1fr;gap:30px;margin-top:64px} .proj .doss-item.flip .doss-txt{order:1} .proj .doss-item.flip .doss-fig{order:2} .proj .bene{grid-template-columns:1fr;max-width:520px} .proj .rel{grid-template-columns:repeat(2,1fr)} .proj .faq-grid{grid-template-columns:1fr} .proj .concl .wrap{grid-template-columns:1fr;gap:40px} } @media (max-width:900px){ .proj .nav-links{display:none} .proj .burger{display:block} .proj .nav-right{gap:10px} .proj .nav-right .login{display:none} } @media (max-width:720px){ .proj section{padding:60px 0} .proj .hero{padding:40px 0 28px} .proj .hero--tool{padding:36px 0 28px} .proj .hero h1{font-size:clamp(30px,8.6vw,40px)} .proj .hero--tool h1{font-size:clamp(28px,8vw,38px)} .proj h2.display{font-size:clamp(26px,6.8vw,34px)} .proj .final h2{font-size:clamp(23px,6vw,30px)} .proj header,.proj .nav{height:60px} .proj .mnav{top:60px} .proj .logo img{height:22px} .proj .nav-right .btn{min-height:38px;padding:0 13px;font-size:13.5px} .proj .trust .wrap{gap:26px} .proj .trust b{font-size:24px} .proj .drop-row{flex-direction:column} .proj .drop-row .btn{width:100%} .proj .demo-clips{gap:10px} .proj .clip{width:31%} .proj .clip.mid{transform:translateY(-10px) scale(1.05)} .proj .clip .cap{font-size:12px} .proj .phone-caption{font-size:17px} .proj .cell-media{aspect-ratio:16/9} .proj .final-deco{display:none} .proj .pass .btn{margin-left:0;width:100%} .proj .sticky-pill input{display:none} .proj .sticky-pill{padding:6px;bottom:12px} .proj .sticky-pill .btn{width:100%;min-height:46px} .proj .tl-track{height:42px} .proj .studio-board{padding:14px} /* PAGE-OUTIL */ .proj .crumbs{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} .proj .proof .wrap{gap:20px} .proj .rating b{font-size:24px} .proj .doss-item{margin-top:56px} .proj .clean-callout{margin-top:56px;padding:24px} .proj .rel{grid-template-columns:1fr} .proj .uc{flex-direction:column;gap:14px;padding:20px} .proj .sticky-pill .lbl{display:none} .proj .tri-levels{gap:12px} .proj .demo-frame{padding:12px} } /* ================================================================ PAGES SECONDAIRES — v2 (extension additive, ne modifie aucune règle ci-dessus : l'accueil et la page-outil pilote restent inchangés octet pour octet dans leur rendu). ================================================================ Source : docs/etude-accueil-conversion/maquettes-sections/*.html (auth, blog, cas-usage, comparatif, contact, credits, dashboard- videos, dashboard-abonnement, erreurs, job, legal, studio-atelier, tools-index). outils-maquettes/video-compressor.html (pilote) est déjà 100% couvert par le système ci-dessus — aucune classe manquante, aucun ajout nécessaire depuis ce fichier. Dédoublonnage : cas-usage/comparatif/contact/credits/erreurs/job/ legal partagent un seul bloc « secondaires » identique ; dashboard- videos/dashboard-abonnement partagent un seul bloc « dashboard » ; blog/tools-index partagent un seul bloc « contenu ». Les jetons d'état (--err-ink, --warn-ink, --run-ink, --neu-ink…) répétés à l'identique dans chaque extension source sont fusionnés une seule fois ci-dessous. Collision de noms à valeurs DIFFÉRENTES (la seule) : .set-grid existe dans dashboard (réglages/abonnement, 1fr 1fr) ET dans l'atelier (aperçu + choix, 5fr 7fr). Dashboard est déjà couplé aux gabarits en production (dashboard.html/settings.html) ; la copie atelier est renommée .at-set-grid pour ne rien lui faire perdre. Volontairement EXCLUS (harnais de maquette, pas des composants produit — absents des vrais gabarits templates/*.html) : .spec-intro / .pnav / .spec-note / .screen /.screen-in / .screen--light / .screen-cap / section.spec (bannières « Prototype — X » et cadres d'écran de présentation, blog + studio-atelier) ; .maq-state / .maq-tabs / .maq-states / section.scr (bascules d'écran internes aux fichiers de maquette, dashboard + auth) ; l'override desktop de .sticky-pill vu en fin d'extension blog (portée non confirmée comme règle produit générale — risque pour le harnais de fidélité accueil, qui capture aussi #tarifs/ #faq/#blog en 1400x900). ================================================================ */ /* --- jetons d'état partagés, fusionnés depuis les extensions source --- */ :root{ --danger-nuit:#EF4444; /* rouge lisible sur nuit (5,23:1) */ --err-ink:#C81E1E; --err-bg:#FDECEC; /* erreur */ --warn-ink:#92400E; --warn-bg:#FBEEDA; /* attention / pop-up bloquée */ --run-ink:#1D4ED8; --run-bg:#E7EEFD; /* en cours / en vol */ --neu-ink:#4B5563; --neu-bg:#EEF1F5; /* neutre */ --ok-bg:#EAECEF; --ok-ink:#111827; /* succès = encre, jamais de vert */ --violet-solid:#6D28D9; /* badge plan premium (blanc : 7,10:1) */ --danger-d:#F87171; --warn-d:#FBBF24; /* erreur / indisponible sur nuit (atelier) */ } /* --------------------------------------------------------------- CORRECTIF CONTRASTE — fil d'Ariane en zone claire .crumbs (défini plus haut) est calibré pour la nuit : sa couleur par défaut (--muted-d) et celle de .here (#E8EDF7) tombent sous 4,5:1 sur un fond --paper (mesuré 2,40:1 et 1,10:1 — voir job.html, .job-main .crumbs). Variante claire : mêmes classes, jetons clairs déjà utilisés par .light ailleurs dans le système (--muted-l 7,11:1, --ink 16,69:1, --beam 4,86:1 sur --paper). --------------------------------------------------------------- */ .proj .light .crumbs,.proj .job-main .crumbs{color:var(--muted-l)} .proj .light .crumbs a,.proj .job-main .crumbs a{color:var(--muted-l)} .proj .light .crumbs a:hover,.proj .job-main .crumbs a:hover{color:var(--ink)} .proj .light .crumbs .sep,.proj .job-main .crumbs .sep{color:var(--beam)} .proj .light .crumbs .here,.proj .job-main .crumbs .here{color:var(--ink)} /* --------------------------------------------------------------- COMPAT SCOPE — .menu-open posé directement sur .proj (body), en plus du cas déjà couvert plus haut (.menu-open en ancêtre de .proj, posé sur ). Identique dans toutes les extensions source, fusionné une seule fois. + lien plein blanc sous .light (annuaire/blog, cartes vedette Studio sur fond clair). --------------------------------------------------------------- */ .proj.menu-open .mnav{opacity:1;visibility:visible;transform:none} .proj.menu-open{overflow:hidden} .proj.menu-open .burger i:nth-child(1){transform:rotate(45deg)} .proj.menu-open .burger i:nth-child(2){opacity:0} .proj.menu-open .burger i:nth-child(3){transform:rotate(-45deg)} .proj .light a.btn-beam{color:#fff} /* --------------------------------------------------------------- COMPARATIF / CRÉDITS / CAS D'USAGE / CONTACT / JOB / LÉGAL / ERREURS Source commune : maquettes-sections/{cas-usage,comparatif,contact, credits,erreurs,job,legal}.html — bloc identique dans les 7. --------------------------------------------------------------- */ /* --- variante héros une colonne (pages sans visuel dédié) -------------- */ .proj .hero-solo .wrap{display:block;max-width:760px} .proj .hero-solo .lead{max-width:620px} /* --- variante CTA final une colonne ------------------------------------ */ .proj .final-solo .wrap{display:block;max-width:640px;margin:0 auto;text-align:center} .proj .final-solo .sub{margin:0 auto 30px;max-width:560px} /* --- grille de cartes verdict (comparatif) ----------------------------- */ .proj .verdict-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px} .proj .verdict-card{background:var(--card);border-radius:14px;padding:22px 22px 24px; box-shadow:0 2px 8px rgba(17,24,39,.05)} .proj .verdict-card h3{font-family:var(--display);font-weight:400;text-transform:uppercase; font-size:17px;letter-spacing:.02em;color:var(--ink);margin-bottom:14px} .proj .verdict-row{display:grid;grid-template-columns:1fr 1fr;gap:10px} .proj .verdict-cell{padding:13px 14px;border-radius:10px;background:var(--paper)} .proj .verdict-cell.win{background:#EEF3FE;box-shadow:inset 0 0 0 1.5px rgba(37,99,235,.35)} .proj .verdict-cell b{display:block;font-size:12px;font-family:var(--mono);letter-spacing:.05em; text-transform:uppercase;color:var(--faint-l);margin-bottom:6px} .proj .verdict-cell.win b{color:var(--beam)} .proj .verdict-cell p{font-size:13.5px;color:var(--muted-l);line-height:1.4} /* --- tableau générique (comparatif + crédits) -------------------------- */ .proj .cmp-wrap{margin-top:32px;overflow-x:auto;border-radius:14px; box-shadow:0 2px 8px rgba(17,24,39,.05)} .proj table.cmp{width:100%;border-collapse:collapse;background:var(--card);min-width:560px} .proj table.cmp caption{caption-side:top;text-align:left;font-family:var(--mono); font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--beam); padding:14px 20px 0} .proj table.cmp thead th{background:var(--night);color:#E8EDF7;text-align:left; font-size:13px;font-weight:600;padding:13px 18px;font-family:var(--sans)} .proj table.cmp thead th:first-child{border-top-left-radius:14px} .proj table.cmp thead th:last-child{border-top-right-radius:14px} .proj table.cmp tbody td{padding:12px 18px;font-size:14.5px;color:var(--ink); border-bottom:1px solid var(--line-l)} .proj table.cmp tbody tr:nth-child(even){background:var(--paper)} .proj table.cmp tbody tr:last-child td{border-bottom:0} .proj table.cmp tbody td:first-child{color:var(--muted-l)} .proj table.cmp td.hl{color:var(--beam);font-weight:700} /* --- rangée de statistiques claires (cas d'usage, crédits) ------------- */ .proj .stats-light{display:flex;gap:44px;flex-wrap:wrap;margin-top:44px} .proj .stats-light .stat{font-family:var(--mono);font-size:12px;letter-spacing:.08em; text-transform:uppercase;color:var(--muted-l)} .proj .stats-light b{display:block;font-family:var(--display);font-size:32px;color:var(--ink); letter-spacing:.01em;margin-bottom:3px} /* --- pastilles de statut (job) ------------------------------------------ */ .proj .st-badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono); font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;border-radius:999px; padding:5px 12px;font-weight:600} .proj .st-pending,.proj .st-uploaded,.proj .st-cancelled{color:var(--neu-ink);background:var(--neu-bg)} .proj .st-processing{color:var(--warn-ink);background:var(--warn-bg)} .proj .st-started{color:var(--run-ink);background:var(--run-bg)} .proj .st-completed{color:var(--ink);background:var(--ok-bg)} .proj .st-failed{color:var(--err-ink);background:var(--err-bg)} .proj .st-legend{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px} /* --- barre de travail (job / atelier-shell reskinné) -------------------- */ .proj .job-bar{position:relative;background:var(--night-2);border-bottom:1px solid var(--line-d); padding:14px 0} .proj .job-bar .wrap{display:flex;align-items:center;gap:16px;flex-wrap:wrap} .proj .job-bar .fname{font-family:var(--mono);font-size:13px;color:#E8EDF7} .proj .job-bar .mini-track{flex:1;min-width:120px;height:6px;border-radius:3px; background:rgba(255,255,255,.12);overflow:hidden} .proj .job-bar .mini-track i{display:block;height:100%;background:var(--beam-bright); border-radius:3px;width:63%} .proj .job-bar .pct{font-family:var(--mono);font-size:12.5px;color:var(--muted-d);flex:none} /* --- carte de progression (job, sur fond clair) ------------------------- */ .proj .job-main{background:var(--paper);padding:52px 0 96px} .proj .progress-card{background:var(--card);border-radius:14px;padding:30px 32px; max-width:620px;box-shadow:0 2px 8px rgba(17,24,39,.05);margin-top:28px} .proj .progress-card h4{font-family:var(--display);font-weight:400;text-transform:uppercase; font-size:15px;letter-spacing:.06em;color:var(--faint-l);margin-bottom:14px} .proj .progress-top{display:flex;align-items:center;justify-content:space-between; gap:14px;margin-bottom:16px;flex-wrap:wrap} .proj .progress-fname{font-family:var(--mono);font-size:13.5px;color:var(--muted-l)} .proj .progress-msg{font-size:15px;color:var(--muted-l);margin-top:14px} .proj .progress-meta{display:flex;justify-content:space-between;margin-top:10px; font-family:var(--mono);font-size:12px;color:var(--faint-l)} .proj .progress-card.err p{color:var(--err-ink);font-size:15px;margin-bottom:16px} .proj .progress-card.ok p{color:var(--ink);font-size:15px} .proj .progress-card .btnrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px} /* --- prose légale (CGU / confidentialité) ------------------------------- */ .proj .legal-hero{padding:64px 0 32px} .proj .legal-date{font-family:var(--mono);font-size:12px;color:var(--faint-l);margin-top:8px} .proj .legal-main{background:var(--paper);padding:8px 0 96px} .proj .legal-shell{display:grid;grid-template-columns:260px minmax(0,1fr);gap:44px;align-items:start} .proj .legal-toc{position:sticky;top:84px;background:var(--card);border-radius:14px; padding:20px 22px;box-shadow:0 2px 8px rgba(17,24,39,.05);max-height:calc(100vh - 110px); overflow-y:auto} .proj .legal-toc p{font-family:var(--mono);font-size:11px;letter-spacing:.1em; text-transform:uppercase;color:var(--beam);margin-bottom:12px} .proj .legal-toc ol{list-style:none;display:grid;gap:2px;counter-reset:leg} .proj .legal-toc a{display:block;padding:6px 8px;border-radius:6px;font-size:13px; color:var(--muted-l);line-height:1.4} .proj .legal-toc a:hover{background:var(--paper);color:var(--ink)} .proj .legal-body{background:var(--card);border-radius:14px;padding:36px 40px 44px; box-shadow:0 2px 8px rgba(17,24,39,.05)} .proj .legal-body h2{font-family:var(--display);font-weight:400;text-transform:uppercase; font-size:20px;letter-spacing:.02em;color:var(--ink);margin:38px 0 12px;scroll-margin-top:84px} .proj .legal-body h2:first-child{margin-top:0} .proj .legal-body p{font-size:15px;color:var(--muted-l);line-height:1.7;margin-bottom:10px} .proj .legal-body ul{margin:10px 0 14px 22px;display:grid;gap:8px} .proj .legal-body li{font-size:15px;color:var(--muted-l);line-height:1.6} .proj .legal-body strong{color:var(--ink)} .proj .legal-body a{color:var(--beam)} .proj .legal-body table.legal-table{width:100%;border-collapse:collapse;margin:14px 0 18px} .proj .legal-body table.legal-table th{text-align:left;font-size:12.5px;font-weight:600; color:var(--ink);padding:9px 12px;border-bottom:2px solid var(--line-l)} .proj .legal-body table.legal-table td{font-size:13.5px;color:var(--muted-l);padding:9px 12px; border-bottom:1px solid var(--line-l)} .proj .legal-link-card{margin-top:36px} /* --- formulaire de contact ---------------------------------------------- */ .proj .contact-main{background:var(--paper);padding:56px 0 96px} .proj .contact-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:26px;align-items:start} .proj .form-card{background:var(--card);border-radius:14px;padding:32px; box-shadow:0 2px 8px rgba(17,24,39,.05)} .proj .f-group{margin-bottom:18px} .proj .f-group label{display:block;font-size:13.5px;font-weight:600;color:var(--ink); margin-bottom:7px} .proj .f-group input,.proj .f-group select,.proj .f-group textarea{width:100%; min-height:48px;border:1.5px solid #D7DDE7;border-radius:8px;padding:0 14px; font-size:15px;font-family:var(--sans);color:var(--ink);background:#fff} .proj .f-group textarea{padding:12px 14px;min-height:130px;resize:vertical} .proj .f-group input:focus,.proj .f-group select:focus,.proj .f-group textarea:focus{ outline:2px solid var(--beam);outline-offset:1px;border-color:var(--beam)} .proj .f-group input::placeholder,.proj .f-group textarea::placeholder{color:var(--faint-l)} .proj .char-count{display:block;text-align:right;font-family:var(--mono);font-size:11px; color:var(--faint-l);margin-top:5px} .proj .contact-sidebar{display:grid;gap:16px} .proj .contact-card{display:flex;gap:16px;background:var(--card);border-radius:14px; padding:22px;box-shadow:0 2px 8px rgba(17,24,39,.05)} .proj .contact-ico{flex:none;width:42px;height:42px;border-radius:10px; background:rgba(37,99,235,.1);color:var(--beam);display:flex;align-items:center; justify-content:center} .proj .contact-card h3{font-size:14.5px;font-weight:700;color:var(--ink);margin-bottom:4px} .proj .contact-card a.cc-link,.proj .contact-card .cc-badge{font-size:14px;color:var(--beam); font-weight:600} .proj .contact-card .cc-badge{display:inline-block;background:var(--run-bg);color:var(--run-ink); border-radius:6px;padding:2px 9px;font-size:12.5px} .proj .contact-topics{list-style:none;display:grid;gap:8px;margin-top:2px} .proj .contact-topics li{display:flex;gap:8px;align-items:center;font-size:13.5px; color:var(--muted-l)} .proj .contact-topics svg{flex:none;color:var(--beam)} .proj .contact-trust{display:flex;gap:10px;align-items:center;background:var(--night); color:var(--muted-d);border-radius:12px;padding:16px 18px;font-size:13px} .proj .contact-trust svg{flex:none;color:var(--beam-bright)} /* --- pages d'erreur / maintenance --------------------------------------- */ .proj .err-main{padding:88px 0 100px;position:relative;overflow:hidden} .proj .err-main::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(760px 460px at 50% -10%, rgba(37,99,235,.2), transparent 62%)} .proj .err-card{position:relative;max-width:520px;margin:0 auto;text-align:center} .proj .err-num{font-family:var(--display);font-size:clamp(64px,12vw,108px);color:#fff; line-height:1;letter-spacing:.01em} .proj .err-num.danger{color:var(--danger-nuit)} .proj .err-card h2{margin:14px 0 10px} .proj .err-card p{font-size:16px;color:var(--muted-d);margin-bottom:28px} .proj .err-label{display:inline-block;font-family:var(--mono);font-size:11px; letter-spacing:.12em;text-transform:uppercase;color:var(--beam);border:1px solid rgba(77,130,243,.35);border-radius:999px;padding:6px 14px;margin-bottom:44px} .proj .maint-card{position:relative;max-width:520px;margin:0 auto;text-align:center; background:var(--night-2);border:1px solid var(--line-d);border-radius:18px; padding:44px 36px;box-shadow:0 24px 80px rgba(0,0,0,.5)} .proj .maint-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(124,58,237,.16); color:#C4B5FD;border:1px solid rgba(124,58,237,.35);padding:6px 14px;border-radius:999px; font-size:12.5px;font-weight:600;margin-bottom:20px} .proj .maint-badge i{width:7px;height:7px;border-radius:50%;background:#C4B5FD} .proj .maint-card h2{font-size:22px;margin-bottom:12px} .proj .maint-card p{font-size:15px;color:var(--muted-d);margin-bottom:8px} .proj .maint-bar{height:6px;border-radius:999px;background:rgba(255,255,255,.1); overflow:hidden;margin:26px 0 6px} .proj .maint-bar i{display:block;height:100%;width:38%;border-radius:999px; background:linear-gradient(90deg,var(--beam),var(--violet))} .proj .maint-sub{font-family:var(--mono);font-size:12px;color:var(--muted-d);margin-top:16px} .proj .err-note{text-align:center;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em; color:var(--muted-d);margin-top:20px} /* --------------------------------------------------------------- DASHBOARD (vidéos / abonnement) Source commune : maquettes-sections/{dashboard-videos, dashboard-abonnement}.html — bloc identique dans les 2. --------------------------------------------------------------- */ /* --- bande de titre (nuit) -------------------------------------------- */ .proj .dash-band{position:relative;padding:44px 0 40px;overflow:hidden} .proj .dash-band::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(900px 420px at 14% -30%, rgba(37,99,235,.28), transparent 62%)} .proj .dash-band .wrap{position:relative;display:flex;align-items:flex-end; justify-content:space-between;gap:24px;flex-wrap:wrap} .proj .dash-band h1{font-family:var(--display);font-weight:400;text-transform:uppercase; font-size:clamp(30px,3.6vw,44px);line-height:1.05;letter-spacing:.005em;color:#fff} .proj .dash-hello{margin-top:10px;font-size:15px;color:var(--muted-d)} .proj .dash-hello b{color:#fff;font-weight:600} .proj .plan-pill{display:inline-block;margin-left:10px;background:var(--violet-solid); color:#fff;font-family:var(--mono);font-size:11px;letter-spacing:.1em; text-transform:uppercase;border-radius:6px;padding:3px 9px;vertical-align:1px} /* --- corps clair + coquille aside/main -------------------------------- */ .proj .dash-main{background:var(--paper);color:var(--ink);padding:36px 0 96px} .proj .dash-shell{display:grid;grid-template-columns:216px minmax(0,1fr);gap:28px; align-items:start} .proj .dash-aside{position:sticky;top:84px;background:var(--card);border-radius:14px; padding:10px;box-shadow:0 2px 8px rgba(17,24,39,.05)} .proj .dash-aside a{display:flex;align-items:center;gap:11px;padding:12px 14px; border-radius:10px;font-size:15px;font-weight:600;color:var(--muted-l)} .proj .dash-aside a svg{flex:none;color:var(--faint-l)} .proj .dash-aside a:hover{background:var(--paper);color:var(--ink)} .proj .dash-aside a.on{background:#EEF3FE;color:var(--beam); box-shadow:inset 3px 0 0 var(--beam)} .proj .dash-aside a.on svg{color:var(--beam)} .proj .dash-aside a:focus-visible{outline:2px solid var(--beam);outline-offset:2px} /* --- résumé d'usage (quotas) ------------------------------------------ */ .proj .usage-card{background:var(--card);border-radius:14px;padding:20px 24px; box-shadow:0 2px 8px rgba(17,24,39,.05)} .proj .usage-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px 28px} .proj .u-cell .l{font-family:var(--mono);font-size:11px;letter-spacing:.08em; text-transform:uppercase;color:var(--muted-l);display:block;margin-bottom:6px; min-height:30px} /* 2 lignes réservées : les valeurs restent alignées */ .proj .u-cell .v{font-size:16.5px;font-weight:600;color:var(--ink); font-variant-numeric:tabular-nums} .proj .u-cell .v small{font-size:12.5px;font-weight:500;color:var(--faint-l)} .proj .u-meter{height:4px;border-radius:2px;background:#EBEEF3;margin-top:8px; overflow:hidden} .proj .u-meter i{display:block;height:100%;border-radius:2px;background:var(--beam)} .proj .u-cell.warn .v{color:var(--warn-ink)} .proj .u-cell.warn .u-meter i{background:var(--warn-ink)} .proj .u-cell.warn .l::after{content:" ⚠";letter-spacing:0} .proj .usage-foot{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-l); display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap} .proj .usage-foot a{font-size:14px;font-weight:600} .proj .usage-foot a::after{content:"\00a0→"} /* --- filtres d'affichage (tablist) : réutilise .toggle-box ------------- */ .proj .dash-modes{margin:26px 0 6px;display:flex} /* --- groupes + grille de cartes vidéo --------------------------------- */ .proj .dash-group{margin-top:34px} .proj .dash-group h2{font-family:var(--display);font-weight:400;text-transform:uppercase; font-size:19px;letter-spacing:.03em;color:var(--ink)} .proj .dash-group h2 span{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em; color:var(--faint-l);margin-left:8px} .proj .dash-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr)); gap:16px;margin-top:14px} .proj .vcard{background:var(--card);border-radius:12px;overflow:hidden;cursor:pointer; box-shadow:0 2px 8px rgba(17,24,39,.05);position:relative; transition:transform .2s var(--ease),box-shadow .2s} .proj .vcard:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(17,24,39,.1)} .proj .vcard:focus-visible{outline:2px solid var(--beam);outline-offset:2px} .proj .vthumb{position:relative;aspect-ratio:16/9;background: radial-gradient(220px 130px at 50% 40%, #16213B, var(--night-2))} .proj .vthumb .ph{position:absolute;inset:0;display:flex;align-items:center; justify-content:center;font-size:30px;opacity:.9} /* pastilles d'état : couleur + GLYPHE (jamais la couleur seule) */ .proj .st{position:absolute;top:8px;left:8px;z-index:2;display:inline-flex; align-items:center;gap:5px;font-family:var(--mono);font-size:10.5px; letter-spacing:.05em;text-transform:uppercase;border-radius:5px;padding:3px 8px} .proj .st svg{flex:none} .proj .st-done{background:#fff;color:var(--ok-ink)} /* blanc/encre : lisible sur vignette nuit */ .proj .st-processing{background:var(--warn-bg);color:var(--warn-ink)} .proj .st-started{background:var(--run-bg);color:var(--run-ink)} .proj .st-uploaded{background:var(--neu-bg);color:var(--neu-ink)} /* menu contextuel de carte */ .proj .vmenu-btn{position:absolute;top:8px;right:8px;z-index:2;width:30px;height:30px; border:0;border-radius:7px;background:rgba(5,8,15,.55);color:#fff;font-size:17px; line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center} .proj .vmenu-btn:hover{background:rgba(5,8,15,.8)} .proj .vmenu-btn:focus-visible{outline:2px solid var(--beam-bright);outline-offset:2px} .proj .vmenu{position:absolute;top:42px;right:8px;z-index:5;min-width:190px; background:var(--card);border-radius:10px;padding:6px;display:none; box-shadow:0 16px 44px rgba(17,24,39,.2),0 0 0 1px var(--line-l)} .proj .vmenu.open{display:block} .proj .vmenu button{display:block;width:100%;text-align:left;border:0;background:none; font-family:var(--sans);font-size:14px;font-weight:500;color:var(--ink); padding:9px 12px;border-radius:7px;cursor:pointer} .proj .vmenu button:hover{background:var(--paper)} .proj .vmenu button.danger{color:var(--err-ink)} .proj .vmenu button.danger:hover{background:var(--err-bg)} .proj .vbody{padding:12px 14px 14px} .proj .vname{display:block;font-size:14.5px;font-weight:600;color:var(--ink); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .proj .vmeta{display:block;margin-top:4px;font-family:var(--mono);font-size:11.5px; letter-spacing:.02em;color:var(--faint-l);font-variant-numeric:tabular-nums} .proj .vgone{display:block;margin-top:6px;font-size:12px;color:var(--warn-ink)} .proj .vrename{width:100%;border:1.5px solid var(--beam);border-radius:7px; padding:6px 9px;font-size:14px;font-family:var(--sans);color:var(--ink)} .proj .vrename:focus{outline:none} /* état vide + squelette (statique : zéro boucle d'animation) */ .proj .dash-empty{background:var(--card);border-radius:14px;padding:60px 24px; text-align:center;box-shadow:0 2px 8px rgba(17,24,39,.05);margin-top:26px} .proj .dash-empty .mini-drop{margin:0 auto 20px;max-width:220px} .proj .dash-empty h2{font-family:var(--display);font-weight:400;text-transform:uppercase; font-size:22px;letter-spacing:.02em;color:var(--ink);margin-bottom:6px} .proj .dash-empty p{font-size:15px;color:var(--muted-l);margin-bottom:22px} .proj .skel .vthumb{background:#EBEEF3} .proj .skel-bar{display:block;height:11px;border-radius:6px;background:#EBEEF3} .proj .skel-bar.short{width:55%;margin-top:8px} .proj .dash-loadmore{margin-top:30px;text-align:center} /* --- réglages / abonnement -------------------------------------------- */ .proj .set-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:26px} .proj .scard{background:var(--card);border-radius:14px;padding:26px; box-shadow:0 2px 8px rgba(17,24,39,.05)} .proj .scard>h3{font-family:var(--display);font-weight:400;text-transform:uppercase; font-size:20px;letter-spacing:.02em;color:var(--ink);margin-bottom:18px} .proj .scard.wide{margin-top:22px} .proj .fg{margin-bottom:16px} .proj .fg label{display:block;font-family:var(--mono);font-size:11px; letter-spacing:.08em;text-transform:uppercase;color:var(--muted-l);margin-bottom:6px} .proj .fg input,.proj .fg select{width:100%;min-height:44px;background:var(--card); border:1.5px solid #D7DDE7;border-radius:8px;padding:0 13px;font-size:15px; font-family:var(--sans);color:var(--ink)} .proj .fg input:focus,.proj .fg select:focus{outline:2px solid var(--beam); outline-offset:1px} .proj .fg input[disabled]{background:#F1F3F7;color:#5A6779} .proj .banner{display:flex;align-items:center;gap:10px;border-radius:10px; padding:13px 16px;font-size:14.5px;font-weight:500;margin-bottom:22px} .proj .banner[hidden]{display:none} /* display:flex ne doit pas vaincre hidden */ .proj .banner svg{flex:none} .proj .banner-ok{background:#EAECEF;color:var(--ok-ink)} .proj .banner-err{background:var(--err-bg);color:var(--err-ink)} .proj .sub-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap; margin-bottom:20px} .proj .btn-sm{min-height:40px;padding:0 16px;font-size:14px} .proj .sub-sec-t{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em; text-transform:uppercase;color:var(--beam);display:block;margin:24px 0 12px} .proj .limits{width:100%;border-collapse:collapse} .proj .limits td{padding:11px 0;border-bottom:1px solid var(--line-l);font-size:14.5px; color:var(--muted-l)} .proj .limits td:last-child{text-align:right;color:var(--ink);font-weight:600; font-variant-numeric:tabular-nums} .proj .limits tr:last-child td{border-bottom:0} .proj .feats{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:9px 22px} .proj .feats li{display:flex;align-items:center;gap:9px;font-size:14.5px; color:var(--ink)} .proj .feats .fico{flex:none;width:18px;height:18px;border-radius:50%; background:var(--ok-ink);color:#fff;display:flex;align-items:center; justify-content:center} .proj .feats li.off{color:var(--faint-l)} .proj .feats li.off .fico{background:transparent;color:var(--faint-l); box-shadow:inset 0 0 0 1.5px #C3CAD6} .proj .tpl{display:flex;align-items:center;gap:12px;padding:13px 0; border-bottom:1px solid var(--line-l)} .proj .tpl:last-child{border-bottom:0} .proj .tpl b{font-size:15px;color:var(--ink)} .proj .tpl .sty{font-family:var(--mono);font-size:11px;letter-spacing:.04em; background:var(--neu-bg);color:var(--neu-ink);border-radius:5px;padding:3px 8px} .proj .tpl .dot{width:16px;height:16px;border-radius:50%;flex:none; box-shadow:0 0 0 2px #fff,0 1px 4px rgba(17,24,39,.3)} .proj .tpl .del{margin-left:auto;background:none;border:0;cursor:pointer; font-family:var(--sans);font-size:14px;font-weight:600;color:var(--err-ink); padding:8px 10px;border-radius:7px} .proj .tpl .del:hover{background:var(--err-bg)} .proj .scard.dangerz{border:1px solid #F0C9C9} .proj .scard.dangerz>h3{color:var(--err-ink)} .proj .danger-row{display:flex;gap:12px;flex-wrap:wrap} .proj .btn-danger{background:var(--err-ink);color:#fff} .proj .btn-danger:hover{background:#A81717;transform:translateY(-1px)} /* modale */ .proj .overlay{position:fixed;inset:0;z-index:80;background:rgba(7,11,20,.62); display:none;align-items:center;justify-content:center;padding:20px} .proj .overlay.open{display:flex} .proj .modal{background:var(--card);color:var(--ink);border-radius:14px; padding:30px;max-width:460px;width:100%;box-shadow:0 30px 90px rgba(0,0,0,.4); position:relative} .proj .modal h2{font-family:var(--display);font-weight:400;text-transform:uppercase; font-size:23px;letter-spacing:.02em;margin-bottom:10px} .proj .modal>p{font-size:15px;color:var(--muted-l);margin-bottom:20px} .proj .modal-x{position:absolute;top:12px;right:14px;background:none;border:0; font-size:24px;color:var(--faint-l);cursor:pointer;line-height:1;padding:6px} .proj .modal-row{display:flex;gap:10px;justify-content:flex-end;margin-top:8px} .proj .dd--right{left:auto;right:0} .proj .user-chip{display:inline-flex;align-items:center;justify-content:center; width:30px;height:30px;border-radius:50%;background:rgba(37,99,235,.25); color:#fff;font-size:13px;font-weight:700;flex:none} .proj .dd-id{padding:10px 12px 12px;border-bottom:1px solid var(--line-d); margin-bottom:6px} .proj .dd-id b{display:block;font-size:14.5px;color:#fff} .proj .dd-id span{font-family:var(--mono);font-size:11.5px;color:var(--muted-d)} /* --------------------------------------------------------------- ANNUAIRE D'OUTILS / BLOG (index + article) Source commune : maquettes-sections/{blog,tools-index}.html — bloc identique dans les 2. --------------------------------------------------------------- */ .proj .fam-stack{display:grid;gap:12px;width:100%;max-width:390px;justify-self:end; align-self:center} .proj .fam{display:flex;align-items:center;gap:14px;background:var(--night-2); border:1px solid var(--line-d);border-radius:12px;padding:16px 18px; transition:border-color .25s,transform .25s var(--ease)} .proj .fam:hover{border-color:var(--beam-bright);transform:translateY(-2px)} .proj .fam .k{flex:none;font-family:var(--mono);font-size:11px;letter-spacing:.08em; text-transform:uppercase;color:#8FB0F9;background:rgba(37,99,235,.14); border-radius:6px;padding:5px 9px;min-width:78px;text-align:center} .proj .fam b{flex:1;font-size:15px;color:#fff;font-weight:600;line-height:1.35} .proj .fam .ar{color:var(--beam-bright);font-weight:700} .proj .fam-note{font-family:var(--mono);font-size:11px;letter-spacing:.08em; text-transform:uppercase;color:var(--muted-d);text-align:right;margin-top:2px} /* --- barre de recherche (annuaire) -------------------------------------- */ .proj .tsearch{display:flex;align-items:center;gap:10px;background:var(--night-2); border:1px solid var(--line-d);border-radius:12px;padding:8px 8px 8px 18px; max-width:560px;box-shadow:0 24px 80px rgba(0,0,0,.5)} .proj .tsearch:focus-within{border-color:var(--beam-bright); box-shadow:0 24px 80px rgba(0,0,0,.5),0 0 0 3px rgba(37,99,235,.25)} .proj .tsearch>svg{color:var(--muted-d);flex:none} .proj .tsearch input{flex:1;border:0;background:transparent;color:#E8EDF7; font-size:16px;min-width:0;min-height:44px;font-family:var(--sans)} .proj .tsearch input::placeholder{color:#8091AD} .proj .tsearch input:focus{outline:none} .proj .tsearch-clear{display:none;width:38px;height:38px;border-radius:9px;border:0; background:rgba(77,130,243,.14);color:#E8EDF7;cursor:pointer;flex:none; align-items:center;justify-content:center} .proj .tsearch-clear:hover{background:rgba(77,130,243,.28)} .proj .tsearch.has-q .tsearch-clear{display:inline-flex} .proj .tsearch-note{font-family:var(--mono);font-size:12px;letter-spacing:.06em; text-transform:uppercase;color:var(--muted-d);margin-top:14px} /* --- cartes d'outil (grille) : variante nuit + variante claire ---------- */ .proj .tgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:52px} .proj .tcard{display:flex;gap:14px;align-items:flex-start;background:var(--night-2); border:1px solid var(--line-d);border-radius:12px;padding:18px; transition:transform .25s var(--ease),border-color .25s,box-shadow .25s} .proj .tcard:hover{transform:translateY(-3px);border-color:var(--beam-bright); box-shadow:0 14px 40px rgba(0,0,0,.45)} .proj .tcard-ic{flex:none;width:40px;height:40px;border-radius:10px; background:rgba(37,99,235,.16);color:var(--beam-bright); display:flex;align-items:center;justify-content:center} .proj .tcard-ic svg{width:20px;height:20px} .proj .tcard-tx{min-width:0} .proj .tcard b{display:block;font-size:15.5px;font-weight:700;color:#fff;line-height:1.35} .proj .tcard .d{display:block;font-size:13.5px;color:var(--muted-d);margin-top:3px} .proj .badge-ia{display:inline-block;margin-left:7px;font-family:var(--mono); font-size:9.5px;letter-spacing:.1em;background:rgba(37,99,235,.18); border:1px solid rgba(77,130,243,.4);color:#8FB0F9;border-radius:4px; padding:1px 5px;vertical-align:2px} .proj .light .tcard{background:var(--card);border-color:transparent; box-shadow:0 2px 8px rgba(17,24,39,.05)} .proj .light .tcard:hover{border-color:rgba(37,99,235,.35); box-shadow:0 14px 36px rgba(17,24,39,.12)} .proj .light .tcard-ic{background:rgba(37,99,235,.1);color:var(--beam)} .proj .light .tcard b{color:var(--ink)} .proj .light .tcard .d{color:var(--muted-l)} .proj .light .badge-ia{background:rgba(37,99,235,.1); border-color:rgba(37,99,235,.3);color:#1D4ED8} /* --- carte vedette Studio (annuaire) — même gradient que dd-studio ------ */ .proj .studio-feat{display:flex;gap:18px;align-items:center;margin-top:44px; background:linear-gradient(120deg,rgba(37,99,235,.22),rgba(124,58,237,.14)); border:1px solid rgba(77,130,243,.3);border-radius:14px;padding:22px 24px; transition:border-color .25s} .proj .studio-feat:hover{border-color:var(--beam-bright)} .proj .studio-feat img{width:44px;height:auto;flex:none} .proj .studio-feat .tx{flex:1;min-width:0} .proj .studio-feat b{display:block;font-family:var(--display);font-weight:400; text-transform:uppercase;font-size:20px;letter-spacing:.03em;color:#fff} .proj .studio-feat p{font-size:14.5px;color:var(--muted-d);margin-top:2px} .proj .studio-feat .btn{flex:none} /* --- état « aucun résultat » (annuaire, zone claire) -------------------- */ .proj .tempty{display:none;text-align:center;padding:56px 0 8px;max-width:520px; margin:0 auto} .proj .tempty.show{display:block} .proj .tempty .ic{width:56px;height:56px;border-radius:14px; background:rgba(37,99,235,.1);color:var(--beam);display:flex;align-items:center; justify-content:center;margin:0 auto 18px} .proj .tempty b{font-family:var(--display);font-weight:400;text-transform:uppercase; font-size:22px;letter-spacing:.02em;color:var(--ink);display:block} .proj .tempty p{font-size:15.5px;color:var(--muted-l);margin:8px 0 22px} /* masquage pendant une recherche (sections hors annuaire) */ .proj.searching [data-search-hide]{display:none} /* --- réassurance (annuaire) : grille de 3 cartes .uc -------------------- */ .proj .reas{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:52px; max-width:none} /* --- cartes d'article (blog) : tags + méta sur 2 colonnes --------------- */ .proj .post-tags{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap} .proj .post-tags span{font-family:var(--mono);font-size:10px;letter-spacing:.08em; text-transform:uppercase;color:var(--kick-d);border:1px solid var(--line-d); border-radius:5px;padding:2px 7px} .proj .post-meta b{white-space:nowrap;margin-left:12px} /* --- pagination (blog, nuit) -------------------------------------------- */ .proj .pgn{display:flex;gap:8px;margin-top:44px;align-items:center} .proj .pgn a,.proj .pgn span{display:inline-flex;align-items:center;justify-content:center; min-width:40px;height:40px;padding:0 8px;border-radius:9px;font-family:var(--mono); font-size:13px;color:var(--muted-d);border:1px solid var(--line-d)} .proj .pgn a:hover{border-color:var(--beam-bright);color:#fff} .proj .pgn .on{background:var(--beam);border-color:var(--beam);color:#fff} /* --- bandeau d'outils (blog) : chips avec pictogramme ------------------- */ .proj .strip-chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px} .proj .strip-chips a{display:inline-flex;align-items:center;gap:8px; background:var(--night-2);border:1px solid var(--line-d);border-radius:9px; padding:9px 14px;font-size:14px;font-weight:600;color:#E8EDF7; transition:border-color .25s,transform .25s var(--ease)} .proj .strip-chips a:hover{border-color:var(--beam-bright);transform:translateY(-2px)} .proj .strip-chips svg{width:17px;height:17px;color:var(--beam-bright)} /* --- vue article (zone claire) ------------------------------------------ */ .proj .art-head{max-width:820px} .proj a.art-back{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono); font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-l); margin-bottom:26px} .proj a.art-back:hover{color:var(--beam)} .proj .art-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px} .proj .art-tags span{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em; text-transform:uppercase;color:#1D4ED8;background:rgba(37,99,235,.1); border-radius:5px;padding:3px 9px} .proj .art-head h1{font-family:var(--display);font-weight:400;text-transform:uppercase; font-size:clamp(28px,3.8vw,46px);line-height:1.08;letter-spacing:.01em; color:var(--ink);margin-bottom:18px} .proj .art-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap; font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;color:var(--faint-l)} .proj .art-meta .ava{width:30px;height:30px;border-radius:50%;background:var(--beam); color:#fff;display:inline-flex;align-items:center;justify-content:center; font-family:var(--sans);font-weight:700;font-size:13px;flex:none} .proj .art-meta b{color:var(--ink);font-weight:600} .proj .art-meta .dot{width:3px;height:3px;border-radius:50%;background:#9AA3B2} .proj .art-hero{border-radius:14px;overflow:hidden;margin-top:30px;max-width:1040px; box-shadow:0 18px 56px rgba(17,24,39,.16);background:var(--night)} .proj .art-hero img{display:block;width:100%;aspect-ratio:16/7.6;object-fit:cover; object-position:50% 30%} .proj .art{display:grid;grid-template-columns:250px minmax(0,1fr);gap:52px; align-items:start;margin-top:44px} .proj .art>*{min-width:0} .proj .art-aside{position:sticky;top:84px} .proj .art-aside .toc{margin-top:0;padding:20px 22px} .proj .art-share{margin-top:20px;padding:18px 22px;background:var(--card); border-radius:14px;box-shadow:0 2px 8px rgba(17,24,39,.05)} .proj .art-share p{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em; text-transform:uppercase;color:var(--beam);margin-bottom:12px} .proj .share-row{display:flex;gap:8px;flex-wrap:wrap} .proj .share-btn{width:38px;height:38px;border-radius:9px;border:1px solid var(--line-l); background:var(--card);color:var(--muted-l);display:inline-flex;align-items:center; justify-content:center;cursor:pointer} .proj .share-btn:hover{color:var(--beam);border-color:var(--beam)} .proj .share-btn svg{width:16px;height:16px} .proj .art-main{max-width:720px} .proj .art-main h2{font-family:var(--display);font-weight:400;text-transform:uppercase; font-size:clamp(20px,2.2vw,26px);letter-spacing:.015em;line-height:1.15; color:var(--ink);margin:46px 0 14px;scroll-margin-top:84px} .proj .art-main h2:first-child{margin-top:0} .proj .art-main p{font-size:16.5px;color:var(--muted-l);margin-bottom:18px} .proj .art-main p strong{color:var(--ink)} .proj .art-main a{color:var(--beam);text-decoration:underline; text-underline-offset:3px} .proj .art-main a.kcta-mid,.proj .kcta-end a{text-decoration:none} .proj .tablewrap{overflow-x:auto;margin:8px 0 18px} .proj .atable{width:100%;border-collapse:collapse;background:var(--card); border-radius:12px;overflow:hidden;box-shadow:0 2px 8px rgba(17,24,39,.05)} .proj .atable th{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em; text-transform:uppercase;color:var(--beam);text-align:left;padding:12px 16px; border-bottom:1px solid var(--line-l);white-space:nowrap} .proj .atable td{font-size:15px;color:var(--muted-l);padding:12px 16px; border-bottom:1px solid var(--line-l)} .proj .atable tr:last-child td{border-bottom:0} .proj .atable td b{color:var(--ink)} /* --- encarts outil de l'article (top / mid / end) ----------------------- */ .proj .kcta-top{display:flex;align-items:center;gap:16px;background:var(--card); border:1px solid rgba(37,99,235,.25);border-radius:12px;padding:14px 16px; margin-top:26px;max-width:820px;box-shadow:0 2px 8px rgba(17,24,39,.05)} .proj .kcta-ic{flex:none;width:42px;height:42px;border-radius:10px; background:var(--beam);color:#fff;display:flex;align-items:center; justify-content:center} .proj .kcta-ic svg{width:20px;height:20px} .proj .kcta-tx{flex:1;min-width:0} .proj .kcta-eyebrow{display:block;font-family:var(--mono);font-size:10.5px; letter-spacing:.12em;text-transform:uppercase;color:var(--beam)} .proj .kcta-title{display:block;font-weight:700;color:var(--ink);font-size:15.5px} .proj .kcta-top .btn,.proj .kcta-mid .btn{min-height:42px;padding:0 18px; font-size:14.5px;flex:none} .proj .kcta-mid{display:flex;align-items:center;gap:14px;background:var(--paper); border:1px solid var(--line-l);border-radius:12px;padding:12px 14px;margin:26px 0} .proj .kcta-mid .kcta-ic{background:rgba(37,99,235,.1);color:var(--beam)} .proj .kcta-mid .kcta-sub{display:block;font-size:13px;color:var(--faint-l)} .proj .kcta-end{background:var(--night);border-radius:14px;padding:30px 32px; color:#E8EDF7;margin-top:44px;position:relative;overflow:hidden} .proj .kcta-end::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(420px 260px at 12% 0%, rgba(37,99,235,.3), transparent 65%)} .proj .kcta-end>*{position:relative} .proj .kcta-end h3{font-family:var(--display);font-weight:400;text-transform:uppercase; font-size:22px;letter-spacing:.02em;margin:14px 0 6px} .proj .kcta-end .benefit{font-size:15px;color:var(--muted-d);margin-bottom:20px} .proj .kcta-end-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap} .proj a.kcta-drop{display:inline-flex;align-items:center;gap:10px; border:1.5px dashed rgba(255,255,255,.35);border-radius:10px;padding:12px 18px; color:var(--muted-d);font-size:14.5px} .proj .kcta-drop svg{width:18px;height:18px;color:var(--beam-bright)} /* --------------------------------------------------------------- AUTHENTIFICATION (connexion / inscription / mot de passe oublié / réinitialisation) Source : maquettes-sections/auth.html. --------------------------------------------------------------- */ /* --- scène : la salle, une seule carte éclairée --- */ .proj .auth-stage{position:relative;overflow:hidden;padding:48px 0 96px} .proj .auth-stage::before{content:"";position:absolute;inset:0;pointer-events:none; background: radial-gradient(1100px 640px at 18% -18%, rgba(37,99,235,.34), transparent 62%), radial-gradient(700px 460px at 88% 112%, rgba(37,99,235,.14), transparent 60%)} .proj .auth-stage .wrap{position:relative} .proj .auth-hall{display:grid;grid-template-columns:5fr 6fr;max-width:1010px;margin:0 auto; border-radius:18px;overflow:hidden;border:1px solid var(--line-d); box-shadow:0 30px 90px rgba(0,0,0,.55),0 0 70px rgba(37,99,235,.18)} /* --- panneau faisceau (nuit) --- */ .proj .auth-beam{position:relative;background:var(--night-2);padding:46px 42px; display:flex;flex-direction:column;justify-content:center} .proj .auth-beam::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(560px 420px at 22% 0%, rgba(37,99,235,.30), transparent 65%)} .proj .auth-beam>*{position:relative} .proj .ab-icon{width:38px;height:auto;margin-bottom:26px} .proj .auth-beam .hero-sur{margin-bottom:14px} .proj .ab-title{font-size:clamp(24px,2.4vw,32px);color:#fff;margin-bottom:16px} .proj .ab-lead{font-size:15.5px;color:var(--muted-d);max-width:340px} .proj .auth-beam .reassure{margin-top:22px} /* --- carte formulaire (studio clair — zone de décision) --- */ .proj .auth-card{background:var(--card);color:var(--ink);padding:42px 44px 34px} .proj h2.auth-title{font-size:29px;color:var(--ink);margin-bottom:20px} .proj .auth-sub{font-size:14px;color:var(--muted-l);margin:-12px 0 22px;line-height:1.55} /* boutons sociaux — langage btn-ghost-l (carte blanche, trait #D7DDE7) */ .proj .abtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%; min-height:48px;padding:0 18px;border-radius:8px;background:#fff;border:1.5px solid #D7DDE7; font-family:var(--sans);font-size:15px;font-weight:600;color:var(--ink);cursor:pointer; transition:border-color .2s,color .2s,box-shadow .2s} .proj .abtn+.abtn{margin-top:10px} .proj .abtn:hover{border-color:var(--beam);color:var(--beam); box-shadow:0 4px 18px rgba(37,99,235,.12)} .proj .abtn:focus-visible{outline:2px solid var(--beam);outline-offset:2px} .proj .abtn svg{flex:none} /* bannière d'erreur deux tons (is-error / is-blocked = pop-up bloquée) */ .proj .auth-banner[hidden]{display:none} /* hidden doit gagner sur display:flex */ .proj .auth-banner{display:flex;gap:10px;align-items:flex-start;border-radius:10px; padding:12px 14px;margin-bottom:18px;font-size:14px;line-height:1.5} .proj .auth-banner svg{flex:none;width:18px;height:18px;margin-top:2px} .proj .auth-banner p{margin:0} .proj .auth-banner.is-error{background:var(--err-bg); border:1px solid rgba(200,30,30,.3);color:var(--err-ink)} .proj .auth-banner.is-blocked{background:var(--warn-bg); border:1px solid rgba(146,64,14,.3);color:var(--warn-ink)} /* dévoilement du formulaire e-mail (comptes historiques uniquement) */ .proj .auth-email-toggle[hidden]{display:none} .proj .auth-email-toggle{display:block;width:100%;text-align:center;background:none;border:0; cursor:pointer;font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--beam); padding:10px 0 0;margin-top:14px} .proj .auth-email-toggle:hover{text-decoration:underline} .proj .auth-email-toggle:focus-visible{outline:2px solid var(--beam);outline-offset:2px} .proj .auth-div{display:flex;align-items:center;gap:12px;font-family:var(--mono); font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-l); margin:18px 0 14px} .proj .auth-div::before,.proj .auth-div::after{content:"";flex:1;height:1px; background:var(--line-l)} .proj .auth-note{font-size:13px;color:var(--faint-l);line-height:1.5;margin-bottom:16px} /* champs à icône */ .proj .flabel{display:block;font-size:13.5px;font-weight:600;color:var(--ink);margin:0 0 6px} .proj .field{position:relative;margin-bottom:12px} .proj .field>svg{position:absolute;left:14px;top:50%;transform:translateY(-50%); width:18px;height:18px;color:var(--muted-l);pointer-events:none} .proj .field input{width:100%;min-height:48px;border:1.5px solid #D7DDE7;border-radius:8px; background:var(--paper);color:var(--ink);font-size:15px;font-family:var(--sans); padding:0 44px 0 42px} .proj .field input::placeholder{color:var(--faint-l)} .proj .field input:focus{outline:2px solid var(--beam);outline-offset:1px;background:#fff} .proj .field-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%); width:36px;height:36px;display:flex;align-items:center;justify-content:center; background:none;border:0;border-radius:8px;color:var(--muted-l);cursor:pointer} .proj .field-eye:hover{color:var(--ink)} .proj .field-eye:focus-visible{outline:2px solid var(--beam)} .proj .field-eye svg{width:18px;height:18px} .proj .auth-hint{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em; color:var(--faint-l);margin:-4px 0 14px} .proj .auth-forgot{text-align:right;margin:2px 0 0} .proj .auth-forgot a{font-size:13.5px;font-weight:600;color:var(--beam)} .proj .auth-forgot a:hover{text-decoration:underline} .proj .btn-full{width:100%;margin-top:14px} /* états de formulaire */ .proj .form-error{background:var(--err-bg);border:1px solid rgba(200,30,30,.3); color:var(--err-ink);border-radius:8px;padding:10px 13px;font-size:13.5px;margin:0 0 14px} .proj .form-success{background:#EEF3FE;border:1px solid rgba(37,99,235,.35);border-radius:10px; padding:16px 18px;font-size:14.5px;color:var(--ink);line-height:1.55} .proj .auth-cgu{font-size:12.5px;color:var(--faint-l);text-align:center;margin-top:16px; line-height:1.5} .proj .auth-alt{margin-top:24px;padding-top:18px;border-top:1px solid var(--line-l); text-align:center;font-size:14px;color:var(--muted-l)} .proj .auth-alt a{font-weight:600;color:var(--beam)} .proj .auth-alt a:hover{text-decoration:underline} /* connexion en cours — arc statique (0 animation en boucle dans la maquette ; en production le spinner existant continue de tourner) */ .proj .auth-connecting{padding:34px 0 22px;text-align:center} .proj .auth-connecting svg{display:block;margin:0 auto 18px;color:var(--beam)} .proj .auth-connecting .t{font-size:16.5px;font-weight:700;color:var(--ink)} .proj .auth-connecting .s{font-size:14px;color:var(--muted-l);margin-top:4px} /* en-tête : lien de la page courante */ .proj .qlink.on{color:#fff} /* --------------------------------------------------------------- ATELIER (barre de travail, réglages, traitement, résultat, feuille de téléchargement, états transverses) + STUDIO PLEIN ÉCRAN Source : maquettes-sections/studio-atelier.html. Pas encore câblé à une route (PROJ_TEMPLATES) — extrait par anticipation, la vitrine outil et le Studio s'ajoutant ensuite. --------------------------------------------------------------- */ /* --------------------------------------------------------------- BARRE DE TRAVAIL (atelier des pages-outils — klat-bar rhabillée). Même contrat : logo = seule sortie, outil + sujet (extension préservée), crédits, compte, UNE action (lancement puis téléchargement au même endroit), filet d'avancement au bord bas. --------------------------------------------------------------- */ .proj .at-bar{position:relative;display:flex;align-items:center;gap:16px; min-height:62px;padding:0 18px;background:rgba(7,11,20,.97); border-bottom:1px solid var(--line-d)} .proj .at-logo{flex:none;display:flex;align-items:center} .proj .at-logo img{height:20px;width:auto;display:block} .proj .at-meta{min-width:0;line-height:1.25} .proj .at-tool{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em; text-transform:uppercase;color:var(--kick-d)} .proj .at-file{font-size:13.5px;font-weight:600;color:#fff;white-space:nowrap; overflow:hidden;text-overflow:ellipsis;max-width:34ch} .proj .at-spacer{flex:1} .proj .at-credits{display:inline-flex;align-items:center;gap:7px;flex:none; font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;color:var(--muted-d); border:1px solid var(--line-d);border-radius:999px;padding:7px 13px;background:none; cursor:pointer} .proj .at-credits:hover{border-color:var(--beam-bright);color:#E8EDF7} .proj .at-credits svg{color:var(--beam-bright)} .proj .at-credits b{color:#E8EDF7;font-weight:600} .proj .at-credits.is-low svg{color:var(--caption)} .proj .at-avatar{flex:none;width:34px;height:34px;border-radius:50%;border:0; background:#1D2E55;color:#fff;font-size:12.5px;font-weight:700;cursor:pointer; font-family:var(--sans);box-shadow:0 0 0 1px rgba(77,130,243,.35)} .proj .at-avatar:hover{box-shadow:0 0 0 2px var(--beam-bright)} .proj .at-go{position:relative;overflow:hidden;flex:none;min-height:42px; padding:0 20px;font-size:14.5px} .proj .at-go .fill{position:absolute;inset:0;background:#1D4ED8; transform-origin:left;transform:scaleX(0);transition:transform .5s var(--ease)} .proj .at-go .in{position:relative;display:inline-flex;align-items:center;gap:8px} .proj .at-rail{position:absolute;left:0;right:0;bottom:-1px;height:2px; background:rgba(77,130,243,.15)} .proj .at-rail i{display:block;height:100%;background:var(--beam-bright); border-radius:1px;transform-origin:left;transform:scaleX(.08); box-shadow:0 0 10px rgba(77,130,243,.8);transition:transform 1.1s var(--ease)} .proj .at-work{padding:26px 22px 30px} /* dock mobile : l'action ne se cherche jamais */ .proj .at-dock{display:none;padding:12px 16px;border-top:1px solid var(--line-d); background:rgba(7,11,20,.97)} .proj .at-dock .btn{width:100%} /* ——— dépôt : état « envoi en cours » (la zone validée du pilote reste ; ceci est le sous-état préparation/erreur) ——— */ .proj .at-prep{background:var(--night-2);border:1px solid var(--line-d); border-radius:10px;padding:16px 18px;max-width:560px} .proj .at-prep-head{display:flex;align-items:center;gap:12px} .proj .at-prep-name{min-width:0;flex:1;line-height:1.3} .proj .at-prep-name b{display:block;font-size:14px;color:#fff;font-weight:600; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .proj .at-prep-name span{font-size:12.5px;color:var(--muted-d)} .proj .at-prep-pct{font-family:var(--mono);font-size:12.5px;color:#E8EDF7;flex:none} .proj .at-x{flex:none;width:30px;height:30px;border-radius:8px;border:0; background:none;color:var(--muted-d);cursor:pointer;display:flex; align-items:center;justify-content:center} .proj .at-x:hover{background:rgba(77,130,243,.1);color:#fff} .proj .at-prep-bar{height:5px;border-radius:3px;background:rgba(255,255,255,.12); overflow:hidden;margin-top:12px} .proj .at-prep-bar i{display:block;height:100%;border-radius:3px; background:var(--beam-bright);transform-origin:left;transform:scaleX(.15); transition:transform 1.1s var(--ease)} .proj .in .at-prep-bar i{transform:scaleX(.62)} /* --------------------------------------------------------------- RÉGLAGES — aperçu WYSIWYG à gauche, choix à droite. Les cartes d'option reprennent la grammaire des cartes du système (night-2, sélection = lumière bleue), la sélection reste un état FORT. --------------------------------------------------------------- */ .proj .at-set-grid{display:grid;grid-template-columns:5fr 7fr;gap:22px;align-items:start} .proj .at-stage{background:#05080F;border:1px solid var(--line-d);border-radius:12px; padding:20px;display:flex;flex-direction:column;align-items:center;gap:0; position:relative} .proj .at-shot{position:relative;width:min(230px,72%);border-radius:10px; overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,.55)} .proj .at-shot img{display:block;width:100%} .proj .at-shot .shade{position:absolute;inset:0;background: linear-gradient(180deg,rgba(5,8,15,.2) 0%,transparent 30%,transparent 55%, rgba(5,8,15,.85) 100%)} .proj .at-shot .fmt{position:absolute;top:8px;right:8px;font-family:var(--mono); font-size:10px;border-radius:4px;padding:2px 6px;background:rgba(0,0,0,.55); color:#dbe4f5;z-index:2} .proj .at-stage-note{font-family:var(--mono);font-size:11px;letter-spacing:.06em; text-transform:uppercase;color:var(--muted-d);margin-top:14px;text-align:center} .proj .opt-kick{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em; text-transform:uppercase;color:var(--kick-d);margin-bottom:12px;display:block} .proj .opt-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .proj .opt-card{position:relative;text-align:left;background:var(--night-2); border:1px solid var(--line-d);border-radius:12px;padding:15px 16px;cursor:pointer; font-family:var(--sans);color:inherit;transition:border-color .2s,background .2s, box-shadow .2s} .proj .opt-card:hover{border-color:rgba(77,130,243,.45)} .proj .opt-card strong{display:block;font-size:15px;color:#fff;margin-bottom:3px} .proj .opt-card span{font-size:12.5px;color:var(--muted-d);line-height:1.45;display:block} .proj .opt-card .tick{position:absolute;top:10px;right:10px;width:20px;height:20px; border-radius:50%;background:var(--beam);display:none;align-items:center; justify-content:center;color:#fff} .proj .opt-card[aria-checked="true"]{border-color:var(--beam-bright); background:rgba(37,99,235,.12);box-shadow:0 0 26px rgba(37,99,235,.2)} .proj .opt-card[aria-checked="true"] .tick{display:flex} .proj .opt-sub{margin-top:22px} .proj .fmt-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:10px} .proj .fmt-card{position:relative;background:var(--night-2);border:1px solid var(--line-d); border-radius:10px;padding:12px 8px;text-align:center;cursor:pointer; font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;color:#E8EDF7} .proj .fmt-card small{display:block;font-size:10px;color:var(--muted-d);margin-top:3px; letter-spacing:.02em} .proj .fmt-card:hover{border-color:rgba(77,130,243,.45)} .proj .fmt-card[aria-checked="true"]{border-color:var(--beam-bright); background:rgba(37,99,235,.12)} .proj .opt-note{font-family:var(--mono);font-size:11px;letter-spacing:.05em; color:var(--muted-d);margin-top:18px;line-height:1.6} .proj .opt-note em{font-style:normal;color:#8FB0F9} /* --------------------------------------------------------------- TRAITEMENT — le fil d'étapes réel (proc_fil), la file d'attente, la ligne de vérité, la proposition d'e-mail. Une seule jauge animée, BORNÉE, jouée à l'entrée à l'écran. --------------------------------------------------------------- */ .proj .proc-grid{display:grid;grid-template-columns:7fr 5fr;gap:22px;align-items:start} .proj .fil-card{background:var(--night-2);border:1px solid var(--line-d); border-radius:14px;padding:26px 28px} .proj .fil-kick{display:flex;justify-content:space-between;align-items:baseline; font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase; margin-bottom:20px} .proj .fil-kick .l{color:var(--kick-d)} .proj .fil-kick .r{color:#E8EDF7} .proj .fil{list-style:none;display:grid;gap:18px} .proj .fil li{display:flex;gap:14px;align-items:flex-start} .proj .fil .pip{flex:none;width:26px;height:26px;border-radius:50%;display:flex; align-items:center;justify-content:center;font-family:var(--mono);font-size:11px; color:var(--muted-d);border:1.5px solid var(--line-d);margin-top:1px} .proj .fil li.done .pip{background:var(--beam);border-color:var(--beam);color:#fff} .proj .fil li.now .pip{border-color:var(--beam-bright); box-shadow:0 0 14px rgba(77,130,243,.5)} .proj .fil li.now .pip i{width:8px;height:8px;border-radius:50%; background:var(--beam-bright)} .proj .fil .t{font-size:14.5px;font-weight:600;color:var(--muted-d);line-height:1.4} .proj .fil li.done .t,.proj .fil li.now .t{color:#fff} .proj .fil .d{font-size:13px;color:var(--muted-d);margin-top:3px;max-width:46ch} .proj .fil-mini{height:4px;border-radius:2px;background:rgba(255,255,255,.12); overflow:hidden;margin-top:10px;max-width:300px} .proj .fil-mini i{display:block;height:100%;border-radius:2px; background:var(--beam-bright);transform-origin:left;transform:scaleX(.12); transition:transform 1.4s var(--ease)} .proj .in .fil-mini i{transform:scaleX(.62)} .proj .fil-truth{display:flex;gap:11px;align-items:flex-start;margin-top:24px; padding-top:18px;border-top:1px solid var(--line-d);font-size:13.5px; color:var(--muted-d);line-height:1.55} .proj .fil-truth svg{flex:none;margin-top:2px;color:var(--beam-bright)} .proj .fil-truth b{color:#E8EDF7;font-weight:600} .proj .fil-cancel{margin-top:16px;border:0;background:none;cursor:pointer; font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--muted-d); padding:6px 0;text-transform:uppercase} .proj .fil-cancel:hover{color:#fff} .proj .fil-mail{display:flex;gap:14px;align-items:center;background:rgba(37,99,235,.08); border:1px solid var(--line-d);border-radius:12px;padding:14px 18px;margin-top:16px} .proj .fil-mail p{font-size:13.5px;color:var(--muted-d);flex:1;line-height:1.5} .proj .fil-mail p b{color:#E8EDF7;font-weight:600} .proj .fil-mail .btn{min-height:40px;padding:0 16px;font-size:13.5px;flex:none} .proj .fil-side{display:grid;gap:22px} .proj .queue-card{background:var(--night-2);border:1px solid var(--line-d); border-radius:14px;padding:26px;text-align:center} .proj .queue-n{font-family:var(--display);font-size:44px;color:#fff;line-height:1} .proj .queue-t{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em; text-transform:uppercase;color:var(--kick-d);margin-top:8px} .proj .queue-card p{font-size:13px;color:var(--muted-d);margin-top:10px;line-height:1.5} /* modale « prévenez-moi » (visiteur) : une décision → studio clair */ .proj .at-modal{background:var(--card);color:var(--ink);border-radius:14px; padding:26px;box-shadow:0 30px 80px rgba(0,0,0,.55);position:relative} .proj .at-modal .mx{position:absolute;top:12px;right:12px;width:30px;height:30px; border:0;background:none;color:var(--faint-l);font-size:20px;cursor:pointer; border-radius:8px;line-height:1} .proj .at-modal .mx:hover{background:var(--paper);color:var(--ink)} .proj .at-modal-ic{width:44px;height:44px;border-radius:11px; background:rgba(37,99,235,.1);display:flex;align-items:center;justify-content:center; color:var(--beam);margin:0 auto 14px} .proj .at-modal h4{font-size:16px;font-weight:700;text-align:center;margin-bottom:6px} .proj .at-modal>p{font-size:13.5px;color:var(--muted-l);text-align:center; line-height:1.5} .proj .at-modal input{width:100%;min-height:46px;border:1.5px solid #D7DDE7; border-radius:8px;padding:0 14px;font-size:14.5px;margin-top:14px;color:var(--ink); background:#fff;font-family:var(--sans)} .proj .at-modal input::placeholder{color:var(--faint-l)} .proj .at-modal input:focus{outline:2px solid var(--beam);outline-offset:1px} .proj .at-modal .btn{width:100%;margin-top:10px} .proj .at-modal .decline{display:block;margin:10px auto 0;border:0;background:none; font-size:13px;font-weight:600;color:var(--muted-l);cursor:pointer;padding:6px 10px; font-family:var(--sans)} .proj .at-modal .privacy{font-family:var(--mono);font-size:10.5px;letter-spacing:.03em; color:var(--faint-l);text-align:center;margin-top:8px;line-height:1.5} /* --------------------------------------------------------------- RÉSULTAT — la scène au format réel, la confirmation, les chips d'information, les artefacts, la suite. Le téléchargement vit dans la barre (état « fait » = jauge pleine). --------------------------------------------------------------- */ .proj .res-grid{display:grid;grid-template-columns:6fr 6fr;gap:22px;align-items:start} .proj .res-ok{display:flex;gap:10px;align-items:center;margin-top:16px; font-size:14.5px;font-weight:600;color:#fff} .proj .res-ok .ic{flex:none;width:26px;height:26px;border-radius:50%; background:rgba(255,211,77,.14);border:1px solid rgba(255,211,77,.4); display:flex;align-items:center;justify-content:center;color:var(--caption)} .proj .res-ok b{color:var(--caption)} .proj .res-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px} .proj .res-chip{background:var(--night-2);border:1px solid var(--line-d); border-radius:8px;padding:8px 13px;font-family:var(--mono);font-size:11.5px; letter-spacing:.05em;color:var(--muted-d)} .proj .res-chip b{color:#E8EDF7;font-weight:600;margin-left:5px} .proj .res-chip.is-gain{border-color:rgba(255,211,77,.4)} .proj .res-chip.is-gain b{color:var(--caption)} .proj .res-note{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em; color:var(--muted-d);line-height:1.6;margin-bottom:18px} .proj .res-note b{color:#E8EDF7;font-weight:600} .proj .res-sec{display:flex;gap:14px;align-items:center;width:100%;text-align:left; background:var(--night-2);border:1px solid var(--line-d);border-radius:12px; padding:14px 16px;margin-bottom:10px;cursor:pointer;color:inherit; font-family:var(--sans);transition:border-color .2s} .proj .res-sec:hover{border-color:var(--beam-bright)} .proj .res-sec .ic{flex:none;width:38px;height:38px;border-radius:10px; background:rgba(37,99,235,.14);display:flex;align-items:center;justify-content:center; color:var(--beam-bright)} .proj .res-sec .bd{flex:1;min-width:0;line-height:1.35} .proj .res-sec .bd b{display:block;font-size:14px;color:#fff;font-weight:600} .proj .res-sec .bd span{font-size:12.5px;color:var(--muted-d)} .proj .res-sec>svg{flex:none;color:var(--muted-d)} .proj .next-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px} .proj .next-card{display:block;background:var(--night-2);border:1px solid var(--line-d); border-radius:12px;padding:16px 18px;transition:border-color .25s,transform .25s var(--ease)} .proj .next-card:hover{border-color:var(--beam-bright);transform:translateY(-2px)} .proj .next-card .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em; text-transform:uppercase;color:var(--kick-d);display:block;margin-bottom:6px} .proj .next-card b{font-size:14.5px;color:#fff;font-weight:600;display:block} .proj .next-card b::after{content:" →";color:var(--beam-bright)} .proj .next-card span{font-size:12.5px;color:var(--muted-d);display:block;margin-top:4px; line-height:1.45} /* ——— feuille de téléchargement : zone de DÉCISION → studio clair ——— */ .proj .sheet-wrap{display:flex;align-items:flex-end;justify-content:center; padding:48px 20px 0;background: radial-gradient(560px 300px at 50% 0%, rgba(37,99,235,.12), transparent 70%)} .proj .sheet{background:var(--card);color:var(--ink);border-radius:16px 16px 0 0; padding:14px 20px 24px;width:min(460px,100%); box-shadow:0 -18px 70px rgba(17,24,39,.18)} .proj .sheet-grip{display:block;width:40px;height:4px;border-radius:2px; background:#D7DDE7;margin:0 auto 14px} .proj .sheet-h{display:flex;align-items:center;justify-content:space-between; margin-bottom:14px} .proj .sheet-h p{font-size:16px;font-weight:700} .proj .sheet-x{width:30px;height:30px;border:0;background:none;color:var(--faint-l); cursor:pointer;border-radius:8px;display:flex;align-items:center;justify-content:center} .proj .sheet-x:hover{background:var(--paper);color:var(--ink)} .proj .sheet-row{display:flex;gap:13px;align-items:center;width:100%;text-align:left; background:#fff;border:1.5px solid var(--line-l);border-radius:12px; padding:13px 15px;margin-bottom:10px;cursor:pointer;font-family:var(--sans); color:inherit;transition:border-color .2s,box-shadow .2s} .proj .sheet-row:hover{border-color:var(--beam); box-shadow:0 8px 26px rgba(37,99,235,.12)} .proj .sheet-row .ic{flex:none;width:38px;height:38px;border-radius:10px; background:rgba(37,99,235,.1);display:flex;align-items:center;justify-content:center; color:var(--beam)} .proj .sheet-row .bd{flex:1;min-width:0;line-height:1.35} .proj .sheet-row .bd b{display:block;font-size:14.5px;font-weight:700;color:var(--ink)} .proj .sheet-row .bd span{font-size:12px;color:var(--muted-l)} .proj .sheet-price{flex:none;font-family:var(--display);font-size:19px;color:var(--ink); letter-spacing:.02em;text-align:right;line-height:1.1} .proj .sheet-price small{display:block;font-family:var(--mono);font-size:9.5px; color:var(--faint-l);letter-spacing:.04em} .proj .sheet-row.is-pro{background:#EEF3FE;border-color:rgba(37,99,235,.35)} .proj .sheet-row.is-pro .ic{background:rgba(124,58,237,.12);color:var(--violet)} /* --------------------------------------------------------------- ÉTATS TRANSVERSES — erreur de dépôt, fichier expiré, maintenance. L'erreur nomme la cause et donne la VRAIE sortie (le fichier est conservé) ; l'ambre dit « indisponible », jamais « cassé ». --------------------------------------------------------------- */ .proj .tr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px} .proj .tr-card{background:var(--night-2);border:1px solid var(--line-d); border-radius:14px;padding:24px;display:flex;flex-direction:column;min-height:100%} .proj .tr-card.is-err{border-color:rgba(248,113,113,.35)} .proj .tr-card.is-warn{border-color:rgba(251,191,36,.3)} .proj .tr-ic{width:42px;height:42px;border-radius:11px;display:flex;align-items:center; justify-content:center;margin-bottom:14px;background:rgba(77,130,243,.12); color:var(--beam-bright)} .proj .tr-card.is-err .tr-ic{background:rgba(248,113,113,.12);color:var(--danger-d)} .proj .tr-card.is-warn .tr-ic{background:rgba(251,191,36,.1);color:var(--warn-d)} .proj .tr-card h4{font-size:15.5px;font-weight:700;color:#fff;margin-bottom:6px; line-height:1.35} .proj .tr-card>p{font-size:13.5px;color:var(--muted-d);line-height:1.55;flex:1} .proj .tr-acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px} .proj .tr-acts .btn{min-height:42px;padding:0 16px;font-size:13.5px} .proj .tr-hint{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em; color:var(--muted-d);margin-top:12px;line-height:1.5} /* --------------------------------------------------------------- STUDIO PLEIN ÉCRAN — barre haute, rail d'outils, panneau, scène, timeline multipiste (composants .tl-* du système, réutilisés). --------------------------------------------------------------- */ .proj .st-top{display:flex;align-items:center;gap:9px;min-height:52px;padding:0 12px; border-bottom:1px solid var(--line-d);background:rgba(7,11,20,.97)} .proj .st-brand{display:flex;align-items:center;gap:8px;flex:none;margin-right:4px} .proj .st-brand img{height:22px;width:auto;display:block} .proj .st-brand span{font-family:var(--display);font-size:13px;letter-spacing:.1em; color:#fff;text-transform:uppercase} .proj .st-btn{display:inline-flex;align-items:center;gap:6px;min-height:34px; padding:0 12px;border-radius:8px;border:1px solid var(--line-d);background:none; color:var(--muted-d);font-size:12.5px;font-weight:600;cursor:pointer; font-family:var(--sans);flex:none} .proj .st-btn:hover{border-color:var(--beam-bright);color:#fff} .proj .st-file{display:inline-flex;align-items:center;gap:8px;min-width:0; border:0;background:none;cursor:pointer;color:#E8EDF7;font-size:13px; font-weight:600;font-family:var(--sans);padding:6px 8px;border-radius:8px} .proj .st-file:hover{background:rgba(77,130,243,.1)} .proj .st-file span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis; max-width:24ch} .proj .st-file svg{flex:none;color:var(--muted-d)} .proj .st-status{display:inline-flex;align-items:center;gap:6px;flex:none; font-family:var(--mono);font-size:10.5px;letter-spacing:.06em; text-transform:uppercase;color:var(--muted-d)} .proj .st-status i{width:6px;height:6px;border-radius:50%;background:var(--caption)} .proj .st-qa{flex:none;width:34px;height:34px;border-radius:8px;border:0; background:none;color:var(--muted-d);cursor:pointer;display:flex; align-items:center;justify-content:center} .proj .st-qa:hover{background:rgba(77,130,243,.1);color:#fff} .proj .st-dl{min-height:38px;padding:0 16px;font-size:13.5px;flex:none} .proj .st-body{display:grid;grid-template-columns:86px 250px 1fr;min-height:540px} .proj .st-rail{border-right:1px solid var(--line-d);padding:10px 7px;display:flex; flex-direction:column;gap:2px;overflow-y:auto} .proj .st-nav{position:relative;display:flex;flex-direction:column;align-items:center; gap:5px;padding:9px 2px 8px;border-radius:10px;border:0;background:none; color:var(--muted-d);font-size:10px;font-weight:600;cursor:pointer; font-family:var(--sans);letter-spacing:.01em} .proj .st-nav:hover{background:rgba(77,130,243,.1);color:#fff} .proj .st-nav.on{background:rgba(37,99,235,.16);color:#fff; box-shadow:inset 0 0 0 1px rgba(77,130,243,.35)} .proj .st-ai{position:absolute;top:4px;right:8px;width:13px;height:13px; border-radius:4px;background:rgba(124,58,237,.28);color:#C4B5FD;font-size:8px; display:flex;align-items:center;justify-content:center;line-height:1} .proj .st-sep{height:1px;background:var(--line-d);margin:7px 8px;flex:none} .proj .st-panel{border-right:1px solid var(--line-d);background:rgba(12,19,34,.55); padding:16px 14px;display:flex;flex-direction:column;gap:18px;min-width:0} .proj .st-panel-kick{font-family:var(--mono);font-size:11px;letter-spacing:.14em; text-transform:uppercase;color:var(--kick-d)} .proj .st-lab{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em; text-transform:uppercase;color:var(--muted-d);display:block;margin-bottom:8px} .proj .st-styles{display:grid;grid-template-columns:1fr 1fr;gap:8px} .proj .st-style{position:relative;border:1px solid var(--line-d);border-radius:10px; background:var(--night);padding:12px 6px 8px;text-align:center;cursor:pointer; color:inherit;font-family:var(--sans)} .proj .st-style:hover{border-color:rgba(77,130,243,.45)} .proj .st-style[aria-checked="true"]{border-color:var(--beam-bright); box-shadow:0 0 20px rgba(37,99,235,.25)} .proj .st-style .capline{font-size:13px;min-height:22px;display:block} .proj .st-style .nm{display:block;font-family:var(--mono);font-size:9px; letter-spacing:.1em;text-transform:uppercase;color:var(--muted-d);margin-top:7px} .proj .st-style .pro{position:absolute;top:6px;right:6px;font-family:var(--mono); font-size:8.5px;letter-spacing:.06em;color:#C4B5FD;background:rgba(124,58,237,.25); border-radius:4px;padding:1px 5px} .proj .st-seg{display:flex;gap:6px} .proj .st-seg button{flex:1;min-height:32px;border-radius:8px; border:1px solid var(--line-d);background:none;color:var(--muted-d); font-size:12px;font-weight:600;cursor:pointer;font-family:var(--sans)} .proj .st-seg button:hover{color:#fff;border-color:rgba(77,130,243,.45)} .proj .st-seg button[aria-checked="true"]{background:rgba(37,99,235,.16); border-color:var(--beam-bright);color:#fff} .proj .st-swatches{display:flex;gap:7px;flex-wrap:wrap} .proj .st-swatch{width:26px;height:26px;border-radius:8px;cursor:pointer; border:1px solid var(--line-d);padding:0} .proj .st-swatch[aria-checked="true"]{box-shadow:0 0 0 2px var(--night), 0 0 0 4px var(--beam-bright)} .proj .st-panel-note{font-family:var(--mono);font-size:10px;letter-spacing:.05em; color:var(--muted-d);margin-top:auto;line-height:1.55} .proj .st-centre{display:flex;flex-direction:column;gap:12px;padding:14px;min-width:0} .proj .st-scene{flex:1;display:flex;align-items:center;justify-content:center; background:#05080F;border:1px solid var(--line-d);border-radius:12px; padding:16px;position:relative;min-height:250px} .proj .st-scene .at-shot{width:min(178px,44%)} .proj .st-scene .cap{position:absolute;left:8%;right:8%;bottom:18%;text-align:center; font-size:15px;line-height:1.3;z-index:2;pointer-events:none} .proj .st-transport{display:flex;align-items:center;gap:12px} .proj .st-play{flex:none;width:36px;height:36px;border-radius:50%; border:1px solid var(--line-d);background:none;color:#fff;cursor:pointer; display:flex;align-items:center;justify-content:center} .proj .st-play:hover{border-color:var(--beam-bright);color:var(--beam-bright)} .proj .st-time{font-family:var(--mono);font-size:12px;letter-spacing:.05em; color:var(--muted-d)} .proj .st-time b{color:#E8EDF7;font-weight:600} .proj .st-zoom{margin-left:auto;display:flex;gap:6px;align-items:center} .proj .st-zoom button{width:30px;height:30px;border-radius:8px; border:1px solid var(--line-d);background:none;color:var(--muted-d);cursor:pointer; font-size:14px;line-height:1;font-family:var(--mono)} .proj .st-zoom button:hover{color:#fff;border-color:rgba(77,130,243,.45)} .proj .st-zoom span{font-family:var(--mono);font-size:11px;color:var(--muted-d)} .proj .st-tl{position:relative;border:1px solid var(--line-d);border-radius:12px; padding:12px;background:rgba(12,19,34,.5)} /* ——— focus visible commun aux contrôles de l'atelier ——— */ .proj .opt-card:focus-visible,.proj .fmt-card:focus-visible, .proj .st-nav:focus-visible,.proj .st-btn:focus-visible, .proj .st-qa:focus-visible,.proj .st-style:focus-visible, .proj .st-seg button:focus-visible,.proj .st-swatch:focus-visible, .proj .sheet-row:focus-visible,.proj .res-sec:focus-visible, .proj .at-credits:focus-visible,.proj .at-avatar:focus-visible, .proj .fil-cancel:focus-visible,.proj .at-x:focus-visible, .proj .st-play:focus-visible,.proj .st-file:focus-visible{ outline:2px solid var(--beam-bright);outline-offset:2px} /* --------------------------------------------------------------- RESPONSIVE — pages secondaires (un bloc @media par famille, valide en CSS ; ne fusionne pas avec le RESPONSIVE ci-dessus pour ne rien risquer sur l'accueil). --------------------------------------------------------------- */ @media (max-width:1020px){ .proj .verdict-grid{grid-template-columns:1fr;max-width:520px} .proj .legal-shell{grid-template-columns:1fr} .proj .legal-toc{position:static;max-height:none} .proj .contact-grid{grid-template-columns:1fr;max-width:560px} } @media (max-width:720px){ .proj .legal-body{padding:26px 22px 30px} .proj .stats-light{gap:26px} .proj .verdict-row{grid-template-columns:1fr} .proj .job-bar .fname{display:none} } @media (max-width:1020px){ .proj .dash-shell{grid-template-columns:minmax(0,1fr)} /* le min-content ne doit pas étirer la colonne */ .proj .dash-aside{position:static;display:flex;gap:8px;padding:8px} .proj .dash-aside a{flex:1;justify-content:center;padding:11px 8px} .proj .dash-aside a.on{box-shadow:inset 0 -3px 0 var(--beam)} .proj .usage-grid{grid-template-columns:repeat(2,1fr)} .proj .set-grid{grid-template-columns:1fr} } @media (max-width:720px){ .proj .dash-band{padding:30px 0 28px} .proj .dash-main{padding:24px 0 72px} .proj .dash-grid{grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:12px} .proj .vthumb .ph{font-size:24px} .proj .usage-grid{gap:14px 18px} .proj .feats{grid-template-columns:1fr} .proj .scard{padding:20px} } @media (max-width:1020px){ .proj .tgrid{grid-template-columns:repeat(2,1fr)} .proj .reas{grid-template-columns:1fr;max-width:520px} .proj .art{grid-template-columns:1fr;gap:36px} .proj .art-aside{position:static;display:grid;gap:16px; grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))} .proj .art-share{margin-top:0} } @media (max-width:720px){ .proj .tgrid{grid-template-columns:1fr;margin-top:36px} .proj .studio-feat{flex-wrap:wrap;padding:18px} .proj .studio-feat .btn{width:100%} .proj .kcta-top{flex-wrap:wrap} .proj .kcta-top .btn{width:100%} .proj .kcta-end{padding:24px 20px} .proj .kcta-end-row .btn{width:100%} .proj .kcta-drop{width:100%;justify-content:center} .proj .art-hero img{aspect-ratio:16/10} .proj .pgn{flex-wrap:wrap} } @media (max-width:1020px){ .proj .auth-hall{grid-template-columns:1fr;max-width:560px} .proj .auth-beam{padding:34px 34px 30px} } @media (max-width:720px){ .proj .auth-stage{padding:24px 0 76px} .proj .auth-hall{border-radius:14px} .proj .auth-beam{padding:24px 22px 22px} .proj .ab-icon{width:32px;margin-bottom:16px} .proj .ab-lead,.proj .auth-beam .reassure{display:none} .proj .ab-title{margin-bottom:0;font-size:24px} .proj .auth-card{padding:26px 20px 24px} .proj h2.auth-title{font-size:25px} } @media (max-width:1020px){ .proj .at-set-grid,.proj .proc-grid,.proj .res-grid{grid-template-columns:1fr} .proj .tr-grid{grid-template-columns:1fr;max-width:520px} .proj .st-body{grid-template-columns:86px 1fr} .proj .st-panel{display:none} .proj .opt-cards{grid-template-columns:1fr} .proj .fmt-cards{grid-template-columns:repeat(3,1fr)} } @media (max-width:720px){ .proj .at-bar{gap:10px;padding:0 12px;min-height:56px} .proj .at-meta{display:none} .proj .at-bar .at-go{display:none} .proj .at-dock{display:block} .proj .at-work{padding:18px 14px 22px} .proj .st-body{grid-template-columns:1fr;min-height:0} .proj .st-rail{flex-direction:row;overflow-x:auto;border-right:0; border-bottom:1px solid var(--line-d);padding:8px} .proj .st-nav{flex:none;min-width:58px} .proj .st-sep{width:1px;height:auto;margin:6px 4px;align-self:stretch} .proj .st-top .st-file{display:none} .proj .st-top .st-qa{display:none} .proj .st-top .st-status{display:none} .proj .st-btn .lab{display:none} .proj .st-btn{padding:0 10px} .proj .st-scene{min-height:300px} .proj .st-scene .at-shot{width:min(160px,52%)} .proj .fmt-cards{grid-template-columns:repeat(3,1fr)} .proj .next-cards{grid-template-columns:1fr} .proj .tl-label{width:22px} .proj .st-zoom{display:none} .proj .fil-card{padding:20px 18px} .proj .fil-mail{flex-direction:column;align-items:flex-start} .proj .sheet-wrap{padding:32px 10px 0} .proj .sheet{padding:12px 14px 18px} .proj .sheet-row{padding:12px;gap:10px} .proj .sheet-row .ic{width:32px;height:32px} .proj .sheet-row .bd b{font-size:13.5px} .proj .sheet-row .bd span{font-size:11.5px} .proj .sheet-price{font-size:17px} }