/* Portfolio final — structure Portfolio 2 conservée
   Style + animations inspirés du Portfolio 1 (plus aéré, blanc/bleu, cartes premium).
*/

:root{
  --bg:#ffffff;
  --bg-soft:#f6f9ff;
  --text:#0b1220;
  --muted:#475569;
  --line:#e6eefc;

  --blue:#1e5eff;
  --blue2:#0ea5e9;

  --shadow:0 22px 70px rgba(11,18,32,.10);
  --shadow2:0 12px 34px rgba(11,18,32,.08);

  --radius:22px;
  --radius-sm:16px;

  --max:1180px;

  --space-1:10px;
  --space-2:14px;
  --space-3:18px;
  --space-4:24px;
  --space-5:34px;
  --space-6:52px;

  --header-h:72px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.65;
}

/* Typography */
h1,h2,h3,h4{line-height:1.15}
h1{
  font-size:clamp(2.6rem,6.3vw,4.8rem);
  margin:0;
  letter-spacing:-0.03em;
}
h2{
  font-size:clamp(1.9rem,3.2vw,2.8rem);
  margin:0 0 10px;
  letter-spacing:-0.02em;
}
h3{
  font-size:clamp(1.25rem,2vw,1.6rem);
  margin:0 0 10px;
}
h4{
  font-size:1.1rem;
  margin:0 0 10px;
}
p{margin:0 0 14px}
small{color:var(--muted)}
a{color:inherit}
strong{font-weight:800}

/* Background blobs */
.bg-blob{
  position:fixed;
  inset:-140px -140px auto auto;
  width:520px;height:520px;
  background:radial-gradient(circle at 30% 30%, rgba(30,94,255,.20), rgba(14,165,233,.08) 55%, rgba(255,255,255,0) 70%);
  filter:blur(14px);
  pointer-events:none;
  z-index:-1;
}
.bg-blob--2{
  inset:auto auto -220px -220px;
  width:620px;height:620px;
  background:radial-gradient(circle at 35% 35%, rgba(14,165,233,.18), rgba(30,94,255,.06) 55%, rgba(255,255,255,0) 70%);
  filter:blur(18px);
}

/* Container */
.container{
  max-width:var(--max);
  margin:0 auto;
  padding:0 24px;
}

/* Navigation */
.site-nav{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter:blur(12px);
  background:rgba(255,255,255,.78);
  border-bottom:1px solid rgba(230,238,252,.85);
}

.nav-content{
  height:var(--header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  max-width:var(--max);
  margin:0 auto;
  padding:0 24px;
}

.logo{
  margin:0;
  font-weight:900;
  letter-spacing:.02em;
  display:flex;
  gap:8px;
  align-items:baseline;
}
.logo span{
  background:linear-gradient(135deg,var(--blue),var(--blue2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.nav-toggle{
  display:none;
  border:1px solid var(--line);
  background:#fff;
  width:44px;height:44px;
  border-radius:999px;
  box-shadow:var(--shadow2);
  cursor:pointer;
}
.nav-toggle-bars{
  display:block;
  width:20px;height:2px;
  background:var(--text);
  margin:0 auto;
  position:relative;
}
.nav-toggle-bars::before,
.nav-toggle-bars::after{
  content:"";
  position:absolute;
  left:0;
  width:20px;height:2px;
  background:var(--text);
}
.nav-toggle-bars::before{top:-6px}
.nav-toggle-bars::after{top:6px}

.nav-menu{
  list-style:none;
  display:flex;
  gap:10px;
  align-items:center;
  padding:0;
  margin:0;
}

.nav-menu a{
  text-decoration:none;
  color:var(--muted);
  font-weight:700;
  padding:10px 12px;
  border-radius:999px;
  transition:background .18s,color .18s,transform .18s;
}
.nav-menu a:hover{
  background:rgba(30,94,255,.08);
  color:var(--text);
}
.btn-contact{
  background:linear-gradient(135deg,var(--blue),var(--blue2));
  color:#fff !important;
  box-shadow:0 12px 30px rgba(30,94,255,.20);
}
.btn-contact:hover{transform:translateY(-1px)}

/* Dropdown (nav) */
.dropdown{position:relative}
.dropdown-head{
  display:flex;
  align-items:center;
  gap:10px;
}
.dropdown-link{padding-right:6px}
.dropdown-toggle{
  width:40px;height:40px;
  border-radius:999px;
  border:1px solid rgba(30,94,255,.18);
  background:rgba(30,94,255,.06);
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:transform .18s, box-shadow .18s, background .18s;
}
.dropdown-toggle:hover{
  box-shadow:var(--shadow2);
  transform:translateY(-1px);
}
.dropdown-toggle span{
  display:inline-block;
  transition:transform 240ms cubic-bezier(.2,.8,.2,1);
}
.dropdown.is-open .dropdown-toggle span{transform:rotate(180deg)}

.dropdown-menu{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  min-width:240px;
  padding:10px;
  margin:0;
  list-style:none;
  border:1px solid rgba(230,238,252,.95);
  border-radius:18px;
  background:#fff;
  box-shadow:var(--shadow);
  transform-origin:top right;
}

.dropdown-menu a{
  display:block;
  padding:12px 12px;
  border-radius:14px;
  color:var(--text);
  font-weight:750;
}
.dropdown-menu a:hover{background:rgba(30,94,255,.06)}

.js .dropdown-menu{
  max-height:0;
  opacity:0;
  transform:translateY(-6px) scale(.985);
  overflow:hidden;
  pointer-events:none;
  transition:max-height 260ms cubic-bezier(.2,.8,.2,1), opacity 190ms ease, transform 190ms ease;
}
.js .dropdown.is-open .dropdown-menu{
  max-height:420px;
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}

/* Mobile nav */
@media (max-width: 880px){
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center}
  .nav-menu{
    position:fixed;
    top:var(--header-h);
    left:0;right:0;
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(230,238,252,.95);
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    padding:18px 16px 22px;
    transform:translateY(-8px);
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
  }
  .site-nav.nav-open .nav-menu{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
  }
  .nav-menu a{padding:14px 14px;border-radius:16px}
  .dropdown-menu{position:static; box-shadow:none; border:none; padding:8px 0 0; min-width:auto}
}

/* Hero */
.hero{
  padding: calc(var(--space-6) + 10px) 0 var(--space-6);
}
.hero-content{
  max-width:var(--max);
  margin:0 auto;
  padding:0 24px;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: var(--space-6);
  align-items:center;
}
@media (max-width: 980px){
  .hero-content{grid-template-columns:1fr; gap:28px}
}
.hero-text h1 span{
  background:linear-gradient(135deg,var(--blue),var(--blue2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero-text h2{
  margin-top:10px;
  color:var(--muted);
  font-weight:650;
  font-size:clamp(1.05rem,1.4vw,1.2rem);
  letter-spacing:0;
}
.kicker{
  display:inline-flex;
  gap:10px;
  align-items:center;
  font-weight:800;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.10em;
  font-size:.82rem;
  margin:0 0 12px;
}

.hero-actions{
  display:flex;
  gap:12px;
  margin-top:20px;
  flex-wrap:wrap;
}

.btn-primary,
.btn-ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:46px;
  padding:0 18px;
  border-radius:999px;
  text-decoration:none;
  font-weight:850;
  border:1px solid transparent;
  transition:transform .18s, box-shadow .18s, background .18s, border-color .18s;
}
.btn-primary{
  background:linear-gradient(135deg,var(--blue),var(--blue2));
  color:#fff;
  box-shadow:0 14px 34px rgba(30,94,255,.22);
}
.btn-primary:hover{transform:translateY(-1px)}
.btn-ghost{
  background:#fff;
  color:var(--text);
  border-color:var(--line);
  box-shadow:var(--shadow2);
}
.btn-ghost:hover{border-color:rgba(30,94,255,.35); transform:translateY(-1px)}

.hero-media{
  display:grid;
  justify-items:end;
  border-radius: 180px 220px 180px 220px;
}
@media (max-width:980px){
  .hero-media{justify-items:start}
}
.profile-pic{
  width:min(260px, 100%);
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:120px;
  border:1px solid var(--line);
  background:var(--bg-soft);
  box-shadow:var(--shadow);
}
.hero-card{
  width:min(320px, 100%);
  border:1px solid var(--line);
  border-radius:24px;
  background:#fff;
  box-shadow:var(--shadow2);
  padding:16px 16px 14px;
}
.hero-card__row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.pill{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  font-weight:800;
  border:1px solid rgba(30,94,255,.18);
  background:rgba(30,94,255,.06);
  color:rgba(30,94,255,.95);
  font-size:.9rem;
}
.pill--soft{
  border-color:rgba(230,238,252,.95);
  background:rgba(246,249,255,.9);
  color:var(--muted);
}
.hero-card__text{
  margin:0;
  color:var(--muted);
  font-weight:650;
}

/* Sections */
section{
  padding: var(--space-6) 0;
}
.bg-light{
  background:linear-gradient(180deg, rgba(246,249,255,.95), rgba(255,255,255,.95));
  border-top:1px solid rgba(230,238,252,.75);
  border-bottom:1px solid rgba(230,238,252,.75);
}
.section-title{
  margin-bottom:18px;
}
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:22px;
}
.section-subtitle{
  color:var(--muted);
  margin:0 0 10px;
  max-width:54ch;
}

/* About */
.about-grid{
  display:grid;
  grid-template-columns: 1fr;
}
.about-text{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:#fff;
  box-shadow:var(--shadow2);
  padding:24px;
}

/* Timeline */
.timeline{
  display:grid;
  gap:20px;
  margin-top:26px;
}
.timeline-item{
  display:grid;
  grid-template-columns: 1fr;
  gap:14px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:#fff;
  box-shadow:var(--shadow2);
  padding:22px;
}
@media (max-width: 900px){
  .timeline-item{grid-template-columns:1fr}
}
.timeline-item .date{
  font-weight:900;
  color:rgba(30,94,255,.95);
  background:rgba(30,94,255,.06);
  border:1px solid rgba(30,94,255,.18);
  border-radius:18px;
  padding:12px 14px;
  width: fit-content;
  justify-self: start;
  height: fit-content;
}
.timeline-item .content p{margin-bottom:10px}
.formation-img{
  width:100%;
  max-width:520px;
  aspect-ratio: 16/9;
  object-fit:cover;
  object-position:center;
  border-radius:18px;
  border:1px solid var(--line);
  background:var(--bg-soft);
  box-shadow:var(--shadow2);
  margin-top:14px;
}

/* Skills */
.skills-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:18px;
  margin-top:24px;
}
@media (max-width: 980px){
  .skills-grid{grid-template-columns:1fr}
}
.skill-card{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:#fff;
  box-shadow:var(--shadow2);
  padding:22px;
}
.skill-detail{color:var(--muted)}
.lang-list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:10px;
}
.lang-list li{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:12px 12px;
  border-radius:16px;
  border:1px solid rgba(230,238,252,.95);
  background:rgba(246,249,255,.9);
}
.level{color:var(--muted); font-weight:800}

/* Projects */
.projects-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:18px;
  margin-top:22px;
}
.project-card{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:#fff;
  box-shadow:var(--shadow);
  overflow:hidden;
}

.project-details{
  border-radius:var(--radius);
}

.project-details > summary{
  list-style:none;
  cursor:pointer;
  display:grid;
  grid-template-columns: 240px 1fr;
  gap:18px;
  align-items:center;
  padding:18px 18px;
}
.project-details > summary::-webkit-details-marker{display:none}

@media (max-width: 980px){
  .project-details > summary{grid-template-columns:1fr}
}

.project-details > summary img{
  width:100%;
  aspect-ratio: 16/10;
  object-fit:cover;
  object-position:center;
  border-radius:18px;
  border:1px solid rgba(230,238,252,.95);
  background:var(--bg-soft);
}

.summary-title-wrapper{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.summary-title-wrapper .title{
  font-weight:950;
  font-size:1.2rem;
  letter-spacing:-0.01em;
}
.badge{
  width:fit-content;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(30,94,255,.18);
  background:rgba(30,94,255,.06);
  color:rgba(30,94,255,.95);
  font-weight:850;
  font-size:.9rem;
}

/* Tool badges (logos style) */
.tool-badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
}
.tool-badge{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 12px 8px 10px;
  border-radius:999px;
  border:1px solid rgba(230,238,252,.95);
  background:rgba(246,249,255,.92);
  color:var(--text);
  font-weight:800;
  font-size:.92rem;
}
.tool-badge::before{
  content:attr(data-ico);
  width:28px;height:28px;
  border-radius:10px;
  display:grid;
  place-items:center;
  font-weight:950;
  font-size:.78rem;
  color:#fff;
  background:linear-gradient(135deg,var(--blue),var(--blue2));
  box-shadow:0 10px 22px rgba(30,94,255,.18);
}

/* Details content */
.project-content-inner{
  border-top:1px solid rgba(230,238,252,.95);
  padding: 22px 22px 26px;
}

.detail-section + .detail-section{margin-top:22px}
.detail-section p,
.detail-section li{color:var(--muted)}
.results-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:18px;
  align-items:start;
}
@media (max-width: 980px){
  .results-grid{grid-template-columns:1fr}
}
.results-media img{
  width:100%;
  aspect-ratio: 16/10;
  object-fit:cover;
  border-radius:18px;
  border:1px solid rgba(230,238,252,.95);
  background:var(--bg-soft);
  box-shadow:var(--shadow2);
}

/* Placeholders (no text) */
.placeholder-lines{
  display:grid;
  gap:10px;
  margin-top:8px;
}
.placeholder-lines span{
  height:12px;
  border-radius:999px;
  border:1px solid rgba(230,238,252,.95);
  background:linear-gradient(90deg, rgba(246,249,255,.95), rgba(30,94,255,.06), rgba(246,249,255,.95));
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}
.placeholder-lines span.short{width:66%}
.placeholder-list{
  list-style:none;
  padding:0;
  margin:10px 0 0;
  display:grid;
  gap:10px;
}
.placeholder-list li{
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(230,238,252,.95);
  background:rgba(246,249,255,.92);
}
.placeholder-list li span{
  display:block;
  height:12px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(246,249,255,.95), rgba(30,94,255,.06), rgba(246,249,255,.95));
  background-size:200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}
.placeholder-list li span.short{width:62%}

/* Passions */
.passion-grid{
  display:grid;
  gap:18px;
  margin-top:20px;
}
.passion-card{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap:22px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:#fff;
  box-shadow:var(--shadow);
  overflow:hidden;
}
@media (max-width: 980px){
  .passion-card{grid-template-columns:1fr}
}
.passion-image img{
  width:100%;
  height:100%;
  min-height:240px;
  object-fit:cover;
  object-position:center;
  display:block;
}
.passion-content{padding:22px}
.passion-content p{color:var(--muted)}

/* CV */
.text-center{text-align:center}
.cv-place-holder{
  margin:18px auto 0;
  max-width:920px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  background:#fff;
}
.cv-place-holder img{
  width:100%;
  height:auto;
  display:block;
}
.cv-actions{
  margin-top:18px;
  display:flex;
  justify-content:center;
}

/* Contact */
.contact-mail{
  display:inline-block;
  margin-top:12px;
  padding:12px 16px;
  border-radius:999px;
  border:1px solid rgba(30,94,255,.18);
  background:rgba(30,94,255,.06);
  text-decoration:none;
  font-weight:900;
}

/* Footer */
.footer{
  padding: 20px 0 46px;
  text-align:center;
  color:var(--muted);
}

/* Reveal */
.reveal{opacity:1; transform:none;}
.js .reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .55s ease, transform .55s ease;
}
.js .reveal.is-visible{
  opacity:1;
  transform:none;
}

/* Motion reduction */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .js .reveal{transition:none; opacity:1; transform:none}
  .placeholder-lines span,
  .placeholder-list li span{animation:none}
}

/* Shimmer */
@keyframes shimmer{
  0%{background-position:0% 50%}
  100%{background-position:100% 50%}
}


/* Chevron injecté pour <details> projets */
.project-details > summary{position:relative; padding-right:56px;}
.project-details > summary .details-chevron{
  position:absolute;
  right:14px;
  top:18px;
  width:40px;height:40px;
  border-radius:999px;
  border:1px solid rgba(30,94,255,.18);
  background:rgba(30,94,255,.06);
  display:grid;
  place-items:center;
  color:rgba(30,94,255,.95);
  box-shadow:0 10px 22px rgba(11,18,32,.06);
}
.project-details > summary .details-chevron span{
  display:inline-block;
  transition: transform 240ms cubic-bezier(.2,.8,.2,1);
}
.project-details[open] > summary .details-chevron span{transform:rotate(180deg);}

.tool-badge--img{
  display:inline-flex;
  align-items:center;
  gap:10px;
}

.tool-badge--img img{
  width:18px;
  height:18px;
  object-fit:contain;
  flex:0 0 auto;
}
/* === ALIGNEMENT PROPRE DES TOOL BADGES === */

.tool-badges{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns: max-content;
  gap:12px;
  align-items:center;
}

/* largeur fixe pour tous les badges */
.tool-badge{
  width:140px;
  height:42px;
  display:grid;
  grid-template-columns: 34px 1fr;
  align-items:center;
  gap:10px;
  padding:6px 12px;
  box-sizing:border-box;
}

/* icône (data-ico ou image) */
.tool-badge::before{
  width:28px;
  height:28px;
  border-radius:10px;
  font-size:.75rem;
}

/* badges avec image */
.tool-badge--img{
  grid-template-columns: 34px 1fr;
}

.tool-badge--img img{
  width:18px;
  height:18px;
  justify-self:center;
}

/* texte centré verticalement */
.tool-badge span{
  line-height:1;
  white-space:nowrap;
}
/* ==== TOOL BADGES : icône à gauche + bonne taille ==== */

.tool-badges{
  display:flex;
  gap:14px;
  align-items:center;
}

/* badge = grille 2 colonnes : [icône][texte] */
.tool-badge{
  width:140px;
  height:44px;
  display:grid;
  grid-template-columns: 40px 1fr;
  align-items:center;
  padding:6px 14px;
}

/* bloc icône */
.tool-badge::before{
  width:32px;
  height:32px;
  border-radius:10px;
  place-self:center;
}

/* badges avec logo image */
.tool-badge.tool-badge--img::before{
  content:none;
  display:none;
}

/* logo */
.tool-badge.tool-badge--img img{
  grid-column:1;
  grid-row:1;
  width:22px;
  height:22px;
  place-self:center;
  object-fit:contain;
}

/* texte à droite */
.tool-badge.tool-badge--img > span{
  grid-column:2;
  grid-row:1;
}
/* ===== Alignement horizontal parfait des tool-badges ===== */

.tool-badges{
  display:grid;
  grid-auto-flow: column;
  grid-auto-columns: 140px;   /* même largeur pour chaque badge */
  gap:14px;
  align-items:center;
}

/* chaque badge prend exactement une colonne */
.tool-badge{
  width:140px;
  height:44px;
}