html {scroll-behavior: smooth;overflow-y: scroll;}
body {background-color:#a36338;font-family:system-ui,-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif;padding:15px;}
@supports (-webkit-overflow-scrolling:touch) {body {background-color:#a36338;font-family:system-ui,-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif;padding:15px;word-wrap:break-word;-webkit-text-size-adjust:none;}}
@supports not (-webkit-overflow-scrolling:touch) {body {background-color:#a36338;font-family:system-ui,-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif;padding:15px;word-wrap:break-word;-webkit-text-size-adjust:none;}}
input,select,textarea,button {font-family:inherit;}
img {border:0;}
.grey {border:0;filter:gray;-webkit-filter:grayscale(1);}
.grey:hover {filter:none;-webkit-filter:grayscale(0);}
* {box-sizing:border-box;}
.mobileimagecaroussel {max-width:100%;height:auto;}
.fixedButton {position:fixed;bottom:30px;right:-10px;padding:10px;text-decoration:none;z-index:9999;}
.roundedFixedBtn {display:none;height:60px;line-height:60px;width:60px;font-size:2em;font-weight:bold;border-radius:50%;background-color:#000000;color:white;text-align:center;cursor:pointer;z-index:9999;}
.espacehaut {height:30px;background-color:#FFFFFF;}
.v1 {color:#000000;text-decoration:none;font-size:15px;}
.v1:hover {color:#a36338;}
.v2 {color:#a36338;text-decoration:none;font-size:15px;}
.v2:hover {color:#137DC5;text-decoration:none;}
.v3_tpl1:hover {color:#FFFFFF;text-decoration:none;}
.v3_tpl2:hover {color:#FFFFFF;text-decoration:none;}
.v4_tpl1 {color:#FFFFFF;}
.v4_tpl1:hover {text-decoration:none;}
.v4_tpl2 {color:#FFFFFF;}
.v4_tpl2:hover {text-decoration:none;}
.v5 {color:#000000;}
.v5:hover {text-decoration:none;}
.v6 { color:#a36338;}
.v6:hover {color:#000000;text-decoration:none;}
.v62 {color:#a36338;}
.v62:hover {color:#a36338;text-decoration:none;}
.v7 {color:#000000;}
.v7:hover {color:#000000;text-decoration:none;}
.v9 {color:#000000;font-size:inherit;}
.v9::after{content: none;}
.v9:hover {color:#000000;text-decoration:none;}
.textpopup {color:#000000;}
.textpopup:hover {color:#000000;text-decoration:none;}
.textpopup2 {color:#000000;}
.textpopup2:hover {color:#000000;text-decoration:none;}
.textpopup3 {color:#a36338;word-wrap:break-word;}
.textpopup3:hover {text-decoration:none;}
.fthbm {color:#ffffff;}
.fthbm:hover {color:#ffffff;text-decoration:none;}
.swapdiv {display:flex;}
.bloc0 {width:75%;}
.bloc1 {width:50%;}
.bloc11 {width:220px;}
.bloc2 {width:8%;}
.bloc3 {width:42%;}
.ligne {border-top:1px dotted black;width:100%;}
.general {padding:10px;background-color:#ffffff;border:1px #000000 solid;width:900px;border-radius:10px;}
.hamburger {background-color:#000000;display:none;}
#hamburgermenu {background-color:#000000;text-align:left;font-size:13px;display:none;}
.basresponsive {display:none;}
.fthbmdiv {background-color:#000000;text-align:left;margin-top:7px;font-size:15px;color:#FFFFFF;}
#menufthhb {background-color:#000000;text-align:left;width:100%;text-decoration:none;font-size:13px;}
#imageover {width:186px;height:140px;transition:transform .1s;}
#imageover:hover {position:absolute;transform:scale(1.3);z-index:1;-ms-transform:scale(1.3);-webkit-transform:scale(1.3);}
.cadenas {width:12px;height:16px;vertical-align:middle;border:0;}
.displaydate {text-align:center;padding:10px;margin-top:7px;font-size:12px;padding-bottom:40px;}
.contenu_tpl1 {height:20px;line-height:20px;background-color:#a36338;color:#FFFFFF;font-size:15px;}
.contenu_tpl2 {height:20px;line-height:20px;background-color:#a36338;color:#FFFFFF;font-size:15px;}
.contenu2_tpl1 {height:23px;line-height:20px;background-color:#a36338;color:#FFFFFF;font-size:15px;}
.contenu2_tpl2 {height:23px;line-height:20px;background-color:#a36338;color:#FFFFFF;font-size:15px;}
.contenu3 {height:20px;padding-bottom:40px;padding:10px;color:#FFFFFF;font-size:12px;margin-top:7px;font-size:12px;}
.menu {float:left;width:13%;}
.menuitem {display: flex;align-items: center;gap: 8px;text-align: left;padding: 5px;margin-top: 7px;border-bottom: 1px solid #ffffff;}
.menu:not(:has(.menuitem))::after {content: "\00A0";display: block;font-size: 5px;text-align: left;padding: 5px;margin-top: 7px;border-bottom: 1px solid #ffffff;}  /* bug largeur general ok */
.menuitembas {text-align:left;padding:5px;margin-top:7px;border-bottom:1px solid #ffffff;}
.ligneright {margin-top:1px;border-bottom:1px solid #000000;display:none;}
.main1 {float:left;width:28%;overflow:hidden;}
.main2 {float:left;width:28%;overflow:hidden;}
.main3 {float:left;width:28%;overflow:hidden;}
.main1cat {float:left;width:23%;height:140px;overflow:hidden;order:1;}
.main2cat {float:left;width:75%;overflow:hidden;order:2;}
.main1catx {float:left;width:21%;overflow:hidden;order:1;}
.main2catx {float:left;width:75%;overflow:hidden;order:2;}
.main3cat {float:left;width:100%;overflow:hidden;}
.main5cat {width:100%;display:none;}
.button {background-color:#a36338;color:white;padding:6px 10px;border:none;border-radius:4px;cursor:pointer;}
.button:hover {background-color:#777777;}
.buttonvisit {background-color:#a36338;color:white;padding:6px 10px;border:none;border-radius:4px;cursor:pointer;}
.buttonvisit:hover {background-color:#777777;}
.buttongris {background-color:#777777;color:white;padding:6px 10px;border:none;border-radius:4px;cursor:pointer;}
.buttongris:hover {background-color:#137DC5;}
.next_page_category {width:36px;height:36px;vertical-align:bottom;}
input[type=text],input[type=password],select,textarea {width:100%;padding:12px;border:1px solid #ccc;border-radius:4px;resize:vertical;font-size:15px;}
label {padding:12px 12px 12px 0;display:inline-block;}
input[type=submit] {-webkit-appearance:none;background-color:#a36338;color:white;padding:6px 10px;border:none;border-radius:4px;cursor:pointer;float:right;}
input[type=submit]:hover {-webkit-appearance:none;background-color:#777777;}
.container {border-radius:5px;background-color:#F2F2F2;padding:20px;width:30%;}
.col-25 {width:100%;margin-top:6px;}
.col-75 {width:100%;margin-top:6px;}
.row:after {content:"";display:table;clear:both;}
.main1_page_category {float:left;width:100%;overflow:hidden;padding-left:0px;padding-right:0px;}
.v4_page_category {text-decoration:none;}
.v5_page_category {color:#a36338;text-decoration:none;word-wrap:break-word;}
.v6_page_category {font-size:15px;color:#555555;float:right;}
.v7_page_category {color:#000000;font-size:15px;word-wrap:break-word;}
.v7_page_category_slider {color:#000000;font-size:12px;word-wrap:break-word;line-height:18px !important;}
.v8_page_category {color:#a36338;font-size:15px;word-wrap:break-word;}
.v8_page_category:hover {text-decoration:none;}
.v8_page_category_slider {color:#a36338;font-size:12px;word-wrap:break-word;}
.v8_page_category_slider:hover {text-decoration:none;}
.v10_page_category {color:#000000;font-size:15px;word-wrap:break-word;}
.v10_page_category:hover {color:#a36338;}
.main1_page_add {float:left;width:100%;overflow:hidden;font-size:14px;}
.container_page_member {border-radius:5px;background-color:#F2F2F2;padding:20px;width:280px;}
.main1_page_add_site {float:left;width:100%;overflow:hidden;font-size:14px;}
.container_page_add_site2 {border-radius:5px;}
.container_page_add_site {border-radius:5px;background-color:#F2F2F2;padding:20px;}
.main1_page_remove {float:left;width:70%;overflow:hidden;font-size:14px;}
.container_page_remove {border-radius:5px;background-color:#F2F2F2;padding:20px;width:75%;margin:0 12%;}
.columncat {float:left;width:50%;padding:0 5px;}
.row {margin:0 -5px;}
.card {padding:16px;}
.cycle-slideshow span {display:inline;overflow:hidden;margin:10px auto;line-height:18px;}
.cycle-slideshow_image {float:left;margin:0 20px 0 0px;border:1px solid #888888;border-radius:5px;width:186px;height:140px;cursor: pointer !important;}
.imgpos {text-align:right;}
#layer {height:200px;}
.cycle-slideshow {min-width:220px;margin:auto;padding:0;position:relative;overflow:hidden;}
.cycle-slideshow > div {position:absolute;top:0;left:0;width:100%;padding:0;}
.slider-wrap {min-height:120px;overflow:hidden;position:relative;padding:0 2em;}
.wrapperx {display:block;}
.wrapper2x {display:none;}
#cathaut {display:none;}
#layer {
    height: 200px;
    margin-bottom: -25px;
}
/* === HERO BANNER === */
.hero-banner {width: 100%;position: relative;border-bottom: none;border-radius: 5px 5px 0 0;padding: 4px;}
.hero-banner a {display: block;width: 100%;height: 100%;}
.hero-banner img {width: 100%;height: auto;border-radius: 5px;border: 1px solid #888888;}
.hero-overlay {position: absolute;bottom: 0;left: 0;right: 0;background: linear-gradient(transparent, rgba(0,0,0,0.8));padding: 20px;pointer-events: none;}
.hero-overlay h2 {color: #fff;margin: 0;font-size: 20px;text-shadow: 1px 1px 3px rgba(0,0,0,0.5);}
.hero-info {padding: 5px 0 15px 0;border-top: none;border-radius: 0 0 5px 5px;transition: background 0.2s ease;}
.hero-info p {margin: 0 0 10px 0;color: #333;font-size: 14px;}
.hero-meta {padding: 5px;}
.hero-wrapper {background: white;border: 1px solid #e0e0e0;border-radius: 5px;margin-bottom: 10px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);transition: background 0.2s ease;}
.texte-mobile {display:none;}

@media only screen and (max-width:900px) {
    #imageover:hover {position:relative;transform:none;z-index:none;-ms-transform:none;-webkit-transform:none;}
    .v7_page_category_slider {font-size:11px;line-height:16px !important;}
    .menu {width:7%;}
    .espacehaut {height:15px;}
    .buttonvisit { padding:0px 5px;font-size:11px;}
    .v6_page_category {font-size:12px;}
    .v7_page_category {font-size:12px;}
    .v8_page_category {font-size:12px;}
    .v10_page_category {font-size:12px;}
    .space {display:none;}
    .bloc0,.bloc1,.bloc3 {width:100%;}
    .bloc2 {display:none;}
    .swapdiv {flex-direction:column;}
    .main1cat,.main1catx {text-align:center;width:100%;order:2;margin-top:20px;}
    .main2cat,.main2catx {width:100%;order:1;}
    .main3cat {text-align:center;}
    .main5cat {display:block;}
    .mobileimage3 {width:90%}
    .main1,.main2,.main3 {width:30%;}
    .v1_page_category {font-size:10px;}
    .v1 {font-size:13px;}
    .contenu2_tpl1 {font-size:12px;}
    .contenu2_tpl2 {font-size:12px;}
    .contenu3 {font-size:12px;}
    .ligneright {display:none;}
    .general {width:100%;}
    .main1_page_remove {float:left;width:100%;}
    .cycle-slideshow h2 a {display:block;clear:left;padding-top:.5em;}
    .wrapperx {display:none;}
    .wrapperx2 {display:block;}
    .hero-banner {height: auto;}
    .hero-overlay h2 {font-size:18px;}
}

@media only screen and (max-width:670px) {
    .texte-desktop {display:none;}
    .texte-mobile {display:inline;}
    .intro-seo {margin-top: -5px !important;padding-top: 5px !important;margin-bottom: -20px !important;padding-bottom: 0px !important;}
    #layer {height:170px;margin-bottom: 0px;}
    .cycle-slideshow_image {float:none;margin:0 0px 0 0px;text-align:center;}
    .imgpos {text-align:center;}
    .v7_page_category_slider {display:none;}
    .roundedFixedBtn {display:block;height:30px;line-height:30px;width:30px;font-size:1em;font-weight:bold;border-radius:50%;background-color:#000000;color:white;text-align:center;cursor:pointer;}
    .fixedButton {bottom:80px;right:0px;}
    .nodiv {display:none;}
    #tips {display:none;}
    .columncat {width:100%;}
    .column {width:100%;display:block;}
    .card {padding:0px;}
    .v4_tpl1 {font-size:12px;}
    .v6_page_category {font-size:11px;}
    .hamburger {display:block;}
    .v1 {text-decoration:none;font-size:15px;}
    .textpopup {font-size:15px;}
    .textpopup2,.textpopup3 {font-size:12px;}
    .bloc11 {width:150px;}
    .bloc33 {width:150px;}
    .v3_tpl1 {color:#000000;font-size:15px;}
    .v3_tpl1:hover {color:#000000;text-decoration:none;}
    .v3_tpl2 {color:#FFFFFF;font-size:15px;}
    .v3_tpl2:hover {color:#FFFFFF;text-decoration:none;}
    .menu,.main1,.main2,.main3 {width:100%;}
    .mobileimage {max-width:100%;height:auto;}
    .mobileimage2 {width:100%;}
    .general {border-radius:0 0 10px 10px;}
    .basresponsive {display:block;}
    .contenu2_tpl1 {display:none;}
    .contenu2_tpl2 {display:none;}
    .menuitem {text-align:left;padding:10px;margin-top:1px;border-bottom:1px solid #ffffff;}
    .main1_page_category {padding-left:0px;padding-right:0px;}
    .next_page_category {width:16px;height:16px;}
    .container_page_remove {border-radius:5px;background-color:#F2F2F2;padding:20px;width:100%;margin:0%;}
    .v9 {font-size:0;}
    .v9::after {content: "CGV";font-size:15px;}
    #cathaut {display:block;height:10px;line-height:10px;background-color:#FFFFFF;}
    .cadenas {width:10px;height:13px;}
    .hero-banner {height: auto;border-radius: 5px 5px 0 0;}
    .hero-banner:hover img {transform: none;}
    .hero-overlay {padding: 15px;}
    .hero-overlay h2 {font-size: 16px;}
    .hero-info {border-radius: 5;padding: 35px 0 35px 35;}
    .hero-info p {font-size: 12px;}
}

@media only screen and (max-width:350px) {
.container_page_member {width:200px;}
}

/* compteur */
.compteur-v2-wrapper {
    display: flex;
    justify-content: center;
    margin: 30px auto;
    gap: 10px;
    flex-wrap: wrap;
    max-width: 900px;
    text-align: center;
    padding: 0 10px;
}

.compteur-v2-box {
    flex: 1;
    max-width: 350px;
    background-color: #ffffff;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    min-width: 40%;
    margin: 0;
    padding: 5px 5px;
}

.compteur-v2-title {
    color: #a36338;
    font-weight: bold;
    margin-bottom: 10px;
    line-height: 1.2;
    font-size: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.compteur-v2-value {
    font-size: 2.8rem;
    font-weight: 700;
    color: #333;
    line-height: 1;
    display: block;
}

@media (max-width: 700px) {
    .compteur-v2-title {
        font-size: 0.9rem;
    }
    .compteur-v2-value {
    font-size: 1.9rem;
    }
}





/* Styles additionnels pour l'amélioration SEO et structure */
.categories-intro {
    text-align: center;
    margin: 30px auto;
    padding: 20px;
    max-width: 900px;
    background-color: #f9f9f9;
    border-radius: 8px;
    border-left: 4px solid #a36338;
}

.categories-intro h2 {
    color: #a36338;
    font-size: 24px;
    margin-bottom: 15px;
    font-weight: bold;
}

.categories-intro p {
    color: #555;
    line-height: 1.6;
    font-size: 16px;
}

.column-title {
    color: #a36338;
    border-bottom: 2px solid #eaeaea;
    padding-bottom: 10px;
    margin-bottom: 15px;
    font-size: 18px;
    font-weight: bold;
    text-align: left;
    margin-top: 0;
    padding-top: 15px;
}

.cta-section {
    background: #a36338;
    color: white;
    padding: 40px 20px;
    text-align: center;
    margin: 40px auto;
    border-radius: 10px;
    max-width: 900px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.cta-section h2 {
    color: white;
    font-size: 26px;
    margin-bottom: 15px;
    font-weight: bold;
}

.cta-section p {
    font-size: 18px;
    margin-bottom: 25px;
    opacity: 0.9;
}

.cta-button {
    display: inline-block;
    background: white;
    color: #a36338;
    padding: 15px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    font-size: 18px;
    margin-top: 10px;
    transition: all 0.3s ease;
    border: 2px solid white;
}

.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 7px 15px rgba(0,0,0,0.2);
    background: #f8f8f8;
}

/* Amélioration responsive */
@media (max-width: 768px) {
    .categories-intro {
        margin: 20px 10px;
        padding: 15px;
    }

    .categories-intro h2 {
        font-size: 20px;
    }

    .column-title {
        font-size: 16px;
        text-align: center;
        margin-top: 20px;
    }

    .cta-section {
        margin: 30px 10px;
        padding: 30px 15px;
    }

    .cta-section h2 {
        font-size: 22px;
    }

    .cta-button {
        padding: 12px 25px;
        font-size: 16px;
    }
}

/* Style pour la nouvelle balise H1 */
.main-title {
    color: #a36338;
    font-size: 28px;
    text-align: center;
    margin: 20px 0;
    padding: 10px;
    font-weight: bold;
}

/* Amélioration des compteurs */
.compteur-v2-wrapper {
    margin: 20px auto;
    max-width: 900px;
}

/* ==========================================================================
   NX : refonte de index.php et categorieurlw.php
   Toutes les regles sont limitees a <body class="nx ...">.
   Les autres pages (ajout, membre, carrousel...) ne sont pas touchees.
   ========================================================================== */
body.nx{--nx-accent:#a36338;--nx-tint:#f6efeb;--nx-dark:#623b22;--nx-on:#FFFFFF;--nx-ink:#1f1f1f;--nx-muted:#595959;--nx-line:#ececec;--nx-chip:#f2f2f2;font-size:15px;line-height:1.5;color:var(--nx-ink);text-align:left}
body.nx-template2{--nx-on:#FFFFFF}
/* pages non refaites (ajout.php) : les memes couleurs, limitees au bloc .nx-local (le body n'est pas touche) */
.nx-local{--nx-accent:#a36338;--nx-tint:#f6efeb;--nx-dark:#623b22;--nx-on:#FFFFFF;--nx-ink:#1f1f1f;--nx-muted:#595959;--nx-line:#ececec;--nx-chip:#f2f2f2}
.nx-local.nx-template2{--nx-on:#FFFFFF}
/* ancienne page categorieurlw.php + nouveaux blocs (sous-categories, badges, introduction, bloc "Votre site...") ;
   tailles de police de l'ancienne page conservees */
.nx-ancienne{margin:4px 0 12px;text-align:left}
.nx-ancienne .nx-chips a{font-size:15px}
.nx-badges-ligne{clear:both;display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:stretch;gap:6px;margin-top:6px;font-size:13px;text-align:left}
.nx-intro-ancienne{margin:14px 0 6px;text-align:left}
.nx-cta-ancienne{margin:0 0 16px;text-align:left;font-size:15px;line-height:1.5}
.nx-cta-ancienne .nx-cta h2{margin:0;font-size:20px;line-height:1.3;font-weight:800;color:var(--nx-ink)}
.nx-ariane{display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;margin:6px 0 4px;font-size:15px;text-align:left}
.nx-ariane a{color:var(--nx-ink);text-decoration:underline}
.nx-ariane-sep{margin:0 6px;color:var(--nx-muted)}
.nx-ariane .nx-count{margin-left:6px}
@media (hover:hover){.nx-ariane a:hover{color:var(--nx-dark);text-decoration:none}}
@media only screen and (max-width:900px){.nx-ancienne .nx-chips a{font-size:12px}.nx-ariane{font-size:12px}.nx-intro-ancienne .nx-cat-intro{font-size:12px}.nx-intro-ancienne{margin-bottom:22px}.nx-badges-ligne{gap:4px}.nx-badges-ligne .nx-badge{font-size:11px;padding:2px 7px;gap:3px}.nx-badges-ligne .nx-badge svg{width:10px;height:10px}.nx-cta-ancienne .nx-cta{padding:16px 18px;gap:12px}.nx-cta-ancienne .nx-cta h2{font-size:15px}.nx-cta-ancienne .nx-cta p{font-size:12px}.nx-cta-ancienne .nx-cta .nx-btn{font-size:13px;padding:10px 16px;min-height:0}}
/* accueil, en responsive : encadre "Naviguez parmi..." et bloc "Votre site merite d'etre vu" plus petits */
@media only screen and (max-width:900px){body.nx-home .nx-main .nx-intro h2,body.nx-home .nx-main .nx-head h2{font-size:15px}body.nx-home .nx-intro p{font-size:13px}.nx-cat-intro.nx-intro-accueil{font-size:13px}body.nx-home .nx-cta{padding:16px 18px;gap:12px}body.nx-home .nx-main .nx-cta h2{font-size:15px}body.nx-home .nx-cta p{font-size:12px}body.nx-home .nx-cta .nx-btn{font-size:13px;padding:10px 16px;min-height:0}}

/* page categorie (ancienne), mode normal : titre a droite de la vignette, au-dessus de la description ;
   favicon a gauche de l'URL (celui du titre est masque) */
@media only screen and (min-width:901px){
  .nx-rangee{display:grid;grid-template-columns:186px minmax(0,1fr);grid-template-rows:auto 1fr auto;column-gap:15px;align-items:start}
  .nx-rangee .swapdiv{display:contents}
  .nx-rangee .main1cat{grid-column:1;grid-row:1 / span 2;float:none;width:auto}
  .nx-rangee .nx-titre-site{grid-column:2;grid-row:1;text-align:left}
  .nx-rangee .nx-titre-site{margin-bottom:10px}
  .nx-rangee .nx-titre-site br{display:none}
  .nx-rangee .main2cat{grid-column:2;grid-row:2;float:none;width:auto}
  .nx-rangee .main3cat{grid-column:1 / -1;grid-row:3;float:none;width:auto}
}
/* favicon a gauche de l'URL (et plus a cote du titre), en mode normal comme en responsive */
.nx-rangee .nx-titre-site > img,.hero-meta .nx-fav-titre{display:none}
/* mode normal : espace reduit entre l'encadre "Decouvrez..." et la ligne ".. categorie (N)" */
@media only screen and (min-width:901px){.nx-intro-ancienne + div > span.space:first-child br + br{display:none}}
/* premier site : meme espace sous les etiquettes que les autres sites (mode normal et responsive) */
.hero-wrapper .hero-info{padding-bottom:0}

/* page categorie (ancienne), responsive : sites 2 a 10 comme le site "A la une" :
   grande vignette en haut, puis favicon + titre, description, URL, etiquettes */
@media only screen and (max-width:900px){
  .nx-rangee{display:flex;flex-direction:column}
  .nx-rangee .swapdiv{display:contents}
  .nx-rangee .main1cat{order:1;float:none;width:100%;height:auto;margin:0 0 11px;text-align:left}
  .nx-rangee .main1cat br{display:none}
  .nx-rangee .main1cat img{display:block;width:100% !important;height:auto !important;aspect-ratio:4/3;object-fit:cover;border:1px solid #888888;border-radius:5px}
  .nx-rangee .nx-titre-site{order:2;text-align:left}
  .nx-rangee .main2cat{order:3;float:none;width:100%}
  .nx-rangee .main3cat{order:4;float:none;width:100%;text-align:left}
}

/* page carrousel (ancienne) : lien de categorie en etiquette, en bas a droite */
.nx-badge-cat{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-decoration:none}
@media (hover:hover){.nx-badge-cat:hover{text-decoration:underline}}

/* responsive : pastilles du nombre de sites plus petites (sous-categories et categories de l'accueil) */
@media only screen and (max-width:900px){
  .nx-ancienne .nx-chips .nx-count{font-size:11px;padding:0 6px}
  #nx-cats .nx-count,#nx-cats-sous .nx-count{font-size:11px;padding:1px 7px}
}

/* page categorie : etiquette "Nouveau" (rouge : moins de 15 jours, gris : 15 a 30 jours) */
.nx-badges-ligne .nx-nouveau{background:#D32F2F;color:#fff;font-weight:400}
.nx-badges-ligne .nx-nouveau-gris{background:#8a8a8a;color:#fff}
/* etiquette "Premium" : sites payants ([p] pack, [a] ajout payant, [x]) */
.nx-badges-ligne .nx-premium{background:#137dc5;color:#fff;font-weight:400}
/* position (#1, #2...) : pas en gras */
.nx-badges-ligne .nx-pos{font-weight:400}
/* texte court en responsive : "New" et "Prem" */
.nx-badges-ligne .nx-txt-court{display:none}
@media only screen and (max-width:900px){.nx-badges-ligne .nx-txt-long{display:none}.nx-badges-ligne .nx-txt-court{display:inline}.nx-badges-ligne{gap:3px}.nx-badges-ligne .nx-badge{padding:2px 5px}}

/* ajout.php : bandeau place comme sur les autres pages (28px sous le logo), 28px avant les formules,
   bords des cadres 1 et 3 alignes sur les bords du bandeau */
.nx-local-ajout{margin:28px 0 0;text-align:left}
/* memes metriques de texte que les pages refaites pour le menu et le logo : bandeau au pixel pres comme sur index.php */
body.nx-page-ajout .hamburger,body.nx-page-ajout .nx-logo{font-size:15px;line-height:1.5}
.nx-ajout .brhaut{height:4px}
.nx-ajout .row{margin-left:-10px;margin-right:-10px}
@media only screen and (min-width:901px){.nx-ajout .column{width:33.3333%}.nx-local-ajout .nx-band p{font-size:14px;line-height:1.25}.nx-local-ajout .nx-band-cat{gap:6px}}
/* mobile : la 1re colonne (formule 1 ordinateur, masquee) ne doit pas ajouter d'espace ; pas de marge negative
   (elle faisait passer le haut du cadre sous le bord de .main1_page_add, qui le coupait) */
@media only screen and (max-width:670px){.nx-local-ajout{margin-top:22px}.nx-ajout .menu{display:none}.nx-ajout .brhaut{height:22px}.nx-ajout .row>.column:first-child{margin-bottom:0}}
body.nx a:focus-visible,body.nx button:focus-visible,body.nx input:focus-visible{outline:3px solid var(--nx-ink);outline-offset:2px}

/* Le cadre (inchange : fond, bordure et arrondi viennent de .general) */
/* Le cadre .general d'origine est conserve, la mise en page est dans .nx-wrap */
.nx-wrap{display:flex;flex-direction:column;gap:28px;text-align:left;margin-bottom:24px}
body.nx .nx-main{display:flex;flex-direction:column;gap:28px;min-width:0}
body.nx .nx-main h2{margin:0;font-size:19px;line-height:1.3;font-weight:700;color:var(--nx-ink)}
.nx-logo,.nx-pub{text-align:center}
.nx-logo img,.nx-pub img{max-width:100%;height:auto;display:inline-block}

/* Bandeau titre */
.nx-band{background:var(--nx-accent);color:var(--nx-on);border-radius:8px;padding:22px 28px;display:flex;justify-content:space-between;align-items:center;gap:24px}
.nx-band h1{margin:0;font-size:30px;line-height:1.15;font-weight:800;letter-spacing:-.01em;color:var(--nx-on)}
.nx-band h1 small{font-size:.6em;font-weight:600}
.nx-band p{margin:6px 0 0;font-size:16px;color:var(--nx-on)}
/* Page categorie : bandeau de la meme hauteur que celui de l'accueil (121px) */
.nx-band-cat{flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;padding:14px 28px;min-height:121px}
.nx-band-cat h1{font-size:30px;line-height:1.1}
.nx-band-cat .nx-crumbs{line-height:1.3}
.nx-band-cat p{line-height:1.3}
.nx-band-cat p{margin:0}
.nx-crumbs{display:flex;flex-wrap:wrap;gap:6px 8px;font-size:14px}
.nx-crumbs a{color:var(--nx-on);text-decoration:underline}
.nx-crumbs a:hover{text-decoration:none}
/* liens dans le bandeau : jamais en bleu ; petit bouton blanc arrondi pour "Voir les CGU" */
.nx-band p a{color:var(--nx-on)}
.nx-band .nx-band-lien{display:inline-block;margin-left:8px;padding:2px 10px;border-radius:999px;background:#fff;color:var(--nx-dark);font-size:13px;font-weight:700;text-decoration:none;vertical-align:1px;white-space:nowrap}
.nx-band .nx-band-lien:hover{background:var(--nx-tint)}
.nx-stats{display:flex;gap:12px;flex:none}
.nx-stat{background:#fff;color:var(--nx-ink);border-radius:8px;padding:12px 18px;min-width:140px;display:flex;flex-direction:column}
.nx-stat b{font-size:28px;line-height:1.2;font-weight:800;font-variant-numeric:tabular-nums}
.nx-stat span{font-size:13px;color:var(--nx-muted)}

/* Carrousel (fragment carrousel-home.php charge dans #layer) */
.nx-car-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:14px}
.nx-car-nav{display:flex;gap:8px}
.nx-car-btn{width:44px;height:44px;border-radius:50%;border:1px solid #d6d6d6;background:#fff;color:var(--nx-ink);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.nx-car-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:4px}
.nx-car-track::-webkit-scrollbar{display:none}
.nx-slide{flex:0 0 240px;scroll-snap-align:start;display:flex;flex-direction:column;gap:6px;text-decoration:none;color:var(--nx-ink)}
.nx-slide-img{display:block;border-radius:6px;overflow:hidden;background:var(--nx-tint);aspect-ratio:4/3;border:1px solid #e0e0e0}
.nx-slide-img img{display:block;width:100%;height:100%;object-fit:cover}
.nx-slide-title{font-size:15px;line-height:1.3;font-weight:700}
.nx-slide-desc{font-size:13px;line-height:1.45;color:var(--nx-muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nx-slide-host{font-size:14px;color:var(--nx-dark)}

/* Textes SEO */
/* presentation du haut de l'accueil : titre souligne d'un petit trait de couleur */
.nx-intro{max-width:none}
.nx-intro h2::after{content:"";display:block;width:56px;height:3px;margin-top:8px;border-radius:2px;background:var(--nx-accent)}
.nx-intro p{margin:10px 0 0;color:var(--nx-muted);line-height:1.6;text-align:justify;-webkit-hyphens:auto;hyphens:auto}
.nx-note{margin:10px 0 0;color:var(--nx-muted);line-height:1.6}

/* Categories de l'accueil */
.nx-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:14px}
.nx-filter{display:flex;flex-direction:column;gap:6px}
.nx-filter label{font-size:13px;color:var(--nx-muted)}
.nx-filter input{width:280px;height:44px;border:1px solid #c8c8c8;border-radius:6px;padding:0 12px;font:inherit;font-size:16px;background:#fff;color:var(--nx-ink)}
.nx-cats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(var(--nx-rows,5),auto);grid-auto-flow:column;column-gap:28px}
.nx-cats a{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:46px;border-bottom:1px solid var(--nx-line);text-decoration:none;color:var(--nx-ink)}
.nx-cats a img{flex:none}
.nx-cat-name{flex:1;min-width:0}
.nx-count{flex:none;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--nx-dark);background:var(--nx-tint);border-radius:999px;padding:3px 9px}
/* Parentheses du texte des liens "Nom (N)" : lues par Google, masquees a l'ecran */
.nx-p{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* resultats du filtre : sous-categories trouvees (liste en lignes, meme style que les categories) */
.nx-subres{grid-template-rows:none;grid-auto-flow:row}
.nx-subres:empty{display:none}
/* pendant une recherche : une seule grille pour les categories principales puis les sous-categories trouvees */
.nx-cats-zone.nx-filtre-actif{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
.nx-cats-zone.nx-filtre-actif>nav{display:contents}
.nx-cats-zone.nx-filtre-actif .nx-cat-name{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* un resultat = une ligne : nom coupe avec "..." si besoin, nombre toujours visible (nom complet dans la bulle) */
.nx-subres .nx-cat-name{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nx-subres a img{flex:none}
.nx-empty{display:none;margin:12px 0 0;color:var(--nx-muted)}

/* Sous-categories */
body.nx .nx-main .nx-sub h2{font-size:16px;margin-bottom:12px}
/* Sous-categories : disposition d'origine partout (puce pucerep.gif, "Nom (N)", 1 colonne si moins de 6, sinon 2) */
.nx-chips{display:block}
.nx-chips-2col{column-count:2;column-gap:10px}
.nx-chips a{display:flex;align-items:center;gap:4px;text-decoration:none;min-height:0;padding:1px 0;border:0;border-radius:0;background:none;white-space:normal;font-family:inherit;font-size:15px;line-height:1.55;color:#333;break-inside:avoid;-webkit-column-break-inside:avoid}
.nx-chips a:hover{background:none;color:var(--nx-accent)}
.nx-chips b{font-size:inherit;font-weight:400;color:inherit}
/* nombre de sites dans la meme pastille que l'accueil (parentheses masquees, lues par Google) */
.nx-chips .nx-count{flex:none;padding:1px 8px;margin-left:2px}
.nx-puce{display:inline-block;flex:none}
.nx-chips b,.nx-chips .v8_page_category{flex:none}
.nx-chips .v8_page_category{font-size:12px;color:var(--nx-muted)}

/* Badges */
.nx-meta{align-self:stretch;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;font-size:13px}
.nx-meta-left{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;min-width:0}
.nx-meta-right{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:6px;margin-left:auto}
.nx-badge{display:inline-flex;align-items:center;gap:4px;background:var(--nx-chip);color:#444;border-radius:999px;padding:4px 9px;line-height:1.3}
.nx-badge svg{flex:none}
.nx-pos{background:var(--nx-tint);color:var(--nx-dark);font-weight:700}
.nx-fav{display:block;width:16px;height:16px;flex:none}
.nx-host{font-size:14px;font-weight:600;color:var(--nx-dark);word-break:break-all}
body.nx .nx-meta .buttonvisit{font-family:inherit;font-size:13px;font-weight:700;border-radius:999px;padding:5px 12px;line-height:1.3;color:#fff}

/* Hero : 1er site payant de la page 1 */
.nx-hero{border:1px solid #e3e3e3;border-radius:10px;overflow:hidden;background:#fff}
.nx-hero-img{display:block;background:transparent}
.nx-hero-img{padding:4px}
.nx-hero-img img{display:block;width:100%;height:auto;border-radius:6px;border:1px solid #888888}
.nx-hero-body{padding:22px 5px 22px 22px;display:flex;flex-direction:column;gap:10px;align-items:flex-start;min-width:0}
.nx-une{background:var(--nx-accent);color:var(--nx-on);font-size:12px;font-weight:700;border-radius:999px;padding:4px 10px}
body.nx .nx-hero h2{font-size:21px;line-height:1.25;font-weight:800}
.nx-hero p{margin:0;line-height:1.55;color:#333}
.nx-btn{display:inline-block;background:var(--nx-accent);color:var(--nx-on);text-decoration:none;font-weight:700;padding:12px 20px;border-radius:8px;text-align:center;word-break:break-word}

/* Liste des sites */
.nx-list{border-top:1px solid var(--nx-line);margin:0 -8px}
/* padding droit = marge droite du hero (5px + 1px de bordure) + 8px : badges alignes a droite avec ceux du hero */
.nx-site{display:grid;grid-template-columns:186px minmax(0,1fr);grid-template-rows:auto auto auto auto;align-content:start;grid-template-areas:"thumb titre" "thumb desc" "meta meta" "cta cta";column-gap:20px;row-gap:8px;padding:20px 14px 20px 8px;border-bottom:1px solid var(--nx-line);border-radius:8px;background:#fff}
.nx-thumb{display:block;width:186px;aspect-ratio:4/3;border-radius:6px;overflow:hidden;border:1px solid #d9d9d9;background:var(--nx-tint)}
.nx-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.nx-body{display:flex;flex-direction:column;gap:8px;min-width:0}
/* fiches : favicon + URL + badges et "C'est votre site ?" sur toute la largeur, alignes a gauche sous la vignette */
.nx-site .nx-body{display:contents}
.nx-site>.nx-thumb{grid-area:thumb}
.nx-site .nx-body>h2{grid-area:titre;min-width:0}
.nx-site .nx-body>p:not(.nx-free-cta){grid-area:desc;min-width:0}
.nx-site .nx-meta{grid-area:meta;min-width:0}
.nx-site .nx-free-cta{grid-area:cta}
body.nx .nx-body h2{font-size:17px;line-height:1.3;font-weight:700}
.nx-body p{margin:0;line-height:1.55;color:#333}
/* description des sites justifiee partout (comme .main2cat d'origine) */
.nx-body p:not(.nx-free-cta),.nx-hero-body p{text-align:justify;-webkit-hyphens:auto;hyphens:auto}
.nx-free-cta{margin:0;font-size:13px;color:var(--nx-muted)}
.nx-free-cta a{color:var(--nx-dark);font-weight:400}
/* texte d'introduction de la page categorie : encadre clair avec lisere de la couleur du site */
.nx-cat-intro{margin:0;padding:12px 16px;font-size:15px;line-height:1.6;color:var(--nx-ink);background:var(--nx-tint);border-left:4px solid var(--nx-accent);border-radius:0 8px 8px 0}
.nx-cat-intro strong{color:var(--nx-dark);font-weight:700}
.nx-intro-accueil{margin-top:16px}
.nx-site.site-highlight{background:#fff;box-shadow:0 0 0 4px var(--nx-accent),0 0 20px rgba(0,0,0,.5)}
.nx-hero.site-highlight{background:#fff;overflow:visible;box-shadow:0 0 0 4px var(--nx-accent),0 0 20px rgba(0,0,0,.5)}

/* Page carrousel (carrousel-nohome.php) : lien vers la categorie du site a droite de l'URL */
.nx-cat-lien{display:block;max-width:100%;font-size:13px;color:var(--nx-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nx-list.nx-carrousel .nx-meta-right{flex:0 1 auto;min-width:0}

/* Pagination */
.nx-pages{display:flex;flex-direction:column;align-items:center;gap:12px}
.nx-pages-desk{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px}
.nx-num,.nx-txt{min-width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;text-decoration:none;font-variant-numeric:tabular-nums;color:var(--nx-ink)}
.nx-num{border:1px solid #d6d6d6}
.nx-num[aria-current]{background:var(--nx-accent);border-color:var(--nx-accent);color:var(--nx-on);font-weight:800}
.nx-txt{padding:0 12px;font-size:14px;color:var(--nx-dark);font-weight:600}
.nx-txt.nx-off{color:#9a9a9a;font-weight:400}
.nx-pages-mob{display:none;width:100%;justify-content:space-between;align-items:center}
.nx-pages-mob a,.nx-pages-mob .nx-off{width:48px;height:48px;border-radius:8px;display:flex;align-items:center;justify-content:center}
.nx-pages-mob a{background:var(--nx-accent);color:var(--nx-on)}
.nx-pages-mob .nx-off{border:1px solid #e3e3e3;color:#b5b5b5}
.nx-single .nx-pages-desk,.nx-single .nx-pages-mob{display:none!important}
.nx-results{margin:0;font-size:14px;color:var(--nx-muted)}

/* Appel a l'action */
.nx-cta{background:var(--nx-tint);border-radius:10px;padding:26px 28px;display:flex;justify-content:space-between;align-items:center;gap:24px}
body.nx .nx-cta h2{font-size:20px;font-weight:800}
.nx-cta p{margin:6px 0 0;color:#3d3d3d}
.nx-cta .nx-btn{flex:none;font-size:16px;padding:14px 24px}

/* Pied de page : restyle des includes tpl_menu_bas*.php sur ces pages seulement */
.nx-foot{display:flex;flex-direction:column;gap:12px}
.nx-legal{margin:0;text-align:center;font-size:13px;color:var(--nx-muted)}
.nx-legal a{color:var(--nx-muted)}

/* Menu hamburger (tpl_menu_haut.php) */

/* Page adulte */
.nx-gate{max-width:560px;margin:40px auto;background:#fff;border-radius:10px;padding:28px;text-align:center}
.nx-gate p{margin:0 0 20px;font-size:16px}
.nx-gate-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.nx-gate button{min-height:48px;padding:0 22px;border:0;border-radius:8px;font:inherit;font-weight:700;color:#fff;cursor:pointer}
.nx-gate-yes{background:#1f1f1f}
.nx-gate-no{background:#b3131b}

/* Effets de survol : uniquement avec une souris, jamais au doigt */
@media (hover:hover){
  .nx-cats a:hover span:first-child,.nx-foot a:hover,.nx-slide:hover .nx-slide-title{text-decoration:underline}
  .nx-num:hover{border-color:var(--nx-accent);background:var(--nx-tint)}
  .nx-num[aria-current]:hover{background:var(--nx-accent)}
  .nx-btn:hover,.nx-pages-mob a:hover{filter:brightness(.94)}
  .nx-site{transition:background .15s}
  .nx-site:hover{background:var(--nx-tint)}
  .nx-hero{transition:background .15s}
  .nx-hero:hover{background:var(--nx-tint)}
}

/* Zoom de la vignette au survol : meme effet que #imageover (x1.3 depuis le centre, 0.1s),
   uniquement a la souris et au-dessus de 900px, comme sur le site d'origine */
@media (hover:hover) and (min-width:901px){
  .nx-site:not(.nx-free) .nx-thumb{position:relative;transition:transform .1s}
  .nx-site:not(.nx-free) .nx-thumb:hover{transform:scale(1.3);z-index:20}
}

/* Ordinateur : cadre de chaque site a hauteur fixe (description limitee a 350 caracteres = 5 lignes max) */
@media only screen and (min-width:901px){
  /* accueil : espace entre les 3 colonnes de categories (version A) */
  .nx-cats{column-gap:44px}
  /* resultats du filtre (sous-categories) : 2 colonnes pour laisser la place aux noms longs */
  .nx-subres{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nx-cats-zone.nx-filtre-actif{column-gap:44px}
  .nx-site{height:252px;align-items:start}
  body.nx .nx-body h2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .nx-body p:not(.nx-free-cta){height:7.75em;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
  .nx-list .nx-meta{flex-wrap:nowrap}
  .nx-list .nx-meta-left{flex-wrap:nowrap;min-width:0}
  .nx-list .nx-host{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;word-break:normal;min-width:0}
  .nx-list .nx-meta-left .buttonvisit{flex:none;white-space:nowrap}
  .nx-list .nx-meta-right{flex-wrap:nowrap;flex:none}
}

/* Page carrousel (ordinateur et tablette) : description jamais coupee ;
   hauteur commune de 224px (description de 5 lignes max), seul un cadre au texte plus long s'agrandit.
   URL et categorie alignees en bas */
@media only screen and (min-width:671px){
  .nx-list.nx-carrousel .nx-site{height:auto;min-height:224px;grid-template-rows:auto 1fr auto auto;align-content:stretch}
  .nx-list.nx-carrousel .nx-body p:not(.nx-free-cta){height:auto;display:block;-webkit-line-clamp:unset;overflow:visible}
  .nx-list.nx-carrousel .nx-meta{align-self:end}
}

/* Tablette */
@media only screen and (max-width:900px){
  .nx-free-cta{display:none}
  /* Sous-categories : methode d'origine (puce pucerep.gif, "Nom (N)", 2 colonnes a partir de 6) */
  .nx-trunc .nx-cut{display:none}
  /* toujours sur une seule ligne : le nom se raccourcit, le nombre reste visible */
  .nx-sn{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .nx-trunc::after{content:"..."}
  .nx-band{flex-direction:column;align-items:flex-start}
  .nx-cats{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-auto-flow:row}
  /* separateurs de sites bord a bord du cadre (.general a 10px de marge interieure) */
  .nx-list{margin:0 -10px}
  .nx-site{grid-template-columns:150px minmax(0,1fr);column-gap:16px;padding:20px 16px 20px 10px;border-radius:0}
  .nx-thumb{width:150px}
}

/* Mobile */
@media only screen and (max-width:670px){
  .nx-wrap{gap:22px}
  body.nx .nx-main{gap:22px}
  .nx-band{padding:14px}
  .nx-band h1{font-size:21px}
  .nx-band p{font-size:14px}
  /* titres de section de l'accueil (Annuaire Web..., Explorez nos...) */
  body.nx .nx-main h2{font-size:16px}
  .nx-band-cat{min-height:0}
  .nx-band-cat h1{font-size:21px}
  .nx-crumb-last{display:none}
  /* compteurs cote a cote s'ils tiennent, sinon l'un sous l'autre (toujours une seule ligne chacun) */
  .nx-stats{display:flex;flex-wrap:wrap;width:100%;gap:6px}
  .nx-stat{flex:1 1 auto}
  /* compteurs : nombre et libelle sur la meme ligne */
  .nx-stat{min-width:0;padding:5px 7px;flex-direction:row;align-items:baseline;gap:4px}
  .nx-stat span{font-size:11px;white-space:nowrap}
  .nx-stat b{font-size:15px}
  .nx-car-nav{display:none}
  .nx-car-track{margin-right:-16px;padding-right:16px}
  .nx-slide{flex-basis:250px}
  .nx-head{flex-direction:column;align-items:stretch}
  .nx-filter input{width:100%}
  .nx-cats{grid-template-columns:1fr}
  .nx-cats-zone.nx-filtre-actif{grid-template-columns:1fr}
  .nx-cats a{min-height:48px;font-size:13px}
  .nx-chips-2col{column-count:1}
  .nx-hero-body{padding:16px 4px 16px 16px}
  .nx-hero .nx-btn{align-self:stretch;min-height:48px;display:flex;align-items:center;justify-content:center}
  .nx-site{grid-template-columns:1fr;grid-template-rows:none;grid-template-areas:"thumb" "titre" "desc" "meta" "cta";row-gap:10px;padding:18px 15px 18px 10px}
  .nx-thumb{width:100%}
  /* page categorie et carrousel : textes reduits en responsive */
  .nx-host{font-size:14px}
  .nx-chips a{font-size:13px}
  body.nx .nx-main .nx-hero h2,body.nx .nx-main .nx-body h2{font-size:15px}
  .nx-hero-body p,.nx-body p:not(.nx-free-cta){font-size:14px}
  /* ajout.php : un peu d'air entre "Ajouter un site" et le texte */
  .nx-local-ajout .nx-band-cat{gap:10px}
  body.nx .nx-meta .buttonvisit{min-height:44px;padding:0 16px;font-size:14px}
  .nx-pages-desk{display:none}
  .nx-pages-mob{display:flex}
  .nx-cta{flex-direction:column;align-items:stretch;padding:20px}
  .nx-cta .nx-btn{min-height:48px;display:flex;align-items:center;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  body.nx *{transition:none!important;scroll-behavior:auto!important}
}

/* =====================================================================
   GRAND ECRAN (4K) + CARROUSEL DE L'ACCUEIL - ajout du 11/10/2026
   Au-dela de 1500 px de large, toute la page (cadre .general, menus, logo, textes, vignettes)
   grandit proportionnellement a l'ecran, par paliers de 100 px : zoom = largeur / 1500, maximum 2,8.
   En 4K (3840 px) la page est 2,5 fois plus grande et occupe la meme part de l'ecran qu'en Full HD.
   Concerne toutes les pages qui chargent stylecss.css. Rien ne change en dessous de 1600 px.
   ===================================================================== */
@media (min-width:1600px){body{zoom:1.067;--nx-zoom:1.067}}
@media (min-width:1700px){body{zoom:1.133;--nx-zoom:1.133}}
@media (min-width:1800px){body{zoom:1.2;--nx-zoom:1.2}}
@media (min-width:1900px){body{zoom:1.267;--nx-zoom:1.267}}
@media (min-width:2000px){body{zoom:1.333;--nx-zoom:1.333}}
@media (min-width:2100px){body{zoom:1.4;--nx-zoom:1.4}}
@media (min-width:2200px){body{zoom:1.467;--nx-zoom:1.467}}
@media (min-width:2300px){body{zoom:1.533;--nx-zoom:1.533}}
@media (min-width:2400px){body{zoom:1.6;--nx-zoom:1.6}}
@media (min-width:2500px){body{zoom:1.667;--nx-zoom:1.667}}
@media (min-width:2600px){body{zoom:1.733;--nx-zoom:1.733}}
@media (min-width:2700px){body{zoom:1.8;--nx-zoom:1.8}}
@media (min-width:2800px){body{zoom:1.867;--nx-zoom:1.867}}
@media (min-width:2900px){body{zoom:1.933;--nx-zoom:1.933}}
@media (min-width:3000px){body{zoom:2;--nx-zoom:2}}
@media (min-width:3100px){body{zoom:2.067;--nx-zoom:2.067}}
@media (min-width:3200px){body{zoom:2.133;--nx-zoom:2.133}}
@media (min-width:3300px){body{zoom:2.2;--nx-zoom:2.2}}
@media (min-width:3400px){body{zoom:2.267;--nx-zoom:2.267}}
@media (min-width:3500px){body{zoom:2.333;--nx-zoom:2.333}}
@media (min-width:3600px){body{zoom:2.4;--nx-zoom:2.4}}
@media (min-width:3700px){body{zoom:2.467;--nx-zoom:2.467}}
@media (min-width:3800px){body{zoom:2.533;--nx-zoom:2.533}}
@media (min-width:3900px){body{zoom:2.6;--nx-zoom:2.6}}
@media (min-width:4000px){body{zoom:2.667;--nx-zoom:2.667}}
@media (min-width:4100px){body{zoom:2.733;--nx-zoom:2.733}}
@media (min-width:4200px){body{zoom:2.8;--nx-zoom:2.8}}

/* ---------- categorieurlw : survol des cadres des sites un peu plus soutenu ---------- */
#mydiv{transition:background .15s}
#mydiv:hover{background:#f0e6df !important}

/* ---------- accueil : carrousel "Les sites a la une" ---------- */
.nx-alaune-section{text-align:left}
.nx-titre-section,body.nx .nx-main h2.nx-titre-section{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-size:19px;line-height:1.3;font-weight:700;color:var(--nx-ink,#1f1f1f)}
.nx-titre-section small{font-weight:400;color:#6b7785;font-size:13px;margin-left:auto}
.nx-cs-carr{position:relative;border:1px solid #e0e0e0;border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 4px 16px rgba(0,0,0,.06);outline:none}
.nx-cs-carr:focus-visible{outline:3px solid #a36338}
.nx-cs-piste{position:relative}
.nx-cs-diapo{position:absolute;left:0;right:0;top:0;display:grid;grid-template-columns:1fr 1fr;align-items:stretch;opacity:0;visibility:hidden;transform:translateX(30px);transition:opacity .6s,transform .6s,visibility 0s .6s}
.nx-cs-diapo.active{position:relative;opacity:1;visibility:visible;transform:none;transition:opacity .6s,transform .6s}
.nx-cs-diapo.sort{transform:translateX(-30px)}
.nx-cs-cap{position:relative;overflow:hidden;background:#fff;align-self:start}
/* vignette entiere (format 4/3 des captures), sans zoom */
.nx-cs-cap img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:contain}
.nx-cs-cap a{position:absolute;inset:0}
.nx-cs-txt{padding:18px 22px 52px;display:flex;flex-direction:column;gap:8px;justify-content:flex-start;text-align:left;min-width:0}
.nx-cs-chemin{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:#6b7785;font-weight:600;text-decoration:none;align-self:flex-start}
.nx-cs-chemin:hover{color:#a36338;text-decoration:underline}
.nx-cs-diapo h3{font-size:21px;color:#a36338;margin:0;font-weight:700;line-height:1.2}
.nx-cs-diapo p{margin:0;color:#3a4350;text-align:justify;font-size:14px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.nx-cs-hote{display:inline-flex;align-items:center;gap:7px;font-weight:700;text-decoration:none;color:#a36338;align-self:flex-start;font-size:14px}
.nx-cs-hote img{border-radius:3px}
.nx-cs-hote:hover{text-decoration:underline}
/* pastilles du carrousel : celles de categorieurlw.php (classes de stylecss.css) ; Pro comme dans categorieurlw.php */
.nx-cs-txt .nx-badges-ligne{margin-top:2px}
.nx-cs-txt .nx-badges-ligne .nx-badge.nx-pro{background:#2d3748;color:#ffffff;font-weight:400}
.nx-cs-cmd{position:absolute;right:14px;bottom:12px;display:flex;gap:7px;align-items:center}
.nx-cs-cmd button{width:34px;height:34px;border-radius:50%;border:0;background:#a36338;cursor:pointer;display:grid;place-items:center;padding:0;transition:background .2s}
.nx-cs-cmd button img{width:16px;height:16px}
.nx-cs-cmd button:hover{background:#724527}
.nx-cs-cmd .pause{width:auto;border-radius:17px;padding:0 13px;font:600 12px system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:#fff}
.nx-cs-points{position:absolute;left:calc(50% + 24px);bottom:16px;display:flex;gap:6px}
.nx-cs-points button{width:9px;height:9px;border-radius:50%;border:0;background:#cfd6de;cursor:pointer;padding:0;transition:transform .2s,background .2s}
.nx-cs-points button.on{background:#a36338;transform:scale(1.35)}
.nx-cs-barre{position:absolute;left:0;right:0;bottom:0;height:3px;background:#eceff3}
.nx-cs-barre i{display:block;height:100%;width:0;background:#a36338}
.nx-cs-barre i.va{animation:nx4kAvance 5s linear forwards}
@keyframes nx4kAvance{to{width:100%}}
.nx-cs-carr.pause .nx-cs-barre i.va{animation-play-state:paused}
.nx-cs-carr.nx-seul .nx-cs-diapo{position:relative;opacity:1;visibility:visible;transform:none}
.nx-cs-vignettes{display:grid;grid-template-columns:repeat(var(--nx-nv,10),1fr);gap:6px;margin-top:8px}
.nx-cs-vignettes button{padding:0;border:2px solid transparent;border-radius:6px;overflow:hidden;background:none;cursor:pointer;opacity:.55;transition:opacity .25s,transform .25s,border-color .25s}
.nx-cs-vignettes button img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.nx-cs-vignettes button:hover{opacity:.9}
.nx-cs-vignettes button.on{opacity:1;border-color:#a36338;transform:translateY(-2px)}

/* ---------- accueil : blocs du bas ---------- */
.nx-colonnes{display:grid;grid-template-columns:1fr 1fr;gap:20px;text-align:left}
.nx-bloc{border:1px solid #e0e0e0;border-radius:10px;padding:14px 18px;min-width:0}
body.nx .nx-main .nx-bloc h2{display:flex;align-items:center;gap:8px;font-size:16px;margin:0 0 8px}
.nx-neufs{list-style:none;margin:0;padding:0}
.nx-neufs li{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px dashed #e3e7ec;font-size:14px;min-width:0}
.nx-neufs li:last-child{border:0}
.nx-neufs li img{flex:none;border-radius:3px}
.nx-neufs li a{color:var(--nx-ink,#1f1f1f);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.nx-neufs li a:hover{color:#a36338;text-decoration:underline}
.nx-neufs li span{margin-left:auto;color:#6b7785;font-size:12px;white-space:nowrap;flex:none}

/* ---------- responsive ---------- */
@media only screen and (max-width:900px){
  .nx-titre-section,body.nx .nx-main h2.nx-titre-section{font-size:15px;margin-bottom:8px}
  .nx-titre-section img{width:18px;height:18px}
  .nx-titre-section small{display:none}
  body.nx-home .nx-main .nx-alaune-section > h2.nx-titre-section{display:none}   /* home : le titre du carrousel est vide en responsive, on le retire */
  body.nx-home .nx-pub + .nx-main{margin-top:-4px}   /* home : un peu moins d espace entre la banniere et le carrousel (18 px au lieu de 22) */
  .nx-cs-diapo{grid-template-columns:1fr}
  .nx-cs-txt{padding:12px 12px 46px;gap:6px}
  .nx-cs-diapo h3{font-size:16px}
  .nx-cs-chemin{font-size:12px}
  .nx-cs-hote{font-size:13px}
  .nx-cs-diapo p{font-size:13px;text-align:left;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
  .nx-cs-points{left:12px;bottom:15px}
  .nx-cs-cmd{right:8px;bottom:8px}
  .nx-cs-cmd button{width:30px;height:30px}
  .nx-cs-cmd .pause{display:none}
  .nx-cs-vignettes{grid-template-columns:repeat(5,1fr);gap:4px}
  .nx-colonnes{grid-template-columns:1fr;gap:12px}
  .nx-bloc{padding:10px 12px}
  body.nx .nx-main .nx-bloc h2{font-size:15px}
  .nx-neufs li{font-size:13px;padding:4px 0}
}
@media (prefers-reduced-motion:reduce){
  .nx-cs-diapo{transition:none}
  #mydiv{transition:none}
}