/* KommIA : styles propres à la page Fonctionnalités, chargés après site.css */
:root { --vnav-h: 52px; }
section[id] { scroll-margin-top: calc(var(--nav-h) + var(--vnav-h) + 8px); }
.fhero strong, .feat strong, .perk strong { font-weight: 600; color: var(--ink); }

/* ────── Haut de page : la promesse à gauche, le sommaire des piliers à droite ────── */
.fhero {
  max-width: 1320px; margin: 0 auto; padding: clamp(24px, 3.5vw, 56px) var(--gutter) clamp(56px, 7vw, 104px);
  min-height: min(calc(100dvh - var(--nav-h)), 820px);
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); align-items: center;
  gap: 48px clamp(40px, 6vw, 104px);
}
.fhero__text { container-type: inline-size; }
.fhero__eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 24px;
  font-size: 14.5px; font-weight: 600; color: var(--ink);
  animation: fx-up 800ms var(--ease-out) both 40ms;
}
.fhero__eyebrow::before {
  content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: linear-gradient(135deg, #876AFF, #168EFF); box-shadow: 0 0 0 4px rgba(135, 106, 255, 0.14);
}
.fhero__title {
  font-size: clamp(2.1rem, 9.4cqi, 4.6rem); font-weight: 620; /* « Ton Instagram. En entier. » vaut 10,3 fois la taille : deux lignes sur grand écran */
  letter-spacing: -0.045em; line-height: 1; text-wrap: balance;
  animation: fx-up 900ms var(--ease-out) both 120ms;
}
.fhero__title .grad { display: block; width: fit-content; margin-top: 0.04em; }
.fhero__lead {
  margin-top: 26px; max-width: 32rem; font-size: 1.125rem; line-height: 1.6; color: var(--ink-70); text-wrap: pretty;
  animation: fx-up 900ms var(--ease-out) both 320ms;
}
.fhero__lead strong { font-weight: 500; }
.fhero__actions {
  margin-top: 34px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px;
  animation: fx-up 900ms var(--ease-out) both 460ms;
}
.fhero__trust {
  margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  animation: fx-up 900ms var(--ease-out) both 580ms;
}
.fhero__reassure { font-size: 13.5px; color: var(--ink-60); }

/* Sommaire : cinq lignes fines, chacune mène à sa section */
.toc { animation: fx-up 1000ms var(--ease-out) both 380ms; }
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc li { border-bottom: 1px solid var(--line); }
.toc li:first-child { border-top: 1px solid var(--line); }
.toc a {
  display: grid; grid-template-columns: 38px minmax(0, 1fr) 20px; align-items: center; gap: 14px;
  padding: 18px 4px; text-decoration: none; color: var(--ink);
}
.toc__num { font-size: 13px; font-weight: 600; letter-spacing: 0.06em; color: var(--violet); font-variant-numeric: tabular-nums; }
.toc__num--plus { font-size: 18px; letter-spacing: 0; }
.toc__body { display: flex; flex-direction: column; gap: 2px; }
.toc__name { font-size: 1.12rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; transition: color 200ms var(--ease-out); }
.toc__desc { font-size: 14.5px; line-height: 1.45; color: var(--ink-60); text-wrap: balance; }
.toc__arrow { position: relative; width: 20px; height: 20px; color: var(--ink-60); transition: transform 300ms var(--ease-spring), color 200ms var(--ease-out); }
.toc__arrow::before {
  content: ''; position: absolute; left: 6px; top: 4px; width: 7px; height: 7px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg);
}
.toc a:hover .toc__name { color: var(--violet-ink); }
.toc a:hover .toc__arrow { color: var(--violet-ink); transform: translateY(3px); }

/* ────── Les quatre piliers : le texte d'un côté, l'écran de l'app de l'autre ────── */
/* Largeur du bloc texte et téléphone : la frise et les bonus s'y alignent */
.feat, .bonus {
  --device-w: clamp(236px, calc((100vh - var(--nav-h) - 72px) * 0.46), 288px);
  --band: calc(560px + clamp(48px, 8vw, 128px) + var(--device-w));
}
.feat {
  --device-h: calc((var(--device-w) - 12px) * 2.168 + 12px);
  max-width: 1320px; margin: 0 auto; padding: var(--section-y) var(--gutter);
}
.feat__grid {
  display: grid; grid-template-columns: minmax(0, 560px) var(--device-w); justify-content: center;
  grid-template-areas: "head stage" "body stage"; grid-template-rows: auto 1fr;
  column-gap: clamp(48px, 8vw, 128px);
}
.feat--flip .feat__grid { grid-template-columns: var(--device-w) minmax(0, 560px); grid-template-areas: "stage head" "stage body"; }
/* z-index : le texte passe au-dessus de l'aura du téléphone, qui déborde sur sa colonne */
.feat__head { grid-area: head; position: relative; z-index: 1; }
.feat__body { grid-area: body; position: relative; z-index: 1; margin-top: 36px; }
/* Le téléphone reste en place, centré dans l'écran, pendant que le texte de son pilier défile */
.feat__stage {
  grid-area: stage; align-self: start; position: sticky; isolation: isolate;
  top: max(calc(var(--nav-h) + var(--vnav-h) + 16px), calc(var(--nav-h) + var(--vnav-h) + (100vh - var(--nav-h) - var(--vnav-h) - var(--device-h)) / 2));
}
.device__screen > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
/* Aura violet et rose derrière le téléphone, la même que sur l'accueil */
.feat__stage::before {
  content: ''; position: absolute; z-index: -1; left: 50%; top: 50%; width: 220%; height: 96%;
  border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(closest-side at 26% 36%, rgba(135, 106, 255, 0.9), rgba(135, 106, 255, 0) 100%),
    radial-gradient(closest-side at 74% 64%, rgba(244, 114, 198, 0.82), rgba(244, 114, 198, 0) 100%),
    radial-gradient(closest-side at 50% 50%, rgba(184, 165, 255, 0.55), rgba(184, 165, 255, 0) 100%);
  filter: blur(40px); opacity: 0.7;
  transform: translate(-50%, -50%);
  animation: fx-aura 22s linear infinite;
  will-change: transform;
}
.feat--flip .feat__stage::before { animation-direction: reverse; }

.kicker { display: inline-flex; align-items: center; gap: 12px; font-size: 14.5px; font-weight: 600; letter-spacing: -0.005em; color: var(--ink); }
.kicker span { font-size: 13px; letter-spacing: 0.06em; color: var(--violet); font-variant-numeric: tabular-nums; }
.kicker--plain { color: var(--violet-ink); }
.feat__title {
  margin-top: 16px; font-size: clamp(2rem, 1.05rem + 2.3vw, 2.65rem); font-weight: 620;
  letter-spacing: -0.04em; line-height: 1.06; text-wrap: balance;
}
/* Titres en plusieurs phrases : une phrase par ligne, jamais un mot seul en bout de ligne */
.feat__title .l { display: block; width: fit-content; }
.feat__title .l .grad { white-space: nowrap; }
.feat__lead { margin-top: 22px; max-width: 34rem; font-size: 1.125rem; line-height: 1.6; color: var(--ink-70); text-wrap: pretty; }

/* Listes : une coche violette, un filet fin entre chaque ligne */
.checks__title { margin-bottom: 8px; font-size: 15px; color: var(--ink-70); }
.checks__title--next { margin-top: 36px; }
.checks { list-style: none; margin: 0; padding: 0; }
.checks li {
  display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line);
  font-size: 16px; line-height: 1.55; color: var(--ink-70); text-wrap: pretty;
}
.checks li:last-child { border-bottom: 1px solid var(--line); }
.checks svg { flex: none; margin-top: 2px; color: var(--violet); }
/* Les états d'un post, avec la couleur de leur badge dans l'app */
.status { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 10px; }
.status__item { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 500; color: var(--ink); white-space: nowrap; }
.status__item::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--dot); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dot) 18%, transparent); }
.status__item--blue { --dot: #168EFF; }
.status__item--green { --dot: #1FA36A; }
.status__item--red { --dot: #E5484D; }
.status__item--amber { --dot: #F2A516; }
.feat__note { margin-top: 26px; font-size: 16px; line-height: 1.6; color: var(--ink-70); text-wrap: pretty; }
/* La preuve du pilier Création : le cas de Gaby, en une ligne sous la promesse */
/* La preuve de Gaby sous le titre de la création : nom propre, pour ne pas hériter de la grille du composant commun .proof (site.css) */
.feat__proof { margin-top: 22px; max-width: 34rem; padding-left: 18px; border-left: 2px solid rgba(135, 106, 255, 0.4); font-size: 15.5px; line-height: 1.55; color: var(--ink-70); text-wrap: pretty; }
.feat__proof a { color: var(--violet-ink); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(91, 63, 224, 0.4); white-space: nowrap; }
.feat__proof a:hover { text-decoration-color: currentColor; }
/* Le contrôle et la citation : un fil violet, comme sur l'accueil */
.feat__aside, .quote { padding-left: 18px; border-left: 2px solid rgba(135, 106, 255, 0.4); }
.feat__aside { margin-top: 20px; font-size: 16px; line-height: 1.6; color: var(--ink-70); text-wrap: pretty; }
.quote { margin: 36px 0 0; }
.quote p { font-size: clamp(1.1rem, 0.95rem + 0.45vw, 1.32rem); font-style: italic; font-weight: 500; letter-spacing: -0.015em; line-height: 1.42; text-wrap: pretty; }
.quote footer { margin-top: 10px; font-size: 13.5px; color: var(--ink-60); }
.quote a { color: var(--violet-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(91, 63, 224, 0.4); }
.quote a:hover { text-decoration-color: currentColor; }

/* Bonus transparence : cinq temps sur une ligne fine, du rappel à la relance */
.finalize { position: relative; z-index: 1; max-width: var(--band); margin: clamp(72px, 8vw, 120px) auto 0; }
.finalize__head { max-width: 46rem; }
.finalize__title { margin-top: 10px; font-size: clamp(1.55rem, 1.1rem + 1.1vw, 2.1rem); font-weight: 620; letter-spacing: -0.035em; line-height: 1.15; }
.finalize__text { margin-top: 14px; font-size: 16.5px; line-height: 1.6; color: var(--ink-70); text-wrap: pretty; }
.timeline { position: relative; list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 clamp(18px, 2.4vw, 36px); }
.timeline::before {
  content: ''; position: absolute; top: 5px; left: 6px; right: 0; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(22, 142, 255, 0.45), rgba(135, 106, 255, 0.45) 70%, rgba(135, 106, 255, 0));
}
.timeline li { position: relative; padding-top: 30px; }
.timeline li::before {
  content: ''; position: absolute; top: 0; left: 0; width: 12px; height: 12px; border-radius: 50%;
  background: var(--canvas); box-shadow: inset 0 0 0 2px var(--violet), 0 0 0 4px rgba(135, 106, 255, 0.12);
}
.timeline__mark { display: block; width: fit-content; font-size: 1.4rem; font-weight: 650; letter-spacing: -0.03em; line-height: 1.1; color: var(--violet-ink); font-variant-numeric: tabular-nums; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .timeline__mark { background-image: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-right: 0.04em; }
}
.timeline p { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--ink-70); text-wrap: pretty; }
.timeline em { font-style: italic; color: var(--ink); }
.js .timeline li { transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
.js .finalize:not(.is-in) .timeline li { opacity: 0; transform: translateY(16px); }
.timeline li:nth-child(2) { transition-delay: 90ms; }
.timeline li:nth-child(3) { transition-delay: 180ms; }
.timeline li:nth-child(4) { transition-delay: 270ms; }
.timeline li:nth-child(5) { transition-delay: 360ms; }

/* ────── Bonus inclus : une vitrine, un bonus à la fois, chacun avec son illustration ────── */
/* Section à part : titre centré, puis la liste d'un côté et l'illustration du bonus choisi de l'autre */
.bonus { max-width: calc(var(--band) + 2 * var(--gutter)); margin: 0 auto; padding: var(--section-y) var(--gutter) clamp(40px, 5vw, 72px); }
.bonus__head { max-width: 44rem; margin: 0 auto clamp(40px, 5vw, 64px); text-align: center; }
.bonus__head .feat__title { margin-inline: auto; }
.bonus__head .grad { display: block; width: fit-content; margin: 0.04em auto -0.14em; }
/* La vitrine à défilement (liste qui se déplie, barre de progression, scène) : composant commun dans site.css */
.art-chip, .art-chat {
  background: #fff; box-shadow: 0 1px 2px rgba(40, 28, 96, 0.06), 0 22px 44px -24px rgba(52, 36, 130, 0.45);
}
/* 1. Photo cadrée, lignes des tiers, trois leçons autour */
.art-photo { position: relative; width: 236px; aspect-ratio: 3 / 4; border-radius: 22px; overflow: hidden; transform: rotate(-3deg); box-shadow: 0 30px 60px -30px rgba(40, 28, 110, 0.55); }
.art-photo img { width: 100%; height: 100%; object-fit: cover; }
.art-photo__grid {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, transparent calc(33.33% - 0.5px), rgba(255, 255, 255, 0.55) calc(33.33% - 0.5px), rgba(255, 255, 255, 0.55) calc(33.33% + 0.5px), transparent calc(33.33% + 0.5px), transparent calc(66.66% - 0.5px), rgba(255, 255, 255, 0.55) calc(66.66% - 0.5px), rgba(255, 255, 255, 0.55) calc(66.66% + 0.5px), transparent calc(66.66% + 0.5px)),
    linear-gradient(180deg, transparent calc(33.33% - 0.5px), rgba(255, 255, 255, 0.55) calc(33.33% - 0.5px), rgba(255, 255, 255, 0.55) calc(33.33% + 0.5px), transparent calc(33.33% + 0.5px), transparent calc(66.66% - 0.5px), rgba(255, 255, 255, 0.55) calc(66.66% - 0.5px), rgba(255, 255, 255, 0.55) calc(66.66% + 0.5px), transparent calc(66.66% + 0.5px));
}
.art-chip {
  position: absolute; padding: 8px 14px; border-radius: 999px;
  font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap;
}
.art-chip::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: linear-gradient(135deg, #168EFF, #876AFF); vertical-align: 1px; }
.art-chip--1 { top: 16%; left: 8%; }
.art-chip--2 { top: 46%; right: 4%; }
.art-chip--3 { bottom: 13%; left: 14%; }
/* 2 et 4. Conversations */
.art-chat { width: min(100%, 340px); padding: 16px; border-radius: 24px; display: flex; flex-direction: column; gap: 10px; }
.art-chat__head { display: flex; align-items: center; gap: 8px; padding: 0 2px 10px; border-bottom: 1px solid var(--line); font-size: 13.5px; font-weight: 600; }
.art-chat__dot { width: 8px; height: 8px; border-radius: 50%; background: #1FA36A; box-shadow: 0 0 0 3px rgba(31, 163, 106, 0.16); }
.bubble { max-width: 84%; margin: 0; padding: 10px 13px; border-radius: 18px; font-size: 14px; line-height: 1.45; color: var(--ink); }
.bubble--me { align-self: flex-end; background: #EFEAFF; border-bottom-right-radius: 6px; }
.bubble--them { align-self: flex-start; background: #F4F5F8; border-bottom-left-radius: 6px; }
.bubble__time { display: block; margin-top: 3px; font-size: 11px; color: var(--ink-60); text-align: right; }
.bubble__from { display: block; margin-bottom: 2px; font-size: 12px; font-weight: 600; color: var(--violet-ink); }
.bubble--photo { padding: 5px 5px 10px; }
.bubble--photo img { width: 150px; height: 170px; object-fit: cover; border-radius: 14px; }
.bubble--photo figcaption { padding: 7px 8px 0; }
/* 3. Dix bulles de stories */
.art-rings { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 64px); gap: 16px; }
.art-rings li {
  --d: 64px;   /* largeur et hauteur explicites : Safari dessinait les bulles ovales (2026-10-06) */
  width: var(--d); height: var(--d); padding: 2.5px; border-radius: 50%;
  background: conic-gradient(from 200deg, #5AD3FF, #168EFF, #876AFF, #B8A5FF, #5AD3FF);
  transform: scale(0.6); opacity: 0; transition: transform 600ms var(--ease-spring), opacity 400ms var(--ease-out);
  transition-delay: calc(120ms + var(--k) * 45ms);
}
.art-rings img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 2.5px solid #fff; }
.gift-art--accounts.is-active .art-rings li { transform: none; opacity: 1; }
.gift-art--accounts { align-content: center; gap: 22px; }
.art-count { font-size: 15px; color: var(--ink-70); }
.art-count strong { font-size: 1.5rem; font-weight: 650; letter-spacing: -0.03em; color: var(--ink); margin-right: 4px; }
/* 5. Langues */
.gift-art--lang { align-content: center; gap: 2px; }
.art-word { font-size: clamp(2.6rem, 1.4rem + 2.6vw, 3.8rem); font-weight: 620; letter-spacing: -0.045em; line-height: 1.08; color: rgba(14, 14, 20, 0.22); text-align: center; }
.art-word--on { font-style: italic; font-weight: 600; color: var(--violet); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .art-word--on { background-image: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-right: 0.06em; }
}
.art-word--soon { color: rgba(14, 14, 20, 0.12); }
.art-word .soon { font-size: 12px; letter-spacing: 0.02em; vertical-align: 0.9em; }
.soon {
  display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; vertical-align: 1px;
  background: rgba(135, 106, 255, 0.12); color: var(--violet-ink);
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em; line-height: 1.3;
}

/* ────── Tablette ────── */
@media (max-width: 1099px) and (min-width: 900px) {
  .feat__grid { grid-template-columns: minmax(0, 1fr) var(--device-w); }
  .feat--flip .feat__grid { grid-template-columns: var(--device-w) minmax(0, 1fr); }
  .timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 32px; }
  .timeline::before { display: none; }
}

/* ────── Mobile ────── */
@media (max-width: 899px) {
  :root { --vnav-h: 48px; }
  .fhero { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-top: 32px; }
  .toc a { padding: 15px 2px; }
  .feat { --device-w: min(62vw, 250px); }
  .feat__grid, .feat--flip .feat__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "stage" "body"; grid-template-rows: auto; }
  .feat__stage { position: relative; top: auto; justify-self: center; margin-top: 40px; }
  .feat__stage::before { filter: blur(32px); opacity: 0.6; }
  .feat__body { margin-top: 44px; }
  .timeline { grid-template-columns: minmax(0, 1fr); margin-top: 32px; }
  .timeline::before { top: 6px; bottom: 6px; left: 5px; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, rgba(22, 142, 255, 0.45), rgba(135, 106, 255, 0.45)); }
  .timeline li { padding: 0 0 22px 32px; }
  .timeline li:last-child { padding-bottom: 0; }
  .timeline__mark { font-size: 1.2rem; }
  .timeline p { margin-top: 4px; }
  .art-photo { width: 160px; }
  .art-chat { width: min(100%, 320px); padding: 13px; gap: 8px; }
  .bubble { font-size: 13.5px; padding: 9px 12px; }
  .bubble--photo img { width: 88px; height: 78px; }
  .art-word { font-size: 2.6rem; }
  .art-rings { grid-template-columns: repeat(5, 52px); gap: 12px; }
  .art-rings li { --d: 52px; }
  .art-chip { font-size: 13px; padding: 7px 12px; }
  /* Appel final : zone du téléphone raccourcie, la fin du bloc reste près du bouton */
  .final__stage { height: 230px; }
}
@media (max-width: 599px) {
  .toc__desc { display: none; }
  .toc a { padding: 14px 2px; }
  .fhero__actions { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 420px) {
  .fhero__actions { align-items: stretch; }
  .fhero__actions .text-link { align-self: center; }
}

/* ────── Mouvement réduit : tout est affiché dans son état final ────── */
@media (prefers-reduced-motion: reduce) {
  .fhero__eyebrow, .fhero__title, .fhero__lead, .fhero__actions, .fhero__trust, .toc, .feat__stage::before { animation: none; }
  .art-rings li { transition: none; }
  .js .finalize:not(.is-in) .timeline li { opacity: 1; transform: none; }
}
@keyframes fx-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fx-aura {
  0% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
  50% { transform: translate(-50%, -50%) rotate(180deg) scale(1.08); }
  100% { transform: translate(-50%, -50%) rotate(360deg) scale(1); }
}

/* ────── Liens vers les tutoriels YouTube (2026-09-29) : un disque de lecture en dégradé, le titre souligné, la durée ; aucun cadre ────── */
.vids { margin-top: 28px; }
.vids__label { margin-bottom: 10px; font-size: 13px; font-weight: 600; letter-spacing: 0.01em; color: var(--ink-60); }
.vids__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.vid { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; font-size: 15.5px; font-weight: 550; line-height: 1.35; }
.vid__play {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; padding-left: 2px; border-radius: 50%;
  background: linear-gradient(135deg, #168EFF, #876AFF); color: #fff; box-shadow: 0 8px 18px -10px rgba(91, 63, 224, 0.8);
  transition: transform 300ms var(--ease-spring);
}
.vid__title { text-decoration: underline; text-decoration-color: rgba(14, 14, 20, 0.25); text-underline-offset: 4px; transition: color 200ms var(--ease-out), text-decoration-color 200ms var(--ease-out); }
.vid__text { text-wrap: pretty; }
.vid__time { margin-left: 4px; font-size: 13.5px; font-weight: 500; color: var(--ink-60); white-space: nowrap; }
.vid:hover .vid__play { transform: scale(1.08); }
.vid:hover .vid__title { color: var(--violet-ink); text-decoration-color: currentColor; }
.vid:focus-visible { outline: 2px solid var(--violet); outline-offset: 4px; border-radius: 999px; }
.finalize__vid { margin-top: clamp(24px, 3vw, 36px); }
.bonus__yt { margin-top: 18px; }
.gift__vid { margin-top: 12px; }
.gift__vid .vid { font-size: 14.5px; }
.gift__vid .vid__play { width: 28px; height: 28px; }
.feat__aside a { color: var(--violet-ink); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(91, 63, 224, 0.4); text-underline-offset: 3px; }
.feat__aside a:hover { text-decoration-color: currentColor; }

/* Liens vers les guides Instagram par métier du blog, dans Création IA (maillage interne, validé par Bruno le 2026-10-06) */
.feat__note--guides a { color: var(--violet-ink); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(91, 63, 224, 0.4); text-underline-offset: 3px; }
.feat__note--guides a:hover { text-decoration-color: currentColor; }