/* ============================================================
   Nundino — landing v6 · pages secondaires
   Guides SEO, pages légales, création de boutique.
   Chargé APRÈS styles.css, dont il reprend tous les tokens.
   Même vocabulaire que l'accueil : porcelaine, filets hairline,
   un seul terracotta. Pas de cartes : des sections séparées par
   un filet. Le kraft n'apparaît que sur l'appel à l'action.
   ============================================================ */

.nav__back {
  font-size: 0.92rem;
  color: var(--soft);
  text-decoration: none;
  padding-block: 0.45rem; /* cible tactile */
}
.nav__back:hover { color: var(--ink); }

.page { padding: clamp(7.5rem, 15vh, 10rem) 0 clamp(3.5rem, 7vw, 5.5rem); }
.page__wrap { max-width: 46rem; margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2rem); }

.crumb {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--soft);
  margin-bottom: 1.6rem;
}
.crumb a { text-decoration: none; }
.crumb a:hover { color: var(--thread-text); }

.page__kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--soft);
  margin-bottom: 0.9rem;
}
.page h1 { font-size: clamp(2rem, 4.4vw, 3rem); margin-bottom: 0.9rem; }
.page__meta { font-family: var(--font-mono); font-size: 0.78rem; color: var(--soft); }
.page__lead { font-size: 1.14rem; line-height: 1.75; color: var(--soft); margin-top: 1.5rem; }

/* ---------- Corps d'article ---------- */
.doc { margin-top: clamp(2.4rem, 5vw, 3.4rem); }
.doc__part { border-top: 1px solid var(--hairline); padding-top: 2.3rem; margin-top: 2.3rem; }
.doc__part:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.doc h2 { font-size: clamp(1.35rem, 2.6vw, 1.75rem); margin-bottom: 0.9rem; }
.doc h3 { font-size: 1.05rem; margin: 1.7rem 0 0.5rem; }
.doc p { margin-bottom: 1rem; color: var(--soft); }
.doc p:last-child { margin-bottom: 0; }
.doc strong, .doc b { color: var(--ink); font-weight: 700; }
.doc ul { margin-bottom: 1.2rem; }
.doc li { position: relative; padding-left: 1.5rem; margin-bottom: 0.55rem; color: var(--soft); }
.doc li::before { content: "\2014"; position: absolute; left: 0; color: var(--thread); }
/* ⚠️ `:not(.btn)` est OBLIGATOIRE, et c'est un défaut qui a vécu sur SEPT pages.
   `.doc a` (0-1-1) l'emporte sur `.btn--primary` (0-1-0) : le bouton « Créer ma
   boutique » posé en fin d'article prenait donc `--ink` (#262219) au lieu du
   blanc — un brun foncé sur le terracotta, soit 2,7:1, sous le seuil AA — et
   héritait au passage d'un soulignement. Le libellé se lisait gris et le bouton
   ne ressemblait plus à un bouton. Une règle de lien ne doit jamais atteindre
   quelque chose qui a déjà sa propre livrée. */
.doc a:not(.btn) {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--thread);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.doc a:not(.btn):hover { color: var(--thread-text); }

/* ---------- L'annotation en marge ----------
   Une remarque qui interrompt la lecture sans la couper : mise en garde légale,
   limite assumée, précision qui évite une erreur. Le langage est celui de la
   page — un filet de couleur en marge, comme un trait au crayon, et le lin des
   sections. Pas d'encadré bleu à picto, qui viendrait d'une autre grammaire. */
.doc__note {
  margin-block: 1.4rem;
  padding: 1rem 1.1rem;
  background: var(--linen);
  border-left: 3px solid var(--thread);
  border-radius: 0 var(--r-stamp) var(--r-stamp) 0;
}
.doc__note p { margin-bottom: 0; font-size: 0.95rem; }

/* tableau de comparaison inséré dans un article */
.doc .board { margin-block: 1.4rem; }

/* tableau simple dans un article (bases légales, coûts…) */
.doc__table { overflow-x: auto; margin-block: 1.4rem; }
.doc__table table { width: 100%; border-collapse: collapse; font-size: 0.93rem; min-width: 24rem; }
.doc__table th,
.doc__table td { text-align: left; padding: 0.7rem 0.9rem; border-top: 1px solid var(--hairline); }
.doc__table thead th {
  border-top: none;
  border-bottom: 2px solid var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
}
.doc__table td { color: var(--soft); }

/* ---------- Appel à l'action : le colis ---------- */
.doc__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin: 3rem 0;
  padding: 2rem;
  border-radius: var(--r-paper);
  background-color: var(--kraft);
  background-image:
    repeating-linear-gradient(90deg, rgba(120, 75, 35, 0.07) 0 3px, transparent 3px 17px),
    linear-gradient(180deg, rgba(255, 235, 200, 0.12), rgba(90, 55, 20, 0.08));
}
.doc__cta-text { flex: 1 1 20rem; }
.doc__cta-title { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; margin-bottom: 0.4rem; }
.doc__cta p { color: rgba(38, 34, 25, 0.78); margin: 0; }

/* ---------- Pour aller plus loin ---------- */
.doc__related { margin-top: 3rem; border-top: 1px solid var(--hairline); padding-top: 1.8rem; }
.doc__related-title {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--soft);
  margin-bottom: 0.9rem;
}
.doc__related li { padding-left: 1.5rem; margin-bottom: 0.5rem; }

/* FAQ d'article : une seule colonne */
.faq--doc { grid-template-columns: 1fr; gap: 0; max-width: none; }

/* ============================================================
   FORMULAIRE DE CRÉATION — le bordereau à remplir
   ============================================================ */
/* overflow-x: clip — la ficelle du colis d'aperçu déborde de 7 px de chaque
   côté (c'est voulu) ; « clip » l'empêche de créer un défilement latéral sans
   créer de conteneur de défilement, contrairement à « hidden ». */
.form-page {
  padding: clamp(7.5rem, 15vh, 10rem) 0 clamp(3.5rem, 7vw, 5rem);
  overflow-x: clip;
}
.form-page__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.form-page h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); margin-bottom: 0.9rem; }
.form-page__lead { color: var(--soft); margin-bottom: 2.2rem; }

.field { margin-bottom: 1.4rem; }
.field label { display: block; font-weight: 600; font-size: 0.92rem; margin-bottom: 0.45rem; }
.field__opt { font-weight: 400; color: var(--soft); }
/* Contrôles = pilules, comme les boutons et la barre. Les surfaces
   (tableaux, encarts, colis) gardent leur petit rayon. */
.field input,
.field select {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--card);
  padding: 0.82rem 1.2rem;
  border: 1px solid var(--hairline);
  border-radius: var(--r-stamp);
}
.field input::placeholder { color: rgba(107, 98, 88, 0.6); }

/* Le sélecteur : chevron dessiné plutôt que la flèche native, qui vient buter
   contre la courbe de la pilule. Le fond (var(--card)) vient de la règle
   ci-dessus — on ne redéfinit ici que l'image, sinon on l'effacerait. */
.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 3rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6258' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.3rem center;
  background-size: 14px;
}
.field select:hover { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23262219' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.field input:focus-visible,
.field select:focus-visible {
  outline: none;
  border-color: var(--thread);
  box-shadow: 0 0 0 3px rgba(193, 80, 46, 0.16);
}
.field__slug {
  display: flex;
  align-items: stretch;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--r-stamp);
  overflow: hidden;
}
.field__slug:focus-within { border-color: var(--thread); box-shadow: 0 0 0 3px rgba(193, 80, 46, 0.16); }
.field__slug input { border: none; border-radius: 0; background: transparent; }
.field__slug input:focus-visible { box-shadow: none; }
.field__suffix {
  display: flex;
  align-items: center;
  padding-inline: 0.9rem 1.2rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--soft);
  background: var(--linen);
  border-left: 1px solid var(--hairline);
  white-space: nowrap;
}
.field__hint { font-size: 0.8rem; color: var(--soft); margin-top: 0.45rem; }
.field__password { position: relative; }
.field__password input { padding-right: 3rem; }
.field__eye {
  position: absolute;
  right: 0.55rem;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  background: none;
  border: none;
  padding: 0.4rem;
  color: var(--soft);
  cursor: pointer;
}
.field__eye:hover { color: var(--ink); }

.form__error {
  margin-bottom: 1.2rem;
  padding: 0.75rem 1.2rem;
  font-size: 0.9rem;
  color: var(--thread-dark);
  background: rgba(193, 80, 46, 0.08);
  border-radius: var(--r-stamp);
}
.form__legal { font-size: 0.86rem; line-height: 1.7; color: var(--soft); margin-top: 1.1rem; text-align: center; }
.form__legal a { color: var(--ink); }

/* Aperçu : le bordereau du colis, repris du héro */
.pv { display: flex; align-items: center; gap: 0.9rem; }
.pv-badge {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: var(--r-paper);
  background: var(--thread);
  color: #fff;
  font-weight: 600;
  font-size: 1.35rem;
  text-transform: uppercase;
}
.pv__addr { font-family: var(--font-mono); font-size: 0.9rem; font-weight: 700; overflow-wrap: anywhere; }
.pv__addr small { display: block; font-family: var(--font-body); font-size: 0.76rem; font-weight: 400; color: var(--soft); margin-top: 0.2rem; }

.checks { margin-top: 1.6rem; }
.checks li { position: relative; padding-left: 1.6rem; margin-bottom: 0.6rem; font-size: 0.92rem; color: var(--soft); }
.checks li::before { content: "\2713"; position: absolute; left: 0; color: var(--valid-text); font-weight: 700; }
.aside-fr {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--hairline);
  font-size: 0.85rem;
  color: var(--soft);
}

/* ============================================================
   PAGE « BIENTÔT » — liste d'attente
   ============================================================ */
.soon { padding: clamp(7.5rem, 15vh, 10rem) 0 clamp(3.5rem, 7vw, 5rem); }
.soon__inner { max-width: 38rem; margin-inline: auto; text-align: center; }
.soon h1 { font-size: clamp(2rem, 4.4vw, 3rem); margin-bottom: 1rem; }
.soon h1 em { font-style: normal; color: var(--thread); }
.soon__lead { color: var(--soft); font-size: 1.1rem; line-height: 1.75; margin-bottom: 1.5rem; }
.soon__gift {
  display: inline-block;
  font-family: var(--font-note);
  font-size: 1.3rem;
  color: var(--thread-text);
  margin-bottom: 2rem;
  transform: rotate(-1.5deg);
}
.soon__form { display: flex; gap: 0.7rem; max-width: 28rem; margin-inline: auto; }
.soon__form input {
  flex: 1;
  min-width: 0;
  font: inherit;
  color: var(--ink);
  background: var(--card);
  padding: 0.82rem 1.1rem;
  border: 1px solid var(--hairline);
  border-radius: var(--r-stamp);
}
.soon__form input:focus-visible {
  outline: none;
  border-color: var(--thread);
  box-shadow: 0 0 0 3px rgba(193, 80, 46, 0.16);
}
.soon__form .btn { flex: none; }
.soon__note { font-size: 0.82rem; color: var(--soft); margin-top: 1rem; }
.soon__error {
  display: none;
  max-width: 28rem;
  margin: 1rem auto 0;
  padding: 0.75rem 1.2rem;
  font-size: 0.9rem;
  color: var(--thread-dark);
  background: rgba(193, 80, 46, 0.08);
  border-radius: var(--r-stamp);
}
.soon__error.is-visible { display: block; }
.soon__success { display: none; }
.soon__success.is-visible { display: block; }
.soon__success h2 { font-size: 1.7rem; margin-bottom: 0.5rem; }
.soon__success p { color: var(--soft); }
.soon__checks { max-width: 26rem; margin: 2.8rem auto 0; text-align: left; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 860px) {
  .form-page__grid { grid-template-columns: 1fr; }
  .form-page__aside { max-width: 26rem; }
}
@media (max-width: 640px) {
  .doc__cta { padding: 1.5rem 1.2rem; }
  .soon__form { flex-direction: column; }
  .soon__form .btn { width: 100%; }
  .field__suffix { font-size: 0.78rem; padding-inline: 0.7rem; }
}

/* ============================================================
   ANNUAIRE DES BOUTIQUES (boutiques.html)
   ------------------------------------------------------------
   Une liste de cartes, et rien de plus décoré : ce qui compte ici est que
   chaque boutique reçoive un vrai lien depuis un domaine déjà indexé. Le nom
   porte le lien (et non la carte entière) pour qu'il reste un titre : c'est
   lui qu'un moteur lit comme l'intitulé du lien.
   ============================================================ */
/* ══ ANNUAIRE DES BOUTIQUES ═══════════════════════════════════════════════════
   Une carte = une étiquette collée sur le colis : papier presque blanc
   (`--card`) posé sur la porcelaine de la page, filet fin, rayon « papier ». Le
   seul aplat de couleur est la pastille du logo — un cachet, donc un cercle,
   la seule forme que les deux familles de rayons laissent volontairement de
   côté.

   Ce que la carte doit répondre, dans cet ordre : à qui j'ai affaire (logo +
   nom), d'où et combien (ville, nombre de produits), ce qu'on y trouve
   (description), et où ça mène (l'adresse, puis l'invitation). L'ancienne
   version donnait le nom, une phrase et un domaine — rien qui donne envie
   d'entrer.
   ═══════════════════════════════════════════════════════════════════════════ */
.shoplist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20.5rem, 1fr));
  gap: 1.1rem;
  list-style: none;
  margin: 2.2rem 0 0;
  padding: 0;
}

/* ⚠️ `position: relative` porte le lien étiré du titre (cf. `.shopcard__name a`).
   Sans lui, la zone cliquable ne se cale sur rien et couvre la page entière. */
.shopcard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1.3rem 1.4rem 1.1rem;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--r-paper);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.shopcard:hover {
  transform: translateY(-3px);
  border-color: var(--thread);
  box-shadow: 0 10px 24px rgba(70, 45, 15, 0.14);
}

/* Le clavier obtient la même réaction que la souris. Règle SÉPARÉE et non
   ajoutée à la liste ci-dessus : un sélecteur invalide invalide toute la règle
   qui le contient, et un navigateur sans `:has()` perdrait aussi le survol.
   L'anneau de focus lui-même reste celui du lien (règle globale
   `:focus-visible`), pour ne pas en dessiner deux l'un dans l'autre. */
.shopcard:has(.shopcard__name a:focus-visible) {
  transform: translateY(-3px);
  border-color: var(--thread);
  box-shadow: 0 10px 24px rgba(70, 45, 15, 0.14);
}

.shopcard__head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.shopcard__mark {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--hairline);
  overflow: hidden;
}

/* ⚠️ `contain`, jamais `cover` : le logo d'un marchand a le rapport qu'il veut,
   et un recadrage centré ampute précisément ce qui l'identifie. Le disque blanc
   derrière garde un PNG transparent lisible sur le papier crème. */
.shopcard__mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0.3rem;
}

/* Sans logo, l'initiale — plutôt qu'un trou dans la grille ou, pire, une image
   cassée. Lin et terracotta de texte : on reste dans les couleurs de la maison,
   et la pastille ne se met pas à concurrencer la marque. */
.shopcard__mark--initial {
  background: var(--linen);
  border-color: transparent;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
  color: var(--thread-text);
}

.shopcard__id { min-width: 0; }

.shopcard__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.3;
}

.shopcard__name a {
  color: var(--ink);
  text-decoration: none;
}

/* ⚠️ Toute la carte est cliquable, et il n'y a pourtant qu'UN seul lien.
   Ce pseudo-élément recouvre la carte : la souris vise un rectangle entier au
   lieu d'une ligne de titre, tandis que le nom accessible reste celui de la
   boutique — un lecteur d'écran n'a pas à écouter la carte complète pour savoir
   où il va. Même partage que les cartes du tableau des commandes de
   l'application : le lien porte l'action, la surface n'est qu'un confort de
   souris. Conséquence assumée : le texte de la carte n'est plus sélectionnable. */
.shopcard__name a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.shopcard:hover .shopcard__name a { color: var(--thread-text); }

.shopcard__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0.2rem 0 0;
  font-size: 0.8rem;
  color: var(--soft);
}

.shopcard__city::after {
  content: "·";
  margin-left: 0.5rem;
}

/* Le nombre de produits est la seule promesse chiffrée de la carte : c'est lui
   qui distingue un atelier bien garni d'une boutique qui vient d'ouvrir. Il est
   donc appuyé, sans pour autant réclamer une couleur de plus. */
.shopcard__count {
  font-weight: 600;
  color: var(--ink);
}

.shopcard__desc {
  margin: 0;
  color: var(--soft);
  font-size: 0.94rem;
  line-height: 1.55;
  /* Trois lignes au plus : sans cela une description longue étire sa carte, et
     la grille se lit comme un escalier au lieu d'une rangée. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.shopcard__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin: auto 0 0;
  padding-top: 0.85rem;
  border-top: 1px solid var(--hairline);
}

/* ⚠️ `--soft` et non `--kraft`. Le kraft (#c69e6f) sur l'étiquette presque
   blanche plafonne à 2,1:1, très en dessous du seuil AA — et c'était la ligne
   qui donne l'adresse exacte de la boutique, celle qu'on recopie. Le registre
   « technique » est porté par la chasse fixe, pas par une couleur qu'on ne lit
   pas. Même correction que `--thread` → `--thread-text` pour les annotations. */
.shopcard__host {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--soft);
  overflow-wrap: anywhere;
  min-width: 0;
}

/* L'invitation. `aria-hidden` dans le gabarit : elle répète en clair ce que le
   lien du titre dit déjà, et un « Visiter » qui n'est pas lui-même actionnable
   n'a rien à faire dans l'arbre d'accessibilité. */
.shopcard__go {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--thread-text);
}

.shopcard__go span { transition: transform 0.18s ease; }
.shopcard:hover .shopcard__go span { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .shopcard,
  .shopcard__go span { transition: none; }
  .shopcard:hover,
  .shopcard:hover .shopcard__go span { transform: none; }
  .shopcard:has(.shopcard__name a:focus-visible) { transform: none; }
}

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