styles.css

:root{--bg:#090b10;--panel:#11151d;--panel2:#151b25;--text:#f5f7fb;--muted:#9ba6b7;--line:rgba(255,255,255,.09);--accent:#7c8cff;--mint:#44d7b6;--lime:#d6ff6b;--shadow:0 24px 70px rgba(0,0,0,.35);--radius:24px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.6;overflow-x:hidden}a{color:inherit;text-decoration:none}button{font:inherit}.ambient{position:fixed;width:42vw;height:42vw;border-radius:50%;filter:blur(110px);opacity:.13;pointer-events:none;z-index:-2}.ambient-one{background:var(--accent);top:-18vw;left:-18vw}.ambient-two{background:var(--mint);right:-20vw;bottom:-22vw}.noise{position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}.site-header{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:18px clamp(20px,4vw,64px);background:rgba(9,11,16,.72);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}.brand{display:flex;gap:12px;align-items:center}.brand-mark{display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(124,140,255,.5);border-radius:14px;background:linear-gradient(145deg,rgba(124,140,255,.14),rgba(68,215,182,.08));font-weight:800}.brand-copy{display:flex;flex-direction:column;line-height:1.2}.brand-copy strong{font-size:.86rem;letter-spacing:.08em}.brand-copy small{font-size:.72rem;color:var(--muted)}.main-nav{display:flex;align-items:center;gap:22px}.main-nav a{font-size:.88rem;color:#c6cedb}.main-nav a:hover{color:#fff}.nav-cta{padding:10px 16px;border:1px solid rgba(124,140,255,.42);border-radius:999px;background:rgba(124,140,255,.08)}.nav-toggle{display:none;background:none;border:0;padding:8px}.nav-toggle span{display:block;width:24px;height:2px;background:#fff;margin:5px}.section-shell{width:min(1180px,calc(100% - 40px));margin:0 auto;padding:96px 0}.hero{min-height:calc(100vh - 80px);display:grid;grid-template-columns:1.02fr .98fr;gap:64px;align-items:center}.eyebrow{display:flex;align-items:center;gap:10px;color:#aeb8c8;text-transform:uppercase;letter-spacing:.12em;font-size:.74rem}.eyebrow>span{width:30px;height:1px;background:linear-gradient(90deg,var(--accent),var(--mint))}.hero h1,.section-heading h2,.contact-panel h2{font-size:clamp(2.8rem,6vw,6rem);line-height:.96;letter-spacing:-.055em;margin:18px 0 24px}.hero h1 em{font-style:normal;color:var(--lime)}.hero-intro,.profile-copy p,.tools-intro p,.vision-note{color:#aeb8c8;font-size:1.05rem}.hero-intro strong,.profile-copy strong{color:#fff}.hero-actions{display:flex;gap:12px;margin:30px 0}.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:13px 18px;border-radius:14px;border:1px solid var(--line);cursor:pointer}.button-primary{background:#f4f7fb;color:#0a0d12;font-weight:700}.button-ghost{background:rgba(255,255,255,.03)}.availability{display:flex;align-items:center;gap:9px;color:#9da8b8;font-size:.9rem}.status-dot,.system-dot{width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 18px var(--mint)}.workflow-card,.quote-card,.vision-panel,.contact-panel,.profile-card,.method-card,.tools-layout,.timeline,.system-window,.skills-console,.training-node,.extra-grid article{background:linear-gradient(180deg,rgba(19,24,33,.92),rgba(13,17,24,.92));border:1px solid var(--line);box-shadow:var(--shadow)}.workflow-card{position:relative;height:560px;border-radius:28px;overflow:hidden}.workflow-topline,.system-bar{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line);font-size:.77rem;color:#9da7b8;text-transform:uppercase;letter-spacing:.08em}.live-pill{display:flex;align-items:center;gap:7px;padding:5px 9px;border:1px solid rgba(68,215,182,.25);border-radius:999px}.live-pill i{width:7px;height:7px;background:var(--mint);border-radius:50%}.workflow-lines{position:absolute;inset:48px 0 0;width:100%;height:calc(100% - 48px)}.flow-path{fill:none;stroke:url(#pathGradient);stroke-width:2.2;opacity:.7;stroke-dasharray:8 10;animation:dash 9s linear infinite}.pulse-dot{fill:var(--lime);filter:url(#glow)}@keyframes dash{to{stroke-dashoffset:-180}}.node{position:absolute;width:145px;padding:12px;border-radius:16px;background:rgba(10,13,19,.92);border:1px solid rgba(255,255,255,.12);box-shadow:0 12px 30px rgba(0,0,0,.28)}.node small,.node-index{display:block;color:#7f8a9a;font-size:.65rem;text-transform:uppercase;letter-spacing:.08em}.node strong{display:block;margin:4px 0;font-size:.95rem}.node p{margin:0;color:#9fa9b9;font-size:.72rem;line-height:1.35}.node-need{left:5%;top:16%}.node-nocode{left:39%;top:39%}.node-ai{right:5%;top:16%}.node-impact{left:39%;bottom:13%}.flow-caption{position:absolute;bottom:20px;left:20px;right:20px;display:flex;justify-content:center;gap:11px;color:#8f99a8;font-size:.7rem;letter-spacing:.12em}.statement-strip,.cv-ticker{overflow:hidden;border-block:1px solid var(--line);background:rgba(255,255,255,.018)}.marquee-track,.cv-ticker-track{width:max-content;display:flex;align-items:center;gap:20px;padding:14px 0;animation:marquee 30s linear infinite;color:#aeb7c5;font-size:.76rem;letter-spacing:.14em}.marquee-track i,.cv-ticker-track i{width:5px;height:5px;border-radius:50%;background:var(--mint)}@keyframes marquee{to{transform:translateX(-50%)}}.split-section{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px}.section-heading h2{font-size:clamp(2.4rem,5vw,4.9rem)}.section-heading.compact{margin-bottom:35px}.quote-card{margin-top:30px;padding:28px;border-radius:20px}.quote-mark{font-size:2rem;color:var(--lime)}.method-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.method-card{position:relative;padding:28px;border-radius:20px;min-height:240px}.card-number{position:absolute;right:18px;top:16px;color:#6f7a8a;font-size:.72rem}.method-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:rgba(124,140,255,.12);border:1px solid rgba(124,140,255,.3);font-size:1.2rem}.method-card h3{margin:28px 0 8px}.method-card p{color:#9ea8b8}.tools-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:35px;padding:30px;border-radius:24px}.legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:24px;font-size:.75rem;color:#98a3b4}.level{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px}.level.practiced{background:var(--mint)}.level.studied{background:var(--accent)}.level.explored{background:#6c7481}.tool-cloud{display:flex;flex-wrap:wrap;gap:10px;align-content:flex-start}.tool-chip{display:inline-block;text-align:center;cursor:default;border:1px solid var(--line);background:#0d1118;color:#f0f3f8;padding:12px 14px;border-radius:999px}.tool-chip small{color:#7f8999;margin-left:7px}.tool-chip.practiced{border-color:rgba(68,215,182,.32)}.tool-chip.studied{border-color:rgba(124,140,255,.32)}.timeline{border-radius:24px;padding:8px 28px}.timeline-row{display:grid;grid-template-columns:150px 24px 1fr;gap:20px;padding:28px 0;border-bottom:1px solid var(--line)}.timeline-row:last-child{border-bottom:0}.timeline-date{color:#8e99a9;font-size:.9rem}.timeline-dot{position:relative}.timeline-dot:before{content:"";position:absolute;top:7px;left:6px;width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 20px rgba(124,140,255,.55)}.timeline-dot:after{content:"";position:absolute;top:20px;left:10px;bottom:-35px;width:1px;background:var(--line)}.timeline-row:last-child .timeline-dot:after{display:none}.timeline-label{color:var(--mint);font-size:.68rem;letter-spacing:.11em;text-transform:uppercase}.timeline-content h3{margin:4px 0}.timeline-content p{margin:7px 0 0;color:#9ea8b7}.vision-panel{padding:42px;border-radius:26px}.vision-panel blockquote{font-size:clamp(1.7rem,3vw,3.1rem);line-height:1.15;letter-spacing:-.03em;margin:18px 0}.contact-panel{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:38px;border-radius:26px}.contact-panel h2{font-size:clamp(2.3rem,4vw,4rem)}.contact-actions,.contact-data{display:flex;flex-direction:column;gap:12px;justify-content:center}.contact-link,.contact-data a{display:flex;align-items:center;gap:14px;padding:16px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.02)}.contact-link:hover,.contact-data a:hover{border-color:rgba(124,140,255,.42);transform:translateY(-1px)}.contact-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:rgba(124,140,255,.1);border:1px solid rgba(124,140,255,.23)}.contact-link span:nth-child(2){display:flex;flex-direction:column;flex:1}.contact-link small{color:#7f8999}.site-footer{display:flex;justify-content:space-between;align-items:center;padding:28px clamp(20px,4vw,64px);border-top:1px solid var(--line);color:#8d98a8;font-size:.8rem}.site-footer div{display:flex;gap:10px}.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}.reveal.is-visible{opacity:1;transform:none}
@media(max-width:900px){.main-nav{position:fixed;top:79px;left:16px;right:16px;display:none;flex-direction:column;align-items:stretch;padding:18px;background:#0e1219;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}.main-nav.open{display:flex}.nav-toggle{display:block}.hero,.split-section,.tools-layout,.contact-panel{grid-template-columns:1fr}.hero{padding-top:50px}.workflow-card{height:520px}.method-grid{grid-template-columns:1fr 1fr}.section-shell{padding:72px 0}.timeline-row{grid-template-columns:105px 20px 1fr}}@media(max-width:620px){.section-shell{width:min(100% - 24px,1180px)}.hero h1{font-size:3.1rem}.method-grid{grid-template-columns:1fr}.workflow-card{height:500px}.node{width:125px}.node-need{left:4%}.node-ai{right:4%}.node-nocode,.node-impact{left:36%}.timeline{padding:4px 15px}.timeline-row{grid-template-columns:1fr}.timeline-dot{display:none}.site-footer{flex-direction:column;gap:8px;align-items:flex-start}}

/* V2.7 — micro-ajustements validés */
.quote-card{padding:24px 28px}
.quote-card .quote-mark{display:block;line-height:.7;margin:0 0 4px}
.quote-card p{margin:0}

.tool-chip.practiced{
  border-color:rgba(68,215,182,.48);
  background:rgba(68,215,182,.09);
}
.tool-chip.practiced small{color:var(--mint)}
.tool-chip.studied{
  border-color:rgba(124,140,255,.48);
  background:rgba(124,140,255,.09);
}
.tool-chip.studied small{color:#aeb7ff}
.tool-chip.explored{
  border-color:rgba(108,116,129,.5);
  background:rgba(108,116,129,.08);
}
.tool-chip.explored small{color:#929aa7}

/* =========================================================
   RESPONSIVE 2026 — optimisation téléphone & tablette
   Ajouts uniquement sous 1024 px : le desktop reste inchangé.
   ========================================================= */
@media (max-width: 1024px) {
  .section-shell { width:min(100% - 36px,1180px); padding:78px 0; }
  .hero { gap:38px; min-height:auto; }
  .hero h1 { font-size:clamp(3.4rem,8vw,5.4rem); }
  .workflow-card { max-width:680px; width:100%; margin-inline:auto; }
  .method-card { min-height:220px; }
  .tools-layout { gap:24px; }
  .contact-panel { gap:28px; }
}

@media (max-width: 900px) {
  .site-header { padding:14px 18px; }
  .brand-mark { width:38px; height:38px; border-radius:12px; }
  .main-nav { top:68px; max-height:calc(100vh - 84px); overflow:auto; }
  .main-nav a { padding:10px 12px; border-radius:10px; }
  .main-nav .nav-cta { text-align:center; }

  .hero { gap:30px; padding-top:34px; }
  .hero-copy { max-width:760px; }
  .hero-visual { margin-top:0 !important; }
  .workflow-card { height:760px !important; }
  .node-need { left:5%; top:12%; }
  .node-ai { right:5%; top:12%; }
  .node-nocode { left:50% !important; transform:translateX(-50%); top:265px !important; }
  .node-impact { left:50% !important; transform:translateX(-50%); top:505px !important; bottom:auto !important; }
  .workflow-lines { inset:48px 0 0; height:calc(100% - 48px); }
  .flow-caption { bottom:22px !important; flex-wrap:wrap; row-gap:4px; }

  .split-section { gap:34px; }
  .method-grid { gap:14px; }
  .tools-layout { padding:24px; }
  .timeline { padding:8px 22px; }
  .vision-panel, .contact-panel { padding:30px; }
}

@media (max-width: 700px) {
  .section-shell { width:min(100% - 28px,1180px); padding:62px 0; }
  .hero { padding-top:28px; }
  .hero h1 { font-size:clamp(2.75rem,13vw,4.1rem); line-height:.98; }
  .hero-intro,.profile-copy p,.tools-intro p,.vision-note { font-size:1rem; }
  .hero-actions { flex-direction:column; align-items:stretch; }
  .hero-actions .button { width:100%; }
  .availability { align-items:flex-start; }

  .workflow-card { height:auto !important; min-height:0; padding-bottom:18px; overflow:visible; }
  .workflow-lines { display:none; }
  .workflow-topline { padding:13px 15px; }
  .node { position:relative !important; inset:auto !important; transform:none !important; width:auto; margin:12px 14px 0; }
  .node-need,.node-ai,.node-nocode,.node-impact { left:auto !important; right:auto !important; top:auto !important; bottom:auto !important; }
  .flow-caption { position:relative !important; inset:auto !important; margin:18px 14px 0; padding-top:14px; border-top:1px solid var(--line); justify-content:center; }

  .method-grid { grid-template-columns:1fr; }
  .method-card { min-height:0; padding:24px; }
  .tools-layout { padding:20px; }
  .tool-cloud { gap:8px; }
  .tool-chip { flex:1 1 calc(50% - 8px); text-align:left; border-radius:14px; }
  .tool-chip small { display:block; margin:2px 0 0; }

  .timeline { padding:4px 18px; }
  .timeline-row { grid-template-columns:1fr; gap:7px; padding:24px 0; }
  .timeline-dot { display:none; }
  .timeline-date { color:#c2cad6; font-weight:650; }
  .vision-panel blockquote { font-size:clamp(1.55rem,7vw,2.35rem); }
  .contact-panel { padding:24px; }
  .contact-link { min-width:0; }
  .contact-link strong { overflow-wrap:anywhere; }
}

@media (max-width: 430px) {
  .section-shell { width:min(100% - 22px,1180px); padding:54px 0; }
  .site-header { padding-inline:12px; }
  .brand-copy strong { font-size:.78rem; }
  .brand-copy small { font-size:.66rem; }
  .eyebrow { font-size:.66rem; letter-spacing:.09em; }
  .hero h1 { font-size:clamp(2.55rem,14vw,3.45rem); }
  .section-heading h2,.contact-panel h2 { font-size:clamp(2.1rem,11vw,3rem); }
  .statement-strip { margin-top:8px; }
  .quote-card { padding:20px; }
  .tools-layout { padding:16px; }
  .tool-chip { flex-basis:100%; width:100%; }
  .vision-panel { padding:24px 20px; }
  .contact-panel { padding:20px; }
  .contact-icon { width:38px; height:38px; flex:0 0 38px; }
  .site-footer { padding-inline:14px; }
}

/* Refonte locale — accueil panoramique */
.hero{
  min-height:auto;
  grid-template-columns:1fr;
  gap:30px;
  align-items:start;
  padding-top:72px;
  padding-bottom:68px;
}
.hero-copy{max-width:none}
.hero h1{
  max-width:1180px;
  font-size:clamp(3.2rem,6.4vw,5.5rem);
  line-height:.95;
}
.hero-intro{max-width:930px}
.hero-actions{margin:24px 0 0}
.hero-visual{width:100%;margin-top:2px}
.workflow-card{
  width:100%;
  max-width:none;
  height:310px;
  margin:0;
}
.workflow-lines{inset:48px 0 0;height:calc(100% - 48px)}
.node{width:190px;top:35%}
.node-need{left:2.5%}
.node-nocode{left:27.5%}
.node-ai{left:50.9%;right:auto;width:225px}
.node-ai strong{white-space:nowrap}
.node-impact{left:77%;bottom:auto}
.flow-caption{bottom:14px}

@media (max-width:900px) and (min-width:701px){
  .hero{gap:26px;padding-top:44px;padding-bottom:54px}
  .hero h1{font-size:clamp(3.1rem,7.4vw,4.7rem)}
  .workflow-card{height:290px !important;max-width:none}
  .node{width:160px;top:34% !important}
  .node-need{left:2% !important}
  .node-nocode{left:26.5% !important;transform:none !important}
  .node-ai{left:49% !important;right:auto !important;width:180px}
  .node-impact{left:75.5% !important;bottom:auto !important;transform:none !important}
}

@media (max-width:700px){
  .hero{gap:26px;padding-top:28px;padding-bottom:52px}
  .hero h1{font-size:clamp(2.75rem,13vw,4.1rem)}
  .workflow-card{height:auto !important;max-width:680px;margin-inline:auto;padding-bottom:18px;overflow:visible}
  .workflow-lines{display:none}
  .node{position:relative !important;inset:auto !important;transform:none !important;width:auto;margin:12px 14px 0}
  .node-need,.node-ai,.node-nocode,.node-impact{left:auto !important;right:auto !important;top:auto !important;bottom:auto !important}
  .flow-caption{position:relative !important;inset:auto !important;margin:18px 14px 0;padding-top:14px;border-top:1px solid var(--line)}
}

/* V2.8 — restauration de la mise en page compacte du portfolio */
.portfolio-page .hero h1{
  max-width:1180px;
  font-size:clamp(2.4rem,4vw,3.25rem);
  line-height:1.02;
  text-wrap:balance;
}

.portfolio-page .section-heading h2,
.portfolio-page .contact-panel h2{
  max-width:none;
  margin:14px 0 20px;
  font-size:clamp(1.65rem,1.75vw,1.75rem);
  line-height:1.12;
  letter-spacing:-.025em;
}

.portfolio-page #profil.split-section{
  grid-template-columns:1fr;
  gap:24px;
}

.portfolio-page #profil .section-heading{
  margin-bottom:0;
}

.portfolio-page #profil .profile-copy{
  max-width:none;
}

.portfolio-page .contact-panel{
  grid-template-columns:1fr;
  gap:22px;
  padding:32px 34px;
}

.portfolio-page .contact-panel > div:first-child > p:last-child{
  max-width:1000px;
  margin-bottom:0;
}

.portfolio-page .contact-actions{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  justify-content:stretch;
}

.portfolio-page .contact-link{
  min-width:0;
  min-height:68px;
  gap:10px;
  padding:11px 13px;
}

.portfolio-page .contact-icon{
  width:36px;
  height:36px;
  flex:0 0 36px;
  border-radius:10px;
}

.portfolio-page .contact-link strong{
  font-size:.84rem;
  line-height:1.25;
}

.portfolio-page .contact-link small{
  font-size:.68rem;
  line-height:1.25;
}

.portfolio-page .contact-link b{
  margin-left:auto;
}

@media (min-width:1100px){
  .portfolio-page .section-heading h2,
  .portfolio-page .contact-panel h2{
    white-space:nowrap;
  }
}

@media (max-width:900px){
  .portfolio-page .contact-actions{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:620px){
  .portfolio-page .hero h1{
    font-size:clamp(2.25rem,11.5vw,3rem);
    text-wrap:balance;
  }

  .portfolio-page .section-heading h2,
  .portfolio-page .contact-panel h2{
    white-space:normal;
  }

  .portfolio-page .contact-panel{
    padding:22px 20px;
  }

  .portfolio-page .contact-actions{
    grid-template-columns:1fr;
  }
}

/* V2.9 — variante dark premium
   Conserve l'identité sombre tout en donnant davantage de respiration
   aux surfaces, cartes et séparations. */
:root{
  --bg:#0d1118;
  --panel:#161c26;
  --panel2:#1b2430;
  --muted:#aab4c3;
  --line:rgba(255,255,255,.125);
  --shadow:0 22px 60px rgba(0,0,0,.28);
}

body{
  background:
    radial-gradient(circle at 12% 0%,rgba(124,140,255,.055),transparent 30rem),
    radial-gradient(circle at 88% 100%,rgba(68,215,182,.045),transparent 32rem),
    linear-gradient(180deg,#0d1118 0%,#0f141c 52%,#0b0f15 100%);
}

.ambient{opacity:.17}

.site-header{
  background:rgba(13,17,24,.78);
  border-bottom-color:rgba(255,255,255,.11);
}

.workflow-card,
.quote-card,
.vision-panel,
.contact-panel,
.profile-card,
.method-card,
.tools-layout,
.timeline,
.system-window,
.skills-console,
.training-node,
.extra-grid article{
  background:linear-gradient(180deg,rgba(25,32,44,.96),rgba(17,22,31,.96));
  border-color:rgba(255,255,255,.13);
}

.node{
  background:rgba(16,21,30,.96);
  border-color:rgba(255,255,255,.15);
}

.statement-strip,
.cv-ticker{
  background:rgba(255,255,255,.028);
}

.button-ghost,
.contact-link,
.contact-data a{
  background:rgba(255,255,255,.04);
}

.tool-chip{
  background:#121822;
  border-color:rgba(255,255,255,.12);
}

.portfolio-page .method-card:hover,
.portfolio-page .contact-link:hover{
  border-color:rgba(124,140,255,.34);
  box-shadow:0 18px 44px rgba(0,0,0,.24);
}

@media(max-width:900px){
  .main-nav{
    background:#121821;
  }
}