/* ══════════════════════════════════════════════════════════════════════════
   base.css — the site shell shared by every page: layout scale, nav, section
   headings, grids, contact block, socials, footer.

   Load order on each page:
     styles.css      → design-system tokens and components (do not edit here)
     css/base.css    → this file
     css/<page>.css  → what that one page adds or overrides
   ══════════════════════════════════════════════════════════════════════════ */

/* — l'attribut hidden doit toujours l'emporter —
   La règle du navigateur est [hidden] { display: none }, mais toute
   déclaration `display` d'une feuille d'auteur la bat : .cart et .co sont
   en `display: grid`, donc leur `hidden` ne faisait rien. Le !important
   est ici l'idiome consacré, pas un raccourci. */
[hidden] { display: none !important; }

/* — confort tactile —
   Deux corrections qui ne se voient pas sur une capture d'écran mais se
   sentent tout de suite au doigt. Elles vivent ici, et non dans
   styles.css, parce que le système de design ne se retouche pas.

   1. Safari sur iPhone agrandit la page dès qu'on touche un champ dont le
      texte fait moins de 16px — et ne la remet pas comme avant. Le
      système est calé sur 14px, donc chaque formulaire du site en était
      victime : commande, connexion, panneau. 16px l'en empêche.

   2. Une cible tactile de 35px se rate. On vise 44px, la valeur retenue
      par Apple, sur les pointeurs grossiers uniquement : à la souris les
      boutons gardent leur taille dessinée. */
@media (max-width: 620px) {
  .input, select.input, textarea.input { font-size: 16px; }
}

@media (pointer: coarse) {
  .btn { min-height: 44px; }
  .btn-icon, .qty-btn { width: 44px; height: 44px; }
  .pn-side-link, .pn-menu a { min-height: 44px; }
}

/* — layout scale — */
:root {
  --leading: 28px;
  --half: 14px;
  --edge: clamp(20px, 5vw, 72px);
  --measure: 58ch;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body { margin: 0; text-wrap: pretty; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 var(--edge); }

/* — navigation — */
.nav {
  padding-inline: max(var(--edge), calc((100% - 1180px) / 2 + var(--edge)));
  position: sticky; top: 0; z-index: 5;
  backdrop-filter: blur(6px);
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
}
.nav a { white-space: nowrap; }
.nav-brand { display: flex; align-items: center; margin-right: auto; }
.nav-brand img { display: block; width: auto; height: 24px; }

/* — menu en écran étroit —
   Le bouton n'existe que si nav.js l'a posé, et la règle qui replie les
   liens est conditionnée à [data-menu], attribut que seul ce script écrit.
   Sans JavaScript les liens restent donc tous visibles, empilés : la barre
   est un peu plus haute, mais le site reste navigable.

   C'est le point important : avant, un `display: none` sec faisait
   disparaître les 7 liens sur téléphone — ni boutique, ni panier, ni
   compte. Le repli ne doit jamais dépendre de ce qui peut manquer. */
.nav-toggle { display: none; }

@media (max-width: 620px) {
  .nav { flex-wrap: wrap; row-gap: var(--space-2); }

  .nav-toggle {
    display: inline-grid; place-items: center; flex: none;
    width: 40px; height: 40px; padding: 0;
    background: none; border: 0; border-radius: var(--radius-md);
    color: inherit; cursor: pointer;
  }
  .nav-toggle:hover { background: color-mix(in srgb, var(--color-text) 8%, transparent); }
  .nav-toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
  .nav-toggle .nav-i-fechar { display: none; }
  .nav-toggle[aria-expanded="true"] .nav-i-abrir { display: none; }
  .nav-toggle[aria-expanded="true"] .nav-i-fechar { display: block; }

  /* un lien par ligne : une vraie liste, pas des mots qui se bousculent */
  .nav a:not(.nav-brand) {
    flex-basis: 100%; padding: 6px 0; font-size: 15px;
  }
  .nav[data-menu="fechado"] a:not(.nav-brand) { display: none; }
}

/* — conversor de moeda — */
.cur-bar {
  display: flex; align-items: center; justify-content: flex-end;
  gap: var(--half); flex-wrap: wrap;
  padding-top: var(--leading);
}
.cur-note {
  font-size: 12px; line-height: 1.5;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.cur-note[hidden] { display: none; }

/* Le sélecteur de partes/moeda.html : une classe partagée, chargée
   partout (public et painel), pour que l'include ait toujours un style
   au lieu de dépendre de la feuille de la page qui l'inclut. */
.cur-select {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: color-mix(in srgb, var(--color-text) 65%, transparent);
}
.cur-select .input { width: auto; }

/* — lien panier + pastille de compteur — */
.cart-link { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.cart-badge {
  display: inline-grid; place-items: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px;
  background: var(--color-accent); color: var(--color-bg);
  font-size: 11px; font-weight: 600; line-height: 1;
}
.cart-badge[hidden] { display: none; }

/* — section headings — */
.kicker {
  display: block; font-size: 13px; letter-spacing: 0.06em;
  text-transform: uppercase; font-weight: 600;
  color: var(--color-accent-700);
  margin: 0 0 calc(var(--leading) - var(--half));
}
.split-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  margin: 0;
  /* size and leading are set per page */
}

/* — page header (inner pages) — */
.p-head { padding: calc(2.5 * var(--leading)) 0 var(--leading); }
.p-head h1 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 44px; margin: 0;
}
.p-head .note {
  font-size: 16px; line-height: var(--leading); max-width: 62ch;
  color: color-mix(in srgb, var(--color-text) 80%, transparent);
  margin: calc(var(--leading) - 1cap) 0 0;
}

.p-link { font-size: 14px; font-weight: 600; color: var(--color-accent-700); text-decoration: none; }
.p-link:hover { text-decoration: underline; }

/* vignette cliquable vers une collection */
.p-figure-link { display: block; }
.p-figure-link .p-figure { transition: transform 160ms ease; }
.p-figure-link:hover .p-figure { transform: scale(1.015); }
@media (prefers-reduced-motion: reduce) { .p-figure-link .p-figure { transition: none; } }
.p-card h3 a { color: inherit; text-decoration: none; }
.p-card h3 a:hover { color: var(--color-accent-700); }

/* — split: figure beside copy — */
.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--leading) clamp(24px, 5vw, 88px);
  align-items: center;
  /* vertical padding is set per page */
}
.split-copy .note { line-height: var(--leading); margin: calc(var(--leading) - 1cap) 0 0; }
.split-figure { margin: 0; width: 100%; border-radius: calc(2 * var(--radius-lg)); overflow: hidden; }
.split-figure img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 5; object-fit: cover;
}
@media (max-width: 780px) { .split { grid-template-columns: 1fr; } }

/* — portfolio grid — */
.p-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--leading) clamp(20px, 3vw, 40px);
}
.p-card { display: flex; flex-direction: column; gap: 12px; }
.p-figure { margin: 0; border-radius: calc(1.5 * var(--radius-lg)); overflow: hidden; }
.p-figure img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 5; object-fit: cover;
}
.p-card h3 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 19px; margin: 0;
}
@media (max-width: 900px) { .p-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .p-grid { grid-template-columns: 1fr; } }

/* — loja call-out panel — */
.loja-panel {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--leading); flex-wrap: wrap;
  background: var(--color-accent-100);
  border-radius: calc(2 * var(--radius-lg));
  padding: calc(1.6 * var(--leading)) clamp(24px, 4vw, 56px);
}

/* — contact block — */
.patch {
  background: var(--color-accent-2-100);
  border-radius: calc(2 * var(--radius-lg));
  padding: calc(2 * var(--leading)) clamp(24px, 4vw, 64px);
}
.patch h3 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 28px; margin: 0;
}
.contact-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: calc(1.5 * var(--leading)) clamp(24px, 4vw, 64px);
  margin-top: var(--leading);
}
.info-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; font-size: 15px; }
.info-row svg { color: var(--color-accent-2-700); flex: none; }
.form-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* — colonne droite du bloc contact : deux boutons, plus de formulaire — */
.contacto-acoes { display: flex; flex-direction: column; align-self: start; }
.contacto-acoes .note { margin: 0 0 var(--space-3); }
/* .btn est un inline-flex centré ; btn-block le passe pleine largeur, et
   l'icône a besoin du gap pour ne pas coller au texte. */
.contacto-acoes .btn { gap: 10px; margin-top: 0; }
.contacto-acoes .btn + .btn { margin-top: 10px; }
.contacto-acoes .btn svg { flex: none; }
.contacto-nota {
  margin: var(--space-3) 0 0; font-size: 13px;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}
.contacto-nota a { color: inherit; }

@media (max-width: 780px) { .contact-grid { grid-template-columns: 1fr; } }

/* — socials — the per-network classes only tune the optical size of the
     text glyphs standing in for the logos ("TT", "f", "IG"). — */
.socials { display: flex; gap: 10px; margin-top: var(--leading); }
.social-btn {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--color-surface); color: var(--color-text);
  text-decoration: none; font-family: var(--font-heading);
}
.social-btn:hover { background: var(--color-accent-2-200); color: var(--color-accent-2-800); }
.social-tt, .social-ig { font-size: 11px; }
.social-fb { font-size: 13px; }

/* — footer — */
footer.site-footer {
  padding: calc(1.5 * var(--leading)) 0;
  font-size: 13px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--half); flex-wrap: wrap;
}
footer.site-footer .socials { margin-top: 0; }
footer.site-footer .social-tt, footer.site-footer .social-ig { font-size: 10px; }
footer.site-footer .social-fb { font-size: 12px; }

/* — dialogue de confirmation (élément <dialog> natif) —
   Une seule boîte : c'est le <dialog> lui-même qui porte le fond, le
   rayon et l'ombre. Le formulaire à l'intérieur ne fait que la mise en
   page, sinon on empile deux conteneurs visibles. */
.dlg {
  width: min(420px, calc(100vw - 2 * var(--leading)));
  padding: 22px;
  border: 0;
  border-radius: calc(var(--radius-lg) * 1.15);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-lg);
}
.dlg::backdrop { background: color-mix(in srgb, #2e2b25 55%, transparent); }

.dlg-corpo { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.dlg-titulo {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 20px; line-height: 1.2; margin: 0;
}
.dlg-texto {
  font-size: 14px; line-height: 1.5; margin: 0;
  color: color-mix(in srgb, var(--color-text) 75%, transparent);
}
.dlg-accoes { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.dlg-accoes .btn { cursor: pointer; }

/* — bouton afficher/masquer le mot de passe (injecté par JS) — */
.pw { position: relative; display: block; }
.pw .input { padding-right: 42px; }
.pw-btn {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; padding: 5px;
  display: grid; place-items: center;
  background: none; border: 0; border-radius: 50%; cursor: pointer;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.pw-btn:hover {
  background: color-mix(in srgb, var(--color-text) 8%, transparent);
  color: var(--color-text);
}
.pw-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.pw-btn svg { width: 18px; height: 18px; display: block; }
.pw-btn[aria-pressed="true"] { color: var(--color-accent-700); }

/* — présence de la marque ——————————————————————————————————
   Le motif de tresses est le sujet même du travail d'Evy : il sert ici
   d'ornement plutôt qu'une forme géométrique quelconque. Toujours en
   aria-hidden ou alt vide — c'est décoratif, pas informatif. */

/* pied de page : petit symbole devant le copyright */
.rodape-marca { display: inline-flex; align-items: center; gap: 10px; }
.rodape-marca img {
  width: auto; height: 22px; flex: none;
  opacity: 0.7;
}

/* états vides : le symbole habite l'écran au lieu de le laisser nu */
.vazio-marca {
  width: auto; height: 68px; margin: 0 auto var(--half);
  opacity: 0.28;
}
.cart-empty { text-align: center; }
.cart-empty .btn { margin-top: var(--half); }