/* ===== RESET NAVIGATEUR — HAUT DU FICHIER ===== */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  height: 100%;
  scroll-behavior: smooth;
}
  
  body {
    margin: 0 !important;
    padding: 0;
    /* padding-top: 92px;   ma hauteur de  header */
    padding-top: 0;
    min-height: 100vh;
    font-family: "Plus Jakarta Sans", sans-serif;
    background: var(--bg-main);
    color: var(--text-main);
    line-height: 1.6;
  }

  .page {
    background: var(--bg-main);
  }

    /* SUPPRIME ESPACE HOME HERO */
  .home-hero,
    .domains {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }


  /* ================================
   FIX DÉFINITIF — BOUTONS NATIFS
   Supprime le fond système navigateur
   ================================ */

button {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
}

/* =====================================================
   MATERIAL SYMBOLS — COULEUR PAR THÈME (FIX FINAL)
   ===================================================== */

/* Héritage sain */
.material-symbols-outlined {
  background: transparent;
  color: currentColor;
}

/* ===== DARK MODE ===== */
html[data-theme="dark"] .header-top,
html[data-theme="dark"] .header-top button,
html[data-theme="dark"] .header-top a {
  color: #E9ECF1;
}

/* ===== LIGHT MODE ===== */
html[data-theme="light"] .header-top,
html[data-theme="light"] .header-top button,
html[data-theme="light"] .header-top a {
  color: #0B1022;
}


/* Base commune – input recherche */
.header-search input {
  background: transparent;
  border: none;
  outline: none;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
}

html[data-theme="dark"] .header-search input {
  background-color: rgba(255, 255, 255, 0.06);
  color: rgb(232, 236, 239);
}

html[data-theme="dark"] .header-search input::placeholder {
  color: rgba(232, 236, 239, 0.55);
}

html[data-theme="light"] .header-search input {
  background-color: rgba(11, 16, 34, 0.06);
  color: rgb(11, 16, 34);
}

html[data-theme="light"] .header-search input::placeholder {
  color: rgba(11, 16, 34, 0.55);
}


  /* =========================================================
    VARIABLES
    ========================================================= */

  :root {

  /* =========================================================
     FONDS — DARK (DEFAULT)
     ========================================================= */

  --bg-main: #0B1022;                 /* fond global site */
  --bg-page: #0B1022;                 /* pages internes */
  --bg-section: transparent;          /* sections standards */
  --bg-hero: transparent;             /* hero */
  --bg-elevated: #1e293b;             /* header / blocs forts */

  --bg-card: rgba(255,255,255,0.03);  /* cartes */
  /* --bg-card-hover: #15204a */
  --bg-card-hover: #0B1022;;           /* hover cartes */

   --card-divider: rgba(255,255,255,0.08);  /* ligne footer card */

  /* =========================================================
     TEXTE
     ========================================================= */

  --text-main: #E6E8EE;
  --text-secondary: rgba(230,232,238,0.75);
  --text-muted: rgba(230,232,238,0.55);

  /* =========================================================
     UI / BORDURES / ACCENTS
     ========================================================= */

  --border-soft: rgba(255,255,255,0.08);
  --accent: #7aa2ff;

  /* =========================================================
     OMBRES
     ========================================================= */

  --shadow-soft: 0 6px 18px rgba(0,0,0,0.25);
  --shadow-medium: 0 12px 32px rgba(0,0,0,0.35);

  /* =========================================================
     LEGACY
     ========================================================= */

  --text-primary: #E6E8EE;
  --text-body: #C9CDD6;
}


/* =========================================================
   LIGHT THEME
   ========================================================= */

[data-theme="light"] {

  /* =========================================================
     TEXTE    
   ========================================================= */

  --text-main: #1F2933;
  --text-secondary: #374151;
  --text-muted: #6B7280;

  /* =========================================================
     FONDS
     ========================================================= */
  --bg-main: #cfd7e3; /* #c5cfdd  #d6dde8 FOND ECRAN PAGE HOME - HEADER */

  --bg-page: transparent;             
  --bg-section: transparent;
  --bg-hero: transparent;
  --bg-elevated: #F0F4F8;

  --bg-card: #F0F4F8;                  /* fond cards home réalisations */
  --bg-card-hover: #E8EDF2;

  --card-divider: rgba(15, 23, 42, 0.08);

  /* =========================================================
     UI
     ========================================================= */
  --border-soft: rgba(31, 41, 51, 0.10);
  --accent: #3B6CFF;

  /* =========================================================
     OMBRES
     ========================================================= */
  --shadow-soft: 0 6px 18px rgba(15,23,42,0.06);
  --shadow-medium: 0 12px 32px rgba(15,23,42,0.10);
}

  /* =========================================================
     HOME — fond uniforme en light uniquement
     ========================================================= */
  .site-header,
  .home-hero,
  .domains {
    background-color: var(--bg-main);
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  ul {
    margin: 0;
    padding-left: 1.2rem;
  }

  /* =========================================================
    CONTAINERS
    ========================================================= */

  .container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 2rem;
  }

  /* =========================================================
   PROTECTION AVANT HEADER
   ========================================================= */
  /* SUPPRIME ESPACE VARIABLE AU-DESSUS HEADER */
  .page-home,
  .page-portfolio
  .page-conseils,
  .page-accompagnement,
  .page-formation,
  .page-reponse,
  .page-contact,
  .page-mentions {
    padding-top: 0 !important;
    margin-top: 0 !important; 
  }

  /* =========================================================
   HEADER PRINCIPAL
   ========================================================= */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: transparent;
    display: flex;
    align-items: center
    /* flex-direction: column */ 
  }

  /* hauteur BAR NAV 1 - TOP NAV */
  .header-main {
    height: 72px;
    display: flex;
    align-items: center;
    background: var(--bg-main);
    border-bottom: 1px solid var(--border-soft);
    z-index: 1050;
    width: 100%;
  }

/* Conteneurs internes */
.header-main-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  flex: 1;
}

/* DROPDOWN SERVICES CENTRÉ SOUS BOUTON */
.header-main .has-dropdown .dropdown {
  left: 50% !important;
  transform: translateX(-50%) !important;
  right: auto !important;
  margin-left: 0 !important;
}

/* Positionnement parent relatif */
.header-main .has-dropdown {
  position: relative !important;
}


/* Éléments internes */
.header-tools,
.header-brand,
.header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.main-nav-list {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  justify-content: center;
}



/* Thèmes DARK - SANS ligne grise */
html[data-theme="dark"] .header-top {
  /*background: rgba(11,16,34,1) !important;     /* Fond opaque OK */
  background: transparent;
  border-bottom: none !important;              /* LIGNE SUPPRIMÉE */
  backdrop-filter: none !important;
}

/* Light reste parfait */
html[data-theme="light"] .header-top {
  background: transparent !important;
  backdrop-filter: none !important;
}


/* SUPPRIME PUCE TOUS DROPDOWNS */
.dropdown,
.header-main .dropdown,
.header-top .dropdown,
.has-dropdown ul {
  list-style: none !important;
  list-style-type: none !important;
  padding-left: 0 !important;
}

.dropdown li {
  list-style: none !important;
  list-style-type: none !important;
}

/* ================= logoo RESPONSIVE ================= */

  @media (min-width: 1024px) {
    .site-header .container {
      max-width: none;          /* enlève la contrainte centrale */
      padding-left: 2rem;       /* garde un léger air */
      padding-right: 2rem;
    }
  }

  .main-nav ul {
    display: flex;
    gap: 2rem;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .main-nav a {
    font-size: 0.95rem;
    color: var(--text-muted);
    transition: color 0.2s ease;
  }

  /* =========================================================
    PAGE HOME — RESPONSIVE PREMIUM (breakpoints + fluid)
     =========================================================
    CONTINUITÉ VISUELLE HERO → SECTIONS
    ========================================================= */

  .home-hero,
  .domains {
    background-color: var(--bg-main);
  }

  /* ---------- BASE (mobile first) ---------- */
  .home-hero {
    padding-top: 96px;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding-top: calc(96px + clamp(1.5rem, 5vw, 4rem));
    padding-bottom: clamp(3rem, 6vw, 5rem);
    /* min-height: clamp(320px, 42vh, 400px); */
    min-height: auto;
    font-family: 'Plus Jakarta Sans', sans-serif;
  }

  #hero-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0.95;
  }

    /* Colonne texte du hero */
  .page-home .home-hero .container {
    padding-top: 32px;
    margin-top: 40px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;  
    text-align: center;
    position: relative;
    z-index: 1;
  }

  /* Aligne aussi explicitement chaque ligne */
  /* HERO — centrage définitif */
  .page-home .home-hero {
      text-align: center;
  }

  .page-home .home-hero .hero-subtitle,
  .page-home .home-hero .hero-text {
      text-align: center;
      margin-left: auto;
      margin-right: auto;
      max-width: 800px;
  }

  /* ---------- TEXTE ---------- */
  .hero-intro {
    font-size: 1rem;
    color: var(--text-muted);
    margin-bottom: 0.3rem;
  }

  .hero-title {
    font-size: clamp(1.8rem, 5vw, 3.1rem);
    font-weight: 500;
    letter-spacing: 0.5px;
    line-height: 1.15;
    margin: 0;
    /*  white-space: nowrap;  empêche l’étirement vertical */
  }

  .hero-text {
    margin: 1.4rem 0 0;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 500;                /* 700 GRAS */
    letter-spacing: 0.3px;
    color: #8fb5ff;   /* BLEU PREMIUM */
    opacity: 0.85;
  }
 
  .hero-text:last-of-type {
    font-size: clamp(1.2rem, 2vw, 1.6rem);
    color: #6f9cff; /* léger plus sombre que #8fb5ff *// 
  }

  .hero-text + .hero-text {
    margin-top: 0.3rem; /* ajuste à ton goût */
  }

  .hero-subtitle {
    margin: 1.4rem 0 2.4rem;
    font-size: clamp(1.35rem, 2.4vw, 2.2rem);
    font-weight: 500;                /* 700 GRAS */
    letter-spacing: 0.3px;
    color: #8fb5ff;   /* BLEU PREMIUM */
    opacity: 0.85;
  }

  @media (max-width: 600px) {
    .hero-identity {
        flex-direction: column;   /* logo au-dessus */
        gap: 0.5rem;
    }
 
    .hero-title {
        white-space: normal;      /* autorise retour ligne */
        text-align: center;
    }
  }

 
  /* ---------- TABLETTE ≥ 768px > 1023px  ---------- */
  @media (min-width: 768px) and (max-width: 1023px) {
    .home-hero {
    }

    .home-hero::after {
      width: min(48vw, 420px);
      opacity: 0.9;
    }
  }

  /* ---------- DESKTOP ≥ 1024px ---------- */
  @media (min-width: 1024px) { 
    .home-hero .container {
      padding-top: 32px;
      margin-left: auto;
      margin-right: auto;
    }

    .home-hero::after {
      width: min(42vw, 520px);
    }
  }

  /* ---------- Cards - Page HOME ---------- */

  .project-card {
    background: rgb(220, 225, 235, 0.03);
    border-radius: 12px;
    padding: 25px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  } 

  /* DARK - Garder gris clair */
  .card-bullets {
    margin: 12px 0 0;
    padding-left: 18px;
    color: #cfd8e3;
    font-size: 0.95rem;
    line-height: 1.5;
  }

  /* LIGHT - Texte foncé lisible */
  html[data-theme="light"] .card-bullets {
    color: #4A5568 !important;  /* Gris foncé parfait */
  }

  .card-bullets li {
    margin-bottom: 6px;
  }

  /* DARK */
  .service-bullets {
    margin: 12px 0 0;
    padding-left: 18px;
    color: #cfd8e3;
    font-size: 0.95rem;
    line-height: 1.5;
  }

  /* LIGHT */
  html[data-theme="light"] .service-bullets {
    color: #4A5568 !important;  /* Gris foncé parfait */
  }

  .service-bullets li {
    margin-bottom: 6px;
  }

  /* ---------- Ajustement hauteur blocs Page HOME ---------- */

  /* Remplace votre règle précédente */
  .page-home .home-hero {
    padding-top: 56px !important;    /* 56px  */   
    padding-bottom: 48px;
    margin-top: 0 !important;
  }

  /* ================================
   PAGE HOME IMAGE — RESPONSIVE FIX
   ================================ */

  /* Tablette & mobile : on supprime la photo de côté */
  @media (max-width: 900px) {
    .home-hero::after {
      display: none;
    }
  }

    /* Le texte reprend toute la largeur */
  .page-home .home-hero .container {
      padding-top: 32px;
      margin-top: 40px;
      max-width: 100%;
      padding-right: 0.1rem;
  }

  /* Le hero ne doit pas centrer son contenu */
  .home-hero .container {
    padding-top: 32px;
    max-width: none;      /* enlève la largeur limitée */
    margin: 0;            /* enlève le centrage auto */
    padding-right: 0vw;
  }

  /* Aligne AUSSI le nom dans le flux normal */
  .page-home .hero-title {
    margin-left: auto;
    padding-left: 0;
    transform: none;
    text-align: left;
    max-width: 620px; /* même largeur que le reste du texte */
  }

  /* HOME - Rapproche le bloc Réalisations du bloc au-dessus */
  .home-projects {
    margin-top: -40px; /* ajuste entre -20 et -60 selon rendu */
    padding-top: 0;
  }
  
  /* ---------- Page HOME - Sous-titres réalisations ---------- */

    .project-label {
    display: block;
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 6px;
    color: #E6E8EE;
    position: relative;
    padding-bottom: 6px;
  }

  .project-label::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 48px;
    height: 3px;
    background: linear-gradient(90deg, #5da9ff, #2d6cdf);
    border-radius: 2px;
  }

    /* ===========================
    PROJETS - Textes adaptatifs
    =========================== */

  /* DARK MODE - Gris clair */
  .project-card,
  .project-what,
  .project-what-text1,
  .project-what-text2,
  [class*="project-what"] {
    color: #cfd8e3;  /* Gris clair dark */
  }

  /* LIGHT MODE - Gris foncé lisible */
  html[data-theme="light"] .project-card,
  html[data-theme="light"] .project-what,
  html[data-theme="light"] .project-what-text1,
  html[data-theme="light"] .project-what-text2,
  html[data-theme="light"] [class*="project-what"] {
    color: #4A5568 !important;  /* Gris foncé light */
  }

  /* =========================
   PAGE HOME - PROJECTS — CARDS
   ========================= */

  .projects-section {
    padding: 60px 0;
  }

  .section-title {
    text-align: center;
    margin-bottom: 50px;
  }

  .project-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 25px rgba(0, 180, 255, 0.15);
  } 

  .project-icon {
    font-size: 28px;
    margin-bottom: 12px;
  }

  .project-card h3 {
    font-size: 18px;
    margin-bottom: 12px;
    color: #F0F4F8;
  }

  .project-card p {
    font-size: 15px;
    line-height: 1.6;
    color: rgb(200, 205, 215, 0.75);
  }

  /* ---------- Page formation ---------- */

  .page-formation .page-header {
    background:
      linear-gradient(rgba(8,12,28,.88), rgba(8,12,28,.88)),
      url('/assets/images/hero-banner2.png') center / cover no-repeat;
  }

  .page-risques .page-header {
    background:
      linear-gradient(rgba(8,12,28,.88), rgba(8,12,28,.88)),
      url('/assets/images/hero-banner3.png') center / cover no-repeat;
  }

  /* =========================================================
    SECTIONS GÉNÉRIQUES
    ========================================================= */

   /*section:not(.page-header) {
    padding: 4rem 0;
  } */

  section h2 {
    font-size: 1.6rem;
    margin-bottom: 1.5rem;
  }

  .content h2 {
    margin-top: 2.5rem;
  }

  /* ==================================================
    PORTFOLIO — CORRECTION ALIGNEMENT HAUT
     ================================================== */
  .page-portfolio .portfolio-main {
      padding-top: 0;
  }

  /* =========================================================
    DOMAINS / SERVICES (WIDGETS)
    ========================================================= */

  /* TITRE DOMAINS — FORCE LISIBILITÉ */
  .domains h2 {
    position: relative;
    z-index: 2;
    color: #F0F4F8;
  }

  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 2rem;
  }

  .card {
    background: var(--bg-card);
    padding: 2rem;
    border-radius: 12px;
    transition: transform 0.25s ease, background 0.25s ease;
  }

  .card:hover {
    background: var(--bg-card-hover);
    transform: translateY(-6px);
  }

  .card h3 {
    margin: 0.6rem 0 0.8rem;
    font-size: 1.1rem;
  }

  .card p {
    color: var(--text-muted);
    font-size: 0.95rem;
  }

  /* =========================================================
    ICONES DES CARDS
    ========================================================= */

  .card .icon {
    width: 36px;
    height: 36px;
    margin-bottom: 1rem;
    color: var(--accent);
    opacity: 0.9;
  }

  .card:hover .icon {
    opacity: 1;
  }

  /* =========================================================
    LIENS TEXTE
    ========================================================= */

  .text-link {
    display: inline-block;
    margin-top: 1.2rem;
    color: var(--accent);
    font-weight: 500;
  }

  .text-link:hover {
    text-decoration: underline;
  }

  /* =========================================================
    FOOTER
    ========================================================= */

  .site-footer {
    border-top: 1px solid var(--border-soft);
    padding: 2rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
  }

  /* =========================================================
    ALIGNEMENT
    ========================================================= */

  .page-header .container {
    padding-top: 2rem;
  }

  /* ===== NAVIGATION ===== */

  .main-nav .menu {
    display: flex;
    gap: 32px;
    list-style: none;
    align-items: center;
  }

  .main-nav .menu > li {
    position: relative;
  }

  .main-nav a {
    color: #E6E8EE;
    text-decoration: none;
    font-weight: 500;
  }

  /* dropdown dark Mode */
  html[data-theme="dark"] .has-dropdown .dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #0b1220;
    min-width: 240px;
    padding: 10px 0;
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.4);
    z-index: 1000;
  }

  html[data-theme="dark"] .has-dropdown:hover .dropdown {
    display: block;
  }

  html[data-theme="dark"] .dropdown li a {
    display: block;
    padding: 10px 20px;
    color: #F6F6F4
;
    font-size: 0.95rem;
  }

  html[data-theme="dark"] .dropdown li a:hover {
    background: rgba(255,255,255,0.06);
  }

  /* dropdown light Mode */
  html[data-theme="light"] .has-dropdown .dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #1a1a1a;
    min-width: 240px;
    padding: 10px 0;
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.4);
    z-index: 1000;
  }

  html[data-theme="light"] .has-dropdown:hover .dropdown {
    display: block;
  }

  html[data-theme="light"] .dropdown li a {
    display: block;
    padding: 10px 20px;
    color: #F0F4F8;
    font-size: 0.95rem;
  }

  html[data-theme="light"] .dropdown li a:hover {
    background: #333;
    color: #F0F4F8;
  }

  /* Portfolio sidebar - Light Mode UNIQUEMENT */
  html[data-theme="light"] .portfolio-sidebar {
    background: rgba(0,0,0,0.04) !important;      /* gris très clair */
    box-shadow: 
      inset 0 0 0 2px rgba(0,0,0,0.1),           /* contour gris */
      0 4px 20px rgba(0,0,0,0.08) !important;    /* ombre portée */
  }

  html[data-theme="light"] .portfolio-sidebar li {
    color: #333 !important;                       /* texte visible */
  }

  /* CTA Contact */
  .menu .cta {
    background: transparent;
    padding: 0;
    border-radius: 0;
    font-weight: 500;
  }

  /* =========================================================
    AJUSTEMENT HERO — PAGE PROFIL
    ========================================================= */

  .page-profil .page-header {
    min-height: auto;      /* au lieu de 420 */
    padding: 3rem 0 2rem;  /* réduit l’espace vertical */
  }

  /* =========================================================
    AJUSTEMENT — PAGE APPROCHE / VISION
    ========================================================= */

  .approach-content .approach-block {
    margin-top: 3.5rem;
  }

  .approach-content .approach-block:first-child {
    margin-top: 0;
  }

  .approach-content h2 {
    margin-bottom: 1.2rem;
  }

  .approach-content p {
    max-width: 760px;
  }

  /* ==================================================
    PORTFOLIO — TIMELINE
    ================================================== */

  .portfolio-timeline {
    margin-top: 4rem;
  }

  .timeline {
    position: relative;
    padding-left: 32px;
  }

  .timeline::before {
    display: none;
  }

  .timeline-item {
    position: relative;
    margin-bottom: 3rem;
  }

  .timeline-dot {
    position: absolute;
    left: -18px;
    top: 0.40rem;    /* 6px */
    width: 10px;
    height: 10px;
    background: var(--accent);
    border-radius: 15%;
  }

  .timeline-content h3 {
    margin-bottom: 0.6rem;
    font-size: 1.05rem;
  }

  .timeline-content p {
    color: var(--text-muted);
    margin-bottom: 0.6rem;
  }

  .mission-tags {
    margin-top: 0.2rem;
  }

  .tag {
    display: inline-block;
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(122,162,255,0.12);
    color: var(--accent);
    margin-right: 6px;
    margin-bottom: 6px;
  }

  /* ==================================================
    PORTFOLIO — SIDEBAR
    ================================================== */

  .portfolio-sidebar {
    position: relative;
    background: rgba(255,255,255,0.04);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
      /* ALIGNEMENT AVEC LE TITRE H2 */
    margin-top: 0rem;
  }

  .skills-list {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
  }

  /* ==================================================
   PORTFOLIO — CARTOUCHE
   ================================================== */

.cartouche-section {
  margin-bottom: 2rem;
}

.cartouche-section:last-child {
  margin-bottom: 0;
}

.cartouche-section h3 {
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
  font-weight: 600;
}

.simple-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.simple-list li {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 0.10rem;
}


/* ==================================================
   PORTFOLIO — LAYOUT DESKTOP
   ================================================== */

.portfolio-layout {
  display: grid;
  grid-template-columns: 320px 1fr; /* largeur du cartouche */
  gap: 4rem;
  align-items: start;
}

.page-portfolio .portfolio-layout {
  margin-top: clamp(1.25rem, 2.8vw, 2.5rem);
  margin-bottom: clamp(2rem, 3.5vw, 3rem);
}

.page-portfolio .portfolio-main > h2:first-of-type {
  margin-top: clamp(1rem, 2.2vw, 1.8rem);
}


/* ==================================================
   PAGE PORTFOLIO RESPONSIVE — TABLET & MOBILE
   ================================================== */

@media (max-width: 1024px) {
  .portfolio-layout {
    grid-template-columns: 1fr; 
  }

  .lang-switch a {
    font-size: 0.85rem;
    opacity: 0.7;
  }

  .lang-switch a.active {
    opacity: 1;
    font-weight: 600;
  }
}

@media (max-width: 1024px) {

  .page-portfolio .portfolio-layout {
    grid-template-columns: 1fr;
  }

  .page-portfolio .portfolio-sidebar {
    max-width: 520px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

}

/* HERO — PAGE PORTFOLIO */
.page-portfolio .hero-conseil {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important; 
  max-height : 640px; 
  min-height: 220px;
  padding: 0 !important;
}

.page-portfolio .hero-conseil .container {
  text-align: center;
  /* width: 100%; */ 
}


/* ==================================================
   PAGE PORTFOLIO — MISSIONS
   ================================================== */
  .timeline-content {
    padding-left: 2.0rem; 
  }

  .timeline-content p {
  margin: 0.20rem 0; /* réduit l’espace entre les lignes */
  }

/* ==================================================
   PAGE PORTFOLIO — FORMATION
   ================================================== */

    /* TITRE DIPLÔME */
  .edu-title.diploma {
    margin-bottom: 0.25rem; /* réduit l'espace sous le diplôme */
    color: var(--accent);
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.3;
  }

  /* TITRE CERTIF */
  .edu-title.cert {
    color: #9fb3c8;
    font-weight: 600;
  }

  /* LISTE DES CERTIFICATIONS margin regle top right bottom left */
  .edu-certifications {
    margin: 0.5rem 0 0.9rem 1.33rem;
    padding: 0;
  }

  .edu-certifications li {
    margin-bottom: 0.01rem; /* lignes un peu plus compactes */
    font-size: 0.9rem;
    color: #b8c7d9; /* gris bleuté */
  }


/* ==================================================
   PAGE PORTFOLIO — BARRES DE NIVEAU DEVANT CHAQUE ITEM
   ================================================== */

  /* Base commune aux listes du cartouche */
  .portfolio-sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  /* Chaque ligne */
  .portfolio-sidebar li {
    position: relative;
    padding-left: 1.4rem;   /* espace pour les barres */
    margin-bottom: 0.45rem;
    line-height: 1.4;
  }

    /* Niveau 1 — Débutant */
  .portfolio-sidebar li.level1::before {
    width: 4px;
    background-color: #ff6b6b;
  }

  /* Niveau 2 — Intermédiaire */
  .portfolio-sidebar li.level2::before {
    width: 10px;
    background: linear-gradient(
      to right,
      #f5c542 0 4px,
      transparent 4px 6px,
      #f5c542 6px 10px
    );
  }

  /* Niveau 3 — Expert */
  .portfolio-sidebar li.level3::before {
    width: 16px;
    background: linear-gradient(
      to right,
      #3ddc97 0 4px,
      transparent 4px 6px,
      #3ddc97 6px 10px,
      transparent 10px 12px,
      #3ddc97 12px 16px
    );
  }


  /* Les 3 barres verticales */
  .portfolio-sidebar li {
    position: relative;
    padding-left: 1.4rem;
  }

  .portfolio-sidebar li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.2em;
    height: 14px;
    border-radius: 1px;
  } 

  .skill-legend {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
  }

  .legend-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
  }

  .legend-item::before {
    content: '';
    height: 12px;
    border-radius: 2px;
  }

  /* 3 barres */
  .legend-item.expert::before {
    width: 16px;
    background: linear-gradient(
      to right,
      #2ecc71 0 4px,
      transparent 4px 6px,
      #2ecc71 6px 10px,
      transparent 10px 12px,
      #2ecc71 12px 16px
    );
  }

  /* 2 barres */
  .legend-item.medium::before {
    width: 10px;
    background: linear-gradient(
      to right,
      #f1c40f 0 4px,
      transparent 4px 6px,
      #f1c40f 6px 10px
    );
  }

  /* 1 barre */
  .legend-item.beginner::before {
    width: 4px;
    background-color: #f39c12;
  }

  /* Ne PAS appliquer aux titres */
  .portfolio-sidebar h3::before {
    display: none;
  }

/* =========================================================
   PAGE PORTFOLIO — LOCALISATION
   ========================================================= */

  .portfolio-location {
  margin-bottom: 4rem; /* espace avant la grosse image */
  }

  .portfolio-hero-image {
    margin-bottom: 5rem;
  }

  .portfolio-hero-image img {
    width: 100%;
    border-radius: 12px;
    display: block;
  }

/* =========================================================
   PAGE CONTACT — LAYOUT
   ========================================================= */

.page-contact {
  background: var(--bg-main);
}

.page-contact .content {
  padding-top: 0;
}

/* Grille principale */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 520px) minmax(0, 360px);
  gap: 4rem;
  align-items: center;
  justify-content: center;
  margin-top: -200px; /* remonte sous le hero */
}

/* =========================================================
   PAGE CONTACT - FORMULAIRE
   ========================================================= */

.contact-form {
  background: var(--bg-card);
  padding: 2.5rem;
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 0.7rem 0.75rem;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  color: var(--text-main);
  font-size: 0.95rem;
}

.contact-form textarea {
  resize: vertical;
  min-height: 120px;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--accent);
}

/* Checkbox RGPD */
.contact-form .checkbox {
  display: flex;
  align-items: flex-start; /* center */
  justify-content: flex-start;
  gap: 0.6rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 1.2rem;
  /*margin: 0;*/
  /* line-height: 1.4; */
}

/* Texte du checkbox RGPD — override du label global */
.contact-form label.checkbox {
  padding: 0.75rem 1.6rem;
  gap: 0.6rem;
}

/* test pour décaler le texte checkboxvers la droite */ 
.page-contact .checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem; /* espace entre case et texte */
}

.page-contact .checkbox label {
  margin: 0;
  line-height: 1.45;
}

/* Bouton */
.contact-form .btn-primary {
  margin-top: 1rem;
  padding: 0.75rem 1.6rem;
  border-radius: 999px;
  background: var(--accent);
  color: #0b1022;
  font-weight: 600;
  border: none;
  cursor: pointer;
}

/* Feedback */
.contact-feedback {
  margin-bottom: 1.5rem;
  padding: 1rem;
  border-radius: 10px;
  font-size: 0.9rem;
}

.contact-feedback.success {
  background: rgba(61,220,151,0.15);
  color: #3ddc97;
}

.contact-feedback.error {
  background: rgba(255,107,107,0.15);
  color: #ff6b6b;
}

/* =========================================================
   PAGE CONTACT - RÉSEAUX SOCIAUX
   ========================================================= */

.contact-socials {
  background: var(--bg-card);
  padding: 2rem;
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}

.contact-socials h3 {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 1.2rem;
}

/* Boutons sociaux */
.social-buttons {
  display: flex;
  justify-content: center;
  gap: 1.2rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.social-buttons li a {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease, transform 0.25s ease;
}

.social-buttons li a:hover {
  background: rgba(255,255,255,0.08);
  transform: translateY(-4px);
}

.social-buttons img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

/* =========================================================
   PAGE CONTACT - RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr;
    margin-top: -60px;
  } 
}


  /* =========================================================
   PAGE CONTACT - HERO
   ========================================================= */

.page-contact {
  background: var(--bg-main);
}

/* ---------- HERO ---------- */
.contact-hero {
  padding: 2rem 0 1.5rem;
}

.contact-hero h1 {
  font-size: 2.6rem;
  margin-bottom: 0.6rem;
}

.contact-hero .hero-subtitle {
  max-width: 700px;
  color: var(--text-muted);
}

/* ---------- GRID ---------- */
.contact-section {
  padding: 0 0 5rem;
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 520px) minmax(0, 380px);
  gap: 4rem;
  justify-content: center;
  margin-top: -120px;
}

/* ---------- CARD BASE ---------- */
.contact-card {
  background: var(--bg-card);
  border-radius: 18px;
  padding: 2.6rem;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}

.contact-card-title {
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 2rem;
}

/* ---------- FORM ---------- */
/*  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 1.4rem;
} */

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 0.7rem 0.8rem;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  color: var(--text-main);
  font-size: 0.95rem;
}

.contact-form textarea {
  resize: vertical;
  min-height: 140px;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.contact-form .btn-primary {
  margin-top: 1.2rem;
  padding: 0.75rem 1.8rem;
  border-radius: 999px;
  background: var(--accent);
  color: #0b1022;
  font-weight: 600;
  border: none;
  cursor: pointer;
}

/* ---------- FEEDBACK ---------- */
.contact-feedback {
  margin-bottom: 2rem;
  padding: 1rem;
  border-radius: 12px;
  font-size: 0.9rem;
  text-align: center;
}

.contact-feedback.success {
  background: rgba(61,220,151,0.18);
  color: #3ddc97;
}

.contact-feedback.error {
  background: rgba(255,107,107,0.18);
  color: #ff6b6b;
}

/* ---------- SOCIALS ---------- */
.social-buttons {
  display: flex;
  justify-content: center;
  gap: 1.4rem;
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
}

.social-btn {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: rgba(255,255,255,0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .25s ease, background .25s ease;
}

.social-btn:hover {
  background: rgba(255,255,255,0.1);
  transform: translateY(-6px);
}

.social-btn img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

/* ---------- DIRECT EMAIL ---------- */
.contact-direct {
  text-align: center;
}

.contact-direct a {
  color: var(--accent);
  font-weight: 500;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr;
    margin-top: -60px;
  }

  .contact-hero {
    padding-bottom: 6rem;
  }
}


/* =========================================================
   FLUX — PAGE CONTACT 
   ========================================================= */

/* Espacement des sections identique */
.page-contact section:not(.hero-conseil) {
  padding: 2.5rem 0;
  position: relative;
  margin: 0;
}

/* Annule tout chevauchement vertical */
.page-contact .contact-section {
  margin-top: 0 !important;
}

/* Le hero Contact reste propre */
.page-contact .contact-hero {
  background:
    radial-gradient(circle at 15% 20%, rgba(0,180,255,0.10), transparent 55%),
    radial-gradient(circle at 85% 30%, rgba(0,140,255,0.06), transparent 60%);
}

/* Empêche les grilles de remonter sous le hero */
.page-contact .contact-grid {
  margin-top: 0 !important;
}

/* ===== CONTACT CARD (style conseil) ===== */

.page-contact .contact-card {
  position: relative;
  background: var(--bg-card);
  border-radius: 14px;
  padding: 2.8rem 2rem 2rem;
  overflow: visible;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.page-contact .contact-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.25);
}

.page-contact .contact-card > .service-icon {
  position: absolute;
  top: -10px;
  left: 18px;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: #1e293b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  box-shadow: 0 8px 20px rgba(0,0,0,0.4);
  z-index: 2;
}

.page-contact .contact-card > .service-icon .material-symbols-outlined {
  font-size: 1.2rem;
  color: #fff;
}

.page-contact .contact-card .contact-form {
  background: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* ===== FORM GROUPS + INLINE ERRORS ===== */

.page-contact .form-group {
  display: flex;
  flex-direction: column;
}

.page-contact .field-error {
  display: block;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  font-size: 0.82rem;
  color: #f87171;
  padding-left: 2px;
  transition: max-height .25s ease, opacity .25s ease, margin .25s ease;
}

.page-contact .field-error.visible {
  max-height: 3rem;
  opacity: 1;
  margin-top: 0.35rem;
}

.page-contact .input-error {
  border-color: #f87171 !important;
  box-shadow: 0 0 0 2px rgba(248,113,113,0.18);
}

/* ===== FORM STATUS BANNER ===== */

.page-contact .form-status {
  margin-top: 0.5rem;
  padding: 0;
  font-size: 0.9rem;
  border-radius: 10px;
  text-align: center;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .3s ease, opacity .3s ease, padding .3s ease;
}

.page-contact .form-status.sending,
.page-contact .form-status.success,
.page-contact .form-status.error {
  max-height: 5rem;
  opacity: 1;
  padding: 0.75rem 1rem;
}

.page-contact .form-status.sending {
  background: rgba(56,189,248,0.12);
  color: #38bdf8;
  border: 1px solid rgba(56,189,248,0.25);
}

.page-contact .form-status.success {
  background: rgba(74,222,128,0.12);
  color: #4ade80;
  border: 1px solid rgba(74,222,128,0.25);
}

.page-contact .form-status.error {
  background: rgba(248,113,113,0.12);
  color: #f87171;
  border: 1px solid rgba(248,113,113,0.25);
}

/* ===== CHECKBOX GROUP — keep row layout ===== */

.page-contact .form-group.checkbox {
  flex-direction: row;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.page-contact .form-group.checkbox > label {
  flex: 1;
  margin: 0;
  line-height: 1.45;
}

.page-contact .form-group.checkbox > .field-error {
  flex-basis: 100%;
}

/* ===== SELECT DROPDOWN — dark-mode friendly ===== */

.page-contact .contact-form select {
  background-color: var(--bg-card);
  color: var(--text-main);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394a3b8' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  padding-right: 2.4rem;
}

.page-contact .contact-form select option {
  background-color: #1e293b;
  color: #e2e8f0;
  background-image: none;
}

/* Placeholder lisible */
.page-contact .contact-form input::placeholder,
.page-contact .contact-form textarea::placeholder {
  color: rgba(233,236,241,0.55);
}

/* GRID EN COLONNE */
.page-contact .contact-grid {
  grid-template-columns: 1fr;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* Carte réseaux sous le formulaire */
.page-contact .contact-card + .contact-card {
  margin-top: 2.5rem;
}

.page-contact .social-buttons {
  justify-content: center;
  gap: 1.6rem;
}

.page-contact .social-btn {
  width: 64px;
  height: 64px;
}

/* =========================================================
   PAGE CONSEIL CYBER
   ========================================================= */

.page-conseil section:not(.hero-conseil) {
  padding: 2.5rem 0;
}

/* ================= HERO ================= */

.hero-conseil {
  padding: 2rem 0 1.5rem;
  background:
    radial-gradient(circle at 15% 20%, rgba(0,180,255,0.10), transparent 55%),
    radial-gradient(circle at 85% 30%, rgba(0,140,255,0.06), transparent 60%);
}

.hero-conseil h1 {
  font-size: clamp(2.2rem, 4vw, 3rem);
  margin-bottom: 1.2rem;
}

.hero-conseil .hero-subtitle {
  max-width: 640px;
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.page-portfolio .hero-conseil .hero-subtitle {
  margin-left: auto;
  margin-right: auto;
}

/* CENTRER texte Hero (horizontal + VERTICAL) */
.page-conseil .hero-conseil {
  padding: 2rem 0 1.5rem;
  background:
    radial-gradient(circle at 15% 20%, rgba(0,180,255,0.10), transparent 55%),
    radial-gradient(circle at 85% 30%, rgba(0,140,255,0.06), transparent 60%);
}

.page-conseil .hero-conseil {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
}

.page-conseil .hero-conseil .container {
  text-align: center !important;
}

/* ================= SERVICES ================= */

.page-conseil .services-grid {
  padding-bottom: 0.5rem;
}

.services-wrapper {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.6rem;
  margin-top: 3rem;
}

/* Tablette */
@media (max-width: 1100px) {
  .services-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile */
@media (max-width: 680px) {
  .services-wrapper {
    grid-template-columns: 1fr;
  }
}

/* ===== CARDS ===== */

.page-conseil .service-card {
  position: relative;
  background: #e3e9f1;
  /* background: linear-gradient(145deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)); */
  border-radius: 14px;
  /* padding: 2.2rem 1.5rem 1.5rem; */
  padding: 1.6rem 1.4rem 1.3rem;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  overflow: visible;
}

.page-conseil .service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  /* background: radial-gradient(circle at top left, rgba(0,180,255,0.15), transparent 60%); */
  opacity: 0;
  transition: opacity .35s ease;
  border-radius: 14px;
}

.page-conseil .service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.4);
  border-color: rgba(0,180,255,0.35);
}

.page-conseil .service-card:hover::before {
  opacity: 1;
}

/* ===== ICÔNE DÉBORDANTE ===== */

.page-conseil .service-icon {
  position: absolute;
  top: -10px;
  left: 18px;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  /* background: linear-gradient(135deg, var(--accent), #00bfff); */
  background: #1e293b; /* bleu nuit */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  box-shadow: 0 8px 20px rgba(0,0,0,0.4);
  z-index: 2;
}

/* Ajustement du titre à cause de l’icône flottante */
.page-conseil .service-card h3 {
  font-size: 0.95rem;
  margin: 1.2rem 0 0.4rem;
}

.page-conseil .service-card p {
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--text-muted);
}

/* ================= VALEUR APPORTÉE ================= */

.page-conseil .value-section {
  padding-top: 1.0rem;
  padding-bottom: 3.5rem;
  margin-top: -2rem;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.35) 100%
  );
}

.value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2.5rem;
  margin-top: -1rem;
}

.value-grid h3 {
  margin-bottom: 0.5rem;
  color: #E6E8EE;
}

.value-grid p {
  color: var(--text-muted);
  line-height: 1.6;
}

/* ================= MÉTHODE ================= */

.process-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.6rem;
  margin-top: 2.5rem;
}

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent), #00bfff);
  color: #F0F4F8;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-weight: bold;
  margin-bottom: 0.8rem;
   box-shadow: 0 0 0 4px rgba(0,180,255,0.15);
}

.step h3 {
  margin-bottom: 0.4rem;
}

.step p {
  color: var(--text-muted);
  line-height: 1.6;
}

/* ================= FORMULAIRE DE CONTACT  --  CTA ================= */

.cta-section {
  text-align: center;
  padding: 5rem 0;
  background: radial-gradient(circle at center, rgba(0,180,255,0.08), transparent 65%);
}

.cta-section h2 {
  font-size: clamp(1.8rem, 3vw, 2.2rem);
}

.cta-section p {
  margin-top: 0.8rem;
  color: var(--text-muted);
}

.btn-primary {
  display: inline-block;
  margin-top: 1.8rem;
  padding: 0.9rem 2.2rem;
  background: linear-gradient(135deg, var(--accent), #00bfff);
  color: #E6E8EE;
  border-radius: 40px;
  text-decoration: none;
  font-weight: 600;
  transition: transform .25s ease, box-shadow .25s ease;
}

.btn-primary:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 25px rgba(0,0,0,0.45);
}

/* =========================================================
   PAGE ACCOMPAGNEMENT - GRC grc
   ========================================================= */

/* Espacement des sections identique */
.page-accompagnement section:not(.hero-conseil) {
  padding: 2.5rem 0;
}

/* ================= HERO ================= */

.page-accompagnement .hero-conseil {
  padding: 2rem 0 1.5rem;
  background:
    radial-gradient(circle at 15% 20%, rgba(0,180,255,0.10), transparent 55%),
    radial-gradient(circle at 85% 30%, rgba(0,140,255,0.06), transparent 60%);
}

.page-accompagnement .hero-conseil h1 {
  font-size: clamp(2.2rem, 4vw, 3rem);
  margin-bottom: 1.2rem;
}

.page-accompagnement .hero-conseil .hero-subtitle {
  max-width: 640px;
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--text-muted);
}

/* CENTRER texte Hero (horizontal + VERTICAL) */
.page-accompagnement .hero-conseil {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
}

.page-accompagnement .hero-conseil .container {
  text-align: center !important;
}


/* ================= SERVICES ================= */

.page-accompagnement .services-grid {
  padding-bottom: 0.5rem;
}

.page-accompagnement .services-wrapper {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.6rem;
  margin-top: 3rem;
}

/* Tablette */
@media (max-width: 1100px) {
  .page-accompagnement .services-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile */
@media (max-width: 680px) {
  .page-accompagnement .services-wrapper {
    grid-template-columns: 1fr;
  }
}

/* ===== CARDS ===== */

.page-accompagnement .service-card {
  position: relative;
  background: linear-gradient(145deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border-radius: 14px;
  padding: 1.6rem 1.4rem 1.3rem;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  overflow: visible;
}

.page-accompagnement .service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top left, rgba(0,180,255,0.15), transparent 60%);
  opacity: 0;
  transition: opacity .35s ease;
  border-radius: 14px;
}

.page-accompagnement .service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.4);
  border-color: rgba(0,180,255,0.35);
}

.page-accompagnement .service-card:hover::before {
  opacity: 1;
}

/* ===== ICÔNE DÉBORDANTE (IDENTIQUE CONSEIL) ===== */

.page-accompagnement .service-icon {
  position: absolute;
  top: -10px;
  left: 18px;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: #1e293b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  box-shadow: 0 8px 20px rgba(0,0,0,0.4);
  z-index: 2;
}

/* Ajustement titre à cause de l’icône */
.page-accompagnement .service-card h3 {
  font-size: 0.95rem;
  margin: 1.2rem 0 0.4rem;
}

.page-accompagnement .service-card p {
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--text-muted);
}

/* ================= VALEUR APPORTÉE ================= */

.page-accompagnement .value-section {
  padding-top: 1.5rem;
  padding-bottom: 3.5rem;
  margin-top: -2rem;

  /* AUCUN fond */
  background: none !important;

  /* couleurs texte – DARK par défaut */
  --value-title: #f1f5f9;   /* blanc cassé */
  --value-sub:   #e5e7eb;
  --value-text:  #cbd5e1;
}

/* LIGHT MODE */
[data-theme="light"] .page-accompagnement .value-section {
  --value-title: #374151;  /* gris foncé */
  --value-sub:   #4b5563;
  --value-text:  #6b7280;
}

/* application */
.page-accompagnement .value-section h2 {
  color: var(--value-title) !important;
}

.page-accompagnement .value-section h3 {
  color: var(--value-sub) !important;
}

.page-accompagnement .value-section p {
  color: var(--value-text) !important;
}

.page-accompagnement .value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2.5rem;
  margin-top: -1rem;
}

.page-accompagnement .value-grid h3 {
  margin-bottom: 0.5rem;
  color: #E6E8EE;
}

.page-accompagnement .value-grid p {
  color: var(--text-muted);
  line-height: 1.6;
}

/* ================= MÉTHODE ================= */

.page-accompagnement .process-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.6rem;
  margin-top: 2.5rem;
}

.page-accompagnement .step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent), #00bfff);
  color: #F0F4F8;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-weight: bold;
  margin-bottom: 0.8rem;
  box-shadow: 0 0 0 4px rgba(0,180,255,0.15);
}

.page-accompagnement .step h3 {
  margin-bottom: 0.4rem;
}

.page-accompagnement .step p {
  color: var(--text-muted);
  line-height: 1.6;
}

/* ================= CTA ================= */

.page-accompagnement .cta-section {
  text-align: center;
  padding: 5rem 0;
  background: radial-gradient(circle at center, rgba(0,180,255,0.08), transparent 65%);
}

.page-accompagnement .cta-section h2 {
  font-size: clamp(1.8rem, 3vw, 2.2rem);
}

.page-accompagnement .cta-section p {
  margin-top: 0.8rem;
  color: var(--text-muted);
}

/* =========================================================
   PAGE FORMATIONS — Hérite du design ACCOMPAGNEMENT / CONSEIL
   ========================================================= */

/* Grille identique à Conseil / Accompagnement */
.page-formation .services-wrapper {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.6rem;
  margin-top: 3rem;
}

/* Tablette */
@media (max-width: 1100px) {
  .page-formation .services-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile */
@media (max-width: 680px) {
  .page-formation .services-wrapper {
    grid-template-columns: 1fr;
  }
}

/* Valeur */
.page-formation .value-section {
  padding-top: 1.5rem;
  padding-bottom: 4rem;
}

/* CTA cohérent */
.page-formation .cta-section {
  text-align: center;
  padding: 5rem 0;
  background: radial-gradient(circle at center, rgba(0,180,255,0.08), transparent 65%);
}

/* CENTRER texte Hero */
.page-formation .hero-conseil {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important; 
}

.page-formation .hero-conseil .container {
  text-align: center !important;
}

/* =========================================================
   PAGE FORMATIONS — CARDS IDENTIQUES À CONSEIL
   ========================================================= */

.page-formation .service-card {
  position: relative;
  background: linear-gradient(145deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border-radius: 14px;
  padding: 1.6rem 1.4rem 1.3rem;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  overflow: visible;
}

.page-formation .service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.4);
  border-color: rgba(0,180,255,0.35);
}

.page-formation .service-icon {
  position: absolute;
  top: -10px;
  left: 18px;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: #1e293b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  box-shadow: 0 8px 20px rgba(0,0,0,0.4);
  z-index: 2;
}

.page-formation .service-card h3 {
  font-size: 0.95rem;
  margin: 1.2rem 0 0.4rem;
}

.page-formation .service-card p {
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--text-muted);
}

/* Harmonise l'espacement vertical avec Conseil/Accompagnement */
.page-formation section:not(.hero-conseil) {
  padding: 2.5rem 0;
}

.page-formation section {
  position: relative;
}

.page-formation section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 10%, rgba(0,180,255,0.06), transparent 60%);
  pointer-events: none;
}

/* =========================================================
   PAGE RESPONSE A INCIDENT - HERO
   ========================================================= */

.page-reponse section:not(.hero-conseil) {
  padding: 2.5rem 0;
}

/* HERO Réponse à incident */
.page-reponse .hero-conseil {
  padding: 2rem 0 1.5rem;
  background:
    radial-gradient(circle at 15% 20%, rgba(0,180,255,0.10), transparent 55%),
    radial-gradient(circle at 85% 30%, rgba(0,140,255,0.06), transparent 60%);
}

/* CENTRER texte Hero (horizontal + VERTICAL) */
.page-reponse .hero-conseil {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;  /* ← MANQUANT */
}

.page-reponse .hero-conseil .container {
  text-align: center !important;
}

/* =========================================================
   PAGE REPONSE A INCIDENT — CARDS IDENTIQUES A CONSEIL
   ========================================================= */

.page-reponse .services-grid {
  padding-bottom: 0.5rem;
}

.page-reponse .services-wrapper {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.6rem;
  margin-top: 3rem;
}

/* Tablette */
@media (max-width: 1100px) {
  .page-reponse .services-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile */
@media (max-width: 680px) {
  .page-reponse .services-wrapper {
    grid-template-columns: 1fr;
  }
}

/* ===== CARDS ===== */

.page-reponse .service-card {
  position: relative;
  background: linear-gradient(145deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border-radius: 14px;
  padding: 1.6rem 1.4rem 1.3rem;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  overflow: visible;
}

.page-reponse .service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.4);
  border-color: rgba(0,180,255,0.35);
}

/* ===== ICÔNE ===== */

.page-reponse .service-icon {
  position: absolute;
  top: -10px;
  left: 18px;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: #1e293b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  box-shadow: 0 8px 20px rgba(0,0,0,0.4);
  z-index: 2;
}

.page-reponse .service-card h3 {
  font-size: 0.95rem;
  margin: 1.2rem 0 0.4rem;
}

.page-reponse .service-card p {
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--text-muted);
}

/* =========================================================
   PAGE HOME - structure
   ========================================================= */

.page-home .hero-home {
  position: relative;
  padding: 2rem 0 1.5rem;
  background:
    radial-gradient(circle at 20% 20%, rgba(0,180,255,0.08), transparent 60%);
}

/* Texte hero */
.page-home .hero-home h1 {
  font-size: 2.6rem;
  margin-bottom: 0.5rem;
}

.page-home .hero-subtitle {
  font-size: 1.2rem;
  color: var(--accent);
  margin-bottom: 1rem;
}

.page-home .hero-text {
  max-width: 780px;
  color: var(--text-muted);
  line-height: 1.6;
}

/* =========================================================
   HOME — CARDS
   ========================================================= */

.page-home .services-grid {
  position: relative;
}

.page-home .services-grid h2 {
  margin-top: 2rem;
}

/* ==================================================
   HOME — SERVICES GRID RESPONSIVE
   ================================================== */

.page-home .services-wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.8rem;
}

/* Tablette */
@media (max-width: 1024px) {
  .page-home .services-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile étroit */
@media (max-width: 600px) {
  .page-home .services-wrapper {
    grid-template-columns: 1fr;
  }
}

.page-home .service-card {
  position: relative;
  background: linear-gradient(145deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border-radius: 14px;
  padding: 1.6rem 1.4rem 1.3rem;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.page-home .service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.4);
  border-color: rgba(0,180,255,0.35);
}

.page-home .service-icon {
  position: absolute;
  top: -10px;
  left: 18px;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: #1e293b;           /* Ou var(--bg-card-hover) */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem !important;  
  box-shadow: 0 8px 20px rgba(0,0,0,0.4);
  z-index: 2;
  margin-bottom: 0.8rem;         /* Garde l' espacement */
}

.page-home .service-card h3 {
  font-size: 1rem;
  margin-bottom: 0.4rem;
}

.page-home .service-card p {
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--text-muted);
}


/* ======================================================================= */
/* PAGE HOME - CARD d offres de sService — Variante avec encart de titreé  */
/* ======================================================================= */

.page-home .service-card.access {
  overflow: visible; /* important pour superposition */
  padding-top: 3.2rem; /* espace pour overlay */
}

/* wrapper icône google fonts dans la card à l'encart */
.page-home .service-card.access .service-icon-wrapper {
  position: relative;
  left: 0px;  /* 75px Décalage pour laissse passe l'encart */
  margin: 0;
  padding: 0;
  width: 0;
  height: 0;  /* Wrapper invisible */
  top: -50px;
}

/* Position de l'icone shield dans la card avec l'encart */
.page-home .service-card.access .service-icon {
  position: absolute !important;
  top: -18px !important;  /* -18px   */
  right: auto; /* deplacement de l'icone vers la droite */
  left: 180px; /* auto */
  transform: translateY(0);  /* Reset décalage */
}

/* encart sombre */
.page-home .service-card.access .card-overlay-title {
  position: absolute;
  top: -16px; /* -18px  */
  width: max-content;  /* s'adapte au texte */
  max-width: calc(100% - 90px);    /* Espace icône */ 
  right: auto !important;  
  left: 50px !important; /* encart fixé sur son coté gauche * auto * 60px  */
  /* background: rgba(142, 142, 147, 0.92) !important;  /* #8E8E93 avec opacité */
  background: linear-gradient(135deg, rgba(142,142,147,0.95), rgba(142,142,147,0.85)); 
  /* background: linear-gradient(135deg, rgba(10, 25, 47, 0.95), */    /* Bleu marine foncé */
   /*  rgba(20, 40, 70, 0.95)       /* Bleu marine moyen */
  padding: 0.55rem 1rem;  /* 0.4rem 0.9rem  */
  border-radius: 12px;
  backdrop-filter: blur(8px);
  z-index: 2;
  max-width: 65%;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);     /* 0 4px 12px rgba(0,0,0,0.3) */
  border: 1px solid rgba(255,255,255,0.15);  
}

/* titre overlay */
.page-home .service-card.access .card-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-main);
}

/* ========================================================= */
/* PAGE HOME — CARD FOOTER INTERNE A LA CARD en partie basse */
/* ========================================================= */

/* transforme la card en layout vertical */
.page-home .service-card.access {
  display: flex;               /* permet footer en bas */
  flex-direction: column;      /* contenu vertical */
  justify-content: space-between; /* pousse footer vers le bas */
}

/* corps principal */
.page-home .service-card.access .service-card-body {
  flex: 1;                     /* prend l’espace disponible */
}

/* zone basse séparée */
.page-home .service-card.access .service-card-footer {
  margin-top: 1.4rem;          /* espace avec le contenu */
  padding-top: 1rem;           /* espace interne */
  border-top: 1px solid var(--card-divider); /* utiliser la variable dans :root */
  /* border-top: 1px solid rgba(255,255,255,0.08); /* ligne séparation subtile */

  display: flex;               /* centrage horizontal */
  justify-content: center;     /* centre icône */
  align-items: center;
}

/* icône dans footer */
.page-home .service-card.access .service-card-footer .material-symbols-outlined {
  font-size: 1.6rem;           /* taille cohérente */
  opacity: 0.85;               /* douceur visuelle */
  color: var(--accent);        /* couleur thème */
  transition: transform .3s ease, opacity .3s ease; /* effet hover */
}

/* animation hover propre */
.page-home .service-card.access:hover .service-card-footer .material-symbols-outlined {
  transform: scale(1.15);      /* agrandissement léger */
  opacity: 1;
}

.page-home .service-card-footer .material-symbols-outlined {
  font-size: 20px;   /* taille propre et élégante */
  line-height: 1;
}

/* =========================================================
   icones
   ========================================================= */
.service-icon {
  font-size: 42px;
  margin-bottom: 12px;
  line-height: 1;
}

/* =========================================================
   Style icônes light/ dark mode
   ========================================================= */

  .theme-btn {
    background: none;
    color: var(--text-main);
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.theme-btn:hover {
    background: var(--bg-card-hover);
}

/* =========================================================
   Blocs texte et cards pour light mode
   ========================================================= */

/* ===== constraste globaux ===== */

[data-theme="light"] body {
    background: var(--bg-main);
    color: var(--text-main);
}

/* ===== sections sombres devenues trop claires ===== */
[data-theme="light"] .section-dark {
    background: transparent;
    /*background: var(--bg-card);*/
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* ===== cards ===== */
[data-theme="light"] .card {
    background: var(--bg-card);
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

/* ===== cards projets ===== */
[data-theme="light"] .project-card,
[data-theme="light"] .card-project {
    background: var(--bg-card);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
}

/* Titres dans cards de la grille SERVICES */
[data-theme="light"] .service-card {
    background: var(--bg-card);
    border-radius: 14px;
    padding: 1.75rem 1.75rem 2rem;
    box-shadow: var(--shadow-medium);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Titres dans cards de la grille SERVICES */
[data-theme="light"] .service-bullets li {
    color: #1e2433;
    line-height: 1.6;
}

/* Titres dans cards dans grille SERVICES */
[data-theme="light"] .service-card h3 {
    color: #0b1022;
    font-weight: 600;
    margin-top: 1rem;
    margin-bottom: 0.75rem;
}

/* Listes dans cards de la grille SERVICES */
[data-theme="light"] .service-bullets li::marker {
    color: var(--accent);
}

[data-theme="light"] .service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.12);
}

/* Titres dans cards PROJET */
[data-theme="light"] .card h3,
[data-theme="light"] .project-card h3 {
    color: #0b1022;
}

/* Icônes */
[data-theme="light"] .card svg,
[data-theme="light"] .project-card svg {
    color: var(--accent);
    opacity: 0.9;
}

/* Icône principale */
[data-theme="light"] .service-icon,
[data-theme="light"] .service-card .material-symbols-outlined {
    color: var(--accent);
    opacity: 0.9;
}

/* Icône principale un peu plus marquée */
[data-theme="light"] .service-icon .material-symbols-outlined {
    font-size: 2.2rem;
    color: rgba(11,16,34,0.9) !important;  /* Gris foncé/bleu foncé */
}

/* FIX Icônes Light Mode - FORCE ABSOLUE */
html[data-theme="light"] .service-icon {
  background: #e2e8f0 !important;
  background-color: #e2e8f0 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
html[data-theme="light"] .service-icon .material-symbols-outlined,
html[data-theme="light"] .service-card .material-symbols-outlined {
  color: rgba(11,16,34,0.95) !important;
  fill: rgba(11,16,34,0.95) !important;
}

[data-theme="light"] .service-card .material-symbols-outlined {
  color: rgba(11,16,34,0.9) !important;  /* Même couleur pour toutes */
}

/* ===== titres ===== */
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3 {
    color: #0b1022;
}

/* ===== textes secondaires ===== */
[data-theme="light"] .text-muted {
    color: #5b6478;
}

/* ===== texte principal ===== */
[data-theme="light"] p,
[data-theme="light"] li {
    color: #1e2433;
}

/* ===== textes secondaires ===== */
[data-theme="light"] .text-muted,
[data-theme="light"] .section-subtitle {
    color: #4b5568;
}

/* ===== boutons ===== */
[data-theme="light"] .btn-primary {
    background: var(--accent);
    color: #F0F4F8;
}

[data-theme="light"] .btn-outline {
    color: var(--accent);
}

/* ===== header / navbar ===== */
[data-theme="light"] .site-header {
    background: var(--bg-main);
    border-bottom: 1px solid var(--border-soft);
}

/* ===== footer ===== */
[data-theme="light"] footer {
    background: transparent;
    color: #4b5568;
    border-top: 1px solid #e3e7ef;
}

/* ===== ombres ===== */
[data-theme="light"] .shadow-soft {
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

/* Neutralisation overlay sombre */
[data-theme="light"] .hero::before,
[data-theme="light"] .hero::after {
    opacity: 0 !important;
}

/* =========================================================
   HERO IMAGE — LIGHT MODE (IMAGE DÉDIÉE)
   ========================================================= */

  [data-theme="light"] .home-hero::after {
    background-image: url('/assets/images/logo.png');

    /* dimensionnement simple */
    width: min(220px, 22vw);
    height: 85%;

    background-repeat: no-repeat;
    background-position: right 5% center;
    background-size: 85%;

    /* aucun effet graphique */
    opacity: 1;
    filter: none;
    mask-image: none;
    -webkit-mask-image: none;
  }

/* =========================================================
   NAVIGATION — FIX LISIBILITÉ MODE LIGHT
   ========================================================= */

[data-theme="light"] .site-header {
  background: var(--bg-main);
  border-bottom: 1px solid var(--border-soft);
}

/* FR | EN */
[data-theme="light"] .lang-switch a {
  color: #4b5568;
}

[data-theme="light"] .lang-switch a.active {
  color: #0b1022;
  font-weight: 600;
}

/* Bouton thème (icône soleil/lune) */
[data-theme="light"] .theme-btn {
  background: transparent;
  color: #0b1022;
}

[data-theme="light"] .theme-btn:hover {
  background: var(--bg-card-hover);
}

[data-theme="light"] .home-hero::before {
  background: none;
}

/* =========================================================
   Image profil mode dark
   ========================================================= */
[data-theme="dark"] .home-hero::after {
  background-image: url('/assets/images/logo.png');

  /* légèrement plus présent en dark */
  width: min(220px, 22vw);
  height: 85%;
  right: clamp(14px, 2.5vw, 50px);
  background-repeat: no-repeat;
  background-position: right 5% center;
  background-size: 85%;

  /* pas d’effet parasite */
  opacity: 1;
  filter: none;
  mask-image: none;
  -webkit-mask-image: none;
}

.home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 20% 35%,
      rgba(59,108,255,0.06),
      transparent 55%
    );
  z-index: 0;
}

/*  =========================================================
   HOME - Alignement global - Définir une largeur « colonne texte »
   ========================================================= */
/* Colonne texte étroite, centrée */
.container-narrow-left {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Variante alignée à gauche du viewport (comme le hero) */
.container-narrow-left {
  width: min(100% - 3rem, 720px);
  margin-left: clamp(1.5rem, 5vw, 5rem);
  margin-right: auto;
}

/* Réduire espacement portfolio location → education */
.portfolio-intro .portfolio-location {
  margin-bottom: 0.5rem;  /* était probablement 3-4rem */
}

.portfolio-intro .portfolio-location h2 {
  margin-bottom: 0.5rem;
}

.portfolio-intro .portfolio-location p.muted {
  margin-bottom: 0.25rem;
}

.portfolio-intro h2 {
  margin-top: 1rem;     /* espace réduit avant education.title */
}

/* Réduire dimenssions portfolio carte.png */
.portfolio-hero-image img {
  max-width: 400px;     /* largeur max */
  max-height: 300px;    /* hauteur max */
  width: auto;          /* conserve proportions */
  height: auto;
  object-fit: contain;  /* s'adapte sans déformation */
}

/* PAGE HOME MAP */
.map-container {
  position: relative;
  width: 100%;
  height: 400px;        /* hauteur carte */
  margin: 2rem 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}

.leaflet-control-attribution {
  font-size: 10px;
  opacity: 0.6;
}

.map-container iframe {
  width: 100%;
  height: 85%;
  border: none;
  border-radius: 12px;
}

.map-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 85%;
  pointer-events: none;
  z-index: 10;
}

/* Light mode */
html[data-theme="light"] .map-container {
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}

/* MAP - Design Premium */
.portfolio-map {
  width: 100%;
  height: 400px;
  min-height: 400px;
  margin: 2rem 0;
  position: relative;
  border-radius: 16px;                    /* coins arrondis */
  overflow: hidden;
  background: linear-gradient(145deg, #1a1a1a, #2d2d2d);  /* degrade noir profond */
  /* Ombre */
  box-shadow: 
    0 20px 40px rgba(0,0,0,0.4),        /* ombre principale */
    0 0 0 1px rgba(255,255,255,0.05),   /* lueur blanche  */
    inset 0 1px 0 rgba(255,255,255,0.1); /* reflet interieur */
}

/* Cadre fin noir brillant */
.portfolio-map::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, 
    transparent, 
    rgba(255,255,255,0.1), 
    transparent
  ) border-box;
  border-radius: 20px;
  mask: linear-gradient(#E6E8EE 0 0) padding-box, 
        linear-gradient(#E6E8EE 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: 1;
  pointer-events: none;
}

/* Leaflet a l interieur */
.portfolio-map > .leaflet-container {
  border-radius: 18px;  /* légèrement plus petit que parent */
  height: 100% !important;
}

/* Effet survol */
.portfolio-map:hover {
  transform: translateY(-4px);
  box-shadow: 
    0 25px 50px rgba(0,0,0,0.5),
    0 0 0 1px rgba(255,255,255,0.1),
    inset 0 1px 0 rgba(255,255,255,0.15);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Light mode */
html[data-theme="light"] .portfolio-map {
  background: var(--bg-main);
  box-shadow: 
    0 20px 40px rgba(0,0,0,0.15),
    0 0 0 1px rgba(0,0,0,0.1),
    inset 0 1px 0 rgba(255,255,255,0.6);
}

 html[data-theme="light"] .portfolio-map::before {
  background: var(--bg-main);
} 

.cyber-marker {
  background: none !important;
  border: none !important;
  margin: 0 !important;
}

.marker-pin {
  width: 32px;
  height: 32px;
  border-radius: 50% 50% 50% 0;
  background: transparent !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  margin: -16px 0 0 -16px;
  box-shadow: 0 4px 12px rgba(0,122,204,0.4);
  z-index: 1;
}

.cyber-marker span {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 16px;
  color: #F0F4F8;
  font-weight: bold;
  z-index: 2;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* ZOOM CONTROL - TRANSPARENT FINS */
.leaflet-top .leaflet-control-zoom {
  border-radius: 16px !important;
  background: rgba(120,119,198,0.12) !important;  /* gris-violet transparent */
  backdrop-filter: blur(15px) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important;
  padding: 6px !important;  /* plus fin */
  margin-top: 20px !important;
  transition: all 0.3s ease !important;
}

.leaflet-control-zoom a {
  width: 32px !important;   /* plus fin */
  height: 32px !important;
  line-height: 30px !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: #5a5a7a !important;  /* gris moyen */
  background: rgba(255,255,255,0.08) !important;  /* ultra-transparent */
  border-radius: 8px !important;
  margin: 1px 0 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
  transition: all 0.2s ease !important;
}

.leaflet-control-zoom a:hover {
  background: rgba(0,122,204,0.15) !important;  /* bleu transparent */
  color: #007acc !important;
  transform: scale(1.05) !important;
  box-shadow: 0 4px 16px rgba(0,122,204,0.25) !important;
  border-color: rgba(0,122,204,0.3) !important;
}

/* Light/Dark mode */
html[data-theme="light"] .leaflet-control-zoom {
  background: rgba(200,200,210,0.15) !important;
}

html[data-theme="dark"] .leaflet-control-zoom {
  background: rgba(80,80,90,0.2) !important;
}

.leaflet-control-zoom a.leaflet-disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
}

/* Icône circle plus petite dans popup */
.portfolio-map .material-symbols-outlined {
  font-size: 14px !important;  /* était ~24px → maintenant 14px */
  line-height: 1 !important;
  vertical-align: middle !important;
  margin-right: 4px !important;
}

/* =========================================================
   NAV BAR
   ========================================================= */

.header-main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 2.2rem;
  align-items: center;
}

.header-main-nav a {
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.header-right {
  justify-self: end;
  display: flex;
  align-items: center;
}

@media (max-width: 1024px) {
  .header-main-nav {
    display: none;
  }
}

.header-center {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 10px;
}

.site-logo {
  height: 64px;
  width: auto;
  max-width: 200px;
}

/* Bloquer le branding au centre absolu */
.header-brand {
  display: flex;
  justify-content: center;
}

.brand-link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

/* Ranger les outils à gauche */
.header-tools {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-name {
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  font-weight: 600;
}

.header-top-right {
  display: flex;
  align-items: center;
  gap: 2.2rem;
}

/* Liens principaux */
.header-top-right .nav-item > a {
  position: relative;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;

  color: var(--text-main);
  opacity: 0.85;

  padding: 0.4rem 0;
  transition: opacity 0.2s ease;
}

/* Underline premium (discret, non agressif) */
.header-top-right .nav-item > a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;

  width: 0%;
  height: 2px;
  background: var(--accent);

  transition: width 0.25s ease;
}

/* =========================
   DROPDOWN — STYLE PREMIUM
   ========================= */
.header-top-right .has-dropdown .dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 14px);
  left: 0;

  min-width: 220px;
  padding: 0.6rem 0;

  background: rgba(11,16,34,0.96);
  backdrop-filter: blur(12px);

  border-radius: 10px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.45);

  z-index: 1000;
}

/* Activation hover */
.header-top-right .has-dropdown:hover .dropdown {
  display: block;
}

/* Items */
.header-top-right .dropdown li a {
  display: block;
  padding: 0.65rem 1.4rem;

  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.02em;

  color: var(--text-main);
  opacity: 0.85;

  transition: background 0.2s ease, opacity 0.2s ease;
}

/* Hover dropdown */
.header-top-right .dropdown li a:hover {
  background: rgba(255,255,255,0.06);
  opacity: 1;
}

/* Activer déroulant du bouton services */
.nav-item {
  position: relative;
}

.nav-item .dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 220px;

  background: rgba(11,16,34,0.95);
  backdrop-filter: blur(8px);

  padding: 8px 0;
  border-radius: 8px;

  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease;

  z-index: 1200;
}

.nav-item:hover .dropdown,
.nav-item:focus-within .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown li a {
  display: block;
  padding: 8px 16px;
  font-size: 0.9rem;
  opacity: 0.85;
}

.dropdown li a:hover {
  opacity: 1;
}

/* ===============================
   NAV BAR 2 — MAIN NAV
   =============================== */

.header-main-inner {
  display: flex;
  justify-content: center;
  height: 52px;
}

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

.main-nav-list a {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: color 0.2s ease;
}

.main-nav-list a:hover {
  color: var(--text-main);
}

.main-nav-list .nav-icon a,
.main-nav-list .nav-icon span {
  display: flex;
  align-items: center;
  font-size: 16px;
  opacity: 0.75;
}

.main-nav-list .decorative span {
  cursor: default;
}

/* Dropdown — NAV BAR 2 */
.header-main .has-dropdown .dropdown {
  top: calc(100% + 6px);
}

/* ============================
   Ancien : HEADER TOP — BOUTONS DROITE
   (Services / Vous êtes / Contact)
   ============================ */

/* Le groupe à droite */
.header-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap: 18px;
}

/* Base des items */
.header-actions .nav-item{
  position: relative;
}

/* Liens : style “tabs” minimal */
.header-actions .nav-item > a{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  color: rgba(233,236,241,0.85);
  font-weight: 520;
  letter-spacing: 0.02em;
  transition: background 160ms ease, color 160ms ease;
}

/* UNIFORMISER style boutons */
/* DARK MODE - MÊME CLAUSES que Portfolio */
/* UNIFORMISER = Portfolio (COULEUR + NORMAL) */
.header-actions .nav-item > a,
.header-top-right .nav-item > a,
.main-nav a {
  color: rgba(233,236,241,0.86) !important;
  font-size: 0.95rem !important;
  font-weight: normal !important;    /* ← SUPPRIME LE GRAS */
}

html[data-theme="light"] .header-actions .nav-item > a,
html[data-theme="light"] .header-top-right .nav-item > a,
html[data-theme="light"] .main-nav a {
  color: rgba(11,16,34,0.78) !important;
}


/* Transition fluide pour boutons header */
.header-actions .nav-item > a,
.header-top-right .nav-item > a,

/* Focus clavier (accessibilité) */
.header-actions .nav-item > a:focus-visible{
  outline: 2px solid rgba(122,162,255,0.65);
  outline-offset: 2px;
}

/* Dropdown : attaché sous le bouton */
.header-actions .has-dropdown .dropdown{
  display:none;
  position:absolute;
  top: calc(100% + 10px);
  /* right: 0; */               /* dropdown aligné à droite du bouton */
  left: auto;
  min-width: 220px;
  padding: 10px 0;
  border-radius: 12px;
  background: rgba(11,16,34,0.98);
  box-shadow: 0 18px 50px rgba(0,0,0,0.45);
  z-index: 2000;
}

/* Ouvrir au hover (desktop) */
.header-actions .has-dropdown:hover .dropdown{
  display:block;
}

.header-actions .dropdown li a{
  display:block;
  padding: 10px 14px;
  color: rgba(233,236,241,0.86);
  font-size: 0.95rem;
  transition: background 140ms ease, color 140ms ease;
}

.header-actions .dropdown li a:hover{
  background: rgba(255,255,255,0.06);
  color: rgba(233,236,241,1);
}

/* Light mode */
html[data-theme="light"] .header-actions .nav-item > a{
  color: rgba(11,16,34,0.78);
}

html[data-theme="light"] .header-actions .has-dropdown .dropdown{
  background: rgba(255,255,255,0.98);
  box-shadow: 0 18px 50px rgba(15,23,42,0.12);
}

html[data-theme="light"] .header-actions .dropdown li a{
  color: rgba(11,16,34,0.78);
}

html[data-theme="light"] .header-actions .dropdown li a:hover{
  background: rgba(15,23,42,0.06);
  color: rgba(11,16,34,1);
}

/* ====================================== */
/* SEARCH - search dans MENU MOBILE --    */
/* ====================================== */

.mobile-menu-search {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.mobile-menu-nav {
  padding: 0;
}

.mobile-menu-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-menu-nav li {
  border-bottom: 1px solid var(--border-soft);
}

.mobile-menu-nav a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.8rem 0.8rem;
  font-size: 1.05rem;
  font-weight: 400;
}

/* ============================= */
/* MOBILE MENU — LIGHT MODE FIX */
/* ============================= */

/* hover sur rectangles du menu  */
html[data-theme="light"] 
.mobile-menu-nav > ul > li > a:hover,
html[data-theme="light"] 
.mobile-main-link:hover {
  box-shadow: inset 0 0 0 2px #1e3a5f !important;
}

/* hover sur rectangles des sous-menu  */
html[data-theme="light"] .mobile-menu-nav li {
  border-bottom: none;
}

html[data-theme="light"] .mobile-submenu li a {
  display: flex;            
  width: 100%;                
  box-sizing: border-box;     
  padding: 0.55rem 0.9rem;    
  background: transparent;
  border-radius: 12px;;
  transition: background 0.2s ease, border-shadow 0.2s ease;
}

html[data-theme="light"] .mobile-dropdown.open .mobile-submenu li a:hover {
  background: rgba(0, 0, 0, 0.04);
  box-shadow: inset 0 0 0 2px #1e3a5f !important;
}

html[data-theme="light"] .mobile-submenu li a:focus-visible {
  background: rgba(30, 58, 95, 0.08);
  box-shadow: 0 0 0 2px #1e3a5f;
  outline: none;
}

/* fin du hover sur rectangles des sous-menu  */

.mobile-menu-nav a::after {
 /* content: "›";*/
  opacity: 0.6;
}

/* LANGUES EN BAS */
.mobile-menu-lang {
    display: flex !important;
    gap: 0.5rem !important;
    padding-top: 1rem !important;
    margin-top: auto !important;
}

/* ============================================= */
/* BOUTON THEME (DARK / LIGHT)  dans MENU MOBILE */
/* ============================================= */

/* Base : bouton neutre */
.mobile-menu-lang button.theme-toggle {
  background: transparent;
  border: none;
  color: var(--text-main);
  cursor: pointer;
}

/* DARK MODE */
html[data-theme="dark"] .mobile-menu-lang button.theme-toggle {
  color: #E6E8EE;   /* clair, visible sur fond dark */
}

/* LIGHT MODE */
html[data-theme="light"] .mobile-menu-lang button.theme-toggle {
  color: #0b1022;   /* foncé, visible sur fond clair */
}


/* =========================================================
NEW 2    MENU MOBILE — OVERLAY
   ========================================================= */

/* Bouton fermeture */
.mobile-menu-close {
  background: none;
  border: none;
  color: var(--text-main);
  align-self: flex-end;
  font-size: 28px;
  cursor: pointer;
}

/* Recherche */
.mobile-menu-search {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border-bottom: 1px solid var(--border-soft);
  padding-bottom: 0.6rem;
  margin-bottom: 2rem;
}

.mobile-menu-search input {
  background: none;
  border: none;
  color: var(--text-main);
  width: 100%;
  font-size: 1rem;
}

/* Navigation */
.mobile-menu-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mobile-menu-nav li {
  margin-bottom: 1.2rem;
}

.mobile-menu-nav a {
  font-size: 1.05rem;
  font-weight: 400;
}

/* largeur */
/* Tablette + Desktop */
@media (min-width: 768px) {
  .mobile-menu-nav a {
    font-size: 0.95rem;
    font-weight: 400;
  }
}

/* Bas de menu */
  .mobile-menu-socials {
    margin-top: auto;
    margin-bottom: 1.2rem;
    opacity: 0.7;
  }

  .mobile-menu-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    letter-spacing: 0.2em;
  }

  /* ========== CONTACT RGPD + CHECKBOX ========== */
  .page-contact .contact-form input[type="checkbox"] {
    transform: translateX(25px) !important;  /* ← FORCE 25px à droite */
    margin-top: 8px !important;
    margin-right: -10px !important;          
    vertical-align: top !important;
    position: relative !important;
    z-index: 1 !important;
  }

  .page-contact .contact-form label.checkbox,
  .page-contact .contact-form .checkbox label {
    display: block !important;
    /* display: inline-block !important; */
    width: 100% !important; /*  auto  */
    font-size: 12px !important;
    line-height: 1.5 !important;
    padding: 0 4px !important;
    /* margin: 12px -48px !important; */
    margin: 0 !important;   
    /* margin-left: 0.6rem !important; */
    white-space: normal !important;
    max-width: 95vw !important;
    word-wrap: normal !important;
  }

/* ================================================= */
/* PAGE CONTACT                                      */
/* ================================================= */ 

/* HERO : CENTRE + ESPACE SOUS NAV (comme autres pages) */
.page-contact .contact-hero {
  padding: 2rem 0 1.5rem;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
}

.page-contact .contact-hero .container {
  text-align: center !important;
}

.page-contact .contact-hero h1 {
  font-size: clamp(2.2rem, 4vw, 3rem);
  margin-bottom: 1.2rem;
}

.page-contact .contact-hero .hero-subtitle {
  max-width: 640px;
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0 auto;
}

/* CHECKBOX RGPD : 2-3 lignes + couleur sombre light mode */
.page-contact .contact-form .checkbox {
  margin-top: 0rem !important;
  margin-bottom: 0rem !important;
}

.page-contact .contact-form .checkbox input[type="checkbox"] {
  transform: none !important;     /* Supprime décalage bizarre */
  margin-top: 0.2rem;
  margin-right: 0.8rem;
  width: 18px;
  height: 18px;
}

.page-contact .contact-form .checkbox label {
  font-size: 0.92rem !important;  /* Taille lisible */
  line-height: 1.45 !important;   /* 2-3 lignes max */
  color: var(--text-main) !important; /* NOIR light / BLANC dark */
  margin: 0 !important;
  padding: 0 !important;
  white-space: normal !important;
  max-width: 100% !important;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

/* Light mode : texte TRES sombre */
[data-theme="light"] .page-contact .contact-form .checkbox label {
  color: #0f172a !important;      /* Gris très foncé (comme autres pages) */
}

/* TOUS TEXTES contact : couleur unifiée light mode */
[data-theme="light"] .page-contact {
  color: #0f172a !important;      /* Texte principal sombre */
}

[data-theme="light"] .page-contact label,
[data-theme="light"] .page-contact .contact-socials h3,
[data-theme="light"] .page-contact .contact-direct {
  color: #1e293b !important;      /* Labels / titres secondaires */
}

[data-theme="light"] .page-contact p,
[data-theme="light"] .page-contact .muted {;
  color: #334155 !important;   
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .page-contact .contact-hero {
    padding: 2rem 0 1.5rem;
  }
  
  .page-contact .contact-hero h1 {
    font-size: 2.2rem;
  }
}

/* === LIGHT MODE - FORMULAIRE CONTACT VISIBLE === */
[data-theme="light"] .page-contact {
  background: var(--bg-main);;
}

/* Champs inputs : fond gris très clair */
[data-theme="light"] .page-contact .contact-form input,
[data-theme="light"] .page-contact .contact-form textarea {
  background: var(--bg-main);
  color: #1e293b !important;
}

[data-theme="light"] .page-contact .contact-form select {
  background-color: var(--bg-main);
  color: #1e293b !important;
}

/* Labels + textes : sombre */
[data-theme="light"] .page-contact label,
[data-theme="light"] .page-contact .contact-socials h3 {
  color: #1e293b !important;             /* Gris foncé */
}

/* BOUTON LANGUES - NAV IDENTIQUE */
.lang-switch {
  display: flex;
  padding: 0.4rem;
  border-radius: 6px;
  transition: all 0.2s ease;
  text-decoration: none;
}

.lang-icon {
  font-size: 20px !important;
  line-height: 1 !important;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24 !important;
  color: var(--text-muted) !important;
}

.lang-switch:hover .lang-icon {
  color: var(--text-main) !important;
}

[data-theme="light"] .lang-icon {
  color: #64748b !important;
}

[data-theme="light"] .lang-switch:hover .lang-icon {
  color: #1e293b !important;
}

/* ===========================
   PAGE HOME  - CARDS - TITRES PROJETS
   =========================== */

/* DARK - Gris clair */
.project-label {
  color: #e2e8f0;  /* Gris clair dark OK */
  font-weight: 600;
}

/* LIGHT - NOIR lisibles */
html[data-theme="light"] .project-label {
  color: #1a202c !important;     /* Noir-gris FONCÉ */
  font-weight: 700 !important;
}

/* Réduction FORCÉE des Material Symbols dans les cartes */
.page-home main .material-symbols-outlined,
.page-accompagnement main .material-symbols-outlined,
.page-conseil main .material-symbols-outlined,
.page-formation main .material-symbols-outlined,
.page-reponse main .material-symbols-outlined {
  font-size: 20px !important;
  font-variation-settings: 'opsz' 20 !important;
  line-height: 1 !important;
}

/* Cards CONSEIL — forcer la taille des icônes */
.page-conseil .service-card .material-symbols-outlined {
  font-size: 20px !important;
  font-variation-settings: 'opsz' 20 !important;
  line-height: 1 !important;
}

/* BAR NAV 2 Main — icônes Material Symbols */
.header-main .material-symbols-outlined,
.header-main button .material-symbols-outlined,
.header-main a .material-symbols-outlined {
  font-size: 22px !important;
  font-variation-settings: 'opsz' 22 !important;
  line-height: 1 !important;
}

/* fix icône recherche menu mobile */
html[data-theme] .mobile-menu.is-open .mobile-menu-search .material-symbols-outlined {
  font-size: 16px;
  line-height: 1;
}

.nav-item.has-dropdown > .dropdown {
  background-color: #f5f5f4;
  color: #1f2937;
  border-radius: 0.75rem;
  box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}

/* ========================================= */
/* ALIGNER "SERVICES" SUR "VOUS ÊTES" */
/* ========================================= */

.header-main .has-dropdown > .dropdown {
  background-color: #f5f5f4;   /* blanc cassé */
  color: #1f2937;              /* texte foncé */
  border-radius: 0.75rem;
  box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}

/* liens */
.header-main .has-dropdown > .dropdown a {
  color: #1f2937;
  font-weight: 500;
}

/* hover */
.header-main .has-dropdown > .dropdown a:hover {
  background-color: #eeeeec;
}

/* DARK MODE */
[data-theme="dark"]
.header-main .has-dropdown > .dropdown {
  background-color: #111111;
  color: #ffffff;
  border-color: #222222;
}

[data-theme="dark"]
.header-main .has-dropdown > .dropdown a {
  color: #ffffff;
}

/* ================================================= */
/* FIX DROPDOWN "SERVICES" — BAR NAV 2 (HEADER-MAIN) */
/* ================================================= */

/* LIGHT MODE */
html[data-theme="light"] 
.header-main .has-dropdown > .dropdown {
  background-color: var(--bg-main);   /* blanc cassé */
  color: #1f2937;              /* texte foncé */
  border-radius: 0.75rem;
  box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}

/* liens */
html[data-theme="light"]
.header-main .has-dropdown > .dropdown a {
  color: #1f2937;
}

/* hover */
html[data-theme="light"]
.header-main .has-dropdown > .dropdown a:hover {
  background-color: #eeeeec;
}

/* DARK MODE */
html[data-theme="dark"]
.header-main .has-dropdown > .dropdown {
  background-color: var(--bg-main);
  color: var(--bg-main);
  border-color: #222222;
}

html[data-theme="dark"]
.header-main .has-dropdown > .dropdown a {
  color: var(--bg-main);
}

/* ========================================= */
/* MENTIONS LÉGALES — PAGE HEADER THEME-AWARE */
/* ========================================= */

/* Light : header clair (pas d’overlay sombre) */
html[data-theme="light"] body.page-mentions .page-header {
  background: transparent !important;
}

/* Dark : tu peux garder ton style “hero dark” */
html[data-theme="dark"] body.page-mentions .page-header {
  background:
    linear-gradient(rgba(8,12,28,.88), rgba(8,12,28,.88)),
    url('/assets/images/hero-banner.jpg') center / cover no-repeat !important;
}

/* Lisibilité titres */
html[data-theme="light"] body.page-mentions .page-header h1 {
  color: #0b1022 !important;
}
html[data-theme="dark"] body.page-mentions .page-header h1 {
  color: #E6E8EE !important;
}

/* ========================================= */
/* LOGO — MENU MOBILE (THEME AWARE) */
/* ========================================= */

.mobile-menu-brand {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

/* taille contrôlée */
.mobile-menu-brand img {
  max-width: 120px;
  width: 100%;
  height: auto;
  opacity: 0.9;
}

/* DARK MODE : atténuer le logo */
html[data-theme="dark"] .mobile-menu-brand img {
  opacity: 0.65;
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.15));
}

/* LIGHT MODE : logo net */
html[data-theme="light"] .mobile-menu-brand img {
  opacity: 1;
  filter: none;
}

/* ========================================= */
/* MENU MOBILE — LANGUE & THEME ALIGNÉS */
/* — BARRE D’ICÔNES */
/* ========================================= */

.mobile-menu-lang {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* base commune */
.mobile-menu-lang a,
.mobile-menu-lang button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: inherit;
}

.mobile-menu-nav {
  margin-top: 1rem;
}

/* Langue = référence visuelle */
.mobile-menu-lang a .material-symbols-outlined {
  font-size: 24px;
  line-height: 1;
}

/* ========================================= */
/* THEME TOGGLE                              */
/* ========================================= */

/* couleurs cohérentes */
html[data-theme="dark"] .mobile-menu-lang {
  color: #e5e7eb;
}

html[data-theme="light"] .mobile-menu-lang {
  color: #111827;
}

/* ========================================= */
/* FIX — RECHERCHE (MENU MOBILE) */
/* ========================================= */

/* conteneur plus fin */
.mobile-menu .mobile-menu-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* champ plus discret */
.mobile-menu .mobile-menu-search input {
  font-size: 14px;
  padding: 0.35rem 0;
  background: transparent;
}

/* DROPDOWN — SUPPORT MOBILE (CLICK) */
/* ========================================= */

.has-dropdown.open > .dropdown {
  display: block;
}

/* ========================================= */
/* PORTFOLIO — CARTOUCHE CENTRÉ EN TABLETTE */
/* ========================================= */

@media (min-width: 769px) and (max-width: 1024px) {

  .page-portfolio .portfolio-sidebar {
    max-width: 520px;   /* largeur confortable en tablette */
    /* width: 100%; */
    margin-left: auto;
    margin-right: auto;
  }

}

/* ========================================= */
/* PORTFOLIO — ESPACEMENT VERTICAL CARTOUCHE */
/* ========================================= */

.page-portfolio .portfolio-sidebar {
  margin-top: 2rem;
}

/* ========================================= */
/* PORTFOLIO — TITRES FORMATION (DIPLÔMES) */
/* ========================================= */

.page-portfolio .edu-title {
  font-size: 1.1rem;     /* ↓ taille maîtrisée */
  line-height: 1.4;
  margin-bottom: 0.25rem;
}

.page-portfolio .edu-title.diploma {
  font-size: 1.15rem;
  font-weight: 600;
}

.page-portfolio .edu-title.cert {
  font-size: 1.05rem;
  font-weight: 500;
}

/* ========================================= */
/* PORTFOLIO — PUCE DEVANT LES DIPLÔMES */
/* ========================================= */

.page-portfolio .edu-title {
  position: relative;
  padding-left: 1.25rem;   /* espace pour la puce */
}

/* puce */
.page-portfolio .edu-title::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0.1em;
  font-size: 1.2em;
  line-height: 1;
  color: var(--accent-color, #4f8cff);
}

/* ========================================= */
/* PORTFOLIO — ESPACEMENT ENTRE DIPLÔMES */
/* ========================================= */

.page-portfolio .education-item {
  margin-bottom: 2rem;   /* espace entre chaque diplôme */
}

.page-portfolio .education-item .edu-tags {
  margin-left: 1.25rem;   /* même valeur que le padding-left du titre */
}

/* =========================================================
   SIZE  - MATERIAL SYMBOLS — RÈGLE GLOBALE UNIQUE
   ========================================================= */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-size: 24px;
  line-height: 1;
  vertical-align: middle;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 20;
}

.mobile-menu .mobile-menu-search .material-symbols-outlined {
  font-size: 20px;
  opacity: 0.8;
}

.mobile-menu-lang a .material-symbols-outlined {
  font-size: 20px;
}

.mobile-menu-lang button.theme-toggle .material-symbols-outlined {
  font-size: 20px;
}

/* === FIX FINAL - ÉCRASER .material-symbols-outlined GLOBALE === */
/* .header-top .material-symbols-outlined {
  background: transparent !important;
  background-color: transparent !important;
} */ 

html[data-theme="dark"] .header-top .material-symbols-outlined {
  color: #E9ECF1 !important;
}

html[data-theme="light"] .header-top .material-symbols-outlined {
  color: #0B1022 !important;
}

/* NUKE fond blanc header-top icônes */
.header-top button span,
.header-top div button span {
  background: transparent !important;
  background-color: transparent !important !important;
  border: none !important;
  box-shadow: none !important;
}

/* NUKE 2 - Style inline + Google Fonts */
.header-top span[style],
.header-top button[style] span {
  background: transparent !important;
  background-color: transparent !important !important;
}

/* =====================================================
   SEARCH INPUT — THEMING LIGHT / DARK
   ===================================================== */

/* input NE DOIT JAMAIS définir son propre fond */
.header-search input {
  background-color: transparent;
  border: none;
  outline: none;
  color: inherit;
}

/* ===== DARK ===== */
html[data-theme="dark"] .header-search {
  background-color: rgba(255, 255, 255, 0.06);
}

/* ===== LIGHT ===== */
html[data-theme="light"] .header-search {
  background-color: rgba(0, 0, 0, 0.06);
}

/* Placeholder */
.header-search input::placeholder {
  color: var(--text-muted);
}

/* ============================
   LEGAL TIMELINE — GRID CLEAN
   ============================ */

.legal-timeline {
  display: grid;
  grid-template-columns: 30px 1fr;
  row-gap: 3.5rem;
}

.legal-item {
  display: contents; /* important */
}

.legal-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  position: relative;
  left: 10px;            /* jeu horizontal */
  /* top: 0; */
  transform: translateY(0.9rem);
  /* align-self: start;
  margin-top: 0.90em;    /* pas 0.6     */
  box-shadow: 0 0 0 3px rgba(120,160,255,0.15);
}

.legal-content-block { /* interligne global */
  display: flex;
  flex-direction: column;
  gap: 0.5em;   
}

.legal-content-block p {    /* interligne intra bloc */
  line-height: 1.55; /* 1.75  */;
  margin: 0;
}

.legal-content-block h2 { /* interligne general */
  margin-bottom: 0.4em;  /* au lieu du gap par défaut */
  margin-top: 0;
  font-size: 1.35rem;   /* légèrement réduit */
  font-weight: 600;
}

/* Ligne verticale */
.legal-timeline::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 0;
  bottom: 0;
  width: 1.5px;
  opacity: 0.6;
  background: rgba(120,160,255,0.4);
}

.legal-timeline {
  position: relative;
}

/* FIX FORT - SPÉCIFICITÉ MAX */
html[data-theme="light"] .page-contact .contact-form label,
html[data-theme="light"] .page-contact .contact-form .checkbox label,
html[data-theme="light"] .page-contact main label {
  color: #000000 !important;
  font-weight: 600 !important;
}

html[data-theme="light"] .page-contact .contact-form input::placeholder,
html[data-theme="light"] .page-contact .contact-form textarea::placeholder {
  color: #555 !important;
}

html[data-theme="light"] .page-contact .contact-form input,
html[data-theme="light"] .page-contact .contact-form textarea,
html[data-theme="light"] .page-contact .contact-form select {
  color: #111 !important;
}

/* ============================= */
/* Fenetre du MENU mobile 1954   */
/* ============================= */ 
.mobile-menu {
  padding-left: 1.4rem;
  padding-right: 1rem;

  position: fixed;
  top: 55px;
  right: 0;
  left: auto;

  width: 94%;
  max-width: 440px;

  height: auto;
  max-height: calc(100dvh - 24px);

  transform: translateX(100%);
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  z-index: -1;

  /* background: var(--bg-main); */

  border: 2px solid;
  border-radius: 16px;
  
  background: var(--bg-main);
  overflow-y: auto;

  box-shadow:     /* OMBRE en dessous */
    0 20px 40px rgba(0,0,0,0.15),  /* ombre principale portée */
    0 1px 3px rgba(0,0,0,0.1);     /* ombre contact subtile */
}

/* Dark : contour + ombre adaptés */
html[data-theme="dark"] .mobile-menu {
  border-color: rgba(255,255,255,0.25);
  box-shadow: 
    0 20px 40px rgba(0,0,0,0.4),
    0 1px 3px rgba(0,0,0,0.3);
}

/* Light : contour + ombre adaptés */
html[data-theme="light"] .mobile-menu {
  border-color: rgba(15,23,42,0.2);    
  box-shadow: 
    0 20px 40px rgba(0,0,0,0.12),
    0 1px 3px rgba(0,0,0,0.08);
}

/* =========================================
   DÉCALAGE RECTANGLES VERS LA DROITE
   ========================================= */
.mobile-menu-nav > ul > li > a,
.mobile-main-link {
  margin-left: 14px;     
  margin-right: 14px;    
  width: calc(100% - 24px); 
}

/* Garde le padding interne des rectangles */
.mobile-menu-nav > ul > li > a,
.mobile-main-link {
  padding: 0 1rem 0 0.75rem;
}

.mobile-menu.is-open {
  transform: translateX(0);
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
  z-index: 3000;
}

/* MOBILE — ≤ 767px : PLEINE PAGE */
@media (max-width: 767px) {
  .mobile-menu {
    top: 0px;
    width: 94%;
    right: 3%;
    height: auto;     
    max-width: 2000px;
  }
}

/* TABLETTE — 768px à 1023px : ÉLARGIE */
@media (min-width: 768px) and (max-width: 1023px) {
  .mobile-menu {
    top: 0px;
    width: 35%;      
    max-width: 2000px;
    height: auto;     
    bottom: auto;     
  }
}

/* DESKTOP — ≥ 1024px : ÉLARGIE */
@media (min-width: 1024px) {
  .mobile-menu {
    width: 30%;       /* ← ÉLARGIE (20% → 30%) */
    max-width: 2000px; /* ← ÉLARGIE (600px → 750px) */
  }
}

.site-header {
  max-height: 96px;
}

/* =========================================
   DÉCALAGE ICÔNES — LES DEUX THÈMES
   ========================================= */

/* TOUS les thèmes : icônes haut + search */
.mobile-menu .langues,
.mobile-menu .theme-toggle,
.mobile-menu .home-button,
.mobile-menu input[type="search"],
.mobile-menu .search {
  margin-left: 12px !important;
  margin-right: 12px !important;
}

/* Barre de recherche spécifiquement */
.mobile-menu input[type="search"] {
  padding-left: 0.75rem !important;
  margin-left: 12px !important;
}


/* =========================================
   DÉCALAGE ICÔNES HAUT DU MENU
   ========================================= */

/* Icônes langues/thème/retour home (en haut) */
.mobile-menu .langues,
.mobile-menu .theme-toggle,
.mobile-menu .home-button,
.mobile-menu [class*="lang"],
.mobile-menu [class*="theme"],
.mobile-menu [class*="home"] {
  margin-left: 12px !important;
  margin-right: 12px !important;
}

/* Barre de recherche (en dessous) */
.mobile-menu .search,
.mobile-menu [class*="search"] {
  margin-left: 12px !important;
  margin-right: 12px !important;
  padding-left: 0.75rem !important;
}


/* **************************************************************** */
/*  FORMULAIRE - PAGE CONTACT                                       */
/* **************************************************************** */
/* Décalage RGPD checkbox */
.page-contact .contact-form .checkbox label {
  margin-left: 0.8rem !important;  /* 12px d'espace */
  width: auto !important;          /* libère la contrainte */
  padding-left: 0 !important;
}

.page-contact .contact-form .btn-primary {
  background: var(--accent) !important;
  color: #0b1022 !important;
  border: none !important;
  padding: 0.75rem 1.6rem !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
}
.page-contact .contact-form .btn-primary:hover {
  background: color-mix(in srgb, var(--accent) 90%, black) !important;
}

/* ouv mobilemenu sans ajout px qui fait disparaitre la barre de defilement à droite */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw;
}

/* ============================= */
/* FORCE FOND GLOBAL UNIFIÉ (FIX) */
/* ============================= */

/* Le fond DOIT rester sur html + body */
html[data-theme="light"],
html[data-theme="light"] body {
  background: var(--bg-main) !important;
}

/* ================================ */
/* SLIDER HOME EXECUTION FIX ===== */
/* ============================= */

.projects-slider-wrapper {
  position: relative;
  max-width: 700px;
  margin: 0 auto;
}

.projects-viewport {
  overflow: hidden;
  width: 100%;
}

.projects-track {
  display: flex !important;
  transition: transform 0.5s ease;
  width: 100%;
}

.projects-track .project-card {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box;
}

/* FLÈCHES */

.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.6);
  color: white;
  border: none;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  font-size: 32px;
  cursor: pointer;
  padding: 0.4rem 0.8rem;
  z-index: 20;
  transition: all 0.3s ease;
}

.slider-arrow:hover {
  background: #00d4ff;
  transform: translateY(-50%) scale(1.1);
}

.slider-arrow.left { left: -55px; }

.slider-arrow.right { right: -55px; }

.slider-dots {
  text-align: center;
  margin-top: 20px;
}

.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 6px;
  border-radius: 50%;
  background: #bbb;
  cursor: pointer;
}

.dot.active {
  background: #e3e9f1;
}

.projects-viewport {
  overflow: hidden;
  width: 100%;
  touch-action: pan-y;
}

/* ===== FLÈCHES VISIBLES UNIQUEMENT ≥ 768px ===== */

.slider-arrow {
  display: none;
}

@media (min-width: 768px) {
  .slider-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

@media (hover: hover) {
  .slider-arrow {
    display: flex;
  }
}

[data-theme="light"] .project-label {
    color: var(--text-main);
}

.page-home .align-hero-left {
  max-width: 820px;
  margin: 0 auto;
}

/* =========================================================
   HOME — Cards services (light)
   ========================================================= */

[data-theme="light"] .page-home .service-card {
    background-color: #e3e9f1;
    border: 1px solid rgba(31, 41, 51, 0.06);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
}

[data-theme="light"] .page-conseil .service-card {
    background-color: #e3e9f1;
    border: 1px solid rgba(31, 41, 51, 0.06);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
}

[data-theme="light"] .page-accompagnement .service-card {
    background-color: #e3e9f1;
    border: 1px solid rgba(31, 41, 51, 0.06);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
} 

[data-theme="light"] .page-formation .service-card {
    background-color: #e3e9f1;
    border: 1px solid rgba(31, 41, 51, 0.06);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
} 

[data-theme="light"] .page-reponse .service-card {
    background-color: #e3e9f1;
    border: 1px solid rgba(31, 41, 51, 0.06);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
} 

[data-theme="light"] .page-contact .contact-card {
    background-color: #e3e9f1;
    border: 1px solid rgba(31, 41, 51, 0.06);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
}

[data-theme="light"] .page-contact .contact-card .contact-form {
    background-color: transparent;
    border: none;
    box-shadow: none;
}

[data-theme="light"] .page-contact .field-error {
    color: #dc2626;
}

[data-theme="light"] .page-contact .input-error {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 2px rgba(220,38,38,0.15);
}

[data-theme="light"] .page-contact .form-status.sending {
    background: rgba(14,165,233,0.1);
    color: #0369a1;
    border-color: rgba(14,165,233,0.25);
}

[data-theme="light"] .page-contact .form-status.success {
    background: rgba(22,163,74,0.1);
    color: #15803d;
    border-color: rgba(22,163,74,0.25);
}

[data-theme="light"] .page-contact .form-status.error {
    background: rgba(220,38,38,0.08);
    color: #dc2626;
    border-color: rgba(220,38,38,0.2);
}

[data-theme="light"] .page-contact .contact-form select {
    background-color: var(--bg-main);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23334155' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.8rem center;
}

[data-theme="light"] .page-contact .contact-form select option {
    background-color: #fff;
    color: #1e293b;
    background-image: none;
}

[data-theme="light"] .page-contact .contact-socials {
    background-color: #e3e9f1;
    border: 1px solid rgba(31, 41, 51, 0.06);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
}

.page-contact .contact-form .btn-primary {
    background: linear-gradient(135deg, var(--accent), #00bfff) !important;
    color: #F0F4F8 !important;
    border: none !important;
    padding: 0.75rem 1.6rem !important;
    border-radius: 999px !important;
    font-weight: 600 !important;
}


/* =========================================================
   HOME — Réduction hauteur cards (light)
   ========================================================= */

[data-theme="light"] .page-home .service-card {
    padding: 1.4rem 1.4rem 1rem;
}

[data-theme="light"] .page-home .service-card h3 {
    font-size: 1rem;              /* 16px */
    margin-bottom: 0.7rem;
}

[data-theme="light"] .page-home .service-bullets {
    margin-top: 0.4rem;
}

[data-theme="light"] .page-home .service-bullets li {
    font-size: 0.9rem;            /* ≈14.4px */
    margin-bottom: 0.35rem;
    line-height: 1.35;
}

/* =========================================================
   DropDown dans menu-mobile
   ========================================================= */

/* Offset global pour ancres avec header sticky */
section[id] {
  scroll-margin-top: 120px;
}

/* ============================= */
/* MOBILE NAV — STYLE PREMIUM */
/* ============================= */

/* Liens principaux */
/*.mobile-menu-nav > ul > li > a,
.mobile-dropdown-toggle {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;

  padding: 0.85rem 0;
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;

  letter-spacing: 0.04em;
  border-bottom: 1px solid rgba(255,255,255,0.06);
} */ 

/* ============================= */
/* TITRE DROPDOWN (FORMATION) */
/* ============================= */

.mobile-dropdown-toggle {
  font-size: 1.1rem;
  color: #1e3a8a; /* #0b1022  */
  background: none;
  border: none;
  cursor: pointer;
  padding-left: 0;
}

/* Supprime la flèche */
.mobile-dropdown .arrow {
  display: none;
}

/* ============================= */
/* SOUS MENU    1954             */
/* ============================= */

.mobile-submenu li a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0.65rem 0;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Réduit la hauteur globale */
.mobile-menu-nav a,
.mobile-dropdown-toggle {
  min-height: auto;
  line-height: 1.2;
}

.mobile-submenu {;
  background: transparent;
}

/* =========================================================
   MOBILE MENU — VERSION PREMIUM DARK
   ========================================================= */
/* Reset */
.mobile-menu-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-menu-nav li {
  width: 100%;
}

/* ============================= */
/* LIENS PRINCIPAUX              */
/* ============================= */

/* .mobile-menu-nav > ul > li > a,
.mobile-dropdown-toggle {
  display: flex;
  align-items: center;              /* centre vertical */
  /* justify-content: flex-start;

  width: 100%;
  padding: 0.75rem 0;

  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;

  border-bottom: 1px solid rgba(255,255,255,0.06);/
} */

/* ============================= */
/* TITRE DROPDOWN                */
/* ============================= */

/* Supprime toute flèche */
.mobile-dropdown .arrow {
  display: none;
}

/* Compact global */
.mobile-menu-nav a,
.mobile-dropdown-toggle {
  line-height: 1.2;
}

/* ========================================================= */
/*   MOBILE NAV — STYLE PREMIUM LIGHT                        */
/* ========================================================= */

html[data-theme="light"] .mobile-dropdown-toggle {
  height: 28px;
}

/* ========================================================= */
/*   MOBILE MENU background                                  */
/* ========================================================= */

/* Fond Dark */
html[data-theme="dark"] .mobile-menu {
  background: #0b1022;
}

/* Fond Light
html[data-theme="light"] .mobile-menu {
  background: #f3f4f6;/
} */


/* ========================================================= */
/*  MOBILE MENU - TITRES PRINCIPAUX (état normal fermé)      */
/* ========================================================= */
  .mobile-menu-nav > ul > li > a,
.mobile-dropdown-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;

  width: 100%;
  height: 34px;
  padding: 0 0.75rem;

  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;

  background: rgba(0,0,0,0.05);
  border: none;
}


/* Bloc inactif */
html[data-theme="dark"] 
.mobile-menu-nav > ul > li > a,
html[data-theme="dark"] 
.mobile-dropdown-toggle {
  /* background: rgba(255,255,255,0.04); */
  color: #e5e7eb;
}

html[data-theme="light"] 
.mobile-menu-nav > ul > li > a,
html[data-theme="light"] 
.mobile-dropdown-toggle {
  /* background: rgba(0,0,0,0.05);*/
  color: #1f2937;
}

/* Supprime toutes lignes */
.mobile-menu-nav a {
  border: none;
}

/* =========================================================
    MOBILE MENU - FLÈCHE
   ========================================================= */

.mobile-dropdown-toggle .arrow {
  margin-left: auto;
  font-size: 0.95rem;
  opacity: 0.6;
}

/* =========================================================
    MOBILE MENU - ÉTAT OUVERT
   ========================================================= */

.mobile-dropdown.open > .mobile-dropdown-toggle {
  color: #1e3a8a;
}

html[data-theme="dark"] 
.mobile-dropdown.open > .mobile-dropdown-toggle {
  color: #3b6cff;
  /* background: transparent; */
}

html[data-theme="light"] 
.mobile-dropdown.open > .mobile-dropdown-toggle {
  color: #1e3a8a;
  /* background: transparent; */
}

/* =========================================================
    MOBILE MENU - SOUS MENU
   ========================================================= */
.mobile-submenu {
  padding: 0;
  margin: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.mobile-submenu li a {
  display: flex;
  align-items: center;
  justify-content: space-between;

  height: 28px;

  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;

  border: none;
  border-radius: 14px;
  padding: 0 0.6rem 0 1.2rem;
}

.mobile-submenu li {
  margin: 0;
}

/* Quand le dropdown est ouvert */
.mobile-dropdown.open > .mobile-submenu {
  max-height: 2000px;
}

/* Sous-menu clair et lisible */
html[data-theme="dark"] 
.mobile-dropdown.open .mobile-submenu li a {
  background: #111827;
  color: #f3f4f6;
}

/* Sous-menu aligné avec rectangle menu */
html[data-theme="light"] .mobile-submenu li a {
  margin-left: 0.75rem;
  width: calc(100% - 0.75rem);
}

html[data-theme="light"] 
.mobile-menu-nav > ul > li > a {
  font-size: 1.05rem;
  font-weight: 400;
}

/* html[data-theme="light"] 
.mobile-dropdown.open .mobile-submenu li a {
  background: background: #e5e7eb;
  color: #1f2937;
} */ 

/* =========================================================
    MOBILE MENU - SCROLL OFFSET HEADER STICKY
   ========================================================= */

section[id] {
  scroll-margin-top: 120px;
}


/* Alignement parfait des titres */
.mobile-menu-nav > ul > li > a,
.mobile-dropdown-toggle {
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
  border-radius: 14px;
}

/* Formation fermé = même fond que les autres */
.mobile-dropdown > .mobile-dropdown-toggle {
  background: rgba(0,0,0,0.05);
}

html[data-theme="dark"] 
.mobile-dropdown > .mobile-dropdown-toggle {
  background: rgba(255,255,255,0.04);
}

/* =========================================================
   MOBILE MENU — RADIUS ALIGNÉ AVEC LES CARDS
   ========================================================= */
/* Dark : contour clair visible */
html[data-theme="dark"] .mobile-menu {
  border-color: rgba(255,255,255,0.12);
}


/* Light : contour discret */
html[data-theme="light"] .mobile-menu {
  border-color: rgba(15,23,42,0.08);
}

/* =========================================================
   ARRONDIS — MENU MOBILE
   ========================================================= */

/* Supprime tout débordement visuel */
.mobile-menu-nav li {
  overflow: visible;
}

/* =========================================================
   MOBILE MENU — SUPPRIMER LES LIGNES SOUS LES RECTANGLES
   ========================================================= */
.mobile-menu-nav li,
.mobile-menu-nav > ul > li > a,
.mobile-dropdown-toggle,
.mobile-submenu li,
.mobile-submenu li a {
  border-bottom: none !important;
  box-shadow: none !important;      /* au cas où la ligne vient d’un shadow */
  outline: none !important;
}

/* =========================================
   SUPPRESSION FLÈCHES SOUS-MENU
   ========================================= */
.mobile-submenu li a::after {
  content: none !important;
  display: none !important;
}

/* =========================================
   SOUS-MENU = MÊME FOND QUE MOBILE-MENU
   ========================================= */
html[data-theme="dark"] .mobile-dropdown.open .mobile-submenu li a {
  background: #0b1022; /* même que .mobile-menu dark */
  color: #e5e7eb;
}

/* Ligne titre dropdown: lien + bouton flèche */
.mobile-dropdown-row{
  display:flex;
  align-items:center;
  width:100%;
}

.mobile-dropdown {
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Lien principal (texte) */
.mobile-main-link {
  display: flex;
  align-items: center;
  height: 28px;
  padding: 0 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Bouton flèche positionné à droite */
.mobile-dropdown-toggle {
  position: absolute;
  right: 0.75rem;
  top: 0;
  height: 28px;
  width: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
}

/* rotation */
.mobile-dropdown.open .arrow {
  transform: rotate(180deg);
}

/* =========================================
   RECTANGLES MENU MOBILE — BACKGROUND (SAFE)
   ========================================= */

/* HAUTEUR UNIFORME (rectangles, pas la flèche) */
.mobile-menu-nav > ul > li > a,
.mobile-main-link {
  height: 34px;
  min-height: 28px;
  display: flex;
  align-items: center;
  font-weight: 600;
}

.mobile-menu-nav > ul > li > a {
  height: 34px;
  min-height: 28px;
  display: flex;
  align-items: center;
}

/* LIGHT = bleu maritime */
html[data-theme="light"] .mobile-menu-nav > ul > li > a,
html[data-theme="light"] .mobile-main-link {
  background: #e5e7eb;
  color: #0b1022;
}

/* DARK = bleu pastel clair */
html[data-theme="dark"] .mobile-menu-nav > ul > li > a,
html[data-theme="dark"] .mobile-main-link {
  background: #7ea6d9;
  color: #0b1022;
}

.mobile-main-link {
  border-radius: 14px;
}

/* Titres du menu réduits */
.mobile-main-link,
.mobile-menu-nav > ul > li > a {
  width: auto !important;
  display: inline-flex;
}

/* .mobile-main-link,
.mobile-menu-nav > ul > li > a,
.mobile-dropdown-toggle {
  width: auto !important;
  display: inline-flex;
  font-size: 0.9rem;
} */

html[data-theme="dark"] .mobile-dropdown-toggle .arrow {
  color: #7ea6d9; /* même bleu pastel que tes rectangles */
}

html[data-theme="light"]
.mobile-menu-nav > ul > li > a {
  padding-top: 0.16rem;
  padding-bottom: 0.16rem;
}

/* =========================================
   CONTOUR MENU-MOBILE
   ========================================= */

.mobile-menu {
  border: 1px solid transparent;   /* base neutre */
}

/* Dark : contour clair visible */
html[data-theme="dark"] .mobile-menu {
  border-color: rgba(255,255,255,0.12);
}

/* Light : contour discret */
html[data-theme="light"] .mobile-menu {
  border-color: rgba(15,23,42,0.08);
}

/* ============================= */
/* HEADER MENU MOBILE (logo + X) */
/* ============================= */

.mobile-menu-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.2rem 0.8rem 0.4rem;
}

.mobile-menu-logo {
  height: 56px;
  width: auto;
}

/* Bouton croix de fermeture du menu */
.mobile-menu-close {
  position: absolute;
  top: 10px;
  right: 16px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* taille croix */
.mobile-menu-close .material-symbols-outlined {
  font-size: 36px;
  top: 0px;
}


/* help  Centrer logo + burger à droite */ 
/* .header-center {
  grid-column: 2;
  justify-self: center;
}

.header-right {
  grid-column: 1;
}

.header-center {
  align-self: start; 
  padding-top: 0;    
  margin-top: -62px;   
} */

/* =========================================================
   NAV BAR HEADER MAIN
   ========================================================= */

.header-main-nav {
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.header-main-inner {
  display: flex;
  justify-content: center;
}

.header-main-menu {
  display: flex;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0.9rem 0;
}

.header-main-menu a {
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: opacity 0.2s ease;
}

/* LIGHT */
html[data-theme="light"] .header-main-nav {
  background: #ffffff;
  border-color: rgba(0,0,0,0.06);
}

html[data-theme="light"] .header-main-menu a {
  color: #1f2937;
}

html[data-theme="light"] .header-main-menu a:hover {
  color: #1e3a8a;
}

/* DARK */
html[data-theme="dark"] .header-main-nav {
  background: #0b1022;
  border-color: rgba(255,255,255,0.08);
}

html[data-theme="dark"] .header-main-menu a {
  color: #e5e7eb;
}

html[data-theme="dark"] .header-main-menu a:hover {
  color: #7ea6d9;
}

.header-main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 2rem;
}

.header-main-nav a {
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* =========================================
   HOME NAV BAR 
   ========================================= */

.home-main-nav {
  width: 100%;
  background: #0f172a; /* sombre profond */
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.home-main-nav .container {
  display: flex;
  justify-content: center;
}

.home-main-nav ul {
  display: flex;
  gap: 3rem;
  list-style: none;
  margin: 0;
  padding: 0.9rem 0;
}

.home-main-nav a {
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.85rem;
  color: #e5e7eb;
}

.home-main-nav a:hover {
  color: #7ea6d9;
}

/* =========================================
   HOME NAV — DESKTOP ONLY
   ========================================= */

@media (max-width: 1024px) {
  .home-main-nav {
    display: none !important;
  }
}

/* =========================================
   BURGER — MOBILE & TABLET ONLY
   ========================================= */

[data-theme="light"] .home-hero::after {
  right: 15%;
}

[data-theme="dark"] .home-hero::after {
  right: 15%;
}

.header-top {
  height: 56px;
  min-height: 56px;
}

/* =========================
   DESKTOP HEADER TOOLS
========================= */

/* Switch icône thème */
.theme-dark { display: none; }

html[data-theme="dark"] .theme-light { display: none; }
html[data-theme="dark"] .theme-dark  { display: inline; }

.header-desktop-actions {
  display: none;
}

@media (min-width: 1024px) {
  .header-desktop-actions {
    display: flex;
    align-items: center;
    gap: 1.2rem;
  }
}

@media (max-width: 1024px) {
  .header-right {
    display: flex;
    justify-content: flex-end;
    width: 100%;
  }
}

@media (min-width: 1024px) {
  .header-burger {
    display: none !important;
  }

  .header-burger { 
    margin-left: auto;
  }
}

html[data-theme="dark"] .page-conseil .service-card {
    background: var(--bg-card);
}


.site-logo {
  display: inline-flex;
  align-items: center;
}

.site-logo img {
  height: 56px;
  width: auto;
  display: block;
  margin-top: -8px;
}


/* FORCE LOGO TOUT LE TEMPS */
  .site-logo,
 .site-logo img {
  display: inline-flex !important;
  visibility: visible !important;
} 

/* CACHE UNIQUEMENT SUR HOME 
.page-home .site-logo {
  display: none !important;
} */ 

/* =========================================
   HEADER-TOP : GRID 3 COLONNES PARTOUT
   ========================================= */
.header-top {
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100%;
  max-width: 100%;
}

.header-center {
  justify-self: center;
}

/* COLONNE 3 : DROITE (ICÔNES + BURGER) */
.header-right {
  justify-self: end !important;
  display: flex !important;
  align-items: center !important;
}

.header-left {
  justify-self: start !important;
}

/** =========================================
   DESKTOP : 3 ICÔNES + BURGER CACHÉ
   ========================================= */
  
.header-desktop-tools {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-desktop-tools {
  margin-right: 1rem;
  padding-right: 1rem;
}

/* HOMEPAGE : LOGO caché MAIS header-right VISIBLE */
body[class*="home"] .header-right,
.page-home .header-right {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  min-width: 60px !important;
}

/* =====================================
   HERO MOBILE — CENTRAGE PROPRE
===================================== */
@media (max-width: 768px) {

  .page-home .home-hero .container {
    width: 100%;
    max-width: 100%;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    margin: 0 auto;
    text-align: center;
  }

  .page-home .hero-title,
  .page-home .hero-subtitle,
  .page-home .hero-intro,
  .page-home .hero-text {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

}

.home-hero::after {
  display: none !important;
}

/* ==========================================
   HERO — LOGO + NOM
========================================== */

.hero-identity {
  display: inline-flex;
  align-items: center;
  justify-content: center;   /* mobile centré */
  gap: 1rem;
  margin: 0 auto 1rem auto;  /* centralge du bloc */;
}

/* Desktop
@media (min-width: 768px) {
  .hero-identity {
    justify-content: flex-start;
  }
} */

/* =========================
   HERO LOGO RESPONSIVE
========================= */

/* Mobile */
.hero-logo {
  width: 140px;
  height: auto;
  position: relative;
  top: -4px;
  margin-left: 0;
}

/* Tablette */
@media (min-width: 768px) {
  .hero-logo {
    width: 180px;
    top: -6px;
  }
}

/* Desktop large */
@media (min-width: 200px) {
  .hero-logo {
    width: 220px;
    top: -8px;
  }
}

@media (min-width: 1024px) {
  .hero-logo {
    margin-left: -2rem;
  }
}


/* FORCE GRID HEADER STRUCTURE */
.header-top-inner {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center;
}

@media (max-width: 1023px) {

  .header-burger {
    display: flex !important;
    align-items: center;
    justify-content: center;
    z-index: 3000;
  }
}

@media (max-width: 1023px) {
  .header-right {
    padding-right: 16px; /* 12-24px selon ton goût */
  }
}

/* FORCE BURGER POSITION */
@media (max-width: 1023px) {

  .header-right {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center;
  }

   .header-burger {
    display: flex !important;
  }

}

/* =========================================
   Masquer les 3 boutons en mobile
   ========================================= */
@media (max-width: 1023px) {

  .header-desktop-tools {
    display: none !important;
  }
}

/* BURGER SIZE */
.header-burger .material-symbols-outlined {
  font-size: 36px;
}

/* =========================================
   Centrer burger dans header sur Home page
   ========================================= */
 /*.header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
} */

/* 
.header-top-inner {
  align-items: stretch;
}

.header-right,
.header-left,
.header-center {
  height: 100%;
}

.header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
} */

.page-home .header-left {
  min-width: 40px;   /* largeur équivalente au logo */
}

/* =========================================
   CONFIDENTIALITÉ — layout
   ========================================= */

/* Confidentialité : désactive tout grid éventuellement hérité */
.confidentiality-layout{
  display: block;
}

/* Confidentialité : retirer le gras des <strong> */
.confidentiality-content strong {
  font-weight: 500;   /* ou 400 si tu veux normal */
}

.confidentiality-content p {
  line-height: 1.75;
}

/* =========================================
   CONFIDENTIALITÉ — TIMELINE PROPRE
   ========================================= */

.confidentiality-layout {
  position: relative;
  display: grid;
  grid-template-columns: 30px 1fr;
  row-gap: 3rem;
}

/* Ligne verticale */
.confidentiality-layout::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 0;
  bottom: 0;
  width: 1.5px;
  background: rgba(120,160,255,0.35);
}

/* Chaque item */
.confidentiality-policy-item,
.confidentiality-personaldata-item,
.confidentiality-datasharing-item,
.confidentiality-datasecurity-item,
.confidentiality-rightspersonsconcerned-item,
.confidentiality-processingofpersonaldata-item,
.confidentiality-contactdetails-item {
  display: contents;
}

/* Dots */
.confidentiality-layout span[class$="-dot"] {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  position: relative;
  left: 9px;
  transform: translateY(0.8rem);
  box-shadow: 0 0 0 3px rgba(120,160,255,0.15);
}

/* Bloc texte */
.confidentiality-layout div[class$="-content"] {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* Paragraphes */
.confidentiality-layout p {
  line-height: 1.7;
  margin: 0;
}

/* Titres */
.confidentiality-layout h2 {
  margin: 0 0 0.6rem 0;
  font-size: 1.4rem;
  font-weight: 600;
}

/* =========================================
   ACCESSIBILITÉ — TIMELINE
   ========================================= */

/* Accessibilité : retirer le gras des <strong> */
.accessibility-content strong {
  font-weight: 500;
}

/* Interligne */
.accessibility-content p {
  line-height: 1.75;
}

.accessibility-layout {
  position: relative;
  display: grid;
  grid-template-columns: 30px 1fr;
  row-gap: 3rem;
}

/* Ligne verticale */
.accessibility-layout::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 0;
  bottom: 0;
  width: 1.5px;
  background: rgba(120,160,255,0.35);
}

/* Chaque item */
.accessibility-item {
  display: contents;
}

/* Dots */
.accessibility-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  position: relative;
  left: 9px;
  transform: translateY(0.8rem);
  box-shadow: 0 0 0 3px rgba(120,160,255,0.15);
}

/* Bloc texte */
.accessibility-content-block {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* Paragraphes */
.accessibility-content-block p {
  line-height: 1.7;
  margin: 0;
}

/* Titres */
.accessibility-content-block h2 {
  margin: 0 0 0.6rem 0;
  font-size: 1.4rem;
  font-weight: 600;
}

/* centrage sous-titre form contact   */
.contact-hero .hero-subtitle {
  max-width: 700px;
  margin: 0 auto;   /* ← CENTRAGE DU BLOC */
  text-align: center;
}

.text-muted-wide {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
  color: var(--text-muted);
}

.contact-note {
  text-align: center;
  margin-bottom: 10px;
  position: relative;
  top: -5px;
}

.hidden-field {
  display: none;
}

/* =========================================
   HOME — Chip titre (adaptatif light/dark)
   ========================================= */

/* Base commune (ne gère PAS la couleur ici) */
.page-home .service-card.access .card-overlay-title{
  position: absolute;
  top: -16px;
  left: 50px !important;
  right: auto !important;

  padding: 0.55rem 1rem;
  border-radius: 12px;
  backdrop-filter: blur(8px);
  z-index: 2;

  width: max-content;                /* <-- corrige ton "with:" */
  max-width: calc(100% - 90px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.15);
  border: 1px solid rgba(255,255,255,0.18);
}

/* DARK : bleu nuit / accent */
html[data-theme="dark"] .page-home .service-card.access .card-overlay-title{
  background: linear-gradient(135deg,
    rgba(18, 28, 60, 0.92),
    rgba(10, 18, 40, 0.88)
  );
  border-color: rgba(120,160,255,0.22);
}

/* LIGHT : “verre” clair + léger bleu */
html[data-theme="light"] .page-home .service-card.access .card-overlay-title{
  background: linear-gradient(135deg,
    rgba(255,255,255,0.88),
    rgba(235,243,255,0.86)
  );
  border-color: rgba(15, 25, 45, 0.10);
}

/* Titre dans le chip */
.page-home .service-card.access .card-title{
  font-weight: 650;
}

/* Couleur du texte du chip selon thème */
html[data-theme="dark"] .page-home .service-card.access .card-title{
  color: rgba(233,236,241,0.95);
}

html[data-theme="light"] .page-home .service-card.access .card-title{
  color: rgba(11,16,34,0.88);
}

html[data-theme="dark"] .service-card {
  background: linear-gradient(
    145deg,
    rgba(17, 25, 50, 0.95),
    rgba(10, 18, 40, 0.92)
  );

  border: 1px solid rgba(90,140,255,0.12);

  box-shadow:
    0 10px 35px rgba(0,0,0,0.6),
    -3px 0 20px rgba(90,140,255,0.08);
}

/* CARDS LIGHT UNIFIÉES */
html[data-theme="light"] .service-card {
  background: #f9f7f3;

  border: 1px solid rgba(90, 80, 65, 0.15);

  box-shadow:
    0 12px 35px rgba(90, 80, 65, 0.10);

  border-radius: 22px;
}

html[data-theme="light"] .card-overlay-title {
  background: #ffffff;

  border: 1px solid rgba(90, 80, 65, 0.12);

  box-shadow:
    0 6px 18px rgba(90, 80, 65, 0.12);

  border-radius: 14px;
}

/* =====================================================
   WHOAMI - RESPONSIVE COMPLET (Mobile → Tablet → Desktop)
   ===================================================== */

/* BASE - Tous écrans */
.section-whoami {
  padding: 60px 0;
  margin: 40px 0;
  position: relative;
  z-index: 10;
  display: block !important;
  visibility: visible !important;
}

.whoami-card {
  width: 100%;
  margin: 0 auto;
  padding: 50px 40px;
  border-radius: 20px;
  text-align: left;
  position: relative;
  z-index: 11;
  display: block !important;
  visibility: visible !important;
  box-sizing: border-box;
}

/* TYPOGRAPHIE */
.section-whoami h2 {
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  font-weight: 600;
  margin-bottom: 40px;
  letter-spacing: -0.5px;
}

.section-whoami h2::after {
  content: "";
  display: block;
  width: 60px;
  height: 2px;
  background: #2f81f7;
  margin-top: 20px;
}

.section-whoami h3 {
  font-size: 1.1rem;
  margin: 35px 0 20px 0;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  font-weight: 600;
  opacity: 0.95;
}

.section-whoami h3:not(:first-of-type) {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 30px;
}

.section-whoami p {
  line-height: 1.75;
  margin-bottom: 20px;
  font-size: 1.05rem;
  opacity: 0.92;
}

.section-whoami ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 30px;
}

.section-whoami ul li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 14px;
  line-height: 1.65;
  opacity: 0.92;
}

.section-whoami ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 7px;
  height: 7px;
  background: #2a7ae2;
  border-radius: 50%;
}

/* MOBILE (≤ 767px) */
@media (max-width: 767px) {
  .section-whoami {
    padding: 40px 0;
    margin: 20px 0;
  }
  
  .whoami-card {
    padding: 30px 20px;
    width: auto;
    margin: 0 20px;
    border-radius: 16px;
  }
}

/* TABLETTE (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .section-whoami {
    padding: 70px 0;
    margin: 50px 0;;
  }
  
  .whoami-card {
    padding: 55px 45px;
    border-radius: 18px;
  }
}

/* DESKTOP (≥ 1024px) */
@media (min-width: 1024px) {
  .section-whoami {
    padding: 90px 0;
    margin: 60px 0;
  }
  
  .whoami-card {
    padding: 75px 65px;
    border-radius: 24px;
    max-width: 880px !important;
    width: 100% !important;
    margin: 0 auto !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 11 !important;
  }
}

  /* indentation propre des puces */
 .whoami-card p {
    text-indent: 2.5rem;
 }

.whoami-card p:first-of-type {
    text-indent: 0;
 }

@media (max-width: 767px) {
    .whoami-card p {
        text-indent: 1.2rem;
    }

    .whoami-card p:first-of-type {
        text-indent: 0;
    }
}

/* =====================================================
   THÈMES - Light/Dark (TOUS écrans, HORS media)
   ===================================================== */
html[data-theme="light"] .whoami-card {
  background: #f9f7f3; 
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 20px 40px rgba(0,0,0,0.05);
  color: #1a1a1a;
}

html[data-theme="dark"] .whoami-card {
  background: linear-gradient(160deg, rgba(17,24,39,0.95), rgba(15,23,42,0.98));
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 20px 40px rgba(0,0,0,0.4), 0 1px 6px rgba(0,0,0,0.3);
  color: #e2e8f0;
}

html[data-theme="light"] .section-whoami h3:not(:first-of-type) {
  border-top-color: rgba(15,23,42,0.10);
}

html[data-theme="dark"] .section-whoami h3:not(:first-of-type) {
  border-top-color: rgba(255,255,255,0.12);
}

/* PORTFOLIO.JS popup */
.cyber-popup .leaflet-popup-content-wrapper {
  background: linear-gradient(145deg, rgba(17,25,50,0.95), rgba(10,18,40,0.98)) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(90,140,255,0.3) !important;
  border-radius: 16px !important;
  box-shadow: 
    0 20px 40px rgba(0,0,0,0.5),
    0 0 0 1px rgba(90,140,255,0.2) !important;
  color: #e0e7ff !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.cyber-popup .leaflet-popup-tip {
  background: linear-gradient(145deg, rgba(17,25,50,0.95), rgba(10,18,40,0.98)) !important;
  border: none !important;
  box-shadow: 0 10px 20px rgba(0,0,0,0.3) !important;
}

.cyber-popup .leaflet-popup-content {
  margin: 12px 16px !important;
  line-height: 1.6 !important;
  font-size: 15px !important;
}

/* Suppression complète de la card réseaux uniquement sur la page contact */
.page-contact .contact-socials {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* Centrer l’email sous le formulaire */
.page-contact #email {
  display: block;
  text-align: center;
  margin: 0 auto 1.5rem auto;
}

/* =========================================
   PARTIAL NAVIGATION TRANSITIONS
   ========================================= */
[data-partial-hero],
[data-partial-body] {
  will-change: opacity, transform, filter;
}

.partial-swap-out {
  opacity: 0;
  transform: translateY(-10px) scale(0.995);
  filter: blur(6px);
  transition:
    opacity 220ms ease,
    transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 220ms ease;
}

.partial-swap-in {
  opacity: 0;
  transform: translateY(16px) scale(0.998);
  filter: blur(8px);
}

.partial-swap-in-active {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  transition:
    opacity 260ms ease,
    transform 260ms cubic-bezier(0.19, 1, 0.22, 1),
    filter 260ms ease;
}

body.is-partial-loading [data-partial-main] {
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .partial-swap-out,
  .partial-swap-in,
  .partial-swap-in-active {
    transition: none !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
  }
}