*/ #content blockquote.quote, #content blockquote.quote p { font-size: 1.4rem !important; /* Un peu plus grand que le texte normal */ font-weight: 800; font-style: italic; line-height: 1.5; letter-spacing: normal; /* On oublie le .2em qui rendait illisible */ color: #1a1a1a; margin: 0; /* On retire les marges du
interne pour ne pas doubler le padding */
}
/* Petit bonus : les guillemets qui s'adaptent */
#content blockquote.quote::before {
content: "“";
font-family: serif;
font-size: 4rem;
color: #dc5300;
opacity: 0.15;
position: absolute;
top: -5px;
left: 15px;
}
.article-bas {
background: #ffffff;
border: 2px solid #dc5300; /* On utilise ton orange pour encadrer le verdict */
padding: 30px;
margin: 40px 0;
/* Ombre portée plus "profonde" pour marquer la fin de lecture */
box-shadow: 0 15px 35px rgba(220, 83, 0, 0.1);
border-radius: 15px;
position: relative;
}
/* Conteneur des colonnes */
.article-bas .row {
display: flex;
margin-top: 25px;
}
/* Style commun aux blocs de points */
.article-bas .6u {
background: #fff;
border-radius: 12px;
padding: 20px;
border: 1px solid #eee;
flex: 1; /* Pour que les deux colonnes fassent la même taille */
}
/* Titres avec icônes */
.article-bas h3 {
display: flex;
align-items: center;
gap: 10px;
font-size: 1.1rem !important;
text-transform: uppercase;
font-weight: 800;
margin-bottom: 15px;
}
.point-fort { color: #27ae60 !important; } /* Un vert plus moderne */
.point-faible { color: #e74c3c !important; } /* Un rouge plus vif */
/* On nettoie la liste à puces */
.article-bas ul {
list-style: none;
padding: 0;
margin: 0;
}
.article-bas li {
font-size: 0.95rem;
line-height: 1.5;
margin-bottom: 8px;
padding-left: 20px;
position: relative;
color: #444;
}
/* On remplace le "-" moche par une vraie puce stylisée */
.article-bas .point-fort + ul li::before {
content: "✔";
position: absolute;
left: 0;
color: #27ae60;
}
.article-bas .point-faible + ul li::before {
content: "✖";
position: absolute;
left: 0;
color: #e74c3c;
}
.faq-section {
margin: 40px 0;
background: #fff;
border-radius: 15px;
border: 1px solid #eee;
padding: 25px;
}
.faq-item {
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 1px dashed #ddd;
}
.faq-item:last-child {
border-bottom: none;
margin-bottom: 0;
}
.faq-section h2 {
color: #dc5300;
font-size: 1.6rem;
margin-bottom: 25px;
display: flex;
align-items: center;
gap: 10px;
}
.faq-item h3 {
font-size: 1.1rem !important;
color: #1a1a1a;
margin-bottom: 10px;
font-weight: 700;
display: flex;
align-items: flex-start;
gap: 10px;
}
/* Le petit "Q" pour Question en orange */
.faq-item h3::before {
content: "Q.";
color: #dc5300;
font-weight: 900;
}
.faq-item p {
font-size: 1rem;
line-height: 1.6;
color: #555;
padding-left: 28px; /* Aligné sous le texte du H3 */
}
/* --- 1. CITATIONS (BLOCKQUOTE) --- */
#content blockquote.quote,
#content blockquote.quote p {
margin: 2rem auto;
padding: 2rem;
text-align: center;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 1.5rem !important;
font-weight: 700;
font-style: italic;
line-height: 1.4;
letter-spacing: normal;
color: #1a1a1a;
background-color: #fdfdfd;
border-top: 3px solid #dc5300;
border-bottom: 3px solid #dc5300;
position: relative;
}
/* --- 2. RÉSUMÉ IA & CONCLUSION --- */
#resume, .article-bas {
background: #ffffff;
padding: 25px;
margin-bottom: 40px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
border-radius: 15px;
border: 1px solid #e0e0e0;
}
.article-bas {
border: 2px solid #dc5300;
box-shadow: 0 15px 35px rgba(220, 83, 0, 0.1);
}
/* --- 3. POINTS FORTS / FAIBLES (DANS CONCLUSION) --- */
.article-bas .row { display: flex; flex-wrap: wrap; }
.article-bas .6u {
background: #f9f9f9;
border-radius: 10px;
padding: 15px;
flex: 1;
min-width: 250px;
}
.point-fort { color: #27ae60 !important; font-weight: 800; }
.point-faible { color: #e74c3c !important; font-weight: 800; }
/* --- 4. MODULE SHOPPING (AFFILIATION) --- */
/* Style de base (adapté pour le 9u central) */
.commander2 { margin-bottom: 12px; width: 100%; }
.commander2 a {
display: flex;
align-items: center;
justify-content: space-between;
background: #fff;
border: 1px solid #ddd;
border-radius: 10px;
padding: 10px 15px;
text-decoration: none;
transition: all 0.2s ease;
}
.commander2 a:hover { border-color: #dc5300; background: #fffaf7; transform: translateY(-2px); }
.commander2 a span:first-child { width: 100px; display: flex; }
.commander2 a span img { max-width: 100%; height: auto; }
.commander2 .prix {
font-weight: 800;
color: #dc5300;
background: #fff5f0;
padding: 4px 10px;
border-radius: 6px;
}
/* --- 5. ADAPTATION POUR LA COLONNE DE DROITE (3u) --- */
/* Si ton conteneur de droite a une classe ou si on cible les petits espaces */
@media (max-width: 1000px), screen and (max-width: 400px) {
/* Ici on peut simuler le comportement du 3u */
.commander2 .console { display: none; } /* On cache le texte console pour gagner de la place */
.commander2 a { padding: 8px; }
.commander2 a span:first-child { width: 70px; }
.commander2 .prix { font-size: 0.9rem !important; }
}
/* --- 6. VIDEO YOUTUBE (AMBILIGHT & RESPONSIVE) --- */
.video-responsive {
clear: both;
position: relative;
height: 0;
margin: 2rem 0; /* Marge réduite pour mobile */
padding-bottom: 56.25%; /* Ratio 16:9 */
border-radius: 15px;
background: #000;
z-index: 1;
width: 100%; /* Force la largeur totale */
max-width: 100%;
}
/* On n'affiche la lueur Ambilight QUE sur les grands écrans pour éviter les bugs de scroll mobile */
@media (min-width: 768px) {
.video-responsive {
margin: 3.5rem 0;
}
.video-responsive::after {
content: "";
position: absolute;
top: 5%; left: 5%; width: 90%; height: 90%;
background: linear-gradient(135deg, #dc5300, #ff8c42, #b11111);
filter: blur(45px);
opacity: 0.35;
z-index: -1;
transition: opacity 0.3s ease;
}
.video-responsive:hover::after { opacity: 0.6; }
}
.video-responsive iframe,
.video-responsive .youtube_player,
.video-responsive object,
.video-responsive embed {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
border-radius: 12px;
border: 0;
}
/* Ajustement du titre vidéo sur mobile */
#video + h2 {
font-size: 1.3rem; /* Plus petit sur mobile */
line-height: 1.3;
}
@media (min-width: 768px) {
#video + h2 {
font-size: 1.6rem;
}
}
/* Le conteneur : on joue sur un fond très clair pour faire ressortir le gris du texte */
.unautreavis {
flex-direction: column;
padding: 25px !important;
background-color: #fcfcfc !important;
border-left: 5px solid #dc5300 !important; /* Barre d'accentuation orange à gauche */
border-radius: 8px;
box-shadow: 0 2px 15px rgba(0,0,0,0.05);
margin: 30px 0;
position: relative;
line-height: 1.8 !important;
letter-spacing: 0.2px;
}
/* L'image : on la positionne de manière à ce qu'elle ne "pousse" pas le nom */
.macaron {
float: none !important;
width: 65px !important;
height: 65px !important;
border-radius: 50% !important;
border: 2px solid #fff !important;
outline: 2px solid #dc5300; /* Double bordure pour le style */
margin-bottom: 15px !important;
}
/* Le Nom (balise strong) : on lui donne de l'air */
.unautreavis strong {
display: block;
font-size: 1.15rem;
color: #222;
margin-bottom: 12px;
font-family: 'Trebuchet MS', sans-serif;
font-style: normal;
}
/* Le texte de l'avis (le reste du paragraphe) */
/* On cible le texte qui suit le
ou le strong */
.unautreavis {
color: #666 !important; /* Ton gris qui ressort bien sur fond blanc */
font-size: 0.95rem;
line-height: 1.7;
font-style: italic; /* Aspect témoignage */
}
/* --- LE COUP DE PEPS : Les guillemets géants en fond --- */
.unautreavis::after {
content: "“";
position: absolute;
bottom: -10px;
right: 20px;
font-size: 5rem;
color: #dc5300;
opacity: 0.1;
font-family: Georgia, serif;
}
/* --- OPTIMISATION DESKTOP (33% ou Large) --- */
@media (min-width: 600px) {
.unautreavis {
padding-left: 85px !important; /* Espace pour l'image */
}
.macaron {
position: absolute;
top: 25px;
left: -35px; /* L'image "sort" un peu du cadre pour un look magazine */
margin: 0 !important;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.unautreavis strong {
margin-top: -5px;
}
}
/* Le conteneur parent */
#stickynav {
z-index: 1000 !important;
position: fixed;
top: -80px; /* On part du haut pour l'effet de descente */
left: 0;
width: 100%;
height: 55px !important; /* Barre fine pour ne pas gêner */
padding: 0 15px !important;
display: flex !important;
align-items: center !important;
background: rgba(59, 67, 70, 0.95) !important; /* Gris pro avec légère transparence */
backdrop-filter: blur(8px); /* Effet flou sur le contenu dessous (très 2026) */
box-shadow: 0 4px 12px rgba(0,0,0,0.25);
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); /* Transition fluide */
opacity: 0;
box-sizing: border-box;
}
/* Activation de la barre (via ton JS existant) */
#stickynav.stickyon3 {
top: 0 !important;
opacity: 1 !important;
height: 55px !important;
}
/* Le Logo (l'image dans le lien) */
#stickynav a {
display: flex;
align-items: center;
flex-shrink: 0;
}
#stickynav img {
height: 30px !important; /* On réduit pour que ce soit élégant */
width: auto !important;
margin: 0 !important;
}
/* Le Texte (le div à côté du logo) */
#stickynav div {
color: #ffffff !important;
font-size: 0.9rem !important;
font-weight: 500;
margin-left: 15px !important;
padding-left: 15px !important;
border-left: 2px solid #dc5300; /* Ta touche orange Consollection */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; /* Coupe le texte proprement avec "..." */
font-family: sans-serif;
}
#stickynav::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
/* On utilise la variable envoyée par le JS */
width: var(--scroll-width, 0%);
height: 3px;
background: #dc5300;
transition: width 0.1s ease-out;
}
/* --- ADAPTATION MOBILE --- */
@media (max-width: 600px) {
#stickynav {
height: 50px !important;
}
#stickynav img {
height: 22px !important; /* Encore plus discret sur smartphone */
}
#stickynav div {
font-size: 0.75rem !important;
margin-left: 10px !important;
padding-left: 10px !important;
/* On s'assure que le texte ne pousse pas les bords de l'écran */
max-width: 200px;
}
}
.about-consollection {
background: #fdfdfd;
border-left: 4px solid #dc5300; /* Ta signature orange */
padding: 25px;
margin: 0px 0px 40px 0px;
border-radius: 4px;
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
position: relative;
overflow: hidden;
}
/* Un petit rappel de l'ancienneté en filigrane (optionnel mais classe) */
.about-consollection::after {
content: "1999";
position: absolute;
right: 10px;
bottom: 15px;
font-size: 5rem;
font-weight: 900;
color: rgba(0,0,0,0.03); /* Très discret */
z-index: 0;
}
.about-consollection strong {
margin: 0 0 10px 0 !important;
font-size: 1.1rem !important;
text-transform: uppercase;
letter-spacing: 1px;
color: #222;
font-weight: 800;
}
.about-consollection p {
margin: 0 !important;
font-size: 0.95rem;
line-height: 1.6;
color: #555;
position: relative;
z-index: 1; /* Pour passer au dessus du 1999 */
}
/* On cible le bloc figure UNIQUEMENT s'il contient l'image avec la classe spécifique */
#article figure:has(img.thumb-full-width) {
margin: 30px 0 !important;
text-align: center;
}
/* On ne cible QUE l'image avec la classe */
#article figure img.thumb-full-width {
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0,0,0,0.15);
transition: transform 0.3s ease;
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
/* L'effet de zoom ne s'applique qu'à cette classe */
#article figure img.thumb-full-width:hover {
transform: scale(1.01);
}
/* On ne cible la légende que si elle est dans un bloc figure avec l'image voulue */
#article figure:has(img.thumb-full-width) figcaption {
margin-top: 12px;
font-size: 0.9rem;
font-style: italic;
color: #666;
font-weight: 500;
display: flex;
align-items: center;
justify-content: center;
}
#article figure:has(img.thumb-full-width) figcaption::before {
content: "📷";
margin-right: 8px;
font-style: normal;
font-size: 0.8rem;
opacity: 0.7;
}
.ariane {
position: relative; /* On repasse en relatif pour plus de sécurité */
font-size: 0.8rem; /* Un peu plus petit pour ne pas voler la vedette au H1 */
color: #fff;
text-transform: uppercase;
letter-spacing: 0.5px;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.ariane span {
display: flex;
align-items: center;
}
.ariane a {
color: rgba(255, 255, 255, 0.8) !important;
text-decoration: none;
transition: all 0.2s ease;
padding: 2px 6px;
border-radius: 4px;
}
.ariane a:hover {
color: #fff !important;
background: rgba(220, 83, 0, 0.3); /* Un rappel discret de ton orange */
}
/* Le dernier élément (celui qui n'est pas un lien) */
.ariane span:last-child {
color: #dc5300; /* Ton orange pour indiquer où on est */
font-weight: 700;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 300px; /* On évite que le titre du fil d'ariane soit trop long */
}
/* On remplace le > moche par un séparateur élégant en CSS */
.ariane span::after {
content: "/";
margin: 0 8px;
color: rgba(255, 255, 255, 0.3);
font-weight: 300;
}
.ariane span:last-child::after {
content: ""; /* Pas de slash après le dernier élément */
}
#back-to-top {
position: fixed;
bottom: 25px; /* On le descend un peu pour ne pas gêner la lecture */
right: 25px;
z-index: 9999;
width: 45px; /* Un peu plus large pour les pouces sur mobile */
height: 45px;
background: #dc5300; /* Ton orange ! */
color: #ffffff;
border: none;
border-radius: 50%; /* Cercle pour un look plus moderne */
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
opacity: 0;
visibility: hidden;
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
#back-to-top.show {
opacity: 1;
visibility: visible;
}
#back-to-top:hover {
background: #b84500; /* Un orange plus sombre au survol */
transform: translateY(-3px); /* Petit effet de saut */
}
.lgd {
display: inline-block;
background: #dc5300;
color: #fff;
font-size: 0.65rem;
font-weight: 900;
padding: 3px 8px;
border-radius: 3px;
margin: 10px 15px 0;
width: fit-content;
}
.info-row {
display: flex;
flex-direction: column; /* On empile pour la sidebar */
padding: 8px 0;
border-bottom: 1px solid #f0f0f0;
}
.info-row:last-of-type { border-bottom: none; }
.info-row .label {
font-size: 0.7rem;
text-transform: uppercase;
color: #999;
font-weight: 800;
letter-spacing: 0.5px;
}
.info-row .value {
font-size: 0.9rem;
color: #222;
margin-top: 2px;
}
.info-row .value a {
color: #dc5300;
text-decoration: none;
}
.category-intro {
background: #1a1a1a; /* Fond légèrement plus clair que le noir pur */
border-left: 4px solid #dc5300; /* Rappel de ton orange */
padding: 20px 25px;
margin: 20px 0 40px 0;
border-radius: 0 8px 8px 0;
}
.category-intro p {
margin: 0;
color: #eee;
font-size: 1.1rem;
font-weight: 500;
}
.description-text {
display: block;
margin-top: 15px !important;
padding-top: 15px;
border-top: 1px solid #333; /* Ligne de séparation discrète */
font-size: 0.95rem;
color: #888;
font-style: normal; /* On enlève l'italique pour la lisibilité */
}
.description-text em {
font-style: normal;
color: #bbb;
}
.description-text a {
color: #dc5300 !important;
text-decoration: none;
font-weight: 600;
}
.description-text a:hover {
text-decoration: underline;
}
#footer {
background: #121212;
border-top: 4px solid #dc5300;
padding: 50px 20px;
color: #888;
font-family: sans-serif;
text-align: center;
}
.footer-brand {
font-size: 1.8rem;
font-weight: 900;
color: #fff;
letter-spacing: 1px;
margin-bottom: 25px;
}
/* Style des réseaux sociaux dans le footer */
.footer-socials {
display: flex;
justify-content: center;
gap: 20px;
margin-bottom: 30px;
}
.footer-socials img {
width: 22px;
height: 22px;
/* Transforme les icônes en blanc cassé */
filter: brightness(0) invert(0.7);
transition: all 0.3s ease;
}
.footer-socials a:hover img {
/* L'icône devient orange Consollection au survol */
filter: none; /* Si tu veux garder les couleurs originales au hover */
/* OU utilise ceci pour forcer ton orange :
filter: invert(41%) sepia(98%) saturate(1470%) hue-rotate(3deg) brightness(98%) contrast(105%); */
transform: translateY(-3px);
}
#copyright {
font-size: 0.85rem;
margin-bottom: 10px;
}
#copyright strong {
color: #fff;
}
.footer-legal {
font-size: 0.8rem;
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
}
.footer-legal a, #tarteaucitronManager {
color: #555;
text-decoration: none;
background: none;
border: none;
cursor: pointer;
transition: color 0.2s;
}
.footer-legal a:hover, #tarteaucitronManager:hover {
color: #dc5300;
}
.sep { color: #333; }
.note {
float: left;
margin: 10px 25px 15px 0; /* Ajustement des marges pour plus d'air */
padding: 10px 20px;
background: #f8f8f8; /* Fond très léger */
border-left: 5px solid #dc5300; /* Ton orange signature qui "tient" le bloc */
border-radius: 4px 12px 12px 4px;
font-size: 36px; /* Légèrement plus petit pour l'élégance */
font-weight: 900;
color: #222; /* Texte sombre pour la lisibilité */
line-height: 1;
text-align: center;
box-shadow: 5px 5px 0px rgba(220, 83, 0, 0.1); /* Petit effet d'ombre décalée peps */
}
/* Petit détail pour le "sur 20" */
.note::after {
content: "/20";
font-size: 16px;
color: #888;
margin-left: 2px;
}
/* Le conteneur global */
.article-author {
display: flex;
align-items: center;
padding: 20px;
background: #f9f9f9;
border-radius: 12px;
border-left: 4px solid #dc5300; /* Rappel du orange Consollection */
margin: 30px 0;
}
/* Le portrait de l'auteur */
.article-author-portrait img {
border-radius: 50%; /* Toujours plus moderne en rond */
border: 2px solid #fff;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
margin-right: 20px;
}
.article-author-portrait:hover img {
transform: scale(1.1) rotate(5deg);
}
/* Infos de l'auteur */
.article-author-name {
font-size: 1.1rem;
font-weight: 800;
color: #222;
margin-bottom: 2px;
}
.article-author-name a {
color: #dc5300;
text-decoration: none;
}
/* Position et Meta Data */
.article-author-position {
font-size: 0.85rem;
color: #666;
font-style: normal; /* On enlève l'italique pour plus de clarté */
line-height: 1.6;
}
.article-author-position img {
vertical-align: middle;
margin-right: 5px;
opacity: 0.7; /* Plus discret */
}
/* Bloc partage modernisé */
.share {
margin-top: 12px;
display: flex;
align-items: center;
gap: 8px;
border-top: 1px solid #eee;
padding-top: 12px;
}
.share a img {
width: 20px;
height: 20px;
filter: grayscale(1); /* On met les logos en gris */
transition: all 0.3s ease;
opacity: 0.6;
}
.share a:hover img {
filter: grayscale(0); /* Ils reprennent leur couleur au survol */
opacity: 1;
transform: translateY(-3px);
}
/* ==========================================================================
2. STYLES MOBILE (Écrans < 767px)
========================================================================== */
@media screen and (max-width: 766px) {
#host{display:none}features2{color:#a0a8ab !important;}body,input,textarea,select{font-size:1.2rem;line-height:2.2rem}.link-list li{padding:.75em 0}.quote-list li p{margin-bottom:.5em}.check-list li{font-size:1em}.button-big{font-size:1.5em;padding:10px 35px}#header-wrapper{background:#202124;background-size:cover;box-shadow:inset 0 -1px 0 0 #272d30,inset 0 -2px 0 0 #51575a;text-shadow:-1px -1px 1px rgba(0,0,0,0.75)}#features-wrapper,#features-wrapper2,#features-wrapper3,#features-wrapper4{background:#2c2c2c;padding:55px 15px 30px;text-shadow:-1px -1px 1px rgba(0,0,0,0.75)}#content-wrapper{background:#f7f7f7 url(images/bg04.png);padding:5px}#footer-wrapper{padding:40px 15px 15px;text-shadow:1px 1px 1px rgba(255,255,255,1)}#header{display:none}#features{color:#a0a8ab}#features section{padding:0 0 25px;margin:0 0 25px;border-bottom:solid 1px #51575a;box-shadow:inset 0 -1px 0 0 #272d30}#features > div > div:last-child > section{padding-bottom:0;margin-bottom:0;border-bottom:0;box-shadow:none}#features a,#features2 a,#features3 a,#features4 a{color:#e0e8eb}#features strong{color:#fff}#content aside,#content section{background:#fff;box-shadow:inset 0 0 0 1px rgba(128,128,128,0.2);padding:30px 15px;margin:0 0 5px}#content a{text-decoration:none}#content header{margin:0 0 1.25em}#titleBar{color:#fff;background:url(images/bg04.jpg);box-shadow:inset 0 -20px 70px 0 rgba(200,220,245,0.1),inset 0 -1px 0 0 rgba(255,255,255,0.1),0 1px 7px 0 rgba(0,0,0,0.6);text-shadow:-1px -1px 1px rgba(0,0,0,0.75)}#titleBar .title{display:block;text-align:center;font-size:1.2em;line-height:44px}#titleBar .toggle{position:absolute;left:0;top:0;width:80px;height:60px}#titleBar .toggle:after{content:'';display:block;position:absolute;top:6px;left:6px;color:#fff;background:rgba(255,255,255,0.2);box-shadow:inset 0 2px 0 0 rgba(255,255,255,0.1),inset 0 0 0 2px rgba(255,255,255,0.05),inset 0 -8px 10px 0 rgba(0,0,0,0.15),0 2px 4px 0 rgba(0,0,0,0.25);text-shadow:-1px -1px 1px rgba(0,0,0,1);width:49px;height:31px;border-radius:8px}#titleBar .toggle:before{content:'';position:absolute;width:20px;height:30px;background:url(images/mobileUI-site-nav-opener-bg.svg);top:15px;left:20px;z-index:1;opacity:.25}#titleBar .toggle:active:after{background:rgba(255,255,255,0.05)}#navPanel{background:url(images/bg04.jpg);box-shadow:inset -1px 0 0 0 rgba(255,255,255,0.25),inset -2px 0 25px 0 rgba(0,0,0,0.5);text-shadow:-1px -1px 1px rgba(0,0,0,1)}#navPanel .link{display:block;color:#fff;text-decoration:none;font-size:1.25em;line-height:2em;padding:.5em 1.5em;border-top:solid 1px #373d40;border-bottom:solid 1px rgba(0,0,0,0.4)}#navPanel .depth-1{color:#d10623;font-size:1.1em;line-height:1.5em}#navPanel .link:first-child{border-top:0}#navPanel .link:last-child{border-bottom:0}.img{float:right;margin-left:10px; width:40%; height:auto;}.img img{height:auto;width:100%;max-width:261px}.subpage #content .quote-list2 li img.thumb{float:none;width:100%;height:auto}.subpage #content .quote-list2 li h2{margin:0 0 0 0px}.subpage #content .quote-list2 li p{margin:0 0 0 0px}#form_commentaire input,#form_commentaire textarea{background:none repeat scroll 0 0 #282828;border:1px solid #ddd;border-radius:8px;box-shadow:0 2px 3px 1px rgba(0,0,0,0.05) inset,0 1px 0 0 rgba(255,255,255,0.024);color:#bbb;display:block;font-size:1em;padding:.75em;transition:background .2s ease-in-out 0s,box-shadow .2s ease-in-out 0;width:100%}.addthis_sharing_toolbox{text-align:center;position:fixed;bottom:0;left:0;width:100%;background-color:hsla(0,0%,100%,.9);z-index:10;box-shadow:0 1px 15px #888}.mobilennone{display:none}#features-wrapper p,#features-wrapper2 p {color:#ffffff !important}.3u{padding-bottom:30px !important}#stickynav.stickyon{display:none !important}#content .quote-list3 li p,#content .quote-list3 li h2{margin:0 !important}#content .quote-list3 li img{display:block !important;width:100% !important;height:auto !important;float:none !important;max-width:none !important;max-height:none !important}#stickynav.stickyon3{height:0;opacity:0}.summary{font-size:1.2em !important;line-height:1.5em}.pub{margin-top:44px}.taright{text-align:left}.commandermobile{display:table;table-layout:auto;width:100%;margin-bottom:10px}.commandermobile a{display:table-row}.commandermobile a span{display:table-cell;padding-top:.3125rem;padding-bottom:.3125rem;vertical-align:middle;color:#FFFFFF}.commandermobile img{width:70px;height:auto}.commandermobile a span:first-child{width:100%;max-width:0;text-align:left}.commandermobile a span.prix{font-weight:700;color:#B11111;padding-left:2.1875rem}#commander-sticky-wrapper{display:none !important}.stickydiv{position:inherit !important}.flexslider{border:none !important;border-radius:0px !important;box-shadow:none !important}#scroll-bar{bottom:0px;top:auto !important}.rowm:first-child>*{padding-top:0!important}.rowm>*{padding-left:20px}.rowm>*{float:left}4um{width:33.3333333333%}.share img{margin-right:5px !important;width:24px !important;height:24px !important}
.\31 2u{width:100%}.\31 1u{width:91.6666666667%}.\31 0u{width:83.3333333333%}.\39 u{width:75%}.\38 u{width:66.6666666667%}.\37 u{width:58.3333333333%}.\36 u{width:50%}.\35 u{width:41.6666666667%}.\34 u{width:33.3333333333%}.\33 u{width:25%}.\32 u{width:16.6666666667%}.\31 u{width:8.3333333333%}.\-11u{margin-left:91.6666666667%}.\-10u{margin-left:83.3333333333%}.\-9u{margin-left:75%}.\-8u{margin-left:66.6666666667%}.\-7u{margin-left:58.3333333333%}.\-6u{margin-left:50%}.\-5u{margin-left:41.6666666667%}.\-4u{margin-left:33.3333333333%}.\-3u{margin-left:25%}.\-2u{margin-left:16.6666666667%}.\-1u{margin-left:8.3333333333%}
.row>*{float:left}.row:after{content:'';display:block;clear:both;height:0}.row:first-child>*{padding-top:0!important}.row.uniform>*>:first-child{margin-top:0}.row.uniform>*>:last-child{margin-bottom:0}
body{min-width:100%;}.container{margin-left:auto;margin-right:auto;width:100%}.container.small{width:75%}.container.large{width:100%;max-width:125%;min-width:100%}
.row>*{padding-left:5px}.row+.row>*{padding:5px 0 0 5px}.row{margin-left:-5px}.row+.row.uniform>*{padding:5px 0 0 5px}.row.flush>*{padding-left:0}.row+.row.flush>*{padding:0}.row.flush{margin-left:0}.row+.row.uniform.flush>*{padding:0}.row.half>*{padding-left:2.5px}.row+.row.half>*{padding:2.5px 0 0 2.5px}.row.half{margin-left:-2.5px}.row+.row.uniform.half>*{padding:2.5px 0 0 2.5px}.row.quarter>*{padding-left:1.25px}.row+.row.quarter>*{padding:1.25px 0 0 1.25px}.row.quarter{margin-left:-1.25px}.row+.row.uniform.quarter>*{padding:1.25px 0 0 1.25px}.row.oneandhalf>*{padding-left:7.5px}.row+.row.oneandhalf>*{padding:7.5px 0 0 7.5px}.row.oneandhalf{margin-left:-7.5px}.row+.row.uniform.oneandhalf>*{padding:7.5px 0 0 7.5px}.row.double>*{padding-left:10px}.row+.row.double>*{padding:10px 0 0 10px}.row.double{margin-left:-10px}.row+.row.uniform.double>*{padding:10px 0 0 10px}
.row>*{padding-left:5px!important}.row>*:first-child{padding-top:0!important}.row+.row>*{padding:5px 0 0 5px!important}.row+.row.uniform>*{padding:5px 0 0 5px!important}.row{margin-left:-5px!important}.row:not(.no-collapse)>*{float:none!important;width:100%!important;margin-left:0!important}.row:not(.flush):not(.no-collapse):first-child>*{padding-top:5px!important}.row.uniform:not(.flush):not(.no-collapse):first-child>*{padding-top:5px!important}.row:not(.no-collapse):first-child>:first-child {padding-top:0!important}.row.uniform:not(.no-collapse):first-child>:first-child {padding-top:0!important}.row:not(.no-collapse)>*{padding-top:5px}.row.uniform:not(.no-collapse)>*{padding-top:5px}.row:not(.no-collapse)>*:first-child{padding-top:0}.row+.row:not(.no-collapse)>*{padding:5px 0 0 5px}.row+.row.uniform:not(.no-collapse)>*{padding:5px 0 0 5px}.row.flush>*{padding:0!important}.row.flush{margin-left:0px!important}.container{max-width:none!important;min-width:0!important;width:100%!important}
.not-global,.not-mobile{display:none!important}.only-desktop,.only-1000px{display:none!important}
#header {
display:block !important;
height:80px;
}
#consollection {
text-align: center;
}
#logo {
margin: 0 auto;
background: url(/images/consollection.png) no-repeat transparent;
display: block;
height: 40px;
text-indent: -2000px;
width: 106px;
background-size: contain;
}
.rechercher {
position: absolute;
right: 0;
top: 10px;
}
.ariane {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-left: 20px !important;
color: #ffffff;
}
.ariane a {
display: inline-block;
white-space: nowrap;
vertical-align: middle;
color: #c6c8c8;
font-size: 0.9em;
}
.ariane span:first-child {
display: none;
}
.ariane span:last-child {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
display: none;
}
#rs2 {
display: none;
}
.search-btn {
font-size: 24px;
}
.search-btn span {
display: none;
}
.header {
justify-content: center;
position: relative;
}
#content-wrapper.blurred {
filter: blur(5px);
pointer-events: none;
}
#nav {
display: none;
position: fixed;
top: 0;
left: -250px;
width: 250px;
height: 100%;
background-color: #333;
transition: left 0.3s ease;
z-index: 1000;
overflow-y: auto;
}
#nav.open {
left: 0;
}
.menu-item > a, span.menu-item {
font-size: 1.4rem;
font-weight: bold;
color: #ffffff !important;
text-transform: uppercase;
padding: 10px 20px;
border-bottom: 2px solid #ccc;
display: block;
}
.submenu-item > a {
font-size: 1rem;
font-weight: normal;
color: #666;
padding: 5px 15px;
display: block;
text-decoration: none;
}
.menu-item ul {
margin-left: 20px;
padding-left: 0;
}
#content-wrapper {
transition: transform 0.3s ease;
}
#content-wrapper.shifted {
transform: translateX(250px);
}
#burgerMenu {
display: block;
}
#nav.open #closeMenu {
display: block;
}
#nav ul {
list-style: none;
margin: 0;
padding: 1rem;
text-align: left;
}
#nav a {
text-decoration: none;
color: white;
font-size: 1.2rem;
}
.search-btn {
padding: 0px 20px;
}
.popin-content-search {
top: 20px;
}
dl, ol, p, ul {
padding: 0px;
}
#resultatjeux .quote-list3 {
padding:0px;
}
.stickyonlydesktop {
position: static;
}
.price {color:#F00 !important; font-size:38px !important; font-weight:bold !important;}
.price s {color:#616161; font-size:18px ! important; font-weight:bold !important;}
.price2 {color:#000 !important; font-weight:bold !important;}
.summary {
font-size: 1em !important;
line-height: 1.2em;
}
.article-author-name {
font-size: .9rem;
line-height: 1.1em;
}
#features-wrapper p,#features-wrapper h2,#features-wrapper2 p,#features-wrapper2 h2,#features-wrapper2 h3 {
color: #ffffff !important;
}
.article-bas {
padding: 10px !important;
}
/* On cible les deux types de bannières */
#banner-home, .banner-sub {
min-height: 420px !important; /* On donne un peu d'air sur mobile */
}
.banner-peps {
border-radius: 0; /* Prend tout l'écran, plus immersif sur smartphone */
}
.banner-content {
padding: 0 20px;
text-align: center; /* On centre tout pour le mobile */
}
.banner-overlay {
align-items: flex-end; /* Le texte se cale en bas sur l'image */
padding-bottom: 30px;
background: linear-gradient(0deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.2) 100%);
}
.banner-excerpt, .meta-sep {
display: none; /* On épure au maximum sur mobile */
}
.banner-meta {
justify-content: center;
}
.banner-title h2 {
font-size: 1.6rem !important;
}
.footer-links { flex-direction: column; gap: 10px; }
.sep { display: none; }
/* L'effet de flou sur le contenu principal */
#content-wrapper {
transition: filter 0.3s ease, opacity 0.3s ease; /* Transition douce */
}
/* La classe activée par le JS */
.body-blur {
filter: blur(5px); /* Intensité du flou */
pointer-events: none; /* Empêche de cliquer sur le contenu quand le menu est ouvert */
user-select: none; /* Empêche de sélectionner du texte */
opacity: 0.6; /* Optionnel : assombrit légèrement pour faire ressortir le menu */
}
}
/* ==========================================================================
3. STYLES DESKTOP (Écrans >= 767px)
========================================================================== */
@media screen and (min-width: 767px) {
#section-bottom{margin-top:45px!important}.social-links-box{border-spacing:10px}.social-links-box .box-row{display:table-row;width:100%}.social-links-box .box-cell{display:table-cell;padding:10px;width:32%}.social-links-box .box-cell2{display:table-cell;padding:10px;width:50%}.social-links-box .box-cell a,.social-links-box .box-cell2 a{text-decoration:none;color:#000}.social-links-box .s-ffffff{background-color:#fff}.social-links-box .s-2aa7de{background-color:#1da1f2}.social-links-box .s-2aa7de h3,.social-links-box .s-2aa7de p{color:#050709}.social-links-box .s-005787{background-color:#005787}.social-links-box .s-00bf8f{background-color:#00bf8f}.social-links-box .s-000000{background-color:#000}.social-links-box .s-ef8647{background-color:#ef8647}.social-links-box .s-3e5b97{background-color:#3e5b97}.social-links-box .s-db4437{background-color:#db4437}.social-links-box .box-cell h3,.social-links-box .box-cell2 h3{font-weight:700;margin:0;padding:0}.social-links-box .s-db4437 h3,.social-links-box .s-db4437 p,social-links-box .s-2aa7de h3,.social-links-box .s-000000 h3,.social-links-box .s-2aa7de p,.social-links-box .s-000000 p,.social-links-box .s-ef8647 h3,.social-links-box .s-ef8647 p,.social-links-box .s-00bf8f h3,.social-links-box .s-00bf8f p,.social-links-box .s-005787 h3,.social-links-box .s-005787 p{color:#fff!important}#logo{background:url(/images/consollection.png) no-repeat transparent;display:block;height:99px;text-indent:-1000px;width:271px;margin-top:5px}.ariane{color:#fff;font-size:0.9em;position:absolute;left:0;bottom: 5px;}.ariane a{color:#c6c8c8;font-size:0.9em}.ariane a:hover{color:#fff}.commentaire{top:0;left:23px;height:20px;width:23px;background:url(/images/css.png) no-repeat;padding-left:23px;padding-bottom:5px}body{min-width:1200px}section:last-child{margin-bottom:0!important}#header-wrapper{background:#202124;border-bottom:solid 1px #272d30;box-shadow:inset 0 -1px 0 0 #51575a;color:#ffffff;text-shadow:-1px -1px 1px rgba(0,0,0,0.75)}.subpage #header-wrapper{height:155px}#features-wrapper{min-height:470px;background:#2c2c2c;border-bottom:solid 1px #272e31;padding-top:20px;text-shadow:-1px -1px 1px rgba(0,0,0,0.75)}#features-wrapper2{background:#2c2c2c;border-bottom:solid 1px #272e31;box-shadow:0 -1px 0 0 #51575a inset;padding-top:20px; text-shadow:-1px -1px 1px rgba(0,0,0,0.75)}#features-wrapper3{background:#2c2c2c;border-bottom:solid 1px #272e31;box-shadow:0 -1px 0 0 #51575a inset;padding-top:20px;text-shadow:-1px -1px 1px rgba(0,0,0,0.75)}#features-wrapper4{background:#2c2c2c;border-bottom:solid 1px #272e31;box-shadow:0 -1px 0 0 #51575a inset;padding-top:20px;text-shadow:-1px -1px 1px rgba(0,0,0,0.75)}#content-wrapper{background:#f7f7f7 url(images/bg04.png);border-top:solid 1px #fff;padding:45px 0}#footer-wrapper{padding:45px 0;text-shadow:1px 1px 1px rgba(255,255,255,1)}#header{min-height:155px;position:relative}#header h1{position:absolute;left:0;bottom:35px;font-size:2.75em}#header h1 a{color:#fff;text-decoration:none}#form_commentaire input,#form_commentaire textarea{background:none repeat scroll 0 0 #282828;border:1px solid #ddd;border-radius:8px;box-shadow:0 2px 3px 1px rgba(0,0,0,0.05) inset,0 1px 0 0 rgba(255,255,255,0.024);color:#bbb;display:block;font-size:1em;padding:.75em;transition:background .2s ease-in-out 0s,box-shadow .2s ease-in-out 0;width:100%}#form_commentaire focus,#form_commentaire focus{background:none repeat scroll 0 0 #fafafa;box-shadow:0 2px 5px 0 rgba(0,0,0,0.05) inset,0 1px 0 0 rgba(255,255,255,0.024),0 0 2px 1px #43bff0 inset;color:#282828}input[type="button"],input[type="submit"],input[type="reset"],.button{background-attachment:scroll;background-clip:border-box;background-color:#43b3e0;background-origin:padding-box;background-position:0 0;background-repeat:repeat;background-size:auto auto;border:0 none;border-radius:8px;box-shadow:0 0 0 1px rgba(0,0,0,0.5) inset,0 2px 1px 0 rgba(255,255,255,0.75) inset;color:#fff!important;cursor:pointer;display:inline-block;font-weight:700;outline:0 none;overflow:hidden;position:relative;text-decoration:none;text-shadow:-1px -1px .5px rgba(0,0,0,0.5);transition:background-color .2s ease-in-out 0}.error{color:#B30000;font-weight:700}.close{text-align:right}.close a{color:#000!important;text-decoration:underline!important}#outil{display:block;position:absolute;right:0;top:120px;color:#45bace}#outil a{color:#FFF;text-decoration:none;font-weight:200}#header nav{min-height:29px;position:absolute;right:0;bottom:110px;font-weight:200}#header #rs{position:absolute;right:0;bottom:0px;font-weight:200}#header nav a{color:#c6c8c8;text-decoration:none;font-size:1.26em;margin-left:60px;outline:0;text-shadow:0 5px 5px rgba(0,0,0,.65)}#header #rs a{margin-left:15px}#header nav a:hover{color:#f6f8f8}#header nav#nav2{position:absolute;right:0;bottom:0;font-weight:200}#header nav#nav2 a{color:#ddd;text-decoration:none;font-size:1em;margin-left:50px;outline:0}#header na#nav2 a:hover{color:#f6f8f8}#header nav li ul{position:absolute}#header nav li ul.snav2{position:absolute;margin-top:20px}#header nav ul li{float:left}#header nav ul{margin:0;padding:0;list-style-type:none;text-align:center}#header nav ul li{float:left;margin:auto;padding:0}#header nav li a{display:block;text-decoration:none}#header nav li a:hover{color:#fff}#header nav ul li ul{display:none}#header nav ul li:hover ul{display:block}#header ul.menulast{right:0}#header nav li:hover ul li:first-of-type{margin-left:25px}#header nav li:hover ul li{margin-left:15px;text-align:center}#header nav li:hover ul li a{color:#c6c8c8;font-size:.9em!important;margin-left:0!important}#header nav li:hover ul li a:hover{color:#fff}#features{color:#a0a8ab}#features h2{font-size:1.25em;color:#fff;margin:0 0 1em}#features a{color:#e0e8eb}#features strong{color:#fff}#features2{color:#ffffff}#features2 a{color:#e0e8eb}#features2 strong{color:#fff}#features3{color:#a0a8ab}#features3 h2{font-size:1.25em;color:#fff;margin:0 0 1em}#features3 a{color:#e0e8eb}#features3 strong{color:#fff}#features4{color:#a0a8ab}#features4 h2{font-size:1.25em;color:#fff;margin:0 0 1em}#features4 a{color:#e0e8eb}#features4 strong{color:#fff}aside,#content section{background:#fff;padding:30px 25px 35px;box-shadow:2px 2px 2px 1px rgba(128,128,128,0.1);margin:0 0 10%}#content .3u section{padding:10px!important}#content div.3u section{background:#ff0!important;padding:0!important}#content h2{font-size:1.8em;margin:0 0 1em;clear:both}#content h3{color:#1c2833;font-size:1.3em}#content header{margin:0 0 2em}.listejeux{box-shadow:inset 0 1px 0 0 #e0e4e7;min-height:140px;padding:5px 0}.rebou{float:right;padding-left:20px;text-align:center;width:150px;font-size:.9em;font-weight:400}#resultat{display:none;position:absolute;top:155px;left:0;background:#fff;opacity:.95;width:100%;padding:55px;z-index:99}#resultat span{float:right;margin-right:55px}#resultat h2{clear:both;color:#F30}#resultat div{float:left;width:33%;height:70px}#resultat div img{float:left;max-height:60px;max-width:48px!important}#resultat div p{margin-left:55px}#resultat div p a{color:#000;text-shadow:1px 1px 0 rgba(255,255,255,0.5)}#resultat div p a em{color:#B30000!important}.compTitle{font-size:larger;font-weight:700;text-align:center}.compCell{display:table-cell;padding:5px;text-align:center;vertical-align:top}.img{float:right;margin-left:10px}#intro{color:#fff;position:absolute;font-size:0.9em;line-height:1.1em;width:100%;max-width:980px;bottom:0px}.commander h2{font-size:1.5em}.commander header{margin:0 !important}.commander p{margin:0 !important}.content10{padding:10px 0 !important}.sticky0{top:0px;position:sticky}.sticky70{top:70px;position:sticky}.desktopnone{display:none}.nopadding{padding:0px}.pub280{height:280px;text-align:center}
.\31 2u{width:100%}.\31 1u{width:91.6666666667%}.\31 0u{width:83.3333333333%}.\39 u{width:75%}.\38 u{width:66.6666666667%}.\37 u{width:58.3333333333%}.\36 u{width:50%}.\35 u{width:41.6666666667%}.\34 u{width:33.3333333333%}.\33 u{width:25%}.\32 u{width:16.6666666667%}.\31 u{width:8.3333333333%}.\-11u{margin-left:91.6666666667%}.\-10u{margin-left:83.3333333333%}.\-9u{margin-left:75%}.\-8u{margin-left:66.6666666667%}.\-7u{margin-left:58.3333333333%}.\-6u{margin-left:50%}.\-5u{margin-left:41.6666666667%}.\-4u{margin-left:33.3333333333%}.\-3u{margin-left:25%}.\-2u{margin-left:16.6666666667%}.\-1u{margin-left:8.3333333333%}
.row>*{float:left}.row:after{content:'';display:block;clear:both;height:0}.row:first-child>*{padding-top:0!important}.row.uniform>*>:first-child{margin-top:0}.row.uniform>*>:last-child{margin-bottom:0}
.container{margin-left:auto;margin-right:auto;max-width:1200px; width:100%; padding-bottom:20px;}.container.small{width:900px}.container.large{width:100%;max-width:1500px;min-width:1200px; width:100%}
.row>*{padding-left:25px}.row+.row>*{padding:25px 0 0 25px}.row{margin-left:-25px}.row+.row.uniform>*{padding:25px 0 0 25px}.row.flush>*{padding-left:0}.row+.row.flush>*{padding:0}.row.flush{margin-left:0}.row+.row.uniform.flush>*{padding:0}.row.half>*{padding-left:12.5px}.row+.row.half>*{padding:12.5px 0 0 12.5px}.row.half{margin-left:-12.5px}.row+.row.uniform.half>*{padding:12.5px 0 0 12.5px}.row.quarter>*{padding-left:6.25px}.row+.row.quarter>*{padding:6.25px 0 0 6.25px}.row.quarter{margin-left:-6.25px}.row+.row.uniform.quarter>*{padding:6.25px 0 0 6.25px}.row.oneandhalf>*{padding-left:37.5px}.row+.row.oneandhalf>*{padding:37.5px 0 0 37.5px}.row.oneandhalf{margin-left:-37.5px}.row+.row.uniform.oneandhalf>*{padding:37.5px 0 0 37.5px}.row.double>*{padding-left:50px}.row+.row.double>*{padding:50px 0 0 50px}.row.double{margin-left:-50px}.row+.row.uniform.double>*{padding:50px 0 0 50px}
.not-global,.not-desktop{display:none!important}.only-1000px,.only-mobile{display:none!important}.submenu-last {right: 0px;}
.price {color:#F00 !important; font-size:18px !important; font-weight:bold !important;}
.price s {color:#616161; font-weight:bold !important;}
.price2 {color:#000 !important; font-weight:bold !important;}
h1 {
font-size: 2.5rem; /* Titre imposant sur PC */
border-left-width: 8px; /* Barre plus épaisse */
padding-left: 25px;
margin: 2.5rem 0 1.5rem 0;
}
h2 {
font-size: 1.8rem;
margin: 3rem 0 1.2rem 0;
}
p {
font-size: 1.125rem; /* 18px sur PC pour le confort */
line-height: 1.8;
}
#header .rechercher {
position: absolute;
right: 20px; /* Un peu de marge du bord */
top: 95px;
transform: translateY(-50%); /* Parfaitement centré verticalement */
}
#rs2 { display: flex !important; gap: 8px; align-items: center; }
#rs2 img { filter: brightness(0) invert(1); opacity: 0.6; transition: 0.3s; }
#rs2 a:hover img { opacity: 1; }
/* --- GESTION DE LA SIDEBAR STICKY BOTTOM --- */
.\33 u.sidebar-sticky {
position: -webkit-sticky; /* Support Safari */
position: sticky !important;
/* 1. On ne colle pas le haut, mais le BAS */
bottom: 20px;
/* 2. On enlève le top qui casserait l'effet */
top: auto !important;
/* 3. La sidebar doit être moins haute que l'article pour scroller */
height: fit-content;
/* 4. Alignement pour Flexbox */
align-self: flex-end;
z-index: 10;
}
/* --- NETTOYAGE INDISPENSABLE --- */
/* On s'assure qu'aucun sous-élément n'essaie d'être sticky tout seul */
.sidebar-sticky #commander,
.sidebar-sticky .pubsticky2,
.sidebar-sticky .pubsticky2 div {
position: static !important;
height: auto !important;
}
/* On s'assure que le container parent n'empêche pas le scroll */
.row {
display: flex; /* Si ton framework le permet, c'est mieux pour le sticky */
align-items: stretch;
}
}