/**
 * Sceptiques du Québec - CSS consolidé
 * Basé sur W3.CSS 4.15 (seulement les classes utilisées)
 * Fusionné avec w3-theme-blue-grey.css et w3-custom-sceptiques.css
 */

/* ==========================================================================
   1. RESET / NORMALIZE (de W3.CSS)
   ========================================================================== */
html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}
article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}summary{display:list-item}
audio,canvas,progress,video{display:inline-block}progress{vertical-align:baseline}
audio:not([controls]){display:none;height:0}[hidden],template{display:none}
a{background-color:transparent}a:active,a:hover{outline-width:0}
abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}
b,strong{font-weight:bolder}dfn{font-style:italic}mark{background:#ff0;color:#000}
small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sub{bottom:-0.25em}sup{top:-0.5em}figure{margin:1em 40px}img{border-style:none}
code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}hr{box-sizing:content-box;height:0;overflow:visible}
button,input,select,textarea,optgroup{font:inherit;margin:0}optgroup{font-weight:bold}
button,input{overflow:visible}button,select{text-transform:none}
button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}
button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}
button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}
legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}
[type=checkbox],[type=radio]{padding:0}
[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}
[type=search]{-webkit-appearance:textfield;outline-offset:-2px}
[type=search]::-webkit-search-decoration{-webkit-appearance:none}
::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}

/* ==========================================================================
   2. BASE STYLES
   ========================================================================== */
html,body{font-family:'Roboto', helvetica, arial, sans-serif;font-size:15px;line-height:1.5}
html{overflow-x:hidden}
body{background-color:#f0f2f5;height:100vh}
h1{font-size:24px}h2{font-size:24px}h3{font-size:24px}h4{font-size:20px}h5{font-size:18px}h6{font-size:16px}
h1,h2,h3,h4,h5,h6{font-family:"Segoe UI",Arial,sans-serif;font-weight:400;margin:10px 0}
.w3-wide{letter-spacing:4px}
hr{border:0;border-top:1px solid rgb(185, 185, 185);margin:20px 0}
img{vertical-align:middle}a{color:inherit}

/* ==========================================================================
   3. LAYOUT - Container & Content
   ========================================================================== */
.w3-container{padding:0.01em 16px}
.w3-content{margin-left:auto;margin-right:auto;max-width:980px}
body > div.w3-content{padding-left:2em;padding-right:2em}

/* Clearfix */
.w3-container:after,.w3-container:before,
.w3-row:after,.w3-row:before,
.w3-row-padding:after,.w3-row-padding:before,
.w3-bar:before,.w3-bar:after{content:"";display:table;clear:both}

/* Grid */
.w3-row{margin-left:-16px;margin-right:-16px}
.w3-col,.w3-third,.w3-twothird{float:left;width:100%}
.w3-col.s1{width:8.33333%}.w3-col.s2{width:16.66666%}.w3-col.s3{width:24.99999%}.w3-col.s4{width:33.33333%}
.w3-col.s5{width:41.66666%}.w3-col.s6{width:49.99999%}.w3-col.s7{width:58.33333%}.w3-col.s8{width:66.66666%}
.w3-col.s9{width:74.99999%}.w3-col.s10{width:83.33333%}.w3-col.s11{width:91.66666%}.w3-col.s12{width:99.99999%}

@media (min-width:601px){
    .w3-col.m1{width:8.33333%}.w3-col.m2{width:16.66666%}.w3-col.m3{width:24.99999%}.w3-col.m4,.w3-third{width:33.33333%}
    .w3-col.m5{width:41.66666%}.w3-col.m6{width:49.99999%}.w3-col.m7{width:58.33333%}.w3-col.m8,.w3-twothird{width:66.66666%}
    .w3-col.m9{width:74.99999%}.w3-col.m10{width:83.33333%}.w3-col.m11{width:91.66666%}.w3-col.m12{width:99.99999%}
}
@media (min-width:993px){
    .w3-col.l1{width:8.33333%}.w3-col.l2{width:16.66666%}.w3-col.l3{width:24.99999%}.w3-col.l4{width:33.33333%}
    .w3-col.l5{width:41.66666%}.w3-col.l6{width:49.99999%}.w3-col.l7{width:58.33333%}.w3-col.l8{width:66.66666%}
    .w3-col.l9{width:74.99999%}.w3-col.l10{width:83.33333%}.w3-col.l11{width:91.66666%}.w3-col.l12{width:99.99999%}
}

.w3-rest{overflow:hidden}
.w3-row-padding,.w3-row-padding>.w3-third,.w3-row-padding>.w3-twothird,.w3-row-padding>.w3-col{padding:0 8px}

/* ==========================================================================
   4. NAVIGATION - Bar & Top
   ========================================================================== */
.w3-top{position:fixed;width:100%;z-index:1000;top:0;font-size:24px}
.w3-bar{width:100%;overflow:hidden}
.w3-bar .w3-bar-item{padding:8px 16px;float:left;width:auto;border:none;display:block;outline:0}
.w3-bar .w3-button{white-space:normal}
.w3-bar .w3-dropdown-hover{position:static;float:left}
.w3-bar-block .w3-bar-item{width:100%;display:block;padding:8px 16px;text-align:left;border:none;white-space:normal;float:none;outline:0}
.w3-bar-block .w3-dropdown-hover,.w3-bar-block .w3-dropdown-click{width:100%}
.w3-bar-block .w3-dropdown-hover .w3-dropdown-content{min-width:100%}
.w3-bar-block .w3-dropdown-hover .w3-button{width:100%;text-align:left;padding:8px 16px}

/* ==========================================================================
   5. BUTTONS & FORMS
   ========================================================================== */
.w3-btn,.w3-button{border:none;display:inline-block;padding:8px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap}
.w3-btn:hover{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
.w3-btn,.w3-button{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.w3-button:hover{color:#000!important;background-color:#ccc!important}
.w3-disabled,.w3-btn:disabled,.w3-button:disabled{cursor:not-allowed;opacity:0.3}
.w3-disabled *,:disabled *{pointer-events:none}
.w3-btn.w3-disabled:hover,.w3-btn:disabled:hover{box-shadow:none}

input.w3-button, a.w3-button{margin-bottom:5px;transition:background-color 0.3s ease}

.w3-input{padding:8px;display:block;border:none;border-bottom:1px solid #ccc;width:100%}
.w3-select{padding:9px 0;width:100%;border:none;border-bottom:1px solid #ccc}
.w3-check,.w3-radio{width:24px;height:24px;position:relative;top:6px}

/* ==========================================================================
   6. DROPDOWNS
   ========================================================================== */
.w3-dropdown-hover{position:relative;display:inline-block;cursor:pointer}
.w3-dropdown-hover:hover .w3-dropdown-content{display:block}
.w3-dropdown-hover:hover > .w3-button:first-child{background-color:#ccc;color:#000}
.w3-dropdown-content{cursor:auto;color:#000;background-color:#fff;display:none;position:absolute;min-width:160px;margin:0;padding:0;z-index:1}

/* ==========================================================================
   7. MODALS
   ========================================================================== */
.w3-modal{z-index:3;display:none;padding-top:100px;position:fixed;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.4)}
.w3-modal-content{margin:auto;background-color:#fff;position:relative;padding:0;outline:0;width:600px}

/* ==========================================================================
   8. TABLES
   ========================================================================== */
.w3-table{border-collapse:collapse;border-spacing:0;width:100%;display:table}
.w3-table td,.w3-table th{padding:8px 8px;display:table-cell;text-align:left;vertical-align:top}
.w3-table th:first-child,.w3-table td:first-child{padding-left:16px}
.w3-striped tbody tr:nth-child(even){background-color:#f1f1f1}
.w3-hoverable tbody tr:hover{background-color:#ccc}

/* ==========================================================================
   9. CARDS
   ========================================================================== */
.w3-card,.w3-card-2{box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)}
.w3-card-4{box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19)}

/* Custom card styles */
.card{border-radius:10px;box-shadow:0 4px 8px rgba(0, 0, 0, 0.1);transition:transform 0.3s ease}
.card:hover{transform:translateY(-10px)}
.card-header{background:linear-gradient(135deg, #213955 0%, #1e4b95 100%);color:#ffffff;text-align:center;border-top-left-radius:10px;border-top-right-radius:10px}
.card-content{color:#333333;border-bottom-right-radius:10px;border-bottom-left-radius:10px;background-color:white}

/* ==========================================================================
   10. COLORS - Theme (from w3-theme-blue-grey.css with customizations)
   ========================================================================== */
.w3-theme-l5{color:#000!important;background-color:#f5f7f8!important}
.w3-theme-l4{color:#000!important;background-color:#dfe5e8!important}
.w3-theme-l3{color:#000!important;background-color:#becbd2!important}
.w3-theme-l2{color:#000!important;background-color:#217cad!important}
.w3-theme-l1{color:#fff!important;background:linear-gradient(135deg, #4f6d7d 0%, #7d97a5 100%)}
.w3-theme-d1{color:#fff!important;background-color:#57707d!important}
.w3-theme-d2{color:#fff!important;background-color:inherit!important;background:linear-gradient(135deg, #213955 0%, #1e4b95 100%);padding-left:0;padding-right:0}
.w3-theme-d3{color:#fff!important;background-color:#435761!important}
.w3-theme-d4{color:#fff!important;background-color:#3a4b53!important}
.w3-theme-d5{color:#fff!important;background-color:#303e45!important}
.w3-theme-light{color:#000!important;background-color:#f5f7f8!important}
.w3-theme-dark{color:#fff!important;background-color:#303e45!important}
.w3-theme{color:#fff!important;background-color:#607d8b!important}
.w3-text-theme{color:#607d8b!important}
.w3-border-theme{border-color:#607d8b!important}
.w3-hover-theme:hover{color:#fff!important;background-color:#607d8b!important}

/* ==========================================================================
   11. COLORS - Standard
   ========================================================================== */
.w3-blue-gray,.w3-blue-grey{background:linear-gradient(135deg, #4f6d7d 0%, #7d97a5 100%);color:#fff!important}
.w3-blue-gray:hover,.w3-blue-grey:hover{background:#CCCCCC;color:#000000}
.w3-green{color:#fff!important;background-color:#4CAF50!important}
.w3-red{color:#fff!important;background:linear-gradient(135deg, #c94f28 0%, #FF5722 100%)}
.w3-teal{color:#fff!important;background-color:#87996e!important}
.w3-white{color:#000!important;background-color:#fff!important}
.w3-light-grey,.w3-light-gray{color:#000!important;background-color:#f1f1f1!important}
.w3-hover-white:hover{color:#000!important;background-color:#fff!important}

/* Text colors */
.w3-text-black{color:#000!important}
.w3-text-red{color:#f44336!important}
.w3-text-white{color:#fff!important}

/* ==========================================================================
   12. BORDERS
   ========================================================================== */
.w3-border{border:1px solid #ccc!important}
.w3-border-top{border-top:1px solid #ccc!important}
.w3-border-bottom{border-bottom:1px solid #ccc!important}
.w3-border-left{border-left:1px solid #ccc!important}
.w3-border-right{border-right:1px solid #ccc!important}
.w3-topbar{border-top:6px solid #ccc!important}
.w3-bottombar{border-bottom:6px solid #ccc!important}
.w3-leftbar{border-left:6px solid #ccc!important}
.w3-rightbar{border-right:6px solid #ccc!important}
.w3-border-grey,.w3-border-gray{border-color:#9e9e9e!important}

/* ==========================================================================
   13. ROUNDED CORNERS
   ========================================================================== */
.w3-round,.w3-round-medium{border-radius:4px}
.w3-round-large{border-radius:8px}
.w3-round-xlarge{border-radius:16px}

/* ==========================================================================
   14. SPACING - Margins & Paddings
   ========================================================================== */
.w3-margin{margin:16px!important}
.w3-margin-top{margin-top:16px!important}
.w3-margin-bottom{margin-bottom:16px!important}
.w3-margin-left{margin-left:16px!important}
.w3-margin-right{margin-right:16px!important}

.w3-padding-small{padding:4px 8px!important}
.w3-padding{padding:8px 16px!important}
.w3-padding-large{padding:12px 24px!important}
.w3-padding-16{padding-top:16px!important;padding-bottom:16px!important}
.w3-padding-24{padding-top:24px!important;padding-bottom:24px!important}
.w3-padding-32{padding-top:32px!important;padding-bottom:32px!important}
.w3-padding-64{padding-top:64px!important;padding-bottom:64px!important}

/* ==========================================================================
   15. TEXT ALIGNMENT & SIZING
   ========================================================================== */
.w3-left-align{text-align:left!important}
.w3-right-align{text-align:right!important}
.w3-justify{text-align:justify!important}
.w3-center{text-align:center!important}

.w3-small{font-size:12px!important}
.w3-large{font-size:18px!important}
.w3-xlarge{font-size:24px!important}
.w3-xxlarge{font-size:36px!important}

/* ==========================================================================
   16. POSITIONING & DISPLAY
   ========================================================================== */
.w3-left{float:left!important}
.w3-right{float:right!important}
.w3-hide{display:none!important}
.w3-show{display:block!important}

.w3-display-topright{position:absolute;right:0;top:0}
.w3-tooltip,.w3-display-container{position:relative}

/* ==========================================================================
   17. ANIMATIONS
   ========================================================================== */
.w3-animate-zoom{animation:animatezoom 0.6s}
@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}

/* ==========================================================================
   18. RESPONSIVE - Visibility
   ========================================================================== */
@media (max-width:600px){
    .w3-modal-content{margin:0 10px;width:auto!important}
    .w3-modal{padding-top:30px}
    .w3-hide-small{display:none!important}
    .w3-mobile{display:block;width:100%!important}
    .w3-bar-item.w3-mobile,.w3-dropdown-hover.w3-mobile{text-align:center}
    .w3-dropdown-hover.w3-mobile,.w3-dropdown-hover.w3-mobile .w3-btn,.w3-dropdown-hover.w3-mobile .w3-button{width:100%}
    H2{font-size:14px}
    H3{font-size:13px}
}
@media (max-width:768px){
    .w3-modal-content{width:500px}
    .w3-modal{padding-top:50px}
}
@media (min-width:993px){
    .w3-modal-content{width:900px}
    .w3-hide-large{display:none!important}
}
@media (max-width:992px) and (min-width:601px){
    .w3-hide-medium{display:none!important}
}

/* ==========================================================================
   19. CUSTOM COMPONENTS - Sceptiques
   ========================================================================== */

/* Donation button */
.boutonDons{margin:10px;min-width:200px;background:linear-gradient(135deg, #c94f28 0%, #FF5722 100%);font-size:larger}

/* Flex grid for boutique */
.tableau{display:flex;flex-flow:row wrap;align-items:flex-end;justify-content:center;gap:20px}
.cellule{max-width:200px;flex-basis:22%}

/* Slideshow (from header.php) */
.mySlides{display:none}
.w3-tag,.fa{cursor:pointer}
.w3-tag{height:15px;width:15px;padding:0;margin-top:6px}

/* ==========================================================================
   20. VIDEO CONTAINER (responsive 16:9)
   ========================================================================== */
.video-container{position:relative;width:100%;height:0;padding-bottom:56.25%;overflow:hidden}
.video-container iframe,.video-container video,.video-container .video{position:absolute;top:0;left:0;width:100%;height:100%}

/* Legacy support */
.VideoContainer{position:relative;width:100%;height:0;padding-bottom:56.25%}
.video{position:absolute;top:0;left:0;width:100%;height:100%}

/* ==========================================================================
   21. WATERMARK (cancelled events)
   ========================================================================== */
.filigrane{background-image:url('images/Evenement_Annule.jpg');background-repeat:no-repeat;filter:alpha(opacity=50);opacity:0.5;-moz-opacity:0.5;background-position:center;background-size:100%}

/* ==========================================================================
   22. SPECIAL EVENT HEADER
   ========================================================================== */
#entete-special{background-color:#88B04B;color:white;padding:15px;font-weight:bold;font-size:1.2em;cursor:pointer;border-radius:5px 5px 0 0;box-shadow:0 2px 4px rgba(0,0,0,0.1);transition:background-color 0.3s ease}
#entete-special:hover{background-color:#A1C65A}

/* ==========================================================================
   23. CONFERENCE PAYMENT COMPONENT
   ========================================================================== */
.payment-container{background:#0f4c75;color:white;padding:25px;border-radius:10px;margin-top:20px;box-shadow:0 2px 6px rgba(0,0,0,0.1)}
.payment-title{margin-top:0;color:#ff8c42;font-size:1.4em}
.payment-subtitle{margin-bottom:15px;opacity:0.9}
.payment-option{background:rgba(255,255,255,0.1);border:2px solid rgba(255,255,255,0.3);text-align:center;transition:all 0.2s;cursor:pointer}
.payment-option:hover{background:rgba(255,255,255,0.2);border-color:rgba(255,255,255,0.5)}
.payment-radio{transform:scale(1.3)}
.payment-price{font-size:1.5em;color:#ff8c42;font-weight:bold}
.payment-info{margin-bottom:0;font-size:0.9em;opacity:0.8}
.payment-link{color:#ff8c42}
.payment-link:hover{color:#ffb080}

/* Payment modal */
.payment-modal{display:none;align-items:center;justify-content:center;padding-top:0}
.payment-modal-content{max-width:500px;background:#0f4c75;color:white;margin:20px}
.payment-modal-title{margin-top:0;color:#ff8c42}
.payment-modal-btn{background:#ff8c42;color:white;font-weight:bold;width:100%;padding:15px;white-space:normal;word-wrap:break-word}

/* ==========================================================================
   24. UTILITY CLASSES
   ========================================================================== */
.page-narrow{max-width:800px!important}
.page-wide{max-width:1200px!important}
.main-offset{margin-top:110px}
.flex-center{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch}
.cursor-pointer{cursor:pointer}
.float-right{float:right}
.full-width{width:100%}

/* Responsive table scroll container */
.table-scroll-container{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    margin:0 -16px;
    padding:0 16px
}
.table-scroll-container>.w3-table{min-width:600px}

/* ==========================================================================
   25. BOUTIQUE - Modern Style Components
   ========================================================================== */

/* Variables CSS pour la boutique */
:root{
    --boutique-bleu-fonce:#0a2a43;
    --boutique-bleu:#0f4c75;
    --boutique-accent:#2b6cb0;
    --boutique-orange:#ff8c42;
    --boutique-gris-clair:#f5f7fa;
    --boutique-gris:#e5e5e5
}

/* Section boutique avec fond blanc */
.boutique-section{
    background:white;
    max-width:800px;
    margin:20px auto;
    padding:25px 30px;
    border-radius:12px;
    box-shadow:0 3px 10px rgba(0,0,0,0.08)
}

/* Titre de section */
.boutique-section h3{
    margin-top:0;
    color:var(--boutique-bleu);
    font-size:1.4rem;
    border-bottom:2px solid var(--boutique-gris);
    padding-bottom:10px
}

/* Boîte mise en évidence */
.highlight-box{
    background:var(--boutique-accent);
    color:white;
    padding:15px 20px;
    margin:15px 0;
    border-radius:8px;
    font-weight:bold;
    box-shadow:0 2px 6px rgba(0,0,0,0.1)
}

/* Grille d'options */
.options-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:20px;
    margin-top:20px
}

/* Boîte de prix */
.price-box{
    background:var(--boutique-bleu);
    color:white;
    padding:20px;
    border-radius:10px;
    text-align:center;
    box-shadow:0 2px 6px rgba(0,0,0,0.1);
    transition:transform 0.2s ease;
    display:flex;
    flex-direction:column
}
.price-box:hover{
    transform:translateY(-3px)
}
.price-box h4{
    margin:0 0 10px 0;
    font-size:1.1rem
}
.price-box ul{
    text-align:left;
    padding-left:20px;
    margin:10px 0
}
.price-box li{
    margin:5px 0;
    font-size:0.9rem
}

/* Prix mis en évidence */
.price-display{
    font-size:1.8rem;
    color:var(--boutique-orange);
    font-weight:bold;
    margin:10px 0
}
.price-small{
    font-size:1rem;
    opacity:0.8
}

/* Bouton principal boutique */
.btn-boutique{
    background:var(--boutique-orange);
    color:white;
    padding:12px 24px;
    border:none;
    border-radius:8px;
    font-size:1rem;
    font-weight:bold;
    cursor:pointer;
    transition:background 0.2s,transform 0.1s;
    display:inline-block;
    text-decoration:none;
    margin-top:auto
}
.btn-boutique:hover{
    background:#e6762f;
    transform:scale(1.03);
    color:white
}

/* Grille d'avantages */
.avantages-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:15px;
    margin-top:20px
}
.avantage-item{
    background:var(--boutique-gris-clair);
    padding:15px;
    border-radius:10px;
    border:1px solid var(--boutique-gris);
    box-shadow:0 1px 4px rgba(0,0,0,0.05);
    transition:transform 0.15s ease
}
.avantage-item:hover{
    transform:translateY(-4px)
}
.avantage-item h4{
    margin:0 0 8px 0;
    color:var(--boutique-bleu);
    font-size:1rem
}
.avantage-item p{
    margin:0;
    font-size:0.9rem;
    color:#555
}

/* Formulaire boutique inline */
.boutique-form-inline{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:15px;
    margin:15px 0
}
.boutique-form-inline select{
    flex:1;
    min-width:200px;
    padding:10px 15px;
    border:2px solid var(--boutique-gris);
    border-radius:8px;
    font-size:1rem;
    background:white
}
.boutique-form-inline select:focus{
    border-color:var(--boutique-accent);
    outline:none
}

/* Montant libre */
.montant-libre-input{
    width:100px;
    padding:10px;
    border:2px solid var(--boutique-gris);
    border-radius:8px;
    font-size:1rem;
    text-align:center
}
.montant-libre-input:focus{
    border-color:var(--boutique-accent);
    outline:none
}

/* Promo header (boutiquePromoMembre) */
.promo-header{
    background:var(--boutique-bleu-fonce);
    color:white;
    padding:40px 20px;
    text-align:center;
    border-radius:12px 12px 0 0;
    margin:-25px -30px 25px -30px
}
.promo-header h2{
    margin:0;
    font-size:2rem;
    letter-spacing:1px;
    color:white
}
.promo-header .slogan{
    margin-top:10px;
    font-size:1.1rem;
    opacity:0.9
}

/* Rabais/ancien prix */
.rabais{
    color:var(--boutique-orange);
    font-weight:bold;
    margin-left:6px
}
.ancien-prix{
    text-decoration:line-through;
    opacity:0.7
}

/* ==========================================================================
   26. UNIFIED NAVIGATION SYSTEM
   ========================================================================== */

/* Fix nav bar layout - use flexbox for proper alignment */
nav.w3-bar{
    overflow:visible;
    display:flex;
    flex-wrap:nowrap;
    align-items:center
}
nav.w3-bar>.w3-bar-item{float:none}

/* Screen reader only - for accessibility */
.sr-only{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0
}

/* Mobile text labels (hidden on desktop) */
.nav-text-mobile{display:none}

/* Burger button styling */
.nav-burger{
    display:block;
    font-size:20px;
    padding:8px 16px;
    background:transparent;
    border:none;
    color:inherit;
    cursor:pointer
}

/* Navigation links */
.nav-link{
    display:block;
    padding:8px 16px;
    color:inherit;
    text-decoration:none;
    cursor:pointer
}
.nav-link:hover{background-color:#ccc;color:#000}

/* Main navigation menu container */
.nav-menu{
    display:inline-flex;
    flex-wrap:nowrap;
    align-items:center;
    vertical-align:middle
}

/* Navigation dropdown container */
.nav-dropdown{
    position:relative;
    display:inline-block
}

/* Dropdown button styling */
.nav-dropdown-btn{
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:transparent;
    border:none;
    color:inherit;
    cursor:pointer;
    padding:8px 16px;
    white-space:nowrap
}

/* Dropdown content panel */
.nav-dropdown-content{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    min-width:200px;
    background-color:#fff;
    color:#000;
    z-index:100;
    box-shadow:0 4px 10px rgba(0,0,0,0.2)
}

/* Show dropdown content when open */
.nav-dropdown.open>.nav-dropdown-content{display:block}

/* Desktop/Tablet: hover behavior (only on devices that support hover) */
@media (hover:hover) and (min-width:901px){
    .nav-dropdown:hover>.nav-dropdown-content{display:block}
    .nav-dropdown:hover>.nav-dropdown-btn{background-color:#ccc;color:#000}
}

/* Focus styles for accessibility */
.nav-dropdown-btn:focus{
    outline:2px solid #fff;
    outline-offset:-2px
}
.nav-dropdown-content a:focus{
    background-color:#e0e0e0;
    outline:none
}

/* Dropdown links styling */
.nav-dropdown-content a{
    display:block;
    padding:10px 16px;
    text-decoration:none;
    color:#000;
    transition:background-color 0.2s ease
}
.nav-dropdown-content a:hover{background-color:#f1f1f1}

/* ==========================================================================
   26.1 MOBILE NAVIGATION (max-width: 900px)
   ========================================================================== */
@media (max-width:900px){
    /* Hide menu by default on mobile */
    .nav-menu{
        display:none;
        flex-direction:column;
        width:100%;
        background-color:#f1f1f1;
        position:absolute;
        top:100%;
        left:0;
        z-index:99;
        max-height:0;
        overflow:hidden;
        transition:max-height 0.3s ease-out
    }

    /* Show menu when open */
    .nav-menu.open{
        display:flex;
        max-height:100vh;
        overflow-y:auto
    }

    /* Mobile menu items - full width */
    .nav-menu>.nav-link,
    .nav-dropdown{
        width:100%;
        display:block
    }

    .nav-menu>.nav-link{
        color:#000;
        padding:12px 16px;
        border-bottom:1px solid #ddd
    }
    .nav-menu>.nav-link:hover{background-color:#e0e0e0}

    /* Show text labels on mobile */
    .nav-text-mobile{
        display:inline;
        margin-left:10px
    }

    /* Icon width on mobile */
    .nav-menu>.nav-link .fa,
    .nav-menu>.nav-link .fa-solid,
    .nav-menu>.nav-link .fa-brands{
        width:20px;
        text-align:center
    }

    /* Dropdown button full width on mobile */
    .nav-dropdown-btn{
        width:100%;
        text-align:left;
        padding:12px 16px;
        color:#000;
        background-color:#f1f1f1;
        border-bottom:1px solid #ddd
    }

    /* Dropdown content positioning on mobile */
    .nav-dropdown-content{
        position:static;
        width:100%;
        box-shadow:none;
        background-color:#e8e8e8
    }

    /* Indent submenu items on mobile */
    .nav-dropdown-content a{
        padding-left:32px;
        border-bottom:1px solid #ddd
    }

    /* Caret rotation when open */
    .nav-dropdown.open>.nav-dropdown-btn .fa-caret-down{
        transform:rotate(180deg)
    }
    .nav-dropdown-btn .fa-caret-down{
        float:right;
        transition:transform 0.2s ease
    }
}

/* ==========================================================================
   26.2 TABLET NAVIGATION (901px - 992px)
   ========================================================================== */
@media (min-width:901px) and (max-width:992px){
    /* Ensure dropdowns don't overflow on tablets */
    .nav-dropdown-content{min-width:180px}

    /* Right-align last dropdown if it overflows */
    .nav-dropdown:last-child .nav-dropdown-content{
        right:0;
        left:auto
    }
}

/* ==========================================================================
   26.3 DESKTOP NAVIGATION (min-width: 901px)
   ========================================================================== */
@media (min-width:901px){
    .nav-menu{display:inline-flex}
    .nav-burger{display:none}
}