@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700|Open+Sans');
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");

/* ==========================================================================
   Style g�n�ral
   ========================================================================== */
html{
 min-height: 100%;
 font-size: 62.5%; /* 1rem = 10px */
 overflow-x:hidden;
 /*scroll-behavior: smooth;*/
}
body{
min-height:100%;
margin:0;
padding:0;
background-image:url(https://www.automobile-sportive.live/images/carbone.jpg);
background-position:top;
background-repeat: repeat-x;
background-color:#000000;
background-attachment:fixed;
font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-size:16px;
overflow-x: clip;
}
*, *::before, *::after{
    box-sizing:border-box;
}
img,
iframe,
video{
    max-width:100%;
    height:auto;
}
h1{
font-family: 'Montserrat', sans-serif;
font-size:24px;
font-weight: bold;
color:#db000b; 
}
h2{
font-family: 'Montserrat', sans-serif;
font-size:18px; 
font-weight:700;
font-style:italic;
color:#222222;
padding-left: 0;
margin-top: 30px;
margin-bottom: 10px;
}
h3{
font-family: 'Montserrat', sans-serif;
font-size:16px; 
font-weight:bold; 
color: #666666; 
margin-top: 30px;
margin-bottom: 10px;
}
h2, h3, .ancre {
  scroll-margin-top: 110px;
}
a{
font-weight:bold;
color:#333333;
text-decoration:none;
}
a:hover{
text-decoration:none;
color:#db000b;
}
form{margin:0px;}
input,textarea, select{
color:#000000;
font:normal 12px; 
margin:0px;
}
img{
max-width:100%;
height:auto;
}
iframe {max-width:100%;}
hr{
display: block !important;
border: 0 !important;
height: 1px !important;
background: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.08) 50%, transparent 100%) !important; 
margin-top: 25px !important;
margin-bottom: 25px !important;
clear: both !important;
}
figure {
width: 100%;
text-align: center;
font-style: italic;
font-size: smaller;
color:gray;
text-indent: 0;
margin: 0px;
}

/* ==========================================================================
   Entete
   ========================================================================== */
#header{
max-width:1010px;
margin:auto;
background-color:#000;
}
#recherche{
float:right;
width:auto;
max-width:300px;
padding-top:20px;
}
#recherche input[type=text] {
font-family: 'Montserrat', sans-serif;
border:0px;
}
#recherche .bouton{
color:#FFF;
background:#000;
border:0px;
padding:3px;
}


/* ==========================================================================
   HEADER NAVIGATION v26 CSS ONLY - L'AUTOMOBILE SPORTIVE
   ========================================================================== */

/*    VARIABLES GLOBALES DU MENU (Performances & Maintenance)
   ========================================================================== */
:root {
  --nav-red: #b30009;
  --nav-bg: #000000;
  --nav-text: #dddddd;
  --nav-sub-bg: #111111;
  --nav-sub-hover: #1c1c1c;
  --nav-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/*    MENU PC (Sticky & Conteneur)
   ========================================================================== */
#nav-menu {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 999999; /* S�curit� maximale anti-chevauchement */
  font-family: 'Montserrat', sans-serif;
  background: #000;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
  width: 100%;
  transition: padding 0.3s ease;
}

#nav-menu .nav-header-bar {
  background: var(--nav-bg);
  padding-bottom: 10px;
  width: 100%;
  box-sizing: border-box;
}

#nav-menu.scrolled .nav-header-bar {
  padding: 2px 0; /* Passe de 10px � 2px (ou 5px selon ton go�t) */
}

#nav-menu .nav-container {
  max-width: 1010px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}

/*    LOGO
   ========================================================================== */
/* Conteneur Logo & Tagline */
#logo {
  flex: 1;
  display: flex;
  flex-direction: column; /* Empile l'image et la tagline */
  align-items: center;    /* Centre horizontalement */
  justify-content: center;
  position: relative;     /* Point d'ancrage pour la tagline absolute */
  height: 100px;           /* Hauteur initiale du conteneur */
  transition: height 0.3s ease;
}

#nav-menu.scrolled #logo {
  height: 45px;           /* Hauteur r�duite au scroll */
}

/* Lien du logo */
#logo-link {
  display: block;
  line-height: 0;         /* �vite un espace blanc sous l'image */
}

#logo img {
  display: block;
  height: 90px;           /* Taille image initiale */
  width: auto;
  padding: 10px 0;
  transition: all 0.3s ease;
}

#nav-menu.scrolled #logo img {
  height: 40px;           /* Taille image au scroll */
  padding: 2px 0;
}

/* Tagline 25 ans */
.tagline-anniv {
  display: none;          /* Cach� par d�faut */
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 700;
  font-style: italic;
  letter-spacing: 1.5px;
  color: #ff0000;
  text-shadow: 0 0 4px #db000b, 0 0 10px #e51b24, 0 0 20px #ffdf00;
  white-space: nowrap;
  
  /* Positionnement */
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%) translateY(5px);
  
  /* Animation */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Survol Logo et Desktop */
@media all and (min-width: 1010px) {
  .tagline-anniv {
    display: block;       /* Affich� uniquement sur desktop */
  }

  /* Apparition au survol du logo (seulement si non scroll�) */
  #nav-menu:not(.scrolled) #logo:hover .tagline-anniv {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }

  /* Petit effet sur le logo au survol */
  #nav-menu:not(.scrolled) #logo:hover #logo-link img {
    transform: scale(0.8);
  }
}

/* Survol Logo et Mobile */
@media (max-width: 1010px) {

  /* 1. Nettoyage du logo */
  #nav-menu #logo {
    flex: none !important; 
    display: flex !important;
    align-items: center !important;   /* Centrage vertical */
    justify-content: flex-start !important;
    height: 60px !important;
    box-sizing: border-box;
  }

  /* 2. Suppression de la tagline */
  #nav-menu #logo .tagline-anniv {
    display: none !important;
  }

  /* 3. Taille et alignement de l'image */
  #nav-menu #logo img {
    height: 40px !important;
    width: auto !important;
    max-width: 160px !important;
    padding: 0 !important;
    margin: 10px 0px 0px 0px!important;
    object-fit: contain;
  }

  /* 4. Centrage du conteneur global pour aligner logo et burger */
  #nav-menu .nav-container {
    display: flex !important;
    align-items: center !important;   /* Aligne tout verticalement */
    justify-content: space-between !important;
    height: 60px !important;
  }
}

#nav-menu.scrolled .nav-v2 {
  padding: 0; /* Ajuste si besoin */
}

/*    RECHERCHE
   ========================================================================== */
#nav-menu .nav-v2 .search-menu-item {
  display: flex;
  align-items: center;
  padding: 0 15px; /* �carte un peu le champ des autres onglets */
}
#nav-menu .nav-v2 .search-menu-item form {
  position: relative;
  display: flex;
  margin: 0;
}
#nav-menu .nav-v2 .search-menu-item #q {
  background: rgba(0, 0, 0, 0.4); /* Fond semi-transparent �l�gant */
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 6px 30px 6px 15px;
  border-radius: 20px; /* Bordures arrondies pour un style plus moderne */
  width: 128px;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  outline: none;
  transition: width 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

/* Effet dynamique : le champ s'agrandit quand on clique dedans */
#nav-menu .nav-v2 .search-menu-item #q:focus {
  width: 180px; 
  border-color: var(--nav-red);
  background: #000000;
}

#nav-menu .nav-v2 .search-menu-item #searchsubmit {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #888888;
  font-size: 13px;
  cursor: pointer;
  transition: color var(--nav-transition);
}

#nav-menu .nav-v2 .search-menu-item #searchsubmit:hover {
  color: var(--nav-red);
}

/*    BARRE DE NAVIGATION PRINCIPALE (PC)
   ========================================================================== */
#nav-toggle {
  display: none; /* Cache l'interrupteur m�canique */
}

#nav-menu .menu-button {
  display: none; /* Cach� sur PC */
  cursor: pointer;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 21px;
}

#nav-menu .menu-button span {
  display: block;
  height: 3px;
  width: 100%;
  background-color: var(--nav-text);
  border-radius: 3px;
  transition: transform var(--nav-transition), opacity var(--nav-transition);
}

#nav-menu .nav-v2 {
  display: flex;
  justify-content: center;
  background: #151515;
  border-top: 1px solid #222;
  border-bottom: 2px solid var(--nav-red);
  margin: 0;
  padding: 0;
  list-style: none;
}

#nav-menu .nav-v2 > li {
  position: relative;
}

#nav-menu .nav-v2 > li > a {
  display: block;
  padding: 16px 22px;
  color: var(--nav-text);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--nav-transition), background var(--nav-transition);
}

#nav-menu .nav-v2 > li > a:hover {
  color: #ffffff;
  background: var(--nav-red);
}

#nav-menu > ul > li.active > a {
  color: #ffffff;
}

/*    SOUS-MENUS PC (Acc�l�ration GPU & Fluidit�)
   ========================================================================== */
#nav-menu .nav-v2 .submenu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 230px;
  background: var(--nav-sub-bg);
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 3px solid var(--nav-red);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
  
  /* Masquage optimis� */
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) translateZ(0); /* translateZ force le GPU */
  pointer-events: none;
  
  /* Pr�paration mat�rielle de l'animation */
  will-change: opacity, transform, visibility;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

/* Apparition du sous-menu */
#nav-menu .nav-v2 .has-sub:hover .submenu,
#nav-menu .nav-v2 .has-sub:focus-within .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) translateZ(0);
  pointer-events: auto;
}

/* Liens du sous-menu PC */
#nav-menu .nav-v2 .submenu li a {
  display: block;
  padding: 12px 20px 12px 30px;
  color: #ccc;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  position: relative;
  transition: all var(--nav-transition);
}

/* Le chevron dynamique � gauche */
#nav-menu .nav-v2 .submenu li a::before {
  content: "\f105";
  font-family: 'FontAwesome';
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%) translateX(-5px) translateZ(0);
  opacity: 0;
  color: var(--nav-red);
  transition: all var(--nav-transition);
}

/* Effet Hover Premium sur le lien enfant */
#nav-menu .nav-v2 .submenu li a:hover,
#nav-menu .nav-v2 .submenu li a:focus {
  padding-left: 38px;
  background: var(--nav-sub-hover);
  color: #ffffff;
}

#nav-menu .nav-v2 .submenu li a:hover::before,
#nav-menu .nav-v2 .submenu li a:focus::before {
  opacity: 1;
  transform: translateY(-50%) translateX(0) translateZ(0);
  color: var(--nav-red); /* Retour au rouge sur le chevron PC */
}

/*    M�CANIQUE MOBILE & RESPONSIVE (< 1010px)
   ========================================================================== */
@media (max-width: 1010px) {
  
  /* Fixation de l'en-t�te */
  #nav-menu {
    position: fixed;
    height: 60px;
    background: var(--nav-bg);
  }
	
  #nav-menu .nav-header-bar,
  #nav-menu.scrolled .nav-header-bar {
    height: 60px !important;
    padding: 0 !important;
  }

  #nav-menu .nav-container {
    height: 100%;
    padding: 0 15px;
  }

  /* Affichage des �l�ments mobiles */
  #nav-menu .menu-button {
	display: flex !important; 
    z-index: 100000 !important; 
    flex-shrink: 0.3 !important;
	min-width: 24px;
	}

  #nav-menu .nav-v2 .search-menu-item {
    padding: 15px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
  }

  #nav-menu .nav-v2 .search-menu-item form {
    width: 100%; /* Le champ prend toute la largeur du tiroir mobile */
  }

  #nav-menu .nav-v2 .search-menu-item #q {
    width: 100%;
    box-sizing: border-box;
  }

  /* D�sactive l'effet d'agrandissement de la recherche sur mobile car il a d�j� 100% de la largeur */
  #nav-menu .nav-v2 .search-menu-item #q:focus {
    width: 100%; 
  }

  /* Le tiroir principal */
  #nav-menu .nav-v2 {
    position: fixed;
    top: 60px;
    left: 0;
    width: 100%;
    height: calc(100vh - 60px);
    background: rgba(10, 10, 10, 0.98);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    
    /* �tat ferm� optimis� */
    display: block;
    flex-direction: column;
    justify-content: flex-start;
    border: none;
    overflow-y: auto;
    
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) translateZ(0);
    will-change: opacity, transform, visibility;
    transition: all var(--nav-transition);
  }

  /* Ouverture du tiroir */
  #nav-toggle:checked ~ .nav-v2 {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) translateZ(0);
  }

  /* Liens principaux mobiles */
  #nav-menu .nav-v2 > li > a {
    padding: 16px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    background: transparent;
  }

  /* Sous-menus mobiles (Accordeon) */
  #nav-menu .nav-v2 .submenu {
    position: relative;
    top: 0;
    width: 100%;
    box-shadow: none;
    border: none;
    background: var(--nav-sub-bg);
    
    /* �tat ferm� */
    max-height: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    overflow: hidden;
    will-change: max-height;
    transition: max-height var(--nav-transition);
  }

  /* D�ploiement accordeon */
  #nav-menu .nav-v2 .has-sub:focus-within .submenu,
  #nav-menu .nav-v2 .has-sub:hover .submenu {
    max-height: 600px; /* Assez grand pour tout afficher */
  }

  /* Liens du sous-menu mobile */
  #nav-menu .nav-v2 .submenu li a {
    padding: 14px 20px 14px 40px;
    background: #151515;
    border-bottom: 1px solid rgba(255, 255, 255, 0.02);
  }

  #nav-menu .nav-v2 .submenu li a::before {
    display: none; /* S�curit� anti-bug tactile */
  }

  /* Chevrons d'indication (Mobile) */
  #nav-menu .nav-v2 > li.has-sub > a {
    position: relative;
  }
  
  #nav-menu .nav-v2 > li.has-sub > a::after {
    content: "\f107";
    font-family: 'FontAwesome';
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    color: #888;
  }

  #nav-menu .nav-v2 > li.has-sub:focus-within > a::after,
  #nav-menu .nav-v2 > li.has-sub:hover > a::after {
    content: "\f106";
    color: var(--nav-red);
  }

  /* Animation du burger en croix */
  #nav-toggle:checked ~ .nav-header-bar .menu-button span:nth-child(1) { 
    transform: translateY(9px) rotate(45deg); 
  }
  #nav-toggle:checked ~ .nav-header-bar .menu-button span:nth-child(2) { 
    opacity: 0; /* La barre du milieu dispara�t */
  }
  #nav-toggle:checked ~ .nav-header-bar .menu-button span:nth-child(3) { 
    transform: translateY(-9px) rotate(-45deg); 
  }
}

/* ==========================================================================
   CORRECTIF DE RETOUR AU FLUX (ANTI-COLLISION)
   ========================================================================== */

div[align="center"] + #rubrique, #main, .container, #sub-header {
  clear: both !important;
}

/* ==========================================================================
   Sub-header & annonceur
   ========================================================================== */
.sub-header{
  width:100%;
  max-width:1010px;
  margin:auto;
  box-sizing:border-box;
}

.sub-header img{
  display:block;
  width:100%;
  height:auto;
}

@media (max-width:1010px){

  .sub-header{
    padding-top:60px;
  }

}

.header-ad{
  width:100%;
  max-width:1010px;
  margin:auto;
  padding:20px 0;
  background:#fff;
  text-align:center;
  overflow:hidden;
  box-sizing:border-box;
}

.header-ad ins.adsbygoogle{
  display:block !important;
  max-width:100%;
  overflow:hidden;
}

/* ==========================================================================
   Rubriques & �l�ments de mise en page g�n�rale
   ========================================================================== */
/* Conteneur general */
#main{
max-width:1010px;
width:100%;
min-height:970px;
background-color:#ffffff;
padding:0 20px;
margin:auto;
text-align:left;
box-sizing:border-box;
/*
width:970px;
height:auto !important;
min-height:970px;
padding-left:20px;
padding-right:20px;
overflow:auto;
*/
}
#main::after {
  content: "";
  display: table;
  clear: both;
}

/* Titre de rubrique */

#rubrique{
background: linear-gradient(90deg, #db000b 0%, #1a1a1a 100%) !important;
display:block;
width: auto;
margin-left: -20px;
margin-right: -20px;
padding: 5px 20px ;
font-family: 'Montserrat', sans-serif;
font-weight:bold;
font-style:italic;
font-size:24px;
text-transform:uppercase;
color:#FFF;
box-sizing:border-box;
}
#rubrique i:before{
font-family: 'Fontawesome';
font-weight: normal;
font-style: normal;
padding-right:5px;
content: "\f105"; 
color: #FFF; 
cursor:context-menu;
}
#rubrique.une i:before{
content:"\f015"; /* fa-home */
}
#rubrique.actualites i:before{
content:"\f1ea"; /* fa-newspaper-o */
}
#rubrique.guide i:before{
content:"\f02d"; /* fa-book */
}
#rubrique.avis i:before{
content:"\f27a"; /* fa-commenting */
}
#rubrique.technique i:before{
content:"\f0ad"; /* fa-wrench */
}
#rubrique.passion i:before{
content:"\f004"; /* fa-heart */
}
#rubrique.reportages i:before{
content:"\f06e"; /* fa-eye */
}
#rubrique.photos i:before{
content:"\f030"; /* fa-camera */
}
#rubrique.recherche i:before{
content:"\f002"; /* fa-search */
}

/* Fil d'Ariane */

#fil {
width: auto;
max-width: 730px;
padding: 1.2rem 0;
margin-top:10px;
margin-left: 1rem;
margin-bottom: 2rem;
font-family: 'Montserrat', sans-serif;
font-size: 1rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1.5px;
color: #8c8c8c;
text-align: left;
}
#fil a {
  font-weight: 600;
  color: #555555;
  transition: color 0.25s ease;
}
#fil a:hover {
  color: #db000b;
}

@-webkit-keyframes blinker{  
from { opacity: 1.0; }
to { opacity: 0.3; }
}
.css3-blink{
-webkit-animation-name: blinker;  
-webkit-animation-iteration-count: infinite;  
-webkit-animation-timing-function: cubic-bezier(1.0,0,0,1.0);
-webkit-animation-duration: 2s; 
}

/* ==========================================================================
   CORPS DE PAGE
   ========================================================================== */

/* titres de sous-rubriques */
.ssrubrique {
 display: block;
 width: 100%;
 box-sizing: border-box;
 font-family: 'Montserrat', sans-serif;
 font-weight: 800;
 font-style: italic;
 font-size: 18px;
 text-transform: uppercase;
 letter-spacing: 0.5px;
 color: #db000b;
 padding-bottom: 8px;
 margin-top: 45px;
 margin-bottom: 20px;
 border-bottom: 3px solid;
 border-image: linear-gradient(90deg, #db000b 0%, #1a1a1a 100%) 1;
}
.ssrubrique i {
 color: #1a1a1a;
 padding-right: 10px;
 font-style: normal;
}

/* Contenu principal */
#sidebar{
 float:right;
 width:300px;
/* position: -webkit-sticky; S�curit� pour la compatibilit� Safari */
/* position: sticky; */
/* top: 100px; Se bloque � 100px du haut de l'�cran lors du d�filement */
/* z-index: 100; S'assure que la pub reste au-dessus du fond mais sous un �ventuel menu mobile */
/*display:block;
overflow:hidden;
margin:auto;
padding:0px;*/
}
#sidebar .box{ 
width:300px;
margin-bottom:30px;
}
#skybar{
 float: right;
 width: 160px;
 margin-top: 40px;
 position: -webkit-sticky; /* S�curit� pour la compatibilit� Safari */
 position: sticky;
 top: 100px; /* Se bloque � 100px du haut de l'�cran lors du d�filement */
 z-index: 100; /* S'assure que la pub reste au-dessus du fond mais sous un �ventuel menu mobile */
}

#main-content {
 width: 100%;
 display: block;
 box-sizing: border-box;
}
/* Le Clearfix force la fin de la zone */
#main-content::after {
  content: "";
  display: table;
  clear: both;
}

#contenu-std{ 
 float:left;
 width:calc(100% - 320px); /* Laisse 300px de pub + 20px de marge � droite */
 max-width:650px;
 background-color: #FFFFFF;
 overflow:hidden;
}
#contenu-article {
  float: left;
  width: calc(100% - 180px); /* Laisse 160px de pub + 20px de marge � droite */
  max-width: 1010px;
  background-color:#ffffff;
  box-sizing: border-box;
  overflow:hidden;
}
#contenu{ 
 float:left;
 width:100%;
 background-color: #FFFFFF;
}
#guide {
  width: 100%;
  display: block;
  box-sizing: border-box;
}
/* Le Clearfix sur #guide force la fin de la zone avant l'overfooter */
#guide::after {
  content: "";
  display: table;
  clear: both;
}
#contenu-guide {
  float: left;
  width: calc(100% - 180px); /* Laisse les 160px de pub + 20px de marge � droite */
  max-width: 1010px;
  box-sizing: border-box;
  background-color: #FFFFFF;
}

/* --- Images --- */
#contenu img, #contenu-std img, #contenu-article img {
    max-width: 100%;
    height: auto;
}

/* --- Titres H1 --- */
#contenu h1, #contenu-std h1, #contenu-article h1 {
    color: #db000b;
}

/* --- Paragraphes --- */
#contenu p, #contenu-std p, #contenu-article p {
    line-height: 25px;
}

/* On autorise les tableaux des fiches � r�duire si le conteneur devient trop �troit */
#contenu-std table, #contenu-guide table, #contenu-article table {
  max-width: 100% !important;
}

/* On rend les images fluides par d�faut sur PC aussi.
      Si l'image dans le tableau ne peut pas r�duire, le tableau ne r�duira pas ! */
#contenu img, #contenu-std img, #contenu-article img, #contenu-guide img {
  max-width: 100% !important;
  height: auto !important;
}

#contenu img.imgtext, #contenu img.imgtextD,
#contenu-std img.imgtext, #contenu-std img.imgtextD, 
#contenu-article img.imgtext, #contenu-article img.imgtextD {
    max-width: min(100%, 350px) !important;
}
#texte {
  width: 100%; /* CORRIG� : Prend 100% du parent (le calc est transf�r� sur le parent) */
  font-size: 16px;
  padding: 2px;
  background-color: #FFFFFF;
  box-sizing: border-box;
/*text-align: justify;
  overflow: hidden;*/
}
#texte h2 { margin-top: 40px; margin-bottom: 20px; }
#texte h2:before{
font-family: 'Fontawesome';
font-weight: normal;
font-style: normal;
padding-right:10px;
content: "\f0da";
color: #db000b;
}
#texte p{ line-height:25px; }
#texte a:not([class]) {
    color:#222222; border-bottom: dotted #111111 1px;
}
/* Espacement et a�ration globale des listes dans le corps d'article */
#texte ul, #texte ol {
  padding-left: 20px;
  margin: 20px 0 30px 0;
}
#texte ul li, #texte ol li {
  position: relative;
  margin-bottom: 10px;
  padding-left: 10px;
  line-height: 1.5;
}

#texte .article-titre{ 
font-size:26px;
text-transform:uppercase;
font-weight: bold;
text-align:left;
color: #db000b;
}
#texte .article-auteur{ 
font-size: 12px ;
font-style: italic;
padding:20px;
text-align: right;
}
#texte .encadre:before { 
    font-family: 'Fontawesome';
    font-weight: normal;
    font-style: normal;
    padding-right: 5px;
    content: "\f0a4";
    color: #CC0000;
    cursor: context-menu;
    /* Optionnel : permet d'aligner l'ic�ne verticalement avec la premi�re ligne */
    display: inline-block; 
}
#photo-xl {
 padding: 0px;
 margin: 0px;
 width: 100%;
 height: auto;
 overflow: hidden;
}
#photo-xl img {
  width: 100%;
  height: auto;
  max-width: 100%; /* Chang� de 760px � 100% pour �pouser parfaitement le conteneur */
  display: block;
}

.sommaire {
  background: #f9f9f9;
  padding: 10px;
  margin: 5px;
  font-size:13px;
}
.sommaire h2 {
  margin-top: 0;
  padding: 0;
  font-size: 1.1rem;
  color: #333;
}
.sommaire ol, .sommaire ul {
  padding-left: 10px;
  margin: 0;
  font-family: 'FontAwesome', sans-serif;
  list-style-type: "\f105";
}
/* 1. On retire la puce ou le num�ro par d�faut */
.sommaire ol, .sommaire ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
/* 2. On pr�pare le terrain pour positionner l'ic�ne */
.sommaire li {
  position: relative;
  padding-left: 20px; /* Espace pour laisser la place � l'ic�ne */
  margin-bottom: 5px;
}
/* 3. On injecte l'ic�ne FontAwesome */
.sommaire li::before {
  content: "\f105";
  font-family: 'FontAwesome';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%); /* Centre verticalement l'ic�ne par rapport au texte */
  color: #db000b; /* Optionnel : pour que l'ic�ne ait la m�me couleur que vos liens */
  font-weight: 900; /* Recommand� selon la version de FontAwesome pour que l'ic�ne s'affiche bien */
}
.sommaire a {
  color: #555555;
  text-decoration: none;
}
.sommaire a:hover {
  color: #db000b;
  text-decoration: none;
}

.video{  
position:relative;
height:0;
padding-bottom:56.25%
}
.video iframe{  
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow:hidden;
}

a.tout {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #db000b;
  display: inline-block;
  text-decoration: none;
  margin-top: 15px;
  margin-bottom: 25px;
  transition: color 0.2s ease;
}
a.tout:hover {
  color: #1a1a1a;
}
a.tout::after {
  font-family: 'Fontawesome';
  content: " \f178";
  padding-left: 8px;
  font-weight: normal;
  display: inline-block;
  transition: transform 0.2s ease;
}
a.tout:hover:after {
  transform: translateX(4px);
}
a.tout.lire {
  font-size: 11px;
  text-transform: none;
  margin: 0;
  padding-left: 5px;
  padding-right: 25px;
}

a.annonce{
background-color:#dbdbdb;
font-size:11px;
font-weight:bold;
text-decoration:none;
color:#333333;
border:#cccccc solid 1px;
display:block;
padding:10px;
width:auto;
height:94px;
padding-right:2px;
}
a.annonce:hover{
background-color:#000000;
color:#FFFFFF;
}

.nav{
font-family:tahoma;
font-size:12px;
font-weight:bold;
color:#FFFFFF;
text-decoration:none
}
.nav:hover{
text-decoration:underline;
color:#FFFFFF;
}
.box{ 
border: none !important;
background-image: 
    linear-gradient(180deg, #ffffff 0%, #f7f8f9 100%), 
    linear-gradient(90deg, #db000b 0%, #1a1a1a 100%) !important;
background-origin: border-box !important;
background-clip: padding-box, border-box !important;
border-top: 2px solid transparent !important;
padding: 16px 0px 15px 0px !important;
margin-bottom: 25px;
box-sizing: border-box;
}
.box:before {
content: "" !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 2px !important; 
background: linear-gradient(90deg, #db000b 0%, #1a1a1a 100%) !important;
z-index: 10 !important;
}
.box .titre {
display: inline-block;
font-family: 'Montserrat', sans-serif;
font-size: 14px;
font-weight: 800;
font-style: italic;
color: #1a1a1a;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 12px;
padding-left: 15px;
padding-right: 15px;
}
.box .titre i {
color: #db000b;
margin-right: 6px;
}
.box a img {
display: block;
width: 100%;
height: auto;
margin-bottom: 12px;
}
.box a{ 
display: block;
font-family: 'Montserrat', sans-serif;
font-size: 13px;
font-weight: 700;
color: #222222;
text-transform: uppercase;
line-height: 1.4;
text-decoration: none;
padding-left: 15px;
padding-right: 15px;
transition: color 0.2s ease;
}
.box a:hover{ 
color:#db000b;
}

.contenu{ 
display:block; 
width:auto;
background-color:#FFF;
padding-left:10px;
padding-right:10px;
}
.contenu h1{ 
font-size:20px; 
font-weight:bold; 
color:#FF0000; 
}
.contenu p{ 	
line-height:25px;
}
.encadre{
display:block;
background-color: #ECECEC; 
line-height:20px;
color: #333;
text-align:justify;
hyphens: auto;
-webkit-hyphens: auto; /* Pour Safari */
padding:10px;
overflow:hidden;
}
.encadre a{ 
color: #666;
}
.encadre a:hover{ 
color: #C00;
}

/* Style conteneur accordeon */

.controls {
    margin-bottom: 20px;
}

.controls button {
    background-color: #fff;
    border: 1px solid #ccc;
    color: #333;
    padding: 6px 12px;
    font-size: 13px;
    cursor: pointer;
    border-radius: 4px;
    margin-right: 5px;
    transition: all 0.2s;
}

.controls button:hover {
    background-color: #f0f0f0;
    border-color: #999;
}

.accordeon {
	margin-bottom: 5px;
    border: 1px solid #eee;
    border-radius: 4px;
}

.accordeon summary {
	list-style: none;
    cursor: pointer;
    padding: 15px;
    background-color: #f9f9f9;
    display: flex; /* Active Flexbox */
    align-items: center; /* Aligne tout verticalement au centre */
    outline: none;
}

.accordeon summary h3 {
    margin: 0;
    font-size: 1.1em;
}

.accordeon summary:hover {
    background-color: #f0f0f0; /* Couleur plus foncee */
    color: #000; /* assombrit le texte au survol */
}

/* Personnalisation icone fleche */
.accordeon summary::before {
	font-family: 'FontAwesome';
    content: '\f107';
    margin-right: 15px; /* Espace entre fl�che et texte */
    width: 20px; /* Largeur fixe pour que tous les textes soient align�s */
    text-align: center;
    transition: transform 0.2s;
    color: #555;
}

.accordeon summary:hover::before {
    color: #000;
}

.accordeon[open] summary::before {
  transform: rotate(180deg);
}

/* Cache le marqueur par defaut sur les navigateurs webkit */
.accordeon summary::-webkit-details-marker {
    display: none;
}


/* Index alphabetique de listes */

.index-alphabetique {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 30px;
    padding: 15px;
    background: #f9f9f9;
    border: 1px solid #eee;
    justify-content: center;
}

.index-alphabetique a {
    text-decoration: none;
    color: #db000b; /* Rappel de votre charte */
    font-weight: bold;
    padding: 5px 10px;
}

.index-alphabetique a:hover {
    background: #db000b;
    color: #fff;
    border-radius: 3px;
}

.index-alphabetique .disabled {
    color: #ccc;
    cursor: default;
    pointer-events: none; /* Emp�che le clic */
    text-decoration: none;
}

.titre{
font-family: 'Montserrat', sans-serif;
font-size:20px;
font-style:italic;
font-weight:bold;
color: #666;
text-transform:uppercase;
}
.titre > i{
color: #F00;
}
.guide-liste-groupby {
    list-style: none;
    padding-left: 5px;
}
.guide-liste-groupby li {
    margin-bottom: 5px;
}
.guide-liste-groupby li::before { 
    font-family: 'FontAwesome';
    content: "\f105";
    padding-right: 8px;
    color: #F00; 
}
.guide-liste { 
    color: #222222; 
    font-weight: bold;
    text-decoration: none;
}
.guide-liste:hover { 
    color: #CC0000;
}
.guide-liste:not(.guide-liste-groupby li .guide-liste):before { 
    font-family: 'FontAwesome';
    padding-right: 8px;
    content: "\f105"; 
    color: #F00;
}
.guide-lien{ 
font-size:10px; 
color: #000000 
}
.guide-type{ 
font-size:12px; 
color: #666666 
}

.avis-liste{ 
color: #CC0000; 
font-weight: bold;
}
.avis-liste:hover{ 
color: #000000; 
font-weight: bold;
}
.avis-liste:before{ 
font-family: 'Fontawesome';
padding-right:5px;
content: "\f105"; 
color: #F00;
}

.imgtext{
float:left;
margin-right:10px;
margin-bottom:5px;
}
.imgtextD{
float:right;
margin-left:10px;
margin-bottom:5px;
}
.imgannonce{
float:left;
width:120px;
height:90px;
object-fit:cover;
overflow:hidden;
margin-right:10px;
}
.photo{
width:249px;
height:170px;
overflow:hidden;
}

/* Blocs forum */
#forum{
max-width:620px;
}
.forum{ 
font-size:14px; 
padding:10px;
background-color:#FFFFFF;
}
.forum a{ 
color:#666666;
}
.forum a:hover{ 
color:#000000;
}

/* CSS Sp�cifique GUIDE */

#titre {
/* max-width: 760px; -> ENLEV� : Laisse le titre respirer sur la largeur du conteneur 
  background-image: linear-gradient(to left, #CC0000 30px, #000000 30px) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;*/
  background-color: #000000;
  border-top: solid #CC0000 5px;
  border-right: solid #CC0000 35px; 
  padding: 10px 45px 20px 20px !important; 
  margin: 0px; /* Ajout d'une marge basse pour d�coller de la photo */
  overflow: hidden;
  box-sizing: border-box !important;
}
#titre h1{
 font-size: 24px; /* Un poil plus grand */
 font-style: italic;
 text-transform: uppercase;
 color:#FFFFFF;
 margin: 0px;
 width: auto;
}
#photoguide {
 padding: 0px;
 margin: 0px;
 width: 100%;
 height: auto;
 overflow: hidden;
}
#photoguide img {
  width: 100%;
  height: auto;
  max-width: 100%; /* Chang� de 760px � 100% pour �pouser parfaitement le conteneur */
  display: block;
}
#pubintro {
  float: left;
  width: 336px;
  height: 300px;
  margin-top: 20px;
  margin-right: 20px;
  margin-left: 0px;
}
h1.guide{
font-style:italic;
background-color:#000000;
padding:10px;
padding-left:20px;
margin:0px;
margin-left:30px;
border-left:#CC0000 8px solid;
}
#avis h2:before{
content: "\f0da"; 
}

#bilan{ 
font-size:13px;
display:block;
float:right;
width:250px;
margin-left:10px;
padding-bottom:10px;
color:#000000; 
text-align:left;
}
#recap{ 
font-size:14px;
display:table;
width:100%;
border-collapse:separate;
border-spacing:20px;
color:#000000; 
text-align:left;
}
.bilanbien{ 
background-color:#99FF99;
padding:10px;
display:table-cell;
width:50%;
}
.bilanpasbien{ 
background-color:#FF6666;
padding:10px;
display:table-cell;
width:50%;
}
#conclu{
margin-top:20px;
background-color:#F2F2F2;
display:block;
padding:15px;
border:#696969 solid 1px;
zoom: 1;
}
#conclu p{ 
font-weight:bold;
font-size: 16px; 
text-align:justify;
line-height:26px;
}
#conclu a{ 
font-weight:bold;
}
#conclu::after{ 
content: '';
display:block;
clear: both;
}
#specs{
clear:left;
background-color:#333333;
display:block;
float:left;
max-width:300px;
margin-right:10px;
margin-bottom:8px;
font-size:14px;
text-align:left;
color:#CCCCCC;
font-weight:normal;
padding:5px;
}
#specs h2{
color:#FFFFFF;
padding:5px;
}
#specs h2:before{
content: "\f085";
}
#specs h2::after {
 content: "";
 display: block;
 width: 200px;
 height: 3px;
 margin-top: 8px;
 background: linear-gradient(to right, #db000b, rgba(255, 255, 255, 0));
}
#specs img{
width:100%;
}
#specs b, div#specs strong{
font-size:13px;
color:#FFFFFF;
}
#specs.D{
float:right;
margin-left:10px;
margin-right:0px;
}
#tech{ 
display:table;
width:100%;
border-collapse:collapse;
border-spacing:2px;
text-align:left;
margin-bottom:10px;
}
#tech > div{
display:table-cell;
width:50%;
vertical-align:top;
}
#tech h2{
color:#FFFFFF;
font-size:14px;
padding:5px;
margin: 5px
}
#tech h2::before{
content: "\f085";
}
#tech h2::after {
 content: "";
 display: block;
 width: 200px;
 height: 3px;
 margin-top: 8px;
 background: linear-gradient(to right, #db000b, rgba(255, 255, 255, 0));
}
#tech img{
width:100%;
}
#galerie{  
max-width:730px;
}
#galerie h2:before{
content: "\f030"; 
}
#galerie img{  
display:inline-block;
margin-right:2px;
margin-bottom:2px;
width:144px;
height:96px;
object-fit:cover;
overflow:hidden;
}

.article-auteur{ 
font-size: 12px ;
font-style: italic;
color: #666666;
padding:10px;
}
.article-bilan{ 
font-size:14px; 
color:#000000; 
font-weight:normal;
padding:10px;
}
.article-citation{ 
font-size:14px; 
font-style:italic;
color:#000000; 
padding:10px;
line-height:20px;
border-left: 1px solid #db000b;
padding: 5px 0 5px 20px;
margin-top: 15px;
margin-bottom: 10px;
position: relative;
}
a.article-citation{ 
font-size:12px; 
font-style:italic;
color:#000000; 
}
.article-citation a:hover{ 
color:#FF0000; 
}
.article-conclusion{
margin-top:20px;
background-color:#F2F2F2;
display:block;
padding:15px;
border:#696969 solid 1px;
font-size:16px; 
font-weight:bold;
color:#000000;
}
.article-conclusion a{ 
font-size:16px; 
font-weight:bold;
color:#CC0000;
}
.article-conclusion img{ 
margin-bottom:10px;
}
.article-chrono{ 
font-size:14px; 
font-style:italic;
color:#666;
text-align:left;
border-left:#cccccc 4px dotted;
padding:10px;
margin-bottom:20px;
line-height:20px;
}
.article-chrono a{ 
font-style:italic;
font-weight:normal;
color:#000;
}
.article-chrono a:hover{ 
color:#C00;
}
.article-chrono b{ 
font-size:14px; 
color:#CC0000;
}
.article-chrono b:before{ 
font-family: 'Fontawesome';
font-style:normal;
font-weight:normal;
content: "\f192";
padding-right:5px;
margin-left:-17px;
}
ul.article-chrono {
	list-style-type: none;
	margin-left:10px;
}
.article-intro{ 
font-size:17px; 
font-weight:bold;
color:#000000;
display:block;
margin-left:5px; 
}
.article-intro a{ 
font-weight:bold;
color:#CC0000;
}
.article-marge{  
  font-size:12px; 
  color:#000000;
  background-color:#FFFFFF;
}
.article-marge h1 {
  color: #FFFFFF !important;
}
.article-marge a{  
  color:#000000;
}
.article-marge img{  
  border:0px;
}
.article-menu{ 
font-size:11px; 
color: #000000; 
font-weight: bold;
}
.article-legende, .article-legende a{ 
font-size:12px; 
font-style:italic;
color:#666;
font-weight: normal;
}
.article-merci{ 
font-size:12px; 
font-style:italic;
color:#666; 
}
p.article-merci a{ 
font-size:12px; 
}
.article-modele{  
font-size:24px; 
font-weight:bold; 
color:#FFFFFF;
}
.article-prod{ 
font-size:15px; 
color:#333;
border:#cccccc solid 1px;
background: linear-gradient(145deg, #cccccc, #999);
text-align:justify;
display:block;
padding:10px;
}
.article-prod:before{ 
display: inline-block;
font-family: 'Fontawesome';
content: "\f275"; 
color: #333;
padding-right:5px;
cursor: context-menu;
}
.article-prod b{ 
font-size: 16px;
color: #333;
}
.article-specs{  
display: flow-root; /* Force le bloc sombre � englober la hauteur de l'image flottante */
background-color:#333333;
font-size:14px;
letter-spacing:normal;
text-align:left;
color:#CCCCCC;
font-weight:normal;
padding:5px;
box-sizing: border-box;
}
.article-specs h2{  
padding:5px;
}
.article-specs b, .article-specs strong {
font-size:13px;
color:#FFFFFF;
padding:2px;
}
.article-texte{ 
font-size: 14px; 
color:#000000;
background-color: #FFFFFF;
text-align:justify;
padding:10px;
}
.article-texte p{ 
line-height:25px;
}
.article-titre{ 
font-family: 'Montserrat', sans-serif;
font-size: 26px;
font-weight: bold;
color: #db000b;
}
.article-date{ 
font-size:12px; 
color:#666666;
}

.photoguide{
padding-left:30px;
width:730px;
height:480px;
overflow:hidden;
}

/* Galerie photos */

#photo{
width:100%;
max-width:760px;
padding:0px;
margin:0px;
height:auto;
margin-bottom:5px;
}
.zoom a {
color:#FFFFFF;
font-size:14px;
padding:10px;
display:block;
height:auto;
vertical-align:text-bottom;
width:100%;
max-width:760px;
}
.zoom a:hover, .zoom i a:hover {
color:#FFFFFF;
}
.zoom i {
 padding-left: 10px;
 font-style: normal;
}
#albumphoto{  
max-width:760px;
}
#albumphoto img{  
display:inline-block;
margin-right:2px;
margin-bottom:2px;
width:188px;
height:125px;
object-fit:cover;
overflow:hidden;
}

/* Pied d'article */

/*#overfooter {
    width: auto;
    max-width: 100%;
    background-color: #FFFFFF;
    padding-bottom: 20px;
}
 On force la zone pub � prendre toute la largeur sans impacter le reste 
#overfooter-ads {
    width: 100%;
    margin-bottom: 30px;
}*/
#overfooter {
    width: 100% !important; /* On passe de 'auto' � 100% pour l'ancrer aux bords du site */
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important; /* LE VERROU : Tout ce qui d�passe de Google sera masqu� au lieu de d�former la page */
    background-color: #FFFFFF;
    padding-bottom: 20px;
}
/* Zone publicitaire */
#overfooter-ads {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important; /* S�curit� doubl�e en mode paysage */
    margin-bottom: 30px; 
}
/* La zone de contenu devient le conteneur Flex */
#overfooter-content {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 30px !important;
}
/* Tes blocs ne bougent pas de leur d�finition */
#overfooter-content .box {
    display: block !important;
    width: 300px !important;
    height: auto !important; /* Pour la souplesse */
    margin: 0 !important;
	max-width: 100% !important; /* S�curit� pour les petits �crans */
}

/* ==========================================================================
   FOOTER (Optimis� Flexbox & Responsive)
   ========================================================================== */
#footer {
  width: 100%;
  padding: 40px 20px 20px 20px;
  box-sizing: border-box;
  text-align: center;
  overflow:hidden;
  /* background-color: #000;  */
}

/* Centre la pub et emp�che les d�bordements */
.footer-ad {
	display: grid !important;       /* On passe en Grid pour g�rer la superposition */
	place-items: center !important;  /* Centre parfaitement la cellule sur l'�cran */
	width: 100% !important;
	max-width: 100vw !important;
	margin: 0 auto 30px auto !important;
	clear: both !important;
    }

    /* L'astuce magique : on force TOUS les enfants directs (l'iframe ET la pub)
       � se positionner sur la ligne 1 / colonne 1. Ils se superposent pile au centre. */
.footer-ad > * {
	grid-area: 1 / 1 !important;
}

/* Navigation principale en flexbox (remplace les tirets) */
#footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px 20px; /* 15px d'espace vertical, 20px horizontal */
  padding: 20px 0;
  border-top: 1px solid #333333;
}

#footer-nav a {
  font-size: 14px;
  color: #ffffff;
  text-decoration: none;
  font-weight: bold;
  text-transform: uppercase;
  transition: color var(--nav-transition, 0.3s ease);
}

#footer-nav a:hover {
  color: var(--nav-red, #db000b);
}

/* R�seaux Sociaux */
.footer-socials {
  display: flex;
  justify-content: center;
  gap: 25px;
  margin-bottom: 30px;
}

.footer-socials a {
  color: #aaaaaa;
  font-size: 22px; /* Ic�nes plus grandes pour le tactile */
  transition: color var(--nav-transition, 0.3s ease);
}

.footer-socials a:hover {
  color: var(--nav-red, #db000b);
}

/* Liens L�gaux (remplace les tirets) */
.footer-bottom {
  border-top: 1px solid #1a1a1a;
  padding-top: 20px;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  margin-bottom: 10px;
}

.footer-legal a {
  color: #999999;
  font-size: 12px;
  text-decoration: none;
  transition: color 0.3s;
}

.footer-legal a:hover {
  color: #ffffff;
}

.copyright {
  font-size: 12px;
  color: #DDDDDD;
  margin: 0;
  line-height: 1.5;
}



/* ==========================================================================
   CSS MOBILE & Responsive)
   ========================================================================== */

@viewport {
  width:device-width;
  zoom:1;
}

@media all and (max-width: 750px) {
	
h2, h3, .ancre {
    scroll-margin-top: 70px;
  }
  table {
    max-width: 100%;
    width: 100%;
    table-layout: fixed;
  } 
  
/* On applique la marge haute pour effacer le menu fixe noir */
  .header-ad {
    margin-top: 60px !important;
    background-color: #f7f9f6;
    text-align: center;
  }
  
  /* On s'assure que #main n'a plus besoin de marge haute puisqu'il est pouss� par la pub */
  #main {
    max-width: 100%;
    padding: 0px; 
  }
  
  #rubrique {
    margin: 0;
  }
  
  #contenu { 
    float: none;
    width: auto;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 16px;
  }
  
  #contenu-std, #contenu-guide, #contenu-article {
    width: 100% !important;
    float: none !important;
    padding: 0 10px;
  }
  
  #pubintro { 
    float: none;
  }
  
  #texte {
    max-width: 100% !important;
  }
  
  #sidebar, #skybar {
    float: none !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 15px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    gap: 15px;
	position: static !important;
  }
  
  #sidebar .box { 
    float: none !important;
    width: calc(50% - 8px) !important; 
    max-width: 100% !important;
    margin-bottom: 25px !important;
    box-sizing: border-box !important;
  }
  
  .article-intro { 
    margin-left: 0px; 
  }
	
	#recap {
        display: block; /* On d�sactive le mode tableau */
    }

    .bilanbien, .bilanpasbien {
        display: block; /* La ligne devient un bloc normal */
        width: 100% !important;
		padding: 10px; 
        margin-top:20px;
        box-sizing: border-box;
    }
  
  #overfooter {
    display: block !important;
    padding: 0 !important;
  }
  
  #overfooter-content {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    gap: 20px 15px !important;
    padding: 15px !important;
    box-sizing: border-box !important;
  }
  
  #overfooter-content .box {
    display: block !important;
    float: none !important;
    width: calc(50% - 8px) !important; 
    height: auto !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  
  #overfooter-content .box img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    display: block;
  }
  
  #footer-nav {
    flex-direction: column;
    gap: 12px;
  }
  
  .footer-socials {
    gap: 20px;
  }
  
  .footer-ad {
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    height: 90px !important;
    overflow: hidden !important;
    margin: 0 auto 20px auto !important;
  }
  
  .footer-ad > * {
    grid-area: 1 / 1 !important;
    width: 728px !important;
    height: 90px !important;
    max-width: none !important;
    transform: none !important;
  }
}

@media all and (min-width: 500px) and (max-width: 750px) {
  
  /* On force la colonne de gauche (les specs) � passer de 250px � 33% fluides */
  #main .article-marge {
    width: 33% !important;
  }
  
  /* On force la colonne de droite (la photo) � passer de 500px � 67% fluides */
  #main .article-marge + td {
    width: 67% !important;
  }
}


@media all and (max-width: 500px) {
  
  #main {
    width: 100%;
    overflow: auto; /* OK ici car la skybar est masqu�e, pas de conflit avec le sticky ! */
  }

/* === POUR LES TABLEAUX === */	
  #main table, 
  #main tbody {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  #main tr {
    display: block !important; /* On oublie le mode table-row instable */
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    /* Au lieu de border-spacing qui pousse les murs de 10px � l'ext�rieur : 
    margin-bottom: 10px !important; */
  }
  
  #main tr td, 
  #main tr th {
    display: block !important; /* Devient un bloc fluide parfait */
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important; /* Le padding reste confin� � l'int�rieur */
  }

/* = BILAN  = */
  /* On force la ligne (tr) du bilan � devenir un bloc pour annuler le mode tableau */
  #main tr:has(> td.article-bilan),
  #main tr:has(> td[bgcolor="#99FF99"]),
  #main tr:has(> td[bgcolor="#FF6666"]) {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    border-spacing: 0 !important; 
    table-layout: fixed !important; /* PROTECTION : Emp�che le tableau de pousser les murs */
  }

  /* Les cellules passent en bloc : le padding et les marges fonctionnent enfin ! */
  #main td.article-bilan,
  #main td[bgcolor="#99FF99"],
  #main td[bgcolor="#FF6666"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important; /* S�curit� suppl�mentaire */
    padding: 15px !important;
    box-sizing: border-box !important; /* CORRECTIF : Le !important ici est VITAL pour �viter les +30px de padding */
    margin-bottom: 12px !important; /* Cr�e l'espace entre le Vert et le Rouge */
  }

  #recherche {
    padding: 10px;
  }
  
  #sidebar .box { 
    width: 100% !important;
  }
  
  #pubintro {
    float: none !important;
    margin: 15px auto !important;
    display: block;
    max-width: 100%;
    height: auto;
  }
	
.imgtext, .imgtextD {
    float: none !important;
    display: block !important;
	width: 100% !important; /* Force l'image � occuper toute la largeur du bloc */
    max-width: 100% !important; /* Annule le plafond des 350px */
	height: auto !important; /* Conserve le ratio de l'image sans la d�former */    
	margin: 0 auto 10px auto !important; /* Centrage et air sous la photo */
    /* Le max-width est d�j� g�r� dynamiquement par le bloc du haut ! */
  }
  
  #bilan { 
    width: 100%;
    float: none;
    margin: 0px;
  }
  
  #tech {
    display: block; /* On casse le mode tableau */
  }
  
  #tech > div {
    display: block; /* Les colonnes s'empilent � 100% */
    width: 100% !important;
    box-sizing: border-box;
  }
  
  #specs {
    float: none;
    max-width: 100%;
    margin: 0px;
  }
  
  #contextuel {
    display: none;
  }
  
  .article-marge img { 
    width: 100%;
    max-width: 420px;
  }
  
  .box {
    padding: 0px !important;
  }
  
  #overfooter-content .box {
    width: 100% !important;
  }
  
}