:root{
  --bg: #f5f7fa;
  --text: #0d1117;
  --muted: #6b7280;
  --accent: #0020A0;
  --glass-bg: rgba(255,255,255,0.45);
  --glass-blur: 20px;
  --shadow: rgba(0,0,0,0.14);
  --chip-size: 14px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

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

html{
  height:100%;
  overflow:hidden;
}

body{
  font-family: var(--font);
  font-weight: 400;
  background:var(--bg);
  color:var(--text);
  height:100%;
  overflow:hidden;
  overscroll-behavior:none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Les éléments de formulaire n'héritent pas de la police par défaut :
   on force la cohérence typographique sur tout le site */
button, input, select, textarea{
  font-family: var(--font);
}

/* CANVAS */
#bg-canvas{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:-1;
}

/* Els visuellement masqués mais accessibles aux lecteurs d'écran */
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* COLOR CHIPS GLOBAL */
.color-chips-global{
  position: fixed;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 14px;
  z-index: 500;
}

.color-chips-global .chip{
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border:1.5px solid rgba(255,255,255,0.65);
  box-shadow:0 3px 10px rgba(0,0,0,0.12);
  cursor:pointer;
  opacity: 0.45;
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
}

.color-chips-global .chip:hover,
.color-chips-global .chip:focus-visible,
.color-chips-global .chip.active-lang{
  opacity: 1;
}

.color-chips-global .chip:hover{
  transform:scale(1.25);
  box-shadow:0 8px 20px rgba(0,0,0,0.16);
}

.color-chips-global .chip.active-lang{
  box-shadow:0 0 0 2px rgba(255,255,255,0.8), 0 8px 20px rgba(0,0,0,0.18);
}


/* HEADER — remonté légèrement pour s'aligner visuellement avec le burger (opposé) */
.site-header{
  position: fixed;
  top: 14px;
  right: 24px;
  z-index: 400;
}

.logo-img{
  width:140px;
  opacity:0;
  scale:0.9;
  transform-origin:center center;
  transition:transform .4s ease, opacity .5s ease;
  cursor:pointer;
}

/* HERO */
.panel{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:90px 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.5s ease;
  z-index: 1;
}

.panel.active-section{
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  z-index: 5;
}

.hero{
  text-align:center;
  padding-top:70px;
}

.hero-logo-img{
  width:500px;
  max-width:56vw;
  opacity:1;
  transform-origin:center center;
  filter:drop-shadow(0 16px 40px rgba(0,0,0,0.08));
}

/* breathing effect */
.hero-logo-img.loop{
  animation: breathe 3.8s ease-in-out infinite;
}

@keyframes breathe{
  0% { transform: scale(1); }
  50% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

/* TEXT */
.tagline{
  margin-top:20px;
  font-size:18px;
  color:var(--muted);
}

.global-search-cta-text{
  position: fixed;
  bottom: 26px;
  right: 26px;
  z-index: 1000;
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:13px 24px;
  border-radius:999px;
  border:1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background:rgba(255,255,255,0.72);
  backdrop-filter:blur(12px);
  color:var(--accent);
  font-size:13.5px;
  font-weight:600;
  letter-spacing:0.2px;
  cursor:pointer;
  box-shadow:0 10px 26px rgba(0,0,0,0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.global-search-cta-text svg{
  flex-shrink:0;
}

.global-search-cta-text:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,0.92);
  box-shadow:0 14px 30px color-mix(in srgb, var(--accent) 25%, transparent);
}

.scroll-hint{
  margin-top:26px;
  color:var(--muted);
  font-size:13px;
}

/* CARDS */
.glass{
  background:var(--glass-bg);
  backdrop-filter:blur(var(--glass-blur));
  border-radius:18px;
  padding:42px;
  box-shadow:0 12px 45px var(--shadow);
  max-width:1100px;
  width:100%;
}

.section-title{
  font-family: var(--font);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 1px;
  margin-bottom: 20px;
  color: var(--accent);
}


/* LISTES */
.items li{
  margin:10px 0;
  color:var(--muted);
  font-size:17px;
}

.columns{
  column-count:2;
  column-gap:36px;
}

/* BTN */
.btn.outline{
  display:inline-block;
  margin-top:18px;
  padding:10px 18px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,0.15);
  background:transparent;
  color:var(--text);
  text-decoration:none;
  font-weight:600;
}

/* Reveal */
.smooth-reveal{
  opacity:0;
  transform:translateY(28px);
  filter:blur(6px);
}
/* BURGER */
#burger{
  position:fixed;
  top:24px;
  left:24px;
  width:30px;
  height:22px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  cursor:pointer;
  z-index:1001;
}

#burger .bar{
  width:100%;
  height:3px;
  background:var(--accent);
  border-radius:4px;
  transition:0.3s ease;
  transform-origin:center;
}

#burger.open .bar:nth-child(1){
  transform:translateY(9.5px) rotate(45deg);
}
#burger.open .bar:nth-child(2){
  opacity:0;
}
#burger.open .bar:nth-child(3){
  transform:translateY(-9.5px) rotate(-45deg);
}

/* BACKDROP — assombrit la page quand le menu est ouvert, permet de fermer au clic */
#menuBackdrop{
  position:fixed;
  inset:0;
  background:rgba(10,12,20,0.28);
  backdrop-filter:blur(2px);
  opacity:0;
  pointer-events:none;
  transition:opacity 0.35s ease;
  z-index:850;
}

#menuBackdrop.show{
  opacity:1;
  pointer-events:all;
}

/* MENU LATERAL */
#sideMenu{
  position:fixed;
  top:0;
  left:-300px;
  width:280px;
  height:100%;
  background:rgba(255,255,255,0.6);
  backdrop-filter:blur(28px);
  padding:100px 34px 40px;
  transition:0.4s cubic-bezier(.4,0,.2,1);
  z-index:900;
  box-shadow:0 0 45px rgba(0,0,0,0.18);
  border-right:1px solid rgba(255,255,255,0.4);
}

#sideMenu ul{
  list-style:none;
  padding:0;
  margin:0;
}

#sideMenu li{
  position:relative;
  margin:0;
  padding:16px 4px 16px 18px;
  font-size:15px;
  font-weight:600;
  letter-spacing:0.6px;
  color:var(--text);
  cursor:pointer;
  transition:0.25s ease;
  border-bottom:1px solid rgba(0,0,0,0.07);
}

#sideMenu li:last-child{
  border-bottom:none;
}

#sideMenu li::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:3px;
  height:0;
  background:var(--accent);
  border-radius:3px;
  transition:height 0.25s ease;
}

#sideMenu li:hover{
  color:var(--accent);
  padding-left:24px;
}

#sideMenu li:hover::before{
  height:60%;
}

/* OPEN STATE */
#sideMenu.open{
  left:0;
}
/* GRID LOGO PREMIUM */
/* DOMAINES MÉTIERS — grille d'icônes */
.domain-grid{
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.domain-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding: 24px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,0.55);
  border:1px solid rgba(0,0,0,0.06);
  box-shadow: 0 8px 22px rgba(0,0,0,0.05);
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.domain-card:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.domain-card:hover{
  transform: translateY(-4px);
  background: rgba(255,255,255,0.88);
  box-shadow: 0 16px 34px rgba(0,0,0,0.1);
}

.domain-icon{
  width: 38px;
  height: 38px;
  color: var(--accent);
  flex-shrink:0;
}

.domain-card span{
  font-size: 13px;
  font-weight:600;
  text-align:center;
  color: var(--text);
  letter-spacing:0.2px;
}

/* MISSIONS — cartes avec icône, titre et description */
.mission-grid{
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  text-align: left;
}

.mission-card{
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 18px;
  padding: 26px 24px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.05);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.mission-card:hover{
  transform: translateY(-4px);
  background: rgba(255,255,255,0.85);
  box-shadow: 0 16px 34px rgba(0,0,0,0.1);
}

.mission-icon{
  width: 32px;
  height: 32px;
  color: var(--accent);
  margin-bottom: 16px;
}

.mission-card h3{
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
  letter-spacing: 0.1px;
}

.mission-card p{
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
}

/* TECHNIQUES D'IA — badges de compétences */
.tech-grid{
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
  text-align: left;
}

.tech-badge{
  position: relative;
  padding: 15px 18px 15px 22px;
  background: rgba(255,255,255,0.5);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.tech-badge::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  background: var(--accent);
}

.tech-badge:hover{
  transform: translateX(4px);
  background: rgba(255,255,255,0.85);
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

/* À PROPOS — carte biographie */
.about-wrap{
  max-width: 780px;
}

.about-card{
  margin-top: 30px;
  display: flex;
  gap: 44px;
  align-items: flex-start;
  text-align: left;
}

.about-side{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  width: 170px;
  text-align: center;
}

.about-avatar{
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), rgba(0,0,0,0.35));
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 26px;
  font-weight:700;
  letter-spacing: 1px;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--accent) 35%, transparent);
}

.about-name{
  font-size: 15.5px;
  font-weight:700;
  color: var(--text);
  margin-top: 8px;
}

.about-role{
  font-size: 12.5px;
  color: var(--muted);
}

.about-stats-row{
  display:flex;
  gap: 10px;
  margin-top: 12px;
}

.about-stat{
  padding: 10px 16px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  display:flex;
  flex-direction: column;
  align-items:center;
}

.about-stat-number{
  font-size: 22px;
  font-weight:800;
  color: var(--accent);
  line-height:1;
}

.about-stat-label{
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing:0.5px;
  color: var(--muted);
  margin-top:3px;
  text-align: center;
}

.about-bio{
  flex:1;
}

.about-bio p{
  font-size: 15px;
  line-height:1.75;
  color: var(--text);
  margin-bottom: 14px;
}

.about-bio p:last-child{
  margin-bottom:0;
}

.project-logos{
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 26px;
  place-items: center;
}

.logo-card{
  width: 140px;
  height: 140px;
  background: rgba(255,255,255,0.35);
  backdrop-filter: blur(14px);
  border-radius: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
  transition: 0.35s ease;
  overflow: hidden;
  transform: translateY(18px);
  opacity: 0;
}

.logo-card img{
  width: 80%;
  height: auto;
  opacity: 0.95;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.15));
  transition: 0.3s ease;
}

.logo-card:hover{
  transform: translateY(-8px) scale(1.04);
  box-shadow: 0 30px 60px rgba(0,0,0,0.22);
}

.logo-card:hover img{
  transform: scale(1.06);
  opacity: 1;
}
/* OVERLAY PROJET */
#projectOverlay{
  position: fixed;
  inset: 0;
  background: rgba(8,10,18,0.45);
  backdrop-filter: blur(6px);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: 0.4s ease;
  z-index: 3000;
}

#projectOverlay.show{
  opacity: 1;
  pointer-events: all;
}

.project-window{
  width: fit-content;
  max-width: 95vw;
  padding: 32px 38px;
  border-radius: 20px;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(24px);
  box-shadow: 0 25px 70px rgba(0,0,0,0.3);
  animation: popIn 0.5s cubic-bezier(.2,.8,.2,1) forwards;
  transform: translateY(20px) scale(0.96);
  opacity: 0;
}

@keyframes popIn{
  to { transform: translateY(0) scale(1); opacity: 1; }
}

.project-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

#projectTitle{
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--accent);
}

#closeProject{
  background: rgba(0,0,0,0.05);
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  color: var(--text);
  transition: 0.2s ease;
}

#closeProject:hover{
  background: var(--accent);
  color: #fff;
  transform: scale(1.08);
}

/* ------------------------------------------------------------------
   TABLEAU PROJETS — design unifié, cartes lisibles, même police partout
   ------------------------------------------------------------------ */
.project-table{
  width: 100%;
  min-width: 700px;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--font);
  font-size: 14.5px;
}

.project-table thead th{
  font-family: var(--font);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  text-align: left;
  padding: 0 4px 12px;
  color: var(--muted);
}

.project-table thead tr,
.project-table tbody tr.project-row{
  display: grid;
  grid-template-columns:
    78px      /* Début */
    78px      /* Fin */
    130px     /* Client */
    150px     /* Projet */
    1.3fr     /* Résumé */
    1fr       /* IA */
    1.15fr;   /* Technologies */
  column-gap: 16px;
}

.project-table thead{
  display: block;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  margin-bottom: 6px;
}

.project-table tbody{
  display: block;
  max-height: 340px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  transition: scrollbar-color 0.3s ease;
}

.project-table tbody:hover{
  scrollbar-color: var(--accent) transparent;
}

.project-table tbody::-webkit-scrollbar{
  width: 6px;
}

.project-table tbody::-webkit-scrollbar-track{
  background: transparent;
}

.project-table tbody::-webkit-scrollbar-thumb{
  background-color: transparent;
  border-radius: 6px;
  transition: background-color 0.3s ease;
}

.project-table tbody:hover::-webkit-scrollbar-thumb{
  background-color: var(--accent);
}

.project-table tbody tr.project-row{
  align-items: start;
  background: rgba(250,250,252,0.7);
  border: 1px solid rgba(0,0,0,0.06);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  scroll-snap-align: start;
}

.project-table tbody{
  scroll-snap-type: y proximity;
}

.project-table tbody tr.project-row:hover{
  background: rgba(255,255,255,0.95);
  transform: translateX(2px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.08);
}

.project-table tbody tr.project-row td{
  padding: 0;
  color: var(--text);
  line-height: 1.5;
  white-space: normal;
  word-break: break-word;
}

/* Colonnes IA / Technologies affichées en pastilles (tags) */
.tag-list{
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.tag{
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

.hidden-clients{
  height: 0;
  opacity: 0;
  overflow: hidden;
  margin-top: 30px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 32px;
  place-items: center;
  border: none;
  box-shadow: none;
  background: transparent;
}

.hidden-clients.expanded{
  padding-bottom: 26px;
}

.expand-projects-btn{
  margin-top: 2px;
  padding: 12px 34px;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  color: var(--accent);
  font-size: 14px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 999px;
  transition: all 0.35s ease;
  transform-style: preserve-3d;
}

.expand-projects-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--accent) 30%, transparent);
}

.expand-projects-btn:active{
  transform: translateY(0);
}

/* Empêche les logos hidden-clients d'attendre une ré-animation */
.hidden-clients.expanded .logo-card{
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

.project-row{
  cursor: pointer;
  transition: border-radius 0.25s ease, border-color 0.25s ease, margin 0.25s ease;
}

/* Ligne + détail fusionnent visuellement en une seule carte continue quand ouverts */
.project-row.row-expanded{
  border-radius: 10px 10px 0 0;
  border-bottom-color: transparent;
  margin-bottom: 0;
}

.project-detail{
  height: 0;
  opacity: 0;
  overflow: hidden;
  display: block;
}

.project-detail td{
  display: block !important;
  width: 100%;
  padding: 0;
  min-width: 0;
}

.project-detail-content{
  padding: 16px 18px;
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  border: 1px solid rgba(0,0,0,0.06);
  border-top: none;
  border-left: 3px solid var(--accent);
  border-radius: 0 0 10px 10px;
  margin-bottom: 8px;
}

.project-detail-inner{
  width: 100%;
  max-width: 100%;
  display: block;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text);
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: normal;
}


.scroll-btn{
  margin-top: 30px;
  padding: 12px 34px;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  color: var(--accent);
  font-size: 14px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 999px;
  transition: all 0.35s ease;
  transform-style: preserve-3d;
}

.scroll-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--accent) 30%, transparent);
}

.scroll-btn:active{
  transform: translateY(0);
}




/* ======================================================
RECHERCHE PROSPECT
====================================================== */
.search-wrap{
  text-align:center;
}

.search-bar{
  display:flex;
  gap:12px;
  max-width:640px;
  margin:26px auto 0;
}

.search-bar input{
  flex:1;
  padding:14px 18px;
  border-radius:999px;
  border:1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  background:rgba(255,255,255,0.7);
  font-size:15px;
  color:var(--text);
  outline:none;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.search-bar input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}

.search-bar button{
  padding:14px 26px;
  border-radius:999px;
  border:1px solid var(--accent);
  background:var(--accent);
  color:#fff;
  font-weight:600;
  letter-spacing:0.4px;
  cursor:pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  white-space:nowrap;
}

.search-bar button:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 26px color-mix(in srgb, var(--accent) 35%, transparent);
}

.search-results{
  margin-top:30px;
  display:flex;
  flex-direction:column;
  gap:16px;
  text-align:left;
}

.search-result-card{
  background:rgba(255,255,255,0.75);
  backdrop-filter:blur(14px);
  border-radius:16px;
  padding:18px 22px;
  border-left:4px solid var(--accent);
  box-shadow:0 10px 30px rgba(0,0,0,0.08);
  cursor:pointer;
  transition:transform 0.25s ease, box-shadow 0.25s ease;
}

.search-result-card:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 40px rgba(0,0,0,0.14);
}

.search-result-card .src-title{
  font-weight:700;
  color:var(--accent);
  font-size:15px;
  margin-bottom:4px;
  text-transform:uppercase;
  letter-spacing:0.5px;
}

.search-result-card .src-resume{
  color:var(--text);
  opacity:0.85;
  font-size:14.5px;
  line-height:1.5;
}

.search-result-card .src-match{
  display:inline-block;
  margin-top:8px;
  font-size:12px;
  font-weight:600;
  color:var(--accent);
  opacity:0.8;
}

.search-empty, .search-no-match{
  color:var(--muted);
  font-size:15px;
  padding:10px 4px;
}

.search-no-match .btn-mail{
  margin-top:14px;
}

.btn-mail{
  display:inline-block;
  margin-top:16px;
  padding:11px 22px;
  border-radius:999px;
  border:1px solid var(--accent);
  background:var(--accent);
  color:#fff !important;
  font-weight:600;
  font-size:13.5px;
  text-decoration:none;
  letter-spacing:0.3px;
  transition:transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-mail:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 26px color-mix(in srgb, var(--accent) 35%, transparent);
}

.project-detail-content .btn-mail{
  display:block;
  width:fit-content;
}

/* ======================================================
RESPONSIVE PREMIUM – MOBILE & TABLETTE
====================================================== */

*{
min-width: 0;
box-sizing: border-box;
}

@media (max-width: 900px){
section{
padding-top: 80px;
padding-bottom: 80px;
}

/* Sections avec du contenu qui peut dépasser la hauteur de l'écran :
   on part du haut (comme une page normale) plutôt que de centrer,
   ce qui évitait que le contenu semble "étiré" ou coupé au milieu,
   et on dégage assez d'espace pour ne pas passer sous le logo/burger */
.panel:not(.hero){
  align-items: flex-start;
  padding-top: 110px;
  padding-bottom: 60px;
}

.section-container{
padding-left: 24px;
padding-right: 24px;
}

.hero{
padding-top: 120px;
padding-bottom: 80px;
}

.hero-logo{
width: 70vw;
max-width: 300px;
}

.domain-grid{
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  max-width: 100%;
}

.domain-card{
  padding: 18px 8px;
}

.domain-icon{
  width: 32px;
  height: 32px;
}

.mission-grid{
  grid-template-columns: 1fr;
  gap: 16px;
}

.mission-card{
  padding: 22px 20px;
}

.tech-grid{
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.tech-badge{
  font-size: 13px;
  padding: 13px 14px 13px 18px;
}

.about-card{
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
}

.about-side{
  width: 100%;
}

.about-bio{
  text-align: left;
}

.hero-title{
font-size: clamp(26px, 6vw, 40px);
text-align: center;
}

.section-title{
font-size: clamp(20px, 5vw, 28px);
letter-spacing: 1px;
}

/* ------------------------------------------------------------------
GLASS CARD GLOBALE
------------------------------------------------------------------ */
.glass-card{
padding: 26px 22px;
border-radius: 20px;
backdrop-filter: blur(10px);
background: rgba(255,255,255,0.18);
border: 1px solid rgba(255,255,255,0.3);
box-shadow: 0 10px 32px rgba(0,0,0,0.18);
}

/* ------------------------------------------------------------------
LOGOS : même taille de cadre pour tous
------------------------------------------------------------------ */
.clients-logos,
.hidden-clients{
display: flex;
flex-direction: column;
gap: 22px;
align-items: center;
width: 100%;
}

.logo-card{
width: 100%;
max-width: 280px; /* largeur identique */
height: 120px; /* hauteur identique */
padding: 18px 26px;
border-radius: 22px;
background: rgba(255,255,255,0.9);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 10px 30px rgba(0,0,0,0.12);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.logo-card:hover{
transform: translateY(-4px);
box-shadow: 0 18px 40px rgba(0,0,0,0.18);
}

.logo-card img{
width: 100%;
height: 100%;
object-fit: contain;
}

/* ------------------------------------------------------------------
COLOR CHIPS / LANGUE : restent visibles et cliquables sur mobile,
juste repositionnées en haut pour ne pas gêner le contenu
------------------------------------------------------------------ */
.color-chips-global{
  left: 50%;
  top: 14px;
  transform: translateX(-50%);
  flex-direction: row;
  gap: 10px;
}

.color-chips-global .chip{
  width: 16px;
  height: 16px;
  opacity: 0.55;
}

.site-header{
  top: 12px;
  right: 16px;
}

.logo-img{
  width: 100px;
}

.global-search-cta-text{
  bottom: 18px;
  right: 16px;
  padding: 11px 18px;
  font-size: 12.5px;
}

#burger{
  z-index: 1001;
}

/* ------------------------------------------------------------------
TABLEAU PROJETS : cartes empilées lisibles en portrait
------------------------------------------------------------------ */
.project-window{
  width: 92vw;
  max-width: 92vw;
  max-height: 82vh;
  overflow-y: auto;
  padding: 24px 18px;
  -webkit-overflow-scrolling: touch;
}

.project-table{
  min-width: 0;
  width: 100%;
  display: block;
}

.project-table thead{
  display: none; /* remplacé par les data-label sur chaque ligne */
}

.project-table tbody{
  display: block;
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

.project-table tbody tr.project-row{
  display: block;
  grid-template-columns: none;
  background: rgba(255,255,255,0.92);
  border-radius: 14px;
  padding: 10px 14px;
  margin-bottom: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  border-bottom: none;
}

.project-table tbody tr.project-row td{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  text-align: left;
  white-space: normal;
  overflow: visible;
  word-break: break-word;
  padding: 9px 0;
  border-bottom: 1px solid rgba(0,0,0,0.07);
  color: #111827;
  font-size: 13.5px;
  line-height: 1.5;
}

.project-table tbody tr.project-row td:last-child{
  border-bottom: none;
}

.project-table tbody tr.project-row td::before{
  content: attr(data-label);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: 0.5px;
  color: var(--accent);
}

.project-table tbody tr.project-row .tag-list{
  justify-content: flex-start;
}

.project-table tbody tr.project-detail{
  grid-template-columns: none;
}

.project-table tbody tr.project-detail td{
  display: block;
  padding: 0;
}

.project-table tbody tr.project-row.row-expanded{
  border-radius: 14px 14px 0 0;
  margin-bottom: 0;
}

.project-detail-content{
  padding: 16px 14px 20px;
  border: none;
  border-top: 1px solid rgba(0,0,0,0.08);
  border-radius: 0 0 14px 14px;
  margin-top: 0;
  margin-bottom: 10px;
  background: rgba(255,255,255,0.92);
}

/* ------------------------------------------------------------------
MODAL / POPUP PROJET : titres visibles comme avant
------------------------------------------------------------------ */
.project-modal,
[class*="project-popup"],
.detail-overlay{
color: #111827 !important;
border-radius: 24px;
box-shadow: 0 20px 60px rgba(0,0,0,0.35);
border: none;
}

/* Titres (SIEMENS, ENSI CAEN…) */
.project-modal h2,
[class*="project-popup"] h2{
color: #0050b3; /* bleu comme avant */
}

/* En-têtes DÉBUT / FIN / CLIENT Redeviennent lisibles */
.project-modal th,
.project-modal td{
background: transparent;
color: #111827;
}

/* ------------------------------------------------------------------
RÉSUMÉ / DÉTAIL : même taille que les dates
------------------------------------------------------------------ */
.project-detail-inner,
.project-description{
font-size: 13.5px !important;
line-height: 1.55;
color: #111827 !important;
padding: 4px 0;
max-height: none;
overflow: visible;
}

/* ------------------------------------------------------------------
Autres éléments
------------------------------------------------------------------ */
.hamburger-menu{
transform: scale(0.9);
}

canvas{
opacity: 0.55;
}

.search-bar{
flex-direction: column;
}

.search-bar button{
width: 100%;
}
}