/*
Theme Name: FASO 3D (enfant OceanWP)
Theme URI: https://faso3d.com
Description: Thème enfant d'OceanWP appliquant l'identité visuelle de la maquette FASO 3D : palette terracotta/crème, typographies Instrument Sans + IBM Plex Mono, boutons, cartes produits, formulaires et footer restylés. Ne touche pas à la structure WooCommerce (panier, checkout, compte, paiement) : uniquement l'habillage visuel.
Author: FASO 3D
Template: oceanwp
Version: 1.9.35
Text Domain: faso3d-child
*/

/* ==========================================================================
   0. Corrections liées au changement de thème (réglages non transférés)
   ========================================================================== */

/* Le titre de page natif OceanWP ("ocean_page_title_display") était
   désactivé partout sur le site avec l'ancien thème (réglage propre au
   thème actif, non transféré ici) — confirmé dans la base de données
   (theme_mods_oceanwp). Correctif : le fil d'Ariane (.site-breadcrumbs) est
   en réalité imbriqué dans .page-header, donc le masquer entièrement
   masquait aussi le fil d'Ariane du mockup. On garde .page-header visible
   mais dépouillé de son bandeau gris natif, on masque uniquement le H1, et
   on restyle le fil d'Ariane pour qu'il reste discret comme dans le mockup. */
.page-header{
  background:transparent !important;
  padding:16px 0 0 !important;
}
.page-header-title{
  display:none !important;
}
.site-breadcrumbs{
  position:static !important;
  text-align:left !important;
  margin:0 !important;
  font-family:'Plex Mono', monospace;
  font-size:11px !important;
  text-transform:uppercase;
  letter-spacing:0.04em;
}
.site-breadcrumbs,
.site-breadcrumbs a,
.site-breadcrumbs .trail-end,
.site-breadcrumbs .trail-item{
  color:var(--f3-muted) !important;
}
.site-breadcrumbs a{
  color:var(--f3-clay-deep) !important;
}
.site-breadcrumbs a:hover{
  text-decoration:underline;
}
/* Sur l'accueil, .page-header ne contient jamais de fil d'Ariane (RankMath
   n'affiche pas "Accueil > Accueil") - seulement le H1 masque ci-dessus.
   Son padding-top:16px se voyait donc comme une ligne/bande blanche vide
   entre la topbar et le hero, a travers le header transparent. On masque
   .page-header entierement sur la home, ou il n'a jamais rien d'utile a
   afficher. */
body.home .page-header{
  display:none !important;
}

/* La colonne "barre latérale" (aside#right-sidebar) est vide (aucun widget)
   mais réserve quand même sa largeur, ce qui écrase le contenu principal.
   On l'efface et on laisse le contenu prendre toute la largeur. */
body.has-sidebar #content,
body.has-sidebar .content-area,
body.has-sidebar #primary{
  width:100% !important;
  float:none !important;
}
aside#right-sidebar{
  display:none !important;
}

/* La barre "Copyright - WordPress Theme by OceanWP" en bas de page était
   désactivée ("ocean_footer_bottom") avec l'ancien thème — même cause que
   le titre de page ci-dessus. Votre propre bloc footer (logo, liens,
   réseaux sociaux) reste inchangé, seule cette barre générique est cachée. */
#footer-bottom{
  display:none !important;
}

/* ==========================================================================
   1. Polices
   ========================================================================== */
@font-face{
  font-family:'Instrument Sans';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('assets/fonts/instrumentsans.woff2') format('woff2');
}
@font-face{
  font-family:'Plex Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('assets/fonts/plexmono-400.woff2') format('woff2');
}
@font-face{
  font-family:'Plex Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('assets/fonts/plexmono-500.woff2') format('woff2');
}

/* ==========================================================================
   2. Palette / tokens
   ========================================================================== */
:root{
  --f3-paper:#FFFFFF;
  --f3-cream:#FAF7F1;
  --f3-ink:#18150F;
  --f3-ink-soft:#4E483C;
  --f3-muted:#8D8474;
  --f3-line:#E7E0D2;
  --f3-line-strong:#D7CCB6;
  --f3-clay:#BE5F2A;
  --f3-clay-deep:#8C4419;
  --f3-clay-tint:#F5E4D3;
  --f3-radius:2px;
}

/* ==========================================================================
   3. Typographie générale
   ========================================================================== */
body,
.woocommerce,
#content,
.entry-content,
.elementor-widget-container{
  font-family:'Instrument Sans', sans-serif !important;
  color:var(--f3-ink-soft);
}
h1,h2,h3,h4,h5,h6,
.elementor-heading-title,
.woocommerce-loop-product__title,
.product_title{
  font-family:'Instrument Sans', sans-serif !important;
  font-weight:600;
  letter-spacing:-0.01em;
  color:var(--f3-ink) !important;
}
body{ background:var(--f3-paper); }
a{ color:var(--f3-clay-deep); text-decoration:none; }
a:hover{ color:var(--f3-ink); }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
#site-logo a, #site-logo .site-logo-text{ color:var(--f3-ink) !important; }
.mono,
.eyebrow{
  font-family:'Plex Mono', monospace;
  font-variant-numeric:tabular-nums;
}

/* ==========================================================================
   4. Header
   ========================================================================== */
#site-header,
#site-header-inner{
  background:var(--f3-paper);
}
#site-header{
  border-bottom:1px solid var(--f3-line);
}
#site-logo .site-logo-text{
  font-family:'Instrument Sans', sans-serif;
  font-weight:700;
  font-size:22px;
  letter-spacing:-0.01em;
  color:var(--f3-ink);
  display:block;
  line-height:1.1 !important;
}
/* Accent "3D." en terracotta dans le logo "FASO 3D." (voir
   faso3d-custom.js pour le decoupage du texte en span). Duplique le
   selecteur avec le contexte "hero transparent" (section 12 plus bas) pour
   que l'accent reste terracotta meme quand le reste du logo passe en blanc
   au-dessus de la photo du hero - sinon la regle plus specifique de la
   section 12 l'emporterait et l'accent redeviendrait blanc lui aussi. */
body.home:not(.f3-header-filled) #site-logo .site-logo-text .f3-logo-accent,
#site-logo .site-logo-text .f3-logo-accent{
  color:var(--f3-clay-deep) !important;
}
#site-navigation-wrap{
  background:var(--f3-paper);
  border-top:1px solid var(--f3-line);
}
#site-navigation .main-menu > li > a.menu-link{
  font-family:'Plex Mono', monospace;
  font-size:12.5px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--f3-ink-soft);
}
#site-navigation .main-menu > li > a.menu-link:hover,
#site-navigation .main-menu > li.current-menu-item > a.menu-link{
  color:var(--f3-clay-deep);
}
#site-header input[type="search"],
#site-header input[type="text"]{
  font-family:'Instrument Sans', sans-serif;
  border-color:var(--f3-line-strong);
  border-radius:var(--f3-radius);
}
#site-header .icon-handbag,
#site-header .icon-magnifier,
#site-header .icon-user{
  color:var(--f3-ink);
}
/* Le plugin "WooCommerce Menu Cart" applique son propre font-weight:600 a
   son icone (.icon-handbag), plus epaisse que les icones recherche/compte
   (font-weight:400 natif d'OceanWP) - meme police (simple-line-icons),
   meme taille, mais un trait visiblement plus gras. On aligne. */
#site-header .icon-handbag{
  font-weight:400;
}
/* Le survol terracotta du panier venait par heritage depuis la regle native
   d'OceanWP sur l'ancre .wcmenucart:hover (aucune couleur propre sur l'icone
   avant) : des qu'on donne a .icon-handbag sa propre couleur ci-dessus (pour
   corriger son blanc), une couleur posee directement sur un element bat
   toujours une couleur heritee d'un ancetre, quelle que soit la specificite
   de la regle parente - le survol s'est donc perdu. On le recree
   explicitement, comme pour la recherche juste en dessous. */
#site-header .wcmenucart:hover,
#site-header .wcmenucart:hover .icon-handbag{
  color:var(--f3-clay-deep) !important;
}
/* La recherche n'a pas de survol terracotta natif comme le compte (recu par
   heritage depuis le style d'icone natif d'OceanWP) - elle retombe sur le
   survol generique noir (a:hover, section 3). On aligne son survol sur les
   deux autres icones pour un comportement de header coherent. */
#site-header .site-search-toggle:hover,
#site-header .site-search-toggle:hover .icon-magnifier{
  color:var(--f3-clay-deep) !important;
}

/* ==========================================================================
   5. Boutons (WooCommerce + Elementor + génériques)
   ========================================================================== */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-cart .checkout-button,
.elementor-button,
a.button,
.error-btn,
button:not(.owp-quick-view):not(.search-submit){
  font-family:'Plex Mono', monospace;
  font-size:12.5px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  border-radius:var(--f3-radius);
  background:var(--f3-ink) !important;
  color:var(--f3-paper) !important;
  border:1px solid var(--f3-ink) !important;
  padding:14px 28px;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce-cart .checkout-button:hover,
.elementor-button:hover,
a.button:hover,
.error-btn:hover,
button:not(.owp-quick-view):not(.search-submit):hover{
  background:var(--f3-clay-deep) !important;
  border-color:var(--f3-clay-deep) !important;
  color:var(--f3-paper) !important;
}
.woocommerce a.button.alt,
.elementor-button.elementor-button-link{
  background:transparent !important;
  color:var(--f3-ink) !important;
  border:1px solid var(--f3-ink) !important;
}

.woocommerce .woocommerce-Price-amount.amount{
  color:var(--f3-clay-deep) !important;
  font-family:'Plex Mono', monospace;
}

/* ==========================================================================
   6. Grille boutique / cartes produits
   ========================================================================== */
.woocommerce ul.products li.product .product-inner{
  border:1px solid var(--f3-line);
  border-radius:var(--f3-radius);
  transition:border-color .15s ease;
}
.woocommerce ul.products li.product .product-inner:hover{
  border-color:var(--f3-line-strong);
}
.woocommerce ul.products li.product .price{
  font-family:'Plex Mono', monospace;
  color:var(--f3-clay-deep);
}
.woocommerce span.onsale{
  background:var(--f3-clay);
  font-family:'Plex Mono', monospace;
  text-transform:uppercase;
  font-size:11px;
  letter-spacing:0.04em;
  border-radius:var(--f3-radius);
}

/* ==========================================================================
   7. Fiche produit
   ========================================================================== */
.single-product .summary.entry-summary .price{
  font-family:'Plex Mono', monospace;
  color:var(--f3-clay-deep);
  font-size:22px;
}
.single-product .summary.entry-summary h1.product_title{
  font-size:clamp(24px,3vw,32px);
}
.woocommerce-tabs ul.tabs li a{
  font-family:'Plex Mono', monospace;
  font-size:12px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--f3-ink-soft);
}
/* WooCommerce force l'onglet actif en bleu (couleur par defaut du coeur du
   plugin) via une regle tres specifique ; on la bat avec !important. */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{
  color:var(--f3-clay-deep) !important;
}

/* ==========================================================================
   8. Panier / commande / compte
   ========================================================================== */
.woocommerce table.shop_table{
  border-color:var(--f3-line);
  font-family:'Instrument Sans', sans-serif;
}
.woocommerce table.shop_table th{
  font-family:'Plex Mono', monospace;
  text-transform:uppercase;
  font-size:11px;
  letter-spacing:0.06em;
  color:var(--f3-muted);
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea,
.woocommerce-MyAccount-content input.input-text{
  border-color:var(--f3-line-strong);
  border-radius:var(--f3-radius);
  font-family:'Instrument Sans', sans-serif;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce-MyAccount-content input.input-text:focus{
  border-color:var(--f3-ink);
  outline:none;
}
.woocommerce-message,
.woocommerce-info,
.woocommerce-noreviews{
  border-top-color:var(--f3-clay);
}
.woocommerce-message::before,
.woocommerce-info::before{
  color:var(--f3-clay);
}

/* ==========================================================================
   9. Footer
   ========================================================================== */
/* Le vrai footer (<footer class="unicruze-footer">) est imbrique dans la
   1ere des 4 colonnes de widgets d'OceanWP (span_1_of_4/col-1) ; les 3
   autres colonnes sont vides, ce qui laissait 75% de blanc a droite. On
   etend la 1ere colonne a 100% et on masque les colonnes vides. */
.footer-widgets-inner.container{
  width:100% !important;
  max-width:none !important;
  padding-left:0 !important;
  padding-right:0 !important;
}
.footer-box.col-1{
  width:100% !important;
  float:none !important;
  padding-left:0 !important;
  padding-right:0 !important;
}
.footer-box.col-2,
.footer-box.col-3,
.footer-box.col-4{
  display:none !important;
}
/* OceanWP force les liens de pied de page en blanc via une regle avec ID
   (#footer-widgets .footer-box a), pensee pour un footer sombre - invisible
   sur notre fond clair. On force nos propres couleurs avec !important pour
   gagner face a cette regle plus specifique. */
footer.unicruze-footer,
footer.unicruze-footer a{
  font-family:'Instrument Sans', sans-serif;
  color:var(--f3-ink-soft) !important;
}
/* Structure identique au mockup (section footer.site > .wrap > .footer-grid
   + .footer-bottom). */
footer.unicruze-footer{
  padding:36px 0 20px;
  border-top:1px solid var(--f3-line);
}
footer.unicruze-footer .wrap{
  max-width:1180px;
  margin:0 auto;
  padding:0 clamp(20px,4vw,56px);
}
.footer-grid{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:24px 96px;
  padding-bottom:24px;
}
.footer-grid .brand-col{
  max-width:280px;
  text-align:center;
}
.footer-grid .brand-col img{
  height:150px;
  width:auto;
  margin:0 auto 8px;
  display:block;
}
.footer-grid .brand-col p{
  font-size:13px;
  max-width:32ch;
  margin-left:auto;
  margin-right:auto;
}
.footer-links{
  display:flex;
  gap:56px;
  flex-wrap:wrap;
}
.footer-col{
  min-width:128px;
}
.footer-col h4{
  font-family:'Plex Mono', monospace;
  font-size:10.5px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--f3-muted) !important;
  margin-bottom:18px;
}
.footer-col ul{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.footer-col a{
  text-decoration:none;
  font-size:13.5px;
  color:var(--f3-ink-soft) !important;
}
.footer-col a:hover{
  color:var(--f3-clay-deep) !important;
}
.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:16px;
  border-top:1px solid var(--f3-line);
  flex-wrap:wrap;
  gap:12px;
}
.footer-bottom span{
  font-family:'Plex Mono', monospace;
  font-size:11px;
  color:var(--f3-muted);
}
.pay-row{
  display:flex;
  align-items:center;
  gap:14px;
}
.pay-row i{
  font-size:22px;
  line-height:1;
  color:var(--f3-muted);
}
.social-row{
  display:flex;
  gap:12px;
  margin-top:0;
}
.social-row a{
  width:32px;
  height:32px;
  border:1px solid var(--f3-line);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--f3-ink) !important;
  text-decoration:none;
  transition:border-color .15s, color .15s;
}
.social-row a:hover{
  border-color:var(--f3-ink);
  color:var(--f3-clay-deep) !important;
}
.social-row svg{
  width:15px;
  height:15px;
}

/* ==========================================================================
   10. Mise en page existante du site (header sticky, tagline, menu,
       marges, footer, correctif checkout, dropdown "Mon compte")
       — reprise telle quelle depuis le CSS additionnel précédemment
       utilisé avec OceanWP, pour que la mise en page reste identique.
   ========================================================================== */

/* ===== VERSION MOBILE & TABLETTE ===== */
@media (max-width: 768px) {
    /* Header mobile compact */


    /* Positionnement logo */
    #site-logo {
        margin: 15px auto 10px !important;
        float: none !important;
        text-align: center;
    }

    /* Désactiver l'animation et la position fixe sur mobile */
    #top-bar, #site-header {
        position: relative !important;
        top: auto !important;
        transform: none !important;
    }

    body {
        padding-top: 0 !important;
    }


}

/* ===== VERSION DESKTOP SEULEMENT ===== */
@media (min-width: 769px) {
    /* Structure header */
    #site-header-inner {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    /* Positionnement logo */
    #site-logo {
        margin: 50px auto -0px !important;
        float: none !important;
        text-align: center;
    }




/* ===== SLOGAN DU HEADER =====
   Remplace l'ancien pseudo-element CSS statique (#site-logo a:after,
   contenu fige par langue via html[lang="en-GB"]) par un vrai element DOM
   (.f3-header-slogan, injecte en JS - voir faso3d-custom.js, section
   "SLOGAN ROTATIF") : un pseudo-element ne peut pas etre mis a jour en JS,
   ce qui empechait toute rotation/fondu entre plusieurs phrases. */
@media (min-width: 769px) {
    .f3-header-slogan {
        display: block;
        text-align: center;
        font-family: 'Montserrat', sans-serif;
        font-size: 15px;
        color: #666666;
        margin: -5px auto 15px;
        font-style: italic;
        letter-spacing: 0.5px;
        line-height: 2.4;
        font-weight: 400;
        max-width: 600px;
        padding: 0 20px;
        transition: opacity 0.5s ease;
    }
    /* Masquer le slogan par défaut d'OceanWP */
    .site-description {
        display: none !important;
    }
}

/* Fondu enchaine du slogan rotatif (header et footer) pendant le
   changement de phrase - classe ajoutee/retiree en JS. */
.f3-header-slogan.f3-slogan-fade,
.brand-col p.f3-slogan-fade {
    opacity: 0;
}
.brand-col p {
    transition: opacity 0.5s ease;
}












    /* Centrage menu */
    #site-navigation-wrap {
        width: 100% !important;
        margin: 0 auto !important;
        text-align: center !important;
    }

    #site-navigation-wrap .dropdown-menu {
        display: inline-block !important;
        float: none !important;
    }

    #site-navigation-wrap .dropdown-menu > li {
        display: inline-block !important;
        margin: 0 10px !important;
        float: none !important;
    }



    /* Animation header pour desktop seulement */
    /* Style pour la top bar fixe avec fond blanc */
    #top-bar {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1001;
        transition: transform 0.3s ease-in-out;
        background-color: #ffffff !important;
        box-shadow: 0 2px 1px rgba(0,0,0,0.1);
        border-bottom: 1px solid #eeeeee;
        height: 00px;
    }

    /* Style pour l'en-tête principal fixe avec fond blanc */
    #site-header {
        position: fixed;
        top: 0px; /* Ajusté pour correspondre à la hauteur de la top bar */
        left: 0;
        width: 100%;
        z-index: 1000;
        transition: transform 0.3s ease-in-out;
        background-color: #ffffff !important;
        box-shadow: 0 2px 1px rgba(0, 0, 0, 0.1);
    }

    /* Assurer que le contenu de l'en-tête a aussi un fond blanc */
    #site-header-inner {
        background-color: #ffffff !important;
    }



/* Ligne de séparation entre le header et le contenu - CORRIGÉ */
#site-header:after {
    content: '';
    display: block;
    height: 1px;
    background-color: #eeeeee;
    margin: 0 0 1px 0;
    width: 100%;
}

    /* Classe pour cacher les éléments */
    .header-hidden {
        transform: translateY(-65%);
    }

    /* Compensation pour l'espace des éléments fixes */
    body {
        padding-top: 0px; /* 30px (top bar) + 100px (header) - Ajustez selon vos besoins */
    }

/* Ligne de séparation entre le contenu et le footer - CORRIGÉ */
#footer-widgets::before {
    content: '';
    display: block;
    height: 3px;
    background-color: #eeeeee;
    margin: 0 0 1px 0;
    width: 100%;
}

}

/* ===== REMONTÉE WIDGETS FOOTER ===== */
#footer-widgets {
    margin-top: -45px !important;
    padding-top: 0 !important;
}



/* Supprimer l'espace en haut de la page */
#main {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.container, .elementor-container, .page-content {
    padding-top: 0 !important;
    margin-top: 0 !important;

}

/* Supprimer les espaces spécifiques d'OceanWP */
.entry-content, .type-page, .page {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Correction pour l'en-tête */
#site-header {
    margin-bottom: 0 !important;
}

/* Ajustement pour le contenu principal */
.site-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Si vous utilisez Elementor */
.elementor-section {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.elementor-top-section {
    padding-top: 0 !important;
}

.container, .elementor-container, .page-content {
    max-width: 100% !important;
    padding-left: 2% !important;
    padding-right: 2% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* S'assurer que le contenu principal est bien en dessous */
#main {
    position: relative;
    z-index: 1;
}

/* ===== VERSION ORDINATEUR SEULEMENT ===== */
@media (min-width: 769px) {
    /* Compensation pour le contenu principal - Desktop seulement */
    #main {
        padding-top: 0 !important;
        position: relative;
        z-index: 1;
    }
}

/* ===== VERSION MOBILE & TABLETTE ===== */
@media (max-width: 768px) {
    /* Réinitialiser le padding-top sur mobile */
    #main {
        padding-top: 0 !important;
    }
}




/* Section d'annonces */
.announcement-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f8f8f8;
    padding: 40px 20px;
    margin: 0;
    border-top: 1px solid #eeeeee;
    border-bottom: 1px solid #eeeeee;
}

.announcement-column {
    text-align: center;
    flex: 1;
    padding: 0 20px;
}

.announcement-icon {
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.announcement-column h4 {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
    color: #000000;
}

.announcement-column p {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    color: #666666;
    line-height: 1.5;
    margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .announcement-bar {
        flex-direction: column;
        padding: 30px 15px;
        margin: 40px 0;
    }

    .announcement-column {
        margin-bottom: 30px;
        padding: 0 10px;
    }

    .announcement-column:last-child {
        margin-bottom: 0;
    }

    .announcement-icon {
        font-size: 2rem;
    }
}

/* Icônes Font Awesome */
.announcement-icon i {
    font-size: 2.5rem;
    color: var(--f3-clay-deep);
}

@media (max-width: 768px) {
    .announcement-icon i {
        font-size: 2rem;
    }
}

/* Bandeau défilant */
        .announcement-bar1 {
            background-color: #F8F8F8;
            color: BLACK;
            padding: 10px 0;
            overflow: hidden;
            position: relative;
            width: 100%;
        }

        .announcement-content {
            display: inline-block;
            white-space: nowrap;
            animation: defilement 25s linear infinite;
            padding-left: 100%;
        }

        .announcement-content:hover {
            animation-play-state: paused;
        }

        @keyframes defilement {
            0% { transform: translate(0, 0); }
            100% { transform: translate(-100%, 0); }
        }

/* Correction affichage Colissimo Point Relais dans le récapitulatif */
.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals th {
    display: none;
}
.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals td {
    width: 100% !important;
    display: table-cell !important;
}

/* Cache le texte "MON COMPTE" et affiche une icône bonhomme */
#menu-item-3453 .text-wrap {
  display: none;
}

#menu-item-3453 a.menu-link::before {
  font-family: "simple-line-icons";
  font-weight: 400;
  content: "\e005"; /* icône user (bonhomme) */
  font-size: 13px;
  color: inherit;
}

/* ===== LIEN COMPTE (Mon Compte) — lien direct comme le mockup, plus de
   dropdown au survol (voir section 20 pour le panier, meme logique). ===== */
#footer,
#footer-widgets{
  background:var(--f3-cream);
  border-top:1px solid var(--f3-line);
}

/* ==========================================================================
   11. Realignement du header sur le mockup (logo a gauche, nav a droite,
       barre d'annonces en haut) - remplace la mise en page centree
       heritee de l'ancien style de header (medium-header, desormais
       minimal-header suite au changement de theme).
   ========================================================================== */
#top-bar{
  background-color:var(--f3-ink) !important;
  height:42px !important;
  display:flex !important;
  align-items:center;
  justify-content:center;
  border-bottom:none !important;
  box-shadow:none !important;
}
#top-bar-inner{ width:100%; }
/* La topbar et le header restent tous les deux "position:fixed" en
   permanence pendant un scroll rapide (surtout vers le haut) : Chrome
   "fantomise" parfois ces deux couches fixes l'une sur l'autre (artefact
   de composition, pas un bug de nos regles). On force chacune sur sa
   propre couche GPU pour empecher ce dedoublement visuel. */
#top-bar,
#site-header{
  transform:translateZ(0);
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  will-change:transform;
}
/* Effet de bord : promouvoir la topbar et le header sur des couches GPU
   separees (regle ci-dessus) fait que leurs bords sont arrondis au pixel
   independamment l'un de l'autre, ce qui laisse parfois une ligne blanche
   d'un pixel entre les deux (fond de page qui transparait). On prolonge
   le fond de la topbar d'1px vers le bas pour combler cet interstice sans
   toucher au positionnement (top:) dont dependent d'autres regles). */
#top-bar{
  box-shadow:0 1px 0 var(--f3-ink) !important;
}
.f3-announce-list{ position:relative; height:16px; width:100%; text-align:center; }
.f3-announce-list div{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--f3-paper); font-family:'Plex Mono', monospace; font-size:11.5px; letter-spacing:0.04em; text-transform:uppercase;
  opacity:0; transition:opacity .5s ease;
}
.f3-announce-list div.is-active{ opacity:1; }
@media (min-width:769px){
  #site-header{ top:42px !important; }
  body.admin-bar #top-bar{ top:32px !important; }
  body.admin-bar #site-header{ top:74px !important; }
}
@media (max-width:768px){
  #top-bar{ position:relative !important; height:auto !important; padding:8px 0; }
  .f3-announce-list{ height:14px; }
  .f3-announce-list div{ font-size:10px; padding:0 30px; }
}
#site-header-inner{
  flex-direction:row !important;
  justify-content:space-between !important;
  flex-wrap:wrap;
  margin-left:auto !important;
  margin-right:auto !important;
  float:none !important;
}
#site-logo{
  margin:0 !important;
  text-align:left !important;
}
#site-logo-inner{
  display:flex !important;
  align-items:center !important;
  gap:10px;
}
/* Regroupe le lien du logo et le slogan rotatif dans une colonne, pour que
   le slogan colle directement sous le texte "FASO 3D." plutot que sous
   toute la rangee (icone comprise, plus haute que le texte seul - voir
   faso3d-custom.js, section "SLOGAN ROTATIF"). */
.f3-logo-textcol{
  display:flex;
  flex-direction:column;
}
.f3-logo-icon{
  height:40px;
  width:auto;
  display:block;
  flex-shrink:0;
  filter:none;
  transition:filter .3s ease;
}
body.home:not(.f3-header-filled) .f3-logo-icon{
  filter:brightness(0) invert(1);
}
.f3-header-slogan{
  text-align:left !important;
  margin:1px 0 0 !important;
  padding:0 !important;
  font-size:11px !important;
  font-style:normal !important;
  font-family:'Plex Mono', monospace !important;
  line-height:1.2 !important;
  max-width:none !important;
  letter-spacing:0.03em !important;
}
#site-navigation-wrap{
  width:auto !important;
  margin:0 0 0 auto !important;
  text-align:right !important;
  float:none !important;
}
#site-logo{ float:none !important; }
#site-navigation-wrap .dropdown-menu{
  justify-content:flex-end !important;
}
@media (min-width:1025px){
  .oceanwp-mobile-menu-icon{ display:none !important; }
}
@media (max-width:1024px){
  #site-header-inner{ flex-direction:column !important; }
  #site-logo{ text-align:center !important; }
  #site-logo-inner{ justify-content:center !important; }
  .f3-header-slogan{ text-align:center !important; }
  #site-navigation-wrap{ text-align:center !important; }
}

/* ==========================================================================
   12. Header transparent sur le hero de l'accueil (comme le mockup) -
       devient blanc/rempli au scroll ou sur les autres pages.
   ========================================================================== */
body.home:not(.f3-header-filled) #site-header,
body.home:not(.f3-header-filled) #site-header-inner,
body.home:not(.f3-header-filled) #site-navigation-wrap{
  background-color:transparent !important;
  border-bottom-color:transparent !important;
  box-shadow:none !important;
}
body.home #top-bar{
  background-color:var(--f3-ink) !important;
}
/* Ligne heritee (#eeeeee) affichee uniquement par cette regle etait cachee
   seulement en etat "transparent" : elle revenait des que le header devenait
   rempli au scroll. Le border-bottom de la section 4 (bonne couleur de
   marque) fait deja office de separation, donc on retire cette ligne
   partout, sans condition d'etat. */
#site-header:after{
  display:none !important;
}
body.home:not(.f3-header-filled) #site-navigation-wrap{
  border-top-color:transparent !important;
}
body.home:not(.f3-header-filled) #site-logo .site-logo-text,
body.home:not(.f3-header-filled) .f3-header-slogan,
body.home:not(.f3-header-filled) #site-navigation .main-menu > li > a.menu-link,
body.home:not(.f3-header-filled) #site-header .icon-handbag,
body.home:not(.f3-header-filled) #site-header .icon-magnifier,
body.home:not(.f3-header-filled) #site-header .icon-user{
  color:var(--f3-paper) !important;
}
/* Le blanc ci-dessus est en !important, donc bat n'importe quelle regle de
   survol sans !important - le survol devient invisible tant que le header
   reste transparent (avant scroll sur l'accueil). On recree le survol
   terracotta ici, avec la meme priorite, pour que le comportement soit
   identique a celui du header rempli (voir plus haut : couleur native
   d'OceanWP heritee pour compte/panier, regle dediee pour la recherche). */
body.home:not(.f3-header-filled) #site-navigation .main-menu > li > a.menu-link:hover,
body.home:not(.f3-header-filled) #site-header .wcmenucart:hover,
body.home:not(.f3-header-filled) #site-header .wcmenucart:hover .icon-handbag,
body.home:not(.f3-header-filled) #site-header .site-search-toggle:hover,
body.home:not(.f3-header-filled) #site-header .site-search-toggle:hover .icon-magnifier{
  color:var(--f3-clay-deep) !important;
}
/* Le compte est un cas particulier : son texte est cache (.text-wrap) et
   seule l'icone (::before, couleur "inherit" depuis l'ancre) est visible.
   La regle ci-dessus fait bien passer l'ancre elle-meme en terracotta au
   survol, mais l'icone ne suit pas - on force donc directement le
   pseudo-element au survol, sans dependre de l'heritage. */
body.home:not(.f3-header-filled) #menu-item-3453 a.menu-link:hover::before{
  color:var(--f3-clay-deep) !important;
}
body.home #site-header{
  transition:background-color .3s ease, border-color .3s ease;
  z-index:999;
}
body.home #top-bar{ z-index:1000; }
@media (min-width:769px){
  body.home #main{
    padding-top:0 !important;
    margin-top:0 !important;
  }
  /* L'ancienne regle "body{padding-top:0!important}" (section historique plus haut)
     ecrase la valeur que le JS calcule dynamiquement pour compenser la barre
     d'annonces fixe. On la reprend ici avec une specificite plus forte
     (body.home > body) pour que le hero commence bien sous l'annonce, sans
     dependre d'une course avec le JS. */
  body.home{
    padding-top:42px !important;
  }
}

/* ==========================================================================
   13. Hero pleine largeur (comme le mockup) - la section Elementor est
       "stretched" via un calcul JS (marge negative ajoutee au chargement),
       ce qui cause un flash de largeur reduite (1200px, le conteneur
       .container standard) le temps que ce script s'execute. On force le
       plein ecran en CSS pur (astuce 100vw), independant du JS, donc
       correct des le premier rendu.
   ========================================================================== */
#content-wrap:has(.f3-hero),
#primary:has(.f3-hero),
#content:has(.f3-hero){
  max-width:none !important;
  width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;
}
.elementor-section:has(.f3-hero){
  width:100% !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
}
.elementor-container:has(.f3-hero),
.elementor-widget-wrap:has(.f3-hero),
.elementor-column:has(.f3-hero){
  padding-left:0 !important;
  padding-right:0 !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
  max-width:none !important;
}
.f3-hero{ width:100%; display:block; }

/* Meme souci que le hero, mais pour la bande de reassurance (icones +
   texte sur fond creme, section .trust) : la section Elementor elle-meme
   est deja pleine largeur (heritee du fix #content-wrap ci-dessus), mais
   le conteneur/colonne interne gardait ~40px de padding de chaque cote,
   empechant le fond creme de toucher les bords. */
.elementor-container:has(.trust),
.elementor-widget-wrap:has(.trust),
.elementor-column:has(.trust){
  padding-left:0 !important;
  padding-right:0 !important;
  max-width:none !important;
}

/* ==========================================================================
   14. Correction generale : les conteneurs .container du site ont perdu
       leur centrage automatique (meme cause que le header plus tot),
       laissant une colonne vide a droite un peu partout. On restaure
       le centrage partout, sauf a l'interieur du hero (deja etire).
   ========================================================================== */
.container:not(.f3-hero .container){
  margin-left:auto !important;
  margin-right:auto !important;
  float:none !important;
}

/* ==========================================================================
   16. Newsletter (bande d'inscription e-mail, shortcode "unicruze") -
       meme souci de largeur que le hero/trust (padding du conteneur
       Elementor + max-width:1200px propre a la section), et le shortcode
       impose ses propres styles (police Montserrat, gris generiques,
       ancienne couleur doree #D8995F sur le lien de la politique de
       confidentialite) qui ne suivent pas la charte du site.
   ========================================================================== */
.elementor-container:has(.email-subscription),
.elementor-widget-wrap:has(.email-subscription),
.elementor-column:has(.email-subscription){
  padding-left:0 !important;
  padding-right:0 !important;
  max-width:none !important;
}
.email-subscription{
  max-width:none !important;
  width:100% !important;
  background:var(--f3-cream) !important;
  border-top:1px solid var(--f3-line) !important;
  border-radius:0 !important;
  margin-top:0 !important;
  margin-bottom:0 !important;
  padding-top:40px !important;
  padding-bottom:24px !important;
}

/* Le bouton "Vue rapide" d'OceanWP appelle l'action AJAX
   oceanwp_product_quick_view, qui renvoie la page produit entière au lieu
   du fragment JSON attendu (bug côté plugin OceanWP/Ocean Extra, hors de
   notre thème enfant) : la modale affiche juste "undefined". On masque le
   bouton en attendant un correctif d'OceanWP. */
.owp-quick-view{
  display:none !important;
}
.email-title,
.email-description,
.email-form{
  max-width:520px;
  margin-left:auto !important;
  margin-right:auto !important;
}
.email-description{
  font-family:'Instrument Sans', sans-serif !important;
  color:var(--f3-ink-soft) !important;
  font-size:14.5px;
}
.email-input{
  font-family:'Instrument Sans', sans-serif !important;
  border-color:var(--f3-line-strong) !important;
  border-radius:var(--f3-radius) !important;
  background:var(--f3-paper) !important;
}
.email-input:focus{
  outline:none;
  border-color:var(--f3-ink) !important;
}
.email-submit{
  border-radius:var(--f3-radius) !important;
}
.consent-label{
  font-family:'Instrument Sans', sans-serif !important;
  color:var(--f3-ink-soft) !important;
}
.consent-label a{
  color:var(--f3-clay-deep) !important;
}

/* ==========================================================================
   17. Pages légales (CGV / Confidentialité / Mentions légales) - contenu
       injecté via un unique widget HTML Elementor (remplace des dizaines de
       petites sections d'origine, une par paragraphe, qui faisaient ramer
       l'éditeur Elementor).
   ========================================================================== */
.f3-legal-page{
  max-width:820px;
  margin:0 auto;
  padding:48px 24px 80px;
}
.f3-legal-head{
  margin-bottom:32px;
  border-bottom:1px solid var(--f3-line);
  padding-bottom:24px;
}
.f3-legal-eyebrow{
  font-family:'Plex Mono', monospace;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--f3-clay-deep);
  margin:0 0 8px;
}
.f3-legal-head h1{
  font-family:'Instrument Sans', sans-serif;
  font-weight:600;
  font-size:32px;
  margin:0 0 8px;
  color:var(--f3-ink);
}
.f3-legal-date{
  font-family:'Plex Mono', monospace;
  font-size:12px;
  color:var(--f3-muted);
  margin:0;
}
.f3-legal-section{
  margin-bottom:28px;
}
.f3-legal-section h3{
  font-family:'Instrument Sans', sans-serif;
  font-weight:600;
  font-size:17px;
  margin:0 0 10px;
  color:var(--f3-ink);
}
.f3-legal-section p{
  font-size:14.5px;
  line-height:1.7;
  color:var(--f3-ink-soft);
  margin:0 0 12px;
}
.f3-legal-section p:last-child{
  margin-bottom:0;
}
.f3-legal-section a{
  color:var(--f3-clay-deep);
  text-decoration:underline;
}

/* ==========================================================================
   18. Pastille du panier (icone panier du header) - le plugin "WooCommerce
       Menu Cart" applique son bleu par defaut (#13AFF0), le meme reliquat
       deja corrige sur l'onglet actif de la fiche produit. On le remplace
       par le terracotta de la charte.
   ========================================================================== */
.wcmenucart-details.count{
  background-color:var(--f3-clay-deep) !important;
}

/* ==========================================================================
   19. Couleur d'accentuation native du navigateur (cases a cocher, boutons
       radio, curseurs de plage - ex. choix du mode de livraison au panier)
       - bleu systeme par defaut (accent-color:auto), jamais couvert par les
       styles WooCommerce/OceanWP consultes plus haut. Alignee sur la charte
       en une seule regle plutot que de cibler chaque formulaire un par un.
   ========================================================================== */
:root{
  accent-color:var(--f3-clay-deep);
}

/* ==========================================================================
   20. Panier lateral (mini-panier) - tiroir plein hauteur depuis la droite
       comme le mockup, au clic sur l'icone, au lieu du menu deroulant qui
       apparaissait au survol (OceanWP natif). Le contenu (lignes produits,
       sous-total, boutons) reste le vrai widget panier WooCommerce, deja
       tenu a jour par les fragments AJAX - seul l'affichage/declenchement
       change (voir assets/js/faso3d-custom.js pour le JS associe).
   ========================================================================== */
.f3-cart-overlay{
  position:fixed;
  inset:0;
  background:rgba(15,12,8,0.4);
  z-index:9998;
  opacity:0;
  visibility:hidden;
  transition:opacity .3s ease, visibility .3s ease;
}
.f3-cart-overlay.open{
  opacity:1;
  visibility:visible;
}
.current-shop-items-dropdown.owp-mini-cart{
  display:flex !important;
  flex-direction:column !important;
  position:fixed !important;
  top:0 !important;
  right:0 !important;
  bottom:0 !important;
  left:auto !important;
  width:min(420px,100%) !important;
  max-width:100vw !important;
  height:100% !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  background:var(--f3-paper) !important;
  border:none !important;
  border-radius:0 !important;
  box-shadow:-6px 0 24px rgba(0,0,0,.15) !important;
  opacity:1 !important;
  visibility:visible !important;
  transform:translateX(100%) !important;
  transition:transform .35s ease !important;
  z-index:9999 !important;
}
.current-shop-items-dropdown.owp-mini-cart.f3-cart-open{
  transform:translateX(0) !important;
}
.current-shop-items-dropdown.owp-mini-cart .current-shop-items-inner{
  display:flex;
  flex-direction:column;
  height:100%;
  overflow:hidden;
}
.f3-cart-drawer-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:22px clamp(20px,4vw,28px);
  border-bottom:1px solid var(--f3-line);
  flex-shrink:0;
}
.f3-cart-drawer-head h3{
  font-family:'Instrument Sans', sans-serif;
  font-weight:600;
  font-size:16px;
  margin:0;
  color:var(--f3-ink);
}
.f3-cart-close{
  background:none;
  border:none;
  font-size:22px;
  line-height:1;
  color:var(--f3-ink-soft);
  cursor:pointer;
  padding:0;
}
.f3-cart-close:hover{
  color:var(--f3-clay-deep);
}
.current-shop-items-dropdown.owp-mini-cart .widget_shopping_cart_content{
  flex:1;
  overflow-y:auto;
  padding:4px clamp(20px,4vw,28px) 20px;
}

/* ==========================================================================
   21. Page Mon compte (connexion / inscription) - deux formulaires cote a
       cote comme le mockup, au lieu du bascule "Se connecter OU S'inscrire"
       d'OceanWP. Un reglage Customizer natif existe pour ca
       (ocean_woo_account_page_style: "side"), mais son enregistrement a
       echoue de facon repetee cette session (Customizer intermittent) - on
       force donc le meme resultat directement en CSS. Les formulaires
       restent les vrais formulaires WooCommerce (connexion/inscription
       fonctionnelles), seul l'affichage change.
   ========================================================================== */
.owp-account-links{
  display:none !important;
}
.u-columns.col2-set{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:clamp(24px,4vw,48px) !important;
}
.u-column1.col-1,
.u-column2.col-2{
  display:block !important;
  width:100% !important;
  float:none !important;
  margin:0 !important;
  background:var(--f3-paper);
  border:1px solid var(--f3-line);
  padding:clamp(28px,4vw,44px);
}
.u-column1 h2,
.u-column2 h2{
  display:block !important;
  font-family:'Instrument Sans', sans-serif;
  font-weight:600;
  font-size:18px;
  margin:0 0 20px;
  color:var(--f3-ink);
}
@media (max-width:768px){
  .u-columns.col2-set{
    grid-template-columns:1fr !important;
  }
}

/* ==========================================================================
   22. Tableau de bord "Mon compte" (utilisateur connecte) - remplace le mur
       de texte WooCommerce par defaut (salutation + liens en ligne) par un
       en-tete de bienvenue et une grille de raccourcis visuels. Le contenu
       de la grille est genere en JS a partir des vrais liens WooCommerce
       (voir assets/js/faso3d-custom.js) - aucune fonctionnalite perdue,
       seul l'affichage change. La navigation laterale WooCommerce (liste
       Tableau de bord/Commandes/Adresses/etc.) est retiree partout : elle
       fait doublon avec les tuiles sur la page d'accueil, et le fil
       d'Ariane du site (deja present et fonctionnel sur toutes les pages
       du compte, ex: Accueil > Mon compte > Commandes) assure la
       navigation de retour sur les sous-pages.
   ========================================================================== */
.woocommerce-MyAccount-navigation,
.oceanwp-user-profile{
  display:none !important;
}
.woocommerce-MyAccount-content{
  float:none !important;
  width:100% !important;
}
/* Cache immediatement le texte brut (salutation + liens en ligne) via CSS
   pur (aucune dependance au timing du JS) pour eviter tout flash visible
   du contenu WooCommerce par defaut avant que le JS ne le remplace par
   l'en-tete + la grille. Cible uniquement le tableau de bord (classe body
   ajoutee par WooCommerce sur cet endpoint precis) pour ne pas cacher de
   contenu legitime sur les autres pages du compte (ex. message "aucune
   commande"). */
body.woocommerce-dashboard .woocommerce-MyAccount-content > p{
  display:none;
}
.f3-account-welcome{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  padding-bottom:24px;
  margin-bottom:28px;
  border-bottom:1px solid var(--f3-line);
}
.f3-account-eyebrow{
  font-family:'Plex Mono', monospace;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--f3-clay-deep);
  margin:0 0 6px;
}
.f3-account-welcome h2{
  font-family:'Instrument Sans', sans-serif;
  font-weight:600;
  font-size:26px;
  margin:0;
  color:var(--f3-ink);
}
.f3-account-logout{
  font-family:'Plex Mono', monospace;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--f3-ink-soft);
  border:1px solid var(--f3-line-strong);
  padding:9px 16px;
  text-decoration:none;
  white-space:nowrap;
  transition:border-color .15s ease, color .15s ease;
}
.f3-account-logout:hover{
  border-color:var(--f3-clay-deep);
  color:var(--f3-clay-deep);
}
.f3-account-quicklinks{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:16px;
}
.f3-account-quicklink{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:24px 20px;
  border:1px solid var(--f3-line);
  text-decoration:none;
  color:var(--f3-ink);
  transition:border-color .15s ease, transform .15s ease;
}
.f3-account-quicklink:hover{
  border-color:var(--f3-clay-deep);
  transform:translateY(-2px);
}
.f3-account-quicklink svg{
  width:22px;
  height:22px;
  color:var(--f3-clay-deep);
}
.f3-account-quicklink span{
  font-family:'Instrument Sans', sans-serif;
  font-size:14px;
  font-weight:500;
  line-height:1.35;
}
@media (max-width:600px){
  .f3-account-welcome{
    flex-direction:column;
  }
}

/* ==========================================================================
   23. Recherche plein largeur (comme le mockup) - remplace le mini dropdown
       de recherche natif d'OceanWP (le script drop-down-search.min.js est
       bien enqueue, mais sa cible .header-searchform-wrap reste a
       opacity:0/visibility:hidden en permanence dans notre CSS) par une
       barre plein ecran sous la topbar, au clic sur la loupe. Ce meme
       script attache aussi son propre gestionnaire de clic directement sur
       .search-dropdown-toggle et appelle stopPropagation() - voir
       assets/js/faso3d-custom.js (phase de capture) pour le contournement.
       Reutilise le vrai formulaire WordPress existant (.searchform,
       name="s") - aucune fonctionnalite perdue, seul
       l'affichage/declenchement change (voir assets/js/faso3d-custom.js).
       Meme "portal" que le panier (section 20) : #site-header a un
       transform qui limiterait sinon la barre a sa hauteur au lieu du
       viewport entier.
   ========================================================================== */
.f3-search-overlay{
  position:fixed;
  inset:0;
  background:rgba(15,12,8,0.4);
  z-index:9998;
  opacity:0;
  visibility:hidden;
  transition:opacity .3s ease, visibility .3s ease;
}
.f3-search-overlay.open{
  opacity:1;
  visibility:visible;
}
.header-searchform-wrap{
  display:flex !important;
  align-items:center;
  gap:20px;
  position:fixed !important;
  top:42px !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  max-width:none !important;
  height:auto !important;
  margin:0 !important;
  padding:clamp(20px,4vw,32px) clamp(20px,6vw,120px) !important;
  background:var(--f3-paper) !important;
  border:none !important;
  border-radius:0 !important;
  box-shadow:0 8px 24px rgba(0,0,0,.12) !important;
  opacity:0 !important;
  visibility:hidden !important;
  transform:translateY(-12px) !important;
  transition:transform .25s ease, opacity .25s ease, visibility .25s ease !important;
  z-index:9999 !important;
}
@media (max-width:768px){
  .header-searchform-wrap{
    top:0 !important;
  }
}
.header-searchform-wrap.f3-search-open{
  opacity:1 !important;
  visibility:visible !important;
  transform:translateY(0) !important;
}
.header-searchform-wrap .searchform{
  display:flex !important;
  align-items:center;
  gap:16px;
  flex:1;
  border-bottom:1px solid var(--f3-ink);
  padding-bottom:14px;
}
.f3-search-icon{
  display:flex;
  flex-shrink:0;
  color:var(--f3-ink-soft);
}
.f3-search-icon svg{
  width:20px;
  height:20px;
}
.header-searchform-wrap .field{
  flex:1;
  border:none !important;
  outline:none !important;
  background:transparent !important;
  padding:0 !important;
  font-family:'Instrument Sans', sans-serif;
  font-size:clamp(16px,2vw,20px);
  color:var(--f3-ink);
}
.f3-search-close{
  flex-shrink:0;
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
  color:var(--f3-ink-soft);
  transition:color .15s ease;
}
.f3-search-close:hover{
  color:var(--f3-clay-deep);
}
.f3-search-close svg{
  width:20px;
  height:20px;
}


/* ==========================================================================
   24. Panier et Commande (widgets Elementor Pro "Cart" et "Checkout") - ces
       deux widgets appliquent leur propre gris generique (#D5D8DC sur fond
       blanc, non lie a la charte) sur les encadres (recapitulatif, coupon,
       paiement), sans !important - on les aligne sur les tons chauds du
       site (--f3-line, --f3-paper) et on retravaille l'alignement des
       lignes du panier (vignette, variation, quantite) pour un rendu plus
       soigne. Aucun !important en conflit trouve sur ces regles Elementor :
       les notres suffisent a gagner.
   ========================================================================== */
.e-cart-totals,
.woocommerce-cart-form .coupon,
.e-checkout__order_review,
.woocommerce-checkout-payment{
  border:1px solid var(--f3-line) !important;
  border-radius:var(--f3-radius) !important;
  background:var(--f3-paper) !important;
}
.e-cart__container,
.e-checkout__container{
  gap:40px !important;
}
.e-cart-totals h2,
.e-checkout__order_review h3{
  font-family:'Plex Mono', monospace !important;
  font-size:12px !important;
  font-weight:500 !important;
  letter-spacing:0.06em !important;
  text-transform:uppercase !important;
  color:var(--f3-muted) !important;
  margin-bottom:16px !important;
}

/* Tableau du panier */
table.shop_table.cart{
  border:none !important;
}
table.shop_table.cart thead th{
  border-bottom:1px solid var(--f3-line-strong) !important;
  padding-bottom:12px !important;
}
table.shop_table.cart tbody tr.cart_item{
  border-bottom:1px solid var(--f3-line) !important;
}
table.shop_table.cart td{
  vertical-align:middle !important;
  padding-top:20px !important;
  padding-bottom:20px !important;
}
table.shop_table.cart .product-thumbnail img{
  width:80px !important;
  height:80px !important;
  object-fit:cover !important;
  border:1px solid var(--f3-line) !important;
  border-radius:var(--f3-radius) !important;
}
table.shop_table.cart .product-name a{
  font-family:'Instrument Sans', sans-serif !important;
  font-weight:600 !important;
  color:var(--f3-ink) !important;
}
table.shop_table.cart .product-name .variation{
  margin:6px 0 0 !important;
  font-size:12px !important;
  color:var(--f3-muted) !important;
}
table.shop_table.cart .product-name .variation dt,
table.shop_table.cart .product-name .variation dd{
  display:inline !important;
  font-weight:normal !important;
  margin:0 !important;
  padding:0 !important;
}
table.shop_table.cart .product-name .variation dt::after{
  content:" : ";
}
table.shop_table.cart .quantity input{
  border-color:var(--f3-line-strong) !important;
  border-radius:var(--f3-radius) !important;
}

/* Coupon (panier) */
.woocommerce-cart-form .coupon{
  display:flex !important;
  align-items:center !important;
  flex-wrap:wrap;
  gap:12px !important;
  margin-top:24px !important;
}
.woocommerce-cart-form .coupon input#coupon_code{
  border-color:var(--f3-line-strong) !important;
  border-radius:var(--f3-radius) !important;
  max-width:220px;
}
.woocommerce-cart-form .coupon button{
  background:transparent !important;
  color:var(--f3-ink) !important;
  border:1px solid var(--f3-ink) !important;
}
.woocommerce-cart-form .coupon button:hover{
  border-color:var(--f3-clay-deep) !important;
  color:var(--f3-clay-deep) !important;
}

/* Coupon (commande) - widget "e-" d'Elementor, structure differente */
.e-coupon-box{
  border:1px solid var(--f3-line) !important;
  border-radius:var(--f3-radius) !important;
  background:var(--f3-paper) !important;
}
.e-apply-coupon{
  background:transparent !important;
  color:var(--f3-ink) !important;
  border:1px solid var(--f3-ink) !important;
}
.e-apply-coupon:hover{
  border-color:var(--f3-clay-deep) !important;
  color:var(--f3-clay-deep) !important;
}


/* ==========================================================================
   25. Panier - lignes produit en "carte" et recapitulatif type recu, pour un
       rendu plus professionnel (inspiration : panier Celio). CSS uniquement,
       structure WooCommerce/Elementor inchangee (meme tableau 6 colonnes,
       memes classes, coupon laisse a sa place dans le formulaire) pour ne
       rien casser (AJAX mise a jour panier, coupon, calcul des frais).
   ========================================================================== */

/* border-collapse:separate est necessaire pour que border-radius fonctionne
   par cellule (impossible avec le collapse par defaut d'un tableau) - c'est
   ce qui transforme chaque ligne produit en encadre independant. */
table.shop_table.cart{
  border-collapse:separate !important;
  border-spacing:0 14px !important;
}
table.shop_table.cart td{
  padding-left:16px !important;
  padding-right:16px !important;
}
table.shop_table.cart tbody tr.cart_item td{
  border-top:1px solid var(--f3-line) !important;
  border-bottom:1px solid var(--f3-line) !important;
  background:var(--f3-paper);
  transition:background .15s ease;
}
table.shop_table.cart tbody tr.cart_item:hover td{
  background:var(--f3-cream);
}
table.shop_table.cart tbody tr.cart_item td:first-child{
  border-left:1px solid var(--f3-line) !important;
  border-top-left-radius:var(--f3-radius);
  border-bottom-left-radius:var(--f3-radius);
  padding-left:12px !important;
  padding-right:4px !important;
}
table.shop_table.cart tbody tr.cart_item td:last-child{
  border-right:1px solid var(--f3-line) !important;
  border-top-right-radius:var(--f3-radius);
  border-bottom-right-radius:var(--f3-radius);
}
/* La vignette n'a plus besoin de sa propre bordure (section 24) : la ligne
   entiere fait deja office d'encadre, une bordure en plus faisait doublon. */
table.shop_table.cart .product-thumbnail img{
  border:none !important;
}

/* Bouton "retirer" (x) - simple lien texte natif WooCommerce, transforme en
   bouton rond discret plutot qu'un x nu. */
table.shop_table.cart td.product-remove a.remove{
  display:flex !important;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  border-radius:50%;
  color:var(--f3-ink-soft) !important;
  font-size:18px;
  line-height:1;
  text-decoration:none;
  transition:background .15s ease, color .15s ease;
}
table.shop_table.cart td.product-remove a.remove:hover{
  background:var(--f3-clay-tint);
  color:var(--f3-clay-deep) !important;
}

/* Quantite : le "+"/"-" natif (liens a.minus/a.plus) et le champ ne
   formaient pas de groupe visuel - on les reunit en un seul controle
   segmente, comme un vrai stepper d'e-commerce. */
table.shop_table.cart td.product-quantity div.quantity{
  display:inline-flex !important;
  align-items:stretch;
  border:1px solid var(--f3-line-strong) !important;
  border-radius:var(--f3-radius) !important;
  overflow:hidden;
  width:auto !important;
  /* WooCommerce core (woocommerce.min.css) donne a .quantity un
     min-width:110px par defaut (pense pour un champ de quantite seul, pas
     pour ce stepper groupe -/input/+) : sans l'annuler, min-width l'emporte
     toujours sur width et forcait le conteneur a rester large de 110px
     meme avec width:auto, laissant un vide a droite du "+" qui debordait
     dans la colonne voisine. */
  min-width:0 !important;
}
table.shop_table.cart td.product-quantity div.quantity a.minus,
table.shop_table.cart td.product-quantity div.quantity a.plus{
  display:flex;
  align-items:center;
  justify-content:center;
  width:26px;
  flex-shrink:0;
  color:var(--f3-ink-soft);
  text-decoration:none;
  cursor:pointer;
  font-family:'Plex Mono', monospace;
  user-select:none;
  transition:background .15s ease, color .15s ease;
}
table.shop_table.cart td.product-quantity div.quantity a.minus:hover,
table.shop_table.cart td.product-quantity div.quantity a.plus:hover{
  background:var(--f3-cream);
  color:var(--f3-clay-deep);
}
table.shop_table.cart td.product-quantity div.quantity input.qty{
  width:28px !important;
  height:32px !important;
  text-align:center;
  border:none !important;
  border-left:1px solid var(--f3-line-strong) !important;
  border-right:1px solid var(--f3-line-strong) !important;
  border-radius:0 !important;
  padding:0 !important;
}

/* Sur desktop, l'entete de tableau (Produit/Prix/Quantite/Total) faisait
   plus "tableur" que "carte produit" une fois les lignes encadrees
   ci-dessus - on la masque et on affiche a la place une petite etiquette
   au-dessus de chaque valeur (attribut data-title, deja fourni par
   WooCommerce en francais pour son propre mode mobile). Le mobile (qui
   utilise deja ce meme attribut pour son propre affichage empile) n'est pas
   touche : cette regle ne s'applique qu'a partir de 769px. */
@media (min-width:769px){
  table.shop_table.cart thead{
    display:none !important;
  }
  table.shop_table.cart td.product-price::before,
  table.shop_table.cart td.product-quantity::before,
  table.shop_table.cart td.product-subtotal::before{
    content:attr(data-title);
    display:block;
    font-family:'Plex Mono', monospace;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:0.06em;
    color:var(--f3-muted);
    margin-bottom:6px;
  }
  /* Une fois l'entete masque ci-dessus, le navigateur rededuisait les
     largeurs de colonnes du seul contenu visible restant : le nom de
     produit (texte le plus long de la ligne) se retrouvait comprime sur
     une colonne etroite et repartait sur de tres nombreuses lignes. On
     fixe des largeurs explicites plutot que de laisser l'auto-layout
     deviner.

     Des largeurs en pourcentage (version precedente) donnaient une largeur
     differente selon la largeur reelle du panier - hors de tout controle,
     le pourcentage fixe pour la quantite pouvait devenir plus etroit que
     le stepper -/+ lui-meme (largeur fixe, en px), qui debordait alors
     dans la colonne sous-total voisine. Les colonnes a contenu fixe
     (tout sauf le nom de produit) ont donc chacune une largeur en PIXELS
     couvrant leur contenu reel + marge de securite ; seule product-name
     n'a pas de largeur déclarée et recupere tout l'espace restant (seule
     colonne sans largeur fixe = tout le reste, comportement natif de
     table-layout:fixed). */
  table.shop_table.cart{
    table-layout:fixed !important;
  }
  table.shop_table.cart td{
    padding-left:10px !important;
    padding-right:10px !important;
  }
  table.shop_table.cart td.product-remove{ width:44px !important; padding-right:4px !important; }
  table.shop_table.cart td.product-thumbnail{ width:100px !important; }
  table.shop_table.cart td.product-price{ width:96px !important; }
  table.shop_table.cart td.product-quantity{ width:108px !important; }
  table.shop_table.cart td.product-subtotal{ width:106px !important; }
  table.shop_table.cart td.product-price::before,
  table.shop_table.cart td.product-quantity::before,
  table.shop_table.cart td.product-subtotal::before{
    white-space:nowrap;
  }
  table.shop_table.cart td.product-price .woocommerce-Price-amount.amount,
  table.shop_table.cart td.product-subtotal .woocommerce-Price-amount.amount{
    white-space:nowrap;
  }
}

/* Recapitulatif (panier) - le tableau interne (sous-total / livraison /
   total) gardait les bordures pleine largeur par defaut de WooCommerce :
   on le transforme en recu, avec une seule ligne de separation par rangee
   et la ligne "Total" mise en evidence (bordure plus marquee, montant plus
   grand). */
.e-cart-totals .cart_totals table.shop_table{
  border:none !important;
  width:100%;
}
.e-cart-totals .cart_totals table.shop_table tr{
  border:none !important;
}
.e-cart-totals .cart_totals table.shop_table th,
.e-cart-totals .cart_totals table.shop_table td{
  border:none !important;
  border-bottom:1px solid var(--f3-line) !important;
  padding:12px 0 !important;
}
.e-cart-totals .cart_totals table.shop_table td{
  text-align:right;
}
.e-cart-totals .cart_totals table.shop_table tr.order-total th,
.e-cart-totals .cart_totals table.shop_table tr.order-total td{
  border-bottom:none !important;
  border-top:1px solid var(--f3-line-strong) !important;
  padding-top:16px !important;
  padding-bottom:0 !important;
}
.e-cart-totals .cart_totals table.shop_table tr.order-total th{
  font-size:14px;
  color:var(--f3-ink) !important;
}
.e-cart-totals .cart_totals table.shop_table tr.order-total .woocommerce-Price-amount.amount{
  font-size:19px;
  font-weight:600;
}

/* Bouton "Passer la commande" - deja stylé en noir/majuscules par la regle
   generale des boutons (section 5), on le rend juste pleine largeur et plus
   genereux dans le recapitulatif, pour un appel a l'action plus marque. */
.e-cart-totals .wc-proceed-to-checkout .checkout-button{
  display:block !important;
  width:100% !important;
  text-align:center;
  padding:16px 28px !important;
  font-size:13px;
  margin-top:20px !important;
}


/* ==========================================================================
   26. Menu mobile (hamburger OceanWP, <=1024px) - jamais retouche jusqu'ici,
       toutes les sections precedentes sur le header ne visaient que le
       desktop (>=1025px, section 11). Cette section corrige l'aspect du
       bouton hamburger natif (bordure parasite visible en etat "Fermer") et
       l'habillage des liens du panneau qu'il ouvre, pour suivre la charte du
       site au lieu du style OceanWP par defaut - structure/fonctionnement du
       menu inchanges.

       Le badge de langue flottant de TranslatePress (position "Top Right")
       chevauchait le logo/l'en-tete sur mobile. Reglage cote plugin deja
       change (Réglages > TranslatePress > Sélecteur de langues > Traduction
       du site > Floating > onglet Mobile > Bottom Right, enregistre et
       confirme persistant en base), mais toujours visible en haut sur le
       telephone de test - probablement le rendu inline (top/right calcules
       cote plugin) mis en cache quelque part hors de notre controle direct
       (cache navigateur du telephone ou couche additionnelle chez
       l'hebergeur). On force donc aussi la position ici, directement en
       CSS avec !important : les regles de position du plugin n'en portent
       pas, donc les notres l'emportent systematiquement, sans dependre du
       cache. */
@media (max-width:1024px){
  .trp-floating-switcher{
    top:auto !important;
    bottom:16px !important;
    right:16px !important;
    left:auto !important;
  }
  .oceanwp-mobile-menu-icon a.mobile-menu{
    display:flex !important;
    align-items:center;
    border:none !important;
    outline:none !important;
    background:transparent !important;
    box-shadow:none !important;
    color:var(--f3-ink) !important;
  }
  .oceanwp-mobile-menu-icon a.mobile-menu i.fa-bars{
    font-size:18px;
  }
  /* Le mockup n'affiche que l'icone, pas de texte "Menu"/"Fermer" a cote. */
  .oceanwp-mobile-menu-icon a.mobile-menu .oceanwp-text,
  .oceanwp-mobile-menu-icon a.mobile-menu .oceanwp-close-text{
    display:none !important;
  }
  /* Comme les autres icones du header (panier, recherche, compte - section
     12), le hamburger doit passer en blanc quand le header est transparent
     sur le hero de l'accueil - oublié lors de la creation de cette regle,
     il restait noir (illisible) sur la photo. */
  body.home:not(.f3-header-filled) .oceanwp-mobile-menu-icon a.mobile-menu{
    color:var(--f3-paper) !important;
  }

  #site-navigation-wrap{
    background:var(--f3-paper) !important;
    border-top:1px solid var(--f3-line);
  }
  #site-navigation-wrap .dropdown-menu > li > a.menu-link{
    font-family:'Plex Mono', monospace !important;
    font-size:13px !important;
    letter-spacing:0.05em;
    text-transform:uppercase;
    color:var(--f3-ink-soft) !important;
    border-bottom:1px solid var(--f3-line) !important;
    padding:16px 20px !important;
  }
  #site-navigation-wrap .dropdown-menu > li > a.menu-link:hover{
    color:var(--f3-clay-deep) !important;
  }
}


/* ==========================================================================
   27. Header mobile (<=1024px) : logo et icones sur une seule ligne comme
       le mockup (au lieu de l'empilement colonne de la section 11), et
       transparence sur le hero au chargement comme le mockup (au lieu du
       fond toujours blanc). Deux anciennes regles s'y opposaient :
       - #site-header-inner passait en flex-direction:column sur mobile
         (section 11, <=1024px) : logo et icones empiles au lieu de rester
         cote a cote ;
       - #top-bar et #site-header etaient forces en position:relative sur
         mobile (section 10, <=768px, reprise telle quelle de l'ancien CSS
         pre-mockup) : jamais superposes au hero, donc meme transparent, on
         ne voyait que le fond blanc de la page derriere le logo, pas
         l'image.
       On repasse header/topbar en position fixe sur mobile aussi (comme
       desktop), avec un decalage haut calcule dynamiquement en JS
       (assets/js/faso3d-custom.js, fonction handleHeaderAnimation) puisque
       la hauteur de la topbar mobile est variable (contenu qui s'adapte),
       contrairement au desktop qui a une hauteur fixe de 42px. Ces regles
       sont ajoutees en fin de fichier plutot que d'editer les anciennes :
       meme selecteur, meme !important, mais plus loin dans le fichier donc
       prioritaire en cascade - aucun risque de casser autre chose en
       modifiant du code existant. */
@media (max-width:1024px){
  /* display:flex sur #site-header-inner n'etait defini que sur desktop
     (@media min-width:769px, plus haut dans ce fichier) : sur mobile
     l'element restait en display:block par defaut, donc flex-direction
     n'avait aucun effet - logo et bloc d'icones s'empilaient simplement en
     flux normal. Meme souci pour .oceanwp-mobile-menu-icon (panier +
     hamburger empiles l'un sous l'autre au lieu de cote a cote). */
  #site-header-inner{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    flex-wrap:nowrap !important;
  }
  #site-logo{
    text-align:left !important;
    margin:0 !important;
  }
  #site-logo-inner{
    justify-content:flex-start !important;
  }
  #site-navigation-wrap{
    text-align:right !important;
  }
  .oceanwp-mobile-menu-icon{
    display:flex !important;
    align-items:center !important;
    gap:16px;
  }
}
@media (max-width:768px){
  #top-bar{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    width:100% !important;
    z-index:1001 !important;
    transform:translateZ(0) !important;
    /* Le theme parent OceanWP (style.min.css) a sa propre regle
       "#top-bar{padding:20px 0px}" sur mobile, sans !important - la notre
       (section 11, padding:8px 0, elle non plus sans !important) ne
       gagnait donc pas de facon fiable selon l'ordre de chargement exact.
       On fixe une valeur explicite avec !important pour ne plus en
       dependre. */
    padding:10px 0 !important;
  }
  #site-header{
    position:fixed !important;
    left:0 !important;
    width:100% !important;
    z-index:1000 !important;
    transform:translateZ(0) !important;
  }
  body{
    padding-top:0;
  }
}


/* ==========================================================================
   28. Barre d'annonces (topbar) : le message le plus long ("Service client
       lun-ven 9h-18h · contact@faso3d.com") ne tenait plus sur une seule
       ligne sur mobile, a cause du padding lateral de 30px (section 11,
       <=768px) qui reduisait trop la largeur disponible. Comme chaque
       message a une hauteur de conteneur fixe (14px mobile / 16px desktop,
       necessaire pour le fondu enchaine entre messages), un texte passant
       sur 2 lignes debordait et se retrouvait chevauche avec le message
       suivant en dessous. Plutot que de tronquer le texte (points de
       suspension), on elargit l'espace disponible : padding lateral
       reduit et police legerement plus petite sur mobile - le message le
       plus long tient alors sur une ligne sans coupure, jusqu'aux plus
       petits telephones courants (~320px). On empeche aussi le retour a
       la ligne pour eviter que ce debordement vertical ne se reproduise.
   ========================================================================== */
.f3-announce-list div{
  white-space:nowrap !important;
}
@media (max-width:768px){
  .f3-announce-list div{
    font-size:9px !important;
    padding:0 8px !important;
  }
}


/* ==========================================================================
   29. Icones recherche et compte dans la rangee mobile (comme le mockup) -
       ces deux liens vivent normalement DANS le menu Collection/Contact
       (meme <ul> natif OceanWP, partage avec le desktop), invisibles sur
       mobile tant que le hamburger n'est pas ouvert. Clones dans la rangee
       d'icones toujours visible par assets/js/faso3d-custom.js.

       Correctif important : le VRAI panneau qui s'ouvre au tap du hamburger
       n'est PAS #site-navigation-wrap (qui reste vide/invisible sur mobile -
       nos regles precedentes le ciblaient donc a tort, sans effet visible)
       mais #mobile-dropdown, un second menu clone nativement par OceanWP,
       avec une structure differente : pas de classe .dropdown-menu, et ses
       <li> n'ont pas d'id (contrairement a l'original) - seulement des
       classes comme .menu-item-3453 (memes chiffres que l'id d'origine,
       mais c'est une classe ici). D'ou l'usage de selecteurs de classe
       (.menu-item-3453, .search-toggle-li) plutot que d'id, pour matcher
       les deux copies (originale ET clone OceanWP) en une seule regle.
   ========================================================================== */
@media (max-width:1024px){
  /* #site-navigation-wrap ne sert plus a rien sur mobile (son contenu
     desktop - Collection/Contact/recherche/compte - est invisible tant que
     le hamburger n'est pas ouvert, et le vrai panneau mobile est ailleurs,
     voir plus bas) : le masquer entierement simplifie la rangee logo/icones
     a exactement 2 elements flex, pour un espacement propre entre le logo
     et les icones (au lieu d'un 3e element invisible mais occupant quand
     meme un peu de place dans le calcul de l'espacement).  */
  #site-navigation-wrap{
    display:none !important;
  }

  .oceanwp-mobile-menu-icon .f3-mobile-icon-clone{
    display:flex !important;
    align-items:center;
    color:inherit;
  }
  .oceanwp-mobile-menu-icon .f3-mobile-icon-clone i{
    font-size:18px;
  }
  .oceanwp-mobile-menu-icon .f3-mobile-account-icon::before{
    font-family:"simple-line-icons";
    font-weight:400;
    content:"\e005";
    font-size:16px;
    color:inherit;
  }
  /* Comme le hamburger (section 27), doit passer en blanc sur le hero
     transparent de l'accueil. */
  body.home:not(.f3-header-filled) .oceanwp-mobile-menu-icon .f3-mobile-account-icon{
    color:var(--f3-paper) !important;
  }

  /* Panneau mobile reel (#mobile-dropdown) : compte, recherche et panier y
     sont redondants (deja accessibles via les icones du header) - on ne
     garde que Collection/Contact. #mobile-menu-search est le formulaire de
     recherche natif OceanWP integre au panneau (different de notre
     recherche plein ecran), lui aussi redondant. */
  #mobile-dropdown .search-toggle-li,
  #mobile-dropdown .menu-item-3453,
  #mobile-dropdown .woo-menu-icon,
  #mobile-dropdown #mobile-menu-search{
    display:none !important;
  }
  #mobile-dropdown{
    background:var(--f3-paper) !important;
  }
  #mobile-dropdown nav > ul > li > a{
    display:block;
    font-family:'Plex Mono', monospace !important;
    font-size:13px !important;
    letter-spacing:0.05em;
    text-transform:uppercase;
    color:var(--f3-ink-soft) !important;
    border-bottom:1px solid var(--f3-line) !important;
    padding:16px 20px !important;
  }
  #mobile-dropdown nav > ul > li > a:hover{
    color:var(--f3-clay-deep) !important;
  }
}


/* ==========================================================================
   30. Fiche produit - la section UGS/Categorie (.product_meta, sous les
       onglets Description/Avis) ne doit plus s'afficher.
   ========================================================================== */
.single-product .product_meta{
  display:none !important;
}

/* ==========================================================================
   31. Titre du hero (accueil) - la regle globale h1{color:var(--f3-ink)
       !important} (plus haut dans ce fichier) rendait le grand titre illisible
       sur la photo sombre du hero (overlay .f3-hero-overlay). On le repasse
       en blanc, avec une priorite suffisante pour gagner.
   ========================================================================== */
.f3-hero-overlay h1,
.f3-hero-overlay h2{
  color:var(--f3-paper) !important;
}

/* ==========================================================================
   33. Bandeau RGPD (Hu-manity.co) - version classique et epuree : on retire
       les icones superflues (agrandir, telecharger le consentement, statut
       de protection) et l'URL du site dans la barre du haut pour ne garder
       que le texte, les 3 choix (refuser/personnaliser/accepter), la duree
       et le bouton de sauvegarde - un bandeau RGPD standard, rien de plus.
   ========================================================================== */
.hu-notice-maximize,
.hu-notice-download,
.hu-notice-protection,
.hu-site-url{
  display:none !important;
}

/* ==========================================================================
   34. Badge flottant RGPD - icone remplacee par un cookie : l'icone par
       defaut de Hu-manity.co est une empreinte digitale, pas de reglage
       natif pour en changer. On la masque et on superpose un emoji cookie
       centre dans le rond, plus reconnaissable et moins "surveillance".
   ========================================================================== */
#hu-revoke-wrapper .hu-revoke-icon{
  visibility:hidden;
}
#hu-revoke-wrapper .hu-revoke-button{
  position:relative;
  background-color:transparent !important;
  border-color:transparent !important;
}
#hu-revoke-wrapper .hu-revoke-button::after{
  content:"\1F36A";
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  font-size:24px;
  line-height:1;
}

/* ==========================================================================
   35. Interrupteurs de preferences cookies (Hu-manity.co) - le compte a ses
       variables --hu-disabledColor / --hu-primaryColor / --hu-secondaryColor
       toutes reglees sur la meme couleur terracotta (pas de champ "couleur
       desactivee" distinct sur ce plan), donc un interrupteur desactive
       gardait la meme couleur qu'active - seul le curseur se deplacait. On
       force un gris neutre sur l'etat desactive pour rendre les 2 etats
       visuellement distincts.
   ========================================================================== */
#hu .hu-checkbox-toggle:not(.hu-disabled) input:not(:checked) ~ .hu-toggle-heading .hu-toggle-slider{
  background-color:#5a5a5a !important;
}

/* ==========================================================================
   36. Rétractation en ligne (bouton "Se rétracter" - espace client) - voir
       inc/retractation.php. Formulaire simple aligne sur les codes visuels
       deja utilises pour les formulaires WooCommerce (section 8).
   ========================================================================== */
.faso3d-withdrawal-cta{
  margin-top:16px;
}
.faso3d-withdrawal{
  max-width:480px;
}
.faso3d-withdrawal h2{
  font-size:20px;
  margin:0 0 12px;
}
.faso3d-withdrawal-form .form-row{
  margin-bottom:16px;
}
.faso3d-withdrawal-form label{
  display:block;
  font-family:'Plex Mono', monospace;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--f3-muted);
  margin-bottom:6px;
}
.faso3d-withdrawal-form input.input-text{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--f3-line-strong);
  border-radius:var(--f3-radius);
  background:var(--f3-cream);
}
.faso3d-withdrawal-confirm label{
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-family:'Instrument Sans', sans-serif;
  font-size:14px;
  text-transform:none;
  letter-spacing:normal;
  color:var(--f3-ink-soft);
}
.faso3d-withdrawal-confirm input[type="checkbox"]{
  margin-top:3px;
}