/* ============================================================
   Portfolio — Lucie Bélair
   Design system aligné sur le site vitrine edu-kit (navy / bleu).
   Feuille de style unique et partagée par toutes les pages.
   ============================================================ */

/* ---- Tokens (charte edu-kit) --------------------------------- */
:root{
  --dominant:   #ebf7ff;
  --navy:       #004066;

  --accent-50:  #e6f3fb;
  --accent-100: #cce7f7;
  --accent-200: #99cfef;
  --accent-300: #66b7e7;
  --accent-400: #339fdf;
  --accent-500: #0077be;
  --accent-600: #006098;
  --accent-700: #004872;
  --accent:     var(--accent-500);

  --surface:      #ffffff;
  --surface-soft: var(--accent-50);

  --text:       #004066;
  --text-body:  rgba(0,64,102,.82);
  --text-muted: rgba(0,64,102,.72);

  --border:        rgba(0,64,102,.14);
  --border-soft:   rgba(0,64,102,.10);
  --border-accent: rgba(0,119,190,.30);

  --on-navy:       #ffffff;
  --on-navy-muted: rgba(255,255,255,.82);
  --on-navy-faint: rgba(255,255,255,.62);
  --navy-hairline: rgba(255,255,255,.14);
  --on-accent:     #ffffff;

  --radius:     12px;
  --radius-lg:  16px;
  --radius-sm:  8px;
  --radius-btn: 6px;
  --shadow:      0 6px 18px rgba(0,64,102,.10);
  --shadow-soft: 0 2px 8px rgba(0,64,102,.08);

  --max: 1080px;
}

/* ---- Base ---------------------------------------------------- */
*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;
  font-family:"Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color:var(--text);
  background:var(--surface);
  line-height:1.55;
  overflow-wrap:break-word;
}
a{color:inherit; text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; display:block}
h1,h2,h3,h4{margin:0}

.container{ max-width:var(--max); margin:0 auto; padding:0 20px; }

/* Focus visible */
a:focus-visible, button:focus-visible, summary:focus-visible{
  outline:2px solid var(--accent-500); outline-offset:2px;
}
.site-header a:focus-visible, .site-header button:focus-visible, .site-footer a:focus-visible{outline-color:#fff}

/* Lien d'évitement */
#contenu:focus{outline:none}
.skip{position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden}
.skip:focus{
  left:18px; top:18px; z-index:60; width:auto; height:auto;
  background:var(--surface); color:var(--navy);
  border-radius:var(--radius-sm); padding:10px 12px; box-shadow:var(--shadow-soft);
}

/* ---- Header (barre navy) ------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:20; background:var(--navy);
  border-bottom:1px solid var(--navy-hairline); box-shadow:var(--shadow-soft);
}
.header-row{display:flex; align-items:center; justify-content:space-between; gap:18px; padding:12px 0}
.brand{display:flex; align-items:center; gap:10px; color:var(--on-navy)}
.brand:hover{text-decoration:none}
.brand-mark{width:38px; height:38px; border-radius:9px; flex:0 0 auto}
.brand-txt{display:flex; flex-direction:column; line-height:1.15}
.brand-name{font-size:16px; font-weight:600; letter-spacing:.2px}
.brand-role{font-size:11px; color:var(--on-navy-muted); letter-spacing:.3px}

.nav{display:flex; align-items:center; gap:18px; font-size:14px}
.nav a{color:var(--on-navy); opacity:.9}
.nav a:hover{opacity:1}
.nav .btn{margin-left:6px}

.nav-toggle-btn{
  display:none; width:44px; height:44px; border-radius:var(--radius-sm);
  border:1px solid var(--navy-hairline); background:rgba(255,255,255,.10);
  flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:11px; cursor:pointer;
}
.nav-toggle-btn span{display:block; height:2px; width:100%; background:var(--on-navy); border-radius:2px}

/* ---- Boutons ------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:11px 16px; border-radius:var(--radius-btn); border:1px solid transparent;
  background:var(--accent-600); color:var(--on-accent); box-shadow:var(--shadow-soft);
  font-weight:600; white-space:nowrap; cursor:pointer; font-family:inherit; font-size:15px;
  transition:background .2s ease, box-shadow .2s ease, transform .1s ease;
}
.btn:hover{text-decoration:none; background:var(--accent-700); box-shadow:var(--shadow)}
.btn:active{transform:translateY(1px)}
.btn-ghost{background:transparent; border:1px solid var(--accent-600); color:var(--accent-600); box-shadow:none}
.btn-ghost:hover{background:rgba(0,119,190,.08)}
.btn-sm{padding:9px 12px; font-size:13px}

.site-header .btn{background:var(--accent-500); border:1px solid var(--on-navy-faint)}
.site-header .btn:hover{background:var(--accent-600)}
.site-header .btn-ghost{border-color:var(--on-navy); color:var(--on-navy); background:transparent}
.site-header .btn-ghost:hover{background:rgba(255,255,255,.12)}

/* ---- Pills / badges ------------------------------------------ */
.kicker{
  display:inline-flex; gap:8px; align-items:center; padding:7px 12px; border-radius:999px;
  background:var(--accent-50); border:1px solid var(--accent-200);
  color:var(--accent-700); font-size:13px; font-weight:600;
}
.kicker .dot{width:7px; height:7px; border-radius:50%; background:var(--accent-500)}
.badge{
  display:inline-block; padding:7px 14px; border-radius:999px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22);
  color:#fff; font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;
}
.badge-soft{background:var(--accent-50); border:1px solid var(--accent-200); color:var(--accent-700); letter-spacing:.1em}

/* ---- Sections ------------------------------------------------ */
.section{padding:64px 0; background:var(--dominant); scroll-margin-top:78px}
.section.alt{background:var(--surface); border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft)}
.section-head{max-width:760px; margin-bottom:28px}
.section-head h2{font-size:30px; letter-spacing:-.4px; color:var(--navy); margin-bottom:10px}
.section-head p{margin:0; color:var(--text-muted)}
.section-head.center{text-align:center; margin-left:auto; margin-right:auto}

.eyebrow{
  display:flex; align-items:center; gap:12px; font-size:12px; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:var(--accent-600); margin-bottom:18px;
}
.eyebrow::after{content:""; flex:1; height:1px; background:var(--border)}

/* ---- Hero (accueil) ------------------------------------------ */
.hero{padding:72px 0 52px; background:linear-gradient(180deg, var(--dominant) 0%, var(--surface) 100%)}
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:38px; align-items:center}
.hero h1{font-size:44px; line-height:1.08; letter-spacing:-.9px; color:var(--navy); margin:12px 0 6px}
.hero-sub{font-size:17px; font-weight:600; color:var(--accent-700); margin-bottom:16px}
.lead{margin:0 0 18px; color:var(--text-body); font-size:16px}
.cta-row{display:flex; gap:12px; flex-wrap:wrap; margin:18px 0 0}

.id-card{background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:24px}
.id-mono{
  width:64px; height:64px; border-radius:16px; margin-bottom:16px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--navy), var(--accent-600));
  color:#fff; font-weight:700; font-size:24px; letter-spacing:.5px;
}
.id-card h2{font-size:20px; color:var(--navy); margin-bottom:2px}
.id-card .id-role{font-size:13px; color:var(--text-muted); margin-bottom:16px}
.id-list{display:flex; flex-direction:column; gap:10px; margin:0 0 18px; padding:0; list-style:none}
.id-list li{display:flex; align-items:center; gap:10px; font-size:14px; color:var(--text-body)}
.id-list .ico{width:16px; height:16px; flex:0 0 auto; color:var(--accent-600)}
.id-status{
  display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px;
  background:var(--accent-50); border:1px solid var(--accent-200); color:var(--accent-700); font-size:13px; font-weight:600;
}
.id-status .dot{width:8px; height:8px; border-radius:50%; background:#2aa56e}

/* ---- Grilles ------------------------------------------------- */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}

/* ---- Cartes génériques --------------------------------------- */
.feature{
  background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius);
  padding:20px; box-shadow:var(--shadow-soft);
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.feature:hover{border-color:var(--border-accent); box-shadow:var(--shadow)}
.feature .fico{font-size:22px; margin-bottom:10px; display:block}
.feature h3{color:var(--navy); margin-bottom:8px; font-size:16px}
.feature p{margin:0; color:var(--text-body); font-size:14px}

.cardx{
  background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius);
  padding:18px; box-shadow:var(--shadow-soft); transition:border-color .2s ease, box-shadow .2s ease;
}
.cardx:hover{border-color:var(--border-accent); box-shadow:var(--shadow)}
.cardx h3{margin-bottom:10px; color:var(--navy); font-size:16px}
.checks{margin:0; padding-left:18px; color:var(--text-body)}
.checks li{margin:9px 0}
.checks li::marker{color:var(--accent-600)}

/* ---- Chips --------------------------------------------------- */
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{
  padding:6px 11px; border-radius:999px; border:1px solid var(--accent-200);
  background:var(--accent-50); color:var(--accent-700); font-size:12.5px; font-weight:600;
}

/* ---- Cartes projet (accueil) --------------------------------- */
.proj-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:20px}
.proj-card{
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius);
  box-shadow:var(--shadow-soft); color:inherit; text-decoration:none;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.proj-card:hover{border-color:var(--border-accent); box-shadow:var(--shadow); transform:translateY(-3px); text-decoration:none}
.proj-thumb{position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--accent-50)}
.proj-thumb img{width:100%; height:100%; object-fit:cover}
.proj-thumb-ph{
  width:100%; height:100%; background:linear-gradient(135deg, var(--accent-50), var(--accent-100));
  display:flex; align-items:center; justify-content:center; color:var(--accent-500);
}
.proj-thumb-ph svg{width:44px; height:44px; opacity:.6}
.proj-body{padding:18px 18px 20px; display:flex; flex-direction:column; flex:1}
.proj-eyebrow{font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); margin-bottom:6px}
.proj-name{font-size:20px; font-weight:700; color:var(--navy); margin-bottom:10px}
.proj-desc{font-size:14px; color:var(--text-body); line-height:1.6; flex:1; margin-bottom:16px}
.proj-desc strong{color:var(--navy)}
.proj-more{margin-top:14px; display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--accent-600)}
.proj-more svg{width:15px; height:15px; transition:transform .2s ease}
.proj-card:hover .proj-more svg{transform:translateX(3px)}

/* ---- En-tête de page projet ---------------------------------- */
.page-hero{
  background:linear-gradient(180deg, var(--dominant) 0%, var(--surface) 100%);
  padding:40px 0 44px; border-bottom:1px solid var(--border-soft);
}
.breadcrumb{font-size:13px; color:var(--text-muted); margin-bottom:16px}
.breadcrumb a{color:var(--accent-600)}
.page-hero-row{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap}
.page-hero h1{font-size:38px; letter-spacing:-.6px; color:var(--navy); margin-bottom:8px}
.page-hero .page-type{color:var(--text-muted); font-size:15px; max-width:640px}

/* ---- Bloc contexte / besoin ---------------------------------- */
.callout{
  background:var(--surface); border:1px solid var(--border-soft); border-left:3px solid var(--accent-500);
  border-radius:var(--radius); padding:22px 26px; box-shadow:var(--shadow-soft);
  color:var(--text-body); font-size:15.5px; line-height:1.7;
}
.callout strong{color:var(--navy); font-weight:600}

/* ---- Captures d'écran ---------------------------------------- */
.shots{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
.shot{background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-soft)}
.shot img{width:100%; height:auto; display:block; cursor:zoom-in}
.shot-ph{
  aspect-ratio:16/9; background:linear-gradient(135deg, var(--accent-50), var(--accent-100));
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:var(--accent-600);
}
.shot-ph .ph-ico{font-size:26px; opacity:.7}
.shot-ph span{font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; opacity:.75}
.shot-cap{padding:11px 14px; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); border-top:1px solid var(--border-soft)}

/* ---- Architecture -------------------------------------------- */
.archi{
  background:var(--surface); border:1px solid var(--border-soft); border-left:3px solid var(--accent-500);
  border-radius:var(--radius); padding:22px 24px; box-shadow:var(--shadow-soft); overflow-x:auto;
}
.archi img{border-radius:var(--radius-sm)}
.ascii{font-family:"SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size:13px; line-height:1.5; color:var(--text-body); white-space:pre}
.ascii .a{color:var(--accent-600); font-weight:700}
.ascii .b{color:var(--text-muted)}
.archi-note{margin-top:14px; font-size:12.5px; color:var(--text-muted); font-style:italic}
.archi-note code{font-family:Consolas, monospace; background:var(--accent-50); padding:1px 5px; border-radius:4px; font-style:normal}

/* ---- Technologies (catégories + chips) ----------------------- */
.tech-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
.tech-cat{
  background:var(--surface); border:1px solid var(--border-soft); border-top:2px solid var(--accent-500);
  border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow-soft);
}
.tech-cat-title{font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-600); margin-bottom:12px}

/* ---- Compétences --------------------------------------------- */
.skills{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.skill{
  background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius);
  padding:18px; box-shadow:var(--shadow-soft); transition:border-color .2s ease, box-shadow .2s ease;
}
.skill:hover{border-color:var(--border-accent); box-shadow:var(--shadow)}
.skill .s-ico{font-size:22px; margin-bottom:10px}
.skill h3{font-size:14.5px; color:var(--navy); margin-bottom:5px}
.skill p{font-size:13px; color:var(--text-body); margin:0; line-height:1.5}

/* ---- Navigation prev/suivant --------------------------------- */
.page-nav{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-top:48px; padding-top:24px; border-top:1px solid var(--border-soft)}
.nav-link{
  display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--accent-600);
  border:1px solid var(--accent-200); border-radius:var(--radius-btn); padding:10px 16px; background:var(--surface);
  transition:background .15s ease, border-color .15s ease;
}
.nav-link:hover{background:var(--accent-50); border-color:var(--accent-300); text-decoration:none}

/* ---- Bloc contact (accueil) ---------------------------------- */
.contact-band{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap}
.contact-band h2{font-size:26px; color:var(--navy); margin-bottom:8px}
.contact-band p{margin:0; color:var(--text-body)}
.contact-links{display:flex; flex-wrap:wrap; gap:10px}

/* ---- Footer (barre navy) ------------------------------------- */
.site-footer{padding:26px 0; background:var(--navy); color:var(--on-navy); border-top:1px solid var(--navy-hairline)}
.footer-row{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.foot-left{display:flex; align-items:center; gap:12px}
.foot-mark{width:34px; height:34px; border-radius:8px}
.foot-title{font-weight:600; color:var(--on-navy)}
.foot-sub{font-size:12px; color:var(--on-navy-muted)}
.foot-right{font-size:13px; color:var(--on-navy-muted); display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.foot-right a{color:var(--on-navy)}
.sep{color:var(--on-navy-faint)}

/* ---- Bouton retour en haut ----------------------------------- */
.to-top{
  position:fixed; right:22px; bottom:22px; z-index:30; width:46px; height:46px;
  display:inline-flex; align-items:center; justify-content:center; border-radius:999px;
  border:1px solid var(--on-navy-faint); background:var(--navy); color:var(--on-navy);
  box-shadow:var(--shadow); cursor:pointer; transition:background .2s ease, transform .2s ease;
}
.to-top:hover{background:var(--accent-600)}
.to-top:active{transform:translateY(1px)}
.to-top[hidden]{display:none}
.to-top svg{width:22px; height:22px}

/* ---- Lightbox ------------------------------------------------ */
.lightbox{position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center; cursor:zoom-out; background:rgba(0,32,51,.88); padding:24px}
.lightbox.is-open{display:flex}
.lightbox img{max-width:92vw; max-height:92vh; object-fit:contain; border-radius:var(--radius-sm)}

/* ---- Responsive ---------------------------------------------- */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr; gap:26px}
  .hero h1{font-size:38px}
  .grid-3, .proj-grid, .skills{grid-template-columns:1fr}
  .grid-2, .tech-grid, .shots{grid-template-columns:1fr}
}
@media (min-width:601px) and (max-width:980px){
  .proj-grid, .skills{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  .nav-toggle-btn{display:flex}
  .nav{
    position:absolute; right:20px; top:60px; flex-direction:column; align-items:stretch; gap:6px;
    padding:14px; width:min(320px, calc(100vw - 40px)); border-radius:var(--radius);
    background:var(--navy); border:1px solid var(--navy-hairline); box-shadow:var(--shadow); display:none;
  }
  .nav a{padding:12px}
  .nav a:hover{background:rgba(255,255,255,.10); text-decoration:none; border-radius:var(--radius-sm)}
  .nav .btn{margin-left:0}
  .nav.is-open{display:flex}
}
@media (max-width:560px){
  .hero h1{font-size:32px}
  .page-hero h1{font-size:30px}
  .section{padding:48px 0}
  .footer-row{flex-direction:column; align-items:flex-start}
}

@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto}
  .btn:active, .proj-card:hover, .to-top:active{transform:none}
}