/* =========================
   Header responsive (PC / Tablet / Mobile)
   ========================= */

/* ---- Tokens & base ---- */
:root{
  --brand-1:#146678;
  --brand-2:#2b4fb2;
  /* --brand-1:#6b1eb9;
  --brand-2:#470d8f; */
  --link:#fff16a;

  --header-h:100px;     /* écrasé par breakpoints */
  --logo-max-h:88px;    /* écrasé par breakpoints */
}

*{ box-sizing:border-box; }

html,body{ margin:0; padding:0; overflow-x:hidden; }
body{ font-family:'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

/* main s’adapte à la hauteur du header via variable */
main{ padding:1rem; padding-top:calc(var(--header-h) + 1rem); }

/* Wrappers header */
.main-header,
.main-header-mobile{
  position:fixed; top:0; left:0; width:100%;
  background:linear-gradient(to bottom, var(--brand-1), var(--brand-2));
  box-shadow:0 4px 8px rgba(0,0,0,.5);
  z-index:1000;
}

/* Par défaut, rien d’affiché — chaque breakpoint décide */
.main-header{ display:none; }
.main-header-mobile{ display:none; }

/* Liens & actions (communs) */
.main-header a,
.main-header-mobile a{
  font-weight:bold;
  color:var(--link);
  text-decoration:none;
  text-shadow:0 0 4px rgba(255,255,255,.3);
  transition:color .2s ease, background .2s ease;
}
.main-header a:hover,
.main-header-mobile a:hover{
  color:#fff;
  background-color:rgba(255,255,255,.15);
  border-radius:4px;
  padding:.1rem .3rem;
}

.actions{
  display:flex; flex-direction:column; align-items:flex-end; gap:.4rem;
}
.actions a{
  background:rgba(255,255,255,.07);
  border:2px solid #ff9cf5;
  color:#ff9cf5;
  border-radius:.5rem;
  padding:.4rem 1rem;
  text-align:right;
  transition:all .3s ease;
}
.actions a:hover{ background:#ff9cf5; color:var(--brand-2); }

#form__logout button{
  background:transparent;
  border:2px solid #fff;
  color:#fff;
  font-weight:bold;
  border-radius:.4rem;
  padding:.4rem 1rem;
  cursor:pointer;
  transition:all .3s ease;
  box-shadow:0 0 6px rgba(255,255,255,.4);
}
#form__logout button:hover{ background:#fff; color:var(--brand-2); }

.action__primary{
  background:transparent;
  border:2px solid #aaff00;
  color:#aaff00;
  font-weight:bold;
  border-radius:.4rem;
  padding:.4rem 1rem;
  cursor:pointer;
  transition:all .3s ease;
}
.action__primary:hover{ background:#aaff00; color:var(--brand-2); }

/* =========================
   ≥ 1024px  — DESKTOP / PC
   ========================= */
@media (min-width:1024px){
  :root{ --header-h:100px; --logo-max-h:88px; }

  /* ✅ Affiche UNIQUEMENT le header laptop */
  .main-header:not(.tablet-only){ display:flex; padding:2.5rem 2rem 1.5rem; }
  .main-header.tablet-only{ display:none; }
  .main-header-mobile{ display:none; }

  /* ✅ Recentrage vertical de toutes les sections */
  .main-header__nav{
    display:flex;
    justify-content:space-between;
    align-items:center;                 /* <— vertical center */
    width:100%; max-width:1400px; margin:0 auto;
  }

  .main-header__group-left,
  .main-header__group-right{
    display:flex; gap:2.5rem; align-items:center;  /* <— vertical center */
  }

  .main-header__group-left .col,
  .main-header__group-right .col{
    display:flex; flex-direction:column; gap:.3rem;
  }

  .main-header__group-center{
    flex:1; display:flex; justify-content:center; align-items:center; /* <— vertical center */
  }
  .main-header__group-center img{
    max-height:var(--logo-max-h); height:auto; width:auto; display:block;
  }

  .main-header a{ font-size:1.2rem; }
}

/* =========================
   768px – 1023px  — TABLETTE (UX améliorée)
   ========================= */
@media (min-width:768px) and (max-width:1023px){
  :root{
    --header-h: 128px;
    --logo-max-h: 88px;
    --tap-min: 48px; /* taille minimale des cibles tactiles */
  }

  /* Affiche UNIQUEMENT la barre tablette */
  .main-header:not(.tablet-only){ display:none; }
  .main-header.tablet-only{
    display:flex;
    position:fixed; top:0; left:0; width:100%;
    padding: calc(.75rem + env(safe-area-inset-top)) clamp(1rem, 4vw, 2rem) 1rem;
    min-height: var(--header-h);
    z-index:1000;
  }
  .main-header-mobile{ display:none; }

  /* 3 zones : gauche | logo | droite */
  .main-header.tablet-only .main-header__nav{
    display:grid;
    grid-template-columns: 1fr auto 1fr;    /* gauche | logo | droite */
    align-items:center;                     /* centrage vertical */
    column-gap: clamp(1.25rem, 4vw, 3rem);  /* ↗ espace horizontal régulier */
    width: min(1320px, 100%);
    margin: 0 auto;                         /* aucun décalage horizontal */
  }

  /* Groupes gauche/droite : colonnes côte à côte, bien centrées */
  .main-header.tablet-only .main-header__group-left,
  .main-header.tablet-only .main-header__group-right{
    display:grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    column-gap: clamp(1.25rem, 3.5vw, 2.5rem); /* espace entre les 3 groupes */
    align-items:center;                     /* centrage vertical dans chaque groupe */
  }

  /* Chaque .col empile ses liens verticalement avec plus d’air */
  .main-header.tablet-only .main-header__group-left .col,
  .main-header.tablet-only .main-header__group-right .col{
    display:flex;
    flex-direction:column;
    gap: .5rem; /* ↗ espace vertical entre liens */
  }

  /* Logo centré et lisible */
  .main-header.tablet-only .main-header__group-center{
    display:flex; justify-content:center; align-items:center;
  }
  .main-header.tablet-only .main-header__group-center img{
    max-height: var(--logo-max-h);
    height:auto; width:auto; display:block;
  }

  /* Liens et boutons : vraies cibles tactiles ≥ 48px, sans wrap */
  .main-header.tablet-only a,
  .main-header.tablet-only button{
    font-size: 1.15rem;           /* ↗ taille de police */
    line-height: 1.25;
    white-space: nowrap;          /* évite les retours à la ligne moches */
    padding: .6rem 1rem;
    min-height: var(--tap-min);
    min-width: var(--tap-min);
    border-radius: .75rem;
    touch-action: manipulation;
  }

  /* Actions (connexion/inscription/utilisateur/déconnexion) : plus “tap friendly” */
  .main-header.tablet-only .actions a,
  .main-header.tablet-only #form__logout button,
  .main-header.tablet-only .action__primary{
    padding: .65rem 1rem;         /* ↗ padding */
    min-height: var(--tap-min);
    border-width: 2px;            /* garde ton style, mais plus visible */
  }

  /* Le contenu descend en conséquence */
  main{ padding-top: calc(var(--header-h) + 1.25rem); }
}

/* ===== TABLETTE — ajustements précis demandés ===== */
@media (min-width:768px) and (max-width:1023px){

  /* 1) Gauche / 1ère colonne : moins d'espace vertical entre les labels */
  .main-header.tablet-only .main-header__group-left .col:first-child{
    gap: .25rem; /* Réduit l'espace entre Actualité, Services et Tarifs */
  }

  /* 2) Droite : réduire l'espace horizontal entre ses 3 colonnes */
  .main-header.tablet-only .main-header__group-right{
    column-gap: clamp(.75rem, 2vw, 1.5rem); /* Réduit l'espace horizontal entre les colonnes */
  }
  
  /* 3) Empêcher le débordement des éléments (nom utilisateur et déconnexion) */
  .main-header.tablet-only .main-header__group-right .col{
    min-width: 0; /* Permet de ne pas dépasser de l'écran */
  }

  .main-header.tablet-only .actions{
    max-width: 35vw; /* Empêche le dépassement du nom utilisateur et du bouton déconnexion */
    overflow-wrap: break-word; /* Force le texte à se couper si nécessaire */
  }

  .main-header.tablet-only .actions .user-tag{
    max-width: 100%;
  }
}


/* =========================
   ≤ 767px  — MOBILE
   ========================= */
@media (max-width:767px){
  :root{ --header-h:72px; --logo-max-h:63px; }

  .main-header{ display:none; }
  .main-header-mobile{
    display:flex; flex-direction:column; width:100%;
    padding:1rem .5rem;
    z-index:999;
  }

  .mobile-nav{
    display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:.5rem;
  }
  .mobile-left, .mobile-right{ display:flex; flex-direction:column; align-items:center; }
  .mobile-center img{ max-height:var(--logo-max-h); height:auto; width:auto; display:block; }

  .mobile-dropdown{
    display:none; flex-direction:column;
    margin-top:.5rem; gap:.5rem; padding:.5rem;
    border-radius:8px; background:rgba(255,255,255,.05);
    box-shadow:0 2px 6px rgba(0,0,0,.4); width:max-content;
  }
  .mobile-dropdown a,
  .mobile-dropdown button,
  .user-mobile-tag{
    display:block; width:100%; padding:.5rem 1rem;
    font-weight:bold; text-align:center; font-size:1rem;
    color:var(--link); background:rgba(255,255,255,.1);
    border:2px solid var(--link); border-radius:6px; text-decoration:none;
  }
  .mobile-dropdown a:hover,
  .mobile-dropdown button:hover,
  .user-mobile-tag:hover{ background:var(--link); color:var(--brand-2); }

  .logout-mobile-btn{
    background:transparent; border:2px solid var(--link); color:var(--link);
    font-weight:bold; padding:.5rem 1rem; border-radius:6px; cursor:pointer; width:100%;
  }
  .logout-mobile-btn:hover{ background:var(--link); color:var(--brand-2); }

  .mobile-left button, .mobile-right button{
    background:var(--link); color:var(--brand-2); font-weight:bold;
    padding:.3rem .8rem; border:none; border-radius:6px; cursor:pointer;
    font-size:1rem; box-shadow:0 2px 6px rgba(0,0,0,.3);
  }
  .mobile-left button:hover, .mobile-right button:hover{ background:#ffe44a; }

  .action__primary{ display:none !important; }
  .action-mobile__primary{
    display:block !important; background-color:#1d4ed8; color:#fff;
    padding:.5rem; border-radius:5px; font-weight:600; text-align:center;
  }

  main{ padding-top:calc(var(--header-h) + 3rem); }
}

/* Hauteur de référence des logos nav */
:root {
  --nav-logo-h: 42px; /* ajuste pour matcher exactement le logo Tessalion */
}

/* Logo central existant (si non déjà contraint ailleurs) */
.main-header__group-center img {
  height: var(--nav-logo-h);
  width: auto;
  display: block;
}

/* Nouveau logo GGShape (desktop/tablet/mobile) */
.nav-logo-ggshape {
  height: var(--nav-logo-h);
  width: auto;
  display: block;
}

/* Alignement propre dans la grille nav */
.main-header .logo-inline {
  display: flex;
  align-items: center;
}

/* Légère réduction sur mobile si nécessaire */
@media (max-width: 640px) {
  :root { --nav-logo-h: 34px; }
}