/* =========================================================================
   Share My Vibe, boutique américaine, 2026
   Feuille de style du thème enfant, écrite à partir de la maquette validée
   site/maquette/share-my-vibe.html et de la palette de outils/contrastes.py,
   qui fait foi sur toutes les couleurs.

   Le motif structurel de la page est LA LIGNE POINTILLÉE ROUGE QUI RELIE
   DEUX PAYS. Il n'est pas décoratif : c'est le dessin des quarante t-shirts
   du rayon « Two Countries, One Heart ». La feuille le reprend en filet de
   section et en soulignement de lien.

   L'accent est le SARCELLE : cent trente-deux dessins sont des drapeaux, et
   le sarcelle est la seule famille chromatique qui n'apparaît dans presque
   aucun drapeau national. Le corail est réservé aux cœurs, aux étiquettes et
   aux filets.
   ========================================================================= */

/* ------------------------------------------------------------------ */
/* Polices auto-hébergées                                             */
/*                                                                    */
/* Les fichiers sont dans assets/fonts/, servis par le site lui-même : */
/* aucun appel à Google depuis le navigateur du visiteur. Le sous-     */
/* ensemble latin-ext porte les accents des phrases étrangères du      */
/* rayon « Say I Love You » ; unicode-range fait que le navigateur ne  */
/* le charge que si la page en a besoin.                               */
/*                                                                    */
/* Karla est une police variable : un seul fichier couvre 400 à 700.  */
/* ------------------------------------------------------------------ */

@font-face {
  font-family: "Archivo Black"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/archivo-black-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo Black"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/archivo-black-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Karla"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/karla-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Karla"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/karla-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Sacramento"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/sacramento-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Sacramento"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/sacramento-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------------ */
/* Jetons                                                             */
/* ------------------------------------------------------------------ */

:root {
  /* La PALETTE de outils/contrastes.py, à l'identique. Aucune autre couleur
     n'a le droit d'exister dans cette feuille. La règle d'usage :
       --sarcelle        gros titres (24 px et plus), aplats de bouton et de bandeau
       --sarcelle-fonce  liens et texte accentué sur fond clair
       --sarcelle-clair  liens et surtitres sur fond encre
       --corail          cœurs et filets seulement, jamais un aplat de fond
       --corail-fonce    étiquettes, texte blanc dessus
       --texte-long      le texte courant, sur --sable */
  --encre:          #14181C;
  --encre-doux:     #1D242A;
  --sarcelle:       #0E6F73;
  --sarcelle-fonce: #0A5457;
  --sarcelle-clair: #5CCCD1;
  --sable:          #F6F2EA;
  --sable-bloc:     #EDE7DB;
  --blanc:          #FFFFFF;
  --corail:         #D9553C;
  --corail-fonce:   #B8422C;
  --gris-texte:     #585F66;
  --gris-legende:   #687078;
  --texte-long:     #333A40;
  --desactive:      #868D93;

  /* Les filets sont l'encre et le sable de la palette, avec une transparence :
     ils ne sont pas des couleurs de plus, ce sont les mêmes, atténuées. */
  --filet:             rgba(20, 24, 28, .13);
  --filet-fort:        rgba(20, 24, 28, .22);
  --filet-sombre:      rgba(246, 242, 234, .24);
  --filet-sombre-fort: rgba(246, 242, 234, .42);

  --titre:  "Archivo Black", "Arial Black", Impact, sans-serif;
  --corps:  "Karla", "Segoe UI", system-ui, -apple-system, sans-serif;
  --script: "Sacramento", "Segoe Script", cursive;

  --large:      1180px;
  --r:          4px;
  --r-pilule:   999px;
  --pad-section: 52px 44px;
}

/* ------------------------------------------------------------------ */
/* Base                                                               */
/* ------------------------------------------------------------------ */

.smv * { box-sizing: border-box; }

/* LE BUG QUI CASSE LES PAGES BOUTIQUE.
   WooCommerce pose une classe « columns-N » sur le <body> des archives
   produit, et une règle de thème peut la traduire en « column-count: N ».
   Le corps entier de la page part alors en colonnes de journal, le pied de
   page dans la dernière. Un corps de page n'est jamais multi-colonnes. */
body.smv { column-count: auto; columns: auto; }

body.smv {
  margin: 0;
  background: var(--sable);
  color: var(--texte-long);
  font-family: var(--corps);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* Garde-fou contre le débordement horizontal, interdit par la charte. */
  max-width: 100%;
  overflow-x: hidden;
}

.smv h1, .smv h2, .smv h3, .smv h4 {
  font-family: var(--titre);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.015em;
  margin: 0;
  text-wrap: balance;
  overflow-wrap: break-word;
}

/* Astra pose une couleur EXPLICITE sur ses titres, et une déclaration
   explicite l'emporte sur une couleur héritée. Chaque titre porte donc sa
   couleur, jamais compter sur l'héritage. */
.smv h1, .smv h2, .smv h3, .smv h4 { color: var(--encre); }
.smv-heros h1, .smv-404 h1, .smv-pied h2 { color: var(--sable); }

.smv p { margin: 0; }

/* :where() met la spécificité à zéro : sans lui, « .smv a » écraserait la
   couleur des boutons et des liens de pied de page. */
:where(.smv) a { color: var(--sarcelle-fonce); text-decoration: none; }
.smv img { max-width: 100%; height: auto; display: block; }
.smv ol, .smv ul { margin: 0; padding: 0; list-style: none; }

.smv-icone {
  width: 18px; height: 18px; flex: 0 0 auto;
  stroke: currentColor; fill: none; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
}

.smv-invisible {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.smv-invisible:focus {
  position: static; width: auto; height: auto; margin: 0; clip: auto;
  padding: 12px 20px; background: var(--encre); color: var(--sable); display: inline-block;
}

/* Le focus doit rester visible : c'est la seule façon de naviguer au clavier. */
.smv a:focus-visible, .smv button:focus-visible, .smv input:focus-visible {
  outline: 3px solid var(--sarcelle); outline-offset: 3px; border-radius: var(--r);
}
.smv-heros a:focus-visible, .smv-pied a:focus-visible,
.smv-404 a:focus-visible, .smv-404 input:focus-visible { outline-color: var(--sarcelle-clair); }

@media (prefers-reduced-motion: reduce) {
  .smv * { animation: none !important; transition: none !important; }
}

/* L'en-tête est collant : un lien d'ancre (#returns, #smv-contenu) ou un
   élément focalisé au clavier atterrirait sous la barre. On réserve sa
   hauteur, 69 px en desktop, plus une marge. À mesurer après montage. */
html { scroll-padding-top: 84px; }

/* ---- Boutons ---- */
.smv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--corps); font-weight: 700; font-size: 14.5px;
  padding: 13px 26px; min-height: 44px;
  border-radius: var(--r-pilule); border: 2px solid transparent;
  cursor: pointer; text-align: center;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.smv-btn--plein { background: var(--sarcelle); color: var(--blanc); }
.smv-btn--plein:hover { background: var(--encre); color: var(--sable); }
.smv-btn--vide { background: transparent; border-color: var(--filet-sombre-fort); color: var(--sable); }
.smv-btn--vide:hover { border-color: var(--sable); }
.smv-btn--contour { background: transparent; border-color: var(--filet-fort); color: var(--encre); }
.smv-btn--contour:hover { background: var(--encre); color: var(--sable); border-color: var(--encre); }

/* ---- Pilules : les étagères d'un rayon, les étiquettes ---- */
.smv-pilule {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--filet-fort); border-radius: var(--r-pilule);
  padding: 9px 16px; min-height: 40px;
  font-size: 14px; font-weight: 500; color: var(--gris-texte);
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.smv-pilule:hover { background: var(--encre); color: var(--sable); border-color: var(--encre); }
.smv-pilule-compte { font-size: 12px; font-variant-numeric: tabular-nums; }

/* ---- Surtitres et liens soulignés du pointillé ---- */
.smv-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .19em; text-transform: uppercase;
  color: var(--sarcelle-fonce); margin: 0 0 7px;
}
/* LE MOTIF : le lien porte le pointillé rouge des dessins « two countries ». */
.smv-tout {
  font-size: 13.5px; font-weight: 700; color: var(--sarcelle-fonce);
  border-bottom: 2px dotted var(--corail); padding-bottom: 2px; white-space: nowrap;
}
.smv-tout:hover { color: var(--encre); }

/* ------------------------------------------------------------------ */
/* En-tête, collant                                                   */
/* ------------------------------------------------------------------ */

.smv-tete {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 26px;
  padding: 14px 26px;
  background: var(--sable);
  border-bottom: 1px solid var(--filet);
}
.smv-logo {
  font-family: var(--titre); font-size: 20px; letter-spacing: -.02em;
  color: var(--encre); white-space: nowrap; flex: 0 0 auto;
}
.smv-logo .vibe { color: var(--sarcelle); }

.smv-nav { flex: 1 1 auto; min-width: 0; }
.smv-nav-liste { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.smv-nav-liste a {
  display: inline-block; font-size: 13.5px; font-weight: 500; color: var(--texte-long);
  padding: 4px 0 2px; border-bottom: 2px dotted transparent;
}
.smv-nav-liste a:hover,
.smv-nav-liste .current-menu-item > a,
.smv-nav-liste .current-menu-ancestor > a,
.smv-nav-liste .current-product-cat-ancestor > a { border-bottom-color: var(--corail); color: var(--encre); }

/* La bordure est le seul contour du champ : gris-legende, 4,5:1 sur sable.
   Le filet à 22 % d'encre ne faisait que 1,59:1, sous le seuil de 3:1 des
   bordures de champ. */
.smv-cherche {
  display: flex; align-items: center; gap: 8px; flex: 0 0 auto;
  border: 1px solid var(--gris-legende); border-radius: var(--r-pilule);
  padding: 7px 15px; min-height: 40px; color: var(--gris-legende); font-size: 13px;
}
.smv-cherche input {
  border: 0; background: transparent; font: inherit; color: var(--encre);
  width: 160px; padding: 0; min-width: 0;
}
.smv-cherche input::placeholder { color: var(--gris-legende); opacity: 1; }
.smv-cherche input:focus { outline: none; }
/* Le repère de focus est porté par la pilule entière, pas par le champ nu. */
.smv-cherche:focus-within { border-color: var(--sarcelle); box-shadow: 0 0 0 3px var(--sarcelle); }
.smv-404 .smv-cherche:focus-within { border-color: var(--sarcelle-clair); box-shadow: 0 0 0 3px var(--sarcelle-clair); }
.smv-cherche--large { margin-top: 20px; max-width: 420px; }
.smv-cherche--large .smv-cherche { width: 100%; }
.smv-cherche--large input { width: 100%; }

/* ------------------------------------------------------------------ */
/* Le héros                                                           */
/* ------------------------------------------------------------------ */

.smv-heros {
  background: var(--encre); color: var(--sable);
  padding: 62px 44px 54px; position: relative; overflow: hidden;
}
.smv-heros-texte { max-width: 60ch; position: relative; z-index: 1; }
.smv-heros .smv-surtitre {
  font-size: 11.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--sarcelle-clair); margin: 0 0 18px;
}
.smv-heros h1 {
  font-size: clamp(38px, 6.4vw, 70px); text-transform: uppercase; max-width: 15ch;
}
/* Le cœur en corail, sur encre : 4,5:1, au-dessus du seuil de 3:1 des gros titres. */
.smv-heros h1 .accent { color: var(--corail); }
.smv-chapo { max-width: 54ch; margin: 22px 0 0; font-size: 17px; color: var(--sable); }
/* La cursive : réservée à la phrase étrangère ou au mot d'accent, jamais à un titre. */
.smv-chapo .ph { font-family: var(--script); font-size: 27px; line-height: 1; color: var(--sable); }
.smv-actions { display: flex; gap: 13px; margin-top: 30px; flex-wrap: wrap; }
.smv-mention { margin: 26px 0 0; font-size: 12.5px; color: var(--sable); }

/* La liaison : deux drapeaux, un pointillé, un cœur. Les couleurs sont posées
   ici et non dans le SVG, pour rester dans les variables. */
.smv-liaison {
  position: absolute; right: 40px; top: 50%; transform: translateY(-50%);
  width: 340px; max-width: 34vw;
}
.smv-liaison-sable    { fill: var(--sable); }
.smv-liaison-sarcelle { fill: var(--sarcelle); }
.smv-liaison-corail   { fill: var(--corail); }
.smv-liaison-cadre    { fill: none; stroke: var(--filet-sombre-fort); stroke-width: 1.6; }
.smv-liaison-pointille { fill: none; stroke: var(--corail); stroke-width: 3; stroke-dasharray: 2 9; stroke-linecap: round; }
.smv-liaison-coeur    { fill: var(--corail); }

/* ------------------------------------------------------------------ */
/* Bandeau défilant des pays                                          */
/*                                                                    */
/* Aplat sarcelle et non corail : la palette interdit le corail en     */
/* fond. Le texte est sable, couple vérifié dans contrastes.py.        */
/* ------------------------------------------------------------------ */

.smv-bandeau { background: var(--sarcelle); color: var(--sable); padding: 11px 0; overflow: hidden; }
.smv-bandeau-piste {
  display: flex; gap: 34px; width: max-content;
  font-family: var(--titre); font-size: 13px; letter-spacing: .13em; text-transform: uppercase;
  animation: smv-defile 34s linear infinite;
}
.smv-bandeau-piste span { white-space: nowrap; }
/* La piste contient deux fois la liste : à -50 % on est revenu au départ. */
@keyframes smv-defile { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .smv-bandeau-piste { width: auto; flex-wrap: wrap; justify-content: center; padding: 0 24px; }
  /* Sans animation, la seconde copie de la liste afficherait chaque pays deux fois. */
  .smv-bandeau-copie { display: none; }
}

/* ------------------------------------------------------------------ */
/* Sections                                                           */
/* ------------------------------------------------------------------ */

.smv-section { padding: var(--pad-section); }
.smv-section--bloc { background: var(--sable-bloc); }
/* LE MOTIF, en filet de section. */
.smv-section + .smv-section { border-top: 2px dotted var(--corail); }

.smv-tete-section {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 20px; margin-bottom: 26px; flex-wrap: wrap;
}
.smv-tete-section h1, .smv-tete-section h2 { font-size: 30px; }

/* ------------------------------------------------------------------ */
/* Grille produits et cartes                                          */
/* ------------------------------------------------------------------ */

.smv-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(226px, 1fr));
  gap: 22px;
}

.smv-carte {
  background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--r);
  overflow: hidden; display: flex; flex-direction: column; color: inherit;
  transition: border-color .16s ease, transform .16s ease;
}
.smv-carte:hover { border-color: var(--filet-fort); transform: translateY(-2px); }
/* Couleur explicite au survol des deux liens composés (carte, tuile de rayon) :
   une règle « a:hover { color } » venue d'ailleurs ne doit pas les recolorer. */
.smv-carte:hover, .smv-carte:hover p, .smv-rayon:hover, .smv-rayon:hover p { color: var(--texte-long); }

.smv-visuel { aspect-ratio: 1 / 1; background: var(--sable-bloc); position: relative; overflow: hidden; }
.smv-visuel img { width: 100%; height: 100%; object-fit: cover; }

/* Produit sans image : jamais de case blanche ni d'icône cassée. */
.smv-visuel-vide {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  padding: 16px; text-align: center; background: var(--sable-bloc);
  font-family: var(--titre); font-size: 15px; color: var(--gris-texte); line-height: 1.2;
}

/* L'étiquette de vente : blanc sur corail foncé, 5,45:1. Seul usage du corail
   en aplat, et il est minuscule. */
.smv-etiquette {
  position: absolute; top: 10px; left: 10px;
  background: var(--corail-fonce); color: var(--blanc);
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 3px;
}
.smv-carte-corps { padding: 14px 15px 17px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.smv-carte h2, .smv-carte h3 {
  font-family: var(--corps); font-weight: 700; font-size: 14.5px; line-height: 1.32;
  letter-spacing: 0; text-wrap: pretty; color: var(--encre);
}
.smv-carte p { font-size: 13px; color: var(--texte-long); line-height: 1.45; }
.smv-amazon {
  margin-top: auto; padding-top: 10px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--sarcelle-fonce);
}
.smv-carte:hover .smv-amazon { text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }

/* ------------------------------------------------------------------ */
/* Les six rayons                                                     */
/* ------------------------------------------------------------------ */

.smv-rayons { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 18px; }
.smv-rayon {
  background: var(--blanc); border: 1px solid var(--filet);
  border-left: 4px solid var(--sarcelle); border-radius: var(--r);
  padding: 20px 21px; color: inherit;
  display: flex; flex-direction: column; gap: 7px;
  transition: border-color .16s ease, transform .16s ease;
}
/* Le liseré alterne, comme sur la maquette, pour que la grille ait du rythme. */
.smv-rayon:nth-child(2) { border-left-color: var(--corail); }
.smv-rayon:nth-child(3) { border-left-color: var(--sarcelle-clair); }
.smv-rayon:nth-child(4) { border-left-color: var(--gris-legende); }
.smv-rayon:nth-child(5) { border-left-color: var(--corail); }
.smv-rayon:nth-child(6) { border-left-color: var(--encre); }
.smv-rayon:hover { transform: translateY(-2px); border-color: var(--filet-fort); }
.smv-rayon h3 { font-size: 19px; }
.smv-rayon p { font-size: 13.5px; color: var(--texte-long); }
.smv-rayon .compte {
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sarcelle-fonce); margin-top: 4px;
}

/* ------------------------------------------------------------------ */
/* Fil d'Ariane                                                       */
/* ------------------------------------------------------------------ */

.smv-fil { font-size: 12.5px; color: var(--gris-legende); margin: 0 0 12px; }
.smv-fil ol { display: flex; flex-wrap: wrap; gap: 6px; }
.smv-fil a { color: var(--gris-legende); }
.smv-fil a:hover { color: var(--encre); text-decoration: underline; text-decoration-style: dotted; }
.smv-fil [aria-current="page"] { color: var(--encre); }

/* ------------------------------------------------------------------ */
/* Page de rayon, boutique, étiquette, recherche                      */
/* ------------------------------------------------------------------ */

.smv-rayon-page .smv-tete-section { margin-bottom: 26px; }
.smv-rayon-page h1 { font-size: clamp(28px, 4vw, 38px); }
.smv-chapo-rayon { max-width: 60ch; margin: 10px 0 0; color: var(--gris-texte); }
.smv-chapo-rayon p { margin: 0; }
.smv-compte-rayon {
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sarcelle-fonce); white-space: nowrap;
}

.smv-etageres { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; }
.smv-etageres--centrees { justify-content: center; margin: 24px 0 0; }

.smv-pagination {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-top: 44px;
}
.smv-pagination-compte { font-size: 14px; color: var(--gris-legende); font-variant-numeric: tabular-nums; }
.smv-pagination-liste ul { display: flex; gap: 8px; flex-wrap: wrap; }
.smv-pagination-liste a, .smv-pagination-liste span {
  min-width: 44px; min-height: 44px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--filet-fort); border-radius: var(--r);
  color: var(--encre); font-variant-numeric: tabular-nums; font-size: 14px;
}
.smv-pagination-liste a:hover { background: var(--encre); color: var(--sable); border-color: var(--encre); }
.smv-pagination-liste .current { background: var(--encre); color: var(--sable); border-color: var(--encre); }
.smv-pagination-liste .dots { border-color: transparent; color: var(--desactive); }

/* Rayon vide et recherche sans résultat : une sortie de secours. */
.smv-vide { text-align: center; max-width: 60ch; margin: 0 auto; padding: 56px 24px; }
.smv-vide h2 { font-size: clamp(24px, 3.4vw, 34px); }
.smv-vide p { font-size: 16px; color: var(--gris-texte); margin-top: 14px; }
.smv-vide-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }

/* ------------------------------------------------------------------ */
/* Fiche produit                                                      */
/* ------------------------------------------------------------------ */

.smv-fiche {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  gap: 42px; padding: 42px 44px;
}
/* min-width: 0 sur les deux colonnes : sans lui, une piste « 1fr » ne descend
   jamais sous la largeur minimale de son contenu, et la fiche débordait de
   327 px à 375 px de large. Mesuré, pas supposé. */
.smv-fiche-visuel, .smv-fiche-infos { min-width: 0; }
.smv-fiche-visuel img { border-radius: var(--r); aspect-ratio: 1 / 1; object-fit: cover; width: 100%; background: var(--sable-bloc); }
.smv-fiche-visuel .smv-visuel-vide { aspect-ratio: 1 / 1; height: auto; border-radius: var(--r); font-size: 22px; }
/* La galerie : la seconde image, sous la première, jamais un carrousel. */
.smv-galerie { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 12px; }

.smv-fiche-infos { min-width: 0; }
.smv-fiche h1 { font-size: clamp(26px, 3.2vw, 33px); margin-bottom: 12px; }
.smv-accroche { font-size: 17px; color: var(--texte-long); margin: 0 0 22px; }

.smv-achat {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 17px 19px; background: var(--sable-bloc); border-radius: var(--r); margin-bottom: 26px;
}
.smv-achat .note { font-size: 12.5px; color: var(--gris-texte); flex: 1; min-width: 180px; }

/* Le corps, écrit en HTML dans les lots : h2, h3, p, strong. */
.smv-corps { font-size: 16px; line-height: 1.65; color: var(--texte-long); }
.smv-corps h2 { font-size: 21px; margin: 26px 0 9px; }
.smv-corps h3 { font-size: 15px; margin: 22px 0 7px; letter-spacing: 0; }
.smv-corps p { margin: 0 0 12px; max-width: 66ch; }
.smv-corps strong { color: var(--encre); }
.smv-corps a { color: var(--sarcelle-fonce); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
.smv-corps ul, .smv-corps ol { padding-left: 22px; list-style: revert; margin-bottom: 12px; }

.smv-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 24px; }
.smv-tag {
  display: inline-flex; align-items: center; min-height: 32px;
  font-size: 11.5px; color: var(--gris-texte);
  border: 1px solid var(--filet-fort); border-radius: var(--r-pilule); padding: 5px 12px;
}
.smv-tag:hover { background: var(--encre); color: var(--sable); border-color: var(--encre); }

/* ------------------------------------------------------------------ */
/* Pages simples et articles                                          */
/* ------------------------------------------------------------------ */

.smv-page { padding: var(--pad-section); max-width: var(--large); margin: 0 auto; }
.smv-page--etroite { max-width: 820px; }
.smv-page-tete { margin-bottom: 30px; }
.smv-page-tete h1 { font-size: clamp(30px, 4.4vw, 46px); }
.smv-chapo-page { font-size: 17px; color: var(--gris-texte); max-width: 62ch; margin-top: 12px; }
.smv-couverture { margin: 0 0 28px; }
.smv-couverture img { width: 100%; border-radius: var(--r); }

/* Contenu venu de l'éditeur WordPress. Mesure de lecture limitée : au-delà de
   70 caractères par ligne, l'œil perd le début de la ligne. */
.smv-riche { font-size: 17px; line-height: 1.7; color: var(--texte-long); max-width: 70ch; }
.smv-riche > * + * { margin-top: 18px; }
.smv-riche h2 { font-size: clamp(22px, 2.6vw, 28px); margin-top: 40px; }
.smv-riche h3 { font-size: 19px; margin-top: 28px; }
.smv-riche a { color: var(--sarcelle-fonce); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
.smv-riche a:hover { color: var(--encre); }
.smv-riche strong { color: var(--encre); }
.smv-riche ul, .smv-riche ol { padding-left: 22px; list-style: revert; }
.smv-riche li + li { margin-top: 8px; }
.smv-riche img { border-radius: var(--r); }
.smv-riche blockquote { border-left: 3px dotted var(--corail); padding-left: 20px; color: var(--encre); margin-left: 0; }
.smv-riche table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.smv-riche th, .smv-riche td { border: 1px solid var(--filet); padding: 10px 12px; text-align: left; }

.smv-articles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 22px; }
.smv-article {
  display: flex; flex-direction: column; background: var(--blanc);
  border: 1px solid var(--filet); border-radius: var(--r); overflow: hidden; color: inherit;
  transition: border-color .16s ease, transform .16s ease;
}
.smv-article:hover { border-color: var(--filet-fort); transform: translateY(-2px); }
.smv-article-visuel img { aspect-ratio: 16 / 10; width: 100%; object-fit: cover; }
.smv-article-corps { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; }
.smv-article h2 { font-family: var(--corps); font-weight: 700; font-size: 18px; line-height: 1.3; letter-spacing: 0; }
.smv-article p { font-size: 14.5px; color: var(--texte-long); flex: 1 1 auto; }
.smv-article-lire { font-size: 13.5px; font-weight: 700; color: var(--sarcelle-fonce); }

/* ------------------------------------------------------------------ */
/* Pied de page                                                       */
/* ------------------------------------------------------------------ */

.smv-pied { background: var(--encre); color: var(--sable); padding: 40px 44px 32px; font-size: 13.5px; }
.smv-pied-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 28px; }
.smv-pied-titre {
  font-family: var(--corps); font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  margin-bottom: 11px; font-weight: 700;
}
.smv-pied-liens li { padding: 3px 0; }
.smv-pied a { color: var(--sable); }
.smv-pied a:hover { color: var(--sarcelle-clair); }
.smv-pied-bas {
  margin-top: 30px; padding-top: 18px;
  border-top: 2px dotted var(--filet-sombre);
  font-size: 12.5px; max-width: 78ch;
}
.smv-copyright { font-size: 12px; margin-top: 10px; }

/* ------------------------------------------------------------------ */
/* 404                                                                */
/* ------------------------------------------------------------------ */

.smv-404 {
  background: var(--encre); color: var(--sable); padding: 80px 44px; text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.smv-404 h1 { font-size: clamp(34px, 6vw, 60px); text-transform: uppercase; }
.smv-404 p { font-size: 17px; margin-top: 18px; max-width: 52ch; }
.smv-404 .smv-cherche { margin-top: 28px; width: 100%; max-width: 420px; border-color: var(--filet-sombre-fort); color: var(--sable); }
.smv-404 .smv-cherche input { color: var(--sable); width: 100%; }
.smv-404 .smv-cherche input::placeholder { color: var(--sable); opacity: .8; }

/* ------------------------------------------------------------------ */
/* Écrans moyens                                                      */
/* ------------------------------------------------------------------ */

@media (max-width: 1024px) {
  .smv-articles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .smv-fiche { grid-template-columns: minmax(0, 1fr); gap: 26px; }
}

@media (max-width: 900px) {
  /* La liaison chevaucherait le texte : elle disparaît, le texte reste. */
  .smv-liaison { display: none; }
}

/* ------------------------------------------------------------------ */
/* Téléphone                                                          */
/* ------------------------------------------------------------------ */

@media (max-width: 767px) {
  :root { --pad-section: 30px 20px; }

  /* Garde-fou contre le débordement horizontal, mesuré à 375 px. Un seul
     élément trop large décale toute la page et coupe le contenu. */
  html, body.smv { max-width: 100%; overflow-x: hidden; }
  .smv-tete, .smv-heros, .smv-bandeau, .smv-section, .smv-fiche, .smv-page, .smv-pied, .smv-404 { max-width: 100vw; }

  /* En-tête sur deux lignes : logo et recherche, puis les rayons qui
     défilent à l'horizontale DANS leur propre boîte, sans faire déborder
     la page. Pas de menu replié, pas de script. */
  .smv-tete { flex-wrap: wrap; gap: 10px 12px; padding: 12px 16px; }
  .smv-logo { font-size: 17px; }
  .smv-cherche { margin-left: auto; padding: 6px 12px; min-height: 36px; }
  .smv-cherche input { width: 110px; font-size: 13px; }
  /* overflow-x: auto force overflow-y à auto : l'anneau de focus (3 px + 3 px
     de décalage) serait rogné en haut et en bas. La liste réserve la place,
     et la marge négative de .smv-nav annule ce décalage dans la mise en page. */
  .smv-nav { flex: 1 0 100%; order: 3; overflow-x: auto; scrollbar-width: none; margin: -6px -4px -8px; }
  .smv-nav::-webkit-scrollbar { display: none; }
  .smv-nav-liste { flex-wrap: nowrap; gap: 18px; white-space: nowrap; padding: 6px 4px 8px; }
  /* L'en-tête sur deux lignes est plus haut : environ 100 px. */
  html { scroll-padding-top: 116px; }

  .smv-heros { padding: 40px 20px 34px; }
  .smv-heros h1 { font-size: 38px; }
  .smv-chapo { font-size: 16px; }
  .smv-chapo .ph { font-size: 24px; }
  .smv-actions { flex-direction: column; align-items: stretch; }

  .smv-bandeau-piste { font-size: 12px; gap: 26px; animation-duration: 26s; }

  .smv-tete-section h1, .smv-tete-section h2 { font-size: 26px; }
  .smv-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .smv-carte-corps { padding: 12px 12px 14px; }
  .smv-carte h2, .smv-carte h3 { font-size: 13.5px; }
  .smv-carte p { font-size: 12.5px; }

  .smv-rayons { grid-template-columns: 1fr; }

  .smv-fiche { padding: 22px 20px 30px; }
  .smv-achat { padding: 14px 15px; }
  .smv-achat .smv-btn { width: 100%; }

  .smv-articles { grid-template-columns: 1fr; }
  .smv-pied { padding: 32px 20px 26px; }
  .smv-pied-grille { grid-template-columns: 1fr; gap: 22px; }
  .smv-404 { padding: 52px 20px; }
  .smv-pagination { justify-content: center; }
}