#footer-list-social-rounded{}#footer-list-social-rounded{overflow:hidden}ul.text-list li{margin-bottom:-15px;padding:0;display:inline-block}footer .social-list{display:flex;justify-content:flex-start;flex-wrap:nowrap;margin-left:-15px}#footer-list-social-rounded-description-2{margin-left:30px}footer .social-list i{margin:8px 6px;font-size:20px;background-color:transparent;border-radius:50%;padding:10px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;transition:background-color 0.35s,color 0.35s}footer .social-list i:hover{background-color:#fff;color:#000}@media (min-width:1000px){footer .line{margin-right:72px;min-width:15px;border:1px solid}footer .social-list i{/margin:8px 6px;/ font-size:20px;padding:22px;width:40px;height:40px}}@media (max-width:1000px){footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:nowrap}footer .line{width:100px;border:1px solid}footer .social-list{margin-left:180px}footer .social-list i{width:40px;height:40px}footer .social-list i{font-size:22px;padding:10px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;transition:background-color 0.35s,color 0.35s}}@media (max-width:768px){footer .social-list{display:flex;justify-content:flex-start;flex-wrap:nowrap;margin-left:45px}footer .social-list i{width:25px;height:25px}footer .social-list i{font-size:16px;padding:10px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;transition:background-color 0.35s,color 0.35s}#footer-list-social-rounded-description-2{margin-left:0;padding:10px;font-size:30px;color:white !important}}footer .toolbar > div{display:inline-block;position:relative;width:44px;height:44px;margin-left:6px;transition:background-color 0.35s;border:1px solid #e1e7ec;border-radius:50%;color:#606975;font-size:17px;cursor:pointer;vertical-align:middle;text-align:center;text-decoration:none;line-height:2.2}footer .toolbar > div > a{display:inline-block;vertical-align:middle;height:100%;font-size:14px;line-height:3}#footer-column-1 li,#footer-column-2 li,#footer-column-3 li{display:block !important;margin-bottom:10px;width:100% !important}#footer-column-1 li a,#footer-column-2 li a,#footer-column-3 li a{display:block !important;width:100% !important;text-align:left !important}#footer-column-1,#footer-column-2,#footer-column-3{padding-left:0 !important;list-style-type:none !important}#currencySelect{padding:5px;background-color:#ffe4c400;border:none;border-radius:7px;text-align:center;max-width:200px;margin:0 auto;color:#d7d7d7}#currencySelect option{background-color:#f8f9fa;color:#333;border-radius:10px}

/* FIX 2026-07-28-brandclamp — le logo injecté (/get-logo-menu, /get-menu-footer-column) arrive avec un
   style INLINE (width:Npx;height:auto) et sans garantie de ratio : seul !important le
   neutralise. Le PLAFOND voyage avec le clamp car un store baké peut être une
   génération de design en retard et ne pas avoir la règle du catalogue (constaté sur
   floraplus : logo footer rendu 1600x1600). Il est posé en :where() = spécificité NULLE,
   donc toute règle réelle de la section (y compris responsive) le remplace.
   Racines tolérantes au suffixe --N. Voir navigations/NAV-SPEC.md §4. */
:where([id="footer-list-social-rounded"], [id^="footer-list-social-rounded--"]) :where(#link-logo-footer, .logo, .default-logo) :where(img){
  width:auto !important;
  height:auto !important;
  object-fit:contain !important;
  object-position:center;
}
:where([id="footer-list-social-rounded"], [id^="footer-list-social-rounded--"]) :where(#link-logo-footer, .logo, .default-logo) :where(img){
  max-height:52px;
  max-width:190px;
}

/* ===== FIX 2026-08-23-footer-responsive — footer-list-social-rounded =====
   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 : 52x190 px (mobile 48x170) — minimum entre le contrat plateforme et le plafond déjà voulu par ce design.

   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-social-rounded, [id^="footer-list-social-rounded--"]):is(#footer-list-social-rounded, [id^="footer-list-social-rounded--"]) :is(#link-logo-footer, .logo, .default-logo, .mobile-logo, .logo-footer) img, footer:is(#footer-list-social-rounded, [id^="footer-list-social-rounded--"]):is(#footer-list-social-rounded, [id^="footer-list-social-rounded--"]) img#logo-footer, footer:is(#footer-list-social-rounded, [id^="footer-list-social-rounded--"]):is(#footer-list-social-rounded, [id^="footer-list-social-rounded--"]) img#logo-nav {
  max-height: 52px !important;
  max-width: 190px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center;
}
footer:is(#footer-list-social-rounded, [id^="footer-list-social-rounded--"]):is(#footer-list-social-rounded, [id^="footer-list-social-rounded--"]) :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-social-rounded, [id^="footer-list-social-rounded--"]):is(#footer-list-social-rounded, [id^="footer-list-social-rounded--"]), footer:is(#footer-list-social-rounded, [id^="footer-list-social-rounded--"]):is(#footer-list-social-rounded, [id^="footer-list-social-rounded--"]) :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-social-rounded, [id^="footer-list-social-rounded--"]):is(#footer-list-social-rounded, [id^="footer-list-social-rounded--"]) :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-social-rounded, [id^="footer-list-social-rounded--"]):is(#footer-list-social-rounded, [id^="footer-list-social-rounded--"]) :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-social-rounded, [id^="footer-list-social-rounded--"]):is(#footer-list-social-rounded, [id^="footer-list-social-rounded--"]) :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-social-rounded, [id^="footer-list-social-rounded--"]):is(#footer-list-social-rounded, [id^="footer-list-social-rounded--"]) :is(ul, ol) > li { width: auto !important; }

  /* 2.3 — blocs de largeur contrainte : recentrés dans leur colonne. */
  footer:is(#footer-list-social-rounded, [id^="footer-list-social-rounded--"]):is(#footer-list-social-rounded, [id^="footer-list-social-rounded--"]) :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-social-rounded, [id^="footer-list-social-rounded--"]):is(#footer-list-social-rounded, [id^="footer-list-social-rounded--"]) :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-social-rounded, [id^="footer-list-social-rounded--"]):is(#footer-list-social-rounded, [id^="footer-list-social-rounded--"]) :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-social-rounded, [id^="footer-list-social-rounded--"]):is(#footer-list-social-rounded, [id^="footer-list-social-rounded--"]) :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-social-rounded, [id^="footer-list-social-rounded--"]):is(#footer-list-social-rounded, [id^="footer-list-social-rounded--"]) :is([class*="bottom"], [class*="-bot"], .row-bottom) {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
  }
  footer:is(#footer-list-social-rounded, [id^="footer-list-social-rounded--"]):is(#footer-list-social-rounded, [id^="footer-list-social-rounded--"]) :is(.footer-currency-lang, .currency-lang-container, [class*="currency"]) {
    gap: 10px;
    flex-wrap: wrap;
  }
  footer:is(#footer-list-social-rounded, [id^="footer-list-social-rounded--"]):is(#footer-list-social-rounded, [id^="footer-list-social-rounded--"]) :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-social-rounded, [id^="footer-list-social-rounded--"]):is(#footer-list-social-rounded, [id^="footer-list-social-rounded--"]) :is(#link-logo-footer, .logo, .default-logo, .mobile-logo, .logo-footer) img, footer:is(#footer-list-social-rounded, [id^="footer-list-social-rounded--"]):is(#footer-list-social-rounded, [id^="footer-list-social-rounded--"]) img#logo-footer, footer:is(#footer-list-social-rounded, [id^="footer-list-social-rounded--"]):is(#footer-list-social-rounded, [id^="footer-list-social-rounded--"]) 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-social-rounded, [id^="footer-list-social-rounded--"]):is(#footer-list-social-rounded, [id^="footer-list-social-rounded--"]) :is(.container, .container-fluid) {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  footer:is(#footer-list-social-rounded, [id^="footer-list-social-rounded--"]):is(#footer-list-social-rounded, [id^="footer-list-social-rounded--"]) .row { margin-left: 0 !important; margin-right: 0 !important; }
}

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