/* CONTACT — CSS HEX-only (genere depuis contact-v2.html) | Palette Accord D | 100% HEX */


/* ─── TOKENS ───
   Le bloc :root qui recopiait ici la palette complète (--rds-fond,
   --rds-accent, --rds-encre, --rds-or…) a été retiré le 2026-07-24 : ces
   valeurs étaient identiques à celles de style.css, chargé avant cette
   feuille. Les redéclarer par page créait un second système à maintenir,
   sans aucun effet sur le rendu. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--rds-font-body);
  font-weight: 300;
  background: var(--rds-fond);
  color: var(--rds-encre);
}

.surtitre {
  display: block; font-family: var(--rds-font-body); font-size: 0.7rem;
  font-weight: 400; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--rds-surtitre); margin-bottom: 1rem;
}
.btn-primary {
  display: inline-block; background: var(--rds-cta); color: var(--rds-cta-texte);
  font-family: var(--rds-font-body); font-size: 0.75rem; font-weight: 400;
  letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none;
  padding: 1rem 2.4rem; border: none; border-radius: var(--rds-radius); cursor: pointer;
  transition: filter var(--rds-transition), transform var(--rds-transition);
}
.btn-primary:hover { filter: brightness(0.88); transform: translateY(-2px); }

.ph {
  border-radius: 6px; display: flex; align-items: center; justify-content: center;
  font-family: var(--rds-font-body); font-size: 0.65rem; letter-spacing: 0.1em;
  text-transform: uppercase; text-align: center; padding: 12px;
}
.ph--rose {
  background: repeating-linear-gradient(45deg,
    #7337571F 0px,
    #7337571F 1px,
    #73375738 1px,
    #73375738 14px);
  border: 1px dashed #7337574D;
  color: var(--rds-taupe);
}
.ph--vert {
  background: repeating-linear-gradient(45deg,
    #37734A1A 0px,
    #37734A1A 1px,
    #37734A33 1px,
    #37734A33 14px);
  border: 1px dashed #37734A47;
  color: var(--rds-taupe);
}
.ph--or {
  background: repeating-linear-gradient(-45deg,
    #C9A4581F 0px,
    #C9A4581F 1px,
    #C9A45838 1px,
    #C9A45838 14px);
  border: 1px dashed #C9A45847;
  color: var(--rds-taupe);
}

/* Cadre doré */
.gold-frame {
  position: relative;
  display: block;
  padding: 0;
  background: #F7ECE4;
  border: 1px solid #C9A45873;
  border-radius: 5px;
  box-shadow:
    0 0 0 3px #FAF1EDFF,
    0 0 0 4px #C9A4582E,
    0 4px 20px #2A1F1A0F;
}
.gold-frame > * { display: block; width: 100%; border-radius: 3px; }
.gold-frame > img { aspect-ratio: 4/5; object-fit: cover; }

/* ── Carrousel photo générique ── */
.photo-carousel {
  position: relative; width: 100%; overflow: hidden;
  border-radius: 3px; background: #1A130F;
}
.photo-carousel__slides {
  display: flex; height: 100%;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.photo-carousel__slide { min-width: 100%; height: 100%; flex-shrink: 0; }
.photo-carousel__slide .ph { width: 100%; height: 100%; border-radius: 0; }
.photo-carousel__slide img { width: 100%; height: 100%; object-fit: contain; background: #FAF1ED; border-radius: 0; }
.photo-carousel__btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  background: #FFFFFF2E; backdrop-filter: blur(8px);
  border: 1px solid #FFFFFF4D;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background var(--rds-transition), transform 0.2s;
  z-index: 3;
}
.photo-carousel__btn:hover { background: #FFFFFF52; transform: translateY(-50%) scale(1.08); }
.photo-carousel__btn svg { width: 16px; height: 16px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.photo-carousel__btn--prev { left: 12px; }
.photo-carousel__btn--next { right: 12px; }
.photo-carousel__dots {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 6px; z-index: 3;
}
.photo-carousel__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #FFFFFF66; border: none; cursor: pointer; padding: 0;
  transition: background 0.25s, width 0.25s;
}
.photo-carousel__dot--active { width: 20px; border-radius: 3px; background: #fff; }
.photo-carousel__counter {
  position: absolute; top: 12px; right: 14px; z-index: 3;
  font-family: var(--rds-font-body); font-size: 0.6rem; font-weight: 400;
  letter-spacing: 0.14em; color: #FFFFFFB3;
  background: #00000040; backdrop-filter: blur(4px);
  padding: 0.25rem 0.6rem; border-radius: 20px;
}
.gold-frame__corner { position: absolute; width: 20px; height: 20px; pointer-events: none; z-index: 2; }
.gold-frame__corner--tl { top: -1px; left: -1px; }
.gold-frame__corner--tr { top: -1px; right: -1px; transform: scaleX(-1); }
.gold-frame__corner--bl { bottom: -1px; left: -1px; transform: scaleY(-1); }
.gold-frame__corner--br { bottom: -1px; right: -1px; transform: scale(-1); }

/* ── Carrousel hero Contact — JS : services.js ── */
.atelier-carousel {
  position: relative; border-radius: 3px; overflow: hidden;
  width: 100%; height: 100%; background: #FAF1ED;
}
.atelier-carousel__slides {
  display: flex; height: 100%;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.atelier-carousel__slide {
  min-width: 100%; height: 100%; flex-shrink: 0; background: #FAF1ED;
}
.atelier-carousel__slide img { width: 100%; height: 100%; object-fit: contain; background: #FAF1ED; }
.atelier-carousel__slide .ph { width: 100%; height: 100%; border-radius: 0; }
.atelier-carousel__btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  background: #FFFFFF2E; backdrop-filter: blur(8px);
  border: 1px solid #FFFFFF4D;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background var(--rds-transition), transform 0.2s;
  z-index: 3;
}
.atelier-carousel__btn:hover { background: #FFFFFF52; transform: translateY(-50%) scale(1.08); }
.atelier-carousel__btn svg { width: 16px; height: 16px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.atelier-carousel__btn--prev { left: 12px; }
.atelier-carousel__btn--next { right: 12px; }
.atelier-carousel__dots {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 6px; z-index: 3;
}
.atelier-carousel__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #FFFFFF66; border: none; cursor: pointer; padding: 0;
  transition: background 0.25s, width 0.25s;
}
.atelier-carousel__dot--active { width: 20px; border-radius: 3px; background: #fff; }
  /* Compteur posé sur la photo du carrousel. Il était en blanc translucide sur
     un simple voile noir : sur une photo claire, cela tombe à 1,6:1 — la mesure
     automatique ne le voit pas, puisque le contraste dépend de l'image. Le style
     de la page Services (pastille crème opaque + encre) tient 9,7:1 sur une photo
     sombre et 14,4:1 sur une photo claire : c'est lui qui est repris ici, ce qui
     donne au passage le même compteur sur les trois pages. */
.atelier-carousel__counter {
  position: absolute; top: 12px; right: 14px; z-index: 3;
  font-family: var(--rds-font-body); font-size: 0.6rem; font-weight: 400;
  letter-spacing: 0.14em; color: var(--rds-encre);
  background: #FAF1EDCC; backdrop-filter: blur(6px);
  border: 1px solid #C9A45852;
  padding: 0.25rem 0.6rem; border-radius: 20px;
}
.atelier-carousel:not([data-carousel-manual]) .atelier-carousel__slides {
  position: relative;
  display: block;
  height: 100%;
  transform: none !important;
  transition: none;
}
.atelier-carousel:not([data-carousel-manual]) .atelier-carousel__slide {
  position: absolute;
  inset: 0;
  min-width: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.atelier-carousel:not([data-carousel-manual]) .atelier-carousel__slide:first-child { opacity: 1; }
.atelier-carousel.is-ready:not([data-carousel-manual]) .atelier-carousel__slide {
  opacity: 0;
  transition: opacity 1.1s ease;
}
.atelier-carousel.is-ready:not([data-carousel-manual]) .atelier-carousel__slide.is-active { opacity: 1; }
.atelier-carousel:not([data-carousel-manual]) .atelier-carousel__btn,
.atelier-carousel:not([data-carousel-manual]) .atelier-carousel__dots,
.atelier-carousel:not([data-carousel-manual]) .atelier-carousel__counter {
  display: none;
}

.floral-divider {
  display: flex; align-items: center; justify-content: center; padding: 1.5rem 0;
}
.shops .floral-divider { background: transparent; }

/* ──────────── HERO ÉDITORIAL SPLIT (sync atelier.html v1__edito) ──────────── */
.v1__edito {
  background: var(--rds-vert); color: #fff;
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1fr 1fr; align-items: stretch;
  min-height: 640px;
}
.v1__edito-inner {
  padding: 7rem 4rem 6rem; position: relative; z-index: 2;
  display: flex; flex-direction: column; justify-content: center;
  max-width: 640px; margin-left: auto;
}
.v1__edito-tag {
  display: inline-flex; align-items: center; gap: 0.75rem;
  font-family: var(--rds-font-body); font-size: 0.65rem; font-weight: 400;
  letter-spacing: 0.28em; text-transform: uppercase; color: #fff;
  margin-bottom: 1.4rem; padding: 0.4rem 1rem;
  border: 1px solid #FFFFFF66;
  border-radius: 40px;
  background: #FFFFFF14;
  backdrop-filter: blur(4px);
  align-self: flex-start;
}
.v1__edito-tag::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--rds-or); flex-shrink: 0; }
.v1__edito-byline {
  font-family: var(--rds-font-body); font-size: 0.7rem; font-weight: 400;
  letter-spacing: 0.3em; text-transform: uppercase; color: #FFFFFFB3;
  margin-bottom: 1.6rem; display: block;
}
.v1__edito-title {
  font-family: var(--rds-font-title); font-style: normal;
  font-size: clamp(2.8rem, 5.4vw, 4.8rem); font-weight: 500;
  color: #fff; line-height: 1; margin-bottom: 1.8rem; letter-spacing: -0.01em;
}
.v1__edito-title em { color: var(--rds-or); font-style: italic; font-weight: 300; }
.v1__edito-sep { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; }
.v1__edito-sep-line { width: 56px; height: 1px; background: #C9A458CC; }
.v1__edito-text {
  font-family: var(--rds-font-title); font-style: normal;
  font-size: clamp(1.1rem, 1.5vw, 1.3rem); font-weight: 300;
  color: #FFFFFFE0; line-height: 1.7; max-width: 520px; text-wrap: pretty;
}
@media (max-width: 960px) {
  .v1__edito { grid-template-columns: 1fr; }
  .v1__edito-inner { max-width: none; margin: 0; padding: 6rem 2rem 3rem; }
}

/* ─── Hero « Contact » — photo plein fond (2026-07-09 decies) ───
   Même LOGIQUE que Notre Histoire / Nos Services (photo plein cadre + voile +
   texte superposé, cf. notre-histoire.css pour le détail du piège de spécificité
   avec tokens-accord-d.css, résolu ici de la même façon) : le sujet de la photo
   (bouquet sur le comptoir) est à droite, la zone de lecture (comptoir flou,
   vases) à gauche — texte à gauche, voile assombri à gauche, exactement comme
   Notre Histoire / Nos Services (pas de mirroir, contrairement à Nos Ateliers).
   Remplace l'ancien hero split .v1__edito-right + .gold-frame--on-vert (retiré
   entièrement, pas de code mort superposé — même principe que les 3 autres
   pages déjà migrées). */
.v1__edito.v1__edito--photo-bg {
  grid-template-columns: 1fr;
  background: var(--rds-encre) !important; /* fond de secours pendant le chargement de la photo */
}
.v1__edito.v1__edito--photo-bg::before,
.v1__edito.v1__edito--photo-bg::after {
  display: none !important; /* neutralise le grain papier / vignette de tokens-accord-d.css, pensés pour un fond plat */
}
.v1__edito.v1__edito--photo-bg .v1__edito-bg {
  position: absolute; inset: 0; z-index: 0;
}
.v1__edito-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Photo du 2026-09-06 : rayon décoration, étagères de vases et cache-pots à
     gauche, table de présentation et hortensias roses à droite. Elle mesure
     1536 × 1024 (3:2) là où la précédente faisait 1774 × 887 (2:1) — le cadre
     du hero étant nettement plus large que haut, le rognage est ici VERTICAL
     (31,5 % mesurés à 1440 × 900) et c'est la seconde valeur qui gouverne.
     ⚠️ 62 % et non 45 % : plus bas, le haut de l'étagère — orchidées et
     branchages — sortait du cadre et le meuble se lisait comme coupé en deux.
     À 62 %, l'étagère tient entière et le bas conserve les pots au sol.
     La première valeur reste sans effet au-dessus de ~990px de large (aucun
     rognage horizontal à cette hauteur de cadre) ; elle sert la plage étroite
     961-990px. */
  object-position: 68% 62%;
  display: block;
}
/* Voile — assombrit la zone de lecture (gauche, sous le texte) + vignette
   haut/bas douce, identique à Notre Histoire / Nos Services. */
.v1__edito.v1__edito--photo-bg .v1__edito-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(42, 31, 26, 0.66) 0%,
      rgba(42, 31, 26, 0.42) 28%,
      rgba(42, 31, 26, 0.10) 52%,
      rgba(42, 31, 26, 0)    72%),
    linear-gradient(180deg,
      rgba(31, 22, 18, 0.38) 0%,
      rgba(31, 22, 18, 0)    22%,
      rgba(31, 22, 18, 0)    68%,
      rgba(31, 22, 18, 0.48) 100%);
}
.v1__edito--photo-bg .v1__edito-inner {
  margin-left: 0;
  margin-right: auto;
  /* Même affinage de composition que Notre Histoire / Nos Services : décalé
     vers la droite et légèrement remonté. Neutralisé sous 960px ci-dessous. */
  transform: translate(100px, -24px);
  text-shadow: 0 2px 20px rgba(20, 14, 11, 0.4);
}

@media (max-width: 960px) {
  /* Sous 960px le cadre se redresse et le rognage redevient HORIZONTAL
     (14,6 % à 820px, 59,4 % à 390px) : c'est la première valeur qui gouverne.
     ⚠️ 60 % et non 78 % : la photo du 2026-09-06 a sa baie vitrée à l'extrême
     droite, et 78 % la ramenait en plein cadre — une zone surexposée juste
     derrière le titre, l'étagère étant par ailleurs presque entièrement
     perdue. À 60 %, le montant droit de l'étagère et la table de présentation
     tiennent ensemble, sans la baie. */
  .v1__edito-bg img { object-position: 60% 45%; }
  .v1__edito--photo-bg .v1__edito-inner { transform: none; }
  .v1__edito.v1__edito--photo-bg .v1__edito-veil {
    background:
      linear-gradient(180deg,
        rgba(42, 31, 26, 0.62) 0%,
        rgba(42, 31, 26, 0.40) 24%,
        rgba(42, 31, 26, 0.44) 62%,
        rgba(42, 31, 26, 0.74) 100%),
      rgba(42, 31, 26, 0.32);
  }
}

/* ──────────── BANDEAU QUICK CONTACTS (modèle A) ──────────── */
.quick {
  background: var(--rds-fond);
  padding: 4rem 3rem 4.5rem;
  border-bottom: 1px solid #2A1F1A0F;
}
.quick__inner {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
}
.quick__cell {
  text-align: center; padding: 0.5rem 2rem;
  border-right: 1px solid #2A1F1A1A;
}
.quick__cell:last-child { border-right: none; }
.quick__icon {
  width: 48px; height: 48px; margin: 0 auto 1.1rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #7337571A;
  border: 1px solid #73375759;
}
.quick__icon svg { width: 20px; height: 20px; stroke: var(--rds-accent); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.quick__label {
  font-family: var(--rds-font-body); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--rds-accent);
  margin-bottom: 0.7rem;
}
.quick__value {
  font-family: var(--rds-font-title); font-size: 1.25rem; font-weight: 400;
  color: var(--rds-encre); line-height: 1.35;
}
.quick__value a { color: inherit; text-decoration: none; border-bottom: 1px solid #7337574D; transition: border-color var(--rds-transition), color var(--rds-transition); }
.quick__value a:hover { color: var(--rds-accent); border-bottom-color: var(--rds-accent); }

/* ── Sélecteur de boutique (bandeau Quick Contacts, cellule Horaires) ──
   Lot « harmonisation des sélecteurs » (2026-09-10) : ce champ était le
   seul contrôle encadré de la page — fond quasi blanc, bordure sur les
   quatre côtés, ombre portée, 46px de haut. Il ne partageait aucun
   repère visuel avec les sélecteurs Sujet / Budget du formulaire,
   désignés par Loïc comme source de vérité graphique.

   Le <select> natif est désormais doublé par le combobox partagé
   (assets/js/rds-select.js) : c'était la seule façon d'habiller aussi
   le MENU OUVERT, que le navigateur peint hors de portée du CSS. Voir
   l'en-tête de assets/css/rds-select.css.

   ⚠️ Le fond de la section .quick est le crème `--rds-fond` (#FAF1ED),
   MESURÉ — et non le rose `--rds-fond-alt` qu'annonce encore la table
   « Template Contact » de CLAUDE.md. Le panneau ouvert est donc bâti
   sur le crème : sur le rose il jurerait franchement.

   Typographie Cormorant conservée (et non le Lato du formulaire) : la
   valeur affichée doit garder le poids visuel de .quick__value dans les
   deux cellules voisines (Téléphone / Email). C'est le sens de la
   consigne « harmonisé avec sa section, pas copié aveuglément » : même
   langage graphique — trait fin, même flèche, même menu — décliné sur
   le fond et la typographie de chaque section. */
.quick__hours-select-wrap {
  position: relative;
  width: 100%; max-width: 240px; margin: 0 auto 0.7rem;
}
.quick .rds-select {
  --rds-select-font: var(--rds-font-title);
  --rds-select-size: 1.05rem;
  --rds-select-weight: 400;
  --rds-select-trait: color-mix(in oklch, var(--rds-accent) 38%, transparent);
  --rds-select-padding: 0.55rem 1.7rem 0.55rem 0;
  /* Panneau assorti au crème de la section : un rien plus clair que le
     fond, détaché par un filet prune discret et une ombre douce — pas
     un panneau blanc posé sur la page.

     ⚠️ `in srgb`, surtout PAS `in oklch` : le blanc n'a pas de teinte
     (hue « none » en oklch), et Chrome la ramène alors à 0° au lieu de
     reprendre celle de l'autre couleur. Mesuré par échantillonnage de
     pixels : `color-mix(in oklch, #FAF1ED 88%, #FFF)` rendait
     [251,242,244] — un panneau ROSÉ (B > G) posé sur une section crème
     [250,241,237]. En srgb la teinte est conservée. Le mélange avec
     `transparent` (bordures ci-dessous) n'a PAS ce défaut : une couleur
     d'alpha nul voit ses composantes ignorées, la teinte de l'autre
     survit. */
  --rds-select-panneau-bg: color-mix(in srgb, var(--rds-fond) 88%, var(--rds-blanc));
  --rds-select-panneau-trait: color-mix(in oklch, var(--rds-accent) 26%, transparent);
  --rds-select-panneau-ombre: 0 6px 20px #2A1F1A1F;
  --rds-select-option-padding: 0.5rem 0.85rem;
}
/* Repli sans JavaScript : le <select> natif reste seul en scène et garde
   l'habillage fin du composant plutôt que le chrome du système.
   `:not(.rds-select__native)` retire cette règle dès que le script a
   pris la main — le natif est alors masqué, le styler serait du bruit. */
.quick__hours-select:not(.rds-select__native) {
  display: block; width: 100%;
  font-family: var(--rds-font-title); font-size: 1.05rem; font-weight: 400;
  color: var(--rds-encre); background-color: transparent;
  border: 0; border-bottom: 1px solid color-mix(in oklch, var(--rds-accent) 38%, transparent);
  border-radius: 0;
  padding: 0.55rem 1.7rem 0.55rem 0; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1.5 2L6 6.5L10.5 2' stroke='%23733757' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.2rem center;
  background-size: 12px 8px;
  transition: border-color var(--rds-transition);
}
.quick__hours-select:not(.rds-select__native):hover { border-bottom-color: var(--rds-accent); }

/* .quick__value hérite déjà de la taille Cormorant du bloc — les panneaux
   statiques (repli sans JS) et la sortie unique (avec JS) réutilisent cette
   classe pour rester visuellement identiques dans les deux cas. */
.quick__hours-panel + .quick__hours-panel { margin-top: 0.6rem; }
.quick__hours-panel strong { font-family: var(--rds-font-body); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rds-accent); display: block; margin-bottom: 0.2rem; }
.quick__hours-static[hidden] { display: none; }
.quick__hours-output { white-space: pre-line; }

/* ──────────── FORMULAIRE ÉDITORIAL ──────────── */
.form-wrap {
  background: var(--rds-fond-alt); padding: 6rem 3rem;
  position: relative; overflow: hidden;
}
.form-wrap::after {
  content: ''; position: absolute; right: -8%; bottom: -8%;
  width: 320px; height: 320px;
  background: radial-gradient(circle, #C9A4582E 0%, transparent 70%);
  pointer-events: none;
}
.form-inner {
  max-width: 1100px; margin: 0 auto; position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 4rem; align-items: start;
}
.form-aside { padding-top: 0.5rem; }
.form-orn {
  display: block; color: var(--rds-accent);
  width: 92px; height: 92px;
  opacity: 0.35;
  margin: 0 0 0.6rem -0.4rem;
}
.form-orn svg { width: 100%; height: 100%; display: block; }
.form-aside-overline {
  font-family: var(--rds-font-body); font-size: 0.7rem; font-weight: 400; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--rds-accent); margin-bottom: 1rem; display: block;
}
.form-aside-title {
  font-family: var(--rds-font-title); font-style: normal;
  font-size: clamp(1.7rem, 2.6vw, 2.3rem); font-weight: 500;
  color: var(--rds-encre); line-height: 1.2; margin-bottom: 1.2rem;
}
.form-aside-text {
  font-size: 0.95rem; color: var(--rds-taupe); line-height: 1.85; margin-bottom: 2rem;
}
.form-aside-quote {
  font-family: var(--rds-font-title); font-style: italic;
  font-size: 1.05rem; color: var(--rds-encre); line-height: 1.6;
  padding-left: 1.2rem;
  border-left: 2px solid var(--rds-accent);
}
.form-card {
  position: relative;
  background: var(--rds-surface, #F4E5DE);
  border: 1px solid #C9A45873;
  border-radius: 6px;
  box-shadow: 0 0 0 3px var(--rds-fond-alt), 0 0 0 4px #C9A4582E, 0 8px 40px #2A1F1A0F;
  padding: 2.5rem;
  /* Crème des surfaces de saisie de cette carte. UNE seule valeur, déclarée
     ici, consommée par deux endroits qui doivent rester identiques : le fond
     des trois champs encadrés (Nom, Email, Téléphone) et le panneau ouvert du
     combobox partagé (--rds-select-panneau-bg, plus bas). Les deux se lisent à
     deux lignes d'écart dans le formulaire ; les écrire deux fois les aurait
     laissés diverger au premier ajustement.
     ⚠️ `in srgb` et non `in oklch` — voir la note détaillée sur la perte de
     teinte au contact du blanc, dans .quick .rds-select plus haut. */
  --rds-form-champ-bg: color-mix(in srgb, var(--rds-surface) 76%, var(--rds-blanc));
}

/* CF7 styles dans form-card */
/* ⚠️ `minmax(0, 1fr)`, jamais `1fr` : `1fr` vaut `minmax(auto, 1fr)`, et
   la largeur min-content du plus long libellé remontait jusqu'à la piste
   de grille. Mesuré avant ce lot : les deux colonnes annoncées égales
   valaient en réalité 259px / 203px à 1440px, et 259px / 109px à 1024px
   — « Wanfercée-Baulet », dans le sélecteur Boutique, écrasait la
   colonne voisine. C'est la cause réelle de l'aspect disparate des trois
   sélecteurs du formulaire ; remplacer le <select> par un <button> ne
   l'aurait PAS corrigée à elle seule (même largeur intrinsèque).
   `min-width: 0` sur .rds-field lève la même contrainte au niveau des
   items de grille. */
.form-card .wpcf7-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.3rem; }
.form-card .rds-field { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.form-card .rds-field--full { grid-column: 1 / -1; }
.form-card label,
.form-card .rds-field label {
  font-family: var(--rds-font-body); font-size: 0.66rem; font-weight: 400; letter-spacing: 0.22em;
  text-transform: uppercase; color: #433631;
}
.form-card input, .form-card select, .form-card textarea {
  font-family: var(--rds-font-body); font-size: 0.92rem; font-weight: 300;
  color: var(--rds-encre);
  padding: 0.65rem 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid #2A1F1A33;
  border-radius: 0;
  transition: border-color var(--rds-transition);
  width: 100%;
}
/* ── Fond des trois champs encadrés : Nom, Email, Téléphone ──────────
   Ces trois-là ne portent PAS le filet bas de la règle ci-dessus. Le
   bloc « Contact Form 7 » de style.css les habille en boîte complète
   (`background: var(--rds-blanc)`, cadre 1px, rayon 4px, retrait
   0.9/1.2rem) et l'emporte : `.wpcf7-form input[type="text"]` pèse
   0-2-1 contre 0-1-1 pour `.form-card input`. C'est de la spécificité,
   pas de l'ordre — charger contact.css après ne suffit donc pas.

   Blancs sur la crème de la carte, ils tranchaient au point de ne plus
   appartenir au formulaire (constat de Loïc, 2026-09-11). On ne corrige
   ICI que leur fond : le cadre, le rayon, les retraits et le
   comportement restent ceux de style.css — la demande était de les
   intégrer, pas de les transformer en champs soulignés comme leurs
   voisins. Le reste de l'écart visuel (la boîte elle-même) est donc
   conservé volontairement.

   Spécificité 0-3-1 : strictement supérieure à celle de style.css, pour
   ne pas dépendre de l'ordre de chargement. Ce thème s'est déjà fait
   prendre deux fois par une égalité de spécificité (.surtitre--inverse,
   .v1__edito) — mesuré ensuite dans le navigateur, pas déduit. */
.form-card .wpcf7-form input[type="text"],
.form-card .wpcf7-form input[type="email"],
.form-card .wpcf7-form input[type="tel"] {
  background: var(--rds-form-champ-bg);
}
/* ⚠️ Point ouvert, volontairement NON traité ici : le remplissage
   automatique. Chrome, Edge et Safari peignent leur propre fond sur un
   champ auto-rempli, et Nom, Email et Téléphone sont précisément les
   trois qu'un navigateur connaît déjà — le fond ci-dessus peut donc
   disparaître chez un internaute déjà venu. Le contournement connu
   (`box-shadow: inset` opaque, `-webkit-text-fill-color`) n'a PAS été
   posé : il occupe la propriété qui porte aussi le halo du focus
   clavier, il force la couleur du texte au-delà de l'état auto-rempli,
   et rien ici n'a pu le vérifier en conditions réelles — un
   déclenchement d'autofill ne se simule pas en navigateur piloté. Le
   poser sur le seul raisonnement reviendrait à livrer non mesuré ce que
   tout le reste de ce bloc a mesuré. À traiter sur demande, avec une
   vérification en navigateur réel. */
/* Le placeholder était l'encre à 35 % : 2,14:1 sur le fond des champs, un
   texte que rien ne permet de lire. Le taupe est le token de texte secondaire
   du thème — 6,24:1 sur la crème des champs encadrés (7,35:1 tant qu'ils
   étaient blancs, jusqu'au 2026-09-11), 5,98:1 sur la surface crème de la
   zone de texte — et il reste franchement distinct de l'encre du texte saisi.
   Un alpha n'aurait pas suffi : il faut au moins 65 % d'encre pour tenir 4,5:1,
   et à ce niveau le placeholder se confond avec une saisie réelle. */
.form-card input::placeholder, .form-card textarea::placeholder { color: var(--rds-taupe); opacity: 1; }
/* Option initiale d'un <select> non encore choisie. La règle ne visait que
   :invalid — or aucun select de ce formulaire ne porte l'attribut HTML
   required (Contact Form 7 valide via aria-required et sa propre classe), donc
   elle ne s'appliquait jamais : une règle morte qui, le jour où elle aurait
   pris, aurait rendu 3,19:1. Le sélecteur :has() la rend effective sur les
   navigateurs evergreen ; ailleurs le rendu retombe sur l'encre du select,
   qui tient 13:1. Les deux états sont donc conformes. */
.form-card select:invalid,
.form-card select:has(option[value=""]:checked) { color: var(--rds-taupe); }
/* ── Sélecteurs du formulaire (Sujet, Boutique, Budget) ──────────────
   Les trois <select> de ce formulaire sont doublés par le combobox
   partagé (assets/js/rds-select.js) afin que leur MENU OUVERT cesse
   d'être le panneau blanc du système. Le composant est réglé ici pour
   reproduire À L'IDENTIQUE l'état fermé de Sujet / Budget, que Loïc a
   désigné comme source de vérité graphique : Lato 0.92rem en graisse
   300, fond transparent, aucun cadre, un simple filet bas à
   #2A1F1A33, 0.65rem de retrait vertical. Rien n'est réinventé — seule
   la flèche passe du chrome natif au chevron du thème, et la largeur
   devient enfin celle de la colonne (voir la note sur minmax(0,1fr)).

   ⚠️ Ces valeurs doivent rester alignées sur la règle
   `.form-card input, .form-card select, .form-card textarea`
   ci-dessus : c'est elle qui habille les champs texte voisins, et le
   soulignement du composant doit tomber exactement au même endroit. */
.form-card .rds-select {
  --rds-select-font: var(--rds-font-body);
  --rds-select-size: 0.92rem;
  --rds-select-weight: 300;
  --rds-select-trait: #2A1F1A33;
  --rds-select-padding: 0.65rem 1.7rem 0.65rem 0;
  /* Panneau assorti à la carte du formulaire : sa surface crème
     éclaircie, cernée du même filet or que .form-card. Il se lit comme
     une petite carte du même univers, jamais comme une fenêtre système.
     Depuis le 2026-09-11, la valeur n'est plus écrite ici : elle vient de
     --rds-form-champ-bg, posée sur .form-card, que partagent le panneau et
     le fond des trois champs encadrés du formulaire. */
  --rds-select-panneau-bg: var(--rds-form-champ-bg);
  --rds-select-panneau-trait: #C9A45873;
  --rds-select-panneau-ombre: 0 8px 26px #2A1F1A24;
  --rds-select-option-padding: 0.5rem 0.8rem;
}
.form-card input:focus, .form-card select:focus, .form-card textarea:focus {
  border-bottom-color: var(--rds-accent);
}
/* La checkbox RGPD est un <input> de .form-card : la règle générale
   ci-dessus (outline:none + soulignement) est pensée pour les champs
   texte et retirait tout repère de focus sur une checkbox native, qui
   n'a pas de bordure basse à souligner — son focus clavier devenait
   invisible (constat CONTACT-02, audit Codex). On restaure ici,
   uniquement pour ce champ, le double anneau global du thème (prune +
   halo clair, cf. la règle :focus-visible universelle injectée par
   functions.php) plutôt que d'inventer un style de focus propre à la
   page. Spécificité volontairement plus élevée que la règle ci-dessus
   pour la battre sans !important. */
.form-card .rds-field--rgpd input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--rds-focus);
  outline-offset: 3px;
  border-radius: 2px;
  box-shadow: 0 0 0 3px var(--rds-focus-halo);
}
.form-card textarea { resize: vertical; min-height: 90px; line-height: 1.6; }
.form-card .wpcf7-submit, .form-card [type="submit"] {
  display: inline-block; background: var(--rds-cta); color: var(--rds-cta-texte);
  font-family: var(--rds-font-body); font-size: 0.75rem; font-weight: 400;
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: 1rem 2.4rem; border: none; border-radius: var(--rds-radius); cursor: pointer;
  transition: filter var(--rds-transition), transform var(--rds-transition);
}
.form-card .wpcf7-submit:hover, .form-card [type="submit"]:hover {
  filter: brightness(0.88); transform: translateY(-2px);
}
.form-card .wpcf7-response-output { grid-column: 1 / -1; font-size: 0.85rem; }
.form-card .wpcf7-acceptance label {
  font-family: var(--rds-font-body); font-size: 0.66rem; font-weight: 400;
  letter-spacing: 0.22em; text-transform: uppercase; color: #433631;
}
/* La checkbox RGPD a désormais un vrai <label> qui l'entoure (cf. la
   correction CF7 plus haut dans ce lot) — avant cela, le texte de
   consentement n'était qu'un texte flottant, jamais capté par la règle
   ci-dessus. Deux effets de bord sont apparus de ce seul fait, sans
   qu'aucune de ces règles n'ait changé :
   1) la règle ci-dessus (pensée pour "NOM"/"EMAIL", pas pour une
      phrase entière) mettait toute la phrase RGPD en petites
      majuscules espacées — illisible pour un texte de cette longueur ;
   2) `.form-card input { width:100% }` (plus haut) ne faisait rien tant
      que la checkbox était seule dans sa boîte inline-block ; dès
      qu'un texte long partage cette même boîte, celle-ci s'étire à la
      largeur disponible et entraîne la checkbox avec elle (l'input
      passe de 13px à ~466px de large, glyphe recentré au milieu de la
      ligne). Neutralisé ici, uniquement pour ce champ : la phrase
      redevient un texte courant lisible et la checkbox retrouve sa
      taille native, sans toucher aux autres champs ni aux autres
      pages. */
.form-card .rds-field--rgpd label {
  font-size: 0.9rem; font-weight: 300;
  letter-spacing: normal; text-transform: none; color: var(--rds-encre);
}
.form-card .rds-field--rgpd input[type="checkbox"] {
  width: auto; padding: 0; border-bottom: none; background: none;
  vertical-align: middle;
}
.form-required-note {
  grid-column: 1 / -1;
  margin-bottom: 0.2rem;
  font-family: var(--rds-font-body);
  font-size: 0.8rem;
  color: var(--rds-taupe);
}
.rds-required { color: var(--rds-erreur); font-weight: 400; }

/* ──────────── BOUTIQUES ──────────── */
.shops {
  background: var(--rds-fond); padding: 6rem 3rem;
}
.shops__head {
  max-width: 1100px; margin: 0 auto 3rem;
  text-align: center;
}
.shops__head .surtitre { margin-bottom: 1rem; }
.shops__title {
  font-family: var(--rds-font-title); font-style: normal;
  font-size: clamp(2rem, 3.5vw, 2.8rem); font-weight: 500;
  color: var(--rds-encre); line-height: 1.15; margin-bottom: 1rem;
}
.shops__sub {
  font-size: 0.95rem; color: var(--rds-taupe); line-height: 1.85; max-width: 560px; margin: 0 auto;
}
.shops__grid {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem;
}
/* `scroll-margin-top` : chaque carte porte désormais une ancre stable
   (#wanfercee-baulet, #luttre, #gerpinnes — voir template-contact.php), qui sert
   aussi d'URL publique à l'établissement dans le JSON-LD. Sans ce décalage, la
   carte visée se retrouverait sous la barre de navigation fixe. Même formule que
   `#main` (style.css) et que le calendrier des ateliers. */
.shop {
  display: flex; flex-direction: column; gap: 1rem; min-width: 0;
  scroll-margin-top: calc(var(--header-height) + 1rem);
}
/* Photos des boutiques en paysage 3:2 (2026-07-23, était 4:5 portrait) :
   elles accueilleront des photos de comptoir, que le format portrait recadrait mal.
   Le 3:2 est le format photo courant — moins de perte au recadrage qu'un 16:9.
   Le ratio est porté par le conteneur ET par l'image, pour que les 3 cartes gardent
   exactement la même hauteur de visuel, qu'il s'agisse d'une photo ou d'un placeholder. */
.shop__img { aspect-ratio: 3/2; }
.shop__img .ph { width: 100%; height: 100%; }
.shop__img img { width: 100%; height: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: 3px; }

.shop__name {
  font-family: var(--rds-font-title); font-size: 1.45rem; font-weight: 400;
  color: var(--rds-encre); line-height: 1.2;
}
.shop__meta { font-size: 0.85rem; color: var(--rds-taupe); line-height: 1.7; }
.shop__meta strong { color: var(--rds-encre); font-weight: 400; }
.shop__actions {
  display: flex; gap: 0.6rem; margin-top: 0.6rem; flex-wrap: wrap;
}
.shop__action {
  font-family: var(--rds-font-body); font-size: 0.7rem; font-weight: 400;
  letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.7rem 1.1rem;
  border-radius: var(--rds-radius);
  transition: background var(--rds-transition), color var(--rds-transition), border-color var(--rds-transition), transform var(--rds-transition), filter var(--rds-transition);
}
.shop__action svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.shop__action--primary {
  background: var(--rds-cta); color: var(--rds-cta-texte);
  border: 1px solid var(--rds-cta);
}
.shop__action--primary:hover { background: var(--rds-cta-hover); border-color: var(--rds-cta-hover); transform: translateY(-2px); }
.shop__action--ghost {
  background: transparent; color: var(--rds-encre);
  border: 1px solid #2A1F1A4D;
}
.shop__action--ghost:hover { background: var(--rds-encre); color: var(--rds-fond); border-color: var(--rds-encre); transform: translateY(-2px); }

/* ──────────── SOCIAL ──────────── */
.social {
  background: var(--rds-fond-alt); padding: 5rem 3rem;
}
.social__inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center;
  max-width: 1100px; margin: 0 auto;
}
.social__title {
  font-family: var(--rds-font-title); font-style: normal;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 500;
  color: var(--rds-encre); line-height: 1.2; margin-bottom: 0.6rem;
}
.social__text { font-size: 0.92rem; color: var(--rds-taupe); line-height: 1.8; }
.social__icons { display: flex; gap: 2rem; flex-wrap: wrap; justify-content: flex-end; }
.social__icon { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; text-decoration: none; }
.social__icon-circle {
  width: 64px; height: 64px; border-radius: 50%;
  background: #37734A1A;
  border: 1px solid #37734A66;
  display: flex; align-items: center; justify-content: center;
  color: var(--rds-vert);
  transition: background var(--rds-transition), color var(--rds-transition), border-color var(--rds-transition), transform var(--rds-transition);
}
.social__icon:hover .social__icon-circle {
  background: var(--rds-vert); color: #fff;
  border-color: var(--rds-vert);
  transform: translateY(-2px);
}
.social__icon svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.social__icon-label { font-size: 0.7rem; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; color: var(--rds-taupe); }

/* Responsive */
@media (max-width: 960px) {
  .v1__edito { grid-template-columns: 1fr; }
  .v1__edito-inner { max-width: none; margin: 0; padding: 5rem 2rem 3rem; }
  .v1__edito-right { padding: 0 2rem 4rem; }
  .form-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  /* Tablette : 2 colonnes plutôt que 3 cartes empilées pleine largeur (trop long à ~820px) */
  .shops__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
  .quick__inner { grid-template-columns: 1fr; }
  .quick__cell { border-right: none; border-bottom: 1px solid #2A1F1A1A; padding: 1.5rem 0; }
  .quick__cell:last-child { border-bottom: none; }
  .social__inner { grid-template-columns: 1fr; }
  .social__icons { justify-content: flex-start; }
}

@media (max-width: 768px) {
  .form-wrap { padding: 3.5rem 1.5rem; }
  .form-card { padding: 1.8rem 1.4rem; }
  .form-card .wpcf7-form { grid-template-columns: 1fr; }
  .shops { padding: 3.5rem 1.5rem; }
  /* Petit mobile : retour à 1 colonne (2 colonnes réservées à la tablette ci-dessus) */
  .shops__grid { grid-template-columns: 1fr; }
  .social { padding: 3.5rem 1.5rem; }
  /* Bloc allégé sur mobile : 3 infos seulement, pas besoin d'autant de respiration */
  .quick { padding: 1rem 1.5rem 1.5rem; }
}