/* Le « .home » n'est pas decoratif : l'ancienne regle etait ecrite
   « .mj-home .mj-header », et .mj-home n'existe que sur l'accueil. La Maison
   et le Guide ont eux aussi un visuel sombre en tete, mais leur header a
   toujours ete blanc. Sans ce .home on leur donnerait un header transparent
   qu'ils n'ont jamais eu — un changement de design, pas une centralisation.
   A rediscuter a la refonte : le transparent leur irait sans doute mieux. */
/* --- Fond blanc lu par Safari, jamais peint ---------------------------
   Safari 26 ne lit plus theme-color. Il teinte ses barres du haut et du bas
   a partir du background-color d'un element position:fixed proche du bord,
   et se rabat sur celui du <body> quand il n'en trouve aucun.

   Mesure sur l'appareil du client, en faisant varier une seule chose a la
   fois : blanc tant que le header n'est pas fixe, gris des qu'il devient
   fixe sans fond opaque, blanc de nouveau des qu'il en recoit un. Safari
   re-echantillonne donc en continu — aucune ruse de calendrier ne tient.

   Un header fixe DOIT donc porter un background-color opaque. Or on le veut
   transparent sur la photo. La sortie tient a ceci : Safari lit la PROPRIETE,
   pas les pixels. background-clip:text limite la peinture du fond aux glyphes
   du texte propre de l'element ; le header n'ayant que des enfants et aucun
   texte direct, le blanc n'est dessine nulle part. La propriete vaut bien
   rgb(255,255,255), les barres sont blanches, le menu reste transparent.

   Verifie a la mesure : ecart maximal de 22/255 sur la bande du header face
   au temoin sans la regle — soit rien de visible.

   Ne pas remplacer par la syntaxe raccourcie « background: ». Elle remettrait
   background-color a transparent et ramenerait le gris.

   Le degrade de lisibilite vit sur le ::before ci-dessous : background-clip
   ne concerne que le fond propre de l'element, le pseudo-element n'est pas
   affecte. */

/* Le « html » en tete n'est pas decoratif. Le CSS additionnel du Customizer
   contient une regle plus ancienne, ecrite « html body.home.mj-darktop-page
   .mj-header:not(.mj-header--solid) { background-color:transparent;
   background-clip:border-box } », qui defait exactement ce bloc. Sa
   specificite (0,3,3) battait la notre (0,3,2) quel que soit l'ordre des
   feuilles : le fond de l'en-tete etait calcule transparent, Safari ne
   trouvait aucun blanc a echantillonner et grisait ses deux barres.
   On egalise la specificite ; mj-coquille etant charge apres le Customizer,
   c'est desormais cette regle-ci qui l'emporte.
   La vieille regle du Customizer reste a supprimer — elle ne sert plus. */
html body.home.mj-darktop-page .mj-header:not(.mj-header--solid){
  background-color:#ffffff;
  background-image:none;
  -webkit-background-clip:text;
  background-clip:text;
  color:var(--mj-white);
  box-shadow:none;
  text-shadow:0 1px 12px rgba(0,0,0,.45);
}
html body.home.mj-darktop-page .mj-header:not(.mj-header--solid)::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg,rgba(0,0,0,.46),rgba(0,0,0,.18) 62%,rgba(0,0,0,0));
  pointer-events:none;
}
html body.home.mj-darktop-page .mj-header:not(.mj-header--solid) :focus-visible{outline-color:#fff;}

/* ============================================================
   ESPACE CLIENT — bandeau d'onglets sur toute la largeur
   ------------------------------------------------------------
   WooCommerce place la navigation du compte dans une colonne
   flottante de 30 %. Combinee au bandeau horizontal defini plus
   bas, cette colonne n'en montrait que le tiers : cinq onglets
   sur huit restaient caches derriere un defilement sans barre
   visible, dont « Coordonnees » et « Deconnexion ».
   Le bandeau et le contenu prennent desormais toute la largeur.
   ============================================================ */
.mj-wc .woocommerce-MyAccount-navigation,
.mj-wc .woocommerce-MyAccount-content{float:none;width:100%;}

/* La barre de defilement est masquee a dessein : sans repere, rien
   n'indique qu'il reste des onglets. Un degrade sur le bord droit
   le signale la ou le bandeau deborde encore. */
.mj-wc .woocommerce-MyAccount-navigation{position:relative;}
.mj-wc .woocommerce-MyAccount-navigation::after{
  content:"";position:absolute;top:0;right:0;bottom:2px;width:38px;
  background:linear-gradient(90deg,rgba(255,255,255,0),var(--mj-white) 70%);
  pointer-events:none;opacity:0;
}
@media (max-width:900px){
  .mj-wc .woocommerce-MyAccount-navigation::after{opacity:1;}
}


/* ============================================================
   SURVOL — sans effet sur les ecrans tactiles
   ------------------------------------------------------------
   « opacity:.62 » au survol suppose un curseur qui s'en va.
   Au doigt, l'etat s'applique a l'appui et ne se leve jamais :
   le porte-carte qu'on vient de choisir reste gris, comme s'il
   avait ete desactive. On annule l'effet la ou il n'a pas de
   sens ; a la souris et au clavier il reste utile.

   Prefixe « html » : la regle d'origine est dans le CSS
   additionnel du Customizer, et une specificite superieure evite
   de dependre de l'ordre de chargement des feuilles.
   ============================================================ */
@media (hover: none), (pointer: coarse) {
  html .mj-etui__opt:hover,
  html .mj-acc__head:hover,
  html .mj-drawer__close:hover,
  html .mj-drawer__bag:hover,
  html .mj-cart__close:hover,
  html .mj-loupe__close:hover,
  html .mj-logo:hover,
  html .mj-etui__zoom:hover,
  html .mj-wc .show-password-input:hover { opacity: 1; }
}


/* ============================================================
   PROVENANCE — les deux colonnes au meme gris
   ------------------------------------------------------------
   « Italie » et « France » etaient en noir face a des libelles
   gris. Ce contraste leur donnait un poids d'information
   principale, alors que ce sont des precisions de fabrication.
   Meme gris des deux cotes : la ligne se lit d'un bloc.

   Prefixe « html » : la regle d'origine vient du CSS additionnel
   du Customizer, on ne depend pas de l'ordre des feuilles.
   ============================================================ */
html .mj-prov__v { color: var(--mj-grey-d); }


/* ============================================================
   CESURES — aucun mot coupe par un trait d'union
   ------------------------------------------------------------
   Les pages editoriales etaient justifiees, avec des traits
   d'union conditionnels semes dans le texte pour combler les
   trous. Sur une colonne etroite, la justification etire les
   espaces et creuse des rivieres de blanc ; les coupures, elles,
   arretent la lecture au milieu d'un mot.

   Le contenu est nettoye — pages et tables de TranslatePress.
   Cette regle empeche le navigateur d'en introduire de nouvelles.
   « !important » assume : le Customizer pose « hyphens: manual »
   avec deux classes, et la cesure n'a aucun usage legitime
   ailleurs sur le site. La garantie doit tenir quoi qu'on
   ajoute ensuite.
   ============================================================ */
html body,
html body * {
  -webkit-hyphens: none !important;
  hyphens: none !important;
}

/* Sans cesures, la justification n'a plus rien pour rattraper
   ses trous : on aligne au fil de la lecture. */
html .mj-page--maison .mj-story p,
html .mj-page--maison .mj-story__inner p,
html .mj-story p,
html .mj-guide .mj-etape .mj-etape__desc {
  text-align: left;
}


/* ============================================================
   GUIDE — les fonctionnalites en liste a puces
   ------------------------------------------------------------
   Les points etaient poses en lignes separees par des filets :
   la forme du tableau de provenance, alors qu'il s'agit d'une
   enumeration. On reprend la liste de la fiche produit — puce,
   retrait, interligne serre — pour que les deux pages disent la
   meme chose de la meme facon.

   Le retrait est en « em » : les libelles passent de 11 a 10,5 px
   selon la largeur, la puce garde sa place relative au texte.
   ============================================================ */
html .mj-guide .mj-etape .mj-etape__pts {
  list-style: disc outside;
  margin: 0;
  padding: 0 0 0 1.3em;
  border-top: 0;
}
html .mj-guide .mj-etape .mj-etape__pts li {
  list-style: disc outside;
  border-bottom: 0;
  padding: 0;
  margin: 0 0 .6em;
}
html .mj-guide .mj-etape .mj-etape__pts li:last-child {
  margin-bottom: 0;
}
html .mj-guide .mj-etape .mj-etape__pts li::marker {
  font-size: .85em;
}


/* ============================================================
   LIBELLES DU COMPTE — rendus au document
   ------------------------------------------------------------
   Le CSS additionnel effacait le texte de ces liens
   (« font-size:0 ») pour le reecrire dans un « content: ».
   Un texte pose ainsi n'existe pas dans le document : ni
   TranslatePress, ni un lecteur d'ecran, ni la recherche du
   navigateur ne le voient. Le pied de page et le menu du
   telephone restaient donc en francais sur le site anglais.

   Les libelles sont revenus dans le lien ; il reste a annuler
   ce qui les masquait. Le prefixe « html » egale la specificite
   du Customizer sans dependre de l'ordre des feuilles.

   La regle sur « edit-account » n'est pas reprise : ce lien
   n'existe plus, le pied de page pointe vers /mon-compte/.
   ============================================================ */
html .mj-drawer__sec a[href*="orders"] {
  font-size: 11px;
  letter-spacing: .14em;
}
html .mj-footer .mj-foot-grp a[href*="orders"] {
  font-size: 11px;
  letter-spacing: .1em;
}
html .mj-drawer__sec a[href*="orders"]::before,
html .mj-footer .mj-foot-grp a[href*="orders"]::before {
  content: none;
}


/* ============================================================
   PANIER ET TUNNEL — les libelles poses en CSS, en anglais
   ------------------------------------------------------------
   Trois en-tetes de WooCommerce sont remplaces par du texte
   ecrit dans un « content: » du CSS additionnel. Ce texte
   n'existe pas dans le document : TranslatePress ne peut pas le
   traduire, et le site anglais affichait donc « Montant »,
   « Abonnement carte » et « Abonnement mensuel ».

   On ne peut pas les rendre au document comme on l'a fait pour
   le pied de page : les trois viennent de la meme chaine
   « Subtotal », que le panier emploie deux fois sur la meme
   page — en tete de colonne et dans les totaux. Un filtre
   gettext ne sait pas les distinguer, le CSS si.

   On ajoute donc la version anglaise. L'attribut de langue
   donne la specificite necessaire ; TranslatePress pose
   « lang="en-US" » sur les pages anglaises.
   ============================================================ */
html[lang^="en"] .mj-wc .woocommerce table.cart thead th.product-subtotal::before,
html[lang^="en"] .mj-wc .woocommerce table.cart td.product-subtotal::before {
  content: "Amount" !important;
}
html[lang^="en"] .mj-wc .woocommerce .cart_totals tr.cart-subtotal th::before,
html[lang^="en"] .mj-wc .woocommerce .cart_totals tr.cart-subtotal td::before {
  content: "Membership" !important;
}
html[lang^="en"] .mj-wc .woocommerce table.woocommerce-checkout-review-order-table tfoot tr.cart-subtotal th::before {
  content: "Monthly subscription" !important;
}


/* ============================================================
   PAIEMENT EXPRESS — Apple Pay et Google Pay, en tete du tunnel
   ------------------------------------------------------------
   Leur interet est d'eviter le formulaire : le portefeuille
   fournit l'e-mail, le nom et les deux adresses. Ils sont donc
   avant lui, jamais apres — sous le formulaire, le client
   remplissait des champs pour rien et voyait ses saisies
   remplacees sans comprendre.

   Stripe pose « display:none » en style en ligne et ne le leve
   que si le navigateur sait reellement payer ainsi. On cible
   cet etat revele plutot que de forcer l'affichage : sinon le
   separateur se montrerait au-dessus de rien.

   ATTENTION — on ne lit PAS l'attribut style pour cela. Le
   greffon revele le bloc avec « jQuery.show() », qui RETIRE le
   « display:none » au lieu d'ecrire « display:block » : un test
   sur [style*="block"] n'est donc jamais vrai. Il l'a ete ici,
   et la place reservee poussait le bouton 48 px trop bas
   jusqu'au repli de secours, huit secondes plus tard.

   ET ON NE REGARDE PAS NON PLUS S'IL CONTIENT UN NOEUD. Le
   greffon cree les noeuds AVANT de savoir si les portefeuilles
   sont utilisables, puis retire ceux qui ne le sont pas. Sur un
   Mac sans carte enregistree, le noeud paraissait, la note se
   lisait, le noeud disparaissait, la note s'effacait — le defaut
   decrit par le client.

   Le bon signal est ailleurs : le greffon n'appelle « E.show() »
   que dans son evenement « ready », une fois la disponibilite
   CONFIRMEE. Et « jQuery.show() » RETIRE le « display:none » en
   ligne au lieu d'ecrire « display:block ». On teste donc
   l'ABSENCE de « display:none » — les deux graphies, avec et sans
   espace, selon qui a pose le style :

       #...element:not([style*="display:none"]):not([style*="display: none"])

   Verifie sur le chronometre de l'iPhone : l'attribut passe de
   « margin-top: 1em;clear:both;display:none; » a
   « margin-top: 1em; clear: both; » a l'instant exact ou le
   bouton parait.

   Deuxieme piege, tombe dedans aussi : CSS INTERDIT « :has() »
   A L'INTERIEUR DE « :has() ». Quand le conteneur est deja dans
   un :has(), on decrit l'enfant directement —

       :has(#...-element > div[id^="#...-element-"])

   et non « :has(#...-element:has(> div[...])) », que le
   navigateur jette en silence.

   Le texte « — OU — » reste un noeud de texte, pour que
   TranslatePress puisse le traduire.
   ============================================================ */
html .mj-wc .woocommerce-checkout #wc-stripe-express-checkout-element {
  margin: 0 !important;
  padding: 0;
}

/* Le separateur « — OU — » est retire : avec un seul portefeuille et
   le formulaire juste dessous, il nommait une alternative que personne
   ne cherchait. La note « Payer en un geste » suffit a dire ce qu'est
   le bouton. */
html .mj-wc .woocommerce-checkout #wc-stripe-express-checkout-button-separator {
  display: none !important;
}

html .mj-wc .woocommerce-checkout #wc-stripe-express-checkout-element iframe {
  border-radius: 0;
}


/* ------------------------------------------------------------
   GOOGLE PAY — retire
   ------------------------------------------------------------
   Le greffon ecrit ses portefeuilles en dur dans son script
   (« applePay:'always', googlePay:'always' ») et n'expose aucun
   reglage pour les choisir. Mais il donne a chacun son propre
   noeud, nomme d'apres lui :

       #wc-stripe-express-checkout-element-googlePay
       #wc-stripe-express-checkout-element-applePay

   On masque le sien. Le compte de ce qui reste est tenu par le
   script du snippet « Annonce du paiement en un geste », qui
   pose « mj-sans-express » sur le corps du document quand il ne
   reste plus rien a montrer.
   ------------------------------------------------------------ */
html .mj-wc #wc-stripe-express-checkout-element > div[id$="-googlePay"] {
  display: none !important;
}

/* Plus aucun portefeuille : le bloc entier s'efface, la note et le
   separateur avec lui. Sans quoi « Payer en un geste » et « — OU — »
   resteraient au-dessus de rien. */
html body.mj-sans-express .mj-wc #wc-stripe-express-checkout-element,
html body.mj-sans-express .mj-wc #wc-stripe-express-checkout-button-separator,
html body.mj-sans-express .mj-wc .mj-express-note,
html body.mj-sans-express .mj-wc .mj-express-skel {
  display: none !important;
}

/* ------------------------------------------------------------
   La note qui annonce ce que fait le paiement en un geste.
   Masquee par defaut : elle n'a de sens que si les boutons sont
   la, et c'est le navigateur qui en decide.
   ------------------------------------------------------------ */
html .mj-wc .woocommerce-checkout .mj-express-note {
  display: none;
  margin: 0 0 14px;
}

/* ------------------------------------------------------------
   L'ATTENTE — invisible, et seulement quand elle a lieu d'etre
   ------------------------------------------------------------
   Premiere version : un rectangle gris scintillant, affiche
   toujours et replie au bout de 2,5 s. Il attirait l'oeil sur
   l'attente, et son effacement se lisait comme un incident.

   Le defaut etait en amont : il s'affichait toujours parce que
   je ne savais pas si un bouton allait venir. Or l'appareil le
   sait, et tout de suite :

       window.ApplePaySession && ApplePaySession.canMakePayments()

   Synchrone, local, sans reseau ni Stripe.

   Quand la reponse est oui, « <html> » porte
   « mj-attend-applepay », posee depuis l'en-tete donc AVANT le
   premier affichage : la place est reservee des la premiere
   image, jamais ajoutee apres coup. Quand elle est non, rien
   n'est reserve et rien ne s'affiche.

   La place reservee est transparente. Il n'y a rien a montrer
   pendant une attente — seulement une place a ne pas reprendre.
   ------------------------------------------------------------ */

html.mj-attend-applepay .mj-wc .woocommerce-checkout .mj-express-note,
html.mj-attend-applepay .mj-wc .woocommerce-checkout .mj-express-skel {
  display: block;
}

/* MAIS LA NOTE NE SE LIT PAS ENCORE.
   ------------------------------------------------------------
   « canMakePayments() » repond « cet appareil sait faire Apple
   Pay », PAS « ce client a une carte enregistree ». Sur un Mac
   sous Safari elle dit oui a tout le monde. La note paraissait
   donc, puis disparaissait une seconde plus tard quand Stripe
   concluait qu'il n'y avait pas de portefeuille utilisable.

   Une phrase qui parait puis s'efface est pire que pas de
   phrase du tout : elle donne a croire qu'on a rate quelque
   chose.

   « visibility » plutot que « display » : la place est prise —
   donc rien ne sautera quand le texte paraitra — mais le texte
   ne se lit pas tant que le bouton n'est pas la. */
html.mj-attend-applepay .mj-wc .woocommerce-checkout .mj-express-note {
  visibility: hidden;
  /* Meme filet que la place du bouton : si rien ne vient, la
     place se rend au lieu de rester prise indefiniment. */
  animation: mj-express-repli .2s ease-in 8s forwards;
}

/* 48 px : la hauteur reglee du bouton, relevee dans
   « wc_stripe_express_checkout_params ». Transparente. */
html.mj-attend-applepay .mj-wc .woocommerce-checkout .mj-express-skel {
  height: 48px;
  margin: 0 0 26px;
  background: none;
  /* Filet : si Stripe echouait malgre un appareil capable, la place
     se rend. Invisible, donc personne ne voit rien bouger d'autre
     que le contenu qui remonte. */
  animation: mj-express-repli .2s ease-in 8s forwards;
}

@supports selector(:has(*)) {

  /* Le bouton est la : la place reservee s'efface au meme instant
     qu'il l'occupe. Rien ne bouge. */
  html .mj-wc .woocommerce-checkout:has(#wc-stripe-express-checkout-element:not([style*="display:none"]):not([style*="display: none"])) .mj-express-skel {
    display: none;
  }

  /* Le bouton est la : la note se lit enfin, a la place qu'elle
     occupait deja. Rien ne bouge, rien n'apparait de nulle part. */
  html .mj-wc .woocommerce-checkout:has(#wc-stripe-express-checkout-element:not([style*="display:none"]):not([style*="display: none"])) .mj-express-note {
    display: block;
    visibility: visible;
    animation: mj-express-parait .3s ease-out both;
  }
}

html .mj-wc .woocommerce-checkout #wc-stripe-express-checkout-element:not([style*="display:none"]):not([style*="display: none"]) {
  animation: mj-express-parait .3s ease-out both;
}

@keyframes mj-express-parait {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: none; }
}

/* Rendre la place : hauteur et marges ensemble, sans quoi elle
   resterait prise. */
@keyframes mj-express-repli {
  to { height: 0; margin: 0; visibility: hidden; }
}

/* Le fondu est du decor ; le repli est fonctionnel. On ne retire
   que le decor. */
@media (prefers-reduced-motion: reduce) {
  html .mj-wc .woocommerce-checkout #wc-stripe-express-checkout-element:not([style*="display:none"]):not([style*="display: none"]),
  html .mj-wc .woocommerce-checkout:has(#wc-stripe-express-checkout-element:not([style*="display:none"]):not([style*="display: none"])) .mj-express-note {
    animation: none;
  }
}

html .mj-wc .woocommerce-checkout .mj-express-note__t {
  margin: 0 0 4px;
  font-family: var(--mj-font-title);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mj-black);
}

html .mj-wc .woocommerce-checkout .mj-express-note__p {
  margin: 0;
  font-family: var(--mj-font);
  font-size: 12px;
  line-height: 1.65;
  letter-spacing: .01em;
  color: var(--mj-grey-d);
}


/* ============================================================
   PIED DE PAGE — hauteur normale dans le tunnel
   ------------------------------------------------------------
   Le pied occupe une fenetre entiere, contenu centre : c'est le
   dernier cran du defilement par ecrans des pages editoriales.

   Le tunnel n'a pas ce defilement — la regle qui l'arme ne vise
   que « .mj-stack », « .mj-page--maison » et « .mj-guide ». La
   pleine hauteur n'y laisse donc qu'un grand blanc sous le
   bouton de paiement, qui occupe un tiers de l'ecran sur
   telephone et donne a croire que la page est finie.

   « body.woocommerce-page » designe exactement les pages
   transactionnelles : panier, commande, espace client,
   confirmation. Aucune page editoriale ne la porte.
   ============================================================ */
html body.woocommerce-page .mj-footer {
  min-height: 0;
  padding: 56px 24px 48px;
}


/* ============================================================
   CODE PROMO — rouvert et mis a la charte
   ------------------------------------------------------------
   Le CSS additionnel le masquait : il n'y avait rien a saisir.
   Avec l'offre « abonnement offert », il faut le montrer.

   WooCommerce le presente en bandeau d'information — pastille
   et fond gris, le style d'une alerte. Sur un tunnel sobre,
   c'est une fausse note et ca inquiete plus que ca n'invite.
   On le ramene a une ligne, et le formulaire reprend les champs
   du reste du tunnel.

   On ne touche pas au « display » du formulaire : WooCommerce
   l'ouvre et le ferme en JavaScript.
   ============================================================ */
/* Sans « .woocommerce-checkout » : WooCommerce pose ce bloc AVANT le
   formulaire, pas dedans. Le selecteur precedent ne trouvait donc rien,
   et le champ restait masque. Le prefixe « html » suffit a passer devant
   la regle du Customizer, a !important egal. */
html .mj-wc .woocommerce-form-coupon-toggle {
  display: block !important;
  margin: 0 0 20px;
}

html .mj-wc .woocommerce-form-coupon-toggle .woocommerce-info {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--mj-font);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: .01em;
  color: var(--mj-grey-d);
}

html .mj-wc .woocommerce-form-coupon-toggle .showcoupon {
  color: var(--mj-black);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

html .mj-wc form.checkout_coupon {
  margin: 0 0 26px;
  padding: 20px;
  border: 1px solid var(--mj-line);
  border-radius: 0;
  background: #fafafa;
}

html .mj-wc form.checkout_coupon p {
  margin: 0 0 12px;
  font-family: var(--mj-font);
  font-size: 12px;
  line-height: 1.6;
  color: var(--mj-grey-d);
}

html .mj-wc form.checkout_coupon .form-row {
  margin: 0;
  padding: 0;
  width: 100%;
  float: none;
}

html .mj-wc form.checkout_coupon input#coupon_code {
  width: 100%;
  height: 50px;
  margin: 0 0 10px;
  padding: 0 14px;
  border: 1px solid var(--mj-line);
  border-radius: 0;
  background: var(--mj-white);
  font-family: var(--mj-font);
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--mj-black);
}

html .mj-wc form.checkout_coupon input#coupon_code:focus {
  outline: none;
  border-color: var(--mj-black);
}

html .mj-wc form.checkout_coupon button[name="apply_coupon"] {
  width: 100%;
  min-height: 46px;
  border: 0;
  border-radius: 0;
  background: var(--mj-black);
  color: var(--mj-white);
  font-family: var(--mj-font-title);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
}

/* La remise accordee, dans le recapitulatif. */
html .mj-wc .woocommerce-checkout-review-order-table tr.cart-discount th,
html .mj-wc .woocommerce-checkout-review-order-table tr.cart-discount td {
  color: var(--mj-black);
}


/* ============================================================
   OFFRE — la valeur annuelle, barree
   ------------------------------------------------------------
   La ligne de remise annonce « -30,00 € » : le seul mois
   reellement deduit a la commande. C'est juste, mais ca
   sous-estime le cadeau d'un facteur douze. On garde le montant
   intact — il doit tomber juste sur la facture — et on annonce
   la valeur a cote.

   Le barre vient de « line-through » : il suit la taille du
   texte, et un lecteur d'ecran annonce bien un prix barre.
   ============================================================ */
html .mj-wc .woocommerce-checkout-review-order-table tr.mj-offre td {
  padding: 10px 0 2px;
  border: 0;
  text-align: right;
}

html .mj-wc tr.mj-offre .mj-offre__t {
  font-family: var(--mj-font-title);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mj-grey-d);
  margin-right: 10px;
}

html .mj-wc tr.mj-offre .mj-offre__prix {
  font-family: var(--mj-font);
  font-size: 13px;
  color: var(--mj-grey);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  margin-right: 8px;
}

html .mj-wc tr.mj-offre .mj-offre__prix .woocommerce-Price-amount {
  text-decoration: inherit;
}

html .mj-wc tr.mj-offre .mj-offre__don {
  font-family: var(--mj-font-title);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mj-black);
}


/* ============================================================
   GUIDE SUR TELEPHONE — une etape, un ecran
   ------------------------------------------------------------
   La hauteur etait calculee sur « max(100vh, 100lvh, 100svh) »,
   soit la PLUS GRANDE des trois mesures. Or « lvh » suppose la
   barre d'outils du navigateur masquee : tant qu'elle est
   visible, l'etape depasse l'ecran et la suivante pointe en bas.

   Pour une section qui doit tenir dans l'ecran, c'est « svh »
   qu'il faut — la plus petite, celle qui vaut barres comprises.
   « vh » reste en repli pour les navigateurs sans « svh ».

   Les textes passent a gauche : sur une colonne etroite, un
   titre centre de deux lignes donne un bord en dents de scie et
   les puces ne s'alignent sur rien. L'illustration reste
   centree — c'est un objet, pas du texte.
   ============================================================ */
@media (max-width: 899px) {

  html .mj-guide .mj-etape {
    height: calc(100vh - var(--mj-header-h) - var(--mj-adminbar) + var(--mj-deborde));
    height: calc(max(100vh, 100lvh, 100svh) - var(--mj-header-h) - var(--mj-adminbar) + var(--mj-deborde));
    justify-items: stretch;
    text-align: left;
    padding: 26px 24px 30px;
  }

  html .mj-guide .mj-intro {
    min-height: calc(100vh - var(--mj-header-h) - var(--mj-adminbar));
    min-height: calc(100svh - var(--mj-header-h) - var(--mj-adminbar));
  }

  /* L'ecran du telephone garde sa place au centre. */
  html .mj-guide .mj-etape .mj-etape__ecran {
    justify-self: center;
    align-self: center;
    width: 100%;
    height: 100%;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* DEUX CAPTURES COTE A COTE SUR LE PANNEAU DES STATISTIQUES.

     Les cadres sont normalises : chacun a le meme rapport et le
     telephone y occupe la meme part. Affiches a hauteur egale, les
     telephones font donc exactement la meme taille d'un panneau a
     l'autre — mesure : 385 px pour tous, a 1 px pres. C'est ce qui
     manquait avant, ou la Club map paraissait plus grosse que les
     autres parce que son cadrage etait plus large.

     Ici les deux se partagent la largeur. Ils restent donc plus
     petits que les captures seules des autres panneaux : c'est le
     prix de les montrer ensemble, et le zoom au clic le rattrape. */
  html .mj-guide .mj-etape .mj-etape__ecran.mj-etape__ecran--duo {
    gap: 12px;
  }

  /* CLUB MAP : PLUS D'AIR ENTRE LA CAPTURE ET LE TITRE.

     La capture est centree dans la place que laisse le texte. Celui
     de la Club map etant le plus long, l'ecart image -> titre y etait
     le plus court : 86 px a 390x844, contre 98 a 129 ailleurs.

     Deux cales flexibles 1:3 posent la capture au quart de la place
     libre au lieu de la moitie : elle remonte, l'ecart grandit, sans
     toucher a aucune taille. Les cales tombent a zero quand la place
     manque — jamais de chevauchement sur les petits ecrans. */
  html .mj-guide #club-map.mj-etape .mj-etape__ecran {
    flex-direction: column;
    justify-content: flex-start;
  }
  html .mj-guide #club-map.mj-etape .mj-etape__ecran::before,
  html .mj-guide #club-map.mj-etape .mj-etape__ecran::after {
    content: "";
    flex: 1 1 0;
    min-height: 0;
  }
  html .mj-guide #club-map.mj-etape .mj-etape__ecran::after {
    flex-grow: 3;
  }
  html .mj-guide #club-map.mj-etape .mj-etape__ecran img {
    flex: none;
  }



  /* L'IMAGE PREND LA PLACE QUI RESTE, ET RIEN DE PLUS.

     Elle etait plafonnee a 250 px de haut. Mesure sur un telephone
     de 390 px : l'image rendait 125x250 — un ecran d'application
     large de 125 px, dont le texte est illisible — alors qu'il
     restait 358 a 507 px INUTILISES dans le panneau. Le plafond
     repondait a un vrai probleme (les etapes bavardes debordaient),
     mais il coutait les trois quarts de l'illustration.

     « height: 100% » dans une rangee « 1fr » d'une grille de
     hauteur fixe ne peut PAS deborder : la rangee vaut ce qui reste
     une fois le texte pose, et l'image s'y inscrit. Le defaut
     d'origine venait de l'inverse — une image a hauteur intrinseque
     qui POUSSAIT la rangee.

     L'image varie donc un peu d'une etape a l'autre, selon la
     longueur du texte (470 a 555 px). On ne les voit jamais cote a
     cote : le defilement par panneaux en montre une a la fois.

     La largeur suit, et reste sous la largeur native du fichier :
     aucun agrandissement, donc aucun flou. */
  /* UNE SEULE HAUTEUR POUR TOUTES LES CAPTURES.

     « height: 100% » les faisait remplir la rangee laissee par le
     texte : chaque panneau ayant un texte different, chaque capture
     avait une taille differente — mesure : 255, 286 et 242 px de
     large pour trois panneaux voisins.

     Une hauteur commune les aligne. Les cadres etant normalises,
     meme hauteur veut dire meme telephone, exactement.

     LE PLAFOND DE 300 PX N'EST PAS ARBITRAIRE. Le panneau des
     statistiques porte DEUX captures cote a cote. A la hauteur h,
     chacune fait 0,544 h de large ; il faut donc 1,088 h plus la
     gouttiere sous la largeur disponible. A 390 px de fenetre il
     reste 342 px : 300 passe (338), 310 ne passerait plus.

     Le plancher de 220 px protege les petits ecrans, ou 36 svh
     tomberait trop bas. */
  html .mj-guide .mj-etape .mj-etape__ecran img {
    height: clamp(220px, 36svh, 300px);
    width: auto;
    max-width: 100%;
    object-fit: contain;
  }

  /* Le titre gagne un peu de corps : a 17 px il ne se
     distinguait plus du texte courant. */
  html .mj-guide .mj-etape .mj-etape__texte h2 {
    font-size: 19px;
    line-height: 1.28;
    text-align: left;
  }

  html .mj-guide .mj-etape .mj-etape__rang,
  html .mj-guide .mj-etape .mj-etape__pts {
    text-align: left;
  }
}


/* ============================================================
   FICHE PRODUIT — les petits libelles, une seule voix
   ------------------------------------------------------------
   « Toutes les fonctionnalites » portait un interlettrage de
   .01em quand « Livraison estimee », la provenance et le choix
   du cuir sont a .12 ou .14em. A 12 px en capitales, l'ecart ne
   se lit pas comme une nuance mais comme une autre police.

   On aligne ces deux libelles sur le reste : 11 px, .14em,
   12 px sur telephone comme le voulait deja la livraison.

   La variante FAQ de l'accordeon n'est pas touchee, et sans
   avoir a l'exclure : « .mj-acc--faq .mj-acc__head » compte deux
   classes, « html .mj-acc__head » une seule. Elle l'emporte donc
   d'elle-meme — 15 px en bas de casse, un autre role, voulu.
   ============================================================ */
html .mj-acc__head,
html .mj-pdp__delivery {
  font-size: 11px;
  letter-spacing: .14em;
}

@media (max-width: 767px) {
  html .mj-acc__head,
  html .mj-pdp__delivery {
    font-size: 12px;
  }
}


/* ============================================================
   RECAPITULATIF — la ligne produit a la voix des autres
   ------------------------------------------------------------
   La photo de la carte quitte le tunnel : le client l'a vue sur
   la fiche, et il la voit maintenant dans le tiroir, a la place
   du pictogramme de carte bancaire. Au moment de payer, c'est
   le montant qui doit porter.

   Restait le nom du produit en 13,5 px bas de casse, juste au
   dessus de « FRAIS DE MISE EN SERVICE » en 12 px capitales
   espacees : deux typographies pour deux lignes du meme
   tableau.

   On aligne la cellule sur la ligne des frais, relevee dans le
   CSS du Customizer :

       table.shop_table tfoot th
         font-size: 12px; letter-spacing: .1em; uppercase

   Le gras y vient du navigateur — un « th » est gras par
   defaut et aucune regle ne le reprend. « td.product-name »
   etant un « td », il faut le poser a la main.
   ============================================================ */
html .mj-wc .woocommerce-checkout-review-order-table td.product-name {
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--mj-black);
}


/* Le tiroir : la vignette de la carte porte desormais la photo du
   produit et non plus un pictogramme de carte bancaire (balisage dans
   la page « Carte d'affaires »). Aucune regle a ajouter ici — le CSS du
   Customizer habille deja « .mj-cart__thumb img » en cover. */


/* ============================================================
   ACCUEIL — le titre du heros
   ------------------------------------------------------------
   « CARTE D'AFFAIRES » en capitales gravees, un filet de chaque
   cote, et la ligne de sous-titre dessous.

   Les filets sont des elements vides, pas des tirets ecrits :
   un tiret serait lu a voix haute par un lecteur d'ecran, et sa
   longueur dependrait de la police. Un trait dessine se plie a
   la largeur de l'ecran et reste muet.

   Le bloc est pose a 52 % de la hauteur plutot qu'au centre
   exact : le regard place un titre un peu au-dessus du milieu
   optique, et « Decouvrir » occupe le bas.

   Les tailles sont en « clamp » avec la largeur de l'ecran pour
   variable : le titre doit tenir sur une ligne d'un telephone
   etroit a un grand ecran, sans point de rupture a regler.
   ============================================================ */
/* LE BLOC EST CENTRE ENTRE L'EN-TETE ET LE BOUTON, PAS DANS LE HEROS.

   Avant, il etait pose a 52 % de la hauteur totale. Mais le haut du
   heros est occupe par l'en-tete et le bas par « Decouvrir » : le
   milieu de l'image n'est pas le milieu de l'espace disponible. Mesure
   faite : le bloc tombait 27 a 41 px trop bas selon l'ecran.

   On aurait pu corriger avec un « top: calc(50% - 22px) ». Ce serait
   faux des demain : le bouton a trois positions selon la largeur
   (44, 20 puis 24 px) et deux hauteurs selon le pointeur (sa marge
   passe de 10 a 13 px sur un ecran tactile). Six combinaisons a tenir
   a la main, et un ecart silencieux a chaque retouche du bouton.

   On laisse donc la mise en page faire le calcul. Le heros devient une
   colonne : le bloc du titre prend tout l'espace restant et centre son
   contenu dedans, le bouton garde sa taille propre. Le centre suit
   alors le bouton ou qu'il soit, sans que rien ne soit ecrit en dur.

   Le « padding-top » reserve la hauteur de l'en-tete, qui flotte
   au-dessus sans occuper de place. Comme il est INTERIEUR au bloc, le
   centrage se fait sous lui : c'est bien entre l'en-tete et le bouton,
   et non entre le haut de l'image et le bouton.

   Effet secondaire bienvenu sur iPhone : la barre d'adresse retrecit
   la zone visible et le bouton remonte deja pour en tenir compte
   (sa marge basse tient compte de la zone sure). Le titre, lui, suivait la
   hauteur de mise en page. Maintenant qu'il se centre PAR RAPPORT AU
   BOUTON, il remonte avec lui. */
html .mj-home .mj-hero {
  display: flex;
  flex-direction: column;
}

html .mj-home .mj-hero__titre {
  position: static;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 3;
  padding: var(--mj-header-h) 22px 0;
  text-align: center;
  color: var(--mj-white);
}

/* Le bouton quitte le positionnement absolu pour redevenir le dernier
   element de la colonne. Ses ecarts au bas de l'ecran sont repris a
   l'identique, en marge plutot qu'en « bottom » — memes valeurs, meme
   correction de la barre d'adresse. */
html .mj-home .mj-hero__cta {
  position: static;
  flex: 0 0 auto;
  /* Meme mecanisme que les reperes de La Maison : la boite fait la
     grande hauteur, le bouton remonte de la hauteur de la barre. */
  margin-bottom: 44px;
  margin-bottom: calc(44px + var(--mj-deborde) + max(100lvh - 100svh, var(--mj-chrome)) + env(safe-area-inset-bottom, 0px));
}

/* Les deux crans plus larges gardent la meme correction. Sans elle,
   un iPad — large comme un ordinateur, mais avec la barre de Safari —
   remettrait le bouton dessous. La soustraction vaut zero sur un vrai
   ordinateur : ces deux valeurs y restent exactement 20 et 24 px.

   (Le cran 750 px avait disparu en meme temps qu'un essai retire trop
   largement ; il est remis ici avec le reste.) */
@media (min-width: 750px) {
  html .mj-home .mj-hero__cta {
    margin-bottom: 20px;
    margin-bottom: calc(20px + var(--mj-deborde) + max(100lvh - 100svh, var(--mj-chrome)) + env(safe-area-inset-bottom, 0px));
  }
}
@media (min-width: 1100px) {
  html .mj-home .mj-hero__cta {
    margin-bottom: 24px;
    margin-bottom: calc(24px + var(--mj-deborde) + max(100lvh - 100svh, var(--mj-chrome)) + env(safe-area-inset-bottom, 0px));
  }
}

html .mj-home .mj-hero__t {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2.8vw, 26px);
  /* Plus de marge basse : elle pesait dans le centrage et poussait le
     titre 7 px au-dessus du milieu. L'ecart vers le sous-titre est
     desormais porte par le sous-titre lui-meme, en deplacement — ce
     qui ne prend aucune place. */
  margin: 0;
  /* Cormorant Garamond, demi-gras : la variante la plus proche des
     Garamond classiques. Elle ne sert qu'a ce titre, nulle part
     ailleurs sur le site.

     600 et non 400 : en capitales espacees sur une photographie, le
     regulier d'une garalde a des delies trop fins pour tenir. Le
     demi-gras leur redonne de la matiere sans jamais peser.

     Les replis restent dans sa famille de formes — les Garamond du
     systeme : si le telechargement echoue, le titre reste une
     garalde, jamais une sans-serif.

     Pas de « font-optical-sizing » : Cormorant Garamond ne porte pas
     d'axe de taille optique, ses variantes sont des familles
     distinctes. La declarer ne ferait rien. */
  font-family: 'Cormorant Garamond', 'EB Garamond', Garamond, 'Times New Roman', serif;
  font-weight: 600;
  /* La taille est reglee pour que « CARTE D'AFFAIRES » tienne sur UNE
     ligne du plus petit telephone au plus grand ecran. Le texte fait
     environ dix cadratins en capitales a cet interlettrage ;
     a 6,66 % de la largeur, il occupe donc les deux tiers de l'ecran
     et laisse de quoi poser les filets.

     Ces trois valeurs sont celles d'avant, moins 10 % : 21 / 7,4 / 58.
     Les trois ont baisse ensemble, sinon le titre aurait change de
     comportement selon la largeur au lieu de simplement rapetisser. */
  /* Le plafond est passe de 52,2 a 32 px. Mesure : sur telephone le
     titre fait 1,19 fois la largeur du sous-titre ; a 52,2 px il en
     faisait 1,94 sur un ecran de bureau, d'ou l'impression de titre
     trop lourd. A 32 px, le rapport redevient 1,19 — exactement celui
     du telephone. Le plancher et la pente ne bougent pas : les
     telephones gardent leur taille au pixel pres. */
  font-size: clamp(18.9px, 6.66vw, 32px);
  line-height: 1.12;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--mj-white);
  /* Jamais de retour a la ligne : le titre est une seule phrase, la
     couper en deux casse la composition. */
  white-space: nowrap;
}

/* Le texte porte son propre element plutot que de flotter entre les
   deux filets. Un texte nu dans une boite flexible devient une « boite
   anonyme » : elle herite bien de « white-space », mais on ne peut la
   designer, donc rien ne garantit qu'elle ne sera pas retrecie par un
   navigateur particulier. Nomme, il se regle directement — et
   « flex: 0 0 auto » lui donne la priorite sur les filets, qui cedent. */
html .mj-home .mj-hero__t .mj-hero__mot {
  flex: 0 0 auto;
  white-space: nowrap;
  min-width: 0;
}

/* Les filets CEDENT la place au texte plutot que de la lui prendre.
   « flex: 0 1 » les laisse se retrecir quand l'ecran est etroit ; le
   titre, lui, ne se retrecit pas puisqu'il ne peut pas revenir a la
   ligne. Une largeur minimale les empeche de disparaitre tout a fait. */
html .mj-home .mj-hero__t .mj-hero__filet {
  display: block;
  flex: 0 1 clamp(14px, 4.6vw, 52px);
  min-width: 12px;
  height: 1px;
  background: rgba(255, 255, 255, .85);
}

/* La ligne du dessous doit rester NETTEMENT plus courte que le titre :
   a largeurs voisines, les deux se disputent le regard et rien ne
   domine. On creuse l'ecart des deux cotes — le titre monte d'un cran,
   celle-ci descend — plutot que de tout demander a l'un des deux. */
/* LE REPERE, C'EST « CARTE D'AFFAIRES », PAS LE BLOC ENTIER.

   Centrer le bloc revenait a centrer le couple titre + sous-titre :
   le titre se retrouvait donc au-dessus du milieu, de la moitie de ce
   qui le suit. On veut que ce soit LE TITRE qui tombe au centre, le
   sous-titre pendant dessous.

   Plutot que de calculer ce decalage — il faudrait recopier ici la
   taille du sous-titre et son interligne, et les deux divergeraient a
   la premiere retouche —, on retire simplement le sous-titre du
   calcul : hauteur nulle, donc il ne compte pas dans la colonne, mais
   son texte deborde et reste visible.

   « min-height: 0 » n'est pas decoratif. Un element de boite flexible
   a « min-height: auto » par defaut, ce qui le ramene de force a la
   hauteur de son contenu : sans cette ligne, la hauteur nulle serait
   annulee et rien ne bougerait.

   Le deplacement de 14 px reprend l'ecart que portait le titre. Un
   deplacement ne prend pas de place : il ne revient donc pas fausser
   le centrage. */
html .mj-home .mj-hero__st {
  height: 0;
  min-height: 0;
  transform: translateY(14px);
  margin: 0;
  font-family: var(--mj-font);
  font-weight: 300;
  font-size: clamp(9px, 2.5vw, 12px);
  line-height: 1.5;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .92);
}

/* Sur un ecran couche et bas, le titre et « Decouvrir » se
   disputeraient la place. Le titre remonte. */
@media (max-height: 520px) {
  html .mj-home .mj-hero__t { font-size: clamp(18px, 4.14vw, 30.6px); }
}


/* ============================================================
   CARTE D'AFFAIRES — le titre « AVEC LA CARTE »
   ------------------------------------------------------------
   Il doit se lire comme « CARTE D'AFFAIRES » juste au-dessus,
   sur la meme page : c'est le titre du produit qui donne le
   ton, pas celui du heros de l'accueil.

   ATTENTION : les valeurs ci-dessous ne sont PAS celles ecrites
   sur « .mj-pdp__title ». Ce sont celles qui GAGNENT chez lui,
   ce qui n'est pas la meme chose.

   « .mj-pdp__title » declare 300 et .05em, mais il ne les
   obtient jamais : la regle « .mj-page h1, h2, h3 » plus haut
   dans ce fichier a la specificite 0,1,1 contre 0,1,0 et lui
   impose Figtree, 500, -.03em. Seules la taille et les
   capitales lui restent.

   Notre selecteur, lui, est a 0,1,2 : il passe devant cette
   regle et devrait donc la reecrire lui-meme. On ne peut pas
   se contenter de retirer ces deux lignes pour laisser faire
   « .mj-page h2 », car « .mj-incl h2 » du Customizer est a
   egalite avec elle et servi apres : c'est 300 et .07em qui
   reprendraient la main.

   La fonte et l'interligne ne sont pas declares : « .mj-page
   h2 » les donne aux deux titres a l'identique (Figtree, 1.3).

   Mesure de controle, fenetre a 1379 px : les deux titres
   doivent rendre 24px / 500 / -0.72px / 31.2px.

   Restent a la section : la marge basse et le centrage. Ils
   reglent sa place dans la page, pas sa typographie.

   Le selecteur porte « html » devant pour passer devant la
   regle du Customizer, servie avant mais a specificite egale.
   ============================================================ */
html .mj-incl h2 {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -.03em;
  text-transform: uppercase;
}

@media (min-width: 750px) {
  html .mj-incl h2 { font-size: 24px; }
}


/* ============================================================
   « L'HISTOIRE » DOIT TENIR DANS UN ECRAN DE TELEPHONE
   ------------------------------------------------------------
   Le texte de « L'histoire » est le plus long du site : il lui
   faut environ 675 px de panneau. Or le panneau vaut desormais
   « 100svh moins l'en-tete », et sur un iPhone la petite hauteur
   tourne autour de 700 a 760 px — soit 650 a 710 px de panneau.
   Mesure faite : a 700 px de fenetre, il debordait de 25 px.

   ON NE PEUT PAS S'EN SORTIR PAR UNE REQUETE MEDIA. Sur iOS,
   « max-height » mesure la GRANDE hauteur, celle qu'on a barre
   retractee — 844 px sur un iPhone 14 Pro, alors que la zone
   visible en fait 750. La requete ne se declencherait donc jamais
   au moment ou on en a besoin. Le reglage doit valoir pour tous
   les telephones, sans condition.

   ON RESSERRE DONC, SOBREMENT : un peu moins de marge haute, un
   interligne de 1,8 au lieu de 1,95, des paragraphes un peu plus
   proches. Environ 80 px regagnes — de quoi tenir meme sur le
   plus petit des ecrans visibles.

   Pourquoi pas laisser le panneau grandir ? Parce que l'accroche
   au defilement est stricte : elle ne s'arrete qu'au debut des
   panneaux. Un panneau plus haut que l'ecran verrait sa fin
   sautee — le texte serait la, mais personne ne l'atteindrait.
   ============================================================ */
@media (max-width: 767px) {

  html .mj-page--maison .mj-story {
    padding-top: 38px;
  }

  html .mj-page--maison .mj-story h2 {
    margin-bottom: 20px;
  }

  html .mj-page--maison .mj-story p {
    line-height: 1.8;
    margin-bottom: 14px;
  }
}


/* ============================================================
   LE TITRE D'UNE FONCTIONNALITE TIENT SUR UNE LIGNE
   ------------------------------------------------------------
   « UN PROFIL POUR CHAQUE OCCASION » passait sur deux lignes.

   LA CAUSE N'ETAIT PAS LA TAILLE. La colonne de texte etait
   plafonnee a « 34ch », soit 324 px — alors que 342 sont
   disponibles a 390 px de fenetre. Le titre demandait 327 px : il
   manquait TROIS pixels.

   Et baisser la police n'y aurait rien fait : « ch » se mesure
   sur la police, donc la colonne aurait retreci d'autant. Le
   rapport entre le texte et sa colonne serait reste le meme, et
   le titre aurait continue de passer a la ligne.

   ON REND DONC SA LARGEUR A LA COLONNE. Les paragraphes passent
   de 324 a 342 px a 390, et 382 a 430 — soit 52 a 58 signes par
   ligne, ce qui reste dans la zone de confort de lecture.

   PUIS ON REND LE TITRE FLUIDE. En dessous de 390 px la place
   manque toujours ; la taille suit alors la largeur de l'ecran.
   Plafond a 19 px : les telephones courants gardent la taille
   d'avant au pixel pres.

   Mesure du plus long titre, « Un profil pour chaque occasion » :
   il lui faut 327 px a 19 px de corps. Taille maximale possible —
   320 px : 15,8 · 360 px : 18,1 · 390 px : 19,9 · 430 px : 22,2.
   Le clamp reste sous chacune.

   Pas de « white-space: nowrap » : si un titre plus long arrive
   un jour, mieux vaut qu'il passe a la ligne que qu'il sorte de
   l'ecran.
   ============================================================ */
@media (max-width: 899px) {

  html .mj-guide .mj-etape .mj-etape__texte {
    max-width: 100%;
  }

  html .mj-guide .mj-etape .mj-etape__texte h2 {
    font-size: clamp(15px, 4.9vw, 19px);
  }
}


/* LE DEBORD DU BAS.

   Meme avec la grande hauteur, le panneau s'arretait 14,6 px au-dessus
   du bord de l'ecran sur iPhone — mesure faite au pixel sur une
   capture. Assez pour laisser voir le haut du panneau suivant.

   Plutot que de chercher d'ou viennent ces quelques pixels, on fait
   deborder le panneau SOUS le bord. Ce qui depasse n'est jamais vu :
   il n'y a pas d'ecran pour l'afficher.

   Tout ce qui se pose en bas d'un panneau remonte de la meme valeur,
   par cette variable. Les deux ne peuvent donc pas diverger : changer
   le debord recale les reperes tout seul. */
:root {
  --mj-deborde: 28px;

  /* Hauteur de la barre du navigateur, mesuree en JavaScript (voir le
     script « mj-barre-navigateur »). Zero par defaut : sur un
     ordinateur, et tant que le script n'a pas parle, rien ne bouge. */
  --mj-chrome: 0px;
}


/* ============================================================
   LE PANNEAU REMPLIT L'ECRAN, LE CONTENU RESTE AU-DESSUS DE LA BARRE
   ------------------------------------------------------------
   DEUX EXIGENCES QUI SEMBLENT SE CONTREDIRE.

   1. Le panneau doit remplir l'ecran ENTIER. Sinon, une fois la
      barre de Safari retractee, un lisere du panneau suivant
      apparait en bas — on voit le haut de l'image d'apres.

   2. Le contenu doit rester AU-DESSUS de la barre. Sinon la
      fleche, « Decouvrir » ou la derniere ligne passent dessous.

   ELLES NE SE CONTREDISENT PAS : c'est la BOITE qui doit faire la
   grande hauteur, et le CONTENU qui doit s'arreter a la petite. La
   difference entre les deux — « 100lvh - 100svh », exactement la
   hauteur de la barre — se met donc en marge basse, pas en hauteur.

   J'AVAIS CASSE CELA. En passant les hauteurs en « svh » je reglais
   le point 2 et je cassais le point 1 ; et en remplacant
   « 100lvh - 100svh » par « env(safe-area-inset-bottom) » sur les
   reperes, je perdais la seule mesure qui marche ici — env vaut
   zero sur ce Safari, la soustraction non. Le lisere du panneau
   suivant l'a prouve. On revient donc au mecanisme d'origine.

   Ne pas « simplifier » en retirant la soustraction : elle n'a
   l'air de rien sur un ordinateur, ou elle vaut zero, et elle fait
   tout le travail sur un telephone.
   ============================================================ */
html .mj-home .mj-stack__item,
html body .mj-stack__item {
  height: calc(100vh - var(--mj-adminbar) + var(--mj-deborde));
  height: calc(max(100vh, 100lvh, 100svh) - var(--mj-adminbar) + var(--mj-deborde));
  min-height: 0;
}

html .mj-page--maison .mj-story,
html .mj-page--maison .mj-story:has(.mj-story__more) {
  height: calc(100vh - var(--mj-header-h) - var(--mj-adminbar) + var(--mj-deborde));
  height: calc(max(100vh, 100lvh, 100svh) - var(--mj-header-h) - var(--mj-adminbar) + var(--mj-deborde));
  min-height: 0;
}

/* Sur un ecran bas — telephone couche —, une hauteur d'ecran ne
   suffit plus au texte. On le laisse alors grandir plutot que de
   couper : rien ne disparait jamais. */
@media (max-height: 660px) {
  html .mj-page--maison .mj-story,
  html .mj-page--maison .mj-story:has(.mj-story__more) {
    height: auto;
    min-height: calc(max(100vh, 100lvh, 100svh) - var(--mj-header-h) - var(--mj-adminbar));
  }
}


/* ============================================================
   TIROIR DU PANIER — LES DEUX VIGNETTES SUR FOND BLANC
   ------------------------------------------------------------
   « Adhesion » et « Frais de mise en service » portent une
   marque, pas une photographie : la montagne de la maison et une
   cle a molette. Une marque se pose sur du blanc, pas sur le gris
   des vignettes photo — et elle se voit en entier, elle n'est pas
   recadree.

   D'ou les deux differences avec « .mj-cart__thumb » : fond blanc
   borde d'un filet, et « object-fit: contain » au lieu de
   « cover ». La montagne est large et basse ; la laisser remplir
   le carre lui couperait les sommets.

   Les deux autres lignes — la carte et le porte-carte — gardent
   leur vignette d'origine : ce sont des objets, on veut les voir
   en gros plan.
   ============================================================ */
html .mj-cart__thumb--blanc {
  background: var(--mj-white);
  border: 1px solid var(--mj-line);
  color: var(--mj-black);
}

html .mj-cart__thumb--blanc img {
  width: 64%;
  height: auto;
  object-fit: contain;
}

html .mj-cart__thumb--blanc svg {
  width: 26px;
  height: 26px;
}


/* ============================================================
   LE PIED DU TIROIR PASSE AU-DESSUS DE LA BARRE
   ------------------------------------------------------------
   Mesure : le selecteur « FR / EN » tombait a ZERO pixel du bas
   de l'ecran — entierement sous la barre de Safari, donc
   intouchable. « Mon compte » et « Ma commande », juste
   au-dessus, l'etaient aussi selon la hauteur.

   La reserve se pose sur LE TIROIR, pas sur son pied. Premiere
   tentative : « .mj-drawer__sec », le bloc des deux liens. Elle
   n'a rien change pour « FR / EN », qui est son VOISIN et non
   son enfant — la marge ne le poussait pas. Le tiroir, lui, les
   contient tous les deux.

   Il est en colonne flexible : une marge basse sur le conteneur
   remonte tout ce qu'il contient, dans l'ordre, sans avoir a
   nommer le dernier element — qui changera un jour.
   ============================================================ */
html .mj-drawer {
  /* 22 px en plus de la barre : sans eux, « FR / EN » affleurait
     exactement son bord — plus cache, mais colle, et malcommode a
     viser. C'est le meme ecart que les reperes de La Maison. */
  padding-bottom: calc(22px + var(--mj-chrome) + env(safe-area-inset-bottom, 0px));
}


/* ============================================================
   LE TIROIR COUVRE TOUJOURS TOUT L'ECRAN
   ------------------------------------------------------------
   Le menu est en « position: fixed; inset: 0 ». Sur iPhone, la
   hauteur que cela represente depend de l'etat de la barre
   d'adresse : quand elle se retracte, l'ecran grandit mais le
   tiroir, lui, garde la hauteur qu'il avait. Une bande de la
   page d'en dessous reapparait alors en bas, le temps que tout
   se rassoie — c'est le bout de page d'accueil qui reste une
   seconde.

   On lui donne donc la plus grande des trois hauteurs possibles
   plutot que de le laisser suivre l'ecran. Il deborde parfois
   par le bas ; ce n'est qu'un aplat blanc, personne ne le voit.
   ============================================================ */
html .mj-drawer {
  bottom: auto;
  height: 100vh;
  height: max(100vh, 100lvh, 100svh);
}


/* ============================================================
   LA MAISON — les reperes de bas de panneau
   ------------------------------------------------------------
   Une fleche sous chaque panneau, qui mene au suivant, et sous
   le dernier un appel a l'action plutot qu'une fleche : il n'y
   a plus rien apres.

   Ce sont de vrais liens vers une ancre, pas un script : ils
   fonctionnent sans JavaScript, le clavier les atteint, et un
   lecteur d'ecran annonce l'intitule porte par « aria-label »
   plutot que de decrire un dessin.

   Le repere remonte de la zone sure du bas, comme le bouton de
   l'accueil : sur iPhone, l'indicateur d'accueil et la barre
   flottante occupent cette bande.
   ============================================================ */
html .mj-page--maison .mj-story__more,
html .mj-page--maison .mj-story__rejoindre {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  /* « 100lvh - 100svh » vaut la hauteur de la barre du navigateur :
     zero sur un ordinateur, la barre entiere sur un telephone. On
     ajoute la zone sure par-dessus pour l'indicateur d'accueil. */
  bottom: 22px;
  bottom: calc(22px + var(--mj-deborde) + max(100lvh - 100svh, var(--mj-chrome)) + env(safe-area-inset-bottom, 0px));
  z-index: 5;
  margin: 0;
  font-family: var(--mj-font-title);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--mj-black);
  text-decoration: none;
}

html .mj-page--maison .mj-story__more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  letter-spacing: .14em;
}

html .mj-page--maison .mj-story__more svg {
  display: block;
  width: 16px;
  height: 16px;
  animation: mj-arrow-bounce 2s ease-in-out infinite;
}

/* Le mouvement s'arrete pour qui a demande moins d'animation. */
@media (prefers-reduced-motion: reduce) {
  html .mj-page--maison .mj-story__more svg { animation: none; }
}

/* « Rejoindre Majellan » reprend la coupe de « Decouvrir » sur
   l'accueil : meme fonte, meme corps, meme filet a six pixels sous
   le texte — pas une bordure, qui tomberait au bas de la marge. */
html .mj-page--maison .mj-story__rejoindre {
  display: inline-block;
  padding: 10px 0;
  font-size: 12px;
  letter-spacing: -.01em;
}

html .mj-page--maison .mj-story__rejoindre::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 6px;
  width: 100%;
  height: 1px;
  background: currentColor;
}

/* Le panneau reserve la place du repere, sinon le dernier
   paragraphe viendrait se poser dessus. */
html .mj-page--maison .mj-story:has(.mj-story__more),
html .mj-page--maison .mj-etape:has(.mj-story__more),
html .mj-page--maison .mj-etape:has(.mj-story__rejoindre) {
  padding-bottom: 72px;
  padding-bottom: calc(72px + var(--mj-deborde) + max(100lvh - 100svh, var(--mj-chrome)) + env(safe-area-inset-bottom, 0px));
}


/* ============================================================
   LA MAISON — la signature sous « NOTRE PHILOSOPHIE »
   ------------------------------------------------------------
   Un filet court, le nom, puis la fonction en petites capitales
   grisees. Le filet est dessine par le bloc lui-meme plutot que
   d'etre un element ecrit dans la page : un trait n'a rien a
   dire, et un lecteur d'ecran n'a pas a l'annoncer.

   « text-transform » est pose ici, pas dans le texte de la
   page : « Fondateur de Majellan » y est ecrit en minuscules,
   pour que TranslatePress ait une phrase normale a traduire.
   Ce sont les yeux qui la voient en capitales, pas le fichier.

   Le nom, lui, garde sa casse : « Wilfrid B. » n'est pas un
   libelle, c'est un nom propre.
   ============================================================ */
html .mj-page--maison .mj-story__auteur {
  margin-top: 30px;
}

html .mj-page--maison .mj-story__auteur::before {
  content: "";
  display: block;
  width: 56px;
  height: 1px;
  margin: 0 0 16px;
  background: var(--mj-black);
  opacity: .8;
}

/* Le selecteur passe par « .mj-story__auteur », et ce n'est pas
   decoratif. Le bloc qui resserre les recits sur telephone vise
   « html .mj-page--maison .mj-story p » — deux classes et deux
   elements. Les deux regles ci-dessous n'en avaient que deux et un :
   elles perdaient, et le nom heritait d'une marge de 14 px et d'un
   interligne de 1,8. D'ou l'ecart beant entre « Wilfrid B. » et sa
   fonction. Une classe de plus et l'ordre est retabli. */
html .mj-page--maison .mj-story__auteur .mj-story__nom {
  font-size: 13px;
  line-height: 1.35;
  letter-spacing: .01em;
  margin: 0 0 2px;
  color: var(--mj-black);
}

html .mj-page--maison .mj-story__auteur .mj-story__role {
  font-size: 10px;
  line-height: 1.35;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0;
  opacity: .55;
}


/* ============================================================
   LA MAISON — les fonctionnalites venues du guide
   ------------------------------------------------------------
   Les etapes n'ont plus de numero sur cette page. La colonne de
   38 px qui leur etait reservee n'a donc plus d'objet : laissee
   en place, elle creusait un vide de 94 px a gauche du texte
   (38 px de colonne plus 56 px de gouttiere).

   On retire cette colonne et on decale les deux autres d'un
   cran. L'inversion une etape sur deux est reecrite avec, sinon
   la regle d'origine renverrait le texte dans une colonne 3 qui
   n'existe plus.

   Uniquement au-dessus de 900 px : en dessous la grille est deja
   sur une seule colonne, et le numero y etait deja masque.
   ============================================================ */

/* Le filet vertical de « .mj-etapes » etait la ligne du temps qui
   reliait les pastilles numerotees : il est trace a 57 px, soit le
   centre exact de la colonne de 38 px plus sa demi-largeur. Sans les
   numeros, il ne relie plus rien — c'est un trait qui tombe du vide
   vers le vide. On l'eteint a toutes les largeurs.

   « content: none » et non « display: none » : c'est la facon de ne
   pas creer le pseudo-element du tout, plutot que de le creer pour le
   cacher ensuite. */
html .mj-page--maison .mj-etapes::before {
  content: none;
}

@media (min-width: 900px) {
  html .mj-page--maison .mj-etape {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    /* Mesure faite a 1920 px : le texte commencait a 38 px du bord,
       quand « L'histoire » et « Notre philosophie » sont a 680 px du
       leur. D'ou l'impression de texte colle a la vitre. On ramene la
       fonctionnalite dans une largeur tenue, et on la centre.

       1100 px et non « --mj-maxw » : cette variable vaut 1396 px, ce
       qui ne mord qu'au-dela de 1472 px de fenetre — a 1440 px le
       texte serait reste colle au bord. Mesure apres : la marge passe
       de 38 px a 90 px a 1280, 170 px a 1440, 410 px a 1920. */
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
  }
  html .mj-page--maison .mj-etape__texte { grid-column: 1; }
  html .mj-page--maison .mj-etape__ecran { grid-column: 2; }
  html .mj-page--maison .mj-etape:nth-child(even) .mj-etape__texte { grid-column: 2; }
  html .mj-page--maison .mj-etape:nth-child(even) .mj-etape__ecran { grid-column: 1; }
}


/* ============================================================
   SELECTEUR FLOTTANT DE TRANSLATEPRESS — masque
   ------------------------------------------------------------
   Le site a le sien, a la charte, dans l'en-tete et dans le
   tiroir. Le reglage « trp-ls-floater » est pourtant sur « no » :
   l'extension l'affiche quand meme, d'ou ce masquage.
   ============================================================ */
.trp-floating-switcher{display:none!important;}

/* ============================================================
   SELECTEUR DE LANGUE
   ------------------------------------------------------------
   Reprend exactement la graisse et l'interlettrage du menu, pour
   se fondre dedans. La langue courante est pleinement opaque,
   l'autre en retrait : pas de bouton, pas d'encadre.
   Sur mobile le menu de l'en-tete est masque, le selecteur passe
   donc dans le tiroir, ou il recoit une vraie hauteur de doigt.
   ============================================================ */
.mj-lang{display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mj-font-title);font-size:9.9px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;}
.mj-lang a{opacity:.5;transition:opacity .2s;}
.mj-lang a:hover,.mj-lang a.is-current{opacity:1;}
.mj-lang__sep{opacity:.3;}

/* Dans l'en-tete, il suit le menu : masque sous 1024px. */
.mj-header .mj-lang{display:none;}
@media (min-width:1024px){
  .mj-header .mj-lang{display:inline-flex;margin-right:4px;}
  .mj-lang--tiroir{display:none;}
}
/* Dans le tiroir, tout est centre : le titre, le menu, les liens de
   compte. Le selecteur, lui, restait colle a gauche — il est etire sur
   toute la largeur (element flexible d'une colonne) et son contenu
   s'alignait au debut. On centre son contenu. */
.mj-lang--tiroir{margin:18px 0 0;font-size:12px;gap:10px;justify-content:center;}
.mj-lang--tiroir a{padding:10px 0;}

/* Les deux liens de compte flottaient a mi-chemin entre le menu et le
   selecteur de langue, loin des deux. La reserve sous eux valait 14vh
   (118 px sur un iPhone) : on la ramene a 6vh et le bloc descend d'autant.
   FR / EN ne bouge pas — il est le dernier element de la colonne, donc
   ancre au bas du tiroir quoi qu'il arrive.
   La regle d'origine est dans le CSS additionnel du Customizer, avec la
   meme specificite : c'est l'ordre de chargement qui nous donne raison,
   mj-coquille etant imprime apres. */
.mj-drawer__sec{padding-bottom:calc(6vh + env(safe-area-inset-bottom));}


/* ============================================================
   RECAPITULATIF DE COMMANDE — une seule lecture
   ------------------------------------------------------------
   Le tableau annoncait trois fois le meme montant : la ligne produit,
   un « sous-total » stricement identique, et le bloc de reconduction de
   l'extension d'abonnements. Ce dernier arrive en anglais (« Renewal
   For »), repete la somme deux fois, et se termine par un <tr> ouvrant
   au lieu d'un fermant — un defaut de l'extension, qui imbriquait la
   ligne suivante.

   On masque les deux redondances. Ce qui reste se lit d'un trait :
   la carte, les frais, le total, puis ce qui sera preleve chaque mois.
   La mention de reconduction est posee par le snippet des libelles,
   avec un montant calcule.
   ============================================================ */
.mj-wc .woocommerce-checkout-review-order-table tr.cart-subtotal,
.mj-wc .woocommerce-checkout-review-order-table tr.wps_recurring_bifurcation_wrapper{display:none;}

.mj-wc .woocommerce-checkout-review-order-table tr.mj-recur td{
  border-top:0;
  padding:2px 16px 15px;
  text-align:right;
  font-size:12.5px;
  line-height:1.5;
  color:var(--mj-grey-d);
}

/* ============================================================
   ADAPTATION MOBILE — mesuree sur iPhone 390x844
   ------------------------------------------------------------
   Tout est enferme sous 768px : le rendu desktop ne bouge pas.
   Aucune mise en page n'est refaite ici, on corrige trois defauts
   objectifs releves au navigateur. A replier dans la feuille
   principale lors de la refonte.
   ============================================================ */
@media (max-width:767px){

  /* 1. ZOOM AUTOMATIQUE iOS — le pire defaut du tunnel.
     Sous 16px, Safari agrandit la page des qu'un champ recoit le focus,
     et l'utilisateur doit dezoomer a la main entre chaque champ. Les dix
     champs de la commande etaient a 14px. 16px est un seuil exact impose
     par iOS, pas une preference de confort. */
  .mj-wc .woocommerce form .form-row input.input-text,
  .mj-wc .woocommerce form .form-row textarea,
  .mj-wc .woocommerce form .form-row select,
  .mj-wc input.input-text,.mj-wc select,.mj-wc textarea,
  body.mj-shell input.input-text,body.mj-shell select,body.mj-shell textarea,
  .woocommerce input.input-text,.woocommerce textarea,.woocommerce select,
  .mj-page input[type="text"],.mj-page input[type="email"],
  .mj-page input[type="tel"],.mj-page input[type="password"],
  .mj-page input[type="number"],.mj-page textarea{
    font-size:16px;
  }
  /* Filet : certains champs sont ajoutes par d'autres snippets et n'ont ni
     la classe ni le conteneur attendus — la confirmation d'e-mail du tunnel,
     par exemple. On vise tout champ de saisie du tunnel, en epargnant cases,
     boutons radio et boutons, qui n'ont pas de texte a agrandir. */
  .mj-wc input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
  .mj-wc select,.mj-wc textarea,
  .woocommerce-checkout input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]){
    font-size:16px;
  }

  /* 2. CIBLES TACTILES — 44px, minimum commun a Apple et Google.
     Dans l'en-tete on agrandit la zone SENSIBLE sans toucher au dessin :
     un pseudo-element centre de 44px, invisible, capte le doigt. Grossir
     les icones elles-memes deformerait l'en-tete. Sur mobile il n'y a
     qu'une icone a droite (celle du compte est masquee), donc aucune
     zone n'en recouvre une autre. */
  .mj-header .mj-burger,.mj-header .mj-icon,.mj-header .mj-logo,
  .mj-drawer__close,.mj-drawer__bag,.mj-etui__zoom,
  .show-password-input{position:relative;}
  .mj-header .mj-burger::after,.mj-header .mj-icon::after,.mj-header .mj-logo::after,
  .mj-drawer__close::after,.mj-drawer__bag::after,.mj-etui__zoom::after,
  .show-password-input::after{
    content:"";position:absolute;top:50%;left:50%;
    transform:translate(-50%,-50%);width:44px;height:44px;
  }
  /* Ces deux-la sont larges : seule la hauteur leur manquait. */
  .mj-etui__zoom::after,.mj-header .mj-logo::after{width:100%;min-width:44px;}

  /* Boutons d'action : 36px de haut, donc sous le seuil. Le bouton
     « Devenir membre » et « Payer et s'abonner » sont concernes. */
  .mj-btn,
  .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,
  body.mj-shell ul.products li.product .button,
  body.mj-shell ul.products li.product .added_to_cart{
    height:auto;min-height:48px;
  }

  /* Champs de saisie : meme hauteur de doigt que les boutons. */
  .mj-wc .woocommerce form .form-row input.input-text,
  .mj-wc .woocommerce form .form-row select,
  .mj-wc .select2-container--default .select2-selection--single{height:52px;}
  .mj-wc .select2-container--default .select2-selection--single .select2-selection__rendered{line-height:50px;}
  .mj-wc .select2-container--default .select2-selection--single .select2-selection__arrow{height:50px;}

  /* Liens empiles : 17px de haut, donc pratiquement colles. On ecarte les
     lignes plutot que de grossir demesurement le texte. */
  .mj-foot-grp a{display:block;padding:13px 0;}
  .mj-drawer__nav a,.mj-drawer__sec a{padding-top:12px;padding-bottom:12px;}

  /* 3. LISIBILITE — sous 12px, un texte n'est plus confortable a bout de
     bras. Le pied de page descendait a 9,5px. Seules les tailles montent,
     la graisse et l'interlettrage restent ceux de la charte. */
  .mj-foot-grp__t{font-size:12px;letter-spacing:.18em;}
  .mj-foot-grp a{font-size:13px;letter-spacing:.1em;}
  .mj-footer__copy{font-size:12px;}
  .mj-etui__zoom{font-size:12px;}
  .mj-cart__price,.mj-cart__price--incl,.mj-cart__sub,
  .mj-cart__ship,.mj-cart__recur,.mj-etui__label,
  .mj-pdp__delivery,.mj-hero__eyebrow,
  .mj-etui__opt span,.mj-cart__tlabel{font-size:12px;}

  /* Les libelles du tunnel WooCommerce descendaient a 11px : ce sont eux
     qu'on lit en remplissant l'adresse, au moment le plus couteux du
     parcours. On les remonte au seuil de confort. */
  .mj-wc .woocommerce form .form-row label,
  .mj-wc .woocommerce label,
  .mj-wc .woocommerce .required,
  .mj-wc .woocommerce .optional,
  .mj-wc .woocommerce table.shop_table th,
  .mj-wc .woocommerce h4,
  .mj-wc .woocommerce-privacy-policy-text{font-size:12px;}

  /* LA MAISON — les sections etaient forcees a la hauteur de l'ecran
     (100vh) alors que leur texte est court : d'ou de grands vides, et un
     recit qu'on croit absent parce qu'on tombe sur le blanc. Sur telephone
     on laisse la section prendre la hauteur de son contenu.
     Le texte etait par ailleurs a 10,5px, sous le plancher de lisibilite —
     .mj-story p echappait aux selecteurs du bloc precedent. */
  .mj-story,.mj-story:has(.mj-story__more){
    height:auto;min-height:0;padding:58px 24px 62px;
  }
  .mj-story h2{font-size:21px;margin:0 0 22px;}
  .mj-story p{font-size:13px;line-height:1.8;letter-spacing:.04em;}
  /* La fleche « Nos valeurs » etait calee sur le bas de l'ecran : sans
     hauteur fixe, elle doit suivre le texte. */
  .mj-story__more{position:static;transform:none;bottom:auto;margin:26px auto 0;font-size:12px;}

}

/* ============================================================
   SURVOL SUR ECRAN TACTILE
   ------------------------------------------------------------
   Le defaut le plus visible qui restait sur telephone. Un doigt qui touche
   declenche :hover, et l'etat RESTE colle jusqu'au tap suivant ailleurs :
   le balayage de .mj-btn s'immobilise a mi-course, le trait sous
   « Decouvrir » part sans revenir. Les 37 regles :hover du site n'etaient
   protegees par rien.

   La garde porte sur le POINTEUR, pas sur la largeur : un portable tactile
   de 1400px a exactement le meme probleme, et une souris dans une fenetre
   etroite ne doit rien perdre. C'est la parade de Saint Laurent, qui scope
   ses survols en @media (pointer:fine).
   ============================================================ */
/* ============================================================
   DEFILEMENT PAR CRAN — RENDU AU CUSTOMIZER (27/08/2026 au soir)
   ------------------------------------------------------------
   Demande du client : « un coup de molette, toute la page monte ».
   C'est exactement ce que fait le reglage d'origine du Customizer :
   scroll-snap-type:y mandatory sur html, plus scroll-snap-align:start et
   scroll-snap-stop:always sur chaque section — ce dernier interdisant
   d'enchainer deux crans dans un meme geste.

   Ces deux regles neutralisaient ce reglage. Elles sont retirees : le
   cran d'origine reprend donc la main, tel qu'il avait ete concu.

   Historique, pour ne pas tourner en rond : le cran a d'abord ete retire
   dans la journee (« la page descend au lieu de monter »), remplace par un
   empilement collant (invisible sur iPhone), puis par un defilement libre
   (aucun effet). Le client revient au cran en connaissance de cause.
   ============================================================ */

/* ACCUEIL — DEFILEMENT LIBRE (choix du client, 27/08/2026 au soir).
   L'empilement collant a ete retire : les visuels ne se figent plus, ils
   montent naturellement, chacun pousse par le suivant. C'est ce que fait
   ysl.com, dont la feuille ne contient ni scroll-snap ni sticky.
   Le cran du Customizer reste neutralise juste au-dessus.

   .mj-home garde « overflow-x:visible » : son rognage d'origine
   (overflow-x:hidden) recoupait les sections .mj-full, qui sortent du
   conteneur par des marges negatives calc(50% - 50vw) pour occuper toute
   la largeur — d'ou une gouttiere blanche de ~10px de chaque cote.
   Mesure faite a 390, 768, 1024 et 1440px : sans ce rognage, aucun
   debordement horizontal. */
.mj-home{overflow-x:visible;}

/* ============================================================
   BAS D'ECRAN SOUS LA BARRE DE SAFARI
   ------------------------------------------------------------
   Les sections plein ecran etaient hautes de 100lvh : la hauteur du
   viewport LARGE, c'est-a-dire barre du navigateur MASQUEE. Sur iPhone la
   barre est pourtant affichee et translucide : l'image passait donc
   dessous, la barre se teintait du visuel et laissait deviner le contenu
   suivant. Sur Chrome le defaut n'apparait pas, sa barre etant opaque et
   ne recouvrant pas la page.

   On passe en 100svh, le viewport PETIT — barre affichee. Le visuel
   s'arrete net au-dessus d'elle, et c'est le fond de page qui se trouve
   derriere : la barre redevient un bandeau uni, comme chez Saint Laurent.

   svh plutot que dvh : dvh se recalcule quand la barre se retracte, ce qui
   ferait sauter la hauteur des visuels en plein defilement — d'autant plus
   visible depuis qu'ils sont colles. svh ne bouge jamais.
   ============================================================ */
.mj-stack__item{
  height:calc(100svh - var(--mj-adminbar));
  min-height:0;
}
/* Portee au seul heros de l'empilement : ailleurs (Guide, La Maison) un
   .mj-hero est autonome et tire sa hauteur de lui-meme — lui imposer
   height:100% le ferait s'effondrer, son parent n'ayant pas de hauteur. */
.mj-stack__item .mj-hero{height:100%;}

/* Le pied de page, lui, est deja en 100svh et centre en flex : ne rien y
   ajouter, un padding y decalerait le contenu vers le haut. */

@media (hover:none),(pointer:coarse){
  .mj-btn:hover::after{width:0;}
  .mj-hero__cta a:hover{opacity:1;}
  .mj-hero__cta a:hover::before{transform:translate3d(-102%,0,0);}
  .mj-hero__cta a:hover::after{transform:translate3d(0,0,0);}
  .mj-nav a:hover,.mj-icon:hover,.mj-foot-grp a:hover{opacity:1;}

  /* Certains libelles du recapitulatif et des CGV echappent aux selecteurs
     ci-dessus, WooCommerce ne les rangeant pas sous les memes conteneurs.
     On les vise par leur classe propre. */
  .shop_table th,.shop_table td,
  .woocommerce h4,
  .woocommerce-terms-and-conditions-checkbox-text,
  .woocommerce-terms-and-conditions-checkbox-text a,
  .woocommerce-privacy-policy-text{font-size:12px;}

  /* Le champ de confirmation d'e-mail est cree en JavaScript, sans classe,
     apres le chargement : il echappe aux selecteurs de formulaire. Un
     selecteur d'identifiant le rattrape a coup sur. */
  #mj_email_confirm{font-size:16px;}

  /* Seul appel a l'action de l'accueil, et il ne faisait que 38px.
     Ses deux pseudo-elements servant deja au trait anime, la zone tactile
     passe par le padding. Le trait est recale d'autant pour ne pas
     s'eloigner du mot : seul le texte remonte de 3px. */
  .mj-hero__cta a{padding:13px 0;}
  .mj-hero__cta a::after{bottom:9px;}
}

/* ============================================================
   SELECTEURS A ENFANT DIRECT — REJOUES ICI
   ------------------------------------------------------------
   Meme cause que les polices : dans la feuille du Customizer, « > » est
   servi en « &gt; » et le selecteur devient invalide, donc ignore. Quatre
   regles etaient ainsi mortes depuis le debut. Ce bloc-ci n'est pas
   echappe (verifie : les autres blocs <style> gardent leurs « > » bruts),
   elles reprennent donc effet.
   ============================================================ */
.site-main > article{max-width:none!important;width:auto!important;padding:0!important;margin:0!important;}
.mj-wc .woocommerce table.cart td.product-name > a{white-space:nowrap;}
.mj-account-dashboard .woocommerce-MyAccount-content > p{display:none;}
.mj-wc .u-columns > div{flex:1;min-width:280px;}
@media (min-width:900px){
  body.woocommerce-cart .mj-wc .woocommerce > .woocommerce-notices-wrapper{grid-column:1/-1;}
}

/* ============================================================
   ZONE RESERVEE DE L'IPHONE (viewport-fit=cover)
   ------------------------------------------------------------
   Avec viewport-fit=cover, la page s'etend sous l'encoche : le header
   fixe passerait sous l'heure et la batterie. On le repousse de la zone
   reservee, qui vaut 0 partout ailleurs — la regle est donc sans effet
   sur ordinateur et sur Android.

   Plus de filet blanc ni de bande : c'est desormais theme-color qui
   colore les deux barres, le visuel peut donc toucher les bords.
   ============================================================ */
.mj-header{top:calc(var(--mj-adminbar) + env(safe-area-inset-top,0px));}
@media (max-width:767px){
  .mj-stack__item{background:var(--mj-white);}
}