/*Police pour le blog*/
@font-face { font-family:'Noto Sans'; src:url('fonts/Noto_Sans/static/NotoSans-Regular.ttf'); font-weight:400; font-display:swap; }
@font-face { font-family:'Noto Sans'; src:url('fonts/Noto_Sans/static/NotoSans-Bold.ttf');    font-weight:700; font-display:swap; }

/* Police Poppins (texte courant + boutons) */
@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-Regular.ttf');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-SemiBold.ttf');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-Bold.ttf');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}  

/*Delclaration de police (zen-dot)*/
@font-face {
    font-family: 'Zen Dots';
    src: url('fonts/ZenDots-Regular.ttf');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/*La base est aussi un effet sur tout les ellement*/
* {
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;/*enleve les puce des list a puce*/
}

body {
    font-family: 'Zen Dots', 'sans-serif';
    background: linear-gradient(160deg, #0e1726, #16233b);/*effet de degradé en arrier plan*/
}

/* Css de la nav-bar */
.navbar {
    position: fixed;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    background-color: #0e1726;
}

.navbar a {
    color: white;
}

.navbar .nav-links ul {
    display: flex;
}

.navbar .nav-links li {
    margin: 0 25px;
}

/*effet sur le logo dans la nav-bar*/
.navbar .logo {
    height: 85px;
    width: auto;

}

/* le menu hamburger*/
.navbar .menu-hamburger {
    display: none;
    width: 35px;
    position: relative;
    z-index: 2;
}

/*partie reponsive de la nav-bar*/
@media screen and (max-width: 1050px) {

    .navbar .logo{
        
        top: 50px;
        left: 50px;
    }

    /*on affiche le menu hamburger*/
    .navbar .menu-hamburger {
        display: block;
        width: 35px;
    }

    /*on modifie la nav-bar pour la mettre en long sur mobile*/
    .nav-links {
        top: 0;
        left: 0;
        position: absolute;
        backdrop-filter: blur(7px);
        background-color: rgba(255, 255, 255, 0.205);
        width: 100%;
        height: 100vh;
        display: flex; 
        justify-content: center; 
        align-items: center;
        margin-left: -100%;
        transition: all 0.5s ease;/*transision sur le coté*/
    }

    .nav-links.mobile-menu {
    margin-left: 0;
    }

    .nav-links ul {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .navbar .nav-links ul li {
        margin: 25px 0;
        font-size: 1.2em;
    }
}

/* premier bloc */
header {
    min-height: 100vh;/* pour qu'il prenne toute l'ecran*/
    display: flex;
    align-items: center;
    justify-content: center;/*text a gauche et le logo a droite*/
    gap: 120px;
    box-sizing: border-box;
    padding: 175px 50px 50px;/*degade la nav-bar*/
}

header p {
    color: #aab4c5;
}

header .hook {
    display: flex;
    flex-direction: column;
    gap: 20px;
    color: white;
    flex: 1;/*prend 50%  de l'espace */
}

header h1 {
    font-size: 70px;
}

header .hook h2 {
    color: #e8a317;
}

/*effet sur le bouton*/
header .CTA-btn {
    font-family: Poppins;
    background-color: #e8a317;
    color: #0e1726;
    border-radius: 9px;
    cursor: pointer;
    font-weight: 700;
    font-size: 15px;
    padding: 10px 20px;
    align-self: flex-start;/*le bouton colle a fauche, il s'etire plus*/
}

/*effet sur le logo enface du hook*/
header .logo-hook {
    height: 300px;
    width: auto;
    flex: 1;
    transform: translateY(-60px);/*remonte le logo pour compenser le poids du bouton dans la colonne de gauche*/
}

/*reponsive du premier bloc le hook*/
@media screen and (max-width: 1050px) {
    header .logo-hook {
        display: none;
    }

    /*j'adapte la taille du texta la partie mobile*/
    header h1 {
        font-size: 20px;
    }
}



/*style de la page partenaire (partenaire.html)*/
header .partenaire h2 {
    color: #e8a317;
}

header .partenaire h1 {
    color: white;
}

header .partenaire {
    text-align: center;
    transform: translateY(-140px);/*Je fait remonter le text*/
}

/*style pour la ruche de partenaire*/

/*on passe le header en colonne UNIQUEMENT sur la page qui contient une ruche
  (grace a :has, la page d'accueil qui partage le meme <header> n'est pas touchee)*/
header:has(.ruche) {
    flex-direction: column;
    justify-content: flex-start;
    gap: 40px;
}

/*on annule la remontee de -140px du texte sur la page partenaire :
  elle etait prevue pour l'ancien layout centre et fait passer le titre dans la nav-bar
  une fois le header en colonne. (le padding-top du header degage deja la nav-bar)*/
header:has(.ruche) .partenaire {
    transform: none;
    margin-top: 60px;/*un peu d'air sous la nav-bar*/
}

/*le conteneur de la ruche : aligne les hexagones et les fait passer a la ligne*/
header .ruche {
    display: flex;
    flex-wrap: wrap;/*passe a la ligne si pas la place*/
    justify-content: center;
    gap: 18px;
    max-width: 1100px;
    width: 100%;
}

header .hex {
      width: 150px;
      height: 165px;        /* un peu plus haut que large = hexagone vertical */
      clip-path: polygon(
          50% 0%,    /* pointe du haut       */
          100% 25%,  /* coin haut-droite     */
          100% 75%,  /* coin bas-droite      */
          50% 100%,  /* pointe du bas        */
          0% 75%,    /* coin bas-gauche      */
          0% 25%     /* coin haut-gauche     */
      );
      /*fond + bordure dans la charte*/
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      /*on centre le contenu (logo/lettre + nom) au milieu de l'hexagone*/
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      cursor: pointer;
      transition: transform 0.25s ease, background 0.25s ease;
  }

/*effet au survol : l'hexagone remonte et se teinte de miel*/
header .hex:hover {
    transform: translateY(-8px);
    background: rgba(232, 163, 23, 0.12);
}

/*effet ruche : on decale une case sur deux vers le bas (quinconce)*/
header .ruche .hex:nth-child(even) {
    transform: translateY(45px);
}
/*on reecrit le hover des cases paires sinon le decalage du quinconce ecrase l'effet
  (transform remplace, il ne se cumule pas : 45 - 8 = 37)*/
header .ruche .hex:nth-child(even):hover {
    transform: translateY(37px);
}

/*le logo du partenaire a l'interieur de l'hexagone*/
header .hex .logo-part {
    width: 72px;
    height: 72px;
    object-fit: contain;/*garde les proportions du logo sans le deformer*/
}

/*la lettre pour les partenaires sans logo*/
header .hex .initiale {
    font-family: 'Zen Dots', sans-serif;
    font-size: 26px;
    color: #e8a317;
}

/*le nom du partenaire sous le logo*/
header .hex .nom {
    font-family: 'Poppins', sans-serif;
    color: white;
    font-size: 13px;
    font-weight: 600;
}

/*responsive : sur mobile on enleve le quinconce pour eviter les chevauchements*/
@media screen and (max-width: 700px) {
    header .ruche .hex:nth-child(even) {
        transform: translateY(0);
    }
    header .ruche .hex:nth-child(even):hover {
        transform: translateY(-8px);
    }
}

/*Partie pour page produit*/

/* navbar fixée en haut UNIQUEMENT sur la page produits
     (.navbar suivie d'un frère .produits) → les autres pages ne sont pas touchées */
  .navbar:has(~ .produits) {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;   /* passe au-dessus des cartes au scroll */
  }


/* ════════════════════════════════════════════════════════════
   PAGE PRODUITS  (Produits.html)
   Tout est scopé sous .produits → zéro impact sur les autres pages.
   ════════════════════════════════════════════════════════════ */

/* — Conteneur : variables de couleur + couleur de texte —
   Les --variables sont posées ICI (pas sur :root) : elles s'héritent
   vers les enfants de .produits mais n'existent nulle part ailleurs. */
.produits {
    --bg:       #0e1726;
    --bg-mid:   #16233b;
    --amber:    #e8a317;
    --amber-f:  rgba(232,163,23,0.10);
    --amber-bd: rgba(232,163,23,0.35);
    --white:    #ffffff;
    --muted:    #aab4c5;
    --glass:    rgba(255,255,255,0.04);
    --glass-bd: rgba(255,255,255,0.08);
    color: var(--white);
}

/* box-sizing limité aux éléments produits : on ne touche pas au reset
   global * dont dépendent les autres pages. */
.produits, .produits *, .produits *::before, .produits *::after {
    box-sizing: border-box;
}

/* — Boutons (réutilisés dans les cartes) — */
.produits .btn {
    font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 15px;
    padding: 13px 28px; border-radius: 9px; border: none; cursor: pointer;
    display: inline-block; text-align: center;
    transition: opacity .2s, transform .15s;
}
.produits .btn:hover { opacity: .85; transform: translateY(-2px); }
.produits .btn-amber   { background: var(--amber); color: var(--bg); }
.produits .btn-outline { background: transparent; border: 1px solid var(--amber-bd); color: var(--amber); }
.produits .btn-ghost   { background: var(--glass); border: 1px solid var(--glass-bd); color: var(--white); }

/* — HERO — */
.produits .hero { padding: 200px 40px 80px; text-align: center; }
.produits .hero-inner { max-width: 760px; margin: 0 auto; }
.produits .hero-over {
    font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 700;
    letter-spacing: 3px; text-transform: uppercase; color: var(--amber);
    display: block; margin-bottom: 24px;
}
.produits .hero-title { font-size: 64px; line-height: 1.05; margin-bottom: 20px; }
.produits .hero-title em { color: var(--amber); font-style: normal; }
.produits .hero-sub {
    font-family: 'Poppins', sans-serif; font-size: 16px; color: var(--muted);
    line-height: 1.7; max-width: 520px; margin: 0 auto 40px;
}
.produits .stats-bar {
    display: inline-flex; align-items: center; gap: 0;
    background: var(--glass); border: 1px solid var(--glass-bd);
    border-radius: 40px; overflow: hidden; flex-wrap: wrap;
}
.produits .stat {
    padding: 14px 28px; font-family: 'Poppins', sans-serif;
    font-size: 13px; color: var(--muted);
    display: flex; align-items: center; gap: 8px;
}
.produits .stat strong { font-size: 18px; font-weight: 700; color: var(--amber); font-family: 'Zen Dots', sans-serif; }
.produits .stat-sep { width: 1px; height: 32px; background: var(--glass-bd); flex-shrink: 0; }

/* — CARTES DE TARIFS — */
.produits .cards-section { padding: 0 40px 100px; max-width: 1140px; margin: 0 auto; }
.produits .cards-row { display: flex; gap: 24px; justify-content: center; align-items: flex-start; flex-wrap: wrap; }
.produits .hcard {
    flex: 1; min-width: 300px; max-width: 360px;
    background: var(--glass); border: 1px solid var(--glass-bd);
    border-radius: 20px; padding: 36px 30px 30px;
    display: flex; flex-direction: column; gap: 22px;
    transition: transform .25s ease;
}
.produits .hcard:hover { transform: translateY(-6px); }
.produits .hcard.hi { border-color: var(--amber-bd); background: rgba(255,255,255,0.03); }

.produits .tier-hex {
    width: 68px; height: 74px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Poppins', sans-serif; font-size: 22px; font-weight: 700; flex-shrink: 0;
}
.produits .tier-hex.n  { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.35); }
.produits .tier-hex.hi { background: rgba(232,163,23,0.20); color: var(--amber); }

.produits .hi-badge {
    align-self: flex-start; background: var(--amber); color: var(--bg);
    font-family: 'Poppins', sans-serif; font-size: 10px; font-weight: 700;
    padding: 4px 14px; border-radius: 20px;
}
.produits .card-tier { font-family: 'Poppins', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--amber); }
.produits .card-name { font-size: 26px; }
.produits .card-tagline { font-family: 'Poppins', sans-serif; font-size: 13px; color: var(--muted); line-height: 1.6; }

.produits .sites-indicator {
    display: flex; align-items: center; gap: 12px;
    background: rgba(255,255,255,0.03); border: 1px solid var(--glass-bd);
    border-radius: 10px; padding: 12px 16px;
}
.produits .dots { display: flex; gap: 7px; }
.produits .dot { width: 11px; height: 11px; border-radius: 50%; }
.produits .dot.on  { background: var(--amber); }
.produits .dot.off { background: rgba(255,255,255,0.12); }
.produits .dot.inf { background: var(--amber); opacity: .4; }
.produits .sites-text { font-family: 'Poppins', sans-serif; font-size: 13px; color: var(--muted); }
.produits .sites-text strong { color: var(--white); }

.produits .card-price { display: flex; align-items: baseline; gap: 4px; }
.produits .p-sym  { font-size: 20px; color: var(--amber); }
.produits .p-num  { font-family: 'Poppins', sans-serif; font-size: 48px; font-weight: 700; line-height: 1; }
.produits .p-per  { font-family: 'Poppins', sans-serif; font-size: 13px; color: var(--muted); }
.produits .p-free { font-family: 'Poppins', sans-serif; font-size: 34px; font-weight: 700; color: var(--amber); }
.produits .p-devis{ font-family: 'Poppins', sans-serif; font-size: 28px; font-weight: 700; color: var(--amber); }

.produits .card-sep { height: 1px; background: var(--glass-bd); }

.produits .card-feats { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.produits .feat { font-family: 'Poppins', sans-serif; font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 10px; }
.produits .feat-ico { font-size: 9px; flex-shrink: 0; width: 16px; text-align: center; }
.produits .feat-ico.y { color: var(--amber); }
.produits .feat-ico.n { color: rgba(255,255,255,.15); }
.produits .feat.off { opacity: .35; }
.produits .card-note { font-family: 'Poppins', sans-serif; font-size: 11px; color: var(--muted); text-align: center; opacity: .6; }

/* — SECTION « INCLUS DANS TOUS LES PLANS » — */
.produits .common-section { padding: 0 40px 100px; max-width: 1100px; margin: 0 auto; }
.produits .common-head { text-align: center; margin-bottom: 52px; }
.produits .common-head .over {
    font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 700;
    letter-spacing: 3px; text-transform: uppercase; color: var(--amber);
    display: block; margin-bottom: 12px;
}
.produits .common-head h2 { font-size: 26px; }

.produits .sep        { max-width: 1100px; margin: 0 auto 52px; }
.produits .sep-dashed { border-top: 2px dashed var(--amber-bd); }
.produits .common-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.produits .common-feat {
    display: flex; align-items: flex-start; gap: 16px;
    background: var(--glass); border: 1px solid var(--glass-bd);
    border-radius: 14px; padding: 20px; transition: border-color .2s;
}
.produits .common-feat:hover { border-color: var(--amber-bd); }
.produits .cf-hex {
    width: 46px; height: 50px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: var(--amber-f);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; flex-shrink: 0;
}
.produits .cf-hex img { width: 26px; height: 26px; display: block; }
.produits .cf-name { font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 600; color: var(--white); margin-bottom: 4px; }
.produits .cf-desc { font-family: 'Poppins', sans-serif; font-size: 12px; color: var(--muted); line-height: 1.5; }

/* — RESPONSIVE — */
@media screen and (max-width: 900px) {
    .produits .hero-title { font-size: 38px; }
    .produits .hcard { min-width: 100%; }
    .produits .hcard.hi { transform: none; }
    .produits .hcard.hi:hover { transform: translateY(-6px); }
    .produits .stats-bar { border-radius: 16px; }
    .produits .stat-sep { display: none; }
    .produits .stat { padding: 10px 18px; }
    .hero .stats-bar {
        display: none;
    }
}


/* ════════════════════════════════════════════════════════════
   PAGE CONNEXION  (login.php)
   Tout est scopé sous .login → reprend l'aspect "glass" des cartes
   (comme la carte d'inscription Guetteur), zéro impact ailleurs.
   ════════════════════════════════════════════════════════════ */
.login {
    --bg:       #0e1726;
    --amber:    #e8a317;
    --white:    #ffffff;
    --muted:    #aab4c5;
    --glass:    rgba(255,255,255,0.04);
    --glass-bd: rgba(255,255,255,0.08);
    color: var(--white);
}
.login, .login *, .login *::before, .login *::after { box-sizing: border-box; }

/*centre la carte sous la nav-bar fixe*/
.login .signin {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 140px 20px 60px;
}
/*la carte (meme effet glass que les autres pages)*/
.login .signin-card {
    width: 100%; max-width: 380px;
    background: var(--glass); border: 1px solid var(--glass-bd);
    border-radius: 20px; padding: 36px 30px 30px;
    display: flex; flex-direction: column; gap: 18px;
}
.login h1 { font-size: 26px; }
.login .sub { font-family: 'Poppins', sans-serif; font-size: 13px; color: var(--muted); line-height: 1.6; }

/*champs (identiques a la page Guetteur)*/
.login .field { display: flex; flex-direction: column; gap: 7px; }
.login .field-label { font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 600; color: var(--muted); }
.login .field input {
    font-family: 'Poppins', sans-serif; font-size: 14px; color: var(--white);
    background: rgba(255,255,255,0.03); border: 1px solid var(--glass-bd);
    border-radius: 9px; padding: 12px 14px; transition: border-color .2s;
}
.login .field input::placeholder { color: rgba(170,180,197,0.5); }
.login .field input:focus { outline: none; border-color: rgba(232,163,23,0.35); }

/*bouton miel (reprend btn-amber)*/
.login .btn-amber {
    font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 15px;
    padding: 13px 28px; border-radius: 9px; border: none; cursor: pointer;
    background: var(--amber); color: var(--bg);
    transition: opacity .2s, transform .15s; margin-top: 4px;
}
.login .btn-amber:hover { opacity: .85; transform: translateY(-2px); }

/*messages + lien creation de compte*/
.login .form-msg { font-family: 'Poppins', sans-serif; font-size: 13px; text-align: center; min-height: 16px; }
.login .form-msg.error { color: #dc5050; }
.login .form-msg.ok    { color: var(--amber); }
.login .note { font-family: 'Poppins', sans-serif; font-size: 12px; color: var(--muted); text-align: center; }
.login .note a { color: var(--amber); }


/* ════════════════════════════════════════════════════════════
   PANNEL CLIENT  (Pannel/pannel.php)
   Reprend l'identite du site (dégradé, Poppins/Zen Dots, ambre, glass)
   mais en layout "sidebar gauche + contenu". Scopé sous .pannel.
   ════════════════════════════════════════════════════════════ */
.pannel {
    --bg:       #0e1726;
    --amber:    #e8a317;
    --white:    #ffffff;
    --muted:    #aab4c5;
    --glass:    rgba(255,255,255,0.04);
    --glass-bd: rgba(255,255,255,0.08);
    color: var(--white);
    display: flex;
    min-height: 100vh;
}
.pannel, .pannel *, .pannel *::before, .pannel *::after { box-sizing: border-box; }

/* — menu lateral gauche fixe — */
.pannel .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: 240px;
    background: #0b1320; border-right: 1px solid var(--glass-bd);
    display: flex; flex-direction: column; padding: 20px 16px; gap: 8px;
}
.pannel .side-logo img { height: 56px; width: auto; display: block; margin: 4px auto 18px; }
.pannel .side-nav { display: flex; flex-direction: column; gap: 6px; }
.pannel .nav-item {
    font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 600;
    color: var(--muted); text-decoration: none;
    padding: 12px 14px; border-radius: 9px; transition: background .15s, color .15s;
}
.pannel .nav-item:hover { background: var(--glass); color: var(--white); }
.pannel .nav-item.active { background: rgba(232,163,23,0.12); color: var(--amber); }

/* groupe repliable (Webkoos) : <details> pur CSS, un .nav-sub-item par module */
.pannel .nav-group { display: flex; flex-direction: column; gap: 6px; }
.pannel .nav-group-label { cursor: pointer; list-style: none; position: relative; padding-right: 30px; }
.pannel .nav-group-label::-webkit-details-marker { display: none; }
.pannel .nav-group-label::after {   /* chevron dessine en bordures */
    content: ""; position: absolute; right: 14px; top: 50%;
    width: 7px; height: 7px; margin-top: -5px;
    border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
    transform: rotate(45deg); transition: transform .15s;
}
.pannel .nav-group[open] > .nav-group-label::after { transform: rotate(225deg); margin-top: -2px; }
.pannel .nav-group[open] > .nav-group-label { color: var(--white); }
.pannel .nav-sub {
    display: flex; flex-direction: column; gap: 4px;
    margin-left: 14px; padding-left: 10px; border-left: 1px solid var(--glass-bd);
}
.pannel .nav-sub-item { font-size: 13px; padding: 9px 12px; }
/* module reserve a une offre superieure : visible mais grise, non cliquable */
.pannel .nav-locked { opacity: .45; cursor: default; }

/* onglet profil colle en bas */
.pannel .profil-item { margin-top: auto; display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--glass-bd); }
.pannel .profil-name { font-size: 14px; color: var(--white); }
.pannel .profil-sub  { font-size: 11px; color: var(--muted); }

/* — zone de contenu — */
.pannel .content { margin-left: 240px; flex: 1; padding: 40px 44px; }
.pannel h1 { font-size: 30px; margin-bottom: 24px; }
.pannel h2 { font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 700; margin-bottom: 14px; }
.pannel .muted { color: var(--muted); font-family: 'Poppins', sans-serif; font-size: 14px; }
.pannel .amber { color: var(--amber); font-weight: 700; }
.pannel .mono  { font-family: monospace; font-size: 13px; }

/* cartes de stats */
.pannel .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; margin-bottom: 24px; }
.pannel .stat-card {
    background: var(--glass); border: 1px solid var(--glass-bd); border-radius: 16px; padding: 24px;
}
.pannel .stat-num { font-family: 'Zen Dots', sans-serif; font-size: 38px; color: var(--amber); line-height: 1; }
.pannel .stat-num.small { font-size: 16px; color: var(--white); font-family: 'Poppins', sans-serif; }
.pannel .stat-lab { font-family: 'Poppins', sans-serif; font-size: 13px; color: var(--muted); margin-top: 8px; }

/* cartes glass generiques */
.pannel .glass-card {
    background: var(--glass); border: 1px solid var(--glass-bd); border-radius: 16px;
    padding: 22px 24px; margin-bottom: 20px;
}
.pannel .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pannel .row {
    display: flex; justify-content: space-between; align-items: center;
    font-family: 'Poppins', sans-serif; font-size: 14px;
    padding: 9px 0; border-bottom: 1px solid var(--glass-bd);
}
.pannel .row:last-child { border-bottom: none; }
.pannel .profil-card .row span:first-child { min-width: 110px; }

/* tableau des hits */
.pannel table.hits { width: 100%; border-collapse: collapse; font-family: 'Poppins', sans-serif; font-size: 13px; }
.pannel table.hits th { text-align: left; color: var(--muted); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--glass-bd); }
.pannel table.hits td { padding: 9px 10px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.pannel table.hits td.clip { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* boutons */
.pannel .btn-amber {
    display: inline-block; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 14px;
    padding: 11px 22px; border-radius: 9px; border: none; cursor: pointer; text-decoration: none;
    background: var(--amber); color: var(--bg); transition: opacity .2s, transform .15s;
}
.pannel .btn-amber:hover { opacity: .85; transform: translateY(-2px); }
.pannel .btn-ghost {
    display: inline-block; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 13px;
    padding: 9px 16px; border-radius: 9px; text-decoration: none;
    background: var(--glass); border: 1px solid var(--glass-bd); color: var(--white);
}
.pannel .btn-ghost:hover { border-color: rgba(232,163,23,0.35); color: var(--amber); }
.pannel .btn-danger {
    display: inline-block; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 14px;
    padding: 11px 22px; border-radius: 9px; cursor: pointer; text-decoration: none;
    background: transparent; border: 1px solid rgba(220,80,80,0.5); color: #dc5050;
    transition: background .2s, color .2s;
}
.pannel .btn-danger:hover { background: rgba(220,80,80,0.12); color: #ff7373; }

/* champs de formulaire (page suppression de compte, meme motif que .login .field) */
.pannel .field { display: flex; flex-direction: column; gap: 7px; }
.pannel .field-label { font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 600; color: var(--muted); }
.pannel .field input, .pannel .field select {
    font-family: 'Poppins', sans-serif; font-size: 14px; color: var(--white);
    background: rgba(255,255,255,0.03); border: 1px solid var(--glass-bd);
    border-radius: 9px; padding: 12px 14px; transition: border-color .2s;
}
.pannel .field input:focus, .pannel .field select:focus { outline: none; border-color: rgba(232,163,23,0.35); }
.pannel .field select option { background: var(--bg); color: var(--white); }
.pannel .form-msg { font-family: 'Poppins', sans-serif; font-size: 13px; margin-bottom: 10px; }
.pannel .form-msg.error { color: #dc5050; }
.pannel .form-msg.ok    { color: var(--amber); }

/* formulaire canary : grille de champs + pieges a cocher */
.pannel .canary-form { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.pannel .canary-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px; width: 100%;
}
.pannel .canary-traps {
    border: 1px solid var(--glass-bd); border-radius: 12px; padding: 14px 18px 16px;
    display: flex; flex-direction: column; gap: 10px; margin: 0; min-width: 260px;
}
.pannel .canary-traps legend { padding: 0 6px; }
.pannel .check-row {
    display: flex; align-items: center; gap: 10px; cursor: pointer;
    font-family: 'Poppins', sans-serif; font-size: 14px; color: var(--white);
}
.pannel .check-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--amber); cursor: pointer; }

/* installation : grille de cartes + drag and drop */
.pannel .install-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.pannel .install-card {
    background: var(--glass); border: 1px solid var(--glass-bd); border-radius: 14px; padding: 20px;
    display: flex; flex-direction: column; gap: 8px; cursor: grab; transition: transform .15s, border-color .15s;
}
.pannel .install-card:hover { transform: translateY(-4px); border-color: rgba(232,163,23,0.35); }
.pannel .ic-logo {
    width: 56px; height: 56px; flex-shrink: 0; margin-bottom: 4px;
    background: #fff; border-radius: 12px; padding: 11px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}
.pannel .ic-logo img { max-width: 100%; max-height: 100%; display: block; }
.pannel .ic-name  { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 16px; }
.pannel .ic-count { font-family: 'Poppins', sans-serif; font-size: 12px; color: var(--muted); margin-bottom: 6px; }

.pannel .bundle-zone {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    min-height: 70px; padding: 16px 20px; margin: 18px 0 24px;
    border: 2px dashed var(--glass-bd); border-radius: 14px; transition: border-color .15s, background .15s;
}
.pannel .bundle-zone.over { border-color: var(--amber); background: rgba(232,163,23,0.06); }
.pannel .bundle-hint { font-family: 'Poppins', sans-serif; font-size: 13px; color: var(--muted); }
.pannel .chip {
    font-family: 'Poppins', sans-serif; font-size: 13px; cursor: pointer;
    background: rgba(232,163,23,0.12); color: var(--amber);
    border: 1px solid rgba(232,163,23,0.35); border-radius: 20px; padding: 6px 14px;
}

/* block-list : carte "Blocage automatique" (badges d'infos + bloc de code) */
.pannel .badge-opt {
    font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 600; color: var(--muted);
    background: var(--glass); border: 1px solid var(--glass-bd);
    border-radius: 20px; padding: 3px 10px; vertical-align: middle;
}
.pannel .guard-badges { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 16px; }
.pannel .gbadge {
    font-family: 'Poppins', sans-serif; font-size: 13px; color: var(--white);
    background: rgba(232,163,23,0.08); border: 1px solid rgba(232,163,23,0.25);
    border-radius: 20px; padding: 6px 14px;
}
.pannel .guard-steps { margin: 0 0 14px; padding-left: 22px; line-height: 1.7; }
/* le reset global (*) retire list-style sur les li eux-memes : on retablit au niveau li */
.pannel .guard-steps li { list-style: decimal; }
.pannel .guard-steps li::marker { color: var(--amber); font-weight: 700; }
.pannel .code-block {
    font-family: monospace; font-size: 13px; color: var(--amber);
    background: rgba(0,0,0,0.3); border: 1px solid var(--glass-bd);
    border-radius: 9px; padding: 12px 14px; margin: 8px 0 4px;
    overflow-x: auto; white-space: pre;
}

/* responsive : la sidebar passe en barre haute */
@media screen and (max-width: 800px) {
    .pannel { flex-direction: column; }
    .pannel .sidebar { position: static; width: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; }
    .pannel .side-logo img { margin: 0 12px 0 0; height: 40px; }
    .pannel .side-nav { flex-direction: row; flex-wrap: wrap; flex: 1; }
    /* le groupe Webkoos passe a plat : summary et sous-modules sur la meme ligne,
       la barre wrappe naturellement — aucun debordement ni dropdown a gerer */
    .pannel .nav-group { flex-direction: row; align-items: center; gap: 4px; }
    .pannel .nav-sub { flex-direction: row; margin-left: 0; padding-left: 4px; border-left: 1px solid var(--glass-bd); }
    .pannel .profil-item { margin-top: 0; }
    .pannel .content { margin-left: 0; padding: 24px 18px; }
    .pannel .cols { grid-template-columns: 1fr; }
}

/*Partie pour le css du blog*/
.blog{
    --bg:linear-gradient(160deg,#0e1726,#16233b);  /* fond sombre (dégradé du site) */
    --title:#ffffff;        /* couleur des titres en mode sombre */
    --excerpt:#eeeeec;      /* couleur du texte en mode sombre */
    --blue:#367bf0;         /* le bleu Kali (dates, toggle, hover) */
    --switch-lbl:#aab4c5;   /* couleur des libellés LIGHT/DARK */
    background:var(--bg);
    color:var(--excerpt);
    min-height:100vh;       /* le blog occupe au moins tout l'écran */
    font-family:'Noto Sans', Cantarell, sans-serif;
}

.blog .darkmode-switch{ display:flex; align-items:center; justify-content:center; gap:12px; margin-top:22px; }  /* aligne LIGHT / toggle / DARK */
.blog .darkmode-switch span{ font-size:10px; letter-spacing:1px; color:var(--switch-lbl); font-weight:700; }

.blog .switch{ position:relative; width:50px; height:25px; }      /* le rail */
.blog .switch input{ position:absolute; opacity:0; width:100%; height:100%; cursor:pointer; }  /* la vraie case, invisible mais cliquable */
.blog .switch .track{ position:absolute; inset:0; border-radius:25px; background:rgba(54,123,240,.25); border:1px solid var(--blue); }  /* la pastille de fond */
.blog .switch .knob{ position:absolute; top:3px; left:3px; width:19px; height:19px; border-radius:50%; background:var(--blue); transition:transform .2s; }  /* le bouton rond */

.blog .switch input:checked ~ .knob{ transform:translateX(25px); }  /* coché → le bouton glisse à droite */

.blog .blog-head{ padding:150px 40px 10px; text-align:center; }
.blog .page-title{ font-size:45px; font-weight:700; color:var(--title); }

/*le site en mode ligth*/
.blog.light{
    --bg:#f9f9f9;       /* fond clair */
    --title:#242738;    /* titres foncés */
    --excerpt:#636363;  /* texte gris */
}

.blog .posts{
    display:flex; flex-wrap:wrap;    /* les cartes se mettent côte à côte et passent à la ligne */
    justify-content:center;
    gap:32px 64px;                   /* 32px d'espace vertical, 64px horizontal */
    max-width:1800px; margin:48px auto 90px; padding:0 60px;
}
.blog .post{ width:800px; max-width:100%; }

.blog .post-img{
    display:block; position:relative; width:100%;   /* relative : sert de repère pour centrer le filigrane */
    aspect-ratio:800/418;   /* force le ratio 1.91 de Kali, quelle que soit la largeur */
    border-radius:6px;      /* coins arrondis */
    background:linear-gradient(135deg,#1d4ed8,#1e3a8a 55%,#0f1f4d);
    overflow:hidden;
}
.blog .post-img .wm{ position:absolute; inset:0; margin:auto; width:34%; opacity:.9; filter:brightness(0) invert(1); }  /* logo filigrane centré et blanc */
.blog .post-img .thumb{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }  /* vraie image en vignette de carte */
img.post-img{ object-fit:cover; }   /* si tu remplaces par une vraie <img> */

.blog .post-date{ display:flex; align-items:center; gap:8px; color:var(--blue); font-size:16px; margin:18px 0 4px; }
.blog .post-date svg{ width:15px; height:15px; stroke:var(--blue); fill:none; stroke-width:2; }

.blog .post-title{ font-size:32px; font-weight:400; line-height:1.7; color:var(--title); }
.blog .post-title a{ color:inherit; }            /* le lien prend la couleur du titre */
.blog .post-title a:hover{ color:var(--blue); }  /* sauf au survol → bleu */

.blog .post-excerpt{ font-size:15px; line-height:2; color:var(--excerpt); }

/*responsive du blog */
@media screen and (max-width:900px){
    .blog .page-title{ font-size:32px; }   /* titre plus petit */
    .blog .blog-head{ padding-top:130px; } /* moins d'espace sous la nav */
    .blog .posts{ padding:0 24px; }        /* marges latérales réduites */
    .blog .post-title{ font-size:24px; }
}

/* ─── PAGE D'UN ARTICLE (blog/xxx.html) : colonne de lecture centrée ─── */
.blog .article{ max-width:760px; margin:0 auto; padding:150px 24px 90px; }  /* padding-top dégage la nav fixe */
.blog .back-link{ display:inline-block; font-size:14px; color:var(--blue); margin-bottom:24px; }
.blog .back-link:hover{ opacity:.8; }
.blog .article-title{ font-size:42px; font-weight:700; line-height:1.2; color:var(--title); margin:8px 0 26px; }
.blog .article-cover{
    display:block; position:relative; width:100%; aspect-ratio:800/418;
    border-radius:6px; overflow:hidden; margin-bottom:34px;
    background:linear-gradient(135deg,#1d4ed8,#1e3a8a 55%,#0f1f4d);
}
.blog .article-cover .wm{ position:absolute; inset:0; margin:auto; width:30%; opacity:.9; filter:brightness(0) invert(1); }
img.article-cover{ object-fit:cover; }   /* quand la couverture est une vraie image */
.blog .article-lead{ font-size:19px; line-height:1.8; color:var(--title); margin-bottom:24px; }  /* chapô un peu plus clair */
.blog .article-body p{ font-size:17px; line-height:1.9; color:var(--excerpt); margin-bottom:22px; }
.blog .article-body h2{ font-size:24px; font-weight:700; color:var(--title); margin:38px 0 14px; }
.blog .article-body strong{ color:var(--title); }
.blog .article-body a{ color:var(--blue); }
/* citation de la source (petit texte avec barre bleue à gauche) */
.blog .article-source{ font-size:13px; line-height:1.6; color:var(--excerpt); opacity:.85;
    border-left:2px solid var(--blue); padding-left:14px; margin:4px 0 30px; }
.blog .article-source a{ color:var(--blue); }

@media screen and (max-width:900px){
    .blog .article{ padding-top:130px; }
    .blog .article-title{ font-size:30px; }
}