@font-face {
    font-family: 'Futura';
    src: url("/static/fonts/futura.ad9142795dc9.woff2") format('woff2'),
    url("/static/fonts/futura.91c4d1b9e6b5.woff") format('woff'),
    url("/static/fonts/futura.ee2f1bcf0e8c.ttf") format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Futura';
    src: url("/static/fonts/futura-bold.b5daf4a50227.woff2") format('woff2'),
    url("/static/fonts/futura-bold.7acb8aa5f1e3.woff") format('woff'),
    url("/static/fonts/futura-bold.43523bffeca0.ttf") format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Helvetica Neue';
    src: url("/static/fonts/helveticaneue.8dc42d2dd567.woff2") format('woff2'),
    url("/static/fonts/helveticaneue.bb63d9d36a27.woff") format('woff'),
    url("/static/fonts/helveticaneue.80815aebcbfb.ttf") format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Helvetica Neue';
    src: url("/static/fonts/helveticaneue-bold.938714c395ac.woff2") format('woff2'),
    url("/static/fonts/helveticaneue-bold.a03176dcd604.woff") format('woff'),
    url("/static/fonts/helveticaneue-bold.57349721d39f.ttf") format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Helvetica Neue';
    src: url("/static/fonts/helveticaneue-italic.bd5c8ecc2a14.woff2") format('woff2'),
    url("/static/fonts/helveticaneue-italic.f198db40a34a.woff") format('woff'),
    url("/static/fonts/helveticaneue-italic.0ab6f25ab1d7.ttf") format('truetype');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

/* ==========================================================================
   Design tokens (single source of truth - see DESIGN_GUIDELINES.md)
   Codified 2026-06-15. Values are byte-identical to the previous hardcoded
   palette, so substituting these vars is rendering-preserving.
   ========================================================================== */
:root {
    /* Brand surfaces */
    --color-bg: #F6F1EB;          /* warm beige, primary background */
    --color-surface: #FAFAF8;     /* off-white, cards/forms */
    --color-surface-2: #ffffff;   /* pure white */
    --color-border: #e3dacc;      /* darker beige, borders/accents */

    /* Ink & text */
    --color-ink: #000000;         /* headings / primary */
    --color-text-strong: #3A3934; /* subtitles */
    --color-text: #555555;        /* body */
    --color-text-muted: #888888;  /* dark-mode secondary text ONLY: 3.16:1 on the beige, fails AA */
    --color-text-soft: #6b6b6b;   /* secondary text on light surfaces: 4.75:1 on beige, AA */
    --color-ghost: #8f8578;       /* faint display type, AA for large text only */

    /* Dark-mode surfaces */
    --color-ink-1: #111111;
    --color-ink-2: #1a1a1a;
    --color-ink-3: #2a2a2a;

    /* Accents & status */
    --color-accent: #a50606;      /* brand red */
    --color-accent-dark: #8b0000; /* deep red (replaces stray `darkred`/#880000) */
    --color-danger: #c0392b;
    --color-success: #27ae60;

    /* Mac window chrome */
    --chrome-red: #ff5f57;
    --chrome-yellow: #febc2e;
    --chrome-green: #28c840;

    /* Radii */
    --radius: 15px;
    --radius-lg: 24px;
    --radius-sm: 12px;

    /* ----------------------------------------------------------------------
       Type. Three faces, four voices; nothing else is loaded, so nothing else
       may be named. Futura bold is display, Futura regular is the quiet
       display voice, Helvetica Neue is text (bold = emphasis, not a face), and
       Georgia is the one outside voice (a quoted client).
       League Spartan was named in 39 stacks and loaded in none: dropped.
       ---------------------------------------------------------------------- */
    --font-display: 'Futura', sans-serif;
    --font-body: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-quote: Georgia, serif;

    /* The type scale: eight steps for the whole site. A component takes the
       nearest token and never declares a literal font-size. Promoted from
       pages/veille.css (the expertise system) on 2026-08-17. */
    --fs-display-1: clamp(2.3rem, 5.2vw, 4.5rem);  /* the h1, once per page */
    --fs-display-2: clamp(1.7rem, 3vw, 2.5rem);    /* h2, pull quote, big numbers */
    --fs-display-3: clamp(1.2rem, 2vw, 1.6rem);    /* h3, signature line */
    --fs-emph: 1.2rem;                             /* inline emphasis numerals */
    --fs-lede: clamp(1.125rem, 1.45vw, 1.2rem);    /* hero lede (floor sits above body) */
    --fs-body: 1.0625rem;                          /* prose, table row heads */
    --fs-small: 0.95rem;                           /* table cells, buttons, links, roles */
    --fs-caption: 0.85rem;                         /* captions, notes, column heads */

    /* One poster step, for a full-bleed statement at most once per page (the
       home hero, the open-rate figure). Anything else takes display-1.
       The floor is 3.5rem, not 3rem: at 390px a 3rem floor dropped the mobile
       home hero to 48px, under the 64px it carried before the scale landed, and
       left the hero block half empty. Checked at 390px on both users. */
    --fs-poster: clamp(3.5rem, 6.7vw, 6rem);

    /* Tracking. Three values, all of them tight or neutral: Futura at display
       sizes needs negative tracking, text needs none, and the rare uppercase
       label needs air. Positive tracking on running text is not a house move. */
    --track-display: -0.02em;
    --track-text: 0;
    --track-caps: 0.08em;
}

/* ==========================================================================
   Title reveal (engine: static/publicapp/js/title-reveal.js)
   The per-character spans exist only while the script is animating them, and
   they are only hidden while the parent carries .is-revealing. The template
   always ships the title as real text, so this component cannot hide it:
   no JS, no split, no hidden characters.
   ========================================================================== */
.title-reveal {
    hyphens: none;
}

.title-reveal__word {
    white-space: nowrap;  /* a word never breaks between two of its letters */
}

.title-reveal.is-revealing .title-reveal__char {
    display: inline-block;
    opacity: 0;
    animation: title-reveal-char 150ms linear forwards;
}

@keyframes title-reveal-char {
    to {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .title-reveal.is-revealing .title-reveal__char {
        animation: none;
        opacity: 1;
    }
}

/* Bootstrap sizes .btn from its own variable; the house scale wins instead. */
.btn {
    font-size: var(--fs-small);
}

/* The language switcher in the nav. The translate glyph now marks it as a
   language control, so it no longer needs bold to stand out: it reads like the
   other nav items. */
.nav-link-lang {
    font-weight: normal;
}

/* The globe/translate glyph before the language code, in the Wikipedia idiom:
   marks the switcher as a language control, not just two loose letters. */
.lang-icon {
    margin-right: 0.3em;
    font-size: 1.05em;
    vertical-align: -0.08em;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--color-bg);
    font-size: var(--fs-body);
    padding-top: 100px;
    margin: 0;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: var(--font-body);
    color: var(--color-ink);
}

h1 {
    font-family: var(--font-display);
    font-weight: bold;
    font-size: var(--fs-display-1);
    letter-spacing: var(--track-display);
    color: var(--color-ink);
}

.h1-other {
    margin-top: 100px;
    text-align: center;
}

/* The page title on the legal and utility pages (mentions, cgu, bot). A page
   title takes display-2 there, not display-3: display-3 is card-title size and
   left "Conditions générales d'utilisation" looking like a subheading. */
.simple-h1 {
    margin-top: 100px;
    margin-bottom: 100px;
    font-family: var(--font-display);
    font-weight: bold;
    font-size: var(--fs-display-2);
    letter-spacing: var(--track-display);
}

.major {
    font-family: var(--font-display);
    font-weight: bold;
    font-size: var(--fs-lede);
}

h3 {
    font-family: var(--font-display);
    font-weight: bold;
    color: var(--color-ink);
}

h2 {
    font-family: var(--font-display);
    font-weight: bold;
    color: var(--color-ink);
}

.h4-bold {
    font-family: var(--font-display);
    font-weight: bold;
}

h4 {
    font-family: var(--font-display);
    color: var(--color-ink);
}

.pro-subtitle {
    font-size: var(--fs-display-3);
    font-weight: normal;
}

.apropos-subtitle {
    font-size: var(--fs-display-3);
    font-family: var(--font-display);
    font-weight: bold;
}

.apropose-s-2 {
    font-weight: normal;
    font-size: var(--fs-display-3);

}

a {
    color: var(--color-text);
}

a img {
    vertical-align: middle;
   /*display: block;*/
   /* border: none;*/
}

.main-title {
    margin-left: 10px;
    margin-right: 10px;
}

.second-text-home {
    font-size: var(--fs-lede);
    margin-top: 50px;
    margin-bottom: 60px;
}

.first-card {
    border-radius: 15px;
    max-width: 700px;
    min-height: 230px;
    border: none;
}

.second-card {
    border-radius: 15px;
    max-width: 700px;
    min-height: 230px;
    border: none;
    background-color: var(--color-border);
}

.example-card {
    border-radius: 15px;
    max-width: 350px;
    min-height: 100px;
    border: none

}

.b2b-card {
    border-radius: 15px;
    max-width: 700px;
    min-height: 100px;
    border: none;
    background-color: var(--color-surface);
}

.first-card2 {
    border-radius: 15px;
    max-width: 100%;
    min-height: 230px;
    border: none;
    margin: 0 auto;
    /*padding: 20px;*/
}

.card-main {
    margin-left: 8px;
}

.card-tag {
    font-size: var(--fs-caption);
    position: absolute;
    top: 10px;
    left: 15px;
}

.card-tag-bottom {
    font-size: var(--fs-small);
    /*position: absolute;*/
    /*top: 10px;*/
    /*left: 15px;*/
    color: var(--color-surface);
}

.card-title {
    font-family: var(--font-display);
    font-weight: bold;
}

.card-title-bottom {
    font-family: var(--font-display);
    font-weight: bold;
    font-size: var(--fs-lede);
    color: #1b1b1b;

}

.card-review {
    min-height: 180px;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: none;
    border: none;
    justify-content: space-between;
}

.card-body-review {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.card-date {
    font-size: var(--fs-small) !important;
    /*margin: 10px 10px 10px 10px !important;*/
    /*text-align: center !important;*/
    /*font-style: italic !important;*/
}

.card-text-review {
    font-size: var(--fs-small) !important;
    margin: 10px 10px 10px 10px !important;
    text-align: center !important;
    font-style: italic !important;
}

.card-name-and-company {
    font-size: var(--fs-caption);
    color: black;
}

.first-block {
    margin-top: 80px;
}

/* the about hero hugs its content: a fixed height here parks the section
   menu a full screen down */
.apropos-block { }

.block_p {
    margin-top: 50px;
    font-size: var(--fs-body);
    margin-bottom: 60px;
}

.block_p2 {
    margin-top: 50px;
    font-size: var(--fs-body);
    margin-bottom: 60px;
}

.container {
    margin-top: 70px;
    font-size: var(--fs-body);
    margin-bottom: 60px;
}

.second-block {
    background-color: var(--color-surface);
    margin-top: 40px;

}

.fourth-block {
    background-color: var(--color-surface-2);

    margin-top: 40px;

}

.big_text {
    font-family: var(--font-display);
    font-weight: bold;
    margin-top: 50px;
    margin-bottom: 40px;
}

.pro-second-message {
    font-size: var(--fs-lede);
    text-align: center;
    max-width: 650px;
    margin: 10px auto 40px auto;
}

.apropos-second-message {
    font-size: var(--fs-lede);
    text-align: center;
    max-width: 550px;
    margin: 50px auto 40px auto;
}

.sticky-menu {
    position: -webkit-sticky;
    position: sticky;
    top: 80px;
    background-color: var(--color-bg);
    z-index: 1000;
    padding: 0 0;
}

.apropos-menu {
    margin-left: 60px;
}

.custom-form {
    border: none;
    border-radius: 15px;
    padding: 20px;
    box-shadow: none;
    width: 40%;
}

.custom-form .form-group input {
    background-color: var(--color-surface);
    border: 1px solid black;
    border-radius: 15px 0 0 15px;
    padding: 15px 15px;
    font-size: var(--fs-small);
    width: 100%;
    box-shadow: none;
}

.custom-form .form-group input:focus {
    border-color: black;
    outline: none;
    box-shadow: none;
}

.b2b-form input,
.b2b-form select,
.b2b-form textarea {
    border-radius: 15px;
    padding: 10px;
    border: 1px solid black;
    background-color: var(--color-surface);
    width: 100%;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
    border-radius: 15px;
    padding: 10px;
    border: 1px solid black;
    background-color: var(--color-surface);
    width: 100%;
}

.btn.btn-primary {
    background-color: black !important;
    border-radius: 0 15px 15px 0;
    color: var(--color-surface) !important;
    padding: 16px 20px;
    border: black;
    width: 200px;
}

.btn-b2b-primary {
    background-color: black !important;
    border-radius: 15px;
    color: var(--color-surface) !important;
    padding: 16px 20px;
    border: black;
    width: 100%;
}

.try_btn {
    background-color: black !important;
    border-radius: 15px !important;
    color: var(--color-surface) !important;
    padding: 15px 20px;
    border: none;
    margin-bottom: 20px;
}

.pro_btn {
    background-color: #CEC6BA !important;
    border-radius: 10px !important;
    border-color: #CEC6BA !important;
    color: black !important;
    padding: 15px 70px;

    /*border: 1.2px solid rgba(0, 0, 0, 1) !important;*/
}

.button-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.apropos-btn {
    margin: 10px auto 40px auto;
    text-align: center;
    background-color: black !important;
    border-radius: 15px !important;
    color: var(--color-surface) !important;
    padding: 15px 20px;
    border: none;
    min-width: 200px;
}

.btn.btn-primary:hover {
    background-color: darkgray !important;
}

.example_btn {
    margin-left: 100px;
    background-color: var(--color-surface) !important;
    border-radius: 15px !important;
    color: black !important;
    padding: 15px 30px;
    border: 5px;
    border: 1px solid black;
}

.example_btn:hover {
    color: grey !important;
}

.btn.btn-nav-a-propos {
    font-family: var(--font-display);
    background-color: var(--color-bg) !important;
    border-radius: 30px !important;
    color: black !important;
    border: 1.2px solid rgba(0, 0, 0, 1) !important;
}

.btn.btn-tag {
    font-family: var(--font-display);
    /*background-color: var(--color-bg) !important;*/
    font-size: var(--fs-caption);
    border-radius: 30px !important;
    color: var(--color-text-strong) !important;
    border: 1.2px solid rgba(0, 0, 0, 1) !important;
}

.btn.btn-nav-a-propos.btn-active {
    background-color: black !important;
    color: var(--color-surface) !important;
}

.navbar {
    background-color: var(--color-bg) !important;
    padding: 1rem 1rem;
}

.navbar .nav-link {
    color: var(--color-text-strong) !important;
    position: relative;
    font-size: var(--fs-small);
    margin-right: 1.8rem;
}

.navbar .nav-link::after {
    content: '';
    display: block;
    width: 3px;
    height: 3px;
    background: black;
    border-radius: 50%;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, -100%);
    opacity: 0;
    transition: opacity 0.3s;
}

.navbar .nav-link:hover::after {
    opacity: 1;
}

.navbar .dropdown-toggle::after {
    content: none;
}

.navbar-toggler {
    border: none;
    /* The burger is the ☰ character: a glyph sized to the tap target, not type,
       so it keeps a literal size and stays off the scale. */
    font-size: 24px;
}

/* Nav dropdowns (Expertise, Ressources): a detached surface card with plain
   text items and underline hover (recipe taken from anthropic.com's nav panel,
   translated to house tokens). Always display:block so open/close can
   transition; visibility carries the toggle, for both the hover path and
   Bootstrap's .show (click / keyboard) path.

   Scoped to .navbar on purpose: these rules hide items until opened, so a
   Bootstrap dropdown used anywhere else on the site must not inherit them. */
.navbar .dropdown-menu {
    display: block;
    visibility: hidden;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.25s cubic-bezier(0.77, 0, 0.175, 1),
                transform 0.25s cubic-bezier(0.77, 0, 0.175, 1),
                visibility 0.25s;
    margin-top: 6px;
    padding: 1.1rem 1.4rem 1.2rem;
    background-color: var(--color-surface);
    border: none;
    border-radius: var(--radius);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.01),
                0 4px 4px rgba(0, 0, 0, 0.02),
                0 16px 24px rgba(0, 0, 0, 0.04);
}

/* click path: Bootstrap stamps data-bs-popper and would shrink the gap to 2px */
.navbar .dropdown-menu[data-bs-popper] {
    margin-top: 6px;
}

/* invisible bridge over the 6px gap so hover survives the crossing */
.navbar .dropdown-menu::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -8px;
    height: 8px;
}

.navbar .nav-item.dropdown:hover .dropdown-menu,
.navbar .dropdown-menu.show {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

/* hover intent: a sweep across the nav shouldn't flash the panel open.
   Only the hover path waits; closing and click-open keep zero delay. */
.navbar .nav-item.dropdown:hover .dropdown-menu {
    transition-delay: 0.15s;
}

.navbar .nav-item.dropdown:hover .dropdown-menu.show {
    transition-delay: 0s;
}

.navbar .dropdown-item {
    padding: 0.3rem 0;
    font-size: var(--fs-small);
    color: var(--color-text-strong);
    opacity: 0;
    transform: translateY(4px);
    transition: color 0.15s ease, opacity 0.2s ease, transform 0.2s ease;
}

.navbar .nav-item.dropdown:hover .dropdown-menu .dropdown-item,
.navbar .dropdown-menu.show .dropdown-item {
    opacity: 1;
    transform: translateY(0);
}

/* the one-by-one reveal: 70ms stagger. The hover set starts after the
   panel's 0.15s intent delay; the click set starts almost at once. */
.navbar .nav-item.dropdown:hover .dropdown-menu li:nth-child(1) .dropdown-item { transition-delay: 0.17s; }
.navbar .nav-item.dropdown:hover .dropdown-menu li:nth-child(2) .dropdown-item { transition-delay: 0.24s; }
.navbar .nav-item.dropdown:hover .dropdown-menu li:nth-child(3) .dropdown-item { transition-delay: 0.31s; }
.navbar .nav-item.dropdown:hover .dropdown-menu li:nth-child(4) .dropdown-item { transition-delay: 0.38s; }

.navbar .dropdown-menu.show li:nth-child(1) .dropdown-item { transition-delay: 0.02s; }
.navbar .dropdown-menu.show li:nth-child(2) .dropdown-item { transition-delay: 0.09s; }
.navbar .dropdown-menu.show li:nth-child(3) .dropdown-item { transition-delay: 0.16s; }
.navbar .dropdown-menu.show li:nth-child(4) .dropdown-item { transition-delay: 0.23s; }

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
    color: var(--color-ink);
    background-color: transparent;
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.icon-small i {
    font-size: 0.8em;
}

/* caret on a nav dropdown trigger (Expertise, Ressources) */
.nav-caret {
    display: inline-block;
    font-size: 0.7rem;
    margin-left: 3px;
    transition: transform 0.3s ease;
}

.nav-item.dropdown:hover .nav-caret {
    transform: rotate(180deg);
}

.navbar-brand {
    font-family: var(--font-display);
    font-weight: bold;
    /* The wordmark is the logo, not type: it keeps a literal size and stays off
       the scale, like the footer wordmark and the burger. Renders "abstrakt."
       here and "a." under 768px (see the ::after rules). */
    font-size: 1.8rem;
    padding-left: 2rem;
}

/* ==========================================================================
   Mobile menu drawer (#dummyText)
   Rows mirror the desktop nav, in the same order, and the two grouped rows
   (Expertise, Ressources) open in place: the flat list of ten links it used to
   be ran past the bottom of a phone with no way to scroll to the end of it.
   Recipe from anthropic.com's mobile panel: a hairline under every row, a
   chevron only where there are children, the panel pushing the rest of the list
   down rather than covering it, and the CTA pinned after the last row.

   These rules are unconditional on purpose. The drawer is display:none until
   the burger opens it, and the burger only exists under 992px, so a breakpoint
   here buys nothing and cost the 768-992px band its styling.
   ========================================================================== */
.dummy-text {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    background-color: black;
    z-index: 1050;
    padding: 0 2rem 2.5rem;
    text-align: left;
    color: var(--color-bg);
}

/* Browsers without dvh (older iOS) fall back to the layout viewport. */
@supports not (height: 100dvh) {
    .dummy-text {
        height: 100%;
    }
}

.dummy-text-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.5rem;
    margin-bottom: 1.5rem;
}

.dummy-text-brand {
    /* wordmark, off the scale (see .navbar-brand) */
    font-family: var(--font-display);
    font-weight: bold;
    font-size: 3rem;
    line-height: 1;
}

.close-btn {
    color: var(--color-bg);
    /* The × that closes the mobile menu: a tap target glyph, not type. */
    font-size: 4rem;
    line-height: 1;
    cursor: pointer;
}

.dummy-text-main {
    color: var(--color-bg);
}

.dummy-text-secondary {
    color: grey;
    margin-top: 2rem;
}

.dummy-text-secondary li {
    margin-bottom: 0.75rem;
}

.dummy-text-secondary .footer-link {
    font-size: var(--fs-small);
}

.dummy-text p {
    font-size: var(--fs-lede);
}

/* A row: either a link (no children) or the toggle of a group. Both look the
   same closed, so the list reads as one column of equals. */
.drawer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: 1.05rem 0;
    border: 0;
    border-bottom: 1px solid rgba(246, 241, 235, 0.2);
    background: none;
    color: var(--color-bg);
    font-family: var(--font-display);
    font-weight: bold;
    font-size: var(--fs-display-2);
    line-height: 1.15;
    letter-spacing: var(--track-display);
    text-align: left;
    text-decoration: none;
}

.drawer-row:hover,
.drawer-row:focus-visible {
    color: var(--color-bg);
    text-decoration: none;
}

/* The chevron is a tap affordance glyph, not type: literal size, off the scale. */
.drawer-caret {
    flex: 0 0 auto;
    font-size: 20px;
    line-height: 1;
    transition: transform 0.3s cubic-bezier(0.77, 0, 0.175, 1);
}

.drawer-row[aria-expanded="true"] .drawer-caret {
    transform: rotate(180deg);
}

/* The panel animates on a max-height the script measures, so the transition
   works without hard-coding a height per group. */
.drawer-panel {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.32s cubic-bezier(0.77, 0, 0.175, 1);
}

/* The hairline under an open panel separates it from the next row. It belongs to
   the open state only: on a closed panel it still drew its 1px, so a collapsed
   group showed two rules a pixel apart. */
.drawer-row[aria-expanded="true"] + .drawer-panel {
    border-bottom: 1px solid rgba(246, 241, 235, 0.2);
}

.drawer-panel-inner {
    padding: 0.7rem 0 1.1rem;
}

.drawer-sub {
    display: block;
    padding: 0.6rem 0;
    font-family: var(--font-body);
    font-weight: normal;
    font-size: var(--fs-body);
    line-height: 1.35;
    color: rgba(246, 241, 235, 0.78);
    text-decoration: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.2s ease, transform 0.2s ease, color 0.15s ease;
}

.drawer-sub:hover,
.drawer-sub:focus-visible {
    color: var(--color-bg);
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

/* The same one-by-one reveal as the desktop dropdown: 70ms apart. */
.drawer-row[aria-expanded="true"] + .drawer-panel .drawer-sub {
    opacity: 1;
    transform: translateY(0);
}

.drawer-row[aria-expanded="true"] + .drawer-panel .drawer-sub:nth-child(1) { transition-delay: 0.04s; }
.drawer-row[aria-expanded="true"] + .drawer-panel .drawer-sub:nth-child(2) { transition-delay: 0.11s; }
.drawer-row[aria-expanded="true"] + .drawer-panel .drawer-sub:nth-child(3) { transition-delay: 0.18s; }
.drawer-row[aria-expanded="true"] + .drawer-panel .drawer-sub:nth-child(4) { transition-delay: 0.25s; }

@media (prefers-reduced-motion: reduce) {
    .drawer-caret,
    .drawer-panel,
    .drawer-sub {
        transition: none;
    }
}

/* The drawer covers the navbar, so its "Prendre RDV" goes with it: without this
   the CTA is unreachable for as long as the menu is open. Light fill on black,
   the inverse of .nav-btn-secondary. */
.drawer-cta {
    display: block;
    margin-top: 1.75rem;
    padding: 14px 22px;
    border: 2px solid var(--color-surface);
    border-radius: 10px;
    background-color: var(--color-surface);
    color: var(--color-ink);
    font-family: var(--font-display);
    font-weight: bold;
    font-size: var(--fs-small);
    text-align: center;
    text-decoration: none;
    transition: all 0.25s ease;
}

.drawer-cta:hover,
.drawer-cta:focus-visible {
    background-color: transparent;
    color: var(--color-surface);
    text-decoration: none;
}

footer {
    margin-top: auto;
}

.footer-brand {
    font-family: var(--font-display);
    font-weight: bold;
    font-size: var(--fs-small);
    color: var(--color-bg);
    /*margin: 0 0 1rem 0;*/
}

.footer-link {
    color: grey;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-link:hover {
    color: var(--color-bg);
    text-decoration: none;
}

.footer-columns {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

.footer-column ul li {
    margin-bottom: 1rem;
}

.footer-column {
    margin-left: 6rem;
}

.a-dot {
    font-family: var(--font-display) !important;
    font-weight: bold !important;
    font-size: 3rem !important;
    color: var(--color-bg);
    margin: 0 0 1rem 0;

}

.ftr-a {
    font-family: var(--font-display) !important;
    font-weight: bold !important;
    font-size: 2.5rem !important;
    margin: 0 0 0 0;

}

.line-contener {
    margin-left: 70px;
    margin-right: 70px;
}

.animated-line {
    width: 100%;
    height: 1px;
    background: lightgray;
    position: relative;
    overflow: hidden;
}

.animated-line::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: black;
    animation: fillBlack 0.4s linear forwards;
}

@keyframes fillBlack {
    0% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
}

.textarea-wrapper {
    position: relative;
    display: inline-block;
    width: fit-content;
}

.placeholder-text {
    position: absolute;
    top: 8px;
    left: 12px;
    color: #6c757d;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.fade-out {
    opacity: 0;
    transform: translateY(-20px);
}

.fade-in {
    opacity: 1;
    transform: translateY(0);
}

.blog_title {
    font-size: var(--fs-display-2) !important;
    margin-bottom: 2rem;
    text-align: Left;

}

.blog_content {
    max-width: 800px;
    margin: 10px auto 40px auto;
}

.blog_line_contener {
    max-width: 800px;
    margin: 50px auto 20px auto;
}

.blog_container {
    margin-top: 10px;
    margin-left: 55px;
    margin-right: 55px;
    font-size: var(--fs-body);
    margin-bottom: 60px;
}

.no-underline {
    text-decoration: none;
}

.sepia-image {
    filter: sepia(40%);
}

.business-only {
    font-size: smaller;
    font-style: italic;
}

.footer-div {
    margin-top: 30px !important;
    font-size: var(--fs-body);
    margin-bottom: 30px !important;
    padding-right: 20px;
    padding-left: 20px;
}

.ftr-container {
    margin-top: 30px !important;
    font-size: var(--fs-body);
    margin-bottom: 30px !important;
}

@media (min-width: 992px) {
    .main-title {
        margin-left: 60px;
        margin-right: 10px;

    }
}

@media (min-width: 768px) {
    .first-card2 {
        max-width: 700px;
    }
}

@media (min-width: 992px) {
    .first-card2 {
        max-width: 900px;
    }
}

@media (min-width: 1200px) {
    .first-card2 {
        max-width: 1000px;
    }
}

@media (max-width: 767.98px) {
    .navbar-brand::after {
        content: 'a.';
    }

    .navbar-brand::before {
        content: '';
    }
}

@media (min-width: 768px) {
    .navbar-brand::after {
        content: 'abstrakt.';
    }

    .navbar-brand::before {
        content: '';
    }
}

@media (max-width: 768px) {
    .navbar {
        background-color: var(--color-bg) !important;
        padding: 0 1.2rem;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 1050;
    }

    body {
        padding-top: 100px;
    }

    .first-block {
        margin-top: 10px;
    }

    .navbar-brand {
        /* "a." alone, so it takes the room the full wordmark had. Off the scale
           for the same reason as the desktop rule above. */
        font-size: 3rem;
        font-family: var(--font-display);
        margin-left: 0;
        padding-left: 0;
    }

    .footer-brand {
        margin-bottom: 1rem;
        margin-top: 0 !important;
        text-align: left;
        font-family: var(--font-display);
    }

    .footer-columns {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }

    .footer-column ul li {
        margin-bottom: 0.5rem;
    }

    .footer-column {
        margin-left: 0;
        margin-bottom: 1rem;
        width: 100%;
        text-align: left;
    }

    .footer-column:not(:last-child) {
        border-bottom: 0.3px solid grey;
        padding-bottom: 1rem;
    }

    .footer-link {
        font-size: var(--fs-small);
        margin-bottom: 0.5rem;
    }
}

@media (max-width: 600px) {
    .blog_content {
        margin: 10px;

    }
}

@media (max-width: 767.98px) {
    .third-block i {
        font-size: 50px;
    }
}

@media (min-width: 768px) {
    .third-block i {
        font-size: 100px;
    }
}

@media (max-width: 768px) {
    .custom-form {
        flex-direction: column;
        width: 90%;
    }

    .custom-form .form-group {
        width: 100%;
        margin-bottom: 10px;
    }

    .custom-form .form-group input {
        border-radius: 15px;
    }

    .btn.btn-primary {
        width: 100%;
        border-radius: 15px;
        margin-top: 10px;
        width: 200px;
    }

    .container {
        padding-left: 32px;
        padding-right: 32px;
    }

    .apropos-second-message {
        padding-left: 32px;
        padding-right: 32px;
        text-align: left;
    }

    .pro-second-message {
        text-align: left;
    }

}

@media (min-width: 800px) {
    .pro-card {
        display: none;
    }
}

/* ==========================================================================
   Cookie-consent banner (tarteaucitron) - moved from base templates 2026-06-15.
   FR default min-height 24px; EN banner is taller (86px) via the lang override.
   ========================================================================== */
        /* Tarteaucitron - Ultra minimal banner */
        #tarteaucitronRoot #tarteaucitronAlertBig {
            background: var(--color-ink) !important;
            border-radius: 0 !important;
            box-shadow: none !important;
            padding: 10px 0 !important;
            min-height: 24px !important;
            left: 0 !important;
            right: 0 !important;
            width: 100% !important;
            max-width: 100% !important;
            margin: 0 !important;
        }
        #tarteaucitronRoot .tarteaucitronAlertBigTop,
        #tarteaucitronRoot .tarteaucitronAlertBigBottom {
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 16px !important;
            padding: 28px 24px !important;
            flex-wrap: wrap !important;
        }
        #tarteaucitronRoot #tarteaucitronDisclaimerAlert {
            color: var(--color-surface-2) !important;
            font-size: 14px !important;
            margin: 0 !important;
            padding: 0 !important;
            text-align: center !important;
        }
        #tarteaucitronRoot #tarteaucitronAlertBig button {
            padding: 6px 12px !important;
            font-size: 12px !important;
            border-radius: 4px !important;
            margin: 0 !important;
            white-space: nowrap !important;
        }
        #tarteaucitronRoot #tarteaucitronPersonalize2 {
            background: var(--color-surface-2) !important;
            border: 1px solid var(--color-surface-2) !important;
            color: var(--color-ink) !important;
        }
        #tarteaucitronRoot #tarteaucitronAllDenied2 {
            background: transparent !important;
            border: 1px solid var(--color-surface-2) !important;
            color: var(--color-surface-2) !important;
        }
        #tarteaucitronRoot #tarteaucitronCloseAlert,
        #tarteaucitronRoot #tarteaucitronPersonalize {
            display: none !important;
        }
        #tarteaucitronRoot .tarteaucitronAlertBigBottom #tarteaucitronPrivacyUrl {
            color: rgba(255,255,255,0.6) !important;
            font-size: 12px !important;
            text-decoration: underline !important;
        }
        @media (max-width: 640px) {
            #tarteaucitronRoot .tarteaucitronAlertBigTop,
            #tarteaucitronRoot .tarteaucitronAlertBigBottom {
                flex-wrap: wrap !important;
                gap: 0 !important;
                padding: 20px 16px !important;
            }
            #tarteaucitronRoot #tarteaucitronDisclaimerAlert {
                order: 1 !important;
                flex-basis: 100% !important;
                text-align: center !important;
                padding: 0 10px !important;
                margin-bottom: 14px !important;
            }
            #tarteaucitronRoot #tarteaucitronAlertBig button {
                padding: 14px 24px !important;
                font-size: 15px !important;
                width: 100% !important;
                box-sizing: border-box !important;
                margin: 0 !important;
                border-radius: 0 !important;
            }
            #tarteaucitronRoot #tarteaucitronPersonalize2 {
                order: 2 !important;
                flex-basis: 100% !important;
                border-radius: 6px 6px 0 0 !important;
                border-bottom: none !important;
            }
            #tarteaucitronRoot #tarteaucitronAllDenied2 {
                order: 3 !important;
                flex-basis: 100% !important;
                border-radius: 0 0 6px 6px !important;
            }
            #tarteaucitronRoot #tarteaucitronPrivacyUrl {
                order: 4 !important;
                flex-basis: 100% !important;
                margin-top: 14px !important;
            }
        }
html[lang="en"] #tarteaucitronRoot #tarteaucitronAlertBig { min-height: 86px !important; }

/* ==========================================================================
   Navbar CTA buttons - moved from base templates 2026-06-15.
   ========================================================================== */
        /* Navbar CTA Buttons */
        .navbar-cta {
            display: flex;
            gap: 12px;
            margin-left: 30px;
            align-items: center;
        }
        
        .nav-btn-primary {
            display: inline-block;
            background-color: var(--color-ink);
            color: var(--color-surface);
            padding: 10px 22px;
            border-radius: 10px;
            text-decoration: none;
            font-size: var(--fs-small);
            font-weight: bold;
            border: 2px solid var(--color-ink);
            transition: all 0.25s ease;
            white-space: nowrap;
        }
        
        .nav-btn-primary:hover {
            background-color: var(--color-surface);
            color: var(--color-ink);
        }
        
        .nav-btn-secondary {
            display: inline-block;
            background-color: var(--color-surface);
            color: var(--color-ink);
            padding: 10px 22px;
            border-radius: 10px;
            text-decoration: none;
            font-size: var(--fs-small);
            font-weight: bold;
            border: 2px solid var(--color-ink);
            transition: all 0.25s ease;
            white-space: nowrap;
        }
        
        .nav-btn-secondary:hover {
            background-color: var(--color-ink);
            color: var(--color-surface);
        }
        
        /* Mobile-only button (visible between brand and burger) */
        .nav-btn-mobile {
            display: none;
            background-color: var(--color-ink);
            color: var(--color-surface);
            padding: 8px 16px;
            border-radius: 8px;
            text-decoration: none;
            font-size: var(--fs-caption);
            font-weight: bold;
            border: 2px solid var(--color-ink);
            transition: all 0.25s ease;
            white-space: nowrap;
            margin-left: auto;
            margin-right: 12px;
        }
        
        .nav-btn-mobile:hover {
            background-color: var(--color-surface);
            color: var(--color-ink);
        }
        
        @media (max-width: 991px) {
            .nav-btn-mobile {
                display: inline-block;
            }
            
            .navbar-cta {
                flex-direction: column;
                margin-left: 0;
                margin-top: 20px;
                width: 100%;
                gap: 10px;
            }
            
            .nav-btn-primary,
            .nav-btn-secondary {
                width: 100%;
                text-align: center;
            }
        }