/* =====================================================
   HEADER — TI'DOC
===================================================== */


/* =====================================================
   HEADER
===================================================== */

header{
  position:fixed;

  top:0;
  left:0;

  width:100%;

  z-index:1000;

  display:flex;

  align-items:center;
  justify-content:space-between;

  padding:22px 7%;

  background:linear-gradient(180deg,rgba(7,60,75,.18),transparent);
}

/* =====================================================
   LOGO
===================================================== */

.logo{
  flex-shrink:0;
}


.logo img{
  width:82px;
  height:auto;

  display:block;
}


/* =====================================================
   MENU PRINCIPAL
===================================================== */

nav{
  display:flex;

  align-items:center;

  gap:30px;

  padding:15px 25px;

  border-radius:50px;

  background:
    rgba(255,255,255,.94);

  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);

  box-shadow:
    0 10px 35px
    rgba(0,0,0,.08);

  white-space:nowrap;
}

.menu-toggle{
  display:none;
}


nav a{
  text-decoration:none;
}

/* =====================================================
   NAVIGATION MOBILE UNIFIÉE
===================================================== */

@media(max-width:650px){
  header{
    align-items:center;
    background:rgba(7,60,75,.18);
  }

  .menu-toggle{
    width:44px;
    height:44px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:5px;
    margin-left:auto;
    border:1px solid rgba(255,255,255,.45);
    border-radius:14px;
    background:rgba(255,255,255,.94);
    color:var(--blue-dark);
    cursor:pointer;
    box-shadow:0 8px 25px rgba(7,60,75,.14);
  }

  .menu-toggle span{
    width:19px;
    height:2px;
    border-radius:5px;
    background:currentColor;
    transition:transform .2s ease,opacity .2s ease;
  }

  .menu-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .menu-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  header nav{
    position:absolute;
    top:calc(100% + 10px);
    left:4%;
    right:4%;
    display:grid;
    gap:4px;
    padding:10px;
    border:1px solid rgba(25,140,167,.14);
    border-radius:22px;
    background:rgba(255,255,255,.98);
    box-shadow:0 22px 50px rgba(7,60,75,.18);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-8px);
    transition:opacity .2s ease,visibility .2s ease,transform .2s ease;
  }

  header nav.open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
  }

  header nav > .nav-dropdown,
  header nav > .nav-main-link{ width:100%; }

  header nav > .nav-main-link,
  header .nav-main-row{
    min-height:44px;
    padding:0 12px;
    border-radius:12px;
  }

  header nav > .nav-main-link:hover,
  header .nav-main-row:hover{ background:var(--blue-light); }

  header .nav-main-link{ font-size:14px; }
  header .nav-main-row{ justify-content:space-between; gap:8px; }
  header .nav-dropdown-toggle{ width:30px; height:30px; }
  header .nav-chevron{ font-size:13px; }

  header .nav-dropdown-menu{
    position:static;
    min-width:0;
    margin:0 8px 6px;
    padding:4px;
    border:0;
    border-radius:14px;
    background:var(--blue-light);
    box-shadow:none;
    transform:none;
  }

  header .nav-dropdown-menu::before{ display:none; }
  header .nav-dropdown-menu a{ padding:10px 12px; font-size:13px; border-radius:10px; }

  header nav .nav-dropdown:hover .nav-dropdown-menu{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:none;
  }

  header nav .nav-dropdown.open .nav-dropdown-menu{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:none;
  }
}


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

.nav-main-link{
  color:var(--blue-dark);

  font-size:15px;
  font-weight:600;

  white-space:nowrap;

  transition:
    color .25s ease;
}


.nav-main-link:hover{
  color:var(--blue);
}


/* =====================================================
   MENUS DÉROULANTS
===================================================== */

.nav-dropdown{
  position:relative;

  display:block;

  flex-shrink:0;
}


/* =====================================================
   LIGNE PRINCIPALE
===================================================== */

.nav-main-row{
  display:flex;

  align-items:center;

  gap:3px;
}


/* =====================================================
   BOUTON FLÈCHE
===================================================== */

.nav-dropdown-toggle{
  width:24px;
  height:24px;

  flex-shrink:0;

  display:flex;

  align-items:center;
  justify-content:center;

  padding:0;

  border:0;

  background:transparent;

  color:var(--blue-dark);

  cursor:pointer;

  transition:
    color .25s ease;
}


.nav-dropdown-toggle:hover{
  color:var(--blue);
}


/* =====================================================
   FLÈCHE
===================================================== */

.nav-chevron{
  display:inline-block;

  font-size:13px;

  line-height:1;

  transition:
    transform .25s ease;
}


/* =====================================================
   SOUS-MENU
===================================================== */

.nav-dropdown-menu{
  position:absolute;

  top:calc(100% + 20px);
  left:50%;

  z-index:2000;

  min-width:190px;

  padding:9px;

  /*
    IMPORTANT :
    le menu est invisible par défaut
  */

  opacity:0;

  visibility:hidden;

  pointer-events:none;

  transform:
    translate(-50%, -8px);


  border:
    1px solid
    rgba(25,140,167,.12);

  border-radius:18px;


  background:
    rgba(255,255,255,.98);


  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);


  box-shadow:
    0 18px 45px
    rgba(7,60,75,.15);


  transition:
    opacity .22s ease,
    transform .22s ease,
    visibility .22s ease;
}


/* =====================================================
   PONT INVISIBLE

   Permet de descendre la souris du menu principal
   vers le sous-menu sans qu'il se ferme.
===================================================== */

.nav-dropdown-menu::before{
  content:"";

  position:absolute;

  left:0;
  right:0;

  top:-22px;

  height:22px;
}


/* =====================================================
   LIENS DU SOUS-MENU
===================================================== */

.nav-dropdown-menu a{
  display:block;

  width:100%;

  padding:12px 14px;

  border-radius:12px;

  color:var(--blue-dark);

  font-size:14px;
  font-weight:600;

  white-space:nowrap;

  transition:
    color .2s ease,
    background .2s ease;
}


.nav-dropdown-menu a:hover{
  color:var(--blue-dark);

  background:var(--blue-light);
}


/* =====================================================
   OUVERTURE DU SOUS-MENU
===================================================== */

.nav-dropdown:hover
.nav-dropdown-menu,

.nav-dropdown.open
.nav-dropdown-menu{

  opacity:1;

  visibility:visible;

  pointer-events:auto;

  transform:
    translate(-50%, 0);
}


/* =====================================================
   ROTATION DE LA FLÈCHE
===================================================== */

.nav-dropdown:hover
.nav-chevron,

.nav-dropdown.open
.nav-chevron{

  transform:
    rotate(180deg);
}


/* =====================================================
   TABLETTE
===================================================== */

@media(max-width:900px){

  header{
    padding:18px 5%;
  }


  .logo img{
    width:70px;
  }


  nav{
    gap:14px;

    padding:
      12px 16px;
  }


  .nav-main-link{
    font-size:13px;
  }


  .nav-main-row{
    gap:2px;
  }


  .nav-dropdown-toggle{
    width:20px;
    height:20px;
  }


  .nav-chevron{
    font-size:12px;
  }


  .nav-dropdown-menu{
    top:
      calc(100% + 18px);

    min-width:170px;

    padding:8px;
  }


  .nav-dropdown-menu a{
    padding:11px 12px;

    font-size:12px;
  }

}

/* Priorité finale pour la navigation mobile unifiée. */
@media(max-width:650px){
  header{ align-items:center; }
  header nav{ display:grid; }
}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:650px){

  header{
    align-items:flex-start;

    padding:
      16px 4%;
  }


  .logo img{
    width:58px;
  }


  nav{
    gap:7px;

    padding:
      9px 10px;

    border-radius:40px;
  }


  .nav-main-link{
    font-size:10px;
  }


  .nav-main-row{
    gap:1px;
  }


  .nav-dropdown-toggle{
    width:15px;
    height:18px;
  }


  .nav-chevron{
    font-size:9px;
  }


  .nav-dropdown-menu{
    top:
      calc(100% + 15px);

    min-width:150px;

    padding:6px;

    border-radius:14px;
  }


  .nav-dropdown-menu::before{
    top:-17px;

    height:17px;
  }


  .nav-dropdown-menu a{
    padding:
      9px 10px;

    font-size:10px;

    border-radius:9px;
  }

}

/* Ti'Doc bilingual language switch */
.language-switch{display:inline-flex;align-items:center;flex:none;gap:3px;padding:4px;border:1px solid rgba(25,140,167,.16);border-radius:30px;background:#e9f7fa;white-space:nowrap}
.language-switch .language-choice{appearance:none;border:0;border-radius:24px;background:transparent;color:#0b5367;padding:8px 11px;font-size:12px;font-weight:800;letter-spacing:.03em;cursor:pointer;line-height:1.1;transition:background .2s,color .2s,box-shadow .2s}
.language-switch .language-choice[aria-pressed="true"]{background:#198ca7;color:#fff;box-shadow:0 2px 7px rgba(25,140,167,.2)}
.language-switch .language-choice:focus-visible{outline:2px solid #198ca7;outline-offset:3px}
@media(max-width:800px){.language-switch{margin:10px 0;align-self:flex-start}}


/* Ti'Doc — repère persistant de navigation */
header .nav-main-link.is-current,
header .nav-dropdown.is-current > .nav-main-row > .nav-main-link{
  color:#198CA7 !important;
  font-weight:800;
}
header .nav-dropdown-menu a.is-current{
  background:#E9F7FA !important;
  color:#0B5367 !important;
  font-weight:800;
}
header .nav-main-link.is-current::after{
  content:"";
  display:block;
  height:3px;
  background:#198CA7;
  border-radius:3px;
  margin-top:4px;
}
@media(max-width:800px){
 header .nav-main-link.is-current::after{height:2px;margin-top:2px;}
}