:root {
  --bg: #333333;
  --surface: #3d3d3d;
  --text: #ffffff;
  --muted: #ffffff;
  --accent: #38bdf8;
  --accent-2: #38bdf8;
  --border: #4a4a4a;
  --radius: 8px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}

.hidden { display: none !important; }

header {
  position: sticky;
  top: 0;
  background: rgba(16, 16, 16, 0.92);
  backdrop-filter: blur(8px);
  z-index: 100;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  border-bottom: 1px solid var(--border);
}

.brand { font-weight: 800; font-size: 1.2rem; color: var(--text); text-decoration: none; }
.accent { color: #38bdf8; }

.nav-links { display: flex; gap: 1.5rem; }
.nav-links a { color: var(--muted); text-decoration: none; font-weight: 500; }
.nav-links a:hover { color: var(--text); }

.session-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--accent-2);
  padding: 0.4rem 0.9rem;
  border-radius: 8px;
  cursor: default;
  font-weight: 600;
}

.hero { text-align: center; padding: 0; margin: 0 auto; }
.hero h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 1rem; }
.subtitle { color: var(--muted); font-size: clamp(1.05rem, 1.5vw, 1.3rem); margin-bottom: 2rem; max-width: 56ch; }

.hero-cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

.btn {
  display: inline-block;
  padding: 0.8rem 1.6rem;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 1rem;
  transition: transform 0.15s ease, background 0.15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn.primary { background: #38bdf8; color: #0f1115; }
.btn.ghost { background: #38bdf8; border-color: #38bdf8; color: #0f1115; }
.btn.small { padding: 0.5rem 1rem; font-size: 0.9rem; }
.btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.session-banner {
  margin: 2rem auto 0;
  max-width: 560px;
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 1rem 1.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.link-btn { background: none; border: none; color: var(--accent); cursor: pointer; font-weight: 600; }

.apps, .contact { padding: 3rem 1.5rem; max-width: 1100px; margin: 0 auto; }
.apps h2, .contact h2 { text-align: center; font-size: 2rem; margin-bottom: 0.5rem; }
.section-desc { text-align: center; color: var(--muted); margin-bottom: 2.5rem; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.card:hover { border-color: var(--accent); transform: translateY(-4px); }
.card-icon { font-size: 2rem; }
.card p { color: var(--muted); font-size: 0.95rem; flex-grow: 1; }
.card-body { display:flex; flex-direction:column; gap:.75rem; flex-grow:1; }
.card-body .try-btn, .card-body .btn { margin-top:auto; width:100%; justify-content:center; text-align:center; }

.card-tags { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.tag {
  background: rgba(14, 116, 144, 0.15);
  color: var(--accent-2);
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}

.card-actions { display: flex; gap: 0.75rem; }

body:not(.session-active) .try-btn { opacity: 0.55; }

.contact { text-align: center; }
.contact p { color: var(--muted); margin: 1rem 0; }
.socials { margin-top: 1.5rem; }
.socials a { color: var(--accent); text-decoration: none; font-weight: 600; margin: 0 0.75rem; }

.about { max-width: 800px; margin: 0 auto; padding: 3rem 1.5rem; }
.cv-header { text-align: center; margin-bottom: 3rem; }
.cv-header h1 { font-size: 2.5rem; }
.role { color: var(--muted); font-size: 1.2rem; margin-top: 0.5rem; }

.badges { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; margin-top: 1rem; }
.badge {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  font-size: 0.85rem;
}

.cv-section { margin-bottom: 2.5rem; }
.cv-section h2 {
  font-size: 1.4rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid var(--accent);
  display: inline-block;
  padding-bottom: 0.3rem;
}
.cv-section p { color: var(--muted); }

.skill { margin-bottom: 1rem; }
.skill-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: 0.9rem; margin-bottom: 0.3rem; }
.skill-level {
  color: #38bdf8;
  border: 1px solid #38bdf8;
  border-radius: 999px;
  padding: 0.15rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

.timeline { list-style: none; }
.timeline li { display: flex; gap: 1rem; margin-bottom: 1rem; }
.year {
  min-width: 70px;
  color: var(--accent);
  font-weight: 700;
}
.timeline p { color: var(--muted); }

.featured { list-style: none; }
.featured a { color: var(--text); text-decoration: none; border-bottom: 1px dashed var(--accent); }
.featured li { margin-bottom: 0.6rem; }

footer {
  text-align: center;
  padding: 2rem;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.9rem;
}

@media (max-width: 640px) {
  .nav { flex-wrap: wrap; gap: 0.75rem; }
  .nav-links { order: 3; width: 100%; justify-content: center; }
}

.hero-kicker {
  color: var(--accent-2);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
}

.cv-loc { color: var(--muted); margin-top: 0.4rem; }
.cv-loc svg { vertical-align: -3px; margin-right: 2px; }
.badge svg { vertical-align: -3px; }
.soft-icon svg, .teach-icon svg { display: block; margin-bottom: 0.5rem; }
.soft-icon svg { width: 28px; height: 28px; }
.btn.small.full { display: flex; width: 100%; justify-content: center; margin-top: 1rem; }
.cv-summary { color: var(--muted); max-width: 640px; margin: 1.5rem auto 0; font-size: 1.05rem; }
.cv-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem; }

.certs { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0.75rem; }
.certs li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 0.8rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.cert-title { font-weight: 600; font-size: 0.95rem; }
.cert-org { color: var(--muted); font-size: 0.85rem; }

.timeline li { align-items: flex-start; }
.tl-body { flex: 1; }
.tl-title { font-weight: 600; }
.tl-org { color: var(--accent-2); font-weight: 500; }
.tl-text { color: var(--muted); font-size: 0.95rem; }

.soft-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.soft-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.2rem;
}
.soft-card h3 { font-size: 1rem; margin-bottom: 0.5rem; color: var(--accent-2); }
.soft-card p { color: var(--muted); font-size: 0.92rem; }
.soft-icon { font-size: 1.8rem; margin-bottom: 0.5rem; }

.section-intro { color: var(--muted); margin-bottom: 1.5rem; max-width: 640px; }
.creative .cv-section > h2 { border-color: #38bdf8; }

.lang-list { list-style: none; display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; }
.lang-list li { color: var(--muted); }
.lang-list strong { color: var(--text); }
.hobbies { margin-top: 1rem; color: var(--muted); }

body:not(.session-active) .try-btn { opacity: 1; }

.card-media {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--surface);
  cursor: pointer;
  min-height: 120px;
}
.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.media-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  background: linear-gradient(135deg, var(--surface), #1e222c);
}
.card-media.has-img .media-fallback { display: none; }

.media-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 12, 16, 0.88);
  color: var(--text);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.25rem;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.media-overlay p { color: #cfd5e0; font-size: 0.9rem; }
.overlay-cta { color: var(--accent-2); font-weight: 700; font-size: 0.9rem; }
.card-media:hover .media-overlay,
.card-media:focus-within .media-overlay { opacity: 1; }

.card-body { display: flex; flex-direction: column; gap: 0.75rem; }

@media (hover: none) {
  .media-overlay { opacity: 0; }
}

/* ===== Signature charte edukisto ===== */
.sig-dash{opacity:.45;letter-spacing:-2px}
.sig-mark{color:inherit;text-decoration:none;letter-spacing:.02em}
.sig-mark:hover{color:#38bdf8}

/* ===== Logo edukisto: sous le nom dans la navbar ===== */
.brand-wrap{ display:inline-flex; flex-direction:column; align-items:flex-start; gap:2px; text-decoration:none; }
.nav-logo{ display:inline-flex; line-height:0; }
.nav-logo svg{ width:28px; height:28px; filter:drop-shadow(0 0 10px rgba(56,189,248,.3)); }

/* ===== Section marque edukisto (mi-page) ===== */
.brand-stage{
  text-align:center;
  padding:3.5rem 1rem 2.5rem;
  max-width:600px;
  margin:0 auto;
  position:relative;
}
.brand-stage svg{ width:clamp(90px, 15vw, 130px); height:auto; filter:drop-shadow(0 0 26px rgba(56,189,248,.28)); }
.brand-word{
  font-size:clamp(1.5rem, 3.5vw, 2rem);
  font-weight:800;
  letter-spacing:.06em;
  color:var(--text);
  margin-top:.9rem;
}
.brand-motto{
  font-size:.95rem;
  color:var(--muted);
  letter-spacing:.18em;
  text-transform:uppercase;
  margin-top:.2rem;
}
.brand-motto::before, .brand-motto::after{
  content:"──";
  opacity:.4;
  margin:0 .8rem;
  letter-spacing:-1px;
}

.brand-home{display:inline-block;text-decoration:none;transition:transform .2s ease}
.brand-home:hover{transform:scale(1.06)}

/* ===== Section cours / formation ===== */
.teaching-section h2 { border-color: #38bdf8; }
.teaching-proof{ color:var(--muted); max-width:640px; margin:0 0 1.5rem; font-size:.95rem; border-left:3px solid var(--accent); padding-left:14px; }
.teaching-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:1rem; }
.teach-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.2rem; transition: border-color .2s ease; }
.teach-card:hover{ border-color:#38bdf8; }
.teach-icon{ font-size:1.7rem; margin-bottom:.5rem; }
.teach-card :is(h2,h3){ font-size:.98rem; margin-bottom:.5rem; color:#7dd3fc; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.teach-card p{ color:var(--muted); font-size:.88rem; }
.spec-tag{ font-size:.68rem; background:rgba(14,116,144,.25); color:#7dd3fc; padding:2px 8px; border-radius:999px; border:1px solid rgba(14,116,144,.5); font-weight:700; letter-spacing:.03em; }
.teaching-practical{ margin-top:1.3rem; color:var(--muted); font-size:.9rem; }
.teaching-cta{ display:flex; gap:1rem; margin-top:1.5rem; flex-wrap:wrap; }
.superprof-btn:hover{ border-color:#38bdf8; color:#7dd3fc; }

/* ===== Carte service (cours) ===== */
.service-card{ border-style:dashed; }
.service-badge{ font-size:.6rem; background:rgba(56,189,248,.15); color:#7dd3fc; padding:2px 8px; border-radius:999px; border:1px solid rgba(56,189,248,.4); text-transform:uppercase; letter-spacing:.08em; font-weight:700; vertical-align:middle; margin-left:6px; }

/* ===== Nouveau hero narratif ===== */
.hero{ text-align:left; padding:0; }
.hero-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; align-items:center; max-width:1150px; margin:0 auto; padding:4rem 1.5rem 2.5rem; }
.hero h1{ font-size:clamp(1.7rem, 3.6vw, 3.1rem); line-height:1.22; margin-bottom:1.1rem; color:#38bdf8; }
.hero h1 .accent{ color:#38bdf8; }
.hero-photo{ display:flex; justify-content:center; }
.hero-photo img{
  width:100%; max-width:280px; aspect-ratio:1; object-fit:cover; object-position:center;
  border-radius:50%; border:3px solid rgba(56,189,248,.4);
  box-shadow:0 0 28px rgba(14,116,144,.35);
}
@media (max-width:720px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero{ text-align:left; }
  .hero-photo{ order:2; justify-content:center; }
  .hero-photo img{ width:clamp(140px, 40vw, 180px); }
}
/* ===== Stats ===== */
.stats{ padding:0 1.5rem 3rem; }
.stats-row{ display:flex; justify-content:center; gap:clamp(2rem,5vw,4.5rem); flex-wrap:wrap; max-width:1150px; margin:0 auto; }
.stat{ text-align:center; min-width:170px; }
.stat-num{ display:block; font-size:clamp(2.2rem, 3vw, 3.2rem); font-weight:800; color:#38bdf8; line-height:1.1; }
.stat-label{ font-size:.8rem; color:var(--muted); }
.apps-session-start{ text-align:center; margin:-1rem 0 2rem; }
.apps-session-start .btn{ opacity:.85; }
.permis-line{ margin-top:1rem; color:var(--muted); font-size:.9rem; }

/* ===== Hero journal : photo gauche / texte droite ===== */

.hero-photo{ flex-direction:column; gap:.8rem; align-items:center; text-align:center; }
.hero-caption{ font-size:.9rem; color:var(--text); font-weight:700; line-height:1.35; }
.hero-caption span{ font-weight:400; color:var(--muted); font-size:.8rem; }

/* ===== Section duo (construire / transmettre) ===== */
.duo{ max-width:1150px; margin:0 auto; padding:1rem 1.5rem 3rem; display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.duo-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:2rem; display:flex; flex-direction:column; gap:1rem; align-items:flex-start; }
.duo-card:hover{ border-color:#38bdf8; }
.duo-icon{ font-size:2rem; }
.duo-card h2{ font-size:1.25rem; }
.duo-card p{ color:var(--muted); font-size:.95rem; flex-grow:1; }
@media (max-width:800px){ .duo{ grid-template-columns:1fr; } }

/* ===== Pages dédiées (construis/transmets) ===== */
.page-head{ padding-top:2.5rem; }
.page-title{ text-align:center; font-size:clamp(1.9rem, 4vw, 2.8rem); margin-bottom:.6rem; }
.nav-links a.active{ color:var(--text); border-bottom:2px solid #38bdf8; padding-bottom:2px; }
.teaching-detail{ max-width:900px; margin:2.5rem auto 0; padding:0 1.5rem; }

/* ===== Bloc loisirs ===== */
.hobbies-block{ margin-top:1.4rem; }
.hobbies-block h3{ font-size:1rem; color:#7dd3fc; margin-bottom:.5rem; }
.hobbies-block p{ color:var(--text); font-size:.95rem; line-height:1.7; }
.permis-line{ margin-top:.8rem; color:var(--muted); font-size:.88rem; }

/* ===== Hero vente ===== */
.hero-quote{ border-left:3px solid var(--accent); padding:.6rem 1.2rem; margin:1.4rem 0; color:var(--muted); font-size:.95rem; line-height:1.6; }
.hero-quote span{ display:block; margin-top:.3rem; font-size:.8rem; opacity:.8; }

/* ===== Services ===== */
.services-detail{ margin-top:1rem; }
.services-zone{ margin-top:2rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.5rem; }
.services-zone :is(h2,h3){ color:#7dd3fc; font-size:1.05rem; margin-bottom:.8rem; }
.services-zone p{ color:var(--text); font-size:.92rem; margin-bottom:.4rem; }


/* ===== Design Jonathan ===== */
.hero-badges{ display:flex; gap:.6rem; margin-bottom:1.2rem; }
.badge-cta{
  display:inline-block; font-size:.75rem; font-weight:700; letter-spacing:.03em;
  color:#7dd3fc; background:rgba(14,116,144,.2);
  border:1px solid rgba(56,189,248,.45); border-radius:999px;
  padding:4px 12px;
}
.hero-quote{ border:none; padding:0; margin:1.8rem 0 2.2rem; color:var(--muted); font-size:1rem; line-height:1.7; font-style:italic; }
.hero-quote footer{ font-style:normal; font-size:.85rem; margin-top:.4rem; opacity:.85; }
.hero-cta{ justify-content:flex-start; }

/* Bouton principal: blanc sur bleu pétrole — lisible */
.btn.primary{
  background:#38bdf8; color:#0f1115; border-color:#38bdf8; font-weight:700;
}
.btn.primary:hover{ background:#7dd3fc; border-color:#7dd3fc; }

/* Footer épuré */
footer{ padding:1.8rem 1.5rem; border-top:1px solid var(--border); margin-top:0; background:#101010; }
footer p{ font-size:.85rem; }

/* Révélation numéro */
.reveal-phone{ cursor:pointer; }
.reveal-phone.revealed{ pointer-events:none; }


/* Header marque unique */
.brand .accent{ font-weight:400; font-size:.72em; opacity:.75; letter-spacing:0; }
@media (max-width:820px){
  .brand .accent{ display:none; }  /* mobile: juste "Edukisto" */
  .brand-wrap{ flex-direction:row; align-items:center; gap:8px; }
}

/* ===== Header: Edukisto + by David Demoulin (2 styles, décalé) ===== */
.brand-stack{ display:flex; flex-direction:column; line-height:1.05; }
.brand-name{
  font-size:1.25rem; font-weight:800; letter-spacing:.04em;
  font-family:Georgia, "Times New Roman", serif;  /* serif = contraste avec le sans-serif du menu */
}
.brand-by{
  font-size:.66rem; font-weight:400; letter-spacing:.09em;
  color:var(--muted); font-style:italic;
  margin-left:.55rem;  /* le petit décalage vers la droite */
}
@media (max-width:820px){
  .brand-by{ font-size:.58rem; margin-left:.4rem; }
}

/* ===== Contact: 2 boutons explicites ===== */
.contact-ways{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin:1.2rem 0; }
.contact-way{ display:flex; flex-direction:column; gap:.15rem; align-items:center; padding:.7rem 1.4rem !important; min-width:220px; }
.way-label{ font-weight:700; }
.way-hint{ font-size:.72rem; opacity:.65; font-weight:400; }
.reveal-phone .way-hint{ font-style:italic; }
.revealed .way-hint{ font-size:.95rem; opacity:1; font-weight:700; font-style:normal; letter-spacing:.01em; }

/* ===== Header: icône + Edukisto blanc, même ligne ===== */
.brand-line{ display:flex; align-items:center; gap:10px; }
.brand-line .nav-logo svg{ width:30px; height:30px; display:block; }
.brand-name{
  font-family:Georgia, "Times New Roman", serif;
  font-size:1.35rem; font-weight:800; letter-spacing:.05em;
  color:#ffffff;
}
@media (max-width:820px){
  .brand-line .nav-logo svg{ width:24px; height:24px; }
  .brand-name{ font-size:1.1rem; }
}

.btn.ghost:hover{ background:#7dd3fc; border-color:#7dd3fc; color:#0f1115; }

/* ===== Page mentions légales ===== */
.legal-page{ max-width:800px; margin:0 auto; padding:2.5rem 1.5rem 3rem; }
.legal-page h1{ font-size:1.8rem; margin-bottom:1.5rem; color:#38bdf8; }
.legal-block{ margin-bottom:1.8rem; }
.legal-block h2{ font-size:1.05rem; margin-bottom:.6rem; }
.legal-block p{ font-size:.92rem; line-height:1.8; }
.placeholder{ color:#7dd3fc; font-style:italic; }

/* ===== Tarifs ===== */
.tarifs-block{ margin-top:2rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.5rem; }
.tarifs-block :is(h2,h3){ color:#7dd3fc; font-size:1.1rem; margin-bottom:1rem; }
.tarifs-table{ width:100%; border-collapse:collapse; }
.tarifs-table td{ padding:.55rem 0; font-size:.95rem; border-bottom:1px solid var(--border); }
.tarifs-table .prix{ text-align:right; font-weight:700; color:#38bdf8; }
.tarifs-table .was{ font-size:.8rem; opacity:.5; text-decoration:line-through; margin-left:.4rem; font-weight:400; }
.tarifs-note{ font-size:.8rem; opacity:.7; margin-top:1rem; }

/* ===== Flat icons ===== */
.flat-icon{ color:#38bdf8; vertical-align:-3px; }
.btn .flat-icon{ margin-left:.2rem; }
.overlay-cta .flat-icon{ width:14px; height:14px; }

/* ===== Liste zone & modalités ===== */
.zone-list{ list-style:none; padding:0; }
.zone-list li{ position:relative; padding-left:1.6rem; margin-bottom:.6rem; font-size:.92rem; }
.zone-list li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:7px; height:7px; border-radius:50%;
  background:#38bdf8;
}

/* ===== Thumbnails: noir et blanc, couleur au survol ===== */
.card-media img{
  filter: grayscale(1) contrast(1.05);
}