/* Composants partagés entre sections. */

/* ---- Titres et chapeaux de section ----
   Plus de sur-titre numéroté : le titre ouvre la section. */
.section-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
  word-spacing: 0.1em;
  text-wrap: balance;
}
.section-title--plain { text-wrap: wrap; }

.section-lead {
  margin: var(--space-title-lead) 0 0;
  max-width: var(--measure-lead);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--muted);
  text-wrap: pretty;
}

/* ---- En-tête de section type : titre, chapô, actions ----
   <div class="sec-head [sec-head--center]">
     <h2 class="section-title">… <span class="hl">mot clé</span></h2>
     <p class="section-lead">Une phrase, deux lignes au plus.</p>
     <div class="sec-head__actions">un ou deux boutons</div>
   </div>
   --center : en-tête centré (grande idée seule) ; par défaut, aligné à gauche
   (colonnes, Méthode, FAQ). Sur aplat sombre, ajouter .sec-head--on-dark. */
.sec-head { max-width: 760px; }
.sec-head--center {
  max-width: 880px;
  margin-inline: auto;
  text-align: center;
}
.sec-head--center .section-lead { margin-inline: auto; }
.sec-head__actions {
  margin-top: var(--space-actions);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
}
.sec-head--center .sec-head__actions { justify-content: center; }
.sec-head--on-dark .section-lead { color: var(--on2); }
/* Espace entre l'en-tête et le contenu de la section */
.sec-head + * { margin-top: var(--space-head); }

/* ---- Texte courant ---- */
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--space-4); }
.prose p { margin: 0; }
.text-small { font-size: var(--fs-small); line-height: 1.5; }
.text-muted { color: var(--muted); }

/* ---- Une idée et sa preuve, côte à côte ----
   <div class="duo"><div>idée : titre court + une phrase</div><div>preuve : chiffre clé, aperçu, carte</div></div>
   Deux colonnes égales au-dessus de 768 px, l'une sous l'autre en dessous. --flip : preuve à gauche. */
.duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--split-gap);
}
.duo--flip > :first-child { order: 2; }
@container page (max-width: 767px) {
  .duo { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
  .duo--flip > :first-child { order: 0; }
}

/* ---- Chiffre clé : un nombre, ce qu'il mesure, sa source ----
   <figure class="stat">
     <p class="stat__value">4 semaines</p>
     <p class="stat__label">du premier appel à la mise en ligne.</p>
     <figcaption class="stat__source">Source : …, année</figcaption>   (obligatoire pour un chiffre de marché)
   </figure>
   Un chiffre par idée, jamais une rangée de chiffres décoratifs. Sur aplat sombre : .stat--on-dark. */
.stat {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line2);
  max-width: 420px;
}
.stat__value {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-figure);
  line-height: 1;
  letter-spacing: -0.04em;
  word-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}
.stat__label {
  margin: 0;
  max-width: 28ch;
  font-size: var(--fs-body);
  line-height: 1.45;
  color: var(--ink);
}
.stat__source {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--muted);
}
.stat__source a { color: inherit; text-underline-offset: 3px; }
.stat--on-dark { border-top-color: var(--dline); }
.stat--on-dark .stat__label { color: var(--on); }
.stat--on-dark .stat__source { color: var(--on2); }

/* ---- Carte : un titre, une ou deux phrases, une preuve ou une action ----
   <article class="card">
     <h3 class="card__title">Référencé sur Google</h3>
     <p class="card__text">Une phrase qui dit ce que le client y gagne.</p>
     <p class="card__proof">preuve courte (chiffre, livrable, exemple)</p>
   </article>
   Variantes : --dark (aplat bordeaux), --sunk (fond creusé). Jamais de carte dans une carte. */
.card {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--card-pad);
  border-radius: var(--radius-card);
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink);
}
.card__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.1;
  letter-spacing: var(--ls-card);
  word-spacing: 0.06em;
  text-wrap: balance;
}
.card__text { margin: 0; color: var(--muted); text-wrap: pretty; }
.card__proof {
  margin: auto 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  font-size: var(--fs-small);
  font-weight: 700;
}
.card--sunk { background: var(--sunk); border-color: transparent; }
.card--dark { background: var(--dark); border-color: transparent; color: var(--on); }
.card--dark .card__text { color: var(--on2); }
.card--dark .card__proof { border-top-color: var(--dline); }
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--space-4);
}

/* Mot en couleur d'accent dans un titre */
.accent { color: var(--acc); }
.accent--hld { color: var(--hld); }

/* Mot dans une pilule pleine (« clients. », « 4 semaines. », « futur site. ») */
.pill-word {
  display: inline-block;
  padding: 0 0.14em 0.06em;
  border-radius: 999px;
  background: var(--acc);
  color: var(--acci);
}
.pill-word--hld { background: var(--hld); color: var(--hldi); }

/* Surlignage au feutre (data-hl : la bande se trace à l'apparition, groupe « apparitions ») */
.hl {
  color: var(--ink);
  padding: 0 0.06em;
  background-image: linear-gradient(var(--hl), var(--hl));
  background-repeat: no-repeat;
  background-position: 0 90%;
  background-size: 100% 42%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* Sur aplat bordeaux : feutre rose sur toute la hauteur, texte à l'encre. */
.hl--fonce {
  color: var(--hldi);
  padding: 0 0.1em;
  border-radius: 0.08em;
  background-image: linear-gradient(var(--hld), var(--hld));
  background-position: 0 55%;
  background-size: 100% 86%;
}

/* ---- Étiquettes (pilules de texte) ---- */
.tag {
  flex: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--line2);
  font-size: 13px;
  font-weight: 700;
}
.tag--lg { height: 32px; padding: 0 14px; font-size: 14px; }
.tag--xl { height: 34px; padding: 0 14px; font-size: 14px; }
.tag--dark { border: 0; background: var(--dark); color: var(--on); }
.tag--acc { border: 0; background: var(--acc); color: var(--acci); }
.tag--hld { border: 0; background: var(--hld); color: var(--hldi); }
.tag--on-dark { border-color: var(--dline); font-weight: inherit; }

/* Pastille de prestation sur aplat sombre */
.chip {
  flex: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--dline);
}

.tags { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---- Boutons ---- */
/* Bouton plein à pastille : la pastille (data-fill) grossit au survol et remplit le bouton
   (groupe « hero »). Tailles : --btn-h 52 px (hero, Méthode), --sm 48 px (Tarifs). */
.btn-fill {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  flex: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: var(--btn-h);
  padding: 0 26px 0 22px;
  border-radius: 999px;
  background: var(--dark);
  color: var(--on);
  font-weight: 700;
  font-size: var(--btn-fs);
  text-decoration: none;
  transition: color 300ms 80ms;
}
.btn-fill--md { height: var(--btn-h); }
.btn-fill--sm { gap: 11px; height: 48px; padding: 0 22px 0 19px; }
.btn-fill__dot { position: relative; flex: none; width: 9px; height: 9px; }
.btn-fill--sm .btn-fill__dot { width: 9px; height: 9px; }
.btn-fill__fill {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--hld);
  z-index: -1;
  transform: scale(1);
  transition: transform 700ms var(--ease-out);
}

/* Bouton contour qui se remplit par le bas au survol (hero) */
.btn-outline {
  flex: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  height: var(--btn-h);
  padding: 0 24px;
  border-radius: 999px;
  border: 1.5px solid var(--dark);
  background-color: transparent;
  background-image: linear-gradient(var(--dark), var(--dark));
  background-repeat: no-repeat;
  background-position: 50% 100%;
  background-size: 100% 0%;
  color: var(--dark);
  font-weight: 700;
  font-size: var(--btn-fs);
  text-decoration: none;
  transition: background-size 450ms var(--ease-out), color 250ms;
}
.btn-outline:hover { background-size: 100% 100%; color: var(--on); }

/* Bouton contour clair sur aplat sombre (« Voir les tarifs ») */
.btn-line {
  flex: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1.5px solid var(--on);
  color: var(--on);
  font-weight: 700;
  text-decoration: none;
  transition: background 250ms, color 250ms;
}
.btn-line:hover { background: var(--on); color: var(--dark); }

/* Bouton clair sur aplat sombre ; --arrow : suivi d'une flèche « → ». */
.btn-light {
  flex: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  height: var(--btn-h);
  padding: 0 24px;
  border-radius: 999px;
  background: var(--on);
  font-size: var(--btn-fs);
  color: var(--dark);
  font-weight: 700;
  text-decoration: none;
  transition: background 250ms, color 250ms;
}
.btn-light--arrow { gap: 10px; }
.btn-light:hover { background: var(--hld); color: var(--hldi); }

/* Bouton à texte qui roule (barre de navigation, groupe « nav ») */
.btn-roll {
  flex: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  height: 46px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--dark);
  color: var(--on);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: background 350ms, color 350ms;
}
.btn-roll__window { display: block; height: 1.3em; overflow: hidden; line-height: 1.3; }
.btn-roll__track {
  display: flex;
  flex-direction: column;
  transform: translateY(0);
  transition: transform 450ms var(--ease-in-out);
}

/* Bouton à flèche dans un rond (Réalisations, groupe « hero ») */
.btn-arrow {
  flex: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  height: var(--btn-h);
  padding: 0 6px 0 22px;
  font-size: var(--btn-fs);
  border-radius: 999px;
  background: var(--dark);
  color: var(--on);
  font-weight: 700;
  text-decoration: none;
  transition: background 300ms;
}
.btn-arrow:hover { color: var(--on); }
.btn-arrow__circle {
  position: relative;
  overflow: hidden;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--on);
  color: var(--hldi);
  transition: background 300ms;
}
.btn-arrow__arrow {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(0);
  transition: transform 450ms var(--ease-in-out);
}
.btn-arrow__arrow--next { transform: translateX(-120%); }

/* Contours de focus : règles :focus, et non :focus-visible, pour le même rendu dans tous les navigateurs (un lien
   focalisé au clic, là où le navigateur le fait, montre aussi son contour). */
.btn-fill:focus,
.btn-outline:focus,
.btn-line:focus,
.btn-light:focus,
.btn-roll:focus,
.btn-arrow:focus { outline: 3px solid var(--hld); outline-offset: 3px; }
/* Sur les fonds clairs, le rose clair ne se voit pas (1,5:1) : contour bordeaux. Il reste rose clair
   sur les aplats bordeaux (sections sombres, carte de Métier, formule recommandée, pied de page). */
.btn-fill:focus,
.btn-outline:focus,
.btn-roll:focus,
.btn-arrow:focus { outline-color: var(--acc); }
:is(.section--dark, .footer, .metier__offre, .formule--featured, .card--dark) :is(.btn-fill, .btn-outline, .btn-line, .btn-light, .btn-arrow):focus { outline-color: var(--hld); }

/* ---- Contact direct : « Écrire sur WhatsApp » et « Écrire par email » (js/contact-direct.js) ----
   Liens a.btn-whatsapp[data-whatsapp] et a.btn-email[data-sujet] dans un composant existant :
   .btn-fill ou .btn-outline (section Contact, page 404), .footer__link (pied de page),
   .cta-fixe__link (bouton fixe mobile, WhatsApp seulement). Masqués (hidden) tant que la page n'a
   ni numéro ni adresse : ils ne prennent alors aucune place. Visible, le bouton WhatsApp remplace
   dans le bouton fixe le lien « Recevoir mon audit gratuit ». Icône seulement dans le bouton fixe,
   à la couleur du texte. */
.btn-whatsapp__icon { flex: none; width: 18px; height: 18px; fill: currentColor; }
.cta-fixe:has(.btn-whatsapp:not([hidden])) .cta-fixe__link:not(.btn-whatsapp) { display: none; }

/* ---- Logo « nostıa » à point (barre et pied de page ; le point saute : groupe « intro ») ----
   Géométrie du kit logo officiel (Clash Display 600, mesures en em), détaillée et vérifiée au
   pixel dans css/intro.css, qui la répète pour le point de l'intro :
   - barre du « ı » : haut à 0,5 em au-dessus de la ligne de base ; chasse 0,248 em ;
   - point de 0,2 em, bas à 0,58 em (0,08 em au-dessus de la barre), centré pile sur la barre du
     « ı » ; interlettrage -0,035 em
     partout, pied de page compris.
   Le point est un bloc en ligne sans encombrement, placé après le « ı » : vertical-align le
   pose par rapport à la ligne de base elle-même (exact quelle que soit la hauteur de ligne),
   left le ramène au-dessus du « ı » (son départ dépend de l'interlettrage --logo-ls). */
.logo {
  --logo-ls: -0.035em;
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 31px;
  line-height: 1;
  letter-spacing: var(--logo-ls);
  color: var(--ink);
  text-decoration: none;
}
.logo__letter { display: inline-block; }
.logo__i { position: relative; display: inline-block; }
.logo__dot {
  position: relative;
  display: inline-block;
  vertical-align: 0.58em;
  left: calc(-0.224em - var(--logo-ls)); /* -0,248 + 0,124 - 0,1 em, moins l'interlettrage : centre de la barre */
  width: 0.2em;
  height: 0.2em;
  margin: -0.2em -0.2em 0 0;             /* ni hauteur de ligne ni chasse */
  border-radius: 50%;
  background: var(--acc);
  transform-origin: 50% 100%;
}
.logo--foot {
  --logo-ls: -0.035em;
  font-size: clamp(96px, 23cqw, 330px);
  line-height: 0.8;
  color: var(--on);
}
.logo--foot .logo__dot { background: var(--hld); }

/* ---- Aperçu de site (fenêtres du hero et réalisations) ----
   Toutes les mesures en cqw de l'aperçu lui-même. La page (data-page) défile au survol :
   groupe « hero ». */
.preview {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 4 / 5;
  border-radius: 22px;
  overflow: hidden;
  background: var(--p-bg);
  cursor: pointer;
}
.preview--hero { box-shadow: 0 48px 80px -50px rgba(20, 18, 30, 0.55), 0 0 0 1px rgba(20, 18, 30, 0.08); }
.preview--card { box-shadow: 0 0 0 1px var(--line); }
/* Le hero est centré : ses aperçus remettent leurs blocs de texte à gauche. */
.preview--hero .preview__intro,
.preview--hero .preview__list,
.preview--hero .preview__band { text-align: left; }

.preview__chrome {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  height: 8cqw;
  display: flex;
  align-items: center;
  gap: 1.5cqw;
  padding: 0 4cqw;
  background: var(--p-tile);
}
.preview__chrome-dot { width: 2cqw; height: 2cqw; border-radius: 50%; background: var(--p-mute); }
.preview__url {
  margin-left: 2.5cqw;
  flex: 1;
  height: 4.6cqw;
  border-radius: 999px;
  background: var(--p-bg);
  display: flex;
  align-items: center;
  padding: 0 3cqw;
  font-size: 2.4cqw;
  color: var(--p-mute);
}
.preview__viewport { position: absolute; top: 8cqw; left: 0; right: 0; bottom: 0; overflow: hidden; }
.preview__page {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: var(--p-bg);
  color: var(--p-ink);
  will-change: transform;
}
.preview__head {
  height: 13cqw;
  padding: 0 6cqw;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.preview__brand { font-family: var(--font-display); font-weight: 600; font-size: 5.6cqw; letter-spacing: -0.03em; }
.preview__nav-cta {
  flex: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  height: 7cqw;
  padding: 0 3.6cqw;
  border-radius: 999px;
  background: var(--p-dark);
  color: var(--p-on);
  font-size: 2.6cqw;
  font-weight: 700;
}
.preview__intro { padding: 6cqw 6cqw 7cqw; display: flex; flex-direction: column; gap: 3cqw; }
.preview__kicker { font-size: 2.4cqw; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--p-mute); }
.preview__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 8.8cqw;
  line-height: 0.98;
  letter-spacing: -0.035em;
  word-spacing: 0.1em;
}
.preview__text { font-size: 3.2cqw; line-height: 1.45; color: var(--p-mute); }
.preview__ctas { display: flex; gap: 2cqw; margin-top: 1cqw; }
.preview__cta,
.preview__cta2,
.preview__band-cta {
  flex: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  height: 8cqw;
  padding: 0 4cqw;
  border-radius: 999px;
  font-size: 2.8cqw;
}
.preview__cta { background: var(--p-acc); color: var(--p-acci); font-weight: 700; }
.preview__cta2 { border: 0.4cqw solid var(--p-ink); }
.preview__photo {
  position: relative;
  overflow: hidden;
  margin: 0 6cqw;
  height: 56cqw;
  border-radius: 4cqw;
  background: var(--p-dark);
}
.preview__blob {
  position: absolute;
  right: -12cqw;
  bottom: -14cqw;
  width: 48cqw;
  height: 48cqw;
  border-radius: 50%;
  background: var(--p-b);
}
.preview__photo-label {
  position: absolute;
  left: 3cqw;
  bottom: 3cqw;
  display: inline-flex;
  align-items: center;
  height: 6cqw;
  padding: 0 3cqw;
  border-radius: 999px;
  background: var(--p-bg);
  color: var(--p-ink);
  font-size: 2.4cqw;
  font-weight: 700;
}
.preview__list { padding: 10cqw 6cqw 6cqw; display: flex; flex-direction: column; gap: 3cqw; }
.preview__h2 { font-family: var(--font-display); font-weight: 600; font-size: 6cqw; letter-spacing: -0.03em; }
.preview__item {
  padding: 4cqw;
  border-radius: 3cqw;
  background: var(--p-tile);
  display: flex;
  flex-direction: column;
  gap: 0.8cqw;
}
.preview__item-title { font-size: 3.4cqw; }
.preview__item-text { font-size: 2.6cqw; color: var(--p-mute); }
.preview__band {
  margin-top: 6cqw;
  padding: 12cqw 6cqw;
  background: var(--p-dark);
  color: var(--p-on);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4cqw;
}
.preview__band-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 7cqw;
  line-height: 1;
  letter-spacing: -0.03em;
  word-spacing: 0.1em;
}
.preview__band-cta { background: var(--p-b); color: var(--p-bc); font-weight: 700; }
.preview__foot {
  padding: 6cqw;
  background: var(--p-dark);
  color: var(--p-on);
  border-top: 0.3cqw solid var(--p-dl);
  display: flex;
  justify-content: space-between;
  font-size: 2.4cqw;
}


/* ---- Boutons : remplissage au survol ----
   Au survol ou au focus, un fond glisse depuis la gauche et remplit le bouton,
   le texte et la pastille changent de couleur, et le bouton grossit légèrement. */
.btn-fill,
.btn-outline,
.btn-roll {
  transition: transform 300ms var(--ease-out), color 300ms, background-size 450ms var(--ease-out);
}
.btn-fill::before,
.btn-outline::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  transform: translateX(-101%);
  transition: transform 500ms var(--ease-out);
}
.btn-fill::before { background: var(--hld); }
.btn-outline {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-image: none;
}
.btn-outline::before { background: var(--dark); }
.btn-fill.is-filled,
.btn-fill:hover,
.btn-outline:hover,
.btn-outline:focus-visible,
.btn-roll:hover {
  transform: scale(1.05);
}
.btn-fill.is-filled::before,
.btn-fill:hover::before,
.btn-outline:hover::before,
.btn-outline:focus-visible::before {
  transform: translateX(0);
}
.btn-fill.is-filled,
.btn-fill:hover { color: var(--hldi); }
.btn-outline:hover,
.btn-outline:focus-visible { color: var(--on); }
/* La pastille ne remplit plus le bouton : elle passe à la couleur du texte. */
.btn-fill .btn-fill__fill { transform: scale(1) !important; transition: background-color 300ms; }
.btn-fill.is-filled .btn-fill__fill,
.btn-fill:hover .btn-fill__fill { background: var(--dark); }
@media (prefers-reduced-motion: reduce) {
  .btn-fill, .btn-outline, .btn-roll, .btn-fill::before, .btn-outline::before { transition: none; }
}