/* ==========================================================================
   Innadvise — blocs de contenu réutilisables (toutes les pages)
   Titres de page · phrases clés · cadres média · simulations (Google, YouTube,
   ChatGPT, réception, navigateur, écrans) · parcours en étapes · bandeau sombre ·
   logos défilants.
   Règle : uniquement des alias de tokens.css → tout suit la charte (theme.json).
   ========================================================================== */

/* ---------- Titres, sections ---------- */
.page-title { font-size: var(--fs-page-title); text-align: center; max-width: 26ch; margin-inline: auto; }
.section--intro { padding-bottom: var(--space-30); }               /* titre seul en tête de page (Site Web Hôtelier) */
.section--intro + .section { padding-top: var(--space-50); }
.section--tight-top { padding-top: var(--space-30); }              /* FAQ collée au formulaire Sam (wireframe) */
/* Deux sections blanches consécutives : filet de séparation discret */
.section:not(.section--alt):not(.band):not(.section--intro) + .section:not(.section--alt):not(.band):not(.section--tight-top) { border-top: 1px solid var(--color-line); }
.section__left { width: 100%; max-width: var(--width-content); margin-inline: auto; display: flex; flex-direction: column; gap: 22px; }
.section__left > h2 { text-align: left; }
.section__left > h2 em { font-weight: var(--font-weight-display); }

/* ---------- Phrase clé sous un visuel ---------- */
.statement { text-align: center; font: var(--font-weight-display) var(--fs-statement)/1.3 var(--font-display); color: var(--color-primary-deep); max-width: 40ch; margin-inline: auto; text-wrap: balance; transition: opacity .5s; }
.statement--wide { max-width: 52ch; }
.statement__strong { font-weight: 400; }
.statement p + p { font-style: italic; }
.lede { font-size: var(--fs-subtitle); line-height: 1.45; text-align: center; color: var(--color-ink); max-width: 860px; margin-inline: auto; text-wrap: pretty; }

/* ---------- Cadres média (image / vidéo en attente du fichier) ---------- */
.video-frame {
	position: relative; width: 100%; max-width: var(--width-media); aspect-ratio: 960 / 520;
	border-radius: var(--radius-xl); box-shadow: var(--shadow-float);
}
.video-frame--500 { aspect-ratio: 960 / 500; }
.video-frame--image { aspect-ratio: 960 / 460; box-shadow: var(--shadow-panel); }
.play { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: var(--color-base); box-shadow: 0 10px 30px color-mix(in srgb, var(--color-primary-deep) 35%, transparent); transition: transform var(--duration-fast); }
.play svg { width: 26px; height: 26px; fill: var(--color-primary); margin-left: 3px; }
.video-frame:hover .play { transform: scale(1.06); }
.media-pair { width: 100%; max-width: var(--width-media); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.media-pair .video-frame { aspect-ratio: 480 / 340; }

/* ==========================================================================
   Simulations (Google, YouTube, ChatGPT)
   ========================================================================== */
.search-demo__in { display: flex; flex-direction: column; align-items: center; gap: 32px; }
.demo { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.demos { display: flex; flex-direction: column; align-items: center; gap: var(--space-60); width: 100%; }
.mock {
	width: 100%; max-width: var(--width-mock);
	display: flex; flex-direction: column; gap: 18px;
	padding: 28px 32px;
	background: var(--color-base); border: 1px solid var(--color-line); border-radius: var(--radius-xl);
	box-shadow: var(--shadow-float);
	font-size: var(--fs-lead);
}
.mock--wide { max-width: 820px; gap: 14px; padding: 24px 28px; }
.mock__bar { display: flex; align-items: center; gap: 14px; }
.mock__brand { display: inline-flex; align-items: center; gap: 8px; font: var(--font-weight-heavy) 22px/1 var(--font-body); color: var(--color-ink); letter-spacing: .02em; flex: none; }
.mock__brand--small { font-size: var(--fs-base); }
.mock__search { flex: 1; min-width: 0; min-height: 46px; display: flex; align-items: center; padding: 10px 18px; border: 1.5px solid var(--color-line); border-radius: var(--radius-pill); box-shadow: 0 1px 6px color-mix(in srgb, var(--color-primary) 8%, transparent); white-space: nowrap; overflow: hidden; }
.caret { color: var(--color-primary); animation: blink 1s step-end infinite; margin-left: 1px; }
@keyframes blink { 50% { opacity: 0; } }
.mock__results { display: flex; flex-direction: column; gap: 12px; }
.mock__head { display: flex; align-items: center; gap: 10px; }
.mock__input { padding: 9px 16px; border: 1.5px solid var(--color-line); border-radius: var(--radius-pill); color: var(--color-muted); font-size: 15px; }

/* Logos des marques : fichiers officiels déposés dans assets/img/marques/ (voir LISEZ-MOI) */
.brand-mark { display: block; width: auto; }
.brand-mark--google { height: 30px; }
.brand-mark--chatgpt { height: 28px; }
.brand-mark--youtube { height: 26px; }
.brand-word { display: inline-block; }

/* Résultats de recherche */
.result { padding: 12px 16px; border: 1px solid var(--color-line); border-radius: var(--radius-md); color: var(--color-ink); transition: opacity .4s; }
.result__label { font-size: 13px; color: var(--color-muted); }
.result__label--ad { font-weight: var(--font-weight-heavy); color: var(--color-ink); }
.result__title { font-size: 18px; font-weight: var(--font-weight-heavy); }
.result__meta { font-size: 15px; color: var(--color-muted); }
.result--you { border: 2px solid var(--color-accent); background: var(--color-accent-soft); }
.result--you .result__title { font-size: 19px; color: var(--color-primary); }
.result--plain { padding: 10px 16px; color: var(--color-muted); }

/* Vidéos (YouTube) */
.video-result { display: grid; grid-template-columns: minmax(0, 280px) 1fr; gap: 16px; align-items: start; transition: opacity .4s; }
.video-result--you { padding: 12px; border: 2px solid var(--color-accent); border-radius: var(--radius-md); background: var(--color-accent-soft); }
.video-result__thumb { aspect-ratio: 280 / 150; border-radius: var(--radius-sm); }
.video-result__thumb .play { width: 40px; height: 40px; }
.video-result__thumb .play svg { width: 16px; height: 16px; }
.video-result__info { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; min-width: 0; }
.video-result__title { font-size: 19px; font-weight: var(--font-weight-heavy); color: var(--color-primary); line-height: 1.3; }
.video-result__cta { margin-top: 8px; padding: 5px 14px; border: 1.5px solid var(--color-primary); border-radius: var(--radius-pill); font-size: 14px; font-weight: var(--font-weight-strong); color: var(--color-primary); background: var(--color-base); }
.video-result--plain { padding: 0 12px; color: var(--color-muted); }
.video-result--plain .video-result__thumb { aspect-ratio: auto; height: 80px; border: 1.5px solid var(--color-line); border-radius: var(--radius-sm); background: var(--color-base); }

/* Conversation IA */
.mock--chat { gap: 16px; }
.mock .bubble--me { min-height: 46px; display: flex; align-items: center; max-width: 90%; font-size: var(--fs-lead); background: var(--color-surface); color: var(--color-ink); border: 1px solid var(--color-line); white-space: nowrap; }
.answer { display: flex; flex-direction: column; gap: 10px; font-size: 17px; }
.answer__item { display: flex; gap: 10px; align-items: center; transition: opacity .4s; }
.answer__num { font-weight: var(--font-weight-heavy); min-width: 26px; }
.answer__item--first .answer__num { display: inline-grid; place-items: center; width: 28px; height: 28px; min-width: 0; border-radius: 50%; background: var(--color-accent); color: var(--color-primary-deep); font-size: 14px; }
.answer__item--first b { color: var(--color-primary); }
.answer__item--ad { color: var(--color-muted); }
.answer__tag { font-size: 12px; padding: 1px 7px; border: 1px solid var(--color-line); border-radius: 4px; }
.answer__item--sponsored { padding: 10px 14px; border: 2px solid var(--color-accent); border-radius: var(--radius-md); background: var(--color-accent-soft); color: var(--color-primary); }
.answer__item--sponsored .answer__tag { border-color: var(--color-accent-text); color: var(--color-accent-text); background: var(--color-base); }

/* États animés (site.js). Wireframe : éléments « éteints » à 6 %. Relevé à 22 % (35 % pour la phrase clé)
   pour la lisibilité, à la demande de Nathan (27/10). */
.js .mock [data-step]:not(.is-on) { opacity: .22; }
.js [data-timeline-msg]:not(.is-on) { opacity: .35; }

/* ==========================================================================
   Parcours en étapes (apparition une à une, en glissant depuis la gauche)
   ========================================================================== */
.steps { display: flex; flex-direction: column; gap: 18px; }
.step-item {
	padding: 14px 20px; border-radius: var(--radius-md);
	font-size: var(--fs-step); line-height: 1.35;
	transition: opacity .6s, transform .6s;
}
.step-item__sub { display: block; margin-top: 4px; font-size: var(--fs-lead); color: var(--color-muted); }
.steps--negative .step-item { border: 1px solid var(--color-line); background: var(--color-base); color: var(--color-muted); }
.section--alt .steps--negative .step-item { background: color-mix(in srgb, var(--color-base) 70%, transparent); }
.steps--positive .step-item { border: 2px solid var(--color-accent); background: var(--color-accent-soft); color: var(--color-primary-deep); }
.js .steps [data-step]:not(.is-on) { opacity: 0; transform: translateX(-40px); }
.steps--media { width: 100%; max-width: var(--width-media); }

/* ==========================================================================
   Bandeau sombre (modèle à la performance)
   ========================================================================== */
.band { background: var(--color-primary-deep); color: var(--color-base); padding-block: var(--space-70); }
.band__in { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.band h2 { color: var(--color-base); font-size: var(--fs-h2); max-width: 22ch; }
.band__sub { font: italic var(--font-weight-display) var(--fs-statement)/1.3 var(--font-display); color: color-mix(in srgb, var(--color-base) 88%, transparent); }
.offer {
	margin-top: 18px; display: inline-flex; align-items: baseline; flex-wrap: wrap; justify-content: center; gap: 0 .35em;
	padding: 16px 28px; border: 1.5px solid color-mix(in srgb, var(--color-base) 55%, transparent); border-radius: var(--radius-xl);
	font-size: var(--fs-subtitle);
}
.offer__value { font: var(--font-weight-display) var(--fs-stat)/1 var(--font-display); color: var(--color-accent); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Navigateur, écrans, onglets (Site Web Hôtelier)
   ========================================================================== */
.browser {
	width: 100%; max-width: var(--width-media);
	display: flex; flex-direction: column; overflow: hidden;
	background: var(--color-base); border: 1px solid var(--color-line); border-radius: var(--radius-xl);
	box-shadow: var(--shadow-float);
}
.browser__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--color-line); }
.browser__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--color-line); }
/* Site « mal conçu » : trop de texte */
.browser--cluttered { aspect-ratio: 960 / 420; }
.cluttered { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 18px 24px; opacity: .55; }
.cluttered__col { background: repeating-linear-gradient(to bottom, var(--color-muted) 0 6px, transparent 6px 14px); -webkit-mask-image: linear-gradient(#000 80%, transparent); mask-image: linear-gradient(#000 80%, transparent); }
.cluttered__col { position: relative; }
.cluttered__col--img { padding-top: 52px; background-clip: content-box; }
.cluttered__col--img::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 40px; border: 1px solid var(--color-muted); }
/* Site adapté : ordinateur, tablette, mobile */
.devices {
	width: 100%; max-width: var(--width-media); aspect-ratio: 960 / 440;
	display: flex; align-items: flex-end; justify-content: center; gap: 3%;
	padding: 3%; border: 2px solid var(--color-accent); border-radius: var(--radius-xl); background: var(--color-accent-soft);
}
.device { border: 2px solid var(--color-primary); background: var(--color-base); overflow: hidden; box-shadow: var(--shadow-photo); }
.device--desktop { width: 54%; aspect-ratio: 520 / 320; border-radius: 10px; }
.device--tablet { width: 21%; aspect-ratio: 200 / 270; border-radius: 12px; }
.device--phone { width: 11.5%; aspect-ratio: 110 / 210; border-radius: 16px; }
.device > .media-slot { width: 100%; height: 100%; }
/* Onglets de navigation (UX) */
.browser--tabs { aspect-ratio: 960 / 500; }
.tabs-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--color-line); font-size: 15px; flex-wrap: wrap; }
.tab { padding: 6px 14px; border: 1px solid var(--color-line); border-radius: var(--radius-sm); color: var(--color-ink); }
.tab--active { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-base); }
.tab--cta { margin-left: auto; background: var(--color-accent); border-color: var(--color-accent); color: var(--color-primary-deep); font-weight: var(--font-weight-strong); }
.browser__screen { flex: 1; }

/* ==========================================================================
   Réception virtuelle (démonstration animée, sans chatbot réel en V1)
   ========================================================================== */
.reception {
	width: 100%; max-width: var(--width-panel); height: 520px;
	display: flex; flex-direction: column; overflow: hidden;
	background: var(--color-base); border: 1px solid var(--color-line); border-radius: var(--radius-xl);
	box-shadow: var(--shadow-float);
}
.reception__head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--color-line); }
.reception__icon { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--color-accent-soft); color: var(--color-primary); }
.reception__icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.reception__who { display: flex; flex-direction: column; line-height: 1.25; }
.reception__who b { color: var(--color-primary); font-weight: var(--font-weight-strong); }
.reception__status { font-size: 14px; color: var(--color-success); }
.reception__log { flex: 1; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 16px; background: var(--color-surface); }
.reception__log .bubble--bot { background: var(--color-base); }
.bubble--typing { display: inline-flex; gap: 4px; padding: 12px 16px; }
.bubble--typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--color-muted); animation: typing 1s infinite ease-in-out; }
.bubble--typing i:nth-child(2) { animation-delay: .15s; }
.bubble--typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.js .reception [data-step]:not(.is-on) { display: none; }
.reception__chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px 0; }
.chip { padding: 4px 12px; border: 1px dashed color-mix(in srgb, var(--color-primary) 40%, var(--color-line)); border-radius: var(--radius-pill); font-size: 14px; color: var(--color-primary); background: var(--color-base); transition: background var(--duration-fast), border-color var(--duration-fast); }
.js .reception .chip.is-pressed { background: var(--color-accent-soft); border-color: var(--color-accent); border-style: solid; }
.reception__input { display: flex; gap: 8px; align-items: center; padding: 12px; }
.reception__input span:first-child { flex: 1; min-width: 0; padding: 9px 16px; border: 1px solid var(--color-line); border-radius: var(--radius-pill); color: var(--color-muted); font-size: var(--fs-small); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reception__send { padding: 9px 16px; border-radius: var(--radius-pill); background: var(--color-primary); color: var(--color-base); font-size: var(--fs-x-small); font-weight: var(--font-weight-strong); }

/* ==========================================================================
   Logos qui défilent
   ========================================================================== */
.section--marquee .section__title { margin-bottom: var(--space-50); }
.marquee {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track { --mq-gap: 24px; display: flex; gap: var(--mq-gap); width: max-content; animation: mq 20s linear infinite; } /* wireframe : 30 s, accéléré */
.marquee--reverse .marquee__track { animation-duration: 16s; animation-direction: reverse; } /* wireframe : 24 s */
.marquee:hover .marquee__track, .marquee:focus-within .marquee__track { animation-play-state: paused; }
@keyframes mq { to { transform: translateX(calc(-50% - var(--mq-gap) / 2)); } } /* une série de logos + un demi-écart */
.logo-tile {
	flex: none; width: 170px; height: 80px;
	display: grid; place-items: center; text-align: center;
	background: var(--color-base); border: 1px solid var(--color-line); border-radius: var(--radius-md);
	font-size: var(--fs-x-small); color: var(--color-muted);
}
.logo-tile img { max-width: 80%; max-height: 60%; object-fit: contain; }
.marquee--pills .logo-tile { width: 150px; height: 64px; border-radius: var(--radius-pill); border-style: dashed; border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-line)); background: transparent; }

/* Vrais logos (gérés dans WordPress : Innadvise › Partenaires / Hôtels) : sans cadre, emplacements égaux,
   hauteur propre à chaque logo (--logo-h, réglée dans sa fiche), largeur selon son ratio. */
.marquee__track:has(.logo-tile--image) { --mq-gap: 0px; }
.logo-tile--image, .marquee--pills .logo-tile--image { width: var(--logo-slot, 248px); height: auto; min-height: 104px; padding: 8px 12px; border: 0; border-radius: 0; background: none; }
.logo-tile--image a { display: grid; place-items: center; }
.logo-tile--image img { display: block; height: var(--logo-h, 48px); width: auto; max-width: 100%; max-height: none; object-fit: contain; }

/* ==========================================================================
   Animations réduites (réglage du visiteur) : tout est affiché, rien ne bouge
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.marquee { -webkit-mask-image: none; mask-image: none; }
	.marquee__track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; padding-inline: var(--gutter); }
	.marquee__track [aria-hidden="true"] { display: none; }
}

/* ==========================================================================
   Adaptations mobiles (propositions — à valider)
   ========================================================================== */
@media (max-width: 720px) {
	.media-pair { grid-template-columns: 1fr; gap: 20px; }
	.video-result { grid-template-columns: 120px 1fr; gap: 12px; }
	.video-result__title { font-size: 16px; }
	.devices { aspect-ratio: auto; height: 260px; }
	.reception { height: 480px; }
}
@media (max-width: 640px) {
	.mock { padding: 20px 18px; gap: 14px; border-radius: var(--radius-lg); }
	.mock__bar { gap: 10px; }
	.mock__brand { font-size: 17px; }
	.mock__search { min-height: 42px; padding: 8px 14px; font-size: 15px; }
	.result { padding: 10px 12px; font-size: 14px; }
	.result__title { font-size: 16px; }
	.result--you .result__title { font-size: 17px; }
	.result__meta { font-size: 13px; }
	.mock .bubble--me { font-size: 15px; min-height: 42px; white-space: normal; }
	.answer { font-size: 15px; }
	.video-frame, .video-frame--500, .video-frame--image { aspect-ratio: 16 / 10; border-radius: var(--radius-lg); }
	.media-pair .video-frame { aspect-ratio: 4 / 3; }
	.play { width: 60px; height: 60px; }
	.step-item { padding: 12px 16px; }
	.offer { padding: 14px 18px; }
	.browser--cluttered { aspect-ratio: 4 / 3; }
	.cluttered { grid-template-columns: 1fr 1fr; padding: 14px; }
	.cluttered__col:nth-child(3) { display: none; }
	.browser--tabs { aspect-ratio: auto; height: 300px; }
	.tabs-bar { font-size: 13px; gap: 4px; padding: 8px; }
	.tab { padding: 4px 9px; }
	.tab--cta { margin-left: 0; }
	.logo-tile { width: 140px; height: 68px; }
	.marquee--pills .logo-tile { width: 128px; height: 56px; }
	.logo-tile--image, .marquee--pills .logo-tile--image { --logo-slot: 172px; min-height: 76px; height: auto; }
	.logo-tile--image img { height: calc(var(--logo-h, 48px) * .72); }
	.marquee__track { --mq-gap: 16px; }
}

/* ==========================================================================
   Pages légales (Mentions légales · Confidentialité · Cookies)
   WordPress : modèle templates/page.html → le contenu (core/post-content) reçoit la classe .legal.
   Le texte est saisi dans l'éditeur : titres, paragraphes, listes, tableaux natifs.
   ========================================================================== */
.legal { width: 100%; max-width: var(--width-prose); margin-inline: auto; display: grid; gap: var(--space-50); }
.legal__head { display: grid; gap: 12px; justify-items: center; text-align: center; }
.legal__date { font-size: var(--fs-small); color: var(--color-muted); }
.legal__toc { background: var(--color-surface); border-radius: var(--radius-lg); padding: 20px 24px; font-size: var(--fs-small); }
.legal__toc h2 { font: var(--font-weight-strong) var(--fs-eyebrow) var(--font-body); letter-spacing: var(--letter-spacing-eyebrow); text-transform: uppercase; color: var(--color-accent-text); margin-bottom: 10px; }
.legal__toc ol { margin: 0; padding-left: 1.3em; display: grid; gap: 4px; columns: 2 260px; }
.legal__toc a { text-decoration: none; }
.legal__toc a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 4px; }
.legal__part { display: grid; gap: 14px; scroll-margin-top: calc(var(--header-height) + 16px); }
.legal__part h2 { font-size: var(--fs-h3); padding-bottom: 10px; border-bottom: 1px solid var(--color-line); }
.legal__part h3 { font-size: var(--fs-title); margin-top: 6px; }
.legal__part p, .legal__part li, .legal__part dd { color: var(--color-ink); }
.legal__part ul, .legal__part ol { margin: 0; padding-left: 1.3em; display: grid; gap: 6px; }
.legal__part a { color: var(--color-primary); text-decoration-color: var(--color-accent); text-underline-offset: 3px; }
.legal__part a:hover { color: var(--color-primary-deep); }
.legal__ids { margin: 0; display: grid; grid-template-columns: minmax(150px, max-content) 1fr; gap: 8px 24px; padding: 18px 22px; border: 1px solid var(--color-line); border-radius: var(--radius-lg); }
.legal__ids dt { font-weight: var(--font-weight-strong); color: var(--color-primary); font-size: var(--fs-small); padding-top: 2px; }
.legal__ids dd { margin: 0; }
.legal__note { font-size: var(--fs-small); color: var(--color-muted); }
.legal__table { overflow-x: auto; border: 1px solid var(--color-line); border-radius: var(--radius-lg); }
.legal__table table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); min-width: 620px; }
.legal__table th, .legal__table td { text-align: left; vertical-align: top; padding: 10px 14px; border-bottom: 1px solid var(--color-line); }
.legal__table thead th { background: var(--color-surface); color: var(--color-primary); font-weight: var(--font-weight-strong); }
.legal__table tbody tr:last-child > * { border-bottom: 0; }
.legal__table code { font: 13px ui-monospace, Menlo, monospace; color: var(--color-primary-deep); }
@media (max-width: 640px) {
	.legal__ids { grid-template-columns: 1fr; gap: 2px; padding: 16px; }
	.legal__ids dd + dt { margin-top: 10px; }
}

/* Donnée à compléter par Innadvise (repérable : rechercher « a-completer » dans le code ou l'éditeur).
   À retirer une fois toutes les données renseignées. */
.a-completer { background: var(--color-accent-soft); color: var(--color-primary-deep); border: 1px dashed var(--color-accent); border-radius: 4px; padding: 0 .3em; font-style: normal; }

/* Bouton qui ressemble à un lien (« Gérer mes cookies ») */
.link-button { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Information RGPD sous un formulaire */
.form__note { font-size: var(--fs-x-small); color: var(--color-muted); line-height: 1.5; }
.form__note a { color: var(--color-primary); }