/* Rose d'Auxois · maquette du site (LLWebsite, octobre 2026)
   Charte reprise de la maquette Claude Design : couleurs, typos et cadres d'origine. */

:root {
  --fond: #FAE1DC;
  --rose: #F9CACB;
  --creme: #FCE6E0;
  --creme-l: #FCE8E3;
  --rose-pale: #FDEFEB; /* fond des champs, menus et choix (à la place du blanc) */
  --rose-clair: #FADDDD; /* choix retenu */
  --entete: #FCEAE6;
  --bordeaux: #6E0A22;
  --bordeaux-fonce: #4A0616;
  --bordeaux-en: #7A1530;
  --titre: #2B1E26;
  --texte: #3A2A2E;
  --gris: #6B4A50;
  --coeur: #DC7189;
  --filet: #E3A5AC;
  --filet-l: #EFC3C4;
  --filet-entete: #F1CFCB;
  --contour: #A8707A; /* bord des champs et des choix : 3:1 sur le fond, le blanc et la crème */

  --f-titre: 'Cinzel', serif;
  --f-texte: 'EB Garamond', serif;
  --f-main: 'Dancing Script', cursive;

  --largeur: 1200px;
  --gouttiere: 24px;
  --entete-h: 99px; /* repli : js/site.js écrit la hauteur réelle de l’en-tête */
  --ease: cubic-bezier(.22, .61, .36, 1);
}

@media (max-width: 959px) {
  :root { --entete-h: 64px; }
}
@media (max-width: 639px) {
  :root { --gouttiere: 16px; }
}

/* Base ------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--f-texte);
  font-size: 18px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--bordeaux); }
@media (hover: hover) {
  a:hover { color: var(--bordeaux-fonce); }
}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .mode:has(input:focus-visible) {
  outline: 2px solid var(--bordeaux);
  outline-offset: 3px;
}

html:has(.entete) { scroll-padding-top: calc(var(--entete-h) + 16px); }

.nw { white-space: nowrap; }

/* Titres et accroches : pas de mot seul sur la dernière ligne */
h1, h2, h3, .qualite h3, .atout p, .manuscrit, .accroche, .pro__quantites, .engagement p, .coffret-bloc__note, .menu-mobile__note { text-wrap: balance; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.evitement {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--bordeaux); color: var(--creme); padding: 10px 16px;
  font-family: var(--f-titre); font-weight: 600; font-size: 14px; text-decoration: none;
}
.evitement:focus { top: 12px; color: var(--creme); }

.conteneur {
  max-width: calc(var(--largeur) + 2 * var(--gouttiere));
  margin: 0 auto;
  padding-left: var(--gouttiere);
  padding-right: var(--gouttiere);
}

/* Cadres aux coins arrondis vers l'intérieur (SVG d'origine) */
.ra-card { border: 16px solid transparent; border-image: url('../assets/card.svg') 16 fill stretch; }
.ra-card-l { border: 16px solid transparent; border-image: url('../assets/card_light.svg') 16 fill stretch; }

/* Boutons et liens ------------------------------------------------ */

.ra-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 30px;
  background: var(--bordeaux); color: var(--creme);
  border: 1px solid var(--bordeaux); border-radius: 2px;
  font-family: var(--f-titre); font-weight: 600; font-size: 15px; letter-spacing: .1em;
  text-decoration: none; text-align: center; cursor: pointer; white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .12s ease;
  touch-action: manipulation;
  user-select: none; -webkit-user-select: none;
}
@media (hover: hover) {
  .ra-btn:not(:disabled):hover { background: var(--bordeaux-fonce); border-color: var(--bordeaux-fonce); color: var(--creme); }
}
.ra-btn:active { transform: scale(.98); }
.ra-btn svg { flex: none; }
.ra-btn-line { background: transparent; color: var(--bordeaux); }
@media (hover: hover) {
  .ra-btn-line:not(:disabled):hover { background: var(--bordeaux); border-color: var(--bordeaux); color: var(--creme); }
}
.ra-btn.est-ajoute { background: var(--bordeaux); color: var(--creme); }

.ra-link {
  font-family: var(--f-titre); font-weight: 600; font-size: 15px; letter-spacing: .08em;
  color: var(--bordeaux); text-decoration: none;
  border: 0; border-bottom: 1px solid var(--filet); padding: 0 0 2px; background: none; cursor: pointer;
}
@media (hover: hover) {
  .ra-link:not(:disabled):hover { border-color: var(--bordeaux); }
}
.ra-btn:disabled, .ra-link:disabled { opacity: .45; cursor: default; }

.ra-nav {
  font-family: var(--f-titre); font-weight: 600; font-size: 15px; letter-spacing: .08em;
  color: var(--bordeaux); text-decoration: none;
  padding: 6px 0; white-space: nowrap; background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size .25s var(--ease), color .2s ease;
}
@media (hover: hover) {
  .ra-nav:hover { color: var(--bordeaux-fonce); background-size: 100% 1px; }
}

/* Bandeau + en-tête ---------------------------------------------- */

.bandeau {
  display: none;
  background: var(--entete); border-bottom: 1px solid var(--filet-entete);
  padding: 7px var(--gouttiere);
  font-family: var(--f-texte); font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  text-align: center; color: var(--gris);
}

.entete {
  position: sticky; top: 0; z-index: 50;
  background: var(--entete); border-bottom: 1px solid var(--filet-entete);
}
.entete__in {
  max-width: calc(var(--largeur) + 2 * var(--gouttiere)); margin: 0 auto;
  padding: 18px var(--gouttiere) 16px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px 32px;
}
.entete__nav { display: flex; align-items: center; gap: 8px 28px; }
.entete__nav--d { justify-content: flex-end; }
@media (min-width: 960px) and (max-width: 1199px) {
  .ra-nav { font-size: 13.5px; letter-spacing: .03em; }
  .entete__in { column-gap: 16px; }
  .entete__nav { column-gap: 16px; }
}
@media (min-width: 960px) and (max-width: 1023px) {
  .entete__nav { column-gap: 12px; } /* le logo reste au centre */
}
@media (min-width: 1200px) and (max-width: 1239px) {
  .entete__nav { column-gap: 20px; } /* idem, liens en 15 px */
}

.logo {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  text-decoration: none; grid-column: 2;
}
.logo img { height: 30px; width: auto; }
.logo span {
  font-family: var(--f-titre); font-weight: 700; font-size: 30px; letter-spacing: .02em;
  color: var(--bordeaux); line-height: 1; white-space: nowrap;
}

.panier-lien {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; color: var(--bordeaux);
}
@media (hover: hover) {
  .panier-lien:hover { color: var(--bordeaux-fonce); }
}
.panier-lien .ic-sac { display: none; }
.panier-nb {
  position: absolute; top: 4px; right: 2px;
  min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px;
  background: var(--bordeaux); color: var(--creme);
  font-family: var(--f-texte); font-size: 12px; font-weight: 600; line-height: 18px; text-align: center;
  transform: scale(0); transition: transform .25s var(--ease);
}
.panier-nb.a-du-contenu { transform: scale(1); }
.panier-nb.rebond { animation: rebond .6s linear; }
/* Pastille qui saute comme un ressort (s'étire, se tasse, se pose) */
@keyframes rebond { 0% { transform: scale(1); } 22% { transform: scale(1.5); } 44% { transform: scale(.86); } 64% { transform: scale(1.12); } 82% { transform: scale(.97); } 100% { transform: scale(1); } }
/* Un article en moins : la pastille se tasse puis reprend sa taille */
.panier-nb.tasse { animation: tasse .32s cubic-bezier(.23, 1, .32, 1); }
@keyframes tasse { from { transform: scale(.72); } to { transform: scale(1); } }

.burger {
  display: none; grid-column: 1; justify-self: start;
  width: 44px; height: 44px; margin-left: -10px; padding: 0; border: 0; background: none;
  align-items: center; justify-content: center; color: var(--bordeaux); cursor: pointer;
  touch-action: manipulation;
}
.burger span { position: relative; display: block; width: 22px; height: 1.5px; background: currentColor; transition: background-color .2s ease; }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 22px; height: 1.5px; background: currentColor;
  transition: transform .3s var(--ease);
}
.burger span::before { transform: translateY(-6.5px); }
.burger span::after { transform: translateY(6.5px); }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after { transform: rotate(-45deg); }

.menu-mobile {
  display: none;
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--entete); border-bottom: 1px solid var(--filet-entete);
  box-shadow: 0 18px 30px -18px rgba(110, 10, 34, .25);
  padding: 4px var(--gouttiere) 22px;
  opacity: 0; transform: translateY(-8px); visibility: hidden;
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s linear .25s;
}
.menu-mobile.est-ouvert {
  opacity: 1; transform: none; visibility: visible;
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s;
}
.menu-mobile a:not(.ra-btn) {
  display: flex; align-items: center; justify-content: space-between; min-height: 54px;
  border-bottom: 1px solid var(--filet-l);
  font-family: var(--f-titre); font-weight: 600; font-size: 17px; letter-spacing: .06em;
  color: var(--bordeaux); text-decoration: none;
}
.menu-mobile a:not(.ra-btn)::after {
  content: ""; width: 8px; height: 8px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor;
  transform: rotate(45deg); margin-right: 4px; opacity: .6;
}
.menu-mobile .ra-btn { width: 100%; margin-top: 20px; }
.menu-mobile__note { margin-top: 16px; font-size: 16px; font-style: italic; color: var(--gris); text-align: center; }

@media (max-width: 959px) {
  .bandeau { display: block; }
  .entete__in { padding: 10px var(--gouttiere); grid-template-columns: 44px 1fr 44px; gap: 8px; }
  .burger { display: inline-flex; }
  .entete__nav--g, .entete__nav--d .ra-nav { display: none; }
  .entete__nav--d { grid-column: 3; justify-self: end; margin-right: -10px; }
  .logo { gap: 2px; }
  .logo img { height: 22px; }
  .logo span { font-size: 22px; }
  .panier-lien .ic-chariot { display: none; }
  .panier-lien .ic-sac { display: block; }
  .menu-mobile { display: block; }
}

/* Petits éléments partagés ---------------------------------------- */

.coeur { flex: none; }
.titre-section {
  display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center;
}
.titre-section h2 {
  font-family: var(--f-titre); font-weight: 600; font-size: clamp(32px, 4vw, 44px); line-height: 1.05; color: var(--titre);
}
.titre-section .en {
  font-family: var(--f-titre); font-weight: 500; font-size: clamp(16px, 1.8vw, 20px); letter-spacing: .1em; color: var(--bordeaux-en);
}
.filet-coeur {
  display: flex; align-items: center; gap: 10px; width: 420px; max-width: 80%; margin-top: 8px;
}
.filet-coeur span { flex: 1; height: 1px; background: var(--bordeaux); opacity: .35; }

.fond-rose {
  background: linear-gradient(180deg, var(--fond) 0, var(--rose) 120px, var(--rose) calc(100% - 120px), var(--fond) 100%);
}

/* Accueil · haut de page ----------------------------------------- */
/* Très grand titre, le coffret posé dessous (fond de la même teinte que la photo, il s'y fond),
   cachet tamponné sur le coin, et les formes tampons de l'emballage semées autour. */

.une { position: relative; }
.une__in {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding-top: clamp(22px, 3.4vw, 46px);
}
.une__titre {
  font-family: var(--f-titre); font-weight: 600; font-size: clamp(44px, 7.4vw, 108px); line-height: .98;
  letter-spacing: .01em; color: var(--bordeaux);
}
.une__titre span { display: inline-block; animation: monte 1s var(--ease) both; }
.une__titre span + span { animation-delay: .1s; }
.hero__de {
  display: flex; align-items: center; gap: 14px; width: 100%; max-width: 380px;
}
.hero__de span:not(.hero__de-txt) { flex: 1; height: 1px; background: var(--bordeaux); opacity: .45; }
.hero__de-txt {
  font-family: var(--f-titre); font-weight: 600; font-size: 22px; letter-spacing: .08em; color: var(--titre); white-space: nowrap;
}
.une__de { margin-top: 14px; animation: fondu 1s .3s var(--ease) both; }
.manuscrit {
  font-family: var(--f-main); font-weight: 500; color: var(--bordeaux-en);
}
.une__grille {
  width: 100%; display: grid; align-items: center; gap: 24px 36px;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr) minmax(0, 320px);
}
.hero__points {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 14px; text-align: left; max-width: 420px;
}
.hero__points li { display: flex; gap: 12px; font-size: 19px; line-height: 1.45; }
.hero__points li.en { font-size: 18px; color: var(--bordeaux-en); }
.hero__points li::before {
  content: ""; flex: none; width: 14px; height: 13px; margin-top: 7px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='13' viewBox='0 0 24 22'%3E%3Cpath d='M12 20C5.5 15 2 11.8 2 7.2a4.8 4.8 0 0 1 10-1.8 4.8 4.8 0 0 1 10 1.8c0 4.6-3.5 7.8-10 12.8z' fill='none' stroke='%23DC7189' stroke-width='2'/%3E%3C/svg%3E") no-repeat center / contain;
}
.une__desc { animation: fondu 1s .6s var(--ease) both; }
.une__produit { position: relative; width: 100%; max-width: 640px; justify-self: center; }
.une__granit {
  width: 100%; rotate: -3deg;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent), linear-gradient(transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent), linear-gradient(transparent, #000 10%, #000 90%, transparent);
  mask-composite: intersect;
  animation: granit-entre 1.2s .2s var(--ease) both, flotte 6s 1.4s ease-in-out infinite alternate;
}
.une__cachet {
  position: absolute; width: 23%; right: -5%; top: -9%; rotate: 10deg;
  animation: tamponne .55s 1.25s cubic-bezier(.3, 1.35, .5, 1) both;
}
.une__cote {
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  animation: fondu 1s .7s var(--ease) both;
}
.une__cote .manuscrit { font-size: 31px; line-height: 1.15; }
.hero__actions { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
.hero__actions .ra-btn { white-space: nowrap; }
/* Les formes tampons de l'emballage en décor de fond : grandes, pâles, derrière le titre, le texte et le Granit.
   Elles apparaissent l'une après l'autre puis flottent doucement ; trois tournent très lentement. */
.une__formes { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.forme {
  position: absolute; display: block; opacity: .42;
  animation: forme-entre 1.1s var(--d, 0s) var(--ease) backwards;
}
.forme img {
  display: block; width: 100%; height: auto;
  animation: flotte var(--t, 8s) calc(var(--d, 0s) + 1.1s) ease-in-out infinite alternate;
}
.forme.tourne img {
  animation: flotte var(--t, 8s) calc(var(--d, 0s) + 1.1s) ease-in-out infinite alternate, tourne var(--tour, 90s) linear infinite;
}
/* Sur le pourtour seulement : à gauche et à droite, un peu plus vers le centre en haut (de part et d'autre du titre). */
.f1  { width: clamp(100px, 12vw, 180px); left: -3%; top: -4%; --d: .2s; }
.f2  { width: clamp(50px, 5.5vw, 84px); left: 11%; top: 8%; --d: .35s; --t: 7s; }
.f3  { width: clamp(100px, 12vw, 180px); left: -6%; top: 36%; --d: .5s; --t: 9.5s; }
.f4  { width: clamp(36px, 3.6vw, 56px); left: 5%; top: 29%; --d: .65s; --tour: 70s; }
.f5  { width: clamp(64px, 7vw, 104px); left: 1%; top: 66%; --d: .8s; }
.f6  { width: clamp(70px, 8vw, 120px); left: 7%; bottom: 1%; --d: .95s; --t: 8.5s; }
.f7  { width: clamp(90px, 11vw, 170px); right: -2%; top: -3%; --d: .3s; --t: 9s; }
.f8  { width: clamp(48px, 5vw, 80px); right: 12%; top: 6%; --d: .45s; --t: 7.5s; }
.f9  { width: clamp(110px, 13vw, 200px); right: -6%; top: 36%; --d: .6s; --tour: 120s; }
.f10 { width: clamp(60px, 6.5vw, 100px); right: 5%; top: 23%; --d: .75s; }
.f11 { width: clamp(36px, 3.6vw, 56px); right: 2%; top: 72%; --d: .9s; --tour: 80s; }
.f12 { width: clamp(56px, 6vw, 90px); right: 6%; bottom: 1%; --d: 1.05s; --t: 7s; }
.une__cachet { z-index: 3; }
.une__in { position: relative; z-index: 1; padding-bottom: clamp(36px, 4vw, 56px); }
@keyframes monte { from { opacity: 0; translate: 0 28px; } }
@keyframes fondu { from { opacity: 0; } }
@keyframes granit-entre { from { opacity: 0; translate: 0 36px; rotate: -9deg; } }
@keyframes tamponne { from { opacity: 0; scale: 1.7; rotate: -6deg; } }
@keyframes flotte { to { translate: 0 -8px; } }
@keyframes forme-entre { from { opacity: 0; scale: .5; } }
@keyframes tourne { to { rotate: 1turn; } }

@media (max-width: 1199px) {
  .une__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .une__produit { grid-column: 1 / -1; grid-row: 1; max-width: 600px; }
  .une__desc { justify-self: end; }
  .une__cote { justify-self: start; }
}
@media (max-width: 699px) {
  .une__grille { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .une__produit { max-width: 480px; margin-top: 4px; }
  .une__cachet { right: -2%; top: -7%; }
  .une__desc, .une__cote { justify-self: center; }
  .une__cote { order: 1; width: 100%; }
  .une__desc { order: 2; }
}
@media (max-width: 639px) {
  .une__de { margin-top: 10px; }
  .hero__de-txt { font-size: 18px; }
  .une__cote .manuscrit { font-size: 26px; }
  .hero__points li { font-size: 18px; }
  .hero__points li.en { font-size: 17px; }
  .hero__actions { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .une__titre span, .une__de, .une__desc, .une__granit, .une__cachet, .une__cote, .forme, .forme img { animation: none !important; }
}

/* Deux roses à l'aquarelle très pâles à partir du 3e bloc : à gauche de « Nos spécialités », à droite de « Notre maison » (retournée).
   Posées sur le fond de la section, derrière son contenu : les cartes les cachent en partie. */
[data-decor] { position: relative; isolation: isolate; }
.decor {
  position: absolute; z-index: -1; top: 4%; height: clamp(380px, 42vw, 640px); width: auto;
  opacity: .75; pointer-events: none; user-select: none;
}
.decor--g { left: calc(50% - 50vw - clamp(40px, 4vw, 80px)); }
.decor--d { right: calc(50% - 50vw - clamp(40px, 4vw, 80px)); }
.decor--miroir { scale: -1 1; }
@media (max-width: 639px) {
  .decor { height: 300px; }
}

/* Bande « livraison, retrait, paiement » */
.atouts { padding-top: 8px; padding-bottom: 36px; }
.atouts__liste {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  border-top: 1px solid var(--filet-l); border-bottom: 1px solid var(--filet-l); padding: 20px 0;
}
.atout { display: flex; align-items: center; gap: 16px; padding: 0 24px; }
.atout:not([hidden]) ~ .atout { border-left: 1px solid var(--filet-l); }
.atout svg { flex: none; }
.atout p { line-height: 1.3; font-size: 16px; }
.atout strong { font-family: var(--f-titre); font-weight: 600; font-size: 16px; color: var(--titre); }

@media (max-width: 959px) {
  .atouts__liste { grid-auto-flow: row; grid-template-columns: 1fr; padding: 4px 0; }
  .atout { padding: 14px 4px; }
  .atout:not([hidden]) ~ .atout { border-left: 0; border-top: 1px solid var(--filet-l); }
}

/* Le Granit Rose · six qualités */
.granit { padding-top: 72px; padding-bottom: 80px; }
.granit__cadre {
  padding: 26px clamp(8px, 3vw, 40px) 30px;
  display: flex; flex-direction: column; align-items: center; gap: 30px;
}
.granit__cadre .titre-section { align-self: stretch; }
.qualites {
  width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 0;
  list-style: none; margin: 0; padding: 0;
}
.qualite { display: flex; gap: 22px; align-items: flex-start; padding: 0 clamp(12px, 3vw, 44px); }
.qualite:nth-child(even) { border-left: 1px solid var(--filet); }
.qualite img { width: 54px; height: 54px; object-fit: contain; flex: none; }
.qualite div { display: flex; flex-direction: column; gap: 2px; }
.qualite h3 {
  font-family: var(--f-texte); font-weight: 600; font-size: 19px; line-height: 1.2; letter-spacing: .04em;
  text-transform: uppercase; color: var(--titre);
}
.qualite .fr { font-size: 18px; line-height: 1.3; }
.qualite .en-titre { font-size: 16px; line-height: 1.3; letter-spacing: .04em; text-transform: uppercase; color: var(--bordeaux-en); margin-top: 6px; }
.qualite .en { font-size: 16px; line-height: 1.3; font-style: italic; color: var(--bordeaux-en); }

@media (max-width: 759px) {
  .granit { padding-top: 48px; padding-bottom: 56px; }
  .granit__cadre { padding: 18px 4px 22px; gap: 24px; }
  .qualites { grid-template-columns: 1fr; gap: 0; }
  .qualite { padding: 18px 8px; gap: 16px; }
  .qualite:nth-child(even) { border-left: 0; }
  .qualite + .qualite { border-top: 1px solid var(--filet-l); }
  .qualite img { width: 44px; height: 44px; }
  .qualite h3 { font-size: 17px; }
}
@media (max-width: 339px) {
  .granit__cadre .titre-section h2 { font-size: 28px; } /* « Le Granit Rose » tient sur une ligne dans la carte */
}

/* Nos spécialités · cartes produits */
.specialites { padding-top: 24px; }
.specialites .titre-section { margin-bottom: 30px; }
.produits {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px;
  list-style: none; margin: 0; padding: 0;
}
.produit {
  padding: 10px 10px 18px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
}
.produit__img {
  width: 100%; height: 220px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
  background: radial-gradient(ellipse at 50% 55%, #FFF3F0 0%, var(--creme-l) 70%);
}
.produit__img img { max-width: 88%; max-height: 88%; object-fit: contain; }
.produit h3 { font-family: var(--f-titre); font-weight: 600; font-size: 22px; line-height: 1.15; color: var(--titre); }
.produit__en { font-size: 15px; letter-spacing: .06em; text-transform: uppercase; color: var(--bordeaux-en); }
.produit .coeur { margin: 6px 0; }
.produit__desc { font-size: 18px; line-height: 1.35; max-width: 300px; }
.produit__desc-en { margin-top: 2px; font-size: 16px; line-height: 1.35; font-style: italic; color: var(--bordeaux-en); max-width: 300px; flex: 1; }
.prix { font-family: var(--f-titre); font-weight: 600; color: var(--titre); }
.produit .prix { font-size: 22px; margin: 16px 0 12px; }
.produit .ra-btn { min-width: 220px; }
.produit--coffret { display: none; }
.produit--coffret .produit__desc-en { display: none; }

@media (max-width: 959px) {
  .produits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .produit--coffret { display: flex; }
}
@media (max-width: 639px) {
  .specialites .titre-section { margin-bottom: 22px; }
  .produits { gap: 12px; }
  .produit { padding: 0 0 12px; gap: 2px; border-width: 12px; }
  .produit__img { height: 120px; margin-bottom: 10px; }
  .produit h3 { font-size: 16px; }
  .produit__en, .produit .coeur, .produit__desc, .produit__desc-en { display: none; }
  .produit .prix { font-size: 16px; margin: 4px 0 10px; flex: 1; }
  .produit .ra-btn { min-width: 0; width: 100%; min-height: 44px; padding: 0 8px; font-size: 12px; letter-spacing: .06em; gap: 6px; }
  .produit .ra-btn svg { width: 15px; height: 15px; }
}
.produit__nom-court { display: none; }
@media (max-width: 639px) {
  .produit__nom-long { display: none; }
  .produit__nom-court { display: inline; }
}

/* Le Coffret Gourmand (accueil) */
.coffret-bloc { margin-top: 40px; }
.coffret-bloc .conteneur { padding-top: 80px; padding-bottom: 72px; }
.coffret-bloc__cadre {
  padding: 26px clamp(8px, 3vw, 40px) 34px;
  display: flex; align-items: center; gap: 30px 48px;
}
.coffret-bloc__texte {
  flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px;
}
.coffret-bloc h2 { font-family: var(--f-titre); font-weight: 600; font-size: clamp(28px, 3vw, 36px); line-height: 1.05; color: var(--titre); }
.coffret-bloc .en { font-family: var(--f-titre); font-weight: 500; font-size: 19px; letter-spacing: .1em; color: var(--bordeaux-en); }
.coffret-bloc .coeur { margin: 8px 0; }
.coffret-bloc__fr { font-size: 21px; line-height: 1.35; color: var(--titre); }
.coffret-bloc__en { margin-top: 6px; font-size: 19px; line-height: 1.35; font-style: italic; color: var(--bordeaux-en); }
.coffret-bloc__contenu { margin-top: 18px; font-size: 18px; line-height: 1.5; }
.coffret-bloc__achat { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 24px; margin-top: 18px; }
.coffret-bloc__achat .prix { font-size: 26px; }
.coffret-bloc__note { margin-top: 14px; font-size: 16px; color: var(--bordeaux-en); }
.coffret-bloc__visuel { flex: 1 1 520px; min-width: 0; }
.coffret-bloc__visuel img { width: 100%; }

@media (max-width: 959px) {
  .coffret-bloc__cadre { flex-direction: column; }
  .coffret-bloc__texte, .coffret-bloc__visuel { flex: 0 0 auto; width: 100%; }
  .coffret-bloc__visuel { order: -1; max-width: 600px; }
}
@media (max-width: 639px) {
  .coffret-bloc { margin-top: 24px; }
  .coffret-bloc .conteneur { padding-top: 48px; padding-bottom: 48px; }
  .coffret-bloc__cadre { padding: 14px 4px 22px; gap: 22px; }
  .coffret-bloc .en { font-size: 16px; }
  .coffret-bloc__fr { font-size: 19px; }
  .coffret-bloc__en { font-size: 17px; }
  .coffret-bloc__contenu { font-size: 17px; }
  .coffret-bloc__achat { width: 100%; flex-direction: column; }
  .coffret-bloc__achat .ra-btn { width: 100%; }
}

/* Notre maison */
.maison {
  padding-top: 16px; padding-bottom: 72px;
  display: flex; align-items: center; gap: 40px 64px;
}
.maison__visuel { flex: 1 1 460px; min-width: 0; }
.maison__visuel .ra-card { padding: 6px; }
.maison__visuel img { width: 100%; height: 400px; object-fit: cover; object-position: 50% 55%; border-radius: 2px; }
.maison__texte { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; }
.maison h2 { font-family: var(--f-titre); font-weight: 600; font-size: clamp(32px, 3.4vw, 40px); line-height: 1.05; color: var(--titre); }
.maison .en { font-family: var(--f-titre); font-weight: 500; font-size: 19px; letter-spacing: .1em; color: var(--bordeaux-en); }
.maison .coeur { margin: 10px 0; }
.maison__fr { font-size: 20px; line-height: 1.5; max-width: 460px; }
.maison__note { margin-top: 10px; font-size: 18px; line-height: 1.45; font-style: italic; color: var(--bordeaux-en); max-width: 460px; }
.maison .ra-btn { margin-top: 22px; }

@media (max-width: 959px) {
  .maison { flex-direction: column; }
  .maison__visuel, .maison__texte { flex: 0 0 auto; width: 100%; }
  .maison__visuel { max-width: 600px; }
}
@media (max-width: 639px) {
  .maison { padding-bottom: 48px; gap: 26px; }
  .maison__visuel img { height: 280px; }
  .maison__fr { font-size: 19px; }
  .maison__note { font-size: 17px; }
  .maison .ra-btn { width: 100%; }
}

/* Engagements + accroche */
.engagements__cadre {
  padding: 14px 4px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 0;
  list-style: none; margin: 0;
}
.engagement { display: flex; align-items: center; gap: 16px; padding: 0 22px; }
.engagement + .engagement { border-left: 1px solid var(--filet-l); }
.engagement img { flex: none; height: auto; }
.engagement p { font-size: 15px; line-height: 1.3; text-transform: uppercase; color: var(--titre); }
.engagement em { font-size: 13px; color: var(--bordeaux-en); }
.accroche {
  margin-top: 34px; text-align: center;
  font-family: var(--f-main); font-weight: 500; font-size: clamp(24px, 3vw, 32px); line-height: 1.25; color: var(--bordeaux-en);
}
.accroche .coeur-txt { color: var(--coeur); }

@media (max-width: 1199px) {
  .engagements__cadre { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding: 4px 0; }
  .engagement { padding: 16px 14px; }
  .engagement + .engagement { border-left: 0; }
  .engagement:nth-child(even) { border-left: 1px solid var(--filet-l); }
  .engagement:nth-child(n+3) { border-top: 1px solid var(--filet-l); }
}
@media (max-width: 639px) {
  .engagement { flex-direction: column; text-align: center; gap: 10px; padding: 16px 6px; }
  .engagement img { max-height: 44px; width: auto !important; }
  .engagement p { font-size: 13px; letter-spacing: .02em; }
  .engagement em { font-size: 12px; }
  .accroche { margin-top: 26px; }
  .accroche .coeur-txt { display: block; font-size: 22px; line-height: 1; margin: 2px 0; }
}

/* Pied de page ---------------------------------------------------- */

.pied { background: linear-gradient(180deg, var(--fond) 0, var(--rose) 120px); }
.pied__in { padding-top: 72px; padding-bottom: 36px; display: flex; flex-direction: column; align-items: center; gap: 28px; }
.allergenes { width: 100%; padding: 14px 22px; display: flex; align-items: center; gap: 16px 28px; }
.allergenes img { width: 72px; flex: none; }
.allergenes div { flex: 1 1 auto; font-size: 16px; line-height: 1.45; }
.allergenes strong { font-family: var(--f-titre); font-weight: 600; font-size: 14px; color: var(--titre); }
.allergenes .en { margin-top: 4px; color: var(--bordeaux-en); }
.allergenes .en strong { color: var(--bordeaux-en); }

.pied__cols {
  width: 100%; margin-top: 16px; font-size: 17px;
  display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.3fr; gap: 36px 48px;
}
.pied__marque { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.pied__marque img { height: 30px; width: auto; }
.pied__marque .nom { font-family: var(--f-titre); font-weight: 700; font-size: 26px; color: var(--bordeaux); line-height: 1.1; }
.reseaux { display: flex; gap: 10px; margin-top: 10px; }
.reseaux a {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--bordeaux);
  display: inline-flex; align-items: center; justify-content: center; color: var(--bordeaux);
  transition: background-color .2s ease, color .2s ease;
}
@media (hover: hover) {
  .reseaux a:hover { background: var(--bordeaux); color: var(--creme); }
}
.pied__col { display: flex; flex-direction: column; gap: 6px; }
.pied__titre { font-family: var(--f-titre); font-weight: 600; font-size: 16px; color: var(--bordeaux); margin-bottom: 4px; }
.pied__col a { color: var(--texte); text-decoration: none; padding: 2px 0; }
@media (hover: hover) {
  .pied__col a:hover { color: var(--bordeaux); text-decoration: underline; text-underline-offset: 3px; }
}
.pied__contact { gap: 10px; }
.pied__contact > span { display: flex; gap: 10px; align-items: flex-start; }
.pied__contact svg { flex: none; margin-top: 4px; }
.pied__bas {
  width: 100%; border-top: 1px solid var(--filet); padding-top: 18px;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: 15px; color: var(--gris);
}
.pied__bas nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.pied__bas a { color: var(--gris); }

@media (max-width: 959px) {
  .pied__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
  .pied__marque, .pied__contact { grid-column: 1 / -1; }
}
@media (max-width: 639px) {
  .pied__in { padding-top: 48px; gap: 22px; }
  .allergenes { flex-direction: column; align-items: flex-start; padding: 8px 6px; gap: 10px; }
  .allergenes img { width: 56px; }
  .pied__cols { margin-top: 4px; font-size: 17px; }
  .pied__bas { flex-direction: column; }
}

/* Fiche Coffret ---------------------------------------------------- */

.ariane { padding-top: 14px; font-family: var(--f-titre); font-weight: 500; font-size: 13px; letter-spacing: .06em; color: var(--gris); }
.ariane ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; }
.ariane li + li::before { content: "/"; margin: 0 10px; opacity: .7; }
.ariane a { color: var(--gris); text-decoration: none; }
@media (hover: hover) {
  .ariane a:hover { color: var(--bordeaux); }
}
.ariane [aria-current] { color: var(--bordeaux-en); }

.fiche {
  padding-top: 32px;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px 80px; align-items: start;
}
.galerie { display: flex; flex-direction: column; gap: 16px; }
.galerie__vue { aspect-ratio: 560 / 540; padding: 24px; display: flex; align-items: center; justify-content: center; }
.galerie__vue img { max-width: 100%; max-height: 100%; object-fit: contain; transition: opacity .2s ease; }
.galerie__vue img.change { opacity: 0; }
.galerie__vue.galerie__vue--bande { aspect-ratio: auto; } /* photo seule et très allongée : le cadre suit son format (js/site.js) */
.galerie__vignettes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.galerie__vignettes button {
  height: 104px; padding: 14px; border: 0; border-bottom: 2px solid transparent; background: var(--creme); border-radius: 2px;
  cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color .2s ease;
}
@media (hover: hover) {
  .galerie__vignettes button:hover { border-bottom-color: var(--filet); }
}
.galerie__vignettes button[aria-pressed="true"] { border-bottom-color: var(--bordeaux); }
.galerie__vignettes img { max-width: 100%; max-height: 100%; object-fit: contain; }

.fiche__infos { display: flex; flex-direction: column; gap: 14px; }
.surtitre { font-family: var(--f-titre); font-weight: 600; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--bordeaux-en); }
.fiche h1 { font-family: var(--f-titre); font-weight: 600; font-size: clamp(32px, 3.4vw, 46px); line-height: 1.02; color: var(--bordeaux); }
.fiche__infos > .prix { font-size: 22px; }
.fiche__accroche { margin-top: 6px; font-size: 21px; line-height: 1.55; }
.fiche__accroche-en { margin-top: -6px; font-size: 19px; line-height: 1.45; font-style: italic; color: var(--bordeaux-en); }
.fiche__bloc { border-top: 1px solid var(--filet); margin-top: 14px; padding-top: 18px; }
.fiche__bloc h2, .fiche legend {
  font-family: var(--f-titre); font-weight: 700; font-size: 15px; letter-spacing: .04em; color: var(--bordeaux); margin: 0 0 8px;
}
.fiche__bloc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 19px; }
.fiche fieldset { border: 0; border-top: 1px solid var(--filet); margin: 14px 0 0; padding: 18px 0 0; min-width: 0; }
.fiche legend { float: left; width: 100%; padding: 0; }
.fiche fieldset .modes { clear: both; }

/* Choix du mode de réception (fiche + commande) */
.modes { display: flex; flex-direction: column; }
.mode {
  position: relative;
  display: flex; align-items: center; gap: 16px; width: 100%;
  padding: 14px 0; min-height: 56px; border-bottom: 1px solid var(--filet-l); cursor: pointer; color: var(--titre);
}
.mode input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mode__rond {
  width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--bordeaux); flex: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.mode__rond::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--bordeaux); transform: scale(0); transition: transform .2s var(--ease); }
.mode:has(input:checked) .mode__rond::after { transform: scale(1); }
.mode__txt { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.mode__nom { font-size: 20px; }
.mode:has(input:checked) .mode__nom { font-weight: 600; }
.mode__sous { font-size: 16px; font-style: italic; color: var(--gris); }
.mode__prix { font-family: var(--f-titre); font-weight: 600; font-size: 14px; color: var(--bordeaux); white-space: nowrap; }

.case { display: flex; align-items: center; gap: 12px; font-size: 19px; cursor: pointer; min-height: 44px; margin-top: 6px; }
.case input { width: 18px; height: 18px; accent-color: var(--bordeaux); flex: none; margin: 0; }

.champ { display: flex; flex-direction: column; gap: 6px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
.champ input, .champ select, .champ textarea {
  height: 48px; padding: 0 14px; border: 1px solid var(--contour); border-radius: 0; background: var(--rose-pale);
  font-family: var(--f-texte); font-size: 19px; letter-spacing: 0; text-transform: none; color: var(--titre);
  transition: border-color .2s ease;
  -webkit-appearance: none; appearance: none;
}
.champ select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236E0A22' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.champ textarea { height: auto; min-height: 96px; padding: 12px 14px; resize: vertical; line-height: 1.4; }
@media (hover: hover) {
  .champ input:hover, .champ select:hover, .champ textarea:hover { border-color: var(--bordeaux-en); }
}
.champ input::placeholder, .champ textarea::placeholder { color: #8E6E74; }
.champ.est-invalide input { border-color: var(--bordeaux); box-shadow: inset 0 0 0 1px var(--bordeaux); }
.champ__erreur { display: none; font-size: 14px; letter-spacing: 0; text-transform: none; font-style: italic; color: var(--bordeaux); }
.champ.est-invalide .champ__erreur { display: block; }

.mot { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ease); }
.mot > div { overflow: hidden; }
.mot.est-ouvert { grid-template-rows: 1fr; }
.mot .champ { padding: 6px; }
.mot textarea { scroll-margin: 16px 0; } /* ouvert, le champ vient à l’écran avec son anneau de focus */
@media (prefers-reduced-motion: reduce) { .mot { transition: none; } }

.quantite { display: inline-flex; align-items: center; border: 1px solid var(--bordeaux); height: 52px; background: transparent; }
.quantite button {
  width: 48px; height: 100%; border: 0; background: none; font-size: 22px; line-height: 1; color: var(--bordeaux); cursor: pointer;
  touch-action: manipulation; transition: background-color .2s ease;
}
@media (hover: hover) {
  .quantite button:not(:disabled):hover { background: rgba(110, 10, 34, .06); }
}
.quantite button:disabled { opacity: .35; cursor: default; background: none; }
.quantite output { min-width: 28px; text-align: center; font-family: var(--f-titre); font-weight: 600; font-size: 16px; }
.quantite--petit { height: 44px; }
.quantite--petit button { width: 40px; font-size: 19px; }

.fiche__achat { display: flex; flex-wrap: wrap; gap: 14px; align-items: stretch; margin-top: 10px; }
.fiche__achat .ra-btn { flex: 1 1 220px; min-height: 52px; }
.fiche__note { margin-top: 6px; font-size: 17px; font-style: italic; color: var(--gris); }

.fiche-infos { padding-top: 72px; }
.fiche-infos__cadre { padding: 6px 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fiche-info { padding: 4px 22px 8px; display: flex; flex-direction: column; gap: 8px; }
.fiche-info + .fiche-info { border-left: 1px solid var(--filet-l); }
.fiche-info h3 { font-family: var(--f-titre); font-weight: 600; font-size: 16px; color: var(--bordeaux); }
.fiche-info p { font-size: 17px; line-height: 1.45; }
.fiche-info p.en { font-size: 15px; font-style: italic; color: var(--bordeaux-en); }

.complement { padding-top: 88px; }
.complement h2 { text-align: center; font-family: var(--f-titre); font-weight: 600; font-size: clamp(26px, 3vw, 34px); color: var(--bordeaux); margin-bottom: 30px; }
.complement__liste { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px; list-style: none; margin: 0; padding: 0; }
.complement__item { flex: 0 1 calc((100% - 56px) / 3); min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.complement__img { width: 100%; height: 190px; padding: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.complement__img img { max-width: 88%; max-height: 100%; object-fit: contain; }
.complement__item h3 { font-family: var(--f-titre); font-weight: 600; font-size: 19px; color: var(--bordeaux); }
.complement__item .prix { font-size: 16px; }
.complement__item .ra-link { margin-top: 8px; font-size: 13px; }

@media (max-width: 959px) {
  .fiche { grid-template-columns: 1fr; gap: 32px; }
  .galerie { max-width: 640px; width: 100%; margin: 0 auto; }
  .fiche-infos__cadre { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fiche-info:nth-child(3) { border-left: 0; }
  .fiche-info:nth-child(n+3) { border-top: 1px solid var(--filet-l); padding-top: 16px; }
  .fiche-info:nth-child(-n+2) { padding-bottom: 16px; }
}
@media (max-width: 639px) {
  .fiche { padding-top: 18px; gap: 26px; }
  .galerie { gap: 10px; }
  .galerie__vue { aspect-ratio: 4 / 3; padding: 8px; }
  .galerie__vignettes { gap: 8px; }
  .galerie__vignettes button { height: 64px; padding: 8px; }
  .fiche__accroche { font-size: 19px; }
  .fiche__accroche-en { font-size: 17px; }
  .fiche__bloc ul { font-size: 18px; }
  .mode__nom { font-size: 18px; }
  .mode__sous { font-size: 15px; }
  .case { font-size: 18px; }
  .fiche__achat .quantite { flex: 0 0 auto; }
  .fiche__achat .ra-btn { flex: 1 1 0; padding: 0 12px; }
  .fiche-infos { padding-top: 48px; }
  .fiche-infos__cadre { grid-template-columns: 1fr; padding: 0; }
  .fiche-info { padding: 16px 6px !important; border-left: 0 !important; }
  .fiche-info + .fiche-info { border-top: 1px solid var(--filet-l); }
  .complement { padding-top: 56px; }
  .complement h2 { margin-bottom: 18px; }
  .complement__liste { gap: 12px; }
  .complement__item { flex-basis: 100%; flex-direction: row; text-align: left; gap: 14px; align-items: center; }
  .complement__img { width: 112px; height: 88px; flex: none; margin: 0; padding: 4px; border-width: 12px; }
  .complement__txt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
  .complement__item h3 { font-size: 16px; }
  .complement__item .ra-link { margin-top: 6px; }
}
@media (min-width: 640px) {
  .complement__txt { display: contents; }
  .complement__item h3 { min-height: 2.3em; line-height: 1.15; display: flex; align-items: flex-end; justify-content: center; }
}

/* Commande --------------------------------------------------------- */

/* Sous l'en-tête du site : les étapes de la commande et « Paiement sécurisé » */
.tunnel {
  max-width: calc(var(--largeur) + 2 * var(--gouttiere)); margin: 0 auto; padding: 28px var(--gouttiere) 0;
  display: flex; align-items: center; justify-content: space-between; gap: 12px 24px;
}
.etapes { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 14px; font-family: var(--f-titre); font-weight: 600; font-size: 14px; letter-spacing: .08em; color: var(--gris); }
.etapes .trait { width: 32px; height: 1px; background: var(--filet); }
.etapes .fait { color: var(--bordeaux); }
.etapes [aria-current] { color: var(--bordeaux); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.securise { flex: none; display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-titre); font-weight: 600; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }

.commande { padding-top: 24px; padding-bottom: 80px; display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 48px 72px; align-items: start; }
/* De 960 à 1199 px, un récapitulatif plus étroit : le nom des articles garde sa colonne */
@media (min-width: 960px) and (max-width: 1199px) {
  .commande { grid-template-columns: minmax(0, 1fr) 320px; column-gap: 40px; }
}
.commande h1 { font-family: var(--f-titre); font-weight: 600; font-size: clamp(32px, 3.4vw, 42px); line-height: 1.05; color: var(--bordeaux); margin-bottom: 28px; }
.commande__section + .commande__section { margin-top: 40px; }
.commande__section h2 {
  font-family: var(--f-titre); font-weight: 700; font-size: 17px; letter-spacing: .04em; color: var(--bordeaux);
  padding-bottom: 12px; border-bottom: 1px solid var(--filet); margin-bottom: 4px;
}

.ligne { display: grid; grid-template-columns: 80px minmax(0, 1fr) auto 90px; align-items: center; gap: 16px 22px; padding: 14px 0; border-bottom: 1px solid var(--filet-l); }
.ligne__img { width: 80px; height: 64px; background: var(--creme); display: flex; align-items: center; justify-content: center; padding: 4px; }
.ligne__img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ligne__nom { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ligne__nom strong { font-family: var(--f-titre); font-weight: 600; font-size: 17px; color: var(--bordeaux); }
.ligne__nom > span { font-size: 15px; font-style: italic; color: var(--gris); }
.ligne__nom > button { align-self: flex-start; margin-top: 4px; padding: 0; border: 0; background: none; font-size: 15px; color: var(--gris); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (hover: hover) {
  .ligne__nom > button:hover { color: var(--bordeaux); }
}
.ligne .prix { text-align: right; font-size: 16px; }
.panier-vide { padding: 28px 0 8px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; font-size: 19px; }
.panier-vide p { font-style: italic; color: var(--gris); }

.reception-detail { margin-top: 22px; }
.grille-champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: end; }
fieldset.grille-champs { border: 0; margin: 0; padding: 0; min-width: 0; }
.grille-champs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 18px; }
.grille-champs .large { grid-column: 1 / -1; }
/* Chaque champ partage les rangées de sa ligne (libellé, case, message) : les cases restent alignées même quand un
   libellé passe sur deux lignes ou qu’un seul des deux champs affiche son message d’erreur */
@supports (grid-template-rows: subgrid) {
  .grille-champs { row-gap: 10px; align-items: stretch; }
  .grille-champs > .champ { display: grid; grid-row: span 3; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); row-gap: 6px; align-items: end; }
  .grille-champs > .champ > .champ__erreur { align-self: start; }
}
.relais-zone { margin-top: 14px; background: var(--creme); padding: 28px; text-align: center; font-size: 18px; font-style: italic; color: var(--gris); }
.retrait { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: flex-end; }
.retrait .champ { flex: 1 1 220px; }
.retrait p { flex: 1 1 260px; font-size: 18px; line-height: 1.45; font-style: italic; color: var(--gris); }
.commande .case { margin-top: 16px; font-size: 18px; }

.recap { position: sticky; top: 24px; padding: 20px 10px 22px; display: flex; flex-direction: column; }
.recap h2 { font-family: var(--f-titre); font-weight: 600; font-size: 22px; color: var(--bordeaux); margin-bottom: 16px; }
.recap__ligne { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; font-size: 18px; }
.recap__ligne span:last-child { white-space: nowrap; }
.recap__total { margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--filet); display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.recap__total span:first-child { font-family: var(--f-titre); font-weight: 700; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--titre); }
.recap__total .prix { font-size: 24px; }
.recap .ra-btn { margin-top: 20px; width: 100%; }
.recap .ra-btn:disabled { opacity: .45; cursor: default; background: var(--bordeaux); }
.recap__note { margin-top: 14px; text-align: center; font-size: 15px; font-style: italic; color: var(--gris); }
.recap__info { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--filet); font-size: 15px; line-height: 1.45; color: var(--texte); }
.recap__alerte { display: none; margin-top: 12px; font-size: 15px; font-style: italic; color: var(--bordeaux); text-align: center; }
.recap__alerte.visible { display: block; }

@media (max-width: 959px) {
  .commande { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .recap { position: static; }
}
@media (max-width: 639px) {
  .tunnel { padding-top: 16px; }
  .securise span { display: none; }
  .securise { width: 44px; height: 44px; justify-content: center; margin-right: -10px; }
  .etapes { gap: 10px; font-size: 12px; }
  .etapes .trait { width: 18px; }
  .commande { padding-top: 12px; padding-bottom: 56px; }
  .commande h1 { margin-bottom: 18px; }
  .commande__section + .commande__section { margin-top: 32px; }
  .ligne { grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 8px 14px; }
  .ligne__img { width: 64px; height: 56px; grid-row: 1 / 3; align-self: start; }
  .ligne__nom { grid-column: 2 / 4; }
  .ligne .quantite { grid-column: 2; justify-self: start; }
  .ligne .prix { grid-column: 3; }
  .grille-champs, .grille-champs--3 { grid-template-columns: 1fr; }
  .relais-zone { padding: 20px 16px; font-size: 17px; }
  .recap { padding: 12px 4px 18px; }
}

/* Confirmation */
.merci { max-width: 640px; margin: 0 auto; padding: 72px var(--gouttiere) 96px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.merci > img { height: 40px; width: auto; }
.merci h1 { font-family: var(--f-titre); font-weight: 600; font-size: clamp(40px, 6vw, 56px); line-height: 1; color: var(--bordeaux); }
.merci h1:focus { outline: none; } /* focus posé par le script pour la lecture, ce n'est pas une cible */
.merci .filet-coeur { width: 260px; margin: 4px 0; }
.merci__txt { font-size: 21px; line-height: 1.55; }
.merci .manuscrit { font-size: 28px; margin-top: 6px; }
.merci__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px 28px; margin-top: 18px; }
@media (max-width: 639px) {
  .merci { padding-top: 40px; padding-bottom: 64px; }
  .merci__txt { font-size: 19px; }
  .merci__actions { width: 100%; flex-direction: column; }
  .merci__actions .ra-btn { width: 100%; }
}

/* Message flottant « ajouté au panier » */
.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 80;
  display: flex; align-items: center; gap: 16px;
  max-width: calc(100% - 32px); padding: 12px 14px 12px 20px;
  background: var(--bordeaux); color: var(--creme); border-radius: 2px;
  box-shadow: 0 12px 30px -12px rgba(74, 6, 22, .55);
  font-size: 17px;
  transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.toast.visible { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.toast a { flex: none; color: var(--creme); font-family: var(--f-titre); font-weight: 600; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid rgba(252, 230, 224, .5); padding: 6px 0 2px; }
@media (hover: hover) {
  .toast a:hover { color: #fff; border-color: #fff; }
}
@media (max-width: 639px) {
  .toast { bottom: max(16px, env(safe-area-inset-bottom)); width: calc(100% - 32px); justify-content: space-between; font-size: 16px; }
}
@media (max-width: 374px) {
  .toast { flex-wrap: wrap; font-size: 15px; line-height: 1.3; }
  .toast .toast__txt { padding: 4px 0; }
  .toast a { margin-left: auto; }
  .toast__img { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

@media (max-width: 639px) {
  .hors-mobile { display: none; }
}
@media (max-width: 639px) {
  .ariane li:not(:first-child):not(:last-child) { display: none; }
}
@media (max-width: 374px) {
  .bandeau { font-size: 12px; letter-spacing: .08em; padding-left: 8px; padding-right: 8px; }
  .ra-btn { padding: 0 14px; letter-spacing: .04em; }
}
@media (max-width: 1199px) {
  .produit .hors-mobile { display: none; }
}

/* Liste des points relais (commande) */
.relais-liste { margin-top: 14px; background: var(--creme); padding: 4px 20px 6px; }
.relais-titre { padding: 12px 0 4px; font-size: 15px; font-style: italic; color: var(--gris); }
.mode.relais { min-height: 0; padding: 12px 0; align-items: flex-start; }
.mode.relais .mode__rond { margin-top: 4px; }
.mode.relais:last-child { border-bottom: 0; }
.relais__txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.relais__txt strong { font-family: var(--f-titre); font-weight: 600; font-size: 16px; color: var(--bordeaux); }
.relais__txt span { font-size: 15px; color: var(--gris); }
@media (max-width: 639px) {
  .relais-liste { padding: 2px 14px 4px; }
}

/* Bords des photos fondus dans les cartes (les fonds des photos du flyer dessinaient un rectangle) */
.produit__img img, .complement__img img, .galerie__vue img, .galerie__vignettes img {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent), linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent), linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  mask-composite: intersect;
}

/* Panier vide : ni réception, ni coordonnées, ni paiement tant qu’on ne demande pas de devis */
.commande.est-vide:not(.est-devis) .commande__section[aria-labelledby="h-mode"],
.commande.est-vide:not(.est-devis) .commande__section[aria-labelledby="h-coord"],
.commande.est-vide:not(.est-devis) [data-payer],
.commande.est-vide:not(.est-devis) .recap__note[data-paiement-seulement] { display: none; }

/* Cibles de 44 px au toucher : pied de page, fil d’Ariane, lien de la confirmation */
@media (max-width: 959px) {
  .pied__col:not(.pied__contact) { gap: 0; }
  .pied__col a, .pied__bas a, .ariane a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  .pied__bas nav { row-gap: 0; }
  .ariane ol { align-items: center; }
  .merci__actions .ra-link {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0; border-bottom: 0;
    text-decoration: underline; text-decoration-color: var(--filet); text-decoration-thickness: 1px; text-underline-offset: 6px;
  }
}

/* Contraste élevé de Windows : les cadres dessinés en image de bordure prennent les couleurs du système */
@media (forced-colors: active) {
  .ra-card, .ra-card-l { border-image: none; border: 1px solid CanvasText; background: Canvas; }

/* Très petits téléphones : les trois étapes seules, le cadenas ne tient plus à côté */
@media (max-width: 359px) {
  .tunnel .securise { display: none; }
}