/* =============================================
   THEME OVERRIDE — swap black<->white, green->blue
   ============================================= */

/* 1) Variables: template (style.css) */
:root {
  /* ZYAN template vars */
  --colorPrimary: #009dff;     /* was green (#55e6a5) */
  --colorWhite: #000000;       /* swap white -> black */
  --colorBlack: #ffffff;       /* swap black -> white */
  --bodyBg: #ffffff;           /* body background now white */
  --bodyColor: #333333;        /* text body darker on white bg */
}

/* 2) Variables: Bootstrap */
:root, [data-bs-theme=light] {
  --bs-white: #000000;               /* white -> black */
  --bs-black: #ffffff;               /* black -> white */
  --bs-body-bg: #ffffff;             /* page bg -> white */
  --bs-body-color: #000000;          /* text -> black */

  /* green -> blue */
  --bs-green: #009dff;
  --bs-success: #009dff;
  --bs-success-rgb: 0,157,255;
  --bs-link-color: #009dff;
  --bs-link-color-rgb: 0,157,255;
  --bs-link-hover-color: #0073bf;
  --bs-link-hover-color-rgb: 0,115,191;
}

/* 3) Global inversion to catch plain declarations */
html, body {
  background-color: #ffffff !important;
  color: #000000 !important;
}

/* 4) Swap common utility classes */
.text-white { color: #000000 !important; }
.text-black, .text-dark { color: #ffffff !important; }
.bg-white, .bg-light { background-color: #000000 !important; color: #ffffff !important; }
.bg-black, .bg-dark { background-color: #ffffff !important; color: #000000 !important; }
.border-white { border-color: #000000 !important; }
.border-black, .border-dark { border-color: #ffffff !important; }

/* 5) Buttons & badges (success->blue) */
.btn-success,
.btn-success:hover,
.btn-success:focus,
.badge-success {
  background-color: #009dff !important;
  border-color: #009dff !important;
  color: #ffffff !important;
}

/* 6) Links */
a, a:hover, a:focus { color: #009dff !important; }

/* 7) SVG from your style.css */
.svg-icon { 
  fill: #ffffff !important;   /* black -> white */
  stroke: #000000 !important; /* white -> black */
}
.svg-icon:hover {
  fill: #000000 !important;
  stroke: #000000 !important;
}

/* 8) Common hard-coded colors */
[style*="color: black"] { color: #ffffff !important; }
[style*="color:#000"] { color: #ffffff !important; }
[style*="color:#000000"] { color: #ffffff !important; }

[style*="background: black"],
[style*="background-color: black"],
[style*="background:#000"],
[style*="background:#000000"],
[style*="background-color:#000"],
[style*="background-color:#000000"] {
  background-color: #ffffff !important; color: #000000 !important;
}

[style*="color: white"] { color: #000000 !important; }
[style*="color:#fff"], [style*="color:#ffffff"] { color: #000000 !important; }

[style*="background: white"],
[style*="background-color: white"],
[style*="background:#fff"],
[style*="background:#ffffff"],
[style*="background-color:#fff"],
[style*="background-color:#ffffff"] {
  background-color: #000000 !important; color: #ffffff !important;
}

/* green-ish to blue (common hexes) */
[style*="#55e6a5"],
[style*="#00ff00"],
[style*="#008000"],
[style*="green"] {
  color: #009dff !important;
}
[style*="background:#55e6a5"],
[style*="background:#00ff00"],
[style*="background:#008000"],
[style*="background-color:#55e6a5"],
[style*="background-color:#00ff00"],
[style*="background-color:#008000"],
[style*="background: green"],
[style*="background-color: green"] {
  background-color: #009dff !important;
}

/* 9) Tables, cards, inputs to match the light theme */
.table { color: inherit !important; }
.card, .panel, .modal-content, .dropdown-menu {
  background-color: #ffffff !important; color: #000000 !important; border-color: #000000 !important;
}
.form-control, input, textarea, select {
  background-color: #ffffff !important; color: #000000 !important; border-color: #000000 !important;
}
.form-control:focus, input:focus, textarea:focus, select:focus {
  box-shadow: 0 0 0 .2rem rgba(0,157,255,.25) !important;
  border-color: #009dff !important;
}

/* 10) Progress / scroll button (uses --bodyColor) */
.progress { box-shadow: inset 0 0 0 2px rgba(255,255,255,0.2) !important; }
.progress::after, .progress:hover::after { color: #000000 !important; }
.progress svg.progress-svg path { stroke: #000000 !important; }

/* === Contact icons: white fill + black outline === */
.tf__contact_2_text svg,
.tf__contact_2_text .svg-icon {
  fill: none !important;
}

.tf__contact_2_text svg *,
.tf__contact_2_text .svg-icon * {
  stroke: #000000 !important;
  stroke-width: 2.5px !important; /* adjust if too bold/thin */
  stroke-linejoin: round !important;
  stroke-linecap: round !important;
  paint-order: stroke fill; /* outline drawn before fill for crisp edge */
}

/* Font Awesome fallback (if an icon is a font glyph) */
.tf__contact_2_text i[class*="fa-"],
.tf__contact_2_text i[class^="fa"] {
  color: #ffffff !important;
  -webkit-text-stroke: 2px #000000; /* outline around the glyph */
  text-stroke: 2px #000000;         /* non-standard fallback */
}

/* <img> icons fallback (e.g., white PNG/SVG via <img>): fake outline via drop-shadows */
.tf__contact_2_text img {
  filter: drop-shadow(1px 0 0 #000000)
          drop-shadow(-1px 0 0 #000000)
          drop-shadow(0 1px 0 #000000)
          drop-shadow(0 -1px 0 #000000);
}

.tf__skills_2 { 
  background: transparent !important; 
}
.tf__contact_2_text { 
  background: transparent !important; 
}

a.common_btn {
  background: #ffffff !important;
  color: #009dff !important;
  border: 2px solid #009dff !important;   /* <= bordure bleue */
  text-decoration: none !important;
  border-radius: 12px !important;   /* ajuste (8px, 12px, 16px...) */ 
}

/* L’icône suit la couleur du texte */
a.common_btn i,
a.common_btn svg {
  color: inherit !important;
  fill: currentColor;     /* si SVG rempli */
  stroke: currentColor;   /* si SVG en trait */
}

/* Inversion au survol/focus */
a.common_btn:hover,
a.common_btn:focus {
  background: #009dff !important;
  color: #ffffff !important;              /* <= texte blanc au hover */
  border-color: #ffffff !important;       /* <= contour blanc au hover */
}

/* Onglets "Mes compétences" — style identique au bouton CV */
.tf__skills_2 .nav .nav-item .nav-link,
.tf__skills_2 .nav .nav-item button {
  background: #ffffff !important;           /* fond blanc */
  color: #009dff !important;                 /* texte bleu */
  border: 2px solid #009dff !important;      /* contour bleu */
  border-radius: 12px !important;            /* bords arrondis (ajuste si besoin) */
  font-weight: 600;
  text-decoration: none !important;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

/* Hover / Focus : inversion des couleurs */
.tf__skills_2 .nav .nav-item .nav-link:hover,
.tf__skills_2 .nav .nav-item .nav-link:focus,
.tf__skills_2 .nav .nav-item button:hover,
.tf__skills_2 .nav .nav-item button:focus {
  background: #009dff !important;
  color: #ffffff !important;
  border-color: #009dff !important;
}

/* Onglet actif (sélectionné) : mêmes couleurs inversées */
.tf__skills_2 .nav .nav-item .nav-link.active,
.tf__skills_2 .nav .nav-item button.active,
.tf__skills_2 .nav .nav-item .nav-link[aria-selected="true"],
.tf__skills_2 .nav .nav-item button[aria-selected="true"] {
  background: #009dff !important;
  color: #ffffff !important;
  border-color: #009dff !important;
}

/* Accessibilité focus clavier */
.tf__skills_2 .nav .nav-item .nav-link:focus-visible,
.tf__skills_2 .nav .nav-item button:focus-visible {
  outline: 2px solid #009dff;
  outline-offset: 2px;
}

/* ===== Menu vertical, mêmes styles que l’horizontal ===== */
.cv-page .vertical {
  position: fixed;              /* ne bouge pas au scroll */
  top: 0;                       /* ajuste si tu as un header (ex: 80px) */
  left: 0;
  display: flex;
  flex-direction: column;       /* vertical */
  gap: 14px;                    /* espacement entre boutons */
  width: 220px;                 /* largeur du menu */
  padding: 0;
  margin: 0;
  list-style: none;
  background: transparent;
  z-index: 1000;
}

.cv-page .vertical li { list-style: none; }

.cv-page .vertical a {
  display: inline-flex;         /* comme tes boutons */
  justify-content: center;
  align-items: center;
  padding: 10px 20px;           /* même “cushion” que l’horizontal */
  min-width: 180px;             /* optionnel : largeur mini des boutons */
  max-width: 260px;
  margin-left: 20px;
  margin-top: 20px;

  background: #ffffff;          /* fond blanc */
  color: #009dff;
  border: 2px solid #009dff;    /* contour bleu comme l’horizontal */
  border-radius: 12px;          /* bords arrondis */
  text-decoration: none;
  font-weight: 600;

  transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s;
}

.cv-page nav,
.cv-page .vertical{
  border-right: 0 !important;
  box-shadow: none !important;
}



/* Hover / focus : inversion, comme l’horizontal */
.cv-page .vertical a:hover,
.cv-page .vertical a:focus {
  background: #009dff !important;
  color: #ffffff !important;
  border-color: #009dff !important;
}

/* État actif (si tu ajoutes .active sur le lien courant) */
.cv-page .vertical a.active {
  background: #009dff;
  color: #ffffff;
  border-color: #009dff;
}

/* Décaler le contenu pour ne pas passer sous le menu (adapte le sélecteur) */
.cv-page main,
.cv-page .container,
.cv-page .content-wrapper {
  margin-left: 240px;           /* 220px + 20px de marge */
}

/* Si tu as un header collant: aligne le menu avec le contenu */
:root { --menu-top: 0px; }      /* mets 80px si besoin */
.cv-page .vertical { top: var(--menu-top); height: calc(100vh - var(--menu-top)); }


/* Même largeur pour tous les boutons du menu (CV + Projets réalisés) */
.cv-page .vertical {
  width: 260px; /* choisis la largeur que tu veux pour la colonne */
}

/* Les liens occupent 100% de la colonne, marge égale à gauche/droite */
.cv-page .vertical a {
  display: flex !important;
  width: calc(100% - 40px) !important; /* 20px de marge à gauche ET à droite */
  margin: 20px 20px 0 20px !important; /* même marge des deux côtés */
  box-sizing: border-box;
  min-width: 0 !important; /* neutralise l'ancien min-width:180px */
}



/*point de langue*/
ul.langues { list-style: none !important; padding-left: 0 !important; }
ul.langues li {
  position: relative;
  padding-left: 1rem;
}
ul.langues li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  line-height: 1.2;
}


/*point de l'informatique*/
ul.informatique { list-style: none !important; padding-left: 0 !important; }
ul.informatique li {
  position: relative;
  padding-left: 1rem;
}
ul.informatique li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  line-height: 1.2;
}


.tf__single_skill_2 img.langues-stars {
  width: 1040px !important;   /* ajuste: 100–200px selon ton rendu */
  height: auto !important;   /* garde les proportions */
  max-width: none !important;/* neutralise .img-fluid / w-100 */
  display: inline-block;     
  object-fit: contain !important;       
}

/* Styles uniformes pour tous les onglets + le lien Download */
.tf__skills_2 .nav .nav-item .nav-link {
  display: inline-flex;                 /* centre verticalement le texte + icône */
  align-items: center;
  gap: .5rem;
  margin-top: 10px !important;  /* espace au-dessus */
  padding: 18px 40px !important;        /* même padding partout */
  border: 2px solid #009dff !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: #009dff !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
}

/* État actif (onglet sélectionné) */
.tf__skills_2 .nav .nav-item .nav-link.active,
.tf__skills_2 .nav .nav-item .nav-link[aria-selected="true"] {
  background: #009dff !important;
  color: #fff !important;
  border-color: #009dff !important;
}

/* L’icône hérite de la couleur */
.tf__skills_2 .nav .nav-item .nav-link i { color: inherit; }

.tf__skills_2 .nav { display: flex; }
.tf__skills_2 .nav .nav-item { flex: 1 1 0; }
.tf__skills_2 .nav .nav-item .nav-link { width: 100%; justify-content: center; }


/* 4 boutons, 1 seule ligne */
#pills-tab{
  display:flex !important;
  flex-wrap:nowrap !important;
  gap:24px !important;
}
#pills-tab > .nav-item{ flex:1 1 0 !important; min-width:0 !important; }
#pills-tab > .nav-item > .nav-link{
  width:100% !important;
  display:flex !important;
  justify-content:center; align-items:center;
  padding:18px 40px !important;
  box-sizing:border-box;
}

/* S'assure que l'icône est visible et héritera de la couleur du lien */
.nav-link .icon-download{
  display:inline-block !important;
  width:18px !important;
  height:18px !important;
  margin-left:.5rem;
  vertical-align:middle;
  flex-shrink:0;
  color: currentColor; /* stroke= currentColor -> suit la couleur du lien */
}


/* Centre la flèche dans le bouton */
.progress .progress-chevron{
  position: absolute;
  left: 50%; top: 50%;
  width: 24px; height: 24px;
  transform: translate(-50%, -50%);
  color: #000;                 /* met #fff si fond sombre*/
}
 
 /* Enlever l’icône / image d’arrière-plan du bouton scroll */
.progress {
  background: #fff !important;
  background-image: none !important;
}

/* Le thème ajoute souvent un pseudo-élément : on le neutralise */
.progress::before,
.progress::after {
  content: none !important;
  background: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  box-shadow: none !important;
}

/* Si jamais il y a un <img> ou une icône font ajoutée dans .progress */
.progress img,
.progress i {
  display: none !important;
}

/* Icône double chevron en haut-droite de CHAQUE carte */
.tf__single_skill_2{
  position: relative;          /* ancre l'icône dans la carte */
  overflow: visible;           /* au cas où un overflow la couperait */
}

.tf__single_skill_2::after{
  content: "";
  position: absolute;
  top: 10px;                   /* ajuste si besoin */
  right: 12px;
  width: 20px;
  height: 20px;
  pointer-events: none;
  z-index: 2;
  background: no-repeat center / contain;

  /* Icône inline (pas besoin de fichier) – couleur = #55e6a5 ; mets #009dff si tu veux ton bleu */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6M5 6l6 6-6 6' fill='none' stroke='%2355e6a5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Optionnel : effet de survol */
.tf__single_skill_2::after{ opacity:.8; transition:opacity .2s; }
.tf__single_skill_2:hover::after{ opacity:1; }

/* 1) on retire l'icône à droite si elle existe encore */
.tf__single_skill_2::after{ content:none !important; }

/* 2) on crée un petit espace à gauche pour l'icône */
.tf__single_skill_2{
  position: relative;
  padding-left: 34px;              /* espace pour l’icône à gauche */
}

/* 3) chevron à gauche, à la place du petit carré */
.tf__single_skill_2::before{
  content: "";
  position: absolute;
  left: 4px;                      /* décale depuis le bord gauche */
  top: 42px;                      /* ajuste pour aligner avec la ligne "BTS SIO" */
  width: 18px; height: 18px;
  pointer-events: none;
  background: no-repeat center / contain;
  /* bleu #009dff (change la couleur si tu veux) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6M5 6l6 6-6 6' fill='none' stroke='%23009dff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* (facultatif) si un petit carré est généré par le thème, on le masque */
.tf__single_skill_2 .some-badge::before,
.tf__single_skill_2 h6::before { content:none !important; }
/* Supprime le petit carré bleu ajouté avant les titres des cartes */
.tf__single_skill_2 h1::before,
.tf__single_skill_2 h2::before,
.tf__single_skill_2 h3::before,
.tf__single_skill_2 h4::before,
.tf__single_skill_2 h5::before,
.tf__single_skill_2 h6::before,
.tf__single_skill_2 h1::after,
.tf__single_skill_2 h2::after,
.tf__single_skill_2 h3::after,
.tf__single_skill_2 h4::after,
.tf__single_skill_2 h5::after,
.tf__single_skill_2 h6::after{
  content: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* On garde l'espace pour ta flèche à gauche */
.tf__single_skill_2{
  position: relative;
  padding-left: 34px; /* espace réservé à ton chevron */
}

/* Ton chevron à gauche (si besoin de rappel) */
.tf__single_skill_2::before{
  content: "";
  position: absolute;
  left: 4px;
  top: 42px;               /* ajuste selon l’alignement souhaité */
  width: 18px; height: 18px;
  pointer-events: none;
  background: no-repeat center / contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6M5 6l6 6-6 6' fill='none' stroke='%23009dff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}




/*bloc projet réaliser*/
.project-card{
  background:#fff;
  border:1px solid rgba(0,157,255,.35);
  border-radius:16px;
  padding:20px;
  box-shadow:0 6px 16px rgba(0,0,0,.05);
}
.project-head h3{ margin:0 0 6px; }
.project-tags{ color:#6b7280; font-size:.95rem; }

/* Boutons cohérents avec ton style */
.btn-pill, .btn-outline{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; padding:12px 18px; border-radius:12px;
  font-weight:600; line-height:1.2; text-decoration:none;
  transition:background-color .2s, color .2s, border-color .2s;
}
.btn-pill{
  background:#fff; color:#009dff; border:2px solid #009dff;
}
.btn-pill:hover{ background:#009dff; color:#fff; border-color:#009dff; }

.btn-outline{
  background:transparent; color:#009dff; border:2px solid #009dff;
}
.btn-outline:hover{ background:#009dff; color:#fff; }

.project-actions{ display:flex; flex-wrap:wrap; gap:12px; }

/* Images modale : éviter l’étirement */
.modal .carousel-item img{ object-fit:contain; max-height:70vh; }

.projects{
  margin-left: 50px;
  margin-top: 50px;
}
/* ========== Sidebar fixe + décalage global du contenu ========== */

/*fin bloc projet réaliser*/


/*le menu de navigation horizontal*/
.home-page .home-title{
  margin-top: 48px;
  margin-bottom: 24px; /* espace avec le menu */
  text-align: center;
}

.home-page h2{
  margin-left: 10px;
  margin-top: 32px;
}

/* === Boutons uniquement dans les cartes projets === */
.cv-page .project-card .project-actions .btn-pill,
.cv-page .project-card .project-actions .btn-outline{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 12px 18px;
  border-radius: 12px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color .2s, color .2s, border-color .2s;
}

/* Variante "pill" (fond blanc, contour bleu) */
.cv-page .project-card .project-actions .btn-pill{
  background: #fff;
  color: #009dff;
  border: 2px solid #009dff;
}
.cv-page .project-card .project-actions .btn-pill:hover,
.cv-page .project-card .project-actions .btn-pill:focus{
  background: #009dff;
  color: #fff;
  border-color: #009dff;
}

/* Variante "outline" (fond transparent, contour bleu) */
.cv-page .project-card .project-actions .btn-outline{
  background: transparent;
  color: #009dff;
  border: 2px solid #009dff;
}
.cv-page .project-card .project-actions .btn-outline:hover, .btn-pill:hover,
.cv-page .project-card .project-actions .btn-outline:focus, .btn-pill:focus{
  background: #009dff;
  color: #fff !important;
  border-color: #009dff;
}
/* === Sidebar fixe sur desktop, menu empilé sur mobile === */
:root{
  --sidebar-w: 260px;   /* largeur colonne menu */
  --sidebar-gap: 32px;  /* espace menu <-> contenu */
  --sidebar-left: 20px;
  --sidebar-top: 16px;
}

/* Desktop: menu fixe + décalage du contenu */
.cv-page .vertical{
  position: fixed;
  top: var(--sidebar-top);
  left: var(--sidebar-left);
  width: var(--sidebar-w);
  z-index: 1000;
}
.cv-page{
  padding-left: calc(var(--sidebar-w) + var(--sidebar-left) + var(--sidebar-gap));
}

/* Si tu avais ajouté un décalage manuel… on le coupe */
.cv-page .container,
.cv-page main{ margin-left: 0 !important; }

/* Tu avais mis un margin-left sur .projects : on le neutralise en mobile */
.projects{ margin-left: 50px; margin-top: 50px; }
@media (max-width: 1200px){
  .projects{ margin-left: 0; }
}

/* Tablet & mobile: menu en haut, en grille ou empilé */
@media (max-width: 992px){
  .cv-page{ padding-left: 0 !important; }

  .cv-page .vertical{
    position: sticky;     /* reste visible en haut */
    top: 0;
    left: 0;
    width: 100%;
    padding: 12px 16px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
  }
  .cv-page .vertical li{ flex: 1 1 45%; }                 /* 2 par ligne */
  .cv-page .vertical a{
    width: 100% !important;
    margin: 0 !important;
  }
}

/* Téléphone étroit: 1 bouton par ligne */
@media (max-width: 576px){
  .cv-page .vertical li{ flex: 1 1 100%; }
}

/* ==== Formulaire contact : bordures & focus ==== */
:root{
  /* change la couleur ici si besoin (#000, #ff5a5f, etc.) */
  --form-border: #009dff;
  --form-focus:  #009dff;
}

.contact_form_2 input[type="text"],
.contact_form_2 input[type="email"],
.contact_form_2 input[type="tel"],
.contact_form_2 textarea {
  width: 100%;
  box-sizing: border-box;
  background: #fff;
  color: #000;
  border: 2px solid var(--form-border) !important;
  border-radius: 12px;
  padding: 12px 14px;
  transition: border-color .2s, box-shadow .2s;
}

/* Focus accessible (anneau bleu) */
.contact_form_2 input:focus,
.contact_form_2 textarea:focus {
  outline: none;
  border-color: var(--form-focus) !important;
  box-shadow: 0 0 0 .2rem rgba(0,157,255,.25);
}

/* Placeholder plus doux */
.contact_form_2 ::placeholder{
  color: #6b7280;
  opacity: 1; /* pour Firefox */
}

/* Petit espacement vertical entre les champs */
.contact_form_2 .row > [class^="col"]{
  margin-bottom: 12px;
}

/* (optionnel) bouton assorti */
.contact_form_2 button[type="submit"]{
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 18px; border-radius: 12px;
  background: #fff; color: var(--form-border);
  border: 2px solid var(--form-border);
  font-weight: 600; cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.contact_form_2 button[type="submit"]:hover{
  background: var(--form-border); color: #fff; border-color: var(--form-border);
}

/* 1) Le héros (#banner) ne doit pas remplir l'écran */
.home-page section#banner.tf__banner_2.banner{
  min-height: auto !important;   /* écrase 100vh du thème si présent */
  height: auto !important;
  padding-top: 0 !important;     /* vire le gros padding haut */
  padding-bottom: 40px !important;
  margin-top: 0 !important;
}

/* 2) Pas de marge/padding “caché” dans l’intérieur */
.home-page #banner .container,
.home-page #banner .row,
.home-page #banner .tf__banner_text{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* 3) Le sous-titre “A propos de moi” collé au héros */
.home-page h2{
  margin: 8px 0 10px 10px !important;  /* haut/bas réduits, 10px à gauche */
}

/* 4) Le menu horizontal ne doit pas ajouter de marge par défaut */
nav .horizontal{
  margin: 0 !important;
}

/* H1 du bandeau : ne plus forcer les MAJUSCULES */
.home-page .tf__banner_text h1,
.home-page .tf__banner_text h1 *,
.home-page .tf__banner_text .cd-words-wrapper b {
  text-transform: none !important;      /* respecte tes minuscules/majuscules */
  font-variant-caps: normal !important; /* au cas où small-caps serait activé */
  letter-spacing: normal !important;    /* retire l'espacement typique des MAJ */
}

/* bloc et titre cliquable */
.resume{
  margin: 16px 0;
}
.resume summary{
  list-style: none;              /* retire le triangle par défaut */
  cursor: pointer;
  font-weight: 600;
  position: relative;
  padding-left: 1.4rem;
  outline: none;
}

/* petit chevron custom */
.resume summary::before{
  content: "▸";
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(2px);
  transition: transform .2s ease;
}
.resume[open] summary::before{
  transform: rotate(90deg) translateY(0);
}

/* le cadre n’apparaît que lorsque c’est ouvert */
.resume .resume-body{
  display: none;                 /* fermé par défaut */
}
.resume[open] .resume-body{
  display: block;
  margin-top: .75rem;
  padding: 16px 18px;
  border: 2px solid #009dff;     /* ta couleur bleue */
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
  margin-right: 16px;          /* << espace à droite (dehors du cadre) */
}