/* ==========================================================================
   VINTEA — Système de design « aqua / teal / pêche » (refonte, 03/10/2026)
   Référence visuelle : template joint (docs/ressources-visuelles/template-refonte-2026-10-03/).
   Chargée APRÈS style.css : elle remappe les variables de rôle de l'ancien thème, puis
   définit le cadre (en-tête, pied, navigation mobile), l'accueil et les composants communs.
   Architecture de jetons à 3 couches : primitifs -> sémantiques -> composants.
   Polices : Plus Jakarta Sans (titres) + Inter (interface) = APPROXIMATION provisoire
   (la police exacte du template n'est pas identifiée).
   ========================================================================== */

/* ---------- 1. Primitifs (valeurs échantillonnées sur le template, approchées) ---------- */
:root {
  --p-aqua-50:  #F2FAFB;
  --p-aqua-100: #D3F0F4;
  --p-aqua-200: #BBEEF4;
  --p-aqua-300: #8CD6E2;
  --p-teal-400: #2A8FAE;
  --p-teal-600: #045F7B; --p-teal-650: #0A5C78;
  --p-teal-700: #034A63;
  --p-teal-800: #013B4E;
  --p-peche-50:  #FEF4EC;
  --p-peche-100: #FAE1D0;
  --p-peche-300: #F9C5A3;
  --p-peche-700: #8A4A1C;
  --p-encre-900: #060E30;
  --p-encre-700: #2F3A5E;
  --p-encre-500: #5E667F;
  --p-encre-300: #C3C9D6;
  --p-blanc: #FEFEFE;
  --p-succes: #17724A; --p-erreur: #B3261E; --p-alerte: #8A5A00; --p-info: #04607F;
}

/* ---------- 2. Sémantiques (remappent les variables de style.css : toutes les pages suivent) ---------- */
:root, :root[data-theme="light"], :root[data-theme="dark"] {
  --brand-50:  var(--p-aqua-50);  --brand-100: var(--p-aqua-100); --brand-200: var(--p-aqua-200);
  --brand-300: var(--p-aqua-300); --brand-400: var(--p-teal-400); --brand: var(--p-teal-600);
  --brand-600: var(--p-teal-700); --brand-700: var(--p-teal-800); --brand-800: #012B39;
  --sand-50: var(--p-peche-50); --sand-100: var(--p-peche-100); --sand: var(--p-peche-300); --sand-600: var(--p-peche-700);
  --rose-50: #FDECEA; --rose: var(--p-erreur); --rose-600: #8E1D17;
  --info-50: var(--p-aqua-50); --info: var(--p-info);
  --ink-900: var(--p-encre-900); --ink-800: #1B2447; --ink-700: var(--p-encre-700); --ink-600: #46506F; --ink-500: var(--p-encre-500);
  --ink-400: #8F96AA; --ink-300: var(--p-encre-300); --ink-200: #DCE3EA; --ink-100: #EAF0F4; --ink-50: #F4F8FA;

  --bg: var(--p-blanc); --bg-soft: var(--p-aqua-50); --bg-sunken: #E9F6F8; --surface: #FFFFFF; --surface-2: var(--p-aqua-50);
  --border: #D3E6EB; --border-soft: #E4F0F3;
  --text: var(--p-encre-900); --text-soft: #3B4466; --text-mute: var(--p-encre-500); --text-invert: #FFFFFF;
  --accent: var(--p-teal-600); --accent-ink: var(--p-teal-800); --accent-soft: var(--p-aqua-100);
  --ring: color-mix(in srgb, var(--p-teal-600) 38%, transparent);
  --shadow-xs: 0 1px 2px rgba(11, 18, 51, .06);
  --shadow-sm: 0 2px 8px rgba(11, 18, 51, .07);
  --shadow-md: 0 6px 20px rgba(11, 18, 51, .09);
  --shadow-lg: 0 14px 40px rgba(11, 18, 51, .12);
  --r-sm: 12px; --r-md: 14px; --r-lg: 20px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-titre: "Plus Jakarta Sans", "Inter", -apple-system, "Segoe UI", Arial, sans-serif;
  --header-h: 0px;
}
:root { color-scheme: light; }

/* ---------- 3. Composants : jetons spécifiques ---------- */
:root {
  --v-largeur: 1107px;           /* largeur maximale du contenu */
  --v-marge: 32px;               /* marge latérale (template : ≈ 32 px sur 1107) */
  --v-pilule-h: 38px;
  --v-champ-h: 56px;
  --v-carte-r: 14px;
  --v-ombre-carte: 0 2px 8px rgba(11, 18, 51, .08);
  --v-focus: 0 0 0 3px #fff, 0 0 0 6px var(--p-teal-600);
}
body { font-family: var(--font); color: var(--text); background: var(--bg); }
h1, h2, h3, h4, .v-titre { font-family: var(--font-titre); letter-spacing: -.01em; }
h1, h2 { font-weight: 800; }
a { color: inherit; }
.v-contenu { width: 100%; max-width: var(--v-largeur); margin-inline: auto; padding-inline: var(--v-marge); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Langues : arabe (droite à gauche) et sélecteur ----------
   Le cadre utilise des propriétés logiques (inline-start / inline-end) : il se retourne de lui-même en
   arabe. Les logos, photographies et illustrations ne sont JAMAIS retournés ; seules les flèches de
   direction le sont. */
html[dir="rtl"] { --font: "Cairo", "Inter", -apple-system, "Segoe UI", Arial, sans-serif; --font-titre: "Cairo", "Plus Jakarta Sans", "Segoe UI", Arial, sans-serif; }
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4, html[dir="rtl"] .v-hero__titre, html[dir="rtl"] .v-section__tete h2, html[dir="rtl"] .v-appel h2, html[dir="rtl"] .v-tuile__txt h3 { letter-spacing: 0; }
/* Même hauteur de titre qu'en français : la recherche et les suggestions restent dans le bandeau. */
html[dir="rtl"] .v-hero__titre { font-size: 34px; line-height: 42px; }
/* Texte latin dans une page arabe (adresses e-mail, téléphones, liens, prix, références) : il garde son sens. */
html[dir="rtl"] a[href^="mailto:"], html[dir="rtl"] a[href^="tel:"], html[dir="rtl"] a[href^="http"], .v-ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }
html[dir="rtl"] .pcard-price, html[dir="rtl"] .price-main, html[dir="rtl"] .price-prot, html[dir="rtl"] input[type="email"], html[dir="rtl"] input[type="tel"], html[dir="rtl"] input[type="url"], html[dir="rtl"] input[type="number"] { unicode-bidi: plaintext; }
html[dir="rtl"] input[type="email"], html[dir="rtl"] input[type="tel"], html[dir="rtl"] input[type="url"] { direction: ltr; text-align: right; }
/* Flèches de direction (et elles seules) : retournées. */
html[dir="rtl"] .v-tuile__go svg, html[dir="rtl"] .v-promo a svg, html[dir="rtl"] .v-section__tete h2 a svg, html[dir="rtl"] .breadcrumb svg { transform: scaleX(-1); }
html[dir="rtl"] .v-section__tete h2 a:hover svg { transform: scaleX(-1) translateX(4px); }
/* Pendant le chargement du dictionnaire : pas d'éclair de texte français (levé au plus tard après 1,5 s). */
html.vt-i18n-attente body { visibility: hidden; }
.v-langue { font: 700 .78rem/1 var(--font); letter-spacing: .02em; }
.v-langue span { pointer-events: none; }

/* focus visible commun */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--p-teal-600); outline-offset: 2px; border-radius: 10px;
}

/* ---------- 4. Boutons (pilules) ---------- */
.v-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--v-pilule-h); min-height: var(--v-pilule-h); padding: 0 16px; border-radius: 999px; border: 0;
  background: #fff; color: #060E30; font: 600 .875rem/1 var(--font); white-space: nowrap; cursor: pointer;
  box-shadow: 0 1px 7px rgba(11, 18, 51, .09); text-decoration: none;
  transition: background .15s, box-shadow .15s, transform .12s, color .15s;
}
.v-pill:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.v-pill:active { transform: none; }
.v-pill[disabled], .v-pill[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.v-pill svg { width: 18px; height: 18px; flex: none; }
.v-pill--accent { background: var(--p-peche-300); color: var(--p-encre-900); }
.v-pill--accent:hover { background: #F7BC92; }
.v-pill--teal { background: var(--p-teal-600); color: #fff; }
.v-pill--teal:hover { background: var(--p-teal-700); }
.v-pill__plus { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--p-encre-900); color: #fff; }
.v-pill__plus svg { width: 14px; height: 14px; }
.v-round {
  position: relative; display: inline-grid; place-items: center; width: var(--v-pilule-h); height: var(--v-pilule-h);
  border-radius: 50%; background: #fff; color: var(--p-encre-900); box-shadow: var(--shadow-sm); border: 0; cursor: pointer; text-decoration: none;
  transition: background .15s, box-shadow .15s, transform .12s;
}
.v-round:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.v-round svg { width: 20px; height: 20px; }
/* Avatar du compte connecté : même cercle que les autres icônes rondes. */
.v-round--avatar { padding: 0; overflow: hidden; }
.v-avatar { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.v-avatar--ini { background: var(--p-teal-600); color: #fff; font: 700 .8rem/1 var(--font); letter-spacing: .02em; }
.v-onglet-avatar { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; overflow: hidden; margin-inline: auto; }
.v-onglet-avatar .v-avatar--ini { font-size: .58rem; }
/* Avatar + nom public dans l'en-tête (C-2026-10-05-A). */
.v-compte { display: inline-flex; align-items: center; gap: 8px; max-width: 200px; min-width: 0; flex: 0 1 auto; padding-inline-end: 14px; border-radius: 999px;
  background: #fff; color: var(--p-encre-900); box-shadow: var(--shadow-sm); text-decoration: none; }
.v-compte:hover { box-shadow: var(--shadow-md); }
.v-compte .v-round { box-shadow: none; flex: none; }
.v-compte__nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 .86rem/1.2 var(--font); }
.v-onglet-nom { display: block; max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 899px) {
  /* Téléphone : le nom figure sous l'avatar dans la barre du bas ; l'en-tête garde l'avatar seul. */
  .v-compte { padding: 0; gap: 0; }
  .v-compte__nom { display: none; }
}
.v-pastille {
  position: absolute; top: -3px; inset-inline-end: -3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--p-teal-600); color: #fff; font: 700 .68rem/18px var(--font); text-align: center; box-shadow: 0 0 0 2px #fff;
}
/* boutons de l'ancien système (.btn) : pilule teal / pêche */
.btn-primary { --btn-bg: var(--p-teal-600); --btn-bd: var(--p-teal-600); --btn-fg: #fff; }
.btn-primary:hover { --btn-bg: var(--p-teal-700); --btn-bd: var(--p-teal-700); }
.btn-soft { --btn-bg: var(--p-aqua-100); --btn-fg: var(--p-teal-800); }
.btn-dark { --btn-bg: var(--p-encre-900); --btn-bd: var(--p-encre-900); }

/* ---------- 5. Champs ---------- */
.input, .select, .textarea { border-radius: 14px; border: 1px solid var(--border); background: #fff; min-height: 46px; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--p-teal-600); box-shadow: 0 0 0 3px var(--ring); outline: none; }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--p-erreur); }
.check input { accent-color: var(--p-teal-600); }
.chip { border-radius: 999px; background: #fff; border: 1px solid var(--border); font-weight: 600; }
.chip:hover { border-color: var(--p-teal-400); }
.chip[aria-pressed="true"], .chip.is-active { background: var(--p-teal-600); border-color: var(--p-teal-600); color: #fff; }

/* ---------- 6. Badges ---------- */
.badge { border-radius: 999px; font-weight: 600; }
.badge-brand { background: var(--p-aqua-100); color: var(--p-teal-800); }
.badge-sand { background: var(--p-peche-100); color: var(--p-peche-700); }
.badge-rose { background: #FDECEA; color: #8E1D17; }
.badge-info { background: var(--p-aqua-100); color: var(--p-teal-800); }

/* ---------- 7. Cartes produit (reprise du template : photo pleine largeur en haut, texte dessous) ---------- */
.pcard { position: relative; display: flex; flex-direction: column; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 8px rgba(11, 18, 51, .09); transition: box-shadow .18s, transform .18s; }
.pcard:hover { box-shadow: 0 4px 16px rgba(11, 18, 51, .14); transform: translateY(-2px); }
.pcard-media { display: block; position: relative; aspect-ratio: 4 / 3; border-radius: 0; background: var(--p-aqua-100); overflow: hidden; }
.pcard-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pcard-flags { position: absolute; top: 8px; inset-inline-start: 8px; display: flex; flex-direction: column; gap: 4px; }
.pcard-body { padding: 6px 14px 9px; display: flex; flex-direction: column; gap: 1px; min-height: 75px; box-sizing: border-box; }
.pcard-title { font: 500 .8125rem/1.3 var(--font); color: #30354A; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pcard-price { display: flex; align-items: baseline; gap: 8px; }
.pcard-price .p { font: 800 1.0625rem/1.2 var(--font-titre); color: var(--p-teal-650); }
.pcard-price .old { font-size: .78rem; color: var(--text-mute); text-decoration: line-through; }
.pcard-meta, .pcard-meta-ligne { display: flex; align-items: center; gap: 8px; font: 400 .75rem/1.3 var(--font); color: #8A90A3; }
.pcard-meta-ligne .sep { width: 1px; height: 12px; background: #C9CDD8; }
.pcard-meta-ligne svg, .pcard-meta svg { width: 14px; height: 14px; color: var(--p-teal-600); flex: none; }
.pcard-fav {
  position: absolute; top: 8px; inset-inline-end: 10px; width: 30px; height: 30px; display: grid; place-items: center;
  background: transparent; border: 0; color: #fff; cursor: pointer; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .35)); box-shadow: none; border-radius: 50%;
}
.pcard-fav svg { width: 25px; height: 25px; stroke-width: 2; }
.pcard-fav:hover { transform: scale(1.08); color: #fff; }
.pcard-fav[aria-pressed="true"] { color: var(--p-teal-600); filter: drop-shadow(0 1px 3px rgba(255, 255, 255, .8)); }
.pcard-fav[aria-pressed="true"] svg { fill: currentColor; }
.pcard-sold { position: absolute; inset: auto 8px 8px auto; background: #fff; border-radius: 999px; padding: 3px 10px; font-weight: 700; font-size: .75rem; }
/* Article réservé par un acheteur (demande acceptée par le vendeur) : il reste au catalogue, avec son échéance. */
.pcard-reserve { position: absolute; left: 8px; right: 8px; bottom: 8px; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .94); color: var(--p-teal-800); font: 600 .72rem/1.25 var(--font); text-align: center; box-shadow: 0 1px 6px rgba(11, 18, 51, .14); }
.v-resa { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 14px; background: var(--p-aqua-50); border: 1px solid var(--border); }
.v-resa--ok { background: #E7F6EE; border-color: #BDE3CE; }
.v-resa--attente { background: var(--p-peche-50); border-color: var(--p-peche-100); }
.v-resa strong { font: 700 .95rem/1.3 var(--font-titre); color: var(--p-encre-900); }
.v-resa p { margin: 0; font-size: .84rem; line-height: 1.4; color: var(--text-soft); }
.v-resa .row { flex-wrap: wrap; }
.v-resa-choix { display: grid; gap: 10px; margin: 14px 0; }
.v-resa-choix label.radio-card { align-items: flex-start; }
.grid-products { gap: 16px; }

/* états : chargement / vide / erreur / succès */
.skeleton, .sk { background: linear-gradient(90deg, var(--p-aqua-100), var(--p-aqua-50), var(--p-aqua-100)); background-size: 200% 100%; animation: v-sk 1.4s linear infinite; border-radius: 12px; }
@keyframes v-sk { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .v-hero__video video, .v-hero__video img, .v-hero--video .v-hero__photo { transition: none; } .skeleton, .sk { animation: none; } .v-pill, .v-round, .pcard, .v-tuile { transition: none; } }
.alert-success { background: #E7F6EE; color: var(--p-succes); border-color: #BDE3CE; }
.alert-warn { background: var(--p-peche-50); color: var(--p-peche-700); }
.v-vide { grid-column: 1 / -1; padding: 28px 8px; color: var(--text-mute); }

/* ==========================================================================
   8. CADRE : en-tête, pied de page, navigation mobile
   Dimensions du template (1107 px de large) : marges 32 px, pilules de 38 px, logo de 104 px de haut.
   ========================================================================== */
.v-head { position: relative; z-index: 30; overflow-x: clip; background: linear-gradient(180deg, var(--p-aqua-100), var(--p-aqua-50)); }
/* overflow-x: clip (audit du 10/10/2026) : le halo du logo (inset -80 %) debordait de l'ecran a
   375 px et donnait a toute la page 648 px de large ; rendu visible identique (captures avant / apres). */
.v-head__in {
  /* Colonne centrale réservée au logo (positionné en absolu, 123 px de large) : les groupes de
     gauche et de droite ne peuvent plus s'étendre dessous, même avec le nom du compte affiché. */
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 148px minmax(0, 1fr); align-items: start; gap: 12px;
  max-width: var(--v-largeur); margin-inline: auto; padding: 17px var(--v-marge) 0; height: 92px;
}
.v-head__left { grid-column: 1; display: flex; align-items: center; justify-self: start; gap: 8px; }
.v-head__left .v-pill { gap: 10px; padding-block: 0; padding-inline: 16px 14px; }
.v-head__left .v-pill > svg:first-child { width: 22px; height: 22px; }
.v-head__left .v-pill > svg:last-child { width: 14px; height: 14px; }
/* Groupe de droite : largeur contenue pour ne jamais mordre sur le logo centré (123 px de large à 108 px de haut).
   À 1043 px de contenu, il reste 448 px à droite du logo : espacements et marges sont réglés pour y tenir. */
.v-head__right { grid-column: 3; display: flex; align-items: center; justify-self: end; gap: 10px; min-width: 0; }
.v-head__right .v-pill { padding-inline: 13px; gap: 7px; }
/* Compte connecté (C-2026-10-05-A, point 6, PROPOSITION à valider) : le nom public s'ajoute à
   l'avatar ; pour qu'il tienne sans passer sous le logo, « Mes favoris » et « Vendre un article »
   prennent la forme icône seule déjà utilisée sous 1 100 px (nom accessible conservé). */
.v-head--connecte .v-head__right .v-lib-long, .v-head--connecte .v-head__right .v-pill span.v-lib-fav { display: none; }
.v-head--connecte .v-head__right .v-pill { width: var(--v-pilule-h); padding: 0; justify-content: center; }
.v-head__icones { display: flex; align-items: center; gap: 6px; margin-right: 0; min-width: 0; }
.v-logo { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); display: block; line-height: 0; }
.v-logo img { display: block; height: 66px; width: auto; }
/* Halo clair derrière le logo : l'extrait du template porte son propre fond clair (≈ #F1FAFB) ; ce halo l'y raccorde sans toucher aux pixels du logo. */
.v-logo::before { content: ''; position: absolute; inset: -30% -80%; z-index: -1; pointer-events: none; background: radial-gradient(ellipse closest-side, #F1FAFB 0, #F1FAFB 62%, rgba(241, 250, 251, 0) 100%); }
.v-head--home { position: absolute; left: 0; right: 0; top: 0; background: transparent; }
.v-head--home .v-head__in { height: 120px; }
.v-head--home .v-logo { top: 9px; }
/* Accueil (ordinateur) : le halo est posé dans le bandeau, derrière le titre, pour ne pas le voiler. */
.v-head--home .v-logo::before { display: none; }
.v-hero__cadre { isolation: isolate; }
.v-hero__cadre::before { content: ''; position: absolute; z-index: -1; left: 50%; top: 63px; width: 320px; height: 280px; transform: translate(-50%, -50%); pointer-events: none; background: radial-gradient(ellipse closest-side, #F1FAFB 0, #F1FAFB 62%, rgba(241, 250, 251, 0) 100%); }
.v-head--home .v-logo img { height: 108px; }
/* Fond transparent : la barre est DANS l'en-tête et laisse voir son dégradé continu (un fond propre y dessinait une bande). */
.v-barre-recherche { padding: 0 var(--v-marge) 14px; background: transparent; }
.v-barre-recherche .v-search { max-width: 640px; margin-inline: auto; }
.v-sousbande { height: 0; }

/* menu déroulant « Catalogue » */
.v-dd { position: relative; }
.v-dd__panel {
  position: absolute; top: calc(100% + 8px); inset-inline-start: 0; z-index: 40; width: min(700px, 90vw);
  background: #fff; border-radius: 16px; box-shadow: 0 14px 40px rgba(11, 18, 51, .16); padding: 18px 22px 14px;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 14px 24px;
}
.v-dd__panel[hidden] { display: none; }
.v-dd__groupe h3 { margin: 0 0 6px; font: 700 .72rem/1.2 var(--font); text-transform: uppercase; letter-spacing: .06em; color: var(--text-mute); }
.v-dd__groupe a { display: block; padding: 6px 8px; margin-inline: -8px; border-radius: 10px; font-size: .9rem; font-weight: 500; }
.v-dd__groupe a:hover { background: var(--p-aqua-100); }
.v-dd__pied { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; border-top: 1px solid var(--border-soft); padding-top: 10px; }
.v-dd__pied a { font-size: .84rem; font-weight: 600; color: var(--p-teal-700); padding: 4px 12px; border-radius: 999px; background: var(--p-aqua-50); }

/* pied de page (template : logo à gauche, liens gris à droite sur une ligne) */
.v-pied { background: #fff; margin-top: 18px; }
.v-pied__in { max-width: var(--v-largeur); margin-inline: auto; padding: 9px var(--v-marge) 9px; display: flex; align-items: center; gap: 10px 26px; flex-wrap: nowrap; }
.v-pied__logo img { display: block; width: 121px; height: 42px; margin-block: -2px; }
.v-pied nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 18px; margin-inline-start: auto; font: 400 .75rem/1.4 var(--font); color: #7C8296; }
.v-pied nav a:hover { color: var(--p-teal-700); text-decoration: underline; }
.v-pied nav .v-trait { width: 1px; height: 14px; background: #2B3150; }
.v-pied__note { margin: 0; font-size: .78rem; color: #7C8296; }

/* bandeau « Mode démonstration » (api.js) : hors flux, pour ne pas décaler la page du template */
#vt-mode-demo {
  position: fixed !important; z-index: 60; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
  border: 0 !important; border-top: 1px solid #E9C46A !important; border-radius: 0; padding: 5px 12px !important;
  font: 500 12px/1.35 var(--font) !important; text-align: center !important; pointer-events: none;
}
/* Sa hauteur réelle (--v-demo-h, mesurée par api.js) est réservée en bas de page : il ne recouvre ni le pied,
   ni le logo du pied, ni la navigation mobile. */
body { padding-bottom: var(--v-demo-h, 0px); }

/* navigation mobile : pilule flottante (motif « menu bulle », aux couleurs du template) */
.v-onglets { display: none; }
@media (max-width: 899px) {
  .v-onglets {
    position: fixed; z-index: 45; left: 50%; transform: translateX(-50%); bottom: calc(12px + var(--v-demo-h, 0px) + env(safe-area-inset-bottom));
    width: min(420px, calc(100vw - 24px)); display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; padding: 6px;
    background: var(--p-teal-700); border-radius: 999px; box-shadow: 0 10px 30px rgba(1, 59, 78, .35);
  }
  .v-onglets a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px; color: #E8F8FB; font: 600 .66rem/1.1 var(--font); border-radius: 999px; position: relative; }
  .v-onglets a svg { width: 22px; height: 22px; }
  .v-onglets a[aria-current="page"] { background: #fff; color: var(--p-teal-700); box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
  .v-onglets a.v-onglet-vendre { background: var(--p-peche-300); color: var(--p-encre-900); }
  .v-onglets .v-pastille { top: 2px; right: 14px; box-shadow: 0 0 0 2px var(--p-teal-700); }
  #vt-mode-demo { bottom: 0 !important; }
  body { padding-bottom: calc(92px + var(--v-demo-h, 0px) + env(safe-area-inset-bottom)); }
}

/* ==========================================================================
   9. ACCUEIL — reprise du template, mesures à 1107 px
   ========================================================================== */
.v-hero { position: relative; height: 338px; overflow: hidden; isolation: isolate;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, .22) 100%),
    linear-gradient(180deg, #D4F1F5 0%, #CBEDF1 22%, #D4F0F3 55%, #D9F4F6 100%); }
.v-hero__cadre { position: relative; max-width: 1107px; height: 100%; margin-inline: auto; }
/* photographies du bandeau : EXTRAITS du template (résolution du template) ; la zone de la barre de recherche est transparente */
.v-hero__photo { position: absolute; top: 58px; height: 280px; width: auto; max-width: none; pointer-events: none; user-select: none; }
.v-hero__photo--g { left: 0; }
.v-hero__photo--d { right: 0; }
/* Les extraits portent leur propre fond : sans fondu, leurs bords (haut, côté extérieur quand l'écran dépasse
   1107 px, côté intérieur sous le bouton de recherche) dessinent un rectangle sur le dégradé du bandeau.
   Chaque masque fond ces trois bords ; le bas reste net, il coïncide avec le bas du bandeau. */
.v-hero__photo--g {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%), linear-gradient(90deg, transparent 0, #000 14%, #000 80%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 22%), linear-gradient(90deg, transparent 0, #000 14%, #000 80%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.v-hero__photo--d {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%), linear-gradient(90deg, transparent 0, #000 26%, #000 86%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 22%), linear-gradient(90deg, transparent 0, #000 26%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.v-hero__corps { position: relative; padding-top: 134px; text-align: center; }
/* --- Vidéos du bandeau : couche de fond, sous le logo, le titre et la recherche (qui restent du HTML utilisable) --- */
.v-hero__video { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: #D4F0F3; }
.v-hero__video[hidden] { display: none; }
.v-hero__video video, .v-hero__video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--v-hero-cadrage, 50% 50%); opacity: 0; transition: opacity .9s ease; }
.v-hero__video .est-visible { opacity: 1; }
/* Voile clair : zone calme derrière le logo, le titre et la recherche, quel que soit le plan affiché. */
.v-hero__video::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 46% 78% at 50% 44%, rgba(241, 250, 251, .94) 0, rgba(241, 250, 251, .78) 55%, rgba(241, 250, 251, 0) 100%); }
/* Quand la vidéo joue, elle remplace les photographies fixes (même emplacement, même rôle décoratif). */
.v-hero--video .v-hero__photo { opacity: 0; transition: opacity .6s ease; }
.v-hero--video .v-hero__cadre::before { opacity: 0; }
.v-hero__pause {
  position: absolute; z-index: 3; right: max(16px, calc((100% - var(--v-largeur)) / 2 + var(--v-marge))); bottom: 14px;
  display: inline-grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .92); color: var(--p-encre-900); box-shadow: var(--shadow-sm); cursor: pointer;
}
.v-hero__pause:hover { background: #fff; box-shadow: var(--shadow-md); }
.v-hero__pause svg { width: 18px; height: 18px; }
.v-hero__pause[hidden] { display: none; }
.v-hero__titre { margin: 0; font: 800 44px/42px var(--font-titre); letter-spacing: -.4px; color: #060E30; }
.v-search { position: relative; width: min(581px, calc(100% - 64px)); margin: 12px auto 0; }
.v-search form.search { max-width: none; width: 100%; }
.v-search form, form.v-search {
  display: flex; align-items: center; gap: 10px; height: 52px; padding-block: 0; padding-inline: 22px 7px;
  background: #fff; border-radius: 999px; box-shadow: 0 4px 18px rgba(4, 96, 127, .15);
}
.v-search svg.v-search__ico { width: 22px; height: 22px; color: #060E30; flex: none; }
.v-search input[type=search] { flex: 1; min-width: 0; border: 0; background: transparent; font: 400 .93rem var(--font); color: var(--text); padding: 0; min-height: 0; box-shadow: none; outline: none; }
.v-search input[type=search]::placeholder { color: #8E93A8; }
.v-search:focus-within { box-shadow: 0 4px 18px rgba(4, 96, 127, .15), 0 0 0 3px var(--ring); }
.v-search .v-pill--teal { height: 38px; min-height: 38px; padding-inline: 20px; box-shadow: none; font-size: .9rem; }
.v-search .search-sug { position: absolute; left: 12px; right: 12px; top: calc(100% + 6px); z-index: 50; background: #fff; border-radius: 16px; box-shadow: var(--shadow-lg); text-align: left; }
.v-puces { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 10px; }
.v-puce { display: inline-flex; align-items: center; height: 30px; padding: 0 18px; border-radius: 999px; background: #fff; box-shadow: 0 1px 6px rgba(11, 18, 51, .07); font: 500 .8125rem/1 var(--font); color: #060E30; }
.v-puce:hover { color: var(--p-teal-700); box-shadow: 0 2px 10px rgba(11, 18, 51, .12); }

.v-contenu { max-width: var(--v-largeur); margin-inline: auto; padding-inline: var(--v-marge); }
/* tuiles : colonne gauche 523 px (2 tuiles), colonne droite 507 px (1 grande) */
.v-tuiles { display: grid; grid-template-columns: 523fr 507fr; gap: 13px; margin-top: 16px; align-items: start; }
.v-tuiles__col { display: grid; gap: 11px; min-width: 0; }
.v-tuile {
  position: relative; display: flex; flex-direction: column; min-width: 0; background: #fff; border-radius: 14px; overflow: hidden;
  box-shadow: 0 1px 8px rgba(11, 18, 51, .10); color: inherit; transition: box-shadow .18s, transform .18s;
}
.v-tuile:hover { box-shadow: 0 5px 18px rgba(11, 18, 51, .16); transform: translateY(-2px); }
.v-tuile > img { display: block; width: 100%; object-fit: cover; }
.v-tuile--maison > img { height: 130px; } .v-tuile--tech > img { height: 111px; } .v-tuile--dressing > img { height: 306px; }
.v-tuile--maison { height: 186px; } .v-tuile--tech { height: 171px; } .v-tuile--dressing { height: 366px; margin-top: 2px; }
.v-tuile__pied { flex: 1; display: flex; align-items: center; gap: 12px; padding-block: 0; padding-inline: 20px 17px; min-height: 56px; }
.v-tuile__txt { flex: 1; min-width: 0; }
.v-tuile__txt h3 { margin: 0; font: 800 1.5625rem/1.1 var(--font-titre); letter-spacing: -.3px; color: #080C2F; }
.v-tuile__txt p { margin: 2px 0 0; font: 400 .78rem/1.3 var(--font); color: #8A90A3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v-tuile__go { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; background: #FCE3D7; color: #080C2F; }
.v-tuile__go svg { width: 17px; height: 17px; }

/* « Les dernières trouvailles » */
.v-section { margin-top: 19px; }
.v-section__tete { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; height: 40px; margin-bottom: 9px; }
.v-section__tete h2 { margin: 0; font: 800 1.875rem/1.1 var(--font-titre); letter-spacing: -.5px; color: #080D2F; }
.v-filtres { display: flex; gap: 10px; }
.v-filtre { height: 34px; padding: 0 20px; border-radius: 999px; border: 0; background: #F1F6F9; color: #1C2340; font: 500 .8125rem/1 var(--font); cursor: pointer; box-shadow: inset 0 0 0 1px #E6EEF3; }
.v-filtre:hover { background: var(--p-aqua-100); }
.v-filtre[aria-pressed="true"] { background: var(--p-teal-600); color: #fff; box-shadow: none; font-weight: 600; }
.v-grille { display: grid; grid-template-columns: 255fr 243fr 248fr 247fr; gap: 16px; }
.v-grille .pcard-media { aspect-ratio: 255 / 130; }
.v-grille--promo { margin-top: 15px; grid-template-columns: 220fr 263fr 257fr 254fr; }
.v-grille--promo .pcard-media { aspect-ratio: 263 / 113; }
.v-grille--promo .pcard-body { padding: 4px 14px 7px; min-height: 69px; }
.v-promo { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px; border-radius: 14px; background: #FDE7D7; }
.v-promo h3 { margin: 0; font: 800 1.75rem/1.1 var(--font-titre); letter-spacing: -.4px; color: #080D2F; }
.v-promo p { margin: 0; font: 400 .875rem/1.3 var(--font); color: #6F6A78; }
.v-promo a { margin-top: auto; align-self: flex-start; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #F8B98F; color: #080D2F; }
.v-promo a svg { width: 14px; height: 14px; }
.v-section__tete h2 a { display: inline-flex; align-items: center; gap: 10px; color: inherit; }
.v-section__tete h2 a svg { width: 22px; height: 22px; color: var(--p-teal-600); transition: transform .15s; }
.v-section__tete h2 a:hover svg { transform: translateX(4px); }
/* cartes de démonstration : photos extraites du template ; bouton cœur de démonstration posé sur le cœur de la photo */
.pcard--demo .v-demo-coeur { position: absolute; top: 6px; right: 8px; width: 34px; height: 34px; border: 0; background: transparent; border-radius: 50%; cursor: pointer; }
.pcard--demo { cursor: default; }
.pcard--demo:hover { transform: none; box-shadow: 0 1px 8px rgba(11, 18, 51, .09); }

/* bloc d'appel : 1042 × 151 px, rayon 22, boîte à droite */
/* La hauteur suit le contenu (151 px au minimum, mesure du template) : ni le titre ni le bouton ne débordent
   du bloc. La troisième colonne réserve la place de la boîte, qui ne recouvre donc plus le dernier avantage. */
.v-appel { position: relative; display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr) 236px; align-items: center; column-gap: 12px; margin-top: 15px; min-height: 151px; padding-block: 16px; padding-inline: 28px 0; border-radius: 22px; background: #D9F4F6; }
.v-appel h2 { margin: 0 0 6px; font: 800 1.625rem/1.08 var(--font-titre); letter-spacing: -.5px; color: #080D2F; max-width: 15em; text-wrap: balance; }
.v-appel p { margin: 0 0 10px; font: 400 .8125rem/1.35 var(--font); color: #2F3A5E; max-width: 46ch; }
.v-appel .v-pill--teal { height: 40px; padding-inline: 14px 26px; font-size: .95rem; }
.v-appel .v-pill__plus { background: rgba(255, 255, 255, .22); color: #fff; width: 26px; height: 26px; }
.v-benefices { display: flex; gap: 14px; justify-content: center; list-style: none; margin: 0; padding: 0; text-align: center; min-width: 0; }
.v-benefice { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 0 1 120px; min-width: 0; font: 400 .78rem/1.3 var(--font); color: #1C2340; }
.v-benefice .v-ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #BBEEF4; color: var(--p-teal-700); }
.v-benefice svg { width: 22px; height: 22px; }
.v-boite { position: absolute; inset-inline-end: -25px; top: 50%; transform: translateY(-50%); width: 254px; height: 168px; pointer-events: none; }
.v-boite img { display: block; width: 100%; height: 100%; }

/* ---------- Responsive (le template ne montre que l'ordinateur : déclinaisons proposées) ---------- */
@media (max-width: 1099px) {
  .v-hero__photo { opacity: .95; height: 240px; top: 98px; }
  .v-head__right .v-lib-long, .v-head__right .v-pill span.v-lib-fav { display: none; }
  .v-head__right .v-pill { width: var(--v-pilule-h); padding: 0; }
  .v-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v-grille--promo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v-promo { grid-column: 1 / -1; flex-direction: row; align-items: center; flex-wrap: wrap; }
  .v-promo a { margin: 0 0 0 auto; }
  .v-appel { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 22px 24px; gap: 16px; }
  .v-appel h2 { max-width: none; }
  .v-boite { display: none; }
  .v-benefices { justify-content: flex-start; }
}
@media (max-width: 899px) {
  :root { --v-marge: 16px; }
  .v-head__in { grid-template-columns: auto 1fr auto; height: 80px; padding-top: 12px; }
  .v-logo { position: static; transform: none; justify-self: center; margin-top: 0; }
  .v-logo img { height: 56px; }
  .v-head--home { position: relative; }
  .v-hero__cadre::before { display: none; }
  .v-head--home .v-logo::before { display: block; }
  .v-head--home .v-head__in { height: 80px; }
  .v-head--home .v-logo img { height: 64px; }
  .v-head__right .v-pill, .v-head__left .v-pill span, .v-head__left .v-pill > svg:last-child { display: none; }
  .v-head__left .v-pill { width: var(--v-pilule-h); padding: 0; }
  .v-head__left { gap: 6px; }
  .v-head__icones { margin: 0; }
  .v-head__icones .v-round--msg { display: none; }
  .v-head__right .v-round--msg-m { display: grid; }
  .v-hero { height: auto; padding-bottom: 150px; }
  .v-hero__cadre { height: auto; }
  .v-hero__corps { padding-top: 14px; }
  .v-hero__titre { font-size: 2rem; line-height: 1.05; }
  .v-hero__photo { top: auto; bottom: -150px; height: 150px; }
  .v-search { width: calc(100% - 32px); }
  .v-search input[type=search] { font-size: .8rem; }
  .v-search .v-pill--teal span { display: none; } .v-search .v-pill--teal { width: 38px; padding: 0; }
  .v-puces { padding: 0 16px; }
  .v-hero__corps { z-index: 2; }
  /* Téléphone : l'action se joue dans la bande basse du bandeau, sous la recherche ; le voile couvre le haut. */
  .v-hero__video video, .v-hero__video img { object-position: var(--v-hero-cadrage-mobile, 70% 100%); }
  .v-hero__video::after { background: linear-gradient(180deg, rgba(241, 250, 251, .96) 0, rgba(241, 250, 251, .9) 52%, rgba(241, 250, 251, 0) 78%); }
  .v-hero__pause { bottom: 10px; right: 12px; }
  .v-tuiles { grid-template-columns: minmax(0, 1fr); }
  .v-tuile--dressing { margin-top: 0; height: 300px; } .v-tuile--dressing > img { height: 240px; }
  .v-section__tete { height: auto; }
  .v-filtres { flex-wrap: wrap; }
  .v-benefices { flex-wrap: wrap; gap: 14px 10px; }
  .v-benefice { flex: 1 1 96px; }
  .v-pied__in { flex-wrap: wrap; }
  .v-pied nav { margin-inline-start: 0; justify-content: flex-start; }
}
@media (max-width: 420px) { .v-grille .pcard-body { padding: 8px 10px 10px; } .v-benefices { flex-direction: column; align-items: flex-start; } .v-benefice { flex-direction: row; width: auto; text-align: left; gap: 12px; } }

/* pages intérieures */
.container { max-width: var(--v-largeur); }
.card { border-radius: 16px; box-shadow: 0 1px 8px rgba(11, 18, 51, .08); border-color: var(--border-soft); }
.fgroup > summary { font-family: var(--font-titre); font-weight: 700; }
.fgroup-groupe { margin: 10px 0 2px; font: 700 .72rem/1 var(--font); text-transform: uppercase; letter-spacing: .06em; color: var(--text-mute); }
.v-groupe-puces { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.v-groupe-puces a { padding: 7px 16px; border-radius: 999px; background: #fff; box-shadow: 0 1px 6px rgba(11, 18, 51, .09); font: 500 .85rem/1 var(--font); }
.v-groupe-puces a:hover { background: var(--p-teal-600); color: #fff; }