@charset "utf-8";
/* CSS Document */

*
{
	margin:0;
	padding:0;
} 

*::selection {
	background:#dfb841;
	color:#fff;
}

*::-moz-selection {
	background:#dfb841;
	color:#fff;
}

*::-webkit-selection {
	background:#dfb841;
	color:#fff;
}

html,body
{
	width:100%;
	height:100%;
}

body
{
	background-color:#1b1b25;
}

a 
{   
	outline: none; 
}

h1 
{
	color: #deb841;
	font-family: "Open Sans",Helvetica,Arial,sans-serif;
	font-size: 35px;
	text-align: center;
	text-transform: uppercase;
	border-bottom:1px solid #41414b;
	padding-bottom:35px;
	box-sizing:border-box;
	margin:0 4%;
}

h2
{
	font-family: "Open Sans",Helvetica,Arial,sans-serif;
	text-transform:uppercase;
	margin:20px 0;
	color:#dfb841;
	font-weight:800;
	font-size:25px;
}

#auteur {
  transition: filter 0.9s ease;
}

#auteur:hover {
  filter: brightness(0) invert(1);
}

.no-style
{
	text-decoration:none;
}


.barre
{
	z-index:99999; 
	position:fixed; 
	background-color:#dfb841; 
}

#barre_haut
{
	height:8px; 
	width:100%; 
	top:0%; 
	left:0%;
}

#barre_bas
{
	height:8px; 
	width:100%; 
	bottom:0%; 
	left:0%;
}

#barre_droite
{
	height:100%; 
	width:8px; 
	top:0%; 
	right:0%;
}

#barre_gauche
{
	height:100%; 
	width:8px; 
	top:0%; 
	left:0%;
}


#auteur
{
	display: block;
	margin: 30px auto 15px auto;
	width: 123px !important;
	height:auto;
}

#titre-auteur, #title-masterclass
{
	font-size: 19.4px !important;
	text-align: center;
	text-transform: uppercase;
	margin:0px !important;
	font-weight:600 !important;
	color:#FFFFFF !important;
	padding-bottom: 0px !important;
	border-bottom: none !important;
}

#sous-titre-masterclass {
	color: #deb841 !important;
	font-family: "Open Sans",Helvetica,Arial,sans-serif;
	font-size: 35px !important;
	text-align: center !important;
	text-transform: uppercase !important;
	border-bottom: 1px solid #41414b !important;
	padding-bottom: 35px !important;
	box-sizing: border-box !important;
	margin: 0 4% !important;
	font-weight:bold !important;
	line-height: normal !important;
}

#sous-titre-auteur
{
	font-weight:normal;
	font-size: 15.7px !important; 
	text-align: center;
	text-transform: uppercase;
	color:#dfb841 !important;
	line-height:0.5 !important;
	margin-bottom:24px !important;
}

#separation-logo
{
	border-right: 1px dotted #dfb841;
	height: 25px;
	margin-bottom: 0.75%;
	width: 50%;
}

#conteneur_blog {
  border-top: 1px solid #41414b;
  box-sizing: border-box;
  margin: 0 4% 4% 4%;
}

#conteneur_blog > div > a > div {
  border-bottom: 1px solid #41414b;
  border-right: 1px solid #41414b;
  box-sizing: border-box;
  display: table;
  float: left;
  height: 100%;
  width: calc(100% / 3);
}

#conteneur_blog > div > a > div:hover
{
	background-color:#dfb841;
}

.titre-news {
  color: #fff;
  font-size: 26px;
  font-weight: 800;
  text-transform: uppercase;
}


.contenu_news
{
	vertical-align: middle;
	padding: 0 15%;
	display: table-cell;
	margin: 0 auto; 
	font-family: "Open Sans",Helvetica,Arial,sans-serif;	
}

.ligne {
  height: 337px;
  border-left: 1px solid #41414b
}

.info_actu
{
	margin:5% 0;
	font-size:11px;
	color:#6e6e88;
	text-transform:uppercase; 
}



#en-tete p
{
  color: #fff;
  font-family: "Open Sans",Helvetica,Arial,sans-serif;
  font-size: 18px;
  line-height: 1.7;
  margin-bottom: 27px;
}

#menu-categorie 
{
  display: block;
  padding: 0 4%;
  overflow: hidden;
  width: 100%;
  box-sizing:border-box;
}

#menu-categorie li {
	display: inline-block;
	list-style: none outside none;
	box-sizing: border-box;
	padding: 0 3.6%;
}

#menu-categorie li a {
	color: #6e6e88;
	font-family: open sans;
	font-size: 12px;
	text-decoration: none;
	width: 100%;
	display: block;
	text-align: center;
	text-transform: uppercase;
	padding: 10px 0px;
	box-sizing: border-box;
}

#menu-categorie li:hover
{
	background-color: #60606d;
}

#menu-categorie li:hover a
{
	color:#1b1b25;
}

.current-cat
{
	background-color: #24242e;
}


/* ===== Correctifs généraux ===== */

/* Padding bas dans chaque bloc news */
.contenu_news {
  padding: 0 15% 18px; /* ajoute un padding-bottom sans changer ton rendu */
}

/* Pas d’underline sur les liens des cartes + héritage de couleur */
#conteneur_blog a,
#conteneur_blog a:hover,
#conteneur_blog a:focus {
  text-decoration: none;
  color: inherit;
}

/* Neutralise la couleur de sélection jaune UNIQUEMENT dans le conteneur des news */
#conteneur_blog ::selection { background: transparent; color: inherit; }
#conteneur_blog ::-moz-selection { background: transparent; color: inherit; }

/* (Optionnel) éviter l’effet de “surbrillance” au tap mobile */
#conteneur_blog a { -webkit-tap-highlight-color: transparent; }

/* ====== 2 colonnes “propres” sans trou (Tablette ≤1024px) ======
   On : (1) bascule #conteneur_blog en grid 2 colonnes
        (2) aplatit les wrappers .ligne (display: contents)
        (3) conserve des hauteurs égales par ligne automatiquement
        (4) remplace la séparation centrale par une pseudo-ligne propre
*/
@media (max-width: 1024px) {

  /* grille 2 colonnes sans gap visuel (on gère nos filets à la main) */
  #conteneur_blog {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    position: relative;
    border-left: 1px solid #41414b; /* remplace l’ancien filet gauche de .ligne */
  }

  /* filet vertical central (1px) au lieu des border-right sur les cartes */
  #conteneur_blog::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    width: 1px;
    background: #41414b;
    pointer-events: none;
  }

  /* aplatit les wrappers : les <a> de toutes les .ligne s’enchaînent sans “trou” */
  .ligne {
    display: contents;      /* clé : plus de regroupement par 3 côté layout */
    height: auto;
    min-height: 0;
    border-left: none;      /* on retire leur filet, remplacé par celui du conteneur */
  }

  /* cartes : on neutralise float/table, on remplit la hauteur de la cellule grid */
  #conteneur_blog > div > a > div {
    float: none;
    display: flex;          /* permet centrage vertical du contenu */
    flex: 1;
    height: 100%;
    box-sizing: border-box;
    border-right: 1px solid #41414b;     /* plus de bordure droite carte → gérée par ::before central */
    border-bottom: 1px solid #41414b; /* on garde le filet horizontal */
  }

  /* contenu centré verticalement + padding adapté tablette */
  .contenu_news {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 10% 20px;    /* conserve un padding-bottom */
  }

  .titre-news { font-size: 22px; }
}

/* ====== Mobile : vraie 1 colonne stable (≤680px) ====== */
@media (max-width: 680px) {

  /* on sort du grid → 1 colonne pleine largeur */
  #conteneur_blog {
    display: block;
    position: relative;
  }
  #conteneur_blog::before { display: none; }  /* plus de ligne centrale */

  .ligne {
    display: block;         /* redevient un bloc simple */
    border-left: none;
    height: auto;
    min-height: 0;
  }

  /* chaque carte pleine largeur, plus de bordure droite */
  #conteneur_blog > div > a > div {
    display: block;
    width: 100%;
    height: auto;
	border-right: 1px solid #41414b;
  }

  .contenu_news {
    display: block;
    padding: 20px 6% 24px;  /* padding-bottom accentué sur mobile */
    vertical-align: baseline;
  }

  .info_actu { margin: 6px 0 10px; font-size: 10px; }
  .titre-news { font-size: 20px; line-height: 1.3; }

  /* menu catégories scrollable horizontal (confort) */
  #menu-categorie {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    padding: 0 2%;
  }
  #menu-categorie li { padding: 0 2%; }
}

/* Ultra-petits écrans */
@media (max-width: 360px) {
  .titre-news { font-size: 18px; }
  .contenu_news { padding: 16px 5% 20px; }
}

/* --- Patch largeur 2 colonnes --- */
@media (max-width: 1024px) {
  /* On garde la grille 2 colonnes que tu as ajoutée,
     mais on force la carte à occuper toute la cellule */
  #conteneur_blog > div > a { 
    width: 100%;
    display: block;     /* au cas où une ancienne règle flex/trainait */
  }

  #conteneur_blog > div > a > div {
    width: 100% !important;   /* écrase le width: calc(100%/3) d’origine */
    max-width: 100%;
  }
}

/* ------- */

/* ===== Menu full-width : colonnes égales, 1 ligne par item, mobile = 1 colonne ===== */

/* Grille responsive : colonnes égales qui s’adaptent */
#menu-categorie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); /* colonnes égales */
  gap: 0;                         /* style d’origine sans espace interne */
  width: 100%;
  padding: 0 4%;                  /* garde tes marges */
  overflow: hidden;               /* style d’origine */
  box-sizing: border-box;
}

/* Chaque li occupe sa cellule, évite les comportements inline */
#menu-categorie li {
  display: block;
  margin: 0;
  padding: 0;
  min-width: 0;                   /* IMPORTANT pour que l’ellipsis fonctionne en grid */
}

/* Lien = bloc cliquable pleine largeur, 1 seule ligne + ellipsis */
#menu-categorie li a {
  display: block;
  text-align: center;
  padding: 10px 8px;              /* même hauteur visuelle */
  line-height: 1.2;               /* évite la superposition visuelle */
  text-decoration: none;
  color: #6e6e88;

  white-space: nowrap;            /* 1 seule ligne */
  overflow: hidden;               /* masque l’excédent */
  text-overflow: ellipsis;        /* ... si trop long */
  min-width: 0;                   /* clé pour ellipsis en grid */
}

/* États hover/actif identiques à ton style */
#menu-categorie li:hover { background-color: #60606d; }
#menu-categorie li:hover a { color:#1b1b25; }

#menu-categorie .current-cat { background: transparent; }
#menu-categorie .current-cat a {
  background: #24242e;
  color: #fff;
}

/* ===== Paliers de colonnes pour un rendu solide ===== */
/* Grand → s’adapte tout seul (auto-fit) */

/* ≤1100px : 3 colonnes */
@media (max-width: 1100px) {
  #menu-categorie { grid-template-columns: repeat(3, 1fr); }
}

/* ≤900px : 2 colonnes */
@media (max-width: 900px) {
  #menu-categorie { grid-template-columns: repeat(2, 1fr); }
}

/* ≤680px : 1 colonne stricte (mobile) */
@media (max-width: 680px) {
  #menu-categorie { grid-template-columns: 1fr; }
  #menu-categorie li a {
    text-align: center;           /* cohérence visuelle */
  }
}

/* Mobile : items de menu plus hauts et centrés */
@media (max-width: 680px) {
  #menu-categorie li a {
    /* hauteur confortable */
    min-height: 52px;
    padding: 16px 12px;

    /* centrage vertical propre, sans impacter le style */
    display: flex;
    align-items: center;
    justify-content: center;

    /* lisibilité */
    font-size: 14px;
    line-height: 1.2;
  }
}


/* Restaure l'admin bar en mobile (WP breakpoint 782px) */
@media screen and (max-width: 782px) {
  #wpadminbar {
    position: fixed !important;
    top: 0; left: 0;
    height: 46px !important;
    width: 100%;
    min-width: 0 !important; /* évite conflits avec resets */
    z-index: 100000; /* au-dessus de tes barres décoratives */
  }

  /* Compense la hauteur de l'admin bar sur le document */
  html.wp-toolbar { padding-top: 46px !important; }

  /* Décale ta barre haute pour qu'elle ne chevauche pas l'admin bar */
  .admin-bar #barre_haut { top: 46px; }
}

/* Desktop : admin bar 32px */
@media screen and (min-width: 783px) {
  #wpadminbar {
    position: fixed !important;
    top: 0; left: 0;
    height: 32px !important;
    width: 100%;
    min-width: 0 !important;
    z-index: 100000;
  }
  html.wp-toolbar { padding-top: 32px !important; }
  .admin-bar #barre_haut { top: 32px; }
}

/* Centre l’ancre du header tout en gardant sa taille au contenu */
#en-tete { 
  text-align: center;           /* centre les éléments inline/inline-flex */
}

#en-tete .no-style {
  display: inline-flex;         /* shrink-wrap */
  flex-direction: column;
  align-items: center;          /* centre le contenu dans le lien */
  width: auto;                  /* pas de largeur 100% */
  vertical-align: top;          /* évite un léger décalage vertical */
}

/* Image et textes dans le lien : marges propres */
#en-tete .no-style #auteur {
  margin: 30px 0 15px;          /* plus de margin auto qui recentre toute la ligne */
}

#en-tete .no-style p {
  display: block;               /* largeur = contenu du lien */
  margin: 0;                    /* on garde le style global de #en-tete p */
  text-align: center;           /* au cas où */
}

/* Hover uniquement pour les items non actifs */
#menu-categorie li:not(.current-cat):hover { background-color: #60606d; }
#menu-categorie li:not(.current-cat):hover a { color: #1b1b25; }

/* L'item actif garde son style, même au hover/focus */
#menu-categorie .current-cat,
#menu-categorie .current-cat:hover { background: transparent; }

#menu-categorie .current-cat a,
#menu-categorie .current-cat a:hover,
#menu-categorie .current-cat a:focus {
  background: #24242e;
  color: #fff;
}

@media (max-width: 782px) {


#barre_haut {
	height: 5px;
	width: 100%;
	top: 0%;
	left: 0%;
}

#barre_bas {
	height: 5px;
	width: 100%;
	bottom: 0%;
	left: 0%;
}

#barre_gauche {
	height: 100%;
	width: 5px;
	top: 0%;
	left: 0%;
}

#barre_droite {
	height: 100%;
	width: 5px;
	top: 0%;
	right: 0%;
}
}