/*
  theme-v3.css — nouveaux composants du redesign 2026 (Bootstrap 5)
  Chargé après matostyle.css (voir style.css) : peut surcharger l'existant sans le supprimer.
  Objectif : à terme, une fois validé en prod, fusionner et nettoyer dans matostyle.css,
  et retirer les règles devenues mortes (ancien carousel jQuery, ancien header, etc.)

  Police : Ubuntu (déjà auto-hébergée dans /font, cf. @font-face dans matostyle.css) —
  pas de changement de typographie, on garde la police de marque existante.

  Rouge de marque : harmonisé sur #c80b1d, la couleur exacte du logo vectoriel fourni
  par Céline. Le CSS existant utilisait 3 rouges légèrement différents (#CA0000, #BF0A07,
  #CE1818) selon les endroits : on consolide sur une seule valeur de référence.
*/

/*
  CORRECTIF CIBLÉ SUR LE THÈME PARENT dcBootstrap
  Confirmé dans dcBootstrap/style.css : #main{float:left} #sidebar{float:right}
  #content{padding:0 0 0 1em}, mise en page Bootstrap 3 en float, incompatible
  avec la nouvelle grille Bootstrap 5 posée à l'intérieur. On neutralise juste
  ces propriétés précises plutôt que de tout réinitialiser à l'aveugle.

  Ajout : dcBootstrap fixe aussi une largeur sur #main (l'équivalent d'un
  col-md-8 / col-lg-8 de l'ancienne grille, soit 8/12). Le float était déjà
  neutralisé, mais pas cette largeur : #main restait donc coincé à 66,66 %
  de #content, et notre nouvelle grille (row > col-lg-8 + col-lg-4) se
  retrouvait posée à l'intérieur d'une colonne déjà réduite, d'où la page
  qui ne prenait jamais toute la largeur. On force #main en pleine largeur.
*/
#main{ float:none; width:100%; max-width:100%; flex:0 0 100%; }
#sidebar{ float:none; }
#content{ padding:0; }

/* Le thème parent code #page et #wrapper en dur en clair (background: #f6f6f6 / #fff),
   ce qui masquait le mode sombre sur l'essentiel de la page (seuls le header et les
   encarts pub, stylés directement par nous, changeaient de couleur). */
[data-bs-theme="dark"] #page{ background:var(--mv-cream) !important; }
[data-bs-theme="dark"] #wrapper{ background:var(--bs-body-bg) !important; border-color:var(--mv-line) !important; }

:root{
  --mv-red:#c80b1d;
  --mv-red-text: var(--mv-red);
  --mv-black:#171512;
  --mv-cream:#faf8f5;
  --mv-line:#e9eaeb;
  --mv-radius:14px;
  --mv-logo-ink:#171512;
}
[data-bs-theme="dark"]{
  --mv-cream:#14120f;
  --mv-line:#000;
  --bs-body-bg:#0f0d0b;
  --bs-body-color:#efe9e1;
  --mv-logo-ink:#ffffff;
  --mv-red-text: #CD5151;
}


body{ font-family:'ubunturegular', sans-serif; background:var(--mv-cream); }
h1,h2,h3,h4{ font-family:'ubuntubold', sans-serif; }

/* ---------- header ---------- */
.mv-header{ background:var(--bs-body-bg); border-bottom:1px solid var(--mv-line); position:sticky; top:0; z-index:1030; }
.mv-logo-link{ display:inline-flex; text-decoration:none; }
.mv-logo-svg{ height:80px; width:auto; aspect-ratio:300/160; display:block; }

.mv-nav{ gap:.1rem; }
.mv-nav .nav-link{ font-family:'ubuntubold',sans-serif; font-size:.88rem; color:var(--bs-body-color) !important; padding:.5rem .7rem; text-transform:uppercase; letter-spacing:.02em; }
.mv-nav .nav-link:hover, .mv-nav .nav-link:focus, .mv-nav .nav-link.active{ color:var(--mv-red-text) !important; }
.mv-nav .nav-link.mv-home-link{ font-size:1rem; padding:.5rem .6rem; }
.mv-nav .dropdown-menu{ border-radius:10px; border:1px solid var(--mv-line); }
.mv-nav .dropdown-item{ font-size:.85rem; padding:.5rem 1rem; color:var(--bs-body-color) !important; }
.mv-nav .dropdown-item:hover, .mv-nav .dropdown-item:focus{ background:var(--mv-red) !important; color:#fff !important; }
@media(hover:hover) and (min-width:992px){
  .mv-nav .dropdown:hover > .dropdown-menu{ display:block; margin-top:0; }
}

.mv-social-inline a{
  width:32px; height:32px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  color:var(--bs-body-color) !important; border:1px solid var(--mv-line); margin-left:.3rem; font-size:.82rem;
}
.mv-social-inline a:hover{ background:var(--mv-red); color:#fff !important; border-color:var(--mv-red); }

.mv-icon-btn{ width:38px; height:38px; border-radius:50%; border:1px solid var(--mv-line); display:inline-flex; align-items:center; justify-content:center; background:transparent; color:var(--bs-body-color) !important; }
.mv-icon-btn:hover{ background:var(--mv-red); color:#fff !important; border-color:var(--mv-red); }

@media (max-width:991px){ .mv-nav{ display:none; } .mv-social-inline{ display:none; } }

/* ---------- ad slots (emplacements génériques, contenu injecté par Media/?emplacement=N) ---------- */
.mv-ad{

  display:flex; align-items:center; justify-content:center; flex-direction:column;
  color:#8a8378; font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; text-align:center;
}

.mv-ad-top{ height:170px; max-width:1000px; margin:0 auto; }
.mv-ad-side{ height:250px; }

/* ---------- cards à overlay (accueil, rubriques) ---------- */
.mv-card{ position:relative; border-radius:var(--mv-radius); overflow:hidden; display:block; color:#fff !important; text-decoration:none; background:#111; isolation:isolate; }
.mv-card-title, .mv-card .small{ color:#fff !important; }
.mv-card img{ width:100%; height:100%; object-fit:cover; object-position:center; transition:transform .5s ease; float:none !important; margin:0 !important; }
.mv-card:hover img{ transform:scale(1.05); }
.mv-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0) 20%,rgba(0,0,0,.9) 100%); z-index:1; }
.mv-card-body{ position:absolute; left:0; right:0; bottom:0; padding:1.1rem 1.2rem; z-index:2; }
.mv-pill{ display:inline-block; font-size:.72rem; font-family:'ubuntubold',sans-serif; text-transform:uppercase; letter-spacing:.03em; padding:0.3rem .6rem 0.2em 0.6rem; border-radius:50px; color:#fff; background:var(--mv-red); margin-bottom:.5rem; }
.mv-card-title{ font-family:'ubuntubold',sans-serif; font-size:1.05rem; line-height:1.28; margin-bottom:.3rem; }
.mv-card-title.lg{ font-size:1.6rem; line-height:1.2; }

/* images fournies au format 3:2 (paysage) -> ratio conservé pour ne quasiment jamais recadrer */
.mv-hero-card{ aspect-ratio:3/2; }
.mv-feature-card{ aspect-ratio:3/2; }
.mv-thumb-plain{ border-radius:var(--mv-radius); overflow:hidden; display:block; aspect-ratio:3/2; }
.mv-thumb-plain img{ width:100%; height:100%; object-fit:cover; float:none !important; margin:0 !important; }


.mv-section-title{ display:flex; align-items:center; gap:.5rem; font-family:'ubuntubold',sans-serif; font-size:1.3rem; margin-bottom:.15rem; }
.mv-section-title i{ color:var(--mv-red-text); font-size:1rem; }

.mv-row-item{ display:flex; gap:.75rem; padding:.6rem 0; border-bottom:1px solid var(--mv-line); }
.mv-row-item:last-child{ border-bottom:none; }
.mv-row-thumb{ height:90px; width:auto; border-radius:8px; object-fit:cover; flex:0 0 auto; float:none !important; margin:0 !important; }
.mv-row-item h6{ font-size:.88rem; font-family:'ubuntubold',sans-serif; line-height:1.25; margin-bottom:.2rem; }
.mv-row-item h6 a{ color:var(--bs-body-color) !important; }
.mv-row-item h6 a:hover{ color:var(--mv-red-text) !important; }
.mv-row-item .mv-pill{ font-size:.62rem; padding:.12rem .45rem; margin-bottom:.25rem; }

/* ---------- sidebar (widgets Dotclear : nav + extra) ---------- */
.mv-widget{ background:var(--bs-body-bg); border:1px solid var(--mv-line); border-radius:var(--mv-radius); padding:1.1rem; margin-bottom:1.25rem; }
.mv-widget h6, #blognav h3, #blogextra h3{ font-family:'ubuntubold',sans-serif; text-transform:uppercase; font-size:.8rem; letter-spacing:.04em; margin-bottom:.9rem; color:var(--mv-red-text); }
.mv-widget ul{ list-style:none; padding:0; margin:0; }
.mv-widget ul li{ padding:.35rem 0; border-bottom:1px solid var(--mv-line); font-size:.86rem; display:flex; justify-content:space-between; }
.mv-widget ul li:last-child{ border-bottom:none; }
.mv-widget ul li a{ color:var(--bs-body-color) !important; text-decoration:none; }
.mv-widget ul li a:hover{ color:var(--mv-red-text) !important; }
#blognav a, #blogextra a{ color:var(--bs-body-color) !important; text-decoration:none; }
#blognav a:hover, #blogextra a:hover{ color:var(--mv-red-text) !important; }
.mv-sticky{ position:sticky; top:90px; }
.widget.liste-categories {
  margin-left: 3rem;
  margin-top: 1rem;
}
.mv-social-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.mv-social-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.mv-social-count {
  font-size: 0.85rem;
  color: #adb5bd;
  line-height: 1;
}

/* Les images alignées "flottantes" par les rédacteurs (style="float:left" en ligne,
   directement sur la balise <img>) laissent une colonne de texte trop étroite sur
   mobile portrait, illisible. On force la pleine largeur en dessous d'un certain
   seuil — un style en ligne ne cède qu'à un !important dans la feuille de style.
   N'affecte pas les images de galerie : même spécificité, mais mêmes valeurs déjà
   en place chez elles (float:none, width:100%), donc aucun conflit. */
@media (max-width:576px){
  .post-content img{
    float:none !important;
    width:100% !important;
    margin:0 0 1rem 0 !important;
  }
}

/* ---------- galerie (remplacement de jGallery/Galleria par GLightbox) ---------- */
.mv-gallery-main{
  display:block; position:relative; aspect-ratio:3/2; border-radius:var(--mv-radius); overflow:hidden;
  background:transparent; margin-bottom:.6rem; cursor:zoom-in;
}
.mv-gallery-main img{ border-radius: var(--mv-radius);width:100%; height:100% !important; object-fit:contain; float:none !important; margin:0 !important; }
.mv-gallery-main-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:40px; height:40px; border-radius:50%; border:none;
  display:flex; align-items:center; justify-content:center;
  background:rgba(23,21,18,.55); color:#fff; opacity:.85;
}
.mv-gallery-main-nav:hover{ opacity:1; background:rgba(23,21,18,.75); }
.mv-gallery-main-nav-prev{ left:12px; }
.mv-gallery-main-nav-next{ right:12px; }
.mv-gallery-strip-wrap{ position:relative; margin-bottom:1.5rem; }
ul.mv-gallery-strip{
  display:flex !important; flex-wrap:nowrap !important;
  gap:.4rem; overflow-x:auto; list-style:none; padding:0 36px !important; margin:0;
  scroll-behavior:smooth; scrollbar-width:none;
}
ul.mv-gallery-strip::-webkit-scrollbar{ display:none; }
ul.mv-gallery-strip li{ flex:0 0 auto !important; width:auto !important; float:none !important; }
ul.mv-gallery-strip li a{
  display:block; width:84px !important; height:56px; border-radius:6px; overflow:hidden;
  border:3px solid transparent;
}
@media(min-width:768px){
  ul.mv-gallery-strip li a{ width:120px !important; height:80px; }
}
ul.mv-gallery-strip li a.active{ border-color:var(--bs-body-color); }
ul.mv-gallery-strip img{ width:100%; height:100%; object-fit:cover; float:none !important; margin:0 !important; }
.mv-gallery-nav{
  position:absolute; top:0; bottom:0; width:32px; border:none; z-index:2;
  display:flex; align-items:center; justify-content:center;
  background:var(--bs-body-bg); color:var(--bs-body-color); opacity:.9;
}
.mv-gallery-nav-prev{ left:0; }
.mv-gallery-nav-next{ right:0; }

.mv-gallery-toggle{
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%; border:1px solid var(--mv-line);
  background:var(--bs-body-bg); color:var(--bs-body-color); margin-bottom:.6rem;
}
.mv-gallery-toggle:hover{ background:var(--mv-red); color:#fff; border-color:var(--mv-red); }

ul.mv-gallery-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:.5rem;
  list-style:none; padding:0; margin:0 0 1.5rem;
}
@media(min-width:768px){ ul.mv-gallery-grid{ grid-template-columns:repeat(6, 1fr); } }
ul.mv-gallery-grid li a{
  display:block; aspect-ratio:3/2; border-radius:6px; overflow:hidden; border:3px solid transparent;
}
ul.mv-gallery-grid li a.active{ border-color:var(--bs-body-color); }
ul.mv-gallery-grid img{ width:100%; height:100%; object-fit:cover; float:none !important; margin:0 !important; }

/* ---------- cartes de rubrique (category.html) : même habillage que les cards de la home,
   mais texte sous l'image plutôt qu'en overlay dessus ---------- */
.mv-article-card{ color:inherit; }
.mv-article-card .thumb{ display:block; aspect-ratio:3/2; border-radius:var(--mv-radius); overflow:hidden; margin-bottom:.9rem; background:#eee; }
.mv-article-card .thumb img{ width:100%; height:100%; object-fit:cover; float:none !important; margin:0 !important; }
.mv-article-card .mv-pill{ display:inline-block; }
.mv-article-card h2, .mv-article-card h3{ font-family:'ubuntubold',sans-serif; color:var(--mv-red-text) !important; line-height:1.28; margin:.2rem 0 .5rem; }
.mv-article-card h3{ font-size:1.05rem; }
.mv-article-card h2{ font-size:1.6rem; line-height:1.2; }
.mv-article-card .meta{ display:flex; align-items:center; gap:.9rem; font-size:.82rem; color:#8a8378; }
.mv-article-card .meta .comments{ display:inline-flex; align-items:center; }
.mv-article-card .meta .read-more{ display:none; }
.mv-article-card:hover h2, .mv-article-card:hover h3{ text-decoration:underline; }
.mv-article-hero .thumb{     aspect-ratio: 3/2; margin: 0; }
@media(min-width:768px){ .mv-article-hero .thumb{ aspect-ratio:3/2; margin: 0 15%;  }}
.mv-article-hero {
  background: var(--mv-line);
  padding: 20px;
  border-radius: var(--mv-radius);
}

/* ---------- chapo (extrait mis en avant, avec l'image de l'article) ---------- */
.mv-chapo{
  padding:20px;
  font-size:1rem;
  border-radius:var(--mv-radius);
  background:var(--mv-line);
  font-weight:400;
  font-style:normal;
  line-height:1.5;
  color:var(--bs-body-color);
}
[data-bs-theme="dark"] .mv-chapo{ background:var(--mv-line); }
.mv-chapo p{ font-size:inherit; font-weight:inherit; font-style:inherit; line-height:inherit; }

/* ---------- contenu d'article (saisi dans l'éditeur Dotclear) ---------- */
.post-content{ font-size:1rem; line-height:1.7; }
.post-content img{ max-width:100%; height:auto; border-radius:var(--mv-radius); }
.post-content table{ width:100%; border-collapse:collapse; margin:1.5rem 0; font-size:.92rem; }
.post-content table th{ background:var(--mv-black); color:#fff; text-align:left; padding:.6rem .9rem; }
.post-content table td{ padding:.6rem .9rem; border-bottom:1px solid var(--mv-line); }
.post-content table tr:nth-child(even) td{ background:var(--mv-cream); }
.post-content h2, .post-content h3{ font-family:'ubuntubold',sans-serif; margin-top:2rem; }
.post-content a{ color:var(--mv-red-text) !important; }
.post-content blockquote{
  margin:1.8rem 0; padding:1rem 1.4rem; border-left:4px solid var(--mv-red);border-radius:var(--mv-radius);
  background:var(--mv-line); font-size:1.1rem; font-style:italic; line-height:1.6;
}
.post-content blockquote p:last-child{ margin-bottom:0; }


/* ---------- onglets commentaires / rétroliens (Bootstrap 5) ---------- */
#post-tabs .nav-link{ color:var(--bs-body-color); border-radius:8px; font-family:'ubuntubold',sans-serif; font-size:.85rem; }
#post-tabs .nav-link.active{ background:var(--mv-black); color:#fff; }

/* ---------- sidebar : intitulés de widgets (le thème parent utilise h2, pas h3) ---------- */
#blognav h2, #blogextra h2{ font-family:'ubuntubold',sans-serif; text-transform:uppercase; font-size:.8rem; letter-spacing:.04em; margin-bottom:.9rem; color:var(--mv-red-text); }

/* ---------- footer ---------- */
/* Séparateur entre les 4 blocs du footer (Pages / Newsletter / Catégories /
   Réseaux sociaux) : utile uniquement quand ils sont empilés en colonne
   unique (< md), inutile une fois côte à côte, donc retiré à partir de md. */
.mv-footer-col{ padding-bottom:1.5rem; border-bottom:1px solid #2a2622; }
@media (min-width:768px){ .mv-footer-col{ padding-bottom:0; border-bottom:none; } }
.mv-footer{ background:var(--mv-black); color:#cfc9be; padding:2.5rem 0 6rem; margin-top:3rem; }
.mv-footer h6{ color:#fff; font-family:'ubuntubold',sans-serif; font-size:.8rem; text-transform:uppercase; letter-spacing:.05em; margin-bottom:1rem; }
.mv-footer a{ color:#cfc9be !important; text-decoration:none; font-size:.87rem; }
.mv-footer a:hover{ color:var(--mv-red-text) !important; }

/* Liste des catégories (footer) : sans les règles ci-dessous, .categories-list
   et .sub-categories-list héritent du style par défaut du navigateur (puces +
   padding-left ~40px par niveau), d'où l'indentation qui explose sur les
   catégories à sous-catégories. On fixe un pas d'indentation constant. */
.categories-list,
.sub-categories-list{ list-style:none; margin:0; padding-left:0; }
.sub-categories-list{ padding-left:1rem; }
.category-element{ padding:.2rem 0; font-size:.87rem; }
.category-element .count{ color:#8a8378; font-size:.82rem; }
.mv-social a{ width:34px; height:34px; border-radius:50%; background:#2a2622; display:inline-flex; align-items:center; justify-content:center; margin-right:.4rem; color:#fff; }
.mv-footer-bottom{ border-top:1px solid #2a2622; margin-top:2rem; padding-top:1.2rem; font-size:.78rem; color:#8a8378; }

#back-to-top::after {
  content: none;
}


.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.5em 0;
}

.table-scroll table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
}

.table-scroll::-webkit-scrollbar {
  height: 6px;
}
.table-scroll::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 3px;
}