/* Thème « Atelier » — piloté par les réglages d'apparence de chaque site (couleurs, police, fond, coins). */
@font-face { font-family: "Inter"; src: url("polices/inter-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("polices/manrope-latin-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("polices/fraunces-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("polices/fraunces-latin-wght-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("polices/playfair-display-latin-wght-normal.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("polices/playfair-display-latin-wght-italic.woff2") format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("polices/space-grotesk-latin-wght-normal.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Lora"; src: url("polices/lora-latin-wght-normal.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Lora"; src: url("polices/lora-latin-wght-italic.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("polices/dm-sans-latin-wght-normal.woff2") format("woff2"); font-weight: 100 1000; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("polices/bricolage-grotesque-latin-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Bebas Neue"; src: url("polices/bebas-neue-latin-wght-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("polices/caveat-latin-wght-normal.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("polices/cormorant-garamond-latin-wght-normal.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("polices/cormorant-garamond-latin-wght-italic.woff2") format("woff2"); font-weight: 300 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("polices/outfit-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Syne"; src: url("polices/syne-latin-wght-normal.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "Fredoka"; src: url("polices/fredoka-latin-wght-normal.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Shrikhand"; src: url("polices/shrikhand-latin-wght-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("polices/archivo-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --systeme: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
  --titres: var(--systeme);
  --texte: var(--systeme);
  --poids-titres: 700;
  --espacement-titres: -0.02em;
  --fond: #ffffff; --surface: #f6f6f4; --encre: #16181d; --encre-2: #565d68; --ligne: #e6e6e3;
  --sombre: #15171b;
  --r: 8px; --r-btn: 8px;
  --largeur: 1180px;
  --teinte: color-mix(in srgb, var(--primaire) 7%, var(--fond));
  --primaire-fonce: color-mix(in srgb, var(--primaire) 80%, #000);
  --lien: color-mix(in srgb, var(--primaire) 85%, var(--encre));
}
.police-moderne { --titres: "Manrope", var(--systeme); --texte: "Inter", var(--systeme); --poids-titres: 750; --espacement-titres: -0.03em; }
.police-editorial { --titres: "Fraunces", var(--serif); --texte: "Inter", var(--systeme); --poids-titres: 560; --espacement-titres: -0.015em; }
.police-elegant { --titres: "Playfair Display", var(--serif); --texte: "DM Sans", var(--systeme); --poids-titres: 600; --espacement-titres: -0.01em; }
.police-technique { --titres: "Space Grotesk", var(--systeme); --texte: "Inter", var(--systeme); --poids-titres: 650; --espacement-titres: -0.025em; }
.police-litteraire { --titres: "Lora", var(--serif); --texte: "Lora", var(--serif); --poids-titres: 600; --espacement-titres: -0.01em; }
.police-festif { --titres: "Bricolage Grotesque", var(--systeme); --texte: "Outfit", var(--systeme); --poids-titres: 800; --espacement-titres: -0.035em; }
.police-manuscrit { --titres: "Caveat", cursive; --texte: "DM Sans", var(--systeme); --poids-titres: 700; --espacement-titres: 0; }
.police-geometrique { --titres: "Outfit", var(--systeme); --texte: "Outfit", var(--systeme); --poids-titres: 700; --espacement-titres: -0.025em; }
.police-artistique { --titres: "Syne", var(--systeme); --texte: "Outfit", var(--systeme); --poids-titres: 700; --espacement-titres: -0.04em; }
.police-luxe { --titres: "Cormorant Garamond", var(--serif); --texte: "Outfit", var(--systeme); --poids-titres: 500; --espacement-titres: -0.01em; }
.police-industriel { --titres: "Bebas Neue", Impact, var(--systeme); --texte: "Archivo", var(--systeme); --poids-titres: 400; --espacement-titres: 0.01em; }
.police-ludique { --titres: "Fredoka", var(--systeme); --texte: "Fredoka", var(--systeme); --poids-titres: 600; --espacement-titres: -0.01em; }
.police-retro { --titres: "Shrikhand", var(--serif); --texte: "DM Sans", var(--systeme); --poids-titres: 400; --espacement-titres: 0; }
.police-manuscrit h1, .police-manuscrit h2 { line-height: 1; }
.police-industriel h1, .police-industriel h2, .police-industriel h3 { text-transform: uppercase; line-height: .98; }
.police-ludique body, body.police-ludique { line-height: 1.6; }
.fond-creme { --fond: #fbf8f2; --surface: #f2ece1; --encre: #1f1b16; --encre-2: #5f574c; --ligne: #e6ddcd; }
.fond-gris { --fond: #f3f4f5; --surface: #ffffff; --encre: #15181c; --encre-2: #555c66; --ligne: #dfe2e6; }
.fond-sombre { --fond: #111316; --surface: #1a1d22; --encre: #f2f3f5; --encre-2: #a8aeb7; --ligne: #2a2f37; --sombre: #08090b;
  --teinte: color-mix(in srgb, var(--primaire) 14%, var(--fond)); --lien: color-mix(in srgb, var(--primaire) 45%, #fff); }
.coins-aucun { --r: 0px; --r-btn: 0px; }
.coins-prononce { --r: 18px; --r-btn: 999px; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font: 17px/1.65 var(--texte); color: var(--encre); background: var(--fond); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
.police-litteraire body, body.police-litteraire { line-height: 1.72; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--lien); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--primaire); }
h1, h2, h3, h4 { font-family: var(--titres); font-weight: var(--poids-titres); letter-spacing: var(--espacement-titres); line-height: 1.12; margin: 0 0 .5em; color: inherit; text-wrap: balance; }
h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
h3 { font-size: 1.22rem; line-height: 1.3; }
p { margin: 0 0 1em; text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.evitement { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--fond); padding: 10px 14px; }
.evitement:focus { left: 8px; }
.enveloppe { width: min(var(--largeur), 100% - 40px); margin-inline: auto; }
.etroit { width: min(760px, 100% - 40px); margin-inline: auto; }
.pre { white-space: pre-line; }
.discret { color: var(--encre-2); }

/* ---------- Barre d'administration (visible par l'équipe connectée seulement) ---------- */
.barre-admin { background: #1b1033; color: #e9e3ff; font: 500 13px/1 var(--systeme); display: flex; gap: 16px; align-items: center; padding: 9px 20px; flex-wrap: wrap; }
.barre-admin a { color: #fff; text-decoration: none; font-weight: 600; }
.barre-admin a:hover { text-decoration: underline; color: #fff; }
.barre-admin .etiq { background: #f59e0b; color: #1b1033; padding: 3px 8px; border-radius: 999px; font-weight: 700; }

/* ---------- Bandeau d'annonce ---------- */
.annonce { background: var(--accent); color: var(--sur-accent); text-align: center; font-size: .9rem; font-weight: 600; padding: 9px 16px; }
.annonce a { color: inherit; }

/* ---------- En-tête ---------- */
.entete { background: var(--fond); border-bottom: 1px solid var(--ligne); position: sticky; top: 0; z-index: 30; }
.entete-int { display: flex; align-items: center; gap: 28px; min-height: 76px; }
.marque { display: flex; align-items: center; gap: 12px; color: var(--encre); text-decoration: none; font-family: var(--titres); font-weight: var(--poids-titres); font-size: 1.3rem; letter-spacing: var(--espacement-titres); flex: none; }
.marque:hover { color: var(--encre); }
.marque img { height: 46px; width: auto; max-width: 220px; object-fit: contain; }
.nav-principale { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav-principale > .item { position: relative; }
.nav-principale > .item > a { display: block; padding: 10px 12px; color: var(--encre); text-decoration: none; font-weight: 500; font-size: .98rem; border-radius: var(--r-btn); }
.nav-principale > .item > a:hover, .nav-principale > .item > a[aria-current] { background: var(--teinte); color: var(--encre); }
.sous-menu { position: absolute; top: 100%; left: 0; min-width: 220px; background: var(--fond); border: 1px solid var(--ligne); border-radius: var(--r); padding: 8px; box-shadow: 0 16px 40px rgba(0,0,0,.12); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .15s, transform .15s, visibility .15s; z-index: 40; }
.item:hover .sous-menu, .item:focus-within .sous-menu { opacity: 1; visibility: visible; transform: none; }
.sous-menu a { display: block; padding: 9px 12px; color: var(--encre); text-decoration: none; border-radius: calc(var(--r) - 2px); font-size: .95rem; }
.sous-menu a:hover { background: var(--teinte); }
.outils { display: flex; align-items: center; gap: 4px; }
.outil { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 42px; min-width: 42px; padding: 0 10px; border-radius: var(--r-btn); color: var(--encre); text-decoration: none; position: relative; background: none; border: 0; cursor: pointer; font: inherit; }
.outil:hover { background: var(--teinte); color: var(--encre); }
.outil svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.outil .pastille { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; border-radius: 999px; background: var(--primaire); color: var(--sur-primaire); font: 700 11px/18px var(--systeme); text-align: center; padding: 0 5px; }
.entete-centre .entete-int { flex-wrap: wrap; justify-content: center; padding-top: 18px; gap: 6px 28px; }
.entete-centre .marque { order: 0; width: 100%; justify-content: center; }
.entete-centre .nav-principale { margin-left: 0; order: 2; }
.entete-centre .outils { position: absolute; right: max(20px, calc((100vw - var(--largeur)) / 2)); top: 22px; }
.menu-mobile { display: none; }
.nom-marque { display: block; }
.bouton-entete { padding: 11px 20px; font-size: .95rem; white-space: nowrap; }
.tel-entete { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; font-weight: 600; white-space: nowrap; }
.tel-entete svg, .outil svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.recherche-large { flex: 1; display: flex; max-width: 560px; position: relative; }
.recherche-large input { min-height: 46px; padding-right: 50px; border-radius: var(--r-btn); }
.recherche-large button { position: absolute; right: 4px; top: 4px; bottom: 4px; width: 42px; border: 0; border-radius: var(--r-btn); background: var(--primaire); color: var(--sur-primaire); cursor: pointer; display: grid; place-items: center; }
.recherche-large svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }
.recherche-entete { border-top: 1px solid var(--ligne); background: var(--fond); }
.recherche-entete form { display: flex; gap: 10px; padding: 14px 0; }

/* ---------- Boutons ---------- */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 600 1rem/1.2 var(--texte); padding: 14px 26px; border-radius: var(--r-btn); border: 2px solid transparent; text-decoration: none; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s, transform .15s; text-align: center; }
.bouton:active { transform: translateY(1px); }
.bouton-primaire { background: var(--primaire); color: var(--sur-primaire); }
.bouton-primaire:hover { background: var(--primaire-fonce); color: var(--sur-primaire); }
.bouton-accent { background: var(--accent); color: var(--sur-accent); }
.bouton-accent:hover { background: color-mix(in srgb, var(--accent) 86%, #000); color: var(--sur-accent); }
.bouton-contour { border-color: currentColor; color: inherit; background: transparent; }
.bouton-contour:hover { background: color-mix(in srgb, currentColor 9%, transparent); color: inherit; }
.bouton-large { width: 100%; }
.bouton[disabled] { opacity: .5; cursor: not-allowed; }
.lien-fleche { font-weight: 600; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.lien-fleche:hover { text-decoration: underline; }

/* ---------- Sections ---------- */
.section { padding-block: clamp(56px, 8vw, 96px); }
.section.esp-compact { padding-block: clamp(32px, 5vw, 52px); }
.section.esp-large { padding-block: clamp(80px, 11vw, 140px); }
.section.f-aucun + .section.f-aucun, .section.f-teinte + .section.f-teinte { padding-top: 0; }
.f-teinte { background: var(--surface); }
.f-primaire { background: var(--primaire); color: var(--sur-primaire); --encre-2: color-mix(in srgb, var(--sur-primaire) 78%, transparent); --lien: var(--sur-primaire); --ligne: color-mix(in srgb, var(--sur-primaire) 22%, transparent); }
.f-sombre { background: var(--sombre); color: #f3f4f6; --encre: #f3f4f6; --encre-2: #b4bac3; --lien: #fff; --ligne: rgba(255,255,255,.14); --surface: rgba(255,255,255,.05); }
.f-primaire .bouton-primaire { background: var(--sur-primaire); color: var(--primaire); }
.f-sombre .bouton-primaire { background: var(--accent); color: var(--sur-accent); }
.tete-section { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: clamp(28px, 4vw, 44px); flex-wrap: wrap; }
.tete-section h2 { margin: 0; }
.tete-section.centre { flex-direction: column; align-items: center; text-align: center; }
.intro-section { color: var(--encre-2); font-size: 1.1rem; max-width: 62ch; margin: 10px 0 0; }
.centre { text-align: center; }
.centre .intro-section { margin-inline: auto; }

/* ---------- Texte riche ---------- */
.prose { max-width: 70ch; }
.prose.large { max-width: none; columns: 2 360px; column-gap: 56px; }
.prose.centre { margin-inline: auto; }
.prose h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-top: 1.6em; }
.prose h3 { margin-top: 1.5em; }
.prose > :first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li { margin-bottom: .4em; }
.prose blockquote { margin: 1.8em 0; padding: .3em 0 .3em 1.3em; border-left: 3px solid var(--accent); font-family: var(--titres); font-size: 1.25rem; line-height: 1.45; }
.prose img { border-radius: var(--r); margin: 1.5em 0; }
.prose table { border-collapse: collapse; width: 100%; margin: 1.5em 0; }
.prose th, .prose td { border-bottom: 1px solid var(--ligne); padding: 10px 8px; text-align: left; }
.prose hr { border: 0; border-top: 1px solid var(--ligne); margin: 2.5em 0; }

/* ---------- Bannière ---------- */
.banniere { position: relative; display: flex; align-items: center; overflow: hidden; }
.banniere.h-moyenne { min-height: min(52vh, 560px); }
.banniere.h-grande { min-height: min(76vh, 780px); }
.banniere.h-ecran { min-height: calc(100vh - 76px); }
.banniere .contenu-banniere { position: relative; z-index: 2; padding-block: clamp(64px, 10vw, 120px); }
.banniere h1 { font-size: clamp(2.5rem, 6.4vw, 5rem); line-height: 1.02; max-width: 16ch; margin-bottom: .32em; }
.banniere .chapeau { font-size: clamp(1.08rem, 1.9vw, 1.32rem); max-width: 54ch; opacity: .92; margin: 0; }
.banniere .appels { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 34px; }
.banniere.a-centre { text-align: center; }
.banniere.a-centre h1, .banniere.a-centre .chapeau { margin-inline: auto; }
.banniere.a-centre .appels { justify-content: center; }
.banniere.s-couleur { background: var(--primaire); color: var(--sur-primaire); }
.banniere.s-couleur .bouton-primaire { background: var(--sur-primaire); color: var(--primaire); }
.banniere.s-couleur .bouton-contour { color: var(--sur-primaire); }
.banniere.s-couleur::after { content: ""; position: absolute; inset: auto -10% -45% auto; width: 60vw; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 40%, transparent), transparent 65%); opacity: .55; z-index: 1; pointer-events: none; }
.banniere.s-image { color: #fff; background: var(--sombre); }
.banniere.s-image .fond-image { position: absolute; inset: 0; z-index: 0; }
.banniere.s-image .fond-image img { width: 100%; height: 100%; object-fit: cover; }
.banniere.s-image .fond-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(10, 12, 16, .72) 0%, rgba(10, 12, 16, .45) 55%, rgba(10, 12, 16, .2) 100%); }
.banniere.s-image.a-centre .fond-image::after { background: rgba(10, 12, 16, .55); }
.banniere.s-image .bouton-contour { color: #fff; }
.banniere.s-clair { background: var(--surface); }
.banniere.s-clair.h-moyenne { min-height: 0; }
.banniere.s-clair .contenu-banniere { padding-block: clamp(56px, 8vw, 96px); }
.banniere.s-clair h1 { font-size: clamp(2.3rem, 5vw, 3.8rem); }
.banniere.s-clair .chapeau { color: var(--encre-2); }
.banniere.s-partage { background: var(--fond); }
.banniere.s-partage .contenu-banniere { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: center; padding-block: clamp(48px, 7vw, 88px); }
.banniere.s-partage .image-partage { aspect-ratio: 4 / 5; border-radius: var(--r); overflow: hidden; background: var(--teinte); }
.banniere.s-partage .image-partage img { width: 100%; height: 100%; object-fit: cover; }
.banniere.s-partage .chapeau { color: var(--encre-2); }

/* ---------- Image et texte ---------- */
.image-texte { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.image-texte.img-gauche .visuel-it { order: -1; }
.visuel-it { border-radius: var(--r); overflow: hidden; background: var(--teinte); aspect-ratio: 5 / 4; }
.visuel-it img { width: 100%; height: 100%; object-fit: cover; }
.visuel-it.vide { display: grid; place-items: center; color: color-mix(in srgb, var(--primaire) 40%, transparent); }

/* ---------- Colonnes de services ---------- */
.grille-items { display: grid; gap: clamp(20px, 3vw, 32px); }
.col-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.col-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.col-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.service { background: var(--fond); border: 1px solid var(--ligne); border-radius: var(--r); padding: 28px; display: flex; flex-direction: column; gap: 8px; }
.f-teinte .service { background: var(--fond); }
.f-primaire .service, .f-sombre .service { background: color-mix(in srgb, currentColor 6%, transparent); border-color: color-mix(in srgb, currentColor 16%, transparent); }
.service .icone-service { width: 64px; height: 64px; border-radius: calc(var(--r) * .8); overflow: hidden; margin-bottom: 10px; }
.service .icone-service img { width: 100%; height: 100%; object-fit: cover; }
.service .image-service { aspect-ratio: 16 / 10; border-radius: calc(var(--r) * .7); overflow: hidden; margin: -10px -10px 12px; }
.service .image-service img { width: 100%; height: 100%; object-fit: cover; }
.service .numero { font-family: var(--titres); font-size: 1.05rem; font-weight: 700; color: var(--primaire); width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--teinte); margin-bottom: 8px; }
.f-primaire .service .numero { color: var(--primaire); background: var(--sur-primaire); }
.service h3 { margin: 0; }
.service p { color: var(--encre-2); margin: 0; }
.service .lien-fleche { margin-top: auto; padding-top: 10px; }

/* ---------- Galerie ---------- */
.galerie { display: grid; gap: 10px; }
.galerie a { display: block; border-radius: calc(var(--r) * .7); overflow: hidden; aspect-ratio: 1; background: var(--teinte); position: relative; }
.galerie img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.galerie a:hover img { transform: scale(1.04); }
.galerie figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px 12px 10px; font-size: .88rem; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.6)); }
.visionneuse { border: 0; padding: 0; background: transparent; max-width: 94vw; max-height: 92vh; }
.visionneuse::backdrop { background: rgba(8, 9, 11, .88); }
.visionneuse img { max-width: 94vw; max-height: 86vh; object-fit: contain; border-radius: 6px; }
.visionneuse p { color: #fff; text-align: center; margin: 10px 0 0; }
.visionneuse button { position: fixed; top: 16px; right: 20px; background: rgba(255,255,255,.14); color: #fff; border: 0; width: 44px; height: 44px; border-radius: 50%; font-size: 22px; cursor: pointer; }

/* ---------- Produits ---------- */
.grille-produits { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: clamp(28px, 4vw, 44px) clamp(16px, 2.4vw, 28px); }
.carte-produit { position: relative; }
.carte-produit a.lien-carte { text-decoration: none; color: inherit; display: block; }
.carte-produit .vis { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r); overflow: hidden; background: var(--surface); }
.carte-produit .vis img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .35s ease, transform .6s ease; }
.carte-produit .vis img.seconde { opacity: 0; }
.carte-produit:hover .vis img.seconde { opacity: 1; }
.carte-produit:hover .vis img:only-child { transform: scale(1.035); }
.carte-produit .vis .vide { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--titres); font-size: 4rem; color: color-mix(in srgb, var(--primaire) 35%, var(--surface)); }
.carte-produit h3 { font-family: var(--texte); font-size: 1rem; font-weight: 600; letter-spacing: 0; margin: 14px 0 4px; line-height: 1.35; }
.carte-produit:hover h3 { text-decoration: underline; text-underline-offset: .2em; }
.prix { font-variant-numeric: tabular-nums; color: var(--encre-2); margin: 0; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.prix .barre { text-decoration: line-through; opacity: .7; font-size: .92em; }
.prix .solde { color: #b42318; font-weight: 600; }
.f-sombre .prix .solde, .fond-sombre .prix .solde { color: #ff8a7a; }
.action-carte { display: none; }
.pastille-carte { position: absolute; top: 12px; left: 12px; z-index: 2; background: var(--fond); color: var(--encre); font: 700 .75rem/1 var(--texte); padding: 6px 10px; border-radius: 999px; }
.pastille-carte.solde { background: #b42318; color: #fff; }
.tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 16px; }
.tuile { position: relative; aspect-ratio: 1; border-radius: var(--r); overflow: hidden; display: flex; align-items: flex-end; padding: 20px; text-decoration: none; color: #fff; background: var(--primaire); }
.tuile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.tuile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 40%, rgba(0,0,0,.6)); }
.tuile:hover img { transform: scale(1.05); }
.tuile span { position: relative; z-index: 1; font-family: var(--titres); font-weight: var(--poids-titres); font-size: 1.35rem; letter-spacing: var(--espacement-titres); }
.tuile small { display: block; font: 500 .85rem var(--texte); opacity: .85; letter-spacing: 0; }
.tuile:hover { color: #fff; }

/* ---------- Liste de prix / menu ---------- */
.tarifs { display: grid; gap: 4px; max-width: 860px; }
.tarifs.centre { margin-inline: auto; }
.tarif { display: grid; grid-template-columns: 1fr auto; gap: 4px 20px; padding: 18px 0; border-bottom: 1px solid var(--ligne); }
.tarif h3 { margin: 0; font-size: 1.12rem; display: flex; align-items: baseline; gap: 12px; }
.tarif h3::after { content: ""; flex: 1; border-bottom: 1px dotted color-mix(in srgb, var(--encre) 30%, transparent); transform: translateY(-4px); }
.tarif .p { font-family: var(--titres); font-weight: var(--poids-titres); font-size: 1.12rem; white-space: nowrap; }
.tarif p { grid-column: 1 / -1; margin: 0; color: var(--encre-2); font-size: .95rem; }
.note-tarifs { color: var(--encre-2); font-size: .92rem; margin-top: 18px; }

/* ---------- Témoignages ---------- */
.temoignages { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 20px; }
.temoignage { margin: 0; background: var(--fond); border: 1px solid var(--ligne); border-radius: var(--r); padding: 32px; display: flex; flex-direction: column; gap: 18px; }
.f-teinte .temoignage { border-color: transparent; }
.f-primaire .temoignage, .f-sombre .temoignage { background: color-mix(in srgb, currentColor 7%, transparent); border-color: transparent; }
.temoignage blockquote { margin: 0; font-family: var(--titres); font-size: 1.18rem; line-height: 1.5; letter-spacing: -.005em; }
.temoignage blockquote::before { content: "«\00a0"; color: var(--accent); }
.temoignage blockquote::after { content: "\00a0»"; color: var(--accent); }
.temoignage figcaption { margin-top: auto; font-weight: 600; }
.temoignage figcaption small { display: block; font-weight: 400; color: var(--encre-2); }

/* ---------- FAQ ---------- */
.faq { max-width: 860px; }
.faq.centre { margin-inline: auto; text-align: left; }
.faq details { border-bottom: 1px solid var(--ligne); }
.faq summary { cursor: pointer; list-style: none; padding: 22px 44px 22px 0; font-family: var(--titres); font-weight: var(--poids-titres); font-size: 1.15rem; letter-spacing: var(--espacement-titres); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 12px; height: 12px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-75%) rotate(45deg); transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
.faq .reponse { padding: 0 0 22px; color: var(--encre-2); }

/* ---------- Chiffres ---------- */
.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 28px; }
.chiffre strong { display: block; font-family: var(--titres); font-weight: var(--poids-titres); letter-spacing: -.03em; font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1; color: var(--primaire); }
.f-primaire .chiffre strong, .f-sombre .chiffre strong { color: inherit; }
.chiffre span { display: block; margin-top: 8px; color: var(--encre-2); }

/* ---------- Équipe ---------- */
.equipe { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 28px; }
.membre .photo { aspect-ratio: 4 / 5; border-radius: var(--r); overflow: hidden; background: var(--teinte); margin-bottom: 16px; }
.membre .photo img { width: 100%; height: 100%; object-fit: cover; }
.membre h3 { margin: 0; }
.membre .poste { color: var(--primaire); font-weight: 600; margin: 2px 0 8px; font-size: .95rem; }
.f-primaire .membre .poste, .f-sombre .membre .poste { color: inherit; opacity: .85; }
.membre p { color: var(--encre-2); font-size: .96rem; }

/* ---------- Logos ---------- */
.logos { display: flex; flex-wrap: wrap; gap: 32px 56px; align-items: center; justify-content: center; }
.logos a, .logos span { display: block; opacity: .7; filter: grayscale(1); transition: opacity .2s, filter .2s; }
.logos a:hover { opacity: 1; filter: none; }
.logos img { max-height: 54px; max-width: 160px; width: auto; object-fit: contain; }
.fond-sombre .logos img, .f-sombre .logos img, .f-primaire .logos img { filter: brightness(0) invert(1); }

/* ---------- Appel à l'action ---------- */
.appel { display: flex; justify-content: space-between; align-items: center; gap: 28px; flex-wrap: wrap; }
.appel h2 { margin: 0 0 .2em; max-width: 22ch; }
.appel p { margin: 0; color: var(--encre-2); max-width: 56ch; }

/* ---------- Formulaires ---------- */
.formulaire { display: grid; gap: 16px; }
.formulaire label, .champ-f { display: grid; gap: 6px; font-weight: 600; font-size: .95rem; }
.formulaire label small, .champ-f small { font-weight: 400; color: var(--encre-2); }
.formulaire .deux { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.formulaire .trois { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 16px; }
input[type=text], input[type=email], input[type=tel], input[type=password], input[type=number], input[type=search], select, textarea {
  font: 400 1rem/1.4 var(--texte); color: var(--encre); background: var(--fond); width: 100%; padding: 13px 15px; border: 1px solid color-mix(in srgb, var(--encre) 22%, transparent); border-radius: min(var(--r), 12px); min-height: 50px; }
.f-teinte input, .f-teinte textarea, .f-teinte select { background: var(--fond); }
textarea { resize: vertical; min-height: 130px; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
input:focus, select:focus, textarea:focus { outline: 3px solid color-mix(in srgb, var(--primaire) 28%, transparent); border-color: var(--primaire); }
.case-f { display: flex !important; gap: 10px; align-items: flex-start; font-weight: 400 !important; cursor: pointer; }
.case-f input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--primaire); flex: none; }
.piege { position: absolute !important; left: -9999px !important; }
.alerte { padding: 14px 18px; border-radius: min(var(--r), 12px); font-size: .97rem; margin-bottom: 16px; }
.alerte.ok { background: #e8f6ee; color: #0f5132; border: 1px solid #b9e3c9; }
.alerte.erreur { background: #fdeceb; color: #8a1c12; border: 1px solid #f4c3bd; }
.alerte.info { background: var(--teinte); color: var(--encre); border: 1px solid var(--ligne); }
.alerte ul { margin: 0; padding-left: 1.2em; }
.contact-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.coordonnees { display: grid; gap: 22px; margin-top: 24px; }
.coordonnees div { display: grid; gap: 2px; }
.coordonnees dt { font-size: .85rem; color: var(--encre-2); font-weight: 600; }
.coordonnees dd { margin: 0; font-size: 1.05rem; }
.coordonnees a { color: inherit; }
.carte-form { background: var(--surface); border-radius: var(--r); padding: clamp(24px, 4vw, 40px); }
.f-teinte .carte-form { background: var(--fond); }
.f-primaire .carte-form, .f-sombre .carte-form { background: var(--fond); color: var(--encre); --encre-2: #565d68; }
.infolettre-f { display: flex; gap: 10px; max-width: 520px; margin: 24px auto 0; }
.infolettre-f input { flex: 1; }
.carte-geo { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: stretch; }
.carte-geo iframe { width: 100%; min-height: 380px; height: 100%; border: 0; border-radius: var(--r); background: var(--surface); }
.video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; background: #000; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.legende { color: var(--encre-2); font-size: .92rem; margin-top: 10px; }
.separateur { border: 0; border-top: 1px solid var(--ligne); margin: 0; }

/* ---------- Blogue ---------- */
.articles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 32px; }
.carte-article a { text-decoration: none; color: inherit; display: block; }
.carte-article .vis { aspect-ratio: 16 / 10; border-radius: var(--r); overflow: hidden; background: var(--teinte); margin-bottom: 16px; }
.carte-article .vis img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.carte-article:hover .vis img { transform: scale(1.03); }
.carte-article time { font-size: .88rem; color: var(--encre-2); }
.carte-article h3 { font-size: 1.3rem; margin: 6px 0 8px; }
.carte-article:hover h3 { text-decoration: underline; text-underline-offset: .2em; }
.carte-article p { color: var(--encre-2); margin: 0; }
.entete-article { padding-block: clamp(56px, 8vw, 96px) 32px; }
.entete-article time { color: var(--encre-2); }
.entete-article h1 { margin-top: 10px; }
.image-article { border-radius: var(--r); overflow: hidden; margin-bottom: 40px; aspect-ratio: 16 / 9; }
.image-article img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Boutique ---------- */
.page-boutique { padding-block: clamp(36px, 5vw, 64px); }
.tete-boutique { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.tete-boutique h1 { margin: 0; font-size: clamp(2rem, 4vw, 3rem); }
.fil-ariane { font-size: .9rem; color: var(--encre-2); margin-bottom: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.fil-ariane a { color: inherit; }
.boutique-grille { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: clamp(28px, 4vw, 52px); align-items: start; }
.filtres-cote { position: sticky; top: 100px; display: grid; gap: 26px; }
.filtres-cote h2 { font-family: var(--texte); font-size: .82rem; letter-spacing: .02em; color: var(--encre-2); font-weight: 700; margin: 0 0 10px; }
.filtres-cote ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.filtres-cote a { display: flex; justify-content: space-between; text-decoration: none; color: var(--encre); padding: 6px 10px; border-radius: calc(var(--r) * .6); font-size: .96rem; }
.filtres-cote a:hover { background: var(--teinte); }
.filtres-cote a[aria-current] { background: var(--primaire); color: var(--sur-primaire); }
.filtres-cote a small { color: inherit; opacity: .6; }
.barre-tri { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 24px; }
.barre-tri form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-left: auto; }
.barre-tri select { min-height: 42px; padding: 8px 40px 8px 12px; width: auto; font-size: .95rem; }
.puces { display: none; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 20px; }
.puces a { flex: none; text-decoration: none; color: var(--encre); border: 1px solid var(--ligne); border-radius: 999px; padding: 7px 14px; font-size: .92rem; }
.puces a[aria-current] { background: var(--primaire); color: var(--sur-primaire); border-color: var(--primaire); }
.pagination { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 48px; }
.vide-boutique { padding: 60px 0; text-align: center; color: var(--encre-2); }

.fiche { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; padding-block: clamp(32px, 5vw, 64px); }
.galerie-produit { display: grid; gap: 12px; position: sticky; top: 100px; }
.galerie-produit .principale { aspect-ratio: 4 / 5; border-radius: var(--r); overflow: hidden; background: var(--surface); }
.galerie-produit .principale img { width: 100%; height: 100%; object-fit: cover; }
.galerie-produit .principale .vide { height: 100%; display: grid; place-items: center; font-family: var(--titres); font-size: 8rem; color: color-mix(in srgb, var(--primaire) 30%, var(--surface)); }
.vignettes { display: grid; grid-template-columns: repeat(auto-fill, 76px); gap: 10px; }
.vignettes button { padding: 0; border: 2px solid transparent; border-radius: calc(var(--r) * .6); overflow: hidden; aspect-ratio: 1; cursor: pointer; background: var(--surface); }
.vignettes button[aria-current="true"] { border-color: var(--primaire); }
.vignettes img { width: 100%; height: 100%; object-fit: cover; }
.infos-produit h1 { font-size: clamp(2rem, 3.6vw, 2.9rem); margin-bottom: 12px; }
.infos-produit .prix { font-size: 1.4rem; color: var(--encre); margin-bottom: 8px; }
.infos-produit .resume { color: var(--encre-2); font-size: 1.08rem; }
.options-produit { display: grid; gap: 18px; margin: 28px 0; }
.option fieldset { border: 0; margin: 0; padding: 0; }
.option legend { font-weight: 600; font-size: .95rem; margin-bottom: 10px; padding: 0; }
.option legend span { font-weight: 400; color: var(--encre-2); }
.valeurs { display: flex; flex-wrap: wrap; gap: 8px; }
.valeurs label { position: relative; }
.valeurs input { position: absolute; opacity: 0; }
.valeurs span { display: inline-block; padding: 10px 16px; border: 1px solid color-mix(in srgb, var(--encre) 22%, transparent); border-radius: var(--r-btn); cursor: pointer; font-size: .95rem; min-width: 52px; text-align: center; }
.valeurs input:checked + span { border-color: var(--encre); box-shadow: inset 0 0 0 1px var(--encre); font-weight: 600; }
.valeurs input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.valeurs span.indispo { color: var(--encre-2); text-decoration: line-through; }
.achat { display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; }
.quantite { display: flex; align-items: center; border: 1px solid color-mix(in srgb, var(--encre) 22%, transparent); border-radius: var(--r-btn); overflow: hidden; }
.quantite button { width: 44px; height: 54px; border: 0; background: none; font-size: 1.2rem; cursor: pointer; color: var(--encre); }
.quantite input { width: 52px; border: 0; text-align: center; padding: 0; min-height: 54px; -moz-appearance: textfield; }
.quantite input::-webkit-inner-spin-button { -webkit-appearance: none; }
.achat .bouton { flex: 1; min-width: 200px; }
.dispo { margin: 14px 0 0; font-size: .95rem; display: flex; align-items: center; gap: 8px; }
.dispo::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #16a34a; }
.dispo.bas::before { background: #d97706; }
.dispo.non::before { background: #dc2626; }
.assurances { display: grid; gap: 10px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--ligne); color: var(--encre-2); font-size: .94rem; }
.description-produit { margin-top: 32px; }
.meta-produit { margin-top: 24px; font-size: .9rem; color: var(--encre-2); }

/* ---------- Panier et caisse ---------- */
.page-panier { padding-block: clamp(36px, 5vw, 64px); }
.panier-grille, .caisse-grille { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: clamp(28px, 4vw, 56px); align-items: start; }
.ligne-panier { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--ligne); align-items: start; }
.ligne-panier:first-child { border-top: 1px solid var(--ligne); }
.ligne-panier .vis { aspect-ratio: 4 / 5; border-radius: calc(var(--r) * .7); overflow: hidden; background: var(--surface); }
.ligne-panier .vis img { width: 100%; height: 100%; object-fit: cover; }
.ligne-panier h3 { font-family: var(--texte); font-size: 1.02rem; font-weight: 600; letter-spacing: 0; margin: 0 0 4px; }
.ligne-panier h3 a { color: inherit; text-decoration: none; }
.ligne-panier .variante { color: var(--encre-2); font-size: .92rem; margin: 0 0 12px; }
.ligne-panier .actions-ligne { display: flex; gap: 14px; align-items: center; }
.ligne-panier .quantite button, .ligne-panier .quantite input { height: 42px; min-height: 42px; }
.ligne-panier .total-ligne { font-weight: 600; font-variant-numeric: tabular-nums; }
.lien-discret { background: none; border: 0; padding: 0; color: var(--encre-2); text-decoration: underline; cursor: pointer; font: inherit; font-size: .9rem; }
.resume-commande { background: var(--surface); border-radius: var(--r); padding: 28px; position: sticky; top: 100px; display: grid; gap: 16px; }
.resume-commande h2 { font-size: 1.3rem; margin: 0; }
.lignes-resume { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.lignes-resume li { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; font-size: .94rem; }
.lignes-resume .vis { aspect-ratio: 1; border-radius: calc(var(--r) * .5); background: var(--fond); position: relative; }
.lignes-resume .vis img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.lignes-resume .qte { position: absolute; top: -6px; right: -6px; background: var(--encre-2); color: var(--fond); font: 700 11px/20px var(--systeme); min-width: 20px; height: 20px; border-radius: 10px; text-align: center; }
.lignes-resume small { display: block; color: var(--encre-2); }
.totaux { display: grid; gap: 8px; margin: 0; font-variant-numeric: tabular-nums; }
.totaux div { display: flex; justify-content: space-between; gap: 16px; }
.totaux dt { color: var(--encre-2); }
.totaux dd { margin: 0; }
.totaux .total { border-top: 1px solid var(--ligne); padding-top: 14px; margin-top: 6px; font-size: 1.2rem; font-weight: 700; }
.totaux .total dt { color: var(--encre); }
.code-promo { display: flex; gap: 8px; }
.code-promo input { min-height: 44px; padding: 8px 12px; text-transform: uppercase; }
.code-promo .bouton { padding: 10px 16px; }
.promo-active { display: flex; justify-content: space-between; align-items: center; background: var(--fond); border: 1px dashed var(--ligne); border-radius: calc(var(--r) * .6); padding: 8px 12px; font-size: .92rem; }
.etape { padding-bottom: 28px; margin-bottom: 28px; border-bottom: 1px solid var(--ligne); }
.etape h2 { font-size: 1.35rem; margin-bottom: 16px; }
.choix-radio { display: grid; gap: 10px; }
.choix-radio label { display: flex !important; gap: 12px; align-items: flex-start; border: 1px solid color-mix(in srgb, var(--encre) 18%, transparent); border-radius: min(var(--r), 12px); padding: 16px 18px; cursor: pointer; font-weight: 400 !important; }
.choix-radio label:has(input:checked) { border-color: var(--primaire); box-shadow: inset 0 0 0 1px var(--primaire); background: var(--teinte); }
.choix-radio input { margin-top: 4px; accent-color: var(--primaire); width: 18px; height: 18px; flex: none; }
.choix-radio .lib { flex: 1; }
.choix-radio strong { display: block; }
.choix-radio small { color: var(--encre-2); }
.choix-radio .prix-option { font-weight: 600; white-space: nowrap; }
.caisse-grille:has(#mode-ramassage:checked) .si-livraison { display: none; }
.confirmation { padding-block: clamp(48px, 7vw, 88px); }
.coche-ok { width: 64px; height: 64px; border-radius: 50%; background: #16a34a; color: #fff; display: grid; place-items: center; margin-bottom: 18px; }
.coche-ok svg { width: 30px; height: 30px; stroke: currentColor; stroke-width: 3; fill: none; }
.instructions { border-left: 4px solid var(--accent); background: var(--surface); padding: 22px 26px; border-radius: 0 var(--r) var(--r) 0; margin: 28px 0; }

/* ---------- Compte ---------- */
.page-compte { padding-block: clamp(40px, 6vw, 80px); }
.carte-compte { max-width: 460px; margin-inline: auto; }
.onglets-compte { display: flex; gap: 6px; margin-bottom: 28px; border-bottom: 1px solid var(--ligne); }
.onglets-compte a { padding: 10px 14px; text-decoration: none; color: var(--encre-2); border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: 500; }
.onglets-compte a[aria-current] { color: var(--encre); border-color: var(--primaire); }
.tableau-commandes { width: 100%; border-collapse: collapse; }
.tableau-commandes th { text-align: left; font-size: .85rem; color: var(--encre-2); padding: 10px 8px; border-bottom: 1px solid var(--ligne); }
.tableau-commandes td { padding: 14px 8px; border-bottom: 1px solid var(--ligne); }
.etiquette { display: inline-block; font-size: .8rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--teinte); }

/* ---------- Pied de page ---------- */
.pied { background: var(--sombre); color: #c9ced6; padding-top: clamp(56px, 7vw, 88px); font-size: .96rem; }
.fond-sombre .pied { border-top: 1px solid var(--ligne); }
.pied a { color: #fff; text-decoration: none; }
.pied a:hover { text-decoration: underline; color: #fff; }
.pied-grille { display: grid; grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr)); gap: 40px; padding-bottom: 48px; }
.pied h2 { font-family: var(--texte); font-size: .82rem; letter-spacing: .03em; color: #8b939f; font-weight: 700; margin: 0 0 14px; }
.pied p { margin: 0 0 8px; }
.pied ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.pied .nom-pied { font-family: var(--titres); font-weight: var(--poids-titres); font-size: 1.5rem; color: #fff; letter-spacing: var(--espacement-titres); margin-bottom: 12px; }
.pied .logo-pied { max-height: 52px; max-width: 200px; margin-bottom: 14px; }
.pied .reseaux { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.pied .reseaux a { display: inline-block; padding: 5px 13px; border-radius: 999px; border: 1px solid color-mix(in srgb, currentColor 30%, transparent); font-size: .86rem; line-height: 1.4; }
.pied .reseaux a:hover { text-decoration: none; border-color: currentColor; }
.livraison-pied { margin-top: 14px !important; font-size: .9rem; opacity: .9; }
.livraison-pied a { text-decoration: underline !important; text-underline-offset: .18em; }
.infolettre-pied { background: var(--teinte); border-top: 1px solid var(--ligne); padding-block: clamp(36px, 5vw, 60px); }
.infolettre-pied-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 18px 48px; align-items: center; }
.infolettre-pied h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom: .25em; }
.infolettre-pied p { margin: 0; color: var(--encre-2); }
.infolettre-pied .infolettre-f { margin: 0; max-width: none; }
.mention-infolettre { font-size: .8rem; color: var(--encre-2); margin: 10px 0 0; }
.pied-bas { border-top: 1px solid rgba(255,255,255,.1); padding-block: 22px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .86rem; color: #8b939f; }
.pied-bas a { color: #b4bac3; }

/* ---------- Maintenance et erreurs ---------- */
.page-centree { min-height: 100vh; display: grid; place-items: center; text-align: center; padding: 40px 20px; background: var(--primaire); color: var(--sur-primaire); }
.page-centree h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); margin-bottom: .3em; }
.page-centree p { font-size: 1.2rem; opacity: .9; }
.page-centree img { max-height: 70px; margin: 0 auto 28px; }
.page-erreur { padding-block: clamp(80px, 12vw, 160px); text-align: center; }
.page-erreur .code { font-family: var(--titres); font-size: clamp(5rem, 14vw, 9rem); line-height: 1; color: var(--teinte); -webkit-text-stroke: 2px var(--primaire); font-weight: 800; }

/* ---------- Animations d'apparition (respecte « réduire les animations ») ---------- */
@media (prefers-reduced-motion: no-preference) {
  .banniere .contenu-banniere > * { animation: monter .8s cubic-bezier(.2, .7, .2, 1) both; }
  .banniere .contenu-banniere > *:nth-child(2) { animation-delay: .08s; }
  .banniere .contenu-banniere > *:nth-child(3) { animation-delay: .16s; }
  @keyframes monter { from { opacity: 0; transform: translateY(18px); } }
}

/* ---------- Adaptation mobile ---------- */
@media (max-width: 960px) {
  .nav-principale { display: none; }
  .menu-mobile { display: block; margin-left: auto; }
  .entete-centre .outils { position: static; }
  .entete-centre .entete-int { justify-content: space-between; padding-top: 0; }
  .entete-centre .marque { width: auto; }
  .menu-mobile summary { list-style: none; cursor: pointer; }
  .menu-mobile summary::-webkit-details-marker { display: none; }
  .menu-mobile[open] .panneau-mobile { display: block; }
  .panneau-mobile { position: absolute; left: 0; right: 0; top: 100%; background: var(--fond); border-bottom: 1px solid var(--ligne); padding: 10px 20px 24px; box-shadow: 0 20px 30px rgba(0,0,0,.08); max-height: calc(100vh - 80px); overflow-y: auto; }
  .panneau-mobile a { display: block; padding: 13px 4px; color: var(--encre); text-decoration: none; border-bottom: 1px solid var(--ligne); font-size: 1.05rem; }
  .panneau-mobile .enfant { padding-left: 22px; font-size: .98rem; color: var(--encre-2); }
  .boutique-grille { grid-template-columns: 1fr; }
  .filtres-cote { display: none; }
  .puces { display: flex; }
  .fiche, .panier-grille, .caisse-grille, .contact-grille, .carte-geo, .image-texte, .banniere.s-partage .contenu-banniere { grid-template-columns: 1fr; }
  .image-texte.img-gauche .visuel-it { order: 0; }
  .galerie-produit, .resume-commande { position: static; }
  .col-3, .col-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pied-grille { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  .entete-int { min-height: 64px; gap: 10px; }
  .marque img { height: 38px; }
  .col-2, .col-3, .col-4 { grid-template-columns: 1fr; }
  .grille-produits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; }
  .formulaire .deux, .formulaire .trois { grid-template-columns: 1fr; }
  .infolettre-f { flex-direction: column; }
  .ligne-panier { grid-template-columns: 76px minmax(0, 1fr); }
  .ligne-panier .total-ligne { grid-column: 2; }
  .pied-grille { grid-template-columns: 1fr; }
  .infolettre-pied-grille { grid-template-columns: 1fr; }
  .galerie.col-3, .galerie.col-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .appel { flex-direction: column; align-items: flex-start; }
  .tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tuile { padding: 14px; }
  .tuile span { font-size: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
@media print { .entete, .pied, .annonce, .barre-admin { display: none; } }