/* ============================================================
   ANSPACH — Fiche commerce (/shopping/<enseigne>/)
   Presentation a gauche, encart pratique colle a droite, puis les autres
   enseignes. Modele : « Page Commerce - Damart ». Partage par toutes les
   fiches, au-dessus du socle site.css.
   ============================================================ */

/* Ligne de categorie sous le titre du bandeau */
.phero-card .shop-meta { margin-top:14px; font:600 13px Figtree,sans-serif; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.75) }
@media (min-width:1024px) { .phero-card .shop-meta { margin-top:18px; font-size:14px } }

/* Deux colonnes : contenu et encart. L'encart reste visible au defilement
   sous le header colle. */
.fiche { display:grid; grid-template-columns:1fr; gap:40px }
@media (min-width:1024px) { .fiche { grid-template-columns:1fr 400px; gap:64px; align-items:start } }

.fiche-intro { display:flex; flex-direction:column; gap:24px; padding-bottom:32px; border-bottom:1px solid rgba(35,0,68,.14) }
.fiche-logo { flex:none; width:200px; height:120px; background:#F6F2F8; display:flex; align-items:center; justify-content:center; padding:20px }
.fiche-logo div { width:100%; height:100%; background-position:center; background-size:contain; background-repeat:no-repeat }
.fiche-logo .fiche-plain { display:flex; align-items:center; justify-content:center; font-family:'Bodoni Moda',serif; font-size:24px; line-height:1.1; font-weight:500; color:#230044; letter-spacing:-.02em; text-align:center }
@media (min-width:768px) { .fiche-intro { flex-direction:row; align-items:center; gap:32px; padding-bottom:40px } }

.fiche-about { padding-top:32px }
.fiche-about .h2 { font-size:36px }
.fiche-txt { margin-top:22px; font-size:16px; line-height:1.7; color:rgba(35,0,68,.8); text-wrap:pretty; display:flex; flex-direction:column; gap:16px; max-width:64ch }
.fiche-txt p { margin:0 }
@media (min-width:768px) { .fiche-about { padding-top:40px } .fiche-about .h2 { font-size:40px } .fiche-txt { margin-top:24px } }

.fiche-gallery { margin-top:40px; display:grid; grid-template-columns:1fr 1fr; gap:12px }
.fiche-gallery div { position:relative; aspect-ratio:4/3; overflow:hidden; background:#EFE4EE }
.fiche-gallery img { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; display:block }
@media (min-width:1024px) { .fiche-gallery { margin-top:56px } }

/* Encart pratique */
.fiche-aside { display:flex; flex-direction:column; gap:12px }
@media (min-width:1024px) { .fiche-aside { position:sticky; top:calc(var(--hdr) + 24px) } }
.card-dark { background:#230044; color:#fff; padding:32px 28px 36px }
.card-pink { background:#EFE4EE; color:#230044; padding:32px 28px 36px; display:flex; flex-direction:column; gap:24px }
@media (min-width:768px) { .card-dark, .card-pink { padding:36px 40px 40px } }
.card-dark .kicker { margin-bottom:18px }
.card-pink .kicker { margin-bottom:12px }
.hrows { display:flex; flex-direction:column; gap:10px; font:500 15px Figtree,sans-serif }
.hrow { display:flex; justify-content:space-between; gap:16px; padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,.16) }
.hrow:last-child { padding-bottom:0; border-bottom:0 }
.hrow b { font-weight:700 }
.hrow.off { color:rgba(255,255,255,.62) }
.card-txt { font-size:15px; line-height:1.7 }
.card-links { display:flex; flex-direction:column; gap:6px; font:600 15px Figtree,sans-serif }
.card-links a { color:#230044; word-break:break-all }
.fiche-actions { display:flex; flex-direction:column; gap:12px }
.fiche-actions .btn-dark { width:100%; padding:16px 28px }
.fiche-soc { display:grid; grid-template-columns:1fr 1fr; gap:12px }
.fiche-soc .btn { padding:13px 18px; font-size:14px; gap:10px }
/* Glyphe Instagram : meme SVG inline que le bouton « Suivez-nous » de l'accueil,
   masque colore par currentColor. */
.ico-ig { display:block; flex:none; width:18px; height:18px; background:currentColor;
          -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'%3E%3Crect x='3.1' y='3.1' width='17.8' height='17.8' rx='5.1'/%3E%3Ccircle cx='12' cy='12' r='4.25'/%3E%3Ccircle cx='16.9' cy='7.1' r='1.5' fill='%23000' stroke='none'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'%3E%3Crect x='3.1' y='3.1' width='17.8' height='17.8' rx='5.1'/%3E%3Ccircle cx='12' cy='12' r='4.25'/%3E%3Ccircle cx='16.9' cy='7.1' r='1.5' fill='%23000' stroke='none'/%3E%3C/svg%3E") center/contain no-repeat }
.ico-fb { display:flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; border:1.5px solid currentColor; font:700 11px Figtree,sans-serif; line-height:1 }

/* Autres enseignes */
.others { margin-top:var(--sec); border-top:1px solid rgba(35,0,68,.14) }
.others-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px 24px; padding:32px 0 24px }
.others-head .h2 { font-size:32px }
.others-all { font:700 14px Figtree,sans-serif; color:#230044; white-space:nowrap }
@media (min-width:768px) { .others-head { padding:40px 0 28px } .others-head .h2 { font-size:40px } }
.others-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px }
@media (min-width:1024px) { .others-grid { grid-template-columns:repeat(4,1fr) } }
.shop { position:relative; overflow:hidden; background:#F6F2F8; display:flex; flex-direction:column; padding:22px; min-height:200px;
        transition:background-color .3s ease, box-shadow .35s ease, transform .35s cubic-bezier(.22,.61,.36,1) }
@media (min-width:1024px) { .shop { min-height:0; aspect-ratio:1 } }
.shop:hover { background:#EFE4EE; color:inherit; transform:translateY(-3px); box-shadow:0 12px 30px rgba(35,0,68,.10) }
.shop-mark { flex:1; display:flex; align-items:center; justify-content:center; min-height:80px; padding:4px 4px 16px }
.shop-logo { width:80%; height:100%; min-height:64px; background-size:contain; background-position:center; background-repeat:no-repeat;
             transition:transform .5s cubic-bezier(.22,.61,.36,1) }
.shop:hover .shop-logo { transform:scale(1.06) }
.shop-plain { font-family:'Bodoni Moda',serif; font-size:22px; line-height:1.1; font-weight:500; color:#230044; letter-spacing:-.02em; text-align:center }
.shop-name { font:700 14px Figtree,sans-serif; letter-spacing:.01em; color:#230044 }
.shop-foot { margin-top:12px; padding-top:12px; border-top:1px solid rgba(35,0,68,.14); display:flex; align-items:baseline; justify-content:space-between; gap:10px }
.shop-cat { font:600 11px Figtree,sans-serif; letter-spacing:.1em; text-transform:uppercase; color:rgba(35,0,68,.55) }
.shop-link { font:700 12px Figtree,sans-serif; color:rgba(35,0,68,.7); white-space:nowrap }

@media (prefers-reduced-motion:reduce) {
  .shop:hover { transform:none }
  .shop:hover .shop-logo { transform:none }
}