/*
 * creep-info — CSS Kommoon
 * Reconstitution des tokens WordPress (theme.json) + composants v2 (style.css).
 * URL des assets : /static/… (route ThemeStaticController).
 */

/* ---------------------------------------------------------------- *
 * Fonts — @font-face auto-hébergées
 * ---------------------------------------------------------------- */

/* Quicksand — latin */
@font-face {
    font-family: "Quicksand";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("/static/fonts/quicksand-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Quicksand — latin-ext */
@font-face {
    font-family: "Quicksand";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("/static/fonts/quicksand-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Palanquin Dark 500 — latin */
@font-face {
    font-family: "Palanquin Dark";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/static/fonts/palanquin-500-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Palanquin Dark 500 — latin-ext */
@font-face {
    font-family: "Palanquin Dark";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/static/fonts/palanquin-500-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Palanquin Dark 600 — latin */
@font-face {
    font-family: "Palanquin Dark";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/static/fonts/palanquin-600-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Palanquin Dark 600 — latin-ext */
@font-face {
    font-family: "Palanquin Dark";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/static/fonts/palanquin-600-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------------- *
 * Tokens WordPress — reconstitution depuis theme.json
 * ---------------------------------------------------------------- */

:root {
    /* Palette couleurs */
    --wp--preset--color--ink:          #0b1220;
    --wp--preset--color--ink-2:        #14203a;
    --wp--preset--color--ink-line:     #26324c;
    --wp--preset--color--primary:      #1857d6;
    --wp--preset--color--primary-dark: #0f3a94;
    --wp--preset--color--primary-lift: #7fa6ff;
    --wp--custom--color--primary-soft: #eef3ff;
    --wp--preset--color--accent:       #00a5cd;
    --wp--preset--color--accent-deep:  #0e6b86;
    --wp--preset--color--text:         #1b2430;
    --wp--preset--color--text-soft:    #55606e;
    --wp--preset--color--base:         #ffffff;
    --wp--preset--color--surface:      #f4f7fb;
    --wp--preset--color--border:       #e6ecf4;

    /* Familles de polices */
    --wp--preset--font-family--sans:    "Quicksand", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --wp--preset--font-family--display: "Palanquin Dark", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --wp--preset--font-family--mono:    "Quicksand", ui-sans-serif, system-ui, sans-serif;

    /* Tailles de police */
    --wp--preset--font-size--x-small:      0.8125rem;
    --wp--preset--font-size--small:        0.9375rem;
    --wp--preset--font-size--medium:       1rem;
    --wp--preset--font-size--lede:         clamp(1.0625rem, 1.0625rem + 0.0333vw, 1.125rem);
    --wp--preset--font-size--large:        clamp(1.25rem, 1.25rem + 0.0667vw, 1.375rem);
    --wp--preset--font-size--display-small: clamp(1.5rem, 1.5rem + 0.2vw, 1.875rem);
    --wp--preset--font-size--x-large:      clamp(1.875rem, 1.875rem + 0.3333vw, 2.5rem);
    --wp--preset--font-size--xx-large:     clamp(2.25rem, 2.25rem + 0.5556vw, 3.25rem);

    /* Espacement */
    --wp--preset--spacing--20: 0.5rem;
    --wp--preset--spacing--30: 1rem;
    --wp--preset--spacing--40: 1.5rem;
    --wp--preset--spacing--50: 2rem;
    --wp--preset--spacing--60: 3rem;
    --wp--preset--spacing--70: 4.5rem;
    --wp--preset--spacing--80: 6rem;

    /* Personnalisations (custom) */
    --wp--custom--radius:             6px;
    --wp--custom--transition:         180ms ease-out;
    --wp--custom--tap-target:         44px;
    --wp--custom--measure:            65ch;
    --wp--custom--color--border-strong: #c9d6e8;
    --wp--custom--color--on-ink:      #b9c3d4;
    --wp--custom--color--on-ink-soft: #8494ac;
    --wp--custom--color--on-ink-label: #708099;

    /* Dimensions globales layout */
    --wp--style--global--content-size: 820px;
    --wp--style--global--wide-size:    1200px;
}

/* ---------------------------------------------------------------- *
 * Reset & base
 * ---------------------------------------------------------------- */

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

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

body {
    margin: 0;
    font-family: var(--wp--preset--font-family--sans);
    font-size: var(--wp--preset--font-size--medium);
    font-weight: 400;
    line-height: 1.65;
    color: var(--wp--preset--color--text);
    background-color: var(--wp--preset--color--base);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--wp--preset--font-family--display);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--wp--preset--color--text);
    margin-top: 0;
    margin-bottom: var(--wp--preset--spacing--30);
}

h1 { font-size: var(--wp--preset--font-size--xx-large); letter-spacing: -0.02em; }
h2 { font-size: var(--wp--preset--font-size--x-large); letter-spacing: -0.015em; }
h3 { font-size: var(--wp--preset--font-size--large); }

p { margin-top: 0; margin-bottom: var(--wp--preset--spacing--30); }

a {
    color: var(--wp--preset--color--primary);
    text-decoration: underline;
}

a:hover {
    color: var(--wp--preset--color--primary-dark);
}

ul, ol {
    margin-top: 0;
    margin-bottom: var(--wp--preset--spacing--30);
    padding-left: var(--wp--preset--spacing--50);
    line-height: 1.65;
}

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

/* ---------------------------------------------------------------- *
 * Layout — blocs WP compat
 * ---------------------------------------------------------------- */

.wp-block-group {
    display: flow-root;
}

.wp-block-columns {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--40);
    align-items: normal;
}

.wp-block-column {
    flex-grow: 1;
    flex-basis: 0;
    min-width: 0;
    word-break: break-word;
    overflow-wrap: break-word;
}

.alignfull {
    width: 100%;
}

.alignwide {
    max-width: var(--wp--style--global--wide-size);
    margin-left: auto;
    margin-right: auto;
}

/* Constrained layout : centre le contenu à content-size */
.is-layout-constrained {
    max-width: var(--wp--style--global--wide-size);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--wp--preset--spacing--50);
    padding-right: var(--wp--preset--spacing--50);
}

.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: var(--wp--style--global--content-size);
    margin-left: auto;
    margin-right: auto;
}

.is-layout-constrained > .alignwide {
    max-width: var(--wp--style--global--wide-size);
}

/* WordPress générait la classe `is-layout-constrained` au render ; la transposition
 * Twig ne l'a pas → le contenu des sections pleine largeur n'était plus contraint ni
 * centré (trop large, collé à gauche). On reproduit le comportement directement sur
 * les sections `.alignfull` : leur contenu est centré à content-size (820px), les
 * colonnes / blocs `alignwide` à wide-size (1200px). Les sections à layout propre
 * (hero-split, hero-media) surchargent via leurs `!important`. */
.wp-block-group.alignfull > :where(:not(.alignfull):not(.alignwide):not(.wp-block-columns)) {
    max-width: var(--wp--style--global--content-size);
    margin-left: auto;
    margin-right: auto;
}

.wp-block-group.alignfull > :where(.alignwide, .wp-block-columns) {
    max-width: var(--wp--style--global--wide-size);
    margin-left: auto;
    margin-right: auto;
}

/* ---------------------------------------------------------------- *
 * Couleurs utilitaires
 * ---------------------------------------------------------------- */

.has-ink-background-color  { background-color: var(--wp--preset--color--ink) !important; }
.has-ink-2-background-color{ background-color: var(--wp--preset--color--ink-2) !important; }
.has-surface-background-color { background-color: var(--wp--preset--color--surface) !important; }
.has-base-background-color { background-color: var(--wp--preset--color--base) !important; }
.has-primary-background-color { background-color: var(--wp--preset--color--primary) !important; }
.has-background { }

.has-text-color { }
.has-primary-color { color: var(--wp--preset--color--primary) !important; }
.has-base-color    { color: var(--wp--preset--color--base) !important; }
.has-text-soft-color { color: var(--wp--preset--color--text-soft) !important; }
.has-ink-color     { color: var(--wp--preset--color--ink) !important; }

/* Tailles de police utilitaires */
.has-x-small-font-size    { font-size: var(--wp--preset--font-size--x-small) !important; }
.has-small-font-size      { font-size: var(--wp--preset--font-size--small) !important; }
.has-medium-font-size     { font-size: var(--wp--preset--font-size--medium) !important; }
.has-lede-font-size       { font-size: var(--wp--preset--font-size--lede) !important; }
.has-large-font-size      { font-size: var(--wp--preset--font-size--large) !important; }
.has-display-small-font-size { font-size: var(--wp--preset--font-size--display-small) !important; }
.has-x-large-font-size    { font-size: var(--wp--preset--font-size--x-large) !important; }
.has-xx-large-font-size   { font-size: var(--wp--preset--font-size--xx-large) !important; }

/* Familles de polices utilitaires */
.has-sans-font-family    { font-family: var(--wp--preset--font-family--sans) !important; }
.has-display-font-family { font-family: var(--wp--preset--font-family--display) !important; }
.has-mono-font-family    { font-family: var(--wp--preset--font-family--mono) !important; }

/* Alignement texte */
.has-text-align-center { text-align: center !important; }
.has-text-align-left   { text-align: left !important; }
.has-text-align-right  { text-align: right !important; }

/* Listes */
.wp-block-list {
    list-style: disc;
    padding-left: var(--wp--preset--spacing--50);
}

/* ---------------------------------------------------------------- *
 * Boutons
 * ---------------------------------------------------------------- */

.wp-block-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--30);
    align-items: center;
}

.wp-block-buttons.is-content-justification-center {
    justify-content: center;
}

.wp-block-button__link,
.wp-element-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--wp--custom--tap-target);
    padding: 0.625rem 1.25rem;
    font-family: var(--wp--preset--font-family--sans);
    font-size: var(--wp--preset--font-size--medium);
    font-weight: 500;
    line-height: 1.5;
    text-decoration: none;
    color: var(--wp--preset--color--base);
    background-color: var(--wp--preset--color--primary);
    border: 1px solid var(--wp--preset--color--primary);
    border-radius: var(--wp--custom--radius);
    cursor: pointer;
    transition:
        background-color var(--wp--custom--transition),
        border-color var(--wp--custom--transition),
        color var(--wp--custom--transition);
    box-shadow: none;
}

.wp-block-button__link:hover,
.wp-element-button:hover {
    background-color: var(--wp--preset--color--primary-dark);
    border-color: var(--wp--preset--color--primary-dark);
    color: var(--wp--preset--color--base);
}

/* Bouton outline */
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background) {
    background-color: var(--wp--preset--color--base);
    border: 1px solid var(--wp--preset--color--border);
    color: var(--wp--preset--color--primary);
}

.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):hover {
    border-color: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--primary-dark);
    background-color: var(--wp--preset--color--base);
}

/* Sur encre, outline devient fantôme */
.is-ink .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background) {
    background-color: transparent;
    border-color: var(--wp--preset--color--ink-line);
    color: var(--wp--preset--color--base);
}

.is-ink .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):hover {
    border-color: var(--wp--preset--color--primary-lift);
    color: var(--wp--preset--color--primary-lift);
    background-color: transparent;
}

/* ---------------------------------------------------------------- *
 * Accessibilité — anneau de focus clavier
 * ---------------------------------------------------------------- */

:where(a, button, summary, [tabindex]:not([tabindex="-1"])):focus-visible,
:where(input, select, textarea):focus-visible {
    outline: 2px solid var(--wp--preset--color--primary);
    outline-offset: 2px;
    border-radius: var(--wp--custom--radius);
}

.is-ink :where(a, button, summary, [tabindex]:not([tabindex="-1"])):focus-visible,
.is-ink :where(input, select, textarea):focus-visible {
    outline-color: var(--wp--preset--color--primary-lift);
}

/* ---------------------------------------------------------------- *
 * Mouvement réduit
 * ---------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}

/* ---------------------------------------------------------------- *
 * Sections encre
 * ---------------------------------------------------------------- */

.is-ink {
    color: var(--wp--custom--color--on-ink);
}

.is-ink :is(h1, h2, h3, h4, h5, h6) {
    color: var(--wp--preset--color--base);
}

.is-ink a:where(:not(.wp-element-button)) {
    color: var(--wp--custom--color--on-ink);
    text-underline-offset: 3px;
}

.is-ink a:where(:not(.wp-element-button)):hover {
    color: var(--wp--preset--color--base);
}

/* ---------------------------------------------------------------- *
 * Eyebrow — libellé mono, majuscules
 * ---------------------------------------------------------------- */

.eyebrow {
    font-family: var(--wp--preset--font-family--mono);
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 500;
    letter-spacing: 0.12em;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--wp--preset--color--accent-deep);
}

.is-ink .eyebrow {
    color: var(--wp--preset--color--accent);
}

/* ---------------------------------------------------------------- *
 * Cartes — bordure fine, aucune ombre, filet d'accent au survol
 * ---------------------------------------------------------------- */

.card {
    position: relative;
    background-color: var(--wp--preset--color--base);
    border: 1px solid var(--wp--preset--color--border);
    border-radius: var(--wp--custom--radius);
    padding: var(--wp--preset--spacing--40);
    transition: border-color var(--wp--custom--transition);
}

.card::before {
    content: "";
    position: absolute;
    inset: -1px -1px auto -1px;
    height: 2px;
    background-color: var(--wp--preset--color--accent-deep);
    border-radius: var(--wp--custom--radius) var(--wp--custom--radius) 0 0;
    opacity: 0;
    transition: opacity var(--wp--custom--transition);
}

.card:hover {
    border-color: var(--wp--custom--color--border-strong);
}

.card:hover::before {
    opacity: 1;
}

.card:focus-within::before {
    opacity: 1;
}

.is-ink .card {
    background-color: var(--wp--preset--color--ink-2);
    border-color: var(--wp--preset--color--ink-line);
}

.is-ink .card::before {
    background-color: var(--wp--preset--color--accent);
}

/* ---------------------------------------------------------------- *
 * Utilitaires
 * ---------------------------------------------------------------- */

.measure {
    max-width: var(--wp--custom--measure);
}

.tabular {
    font-family: var(--wp--preset--font-family--mono);
    font-variant-numeric: tabular-nums;
}

.wp-block-button__link,
.wp-block-group,
.wp-block-column,
.card {
    box-shadow: none;
}

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

.site-logo-text {
    margin: 0;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.site-logo-text a {
    color: var(--wp--preset--color--text);
    text-decoration: none;
}

.is-ink .site-logo-text a {
    color: var(--wp--preset--color--base);
}

.site-nav .wp-block-navigation-item__content {
    display: inline-flex;
    align-items: center;
    min-height: var(--wp--custom--tap-target);
    color: var(--wp--preset--color--text-soft);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition:
        color var(--wp--custom--transition),
        border-color var(--wp--custom--transition);
}

.site-nav .wp-block-navigation-item__content:hover {
    color: var(--wp--preset--color--text);
    border-bottom-color: var(--wp--preset--color--accent-deep);
}

.site-nav .current-menu-item .wp-block-navigation-item__content {
    color: var(--wp--preset--color--text);
    border-bottom-color: var(--wp--preset--color--accent-deep);
}

.site-nav .wp-block-navigation-item__content[aria-current="page"] {
    color: var(--wp--preset--color--text);
    border-bottom-color: var(--wp--preset--color--accent-deep);
}

/* ---------------------------------------------------------------- *
 * Nav responsive — hamburger mobile
 * ---------------------------------------------------------------- */

.site-head {
    position: relative;
}

.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: var(--wp--custom--tap-target);
    height: var(--wp--custom--tap-target);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--wp--preset--color--text);
}

@media (max-width: 768px) {
    .nav-desktop {
        display: none;
    }
    .nav-toggle {
        display: flex;
    }
    .nav-mobile-open .nav-desktop {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--wp--preset--color--base);
        border-top: 1px solid var(--wp--preset--color--border);
        padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
        z-index: 100;
        gap: var(--wp--preset--spacing--20);
    }
}

/* ---------------------------------------------------------------- *
 * Pied de page
 * ---------------------------------------------------------------- */

.site-foot {
    position: relative;
    background: linear-gradient(180deg, var(--wp--preset--color--ink) 0%, var(--wp--preset--color--ink-2) 100%);
    padding-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50);
    padding-inline: var(--wp--preset--spacing--50);
    margin-top: var(--wp--preset--spacing--80);
}

/* Filet cyan diffus en haut du footer */
.site-foot::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--wp--preset--color--accent) 50%, transparent 100%);
    opacity: 0.55;
}

.is-ink .foot-label {
    font-family: var(--wp--preset--font-family--mono);
    font-weight: 500;
    letter-spacing: 0.12em;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--wp--preset--color--base);
    font-size: var(--wp--preset--font-size--x-small);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: var(--wp--preset--spacing--30);
}

.is-ink .foot-label::before {
    content: "";
    width: 14px;
    height: 2px;
    border-radius: 2px;
    background: var(--wp--preset--color--accent);
    flex: 0 0 auto;
}

.site-foot .wp-block-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.site-foot .wp-block-list li {
    margin-bottom: var(--wp--preset--spacing--20);
}

.foot-legal {
    color: var(--wp--custom--color--on-ink-soft);
}

@media (max-width: 781px) {
    .site-foot .wp-block-list li {
        margin-bottom: var(--wp--preset--spacing--30);
    }

    .site-foot .wp-block-list a {
        display: inline-flex;
        align-items: center;
        min-height: var(--wp--custom--tap-target);
        padding: 0.25rem 0;
    }

    .foot-legal {
        flex-direction: column;
        gap: var(--wp--preset--spacing--20);
        align-items: flex-start;
    }
}

/* ---------------------------------------------------------------- *
 * Bande technique hero (.stack)
 * ---------------------------------------------------------------- */

.stack {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
    margin-top: var(--wp--preset--spacing--60);
    padding-top: var(--wp--preset--spacing--30);
    padding-left: 0;
    border-top: 1px solid var(--wp--preset--color--ink-line);
    list-style: none;
    color: var(--wp--custom--color--on-ink-soft);
}

.stack > li {
    margin: 0;
    list-style: none;
}

.stack > li::before {
    content: "\2014\00a0";
    color: var(--wp--preset--color--accent);
}

/* ---------------------------------------------------------------- *
 * Grille de 4 — palier intermédiaire
 * ---------------------------------------------------------------- */

@media (min-width: 601px) and (max-width: 1000px) {
    .grid-4.wp-block-columns:not(.is-not-stacked-on-mobile) {
        flex-wrap: wrap !important;
    }

    .grid-4.wp-block-columns > .wp-block-column {
        box-sizing: border-box;
        flex-basis: calc(50% - var(--wp--preset--spacing--30)) !important;
        flex-grow: 1;
    }
}

/* ---------------------------------------------------------------- *
 * Alignement constrained > .measure
 * ---------------------------------------------------------------- */

.is-layout-constrained > .measure {
    margin-left: max(0px, (100% - var(--wp--style--global--content-size)) / 2) !important;
    margin-right: auto !important;
}

/* ---------------------------------------------------------------- *
 * Icônes de carte (.ci-ico)
 * ---------------------------------------------------------------- */

.ci-ico {
    display: block;
    width: 30px;
    height: 30px;
    margin-bottom: var(--wp--preset--spacing--30);
    color: var(--wp--preset--color--accent-deep);
    flex: none;
}

.is-ink .ci-ico {
    color: var(--wp--preset--color--accent);
}

.section-head {
    display: flex;
    align-items: center;
    gap: var(--wp--preset--spacing--30);
}

.section-head .ci-ico {
    margin-bottom: 0;
}

.section-head > h2 {
    margin: 0;
}

/* Tuile sécurité */
.ci-ico--sec {
    width: 40px !important;
    height: 40px !important;
    padding: 8px;
    box-sizing: border-box;
    border-radius: var(--wp--custom--radius);
    color: var(--wp--preset--color--accent);
    border: 1px solid var(--wp--preset--color--ink-line);
    background-image:
        linear-gradient(
            color-mix(in srgb, var(--wp--preset--color--ink) 72%, transparent),
            color-mix(in srgb, var(--wp--preset--color--ink) 82%, transparent)
        ),
        url("/static/img/security-code.jpg");
    background-size: cover;
    background-position: center;
}

/* ---------------------------------------------------------------- *
 * Logo image
 * La hauteur porte sur l'<img>, pas sur la <figure>.
 * ---------------------------------------------------------------- */

.site-logo-img {
    margin: 0;
    line-height: 0;
}

.site-logo-img img {
    display: block;
    height: 28px;
    width: auto;
    max-width: none;
}

.site-foot .site-logo-img img {
    height: 30px;
}

/* ---------------------------------------------------------------- *
 * Hero split (accueil)
 * ---------------------------------------------------------------- */

.hero-split {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-top: 2px solid var(--wp--preset--color--accent);
    padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50);
}

/* Le hero-split est toujours sur fond encre : texte clair. Le markup maquette n'a
 * pas la classe .is-ink (qui, ailleurs, met les titres en blanc) — on l'applique ici. */
.hero-split :is(h1, h2, h3, h4, h5, h6) {
    color: var(--wp--preset--color--base);
}

.hero-split p:not(.eyebrow) {
    color: var(--wp--custom--color--on-ink);
}

.hero-split .eyebrow {
    color: var(--wp--preset--color--accent);
}

.hero-split::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(
            105deg,
            var(--wp--preset--color--ink) 0%,
            color-mix(in srgb, var(--wp--preset--color--ink) 94%, transparent) 30%,
            color-mix(in srgb, var(--wp--preset--color--ink) 74%, transparent) 62%,
            color-mix(in srgb, var(--wp--preset--color--ink) 55%, transparent) 100%
        ),
        url("/static/img/pattern-triangles.png");
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
}

/* Le contenu du hero est enveloppé dans .hero-split__inner (markup maquette) :
 * contraint à wide-size et centré, puis grillé en 2 colonnes ≥1001px. Sans ça,
 * sur grand écran (1920) le texte reste collé à gauche et le visuel flotte. */
.hero-split__inner {
    max-width: var(--wp--style--global--wide-size);
    margin-inline: auto;
}

.hero-visual {
    margin-top: var(--wp--preset--spacing--60);
}

.hero-figure {
    width: 100%;
    max-width: 360px;
    height: auto;
    color: var(--wp--custom--color--on-ink);
}

@media (min-width: 1001px) {
    .hero-split__inner {
        display: grid;
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.85fr);
        gap: var(--wp--preset--spacing--70);
        align-items: center;
    }

    .hero-visual {
        margin-top: 0;
        justify-self: end;
    }

    .hero-figure {
        max-width: 340px;
    }
}

@media (max-width: 700px) {
    .hero-visual {
        display: none;
    }
}

/* ---------------------------------------------------------------- *
 * Hero visual — fenêtre navigateur stylisée (illustration produit)
 * ---------------------------------------------------------------- */

.hero-visual {
    position: relative;
}

.mockup-browser {
    width: 100%;
    max-width: 440px;
    background: var(--wp--preset--color--ink-2);
    border: 1px solid var(--wp--preset--color--ink-line);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 165, 205, 0.12);
}

.mockup-browser__bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: color-mix(in srgb, var(--wp--preset--color--ink) 55%, var(--wp--preset--color--ink-2));
    border-bottom: 1px solid var(--wp--preset--color--ink-line);
}

.mockup-browser__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--wp--preset--color--ink-line);
}

.mockup-browser__url {
    margin-left: 10px;
    flex: 1;
    background: var(--wp--preset--color--ink);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 11px;
    color: var(--wp--custom--color--on-ink-soft);
    font-family: var(--wp--preset--font-family--sans);
}

.mockup-browser__screen {
    display: grid;
    gap: 14px;
    padding: 16px;
}

.mk-hero {
    display: grid;
    gap: 8px;
    padding: 18px;
    border-radius: 8px;
    border: 1px solid var(--wp--preset--color--ink-line);
    border-top: 2px solid var(--wp--preset--color--accent);
    background: linear-gradient(135deg, var(--wp--preset--color--ink), color-mix(in srgb, var(--wp--preset--color--ink) 82%, var(--wp--preset--color--accent)));
}

.mk-eyebrow { width: 68px; height: 6px; border-radius: 3px; background: var(--wp--preset--color--accent); }
.mk-title { width: 90%; height: 12px; border-radius: 3px; background: rgba(255, 255, 255, 0.88); }
.mk-title--short { width: 58%; }
.mk-btn { margin-top: 6px; width: 96px; height: 22px; border-radius: 5px; background: var(--wp--preset--color--primary); }

.mk-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mk-card { display: grid; gap: 6px; padding: 12px; border-radius: 6px; background: var(--wp--preset--color--base); }
.mk-ico { width: 20px; height: 20px; border-radius: 5px; background: color-mix(in srgb, var(--wp--preset--color--accent) 16%, transparent); border: 1px solid var(--wp--preset--color--accent); }
.mk-line { height: 6px; border-radius: 3px; background: var(--wp--preset--color--border); }
.mk-line--sm { width: 60%; }

.mockup-glow {
    position: absolute;
    inset: -25% -10% -25% 5%;
    z-index: -1;
    background: radial-gradient(circle at 65% 45%, rgba(0, 165, 205, 0.22), transparent 60%);
    filter: blur(24px);
}

@media (prefers-reduced-motion: no-preference) {
    .mockup-browser {
        animation: mk-float 6s ease-in-out infinite;
    }

    @keyframes mk-float {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-10px); }
    }
}

/* ---------------------------------------------------------------- *
 * Hero media (pages internes)
 * ---------------------------------------------------------------- */

.hero-media {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-color: var(--wp--preset--color--ink) !important;
    border-top: 2px solid var(--wp--preset--color--accent);
}

.hero-media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--wp--preset--color--ink) 72%, transparent) 0%,
            color-mix(in srgb, var(--wp--preset--color--ink) 88%, transparent) 100%
        ),
        var(--hero-img);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hero-media :where(h1, h2) {
    color: var(--wp--preset--color--base) !important;
}

.hero-media .eyebrow {
    color: var(--wp--preset--color--accent) !important;
}

.hero-media p:not(.eyebrow) {
    color: var(--wp--custom--color--on-ink) !important;
}

.hero-media--wordpress   { --hero-img: url("/static/img/wordpress-site.jpg"); }
.hero-media--prestashop  { --hero-img: url("/static/img/shopping-bags.jpg"); }
.hero-media--infogerance { --hero-img: url("/static/img/server-room.jpg"); }
.hero-media--apropos     { --hero-img: url("/static/img/team-work.jpg"); }
.hero-media--contact     { --hero-img: url("/static/img/contact-phone.jpg"); }

/* ---------------------------------------------------------------- *
 * Section Nos offres en bande encre (.offers-ink)
 * ---------------------------------------------------------------- */

.offers-ink {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-color: var(--wp--preset--color--ink) !important;
    border-top: 2px solid var(--wp--preset--color--accent);
}

.offers-ink::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(
            color-mix(in srgb, var(--wp--preset--color--ink) 82%, transparent),
            color-mix(in srgb, var(--wp--preset--color--ink) 90%, transparent)
        ),
        url("/static/img/pattern-triangles.png");
    background-size: cover;
    background-position: center;
}

.offers-ink .eyebrow {
    color: var(--wp--preset--color--accent) !important;
}

.offers-ink > h2 {
    color: var(--wp--preset--color--base) !important;
}

.offers-ink .card {
    background-color: var(--wp--preset--color--ink-2);
    border: 1px solid var(--wp--preset--color--ink-line);
    border-radius: var(--wp--custom--radius);
    padding: var(--wp--preset--spacing--40);
}

.offers-ink .card h3 {
    color: var(--wp--preset--color--base) !important;
}

.offers-ink .card p.has-text-soft-color {
    color: var(--wp--custom--color--on-ink) !important;
}

.offers-ink .card .ci-ico {
    color: var(--wp--preset--color--accent);
}

.offers-ink .price-amount {
    color: var(--wp--preset--color--primary-lift) !important;
}

.offers-ink .price-note {
    color: var(--wp--custom--color--on-ink-soft) !important;
}

.offers-ink .card.is-popular {
    border-color: var(--wp--preset--color--accent);
    box-shadow: inset 0 0 0 1px var(--wp--preset--color--accent);
}

.offers-ink + .is-ink {
    border-top: 1px solid var(--wp--preset--color--ink-line);
}

/* ---------------------------------------------------------------- *
 * Prix
 * ---------------------------------------------------------------- */

.price-line {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5ch;
}

.price-amount {
    font-family: var(--wp--preset--font-family--mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--wp--preset--font-size--large);
    font-weight: 600;
    color: var(--wp--preset--color--primary);
    letter-spacing: -0.01em;
}

.price-note {
    font-size: var(--wp--preset--font-size--x-small);
    color: var(--wp--preset--color--text-soft);
}

.card.is-popular {
    border-color: var(--wp--custom--color--border-strong);
}

.card.is-popular::before {
    opacity: 1;
}

.badge-popular {
    display: inline-block;
    margin-bottom: var(--wp--preset--spacing--20);
    padding: 0.15rem 0.6rem;
    font-family: var(--wp--preset--font-family--mono);
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wp--preset--color--base);
    background-color: var(--wp--preset--color--accent-deep);
    border-radius: 999px;
}

.contact-cols {
    align-items: flex-start !important;
}

/* ---------------------------------------------------------------- *
 * Marqueur de liste accentué
 * ---------------------------------------------------------------- */

main .wp-block-list:not(.stack) > li::marker {
    color: var(--wp--preset--color--accent-deep);
}

/* ---------------------------------------------------------------- *
 * Responsive mobile — colonnes
 * ---------------------------------------------------------------- */

@media (max-width: 599px) {
    .wp-block-columns {
        flex-direction: column;
    }
    .wp-block-column {
        flex-basis: 100% !important;
        max-width: 100% !important;
    }
}

/* ================================================================ *
 * === COMPOSANTS V3 — transposition maquette → Kommoon          === *
 * === Tokens : --wp--preset--color--* / --wp--custom--* / etc.  === *
 * ================================================================ */

/* ---------------------------------------------------------------- *
 * En-tête v3 — architecture sémantique
 * ---------------------------------------------------------------- */

.site-head {
    position: sticky;
    top: 0;
    z-index: 200;
    background-color: var(--wp--preset--color--base);
    border-bottom: 1px solid var(--wp--preset--color--border);
}

.site-head__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wp--preset--spacing--50);
    max-width: var(--wp--style--global--wide-size);
    margin: 0 auto;
    padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--50);
}

@media (max-width: 768px) {
    .site-head__inner {
        padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
    }
}

.site-logo {
    display: inline-flex;
    line-height: 0;
    text-decoration: none;
    flex: none;
}

.site-logo img {
    display: block;
    height: 28px;
    width: auto;
    max-width: none;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: var(--wp--preset--spacing--40);
}

/* ---------------------------------------------------------------- *
 * Hamburger — barre de nav mobile
 * ---------------------------------------------------------------- */

.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: var(--wp--custom--tap-target);
    height: var(--wp--custom--tap-target);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--wp--preset--color--text);
    padding: 0;
    order: 3;
    flex: none;
}

.nav-toggle__bar {
    display: block;
    width: 22px;
    height: 2px;
    background-color: currentColor;
    border-radius: 1px;
    transition:
        transform 200ms ease,
        opacity 200ms ease;
    transform-origin: center;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ---------------------------------------------------------------- *
 * Nav list + items
 * ---------------------------------------------------------------- */

.site-nav__list {
    display: flex;
    align-items: center;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-nav__item {
    position: relative;
}

.site-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 0.75rem;
    min-height: var(--wp--custom--tap-target);
    font-size: var(--wp--preset--font-size--small);
    font-weight: 500;
    color: var(--wp--preset--color--text-soft);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition:
        color var(--wp--custom--transition),
        border-color var(--wp--custom--transition);
    white-space: nowrap;
}

.site-nav__link:hover {
    color: var(--wp--preset--color--text);
    border-bottom-color: var(--wp--preset--color--accent-deep);
}

.site-nav__link--active {
    color: var(--wp--preset--color--text);
    border-bottom-color: var(--wp--preset--color--accent-deep);
}

/* Chevron triangle */
.site-nav__chevron {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    margin-top: 1px;
    transition: transform var(--wp--custom--transition);
}

.site-nav__item--has-sub:hover .site-nav__chevron,
.site-nav__item--has-sub.is-open .site-nav__chevron {
    transform: rotate(180deg);
}

/* Sous-menus desktop */
.site-nav__sub {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 180px;
    list-style: none;
    margin: 0;
    padding: var(--wp--preset--spacing--20) 0;
    background-color: var(--wp--preset--color--base);
    border: 1px solid var(--wp--preset--color--border);
    border-top: 2px solid var(--wp--preset--color--accent-deep);
    border-radius: 0 0 var(--wp--custom--radius) var(--wp--custom--radius);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    z-index: 300;
}

.site-nav__item--has-sub:hover .site-nav__sub,
.site-nav__item--has-sub:focus-within .site-nav__sub {
    display: block;
}

.site-nav__sub a {
    display: block;
    padding: 0.5rem 1rem;
    color: var(--wp--preset--color--text-soft);
    text-decoration: none;
    font-size: var(--wp--preset--font-size--small);
    white-space: nowrap;
    transition:
        color var(--wp--custom--transition),
        background-color var(--wp--custom--transition);
}

.site-nav__sub a:hover,
.site-nav__sub a[aria-current="page"] {
    color: var(--wp--preset--color--text);
    background-color: var(--wp--preset--color--surface);
}

/* Nav mobile */
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
    .nav-toggle {
        display: flex;
    }

    .site-nav__list {
        display: none;
        position: fixed;
        top: 61px;
        left: 0;
        right: 0;
        bottom: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        background-color: var(--wp--preset--color--base);
        border-top: 1px solid var(--wp--preset--color--border);
        padding: var(--wp--preset--spacing--30) 0 var(--wp--preset--spacing--60);
        overflow-y: auto;
        z-index: 150;
        animation: slideDown 200ms ease;
    }

    .site-nav__list.is-open {
        display: flex;
    }

    .site-nav__item {
        width: 100%;
    }

    .site-nav__link {
        padding: 0 var(--wp--preset--spacing--50);
        border-bottom: none;
        width: 100%;
        font-size: var(--wp--preset--font-size--medium);
        min-height: 48px;
    }

    .site-nav__link--active {
        border-bottom: none;
        color: var(--wp--preset--color--accent-deep);
    }

    .site-nav__sub {
        position: static;
        display: none;
        box-shadow: none;
        border: none;
        border-top: 1px solid var(--wp--preset--color--border);
        border-radius: 0;
        background-color: var(--wp--preset--color--surface);
        padding: var(--wp--preset--spacing--20) 0;
        min-width: 0;
    }

    .site-nav__item--has-sub.is-open .site-nav__sub {
        display: block;
    }

    .site-nav__sub a {
        padding-left: calc(var(--wp--preset--spacing--50) + 1rem);
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .site-nav .btn {
        display: none;
    }
}

/* ---------------------------------------------------------------- *
 * Boutons — nouvelle API sémantique v3
 * ---------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    min-height: var(--wp--custom--tap-target);
    padding: 0.625rem 1.25rem;
    font-family: var(--wp--preset--font-family--sans);
    font-size: var(--wp--preset--font-size--medium);
    font-weight: 500;
    line-height: 1.5;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--wp--custom--radius);
    cursor: pointer;
    transition:
        background-color var(--wp--custom--transition),
        border-color var(--wp--custom--transition),
        color var(--wp--custom--transition);
    white-space: nowrap;
}

.btn--primary {
    color: var(--wp--preset--color--base);
    background-color: var(--wp--preset--color--primary);
    border-color: var(--wp--preset--color--primary);
}

.btn--primary:hover {
    color: var(--wp--preset--color--base);
    background-color: var(--wp--preset--color--primary-dark);
    border-color: var(--wp--preset--color--primary-dark);
}

.btn--ghost {
    color: var(--wp--preset--color--base);
    background-color: transparent;
    border-color: var(--wp--preset--color--ink-line);
}

.btn--ghost:hover {
    color: var(--wp--preset--color--base);
    border-color: var(--wp--preset--color--primary-lift);
}

.btn--outline {
    color: var(--wp--preset--color--primary);
    background-color: transparent;
    border-color: var(--wp--preset--color--border);
}

.btn--outline:hover {
    color: var(--wp--preset--color--primary-dark);
    border-color: var(--wp--preset--color--primary);
}

/* ---------------------------------------------------------------- *
 * Hero media — inner container + nouvelles variantes v3
 * ---------------------------------------------------------------- */

.hero-media__inner {
    max-width: var(--wp--style--global--wide-size);
    margin: 0 auto;
    padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50);
}

@media (max-width: 599px) {
    .hero-media__inner {
        padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--30);
    }
}

.hero-media--services           { --hero-img: url("/static/img/team-work.jpg"); }
.hero-media--offres             { --hero-img: url("/static/img/security-code.jpg"); }
.hero-media--sur-mesure         { --hero-img: url("/static/img/security-code.jpg"); }
.hero-media--ig-postes          { --hero-img: url("/static/img/team-work.jpg"); }
.hero-media--ig-serveurs        { --hero-img: url("/static/img/server-room.jpg"); }
.hero-media--ig-virtualisation  { --hero-img: url("/static/img/server-room.jpg"); }
.hero-media--ig-reseau          { --hero-img: url("/static/img/server-room.jpg"); }
.hero-media--ig-stockage        { --hero-img: url("/static/img/server-room.jpg"); }
.hero-media--ig-web             { --hero-img: url("/static/img/wordpress-site.jpg"); }
.hero-media--legal              { --hero-img: url("/static/img/security-code.jpg"); }

/* ---------------------------------------------------------------- *
 * Sections v3
 * ---------------------------------------------------------------- */

.section {
    padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50);
}

.section--surface {
    background-color: var(--wp--preset--color--surface);
}

.section__inner {
    max-width: var(--wp--style--global--wide-size);
    margin: 0 auto;
}

.section__inner--narrow {
    max-width: var(--wp--style--global--content-size);
    margin: 0 auto;
}

.section__header {
    text-align: center;
    margin-bottom: var(--wp--preset--spacing--60);
    max-width: 65ch;
    margin-left: auto;
    margin-right: auto;
}

.section__header p {
    color: var(--wp--preset--color--text-soft);
}

/* CTA dark banner */
.cta-section {
    padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50);
    text-align: center;
    border-top: 2px solid var(--wp--preset--color--accent);
}

.cta-section .section__inner {
    max-width: 55ch;
}

.cta-section.is-ink h2 {
    color: var(--wp--preset--color--base);
}

.cta-section.is-ink p {
    color: var(--wp--custom--color--on-ink);
}

@media (max-width: 599px) {
    .section {
        padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--30);
    }
    .cta-section {
        padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--30);
    }
}

/* ---------------------------------------------------------------- *
 * Grilles sémantiques v3
 * ---------------------------------------------------------------- */

.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--wp--preset--spacing--40);
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--wp--preset--spacing--40);
}

/* grid-4 : layout de base (le media query WP compat existant reste intact) */
.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--wp--preset--spacing--40);
}

@media (max-width: 900px) {
    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 599px) {
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------------- *
 * Tech tags & cloud
 * ---------------------------------------------------------------- */

.tech-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.65rem;
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 600;
    color: var(--wp--preset--color--accent-deep);
    background-color: var(--wp--preset--color--surface);
    border: 1px solid var(--wp--preset--color--border);
    border-radius: var(--wp--custom--radius);
}

.tech-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/* ---------------------------------------------------------------- *
 * Cartes — carte lien cliquable (card--link)
 * ---------------------------------------------------------------- */

.card--link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition:
        border-color var(--wp--custom--transition),
        transform var(--wp--custom--transition);
}

.card--link:hover {
    transform: translateY(-2px);
    border-color: var(--wp--custom--color--border-strong);
}

.card--link:hover::before {
    opacity: 1;
}

.card__more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: var(--wp--preset--spacing--30);
    font-size: var(--wp--preset--font-size--small);
    font-weight: 600;
    color: var(--wp--preset--color--accent-deep);
    text-decoration: none;
}

.card__more::after {
    content: "→";
}

/* ---------------------------------------------------------------- *
 * Animations scroll-reveal
 * ---------------------------------------------------------------- */

@keyframes fadeSlideIn {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity 500ms ease,
        transform 500ms ease;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 100ms; }
.reveal-delay-2 { transition-delay: 200ms; }
.reveal-delay-3 { transition-delay: 300ms; }
.reveal-delay-4 { transition-delay: 400ms; }

@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .reveal-delay-1,
    .reveal-delay-2,
    .reveal-delay-3,
    .reveal-delay-4 {
        transition-delay: 0ms !important;
    }
}

/* ---------------------------------------------------------------- *
 * Fancy list — tirets accentués
 * ---------------------------------------------------------------- */

.fancy-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--20);
}

.fancy-list li {
    display: flex;
    gap: var(--wp--preset--spacing--30);
    align-items: flex-start;
    font-size: var(--wp--preset--font-size--small);
    color: var(--wp--preset--color--text-soft);
    line-height: 1.55;
}

.fancy-list li::before {
    content: "—";
    color: var(--wp--preset--color--accent-deep);
    flex: none;
    line-height: 1.55;
    font-weight: 600;
}

.is-ink .fancy-list li {
    color: var(--wp--custom--color--on-ink);
}

.is-ink .fancy-list li::before {
    color: var(--wp--preset--color--accent);
}

/* ---------------------------------------------------------------- *
 * Page tag (étiquette catégorie dans le hero)
 * ---------------------------------------------------------------- */

.page-tag {
    display: inline-flex;
    align-items: center;
    margin-bottom: var(--wp--preset--spacing--20);
    padding: 0.15rem 0.6rem;
    font-family: var(--wp--preset--font-family--mono);
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wp--preset--color--accent);
    background-color: rgba(0, 165, 205, 0.15);
    border: 1px solid rgba(0, 165, 205, 0.3);
    border-radius: 999px;
}

/* ---------------------------------------------------------------- *
 * Utilitaires v3
 * ---------------------------------------------------------------- */

.text-soft   { color: var(--wp--preset--color--text-soft); }
.text-sm     { font-size: var(--wp--preset--font-size--small); }
.text-xs     { font-size: var(--wp--preset--font-size--x-small); }
.flex        { display: flex; flex-wrap: wrap; }
.flex-center { display: flex; align-items: center; }
.gap-2       { gap: var(--wp--preset--spacing--30); }
.gap-3       { gap: var(--wp--preset--spacing--40); }
.mt-2        { margin-top: var(--wp--preset--spacing--30) !important; }
.mt-3        { margin-top: var(--wp--preset--spacing--40) !important; }
.mt-4        { margin-top: var(--wp--preset--spacing--50) !important; }
.mb-2        { margin-bottom: var(--wp--preset--spacing--30) !important; }
.mb-3        { margin-bottom: var(--wp--preset--spacing--40) !important; }

/* ---------------------------------------------------------------- *
 * Formulaire v3 — classes sémantiques
 * ---------------------------------------------------------------- */

.form-group {
    margin-bottom: var(--wp--preset--spacing--40);
}

.form-group label {
    display: block;
    font-size: var(--wp--preset--font-size--small);
    font-weight: 600;
    color: var(--wp--preset--color--text);
    margin-bottom: var(--wp--preset--spacing--20);
}

.form-control {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-height: var(--wp--custom--tap-target);
    padding: 0.625rem 0.875rem;
    font-family: inherit;
    font-size: var(--wp--preset--font-size--medium);
    line-height: 1.5;
    color: var(--wp--preset--color--text);
    background-color: var(--wp--preset--color--base);
    border: 1px solid var(--wp--custom--color--border-strong);
    border-radius: var(--wp--custom--radius);
    transition:
        border-color var(--wp--custom--transition),
        box-shadow var(--wp--custom--transition);
    -webkit-appearance: none;
    appearance: none;
}

.form-control:hover {
    border-color: var(--wp--preset--color--text-soft);
}

.form-control:focus {
    outline: 2px solid var(--wp--preset--color--primary);
    outline-offset: 2px;
    border-color: var(--wp--preset--color--primary);
}

.form-control::placeholder {
    color: var(--wp--preset--color--text-soft);
}

textarea.form-control {
    min-height: 9.5rem;
    resize: vertical;
}

select.form-control {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2355606e' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.875rem center;
    padding-right: 2.5rem;
    cursor: pointer;
}

/* ---------------------------------------------------------------- *
 * Pied de page v3 — grille sémantique
 * ---------------------------------------------------------------- */

.site-foot__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--wp--preset--spacing--50);
    max-width: var(--wp--style--global--wide-size);
    margin: 0 auto;
}

.foot-logo {
    margin-bottom: var(--wp--preset--spacing--30);
    line-height: 0;
}

.foot-logo a { text-decoration: none; }

.foot-logo img {
    display: block;
    height: 30px;
    width: auto;
    max-width: none;
}

.foot-desc {
    font-size: var(--wp--preset--font-size--small);
    color: var(--wp--custom--color--on-ink-soft);
    margin: 0;
    max-width: 34ch;
    line-height: 1.6;
}

.foot-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.foot-links li {
    margin-bottom: var(--wp--preset--spacing--20);
}

.foot-links a {
    display: inline-flex;
    align-items: center;
    font-size: var(--wp--preset--font-size--small);
    color: var(--wp--custom--color--on-ink-soft);
    text-decoration: none;
    transition: color var(--wp--custom--transition), transform var(--wp--custom--transition);
}

.foot-links a:hover {
    color: var(--wp--preset--color--accent);
    transform: translateX(3px);
}

.site-foot__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--30);
    max-width: var(--wp--style--global--wide-size);
    margin: var(--wp--preset--spacing--60) auto 0;
    padding-top: var(--wp--preset--spacing--40);
    border-top: 1px solid var(--wp--preset--color--ink-line);
    font-size: var(--wp--preset--font-size--x-small);
    color: var(--wp--custom--color--on-ink-label);
}

.site-foot__bottom a {
    color: var(--wp--custom--color--on-ink-soft);
    text-decoration: none;
    transition: color var(--wp--custom--transition);
}

.site-foot__bottom a:hover {
    color: var(--wp--preset--color--accent);
}

@media (max-width: 900px) {
    .site-foot__grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 599px) {
    .site-foot__grid {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------------- *
 * Grille deux colonnes texte+carte (section méthode)
 * ---------------------------------------------------------------- */

.two-col-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--wp--preset--spacing--60);
    align-items: start;
}

@media (max-width: 768px) {
    .two-col-grid {
        grid-template-columns: 1fr;
    }
}

/* ================================================================
 * COMPOSANTS V3 — PARTIE 2 (hero-split inner, stats, service cards,
 *   cycle steps, svc-card, benefit items, hero animations)
 * ================================================================ */

/* ---------------------------------------------------------------- *
 * Hero split — wrapper interne avec grille 2 colonnes
 * ---------------------------------------------------------------- */

.hero-split__inner {
    max-width: var(--wp--style--global--wide-size);
    margin: 0 auto;
    padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--50);
    width: 100%;
}

@media (min-width: 1001px) {
    .hero-split__inner {
        display: grid;
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.85fr);
        gap: var(--wp--preset--spacing--70);
        align-items: center;
    }

    .hero-split__inner .hero-visual {
        margin-top: 0;
        justify-self: end;
    }
}

/* Animations d'entrée héro */
@keyframes fadeSlideIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.hero-anim-1 { animation: fadeSlideIn 400ms ease-out both; animation-delay: 100ms; }
.hero-anim-2 { animation: fadeSlideIn 400ms ease-out both; animation-delay: 220ms; }
.hero-anim-3 { animation: fadeSlideIn 400ms ease-out both; animation-delay: 340ms; }
.hero-anim-4 { animation: fadeSlideIn 400ms ease-out both; animation-delay: 460ms; }

@media (prefers-reduced-motion: reduce) {
    .hero-anim-1, .hero-anim-2, .hero-anim-3, .hero-anim-4 {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* ---------------------------------------------------------------- *
 * Stats grid (accueil — "Pourquoi creep-info")
 * ---------------------------------------------------------------- */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--wp--preset--spacing--30);
}

.stat-item {
    padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--20);
    border-left: 2px solid var(--wp--preset--color--accent-deep);
    background-color: var(--wp--preset--color--base);
}

.stat-num {
    font-family: var(--wp--preset--font-family--sans);
    font-size: clamp(1.1rem, 1.5vw, 1.5rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--wp--preset--color--heading);
}

.stat-label {
    margin-top: var(--wp--preset--spacing--10);
    font-size: 0.9375rem;
    color: var(--wp--preset--color--text-soft);
}

@media (max-width: 700px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------------------------------------------------------- *
 * Service card link (accueil — cartes services cliquables)
 * ---------------------------------------------------------------- */

.service-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.service-card-link .card {
    height: 100%;
}

.service-card-link .card h3 {
    color: var(--wp--preset--color--heading);
    transition: color var(--wp--custom--transition);
}

.service-card-link:hover .card h3 {
    color: var(--wp--preset--color--accent-deep);
}

.card-arrow {
    display: inline-flex;
    align-items: center;
    margin-top: var(--wp--preset--spacing--20);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--wp--preset--color--accent-deep);
    gap: 6px;
    transition: gap var(--wp--custom--transition);
}

.service-card-link:hover .card-arrow {
    gap: 10px;
}

/* ---------------------------------------------------------------- *
 * Svc-card (page services — grille 2 col avec cartes lien)
 * ---------------------------------------------------------------- */

.svc-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--wp--preset--spacing--30);
}

@media (max-width: 600px) {
    .svc-grid { grid-template-columns: 1fr; }
}

.svc-card {
    position: relative;
    background-color: var(--wp--preset--color--base);
    border: 1px solid var(--wp--preset--color--border);
    border-radius: var(--wp--custom--radius);
    padding: var(--wp--preset--spacing--40);
    transition: border-color var(--wp--custom--transition), transform var(--wp--custom--transition);
    text-decoration: none;
    display: block;
    color: inherit;
    overflow: hidden;
}

.svc-card::before {
    content: "";
    position: absolute;
    inset: -1px -1px auto -1px;
    height: 2px;
    background-color: var(--wp--preset--color--accent-deep);
    border-radius: var(--wp--custom--radius) var(--wp--custom--radius) 0 0;
    opacity: 0;
    transition: opacity var(--wp--custom--transition);
}

.svc-card:hover {
    border-color: var(--wp--preset--color--accent);
    transform: translateY(-2px);
}

.svc-card:hover::before {
    opacity: 1;
}

.svc-card h3 {
    color: var(--wp--preset--color--heading);
}

.svc-card__footer {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--wp--preset--spacing--20);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--wp--preset--color--accent-deep);
    transition: gap var(--wp--custom--transition);
}

.svc-card:hover .svc-card__footer {
    gap: 10px;
}

/* ---------------------------------------------------------------- *
 * Cycle steps (page services — animation révélation)
 * ---------------------------------------------------------------- */

.cycle-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--wp--preset--spacing--30);
    position: relative;
    margin-top: var(--wp--preset--spacing--50);
}

.cycle-steps::before {
    content: "";
    position: absolute;
    top: 28px;
    left: calc(12.5% + 1rem);
    right: calc(12.5% + 1rem);
    height: 2px;
    background: linear-gradient(90deg, var(--wp--preset--color--accent) 0%, var(--wp--preset--color--accent-deep) 100%);
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 800ms ease-out 300ms, opacity 200ms ease-out 300ms;
}

.cycle-steps.is-visible::before {
    opacity: 1;
    transform: scaleX(1);
}

.cycle-step {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 300ms ease-out, transform 300ms ease-out;
    text-align: center;
    padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--20);
}

.cycle-steps.is-visible .cycle-step:nth-child(1) { transition-delay: 100ms; opacity: 1; transform: none; }
.cycle-steps.is-visible .cycle-step:nth-child(2) { transition-delay: 250ms; opacity: 1; transform: none; }
.cycle-steps.is-visible .cycle-step:nth-child(3) { transition-delay: 400ms; opacity: 1; transform: none; }
.cycle-steps.is-visible .cycle-step:nth-child(4) { transition-delay: 550ms; opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .cycle-step { opacity: 1; transform: none; }
    .cycle-steps::before { opacity: 1; transform: scaleX(1); }
}

.cycle-step__num {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--wp--preset--color--accent);
    font-family: var(--wp--preset--font-family--sans);
    line-height: 1;
    margin-bottom: var(--wp--preset--spacing--20);
}

.cycle-step__label {
    font-weight: 600;
    font-size: 1rem;
    color: var(--wp--preset--color--heading);
    margin-bottom: var(--wp--preset--spacing--10);
}

.cycle-step__desc {
    font-size: 0.875rem;
    color: var(--wp--preset--color--text-soft);
}

@media (max-width: 700px) {
    .cycle-steps { grid-template-columns: repeat(2, 1fr); }
    .cycle-steps::before { display: none; }
}

/* ---------------------------------------------------------------- *
 * Benefit items (page services — avantages du cycle)
 * ---------------------------------------------------------------- */

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--wp--preset--spacing--30);
    margin-top: var(--wp--preset--spacing--40);
}

.benefit-item {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--10);
    padding: var(--wp--preset--spacing--30);
    border-left: 2px solid var(--wp--preset--color--accent-deep);
    background-color: var(--wp--preset--color--surface);
}

.benefit-item h4 {
    color: var(--wp--preset--color--heading);
    margin: 0;
    font-size: 1rem;
}

@media (max-width: 768px) {
    .benefits-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
    .benefits-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- *
 * Lede (paragraph intro grand format)
 * ---------------------------------------------------------------- */

.lede {
    font-size: clamp(1.0625rem, 1.063rem + ((1vw - 0.2rem) * 0.113), 1.125rem);
    max-width: 60ch;
    color: var(--wp--custom--color--on-ink);
}

/* ================================================================
 * Blog v3
 * Transposition tokens : --c-* / --sp-* → --wp--preset--* / --wp--custom--*
 * Seule exception : teintes accent rgba() conservées telles quelles.
 * ================================================================ */

/* ---------------------------------------------------------------- *
 * Grille d'articles — index blog
 * ---------------------------------------------------------------- */

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--wp--preset--spacing--50);
}

@media (max-width: 900px) {
    .blog-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .blog-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- *
 * Carte article (.post-card)
 * ---------------------------------------------------------------- */

.post-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--wp--preset--color--base);
    border: 1px solid var(--wp--preset--color--border);
    border-radius: var(--wp--custom--radius);
    padding: var(--wp--preset--spacing--50);
    transition:
        border-color var(--wp--custom--transition),
        transform var(--wp--custom--transition),
        box-shadow var(--wp--custom--transition);
}

.post-card:hover {
    border-color: var(--wp--preset--color--accent);
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(11, 18, 32, 0.08);
}

.post-card__cat {
    display: inline-flex;
    align-self: flex-start;
    font-family: var(--wp--preset--font-family--sans);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--wp--preset--color--accent-deep);
    background: rgba(0, 165, 205, 0.08);
    border-radius: 999px;
    padding: 0.25rem 0.7rem;
    margin-bottom: var(--wp--preset--spacing--40);
}

.post-card__title {
    font-size: 1.1875rem;
    line-height: 1.3;
    margin: 0 0 var(--wp--preset--spacing--30);
}

.post-card__title a {
    color: inherit;
    text-decoration: none;
}

.post-card__title a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.post-card__excerpt {
    font-size: 0.9375rem;
    color: var(--wp--preset--color--text-soft);
    line-height: 1.6;
    margin: 0 0 var(--wp--preset--spacing--40);
    flex: 1 1 auto;
}

.post-card__meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--wp--preset--color--text-soft);
}

.post-card__more {
    margin-top: var(--wp--preset--spacing--40);
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--wp--preset--color--accent-deep);
}

/* ---------------------------------------------------------------- *
 * Article mis en avant (.post-feature)
 * ---------------------------------------------------------------- */

.post-feature {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--wp--preset--spacing--60);
    align-items: center;
    background: linear-gradient(135deg, var(--wp--preset--color--ink) 0%, var(--wp--preset--color--ink-2) 100%);
    border-radius: var(--wp--custom--radius);
    padding: var(--wp--preset--spacing--70);
    margin-bottom: var(--wp--preset--spacing--60);
    position: relative;
    overflow: hidden;
}

@media (max-width: 780px) {
    .post-feature {
        grid-template-columns: 1fr;
        padding: var(--wp--preset--spacing--60);
    }
}

.post-feature__cat {
    display: inline-flex;
    font-family: var(--wp--preset--font-family--sans);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--wp--preset--color--accent);
    margin-bottom: var(--wp--preset--spacing--30);
}

.post-feature h2 {
    color: var(--wp--preset--color--base);
    font-size: 1.75rem;
    line-height: 1.2;
    margin: 0 0 var(--wp--preset--spacing--30);
}

.post-feature h2 a {
    color: inherit;
    text-decoration: none;
}

.post-feature p {
    color: var(--wp--custom--color--on-ink);
    line-height: 1.65;
    margin: 0 0 var(--wp--preset--spacing--40);
}

.post-feature__meta {
    font-size: 0.8125rem;
    color: var(--wp--custom--color--on-ink-soft);
}

.post-feature__visual {
    border-radius: calc(var(--wp--custom--radius) - 2px);
    border: 1px solid var(--wp--preset--color--ink-line);
    background: rgba(255, 255, 255, 0.02);
    padding: var(--wp--preset--spacing--50);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.pf-bar {
    height: 10px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
}

.pf-bar--accent {
    background: linear-gradient(90deg, var(--wp--preset--color--accent), transparent);
    width: 55%;
}

.pf-bar--sm { width: 70%; }
.pf-bar--xs { width: 40%; }

/* ---------------------------------------------------------------- *
 * En-tête d'article (.article-head)
 * ---------------------------------------------------------------- */

.article-head {
    text-align: left;
}

.article-head .eyebrow {
    color: var(--wp--preset--color--accent);
}

.article-head__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: var(--wp--preset--spacing--40);
    font-size: 0.875rem;
    color: var(--wp--custom--color--on-ink-soft);
}

.article-head__meta .dot {
    opacity: 0.5;
}

/* ---------------------------------------------------------------- *
 * Corps de l'article (.article-body)
 * ---------------------------------------------------------------- */

.article-body {
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--wp--preset--color--text);
}

.article-body > p {
    margin: 0 0 var(--wp--preset--spacing--50);
}

.article-body .lede {
    font-size: 1.25rem;
    line-height: 1.6;
    color: var(--wp--preset--color--text);
    font-weight: 500;
    max-width: none;
    margin-bottom: var(--wp--preset--spacing--60);
}

.article-body h2 {
    font-size: 1.5rem;
    line-height: 1.25;
    margin: var(--wp--preset--spacing--70) 0 var(--wp--preset--spacing--40);
    scroll-margin-top: 100px;
}

.article-body ul {
    margin: 0 0 var(--wp--preset--spacing--50);
    padding-left: 0;
    list-style: none;
}

.article-body ul li {
    position: relative;
    padding-left: 1.6rem;
    margin-bottom: 0.6rem;
}

.article-body ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--wp--preset--color--accent);
}

.article-body strong {
    color: var(--wp--preset--color--text);
    font-weight: 600;
}

/* ---------------------------------------------------------------- *
 * Encadré article (.article-aside)
 * ---------------------------------------------------------------- */

.article-aside {
    border-left: 3px solid var(--wp--preset--color--accent);
    background: rgba(0, 165, 205, 0.06);
    border-radius: 0 var(--wp--custom--radius) var(--wp--custom--radius) 0;
    padding: var(--wp--preset--spacing--50);
    margin: var(--wp--preset--spacing--60) 0;
    font-size: 1rem;
    line-height: 1.65;
}

.article-aside p {
    margin: 0;
}

.article-aside strong {
    display: block;
    margin-bottom: 0.4rem;
    color: var(--wp--preset--color--accent-deep);
}

/* ---------------------------------------------------------------- *
 * Lien retour (.article-back)
 * ---------------------------------------------------------------- */

.article-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--wp--preset--color--accent-deep);
    text-decoration: none;
    margin-bottom: var(--wp--preset--spacing--50);
}

.article-back:hover {
    text-decoration: underline;
}

/* ================================================================
 * Tunnel multi-étapes — classes propres au tunnel de formulaires
 * (contact, audit). Les composants de mise en page partagés avec
 * booking vivent dans tunnel.css (chargé avant ce fichier par base.html).
 * ================================================================ */

/* Fil d'Ariane (chemin de navigation contextuel) */
.tunnel-crumb {
    background-color: var(--wp--preset--color--surface);
    border-bottom: 1px solid var(--wp--preset--color--border);
    border-style: solid;
    padding: 0.5rem 2rem;
    margin-bottom: var(--wp--preset--spacing--40);
}

.tunnel-crumb__list {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: var(--wp--preset--font-size--x-small);
    color: var(--wp--preset--color--text-soft);
}

.tunnel-crumb__list a {
    color: var(--wp--preset--color--text-soft);
    text-decoration: none;
    transition: color var(--wp--custom--transition);
}

.tunnel-crumb__list a:hover {
    color: var(--wp--preset--color--primary);
}

/* Liste de liens cliquables (étape 1 : sélection de la demande) */
.slotlist {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.slot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid var(--wp--preset--color--border);
    border-style: solid;
    border-radius: var(--wp--custom--radius);
    padding: 0.55rem 0.75rem;
    font-size: var(--wp--preset--font-size--small);
    cursor: pointer;
    background-color: var(--wp--preset--color--base);
    text-decoration: none;
    color: var(--wp--preset--color--text);
    min-height: var(--wp--custom--tap-target);
    transition:
        border-color var(--wp--custom--transition),
        background-color var(--wp--custom--transition),
        color var(--wp--custom--transition);
}

.slot:hover {
    border-color: var(--wp--preset--color--primary);
    background-color: var(--wp--custom--color--primary-soft);
    color: var(--wp--preset--color--primary);
}

.slot:focus-visible {
    outline: 2px solid var(--wp--preset--color--primary);
    outline-offset: 2px;
}

.slot__go {
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 600;
    color: var(--wp--preset--color--primary);
    opacity: 0;
    transition: opacity var(--wp--custom--transition);
}

/* Flèche visible au survol ET au focus clavier (WCAG 2.4.7) */
.slot:hover .slot__go,
.slot:focus-visible .slot__go {
    opacity: 1;
}

/* Bouton fantôme (retour arrière dans le tunnel) */
.btn--ghost {
    background-color: transparent;
    border: 1px solid var(--wp--preset--color--border);
    border-style: solid;
    color: var(--wp--preset--color--text-soft);
    transition:
        border-color var(--wp--custom--transition),
        color var(--wp--custom--transition);
}

.btn--ghost:hover {
    border-color: var(--wp--preset--color--text-soft);
    color: var(--wp--preset--color--text);
}

.btn--ghost:focus-visible {
    outline: 2px solid var(--wp--preset--color--primary);
    outline-offset: 2px;
}

/* ── Mouvement réduit ── */
@media (prefers-reduced-motion: reduce) {
    .slot,
    .slot__go,
    .btn--ghost {
        transition: none;
    }
}