/* reset simple : tailles plus prévisibles */
* {
  box-sizing: border-box;
}

/* évite que la page soit plus petite que l’écran */
html,
body {
  min-height: 100%;
}

/* base du site  */
body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #06142a;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding-top: 72px; /* laisse la place à la topbar en mobile */
}

/* images responsives */
img {
  max-width: 100%;
  display: block;
}


/* Barre du haut : mobile par défaut */
.topbar {
  position: fixed; /* reste collée en haut */
  top: 0;
  left: 0;
  width: 56px;
  height: 56px;
  padding: 8px;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10; /* au-dessus du contenu */
}

/* zone logo (en haut à droite en mobile) */
.logo-site {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #0d213b;
  font-weight: 700;
  position: fixed;
  top: 10px;
  right: 12px;
  z-index: 15; /* au-dessus de la topbar */
  background: #06142a;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}

/* bouton burger (mobile) */
.menu-toggle {
  display: block;
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 20; /* au-dessus de tout */
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* taille de l’icône burger */
.menu-toggle img {
  width: 34px;
  height: 34px;
}

/* image du logo (rond + contour) */
.logo {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px #4ee8c3;
}

/* menu vertical (caché tant que menu fermé) */
.menu-haut {
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  display: none; /* affiché quand body.menu-open */
  padding-top: 14px;
}

/* style des liens du menu */
.menu-haut a {
  text-decoration: none;
  color: #000000;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  display: grid;
  gap: 6px;
  justify-items: center;
  width: 70px;
  transition: transform 140ms ease, filter 140ms ease, color 140ms ease;
}

/* tailles des icônes du menu */
.menu-haut a img {
  width: 30px;
  height: 30px;
  transition: transform 140ms ease;
}

.menu-haut a::after {
  content: "";
  display: block;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: #000;
  transform: scaleX(0);
  transition: transform 180ms ease;
}

.menu-haut a:hover {
  transform: translateY(-2px) scale(1.03);
  filter: brightness(0.9);
  color: #000;
}

.menu-haut a:hover img {
  transform: scale(1.06);
}

.menu-haut a:hover::after {
  transform: scaleX(1);
}


/* Bouton langue */
.translate {
  position: relative; /* sert de repère à .liste-langue */
  width: 100%;
  display: none; /* affiché quand body.menu-open */
  justify-content: center;
}

/* bouton de traduction */
.bouton-langue {
  width: 38px;
  height: 38px;
  background: #4ee8c3;
  border-radius: 6px;
  border: none;
  display: grid;
  place-items: center;
  cursor: pointer;
}

/* menu déroulant des langues (caché de base) */
.liste-langue {
position: absolute;
top: 45px;
right: 0;
background: #4ee8c3;     
color: #fff;           /* blanc */
border-radius: 8px;
padding: 6px;
display: none; /* affiché via .translate.open */
flex-direction: column;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14);
}

/* quand JS ajoute .open  on affiche la liste */
.translate.open .liste-langue {
  display: flex;
}

/* liens des langues */
.liste-langue a {
  padding: 6px 10px;
  text-decoration: none;
  color: #ffffff;
  font-size: 14px;
  border-radius: 6px;
}

/* hover sur une langue */
.liste-langue a:hover {
  background: #f1f4f9;
  color:rgb(0, 0, 0);
}

/* centrage du menu langue en mobile (au lieu de right:0) */
.liste-langue {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}


/* Accueil */
.zone-accueil {
  text-align: center;
  padding: 76px 18px 56px; /* espace top + bas */
}

/* bloc haut : photo + texte (en colonne en mobile) */
.bloc-haut {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  max-width: 920px;
  margin: 0 auto;
}

/* taille photo en mobile */
.photo-profil {
  width: 80px;
}

/* titres accueil */
.texte-accueil h1 {
  font-size: 2rem;
  margin: 0 0 6px;
}

.texte-accueil h2 {
  margin: 0 0 10px;
  font-size: 1.2rem;
  color: #cfd8f2;
}

.texte-accueil p {
  margin: 0 0 16px;
  color: #cfd8f2;
}

/* bouton principal */
.bouton-accueil {
  display: inline-block;
  padding: 10px 18px;
  background: #4ee8c3;
  color: #001821;
  text-decoration: none;
  border-radius: 10px;
  font-weight: bold;
  transition: transform 140ms ease, box-shadow 140ms ease;
}

.bouton-accueil:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.22);
}

/* page présentation : espace entre sections (fonctionne si c’est un flex/grid) */
.page-presentation {
  gap: 28px;
}

/* bloc intro présentation */
.presentation{
  padding: 18px 10px 10px;
  text-align: left;
}

.presentation h1 {
  font-size: 1.2rem;
  line-height: 1.5;
  margin: 0;
  color: #e8eefc;
}

/* grille de cartes présentation */
.presentation-grid {
  display: grid;
  gap: 20px;
  align-items: start;
}

/* carte (fond + bord + padding) */
.presentation-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 14px;
  padding: 14px;
  display: grid;
  gap: 12px;
}

.presentation-card img {
  width: 100%;
  border-radius: 10px;
}

.presentation-card p {
  margin: 0;
  color: #cfd8f2;
  line-height: 1.5;
  font-size: 0.95rem;
}

.page-veille {
  background:
    radial-gradient(circle at 18% 28%, rgba(78, 232, 195, 0.16), transparent 44%),
    radial-gradient(circle at 80% 82%, rgba(78, 232, 195, 0.12), transparent 46%),
    #06142a;
  color: #e8ecff;
  position: relative;
}

.page-veille::before,
.page-veille::after {
  content: "";
  position: fixed;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  filter: blur(18px);
  opacity: 0.28;
  pointer-events: none;
  z-index: 0;
}

.page-veille::before {
  top: 120px;
  left: -120px;
  background: radial-gradient(circle at center, rgba(78, 232, 195, 0.35), transparent 62%);
}

.page-veille::after {
  bottom: -140px;
  right: -80px;
  background: radial-gradient(circle at center, rgba(78, 200, 255, 0.22), transparent 62%);
}

.veille-page {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 26px 16px 74px;
  display: grid;
  gap: 26px;
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.32);
}

.veille-hero {
  display: grid;
  gap: 10px;
  text-align: center;
  justify-items: center;
}

.veille-kicker {
  margin: 0;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #9fc7ff;
}

.veille-hero h1 {
  margin: 0;
  font-size: clamp(1.5rem, 1.3vw + 1.3rem, 2rem);
  line-height: 1.35;
  letter-spacing: 0.01em;
}

.veille-grid {
  display: grid;
  gap: 22px;
  grid-template-columns: 1fr;
  align-items: start;
}

.veille-card {
  background: rgba(9, 26, 46, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.26);
}

.veille-card h2 {
  margin: 0 0 10px;
  font-size: 1.08rem;
  color: #f6f7ff;
}

.veille-card p {
  margin: 0;
  color: #d2dbf5;
  line-height: 1.6;
  font-size: 0.98rem;
}

.veille-card strong {
  color: #ffffff;
}

.veille-list {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.veille-list li {
  position: relative;
  padding-left: 16px;
  color: #dfe6ff;
  line-height: 1.6;
}

.veille-list li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: #8bd2ff;
}

.veille-perspectives {
  margin: 2px auto 0;
  padding: 20px 16px;
  background: rgba(9, 26, 46, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  text-align: center;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.26);
  display: grid;
  gap: 10px;
  max-width: 720px;
}

.veille-perspectives h3 {
  margin: 0;
  font-size: 1.08rem;
  color: #f6f7ff;
}

.veille-perspectives .veille-list {
  margin-top: 4px;
}

.veille-perspectives .veille-list li {
  max-width: 880px;
  margin: 0 auto;
}

@media (min-width: 900px) {
  .veille-page {
    max-width: 1180px;
    padding: 36px 22px 90px;
    gap: 32px;
    background: rgba(255, 255, 255, 0.02);
  }

  .veille-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 26px;
  }

  .veille-card {
    padding: 22px;
  }

  .veille-hero h1 {
    font-size: 2.1rem;
  }

  .veille-perspectives {
    padding: 26px 24px;
  }

}

/* carte stage*/
.stage-card {
  display: grid;
  gap: 140px;
  grid-template-columns: 1fr; /* 1 colonne en mobile */
}

.stage-texte {
  display: grid;
  gap: 10px;
}

/* section parcours */
.parcours-section {
  padding: 10px 0 26px;
  display: grid;
  gap: 16px;
}

.parcours-section h2 {
  margin: 0;
  text-align: left;
  color: #e8eefc;
  font-size: 1.2rem;
  padding-left: 2px;
}

/* grille parcours (empilée en mobile) */
.parcours-grid {
  display: grid;
  gap: 18px;
}

.parcours-col {
  display: grid;
  gap: 10px;
  text-align: center;
}

/* “entête” de chaque colonne */
.parcours-head {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 12px;
  color: #0d0a1f;
  font-weight: 700;
  background: linear-gradient(135deg, #b960ff, #5860ff);
}

/* items du parcours */
.parcours-item {
  padding: 12px 14px;
  border-radius: 12px;
  color: #f7f3ff;
  font-weight: 700;
  background: linear-gradient(135deg, rgba(38, 12, 72, 0.92), rgba(12, 22, 42, 0.9));
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

/* rapproche les items entre eux */
.parcours-item + .parcours-item {
  margin-top: -2px;
}

/* icône des colonnes */
.parcours-icon {
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
}

.parcours-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* variante bouton (Lilly) */
.bouton-lilly {
  display: inline-block;
  margin-top: 6px;
  background: #12c48b;
  color: #00232a;
}

/* section appétences (2 blocs empilés en mobile) */
.aptences-section {
  display: grid;
  gap: 22px;
  padding: 10px 0 14px;
}

/* les 2 blocs ont le même style */
.aptences-col,
.experiences-col {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 14px;
  padding: 16px;
  display: grid;
  gap: 14px;
}

.aptences-col h2,
.experiences-col h2 {
  margin: 0;
  color: #e8eefc;
}

/* liste sans puces */
.aptences-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  color: #cfd8f2;
  line-height: 1.5;
  font-size: 0.95rem;
}

/* bloc expériences */
.experiences-col {
  position: relative;
  gap: 12px;
}

.experience-item h3 {
  margin: 0 0 6px;
  color: #b28cff;
  font-size: 1rem;
}

.experience-item p {
  margin: 0;
  color: #cfd8f2;
  line-height: 1.5;
  font-size: 0.95rem;
}

/* figure switch réseau (centrée) */
.reseau-figure {
  margin: 0;
  display: grid;
  justify-items: center;
  position: relative;
}

.reseau-figure img {
  width: 180px;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

/* section compétences techniques */
.apetences-techniques {
  padding: 12px 0 26px;
  display: grid;
  gap: 18px;
}

.apetences-techniques h2 {
  margin: 0;
  text-align: left;
  color: #e8eefc;
}

/* grille de compétences (1 colonne en mobile) */
.grille-competences {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
  max-width: 240px;
  margin: 0 auto;
}

/* style commun des cartes */
.carte-competence {
  padding: 12px 14px;
  border-radius: 12px;
  color: #f7f3ff;
  font-weight: 700;
  text-align: left;
  line-height: 1.35;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.06);
  display: grid;
  align-items: center;
  min-height: 76px;
}

/* cartes “accent” (violet) */
.carte-competence-accent {
  background: linear-gradient(135deg, #b960ff, #5860ff);
  color: #0d0a1f;
  grid-template-columns: auto 1fr;
  gap: 10px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.25), inset 0 2px 0 #3af5e2;
}

/* cartes “soft” (fond sombre) */
.carte-competence-soft {
  background: linear-gradient(135deg, rgba(38, 12, 72, 0.92), rgba(12, 22, 42, 0.9));
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.titre-competence {
  display: block;
}

/* centres d’intérêt */
.centres-section {
  padding: 10px 0 30px;
  display: grid;
  gap: 20px;
  max-width: 320px;
  margin: 0 auto;
}

.centres-section h2 {
  margin: 0;
  text-align: left;
  color: #e8eefc;
}

/* un centre = texte + image (empilé en mobile) */
.centre-item {
  display: grid;
  gap: 14px;
  align-items: center;
  grid-template-columns: 1fr;
}

.centre-texte {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 14px;
  color: #cfd8f2;
  line-height: 1.6;
}

.centre-visuel {
  margin: 0;
}

.centre-visuel img {
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.32);
}


/* Projets */
.section-projets {
  padding: 40px 16px 60px;
  text-align: center;
}

/* flèche pour scroller */
.icone-projets img {
  width: 60px;
  margin: 0 auto 10px;
  cursor: pointer;
}

.titre-projets {
  margin-bottom: 20px;
}

/* grille des projets (1 colonne mobile) */
.grille-projets {
  display: grid;
  gap: 15px;
  grid-template-columns: 1fr;
}

/* style d’un projet */
.projet {
  background: linear-gradient(135deg, #311b92, #8a2be2);
  padding: 18px;
  border-radius: 12px;
  display: block;
  color: #ffffff;
  text-decoration: none;
  font-weight: bold;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.projet:hover {
  transform: translateY(-4px) scale(1.015);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
}

/* Page Projet 1 */
.page-projet {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px 16px 70px;
  display: grid;
  gap: 22px;
  position: relative;
  z-index: 1;
}

.projet-figure {
  max-width: 1100px;
  margin: 72px auto 8px;
  padding: 0 16px;
  display: grid;
  gap: 8px;
  justify-items: center;
}

.img-projet {
  width: 100%;
  max-width: 920px;
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

.projet-figure figcaption {
  color: #cfd8f2;
  font-size: 0.95rem;
}

.projet-hero {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  padding: 18px 16px;
  display: grid;
  gap: 10px;
  text-align: center;
  justify-items: center;
  max-width: 820px;
  margin: 0 auto;
}

.projet-kicker {
  margin: 0;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9fc7ff;
}

.projet-hero h1 {
  margin: 0;
  font-size: clamp(1.4rem, 1.4vw + 1rem, 2rem);
  line-height: 1.3;
}

.projet-hero p {
  margin: 0;
  color: #cfd8f2;
  line-height: 1.6;
}

.projet-grid {
  display: grid;
  gap: 18px 18px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.projet-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 14px;
  padding: 16px;
  display: grid;
  gap: 10px;
  color: #e8eefc;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28);
  position: relative;
  overflow: hidden;
}

.projet-card h2 {
  margin: 0;
  font-size: 1.05rem;
  color: #ffffff;
}

.projet-card p {
  margin: 0;
  color: #cfd8f2;
  line-height: 1.6;
}

.projet-list {
  margin: 0;
  padding-left: 18px;
  color: #cfd8f2;
  line-height: 1.6;
  display: grid;
  gap: 6px;
}

.projet-list li {
  position: relative;
}

.projet-list li::before {
  content: "•";
  color: #4ee8c3;
  position: absolute;
  left: -14px;
}

.method-list {
  counter-reset: step;
  padding-left: 0;
  list-style: none;
}

.method-list li {
  counter-increment: step;
  padding-left: 38px;
  min-height: 28px;
}

.method-list li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 2px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4ee8c3, #8bd2ff);
  color: #0b1b2b;
  font-weight: 800;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
}

.tech-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tech-chip {
  display: inline-block;
  padding: 8px 10px;
  border-radius: 12px;
  background: linear-gradient(135deg, #b960ff, #5860ff);
  color: #0d0a1f;
  font-weight: 700;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25), inset 0 2px 0 #3af5e2;
}

.projet-card.resultat {
  background: linear-gradient(135deg, rgba(78, 232, 195, 0.16), rgba(78, 200, 255, 0.12));
  border-color: rgba(78, 232, 195, 0.26);
  color: #0d213b;
}

.projet-card.accent {
  border-image: linear-gradient(135deg, #4ee8c3, #8bd2ff) 1;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32);
}

.projet-card.accent::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 20%, rgba(78, 232, 195, 0.15), transparent 48%),
              radial-gradient(circle at 80% 10%, rgba(139, 210, 255, 0.12), transparent 45%);
  pointer-events: none;
}

.projet-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.meta-chip {
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #e8eefc;
  font-weight: 600;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(4px);
}

@media (min-width: 900px) {
  .page-projet {
    padding: 40px 20px 90px;
    gap: 26px;
  }

  .projet-figure {
    margin-top: 100px;
    padding: 0 20px;
  }

  .projet-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .projet-card.resultat {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  .page-projet {
    padding: 16px 14px 60px;
    gap: 18px;
  }

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

  .projet-card {
    padding: 14px;
  }
}


/* Bas de page */
.zone-infos {
  background: #E6F1FF;
  color: #000000;
  display: flex;
  flex-direction: column; /* empilé en mobile */
  align-items: flex-start;
  gap: 1px;
  border-radius: 0 0 14px 14px;
  padding: 5px; 
}

/* bloc droite (linkedin + copyright) */
.infos-droite {
  display: flex;
  align-items: center;
  gap: 12px;
}

.infos-gauche p,
.infos-droite p {
  margin: 4px 0;
}

/* petites icônes dans le footer */
.icone-texte {
  width: 18px;
  vertical-align: middle;
}

.lien-linkedin img {
  width: 38px;
}

.lien-mentions {
  color: #000;
  font-weight: 600;
  text-decoration: none;
}

.lien-mentions:hover {
  text-decoration: underline;
}

/* bouton téléchargement CV */
.download-cv {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #000;
  font-weight: 700;
  text-decoration: none;
  padding: 8px 12px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 10px;
  background: #fff;
  line-height: 1.1;
  min-height: 38px;
  font-size: 0.95rem;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.download-cv img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.download-cv:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
}

/* Page contact */
.contact-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 16px 50px;
  gap: 20px;
}

.contact-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
}

.contact-form {
  display: grid;
  gap: 12px;
}

.contact-form label {
  display: grid;
  gap: 6px;
  color: #e8ecff;
  font-weight: 600;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: #e8ecff;
  border-radius: 10px;
  padding: 10px;
  font-size: 1rem;
}

.contact-form textarea {
  resize: vertical;
}

.contact-status {
  margin: 4px 0 0;
  min-height: 18px;
  font-size: 0.95rem;
}

@media (min-width: 900px) {
  .contact-page {
    max-width: 900px;
    padding: 40px 20px 60px;
  }

  .contact-card {
    padding: 20px;
  }
}

/* main = contenu qui prend l’espace restant */
main {
  margin-left: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  padding: 0 16px;
}

/* limite la largeur de chaque section */
main > section {
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}


/* Ouverture menu mobile (liée à JS : body.menu-open) */
body.menu-open .topbar {
  width: 90px;
  height: 100vh;
  background: #e5f1ff;
  border-radius: 0 12px 12px 0;
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.12);
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  padding: 18px 10px;
}

/* quand menu ouvert → on affiche menu + traduction */
body.menu-open .menu-haut,
body.menu-open .translate {
  display: flex;
}

body.menu-open .menu-haut {
  padding-top: 52px; /* laisse de la place sous le burger */
}

/* quand menu ouvert → on décale le contenu vers la droite */
body.menu-open main {
  margin-left: 105px;
}

/* footer (si tu en ajoutes un) */
footer {
  margin-top: auto;
  text-align: center;
  padding: 16px;
  background: #e5f1ff;
  color: #0d213b;
}


/* Desktop*/
@media (min-width: 1200px) {

  /* topbar en mode horizontal */
  .topbar {
    background: #F2F1ED;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    position: sticky;
    width: auto;
    height: auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-radius: 0;
  }

  /* logo redevient “normal” (plus fixed) */
  .logo-site {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #0d213b;
    font-weight: 700;
    position: static;
    background: #06142a;
    padding: 0;
    border-radius: 50%;
    box-shadow:  0 0 2px rgba(255, 255, 255, 0.12);
    object-fit: cover;
  }

  /* plus besoin du burger en desktop */
  .menu-toggle {
    display: none;
    position: static;
  }

  /* menu en ligne */
  .menu-haut {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
    padding-top: 0;
    width: auto;
  }

  .menu-haut a {   /* lien à l'intérieur du menu */
    width: auto;
    font-size: 14px;
  }

  /* bouton langue visible en desktop */
  .translate {
    display: block;
    width: auto;
  }

  /* plus besoin du padding-top en desktop */
  body {
    padding-top: 0;
  }

  /* dropdown langue aligné à droite en desktop */
  .liste-langue {
    left: auto;
    right: 0;
    transform: none;
  }

  main {
    margin-left: 0;
    padding: 0 20px;
  }

  /* accueil : plus d’espace et aligné à gauche */
  .zone-accueil {
    padding: 90px 20px 70px;
    text-align: left;
  }

  /* photo + texte côte à côte */
  .bloc-haut {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 36px;
  }

  .photo-profil {
    width: 120px;
  }

  .texte-accueil {
    max-width: 560px;
  }

  /* projets : aligné à gauche et grille auto (evite que le contenu soit colé au bord)*/
  .section-projets {
    padding: 40px 20px 60px;
    text-align: left;
  }

  .grille-projets {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }

  .page-presentation {
    gap: 34px;
  }

  /* intro présentation centrée */
  .presentation {
    padding: 26px 0 10px;
    text-align: center;
  }

  .presentation h1 {
    font-size: 1.35rem;
    margin: 0 auto;
    max-width: 960px;
  }

  /* cartes sur 2 colonnes */
  .presentation-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
  }

  /* stage : image + texte en 2 colonnes */
  .stage-card {
    grid-template-columns: 1.05fr 1fr;
    align-items: center;
  }

  .presentation-card {
    padding: 18px;
  }

  /* parcours sur 4 colonnes */
  .parcours-section {
    padding: 14px 0 32px;
  }

  .parcours-section h2 {
    font-size: 1.35rem;
    text-align: center;
    padding-left: 0;
  }

  .parcours-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }

  .parcours-head,
  .parcours-item {
    text-align: center;
    font-size: 0.98rem;
  }

  /* appétences en 2 colonnes */
  .aptences-section {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
  }

  /* switch réseau prend toute la largeur de la grille */
  .reseau-figure {
    grid-column: 1 / -1;
    padding-top: 4px;
  }

  .reseau-figure img {
    width: 210px;
  }

  .apetences-techniques {
    padding: 18px 0 30px;
  }

  .apetences-techniques h2 {
    text-align: center;
  }

  /* compétences sur 4 colonnes */
  .grille-competences {
    gap: 14px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: 1100px;
    margin: 0 auto;
  }

  /* grille 4colonne x3ligne pc pour carte de compétence */
  .competence-html { grid-column: 1; grid-row: 1; }
  .competence-python { grid-column: 2; grid-row: 1; }
  .competence-arduino { grid-column: 3; grid-row: 1; }
  .competence-virtualisation { grid-column: 4; grid-row: 1; }

  .competence-site { grid-column: 1; grid-row: 2; }
  .competence-script { grid-column: 2; grid-row: 2; }
  .competence-conception { grid-column: 3; grid-row: 2; }
  .competence-test { grid-column: 4; grid-row: 2; }

  .competence-jeux { grid-column: 1; grid-row: 3; }
  .competence-base { grid-column: 2; grid-row: 3; }
  .competence-nfc { grid-column: 3; grid-row: 3; }
.competence-virtenv { grid-column: 4; grid-row: 3; }

  /* centres : plus de limite de largeur */
  .centres-section {
    gap: 26px;
    max-width: none;
    margin: 0;
  }

  /* texte + image côte à côte */
  .centre-item {
    grid-template-columns: 1fr 1.05fr;
    gap: 26px;
  }

  .centre-texte {
    padding: 16px;
    font-size: 1rem;
  }

  /* footer en ligne en desktop */
  .zone-infos {
    padding: 5px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    background: #F2F1ED;
    color: #000000;
  }
}

/* Mentions légales */
.mentions-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 16px 50px;
  gap: 22px;
}

.mentions-page .presentation {
  text-align: center;
  padding: 14px 0 10px;
}

.mentions-page h1 {
  margin: 0 0 6px;
}

.mentions-meta {
  margin: 4px 0;
  color: #cfd8f2;
}

.mentions-grid {
  display: grid;
  gap: 18px;
}

@media (min-width: 900px) {
  .mentions-page {
    padding: 40px 20px 60px;
    gap: 26px;
  }

  .mentions-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
}