/* ========================================================================== Youdec Radiant — reproduction du thème Shopify "Radiant" (Horizon) ========================================================================== */ :root{ --c-page:#D8D2C0; --c-text:#141B2A; --c-accent:#EBBB54; --c-navy:#141B2A; --c-btn-bg:#141B2A; --c-btn-text:#EBBB54; --c-white:#fff; --c-1:#F5F4F2; --c-2:#D9D6CF; --c-3:#E8C8A1; --c-4:#B2B7AF; --font-body:"Jost","Readex Pro",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif; --font-head:"Playfair Display","Lemonada",Georgia,serif; --font-accent:"Jost","Readex Pro",system-ui,sans-serif; --icon-stroke-width:1px; --gutter:40px; --header-h:143px; --radius-btn:37px; --radius-input:8px; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{margin:0;background:var(--c-page);color:var(--c-text);font-family:var(--font-body);font-size:18px;line-height:1.6;font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} img,svg,video,iframe{max-width:100%} img{height:auto;display:block} a{color:inherit;text-decoration:none} a:hover{opacity:.75} ul,ol{margin:0;padding:0;list-style:none} h1,h2,h3,h4,h5,h6{margin:0;font-family:var(--font-head);font-weight:700;line-height:1.1;letter-spacing:-.01em} p{margin:0 0 1em} button,input,select,textarea{font:inherit;color:inherit} button{cursor:pointer} [hidden]{display:none!important} .screen-reader-text,.skip-link:not(:focus){position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .skip-link:focus{position:fixed;top:8px;inset-inline-start:8px;z-index:1000;background:var(--c-navy);color:var(--c-accent);padding:8px 16px;border-radius:8px} .hp{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);opacity:0;pointer-events:none} .icon{display:inline-flex;align-items:center;justify-content:center;flex:none} .icon svg{width:100%;height:100%} .center{text-align:center} /* ---------- Layout ---------- */ .page-wrapper{min-height:100vh;display:flex;flex-direction:column} .content-for-layout{flex:1} .container{width:100%;max-width:2400px;margin-inline:auto;padding-inline:var(--gutter)} .container--narrow{max-width:860px} .section{padding-block:48px} .page-section{background:var(--c-page)} .page-title{font-size:clamp(2.2rem,4vw,3.5rem);margin-block-end:.6em;line-height:1.1} .empty-note{text-align:center;padding:40px 0;opacity:.8} /* ---------- Boutons ---------- */ .button,.wp-block-button__link,.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce #respond input#submit{ display:inline-flex;align-items:center;justify-content:center;gap:8px; background:var(--c-btn-bg);color:var(--c-btn-text);border:0;border-radius:var(--radius-btn); padding:16px 24px;font-family:var(--font-body);font-size:16px;font-weight:700;line-height:1.6;letter-spacing:.03em; cursor:pointer;text-decoration:none;transition:filter .2s ease,transform .2s ease; } .button:hover,.woocommerce a.button:hover,.woocommerce button.button:hover{filter:brightness(1.25);opacity:1;background:var(--c-btn-bg);color:var(--c-btn-text)} .button:disabled,.button[disabled],.woocommerce button.button.disabled,.woocommerce button.button:disabled{background:#8b8d92;color:var(--c-accent);cursor:not-allowed;filter:none;opacity:.9} .button--block{width:100%} .button--secondary{background:transparent;color:var(--c-text);border:1px solid var(--c-navy)} .icon-btn{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;padding:0;background:none;border:0;color:inherit;position:relative;border-radius:50%} .icon-btn:hover{opacity:.7} /* ---------- Header ---------- */ .header{background:var(--c-navy);color:var(--c-1);position:relative;z-index:60;transition:transform .3s ease} #header-group{position:sticky;top:0;z-index:60} .header__row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:11.2px var(--gutter);min-height:var(--header-h)} .header__logo{display:block;padding:9px 0 12px;justify-self:start;line-height:0} .header .header__logo-img{height:100px;width:auto;max-width:none;border-radius:0} .header__logo--text{font-size:28px;font-weight:800;line-height:1.2;padding:24px 0} .header__burger{display:none} .header__nav .menu{display:flex;gap:24px;align-items:center;justify-content:center} .header__nav .menu>li{position:relative} .header__nav .menu a{display:block;font-size:16px;font-weight:800;color:inherit;padding-block:8px;white-space:nowrap} .header__nav .menu>li.current-menu-item>a,.header__nav .menu>li.current_page_item>a{color:#fff} .header__nav .menu:hover>li>a{opacity:.65} .header__nav .menu>li:hover>a{opacity:1} .header__nav .sub-menu{position:absolute;top:100%;inset-inline-start:0;min-width:200px;background:var(--c-navy);padding:8px 0;display:none;box-shadow:0 12px 30px rgba(0,0,0,.2);z-index:5} .header__nav li:hover>.sub-menu,.header__nav li:focus-within>.sub-menu{display:block} .header__nav .sub-menu a{padding:8px 20px} .header__actions{display:flex;align-items:center;justify-self:end} .header__cart .cart-count{position:absolute;top:4px;inset-inline-end:2px;min-width:16px;height:16px;padding:0 4px;border-radius:9px;background:var(--c-navy);color:var(--c-1);font-size:10px;line-height:16px;text-align:center;font-weight:700} .header__cart .cart-count.is-empty{display:none} .header.is-hidden{transform:translateY(-100%)} /* Header transparent (page produit) */ .header--transparent{background:transparent;color:var(--c-text)} .has-transparent-header #header-group{position:absolute;inset-inline:0;top:0;height:0} .has-transparent-header .header--transparent .cart-count{background:var(--c-navy);color:var(--c-1)} .has-transparent-header #header-group .header--transparent{position:relative} .header--transparent.is-stuck{background:var(--c-page)} /* ---------- Grilles produits ---------- */ .product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:start} .product-grid--home{gap:50px} .product-grid--collection{padding-inline:12px} .product-grid--recs{padding-inline:12px} .product-grid--collection.is-dense-2{grid-template-columns:repeat(2,minmax(0,1fr))} .card{position:relative;transition:transform .3s ease} .card__media{position:relative;display:block;overflow:hidden;background:transparent} .card__img{width:100%;height:auto;display:block;transition:transform .5s ease} .product-grid--home .card__img{aspect-ratio:4/5;object-fit:cover} .card:hover .card__img{transform:scale(1.03)} .card:hover{transform:translateY(-4px)} .card .card__img,.media-gallery .media-gallery__img,.drawer .drawer__thumb img{border-radius:0!important} .card__badges{position:absolute;top:8px;left:8px;display:flex;gap:4px;z-index:2} .badge{display:inline-block;font-size:13px;line-height:20.8px;padding:4px 10px;border-radius:40px;background:var(--c-navy);color:var(--c-accent);font-weight:400} .badge--sale{background:var(--c-4);color:#1e211d} .card__info{padding-block:8px 8px} .card__title{font-size:14px;line-height:1.1;font-weight:800;margin-block:.5em;color:var(--c-navy);text-align:start} .card__title a{display:block} .product-grid--collection .card__title,.product-grid--recs .card__title{text-align:center} .price,.card .price{font-family:var(--font-accent);font-size:20px;line-height:1.4;font-weight:400;text-align:center;color:var(--c-text)} .price del{opacity:.55;margin-inline-start:6px;font-size:.8em} .price ins{text-decoration:none} .price .woocommerce-Price-currencySymbol{margin-inline-end:.1em} /* ---------- Home ---------- */ .product-list{background:var(--c-page);padding-block:48px} .product-list__cta{display:flex;justify-content:center} .product-list__cta:first-child{margin-block-end:32px} .product-list .product-grid+.product-list__cta{margin-block-start:32px} /* ---------- Collection ---------- */ .collection-head{padding-block:48px 0} .collection-title{font-size:clamp(2.4rem,4vw,3.5rem);line-height:1.05;letter-spacing:-.02em} .collection-desc{margin-block-start:16px} .collection-main{padding-block:24px 48px} .facets{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:8px 12px 20px;font-size:14px} .facets__group{display:flex;align-items:center;gap:24px;flex-wrap:wrap} .facet{position:relative} .facet summary{list-style:none;display:flex;align-items:center;gap:6px;cursor:pointer;padding:6px 0} .facet summary::-webkit-details-marker{display:none} .facet summary .icon{width:14px;height:14px} .facet[open] summary .icon{transform:rotate(180deg)} .facet__panel{position:absolute;z-index:20;top:100%;inset-inline-start:0;min-width:200px;background:var(--c-white);border-radius:4px;padding:12px 16px;display:flex;flex-direction:column;gap:10px;box-shadow:0 10px 30px rgba(20,27,42,.15)} .facet__panel label{display:flex;align-items:center;gap:8px;cursor:pointer} .facet__panel--price input{width:90px;padding:6px 8px;border:1px solid var(--c-navy);border-radius:var(--radius-input);background:transparent} .facets__count{opacity:.85} .facets__sort{display:flex;align-items:center;gap:6px} .facets__sort select{appearance:none;background:transparent;border:0;padding:6px 4px;font-size:14px;cursor:pointer;color:inherit;max-width:160px} .sort-label{display:none} .density{display:flex;gap:2px} .density .icon-btn{width:34px;height:34px;border-radius:2px} .density .icon-btn.is-active{background:rgba(20,27,42,.1)} .pagination{margin-block-start:40px;text-align:center} .pagination ul,.pagination .page-numbers{display:inline-flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap} .pagination .page-numbers{min-width:38px;height:38px;padding:0 10px;border-radius:19px} .pagination li .page-numbers.current,.pagination .page-numbers.current{background:var(--c-navy);color:var(--c-accent)} .nav-links{display:inline-flex;gap:8px} /* ---------- Produit ---------- */ .product-information{background:var(--c-page)} .product-information__grid{display:grid;grid-template-columns:61.2% 1fr;min-height:100svh;align-items:start} .has-transparent-header .product-information__grid{min-height:100svh} .media-gallery{position:relative} .media-gallery__item{margin:0;height:100svh;background:var(--c-page);display:flex} .media-gallery__img{width:100%;height:100%;object-fit:contain} .product-details{position:sticky;top:0;align-self:start;padding:calc(var(--header-h) + 0px) var(--gutter) 40px 24px} [dir=rtl] .product-details{padding:var(--header-h) 24px 40px var(--gutter)} .product-details__inner{padding-block:24px;max-width:520px;margin-inline-start:auto} .product-title{font-size:24px;line-height:1.1;font-weight:700;letter-spacing:0} .product-price{font-size:24px;text-align:start;margin-block:8px 0} .divider{border:0;border-top:1px solid rgba(20,27,42,.12);margin-block:24px} .buy-buttons{margin-block-end:24px} .product-description{font-size:16px;line-height:1.75;margin-block-start:8px} .product-description p{margin-block-end:.9em} .product-description ul{list-style:disc;padding-inline-start:20px} .recs{padding-block:48px} .recs__title{font-size:32px;margin-block-end:24px} /* Formulaire panier WooCommerce */ .woocommerce div.product form.cart,form.cart{display:flex;flex-wrap:wrap;gap:12px;align-items:stretch;margin:0} form.cart .quantity{display:flex} form.cart .single_add_to_cart_button{flex:1;min-width:160px} .woocommerce-variation-add-to-cart{display:flex;gap:12px;flex-wrap:wrap;width:100%} table.variations{width:100%;border-collapse:collapse;margin-block-end:16px} table.variations th,table.variations td{display:block;padding:0;text-align:start} table.variations label{font-weight:700;font-size:14px;display:block;margin-block-end:6px} table.variations select{width:100%;padding:12px 16px;background:transparent;border:1px solid var(--c-navy);border-radius:var(--radius-input)} .reset_variations{font-size:13px;display:inline-block;margin-block-start:6px} .woocommerce-variation-price{margin-block-end:12px} .qtyb{display:inline-flex;align-items:center;justify-content:space-between;background:var(--c-navy);color:var(--c-accent);border-radius:var(--radius-btn);height:52px;min-width:126px;padding-inline:4px} .qtyb__btn{width:40px;height:44px;display:inline-flex;align-items:center;justify-content:center;background:none;border:0;color:inherit;padding:0} .qtyb__btn:hover{opacity:.7} .qtyb__val,.qtyb input.qtyb__input{width:36px;text-align:center;background:transparent;border:0;color:inherit;font-size:16px;font-weight:700;-moz-appearance:textfield;padding:0} .qtyb input::-webkit-outer-spin-button,.qtyb input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .qtyb--disabled{opacity:.55} .buy-row{display:flex;gap:12px;align-items:stretch} .buy-row .button{flex:1} .woocommerce-message,.woocommerce-info,.woocommerce-error{list-style:none;margin:0 0 16px;padding:12px 16px;background:var(--c-1);border-radius:8px;font-size:15px} .woocommerce-error{background:#f4d9d5} .woocommerce-message .button{padding:8px 16px;font-size:14px;margin-inline-start:12px} /* ---------- Drawer / recherche / toast ---------- */ .overlay{position:fixed;inset:0;background:rgba(20,27,42,.45);z-index:90;opacity:0;transition:opacity .25s ease} .overlay.is-open{opacity:1} .drawer{position:fixed;top:0;bottom:0;inset-inline-end:0;width:min(440px,100vw);background:var(--c-white);color:var(--c-text);z-index:100;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .3s ease;box-shadow:0 0 40px rgba(0,0,0,.15)} [dir=rtl] .drawer{transform:translateX(-100%)} .drawer.is-open,[dir=rtl] .drawer.is-open{transform:none} .drawer--menu{inset-inline-end:auto;inset-inline-start:0;transform:translateX(-100%)} [dir=rtl] .drawer--menu{transform:translateX(100%)} .drawer__header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--c-2)} .drawer__header h2{font-size:22px;font-weight:800} .drawer__body{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0} .drawer__items{flex:1;overflow:auto;padding:8px 20px} .drawer__item{display:grid;grid-template-columns:80px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--c-2)} .drawer__thumb img{width:80px;height:100px;object-fit:cover} .drawer__name{font-weight:800;font-size:15px;line-height:1.3;display:block} .drawer__price{font-family:var(--font-accent);font-size:16px;margin-block:4px 8px} .drawer__meta{font-size:13px;opacity:.7} .drawer__qty-row{display:flex;align-items:center;justify-content:space-between} .drawer .qtyb{height:40px;min-width:104px} .drawer .qtyb__btn{height:36px;width:32px} .drawer__remove{background:none;border:0;padding:4px;opacity:.7} .drawer__remove:hover{opacity:1} .drawer__footer{padding:16px 20px 20px;border-top:1px solid var(--c-2);display:flex;flex-direction:column;gap:12px} .drawer__total{display:flex;justify-content:space-between;font-size:18px;font-weight:700} .drawer__total strong{font-family:var(--font-accent);font-weight:400;font-size:20px} .drawer__note{font-size:13px;opacity:.7;margin:0} .drawer__viewcart{text-align:center;text-decoration:underline;font-size:14px} .drawer__empty{flex:1;display:flex;flex-direction:column;gap:16px;align-items:center;justify-content:center;padding:24px;text-align:center} .drawer__nav{padding:12px 20px} .drawer__nav .menu{display:flex;flex-direction:column} .drawer__nav .menu a{display:block;padding:14px 0;font-size:20px;font-weight:800;border-bottom:1px solid var(--c-2)} .search-modal{position:fixed;inset:0 0 auto 0;z-index:110;background:var(--c-white);padding:20px var(--gutter);transform:translateY(-100%);transition:transform .3s ease;box-shadow:0 10px 30px rgba(0,0,0,.15)} .search-modal.is-open{transform:none} .search-modal__form{display:flex;gap:8px;align-items:center;max-width:900px;margin-inline:auto} .search-modal__form input[type=search]{flex:1;padding:14px 20px;border:1px solid var(--c-navy);border-radius:var(--radius-btn);background:transparent;font-size:18px;outline:none} .toast{position:fixed;bottom:24px;inset-inline:0;margin-inline:auto;width:max-content;max-width:90vw;background:var(--c-navy);color:var(--c-accent);padding:12px 24px;border-radius:var(--radius-btn);z-index:200;font-size:15px} body.no-scroll{overflow:hidden} /* ---------- Footer ---------- */ .location-wrap{background:var(--c-page);padding-inline:var(--gutter)} .footer-main{background:var(--c-accent);color:var(--c-navy)} .footer-main__inner{display:grid;grid-template-columns:1fr 1.2fr 1.3fr;gap:30px;padding:36px var(--gutter);align-items:start;max-width:2400px;margin-inline:auto} .footer-menu__title{font-size:22px;font-weight:800;margin-block-end:.6em} .footer-menu__list a{display:block;padding:5px 0;font-size:16px} .footer-news__text h3{font-size:22px;font-weight:800;margin-block-end:.4em} .footer-news__text p{font-size:16px;margin:0;max-width:34ch} .footer-news__form{display:flex;gap:12px;flex-wrap:wrap;align-items:stretch} .footer-news__form input[type=email]{flex:1;min-width:180px;background:var(--c-navy);color:var(--c-accent);border:1px solid var(--c-navy);border-radius:var(--radius-input);padding:16px 24px;font-size:16px;outline:none} .footer-news__form input::placeholder{color:var(--c-accent);opacity:.75} .footer-news__msg{flex-basis:100%;margin:0;font-size:14px} .footer-utilities{background:var(--c-navy);color:var(--c-1)} .footer-utilities__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px var(--gutter);max-width:2400px;margin-inline:auto} .footer-copyright{font-size:14px} .social-links{display:flex;gap:16px;align-items:center} .social-links a{display:flex} /* ---------- Contenu riche / articles / formulaires ---------- */ .rte{line-height:1.75} .rte h2{font-size:24px;margin-block:1.2em .5em} .rte h3{font-size:24px;margin-block:1em .4em} .rte img{border-radius:0} .rte ul{list-style:disc;padding-inline-start:24px;margin-block-end:1em} .rte ol{list-style:decimal;padding-inline-start:24px;margin-block-end:1em} .rte a{text-decoration:underline} .post-list{display:grid;gap:40px} .post-card__title{font-size:28px} .post-card__meta{font-size:14px;opacity:.7;margin-block:6px 12px} .post-hero{margin-block:24px} input[type=text],input[type=email],input[type=tel],input[type=password],input[type=number],input[type=search],input[type=url],select,textarea{background:var(--c-navy);color:var(--c-accent);border:1px solid var(--c-navy);border-radius:var(--radius-input);padding:14px 18px;font-family:var(--font-body);font-size:16px;max-width:100%} input::placeholder,textarea::placeholder{color:var(--c-accent);opacity:.7} .inline-search{display:flex;gap:12px;justify-content:center} .comments{margin-block-start:40px} /* WooCommerce : panier / paiement / compte (blocs & shortcodes) */ .woocommerce-cart .rte,.woocommerce-checkout .rte,.woocommerce-account .rte{line-height:1.5} .wc-block-components-button:not(.is-link),.wc-block-cart__submit-button,.wc-block-components-checkout-place-order-button{background:var(--c-btn-bg)!important;color:var(--c-btn-text)!important;border-radius:var(--radius-btn)!important;font-weight:700;border:0!important} .wp-block-woocommerce-cart,.wp-block-woocommerce-checkout{color:var(--c-text)} .wc-block-components-text-input input,.wc-block-components-select .wc-blocks-components-select__select,.wc-block-components-textarea{background:transparent!important;color:var(--c-text)!important} .wc-block-cart-item__image img{border-radius:0} .woocommerce table.shop_table{width:100%;border-collapse:collapse} .woocommerce table.shop_table th,.woocommerce table.shop_table td{padding:12px;border-bottom:1px solid rgba(20,27,42,.15);text-align:start} .woocommerce form .form-row{margin-block-end:16px} .woocommerce form .form-row label{display:block;margin-block-end:6px;font-weight:700;font-size:15px} .woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea{width:100%} .woocommerce-MyAccount-navigation ul{display:flex;gap:16px;flex-wrap:wrap;margin-block-end:24px} .woocommerce-MyAccount-navigation li.is-active a{text-decoration:underline} .woocommerce-cart-form .product-remove a{color:var(--c-navy);font-size:24px} /* ---------- Panier / paiement / compte (shortcodes WooCommerce) ---------- */ .woocommerce input.input-text,.woocommerce textarea,.woocommerce select,.woocommerce-page input.input-text,.woocommerce-page textarea,.woocommerce-page select,.select2-container--default .select2-selection--single{background:#fff!important;color:var(--c-text)!important;border:1px solid rgba(20,27,42,.35)!important;border-radius:var(--radius-input)!important;padding:12px 14px;font-family:var(--font-body)} .woocommerce input.input-text::placeholder,.woocommerce textarea::placeholder{color:var(--c-text);opacity:.45} .woocommerce-cart-form .coupon{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .woocommerce-cart-form .coupon input.input-text{width:190px} .woocommerce table.cart img{width:72px;height:auto;border-radius:0} .woocommerce table.cart td.actions{padding-block:16px} .cart_totals h2,.woocommerce-checkout h3,.woocommerce-billing-fields h3,#order_review_heading{font-size:28px;margin-block:24px 12px} .woocommerce .cart_totals table{width:100%} .woocommerce #payment{background:var(--c-1);border-radius:8px} .woocommerce #payment div.payment_box{background:var(--c-2);color:var(--c-text)} .woocommerce #payment ul.payment_methods{border-bottom:1px solid rgba(20,27,42,.15)} .woocommerce-checkout #place_order,.woocommerce .checkout-button{width:100%} .woocommerce-info,.woocommerce-message{border-top:0;background:var(--c-1);color:var(--c-text)} .woocommerce-info::before,.woocommerce-message::before{display:none} .woocommerce-cart-form .product-remove a.remove{color:var(--c-navy)!important;background:none!important} .woocommerce-cart-form .product-remove a.remove:hover{background:var(--c-navy)!important;color:var(--c-accent)!important} .facets .facets__sort select,.facets select{background:transparent!important;color:inherit!important;border:0!important;padding:6px 4px!important;border-radius:0!important;min-width:0} .facets .facet__panel input[type=number]{background:transparent!important;color:var(--c-text)!important} /* ---------- Sélecteur de langue ---------- */ /* Sélecteur de langue (globe) */ .lang-switcher{position:relative} .lang-switcher summary{list-style:none;cursor:pointer} .lang-switcher summary::-webkit-details-marker{display:none} .lang-switcher__menu{position:absolute;inset-inline-end:0;top:calc(100% + 8px);min-width:140px;margin:0;padding:6px;list-style:none;background:#f5f4f2;color:#141b2a;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.18);z-index:60} .lang-switcher__menu a{display:block;padding:8px 12px;border-radius:8px;font-size:14px;font-weight:600;color:inherit;text-decoration:none} .lang-switcher__menu a:hover,.lang-switcher__menu a.is-current{background:rgba(20,27,42,.1)} [dir=ltr] .card__title{text-align:start} [dir=ltr] body{letter-spacing:0} /* ---------- Animations d'apparition ---------- */ @media (prefers-reduced-motion:no-preference){ .card{animation:cardIn .5s ease both} @keyframes cardIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} } @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}} /* ---------- Responsive ---------- */ @media (max-width:1100px){ .product-grid{grid-template-columns:repeat(3,minmax(0,1fr))} .product-grid--home{gap:24px} .footer-main__inner{grid-template-columns:1fr 1fr} .footer-news__form{grid-column:1/-1} } @media (max-width:900px){ :root{--gutter:20px;--header-h:96px} .header__row{grid-template-columns:auto 1fr auto;min-height:var(--header-h);padding-block:6px} .header__burger{display:inline-flex;justify-self:start} .header__nav{display:none} .header__logo{justify-self:center;padding:4px 0} .header .header__logo-img{height:72px} .header__account{display:none} .product-information__grid{grid-template-columns:1fr} .media-gallery__item{height:auto;aspect-ratio:auto;min-height:60svh} .has-transparent-header .media-gallery__item:first-child{padding-top:var(--header-h)} .product-details{position:static;padding:16px var(--gutter) 32px!important} .product-details__inner{max-width:none} .section{padding-block:32px} .collection-head{padding-block:32px 0} } @media (max-width:700px){ .product-grid,.product-grid--collection.is-dense-2{grid-template-columns:repeat(2,minmax(0,1fr))} .product-grid--home{gap:16px} .product-grid--collection,.product-grid--recs{padding-inline:0} .price,.card .price{font-size:17px} .facets{padding-inline:0} .facets__group{gap:14px} .footer-main__inner{grid-template-columns:1fr;gap:24px} .footer-utilities__inner{flex-direction:column-reverse;gap:12px} .recs__title{font-size:26px} } /* ========================================================= MAIN SECTION ========================================================= */ .youdec-location-section { width: 100%; min-height: 720px; box-sizing: border-box; padding: 60px 4% 75px; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 75px; align-items: center; background: #e9e8df; /* مهم: نخلي الـ section LTR باش ترتيب الـ grid ما يتقلبش بسبب اللغة العربية. */ direction: ltr; } /* ========================================================= ARABIC DESKTOP MAP = LEFT INFO = RIGHT ========================================================= */ .youdec-ar .youdec-map { grid-column: 1; grid-row: 1; } .youdec-ar .youdec-info { grid-column: 2; grid-row: 1; direction: rtl; text-align: right; margin-left: auto; margin-right: 0; padding-left: 35px; padding-right: 0; box-sizing: border-box; } /* ========================================================= FRENCH / ENGLISH DESKTOP INFO = LEFT MAP = RIGHT ========================================================= */ .youdec-ltr .youdec-info { grid-column: 1; grid-row: 1; direction: ltr; text-align: left; margin-left: 0; margin-right: auto; padding-right: 35px; padding-left: 0; box-sizing: border-box; } .youdec-ltr .youdec-map { grid-column: 2; grid-row: 1; } /* ========================================================= INFO ========================================================= */ .youdec-info { width: 100%; max-width: 680px; } /* ========================================================= MAP ========================================================= */ .youdec-map { position: relative; width: 100%; height: 620px; overflow: hidden; border-radius: 34px; background: #d8d7cf; box-shadow: 0 20px 60px rgba(20,25,35,.08), 0 40px 100px rgba(20,25,35,.07); } .youdec-map iframe { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; display: block; border: 0; } /* ========================================================= MAP CLICK ========================================================= */ .youdec-map-click { position: absolute; inset: 0; z-index: 10; display: block; cursor: pointer; background: transparent; } /* ========================================================= EYEBROW ========================================================= */ .youdec-eyebrow { width: 100%; margin: 0 0 22px; font-family: var(--font-body); font-size: 32px; line-height: 1.2; font-weight: 800; letter-spacing: .12em; color: #806a35; text-transform: uppercase; } /* ARABIC EYEBROW */ .youdec-ar .youdec-eyebrow { font-family: var(--font-body); font-size: 32px; line-height: 1.5; font-weight: 800; letter-spacing: 0; text-transform: none; direction: rtl; text-align: right; } /* ========================================================= TITLE ========================================================= */ .youdec-title { width: 100%; margin: 0 0 42px; font-family: var(--font-body); font-size: clamp(56px, 5vw, 76px); line-height: 1; font-weight: 800; letter-spacing: -.06em; color: #080f1a; } /* ARABIC TITLE */ .youdec-ar .youdec-title { font-family: var(--font-body); font-size: clamp(52px, 4.5vw, 72px); line-height: 1.25; font-weight: 800; letter-spacing: 0; direction: rtl; text-align: right; } /* FR / EN TITLE */ .youdec-ltr .youdec-title { direction: ltr; text-align: left; } /* ========================================================= DETAILS ========================================================= */ .youdec-details { width: 100%; display: flex; flex-direction: column; gap: 30px; } /* ========================================================= ARABIC DETAIL ========================================================= */ .youdec-ar .youdec-detail { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; direction: rtl; text-align: right; } /* ========================================================= LTR DETAIL ========================================================= */ .youdec-ltr .youdec-detail { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; direction: ltr; text-align: left; } /* ========================================================= LABEL ========================================================= */ .youdec-label { display: block; width: 100%; font-family: var(--font-body); font-size: 15px; line-height: 1.2; font-weight: 800; letter-spacing: .16em; color: #3f464d; text-transform: uppercase; } /* ARABIC LABEL */ .youdec-ar .youdec-label { font-family: var(--font-body); font-size: 18px; line-height: 1.5; font-weight: 700; letter-spacing: 0; text-transform: none; color: #3f464d; direction: rtl; text-align: right; } /* ========================================================= CONTACT TEXT ========================================================= */ .youdec-detail a, .youdec-detail p { display: block; width: 100%; margin: 0; font-family: var(--font-body); font-size: 20px; line-height: 1.5; font-weight: 800; color: #20252b; text-decoration: none; } /* ========================================================= ARABIC CONTACT TEXT ========================================================= */ .youdec-ar .youdec-detail a, .youdec-ar .youdec-detail p { font-family: var(--font-body); font-size: 22px; line-height: 1.75; font-weight: 700; color: #20252b; direction: rtl; text-align: right; } /* ========================================================= EMAIL + PHONE ========================================================= */ .youdec-ar .youdec-contact-link[dir="ltr"] { direction: ltr !important; text-align: right !important; unicode-bidi: plaintext; } /* ========================================================= HOVER ========================================================= */ .youdec-detail a { transition: color .2s ease, opacity .2s ease; } .youdec-detail a:hover { color: #11161b; opacity: .7; } /* ========================================================= TABLET ========================================================= */ @media screen and (max-width: 1100px) { .youdec-location-section { min-height: 650px; padding: 50px 4% 65px; gap: 45px; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } .youdec-ar .youdec-info { padding-left: 20px; } .youdec-ltr .youdec-info { padding-right: 20px; } .youdec-map { height: 520px; border-radius: 28px; } .youdec-eyebrow { font-size: 26px; } .youdec-ar .youdec-eyebrow { font-size: 28px; } .youdec-title { font-size: 58px; } .youdec-ar .youdec-title { font-size: 54px; } .youdec-detail a, .youdec-detail p { font-size: 18px; } .youdec-ar .youdec-detail a, .youdec-ar .youdec-detail p { font-size: 20px; } } /* ========================================================= MOBILE MAP FIRST EVERYTHING CENTERED ========================================================= */ @media screen and (max-width: 800px) { .youdec-location-section { width: 100% !important; min-height: auto !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 45px !important; padding: 40px 20px 55px !important; box-sizing: border-box !important; direction: ltr !important; text-align: center !important; } /* ===================================================== MAP ====================================================== */ .youdec-map, .youdec-ar .youdec-map, .youdec-ltr .youdec-map { order: 1 !important; width: 100% !important; height: 400px !important; min-height: 400px !important; margin: 0 auto !important; flex: 0 0 400px !important; border-radius: 24px !important; } /* ===================================================== INFO ====================================================== */ .youdec-info, .youdec-ar .youdec-info, .youdec-ltr .youdec-info { order: 2 !important; width: 100% !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; direction: ltr !important; text-align: center !important; box-sizing: border-box !important; } /* ===================================================== EYEBROW ====================================================== */ .youdec-eyebrow, .youdec-ar .youdec-eyebrow, .youdec-ltr .youdec-eyebrow { width: 100% !important; margin: 0 0 18px !important; direction: ltr !important; text-align: center !important; font-size: 22px !important; line-height: 1.4 !important; letter-spacing: .08em !important; } .youdec-ar .youdec-eyebrow { direction: rtl !important; text-align: center !important; font-size: 25px !important; letter-spacing: 0 !important; } /* ===================================================== TITLE ====================================================== */ .youdec-title, .youdec-ar .youdec-title, .youdec-ltr .youdec-title { width: 100% !important; margin: 0 auto 35px !important; direction: ltr !important; text-align: center !important; font-size: 48px !important; line-height: 1.1 !important; letter-spacing: -.04em !important; } .youdec-ar .youdec-title { direction: rtl !important; text-align: center !important; font-size: 46px !important; line-height: 1.3 !important; letter-spacing: 0 !important; } /* ===================================================== DETAILS ====================================================== */ .youdec-details, .youdec-ar .youdec-details, .youdec-ltr .youdec-details { width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 25px !important; margin: 0 auto !important; direction: ltr !important; text-align: center !important; } /* ===================================================== EACH DETAIL ====================================================== */ .youdec-detail, .youdec-ar .youdec-detail, .youdec-ltr .youdec-detail { width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 8px !important; margin: 0 auto !important; direction: ltr !important; text-align: center !important; } /* ===================================================== LABELS ====================================================== */ .youdec-label, .youdec-ar .youdec-label, .youdec-ltr .youdec-label { display: block !important; width: 100% !important; margin: 0 auto !important; direction: ltr !important; text-align: center !important; font-size: 13px !important; line-height: 1.5 !important; letter-spacing: .1em !important; } .youdec-ar .youdec-label { direction: rtl !important; text-align: center !important; font-size: 15px !important; letter-spacing: 0 !important; } /* ===================================================== TEXT ====================================================== */ .youdec-detail a, .youdec-detail p, .youdec-ar .youdec-detail a, .youdec-ar .youdec-detail p, .youdec-ltr .youdec-detail a, .youdec-ltr .youdec-detail p { display: block !important; width: 100% !important; margin: 0 auto !important; direction: ltr !important; text-align: center !important; font-size: 17px !important; line-height: 1.6 !important; } /* Arabic */ .youdec-ar .youdec-detail a, .youdec-ar .youdec-detail p { direction: rtl !important; text-align: center !important; font-size: 19px !important; line-height: 1.8 !important; } /* Email + phone in Arabic always centered */ .youdec-ar .youdec-contact-link[dir="ltr"] { direction: ltr !important; text-align: center !important; unicode-bidi: plaintext; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media screen and (max-width: 480px) { .youdec-location-section { padding: 30px 16px 45px !important; gap: 35px !important; } /* MAP */ .youdec-map, .youdec-ar .youdec-map, .youdec-ltr .youdec-map { height: 350px !important; min-height: 350px !important; flex-basis: 350px !important; border-radius: 20px !important; } /* EYEBROW */ .youdec-eyebrow, .youdec-ltr .youdec-eyebrow { font-size: 19px !important; text-align: center !important; } .youdec-ar .youdec-eyebrow { font-size: 22px !important; text-align: center !important; } /* TITLE */ .youdec-title, .youdec-ltr .youdec-title { font-size: 42px !important; text-align: center !important; } .youdec-ar .youdec-title { font-size: 40px !important; text-align: center !important; } /* LABELS */ .youdec-label, .youdec-ltr .youdec-label { font-size: 13px !important; text-align: center !important; } .youdec-ar .youdec-label { font-size: 15px !important; text-align: center !important; } /* TEXT */ .youdec-detail a, .youdec-detail p, .youdec-ltr .youdec-detail a, .youdec-ltr .youdec-detail p { font-size: 16px !important; text-align: center !important; } .youdec-ar .youdec-detail a, .youdec-ar .youdec-detail p { font-size: 18px !important; text-align: center !important; } } /* ---------- Page collections ---------- */ .coll-list{padding:48px 0 64px} .coll-list__title{margin:0 0 48px;text-align:center;font-size:clamp(1.5rem,2.4vw,2rem);font-weight:700} .coll-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px 12px} .coll-card a{display:block;color:inherit;text-decoration:none} .coll-card__img{display:block;overflow:hidden} .coll-card__img img{display:block;width:100%;height:auto;transition:transform .4s ease} .coll-card a:hover .coll-card__img img{transform:scale(1.03)} .coll-card__name{display:block;margin-top:8px;text-align:center;font-size:1.25rem;line-height:1.4;padding-inline-start:5px} @media (max-width:749px){.coll-grid{grid-template-columns:repeat(2,1fr)}.coll-card__name{font-size:1rem}} /* Bouton commander / boutons WooCommerce */ .woocommerce #payment #place_order,.woocommerce-page #payment #place_order,.woocommerce .checkout-button,.woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce button.button,.woocommerce a.button{background:var(--c-btn-bg)!important;color:var(--c-btn-text)!important;border:0!important;border-radius:var(--radius-btn)!important;font-family:var(--font-body);font-weight:700;padding:14px 28px;text-align:center} .woocommerce #payment #place_order:hover,.woocommerce .checkout-button:hover,.woocommerce button.button:hover,.woocommerce a.button:hover{opacity:.9} .woocommerce-checkout #payment div.form-row{padding:16px} /* Menu mobile : fond doré, en-tête marine avec le logo (à la place du nom du site). */ .drawer--menu{background:var(--c-accent);color:var(--c-navy)} .drawer--menu .drawer__header{background:var(--c-navy);color:var(--c-accent);border-bottom:0;padding:8px 20px} .drawer--menu .drawer__header .header__logo{padding:4px 0} .drawer--menu .drawer__header .header__logo-img{height:64px;width:auto;max-width:none;border-radius:0} .drawer--menu .drawer__header .icon-btn{color:var(--c-accent)} .drawer--menu .drawer__nav .menu a{color:var(--c-navy);border-bottom-color:rgba(20,27,42,.25)} .drawer--menu .drawer__nav .menu .current-menu-item>a{opacity:.7} /* Barre de défilement masquée (le défilement reste actif). */ html{background:var(--c-page);scrollbar-width:none;-ms-overflow-style:none} ::-webkit-scrollbar{display:none;width:0;height:0} /* Footer mobile : tout centré. */ @media (max-width:749px){ .footer-main__inner{text-align:center;justify-items:center} .footer-menu__list{display:flex;flex-direction:column;align-items:center} .footer-news__text p{margin-inline:auto} .footer-news__form{justify-content:center;width:100%} .footer-news__form input[type=email]{text-align:center} } /* Langues : dans le menu mobile (centré), globe masqué du header sur mobile. */ .drawer__lang{display:none} @media (max-width:900px){ .header__actions .lang-switcher{display:none} .drawer--menu .drawer__lang{display:flex;flex-direction:column;align-items:center;gap:10px;padding:24px 20px;margin-top:auto;border-top:1px solid rgba(20,27,42,.25)} .drawer__lang-icon{display:inline-flex;color:var(--c-navy)} .drawer__lang ul{display:flex;gap:18px;list-style:none;margin:0;padding:0;justify-content:center} .drawer__lang a{font-size:16px;font-weight:700;color:var(--c-navy);opacity:.7;text-decoration:none} .drawer__lang a.is-current{opacity:1;text-decoration:underline;text-underline-offset:4px} } /* Header mobile : logo exactement au centre de l'écran (colonnes latérales égales). */ @media (max-width:900px){ .header__row{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)} .header__actions{justify-self:end} .header__burger{justify-self:start} .header__logo{justify-self:center} } /* Mobile header: icons slightly further to the edge, tighter spacing */ @media (max-width:900px){ .header__actions{gap:0;margin-inline-end:-4px} .header__actions .icon-btn{width:32px} } /* Mobile: product card title + price centered */ @media (max-width:900px){ .card__info{text-align:center;align-items:center} .card__title,.card__title a{text-align:center} .card__info .price{justify-content:center;text-align:center} } @media (max-width:900px){ html .card .card__info .card__title,html .card .card__info .card__title a{text-align:center} } /* Typography: Arabic = Noto Kufi (titles) + IBM Plex Sans Arabic (text); FR/EN = Playfair Display (titles) + Jost (text, numbers) */ html[lang^="ar"]{ --font-body:"Readex Pro","Jost",system-ui,Tahoma,sans-serif; --font-head:"Lemonada","Readex Pro",serif; } html[lang^="ar"] h1,html[lang^="ar"] h2,html[lang^="ar"] h3,html[lang^="ar"] h4,html[lang^="ar"] h5,html[lang^="ar"] h6{font-weight:700;line-height:1.35;letter-spacing:0} .card__title,.header__nav a,.footer-menu__title,.button{font-family:var(--font-head)} .card__title{font-weight:700} .price,.card .price,.drawer__price,.drawer__total strong,.cart_item .amount,.woocommerce-Price-amount{font-family:var(--font-accent);font-weight:500;letter-spacing:.01em} /* beat Elementor kit font overrides */ html body[class]{font-family:var(--font-body)} html body h1,html body h2,html body h3,html body h4,html body h5,html body h6{font-family:var(--font-head)} html body .card__title,html body .header__nav a,html body .footer-menu__title,html body .button{font-family:var(--font-head)} html body .price,html body .card .price{font-family:var(--font-accent)} html body .youdec-title,html body .youdec-eyebrow{font-family:var(--font-head)} html[lang^="ar"] .card__title,html[lang^="ar"] h1,html[lang^="ar"] h2,html[lang^="ar"] h3,html[lang^="ar"] h4,html[lang^="ar"] h5,html[lang^="ar"] h6{font-weight:700} html[lang^="ar"] .header__nav a,html[lang^="ar"] .button{font-weight:600;font-size:1.08em} html[lang^="ar"] body,html[lang^="ar"] body[class]{font-weight:300} html[lang^="ar"] .header__nav a,html[lang^="ar"] .button{font-size:.95em;font-weight:600} html[lang^="ar"] h1,html[lang^="ar"] h2,html[lang^="ar"] h3,html[lang^="ar"] .card__title{font-weight:600;line-height:1.5} /* Product cards: title + price centered on all screens */ html body .card .card__info{text-align:center;align-items:center} html body .card .card__info .card__title,html body .card .card__info .card__title a{text-align:center} html body .card .card__info .price{text-align:center;justify-content:center;display:block} /* Collection names: bold, elegant heading font */ html body .coll-card__name{font-family:var(--font-head);font-weight:700;font-size:1.15rem;line-height:1.5;color:var(--c-navy);letter-spacing:0;margin-top:12px} html body .coll-list__title{font-family:var(--font-head);font-weight:700} @media (max-width:749px){html body .coll-card__name{font-size:.95rem}} /* Page de redirection CMI : masquer la boîte "Merci pour votre commande, redirection…" (jQuery blockUI) */ body.woocommerce-order-pay .blockUI.blockMsg, body.woocommerce-order-pay .blockMsg { display: none !important; } /* Bloc de paiement : fond beige-gris (comme la carte) au lieu du blanc */ html body .woocommerce #payment, html body .woocommerce-checkout #payment { background: #e9e8e0; } /* Logos de paiement (pied de page) */ .footer-pay{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;padding:18px var(--gutter,24px) 6px} .footer-pay__label{font-size:13px;letter-spacing:.06em;text-transform:uppercase;opacity:.75} .footer-pay__list{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;list-style:none;margin:0;padding:0} .footer-pay__list li{display:flex;align-items:center;justify-content:center;height:46px;padding:0 14px;background:#fff;border-radius:10px;box-shadow:0 1px 2px rgba(20,27,42,.12)} .footer-pay__list img{height:28px;width:auto;max-width:150px;object-fit:contain;display:block} @media (max-width:600px){.footer-pay__list li{height:40px;padding:0 10px}.footer-pay__list img{height:24px}} /* Pays (un seul pays) : champ pleine largeur, texte centré, élégant */ html body .woocommerce-checkout .form-row .woocommerce-input-wrapper > strong{ display:flex;align-items:center;justify-content:center;width:100%;box-sizing:border-box; min-height:50px;padding:12px 14px;background:#fff;color:var(--c-text); border:1px solid rgba(20,27,42,.35);border-radius:var(--radius-input); font-family:var(--font-body);font-size:16px;font-weight:600;letter-spacing:.02em;text-align:center; } /* Libellé "Paiement sécurisé" du pied de page */ html body .footer-pay__label{ font-family:var(--font-head);font-size:20px;font-weight:600;letter-spacing:.02em; text-transform:none;opacity:1;color:var(--c-text);position:relative;padding-inline:14px; } html body .footer-pay__label::before,html body .footer-pay__label::after{content:"";display:inline-block;width:26px;height:1px;background:currentColor;opacity:.45;vertical-align:middle;margin-inline:10px} @media (max-width:600px){html body .footer-pay__label{font-size:17px}} /* Pays : le