/*
 * Components — one block per Figma component set (page Components 30:615).
 * Mobile values use --m (cadre 390), desktop values use --u (cadre 1728).
 * Figma strokes are "inside": CSS padding = padding Figma − épaisseur du trait.
 */

/* ---------- Eyebrow (section labels « EXPERTISES », « SERVICES », « À PROPOS ») ---------- */
.eyebrow {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(16 * var(--m));
  line-height: 1.2;
  letter-spacing: calc(0.32 * var(--m));
  text-transform: uppercase;
  color: var(--c-coral);
}

@media (min-width: 1024px) {
  .eyebrow {
    font-size: calc(24 * var(--u));
    letter-spacing: calc(0.48 * var(--u));
  }
}

/* ---------- Menu item (30:901 : Default / Hover / State3) ---------- */
.nav__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(184 * var(--u));
  padding: calc(8 * var(--u)) calc(32 * var(--u));
  border-radius: calc(40 * var(--u));
  font-family: var(--font-text);
  font-size: max(14px, calc(20 * var(--u)));
  line-height: normal;
  color: var(--c-dark);
  text-decoration: none;
  transition: background-color var(--dur-fast) ease;
}

@media (hover: hover) {
  .nav__item:hover {
    background: var(--c-white);
  }
}

.nav__item:active {
  background: var(--c-cream-c80);
}

/* ---------- Bouton contact (30:894 : Default / Hover / Click) ---------- */
.btn-contact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: calc(12 * var(--u)) calc(32 * var(--u));
  border: calc(8 * var(--u)) solid var(--c-pear);
  border-radius: calc(40 * var(--u));
  background: var(--c-cream);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: max(12px, calc(14 * var(--u)));
  line-height: normal;
  letter-spacing: calc(0.28 * var(--u));
  text-transform: uppercase;
  color: var(--c-pear-p100);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}

@media (hover: hover) {
  .btn-contact:hover {
    background: var(--c-pear);
    color: var(--c-dark);
  }
}

.btn-contact:active {
  background: var(--c-pear-p80);
  border-color: var(--c-pear-p80);
  color: var(--c-dark);
}

/* ---------- Bouton « MENU » mobile (instance Bouton contact 30:449) ---------- */
.menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: calc(47 * var(--m));
  padding: 0 calc(16 * var(--m));
  border: calc(4 * var(--m)) solid var(--c-dark);
  border-radius: calc(40 * var(--m));
  background: var(--c-cream);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: calc(12 * var(--m));
  line-height: normal;
  letter-spacing: calc(0.24 * var(--m));
  text-transform: uppercase;
  color: var(--c-dark);
}

/* ---------- Langue « EN » (30:249 · 30:168 · 30:523) ---------- */
.lang {
  position: relative;
  display: inline-flex;
}

.lang__btn {
  display: inline-flex;
  align-items: center;
  gap: calc(10 * var(--m));
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(20 * var(--m));
  line-height: 1;
  color: var(--c-pear);
}

.lang__globe {
  width: calc(24 * var(--m));
  height: calc(24 * var(--m));
  flex: none;
}

.lang__btn--header {
  color: var(--c-pear-p100);
  letter-spacing: calc(0.4 * var(--u));
}

@media (min-width: 1024px) {
  .lang__btn {
    gap: calc(10 * var(--u));
    font-size: max(14px, calc(20 * var(--u)));
  }

  .lang__globe {
    width: max(18px, calc(24 * var(--u)));
    height: max(18px, calc(24 * var(--u)));
  }
}

/* État explicite : aucune version anglaise n'existe dans la maquette (choix technique). */
.lang__note {
  position: absolute;
  z-index: 5;
  top: calc(100% + 10px);
  right: 0;
  width: max-content;
  max-width: 260px;
  padding: 10px 14px;
  border-radius: 16px;
  background: var(--c-dark);
  color: var(--c-cream);
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 1.35;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--dur-fast) ease, transform var(--dur-fast) ease, visibility 0s linear var(--dur-fast);
}

.lang__note.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.lang--footer .lang__note,
.lang--drawer .lang__note {
  left: 0;
  right: auto;
  background: var(--c-cream);
  color: var(--c-dark);
}

/* ---------- Pastilles Number 1 / 2 / 3 (30:855, 30:865, 30:875) ---------- */
.num {
  --num-accent: var(--c-indigo);
  --num-digit: var(--c-indigo);
  --num-rot: 0deg;
  --num-rot-hover: 12deg;
  --num-rot-click: -8deg;
  --num-click-digit: var(--c-white);
  position: absolute;
  display: grid;
  place-items: center;
  width: calc(50 * var(--m));
  height: calc(50 * var(--m));
  border: calc(6 * var(--m)) solid var(--c-white);
  border-radius: 50%;
  background: var(--c-cream);
  transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease;
}

.num--2 {
  --num-accent: var(--c-pear);
  --num-digit: var(--c-pear-p100);
  --num-rot: -8deg;
  --num-rot-hover: 10deg;
  --num-rot-click: 12deg;
  --num-click-digit: var(--c-dark);
}

.num--3 {
  --num-accent: var(--c-coral);
  --num-digit: var(--c-tomato);
  --num-rot: 12deg;
  --num-rot-hover: -12deg;
  --num-rot-click: 0deg;
}

/*
 * Mobile : le contexte MCP annonce 8 px, la géométrie de l'instance correspond à 12 px, mais le PNG
 * de la maquette montre 11 px d'encre pour « 1 », « 2 » et « 3 ». Étalonnage sur le composant
 * (24 px → 17 px d'encre) : 24 × 11 / 17 ≈ 15.5 px. Le rendu PNG fait foi pour l'état statique.
 */
.num__digit {
  display: block;
  font-family: var(--font-text);
  font-weight: 700;
  font-size: calc(15.5 * var(--m));
  line-height: 1;
  letter-spacing: calc(0.1047 * var(--m));
  color: var(--num-digit);
  transform: rotate(var(--num-rot));
  transition: transform var(--dur-fast) ease, color var(--dur-fast) ease;
}

@media (hover: hover) {
  .num:hover {
    border-color: var(--num-accent);
  }

  .num:hover .num__digit {
    transform: rotate(var(--num-rot-hover));
  }
}

.num[aria-expanded="true"] {
  border-color: var(--c-white);
  background: var(--num-accent);
}

.num[aria-expanded="true"] .num__digit {
  color: var(--num-click-digit);
  transform: rotate(var(--num-rot-click));
}

.num--3[aria-expanded="true"] {
  --num-click-digit: var(--c-white);
}

@media (min-width: 1024px) {
  .num {
    width: calc(100 * var(--u));
    height: calc(100 * var(--u));
    border-width: calc(12 * var(--u));
  }

  .num__digit {
    font-size: calc(24 * var(--u));
    letter-spacing: calc(0.2095 * var(--u));
  }
}

/* Apparition au chargement (note 30:588). */
@keyframes num-pop {
  0% {
    opacity: 0;
    transform: scale(0.3) rotate(-25deg);
  }
  70% {
    opacity: 1;
    transform: scale(1.08) rotate(4deg);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

.js .num {
  animation: num-pop 720ms var(--ease-out) both;
}

.js .num--1 {
  animation-delay: 350ms;
}

.js .num--2 {
  animation-delay: 500ms;
}

.js .num--3 {
  animation-delay: 650ms;
}

@media (prefers-reduced-motion: reduce) {
  .js .num {
    animation: none;
  }
}

/* ---------- Notes / tags (quote 4 / 5 / 6, section Tag header 164:80) ---------- */
.tag {
  --tag-bg: var(--c-indigo);
  --tag-fg: var(--c-white);
  --tag-rot: -12deg;
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: calc(10 * var(--m));
  width: calc(300 * var(--m));
  padding: calc(12 * var(--m)) calc(28 * var(--m)) calc(12 * var(--m)) calc(12 * var(--m));
  border-radius: calc(90 * var(--m));
  background: var(--tag-bg);
  color: var(--tag-fg);
  transform: rotate(var(--tag-rot));
  transform-origin: 20% 50%;
  animation: tag-in 380ms var(--ease-out) both;
}

.tag--2 {
  --tag-bg: var(--c-pear);
  --tag-fg: var(--c-dark);
  --tag-rot: 6deg;
}

.tag--3 {
  --tag-bg: var(--c-coral);
  --tag-rot: -2deg;
}

@keyframes tag-in {
  from {
    opacity: 0;
    transform: rotate(var(--tag-rot)) scale(0.6);
  }
  to {
    opacity: 1;
    transform: rotate(var(--tag-rot));
  }
}

.tag__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(60 * var(--m));
  height: calc(60 * var(--m));
  border-radius: 50%;
}

.tag__icon img {
  width: 100%;
  height: 100%;
}

.tag__icon--disc {
  background: var(--c-white);
}

.tag--1 .tag__icon img {
  width: calc(40 * var(--m));
  height: auto;
}

.tag__icon img.tag__hand {
  width: 50%;
  height: auto;
  transform: rotate(-16deg);
}

.tag__text {
  font-family: var(--font-text);
  font-size: calc(14 * var(--m));
  line-height: 1.2;
}

@media (min-width: 1024px) {
  .tag {
    gap: calc(20 * var(--u));
    padding: calc(24 * var(--u)) calc(60 * var(--u)) calc(24 * var(--u)) calc(24 * var(--u));
    border-radius: calc(90 * var(--u));
  }

  .tag--1 {
    width: calc(661 * var(--u));
  }

  .tag--2 {
    width: calc(821 * var(--u));
  }

  .tag--3 {
    width: calc(540 * var(--u));
  }

  .tag__icon {
    width: calc(120 * var(--u));
    height: calc(120 * var(--u));
  }

  .tag--1 .tag__icon img {
    width: calc(80 * var(--u));
  }

  .tag__text {
    font-size: calc(24 * var(--u));
  }
}

/* ---------- Cartes Service 1 / 2 / 3 (30:819, 30:831, 30:843 · mobile 30:358/387/390) ---------- */
.bento__cell {
  position: relative;
  min-width: 0;
}

.svc {
  --svc-accent: var(--c-tomato);   /* couleur du survol */
  --svc-open-bg: var(--c-coral);   /* fond de l'état Opened */
  --svc-open-fg: var(--c-white);
  position: absolute;
  inset: 0 auto auto 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  min-height: 100%;
  padding: calc(12 * var(--m));
  border-radius: calc(20 * var(--m));
  background: var(--c-white);
  color: var(--c-dark);
  transition:
    width var(--dur-med) var(--ease-out),
    border-radius var(--dur-med) var(--ease-out),
    padding var(--dur-med) var(--ease-out),
    background-color var(--dur-med) ease,
    color var(--dur-fast) ease;
}

.svc--1 {
  border-bottom-right-radius: calc(120 * var(--m));
}

.svc--2 {
  --svc-accent: var(--c-pear-p100);
  --svc-open-bg: var(--c-pear);
  --svc-open-fg: var(--c-dark);
}

.svc--3 {
  --svc-accent: var(--c-indigo);
  --svc-open-bg: var(--c-indigo);
  --svc-open-fg: var(--c-cream);
  border-bottom-right-radius: calc(150 * var(--m));
}

.svc__head {
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--m));
}

.svc__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: calc(14 * var(--m));
  line-height: 1.4;
}

.svc__detail {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: calc(14 * var(--m));
  line-height: 1.4;
}

/*
 * Le « + » garde la position du texte Figma ; la marge négative compense exactement le padding
 * qui agrandit la cible (et l'anneau de focus) sans déplacer le signe.
 */
.svc__toggle {
  --hit: 10px;
  align-self: flex-start;
  display: block;
  margin: calc(-1 * var(--hit));
  padding: var(--hit);
  color: inherit;
}

.svc__sign {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(40 * var(--m));
  line-height: 0.6;
}

/* Carte entière cliquable : le bouton « + » étend sa zone à la carte (choix technique). */
.svc__toggle::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.svc[data-state="opened"] {
  z-index: 4;
  background: var(--svc-open-bg);
  color: var(--svc-open-fg);
}

/* Mobile : aucune variante « Opened » dessinée — la carte s'élargit sur la rangée (choix technique). */
.svc--1[data-state="opened"],
.svc--3[data-state="opened"] {
  width: calc(200% + 8 * var(--m));
}

.svc--2[data-state="opened"] {
  inset: 0 0 auto auto;
  width: calc(200% + 8 * var(--m));
}

@media (hover: hover) {
  .svc[data-state="closed"]:hover {
    color: var(--svc-accent);
  }
}

@media (min-width: 1024px) {
  .svc {
    padding: calc(80 * var(--u)) calc(120 * var(--u)) calc(80 * var(--u)) calc(80 * var(--u));
    border-radius: calc(80 * var(--u));
  }

  .svc--1 {
    border-bottom-right-radius: calc(300 * var(--u));
  }

  .svc--2 {
    padding: calc(80 * var(--u));
    border-bottom-right-radius: calc(300 * var(--u));
  }

  .svc--3 {
    align-items: center;
    padding: calc(80 * var(--u)) calc(80 * var(--u)) calc(120 * var(--u));
    border-radius: calc(80 * var(--u));
  }

  .svc__head {
    gap: calc(40 * var(--u));
  }

  .svc--3 .svc__head {
    align-self: stretch;
  }

  .svc--3 .svc__toggle {
    align-self: center;
  }

  .svc__title {
    font-size: calc(36 * var(--u));
  }

  .svc__detail {
    font-size: calc(24 * var(--u));
  }

  .svc__sign {
    font-size: calc(100 * var(--u));
  }

  .svc__toggle {
    --hit: calc(20 * var(--u));
  }

  /* Hover (variantes « State=Hover ») */
  @media (hover: hover) {
    .svc--1[data-state="closed"]:hover {
      padding-top: calc(100 * var(--u));
      padding-bottom: calc(100 * var(--u));
      border-top-right-radius: calc(300 * var(--u));
    }

    .svc--2[data-state="closed"]:hover {
      padding-top: calc(100 * var(--u));
      padding-bottom: calc(100 * var(--u));
      border-top-right-radius: calc(300 * var(--u));
    }

    .svc--3[data-state="closed"]:hover {
      padding-top: calc(100 * var(--u));
      padding-bottom: calc(100 * var(--u));
      border-bottom-left-radius: calc(300 * var(--u));
      border-bottom-right-radius: calc(300 * var(--u));
    }
  }

  /* Opened (variantes « State=Opened » : 1145 × 600, 1072 × 480, 417 × 800) */
  .svc--1[data-state="opened"] {
    width: calc(1145 * var(--u));
    padding: calc(80 * var(--u)) calc(240 * var(--u)) calc(80 * var(--u)) calc(80 * var(--u));
    border-radius: calc(80 * var(--u)) calc(300 * var(--u)) calc(300 * var(--u)) calc(80 * var(--u));
  }

  .svc--2[data-state="opened"] {
    inset: 0 auto auto 0;
    width: calc(1072 * var(--u));
    padding: calc(80 * var(--u)) calc(180 * var(--u)) calc(80 * var(--u)) calc(80 * var(--u));
    border-radius: calc(80 * var(--u)) calc(300 * var(--u)) calc(300 * var(--u)) calc(80 * var(--u));
  }

  .svc--3[data-state="opened"] {
    width: 100%;
    padding: calc(80 * var(--u));
    border-radius: calc(80 * var(--u)) calc(80 * var(--u)) calc(300 * var(--u)) calc(300 * var(--u));
  }

  .svc--1[data-state="opened"] .svc__head,
  .svc--2[data-state="opened"] .svc__head {
    flex-direction: row;
    align-items: flex-start;
    gap: calc(60 * var(--u));
  }

  /* V2 : la carte 2 reprend la colonne de titre de la carte 1, son titre réel ne tient plus sur une ligne. */
  .svc--1[data-state="opened"] .svc__title,
  .svc--2[data-state="opened"] .svc__title {
    flex: none;
    width: calc(330 * var(--u));
  }

  /* V2 : titre réel de six lignes à 36 ; ouvert, il reprend le corps du détail pour tenir dans 417 × 800. */
  .svc--3[data-state="opened"] .svc__title {
    font-size: calc(24 * var(--u));
  }

  .svc--1[data-state="opened"] .svc__detail,
  .svc--2[data-state="opened"] .svc__detail {
    flex: 1 1 0;
  }

  .svc--3[data-state="opened"] .svc__head {
    flex: 1 1 auto;
    justify-content: flex-end;
    padding-bottom: calc(60 * var(--u));
  }
}

/* ---------- Mots du carrousel Services (30:885 : Idle / Default / Hover / Click) ---------- */
.svc-word {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(40 * var(--m));
  line-height: 1.1;
  white-space: nowrap;
  color: var(--c-cream-c60);
  transition: color var(--dur-med) ease;
}

.svc-word.is-active {
  color: var(--c-dark);
}

@media (hover: hover) {
  .svc-word:hover {
    color: var(--c-indigo);
  }
}

.svc-word:active {
  color: var(--c-coral);
}

@media (min-width: 1024px) {
  .svc-word {
    font-size: calc(100 * var(--u));
  }
}

/* ---------- Points du carrousel (Frame 2836 : 30:219 · 30:411) ---------- */
.carousel__dot {
  position: relative;
  width: calc(10 * var(--m));
  height: calc(10 * var(--m));
  border: calc(2 * var(--m)) solid var(--c-cream-c100);
  border-radius: 50%;
  transition: background-color var(--dur-fast) ease;
}

.carousel__dot::before {
  content: "";
  position: absolute;
  inset: -7px;
}

.carousel__dot.is-active {
  background: var(--c-cream-c100);
}

@media (min-width: 1024px) {
  .carousel__dot {
    width: calc(20 * var(--u));
    height: calc(20 * var(--u));
    border-width: calc(4 * var(--u));
  }

  .carousel__dot::before {
    inset: -4px;
  }
}

/* ---------- Champs (form email / form field, desktop 30:927/30:936, mobile 30:945/30:954) ---------- */
.field {
  position: relative;
  display: flex;
  flex-direction: column;
}

.field__control {
  display: block;
  width: 100%;
  margin: 0;
  border: calc(8 * var(--m)) solid var(--c-white);
  background: var(--c-cream);
  color: var(--c-dark);
  font-family: var(--font-text);
  font-weight: 400;
  outline: none;
  appearance: none;
  transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}

.field__control::placeholder {
  color: rgb(46 47 52 / 40%);
  opacity: 1;
}

.field--email .field__control {
  height: calc(76 * var(--m));
  padding: calc(16 * var(--m)) calc(32 * var(--m)) calc(16 * var(--m)) calc(16 * var(--m));
  border-radius: calc(60 * var(--m));
  font-size: calc(20 * var(--m));
  line-height: 1.4;
}

.field--message .field__control {
  height: calc(300 * var(--m));
  padding: calc(24 * var(--m)) calc(16 * var(--m));
  border-radius: calc(20 * var(--m));
  font-size: calc(16 * var(--m));
  line-height: 1.4;
  resize: none;
}

/* Étiquette flottante des états Focus / Entry : présente pour les lecteurs d'écran en permanence. */
.field__label {
  position: absolute;
  z-index: 1;
  top: calc(6 * var(--m));
  left: calc(24 * var(--m));
  font-family: var(--font-text);
  font-weight: 500;
  font-size: calc(12 * var(--m));
  line-height: 1.4;
  color: rgb(46 47 52 / 40%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast) ease;
}

.field--message .field__label {
  left: calc(16 * var(--m));
  font-weight: 400;
}

.field:focus-within .field__control,
.field.is-filled .field__control {
  background: var(--c-cream-c40);
}

.field:focus-within .field__label,
.field.is-filled .field__label {
  opacity: 1;
}

.field:focus-within .field__control::placeholder {
  color: transparent;
}

/* Clavier : repère supplémentaire (choix technique, la maquette ne dessine que fond + étiquette). */
.field__control:focus-visible {
  border-color: var(--c-indigo);
}

.field.is-invalid .field__control {
  border-color: var(--c-tomato);
}

.field__error {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding-left: calc(16 * var(--m));
  font-family: var(--font-text);
  font-size: max(13px, calc(14 * var(--m)));
  line-height: 1.3;
  color: var(--c-dark);
}

.field__error::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-tomato);
}

@media (min-width: 1024px) {
  .field__control {
    border-width: calc(8 * var(--u));
    font-size: calc(32 * var(--u));
  }

  .field--email .field__control {
    height: calc(115 * var(--u));
    padding: calc(32 * var(--u));
    border-radius: calc(40 * var(--u));
    font-size: calc(32 * var(--u));
    line-height: 1.1;
  }

  .field--message .field__control {
    height: calc(300 * var(--u));
    padding: calc(32 * var(--u));
    border-radius: calc(40 * var(--u));
    font-size: calc(32 * var(--u));
    line-height: 1.4;
  }

  .field--message.is-filled .field__control {
    font-size: calc(28 * var(--u));
  }

  .field__label,
  .field--message .field__label {
    top: calc(10 * var(--u));
    left: calc(32 * var(--u));
    font-weight: 400;
    font-size: max(12px, calc(16 * var(--u)));
    line-height: 1.1;
  }

  .field__error {
    padding-left: calc(40 * var(--u));
    font-size: max(14px, calc(20 * var(--u)));
  }
}

/* ---------- CTA « ENVOYER » (CTA 30:908, instance 30:154 · 30:352) ---------- */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: calc(12 * var(--m)) calc(22 * var(--m));
  border: calc(8 * var(--m)) solid var(--c-coral);
  border-radius: calc(80 * var(--m));
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(24 * var(--m));
  line-height: 1.4;
  letter-spacing: calc(0.48 * var(--m));
  text-transform: uppercase;
  color: var(--c-coral);
  white-space: nowrap;
  transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}

@media (hover: hover) {
  .cta:hover {
    background: var(--c-coral);
    color: var(--c-white);
  }
}

.cta:active {
  background: var(--c-tomato);
  border-color: var(--c-tomato);
  color: var(--c-white);
}

@media (min-width: 1024px) {
  .cta {
    padding: calc(28 * var(--u)) calc(48 * var(--u));
    border-width: calc(12 * var(--u));
    font-size: calc(32 * var(--u));
    letter-spacing: calc(0.64 * var(--u));
  }
}

/* ---------- Tiroir du menu mobile (30:505) ---------- */
.drawer {
  --drawer-bg: var(--c-dark);
  --drawer-fg: var(--c-cream);
  --drawer-accent: var(--c-pear);
  --drawer-muted: var(--c-blue-b30);
  --drawer-pressed: var(--c-coral);
  --drawer-close-bg: var(--c-dark);
  position: fixed;
  inset: 0 0 0 auto;
  width: min(calc(366 * var(--m)), calc(100vw - 24px));
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: calc(40 * var(--m)) 0 0 calc(40 * var(--m));
  background: var(--drawer-bg);
  color: var(--drawer-fg);
  overflow: hidden auto;
}

/* Couleurs aléatoires (note 30:553) ; texte ajusté pour le contraste (guide Branding 30:969). */
.drawer[data-theme="pear"] {
  --drawer-bg: var(--c-pear);
  --drawer-fg: var(--c-dark);
  --drawer-accent: var(--c-dark);
  --drawer-muted: var(--c-dark);
  --drawer-pressed: var(--c-indigo);
  --drawer-close-bg: var(--c-pear);
}

.drawer[data-theme="indigo"] {
  --drawer-bg: var(--c-indigo);
  --drawer-fg: var(--c-cream);
  --drawer-accent: var(--c-pear);
  --drawer-muted: var(--c-cream);
  --drawer-pressed: var(--c-pear);
  --drawer-close-bg: var(--c-indigo);
}

.drawer[data-theme="tomato"] {
  --drawer-bg: var(--c-tomato);
  --drawer-fg: var(--c-deep-black);
  --drawer-accent: var(--c-deep-black);
  --drawer-muted: var(--c-deep-black);
  --drawer-pressed: var(--c-cream);
  --drawer-close-bg: var(--c-tomato);
}

.drawer[data-theme="coral"] {
  --drawer-bg: var(--c-coral);
  --drawer-fg: var(--c-dark);
  --drawer-accent: var(--c-dark);
  --drawer-muted: var(--c-dark);
  --drawer-pressed: var(--c-cream);
  --drawer-close-bg: var(--c-coral);
}

.drawer::backdrop {
  background: rgb(46 47 52 / 12%);
}

.drawer[open] {
  display: flex;
  flex-direction: column;
  animation: drawer-in var(--dur-med) var(--ease-out);
}

@keyframes drawer-in {
  from {
    transform: translateX(100%);
  }
}

.drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(24 * var(--m)) calc(24 * var(--m)) calc(24 * var(--m)) calc(32 * var(--m));
}

.drawer__logo {
  display: block;
  color: var(--drawer-fg);
}

.drawer__logo svg {
  width: calc(89.02 * var(--m));
  height: calc(32 * var(--m));
}

.drawer__close {
  display: grid;
  place-items: center;
  width: calc(47 * var(--m));
  height: calc(47 * var(--m));
  border: calc(4 * var(--m)) solid var(--drawer-muted);
  border-radius: 50%;
  background: var(--drawer-close-bg);
  color: var(--drawer-muted);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: calc(16 * var(--m));
  line-height: 1;
  letter-spacing: calc(0.32 * var(--m));
  text-transform: uppercase;
}

.drawer__body {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: calc(40 * var(--m));
  padding: calc(64 * var(--m)) calc(32 * var(--m)) calc(72 * var(--m)) calc(68 * var(--m));
}

.drawer__menu {
  display: flex;
  flex-direction: column;
  gap: calc(40 * var(--m));
}

.drawer__item {
  display: block;
  min-width: calc(207 * var(--m));
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(32 * var(--m));
  line-height: 1.2;
  letter-spacing: calc(0.64 * var(--m));
  color: var(--drawer-fg);
  text-decoration: none;
}

.drawer__item:active {
  color: var(--drawer-pressed);
}

.drawer .lang__btn {
  color: var(--drawer-accent);
}

.drawer__contact {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--m));
  font-family: var(--font-display);
  font-weight: 300;
  font-size: calc(16 * var(--m));
  line-height: normal;
  color: var(--drawer-fg);
}

.drawer__contact a {
  text-decoration: underline;
  text-underline-position: from-font;
}

.drawer :focus-visible {
  outline-color: currentColor;
}

@media (prefers-reduced-motion: reduce) {
  .drawer[open] {
    animation: none;
  }
}