/* =========================================
   TOKENS (neutral)
========================================= */
:root{
  --fg:#1e2a36;
  --muted:#5e6b79;
  --line:#e7ebf0;
  --bg:#f6f7fb;
  --card:#fff;
  --accent:#1473e6;
  --accent-ink:#0b5bd3;
  --radius:16px;
  --shadow:0 10px 28px rgba(16,24,40,.08);

  /* Fonts – stack système type Inter / SF Pro */
  --app-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI",
              Inter, Roboto, "Helvetica Neue", Arial, "Noto Sans",
              "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}

*{ box-sizing:border-box }

/* =========================================
   TEMPO
========================================= */
#tempo-root .container{display:grid;place-items:center;min-height:100vh;padding:24px}
#tempo-root .card{max-width:620px;width:100%;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:22px}
#tempo-root .badge{display:inline-flex;gap:8px;align-items:center;padding:6px 12px;border-radius:999px;background:#eaf3ff;color:var(--accent-ink);font-weight:700}
#tempo-root .badge .dot{width:8px;height:8px;background:#2aa0ff;border-radius:50%}
#tempo-root h1{margin:.6rem 0 1rem;line-height:1.15}
#tempo-root .progress{height:8px;background:#edf1f7;border-radius:999px;overflow:hidden;margin:.6rem 0}
#tempo-root .progress span{display:block;width:70%;height:100%;background:linear-gradient(90deg,#2aa0ff,#83c8ff)}
#tempo-root .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
#tempo-root .btn{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-radius:999px;border:1px solid #344054;text-decoration:none;color:#111;background:#fff}
#tempo-root .btn:hover{box-shadow:0 8px 18px rgba(0,0,0,.08)}

/* =========================================
   LANG
========================================= */
#lang-root .container{display:grid;place-items:center;min-height:100vh;padding:24px}
#lang-root .card{max-width:620px;width:100%;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:22px;text-align:center}
#lang-root .actions{display:flex;gap:10px;justify-content:center;margin-top:14px;flex-wrap:wrap}
#lang-root .btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;border:1px solid #344054;text-decoration:none;color:#111;background:#fff}

/* =========================================
   FONTS (appliquer partout)
========================================= */
body,
#tempo-root, #tempo-root h1, #tempo-root h2, #tempo-root h3, #tempo-root p, #tempo-root li, #tempo-root a, #tempo-root button,
#lang-root,  #lang-root h1,  #lang-root h2,  #lang-root h3,  #lang-root p,  #lang-root li,  #lang-root a,  #lang-root button,
#cv-root,    #cv-root h1,    #cv-root h2,    #cv-root h3,    #cv-root p,    #cv-root li,    #cv-root a,    #cv-root button {
  font-family: var(--app-font) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
#tempo-root h1, #cv-root h1, #lang-root h1 { font-weight:800; letter-spacing:-.01em; }

/* =========================================
   Socials - Minimaliste pro
========================================= */
.socials{position:fixed;top:20px;right:28px;z-index:9999;display:flex;gap:20px}
.socials a{
  font-size:26px; color:var(--fg); opacity:.75;
  display:inline-flex; align-items:center; justify-content:center;
  line-height:0; border-radius:10px; padding:6px;
  transition:color .25s ease, opacity .25s ease, transform .2s ease, background-color .15s ease;
}
.socials a:hover{color:var(--accent); opacity:1; transform:scale(1.12)}
.socials a:focus-visible{outline:2px solid var(--accent); outline-offset:3px; background:rgba(20,115,230,.06)}
@media (max-width:768px){
  .socials{top:14px;right:18px;gap:16px}
  .socials a{font-size:24px; padding:8px}
}

/* ==============================
   CV FR/EN — style unifié, anti-overlap
============================== */
#cv-root, #cv-root * { box-sizing: border-box; }

/* Neutraliser tout ce qui peut créer des overlaps */
#cv-root .opening,
#cv-root .cv-hero,
#cv-root .cv-intro,
#cv-root .chips,
#cv-root .section{
  position: static !important;
  float: none !important;
  transform: none !important;
  clear: both !important;
  z-index: 0 !important;
  display: flow-root !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#cv-root .wrap{ max-width:1120px; margin:0 auto; padding:0 16px; }

/* Ouverture (badge + disponibilité) */
#cv-root .opening{ margin:16px 0 10px !important; text-align:center; }
#cv-root .badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px; border-radius:999px;
  background:#eaf3ff; color:#0b5bd3; font-weight:700;
}
#cv-root .badge .dot{ width:8px; height:8px; background:#2aa0ff; border-radius:50%; }
#cv-root .availability{ margin-top:8px; font-weight:600; color:#2a3340; }

/* Titre + hero transparent */
#cv-root h1{
  margin:10px 0 14px !important; line-height:1.15;
  color:#1b2633; text-align:center; font-weight:800;
  font-size:clamp(28px,4.6vw,44px);
}
#cv-root .cv-hero{
  margin:6px 0 14px !important; padding:0 !important;
  background:transparent !important; border:0 !important; box-shadow:none !important;
}
#cv-root .hero-actions{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:center;
  margin:8px auto 0; max-width:560px;
}
#cv-root .btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:42px; padding:0 16px; border-radius:999px;
  font-weight:700; border:1px solid #344054; background:#fff; color:#111; text-decoration:none;
  transition: box-shadow .15s ease, transform .15s ease;
}
#cv-root .btn:hover{ box-shadow:0 10px 22px rgba(0,0,0,.10); transform: translateY(-1px); }
#cv-root .hero-meta{ margin-top:10px; color:#667085; text-align:center; }
#cv-root .hero-meta a{ color:inherit; text-decoration:underline; }

/* Sections & texte */
#cv-root .section{ margin:28px 0; }
#cv-root h2{
  font-weight:800; color:#1e2a36; margin:0 0 12px;
  font-size:clamp(20px,2.6vw,26px);
  border-bottom:1px solid #e7ebf0; padding-bottom:8px;
}
#cv-root p{ color:#1e2a36; font-size:clamp(15px,1.6vw,18px); margin:.4rem 0 .8rem; }
#cv-root .note{
  background:#fff; border:1px solid #e7ebf0; border-radius:12px;
  padding:14px 16px; color:#2b3a46; box-shadow:0 2px 8px rgba(0,0,0,.03);
}

/* Chips */
#cv-root .wrap ul.chips{
  list-style:none !important; padding:0 !important; margin:12px 0 0 !important;
  display:flex !important; flex-wrap:wrap !important; gap:10px !important;
}
#cv-root .wrap ul.chips > li{
  list-style:none !important; display:inline-flex !important; align-items:center !important; width:auto !important;
  background:rgba(238, 246, 255, 0.17) !important; color:#173a63 !important; border:1px solid #d8e9ff !important;
  padding:8px 14px !important; border-radius:999px !important;
  font-size:13px !important; font-weight:600 !important; box-shadow:none !important;
}

/* Expériences */
#cv-root .exp-grid{ display:grid; gap:24px; }
@media (min-width:900px){ #cv-root .exp-grid{ grid-template-columns:1fr 1fr; } }
#cv-root .card{ background:#fff; border:1px solid #e7ebf0; border-radius:14px; padding:18px; box-shadow:0 6px 18px rgba(0,0,0,.05); }
#cv-root h3{ margin:0 0 2px; font-weight:800; color:#1f2d3a; }
#cv-root .experience-meta{ color:#6b7785; margin-bottom:8px; font-size:clamp(14px,1.4vw,16px); }
#cv-root .experience-list{ list-style:disc; padding-left:1.25rem; margin:.3rem 0 0; }
#cv-root .experience-list li{ margin:.38rem 0; }

/* Compétences */
#cv-root .skills-grid{ display:grid; gap:18px; }
@media (min-width:768px){ #cv-root .skills-grid{ grid-template-columns:repeat(2,1fr); } }
#cv-root .skill-category{ background:#fff; border:1px solid #e7ebf0; border-radius:12px; padding:16px; }
#cv-root .skill-category h3{ margin:0 0 8px; color:var(--accent-ink); }
#cv-root .skill-category ul{ list-style:disc; padding-left:1.25rem; margin:0; }
#cv-root .skill-category li{ margin:.4rem 0; }

/* À propos – grille texte + domaines */
#cv-root .about-grid{display:grid;gap:18px}
@media (min-width:960px){ #cv-root .about-grid{grid-template-columns:1.15fr .85fr} }
#cv-root .about-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px}
#cv-root .about-side h3{margin:0 0 10px;font-weight:800;color:#1e2a36;font-size:clamp(16px,2vw,18px)}
#cv-root .about-side .chips{margin-top:0 !important}

/* Lisibilité globale du CV */
#cv-root{ font-size:18px; line-height:1.6; }

/* Mobile – préférences */
@media (max-width:768px){
  #cv-root h1{ text-align:left; } /* mobile: à gauche */
  #cv-root .hero-actions{ justify-content:space-between; gap:8px; max-width:100%; }
  #cv-root .btn{ flex:1 1 48%; }
}


/* ============== PROJETS (index) ============== */
#projects-root .wrap{max-width:1120px;margin:0 auto;padding:0 16px}
#projects-root .projects-hero{margin:18px 0 12px}
#projects-root .projects-hero h1{font-weight:800;text-align:left;margin:0 0 6px}
#projects-root .projects-hero .lead{color:var(--muted);margin:0 0 12px}

#projects-root .projects-filters{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 16px}
#projects-root .pill{
  border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 12px;
  font-weight:600;color:var(--fg);cursor:pointer
}
#projects-root .pill.is-active{background:#eaf3ff;color:var(--accent-ink);border-color:#cfe3ff}

#projects-root .projects-grid{
  display:grid;gap:18px;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
}
#projects-root .project-card{
  background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.04);transition:transform .15s ease, box-shadow .15s ease
}
#projects-root .project-card:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.08)}
#projects-root .project-card .thumb{aspect-ratio:16/10;overflow:hidden;background:#f4f6f8}
#projects-root .project-card img{width:100%;height:100%;object-fit:cover;display:block}
#projects-root .project-card .meta{padding:12px 14px}
#projects-root .project-card .meta h3{margin:0 0 4px;font-weight:800}
#projects-root .project-card .small{color:var(--muted);margin:0}
#projects-root .card-link{text-decoration:none;color:inherit;display:block}

/* ============== PROJET (fiche) ============== */
#project-root .wrap{max-width:1120px;margin:0 auto;padding:0 16px}
#project-root .project-head{margin:18px 0 12px}
#project-root .project-head h1{font-weight:800;margin:8px 0 6px;text-align:left}
#project-root .project-head .lead{color:var(--muted);margin:0 0 12px}
#project-root .project-head .btn.back{margin-bottom:6px}

#project-root .facts{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:12px 0 6px}
#project-root .facts .k{display:block;font-size:12px;color:var(--muted)}
#project-root .facts span:last-child{font-weight:600}

@media (max-width:900px){
  #project-root .facts{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  #project-root .facts{grid-template-columns:1fr}
}

#project-root .project-hero{margin:14px 0 10px}
#project-root .project-hero img{width:100%;border-radius:12px;border:1px solid var(--line);display:block}
#project-root .project-hero figcaption{color:var(--muted);font-size:14px;margin-top:6px}

#project-root .section{margin:22px 0}
#project-root h2{font-weight:800;margin:0 0 10px;border-bottom:1px solid var(--line);padding-bottom:8px}

#project-root .gallery{
  --cols:3;display:grid;gap:12px;grid-template-columns:repeat(var(--cols),1fr)
}
#project-root .gallery .g-item{display:block;position:relative;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:#fff}
#project-root .gallery .g-item img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:16/10;transition:transform .2s ease}
#project-root .gallery .g-item:hover img{transform:scale(1.02)}

@media (max-width:1024px){ #project-root .gallery{--cols:2} }
@media (max-width:640px){  #project-root .gallery{--cols:1} }

/* Lightbox */
#project-root .lightbox{
  position:fixed;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.6);backdrop-filter:saturate(1.2) blur(2px);
}
#project-root .lightbox[hidden]{display:none}
#project-root .lb-figure{max-width:min(96vw,1200px);max-height:90vh;margin:0}
#project-root .lb-figure img{max-width:100%;max-height:80vh;border-radius:10px;display:block}
#project-root .lb-caption{color:#fff;text-align:center;margin-top:8px}
#project-root .lb-close{
  position:absolute;top:16px;right:16px;background:#fff;border:1px solid var(--line);
  width:36px;height:36px;border-radius:999px;font-size:22px;line-height:32px;text-align:center;cursor:pointer
}
#project-root .lb-nav{
  position:absolute;top:50%;transform:translateY(-50%);background:#fff;border:1px solid var(--line);
  width:38px;height:38px;border-radius:999px;font-size:22px;line-height:34px;text-align:center;cursor:pointer
}
#project-root .lb-nav.prev{left:16px}
#project-root .lb-nav.next{right:16px}

/* CTA centrés */
#project-root .cta{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

/* Footer flottant (pinné) */
.footer-floating{
  position:fixed; inset:auto 22px 20px auto;   /* bottom-right */
  z-index:9998; display:flex; gap:10px; align-items:center;
  background:rgba(255,255,255,.9); backdrop-filter: blur(6px);
  border:1px solid var(--line); box-shadow:var(--shadow); border-radius:999px;
  padding:8px 10px;
}
.footer-floating .chip{
  display:inline-flex; align-items:center; justify-content:center;
  height:36px; padding:0 14px; border-radius:999px; border:1px solid #344054;
  text-decoration:none; color:#111; background:#fff; font-weight:600;
}
.footer-floating .chip:hover{ box-shadow:0 8px 18px rgba(0,0,0,.08); transform:translateY(-1px) }
.footer-floating .to-top{ cursor:pointer; background:#eef6ff; border-color:#d8e9ff }

@media (max-width:768px){
  .footer-floating{ left:12px; right:12px; justify-content:space-between; padding:8px }
  .footer-floating .chip{ flex:1 1 auto; text-align:center }
}

/* Plus d’espace sous la grille de projets */
.projects-grid {
  padding-bottom: 80px;  /* espace confortable */
}

@media (max-width: 768px) {
  .projects-grid {
    padding-bottom: 120px; /* un peu plus d’air sur mobile à cause du footer flottant */
  }
}

/* Footer flottant (actions rapides + langue) */
.fab-footer{
  position:fixed; inset:auto 22px 22px auto;
  display:flex; align-items:center; gap:10px;
  padding:10px;
  background:rgba(255,255,255,.85);
  backdrop-filter:saturate(160%) blur(8px);
  border:1px solid var(--line);
  border-radius:999px;
  box-shadow:var(--shadow);
  z-index:9999;
}
.fab-footer .chip{
  display:inline-flex; align-items:center; justify-content:center;
  height:38px; padding:0 14px; border-radius:999px;
  border:1px solid #344054; background:#fff; color:#111;
  text-decoration:none; font-weight:600; line-height:1;
  transition:box-shadow .15s ease, transform .15s ease, background .15s ease, color .15s ease;
}
.fab-footer .chip:hover{ box-shadow:0 8px 18px rgba(0,0,0,.08); transform:translateY(-1px); }

.fab-footer .sep{
  width:1px; height:20px; background:var(--line); display:inline-block;
  margin:0 2px;
}

/* Langue — surbrillance selon la langue de la page */
html[lang="fr"] .fab-footer .lang-fr,
html[lang="en"] .fab-footer .lang-en{
  background:var(--accent); color:#fff; border-color:transparent;
}

/* Mobile – garder lisible et cliquable */
@media (max-width:768px){
  .fab-footer{ right:14px; bottom:14px; gap:8px; padding:8px; }
  .fab-footer .chip{ height:36px; padding:0 12px; font-size:14px; }
  .fab-footer .sep{ height:18px; }
}

/* Donne un peu d'air en bas des pages avec grilles */
.projects-grid{ padding-bottom:80px; }
@media (max-width:768px){ .projects-grid{ padding-bottom:120px; } }

/* Langue active dans le footer
   - Par défaut: FR actif
   - Si la page a html[lang="en"]: EN actif, FR neutre
*/
.fab-footer .lang-fr{
  background: var(--accent);
  color:#fff;
  border-color: transparent;
}
html[lang="en"] .fab-footer .lang-fr{
  background:#fff;
  color:#111;
  border:1px solid #344054;
}
html[lang="en"] .fab-footer .lang-en{
  background: var(--accent);
  color:#fff;
  border-color: transparent;
}

/* ===== Footer local (non pinné) ===== */
#footer-local{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px;
  box-shadow: 0 12px 30px rgba(16,24,40,.12);
}

#footer-local .pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid #d0d5dd;
  background: #fff;
  color: var(--fg);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: box-shadow .15s ease, transform .15s ease, color .15s ease, border-color .15s ease, background-color .15s ease;
}

#footer-local .pill:hover{
  box-shadow: 0 8px 18px rgba(16,24,40,.10);
  transform: translateY(-1px);
  border-color: #c6d7ff;
  color: var(--accent-ink);
}

#footer-local .pill.is-active{
  background: #eaf3ff;
  border-color: #b6ceff;
  color: var(--accent-ink);
}

#footer-local .divider{
  width: 1px;
  height: 22px;
  background: var(--line);
  margin: 0 4px;
  border-radius: 1px;
}

/* Mobile / petits écrans */
@media (max-width: 768px){
  #footer-local{
    right: 12px;
    bottom: 12px;
    gap: 6px;
    padding: 6px;
  }
  #footer-local .pill{
    height: 34px;
    padding: 0 12px;
    font-size: 13px;
  }
  #footer-local .divider{ display: none; }
}

/* Espace de respiration au bas des pages à cartes */
.page-bottom-space { padding-bottom: 120px; } /* utilise sur tes pages "Projets" */

/* ===============================
   PROJETS (FR/EN) — mise en page
   =============================== */
#projects-root, #projects-root *{ box-sizing:border-box }
#projects-root .wrap{ max-width:1120px; margin:0 auto; padding:0 16px }
#projects-root .section{ margin:28px 0 }
#projects-root h1{ margin:10px 0 8px; font-weight:800; text-align:left }
#projects-root .muted{ color:var(--muted) }

/* Grille de cartes */
#projects-root .cards-grid{
  display:grid; gap:18px;
  grid-template-columns: 1fr;           /* mobile */
}
@media (min-width:700px){
  #projects-root .cards-grid{ grid-template-columns: 1fr 1fr }  /* tablette */
}
@media (min-width:1100px){
  #projects-root .cards-grid{ grid-template-columns: 1fr 1fr 1fr 1fr }  /* desktop */
}

/* Carte projet (lien cliquable) */
#projects-root .card{
  display:block; text-decoration:none; color:inherit;
  background:var(--card); border:1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
#projects-root .card:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0,0,0,.10);
  border-color: rgba(20,115,230,.35);
}

/* Média */
#projects-root .card figure{ margin:0; overflow:hidden; border-top-left-radius:var(--radius); border-top-right-radius:var(--radius) }
#projects-root .card img{ display:block; width:100%; height:auto }

/* Titre + meta */
#projects-root .card h3{ margin:12px 14px 4px; font-weight:800; color:var(--fg) }
#projects-root .card .meta{ margin:0 14px 14px; color:var(--muted); font-size:0.95rem }

/* Laisse de l’air avant le footer */
.page-bottom-space{ padding-bottom: 32px }

/* Footer dock (identique au style CV) */
.footer-dock{
  margin-top: 28px;
  padding: 16px;
  border-top: 1px solid var(--line);
  background: var(--card);
  display:flex; gap:10px; flex-wrap:wrap;
  align-items:center; justify-content:center;
}

/* Pilules de langue dans le footer */
.lang-pill{ display:flex; gap:8px }
.lang-pill .pill{
  display:inline-flex; align-items:center; justify-content:center;
  height:34px; padding:0 14px; border-radius:999px;
  border:1px solid #344054; background:#fff; color:#111; text-decoration:none; font-weight:700;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.lang-pill .pill:hover{ border-color: var(--accent) }
.lang-pill .pill.active{ background: var(--accent-ink); color:#fff; border-color: var(--accent-ink) }

/* Page mot de passe Cargo */
body.password-protected {
  background: #f6f7fb; /* fond clair */
  font-family: var(--app-font, sans-serif);
  color: #1e2a36;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

body.password-protected h1 {
  font-size: 24px;
  margin-bottom: 16px;
}

body.password-protected input[type="password"] {
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 16px;
  margin-bottom: 12px;
}

body.password-protected input[type="submit"] {
  padding: 10px 16px;
  border-radius: 999px;
  border: none;
  background: #1473e6;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
}