/* Polices réelles du thème Madrid : Figtree pour les titres, DM Sans pour le texte. Cormorant est chargé par le thème mais n'est appliqué par aucun sélecteur — écarté. */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,300;0,400;0,500;0,700;1,300;1,700&family=Figtree:ital,wght@0,500;0,600;1,500&display=swap'); /* ============================================================ MAJELLAN — Design System (préfixe mj-) ============================================================ */ :root{ color-scheme: light; --mj-dark:#282828; --mj-dark-2:#1f1f1f; --mj-black:#111111; --mj-white:#ffffff; --mj-grey:#a9a9a9; --mj-grey-d:#6f6f6f; --mj-line:#e1e1e1; --mj-input-border:#cccccc; --mj-btn-label:#f9f9f9; --mj-btn-hover:#282828; --mj-gold:#c9a24b; /* Titres : Figtree 500. Texte : DM Sans 300. Boutons et menu : Figtree. */ --mj-font:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif; --mj-font-title:'Figtree',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif; --mj-maxw:1396px; --mj-header-h:50px; --mj-adminbar:0px;} /* La barre d'admin WordPress occupe le haut de la fenêtre quand on est connecté. Sans ça, toutes les hauteurs plein écran débordent d'autant. */ body.admin-bar{--mj-adminbar:32px;} @media screen and (max-width:782px){body.admin-bar{--mj-adminbar:46px;}} /* Sous 600px WordPress rend la barre non fixe : elle défile avec la page, donc elle ne mange plus de hauteur utile — on ne la déduit plus. */ @media screen and (max-width:600px){body.admin-bar{--mj-adminbar:0px;}} *,*::before,*::after{box-sizing:border-box;} /* Neutralise l'habillage des boutons du thème. :where() ne pèse rien en spécificité, donc n'importe quelle classe mj- reprend la main sans !important. */ /* reset.css du theme peint liens ET boutons en #cc3366, avec des selecteurs d'attribut ([type="button"], specificite 0,1,0) qu'un reset en :where() (specificite 0) ne peut pas battre. La couleur du texte restait donc rose sur tous nos boutons, et comme outline-color vaut currentColor par defaut, l'anneau de focus l'etait aussi : d'ou le cadre rose fugace au relachement de la souris sur les pastilles d'etui. On neutralise a la source, sans :where(), pour tous les etats et toutes les formes de bouton. */ a,button,[type="button"],[type="submit"],[type="reset"]{color:inherit;} /* Au survol, le theme repassait les liens en bleu-violet (#333366) : visible sur le logo, le menu et les icones. Ils heritent desormais de la couleur de leur contexte — noir sur fond clair, blanc sur photo. */ a:hover,a:focus,a:active,a:visited{color:inherit;} button,[type="button"],[type="submit"],[type="reset"]{background-color:transparent;border:0;border-radius:0;box-shadow:none;font-family:inherit;-webkit-appearance:none;appearance:none;} button:hover,button:focus,button:active, [type="button"]:hover,[type="button"]:focus,[type="button"]:active, [type="submit"]:hover,[type="submit"]:focus,[type="submit"]:active, [type="reset"]:hover,[type="reset"]:focus,[type="reset"]:active{background-color:transparent;color:inherit;border-color:currentColor;box-shadow:none;} /* Les boutons habilles (.mj-btn) gardent leur propre fond : on le leur rend. */ .mj-home .mj-btn,.mj-page .mj-btn,.mj-shell .mj-btn, .mj-home .mj-btn:hover,.mj-page .mj-btn:hover,.mj-shell .mj-btn:hover, .mj-home .mj-btn:focus,.mj-page .mj-btn:focus,.mj-shell .mj-btn:focus{background:var(--mj-black);color:var(--mj-btn-label);} /* Pas de scroll-behavior:smooth : combiné au scroll-snap obligatoire, il fait parfois s'arrêter le défilement entre deux crans sur mobile. */ /* Corps : DM Sans 300, 14px, interligne 1,5 — valeurs exactes du thème. */ .mj-home,.mj-page{font-family:var(--mj-font);font-weight:300;font-size:14px;line-height:1.5;overflow-x:hidden;} /* Titres : Figtree 500, interlettrage NÉGATIF (-0,03em) et interligne 1,3. Le thème multiplie le réglage brut par 0,1 : « -0,3 » vaut donc -0,03em. */ .mj-home h1,.mj-home h2,.mj-home h3,.mj-page h1,.mj-page h2,.mj-page h3{font-family:var(--mj-font-title);font-weight:500;letter-spacing:-.03em;line-height:1.3;} /* clip au lieu de hidden : hidden crée un conteneur de défilement qui casse position:sticky */ @supports (overflow-x:clip){.mj-home,.mj-page{overflow-x:clip;}} .mj-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;} .mj-home img,.mj-page img{display:block;max-width:100%;height:auto;} .mj-home a,.mj-page a{text-decoration:none;color:inherit;} .mj-page a.mjcard__cta{color:#fff;} .page-header,.entry-title,h1.entry-title:not(.mj-wc__title),.page-title,.elementor-page-title,.entry-header{display:none!important;} main#content,.site-main,.page-content,.entry-content,article.page,article.post,.site-main>article{max-width:none!important;width:auto!important;padding:0!important;margin:0!important;} header.site-header,.site-header:not(.mj-header),footer.site-footer,.site-footer:not(.mj-footer),#colophon:not(.mj-footer){display:none!important;} .mj-full{margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important;width:100vw!important;max-width:100vw!important;} /* Le confinement du rebond a été retiré d'ici. Il empêchait le rebond de se propager au navigateur — et donc, sur mobile, le geste de rechargement : tirer vers le bas depuis le haut ne rechargeait plus rien. Le fond blanc forcé suffit à ce pour quoi il avait été posé, éviter une bande sombre pendant le rebond. Le verrouillage du tiroir ne s'appuie pas dessus : il passe par « body.style.overflow », voir la fonction lock() du snippet 12. */ html,body{background:var(--mj-white)!important;} /* Au tap, iOS et Android posent un voile bleu sur les liens et boutons, et un appui long selectionne le texte du logo ou du panier. Rien de tout cela n a de sens sur des elements d interface. Les zones de texte lisible, elles, restent selectionnables. */ a,button,summary,[type="button"],[type="submit"],[role="button"],.mj-logo,.mj-icon,.mj-burger{-webkit-tap-highlight-color:transparent;} .mj-header,.mj-drawer,.mj-burger,.mj-logo,.mj-icon,.mj-nav,.mj-foot-grp,.mj-etui__opt,.mj-acc__head{-webkit-user-select:none;user-select:none;} /* ===== Correctif : en-tete invisible sur l accueil ===== mj-coquille pose cette regle : body.home.mj-darktop-page .mj-header:not(.mj-header--solid){ background-color:#fff; background-clip:text; color:var(--mj-white); } Fond blanc, texte blanc, et le fond decoupe a la forme des lettres : le logo et le menu disparaissent completement au-dessus de la photo. Seul l accueil est concerne, le selecteur contenant body.home. On retablit le comportement attendu : en-tete transparent, texte blanc, tant que la page n a pas defile au-dela de la photo. A signaler au second developpeur pour correction a la source. */ html body.home.mj-darktop-page .mj-header:not(.mj-header--solid){ background-color:transparent; background-image:none; -webkit-background-clip:border-box; background-clip:border-box; color:var(--mj-white); } @media (prefers-color-scheme:dark){ html,body{background:var(--mj-white)!important;color:var(--mj-black)!important;} } /* ===== Header ===== */ /* Barre blanche opaque partout, y compris sur l'accueil. Le voile sombre et la bascule au defilement ont ete retires : le header ne recouvre plus les photos, elles commencent dessous. */ .mj-header{position:fixed;top:var(--mj-adminbar);left:0;width:100%;z-index:1000;height:var(--mj-header-h);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 22px;background:var(--mj-white);color:var(--mj-black);transition:background .35s ease,color .35s ease;} /* Seul l'accueil garde le header transparent au-dessus des photos, comme le reglage header_overlay du theme Shopify, actif uniquement sur cette page. Le script pose .mj-header--solid une fois les photos depassees : le :not() rend alors la main au blanc de base. */ .mj-home .mj-header:not(.mj-header--solid){background:linear-gradient(180deg,rgba(0,0,0,.46),rgba(0,0,0,.18) 62%,rgba(0,0,0,0));color:var(--mj-white);box-shadow:none;text-shadow:0 1px 12px rgba(0,0,0,.45);} .mj-home .mj-header:not(.mj-header--solid) :focus-visible{outline-color:#fff;} /* Header fondu dans l'image : pas de bandeau, mais un voile degrade qui garantit la lisibilite du texte blanc, y compris sur un visuel clair comme la gravure de L'Histoire. Il s'efface vers le bas, donc il ne se lit jamais comme une barre. */ /* .mj-header--solid n'a plus d'effet : le script continue de poser la classe, c'est sans consequence. */ .mj-header__left{justify-self:start;display:flex;align-items:center;gap:30px;} .mj-header__right{justify-self:end;display:flex;align-items:center;gap:24px;} .mj-logo{justify-self:center;font-family:var(--mj-font-title);font-size:17px;font-weight:500;letter-spacing:.34em;text-transform:uppercase;padding-left:.34em;white-space:nowrap;} .mj-nav{display:flex;align-items:center;gap:28px;} /* Menu : Figtree 500, 9,9 px, interlettrage 0,1 em — mesuré dans base.css. */ .mj-nav a{font-family:var(--mj-font-title);font-size:9.9px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;opacity:.95;transition:opacity .2s;white-space:nowrap;} .mj-nav a:hover{opacity:.55;} .mj-nav a.is-current{opacity:1;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px;} .mj-icon{display:inline-flex;align-items:center;gap:5px;font-size:12px;letter-spacing:.06em;cursor:pointer;} .mj-icon:hover{opacity:.6;} .mj-burger{display:inline-flex;flex-direction:column;justify-content:center;gap:6px;background:none;border:0;padding:8px 4px;cursor:pointer;color:inherit;} .mj-burger span{display:block;width:20px;height:2px;background:currentColor;transition:transform .3s ease,opacity .2s ease;} /* Deux traits, pas trois : le balisage garde ses trois sur toutes les pages, on masque simplement le dernier. La croix se forme avec les deux restants, qui pivotent vers le centre (demi-distance 4,25px). */ .mj-burger span:nth-child(3){display:none;} /* Shopify n'a pas de bouton de fermeture : le hamburger devient une croix a sa place. Le tiroir n'est pas un descendant du header, d'ou :has() sur body. */ body:has(.mj-drawer.open) .mj-burger span:nth-child(1){transform:translateY(4px) rotate(45deg);} body:has(.mj-drawer.open) .mj-burger span:nth-child(2){transform:translateY(-4px) rotate(-45deg);} /* ===== Tiroir de navigation (mobile) ===== Repris de component-menu-drawer.css du theme Shopify. Points qui comptent : le panneau s'ouvre SOUS le header, qui reste visible ; il est blanc et non sombre (classe color-background-1 codee en dur dans header-drawer.liquid) ; les libelles sont en minuscules (text-transform:none) et sans separateurs ; l'ouverture est un fondu de 300ms, pas une translation (header_animation_type vaut "fade" dans header-group.json). */ /* Plein ecran : le tiroir recouvre le header, qui disparait donc pendant la navigation. Sa propre barre porte la croix a gauche et le panier a droite. */ .mj-drawer{position:fixed;inset:0;z-index:1100;background:var(--mj-white);color:var(--mj-black);display:flex;flex-direction:column;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;} .mj-drawer.open{opacity:1;visibility:visible;} /* Le panneau blanc lui-meme : 44rem dans le theme, pleine largeur en dessous. */ .mj-drawer__bar{display:flex;align-items:center;justify-content:space-between;height:calc(var(--mj-header-h) + var(--mj-adminbar));padding:var(--mj-adminbar) 22px 0;flex-shrink:0;} .mj-drawer__close{display:inline-flex;background:none;border:0;padding:0;cursor:pointer;color:var(--mj-black);} .mj-drawer__close svg{width:20px;height:20px;display:block;} .mj-drawer__bag{display:inline-flex;color:var(--mj-black);} .mj-drawer__nav{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;gap:24px;padding:9vh 24px 0;overflow-y:auto;} .mj-drawer__nav a{font-family:var(--mj-font-title);font-size:15px;font-weight:600;letter-spacing:.1em;line-height:1.2;text-transform:uppercase;color:var(--mj-black);text-decoration:none;padding:0;} /* Liens utilitaires, plus bas et plus discrets, comme le second groupe de YSL. */ .mj-drawer__sec{display:flex;flex-direction:column;align-items:center;gap:15px;padding:0 24px calc(14vh + env(safe-area-inset-bottom));} .mj-drawer__sec a{font-family:var(--mj-font-title);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--mj-grey-d);text-decoration:none;} .mj-drawer__sec a:hover{color:var(--mj-black);} /* A corriger a la source dans le snippet de la coquille des que possible. */ .mj-drawer__sec a[href*="orders"]{font-size:0;letter-spacing:0;} .mj-drawer__sec a[href*="orders"]::before{content:"Ma commande";font-size:11px;letter-spacing:.14em;} /* Le theme ne montre aucun bouton de fermeture dedie. */ /* ===== Hero (accueil) ===== */ .mj-hero{position:relative;height:100vh;height:max(100vh,100lvh,100svh);width:100%;overflow:hidden;} /* La geometrie des deux pages est identique au millieme de pixel : le tremblement observe sur l accueil ne vient donc pas de la mise en page mais du rendu. Sur La Maison, qui ne tremble pas, .mj-story__media porte un z-index et isole donc la photo dans son propre contexte d empilement. Ici la photo partageait le contexte de la page, en-tete fixe compris, ce qui oblige Safari a repeindre l ensemble a chaque image du defilement inertiel. On reproduit l isolement, et on rend l empilement explicite. */ .mj-hero__media{position:absolute;inset:0;z-index:0;} .mj-hero__media picture{display:block;width:100%;height:100%;} .mj-hero__media img,.mj-hero__media video{width:100%;height:100%;object-fit:cover;} /* Le cliche du premier ecran est en paysage : en portrait, le cadrage centre coupait le visage de droite. 54% decale la fenetre pour garder les deux visages ; sans debordement horizontal (desktop), la valeur est sans effet. */ .mj-stack__item:first-of-type .mj-hero__media img{object-position:54% 50%;} /* Voile plat, pas de degrade : index.json donne overlay_opacity 0,2 sur le premier ecran et 0,1 sur le second. */ .mj-hero__overlay{position:absolute;inset:0;z-index:1;background:rgba(0,0,0,.2);} .mj-stack__item:nth-of-type(2) .mj-hero__overlay{background:rgba(0,0,0,.1);} /* Bouton .button--simple du theme : lien texte sans fond, trait de 1px a 4px sous le mot, balaye au survol (::before glisse de -102%, ::after sort avec 200ms de retard). La zone de contenu est a 78px du bas sous 750px. */ .mj-hero__cta{position:absolute;left:0;right:0;bottom:44px;bottom:calc(44px + 100lvh - 100svh);text-align:center;z-index:3;} .mj-hero__cta a{position:relative;display:inline-block;color:#fff;font-family:var(--mj-font-title);font-size:12.06px;font-weight:600;letter-spacing:-.01em;text-transform:uppercase;padding:10px 0;text-decoration:none;overflow:hidden;} .mj-hero__cta a::before,.mj-hero__cta a::after{content:"";position:absolute;left:0;bottom:6px;width:100%;height:1px;background:currentColor;} .mj-hero__cta a::before{transform:translate3d(-102%,0,0);transition:transform 1000ms cubic-bezier(.23,1,.32,1);} .mj-hero__cta a::after{transition:transform 1000ms cubic-bezier(.23,1,.32,1) 200ms;} .mj-hero__cta a:hover::before{transform:translate3d(0,0,0);} .mj-hero__cta a:hover::after{transform:translate3d(102%,0,0);} .mj-hero__cta a:hover{opacity:.7;} .mj-hero__caption{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;padding:0 24px;text-shadow:0 1px 20px rgba(0,0,0,.4);} .mj-hero__eyebrow{font-size:11px;letter-spacing:.24em;text-transform:uppercase;opacity:.85;margin:0 0 16px;} .mj-hero__title{font-size:32px;font-weight:300;letter-spacing:.05em;margin:0 0 14px;} .mj-hero__desc{font-size:13.5px;letter-spacing:.04em;max-width:440px;opacity:.92;margin:0;} /* ===== Défilement par cran — une photo plein écran à la fois (façon Saint Laurent) ===== scroll-snap-stop:always force un seul cran par geste : impossible d'en sauter une. Le snap n'est armé que sur les pages qui contiennent un .mj-stack. « mandatory » est voulu : la page repose toujours sur un cran, et le défilement avance d'une section entière. C'est ce comportement qui fait le site — ne pas l'assouplir en « proximity », l'essai a été fait et le résultat n'était plus le même produit. Ce n'est pas lui qui empêchait le geste de rechargement d'iOS : c'était « overscroll-behavior-y:contain », retiré plus bas sur html,body. Le rechargement fonctionne désormais AVEC mandatory. */ @supports selector(:has(*)){ html:has(.mj-stack),html:has(.mj-page--maison),html:has(.mj-guide){scroll-snap-type:y mandatory;} } /* static et overflow-x:clip comme le conteneur de La Maison : un ancetre positionne entre le conteneur de defilement et les zones de cran fait recalculer les positions a chaque mouvement de la barre Safari. */ .mj-stack{position:static;} /* lvh et non dvh ni svh. Sur iOS 26, la barre d'outils flotte au-dessus du contenu et dvh se resout PLUS PETIT que la zone reellement visible : la section suivante apparaissait en bande sous la premiere. lvh est la mesure haute, donc la section couvre toujours au moins l'ecran, jamais de fuite. Contrepartie : barres affichees, une bande de ~100px est rognee en bas. On la compense la ou ca compte, sur les elements ancres en bas, en ajoutant exactement (100lvh - 100svh) a leur decalage : 0 sur ordinateur, la hauteur des barres sur iPhone. */ /* Accueil : sections plein ecran, le header transparent les recouvre. */ .mj-stack__item{height:calc(100vh - var(--mj-adminbar));height:calc(max(100vh,100lvh,100svh) - var(--mj-adminbar));min-height:0;scroll-snap-align:start;scroll-snap-stop:always;scroll-margin-top:var(--mj-adminbar);} /* Dans une pile, le hero epouse son cran plutot que de recalculer la fenetre : sinon, barre d'admin affichee, l'enfant depasse le parent de 32px. */ .mj-stack__item .mj-hero{height:100%;min-height:0;} /* Le snippet de la coquille (feuille inline mj-coquille) impose .mj-stack__item{height:calc(100svh - ...)}. Chargee apres celle-ci et de meme specificite, sa regle gagnait. Or sur iPhone svh vaut 695 quand Safari en affiche 735 derriere sa barre flottante : la section s arretait 40px trop tot et laissait voir le haut du pied de page. On reprend la main avec un selecteur plus specifique, en gardant la plus grande des unites. */ .mj-home .mj-stack__item{height:calc(max(100vh,100lvh,100svh) - var(--mj-adminbar));} @media (max-width:749px){ .mj-home .mj-stack__item{height:calc(max(100vh,100lvh,100svh) - var(--mj-adminbar));} /* Le bouton se cale sur le bas VISIBLE, pas sur le bas de la section : 44px de marge + les 60px de reserve + l ecart barre affichee/masquee. */ .mj-hero__cta{bottom:calc(44px + 100lvh - 100svh);} } /* Le pied fait desormais une page entiere (fenetre moins le header) : son cran en start coincide au pixel avec le defilement maximum, sur l'accueil comme sur les pages a barre blanche. Il glisse donc en entier, comme une photo, au lieu d'apparaitre en bande sous la derniere section. */ .mj-footer{scroll-snap-align:start;scroll-snap-stop:always;scroll-margin-top:calc(var(--mj-header-h) + var(--mj-adminbar));} /* ===== Story — sections plein écran texte sur image (La Maison) ===== */ /* Pas de padding sur le conteneur : les sections pavent la fenêtre bord à bord et le header vient les recouvrir. Toute marge ici décalerait le cran et laisserait apparaître une bande de la section précédente. */ /* ============================================================ REPRIS A L'IDENTIQUE du Liquid personnalise de la boutique Shopify (templates/page.json, section custom_liquid_JKwBjD). Ne pas `ameliorer'' ces valeurs sans reverifier la source : le bloc est centre et non colle a gauche, le texte est aligne a gauche et jamais justifie, et l'interlettrage du titre est POSITIF, contrairement a la regle globale du theme. ============================================================ */ .mj-page--maison{padding-top:calc(var(--mj-header-h) + var(--mj-adminbar));} .mj-story{position:relative;height:calc(100vh - var(--mj-header-h) - var(--mj-adminbar));height:calc(100lvh - var(--mj-header-h) - var(--mj-adminbar));min-height:0;display:flex;flex-direction:column;justify-content:center;align-items:center;background:var(--mj-white);color:var(--mj-black);padding:40px 24px;padding-bottom:calc(40px + 100lvh - 100svh);} .mj-page--maison .mj-story{scroll-snap-align:start;scroll-snap-stop:always;scroll-margin-top:calc(var(--mj-header-h) + var(--mj-adminbar));} .mj-story:has(.mj-story__more){padding-bottom:calc(150px + 100lvh - 100svh);overflow:hidden;} .mj-story__inner{position:relative;z-index:2;width:100%;max-width:100%;text-align:left;margin:0 auto;} .mj-story h2{font-family:var(--mj-font-title);font-weight:600;font-size:19px;letter-spacing:.1em;text-transform:uppercase;line-height:1.15;margin:0 0 30px;color:var(--mj-black);} .mj-story p{font-family:var(--mj-font);font-weight:400;font-size:9px;line-height:1.95;letter-spacing:.075em;margin:0 0 16px;color:#3c3c3c;text-align:left;hyphens:none;} .mj-story p:last-child{margin-bottom:0;} .mj-story__sign{font-style:italic;letter-spacing:.05em;color:var(--mj-black);margin-top:26px!important;} .mj-story__more{position:absolute;left:50%;transform:translateX(-50%);bottom:80px;bottom:calc(80px + 100lvh - 100svh);z-index:5;display:flex;flex-direction:column;align-items:center;gap:6px;font-family:var(--mj-font-title);font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--mj-black);transition:opacity .3s ease;} .mj-story__more:hover{opacity:.7;} .mj-story__more svg{width:16px;height:16px;margin:0;opacity:1;animation:mj-arrow-bounce 2s ease-in-out infinite;} @keyframes mj-arrow-bounce{0%,100%{transform:translateY(0);}50%{transform:translateY(6px);}} @media (min-width:768px){ .mj-story{padding:60px 80px;} .mj-story__inner{max-width:560px;} .mj-story h2{font-size:clamp(25px,2.6vw,35px);margin:0 0 30px;} .mj-story p{font-size:clamp(11px,.78vw,12.5px);line-height:1.9;margin:0 0 18px;} .mj-story__more{bottom:60px;font-size:11px;} } /* Une regle concurrente imposait 13px au texte et 21px au titre sous 768px, sans que j aie pu l identifier dans les feuilles chargees. On reprend la main avec un selecteur plus specifique, borne au telephone. */ @media (max-width:767px){ .mj-page--maison .mj-story h2{margin:0 0 26px;} .mj-page--maison .mj-story p{font-size:11px;line-height:1.95;letter-spacing:.075em;margin:0 0 17px;color:var(--mj-black);} .mj-page--maison .mj-story__sign{font-size:11.5px;} /* mj-coquille passe ces sections en hauteur libre sous 768px, ce qui supprime le defilement par ecran et colle le texte en haut. On reprend la main avec .mj-page--maison, plus specifique, et on garde la meme base de hauteur que l accueil pour que le pied de page reste atteignable quand la barre de Safari se retire. */ .mj-page--maison .mj-story, .mj-page--maison .mj-story:has(.mj-story__more){ height:calc(100lvh - var(--mj-header-h) - var(--mj-adminbar)); height:calc(max(100vh,100lvh,100svh) - var(--mj-header-h) - var(--mj-adminbar)); min-height:0; } .mj-page--maison .mj-story__inner{text-align:center;} } /* Les titres de La Maison reprennent la typographie du titre de la fiche produit : Figtree 500 et interlettrage negatif, la ou ils etaient en 600 tres espace. Alignes a gauche comme sur la fiche ; le texte qui les suit reste centre sur telephone. */ .mj-page--maison .mj-story h2{font-weight:500;letter-spacing:-.03em;line-height:1.3;font-size:20px;text-align:left;} /* Les paragraphes sont justifies, les titres restent alignes a gauche. Les lignes terminees par un
et la derniere ligne d un paragraphe ne se justifient pas : les vers courts de « Nos valeurs » gardent donc leur fer a gauche, seules les lignes qui vont au bout s etirent. */ /* La regle de base interdit toute cesure (hyphens:none), ce qui annule aussi les cesures conditionnelles posees dans le texte. On repasse en manual : seules les coupures ecrites dans la page sont utilisees, jamais de coupure inventee par le navigateur. */ .mj-page--maison .mj-story p{text-align:justify;-webkit-hyphens:manual;hyphens:manual;color:var(--mj-black);} @media (min-width:768px){ .mj-page--maison .mj-story h2{font-size:24px;margin:0 0 30px;} } /* Sur un ecran de moins de 660px de haut, « L Histoire » deborde de sa section d une dizaine de pixels et mord sur la suivante. La section prend alors la hauteur de son texte, avec un plancher d un ecran : le cran reste en place, rien ne se chevauche. Les iPhone ne sont pas concernes. */ @media (max-width:767px) and (max-height:660px){ .mj-page--maison .mj-story, .mj-page--maison .mj-story:has(.mj-story__more){ height:auto; min-height:calc(100lvh - var(--mj-header-h) - var(--mj-adminbar)); min-height:calc(max(100vh,100lvh,100svh) - var(--mj-header-h) - var(--mj-adminbar)); } } /* ===== PDP — Carte d'affaires ===== */ .mj-pdp{padding-top:var(--mj-header-h);background:var(--mj-white);color:var(--mj-black);} .mj-pdp__grid{max-width:var(--mj-maxw);margin:0 auto;padding:34px 24px 64px;display:flex;flex-direction:column;gap:34px;} /* Le prix se cale a droite, sur la ligne du titre, sans toucher au balisage. */ .mj-pdp__info{position:relative;} .mj-pdp__title{font-size:20px;font-weight:300;letter-spacing:.05em;text-transform:uppercase;margin:0 0 30px;padding-right:104px;} .mj-pdp__price{font-size:14px;font-weight:400;letter-spacing:.02em;color:var(--mj-black);margin:0;position:absolute;top:3px;right:0;white-space:nowrap;} .mj-pdp__btn{margin:0 0 22px;} .mj-pdp__delivery{display:flex;align-items:center;padding:4px 0 6px;margin:0;font-size:11px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;line-height:1.5;color:#000;} .mj-pdp__delivery b{font-weight:600;letter-spacing:.06em;color:#000;} .mj-pdp__delivery b::before{content:"\00a0";} .mj-etui{margin:0 0 26px;} .mj-etui__label{display:flex;align-items:center;justify-content:space-between;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mj-black);margin:0 0 14px;font-weight:500;} .mj-etui__label span{color:var(--mj-grey-d);font-weight:400;} .mj-etui__opts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;} .mj-etui__opt{background:none;border:1px solid var(--mj-line);padding:8px;cursor:pointer;font-family:inherit;text-align:center;transition:border-color .2s;} .mj-etui__opt img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;margin-bottom:8px;} .mj-etui__opt span{display:block;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mj-grey-d);} /* Pastilles cuir — placeholders CSS en attendant les photos produit */ /* Vraies photos produit (medias 328-330). Les cliches sont en portrait avec l'etui centre : le cadrage carre pleine largeur a 51% de hauteur le montre entier, marges blanches du studio comprises. */ .mj-swatch{width:100%;aspect-ratio:1/1;display:block;position:relative;overflow:hidden;background:#f6f5f3 center 51%/cover no-repeat;} .mj-etui__opt .mj-swatch{margin-bottom:8px;} .mj-swatch--crocodylia{background-image:url(https://maisonmajellan.com/wp-content/uploads/2026/08/mj-etui-crocodylia.jpg);} .mj-swatch--drakara{background-image:url(https://maisonmajellan.com/wp-content/uploads/2026/08/mj-etui-drakara.jpg);} .mj-swatch--felidi{background-image:url(https://maisonmajellan.com/wp-content/uploads/2026/10/mj-etui-felidi-v2.jpg);} .mj-etui__opt.active{border-color:var(--mj-black);} .mj-etui__opt.active span{color:var(--mj-black);} /* ===== Loupe cuir — vue plein ecran des photos d'etui ===== La pastille selectionne : le zoom a donc sa propre commande sous le choix. Fond blanc plein ecran : les cliches studio s'y fondent sans bord visible. Un toucher sur la photo agrandit a l'endroit touche, un second revient. */ .mj-etui__zoom{display:inline-flex;align-items:center;gap:7px;margin:12px 0 0;background:none;border:0;padding:0;cursor:pointer;font-family:var(--mj-font-title);font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--mj-grey-d);} .mj-etui__zoom svg{width:13px;height:13px;flex-shrink:0;} .mj-etui__zoom span{border-bottom:1px solid currentColor;padding-bottom:2px;} .mj-etui__zoom:hover,.mj-etui__zoom:focus-visible{color:var(--mj-black);} /* ===== Provenance — origine du cuir et lieu de fabrication ===== Deux lignes discretes sous le choix du cuir, la ou le client regarde la matiere. Meme graisse et meme interlettrage que les autres etiquettes de la fiche : libelle a gauche, valeur alignee a droite. */ .mj-prov{margin:18px 0 0;padding:14px 0 0;border-top:1px solid var(--mj-line);display:grid;gap:9px;} .mj-prov__row{display:grid;grid-template-columns:1fr auto;align-items:baseline;column-gap:18px;} .mj-prov__k{margin:0;font-size:10px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;line-height:1.5;color:var(--mj-grey-d);} .mj-prov__v{margin:0;font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;line-height:1.5;color:var(--mj-black);text-align:right;} .mj-loupe{position:fixed;inset:0;z-index:1300;background:#fff;display:flex;flex-direction:column;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;} .mj-loupe.open{opacity:1;visibility:visible;} .mj-loupe__head{display:flex;justify-content:flex-end;padding:14px 18px 0;} .mj-loupe__close{background:none;border:0;padding:10px;cursor:pointer;color:var(--mj-black);} .mj-loupe__close svg{width:20px;height:20px;display:block;} .mj-loupe__stage{flex:1;min-height:0;overflow:hidden;display:flex;align-items:center;justify-content:center;cursor:zoom-in;} .mj-loupe__stage img{max-width:100%;max-height:100%;display:block;transition:transform .45s cubic-bezier(.22,1,.36,1);} .mj-loupe.zoom .mj-loupe__stage{cursor:zoom-out;} .mj-loupe.zoom .mj-loupe__stage img{transform:scale(2.2);} .mj-loupe__hint{text-align:center;font-family:var(--mj-font-title);font-size:9.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--mj-grey);margin:10px 16px 2px;} .mj-loupe__names{display:flex;justify-content:center;gap:26px;padding:8px 16px calc(18px + env(safe-area-inset-bottom));} .mj-loupe__names button{background:none;border:0;padding:6px 0;cursor:pointer;font-family:var(--mj-font-title);font-size:10.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--mj-grey);border-bottom:1px solid transparent;} .mj-loupe__names button.active{color:var(--mj-black);border-bottom-color:var(--mj-black);} /* Photo du produit : la vraie carte, recto et verso, sur fond blanc. Elle a remplace le montage CSS qui simulait une carte bordeaux — le produit reel est gris anthracite grave et noir mat. */ .mj-pdp__media img.mj-pdp__photo{display:block;width:100%;max-width:620px;height:auto;margin:0 auto;} /* ============================================================ GUIDE — le parcours en quatre etapes ------------------------------------------------------------ Maquette fournie par le client : un filet vertical relie les etapes, chaque numero est pose dessus, et le contenu alterne — texte a gauche puis a droite. Captures reelles de l application plutot que les illustrations de la maquette. ============================================================ */ .mj-etapes{position:relative;background:var(--mj-white);padding:0 0 40px;} .mj-intro__rang{font-family:var(--mj-font-title);font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--mj-grey);margin:0 0 18px;} .mj-intro h1{font-size:26px;font-weight:300;letter-spacing:.02em;line-height:1.3;text-transform:none;margin:0 0 18px;color:var(--mj-black);} @media (min-width:900px){.mj-intro h1{font-size:34px;}} .mj-etape{position:relative;display:grid;align-items:center;} .mj-etape__num{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid var(--mj-line);border-radius:50%;background:var(--mj-white);font-family:var(--mj-font-title);font-size:12px;font-weight:500;color:var(--mj-grey-d);flex-shrink:0;} .mj-etape__rang{font-family:var(--mj-font-title);font-size:10.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--mj-grey);margin:0 0 14px;} .mj-etape__texte h2{font-size:24px;font-weight:300;letter-spacing:.01em;line-height:1.25;text-transform:none;margin:0 0 18px;color:var(--mj-black);} .mj-etape__desc{font-size:14px;line-height:1.85;letter-spacing:.01em;color:#3c3c3c;margin:0 0 26px;} .mj-etape__pts{list-style:none;margin:0;padding:0;border-top:1px solid var(--mj-line);} .mj-etape__pts li{border-bottom:1px solid var(--mj-line);padding:13px 0;font-size:13px;line-height:1.6;color:var(--mj-black);} .mj-etape__ecran{margin:0;display:flex;align-items:center;justify-content:center;} .mj-etape__ecran img{display:block;width:auto;max-width:100%;height:340px;object-fit:contain;} /* Telephone : une colonne, le numero en tete, l ecran avant le texte. */ @media (max-width:899px){ .mj-etape{grid-template-columns:1fr;justify-items:center;text-align:center;gap:18px;padding:34px 24px 44px;} .mj-etape__num{order:0;} .mj-etape__ecran{order:1;} .mj-etape__texte{order:2;max-width:34ch;} .mj-etape__pts{text-align:left;} .mj-etape__ecran img{height:300px;} } /* Ordinateur : le filet vertical, le numero pose dessus, contenu alterne. */ @media (min-width:900px){ .mj-etapes{padding:0 38px 80px;} .mj-etapes::before{content:"";position:absolute;left:calc(38px + 19px);top:60px;bottom:120px;width:1px;background:var(--mj-line);} .mj-etape{grid-template-columns:38px minmax(0,1fr) minmax(0,1fr);column-gap:56px;padding:36px 0;} .mj-etape__num{grid-column:1;grid-row:1;justify-self:center;} .mj-etape__texte{grid-column:2;grid-row:1;max-width:460px;} .mj-etape__ecran{grid-column:3;grid-row:1;} .mj-etape:nth-child(even) .mj-etape__texte{grid-column:3;grid-row:1;} .mj-etape:nth-child(even) .mj-etape__ecran{grid-column:2;grid-row:1;} .mj-etape__ecran img{height:420px;} .mj-etape__texte h2{font-size:30px;} } /* Defilement par cran, comme sur l accueil et sur La Maison : l introduction puis chaque etape occupent un ecran, le pied de page ferme la serie. Sur telephone les etapes sont denses : la photo descend a 200px, la pastille chiffree disparait et les espacements se resserrent. On pose min-height et non height : sous 690px de haut, l etape 1 grandit de quelques pixels au lieu de rogner son texte. */ .mj-guide{padding-top:calc(var(--mj-header-h) + var(--mj-adminbar));} .mj-guide .mj-intro{min-height:calc(100lvh - var(--mj-header-h) - var(--mj-adminbar));min-height:calc(max(100vh,100lvh,100svh) - var(--mj-header-h) - var(--mj-adminbar));display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;} .mj-guide .mj-intro, .mj-guide .mj-etape{scroll-snap-align:start;scroll-snap-stop:always;scroll-margin-top:calc(var(--mj-header-h) + var(--mj-adminbar));} @media (max-width:899px){ .mj-guide .mj-etapes{padding-bottom:0;} /* Hauteur fixe d un ecran, et deux rangees : la photo prend tout ce que le texte ne consomme pas. Une etape dense la reduit, une etape courte la laisse grandir — chacune tient un ecran exact, donc le cran obligatoire ne cache jamais une ligne. Les selecteurs sont volontairement plus longs que ceux du bloc typographique, qui vient plus bas dans le fichier. */ .mj-guide .mj-etape{ height:calc(100lvh - var(--mj-header-h) - var(--mj-adminbar)); height:calc(max(100vh,100lvh,100svh) - var(--mj-header-h) - var(--mj-adminbar)); min-height:0; grid-template-rows:minmax(150px,1fr) auto; padding:14px 24px 20px;gap:14px; } .mj-guide .mj-etape__num{display:none;} .mj-guide .mj-etape__ecran{min-height:0;height:100%;} .mj-guide .mj-etape__ecran img{height:100%;width:auto;max-width:100%;object-fit:contain;} .mj-guide .mj-etape__rang{margin:0 0 8px;} .mj-guide .mj-etape .mj-etape__texte h2{font-size:17px;line-height:1.25;margin:0 0 12px;} .mj-guide .mj-etape .mj-etape__desc, .mj-guide .mj-etape .mj-etape__pts li{font-size:10.5px;line-height:1.75;} .mj-guide .mj-etape .mj-etape__pts li{padding:6px 0;} .mj-guide .mj-etape .mj-etape__desc--fin{margin:12px 0 0;} } @media (min-width:900px){ .mj-guide .mj-etape{min-height:calc(max(100vh,100lvh,100svh) - var(--mj-header-h) - var(--mj-adminbar));} } /* ===== Guide — meme typographie que La Maison, en capitales ===== Les capitales viennent de la CSS et non du texte : le contenu de la page reste lisible dans l editeur et exploitable par les moteurs. Titres en Figtree 500 a interlettrage negatif, corps a 11px espace, comme sur La Maison et sur la fiche produit. */ .mj-guide .mj-intro h1, .mj-guide .mj-etape__texte h2{font-family:var(--mj-font-title);font-weight:500;font-size:20px;letter-spacing:-.03em;line-height:1.3;text-transform:uppercase;color:var(--mj-black);margin:0 0 22px;} .mj-guide .mj-intro p, .mj-guide .mj-etape__desc, .mj-guide .mj-etape__pts li{font-family:var(--mj-font);font-weight:400;font-size:11px;line-height:1.95;letter-spacing:.075em;text-transform:uppercase;color:#3c3c3c;} .mj-guide .mj-intro p{max-width:520px;margin:0 0 17px;} .mj-guide .mj-intro p:last-child{margin:0;} .mj-guide .mj-etape__desc{margin:0 0 22px;} .mj-guide .mj-etape__desc--fin{margin:22px 0 0;} .mj-guide .mj-etape__pts li{color:var(--mj-black);padding:12px 0;} /* Justifies comme sur La Maison. Les puces restent au fer a gauche : ce sont des elements de liste, pas du texte courant. */ .mj-guide .mj-intro p, .mj-guide .mj-etape__desc{text-align:justify;} @media (min-width:768px){ .mj-guide .mj-intro h1, .mj-guide .mj-etape__texte h2{font-size:24px;margin:0 0 26px;} } /* ===== Accordéons ===== */ .mj-acc{border-top:1px solid #d8d8d8;} .mj-acc:last-of-type{border-bottom:1px solid #d8d8d8;} .mj-acc__head{width:100%;background:none;border:0;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;cursor:pointer;font-family:inherit;font-size:12px;font-weight:400;letter-spacing:.01em;line-height:1.4;color:#000;text-align:left;text-transform:uppercase;} /* Le chevron du balisage a un viewBox carre 24x24 ou la fleche n'occupe que la moitie de la hauteur : 22px de boite donnent une fleche visible de 11x5,5, soit la taille du chevron Shopify (11x7 dans un viewBox 12x8). */ .mj-acc__ico{flex-shrink:0;width:22px;height:22px;margin:-5px 0;display:block;transition:transform .35s cubic-bezier(.16,1,.3,1);} .mj-acc.open .mj-acc__ico{transform:rotate(180deg);} .mj-acc__body{max-height:0;overflow:hidden;transition:max-height .6s cubic-bezier(.16,1,.3,1);} .mj-acc__inner{padding:4px 0 26px;font-size:12px;line-height:1.8;color:#000;} .mj-acc__inner p{margin:0 0 10px;} .mj-acc__inner p:last-child{margin-bottom:0;} .mj-acc__inner ul{margin:0 0 10px;padding-left:16px;} .mj-acc__inner li{margin:0 0 6px;list-style:disc;} .mj-acc__inner li:last-child{margin-bottom:0;} .mj-acc__inner strong{color:#000;font-weight:600;} .mj-acc__inner .mj-acc__note{display:block;margin:14px 0 0;font-size:12px;font-weight:400;line-height:1.8;color:#000;} .mj-acc__note strong{font-weight:600;} /* Le lien passe a la ligne et saute une ligne, comme dans le Liquid Shopify ou il est un frere du paragraphe et non un enfant. */ .mj-acc__note a{display:block;width:fit-content;margin-top:18px;font-size:12px;font-weight:400;color:#000;text-decoration:underline;text-underline-offset:2px;} .mj-acc button.mj-acc__head{white-space:normal;} .mj-acc--faq .mj-acc__head{text-transform:none;font-size:15px;letter-spacing:.01em;font-weight:400;padding:22px 0;} .mj-acc--faq .mj-acc__inner{font-size:14px;} /* ===== Inclus avec la carte ===== */ .mj-incl{background:var(--mj-white);padding:56px 24px 78px;border-top:1px solid var(--mj-line);} .mj-incl__wrap{max-width:var(--mj-maxw);margin:0 auto;} .mj-incl h2{font-size:21px;font-weight:300;letter-spacing:.07em;text-transform:uppercase;margin:0 0 32px;text-align:center;} .mj-incl__grid{display:grid;grid-template-columns:1fr;gap:20px;} .mj-incl__card{border:1px solid var(--mj-line);padding:34px 26px;text-align:center;} .mj-incl__ico{width:32px;height:32px;margin:0 auto 16px;color:var(--mj-black);} .mj-incl__card h3{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;margin:0 0 10px;} .mj-incl__card p{font-size:13px;color:var(--mj-grey-d);line-height:1.7;margin:0;} /* La garantie se deplie sur place :
natif, sans JavaScript. */ .mj-incl__plus{margin:10px 0 0;} .mj-incl__plus summary{list-style:none;cursor:pointer;font-family:var(--mj-font-title);font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--mj-grey-d);display:inline-block;border-bottom:1px solid currentColor;padding-bottom:2px;} .mj-incl__plus summary::-webkit-details-marker{display:none;} .mj-incl__plus summary::marker{content:"";} .mj-incl__plus summary:hover,.mj-incl__plus summary:focus-visible{color:var(--mj-black);} .mj-incl__plus[open] summary{color:var(--mj-black);} .mj-incl__plus p{margin:14px 0 0;} /* ===== Pages documentaires ===== */ .mj-page--light{padding-top:var(--mj-header-h);background:var(--mj-white);color:var(--mj-black);} .mj-doc{max-width:760px;margin:0 auto;padding:56px 24px 84px;} .mj-doc__title{font-size:26px;font-weight:300;letter-spacing:.05em;text-transform:uppercase;margin:0 0 44px;} .mj-doc__block{margin:0 0 50px;} .mj-doc__sub{font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;margin:0 0 12px;} /* Sous-titre de second niveau, pour la section localisation : lisible sans crier, donc en minuscules et sans interlettrage large. */ .mj-doc .mj-doc__sub2{font-size:14px;font-weight:600;letter-spacing:.01em;line-height:1.4;color:var(--mj-black);margin:26px 0 8px;text-transform:none;} .mj-doc__email a{font-size:15px;color:var(--mj-grey-d);text-decoration:underline;} .mj-doc__faq-title{font-size:20px;font-weight:300;letter-spacing:.04em;text-transform:uppercase;margin:0 0 6px;} .mj-intro{background:var(--mj-white);color:var(--mj-black);text-align:center;padding:88px 24px 30px;} .mj-intro h2{font-size:27px;font-weight:300;letter-spacing:.03em;margin:0 0 18px;} .mj-intro p{max-width:620px;margin:0 auto;font-size:14px;line-height:1.85;color:var(--mj-grey-d);} .mj-feat{background:var(--mj-white);padding:36px 24px 78px;} .mj-feat__wrap{max-width:var(--mj-maxw);margin:0 auto;display:flex;flex-direction:column;gap:34px;} .mj-feat__list{display:flex;flex-direction:column;} .mj-feat__item{border:0;background:none;text-align:left;font-family:inherit;cursor:pointer;padding:18px 0 18px 20px;border-left:2px solid transparent;transition:.25s;} .mj-feat__item h3{font-size:14px;letter-spacing:.13em;text-transform:uppercase;font-weight:500;margin:0;color:var(--mj-grey);transition:.25s;} .mj-feat__item p{max-height:0;overflow:hidden;margin:0;font-size:13.5px;line-height:1.75;color:var(--mj-grey-d);transition:max-height .4s ease,margin .25s;} .mj-feat__item.active{border-left-color:var(--mj-black);} .mj-feat__item.active h3{color:var(--mj-black);} .mj-feat__item.active p{max-height:200px;margin:12px 0 0;} .mj-feat__media{order:-1;} .mj-feat__media img{width:100%;height:auto;object-fit:cover;aspect-ratio:4/5;} .mj-edito{background:var(--mj-white);color:var(--mj-black);padding:38px 24px;} .mj-edito__wrap{max-width:var(--mj-maxw);margin:0 auto;display:flex;flex-direction:column;gap:26px;} .mj-edito__media img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;} .mj-edito__text h2{font-size:28px;font-weight:300;letter-spacing:.02em;text-transform:uppercase;margin:0 0 18px;line-height:1.18;} .mj-edito__text p{font-size:14px;line-height:1.8;color:var(--mj-grey-d);max-width:460px;margin:0;} /* ===== Panier latéral ===== */ .mj-cart-ov{position:fixed;inset:0;background:rgba(0,0,0,.4);opacity:0;visibility:hidden;transition:opacity .35s ease;z-index:1150;} .mj-cart-ov.open{opacity:1;visibility:visible;} .mj-cart{position:fixed;top:0;right:0;height:100%;width:100%;max-width:418px;background:var(--mj-white);color:var(--mj-black);z-index:1200;transform:translateX(100%);transition:transform .4s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;font-family:var(--mj-font);} .mj-cart.open{transform:translateX(0);} .mj-cart__head{display:flex;align-items:center;justify-content:space-between;padding:24px 26px;border-bottom:1px solid var(--mj-line);} .mj-cart__title{font-size:13px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;} .mj-cart__close{background:none;border:0;font-size:26px;line-height:1;cursor:pointer;color:var(--mj-black);font-family:inherit;} .mj-cart__body{flex:1;overflow-y:auto;padding:0 26px;} .mj-cart__item{display:flex;gap:16px;padding:22px 0;border-bottom:1px solid var(--mj-line);} .mj-cart__thumb{width:60px;height:60px;flex-shrink:0;border-radius:8px;background:#f4f4f4;display:flex;align-items:center;justify-content:center;color:var(--mj-grey-d);overflow:hidden;} .mj-cart__thumb svg{width:24px;height:24px;} .mj-cart__thumb img{width:100%;height:100%;object-fit:cover;} .mj-cart__info{flex:1;min-width:0;} .mj-cart__line{display:flex;justify-content:space-between;gap:12px;align-items:baseline;} .mj-cart__name{font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;} .mj-cart__sub{display:block;font-size:11.5px;color:var(--mj-grey-d);margin-top:4px;letter-spacing:.03em;} .mj-cart__price{font-size:13px;white-space:nowrap;} .mj-cart__price--incl{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mj-grey-d);} .mj-cart__foot{padding:22px 26px 26px;border-top:1px solid var(--mj-line);} .mj-cart__trow{display:flex;justify-content:space-between;align-items:baseline;} .mj-cart__tlabel{font-size:13px;letter-spacing:.14em;text-transform:uppercase;} .mj-cart__tval{font-size:19px;font-weight:400;} .mj-cart__ship{font-size:11px;color:var(--mj-grey);margin:6px 0 0;letter-spacing:.04em;} .mj-cart__recur{font-size:11.5px;color:var(--mj-grey-d);margin:4px 0 18px;letter-spacing:.04em;} .mj-cart__pay{width:100%;} /* ===== Boutons ===== */ /* Boutons du thème : Figtree 600, 12,06 px, hauteur 36 px, padding 0 24 px, aucun rayon, aucune bordure, transition 0,45 s. Le survol n'est pas une inversion mais un balayage : un ::after passe de 0 à 100 % de largeur en #282828, le libellé restant #f9f9f9 dans les deux états. */ .mj-btn{position:relative;z-index:0;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 24px;background:var(--mj-black);color:var(--mj-btn-label);border:0;border-radius:0;font-family:var(--mj-font-title);font-weight:600;font-size:12.06px;letter-spacing:-.01em;text-transform:uppercase;cursor:pointer;} /* z-index négatif : le voile se peint au-dessus du fond du bouton mais sous son libellé, sans avoir à envelopper le texte dans une balise. */ .mj-btn::after{content:"";position:absolute;inset:0 auto 0 0;width:0;background:var(--mj-btn-hover);transition:width .45s ease;z-index:-1;} .mj-btn:hover::after{width:100%;} .mj-home a.mj-btn,.mj-page a.mj-btn,button.mj-btn{color:var(--mj-btn-label);background:var(--mj-black);} /* Pas d'inversion au survol : le thème garde le libellé clair et fait seulement glisser le voile #282828. Voir .mj-btn::after ci-dessus. */ .mj-btn--block{width:100%;} /* Mobile d'abord : la navigation desktop et l'icône compte restent masquées, seul le burger est visible. Réactivées dans le bloc >=1024px. */ .mj-nav--left,.mj-nav--right,.mj-icon--user{display:none;} /* Focus clavier — visible sans polluer le clic souris */ .mj-home :focus-visible,.mj-page :focus-visible{outline:2px solid currentColor;outline-offset:3px;} .mj-story :focus-visible{outline-color:var(--mj-black);} .mj-header :focus-visible{outline-color:var(--mj-black);} .mj-header--solid :focus-visible{outline-color:var(--mj-black);} /* ============================================================ FOOTER — newsletter en tête + colonnes en accordéon (mobile) ============================================================ */ /* ===== Pied de page — pleine page, contenu centre, facon Saint Laurent ===== */ /* Meme base de hauteur que la section : sinon le defilement ne peut pas atteindre le cran du pied de page quand la barre Safari se masque. */ .mj-footer{min-height:calc(100vh - var(--mj-header-h) - var(--mj-adminbar));min-height:calc(max(100vh,100lvh,100svh) - var(--mj-adminbar));display:flex;align-items:center;justify-content:center;background:var(--mj-white);color:var(--mj-black);padding:34px 24px;position:relative;z-index:2;} .mj-footer__pile{display:flex;flex-direction:column;align-items:center;gap:26px;text-align:center;} .mj-foot-grp{display:flex;flex-direction:column;align-items:center;gap:10px;} .mj-foot-grp__t{margin:0 0 3px;font-family:var(--mj-font-title);font-size:9.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--mj-grey);} .mj-foot-grp a{font-family:var(--mj-font-title);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--mj-black);text-decoration:none;} .mj-foot-grp a{transition:color .2s ease;} .mj-foot-grp a:hover,.mj-foot-grp a:focus-visible{color:var(--mj-black);text-decoration:underline;text-underline-offset:3px;} /* ============================================================ SURVOL — tout ce qui se clique reagit ------------------------------------------------------------ Les libelles gris passent au noir. Ceux qui sont deja noirs, ou blancs sur fond sombre, s attenuent : les noircir les rendrait illisibles. Les boutons pleins gardent leur trait anime. ============================================================ */ .mj-loupe__names button,.mj-foot-insta,.mj-etui__opt,.mj-acc__head, .mj-drawer__close,.mj-drawer__bag,.mj-cart__close,.mj-loupe__close, .mj-logo,.mj-incl__plus summary,.mj-etui__zoom{transition:color .2s ease,opacity .2s ease;} .mj-loupe__names button:hover,.mj-loupe__names button:focus-visible{color:var(--mj-black);} .mj-foot-insta:hover,.mj-foot-insta:focus-visible{text-decoration:underline;text-underline-offset:3px;} .mj-etui__opt:hover,.mj-acc__head:hover,.mj-drawer__close:hover,.mj-drawer__bag:hover, .mj-cart__close:hover,.mj-loupe__close:hover,.mj-logo:hover, .mj-wc .show-password-input:hover{opacity:.62;} .mj-foot-grp__t{display:none;} .mj-footer .mj-foot-grp a{padding:0;font-size:11px;line-height:1.7;letter-spacing:.1em;color:var(--mj-grey-d);} .mj-footer .mj-foot-grp{gap:4px;} .mj-footer .mj-footer__pile{gap:32px;} /* Memes libelles et meme ordre que dans le menu. Les textes viennent du snippet de la coquille : on les remplace a l affichage, et on retablit l ordre avec flexbox. A corriger a la source des que possible. */ .mj-footer .mj-foot-grp a[href*="orders"], .mj-footer .mj-foot-grp a[href*="edit-account"]{font-size:0;letter-spacing:0;} .mj-footer .mj-foot-grp a[href*="edit-account"]{order:1;} .mj-footer .mj-foot-grp a[href*="orders"]{order:2;} .mj-footer .mj-foot-grp a[href*="orders"]::before{content:"Ma commande";font-size:11px;line-height:1.7;letter-spacing:.1em;} .mj-footer .mj-foot-grp a[href*="edit-account"]::before{content:"Mon compte";font-size:11px;line-height:1.7;letter-spacing:.1em;} .mj-foot-insta{display:inline-block;} .mj-footer .mj-footer__copy{margin:4px 0 0;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mj-grey);} /* ===== Desktop ===== */ /* Bascule de la NAVIGATION : 1100 px dans le thème, pas 1024. */ @media (min-width:1100px){ .mj-burger{display:none;} .mj-nav--left,.mj-nav--right{display:flex;} .mj-icon--user{display:inline-flex;} .mj-header{padding:0 38px;} } /* Bascule de la MISE EN PAGE : 750 px, le point de rupture le plus utilisé du thème (317 occurrences dans base.css). */ @media (min-width:750px){ /* Colonne assez large : la justification redevient propre. */ .mj-hero__title{font-size:44px;} /* 2rem entre 750 et 1099px, 2,4rem au-dela : valeurs de section-media-banner.css */ .mj-hero__cta{bottom:20px;} .mj-pdp__grid{flex-direction:row;align-items:flex-start;gap:64px;padding:48px 38px 80px;} .mj-pdp__media{flex:1;position:sticky;top:calc(var(--mj-header-h) + var(--mj-adminbar) + 20px);} .mj-pdp__info{width:430px;flex-shrink:0;} .mj-pdp__title{font-size:24px;} .mj-incl__grid{grid-template-columns:repeat(3,1fr);gap:24px;} .mj-intro{padding:104px 24px 40px;} .mj-intro h2{font-size:34px;} .mj-feat__wrap{flex-direction:row;align-items:center;gap:72px;} .mj-feat__list{flex:1;} .mj-feat__media{order:0;flex:1;} .mj-edito{padding:72px 38px;} .mj-edito__wrap{flex-direction:row;align-items:center;gap:72px;} .mj-edito__media,.mj-edito__text{flex:1;} .mj-edito--rev .mj-edito__wrap{flex-direction:row-reverse;} .mj-edito__text h2{font-size:42px;} /* Footer desktop : colonnes ouvertes à gauche, newsletter à droite */ } /* ============================================================ HABILLAGE INJECTÉ PAR LE SNIPPET PHP Pages sans contenu éditable : Boutique, fiches produit, endpoints Woo. Le porte alors la classe mj-shell (voir snippet-majellan.php). ============================================================ */ body.mj-shell{font-family:var(--mj-font);line-height:1.6;color:var(--mj-black);background:var(--mj-white);} body.mj-shell a{text-decoration:none;color:inherit;} :where(body.mj-shell) button{background:none;border:0;border-radius:0;box-shadow:none;color:inherit;font-family:inherit;} .mj-shell-spacer{height:var(--mj-header-h);} body.mj-shell .site-main,body.mj-shell main#content{padding:0 24px 72px!important;max-width:var(--mj-maxw)!important;margin:0 auto!important;} body.mj-shell .woocommerce-products-header__title{display:block!important;font-size:24px;font-weight:300;letter-spacing:.08em;text-transform:uppercase;margin:30px 0 10px;} body.mj-shell .woocommerce-breadcrumb{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mj-grey);padding:26px 0 0;} body.mj-shell .woocommerce-breadcrumb a{color:var(--mj-grey-d);} body.mj-shell .woocommerce-result-count{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mj-grey-d);} body.mj-shell .woocommerce-ordering select{height:46px;border:1px solid var(--mj-line);border-radius:0;font-family:inherit;font-size:13px;padding:0 12px;background:#fff;color:var(--mj-black);} body.mj-shell ul.products{display:grid;grid-template-columns:repeat(2,1fr);gap:28px 18px;list-style:none;margin:26px 0 0;padding:0;} /* WooCommerce pose un clearfix ::before/::after sur ul.products. Dans une grille, ces pseudo-éléments deviennent des cases : le premier produit se retrouvait décalé d'une colonne, avec une case vide devant lui. */ body.mj-shell ul.products::before,body.mj-shell ul.products::after{display:none!important;} body.mj-shell ul.products li.product{float:none!important;width:auto!important;margin:0!important;text-align:left;} body.mj-shell ul.products li.product img{width:100%;aspect-ratio:1/1;object-fit:cover;margin:0 0 14px;background:#f4f4f4;} body.mj-shell ul.products li.product .woocommerce-loop-product__title{font-size:13px!important;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--mj-black)!important;margin:0 0 6px;padding:0;} body.mj-shell ul.products li.product .price{font-size:12.5px;color:var(--mj-grey-d)!important;display:block;margin:0 0 14px;line-height:1.5;} body.mj-shell ul.products li.product .price ins{text-decoration:none;} body.mj-shell ul.products li.product .button, body.mj-shell ul.products li.product .added_to_cart{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:48px;padding:0 14px;background:var(--mj-black);color:#fff;border:1px solid var(--mj-black);font-family:inherit;font-size:11px;letter-spacing:.14em;text-transform:uppercase;border-radius:0;margin:0;text-align:center;line-height:1.3;transition:.25s;} body.mj-shell ul.products li.product .button:hover, body.mj-shell ul.products li.product .added_to_cart:hover{background:#fff;color:var(--mj-black);} body.mj-shell .woocommerce-message,body.mj-shell .woocommerce-info{background:#fafafa;border:0;border-left:2px solid var(--mj-black);color:var(--mj-black);padding:14px 18px;font-size:13px;line-height:1.5;list-style:none;} @media (min-width:1100px){ /* 2,4rem au-dela de 1100px (section-media-banner.css:552) */ .mj-hero__cta{bottom:24px;} body.mj-shell .site-main,body.mj-shell main#content{padding:0 38px 96px!important;} body.mj-shell ul.products{grid-template-columns:repeat(4,1fr);gap:44px 26px;} body.mj-shell .woocommerce-products-header__title{font-size:30px;} } /* ===== WooCommerce checkout & panier — habillage Majellan ===== */ .mj-wc{padding-top:var(--mj-header-h);background:var(--mj-white);color:var(--mj-black);min-height:100vh;} .mj-wc__wrap{max-width:1080px;margin:0 auto;padding:46px 24px 90px;} .mj-wc__title{font-size:24px;font-weight:300;letter-spacing:.08em;text-transform:uppercase;margin:0 0 36px;} .mj-wc .woocommerce{font-family:var(--mj-font);} /* Paiement express (Apple Pay, Google Pay) reactive a la demande du client. Il etait masque ici : sur un abonnement il court-circuite la saisie de l adresse et la case des CGV, et Stripe dessine son bouton dans un cadre isole, donc impossible a mettre a la charte. Voir les points de vigilance transmis avec cette modification. */ .mj-wc .woocommerce-form-coupon-toggle{display:none!important;} /* WooCommerce prefixe ses messages d'une pastille dessinee avec sa police d'icones maison. Cette police n'est pas chargee ici, le navigateur affiche donc un carre vide qui ressemble a une image cassee. On supprime la pastille plutot que de charger une police entiere pour trois glyphes. */ .mj-wc .woocommerce-message::before,.mj-wc .woocommerce-info::before, .mj-wc .woocommerce-error::before,body.mj-shell .woocommerce-message::before, body.mj-shell .woocommerce-info::before,body.mj-shell .woocommerce-error::before{display:none!important;content:none!important;} .mj-wc .woocommerce-message,.mj-wc .woocommerce-info,.mj-wc .woocommerce-error{background:#fafafa;border:0;border-left:2px solid var(--mj-black);color:var(--mj-black);padding:14px 18px;font-size:13px;line-height:1.5;list-style:none;margin:0 0 26px;} .mj-wc .woocommerce-error{border-left-color:#b3261e;} /* Sur le tunnel, le recapitulatif est deja a l'ecran : annoncer l'ajout au panier et proposer d'y retourner ne fait qu'ajouter du bruit et une sortie du tunnel. Les erreurs, elles, restent visibles. */ body.woocommerce-checkout .woocommerce-message{display:none;} /* Le lien « Voir le panier » pointe vers la page ou l'on se trouve deja. Il faut a.button et non .button : la regle d'habillage des boutons porte sur a.button, plus specifique. */ .mj-wc .woocommerce .woocommerce-message a.button{display:none;} /* WooCommerce donne le focus a la notification au chargement (tabindex="-1", role="alert"). Un anneau de focus s'affichait donc en permanence, lu comme un cadre noir autour du bandeau. Ce n'est pas une commande : on le retire. */ .mj-wc .woocommerce-message:focus,.mj-wc .woocommerce-info:focus, .mj-wc .woocommerce-error:focus{outline:none;} .mj-wc .woocommerce-error li{margin:0;} .mj-wc .woocommerce-message a,.mj-wc .woocommerce-info a{color:var(--mj-black);text-decoration:underline;} .mj-wc .woocommerce h3,.mj-wc #order_review_heading{font-size:13px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;margin:34px 0 18px;color:var(--mj-black);} .mj-wc .woocommerce form .form-row{margin:0 0 16px;padding:0;} .mj-wc .woocommerce form .form-row label{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mj-grey-d);margin-bottom:6px;display:block;} .mj-wc .woocommerce form .form-row input.input-text, .mj-wc .woocommerce form .form-row textarea, .mj-wc .woocommerce form .form-row select{height:50px;border:1px solid var(--mj-line);border-radius:0;padding:0 14px;font-family:var(--mj-font);font-size:14px;color:var(--mj-black);background:#fff;width:100%;box-shadow:none;} .mj-wc .woocommerce form .form-row textarea{height:110px;padding:12px 14px;} .mj-wc .woocommerce form .form-row input.input-text:focus, .mj-wc .woocommerce form .form-row textarea:focus, .mj-wc .woocommerce form .form-row select:focus{outline:none;border-color:var(--mj-black);} .mj-wc .select2-container--default .select2-selection--single{height:50px;border:1px solid var(--mj-line);border-radius:0;} .mj-wc .select2-container--default .select2-selection--single .select2-selection__rendered{line-height:48px;padding-left:14px;font-size:14px;color:var(--mj-black);} .mj-wc .select2-container--default .select2-selection--single .select2-selection__arrow{height:48px;} @media (min-width:900px){ body.woocommerce-checkout .mj-wc .col2-set{display:flex;gap:56px;} body.woocommerce-checkout .mj-wc .col2-set .col-1,body.woocommerce-checkout .mj-wc .col2-set .col-2{flex:1;float:none;width:auto;} } .mj-wc .woocommerce table.shop_table{border:1px solid var(--mj-line);border-radius:0;border-collapse:collapse;margin:0 0 30px;width:100%;} .mj-wc .woocommerce table.shop_table th,.mj-wc .woocommerce table.shop_table td{border-top:1px solid var(--mj-line);border-bottom:0;border-left:0;border-right:0;padding:15px 16px;font-size:13.5px;color:var(--mj-black);} .mj-wc .woocommerce table.shop_table thead th{border-top:0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mj-grey-d);background:#fafafa;} .mj-wc .woocommerce table.shop_table tfoot th{font-size:12px;letter-spacing:.1em;text-transform:uppercase;} .mj-wc .woocommerce table.shop_table .order-total td,.mj-wc .woocommerce table.shop_table .order-total th{font-size:16px;font-weight:500;} .mj-wc .woocommerce-checkout #payment{background:#fafafa;border:1px solid var(--mj-line);border-radius:0;} .mj-wc .woocommerce-checkout #payment ul.payment_methods{border-bottom:1px solid var(--mj-line);padding:20px;} .mj-wc .woocommerce-checkout #payment ul.payment_methods li{list-style:none;font-size:14px;} .mj-wc .woocommerce-checkout #payment div.payment_box{background:#fff;border:1px solid var(--mj-line);color:var(--mj-black);font-size:13px;} .mj-wc .woocommerce-checkout #payment div.payment_box::before{display:none;} .mj-wc .woocommerce-checkout #payment div.place-order{padding:20px;} .mj-wc .woocommerce-privacy-policy-text{font-size:11.5px;color:var(--mj-grey);} .mj-wc .woocommerce-privacy-policy-text a{color:var(--mj-grey-d);text-decoration:underline;} /* Un seul systeme de boutons sur tout le site. Valeurs de .button--primary du theme Madrid : Figtree 600, 12,06px, capitales, interlettrage -0,01em, 36px de haut, 24px de cotes, et le meme balayage #282828 au survol que .mj-btn plutot qu'une inversion. */ .mj-wc .woocommerce #place_order, .mj-wc .woocommerce button.button, .mj-wc .woocommerce a.button, .mj-wc .woocommerce input.button, .mj-wc .woocommerce a.checkout-button{position:relative;z-index:0;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;min-height:36px;height:auto;padding:10px 24px;background:var(--mj-black);color:var(--mj-btn-label);border:0;border-radius:0;font-family:var(--mj-font-title);font-weight:600;font-size:12.06px;letter-spacing:-.01em;line-height:1.5;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:none;} .mj-wc .woocommerce #place_order::after, .mj-wc .woocommerce button.button::after, .mj-wc .woocommerce a.button::after, .mj-wc .woocommerce input.button::after, .mj-wc .woocommerce a.checkout-button::after{content:"";position:absolute;inset:0 auto 0 0;width:0;background:var(--mj-btn-hover);transition:width .45s ease;z-index:-1;} .mj-wc .woocommerce #place_order:hover::after, .mj-wc .woocommerce button.button:hover::after, .mj-wc .woocommerce a.button:hover::after, .mj-wc .woocommerce input.button:hover::after, .mj-wc .woocommerce a.checkout-button:hover::after{width:100%;} .mj-wc .woocommerce #place_order:hover, .mj-wc .woocommerce button.button:hover, .mj-wc .woocommerce a.button:hover, .mj-wc .woocommerce input.button:hover, .mj-wc .woocommerce a.checkout-button:hover{background:var(--mj-black);color:var(--mj-btn-label);} /* input.button ne peut pas porter de ::after : on lui rend l'inversion. */ .mj-wc .woocommerce input.button:hover{background:var(--mj-btn-hover);} .mj-wc .woocommerce #place_order, .mj-wc .woocommerce a.checkout-button{width:100%;} /* ===== Panier ===== */ /* La boutique ne vend qu'un abonnement, en quantite figee a 1 : la colonne Quantite reste vide et le bouton « Mettre a jour le panier » est desactive en permanence. WooCommerce peint les boutons desactives en color:inherit, ce qui donnait un rectangle noir a texte noir, opacite 0,5 : la case grise sans libelle. On retire les deux plutot que de les habiller pour rien. */ .mj-wc .woocommerce table.cart th.product-quantity, .mj-wc .woocommerce table.cart td.product-quantity, .mj-wc .woocommerce table.cart tr.actions, .mj-wc .woocommerce table.cart td.actions{display:none;} /* Filet de securite si un bouton desactive reapparait ailleurs. */ .mj-wc .woocommerce button.button:disabled, .mj-wc .woocommerce button.button[disabled]{background:var(--mj-black);color:#fff;opacity:.3;cursor:not-allowed;} .mj-wc .woocommerce table.cart img{width:80px;height:auto;display:block;} .mj-wc .woocommerce table.cart td.product-thumbnail{width:104px;} .mj-wc .woocommerce table.cart td.product-name a{font-size:14px;letter-spacing:.02em;} .mj-wc .woocommerce table.cart dl.variation{margin:6px 0 0;font-size:12px;color:var(--mj-grey-d);} .mj-wc .woocommerce table.cart dl.variation dt, .mj-wc .woocommerce table.cart dl.variation dd{display:inline;margin:0;font-weight:400;} .mj-wc .woocommerce table.cart dl.variation dd p{display:inline;margin:0;} .mj-wc .woocommerce table.cart dl.variation dt{margin-right:5px;} /* Sans cela « SOUS-TOTAL » se coupait en deux dans l'en-tete. */ .mj-wc .woocommerce table.cart thead th, .mj-wc .woocommerce table.cart td.product-subtotal, .mj-wc .woocommerce table.cart td.product-subtotal{white-space:nowrap;} .mj-wc .woocommerce table.cart td.product-price{white-space:normal;min-width:190px;} .mj-wc .woocommerce table.cart td.product-name > a{white-space:nowrap;} .mj-wc .woocommerce a.remove{color:var(--mj-grey-d)!important;font-weight:300;font-size:20px;line-height:1;} .mj-wc .woocommerce a.remove:hover{color:var(--mj-black)!important;background:none!important;} /* Recapitulatif : meme habillage que le pave « Votre commande » du tunnel. */ .mj-wc .cart_totals h2{font-size:13px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;margin:0 0 16px;} .mj-wc .cart_totals table.shop_table{margin:0;} .mj-wc .cart_totals table.shop_table th{font-size:12px;letter-spacing:.06em;font-weight:500;text-transform:none;} .mj-wc .cart_totals .order-total th,.mj-wc .cart_totals .order-total td{font-size:15px;} /* ===== Recapitulatif du panier et de la commande ===== - « Étui » disparait devant le nom du cuir : le mot a ete abandonne. - « Sous-total » ne veut rien dire pour le client ; la ligne devient « Abonnement carte » au panier et « Abonnement mensuel » a la commande. - Le bloc « Renouvellement » de WP-Swings repetait la meme information. - L en-tete de colonne « Sous-total » devient « Montant » : le mot y avait un troisieme sens, celui du prix de la ligne. Ces libelles sont refaits en CSS et non en JavaScript, pour que le bon texte soit affiche des le premier rendu, sans clignotement. */ .mj-wc .woocommerce table.cart dl.variation dt, .mj-wc .woocommerce table.woocommerce-checkout-review-order-table dl.variation dt{display:none;} /* « Sous-total » designe ici le montant de la ligne, un troisieme sens du mot sur le meme ecran. On le nomme « Montant », comme a la commande. */ .mj-wc .woocommerce table.cart thead th.product-subtotal{font-size:0;letter-spacing:0;} .mj-wc .woocommerce table.cart thead th.product-subtotal::before{content:"Montant";font-size:11px;line-height:1.5;letter-spacing:.14em;text-transform:uppercase;color:var(--mj-grey-d);} .mj-wc .woocommerce .cart_totals tr.cart-subtotal th{font-size:0;letter-spacing:0;} .mj-wc .woocommerce .cart_totals tr.cart-subtotal th::before{content:"Adhésion";font-size:12px;line-height:1.5;letter-spacing:.06em;font-weight:500;} .mj-wc .woocommerce table.woocommerce-checkout-review-order-table tfoot tr.cart-subtotal th{font-size:0;letter-spacing:0;} .mj-wc .woocommerce table.woocommerce-checkout-review-order-table tfoot tr.cart-subtotal th::before{content:"Abonnement mensuel";font-size:12px;line-height:1.5;letter-spacing:.1em;text-transform:uppercase;font-weight:500;} .mj-wc .woocommerce table.woocommerce-checkout-review-order-table thead th.product-total{font-size:0;letter-spacing:0;} .mj-wc .woocommerce table.woocommerce-checkout-review-order-table thead th.product-total::before{content:"Montant";font-size:11px;line-height:1.5;letter-spacing:.14em;text-transform:uppercase;color:var(--mj-grey-d);} .mj-wc .woocommerce table.woocommerce-checkout-review-order-table tr.wps_recurring_bifurcation_wrapper{display:none;} /* Ligne « Porte-carte — Inclus », posee par le script de la page Panier. */ .mj-wc .woocommerce .cart_totals tr.mj-cart-cuir td{color:var(--mj-grey-d);} /* Le paiement express Stripe reste a la commande, la ou l adresse et les conditions de vente sont saisies. Sur le panier il court-circuitait les deux, et le bouton noir Google Pay doublait « Valider la commande ». */ body.woocommerce-cart .mj-wc #wc-stripe-express-checkout-element, body.woocommerce-cart .mj-wc .wc-stripe-express-checkout-element, body.woocommerce-cart .mj-wc #wc-stripe-payment-request-wrapper{display:none!important;} /* Sous 768px, WooCommerce masque les en-tetes de colonne et reconstruit les libelles a partir de l attribut data-title de WooCommerce, que la feuille de style ne peut pas modifier. On y refait les memes renommages. La ligne du porte-carte recoit son data-title depuis le script de la page. */ @media (max-width:768px){ .mj-wc .woocommerce .cart_totals tr.cart-subtotal td::before{content:"Adhésion"!important;} .mj-wc .woocommerce table.cart td.product-subtotal::before{content:"Montant"!important;} } .mj-wc .wc-proceed-to-checkout{margin:20px 0 0;padding:0;} .mj-wc .wc-proceed-to-checkout a.checkout-button{width:100%;} /* WooCommerce fait flotter le recapitulatif a droite, ce qui laissait toute la moitie gauche vide sous la ligne de produit. On passe en deux colonnes. */ @media (min-width:900px){ body.woocommerce-cart .mj-wc .woocommerce{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:48px;align-items:start;} /* WooCommerce insere aussi un conteneur de notifications, meme vide : sans cela il prenait la premiere case et decalait tout le reste. */ body.woocommerce-cart .mj-wc .woocommerce > .woocommerce-notices-wrapper, body.woocommerce-cart .mj-wc .woocommerce > .woocommerce-message, body.woocommerce-cart .mj-wc .woocommerce > .woocommerce-info, body.woocommerce-cart .mj-wc .woocommerce > .woocommerce-error{grid-column:1/-1;} body.woocommerce-cart .mj-wc .woocommerce .cart-collaterals{width:auto;float:none;} body.woocommerce-cart .mj-wc .woocommerce .cart_totals{float:none;width:auto;} body.woocommerce-cart .mj-wc .woocommerce table.cart{margin:0;} } /* ============================================================ PAGES DOCUMENTAIRES ET ESPACE CLIENT ------------------------------------------------------------ Ces regles vivaient en six blocs