@import url('https://fonts.googleapis.com/css2?family=Albert+Sans:wght@400..800&family=Funnel+Display:wght@300..800&display=swap');

:root {
  --figue: #702C78;
  --figue-fonce: #38183D;
  --papier: #F3EAD8;
  --papier-clair: #FFF9ED;
  --encre: #171512;
  --safran: #E9A321;
  --vert: #254E3B;
  --tomate: #D84A32;
  --rose: #DDA9C7;
  --ligne: #B7A891;
  --blanc: #FFFFFF;
  --transparent: rgba(255,255,255,0);
  --voile: rgba(23,21,18,.66);
  --voile-leger: rgba(23,21,18,.18);
  --ombre-texte: rgba(23,21,18,.45);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--papier); color: var(--encre); font-family: 'Albert Sans', sans-serif; font-size: 1rem; line-height: 1.55; overflow-x: hidden; }
img { display: block; width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { color: inherit; }
.evitement { position: fixed; top: -5rem; left: 1rem; z-index: 1000; background: var(--safran); color: var(--encre); padding: .8rem 1rem; transition: top .2s ease; }
.evitement:focus { top: 1rem; }
.sur { margin: 0 0 1rem; font-size: .78rem; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }
h1, h2, h3 { font-family: 'Funnel Display', sans-serif; font-weight: 650; line-height: .94; letter-spacing: -.035em; margin: 0; }
h1 { font-size: clamp(3.7rem, 8vw, 8.8rem); }
h2 { font-size: clamp(2.6rem, 5.7vw, 6.2rem); }
h3 { font-size: clamp(1.35rem, 2.1vw, 2.2rem); }
p { margin: 0 0 1rem; }
.btn { display: inline-flex; min-height: 3rem; align-items: center; justify-content: center; padding: .8rem 1.25rem; border: 2px solid var(--encre); font-size: .79rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; transition: background .25s ease, color .25s ease, transform .25s ease, border-color .25s ease; }
.btn:hover { transform: translateY(-3px); }
.btn.safran { background: var(--safran); color: var(--encre); border-color: var(--safran); }
.btn.safran:hover { background: var(--papier-clair); border-color: var(--papier-clair); }
.btn.figue { background: var(--figue); color: var(--blanc); border-color: var(--figue); }
.btn.figue:hover { background: var(--figue-fonce); border-color: var(--figue-fonce); }
.btn.vert { background: var(--vert); color: var(--blanc); border-color: var(--vert); }
.btn.vert:hover { background: var(--encre); border-color: var(--encre); }
.btn.contour { border-color: var(--blanc); color: var(--blanc); }
.btn.contour:hover { background: var(--blanc); color: var(--encre); }
.lien-fleche { display: inline-block; border-bottom: 2px solid var(--encre); padding-bottom: .2rem; font-weight: 750; transition: padding .2s ease, color .2s ease; }
.lien-fleche:hover { padding-left: .5rem; color: var(--figue); }

/* En-tête transparent puis signalétique opaque */
.hd { position: fixed; z-index: 100; top: 0; left: 0; right: 0; height: 6.4rem; padding: 0 3vw; display: grid; grid-template-columns: minmax(12rem,1fr) auto auto auto; align-items: center; gap: 2rem; color: var(--blanc); border-bottom: 1px solid var(--transparent); transition: height .3s ease, background .3s ease, color .3s ease, border-color .3s ease; }
.hd.defile { height: 5rem; background: var(--papier-clair); color: var(--encre); border-color: var(--ligne); }
.logo { display: inline-flex; flex-direction: column; width: max-content; max-width: 100%; font-family: 'Funnel Display', sans-serif; font-size: clamp(1.25rem,2vw,1.8rem); font-weight: 800; line-height: .88; letter-spacing: -.04em; white-space: nowrap; transition: color .25s ease, letter-spacing .25s ease; }
.logo:hover { letter-spacing: -.01em; }
.logo small { margin-top: .42rem; font-family: 'Albert Sans', sans-serif; font-size: .58rem; line-height: 1; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.nav-principale { display: flex; align-items: center; gap: 1.5rem; }
.nav-principale a, .tel { position: relative; min-height: 44px; display: inline-flex; align-items: center; font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; transition: color .2s ease; }
.nav-principale a::after, .tel::after { content: ''; position: absolute; left: 0; right: 100%; bottom: .35rem; height: 2px; background: currentColor; transition: right .25s ease; }
.nav-principale a:hover::after, .tel:hover::after { right: 0; }
.menu { width: 48px; height: 48px; border: 1px solid currentColor; background: var(--transparent); cursor: pointer; display: grid; align-content: center; gap: 7px; padding: 12px; transition: background .25s ease, color .25s ease, transform .25s ease; }
.menu:hover { background: var(--safran); color: var(--encre); transform: rotate(2deg); }
.menu span { display: block; width: 100%; height: 2px; background: currentColor; transition: transform .25s ease; }
.menu[aria-expanded="true"] span:first-child { transform: translateY(4.5px) rotate(45deg); }
.menu[aria-expanded="true"] span:last-child { transform: translateY(-4.5px) rotate(-45deg); }
.tiroir { position: fixed; inset: 0; z-index: -1; padding: 8rem 6vw 4rem; background: var(--figue-fonce); color: var(--blanc); display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-content: center; gap: .2rem 5vw; opacity: 0; visibility: hidden; transform: translateY(-2rem); transition: opacity .35s ease, visibility .35s ease, transform .35s ease; }
.tiroir.ouvert { opacity: 1; visibility: visible; transform: none; }
.tiroir a { border-bottom: 1px solid var(--rose); padding: .55rem 0; font-family: 'Funnel Display', sans-serif; font-size: clamp(1.15rem,2vw,2rem); transition: color .2s ease, padding-left .2s ease; }
.tiroir a:hover { color: var(--safran); padding-left: .7rem; }

/* Hero Signature : image plein écran, bichromie et bloc pratique intégré */
.hero-signature { position: relative; min-height: 100svh; background: var(--figue-fonce); color: var(--blanc); overflow: hidden; display: grid; align-items: end; }
.hero-signature picture, .hero-signature picture::after, .hero-voile { position: absolute; inset: 0; }
.hero-signature picture img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.12); animation: souffle 13s ease-in-out infinite alternate; }
.hero-signature picture::after { content: ''; background: var(--figue); mix-blend-mode: multiply; opacity: .82; }
.hero-voile { background: linear-gradient(90deg,var(--voile),var(--voile-leger),var(--transparent)); }
.hero-texte { position: relative; z-index: 2; width: min(71rem,90vw); padding: 11rem 4vw 10rem; text-shadow: 0 2px 20px var(--ombre-texte); }
.hero-texte h1 { max-width: 12ch; animation: entree-titre .9s .15s both; }
.hero-texte > p:not(.sur) { max-width: 43rem; margin-top: 1.4rem; font-size: clamp(1.05rem,1.6vw,1.35rem); animation: entree-texte .8s .4s both; }
.hero-texte .sur { animation: entree-texte .7s both; }
.actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2rem; animation: entree-texte .8s .6s both; }
.essentiel-haut { position: absolute; z-index: 3; right: 3vw; bottom: 0; width: min(25rem,34vw); background: var(--safran); color: var(--encre); padding: 1.5rem; border-top: 6px solid var(--papier-clair); }
.essentiel-haut p { margin: 0 0 1rem; font-size: .9rem; }
.essentiel-haut a { display: inline-block; font-family: 'Funnel Display',sans-serif; font-size: 1.5rem; font-weight: 800; border-bottom: 3px solid var(--encre); transition: background .2s ease; }
.essentiel-haut a:hover { background: var(--papier-clair); }
.rail-couleur { min-height: 4.5rem; padding: 1rem 3vw; display: flex; align-items: center; justify-content: space-between; gap: 2rem; overflow: hidden; font-size: .72rem; font-weight: 800; letter-spacing: .13em; white-space: nowrap; }
.rail-safran { background: var(--safran); color: var(--encre); }
.rail-couleur span::before { content: '◆'; margin-right: 2rem; color: var(--figue); }

/* Introduction en grille de signalétique */
.intro-rayon { display: grid; grid-template-columns: .35fr 1.15fr 1fr; gap: 4vw; padding: clamp(5rem,10vw,10rem) 4vw; border-bottom: 2px solid var(--encre); }
.numero { font-family: 'Funnel Display',sans-serif; font-size: clamp(5rem,12vw,12rem); line-height: .7; color: var(--figue); }
.intro-titre h2 { font-size: clamp(3rem,5vw,5.8rem); }
.intro-texte { max-width: 35rem; padding-top: 2rem; font-size: 1.08rem; }

/* Trois moments : bandes massives et contrastées */
.moments { background: var(--encre); }
.moment { min-height: 42rem; display: grid; grid-template-columns: 1.05fr .95fr; border-bottom: 2px solid var(--encre); overflow: hidden; }
.moment:nth-child(even) { grid-template-columns: .95fr 1.05fr; }
.moment:nth-child(even) img { order: 2; }
.moment img { height: 100%; min-height: 42rem; object-fit: cover; filter: saturate(.85); transition: transform .7s ease, filter .4s ease; }
.moment:hover img { transform: scale(1.025); filter: saturate(1.08); }
.moment > div { padding: clamp(3rem,7vw,8rem) 5vw; display: flex; flex-direction: column; justify-content: center; }
.moment > div > span { font-size: .75rem; font-weight: 800; letter-spacing: .17em; }
.moment h2 { margin: 1.5rem 0 2rem; font-size: clamp(3rem,5.5vw,6rem); }
.moment p { max-width: 31rem; font-size: 1.12rem; }
.moment a { align-self: flex-start; margin-top: 1rem; border-bottom: 2px solid currentColor; font-weight: 800; transition: padding-left .2s ease; }
.moment a:hover { padding-left: .7rem; }
.moment-apero > div { background: var(--tomate); color: var(--papier-clair); }
.moment-diner > div { background: var(--vert); color: var(--papier-clair); }
.moment-cadeau > div { background: var(--rose); color: var(--encre); }

/* Module Signature — ticket ajusté au budget */
.panier-sim { background: var(--papier-clair); padding: clamp(5rem,9vw,9rem) 4vw; }
.panier-entete { display: grid; grid-template-columns: .8fr 1.4fr 1fr; gap: 4vw; align-items: end; margin-bottom: 4rem; }
.panier-entete h2 { color: var(--figue); }
.panier-entete > p:last-child { font-size: 1.08rem; }
.panier-outil { display: grid; grid-template-columns: .82fr 1.18fr; border: 3px solid var(--encre); }
.commandes { padding: clamp(2rem,5vw,5rem); background: var(--safran); }
.etiquette, .commandes label { display: flex; justify-content: space-between; font-size: .76rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.choix { display: grid; grid-template-columns: repeat(3,1fr); margin: 1rem 0 3.5rem; border: 2px solid var(--encre); }
.choix button { min-height: 3.2rem; border: 0; border-right: 2px solid var(--encre); background: var(--papier-clair); cursor: pointer; font-weight: 800; text-transform: uppercase; transition: background .2s ease, color .2s ease; }
.choix button:last-child { border-right: 0; }
.choix button:hover, .choix button.actif { background: var(--figue); color: var(--blanc); }
#budget-sortie { font-size: 1.4rem; letter-spacing: 0; }
input[type="range"] { width: 100%; margin: 2rem 0 .4rem; accent-color: var(--figue); cursor: pointer; }
.bornes { display: flex; justify-content: space-between; font-size: .75rem; font-weight: 800; }
.note { margin-top: 3rem; font-size: .83rem; }
.ticket { background: var(--blanc); padding: clamp(2rem,5vw,5rem); }
.ticket-haut { display: flex; justify-content: space-between; padding-bottom: 1rem; border-bottom: 3px solid var(--encre); font-size: .74rem; font-weight: 800; letter-spacing: .12em; }
.ligne-ticket { display: grid; grid-template-columns: 1fr auto; gap: 1rem; padding: 1rem 0; border-bottom: 1px dashed var(--ligne); animation: ticket-ligne .35s both; }
.ligne-ticket span { display: block; }
.ligne-ticket small { font-size: .72rem; color: var(--figue); }
.ticket-total { display: flex; justify-content: space-between; align-items: end; padding: 2rem 0; font-weight: 800; }
.ticket-total strong { font-family: 'Funnel Display',sans-serif; font-size: 2.5rem; }

/* Produits en rayon horizontal */
.produits-selection { padding: clamp(5rem,9vw,9rem) 0; background: var(--figue); color: var(--blanc); }
.titre-bande { padding: 0 4vw 3rem; display: grid; grid-template-columns: 1fr 2fr auto; gap: 3vw; align-items: end; }
.titre-bande h2 { max-width: 12ch; }
.titre-bande a { border-bottom: 2px solid currentColor; transition: color .2s ease; }
.titre-bande a:hover { color: var(--safran); }
.grille-produits { display: grid; grid-template-columns: repeat(6,minmax(17rem,1fr)); gap: 2px; overflow-x: auto; scrollbar-color: var(--safran) var(--figue-fonce); }
.grille-produits article { background: var(--papier-clair); color: var(--encre); min-height: 34rem; }
.grille-produits img { height: 20rem; object-fit: cover; transition: filter .3s ease, transform .4s ease; }
.grille-produits article:hover img { filter: saturate(1.18); transform: translateY(-5px); }
.grille-produits article > div { padding: 1.3rem; }
.grille-produits h3 { margin-bottom: .7rem; font-size: 1.65rem; }
.grille-produits strong, .grille-produits small { display: block; }
.grille-produits strong { margin-top: 1.2rem; font-family: 'Funnel Display',sans-serif; font-size: 1.8rem; }
.pastille { width: max-content; margin-bottom: .8rem; background: var(--safran); padding: .25rem .45rem; font-size: .64rem; font-weight: 800; letter-spacing: .12em; }

/* Histoire et fabricant */
.histoire-rayon { display: grid; grid-template-columns: .9fr 1.1fr; min-height: 55rem; }
.histoire-photo { overflow: hidden; }
.histoire-photo img { height: 100%; object-fit: cover; object-position: center; transition: transform .8s ease; }
.histoire-rayon:hover .histoire-photo img { transform: scale(1.02); }
.histoire-texte { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: clamp(4rem,8vw,9rem); background: var(--rose); }
.histoire-texte h2 { margin-bottom: 2.5rem; font-size: clamp(3rem,5.6vw,6rem); }
.histoire-texte p { max-width: 39rem; }
.histoire-texte .btn { margin-top: 1.5rem; }
.producteur-bande { display: grid; grid-template-columns: 1.3fr .7fr; min-height: 46rem; background: var(--vert); color: var(--blanc); }
.producteur-bande > div { padding: clamp(4rem,8vw,9rem) 5vw; align-self: center; }
.producteur-bande h2 { margin-bottom: 2rem; font-size: clamp(3rem,5.4vw,5.7rem); }
.producteur-bande p { max-width: 45rem; }
.producteur-bande a { display: inline-block; margin-top: 1.3rem; border-bottom: 2px solid currentColor; transition: color .2s ease; }
.producteur-bande a:hover { color: var(--safran); }
.producteur-bande img { height: 100%; object-fit: cover; }

/* Recettes et accès */
.recette-rail { padding: clamp(5rem,9vw,9rem) 4vw; background: var(--safran); }
.recette-rail > header { display: grid; grid-template-columns: 1fr 2fr; margin-bottom: 4rem; }
.recettes { display: grid; grid-template-columns: repeat(3,1fr); border: 2px solid var(--encre); }
.recettes article { min-height: 24rem; padding: 2.2rem; border-right: 2px solid var(--encre); display: flex; flex-direction: column; align-items: flex-start; transition: background .25s ease, color .25s ease; }
.recettes article:last-child { border-right: 0; }
.recettes article:hover { background: var(--figue); color: var(--blanc); }
.recettes span { font-size: .7rem; font-weight: 800; letter-spacing: .13em; }
.recettes h3 { margin: 2rem 0 1.2rem; font-size: clamp(1.8rem,3vw,3.1rem); }
.recettes a { margin-top: auto; border-bottom: 2px solid currentColor; font-weight: 800; }
.infos-finales { display: grid; grid-template-columns: 1.2fr .8fr .8fr; background: var(--encre); color: var(--blanc); }
.infos-finales > div { min-height: 31rem; padding: clamp(2.5rem,5vw,5rem) 3vw; border-right: 1px solid var(--ligne); }
.infos-finales > div:last-child { border: 0; }
.infos-carte { background: var(--figue); }
.infos-carte h2 { margin-bottom: 2rem; font-size: clamp(2.3rem,4vw,4.7rem); }
.horaires h3, .service h3 { margin-bottom: 2rem; }
.horaires dl { margin: 0 0 2rem; }
.horaires dl div { display: flex; justify-content: space-between; gap: 1rem; padding: .65rem 0; border-bottom: 1px solid var(--ligne); }
.horaires dd { margin: 0; }
.horaires > a { font-size: 1.4rem; font-weight: 800; color: var(--safran); }
.pied { padding: 3.5rem 4vw; display: grid; grid-template-columns: 1fr 1fr 1fr auto; align-items: end; gap: 2rem; background: var(--papier-clair); border-top: 6px solid var(--safran); }
.pied p { margin: 0; }
.pied nav { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; font-size: .75rem; }
.pied nav a { border-bottom: 1px solid var(--encre); transition: color .2s ease; }
.pied nav a:hover { color: var(--figue); }

/* Pages intérieures */
.page-interieure .hd { position: sticky; background: var(--papier-clair); color: var(--encre); border-color: var(--ligne); }
.page-entete { min-height: 44rem; display: grid; grid-template-columns: 1.08fr .92fr; background: var(--figue); color: var(--blanc); }
.page-entete > div { padding: clamp(5rem,10vw,10rem) 5vw; align-self: end; }
.page-entete h1 { font-size: clamp(4rem,8vw,8.5rem); }
.page-entete p { max-width: 36rem; margin-top: 1.5rem; font-size: 1.12rem; }
.page-entete img { height: 100%; min-height: 44rem; object-fit: cover; }
.page-corps { padding: clamp(4rem,8vw,8rem) 4vw; }
.page-corps > h2 { max-width: 14ch; margin-bottom: 3rem; }
.page-grille { display: grid; grid-template-columns: repeat(3,1fr); border-top: 2px solid var(--encre); border-left: 2px solid var(--encre); }
.page-grille article { min-height: 20rem; padding: 2rem; border-right: 2px solid var(--encre); border-bottom: 2px solid var(--encre); }
.page-grille h3 { margin: 1rem 0; }
.page-grille strong { display: block; margin-top: 2rem; font-size: 1.5rem; }
.page-liste { display: grid; grid-template-columns: .8fr 1.2fr; gap: 4vw; }
.page-liste ol, .page-liste ul { margin: 0; padding: 0; list-style: none; }
.page-liste li { padding: 1.2rem 0; border-bottom: 1px solid var(--ligne); }
.grand-visuel { height: min(72vw,48rem); object-fit: cover; }
.bande-cta { padding: clamp(4rem,8vw,8rem) 4vw; display: grid; grid-template-columns: 1.5fr .5fr; align-items: end; gap: 3rem; background: var(--safran); }
.bande-cta h2 { font-size: clamp(3rem,6.5vw,7rem); }
.formulaire { display: grid; grid-template-columns: repeat(2,1fr); gap: 1rem; max-width: 60rem; }
.formulaire label { display: grid; gap: .4rem; font-weight: 700; }
.formulaire label.large { grid-column: 1/-1; }
.formulaire input, .formulaire select, .formulaire textarea { width: 100%; min-height: 3.2rem; border: 2px solid var(--encre); background: var(--papier-clair); padding: .8rem; color: var(--encre); border-radius: 0; }
.formulaire textarea { min-height: 9rem; resize: vertical; }
.formulaire button { justify-self: start; cursor: pointer; }
.confirmation { display: none; margin-top: 1rem; padding: 1rem; background: var(--vert); color: var(--blanc); }
.confirmation.visible { display: block; }
.legal { max-width: 56rem; margin: 0 auto; }
.legal h2 { margin: 3rem 0 1rem; font-size: 2rem; }

/* Apparitions */
.rv { opacity: 0; transform: translateY(2rem); transition: opacity .7s ease, transform .7s ease; }
.rv.vu { opacity: 1; transform: none; }
@keyframes souffle { from { transform: scale(1); } to { transform: scale(1.045); } }
@keyframes entree-titre { from { opacity: 0; transform: translateY(2rem); } to { opacity: 1; transform: none; } }
@keyframes entree-texte { from { opacity: 0; transform: translateX(-1.2rem); } to { opacity: 1; transform: none; } }
@keyframes ticket-ligne { from { opacity: 0; transform: translateX(1rem); } to { opacity: 1; transform: none; } }
@keyframes signal { 0%,100% { opacity: .6; } 50% { opacity: 1; } }
@keyframes montee { from { transform: translateY(100%); } to { transform: none; } }
@keyframes rotation-douce { from { transform: rotate(-1deg); } to { transform: rotate(1deg); } }
@keyframes trait { from { width: 0; } to { width: 100%; } }

/* États détaillés et variations de bandes : nécessaires aux longues pages du catalogue */
.fond-figue { background: var(--figue); color: var(--blanc); }
.fond-vert { background: var(--vert); color: var(--blanc); }
.fond-safran { background: var(--safran); color: var(--encre); }
.fond-rose { background: var(--rose); color: var(--encre); }
.fond-tomate { background: var(--tomate); color: var(--blanc); }
.fond-papier { background: var(--papier-clair); color: var(--encre); }
.texte-figue { color: var(--figue); }
.texte-safran { color: var(--safran); }
.bord-haut { border-top: 2px solid currentColor; }
.bord-bas { border-bottom: 2px solid currentColor; }
.align-droite { text-align: right; }
.align-centre { text-align: center; }
.max-texte { max-width: 42rem; }
.colonne-deux { display: grid; grid-template-columns: repeat(2,1fr); gap: 3vw; }
.colonne-trois { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; }
.espace-grand { padding: clamp(5rem,9vw,9rem) 4vw; }
.espace-moyen { padding: clamp(3rem,6vw,6rem) 4vw; }
.visuel-bande { height: clamp(18rem,42vw,40rem); object-fit: cover; }
.liste-prix { border-top: 3px solid var(--encre); }
.liste-prix article { display: grid; grid-template-columns: 1fr auto; gap: 1rem; padding: 1.4rem 0; border-bottom: 1px solid var(--ligne); transition: padding-left .2s ease, background .2s ease; }
.liste-prix article:hover { padding-left: 1rem; background: var(--papier-clair); }
.liste-prix article strong { font-family: 'Funnel Display',sans-serif; font-size: 1.6rem; }
.bloc-chiffre { display: flex; align-items: baseline; gap: .8rem; }
.bloc-chiffre strong { font-family: 'Funnel Display',sans-serif; font-size: clamp(3rem,6vw,7rem); color: var(--figue); }
.citation { padding: 3rem; border-left: 8px solid var(--safran); font-family: 'Funnel Display',sans-serif; font-size: clamp(1.8rem,3vw,3.2rem); line-height: 1.05; }
.mini-note { font-size: .8rem; line-height: 1.4; }
.image-double { display: grid; grid-template-columns: 1.2fr .8fr; min-height: 38rem; }
.image-double img { height: 100%; object-fit: cover; }
.image-double .texte { padding: clamp(3rem,6vw,7rem); align-self: center; }
.etiquette-rayon { display: inline-block; padding: .35rem .55rem; background: var(--figue); color: var(--blanc); font-size: .67rem; letter-spacing: .12em; font-weight: 800; }
.prix-unitaire { font-size: .78rem; color: var(--figue); }
.allergenes { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .6rem; }
.allergenes span { border: 1px solid currentColor; padding: .2rem .35rem; font-size: .68rem; }
.accordeon details { border-bottom: 1px solid var(--ligne); }
.accordeon summary { min-height: 3.5rem; display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-weight: 800; }
.accordeon details p { padding: 0 0 1.5rem; max-width: 48rem; }
.accordeon summary::after { content: '+'; font-size: 1.5rem; }
.accordeon details[open] summary::after { content: '−'; }
.journal-grille { display: grid; grid-template-columns: 1.2fr .8fr .8fr; gap: 2px; }
.journal-grille article { padding: 2rem; background: var(--papier-clair); }
.journal-grille article:first-child { grid-row: span 2; }
.journal-grille img { height: 17rem; object-fit: cover; margin-bottom: 1.5rem; }
.journal-grille article:first-child img { height: 30rem; }
.compte-bloc { max-width: 35rem; padding: 3rem; border: 3px solid var(--encre); background: var(--papier-clair); }
.compte-bloc h2 { margin-bottom: 2rem; }
.page-grille article { transition: background .25s ease, color .25s ease, transform .25s ease; }
.page-grille article:hover { background: var(--figue); color: var(--blanc); transform: translateY(-4px); }
.page-entete img { transition: filter .4s ease, object-position .5s ease; }
.page-entete:hover img { filter: saturate(1.12); object-position: 52% center; }
.formulaire input, .formulaire select, .formulaire textarea { transition: border-color .2s ease, background .2s ease; }
.formulaire input:focus, .formulaire select:focus, .formulaire textarea:focus { border-color: var(--figue); background: var(--blanc); outline: 2px solid var(--safran); outline-offset: 2px; }
.fiche-origine { display: grid; grid-template-columns: auto 1fr; gap: 1rem 2rem; padding: 2rem 0; border-top: 2px solid var(--encre); }
.fiche-origine dt { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.fiche-origine dd { margin: 0; }
.appel-telephone { display: inline-flex; min-height: 3rem; align-items: center; border-bottom: 3px solid currentColor; font-family: 'Funnel Display',sans-serif; font-size: 1.6rem; font-weight: 800; transition: color .2s ease, padding-left .2s ease; }
.appel-telephone:hover { color: var(--safran); padding-left: .5rem; }
.image-legende { display: grid; gap: .7rem; }
.image-legende figcaption { max-width: 34rem; font-size: .78rem; line-height: 1.4; }
.separateur-signal { min-height: 5rem; display: flex; align-items: center; justify-content: center; background: var(--tomate); color: var(--blanc); font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.panier-fixe { display: grid; grid-template-columns: 1fr auto; gap: 1rem; padding: 1.2rem 0; border-bottom: 1px dashed var(--ligne); }
.panier-fixe strong { font-family: 'Funnel Display',sans-serif; font-size: 1.35rem; }

@media (max-width: 1100px) {
  .hd { grid-template-columns: 1fr auto auto; gap: 1rem; }
  .nav-principale { display: none; }
  .intro-rayon { grid-template-columns: .25fr 1fr; }
  .intro-texte { grid-column: 2; }
  .panier-entete { grid-template-columns: 1fr 1.4fr; }
  .panier-entete > p:last-child { grid-column: 2; }
  .titre-bande { grid-template-columns: 1fr 2fr; }
  .titre-bande a { grid-column: 2; justify-self: start; }
  .infos-finales { grid-template-columns: 1fr 1fr; }
  .infos-carte { grid-column: 1/-1; }
  .pied { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .hd { height: 4.7rem; padding: 0 1rem; grid-template-columns: minmax(0,1fr) auto auto; }
  .hd.defile { height: 4.4rem; }
  .logo { font-size: 1.2rem; }
  .logo small { font-size: .49rem; }
  .hd .tel { font-size: 0; width: 44px; justify-content: center; border: 1px solid currentColor; }
  .hd .tel::before { content: 'TÉL'; font-size: .66rem; }
  .hd .tel::after { display: none; }
  .menu { width: 44px; height: 44px; }
  .tiroir { padding: 6rem 1.2rem 2rem; grid-template-columns: 1fr 1fr; gap: 0 1rem; overflow-y: auto; }
  .tiroir a { font-size: .98rem; }
  .hero-signature { min-height: 52rem; }
  .hero-signature picture img { object-position: center; }
  .hero-voile { background: linear-gradient(0deg,var(--voile),var(--voile-leger),var(--transparent)); }
  .hero-texte { padding: 8rem 1.2rem 14rem; align-self: end; }
  .hero-texte h1 { font-size: clamp(3.5rem,17vw,5.4rem); }
  .hero-texte > p:not(.sur) { font-size: 1rem; }
  .essentiel-haut { left: 0; right: 0; width: 100%; padding: 1rem 1.2rem; display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
  .essentiel-haut p { font-size: .76rem; }
  .essentiel-haut a { font-size: 1.1rem; align-self: end; }
  .rail-couleur { justify-content: flex-start; animation: defilement 14s linear infinite; }
  .intro-rayon { grid-template-columns: 1fr; padding: 5rem 1.2rem; gap: 1.5rem; }
  .intro-texte { grid-column: auto; padding: 0; }
  .numero { font-size: 6rem; }
  .moment, .moment:nth-child(even) { min-height: 0; grid-template-columns: 1fr; }
  .moment:nth-child(even) img { order: 0; }
  .moment img { min-height: 22rem; height: 22rem; }
  .moment > div { padding: 3.5rem 1.2rem; }
  .moment h2 { font-size: 3.2rem; }
  .panier-sim { padding: 5rem 1.2rem; }
  .panier-entete { grid-template-columns: 1fr; gap: 1rem; }
  .panier-entete > p:last-child { grid-column: auto; }
  .panier-outil { grid-template-columns: 1fr; }
  .commandes, .ticket { padding: 2rem 1.2rem; }
  .choix { grid-template-columns: 1fr; }
  .choix button { border-right: 0; border-bottom: 2px solid var(--encre); }
  .choix button:last-child { border-bottom: 0; }
  .titre-bande { grid-template-columns: 1fr; padding: 0 1.2rem 2rem; }
  .titre-bande a { grid-column: auto; }
  .grille-produits { grid-template-columns: repeat(6,17rem); padding: 0 1.2rem; }
  .grille-produits article { min-height: 31rem; }
  .grille-produits img { height: 17rem; }
  .histoire-rayon, .producteur-bande { grid-template-columns: 1fr; min-height: 0; }
  .histoire-photo img { height: 32rem; }
  .histoire-texte, .producteur-bande > div { padding: 4rem 1.2rem; }
  .producteur-bande img { height: 30rem; order: -1; }
  .recette-rail { padding: 5rem 1.2rem; }
  .recette-rail > header { grid-template-columns: 1fr; }
  .recettes { grid-template-columns: 1fr; }
  .recettes article { min-height: 20rem; border-right: 0; border-bottom: 2px solid var(--encre); }
  .recettes article:last-child { border-bottom: 0; }
  .infos-finales { grid-template-columns: 1fr; }
  .infos-carte { grid-column: auto; }
  .infos-finales > div { min-height: 0; padding: 3rem 1.2rem; border-right: 0; border-bottom: 1px solid var(--ligne); }
  .pied { padding: 3rem 1.2rem; grid-template-columns: 1fr; align-items: start; }
  .page-entete { min-height: 0; grid-template-columns: 1fr; }
  .page-entete > div { padding: 5rem 1.2rem; }
  .page-entete img { min-height: 27rem; height: 27rem; order: -1; }
  .page-corps { padding: 4rem 1.2rem; }
  .page-grille, .colonne-deux, .colonne-trois, .page-liste, .image-double, .journal-grille { grid-template-columns: 1fr; }
  .journal-grille article:first-child { grid-row: auto; }
  .bande-cta { grid-template-columns: 1fr; padding: 4rem 1.2rem; }
  .formulaire { grid-template-columns: 1fr; }
  .formulaire label.large { grid-column: auto; }
}

@keyframes defilement { from { transform: translateX(0); } to { transform: translateX(-60%); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media (max-width: 760px) {
  .legal h1 { font-size: clamp(2.8rem, 12vw, 4.4rem); overflow-wrap: anywhere; }
}