/* components.css : boutons, badges, header, sections, FAQ, appel final, footer */

/* Boutons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-1); min-height: 44px; padding: 0 var(--s-3); border-radius: var(--r-pill); font-family: var(--f-title); font-weight: 500; font-size: var(--fs-16); text-decoration: none; border: 2px solid transparent; cursor: pointer; white-space: nowrap; transition: background-color .15s, color .15s, border-color .15s; }
.btn .ic { transition: transform .2s; }
.btn:hover .ic { transform: translateX(3px); }
.btn-primary { background: var(--c-agence); color: var(--c-ink); }
.btn-primary:hover { background: color-mix(in srgb, var(--c-agence) 80%, var(--c-bg)); }
.btn-secondary { background: var(--c-bg); color: var(--c-ink); border-color: var(--c-ink); }
.btn-secondary:hover { background: var(--c-ink); color: var(--c-on-dark); }
.btn-ink { background: var(--c-ink); color: var(--c-on-dark); }
.btn-ink:hover { background: var(--c-ink-hover); }
.btn[disabled] { opacity: 0.6; cursor: wait; }
.btn-lg { min-height: 48px; padding: 0 var(--s-3); font-size: var(--fs-16); }
.btn-block { width: 100%; }
.link-more { display: inline-flex; align-items: center; gap: var(--s-1); font-weight: 600; color: var(--c-ia); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--c-ia-bar); text-underline-offset: 6px; transition: color .15s, text-decoration-color .15s; }
.link-more:hover { color: var(--c-ia-strong); text-decoration-color: currentColor; }
/* Sur fond sombre, le bleu manque de contraste : lien blanc souligné d'orange */
.sec-dark .link-more { color: var(--c-on-dark); text-decoration-color: var(--c-agence); }
.sec-dark .link-more:hover { color: var(--c-agence); text-decoration-color: currentColor; }
.link-more .ic { transition: transform .2s; }
.link-more:hover .ic { transform: translateX(3px); }
.cta-note { display: flex; align-items: center; gap: var(--s-1); font-size: var(--fs-14); color: var(--c-ink-2); font-weight: 500; }

/* Badges */
.badge { display: inline-flex; align-items: center; gap: var(--s-1); padding: var(--s-05) var(--s-1h); border-radius: var(--r-pill); font-size: var(--fs-14); font-weight: 700; line-height: 1.6; }
.badge-ia { background: var(--c-ia-soft); color: var(--c-ia-strong); }
.badge-agence { background: var(--c-agence-soft); color: var(--c-agence-text); }
.badge-ink { background: var(--c-ink); color: var(--c-on-dark); }
.badge-line { background: var(--c-bg); color: var(--c-ink-2); border: 1px solid var(--c-line); }
.valid { display: inline-flex; align-items: center; gap: var(--s-1); padding: var(--s-05) var(--s-2) var(--s-05) var(--s-05); border-radius: var(--r-pill); background: var(--c-bg); border: 1px solid var(--c-line); font-weight: 700; font-size: var(--fs-14); color: var(--c-ink); box-shadow: 0 4px 16px rgba(20, 20, 43, 0.06); }
.valid-dot { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--c-agence); color: var(--c-ink); }

/* Logo */
.logo { display: inline-flex; align-items: center; gap: var(--s-1h); text-decoration: none; }
.logo-mark { width: 32px; height: 32px; flex: none; }
.logo-txt { display: flex; flex-direction: column; line-height: 1.1; }
.logo-name { font-family: var(--f-title); font-weight: 700; font-size: var(--fs-16); white-space: nowrap; }
.logo-by { font-size: var(--fs-12); color: var(--c-ink-3); font-weight: 500; }
.mk-blue { fill: var(--c-ia); }
.mk-orange { fill: var(--c-agence); }
.mk-chk-ink { fill: none; stroke: var(--c-ink); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }

/* Header */
.hd { position: sticky; top: 0; z-index: 10; background: rgba(255, 255, 255, 0.96); border-bottom: 1px solid var(--c-line); }
.hd-in { display: flex; align-items: center; gap: var(--s-2); min-height: 64px; }
.nav { display: none; }
.nav a { white-space: nowrap; text-decoration: none; font-weight: 500; color: var(--c-ink-2); padding: var(--s-1) 0; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--c-ink); }
.nav a[aria-current="page"] { font-weight: 700; }
.hd-actions { display: flex; align-items: center; gap: var(--s-3); margin-left: auto; }
.hd-account { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--c-line); color: var(--c-ink-2); }
.hd-account:hover { border-color: var(--c-ia); color: var(--c-ia); }
.hd-actions .btn { display: none; }
.burger { display: inline-flex; width: 48px; height: 48px; border-radius: var(--r-sm); border: 1px solid var(--c-line); background: var(--c-bg); color: var(--c-ink); align-items: center; justify-content: center; cursor: pointer; }
.menu-panel { border-top: 1px solid var(--c-line); padding: var(--s-2) 0 var(--s-3); }
.menu-panel a:not(.btn) { display: block; padding: var(--s-1h) 0; font-weight: 700; font-family: var(--f-title); font-size: var(--fs-18); text-decoration: none; border-bottom: 1px solid var(--c-line); }
.menu-panel .btn { margin-top: var(--s-2); }

/* Sections */
.sec { padding-block: var(--s-8); }
.sec-alt { background: var(--c-bg-alt); }
/* Encart final : même fond que la section qui le précède, écart réduit */
.sec-alt + .sec-final { background: var(--c-bg-alt); padding-top: 0; }
.sec:not(.sec-dark):has(+ .sec-final) { padding-bottom: var(--s-6); }
.sec:not(.sec-dark) + .sec-final { padding-top: 0; }
/* Deux sections de même fond qui se suivent : une seule marge entre elles */
.sec:not(.sec-alt):not(.sec-dark) + .sec:not(.sec-alt):not(.sec-dark), .sec-alt + .sec-alt, .sec-dark + .sec-dark { padding-top: 0; }
.sec-dark { background: var(--c-ink); color: var(--c-on-dark); }
.sec-dark .eyebrow { background: rgba(255, 161, 0, 0.16); color: var(--c-agence); }
.sec-dark .lead { color: var(--c-on-dark-2); }
.sec-head { display: flex; flex-direction: column; gap: var(--s-2); max-width: 760px; margin-bottom: var(--s-5); align-items: flex-start; }
.sec-head.center { margin-inline: auto; text-align: center; align-items: center; }
.eyebrow { display: inline-flex; font-family: var(--f-title); font-weight: 700; font-size: var(--fs-12); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-ia-strong); background: var(--c-ia-soft); padding: var(--s-1) var(--s-2); border-radius: var(--r-pill); }
.h2-sm { font-size: var(--fs-32); }
.sec-foot { margin-top: var(--s-6); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--s-2) var(--s-4); }
.bar { height: 10px; border-radius: var(--r-pill); background: var(--c-ph-2); }

/* Étapes, formules, tableaux comparatifs (accueil, tarifs) */
.steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
.step { background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--r-xl); padding: var(--s-3); display: flex; flex-direction: column; gap: var(--s-2); }
.step-top { display: flex; align-items: center; justify-content: space-between; }
.step-num { width: 56px; height: 56px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--f-title); font-weight: 600; font-size: var(--fs-24); background: var(--c-ink); color: var(--c-on-dark); }
.step p { color: var(--c-ink-2); }
.step-ia { background: var(--c-bg-ia); border-color: var(--c-ia-line); }
.step-ia .step-num { background: var(--c-ia); }
.step-ia .badge, .step-agence .badge { background: var(--c-bg); }
.step-agence { background: var(--c-agence-bg); border-color: var(--c-agence-line); }
.step-agence .step-num { background: var(--c-agence); color: var(--c-ink); }
.cmp { width: 100%; font-size: var(--fs-16); min-width: 560px; }
.cmp th, .cmp td { text-align: left; padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--c-line); vertical-align: top; }
.cmp tr:last-child th, .cmp tr:last-child td { border-bottom: 0; }
.cmp thead th { font-family: var(--f-title); font-size: var(--fs-14); color: var(--c-ink-2); background: var(--c-bg-alt); }
.cmp thead th.us { color: var(--c-ink); background: var(--c-agence); }
.cmp td.us { background: var(--c-agence-bg); font-weight: 700; }
.cmp .cell { display: flex; gap: var(--s-1); align-items: flex-start; }
.billing { display: inline-flex; padding: var(--s-05); border-radius: var(--r-pill); background: var(--c-bg-alt); border: 1px solid var(--c-line); gap: var(--s-05); }
.billing button { min-height: 44px; padding: 0 var(--s-3); border-radius: var(--r-pill); border: 0; background: transparent; font-family: var(--f-title); font-weight: 500; color: var(--c-ink-2); cursor: pointer; }
.billing button { transition: background-color .15s, color .15s; }
.billing button:not([aria-pressed="true"]):hover { background: var(--c-bg); color: var(--c-ink); }
.billing button[aria-pressed="true"] { background: var(--c-ia); color: var(--c-on-dark); }
.billing-note { font-size: var(--fs-14); color: var(--c-ink-3); }
.plans { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; gap: var(--s-3); background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--r-xl); padding: var(--s-3); }
.plan-pro { border: 2px solid var(--c-ink); box-shadow: var(--shadow); }
.plan-flag { position: absolute; top: -14px; left: var(--s-4); }
.plan-for { color: var(--c-ink-3); font-size: var(--fs-14); }
.price { display: flex; align-items: baseline; gap: var(--s-1); }
.price-num { font-family: var(--f-title); font-weight: 600; font-size: var(--fs-40); line-height: 1; letter-spacing: -0.02em; }
.price-tax { font-weight: 700; color: var(--c-ink-2); }
.price-sub { font-size: var(--fs-14); color: var(--c-ink-3); margin-top: var(--s-05); }
.plan ul { display: flex; flex-direction: column; gap: var(--s-1h); }
.plan li { display: flex; gap: var(--s-1); align-items: flex-start; color: var(--c-ink-2); }
.plan li .ic { color: var(--c-ia); margin-top: 2px; }
.plan li.expert, .plan-expert { display: flex; gap: var(--s-1); align-items: flex-start; color: var(--c-ink); font-weight: 700; background: var(--c-agence-soft); border-radius: var(--r-sm); padding: var(--s-1) var(--s-1h); }
.plan li.expert .ic, .plan-expert .ic { color: var(--c-agence-text); margin-top: 2px; }
.plan-plus { font-family: var(--f-title); font-weight: 700; font-size: var(--fs-14); color: var(--c-ink); margin-bottom: var(--s-1h); }
.plans-gift { grid-column: 1 / -1; display: flex; gap: var(--s-1); align-items: center; justify-content: center; text-align: center; font-weight: 700; font-size: var(--fs-14); color: var(--c-ia-strong); background: var(--c-ia-soft); border-radius: var(--r-sm); padding: var(--s-1) var(--s-2); }
.plans-gift .ic { color: var(--c-ia); flex: none; }
.plan-cta { margin-top: auto; display: flex; flex-direction: column; gap: var(--s-1); }
.plan-cta .cta-note { justify-content: center; }
.pack { margin-top: var(--s-6); display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); background: var(--c-bg-ia); border-radius: var(--r-xl); padding: var(--s-3); }
.pack .btn { width: 100%; }
.pack-ic { width: 64px; height: 64px; flex: none; border-radius: var(--r-md); background: var(--c-ia); color: var(--c-on-dark); display: flex; align-items: center; justify-content: center; }
.pack-ic .ic { width: 32px; height: 32px; }
.pack-txt { flex: 1; display: flex; flex-direction: column; gap: var(--s-05); }
.pack-title { font-family: var(--f-title); font-weight: 600; font-size: var(--fs-20); }
.pack-txt p:not(.pack-title) { color: var(--c-ink-2); }
.pay { margin-top: var(--s-3); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-1) var(--s-4); font-size: var(--fs-14); color: var(--c-ink-3); }
.pay span { display: inline-flex; align-items: center; gap: var(--s-1); }
.pay a { color: var(--c-ink-2); }
.faq-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); align-items: start; }
.faq-grid .sec-head { margin-bottom: 0; }

/* Pages internes : en-tête, fil d'Ariane, tableaux, encadrés, listes */
.page-hero { background: var(--c-bg-ia); padding-block: var(--s-5) var(--s-6); }
.page-hero-in { display: flex; flex-direction: column; gap: var(--s-3); align-items: center; text-align: center; max-width: 860px; margin: 0 auto; }
.page-hero .h1 { font-size: var(--fs-32); }
.page-hero .billing { background: var(--c-bg); }
.crumbs { display: flex; flex-wrap: wrap; gap: var(--s-1); font-size: var(--fs-14); color: var(--c-ink-3); }
.crumbs a { color: var(--c-ink-2); }
.tbl-wrap { overflow-x: auto; background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--r-lg); }
.tbl-wrap .cmp { min-width: 640px; }
.cmp td.num, .cmp th.num { text-align: right; white-space: nowrap; font-weight: 700; }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.box { background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: var(--s-3); display: flex; flex-direction: column; gap: var(--s-2); }
.box-ia { background: var(--c-bg-ia); border-color: var(--c-ia-line); }
.box-agence { background: var(--c-agence-bg); border-color: var(--c-agence-line); }
.box h3 { font-family: var(--f-title); font-weight: 600; font-size: var(--fs-20); }
.box p { color: var(--c-ink-2); }
.three-col { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
.check-list { display: flex; flex-direction: column; gap: var(--s-1h); }
.check-list li { display: flex; gap: var(--s-1); align-items: flex-start; color: var(--c-ink-2); }
.check-list li .ic { color: var(--c-ia); margin-top: 2px; }
.check-list.agence li .ic { color: var(--c-agence-text); }

.calc { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4); background: var(--c-bg-alt); border-radius: var(--r-xl); padding: var(--s-3); }
.calc .btn { width: 100%; }
.calc-txt { flex: 1; display: flex; flex-direction: column; gap: var(--s-05); }
.calc-txt p:not(.pack-title) { color: var(--c-ink-2); }
.box .pack-ic { width: 48px; height: 48px; }
.box .pack-ic .ic { width: 24px; height: 24px; }
.tag-list { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.tag-list a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--s-2); border-radius: var(--r-pill); background: var(--c-bg); border: 1px solid var(--c-line); text-decoration: none; font-weight: 500; font-size: var(--fs-14); }
.tag-list a:hover { border-color: var(--c-ia); color: var(--c-ia); }
.meta { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); font-size: var(--fs-14); color: var(--c-ink-3); }

.page-hero-left .page-hero-in { align-items: flex-start; text-align: left; margin: 0; max-width: 760px; }
.two-col > .sec-head { margin-bottom: 0; }
.prose { max-width: 720px; display: flex; flex-direction: column; gap: var(--s-2); }
.prose p, .prose li, .prose dd { color: var(--c-ink-2); }
.prose a { color: var(--c-ia); text-underline-offset: 3px; }
/* Section « Le guide » (outils, secteurs, tarifs) : intertitres et listes dans le bloc de texte */
.sec-guide .prose h3 { font-family: var(--f-title); font-weight: 600; font-size: var(--fs-20); line-height: 1.3; color: var(--c-ink); margin-top: var(--s-1); }
.sec-guide .prose h3:first-child { margin-top: 0; }
.sec-guide .prose ul { display: flex; flex-direction: column; gap: var(--s-1); padding-left: var(--s-3); list-style: disc; }

/* Galerie des modèles */
.filters { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: var(--s-1); margin: 0 calc(var(--s-2) * -1) var(--s-4); padding: 0 var(--s-2) var(--s-1); }
.models { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-1h); }
.model { position: relative; display: flex; flex-direction: column; gap: var(--s-1h); background: var(--c-bg); border-radius: var(--r-lg); padding: var(--s-1) var(--s-1) var(--s-2); box-shadow: var(--shadow-soft); }
.thumb { position: relative; height: 150px; border-radius: var(--r-md); background: var(--tint, var(--c-bg-alt)); padding: var(--s-1h); display: flex; flex-direction: column; gap: var(--s-1); }
.thumb .badge { position: absolute; top: var(--s-1h); left: var(--s-1h); }
.thumb > .bar { width: 70%; }
.thumb .bar { background: rgba(20, 20, 43, 0.14); }
.tint-batiment { --tint: var(--c-m-batiment); --accent: var(--c-m-batiment-2); }
.tint-restauration { --tint: var(--c-m-restauration); --accent: var(--c-m-restauration-2); }
.tint-beaute { --tint: var(--c-m-beaute); --accent: var(--c-m-beaute-2); }
.tint-sante { --tint: var(--c-m-sante); --accent: var(--c-m-sante-2); }
.tint-conseil { --tint: var(--c-m-conseil); --accent: var(--c-m-conseil-2); }
.tint-commerce { --tint: var(--c-m-commerce); --accent: var(--c-m-commerce-2); }
.tint-association { --tint: var(--c-m-association); --accent: var(--c-m-association-2); }
.tint-creatif { --tint: var(--c-m-creatif); --accent: var(--c-m-creatif-2); }
.tint-immobilier { --tint: var(--c-m-immobilier); --accent: var(--c-m-immobilier-2); }
.tint-services { --tint: var(--c-m-services); --accent: var(--c-m-services-2); }
.tint-transport { --tint: var(--c-m-transport); --accent: var(--c-m-transport-2); }
.tint-automobile { --tint: var(--c-m-automobile); --accent: var(--c-m-automobile-2); }
.tint-sport { --tint: var(--c-m-sport); --accent: var(--c-m-sport-2); }
.tint-education { --tint: var(--c-m-education); --accent: var(--c-m-education-2); }
.tint-evenementiel { --tint: var(--c-m-evenementiel); --accent: var(--c-m-evenementiel-2); }
.tint-tourisme { --tint: var(--c-m-tourisme); --accent: var(--c-m-tourisme-2); }
.tint-animaux { --tint: var(--c-m-animaux); --accent: var(--c-m-animaux-2); }
.tint-finance { --tint: var(--c-m-finance); --accent: var(--c-m-finance-2); }
.tint-informatique { --tint: var(--c-m-informatique); --accent: var(--c-m-informatique-2); }
.tint-terroir { --tint: var(--c-m-terroir); --accent: var(--c-m-terroir-2); }

/* Aperçu d'une version : capture réelle de l'exemple dans un cadre de navigateur */
.mq { display: block; overflow: hidden; border-radius: var(--r-md); border: 1px solid var(--c-line); background: var(--c-bg); }
.mq-bar { display: flex; gap: var(--s-05); padding: var(--s-1) var(--s-1h); background: var(--c-bg-alt); border-bottom: 1px solid var(--c-line); }
.mq-bar i { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--c-ph-2); }
.mq img { display: block; width: 100%; height: auto; }
.model .mq { border-radius: var(--r-md); }
.usite-shot { display: block; border-radius: var(--r-md); transition: transform .2s, box-shadow .2s; }
.usite-shot:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
@media (prefers-reduced-motion: reduce) { .usite-shot, .usite-shot:hover, .btn:hover, .btn:hover .ic, .link-more:hover .ic { transition: none; transform: none; } }

/* Encart « Aucune version ne vous ressemble ? » (personnalisation, Premium sur mesure) */
.az { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); align-items: center; padding: var(--s-4) var(--s-3); border-radius: var(--r-xl); background: var(--c-ink); color: var(--c-on-dark); }
.az .h2, .az h2 { color: var(--c-on-dark); }
.az p { color: var(--c-on-dark-2); }
.az-txt { display: flex; flex-direction: column; gap: var(--s-2); align-items: flex-start; }
.az-steps { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.az-steps li { padding: var(--s-05) var(--s-2); border-radius: var(--r-pill); border: 1px solid var(--c-ink-2); color: var(--c-on-dark); font-size: var(--fs-14); font-weight: 500; }
.az-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.az .az-link { color: var(--c-on-dark); text-decoration-color: var(--c-on-dark-2); }
.az-pieces { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-1); }
.az-pieces span { aspect-ratio: 1; border-radius: var(--r-md); border: 2px dashed var(--c-ink-2); display: grid; place-items: center; color: var(--c-on-dark-2); }
.az-pieces span:nth-child(2), .az-pieces span:nth-child(4), .az-pieces span:nth-child(9) { border-style: solid; border-color: var(--c-agence); background: var(--c-ink-hover); color: var(--c-agence); }
.az-pieces .ic { width: 24px; height: 24px; }
.model-body { display: flex; flex-direction: column; gap: var(--s-05); padding-inline: var(--s-05); }
.model-name { font-family: var(--f-title); font-weight: 600; font-size: var(--fs-16); }
.model-name a { text-decoration: none; }
.model-name a:hover { color: var(--c-ia); }
.gal-meta { font-size: var(--fs-14); color: var(--c-ink-3); }  /* secteur · version, sous le nom d'un métier */
.model .link-more { font-size: var(--fs-14); margin-top: var(--s-05); padding-inline: var(--s-05); }

/* Formulaires */
.form { display: flex; flex-direction: column; gap: var(--s-3); }
.form-box { padding: var(--s-3); }
.form-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
.field { display: flex; flex-direction: column; gap: var(--s-1); }
.field label { font-weight: 700; font-size: var(--fs-14); }
.field .opt { font-weight: 400; color: var(--c-ink-3); }
.input { width: 100%; min-height: 48px; padding: 0 var(--s-2); border: 1px solid var(--c-ink-3); border-radius: var(--r-sm); background: var(--c-bg); font-family: var(--f-text); font-size: var(--fs-16); color: var(--c-ink); }
textarea.input { min-height: 160px; padding: var(--s-1h) var(--s-2); resize: vertical; }
.input:focus { outline: 3px solid var(--c-ia); outline-offset: 1px; }
.input[aria-invalid="true"] { border-color: var(--c-error); }
.check-row { display: flex; gap: var(--s-1h); align-items: flex-start; font-size: var(--fs-14); color: var(--c-ink-2); }
.check-row input { width: 20px; height: 20px; flex: none; margin: 2px 0 0; accent-color: var(--c-ia); }
.check-row input:focus-visible { outline: 3px solid var(--c-ia); outline-offset: 2px; }
.form .btn { width: 100%; }
.form-required { font-size: var(--fs-14); color: var(--c-ink-3); }

/* FAQ */
/* FAQ au style de l'accordéon « Inclus » : lignes séparées par un filet, pastille + qui tourne en × (animation dans main.js) */
.faq { display: flex; flex-direction: column; }
.faq details { border-bottom: 1px solid var(--c-line); }
.faq details:first-child { border-top: 1px solid var(--c-line); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); min-height: 64px; padding: var(--s-2) 0; color: var(--c-ink); font-family: var(--f-title); font-weight: 600; font-size: var(--fs-16); transition: color .15s; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--c-ia); }
.faq summary .ic { flex: none; width: 32px; height: 32px; padding: 6px; border-radius: 50%; background: var(--c-ia-soft); color: var(--c-ia); transition: transform .35s ease, background-color .35s, color .35s; }
.sec-alt .faq summary .ic { background: var(--c-bg); }
.faq details[open]:not(.is-closing) summary .ic { transform: rotate(45deg); background: var(--c-ia); color: var(--c-on-dark); }
.faq .ans { padding: 0 var(--s-5) var(--s-3) 0; color: var(--c-ink-2); overflow: hidden; }

/* Encart final « Créer mon site » (final_cta.py) : texte et bouton à gauche, 3 garanties à droite, un seul lien */
.final { position: relative; overflow: hidden; isolation: isolate; background: var(--c-ia); color: var(--c-on-dark); border-radius: var(--r-lg); padding: var(--s-6) var(--s-3); display: grid; gap: var(--s-4); box-shadow: var(--shadow-ia); }
.final::before, .final::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.final::before { width: 420px; height: 420px; right: -160px; top: -200px; background: var(--c-ia-strong); }
.final::after { width: 260px; height: 260px; left: -120px; bottom: -150px; border: 2px solid var(--c-ia-light); opacity: .35; }
.final-txt { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); }
.final .h2 { color: var(--c-on-dark); max-width: 640px; }
.final-txt p { color: var(--c-on-ia); font-size: var(--fs-18); max-width: 560px; }
.final .btn { width: 100%; margin-top: var(--s-1); }
.final-points { display: flex; flex-direction: column; gap: var(--s-2); align-self: center; padding: var(--s-3); border-radius: var(--r-lg); background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.18); }
.final-points li { display: flex; gap: var(--s-1h); align-items: flex-start; }
.final-points strong { display: block; color: var(--c-on-dark); font-family: var(--f-title); font-weight: 600; }
.final-points span span, .final-points li > span:last-child { color: var(--c-on-ia); font-size: var(--fs-14); }
.final-ic { width: 40px; height: 40px; flex: none; border-radius: var(--r-md); display: inline-flex; align-items: center; justify-content: center; background: var(--c-bg); color: var(--c-ia); }
.final-points li:nth-child(2) .final-ic { background: var(--c-agence); color: var(--c-ink); }
.final .t-ia-dark { color: var(--c-on-dark); text-decoration: underline; text-decoration-color: var(--c-ia-light); text-underline-offset: 8px; }
.final .t-agence-dark { color: var(--c-agence); }

/* Footer */
.ft { padding-block: var(--s-10) var(--s-5); background: var(--c-bg); border-top: 1px solid var(--c-line); }
.ft-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.ft-brand { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--s-2); align-items: flex-start; }
.ft-brand p { color: var(--c-ink-2); font-size: var(--fs-14); max-width: 320px; }
.ft-col h2 { font-family: var(--f-title); font-size: var(--fs-14); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-ink-3); margin-bottom: var(--s-2); }
.ft-col ul { display: flex; flex-direction: column; gap: var(--s-1); }
.ft-col a { text-decoration: none; color: var(--c-ink-2); font-size: var(--fs-14); display: inline-block; padding-block: var(--s-05); }
.ft-col a:hover { color: var(--c-ink); text-decoration: underline; }
.ft-bottom { margin-top: var(--s-6); padding-top: var(--s-3); border-top: 1px solid var(--c-line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2); font-size: var(--fs-14); color: var(--c-ink-3); }
.ft-bottom a { color: var(--c-ink-2); }

/* Tablette */
@media (min-width: 641px) {
  .form-box { padding: var(--s-5); }
  .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form .btn { width: auto; align-self: flex-start; }
  .filters { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding: 0; }
  .models { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-2); }
  .model { padding: var(--s-1h) var(--s-1h) var(--s-3); }
  .thumb { height: 190px; padding: var(--s-2); }
  .model-name { font-size: var(--fs-18); }
  .prose p, .prose li, .prose dd { font-size: var(--fs-18); }
  .calc { flex-direction: row; align-items: center; padding: var(--s-4); }
  .calc .btn { width: auto; }
  .h2-sm { font-size: var(--fs-40); }
  .page-hero { padding-block: var(--s-8) var(--s-10); }
  .page-hero .h1 { font-size: var(--fs-48); }
  .box { padding: var(--s-4); }
  .three-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
  .az { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); padding: var(--s-6); gap: var(--s-6); }
  .pack { flex-direction: row; align-items: center; gap: var(--s-4); padding: var(--s-4); }
  .pack .btn { width: auto; }
  .hd-in { min-height: 80px; gap: var(--s-4); }
  .logo-mark { width: 40px; height: 40px; }
  .logo-name { font-size: var(--fs-18); }
  .hd-actions .btn { display: inline-flex; }
  .sec { padding-block: var(--s-10); }
  .sec-head { margin-bottom: var(--s-6); }
  .faq summary { font-size: var(--fs-18); }
  .final { border-radius: var(--r-xl); padding: var(--s-8) var(--s-5); }
  .final .btn { width: auto; }
  .ft-grid { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
  .ft-brand { grid-column: auto; }
}

/* Menu complet dès 900 px (en dessous, le logo et le menu ne tiennent pas sur une ligne) */
@media (min-width: 900px) {
  .nav { display: flex; gap: var(--s-3); margin-left: auto; }
  .hd-actions { margin-left: 0; }
  .burger, .menu-panel { display: none !important; }
}

/* Desktop */
@media (min-width: 1101px) {
  .sec:not(.sec-dark):has(+ .sec-final) { padding-bottom: var(--s-8); }
  .models { gap: var(--s-3); }
  .thumb { height: 240px; }
  .two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .three-col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps { gap: var(--s-3); }
  .step { padding: var(--s-4); }
  .plans { gap: var(--s-3); }
  .plan { padding: var(--s-4); }
  .price-num { font-size: var(--fs-56); }
  .faq-grid { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: var(--s-8); }
  .nav { gap: var(--s-4); }
  .hd-account { display: inline-flex; }
  .sec { padding-block: var(--s-12); }
  .final { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: var(--s-8); padding: var(--s-10) var(--s-8); }
}

/* Bouton compact */
.btn-sm { min-height: 40px; padding: 0 var(--s-2); font-size: var(--fs-14); }

/* ---------- Onglets illustrés (blocs.py) ---------- */
.tab-list { display: none; }
.tabs-on .tab-list { display: flex; gap: var(--s-1); overflow-x: auto; scrollbar-width: none; margin-bottom: var(--s-4); padding: var(--s-05); border-radius: var(--r-pill); background: var(--c-bg); border: 1px solid var(--c-line); }
.tab-list::-webkit-scrollbar { display: none; }
.tab-list [role="tab"] { flex: none; display: inline-flex; align-items: center; gap: var(--s-1); min-height: 44px; padding: 0 var(--s-2); border: 0; border-radius: var(--r-pill); background: transparent; color: var(--c-ink-2); font-family: var(--f-title); font-weight: 500; font-size: var(--fs-14); cursor: pointer; }
.tab-list [role="tab"]:hover { color: var(--c-ia); }
.tab-list [role="tab"][aria-selected="true"] { background: var(--c-ia); color: var(--c-on-dark); }
.tab-panel { display: grid; gap: var(--s-4); align-items: center; padding: var(--s-3); border-radius: var(--r-xl); background: var(--c-bg); border: 1px solid var(--c-line); }
.tab-panel + .tab-panel { margin-top: var(--s-2); }
.tabs-on .tab-panel + .tab-panel { margin-top: 0; }
.tab-panel[hidden] { display: none; }

/* Illustrations des onglets : captures d'exemples et éléments d'interface, dans le style du site */
.ill { position: relative; min-height: 260px; padding: var(--s-2); border-radius: var(--r-lg); background: var(--c-bg-ia); display: flex; align-items: center; justify-content: center; }
.ill img { display: block; width: 100%; height: auto; }
.ill-win { width: 88%; overflow: hidden; border-radius: var(--r-md); background: var(--c-bg); box-shadow: var(--shadow); }
.ill-bar { display: flex; gap: var(--s-05); padding: var(--s-1) var(--s-1h); background: var(--c-bg-alt); border-bottom: 1px solid var(--c-line); }
.ill-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--c-ph-2); }
.ill-card { position: absolute; right: var(--s-1h); bottom: var(--s-1h); min-width: 180px; padding: var(--s-1h) var(--s-2); border-radius: var(--r-md); background: var(--c-bg); box-shadow: var(--shadow); }
.ill-card ul { display: flex; flex-direction: column; gap: var(--s-05); margin-top: var(--s-1); }
.ill-card li { display: flex; align-items: center; gap: var(--s-1); font-size: var(--fs-14); color: var(--c-ink-2); }
.ill-card li .ic { width: 16px; height: 16px; color: var(--c-ia); }
.ill-card-title { display: flex; align-items: center; gap: var(--s-1); font-family: var(--f-title); font-weight: 700; font-size: var(--fs-14); }
.ill-domaine { flex-direction: column; gap: var(--s-1h); }
.ill-url, .ill-mail { display: flex; align-items: center; gap: var(--s-1h); width: 88%; padding: var(--s-1h) var(--s-2); border-radius: var(--r-pill); background: var(--c-bg); box-shadow: var(--shadow-soft); font-size: var(--fs-16); }
.ill-url .ic, .ill-mail .ic { color: var(--c-ia); }
.ill-mail { border-radius: var(--r-md); }
.ill-mail span { display: flex; flex-direction: column; font-size: var(--fs-14); color: var(--c-ink-2); }
.ill-mail b, .ill-url b { color: var(--c-ink); }
.ill-win-sm { width: 70%; }
.ill-phones { gap: var(--s-3); }
.ill-phone { width: 34%; max-width: 170px; padding: var(--s-1); border-radius: var(--r-lg); background: var(--c-ink); box-shadow: var(--shadow); }
.ill-phone img { border-radius: var(--r-md); }
.ill-phone + .ill-phone { transform: translateY(var(--s-3)); }
.ill-form-card, .ill-compte-card { width: 78%; display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-3); border-radius: var(--r-md); background: var(--c-bg); box-shadow: var(--shadow); }
.ill-field { display: block; padding: var(--s-1h); border-radius: var(--r-sm); border: 1px solid var(--c-line); background: var(--c-bg-alt); color: var(--c-ink-3); font-size: var(--fs-14); }
.ill-field-lg { padding-bottom: var(--s-5); }
.ill-btn { display: inline-flex; justify-content: center; margin-top: var(--s-05); padding: var(--s-1h); border-radius: var(--r-pill); background: var(--c-ink); color: var(--c-on-dark); font-family: var(--f-title); font-weight: 500; font-size: var(--fs-14); }
.ill-card-float { top: var(--s-3); bottom: auto; right: var(--s-2); }
.ill-card-float .ic { color: var(--c-ia); }
.ill-compte-card li { display: flex; justify-content: space-between; gap: var(--s-2); padding-block: var(--s-1); border-bottom: 1px solid var(--c-line); font-size: var(--fs-14); }
.ill-compte-card em { font-style: normal; font-weight: 700; color: var(--c-ink-3); }
.ill-compte-card em.ok { color: var(--c-ok-text); }

/* ---------- Accordéon vertical illustré (blocs.onglets) ---------- */
/* Sans JS : tous les points sont ouverts. Avec JS (.acc-on) : un seul point ouvert, l'illustration suit. */
.acc { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
.acc-visual { display: grid; order: -1; }
.acc-ill { grid-area: 1 / 1; transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0.45s; }
.acc-ill:not(.is-on) { opacity: 0; visibility: hidden; transform: translateY(var(--s-3)) scale(0.97); pointer-events: none; }
.acc-ill .ill { height: 100%; border-radius: var(--r-xl); overflow: hidden; }
/* Les éléments de l'illustration entrent l'un après l'autre (la position finale reste celle de chaque élément) */
.acc-on .acc-ill.is-on .ill > * { animation: acc-pop 0.6s 0.1s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
.acc-on .acc-ill.is-on .ill > :nth-child(2) { animation-delay: 0.25s; }
.acc-on .acc-ill.is-on .ill > :nth-child(3) { animation-delay: 0.4s; }
@keyframes acc-pop { from { opacity: 0; transform: translateY(var(--s-3)) scale(0.94); } }
.acc-item { border-bottom: 1px solid var(--c-line); }
.acc-item:first-child { border-top: 1px solid var(--c-line); }
.acc-h { margin: 0; font-size: inherit; }
.acc-btn { display: flex; align-items: center; gap: var(--s-2); width: 100%; min-height: 64px; padding: var(--s-2) 0; border: 0; background: transparent; color: var(--c-ink); font-family: var(--f-title); font-weight: 600; font-size: var(--fs-18); text-align: left; cursor: pointer; }
.acc-btn > span { flex: 1; }
.acc-btn > .ic { flex: none; width: 40px; height: 40px; padding: var(--s-1); border-radius: var(--r-sm); background: var(--c-ia-soft); color: var(--c-ia); transition: background 0.3s, color 0.3s; }
.acc-btn:hover { color: var(--c-ia); }
.acc-item.is-open .acc-btn > .ic { background: var(--c-ia); color: var(--c-on-dark); }
.acc-sign { position: relative; flex: none; width: 24px; height: 24px; }
.acc-sign::before, .acc-sign::after { content: ""; position: absolute; top: 11px; left: 4px; width: 16px; height: 2px; border-radius: 2px; background: currentColor; transition: transform 0.35s ease; }
.acc-sign::after { transform: rotate(90deg); }
.acc-item.is-open .acc-sign::after, .acc:not(.acc-on) .acc-sign::after { transform: rotate(0); }
.acc-panel { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.4s ease; }
.acc-in { overflow: hidden; transition: visibility 0.4s; }
.acc-in p { padding: 0 var(--s-5) var(--s-3) calc(var(--s-5) + var(--s-2)); color: var(--c-ink-2); font-size: var(--fs-16); }
.acc-on .acc-item:not(.is-open) .acc-panel { grid-template-rows: 0fr; }
.acc-on .acc-visual:empty { display: none; }
.acc-in .acc-ill { opacity: 1; visibility: visible; transform: none; margin-bottom: var(--s-3); }
.acc-in .acc-ill .ill { min-height: 240px; }
.acc-on .acc-item:not(.is-open) .acc-in { visibility: hidden; }
@media (min-width: 1101px) {
  .acc { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--s-8); align-items: center; }
  .acc-visual { order: 0; }
  .acc-ill .ill { min-height: 460px; }
  .acc-btn { font-size: var(--fs-20); }
}

/* ---------- Outils intégrés (blocs.py) ---------- */
/* Mobile : les outils défilent sur le côté (une carte et le début de la suivante), en grille à partir de 641 px */
.tools { display: flex; gap: var(--s-2); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--s-2); scrollbar-width: none; margin-inline: calc(-1 * var(--s-2)); padding: 0 var(--s-2) var(--s-1); }
.tools::-webkit-scrollbar { display: none; }
.tools > li { flex: 0 0 82%; scroll-snap-align: start; }
.tool { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-3); border-radius: var(--r-lg); background: var(--c-bg); border: 1px solid var(--c-line); }
.tool-ic { width: 48px; height: 48px; display: grid; place-items: center; border-radius: var(--r-md); background: var(--c-ia-soft); color: var(--c-ia); margin-bottom: var(--s-1); }
.tool-ic .ic { width: 24px; height: 24px; }
.tool h3 { font-family: var(--f-title); font-weight: 600; font-size: var(--fs-18); }
.tool p { color: var(--c-ink-2); font-size: var(--fs-14); }
.tool-tag { margin-top: auto; padding-top: var(--s-1); font-size: var(--fs-14); font-weight: 700; color: var(--c-ia-strong); }

@media (min-width: 641px) {
  .tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; margin-inline: 0; padding: 0; }
  .tools > li { flex: none; }
  .tab-panel { padding: var(--s-5); }
}
@media (min-width: 1101px) {
  .tabs-on .tab-list { display: inline-flex; flex-wrap: wrap; justify-content: center; max-width: 100%; margin-inline: auto; overflow: visible; border-radius: var(--r-lg); }
  .tabs { display: flex; flex-direction: column; }
  .tab-panel { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--s-8); padding: var(--s-6); }
  .tools { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ill { min-height: 340px; padding: var(--s-4); }
}

/* Formules compactes */
.fcards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
.fcard { position: relative; display: flex; flex-direction: column; gap: var(--s-1h); padding: var(--s-4) var(--s-3) var(--s-3); border-radius: var(--r-xl); background: var(--c-bg); border: 1px solid var(--c-line); }
.fcard p:not(.fcard-price) { color: var(--c-ink-2); }
.fcard .btn { margin-top: auto; }
.fcard-pro { border: 2px solid var(--c-ink); box-shadow: var(--shadow); }
.fcard-pro .badge { position: absolute; top: -14px; left: var(--s-3); }
.fcard-price { font-family: var(--f-title); font-weight: 600; font-size: var(--fs-32); line-height: 1.1; }
.fcard-price span { display: block; font-family: var(--f-text); font-weight: 400; font-size: var(--fs-14); color: var(--c-ink-3); margin-top: var(--s-05); }

/* Étapes numérotées (liste ordonnée) */
ol.steps { padding: 0; list-style: none; }
@media (min-width: 641px) { .fcards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tab-panel-plain { display: block; padding: 0; border: 0; background: transparent; }
.tab-panel-plain[hidden] { display: none; }
.tab-panel-plain .models { margin-bottom: var(--s-3); }
.metiers-pop-t { margin: var(--s-6) 0 var(--s-2); }

/* Touches de couleur, en bleu du site sur toutes les pages */
.hero-shot { box-shadow: var(--s-1h) var(--s-1h) 0 var(--c-ia-blob), var(--shadow-ia); }
.need { position: relative; overflow: hidden; }
.need::before { content: ""; position: absolute; inset: 0 0 auto; height: var(--s-05); background: var(--c-ia); }
.need-num { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--c-ia-soft); color: var(--c-ia-strong); font-family: var(--f-title); font-weight: 700; font-size: var(--fs-14); }
.tag-list a::before { content: ""; width: var(--s-1); height: var(--s-1); margin-right: var(--s-1); border-radius: 50%; background: var(--c-ia); flex: none; }
.tag-list a:hover { background: var(--c-ia-soft); border-color: var(--c-ia); color: var(--c-ink); }
@media (min-width: 1101px) {
  .hero-shot { box-shadow: var(--s-3) var(--s-3) 0 var(--c-ia-blob), var(--shadow-ia); }
}
.tool-note a { font-weight: 700; }
.tool-note { margin-top: var(--s-2); font-size: var(--fs-14); color: var(--c-ink-3); }

/* Fenêtre d'aperçu d'un exemple, 3 versions (galerie.js) : galerie /metiers/ et pages secteur */
.gal-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); margin-top: var(--s-1h); }
.gal-actions .link-more { font-size: var(--fs-14); }
.gal-dialog { width: min(96vw, 1200px); height: min(92vh, 900px); max-width: none; max-height: none; padding: 0; border: 0; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-dark); }
.gal-dialog[open] { display: flex; flex-direction: column; }
.gal-dialog::backdrop { background: var(--c-ink); opacity: 0.7; }
.gal-dialog-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1h); padding: var(--s-1h) var(--s-2); border-bottom: 1px solid var(--c-line); background: var(--c-bg); }
.gal-dialog-title { font-family: var(--f-title); font-weight: 700; margin-right: auto; }
.gal-dialog-close { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--c-bg-alt); cursor: pointer; }
.gal-dialog-close .ic { transform: rotate(45deg); }
.gal-dialog iframe { flex: 1; width: 100%; border: 0; }

/* Exemples par secteur : ligne discrète des autres secteurs, sous les onglets */
.sect-autres { margin-top: var(--s-4); font-size: var(--fs-14); line-height: 1.9; color: var(--c-ink-3); }
.sect-autres b { color: var(--c-ink-2); font-weight: 600; }
.sect-autres a { color: var(--c-ink-2); text-decoration-color: var(--c-line); text-underline-offset: 3px; }
.sect-autres a:hover { color: var(--c-ia); text-decoration-color: currentColor; }

/* L'IA + l'Agence 312 : le parcours en 2 temps à gauche, une relecture animée à droite, puis les 6 garanties */
.rel { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); align-items: center; }
.rel-txt .lead { margin-top: var(--s-2); }
.rel-flow { position: relative; display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-4); }
.rel-flow::before { content: ""; position: absolute; left: 23px; top: 48px; bottom: 48px; border-left: 2px dashed var(--c-line); }
.rel-flow li { position: relative; display: flex; gap: var(--s-2); align-items: flex-start; }
.rel-dot { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; flex: none; border-radius: var(--r-md); background: var(--c-ia); color: var(--c-on-dark); }
.rel-ag .rel-dot { background: var(--c-agence); color: var(--c-ink); }
.rel-who { font-family: var(--f-title); font-weight: 700; font-size: var(--fs-12); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-ia-strong); }
.rel-ag .rel-who { color: var(--c-agence-text); }
.rel-flow h3 { margin-top: var(--s-05); font-family: var(--f-title); font-weight: 600; font-size: var(--fs-20); line-height: 1.3; }
.rel-flow p:last-child { margin-top: var(--s-05); color: var(--c-ink-2); }
.rel-res { display: flex; gap: var(--s-1h); align-items: center; margin-top: var(--s-4); padding: var(--s-2) var(--s-3); border-radius: var(--r-md); background: var(--c-bg-ia); font-family: var(--f-title); font-weight: 600; color: var(--c-ink); }
.rel-res .ic { flex: none; color: var(--c-ia); }
/* Illustration : le site rédigé, et la fiche de relecture qui se coche */
.rel-illu { position: relative; padding: var(--s-4) var(--s-3) var(--s-3); border-radius: var(--r-xl); background: var(--c-agence-pale); }
.rel-illu .mk-win { max-width: 360px; }
.rel-illu .mk-img { background: var(--c-agence-blob); }
.rel-card { position: relative; margin: calc(-1 * var(--s-6)) 0 0 auto; width: min(100%, 300px); padding: var(--s-2) var(--s-2) var(--s-1h); border-radius: var(--r-md); background: var(--c-bg); box-shadow: var(--shadow); }
.rel-card-t { display: flex; align-items: center; gap: var(--s-1); margin-bottom: var(--s-1h); font-family: var(--f-title); font-weight: 700; font-size: var(--fs-14); color: var(--c-ink); }
.rel-card-t i { width: 8px; height: 8px; border-radius: 50%; background: var(--c-agence); }
.rel-card ul { display: flex; flex-direction: column; gap: var(--s-1); font-size: var(--fs-14); color: var(--c-ink-2); }
.rel-card li { display: flex; align-items: center; gap: var(--s-1); }
.rel-ok { display: inline-flex; align-items: center; gap: var(--s-05); margin-top: var(--s-1h); padding: var(--s-05) var(--s-1h); border-radius: var(--r-pill); background: var(--c-ok-bg); color: var(--c-ok-text); font-size: var(--fs-12); font-weight: 700; }
.rel-ok .ic { width: 14px; height: 14px; }
/* Les 6 garanties : une liste, pas des cartes (rien n'a l'air cliquable) */
.rel-gt { margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--c-line); font-family: var(--f-title); font-weight: 600; font-size: var(--fs-24); }
.rel-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3) var(--s-5); margin-top: var(--s-4); }
.rel-list li { display: flex; gap: var(--s-2); align-items: flex-start; }
.pg-ic { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--c-agence-soft); color: var(--c-agence-text); }
.rel-list h4 { font-family: var(--f-title); font-weight: 600; font-size: var(--fs-18); line-height: 1.3; }
.rel-list p { margin-top: var(--s-05); font-size: var(--fs-14); color: var(--c-ink-3); }
.iavs-note { margin-top: var(--s-5); font-size: var(--fs-14); color: var(--c-ink-3); }
.iavs-note a { color: var(--c-ia); font-weight: 600; text-underline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .anim .rel-card .mk-ck, .anim .rel-ok { animation: rel-pop 8s ease-out infinite both; }
  .anim .rel-card li:nth-child(2) .mk-ck { animation-delay: .4s; }
  .anim .rel-card li:nth-child(3) .mk-ck { animation-delay: .8s; }
  .anim .rel-card li:nth-child(4) .mk-ck { animation-delay: 1.2s; }
  .anim .rel-card li:nth-child(5) .mk-ck { animation-delay: 1.6s; }
  .anim .rel-card li:nth-child(6) .mk-ck { animation-delay: 2s; }
  .anim .rel-ok { animation-delay: 2.6s; }
}
@keyframes rel-pop { 0%, 4% { opacity: 0; transform: scale(.4); } 9%, 92% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
@media (min-width: 641px) {
  .rel-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rel-illu { padding: var(--s-5) var(--s-5) var(--s-4); }
}
@media (min-width: 1101px) {
  .rel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); }
  .rel-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Bandeau de consentement (consent.js) : discret, en bas de l'écran, Refuser et Accepter de même poids */
.cc { position: fixed; z-index: 60; left: var(--s-2); right: var(--s-2); bottom: var(--s-2); display: flex; flex-direction: column; gap: var(--s-1h); max-width: 440px; padding: var(--s-3); border-radius: var(--r-lg); background: var(--c-bg); border: 1px solid var(--c-line); box-shadow: var(--shadow); }
.cc[hidden] { display: none; }
.cc-t { font-family: var(--f-title); font-weight: 600; font-size: var(--fs-18); color: var(--c-ink); }
.cc-txt { font-size: var(--fs-14); color: var(--c-ink-2); }
.cc-txt a { color: var(--c-ia); text-underline-offset: 2px; }
.cc-perso { display: flex; flex-direction: column; gap: var(--s-1h); align-items: flex-start; }
.cc-perso[hidden] { display: none; }
.cc-row { display: flex; gap: var(--s-1); align-items: flex-start; font-size: var(--fs-14); color: var(--c-ink-2); }
.cc-row input { margin-top: 3px; accent-color: var(--c-ia); }
.cc-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); }
.cc-link { padding: var(--s-1); border: 0; background: none; font: inherit; font-size: var(--fs-14); color: var(--c-ink-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (min-width: 641px) { .cc { left: auto; right: var(--s-3); bottom: var(--s-3); } }