/*
=======================================================
  CV DE DAMIEN LEMAITRE - FICHIER CSS
  -------------------------------------------------------
  Ce fichier gère le STYLE de ton CV :
  les couleurs, les tailles, les espacements, les formes.

  Comment lire le CSS ?
  Un bloc CSS ressemble à ça :

    .nom-du-bloc {
      propriété: valeur;
    }

  .nom-du-bloc  = l'élément HTML que tu veux styliser
  propriété     = ce que tu veux modifier (couleur, taille...)
  valeur        = la nouvelle valeur

  Les commentaires (comme celui-ci) n'ont aucun effet.
  Ils sont juste là pour t'expliquer.

  ASTUCE : pour changer une couleur, cherche le mot
  "color" ou "background" et change le code couleur.
  Tu peux utiliser : https://colorpicker.me pour trouver des couleurs.
=======================================================
*/
/* Empêche la sélection visuelle du texte */
body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.page::after {
  content: 'Confidentiel- NO COPY';
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-35deg);
  font-size: 3rem;
  color: rgba(255,255,255,0.04);  /* Quasi invisible */
  pointer-events: none;
  z-index: 9999;
  white-space: nowrap;
  font-family: 'Syne', sans-serif;
  font-weight: 800;
}

/* =====================================================
  LES COULEURS GLOBALES (variables CSS)
  -------------------------------------------------------
  Ces variables définissent les couleurs utilisées partout.
  Si tu changes --yellow ici, TOUT ce qui est jaune change.
  C'est très pratique pour modifier le thème d'un coup !

  Comment lire un code couleur ?
  #FFE234 = code hexadécimal (6 lettres/chiffres)
  Tu peux tester tes couleurs sur : colorpicker.me
====================================================== */
:root {
  --yellow:  #FFD60A;   /* utilisé pour les titres et accents */
  --bg:      #bdb8c2cb;   /* couleur du fond de page */
  --card:    #1e1060;   /* couleur des cartes */
  --accent:  #FFD60A;   /* couleur de l'anglais et du stage */
  --green:   #00F5A0;   /* utilisé pour la formation et les langues */
  --white:   #fcfaf8;   /* utilisé pour les matières et les langues */
  --purple:  #f685fa;   /* utilisé pour les jeux vidéo et les outils */
  --gray:    #1e1060;   /* utilisé pour l'en-tête */
}


/* =====================================================
  RÉINITIALISATION ET BASE
  -------------------------------------------------------
  * = "tous les éléments"
  margin/padding = les espaces autour et à l'intérieur des blocs
  box-sizing     = façon de calculer la taille des blocs
====================================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


/* =====================================================
  CORPS DE LA PAGE (body)
  -------------------------------------------------------
  C'est le fond gris que tu vois derrière tout le reste.
====================================================== */
body {
  background: var(--bg);      /* Fond gris souris (défini dans :root) */
  font-family: 'Space Mono', monospace; /* Police de caractère du CV */
  color: white;               /* Couleur du texte par défaut : blanc */
  min-height: 100vh;          /* La page prend au moins toute la hauteur de l'écran */
  padding: 24px 20px;         /* Espace autour du contenu : 24px en haut/bas, 20px sur les côtés */
}


/* =====================================================
  CONTENEUR PRINCIPAL
  -------------------------------------------------------
  .page = la grande boîte qui contient tout le CV
  max-width = largeur maximum
  margin: 0 auto = centré horizontalement
====================================================== */
.page {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 auto;
}


/* =====================================================
  EN-TÊTE DU CV (le bloc avec le nom, les contacts)
====================================================== */
.header {
  display: grid;                          /* Mise en page en grille */
  grid-template-columns: auto 1fr auto;   /* 3 colonnes : avatar | nom | contact */
  align-items: center;                    /* Centré verticalement */
  gap: 24px;                              /* Espace entre les colonnes */
  margin-bottom: 18px;                    /* Espace sous l'en-tête */
  padding: 26px 30px;                     /* Espace intérieur */
  background: var(--gray);               /* Fond gris très foncé */
  border-radius: 22px;                    /* Coins arrondis */
  border: 1px solid rgba(255,255,255,0.08); /* Bordure très légère */
  position: relative;                     /* Nécessaire pour les effets ::before et ::after */
  overflow: hidden;                       /* Cache ce qui dépasse les coins arrondis */
  animation: fadeUp 0.5s ease 0.05s both; /* Animation d'apparition (définie plus bas) */
}

/* La barre colorée tout en haut de l'en-tête (dégradé arc-en-ciel) */
.header::before {
  content: '';                /* Crée un élément vide pour mettre la barre */
  position: absolute;         /* Positionnement absolu par rapport à .header */
  top: 0;
  left: 0;
  right: 0;
  height: 3px;                /* Hauteur de la barre : 3 pixels */
  background: linear-gradient(90deg, var(--white), var(--green), var(--yellow), var(--accent), var(--purple));
}

/* La grille de points en arrière-plan (effet décoratif) */
.header::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(76,201,240,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(76,201,240,0.03) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;       /* La grille ne bloque pas les clics */
}


/* =====================================================
  AVATAR (le grand cercle avec l'emoji)
====================================================== */
.avatar-zone {
  position: relative;   /* Permet de positionner le badge par rapport à l'avatar */
  z-index: 1;           /* Passe au-dessus de la grille décorative */
}

.avatar {
  width: 86px;
  height: 86px;
  border-radius: 50%;                       /* Rend le carré en cercle */
  background: linear-gradient(135deg, #1A1F35, #0D1220); /* Fond dégradé sombre */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;                          /* Taille de l'emoji */
  border: 2px solid rgba(76,201,240,0.45);  /* Bordure bleue semi-transparente */
  box-shadow: 0 0 24px rgba(76,201,240,0.18); /* Halo lumineux bleu */
}

/* Le petit badge jaune "SECONDE 2026" en bas à droite de l'avatar */
.level-badge {
  position: absolute;
  bottom: -5px;
  right: -8px;
  background: var(--yellow);
  color: #111;
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 20px;
  white-space: nowrap;   /* Empêche le texte de se couper sur deux lignes */
}


/* =====================================================
  NOM ET SOUS-TITRE
====================================================== */
.header-name {
  z-index: 1;
}

/* Le petit texte au-dessus du nom "Candidature Stage..." */
.subtitle {
  font-size: 0.7rem;
  color: var(--white);
  letter-spacing: 3px;    /* Espacement entre les lettres */
  text-transform: uppercase;
  margin-bottom: 6px;
}

/* Le grand titre avec le prénom et le nom */
.header-name h3 {
  font-family: 'Syne', sans-serif;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 10px;
  color: white;
}

/* Le prénom "Damien" en jaune (le <span> dans le HTML) */
.header-name h3 span {
  color: var(--yellow);
}


/* =====================================================
  LES ÉTIQUETTES (tags) sous le nom
====================================================== */
.tags {
  display: flex;
  flex-wrap: wrap;   /* Les étiquettes passent à la ligne si elles débordent */
  gap: 6px;
}

/* Style de base pour toutes les étiquettes */
.tag {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  padding: 3px 11px;
  font-size: 0.7rem;
  color: #F8FAFC;
}

/* Étiquette bleue (class="tag hi") */
.tag.hi {
  background: rgba(76,201,240,0.12);
  border-color: rgba(76,201,240,0.3);
  color: var(--white);
}

/* Étiquette rose/rouge pour l'hôpital (class="tag hosp") */
.tag.hosp {
  background: rgba(255,77,109,0.12);
  border-color: rgba(255,77,109,0.35);
  color: #F8FAFC;
}


/* =====================================================
  BLOC CONTACTS À DROITE
====================================================== */
.header-contact {
  display: flex;
  flex-direction: column;  /* Les éléments s'empilent verticalement */
  gap: 7px;
  align-items: flex-end;   /* Alignés à droite */
  z-index: 1;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,0.06);
  padding: 6px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 0.7rem;
  color: #F8FAFC;
  white-space: nowrap;
}


/* =====================================================
  BLOC VIDÉO
====================================================== */
.video-block {
  margin-bottom: 18px;
  background: linear-gradient(135deg, rgba(76,201,240,0.12), rgba(0,245,160,0.08));
  border: 1.5px solid rgba(76,201,240,0.3);
  border-radius: 18px;
  padding: 20px 26px;
  display: grid;
  grid-template-columns: 1fr auto;  /* Texte à gauche, bouton à droite */
  align-items: center;
  gap: 22px;
  position: relative;
  overflow: hidden;
  animation: fadeUp 0.5s ease 0.12s both;
}

/* Le grand triangle ▶ en arrière-plan (décoratif) */
.video-block::before {
  content: '▶';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 100px;
  opacity: 0.04;   /* Très transparent */
  color: white;
  pointer-events: none;
}

/* Le petit label vert "PRÉSENTATION VIDÉO" */
.video-label {
  font-size: 0.7rem;
  color: var(--green);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

/* Le titre du bloc vidéo */
.video-title {
  font-family: 'Syne', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 4px;
  color: white;
}

/* La pastille verte "0:45" à côté du titre */
.video-duration {
  display: inline-block;
  background: rgba(0,245,160,0.12);
  color: var(--green);
  border: 1px solid rgba(0,245,160,0.25);
  font-size: 0.7rem;
  padding: 2px 7px;
  border-radius: 20px;
  margin-left: 5px;
  vertical-align: middle;
}

/* La description sous le titre */
.video-desc {
  font-size: 0.7rem;
  color: #F8FAFC;
  line-height: 1.6;
}

/* Le bouton "Voir ma vidéo" */
.video-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: linear-gradient(135deg, var(--white), var(--green)); /* Dégradé bleu→vert */
  color: #111;
  text-decoration: none;       /* Enlève le soulignement des liens */
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 0.7rem;
  padding: 12px 22px;
  border-radius: 12px;
  transition: all 0.22s;       /* Transition fluide au survol */
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(76,201,240,0.28);
}

/* Effet quand on passe la souris sur le bouton */
.video-btn:hover {
  transform: translateY(-3px);                          /* Monte légèrement */
  box-shadow: 0 10px 28px rgba(76,201,240,0.45);       /* Ombre plus grande */
}


/* =====================================================
  GRILLES (main-grid et bottom-grid)
  -------------------------------------------------------
  display: grid   = mise en page en colonnes
  gap             = espace entre les colonnes
====================================================== */
.main-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
  width: 100%;
  animation: fadeUp 0.5s ease 0.2s both;
}

.bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
  width: 100%;
  animation: fadeUp 0.5s ease 0.34s both;
}


/* =====================================================
  LES CARTES (les blocs blancs/sombres avec du contenu)
====================================================== */
.card {
  background: var(--card);    /* Fond gris foncé */
  border-radius: 16px;
  padding: 18px 20px;
  border: 1px solid rgba(255, 255, 255, 0);
}

/* Le titre de chaque carte ("👤 Profil", "🎓 Matières"...) */
.card-label {
  font-size: 1rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* La ligne qui s'étire après le titre de la carte */
.card-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.08);
}


/* =====================================================
  TEXTE DU PROFIL
====================================================== */
.profil-text {
  font-size: 0.7rem;
  line-height: 1.1;
  color: #F8FAFC;
}

/* Les mots en <strong> dans le profil */
.profil-text strong {
  color: var(--yellow);
  font-weight: 700;
}

/* Les mots en <em> dans le profil */
.profil-text em {
  color: var(--white);
  font-style: normal;  /* Enlève l'italique par défaut */
}


/* =====================================================
  CARTES DES MATIÈRES FORTES
====================================================== */

.matiere-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;  /* ✅ 4 colonnes au lieu de 2 */
  gap: 8px;
}

.matiere-card {
  background: rgba(255, 255, 255, 0.11);
  border: 1px solid #FFD60A;
  border-radius: 11px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 9px;
}

.matiere-icon {
  font-size: 18px;
  flex-shrink: 0;   /* L'icône ne rétrécit pas si la carte est petite */
}

.matiere-name {
  font-size: 0.7rem;
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 2px;
}

.matiere-note {
  font-size: 0.7rem;
  color: #fcf9f8;
}


/* =====================================================
  BARRE INSIGHT (fond jaune translucide)
====================================================== */
.insight-bar {
  margin-bottom: 14px;
  padding: 13px 20px;
  background: rgba(255,226,52,0.06);
  border: 1px solid rgba(255,226,52,0.18);
  border-radius: 13px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.7rem;
  color: #F8FAFC;
  animation: fadeUp 0.5s ease 0.28s both;
}

.insight-bar strong {
  color: var(--yellow);
}

.insight-icon {
  font-size: 20px;
  flex-shrink: 0;
}


/* =====================================================
  CARTES HOBBIES
====================================================== */
.hobby-main {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* 3 colonnes égales */
  gap: 8px;
}

.hobby-card {
  background: rgba(255,255,255,0.04);
  border-radius: 13px;
  padding: 14px 8px;
  text-align: center;
  border: 1px solid rgba(255,255,255,0.07);
  transition: all 0.2s;
  cursor: default;
}

/* Effet au survol de la souris sur une carte hobby */
.hobby-card:hover {
  transform: translateY(-2px);
  background: rgba(11, 230, 66, 0.07);
}

/* Couleurs spécifiques par hobby */
.hobby-card.rubik { border-color: rgba(255,226,52,0.25); background: rgba(255,226,52,0.05); }
.hobby-card.echec  { border-color: rgba(76,201,240,0.25); background: rgba(76,201,240,0.05); }
.hobby-card.jeux   { border-color: rgba(212, 11, 196, 0.28); background: rgba(178, 47, 190, 0.24); }

.hobby-icon {
  font-size: 26px;
  display: block;
  margin-bottom: 6px;
}

.hobby-name {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 0.7rem;
  margin-bottom: 3px;
  color: white;
}

.hobby-desc {
  font-size: 0.7rem;
  color: #F8FAFC;
  line-height: 1.4;
}


/* =====================================================
  GRILLE DES QUALITÉS
====================================================== */
.transversal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.trans-item {
  background: rgba(255, 255, 255, 0.137);
  border: 1px solid rgba(28, 236, 9, 0.5);
  border-radius: 9px;
  padding: 8px 10px;
  font-size: 0.75rem;
  display: flex;
  align-items: flex-start;
  gap: 7px;
  color: #F8FAFC;
  line-height: 2;
}

.trans-icon {
  font-size: 13px;
  flex-shrink: 0;
  margin-top: 1px;
}


/* =====================================================
  BLOC FORMATION
====================================================== */
.formation-item {
  padding: 12px 14px;
  background: rgba(255,255,255,0.04);
  border-radius: 11px;
  border-left: 3px solid var(--green); /* La barre colorée à gauche */
  margin-bottom: 8px;
}

.formation-item:last-child {
  margin-bottom: 0;
}

/* La pastille avec la date */
.formation-year {
  display: inline-block;
  background: var(--green);
  color: #111;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  margin-bottom: 4px;
  font-family: 'Syne', sans-serif;
}

.formation-school {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 0.7rem;
  margin-bottom: 3px;
  color: white;
}

.formation-detail {
  font-size: 0.7rem;
  color: #F8FAFC;
  line-height: 1;
}

.formation-detail strong {
  color: var(--white);
}


/* =====================================================
  BLOC LANGUES
====================================================== */
.lang-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 9px;
  padding: 9px 11px;
  background: rgba(255,255,255,0.04);
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.07);
}

.lang-item:last-child {
  margin-bottom: 0;
}

.lang-flag { font-size: 20px; }

.lang-name {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 0.7rem;
  margin-bottom: 1px;
  color: white;
}

.lang-level {
  font-size: 0.7rem;
  color: #F8FAFC;
}

/* Les petits ronds de niveau de langue */
.lang-dots {
  display: flex;
  gap: 3px;
  margin-top: 3px;
}

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;                 /* Cercle parfait */
  background: rgba(255,255,255,0.12); /* Gris par défaut */
}

/* Rond jaune (pour le français) */
.dot.y { background: var(--yellow); }

/* Rond bleu (pour l'anglais) */
.dot.b { background: var(--white); }


/* =====================================================
  BLOC OBJECTIF DU STAGE
====================================================== */
.stage-block {
  background: #1e1060;
  border: 1.5px solid #2b2610;
  border-radius: 16px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
}

.stage-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

/* L'icône hôpital dans un carré arrondi */
.stage-hosp-icon {
  width: 32px;
  height: 32px;
  background: #FFD60A;
  border: 1px solid rgba(45, 167, 14, 0.3);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.stage-title {
  font-family: 'Syne', sans-serif;
  font-size: 0.8rem;
  font-weight: 800;
  color: #FFD60A;
  line-height: 1;
}

.stage-subtitle {
  font-size: 0.7rem;
  color: #FFD60A;
  margin-top: 1px;
}

.stage-text {
  font-size: 0.7rem;
  color: #F8FAFC;
  line-height: 1
  flex: 1;
}

.stage-text strong {
  color: #FFD60A;
}

/* La pastille verte "Du 15 juin au 26 juin" */
.dispo-badge {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0,245,160,0.10);
  border: 1px solid rgba#FFD60A;
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 0.7rem;
  color: var(--green);
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  align-self: flex-start;
}


/* =====================================================
  PIED DE PAGE
====================================================== */
.footer {
  margin-top: 12px;
  text-align: center;
  font-size: 0.8rem;
  color: #1e1060;
  letter-spacing: 2px;
  text-transform: uppercase;
  animation: fadeUp 0.5s ease 0.42s both;
}


/* =====================================================
  ANIMATION D'APPARITION (fadeUp)
  -------------------------------------------------------
  Quand la page charge, chaque bloc monte doucement.
  "from" = état de départ (invisible, en bas)
  "to"   = état final (visible, à sa place)
====================================================== */
@keyframes fadeUp {
  from {
    opacity: 0;                   /* Invisible */
    transform: translateY(14px);  /* Décalé de 14px vers le bas */
  }
  to {
    opacity: 1;                   /* Visible */
    transform: translateY(0);     /* À sa position normale */
  }
}


/* =====================================================
  STYLE POUR L'IMPRESSION (si tu veux imprimer le CV)
  -------------------------------------------------------
  @media print = ces règles s'appliquent seulement à l'impression
====================================================== */
@media print {
  body {
    padding: 6px;
    /* Ces lignes forcent l'imprimante à garder les couleurs de fond */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* =====================================================
  RESPONSIVE : adaptation automatique à la taille d'écran
  -------------------------------------------------------
  @media = ces règles s'appliquent seulement si l'écran
  est plus petit que la largeur indiquée.
  768px = taille d'une tablette
  480px = taille d'un téléphone
====================================================== */

/* Tablette : les colonnes passent à 1 seule */
@media (max-width: 768px) {
  .main-grid {
    grid-template-columns: 1fr;   /* 1 colonne au lieu de 2 */
  }
  .bottom-grid {
    grid-template-columns: 1fr;
  }
  .matiere-grid {
    grid-template-columns: 1fr 1fr;   /* 2 colonnes au lieu de 4 */
  }
  .header {
    grid-template-columns: auto 1fr;  /* Contacts passent sous le nom */
    grid-template-rows: auto auto;
  }
  .header-contact {
    grid-column: 1 / -1;              /* Prend toute la largeur */
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
  }
}

/* Téléphone : encore plus compact */
@media (max-width: 480px) {
  body {
    padding: 10px 8px;
  }
  .header-name h1 {
    font-size: 1.4rem;
  }
  .matiere-grid {
    grid-template-columns: 1fr 1fr;
  }
  .hobby-main {
    grid-template-columns: 1fr 1fr 1fr;  /* Reste sur 3 colonnes */
  }
  .transversal-grid {
    grid-template-columns: 1fr;           /* 1 colonne */
  }
}