*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*/

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #e5e7eb;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: Open Sans, Segoe UI, sans-serif;
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* 1 */
  font-feature-settings: normal;
  /* 2 */
  font-variation-settings: normal;
  /* 3 */
  font-size: 1em;
  /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-feature-settings: inherit;
  /* 1 */
  font-variation-settings: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  letter-spacing: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

.container {
  width: 100%;
}

@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {
  .container {
    max-width: 1536px;
  }
}

.visible {
  visibility: visible;
}

.static {
  position: static;
}

.absolute {
  position: absolute;
}

.block {
  display: block;
}

.hidden {
  display: none;
}

.h-3\.5 {
  height: 0.875rem;
}

.h-4 {
  height: 1rem;
}

.h-5 {
  height: 1.25rem;
}

.h-6 {
  height: 1.5rem;
}

.h-7 {
  height: 1.75rem;
}

.h-9 {
  height: 2.25rem;
}

.w-3\.5 {
  width: 0.875rem;
}

.w-4 {
  width: 1rem;
}

.w-5 {
  width: 1.25rem;
}

.w-6 {
  width: 1.5rem;
}

.w-7 {
  width: 1.75rem;
}

.w-9 {
  width: 2.25rem;
}

.shrink-0 {
  flex-shrink: 0;
}

.rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.resize {
  resize: both;
}

.text-rouge {
  --tw-text-opacity: 1;
  color: rgb(217 69 43 / var(--tw-text-opacity, 1));
}

.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

/* ============================================================================
   Pharmacie des 4 Chemins v2
   Structure reprise de la maquette Euréquip v2 (volet fixe, bannière collante, intro collante à gauche,
   mots fantômes en contour), déclinée dans les verts du logo, avec des cercles à la place des hexagones
   et le « 4 + croix » du logo en badge et en motif de fond.
   ============================================================================ */

@font-face {
  font-family: 'Barlow';

  font-style: normal;

  font-weight: 500;

  font-display: swap;

  src: url('../assets/fonts/barlow-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Barlow';

  font-style: normal;

  font-weight: 700;

  font-display: swap;

  src: url('../assets/fonts/barlow-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Barlow';

  font-style: normal;

  font-weight: 800;

  font-display: swap;

  src: url('../assets/fonts/barlow-800.woff2') format('woff2');
}

@font-face {
  font-family: 'Open Sans';

  font-style: normal;

  font-weight: 400 700;

  font-display: swap;

  src: url('../assets/fonts/open-sans-400-700.woff2') format('woff2');
}

:root {
  --vert-nuit: #0F4A22;
  --vert-nuit-2: #16602D;
  --vert: #57A820;
  --vert-2: #4A9119;
  --vert-clair: #8ED04A;
  --menthe: #EEF6EE;
  --encre: #10301B;
  --texte: #3C4A40;
  --sourdine: #6E7F72;
  --filet: #DCE8DE;
  --rouge: #D9452B;
  --etoile: #F2A93B;
  --volet: 300px;
  --tete: 72px;
  --bord: clamp(24px, 5vw, 88px);
  --titres: 'Barlow', 'Segoe UI', sans-serif;
  --sans: 'Open Sans', 'Segoe UI', sans-serif;
  --lent: cubic-bezier(.22, .61, .36, 1);
  --motif: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 220 220%22%3E%3Cg fill=%22#fff%22 transform=%22translate(16 16) scale(.8)%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M56 6h18v88H56V72H6V56L56 6zm0 18L31 56h25V24z%22/%3E%3Cpath d=%22M62 42h16v16h16v16H78v16H62V74H46V58h16V42z%22/%3E%3C/g%3E%3Cg fill=%22#fff%22 transform=%22translate(126 126) scale(.56)%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M56 6h18v88H56V72H6V56L56 6zm0 18L31 56h25V24z%22/%3E%3Cpath d=%22M62 42h16v16h16v16H78v16H62V74H46V58h16V42z%22/%3E%3C/g%3E%3C/svg%3E");
}

html {
  scroll-behavior: smooth;
}

body {
  background: #fff;
  color: var(--texte);
  font: 400 16px/1.7 var(--sans);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

h1, h2, h3, h4 {
  font-family: var(--titres);
  color: var(--encre);
  font-weight: 800;
  letter-spacing: -.01em;
}

/* ---------- typographie ---------- */

.titre-1 {
  font: 800 clamp(40px, 5.6vw, 84px)/1 var(--titres);
  text-transform: uppercase;
  letter-spacing: -.01em;
  color: #fff;
  max-width: 12ch;
}

.titre-1 b {
  font-weight: 800;
  color: var(--vert-clair);
}

.titre-2 {
  font: 800 clamp(30px, 3.3vw, 48px)/1.04 var(--titres);
  text-transform: uppercase;
  letter-spacing: -.01em;
  color: var(--encre);
}

.titre-2 b {
  font-weight: 800;
  color: var(--vert);
}

.titre-3 {
  font: 700 clamp(20px, 1.8vw, 26px)/1.1 var(--titres);
  text-transform: uppercase;
  color: var(--encre);
}

.titre-4 {
  font: 700 17px/1.3 var(--titres);
  color: var(--encre);
}

.p1 {
  font-size: 17px;
  line-height: 1.7;
}

.p2 {
  font-size: 15px;
  line-height: 1.65;
}

.p3 {
  font-size: 13px;
  line-height: 1.5;
  color: var(--sourdine);
}

.surtitre {
  font: 600 11px/1.4 var(--sans);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--sourdine);
}

.surtitre-clair {
  color: var(--vert-clair);
}

.prose-site p + p, .prose-clair p + p {
  margin-top: .8em;
}

.prose-site a {
  color: var(--vert);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.prose-site ul {
  list-style: disc;
  padding-left: 1.2em;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 54px;
  padding: 0 28px;
  border-radius: 999px;
  font: 600 15px/1 var(--sans);
  background: var(--vert);
  color: #fff;
  transition: background-color .25s, color .25s, transform .25s var(--lent);
}

.btn:hover {
  background: var(--vert-2);
  transform: translateY(-2px);
}

.btn-blanc {
  background: #fff;
  color: var(--encre);
}

.btn-blanc:hover {
  background: var(--menthe);
}

.btn-sombre {
  background: var(--vert-nuit);
}

.btn-sombre:hover {
  background: var(--vert-nuit-2);
}

.lien {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 700 13px/1 var(--titres);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vert);
}

.lien::after {
  content: "→";
  transition: transform .3s var(--lent);
}

.lien:hover::after {
  transform: translateX(6px);
}

.lien-clair {
  color: var(--vert-clair);
}

.lien-evitement {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 100;
  padding: .75rem 1.25rem;
  background: var(--vert-nuit);
  color: #fff;
  border-radius: 6px;
  transition: top .2s ease;
}

.lien-evitement:focus {
  top: 1rem;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

:focus-visible {
  outline: 2px solid var(--vert);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- titre + décor derrière (le « 4 » ou la croix du logo, glisse en parallaxe) ---------- */

.bloc-titre {
  position: relative;
}

.bloc-titre > * {
  position: relative;
  z-index: 1;
}

.deco {
  position: absolute;
  left: -70px;
  top: -90px;
  z-index: 0 !important;
  width: clamp(200px, 24vw, 340px);
  height: clamp(200px, 24vw, 340px);
  color: var(--vert);
  opacity: .07;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  will-change: transform;
}

.deco svg {
  width: 100%;
  height: 100%;
}

.deco-4 {
  --croix: currentColor;
}

.deco-clair {
  color: #fff;
  opacity: .09;
}

/* Feuilles de ginkgo : trait fin, donc plus grandes et plus opaques que le « 4 » ; forme en masque CSS colorée par currentColor, balancement lent. */

.deco-feuille {
  width: clamp(240px, 28vw, 440px);
  height: clamp(240px, 28vw, 440px);
  opacity: .14;
}

.deco-feuille.deco-clair {
  opacity: .16;
}

.deco-forme {
  display: block;
  width: 100%;
  height: 100%;
  background: currentColor;
  -webkit-mask: var(--feuille) center / contain no-repeat;
  mask: var(--feuille) center / contain no-repeat;
  transform-origin: 50% 90%;
  animation: balance 13s ease-in-out infinite alternate;
}

.deco-feuille-seule {
  --feuille: url("../assets/images/motifs/feuille.svg");
}

.deco-feuilles-deux {
  --feuille: url("../assets/images/motifs/feuilles-deux.svg");
}

.deco-feuilles-trois {
  --feuille: url("../assets/images/motifs/feuilles-trois.svg");
}

@keyframes balance {
  from {
    transform: rotate(-5deg) translateY(-10px);
  }

  to {
    transform: rotate(5deg) translateY(10px);
  }
}

/* ---------- apparitions au défilement ---------- */

html.anim [data-apparait] {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .9s ease, transform .9s var(--lent);
  transition-delay: var(--retard, 0ms);
}

html.anim [data-apparait].est-vu {
  opacity: 1;
  transform: none;
}

/* ---------- badge rond « 4 + croix » et motif de fond ---------- */

.badge-4 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--vert);
  color: #fff;
  --croix: var(--vert-clair);
  box-shadow: 0 10px 30px -10px rgba(16, 48, 27, .5);
}

.badge-4 svg {
  width: 54%;
  height: 54%;
}

.motif-fond {
  position: relative;
  overflow: hidden;
}

.motif-fond::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--motif);
  background-size: 220px 220px;
  opacity: .05;
  pointer-events: none;
}

.motif-fond > * {
  position: relative;
}

/* ============================================================================
   Volet de navigation fixe à gauche (grand écran) / barre haute et panneau (mobile)
   ============================================================================ */

.volet {
  position: fixed;
  z-index: 60;
  display: flex;
  color: #fff;
  background: rgba(15, 74, 34, .9);
  backdrop-filter: blur(20px);
}

.volet-haut {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.volet-logo {
  display: flex;
  border-radius: 50%;
  transition: transform .4s var(--lent);
}

.volet-logo:hover {
  transform: translateY(-2px);
}

.volet-logo img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .18), 0 16px 40px -16px rgba(0, 0, 0, .6);
}

.volet-corps {
  display: flex;
  flex-direction: column;
}

.volet-nav {
  display: flex;
  flex-direction: column;
}

.volet-nav .menu-lien {
  display: block;
  padding: 11px 0;
  font: 700 14px/1.3 var(--titres);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
  transition: color .2s, transform .35s var(--lent);
}

.volet-nav .menu-lien:hover, .volet-nav .menu-lien.est-actif {
  color: var(--vert-clair);
  transform: translateX(6px);
}

.volet-pied {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: auto;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .8);
}

.volet-pied-titre {
  font: 700 12px/1.4 var(--titres);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 4px;
}

.volet-pied address {
  font-style: normal;
}

.volet-tel {
  margin-top: 8px;
  font: 700 15px/1.3 var(--titres);
  letter-spacing: .04em;
  color: var(--vert-clair);
}

.volet-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.burger {
  position: relative;
  display: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--vert);
  color: #fff;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: background-color .3s;
}

.burger span {
  width: 20px;
  height: 2px;
  background: #fff;
  transition: transform .35s var(--lent), opacity .25s;
}

html.menu-ouvert .burger {
  background: var(--vert-nuit-2);
}

html.menu-ouvert .burger span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

html.menu-ouvert .burger span:nth-child(2) {
  opacity: 0;
}

html.menu-ouvert .burger span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.voile {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(16, 48, 27, .45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s;
}

.actions-haut {
  position: fixed;
  top: 28px;
  right: 32px;
  z-index: 61;
  display: none;
  gap: 10px;
}

.pastille {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(15, 74, 34, .6);
  backdrop-filter: blur(16px);
  color: #fff;
  font: 700 13px/1 var(--titres);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color .25s, border-color .25s;
}

.pastille:hover {
  background: var(--vert);
  border-color: var(--vert);
}

.pastille-etat i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--vert-clair);
  box-shadow: 0 0 0 3px rgba(142, 208, 74, .25);
}

.pastille-etat.est-ferme i {
  background: var(--rouge);
  box-shadow: 0 0 0 3px rgba(217, 69, 43, .25);
}

.etat {
  position: relative;
}

.etat-chevron {
  transition: transform .3s var(--lent);
}

.etat.est-ouvert .etat-chevron {
  transform: rotate(180deg);
}

.etat-panneau {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 320px;
  padding: 22px 24px 24px;
  border-radius: 20px;
  background: rgba(15, 74, 34, .96);
  backdrop-filter: blur(16px);
  color: #fff;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6);
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: panneau .35s var(--lent);
}

.etat-panneau[hidden] {
  display: none;
}

.etat-titre {
  font: 700 12px/1.4 var(--titres);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--vert-clair);
}

@keyframes panneau {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}

.horaires-liste {
  display: flex;
  flex-direction: column;
}

.horaires-ligne {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 0;
  font-size: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.horaires-ligne:last-child {
  border-bottom: 0;
}

.horaires-ligne.est-aujourdhui {
  color: var(--vert-clair);
  font-weight: 700;
}

.horaires-ligne.est-ferme .horaires-plages {
  opacity: .6;
}

.horaires-exception {
  font-size: 13px;
  color: var(--vert-clair);
}

.bandeau-message {
  position: relative;
  z-index: 3;
  padding: 10px var(--bord);
  background: var(--vert-clair);
  color: var(--encre);
  font: 600 14px/1.5 var(--sans);
  text-align: center;
}

/* Grand écran : volet sur toute la hauteur, actions en haut à droite. */

@media (min-width: 1024px) {
  .volet {
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--volet);
    flex-direction: column;
    padding: 36px 32px 40px;
    border-right: 1px solid rgba(255, 255, 255, .1);
  }

  .volet-logo {
    width: 112px;
    height: 112px;
  }

  .volet-corps {
    flex: 1 1 0;
    min-height: 0;
  }

  .volet-actions {
    display: none;
  }

  .volet-nav {
    margin-top: 44px;
  }

  .volet-pied {
    padding-top: 32px;
  }

  .actions-haut {
    display: flex;
  }

  .page-site, .pied {
    margin-left: var(--volet);
  }
}

/* Mobile et tablette : barre haute, panneau qui s'ouvre sous la barre. */

@media (max-width: 1023px) {
  .volet {
    left: 0;
    right: 0;
    top: 0;
    height: var(--tete);
    flex-direction: column;
  }

  .volet-haut {
    height: var(--tete);
    padding: 0 16px 0 20px;
  }

  .volet-logo {
    width: 48px;
    height: 48px;
  }

  .burger {
    display: flex;
  }

  .volet-corps {
    position: absolute;
    left: 0;
    right: 0;
    top: var(--tete);
    height: calc(100vh - var(--tete));
    height: calc(100dvh - var(--tete));
    padding: 24px 24px 100px;
    overflow-y: auto;
    background: var(--vert-nuit);
    transform: translateX(-100%);
    opacity: 0;
    visibility: hidden;
    transition: transform .5s var(--lent), opacity .4s, visibility 0s .5s;
  }

  html.menu-ouvert .volet-corps {
    transform: none;
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }

  html.menu-ouvert .voile {
    opacity: 1;
    pointer-events: auto;
  }

  .volet-nav {
    margin-top: 28px;
  }

  .volet-nav .menu-lien {
    padding: 13px 0;
    font-size: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
  }

  .volet-pied {
    padding-top: 28px;
  }

  .page-site {
    padding-top: var(--tete);
  }
}

/* ============================================================================
   Bannière collante : les sections suivantes viennent la recouvrir
   ============================================================================ */

.hero {
  position: sticky;
  top: 0;
  z-index: 0;
  height: 100vh;
  min-height: 640px;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: var(--vert-nuit);
  color: #fff;
}

.hero-diapo {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 1.4s ease;
}

.hero-diapo.est-actif {
  opacity: 1;
}

.hero-diapo img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 68% center;
     object-position: 68% center;
  transform: scale(1.08);
  transition: transform 9s linear;
}

.hero-diapo.est-actif img {
  transform: scale(1);
}

.hero-voile {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(15, 74, 34, .94) 0%, rgba(15, 74, 34, .8) 36%, rgba(15, 74, 34, .35) 64%, rgba(15, 74, 34, .12) 100%);
}

.hero-voile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 74, 34, 0) 60%, rgba(15, 74, 34, .55) 100%);
}

.hero-corps {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  width: min(100%, 1100px);
  padding: 120px var(--bord) 150px;
}

.hero-texte {
  max-width: 52ch;
  color: rgba(255, 255, 255, .9);
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

.hero-points {
  position: absolute;
  left: var(--bord);
  bottom: 44px;
  z-index: 2;
  display: flex;
  gap: 10px;
}

.hero-points button {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .4);
  transition: background-color .3s, transform .3s;
}

.hero-points button.est-actif {
  background: var(--vert-clair);
  transform: scale(1.3);
}

.hero-fleches {
  position: absolute;
  right: var(--bord);
  bottom: 40px;
  z-index: 2;
  display: flex;
  gap: 8px;
}

.hero-fleches button {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .4);
  background: rgba(255, 255, 255, .12);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: background-color .25s, border-color .25s;
}

.hero-fleches button:hover {
  background: var(--vert);
  border-color: var(--vert);
}

.hero-legende {
  position: absolute;
  right: calc(var(--bord) + 120px);
  bottom: 44px;
  z-index: 2;
  text-align: right;
  font: 600 11px/1.5 var(--sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
}

.hero-legende strong {
  display: block;
  font: 700 15px/1.3 var(--titres);
  letter-spacing: 0;
  text-transform: none;
  color: #fff;
}

@media (min-width: 1024px) {
  .hero {
    margin-left: calc(-1 * var(--volet));
  }

  .hero-corps {
    width: min(100%, calc(var(--volet) + 1100px));
    padding-left: calc(var(--volet) + var(--bord));
  }

  .hero-points {
    left: calc(var(--volet) + var(--bord));
  }
}

@media (max-width: 1023px) {
  .hero {
    min-height: 0;
    height: calc(100vh - var(--tete));
  }

  .hero-corps {
    padding: 80px var(--bord) 130px;
  }
}

/* Encart « offre du moment » : carte blanche au-dessus des flèches ; sous 1024 px il passe dans le flux, sous le texte, et la bannière s'allonge au besoin. */

.offre-encart {
  position: absolute;
  right: var(--bord);
  bottom: 112px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: min(100% - var(--bord) * 2, 500px);
  padding: 18px;
  border-radius: 26px;
  background: #fff;
  color: var(--texte);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6);
  animation: encart .8s var(--lent) .5s both;
}

@keyframes encart {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

.offre-encart-haut {
  display: flex;
  align-items: center;
  gap: 18px;
}

.offre-encart-visuel {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 104px;
  height: 104px;
  padding: 10px;
  border-radius: 18px;
  background: var(--menthe);
}

.offre-encart-visuel img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.offre-encart-corps {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.offre-encart-surtitre {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--vert);
}

.offre-encart .titre-4 {
  font-size: 17px;
  line-height: 1.25;
}

.offre-encart .titre-4 a:hover {
  color: var(--vert);
}

.offre-encart-remise {
  flex: none;
  font: 800 40px/1 var(--titres);
  letter-spacing: -.02em;
  color: var(--vert);
  white-space: nowrap;
}

.offre-encart-boutons {
  display: flex;
  gap: 10px;
}

.offre-encart-boutons .btn {
  flex: 1 1 0;
  height: 48px;
  padding: 0 16px;
  font-size: 14px;
}

.offre-encart-boutons .btn-blanc {
  background: var(--menthe);
}

.offre-encart-boutons .btn-blanc:hover {
  background: var(--filet);
}

@media (max-width: 1023px) {
  /* Avec l'encart, la bannière dépasse souvent l'écran : elle défile normalement au lieu de rester collée (sinon la suite recouvrirait l'encart). */

  .hero:has(.offre-encart) {
    position: relative;
    height: auto;
    min-height: calc(100vh - var(--tete));
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
  }

  .hero:has(.offre-encart) .hero-corps {
    padding-bottom: 28px;
  }

  .offre-encart {
    position: relative;
    right: auto;
    bottom: auto;
    width: auto;
    margin: 0 var(--bord) 110px;
  }
}

@media (max-width: 760px) {
  .offre-encart {
    gap: 12px;
    padding: 14px;
  }

  .offre-encart-haut {
    gap: 12px;
  }

  .offre-encart-visuel {
    width: 72px;
    height: 72px;
  }

  .offre-encart-remise {
    font-size: 28px;
  }

  .offre-encart-surtitre {
    letter-spacing: .14em;
    white-space: nowrap;
  }

  .offre-encart-boutons {
    flex-direction: column;
  }

  .offre-encart-boutons .btn {
    flex: none;
  }
}

/* ---------- offres : cartes de la liste et fiche ---------- */

.offres-grille {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.offre-carte {
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 1px solid var(--filet);
  border-radius: 28px;
  overflow: hidden;
  transition: border-color .3s, box-shadow .3s, transform .3s var(--lent);
}

.offre-carte:hover {
  border-color: var(--vert);
  box-shadow: 0 30px 50px -36px rgba(16, 48, 27, .45);
  transform: translateY(-4px);
}

.offre-carte-visuel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  padding: 24px;
  background: var(--menthe);
}

.offre-carte-visuel img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.offre-remise {
  position: absolute;
  left: 18px;
  top: 18px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--vert);
  color: #fff;
  font: 800 18px/1 var(--titres);
  letter-spacing: -.01em;
  box-shadow: 0 10px 24px -12px rgba(16, 48, 27, .6);
}

.offre-carte-corps {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 22px 24px 26px;
}

.offre-carte-corps .titre-4 a:hover {
  color: var(--vert);
}

.offre-carte-corps .lien {
  margin-top: 8px;
}

.offre-prix {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.offre-prix span {
  font: 800 22px/1 var(--titres);
  color: var(--encre);
}

.offre-prix s {
  color: var(--sourdine);
}

.offre-prix small {
  font-size: 12px;
  color: var(--sourdine);
}

.offre-prix-grand span {
  font-size: clamp(34px, 3.4vw, 48px);
}

.offres-mention {
  margin-top: 40px;
}

.offre-fiche-visuel {
  position: relative;
  align-items: stretch;
  padding: clamp(24px, 4vw, 56px);
  border-radius: 32px;
  background: var(--menthe);
}

.offre-fiche-visuel img {
  width: 100%;
  aspect-ratio: 1;
  -o-object-fit: contain;
     object-fit: contain;
}

.offre-fiche-visuel .offre-remise {
  left: 24px;
  top: 24px;
  font-size: 24px;
  padding: 14px 22px;
}

.offre-fiche-corps {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}

.offre-terminee {
  padding: 14px 18px;
  border-radius: 16px;
  background: var(--menthe);
  color: var(--sourdine);
}

.offre-details {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-top: 1px solid var(--filet);
}

.offre-details div {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 12px 0;
  border-bottom: 1px solid var(--filet);
}

.offre-details dt {
  color: var(--sourdine);
}

.offre-details dd {
  text-align: right;
}

.offre-fiche-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (min-width: 760px) {
  .offre-carte {
    width: calc(50% - 12px);
  }
}

@media (min-width: 1200px) {
  .offre-carte {
    width: calc(33.333% - 16px);
  }
}

@media (max-width: 760px) {
  .hero-legende {
    display: none;
  }

  .hero-voile {
    background: linear-gradient(180deg, rgba(15, 74, 34, .9) 0%, rgba(15, 74, 34, .7) 70%, rgba(15, 74, 34, .55) 100%);
  }
}

/* tout ce qui suit passe au-dessus de la bannière */

.suite {
  position: relative;
  z-index: 2;
  background: #fff;
  box-shadow: 0 -30px 60px -40px rgba(15, 74, 34, .5);
}

.section {
  padding: clamp(80px, 9vw, 140px) var(--bord);
  overflow-x: clip;
}

.contenant {
  max-width: 1240px;
}

@media (min-width: 1600px) {
  .contenant {
    max-width: 1500px;
  }
}

/* ---------- deux colonnes : intro collante à gauche, contenu à droite ---------- */

.deux {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5vw, 72px);
}

.deux-gauche {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}

.deux-gauche .p1 {
  max-width: 46ch;
}

.deux-droite {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-width: 0;
}

@media (min-width: 1024px) {
  .deux {
    flex-direction: row;
    align-items: flex-start;
    gap: 72px;
  }

  .deux-gauche {
    flex: 0 0 38%;
    position: sticky;
    top: 110px;
  }

  .deux-centre {
    align-items: center;
  }

  .deux-centre .deux-gauche {
    position: static;
    flex-basis: 52%;
  }
}

/* ---------- notre pharmacie (introduction) : trois bandeaux + photo ronde ---------- */

.bandeaux {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 520px;
  margin: 6px 0 10px;
}

.bandeau, .bandeau a {
  display: flex;
  align-items: center;
  gap: 14px;
}

.bandeau {
  padding: 10px 22px 10px 10px;
  border-radius: 999px;
  background: var(--menthe);
  border-left: 4px solid var(--vert);
  font: 700 15px/1.3 var(--titres);
  color: var(--encre);
  transition: transform .4s var(--lent);
}

.bandeau:hover {
  transform: translateX(6px);
}

.bandeau-picto {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff;
  color: var(--vert);
}

.bandeau.est-ferme {
  border-left-color: var(--rouge);
}

.bandeau.est-ferme .bandeau-picto {
  color: var(--rouge);
}

.rond-visuel {
  position: relative;
  flex: none;
  width: min(100%, 460px);
  align-self: center;
}

.rond-photo {
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--menthe);
  box-shadow: 0 30px 60px -30px rgba(16, 48, 27, .45);
}

.rond-photo img {
  width: 100%;
  height: 120%;
  -o-object-fit: cover;
     object-fit: cover;
  will-change: transform;
}

@media (min-width: 1024px) {
  .intro .deux-droite.rond-visuel {
    flex: 0 0 40%;
    width: auto;
  }
}

/* ---------- services : liste à gauche, panneaux empilés à droite (un par ligne) ---------- */

.services-index {
  display: none;
  flex-direction: column;
  margin-top: 4px;
}

.services-index a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 7px 0;
  font: 600 13px/1.3 var(--sans);
  color: var(--sourdine);
  transition: color .3s;
}

.services-index a::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--filet);
  transition: background-color .3s, transform .3s var(--lent);
}

.services-index a.est-actif {
  color: var(--encre);
}

.services-index a.est-actif::before {
  background: var(--vert);
  transform: scale(1.3);
}

@media (min-width: 1024px) {
  .services-index {
    display: flex;
  }
}

.pile {
  display: flex;
  flex-direction: column;
}

.panneau {
  position: sticky;
  top: 170px;
  height: clamp(300px, 46vw, 460px);
  overflow: hidden;
  border-radius: 28px;
  background: var(--vert-nuit);
  transform-origin: 50% 0;
  box-shadow: 0 -28px 50px -34px rgba(16, 48, 27, .55);
  will-change: transform;
}

.panneau + .panneau {
  margin-top: 24px;
}

.panneau-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 1.2s var(--lent);
}

.panneau:hover .panneau-photo {
  transform: scale(1.05);
}

.panneau::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(15, 74, 34, .05) 0%, rgba(15, 74, 34, .4) 45%, rgba(15, 74, 34, .95) 100%);
}

.panneau::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--vert-nuit);
  opacity: var(--voile, 0);
  pointer-events: none;
  transition: opacity .1s linear;
}

.panneau-corps {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  padding: clamp(24px, 3vw, 40px);
  color: rgba(255, 255, 255, .88);
}

.panneau-corps .titre-3 {
  color: #fff;
  max-width: 22ch;
}

.panneau-corps .p2 {
  max-width: 48ch;
}

.panneau-numero {
  font: 800 13px/1 var(--titres);
  letter-spacing: .2em;
  color: var(--vert-clair);
}

@media (max-width: 1023px) {
  .panneau {
    top: 84px;
  }
}

@media (min-width: 1024px) {
  #services .pile {
    padding-top: 60px;
  }
}

/* ---------- équipe : section vert nuit, photo ronde + badge ---------- */

.equipe {
  background: var(--vert-nuit);
  color: rgba(255, 255, 255, .82);
}

.equipe-corps {
  display: flex;
  flex-direction: column;
  gap: clamp(36px, 5vw, 72px);
}

.equipe-texte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}

.equipe .titre-2 {
  color: #fff;
}

.equipe .titre-2 b {
  color: var(--vert-clair);
}

.equipe .p1 {
  max-width: 50ch;
}

.cles {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.cles li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  font: 600 13px/1 var(--sans);
  color: #fff;
}

.cles li::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--vert-clair);
}

@media (min-width: 1024px) {
  .equipe-corps {
    flex-direction: row;
    align-items: center;
  }

  .equipe .rond-visuel {
    flex: 0 0 40%;
    width: auto;
  }

  .equipe-texte {
    flex: 1 1 0;
  }
}

/* ---------- produits : frise verticale dont la ligne se remplit ---------- */

.frise {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(36px, 4vw, 56px);
  padding: 8px 0;
}

@media (min-width: 1024px) {
  #produits .deux-droite {
    padding-top: 48px;
  }
}

.frise-ligne {
  position: absolute;
  left: 69px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--filet);
}

.frise-ligne i {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: var(--progres, 0%);
  background: var(--vert);
}

.jalon {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: clamp(22px, 3vw, 40px);
  opacity: .38;
  transition: opacity .6s;
}

.jalon.est-passe, .jalon.est-actif {
  opacity: 1;
}

.jalon-noeud {
  flex: none;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid var(--filet);
  background: var(--menthe);
  transition: border-color .4s, box-shadow .4s;
}

.jalon-noeud img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.jalon.est-passe .jalon-noeud, .jalon.est-actif .jalon-noeud {
  border-color: var(--vert);
}

.jalon.est-actif .jalon-noeud {
  box-shadow: 0 0 0 6px rgba(87, 168, 32, .18);
}

.jalon-corps {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 18px;
}

.jalon-corps .surtitre {
  color: var(--vert);
}

.jalon-corps .p2 {
  max-width: 52ch;
}

@media (max-width: 599px) {
  .frise-ligne {
    left: 47px;
  }

  .jalon-noeud {
    width: 96px;
    height: 96px;
  }

  .jalon-corps {
    padding-top: 4px;
  }
}

/* ---------- livraison : texte + photo qui déborde à droite ---------- */

.livraison-haut {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.livraison-texte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}

.livraison-texte .p1 {
  max-width: 48ch;
}

.points {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.points li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
}

.point-coche {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--vert);
  color: #fff;
}

.livraison-photo {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  border-radius: 32px;
  background: var(--menthe);
}

.livraison-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 1s var(--lent);
}

.livraison-photo:hover img {
  transform: scale(1.03);
}

.livraison-badge {
  position: absolute;
  left: 24px;
  bottom: 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 24px 8px 8px;
  border-radius: 999px;
  background: #fff;
  color: var(--encre);
  font: 700 14px/1.2 var(--titres);
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: 0 20px 40px -20px rgba(16, 48, 27, .5);
}

.livraison-badge svg {
  width: 48px;
  height: 48px;
  padding: 11px;
  border-radius: 50%;
  background: var(--vert);
  color: #fff;
}

@media (max-width: 1023px) {
  .livraison-photo {
    margin: 0 calc(-1 * var(--bord));
    border-radius: 0;
  }
}

@media (min-width: 1024px) {
  .livraison-haut {
    flex-direction: row;
    align-items: stretch;
    gap: 64px;
  }

  .livraison-texte {
    flex: 0 0 calc(50% - 32px);
    justify-content: center;
  }

  .livraison-photo {
    flex: 1 1 0;
    aspect-ratio: auto;
    min-height: 560px;
    margin-right: calc(-1 * var(--bord));
    border-radius: 32px 0 0 32px;
  }
}

/* ---------- avis Google : résumé + cartes qui défilent ---------- */

.avis {
  background: var(--menthe);
  overflow: hidden;
}

.avis-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 48px;
  margin-bottom: clamp(36px, 4vw, 56px);
}

.avis-tete .bloc-titre {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.avis-tete .p1 {
  max-width: 52ch;
}

.avis-fleches {
  display: flex;
  gap: 8px;
}

.avis-fleches button {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--vert-nuit);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .25s;
}

.avis-fleches button:hover {
  background: var(--vert);
}

.widget-avis {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.widget-avis-resume {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 34px 32px;
  background: #fff;
  border-radius: 28px;
}

.avis-google-logo {
  color: var(--vert);
}

.widget-avis-note {
  display: flex;
  align-items: center;
  gap: 12px;
}

.widget-avis-note b {
  font: 800 40px/1 var(--titres);
  color: var(--encre);
  letter-spacing: -.02em;
}

.widget-avis-total b {
  font-weight: 700;
  color: var(--encre);
}

.widget-avis-resume .btn {
  margin-top: 12px;
}

.avis-etoiles {
  display: inline-flex;
  gap: 3px;
}

.avis-etoiles i {
  width: 16px;
  height: 16px;
  background: var(--filet);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.avis-etoiles i.pleine {
  background: var(--etoile);
}

.avis-etoiles i.demie {
  background: linear-gradient(90deg, var(--etoile) 50%, var(--filet) 50%);
}

.widget-avis-defile {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.widget-avis-piste {
  position: relative;
  overflow: hidden;
  padding: 4px 0;
  margin-right: calc(-1 * var(--bord));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 80px, #000 calc(100% - 80px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 80px, #000 calc(100% - 80px), transparent);
  cursor: grab;
  touch-action: pan-y;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.widget-avis-piste.est-glisse {
  cursor: grabbing;
}

.widget-avis-rail {
  display: flex;
  gap: 20px;
  width: -moz-max-content;
  width: max-content;
  will-change: transform;
}

.avis-carte {
  flex: 0 0 min(340px, 80vw);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 26px 26px;
  background: #fff;
  border: 1px solid var(--filet);
  border-radius: 28px;
}

.avis-auteur {
  display: flex;
  align-items: center;
  gap: 12px;
}

.avis-avatar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--vert);
  color: #fff;
  font: 700 16px/1 var(--titres);
}

.avis-carte:nth-child(3n + 2) .avis-avatar {
  background: var(--vert-nuit);
}

.avis-carte:nth-child(3n) .avis-avatar {
  background: var(--vert-clair);
  color: var(--encre);
}

.avis-auteur b {
  display: block;
  font: 700 15px/1.3 var(--titres);
  color: var(--encre);
}

.avis-auteur small {
  font-size: 12px;
  color: var(--sourdine);
}

.avis-carte .p2 {
  flex: 1 1 auto;
}

.avis-source {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--sourdine);
}

.avis-vide {
  padding: 28px 32px;
  background: #fff;
  border-radius: 28px;
  color: var(--sourdine);
}

@media (min-width: 1024px) {
  .widget-avis {
    flex-direction: row;
    align-items: stretch;
  }

  .widget-avis-resume {
    flex: 0 0 300px;
  }
}

/* ---------- marques : ronde de logos + fiche ---------- */

.marques-corps {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(32px, 4vw, 48px);
}

.marques-tete {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.marques-tete .p1 {
  max-width: 58ch;
}

.marques-ronde-corps {
  width: 100%;
  max-width: 900px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.ronde {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.ronde button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--filet);
  transition: border-color .3s, transform .4s var(--lent), box-shadow .4s;
}

.ronde button img {
  max-width: 64px;
  max-height: 52px;
  -o-object-fit: contain;
     object-fit: contain;
  filter: grayscale(1);
  opacity: .6;
  transition: filter .3s, opacity .3s;
}

.ronde button:hover, .ronde button.est-actif {
  border-color: var(--vert);
}

.ronde button.est-actif {
  transform: translateY(-6px);
  box-shadow: 0 20px 30px -20px rgba(16, 48, 27, .5);
}

.ronde button:hover img, .ronde button.est-actif img {
  filter: none;
  opacity: 1;
}

.marque-fiches {
  width: 100%;
  min-height: 180px;
  padding: clamp(28px, 3vw, 44px);
  background: var(--menthe);
  border-radius: 28px;
}

.marque-fiche {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.marque-fiche.est-actif {
  display: flex;
  animation: fiche .5s var(--lent);
}

.marque-fiche .p2 {
  max-width: 60ch;
}

@keyframes fiche {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

@media (max-width: 599px) {
  .ronde button {
    width: 88px;
    height: 88px;
  }

  .ronde button img {
    max-width: 50px;
    max-height: 40px;
  }
}

/* ---------- questions fréquentes ---------- */

.faq-liste {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  border: 1px solid var(--filet);
  border-radius: 22px;
  overflow: hidden;
  transition: border-color .3s, box-shadow .3s;
}

.faq-item.est-ouvert {
  border-color: var(--vert);
  box-shadow: 0 20px 40px -30px rgba(16, 48, 27, .35);
}

.faq-question {
  margin: 0;
}

.faq-question button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 20px 22px 20px 26px;
  text-align: left;
}

.faq-signe {
  position: relative;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--menthe);
  transition: background-color .3s, transform .4s var(--lent);
}

.faq-signe::before, .faq-signe::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 2px;
  background: var(--vert);
  transform: translate(-50%, -50%);
  transition: transform .3s;
}

.faq-signe::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq-item.est-ouvert .faq-signe {
  background: var(--vert);
}

.faq-item.est-ouvert .faq-signe::before, .faq-item.est-ouvert .faq-signe::after {
  background: #fff;
  transform: translate(-50%, -50%);
}

.faq-reponse {
  padding: 0 26px 22px;
}

.faq-reponse[hidden] {
  display: none;
}

/* ---------- bannière des pages intérieures ---------- */

.banniere {
  background: var(--vert-nuit);
  color: rgba(255, 255, 255, .85);
  padding: clamp(100px, 12vw, 160px) var(--bord) clamp(56px, 6vw, 90px);
}

.banniere-corps {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  max-width: 1240px;
}

.banniere .titre-2 {
  color: #fff;
}

.banniere .surtitre {
  color: var(--vert-clair);
}

/* ============================================================================
   Pied de page : contact, carte à la demande, colonnes, horaires, mentions
   ============================================================================ */

.pied {
  position: relative;
  z-index: 2;
  background: var(--vert-nuit);
  color: rgba(255, 255, 255, .75);
}

.pied-haut {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: clamp(72px, 8vw, 120px) var(--bord) clamp(48px, 6vw, 72px);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.pied-haut .bloc-titre {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pied-haut .titre-2 {
  color: #fff;
  max-width: 18ch;
}

.pied-haut .titre-2 b {
  color: var(--vert-clair);
}

.pied-haut .surtitre {
  color: var(--vert-clair);
}

.pied-coord {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.pied-coord-ligne {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 40px;
}

.pied-coord-ligne > div {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 16px;
  border-left: 2px solid var(--vert);
}

.pied-coord small {
  font: 600 11px/1 var(--sans);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--vert-clair);
}

.pied-coord .grande {
  font: 700 clamp(17px, 1.5vw, 21px)/1.25 var(--titres);
  color: #fff;
  letter-spacing: .02em;
}

.pied-coord a.grande:hover {
  color: var(--vert-clair);
}

.pied-coord address {
  font-style: normal;
  font-size: 15px;
  line-height: 1.5;
  color: #fff;
}

.etat-pied {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.etat-pied i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--vert-clair);
}

.etat-pied.est-ferme i {
  background: var(--rouge);
}

.pied-social {
  display: flex;
  gap: 8px;
}

.pied-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  transition: background-color .25s;
}

.pied-social a:hover {
  background: var(--vert);
}

@media (min-width: 1024px) {
  .pied-haut {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 64px;
  }

  .pied-haut .bloc-titre {
    flex: 0 0 38%;
  }

  .pied-coord {
    flex: 1 1 0;
  }
}

.pied-carte {
  position: relative;
  height: clamp(380px, 46vw, 540px);
  overflow: hidden;
  background: var(--vert-nuit-2);
}

.pied-carte iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.pied-carte-corps {
  position: absolute;
  left: var(--bord);
  bottom: 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: min(calc(100% - 2 * var(--bord)), 400px);
  padding: 22px 24px;
  border-radius: 24px;
  background: rgba(15, 74, 34, .92);
  backdrop-filter: blur(12px);
  color: #fff;
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .6);
}

.pied-carte-corps .titre-3 {
  color: #fff;
}

.pied-carte-corps .p2 {
  color: rgba(255, 255, 255, .85);
}

.pied-carte-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}

.pied-colonnes {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 48px;
  padding: clamp(48px, 5vw, 72px) var(--bord);
}

.pied-col {
  flex: 1 1 200px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 14.5px;
}

.pied-col.large {
  flex: 1.6 1 280px;
}

.pied-col .p3 {
  color: rgba(255, 255, 255, .55);
}

.logo-pied {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  align-self: flex-start;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .15);
}

.pied-col p {
  max-width: 44ch;
}

.pied-titre {
  font: 700 13px/1 var(--titres);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
}

.pied-liens {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pied-liens a {
  transition: color .2s;
}

.pied-liens a:hover {
  color: var(--vert-clair);
}

.pied-col-horaires .horaires-ligne {
  font-size: 14px;
}

.pied-bas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  padding: 22px var(--bord);
  font-size: 13px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}

.pied-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
}

.pied-bas a:hover {
  color: var(--vert-clair);
}

@media (max-width: 1023px) {
  .pied-bas {
    padding-bottom: 94px;
  }
}

/* ---------- barre d'actions mobile ---------- */

.barre-actions {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  background: #fff;
  border-top: 1px solid var(--filet);
}

.barre-actions a {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 0 9px;
  font: 700 11px/1 var(--titres);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--encre);
}

.barre-actions a + a {
  border-left: 1px solid var(--filet);
}

.barre-actions svg {
  color: var(--vert);
}

.barre-actions .text-rouge {
  color: var(--rouge);
}

@media (prefers-reduced-motion: reduce) {
  html.anim [data-apparait] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .fantome {
    transform: none !important;
  }

  .hero {
    position: relative;
  }

  .marque-fiche.est-actif, .etat-panneau, .deco-forme {
    animation: none;
  }
}

@media (min-width: 1024px) {
  .lg\:hidden {
    display: none;
  }
}