:root {
    --couleur0:#fff;
    --couleur5:#E6F5FF;
    --couleur10:#1D7CB9;
    --couleur15:#003399;
    --couleur20:#000;
    --couleurRed:#ff3333;
    --couleurBoutique:#ffa41c;
    --couleurCompte:#2db37a;

    --border2:1px;
    --border3:2px;

    --radius5:5px;
}

html {font-size: 13px;}

body {
    margin:0 auto 0 auto;
    background-color:var(--couleur0);
    cursor:default;
    font-weight:normal;
    font-family:Verdana,sans-serif;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    line-height:1.7;
}

a {color:var(--couleur10); cursor:pointer; text-decoration: none;}
a:hover {color: var(--couleur10); cursor:pointer; text-decoration:underline;}

.a_secondaire {text-decoration:none;}


/* Empêche tout rétrécissement ou redimensionnement non désiré */
.logo-img {
  width: 900px !important;
  height: 90px !important;
  max-width: none !important;
  flex: 0 0 auto;
  display: block;
}
/* Vue mobile : impose 320x77 */
@media (max-width: 950px) {
  .logo-img {
    width: 320px !important;
    height: 77px !important;
  }
}
/* Au cas où l'ancre limiterait la largeur */
header a[href="/"] picture { display:block; }



img{border:0;}

.sommaire {font-weight:bold;}

/* Style unifié des <details>/<summary> sur tout le site (calqué sur le panier) */
details {
    margin: 16px 10px;
    border-radius: 12px;
    background: #f7f9fb;
}
details > summary {
    cursor: pointer;
    padding: 10px;
    font-weight: 600;
    color: #1a2b4a;
    list-style: none;
    user-select: none;
}
/* Respiration en bas du <details> quand il est ouvert (sous la réponse) */
details[open] {
    padding-bottom: 10px;
}
details[open] > *:last-child {
    margin-bottom: 0;
}
details > summary::-webkit-details-marker { display: none; }
details > summary::before {
    content: '+';
    display: inline-block;
    width: 18px;
    margin-right: 6px;
    font-weight: 700;
    color: #8a93a6;
}
details[open] > summary::before {
    content: '−';
}


iframe{border-width:0px;}

p {padding:0px 10px 0px 10px; text-align:justify;}
ins {text-transform:capitalize; text-decoration:underline;}
del {text-decoration:line-through; color:var(--couleur10);}

ul, ol {padding-right: 10px;}
li {text-align: justify; margin: 10px 0;}

table {margin:0 10px;border:1px;}
table tbody {vertical-align: top;}
table th {padding:10px;}
table td {padding:10px; text-align:justify;}

.alert {padding: 10px; border-radius: 10px; background-color: pink; margin: 10px; text-align: justify;}
.greenalert {padding:10px; border-radius: 10px; background-color:#e8f5e9; margin: 10px; text-align: justify;}
.orangealert {padding:10px; border-radius: 10px; background-color:#fff3e0; margin: 10px; text-align: justify;}
.note {padding: 10px; border-radius: 10px; background-color: #eee; margin: 10px; text-align: justify;}

.container {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}

.cadre {
    flex: 1 1 100%;
}

.cadre_duo {
    flex: 1 1 100%;
}

.resultats {padding:0px;}

.resultat_0 {min-height:50px; border-style:none; border-color:var(--couleur5); padding:10px; margin-top:10px;}
.resultat_1 {min-height:50px; border-style:none; border-color:var(--couleur5); padding:15px 10px 15px 10px; margin-top:10px;}

.all_dl {background-color: #ecfebf; border:1px; border-style:solid; border-color:var(--couleur5); padding:10px; margin-top:10px; text-align: center;}

.cadre_droite_search {margin:10px 10px 10px 0; padding:0px 10px 10px 10px; float:right; width:200px; border-radius:10px; border-style:solid; border-width:var(--border2); border-color:var(--couleur10); background-color:var(--couleur5); text-align:center;}

.cadre_droite_pub {margin-right:10px; margin-bottom:10px; padding:0px 10px 10px 10px; float:right; width:200px; text-align:center;}

.publicite {line-height:0; clear:both; text-align:center; text-align:-webkit-center; margin: 20px 0 20px 0; max-height:40vh;}

.haut_q {height: 26px; margin:0; padding:4px 7px 4px 7px; vertical-align: middle; border-color:var(--couleurRed); background-color: #FFEFEF;}
.haut_v {height: 26px; margin:0; padding:4px 5px; vertical-align: middle; cursor:pointer; border-color:var(--couleurRed); background-color:#ffbcbc; color:white;}
.index_q {font-size: large; margin:0; padding:4px 7px 4px 7px; border-color:var(--couleurRed); background-color: #FFEFEF;}
.droit_q {width:150px;}
.haut_q:focus, .index_q:focus {outline: none; border-color:#FF0000; background-color: #fff;}

.signature {text-align:right; clear:both;margin: 40px 0;}

.degrade {
    background-color: var(--couleur10);
    color:var(--couleur0);
    padding: 1px 20px 1px 10px;
    border-radius:10px;
    margin: 0px 5px;
}

.navbar-toggle {padding:0; margin:0;}

.actualite {
    text-align: center;
    color:var(--couleurRed);}
.actualite a {color:var(--couleur10);}

ariane {
    padding: 15px 0 0 0;
    margin: 0 0 -30px 10px;
    display: block;
    font-size: 1.4em;
    font-weight: 700;
    letter-spacing: -0.005em;
}
ariane::before {content: "< "; font-weight: bold; font-size: 0.7em;}

h1 {font-size:1.85em; font-weight:700; line-height:1.2; letter-spacing:-0.01em; padding:0; color:#0a1230; margin:48px 10px 32px 10px; text-align:center;}

h2, .h2 {font-size:1.5em; font-weight:700; line-height:1.25; padding:0 10px; color:#0a1230; clear:both; margin:64px 0 28px 0;}

h3 {font-size:1.2em; font-weight:600; line-height:1.3; padding:0 10px; color:#0a1230; clear:both; margin:52px 0 22px 0;}

h4 {font-size:1em; font-weight:600; line-height:1.35; padding:0 15px; color:#1a2342; clear:both; margin:40px 0 18px 0;}

h5 {font-size:0.85em; font-weight:600; line-height:1.4; padding:0 20px; color:#1a2342; clear:both; margin:32px 0 14px 0; text-transform:uppercase; letter-spacing:0.04em;}

.h_centree {text-align:center; clear:none;}

.menu {color:var(--couleur0); line-height:0.9; float:left;-webkit-font-smoothing: auto;}
.menu a {color:var(--couleur0); text-decoration:none;}
.menu a:hover {text-decoration:underline;}

.menu ul{margin:0; padding:0;}
.menu li{list-style-type:none; display:inline; white-space:nowrap;}

.menuBoutique {
    color: var(--couleurRed);
    font-weight: bold;
    text-shadow:
        var(--couleur0) 1px 0px 1px,
        var(--couleur0) 0px -1px 1px,
        var(--couleur0) -1px 0px 1px,
        var(--couleur0) -0px 1px 1px; 
}

input, select, button, textarea {
    font-weight:normal;
    padding:2px 5px 2px 5px;
    margin:1px;
    background-color:var(--couleur0);
    border-radius:var(--radius5);
    border-width:var(--border2);
    border-style:solid;
    border-color:var(--couleur10);
    color:var(--couleur20);
}
input:hover, select:hover, button:hover, textarea:hover {filter: brightness(1.1);}
input[type="submit"], input[type="radio"], label, button {cursor:pointer;}

/* iOS : empêche le zoom auto à la prise de focus sur un champ
   (et le bug de <select> qui se referme à la 1ère ouverture).
   Seuil iOS = 16px. On applique uniquement en mobile pour ne pas
   alourdir le rendu desktop. */
@media (max-width: 950px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    input[type="url"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="time"],
    select,
    textarea {
        font-size: 16px;
    }
}

input[type=radio] {
    display:none;
}
input[type=radio] + label:before {
    background:var(--couleur0);
    border:var(--border2) solid var(--couleur10);
    border-radius:50%;
    margin-top:-3px;
    margin-right:6px;
    display:inline-block;
    vertical-align:middle;
    content:'';
    width:10px;
    height:10px;
}
input[type=radio]:hover + label:before {
    background:var(--couleur10);
    box-shadow:inset 0px 0px 0px 2px var(--couleur10);
}
input[type=radio]:checked + label:before {background:var(--couleur10);
    border-color:var(--couleur10);
    box-shadow:inset 0px 0px 0px 2px var(--couleur0);
}

.search_v {background-color:transparent; line-height:0; border:0; vertical-align: middle;}

.description {text-align:justify;}

.supplement {
    background-color: #fff;
    clear: both;
}

.play {cursor:pointer;}

.tag {
    display:inline-block;
    vertical-align:middle;
    margin:3px 2px;
    background-color:var(--couleur5);
    border:none;
    border-radius:999px;
    transition:background-color 0.15s ease;
    z-index:2;
    overflow:hidden;
}
.tag:hover {background-color:#cfe7f5;}
.tag a, .tag a:hover {
    display:block;
    padding:5px 14px;
    color:var(--couleur10);
    font-size:0.88em;
    line-height:1.4;
    text-align:center;
    text-decoration:none;
}

.telecharger {
    cursor:pointer;
    background-color:var(--couleurRed);
    color:white;
    padding:3px 4px;
    margin-top:10px;
    border-radius:var(--radius5);
    border: var(--border2) solid var(--couleurRed);
}

.proposition {
    display:inline-block;
    vertical-align:middle;
    margin:4px 2px;
    background-color:var(--couleur5);
    border:none;
    border-radius:12px;
    min-width:250px;
    transition:background-color 0.15s ease;
    z-index:2;
    overflow:hidden;
}
.proposition:hover {background-color:#cfe7f5;}
.proposition a, .proposition a:hover {
    display:block;
    padding:8px 18px;
    color:var(--couleur10);
    font-size:0.95em;
    line-height:1.4;
    text-align:center;
    text-decoration:none;
}

/* Grille des "Autres fichiers intéressants" — 3 colonnes (1 en mobile) */
.propositions-grid {
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:10px;
    margin:20px 10px;
}
@media (max-width:600px) {
    .propositions-grid {grid-template-columns:1fr;}
}
.proposition-card {
    display:block;
    padding:14px 16px;
    background-color:var(--couleur5);
    border-radius:12px;
    color:var(--couleur10);
    text-decoration:none;
    transition:background-color 0.15s ease;
}
.proposition-card:hover {
    background-color:#cfe7f5;
    color:var(--couleur10);
    text-decoration:none;
}
.proposition-card__title {
    display:block;
    text-align:left;
    font-weight:600;
    font-size:0.95em;
    line-height:1.3;
    color:var(--couleur10);
    margin-bottom:6px;
}
.proposition-card__duration {
    display:block;
    text-align:right;
    font-size:0.82em;
    color:#5b8aa8;
    font-variant-numeric:tabular-nums;
}
.proposition-card--current {
    opacity:0.55;
    pointer-events:none;
}
.proposition_plus {
    padding:4px 10px 4px 10px;
    margin:2px;
    text-align:center;
    display:inline-block;
    z-index:2;
}

.tagm {padding:0 3px 0 3px;
margin:0 -3px 0 -3px;
border-width:0;}

.numerodepage_all {text-align:center;
padding:10px 0 10px 0;}
.numerodepage {padding:4px 8px 4px 8px;
margin:2px;
display:inline-block;
border-radius:var(--radius5);
font-weight:bold;}
.numerodepage_off {border-style:solid;
border-width:var(--border2);
background-color:var(--couleur5);
border-color:var(--couleur10);
color:var(--couleur15);}
.numerodepage_on {border-style:solid;
border-width:var(--border2);
background-color:var(--couleur5);
border-color:var(--couleur10);
color:var(--couleur15);}
.numerodepage_down {border-style:solid;
border-width:var(--border2);
background-color:#E6E6E6;
border-color:#999;
color:#999;}


.question {
    overflow:hidden;
    padding: 0px 10px 0px 10px;
    margin-top:15px;
}
.avatar-flou {
    width:50px;
    height:50px;
    float:left;
    border-radius:50%;
    border: solid;
    border-width: 1px;
    margin:5px 0 0 0;
}
.reponse {
    overflow:hidden;
    margin: 0 10px 0 10px;
    padding: 0 10px;
}
.avatar-joseph-sardin {
    width:40px;
    height:40px;
    margin: 5px 0 0 10px;
    float:left;
    border-radius:50%;
    border: solid;
    border-width: 1px;
}
.quest-ou-rep {
    margin: 0 0 0 60px;
    padding: 10px;
    text-align: justify;
    border: 1px solid #e0e0e0;
}
.question .quest-ou-rep {
    border-radius: 10px;
    background: #f7f7f7;
}
.reponse .quest-ou-rep {
    border-radius: 0 0 10px 10px;
    border: solid;
    border-width: 0 1px 1px 1px;
    border-color: #e0e0e0;
}

.drapeau-avatar {margin-left:-60px;
position:absolute;
margin-top:0px;
line-height:0;
float:left;
opacity:1;}

.video {
    padding:4px;
    margin:2px;
    text-align:center;
    border-color:var(--couleur10);
    display:inline-block;
    border-radius:var(--radius5);
    border-style:solid;
    border-width:var(--border2);
    z-index:2;
}

.photo {
    margin: 10px;
}

.videoYoutube {
    display: block;
    width: 320px;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    margin: 0 auto;
    border: 0;
}
.youtube-facade.videoYoutube,
.vimeo-facade.videoYoutube,
.video-preview.videoYoutube {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: #000;
    cursor: pointer;
}
.video-preview video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}
.video-preview, .video-preview video, .video-preview svg, .video-preview source,
.video-slide,   .video-slide video,   .video-slide svg,   .video-slide source   { cursor: pointer !important; }
.video-slide video { pointer-events: none; }
.video-preview:hover  .video-play-overlay,
.youtube-facade:hover .video-play-overlay,
.vimeo-facade:hover   .video-play-overlay { opacity: 1; }
@media (min-width: 951px) {
    .videoYoutube { width: 500px; }
}

.photo_detail {transform:rotate(0deg);}
.mySlides {display:none; text-align:center;}
.button_mySlides {
    cursor: pointer;
    font-size: 1.5em;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    color: #343a41;
    box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.25);
    line-height: 1;
    padding: 0;
    position: relative;
    overflow: visible;
}
.button_mySlides::before {
    content: '';
    position: absolute;
    left: -12px;
    right: -12px;
    top: -12px;
    bottom: -12px;
}
.button_mySlides:hover,
.button_mySlides_g:hover .button_mySlides,
.button_mySlides_d:hover .button_mySlides { background: rgba(255, 255, 255, 1); }
.button_mySlides_g, .button_mySlides_d {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    padding: 0 6px;
    cursor: pointer;
    z-index: 5;
}
.button_mySlides_g { left: 0; }
.button_mySlides_d { right: 0; }

.carrousel-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    margin: 8px 0 0 0;
    height: 14px;
}
.carrousel-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 1px solid #0066ff;
    padding: 0;
    background: transparent;
    box-sizing: border-box;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    position: relative;
}
.carrousel-dot::before {
    content: '';
    position: absolute;
    top: -8px;
    bottom: -8px;
    left: -4px;
    right: -4px;
}
.carrousel-dot:hover { background: #0066ff; border-color: #0066ff; }
.carrousel-dot.active { background: #0066ff; border-color: #0066ff; }
.carrousel-dot.dot-medium { transform: scale(0.8); transition: transform 0.2s; }
.carrousel-dot.dot-small  { transform: scale(0.6); transition: transform 0.2s; }
.carrousel-dot.dot-tiny   { transform: scale(0.4); transition: transform 0.2s; }
.carrousel-dot.video-dot {
    width: 9px;
    height: 9px;
    background: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cpath d='M1 0.7 L8.3 4.5 L1 8.3 Z' fill='none' stroke='%23ff0000' stroke-width='1' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    border-radius: 0;
}
.carrousel-dot.video-dot::before {
    left: -4px;
    right: -4px;
    top: -8px;
    bottom: -8px;
}
.carrousel-dot.video-dot:hover,
.carrousel-dot.video-dot.active {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cpath d='M1 0.7 L8.3 4.5 L1 8.3 Z' fill='%23ff0000' stroke='%23ff0000' stroke-width='1' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-color: transparent;
}

.video-slide {
    position: relative;
    display: inline-block;
    cursor: pointer;
}
.boutique-carrousel-wrap .video-slide img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    width: 100%;
    height: auto;
}
.video-slide .youtube-facade,
.video-slide .vimeo-facade {
    position: relative;
    display: block;
    line-height: 0;
}
.video-play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -35px;
    margin-left: -50px;
    width: 100px;
    height: 70px;
    pointer-events: none;
    opacity: 0.8;
    transition: opacity 0.3s ease;
    z-index: 2;
    display: block;
}
.video-slide:hover .video-play-overlay { opacity: 1; }

.lightbox-video-wrap {
    line-height: 0;
    position: relative;
}
.video-lightbox-play-overlay {
    position: absolute;
    inset: 0;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}
.video-lightbox-play-overlay svg {
    width: 100px;
    height: 70px;
    display: block;
    pointer-events: none;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}
.lightbox-video-wrap:hover .video-lightbox-play-overlay svg { opacity: 1; }
.lightbox-video-wrap .youtube-facade,
.lightbox-video-wrap .vimeo-facade {
    position: relative;
    cursor: pointer;
    display: block;
    width: min(80vw, 960px);
    aspect-ratio: 16 / 9;
    max-height: calc(90vh - 50px);
    overflow: hidden;
}
.lightbox-video-wrap .youtube-facade img,
.lightbox-video-wrap .vimeo-facade img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.lightbox-video-wrap iframe {
    width: min(80vw, 960px);
    aspect-ratio: 16 / 9;
    max-height: calc(90vh - 50px);
    border: 0;
    display: block;
}
.lightbox-caption {
    color: #333;
    text-align: center;
    line-height: 1.5;
}
.lightbox-caption a { color: #2471a3; text-decoration: none; }
.lightbox-caption a:hover { text-decoration: underline; }
.baliseaudio { text-align: center; }
.lightbox-video-wrap video {
    width: min(80vw, 960px);
    aspect-ratio: 16 / 9;
    max-height: calc(90vh - 50px);
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transform: none; /* annule le rotate(0.5deg) de la regle generique pour suivre la rotation du .lightbox-frame */
    display: block;
}

.polaroid-container {
    display: flex;
    place-content: center;
    place-items: center;
    text-align: center;
}

figure {
    position: relative;
    display: inline-block;
    clear: both;
    margin: 0 15px 10px;
    padding: 10px;
    line-height: 0;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0 0 10px 2px rgb(0 0 0 / 0.1);
    transform: rotate(0.5deg);
}
figure img,
figure video {
    border-radius: 0;
    transition: transform 0.3s ease, border-radius 0.3s ease;
}
figure img:hover,
figure video:hover,
figure .video-slide:hover img,
figure .video-slide:hover video,
figure .youtube-facade:hover img,
figure .vimeo-facade:hover img,
figure .video-preview:hover video {
    transform: scale(1.02);
    border-radius: 5px;
}
figure .photo {
    margin: 0;
}
figcaption {
    position:relative;
    padding:0;
    text-align:center;
    width:100%;
    line-height:1.6;
    margin-top: 10px;
}

video {
    margin: 15px;
    padding: 10px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0 0 10px 2px rgb(0 0 0 / 0.1);
    transform: rotate(0.5deg);
}
figure video {
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transform: none;
}

.don {
    text-align:center;
    margin: auto;
    width: fit-content;
}

.top {position:fixed;
cursor:pointer;
display: none;
line-height:0px;
right:0px;
bottom:0px;
z-index:1;
text-align:center;
margin:5px;
border-color:var(--couleur10);
border-radius:var(--radius5);
border-style:solid;
border-width:var(--border2);
background-color:var(--couleur0);}
.top:hover {background-color:var(--couleur5);}
.top a:hover {text-decoration:none;}

.choixlangue {
    position: absolute;
    right:0;
    cursor:pointer;
    padding:0 10px 0 0;
}
.choixlangue_vif {
    color:var(--couleurRed);
    font-weight: bold;
    border-radius:var(--radius5); border-style:solid; border-width:var(--border2); border-color:var(--couleurRed);
    padding:0 2px 0 2px;
}

.reseauxSociaux img {
    width: 25px;
    height: 25px;
    padding: 0 4px;
    transform: rotate(5deg);
}

.infobulle {
    text-decoration: none;
    position: relative;
    cursor: help;
    color: var(--couleur10);
}

.infobulle a {
    text-decoration: none;
    color: var(--couleur10);
    cursor: help;
}

.infobulle span {
    display: none;
}

.infobulle span img {
    display: block; /* Rend l'image un élément de bloc */
    margin: 0 auto; /* Centre horizontalement l'image */
    max-width: 100%; /* Assure que l'image ne dépasse pas la largeur du conteneur */
    height: auto; /* Maintient les proportions de l'image */
}


.infobulle:hover {
    background: none;
    text-decoration: none;
}

.infobulle:hover span {
    z-index: 1;
    width: 400px; /* Largeur fixe confortable */
    max-width: 90vw; /* Limite à 90% de la largeur de l'écran */
    background-color: var(--couleur5);
    color: var(--couleur20);
    display: block;
    position: fixed; /* Positionnement fixe pour centrer par rapport à la page */
    top: 50%; /* Centrer verticalement sur la page */
    left: 50%; /* Centrer horizontalement sur la page */
    transform: translate(-50%, -50%); /* Centrage parfait en X et en Y */
    padding: 10px;
    border-color: var(--couleur10);
    border-radius: var(--radius5);
    border-style: solid;
    border-width: var(--border2);
    word-wrap: break-word;
    box-sizing: border-box; /* Inclut le padding et les bordures dans la largeur totale */
    white-space: normal; /* Permet de revenir à la ligne pour les textes longs */
    text-align: justify; /* Justifie le texte dans l'infobulle */
}

/* Ajustement pour petits écrans */
@media (max-width: 768px) {
    .infobulle:hover span {
        width: 90vw; /* Largeur de l'infobulle sur petits écrans */
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%); /* Toujours centré */
    }
}



.fr {padding-left:20px;
background-image:url(/images/dr-fr.gif);
background-position:left;
background-repeat:no-repeat;}
.en {padding-left:20px;
background-image:url(/images/dr-en.gif);
background-position:left;
background-repeat:no-repeat;}


.box {padding:0;
margin:2px;
text-align:center;
border-color:var(--couleur10);
display:inline-block;
border-radius:var(--radius5);
border-style:solid;
border-width:var(--border2);
z-index:2;
line-height:0;}
.box:hover {background-color:var(--couleur5);}
.box a:hover {text-decoration:none;}

.atmo_resultat {border-width:var(--border2);
border-style:solid;
border-color:var(--couleur10);
border-radius:var(--radius5);
margin:10px;
height:250px;

text-align:center;
display:inline-block;

background-position:center;
background-size:cover;
background-repeat:no-repeat;}


.jeu_liens {
padding:4px 10px 4px 10px;
margin:2px;
width: 20%;
text-align:center;
font-size:1em;
border-color:var(--couleur10);
display:inline-block;
font-weight:normal;
background-color:var(--couleur0);
border-radius:var(--radius5);
border-width:var(--border2);
border-style:solid;
cursor:pointer;
z-index:2;}
.jeu_liens:hover {background-color:var(--couleur5);}
.jeu_liens a:hover {text-decoration:none;}

.jeu_input {
font-family:Verdana, Arial, Helvetica, sans-serif;
color:var(--couleur10);
padding:4px 10px 4px 10px;
margin:2px;
text-align:center;
font-size:1em;
border-color:var(--couleur10);
display:inline-block;
font-weight:normal;
background-color:var(--couleur0);
border-radius:var(--radius5);
border-width:var(--border2);
border-style:solid;
cursor:pointer;
z-index:2;
background-color:var(--couleur5);
text-decoration:none;}
.jeu_input:hover {color:var(--couleur10);}


.prix {
    text-align:center;
    margin:15px 0 15px 0;
    font-weight: bold;
    text-shadow: -1px 0 #ccc, 0 1px #ccc, 1px 0 #ccc, 0 -1px #ccc;
}
.ajoutPanier {
    text-align:center;
    margin:15px 0 15px 0;
}

.zoom:active {
    -ms-transform: scale(1.5); /* IE 9 */
    -webkit-transform: scale(1.5); /* Safari 3-8 */
    transform: scale(1.5);
    z-index: 3;
}

.twAudessus {
  /* Le trame de fond */
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 100000;
  top: 0;
  left: 0;
  display: none;
  background: rgba(0,0,0,0.2);
  backdrop-filter: blur(1px);
}

.twAudessus a {
  display: table-cell; 
  vertical-align: middle; 
  text-align: center;
}

.twAudessus img {
  border-radius:var(--radius5);
  max-height: 90vh;
  max-width: 90vw;
  text-align: center;
  background: var(--couleur0);
  box-shadow: 0px 0px 10px #000;
}

.twAudessus:target {display: table;}

.cadre_concours {margin-right:auto; margin-left:auto; padding:0px 10px 20px 10px; width:300px; border-radius:var(--radius5); border-style:solid; border-width:var(--border2); border-color:var(--couleur10); background-color:var(--couleur5); text-align:center;}

.conseilsPerso {
    text-align: center;
    background: var(--couleur5);
}

.evenement {
    position:absolute;
}


.responsive_1 { width: 300px; height: 250px; }
@media(min-width: 500px) { .responsive_1 { width: 468px; height: 60px; } }
@media(min-width: 800px) { .responsive_1 { width: 728px; height: 90px; } }

.mini_don {margin-left:550px; top:12px; position:absolute; cursor:pointer;}

.cc {right: 20px; top:54px; position:absolute; transform:rotate(-3deg);}


.illustrationFigure {text-align: center; float: none;}
.illustrationImg {max-width: 100%;}

.categorie {padding:4px 10px 4px 10px;
margin:2px;
text-align:center;
border-color:var(--couleur10);
display:inline-block;
border-radius:var(--radius5);
border-style:solid;
border-width:var(--border2);
z-index:2;
min-width: 250px;}
.categorie:hover {background-color:var(--couleur5);}
.categorie a:hover {text-decoration:none;}
.categorie img {width: 75px;}

.numero {
    opacity: 0.5;
    font-style: italic;
    font-size: smaller;
    display: inline-block;
    text-decoration: none !important;
}

pre {
    margin:10px;
    padding:10px;
    background-color: #666;
    color:white;
    overflow-x:auto;
    cursor: text;
    border-radius: 10px;
}

.references {
    margin: 0 10px;
    overflow-x: auto;
    overflow-y: hidden;
    /* white-space: nowrap; */
    text-align: center;
    /* scrollbar-width: none; */
}
.reference {
    display: inline-block;
    width: 100px;
    height: 100px;
    margin: 0 10px;
}

.scratch {
    width: 480px;
    height: 360px;
}


.gallery {
    flex-wrap: wrap;
    text-align: center;
    position: relative;
}

.gallery img {
    cursor: zoom-in;
}

.gallery img.no-zoom {
    cursor: pointer;
}

.lightbox {
    cursor: zoom-out;
    background: rgba(52, 58, 65, 0.400000);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.4);
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.lightbox-frame {
    transform: rotate(-0.5deg);
    position: relative;
    display: inline-block;
    max-width: 90vw;
    padding: 10px;
    background-color: white;
    box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.4);
    border-radius: 10px;
}
.lightbox-frame img {
    display: block;
    max-width: 100%;
    max-height: calc(90vh - 50px);
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 1.5em;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    color: #343a41;
    box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.25);
    display: none;
    line-height: 1;
    z-index: 10000;
    overflow: visible;
    padding: 0;
}
.lightbox-nav::before {
    content: '';
    position: absolute;
    left: -15px;
    right: -15px;
    top: -15px;
    bottom: -15px;
}
.lightbox-nav:hover { background: rgba(255, 255, 255, 1); }
.lightbox-prev { left: 14px; }
.lightbox-next { right: 14px; }
.lightbox-close {
    display: block;
    top: 14px;
    right: 14px;
    transform: none;
}
.lightbox-dots {
    display: none;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
    flex-shrink: 0;
}
@media (max-width: 600px) {
    .lightbox-nav { width: 38px; height: 38px; font-size: 1.2em; }
    .lightbox-prev { left: 8px; }
    .lightbox-next { right: 8px; }
    .lightbox-close { top: 8px; right: 8px; }
}

.sommaire {
    background-color: #f4f4f4;
    border-radius: 8px;
    margin: 20px auto 20px auto;
    max-width: 90%;
    width: max-content;
    padding: 5px;
    /* border: 1px solid #ccc;
    box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1); */
    font-weight: normal;
}
.sommaire h2 {
    text-align: center;
    margin: 10px 10px;
    padding: 0;
}
.sommaire ul {
    padding: 0 20px 0 30px;
}
.sommaire li {
    text-align: left;
    margin: 5px 0;
}
.sommaire a {
    font-size: 1em;
}




.resume {
    background-color: #f4f4f4;
    border-radius: 8px;
    margin: 20px auto 20px auto;
    max-width: 90%;
    width: max-content;
    padding: 5px;
    /* border: 1px solid #ccc;
    box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1); */
    font-weight: normal;
}
.resume h2 {
    text-align: center;
    margin: 10px 10px;
    padding: 0;
}
.resume ul {
    padding: 0 20px 0 30px;
}
.resume li {
    text-align: left;
    margin: 5px 0;
}
.resume a {
    font-size: 1em;
}


.styleSousMenu {
    color:var(--couleur10);
    background-color:var(--couleur5);
    padding:3px 10px 3px 10px;
    margin: 0px 15px;
    border-radius: 0 0 10px 10px;
    border-style:solid;
    border-top-width: 0;
    border-color:var(--couleur10);
}
.styleMenu {
    display: flex;
    justify-content: space-between; /* espace égal entre les colonnes */
    gap: 20px; /* optionnel : espace entre les colonnes */
}
.styleSousMenu a {
    color:var(--couleur10);
}
.styleSousMenu ul {
    flex: 1; /* chaque ul prend la même largeur */
    list-style: none;
    margin: 0;
    padding: 4px 0;
}
.styleSousMenu li {
    display:block;
    text-align: center;
}
.styleSousMenu nav, .styleSousMenu ul, .styleSousMenu li {
    margin:0;
}
.styleSousMenu li {
    padding: 2px 0;
}


/* Mise en évidence du texte */
.highlight-anchor {
    color: red;
    transition: color 2s ease;
  }
  
  /* Flèche ajoutée après le texte, au départ invisible */
  .highlight-anchor::after {
    content: " ‹";
    color: black;
    opacity: 0;
    transition: opacity 2s ease, color 2s ease;
  }
  
  /* Apparition progressive de la flèche */
  .highlight-anchor.active::after {
    opacity: 1;
    color: red;
  }
  
  /* Disparition progressive de la flèche */
  .fully-unhighlighted::after {
    opacity: 0;
    color: black;
    transition: opacity 2s ease, color 2s ease;
  }
  
  /* Retour à la couleur d’origine du texte */
  .fully-unhighlighted {
    color: inherit;
    transition: color 2s ease;
  }
  
.boite {
    width: 80%;
    text-align: center;
    margin: 20px auto;
    transform: rotate(0.5deg);
    border: 0.5px solid #ccc;
    border-radius: 10px;
    padding: 10px 10px 25px 10px;
    background: #fff;
    box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1);
}
.boite h2 {
    text-align:center;
    margin: revert;
}



.compte {
    position: absolute;
    right:0;
    padding:5px 15px 0 0;
    font-weight: bold;
}



/* Animation slide menu desktop */
#zoneSousMenu > div {
    animation: slideDown 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}
@keyframes slideDown {
    from { transform: translateY(-15px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
@keyframes slideUp {
    from { transform: translateY(0); opacity: 1; }
    to   { transform: translateY(-15px); opacity: 0; }
}

@media all and (max-width:950px) /* MOBILE */
{
    .polaroid-container[style*="float:right"],
    .polaroid-container[style*="float: right"] {
        float: none !important;
        clear: none !important;
    }

    body {
        width: 100%;
        cursor: pointer;
    }
    
    .m {float:none;}
    .md {float:none;}
    .d {display:none;}

    .q {width:170px;}

    h1 {font-size:1.9em;}
    h2 {font-size:1.7em;}
    h3 {font-size:1.5em;}
    h4 {font-size:1.3em;}
    h5 {font-size:1.1em;}
    h6 {font-size:1em;}

    video {
        max-width: 80%;
    }

    .degrade {height:42px;}

    .menu a {padding-left:10px;}

    .rechercheAvancee {
    text-align:center;
    }

    .resultats {display:inline-block;
    clear:both;
    width:100%;
    margin:0px;}

    .resultat_0 {border-width:1px 0;}
    .resultat_1 {border-width:1px 0;}

    .cadre_droite_detail {
        margin-left:10px;
        margin-right:10px;
        padding:0px 10px 0px 10px;
        border-radius:10px;
        border-style:solid;
        border-width:var(--border2);
        border-color:var(--couleur10);
        background-color:var(--couleur5);
        text-align:center;
        clear:both;
        margin-right:10px;
        max-width:300px;
    }


    .publicite1 {padding:5px 0px 5px 0px;
    border-top-style:dashed;
    border-top-width:1px;
    border-top-color:#666;
    border-bottom-style:dashed;
    border-bottom-width:1px;
    border-bottom-color:#666;
    margin:10px 0 0 0;}

    .actualite {
        font-size:0.85em;
    }

    .ciseaux3 {
        margin-left:20px;
        position:absolute;
        margin-top:-3px;
        line-height:0;
        float:left;max-height: 90vh;
        max-width: 90vw;
        width: 100%;
    }
    
    .haut_q {border-width:var(--border3);}
    .haut_v {margin: 0 0 0 5px; border-width:2px;}
    .index_q {border-width:var(--border3); width: 75%;}


    .polaroid-container {
        margin: 20px 0 0 0;
    }

    .photo {
        max-width:280px;
        max-height:280px;
    }
    
    .photographie {
        max-width:280px;
    }

    .button_mySlides {width:38px;height:38px;font-size:1.2em;}
    .button_mySlides_g, .button_mySlides_d {padding:0 4px;}

    figure {
        float:none;
        max-width:fit-content;;
        text-align:center;
        margin-left:auto;
        margin-right:auto;
        display: block;
    }

    .menu {float:right; margin-top:8px; color:var(--couleur10);}
    .menu a {color:var(--couleur10);}
    .menu li {display:block;
    line-height:2;}
    .menu nav, .menu ul, .menu li {width:100%;
    margin:0;
    padding:0;}
    .menu nav {background-color:var(--couleur5);
    border-color:var(--couleur10);
    border-radius:0 0 10px 10px;
    border-style:solid;
    border-width:0 2px 2px 2px;}
    .menu li {padding: 4px 0 4px 0;}

    .choixlangue {
        background-color: white;
    }

    .reseauxSociaux {text-align: center;}

    .atmo_resultat {width:280px;}

    .cadre_droite_detail_m {display:inline-block; z-index:2;}

    .twAudessus:target {display:none;}

    .categorie img {width: 50px;}
}



/* Commentaires en mode extrait : deux colonnes sur desktop */
.commentaires-deux-colonnes {
    display: block;
}

@media all and (min-width: 951px) /* ORDINATEUR (951px, sinon c'est ni Mobile ni Desktop) */
{

    .commentaires-deux-colonnes {
        columns: 2;
        column-gap: 10px;
    }
    .commentaires-deux-colonnes > div {
        break-inside: avoid;
        padding-top: 1px;
    }
    html {
        height:100%;
    }

    body {
        min-height:100%;
        padding:0 5px 0 5px;
    }

    header {
        position: sticky;
        top: 0;
        z-index: 999;
    }

    main {
        width:900px;
        margin: auto;
    }

    .degrade {
        height:34px;
    }

    .menu a {padding-left:10px; padding-right:10px;}

    .haut_q {border-width:var(--border3) 0 var(--border3) var(--border3); border-top-right-radius:0; border-bottom-right-radius:0;}
    .haut_v {border-top-left-radius:0; border-bottom-left-radius:0; border-width:var(--border3) var(--border3) var(--border3) 1px; border-left-style: dashed;}
    .index_q {border-width:var(--border3); width: 50%;}


    .polaroid-container {
        margin: 30px 0;
    }

    .actualite {
        font-size:0.9em;
    }

    .ciseaux1 {top:20vh; position:fixed; text-align:right; margin-left:893px; z-index: 1; transform: rotate(90deg);} /* Droite */
    .ciseaux2 {bottom:20vh; position:fixed; margin-left:-18px; z-index: 1; transform: rotate(90deg);} /* Gauche */
    .decoupez {bottom:60vh; position:fixed; margin-left:-115px; font-size:0.8em; width: 200px; z-index: 1; transform: rotate(-90deg);}
    .ciseaux1.d img, .ciseaux2.d img { transition: transform 0.3s ease;}

    .m {display:none;}

    .q {width:200px;}

    .cadre_duo {flex: 1 1 50%;}

    .rechercheAvancee {
    text-align:left;
    }

    .h1_search {width:644px;}

    .resultats {width:100%; margin:0px 10px 0px 10px; float:left;}

    .resultat_0 {border-width:1px;border-radius:var(--radius5);}
    .resultat_1 {border-width:1px;border-radius:var(--radius5);}

    .cadre_droite_detail {margin-left:10px; margin-right:10px; padding: 0px 10px 0px 10px; float:right; width:300px; border-radius:10px; border-style:solid; border-width:var(--border2); border-color:var(--couleur10); background-color:var(--couleur5); text-align:center; transform:rotate(0.5deg);}

    .publicite1 {
    background-color:#E6E6E6;
    padding:5px;
    border-style:dashed;
    border-width:1px;
    border-radius:var(--radius5);
    border-color:#666;
    margin:10px 0 10px 0;
    }

    .ciseaux3 {position:absolute; margin-top:-4px; line-height:0; float:left; z-index:1;} /* Haut et Bas */

    .photo {
        max-width:350px;
        max-height:350px;
    }
    
    .photographie {
        max-width:400px;
    }

    figure {
        float:right;
        clear: both;
    }

    video {
        width: stretch;
    }

    .menu {float:right; margin-top:4px;}

    .langue {
        width:900px;
    }

    .reseauxSociaux {
        margin-left: 800px;
        top:5px;
        position:absolute;
        cursor:pointer;
        text-align:right;
        padding:0;
    }

    .error {padding:0;}

    .atmo_resultat {width:450px;}
}

/* ── Favoris (coeur) ─────────────────────────────── */
.favori-btn {
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    transition: transform 0.2s;
    user-select: none;
    margin-left: 8px;
}
.favori-btn:hover { transform: scale(1.2); }
.favori-btn svg {
    width: 16px;
    height: 16px;
    fill: #ccc;
    transition: fill 0.2s;
    vertical-align: middle;
    position: relative;
    top: -3px;
}
.favori-btn.active svg { fill: var(--couleurRed); }
.favori-btn-login svg { fill: #ccc; }
.favori-btn-login:hover svg { fill: #999; }

.favoris-section .favori-filtre {
    display: inline-block;
    padding: 6px 14px;
    margin: 0 4px 8px;
    border: 1px solid #ddd;
    border-radius: var(--radius5);
    background: var(--couleur0);
    cursor: pointer;
    font-size: 0.9em;
    transition: background 0.2s, border-color 0.2s;
}
.favoris-section .favori-filtre:hover { border-color: var(--couleur10); }
.favoris-section .favori-filtre.active {
    background: var(--couleur10);
    color: var(--couleur0);
    border-color: var(--couleur10);
}

.favori-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    margin-bottom: 6px;
    background: #f8f9fa;
    border-radius: 8px;
    transition: opacity 0.3s;
}
.favori-item a { flex: 1; }
.favori-item .favori-type-badge {
    display: inline-block;
    font-size: 0.75em;
    padding: 2px 8px;
    border-radius: 10px;
    margin-right: 8px;
    color: white;
    vertical-align: middle;
}
.favori-type-badge.son { background: var(--couleur10); }
.favori-type-badge.blog { background: #8e44ad; }
.favori-type-badge.dossier { background: #e67e22; }
.favori-type-badge.boutique { background: var(--couleurBoutique); }

.favori-retirer {
    margin-left: auto;
    margin-right: 0;
    flex-shrink: 0;
}

/* ========================================
   MODE SOMBRE — palette inspirée des dark modes "premium" (One UI / iOS)
   Fond bleu‑nuit profond, hiérarchie d'élévation claire (3 niveaux),
   accents bleutés saturés, texte chaud à fort contraste.
   Activé via <html data-theme="dark">.
   ======================================== */

[data-theme="dark"] {
    color-scheme: dark;

    /* Surfaces — du plus profond au plus élevé */
    --d-bg:           #0d1015;   /* page */
    --d-surface-1:    #161a21;   /* card subtile (alt sections) */
    --d-surface-2:    #1c2029;   /* card standard (panier-item, details, payment-block, etc.) */
    --d-surface-3:    #232832;   /* hover / élévation supérieure */
    --d-surface-input:#10141a;   /* champs (légèrement plus profond que les cards) */

    /* Texte */
    --d-text:         #e9edf2;   /* primaire */
    --d-text-soft:    #b8c0cc;   /* secondaire */
    --d-text-muted:   #7a8392;   /* tertiaire / placeholders */
    --d-heading:      #f5f7fa;   /* titres */

    /* Lignes / contours */
    --d-border:       #262b34;
    --d-border-soft:  #1f242c;
    --d-border-input: #303743;

    /* Accents */
    --d-accent:       #7cb8eb;   /* lien / focus */
    --d-accent-soft:  #9cc6e8;
    --d-accent-bg:    #18293a;   /* tag / proposition bg */
    --d-accent-bg-hi: #21384f;   /* hover */

    /* Remap des variables historiques utilisées comme FOND clair partout dans le site
       → automatiquement assombries (les usages "color:" qui doivent rester blancs sont
       réécrits explicitement plus bas). */
    --couleur0:       #1c2029;   /* était #fff */
    --couleur5:       #18293a;   /* était #E6F5FF */
}

/* Restaure le blanc là où --couleur0 était utilisé pour le TEXTE (et pas le fond) */
[data-theme="dark"] .menu,
[data-theme="dark"] .menu a,
[data-theme="dark"] .degrade,
[data-theme="dark"] .favoris-section .favori-filtre.active { color: #fff; }

/* text-shadow blanc autour du texte rouge → halo sombre en dark */
[data-theme="dark"] .menuBoutique {
    text-shadow:
        rgba(0,0,0,0.7) 1px 0 2px,
        rgba(0,0,0,0.7) 0 -1px 2px,
        rgba(0,0,0,0.7) -1px 0 2px,
        rgba(0,0,0,0.7) 0 1px 2px;
}

/* Le radio "checked" affichait son point via box-shadow:inset blanc → on garde un point clair */
[data-theme="dark"] input[type=radio]:checked + label:before {
    box-shadow: inset 0 0 0 2px var(--d-bg);
}

[data-theme="dark"] body {
    background-color: var(--d-bg);
    color: var(--d-text);
}

/* Liens */
[data-theme="dark"] a,
[data-theme="dark"] a:hover { color: var(--d-accent); }

/* Titres */
[data-theme="dark"] h1,
[data-theme="dark"] h2, [data-theme="dark"] .h2,
[data-theme="dark"] h3 { color: var(--d-heading); }
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] ariane { color: var(--d-text-soft); }

/* Tables */
[data-theme="dark"] table th,
[data-theme="dark"] table td { border-color: var(--d-border); }

/* <details> & summary */
[data-theme="dark"] details { background-color: var(--d-surface-2); }
[data-theme="dark"] details > summary { color: var(--d-heading); }
[data-theme="dark"] details > summary::before { color: var(--d-text-muted); }

/* Alerts */
[data-theme="dark"] .alert        { background-color: #2a161b; color: #ffb6bd; }
[data-theme="dark"] .greenalert   { background-color: #14301f; color: #b9e3c5; }
[data-theme="dark"] .orangealert  { background-color: #2a2010; color: #f0ce93; }
[data-theme="dark"] .note         { background-color: var(--d-surface-2); color: var(--d-text); }

[data-theme="dark"] .all_dl       { background-color: #1a2818; color: #d3e6c8; border-color: var(--d-border); }
[data-theme="dark"] .resultat_0,
[data-theme="dark"] .resultat_1   { border-color: var(--d-border); }

[data-theme="dark"] .cadre_droite_search { background-color: var(--d-surface-2); border-color: var(--d-border); }
[data-theme="dark"] .cadre_droite_pub    { background-color: transparent; }

/* Inputs / selects / textarea / button (générique) */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea,
[data-theme="dark"] button {
    background-color: var(--d-surface-input);
    color: var(--d-text);
    border-color: var(--d-border-input);
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: var(--d-text-muted); }
[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
    border-color: var(--d-accent);
    box-shadow: 0 0 0 3px rgba(124, 184, 235, 0.15);
    outline: none;
}

/* Tags / propositions / chips */
[data-theme="dark"] .tag,
[data-theme="dark"] .proposition,
[data-theme="dark"] .proposition-card { background-color: var(--d-accent-bg); }
[data-theme="dark"] .tag:hover,
[data-theme="dark"] .proposition:hover,
[data-theme="dark"] .proposition-card:hover { background-color: var(--d-accent-bg-hi); }
[data-theme="dark"] .tag a,
[data-theme="dark"] .tag a:hover,
[data-theme="dark"] .proposition a,
[data-theme="dark"] .proposition a:hover,
[data-theme="dark"] .proposition-card,
[data-theme="dark"] .proposition-card:hover,
[data-theme="dark"] .proposition-card__title { color: var(--d-accent-soft); }
[data-theme="dark"] .proposition-card__duration { color: #6f8da6; }

/* Notice "Champs obligatoires" — ambre lisible */
[data-theme="dark"] span.field-invalid {
    background-color: #2a2010;
    border-color: #d18a2e;
    color: #f0ce93;
}

/* Form modern (panier — adresse) */
[data-theme="dark"] .form-modern { color: var(--d-text); }
[data-theme="dark"] .form-modern label { color: var(--d-text-soft); }
[data-theme="dark"] .form-modern input,
[data-theme="dark"] .form-modern select,
[data-theme="dark"] .form-modern textarea {
    background-color: var(--d-surface-input);
    color: var(--d-text);
    border-color: var(--d-border-input);
}
[data-theme="dark"] .form-modern input:hover,
[data-theme="dark"] .form-modern select:hover,
[data-theme="dark"] .form-modern textarea:hover { border-color: #4a5462; }
[data-theme="dark"] .form-modern input:disabled,
[data-theme="dark"] .form-modern input[readonly] {
    background-color: #0b0e13;
    color: var(--d-text-soft);
}

/* Panier item / suggestion (élévation visible : card sur bg) */
[data-theme="dark"] .panier-item            { background-color: var(--d-surface-2); }
[data-theme="dark"] .panier-item:hover      { background-color: var(--d-surface-3); }
[data-theme="dark"] .panier-item__title     { color: var(--d-heading) !important; }
[data-theme="dark"] .panier-item__option    { background-color: #262b34; border-color: #262b34; color: var(--d-text-soft); }
[data-theme="dark"] .panier-item__qty-label { color: var(--d-text-soft); }
[data-theme="dark"] .panier-item__qty-btn   { background-color: var(--d-surface-input); color: var(--d-text); border-color: var(--d-border-input); }
[data-theme="dark"] .panier-item__qty-btn:hover { background-color: var(--d-surface-3); border-color: #4a5462; }
[data-theme="dark"] .panier-item__qty-value { color: var(--d-heading); }
[data-theme="dark"] .panier-item__price     { color: var(--d-text-soft); }
[data-theme="dark"] .panier-item__price strong { color: var(--d-heading); }
[data-theme="dark"] .panier-item__delete    { color: var(--d-text-muted); }
[data-theme="dark"] .panier-item__delete:hover { color: #ff8a85; background-color: #2a161b; border-color: #5a2a30; }
[data-theme="dark"] .panier-item--suggestion { background-color: #2a2410; }
[data-theme="dark"] .panier-item--suggestion:hover { background-color: #352d14; }

/* Trust badges / why-buy / payment block */
[data-theme="dark"] .trust-badges,
[data-theme="dark"] .why-buy-here,
[data-theme="dark"] .payment-block { background-color: var(--d-surface-2); }
[data-theme="dark"] .trust-badge,
[data-theme="dark"] .why-buy-item strong { color: var(--d-text); }
[data-theme="dark"] .virement-details { background-color: var(--d-surface-1); border-color: var(--d-border); color: var(--d-text-soft); }
[data-theme="dark"] .virement-details strong { color: var(--d-heading); }

/* Boutons d'action */
[data-theme="dark"] .btn-add-to-cart:disabled { background-color: var(--d-surface-3); color: var(--d-text-muted); }
[data-theme="dark"] .telecharger { background-color: var(--couleurRed); color:#fff; }
[data-theme="dark"] .panier-item__add { color:#fff; }

/* Inputs spécifiques (haut_q / index_q en rouge) */
[data-theme="dark"] .haut_q,
[data-theme="dark"] .index_q { background-color: #2a161b; color: var(--d-text); }
[data-theme="dark"] .haut_v { background-color: var(--couleurRed); }

/* Dégradé / pastilles colorées */
[data-theme="dark"] .degrade { color: #fff; }

/* Stats admin */
[data-theme="dark"] .stats-table tbody tr:nth-child(odd)  { background-color: var(--d-surface-1); }
[data-theme="dark"] .stats-table tbody tr:nth-child(even) { background-color: var(--d-bg); }
[data-theme="dark"] .stats-table tbody tr:hover           { background-color: var(--d-surface-3); }
[data-theme="dark"] .stats-table td { border-color: var(--d-border); color: var(--d-text); }

/* Cards / blocs site (--couleur0 / --couleur5 / hex clairs en clair) */
[data-theme="dark"] .top,
[data-theme="dark"] .box,
[data-theme="dark"] .jeu_liens,
[data-theme="dark"] .jeu_input,
[data-theme="dark"] .categorie,
[data-theme="dark"] .cadre_concours,
[data-theme="dark"] .evenement,
[data-theme="dark"] .atmo_resultat,
[data-theme="dark"] .choixlangue,
[data-theme="dark"] .choixlangue_vif,
[data-theme="dark"] .infobulle:hover {
    background-color: var(--d-surface-2);
    border-color: var(--d-border);
    color: var(--d-text);
}
[data-theme="dark"] .top:hover,
[data-theme="dark"] .box:hover,
[data-theme="dark"] .jeu_liens:hover,
[data-theme="dark"] .categorie:hover,
[data-theme="dark"] .infobulle:hover span {
    background-color: var(--d-surface-3);
}

/* Numérotation pages */
[data-theme="dark"] .numerodepage_off,
[data-theme="dark"] .numerodepage_on,
[data-theme="dark"] .numerodepage_down {
    background-color: var(--d-surface-2);
    border-color: var(--d-border);
    color: var(--d-text);
}

/* Question / Réponse */
[data-theme="dark"] .quest-ou-rep,
[data-theme="dark"] .question .quest-ou-rep,
[data-theme="dark"] .reponse .quest-ou-rep {
    background-color: var(--d-surface-2);
    border-color: var(--d-border);
    color: var(--d-text);
}

/* figures / video / lightbox / sommaire / resume — fonds blancs */
[data-theme="dark"] figure,
[data-theme="dark"] video,
[data-theme="dark"] .lightbox-frame {
    background-color: var(--d-surface-2);
    border-color: var(--d-border);
    box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] .sommaire,
[data-theme="dark"] .resume {
    background-color: var(--d-surface-1);
    color: var(--d-text);
}

/* Carrousel dots */
[data-theme="dark"] .carrousel-dot { background: transparent; border-color: var(--d-accent); }
[data-theme="dark"] .carrousel-dot:hover,
[data-theme="dark"] .carrousel-dot.active { background: var(--d-accent); border-color: var(--d-accent); }

/* Don / dégradé */
[data-theme="dark"] .don {
    background-color: var(--d-surface-2);
    border-color: var(--d-border);
}

/* Catégories / sections d'index */
[data-theme="dark"] .resultats {
    background-color: transparent;
}

/* Code/pre — déjà sombre, juste éclaircir un poil */
[data-theme="dark"] pre {
    background-color: #1e1e22;
    color: #e0e6ed;
}

/* Sidebar des fiches sons */
[data-theme="dark"] .cadre_droite_detail,
[data-theme="dark"] .cadre_droite_detail_m {
    background-color: var(--d-surface-2) !important;
    border-color: var(--d-border) !important;
}

/* Bandeau sticky du haut — opacifie tout le header pour qu'on ne voie pas la page sous l'élément collé */
header { background-color: #ffffff; }
.cadre.element-sticky { background-color: #ffffff; }
[data-theme="dark"] header,
[data-theme="dark"] .cadre.element-sticky { background-color: var(--d-bg); }

/* Sélecteur de format & cadre téléchargement (rouge clair en clair / sombre teinté en dark) */
.select-format,
.telechargement-cadre { background-color: #FFEFEF; }
[data-theme="dark"] .select-format,
[data-theme="dark"] .telechargement-cadre { background-color: #2a161b; color: var(--d-text); }

/* Logos en footer / bandeaux blanc inline (toutes variantes) */
[data-theme="dark"] [style*="background-color:#fff"],
[data-theme="dark"] [style*="background-color: #fff"],
[data-theme="dark"] [style*="background-color:#ffffff"],
[data-theme="dark"] [style*="background-color: #ffffff"],
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background:#ffffff"],
[data-theme="dark"] [style*="background: #ffffff"],
[data-theme="dark"] [style*="background-color:white"],
[data-theme="dark"] [style*="background-color: white"] {
    background-color: var(--d-surface-2) !important;
}

/* Sélection de texte plus contrastée */
[data-theme="dark"] ::selection { background-color: rgba(124, 184, 235, 0.35); color: #fff; }

/* Scrollbar : on garde la barre overlay native (pas de largeur explicite qui forcerait
   un mode classique sur macOS). On colorise seulement la couleur du thumb sans
   redimensionner. */
[data-theme="dark"] ::-webkit-scrollbar-thumb { background-color: var(--d-surface-3); }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background-color: #2c3340; }