/** Shopify CDN: Minification failed Line 843:0 Unexpected "}" **/ /* Mini Dziri — design system porté de la maquette (minisdziri.iroconsult.com). Classes en collision avec Dawn renommées md-* : md-banner, md-card, md-card--flush, md-card--white, md-center, md-dot, md-field, md-media, md-media--wide, md-price. */ /* ========================================================================== Mini Dziri — Design System Charte issue des créations publicitaires : crème, vert forêt, or, zellige. Une seule couleur d'action. Une primitive : la Carte. ========================================================================== */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0;background:var(--cream);color:var(--ink); font-family:var(--sans);font-size:16px;line-height:1.6; -webkit-font-smoothing:antialiased; } img,video{max-width:100%;display:block} a{color:var(--forest)} h1,h2,h3,h4{font-family:var(--serif);font-weight:700;color:var(--forest);margin:0;text-wrap:balance;line-height:1.12} h1{font-size:clamp(28px,6vw,44px)} h2{font-size:clamp(23px,4vw,32px)} h3{font-size:clamp(18px,2.6vw,22px)} p{margin:0} :focus-visible{outline:3px solid var(--forest);outline-offset:3px;border-radius:4px} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .wrap{max-width:1120px;margin:0 auto;padding:0 var(--s4)} @media(min-width:900px){.wrap{padding:0 var(--s16)}} section{padding:var(--s12) 0} @media(min-width:900px){section{padding:var(--s16) 0}} .lede{color:var(--ink-soft);max-width:62ch} .md-center{text-align:center} .md-center .lede{margin-inline:auto} /* ---------- Ornement zellige : ANGLES seulement ---------- */ .zellige{display:grid;grid-template-columns:repeat(4,1fr);width:52px;height:52px;border-radius:4px;overflow:hidden} .zellige i{display:block;aspect-ratio:1} .zellige.sm{width:34px;height:34px} /* ---------- Rosace dorée 8 branches ---------- */ .rosette{width:11px;height:11px;flex:0 0 auto;fill:currentColor;opacity:.85} /* ---------- Primitive : la Carte ---------- */ .md-card{ background:var(--cream-2);border:1px solid var(--gold);border-radius:var(--r-card); padding:var(--s6);position:relative; } .md-card--white{background:var(--white);border-color:var(--hair)} .md-card--flush{padding:0;overflow:hidden} /* ---------- Boutons : une seule couleur d'action ---------- */ .btn{ font-family:var(--sans);font-weight:600;font-size:16px;line-height:1; display:inline-flex;align-items:center;justify-content:center;gap:10px; padding:16px 26px;min-height:52px;border-radius:var(--r-pill);border:none;cursor:pointer; background:var(--forest);color:#fff;text-decoration:none; transition:background .15s ease,transform .12s ease;width:100%; } .btn:hover{background:var(--forest-2)} .btn:active{transform:scale(.985)} .btn--sm{min-height:42px;padding:11px 20px;font-size:14px;width:auto} .btn[disabled]{background:var(--hair);color:var(--muted);cursor:not-allowed} /* Bouton secondaire : même gabarit que .btn, cerné plutôt que plein. Le cerne est un inset box-shadow (pas un border) pour que les deux boutons empilés fassent EXACTEMENT la même hauteur. */ .btn--ghost{background:transparent;color:var(--forest);box-shadow:inset 0 0 0 1.6px var(--forest)} .btn--ghost:hover{background:var(--forest);color:#fff} .btn--ghost .arrow{width:17px;height:17px;flex:0 0 auto} .buy-stack{display:grid;gap:10px;margin-top:var(--s4)} .buy-stack .btn{margin-top:0} /* ---- Paiement accéléré (Shop Pay, Apple Pay, Google Pay, PayPal) ---------- Le bouton appartient à Shopify : sa couleur de marque est imposée et c'est la seule entorse assumée à la palette (un client reconnaît Shop Pay à son violet). On ne pilote que la géométrie, via les propriétés que Shopify expose. */ .accel{ margin-top:var(--s5); --shopify-accelerated-checkout-button-block-size:52px; --shopify-accelerated-checkout-button-border-radius:var(--r-pill); --shopify-accelerated-checkout-inline-alignment:center; } .accel-sep{ display:flex;align-items:center;gap:12px; font-size:12.5px;color:var(--muted);margin-bottom:var(--s4); } .accel-sep::before,.accel-sep::after{content:"";flex:1;height:1px;background:var(--hair)} .accel-form{margin:0} .shopify-payment-button__button{border-radius:var(--r-pill);min-height:52px} /* Variante non brandée : Shopify la laisse entièrement stylable — on l'aligne sur le bouton cerné pour qu'elle ne détonne pas si aucune marque n'est active. */ .shopify-payment-button__button--unbranded{ background:transparent;color:var(--forest); box-shadow:inset 0 0 0 1.6px var(--forest); font-family:var(--sans);font-weight:600;font-size:16px; } .shopify-payment-button__button--unbranded:hover:not([disabled]){background:var(--forest);color:#fff} .shopify-payment-button__more-options{ font-family:var(--sans);font-size:13px;color:var(--ink-soft);margin-top:10px } @media(max-width:420px){ .btn{font-size:15px;padding:15px 18px;gap:8px} .rosette{width:9px;height:9px} } /* Action secondaire : lien texte souligné d'or, JAMAIS une 2e pilule */ .link-alt{ font-weight:600;color:var(--forest);text-decoration:none; border-bottom:1px solid var(--gold);padding-bottom:3px; } /* ---------- Pastilles ---------- */ .chips{display:flex;flex-wrap:wrap;gap:var(--s2)} .chip{ display:inline-flex;align-items:center;gap:7px; background:var(--white);border:1px solid var(--gold);border-radius:var(--r-pill); padding:7px 14px;font-size:13.5px;font-weight:600;color:var(--forest); } .chip svg{width:15px;height:15px;flex:0 0 auto} @media(max-width:520px){ .chip{font-size:12.5px;padding:6px 11px;gap:6px} .chip svg{width:14px;height:14px} } /* ---------- Bandeau de continuité ---------- */ .md-banner{background:var(--forest);color:#F7EEDD;font-size:14px;text-align:center;padding:11px var(--s4)} .md-banner .code{ display:inline-block;border:1px dashed var(--gold-soft);border-radius:var(--r-pill); padding:2px 11px;font-weight:700;margin:0 3px;color:#fff; } .md-banner b{color:#fff} .nb{white-space:nowrap} /* ---------- En-tête ---------- */ .site-head{position:sticky;top:0;z-index:40;background:var(--cream);border-bottom:1px solid var(--hair)} .site-head .inner{display:flex;align-items:center;gap:var(--s6);min-height:60px} /* Logo unifié : le fennec + le mot-symbole, identiques sur toutes les pages */ .brand{ display:inline-flex;align-items:center;gap:9px;text-decoration:none; font-family:var(--serif);font-weight:700;font-size:22px;color:var(--forest);letter-spacing:-.01em; } .brand img.wordmark{height:30px;width:auto;display:block} /* Le fennec en médaillon cerclé d'or, comme sur le coffret */ .brand img.mark{ height:38px;width:38px;display:block;flex:0 0 auto; border-radius:50%;object-fit:cover;object-position:52% 42%; border:2px solid var(--gold);background:var(--cream-2); } @media(max-width:520px){ .brand img.wordmark{height:24px} .brand img.mark{height:32px;width:32px} } .site-foot .brand img.wordmark{height:38px} .site-foot .brand img.mark{height:46px;width:46px} /* ========================================================================== MASCOTTE — le fennec accompagne, il ne décore pas tout. ========================================================================== */ /* Fennec qui dépasse d'un bloc, en angle */ .has-mascot{position:relative} .mascot-peek{ position:absolute;z-index:2;pointer-events:none; width:clamp(84px,11vw,132px);height:auto; filter:drop-shadow(0 6px 14px rgba(21,70,45,.14)); } .mascot-peek--br{right:-6px;bottom:-10px} .mascot-peek--bl{left:-6px;bottom:-10px;transform:scaleX(-1)} .mascot-peek--tr{right:-6px;top:-14px} @media(max-width:600px){.mascot-peek{width:76px}} /* Fennec en médaillon, dans le fil du contenu */ .mascot-badge{ width:clamp(88px,12vw,128px);height:auto;border-radius:50%; border:2px solid var(--gold);background:var(--cream-2);display:block; } .mascot-row{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap} .mascot-row p{flex:1 1 220px} /* ========================================================================== PARLYO — l'agent conversationnel. C'est le vrai widget du produit, posé en une ligne (snippets/md-parlyo.liquid) : il vit dans un shadow DOM et se règle depuis le tableau de bord Parlyo, couleur d'accent comprise (elle y est déjà à notre vert #15462D). On ne style donc rien de son intérieur, et on ne le redessine surtout pas : un aperçu réécrit à la main dérive. Seule règle qui nous revient : l'effacer tant qu'il recouvre un bouton d'achat (module 12 du JS). visibility plutôt que display, pour que ses boîtes restent mesurables et que la garde puisse le rendre dès que le conflit passe. Les deux propriétés sont héritées jusque dans le shadow. ========================================================================== */ /* Dawn masque les éléments vides (base.css : « a:empty, …, div:empty { display:none } »). Le conteneur du widget n'a AUCUN enfant en lumière — tout son contenu vit dans son shadow root — donc « div:empty » le matche et le fait disparaître entièrement. Vu sur « theme dev » le 06/09 ; la même feuille part en production, le widget aurait donc été invisible après la bascule. On surclasse par la spécificité (0,1,2 contre 0,1,1) plutôt que par « !important » : ainsi le widget garde la main s'il veut se masquer lui-même. */ body div[data-parlyo]{display:block} div[data-parlyo].parlyo-efface{ visibility:hidden !important; pointer-events:none !important; } /* Fennec discret en filigrane derrière un bloc */ .mascot-ghost{ position:absolute;right:2%;bottom:0;width:clamp(120px,18vw,220px); opacity:.16;pointer-events:none;z-index:0; } .site-nav{display:none;gap:var(--s6);margin-left:var(--s6)} .site-nav a{font-size:14.5px;font-weight:600;color:var(--ink-soft);text-decoration:none} .site-nav a:hover{color:var(--forest)} .site-head .spacer{margin-left:auto} @media(min-width:820px){.site-nav{display:flex}} /* ---------- Navigation sur téléphone ---------- */ .nav-burger{ display:inline-flex;align-items:center;justify-content:center; width:42px;height:42px;flex:0 0 auto;margin-left:auto; background:transparent;border:1px solid var(--hair);border-radius:var(--r-ctrl); color:var(--forest);cursor:pointer; } .nav-burger svg{width:22px;height:22px} .nav-burger[aria-expanded="true"]{background:var(--panel);border-color:var(--forest)} @media(min-width:820px){.nav-burger{display:none}} @media(max-width:819px){ .site-head .inner{flex-wrap:wrap;row-gap:10px} .site-nav.is-open{ display:flex;flex-direction:column;gap:2px; flex-basis:100%;order:10;margin:0; border-top:1px solid var(--hair);padding-top:10px; } .site-nav.is-open a{ padding:12px 4px;font-size:16px;min-height:44px;display:flex;align-items:center; } .site-nav.is-open a + a{border-top:1px solid var(--hair-soft)} } /* ---------- Média vidéo ---------- */ .md-media{position:relative;border-radius:var(--r-card);overflow:hidden;border:1px solid var(--gold);background:var(--cream-2)} .md-media video{width:100%;aspect-ratio:9/16;object-fit:cover;background:var(--cream-2)} /* Mobile : la vidéo ne doit pas manger plus d'un écran, sinon le titre et le sélecteur de packs passent sous la ligne de flottaison. */ @media(max-width:899px){.md-media video{max-height:58vh}} .md-media--wide video{aspect-ratio:auto} .sound-btn{ position:absolute;left:12px;bottom:12px;z-index:2; display:inline-flex;align-items:center;gap:8px; min-height:44px;padding:0 18px;border:none;border-radius:var(--r-pill);cursor:pointer; background:rgba(14,51,32,.88);color:#fff;font-family:var(--sans);font-weight:600;font-size:14px; backdrop-filter:blur(6px); } .sound-btn:hover{background:var(--forest-ink)} .sound-btn svg{width:17px;height:17px} /* Badge de quantité — combien de coffrets contient le pack choisi */ .qty-badge{ position:absolute;right:12px;top:12px;z-index:3; display:inline-flex;align-items:baseline;gap:5px; background:var(--forest);color:#fff;border:2px solid var(--gold); border-radius:var(--r-pill);padding:7px 15px; font-family:var(--serif);font-weight:700;font-size:21px;line-height:1; box-shadow:0 4px 12px rgba(21,70,45,.22); } .qty-badge small{font-family:var(--sans);font-weight:600;font-size:11.5px;opacity:.9;letter-spacing:.02em} @media(max-width:520px){ .qty-badge{padding:6px 12px;font-size:18px;right:10px;top:10px} .qty-badge small{font-size:10.5px} } /* Quand le badge est là, la légende passe en bas pour ne pas se chevaucher */ .slide:has(.qty-badge) .slide-tag{top:auto;bottom:12px} .media-tag{ position:absolute;right:12px;top:12px;z-index:2; background:rgba(252,240,222,.94);color:var(--forest);font-size:11.5px;font-weight:700; padding:4px 11px;border-radius:var(--r-pill);border:1px solid var(--gold); } /* Emplacement d'image à fournir — visible, jamais confondu avec un visuel final */ .slot{ border:2px dashed var(--gold);border-radius:var(--r-card);background:var(--cream-2); display:grid;place-items:center;text-align:center;padding:var(--s6); color:var(--muted);font-size:13px;font-weight:600;line-height:1.45;min-height:180px; } .slot b{display:block;color:var(--forest);font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px} /* ---------- Prix ---------- */ .price-row{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap} .price-from{font-size:15px;font-weight:600;color:var(--ink-soft);margin-right:-4px} .md-price{font-family:var(--serif);font-weight:700;font-size:34px;color:var(--forest);font-variant-numeric:tabular-nums} .price-was{font-size:16px;color:var(--red);text-decoration:line-through;font-weight:600;font-variant-numeric:tabular-nums} .badge-launch{background:var(--gold);color:#fff;font-size:12px;font-weight:700;padding:4px 12px;border-radius:var(--r-pill);letter-spacing:.02em} /* ---------- Sélecteur de packs ---------- */ .packs{display:grid;gap:10px;margin:0;padding:0;border:0} .pack{position:relative;display:block;cursor:pointer} .pack input{position:absolute;opacity:0;width:0;height:0} .pack .box{ display:grid;grid-template-columns:auto 1fr auto;gap:var(--s3);align-items:center; background:var(--white);border:1px solid var(--hair);border-radius:var(--r-ctrl); padding:14px 16px;transition:border-color .15s ease,background .15s ease; } .pack .md-dot{width:20px;height:20px;border-radius:50%;border:2px solid var(--muted);flex:0 0 auto;position:relative} .pack input:checked ~ .box{border:2px solid var(--forest);background:var(--cream-2);padding:13px 15px} .pack input:checked ~ .box .md-dot{border-color:var(--forest)} .pack input:checked ~ .box .md-dot::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--forest)} .pack input:focus-visible ~ .box{outline:3px solid var(--forest);outline-offset:2px} .pack .nm{display:block;font-family:var(--serif);font-weight:700;font-size:16.5px;color:var(--forest);line-height:1.2} .pack .sub{display:block;font-size:13px;color:var(--ink-soft);margin-top:3px} .pack .pr{text-align:right;font-family:var(--serif);font-weight:700;font-size:17px;color:var(--forest);font-variant-numeric:tabular-nums;white-space:nowrap} .pack .pr s{display:block;font-size:12.5px;color:var(--red);font-weight:600} .pack .flag{ position:absolute;top:-9px;right:14px;z-index:2; background:var(--forest);color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.05em; text-transform:uppercase;padding:3px 10px;border-radius:6px; } .gift-line{display:flex;align-items:center;gap:10px;margin-top:var(--s3);font-size:14px;color:var(--ink-soft)} .gift-line input{width:18px;height:18px;accent-color:var(--forest)} /* Garde : une règle de classe qui pose `display:` bat l'attribut [hidden] par spécificité, sans le moindre avertissement. */ [hidden]{display:none !important} /* ---------- Mot personnalisé du cadeau ---------- */ .gift-msg{display:grid;gap:6px;margin-top:var(--s3)} .gift-msg > label{font-size:13.5px;font-weight:600;color:var(--ink-soft)} .gift-msg textarea{ font-family:var(--sans);font-size:15px;line-height:1.5;padding:12px 14px; border-radius:var(--r-ctrl);border:1px solid var(--gold);background:var(--white); color:var(--ink);resize:vertical;min-height:86px;width:100%;box-sizing:border-box; } .gift-msg textarea:focus{outline:none;border:2px solid var(--forest);padding:11px 13px} .gift-msg .micro{margin-top:0} /* Compteur : jamais en rouge — le rouge reste réservé aux prix barrés. */ .gift-count{font-variant-numeric:tabular-nums} .gift-count.is-max{color:var(--ink);font-weight:700} .micro{font-size:13px;color:var(--muted);margin-top:var(--s2)} /* ---------- Réassurance ---------- */ .reassure{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;font-weight:600;color:var(--ink-soft);margin-top:var(--s4)} .reassure span{display:inline-flex;align-items:center;gap:6px} .reassure svg{width:15px;height:15px;color:var(--forest)} /* ---------- Grilles ---------- */ .cols{display:grid;gap:var(--s6)} .cols--3{grid-template-columns:1fr} .cols--2{grid-template-columns:1fr} @media(min-width:900px){ /* minmax(0,1fr) et non 1fr : une colonne en 1fr ne descend jamais sous la largeur minimale de son contenu. La bande de vignettes imposait ainsi 746 px a la colonne image et n'en laissait que 198 au texte. */ .cols--pdp{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s12);align-items:start} .cols--3{grid-template-columns:repeat(3,1fr)} .cols--2{grid-template-columns:1fr 1fr} } /* ---------- Bénéfices ---------- */ .benefit{display:grid;grid-template-columns:auto 1fr;gap:var(--s4);align-items:start} .benefit .ic{ width:44px;height:44px;border-radius:12px;background:var(--cream-2);border:1px solid var(--gold); display:grid;place-items:center;color:var(--forest);flex:0 0 auto; } .benefit .ic svg{width:21px;height:21px} .benefit h3{font-size:17px;margin-bottom:4px} .benefit p{font-size:14.5px;color:var(--ink-soft)} /* ---------- Carte pédagogique (illustration + translittération) ---------- */ .wordcard{ background:var(--white);border:1px solid var(--hair);border-radius:var(--r-ctrl); padding:var(--s4);text-align:center; } .wordcard .tr{font-family:var(--sans);font-weight:600;font-size:16px;color:var(--ink);margin-top:var(--s2)} .wordcard .ar{font-family:var(--arabic);font-size:22px;color:var(--forest);direction:rtl;line-height:1.6} .wordcard .em{font-size:34px;line-height:1} .wordcard .em-img{width:46px;height:46px;object-fit:contain;display:block;margin-inline:auto} /* Trois cartes-mots : toujours côte à côte, y compris sur mobile */ .wordrow{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} @media(max-width:400px){.wordrow .em{font-size:26px}.wordrow .ar{font-size:19px}.wordrow .tr{font-size:14px}} /* Échantillonneur audio */ .sampler{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px} .sampler .wordcard{cursor:pointer;transition:border-color .15s ease} .sampler .wordcard:hover{border-color:var(--gold)} .sampler .wordcard[data-audio="pending"]{opacity:.62;cursor:not-allowed} .sampler-note{font-size:13px;color:var(--muted);margin-top:var(--s3)} /* ---------- Étapes ---------- */ .step{background:var(--cream-2);border:1px solid var(--gold);border-radius:var(--r-card);overflow:hidden} .step video{width:100%;aspect-ratio:6/7;object-fit:cover} .step .cap{padding:var(--s4)} .step .n{ display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%; background:var(--forest);color:#fff;font-family:var(--serif);font-weight:700;font-size:13px;margin-bottom:8px; } .step h3{font-size:16.5px;margin-bottom:4px} .step p{font-size:14px;color:var(--ink-soft)} /* ---------- Avis ---------- */ .reviews{display:grid;gap:var(--s3)} @media(min-width:760px){.reviews{grid-template-columns:1fr 1fr}} .review{background:var(--white);border:1px solid var(--hair);border-radius:var(--r-card);padding:var(--s4)} .review .who{font-size:13px;font-weight:700;color:var(--forest);margin-bottom:6px} .review p{font-size:14.5px;color:var(--ink-soft)} .review--slot{border:2px dashed var(--gold);background:var(--cream-2);text-align:center;color:var(--muted);font-size:13px;display:grid;place-items:center;min-height:104px} .review--slot b{display:block;color:var(--forest);font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;margin-bottom:5px} .counter{ margin-top:var(--s6);text-align:center;font-size:14.5px;color:var(--ink-soft); background:var(--cream-2);border:1px solid var(--gold);border-radius:var(--r-card);padding:var(--s4); } .counter .ph{background:var(--gold);color:#fff;border-radius:5px;padding:1px 8px;font-weight:700} /* ---------- Pour vous / pas pour vous ---------- */ .foryou{display:grid;gap:var(--s4)} @media(min-width:760px){.foryou{grid-template-columns:1fr 1fr}} .foryou ul{margin:var(--s3) 0 0;padding-left:var(--s4)} .foryou li{font-size:14.5px;color:var(--ink-soft);margin:7px 0} .foryou h3{font-size:16px} /* ---------- FAQ ---------- */ .faq details{border-bottom:1px solid var(--gold-soft);padding:var(--s4) 0} .faq details:last-child{border-bottom:none} .faq summary{ font-family:var(--sans);font-weight:700;font-size:15.5px;color:var(--forest); cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:var(--s4);align-items:center; } .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";font-family:var(--serif);font-size:22px;color:var(--gold);line-height:1;flex:0 0 auto} .faq details[open] summary::after{content:"–"} .faq p{margin-top:var(--s3);font-size:14.5px;color:var(--ink-soft);max-width:62ch} /* ========================================================================== DÉCOR ZELLIGE — motif de fond, en angles, avec dégradé d'opacité Le motif reste un ornement : il ne passe jamais derrière du texte à pleine opacité, et il est masqué en dégradé pour ne pas concurrencer le contenu. ========================================================================== */ :root{ /* Tuile zellige : 6 teintes, étoiles à 8 branches sur la trame + aux quatre angles pour que le raccord soit continu quand la tuile se répète. */ --zellige-tile:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg%3E%3Crect x='18' y='18' width='24' height='24' fill='%23437A7D'/%3E%3Crect x='18' y='18' width='24' height='24' fill='%23437A7D' transform='rotate(45 30 30)'/%3E%3Crect x='78' y='18' width='24' height='24' fill='%23B52B25'/%3E%3Crect x='78' y='18' width='24' height='24' fill='%23B52B25' transform='rotate(45 90 30)'/%3E%3Crect x='18' y='78' width='24' height='24' fill='%23CC8250'/%3E%3Crect x='18' y='78' width='24' height='24' fill='%23CC8250' transform='rotate(45 30 90)'/%3E%3Crect x='78' y='78' width='24' height='24' fill='%236C9BC4'/%3E%3Crect x='78' y='78' width='24' height='24' fill='%236C9BC4' transform='rotate(45 90 90)'/%3E%3Crect x='49' y='49' width='22' height='22' fill='%232E7D4F'/%3E%3Crect x='49' y='49' width='22' height='22' fill='%232E7D4F' transform='rotate(45 60 60)'/%3E%3Crect x='-11' y='-11' width='22' height='22' fill='%23E0A33A'/%3E%3Crect x='-11' y='-11' width='22' height='22' fill='%23E0A33A' transform='rotate(45 0 0)'/%3E%3Crect x='109' y='-11' width='22' height='22' fill='%23E0A33A'/%3E%3Crect x='109' y='-11' width='22' height='22' fill='%23E0A33A' transform='rotate(45 120 0)'/%3E%3Crect x='-11' y='109' width='22' height='22' fill='%23E0A33A'/%3E%3Crect x='-11' y='109' width='22' height='22' fill='%23E0A33A' transform='rotate(45 0 120)'/%3E%3Crect x='109' y='109' width='22' height='22' fill='%23E0A33A'/%3E%3Crect x='109' y='109' width='22' height='22' fill='%23E0A33A' transform='rotate(45 120 120)'/%3E%3Cg fill='%23C79A44'%3E%3Ccircle cx='60' cy='0' r='4.5'/%3E%3Ccircle cx='0' cy='60' r='4.5'/%3E%3Ccircle cx='120' cy='60' r='4.5'/%3E%3Ccircle cx='60' cy='120' r='4.5'/%3E%3C/g%3E%3Cg fill='%23B52B25'%3E%3Ccircle cx='30' cy='60' r='3'/%3E%3Ccircle cx='90' cy='60' r='3'/%3E%3Ccircle cx='60' cy='30' r='3'/%3E%3Ccircle cx='60' cy='90' r='3'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .zdecor{position:relative;isolation:isolate;overflow:hidden} /* Le motif est ancré DANS l'angle : pleine intensité au coin, puis fondu. */ .zdecor::before,.zdecor::after{ content:"";position:absolute;z-index:-1;pointer-events:none; width:min(52vw,520px);aspect-ratio:1; background-image:var(--zellige-tile);background-size:108px 108px; opacity:.55; } /* angle haut-gauche */ .zdecor::before{ top:0;left:0; -webkit-mask-image:radial-gradient(farthest-side at 0% 0%,#000 26%,rgba(0,0,0,.55) 52%,transparent 88%); mask-image:radial-gradient(farthest-side at 0% 0%,#000 26%,rgba(0,0,0,.55) 52%,transparent 88%); } /* angle bas-droite */ .zdecor::after{ bottom:0;right:0; -webkit-mask-image:radial-gradient(farthest-side at 100% 100%,#000 26%,rgba(0,0,0,.55) 52%,transparent 88%); mask-image:radial-gradient(farthest-side at 100% 100%,#000 26%,rgba(0,0,0,.55) 52%,transparent 88%); } /* Variante discrète : sections qui portent beaucoup de texte */ .zdecor--soft::before,.zdecor--soft::after{opacity:.34;width:min(40vw,380px)} /* Variante appuyée : en-têtes de page */ .zdecor--rich::before,.zdecor--rich::after{opacity:.68;width:min(58vw,560px)} /* Deux sections qui se suivent doublent le motif a leur frontiere : le coin bas-droit de l'une jouxte le coin haut-gauche de la suivante. Ce modificateur retire celui du bas pour que la lecture reste continue. */ .zdecor--sans-bas::after{display:none} .zdecor--tl-only::after{display:none} .zdecor--br-only::before{display:none} /* Les quatre angles, pour les grandes sections */ .zdecor--quad .z-tr,.zdecor--quad .z-bl{ position:absolute;z-index:-1;pointer-events:none; width:min(44vw,420px);aspect-ratio:1; background-image:var(--zellige-tile);background-size:108px 108px;opacity:.45; } .zdecor--quad .z-tr{ top:0;right:0; -webkit-mask-image:radial-gradient(farthest-side at 100% 0%,#000 24%,rgba(0,0,0,.5) 50%,transparent 86%); mask-image:radial-gradient(farthest-side at 100% 0%,#000 24%,rgba(0,0,0,.5) 50%,transparent 86%); } .zdecor--quad .z-bl{ bottom:0;left:0; -webkit-mask-image:radial-gradient(farthest-side at 0% 100%,#000 24%,rgba(0,0,0,.5) 50%,transparent 86%); mask-image:radial-gradient(farthest-side at 0% 100%,#000 24%,rgba(0,0,0,.5) 50%,transparent 86%); } /* Surface de lecture : le motif encadre, le texte reste sur un fond net. Reprend la logique des créas — le contenu vit dans un cadre doré. */ .reading{ position:relative;background:rgba(252,240,222,.90); border:1px solid var(--gold);border-radius:var(--r-card); padding:clamp(20px,3.5vw,38px);backdrop-filter:blur(2px); } /* Bande de motif pleine largeur, en séparateur */ .zband{ height:64px;background-image:var(--zellige-tile);background-size:108px 108px; -webkit-mask-image:linear-gradient(180deg,transparent,#000 45%,transparent); mask-image:linear-gradient(180deg,transparent,#000 45%,transparent); opacity:.72; } @media(max-width:600px){ .zdecor::before,.zdecor::after{width:70vw;background-size:86px 86px;opacity:.46} .zdecor--rich::before,.zdecor--rich::after{opacity:.58} .zdecor--quad .z-tr,.zdecor--quad .z-bl{width:66vw;background-size:86px 86px;opacity:.38} /* La variante discrète reste discrète, y compris sur petit écran : le motif tient dans les angles et ne remonte pas derrière le texte. */ .zdecor--soft::before,.zdecor--soft::after{width:52vw;opacity:.30} } /* ========================================================================== CARROUSEL — diaporama mixte photos + vidéos ========================================================================== */ .carousel{position:relative} /* Mobile : le carrousel passe AVANT le texte — la photo est le premier écran */ @media(max-width:899px){ .cols--pdp{display:flex;flex-direction:column} .cols--pdp .carousel{order:-1;margin-bottom:var(--s6)} } .carousel-view{ display:flex;overflow-x:auto;scroll-snap-type:x mandatory; gap:0;border-radius:var(--r-card);border:1px solid var(--gold);background:var(--cream-2); -ms-overflow-style:none;scrollbar-width:none; } .carousel-view::-webkit-scrollbar{display:none} .slide{ flex:0 0 100%;scroll-snap-align:center;position:relative; display:grid;place-items:center;background:var(--cream-2); } .slide > img,.slide > video{ width:100%;height:clamp(260px,48vh,520px);object-fit:cover;display:block; } .slide--portrait > video{object-fit:cover} .slide-tag{ position:absolute;left:12px;top:12px;z-index:3; background:rgba(252,240,222,.94);color:var(--forest);font-size:11.5px;font-weight:700; padding:4px 11px;border-radius:var(--r-pill);border:1px solid var(--gold); } .car-btn{ position:absolute;top:50%;transform:translateY(-50%);z-index:4; width:44px;height:44px;border-radius:50%;border:1px solid var(--gold);cursor:pointer; background:rgba(252,240,222,.92);color:var(--forest);display:grid;place-items:center; backdrop-filter:blur(4px);transition:background .15s ease; } .car-btn:hover{background:#fff} .car-btn svg{width:19px;height:19px} .car-prev{left:10px} .car-next{right:10px} /* Miniatures sous le cadre — navigation visuelle */ .carousel{min-width:0} /* min-width:0 sinon le conteneur flex impose la largeur de ses vignettes au lieu de defiler, malgre overflow-x:auto. */ .car-thumbs{ display:flex;gap:10px;margin-top:var(--s3); /* centre tant que la bande tient, mais s'aligne au debut des qu'elle deborde : justify-content:center rognait les premieres vignettes hors du conteneur, sans aucun moyen d'y revenir au defilement. */ justify-content:flex-start; justify-content:safe center; overflow-x:auto;padding:2px;-ms-overflow-style:none;scrollbar-width:none; min-width:0; } .car-thumbs::-webkit-scrollbar{display:none} .car-thumbs button{ flex:0 0 auto;width:72px;height:72px;padding:0;cursor:pointer; border:2px solid var(--hair);border-radius:12px;overflow:hidden;background:var(--cream-2); position:relative;transition:border-color .18s ease,transform .18s ease; } .car-thumbs button:hover{border-color:var(--gold);transform:translateY(-2px)} .car-thumbs button[aria-current="true"]{border-color:var(--forest);box-shadow:0 0 0 2px var(--gold-soft)} .car-thumbs img{width:100%;height:100%;object-fit:cover;display:block} .car-thumbs .play-dot{ position:absolute;right:4px;bottom:4px;width:20px;height:20px;border-radius:50%; background:rgba(14,51,32,.86);color:#fff;display:grid;place-items:center; } .car-thumbs .play-dot svg{width:10px;height:10px;fill:currentColor} @media(min-width:900px){.car-thumbs button{width:84px;height:84px}} @media(max-width:420px){.car-thumbs button{width:62px;height:62px}.car-thumbs{gap:8px}} /* Légende de galerie — rappelle ce que contient le pack choisi */ .gallery-note{ margin:var(--s3) 0 0;font-size:13.5px;font-weight:600;color:var(--forest);text-align:center; background:var(--cream-2);border:1px solid var(--gold);border-radius:var(--r-pill); padding:7px 14px; } .car-dots{display:flex;justify-content:center;gap:8px;margin-top:var(--s4)} .car-dots button{ width:9px;height:9px;padding:0;border-radius:50%;border:1px solid var(--gold); background:transparent;cursor:pointer;transition:all .18s ease; } .car-dots button[aria-current="true"]{background:var(--forest);border-color:var(--forest);width:26px;border-radius:var(--r-pill)} /* ========================================================================== RAIL VIDÉO — vignettes réduites, agrandissables ========================================================================== */ .vidrail{ display:grid;grid-auto-flow:column;grid-auto-columns:minmax(172px,1fr); gap:var(--s3);overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:var(--s2); -ms-overflow-style:none;scrollbar-width:none; } .vidrail::-webkit-scrollbar{display:none} @media(min-width:760px){.vidrail{grid-auto-columns:minmax(210px,1fr)}} .vidcard{ scroll-snap-align:start;position:relative;border:1px solid var(--gold); border-radius:var(--r-ctrl);overflow:hidden;background:var(--cream-2); } .vidcard video{width:100%;aspect-ratio:9/16;max-height:300px;object-fit:cover;display:block} .vidcard .cap{padding:10px 12px;background:var(--cream-2);border-top:1px solid var(--gold-soft)} .vidcard .cap .n{ display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%; background:var(--forest);color:#fff;font-family:var(--serif);font-weight:700;font-size:12px;margin-right:7px; } .vidcard .cap b{font-family:var(--serif);font-size:14.5px;color:var(--forest)} .vidcard .cap p{font-size:12.5px;color:var(--ink-soft);margin-top:4px} .zoom-btn{ position:absolute;right:8px;top:8px;z-index:3; width:38px;height:38px;border-radius:10px;border:none;cursor:pointer; background:rgba(14,51,32,.86);color:#fff;display:grid;place-items:center;backdrop-filter:blur(4px); } .zoom-btn:hover{background:var(--forest-ink)} .zoom-btn svg{width:17px;height:17px} /* Visionneuse plein écran */ .lightbox{ position:fixed;inset:0;z-index:100;display:none; align-items:center;justify-content:center;padding:var(--s4); background:rgba(14,51,32,.93);backdrop-filter:blur(8px); } .lightbox.is-open{display:flex} .lightbox video{ max-width:min(94vw,460px);max-height:86vh;border-radius:var(--r-card); border:1px solid var(--gold);background:#000; } .lightbox .close{ position:absolute;right:16px;top:16px;width:46px;height:46px;border-radius:50%; border:1px solid var(--gold);background:rgba(252,240,222,.14);color:#fff;cursor:pointer; display:grid;place-items:center; } .lightbox .close:hover{background:rgba(252,240,222,.28)} .lightbox .close svg{width:20px;height:20px} .lightbox .hint{position:absolute;bottom:20px;left:0;right:0;text-align:center;color:rgba(252,240,222,.72);font-size:12.5px} /* Photo dans une carte (remplace les emplacements) */ .photo{ border-radius:var(--r-card);overflow:hidden;border:1px solid var(--gold);background:var(--cream-2); } .photo img{width:100%;height:100%;object-fit:cover;display:block} .photo--tall img{aspect-ratio:4/5} .photo--wide img{aspect-ratio:3/2} .photo--square img{aspect-ratio:1} /* ---------- En-tête de page intérieure ---------- */ .page-head{padding-top:var(--s12);padding-bottom:var(--s8)} .kicker{ font-family:var(--sans);font-size:11.5px;letter-spacing:.17em;text-transform:uppercase; font-weight:800;color:var(--gold-ink);margin-bottom:var(--s3); } /* ---------- Bloc « à compléter » — visible, jamais confondu avec du contenu final ---------- */ .todo{ display:block;background:var(--cream-2);border:2px dashed var(--gold);border-radius:var(--r-ctrl); padding:var(--s4);font-size:13.5px;color:var(--ink-soft);line-height:1.55; } .todo b{ display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase; color:var(--forest);margin-bottom:6px; } .ar-inline{font-family:var(--arabic);font-size:1.08em;direction:rtl;unicode-bidi:isolate} /* ---------- Frise (Notre histoire) ---------- */ .timeline{list-style:none;margin:0;padding:0;position:relative} .timeline::before{ content:"";position:absolute;left:9px;top:10px;bottom:10px;width:1px;background:var(--gold-soft); } .timeline li{position:relative;padding-left:var(--s8);padding-bottom:var(--s8)} .timeline li:last-child{padding-bottom:0} .tl-mark{ position:absolute;left:0;top:6px;width:19px;height:19px;border-radius:50%; background:var(--cream);border:2px solid var(--gold); } .timeline li::after{ content:"";position:absolute;left:6px;top:12px;width:7px;height:7px;border-radius:50%;background:var(--forest); } .tl-body h3{font-size:17.5px;margin-bottom:5px} .tl-body p{font-size:15px;color:var(--ink-soft)} /* ---------- Sommaire de FAQ ---------- */ .jump{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--s12)} .jump a{ font-size:13.5px;font-weight:600;text-decoration:none;color:var(--forest); background:var(--cream-2);border:1px solid var(--gold);border-radius:var(--r-pill);padding:8px 15px; transition:background .15s ease; } .jump a:hover{background:var(--white)} .faq-h{ font-size:clamp(20px,3vw,26px);margin-top:var(--s12);padding-bottom:var(--s3); border-bottom:2px solid var(--forest);scroll-margin-top:110px; } .faq-h:first-of-type{margin-top:0} .faq-h + .faq{margin-top:var(--s2)} .faq .todo{margin-top:var(--s3)} /* ---------- Hors zone ---------- */ .md-field{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--s4)} .md-field input,.md-field select{ font-family:var(--sans);font-size:15px;padding:13px 15px;border-radius:var(--r-ctrl); border:1px solid var(--gold);background:var(--white);color:var(--ink);flex:1 1 190px;min-height:48px; } .md-field input:focus,.md-field select:focus{outline:none;border:2px solid var(--forest);padding:12px 14px} .md-field .btn{flex:0 0 auto;width:auto} /* ---------- Barre d'achat collante (mobile) ---------- */ .sticky-buy{ position:fixed;left:0;right:0;bottom:0;z-index:50; display:none;align-items:center;gap:var(--s3); background:var(--white);border-top:1px solid var(--gold);padding:10px var(--s4); padding-bottom:calc(10px + env(safe-area-inset-bottom)); box-shadow:0 -8px 24px rgba(21,70,45,.08);min-height:64px; } .sticky-buy.is-visible{display:flex} .sticky-buy .info{min-width:0} .sticky-buy .lbl{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sticky-buy .amt{font-family:var(--serif);font-weight:700;font-size:17px;color:var(--forest);font-variant-numeric:tabular-nums} .sticky-buy .btn{margin-left:auto;width:auto;min-height:46px;padding:0 22px} @media(min-width:900px){.sticky-buy{display:none !important}} /* ---------- Pied de page ---------- */ .site-foot{background:var(--cream-2);border-top:1px solid var(--gold);padding:var(--s12) 0 var(--s8)} .foot-grid{display:grid;gap:var(--s6)} @media(min-width:760px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr}} .site-foot h4{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:var(--s3);font-family:var(--sans);font-weight:800} .site-foot ul{list-style:none;margin:0;padding:0} .site-foot li{margin:7px 0} .site-foot a{font-size:14px;color:var(--ink-soft);text-decoration:none} .site-foot a:hover{color:var(--forest)} .foot-legal{margin-top:var(--s8);padding-top:var(--s4);border-top:1px solid var(--gold-soft);font-size:12.5px;color:var(--muted);display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between} @media(prefers-reduced-motion:reduce){ *{animation:none !important;transition:none !important;scroll-behavior:auto !important} } /* ========================================================================== BUNDLER — habillage à la charte, calé sur la STRUCTURE RÉELLE du widget : la boîte (fond, bordure, rayon) vit sur le