/*
  COMPONENTS.CSS — SOW CHIC BOUTIQUE
  ---------------------------------------------------------------
  Styles des composants construits : Header, Hero, Section
  Catégories (en cours).
*/

/* =================================================================
   HEADER (étape 3.2) — VALIDÉ, ne pas modifier sans demande
   ================================================================= */

#site-header {
  container-type: inline-size;
  container-name: site-header;
}

/* ---- Header principal ---- */
.header-main {
  position: relative;
  display: flex;
  align-items: center;
  background-color: var(--color-bg);
  padding: var(--space-4) var(--section-padding-x-desktop);
}

/* ---- Navigation principale (desktop) ---- */
.main-nav ul {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-5);
}

.main-nav a {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: var(--letter-spacing-nav);
  text-transform: uppercase;
  color: var(--color-text);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
  white-space: nowrap;
}

.main-nav a:hover,
.main-nav a:focus-visible {
  border-bottom-color: var(--color-text);
}

/* ---- Logo (centré par positionnement absolu, indépendant des
   groupes latéraux) ---- */
.logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}

.logo-title {
  /* Nom central : Bodoni Moda (fins déliés, contraste élevé), capitales bien espacées, taille un peu augmentée maintenant que « Boutique » est retiré. */
  font-family: 'Bodoni Moda', 'Playfair Display', var(--font-serif);
  font-weight: 400;
  font-size: 34px;
  letter-spacing: 0.22em;
  margin-right: -0.22em; /* compense l'espace ajouté après la dernière lettre : le nom reste parfaitement centré */
  text-transform: uppercase;
  color: var(--color-text);
  white-space: nowrap;
}

/* ---- Actions (recherche / favoris / panier / menu) ---- */
.header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.icon-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-block: -3px; /* étape 3.10 : l'icône passe de 22 à 28 px sans changer la hauteur de l'en-tête */
  color: var(--color-text);
  flex-shrink: 0;
}

.icon-button svg {
  width: 100%;
  height: 100%;
}

.icon-button:hover {
  opacity: 0.6;
}

/* ---- Navigation mobile (panneau) ---- */
.mobile-nav {
  display: none;
}

.mobile-nav ul {
  display: flex;
  flex-direction: column;
}

.mobile-nav a {
  display: block;
  font-family: var(--font-sans);
  font-size: 15px;
  letter-spacing: var(--letter-spacing-nav);
  text-transform: uppercase;
  color: var(--color-text);
  padding: var(--space-4) var(--section-padding-x-mobile);
  border-bottom: 1px solid var(--color-border);
}

body.mobile-nav-open {
  overflow: hidden;
}

@container site-header (max-width: 1024px) {
  .header-main { padding: var(--space-3) var(--section-padding-x-tablet); }
  .main-nav { display: none; }
  .logo-title { font-size: 27px; }
}

@container site-header (max-width: 640px) {
  .header-main { padding: var(--space-3) var(--section-padding-x-mobile); }
  .logo-title { font-size: 21px; letter-spacing: 0.2em; margin-right: -0.2em; }
  .header-actions { gap: var(--space-3); }
}

/*
  ORDINATEUR (> 1024 px) uniquement — les 4 liens (Boutique, À propos, Collection, Contact)
  ne sont plus dans le header : ils s'ouvrent dans le menu (icône à droite), en panneau déroulant
  sous le header. La hauteur du header (72 px) est conservée. Téléphone/tablette inchangés.
*/
@media (min-width: 1025px) {
  #site-header {
    position: relative;
    z-index: 50;
  }
}

@container site-header (min-width: 1025px) {
  .main-nav { display: none; }
  .header-actions { min-height: 24px; } /* garde la hauteur du header (72 px) sans les liens */

}

/* ---- Étape 3.10 — répartition des 4 icônes de part et d'autre du logo ----
   Gauche : Menu, Recherche · Centre : logo (toujours centré, positionné en absolu) · Droite : Favoris, Panier.
   Positionnement uniquement : tailles, formes, couleurs et fonctionnement des icônes inchangés. */
.header-actions { display: contents; }
.header-main { column-gap: var(--space-4); }
.icon-button[data-action="wishlist"] { margin-left: auto; }

@container site-header (max-width: 640px) {
  .header-main { column-gap: var(--space-3); }
}

@container site-header (min-width: 1025px) {
  /* hauteur du header (72 px) conservée maintenant que les icônes ne sont plus dans un conteneur de 24 px */
  .header-main { min-height: calc(2 * var(--space-4) + 24px); }
}

/* ---- Étape 3.10 (3e intervention) — icônes : tablette 32 px, ordinateur ≥ 32 px (téléphone inchangé : 28 px) ----
   Le bouton gardait le rembourrage par défaut du navigateur (1 px 6 px) : le dessin n'occupait que
   (largeur − 12 px) × (hauteur − 2 px). Sur tablette et ordinateur, le rembourrage est supprimé : le dessin remplit
   exactement le bouton (zone cliquable = dessin). La marge verticale négative conserve la hauteur de l'en-tête. */
@container site-header (min-width: 641px) and (max-width: 1024px) {
  .icon-button {
    --icon-size: 32px;
    width: var(--icon-size);
    height: var(--icon-size);
    padding: 0;
    margin-block: calc((22px - var(--icon-size)) / 2);
  }
}

@container site-header (min-width: 1025px) {
  .icon-button {
    --icon-size: clamp(32px, 2.2cqw, 40px); /* 32 px jusqu'à ≈ 1450 px d'écran, 40 px à partir de ≈ 1820 px */
    width: var(--icon-size);
    height: var(--icon-size);
    padding: 0;
    margin-block: calc((22px - var(--icon-size)) / 2);
  }
}

/* Téléphone (≤ 640 px) : l'icône Panier est un lien <a> (et non un <button>) : elle n'a donc pas le rembourrage par défaut du navigateur
   (1 px 6 px) que gardent les icônes Menu, Recherche et Favoris. On le reproduit pour que les quatre dessins aient exactement la même taille. */
@container site-header (max-width: 640px) {
  a.icon-button[data-action="cart"] { padding: 1px 6px; }
}

/* ---- Étape 3.10 — Menu : panneau latéral « couverture de magazine » ----
   S'ouvre depuis la gauche, occupe 50 % de la largeur ; l'autre moitié du site reste visible
   (voile très léger) et un clic dessus ferme le panneau. Photographie bord à bord (≈ 48 % de la hauteur),
   croix ivoire sur la photo, quatre rubriques en Playfair Display italique entre de fins filets,
   deux liens secondaires en petites capitales espacées en bas. */
.mobile-nav:not([hidden]) {
  display: block;
  position: fixed;
  inset: 0;
  height: 100vh;
  height: 100dvh; /* hauteur réellement visible sur mobile (barre d'adresse comprise) */
  z-index: 100;
}

/* Écrans tactiles : la page située derrière le menu ne défile pas (le verrouillage du body ne suffisait pas,
   html étant lui-même le conteneur de défilement). Seul le panneau défile. */
@media (pointer: coarse) {
  html:has(body.mobile-nav-open) { overflow: hidden; }
}

.mobile-nav-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  background: rgba(26, 26, 26, 0.16);
  border-radius: 0;
  cursor: default;
  touch-action: none;
  animation: mobile-nav-fade 0.3s ease both;
}

.mobile-nav-panel {
  --mn-pad: var(--section-padding-x-mobile);
  --mn-rub-size: 19px;
  --mn-rub-row: 48px;
  --mn-sec-size: 9px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 50%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background-color: var(--color-bg);
  border-right: 1px solid var(--color-border);
  box-shadow: 12px 0 40px rgba(0, 0, 0, 0.08);
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  animation: mobile-nav-slide 0.38s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* Photographie : bord à bord (haut, gauche, droite), ≈ 48 % de la hauteur du panneau */
.mobile-nav-photo {
  flex: 0 0 48%;
  min-height: 200px;
  margin: 0;
  overflow: hidden;
  background-color: var(--color-bg-alt);
}

.mobile-nav-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 45% 70%; /* garde la pose du modèle (visage, mains, robe) */
}

/* Croix : ivoire sur la photo, à la place exacte de l'icône Menu de l'en-tête */
.mobile-nav-close {
  position: absolute;
  top: calc((54px - var(--icon-size, 28px)) / 2 + env(safe-area-inset-top, 0px));
  left: var(--mn-pad);
  margin: 0;
  color: var(--color-bg);
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.35));
}

/* Rubriques */
.mobile-nav-list {
  margin: var(--space-4) var(--mn-pad) 0;
  display: flex;
  flex-direction: column;
}

.mobile-nav-list li {
  border-bottom: 1px solid rgba(26, 26, 26, 0.14);
}

.mobile-nav-list li:last-child {
  border-bottom: 0; /* le filet des liens secondaires ferme la liste */
}

.mobile-nav .mobile-nav-link {
  display: flex;
  padding: 0;
  border-bottom: 0;
  text-transform: none;
  align-items: center;
  min-height: var(--mn-rub-row);
  font-family: 'Playfair Display', var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--mn-rub-size);
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--color-text);
  cursor: pointer;
}

/* Liens secondaires, en bas */
.mobile-nav-secondary {
  margin: auto var(--mn-pad) 0;
  padding: var(--space-3) 0 var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  border-top: 1px solid rgba(26, 26, 26, 0.14);
}

.mobile-nav .mobile-nav-secondary-link {
  display: block;
  padding: 0;
  border-bottom: 0;
  font-family: var(--font-sans);
  font-size: var(--mn-sec-size);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--color-text);
  cursor: pointer;
}

@keyframes mobile-nav-slide {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

@keyframes mobile-nav-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@container site-header (min-width: 641px) {
  .mobile-nav-panel {
    --icon-size: 32px;
    --mn-pad: var(--section-padding-x-tablet);
    --mn-rub-size: 34px;
    --mn-rub-row: clamp(48px, 7.6vh, 70px); /* se resserre un peu sur les écrans peu hauts */
    --mn-sec-size: 10px;
  }
  .mobile-nav-photo img { object-position: 50% 70%; }
}

@container site-header (min-width: 1025px) {
  .mobile-nav-panel {
    --icon-size: clamp(32px, 2.2cqw, 40px);
    --mn-pad: var(--section-padding-x-desktop);
    --mn-rub-size: clamp(40px, 3.05cqw, 52px);
    --mn-rub-row: 1.5em;
    --mn-sec-size: 11px;
  }
  .mobile-nav-close { top: calc((72px - var(--icon-size)) / 2 + env(safe-area-inset-top, 0px)); }
  .mobile-nav-list { margin-top: var(--space-5); }
  .mobile-nav .mobile-nav-secondary { flex-direction: row; align-items: baseline; gap: var(--space-6); padding-bottom: var(--space-5); }
  .mobile-nav-photo img { object-position: 50% 62%; }
}

/* ---- Étape 3.11 — Recherche : panneau latéral « couverture » ----
   Même principe que le menu : s'ouvre depuis la gauche, voile léger sur le site visible, clic dessus = fermeture.
   Téléphone : 62 % de la largeur ; tablette et ordinateur : 50 %. Photographie unique, nette (aucun voile,
   dégradé ni filtre), texte ivoire posé sur la photo, barre de recherche ivoire en bas. */
.search-panel:not([hidden]) {
  display: block;
  position: fixed;
  inset: 0;
  height: 100vh;
  height: 100dvh;
  z-index: 100;
}

@media (pointer: coarse) {
  html:has(body.search-open) { overflow: hidden; }
}
body.search-open { overflow: hidden; }

.search-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  background: rgba(26, 26, 26, 0.38);
  border-radius: 0;
  cursor: default;
  touch-action: none;
  animation: mobile-nav-fade 0.3s ease both;
}

.search-panel-inner {
  --sp-pad: 18px;
  --sp-top: 55px;
  --sp-h1: 29px;
  --sp-lead: 14px;
  --sp-eyebrow: 8px;
  --sp-bar: 50px;
  --sp-bar-font: 12.5px;
  --sp-bottom: 36px;
  --icon-size: 28px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 62%;
  overflow: hidden;
  background-color: #7A3A2D;
  color: var(--color-bg);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.25);
  animation: mobile-nav-slide 0.38s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.search-photo {
  position: absolute;
  inset: 0;
  margin: 0;
}

.search-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 43% 50%;
}

.search-close {
  position: absolute;
  top: calc((54px - var(--icon-size)) / 2 + env(safe-area-inset-top, 0px));
  left: var(--section-padding-x-mobile);
  margin: 0;
  color: var(--color-bg);
}

.search-text {
  position: absolute;
  top: calc(var(--sp-top) + env(safe-area-inset-top, 0px));
  left: var(--sp-pad);
  right: var(--sp-pad);
  display: flex;
  flex-direction: column;
  gap: calc(var(--sp-h1) * 0.28);
}

.search-eyebrow {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--sp-eyebrow);
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-bg);
}

.search-title {
  margin: 0;
  font-family: 'Bodoni Moda', 'Playfair Display', var(--font-serif);
  font-size: var(--sp-h1);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--color-bg);
  text-transform: none;
}

.search-title em {
  font-family: 'Playfair Display', var(--font-serif);
  font-style: italic;
  font-weight: 400;
}

.search-form {
  position: absolute;
  left: var(--sp-pad);
  right: var(--sp-pad);
  bottom: calc(var(--sp-bottom) + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: calc(var(--sp-pad) * 0.7);
  margin: 0;
}

.search-lead {
  order: 0;
  margin: 0;
  font-family: 'Playfair Display', var(--font-serif);
  font-style: italic;
  font-size: var(--sp-lead);
  line-height: 1.45;
  color: var(--color-bg);
}

.search-bar {
  order: 2;
  display: flex;
  align-items: stretch;
  height: var(--sp-bar);
  background-color: var(--color-bg);
  color: var(--color-text);
}

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

.search-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0 0 0 calc(var(--sp-pad) * 0.5);
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  font-family: 'Playfair Display', var(--font-serif);
  font-style: italic;
  font-size: var(--sp-bar-font);
  color: var(--color-text);
  -webkit-appearance: none;
  appearance: none;
}

.search-input::placeholder { color: #6B645C; opacity: 1; }
.search-input::-webkit-search-cancel-button { display: none; }
.search-bar:focus-within { outline: 1px solid var(--color-bg); outline-offset: 3px; }

.search-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin: 0;
  padding: 0 calc(var(--sp-pad) * 0.45);
  border: 0;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
}

.search-submit svg { width: 18px; height: 18px; display: block; }

.search-status {
  order: 1; /* entre la phrase et la barre : reste visible, la barre étant ancrée en bas */
  margin: 0;
  padding: 6px 10px;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 1.4;
}

@container site-header (min-width: 641px) {
  .search-panel-inner {
    --sp-pad: 32px;
    --sp-top: 69px;
    --sp-h1: 40px;
    --sp-lead: 16px;
    --sp-eyebrow: 10px;
    --sp-bar: 58px;
    --sp-bar-font: 15px;
    --sp-bottom: 64px;
    --icon-size: 32px;
    width: 50%;
  }
  .search-close { left: var(--section-padding-x-tablet); }
  .search-submit svg { width: 22px; height: 22px; }
  .search-status { font-size: 12px; }
}

@container site-header (min-width: 1025px) {
  .search-panel-inner {
    --sp-pad: 56px;
    --sp-top: 60px;
    --sp-lead: 19px;
    --sp-eyebrow: 11px;
    --sp-bar: 68px;
    --sp-bar-font: 18px;
    --sp-bottom: 106px;
    --icon-size: clamp(32px, 2.2cqw, 40px);
  }
  .search-close { left: var(--section-padding-x-desktop); top: calc((72px - var(--icon-size)) / 2 + env(safe-area-inset-top, 0px)); }
  .search-submit svg { width: 24px; height: 24px; }
}

/* ---- Étape 3.12 — Favoris : panneau latéral (état vide) ----
   Même principe que le menu : s'ouvre TOUJOURS depuis la gauche (l'icône Favoris restant à droite de l'en-tête),
   60 % de la largeur sur tous les formats, voile léger sur le site visible, clic dessus = fermeture.
   Panneau volontairement vide (fond ivoire + croix) : le contenu sera conçu à l'étape suivante. */
.wishlist-panel:not([hidden]) {
  display: block;
  position: fixed;
  inset: 0;
  height: 100vh;
  height: 100dvh;
  z-index: 100;
}

@media (pointer: coarse) {
  html:has(body.wishlist-open) { overflow: hidden; }
}
body.wishlist-open { overflow: hidden; }

.wishlist-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  background: rgba(26, 26, 26, 0.16);
  border-radius: 0;
  cursor: default;
  touch-action: none;
  animation: mobile-nav-fade 0.3s ease both;
}

.wishlist-panel-inner {
  --wl-pad: var(--section-padding-x-mobile);
  --icon-size: 28px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0; /* toujours à gauche */
  width: 75%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background-color: var(--color-bg);
  color: var(--color-text);
  border-right: 1px solid var(--color-border);
  box-shadow: 12px 0 40px rgba(0, 0, 0, 0.08);
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  animation: mobile-nav-slide 0.38s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.wishlist-close {
  position: absolute;
  top: calc((54px - var(--icon-size)) / 2 + env(safe-area-inset-top, 0px));
  left: var(--wl-pad);
  margin: 0;
  color: var(--color-text);
}

@container site-header (min-width: 641px) {
  .wishlist-panel-inner {
    --wl-pad: var(--section-padding-x-tablet);
    --icon-size: 32px;
  }
}

@container site-header (min-width: 1025px) {
  .wishlist-panel-inner {
    --wl-pad: var(--section-padding-x-desktop);
    --icon-size: clamp(32px, 2.2cqw, 40px);
  }
  .wishlist-close { top: calc((72px - var(--icon-size)) / 2 + env(safe-area-inset-top, 0px)); }
}

/* Planche d'inspiration (direction A) : deux colonnes décalées, quatre photographies de formats différents, numérotées. */
.wishlist-panel-inner {
  container-type: inline-size;
  --wl-top: 21.4cqw;
  --wl-h: 11.7cqw;
  --wl-e: 2.7cqw;
  --wl-hp: 6.8cqw;
  --wl-gap: 2.1cqw;
  --wl-r: 1.28cqw;
}

.wishlist-head {
  margin: var(--wl-top) var(--wl-hp) 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--wl-h) * 0.28);
}

.wishlist-eyebrow {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--wl-e);
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #6B645C;
}

.wishlist-title {
  margin: 0;
  font-family: 'Bodoni Moda', 'Playfair Display', var(--font-serif);
  font-size: var(--wl-h);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--color-text);
}

.wishlist-title sup {
  margin-left: 0.5em;
  font-family: var(--font-sans);
  font-size: calc(var(--wl-e) * 1.1);
  letter-spacing: 0.2em;
  vertical-align: top;
  color: #6B645C;
}

.wishlist-board {
  display: grid;
  grid-template-columns: repeat(2, 36.2cqw);
  justify-content: space-between;
  gap: var(--wl-gap);
  margin: 25.4cqw var(--wl-hp) 0; /* respiration sous le titre */
  padding: 0 0 4.8cqw;
  align-items: start;
}

.wishlist-col {
  display: flex;
  flex-direction: column;
  gap: var(--wl-gap);
  min-width: 0;
}

.wishlist-col-off { margin-top: 6.3cqw; }

.wishlist-item { margin: 0; }

.wishlist-item-img {
  position: relative;
  overflow: hidden;
  border-radius: var(--wl-r);
  background-color: var(--color-bg-alt);
}

.wishlist-item-img::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(26, 26, 26, 0.14);
  border-radius: inherit;
  pointer-events: none;
}

.wishlist-item-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wishlist-item-sac .wishlist-item-img { aspect-ratio: 3 / 4; }
.wishlist-item-manteau .wishlist-item-img { aspect-ratio: 2 / 3; }
/* Photo n° 02 : recadrage serré (zoom 1,18) pour que le visage et la tenue soient plus grands dans le cadre ; l'image reste l'originale, non filtrée. */
.wishlist-item-manteau .wishlist-item-img img { transform: scale(1.18); transform-origin: 38% 50%; }
.wishlist-item-fuchsia .wishlist-item-img { aspect-ratio: 2 / 3; }
.wishlist-item-bracelets .wishlist-item-img { aspect-ratio: 2 / 3; }

.wishlist-item-heart {
  position: absolute;
  top: 5%;
  right: 6%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22%;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: rgba(245, 241, 236, 0.9);
  color: var(--color-text);
  pointer-events: none;
}

.wishlist-item-heart svg { display: block; width: 58%; height: auto; stroke-width: 1.5; }

.wishlist-item figcaption {
  padding-top: 1.76cqw;
  font-family: var(--font-sans);
  font-size: var(--wl-e);
  font-weight: 500;
  letter-spacing: 0.2em;
  color: #6B645C;
}

@container site-header (min-width: 641px) {
  .wishlist-panel-inner {
    --wl-top: 13.6cqw;
    --wl-h: 9cqw;
    --wl-e: 1.74cqw;
    --wl-hp: 6.9cqw;
    --wl-gap: 2.15cqw;
    --wl-r: 1.32cqw;
    width: 75%;
  }
  .wishlist-board { grid-template-columns: repeat(2, 37.35cqw); margin-top: 16cqw; padding-bottom: 4.96cqw; }
  .wishlist-col-off { margin-top: 5.4cqw; }
  .wishlist-item figcaption { padding-top: 1.07cqw; }
}

@container site-header (min-width: 1025px) {
  .wishlist-panel-inner {
    --wl-top: 9cqw;
    --wl-h: 6cqw;
    --wl-e: 1cqw;
    --wl-hp: 7cqw;
    --wl-gap: 1.73cqw;
    --wl-r: 1.07cqw;
    width: 75%;
  }
  .wishlist-board {
    grid-template-columns: repeat(2, 33cqw);
    justify-content: center;
    column-gap: 9cqw;
    margin: 4cqw var(--wl-hp) 0;
    padding: 0 0 2.7cqw;
  }
  .wishlist-col-off { margin-top: 2cqw; }
  .wishlist-item figcaption { padding-top: 0.73cqw; }
  .wishlist-item-heart { width: 15%; }
  .wishlist-item-sac .wishlist-item-img { aspect-ratio: 5 / 6; }
  .wishlist-item-fuchsia .wishlist-item-img { aspect-ratio: 5 / 6; }
  .wishlist-item-manteau .wishlist-item-img { aspect-ratio: 4 / 5; }
  .wishlist-item-manteau .wishlist-item-img img { object-position: 50% 100% !important; transform-origin: 38% 60%; }
  .wishlist-item-bracelets .wishlist-item-img { aspect-ratio: 1 / 1; }
  .wishlist-item-bracelets .wishlist-item-img img { object-position: 50% 48% !important; }
}

/* ---- Étape 3.13 — Page Panier « My Cart » (structure seule, pleine largeur) ----
   Vraie page dédiée (panier.html), 100 % de la largeur : l'icône Panier de l'en-tête y mène. Aucun contenu pour l'instant
   (ni tenues, ni photos, ni prix) : seulement le titre, même logique que « My Favorites ». Le pied de page reste en bas de l'écran. */
.page-panier {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}

.page-panier main {
  flex: 1 0 auto;
}

.cart-page {
  width: 100%;
  padding: 44px var(--section-padding-x-mobile) 64px;
}

.cart-page-title {
  margin: 0;
  font-family: 'Bodoni Moda', 'Playfair Display', var(--font-serif);
  font-size: 34px;
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--color-text);
}

/* Panier vide : phrase + bouton, visibles UNIQUEMENT quand le panier ne contient aucun article (data-cart-count="0").
   Dès que le compteur n'est plus à 0, ce bloc disparaît et laisse la place à la sélection de produits (étape ultérieure). */
.cart-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 20px;
}

.cart-page:not([data-cart-count="0"]) .cart-empty { display: none; }

.cart-empty-text {
  margin: 0;
  max-width: 26ch;
  font-family: 'Playfair Display', var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.35;
  color: var(--color-text);
  text-wrap: balance;
}

.cart-empty-cta {
  display: inline-block;
  margin-top: 32px;
  padding: 15px 30px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1;
  color: var(--color-cta-text);
  background-color: var(--color-cta-bg);
  border: 1px solid var(--color-cta-bg);
  transition: background-color 0.25s ease, color 0.25s ease;
}

.cart-empty-cta:hover,
.cart-empty-cta:focus-visible {
  background-color: transparent;
  color: var(--color-text);
}

@media (min-width: 641px) {
  .cart-page { padding: 64px var(--section-padding-x-tablet) 96px; }
  .cart-page-title { font-size: 52px; }
  .cart-empty { margin-top: 24px; }
  .cart-empty-text { max-width: 24ch; font-size: 26px; }
  .cart-empty-cta { margin-top: 40px; padding: 17px 36px; font-size: 13px; }
}

@media (min-width: 1025px) {
  .cart-page { padding: 80px var(--section-padding-x-desktop) 120px; }
  .cart-page-title { font-size: 66px; }
  .cart-empty { margin-top: 28px; }
  .cart-empty-text { max-width: 28ch; font-size: 32px; }
  .cart-empty-cta { margin-top: 48px; padding: 19px 44px; font-size: 13px; }
}

/* =================================================================
   HERO — composition cinématographique (proposition B, validée) : la photographie occupe toute la largeur,
   le titre est posé en bas, en ivoire, sur un dégradé sombre. Téléphone (≤ 640 px) : photo 9/14.
   Tablette (641–1024 px) : photo 4/5. Ordinateur (≥ 1025 px) : photo sur toute la largeur, 16/9, sans bandes latérales.
   ================================================================= */

.hero {
  position: relative;
  overflow: hidden;
  background-color: #1E130E;
}

.hero-image {
  position: relative;
  aspect-ratio: 9 / 14;
}

.hero-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

.hero-image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(24, 14, 10, 0.66), rgba(24, 14, 10, 0) 52%);
  pointer-events: none;
}

.hero-title-overlay {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 34px;
  z-index: 2;
  pointer-events: none;
}

.hero-title {
  margin: 0;
  font-family: 'Bodoni Moda', var(--font-serif);
  font-weight: 500;
  font-size: 50px;
  line-height: 1;
  letter-spacing: -0.015em;
  color: #F5F1EC;
}

.hero-title-main,
.hero-title-sub { display: block; }

.hero-title-sub {
  font-style: italic;
  font-weight: 400;
}

@media (min-width: 641px) {
  .hero-image { aspect-ratio: 4 / 5; }
  .hero-title-overlay { left: 48px; right: 48px; bottom: 52px; }
  .hero-title { font-size: 96px; }
}

@media (min-width: 1025px) {
  .hero-image { aspect-ratio: 16 / 9; }
  .hero-image img { object-position: 50% 36%; }
  .hero-image::after { background: linear-gradient(to top, rgba(24, 14, 10, 0.7), rgba(24, 14, 10, 0) 48%); }
  .hero-title-overlay { left: max(60px, calc((100% - 1240px) / 2)); right: 60px; bottom: 64px; }
  .hero-title { font-size: 132px; line-height: 0.95; }
  .hero-title-sub { margin-left: 6%; }
}

/* =================================================================
   SECTION CATÉGORIES — bande de visuels (étape 3.6)
   ================================================================= */

.category-section {
  container-type: inline-size;
  container-name: category-section;
  /*
    Zéro espace en haut : le bord supérieur du premier carré doit
    toucher directement la bande horizontale située juste au-dessus
    de cette zone (le bas du Hero). L'espacement reste en bas et sur
    les côtés (cohérent avec le reste du site).
  */
  padding: 0 var(--section-padding-x-desktop) var(--space-7) 0;
  background-color: var(--color-bg);
  /*
    Swipe horizontal (étape 3.6) + défilement automatique en boucle
    infinie (étape 3.7) : même conteneur scrollable pour les deux.
    Pas de scroll-snap ici — l'étape 3.7 demande explicitement un
    mouvement continu, sans aucun effet de snapping/à-coups.
  */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
}

.category-section::-webkit-scrollbar {
  display: none; /* Chrome / Safari / Edge */
}

.category-section {
  cursor: grab;
}

.category-section.is-dragging {
  cursor: grabbing;
}

.category-track {
  display: flex;
  flex-wrap: nowrap;
  /*
    flex-start, jamais center : le premier carré est ancré au début
    gauche de la zone (son bord gauche touche le bord gauche de la
    zone, défini par le padding de .category-section ci-dessus),
    pas centré horizontalement.
  */
  justify-content: flex-start;
  align-items: flex-start;
  /*
    8px, régulier sur tous les paliers (ordinateur / tablette /
    téléphone) : séparation très faible, effet galerie continue.
  */
  gap: 8px;
  width: fit-content;
}

/*
  Carré garanti par aspect-ratio (pas par une hauteur fixe). flex: 0
  0 (pas de grow) : le carré garde exactement sa taille prévue et ne
  s'étire pas pour occuper l'espace restant — il reste le premier
  emplacement fixe d'une rangée, prêt à accueillir le suivant à sa
  droite.

  Taille ORDINATEUR (palier par défaut, >1024px) : calibrée pour
  qu'environ 3 grands carrés soient visibles simultanément sur une
  seule ligne une fois les 5 produits en place (le 4e/5e restant
  accessibles par défilement horizontal).
*/
.category-item {
  flex: 0 0 clamp(300px, 27cqw, 440px);
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.category-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
  Carré "placeholder" (catégorie sans photo fournie pour l'instant) :
  même fond blanc que les photos produit déjà en place, même taille,
  aucune image de substitution ni générée. Remplacé par la vraie
  photo dès qu'elle sera fournie — la structure ne change pas.
*/
.category-item--placeholder {
  background-color: rgb(247, 248, 243);
}

/*
  Tablette : environ 2 grands carrés visibles sur une seule ligne,
  les suivants restant hors champ (défilement horizontal à venir).
  Séparation fixe de 8px. Plage exclusive du téléphone (>640px) pour
  ne pas interférer avec ses propres règles ci-dessous.
*/
@container category-section (min-width: 641px) and (max-width: 1024px) {
  .category-track {
    gap: 8px;
  }

  .category-item {
    flex: 0 0 clamp(280px, 42cqw, 420px);
  }
}

@container category-section (max-width: 640px) {
  .category-section {
    padding: 0 var(--section-padding-x-mobile) var(--space-6) 0;
  }

  /*
    Galerie horizontale premium sur téléphone : grands carrés,
    séparation très fine. On ne cherche pas à faire rentrer les 5
    catégories dans l'écran — la suite défilera horizontalement
    hors champ une fois ajoutée.
  */
  .category-track {
    gap: var(--space-2);
  }

  .category-item {
    flex: 0 0 clamp(220px, 78cqw, 320px);
  }
}

/* La section des catégories est retirée sur téléphone, tablette et ordinateur (aucun espace réservé). */
.category-section {
  display: none;
}

/* =================================================================
   TRIPTYQUE (étape 3.8) — visuel 1 : outfit, TÉLÉPHONE uniquement
   Tablette et ordinateur : pas encore construits (rien d'affiché).
   ================================================================= */

.triptych {
  container-type: inline-size;
  container-name: triptych;
  background-color: var(--color-bg);
}

.triptych-item {
  display: none;
  margin: 0;
}

.triptych-item img {
  display: block;
  width: 100%;
  height: auto; /* proportions d'origine 736×996, aucun recadrage */
}

@container triptych (max-width: 640px) {
  /* Téléphone — composition « escalier » (proposition 1) : zigzag descendant
     gauche / droite / gauche, proportions d'origine, aucun recadrage, aucun chevauchement. */
  .triptych-inner {
    padding: var(--space-4) var(--section-padding-x-mobile) var(--space-5);
  }

  .triptych-item--outfit,
  .triptych-item--woman-bag,
  .triptych-item--woman-bracelets {
    display: block;
  }

  .triptych-item--outfit { width: 74%; }
  .triptych-item--woman-bag { width: 66%; margin: 14px 0 0 auto; }
  .triptych-item--woman-bracelets { width: 74%; margin-top: 14px; }
}

/* Bloc éditorial du triptyque (ordinateur uniquement, étape 3.8) : masqué ailleurs. */
.triptych-editorial { display: none; }

/*
  TABLETTE 641–1024 px — composition « escalier » (proposition 1).
  Trois colonnes de 32 % (écart 2 %) ; la photo 2 descend de 10 % et la photo 3 de 20 %
  de la largeur de composition. Proportions d'origine, aucun recadrage.
  Le texte de la section reste dans la section éditoriale, juste en dessous (inchangée).
*/
@container triptych (min-width: 641px) and (max-width: 1024px) {
  .triptych-inner {
    --tri-w: calc(100cqw - 2 * var(--section-padding-x-tablet));
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: calc(var(--tri-w) * 0.02);
    align-items: start;
    width: var(--tri-w);
    margin: 0 auto;
    padding: var(--space-4) 0 var(--space-6);
  }

  .triptych-item { display: block; }
  .triptych-item--outfit { grid-column: 1; grid-row: 1; }
  .triptych-item--woman-bag { grid-column: 2; grid-row: 1; margin-top: calc(var(--tri-w) * 0.10); }
  .triptych-item--woman-bracelets { grid-column: 3; grid-row: 1; margin-top: calc(var(--tri-w) * 0.20); }
}

/*
  ORDINATEUR (> 1024 px) — composition « escalier » (proposition 1).
  Trois colonnes de 32 % (écart 2 %) de la largeur de composition (--tri-w, largeur
  d'origine conservée : 1200 px à 1440 px, jusqu'à 1560 px à 1920 px) :
  photo 1 en haut à gauche, photo 2 descendue de 10 %, photo 3 descendue de 20 %.
  Le texte existant occupe la place laissée sous la photo 1. Proportions d'origine,
  aucun recadrage ni chevauchement.
*/
@container triptych (min-width: 1025px) {
  .triptych-inner {
    --tri-w: min(100cqw - 2 * var(--section-padding-x-desktop), clamp(1200px, 1200px + (100cqw - 1440px) * 0.75, 1560px));
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: calc(var(--tri-w) * 0.02);
    align-items: start;
    width: var(--tri-w);
    margin: var(--space-4) auto var(--space-8);
  }
  .triptych-item { display: block; }
  .triptych-item--outfit { grid-column: 1; grid-row: 1; }
  /* la figure 3 se « dissout » pour que sa photo (colonne 3) et le texte (colonne 1) se placent dans la grille */
  .triptych-item--woman-bracelets { display: contents; }
  .triptych-item--woman-bag {
    grid-column: 2;
    grid-row: 1 / -1;
    margin-top: calc(var(--tri-w) * 0.10);
  }
  .triptych-item--woman-bracelets img {
    grid-column: 3;
    grid-row: 1 / -1;
    margin-top: calc(var(--tri-w) * 0.20);
    /* réserve la place du packshot (section suivante, ancré en bas à droite et remontant dans cette zone) */
    margin-bottom: calc(var(--tri-w) * 0.37 + var(--space-5));
  }
  .triptych-editorial {
    display: block;
    grid-column: 1;
    grid-row: 2;
    margin-top: calc(var(--tri-w) * 0.037);
    color: var(--color-text);
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    text-align: left;
  }
  .triptych-editorial-title {
    font-family: inherit;
    font-style: italic;
    font-weight: 400;
    font-size: calc(var(--tri-w) * 0.023);
    line-height: 1.15;
    letter-spacing: 0.01em;
    margin: 0 0 calc(var(--tri-w) * 0.015);
    text-wrap: balance;
  }
  .triptych-editorial p {
    font-size: calc(var(--tri-w) * 0.0138);
    line-height: 1.62;
    margin: 0 0 calc(var(--tri-w) * 0.009);
    text-wrap: pretty;
  }
  .triptych-editorial p:last-child { margin-bottom: 0; }
  .triptych-editorial .triptych-editorial-signature {
    font-size: calc(var(--tri-w) * 0.0155);
    letter-spacing: 0.02em;
    margin-top: calc(var(--tri-w) * 0.018);
    padding-top: calc(var(--tri-w) * 0.015);
    border-top: 1px solid rgba(0, 0, 0, 0.15);
  }
}

/* =================================================================
   SECTION ÉDITORIALE (étape 3.9) — « L’univers de Sow Chic Boutique »
   TÉLÉPHONE uniquement. Tablette et ordinateur : pas encore
   construits (rien d'affiché).
   ================================================================= */

.editorial {
  container-type: inline-size;
  container-name: editorial;
  background-color: #FFFFFF;
}

.editorial-inner {
  display: none;
}

@container editorial (max-width: 640px) {
  .editorial-inner {
    display: block;
    box-sizing: border-box;
    /*
      Fond blanc pleine largeur (étape 3.9, téléphone). La largeur
      de lecture est plafonnée à 34rem (marge intérieure 16px)
      grâce à un padding latéral calculé.
    */
    background-color: var(--color-bg);
    padding: 56px max(16px, calc((100cqw - 34rem) / 2 + 16px)) 32px;
    text-align: center;
    color: var(--color-text);
  }

  .editorial-title {
    font-family: var(--font-serif);
    font-style: normal;
    font-weight: 400;
    font-size: clamp(1.375rem, 6.4cqw, 1.75rem);
    line-height: 1.2;
    letter-spacing: 0.01em;
    margin: 0 0 var(--space-4);
    text-wrap: balance;
  }

  .editorial-text p {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(0.875rem, 3.7cqw, 1rem);
    line-height: 1.6;
    margin: 0 0 0.6em;
    text-wrap: pretty;
  }

  .editorial-nowrap {
    white-space: nowrap;
  }

  .editorial-text p:last-child {
    margin-bottom: 0;
  }

  .editorial-signature {
    font-family: var(--font-serif);
    font-style: normal;
    font-weight: 400;
    font-size: clamp(0.9375rem, 4cqw, 1.0625rem);
    line-height: 1.5;
    letter-spacing: 0.02em;
    margin: var(--space-4) 0 0;
    text-wrap: balance;
  }
}

/*
  TABLETTE 641–1024 px — bloc éditorial (étape 3.8).
  Sous le triptyque, aligné à gauche : même bord gauche (16px) et même largeur
  que la photo 1 (60 % de la zone de contenu 40/40). La partie droite est
  réservée au packshot (non construit). Tout en italique, texte propre à la tablette.
*/
.editorial-tablet {
  display: none;
}

@container editorial (min-width: 641px) and (max-width: 1024px) {
  .editorial-tablet {
    display: block;
    box-sizing: border-box;
    background-color: var(--color-bg);
    color: var(--color-text);
    text-align: left;
    padding: var(--space-6) var(--section-padding-x-tablet) var(--space-6) var(--space-3);
  }

  .editorial-tablet > * {
    max-width: calc((100cqw - 2 * var(--section-padding-x-tablet)) * 0.6);
  }

  .editorial-tablet-title {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.5rem, 3.6cqw, 2rem);
    line-height: 1.2;
    letter-spacing: 0.01em;
    margin: 0 0 var(--space-4);
    text-wrap: balance;
  }

  .editorial-tablet-text p {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1rem, 2.1cqw, 1.125rem);
    line-height: 1.65;
    margin: 0 0 var(--space-3);
    text-wrap: pretty;
  }

  .editorial-tablet-text p:last-child {
    margin-bottom: 0;
  }

  .editorial-tablet-signature {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.0625rem, 2.3cqw, 1.25rem);
    line-height: 1.5;
    letter-spacing: 0.02em;
    margin: var(--space-4) 0 0;
    text-wrap: balance;
  }
}

/* =================================================================
   PACKSHOT (étape 3.10) — sac n°1, TÉLÉPHONE uniquement
   Fond blanc continu avec la section éditoriale. Tablette et
   ordinateur : pas encore construits (rien d'affiché).
   ================================================================= */

.packshot {
  container-type: inline-size;
  container-name: packshot;
  background-color: #FFFFFF;
}

/* Téléphone (≤ 640 px) : même fond que la tablette et l'ordinateur (--color-bg), au lieu du blanc. */
@media (max-width: 640px) {
  .editorial,
  .packshot {
    background-color: var(--color-bg);
  }
}

.packshot-inner {
  display: none;
}

@container packshot (max-width: 640px) {
  /*
    Swiper manuel (étape 3.10) : piste horizontale limitée à cette
    zone. Une seule diapositive visible à la fois (chaque diapositive
    fait 100 % de la largeur), calage sur la diapositive la plus
    proche. Le défilement ne se propage jamais à la page
    (overscroll-behavior). Aucune animation automatique.
  */
  .packshot-inner {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* 24px de respiration entre la signature et le sac */
    padding: 24px 0 56px;
    cursor: grab;
  }

  .packshot-inner::-webkit-scrollbar {
    display: none;
  }

  .packshot-inner.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
  }

  .packshot-slide {
    flex: 0 0 100%;
    display: flex;
    justify-content: center;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  .packshot-item {
    margin: 0;
    width: 38cqw; /* réduit de 50 % (étape 3.10) : 76cqw → 38cqw */
    max-width: 11rem;
    user-select: none;
    -webkit-user-drag: none;
  }

  .packshot-item img {
    display: block;
    width: 100%;
    height: auto; /* proportions naturelles, aucun recadrage */
  }

  /*
    Animation automatique (étape 3.19) : même principe que les catégories —
    défilement continu piloté en JS (requestAnimationFrame). Le calage
    sur les slides est suspendu tant que l'automatique tourne ; il
    revient après chaque geste manuel (JS).
  */
  .packshot-inner.is-auto {
    scroll-snap-type: none;
  }
}

/*
  TABLETTE 641–1024 px — packshot (étape 3.8) : SWIPER limité à la zone du packshot.
  Seul .packshot-inner (la zone : colonne de droite du triptyque, 40cqw − 16px de large,
  bord droit à 40px, bas à 48px du bas du bloc éditorial) est défilable horizontalement,
  au toucher comme à la souris. Rien d'autre ne bouge ; la page n'a aucun défilement
  horizontal (overscroll-behavior-x: contain). Une diapositive = la largeur de la zone.
  Pour l'instant : SAC N°1 uniquement (les autres diapositives restent masquées),
  aucune animation automatique. .packshot-zone n'occupe aucune hauteur dans la page.
*/
@container packshot (min-width: 641px) and (max-width: 1024px) {
  .packshot-zone {
    position: relative;
    height: 0;
  }

  .packshot-inner {
    display: flex;
    flex-wrap: nowrap;
    position: absolute;
    right: var(--section-padding-x-tablet);
    bottom: var(--space-6);
    width: calc(40cqw - 16px);
    overflow: hidden;      /* conteneur FIXE : débordement masqué, ne défile jamais lui-même */
    touch-action: pan-y;   /* le navigateur ne gère que le vertical ; l'horizontal est suivi en JS, dans la zone seule */
    overscroll-behavior: contain;
    cursor: grab;
  }

  .packshot-inner.is-swiping {
    cursor: grabbing;
  }

  .packshot-slide {
    flex: 0 0 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end; /* bas des sacs alignés sur la même ligne de base */
    /* seul ce contenu interne se déplace (--packshot-x posée par le swiper tablette) */
    transform: translate3d(var(--packshot-x, 0px), 0, 0);
  }

  /* Tablette : 2 séries de 4 sacs (boucle infinie) ; la 3e copie de la boucle téléphone reste masquée. */
  .packshot-slide:nth-child(n + 9) {
    display: none;
  }

  .packshot-item {
    margin: 0;
    width: 78%;
    user-select: none;
    -webkit-user-drag: none;
  }

  .packshot-item img {
    display: block;
    width: 100%;
    height: auto; /* proportions naturelles, sac entier, aucun recadrage */
  }
}

/*
  ORDINATEUR (> 1024 px) — packshot (étape 3.8) : 4 SACS, boucle infinie automatique (même animation que la tablette).
  Zone fixe dans la colonne de droite du triptyque, sous la photo du sac,
  à droite du bloc éditorial. Même largeur de composition que le triptyque
  (--pk-w) ; colonne de droite = (largeur − 64 px) × 799/1466. Le sac est
  posé directement sur le fond crème (PNG détouré), entier, base alignée sur
  le bas du bloc éditorial. Swiper + défilement automatique limités à cette zone (JS, logique partagée avec la tablette).
*/
@container packshot (min-width: 1025px) {
  .packshot-zone {
    --pk-w: min(100cqw - 2 * var(--section-padding-x-desktop), clamp(1200px, 1200px + (100cqw - 1440px) * 0.75, 1560px));
    position: relative;
    height: 0;
  }

  .packshot-inner {
    display: flex;
    flex-wrap: nowrap;
    position: absolute;
    right: calc((100cqw - var(--pk-w)) / 2);
    bottom: var(--space-8);
    width: calc((var(--pk-w) - var(--space-7)) * 799 / 1466);
    overflow: hidden;       /* conteneur FIXE : ne défile jamais lui-même */
    touch-action: pan-y;    /* l'horizontal est suivi en JS, dans la zone seule */
    overscroll-behavior: contain;
    cursor: grab;
  }

  .packshot-inner.is-swiping {
    cursor: grabbing;
  }

  .packshot-slide {
    flex: 0 0 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    /* seul ce contenu interne se déplace (--packshot-x posée par le swiper ordinateur) */
    transform: translate3d(var(--packshot-x, 0px), 0, 0);
  }

  /* Boucle infinie (comme la tablette) : 2 séries de 4 sacs ; la 3e copie de la boucle téléphone reste masquée. */
  .packshot-slide:nth-child(n + 9) {
    display: none;
  }

  .packshot-item {
    margin: 0;
    width: 70%;
    user-select: none;
    -webkit-user-drag: none;
  }

  .packshot-item img {
    display: block;
    width: 100%;
    height: auto;
  }
}

/* =================================================================
   FOOTER — partie 1 (étape 3.9) : newsletter + réseaux sociaux
   Fond : --color-bg (même couleur que le reste du site).
   Téléphone : disposition verticale. Tablette et ordinateur : horizontale
   (présentation à gauche, formulaire à droite), réseaux sociaux dessous.
   ================================================================= */

.site-footer {
  container-type: inline-size;
  container-name: site-footer;
  background-color: var(--color-bg);
  color: var(--color-text);
}

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

.footer-inner {
  box-sizing: border-box;
}

.footer-title,
.footer-social-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: normal;
  margin: 0;
  text-wrap: balance;
}

.footer-text,
.footer-note {
  font-family: var(--font-sans);
  margin: 0;
  text-wrap: pretty;
}

.footer-form {
  display: flex;
  gap: var(--space-2);
  margin: 0;
}

.footer-input {
  box-sizing: border-box;
  flex: 1 1 auto;
  min-width: 0;
  height: 52px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-text);
  border-radius: var(--radius);
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 1rem; /* 16px : évite le zoom automatique sur iOS */
}

.footer-input::placeholder {
  color: var(--color-text);
  opacity: 0.6;
}

.footer-button {
  box-sizing: border-box;
  flex: 0 0 auto;
  height: 52px;
  padding: 0 var(--space-5);
  border: 1px solid var(--color-cta-bg);
  border-radius: var(--radius);
  background-color: var(--color-cta-bg);
  color: var(--color-cta-text);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.footer-button:hover {
  opacity: 0.88;
}

.footer-input:focus-visible,
.footer-button:focus-visible,
.footer-social-link:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}

.footer-social-list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--color-text); /* icônes monochromes noires (noir du site) */
}

.footer-social-link:not(.is-pending) {
  cursor: pointer;
}

.footer-social-icon {
  display: block;
  width: 24px;
  height: 24px;
}

/* TÉLÉPHONE (≤ 640 px) — disposition verticale, centrée, version compacte (−10 % : tailles et espacements). */
@container site-footer (max-width: 640px) {
  .footer-inner {
    padding: calc(var(--space-5) * 0.9) var(--section-padding-x-mobile) calc(var(--space-5) * 0.9);
    text-align: center;
  }

  .footer-newsletter {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--space-3) * 0.9);
  }

  .footer-newsletter-intro,
  .footer-newsletter-form {
    width: 100%;
    max-width: 28rem;
  }

  .footer-title {
    font-size: clamp(1.125rem, 5cqw, 1.35rem);
    line-height: 1.2;
    margin-bottom: calc(var(--space-1) * 0.9);
  }

  .footer-text {
    font-size: 0.8rem;
    line-height: 1.5;
  }

  .footer-form {
    flex-direction: column;
    gap: calc(var(--space-2) * 0.9);
  }

  .footer-input,
  .footer-button {
    height: 40px;
  }

  .footer-button {
    width: 100%;
  }

  .footer-note {
    margin-top: calc(var(--space-2) * 0.9);
    font-size: 0.75rem;
    line-height: 1.4;
    opacity: 0.75;
  }

  .footer-social {
    margin-top: calc(var(--space-4) * 0.9);
  }

  .footer-social-title {
    font-size: 1.0125rem;
    margin-bottom: 0;
  }

  .footer-social-list {
    gap: calc(var(--space-2) * 0.9);
  }

  .footer-social-link {
    width: 36px;
    height: 36px;
  }

  .footer-social-icon {
    width: 22px;
    height: 22px;
  }
}

/* TABLETTE (641–1024 px) — disposition horizontale. */
@container site-footer (min-width: 641px) and (max-width: 1024px) {
  .footer-inner {
    padding: var(--space-7) var(--section-padding-x-tablet) var(--space-6);
  }

  .footer-newsletter {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-6);
    align-items: center;
  }

  .footer-title {
    font-size: clamp(1.5rem, 3.4cqw, 2rem);
    line-height: 1.2;
    margin-bottom: var(--space-2);
  }

  .footer-text {
    font-size: 1rem;
    line-height: 1.6;
  }

  .footer-note {
    margin-top: var(--space-2);
    font-size: 0.8125rem;
    line-height: 1.5;
    opacity: 0.75;
  }

  .footer-social {
    margin-top: var(--space-6);
    text-align: center;
  }

  .footer-social-title {
    font-size: 1.375rem;
    margin-bottom: var(--space-2);
  }
}

/* ORDINATEUR (> 1024 px) — disposition horizontale, alignée sur la composition du triptyque. */
@container site-footer (min-width: 1025px) {
  .footer-inner {
    width: min(100cqw - 2 * var(--section-padding-x-desktop), clamp(1200px, 1200px + (100cqw - 1440px) * 0.75, 1560px));
    margin: 0 auto;
    padding: var(--space-7) 0 var(--space-7);
  }

  .footer-newsletter {
    display: grid;
    grid-template-columns: 1fr minmax(0, 36rem);
    column-gap: var(--space-7);
    align-items: center;
  }

  .footer-title {
    font-size: clamp(1.75rem, 2.2cqw, 2.75rem);
    line-height: 1.15;
    margin-bottom: var(--space-3);
  }

  .footer-text {
    font-size: clamp(1rem, 1.1cqw, 1.25rem);
    line-height: 1.6;
  }

  .footer-note {
    margin-top: var(--space-2);
    font-size: 0.875rem;
    line-height: 1.5;
    opacity: 0.75;
  }

  .footer-social {
    margin-top: var(--space-7);
    text-align: center;
  }

  .footer-social-title {
    font-size: clamp(1.375rem, 1.6cqw, 1.75rem);
    margin-bottom: var(--space-2);
  }
}

/* PIED DE PAGE — partie 2 : Aide et contact (mêmes polices que la partie 1 ; liens à brancher quand les pages existeront). */
.footer-help-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: normal;
  margin: 0;
  text-align: center;
  text-wrap: balance;
}

.footer-help-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-help-link {
  display: inline-block;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--color-text);
  text-decoration: none;
}

.footer-help-link[href] {
  cursor: pointer;
}

.footer-help-link:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 4px;
}

@container site-footer (max-width: 640px) {
  .footer-help {
    margin-top: 0;
  }
  .footer-help-title {
    font-size: 1.0125rem;
    margin-bottom: calc(var(--space-1) * 0.9);
  }
  .footer-help-list {
    gap: calc(var(--space-1) * 0.9);
  }
  .footer-help-link {
    font-size: 1rem;
    line-height: 1.4;
    padding: 6px 0;
  }
}

@container site-footer (min-width: 641px) and (max-width: 1024px) {
  .footer-help {
    margin-top: var(--space-6);
  }
  .footer-help-title {
    font-size: 1.375rem;
    margin-bottom: var(--space-2);
  }
  .footer-help-list {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2) var(--space-5);
  }
  .footer-help-link {
    font-size: 1.0625rem;
    line-height: 1.4;
    padding: 8px 0;
  }
}

@container site-footer (min-width: 1025px) {
  .footer-help {
    margin-top: var(--space-7);
  }
  .footer-help-title {
    font-size: clamp(1.375rem, 1.6cqw, 1.75rem);
    margin-bottom: var(--space-2);
  }
  .footer-help-list {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2) var(--space-6);
  }
  .footer-help-link {
    font-size: clamp(1.0625rem, 1.2cqw, 1.3125rem);
    line-height: 1.4;
    padding: 8px 0;
  }
}

/* PIED DE PAGE — sections dépliables (téléphone uniquement). Sur tablette et ordinateur, les conteneurs sont « transparents » (display: contents) : disposition inchangée. */
.footer-brand,
.footer-acc-toggle {
  display: none;
}

@container site-footer (min-width: 641px) {
  .footer-acc-panel,
  .footer-acc-panel-inner {
    display: contents;
  }
}

@container site-footer (max-width: 640px) {
  /* Le texte « Sow Chic » au-dessus des rubriques est retiré sur téléphone (le filet supérieur du premier bloc est conservé). */
  .footer-acc {
    border-bottom: 1px solid rgba(26, 26, 26, 0.14);
  }

  .footer-brand + .footer-acc {
    border-top: 1px solid rgba(26, 26, 26, 0.14);
  }

  .footer-acc-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    width: 100%;
    min-height: 56px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-text);
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 1.0625rem;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .footer-acc-toggle:focus-visible {
    outline: 2px solid var(--color-text);
    outline-offset: 2px;
  }

  /* Signe « + » dessiné en CSS ; une rotation de 45° le transforme en « × ». */
  .footer-acc-icon {
    position: relative;
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    transition: transform 0.25s ease;
  }

  .footer-acc-icon::before,
  .footer-acc-icon::after {
    content: "";
    position: absolute;
    background: currentColor;
  }

  .footer-acc-icon::before {
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    margin-top: -0.5px;
  }

  .footer-acc-icon::after {
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    margin-left: -0.5px;
  }

  .footer-acc.is-open .footer-acc-icon {
    transform: rotate(45deg);
  }

  .footer-acc-panel {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows 0.3s ease, visibility 0s linear 0.3s;
  }

  .footer-acc.is-open > .footer-acc-panel {
    grid-template-rows: 1fr;
    visibility: visible;
    transition: grid-template-rows 0.3s ease, visibility 0s;
  }

  .footer-acc-panel-inner {
    min-height: 0;
    overflow: hidden;
    padding: 0 4px;
    margin: 0 -4px;
  }

  .footer-social,
  .footer-help {
    padding-bottom: var(--space-4);
  }

  /* Le titre « Aide et contact » est porté par la ligne dépliable. */
  .footer-help-title {
    display: none;
  }
}

/* PIED DE PAGE — partie 3 : Nos services (téléphone uniquement ; absente sur tablette et ordinateur, inchangés). */
@container site-footer (max-width: 640px) {
  .footer-services,
  .footer-about,
  .footer-legal {
    padding-bottom: var(--space-4);
  }

  .footer-services-list,
  .footer-about-list,
  .footer-legal-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--space-1) * 0.9);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .footer-services-link,
  .footer-about-link,
  .footer-legal-link {
    display: inline-block;
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.4;
    padding: 6px 0;
    color: var(--color-text);
    text-decoration: none;
  }

  .footer-services-link[href],
  .footer-about-link[href],
  .footer-legal-link[href] {
    cursor: pointer;
  }

  .footer-services-link:focus-visible,
  .footer-about-link:focus-visible,
  .footer-legal-link:focus-visible {
    outline: 2px solid var(--color-text);
    outline-offset: 4px;
  }
}

/* PIED DE PAGE — ligne finale : copyright + monogramme (téléphone uniquement ; absente sur tablette et ordinateur, inchangés). */
.footer-bottom {
  display: none;
}

@container site-footer (max-width: 640px) {
  .footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-5);
  }

  .footer-copyright {
    margin: 0;
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--color-text);
    opacity: 0.8;
  }

  .footer-monogram {
    display: block;
    flex: 0 0 auto;
    height: 44px;
    width: auto;
    aspect-ratio: 205 / 262;
  }
}

/* PIED DE PAGE — tablette et ordinateur : cinq colonnes côte à côte, toujours ouvertes (téléphone inchangé). */
.footer-col-title {
  display: none;
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: normal;
  margin: 0;
  text-wrap: balance;
}

@container site-footer (min-width: 641px) {
  .footer-inner {
    display: grid;
    align-items: start;
  }

  .footer-acc {
    min-width: 0;
  }

  /* Colonne 1 : newsletter + réseaux, empilés (la grille interne à deux colonnes est neutralisée). */
  .footer-newsletter {
    display: block;
  }

  .footer-newsletter-form {
    margin-top: var(--space-3);
  }

  .footer-form {
    flex-direction: column;
    gap: var(--space-2);
  }

  .footer-input,
  .footer-button {
    width: 100%;
    height: 48px;
  }

  .footer-social {
    text-align: left;
  }

  .footer-social-list {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  /* Colonnes 2 à 5 : titre + liste verticale alignés à gauche. */
  .footer-help,
  .footer-services,
  .footer-about,
  .footer-legal {
    margin-top: 0;
    padding-bottom: 0;
    text-align: left;
  }

  .footer-help-title,
  .footer-col-title {
    display: block;
    text-align: left;
    margin: 0 0 var(--space-3);
  }

  .footer-help-list,
  .footer-services-list,
  .footer-about-list,
  .footer-legal-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--space-1);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .footer-help-link,
  .footer-services-link,
  .footer-about-link,
  .footer-legal-link {
    display: inline-block;
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    line-height: 1.4;
    padding: 4px 0;
    color: var(--color-text);
    text-decoration: none;
    text-align: left;
    text-wrap: pretty;
    overflow-wrap: anywhere;
  }

  .footer-services-link[href],
  .footer-about-link[href],
  .footer-legal-link[href] {
    cursor: pointer;
  }

  .footer-services-link:focus-visible,
  .footer-about-link:focus-visible,
  .footer-legal-link:focus-visible {
    outline: 2px solid var(--color-text);
    outline-offset: 4px;
  }
}

/* Tablette (641–1024 px) : colonnes compactes. */
@container site-footer (min-width: 641px) and (max-width: 1024px) {
  .footer-inner {
    grid-template-columns: minmax(0, 1.7fr) repeat(4, minmax(0, 1fr));
    column-gap: var(--space-3);
    padding: var(--space-6) var(--section-padding-x-tablet) var(--space-6);
  }

  .footer-title {
    font-size: 1.25rem;
    margin-bottom: var(--space-2);
  }

  .footer-text {
    font-size: 0.875rem;
    line-height: 1.5;
  }

  .footer-note {
    font-size: 0.75rem;
  }

  .footer-social {
    margin-top: var(--space-4);
  }

  .footer-social-title {
    font-size: 1.0625rem;
    margin-bottom: var(--space-1);
  }

  .footer-social-list {
    gap: 2px;
    margin-left: -8px; /* aligne le dessin de la 1re icône sur le bord gauche du texte */
  }

  .footer-social-link {
    width: 38px;
    height: 38px;
  }

  .footer-social-icon {
    width: 22px;
    height: 22px;
  }

  .footer-help-title,
  .footer-col-title {
    font-size: 1.0625rem;
    line-height: 1.25;
  }

  .footer-help-link,
  .footer-services-link,
  .footer-about-link,
  .footer-legal-link {
    font-size: 0.9375rem;
  }
}

/* Ordinateur (> 1024 px) : colonnes plus aérées, newsletter plus large. */
@container site-footer (min-width: 1025px) {
  .footer-inner {
    grid-template-columns: minmax(0, 1.8fr) repeat(4, minmax(0, 1fr));
    column-gap: var(--space-6);
  }

  .footer-title {
    font-size: clamp(1.5rem, 1.8cqw, 2.25rem);
    margin-bottom: var(--space-2);
  }

  .footer-text {
    font-size: clamp(0.9375rem, 1cqw, 1.125rem);
  }

  .footer-social {
    margin-top: var(--space-5);
  }

  .footer-social-title {
    font-size: clamp(1.125rem, 1.3cqw, 1.5rem);
    margin-bottom: var(--space-1);
  }

  .footer-social-list {
    gap: var(--space-1);
    margin-left: -10px;
  }

  .footer-help-title,
  .footer-col-title {
    font-size: clamp(1.125rem, 1.3cqw, 1.5rem);
    line-height: 1.25;
  }

  .footer-help-link,
  .footer-services-link,
  .footer-about-link,
  .footer-legal-link {
    font-size: clamp(1rem, 1.1cqw, 1.1875rem);
  }
}

/* PIED DE PAGE — bas du footer tablette et ordinateur : trait fin, copyright + monogramme, signature « Sow Chic » (téléphone inchangé). */
.footer-signature {
  display: none;
}

@container site-footer (min-width: 641px) {
  .footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    grid-column: 1 / -1;
    border-top: 1px solid rgba(26, 26, 26, 0.14);
  }

  .footer-copyright {
    margin: 0;
    font-family: var(--font-serif);
    font-weight: 400;
    line-height: 1.4;
    color: var(--color-text);
    opacity: 0.8;
  }

  .footer-monogram {
    display: block;
    flex: 0 0 auto;
    width: auto;
    aspect-ratio: 205 / 262;
  }

  .footer-signature {
    display: block;
    grid-column: 1 / -1;
    margin: 0;
    text-align: center;
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.02em;
    color: var(--color-text); /* #1A1A1A */
  }
}

@container site-footer (min-width: 641px) and (max-width: 1024px) {
  .footer-bottom {
    margin-top: var(--space-6);
    padding-top: var(--space-4);
  }

  .footer-copyright {
    font-size: 0.875rem;
  }

  .footer-monogram {
    height: 44px;
  }

  .footer-signature {
    margin-top: var(--space-4);
    font-size: 1.875rem;
  }
}

@container site-footer (min-width: 1025px) {
  .footer-bottom {
    margin-top: var(--space-7);
    padding-top: var(--space-4);
  }

  .footer-copyright {
    font-size: 0.9375rem;
  }

  .footer-monogram {
    height: 52px;
  }

  .footer-signature {
    margin-top: var(--space-5);
    font-size: clamp(2.125rem, 2.4cqw, 2.75rem);
  }
}

/* PIED DE PAGE — fine ligne de séparation au-dessus des cinq colonnes (tablette et ordinateur uniquement). */
@container site-footer (min-width: 641px) and (max-width: 1024px) {
  .footer-inner {
    position: relative;
    padding-top: calc(var(--space-5) + 1px + var(--space-6));
  }

  .footer-inner::before {
    content: "";
    position: absolute;
    top: var(--space-5);
    left: var(--section-padding-x-tablet);
    right: var(--section-padding-x-tablet);
    height: 1px;
    background: rgba(26, 26, 26, 0.14);
  }
}

@container site-footer (min-width: 1025px) {
  .footer-inner {
    position: relative;
    padding-top: calc(var(--space-6) + 1px + var(--space-7));
  }

  .footer-inner::before {
    content: "";
    position: absolute;
    top: var(--space-6);
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(26, 26, 26, 0.14);
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer-acc-icon,
  .footer-acc-panel {
    transition: none !important;
  }
}

/* PAGE FAQ (vide pour l'instant) : le pied de page reste en bas de l'écran, sans autre élément de design. */
.page-faq {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}

.page-faq main {
  flex: 1 0 auto;
}

/* PAGE FAQ — cadre blanc vide (aucun contenu) : placé dans la partie droite de la zone centrale, jamais collé au bord droit. */
.faq-section {
  container-type: inline-size;
  container-name: faq;
}

.faq-inner {
  box-sizing: border-box;
}

.faq-frame {
  box-sizing: border-box;
  margin-left: auto;
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column;
}

/* La photographie n'est affichée que sur téléphone (chevauchement avec le cadre) ; tablette et ordinateur : inchangés. */
.faq-photo {
  display: none;
}

/* Téléphone (≤ 640 px) */
@container faq (max-width: 640px) {
  .faq-inner {
    padding: var(--space-5) var(--section-padding-x-mobile) var(--space-6);
  }

  /* Chevauchement : la photo reste visible à gauche et en haut, le cadre blanc se superpose à sa partie droite. */
  .faq-stage {
    display: grid;
  }

  .faq-photo {
    display: block;
    grid-area: 1 / 1;
    justify-self: start;
    align-self: start;
    position: relative;
    z-index: 0;
    width: 72%;
    aspect-ratio: 3 / 5;
    overflow: hidden;
  }

  .faq-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 0;
    transform: translateX(-10%) scale(1.7);
    transform-origin: 50% 0;
  }

  .faq-frame {
    grid-area: 1 / 1;
    justify-self: end;
    align-self: start;
    position: relative;
    z-index: 1;
    width: 82%;
    min-height: 30rem;
    margin-top: 54%;
    margin-right: var(--space-3);
  }
}

/* Tablette (641–1024 px) */
@container faq (min-width: 641px) and (max-width: 1024px) {
  .faq-inner {
    padding: var(--space-6) var(--section-padding-x-tablet) var(--space-7);
  }

  .faq-stage {
    display: grid;
  }

  /* Photo à gauche, collée au cadre blanc : sa largeur = l'espace libre à gauche du cadre. */
  .faq-photo {
    display: block;
    grid-area: 1 / 1;
    justify-self: start;
    align-self: stretch;
    position: relative;
    width: calc(36% - var(--space-4) + 1px); /* +1 px sous le cadre : aucune couture visible */
    min-height: 38rem;
    overflow: hidden;
  }

  .faq-photo img {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 48% 0;
  }

  .faq-frame {
    grid-area: 1 / 1;
    position: relative;
    z-index: 1;
    justify-self: end;
    align-self: start;
    width: 64%;
    min-height: 38rem;
    margin-right: var(--space-4);
  }
}

/* Ordinateur (> 1024 px) : même largeur de composition que le triptyque, le packshot et le footer. */
@container faq (min-width: 1025px) {
  .faq-inner {
    width: min(100cqw - 2 * var(--section-padding-x-desktop), clamp(1200px, 1200px + (100cqw - 1440px) * 0.75, 1560px));
    margin: 0 auto;
    padding: var(--space-7) 0 var(--space-8);
  }

  .faq-stage {
    --faq-h: clamp(34rem, 48cqw, 50rem);
    --faq-photo-w: calc(var(--faq-h) * 0.5);
    display: grid;
  }

  /* Photo à gauche, pleine hauteur du cadre, recadrée en bande élégante (sans déformation). */
  .faq-photo {
    display: block;
    grid-area: 1 / 1;
    justify-self: start;
    align-self: stretch;
    position: relative;
    width: calc(var(--faq-photo-w) + 1px); /* +1 px sous le cadre : aucune couture visible */
    min-height: var(--faq-h);
    overflow: hidden;
  }

  .faq-photo img {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 48% 0;
  }

  .faq-frame {
    position: relative;
    z-index: 1;
    grid-area: 1 / 1;
    justify-self: end;
    align-self: start;
    width: calc(100% - var(--faq-photo-w) - var(--space-7));
    min-height: var(--faq-h);
    margin-right: var(--space-7);
  }
}

/* Titre de la FAQ : Bodoni Moda (déjà chargée), haut contraste, sans italique ; haut-gauche du cadre. */
.faq-title {
  margin: 0;
  font-family: 'Bodoni Moda', var(--font-serif);
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  letter-spacing: 0.01em;
  color: #1A1A1A;
}

@container faq (max-width: 640px) {
  .faq-title {
    margin: var(--space-4) 0 0 var(--space-4);
    font-size: 2.5rem;
  }
}

@container faq (min-width: 641px) and (max-width: 1024px) {
  .faq-title {
    margin: var(--space-5) 0 0 var(--space-5);
    font-size: 3.5rem;
  }
}

@container faq (min-width: 1025px) {
  .faq-title {
    margin: var(--space-6) 0 0 var(--space-6);
    font-size: clamp(4rem, 5cqw, 6.5rem);
  }
}

/* Grand titre de la FAQ, sous « FAqs » : même police, droit, #1A1A1A. */
.faq-heading {
  font-family: 'Bodoni Moda', var(--font-serif);
  font-weight: 400;
  font-style: normal;
  line-height: 1.12;
  letter-spacing: 0;
  color: #1A1A1A;
  text-wrap: balance;
}

@container faq (max-width: 640px) {
  .faq-heading {
    margin: var(--space-4) var(--space-4) 0 var(--space-4);
    font-size: 1.625rem;
  }
}

@container faq (min-width: 641px) and (max-width: 1024px) {
  .faq-heading {
    margin: var(--space-4) var(--space-5) 0 var(--space-5);
    font-size: 2.5rem;
  }
}

@container faq (min-width: 1025px) {
  .faq-heading {
    margin: var(--space-5) var(--space-6) 0 var(--space-6);
    font-size: clamp(2.5rem, 3.4cqw, 4.5rem);
  }
}

/* Texte d'introduction de la FAQ, sous le grand titre. */
.faq-intro {
  font-family: 'Bodoni Moda', var(--font-serif);
  font-weight: 400;
  font-style: normal;
  line-height: 1.55;
  letter-spacing: 0;
  color: #1A1A1A;
  text-wrap: pretty;
}

@container faq (max-width: 640px) {
  .faq-intro {
    margin: var(--space-3) var(--space-4) 0 var(--space-4);
    font-size: 0.9375rem;
  }
}

@container faq (min-width: 641px) and (max-width: 1024px) {
  .faq-intro {
    margin: var(--space-3) var(--space-5) 0 var(--space-5);
    font-size: 1.0625rem;
  }
}

@container faq (min-width: 1025px) {
  .faq-intro {
    margin: var(--space-4) var(--space-6) 0 var(--space-6);
    font-size: clamp(1.0625rem, 1.2cqw, 1.5rem);
    max-width: 38em;
  }
}

/* Quatre questions de la FAQ : grille éditoriale 2 colonnes × 2 lignes, sans carte ni bordure. */
.faq-questions {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.faq-question {
  min-width: 0;
  font-family: 'Bodoni Moda', var(--font-serif);
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
  color: #1A1A1A;
  overflow-wrap: break-word;
  text-wrap: pretty;
}

@container faq (max-width: 640px) {
  .faq-questions {
    margin: var(--space-4) var(--space-4) 0 var(--space-4);
    column-gap: var(--space-3);
    row-gap: var(--space-4);
  }

  .faq-question {
    font-size: 0.8125rem;
    line-height: 1.35;
  }
}

@container faq (min-width: 641px) and (max-width: 1024px) {
  .faq-questions {
    margin: var(--space-4) var(--space-5) 0 var(--space-5);
    column-gap: var(--space-4);
    row-gap: var(--space-4);
  }

  .faq-question {
    font-size: 1rem;
    line-height: 1.35;
  }
}

@container faq (min-width: 1025px) {
  .faq-questions {
    margin: var(--space-5) var(--space-6) 0 var(--space-6);
    column-gap: var(--space-5);
    row-gap: var(--space-5);
  }

  .faq-question {
    font-size: clamp(1.125rem, 1.35cqw, 1.625rem);
    line-height: 1.3;
  }
}

/* 2e question (tablette et ordinateur) : lignes équilibrées pour éviter « recherche ? » seul en dernière ligne. */
@container faq (min-width: 641px) {
  .faq-question:nth-child(2) {
    text-wrap: balance;
  }
}

/* Barre de recherche (apparence seulement) : en bas du cadre blanc, sous les quatre questions. */
.faq-search-wrap {
  margin-top: auto;
}

.faq-search {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  background-color: #FFFFFF;
  border: 1px solid rgba(26, 26, 26, 0.28);
  color: #1A1A1A;
}

.faq-search-text {
  font-family: 'Bodoni Moda', var(--font-serif);
  font-weight: 400;
  font-style: normal;
  color: rgba(26, 26, 26, 0.62);
}

.faq-search-icon {
  flex: none;
}

@container faq (max-width: 640px) {
  .faq-search-wrap {
    padding: 20px var(--space-4);
  }

  .faq-search {
    min-height: 44px;
    padding: 8px 14px;
  }

  .faq-search-text {
    font-size: 0.75rem;
    line-height: 1.3;
  }

  .faq-search-icon {
    width: 18px;
    height: 18px;
  }
}

@container faq (min-width: 641px) and (max-width: 1024px) {
  .faq-search-wrap {
    padding: var(--space-4) var(--space-5) 28px;
  }

  .faq-search {
    min-height: 52px;
    padding: 8px 20px;
  }

  .faq-search-text {
    font-size: 0.9375rem;
    line-height: 1.3;
  }
}

@container faq (min-width: 1025px) {
  .faq-search-wrap {
    padding: var(--space-5) var(--space-6) var(--space-6);
  }

  .faq-search {
    min-height: 60px;
    padding: 12px 24px;
  }

  .faq-search-text {
    font-size: clamp(1rem, 1.1cqw, 1.375rem);
    line-height: 1.3;
  }

  .faq-search-icon {
    width: 22px;
    height: 22px;
  }
}

/* PAGE CONTACT (vide pour l'instant) : même principe que la page FAQ ; le pied de page reste en bas de l'écran. */
.page-contact {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}

.page-contact main {
  flex: 1 0 auto;
}

/* PAGE CONTACT — structure du livre ouvert : deux pages TOUJOURS côte à côte (aucune règle d'empilement),
   trois feuilles suggérées par côté (fines traces sur les tranches), épaisseur en bas, reliure centrale discrète.
   Toutes les épaisseurs suivent la largeur du livre (cqw), avec un minimum de 2 px pour rester visibles. */
.contact-section {
  container-type: inline-size;
  container-name: contact;
}

.contact-inner {
  padding: 32px 20px 48px;
}

.contact-book-wrap {
  container-type: inline-size;
  margin: 0 auto;
  width: 100%;
}

.contact-book {
  --step: max(2px, 0.36cqw);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr 1fr;
  aspect-ratio: 1.45 / 1;
  box-shadow: 0 calc(var(--step) * 5) calc(var(--step) * 6) calc(var(--step) * -3) rgba(26, 26, 26, 0.3);
}

.contact-leaf {
  position: relative;
  box-sizing: border-box;
  background-color: #FFFFFF;
  border: 1px solid rgba(26, 26, 26, 0.12);
}

.contact-leaf-l { border-right: 0; }
.contact-leaf-r { border-left: 0; }

/* Ombre intérieure : chaque page s'assombrit légèrement vers la reliure. */
.contact-leaf::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.contact-leaf-l::after {
  background: linear-gradient(90deg, transparent 78%, rgba(26, 26, 26, 0.07) 94%, rgba(26, 26, 26, 0.16) 100%);
}

.contact-leaf-r::after {
  background: linear-gradient(270deg, transparent 78%, rgba(26, 26, 26, 0.07) 94%, rgba(26, 26, 26, 0.16) 100%);
}

/* Trois feuilles : décalées vers l'extérieur et vers le bas ; leur bord intérieur s'arrête exactement à la reliure. */
.contact-sheet {
  position: absolute;
  inset: 0;
  z-index: -1;
  box-sizing: border-box;
  background-color: #FFFFFF;
  border: 1px solid rgba(26, 26, 26, 0.24);
}

.contact-leaf-l .contact-sheet { border-right: 0; }
.contact-leaf-r .contact-sheet { border-left: 0; }

.contact-leaf-l .contact-sheet:nth-child(1) { right: calc(var(--step) * -1); transform: translate(calc(var(--step) * -1), calc(var(--step) * 0.8)); }
.contact-leaf-l .contact-sheet:nth-child(2) { right: calc(var(--step) * -2); transform: translate(calc(var(--step) * -2), calc(var(--step) * 1.6)); }
.contact-leaf-l .contact-sheet:nth-child(3) { right: calc(var(--step) * -3); transform: translate(calc(var(--step) * -3), calc(var(--step) * 2.4)); }

.contact-leaf-r .contact-sheet:nth-child(1) { left: calc(var(--step) * -1); transform: translate(var(--step), calc(var(--step) * 0.8)); }
.contact-leaf-r .contact-sheet:nth-child(2) { left: calc(var(--step) * -2); transform: translate(calc(var(--step) * 2), calc(var(--step) * 1.6)); }
.contact-leaf-r .contact-sheet:nth-child(3) { left: calc(var(--step) * -3); transform: translate(calc(var(--step) * 3), calc(var(--step) * 2.4)); }

/* Reliure centrale : fin trait et halo très léger. */
.contact-spine {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 2;
  width: 1px;
  background-color: rgba(26, 26, 26, 0.3);
  transform: translateX(-0.5px);
}

.contact-spine::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1.2cqw;
  width: 2.4cqw;
  background: linear-gradient(90deg, transparent, rgba(26, 26, 26, 0.07) 50%, transparent);
}

/* Épaisseur visible sous le livre. */
.contact-base {
  position: absolute;
  z-index: -2;
  box-sizing: border-box;
  left: calc(var(--step) * -3);
  right: calc(var(--step) * -3);
  bottom: calc(var(--step) * -3.4);
  height: calc(var(--step) * 1.2);
  background: linear-gradient(#FFFFFF, #EEEAE2);
  border: 1px solid rgba(26, 26, 26, 0.24);
  border-top: 0;
}

/* Largeur du livre par format (les deux pages restent côte à côte à toutes les largeurs). */
@container contact (min-width: 641px) and (max-width: 1024px) {
  .contact-book-wrap { width: min(100%, 720px); }
}

@container contact (min-width: 1025px) {
  .contact-book-wrap { width: clamp(900px, calc(70cqw - 28px), 1180px); }
}

/* Photographie sur la page de gauche : cadre blanc régulier (même marge sur les quatre côtés, proportionnelle au livre).
   La photo est recadrée sur les côtés (murs blancs) sans aucune déformation ; l'ombre de la reliure reste par-dessus. */
.contact-photo {
  position: absolute;
  inset: 3.5cqw;
  display: block;
  width: calc(100% - 7cqw);
  height: calc(100% - 7cqw);
  object-fit: cover;
  object-position: 50% 50%;
}

/* Contenu de la page de droite : titre CONTACT puis téléphone, e-mail et horaires, alignés à gauche près du pli.
   Tailles proportionnelles au livre (cqw) avec un plancher de lisibilité sur téléphone. */
.contact-info {
  position: absolute;
  z-index: 1;
  top: 3.5cqw;
  left: 6cqw;
  right: 3.5cqw;
  bottom: 3.5cqw;
  color: #1A1A1A;
}

.contact-title {
  margin: 0;
  font-family: 'Bodoni Moda', var(--font-serif);
  font-weight: 500;
  font-style: normal;
  font-size: 5.6cqw;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1A1A1A;
  white-space: nowrap;
}

.contact-details {
  margin-top: 5.5cqw;
  display: flex;
  flex-direction: column;
  gap: 2.8cqw;
}

.contact-item { margin: 0; }

.contact-label {
  margin: 0 0 max(3px, 0.9cqw);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(10px, 2.1cqw, 16px);
  line-height: 1.3;
  letter-spacing: 0.07em; /* espacement naturel : lettres lisibles, ni trop serrées ni trop espacées */
  text-transform: uppercase;
  color: #1A1A1A;
}

.contact-value,
.contact-hours {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: 'Bodoni Moda', var(--font-serif);
  font-weight: 400;
  font-style: normal;
  font-size: clamp(10px, 2.9cqw, 24px);
  line-height: 1.3;
  color: #1A1A1A;
}

.contact-value a {
  color: inherit;
  text-decoration: none;
  overflow-wrap: anywhere;
  padding-block: 0.15em;
  display: inline-block;
}

.contact-value a:hover { text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 1px; }
.contact-value a:focus-visible { outline: 1px solid #1A1A1A; outline-offset: 3px; }

/* Horaires : hiérarchie claire sur les trois formats — le jour (petit, en gras léger) au-dessus de l'horaire (Bodoni, plus grand). */
.contact-hours li + li { margin-top: 0.75em; }
.contact-hours span { display: block; }
.contact-hours .contact-day {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(10px, 2cqw, 15px);
  line-height: 1.3;
  letter-spacing: 0.03em;
  margin-bottom: 0.15em;
}

/* PAGE SUIVI DE COMMANDE (vide pour l'instant) : même principe que les pages FAQ et Contact ; le pied de page reste en bas de l'écran. */
.page-suivi {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}

.page-suivi main {
  flex: 1 0 auto;
}

/* PAGE SUIVI DE COMMANDE — photo d'ambiance, carte de recherche, puis (après recherche) progression en 4 étapes et informations essentielles.
   Téléphone ≤ 640 px, tablette 641–1024 px, ordinateur ≥ 1025 px. */
.page-suivi {
  --track-T: 40px; --track-pad: 20px; --track-gap: 26px; --track-hero: 230px; --track-lift: 70px; --track-fs: 13px;
}
@media (min-width: 641px) {
  .page-suivi { --track-T: 56px; --track-pad: 40px; --track-gap: 34px; --track-hero: 350px; --track-lift: 76px; --track-fs: 14px; }
}
@media (min-width: 1025px) {
  .page-suivi { --track-T: 68px; --track-pad: 80px; --track-gap: 40px; --track-hero: 480px; --track-lift: 84px; --track-fs: 14px; }
}
.track-hero { height: var(--track-hero); overflow: hidden; background: #E8E1D6; }
.track-hero img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; display: block; }
.track-card {
  position: relative; margin: calc(var(--track-lift) * -1) auto 0;
  width: min(calc(100% - var(--track-pad) * 2), 700px);
  background: #F5F1EC; border: 1px solid #1A1A1A;
  padding: 22px; display: flex; flex-direction: column; gap: 20px;
}
@media (min-width: 641px) { .track-card { padding: calc(var(--track-gap) * 0.9); } }
.track-eyebrow { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: #6B645C; }
.track-title { font-family: 'Bodoni Moda', serif; font-weight: 400; font-size: var(--track-T); line-height: 1; margin: 0; letter-spacing: -0.01em; }
.track-deck { font-family: 'Playfair Display', serif; font-style: italic; font-size: 17px; line-height: 1.4; margin: 0; }
.track-form { display: flex; flex-direction: column; gap: 20px; }
.track-row { display: grid; gap: 20px; }
@media (min-width: 641px) { .track-row { grid-template-columns: 1fr 1fr; } }
.track-field { display: flex; flex-direction: column; gap: 6px; }
.track-field label { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.track-field input {
  font: inherit; font-size: 16px; color: #1A1A1A; background: transparent; border: 0;
  border-bottom: 1px solid #1A1A1A; padding: 8px 0; border-radius: 0; outline: none; width: 100%;
}
.track-field input::placeholder { color: #8B847B; }
.track-field input:focus { border-bottom-width: 2px; }
.track-btn {
  font: inherit; font-size: 12px; font-weight: 500; letter-spacing: 0.14em; background: #1A1A1A; color: #F5F1EC;
  border: 1px solid #1A1A1A; padding: 16px 30px; cursor: pointer; border-radius: 0;
}
.track-btn:hover { background: transparent; color: #1A1A1A; }
.track-btn:focus-visible { outline: 1px solid #1A1A1A; outline-offset: 3px; }
.track-msg { margin: 0; font-size: 13px; line-height: 1.5; color: #1A1A1A; }
.track-msg[hidden] { display: none; }
.track-sum { display: flex; flex-direction: column; gap: 20px; }
.track-sum[hidden], .track-search[hidden], .track-body[hidden] { display: none; }
.track-search { display: flex; flex-direction: column; gap: 20px; }
.track-no { font-family: 'Bodoni Moda', serif; font-size: calc(var(--track-T) * 0.75); line-height: 1; }
.track-back {
  background: none; border: 0; padding: 0; font: inherit; font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; align-self: flex-start; color: #1A1A1A;
}
.track-pad { height: calc(var(--track-gap) * 1.6); }
.track-body {
  width: min(calc(100% - var(--track-pad) * 2), 860px); margin: calc(var(--track-gap) * 1.6) auto 0;
  padding-bottom: calc(var(--track-gap) * 2); display: flex; flex-direction: column; gap: calc(var(--track-gap) * 1.5);
}
.track-sec { display: flex; flex-direction: column; gap: 18px; }
.track-h { display: flex; align-items: baseline; gap: 14px; border-bottom: 1px solid #1A1A1A; padding-bottom: 12px; }
.track-h b { font-family: 'Bodoni Moda', serif; font-weight: 400; font-size: 26px; line-height: 1.1; }
.track-h span { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: #6B645C; }
.track-prog { position: relative; display: grid; grid-template-columns: 1fr; gap: 22px; margin: 6px 0 0 4px; padding: 0; list-style: none; }
.track-prog::before { content: ""; position: absolute; left: 10px; top: 10px; bottom: 10px; width: 1px; background: #C9C0B3; }
.track-st.done::before { content: ""; position: absolute; left: 10px; top: 10px; width: 1px; height: calc(100% + 12px); background: #1A1A1A; }
.track-st { position: relative; display: flex; flex-direction: row; align-items: flex-start; text-align: left; gap: 16px; }
.track-dot { flex: none; width: 21px; height: 21px; border-radius: 50%; background: #F5F1EC; border: 1px solid #C9C0B3; z-index: 1; display: grid; place-items: center; }
.track-st.done .track-dot { background: #1A1A1A; border-color: #1A1A1A; }
.track-st.done .track-dot::after { content: ""; width: 5px; height: 9px; border: solid #F5F1EC; border-width: 0 1.5px 1.5px 0; transform: translateY(-1px) rotate(45deg); }
.track-st.now .track-dot { border: 5px solid #1A1A1A; }
.track-sl { font-size: var(--track-fs); font-weight: 500; line-height: 1.3; }
.track-sd { font-size: 12px; color: #6B645C; margin-top: 2px; }
.track-st.next .track-sl { color: #6B645C; font-weight: 400; }
.track-st.now .track-sl { font-weight: 600; }
@media (min-width: 641px) {
  .track-prog { grid-template-columns: repeat(4, 1fr); gap: 0; margin-left: 0; }
  .track-prog::before { left: 12.5%; right: 12.5%; top: 10px; bottom: auto; width: auto; height: 1px; }
  .track-st.done::before { left: 50%; top: 10px; width: 100%; height: 1px; }
  .track-st { flex-direction: column; align-items: center; text-align: center; gap: 12px; }
}
.track-facts { display: grid; grid-template-columns: 1fr; gap: 0 var(--track-gap); margin: 0; }
@media (min-width: 641px) { .track-facts { grid-template-columns: repeat(2, 1fr); } }
.track-facts div { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid #D8CFC0; font-size: var(--track-fs); }
.track-facts dt { color: #6B645C; }
.track-facts dd { margin: 0; text-align: right; font-weight: 500; }

/* PAGE ASSISTANCE (structure seule pour l'instant) : même principe que les pages FAQ, Contact et Suivi de commande ;
   le pied de page reste en bas de l'écran. */
.page-assistance {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}

.page-assistance main {
  flex: 1 0 auto;
}

/* PAGE ASSISTANCE — héros photographique : bande panoramique pleine largeur (bord à bord, collée sous le header).
   Photo seule : ni titre, ni recherche, ni rubriques. La photo (736 × 552 px) est recadrée sans déformation (object-fit: cover) ;
   seule la hauteur de la bande change selon le format, et la position verticale choisit la zone conservée :
   téléphone  : bande 2,1:1, zone du haut (bottine du haut, visage, haut de la bottine du bas) ;
   tablette   : bande 2,6:1, zone du bas (visage, main, bottine du bas) ;
   ordinateur : bande d'environ 3,2:1 (hauteur 31 vw, entre 340 et 640 px), même zone que la tablette. */
.assistance-hero {
  container-type: inline-size;
  container-name: assistance;
}

.assistance-hero-inner {
  padding: 0 0 48px;
}

.assistance-hero-photo {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  margin: 0;
  aspect-ratio: 2.1 / 1;
  object-fit: cover;
  object-position: 50% 35%;
}

@container assistance (min-width: 641px) {
  .assistance-hero-inner { padding-bottom: 64px; }
  .assistance-hero-photo { aspect-ratio: 2.6 / 1; object-position: 50% 74%; }
}

@container assistance (min-width: 1025px) {
  .assistance-hero-inner { padding-bottom: 80px; }
  .assistance-hero-photo { aspect-ratio: auto; height: clamp(340px, 31vw, 640px); object-position: 50% 76%; }
}

/* PAGE ASSISTANCE — titre et barre de recherche superposés à la photographie. Le calque occupe exactement la bande (inset 0) et ne
   change pas sa hauteur. Grille 3 lignes : le titre occupe la ligne centrale (donc toujours au centre de la bande, comme avant) ;
   la barre est dans la ligne du haut, alignée en bas, juste au-dessus du titre. Visuel uniquement : aucune recherche fonctionnelle. */
.assistance-hero-media {
  position: relative;
}

.assistance-hero-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
  justify-items: center;
  pointer-events: none;
}

.assistance-title {
  grid-row: 2;
  width: 88%;
  margin: 0;
  font-family: 'Bodoni Moda', var(--font-serif);
  font-weight: 500;
  font-style: normal;
  font-size: clamp(24px, 7cqw, 32px);
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-align: center;
  text-wrap: balance;
  color: #FAF6EE;
  text-shadow: 0 1px 2px rgba(26, 26, 26, 0.35), 0 2px 18px rgba(26, 26, 26, 0.45);
}

.assistance-search {
  grid-row: 1;
  align-self: end;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
  width: calc(100% - 40px);
  max-width: 520px;
  height: 46px;
  margin-bottom: 10px;
  padding: 0 16px;
  background: #FFFFFF;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(26, 26, 26, 0.12);
  pointer-events: auto;
}

.assistance-search:focus-within {
  box-shadow: 0 2px 12px rgba(26, 26, 26, 0.12), 0 0 0 2px rgba(26, 26, 26, 0.45);
}

.assistance-search-icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: #1A1A1A;
}

.assistance-search-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: #1A1A1A;
  appearance: none;
  -webkit-appearance: none;
}

.assistance-search-input::placeholder {
  color: #756B60;
  opacity: 1;
}

.assistance-search-input::-webkit-search-decoration,
.assistance-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

@container assistance (max-width: 360px) {
  .assistance-search { height: 40px; margin-bottom: 6px; }
}

@container assistance (min-width: 641px) {
  .assistance-title { font-size: clamp(30px, 4.4cqw, 40px); }
  .assistance-search { width: 46%; min-width: 320px; max-width: 560px; height: 52px; margin-bottom: 12px; }
}

@container assistance (min-width: 1025px) {
  .assistance-title { font-size: clamp(44px, 3.4cqw, 60px); }
  .assistance-search { width: 44%; min-width: 500px; max-width: 640px; height: 56px; margin-bottom: 14px; }
}

/* PAGE ASSISTANCE — première rangée de rubriques (Paiement, Commande, Compte client). Présentation visuelle uniquement :
   ni lien, ni bouton. Photos au même format 3:4 (object-fit: cover, sans déformation), intitulé centré juste dessous.
   Téléphone : une colonne ; tablette et ordinateur : trois colonnes alignées. L'espace au-dessus vient du bas du héros. */
.assistance-topics {
  container-type: inline-size;
  container-name: assistance-topics;
}

.assistance-topics-inner {
  padding: 0 20px 72px;
}

.assistance-topics-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.assistance-topic {
  margin: 0;
  padding: 0;
  min-width: 0;
}

.assistance-topic-figure {
  margin: 0;
}

.assistance-topic-photo {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 12%;
}

.assistance-topic-photo--paiement { object-position: 50% 0%; }
.assistance-topic-photo--commande { object-position: 50% 12%; }
.assistance-topic-photo--compte-client { object-position: 50% 18%; }

.assistance-topic-label {
  margin: 14px 0 0;
  font-family: 'Bodoni Moda', var(--font-serif);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: 0.01em;
  text-align: center;
  color: #1A1A1A;
}

@container assistance-topics (min-width: 720px) {
  .assistance-topics-inner { padding: 0 40px 96px; }
  .assistance-topics-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; max-width: none; }
  .assistance-topic-label { margin-top: 16px; font-size: 22px; }
}

@container assistance-topics (min-width: 1025px) {
  .assistance-topics-inner { padding: 0 60px 120px; }
  .assistance-topics-grid { gap: 40px; max-width: 1200px; }
  .assistance-topic-label { margin-top: 18px; font-size: 26px; }
}

/* PAGE ASSISTANCE — deuxième rangée (Codes promo et réductions, Articles & tailles, Confirmation d'achat). Mêmes photos 3:4, mêmes
   intitulés que la première rangée ; seul l'espace entre les deux rangées est ajouté (row-gap), les colonnes ne changent pas. */
.assistance-topic-photo--codes-promo,
.assistance-topic-photo--articles-tailles,
.assistance-topic-photo--confirmation { object-position: 50% 50%; }

.assistance-topic-label { text-wrap: balance; }

@container assistance-topics (min-width: 720px) {
  .assistance-topics-grid { row-gap: 48px; }
}

@container assistance-topics (min-width: 1025px) {
  .assistance-topics-grid { row-gap: 64px; }
}

/* PAGE LIVRAISON (structure seule pour l'instant) : même principe que les pages FAQ, Contact, Suivi de commande et Assistance ;
   le pied de page reste en bas de l'écran. Aucun contenu pour le moment. */
.page-livraison {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}

.page-livraison main {
  flex: 1 0 auto;
}

/* PAGE LIVRAISON — photographie principale + barre de recherche (visuel uniquement : aucune recherche, aucun résultat).
   Une seule colonne centrée : la barre en haut, la photo dessous à la même largeur. La photo (1024 × 1535) garde son format
   2:3 d'origine : aucun recadrage, aucune déformation. Largeur de la colonne : 420 px max sur téléphone, 440 sur tablette, 480 sur ordinateur. */
.livraison-hero {
  container-type: inline-size;
  container-name: livraison;
}

.livraison-hero-inner {
  padding: 28px 20px 64px;
}

.livraison-column {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}

.livraison-search {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 46px;
  margin: 0 0 20px;
  padding: 0 14px;
  background: #FFFFFF;
  border: 1px solid rgba(26, 26, 26, 0.1);
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(26, 26, 26, 0.06);
}

.livraison-search:focus-within {
  box-shadow: 0 2px 10px rgba(26, 26, 26, 0.06), 0 0 0 2px rgba(26, 26, 26, 0.45);
}

.livraison-search-icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: #1A1A1A;
}

.livraison-search-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--font-sans);
  /* Téléphone : la taille suit la largeur pour que « Votre expérience de livraison commence ici » reste lisible en entier. */
  font-size: clamp(10px, calc((100cqw - 94px) / 22.5), 14.4px);
  font-weight: 400;
  letter-spacing: 0;
  color: #1A1A1A;
  text-overflow: ellipsis;
  appearance: none;
  -webkit-appearance: none;
}

.livraison-search-input::placeholder {
  color: #756B60;
  opacity: 1;
}

.livraison-search-input::-webkit-search-decoration,
.livraison-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.livraison-photo-frame {
  margin: 0;
}

.livraison-photo {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  aspect-ratio: 1024 / 1535;
  object-fit: cover;
}

@container livraison (max-width: 360px) {
  .livraison-hero-inner { padding-left: 14px; padding-right: 14px; }
  .livraison-search { height: 44px; }
  .livraison-search-input { font-size: clamp(10px, calc((100cqw - 82px) / 22.5), 14.4px); }
}

@container livraison (min-width: 641px) {
  .livraison-hero-inner { padding: 36px 40px 80px; }
  .livraison-column { max-width: 440px; }
  .livraison-search { height: 52px; margin-bottom: 24px; padding: 0 16px; gap: 10px; }
  .livraison-search-icon { width: 18px; height: 18px; }
  .livraison-search-input { font-size: 16px; letter-spacing: 0.01em; }
}

@container livraison (min-width: 1025px) {
  .livraison-hero-inner { padding: 44px 60px 96px; }
  .livraison-column { max-width: 480px; }
  .livraison-search { height: 56px; margin-bottom: 28px; }
}

/* PAGE LIVRAISON — grand cadre blanc vide (aucun contenu pour l'instant). Placé sous la photographie, centré, sans toucher les bords.
   L'espace au-dessus vient du bas de la zone photo (64 / 80 / 96 px). Largeur : 100 % moins les marges, plafonnée selon le format. */
.livraison-frame-section {
  container-type: inline-size;
  container-name: livraison-frame;
}

.livraison-frame-inner {
  padding: 0 20px 64px;
}

.livraison-frame {
  box-sizing: border-box;
  width: 100%;
  max-width: 560px;
  min-height: 360px;
  margin: 0 auto;
  background: #FFFFFF;
  border: 1px solid #E6DED2;
  border-radius: 16px;
}

@container livraison-frame (max-width: 360px) {
  .livraison-frame-inner { padding-left: 14px; padding-right: 14px; }
}

@container livraison-frame (min-width: 641px) {
  .livraison-frame-inner { padding: 0 40px 80px; }
  .livraison-frame { max-width: 720px; min-height: 480px; border-radius: 18px; }
}

@container livraison-frame (min-width: 1025px) {
  .livraison-frame-inner { padding: 0 60px 96px; }
  .livraison-frame { max-width: 960px; min-height: 560px; border-radius: 20px; }
}

/* PAGE LIVRAISON — photographie de packaging dans le coin supérieur gauche du cadre blanc. Le cadre ne change pas (taille fixée par son
   min-height, boîte border-box) : la photo (1121 × 1403, ratio conservé) est de taille intermédiaire (150 / 210 / 290 px de large), calée en haut à gauche avec
   l'espace de respiration (16 / 24 / 28 px) ; une grande zone blanche reste à droite et dessous. Le reste du cadre reste vide. */
.livraison-frame {
  padding: 16px;
}

.livraison-frame-photo {
  display: block;
  box-sizing: border-box;
  width: min(100%, 150px);
  height: auto;
  aspect-ratio: 1121 / 1403;
  object-fit: cover;
}

@container livraison-frame (min-width: 641px) {
  .livraison-frame { padding: 24px; }
  .livraison-frame-photo { width: min(100%, 210px); }
}

@container livraison-frame (min-width: 1025px) {
  .livraison-frame { padding: 28px; }
  .livraison-frame-photo { width: min(100%, 290px); }
}

/* PAGE LIVRAISON — introduction dans le cadre blanc : la photo reste en haut à gauche (taille et position inchangées) ;
   à sa droite, le titre puis une phrase d'introduction en italique, alignés sur le haut de la photo. Le cadre ne change pas :
   il est dimensionné par son min-height et le texte est plus court que la hauteur intérieure. Aucune mention « SOW CHIC · LIVRAISON ». */
.livraison-frame {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.livraison-frame-photo {
  flex: 0 0 auto;
}

.livraison-frame-text {
  flex: 1 1 0;
  min-width: 0;
}

.livraison-frame-intro {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.45;
  letter-spacing: 0.005em;
  color: #1A1A1A;
  overflow-wrap: break-word;
  text-wrap: pretty;
}

.livraison-frame-title {
  margin: 0 0 8px;
  font-family: 'Bodoni Moda', var(--font-serif);
  font-weight: 500;
  font-style: normal;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: 0.005em;
  color: #1A1A1A;
  overflow-wrap: break-word;
  text-wrap: balance;
}

@container livraison-frame (max-width: 360px) {
  .livraison-frame { gap: 10px; }
  .livraison-frame-intro { font-size: 11px; }
  .livraison-frame-title { font-size: 15px; margin-bottom: 6px; }
}

@container livraison-frame (min-width: 641px) {
  .livraison-frame { gap: 32px; }
  .livraison-frame-intro { font-size: 17px; }
  .livraison-frame-title { font-size: 30px; margin-bottom: 12px; }
}

@container livraison-frame (min-width: 1025px) {
  .livraison-frame { gap: 44px; }
  .livraison-frame-intro { font-size: 20px; }
  .livraison-frame-title { font-size: 40px; margin-bottom: 16px; }
}

/* PAGE LIVRAISON — cinq rubriques dépliables dans le cadre blanc, sous l'introduction.
   Le cadre devient une grille : la photo reste en haut à gauche (taille et position inchangées).
   Téléphone : texte à droite de la photo, rubriques en pleine largeur dessous.
   Tablette et ordinateur : rubriques dans la colonne de droite, sous le texte d'introduction.
   Mêmes traits fins, même animation (grid-template-rows 0fr → 1fr) et même bouton à clavier que les sections du pied de page.
   Les panneaux ne contiennent aucune information commerciale : seulement un texte d'attente (« Informations à venir. »),
   et, pour « Suivi de commande », le lien vers la page de suivi existante. */
.livraison-frame {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr); /* = largeur de la photo (150 / 210 / 290 px) */
  grid-template-rows: auto auto;
  row-gap: 24px;
  align-items: start;
}

.livraison-frame-photo { grid-column: 1; grid-row: 1; }
.livraison-frame-text { grid-column: 2; grid-row: 1; }

.livraison-acc-list {
  grid-column: 1 / -1;
  grid-row: 2;
  min-width: 0;
  border-bottom: 1px solid rgba(26, 26, 26, 0.14);
}

.livraison-acc {
  border-top: 1px solid rgba(26, 26, 26, 0.14);
}

.livraison-acc-heading {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

.livraison-acc-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-sizing: border-box;
  width: 100%;
  min-height: 56px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #1A1A1A;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.livraison-acc-toggle:focus-visible {
  outline: 2px solid #1A1A1A;
  outline-offset: 2px;
}

.livraison-acc-arrow {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  transition: transform 0.25s ease;
}

.livraison-acc.is-open .livraison-acc-arrow {
  transform: rotate(180deg);
}

.livraison-acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 0.3s ease, visibility 0s linear 0.3s;
}

.livraison-acc.is-open > .livraison-acc-panel {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows 0.3s ease, visibility 0s;
}

.livraison-acc-panel-inner {
  min-height: 0;
  overflow: hidden;
}

.livraison-acc-note {
  margin: 0;
  padding: 0 0 20px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(26, 26, 26, 0.7);
}

.livraison-acc-link {
  color: #1A1A1A;
  font-style: normal;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.livraison-acc-link:focus-visible {
  outline: 2px solid #1A1A1A;
  outline-offset: 3px;
}

@container livraison-frame (min-width: 641px) {
  .livraison-frame { row-gap: 28px; grid-template-columns: 210px minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .livraison-frame-photo { grid-row: 1 / span 2; }
  .livraison-acc-list { grid-column: 2; }
  .livraison-acc-toggle { min-height: 54px; font-size: 18px; }
  .livraison-acc-note { font-size: 16px; }
}

@container livraison-frame (min-width: 1025px) {
  .livraison-frame { row-gap: 36px; grid-template-columns: 290px minmax(0, 1fr); }
  .livraison-acc-toggle { min-height: 60px; font-size: 20px; }
  .livraison-acc-note { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .livraison-acc-arrow,
  .livraison-acc-panel {
    transition: none !important;
  }
}

/* ===== PAGE LIVRAISON — VERSION DÉFINITIVE (remplace la présentation précédente) =====
   Sans la photographie de la femme ni cadre blanc ; cadre sans bordure, photo packaging à gauche, titre et texte à droite,
   cinq rubriques numérotées (signe « + » → « × »), intitulés en italique éditorial ; aucun trait noir autour des rubriques. */
.livraison-hero-inner { padding: 28px 20px 30px; }
@container livraison (max-width: 360px) { .livraison-hero-inner { padding: 24px 14px 26px; } }
@container livraison (min-width: 641px) { .livraison-hero-inner { padding: 36px 40px 44px; } }
@container livraison (min-width: 1025px) { .livraison-hero-inner { padding: 48px 60px 56px; } }

.livraison-frame-inner { padding: 0 20px 72px; }
.livraison-frame {
  background: transparent;
  border: 1px solid #1A1A1A;
  border-radius: 0;
  outline: 1px solid #1A1A1A;
  outline-offset: -8px;
  min-height: 0;
  max-width: 560px;
  padding: 26px 24px 10px;
  grid-template-columns: 150px minmax(0, 1fr);
  column-gap: 20px;
  row-gap: 30px;
}
.livraison-frame-photo { width: 100%; }
.livraison-frame-title {
  font-weight: 400;
  font-size: 22px;
  line-height: 1.12;
  letter-spacing: -0.005em;
  margin: 2px 0 14px;
}
.livraison-frame-title::after {
  content: "";
  display: block;
  width: 34px;
  height: 1px;
  margin-top: 14px;
  background: #1A1A1A;
}
.livraison-frame-intro { font-family: 'Playfair Display', var(--font-serif); font-size: 14px; line-height: 1.5; color: #1A1A1A; }

.livraison-acc-list {
  counter-reset: acc;
  border-top: 1px solid #1A1A1A;
  border-bottom: 1px solid #1A1A1A;
}
.livraison-acc { border-top: 1px solid #D8CFC0; }
.livraison-acc:first-child { border-top: 0; }
.livraison-acc-toggle {
  min-height: 66px;
  font-family: 'Bodoni Moda', var(--font-serif);
  font-size: 19px;
  letter-spacing: 0;
  justify-content: flex-start;
  gap: 0;
}
.livraison-acc-label { flex: 1 1 auto; display: flex; align-items: baseline; }
.livraison-acc-label::before {
  counter-increment: acc;
  content: "0" counter(acc);
  flex: none;
  width: 36px;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: #6B645C;
}
.livraison-acc-arrow { display: none; }
.livraison-acc-toggle::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  margin-left: 16px;
  background:
    linear-gradient(#1A1A1A, #1A1A1A) center / 100% 1px no-repeat,
    linear-gradient(#1A1A1A, #1A1A1A) center / 1px 100% no-repeat;
  transition: transform 0.3s ease;
}
.livraison-acc.is-open .livraison-acc-toggle::after { transform: rotate(45deg); }
.livraison-acc-toggle:hover .livraison-acc-label { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.livraison-acc-note { padding: 0 0 24px 36px; font-family: 'Playfair Display', var(--font-serif); font-size: 15px; }
.livraison-acc-link { font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; text-underline-offset: 5px; }

@container livraison-frame (max-width: 360px) {
  .livraison-frame-inner { padding-left: 14px; padding-right: 14px; }
  .livraison-frame { padding: 20px 16px 6px; column-gap: 14px; grid-template-columns: 112px minmax(0, 1fr); }
  .livraison-frame-title { font-size: 17px; }
  .livraison-frame-intro { font-size: 12px; }
  .livraison-acc-toggle { font-size: 17px; min-height: 60px; }
  .livraison-acc-label::before { width: 30px; }
  .livraison-acc-note { padding-left: 30px; }
}
@container livraison-frame (min-width: 641px) {
  .livraison-frame-inner { padding: 0 40px 96px; }
  .livraison-frame { max-width: 800px; padding: 44px 44px 24px; column-gap: 48px; row-gap: 0; grid-template-columns: 230px minmax(0, 1fr); outline-offset: -9px; }
  .livraison-frame-title { font-size: 34px; margin-bottom: 18px; }
  .livraison-frame-title::after { margin-top: 18px; width: 40px; }
  .livraison-frame-intro { font-size: 18px; }
  .livraison-acc-list { margin-top: 36px; }
  .livraison-acc-toggle { font-size: 21px; min-height: 68px; }
  .livraison-acc-note { font-size: 16px; padding-left: 36px; }
}
@container livraison-frame (min-width: 1025px) {
  .livraison-frame-inner { padding: 0 60px 120px; }
  .livraison-frame { max-width: 1040px; padding: 60px 64px 36px; column-gap: 72px; grid-template-columns: 340px minmax(0, 1fr); outline-offset: -10px; }
  .livraison-frame-title { font-size: 46px; }
  .livraison-frame-intro { font-size: 22px; }
  .livraison-acc-list { margin-top: 44px; }
  .livraison-acc-toggle { font-size: 24px; min-height: 76px; }
  .livraison-acc-label::before { width: 44px; }
  .livraison-acc-note { font-size: 17px; padding-left: 44px; }
}

/* Corrections finales — (1) suppression du double encadrement et des deux traits noirs qui encadraient les rubriques ;
   (2) intitulés des rubriques en italique éditorial léger (Playfair Display italique, graisse régulière) */
.livraison-frame { border: 0; outline: 0; }
.livraison-acc-list { border-top: 0; border-bottom: 0; }
.livraison-acc-toggle {
  font-family: 'Playfair Display', var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 21px;
  line-height: 1.3;
  letter-spacing: 0.005em;
  color: #1A1A1A;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.livraison-acc-label::before {
  font-style: normal;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: #6B645C;
}
@media (prefers-reduced-motion: reduce) { .livraison-acc-toggle::after { transition: none; } }
@container livraison-frame (max-width: 360px) {
  .livraison-acc-toggle { font-size: 19px; }
}
@container livraison-frame (min-width: 641px) {
  .livraison-acc-toggle { font-size: 23px; }
}
@container livraison-frame (min-width: 1025px) {
  .livraison-acc-toggle { font-size: 27px; }
}


/* PAGE RETOUR ET REMBOURSEMENT (structure seule pour l'instant) : même principe que les pages Livraison, Assistance, FAQ, Contact et
   Suivi de commande ; le pied de page reste en bas de l'écran. Aucun contenu pour le moment. */
.page-retour {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}

.page-retour main {
  flex: 1 0 auto;
}

/* PAGE RETOUR ET REMBOURSEMENT — petite photo en haut à droite, sans cadre ni fond : ratio d'origine conservé (736 × 920),
   marge à droite = marge de la zone de contenu (14 / 20 / 40 / 60 px), jamais collée au bord de l'écran. */
.retour-hero {
  container-type: inline-size;
  container-name: retour;
}

.retour-hero-inner {
  display: flex;
  justify-content: flex-end;
  padding: 20px 20px 24px;
}

.retour-photo-frame {
  margin: 0;
  width: 120px;
}

.retour-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 736 / 920;
  object-fit: cover;
}

@container retour (max-width: 360px) {
  .retour-hero-inner { padding-left: 14px; padding-right: 14px; }
  .retour-photo-frame { width: 104px; }
}

@container retour (min-width: 641px) {
  .retour-hero-inner { padding: 36px 40px 40px; }
  .retour-photo-frame { width: 170px; }
}

@container retour (min-width: 1025px) {
  .retour-hero-inner { padding: 44px 60px 48px; }
  .retour-photo-frame { width: 220px; }
}

/* PAGE RETOUR ET REMBOURSEMENT — titre et introduction en haut à gauche, alignés sur le haut de la photo (qui ne change pas :
   taille, position et marges identiques). Typographie reprise de la page Livraison : Bodoni Moda pour le titre, Playfair en italique pour l'introduction. */
.retour-hero-inner {
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.retour-text {
  flex: 1 1 0;
  min-width: 0;
}

.retour-photo-frame { flex: 0 0 auto; }

.retour-title {
  margin: 0 0 8px;
  font-family: 'Bodoni Moda', var(--font-serif);
  font-weight: 500;
  font-style: normal;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: 0.005em;
  color: #1A1A1A;
  overflow-wrap: break-word;
  text-wrap: balance;
}

.retour-intro {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 12.5px;
  line-height: 1.5;
  letter-spacing: 0.005em;
  color: #1A1A1A;
  overflow-wrap: break-word;
  text-wrap: pretty;
}

@container retour (max-width: 360px) {
  .retour-hero-inner { gap: 12px; }
  .retour-title { font-size: 16px; margin-bottom: 6px; }
  .retour-intro { font-size: 11px; }
}

@container retour (min-width: 641px) {
  .retour-hero-inner { gap: 32px; }
  .retour-text { max-width: 440px; }
  .retour-title { font-size: 34px; margin-bottom: 14px; }
  .retour-intro { font-size: 17px; }
}

@container retour (min-width: 1025px) {
  .retour-hero-inner { gap: 44px; }
  .retour-text { max-width: 560px; }
  .retour-title { font-size: 46px; margin-bottom: 18px; }
  .retour-intro { font-size: 20px; }
}

/* PAGE RETOUR ET REMBOURSEMENT — rangée de quatre rubriques (Remboursement, Échange, Retour, Délais) : une seule ligne, icône fine au trait
   au-dessus de l'intitulé. Zones distinctes par un filet fin, sans fond ni carte. Éléments purement visuels (pas de bouton, pas de lien,
   aucun contenu associé) : le comportement au clic sera défini plus tard. Mêmes marges latérales que la photo (14 / 20 / 40 / 60 px). */
.retour-cats-section {
  container-type: inline-size;
  container-name: retour-cats;
}

.retour-cats-inner {
  padding: 8px 20px 40px;
}

.retour-cats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.retour-cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  padding: 18px 4px 16px;
  border: 1px solid rgba(26, 26, 26, 0.16);
  border-radius: 4px;
  color: #1A1A1A;
  text-align: center;
}

.retour-cat-icon {
  display: block;
  width: 26px;
  height: 26px;
  flex: none;
}

.retour-cat-label {
  display: block;
  max-width: 100%;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(8px, 2.55cqw, 12px);
  line-height: 1.2;
  letter-spacing: 0;
  color: #1A1A1A;
  white-space: nowrap;
}

@container retour-cats (max-width: 360px) {
  .retour-cats-inner { padding-left: 14px; padding-right: 14px; padding-bottom: 32px; }
  .retour-cats { gap: 6px; }
  .retour-cat { gap: 8px; padding: 14px 2px 12px; }
  .retour-cat-icon { width: 22px; height: 22px; }
}

@container retour-cats (min-width: 641px) {
  .retour-cats-inner { padding: 8px 40px 56px; }
  .retour-cats { gap: 20px; }
  .retour-cat { gap: 16px; padding: 30px 8px 26px; }
  .retour-cat-icon { width: 38px; height: 38px; }
  .retour-cat-label { font-size: 16px; letter-spacing: 0.01em; }
}

@container retour-cats (min-width: 1025px) {
  .retour-cats-inner { padding: 8px 60px 72px; }
  .retour-cats { gap: 28px; }
  .retour-cat { gap: 20px; padding: 40px 12px 34px; }
  .retour-cat-icon { width: 46px; height: 46px; }
  .retour-cat-label { font-size: 19px; }
}

/* PAGE RETOUR ET REMBOURSEMENT — contenu de la rubrique « Remboursement » : trois blocs (titre + paragraphe) sous la rangée des quatre rubriques,
   sans numéro ni icône, en écriture droite. Mêmes marges latérales que le reste de la page (14 / 20 / 40 / 60 px) ; colonne de lecture limitée
   en largeur sur tablette et ordinateur. Aucun comportement au clic ajouté. */
.retour-contenu {
  container-type: inline-size;
  container-name: retour-contenu;
}

.retour-contenu-inner {
  padding: 8px 20px 48px;
}

.retour-contenu-col {
  display: flex;
  flex-direction: column;
  gap: 36px;
  max-width: 720px;
}

.retour-bloc-title {
  margin: 0 0 10px;
  font-family: 'Bodoni Moda', var(--font-serif);
  font-weight: 500;
  font-style: normal;
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: 0.005em;
  color: #1A1A1A;
  text-wrap: balance;
}

.retour-bloc-text {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: normal;
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: 0.005em;
  color: #1A1A1A;
  overflow-wrap: break-word;
  text-wrap: pretty;
}

@container retour-contenu (max-width: 360px) {
  .retour-contenu-inner { padding-left: 14px; padding-right: 14px; padding-bottom: 40px; }
  .retour-contenu-col { gap: 30px; }
  .retour-bloc-title { font-size: 17px; }
  .retour-bloc-text { font-size: 14px; }
}

@container retour-contenu (min-width: 641px) {
  .retour-contenu-inner { padding: 16px 40px 72px; }
  .retour-contenu-col { gap: 48px; }
  .retour-bloc-title { font-size: 26px; margin-bottom: 14px; }
  .retour-bloc-text { font-size: 17px; }
}

@container retour-contenu (min-width: 1025px) {
  .retour-contenu-inner { padding: 24px 60px 88px; }
  .retour-contenu-col { gap: 56px; max-width: 780px; }
  .retour-bloc-title { font-size: 30px; margin-bottom: 16px; }
  .retour-bloc-text { font-size: 18px; }
}

/* PAGE RETOUR ET REMBOURSEMENT — les quatre rubriques deviennent des liens vers leurs pages (remboursement, échange, retour, délais).
   L'apparence des zones est inchangée ; seul s'ajoute un survol discret et un contour au clavier. Lien de retour discret en haut des pages de rubrique. */
.retour-cats > li {
  display: flex;
  min-width: 0;
}

a.retour-cat {
  flex: 1 1 auto;
  text-decoration: none;
  transition: border-color 0.2s ease;
}

a.retour-cat:hover { border-color: rgba(26, 26, 26, 0.5); }
a.retour-cat:focus-visible { outline: 1px solid #1A1A1A; outline-offset: 3px; }

.retour-back-section {
  container-type: inline-size;
  container-name: retour-back;
}

.retour-back-inner { padding: 20px 20px 20px; }

.retour-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.3;
  color: #1A1A1A;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.retour-back:hover { border-bottom-color: currentColor; }
.retour-back:focus-visible { outline: 1px solid #1A1A1A; outline-offset: 4px; }
.retour-back-icon { flex: none; }

@container retour-back (max-width: 360px) {
  .retour-back-inner { padding-left: 14px; padding-right: 14px; }
  .retour-back { font-size: 13px; }
}

@container retour-back (min-width: 641px) {
  .retour-back-inner { padding: 32px 40px 28px; }
  .retour-back { font-size: 15px; }
}

@container retour-back (min-width: 1025px) {
  .retour-back-inner { padding: 40px 60px 32px; }
  .retour-back { font-size: 16px; }
}

/* PAGES DE RUBRIQUE — la photo d'origine est restaurée en haut à droite (mêmes classes, taille, marges et position que sur la page principale) ;
   le lien de retour occupe la colonne de gauche, alignée sur le haut de la photo. */
@container retour (max-width: 360px) {
  .retour-text .retour-back { font-size: 13px; }
}

@container retour (min-width: 641px) {
  .retour-text .retour-back { font-size: 15px; }
}

@container retour (min-width: 1025px) {
  .retour-text .retour-back { font-size: 16px; }
}

/* PAGE EMBALLAGE CADEAU (structure seule pour l'instant) : même principe que les pages Livraison, Retour et remboursement, etc. ;
   le pied de page reste en bas de l'écran. Aucun contenu, aucune image pour le moment. */
.page-cadeau {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}

.page-cadeau main {
  flex: 1 0 auto;
}

/* PAGE EMBALLAGE CADEAU — photo de composition validée, seule et sans recadrage (proportions 1121 / 1403 conservées, image entière visible).
   Même principe de conteneur que les autres pages : téléphone ≤ 640, tablette 641–1024, ordinateur ≥ 1025. */
.cadeau-photo {
  container-type: inline-size;
  container-name: cadeau;
}

.cadeau-photo-inner {
  padding: 20px 14px 32px;
}

.cadeau-photo-frame {
  margin: 0 auto;
  width: 100%;
  max-width: 560px;
}

.cadeau-photo-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1121 / 1403;
}

@container cadeau (min-width: 641px) {
  .cadeau-photo-inner { padding: 40px 40px 56px; }
  .cadeau-photo-frame { max-width: 600px; }
}

@container cadeau (min-width: 1025px) {
  .cadeau-photo-inner { padding: 48px 60px 64px; }
  .cadeau-photo-frame { max-width: 640px; }
}

/* PAGE EMBALLAGE CADEAU — section éditoriale « L’art d’offrir, autrement » (sous la photo).
   Titre : Bodoni Moda droite, grand format façon rubrique de magazine ; phrase d’ouverture et paragraphes : Playfair Display italique ;
   signature : Playfair Display droite, petite et discrète. Couleurs et polices déjà utilisées sur le site. */
.cadeau-service {
  container-type: inline-size;
  container-name: cadeau-service;
}

.cadeau-service-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 20px 64px;
  text-align: center;
}

.cadeau-service-titre {
  margin: 0 auto;
  max-width: 11em;
  font-family: 'Bodoni Moda', var(--font-serif);
  font-weight: 500;
  font-style: normal;
  font-size: clamp(32px, 11cqw, 46px);
  line-height: 1.06;
  letter-spacing: -0.005em;
  color: #1A1A1A;
  overflow-wrap: break-word;
  text-wrap: balance;
}

.cadeau-service-ouverture {
  margin: 28px auto 0;
  max-width: 24em;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 19px;
  line-height: 1.5;
  color: #1A1A1A;
  text-wrap: balance;
}

.cadeau-service-corps {
  margin: 36px auto 0;
  max-width: 34em;
}

.cadeau-service-corps p {
  margin: 0 0 20px;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.75;
  color: #1A1A1A;
  text-wrap: pretty;
}

.cadeau-service-corps p:last-child { margin-bottom: 0; }

.cadeau-service-signature {
  margin: 44px auto 0;
  max-width: 24em;
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: #1A1A1A;
  text-wrap: balance;
}

@container cadeau-service (min-width: 641px) {
  .cadeau-service-inner { padding: 32px 40px 88px; }
  .cadeau-service-titre { max-width: 8.5em; font-size: clamp(48px, 8cqw, 60px); }
  .cadeau-service-ouverture { margin-top: 36px; font-size: 24px; }
  .cadeau-service-corps { margin-top: 44px; }
  .cadeau-service-corps p { font-size: 18px; margin-bottom: 24px; }
  .cadeau-service-signature { margin-top: 56px; font-size: 15px; }
}

@container cadeau-service (min-width: 1025px) {
  .cadeau-service-inner { padding: 40px 60px 112px; }
  .cadeau-service-titre { max-width: 8.5em; font-size: 72px; }
  .cadeau-service-ouverture { margin-top: 40px; font-size: 27px; }
  .cadeau-service-corps { margin-top: 48px; }
  .cadeau-service-corps p { font-size: 19px; }
  .cadeau-service-signature { margin-top: 64px; font-size: 16px; }
}

/* PAGE EMBALLAGE CADEAU — swiper éditorial : une seule photo visible à la fois, jamais d'aperçu des photos voisines.
   Cadre 2:3 pleine largeur du composant (téléphone), 560 px maximum sur tablette et ordinateur ; photos recadrées sans déformation (object-fit: cover).
   Aucun défilement automatique ; glisser au doigt ou à la souris, flèches visibles seulement sur ordinateur. */
.cadeau-swiper {
  container-type: inline-size;
  container-name: cadeau-swiper;
}

.cadeau-swiper-inner {
  padding: 0 14px 56px;
}

.cadeau-swiper-stage {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}

.cadeau-swiper-viewport {
  position: relative;
  overflow: hidden;
  aspect-ratio: 2 / 3;
  background: var(--color-bg-alt);
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.cadeau-swiper-viewport:active { cursor: grabbing; }

.cadeau-swiper-viewport:focus-visible {
  outline: 1px solid #1A1A1A;
  outline-offset: 4px;
}

.cadeau-swiper-track {
  display: flex;
  height: 100%;
  transform: translate3d(-100%, 0, 0);
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

.cadeau-swiper-slide {
  flex: 0 0 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

.cadeau-swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  pointer-events: none;
  -webkit-user-drag: none;
}

.cadeau-swiper-slide[data-pos="top"] img { object-position: 50% 4%; }

.cadeau-swiper-nav { display: none; }

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

@media (hover: hover) and (pointer: fine) and (min-width: 1025px) {
  .cadeau-swiper-nav {
    position: absolute;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: -22px 0 0;
    padding: 0;
    border: 1px solid #1A1A1A;
    border-radius: 50%;
    background: transparent;
    color: #1A1A1A;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
  }
  .cadeau-swiper-nav:hover,
  .cadeau-swiper-nav:focus-visible { background: #1A1A1A; color: #FFFFFF; }
  .cadeau-swiper-prev { left: -76px; }
  .cadeau-swiper-next { right: -76px; }
}

@media (prefers-reduced-motion: reduce) {
  .cadeau-swiper-track { transition: none; }
}

@container cadeau-swiper (min-width: 641px) {
  .cadeau-swiper-inner { padding: 0 40px 72px; }
}

@container cadeau-swiper (min-width: 1025px) {
  .cadeau-swiper-inner { padding: 0 60px 112px; }
}

/* PAGE EMBALLAGE CADEAU — conclusion : une seule phrase, en italique, Playfair Display (police serif du site), centrée, texte et fond habituels.
   Taille intermédiaire affirmée, deux à trois lignes ; aucun autre élément. */
.cadeau-conclusion {
  container-type: inline-size;
  container-name: cadeau-conclusion;
}

.cadeau-conclusion-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 24px 80px;
  text-align: center;
}

.cadeau-conclusion-phrase {
  margin: 0 auto;
  max-width: 17em;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 6.6cqw, 28px);
  line-height: 1.4;
  letter-spacing: 0.005em;
  color: #1A1A1A;
  overflow-wrap: break-word;
  text-wrap: balance;
}

@container cadeau-conclusion (min-width: 641px) {
  .cadeau-conclusion-inner { padding: 32px 40px 112px; }
  .cadeau-conclusion-phrase { font-size: 34px; line-height: 1.38; }
}

@container cadeau-conclusion (min-width: 1025px) {
  .cadeau-conclusion-inner { padding: 40px 60px 144px; }
  .cadeau-conclusion-phrase { font-size: 40px; line-height: 1.36; }
}

/* PAGES « À PROPOS DE LA MAISON » (Qui sommes-nous ?, Notre histoire, Notre univers de mode, La liberté de s’habiller) — pages vides pour l’instant :
   même principe que les autres pages ; le pied de page reste en bas de l’écran. Aucun contenu, aucune image. */
.page-apropos {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}

.page-apropos main {
  flex: 1 0 auto;
}

/* PAGE QUI SOMMES-NOUS ? — photographie seule, sans recadrage (proportions 736 / 917 conservées, image entière visible).
   Même principe de conteneur que les autres pages : téléphone ≤ 640, tablette 641–1024, ordinateur ≥ 1025. */
.apropos-photo {
  container-type: inline-size;
  container-name: apropos-photo;
}

.apropos-photo-inner {
  padding: 20px 14px 32px;
}

.apropos-photo-frame {
  margin: 0 auto;
  width: 100%;
  max-width: 560px;
}

.apropos-photo-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 736 / 917;
}

@container apropos-photo (min-width: 641px) {
  .apropos-photo-inner { padding: 40px 40px 56px; }
  .apropos-photo-frame { max-width: 600px; }
}

@container apropos-photo (min-width: 1025px) {
  .apropos-photo-inner { padding: 48px 60px 64px; }
  .apropos-photo-frame { max-width: 640px; }
}

/* PAGE QUI SOMMES-NOUS ? — « L’âme de la maison » : titre principal, puis cinq parties avec intertitres en Playfair Display italique gras (taille modérée,
   légèrement au-dessus du texte courant). Texte courant en Playfair Display droit, couleur et fond habituels du site.
   Téléphone (≤ 640 px) : une seule colonne, photo puis titre puis parties.
   Tablette et ordinateur (≥ 721 px) : composition « couverture décalée » — grand titre, partie 1 à gauche calée sur le bas de la photo (à droite),
   puis parties 2 à 5 en escalier sur deux colonnes décalées en hauteur. */
#apropos-root {
  container-type: inline-size;
  container-name: apropos;
}

.apropos-titre {
  width: calc(100% - 40px);
  max-width: 11em;
  margin: 16px auto 40px;
  text-align: center;
  font-family: 'Bodoni Moda', var(--font-serif);
  font-weight: 500;
  font-style: normal;
  font-size: clamp(32px, 10.5cqw, 44px);
  line-height: 1.08;
  letter-spacing: -0.005em;
  color: #1A1A1A;
  text-wrap: balance;
}

/* Titre : « âme » en italique de même graisse et de même corps (association romain / italique, façon titre de magazine). */
.apropos-titre-it { font-style: italic; }

.apropos-partie {
  width: min(calc(100% - 40px), 640px);
  margin: 44px auto 0;
}

.apropos-partie--1 { margin-top: 0; }
.apropos-partie:last-child { margin-bottom: 72px; }


.apropos-intertitre {
  margin: 0 0 16px;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  font-size: 21px;
  line-height: 1.3;
  letter-spacing: 0.005em;
  color: #1A1A1A;
  text-wrap: balance;
}

.apropos-partie p {
  margin: 0 0 18px;
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.75;
  color: #1A1A1A;
  text-wrap: pretty;
}

.apropos-partie p:last-child { margin-bottom: 0; }

/* Photographie de la fondatrice : placée après la dernière partie, image entière (proportions 736 / 920). */
.apropos-fondatrice {
  width: min(calc(100% - 28px), 560px);
  margin: 56px auto 0;
}
.apropos-fondatrice-frame { margin: 0; }
.apropos-fondatrice-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 736 / 920;
}

/* Présentation de la fondatrice : titre et texte, sous la photo sur téléphone, à gauche de la photo sur tablette et ordinateur. */
.apropos-partie--6 { margin-top: 40px; }
.apropos-partie--6 .apropos-intertitre { font-size: 24px; margin-bottom: 18px; }

/* Petite tablette (641–720 px) : une seule colonne, comme avant — les deux colonnes ne tiennent pas avec une typographie lisible. */
@media (min-width: 641px) and (max-width: 720px) {
  .apropos-titre { width: calc(100% - 80px); max-width: 9em; margin: 24px auto 56px; font-size: clamp(44px, 7.5cqw, 56px); }
  .apropos-partie { width: min(calc(100% - 80px), 640px); margin-top: 56px; }
  .apropos-partie--1 { margin-top: 0; }
  .apropos-fondatrice { width: min(calc(100% - 80px), 600px); margin: 72px auto 0; }
  .apropos-partie--6 { margin-top: 48px; }
  .apropos-partie--6:last-child { margin-bottom: 96px; }
  .apropos-intertitre { font-size: 23px; margin-bottom: 18px; }
  .apropos-partie p { font-size: 17px; margin-bottom: 18px; }
  .apropos-partie p:last-child { margin-bottom: 0; }
}

/* Tablette et ordinateur (≥ 721 px) : composition « couverture décalée ». Colonne gauche = texte, colonne droite = photo entière (proportions d’origine). */
@media (min-width: 721px) {
  #apropos-root {
    display: grid;
    grid-template-columns: minmax(28px, 1fr) minmax(0, 290px) 36px minmax(0, 360px) minmax(28px, 1fr);
    align-items: start;
    padding: 44px 0 128px;
  }

  #apropos-root .apropos-titre {
    grid-column: 2 / 5; grid-row: 1;
    width: auto; max-width: none;
    margin: 0 0 48px;
    text-align: left;
    font-size: 64px;
    line-height: 1.06;
    letter-spacing: -0.01em;
  }

  #apropos-root .apropos-photo { grid-column: 4; grid-row: 2; }
  #apropos-root .apropos-photo-inner { padding: 0; }
  #apropos-root .apropos-photo-frame { max-width: none; }

  #apropos-root .apropos-partie { width: auto; max-width: none; }
  #apropos-root .apropos-partie--1 { grid-column: 2; grid-row: 2; align-self: end; margin: 0; }
  #apropos-root .apropos-partie--2 { grid-column: 2; grid-row: 3; margin: 72px 0 0; }
  #apropos-root .apropos-partie--3 { grid-column: 4; grid-row: 3; margin: 144px 0 0; }
  #apropos-root .apropos-partie--4 { grid-column: 2; grid-row: 4; margin: 72px 0 0; }
  #apropos-root .apropos-partie--5 { grid-column: 4; grid-row: 4; margin: 144px 0 0; }

  #apropos-root .apropos-intertitre { font-size: 20px; margin-bottom: 14px; }
  #apropos-root .apropos-partie p { font-size: 15px; line-height: 1.6; margin-bottom: 12px; }
  #apropos-root .apropos-partie p:last-child { margin-bottom: 0; }

  #apropos-root .apropos-fondatrice { grid-column: 4; grid-row: 5; width: auto; margin: 112px 0 0; }
  #apropos-root .apropos-partie--6 { grid-column: 2; grid-row: 5; align-self: center; margin: 112px 0 0; }
  #apropos-root .apropos-partie--6 .apropos-intertitre { font-size: 24px; margin-bottom: 18px; }
}

@media (min-width: 1025px) {
  #apropos-root {
    grid-template-columns: minmax(40px, 1fr) minmax(0, 440px) 64px minmax(0, 640px) minmax(40px, 1fr);
    padding: 56px 0 160px;
  }
  #apropos-root .apropos-titre { font-size: 112px; margin-bottom: 64px; }
  #apropos-root .apropos-partie--2 { margin-top: 112px; }
  #apropos-root .apropos-partie--3 { margin-top: 232px; max-width: 520px; }
  #apropos-root .apropos-partie--4 { margin-top: 112px; }
  #apropos-root .apropos-partie--5 { margin-top: 232px; max-width: 520px; }
  #apropos-root .apropos-intertitre { font-size: 25px; margin-bottom: 18px; }
  #apropos-root .apropos-partie p { font-size: 17px; line-height: 1.7; margin-bottom: 16px; }
  #apropos-root .apropos-partie p:last-child { margin-bottom: 0; }
  #apropos-root .apropos-fondatrice { margin-top: 160px; }
  #apropos-root .apropos-partie--6 { margin-top: 160px; }
  #apropos-root .apropos-partie--6 .apropos-intertitre { font-size: 30px; margin-bottom: 22px; }
  #apropos-root .apropos-partie--6 p { font-size: 17px; line-height: 1.8; margin-bottom: 20px; }
  #apropos-root .apropos-partie--6 p:last-child { margin-bottom: 0; }
}

@media (min-width: 1280px) {
  #apropos-root .apropos-partie--6 .apropos-intertitre { font-size: 34px; margin-bottom: 24px; }
  #apropos-root .apropos-partie--6 p { font-size: 18px; line-height: 1.85; margin-bottom: 22px; }
}

/* PAGE NOTRE HISTOIRE — « Là où les influences se rencontrent » : composition éditoriale asymétrique (proposition C).
   Étape 2 : les cinq photographies (.histoire-photo--1 à --5, dans l’ordre : principale, influences maghrébines, influences européennes,
   matières et savoir-faire, complémentaire) occupent les emplacements réservés ; images en object-fit: cover, cadrage réglé par object-position.
   Téléphone (≤ 640 px) : une colonne avec décalages. Tablette (641–1024 px) et ordinateur (≥ 1025 px) : grille à 12 colonnes, blocs décalés et cartes de texte
   posées sur les coins des photographies. Fond et couleur de texte : ceux du site. */
#histoire-root { padding: 32px 0 96px; }
#histoire-root p {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.75;
  color: #1A1A1A;
  text-wrap: pretty;
}
.histoire-titre {
  margin: 0;
  padding: 0 20px;
  font-family: 'Bodoni Moda', var(--font-serif);
  font-weight: 500;
  font-style: normal;
  font-size: 40px;
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: #1A1A1A;
  text-wrap: balance;
}
#histoire-root .histoire-soustitre { margin: 16px 20px 0; font-style: italic; font-size: 18px; line-height: 1.5; }
.histoire-photo { display: block; overflow: hidden; }
.histoire-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.histoire-photo--1 img { object-position: 50% 30%; }
.histoire-photo--2 img { object-position: 50% 28%; }
.histoire-photo--3 img { object-position: 50% 48%; }
.histoire-photo--4 img { object-position: 50% 85%; }
.histoire-photo--5 img { object-position: 50% 40%; }
.histoire-carte { position: relative; z-index: 3; background: var(--color-bg, #F5F1EC); }
.histoire-photo--1 { width: 100%; aspect-ratio: 4 / 5; margin-top: 32px; }
.histoire-intro { width: calc(100% - 40px); margin: -52px 0 0 20px; padding: 26px 24px; }
#histoire-root .histoire-intro p { font-size: 20px; line-height: 1.5; font-style: italic; }
.histoire-photo--2 { width: 70%; aspect-ratio: 3 / 4; margin: 64px 0 0 auto; }
.histoire-photo--4 { position: relative; z-index: 2; width: 44%; aspect-ratio: 1; margin: -84px 0 0 20px; border: 8px solid var(--color-bg, #F5F1EC); }
#histoire-root .histoire-texte--2 { margin: 28px 20px 0; }
.histoire-photo--3 { width: 88%; aspect-ratio: 4 / 3; margin: 64px 0 0; }
.histoire-duo { width: calc(100% - 44px); margin: -44px 0 0 auto; padding: 26px 22px 0; }
#histoire-root .histoire-duo p + p { margin-top: 14px; }
.histoire-photo--5 { width: 80%; aspect-ratio: 3 / 4; margin: 64px 0 0 auto; }
.histoire-cloture { width: calc(100% - 40px); margin: -44px 0 0 20px; padding: 26px 24px 0; }
#histoire-root .histoire-cloture p { font-size: 21px; line-height: 1.5; font-style: italic; }

/* Petite tablette (641–720 px) : composition téléphone, centrée dans une colonne plus étroite. */
@media (min-width: 641px) and (max-width: 720px) {
  #histoire-root .histoire-bloc { max-width: 560px; margin-left: auto; margin-right: auto; }
}

/* Tablette (≥ 721 px) */
@media (min-width: 721px) {
  #histoire-root { padding: 44px 0 120px; }
  #histoire-root .histoire-bloc {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 16px;
    align-items: start;
    width: min(704px, calc(100% - 64px));
    margin: 0 auto;
  }
  #histoire-root .histoire-bloc--2 { margin-top: 152px; }
  #histoire-root .histoire-bloc--3 { margin-top: 96px; }
  #histoire-root .histoire-bloc--4 { margin-top: 96px; }

  .histoire-titre { grid-column: 1 / -1; grid-row: 1; padding: 0; font-size: 66px; line-height: 1; }
  #histoire-root .histoire-soustitre { grid-column: 1 / 9; grid-row: 2; margin: 16px 0 0; font-size: 20px; }
  .histoire-photo--1 { grid-column: 1 / 9; grid-row: 3; width: auto; margin: 32px 0 0; aspect-ratio: 4 / 5; }
  .histoire-intro { grid-column: 6 / 13; grid-row: 3; align-self: end; width: auto; margin: 0 0 -84px; padding: 30px 30px 0; }
  #histoire-root .histoire-intro p { font-size: 22px; }

  .histoire-photo--2 { grid-column: 1 / 8; grid-row: 1 / 3; width: auto; margin: 0; aspect-ratio: 3 / 4; }
  #histoire-root .histoire-texte--2 { grid-column: 8 / 13; grid-row: 1; margin: 40px 0 0 8px; font-size: 15px; line-height: 1.6; }
  .histoire-photo--4 { grid-column: 6 / 10; grid-row: 2; width: auto; margin: 0; align-self: end; }
  .histoire-photo--3 { grid-column: 1 / 8; grid-row: 1; width: auto; margin: 0; aspect-ratio: 5 / 4; }
  .histoire-duo { grid-column: 6 / 13; grid-row: 1; width: auto; margin: 200px 0 0; padding: 30px 0 0 30px; }
  #histoire-root .histoire-duo p { font-size: 15px; line-height: 1.6; }
  .histoire-photo--5 { grid-column: 3 / 10; grid-row: 1; width: auto; margin: 0; aspect-ratio: 3 / 4; }
  .histoire-cloture { grid-column: 5 / 13; grid-row: 2; width: auto; margin: -64px 0 0; padding: 30px 30px 0; }
  #histoire-root .histoire-cloture p { font-size: 24px; }
}

/* Ordinateur (≥ 1025 px) */
@media (min-width: 1025px) {
  #histoire-root { padding: 64px 0 180px; }
  #histoire-root .histoire-bloc { column-gap: 16px; width: min(1280px, calc(100% - 80px)); }
  #histoire-root .histoire-bloc--2 { margin-top: 220px; }
  #histoire-root .histoire-bloc--3 { margin-top: 130px; }
  #histoire-root .histoire-bloc--4 { margin-top: 130px; }

  .histoire-titre { grid-column: 1 / 12; font-size: 104px; }
  #histoire-root .histoire-soustitre { grid-column: 1 / 7; margin: 28px 0 0; font-size: 26px; }
  .histoire-photo--1 { grid-column: 1 / 7; margin-top: 44px; }
  .histoire-intro { grid-column: 6 / 12; margin: 0 0 -110px; padding: 46px 0 0 46px; }
  #histoire-root .histoire-intro p { font-size: 27px; }

  #histoire-root .histoire-texte--2 { grid-column: 1 / 5; margin: 90px 0 0; font-size: 18px; line-height: 1.75; }
  .histoire-photo--2 { grid-column: 8 / 13; }
  .histoire-photo--4 { grid-column: 5 / 8; margin: 380px 0 0; border-width: 10px; align-self: start; }
  .histoire-photo--3 { grid-column: 1 / 8; }
  .histoire-duo { grid-column: 7 / 13; margin: 90px 0 0; padding: 46px 0 0 46px; }
  #histoire-root .histoire-duo p { font-size: 18px; line-height: 1.75; }
  #histoire-root .histoire-duo p + p { margin-top: 18px; }
  .histoire-photo--5 { grid-column: 8 / 13; }
  .histoire-cloture { grid-column: 2 / 9; grid-row: 1; align-self: end; margin: 0 0 70px; padding: 50px 50px 0 0; }
  #histoire-root .histoire-cloture p { font-size: 33px; line-height: 1.42; }
}

/* PAGE NOTRE UNIVERS DE MODE — « Un univers de mode, mille façons de le vivre » : composition éditoriale asymétrique (proposition A).
   Les deux photographies occupent les emplacements (.univers-photo--1 : grande photographie ; --2 : photographie plus petite, décalée) ;
   images en object-fit: cover, cadrage réglé par object-position. Téléphone (≤ 640 px) : une colonne avec décalages.
   Tablette (≥ 721 px) et ordinateur (≥ 1025 px) : grille à 12 colonnes. Fond et couleur de texte : ceux du site. */
#univers-root { padding: 28px 0 80px; }
#univers-root p { margin: 0; font-family: var(--font-serif); font-size: 16px; line-height: 1.75; color: #1A1A1A; text-wrap: pretty; }
.univers-titre {
  margin: 0;
  padding: 0 20px;
  font-family: 'Bodoni Moda', var(--font-serif);
  font-weight: 500;
  font-style: normal;
  font-size: 40px;
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: #1A1A1A;
  text-wrap: balance;
}
.univers-titre-suite { display: block; }
.univers-photo { display: block; overflow: hidden; }
.univers-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.univers-photo--1 img { object-position: 50% 50%; }
.univers-photo--2 img { object-position: 50% 35%; }
.univers-photo--1 { width: 80%; aspect-ratio: 3 / 4; margin: 32px 0 0 auto; }
#univers-root .univers-intro { margin: 28px 20px 0; font-size: 21px; line-height: 1.5; font-style: italic; }
#univers-root .univers-texte--2 { margin: 24px 20px 0 56px; }
.univers-photo--2 { width: 68%; aspect-ratio: 3 / 4; margin: 56px 0 0; }
#univers-root .univers-texte--3 { margin: 32px 20px 0 56px; }
#univers-root .univers-cloture { margin: 36px 20px 0; font-size: 21px; line-height: 1.5; font-style: italic; }

/* Petite tablette (641–720 px) : composition téléphone, centrée dans une colonne plus étroite. */
@media (min-width: 641px) and (max-width: 720px) {
  #univers-root .univers-bloc { max-width: 560px; margin-left: auto; margin-right: auto; }
}

/* Tablette (≥ 721 px) */
@media (min-width: 721px) {
  #univers-root { padding: 48px 0 110px; }
  #univers-root .univers-bloc {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 16px;
    align-items: start;
    width: min(704px, calc(100% - 64px));
    margin: 0 auto;
  }
  .univers-titre { grid-column: 1 / 11; grid-row: 1; padding: 0; font-size: 64px; line-height: 1; }
  .univers-photo--1 { grid-column: 7 / 13; grid-row: 2 / 4; width: auto; margin: 48px 0 0; }
  #univers-root .univers-intro { grid-column: 1 / 7; grid-row: 2; margin: 60px 24px 0 0; font-size: 23px; }
  #univers-root .univers-texte--2 { grid-column: 1 / 7; grid-row: 3; margin: 24px 24px 0 0; font-size: 15px; line-height: 1.7; }
  .univers-photo--2 { grid-column: 1 / 6; grid-row: 4 / 6; width: auto; margin: 80px 0 0; }
  #univers-root .univers-texte--3 { grid-column: 7 / 13; grid-row: 4; margin: 120px 0 0 12px; font-size: 15px; line-height: 1.7; }
  #univers-root .univers-cloture { grid-column: 7 / 13; grid-row: 5; margin: 32px 0 0 12px; font-size: 24px; }
}

/* Ordinateur (≥ 1025 px) */
@media (min-width: 1025px) {
  #univers-root { padding: 72px 0 170px; }
  #univers-root .univers-bloc { column-gap: 24px; width: min(1240px, calc(100% - 80px)); }
  .univers-titre { grid-column: 1 / 7; font-size: 84px; margin-top: 20px; }
  .univers-photo--1 { grid-column: 7 / 13; grid-row: 1 / 4; margin: 0; }
  #univers-root .univers-intro { grid-column: 1 / 7; margin: 44px 0 0; font-size: 30px; line-height: 1.45; }
  #univers-root .univers-texte--2 { grid-column: 2 / 7; margin: 36px 0 0; font-size: 18px; line-height: 1.75; }
  .univers-photo--2 { grid-column: 2 / 6; margin: 130px 0 0; }
  #univers-root .univers-texte--3 { grid-column: 7 / 12; margin: 230px 0 0; font-size: 18px; line-height: 1.75; }
  #univers-root .univers-cloture { grid-column: 7 / 13; margin: 48px 0 0; font-size: 34px; line-height: 1.4; }
}

/* PAGE « LA LIBERTÉ DE S’HABILLER » — composition éditoriale « titre vertical et collage » (proposition A).
   Le grand titre se dresse à la verticale et se lit de bas en haut ; deux photographies se recouvrent légèrement (la seconde, plus petite, est décalée plus bas
   et bordée du fond du site) ; le texte vient en dessous et la phrase finale conclut la page. Téléphone (≤ 640 px) : une colonne à côté du titre.
   Tablette (≥ 721 px) et ordinateur (≥ 1025 px) : grille à 12 colonnes. Fond et couleur de texte : ceux du site. */
#liberte-root {
  padding: 36px 20px 90px;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  column-gap: 14px;
  align-items: start;
}
#liberte-root p { margin: 0; font-family: var(--font-serif); font-size: 16px; line-height: 1.75; color: #1A1A1A; text-wrap: pretty; }
.liberte-titre {
  grid-column: 1;
  grid-row: 1 / 5;
  justify-self: start;
  margin: 0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  font-family: 'Bodoni Moda', var(--font-serif);
  font-weight: 500;
  font-size: 42px;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: #1A1A1A;
}
.liberte-titre-it { font-style: italic; font-weight: 400; }
.liberte-photo { overflow: hidden; background: #D9CBB8; }
.liberte-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.liberte-photo--1 { grid-column: 2; grid-row: 1; aspect-ratio: 4 / 5; }
.liberte-photo--2 {
  grid-column: 2;
  grid-row: 2;
  position: relative;
  z-index: 1;
  width: 66%;
  margin: -64px 0 0 auto;
  aspect-ratio: 4 / 5;
  border: 8px solid var(--color-bg, #F5F1EC);
  box-sizing: border-box;
}
.liberte-texte { grid-column: 2; grid-row: 3; margin-top: 36px; }
#liberte-root .liberte-texte p + p { margin-top: 18px; }
#liberte-root .liberte-cloture { grid-column: 2; grid-row: 4; margin-top: 40px; font-size: 26px; line-height: 1.4; font-style: italic; }

/* Petite tablette (641–720 px) : composition téléphone, centrée dans une colonne plus étroite. */
@media (min-width: 641px) and (max-width: 720px) {
  #liberte-root { max-width: 600px; margin-left: auto; margin-right: auto; }
}

/* Tablette (≥ 721 px) */
@media (min-width: 721px) {
  #liberte-root {
    width: min(704px, calc(100% - 64px));
    margin: 0 auto;
    padding: 64px 0 120px;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 16px;
  }
  .liberte-titre { grid-column: 1 / 4; grid-row: 1 / 5; font-size: 82px; line-height: 1; }
  .liberte-photo--1 { grid-column: 4 / 11; grid-row: 1; }
  .liberte-photo--2 { grid-column: 8 / 13; grid-row: 2; width: auto; margin: -110px 0 0; border-width: 10px; }
  .liberte-texte { grid-column: 4 / 13; grid-row: 3; margin-top: 56px; column-count: 2; column-gap: 32px; }
  #liberte-root .liberte-texte p { font-size: 15px; line-height: 1.7; break-inside: avoid-column; }
  #liberte-root .liberte-cloture { grid-column: 4 / 13; margin-top: 48px; font-size: 30px; }
}

/* Ordinateur (≥ 1025 px) */
@media (min-width: 1025px) {
  #liberte-root { width: min(1240px, calc(100% - 80px)); padding: 100px 0 170px; column-gap: 24px; }
  .liberte-titre { font-size: 112px; }
  .liberte-photo--1 { grid-column: 4 / 9; grid-row: 1 / 3; }
  .liberte-photo--2 { grid-column: 8 / 12; margin-top: 140px; border-width: 12px; }
  .liberte-texte { margin-top: 90px; column-gap: 56px; }
  #liberte-root .liberte-texte p { font-size: 17px; line-height: 1.75; }
  #liberte-root .liberte-cloture { grid-column: 4 / 12; margin-top: 72px; font-size: 42px; line-height: 1.35; }
}

/* PAGE MENTIONS LÉGALES — mise en page éditoriale : titre, introduction, puis six rubriques numérotées toutes visibles (aucun accordéon, aucun contenu masqué).
   Séparations par de fines lignes ; aucune photographie. Téléphone (≤ 640 px) : une colonne ; tablette (≥ 721 px) et ordinateur (≥ 1025 px) : numéro et titre à gauche, texte à droite. */
#mentions-root { padding: 40px 20px 96px; }
#mentions-root p { margin: 0; font-family: var(--font-serif); font-size: 16px; line-height: 1.75; color: #1A1A1A; text-wrap: pretty; }
.mentions-titre { margin: 0; font-family: 'Bodoni Moda', var(--font-serif); font-weight: 500; font-size: 40px; line-height: 1.06; letter-spacing: -0.012em; color: #1A1A1A; text-wrap: balance; }
.mentions-titre-it { font-style: italic; font-weight: 400; }
#mentions-root .mentions-intro { margin-top: 22px; font-size: 21px; line-height: 1.5; font-style: italic; max-width: 30ch; }
.mentions-rubrique { margin-top: 44px; padding-top: 28px; border-top: 1px solid rgba(26, 26, 26, 0.2); }
.mentions-tete + .mentions-rubrique { margin-top: 56px; }
.mentions-entete { display: block; }
.mentions-num { display: block; font-family: 'Bodoni Moda', var(--font-serif); font-style: italic; font-weight: 400; font-size: 44px; line-height: 1; color: #1A1A1A; }
.mentions-h2 { margin: 10px 0 0; font-family: var(--font-serif); font-weight: 500; font-size: 26px; line-height: 1.2; letter-spacing: -0.005em; color: #1A1A1A; text-wrap: balance; }
.mentions-corps { margin-top: 24px; }
#mentions-root .mentions-corps p + p { margin-top: 16px; }
.mentions-h3 { margin: 40px 0 14px; font-family: 'Bodoni Moda', var(--font-serif); font-style: italic; font-weight: 400; font-size: 22px; line-height: 1.25; color: #1A1A1A; }
.mentions-h3:first-child { margin-top: 0; }
.mentions-liste { margin: 0; padding: 0; }
#mentions-root p + .mentions-liste { margin-top: 18px; }
.mentions-liste > div { padding: 13px 0; border-bottom: 1px solid rgba(26, 26, 26, 0.12); }
.mentions-liste > div:first-child { border-top: 1px solid rgba(26, 26, 26, 0.12); }
.mentions-liste dt { margin: 0 0 4px; font-family: 'Montserrat', sans-serif; font-weight: 500; font-size: 10.5px; line-height: 1.5; letter-spacing: 0.14em; text-transform: uppercase; color: #1A1A1A; opacity: 0.62; }
.mentions-liste dd { margin: 0; font-family: var(--font-serif); font-size: 17px; line-height: 1.5; color: #1A1A1A; overflow-wrap: anywhere; }
.mentions-liste dd a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(26, 26, 26, 0.4); }
.mentions-liste dd.mentions-attente { font-style: italic; opacity: 0.55; }

@media (min-width: 641px) and (max-width: 720px) {
  #mentions-root { max-width: 600px; margin-left: auto; margin-right: auto; }
}

@media (min-width: 721px) {
  #mentions-root { width: min(704px, calc(100% - 64px)); margin: 0 auto; padding: 72px 0 130px; }
  .mentions-titre { font-size: 64px; }
  #mentions-root .mentions-intro { margin-top: 28px; font-size: 23px; max-width: 34ch; }
  .mentions-rubrique { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 16px; margin-top: 56px; padding-top: 36px; }
  .mentions-tete + .mentions-rubrique { margin-top: 84px; }
  .mentions-entete { grid-column: 1 / 5; }
  .mentions-corps { grid-column: 5 / 13; margin-top: 4px; }
  .mentions-num { font-size: 52px; }
  .mentions-h2 { font-size: 22px; margin-top: 12px; }
  .mentions-liste > div { display: grid; grid-template-columns: 38% 1fr; column-gap: 16px; align-items: baseline; }
  .mentions-liste dt { margin: 0; }
}

@media (min-width: 1025px) {
  #mentions-root { width: min(1240px, calc(100% - 80px)); padding: 100px 0 170px; }
  .mentions-titre { font-size: 96px; line-height: 1.02; }
  #mentions-root .mentions-intro { margin-top: 36px; font-size: 30px; max-width: 30ch; }
  .mentions-rubrique { column-gap: 24px; margin-top: 76px; padding-top: 44px; }
  .mentions-tete + .mentions-rubrique { margin-top: 120px; }
  .mentions-entete { grid-column: 1 / 5; }
  .mentions-corps { grid-column: 5 / 11; }
  .mentions-num { font-size: 68px; }
  .mentions-h2 { font-size: 28px; margin-top: 16px; max-width: 14ch; }
  #mentions-root p { font-size: 17px; line-height: 1.8; }
  .mentions-h3 { font-size: 25px; }
  .mentions-liste dd { font-size: 18px; }
}

/* PAGE CONDITIONS GÉNÉRALES DE VENTE — mise en page éditoriale : titre, introduction, puis dix rubriques numérotées toutes visibles (aucun accordéon, aucun contenu masqué).
   Séparations par de fines lignes ; aucune photographie. Téléphone (≤ 640 px) : une colonne ; tablette (≥ 721 px) et ordinateur (≥ 1025 px) : numéro et titre à gauche, texte à droite. */
#cgv-root { padding: 40px 20px 96px; }
#cgv-root p { margin: 0; font-family: var(--font-serif); font-size: 16px; line-height: 1.75; color: #1A1A1A; text-wrap: pretty; }
.cgv-titre { margin: 0; font-family: 'Bodoni Moda', var(--font-serif); font-weight: 500; font-size: 40px; line-height: 1.06; letter-spacing: -0.012em; color: #1A1A1A; text-wrap: balance; }
.cgv-titre-it { font-style: italic; font-weight: 400; }
#cgv-root .cgv-intro { margin-top: 22px; font-size: 21px; line-height: 1.5; font-style: italic; max-width: 30ch; }
.cgv-rubrique { margin-top: 44px; padding-top: 28px; border-top: 1px solid rgba(26, 26, 26, 0.2); }
.cgv-tete + .cgv-rubrique { margin-top: 56px; }
.cgv-entete { display: block; }
.cgv-num { display: block; font-family: 'Bodoni Moda', var(--font-serif); font-style: italic; font-weight: 400; font-size: 44px; line-height: 1; color: #1A1A1A; }
.cgv-h2 { margin: 10px 0 0; font-family: var(--font-serif); font-weight: 500; font-size: 26px; line-height: 1.2; letter-spacing: -0.005em; color: #1A1A1A; text-wrap: balance; }
.cgv-corps { margin-top: 24px; }
#cgv-root .cgv-corps p + p { margin-top: 16px; }
.cgv-h3 { margin: 40px 0 14px; font-family: 'Bodoni Moda', var(--font-serif); font-style: italic; font-weight: 400; font-size: 22px; line-height: 1.25; color: #1A1A1A; }
.cgv-h3:first-child { margin-top: 0; }
.cgv-liste { margin: 0; padding: 0; }
#cgv-root p + .cgv-liste { margin-top: 18px; }
.cgv-liste > div { padding: 13px 0; border-bottom: 1px solid rgba(26, 26, 26, 0.12); }
.cgv-liste > div:first-child { border-top: 1px solid rgba(26, 26, 26, 0.12); }
.cgv-liste dt { margin: 0 0 4px; font-family: 'Montserrat', sans-serif; font-weight: 500; font-size: 10.5px; line-height: 1.5; letter-spacing: 0.14em; text-transform: uppercase; color: #1A1A1A; opacity: 0.62; }
.cgv-liste dd { margin: 0; font-family: var(--font-serif); font-size: 17px; line-height: 1.5; color: #1A1A1A; overflow-wrap: anywhere; }
.cgv-liste dd a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(26, 26, 26, 0.4); }
.cgv-liste dd.cgv-attente-val { font-style: italic; opacity: 0.55; }

@media (min-width: 641px) and (max-width: 720px) {
  #cgv-root { max-width: 600px; margin-left: auto; margin-right: auto; }
}

@media (min-width: 721px) {
  #cgv-root { width: min(704px, calc(100% - 64px)); margin: 0 auto; padding: 72px 0 130px; }
  .cgv-titre { font-size: 64px; }
  #cgv-root .cgv-intro { margin-top: 28px; font-size: 23px; max-width: 34ch; }
  .cgv-rubrique { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 16px; margin-top: 56px; padding-top: 36px; }
  .cgv-tete + .cgv-rubrique { margin-top: 84px; }
  .cgv-entete { grid-column: 1 / 5; }
  .cgv-corps { grid-column: 5 / 13; margin-top: 4px; }
  .cgv-num { font-size: 52px; }
  .cgv-h2 { font-size: 22px; margin-top: 12px; }
  .cgv-liste > div { display: grid; grid-template-columns: 38% 1fr; column-gap: 16px; align-items: baseline; }
  .cgv-liste dt { margin: 0; }
}

@media (min-width: 1025px) {
  #cgv-root { width: min(1240px, calc(100% - 80px)); padding: 100px 0 170px; }
  .cgv-titre { font-size: 96px; line-height: 1.02; }
  #cgv-root .cgv-intro { margin-top: 36px; font-size: 30px; max-width: 30ch; }
  .cgv-rubrique { column-gap: 24px; margin-top: 76px; padding-top: 44px; }
  .cgv-tete + .cgv-rubrique { margin-top: 120px; }
  .cgv-entete { grid-column: 1 / 5; }
  .cgv-corps { grid-column: 5 / 11; }
  .cgv-num { font-size: 68px; }
  .cgv-h2 { font-size: 28px; margin-top: 16px; max-width: 14ch; }
  #cgv-root p { font-size: 17px; line-height: 1.8; }
  .cgv-h3 { font-size: 25px; }
  .cgv-liste dd { font-size: 18px; }
}

/* Listes, étapes numérotées, liens dans le texte et informations à confirmer */
#cgv-root p + ul, #cgv-root p + ol { margin-top: 14px; }
#cgv-root ul + p, #cgv-root ol + p, #cgv-root .cgv-liste + p { margin-top: 16px; }
.cgv-corps ul, .cgv-corps ol { margin: 0; padding: 0; list-style: none; }
.cgv-corps ol { counter-reset: cgv-etape; }
.cgv-corps li { position: relative; padding-left: 26px; font-family: var(--font-serif); font-size: 16px; line-height: 1.7; color: #1A1A1A; text-wrap: pretty; }
.cgv-corps li + li { margin-top: 8px; }
.cgv-corps ul li::before { content: "—"; position: absolute; left: 0; opacity: 0.5; }
.cgv-corps ol li { padding-left: 34px; counter-increment: cgv-etape; }
.cgv-corps ol li::before { content: counter(cgv-etape); position: absolute; left: 0; top: -1px; font-family: 'Bodoni Moda', var(--font-serif); font-style: italic; font-size: 19px; line-height: 1.5; opacity: 0.7; }
.cgv-corps p a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(26, 26, 26, 0.4); }
#cgv-root p.cgv-attente { margin-top: 20px; padding-left: 14px; border-left: 1px solid rgba(26, 26, 26, 0.35); font-size: 14.5px; line-height: 1.6; font-style: italic; opacity: 0.62; }
#cgv-root .cgv-h3 + .cgv-liste { margin-top: 0; }
@media (min-width: 1025px) { .cgv-corps li { font-size: 17px; line-height: 1.75; } #cgv-root p.cgv-attente { font-size: 15px; } }

/* PAGE CONFIDENTIALITÉ — mise en page éditoriale : titre, introduction, puis douze rubriques numérotées toutes visibles (aucun accordéon, aucun contenu masqué).
   Séparations par de fines lignes ; aucune photographie. Téléphone (≤ 640 px) : une colonne ; tablette (≥ 721 px) et ordinateur (≥ 1025 px) : numéro et titre à gauche, texte à droite. */
#conf-root { padding: 40px 20px 96px; }
#conf-root p { margin: 0; font-family: var(--font-serif); font-size: 16px; line-height: 1.75; color: #1A1A1A; text-wrap: pretty; }
.conf-titre { margin: 0; font-family: 'Bodoni Moda', var(--font-serif); font-weight: 500; font-size: 40px; line-height: 1.06; letter-spacing: -0.012em; color: #1A1A1A; text-wrap: balance; }
.conf-titre-it { font-style: italic; font-weight: 400; }
#conf-root .conf-intro { margin-top: 22px; font-size: 21px; line-height: 1.5; font-style: italic; max-width: 30ch; }
.conf-rubrique { margin-top: 44px; padding-top: 28px; border-top: 1px solid rgba(26, 26, 26, 0.2); }
.conf-tete + .conf-rubrique { margin-top: 56px; }
.conf-entete { display: block; }
.conf-num { display: block; font-family: 'Bodoni Moda', var(--font-serif); font-style: italic; font-weight: 400; font-size: 44px; line-height: 1; color: #1A1A1A; }
.conf-h2 { margin: 10px 0 0; font-family: var(--font-serif); font-weight: 500; font-size: 26px; line-height: 1.2; letter-spacing: -0.005em; color: #1A1A1A; text-wrap: balance; }
.conf-corps { margin-top: 24px; }
#conf-root .conf-corps p + p { margin-top: 16px; }
.conf-h3 { margin: 40px 0 14px; font-family: 'Bodoni Moda', var(--font-serif); font-style: italic; font-weight: 400; font-size: 22px; line-height: 1.25; color: #1A1A1A; }
.conf-h3:first-child { margin-top: 0; }
.conf-liste { margin: 0; padding: 0; }
#conf-root p + .conf-liste { margin-top: 18px; }
.conf-liste > div { padding: 13px 0; border-bottom: 1px solid rgba(26, 26, 26, 0.12); }
.conf-liste > div:first-child { border-top: 1px solid rgba(26, 26, 26, 0.12); }
.conf-liste dt { margin: 0 0 4px; font-family: 'Montserrat', sans-serif; font-weight: 500; font-size: 10.5px; line-height: 1.5; letter-spacing: 0.14em; text-transform: uppercase; color: #1A1A1A; opacity: 0.62; }
.conf-liste dd { margin: 0; font-family: var(--font-serif); font-size: 17px; line-height: 1.5; color: #1A1A1A; overflow-wrap: anywhere; }
.conf-liste dd a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(26, 26, 26, 0.4); }

@media (min-width: 641px) and (max-width: 720px) {
  #conf-root { max-width: 600px; margin-left: auto; margin-right: auto; }
}

@media (min-width: 721px) {
  #conf-root { width: min(704px, calc(100% - 64px)); margin: 0 auto; padding: 72px 0 130px; }
  .conf-titre { font-size: 64px; }
  #conf-root .conf-intro { margin-top: 28px; font-size: 23px; max-width: 34ch; }
  .conf-rubrique { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 16px; margin-top: 56px; padding-top: 36px; }
  .conf-tete + .conf-rubrique { margin-top: 84px; }
  .conf-entete { grid-column: 1 / 5; }
  .conf-corps { grid-column: 5 / 13; margin-top: 4px; }
  .conf-num { font-size: 52px; }
  .conf-h2 { font-size: 22px; margin-top: 12px; }
  .conf-liste > div { display: grid; grid-template-columns: 38% 1fr; column-gap: 16px; align-items: baseline; }
  .conf-liste dt { margin: 0; }
}

@media (min-width: 1025px) {
  #conf-root { width: min(1240px, calc(100% - 80px)); padding: 100px 0 170px; }
  .conf-titre { font-size: 96px; line-height: 1.02; }
  #conf-root .conf-intro { margin-top: 36px; font-size: 30px; max-width: 30ch; }
  .conf-rubrique { column-gap: 24px; margin-top: 76px; padding-top: 44px; }
  .conf-tete + .conf-rubrique { margin-top: 120px; }
  .conf-entete { grid-column: 1 / 5; }
  .conf-corps { grid-column: 5 / 11; }
  .conf-num { font-size: 68px; }
  .conf-h2 { font-size: 28px; margin-top: 16px; max-width: 18ch; }
  #conf-root p { font-size: 17px; line-height: 1.8; }
  .conf-h3 { font-size: 25px; }
  .conf-liste dd { font-size: 18px; }
}

/* Listes, étapes numérotées, liens dans le texte et informations à confirmer */
#conf-root p + ul, #conf-root p + ol { margin-top: 14px; }
#conf-root ul + p, #conf-root ol + p, #conf-root .conf-liste + p { margin-top: 16px; }
.conf-corps ul, .conf-corps ol { margin: 0; padding: 0; list-style: none; }
.conf-corps ol { counter-reset: conf-etape; }
.conf-corps li { position: relative; padding-left: 26px; font-family: var(--font-serif); font-size: 16px; line-height: 1.7; color: #1A1A1A; text-wrap: pretty; }
.conf-corps li + li { margin-top: 8px; }
.conf-corps ul li::before { content: "—"; position: absolute; left: 0; opacity: 0.5; }
.conf-corps ol li { padding-left: 34px; counter-increment: conf-etape; }
.conf-corps ol li::before { content: counter(conf-etape); position: absolute; left: 0; top: -1px; font-family: 'Bodoni Moda', var(--font-serif); font-style: italic; font-size: 19px; line-height: 1.5; opacity: 0.7; }
.conf-corps p a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(26, 26, 26, 0.4); }
#conf-root .conf-h3 + .conf-liste { margin-top: 0; }
@media (min-width: 1025px) { .conf-corps li { font-size: 17px; line-height: 1.75; } }

/* Confidentialité : liste « finalité / base légale » (intitulés en phrases, non en capitales) */
.conf-liste--fin > div { display: block; padding: 16px 0; }
.conf-liste--fin dt { margin: 0 0 6px; font-family: var(--font-serif); font-weight: 400; font-size: 17px; line-height: 1.45; letter-spacing: 0; text-transform: none; opacity: 1; color: #1A1A1A; }
.conf-liste--fin dd { font-size: 15px; line-height: 1.6; font-style: italic; opacity: 0.78; }
@media (min-width: 1025px) { .conf-liste--fin dt { font-size: 18px; } .conf-liste--fin dd { font-size: 16px; } }

/* PAGE COOKIES — mise en page éditoriale : titre, introduction, puis huit rubriques numérotées toutes visibles (aucun accordéon, aucun contenu masqué).
   Séparations par de fines lignes ; aucune photographie. Téléphone (≤ 640 px) : une colonne ; tablette (≥ 721 px) et ordinateur (≥ 1025 px) : numéro et titre à gauche, texte à droite. */
#cook-root { padding: 40px 20px 96px; }
#cook-root p { margin: 0; font-family: var(--font-serif); font-size: 16px; line-height: 1.75; color: #1A1A1A; text-wrap: pretty; }
.cook-titre { margin: 0; font-family: 'Bodoni Moda', var(--font-serif); font-weight: 500; font-size: 40px; line-height: 1.06; letter-spacing: -0.012em; color: #1A1A1A; text-wrap: balance; }
.cook-titre-it { font-style: italic; font-weight: 400; }
#cook-root .cook-intro { margin-top: 22px; font-size: 21px; line-height: 1.5; font-style: italic; max-width: 30ch; }
.cook-rubrique { margin-top: 44px; padding-top: 28px; border-top: 1px solid rgba(26, 26, 26, 0.2); }
.cook-tete + .cook-rubrique { margin-top: 56px; }
.cook-entete { display: block; }
.cook-num { display: block; font-family: 'Bodoni Moda', var(--font-serif); font-style: italic; font-weight: 400; font-size: 44px; line-height: 1; color: #1A1A1A; }
.cook-h2 { margin: 10px 0 0; font-family: var(--font-serif); font-weight: 500; font-size: 26px; line-height: 1.2; letter-spacing: -0.005em; color: #1A1A1A; text-wrap: balance; }
.cook-corps { margin-top: 24px; }
#cook-root .cook-corps p + p { margin-top: 16px; }
.cook-h3 { margin: 40px 0 14px; font-family: 'Bodoni Moda', var(--font-serif); font-style: italic; font-weight: 400; font-size: 22px; line-height: 1.25; color: #1A1A1A; }
.cook-h3:first-child { margin-top: 0; }
.cook-liste { margin: 0; padding: 0; }
#cook-root p + .cook-liste { margin-top: 18px; }
.cook-liste > div { padding: 13px 0; border-bottom: 1px solid rgba(26, 26, 26, 0.12); }
.cook-liste > div:first-child { border-top: 1px solid rgba(26, 26, 26, 0.12); }
.cook-liste dt { margin: 0 0 4px; font-family: 'Montserrat', sans-serif; font-weight: 500; font-size: 10.5px; line-height: 1.5; letter-spacing: 0.14em; text-transform: uppercase; color: #1A1A1A; opacity: 0.62; }
.cook-liste dd { margin: 0; font-family: var(--font-serif); font-size: 17px; line-height: 1.5; color: #1A1A1A; overflow-wrap: anywhere; }
.cook-liste dd a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(26, 26, 26, 0.4); }

@media (min-width: 641px) and (max-width: 720px) {
  #cook-root { max-width: 600px; margin-left: auto; margin-right: auto; }
}

@media (min-width: 721px) {
  #cook-root { width: min(704px, calc(100% - 64px)); margin: 0 auto; padding: 72px 0 130px; }
  .cook-titre { font-size: 64px; }
  #cook-root .cook-intro { margin-top: 28px; font-size: 23px; max-width: 34ch; }
  .cook-rubrique { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 16px; margin-top: 56px; padding-top: 36px; }
  .cook-tete + .cook-rubrique { margin-top: 84px; }
  .cook-entete { grid-column: 1 / 5; }
  .cook-corps { grid-column: 5 / 13; margin-top: 4px; }
  .cook-num { font-size: 52px; }
  .cook-h2 { font-size: 22px; margin-top: 12px; }
  .cook-liste > div { display: grid; grid-template-columns: 38% 1fr; column-gap: 16px; align-items: baseline; }
  .cook-liste dt { margin: 0; }
}

@media (min-width: 1025px) {
  #cook-root { width: min(1240px, calc(100% - 80px)); padding: 100px 0 170px; }
  .cook-titre { font-size: 96px; line-height: 1.02; }
  #cook-root .cook-intro { margin-top: 36px; font-size: 30px; max-width: 30ch; }
  .cook-rubrique { column-gap: 24px; margin-top: 76px; padding-top: 44px; }
  .cook-tete + .cook-rubrique { margin-top: 120px; }
  .cook-entete { grid-column: 1 / 5; }
  .cook-corps { grid-column: 5 / 11; }
  .cook-num { font-size: 68px; }
  .cook-h2 { font-size: 28px; margin-top: 16px; max-width: 18ch; }
  #cook-root p { font-size: 17px; line-height: 1.8; }
  .cook-h3 { font-size: 25px; }
  .cook-liste dd { font-size: 18px; }
}

/* Listes, étapes numérotées, liens dans le texte et informations à confirmer */
#cook-root p + ul, #cook-root p + ol { margin-top: 14px; }
#cook-root ul + p, #cook-root ol + p, #cook-root .cook-liste + p { margin-top: 16px; }
.cook-corps ul, .cook-corps ol { margin: 0; padding: 0; list-style: none; }
.cook-corps ol { counter-reset: cook-etape; }
.cook-corps li { position: relative; padding-left: 26px; font-family: var(--font-serif); font-size: 16px; line-height: 1.7; color: #1A1A1A; text-wrap: pretty; }
.cook-corps li + li { margin-top: 8px; }
.cook-corps ul li::before { content: "—"; position: absolute; left: 0; opacity: 0.5; }
.cook-corps ol li { padding-left: 34px; counter-increment: cook-etape; }
.cook-corps ol li::before { content: counter(cook-etape); position: absolute; left: 0; top: -1px; font-family: 'Bodoni Moda', var(--font-serif); font-style: italic; font-size: 19px; line-height: 1.5; opacity: 0.7; }
.cook-corps p a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(26, 26, 26, 0.4); }
#cook-root .cook-h3 + .cook-liste { margin-top: 0; }
@media (min-width: 1025px) { .cook-corps li { font-size: 17px; line-height: 1.75; } }

/* Cookies : liste « outil / usage » (intitulés en phrases, non en capitales) */
.cook-liste--fin > div { display: block; padding: 16px 0; }
.cook-liste--fin dt { margin: 0 0 6px; font-family: var(--font-serif); font-weight: 400; font-size: 17px; line-height: 1.45; letter-spacing: 0; text-transform: none; opacity: 1; color: #1A1A1A; }
.cook-liste--fin dd { font-size: 15px; line-height: 1.6; font-style: italic; opacity: 0.78; }
@media (min-width: 1025px) { .cook-liste--fin dt { font-size: 18px; } .cook-liste--fin dd { font-size: 16px; } }

/* PAGE EMBALLAGE CADEAU — VERSION DÉFINITIVE (proposition A « Éditorial haute couture ») */
/* Base commune des propositions « Emballage cadeau » (couche posée sur le CSS du site) */
.cga{background:#F5F1EC;color:#1A1A1A;overflow-x:clip}
.cga *{box-sizing:border-box}
.cga figure{margin:0}
.cga img{display:block;max-width:100%}
.cga .cadeau-swiper{container-type:normal}
.cga .cadeau-swiper-inner{padding:0}
.cga .cadeau-swiper-stage{max-width:none;width:100%;margin:0}
.cga .cadeau-swiper-viewport{background:#e8dfd3}
@media (hover:hover) and (pointer:fine) and (min-width:1025px){
  .cga .cadeau-swiper-nav{width:42px;height:42px;margin:-21px 0 0;border:0;background:rgba(245,241,236,.92);color:#1A1A1A}
  .cga .cadeau-swiper-prev{left:14px}.cga .cadeau-swiper-next{right:14px}
  .cga .cadeau-swiper-nav:hover,.cga .cadeau-swiper-nav:focus-visible{background:#1A1A1A;color:#F5F1EC}
}
.cga .cga-t{font-family:'Bodoni Moda',var(--font-serif);font-weight:400;font-style:normal;margin:0;color:#1A1A1A;text-wrap:balance;overflow-wrap:break-word}
.cga .cga-it{font-family:'Playfair Display',var(--font-serif);font-style:italic;font-weight:400;color:#1A1A1A}
.cga p{margin:0}
.cga .cga-sig{font-family:'Playfair Display',var(--font-serif);font-size:14px;line-height:1.55;letter-spacing:.02em}
/* A — Éditorial haute couture : grand titre de couverture, double page photo / texte, bandeau de clôture */
.cga{padding-bottom:72px}
.cga .cga-head{padding:44px 20px 0}
.cga .cga-title{font-size:46px;line-height:.98;letter-spacing:-.015em;max-width:7em}
.cga .cga-ouv{margin-top:26px;font-size:19px;line-height:1.5;max-width:22em}
.cga .cga-spread{margin-top:36px}
.cga .cga-photo img{width:100%;aspect-ratio:1121/1403;object-fit:cover}
.cga .cga-text{padding:34px 20px 0}
.cga .cga-body p{font-family:'Playfair Display',var(--font-serif);font-style:italic;font-size:16px;line-height:1.75;margin-bottom:18px}
.cga .cga-body p:first-child::first-letter{font-family:'Bodoni Moda',serif;font-style:normal;float:left;font-size:62px;line-height:.8;padding:6px 10px 0 0}
.cga .cga-sig{margin-top:32px;padding-top:16px;border-top:1px solid #1A1A1A;max-width:24em}
.cga .cga-band{margin-top:64px;padding:0 20px;display:grid;gap:40px}
.cga .cga-phrase{font-size:27px;line-height:1.35;text-wrap:balance}
@media (min-width:641px){
  .cga{padding-bottom:110px}
  .cga .cga-head{padding:72px 40px 0;display:grid;grid-template-columns:1fr;gap:28px}
  .cga .cga-title{font-size:84px;max-width:8em}
  .cga .cga-ouv{font-size:24px;margin-top:0;max-width:20em;margin-left:34%}
  .cga .cga-spread{display:grid;grid-template-columns:55fr 45fr;gap:0 44px;padding:0 40px;margin-top:60px;align-items:start}
  .cga .cga-text{padding:56px 0 0}
  .cga .cga-body p{font-size:16px;margin-bottom:20px}
  .cga .cga-band{grid-template-columns:1fr 1fr;gap:44px;padding:0 40px;margin-top:96px;align-items:center}
  .cga .cga-phrase{font-size:32px;line-height:1.3}
}
@media (min-width:1025px){
  .cga{padding-bottom:160px}
  .cga .cga-head{padding:104px 80px 0;grid-template-columns:8fr 4fr;gap:0 40px;align-items:end}
  .cga .cga-title{font-size:132px;line-height:.9;letter-spacing:-.025em;max-width:none}
  .cga .cga-ouv{font-size:25px;margin-left:0;padding-bottom:14px}
  .cga .cga-spread{grid-template-columns:6fr 5fr;gap:0 96px;padding:0 80px;margin-top:84px}
  .cga .cga-text{padding:150px 0 0}
  .cga .cga-body p{font-size:19px;margin-bottom:24px}
  .cga .cga-body p:first-child::first-letter{font-size:84px;padding:8px 14px 0 0}
  .cga .cga-sig{margin-top:48px;font-size:16px}
  .cga .cga-band{grid-template-columns:5fr 7fr;gap:0 96px;padding:0 80px;margin-top:150px}
  .cga .cga-band .cga-swl{padding-left:12%}
  .cga .cga-phrase{font-size:56px;line-height:1.22}
}

/* PAGE ASSISTANCE — message d'état de la recherche (attente, saisie vide…). Posé juste sous la photographie, hors flux :
   n'ajoute aucune hauteur et ne déplace ni la barre, ni le titre, ni la photographie, ni les rubriques. Masqué tant qu'il n'y a rien à dire. */
.assistance-search-msg {
  position: absolute;
  left: 20px;
  right: 20px;
  top: calc(100% + 8px);
  margin: 0;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.35;
  letter-spacing: 0.01em;
  text-align: center;
  color: #1A1A1A;
}

.assistance-search-msg[hidden] {
  display: none;
}

/* PAGE FAQ — la barre de recherche devient un vrai champ de saisie SANS changer son apparence : le texte indicatif d'origine
   reste affiché tel quel (calque non cliquable) tant que le champ est vide ; le champ transparent le recouvre exactement.
   La loupe devient un bouton : sa zone de toucher s'agrandit par un rembourrage compensé par une marge négative (aucun décalage). */
.faq-search {
  position: relative;
}

.faq-search-field {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: block;
}

.faq-search-input {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #1A1A1A;
  appearance: none;
  -webkit-appearance: none;
}

.faq-search-input::-webkit-search-decoration,
.faq-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.faq-search-hint {
  display: block;
  pointer-events: none;
}

.faq-search-input:not(:placeholder-shown) + .faq-search-hint {
  visibility: hidden;
}

.faq-search:focus-within {
  box-shadow: 0 0 0 2px rgba(26, 26, 26, 0.45);
}

.faq-search-btn {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -10px;
  padding: 10px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

/* Message d'état (attente, saisie vide…) : posé juste sous le cadre blanc, hors flux — n'ajoute aucune hauteur
   et ne recouvre ni les questions ni la barre. */
.faq-search-wrap {
  position: relative;
}

.faq-search-msg {
  position: absolute;
  left: 16px;
  right: 16px;
  top: calc(100% + 10px);
  margin: 0;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
  color: #1A1A1A;
}

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

/* PAGE FAQ — structure du dépliage (activée par faq.js uniquement pour les questions qui ont une réponse) :
   la question devient un bouton qui reprend exactement le style du texte d'origine ; la réponse s'affiche juste dessous. */
.faq-question-toggle {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  text-wrap: inherit;
  cursor: pointer;
}

.faq-answer {
  margin: 8px 0 0;
  font-family: var(--font-sans);
  font-size: 0.875em;
  line-height: 1.5;
  color: rgba(26, 26, 26, 0.8);
}

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

/* FOOTER — formulaire Newsletter : bouton animé (cercle ⇄ « Sow Chic ») pendant le traitement et messages d'état.
   Le bouton garde exactement ses dimensions ; les messages s'affichent sous le formulaire. */
.footer-button{position:relative;overflow:hidden}
.footer-button .nl-label{display:inline-block;transition:opacity .35s ease}
.footer-button .nl-morph{position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;box-sizing:border-box;border:1.5px solid currentColor;border-radius:50%;display:flex;align-items:center;justify-content:center;overflow:hidden;opacity:0;pointer-events:none;white-space:nowrap}
.footer-button .nl-morph span{font-family:'Bodoni Moda','Playfair Display',Georgia,serif;font-size:15px;font-weight:500;letter-spacing:.06em;opacity:0}
.footer-button.is-loading{cursor:progress}
.footer-button.is-loading:hover{opacity:1}
.footer-button.is-loading .nl-label{opacity:0}
.footer-button.is-loading .nl-morph{opacity:1;animation:nlShape 3.2s cubic-bezier(.65,0,.35,1) infinite}
.footer-button.is-loading .nl-morph span{animation:nlText 3.2s ease-in-out infinite}
@keyframes nlShape{
  0%,12%{width:18px;margin-left:-9px;border-color:currentColor;border-radius:50%}
  38%,62%{width:104px;margin-left:-52px;border-color:transparent;border-radius:999px}
  88%,100%{width:18px;margin-left:-9px;border-color:currentColor;border-radius:50%}
}
@keyframes nlText{0%,24%{opacity:0}40%,60%{opacity:1}76%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .footer-button.is-loading .nl-morph{animation:none;width:104px;margin-left:-52px;border-color:transparent;border-radius:999px}
  .footer-button.is-loading .nl-morph span{animation:nlFade 2.4s ease-in-out infinite}
  @keyframes nlFade{0%,100%{opacity:.35}50%{opacity:1}}
}

.nl-msg{margin:var(--space-3) 0 0;font-family:var(--font-sans);font-size:.875rem;line-height:1.55;text-wrap:pretty;transition:opacity .6s ease}
.nl-msg[hidden]{display:none}
.nl-msg.is-fading{opacity:0}
.nl-msg p{margin:0}
.nl-msg p+p{margin-top:var(--space-2)}
.nl-msg-title{font-family:var(--font-serif);font-size:1.125rem;font-weight:400}
.nl-msg-lead{font-family:var(--font-serif);font-style:italic}