/* style.css — Site Cigale des Mers
   Nuit de criée : photos sombres plein cadre, ardoise bleutée du logo, corail de la cigale en seul accent. */
:root {
 color-scheme: dark;
 --nuit: #0d1619; --ardoise: #16242a; --ardoise-2: #1f3138;
 --ecume: #eef1ef; --brume: #9db0b5; --corail: #e8603c; --glace: #cfe0e2;
 --titre: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
 --texte: "Karla", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } }
body { margin: 0; background: var(--nuit); color: var(--ecume); font-family: var(--texte); font-size: 17px; line-height: 1.6; }
img { max-width: 100%; display: block; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--corail); outline-offset: 3px; }
.cadre { max-width: 1160px; margin: 0 auto; padding-inline: 20px; }
h1, h2, h3 { font-family: var(--titre); font-stretch: 78%; text-transform: uppercase; line-height: 0.98; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(2.1rem, 5.5vw, 3.6rem); font-weight: 850; }
h3 { font-size: 1.45rem; font-weight: 800; }
p { margin: 0; }
.surtitre { font-family: var(--titre); font-stretch: 90%; font-weight: 700; font-size: 0.82rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--corail); margin: 0 0 14px; }
.doux { color: var(--brume); }

.annonce { background: var(--corail); color: #1a0d08; font-weight: 700; text-align: center; padding: 9px 16px; font-size: 0.98rem; }

header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; background: rgba(13, 22, 25, 0.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--ardoise-2); }
.entete { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 12px; }
.marque { display: flex; align-items: baseline; gap: 10px; text-decoration: none; }
.marque b { font-family: var(--titre); font-stretch: 75%; font-weight: 900; font-size: 1.5rem; letter-spacing: 0.02em; color: var(--glace); }
.marque span { font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--corail); font-weight: 700; }
nav { display: flex; gap: 22px; flex-wrap: wrap; }
nav a { text-decoration: none; font-weight: 600; font-size: 0.95rem; color: var(--brume); }
nav a:hover { color: var(--ecume); }
@media (max-width: 860px) { nav { display: none; } .marque span { display: none; } }
.bouton { display: inline-block; text-decoration: none; font-family: var(--titre); font-stretch: 85%; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.95rem; padding: 14px 22px; border-radius: 2px; border: 2px solid var(--corail); transition: background .2s, color .2s; }
.bouton.plein { background: var(--corail); color: #1a0d08; }
.bouton.plein:hover { background: transparent; color: var(--corail); }
.bouton.vide { color: var(--ecume); border-color: var(--ecume); }
.bouton.vide:hover { background: var(--ecume); color: var(--nuit); }

.ouverture { position: relative; min-height: min(78vh, 720px); display: grid; align-items: end; overflow: hidden; }
.ouverture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; }
.ouverture::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13,22,25,.92) 0%, rgba(13,22,25,.55) 45%, rgba(13,22,25,.05) 75%), linear-gradient(0deg, rgba(13,22,25,1) 0%, rgba(13,22,25,0) 35%); }
.ouverture .cadre { position: relative; z-index: 1; padding-block: 120px 64px; width: 100%; }
.ouverture h1 { font-size: clamp(3rem, 9.5vw, 7.2rem); font-weight: 900; max-width: 11ch; }
.ouverture h1 em { font-style: normal; color: var(--corail); }
.chapeau { max-width: 46ch; margin: 22px 0 30px !important; font-size: 1.12rem; color: var(--glace); }
.actions { display: flex; gap: 12px; flex-wrap: wrap; }

.infos-pratiques { background: #2a1a14; border-block: 1px solid #5a2e1f; }
.infos-pratiques .cadre { padding-block: 12px; display: grid; gap: 4px; color: #ffd9cc; }

.arrivage { border-block: 1px solid var(--ardoise-2); background: var(--ardoise); }
.arrivage .cadre { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 28px; padding-block: 30px; align-items: start; }
.arrivage h2 { font-size: 1.9rem; }
.date-arrivage { color: var(--glace); margin-top: 8px !important; font-weight: 600; text-transform: capitalize; }
.ardoise-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0 28px; list-style: none; margin: 0; padding: 0; }
.ardoise-liste li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--ardoise-2); }
.ardoise-liste .origine { color: var(--brume); font-size: 0.85rem; white-space: nowrap; }
.badge { font-style: normal; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 7px; border-radius: 10px; margin-left: 6px; white-space: nowrap; vertical-align: 2px; background: var(--glace); color: var(--nuit); }
.badge-dernieres, .badge-promo { background: var(--corail); color: #1a0d08; }
@media (max-width: 700px) { .arrivage .cadre { grid-template-columns: 1fr; gap: 12px; } }

section.bloc { padding-block: 96px; }
section.sans-haut { padding-top: 0; }
.entete-bloc { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; margin-bottom: 40px; }
.entete-bloc p { max-width: 44ch; }

.boutiques { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 22px; }
.boutique { grid-column: span 2; background: var(--ardoise); border: 1px solid var(--ardoise-2); display: flex; flex-direction: column; }
.boutiques.n4 .boutique { grid-column: span 3; }
.boutiques.n2 .boutique { grid-column: span 3; }
.boutiques.n1 .boutique { grid-column: 2 / span 4; }
.boutiques.n5 .boutique:nth-child(4) { grid-column: 2 / span 2; } .boutiques.n5 .boutique:nth-child(5) { grid-column: 4 / span 2; }
.boutiques.n7 .boutique:nth-child(7) { grid-column: 3 / span 2; }
.boutique img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.boutique .corps { padding: 22px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.boutique .lieu { font-size: 0.85rem; color: var(--brume); }
.exception { color: #ffb59f; font-weight: 700; font-size: 0.92rem; }
.horaires { width: 100%; border-collapse: collapse; font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.horaires td { padding: 5px 0; border-bottom: 1px solid var(--ardoise-2); vertical-align: top; }
.horaires td:last-child { text-align: right; color: var(--glace); }
.horaires tr.ferme td:last-child { color: var(--brume); }
.coordonnees { font-size: 0.92rem; color: var(--brume); margin-top: auto !important; }
.coordonnees b { color: var(--ecume); font-size: 1.05rem; }
@media (max-width: 900px) { .boutiques { grid-template-columns: 1fr; max-width: 560px; } .boutiques .boutique { grid-column: auto !important; } }

.produits { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 22px; }
.produit { position: relative; overflow: hidden; min-height: 380px; display: flex; align-items: end; background: var(--ardoise); }
.produit > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.produit:hover > img { transform: scale(1.04); }
.produit:not(.sans-photo)::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(13,22,25,.95) 0%, rgba(13,22,25,.2) 60%, rgba(13,22,25,0) 100%); }
.produit .corps { position: relative; z-index: 1; padding: 26px; display: grid; gap: 10px; }
.produit p { color: var(--glace); max-width: 42ch; font-size: 0.98rem; }
.p-large { grid-column: span 7; } .p-moyen { grid-column: span 5; } .p-petit { grid-column: span 4; } .p-pleine { grid-column: span 12; }
@media (max-width: 900px) { .produit { grid-column: span 12 !important; min-height: 320px; } }
.prix { display: flex; gap: 18px; flex-wrap: wrap; font-variant-numeric: tabular-nums; font-size: 0.92rem; }
.prix b { color: var(--corail); font-family: var(--titre); font-stretch: 85%; font-size: 1.15rem; }

.engagements { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.engagements > img { width: 100%; max-height: 640px; object-fit: cover; }
.texte-engagements { margin-top: 18px !important; max-width: 52ch; }
.liste-engagements { list-style: none; margin: 30px 0 0; padding: 0; }
.liste-engagements li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--ardoise-2); }
.liste-engagements li::before { content: ""; width: 10px; height: 10px; margin-top: 9px; background: var(--corail); transform: rotate(45deg); }
@media (max-width: 900px) { .engagements { grid-template-columns: 1fr; gap: 28px; } .engagements > img { max-height: 380px; } }

.commander { background: var(--ardoise); border-block: 1px solid var(--ardoise-2); }
.etapes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 40px; }
.etape { border-top: 3px solid var(--corail); padding-top: 18px; display: grid; gap: 8px; align-content: start; }
.etape .num { font-family: var(--titre); font-stretch: 75%; font-weight: 900; font-size: 2.6rem; color: var(--corail); line-height: 1; }
@media (max-width: 800px) { .etapes { grid-template-columns: 1fr; } }
.encarts { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; margin-top: 56px; }
.encart { border: 1px solid var(--ardoise-2); background: var(--nuit); padding: 28px; display: grid; gap: 12px; align-content: start; }
.pastille { justify-self: start; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--nuit); background: var(--glace); padding: 3px 10px; border-radius: 20px; }

footer { padding-block: 56px 40px; border-top: 1px solid var(--ardoise-2); }
.pied { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
.pied p { margin-top: 10px; }
.pied h3 { font-size: 1rem; color: var(--brume); }
.pied ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; color: var(--brume); font-size: 0.95rem; }
.selection { user-select: all; color: var(--corail); font-weight: 700; }
@media (max-width: 760px) { .pied { grid-template-columns: 1fr; } }
.bandeau-apercu { position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; background: var(--glace); color: var(--nuit); text-align: center; font-weight: 700; padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px)); }

/* Pages boutique / produit / mentions légales */
.ouverture-page { min-height: min(52vh, 480px); }
.ouverture-page h1 { font-size: clamp(2.6rem, 7vw, 5rem); max-width: 16ch; }
.lien-titre { text-decoration: none; }
.lien-titre:hover { color: var(--corail); }
.lien-plus { color: var(--corail); font-weight: 700; text-decoration: none; margin-top: auto; }
.fiche-boutique { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
.fiche-boutique h2, .texte-legal h2 { font-size: 1.6rem; margin-bottom: 14px; }
.fiche-boutique .adresse { font-size: 1.15rem; color: var(--glace); }
.fiche-boutique .tel { font-family: var(--titre); font-stretch: 85%; font-weight: 800; font-size: 1.8rem; color: var(--corail); margin-top: 10px; }
.texte-boutique { margin-top: 16px; max-width: 52ch; }
@media (max-width: 800px) { .fiche-boutique { grid-template-columns: 1fr; gap: 32px; } }
.fiche-produit { display: grid; gap: 18px; max-width: 760px; }
.prix.grand { font-size: 1.1rem; gap: 28px; } .prix.grand b { font-size: 1.6rem; }
.texte-long { display: grid; gap: 14px; color: var(--glace); font-size: 1.08rem; }
.fiche-produit a, .autres-boutiques a, .pied a { color: var(--glace); }
.autres-boutiques { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: 1.1rem; }
.pied-bas { padding-top: 26px; margin-top: 26px; border-top: 1px solid var(--ardoise-2); font-size: 0.88rem; color: var(--brume); }
.texte-legal { max-width: 820px; display: grid; gap: 16px; }
.texte-legal h1 { font-size: clamp(2.4rem, 6vw, 3.6rem); }
.texte-legal p { color: var(--glace); }

/* ── Précommande de plateaux ── */
.titre-page { font-size: clamp(2rem, 6vw, 3.4rem); margin: 6px 0 22px; }

.wa-bloc { margin-top: 18px; }
.wa-boutiques { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin: 14px 0 22px; }
.galerie figure { margin: 0; }
.galerie img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; display: block; }
.galerie figcaption { margin-top: 8px; font-weight: 700; }
.barre-mobile { display: none; }
@media (max-width: 860px) {
 .barre-mobile { display: flex; flex-wrap: nowrap; gap: 0; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: rgba(13, 22, 25, 0.97); border-top: 1px solid var(--ardoise-2); padding-bottom: env(safe-area-inset-bottom, 0px); }
 .barre-mobile a { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 2px 8px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--brume); text-decoration: none; }
 .barre-mobile a svg { width: 24px; height: 24px; }
 .barre-mobile a:active, .barre-mobile a:hover { color: var(--corail); }
 body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
}
.noel-bloc { border-color: var(--corail); }
.noel-bloc .actions { margin-top: 12px; }

/* Arrivage du jour : onglets par boutique (sans script), photo ou vidéo */
.arr-radio { position: absolute; opacity: 0; pointer-events: none; }
.arr-onglets { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 14px; }
.arr-onglets label { cursor: pointer; padding: 9px 16px; border: 1px solid var(--ardoise-2); border-radius: 999px; font-weight: 700; font-size: 0.92rem; color: var(--brume); background: var(--ardoise); }
.arr-panneau { display: none; max-width: 760px; }
.arr-media { width: 100%; max-height: 70vh; border-radius: 12px; display: block; background: #000; object-fit: contain; }
.arr-titre { margin: 14px 0 4px; font-size: 1.5rem; }
.arr-vide { color: var(--brume); padding: 18px 0; }
#arr-neuville:checked ~ .arr-panneaux .arr-p-neuville, #arr-saintdidier:checked ~ .arr-panneaux .arr-p-saintdidier, #arr-villefranche:checked ~ .arr-panneaux .arr-p-villefranche, #arr-marche:checked ~ .arr-panneaux .arr-p-marche { display: block; }
#arr-neuville:checked ~ .arr-onglets .arr-onglet-neuville, #arr-saintdidier:checked ~ .arr-onglets .arr-onglet-saintdidier, #arr-villefranche:checked ~ .arr-onglets .arr-onglet-villefranche, #arr-marche:checked ~ .arr-onglets .arr-onglet-marche { background: var(--corail); border-color: var(--corail); color: #14191b; }

/* Noël et Promo (à la place de l'arrivage du jour) */
.mise .mise-bloc + .mise-bloc { margin-top: 56px; }
.promo-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; margin-top: 18px; }
.promo-carte { position: relative; background: var(--ardoise); border: 1px solid var(--ardoise-2); border-radius: 12px; padding: 20px 18px 18px; }
.promo-carte h3 { font-size: 1.25rem; margin-bottom: 2px; padding-right: 64px; }
.promo-latin { font-style: italic; color: var(--brume); font-size: 0.92rem; margin: 0 0 12px; }
.promo-prix { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 10px; margin: 0; }
.promo-prix s { color: var(--brume); font-size: 1rem; }
.promo-prix b { color: var(--corail); font-size: 1.9rem; line-height: 1.1; }
.promo-prix span { color: var(--brume); font-size: 0.9rem; }
.promo-remise { position: absolute; top: 14px; right: 14px; background: var(--corail); color: #14191b; font-weight: 800; font-size: 0.85rem; padding: 4px 9px; border-radius: 999px; }

/* Promos : filtre par boutique */
.promo-ou { margin: 12px 0 0; font-size: 0.85rem; color: var(--brume); }
#pr-neuville:checked ~ .promo-grille .promo-carte:not(.pb-neuville) { display: none; }
#pr-saintdidier:checked ~ .promo-grille .promo-carte:not(.pb-saintdidier) { display: none; }
#pr-villefranche:checked ~ .promo-grille .promo-carte:not(.pb-villefranche) { display: none; }
#pr-marche:checked ~ .promo-grille .promo-carte:not(.pb-marche) { display: none; }
#pr-tous:checked ~ .arr-onglets .pr-onglet-tous, #pr-neuville:checked ~ .arr-onglets .pr-onglet-neuville, #pr-saintdidier:checked ~ .arr-onglets .pr-onglet-saintdidier, #pr-villefranche:checked ~ .arr-onglets .pr-onglet-villefranche, #pr-marche:checked ~ .arr-onglets .pr-onglet-marche { background: var(--corail); border-color: var(--corail); color: #14191b; }

/* Bandeau de photos qui défile (accueil) */
.ruban { overflow: hidden; background: #0b1214; padding: 18px 0; border-block: 1px solid var(--ardoise-2); }
.ruban-piste { display: flex; gap: 14px; width: max-content; animation: defile 75s linear infinite; }
.ruban img { height: 220px; width: auto; flex: none; border-radius: 10px; display: block; user-select: none; }
@media (hover: hover) and (pointer: fine) { .ruban:hover .ruban-piste { animation-play-state: paused; } }
.ruban img, .arr-media, .promo-photo, .galerie img { cursor: zoom-in; }
.arr-media[controls] { cursor: auto; }
@keyframes defile { to { transform: translateX(-50%); } }
@media (max-width: 700px) { .ruban img { height: 150px; } .ruban-piste { animation-duration: 55s; } }
.promo-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; margin-bottom: 12px; display: block; }

/* Photo en grand (agrandissement au clic ou au toucher) */
.zoom { position: fixed; inset: 0; z-index: 100; background: rgba(6, 10, 12, 0.94); display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 12px; touch-action: pan-y; }
.zoom img { max-width: 96vw; max-height: 82vh; object-fit: contain; border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.zoom-nom { color: var(--ecume); font-weight: 700; font-size: 1.1rem; margin-top: 14px; min-height: 1.5em; text-align: center; }
.zoom button { position: absolute; background: rgba(255,255,255,.12); color: #fff; border: 0; border-radius: 999px; width: 48px; height: 48px; font-size: 1.6rem; line-height: 1; cursor: pointer; }
.zoom button:hover { background: rgba(255,255,255,.25); }
.zoom .z-fermer { top: 14px; right: 14px; }
.zoom .z-prec { left: 12px; top: 50%; transform: translateY(-50%); }
.zoom .z-suiv { right: 12px; top: 50%; transform: translateY(-50%); }
body.zoom-ouvert { overflow: hidden; }

/* Promos du jour sous l'arrivage d'une boutique */
.arr-promos { margin-top: 18px; background: var(--ardoise); border: 1px solid var(--ardoise-2); border-left: 4px solid var(--corail); border-radius: 12px; padding: 14px 16px; max-width: 760px; }
.arr-promos-titre { margin: 0 0 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: .85rem; color: var(--corail); }
.arr-promo { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 16px; padding: 8px 0; border-top: 1px solid var(--ardoise-2); }
.arr-promo:first-of-type { border-top: 0; }
.arr-promo-nom { font-weight: 700; font-size: 1.1rem; } .arr-promo-nom i { color: var(--brume); font-weight: 400; font-size: .9rem; }
.arr-promo-prix { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.arr-promo-prix s { color: var(--brume); } .arr-promo-prix b { color: var(--corail); font-size: 1.5rem; } .arr-promo-prix small { color: var(--brume); }
.arr-promo-prix em { font-style: normal; font-weight: 800; background: var(--corail); color: #14191b; padding: 2px 8px; border-radius: 999px; font-size: .8rem; }

/* Croix pour revenir en arrière depuis une page intérieure */
.fermer-page { display: inline-flex; align-items: center; gap: 8px; flex: none; text-decoration: none; color: var(--ecume); border: 1px solid var(--corail); background: rgba(232, 96, 60, 0.12); border-radius: 999px; padding: 6px 14px 6px 10px; font-weight: 800; font-size: 0.9rem; }
.fermer-page span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--corail); color: #14191b; font-size: 1rem; line-height: 1; }
.fermer-page:hover, .fermer-page:active { background: var(--corail); color: #14191b; }
.fermer-page:hover span, .fermer-page:active span { background: #14191b; color: var(--corail); }
@media (max-width: 860px) { .entete { gap: 10px; } .fermer-page { padding: 5px 12px 5px 8px; } }

/* Page Notre histoire */
.histoire { max-width: 920px; }
.histoire .citation { font-style: italic; }
.histoire-photos { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin-block: 8px 20px; }
.histoire-photos figure { margin: 0; }
.histoire-photos img { width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 14px; cursor: zoom-in; }
.histoire .texte-long p { margin: 0 0 1em; line-height: 1.7; }
.credit-photo { font-size: .85rem; margin-top: 18px; }

/* En-tête : une seule ligne même avec « Notre histoire » */
.marque b, .marque span { white-space: nowrap; }
header nav a { white-space: nowrap; }
@media (max-width: 1400px) { .marque span { display: none; } header nav { gap: 16px; } }

/* ── Pages courtes : accueil à cases, une page par rubrique ── */
.page-courte section.bloc { padding-block: 56px; }
section.bloc.court { padding-block: 40px 64px; }
.tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.tuile { position: relative; display: grid; gap: 6px; padding: 24px 56px 24px 24px; border: 1px solid var(--ardoise-2); background: var(--nuit); text-decoration: none; color: inherit; transition: border-color .2s, transform .2s; }
.tuile h3 { margin: 0; font-size: 1.3rem; }
.tuile p { margin: 0; }
.tuile .fleche { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); color: var(--corail); font-weight: 800; font-size: 1.4rem; }
.tuile:hover, .tuile:focus-visible { border-color: var(--corail); }
@media (max-width: 700px) { .page-courte section.bloc { padding-block: 36px; } section.bloc.court { padding-block: 24px 90px; } .tuile { padding: 18px 50px 18px 18px; } }

/* ── Icônes des réseaux sociaux (pied de page) ── */
.reseaux { display: flex; gap: 12px; margin-top: 16px; }
.reseaux a { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border: 1px solid var(--ardoise-2); border-radius: 50%; color: var(--ecume); transition: color .2s, border-color .2s, background .2s; }
.reseaux a:hover, .reseaux a:focus-visible { color: var(--corail); border-color: var(--corail); }

.tel-orange { color: var(--corail); font-weight: 700; white-space: nowrap; }

/* ── Liens cliquables : e-mail et téléphone ── */
.tel-orange { text-decoration: none; }
.tel-orange:hover, .selection a:hover { text-decoration: underline; }
.selection a { color: inherit; text-decoration: none; }
.fiche-boutique .tel a, .coordonnees b a { color: inherit; text-decoration: none; }

/* ── Logo : « Poissonnier · Traiteur » sous CIGALE DES MERS ── */
.marque { flex-direction: column; align-items: flex-start; gap: 2px; }
.marque span { font-size: 0.62rem; line-height: 1; }
@media (max-width: 1400px) and (min-width: 861px) { .marque span { display: block; } }
header .marque { align-items: center; }

/* ── Pages produit : photos centrées, taille moyenne ── */
.fiche-produit { max-width: 1100px; margin-inline: auto; }
.fiche-produit .texte-long, .fiche-produit > p { max-width: 760px; margin-inline: auto; }
.fiche-produit .galerie { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 380px)); justify-content: center; }
.fiche-produit .galerie figure { width: 100%; }
.fiche-produit .galerie img { aspect-ratio: 4 / 3; }