/* ==========================================================================
   Thème « Facem Web » — QuietCMS
   Reprise de l'identité graphique Divi historique de facemweb.com
   Orange de marque #FF6002 · Gris #37383A · Montserrat / Roboto
   ========================================================================== */

:root {
    --orange: #ff6002;
    --orange-dark: #e05500;
    --orange-soft: rgba(255, 96, 2, .12);
    --dark: #37383a;
    --dark-2: #2e2f31;
    --dark-3: #4a4b4e;
    --ink: #37383a;
    --muted: #6b6c70;
    --line: #e4e4e6;
    --bg: #ffffff;
    --bg-soft: #f7f7f8;

    --sans: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    --head: 'Montserrat', var(--sans);

    --radius: 16px;
    --radius-sm: 10px;
    --shadow: 0 2px 14px rgba(55, 56, 58, .10);
    --shadow-lg: 0 12px 34px rgba(55, 56, 58, .16);

    --wrap: 1180px;
    --content-w: 820px;

    --header-bg: #ffffff;
    --header-height: 96px;
    --header-position: sticky;
    --footer-bg: #37383a;
}

/* ── Base ─────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.75;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--head);
    font-weight: 700;
    color: var(--dark);
    line-height: 1.25;
    margin: 2.2rem 0 .9rem;
}

h1 { font-size: clamp(1.85rem, 3.6vw, 2.6rem); margin-top: 0; }
h2 { font-size: clamp(1.45rem, 2.5vw, 1.9rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.4rem); }
h4 { font-size: 1.1rem; }

p { margin: 0 0 1.15rem; }

a { color: var(--orange); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--orange-dark); text-decoration: underline; }

img { max-width: 100%; height: auto; }

hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

blockquote {
    margin: 1.8rem 0;
    padding: 1rem 1.4rem;
    border-left: 6px solid var(--orange);
    background: var(--bg-soft);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-style: italic;
    color: var(--muted);
}

ul, ol { padding-left: 1.4rem; margin: 0 0 1.15rem; }
li { margin-bottom: .45rem; }

mark { background: var(--orange-soft); color: inherit; padding: .05em .25em; border-radius: 4px; }

::selection { background: var(--orange); color: #fff; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1.25rem; }

/* ── Boutons ──────────────────────────────────────────────────────────── */

.btn,
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    background: var(--orange);
    color: #fff !important;
    border: 2px solid var(--orange);
    border-radius: var(--radius);
    padding: .7rem 1.5rem;
    font-family: var(--head);
    font-weight: 700;
    font-size: .95rem;
    line-height: 1.3;
    text-decoration: none !important;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, transform .1s ease, box-shadow .2s ease;
}
.btn:hover, .btn-primary:hover {
    background: #fff;
    color: var(--orange) !important;
    box-shadow: 0 8px 20px rgba(255, 96, 2, .25);
}
.btn:active { transform: translateY(1px); }

.btn-ghost {
    background: transparent;
    color: var(--orange) !important;
    border-color: var(--orange);
}
.btn-ghost:hover { background: var(--orange); color: #fff !important; }

/* ── Barre supérieure ─────────────────────────────────────────────────── */

.top-bar {
    background: var(--dark);
    color: rgba(255, 255, 255, .85);
    font-size: .82rem;
}
.top-bar-inner {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: .45rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.top-bar a { color: #fff; }
.top-bar a:hover { color: var(--orange); text-decoration: none; }
.top-bar-right { display: flex; gap: 1.1rem; }

/* ── En-tête ──────────────────────────────────────────────────────────── */

.site-header {
    position: var(--header-position);
    top: 0;
    z-index: 1000;
    background: var(--header-bg);
    box-shadow: 0 2px 12px rgba(55, 56, 58, .08);
}
.header-inner {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 1.25rem;
    min-height: var(--header-height);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.site-logo { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.site-logo img { max-height: 80px; width: auto; display: block; }
.site-logo:hover { text-decoration: none; }
.logo-text {
    font-family: var(--head);
    font-weight: 700;
    font-size: 1.35rem;
    color: var(--dark);
    line-height: 1.15;
}
.logo-text span { display: block; font-size: .72rem; font-weight: 400; color: var(--muted); }

.site-nav {
    list-style: none;
    display: flex;
    align-items: center;
    gap: .2rem;
    margin: 0 0 0 auto;
    padding: 0;
}
.site-nav > li { position: relative; }
.site-nav > li > a {
    display: block;
    padding: .5rem .62rem;
    font-family: var(--head);
    font-weight: 600;
    font-size: 17px;
    white-space: nowrap;
    color: var(--dark);
    border-radius: var(--radius-sm);
    transition: color .15s ease, background .15s ease;
}
.site-nav > li > a:hover,
.site-nav > li.active > a { color: var(--orange); text-decoration: none; }

/* Dernier élément du menu : bouton d'appel à l'action orange (comme sur Divi) */
.site-nav > li.nav-cta > a {
    background: var(--orange);
    color: #fff;
    border: 2px solid var(--orange);
    border-radius: var(--radius);
    padding: .55rem 1.05rem;
    margin-left: .5rem;
}
.site-nav > li.nav-cta > a:hover { background: #fff; color: var(--orange); }

.sub-menu {
    list-style: none;
    margin: 0;
    padding: .4rem 0;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    background: #fff;
    border-top: 3px solid var(--orange);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: all .18s ease;
    z-index: 1100;
}
.site-nav li:hover > .sub-menu,
.sub-menu.js-open { opacity: 1; visibility: visible; transform: translateY(0); }
.sub-menu li { position: relative; margin: 0; }
.sub-menu a {
    display: block;
    padding: .55rem 1.1rem;
    color: var(--dark);
    font-size: .93rem;
}
.sub-menu a:hover { background: var(--orange-soft); color: var(--orange); text-decoration: none; }
.sub-menu .sub-menu { top: 0; left: 100%; border-radius: var(--radius-sm); }
.sub-menu li.flyout-left > .sub-menu { left: auto; right: 100%; }

.sub-toggle { display: none; background: none; border: 0; color: inherit; cursor: pointer; font-size: 1rem; }

.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0 10px;
    background: none;
    border: 0;
    cursor: pointer;
}
.nav-toggle span { display: block; height: 3px; border-radius: 3px; background: var(--orange); transition: .2s; }

.nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(55, 56, 58, .5);
    opacity: 0;
    visibility: hidden;
    transition: .25s;
    z-index: 990;
}
.nav-overlay.open { opacity: 1; visibility: visible; }

/* Recherche */
.nav-search { position: relative; display: flex; align-items: center; margin-left: .5rem; }
.nav-search-btn {
    background: none; border: 0; color: var(--orange); cursor: pointer;
    padding: .4rem; display: flex; border-radius: 8px;
}
.nav-search-btn svg { width: 22px; height: 22px; }
.nav-search-btn:hover { background: var(--orange-soft); }
.nav-search-form {
    position: absolute; top: calc(100% + 14px); right: 0; display: none;
    align-items: center; gap: .4rem; background: #fff; border: 1px solid var(--line);
    border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); padding: .5rem; z-index: 1300;
}
.nav-search.open .nav-search-form { display: flex; }
.nav-search-form input {
    border: 1px solid var(--line); border-radius: 8px; padding: .55rem .75rem;
    font: inherit; font-size: .95rem; width: 250px; max-width: 60vw;
}
.nav-search-form input:focus { outline: 0; border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-soft); }
.nav-search-form button {
    background: var(--orange); color: #fff; border: 0; border-radius: 8px;
    padding: .5rem .7rem; cursor: pointer; display: flex;
}
.nav-search-form button svg { width: 18px; height: 18px; }

/* ── Fil d'Ariane ─────────────────────────────────────────────────────── */

.breadcrumb-wrap { background: var(--bg-soft); border-bottom: 1px solid var(--line); }
.breadcrumb {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: .7rem 1.25rem;
    font-size: .84rem;
    color: var(--muted);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
}
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--orange); }
.breadcrumb .sep { color: var(--orange); font-weight: 700; }
.breadcrumb .current { color: var(--dark); font-weight: 600; }

/* ── Structure ────────────────────────────────────────────────────────── */

.site-main {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 2.5rem 1.25rem 3.5rem;
}
.site-main.with-sidebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 2.5rem;
    align-items: start;
}
.content-narrow { max-width: var(--content-w); margin: 0 auto; }

.page-hero {
    background: var(--dark);
    color: #fff;
    padding: 3rem 1.25rem 2.6rem;
    text-align: center;
}
.page-hero h1 { color: #fff; margin: 0; }
.page-hero .hero-divider {
    width: 90px; height: 4px; background: var(--orange);
    margin: 1.1rem auto 0; border-radius: 4px;
}
.page-hero p.hero-sub { margin: 1rem auto 0; max-width: 720px; color: rgba(255, 255, 255, .82); }

/* ── Corps de contenu ─────────────────────────────────────────────────── */

.article-body { font-size: 1.02rem; }
.article-body > *:first-child { margin-top: 0; }
.article-body img { border-radius: var(--radius); }
.article-body figure { margin: 1.8rem 0; }
.article-body figure img { display: block; margin: 0 auto; }
.article-body figcaption,
.wp-caption-text {
    font-size: .85rem;
    color: var(--muted);
    text-align: center;
    margin-top: .55rem;
    font-style: italic;
}
.wp-caption { max-width: 100%; }
.wp-caption.alignleft  { float: left;  margin: .4rem 1.5rem 1rem 0; }
.wp-caption.alignright { float: right; margin: .4rem 0 1rem 1.5rem; }
.wp-caption.aligncenter { margin-left: auto; margin-right: auto; }

.alignleft  { float: left;  margin: .4rem 1.5rem 1rem 0; }
.alignright { float: right; margin: .4rem 0 1rem 1.5rem; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignnone { display: block; }

.video-embed { position: relative; padding-top: 56.25%; margin: 1.8rem 0; border-radius: var(--radius); overflow: hidden; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Tableaux — reprise exacte du style historique (fond sombre, accent orange) */
.article-body table,
.db-text table {
    width: 100%;
    border-collapse: collapse;
    background: var(--dark);
    color: #fff;
    font-size: .95rem;
    border: 1px solid var(--dark-3);
    border-radius: var(--radius-sm);
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .25);
    margin: 1.8rem 0;
}
.article-body thead th, .db-text thead th {
    background: var(--dark-2);
    color: #fff;
    text-align: left;
    padding: .9rem 1rem;
    font-family: var(--head);
    font-weight: 700;
    letter-spacing: .02em;
    border-bottom: 1px solid var(--dark-3);
}
.article-body tbody td, .db-text tbody td {
    padding: .8rem 1rem;
    border-bottom: 1px solid var(--dark-3);
    vertical-align: top;
    color: #fff;
}
.article-body tbody tr:nth-child(even) td { background: #323335; }
.article-body tbody tr:hover td { background: var(--orange-soft); }
.article-body table a, .db-text table a { color: var(--orange); text-decoration: underline; text-underline-offset: 2px; }
.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap > table { min-width: 640px; }

/* Blocs de code — fond sombre, filet orange, bouton copier */
.code-container {
    position: relative;
    margin: 1.6rem 0;
    border: 1px solid var(--dark-3);
    border-radius: 12px;
    background: var(--dark);
    box-shadow: 0 2px 12px rgba(0, 0, 0, .25);
    overflow: hidden;
}
.code-container .code-header {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    padding: .6rem .75rem; border-bottom: 1px solid var(--dark-3);
    background: var(--dark-2); color: #fff; font-size: .85rem; line-height: 1;
}
.article-body pre,
.code-container pre {
    margin: 0;
    background: var(--dark);
    color: #fff;
    border: 0;
    border-left: 6px solid var(--orange);
    border-radius: 0 0 12px 12px;
    padding: 1rem 1.2rem;
    overflow: auto;
    line-height: 1.55;
}
.article-body pre { border-radius: 12px; margin: 1.6rem 0; }
.article-body pre > code, .code-container pre > code {
    background: transparent; border: 0; padding: 0; color: #fff;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-size: .95rem;
}
.article-body :not(pre) > code {
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: .1em .38em;
    font-size: .9em;
    color: var(--dark);
}
.copy-button {
    position: absolute; top: .6rem; right: .6rem;
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .45rem .7rem;
    border: 1px solid var(--dark-3); border-radius: 8px;
    background: var(--dark-2); color: #fff;
    font-family: var(--sans); font-size: .85rem; line-height: 1; cursor: pointer;
    transition: transform .06s ease, background .2s ease, border-color .2s ease;
}
.copy-button:hover { border-color: var(--orange); }
.copy-button:active { transform: translateY(1px); }
.copy-button.is-copied { background: var(--orange); border-color: var(--orange); }

/* ── Sommaire (table des matières) ────────────────────────────────────── */

.toc-box {
    margin: 1.8rem auto 2.2rem;
    background: var(--dark);
    border: 1px solid var(--orange);
    border-radius: var(--radius);
    padding: 1.1rem 1.4rem;
    color: #fff;
}
.toc-title {
    font-family: var(--head);
    font-weight: 700;
    color: #fff;
    margin-bottom: .6rem;
}
.toc-list { list-style: none; padding-left: 0; margin: 0; }
.toc-list ul { list-style: none; padding-left: 1.1rem; margin: .3rem 0; }
.toc-list li { margin: .25rem 0; }
.toc-list a { color: #fff; font-size: .93rem; }
.toc-list a:hover { color: var(--orange); }
.toc-h3 > a { font-size: .88rem; opacity: .9; }
.toc-h4 > a { font-size: .84rem; opacity: .8; }

/* ── Accordéons ───────────────────────────────────────────────────────── */

.accordion { margin: 1.8rem 0; }
.accordion-item {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    margin-bottom: .6rem;
    background: #fff;
    overflow: hidden;
}
.accordion-item > summary {
    cursor: pointer;
    padding: .85rem 1.1rem;
    font-family: var(--head);
    font-weight: 600;
    color: var(--dark);
    list-style: none;
    position: relative;
    padding-right: 2.4rem;
}
.accordion-item > summary::-webkit-details-marker { display: none; }
.accordion-item > summary::after {
    content: '+';
    position: absolute; right: 1.1rem; top: 50%; transform: translateY(-50%);
    color: var(--orange); font-size: 1.3rem; font-weight: 700;
}
.accordion-item[open] > summary::after { content: '−'; }
.accordion-item[open] > summary { background: var(--orange-soft); }
.accordion-body { padding: .9rem 1.1rem 1.1rem; border-top: 1px solid var(--line); }

/* ── Grilles (Shortcodes Ultimate / Divi) ─────────────────────────────── */

.su-row, .db-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.75rem;
    margin: 1.75rem 0;
    align-items: stretch;
}
.su-col, .db-col { flex: 1 1 260px; min-width: 0; }
.col-1   { flex-basis: 100%; }
.col-2   { flex-basis: calc(50% - .9rem); }
.col-3   { flex-basis: calc(33.333% - 1.17rem); }
.col-2-3 { flex-basis: calc(66.666% - .6rem); }
.col-4   { flex-basis: calc(25% - 1.32rem); }
.col-3-4 { flex-basis: calc(75% - .45rem); }
.col-5   { flex-basis: calc(20% - 1.4rem); }
.col-2-5 { flex-basis: calc(40% - 1.05rem); }
.col-3-5 { flex-basis: calc(60% - .7rem); }
.col-4-5 { flex-basis: calc(80% - .35rem); }
.col-6   { flex-basis: calc(16.666% - 1.46rem); }
.col-5-6 { flex-basis: calc(83.333% - .3rem); }

.su-row > .su-col > *:first-child { margin-top: 0; }

/* ── Sections « Divi » reconstruites ──────────────────────────────────── */

.db-section { padding: 3.2rem 1.25rem; }
.db-section + .db-section { padding-top: 2.4rem; }
.db-inner { max-width: var(--wrap); margin: 0 auto; }
.db-section-tinted { background: var(--db-bg, var(--bg-soft)); }
.db-section-dark { color: #fff; }
.db-section-dark h1, .db-section-dark h2, .db-section-dark h3,
.db-section-dark h4, .db-section-dark p, .db-section-dark li { color: #fff; }
.db-section-dark a { color: var(--orange); }

.db-text > *:first-child { margin-top: 0; }
.db-align-center { text-align: center; }
.db-align-right  { text-align: right; }
.db-btn-wrap { margin: 1.4rem 0; }

.db-image { margin: 1.2rem 0; }
.db-image img { border-radius: var(--radius); display: block; }
.db-image.db-align-center { text-align: center; }
.db-image.db-align-center img { margin: 0 auto; }

.db-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 2px solid var(--orange);
    border-radius: var(--radius);
    overflow: hidden;
    transition: box-shadow .2s ease, transform .2s ease;
}
.db-card:hover { box-shadow: 0 14px 32px rgba(255, 96, 2, .18); transform: translateY(-3px); }
.db-card-media img { display: block; width: 100%; height: 220px; object-fit: cover; }
.db-card-body { padding: 1.3rem 1.4rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.db-card-title { margin: 0 0 .7rem; font-size: 1.15rem; text-align: center; }
.db-card-text { flex: 1; }
.db-card-text > *:first-child { margin-top: 0; }
.db-card .btn { align-self: center; margin-top: 1.1rem; }

.db-blurb { text-align: center; }
.db-blurb-media img { max-width: 120px; margin: 0 auto 1rem; display: block; }
.db-blurb-title { margin-top: 0; }

.db-hero {
    position: relative;
    background: var(--dark) center / cover no-repeat;
    background-image: var(--db-hero-img);
    color: #fff;
    padding: 5rem 1.25rem;
    text-align: center;
}
.db-hero.db-hero-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .4);
}
.db-hero .db-inner { position: relative; z-index: 1; }
.db-hero-title { color: #fff; }
.db-hero-sub { color: rgba(255, 255, 255, .9); max-width: 760px; margin: 1rem auto 1.6rem; }

.db-cta {
    background: var(--dark);
    color: #fff;
    border-radius: var(--radius);
    padding: 2.2rem;
    text-align: center;
    margin: 2.2rem 0;
}
.db-cta-title { color: #fff; margin-top: 0; }

.db-pricing { display: flex; flex-wrap: wrap; gap: 1.5rem; margin: 2rem 0; }
.db-price-card {
    flex: 1 1 260px;
    border: 2px solid var(--orange);
    border-radius: var(--radius);
    padding: 1.6rem;
    text-align: center;
    background: #fff;
}
.db-price-title { margin-top: 0; }
.db-price-amount { font-family: var(--head); font-size: 2.2rem; font-weight: 700; color: var(--orange); margin: .6rem 0; }
.db-price-cur { font-size: 1.1rem; vertical-align: super; }
.db-price-per { font-size: .95rem; color: var(--muted); font-weight: 400; }
.db-divider { margin: 2rem 0; }

.note-box {
    background: var(--orange-soft);
    border-left: 6px solid var(--orange);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: 1rem 1.3rem;
    margin: 1.6rem 0;
}
.note-box > *:last-child { margin-bottom: 0; }

/* ── Article ──────────────────────────────────────────────────────────── */

.reading-progress {
    position: fixed; top: 0; left: 0; height: 3px; width: 0;
    background: linear-gradient(90deg, var(--orange), #ff9147);
    z-index: 2000; transition: width .1s linear;
}

.article-head { margin-bottom: 1.6rem; }
.cat-badge {
    display: inline-block;
    background: var(--orange);
    color: #fff;
    font-family: var(--head);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .3rem .8rem;
    border-radius: 30px;
    margin-bottom: .9rem;
}
.cat-badge:hover { background: var(--dark); color: #fff; text-decoration: none; }

.article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    font-size: .85rem;
    color: var(--muted);
    padding: .9rem 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    margin-bottom: 1.8rem;
}
.meta-item { display: inline-flex; align-items: center; gap: .38rem; }
.meta-item svg { width: 15px; height: 15px; stroke: var(--orange); }

.featured-media {
    margin: 0 0 2.2rem;
    border: 0;
    border-radius: var(--radius);
    overflow: hidden;
    line-height: 0;
    box-shadow: var(--shadow-lg);
}
.featured-media img { width: 100%; max-height: 470px; object-fit: cover; display: block; }

.author-box {
    display: flex;
    gap: 1.1rem;
    align-items: flex-start;
    border: 0;
    border-left: 4px solid var(--orange);
    border-radius: 0;
    background: var(--bg-soft);
    padding: 1.3rem;
    margin-top: 2.2rem;
    background: var(--bg-soft);
}
.author-avatar {
    width: 72px; height: 72px; flex-shrink: 0;
    border-radius: 50%; object-fit: cover;
    border: 2px solid var(--orange);
    background: var(--dark); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--head); font-weight: 700; font-size: 1.5rem;
}
.author-name { font-family: var(--head); font-weight: 700; color: var(--dark); margin-bottom: .25rem; }
.author-bio { font-size: .88rem; color: var(--muted); margin: 0; }

.cta-box {
    background: var(--dark);
    color: #fff;
    border-radius: var(--radius);
    padding: 2rem;
    text-align: center;
    margin-top: 2.5rem;
}
.cta-box h2 { color: #fff; margin-top: 0; font-size: 1.5rem; }
.cta-box p { color: rgba(255, 255, 255, .85); max-width: 640px; margin: 0 auto 1.4rem; }

/* ── Cartes d'articles (listes) ───────────────────────────────────────── */

.post-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}
.post-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform .2s ease, box-shadow .2s ease;
}
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.post-card .post-media {
    display: block;
    border: 2px solid var(--orange);
    border-radius: var(--radius);
    overflow: hidden;
    line-height: 0;
    position: relative;
}
.post-card .post-media img { width: 100%; height: 200px; object-fit: cover; display: block; }
.post-card-body { padding: 1.1rem .2rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.post-card-cat { font-size: .74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--orange); margin-bottom: .4rem; }
.post-card-title { font-size: 1.1rem; margin: 0 0 .6rem; line-height: 1.35; }
.post-card-title a { color: var(--dark); }
.post-card-title a:hover { color: var(--orange); text-decoration: none; }
.post-card-excerpt { font-size: .92rem; color: var(--muted); flex: 1; margin: 0 0 .9rem; }
.post-card-meta { font-size: .8rem; color: var(--muted); display: flex; gap: .8rem; flex-wrap: wrap; }
.post-card-more { font-family: var(--head); font-weight: 700; font-size: .88rem; }

.post-list-item {
    display: flex;
    gap: 1.4rem;
    padding: 1.4rem 0;
    border-bottom: 1px solid var(--line);
}
.post-list-item .post-media { flex: 0 0 200px; }
.post-list-item .post-media img { width: 100%; height: 130px; object-fit: cover; border-radius: var(--radius-sm); }

/* ── Pagination ───────────────────────────────────────────────────────── */

.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .4rem;
    margin: 2.8rem 0 1rem;
}
.pagination a, .pagination span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 42px; height: 42px; padding: 0 .7rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-family: var(--head); font-weight: 600; font-size: .92rem;
    color: var(--dark);
}
.pagination a:hover { border-color: var(--orange); color: var(--orange); text-decoration: none; }
.pagination .current { background: var(--orange); border-color: var(--orange); color: #fff; }
.pagination .dots { border: 0; }

/* ── Barre latérale ───────────────────────────────────────────────────── */

.sidebar { position: sticky; top: calc(var(--header-height) + 1.2rem); }
.sidebar-widget {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin-bottom: 1.5rem;
    overflow: hidden;
}
.widget-title {
    background: var(--dark);
    color: #fff;
    font-family: var(--head);
    font-weight: 700;
    font-size: .95rem;
    padding: .75rem 1.1rem;
    border-bottom: 3px solid var(--orange);
}
.widget-body { padding: 1rem 1.1rem; }
.widget-list { list-style: none; padding: 0; margin: 0; }
.widget-list li { border-bottom: 1px solid var(--line); }
.widget-list li:last-child { border-bottom: 0; }
.widget-list a {
    display: flex; justify-content: space-between; gap: .6rem;
    padding: .5rem 0; color: var(--dark); font-size: .9rem;
}
.widget-list a:hover { color: var(--orange); text-decoration: none; }
.widget-list .count {
    background: var(--orange-soft); color: var(--orange);
    border-radius: 20px; padding: 0 .55rem; font-size: .76rem; font-weight: 700;
}

.after-content-widgets { max-width: var(--wrap); margin: 0 auto 2.5rem; padding: 0 1.25rem; }

/* ── Pied de page ─────────────────────────────────────────────────────── */

.site-footer { background: var(--footer-bg); color: #fff; margin-top: 3rem; }
.footer-top {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 2.6rem 1.25rem 1.8rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    text-align: center;
}
.footer-col h4 {
    color: #fff;
    font-size: .95rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin: 0 0 .9rem;
}
.footer-col .brand { color: var(--orange); font-family: var(--head); font-weight: 700; font-size: 1.05rem; }
.footer-col p { color: rgba(255, 255, 255, .82); margin: 0 0 .5rem; font-size: .93rem; }
.footer-col a { color: #fff; }
.footer-col a:hover { color: var(--orange); }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: .4rem; }
.footer-logo img { max-height: 64px; width: auto; margin: 0 auto .8rem; display: block; }
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding: 1.1rem 1.25rem;
    text-align: center;
    font-size: .85rem;
    color: rgba(255, 255, 255, .75);
}
.footer-bottom a { color: #fff; text-decoration: underline; }
.footer-bottom a:hover { color: var(--orange); }

/* Bandeau d'appel à l'action collant (mobile) */
.cta-sticky {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, .55);
    padding: .55rem 1rem;
    text-align: center;
    z-index: 900;
    display: none;
}
.cta-sticky .btn { padding: .6rem 2.2rem; }

.back-to-top {
    position: fixed; right: 1rem; bottom: 1rem;
    width: 46px; height: 46px;
    border: 0; border-radius: 50%;
    background: var(--orange); color: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; opacity: 0; visibility: hidden;
    transition: .25s; z-index: 950;
    box-shadow: var(--shadow-lg);
}
.back-to-top.show { opacity: 1; visibility: visible; }
.back-to-top svg { width: 22px; height: 22px; }

/* ── Formulaires QuietCMS ─────────────────────────────────────────────── */

.qcms-form { margin: 2rem 0; }
.qcms-form-inner { display: flex; flex-wrap: wrap; gap: 1rem; }
.qcms-field-group { display: flex; flex-direction: column; gap: .35rem; }
.qcms-col-full  { flex: 1 1 100%; }
.qcms-col-half  { flex: 1 1 calc(50% - .5rem); }
.qcms-col-third { flex: 1 1 calc(33.333% - .67rem); }
.qcms-label { font-family: var(--head); font-weight: 600; font-size: .9rem; color: var(--dark); }
.qcms-req { color: var(--orange); }
.qcms-field-help { font-size: .82rem; color: var(--muted); margin: 0; }
.qcms-input {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: .72rem .9rem;
    font: inherit; font-size: .95rem;
    background: #fff; color: var(--ink);
    transition: border-color .15s, box-shadow .15s;
}
.qcms-input:focus { outline: 0; border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-soft); }
textarea.qcms-input { min-height: 130px; resize: vertical; }
.qcms-checkbox-label, .qcms-radio-label { display: flex; align-items: flex-start; gap: .5rem; font-size: .92rem; }
.qcms-alert { border-radius: var(--radius-sm); padding: .9rem 1.1rem; margin-bottom: 1rem; }
.qcms-alert-success { background: #e8f7ec; border: 1px solid #b6e3c1; color: #1d6b32; }
.qcms-alert-error   { background: #fdecea; border: 1px solid #f5c2bd; color: #a02015; }
.qcms-section-title { margin: 1.2rem 0 .3rem; }

/* ── Commentaires ─────────────────────────────────────────────────────── */

#comments { margin-top: 3rem; }
#comments h2, #comments h3, #comments h4 { font-family: var(--head); color: var(--dark); }
#comments input[type=text], #comments input[type=email],
#comments input[type=password], #comments textarea {
    width: 100%; box-sizing: border-box;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius-sm) !important;
    padding: .72rem .9rem !important;
    font-family: inherit !important; font-size: .95rem !important;
    background: #fff !important; color: var(--ink) !important;
}
#comments input:focus, #comments textarea:focus {
    outline: 0 !important; border-color: var(--orange) !important;
    box-shadow: 0 0 0 3px var(--orange-soft) !important;
}
#comments label { font-family: var(--head); font-weight: 600 !important; color: var(--dark) !important; }
#comments .btn-primary {
    background: var(--orange) !important; color: #fff !important;
    border: 2px solid var(--orange) !important; border-radius: var(--radius) !important;
    padding: .7rem 1.6rem !important; font-family: var(--head) !important; font-weight: 700 !important;
    cursor: pointer;
}
#comments .btn-primary:hover { background: #fff !important; color: var(--orange) !important; }
#comments > div { border-radius: var(--radius) !important; border-color: var(--line) !important; }

/* ── Page 404 / recherche ─────────────────────────────────────────────── */

.error-page { text-align: center; padding: 4rem 1.25rem; }
.error-code { font-family: var(--head); font-size: 6rem; font-weight: 700; color: var(--orange); line-height: 1; }
.search-results { list-style: none; padding: 0; }
.search-results li { padding: 1rem 0; border-bottom: 1px solid var(--line); }

/* ── Responsive ───────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    .site-main.with-sidebar { grid-template-columns: 1fr; }
    .sidebar { position: static; }
}

/* Palier intermédiaire : menu compact avant le passage au tiroir mobile */
@media (max-width: 1300px) and (min-width: 901px) {
    .site-nav > li > a { font-size: 15.5px; padding: .5rem .5rem; }
    .site-logo img { max-height: 62px; }
    .header-inner { gap: .5rem; }
}

@media (max-width: 900px) {
    .nav-toggle { display: flex; }
    .site-logo img { max-height: 56px; }
    .header-inner { min-height: var(--mobile-header-height, 68px); }

    .site-nav {
        position: fixed;
        top: 0; left: 0; bottom: 0;
        width: min(320px, 86vw);
        background: #fff;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 4.5rem 0 2rem;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform .28s ease;
        box-shadow: var(--shadow-lg);
        z-index: 1200;
        margin: 0;
    }
    .site-nav.open { transform: translateX(0); }
    .site-nav > li { border-bottom: 1px solid var(--line); }
    .site-nav > li > a { padding: .9rem 1.3rem; border-radius: 0; }
    .site-nav > li.nav-cta > a { margin: .8rem 1.3rem; text-align: center; }

    .sub-toggle {
        display: block; position: absolute; right: .6rem; top: .5rem;
        width: 40px; height: 40px; color: var(--orange);
    }
    .sub-menu {
        position: static; opacity: 1; visibility: visible; transform: none;
        box-shadow: none; border-top: 0; border-left: 3px solid var(--orange);
        border-radius: 0; display: none; background: var(--bg-soft);
    }
    .sub-menu.open { display: block; }
    .site-nav li:hover > .sub-menu { display: none; }
    .site-nav li:hover > .sub-menu.open { display: block; }

    .footer-top { grid-template-columns: 1fr; gap: 1.6rem; }
    .cta-sticky { display: block; }
    body { padding-bottom: 0; }
    .post-list-item { flex-direction: column; }
    .post-list-item .post-media { flex: none; }
    .col-2, .col-3, .col-4, .col-5, .col-6,
    .col-2-3, .col-3-4, .col-2-5, .col-3-5, .col-4-5, .col-5-6 { flex-basis: 100%; }
    .alignleft, .alignright, .wp-caption.alignleft, .wp-caption.alignright {
        float: none; margin: 1.2rem auto;
    }
}

@media (max-width: 560px) {
    body { font-size: 15.5px; }
    .db-section { padding: 2.2rem 1rem; }
    .site-main { padding: 1.8rem 1rem 2.5rem; }
    .post-grid { grid-template-columns: 1fr; gap: 1.6rem; }
    .cta-box, .db-cta { padding: 1.5rem; }
}

@media print {
    .site-header, .top-bar, .breadcrumb-wrap, .site-footer, .sidebar,
    #comments, .cta-sticky, .back-to-top, .toc-box, .nav-overlay { display: none !important; }
    .site-main.with-sidebar { display: block !important; }
    body { color: #000; background: #fff; }
    a { color: #000 !important; text-decoration: none !important; }
}

/* ── Rubrique « sommaire » : liste des sous-rubriques ─────────────────────── */

.cat-hub { display: flex; flex-direction: column; gap: 2.4rem; margin: 2.2rem 0; }
.cat-hub-item {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 2rem;
    align-items: center;
}
.cat-hub-item:nth-child(even) .cat-hub-media { order: 2; }
.cat-hub-media {
    display: block;
    border: 2px solid var(--orange);
    border-radius: var(--radius);
    overflow: hidden;
    line-height: 0;
}
.cat-hub-media img { width: 100%; height: 220px; object-fit: cover; display: block; }
.cat-hub-body h2 { margin-top: 0; }
.cat-hub-body h2 a { color: var(--dark); }
.cat-hub-body h2 a:hover { color: var(--orange); text-decoration: none; }
.cat-hub-subs { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .86rem; }
.cat-hub-subs a {
    background: var(--orange-soft);
    color: var(--orange);
    border-radius: 20px;
    padding: .2rem .75rem;
}
.cat-hub-subs a:hover { background: var(--orange); color: #fff; text-decoration: none; }
.category-intro { margin-bottom: 2rem; }

@media (max-width: 800px) {
    .cat-hub-item { grid-template-columns: 1fr; gap: 1.1rem; }
    .cat-hub-item:nth-child(even) .cat-hub-media { order: 0; }
}

/* ── Encart de réassurance sous les articles ─────────────────────────────── */

.reassurance-list {
    list-style: none;
    padding: 0;
    margin: 0 auto 1.6rem;
    max-width: 620px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .35rem 1.5rem;
    text-align: left;
}
.reassurance-list li {
    position: relative;
    padding-left: 1.7rem;
    color: rgba(255, 255, 255, .92);
    font-size: .95rem;
    margin: 0;
}
.reassurance-list li::before {
    content: '☑';
    position: absolute;
    left: 0;
    color: var(--orange);
    font-size: 1rem;
}

@media (max-width: 560px) {
    .reassurance-list { grid-template-columns: 1fr; }
}

/* La photo d'auteur masque les initiales tant qu'elle se charge correctement. */
.author-avatar-fallback { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   Mise en page « landing »
   Le contenu n'est plus enfermé dans une carte : chaque <h2> ouvre une section
   pleine largeur, les fonds alternent, et le texte revient à une largeur de
   lecture confortable pendant que médias et cartes gardent de l'ampleur.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
    /* Largeur de lecture : élargie pour que le texte ne flotte plus au milieu
       de deux grandes marges vides. La taille de police monte en même temps,
       de sorte que le nombre de caractères par ligne reste confortable. */
    --read-w: 960px;
    --toc-w: 246px;
}

.lp, .lp-flow { --lp-pad: 4.2rem; }
.lp-section {
    /* La valeur de repli est indispensable : sans elle, une variable absente
       invalide toute la déclaration et le rembourrage latéral disparaît. */
    padding: var(--lp-pad, 4.2rem) 1.25rem;
    position: relative;
}
.lp-section.is-tint { background: var(--bg-soft); }
.lp-section + .lp-section { padding-top: var(--lp-pad, 4.2rem); }
.lp-inner { max-width: var(--wrap); margin: 0 auto; }

.lp-read { max-width: var(--read-w); margin-inline: auto; font-size: 1.04rem; }
.lp-read > *:first-child { margin-top: 0; }
.lp-read > *:last-child { margin-bottom: 0; }
.lp-read p { margin: 0 0 .95rem; line-height: 1.62; }
.lp-read ul, .lp-read ol { line-height: 1.6; }

.lp-h2 {
    max-width: var(--read-w);
    margin: 0 auto 1.7rem;
    font-size: clamp(1.6rem, 1.2rem + 1.7vw, 2.35rem);
    line-height: 1.22;
    letter-spacing: -.015em;
}
.lp-h2::after {
    content: "";
    display: block;
    width: 68px; height: 4px;
    margin-top: .85rem;
    background: var(--orange);
    border-radius: 4px;
}
.lp-read h3 {
    font-size: 1.22rem;
    margin: 2.1rem 0 .7rem;
    padding-left: .85rem;
    border-left: 4px solid var(--orange);
    line-height: 1.35;
}
.lp-read h4 { font-size: 1.05rem; margin: 1.6rem 0 .55rem; }

/* Médias : plus de cadre orange, une image qui respire */
.lp-media { margin: 2.6rem auto; max-width: var(--wrap); }
.lp-media figure { margin: 0; }
.lp-media img {
    display: block;
    width: 100%; height: auto;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
}
.lp-media figcaption { margin-top: .7rem; }
.lp-media table { margin: 0 auto; }

/* Cartes : bordure discrète plutôt qu'un liseré orange épais */
.lp-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.6rem;
    margin: 2.2rem 0 .5rem;
}
.lp-cards .db-card,
.article-body .db-card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow);
    overflow: hidden;
    margin: 0;
    transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease;
}
.lp-cards .db-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.lp-cards .db-card-media img { width: 100%; height: 190px; object-fit: cover; display: block; border-radius: 0; }
.lp-cards .db-card-body { padding: 1.15rem 1.3rem .2rem; }
.lp-cards .db-card-text { padding: 0 1.3rem 1.3rem; }
.lp-cards .db-card-title { margin: 0; font-size: 1.12rem; text-align: left; }
.lp-section.is-tint .lp-cards .db-card { background: #fff; }

/* Bandeau d'ouverture : l'image mise en avant, sans cadre */
.lp-hero-media {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 2.2rem 1.25rem 0;
}
.lp-hero-media img {
    display: block; width: 100%;
    max-height: 440px; object-fit: cover;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
}

/* ── Questions fréquentes ────────────────────────────────────────────── */
.faq-list { max-width: var(--read-w); margin: 0 auto; display: flex; flex-direction: column; gap: .7rem; }
.faq-item {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: #fff;
    overflow: hidden;
    transition: box-shadow .25s ease, border-color .25s ease;
}
.faq-item[open] { box-shadow: var(--shadow); border-color: rgba(255, 96, 2, .35); }
.faq-q {
    display: flex; align-items: flex-start; gap: .8rem;
    padding: 1.05rem 1.2rem;
    cursor: pointer;
    list-style: none;
    font-family: var(--head);
    font-weight: 600;
    line-height: 1.45;
    color: var(--dark);
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after {
    content: "";
    flex: 0 0 auto; width: 18px; height: 18px; margin-left: auto; margin-top: .18em;
    background: var(--orange);
    --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    -webkit-mask: var(--ico) center / contain no-repeat;
            mask: var(--ico) center / contain no-repeat;
    transition: transform .25s ease;
}
.faq-item[open] .faq-q::after { transform: rotate(180deg); }
.faq-q-text { flex: 1; }
.faq-a { padding: 0 1.2rem 1.15rem; color: var(--ink); }
.faq-a > *:first-child { margin-top: 0; }
.faq-a p { margin: 0 0 .75rem; line-height: 1.62; }
.faq-a > *:last-child { margin-bottom: 0; }


/* ── Apparitions au défilement ───────────────────────────────────────── */
.reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
    will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }
.lp-cards.is-in .db-card { animation: fw-pop .55s cubic-bezier(.2,.7,.3,1) backwards; }
.lp-cards.is-in .db-card:nth-child(2) { animation-delay: .09s; }
.lp-cards.is-in .db-card:nth-child(3) { animation-delay: .18s; }
.lp-cards.is-in .db-card:nth-child(4) { animation-delay: .27s; }
@keyframes fw-pop { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

/* ── Parallaxe légère ────────────────────────────────────────────────── */
@media (min-width: 900px) {
    .lp-media.parallax img { will-change: transform; }
}

/* Confort : les ancres ne passent pas sous l'en-tête fixe */
.lp [id], .article-body [id] { scroll-margin-top: calc(var(--header-height) + 1.2rem); }

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .lp-cards.is-in .db-card { animation: none; }
    .lp-media.parallax img { transform: none !important; }
}

@media (max-width: 900px) {
    .lp, .lp-flow { --lp-pad: 2.6rem; }
    .lp-media { margin: 1.8rem auto; }
    .lp-cards { gap: 1.1rem; }
}

/* Bande « image / texte » pour les cartes illustrées et détaillées.
   Le texte de ces blocs est long : une grille à deux colonnes laisserait une
   grande zone vide sous l'image. On la fait donc flotter, le texte l'habille,
   et le sens alterne d'un bloc à l'autre. */
.lp-feature {
    max-width: var(--wrap);
    margin: 2.8rem auto;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    display: block;
}
.lp-feature::after { content: ""; display: block; clear: both; }
.lp-feature .db-card-media {
    float: left;
    width: 41%;
    margin: .4rem 2rem 1.1rem 0;
    shape-margin: 1rem;
}
.lp-feature.is-rev .db-card-media {
    float: right;
    margin: .4rem 0 1.1rem 2rem;
}
.lp-feature .db-card-media img {
    width: 100%; height: auto;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    display: block;
}
.lp-feature .db-card-body { padding: 0; display: block; }
.lp-feature .db-card-text { padding: 0; }
.lp-feature .db-card-title {
    text-align: left;
    margin: 0 0 .9rem;
    font-size: clamp(1.2rem, 1rem + .7vw, 1.55rem);
    line-height: 1.3;
}
.lp-feature .db-card-title::after {
    content: ""; display: block; width: 52px; height: 3px;
    margin-top: .7rem; background: var(--orange); border-radius: 3px;
}
.lp-feature .db-card-text p { line-height: 1.62; }
.lp-feature .db-card-text > *:first-child { margin-top: 0; }

@media (max-width: 900px) {
    .lp-feature { margin: 1.9rem auto; }
    .lp-feature .db-card-media,
    .lp-feature.is-rev .db-card-media { float: none; width: 100%; margin: 0 0 1.1rem; }
}

/* ── Articles : moins de cadres, plus de respiration ─────────────────── */
/* Ces règles sont volontairement portées par « .article-flow » et non par
   « .article-body » : les pages en mode landing partagent .article-body, et
   une règle plus spécifique y écraserait la mise en page des sections. */
.content-narrow { max-width: 900px; }
.article-flow { font-size: 1.04rem; }
.article-flow p { line-height: 1.64; margin: 0 0 .95rem; }
.article-flow h2 {
    font-size: clamp(1.42rem, 1.15rem + 1vw, 1.85rem);
    margin: 2.8rem 0 1rem;
    line-height: 1.26;
}
.article-flow h2::after {
    content: ""; display: block; width: 58px; height: 4px;
    margin-top: .75rem; background: var(--orange); border-radius: 4px;
}
.article-flow h3 {
    font-size: 1.2rem;
    margin: 2rem 0 .65rem;
    padding-left: .8rem;
    border-left: 4px solid var(--orange);
    line-height: 1.35;
}
.article-flow figure img,
.article-flow > p > img {
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
/* Les cartes glissées dans un article ne portent plus de liseré orange */
.article-body .db-card {
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    border-radius: var(--radius);
}
.article-body .db-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }



/* ── En-tête mobile : logo à gauche, recherche au centre, menu à droite ──
   Le tiroir s'ouvre depuis la droite, du même côté que le bouton, et porte
   une croix de fermeture explicite en plus de l'overlay et de la touche Échap. */
.header-inner { position: relative; }
.nav-close-item { display: none; }

@media (max-width: 900px) {
    .site-logo   { order: 1; }
    /* Pas de « transform » ici : un ancêtre transformé deviendrait le bloc
       conteneur des éléments en position fixed, et le formulaire de recherche
       se retrouverait collé à l'icône au lieu de s'étendre sous l'en-tête. */
    .nav-search {
        order: 2;
        position: absolute;
        left: 0; right: 0;
        justify-content: center;
        margin: 0;
        pointer-events: none;
    }
    .nav-search > * { pointer-events: auto; }
    .nav-toggle  { order: 3; margin-left: auto; }

    /* Le formulaire prend toute la largeur, juste sous l'en-tête. Il reste en
       « absolute » dans .nav-search (qui couvre toute la largeur de l'en-tête)
       plutôt qu'en « fixed », pour se placer sous la barre même quand le
       bandeau de contact la décale vers le bas. */
    .nav-search-form {
        left: .75rem; right: .75rem;
        top: calc(100% + .7rem);
    }
    .nav-search-form input { width: 100%; max-width: none; flex: 1; }

    /* Tiroir depuis la droite */
    .site-nav {
        left: auto;
        right: 0;
        transform: translateX(100%);
        padding-top: 3.6rem;
    }
    .site-nav.open { transform: translateX(0); }

    /* Sélecteur porté par « .site-nav > li » : sinon la règle générique
       « .site-nav > li { position: relative } » l'emporte en spécificité. */
    .site-nav > li.nav-close-item {
        display: block;
        position: absolute;
        /* Calée exactement là où se trouvait le bouton menu : la croix se lit
           comme le hamburger qui s'est transformé. */
        top: .75rem; right: 1.25rem;
        left: auto;
        width: auto;
        border-bottom: 0;
        z-index: 2;
    }
    .nav-close {
        display: flex; align-items: center; justify-content: center;
        width: 44px; height: 44px;
        background: var(--orange-soft);
        border: 0; border-radius: 50%;
        color: var(--orange);
        cursor: pointer;
    }
    .nav-close svg { width: 22px; height: 22px; }
    .nav-close:hover, .nav-close:focus-visible { background: var(--orange); color: #fff; outline: 0; }

    /* Bouton menu : les trois barres deviennent une croix à l'ouverture */
    .nav-toggle span { transition: transform .25s ease, opacity .2s ease; }
    .nav-toggle.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .nav-toggle.is-open span:nth-child(2) { opacity: 0; }
    .nav-toggle.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

    /* La page ne défile plus derrière le tiroir */
    body.nav-locked { overflow: hidden; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PAGE D'ACCUEIL
   Registre volontairement « technologique » : fond sombre, grille, tracés
   vectoriels, chiffres en tabulaire, accents orange de la charte.
   Aucun de ces effets n'est nécessaire à la lecture : tout le texte est dans
   le HTML et reste accessible si les scripts ou les animations sont coupés.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Bandeau d'ouverture ─────────────────────────────────────────────── */
.hp-hero {
    position: relative;
    isolation: isolate;
    background: var(--dark);
    color: #fff;
    padding: clamp(3.4rem, 2rem + 6vw, 6.5rem) 1.25rem clamp(3rem, 2rem + 4vw, 5rem);
    overflow: hidden;
}
.hp-hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hp-hero-grid {
    position: absolute; inset: -2px;
    background-image:
        linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 85% 75% at 50% 42%, #000 30%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 42%, #000 30%, transparent 78%);
    animation: hp-grid 34s linear infinite;
}
@keyframes hp-grid { to { background-position: 56px 56px, 56px 56px; } }

.hp-hero-glow { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; }
.hp-glow-1 {
    width: 46vw; height: 46vw; max-width: 620px; max-height: 620px;
    top: -16%; right: -8%;
    background: radial-gradient(circle, rgba(255,96,2,.55), transparent 68%);
    animation: hp-float-a 17s ease-in-out infinite alternate;
}
.hp-glow-2 {
    width: 38vw; height: 38vw; max-width: 500px; max-height: 500px;
    bottom: -22%; left: -6%;
    background: radial-gradient(circle, rgba(255,145,71,.34), transparent 70%);
    animation: hp-float-b 21s ease-in-out infinite alternate;
}
@keyframes hp-float-a { to { transform: translate3d(-5%, 7%, 0) scale(1.12); } }
@keyframes hp-float-b { to { transform: translate3d(6%, -6%, 0) scale(1.09); } }

.hp-hero-wave { position: absolute; inset: auto 0 -4% 0; width: 100%; height: 62%; opacity: .5; }
.hp-wave { fill: none; stroke-width: 1.6; stroke-linecap: round; }
.hp-wave-a { stroke: rgba(255,96,2,.75); stroke-dasharray: 1600; stroke-dashoffset: 1600; animation: hp-draw 5.5s ease-out .2s forwards, hp-swim 15s ease-in-out 6s infinite alternate; }
.hp-wave-b { stroke: rgba(255,255,255,.34); stroke-dasharray: 1700; stroke-dashoffset: 1700; animation: hp-draw 6.5s ease-out .5s forwards, hp-swim 18s ease-in-out 7s infinite alternate-reverse; }
.hp-wave-c { stroke: rgba(255,145,71,.4);  stroke-dasharray: 1650; stroke-dashoffset: 1650; animation: hp-draw 7.5s ease-out .9s forwards, hp-swim 21s ease-in-out 8s infinite alternate; }
@keyframes hp-draw { to { stroke-dashoffset: 0; } }
@keyframes hp-swim { to { transform: translate3d(0, -14px, 0); } }

.hp-hero-net { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; }

.hp-hero-inner { max-width: 980px; margin: 0 auto; position: relative; text-align: center; }
.hp-eyebrow {
    display: inline-flex; align-items: center; gap: .55rem;
    margin: 0 0 1.1rem;
    padding: .38rem .9rem .38rem .7rem;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 999px;
    background: rgba(255,255,255,.05);
    font-family: var(--head);
    font-size: .74rem; font-weight: 700;
    letter-spacing: .13em; text-transform: uppercase;
    color: rgba(255,255,255,.9);
    backdrop-filter: blur(6px);
}
.hp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 0 rgba(255,96,2,.7); animation: hp-pulse 2.4s ease-out infinite; }
@keyframes hp-pulse { 70% { box-shadow: 0 0 0 9px rgba(255,96,2,0); } 100% { box-shadow: 0 0 0 0 rgba(255,96,2,0); } }

.hp-hero h1 {
    color: #fff;
    font-size: clamp(1.85rem, 1.1rem + 3.1vw, 3.25rem);
    line-height: 1.12;
    letter-spacing: -.022em;
    margin: 0 0 1.1rem;
    text-wrap: balance;
}
.hp-hero-sub { max-width: 760px; margin: 0 auto 1.9rem; color: rgba(255,255,255,.8); font-size: 1.06rem; line-height: 1.68; }
.hp-hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin: 0 0 1.7rem; }
.btn-ghost { border: 2px solid rgba(255,255,255,.4); color: #fff; background: transparent; }
.btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.1); color: #fff; text-decoration: none; }
.btn-lg { font-size: 1.02rem; padding: .95rem 1.9rem; }

.hp-hero-trust { display: inline-flex; align-items: center; gap: .6rem; margin: 0; color: rgba(255,255,255,.82); font-size: .93rem; }
.hp-hero-trust strong { color: #fff; }

.fw-stars { display: inline-flex; gap: 2px; }
.fw-stars svg { width: 17px; height: 17px; fill: rgba(150,150,155,.45); }
.fw-stars svg.is-on { fill: #ffb400; }

/* ── Rythme général des sections ─────────────────────────────────────── */
.hp-flow { --lp-pad: 4.4rem; }
.hp-section { padding: var(--lp-pad, 4.4rem) 1.25rem; position: relative; }
.hp-section.is-tint { background: var(--bg-soft); }
.hp-section.is-dark { background: var(--dark); color: #fff; }
.hp-section.is-dark h2, .hp-section.is-dark h3 { color: #fff; }
.hp-section.is-dark p, .hp-section.is-dark li { color: rgba(255,255,255,.84); }
.hp-inner { max-width: var(--wrap); margin: 0 auto; }
.hp-read { max-width: var(--read-w); margin-inline: auto; font-size: 1.04rem; }
.hp-read p { line-height: 1.62; margin: 0 0 .95rem; }
.hp-read > *:last-child { margin-bottom: 0; }
.hp-read h3 { font-size: 1.28rem; margin: 2.2rem 0 .8rem; }

.hp-section > .hp-inner > h2 {
    max-width: var(--read-w); margin: 0 auto 1.7rem;
    font-size: clamp(1.55rem, 1.15rem + 1.5vw, 2.25rem);
    line-height: 1.2; letter-spacing: -.018em;
    text-wrap: balance;
}
.hp-section > .hp-inner > h2::after {
    content: ""; display: block; width: 64px; height: 4px;
    margin-top: .9rem; background: var(--orange); border-radius: 4px;
}

/* ── Compteurs ───────────────────────────────────────────────────────── */
.hp-counters {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1.6rem; margin: 0 0 2.6rem;
}
.hp-counter {
    text-align: center; padding: 1.6rem 1rem;
    border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius);
    background: rgba(255,255,255,.04);
}
.hp-num {
    display: block;
    font-family: var(--head); font-weight: 800;
    font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem);
    line-height: 1; color: var(--orange);
    font-variant-numeric: tabular-nums;
}
.hp-label { display: block; margin-top: .6rem; font-size: .88rem; line-height: 1.45; color: rgba(255,255,255,.78); }

/* ── Bandes service : image flottante, texte qui l'habille ───────────── */
.hp-feature { max-width: var(--wrap); margin: 3rem auto; }
.hp-feature::after { content: ""; display: block; clear: both; }
.hp-feature-media { float: left; width: 41%; margin: .4rem 2rem 1.1rem 0; }
.hp-feature.is-rev .hp-feature-media { float: right; margin: .4rem 0 1.1rem 2rem; }
.hp-feature-media img { width: 100%; height: auto; display: block; border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.hp-feature h3 { margin: 0 0 .9rem; font-size: clamp(1.2rem, 1rem + .7vw, 1.55rem); line-height: 1.3; }
.hp-feature h3::after { content: ""; display: block; width: 52px; height: 3px; margin-top: .7rem; background: var(--orange); border-radius: 3px; }
.hp-feature p { line-height: 1.62; margin: 0 0 .9rem; }

/* ── Blocs graphiques ────────────────────────────────────────────────── */
.hp-graphic { max-width: var(--wrap); margin: 3.2rem auto 0; }
.hp-graphic-title { text-align: center; font-size: 1.2rem; margin: 0 0 1.8rem; }
.hp-graphic-note { max-width: var(--read-w); margin: 1.6rem auto 0; font-size: .9rem; line-height: 1.7; color: var(--muted); }
.is-dark .hp-graphic-note { color: rgba(255,255,255,.62); }

.hp-pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.4rem; }
.hp-pillar {
    padding: 1.5rem 1.4rem; border: 1px solid var(--line); border-radius: var(--radius);
    background: #fff; box-shadow: var(--shadow);
}
.hp-pillar svg { width: 32px; height: 32px; color: var(--orange); }
.hp-pillar-name { display: block; font-family: var(--head); font-weight: 700; font-size: 1.05rem; margin: .7rem 0 .55rem; }
.hp-pillar-bar { display: block; height: 6px; border-radius: 6px; background: var(--line); overflow: hidden; }
.hp-pillar-bar i { display: block; height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg, var(--orange), #ff9147); transition: width 1.15s cubic-bezier(.2,.7,.3,1); }
.hp-pillar.is-in .hp-pillar-bar i { width: calc(var(--v) * 1%); }
.hp-pillar p { margin: .9rem 0 0; font-size: .92rem; line-height: 1.65; color: var(--muted); }

.hp-funnel { display: flex; flex-direction: column; gap: .55rem; align-items: center; }
.hp-funnel-step {
    width: var(--w); max-width: 100%;
    padding: .95rem 1.2rem;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(255,96,2,.14), rgba(255,96,2,.05));
    border: 1px solid rgba(255,96,2,.28);
    transform: scaleX(.4); transform-origin: 50% 50%; opacity: 0;
    transition: transform .7s cubic-bezier(.2,.7,.3,1), opacity .5s ease;
}
.hp-funnel.is-in .hp-funnel-step { transform: none; opacity: 1; }
.hp-funnel.is-in .hp-funnel-step:nth-child(2) { transition-delay: .1s; }
.hp-funnel.is-in .hp-funnel-step:nth-child(3) { transition-delay: .2s; }
.hp-funnel.is-in .hp-funnel-step:nth-child(4) { transition-delay: .3s; }
.hp-funnel.is-in .hp-funnel-step:nth-child(5) { transition-delay: .4s; }
.hp-funnel-label { display: block; font-family: var(--head); font-weight: 700; font-size: .98rem; }
.hp-funnel-desc { display: block; font-size: .87rem; color: var(--muted); margin-top: .18rem; line-height: 1.5; }

.hp-zones { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.2rem; }
.hp-zone { padding: 1.25rem 1.3rem; background: #fff; border-radius: var(--radius); border: 1px solid var(--line); border-left: 4px solid var(--orange); }
.hp-zone-city { display: block; font-family: var(--head); font-weight: 700; font-size: 1.02rem; margin-bottom: .4rem; }
.hp-zone-txt { display: block; font-size: .9rem; line-height: 1.6; color: var(--muted); }

/* ── Étapes de la méthode ────────────────────────────────────────────── */
.hp-steps { list-style: none; margin: 2.4rem auto 0; padding: 0; max-width: var(--read-w); position: relative; }
.hp-steps::before { content: ""; position: absolute; left: 23px; top: 12px; bottom: 12px; width: 2px; background: linear-gradient(var(--orange), rgba(255,96,2,.12)); }
.hp-step { display: flex; gap: 1.3rem; padding: 0 0 1.9rem; position: relative; }
.hp-step-n {
    flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%;
    background: var(--orange); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--head); font-weight: 800; font-size: 1.05rem;
    box-shadow: 0 0 0 6px var(--bg);
    z-index: 1;
}
.is-tint .hp-step-n { box-shadow: 0 0 0 6px var(--bg-soft); }
.hp-step h3 { margin: .55rem 0 .5rem; font-size: 1.14rem; }
.hp-step p { margin: 0; font-size: .96rem; line-height: 1.6; color: var(--muted); }

/* ── Accordéons ──────────────────────────────────────────────────────── */
.hp-acc { max-width: var(--read-w); margin: 2.2rem auto 0; display: flex; flex-direction: column; gap: .7rem; }
.hp-acc-item { border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius-sm); background: rgba(255,255,255,.04); overflow: hidden; }
.hp-acc-light .hp-acc-item { border-color: var(--line); background: #fff; }
.hp-acc-item[open] { border-color: rgba(255,96,2,.5); }
.hp-acc-item > summary {
    display: flex; align-items: flex-start; gap: .9rem;
    padding: 1.05rem 1.2rem; cursor: pointer; list-style: none;
    font-family: var(--head); font-weight: 600; line-height: 1.45;
}
.hp-acc-item > summary::-webkit-details-marker { display: none; }
.hp-acc-k {
    flex: 0 0 auto; min-width: 30px;
    font-size: .78rem; font-weight: 800; letter-spacing: .06em;
    color: var(--orange); font-variant-numeric: tabular-nums; padding-top: .16em;
}
.hp-acc-q { flex: 1; }
.hp-acc-item > summary::after {
    content: ""; flex: 0 0 auto; width: 18px; height: 18px; margin-top: .16em;
    background: var(--orange);
    --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
    transition: transform .25s ease;
}
.hp-acc-item[open] > summary::after { transform: rotate(180deg); }
.hp-acc-a { padding: 0 1.2rem 1.2rem 3.1rem; }
.hp-acc-a p { margin: 0 0 .8rem; line-height: 1.62; font-size: .97rem; }
.hp-acc-a > *:last-child { margin-bottom: 0; }

/* ── Cartes secteurs ─────────────────────────────────────────────────── */
.hp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1.5rem; margin-top: 2.4rem; }
.hp-card {
    padding: 1.6rem 1.5rem; background: #fff; border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow);
    transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease, border-color .3s ease;
}
.hp-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: rgba(255,96,2,.4); }
.hp-card h3 { margin: 0 0 .8rem; font-size: 1.1rem; line-height: 1.35; }
.hp-card h3::after { content: ""; display: block; width: 40px; height: 3px; margin-top: .6rem; background: var(--orange); border-radius: 3px; }
.hp-card p { margin: 0; font-size: .93rem; line-height: 1.58; color: var(--muted); }

/* ── Technologies ────────────────────────────────────────────────────── */
.hp-logos { list-style: none; padding: 0; margin: 2.4rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.2rem; }
.hp-logo { display: flex; flex-direction: column; padding: 1.35rem 1.3rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease; }
.hp-logo:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.hp-logo-mark {
    width: 46px; height: 46px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--head); font-weight: 800; font-size: .95rem;
    color: #fff; background: var(--dark); margin-bottom: .85rem;
    letter-spacing: -.02em;
}
.hp-logo-wp  { background: #21759b; }
.hp-logo-ps  { background: #df0067; }
.hp-logo-php { background: #4f5b93; font-size: .84rem; }
.hp-logo-js  { background: #f0db4f; color: #3b3b1f; }
.hp-logo-gsc { background: #4285f4; font-size: .72rem; }
.hp-logo-ga  { background: #e8710a; font-size: .74rem; }
.hp-logo-ads { background: #34a853; font-size: .78rem; }
.hp-logo-sf  { background: var(--dark-3); font-size: .8rem; }
.hp-logo-name { font-family: var(--head); font-weight: 700; font-size: 1rem; margin-bottom: .4rem; }
.hp-logo-txt { font-size: .87rem; line-height: 1.6; color: var(--muted); }

/* ── Avis ────────────────────────────────────────────────────────────── */
.hp-rating-head { display: flex; align-items: center; gap: 1.1rem; justify-content: center; margin: 0 auto 1.8rem; }
.hp-rating-num { font-family: var(--head); font-weight: 800; font-size: 3.1rem; line-height: 1; color: var(--orange); font-variant-numeric: tabular-nums; }
.hp-rating-meta { display: flex; flex-direction: column; gap: .3rem; font-size: .92rem; color: var(--muted); }
.hp-rating-meta .fw-stars svg { width: 20px; height: 20px; }

.hp-reviews { columns: 3 300px; column-gap: 1.4rem; margin-top: 2.2rem; }
.hp-review {
    break-inside: avoid; margin: 0 0 1.4rem; padding: 1.4rem 1.4rem 1.2rem;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.hp-review blockquote { margin: .7rem 0 .9rem; padding: 0; border: 0; background: none; }
.hp-review blockquote p { margin: 0; font-size: .95rem; line-height: 1.58; font-style: normal; color: var(--ink); }
.hp-review figcaption { display: flex; flex-direction: column; gap: .12rem; }
.hp-review-author { font-family: var(--head); font-weight: 700; font-size: .92rem; }
.hp-review-when { font-size: .82rem; color: var(--muted); }

/* ── Clôture ─────────────────────────────────────────────────────────── */
.hp-final-sub { max-width: 640px; margin: 0 auto 1.8rem; font-size: 1.05rem; line-height: 1.7; }
.hp-final-meta { margin: 1.4rem 0 0; font-size: .9rem; color: rgba(255,255,255,.6); }

/* ── Adaptations ─────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .hp-flow { --lp-pad: 2.8rem; }
    .hp-section { padding: 2.8rem 1.25rem; }
    .hp-feature-media, .hp-feature.is-rev .hp-feature-media { float: none; width: 100%; margin: 0 0 1.1rem; }
    .hp-reviews { columns: 1; }
    .hp-hero-actions { flex-direction: column; align-items: stretch; }
    .hp-rating-head { flex-direction: column; text-align: center; gap: .5rem; }
    .hp-rating-meta { align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
    .hp-hero-grid, .hp-glow-1, .hp-glow-2, .hp-wave, .hp-dot { animation: none !important; }
    .hp-wave { stroke-dashoffset: 0 !important; }
    .hp-hero-net { display: none; }
    .hp-funnel-step { transform: none; opacity: 1; }
    .hp-pillar-bar i { transition: none; }
}

/* Note Google en pied de page, sur toutes les pages */
.footer-rating {
    max-width: var(--wrap); margin: 0 auto;
    padding: 1rem 1.25rem 0;
    display: flex; align-items: center; justify-content: center; gap: .6rem;
    font-size: .9rem; color: rgba(255,255,255,.78);
    text-align: center; flex-wrap: wrap;
}
.footer-rating strong { color: #fff; }

/* ── Sommaire en pied de contenu ─────────────────────────────────────────
   Il n'occupe plus de colonne latérale : sur les pages longues, un rail fixe
   dépassait la hauteur de l'écran et se retrouvait tronqué. Placé après le
   contenu, il sert de récapitulatif et de point de renvoi. */
.toc-footer {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 2.4rem 1.25rem 3rem;
}
.toc-footer-title {
    max-width: var(--wrap); margin: 0 auto .9rem;
    font-family: var(--head); font-weight: 800;
    font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
    color: var(--muted);
}
.toc-footer .sqcms-toc {
    max-width: var(--wrap); margin: 0 auto;
    border-radius: var(--radius);
}
.toc-footer .sqcms-toc-list { columns: 2 320px; column-gap: 2rem; }
.toc-footer .sqcms-toc-item { break-inside: avoid; }
.toc-footer .sqcms-toc-item a { font-size: .88rem; }
.site-main .toc-footer { padding-left: 0; padding-right: 0; }

/* ── Pages internes : même registre visuel que l'accueil ─────────────────
   Les sections alternent clair / teinté / clair / sombre, les titres portent
   un numéro d'ordre en filigrane, et les blocs entrent en scène au défilement.
   Tout est décoratif : le contenu reste identique si les animations sont
   coupées ou si le JS ne s'exécute pas. */
.lp-section.is-dark { background: var(--dark); color: #fff; }
.lp-section.is-dark h2, .lp-section.is-dark h3, .lp-section.is-dark h4 { color: #fff; }
.lp-section.is-dark p, .lp-section.is-dark li, .lp-section.is-dark td, .lp-section.is-dark th { color: rgba(255,255,255,.85); }
.lp-section.is-dark a { color: #ff9147; }
.lp-section.is-dark blockquote { border-left-color: var(--orange); color: rgba(255,255,255,.78); }
.lp-section.is-dark .lp-cards .db-card,
.lp-section.is-dark .faq-item { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); }
.lp-section.is-dark .faq-q { color: #fff; }
.lp-section.is-dark .faq-a { color: rgba(255,255,255,.85); }
.lp-section.is-dark .lp-read h3 { border-left-color: var(--orange); }

/* Numéro d'ordre du titre de section */
.lp-h2 { position: relative; }
.lp-h2-n {
    display: block;
    font-family: var(--head); font-weight: 800;
    font-size: .78rem; letter-spacing: .16em;
    color: var(--orange);
    margin-bottom: .5rem;
    font-variant-numeric: tabular-nums;
}
.lp-section.is-dark .lp-h2-n { color: #ff9147; }

/* Liseré animé en haut de chaque section : se remplit quand la section entre
   dans l'écran. Repère de progression, sans aucune incidence sur le contenu. */
.lp-section + .lp-section::before {
    content: "";
    position: absolute; top: 0; left: 0;
    width: 0; height: 2px;
    background: linear-gradient(90deg, var(--orange), rgba(255,96,2,0));
    transition: width 1.1s cubic-bezier(.2,.7,.3,1);
}
.lp-section.is-in::before { width: min(340px, 42%); }
.lp-section { position: relative; }

/* Les paragraphes d'une section arrivent en léger décalage les uns des autres */
.lp-read.is-in > * { animation: fw-rise .6s cubic-bezier(.2,.7,.3,1) backwards; }
.lp-read.is-in > *:nth-child(2) { animation-delay: .06s; }
.lp-read.is-in > *:nth-child(3) { animation-delay: .12s; }
.lp-read.is-in > *:nth-child(4) { animation-delay: .18s; }
.lp-read.is-in > *:nth-child(n+5) { animation-delay: .24s; }
@keyframes fw-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Images de section : léger zoom arrière à l'apparition */
.lp-media img { transition: transform 1.1s cubic-bezier(.2,.7,.3,1); }
.lp-media.reveal:not(.is-in) img { transform: scale(1.05); }

/* Listes à puces : puce orange dessinée, plus nette que la puce par défaut */
.lp-read ul { list-style: none; padding-left: 0; }
.lp-read ul > li { position: relative; padding-left: 1.5rem; margin-bottom: .35rem; }
.lp-read ul > li::before {
    content: ""; position: absolute; left: 0; top: .62em;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--orange);
}
.lp-read ul ul { margin-top: .5rem; }
.lp-read ul ul > li::before { background: transparent; border: 2px solid var(--orange); }

@media (prefers-reduced-motion: reduce) {
    .lp-section::before { transition: none; }
    .lp-read.is-in > * { animation: none; }
    .lp-media.reveal:not(.is-in) img { transform: none; }
}

/* ── Technologies : pastilles élargies et regroupées par famille ─────── */
.hp-logos { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.hp-logo-fam {
    font-family: var(--head); font-weight: 800;
    font-size: .64rem; letter-spacing: .13em; text-transform: uppercase;
    color: var(--orange); margin-bottom: .3rem;
}
.hp-logo-woo  { background: #7f54b3; font-size: .74rem; }
.hp-logo-sql  { background: #00618a; font-size: .74rem; }
.hp-logo-html { background: #e34c26; font-size: .8rem; }
.hp-logo-api  { background: #2f6f4f; font-size: .74rem; }
.hp-logo-git  { background: #f05033; font-size: .76rem; }
.hp-logo-mtm  { background: #3253a1; font-size: .74rem; }
.hp-logo-lkr  { background: #5b4ec0; font-size: .74rem; }
.hp-logo-mail { background: #0b7285; font-size: 1.15rem; }
.hp-logo-auto { background: #b5540b; font-size: 1.05rem; }
.hp-logo-gbp  { background: #1a73e8; font-size: .72rem; }
.hp-logo-link { background: #e8590c; font-size: 1.05rem; }
.hp-logo-geo  { background: #6d28d9; font-size: .72rem; }

/* ── Illustrations vectorielles des blocs sur mesure ─────────────────── */
.hp-feature-svg .hp-feature-media { display: flex; align-items: center; }
.hp-illu { width: 100%; height: auto; display: block; border-radius: var(--radius); background: var(--dark); box-shadow: var(--shadow-lg); }
.fw-i-panel { fill: #2e2f31; stroke: rgba(255,255,255,.1); }
.fw-i-bar   { fill: rgba(255,255,255,.06); }
.fw-i-dot-1 { fill: #ff6002; } .fw-i-dot-2 { fill: rgba(255,255,255,.32); } .fw-i-dot-3 { fill: rgba(255,255,255,.18); }
.fw-i-line  { fill: rgba(255,255,255,.22); }
.fw-i-box   { fill: rgba(255,255,255,.07); stroke: rgba(255,255,255,.12); }
.fw-i-caret { fill: none; stroke: #ff6002; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fw-i-d { stroke: rgba(255,96,2,.5); } .fw-i-g { fill: rgba(255,96,2,.18); stroke: rgba(255,96,2,.55); }
.fw-i-wire { fill: none; stroke: rgba(255,255,255,.28); stroke-width: 2; stroke-dasharray: 5 6; }
.fw-i-pulse { fill: #ff6002; }

/* Le contenu de l'illustration s'anime seulement quand le bloc est visible */
.hp-feature-svg.is-in .fw-i-line { animation: fw-i-grow .8s cubic-bezier(.2,.7,.3,1) backwards; transform-origin: 0 50%; }
.hp-feature-svg.is-in .fw-i-a { animation-delay: .05s; }
.hp-feature-svg.is-in .fw-i-b { animation-delay: .15s; }
.hp-feature-svg.is-in .fw-i-c { animation-delay: .25s; }
@keyframes fw-i-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.fw-flow .fw-i-wire { animation: fw-i-dash 2.4s linear infinite; }
@keyframes fw-i-dash { to { stroke-dashoffset: -22; } }

@media (prefers-reduced-motion: reduce) {
    .hp-feature-svg .fw-i-line { animation: none !important; }
    .fw-flow .fw-i-wire { animation: none; }
    .fw-i-pulse { display: none; }
}

/* ── Sommaire d'article, visible dès l'affichage ─────────────────────────
   Rendu côté serveur, avant le corps de l'article. Aucun script n'intervient :
   le sommaire et ses liens sont dans le document servi. */
.toc-inline { margin: 0 0 2.2rem; }
.toc-inline-title {
    margin: 0 0 .7rem;
    font-family: var(--head); font-weight: 800;
    font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
    color: var(--muted);
}
.toc-inline .sqcms-toc { margin: 0; border-radius: var(--radius); }
.toc-inline .sqcms-toc-list { columns: 2 260px; column-gap: 1.8rem; }
.toc-inline .sqcms-toc-item { break-inside: avoid; }
.toc-inline .sqcms-toc-item a { font-size: .875rem; padding: .3rem .45rem; }

/* ── Bandeau de rubrique ─────────────────────────────────────────────── */
.cat-hero {
    position: relative; isolation: isolate; overflow: hidden;
    background: var(--dark); color: #fff;
    padding: clamp(2.6rem, 1.8rem + 3.5vw, 4.4rem) 1.25rem clamp(2.2rem, 1.6rem + 2.5vw, 3.4rem);
}
.cat-hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.cat-hero-inner { max-width: var(--read-w); margin: 0 auto; text-align: center; position: relative; }
.cat-hero h1 {
    color: #fff; margin: 0 0 .9rem;
    font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.6rem);
    line-height: 1.16; letter-spacing: -.02em; text-wrap: balance;
}
.cat-hero-sub { max-width: 720px; margin: 0 auto 1.3rem; color: rgba(255,255,255,.8); line-height: 1.62; }
.cat-hero-meta {
    display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; justify-content: center;
    margin: 0; font-size: .87rem; color: rgba(255,255,255,.72);
}
.cat-hero-meta strong { color: var(--orange); font-variant-numeric: tabular-nums; }

/* Sommaire aux couleurs Facem Web (le CSS de l'extension raisonne en variables :
   on les redéfinit plutôt que de tout réécrire à coups de !important). */
.sqcms-toc {
    --sqcms-accent: var(--orange);
    --sqcms-text:   var(--dark);
    --sqcms-bg:     #fff;
    --sqcms-border: var(--line);
    --primary:      var(--orange);
    --text:         var(--dark);
    --card-bg:      #fff;
    border-left: 4px solid var(--orange);
    font-family: var(--sans);
}
.sqcms-toc::before { background: linear-gradient(90deg, var(--orange), rgba(255,96,2,.25)); }
.sqcms-toc-item.sqcms-lvl-2 > a::before {
    background: var(--orange-soft); color: var(--orange);
    border-radius: 7px; font-family: var(--head);
}
.sqcms-toc-item.sqcms-lvl-2 > a:hover::before,
.sqcms-toc-item.sqcms-active.sqcms-lvl-2 > a::before { background: var(--orange); color: #fff; }
.sqcms-toc-item a { font-family: var(--sans); }
.sqcms-toc-item.sqcms-lvl-2 > a { font-family: var(--head); font-weight: 600; color: var(--dark); }
.sqcms-toc-item.sqcms-active > a { background: var(--orange-soft); color: var(--orange) !important; box-shadow: inset 3px 0 0 var(--orange); }

/* Sur fond sombre, le sommaire s'inverse au lieu de trouer la section */
.is-dark .sqcms-toc, .lp-section.is-dark .sqcms-toc {
    --sqcms-bg: rgba(255,255,255,.05);
    --sqcms-text: #ffffff;
    --sqcms-border: rgba(255,255,255,.14);
    --card-bg: rgba(255,255,255,.05);
    --text: #ffffff;
}
.is-dark .sqcms-toc-item.sqcms-lvl-2 > a { color: #fff; }

/* Sommaire de page : même traitement que sur les articles, placé en tête */
.toc-page-wrap { max-width: var(--wrap); margin: 0 auto; padding: 2rem 1.25rem 0; }
.toc-page-wrap .toc-inline { max-width: var(--read-w); margin: 0 auto; }

/* ══════════════════════════════════════════════════════════════════════════
   PAGES INTERNES — bandeau de titre, infographies, mise en forme du contenu
   ══════════════════════════════════════════════════════════════════════════
   L'image mise en avant devient le fond du H1 au lieu d'être posée en travers
   du texte. Elle reste une balise <img> avec son alt et son jeu de tailles :
   indexable, et servie à la bonne résolution selon l'écran. */

.fw-hero {
    position: relative; isolation: isolate; overflow: hidden;
    background: var(--dark); color: #fff;
    padding: clamp(2.8rem, 1.9rem + 3.8vw, 5rem) 1.25rem clamp(2.4rem, 1.7rem + 2.8vw, 3.8rem);
}
.fw-hero-media { position: absolute; inset: 0; z-index: -3; }
.fw-hero-media img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    /* Si le fichier venait à manquer, le texte alternatif ne doit pas s'afficher
       en travers du bandeau : le voile prend simplement le relais. */
    color: transparent; font-size: 0;
    /* Désaturée et assombrie : l'image doit poser une ambiance, pas concurrencer
       le titre. Le texte conserve ainsi un contraste largement suffisant. */
    filter: grayscale(.55) contrast(1.05) brightness(.55);
    transform: scale(1.04);
}
.fw-hero-veil {
    position: absolute; inset: 0; z-index: -2;
    background:
        linear-gradient(180deg, rgba(55,56,58,.62) 0%, rgba(55,56,58,.86) 55%, rgba(55,56,58,.96) 100%),
        radial-gradient(1200px 420px at 12% 0%, rgba(232,89,12,.30), transparent 62%);
}
.fw-hero:not(.has-media) .fw-hero-veil {
    background:
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.18)),
        radial-gradient(900px 380px at 15% 0%, rgba(232,89,12,.26), transparent 60%);
}
.fw-hero-glow {
    position: absolute; z-index: -1; pointer-events: none;
    width: 460px; height: 460px; right: -140px; top: -180px; border-radius: 50%;
    background: radial-gradient(circle, rgba(232,89,12,.34), transparent 68%);
    filter: blur(16px);
}
.fw-hero-swoosh {
    position: absolute; left: 0; right: 0; bottom: -1px; height: clamp(58px, 8vw, 118px);
    width: 100%; z-index: -1; color: var(--orange); pointer-events: none;
}
.fw-hero-inner { position: relative; max-width: var(--read-w); margin: 0 auto; text-align: center; }
.fw-hero.is-left .fw-hero-inner { text-align: left; margin-left: 0; }
.fw-hero-eyebrow {
    margin: 0 0 .7rem; font-size: .74rem; font-weight: 800; letter-spacing: .16em;
    text-transform: uppercase; color: var(--orange);
}
.fw-hero h1 {
    color: #fff; margin: 0;
    font-size: clamp(1.75rem, 1.15rem + 2.5vw, 2.85rem);
    line-height: 1.14; letter-spacing: -.022em; text-wrap: balance;
    text-shadow: 0 2px 22px rgba(0,0,0,.42);
}
.fw-hero-rule {
    display: block; width: 88px; height: 4px; border-radius: 4px;
    background: var(--orange); margin: 1.05rem auto 0;
}
.fw-hero.is-left .fw-hero-rule { margin-left: 0; }
.fw-hero-sub {
    max-width: 760px; margin: 1.15rem auto 0; line-height: 1.62;
    color: rgba(255,255,255,.86); font-size: 1.02rem;
}
.fw-hero.is-left .fw-hero-sub { margin-left: 0; }
.fw-hero-meta {
    display: flex; flex-wrap: wrap; gap: .45rem 1.35rem; justify-content: center;
    margin: 1.3rem 0 0; font-size: .86rem; color: rgba(255,255,255,.74);
}
.fw-hero.is-left .fw-hero-meta { justify-content: flex-start; }
.fw-hero-meta .meta-item { display: inline-flex; align-items: center; gap: .4rem; }
.fw-hero-meta .meta-item svg { width: 15px; height: 15px; color: var(--orange); }
.fw-hero-meta strong { color: var(--orange); font-variant-numeric: tabular-nums; }
.fw-hero-meta time { color: inherit; }

/* ── Images du contenu : ramenées à la largeur de lecture ───────────────── */
/* La largeur maximale vient de la taille réelle du fichier (--fw-img-w,
   posée par PHP) : une image n'est donc jamais agrandie au-delà de ce qu'elle
   contient, ce qui supprime le flou. Et aucun recadrage : une infographie
   reste entière, elle passe simplement dans une colonne plus étroite. */
.fw-figure {
    margin: 1.9rem auto; max-width: min(100%, var(--fw-img-w, 760px));
    text-align: center;
}
.fw-figure.is-tall  { max-width: min(100%, var(--fw-img-w, 560px)); }
.fw-figure.is-band  { max-width: min(100%, var(--fw-img-w, 900px)); }
.fw-figure img {
    display: block; width: 100%; height: auto; max-height: none;
    object-fit: contain; border-radius: 14px; background: var(--tint, #f2f3f5);
    box-shadow: 0 14px 34px -18px rgba(0,0,0,.42);
}
.fw-figure.is-tall img { border-radius: 12px; }
.fw-figure figcaption {
    margin: .6rem auto 0; max-width: 620px;
    font-size: .84rem; line-height: 1.55; color: var(--muted); font-style: italic;
}
.article-flow img, .lp-flow img { max-width: 100%; height: auto; }

/* ── Listes ordonnées → frise numérotée ─────────────────────────────────── */
.fw-steps { list-style: none; margin: 1.9rem 0; padding: 0; display: grid; gap: .85rem; }
.fw-steps > .fw-step {
    position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr);
    gap: .95rem; align-items: start;
    background: #fff; border: 1px solid var(--line); border-radius: 14px;
    padding: .95rem 1.15rem;
    box-shadow: 0 8px 22px -18px rgba(0,0,0,.35);
}
.fw-steps > .fw-step::marker { content: none; }
.fw-step-n {
    display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px;
    background: linear-gradient(135deg, var(--orange), #c2410c);
    color: #fff; font-weight: 800; font-size: 1.02rem; font-variant-numeric: tabular-nums;
    box-shadow: 0 6px 16px -8px rgba(232,89,12,.85);
}
.is-dark .fw-steps > .fw-step,
.hp-section.is-dark .fw-steps > .fw-step {
    background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); color: rgba(255,255,255,.9);
}

/* ── Listes à puces courtes → grille de points cochés ───────────────────── */
.fw-checklist {
    list-style: none; margin: 1.6rem 0; padding: 0;
    display: grid; gap: .55rem .95rem;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.fw-checklist > .fw-check {
    position: relative; padding: .55rem .8rem .55rem 2.1rem;
    background: var(--tint, #f6f7f9); border-radius: 11px;
    border: 1px solid var(--line); line-height: 1.55; font-size: .95rem;
}
.fw-checklist > .fw-check::before {
    content: ""; position: absolute; left: .72rem; top: .95rem;
    width: 15px; height: 15px; border-radius: 50%;
    background: var(--orange);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 6 9 17l-5-5' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 6 9 17l-5-5' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
}
.is-dark .fw-checklist > .fw-check,
.hp-section.is-dark .fw-checklist > .fw-check {
    background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); color: rgba(255,255,255,.88);
}

/* ── Tableaux ───────────────────────────────────────────────────────────── */
.fw-table-wrap {
    margin: 1.9rem 0; overflow-x: auto; -webkit-overflow-scrolling: touch;
    border: 1px solid var(--line); border-radius: 14px; background: #fff;
    box-shadow: 0 10px 28px -22px rgba(0,0,0,.4);
}
.fw-table-wrap:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
table.fw-table {
    width: 100%; border-collapse: collapse; margin: 0; font-size: .93rem; min-width: 480px;
}
table.fw-table th, table.fw-table td {
    padding: .72rem .95rem; text-align: left; vertical-align: top;
    border-bottom: 1px solid var(--line); line-height: 1.55;
}
table.fw-table thead th {
    background: var(--dark); color: #fff; font-weight: 700;
    font-size: .78rem; letter-spacing: .05em; text-transform: uppercase;
    border-bottom: none; position: sticky; top: 0;
}
table.fw-table tbody tr:nth-child(even) { background: #fafbfc; }
table.fw-table tbody tr:last-child td { border-bottom: none; }
table.fw-table caption {
    caption-side: bottom; padding: .7rem .95rem; font-size: .82rem;
    color: var(--muted); text-align: left; font-style: italic;
}

/* ── Bandeau de chiffres ────────────────────────────────────────────────── */
.fw-aside-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1.25rem 3rem; }
.fw-kpis {
    display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    background: var(--line); border: 1px solid var(--line); border-radius: 16px;
    overflow: hidden; margin: 2.4rem auto 0; max-width: var(--read-w);
}
.fw-kpi { background: #fff; padding: 1.35rem 1.15rem; text-align: center; }
.fw-kpi-n {
    display: block; font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.25rem); font-weight: 800;
    color: var(--dark); line-height: 1.05; font-variant-numeric: tabular-nums;
}
.fw-kpi-s { color: var(--orange); font-size: .62em; margin-left: .04em; }
.fw-kpi-l { display: block; margin-top: .35rem; font-size: .88rem; font-weight: 700; color: var(--dark); }
.fw-kpi-note { display: block; margin-top: .25rem; font-size: .78rem; color: var(--muted); line-height: 1.45; }

/* ── Bandeau de logotypes techniques ────────────────────────────────────── */
.fw-techs { margin: 2.4rem auto 0; max-width: var(--read-w); }
.fw-techs-title {
    margin: 0 0 .9rem; font-size: .74rem; font-weight: 800; letter-spacing: .14em;
    text-transform: uppercase; color: var(--orange); text-align: center;
}
.fw-techs-list {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.fw-tech {
    display: flex; align-items: center; gap: .6rem;
    background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: .6rem .75rem;
}
.fw-tech-mark {
    display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px;
    border-radius: 9px; color: #fff; font-weight: 800; font-size: .78rem;
}
.fw-tech-name { font-size: .87rem; font-weight: 700; color: var(--dark); line-height: 1.25; }

/* Le sommaire vit désormais dans le fil du texte, juste après le chapô. */
.article-flow > .toc-inline, .lp-flow .toc-inline, .hp-read > .toc-inline {
    margin: 1.8rem 0 2.2rem;
}

@media (max-width: 640px) {
    .fw-hero-media img { filter: grayscale(.55) contrast(1.05) brightness(.48); }
    .fw-kpis { grid-template-columns: repeat(2, 1fr); }
    .fw-steps > .fw-step { grid-template-columns: 36px minmax(0, 1fr); gap: .75rem; }
    .fw-step-n { width: 36px; height: 36px; font-size: .92rem; }
}

@media (prefers-reduced-motion: reduce) {
    .fw-hero-media img { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SCHÉMAS ET INFOGRAPHIES
   Le dessin est en CSS/SVG, les libellés restent du vrai texte HTML posé
   par-dessus : lisible par les moteurs, énoncé par les lecteurs d'écran,
   et parfaitement compréhensible même si aucune animation ne se joue.
   ══════════════════════════════════════════════════════════════════════════ */

.fw-gfx {
    margin: 2.6rem auto; max-width: var(--read-w, 960px);
    background: #fff; border: 1px solid var(--line); border-radius: 18px;
    padding: 1.7rem 1.5rem 1.5rem;
    box-shadow: 0 18px 44px -30px rgba(0,0,0,.4);
}
.hp-section.is-dark .fw-gfx, .lp-section.is-dark .fw-gfx {
    background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.14); color: rgba(255,255,255,.9);
}
.fw-gfx-title {
    margin: 0 0 1.35rem; text-align: center;
    font-size: 1.02rem; font-weight: 800; color: var(--dark); line-height: 1.35;
}
.hp-section.is-dark .fw-gfx-title, .lp-section.is-dark .fw-gfx-title { color: #fff; }
.fw-gfx-title::after {
    content: ""; display: block; width: 54px; height: 3px; border-radius: 3px;
    background: var(--orange); margin: .6rem auto 0;
}
.fw-gfx-note {
    margin: 1.25rem 0 0; font-size: .84rem; line-height: 1.6;
    color: var(--muted); text-align: center; font-style: italic;
}

/* ── Frise de processus ─────────────────────────────────────────────────── */
.fw-flow { list-style: none; margin: 0; padding: 0; }
.fw-flow-step {
    position: relative; display: grid; grid-template-columns: 44px minmax(0,1fr);
    gap: 1rem; padding: 0 0 1.35rem;
}
.fw-flow-step:last-child { padding-bottom: 0; }
.fw-flow-rail {
    position: absolute; left: 21px; top: 44px; bottom: 0; width: 2px;
    background: linear-gradient(180deg, var(--orange), rgba(232,89,12,.18));
    transform-origin: top; transform: scaleY(0);
    transition: transform .55s ease calc(var(--i) * .09s + .2s);
}
.fw-flow-step:last-child .fw-flow-rail { display: none; }
.fw-flow-dot {
    display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px;
    background: linear-gradient(135deg, var(--orange), #c2410c); color: #fff;
    font-weight: 800; font-size: 1.05rem; font-variant-numeric: tabular-nums;
    box-shadow: 0 8px 18px -10px rgba(232,89,12,.9);
    opacity: 0; transform: scale(.7);
    transition: opacity .4s ease calc(var(--i) * .09s), transform .45s cubic-bezier(.2,.9,.3,1.3) calc(var(--i) * .09s);
}
.fw-flow-body {
    display: block; opacity: 0; transform: translateX(-10px);
    transition: opacity .45s ease calc(var(--i) * .09s + .06s), transform .45s ease calc(var(--i) * .09s + .06s);
    padding-top: .15rem;
}
.fw-gfx.is-in .fw-flow-rail { transform: scaleY(1); }
.fw-gfx.is-in .fw-flow-dot,
.fw-gfx.is-in .fw-flow-body { opacity: 1; transform: none; }
.fw-flow-k {
    display: block; font-size: .7rem; font-weight: 800; letter-spacing: .13em;
    text-transform: uppercase; color: var(--orange); margin-bottom: .15rem;
}
.fw-flow-t { display: block; font-weight: 800; color: var(--dark); font-size: 1.02rem; line-height: 1.35; }
.hp-section.is-dark .fw-flow-t { color: #fff; }
.fw-flow-d { display: block; margin-top: .3rem; line-height: 1.6; font-size: .94rem; color: var(--muted); }

/* ── Couches empilées ───────────────────────────────────────────────────── */
.fw-layers { display: grid; gap: .6rem; justify-items: center; }
.fw-layer {
    width: var(--w); min-width: 260px; position: relative;
    display: grid; grid-template-columns: 6px minmax(0,1fr); gap: .85rem; align-items: stretch;
    background: var(--tint, #f6f7f9); border: 1px solid var(--line);
    border-radius: 12px; padding: .8rem 1rem .8rem .55rem;
    opacity: 0; transform: translateY(14px);
    transition: opacity .5s ease calc(var(--i) * .1s), transform .5s ease calc(var(--i) * .1s);
}
.fw-gfx.is-in .fw-layer { opacity: 1; transform: none; }
.fw-layer-bar { border-radius: 4px; background: linear-gradient(180deg, var(--orange), #c2410c); }
.fw-layer-t { display: block; font-weight: 800; color: var(--dark); line-height: 1.3; }
.fw-layer-d { display: block; margin-top: .2rem; font-size: .89rem; line-height: 1.55; color: var(--muted); }

/* ── Matrice 2×2 ────────────────────────────────────────────────────────── */
.fw-matrix { display: grid; grid-template-columns: 26px minmax(0,1fr); gap: .5rem; align-items: center; }
.fw-matrix-y {
    writing-mode: vertical-rl; transform: rotate(180deg); text-align: center;
    font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--orange);
}
.fw-matrix-x {
    grid-column: 2; text-align: center; margin-top: .35rem;
    font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--orange);
}
.fw-matrix-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.fw-quad {
    border-radius: 13px; padding: .95rem 1.05rem; border: 1px solid var(--line);
    background: var(--tint, #f6f7f9); min-height: 104px;
    opacity: 0; transform: scale(.96);
    transition: opacity .45s ease calc(var(--i) * .08s), transform .45s ease calc(var(--i) * .08s);
}
.fw-gfx.is-in .fw-quad { opacity: 1; transform: none; }
.fw-quad.is-tr { background: linear-gradient(140deg, rgba(232,89,12,.13), rgba(232,89,12,.04)); border-color: rgba(232,89,12,.32); }
.fw-quad.is-bl { background: #fff; }
/* Sur fond sombre, les quatre cases adoptent le même registre translucide :
   sans cela, trois cartes blanches côtoient une carte orangée et la lecture
   du schéma passe avant celle du contenu. */
.hp-section.is-dark .fw-quad, .lp-section.is-dark .fw-quad {
    background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14);
}
.hp-section.is-dark .fw-quad.is-tr, .lp-section.is-dark .fw-quad.is-tr {
    background: linear-gradient(140deg, rgba(232,89,12,.26), rgba(232,89,12,.07));
    border-color: rgba(232,89,12,.5);
}
.hp-section.is-dark .fw-quad-t, .lp-section.is-dark .fw-quad-t { color: #fff; }
.hp-section.is-dark .fw-quad-d, .lp-section.is-dark .fw-quad-d { color: rgba(255,255,255,.76); }
.hp-section.is-dark .fw-layer, .lp-section.is-dark .fw-layer {
    background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14);
}
.hp-section.is-dark .fw-layer-t, .lp-section.is-dark .fw-layer-t { color: #fff; }
.hp-section.is-dark .fw-layer-d, .lp-section.is-dark .fw-layer-d { color: rgba(255,255,255,.76); }
.hp-section.is-dark .fw-pillar, .lp-section.is-dark .fw-pillar {
    background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14);
}
.hp-section.is-dark .fw-pillar-t, .lp-section.is-dark .fw-pillar-t { color: #fff; }
.hp-section.is-dark .fw-pillar-d, .lp-section.is-dark .fw-pillar-d { color: rgba(255,255,255,.76); }
.hp-section.is-dark .fw-flow-d, .lp-section.is-dark .fw-flow-d { color: rgba(255,255,255,.76); }
.hp-section.is-dark .fw-bar-l, .lp-section.is-dark .fw-bar-l { color: #fff; }
.fw-quad-t { display: block; font-weight: 800; color: var(--dark); line-height: 1.3; }
.fw-quad-d { display: block; margin-top: .3rem; font-size: .88rem; line-height: 1.55; color: var(--muted); }

/* ── Barres ─────────────────────────────────────────────────────────────── */
.fw-bars { margin: 0; display: grid; gap: .85rem; }
.fw-bar-row { display: grid; grid-template-columns: minmax(120px, 34%) minmax(0,1fr); gap: .9rem; align-items: center; margin: 0; }
.fw-bar-l { margin: 0; font-weight: 700; font-size: .92rem; color: var(--dark); line-height: 1.35; }
.fw-bar-v { margin: 0; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .7rem; align-items: center; }
.fw-bar-track { display: block; height: 15px; border-radius: 8px; background: #eceef1; overflow: hidden; }
.fw-bar-fill {
    display: block; height: 100%; width: var(--pct); border-radius: 8px;
    background: linear-gradient(90deg, var(--orange), #f08c00);
    transform-origin: left; transform: scaleX(0);
    transition: transform .8s cubic-bezier(.2,.8,.3,1) calc(var(--i) * .09s);
}
.fw-gfx.is-in .fw-bar-fill { transform: scaleX(1); }
.fw-bar-n { font-weight: 800; font-size: .9rem; color: var(--orange); font-variant-numeric: tabular-nums; }

/* ── Anneau ─────────────────────────────────────────────────────────────── */
.fw-donut { display: grid; grid-template-columns: 190px minmax(0,1fr); gap: 1.6rem; align-items: center; position: relative; }
.fw-donut-svg { width: 190px; height: 190px; }
.fw-donut-seg {
    opacity: 0; transition: opacity .5s ease calc(var(--i) * .13s + .1s);
}
.fw-gfx.is-in .fw-donut-seg { opacity: 1; }
.fw-donut-center {
    position: absolute; left: 95px; top: 50%; transform: translate(-50%, -50%);
    margin: 0; width: 118px; text-align: center; font-size: .82rem; line-height: 1.35;
    font-weight: 700; color: var(--dark);
}
.fw-donut-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.fw-donut-legend li { display: grid; grid-template-columns: 14px minmax(0,1fr) auto; gap: .6rem; align-items: baseline; font-size: .92rem; }
.fw-donut-chip { width: 14px; height: 14px; border-radius: 4px; }
.fw-donut-v { font-weight: 800; color: var(--orange); font-variant-numeric: tabular-nums; }

/* ── Piliers ────────────────────────────────────────────────────────────── */
.fw-pillars { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.fw-pillar {
    background: var(--tint, #f6f7f9); border: 1px solid var(--line); border-radius: 14px;
    padding: 1.15rem 1.05rem; text-align: center;
    opacity: 0; transform: translateY(16px);
    transition: opacity .5s ease calc(var(--i) * .09s), transform .5s ease calc(var(--i) * .09s);
}
.fw-gfx.is-in .fw-pillar { opacity: 1; transform: none; }
.fw-pillar-ic {
    display: grid; place-items: center; width: 46px; height: 46px; margin: 0 auto .7rem;
    border-radius: 13px; background: linear-gradient(135deg, var(--orange), #c2410c); color: #fff;
    box-shadow: 0 8px 18px -10px rgba(232,89,12,.9);
}
.fw-pillar-ic svg { width: 23px; height: 23px; }
.fw-pillar-t { display: block; font-weight: 800; color: var(--dark); line-height: 1.3; }
.fw-pillar-d { display: block; margin-top: .35rem; font-size: .88rem; line-height: 1.55; color: var(--muted); }

@media (max-width: 640px) {
    .fw-gfx { padding: 1.3rem 1rem 1.2rem; border-radius: 15px; }
    .fw-donut { grid-template-columns: 1fr; justify-items: center; }
    .fw-donut-center { position: static; transform: none; margin: -110px auto 70px; }
    .fw-matrix-grid { grid-template-columns: 1fr; }
    .fw-bar-row { grid-template-columns: 1fr; gap: .3rem; }
    .fw-layer { width: 100% !important; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .fw-flow-rail, .fw-flow-dot, .fw-flow-body, .fw-layer,
    .fw-quad, .fw-bar-fill, .fw-donut-seg, .fw-pillar {
        opacity: 1 !important; transform: none !important; transition: none !important;
    }
    .fw-bar-fill { transform: scaleX(1) !important; }
}