/* Theme Name: Nafas Bio Theme URI: https://nafasbio.com/ Author: Nafas Bio Description: Thème sur mesure pour Nafas Bio — déodorant naturel à la nigelle. Page de vente bilingue français / arabe avec commande à la livraison (COD) connectée à WooCommerce. Version: 1.3.4 Requires at least: 6.0 Requires PHP: 7.4 License: Usage privé — Nafas Bio Text Domain: nafas-bio Tags: one-page, landing-page, woocommerce, ecommerce, rtl-language-support WC requires at least: 7.0 WC tested up to: 9.9 Ce fichier est ASSEMBLÉ par build-style.py — ne l'éditez pas directement, vos modifications seraient perdues au prochain build. Éditez css-src/. */ /* ========================================================================== Nafas Bio — feuille de styles principale Compatible WordPress / WooCommerce (aucune dépendance externe hors polices) ========================================================================== */ :root{ --nb-bg:#FAF7F0; --nb-bg-alt:#F3EFE4; --nb-bg-hero:#F7F3EA; --nb-ink:#0B1F04; --nb-ink-2:#1C2E16; --nb-body:#42513B; --nb-muted:#5B6B52; --nb-faint:#8A8574; --nb-green:#7DBD07; --nb-green-hi:#8FD40D; --nb-green-deep:#3C6B1E; --nb-green-dark:#2A4F13; --nb-blue:#72A3F2; --nb-blue-deep:#3D6FB8; --nb-sand:#8A6A4A; --nb-line:rgba(11,31,4,.08); --nb-line-2:rgba(11,31,4,.18); --nb-dark:#0B1F04; --nb-darker:#081802; --nb-on-dark:#F3F1E7; --nb-on-dark-2:#C3CFBB; --nb-shell:1680px; --nb-pad:clamp(20px,3vw,56px); --nb-sec:clamp(44px,5.2vw,78px); --nb-radius:24px; } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%} /* « clip » et non « hidden » : empêche tout défilement horizontal parasite sans créer de conteneur de défilement, ce qui casserait l'en-tête sticky. */ html{overflow-x:clip} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important} } body{ margin:0; background:var(--nb-bg); color:var(--nb-ink); font-family:"Jost","Century Gothic",Futura,"Segoe UI",sans-serif; font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; /* Pas d'overflow-x:hidden ici : sur il force overflow-y:auto, ce qui cree un second conteneur de defilement et decale les liens d'ancre. Le confinement horizontal est assure par html{overflow-x:clip}. */ } img{max-width:100%;display:block} a{color:var(--nb-green-deep);text-decoration:none;transition:color .18s ease} a:hover{color:var(--nb-green)} input,select,textarea,button{font-family:inherit;font-size:inherit} h1,h2,h3,h4{text-wrap:pretty;letter-spacing:-.01em} :focus-visible{outline:3px solid var(--nb-green-deep);outline-offset:2px;border-radius:4px} .nb-skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--nb-ink);color:#fff;padding:12px 20px;border-radius:0 0 10px 0} .nb-skip:focus{left:0;color:#fff} .nb-shell{max-width:var(--nb-shell);margin:0 auto;padding:0 var(--nb-pad)} .nb-section{padding:var(--nb-sec) 0} .nb-alt{background:var(--nb-bg-alt)} .nb-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .nb-eyebrow{display:block;font-size:13px;letter-spacing:.14em;color:var(--nb-green);font-weight:600;text-transform:uppercase} .nb-eyebrow.is-blue{color:var(--nb-blue-deep)} .nb-h2{font-size:clamp(28px,3.2vw,44px);line-height:1.14;font-weight:700;margin:14px 0 0} .nb-lede{font-size:clamp(16px,1.2vw,17.5px);line-height:1.7;color:var(--nb-body);margin:18px 0 0;max-width:56ch} .nb-note{font-size:12.5px;color:var(--nb-faint);line-height:1.5;margin:18px 0 0} @keyframes nb-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} .nb-rise{animation:nb-rise .7s ease both} /* ---------- Boutons ---------- */ .nb-btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; font-weight:600;font-size:16.5px;line-height:1; padding:17px 30px;min-height:56px;border-radius:8px;border:1px solid transparent; cursor:pointer;text-align:center;transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease; } .nb-btn--primary{background:var(--nb-green-deep);color:#F7F5EC} .nb-btn--primary:hover{background:var(--nb-green-dark);color:#F7F5EC} .nb-btn--lime{background:var(--nb-green);color:var(--nb-ink);border-radius:999px} .nb-btn--lime:hover{background:var(--nb-green-hi);color:var(--nb-ink)} .nb-btn--ghost{border-color:var(--nb-line-2);color:var(--nb-ink);background:none} .nb-btn--ghost:hover{border-color:var(--nb-green-deep);color:var(--nb-green-deep)} .nb-btn--soft{background:var(--nb-bg-alt);color:var(--nb-ink);border-radius:999px;width:100%;font-size:16px;min-height:52px;padding:15px} .nb-btn--soft:hover{background:#E7E1D0} .nb-btn--wa{background:#25D366;color:#062b12;border-radius:999px} .nb-btn--wa:hover{background:#1FBE59;color:#062b12} .nb-btn--block{width:100%} .nb-btn[disabled]{opacity:.6;cursor:progress} /* ---------- Bandeau + en-tête ---------- */ .nb-topbar{background:var(--nb-dark);color:var(--nb-on-dark);font-size:13.5px;letter-spacing:.06em;padding:11px 20px;text-align:center} .nb-header{position:sticky;top:0;z-index:60;background:rgba(250,247,240,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--nb-line)} .nb-header__in{max-width:var(--nb-shell);margin:0 auto;padding:12px var(--nb-pad);display:flex;align-items:center;gap:24px} .nb-brand{display:flex;align-items:center;gap:11px;flex:none} .nb-brand img{height:38px;width:auto} .nb-brand__txt{display:flex;flex-direction:column;line-height:1} .nb-brand__name{font-size:17px;font-weight:700;letter-spacing:.12em;color:var(--nb-ink)} .nb-brand__sub{font-size:9px;letter-spacing:.22em;color:var(--nb-muted);margin-top:3px} .nb-nav{display:flex;gap:26px;margin-left:auto;font-size:14.5px} .nb-nav a{color:#2A3D22} .nb-nav a:hover,.nb-nav a[aria-current="page"]{color:var(--nb-green-deep)} .nb-header__cta{display:flex;align-items:center;gap:10px} .nb-lang{display:flex;align-items:center;border:1px solid var(--nb-line-2);border-radius:999px;overflow:hidden;height:44px} .nb-lang__on{background:var(--nb-dark);color:#F7F5EC;font-size:13px;font-weight:600;padding:0 14px;display:flex;align-items:center;height:100%} .nb-lang__off{font-size:13px;font-weight:600;padding:0 14px;color:#2A3D22;display:flex;align-items:center;height:100%;font-family:Cairo,sans-serif} .nb-hdr-wa{display:flex;align-items:center;gap:7px;border:1px solid var(--nb-line-2);border-radius:999px;padding:9px 15px;font-size:14px;color:var(--nb-ink);min-height:44px} .nb-hdr-wa:hover{border-color:var(--nb-green);color:var(--nb-ink)} .nb-hdr-order{background:var(--nb-green);color:var(--nb-ink);font-weight:600;font-size:14.5px;border-radius:999px;padding:12px 22px;min-height:44px;display:flex;align-items:center} .nb-hdr-order:hover{background:var(--nb-green-hi);color:var(--nb-ink)} .nb-burger{display:none;width:46px;height:46px;border:1px solid var(--nb-line-2);border-radius:12px;background:none;cursor:pointer;padding:0;align-items:center;justify-content:center;margin-left:auto} .nb-burger span{display:block;width:20px;height:2px;background:var(--nb-ink);position:relative;transition:background .2s} .nb-burger span::before,.nb-burger span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--nb-ink);transition:transform .22s ease,top .22s ease} .nb-burger span::before{top:-6px} .nb-burger span::after{top:6px} .nb-burger[aria-expanded="true"] span{background:transparent} .nb-burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)} .nb-burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)} /* ---------- Héros ---------- */ .nb-hero{background:var(--nb-bg-hero)} .nb-hero__grid{display:flex;flex-wrap:wrap;align-items:stretch} .nb-hero__copy{flex:1 1 520px;min-width:300px;display:flex;flex-direction:column;justify-content:center;padding:clamp(40px,4.5vw,72px) clamp(24px,4vw,80px)} .nb-hero__media{flex:1 1 520px;min-width:300px;position:relative;background:#EFEADC;min-height:clamp(420px,52vw,760px)} .nb-hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% center} .nb-hero__fade{position:absolute;top:0;bottom:0;left:0;width:clamp(24px,4vw,70px);background:linear-gradient(90deg,var(--nb-bg-hero),rgba(247,243,234,0));pointer-events:none} .nb-h1{font-size:clamp(34px,3.9vw,56px);line-height:1.12;font-weight:700;letter-spacing:-.015em;margin:0;max-width:15ch} .nb-h1 em{font-style:italic;font-weight:500;color:var(--nb-green-deep)} .nb-rule{display:flex;align-items:center;gap:14px;margin:clamp(22px,2.4vw,30px) 0;max-width:520px} .nb-rule i{flex:1;height:1px;background:linear-gradient(90deg,rgba(11,31,4,.22),rgba(11,31,4,.05))} .nb-rule i:last-child{background:linear-gradient(270deg,rgba(11,31,4,.22),rgba(11,31,4,.05))} .nb-rule b{width:6px;height:6px;transform:rotate(45deg);background:var(--nb-green);flex:none} .nb-hero__p{font-size:clamp(16px,1.15vw,18px);line-height:1.75;color:var(--nb-body);margin:0;max-width:52ch} .nb-hero__claim{font-size:clamp(17px,1.2vw,19px);font-weight:600;color:var(--nb-ink-2);margin:22px 0 0} .nb-hero__btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:clamp(26px,3vw,36px)} .nb-trust{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(20px,3vw,44px);margin-top:clamp(34px,4vw,56px)} .nb-trust__i{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center} .nb-trust__i span:first-child{width:56px;height:56px;border-radius:50%;border:1px solid rgba(11,31,4,.2);display:flex;align-items:center;justify-content:center} .nb-trust__i span:last-child{font-size:14px;color:var(--nb-body)} .nb-trust__dot{color:rgba(11,31,4,.2)} /* ---------- Problème ---------- */ .nb-split{display:flex;gap:clamp(32px,5vw,64px);flex-wrap:wrap;align-items:center} .nb-split__media{flex:1 1 340px;min-width:280px;border-radius:var(--nb-radius);overflow:hidden;background:#EFEADC;aspect-ratio:1/1} .nb-split__media img{width:100%;height:100%;object-fit:cover} .nb-split__copy{flex:1 1 420px;min-width:300px} .nb-xlist{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-direction:column;gap:14px} .nb-xlist li{display:flex;gap:12px;align-items:flex-start;font-size:16.5px;color:var(--nb-body);line-height:1.5} .nb-xlist li span{flex:none;width:22px;height:22px;border-radius:50%;background:rgba(11,31,4,.06);display:flex;align-items:center;justify-content:center;color:var(--nb-sand);font-size:14px;margin-top:2px} .nb-pull{margin:26px 0 0;padding:20px 22px;background:#fff;border-left:3px solid var(--nb-green);border-radius:4px 16px 16px 4px;font-size:17px;line-height:1.6;color:var(--nb-ink-2)} /* ---------- Produit / galerie ---------- */ .nb-gal{margin-top:44px;display:flex;gap:28px;flex-wrap:wrap} .nb-gal__left{flex:1 1 460px;min-width:300px;display:flex;flex-direction:column;gap:14px} .nb-gal__main{border-radius:var(--nb-radius);overflow:hidden;background:#E6E0D0;aspect-ratio:4/3} .nb-gal__main img{width:100%;height:100%;object-fit:cover} .nb-gal__thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0;padding:0;list-style:none} .nb-thumb{border:0;padding:0;background:#E6E0D0;border-radius:14px;overflow:hidden;aspect-ratio:1/1;cursor:pointer;position:relative;transition:box-shadow .18s ease} .nb-thumb img{width:100%;height:100%;object-fit:cover} .nb-thumb[aria-pressed="true"]{box-shadow:0 0 0 2.5px var(--nb-green)} .nb-spec{flex:1 1 340px;min-width:280px;background:var(--nb-bg);border:1px solid var(--nb-line);border-radius:var(--nb-radius);padding:clamp(24px,3vw,34px)} .nb-spec h3{font-size:22px;font-weight:600;margin:0 0 20px} .nb-spec__row{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--nb-line);font-size:15.5px} .nb-spec__row:last-of-type{border-bottom:0} .nb-spec__row span{color:var(--nb-muted)} .nb-spec__row strong{font-weight:600;text-align:right} /* ---------- Bienfaits ---------- */ .nb-cards{margin-top:40px;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px} .nb-card{background:#fff;border:1px solid rgba(11,31,4,.07);border-radius:22px;padding:26px;transition:border-color .18s ease,transform .18s ease} .nb-card:hover{border-color:rgba(125,189,7,.55);transform:translateY(-2px)} .nb-card__ico{display:flex;width:44px;height:44px;border-radius:14px;background:rgba(125,189,7,.14);align-items:center;justify-content:center} .nb-card__ico.is-blue{background:rgba(114,163,242,.16)} .nb-card__ico.is-ink{background:rgba(11,31,4,.07)} .nb-card h3{font-size:19px;font-weight:600;margin:18px 0 8px} .nb-card p{font-size:15.5px;line-height:1.6;color:var(--nb-muted);margin:0} .nb-center{display:flex;justify-content:center;margin-top:36px} /* ---------- Nigelle ---------- */ .nb-nigelle{background:linear-gradient(180deg,#F1F4FA 0%,#F3EFE4 100%)} .nb-nig__grid{flex:1 1 360px;min-width:280px;display:grid;grid-template-columns:1fr 1fr;gap:14px} .nb-nig__grid figure{margin:0;border-radius:20px;overflow:hidden;background:#E3E8F2} .nb-nig__grid img{width:100%;height:100%;object-fit:cover} .nb-nig__tall{aspect-ratio:3/4;grid-row:span 2} .nb-nig__sq{aspect-ratio:1/1} .nb-quote{margin:28px 0 0;padding:0 0 0 20px;border-left:3px solid var(--nb-blue);font-size:clamp(20px,2vw,26px);line-height:1.4;font-weight:500;color:var(--nb-ink)} /* ---------- Utilisation ---------- */ .nb-steps{margin-top:40px;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px} .nb-step figure{margin:0;border-radius:22px;overflow:hidden;background:#EFEADC;aspect-ratio:4/3} .nb-step img{width:100%;height:100%;object-fit:cover} .nb-step__h{display:flex;align-items:baseline;gap:12px;margin-top:18px} .nb-step__n{font-size:14px;font-weight:700;color:var(--nb-green);letter-spacing:.08em} .nb-step h3{font-size:21px;font-weight:600;margin:0} .nb-step p{font-size:15.5px;line-height:1.6;color:var(--nb-muted);margin:8px 0 0} .nb-tips{margin-top:26px;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px} .nb-tips p{margin:0;background:var(--nb-bg-alt);border-radius:14px;padding:16px 18px;font-size:14.5px;line-height:1.55;color:var(--nb-body)} /* ---------- Avant / Après ---------- */ .nb-ba{flex:1 1 420px;min-width:300px} .nb-ba__stage{ position:relative;border-radius:26px;overflow:hidden;background:#E6E0D0; aspect-ratio:4/3;touch-action:pan-y;cursor:ew-resize;user-select:none;-webkit-user-select:none; } .nb-ba__layer{position:absolute;inset:0} .nb-ba__layer img{width:100%;height:100%;object-fit:cover;object-position:center top;pointer-events:none;-webkit-user-drag:none} /* la couche AVANT est révélée de la gauche vers --nb-pct */ .nb-ba__layer--before{clip-path:inset(0 calc(100% - var(--nb-pct,50%)) 0 0)} .nb-ba__tag{position:absolute;top:14px;font-size:12px;font-weight:700;letter-spacing:.1em;border-radius:999px;padding:7px 12px;pointer-events:none;z-index:3} .nb-ba__tag--before{left:14px;background:rgba(250,247,240,.92);color:var(--nb-ink)} .nb-ba__tag--after{right:14px;background:var(--nb-green);color:var(--nb-ink)} .nb-ba__handle{position:absolute;top:0;bottom:0;left:var(--nb-pct,50%);width:2px;background:rgba(250,247,240,.95);pointer-events:none;box-shadow:0 0 0 1px rgba(11,31,4,.12);z-index:2} .nb-ba__knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:var(--nb-bg);box-shadow:0 8px 20px -8px rgba(11,31,4,.7);display:flex;align-items:center;justify-content:center;gap:3px;color:var(--nb-ink);font-size:13px} .nb-ba__range{display:flex;flex-direction:column;gap:8px;margin-top:16px;font-size:13.5px;color:var(--nb-muted)} .nb-ba__range input{width:100%;accent-color:var(--nb-green);min-height:44px} .nb-ba__pills{display:flex;flex-direction:column;gap:14px;margin-top:26px} .nb-ba__pill{display:flex;gap:14px;align-items:flex-start;background:var(--nb-bg);border:1px solid var(--nb-line);border-radius:16px;padding:16px 18px} .nb-ba__pill.is-after{border-color:rgba(125,189,7,.45)} .nb-ba__pill b{flex:none;font-size:11.5px;font-weight:700;letter-spacing:.1em;color:var(--nb-sand);background:rgba(138,106,74,.12);border-radius:999px;padding:6px 10px} .nb-ba__pill.is-after b{color:var(--nb-ink);background:var(--nb-green)} .nb-ba__pill span{font-size:15.5px;line-height:1.55;color:var(--nb-body)} /* ---------- Pour qui ---------- */ .nb-dark{background:var(--nb-dark);color:var(--nb-on-dark)} .nb-dark .nb-h2{color:#F7F5EC} .nb-dark .nb-lede{color:var(--nb-on-dark-2)} .nb-who{margin-top:32px;display:grid;grid-template-columns:repeat(auto-fit,minmax(176px,1fr));gap:14px} .nb-who__i{background:rgba(243,241,231,.05);border:1px solid rgba(243,241,231,.14);border-radius:18px;padding:20px;display:flex;flex-direction:column;gap:14px;transition:border-color .18s ease,background .18s ease} .nb-who__i:hover{border-color:rgba(125,189,7,.6);background:rgba(243,241,231,.08)} .nb-who__top{display:flex;align-items:center;gap:12px} .nb-who__ico{flex:none;width:40px;height:40px;border-radius:12px;background:rgba(125,189,7,.16);display:flex;align-items:center;justify-content:center} .nb-who__n{font-size:12px;font-weight:700;color:#5E7A4E} .nb-who__i h3{font-size:17.5px;font-weight:600;margin:0;line-height:1.35;color:#F7F5EC} /* ---------- Offres ---------- */ .nb-offers{margin-top:40px;display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:20px;align-items:stretch} .nb-offer{ position:relative;background:#fff;border:2.5px solid rgba(11,31,4,.1);border-radius:var(--nb-radius); padding:24px;display:flex;flex-direction:column;text-align:left; transition:border-color .18s ease,box-shadow .18s ease; } .nb-offer:hover{border-color:rgba(125,189,7,.6)} .nb-offer[data-selected="true"]{border-color:var(--nb-green);box-shadow:0 14px 34px -18px rgba(125,189,7,.8)} /* Le focus clavier sur la radio masquée doit rester visible sur la carte. */ .nb-offer:focus-within{outline:3px solid var(--nb-green-deep);outline-offset:2px} .nb-offer__label{display:flex;flex-direction:column;flex:1;cursor:pointer} .nb-offer__name{font-size:24px;font-weight:700;margin:0;display:block} .nb-offer .nb-btn{margin-top:16px;width:100%} .nb-offer__top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px} .nb-offer__kicker{font-size:12.5px;letter-spacing:.1em;font-weight:600;color:var(--nb-muted)} .nb-offer__radio{flex:none;width:22px;height:22px;border-radius:50%;border:1.5px solid rgba(11,31,4,.25);display:flex;align-items:center;justify-content:center} .nb-offer__radio i{width:12px;height:12px;border-radius:50%;background:var(--nb-green);display:none} .nb-offer[data-selected="true"] .nb-offer__radio i{display:block} .nb-offer__img{border-radius:16px;overflow:hidden;background:#F1EDE1;aspect-ratio:4/3;margin:16px 0;position:relative} .nb-offer__img img{width:100%;height:100%;object-fit:cover} .nb-offer__flag{position:absolute;top:10px;left:10px;background:var(--nb-blue);color:#08203F;font-size:12px;font-weight:600;border-radius:999px;padding:6px 11px} .nb-offer__desc{font-size:15.5px;line-height:1.55;color:var(--nb-muted);margin:8px 0 16px} .nb-offer__price{display:flex;align-items:baseline;gap:8px;margin-top:auto} .nb-offer__price strong{font-size:30px;font-weight:700} .nb-offer__price span{font-size:15px;color:var(--nb-muted)} .nb-offer__was{font-size:14px;text-decoration:line-through} .nb-offer--dark{background:var(--nb-dark);color:var(--nb-on-dark);border-color:var(--nb-dark);box-shadow:0 26px 54px -30px rgba(11,31,4,.9)} .nb-offer--dark .nb-offer__name{color:#F7F5EC} .nb-offer--dark .nb-offer__desc{color:var(--nb-on-dark-2)} .nb-offer--dark .nb-offer__price strong{color:#F7F5EC} .nb-offer--dark .nb-offer__price span{color:var(--nb-on-dark-2)} .nb-offer--dark .nb-offer__was{color:#9BDC2A} .nb-offer--dark .nb-offer__radio{border-color:rgba(243,241,231,.4)} .nb-offer__best{background:var(--nb-green);color:var(--nb-ink);font-size:12.5px;font-weight:700;letter-spacing:.06em;border-radius:999px;padding:6px 12px} .nb-offer__img--dark{background:#16331A} .nb-reassure{display:flex;gap:26px;flex-wrap:wrap;justify-content:center;margin-top:26px;font-size:15px;color:var(--nb-body)} .nb-reassure i{color:rgba(11,31,4,.2);font-style:normal} /* ---------- Commande ---------- */ .nb-order{margin-top:36px;display:flex;gap:24px;flex-wrap:wrap;align-items:flex-start} .nb-order__form{flex:1 1 480px;min-width:300px;background:var(--nb-bg);border:1px solid var(--nb-line);border-radius:26px;padding:clamp(22px,3vw,34px)} .nb-field{display:flex;flex-direction:column;gap:7px;font-size:14.5px;font-weight:500;color:#2A3D22} .nb-grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px} .nb-field input,.nb-field select,.nb-field textarea{ border:1px solid var(--nb-line-2);background:#fff;border-radius:12px;padding:15px 16px; font-size:16px;color:var(--nb-ink);min-height:52px;width:100%;font-weight:400; } .nb-field textarea{resize:vertical;min-height:88px} .nb-field input:focus,.nb-field select:focus,.nb-field textarea:focus{outline:2px solid var(--nb-green);outline-offset:1px;border-color:var(--nb-green)} .nb-field input[aria-invalid="true"]{border-color:#B3441E;background:#FFF8F6} .nb-err{display:none;gap:6px;align-items:center;font-size:13.5px;color:#B3441E;font-weight:500} .nb-err.is-on{display:flex} .nb-chosen{border:1px solid rgba(125,189,7,.5);background:rgba(125,189,7,.09);border-radius:12px;padding:4px 8px 4px 16px;font-size:16px;min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:10px} .nb-chosen strong{font-weight:600} /* « Modifier » doit rester une cible tactile confortable. */ .nb-chosen a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;font-size:14px;border-radius:8px} .nb-chosen a:hover{background:rgba(125,189,7,.16)} .nb-qty{display:flex;align-items:center;gap:16px;margin-top:18px;flex-wrap:wrap} .nb-qty__box{display:flex;align-items:center;gap:4px;border:1px solid var(--nb-line-2);border-radius:999px;background:#fff;padding:4px} .nb-qty__box button{width:44px;height:44px;border:0;background:none;font-size:20px;color:var(--nb-ink);cursor:pointer;border-radius:50%} .nb-qty__box button:hover{background:#F1EDE1} .nb-qty__box output{min-width:32px;text-align:center;font-size:17px;font-weight:600} .nb-consent{display:flex;gap:10px;align-items:flex-start;margin-top:18px;font-size:14px;color:var(--nb-muted);line-height:1.5} .nb-consent input{width:20px;height:20px;min-height:0;flex:none;margin-top:2px;accent-color:var(--nb-green-deep)} .nb-formnote{font-size:14px;color:var(--nb-muted);margin:14px 0 0;text-align:center} .nb-or{display:flex;align-items:center;gap:14px;margin:20px 0;color:var(--nb-muted);font-size:13.5px} .nb-or::before,.nb-or::after{content:"";flex:1;height:1px;background:var(--nb-line)} .nb-success{text-align:center;padding:20px 0} .nb-success__ico{display:inline-flex;width:64px;height:64px;border-radius:50%;background:rgba(125,189,7,.16);align-items:center;justify-content:center;font-size:30px;color:var(--nb-green-deep)} .nb-success h3{font-size:26px;font-weight:700;margin:18px 0 8px} .nb-success p{font-size:16.5px;line-height:1.6;color:var(--nb-body);margin:0 auto;max-width:44ch} .nb-success button{margin-top:22px;background:none;border:1.5px solid var(--nb-ink);color:var(--nb-ink);border-radius:999px;padding:13px 24px;font-size:15.5px;cursor:pointer;min-height:48px} .nb-recap{flex:1 1 300px;min-width:270px;background:var(--nb-dark);color:var(--nb-on-dark);border-radius:26px;padding:clamp(22px,3vw,30px);position:sticky;top:96px} .nb-recap h3{font-size:19px;font-weight:600;margin:0 0 20px;color:#F7F5EC} .nb-recap__row{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid rgba(243,241,231,.14);font-size:15.5px} .nb-recap__row span{color:var(--nb-on-dark-2)} .nb-recap__row strong{font-weight:600;text-align:right} .nb-recap__tot{display:flex;justify-content:space-between;gap:12px;padding:18px 0 0;align-items:baseline} .nb-recap__tot span{font-size:15.5px;color:var(--nb-on-dark-2)} .nb-recap__tot strong{font-size:26px;font-weight:700;color:#F7F5EC} .nb-recap .nb-btn--wa{margin-top:22px;width:100%} .nb-free{color:#9BDC2A} /* ---------- Étapes de commande ---------- */ .nb-how{margin-top:36px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px} .nb-how__i{background:#fff;border:1px solid rgba(11,31,4,.07);border-radius:20px;padding:24px} .nb-how__n{font-size:13px;font-weight:700;letter-spacing:.1em;color:var(--nb-green)} .nb-how__i svg{display:block;margin:14px 0 12px} .nb-how__i h3{font-size:18px;font-weight:600;margin:0 0 6px} .nb-how__i p{font-size:15px;line-height:1.6;color:var(--nb-muted);margin:0} /* ---------- Avis ---------- */ .nb-rating{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px} .nb-rating__score{font-size:34px;font-weight:700;line-height:1} .nb-stars{color:var(--nb-green);font-size:17px;letter-spacing:2px} .nb-rating__meta{font-size:14.5px;color:var(--nb-muted)} /* contain:paint est necessaire : sans lui, le contenu defilable de ce carrousel s'ajoute au debordement du document et rend toute la page defilable horizontalement (~720 px) sur les petites largeurs. */ .nb-reviews{margin-top:34px;display:flex;gap:20px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;contain:paint} .nb-review{flex:0 0 340px;scroll-snap-align:start;background:var(--nb-bg);border:1px solid rgba(11,31,4,.07);border-radius:22px;padding:24px;display:flex;flex-direction:column} .nb-review__who{display:flex;gap:12px;align-items:center} .nb-review__av{width:44px;height:44px;border-radius:50%;overflow:hidden;background:#E6E0D0;flex:none} .nb-review__av img{width:100%;height:100%;object-fit:cover} .nb-review__who strong{display:block;font-size:16px;font-weight:600} .nb-review__who span{font-size:13.5px;color:var(--nb-muted)} .nb-review__stars{color:var(--nb-green);font-size:15px;letter-spacing:2px;margin:14px 0 10px} .nb-review p{font-size:15.5px;line-height:1.65;color:var(--nb-body);margin:0} .nb-review__ok{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:16px;font-size:13px;color:var(--nb-green-deep);font-weight:500} /* ---------- FAQ ---------- */ .nb-faq{max-width:1100px;margin:0 auto;padding:0 var(--nb-pad)} .nb-faq h2{text-align:center;margin:0 0 30px} .nb-faq__cat{font-size:13px;letter-spacing:.14em;color:var(--nb-green);font-weight:600;margin:0 0 14px;text-transform:uppercase} .nb-faq__cat+.nb-faq__list{margin-bottom:34px} .nb-faq__list{display:flex;flex-direction:column;gap:10px} .nb-acc{background:#fff;border:1px solid var(--nb-line);border-radius:16px;overflow:hidden} .nb-acc__q{width:100%;background:none;border:0;text-align:left;padding:19px 22px;font-size:16.5px;font-weight:500;color:var(--nb-ink);display:flex;justify-content:space-between;gap:16px;cursor:pointer;min-height:56px;align-items:center} .nb-acc__q i{color:var(--nb-green);font-size:22px;line-height:1;font-style:normal;flex:none;transition:transform .2s ease} .nb-acc__q[aria-expanded="true"] i{transform:rotate(45deg)} .nb-acc__a{display:none;margin:0;padding:0 22px 20px;font-size:15.5px;line-height:1.7;color:var(--nb-muted)} .nb-acc__a.is-open{display:block} /* ---------- Journal ---------- */ .nb-sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap} .nb-more{font-size:15px;color:var(--nb-green-deep);border-bottom:1px solid rgba(60,107,30,.35);padding-bottom:2px} .nb-posts{margin-top:30px;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px} .nb-post{background:var(--nb-bg);border:1px solid rgba(11,31,4,.07);border-radius:22px;overflow:hidden;display:flex;flex-direction:column;color:var(--nb-ink);transition:border-color .18s ease,transform .18s ease} .nb-post:hover{border-color:rgba(125,189,7,.55);transform:translateY(-2px);color:var(--nb-ink)} .nb-post__img{background:#E6E0D0;aspect-ratio:16/10} .nb-post__img img{width:100%;height:100%;object-fit:cover} .nb-post__body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:9px} .nb-post__cat{font-size:12px;letter-spacing:.1em;font-weight:600;color:var(--nb-green);text-transform:uppercase} .nb-post__cat.is-blue{color:var(--nb-blue-deep)} .nb-post h3{font-size:19px;font-weight:600;margin:0;line-height:1.3} .nb-post p{font-size:15px;line-height:1.6;color:var(--nb-muted);margin:0} .nb-post__min{font-size:13.5px;color:var(--nb-faint);margin-top:4px} /* ---------- Pied de page ---------- */ .nb-footer{background:var(--nb-darker);color:var(--nb-on-dark-2);padding:clamp(44px,5vw,64px) 0 28px} .nb-footer__grid{display:flex;gap:40px;flex-wrap:wrap;justify-content:space-between} .nb-footer__brand{flex:1 1 280px;min-width:240px} .nb-footer__brand img{height:92px;width:auto;opacity:.95} .nb-footer__brand p{font-size:15.5px;margin:16px 0 0;color:#9AA893} .nb-footer__col{flex:0 1 210px} .nb-footer__col h3{font-size:12.5px;letter-spacing:.14em;color:var(--nb-green);font-weight:600;margin:0 0 14px;text-transform:uppercase} .nb-footer__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:15px} .nb-footer__col a{color:var(--nb-on-dark-2);display:inline-flex;align-items:center;gap:8px;min-height:28px} .nb-footer__col a:hover{color:var(--nb-green)} .nb-footer__legal{margin:36px 0 0;padding-top:20px;border-top:1px solid rgba(195,207,187,.15);font-size:13.5px;color:#7C8A76} /* ---------- Barre fixe mobile ---------- */ .nb-sticky{ position:fixed;left:0;right:0;bottom:0;z-index:70;background:rgba(250,247,240,.97); backdrop-filter:blur(14px);border-top:1px solid rgba(11,31,4,.1); padding:12px clamp(16px,4vw,40px);display:flex;align-items:center;justify-content:space-between;gap:14px; box-shadow:0 -10px 30px -20px rgba(11,31,4,.6); padding-bottom:calc(12px + env(safe-area-inset-bottom)); } .nb-sticky__l{display:flex;flex-direction:column;line-height:1.25;min-width:0} .nb-sticky__l span{font-size:12.5px;color:var(--nb-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .nb-sticky__l strong{font-size:19px;font-weight:700} .nb-sticky__r{display:flex;gap:10px;align-items:center;flex:none} .nb-sticky__wa{width:52px;height:52px;border-radius:50%;border:1px solid rgba(11,31,4,.16);display:flex;align-items:center;justify-content:center;flex:none} .nb-sticky__wa:hover{border-color:var(--nb-green)} .nb-sticky__cta{background:var(--nb-green);color:var(--nb-ink);font-weight:600;font-size:16.5px;border-radius:999px;padding:15px 26px;min-height:52px;display:flex;align-items:center;white-space:nowrap} .nb-sticky__cta:hover{background:var(--nb-green-hi);color:var(--nb-ink)} .nb-spacer{height:84px} /* ========================================================================== Pages intérieures (articles + pages légales) ========================================================================== */ .nb-page{max-width:800px;margin:0 auto;padding:clamp(32px,4vw,60px) var(--nb-pad) clamp(48px,6vw,88px)} .nb-crumb{font-size:14px;color:var(--nb-muted);margin:0 0 20px} .nb-crumb a{color:var(--nb-green-deep)} .nb-page h1{font-size:clamp(28px,3.6vw,44px);line-height:1.15;font-weight:700;margin:0 0 16px} .nb-page__meta{display:flex;gap:14px;flex-wrap:wrap;font-size:14px;color:var(--nb-faint);margin:0 0 28px} .nb-page__hero{border-radius:var(--nb-radius);overflow:hidden;margin:0 0 32px;background:#E6E0D0;aspect-ratio:16/9} .nb-page__hero img{width:100%;height:100%;object-fit:cover} .nb-prose{font-size:17px;line-height:1.75;color:var(--nb-body)} .nb-prose>p:first-of-type{font-size:19px;line-height:1.7;color:var(--nb-ink-2)} .nb-prose h2{font-size:clamp(22px,2.4vw,29px);line-height:1.25;font-weight:700;color:var(--nb-ink);margin:44px 0 14px} .nb-prose h3{font-size:20px;font-weight:600;color:var(--nb-ink);margin:30px 0 10px} .nb-prose p{margin:0 0 18px} .nb-prose ul{margin:0 0 20px;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px} .nb-prose ul li{display:flex;gap:12px;align-items:flex-start} .nb-prose ul li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--nb-green);margin-top:10px} .nb-prose blockquote{margin:28px 0;padding:0 0 0 20px;border-left:3px solid var(--nb-green);font-size:clamp(19px,2vw,23px);line-height:1.45;font-weight:500;color:var(--nb-ink);font-style:normal} .nb-prose strong{font-weight:600;color:var(--nb-ink)} .nb-prose a{text-decoration:underline;text-underline-offset:3px} .nb-prose table{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:15.5px} .nb-prose th,.nb-prose td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--nb-line);vertical-align:top} .nb-prose th{font-weight:600;color:var(--nb-ink);background:var(--nb-bg-alt)} .nb-tablewrap{overflow-x:auto;margin:0 0 22px;contain:paint} .nb-cta-band{margin:44px 0 0;background:var(--nb-bg-alt);border-radius:var(--nb-radius);padding:clamp(24px,3vw,34px);text-align:center} .nb-cta-band h2{font-size:clamp(21px,2.3vw,27px);font-weight:700;margin:0 0 10px;color:var(--nb-ink)} .nb-cta-band p{font-size:16px;color:var(--nb-body);margin:0 0 20px} .nb-updated{font-size:14px;color:var(--nb-faint);margin:0 0 28px;padding:12px 16px;background:var(--nb-bg-alt);border-radius:12px;display:inline-block} /* ========================================================================== Adaptatif ========================================================================== */ @media (max-width:1080px){ .nb-nav{gap:18px;font-size:14px} .nb-hdr-wa span{display:none} } @media (max-width:900px){ html{scroll-padding-top:80px} .nb-burger{display:flex} .nb-nav{ display:none;position:absolute;top:100%;left:0;right:0; background:var(--nb-bg);border-bottom:1px solid var(--nb-line); flex-direction:column;gap:0;padding:8px var(--nb-pad) 18px; box-shadow:0 18px 30px -22px rgba(11,31,4,.7);max-height:calc(100vh - 76px);overflow-y:auto; } .nb-nav.is-open{display:flex} .nb-nav a{padding:14px 2px;border-bottom:1px solid var(--nb-line);font-size:16.5px;min-height:48px;display:flex;align-items:center} .nb-nav a:last-child{border-bottom:0} .nb-header__in{position:relative;flex-wrap:nowrap;gap:12px} .nb-header__cta{order:3;margin-left:0} .nb-hdr-order{display:none} .nb-hdr-wa{padding:9px 12px} .nb-recap{position:static} } @media (max-width:760px){ :root{--nb-sec:clamp(38px,7vw,54px)} /* Cibles tactiles : au moins 44 px de haut sur tout ce qui se touche. */ .nb-brand{min-height:44px} .nb-footer__col a{min-height:44px} .nb-footer__col ul{gap:2px} .nb-more{min-height:44px;display:inline-flex;align-items:center} .nb-consent input{width:24px;height:24px} .nb-crumb a{display:inline-block;padding:6px 0} .nb-prose a{padding:2px 0} .nb-hero__media{min-height:340px;order:-1;flex-basis:100%} .nb-hero__copy{flex-basis:100%;padding:32px 22px 40px} .nb-hero__fade{display:none} .nb-hero__btns .nb-btn{flex:1 1 100%} .nb-trust{gap:16px;justify-content:space-between} .nb-trust__dot{display:none} .nb-trust__i{flex:1 1 84px} .nb-trust__i span:first-child{width:48px;height:48px} .nb-trust__i span:last-child{font-size:13px} .nb-gal__thumbs{grid-template-columns:repeat(4,1fr);gap:8px} .nb-ba__stage{aspect-ratio:1/1} .nb-sec-head{align-items:flex-start} .nb-review{flex-basis:80vw;max-width:340px} .nb-reviews{margin-left:calc(var(--nb-pad)*-1);margin-right:calc(var(--nb-pad)*-1);padding-left:var(--nb-pad);padding-right:var(--nb-pad)} .nb-footer__grid{gap:28px} .nb-footer__col{flex:1 1 44%} .nb-sticky__cta{padding:15px 20px;font-size:16px} .nb-sticky__l strong{font-size:17px} .nb-page__hero{aspect-ratio:4/3} .nb-prose{font-size:16.5px} .nb-prose>p:first-of-type{font-size:18px} } @media (max-width:480px){ .nb-topbar{font-size:12px;letter-spacing:.03em;padding:9px 14px} .nb-brand img{height:32px} .nb-brand__name{font-size:15px} .nb-brand__sub{font-size:8px;letter-spacing:.18em} .nb-lang{height:40px} .nb-hdr-wa{width:44px;height:44px;padding:0;justify-content:center} .nb-h1{font-size:30px} .nb-gal__thumbs{grid-template-columns:repeat(2,1fr)} .nb-nig__grid{grid-template-columns:1fr} .nb-nig__tall{grid-row:auto;aspect-ratio:4/3} .nb-who{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))} .nb-offer{padding:18px} .nb-order__form{padding:20px 18px} .nb-recap{padding:20px 18px} .nb-sticky__l span{font-size:11.5px} .nb-sticky__wa{width:48px;height:48px} .nb-footer__col{flex:1 1 100%} .nb-reassure{flex-direction:column;gap:8px;align-items:center;text-align:center} .nb-reassure i{display:none} .nb-ba__pill{flex-direction:column;gap:10px} } @media print{ body{background:#fff} .nb-header,.nb-sticky,.nb-topbar,.nb-spacer,.nb-burger{display:none !important} } /* ========================================================================== Ajouts WordPress — champ piège, message d'erreur, pages et articles ========================================================================== */ /* Champ piège anti-robot : retiré de l'affichage sans utiliser « display:none », que certains robots savent détecter. Le masquage se fait par découpe, jamais par déport hors écran : un « left:-9999px » crée un débordement vers la fin de ligne, ce qui en lecture droite-à-gauche décale toute la page hors du cadre visible (page entièrement blanche). La découpe, elle, ne déborde pas. */ .nb-hp{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; } /* Message d'erreur du formulaire de commande */ .nb-error{ display:none; margin:16px 0 0; padding:13px 16px; border:1px solid #D9534F; border-left-width:4px; border-radius:10px; background:#FDF3F2; color:#8E2C29; font-size:14.5px; line-height:1.55; } .nb-error.is-on{display:block} .nb-error a{color:#8E2C29;text-decoration:underline} /* -------------------------------------------------------------------------- En-tête mobile — bouton de menu à l'extrémité, sans bouton WhatsApp Sous 900 px, le bouton de menu se trouvait juste après le logo. Il passe à l'extrémité de la barre, où le pouce l'atteint naturellement, et le bouton WhatsApp disparaît de l'en-tête : il reste accessible dans la barre fixe du bas, présente sur toute la page. « margin-inline-start » plutôt que « margin-left » : la version arabe étant en lecture droite-à-gauche, la mise en miroir est automatique — le bouton se place alors à gauche, qui est bien l'extrémité de la barre en arabe. -------------------------------------------------------------------------- */ @media (max-width:900px){ .nb-header__in{justify-content:space-between} /* Un seul « auto » pour repousser le groupe : le sélecteur de langue et le bouton de menu restent côte à côte à l'extrémité. Le margin-left:auto que porte le bouton par défaut est neutralisé, sinon les deux marges automatiques se partagent l'espace libre et le sélecteur se retrouve à flotter au milieu de la barre. */ .nb-header__cta{order:3;margin-left:0;margin-inline-start:auto} .nb-burger{order:4;margin-left:0;margin-inline-start:0} .nb-hdr-wa{display:none} /* La barre ne doit jamais déborder : sur un écran de 320 px, la somme des largeurs dépassait la place disponible et le bouton de menu, dernier de la rangée, se retrouvait coupé par le bord de l'écran. Le sélecteur et le bouton gardent donc leur taille — ce sont des zones tactiles — et c'est le bloc de marque qui cède la place, en tronquant son texte plutôt qu'en poussant le reste dehors. */ .nb-lang, .nb-burger{flex:0 0 auto} .nb-brand{min-width:0;flex:0 1 auto} .nb-brand__txt{min-width:0;overflow:hidden} .nb-brand__name, .nb-brand__sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} } /* Sur les écrans les plus étroits, la ligne « DÉODORANT NATUREL » est l'élément le plus large de l'en-tête à cause de son interlettrage. Mieux vaut la retirer que tronquer le nom de la marque. */ @media (max-width:400px){ .nb-brand__sub{display:none} } /* Écrans de 320 px : on resserre légèrement la marque pour que son nom tienne en entier plutôt que de se faire tronquer. */ @media (max-width:360px){ .nb-header__in{gap:8px} .nb-brand img{height:30px} .nb-brand__name{font-size:13.5px;letter-spacing:.04em} } /* -------------------------------------------------------------------------- Écran de chargement Le logo seul, sans cadre ni panneau, sur le fond de la page — l'écran doit se faire oublier, pas s'annoncer. Il se retire de deux façons indépendantes : le script l'enlève dès que la page est chargée (avec un plancher de 1,6 s pour éviter un clignotement), et une animation CSS le fait disparaître au bout de quatre secondes. Ainsi, même si le JavaScript ne se charge pas, l'écran ne peut jamais rester bloqué devant le site. -------------------------------------------------------------------------- */ .nb-preloader{ position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; background:var(--nb-bg); animation:nb-preloader-out .5s ease 4s forwards; } .nb-preloader img{ width:clamp(120px,22vw,180px); height:auto; animation:nb-preloader-pulse 1.8s ease-in-out infinite; } .nb-preloader.is-done{ opacity:0; visibility:hidden; pointer-events:none; transition:opacity .5s ease,visibility .5s ease; animation:none; } @keyframes nb-preloader-out{ to{opacity:0;visibility:hidden;pointer-events:none} } @keyframes nb-preloader-pulse{ 0%,100%{opacity:1} 50%{opacity:.55} } /* Sans animation : on affiche puis on retire, sans pulsation ni fondu. */ @media (prefers-reduced-motion:reduce){ .nb-preloader img{animation:none} .nb-preloader{animation:nb-preloader-out .001ms linear 4s forwards} .nb-preloader.is-done{transition:none} } /* -------------------------------------------------------------------------- Formulaire — intitulé et mention « (facultatif) » sur une seule ligne .nb-field est en flex-direction:column. Un intitulé écrit en texte nu suivi d'un produisait deux éléments flex empilés : la mention passait à la ligne, la cellule devenait plus haute que sa voisine et l'alignement de la grille se décalait. Les deux sont désormais réunis dans .nb-field__lbl, qui ne compte que pour un seul élément. -------------------------------------------------------------------------- */ .nb-field__lbl{ display:flex; align-items:baseline; flex-wrap:wrap; gap:6px; } .nb-field__lbl i{ font-style:normal; font-weight:400; font-size:13.5px; color:var(--nb-faint); } /* -------------------------------------------------------------------------- Cartes d'offres — date de fin de promotion -------------------------------------------------------------------------- */ .nb-offer__until{ display:block; margin-top:8px; font-size:13px; font-weight:500; color:var(--nb-sand); } .nb-offer--dark .nb-offer__until{color:var(--nb-on-dark-2)} /* -------------------------------------------------------------------------- « Pour qui ? » — rangées complètes La grille d'origine était en repeat(auto-fit,minmax(176px,1fr)) : selon la largeur de l'écran elle produisait par exemple 7 vignettes sur la première rangée puis 3 orphelines alignées à gauche, ce qui déséquilibrait la section. La section compte 10 vignettes ; seules 5 ou 2 colonnes donnent des rangées toujours complètes (10 n'est divisible que par 1, 2, 5 et 10). On fixe donc ces deux paliers, et « justify-content:center » centre le reliquat si le nombre de vignettes venait à changer. -------------------------------------------------------------------------- */ .nb-who{ grid-template-columns:repeat(5,minmax(0,1fr)); justify-content:center; } @media (max-width:1080px){ .nb-who{grid-template-columns:repeat(2,minmax(0,1fr))} } /* -------------------------------------------------------------------------- Comparateur avant / après — cadrage de la photo Les deux visuels sont des portraits de 718 × 1086 px (rapport 2:3). Le cadre d'origine était en 4/3 paysage — et carré sous 760 px — avec un recadrage « cover » ancré en haut : plus de la moitié basse de la photo n'était donc jamais affichée, ce qui donnait une impression de zoom et masquait les détails du vêtement. On aligne le cadre sur le rapport réel de la photo : « cover » n'a alors plus rien à rogner, l'image est visible en entier. La largeur est bornée pour qu'un portrait plein format ne déséquilibre pas la mise en page. -------------------------------------------------------------------------- */ .nb-ba__stage{ aspect-ratio:718/1086; max-width:min(100%,470px); margin-inline:auto; } .nb-ba__layer img{object-position:center center} /* Chaque étiquette vit dans sa propre couche et suit donc le découpage : la couche « avant » est révélée de 0 à --nb-pct, la couche « après » de --nb-pct à 100 %. Quand le curseur est à fond d'un côté, l'étiquette de l'autre côté disparaît avec sa couche — on ne voit plus « AVANT » sur une image qui ne montre que l'après. */ .nb-ba__layer--after{clip-path:inset(0 0 0 var(--nb-pct,50%))} .nb-ba__range{max-width:min(100%,470px);margin-inline:auto} @media (max-width:760px){ /* Remplace la contrainte carrée de la feuille d'origine. */ .nb-ba__stage{aspect-ratio:718/1086;max-width:min(100%,420px)} } /* -------------------------------------------------------------------------- Gabarit de document : pages d'information et articles du journal -------------------------------------------------------------------------- */ .nb-doc{padding:calc(var(--nb-sec) * .8) 0 var(--nb-sec)} .nb-doc__shell{max-width:1680px;margin:0 auto;padding:0 var(--nb-pad)} .nb-doc__head{max-width:800px;margin:0 auto} .nb-doc__meta{ display:flex;flex-wrap:wrap;align-items:center;gap:10px; margin:0 0 14px;font-size:13px;letter-spacing:.1em;text-transform:uppercase; color:var(--nb-muted); } .nb-doc__meta i{font-style:normal;color:var(--nb-line-2)} .nb-doc__title{ font-size:clamp(30px,3.6vw,50px);line-height:1.12;font-weight:700; letter-spacing:-.015em;margin:0;color:var(--nb-ink);text-wrap:pretty; } .nb-doc__lede{ margin:20px 0 0;font-size:clamp(17px,1.35vw,20px);line-height:1.62; color:var(--nb-body);text-wrap:pretty; } .nb-doc__cover{ max-width:1000px;margin:38px auto 0;border-radius:var(--nb-radius); overflow:hidden;background:var(--nb-bg-alt); } .nb-doc__cover img{width:100%;height:auto} /* Corps de texte long : mesure de lecture confortable */ .nb-prose{max-width:760px;margin:44px auto 0;color:var(--nb-body);font-size:17px;line-height:1.75} .nb-prose > *:first-child{margin-top:0} .nb-prose p{margin:0 0 1.15em} .nb-prose h2{ font-size:clamp(23px,2.1vw,30px);line-height:1.25;font-weight:600; letter-spacing:-.01em;color:var(--nb-ink);margin:2em 0 .6em;text-wrap:pretty; } .nb-prose h3{ font-size:clamp(18px,1.5vw,21px);line-height:1.35;font-weight:600; color:var(--nb-ink-2);margin:1.7em 0 .5em; } .nb-prose h2 + h3{margin-top:1.1em} .nb-prose ul,.nb-prose ol{margin:0 0 1.3em;padding-left:0;list-style:none} .nb-prose ol{counter-reset:nb-ol} .nb-prose li{position:relative;padding-left:30px;margin:0 0 .6em} .nb-prose ul > li::before{ content:"";position:absolute;left:8px;top:.62em; width:7px;height:7px;border-radius:50%;background:var(--nb-green); } .nb-prose ol > li{counter-increment:nb-ol} .nb-prose ol > li::before{ content:counter(nb-ol);position:absolute;left:0;top:.06em; font-size:13px;font-weight:600;color:var(--nb-green-deep); } .nb-prose blockquote{ margin:1.8em 0;padding:20px 26px;border-left:3px solid var(--nb-green); background:var(--nb-bg-alt);border-radius:0 14px 14px 0; font-size:19px;line-height:1.55;color:var(--nb-ink-2);font-style:italic; } .nb-prose blockquote p:last-child{margin-bottom:0} .nb-prose a{text-decoration:underline;text-underline-offset:3px} .nb-prose strong{color:var(--nb-ink-2);font-weight:600} .nb-prose img{border-radius:16px;margin:1.6em 0} .nb-prose figure{margin:1.8em 0} .nb-prose figcaption{margin-top:10px;font-size:14px;color:var(--nb-faint)} .nb-prose hr{border:0;border-top:1px solid var(--nb-line);margin:2.4em 0} .nb-prose table{width:100%;border-collapse:collapse;margin:1.6em 0;font-size:15.5px} .nb-prose th,.nb-prose td{padding:11px 14px;border-bottom:1px solid var(--nb-line);text-align:left} .nb-prose th{font-weight:600;color:var(--nb-ink-2)} /* Encart de rappel produit en fin d'article */ .nb-cta-box{ max-width:760px;margin:52px auto 0;padding:clamp(26px,3vw,40px); border-radius:var(--nb-radius);background:var(--nb-dark);color:var(--nb-on-dark); } .nb-cta-box h2{ margin:0;font-size:clamp(22px,2.2vw,30px);line-height:1.22;font-weight:700; letter-spacing:-.01em;color:#F7F5EC; } .nb-cta-box p{margin:12px 0 0;color:var(--nb-on-dark-2);font-size:16.5px;line-height:1.6} .nb-cta-box__btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px} /* Navigation entre articles */ .nb-docnav{ display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px; max-width:760px;margin:48px auto 0;padding-top:26px; border-top:1px solid var(--nb-line);font-size:15px; } .nb-docnav a{display:inline-flex;gap:8px;max-width:46ch;font-weight:500} /* Liste du journal */ .nb-archive__head{max-width:700px;margin:0 auto 42px;text-align:center} .nb-pager{ display:flex;justify-content:center;gap:8px;margin-top:48px; font-size:15px;font-weight:500; } .nb-pager .page-numbers{ display:inline-flex;align-items:center;justify-content:center; min-width:42px;height:42px;padding:0 12px;border-radius:12px; border:1px solid var(--nb-line-2);color:var(--nb-ink-2); } .nb-pager .page-numbers.current{background:var(--nb-ink);border-color:var(--nb-ink);color:#F7F5EC} .nb-pager a.page-numbers:hover{border-color:var(--nb-green);color:var(--nb-green-deep)} /* État vide / 404 */ .nb-empty{max-width:620px;margin:0 auto;text-align:center;padding:var(--nb-sec) 0} .nb-empty h1{font-size:clamp(28px,3.2vw,44px);line-height:1.15;font-weight:700;margin:0 0 14px} .nb-empty p{color:var(--nb-body);font-size:17px;margin:0 0 26px} /* -------------------------------------------------------------------------- WooCommerce : les pages panier / commande / compte ne sont pas utilisées dans le parcours COD, mais restent lisibles si un visiteur y arrive. -------------------------------------------------------------------------- */ .woocommerce-page .nb-doc__shell{max-width:1100px} .woocommerce-message,.woocommerce-info,.woocommerce-error{ list-style:none;margin:0 0 24px;padding:14px 18px;border-radius:12px; background:var(--nb-bg-alt);border-left:4px solid var(--nb-green); } .woocommerce-error{background:#FDF3F2;border-left-color:#D9534F} /* ========================================================================== Version arabe — adaptations droite-à-gauche Appliquées uniquement quand , la version française n'est donc pas affectée. Les blocs en flex et en grid s'inversent d'eux-mêmes ; ne sont reprises ici que les propriétés réellement latéralisées. ========================================================================== */ [dir="rtl"] body{ /* Cairo porte les diacritiques et les chiffres arabes ; Jost reste en secours pour les mots latins (Nafas Bio, WhatsApp). */ font-family:"Cairo","Jost","Segoe UI",sans-serif; line-height:1.75; /* l'arabe demande un interligne plus généreux */ } /* Les titres serrés du latin deviennent illisibles en arabe : on relâche l'interlettrage négatif et on remonte légèrement la hauteur de ligne. */ [dir="rtl"] .nb-h1, [dir="rtl"] .nb-h2, [dir="rtl"] .nb-doc__title{letter-spacing:normal;line-height:1.35} [dir="rtl"] .nb-eyebrow{letter-spacing:normal} [dir="rtl"] .nb-offer__kicker, [dir="rtl"] .nb-offer__best, [dir="rtl"] .nb-ba__pill b, [dir="rtl"] .nb-ba__tag{letter-spacing:normal} /* Lien d'évitement */ [dir="rtl"] .nb-skip{left:auto;right:-9999px;border-radius:0 0 0 10px} [dir="rtl"] .nb-skip:focus{left:auto;right:0} /* En-tête */ [dir="rtl"] .nb-nav{margin-left:0;margin-right:auto} /* Filets et encadrés latéralisés */ [dir="rtl"] .nb-quote{ padding:0 20px 0 0; border-left:0; border-right:3px solid var(--nb-blue); } [dir="rtl"] .nb-pull{ border-left:0; border-right:3px solid var(--nb-green); border-radius:16px 4px 4px 16px; } [dir="rtl"] .nb-prose blockquote{ border-left:0; border-right:3px solid var(--nb-green); border-radius:14px 0 0 14px; } [dir="rtl"] .nb-error{border-left-width:1px;border-right-width:4px} [dir="rtl"] .woocommerce-message, [dir="rtl"] .woocommerce-info, [dir="rtl"] .woocommerce-error{ border-left:0; border-right:4px solid var(--nb-green); } [dir="rtl"] .woocommerce-error{border-right-color:#D9534F} /* Accordéon FAQ : le texte de la question repasse à droite */ [dir="rtl"] .nb-acc__q{text-align:right} /* Listes du corps de texte : la puce passe à droite */ [dir="rtl"] .nb-prose li{padding-left:0;padding-right:30px} [dir="rtl"] .nb-prose ul > li::before{left:auto;right:8px} [dir="rtl"] .nb-prose ol > li::before{left:auto;right:0} [dir="rtl"] .nb-prose th, [dir="rtl"] .nb-prose td{text-align:right} /* Badge « le plus choisi » sur la carte d'offre */ [dir="rtl"] .nb-offer__flag{left:auto;right:10px} /* Dégradé de fondu du visuel héros */ [dir="rtl"] .nb-hero__fade{ left:auto;right:0; background:linear-gradient(270deg,var(--nb-bg-hero),rgba(247,243,234,0)); } /* Comparateur avant / après : volontairement laissé en sens latin. Le curseur se calcule depuis le bord gauche et le détourage suit le même axe ; inverser le sens ici inverserait le geste de glissement sans rien apporter, une photographie n'ayant pas de sens de lecture. */ [dir="rtl"] .nb-ba{direction:ltr} [dir="rtl"] .nb-ba__pills, [dir="rtl"] .nb-ba__range{direction:rtl} /* Navigation entre articles : les flèches suivent le sens de lecture */ [dir="rtl"] .nb-docnav a{direction:rtl} /* Champs à saisie latine — téléphone, code postal — alignés à gauche même dans un formulaire arabe, sinon le numéro s'affiche à l'envers. */ [dir="rtl"] input[dir="ltr"]{text-align:left} /* Le récapitulatif et la fiche produit alignent leurs valeurs à l'opposé */ [dir="rtl"] .nb-recap__row, [dir="rtl"] .nb-spec__row{text-align:right} /* Chiffres des étapes et des cartes « pour qui » */ [dir="rtl"] .nb-step__h, [dir="rtl"] .nb-who__top{flex-direction:row-reverse} /* Barre fixe du bas */ [dir="rtl"] .nb-sticky__l{text-align:right} /* Sélecteur de langue : garder FR en caractères latins */ .nb-lang__off[lang="fr"], .nb-lang__on:not([lang="ar"]){font-family:"Jost",sans-serif}