#coffee-footer-1{--bg:#17100c;--ink:#f0e6d6;--mut:#b39c84;--line:rgba(201,138,63,.2);--field:#fff8ee;--soft:rgba(240,230,214,.05);--accent:var(--btn-primary-light-background-color,#c98a3f);--accent-ink:var(--btn-primary-light-color,#ffffff)}#coffee-footer-1.dark,.dark #coffee-footer-1{--bg:#17100c;--ink:#f0e6d6;--mut:#b39c84;--line:rgba(201,138,63,.2);--field:#fff8ee;--soft:rgba(240,230,214,.05)}#coffee-footer-1.light,.light #coffee-footer-1{--bg:#f6efe1;--ink:#2a1c12;--mut:#7a6552;--line:rgba(42,28,18,.14);--field:#ffffff;--soft:rgba(42,28,18,.05)}#coffee-footer-1{position:relative;overflow:hidden;background-color:var(--bg);background-image:radial-gradient(90% 80% at 85% 0,color-mix(in srgb,var(--accent) 10%,transparent) 0,transparent 52%),radial-gradient(70% 90% at 4% 110%,rgba(122,74,36,.16) 0,transparent 55%);color:var(--ink);font-family:'Helvetica Neue',Arial,system-ui,sans-serif}#coffee-footer-1 .foot-mark{position:absolute;left:50%;bottom:-2%;transform:translateX(-50%);font-family:Georgia,'Times New Roman',serif;font-weight:700;font-size:clamp(90px,17vw,230px);line-height:.8;letter-spacing:.06em;color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--ink) 9%,transparent);pointer-events:none;white-space:nowrap;user-select:none}#coffee-footer-1 .foot-shell{position:relative;z-index:2;max-width:1240px;margin:0 auto;padding:0 26px}#coffee-footer-1 .foot-steam{display:flex;justify-content:center;color:color-mix(in srgb,var(--accent) 55%,transparent);margin-bottom:26px}#coffee-footer-1 .foot-top{display:grid;grid-template-columns:2fr 1fr 1fr;gap:44px 36px;align-items:start}#coffee-footer-1 .foot-word{margin:0 0 16px;font-family:Georgia,'Times New Roman',serif;font-size:26px;color:var(--ink);letter-spacing:.02em;font-weight:700}#coffee-footer-1 .foot-tag{margin:0 0 20px;font-size:14.5px;line-height:1.62;color:var(--mut);max-width:36ch}#coffee-footer-1 .foot-social{display:flex;gap:10px;padding:0;margin:0;list-style:none}#coffee-footer-1 .foot-social a{width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background-color:var(--soft);border:1px solid var(--line);color:var(--ink);text-decoration:none;transition:all .2s ease}#coffee-footer-1 .foot-social a svg{display:block}#coffee-footer-1 .foot-social a:hover{background-color:var(--accent);color:var(--accent-ink);border-color:var(--accent);transform:translateY(-2px)}#coffee-footer-1 .foot-col-title{margin:0 0 16px;font-size:15px;font-family:Georgia,'Times New Roman',serif;letter-spacing:.02em}#coffee-footer-1 .foot-col-title strong{font-weight:700;color:var(--ink)}#coffee-footer-1 .foot-links{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:11px}#coffee-footer-1 .foot-links a{text-decoration:none;color:var(--mut);font-size:14px;transition:color .2s ease,padding-left .2s ease}#coffee-footer-1 .foot-links a:hover{color:var(--accent);padding-left:4px}#coffee-footer-1 .foot-news-sub{margin:0 0 16px;font-size:14px;line-height:1.56;color:var(--mut);max-width:34ch}#coffee-footer-1 .foot-news-form{display:flex;gap:9px;max-width:420px;flex-wrap:wrap}#coffee-footer-1 .foot-news-input{flex:1 1 190px;height:48px;border:1px solid var(--line);border-radius:10px;background-color:var(--field);padding:0 15px;font-size:14px;color:#2a1c12;outline:none;transition:border-color .2s ease,box-shadow .2s ease}#coffee-footer-1 .foot-news-input::placeholder{color:#8a7a66}#coffee-footer-1 .foot-news-input:focus{border-color:#2a1c12;box-shadow:0 0 0 3px rgba(23,16,12,.14)}#coffee-footer-1 .foot-news-btn{height:48px;padding:0 24px;border-radius:10px;border:0;font-size:13.5px;font-weight:700;white-space:nowrap;flex:0 0 auto;cursor:pointer;transition:filter .2s ease,transform .2s ease}#coffee-footer-1 .foot-news-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}#coffee-footer-1 .foot-divider{height:1px;background-color:transparent;background-image:linear-gradient(90deg,transparent,var(--line) 18%,var(--line) 82%,transparent);margin:40px 0 24px}#coffee-footer-1 .foot-bottom{display:grid;grid-template-columns:1fr auto auto;gap:20px;align-items:center}#coffee-footer-1 .copyright-footer{margin:0;font-size:13px;color:var(--mut)}#coffee-footer-1 .copyright-footer a{color:var(--ink);text-decoration:none}#coffee-footer-1 .copyright-footer a:hover{color:var(--accent)}#coffee-footer-1 .foot-pay{display:flex;gap:9px;padding:0;margin:0;list-style:none;align-items:center;flex-wrap:wrap}#coffee-footer-1 .foot-pay svg{border-radius:4px}#coffee-footer-1 .foot-cl{display:flex;align-items:center;gap:10px}#coffee-footer-1 .foot-cl select{height:38px;border:1px solid var(--line);border-radius:8px;background-color:var(--soft);color:var(--ink);padding:0 30px 0 12px;font-size:13px;outline:none;cursor:pointer;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 11px center;transition:border-color .2s ease}#coffee-footer-1 .foot-cl select:hover,#coffee-footer-1 .foot-cl select:focus{border-color:var(--accent)}#coffee-footer-1 .foot-cl select option{background-color:#1c130d;color:var(--ink)}#coffee-footer-1.light .foot-cl select option,.light #coffee-footer-1 .foot-cl select option{background-color:#ffffff}#coffee-footer-1 .foot-cl .lang-btn{background:transparent;border:1px solid var(--line);border-radius:8px;padding:4px 8px;cursor:pointer}#coffee-footer-1 .foot-news{position:relative;grid-column:1 / -1;order:-1;background-color:var(--accent);background-image:linear-gradient(120deg,color-mix(in srgb,var(--accent) 82%,#2a1708) 0,var(--accent) 45%,color-mix(in srgb,var(--accent) 74%,#f6e2be) 100%);color:var(--accent-ink);border-radius:16px;padding:30px 34px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:14px;overflow:hidden;box-shadow:0 30px 60px -34px color-mix(in srgb,var(--accent) 60%,transparent)}#coffee-footer-1 .foot-news::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background-image:linear-gradient(90deg,transparent,#f6e2be 30%,#fff8ee 50%,#f6e2be 70%,transparent);opacity:.85;pointer-events:none}#coffee-footer-1 .foot-news .foot-col-title strong,#coffee-footer-1 .foot-news .foot-news-sub{color:var(--accent-ink)}#coffee-footer-1 .foot-news .foot-news-input{background-color:var(--field);border-color:rgba(23,16,12,.25);color:#2a1c12}#coffee-footer-1 .foot-news .foot-news-input::placeholder{color:#8a7a66}#coffee-footer-1 .foot-news .foot-news-btn{background-color:#17100c;background-image:linear-gradient(140deg,#2a1c12 0,#17100c 100%);color:#f0e6d6!important}#coffee-footer-1 .foot-news .foot-news-btn span{color:#f0e6d6!important}#coffee-footer-1 .foot-brand{grid-column:1}#coffee-footer-1 .default-logo img,#coffee-footer-1 img.default-logo,#coffee-footer-1 #navbar-brand img,#coffee-footer-1 #navbar-brand a img,#coffee-footer-1 #link-logo-footer img,#coffee-footer-1 .logo img,#coffee-footer-1 .mobile-logo img{max-height:52px;max-width:190px;width:auto;height:auto;object-fit:contain}.edit-sections #coffee-footer-1 [data-scroll-effect]{opacity:1 !important;transform:none !important;filter:none !important}@media(max-width:900px){#coffee-footer-1 .foot-top{grid-template-columns:1fr 1fr}#coffee-footer-1 .foot-bottom{grid-template-columns:1fr;justify-items:center;text-align:center;gap:16px}}@media(max-width:768px){#coffee-footer-1 [data-scroll-effect]{opacity:1 !important;transform:none !important;filter:none !important}}@media(max-width:560px){#coffee-footer-1 .foot-top{grid-template-columns:1fr;gap:34px}}@media (prefers-reduced-motion:reduce){#coffee-footer-1 [data-scroll-effect]{opacity:1 !important;transform:none !important;filter:none !important}#coffee-footer-1 .foot-social a,#coffee-footer-1 .foot-news-btn{transition:none}} /* [RITA-PAY 13/07] Le thème #footer-rita-kadiri rend les moyens de paiement en SVG .pay-chip SANS width/height ni aucune regle de cadrage (footer.css d'origine = ancien theme #coffee-footer-1, obsolete) -> VISA/Mastercard/cmi/UPI s'affichaient en pleine largeur (geants). On les cadre en chips propres. Fichier custom -> survit aux re-bakes du builder. Ancre .footer-payments (unique a ce footer). */ .footer-payments-wrap{text-align:center;margin-top:24px} .footer-payments-label{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-size:12.5px;letter-spacing:.02em;opacity:.72;margin:0 0 12px} .footer-payments{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin:0;padding:0} .footer-payments .pay-chip{display:inline-flex;align-items:center;justify-content:center;background:#fff;border-radius:8px;padding:6px 10px;height:34px;min-width:50px;box-shadow:0 2px 8px rgba(0,0,0,.14)} .footer-payments .pay-chip svg{height:20px;width:auto;max-width:46px;display:block} /* dv-footfix-20260721 responsive re-assert (auto, append-only) */ @media(max-width:900px){ #coffee-footer-1 .foot-top{ grid-template-columns:1fr 1fr; } #coffee-footer-1 .foot-bottom{ grid-template-columns:1fr; justify-items:center; text-align:center; gap:16px; } } @media(max-width:768px){ #coffee-footer-1 [data-scroll-effect]{ opacity:1 !important; transform:none !important; filter:none !important; } } @media(max-width:560px){ #coffee-footer-1 .foot-top{ grid-template-columns:1fr; gap:34px; } } @media (prefers-reduced-motion:reduce){ #coffee-footer-1 [data-scroll-effect]{ opacity:1 !important; transform:none !important; filter:none !important; } #coffee-footer-1 .foot-social a, #coffee-footer-1 .foot-news-btn{ transition:none; } } @media (max-width:900px){ #coffee-footer-1 .foot-news{ flex-direction:column; align-items:center; text-align:center; } #coffee-footer-1 .foot-news .foot-news-form{ margin-left:auto; margin-right:auto; } #coffee-footer-1 .foot-pay{ justify-content:center; } } @media (max-width:560px){ #coffee-footer-1 .foot-brand{ text-align:center; } #coffee-footer-1 .foot-brand .logo{ justify-content:center; } #coffee-footer-1 .foot-social{ justify-content:center; } #coffee-footer-1 .foot-col{ text-align:center; } } /* 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="coffee-footer-1"], [id^="coffee-footer-1--"]) :where(#link-logo-footer, .logo, .default-logo) :where(img){ width:auto !important; height:auto !important; object-fit:contain !important; object-position:center; } :where([id="coffee-footer-1"], [id^="coffee-footer-1--"]) :where(#link-logo-footer, .logo, .default-logo) :where(img){ max-height:52px; max-width:190px; } /* [FOOTER-MOBILE-FIX 2026-08-20] Le pied de page « partait dans tous les sens » sur mobile. CAUSE RACINE : `.row` porte la gouttière Bootstrap `margin-left/right:-30px`, normalement compensée par le padding des colonnes. Quand les `col-lg-*` s'empilent (<992px) la compensation disparaît mais PAS la marge négative => TOUT le pied de page glissait ~30px vers la gauche (logo, icônes sociales, titre « Horaires », bouton RDV : écarts -30/-40/-22px mesurés). S'y ajoutaient deux défauts d'alignement propres au mobile : - les icônes sociales sont dans un conteneur `display:flex` : `text-align:center` n'a AUCUN effet dessus, il faut `justify-content` — elles restaient donc collées à gauche ; - chaque lien de nav est `inline-flex` centré INDIVIDUELLEMENT : largeurs 63→154px => chaque chevron tombait à un x différent (effet escalier). On centre le BLOC et on aligne les items entre eux, ce qui aligne les chevrons. Borné à <=991px (breakpoint Bootstrap `lg` = celui où les colonnes s'empilent) : desktop intact. */ @media (max-width:991px){ #footer-rita-kadiri .row{ margin-left:0 !important; margin-right:0 !important; } #footer-rita-kadiri .footer-col{ width:100% !important; max-width:100% !important; flex:0 0 100% !important; margin-left:0 !important; margin-right:0 !important; padding-left:20px !important; padding-right:20px !important; text-align:center !important; } /* logo réellement centré (il était en display:inline dans une colonne décalée) */ #footer-rita-kadiri .footer-col > img{ display:block !important; margin-left:auto !important; margin-right:auto !important; } /* conteneurs flex de la colonne (icônes sociales) : sans effet sur les non-flex */ #footer-rita-kadiri .footer-col > div{ justify-content:center !important; } /* navigation : bloc centré, items alignés entre eux => chevrons alignés verticalement */ #footer-rita-kadiri .footer-col > ul{ width:-moz-fit-content !important; width:fit-content !important; margin-left:auto !important; margin-right:auto !important; padding-left:0 !important; text-align:left !important; } #footer-rita-kadiri .footer-col > ul li{ text-align:left !important; } #footer-rita-kadiri .footer-col > ul li a{ justify-content:flex-start !important; } /* bouton « Sur RDV uniquement » recentré */ #footer-rita-kadiri .reserver{ text-align:center !important; } } /* [FOOTER-MOBILE-FIX 2026-08-20 — suite] Résidus : certains ENFANTS des colonnes portent en plus leurs propres marges négatives, héritées du calage desktop (titre « Horaires » margin-left:-29px => centre décalé de 14px ; paragraphe de description margin-right:-75px => il débordait à right=415 pour un viewport de 390). On les neutralise sur mobile uniquement. Sélecteurs de type (spécificité 1,1,1) : ils ne touchent PAS les `> img` / `> ul` recentrés plus haut par `margin:auto`. */ @media (max-width:991px){ #footer-rita-kadiri .footer-col > h1, #footer-rita-kadiri .footer-col > h2, #footer-rita-kadiri .footer-col > h3, #footer-rita-kadiri .footer-col > h4, #footer-rita-kadiri .footer-col > h5, #footer-rita-kadiri .footer-col > h6, #footer-rita-kadiri .footer-col > p, #footer-rita-kadiri .footer-col > div{ margin-left:0 !important; margin-right:0 !important; max-width:100% !important; } } /* [FOOTER-MOBILE-FIX 2026-08-20 — suite 2] Blocs CONTACT : chaque bloc était `flex; justify-content: center`, donc l'icône se décalait selon la longueur du texte (téléphone court vs adresse sur 3 lignes) => les 3 pastilles tombaient à x=95 / 73 / 50, soit 45px d'écart, effet « en escalier » comme les chevrons. On leur donne une largeur COMMUNE centrée et on cale l'icône à gauche : les 3 pastilles s'alignent alors verticalement. `:has()` cible les seuls blocs contenant une icône Font Awesome (les icônes SOCIALES utilisent `icon-*` d'iconfont, elles gardent donc leur centrage). Si un navigateur ignore `:has()`, la règle est simplement sautée et on retombe sur le centrage précédent — pas de régression. */ @media (max-width:991px){ #footer-rita-kadiri .footer-col > div:has(i.fas), #footer-rita-kadiri .footer-col > div:has(i.fa-solid){ justify-content:flex-start !important; max-width:280px !important; margin-left:auto !important; margin-right:auto !important; text-align:left !important; } } /* [FOOTER-MOBILE-FIX 2026-08-20 — suite 3] Effet de bord de la règle `:has(i.fas)` ci-dessus : le bloc `.reserver` du bouton « Sur RDV uniquement » contient lui aussi une icône Font Awesome (fa-calendar-check) — il héritait donc du calage à gauche prévu pour les blocs contact et repartait à -12px du centre. On le ré-exclut explicitement. */ @media (max-width:991px){ #footer-rita-kadiri .footer-col > div.reserver, #footer-rita-kadiri .footer-col > div:has(> a.btn), #footer-rita-kadiri .footer-col > div:has(> a[href*="reservation"]){ justify-content:center !important; max-width:100% !important; text-align:center !important; } } /* [FOOTER-MOBILE-FIX 2026-08-20 — suite 4] `.reserver` portait un padding ASYMÉTRIQUE (padding-left:10px / padding-right:0) : le bouton, pourtant centré dans son conteneur, tombait donc 5px (la moitié) à droite du centre réel. On égalise sur mobile. */ @media (max-width:991px){ #footer-rita-kadiri .footer-col > div.reserver{ padding-left:0 !important; padding-right:0 !important; } } /* [FOOTER-MOBILE-FIX 2026-08-20 — suite 5] Lisibilité : « Paiement 100% sécurisé » était en #333 (gris foncé, couleur pensée pour un fond CLAIR) + opacity .72, posé sur le fond SOMBRE du pied de page => quasi illisible, sur mobile comme sur desktop. On l'éclaircit. Non borné en largeur : le défaut est identique aux deux tailles. */ #footer-rita-kadiri .footer-payments-label, #footer-rita-kadiri .footer-payments-label i{ color:rgba(255,255,255,.72) !important; opacity:1 !important; }