/* =============================================================
   SOJ - corrections responsive
   -------------------------------------------------------------
   PORTEE STRICTE. Ce fichier ne contient QUE six media queries :
     - (min-width: 1800px)             -> ordinateur de bureau
     - (max-width: 900px)              -> header compact
     - (max-width: 767px)              -> telephone
     - (min-width: 768px)-(max: 1399px)-> tablette (carrousels)
     - (max-width: 767px)              -> carrousels telephone
     - (max-width: 999px)              -> fleches de carrousel
   La plage 1400px -> 1799px, qui contient le rendu portable de
   reference (1700 x 900), n'est JAMAIS touchee par ce fichier.
   Le supprimer (ou retirer le <link> dans layouts/home.blade.php)
   remet le site exactement dans son etat precedent.
   ============================================================= */

/* =============================================================
   1. ORDINATEUR DE BUREAU  (>= 1800px)
   Principe : dans une fenetre de 1700px, la zone de contenu du site
   mesure exactement 1520px (90% de 1685px, une fois la barre de
   defilement deduite). Au-dela de 1800px on plafonne donc a cette
   meme valeur : un grand ecran affiche le rendu du portable a
   l'identique, simplement centre, au lieu d'etirer le contenu
   jusqu'a 2300px de large.
   ============================================================= */
@media (min-width: 1800px) {

    /* conteneur principal du contenu (style inline 90% dans le layout) */
    html body .soj-page-wrap { max-width: 1520px !important; }

    /* bandeau promo : le fond reste pleine largeur, le texte se recentre */
    html .soj-topbar-inner { max-width: 1520px; margin-left: auto; margin-right: auto; }

    /* header : logo et actions ne partent plus aux deux extremites de l'ecran */
    html .soj-header-inner { max-width: 1520px; margin-left: auto; margin-right: auto; }

    /* barre de navigation verte : le fond reste pleine largeur,
       les entrees de menu restent dans la zone centrale de 1520px */
    html .soj-nav {
        padding-left: calc((100% - 1520px) / 2);
        padding-right: calc((100% - 1520px) / 2);
    }

    /* pre-footer et footer alignes sur la meme largeur */
    html .soj-footer__container { max-width: 1520px; }

    /* meme alignement des lignes d'actions sur grand ecran */
    html .soj-prod-card-actions { margin-top: auto; }

    /* "Selection du moment" : 5 produits par vue sur grand ecran,
       au lieu de 4. Uniquement ici : le portable et la tablette
       gardent 4. */
    html #soj-sel-track .soj-pcard { flex: 0 0 calc((100% - 128px) / 5); }

    /* bannieres pleine largeur : 100vw inclut la barre de defilement,
       ce qui decale le bloc de ~15px vers la gauche. On neutralise. */
    html .page-hero,
    html .contact-hero,
    html .guide-hero,
    html .account-hero { width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; }
}

/* =============================================================
   2. TELEPHONE  (<= 767px)
   ============================================================= */
/* =============================================================
   2. HEADER COMPACT + LARGEUR COLONNE PRODUITS  (<= 900px)
   900px est le point de bascule du site lui-meme
   (header.blade.php, "Tablette / mobile") : en dessous, il passe
   en header empile. Mais l'empilement d'origine laisse le logo seul
   sur sa ligne et renvoie langue/compte/panier a l'autre bout de
   l'ecran, ce qui donne un header etale de ~145px de haut.
   Ici : logo a gauche, actions a droite sur la meme ligne, puis la
   recherche pleine largeur en dessous.
   `display:contents` fait remonter le logo et la recherche au niveau
   de .soj-header-inner pour pouvoir les reordonner. Sans danger :
   .soj-header-zone-left est en position static et le menu deroulant
   de recherche est en position fixed.
   ============================================================= */
@media (max-width: 900px) {
    /* --- en-tete telephone : burger / logo centre / actions -----------
       Trois blocs sur une ligne, la recherche pleine largeur en dessous,
       sur le fond creme du site. La barre verte du bas ne portait plus
       que le burger : elle disparait, le burger remonte sur cette ligne.

       Le logo est sorti du flux et centre sur la ligne entiere. Une
       colonne centrale ne conviendrait pas : le burger fait 34px et le
       bloc langue+compte+panier environ 165px, donc le logo se
       retrouverait visiblement decale vers la gauche. Hors du flux il
       n'occupe aucune place ; la hauteur de la ligne vient des deux
       blocs lateraux, a qui on donne la meme hauteur minimale. */
    html .soj-header { background: var(--cream, #FFFFF6); }

    /* Flex a deux lignes, et non une grille : dans une grille, la barre de
       recherche s'etend sur les deux colonnes et elargit celle de droite,
       qui vient alors chevaucher le logo centre. En flex, les deux lignes
       sont independantes. */
    html .soj-header-inner {
        display: flex; flex-wrap: wrap; align-items: center;
        row-gap: 12px; column-gap: 0;
        position: relative;
    }
    html .soj-header-zone-left { display: contents; }
    /* zone centrale vide : elle consommait un gap et decalait le logo */
    html .soj-header-zone-center { display: none; }

    html .soj-burger { order: 1; }
    html .soj-header-zone-right { order: 2; margin-left: auto; }
    html .soj-header-search { order: 3; flex: 1 0 100%; max-width: none; }
    /* Le panneau de suggestions restait sur la premiere ligne et y occupait
       une trentaine de pixels : le bloc d'actions n'etait plus colle a
       droite et empietait sur le logo centre. On le renvoie sur sa propre
       ligne. */
    html .soj-search-dropdown { order: 4; flex: 0 0 100%; }

    /* Les deux blocs lateraux donnent sa hauteur a la ligne : le logo, sorti
       du flux, n'y contribue pas. */
    html .soj-burger,
    html .soj-header-zone-right { min-height: 72px; }

    /* Logo centre sur la ligne entiere. Une colonne centrale ne
       conviendrait pas : le burger fait 34px et le bloc d'actions environ
       150px, le logo se retrouverait nettement decale vers la gauche. */
    html .soj-header-logo-link {
        position: absolute; left: 50%; top: 0;
        transform: translateX(-50%);
        display: flex; align-items: center; justify-content: center;
        /* 60px sur une base de 438 : 13,7 % de la largeur d'ecran. */
        width: clamp(50px, 13.7vw, 66px); height: 72px;
    }
    /* Le fichier mobile est detoure : il remplit desormais toute la largeur
       qu'on lui donne. On le dimensionne par la largeur, la hauteur suit. */
    html .soj-header-logo-link img {
        width: 100%; height: auto;
        max-width: none; max-height: none;
        object-fit: contain;
    }

    /* Le cadre du logo, centre sur la ligne, effleure celui du bouton de
       langue. Sans cela il capterait les appuis destines a « FR » : un
       element positionne se dessine au-dessus de ses voisins dans le flux.
       Les actions passent donc devant. */
    html .soj-header-zone-right { position: relative; z-index: 2; }

    /* La navigation verte ne contenait plus que le burger. */
    html .soj-nav { display: none; }

    /* --- etat defile --------------------------------------------------
       Le header sticky a ses propres regles, de specificite superieure :
       le logo repassait a 72px et le libelle du compte reapparaissait,
       ce qui faisait chevaucher le logo centre. On fige la meme mise en
       page dans les deux etats. */
    html .soj-header-fixed.is-scrolled .soj-header-logo-link { width: clamp(50px, 13.7vw, 66px); height: 72px; }
    html .soj-header-fixed.is-scrolled .soj-header-account,
    html .soj-header-fixed.is-scrolled .soj-header-cart { font-size: 0; gap: 0; }
    html .soj-header-fixed.is-scrolled .soj-header-inner { column-gap: 0; }

    /* --- sous 400px : cibles tactiles reduites a 36px ------------------
       Le bloc FR + compte + panier mesure 155px pour une ligne de 313px a
       360px de large : il depasse la moitie, et chevauche donc forcement
       un logo centre. En descendant les trois controles a 36px, le bloc
       tombe a 124px et laisse le centre libre.

       C'est un compromis assume : 44px est le minimum recommande par
       Apple et par le critere WCAG 2.5.5, applique ici lors du travail
       responsive precedent. On passe en dessous uniquement sur les tres
       petits ecrans, et uniquement pour ces trois controles. */
    @media (max-width: 400px) {
        /* Ce sont les conteneurs qui portent la largeur, pas les liens
           qu'ils enveloppent : viser .soj-header-account ne changeait rien. */
        html .soj-header-account-wrap,
        html .soj-header-account,
        html .soj-header-cart,
        html .soj-lang-switcher,
        html .soj-lang-btn { min-width: 36px; width: 36px; min-height: 36px; }
        html .soj-lang-btn { padding-left: 0; padding-right: 0; }
        html .soj-header-zone-right { gap: 6px; }

        /* L'image est carree : sa largeur dessinee vaut sa hauteur. On
           descend a 64px pour degager le bloc d'actions. */
        html .soj-header-logo-link,
        html .soj-header-fixed.is-scrolled .soj-header-logo-link { width: 56px; height: 64px; }
        html .soj-header-logo-link img { max-height: 34px; }
        html .soj-burger,
        html .soj-header-zone-right { min-height: 64px; }
    }

    /* --- boutique / categories : colonne produits tronquee ------------
       A 900px, .soj-cat-layout passe en `flex-direction:column`, mais il
       garde `align-items:flex-start` : en colonne, cela empeche les
       enfants de s'etirer, ils se dimensionnent sur leur contenu.
       .soj-cat-sidebar a bien un `width:100%` explicite, .soj-cat-main
       non : a 844px il s'arretait a 554px pour 746px disponibles, d'ou
       la bande vide a droite de la grille produits. */
    html .soj-cat-main { width: 100%; }
}

@media (max-width: 767px) {

    /* --- zones tactiles : 44px minimum (Apple HIG / WCAG 2.5.5) --- */
    html .soj-header-account,
    html .soj-header-cart {
        min-width: 44px; min-height: 44px;
        display: inline-flex; align-items: center; justify-content: center;
    }
    html .soj-lang-btn { min-height: 44px; padding-left: 10px; padding-right: 10px; }

    /* champ de recherche : 44px de haut, et 16px de police pour empecher
       le zoom automatique de Safari iOS a la mise au point */
    html .soj-header-search input { min-height: 44px; font-size: 16px; }

    /* carrousel : fleches et puces atteignables au pouce */
    html .soj-hero-arrow { width: 44px; height: 44px; }
    html .soj-newsletter-input,
    html .soj-newsletter-btn { min-height: 44px; }
    html .soj-newsletter-input { font-size: 16px; }
    html .soj-wishlist-btn { width: 36px; height: 36px; }
    html .soj-pcard-cart-btn { min-height: 40px; }
    html .soj-hero-dot   { width: 12px; height: 12px; }

    /* carrousel : les fleches et les puces se chevauchaient en bas du
       slider. Sur telephone le balayage suffit -> on masque les fleches
       et on centre les puces. */
    html .soj-hero-arrows { display: none; }
    html .soj-hero-dots {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }

    /* Le logo etait fige a 52px parce qu'il partageait la ligne avec les
       actions : a 72px l'ensemble ne tenait plus et le header doublait de
       hauteur. Il est desormais hors du flux, centre sur la ligne : il ne
       peut plus provoquer de retour a la ligne, et sa taille est fixee
       plus haut avec le reste de l'en-tete telephone. */
    html .soj-header-fixed.is-scrolled .soj-header-inner { gap: 12px; row-gap: 10px; }

    /* --- carrousel : bannieres a texte incruste ---------------------
       La banniere .soj-hero-slide--full fait 1024x393 (ratio 2,6) et
       elle etait affichee en `cover` dans un cadre de 278x300
       (ratio 0,93) : 64% de la largeur etait rognee et le titre
       incruste dans l'image devenait illisible.
       On abaisse le cadre et on passe cette diapo en `contain`
       pour que la banniere soit lue en entier. */
    html .soj-hero-slider { height: 212px; }
    html .soj-hero-slide--full {
        background-size: contain;
        background-repeat: no-repeat;
        background-position: 50% 50%;
        background-color: #1b1222;
    }

    /* Les diapos a texte HTML debordaient de leur cadre (219px de
       contenu pour 212px de hauteur) : titre 26px et paragraphe 18px
       sont trop gros dans un cadre de 278px de large. */
    html .soj-hero-body h1 { font-size: 22px; line-height: 1.15; margin-bottom: 8px; }
    html .soj-hero-body p  { font-size: 15px; line-height: 1.35; margin-bottom: 16px; }
    html .soj-hero-btn     { font-size: 16px; padding: 9px 24px; }

    /* --- bandeau reassurance (Fidelite / Livraison / Click&Collect) ---
       Sur telephone les 4 arguments ne sont plus une grille 2x2 mais un
       bandeau horizontal qui se fait glisser au doigt (voir home.blade).
       L'ancienne regle reservait deux lignes de titre et centrait le
       texte en flex pour aligner la grille : ce n'est plus utile ici, et
       ca cassait l'alignement a gauche icone / texte du bandeau. */
    html .soj-features .soj-feature-title {
        font-size: 17px;
        line-height: 1.25;
        min-height: 2.5em;          /* "Fragrances de Grasse" tient sur deux
                                       lignes : on reserve la place partout
                                       pour que les sous-titres restent
                                       alignes d'une vignette a l'autre. */
        display: flex;
        align-items: flex-end;
        justify-content: flex-start;
        text-align: left;
        margin-bottom: 3px;
    }
    html .soj-features .soj-feature-sub {
        text-align: left;
        min-height: 2.8em;          /* idem : deux lignes reservees, sinon
                                       l'icone (qui est a cheval sur les deux
                                       rangees) se recentre differemment sur
                                       la vignette "Fidelite". */
    }

    /* --- cartes produit (boutique + categories) ---------------------
       La ligne d'actions est en `flex-wrap:nowrap` : sur les 21 cartes
       sur 24 qui ont un selecteur de variante, on se retrouvait avec
       trois controles dans 147px -> le selecteur de variante tombait
       a 41px de large, illisible et intouchable.
       On autorise le retour a la ligne : variante sur toute la
       largeur, puis quantite et bouton panier cote a cote. */
    html .soj-prod-card-actions { flex-wrap: wrap; gap: 6px; }
    html .soj-prod-card-actions > .soj-prod-card-select:not(.soj-prod-card-qty) { flex: 1 1 100%; }
    html .soj-prod-card-actions > .soj-prod-card-qty  { flex: 1 1 40%; }
    html .soj-prod-card-actions > .soj-prod-card-cart { flex: 1 1 40%; min-width: 0; }
    /* cartes de hauteurs differentes selon qu'elles ont une variante :
       on colle la ligne d'actions en bas pour qu'elles s'alignent. */
    html .soj-prod-card-actions { margin-top: auto; }

    /* --- bannieres de page : titres ---------------------------------
       Le H1 des bannieres reste a 46px sur telephone : sur /guide le
       titre occupait 360px de haut et la banniere 592px, soit 70% de
       l'ecran avant le moindre contenu. */
    html .page-hero h1,
    html .contact-hero h1,
    html .guide-hero h1,
    html .pro-hero h1,
    html .faq-hero h1,
    html .account-hero h1 { font-size: 28px; line-height: 1.15; }

    /* /faq : le texte de la banniere est passe en blanc. L'ombre est
       donc sombre (elle etait blanche du temps ou le texte etait noir,
       ce qui rendrait maintenant le titre invisible). */
    html .faq-hero h1,
    html .faq-hero p {
        text-shadow: 0 0 3px rgba(0, 0, 0, 0.6), 0 2px 14px rgba(0, 0, 0, 0.5);
    }
    html .faq-hero p { font-size: 15px; line-height: 1.4; }

    /* /pro : le titre et le chapo sont en orange sur une photo claire.
       Le voile a ete retire volontairement (commit "pro: voile banner
       0/0/0"), donc on ne le remet pas : une ombre portee suffit a
       rendre le texte lisible sur telephone, ou le cadrage de la photo
       tombe sur sa zone la plus claire. */
    html .pro-hero h1,
    html .pro-hero p {
        text-shadow: 0 0 2px rgba(0, 0, 0, 0.9), 0 2px 8px rgba(0, 0, 0, 0.75);
    }
    html .pro-hero p { font-size: 15px; line-height: 1.35; }

    /* --- carte de contact : l'infobulle Leaflet depassait du cadre --- */
    html .contact-map .leaflet-popup-content,
    html .soj-contact-map .leaflet-popup-content {
        width: auto !important;
        min-width: 170px;   /* sans ce minimum, la bulle se tasse a 65px */
        max-width: 200px;
    }
    html .page-hero-inner { padding-left: 16px; padding-right: 16px; }

    /* --- cartes du guide ---------------------------------------------
       48px/40px de padding dans une carte de 258px : il ne restait que
       178px pour le texte, qui se coupait tous les deux mots. */
    html .guide-card-body { padding: 24px 20px; }
    html .guide-card-body h2 { font-size: 22px; line-height: 1.2; }

    /* --- PANIER : le tableau debordait de l'ecran ---------------------
       .soj-cart-layout est une grille dont l'element enfant garde
       min-width:auto : il ne peut donc pas retrecir en dessous de la
       largeur minimale du tableau (448px). Resultat sur telephone :
       le nom du produit se coupait mot par mot, le champ quantite et
       le bouton "Valider la commande" sortaient de l'ecran.
       On autorise le retrecissement, puis on empile chaque ligne du
       panier sous forme de fiche. */
    html .soj-cart-layout > * { min-width: 0; }
    html .soj-cart-page form,
    html .soj-cart-actions,
    html .soj-cart-summary { max-width: 100%; }

    html .soj-cart-table { display: block; width: 100%; }
    html .soj-cart-table thead { display: none; }
    html .soj-cart-table tbody { display: block; }
    html .soj-cart-table tr {
        display: block;
        position: relative;
        min-height: 86px;
        padding: 14px 34px 14px 86px;
        border-bottom: 1px solid #e9e9e9;
    }
    html .soj-cart-table td { display: block; width: auto; padding: 2px 0; border: 0; }
    /* vignette calee a gauche */
    html .soj-cart-table td:nth-child(2) { position: absolute; left: 0; top: 14px; width: 72px; padding: 0; }
    html .soj-cart-table td:nth-child(2) img { width: 72px; height: auto; }
    /* croix de suppression en haut a droite */
    html .soj-cart-table td:nth-child(1) { position: absolute; right: 0; top: 4px; width: auto; padding: 0; }
    html .soj-cart-rm {
        min-width: 44px; min-height: 44px;
        display: inline-flex; align-items: center; justify-content: center;
    }
    /* etiquettes, puisque l'en-tete du tableau est masque */
    html .soj-cart-table td.soj-cart-price::before { content: "Prix : "; color: #777; }
    html .soj-cart-table td.soj-cart-sub::before   { content: "Sous-total : "; color: #777; }
    html .soj-cart-table td.soj-cart-td-qty { padding-top: 6px; }
    html .soj-cart-qty { width: 78px; }
    html .soj-cart-prod-name { display: inline-block; font-weight: 600; }

    /* --- CHECKOUT : trop de marges empilees --------------------------
       Sur 375px, .soj-page-wrap (2x18) + .soj-co-page (2x30) +
       .soj-co-card (2x28) mangeaient 153px, soit 41% de l'ecran : la
       liste des modes de livraison tombait a 220px et le libelle
       "Click and Collect (235 chemin de la madrague ville 13015,
       Marseille)" se coupait sur six lignes. */
    html .soj-co-page { padding-left: 14px; padding-right: 14px; }
    html .soj-co-card { padding-left: 16px; padding-right: 16px; }

    /* le prix passe sous le libelle pour lui laisser toute la largeur */
    html .soj-ship-option { flex-wrap: wrap; }
    html .soj-ship-option-price { flex: 1 0 100%; margin-left: 30px; }

    /* le libelle du champ telephone GLS est en display:inline : le
       champ venait se coller a la fin de la derniere ligne de texte. */
    html .soj-ship-gls-phone .soj-co-label { display: block; margin-bottom: 6px; }
    html .soj-ship-gls-phone .soj-co-input { width: 100%; }

    /* --- pied de page ------------------------------------------------
       Les trois colonnes de liens s'empilaient les unes sous les
       autres : 1338px de footer a faire defiler. On les met deux par
       deux, le bloc de marque restant sur toute la largeur. */
    html .soj-footer__container { grid-template-columns: 1fr 1fr; column-gap: 20px; }
    html .soj-footer__brand { grid-column: 1 / -1; }

    /* --- bannieres : suppression du debord de ~15px du a 100vw --- */
    html .page-hero,
    html .contact-hero,
    html .guide-hero,
    html .account-hero,
    html .soj-about__sep { width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; }
}

/* =============================================================
   3. TABLETTE  (768px -> 1399px)
   Les deux carrousels affichent 3 cartes par vue.
   Sans cette regle, home.blade.php impose 4 cartes pour
   #soj-sel-track et 6 pour #soj-new-track a toutes les largeurs :
   a 1000px les cartes de "Nouveautes" tombaient a 114px.
   Au-dela de 1400px (donc sur l'ordinateur portable de reference a
   1700px) rien ne change : on reste a 4 et 6.
   ============================================================= */
@media (min-width: 768px) and (max-width: 1399px) {
    /* gouttiere de 32px pour #soj-sel-track, 28px pour #soj-new-track */
    html #soj-sel-track .soj-pcard { flex: 0 0 calc((100% - 64px) / 3); }
    html #soj-new-track .soj-pcard { flex: 0 0 calc((100% - 56px) / 3); }
}

/* =============================================================
   4. TELEPHONE  (<= 767px)
   Deux cartes par vue (comme la grille boutique / categorie),
   avec une gouttiere de 12px comme sur les pages categorie.
   Les regles `#soj-sel-track .soj-pcard` et `#soj-new-track
   .soj-pcard` de home.blade.php sont ecrites hors media query avec
   un selecteur d'ID : il faut la meme specificite pour passer
   devant, d'ou le `html` en prefixe.
   ============================================================= */
@media (max-width: 767px) {
    html #soj-sel-track,
    html #soj-new-track,
    html .soj-carousel-track { gap: 12px; }
    html #soj-sel-track .soj-pcard,
    html #soj-new-track .soj-pcard,
    html .soj-carousel-track .soj-pcard {
        flex: 0 0 calc((100% - 12px) / 2);
        min-width: 0;
    }
}

/* =============================================================
   5. FLECHES DE CARROUSEL  (<= 999px)
   ============================================================= */
@media (max-width: 999px) {
    /* Les fleches, calees a -22px de part et d'autre, se posaient
       par-dessus les cartes. On les descend sous le carrousel,
       centrees : c'est le seul moyen de naviguer, le defilement se
       fait par transform et non par scroll natif. */
    html .soj-carousel-wrap { position: relative; padding-bottom: 58px; }
    html .soj-carousel-btn {
        top: auto;
        bottom: 0;
        transform: none;
    }
    html .soj-carousel-prev { left: calc(50% - 52px); right: auto; }
    html .soj-carousel-next { right: calc(50% - 52px); left: auto; }
}


/* ============================================================
   EN-TETE TELEPHONE — COTES DE LA MAQUETTE
   ------------------------------------------------------------
   Ce bloc est volontairement en fin de fichier : les regles de
   `max-width: 767px` plus haut fixent des boites de 44px pour les
   controles, et l'emportaient sur celles-ci a specificite egale.
   ============================================================ */
@media (max-width: 900px) {
    /* --- cotes relevees ------------------------------------------
       Relevees sur une planche de 876px en double densite, soit 438px
       reels : burger 42,5 - SOJ 60 - FR 35 - compte et panier 19 -
       58px entre SOJ et FR.

       Elles sont exprimees en proportion de la largeur d'ecran (vw) pour
       tenir la meme composition de 360 a 430px, avec des bornes pour ne
       pas devenir absurdes en approchant des 900px de la tablette. */
    html .soj-burger {
        display: flex; align-items: center;
        width: clamp(20px, 5.5vw, 24px);
        padding: 0; color: #111;
    }
    html .soj-burger span { display: none; }
    html .soj-burger svg {
        width: clamp(20px, 5.5vw, 24px);
        height: clamp(20px, 5.5vw, 24px);
        stroke-width: 2.2;
    }

    html .soj-header-account svg,
    html .soj-header-cart svg,
    html .soj-header-icon-img {
        width: clamp(18px, 4.35vw, 22px);
        height: auto;
    }

    /* --- taille visuelle et zone d'appui, decouplees -------------------
       La maquette demande des controles etroits : FR 35px, compte et
       panier 19px, 21px entre eux. Des boites de 44px de large les
       ecarteraient bien au-dela, et pousseraient le bloc jusque sur le
       logo centre.

       Les boites suivent donc la maquette, et un pseudo-element etend la
       surface tactile bien au-dela du dessin : le doigt dispose toujours
       de plus de 44px, sans qu'un seul pixel soit pris a la mise en page.
       C'est la technique prevue pour ce cas par le critere WCAG 2.5.5. */
    /* Le conteneur cumulait une largeur maximale de calc(100% - 32px) et
       un rembourrage de 16px : 64px d'inset au total, la ou la maquette
       n'en compte que 32. La ligne etait donc trop etroite et le bloc
       d'actions remontait vers le logo. */
    html .soj-header-inner { padding-left: 0; padding-right: 0; }

    html .soj-header-zone-right { gap: 21px; }

    html .soj-lang-switcher,
    html .soj-lang-btn,
    html .soj-header-account-wrap,
    html .soj-header-account,
    html .soj-header-cart {
        min-width: 0; width: auto;
        position: relative;
    }
    html .soj-lang-btn { padding: 0; font-size: 15px; letter-spacing: .3px; }

    html .soj-lang-btn::after,
    html .soj-header-account::after,
    html .soj-header-cart::after {
        content: ''; position: absolute; inset: -13px -11px;
    }

}