footer .logo .default-logo{display:inline-block}footer img#logo-footer{max-width:150px;max-height:100px}footer .logo .mobile-logo{display:none}footer .logo .sticky-logo{display:none}footer .logo .sticky-mobile-logo{display:none}footer .is-sticky .logo .default-logo{display:none}footer .is-sticky .logo .sticky-logo{display:inline-block}footer.text-right{direction:rtl;.text-list>*,.text-icon-list>*{text-align:right}}@media(min-width:769px){footer.text-right .row{display:flex}}@media only screen and (max-width:1399px){footer .logo .default-logo{display:none}footer .logo .mobile-logo{display:block}footer .is-sticky .logo .mobile-logo{display:none}}footer .logo-footer{max-width:150px;max-height:90px}footer .social-list1 i{margin:8px 6px;min-width:15px;font-size:20px}footer .logo-footer{max-width:150px;max-height:90px;width:100%}footer .footer-currency-lang{display:flex;justify-content:flex-end;align-items:center;gap:15px;flex:1;min-width:200px}footer .parent-currency-footer{margin-right:0}footer .parent-currency-footer .form-control{appearance:none;-webkit-appearance:none;-moz-appearance:none;background:transparent url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") no-repeat;background-position:right 10px center;background-size:14px;border:none;border-radius:20px;padding:8px 32px 8px 12px;font-size:14px;color:white;cursor:pointer;transition:all 0.3s ease;box-shadow:0 2px 4px rgba(0,0,0,0.05);height:auto;min-width:140px}footer .lang-dropdown-footer-choice-lang{display:inline-block;position:relative}footer .lang-dropdown-footer-choice-lang .lang-btn{background:transparent;border:none;border-radius:12px;padding:8px 12px;display:flex;align-items:center;gap:8px;transition:all 0.3s ease;font-size:14px;color:#333;box-shadow:0 2px 4px rgba(0,0,0,0.05)}footer .lang-dropdown-footer-choice-lang .lang-btn img{width:24px;height:24px;border-radius:50%}footer .lang-dropdown-footer-choice-lang .lang-menu{position:absolute;bottom:100% !important;top:auto !important;margin-bottom:8px;border:1px solid #e1e7ec;border-radius:8px;padding:8px 0;background:#fff;box-shadow:0 4px 12px rgba(0,0,0,0.1);min-width:160px;transform-origin:bottom center;transform:scaleY(0.9);transition:all 0.2s ease}footer .lang-dropdown-footer-choice-lang .lang-menu li{list-style:none;padding:8px 16px;margin:0;transition:background 0.2s}footer .lang-dropdown-footer-choice-lang .lang-menu li a{text-decoration:none;color:#333!important;display:flex;align-items:center;gap:8px}footer .lang-dropdown-footer-choice-lang .lang-menu li:hover{transform:translateX(4px);background-color:rgba(59,130,246,0.1) !important}footer .lang-dropdown-footer-choice-lang .lang-menu img{width:20px;height:20px;border-radius:50%}@media (max-width:991px){footer .footer-currency-lang{flex-direction:row;justify-content:center;width:100%}footer .lang-dropdown-footer-choice-lang .lang-menu{right:auto;left:50%;transform:translateX(-50%)}}footer #footer-list-text .col-md-12 > .row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between}footer #footer-list-text #noai{flex:1;min-width:200px}footer #footer-list-text .social-list.text-list{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;padding:0;margin:0}footer #footer-list-text .social-list.text-list li{list-style:none;margin:0}footer #currencySelect option{background-color:#f8f9fa;color:#333}footer #footer-list-text .footer-currency-lang{display:flex;justify-content:flex-end;align-items:center;gap:15px}@media (max-width:991px){footer #footer-list-text .col-md-12 > .row{flex-direction:column;text-align:center}footer #footer-list-text #noai{width:100%;text-align:center;margin-bottom:20px}footer #footer-list-text .social-list.text-list{justify-content:center;margin-bottom:20px}footer #footer-list-text .footer-currency-lang{justify-content:center;width:100%}}

/* ===== FIX 2026-07-30-uxpass-surfaces — passe qualité UI/UX (Apple HIG · Material · WCAG) ===== */

/* 1. iOS ZOOME la page si un champ fait moins de 16px. Le 14px vient de Bootstrap
      (.form-control) et de body, hérités du CSS partagé : on le neutralise ici, et
      seulement en mobile — le 14px du bureau est un choix de design. */
@media (max-width:1025px){
  [id="footer-list-text"] input[type=text], [id="footer-list-text"] input[type=search], [id="footer-list-text"] input:not([type]), [id="footer-list-text"] input[type=email], [id="footer-list-text"] input[type=tel], [id="footer-list-text"] input[type=number], [id="footer-list-text"] input[type=password], [id="footer-list-text"] select, [id="footer-list-text"] textarea, [id^="footer-list-text--"] input[type=text], [id^="footer-list-text--"] input[type=search], [id^="footer-list-text--"] input:not([type]), [id^="footer-list-text--"] input[type=email], [id^="footer-list-text--"] input[type=tel], [id^="footer-list-text--"] input[type=number], [id^="footer-list-text--"] input[type=password], [id^="footer-list-text--"] select, [id^="footer-list-text--"] textarea { font-size:16px !important; }
}

/* 2. Cibles tactiles 44×44 (Apple HIG). Recouvrement centré : l'icône garde EXACTEMENT sa
      taille dessinée, seule la zone cliquable grandit — rien ne change visuellement.
      Mesuré avant : de 18×18 (fermeture du tiroir) à 42×42. */
@media (max-width:1025px){
  [id="footer-list-text"] .social-icon, [id="footer-list-text"] .soc-ico, [id="footer-list-text"] .share-btn, [id="footer-list-text"] .foot-ico, [id="footer-list-text"] .payment-ico, [id="footer-list-text"] .filter-toggle, [id="footer-list-text"] .sort-toggle, [id="footer-list-text"] .clear-btn, [id^="footer-list-text--"] .social-icon, [id^="footer-list-text--"] .soc-ico, [id^="footer-list-text--"] .share-btn, [id^="footer-list-text--"] .foot-ico, [id^="footer-list-text--"] .payment-ico, [id^="footer-list-text--"] .filter-toggle, [id^="footer-list-text--"] .sort-toggle, [id^="footer-list-text--"] .clear-btn { position:relative; }
  [id="footer-list-text"] .social-icon::after, [id="footer-list-text"] .soc-ico::after, [id="footer-list-text"] .share-btn::after, [id="footer-list-text"] .foot-ico::after, [id="footer-list-text"] .payment-ico::after, [id="footer-list-text"] .filter-toggle::after, [id="footer-list-text"] .sort-toggle::after, [id="footer-list-text"] .clear-btn::after, [id^="footer-list-text--"] .social-icon::after, [id^="footer-list-text--"] .soc-ico::after, [id^="footer-list-text--"] .share-btn::after, [id^="footer-list-text--"] .foot-ico::after, [id^="footer-list-text--"] .payment-ico::after, [id^="footer-list-text--"] .filter-toggle::after, [id^="footer-list-text--"] .sort-toggle::after, [id^="footer-list-text--"] .clear-btn::after {
    content:""; position:absolute; top:50%; left:50%;
    width:max(44px,100%); height:max(44px,100%);
    transform:translate(-50%,-50%);
    background:transparent; border:0; pointer-events:auto;
  }
}

/* 3. Anneau de focus au clavier — WCAG 2.4.7 (aucun anneau visible sur 62 navs sur 64).
      `:focus-visible` et PAS `:focus` : invisible à la souris, présent au clavier.
      `currentColor` suit tout seul la couleur de marque et le thème sombre. */
#footer-list-text a:focus-visible, #footer-list-text button:focus-visible, #footer-list-text input:focus-visible, #footer-list-text select:focus-visible, #footer-list-text textarea:focus-visible, #footer-list-text summary:focus-visible, #footer-list-text [tabindex]:focus-visible, #footer-list-text [role=button]:focus-visible, #footer-list-text label[for]:focus-visible, [id^="footer-list-text--"] a:focus-visible, [id^="footer-list-text--"] button:focus-visible, [id^="footer-list-text--"] input:focus-visible, [id^="footer-list-text--"] select:focus-visible, [id^="footer-list-text--"] textarea:focus-visible, [id^="footer-list-text--"] summary:focus-visible, [id^="footer-list-text--"] [tabindex]:focus-visible, [id^="footer-list-text--"] [role=button]:focus-visible, [id^="footer-list-text--"] label[for]:focus-visible {
  outline:2px solid currentColor !important;
  outline-offset:2px !important;
  border-radius:3px;
}

/* 4. Le curseur doit dire « cliquable » (73 éléments ne le disaient pas). */
[id="footer-list-text"] a, [id="footer-list-text"] button, [id="footer-list-text"] .cart, [id="footer-list-text"] .x-toggle, [id="footer-list-text"] .navbar-toggle, [id="footer-list-text"] [onclick], [id^="footer-list-text--"] a, [id^="footer-list-text--"] button, [id^="footer-list-text--"] .cart, [id^="footer-list-text--"] .x-toggle, [id^="footer-list-text--"] .navbar-toggle, [id^="footer-list-text--"] [onclick] { cursor:pointer; }

/* ===== FIX 2026-08-23-footer-responsive — footer-list-logo-social =====
   Revue responsive du pied de page (mobile + tablette) et plafond de l'espace logo.

   1. LOGO — il est injecté au RUNTIME par utils/section-js/footers.js (/get-menu-footer-column)
      sous la forme `<div class="logo pl-20 …"><a class="default-logo"><img id="logo-footer">`,
      SANS aucune dimension. Un PNG carré de 1024 px se rendait donc à sa taille naturelle, ou
      au plafond hérité d'une règle NON scopée du CSS partagé (`footer img#logo-footer{…100px}`,
      `footer .default-logo img{…150px; object-fit:cover}`) : marque démesurée qui chevauche les
      colonnes voisines, et recadrée par `cover`. Le plafond est posé ici, SCOPÉ à la section et
      valable à tous les viewports, avec object-fit:contain — un logo ne se recadre jamais.
      Plafond retenu : 56x200 px (mobile 48x170) — contrat plateforme (ce design ne déclarait aucun plafond scopé).

   2. CENTRAGE — sous 992 px les colonnes s'empilent (ou se réduisent) et le pied de page
      mélangeait les alignements : titres à gauche (hérités de `class="text-left"`), listes
      centrées par la règle globale QA-FIXES-20260710 (≤768 px seulement), sélecteurs
      devise/langue, logo et rangées sociales restés à gauche. L'alignement mixte est le
      défaut n°1 du rapport client.
      Ici : UN SEUL alignement, centré, de 0 à 991 px.

   Bloc ADDITIF et borné : hors le plafond du logo (voulu à tous les viewports), tout est sous
   media-query — le rendu bureau n'est pas touché. Les !important sont assumés : cette couche
   passe après un CSS hérité qui pose lui-même des `text-align:left` non scopés, et après des
   règles globales déjà en !important (QA-FIXES-20260710). */

/* 1. Plafond de l'espace logo — tous viewports. */
footer:is(#footer-list-logo-social, [id^="footer-list-logo-social--"]):is(#footer-list-logo-social, [id^="footer-list-logo-social--"]) :is(#link-logo-footer, .logo, .default-logo, .mobile-logo, .logo-footer) img, footer:is(#footer-list-logo-social, [id^="footer-list-logo-social--"]):is(#footer-list-logo-social, [id^="footer-list-logo-social--"]) img#logo-footer, footer:is(#footer-list-logo-social, [id^="footer-list-logo-social--"]):is(#footer-list-logo-social, [id^="footer-list-logo-social--"]) img#logo-nav {
  max-height: 56px !important;
  max-width: 200px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center;
}
footer:is(#footer-list-logo-social, [id^="footer-list-logo-social--"]):is(#footer-list-logo-social, [id^="footer-list-logo-social--"]) :is(#link-logo-footer, .logo, .default-logo, .mobile-logo, .logo-footer) { max-width: 100%; }

@media (max-width: 991px) {
  /* 2.1 — un seul alignement pour tout le pied de page (champs de saisie exclus :
     un placeholder centré se lit mal et n'est pas la convention). */
  footer:is(#footer-list-logo-social, [id^="footer-list-logo-social--"]):is(#footer-list-logo-social, [id^="footer-list-logo-social--"]), footer:is(#footer-list-logo-social, [id^="footer-list-logo-social--"]):is(#footer-list-logo-social, [id^="footer-list-logo-social--"]) :not(input):not(textarea):not(select):not(option):not(optgroup) {
    text-align: center !important;
  }

  /* 2.2 — rangées en flex/grille : le text-align ne suffit pas, on recentre les items. */
  footer:is(#footer-list-logo-social, [id^="footer-list-logo-social--"]):is(#footer-list-logo-social, [id^="footer-list-logo-social--"]) :is(.row, [class*="col-"], ul, ol, form, .form-inline, .input-group, .logo, #link-logo-footer, .default-logo, [class*="social"], [class*="pay"], [class*="share"], [class*="lang"], [class*="curr"], [class*="foot"], [class*="bottom"], [class*="news"], [class*="subscribe"], [class*="grid"], [class*="links"], [class*="list"]) {
    justify-content: center !important;
  }

  /* 2.2b — dans un conteneur `flex-direction:column`, c'est align-items qui gouverne
     l'axe HORIZONTAL : un `justify-content` n'y fait rien. Sans cette règle, un bas de
     page en colonne avec `align-items:flex-start` garde copyright, paiements et devise
     collés à gauche alors que leur texte, lui, est centré (défaut le plus visible). */
  footer:is(#footer-list-logo-social, [id^="footer-list-logo-social--"]):is(#footer-list-logo-social, [id^="footer-list-logo-social--"]) :is(ul, ol, [class*="social"], [class*="pay"], [class*="share"], [class*="bottom"], [class*="-bot"]) {
    align-items: center !important;
  }

  /* 2.2b-bis — contrepartie : ce qui doit rester pleine largeur (formulaire, séparateur)
     ne doit pas être rétréci à son contenu par le align-items ci-dessus. Leur propre
     max-width et les marges auto du 2.3 continuent de les centrer. */
  footer:is(#footer-list-logo-social, [id^="footer-list-logo-social--"]):is(#footer-list-logo-social, [id^="footer-list-logo-social--"]) :is(form, .input-group, .form-inline, hr) {
    align-self: stretch !important;
  }

  /* 2.2c — un <li> à `width:100%` PLUS des marges latérales déborde de sa liste : le
     texte se centre alors sur une boîte décalée (constaté +15 px sur les colonnes de
     liens). En largeur auto la boîte redevient symétrique, marges conservées. */
  footer:is(#footer-list-logo-social, [id^="footer-list-logo-social--"]):is(#footer-list-logo-social, [id^="footer-list-logo-social--"]) :is(ul, ol) > li { width: auto !important; }

  /* 2.3 — blocs de largeur contrainte : recentrés dans leur colonne. */
  footer:is(#footer-list-logo-social, [id^="footer-list-logo-social--"]):is(#footer-list-logo-social, [id^="footer-list-logo-social--"]) :is(#link-logo-footer, .logo, .default-logo, .logo-footer, form, p, img, .social-list, .desc-text, [class*="news"], [class*="subscribe"], [class*="tagline"], [class*="blurb"], [class*="intro"]) {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* 2.4 — le conteneur du logo injecté porte `pl-20` : sans ça il est décalé de 20 px
     alors que tout le reste est centré. */
  footer:is(#footer-list-logo-social, [id^="footer-list-logo-social--"]):is(#footer-list-logo-social, [id^="footer-list-logo-social--"]) :is(.logo, #link-logo-footer) {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
  }

  /* 2.5 — sous-lignes décoratives des titres : recentrées avec leur titre. */
  footer:is(#footer-list-logo-social, [id^="footer-list-logo-social--"]):is(#footer-list-logo-social, [id^="footer-list-logo-social--"]) :is(h1, h2, h3, h4, h5, h6, strong, [class*="title"], [class*="head"], [class*="kicker"], [class*="eyebrow"], [class*="label"], [class*="rule"])::after,
  footer:is(#footer-list-logo-social, [id^="footer-list-logo-social--"]):is(#footer-list-logo-social, [id^="footer-list-logo-social--"]) :is(h1, h2, h3, h4, h5, h6, strong, [class*="title"], [class*="head"], [class*="kicker"], [class*="eyebrow"], [class*="label"], [class*="rule"])::before {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* 2.6 — barre du bas (copyright | paiements | devise+langue). Deux défauts récurrents :
     (a) en grille 2 colonnes elle laisse le copyright à gauche et le sélecteur collé au
     bord droit ; (b) la marge droite de .parent-currency-footer décale la paire
     devise+langue de 10 px, et davantage quand la boutique n'a qu'une langue (le bouton
     drapeau est alors masqué et seule la marge subsiste). Une colonne centrée + un `gap`
     porté par la rangée règlent les deux. */
  footer:is(#footer-list-logo-social, [id^="footer-list-logo-social--"]):is(#footer-list-logo-social, [id^="footer-list-logo-social--"]) :is([class*="bottom"], [class*="-bot"], .row-bottom) {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
  }
  footer:is(#footer-list-logo-social, [id^="footer-list-logo-social--"]):is(#footer-list-logo-social, [id^="footer-list-logo-social--"]) :is(.footer-currency-lang, .currency-lang-container, [class*="currency"]) {
    gap: 10px;
    flex-wrap: wrap;
  }
  footer:is(#footer-list-logo-social, [id^="footer-list-logo-social--"]):is(#footer-list-logo-social, [id^="footer-list-logo-social--"]) :is(.parent-currency-footer, .select-f, .lang-dropdown-footer-choice-lang) {
    margin-left: 0 !important;
    margin-right: 0 !important;
    float: none !important;
  }
}

@media (max-width: 767px) {
  /* 3.1 — plafond réduit : sur 390 px de large un logo de 200 px mange l'écran. */
  footer:is(#footer-list-logo-social, [id^="footer-list-logo-social--"]):is(#footer-list-logo-social, [id^="footer-list-logo-social--"]) :is(#link-logo-footer, .logo, .default-logo, .mobile-logo, .logo-footer) img, footer:is(#footer-list-logo-social, [id^="footer-list-logo-social--"]):is(#footer-list-logo-social, [id^="footer-list-logo-social--"]) img#logo-footer, footer:is(#footer-list-logo-social, [id^="footer-list-logo-social--"]):is(#footer-list-logo-social, [id^="footer-list-logo-social--"]) img#logo-nav {
    max-height: 48px !important;
    max-width: 170px !important;
  }

  /* 3.2 — gouttière : aucun texte ne doit toucher le bord de l'écran. */
  footer:is(#footer-list-logo-social, [id^="footer-list-logo-social--"]):is(#footer-list-logo-social, [id^="footer-list-logo-social--"]) :is(.container, .container-fluid) {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  footer:is(#footer-list-logo-social, [id^="footer-list-logo-social--"]):is(#footer-list-logo-social, [id^="footer-list-logo-social--"]) .row { margin-left: 0 !important; margin-right: 0 !important; }
}

/* 5. Rangée de colonnes de liens TROP ÉTROITE entre 768 et 1199 px.
   Mesuré au rendu : dans quatre colonnes à 25 %, les libellés courts
   ("Order Tracking", "Purchase History", "Shipping Information") et, à 1024 px,
   le titre de colonne lui-même se cassent sur DEUX lignes — le pied de page se lit
   en escalier. On repasse la rangée à DEUX colonnes sur cette plage : chacune
   double de largeur et plus rien ne se casse. Sous 768 px tout est déjà empilé,
   au-delà de 1199 px la grille du design a la place. */
@media (min-width: 768px) and (max-width: 1199px) {
  /* .row : 4 colonnes, 6 libelles casses */
  footer:is(#footer-list-logo-social, [id^="footer-list-logo-social--"]):is(#footer-list-logo-social, [id^="footer-list-logo-social--"]) .row > .col-sm-3 {
    width: 50% !important;
    margin-bottom: 32px !important;
  }
  footer:is(#footer-list-logo-social, [id^="footer-list-logo-social--"]):is(#footer-list-logo-social, [id^="footer-list-logo-social--"]) .row > .col-sm-3:nth-of-type(2n+1) {
    clear: left !important;
  }
}

/* ===== /FIX 2026-08-23-footer-responsive ===== */

/* ===== FIX 2026-08-23-footer-responsive-store — ecommerce4_devaito_com =====
   Complement mesure sur le pied de page BAKE de cette demo (balisage anterieur au
   catalogue actuel). */
@media (max-width: 991px) {
}
/* .row : 4 colonnes, 6 libelles casses */
@media (min-width: 768px) and (max-width: 1199px) {
  footer:is(#footer-list-logo-social, [id^="footer-list-logo-social--"]):is(#footer-list-logo-social, [id^="footer-list-logo-social--"]) .row > .col-sm-3 {
    width: 50% !important;
    margin-bottom: 32px !important;
  }
  footer:is(#footer-list-logo-social, [id^="footer-list-logo-social--"]):is(#footer-list-logo-social, [id^="footer-list-logo-social--"]) .row > .col-sm-3:nth-of-type(2n+1) {
    clear: left !important;
  }
}
/* ===== /FIX 2026-08-23-footer-responsive-store ===== */
