/* ==========================================================================
   FSL Design System — tokens + components
   Loaded only on pages/design-system.php for now (not sitewide) so it can't
   collide with the existing styles.css while this is still a first draft.
   Source: design system brief shared 2026-09-18 (colors + typography).
   Buttons and thumbnails have no spec yet from Figma, so those two sections
   are marked "draft" on the page itself and use the color tokens below as a
   best guess — swap them out once the real component specs land.
   ========================================================================== */

:root {
    /* couleurs de marque */
    --ds-carmin: #BF141C;
    --ds-corail: #D2412C;
    --ds-turquoise: #6FAFA6;
    --ds-marine: #234B5E;
    --ds-bleu-encre: #2A6078;
    --ds-or: #E7B84C;
    --ds-peche: #E79A63;
    --ds-ocre: #E9D09C;
    --ds-ocre-3: #E0B865;

    /* neutres */
    --ds-texte-fonce: #101828;
    --ds-texte-sur-blanc: #4A5565;
    --ds-gris-moyen-fonce: #B9C1CC;
    --ds-gris-moyen: #CECECE;
    --ds-contour-gris-clair: #E5E7EB;
    --ds-gris-tres-clair: #E5E7EB;
    --ds-gris-clair: #F9FAFB;
    --ds-blanc: #FFFFFF;

    /* fonds chauds */
    --ds-ocre-def: #F6EFDD;
    --ds-ocre-clair: #FDF9ED;
    --ds-jaune-gris-2: #FFF9E9;
    --ds-jaune-gris: #EEEAE0;
    --ds-jaune-gris-moyen: #CDCBC4;
    --ds-bleu-gris: #E8EEF3;

    /* tags competences (palette ajoutee 2026-10-26) */
    --ds-tag-bleu-1: #245CAF;
    --ds-tag-rouge-1: #D0453D;
    --ds-tag-turquoise-1: #006980;
    --ds-tag-bordeaux-1: #843555;
    --ds-tag-vert-1: #5F7918;

    /* domaines de competences - alias semantiques des couleurs de tags ci-dessus
       (memes hex que dans fsl-updating-cards.md : --processus-intervention,
       --organisation-2, --collectif, --pense-2, --diagnostique) */
    --ds-domaine-intervention: var(--ds-tag-turquoise-1);
    --ds-domaine-organisation: var(--ds-tag-bordeaux-1);
    --ds-domaine-collectif: var(--ds-tag-rouge-1);
    --ds-domaine-pensee: var(--ds-tag-bleu-1);
    --ds-domaine-entrainer: var(--ds-tag-vert-1);

    /* turquoise - variantes d'opacite (same base hex, opacity via rgba) */
    --ds-turquoise-100: rgba(111, 175, 166, 1);
    --ds-turquoise-70: rgba(111, 175, 166, .7);
    --ds-turquoise-30: rgba(111, 175, 166, .3);
    --ds-turquoise-20: rgba(111, 175, 166, .2);

    /* spacing scale - 8 paliers for margins, paddings, gaps */
    --ds-spacing-4: 4px;
    --ds-spacing-8: 8px;
    --ds-spacing-12: 12px;
    --ds-spacing-16: 16px;
    --ds-spacing-24: 24px;
    --ds-spacing-32: 32px;
    --ds-spacing-48: 48px;
    --ds-spacing-64: 64px;

    /* border radius scale - for cards, buttons, containers */
    --ds-radius-8: 8px;
    --ds-radius-16: 16px;
    --ds-radius-24: 24px;
    --ds-radius-30: 30px;
    --ds-radius-full: 9999px;
}

/* --- page scaffolding --- */
.ds-section {
    padding: 60px 0;
    text-align: left;
}

.ds-section + .ds-section {
    border-top: 1px solid var(--ds-contour-gris-clair);
}

.ds-section-title {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 150%;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--ds-carmin);
    margin-bottom: 8px;
}

.ds-section-note {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-style: italic;
    font-size: 14px;
    color: var(--ds-texte-sur-blanc);
    margin-bottom: 32px;
}

.ds-group-label {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0;
    color: var(--ds-texte-fonce);
    margin-bottom: 16px;
    margin-top: 40px;
}

.ds-group-label:first-of-type {
    margin-top: 0;
}

/* --- color palette --- */
.ds-swatch-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.ds-swatch {
    width: 160px;
}

.ds-swatch-color {
    height: 90px;
    border-radius: 8px;
    border: 1px solid var(--ds-contour-gris-clair);
    margin-bottom: 8px;
}

.ds-swatch-name {
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: var(--ds-texte-fonce);
    text-transform: none;
}

.ds-swatch-hex {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 13px;
    color: var(--ds-texte-sur-blanc);
}

/* --- typography specimens --- */
.ds-type-row {
    display: flex;
    align-items: baseline;
    gap: 24px;
    padding: 20px 0;
    border-bottom: 1px solid var(--ds-contour-gris-clair);
    flex-wrap: wrap;
}

.ds-type-row:last-child {
    border-bottom: none;
}

.ds-type-meta {
    width: 220px;
    flex: 0 0 220px;
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    line-height: 20px;
    color: var(--ds-texte-sur-blanc);
}

.ds-type-meta strong {
    display: block;
    font-size: 13px;
    color: var(--ds-texte-fonce);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 4px;
}

.ds-type-sample {
    font-family: 'Open Sans', sans-serif;
    color: var(--ds-type-color, var(--ds-texte-fonce));
    flex: 1 1 320px;
    min-width: 0;
}

/* Each of these sets its own font-family + color (falling back to texte foncé)
   so it works standalone wherever it's reused - not just inside .ds-type-sample
   in the Typography showcase above. Override the color per use with an inline
   "--ds-type-color" custom property, same pattern as the cards use. */
.ds-h1-highlight,
.ds-h1,
.ds-h2,
.ds-h3,
.ds-h4,
.ds-chapeau,
.ds-citation,
.ds-texte-highlight,
.ds-texte,
.ds-texte-pave,
.ds-texte-italic,
.ds-bouton-tag,
.ds-texte-small-highlight,
.ds-texte-small,
.ds-texte-small-italic {
    font-family: 'Open Sans', sans-serif;
    color: var(--ds-type-color, var(--ds-texte-fonce));
}

/* Update (2026-10-26, rem): every font-size, px line-height and letter-spacing in the
   type styles below is now in rem (1rem = 16px, the root size is not overridden
   anywhere in styles.css or here), so they scale with the browser's font-size
   setting. Percent line-heights (100%, 150%) are unchanged. */
/* Update (2026-10-26): "h1-retro" - font-family Retromark Script Demo,
   400 / Regular, 72px / 64px, 0px letter-spacing, color #BF141C. The font
   file was already in the project (font/Retromark Script-UNICODE-Dafont.otf,
   internal family name "Retromark Script Demo", Regular) and styles.css
   already loads it - but under the shorter alias "Retromark", not the
   exact name in your spec. So this declares the same file once more under
   the exact name "Retromark Script Demo" rather than touching styles.css
   (which the live site uses). Color defaults to carmin (#BF141C) via the
   same --ds-type-color pattern as every other type style, so it can still
   be overridden per use. "leading-trim: NONE" is the default, so nothing
   to set for it. */
@font-face {
    font-family: 'Retromark Script Demo';
    font-weight: 400;
    font-style: normal;
    src: url("../font/Retromark Script-UNICODE-Dafont.otf") format("opentype");
}

.ds-h1-retro {
    font-family: 'Retromark Script Demo', 'Retromark', cursive;
    font-weight: 400;
    font-style: normal;
    font-size: 4.5rem;
    line-height: 4rem;
    letter-spacing: 0;
    color: var(--ds-type-color, var(--ds-carmin));
}

/* Update (2026-10-26): typography brought in line with "fsl-updating-design-system.md".
   Changed from the previous values: H1 600 -> 300; H2 600 36px/40px -> 300 40px/100%;
   H3 600 24px/-.44px -> 300 36px/0; H4 Open Sans 600 20px/28px -> Inter 500 13px/100%;
   Bouton tag 600 -> 700; Texte small highlight Open Sans 700 -> Inter 500 13px/100%.
   New: H2 retro, Chapeau, Citation. "background: #000000E5" in that file is
   Figma's text fill, i.e. the text color - applied per use through
   --ds-type-color like every other style, defaults unchanged. */
.ds-h2-retro {
    font-family: 'Retromark Script Demo', 'Retromark', cursive;
    font-weight: 400;
    font-style: normal;
    font-size: 4rem;
    line-height: 4rem;
    letter-spacing: 0;
    color: var(--ds-type-color, var(--ds-carmin));
}

.ds-chapeau { font-weight: 400; font-style: normal; font-size: 1.25rem; line-height: 100%; letter-spacing: 0; }
.ds-citation { font-weight: 600; font-style: italic; font-size: 1.25rem; line-height: 1.75rem; letter-spacing: -.0275rem; }

.ds-h1-highlight { font-weight: 600; font-size: 3.75rem; line-height: 4.6875rem; letter-spacing: .01625rem; }
.ds-h1 { font-weight: 300; font-size: 3rem; line-height: 100%; letter-spacing: .021875rem; }
.ds-h2 { font-weight: 300; font-size: 2.5rem; line-height: 100%; letter-spacing: 0; }
.ds-h3 { font-weight: 300; font-size: 2.25rem; line-height: 100%; letter-spacing: 0; }
.ds-h4 { font-family: 'Inter', sans-serif; font-weight: 500; font-size: .8125rem; line-height: 100%; letter-spacing: 0; }
.ds-texte-highlight { font-weight: 700; font-size: 1rem; line-height: 1.375rem; letter-spacing: -.0275rem; }
.ds-texte { font-weight: 400; font-size: 1rem; line-height: 1.75rem; letter-spacing: -.0275rem; }
.ds-texte-pave { font-weight: 400; font-size: 1rem; line-height: 1.375rem; letter-spacing: -.0275rem; }
.ds-texte-italic { font-weight: 400; font-style: italic; font-size: 1rem; line-height: 1.75rem; letter-spacing: -.0275rem; }
.ds-bouton-tag { font-weight: 700; font-size: .875rem; line-height: 150%; letter-spacing: 0; text-transform: uppercase; }
.ds-texte-small-highlight { font-family: 'Inter', sans-serif; font-weight: 500; font-size: .8125rem; line-height: 100%; letter-spacing: 0; }
.ds-texte-small { font-weight: 400; font-size: .875rem; line-height: 150%; letter-spacing: 0; }
.ds-texte-small-italic { font-weight: 400; font-style: italic; font-size: .875rem; line-height: 150%; letter-spacing: 0; }

/* --- spacing scale --- */
.ds-spacing-row {
    display: flex;
    align-items: center;
    gap: var(--ds-spacing-24);
    padding: var(--ds-spacing-12) 0;
    border-bottom: 1px solid var(--ds-contour-gris-clair);
}

.ds-spacing-row:last-child {
    border-bottom: none;
}

.ds-spacing-meta {
    width: 160px;
    flex: 0 0 160px;
    font-family: 'Open Sans', sans-serif;
}

.ds-spacing-meta strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--ds-texte-fonce);
}

.ds-spacing-meta span {
    font-size: 13px;
    color: var(--ds-texte-sur-blanc);
}

.ds-spacing-bar {
    height: 16px;
    min-width: 2px;
    background-color: var(--ds-bleu-encre);
    border-radius: 2px;
}

/* --- border radius scale --- */
.ds-radius-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-spacing-24);
}

.ds-radius-item {
    width: 120px;
    text-align: center;
}

.ds-radius-box {
    height: 90px;
    width: 90px;
    margin: 0 auto var(--ds-spacing-8);
    background-color: var(--ds-bleu-encre);
}

.ds-radius-name {
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: var(--ds-texte-fonce);
}

.ds-radius-value {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 13px;
    color: var(--ds-texte-sur-blanc);
}

/* --- buttons (Figma spec, 2026-09-18) --- */
.ds-btn-preview-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--ds-spacing-24);
    margin-bottom: var(--ds-spacing-32);
}

.ds-btn-preview {
    text-align: center;
}

.ds-btn-preview-label {
    margin-top: var(--ds-spacing-8);
    margin-bottom: 0;
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    color: var(--ds-texte-sur-blanc);
}

.ds-btn {
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 150%;
    letter-spacing: 0;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: var(--ds-radius-30);
    border: none;
    box-sizing: border-box;
    cursor: pointer;
    text-decoration: none;
}

/* Update (2026-10-27): per "add a cursor pointer for each button" - nearly every
   button here already set it on its own class (.ds-btn, .ds-btn-nav-contact,
   .ds-text-link, burger, FAQ rows, slider arrows/dots). This adds one shared
   safety net so any button, current or future, gets it without having to
   remember. It's wrapped in :where() so it has zero specificity and never
   overrides a more specific rule: the disabled states keep their own
   "not-allowed" cursor (and the slider's disabled arrow its "default" one), on
   purpose - a pointer on something you can't click would be misleading. */
:where(button, [type="button"], [type="submit"], [role="button"], summary,
       .ds-btn, .ds-btn-nav-contact, .ds-text-link, .ds-nav-link, .ds-footer-link,
       .ds-nav-burger, .ds-faq-question, .ds-start-arrow, .ds-start-dot) {
    cursor: pointer;
}

:where(button:disabled, [aria-disabled="true"], .is-disabled) {
    cursor: not-allowed;
}

/* shared box for Primary / Secondary: Figma gave a fixed 203x53 box, but that was
   only ever going to fit the exact label used in the mockup — real button labels
   vary, so this keeps the padding and turns the box into a floor (min-width /
   min-height) instead of a hard size. Short labels look identical to the spec;
   longer ones grow instead of clipping or wrapping. */
.ds-btn-fill {
    min-width: 203px;
    min-height: 53px;
    padding: 16px 60px;
}

.ds-btn-primary {
    background-color: var(--ds-carmin);
    color: var(--ds-blanc);
}

/* Update (2026-11-02), per your "Éléments UI" capture (Bouton H1): default carmin,
   hover = marine + a soft drop shadow (0 4px 4px #00000040, the same shadow as the
   chips / sous-menu tags), pressed/focus = marine WITHOUT the shadow, disabled grey.
   The old "focus" (carmin + inner shadow) is replaced: your capture shows the third
   state as flat marine. 300ms ease-out like the other interactive components, 0ms
   on press. */
.ds-btn-primary {
    transition: background-color 300ms ease-out, box-shadow 300ms ease-out, color 300ms ease-out;
}

.ds-btn-primary:hover,
.ds-btn-primary.is-hover {
    background-color: var(--ds-marine);
    box-shadow: 0px 4px 4px 0px #00000040;
    color: var(--ds-blanc);
}

.ds-btn-primary:active,
.ds-btn-primary:focus-visible,
.ds-btn-primary.is-focus {
    background-color: var(--ds-marine);
    box-shadow: none;
    color: var(--ds-blanc);
}

.ds-btn-primary:active {
    transition-duration: 0ms;
}

.ds-btn-primary.is-disabled,
.ds-btn-primary:disabled {
    background-color: #E0E0E0;
    color: #999999;
    box-shadow: none;
    cursor: not-allowed;
}

.ds-btn-secondary {
    background-color: var(--ds-bleu-encre);
    color: var(--ds-blanc);
}

.ds-btn-secondary:hover,
.ds-btn-secondary.is-hover {
    background-color: var(--ds-marine);
    color: var(--ds-blanc);
}

.ds-btn-secondary.is-disabled,
.ds-btn-secondary:disabled {
    background-color: #E0E0E0;
    color: #999999;
    cursor: not-allowed;
}

/* Update (2026-11-05), per request: every outline button (.ds-btn-outline-fill: Bouton H2 carmin, marine and
   disabled variants, and the Contact button of the menu, .ds-btn-nav-contact-outline) now has a WHITE background
   in its normal state, so it stays readable on the cream / ocre bands. Hover, focus and pressed states are
   unchanged (the marine outline for Bouton H2, the carmin fill for the menu Contact). .ds-btn-on-light, which
   did the same thing on request, is now the default and kept only so existing markup keeps working. */
/* shared box for the outline ("Button-border") family: same reasoning as
   .ds-btn-fill above - 244x53 as a floor, padding preserved, grows with the label */
.ds-btn-outline-fill {
    min-width: 244px;
    min-height: 53px;
    padding: 16px 80px;
    background-color: var(--ds-blanc);
    border-style: solid;
}

/* Update (2026-11-02), per your capture (Bouton H2): outline in carmin by default,
   hover = marine outline + marine text, disabled = light grey outline. The
   neutral outline (was near-black) is now the marine one, i.e. the hover look. */
.ds-btn-outline,
.ds-btn-outline-primary {
    border-width: 2px;
    transition: border-color 300ms ease-out, color 300ms ease-out, background-color 300ms ease-out;
}

.ds-btn-outline {
    border-color: var(--ds-marine);
    color: var(--ds-marine);
}

.ds-btn-outline-primary {
    border-color: var(--ds-carmin);
    color: var(--ds-carmin);
}

.ds-btn-outline-primary:hover,
.ds-btn-outline-primary:focus-visible,
.ds-btn-outline-primary.is-hover {
    border-color: var(--ds-marine);
    color: var(--ds-marine);
}

.ds-btn-outline-disabled {
    border-width: 1px;
    border-color: #999999;
    color: #999999;
    cursor: not-allowed;
}

.ds-text-link {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 1px 0;
    border: none;
    border-bottom: 1px solid var(--ds-carmin);
    color: var(--ds-carmin);
    text-decoration: none;
    cursor: pointer;
}

.ds-text-link:hover,
.ds-text-link.is-hover {
    border-bottom-color: var(--ds-marine);
    color: var(--ds-marine);
}

.ds-text-link:active,
.ds-text-link:focus-visible,
.ds-text-link.is-pressed {
    border-bottom-color: var(--ds-marine);
    color: var(--ds-marine);
}

.ds-text-link.is-disabled {
    border-bottom-color: #BFBFBF;
    color: #BFBFBF;
    cursor: not-allowed;
}

/* --- thumbnails (draft — generic content-card, no Figma spec yet) --- */
.ds-thumb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 24px;
}

.ds-thumb-card {
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--ds-blanc);
    border: 1px solid var(--ds-ocre-3);
    box-shadow: 0 3px 6px #00000029;
    cursor: pointer;
}

.ds-thumb-img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    display: block;
}

.ds-thumb-body {
    padding: 16px;
}

.ds-thumb-tag {
    display: inline-block;
    margin-bottom: 8px;
    color: var(--ds-carmin);
}

.ds-thumb-title {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 22px;
    color: var(--ds-texte-fonce);
    margin: 0;
}

/* --- cards (Figma spec, 2026-09-18 — "Plonger dans la systémie" style) --- */
.ds-card-preview-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--ds-spacing-32);
    padding: var(--ds-spacing-16);
    margin-bottom: var(--ds-spacing-24);
}

.ds-card-preview {
    text-align: center;
}

.ds-card-preview-label {
    margin-top: var(--ds-spacing-8);
    margin-bottom: 0;
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    color: var(--ds-texte-sur-blanc);
}

/* box: 259.9 x 427 in the Figma export, rounded to 260 x 427.
   Simplified from the original spec on request: no resize and no
   background/border change on hover, just the drop shadow lifting the card. */
.ds-card {
    width: 271.7px;
    height: 403px;
    box-sizing: border-box;
    border-radius: var(--ds-radius-16);
    border: 1px solid var(--ds-ocre-3);
    background: var(--ds-ocre-def);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-align: left;
    cursor: pointer;
    transition: box-shadow .25s ease, border-color .25s ease;
}

/* Update (2026-10-27), per fsl-updating-cards.md: fill is now ocre def and the
   border ocre 3 (was turquoise wash / turquoise); hover swaps the border to
   carmin, adds the -2 drop shadow and turns the title carmin. The title's
   Open Sans 700 20px/28px spec was listed under hover only - applied in every
   state here, otherwise the title would jump from the H4 size to 20px on hover. */
.ds-card:hover,
.ds-card.is-hover {
    border-color: var(--ds-carmin);
    box-shadow: 0px 8px 24px -2px #0000004D;
}

.ds-card-img-wrap {
    flex: 1 1 auto;
    overflow: hidden;
    min-height: 0;
}

.ds-card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ds-card-body {
    flex: 0 0 auto;
    padding: 1.5em; /* 24px at the 16px body size - em so it follows the card's own text size */
}

.ds-card .ds-card-title {
    margin: 0 0 var(--ds-spacing-8);
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.75rem;
    letter-spacing: -.0275rem;
    transition: color .25s ease;
}

.ds-card:hover .ds-card-title,
.ds-card.is-hover .ds-card-title {
    color: var(--ds-carmin);
}

.ds-card-text {
    margin: 0 0 var(--ds-spacing-12);
}

/* Update (2026-09-21): "Quel est votre point de départ ?" starting-point
   section (section 14) - reuses .ds-card as-is, see the on-page note for
   the full explanation. Desktop: a plain centered row. At 1024.5px and
   below: a horizontal, swipeable slider via native scroll-snap (no JS
   needed for the swipe itself - only the dot indicator below is scripted,
   see dsStartInit() in the page script).
   Update (2026-09-21, second pass): per "add a margin top and bottom 80px,
   the margin between the title and the card is 40px" - both values sit
   outside the existing spacing scale (which jumps 64px -> nothing until
   the next token), so they're literal px here rather than var() tokens.
   Update (2026-09-21, third pass): per "when the size is less than 1024px
   I want to keep the margin left and being able to scroll, add a arrow
   clickable for moving the block" - see the @media block below for the
   margin fix and the new .ds-start-slider/.ds-start-arrow rules. */
.ds-start-demo {
    margin: 80px 0;
}

.ds-start-heading {
    text-align: center;
    margin: 0 0 40px;
}

.ds-start-slider {
    position: relative;
}

.ds-start-grid {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    gap: var(--ds-spacing-24);
    max-width: 1160px;
    margin: 0 auto;
}

/* Round prev/next buttons, overlapping the row's own edges - hidden on
   desktop (see .ds-start-grid above, a plain wrapping row there) and shown
   only once the row becomes a horizontal slider, in the media query below.
   Reuses the FAQ chevron path (section 11), rotated per direction, rather
   than a new icon. */
.ds-start-arrow {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: var(--ds-radius-full);
    background: var(--ds-blanc);
    box-shadow: 0px 4px 12px 0px #00000024;
    cursor: pointer;
    z-index: 2;
    padding: 0;
}

.ds-start-arrow svg {
    width: 18px;
    height: 18px;
}

.ds-start-arrow-prev {
    left: 4px;
    transform: translateY(-50%) rotate(90deg);
}

.ds-start-arrow-next {
    right: 4px;
    transform: translateY(-50%) rotate(-90deg);
}

.ds-start-arrow.is-disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

.ds-start-dots {
    display: none;
    justify-content: center;
    align-items: center;
    gap: var(--ds-spacing-8);
    margin-top: var(--ds-spacing-24);
}

/* Update (2026-09-21, fourth pass): per "modify the card and making them
   really as a carrousel" - the dots are now real <button> controls (were
   plain <span> indicators) so clicking one jumps straight to that card,
   same as the arrows but by index instead of by step. Reset the button's
   own default border/background/padding/font first, then the same visual
   treatment as before. */
.ds-start-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: var(--ds-radius-full);
    background: var(--ds-contour-gris-clair);
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}

.ds-start-dot.is-active {
    background: var(--ds-texte-fonce);
    transform: scale(1.25);
}

@media (max-width: 1024.5px) {
    /* Update (2026-09-21): per "when the size is less than 1024px I want
       to keep the margin left and being able to scroll" - this used to
       cancel the page's own side margin (margin: 0 -20px) and re-add a
       flat 20px so the row could bleed to the edges; that's removed, so
       the row now stays inside the content column's own natural left/right
       margin instead, same as every other section on the page - it still
       scrolls/swipes exactly as before, just without breaking out. */
    .ds-start-grid {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .ds-start-arrow {
        display: flex;
    }

    .ds-start-grid::-webkit-scrollbar {
        display: none;
    }

    /* Update (2026-09-21, fourth pass): per "modify the card and making
       them really as a carrousel" - switched from "center" to "start"
       snapping. With "center", the resting card sat centered in the
       scrollport, so it peeked evenly on both sides once you'd scrolled,
       but sat flush-left with only a right-side peek on first load - two
       different-looking states for what's meant to be the same one-card
       view. "start" keeps that flush-left/peek-on-the-right framing
       consistent at every step, which reads more like a real carousel. */
    .ds-start-grid .ds-card {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    .ds-start-dots {
        display: flex;
    }
}

/* Update (2026-09-21): "Une approche systémique pluridisciplinaire" (section
   15) - no Figma spec came with this one, built entirely from your
   reference screenshot; see the on-page note in design-system.php for what
   was inferred (badge color/size, border, spacing, item width, both text
   sizes). Heading/subtitle/item copy reuse existing type tokens; the badge
   borrows "pêche" (#E79A63) from the color palette in section 01 as the
   closest match to the screenshot's orange circles; the CTA is the
   unmodified Primary/Fill button from section 05. No tablet/mobile version
   was shown in the screenshot, so the three items just wrap to fewer
   columns as the row runs out of space, rather than following a specific
   designed breakpoint. */
.ds-approach-demo {
    max-width: 1024px;
    margin: 0 auto;
    text-align: center;
}

.ds-approach-heading {
    max-width: 560px;
    margin: 0 auto var(--ds-spacing-16);
}

.ds-approach-subtitle {
    max-width: 720px;
    margin: 0 auto var(--ds-spacing-48);
}

.ds-approach-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--ds-spacing-24);
}

.ds-approach-item {
    flex: 1 1 260px;
    max-width: 320px;
    box-sizing: border-box;
    text-align: left;
    border: 1px solid var(--ds-contour-gris-clair);
    border-radius: var(--ds-radius-16);
    padding: var(--ds-spacing-32) var(--ds-spacing-24);
}

.ds-approach-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--ds-radius-full);
    background: var(--ds-peche);
    color: var(--ds-blanc);
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 18px;
    margin-bottom: var(--ds-spacing-16);
}

.ds-approach-item-title {
    margin: 0 0 var(--ds-spacing-8);
}

.ds-approach-item-text {
    margin: 0;
}

.ds-approach-cta {
    display: flex;
    justify-content: center;
    margin-top: var(--ds-spacing-48);
}

/* Update (2026-09-21): "La certification au métier de systématicien des
   organisations" (section 16) - no Figma spec, built entirely from your
   reference screenshot; see the on-page note for what's inferred and for
   the pre-existing section-08 tablet-width gap this block inherits.
   Update (2026-09-21, second pass): per your spec - "width:1440,
   height:1330, padding: 80px top/bottom, 100px left/right, gap:80px,
   background var(--ocre-def, #F6EFDD)" - turned into a proper full-bleed
   band (same 100vw/negative-margin technique as the nav/hero/footer
   above), matching the ocre background. The 1440x1330 frame size itself
   isn't reproduced literally (that's this component's own width/height at
   the moment it was exported from Figma, not a fixed box to lock the
   real, fluid page into) - what's kept is the 100px/80px padding and the
   80px gap, which now sits between this band's three top-level pieces
   (title+subtitle, the step row, and the learning block) rather than
   between every line of text. Wrapped the heading+subtitle in a new
   .ds-cert-header so that gap doesn't also land between the title and its
   own subtitle. */
.ds-cert-demo {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    box-sizing: border-box;
    background: var(--ds-ocre-def);
    padding: 80px 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 80px;
    text-align: center;
}

.ds-cert-header {
    max-width: 1024px;
}

/* Update (2026-10-27): per your screenshot - the title is "Certification" in
   the Titre H2 retro script (carmin) over "systémicien des organisations" in
   Titre H2 (Light 40px, carmin). The intro paragraph that used to sit under
   it isn't in your screenshot, so it's no longer in the markup (the
   .ds-cert-subtitle rule below is kept in case you want it back). Steps are
   now "CYCLE n" + name in marine, laid out as badge-left/text-right on white
   boxes with a smaller radius and carmin chevrons between them; the last box
   is carmin with a white check and a two-line white label. The learning block
   is a compact version of the section 08 block (160x134 photo, 48px gap, Open
   Sans 700 20px title in marine, 14px text) and its button sits centered
   under it. Sizes are read off your screenshot, not given as numbers. */
.ds-cert-heading {
    max-width: 640px;
    margin: 0 auto .5rem;
}

.ds-cert-subheading {
    margin: 0;
}

.ds-cert-subtitle {
    max-width: 720px;
    margin: 0 auto;
}

.ds-cert-steps {
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--ds-spacing-16);
    max-width: 1024px;
    width: 100%;
}

.ds-cert-step {
    flex: 1 1 200px;
    max-width: 240px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: .75rem;
    text-align: left;
    border: 1px solid transparent;
    border-radius: var(--ds-radius-8);
    padding: var(--ds-spacing-16);
    background: var(--ds-blanc);
}

.ds-cert-step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--ds-radius-full);
    background: var(--ds-carmin);
    color: var(--ds-blanc);
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 14px;
    flex: 0 0 auto;
}

.ds-cert-step-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: var(--ds-marine);
}

.ds-cert-step-cycle {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: .6875rem;
    line-height: 1.2;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.ds-cert-step-name {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: .875rem;
    line-height: 1.25;
}

.ds-cert-step-text {
    margin: 0;
}

.ds-cert-step-arrow {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    font-size: 20px;
    color: var(--ds-carmin);
}

.ds-cert-step--done {
    background: var(--ds-carmin);
    border-color: var(--ds-carmin);
}

.ds-cert-step-badge--done {
    background: var(--ds-blanc);
}

.ds-cert-step-text--done {
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: .875rem;
    line-height: 1.25;
    color: var(--ds-blanc);
}

/* Centers the reused section-08 text/image block within this section on
   any viewport narrower than its own fixed widths - that component isn't
   centered by default (its own demo in section 08 just sits at the content
   column's left edge, which is fine there). */
.ds-cert-demo .ds-block-content-image {
    margin: 0 auto;
    text-align: left;
    align-items: center;
    gap: 48px;
    max-width: 840px;
}

.ds-cert-demo .ds-block-content-image-img {
    width: 160px;
    height: 134px;
}

.ds-cert-demo .ds-block-content-image-text {
    width: auto;
    flex: 1 1 auto;
    gap: 16px;
}

.ds-cert-demo .ds-block-content-image-title {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.75rem;
    letter-spacing: -.0275rem;
}

.ds-cert-demo .ds-cert-cta {
    margin-top: -20px; /* the band's 80px gap is a bit much between the block and its button */
}

@media (max-width: 767.5px) {
    .ds-cert-demo .ds-block-content-image {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

    .ds-cert-demo .ds-block-content-image-img {
        width: 100%;
        max-width: 350px;
        height: 200px;
    }

    .ds-cert-step {
        max-width: none;
    }

    .ds-cert-step-arrow {
        display: none;
    }
}

/* Update (2026-09-21, second pass): per "keep the padding at least and do
   the mobile and tablet version" - the 100px/80px padding and 80px gap
   scale down at the usual 1024.5px/767.5px breakpoints rather than
   disappearing; both step sizes are inferred (no tablet/mobile numbers
   came with the spec), matching the 40px/20px side padding already used
   for the nav and hero at these same breakpoints. */
@media (max-width: 1024.5px) {
    .ds-cert-demo {
        padding: 60px 40px;
        gap: 60px;
    }
}

@media (max-width: 767.5px) {
    .ds-cert-demo {
        padding: 48px 20px;
        gap: 48px;
    }
}

/* Update (2026-09-21): "Supervision" (section 17) - no Figma spec, built
   entirely from your reference screenshot; see the on-page note for the
   icon-photo substitution. Plain (non-full-bleed) block, same centered
   80px-vertical-rhythm pattern as the "approche" and "point de départ"
   blocks above it rather than the certification block's own ocre band -
   your screenshot shows this one on a plain background. */
.ds-supervision-demo {
    max-width: 1024px;
    margin: 80px auto;
    text-align: center;
}

/* Update (2026-10-27): per your screenshot - "Supervision" in the Titre H2
   retro script (carmin), intro text and card titles in marine blue, cards on
   the light cream fill (ocre clair) with no visible border, a "Rejoindre"
   text link at the bottom of each, card titles in Open Sans 700 20px/28px
   (the H4 is now Inter 13px). The ocre 3 border added to every card stays on
   the base small card - here it's made transparent (the box keeps its size)
   because your screenshot shows none. Height becomes a minimum, since the
   link plus a two-line title need more than the fixed 259px. */
.ds-supervision-heading {
    margin: 0 0 16px;
}

.ds-supervision-demo .ds-card-small {
    height: auto;
    min-height: 259px;
    border-color: transparent;
    background: var(--ds-ocre-clair);
}

.ds-supervision-demo .ds-card-small-title {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.75rem;
    letter-spacing: -.0275rem;
}

.ds-supervision-demo .ds-card-small .ds-text-link {
    align-self: flex-start;
    margin-top: auto;
}

.ds-supervision-subtitle {
    max-width: 720px;
    margin: 0 auto 48px;
}

.ds-supervision-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--ds-spacing-24);
    margin-bottom: var(--ds-spacing-48);
}

.ds-supervision-cta {
    display: flex;
    justify-content: center;
}

/* Update (2026-09-21): "Formez-vous à la pensée systémique..." (section
   18) - no Figma spec, built entirely from your reference screenshot. Same
   centered, 80px-vertical-rhythm wrapper as "approche" and "supervision"
   above it; the three rows inside are the unmodified "Program list row"
   component from section 10 (.ds-card-list), just stacked with a gap. */
.ds-formez-demo {
    max-width: 1024px;
    margin: 80px auto;
    text-align: center;
}

/* Update (2026-10-27): per your screenshot and "update this bloc with the font
   accordingly" - the heading is now "Dans mon" in Titre H2 (Light 40px, carmin)
   over "métier" in the Titre H2 retro script (Retromark Script Demo, 64px,
   carmin), on two centered lines. The subtitle copy follows the screenshot too,
   in the marine blue. */
.ds-formez-heading {
    margin: 0 0 16px;
}

.ds-formez-heading-retro {
    display: block;
}

.ds-formez-subtitle {
    max-width: 720px;
    margin: 0 auto 48px;
}

.ds-formez-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ds-spacing-24);
    margin-bottom: var(--ds-spacing-48);
}

.ds-formez-cta {
    display: flex;
    justify-content: center;
}

/* Update (2026-09-21): "Témoignages" (section 19) - no Figma spec, built
   entirely from your reference screenshot. Full-bleed band, same
   technique and ocre background as the certification block (section 16) -
   your screenshot shows the same warm cream tone. The card itself is a
   new component: white fill, soft shadow, a plain "❝" glyph in "or" gold
   standing in for a quote icon, italic quote + bold name + gray role. */
.ds-testimonial-demo {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    box-sizing: border-box;
    background: var(--ds-ocre-def);
    padding: 80px 100px;
    text-align: center;
}

.ds-testimonial-heading {
    margin: 0 0 48px;
}

.ds-testimonial-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--ds-spacing-32);
    max-width: 1024px;
    margin: 0 auto;
}

.ds-testimonial-card {
    flex: 1 1 380px;
    max-width: 460px;
    box-sizing: border-box;
    text-align: left;
    background: var(--ds-blanc);
    border-radius: var(--ds-radius-16);
    padding: var(--ds-spacing-32);
    box-shadow: 0px 4px 12px 0px #00000014;
}

.ds-testimonial-quote {
    display: block;
    font-size: 40px;
    line-height: 1;
    color: var(--ds-or);
    margin-bottom: var(--ds-spacing-16);
}

.ds-testimonial-text {
    margin: 0 0 var(--ds-spacing-24);
}

.ds-testimonial-name,
.ds-testimonial-role {
    margin: 0;
}

@media (max-width: 1024.5px) {
    .ds-testimonial-demo {
        padding: 60px 40px;
    }
}

@media (max-width: 767.5px) {
    .ds-testimonial-demo {
        padding: 48px 20px;
    }

    .ds-testimonial-grid {
        flex-direction: column;
        align-items: center;
    }

    .ds-testimonial-card {
        width: 100%;
        max-width: 100%;
    }
}

/* Update (2026-09-21): "Le Cercle" (section 20) - no Figma spec, built from
   your reference screenshot. Reuses the existing "Blog card" component
   (.ds-card-blog, Figma spec 2026-09-18) exactly as defined - border,
   fill, hover shadow, tag chip - only .ds-card-blog-title is new/additive,
   a bold title line slotted between the tag and the existing
   .ds-card-blog-body paragraph (the base demo only had a single body
   paragraph, your screenshot shows a separate title + description). */
.ds-cercle-demo {
    max-width: 1024px;
    margin: 80px auto;
    text-align: center;
}

.ds-cercle-heading {
    margin: 0 0 16px;
}

.ds-cercle-subtitle {
    margin: 0 0 48px;
}

.ds-cercle-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--ds-spacing-24);
    margin-bottom: var(--ds-spacing-48);
}

.ds-card-blog-title {
    margin: 0;
}

/* Update (2026-10-27): "Le Cercle" per your screenshot - the heading is the
   Titre H2 retro script (carmin), the intro is marine blue, the tag becomes a
   solid carmin chip with white text (em padding/corners, no emoji), the card
   title is Open Sans 700 20px/28px in marine (same as the other card titles -
   the H4 it used to ride on is now Inter 13px) and the second button is the
   carmin outline instead of the dark one. Scoped to .ds-cercle-demo so the
   base blog card and the ocre tag in section 07 stay as they were. */
.ds-cercle-demo .ds-tag {
    min-width: 0;
    min-height: 0;
    padding: .2857em .7143em;
    border-radius: .2857em;
    background: var(--ds-carmin);
    color: var(--ds-blanc);
}

.ds-cercle-demo .ds-card-blog-title {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.75rem;
    letter-spacing: -.0275rem;
}

.ds-cercle-cta {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--ds-spacing-16);
}

/* Update (2026-09-21): "Certification Qualiopi" (section 21) - no Figma
   spec, built from your reference screenshot. Background reuses the
   existing turquoise-20 wash (already used for icon badges elsewhere)
   rather than a new color token, since it's a close match to the pale
   mint in your screenshot.
   Update (2026-09-21, second pass): per "should be 100% full width" -
   converted from a contained rounded panel to a full-bleed band using
   the same 100vw/negative-margin technique as the FAQ and certification
   bands above; the corner radius is dropped for the same reason noted on
   the FAQ band - it doesn't read well once the fill touches both screen
   edges. The logo + text row now sits in its own 1024px-max centered
   column inside the band, same pattern as the certification block's
   header. */
.ds-qualiopi-demo {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    box-sizing: border-box;
    background: var(--ds-turquoise-20);
    padding: var(--ds-spacing-64) var(--ds-spacing-24);
    text-align: center;
}

.ds-qualiopi-heading {
    margin: 0 0 32px;
}

.ds-qualiopi-row {
    max-width: 1024px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: var(--ds-spacing-32);
    text-align: left;
}

.ds-qualiopi-logo {
    flex: 0 0 140px;
    width: 140px;
    height: 140px;
    border-radius: var(--ds-radius-full);
    background: var(--ds-blanc);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.ds-qualiopi-logo img {
    width: 70%;
    height: 70%;
    object-fit: contain;
}

.ds-qualiopi-text {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: var(--ds-spacing-8);
}

.ds-qualiopi-text p {
    margin: 0;
}

@media (max-width: 1024.5px) {
    .ds-qualiopi-demo {
        padding: var(--ds-spacing-48) var(--ds-spacing-16);
    }
}

@media (max-width: 767.5px) {
    .ds-qualiopi-row {
        flex-direction: column;
        text-align: center;
    }
}

/* Update (2026-11-02): "Certification Qualiopi" (section 21), new design from your
   capture of the home page (frame scaled to 2/3 of 1440, measures converted back):
   heading = "Certification" H2 carmin over "Qualiopi" H2 retro; below, the FSL
   certificate (224px wide, 10px corners, soft shadow) on the left, and on the
   right the text in Chapeau marine (20px / 1.35, 417px column), the italic
   mention and the Qualiopi badge (190px wide image on white, 15px corners).
   Row 713px wide (224 + 72 gap + 417), centered; band padding 80px. The old
   round logo medallion classes above are kept but no longer used. */
.ds-qualiopi-demo--certificat {
    padding: 80px var(--ds-spacing-24);
}

.ds-qualiopi-demo--certificat .ds-qualiopi-heading {
    margin: 0 0 48px;
}

.ds-qualiopi-heading-retro {
    display: block;
}

.ds-qualiopi-row--certificat {
    max-width: 713px;
    justify-content: center;
    gap: 72px;
}

.ds-qualiopi-certificat {
    flex: 0 0 224px;
    width: 224px;
    border-radius: 10px;
    background: var(--ds-blanc);
    box-shadow: 0px 4px 12px 0px #00000014;
    overflow: hidden;
    line-height: 0;
}

.ds-qualiopi-certificat img {
    display: block;
    width: 100%;
    height: auto;
}

.ds-qualiopi-text--certificat {
    flex: 0 1 417px;
    gap: var(--ds-spacing-24);
}

.ds-qualiopi-text--certificat .ds-qualiopi-lead {
    line-height: 1.35;
}

/* the italic mention wraps at ~340px in your capture ("... actions de / formation.") */
.ds-qualiopi-text--certificat .ds-qualiopi-small {
    max-width: 340px;
}

.ds-qualiopi-badge {
    align-self: flex-start;
    width: 190px;
    max-width: 100%;
    border-radius: 15px;
    background: var(--ds-blanc);
    overflow: hidden;
    line-height: 0;
}

.ds-qualiopi-badge img {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 1024.5px) {
    .ds-qualiopi-demo--certificat {
        padding: 56px var(--ds-spacing-16);
    }

    .ds-qualiopi-row--certificat {
        gap: 48px;
    }
}

@media (max-width: 767.5px) {
    .ds-qualiopi-row--certificat {
        flex-direction: column;
        gap: 32px;
    }

    .ds-qualiopi-certificat {
        flex: 0 0 auto;
    }

    .ds-qualiopi-text--certificat {
        flex: 0 1 auto;
        align-items: center;
        gap: var(--ds-spacing-16);
    }

    .ds-qualiopi-badge {
        align-self: center;
    }
}

/* Update (2026-09-21): "Financer votre formation" (section 22) - no Figma
   spec, built from your reference screenshot. Each row is a new
   component - turquoise-outlined rounded box (border/radius reused from
   the small card component) with a small circular icon, title +
   description, and an "En savoir plus" text link, stacked as a list.
   Your screenshot shows a small blurry photo per row, but nothing in the
   image library matches those generically, so - same reasoning as the
   Supervision section - this uses a plain emoji in a circular badge
   instead. */
.ds-financer-demo {
    max-width: 1024px;
    margin: 80px auto;
    text-align: center;
}

/* Update (2026-10-27): per your screenshot - same heading treatment as the
   "Dans mon métier" block: "Financer votre" in Titre H2 (Light 40px, carmin)
   over "formation" in the Titre H2 retro script, intro text in marine blue,
   row titles in marine at Open Sans 700 20px/28px (the H4 they rode on is now
   Inter 13px) and descriptions in the dark text color. */
.ds-financer-heading {
    margin: 0 0 16px;
}

.ds-financer-heading-retro {
    display: block;
}

.ds-financer-subtitle {
    margin: 0 0 40px;
}

.ds-financer-list {
    display: flex;
    flex-direction: column;
    gap: var(--ds-spacing-16);
    margin-bottom: var(--ds-spacing-32);
    text-align: left;
}

.ds-financer-row {
    display: flex;
    align-items: center;
    gap: var(--ds-spacing-16);
    padding: var(--ds-spacing-24);
    box-sizing: border-box;
    border: 1px solid var(--ds-ocre-3);
    border-radius: var(--ds-radius-16);
    background: var(--ds-blanc);
}

.ds-financer-icon-badge {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: var(--ds-radius-full);
    background: var(--ds-turquoise-20);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ds-financer-icon {
    font-size: 18px;
    line-height: 1;
}

/* Update (2026-10-27): per "the block title should be on the left side and the
   main text on the right side" - inside each row the title now sits on the
   left, on one line, with the description to its right (they used to be
   stacked), then the link at the far right, as in your screenshot. Title width
   follows its text, so the descriptions don't line up in a column from row to
   row - same as the screenshot. Below 767.5px they stack again (see the
   mobile block further down). */
.ds-financer-text {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    min-width: 0;
}

.ds-financer-title {
    flex: 0 0 auto;
    white-space: nowrap;
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.75rem;
    letter-spacing: -.0275rem;
}

.ds-financer-body {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
}

.ds-financer-row .ds-text-link {
    flex: 0 0 auto;
    white-space: nowrap;
}

.ds-financer-cta {
    display: flex;
    justify-content: center;
}

@media (max-width: 767.5px) {
    .ds-financer-text {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .ds-financer-title {
        white-space: normal;
    }

    .ds-financer-row {
        flex-wrap: wrap;
    }

    .ds-financer-row .ds-text-link {
        flex: 1 1 100%;
        margin-left: 56px;
    }
}

/* Update (2026-09-21): "Des questions ?" CTA band (section 23) - no Figma
   spec, built from your reference screenshot. Full-bleed band, same
   100vw/negative-margin technique as the FAQ band above, but with the
   turquoise-20 wash already used for the Qualiopi panel instead of ocre,
   since your screenshot shows a cooler pale mint here rather than the
   FAQ's cream. */
.ds-questions-demo {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    box-sizing: border-box;
    background: var(--ds-turquoise-20);
    padding: var(--ds-spacing-64) var(--ds-spacing-24);
    text-align: center;
}

.ds-questions-heading {
    margin: 0 0 16px;
}

.ds-questions-subtitle {
    max-width: 520px;
    margin: 0 auto var(--ds-spacing-32);
}

.ds-questions-cta {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--ds-spacing-16);
}

@media (max-width: 1024.5px) {
    .ds-questions-demo {
        padding: var(--ds-spacing-48) var(--ds-spacing-16);
    }
}

/* --- tag / label chip (Figma spec, 2026-09-18) --- */
.ds-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 139px;
    min-height: 25px;
    padding: 2px var(--ds-spacing-16);
    box-sizing: border-box;
    border-radius: 4px;
    background: var(--ds-ocre-def);
    color: var(--ds-texte-fonce);
    white-space: nowrap;
}

/* Update (2026-10-27), per fsl-updating-cards.md - "tag update domaine-competences":
   five coloured variants, width/height auto, gap 8, padding 4/8, radius 8.
   Sized in em (against the 14px "Bouton tag" text: 8px = .5714em, 4px = .2857em)
   so the padding, gap and corners scale with the label if its size changes.
   The original .ds-tag chip above is untouched. White text is inferred - no
   text color came with the spec - since white reads on all five fills. */
.ds-tag-competence {
    display: inline-flex;
    align-items: center;
    gap: .5714em;
    width: auto;
    height: auto;
    padding: .2857em .5714em;
    border-radius: .5714em;
    box-sizing: border-box;
    white-space: nowrap;
}

.ds-tag-competence.ds-bouton-tag { color: var(--ds-blanc); }
.ds-tag-competence--intervention { background: var(--ds-domaine-intervention); }
.ds-tag-competence--organisation { background: var(--ds-domaine-organisation); }
.ds-tag-competence--collectif { background: var(--ds-domaine-collectif); }
.ds-tag-competence--pensee { background: var(--ds-domaine-pensee); }
.ds-tag-competence--entrainer { background: var(--ds-domaine-entrainer); }

/* Update (2026-10-27), per fsl-updating-cards.md - "label-sous-menu": auto size,
   gap 10, radius 10, padding 10/20, 1px border; hover = carmin border + a
   0 4px 4px #00000040 shadow, animated 300ms ease-out; on click it switches
   instantly (0ms). All in em against the 16px label text (10px = .625em,
   20px = 1.25em). The default (non-hover) fill and border color weren't given:
   inferred as ocre def + ocre 3, matching the cards. Figma's top/left 20px was
   canvas position, left out. */
.ds-label-sous-menu {
    display: inline-flex;
    align-items: center;
    gap: .625em;
    width: auto;
    height: auto;
    padding: .625em 1.25em;
    border-radius: .625em;
    /* Update (2026-11-02), per your "sous menu" capture: white fill, marine 1px
       border and marine text by default (was ocre); hover = carmin border and
       text + the 0 4px 4px #00000040 shadow. Same look as .ds-chip-filter. */
    border: 1px solid var(--ds-marine);
    background: var(--ds-blanc);
    --ds-type-color: var(--ds-marine);
    font-weight: 600;
    box-sizing: border-box;
    text-decoration: none;
    opacity: 1;
    transition: border-color 300ms ease-out, box-shadow 300ms ease-out, color 300ms ease-out;
}

.ds-label-sous-menu:hover,
.ds-label-sous-menu.is-hover {
    border-color: var(--ds-carmin);
    --ds-type-color: var(--ds-carmin);
    box-shadow: 0px 4px 4px 0px #00000040;
}

.ds-label-sous-menu:active {
    transition-duration: 0ms;
}

/* --- blog card (Figma spec, 2026-09-18) --- */
.ds-card-blog {
    width: 321px;
    height: 544px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 36px;
    border-radius: var(--ds-radius-24);
    border: 1px solid var(--ds-ocre-3);
    background: var(--ds-blanc);
    overflow: hidden;
    text-align: center;
    cursor: pointer;
    transition: box-shadow .25s ease;
}

.ds-card-blog:hover,
.ds-card-blog.is-hover {
    box-shadow: 0px 8px 24px 0px #0000004D;
}

.ds-card-blog-img {
    width: 100%;
    height: 258px;
    flex: 0 0 auto;
    border-top-left-radius: var(--ds-radius-24);
    border-top-right-radius: var(--ds-radius-24);
    overflow: hidden;
}

.ds-card-blog-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ds-card-blog-content {
    width: 100%;
    box-sizing: border-box;
    padding: 0 var(--ds-spacing-24);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ds-spacing-16);
}

/* --- small card (Figma spec, 2026-09-18) --- */
.ds-card-small {
    width: 303px;
    height: 259px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 17px;
    padding: 30px;
    border-radius: var(--ds-radius-16);
    border: 1px solid var(--ds-ocre-3);
    background: var(--ds-blanc);
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    transition: box-shadow .25s ease;
}

.ds-card-small:hover,
.ds-card-small.is-hover {
    box-shadow: 0px 8px 24px 0px #0000004D;
}

.ds-card-small-icon {
    font-size: 32px;
    line-height: 1;
}

.ds-card-small-title {
    margin: 0;
}

.ds-card-small-text {
    margin: 0;
}

/* Update (2026-09-21): additive wrapper for the "Supervision" section
   (17) - its screenshot shows a circular photo above each card's title
   instead of a bare emoji, but there's no matching photo (globe, hand
   with leaves, supervisors' own portraits) in the image library, so this
   just gives the existing emoji icon a plain circular badge behind it
   instead. Section 07's own icon usage is untouched (no badge there). */
.ds-card-small-icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--ds-radius-full);
    background: var(--ds-turquoise-20);
}

.ds-card-small-icon-badge .ds-card-small-icon {
    font-size: 22px;
}

/* --- editorial card (Figma spec, 2026-09-18) --- */
.ds-card-editorial {
    width: 300px;
    height: 298px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 17px;
    padding: 30px;
    border-radius: var(--ds-radius-24);
    border: 1px solid var(--ds-ocre-3);
    background: var(--ds-ocre-def);
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    transition: box-shadow .25s ease;
}

/* Update (2026-10-27), per "add for every card the border ... box-shadow: 0px 8px 24px 0px #0000004D":
   both editorial cards get the ocre 3 border and the same hover drop shadow as the other cards. */
.ds-card-editorial:hover,
.ds-card-editorial.is-hover,
.ds-card-editorial-alt:hover,
.ds-card-editorial-alt.is-hover {
    box-shadow: 0px 8px 24px 0px #0000004D;
}

/* badge: a number (ocre card) or a round photo (white card) - same slot, per the reference screenshot */
.ds-card-editorial-badge {
    width: 56px;
    height: 56px;
    flex: 0 0 auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.ds-card-editorial-badge--number {
    background: var(--ds-turquoise);
    color: var(--ds-blanc);
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 20px;
}

.ds-card-editorial-badge img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ds-card-editorial-title {
    margin: 0;
}

.ds-card-editorial-text {
    margin: 0;
}

/* second "editorial" variant (Figma spec, 2026-09-18) - sits next to the ocre
   card above: white fill, turquoise border, slightly different box (303x259
   vs the ocre card's 300x298). No hover given for this one either. */
.ds-card-editorial-alt {
    width: 303px;
    height: 259px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 17px;
    padding: 30px;
    border-radius: var(--ds-radius-16);
    border: 1px solid var(--ds-ocre-3);
    background: var(--ds-blanc);
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    transition: box-shadow .25s ease;
}

/* --- content block: image + text (Figma spec, 2026-09-18) --- */
/* Desktop: 500px image + 60px gap + 464px text = 1024px, matching .content's
   existing max-width exactly. Title reuses H3 (600/24px/100%/-0.44px) and the
   paragraph reuses "Texte" (400/16px/28px/-0.44px) - both matched an existing
   type token exactly, so no new font rules needed here. */
.ds-block-content-image {
    display: flex;
    gap: 60px;
}

.ds-block-content-image-img {
    width: 500px;
    height: 358px;
    flex: 0 0 auto;
    border-radius: var(--ds-radius-16);
    overflow: hidden;
}

.ds-block-content-image-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ds-block-content-image-text {
    width: 464px;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 40px;
    text-align: left;
}

.ds-block-content-image-title {
    margin: 0;
}

.ds-block-content-image-text p {
    margin: 0;
}

/* Mobile: the spec gave literal fixed widths (350px block/image/text) and a
   fixed text-block height (475px) sized to this exact copy. Reproduced here
   as a floor rather than a hard lock - width becomes fluid (max-width:350px)
   and the text block's height becomes a minimum - so it doesn't clip or
   letterbox on a narrower/wider phone or with different copy length. See the
   note on the page for the image corner-radius call I had to make too. */
@media (max-width: 767.5px) {
    .ds-block-content-image {
        flex-direction: column;
        gap: 30px;
        width: 100%;
        max-width: 350px;
    }

    .ds-block-content-image-img {
        width: 100%;
        height: 358px;
        border-radius: var(--ds-radius-16);
    }

    .ds-block-content-image-text {
        width: 100%;
        min-height: 475px;
        gap: 40px;
    }
}

/* --- program card (Figma spec, 2026-09-18) ---
   A single bordered card (not two independent floating pieces like the
   content-block above), so the image sits flush against the card's own
   edges - that's why the spec's partial corner radii (left-only on
   desktop/tablet, top-only on mobile) are reproduced literally here instead
   of corrected to all four corners the way the content-block image was.
   Border color and card fill weren't in the handoff - turquoise
   border / blanc fill, matching every other bordered card in this system. */
/* Update (2026-10-27), per fsl-updating-big-card.md: 1022px wide (max-width,
   so it still shrinks), 517px tall (min-height, so longer copy grows it
   instead of clipping - same floor-not-fixed-size reasoning as the buttons),
   gap 60px between photo and text, 36px padding on the right, 16px radius,
   1px border. Hover: 0 4px 4px #00000040 shadow, animated 300ms ease-out;
   on click it switches instantly (0ms). The spec lists the shadow once, next
   to the hover variant, so it's read as the hover shadow, not a resting one. */
.ds-card-program {
    display: flex;
    align-items: stretch;
    gap: 60px;
    width: 100%;
    max-width: 1022px;
    min-height: 517px;
    margin-left: auto;
    margin-right: auto;
    padding-right: 36px;
    box-sizing: border-box;
    border-radius: var(--ds-radius-16);
    border: 1px solid var(--ds-ocre-3);
    background: var(--ds-blanc);
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow 300ms ease-out;
}

.ds-card-program:hover,
.ds-card-program.is-hover {
    box-shadow: 0px 4px 4px 0px #00000040;
}

.ds-card-program:active {
    transition-duration: 0ms;
}

.ds-card-program-img {
    flex: 0 0 500px;
    border-top-left-radius: var(--ds-radius-16);
    border-bottom-left-radius: var(--ds-radius-16);
    overflow: hidden;
}

.ds-card-program-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Update (2026-11-02): the "Les premiers pas" photo is now a landscape HD shot
   (piscine-home-fsl-photo, 2736x2160) shown in a near-square frame, so the crop is
   anchored to the right (78%) to keep the woman's face in view instead of the
   centre of the picture. */
.ds-card-program-img--droite img {
    object-position: 78% 50%;
}

/* Body: tag + text-section + button, vertically centered in the 490px card.
   Padding: 60px left (this is what creates the gap into the image - there's
   no separate flex gap on the card itself), 36px on the other three sides,
   per the correction. The other internal gaps (tag-to-title-block,
   text-section-to-button) weren't specified, so I reused this system's
   24px spacing step rather than inventing a one-off number. */
.ds-card-program-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--ds-spacing-24);
    padding: 36px 0; /* the 60px photo gap and 36px right padding now live on the card itself */
    box-sizing: border-box;
}

.ds-card-program-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    min-width: 158px;
    min-height: 30px;
    padding: .2857em .5714em; /* 4px / 8px at the 14px tag text - em so it follows the label */
    gap: .5714em;
    box-sizing: border-box;
    border-radius: .5714em;
    /* Update (2026-10-27): per your screenshots, the chip is now outlined in
       carmin on white with carmin text (was an ocre fill) */
    border: 1px solid var(--ds-carmin);
    background: var(--ds-blanc);
    color: var(--ds-carmin);
    white-space: nowrap;
}

.ds-card-program-text {
    display: flex;
    flex-direction: column;
    gap: var(--ds-spacing-24);
}

.ds-card-program-title {
    margin: 0;
}

.ds-card-program-paragraph {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ds-card-program-copy {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.ds-card-program-copy p {
    margin: 0;
}

.ds-card-program-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-spacing-24);
}

/* Update (2026-10-27): meta row per your screenshots - outline calendar and
   price-tag icons (1em, so they track the 16px text) instead of emoji,
   "42 heures" bold + "(6 jours)" regular, "à partir de" regular + the price
   bold. Typography from fsl-updating-big-card.md (16px/22px, -0.44px). */
.ds-card-program-meta-item {
    display: inline-flex;
    align-items: center;
    gap: .5em;
}

.ds-card-program-meta-item svg {
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
    color: var(--ds-texte-fonce);
}

/* Tablet: image width changes (400px vs. desktop's 500px), and the body's
   padding drops to 24px left/right (36px top/bottom stays the same) per
   the correction - the 60px left padding was specific to desktop. */
@media (max-width: 1024.5px) {
    .ds-card-program {
        gap: 0;
        padding-right: 0;
    }

    .ds-card-program-img {
        flex-basis: 400px;
    }

    .ds-card-program-body {
        padding: 36px 24px;
    }
}

/* Mobile: stacked, image on top with only its top corners rounded (it's
   flush against the card's left/right/top edges now, with the body below
   it instead of beside it). Body padding here is still my own original
   24px-flat guess (not covered by the desktop/tablet correction) - flag
   if you want the same 36px top/bottom, 24px left/right pattern here too. */
@media (max-width: 767.5px) {
    .ds-card-program {
        flex-direction: column;
    }

    .ds-card-program-img {
        flex-basis: auto;
        width: 100%;
        height: 300px;
        border-top-left-radius: var(--ds-radius-16);
        border-top-right-radius: var(--ds-radius-16);
        border-bottom-left-radius: 0;
    }

    .ds-card-program-body {
        padding: 24px;
    }

    /* per your mobile screenshot: the two meta lines stack and the button
       spans the card */
    .ds-card-program-meta {
        flex-direction: column;
        gap: var(--ds-spacing-8);
    }

    .ds-card-program-body .ds-btn {
        width: 100%;
    }
}

/* --- program list row (Figma spec, 2026-09-18, updated 2026-09-20) ---
   A compact, single-line variant: same flush-image-in-a-bordered-card
   pattern as the program card above, but a horizontal strip instead of a
   two-column block. The text block was inheriting centered text from the
   .ds-card-preview wrapper it sits in (that wrapper centers its caption
   underneath each swatch) - fixed by setting text-align:left explicitly
   here instead of relying on the default. The image-to-text spacing is
   now a dedicated 36px margin on the text block rather than the row's
   general flex gap, so it doesn't also stretch the (much less important)
   gap before the link on the far right. */
.ds-card-list {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 1024px;
    min-height: 104px;
    padding-right: 48px;
    box-sizing: border-box;
    border-radius: var(--ds-radius-24);
    border: 1px solid var(--ds-ocre-3);
    background: var(--ds-blanc);
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow .25s ease;
}

.ds-card-list:hover,
.ds-card-list.is-hover {
    box-shadow: 0px 8px 24px 0px #0000004D;
}

.ds-card-list-img {
    flex: 0 0 200px;
    width: 200px;
    height: 104px;
    border-top-left-radius: var(--ds-radius-24);
    border-bottom-left-radius: var(--ds-radius-24);
    overflow: hidden;
}

.ds-card-list-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Title/subtitle gap wasn't in the original handoff - corrected to 16px
   per your note (was an inferred 4px). Subtitle reuses "Texte", the same
   default-body-copy fallback used everywhere else in this system when a
   text style wasn't specified. Text-align:left stays explicit here since
   this sits inside a .ds-card-preview wrapper that centers its own
   caption underneath each swatch. */
.ds-card-list-text {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: var(--ds-spacing-16);
    min-width: 0;
    margin-left: 36px;
    text-align: left;
}

.ds-card-list-title,
.ds-card-list-subtitle {
    margin: 0;
}

/* Update (2026-10-27): the row title was an H4, which is now Inter 13px and
   read too small next to the subtitle in your screenshot - it now uses the
   same Open Sans 700 20px/28px as the card titles. Color comes from the
   inline --ds-type-color (marine, as in the screenshot). */
.ds-card-list .ds-card-list-title {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.75rem;
    letter-spacing: -.0275rem;
}

@media (max-width: 767.5px) {
    .ds-type-meta,
    .ds-spacing-meta {
        width: 100%;
        flex-basis: 100%;
    }
}

/* --- FAQ accordion (Figma spec, 2026-09-18) ---
   Only the individual dropdown row (1024x70 closed, padding, chevron,
   question/answer typography) and the "H2 + 60px margin-bottom" heading
   came with the handoff. The ocre band behind the whole thing, its
   padding, the item corner radius, and the gap between items weren't
   specified - all inferred from the screenshot and flagged here. The
   dashed magenta outline around the first two rows in your screenshot is
   Figma's own "selected component" indicator, not a real border, so no
   border color is applied to the items - only the border-width the spec
   gave, left transparent. Question/answer typography matched existing
   tokens exactly ("Texte highlight" for the question, "Texte" for the
   answer), reused instead of duplicated. Built as an actual working
   accordion (click to expand/collapse), not just a static mock.
   The whole page's content sits inside the site's .content wrapper,
   which caps out at 1024px and centers itself - that's why the ocre
   band was only ever as wide as the page column instead of the full
   screen. This breaks it out to the full viewport width with the usual
   full-bleed trick (100vw + negative margins, safe here since the site
   already sets overflow-x:hidden), then re-centers the actual list
   inside it at the same 1024px content width so the rows themselves
   don't stretch edge to edge. Dropped the section's own corner radius
   in the process - a band that touches both screen edges reads oddly
   with rounded corners, so this is the one wrapper without any. */
.ds-faq-section {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    box-sizing: border-box;
    background: var(--ds-ocre-def);
    padding: var(--ds-spacing-64) var(--ds-spacing-24);
}

.ds-faq-title {
    text-align: center;
    margin: 0 0 60px;
    color: var(--ds-texte-fonce);
}

.ds-faq-list {
    display: flex;
    flex-direction: column;
    gap: var(--ds-spacing-8);
    max-width: 1024px;
    margin: 0 auto;
}

.ds-faq-item {
    background: var(--ds-blanc);
    border: 1px solid transparent;
    border-radius: var(--ds-radius-8);
    overflow: hidden;
}

.ds-faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-spacing-16);
    padding: 24px;
    box-sizing: border-box;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.ds-faq-question-label {
    margin: 0;
}

.ds-faq-chevron {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    transition: transform .2s ease;
}

.ds-faq-item.is-open .ds-faq-chevron {
    transform: rotate(180deg);
}

.ds-faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .25s ease;
}

.ds-faq-item.is-open .ds-faq-answer {
    grid-template-rows: 1fr;
}

.ds-faq-answer-inner {
    overflow: hidden;
}

/* Update (2026-11-02), per "be sure the padding when it's open is aligned, check on all the FAQ":
   the answer's side / bottom padding used to be on paragraphs only, so a list inside an answer (the
   "Contenu de la formation" steps) sat flush against the card edge. Paragraphs AND lists now carry the
   same 24px as the question row (16px on mobile), and the list dash lines up with the question label. */
.ds-faq-answer p,
.ds-faq-answer ul,
.ds-faq-answer ol {
    margin: 0;
    padding: 0 24px 24px;
}

.ds-faq-answer .ds-cycle-list li::before {
    left: 0;
}

@media (max-width: 1024.5px) {
    .ds-faq-section {
        padding: var(--ds-spacing-48) var(--ds-spacing-16);
    }
}

@media (max-width: 767.5px) {
    .ds-faq-title {
        margin-bottom: var(--ds-spacing-32);
    }

    .ds-faq-question {
        padding: var(--ds-spacing-16);
    }

    .ds-faq-answer p,
    .ds-faq-answer ul,
    .ds-faq-answer ol {
        padding: 0 var(--ds-spacing-16) var(--ds-spacing-16);
    }
}

/* --- footer (Figma spec, 2026-09-20) ---
   This is a new, light-background footer (white bg, dark text) - a
   redesign of the site's current live footer, which is a dark bleu-encre
   band with white text (see page-footer in styles.css). Documented here
   as its own reference component rather than reusing/overriding the live
   one. The "FSL" column title and the "Notre newsletter" label share one
   typography (600/20px/28px/-0.44px) that matches H4 exactly; the other
   three column titles use a smaller bold style (700/14px/100%/0) that
   matches "Texte small highlight" exactly; every link/list item across
   all four columns uses "Texte small" at texte-sur-blanc gray, per your
   note. None of these titles had an explicit color in the handoff except
   FSL's (texte foncé) - I used texte foncé for the other three too, for
   consistency, and flagged it. Column count, inter-column gaps, the
   newsletter row's label-to-form gap, the input's border/pill shape and
   the divider lines above the footer and above the copyright line are
   all inferred from your screenshots, not given as numbers. The three
   screenshots read as desktop (4 columns, inline newsletter), tablet
   (same 4-column layout, just narrower) and mobile (2x2 column grid,
   stacked newsletter, and the button label shortens from "S'inscrire" to
   "OK") - implemented with the same 1024.5px/767.5px breakpoints used
   everywhere else in this system. */
.ds-footer-demo {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-top: 1px solid var(--ds-contour-gris-clair);
    padding-top: var(--ds-spacing-48);
}

/* Wraps the columns row and the newsletter row so they share one left
   edge - this box sizes to whichever of the two is wider (align-items:
   flex-start keeps both flush to that same edge instead of each row
   centering independently), and centering THIS wrapper as a whole is
   what keeps "FSL" and "Notre newsletter" lined up together, per your
   note, while still reading as centered on the page. */
.ds-footer-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ds-spacing-48);
}

/* Flex, not a 4-column grid: repeat(4, 1fr) was stretching each column to
   an equal share of the full 1024px row, which spread short columns like
   "FSL" and "Contact" out with a lot of empty space after their links.
   Flex sizes each column to its own content instead, so the four sit
   close together as a group. */
.ds-footer-columns {
    display: flex;
    gap: 60px;
}

.ds-footer-col {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: var(--ds-spacing-16);
    text-align: left;
}

/* padding:0 is required here, not just a nicety - the site's global
   styles.css has [class*=col-]{padding:1rem} for Bootstrap's .col-*
   grid classes, and "ds-footer-col-title" incidentally contains "col-"
   as a substring, so it was silently picking up that 1rem padding on
   all sides and pushing the text off the left edge. */
.ds-footer-col-title {
    margin: 0;
    padding: 0;
    text-align: left;
}

.ds-footer-link {
    text-decoration: none;
}

.ds-footer-newsletter {
    display: flex;
    align-items: center;
    gap: 40px;
}

.ds-footer-newsletter-label {
    margin: 0;
    flex: 0 0 auto;
}

.ds-footer-form {
    display: flex;
    align-items: center;
    gap: 24px;
}

.ds-footer-form-input {
    width: 300px;
    height: 53px;
    padding: 0 20px;
    box-sizing: border-box;
    border: 1px solid var(--ds-contour-gris-clair);
    border-radius: var(--ds-radius-full);
    background: var(--ds-blanc);
    text-align: left;
}

.ds-footer-form-input::placeholder {
    color: var(--ds-texte-sur-blanc);
    opacity: 1;
}

.ds-footer-bottom {
    align-self: stretch;
    margin-top: var(--ds-spacing-48);
    border-top: 1px solid var(--ds-contour-gris-clair);
    padding-top: var(--ds-spacing-24);
    text-align: center;
}

.ds-footer-bottom p {
    margin: 0;
}

@media (max-width: 1024.5px) {
    .ds-footer-columns {
        gap: 40px;
    }
}

@media (max-width: 767.5px) {
    .ds-footer-columns {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        justify-items: start;
        gap: 32px 24px;
    }

    .ds-footer-newsletter {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--ds-spacing-16);
    }

    .ds-footer-form {
        width: 100%;
    }

    .ds-footer-form-input {
        width: auto;
        flex: 1 1 auto;
    }
}

/* --- navigation / header (Figma spec, 2026-09-20) ---
   A new ocre nav bar, replacing the live site's white/blurred one - like
   the footer, documented here as its own component. Only the logo's
   typography, the 100px side padding, and the bar's own 1240px max-width
   and 78px height came with the handoff. The link row's own typography
   (reused "Texte small", the system's default link/list style), the gap
   between links, and the "Contact" button's size weren't specified - it
   reuses the exact Button-border/Outline component from section 05
   (ds-btn ds-btn-outline-fill ds-btn-outline), 244x53 floor size and all,
   to match that component rather than inventing a nav-only variant of it.
   No tablet/mobile spec came with
   this either - the real site already has a working hamburger menu for
   narrow screens (see the header markup at the top of this page), so
   this reference sticks to the desktop bar and just keeps the side
   padding from clipping content as the screen narrows, rather than
   inventing a new mobile nav pattern nothing here asked for. Full-bleed
   like the FAQ band, since a nav bar spanning only the page's content
   column wouldn't make sense. */
.ds-nav-demo {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    background: var(--ds-ocre-def);
}

/* Single line, no wrap - logo pinned left, the links+button group pinned
   right via justify-content:space-between. Desktop only: below 767.5px
   the full link row and its horizontal scroll are replaced with the
   compact "FSL" + Contact + burger layout further down. */
.ds-nav-inner {
    max-width: 1240px;
    min-height: 78px;
    margin: 0 auto;
    padding: 20px 100px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: nowrap;
}

.ds-nav-logo {
    margin: 0;
    flex: 0 0 auto;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: -0.44px;
    color: var(--ds-texte-fonce);
    white-space: nowrap;
}

/* Update (2026-09-21): per "Menu tablet mini. Could you display the
   hamburger menu breakpoints at 1180px" - the full-links/compact-burger
   switch used to ride on Bootstrap's own md breakpoint (768px, via
   d-none/d-md-flex etc. in the markup). That's replaced here with a
   dedicated, self-contained breakpoint at 1180px, independent of the
   1024.5px tablet breakpoint used for padding/type elsewhere in this
   system - the point where the full link row stops fitting is a
   layout call, not the same thing as the general tablet cutoff. Wide
   state (above 1180px) is the default below; the media query further
   down swaps to the compact layout at 1180px and under. */
.ds-nav-logo-full {
    display: block;
}

.ds-nav-logo-short {
    display: none;
}

.ds-nav-links {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    flex: 0 0 auto;
    gap: 32px;
}

.ds-nav-link {
    text-decoration: none;
    white-space: nowrap;
}

/* Update (2026-11-05): menu links and the Contact button are now regular weight (400), per request.
   Update (2026-11-02), per your header capture: menu links are bold (700) marine;
   hover and the current page are carmin. Previously 400 / near-black, with the
   current page coloured by an inline style on each page (still there, but now
   overridden by this rule: the current page is picked up from aria-current).
   Update (2026-11-02): the parent entry of the current page is red too - aria-current="true" marks the
   category (Formations on Parcours certifiant / Cycle 1 / Dans mon métier / a formation, Le cercle on an
   article / a book / an event), aria-current="page" the page itself. */
.ds-nav-link {
    font-weight: 400;
    color: var(--ds-marine);
    transition: color 300ms ease-out;
}

.ds-nav-link:hover,
.ds-nav-link:focus-visible,
.ds-nav-link.is-hover,
.ds-nav-link[aria-current="page"],
.ds-nav-link[aria-current="true"],
.ds-nav-link.is-active,
.ds-nav-item:hover > .ds-nav-link,
.ds-nav-item.is-open > .ds-nav-link {
    color: var(--ds-carmin);
}

/* Compact right side (at/under 1180px): Contact (a scaled-down instance
   of the same Button-border/Outline component, since the 244x53 floor
   size doesn't fit next to a burger icon on a narrow screen) + a plain
   3-line burger icon. This is a placeholder for the full mobile spec -
   no open/close behavior or menu-panel content has been given yet. */
.ds-nav-mobile-actions {
    display: none;
    align-items: center;
    gap: var(--ds-spacing-16);
}

@media (max-width: 1180px) {
    .ds-nav-logo-full {
        display: none;
    }

    .ds-nav-logo-short {
        display: block;
    }

    .ds-nav-links {
        display: none;
    }

    .ds-nav-mobile-actions {
        display: flex;
    }

    /* Update (2026-09-21): per "Menu Mobile and Tablet open state - could
       you do the menu full width whenever the user click to display the
       menu. Everything align vertically with the current items" - the
       burger button (see dsNavToggle() in the page script, and in
       home-preview.php's own script) now toggles an "is-menu-open" class
       on .ds-nav-demo / .ds-nav-demo--fixed. .ds-nav-links is reused as
       the panel itself (same links + the trailing Contact button already
       in that markup, nothing duplicated) rather than left hidden: it's
       taken out of the horizontal row and pinned absolutely below the
       bar, spanning the bar's full width (left:0/right:0 against the
       nav's own positioned container, so it ignores .ds-nav-inner's own
       side padding and reaches edge-to-edge on tablet/mobile, where the
       bar itself is already full width). Links stack vertically with a
       hairline divider between them - "aligned with the current items"
       read as keeping their existing left alignment and type style, just
       stacked instead of side by side. No panel background/shadow was
       specified, so it borrows each bar variant's own background color
       (kept in sync below) and a shadow matching the one already used for
       the fixed bar's scrolled state. */
    .ds-nav-demo,
    .ds-nav-demo--fixed {
        position: relative;
    }

    .ds-nav-links {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: var(--ds-spacing-8) 20px var(--ds-spacing-24);
        box-shadow: 0px 4px 12px 0px #00000014;
        z-index: 999;
        background: var(--ds-ocre-def);
    }

    .ds-nav-demo--fixed .ds-nav-links {
        background: #FDF8EB;
    }

    .ds-nav-demo--fixed.is-scrolled .ds-nav-links {
        background: #FDF8EC;
    }

    .ds-nav-demo.is-menu-open .ds-nav-links,
    .ds-nav-demo--fixed.is-menu-open .ds-nav-links {
        display: flex;
    }

    .ds-nav-links .ds-nav-link {
        padding: var(--ds-spacing-16) 0;
        border-bottom: 1px solid rgba(16, 24, 40, 0.08);
    }

    .ds-nav-links .ds-btn-nav-contact {
        align-self: flex-start;
        margin-top: var(--ds-spacing-16);
    }
}

.ds-nav-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

/* Update (2026-09-20, sixth pass): dedicated "Contact" button for the nav -
   per "here is the specs of the contact button bc it's far too big", it
   doesn't reuse the Button-border/Outline component from section 05
   anymore (that one floors at 244x53, which was the "far too big" you
   flagged). This is its own smaller component: 38px tall, 24px radius,
   1px texte-foncé border, 700/14px/100%/0 label (bold, not the 600/150%
   the other buttons use - a genuinely different text style, not a typo).
   The 86.77px box width from the handoff reads as Figma's auto-computed
   hug-content width for the word "Contact" at this font, not a value to
   lock in, so it's built as horizontal padding instead (16px each side,
   inferred - not given directly) so the box still hugs the label if it
   ever changes. Used for both the desktop and mobile "Contact" - it's
   already compact enough that mobile no longer needs its own scaled-down
   variant. */
.ds-btn-nav-contact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 16px;
    border-radius: 24px;
    box-sizing: border-box;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

/* Update (2026-11-02), per your header capture: "Contact" is carmin (border and
   text) instead of near-black; on hover it fills carmin with white text and the
   same soft shadow as the H1 button (the second "Contact" in your capture).
   .ds-btn-nav-contact-fill is that filled look as a fixed state. */
.ds-btn-nav-contact {
    transition: background-color 300ms ease-out, color 300ms ease-out, box-shadow 300ms ease-out;
}

.ds-btn-nav-contact-outline {
    background: var(--ds-blanc);
    border: 1px solid var(--ds-carmin);
    color: var(--ds-carmin);
}

.ds-btn-nav-contact-outline:hover,
.ds-btn-nav-contact-outline:focus-visible,
.ds-btn-nav-contact-outline.is-hover,
.ds-btn-nav-contact-fill {
    background: var(--ds-carmin);
    border: 1px solid var(--ds-carmin);
    color: var(--ds-blanc);
    box-shadow: 0px 4px 4px 0px #00000040;
}

.ds-btn-nav-contact-fill {
    background: var(--ds-carmin);
    border: 1px solid var(--ds-carmin);
    color: var(--ds-blanc);
}

/* Update (2026-09-21): per "reduce ... the .ds-nav-logo font to be ...
   less than 18px for [screens at] 1024px [and below]" - the logo drops
   from 24px to 16px (applies to both the full wordmark and the short
   "FSL" mobile version, since both share this class). 16px is inferred
   - anything under 18px was asked for, this just picks a round number
   from the system's own type sizes.
   Update (2026-09-21, second pass): briefly widened this rule's own
   breakpoint to 1280px, then reverted per "below 1024px should be the
   breakpoint for tablet for the whole website so same for the menu" -
   back to the same 1024.5px tablet breakpoint used everywhere else in
   this system, folded back into the block below rather than kept as
   its own media query. */
@media (max-width: 1024.5px) {
    .ds-nav-inner {
        padding: 20px 40px;
    }

    .ds-nav-links {
        gap: 20px;
    }

    .ds-nav-logo {
        font-size: 16px;
    }
}

/* Update (2026-09-21): per "the menu should have 1240px in mobile far
   more space between the brand logo and the menu items" - read as two
   things: the nav's 1240px max-width already applies at every
   breakpoint (see .ds-nav-demo--fixed, unconditional), so no change was
   needed there; and a bigger guaranteed minimum gap between the logo
   and the Contact/burger group on mobile, since the 24px floor on
   .ds-nav-inner (normally invisible - space-between usually leaves far
   more room than that) is the only thing that would show if the two
   groups ever sit close together. Bumped to 48px here specifically. */
@media (max-width: 767.5px) {
    .ds-nav-inner {
        padding: 16px 20px;
        gap: var(--ds-spacing-48);
    }
}

/* Update (2026-09-20, fifth pass): fixed/sticky variant, pinning the bar
   to the top of the viewport on scroll, per your "the menu should be at
   the top" note - this is what the real home-preview page uses. Left as
   an opt-in modifier class rather than the default, so this reference
   section keeps scrolling normally with the rest of the design-system
   page (a fixed nav here would sit on top of the real site's own fixed
   header above it). .ds-nav-spacer is a plain filler the same height as
   the bar, placed right after it in the markup, so fixing the nav
   doesn't make it overlap the content underneath - its height is an
   estimate from the bar's own padding + tallest child per breakpoint,
   not a number that was specified.
   Update (2026-09-20, seventh pass): added a 30px gap above the bar
   (top: 30px instead of 0) per "the menu should be with a little margin
   top at least 30px" - the spacer grew by the same 30px so content still
   starts right where the bar ends. Also tracked down the real cause of
   "the white background we see at the top": the live site's global
   styles.css sets an unconditional body{padding-top:...} (72px, 79px on
   desktop) to make room for the SITE's own fixed navbar - since this
   preview page uses its own fixed nav instead of that one, that padding
   was reserving a second, empty block of space above everything here on
   top of this spacer. See .ds-preview-body below, applied to
   home-preview.php's <body>, which zeroes it out for this page only. */
/* Update (2026-09-20, eighth pass): per "change the menu to be not full
   width with just a block with margin, without any box shadow, the box
   shadow should display only when we scroll" - no longer full-bleed:
   it's now an inset block (20px from each side, capped at the same
   1240px max-width, centered), floating with the 30px top gap from the
   pass above. No shadow by default; home-preview.php's own script adds
   .is-scrolled once the page scrolls past 10px, which is the only time
   the shadow shows. None of the exact side-margin/shadow-threshold
   numbers were specified - inferred. */
.ds-nav-demo--fixed {
    position: fixed;
    top: 30px;
    left: 20px;
    right: 20px;
    width: auto;
    max-width: 1240px;
    margin: 0 auto;
    z-index: 1000;
    box-shadow: none;
    /* Update (2026-09-20, tenth pass): "apply the border radius to the
       menu in regard to the design system" - now that it's an inset
       block rather than a full-bleed bar, it reads better with rounded
       corners. No radius came with the nav spec itself, so this borrows
       var(--ds-radius-24) from the existing scale (see section 03),
       matching the rounding already used on similarly wide, short
       containers like the program list row.
       Update (2026-09-21): per "use a border-radius less prononced" -
       dialed back a step to var(--ds-radius-16). Swap the token below
       again if it should be subtler still (var(--ds-radius-8)). */
    border-radius: var(--ds-radius-16);
    /* Update (2026-09-21): per "when I don't scroll I want the menu
       background to be #fdf8eb and when I scroll switch to #fdf8ec" -
       the two colors are a hair apart on purpose (per your values), so
       this is a subtle tell rather than a visible color change. */
    background: #FDF8EB;
}

.ds-nav-demo--fixed.is-scrolled {
    box-shadow: 0px 4px 12px 0px #00000014;
    background: #FDF8EC;
}

/* Update (2026-09-21): per "Menu mobile and tablet should be at the top
   0" - the 30px top gap is now desktop-only; at tablet and below the
   bar sits flush against the very top of the viewport. .ds-nav-spacer
   shrinks to match at each breakpoint (see further down), since it no
   longer needs to reserve that 30px on top of the bar's own height.
   Update (2026-09-21, second pass): per "Menu mobile should be full
   width and tablet" - the floating-pill treatment (20px side inset,
   1240px cap, rounded corners) is now desktop-only too; at tablet and
   below the bar goes back to full width, edge to edge, with square
   corners (a rounded bar touching the screen's own edges would look
   like a mistake). */
@media (max-width: 1024.5px) {
    .ds-nav-demo--fixed {
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: none;
        margin: 0;
        border-radius: 0;
    }
}

/* Update (2026-09-21): per "ds-nav-logo-full ... should be completely
   at the left and ... ds-nav-links ... should be completely at the
   right" - .ds-nav-inner's justify-content:space-between already pins
   both groups to its own edges, but that "edge" was still 100px of
   padding in from the block's actual boundary - a sensible inset when
   the bar spanned nearly the full viewport, not now that it's a
   compact floating pill (max 1240px, floating with its own 20px side
   margin). Scoped to the fixed/floating variant only, so the full-bleed
   reference demo above keeps its original 100px. 32px is inferred, not
   specified - adjust if the logo/links should sit closer to the pill's
   own edge still. */
@media (min-width: 1024.6px) {
    .ds-nav-demo--fixed .ds-nav-inner {
        padding-left: 32px;
        padding-right: 32px;
    }
}

/* Update (2026-09-21): background added per "ds-nav-spacer could you add
   the color with this one #fdf8eb for the header" - fills the reserved
   strip above the hero (the space the fixed nav floats over) with this
   color instead of leaving it blank/white. */
.ds-nav-spacer {
    height: 108px;
    background: #FDF8EB;
}

/* Update (2026-11-02): white version for pages that start on a white background
   (Contact: "update the background to be white at the contact page"). */
.ds-nav-spacer--blanc {
    background: var(--ds-blanc);
}

@media (max-width: 1024.5px) {
    .ds-nav-spacer {
        height: 78px;
    }
}

@media (max-width: 767.5px) {
    .ds-nav-spacer {
        height: 70px;
    }
}

/* Scoped to home-preview.php's <body> only - cancels the live site's
   global body{padding-top:...} (meant for its own fixed navbar), which
   this preview page doesn't use. Left as an opt-in class rather than
   touching the global rule itself, since that rule is real site
   infrastructure this design-system work shouldn't modify. !important
   because "I still have the white at the top" after the first attempt
   at this fix - forcing it here removes any doubt about which body rule
   wins, whatever the cause of that was (stale cache on your end is the
   most likely explanation, since the override was already higher
   specificity than the rule it's meant to beat). */
.ds-preview-body {
    padding-top: 0 !important;
}

/* Update (2026-09-21): home-preview.php drops the "point de départ",
   "approche" and program-card blocks straight into <body>, with no
   Bootstrap/.content wrapper around them - unlike design-system.php, where
   that wrapper's own side padding is what keeps every section off the
   viewport edge there. So on THIS page specifically, per "when the size is
   less than 1024px I want to keep the margin left" (and to avoid the same
   gap reappearing on the two sections added after it), these need their
   own side gutter below the tablet/mobile breakpoints - matching the
   nav/hero's own 40px tablet / 20px mobile side padding rather than a new
   number. (The certification, FAQ, témoignages, "Des questions ?" and
   Qualiopi blocks don't need this rule - they're full-bleed bands with
   their own padding, same as the nav and hero, so they already handle
   this on both pages without help.) */
@media (max-width: 1024.5px) {
    .ds-preview-body .ds-start-demo,
    .ds-preview-body .ds-approach-demo,
    .ds-preview-body .ds-approach-intro-demo,
    .ds-preview-body .ds-page-filters,
    .ds-preview-body .ds-program-highlight,
    .ds-preview-body .ds-supervision-demo,
    .ds-preview-body .ds-formez-demo,
    .ds-preview-body .ds-cercle-demo,
    .ds-preview-body .ds-financer-demo {
        padding-left: 40px;
        padding-right: 40px;
    }
}

@media (max-width: 767.5px) {
    .ds-preview-body .ds-start-demo,
    .ds-preview-body .ds-approach-demo,
    .ds-preview-body .ds-approach-intro-demo,
    .ds-preview-body .ds-page-filters,
    .ds-preview-body .ds-program-highlight,
    .ds-preview-body .ds-supervision-demo,
    .ds-preview-body .ds-formez-demo,
    .ds-preview-body .ds-cercle-demo,
    .ds-preview-body .ds-financer-demo {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* Update (2026-11-05): the Qualiopi band no longer gets a 20px side margin here. It is a full-bleed band
       (width 100vw, centred with left/right 50% and -50vw margins); this old margin overrode those margins and
       pushed the band 215px to the right on phones. */
}

/* Update (2026-09-21): "Plongez dans la pensée systémique" program-card
   instance - per "I will join the following block below... use the design
   system for it", this reuses the existing Program card component
   (section 09) as-is; the wrapper just centers it at the same 1024px
   content width as the "approche" block above it, with the same 80px
   vertical rhythm used for the "point de départ" block - neither number
   came with a spec for this wrapper, both are inferred to match. */
.ds-program-highlight {
    max-width: 1024px;
    margin: 80px auto;
}

/* --- landing page hero (Figma spec, 2026-09-20) ---
   Full-bleed ocre band like the nav, sharing its background, max-width
   (1240px) and side padding (100px) so the two sit flush together with
   no visible seam, the way your screenshots show them stacked. Only
   three numbers came with the handoff: the H1's box (600x130, read as a
   max-width for wrapping rather than a hard-locked box, since text
   height depends on line count/copy length) with its color; the
   subtitle's typography (600/20px/28px/-0.44px, which matched H4
   exactly); and the CTA's box (244x53, padding 16px 60px, radius 30px) -
   effectively the existing Primary button with a wider 244px floor
   instead of its usual 203px, to fit "NOS FORMATIONS". The column split,
   the gap between image and text, and the vertical padding of the band
   itself weren't specified - inferred from the screenshot. Your two
   screenshots gave two versions of the subtitle copy (one ending at
   "...dans les organisations.", one continuing "...et les équipes
   complexes.") - used the longer one since it showed up on both the
   desktop and mobile screenshots; swap it if the shorter one was the
   intended final copy. On mobile the image drops below the text instead
   of sitting beside it, matching your mobile screenshot. */
/* Update (2026-09-20, second pass): switched from a two-column split
   (image left, text right) to a full-bleed background image with the
   text overlaid on top - per your "image can be used with a full
   width" note. The image is now a single absolutely-positioned layer
   behind the whole band (object-fit: cover, so it always fills the
   band without distorting), and the text sits above it in the same
   1240px/100px-padded column used everywhere else. Nothing in the
   original handoff specified a minimum band height (that was implicit
   in the old two-column layout, where the image's own aspect ratio
   drove the height) or a text/scrim treatment for legibility over the
   photo - both are inferred here: a flat min-height per breakpoint,
   and no scrim/overlay, since only a text color (texte foncé) was
   given and your reference screenshot's photo already reads dark
   enough behind the headline. Flag this if the real photo needs a
   dark gradient behind the text to stay readable. */
.ds-hero-demo {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    min-height: 640px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--ds-ocre-def);
}

.ds-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Update (2026-09-20, eighth pass): per "remove just the background
   behind the text for now and maybe add some background at the top upon
   the image to match the color" - dropped the solid card from behind
   the text (see .ds-hero-content below) and replaced it with a wash of
   the same ocre color over just the top of the photo instead, fading to
   transparent, so the image blends with the ocre nav bar above it
   rather than cutting to it abruptly. Fade distance (45% of the band)
   wasn't specified - inferred to comfortably cover the headline's area
   without washing out the whole photo.
   Update (2026-09-20, ninth pass): per "add on[e] of the image the
   background #f6efdd" - read as extending that wash across the WHOLE
   photo rather than just the top, at 35% opacity so the picture still
   shows through. The exact opacity wasn't specified - inferred; turn it
   up/down in the rgba() alpha below if it needs to be more or less
   subtle. Update (2026-09-20, tenth pass): corrected the wash color to
   #FBF5E8 per "sorry the background should be #fbf5e8" - a touch
   lighter than --ds-ocre-def, and specific enough to this one spot that
   it's kept as its own rgba() rather than added to the shared palette. */
.ds-hero-demo::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: rgba(251, 245, 232, 0.35);
}

/* Update (2026-09-20, ninth pass, continued): per "the ds-hero-content
   should be more to the right" - right padding trimmed from 100px to
   60px (left kept at 100px, though it's currently unused since the
   content is right-aligned) so the text sits closer to the edge.
   Update (2026-09-21): trimmed again, 60px -> 30px -> 20px (this last
   step per "perfect but add more to put it to the right"), now matching
   the nav's own 20px side inset above it, so the two line up. */
.ds-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 1240px;
    width: 100%;
    margin: 0 auto;
    padding: var(--ds-spacing-64) 20px var(--ds-spacing-64) 100px;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-end;
}

.ds-hero-content {
    max-width: 600px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ds-spacing-24);
    text-align: left;
}

.ds-hero-title {
    max-width: 600px;
    margin: 0;
}

.ds-hero-subtitle {
    margin: 0;
}

.ds-hero-cta {
    min-width: 244px;
}

/* Update (2026-09-21): per "Tablet the background behind the text should
   be transparent not #f6efdd" - the wash behind the hero text (see
   .ds-hero-demo::after above) is now transparent at tablet width
   specifically; desktop keeps it, and mobile already removes it
   entirely since that breakpoint stacks the image below the text
   instead of behind it. */
@media (max-width: 1024.5px) {
    .ds-hero-demo {
        min-height: 520px;
    }

    .ds-hero-demo::after {
        background: transparent;
    }

    .ds-hero-inner {
        padding: var(--ds-spacing-48) 40px;
    }
}

/* Update (2026-09-20, ninth pass): per "check the image should be below
   on mobile" - on narrow screens the photo no longer sits as a
   full-bleed background behind the text; it drops back to a normal,
   full-width image stacked BELOW the text block instead (closer to the
   original two-column spec's own mobile behavior, before the desktop
   layout switched to a background overlay). The 240px image height on
   mobile matches that original spec's own mobile image height. Desktop
   and tablet (above 767.5px) keep the full-bleed overlay from the
   passes above. */
@media (max-width: 767.5px) {
    .ds-hero-demo {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        min-height: 0;
    }

    .ds-hero-demo::after {
        display: none;
    }

    .ds-hero-bg {
        position: static;
        order: 2;
        width: 100%;
        height: 240px;
        object-fit: cover;
    }

    .ds-hero-inner {
        order: 1;
        padding: var(--ds-spacing-32) 20px;
        justify-content: flex-start;
    }

    .ds-hero-title,
    .ds-hero-content {
        max-width: 100%;
    }
}

/* Update (2026-10-27): "Notre approche" intro (section 24) - per your
   screenshot ("Below certification I have this block"): retro-script
   heading, centered marine paragraph, Primary/Fill button, then the
   section-09 program card. Paragraph max-width (800px), the 32px/80px
   gaps and the 2.5rem mobile heading are measured/inferred from the
   screenshots, not specified. The button reuses .ds-approach-cta. */
.ds-approach-intro-demo {
    max-width: 1024px;
    margin: 0 auto;
    text-align: center;
}

.ds-approach-intro-heading {
    margin: 0 0 var(--ds-spacing-16);
}

.ds-approach-intro-text {
    max-width: 800px;
    margin: 0 auto;
}

.ds-approach-intro-demo .ds-approach-cta {
    margin-top: var(--ds-spacing-32);
    margin-bottom: 80px;
}

.ds-preview-body .ds-approach-intro-demo {
    margin-top: 80px;
    margin-bottom: 0;
}

.ds-preview-body .ds-approach-intro-demo + .ds-program-highlight {
    margin-top: 0;
}

@media (max-width: 767.5px) {
    .ds-approach-intro-heading {
        font-size: 2.5rem;
        line-height: 2.5rem;
    }

    .ds-approach-intro-demo .ds-approach-cta {
        margin-bottom: var(--ds-spacing-48);
    }
}

/* Update (2026-10-27): "Point de départ" block (section 14), per your
   desktop + mobile screenshots - a "Nouveau" list row on top (section-10 row
   with a solid carmin tag), the two-line heading "Point de" (H2 carmin) over
   "départ" (H2 retro), and cards with marine titles and a text link. Sizes
   and gaps are measured off the screenshots, not specified. */
.ds-tag-carmin {
    min-width: 0;
    min-height: 0;
    padding: .2857em .7143em;
    border-radius: .2857em;
    background: var(--ds-carmin);
    color: var(--ds-blanc);
    align-self: flex-start;
    font-size: .75rem;
}

.ds-start-new {
    max-width: 1024px;
    margin: 0 auto 80px;
}

.ds-start-new .ds-card-list {
    min-height: 168px;
    padding-right: 1.5rem;
    border-radius: var(--ds-radius-16);
    gap: 1.5rem;
}

.ds-start-new .ds-card-list-img {
    flex: 0 0 200px;
    height: auto;
    align-self: stretch;
    border-radius: 0;
}

.ds-start-new .ds-card-list-text {
    margin-left: 0;
    gap: var(--ds-spacing-8);
    padding: 1.5rem 0;
}

.ds-start-new .ds-card-list .ds-card-list-title {
    font-size: 1.125rem;
    line-height: 1.5rem;
}

.ds-start-new .ds-text-link {
    flex: 0 0 auto;
    white-space: nowrap;
}

.ds-start-heading {
    font-weight: 300;
}

.ds-start-heading-line,
.ds-start-heading-retro {
    display: block;
}

.ds-start-heading-retro {
    margin-top: -.25rem;
}

.ds-start-demo .ds-card-body .ds-text-link {
    display: inline-block;
}

@media (max-width: 767.5px) {
    .ds-start-new {
        margin-bottom: var(--ds-spacing-48);
    }

    .ds-start-new .ds-card-list {
        flex-direction: column;
        align-items: stretch;
        padding: 0 var(--ds-spacing-16) var(--ds-spacing-24);
        gap: var(--ds-spacing-16);
        text-align: center;
    }

    .ds-start-new .ds-card-list-img {
        flex-basis: auto;
        width: calc(100% + 2 * var(--ds-spacing-16));
        height: 160px;
        margin: 0 calc(-1 * var(--ds-spacing-16));
        align-self: auto;
    }

    .ds-start-new .ds-card-list-text {
        align-items: center;
        text-align: center;
        padding: 0;
    }

    .ds-start-new .ds-tag-carmin {
        align-self: center;
    }

    .ds-start-new .ds-text-link {
        align-self: center;
    }

    .ds-start-heading-line {
        font-size: 2rem;
        line-height: 2rem;
    }

    .ds-start-heading-retro {
        font-size: 2.5rem;
        line-height: 2.5rem;
    }
}

/* Update (2026-10-27): card thumbnail resized per your spec for the 4th card
   of "Point de départ" - "width 271.7, height 403, border-radius 16px,
   border-width 1px, left 887.1px" (was 260 x 427, radius 24). This is the
   base .ds-card, so section 07 follows too. The 24px gap and the 1160px row
   are derived, not given: left 887.1 for column 4 = 3 x (271.7 + 24), and
   4 x 271.7 + 3 x 24 = 1158.8. On desktop the row no longer wraps; if the
   container is narrower than 1160px the cards shrink instead of dropping to
   a second line (mobile/tablet keep the swipeable slider). */

/* Update (2026-10-27): navigation + hero per your screenshots (new hero
   picture page-accueil-image-hero.png). Nav: the text wordmark becomes the
   FSL logo (images/svg/FSL.svg); the logo box is kept at 38px tall with the
   56px image centred over it, so the bar's 78px height and .ds-nav-spacer
   don't change. "Formations" and "Supervision" get a chevron (visual only).
   Hero: flat #FDF8EB band (same as the nav), text on the left, the sign
   anchored bottom-right at ~50% width, no ocre wash. Heights, widths and
   the 2.25rem mobile title are read off the screenshots, not specified. */
.ds-nav-logo-img-link {
    display: flex;
    align-items: center;
    height: 38px;
    flex: 0 0 auto;
}

.ds-nav-logo-img {
    display: block;
    height: 56px;
    width: auto;
    flex: 0 0 auto;
}

.ds-nav-chevron {
    width: .75em;
    height: .75em;
    margin-left: .25em;
    vertical-align: -.05em;
}

@media (max-width: 767.5px) {
    .ds-nav-logo-img {
        height: 48px;
    }
}

.ds-hero-demo {
    background: #FDF8EB;
    min-height: 560px;
}

.ds-hero-demo picture {
    display: contents;
}

.ds-hero-demo::after {
    display: none;
}

.ds-hero-bg {
    inset: auto 0 0 auto;
    width: 50%;
    max-width: 900px;
    height: auto;
    object-fit: contain;
}

.ds-hero-inner {
    justify-content: flex-start;
    max-width: 1440px;
    padding-left: 128px; /* lines the text up with the logo above it */
}

.ds-hero-content {
    max-width: 580px;
}

.ds-hero-demo .ds-hero-subtitle {
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.75rem;
    letter-spacing: -.0275rem;
}

@media (max-width: 1024.5px) {
    .ds-hero-demo {
        min-height: 480px;
    }

    .ds-hero-inner {
        padding-left: 40px;
    }

    .ds-hero-bg {
        width: 56%;
    }

    .ds-hero-content {
        max-width: 44%;
    }
}

@media (max-width: 767.5px) {
    .ds-hero-demo {
        min-height: 0;
    }

    .ds-hero-bg {
        position: static;
        order: 2;
        width: 100%;
        max-width: none;
        height: auto;
        object-fit: contain;
    }

    .ds-hero-inner {
        justify-content: center;
    }

    .ds-hero-content {
        max-width: 100%;
        align-items: center;
        text-align: center;
    }

    .ds-hero-title {
        font-size: 2.25rem;
    }
}

/* Update (2026-10-27): page hero + filter chips for the "Se former" page
   (section 25), per your desktop/tablet/mobile screenshots. No spec came with
   them - sizes, gaps and the active state are measured or inferred. The band
   is #FDF8EB like the nav so the two read as one block. */
.ds-page-hero {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    box-sizing: border-box;
    background: #FDF8EB;
    padding: 64px 20px 48px;
    text-align: center;
}

.ds-page-hero-title {
    margin: 0;
    font-size: 3.5rem;
    line-height: 1;
}

.ds-page-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--ds-spacing-16);
    max-width: 1024px;
    margin: 24px auto 0;
}

.ds-chip-filter {
    display: inline-flex;
    align-items: center;
    padding: .625em 1.25em;
    border-radius: .625em;
    border: 1px solid var(--ds-marine);
    background: var(--ds-blanc);
    color: var(--ds-marine);
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.25rem;
    text-decoration: none;
    box-sizing: border-box;
    white-space: nowrap;
    transition: border-color 300ms ease-out, color 300ms ease-out, background-color 300ms ease-out, box-shadow 300ms ease-out;
}

/* Update (2026-11-02): semibold label and the same hover shadow as the "sous menu"
   tag in your capture (0 4px 4px #00000040). */
.ds-chip-filter:hover,
.ds-chip-filter.is-hover {
    border-color: var(--ds-carmin);
    color: var(--ds-carmin);
    box-shadow: 0px 4px 4px 0px #00000040;
}

.ds-chip-filter.is-active {
    background: var(--ds-marine);
    color: var(--ds-blanc);
}

.ds-chip-filter:active {
    transition-duration: 0ms;
}

@media (max-width: 767.5px) {
    .ds-page-hero {
        padding: 48px 20px 72px;
    }

    .ds-page-hero-title {
        font-size: 2.5rem;
    }

    .ds-page-filters {
        gap: var(--ds-spacing-12);
    }
}

/* Tablet only: your tablet screenshot keeps all five chips on one line, so
   they tighten here (13px text, smaller padding and gap, 20px side inset). */
@media (min-width: 767.6px) and (max-width: 1024.5px) {
    .ds-page-filters,
    .ds-preview-body .ds-page-filters {
        gap: var(--ds-spacing-8);
        padding-left: 20px;
        padding-right: 20px;
        flex-wrap: nowrap;
    }

    .ds-chip-filter {
        padding: .625em .875em;
        font-size: .8125rem;
    }
}

/* Update (2026-10-27): "Parcours certifiant" band for the "Se former" page
   (section 26), per your desktop / tablet / mobile screenshots. No spec came
   with it: paddings (64 / 48 / 24px in the cards), thumbnail sizes and gaps are
   measured off the screenshots. Bar colours reuse the domain tokens. */
.ds-parcours-demo {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    box-sizing: border-box;
    background: var(--ds-ocre-def);
    padding: 80px 20px;
}

.ds-parcours-inner {
    max-width: 1024px;
    margin: 0 auto;
}

.ds-parcours-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ds-spacing-24);
    margin-bottom: var(--ds-spacing-24);
}

.ds-parcours-heading {
    margin: 0;
    text-align: left;
}

.ds-parcours-heading-line,
.ds-parcours-heading-retro {
    display: block;
}

.ds-parcours-heading-retro {
    margin-top: -.25rem;
}

.ds-stepper {
    display: flex;
    align-items: center;
    list-style: none;
    margin: .75rem 24px 0 0;
    padding: 0;
}

.ds-stepper-step {
    position: relative;
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--ds-carmin);
    border-radius: var(--ds-radius-full);
    background: var(--ds-blanc);
    color: var(--ds-carmin);
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: .875rem;
    line-height: 1;
}

.ds-stepper-step + .ds-stepper-step {
    margin-left: 45px;
}

.ds-stepper-step + .ds-stepper-step::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    width: 45px;
    height: 2px;
    margin-top: -1px;
    background: rgba(191, 20, 28, .25);
}

.ds-stepper-step.is-done {
    background: var(--ds-carmin);
    color: var(--ds-blanc);
}

.ds-stepper-step svg {
    width: 16px;
    height: 16px;
}

.ds-parcours-intro {
    margin: 0 0 var(--ds-spacing-24);
}

.ds-parcours-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-spacing-8);
    margin-bottom: 40px;
}

.ds-parcours-cycles {
    display: flex;
    flex-direction: column;
}

.ds-parcours-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--ds-spacing-24);
    box-sizing: border-box;
    padding: var(--ds-spacing-64);
    background: var(--ds-blanc);
    border: 1px solid var(--ds-ocre-3);
    border-radius: var(--ds-radius-24);
    box-shadow: 0px 4px 12px 0px #00000026;
    text-align: left;
}

.ds-parcours-card-head {
    display: flex;
    align-items: center;
    gap: var(--ds-spacing-24);
}

.ds-parcours-card-img {
    flex: 0 0 150px;
    width: 150px;
    height: 150px;
    border-radius: var(--ds-radius-full);
    overflow: hidden;
}

.ds-parcours-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ds-parcours-card-headtext {
    display: flex;
    flex-direction: column;
    gap: var(--ds-spacing-8);
    min-width: 0;
}

.ds-parcours-card-title,
.ds-parcours-card-text {
    margin: 0;
}

.ds-parcours-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-spacing-8) var(--ds-spacing-24);
}

.ds-parcours-bars {
    display: flex;
    flex-direction: column;
    gap: var(--ds-spacing-8);
    list-style: none;
    margin: 0;
    padding: 0;
}

.ds-parcours-bar {
    padding: .5rem 1rem;
    border-radius: var(--ds-radius-8);
    color: var(--ds-blanc);
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: .875rem;
    line-height: 1.25rem;
}

.ds-parcours-bar--intervention { background: var(--ds-domaine-intervention); }
.ds-parcours-bar--organisation { background: var(--ds-domaine-organisation); }
.ds-parcours-bar--collectif { background: var(--ds-domaine-collectif); }
.ds-parcours-bar--pensee { background: var(--ds-domaine-pensee); }

.ds-parcours-card-cta {
    align-self: flex-start;
}

.ds-parcours-arrow {
    display: flex;
    justify-content: center;
    margin: var(--ds-spacing-24) 0;
    color: var(--ds-marine);
}

.ds-parcours-arrow svg {
    width: 20px;
    height: 20px;
}

.ds-parcours-cta {
    display: flex;
    justify-content: center;
    margin-top: var(--ds-spacing-48);
}

@media (max-width: 1024.5px) {
    .ds-parcours-demo {
        padding: 64px 64px;
    }

    .ds-parcours-card {
        padding: var(--ds-spacing-48);
    }

    .ds-parcours-card-img {
        flex-basis: 112px;
        width: 112px;
        height: 112px;
    }

    .ds-parcours-card-title {
        font-size: 2rem;
        line-height: 2rem;
    }

    .ds-stepper-step {
        width: 28px;
        height: 28px;
        font-size: .75rem;
    }

    .ds-stepper-step + .ds-stepper-step {
        margin-left: 14px;
    }

    .ds-stepper-step + .ds-stepper-step::before {
        width: 14px;
    }

    .ds-stepper-step svg {
        width: 13px;
        height: 13px;
    }

    .ds-stepper {
        margin-right: 0;
    }
}

@media (max-width: 767.5px) {
    .ds-parcours-demo {
        padding: 48px 20px;
    }

    .ds-parcours-header {
        flex-direction: column;
        gap: var(--ds-spacing-16);
    }

    .ds-stepper {
        margin-top: 0;
    }

    .ds-parcours-heading-line {
        font-size: 2rem;
        line-height: 2rem;
    }

    .ds-parcours-heading-retro {
        font-size: 2.5rem;
        line-height: 2.5rem;
    }

    .ds-parcours-tags {
        flex-direction: column;
        align-items: flex-start;
    }

    .ds-parcours-card {
        padding: var(--ds-spacing-24);
    }

    .ds-parcours-card-head {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--ds-spacing-16);
    }

    .ds-parcours-card-img {
        flex-basis: 100px;
        width: 100px;
        height: 100px;
    }

    .ds-parcours-card-meta {
        flex-direction: column;
    }

    .ds-parcours-card-cta {
        align-self: stretch;
        min-width: 0;
        padding-left: 24px;
        padding-right: 24px;
        text-align: center;
        justify-content: center;
    }
}

/* Update (2026-10-27): the two image/text blocks that close the "Parcours
   certifiant" band (section 26), per your screenshots. Measured, not
   specified: 230x180 image (200px on tablet), 40px gap, 48px between the
   two blocks, 64px under the button, 18px/700 marine titles. */
.ds-parcours-features {
    display: flex;
    flex-direction: column;
    gap: 48px;
    margin-top: 64px;
}

.ds-parcours-feature {
    display: flex;
    align-items: center;
    gap: 40px;
    text-align: left;
}

.ds-parcours-feature--reverse {
    flex-direction: row-reverse;
}

.ds-parcours-feature-img {
    flex: 0 0 230px;
    width: 230px;
    height: 180px;
    border-radius: var(--ds-radius-8);
    overflow: hidden;
}

.ds-parcours-feature-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ds-parcours-feature-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ds-spacing-16);
}

.ds-parcours-feature-title {
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 1.125rem;
    line-height: 1.5rem;
    color: var(--ds-marine);
}

.ds-parcours-feature-text p {
    margin: 0;
}

@media (max-width: 1024.5px) {
    .ds-parcours-feature-img {
        flex-basis: 200px;
        width: 200px;
        height: 160px;
    }

    .ds-parcours-feature {
        gap: var(--ds-spacing-32);
    }
}

@media (max-width: 767.5px) {
    .ds-parcours-features {
        margin-top: 48px;
        gap: 40px;
    }

    .ds-parcours-feature,
    .ds-parcours-feature--reverse {
        flex-direction: column;
        align-items: stretch;
        gap: var(--ds-spacing-16);
    }

    .ds-parcours-feature-img {
        flex-basis: auto;
        width: 100%;
        height: 260px;
    }
}

/* Update (2026-10-27): "Vous n'êtes pas coach ?" variant of the Formez-vous
   block (section 18) for the "Se former" page. The rows are the unchanged
   section-10 list row; per your mobile screenshot they stack below 767.5px
   (full-width photo, centred text and link). The mobile photo height (150px)
   and the 2rem / 2.5rem heading sizes are measured, not specified. */
@media (max-width: 767.5px) {
    .ds-formez-heading {
        font-size: 2rem;
        line-height: 2rem;
    }

    .ds-formez-heading-retro {
        font-size: 2.5rem;
        line-height: 2.5rem;
    }

    .ds-formez-list .ds-card-list {
        flex-direction: column;
        align-items: stretch;
        padding: 0 var(--ds-spacing-16) var(--ds-spacing-24);
        gap: var(--ds-spacing-16);
        text-align: center;
        border-radius: var(--ds-radius-16);
    }

    .ds-formez-list .ds-card-list-img {
        flex-basis: auto;
        width: calc(100% + 2 * var(--ds-spacing-16));
        height: 150px;
        margin: 0 calc(-1 * var(--ds-spacing-16));
        border-radius: 0;
    }

    .ds-formez-list .ds-card-list-text {
        margin-left: 0;
        align-items: center;
        text-align: center;
    }

    .ds-formez-list .ds-text-link {
        align-self: center;
    }

    .ds-formez-cta .ds-btn {
        width: 100%;
    }
}

/* Update (2026-10-27): "Modules disponibles à la carte" band + module card
   (section 27), per your desktop / tablet / mobile screenshots. No spec came
   with them: sizes, gaps, the 180px photo and the mobile carousel are
   measured or inferred. */
.ds-modules-demo {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    box-sizing: border-box;
    background: var(--ds-ocre-def);
    padding: 80px 20px;
}

.ds-modules-inner {
    max-width: 1024px;
    margin: 0 auto;
}

.ds-modules-heading {
    margin: 0 0 var(--ds-spacing-24);
    text-align: center;
}

.ds-modules-heading-line,
.ds-modules-heading-retro {
    display: block;
}

.ds-modules-heading-retro {
    margin-top: -.25rem;
}

.ds-modules-intro {
    margin: 0 0 var(--ds-spacing-32);
    text-align: left;
}

.ds-modules-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ds-spacing-24);
}

.ds-module-card {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background: var(--ds-blanc);
    border: 1px solid var(--ds-ocre-3);
    border-radius: var(--ds-radius-16);
    overflow: hidden;
    text-align: left;
    cursor: pointer;
    transition: box-shadow .25s ease, border-color .25s ease;
}

.ds-module-card:hover {
    border-color: var(--ds-carmin);
    box-shadow: 0px 8px 24px -2px #0000004D;
}

.ds-module-card-img {
    height: 180px;
    flex: 0 0 auto;
    overflow: hidden;
}

.ds-module-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ds-module-card-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ds-spacing-12);
    padding: var(--ds-spacing-16);
    /* Update (2026-11-02): 30px between the card image and the tag / title, per your desktop measure, in rem (30 / 16 = 1.875rem).
       One rule for every module card: à la carte, catalogue, "Vous aimerez aussi", desktop and mobile. */
    padding-top: 1.875rem;
}

.ds-module-card-tag {
    font-size: .75rem;
}

.ds-module-card-title {
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.5rem;
    color: var(--ds-marine);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 3rem;
}

.ds-module-card-meta {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ds-spacing-8);
    color: var(--ds-texte-fonce);
}

.ds-module-card-meta li {
    display: flex;
    align-items: center;
    gap: .5em;
}

.ds-module-card-meta svg {
    width: 1.1em;
    height: 1.1em;
    flex: 0 0 auto;
}

.ds-module-card-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--ds-spacing-16);
    width: 100%;
    margin-top: auto;
}

.ds-module-card-price {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: var(--ds-texte-fonce);
}

.ds-modules-dots {
    display: none;
    justify-content: center;
    align-items: center;
    gap: var(--ds-spacing-8);
    margin-top: var(--ds-spacing-24);
}

.ds-modules-cta {
    display: flex;
    justify-content: center;
    margin-top: var(--ds-spacing-32);
}

@media (max-width: 767.5px) {
    .ds-modules-demo {
        padding: 48px 20px;
    }

    .ds-modules-heading-line {
        font-size: 2rem;
        line-height: 2rem;
    }

    .ds-modules-heading-retro {
        font-size: 2.5rem;
        line-height: 2.5rem;
    }

    .ds-modules-grid {
        display: flex;
        gap: var(--ds-spacing-16);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .ds-modules-grid::-webkit-scrollbar {
        display: none;
    }

    .ds-module-card {
        flex: 0 0 82%;
        scroll-snap-align: start;
    }

    .ds-modules-dots {
        display: flex;
    }
}

/* Update (2026-10-27): light variant of the Témoignages band (section 19) for
   the "Se former" page, per your screenshots: white background, retro-script
   carmin heading (class ds-h2-retro in the markup), carmin quote mark, ocre-3
   card border, and the two cards share the grid width. The mobile heading
   size (2.5rem) is measured, not specified. */
.ds-testimonial-demo--clair {
    background: var(--ds-blanc);
}

.ds-testimonial-demo--clair .ds-testimonial-heading {
    margin-bottom: 40px;
}

.ds-testimonial-demo--clair .ds-testimonial-card {
    flex: 1 1 280px;
    max-width: none;
    border: 1px solid var(--ds-ocre-3);
}

.ds-testimonial-demo--clair .ds-testimonial-quote {
    color: var(--ds-carmin);
}

@media (max-width: 767.5px) {
    .ds-testimonial-demo--clair .ds-testimonial-heading {
        font-size: 2.5rem;
        line-height: 2.5rem;
    }

    .ds-testimonial-demo--clair .ds-testimonial-card {
        flex: 0 0 auto;
    }
}

/* Update (2026-10-27): FAQ ("Foire aux questions") and "Des questions ?" in
   their retro-heading variants for the "Se former" page, per your
   screenshots. Variants only - the original FAQ and questions band keep
   their look. The 2rem / 2.5rem mobile heading sizes are measured. */
.ds-faq-section--retro .ds-faq-title {
    margin-bottom: 48px;
}

.ds-faq-title-line,
.ds-faq-title-retro {
    display: block;
}

.ds-faq-title-retro {
    margin-top: -.25rem;
}

.ds-faq-section--retro .ds-faq-item {
    border-color: var(--ds-ocre-3);
}

.ds-faq-section--retro .ds-faq-question-label {
    font-weight: 700;
}

.ds-questions-demo--retro .ds-questions-heading {
    margin-bottom: var(--ds-spacing-16);
}

.ds-btn-on-light {
    background-color: var(--ds-blanc);
}

@media (max-width: 767.5px) {
    .ds-faq-title-line {
        font-size: 2rem;
        line-height: 2rem;
    }

    .ds-faq-title-retro,
    .ds-questions-demo--retro .ds-questions-heading {
        font-size: 2.5rem;
        line-height: 2.5rem;
    }

    .ds-questions-demo--retro .ds-questions-cta {
        flex-direction: column;
        align-items: center;
    }
}

/* Update (2026-10-27): "4 grands apprentissages" band (section 28) of the
   « La certification FSL » page, per your screenshots. White band (the cards
   are ocre def), same 1024px column as the Parcours band. Measured, not
   specified: 24px gap between cards, 24px card padding, radius 16px, 16px
   between tag and text. The two image/text blocks are the unchanged
   .ds-parcours-features. */
.ds-appr-demo {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    box-sizing: border-box;
    background: var(--ds-blanc, #fff);
    padding: 80px 20px;
}

.ds-appr-inner {
    max-width: 1024px;
    margin: 0 auto;
}

.ds-appr-heading {
    margin: 0 0 var(--ds-spacing-24);
    text-align: left;
}

.ds-appr-heading-line,
.ds-appr-heading-retro {
    display: block;
}

.ds-appr-heading-retro {
    margin-top: -.25rem;
}

.ds-appr-intro {
    margin: 0 0 var(--ds-spacing-32);
    max-width: 760px;
}

.ds-appr-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ds-spacing-24);
}

.ds-appr-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ds-spacing-16);
    padding: var(--ds-spacing-24);
    background: var(--ds-ocre-def);
    border-radius: var(--ds-radius-16);
    box-sizing: border-box;
}

.ds-appr-card p {
    margin: 0;
}

@media (max-width: 1024.5px) {
    .ds-appr-demo {
        padding: 64px 20px;
    }
}

@media (max-width: 767.5px) {
    .ds-appr-demo {
        padding: 48px 20px;
    }

    .ds-appr-heading-line {
        font-size: 2rem;
        line-height: 2rem;
    }

    .ds-appr-heading-retro {
        font-size: 2.5rem;
        line-height: 2.5rem;
    }

    .ds-appr-grid {
        grid-template-columns: 1fr;
    }
}

/* Update (2026-10-27): "Les cycles" band of the « La certification FSL » page
   (section 29) = the Parcours band (section 26) with a single-line retro
   heading: the stepper is centred on the title instead of sitting level with
   the second line. */
.ds-parcours-header--single {
    align-items: center;
}

.ds-parcours-header--single .ds-stepper {
    margin-top: 0;
}

.ds-parcours-header--single .ds-parcours-heading-retro {
    margin-top: 0;
}

@media (max-width: 767.5px) {
    .ds-parcours-header--single {
        align-items: flex-start;
    }

    .ds-parcours-header--single .ds-parcours-heading-retro {
        font-size: 2.5rem;
        line-height: 2.5rem;
    }
}

/* Update (2026-10-27): "Le Cercle" (section 20) as a swipeable row on tablet
   and mobile (modifier .ds-cercle-demo--carousel), per your tablet and mobile
   screenshots of the « La certification FSL » page: the three cards sit in one
   scrolling row (about two and a half cards on tablet, one and a bit on
   mobile, so the next card peeks), followed by navigation dots, then the two
   buttons (side by side on tablet, stacked full width on mobile). Desktop is
   unchanged (three cards in a row). Card widths (252px / 280px) are measured
   from the screenshots, not specified; the card height becomes automatic so
   the text can wrap. On the preview pages the row runs to the screen edge. */
.ds-cercle-demo--carousel .ds-card-blog-content {
    flex: 1 1 auto;
    justify-content: flex-start;
    padding-top: var(--ds-spacing-24);
}

.ds-cercle-dots {
    display: none;
    justify-content: center;
    align-items: center;
    gap: var(--ds-spacing-8);
    margin: calc(-1 * var(--ds-spacing-24)) 0 var(--ds-spacing-32);
}

@media (max-width: 1024.5px) {
    .ds-cercle-demo--carousel .ds-cercle-grid {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin-bottom: var(--ds-spacing-32);
        padding-bottom: 12px;
        text-align: left;
    }

    .ds-cercle-demo--carousel .ds-cercle-grid::-webkit-scrollbar {
        display: none;
    }

    .ds-cercle-demo--carousel .ds-card-blog {
        flex: 0 0 252px;
        width: 252px;
        height: auto;
        gap: var(--ds-spacing-16);
        scroll-snap-align: start;
    }

    .ds-cercle-demo--carousel .ds-card-blog-img {
        height: 180px;
    }

    .ds-cercle-demo--carousel .ds-cercle-dots {
        display: flex;
    }

    .ds-cercle-demo--carousel .ds-cercle-cta {
        flex-wrap: nowrap;
    }

    .ds-cercle-demo--carousel .ds-cercle-cta .ds-btn {
        min-width: 0;
        padding-left: 24px;
        padding-right: 24px;
    }

    .ds-preview-body .ds-cercle-demo--carousel .ds-cercle-grid {
        margin-right: -40px;
        padding-right: 40px;
        scroll-padding-left: 0;
    }
}

@media (max-width: 767.5px) {
    .ds-cercle-demo--carousel .ds-card-blog {
        flex-basis: 280px;
        width: 280px;
    }

    .ds-preview-body .ds-cercle-demo--carousel .ds-cercle-grid {
        margin-right: -20px;
        padding-right: 20px;
    }

    .ds-cercle-demo--carousel .ds-cercle-cta {
        flex-wrap: wrap;
        flex-direction: column;
        align-items: stretch;
    }

    .ds-cercle-demo--carousel .ds-cercle-cta .ds-btn {
        justify-content: center;
        text-align: center;
    }
}

/* Update (2026-10-27): cycle detail page (section 31), the page reached from
   « En savoir plus » on a cycle card (« Fondamentaux - Cycle 1 »). Built from
   your small screenshots, so every size is measured approximately, not
   specified: hero = cream band with a 260x220 rounded photo and a text column
   (outline tag, light carmin title 3.5rem, "Cycle 1", outline button), stacked
   under 767.5px; body = 1024px column with the stepper (current step filled
   ocre), a marine lead paragraph, the "l'essentiel" ocre box (radius 24px,
   padding 40px 56px) and the "Objectifs" dash list. */
.ds-cycle-hero {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    box-sizing: border-box;
    background: #FDF8EB;
    padding: 40px 20px 48px;
}

.ds-cycle-hero-inner {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 36px;
}

.ds-cycle-hero-img {
    flex: 0 0 260px;
    width: 260px;
    height: 220px;
    border-radius: var(--ds-radius-16);
    overflow: hidden;
}

.ds-cycle-hero-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 45%;
    display: block;
}

.ds-cycle-hero-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ds-spacing-8);
}

.ds-cycle-tag {
    display: inline-block;
    padding: .2857em .7143em;
    border: 1px solid var(--ds-carmin);
    border-radius: .5em;
    background: var(--ds-blanc);
    color: var(--ds-carmin);
    font-size: .75rem;
}

.ds-cycle-hero-title {
    margin: 0;
    font-size: 3.5rem;
    line-height: 1;
}

.ds-cycle-hero-sub {
    margin: 0 0 var(--ds-spacing-8);
}

.ds-cycle-hero-cta {
    min-width: 232px;
    justify-content: center;
    text-align: center;
}

.ds-stepper-step.is-current {
    background: var(--ds-ocre-def);
    color: var(--ds-carmin);
}

.ds-cycle-body {
    max-width: 1024px;
    margin: 0 auto;
    padding: 48px 20px 80px;
    box-sizing: border-box;
}

.ds-cycle-stepper {
    margin: 0 0 var(--ds-spacing-24);
    justify-content: flex-start;
    padding: 0;
}

.ds-cycle-lead {
    margin: 0 0 var(--ds-spacing-16);
}

.ds-cycle-intro {
    margin: 0;
}

.ds-essentiel {
    margin: 64px 0;
    padding: 40px 56px 48px;
    background: var(--ds-ocre-def);
    border-radius: var(--ds-radius-24);
    display: flex;
    flex-direction: column;
    gap: var(--ds-spacing-24);
}

.ds-essentiel-title {
    margin: 0;
    text-align: center;
    font-size: 2.75rem;
    line-height: 2.75rem;
}

.ds-essentiel-row {
    display: flex;
    flex-direction: column;
    gap: var(--ds-spacing-12);
}

.ds-essentiel-label {
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--ds-spacing-8);
    font-family: 'Open Sans', sans-serif;
}

.ds-essentiel-label svg {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
}

.ds-essentiel-stats {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-spacing-8) var(--ds-spacing-48);
}

.ds-essentiel-stats strong {
    margin-right: .25em;
}

.ds-essentiel-inline {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ds-spacing-8) var(--ds-spacing-24);
}

.ds-essentiel-inline p,
.ds-essentiel-early p {
    margin: 0;
}

.ds-essentiel-price {
    margin: 0;
}

.ds-essentiel-early {
    display: flex;
    align-items: flex-start;
    gap: var(--ds-spacing-12);
}

.ds-essentiel-badge {
    flex: 0 0 auto;
    padding: .2857em .7143em;
    border-radius: .2857em;
    background: var(--ds-marine);
    color: var(--ds-blanc);
    font-size: .6875rem;
    line-height: 1.2;
    white-space: nowrap;
}

.ds-cycle-objectifs-title {
    margin: 0 0 var(--ds-spacing-16);
    font-size: 2.75rem;
    line-height: 2.75rem;
}

.ds-cycle-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ds-spacing-8);
}

.ds-cycle-list li {
    position: relative;
    padding-left: 20px;
}

.ds-cycle-list li::before {
    content: "–";
    position: absolute;
    left: 4px;
    top: 0;
}

@media (max-width: 1024.5px) {
    .ds-cycle-body {
        padding: 48px 40px 64px;
    }

    .ds-essentiel {
        padding: 40px 40px 48px;
    }
}

@media (max-width: 767.5px) {
    .ds-cycle-hero {
        padding: 24px 20px 40px;
    }

    .ds-cycle-hero-inner {
        flex-direction: column;
        align-items: stretch;
        gap: var(--ds-spacing-24);
    }

    .ds-cycle-hero-img {
        flex-basis: auto;
        width: 100%;
        height: 190px;
    }

    .ds-cycle-hero-text {
        align-items: flex-start;
    }

    .ds-cycle-hero-title {
        font-size: 3rem;
    }

    .ds-cycle-hero-cta {
        align-self: stretch;
        min-width: 0;
    }

    .ds-cycle-body {
        padding: 40px 20px 48px;
    }

    .ds-essentiel {
        margin: 40px 0;
        padding: 32px 24px 32px;
    }

    .ds-essentiel-stats {
        flex-direction: column;
        gap: var(--ds-spacing-8);
    }

    .ds-essentiel-inline {
        flex-direction: column;
        align-items: flex-start;
    }

    .ds-essentiel-early {
        flex-direction: column;
        gap: var(--ds-spacing-8);
    }

    .ds-essentiel-title,
    .ds-cycle-objectifs-title {
        font-size: 2.5rem;
        line-height: 2.5rem;
    }
}

/* Update (2026-10-27): "Contenu du cycle" band of the cycle detail page
   (section 32), per your screenshots. It is the retro FAQ band (section 11)
   with a domain tag between each row's title and its chevron (the row title
   and tag stack on mobile), followed by the two image/text blocks of
   section 26, a closing paragraph and the two buttons. Row details are not
   in the screenshots (placeholder text). Sizes are measured approximately. */
.ds-cycle-acc-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-spacing-16);
}

.ds-cycle-acc-tag {
    flex: 0 0 auto;
    padding: .25em .7em;
    border-radius: .3em;
    font-size: .6875rem;
    line-height: 1.3;
    white-space: nowrap;
}

.ds-cycle-contenu-inner {
    max-width: 1024px;
    margin: 0 auto;
}

.ds-cycle-contenu .ds-parcours-features {
    margin-top: 48px;
}

.ds-cycle-contenu-note {
    margin: 48px 0 0;
}

.ds-cycle-cta {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--ds-spacing-16);
    margin-top: 48px;
}

@media (max-width: 767.5px) {
    .ds-cycle-acc-main {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--ds-spacing-8);
    }

    .ds-cycle-contenu .ds-parcours-features {
        margin-top: 40px;
    }

    .ds-cycle-contenu-note {
        margin-top: 40px;
    }

    .ds-cycle-cta {
        flex-direction: column;
        align-items: stretch;
        margin-top: 40px;
    }

    .ds-cycle-cta .ds-btn {
        justify-content: center;
        text-align: center;
    }
}

/* Update (2026-10-27): "Publics & pré-requis" and "Modalités" of the cycle
   detail page (section 33), per your screenshots. White column (1024px), a
   two-line heading (H2 carmin over H2 retro) with a marine bold line and a
   small paragraph, then the retro "Modalités" heading, three ocre def cards
   (radius 16px, padding 24px, bold title + bullet list) and a carmin outline
   button. Under 767.5px the cards become a swipeable row (one card and a bit
   of the next) with navigation dots, like "Modules à la carte". Sizes are
   measured approximately. */
.ds-cycle-info {
    max-width: 1024px;
    margin: 0 auto;
    padding: 64px 20px 80px;
    box-sizing: border-box;
}

.ds-cycle-info-title {
    margin: 0 0 var(--ds-spacing-24);
    text-align: left;
}

.ds-cycle-info-line,
.ds-cycle-info-retro {
    display: block;
}

.ds-cycle-info-retro {
    margin-top: -.25rem;
}

.ds-cycle-public-sub {
    margin: 0 0 var(--ds-spacing-16);
}

.ds-cycle-public p:last-child {
    margin: 0;
}

.ds-cycle-modalites {
    margin-top: 64px;
}

.ds-cycle-modalites-title {
    margin: 0 0 var(--ds-spacing-32);
}

.ds-modalites-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ds-spacing-24);
}

.ds-modalite-card {
    box-sizing: border-box;
    padding: var(--ds-spacing-24);
    background: var(--ds-ocre-def);
    border-radius: var(--ds-radius-16);
    display: flex;
    flex-direction: column;
    gap: var(--ds-spacing-16);
}

.ds-modalite-title {
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 1.125rem;
    line-height: 1.5rem;
    color: var(--ds-texte-fonce);
}

.ds-modalite-list {
    margin: 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: var(--ds-spacing-4);
    list-style: disc;
}

.ds-modalites-dots {
    display: none;
    justify-content: center;
    align-items: center;
    gap: var(--ds-spacing-8);
    margin-top: var(--ds-spacing-24);
}

.ds-modalites-cta {
    display: flex;
    justify-content: flex-start;
    margin-top: var(--ds-spacing-48);
}

@media (max-width: 1024.5px) {
    .ds-cycle-info {
        padding: 48px 40px 64px;
    }
}

@media (max-width: 767.5px) {
    .ds-cycle-info {
        padding: 40px 20px 48px;
    }

    .ds-cycle-info-line {
        font-size: 2rem;
        line-height: 2rem;
    }

    .ds-cycle-info-retro,
    .ds-cycle-modalites-title {
        font-size: 2.5rem;
        line-height: 2.5rem;
    }

    .ds-cycle-modalites {
        margin-top: 48px;
    }

    .ds-modalites-grid {
        display: flex;
        gap: var(--ds-spacing-16);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin-right: -20px;
        padding-right: 20px;
    }

    .ds-modalites-grid::-webkit-scrollbar {
        display: none;
    }

    .ds-modalite-card {
        flex: 0 0 82%;
        scroll-snap-align: start;
    }

    .ds-modalites-dots {
        display: flex;
    }

    .ds-modalites-cta {
        margin-top: var(--ds-spacing-32);
    }

    .ds-modalites-cta .ds-btn {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}

/* Update (2026-10-27): "Une école au cœur de Paris" band (section 34), per
   your desktop/tablet and mobile screenshots. Full-bleed ocre def band, a
   1024px row of two portrait photos (rounded 16px, about 296x440) and the
   text column (two-line heading, small paragraph, filled carmin button).
   Under 767.5px everything stacks in the order photo, text, photo, with
   full-width photos and button. Measured approximately. The two photos are
   not in the images folder: see the note of section 34 for stand-ins. */
.ds-ecole-demo {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    box-sizing: border-box;
    background: var(--ds-ocre-def);
    padding: 64px 20px;
}

.ds-ecole-inner {
    max-width: 1024px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 296px 296px minmax(0, 1fr);
    grid-template-areas: "p1 p2 text";
    column-gap: 24px;
    align-items: center;
}

.ds-ecole-img {
    height: 440px;
    border-radius: var(--ds-radius-16);
    overflow: hidden;
}

.ds-ecole-img--1 { grid-area: p1; }
.ds-ecole-img--2 { grid-area: p2; }

.ds-ecole-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ds-ecole-text {
    grid-area: text;
    padding-left: var(--ds-spacing-16);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ds-spacing-16);
}

.ds-ecole-title {
    margin: 0;
}

.ds-ecole-title-line,
.ds-ecole-title-retro {
    display: block;
}

.ds-ecole-title-retro {
    margin-top: -.25rem;
}

.ds-ecole-body {
    margin: 0;
}

@media (max-width: 1024.5px) {
    .ds-ecole-demo {
        padding: 48px 40px;
    }

    .ds-ecole-inner {
        grid-template-columns: minmax(0, .9fr) minmax(0, .9fr) minmax(0, 1.3fr);
        column-gap: 16px;
    }

    .ds-ecole-text {
        padding-left: 0;
    }

    .ds-ecole-cta {
        white-space: nowrap;
        min-width: 0;
        padding-left: 24px;
        padding-right: 24px;
    }

    .ds-ecole-img {
        height: 360px;
    }

    .ds-ecole-title-line {
        font-size: 1.75rem;
        line-height: 1.75rem;
    }

    .ds-ecole-title-retro {
        font-size: 3rem;
        line-height: 3rem;
    }
}

@media (max-width: 767.5px) {
    .ds-ecole-demo {
        padding: 24px 20px 40px;
    }

    .ds-ecole-inner {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "p1" "text" "p2";
        row-gap: var(--ds-spacing-24);
    }

    .ds-ecole-img {
        height: 205px;
    }

    .ds-ecole-img--2 {
        height: 190px;
    }

    .ds-ecole-text {
        padding-left: 0;
        align-items: stretch;
    }

    .ds-ecole-body {
        font-size: 1rem;
        line-height: 1.5rem;
    }

    .ds-ecole-title-line {
        font-size: 2rem;
        line-height: 2rem;
    }

    .ds-ecole-title-retro {
        font-size: 2.5rem;
        line-height: 2.5rem;
    }

    .ds-ecole-cta {
        justify-content: center;
        text-align: center;
    }
}

/* Update (2026-10-27): satisfaction rate under the Témoignages cards (section
   35), per your screenshots: "9,7/10" in bold, a thin progress bar (marine
   fill on a pale track, 200px on desktop, shrinking on mobile) and a small
   caption. The fill width is set inline (97% = 9,7 out of 10). Measured
   approximately. */
.ds-satisfaction {
    text-align: left;
    max-width: 1024px;
    margin: var(--ds-spacing-32) auto 0;
    display: flex;
    flex-direction: column;
    gap: var(--ds-spacing-8);
}

.ds-satisfaction-row {
    display: flex;
    align-items: center;
    gap: var(--ds-spacing-12);
}

.ds-satisfaction-score {
    flex: 0 0 auto;
    font-size: .875rem;
}

.ds-satisfaction-bar {
    position: relative;
    flex: 0 1 200px;
    height: 6px;
    border-radius: var(--ds-radius-full);
    background: var(--ds-turquoise-20, #E1EEF0);
    overflow: hidden;
}

.ds-satisfaction-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: var(--ds-radius-full);
    background: var(--ds-marine);
}

.ds-satisfaction-label {
    margin: 0;
}

/* Update (2026-10-27): "Calendrier" of the cycle detail page (section 36),
   per your desktop, tablet and mobile screenshots. White 1024px column: retro
   heading, a date row (white, ocre-3 border, radius 16px, soft shadow) with
   the date in bold and a blue module bar (domain blue, sentence-case bold
   label), a carmin outline button, a small paragraph and a filled carmin
   button. On mobile the row stacks (date above the full-width bar) and both
   buttons go full width. Measured approximately. */
.ds-cycle-calendrier {
    padding-top: 0;
}

.ds-cal-row {
    display: grid;
    grid-template-columns: 220px minmax(0, 640px);
    align-items: center;
    column-gap: var(--ds-spacing-24);
    padding: 20px 24px;
    background: var(--ds-blanc);
    border: 1px solid var(--ds-ocre-3);
    border-radius: var(--ds-radius-16);
    box-shadow: 0 2px 6px rgba(16, 24, 40, .18);
}

/* Update (2026-11-02), per "the section calendrier should have margin in between":
   consecutive date rows are 16px apart (12px on mobile). */
.ds-cal-row + .ds-cal-row {
    margin-top: var(--ds-spacing-16);
}

@media (max-width: 767.5px) {
    .ds-cal-row + .ds-cal-row {
        margin-top: var(--ds-spacing-12);
    }
}

.ds-cal-date {
    margin: 0;
}

.ds-cal-bar {
    display: block;
    box-sizing: border-box;
    padding: .375rem .75rem;
    border-radius: var(--ds-radius-8);
    background: var(--ds-domaine-pensee);
    color: var(--ds-blanc);
    font-weight: 700;
}

.ds-cal-more {
    margin-top: var(--ds-spacing-24);
}

.ds-cal-note {
    margin: var(--ds-spacing-32) 0 var(--ds-spacing-24);
}

@media (max-width: 767.5px) {
    .ds-cal-row {
        grid-template-columns: minmax(0, 1fr);
        row-gap: var(--ds-spacing-12);
        padding: 16px;
    }

    .ds-cal-more .ds-btn,
    .ds-cal-cta .ds-btn {
        width: 100%;
        justify-content: center;
        text-align: center;
        box-sizing: border-box;
    }
}

/* Update (2026-10-27): "Équipe pédagogique" (section 37) of the cycle detail
   page, per your desktop, tablet and mobile screenshots. White band, centred
   heading where "Équipe" is the retro script line and "pédagogique" the light
   H2 line (the reverse of the other two-line headings), then two cards (ocre-3
   border, radius 16px, padding 24px) with a round 64px portrait, the name in
   light marine (H3, 1.75rem), a two-line teaser and a "Lire plus" link. The
   portraits are the site's grey photos in images/profil/ with the red-to-teal
   tint of your screenshots drawn by CSS (a gradient laid over the photo), so
   the photos themselves are untouched. Cards stack under 767.5px. The tint
   strength and sizes are measured approximately. */
.ds-team-demo {
    background: var(--ds-blanc);
    padding: 64px 20px;
}

.ds-team-inner {
    max-width: 1024px;
    margin: 0 auto;
}

.ds-team-title {
    margin: 0 0 var(--ds-spacing-32);
    text-align: center;
}

.ds-team-title-retro,
.ds-team-title-line {
    display: block;
}

.ds-team-title-line {
    margin-top: -.25rem;
}

.ds-team-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ds-spacing-24);
}

.ds-team-card {
    box-sizing: border-box;
    padding: var(--ds-spacing-24);
    background: var(--ds-blanc);
    border: 1px solid var(--ds-ocre-3);
    border-radius: var(--ds-radius-16);
    box-shadow: 0 2px 8px rgba(16, 24, 40, .08);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ds-spacing-16);
}

.ds-team-head {
    display: flex;
    align-items: center;
    gap: var(--ds-spacing-16);
}

.ds-team-avatar {
    position: relative;
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    border-radius: var(--ds-radius-full);
    overflow: hidden;
    background: var(--ds-marine);
}

.ds-team-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 20%;
    display: block;
    filter: grayscale(1) brightness(1.15);
}

.ds-team-avatar::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(222, 70, 78, .95) 0%, rgba(222, 110, 110, .8) 45%, rgba(40, 150, 160, .95) 100%);
    mix-blend-mode: multiply;
}

.ds-team-name {
    margin: 0;
    font-size: 1.75rem;
    line-height: 2rem;
}

.ds-team-text {
    margin: 0;
}

.ds-team-link {
    margin-top: auto;
    font-size: .75rem;
}

@media (max-width: 1024.5px) {
    .ds-team-demo {
        padding: 48px 40px;
    }
}

@media (max-width: 767.5px) {
    .ds-team-demo {
        padding: 40px 20px;
    }

    .ds-team-title-retro {
        font-size: 2.5rem;
        line-height: 2.5rem;
    }

    .ds-team-title-line {
        font-size: 2rem;
        line-height: 2rem;
    }

    .ds-team-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Update (2026-10-27): "Vous aimerez aussi" (section 38) closing the cycle
   detail page, per your desktop, tablet and mobile screenshots. It is the
   "Modules à la carte" band (section 27) in a white version: no intro line,
   three module cards, centred heading ("Vous aimerez" light carmin over
   "aussi" retro). The "Voir plus" button shows on desktop only and the cards
   become the swipeable row with dots under 767.5px, as in section 27; on
   tablet the three cards stay side by side (your tablet screenshot also draws
   dots there, which would do nothing with all cards visible: not added). */
.ds-modules-demo--white {
    background: var(--ds-blanc);
    padding: 64px 20px 56px;
}

.ds-modules-demo--white .ds-modules-heading {
    margin-bottom: var(--ds-spacing-32);
}

@media (max-width: 1024.5px) {
    .ds-modules-demo--white {
        padding: 48px 40px 40px;
    }

    .ds-modules-demo--white .ds-modules-cta {
        display: none;
    }

    .ds-modules-demo--white .ds-module-card-tag {
        font-size: .625rem;
        white-space: normal;
        align-self: flex-start;
    }

    .ds-modules-demo--white .ds-module-card-title {
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }

    .ds-modules-demo--white .ds-module-card-foot {
        gap: var(--ds-spacing-8);
    }

    .ds-modules-demo--white .ds-module-card-foot .ds-text-link {
        white-space: nowrap;
        font-size: .75rem;
    }

    .ds-modules-demo--white .ds-module-card-price span {
        white-space: nowrap;
    }
}

@media (max-width: 767.5px) {
    .ds-modules-demo--white {
        padding: 40px 20px 32px;
    }
}

/* Update (2026-10-27): "Supervision" page cards (section 39), per your
   desktop, tablet and mobile screenshots. A horizontal card (ocre-3 border,
   radius 16px, white) with a photo taking 40% of the width and a text body:
   outline carmin tag, H2 title in marine, a bold lead line, small
   paragraphs, a meta row (calendar and price-tag icons, like the program
   card) and a filled carmin button. The second card has the photo on the
   right (modifier --reverse). Stacks (photo on top) under 767.5px. Measured
   approximately: the screenshots are about half the real size. */
.ds-sup-list {
    max-width: 1024px;
    margin: 0 auto;
    padding: 24px 0 80px;
    display: flex;
    flex-direction: column;
    gap: 64px;
}

.ds-sup-card {
    display: flex;
    align-items: stretch;
    box-sizing: border-box;
    background: var(--ds-blanc);
    border: 1px solid var(--ds-ocre-3);
    border-radius: var(--ds-radius-16);
    overflow: hidden;
}

.ds-sup-card--reverse {
    flex-direction: row-reverse;
}

.ds-sup-card {
    min-height: 380px;
}

.ds-sup-card-img {
    flex: 0 0 40%;
    min-height: 280px;
    position: relative;
}

.ds-sup-card-img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ds-sup-card-body {
    flex: 1 1 auto;
    min-width: 0;
    box-sizing: border-box;
    padding: 40px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--ds-spacing-24);
}

.ds-sup-card-tag {
    display: inline-block;
    padding: .2857em .5714em;
    border: 1px solid var(--ds-carmin);
    border-radius: .5714em;
    background: var(--ds-blanc);
    color: var(--ds-carmin);
    font-size: .75rem;
    line-height: 1.2;
}

.ds-sup-card-title {
    margin: 0;
    font-size: 2.25rem;
    line-height: 1.1;
}

.ds-sup-card-copy {
    display: flex;
    flex-direction: column;
    gap: var(--ds-spacing-16);
}

.ds-sup-card-copy p {
    margin: 0;
}

.ds-sup-card-lead {
    font-weight: 700;
}

.ds-sup-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-spacing-8) var(--ds-spacing-24);
}

.ds-sup-card-meta-item {
    display: inline-flex;
    align-items: center;
    gap: .5em;
}

.ds-sup-card-meta-item svg {
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
}

.ds-sup-card-cta {
    min-width: 180px;
    justify-content: center;
    text-align: center;
}

@media (max-width: 1024.5px) {
    .ds-sup-list {
        padding: 24px 40px 64px;
        gap: 40px;
    }

    .ds-sup-card-body {
        padding: 32px 28px;
    }

    .ds-sup-card-title {
        font-size: 2rem;
    }
}

@media (max-width: 767.5px) {
    .ds-sup-list {
        padding: 24px 20px 48px;
        gap: 24px;
    }

    .ds-sup-card,
    .ds-sup-card--reverse {
        flex-direction: column;
    }

    .ds-sup-card {
        min-height: 0;
    }

    .ds-sup-card-img {
        flex-basis: auto;
        min-height: 0;
        height: 190px;
    }

    .ds-sup-card-body {
        padding: 24px 20px 28px;
        align-items: stretch;
    }

    .ds-sup-card-tag {
        align-self: flex-start;
    }

    .ds-sup-card-title {
        font-size: 2rem;
    }

    .ds-sup-card-meta {
        flex-direction: column;
    }

    .ds-sup-card-cta {
        min-width: 0;
    }
}

/* Update (2026-10-31): "Portrait des superviseurs" band (section 40) of the
   Supervision page, per your desktop, tablet and mobile screenshots. It is the
   « Équipe pédagogique » block (section 37, same cards, duotone portraits and
   "Lire plus" links) on the ocre def background instead of white, with the
   title "Portrait" (retro) over "des superviseurs" (light carmin). Three cards
   in a 2-column grid (the third sits alone on the left), stacked under
   767.5px. The "Des questions ?" band that follows is the unchanged
   component of section 23 (retro heading). */
.ds-team-demo--ocre {
    background: var(--ds-ocre-def);
}

/* Update (2026-10-31): « Dans mon métier » page (section 41), per your
   desktop, tablet and mobile screenshots. Hero and chips are section 25; the
   two horizontal cards are the Supervision cards (section 39) with the tag
   "Dans mon métier" and the button "Découvrir le parcours". New here: the
   intro line (marine, left-aligned on the same 1024px column as the cards)
   and wider spacing between the cards (80px on desktop; 24px on tablet and
   mobile, as measured on your captures). */
.ds-metier-intro {
    max-width: 1024px;
    margin: 0 auto;
    padding: 80px 0 0;
    box-sizing: border-box;
}

.ds-sup-list--metier {
    padding-top: 80px;
    gap: 80px;
}

/* Desktop only: the text block is airier on your desktop capture (28px line
   height, about 28px between title, lead, text, duration and button); on
   tablet and mobile the Supervision spacing already matches. */
.ds-sup-list--metier .ds-sup-card-body {
    gap: 28px;
}

.ds-sup-list--metier .ds-sup-card-copy {
    gap: 28px;
}

.ds-sup-list--metier .ds-sup-card-copy p {
    line-height: 1.75rem;
}

.ds-metier-br {
    display: inline;
}

@media (max-width: 1024.5px) {
    .ds-metier-br {
        display: none;
    }

    .ds-sup-list--metier .ds-sup-card-body {
        gap: 24px;
    }

    .ds-sup-list--metier .ds-sup-card-copy {
        gap: 16px;
    }

    .ds-sup-list--metier .ds-sup-card-copy p {
        line-height: 150%;
    }

    .ds-metier-intro {
        padding: 40px 40px 0;
    }

    .ds-sup-list--metier {
        padding-top: 24px;
        gap: 24px;
    }
}

@media (max-width: 767.5px) {
    .ds-metier-intro {
        padding: 40px 20px 0;
    }

    .ds-sup-list--metier .ds-sup-card-cta {
        white-space: nowrap;
        padding-left: 16px;
        padding-right: 16px;
    }

    .ds-sup-list--metier {
        padding-top: 24px;
    }
}

/* Update (2026-10-31): « Formation sur mesure » band (section 42) of the
   « Dans mon métier » page, per your tablet and mobile screenshots (no desktop
   one). Full-width ocre def band split in two: text on the left (tag, H2
   "Systémie & vous", bold lead, text, red button), photo flush against the
   right edge and the band's top and bottom (about 42% of the width). Under
   767.5px the photo goes on top (340px high) and the text below, button full
   width. On wide screens the text's left edge is aligned with the 1024px
   column of the cards above (assumption: the capture shows no desktop). The
   Témoignages block that follows is the unchanged light variant (section 19). */
.ds-mesure {
    display: flex;
    align-items: stretch;
    box-sizing: border-box;
    min-height: 390px;
    background: var(--ds-ocre-def);
}

.ds-mesure-body {
    flex: 1 1 58%;
    min-width: 0;
    box-sizing: border-box;
    padding: 40px 48px 40px max(72px, calc((100% - 1024px) / 2));
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--ds-spacing-24);
}

.ds-mesure-tag {
    display: inline-block;
    padding: 2px 8px;
    border: 1px solid var(--ds-carmin);
    border-radius: var(--ds-radius-8);
    font-size: .75rem;
    color: var(--ds-carmin);
}

.ds-mesure-title {
    margin: 0;
    font-size: 2.25rem;
    line-height: 2.75rem;
}

.ds-mesure-copy {
    display: flex;
    flex-direction: column;
    gap: var(--ds-spacing-16);
    max-width: 520px;
}

.ds-mesure-copy p {
    margin: 0;
}

.ds-mesure-lead {
    font-weight: 700;
}

.ds-mesure-cta {
    white-space: nowrap;
}

.ds-mesure-img {
    position: relative;
    flex: 0 0 42%;
    min-height: 280px;
}

.ds-mesure-img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 70% 50%;
    display: block;
}

@media (max-width: 1024.5px) {
    .ds-mesure-title {
        font-size: 2rem;
        line-height: 2.5rem;
    }
}

@media (max-width: 767.5px) {
    .ds-mesure {
        flex-direction: column-reverse;
        min-height: 0;
    }

    .ds-mesure-body {
        flex: 0 0 auto;
        padding: 24px 20px 28px;
        align-items: stretch;
    }

    .ds-mesure-tag {
        align-self: flex-start;
    }

    .ds-mesure-copy {
        max-width: none;
    }

    .ds-mesure-img {
        flex: 0 0 auto;
        height: 340px;
        min-height: 0;
    }

    .ds-mesure-cta {
        white-space: nowrap;
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* Update (2026-10-31): « L'école » page (section 44), per your desktop, tablet
   and mobile screenshots. Under the page hero (section 25, no chips on this
   page): a quote strip - one short sentence at a time, centred, with four
   small dots under it (the active one is the hollow dot, as on your captures;
   clicking a dot shows that quote) - then three image/text blocks on the
   1024px column: photo 300px wide that stretches to the height of its text
   (rounded 8px), 60px gap, bold marine title, paragraphs 28px apart. The
   second block is mirrored (photo on the right). The last block ends with an
   outline button. Tablet: photo 222px, 21px line height, 24px between
   blocks. Mobile: photo on top of each block (300px high), text under it. */
.ds-lecole {
    max-width: 1024px;
    margin: 0 auto;
    padding: 80px 0 80px;
    box-sizing: border-box;
}

.ds-lecole-quote {
    text-align: center;
}

.ds-lecole-quote-text {
    margin: 0;
    font-size: 1.125rem;
    line-height: 1.75rem;
    color: var(--ds-marine);
}

.ds-lecole-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--ds-spacing-8);
    margin-top: var(--ds-spacing-16);
}

.ds-lecole-dot {
    box-sizing: border-box;
    width: 8px;
    height: 8px;
    padding: 0;
    border: 1px solid var(--ds-marine);
    border-radius: var(--ds-radius-full);
    background: var(--ds-marine);
    cursor: pointer;
}

.ds-lecole-dot.is-active {
    background: transparent;
}

.ds-lecole-blocks {
    display: flex;
    flex-direction: column;
    gap: 80px;
    margin-top: 72px;
}

.ds-lecole-block {
    display: flex;
    align-items: stretch;
    gap: 60px;
}

.ds-lecole-block--reverse {
    flex-direction: row-reverse;
}

.ds-lecole-img {
    position: relative;
    flex: 0 0 300px;
    width: 300px;
    min-height: 280px;
    border-radius: var(--ds-radius-8);
    overflow: hidden;
}

.ds-lecole-img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ds-lecole-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 28px;
}

.ds-lecole-title {
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 1.125rem;
    line-height: 1.5rem;
    color: var(--ds-marine);
}

.ds-lecole-text p {
    margin: 0;
    line-height: 1.75rem;
}

.ds-lecole-cta {
    white-space: nowrap;
}

/* The book cover is portrait: keep its top (title and authors) in view when
   the photo box is cropped. */
.ds-lecole-img--top img {
    object-position: 50% 0;
}

@media (max-width: 1024.5px) {
    .ds-lecole {
        padding: 48px 40px 64px;
    }

    .ds-lecole-blocks {
        margin-top: 48px;
        gap: 24px;
    }

    .ds-lecole-block {
        gap: 40px;
    }

    .ds-lecole-img {
        flex-basis: 222px;
        width: 222px;
    }

    .ds-lecole-text {
        gap: 20px;
    }

    .ds-lecole-text p {
        line-height: 150%;
    }
}

@media (max-width: 767.5px) {
    .ds-lecole {
        padding: 32px 20px 48px;
    }

    .ds-lecole-quote-text {
        font-size: 1rem;
        line-height: 1.5rem;
    }

    .ds-lecole-blocks {
        margin-top: 24px;
        gap: 40px;
    }

    .ds-lecole-block,
    .ds-lecole-block--reverse {
        flex-direction: column;
        gap: 24px;
    }

    .ds-lecole-img {
        flex: 0 0 auto;
        width: 100%;
        height: 300px;
        min-height: 0;
    }

    .ds-lecole-text {
        gap: 16px;
        align-self: stretch;
    }

    .ds-lecole-cta {
        align-self: stretch;
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* Update (2026-10-31): bottom of the « L'école » page (section 45), per your
   desktop, tablet and mobile screenshots. (1) "Certification Qualiopi" band:
   turquoise 20 background, title "Certification" (light carmin) over
   "Qualiopi" (retro), then the certificate (A4, 224px wide) on the left and,
   on the right, the sentence, the small italic line and the Qualiopi logo in
   a white rounded card aligned with the bottom of the certificate. Tablet:
   same layout, smaller (163px certificate). Mobile: everything stacked, the
   certificate centred. (2) « Équipe pédagogique »: the cards of section 37,
   nine of them, with 40px between cards on desktop (24px on tablet and
   mobile) and the last, odd, card centred on desktop and tablet. */
.ds-qcert {
    box-sizing: border-box;
    background: var(--ds-turquoise-20);
    padding: 80px 20px;
}

.ds-qcert-title {
    margin: 0 0 48px;
    text-align: center;
}

.ds-qcert-title-line,
.ds-qcert-title-retro {
    display: block;
}

.ds-qcert-title-retro {
    margin-top: -.25rem;
}

.ds-qcert-row {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    align-items: stretch;
    gap: 64px;
}

.ds-qcert-img {
    flex: 0 0 224px;
    width: 224px;
    align-self: flex-start;
    border-radius: var(--ds-radius-8);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(16, 24, 40, .12);
}

.ds-qcert-img img {
    display: block;
    width: 100%;
    height: auto;
}

.ds-qcert-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--ds-spacing-24);
}

.ds-qcert-copy {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ds-qcert-copy p {
    margin: 0;
}

.ds-qcert-logo {
    align-self: flex-start;
    box-sizing: border-box;
    width: 192px;
    height: 104px;
    padding: 12px 16px;
    background: var(--ds-blanc);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ds-qcert-logo img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.ds-team-demo--wide .ds-team-grid {
    gap: 40px;
}

.ds-team-demo--wide .ds-team-grid > .ds-team-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - 40px) / 2);
}

@media (max-width: 1024.5px) {
    .ds-qcert {
        padding: 56px 40px;
    }

    .ds-qcert-row {
        gap: 48px;
    }

    .ds-qcert-img {
        flex-basis: 163px;
        width: 163px;
    }

    .ds-team-demo--wide .ds-team-grid {
        gap: 24px;
    }

    .ds-team-demo--wide .ds-team-grid > .ds-team-card:last-child:nth-child(odd) {
        width: calc((100% - 24px) / 2);
    }
}

@media (max-width: 767.5px) {
    .ds-qcert {
        padding: 40px 20px;
    }

    .ds-qcert-title {
        margin-bottom: 24px;
    }

    .ds-qcert-row {
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
    }

    .ds-qcert-img {
        flex: 0 0 auto;
        width: 202px;
        align-self: center;
    }

    .ds-qcert-text {
        gap: 24px;
    }

    .ds-team-demo--wide .ds-team-grid > .ds-team-card:last-child:nth-child(odd) {
        grid-column: auto;
        justify-self: stretch;
        width: auto;
    }
}

/* Update (2026-10-31): three closing bands of the « L'école » page (section
   46), per your desktop, tablet and mobile screenshots. (1) « Une école au
   cœur de Paris »: the unchanged band of section 34. (2) « Accessibilité /
   Handicap »: white band, left-aligned on the 1024px column - title in the
   retro script (one line on desktop, two under 767.5px), text, outline
   button (500px wide on desktop, 380px on tablet, full width on mobile).
   (3) « Le Cabinet Everswing »: the ocre/photo band of section 42
   (.ds-mesure) without the tag, with the yellow Everswing panel on the right
   (57/43 split) instead of the car photo; the text's left edge sits 158px
   from the screen edge on wide screens (the capture shows it left of the
   1024px column). The panel image is the site's everswing-orange.webp
   recoloured to your yellow and cream (everswing-jaune.webp). */
.ds-access {
    box-sizing: border-box;
    background: var(--ds-blanc);
    padding: 80px 20px;
}

.ds-access-inner {
    max-width: 1024px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}

.ds-access-title {
    margin: 0;
}

.ds-access-text {
    margin: 0;
    line-height: 1.75rem;
}

.ds-access-cta {
    min-width: 500px;
    margin-top: 4px;
}

.ds-mesure--cabinet {
    min-height: 360px;
}

.ds-mesure--cabinet .ds-mesure-body {
    padding-left: max(62px, calc((100% - 1124px) / 2));
}

.ds-mesure--cabinet .ds-mesure-img {
    flex-basis: 43%;
    background: #EECE44;
}

.ds-mesure--cabinet .ds-mesure-img img {
    object-position: 50% 50%;
}

.ds-mesure--cabinet .ds-mesure-copy {
    max-width: 560px;
}

.ds-mesure--cabinet .ds-mesure-copy p {
    line-height: 1.75rem;
}

@media (max-width: 1024.5px) {
    .ds-access {
        padding: 56px 40px;
    }

    .ds-access-cta {
        min-width: 380px;
    }

    .ds-mesure--cabinet .ds-mesure-copy p {
        line-height: 150%;
    }
}

@media (max-width: 767.5px) {
    .ds-access {
        padding: 40px 20px;
    }

    .ds-access-inner {
        gap: 16px;
    }

    .ds-access-cta {
        align-self: stretch;
        min-width: 0;
        white-space: normal;
        text-align: center;
    }

    .ds-mesure--cabinet {
        min-height: 0;
    }

    .ds-mesure--cabinet .ds-mesure-body {
        padding-left: 20px;
    }

    .ds-mesure--cabinet .ds-mesure-img {
        flex: 0 0 auto;
    }

    .ds-access-title {
        font-size: 2.5rem;
        line-height: 2.5rem;
    }
}


/* Update (2026-10-31): « La systémie » page (section 48), per your desktop,
   tablet and mobile screenshots. Title "Qu'est ce que la / Systémie ?" in two
   lines (light carmin, then the retro style, like "Certification / Qualiopi"),
   then the image/text blocks of section 44 (.ds-lecole-block, 300px photo,
   reverse variant for the second block) with a full-width text between the
   first and second block. */
.ds-systemie {
    max-width: 1024px;
    margin: 0 auto;
    padding: 72px 0 80px;
    box-sizing: border-box;
}

.ds-systemie-title {
    margin: 0 0 56px;
    text-align: left;
}

.ds-systemie-title-line,
.ds-systemie-title-retro {
    display: block;
}

.ds-systemie-title-retro {
    margin-top: -.25rem;
}

.ds-systemie-blocks {
    margin-top: 0;
}

/* Update (2026-11-05): the photo is never taller than the text next to it - no minimum height, the photo box
   stretches to the height of the text block (the image is cropped to fit, object-fit: cover). */
.ds-systemie-blocks .ds-lecole-img {
    min-height: 0;
}

.ds-systemie-long {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ds-systemie-long p {
    margin: 0;
    line-height: 1.75rem;
}

@media (max-width: 1024.5px) {
    .ds-systemie {
        padding: 48px 40px 72px;
    }

    .ds-systemie-title {
        margin-bottom: 40px;
    }

    .ds-systemie-blocks .ds-lecole-img {
        min-height: 0;
    }

    .ds-systemie-long p {
        line-height: 150%;
    }
}

@media (max-width: 767.5px) {
    .ds-systemie {
        padding: 32px 20px 56px;
    }

    .ds-systemie-title {
        margin-bottom: 32px;
    }

    .ds-systemie-blocks .ds-lecole-img {
        min-height: 0;
    }
}

/* Update (2026-10-31): « Palo Alto » page (section 49), per your desktop,
   tablet and mobile screenshots. The whole page sits on the ocre-def band
   (full width, measured #F5EFDF on your captures), content on a 1024px column
   (24px side padding on tablet and mobile): retro H1 left-aligned, intro (photo
   300px + marine text), full-width small texts, history heading, wide Bateson
   photo, five round portraits (144px, spread across the column; 2-column grid
   on mobile), the MRI block and the book block (image/text blocks of section
   44), and five white cards (3 columns, then 2) with a thin ocre border. */
.ds-palo {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    box-sizing: border-box;
    background: #F5EFDF;
    padding: 80px 0 96px;
}

.ds-palo-inner {
    max-width: 1024px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 80px;
    box-sizing: border-box;
}

.ds-palo-title {
    margin: 0 0 -24px;
}

.ds-palo-inner > p,
.ds-palo-group p,
.ds-palo-approche > p {
    margin: 0;
}

.ds-palo-group,
.ds-palo-approche {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.ds-palo-approche {
    gap: 24px;
}

.ds-palo-approche .ds-lecole-title,
.ds-palo-group .ds-lecole-title {
    margin: 0;
}

.ds-palo-intro {
    display: flex;
    align-items: center;
    gap: 60px;
}

.ds-palo-intro-img {
    flex: 0 0 300px;
    width: 300px;
    height: 186px;
    border-radius: var(--ds-radius-8);
    overflow: hidden;
}

.ds-palo-intro-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 30%;
    display: block;
}

.ds-palo-intro-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.ds-palo-intro-text p {
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    font-size: 1.125rem;
    line-height: 1.75rem;
    letter-spacing: -.0275rem;
    color: var(--ds-type-color, var(--ds-marine));
}

.ds-palo-banner {
    border-radius: var(--ds-radius-8);
    overflow: hidden;
}

.ds-palo-banner img {
    display: block;
    width: 100%;
    height: auto;
}

.ds-palo-people {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.ds-palo-person {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    flex: 0 0 144px;
    width: 144px;
}

.ds-palo-person img {
    width: 144px;
    height: 144px;
    border-radius: 50%;
    object-fit: cover;
    object-position: 50% 20%;
    display: block;
}

.ds-palo-person-name {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.375rem;
    text-align: center;
    color: var(--ds-marine);
    white-space: nowrap;
}

.ds-palo-cards {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.ds-palo-card {
    box-sizing: border-box;
    background: var(--ds-blanc);
    border: 1px solid #ECDFC0;
    border-radius: 20px;
    padding: 28px;
}

.ds-palo-card p {
    margin: 0;
}

.ds-palo-book {
    flex: 0 0 300px;
    width: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ds-palo-book img {
    display: block;
    width: 235px;
    height: auto;
}

@media (max-width: 1024.5px) {
    .ds-palo {
        padding: 56px 40px 72px;
    }

    .ds-palo-inner {
        gap: 56px;
    }

    .ds-palo-title {
        font-size: 3.5rem;
        line-height: 1.1;
        margin-bottom: -16px;
    }

    .ds-palo-intro {
        gap: 40px;
    }

    .ds-palo-intro-img {
        flex-basis: 226px;
        width: 226px;
        height: 161px;
    }

    .ds-palo-intro-text p {
        font-size: 1rem;
        line-height: 1.625rem;
    }

    .ds-palo-person,
    .ds-palo-person img {
        width: 110px;
    }

    .ds-palo-person {
        flex-basis: 110px;
    }

    .ds-palo-person img {
        height: 110px;
    }

    .ds-palo-person-name {
        font-size: .875rem;
        line-height: 1.25rem;
    }

    .ds-palo-cards {
        gap: 20px;
    }

    .ds-palo-card {
        padding: 20px;
    }

    .ds-palo .ds-lecole-img {
        flex-basis: 222px;
        width: 222px;
        min-height: 0;
    }

    .ds-palo-book {
        flex-basis: 222px;
        width: 222px;
    }

    .ds-palo-book img {
        width: 180px;
    }

    .ds-palo .ds-lecole-block {
        gap: 40px;
    }

    .ds-palo .ds-lecole-text {
        gap: 20px;
    }
}

@media (max-width: 767.5px) {
    .ds-palo {
        padding: 40px 24px 56px;
    }

    .ds-palo-inner {
        gap: 40px;
    }

    .ds-palo-title {
        font-size: 3rem;
        margin-bottom: -8px;
    }

    .ds-palo-intro {
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
    }

    .ds-palo-intro-img {
        flex: 0 0 auto;
        width: 100%;
        height: 176px;
    }

    .ds-palo-intro-text p {
        font-size: 1.125rem;
        line-height: 1.75rem;
    }

    .ds-palo-people {
        display: grid;
        grid-template-columns: 1fr 1fr;
        row-gap: 24px;
        justify-items: center;
    }

    .ds-palo-person,
    .ds-palo-person img {
        width: 130px;
    }

    .ds-palo-person {
        flex: 0 0 auto;
    }

    .ds-palo-person img {
        height: 130px;
    }

    .ds-palo-person-name {
        font-size: .9375rem;
    }

    .ds-palo-cards {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .ds-palo-card {
        padding: 22px;
    }

    .ds-palo .ds-lecole-block,
    .ds-palo .ds-lecole-block--reverse {
        flex-direction: column;
        gap: 24px;
    }

    .ds-palo .ds-lecole-img {
        flex: 0 0 auto;
        width: 100%;
        height: 200px;
    }

    .ds-palo-book {
        flex: 0 0 auto;
        width: 100%;
    }

    .ds-palo-book img {
        width: 215px;
    }
}

/* Update (2026-10-31): « Notre bibliothèque » section (section 50), per your
   desktop, tablet and mobile screenshots. It is the "Le Cercle" block (20):
   retro H2 + three blog cards + button, with these differences: a marine
   chapeau line (20px, "Nicolas" and "Arnaud" underlined links) and a centered
   16px paragraph under the title; cards of 320px with a 196px photo showing
   the top of the book cover, a smaller corner radius (10px, measured), tag
   "Bibliotheque", title, authors and a "Découvrir" text link pinned to the
   bottom; a single outline button "En voir plus". Tablet: still three cards in
   a row (48px side margins). Mobile: swipeable row (cards 300px, the next one
   peeks) with three dots (hollow = current, like the quote dots of section 44),
   button full width. */
.ds-biblio {
    max-width: 1024px;
    margin: 0 auto;
    padding: 80px 0 80px;
    text-align: center;
    box-sizing: border-box;
}

.ds-biblio-heading {
    margin: 0 0 16px;
}

.ds-biblio-subtitle {
    margin: 0 0 16px;
    font-family: 'Open Sans', sans-serif;
    font-size: 1.25rem;
    line-height: 1.75rem;
    letter-spacing: -.0275rem;
    color: var(--ds-type-color, var(--ds-marine));
}

.ds-biblio-subtitle a {
    color: inherit;
    text-decoration: underline;
}

.ds-biblio-intro {
    margin: 0 0 24px;
}

.ds-biblio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-bottom: 48px;
}

.ds-biblio .ds-card-blog {
    width: auto;
    height: auto;
    justify-content: flex-start;
    border-radius: 10px;
}

.ds-biblio .ds-card-blog-img {
    height: 196px;
    border-radius: 0;
}

.ds-biblio .ds-card-blog-img img {
    object-position: 50% 0;
}

.ds-biblio .ds-card-blog-content {
    flex: 1 1 auto;
    justify-content: flex-start;
    padding: 48px 24px 0;
    gap: 18px;
}

.ds-biblio .ds-tag {
    min-width: 0;
    min-height: 0;
    margin-bottom: 14px;
    padding: .2857em .7143em;
    border-radius: .2857em;
    background: var(--ds-carmin);
    color: var(--ds-blanc);
}

.ds-biblio .ds-card-blog-title {
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.75rem;
    letter-spacing: -.0275rem;
    color: var(--ds-type-color, var(--ds-marine));
}

.ds-biblio .ds-card-blog-body {
    margin: 0;
}

.ds-biblio .ds-text-link {
    margin-top: 24px;
}

.ds-biblio-dots {
    display: none;
    justify-content: center;
    align-items: center;
    gap: var(--ds-spacing-8);
    margin: -32px 0 32px;
}

.ds-biblio-dots .ds-start-dot {
    box-sizing: border-box;
    border: 1px solid var(--ds-marine);
    background: var(--ds-marine);
    transform: none;
}

.ds-biblio-dots .ds-start-dot.is-active {
    background: transparent;
    transform: none;
}

.ds-biblio-cta {
    display: flex;
    justify-content: center;
}

@media (max-width: 1024.5px) {
    .ds-biblio {
        padding: 56px 48px 72px;
    }
}

@media (max-width: 899.5px) {
    .ds-biblio-grid {
        gap: 20px;
    }

    .ds-biblio .ds-card-blog-content {
        padding-left: 16px;
        padding-right: 16px;
    }
}

@media (max-width: 767.5px) {
    .ds-biblio {
        padding: 40px 24px 56px;
    }

    .ds-biblio-heading {
        font-size: 3.5rem;
        line-height: 1.1;
    }

    .ds-biblio-subtitle a {
        text-decoration: none;
    }

    .ds-biblio-grid {
        display: flex;
        gap: 32px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin: 0 -24px 0 -24px;
        padding: 0 24px 56px;
        scroll-padding-left: 24px;
        text-align: left;
    }

    .ds-biblio-grid::-webkit-scrollbar {
        display: none;
    }

    .ds-biblio .ds-card-blog {
        flex: 0 0 300px;
        width: 300px;
        scroll-snap-align: start;
        text-align: center;
    }

    .ds-biblio-dots {
        display: flex;
        margin: -32px 0 32px;
    }

    .ds-biblio-cta .ds-btn {
        width: 100%;
        min-width: 0;
    }
}

/* Update (2026-10-31): « Conférences » and « Spectacle » band + newsletter
   block (sections 51 and 52), the end of the « La systémie » page, per your
   desktop, tablet and mobile screenshots. The band is an ocre-def card (rounded
   24px, a few px from the screen edges, as on your captures) holding two image/
   text blocks of section 44 (300px photo, the second one reversed), text 16px
   aligned at the top, a bulleted list and the outline button « Contactez-nous ».
   Mobile: photo on top (480px high), text below, buttons at their own width.
   Newsletter: centered two-line title (light carmin, then retro), bold marine
   sentence, and the footer's email field + « S'inscrire » button. */
.ds-confs {
    width: calc(100vw - 20px);
    position: relative;
    left: 50%;
    margin-left: calc(-50vw + 10px);
    box-sizing: border-box;
    background: #F5EFDF;
    border-radius: 24px;
    padding: 48px 0;
}

.ds-confs-inner {
    max-width: 1024px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 60px;
    box-sizing: border-box;
}

.ds-confs .ds-lecole-text {
    justify-content: flex-start;
    gap: 0;
}

.ds-confs .ds-lecole-title {
    margin: 0 0 24px;
}

.ds-confs .ds-lecole-text p {
    margin: 0 0 28px;
}

.ds-confs .ds-lecole-text .ds-confs-themes p {
    margin: 0;
}

.ds-confs-themes {
    margin: 0 0 24px;
}

.ds-confs-list {
    margin: 0;
    padding: 0 0 0 24px;
    list-style: disc;
}

.ds-confs-list li {
    line-height: 1.75rem;
    padding: 0;
}

.ds-confs-cta {
    margin-top: 0;
    white-space: nowrap;
}

.ds-confs .ds-lecole-text > p:last-of-type {
    margin-bottom: 24px;
}

.ds-news {
    max-width: 1024px;
    margin: 0 auto;
    padding: 72px 0 80px;
    text-align: center;
    box-sizing: border-box;
}

.ds-news-title {
    margin: 0;
}

.ds-news-title-line,
.ds-news-title-retro {
    display: block;
}

.ds-news-title-retro {
    margin-top: -.25rem;
}

.ds-news-text {
    max-width: 600px;
    margin: 0 auto 40px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 1.125rem;
    line-height: 1.625rem;
    color: var(--ds-type-color, var(--ds-marine));
}

.ds-news-form {
    justify-content: center;
}

.ds-news-form .ds-footer-form-input {
    border-color: var(--ds-texte-sur-blanc);
}

@media (max-width: 1024.5px) {
    .ds-confs {
        width: calc(100vw - 12px);
        margin-left: calc(-50vw + 6px);
        padding: 48px 40px;
    }

    .ds-news {
        padding: 56px 40px 64px;
    }
}

@media (max-width: 899.5px) {
    .ds-confs .ds-lecole-img {
        flex-basis: 222px;
        width: 222px;
    }

    .ds-confs .ds-lecole-block {
        gap: 40px;
    }
}

@media (max-width: 767.5px) {
    .ds-confs {
        padding: 44px 20px 48px;
    }

    .ds-confs-inner {
        gap: 24px;
    }

    .ds-confs .ds-lecole-block,
    .ds-confs .ds-lecole-block--reverse {
        flex-direction: column;
        gap: 24px;
    }

    .ds-confs .ds-lecole-img {
        flex: 0 0 auto;
        width: 100%;
        height: 480px;
    }

    .ds-confs-cta {
        align-self: flex-start;
        padding-left: 68px;
        padding-right: 68px;
    }

    .ds-news {
        padding: 48px 20px 56px;
    }

    .ds-news-form {
        width: 100%;
    }

    .ds-news-form .ds-footer-form-input {
        width: auto;
        flex: 1 1 auto;
        min-width: 0;
    }

    .ds-news-form .ds-btn {
        min-width: 0;
        padding-left: 28px;
        padding-right: 28px;
    }
}

/* Spectacle photo: the square photo is cropped to the right (as on your
   captures) so "MOVIES", "DRIVE-IN" and "SNACK BAR" stay readable. */
.ds-confs .ds-lecole-block--reverse .ds-lecole-img img {
    object-position: 85% 50%;
}

/* Update (2026-10-31): « Le Cercle » band and wide footer (sections 53 and 54),
   the end of the « La systémie » page, per your desktop, tablet and mobile
   screenshots. « Le Cercle » reuses the cards of « Notre bibliothèque »
   (section 50: 196px photo, 10px corners, tag, title, text, link) on a
   full-width ocre-def band: retro title, a centered sentence (max. 700px on
   desktop), three cards, then two buttons side by side (24px apart). At 1024px
   and below the cards become a swipeable row (320px cards, the next one
   peeks) with three dots under it (hollow = current) and the two buttons are
   stacked full width on mobile. Footer: same component as section 12 but the
   four columns are spread across the 1024px column, the newsletter label sits
   on the same left edge and the field and button are 16px apart. */
.ds-cercle-band {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    box-sizing: border-box;
    background: #F5EFDF;
    padding: 80px 0;
}

.ds-biblio--cercle {
    padding: 0;
}

.ds-biblio--cercle .ds-biblio-intro {
    max-width: 700px;
    margin: 0 auto 40px;
    font-size: 1.125rem;
    line-height: 1.75rem;
    color: var(--ds-type-color, var(--ds-marine));
}

.ds-biblio--cercle .ds-biblio-grid {
    margin-bottom: 68px;
}

.ds-biblio--cercle .ds-biblio-cta {
    flex-wrap: wrap;
    gap: 24px;
}

@media (max-width: 1024.5px) {
    .ds-cercle-band {
        padding: 48px 48px 52px;
    }

    .ds-biblio--cercle {
        padding: 0;
    }

    .ds-biblio--cercle .ds-biblio-intro {
        max-width: 880px;
        margin-bottom: 32px;
    }

    .ds-biblio--cercle .ds-biblio-grid {
        display: flex;
        gap: 32px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin: 0 -48px 48px 0;
        padding: 0 48px 0 0;
        text-align: left;
    }

    .ds-biblio--cercle .ds-biblio-grid::-webkit-scrollbar {
        display: none;
    }

    .ds-biblio--cercle .ds-card-blog {
        flex: 0 0 320px;
        width: 320px;
        scroll-snap-align: start;
        text-align: center;
    }

    .ds-biblio--cercle .ds-biblio-dots {
        display: flex;
        margin: 0 0 40px;
    }

    .ds-biblio--cercle .ds-card-blog-content {
        padding-left: 24px;
        padding-right: 24px;
    }
}

@media (max-width: 767.5px) {
    .ds-cercle-band {
        padding: 40px 20px 56px;
    }

    .ds-biblio--cercle .ds-biblio-intro {
        font-size: 1rem;
        line-height: 1.625rem;
        margin-bottom: 24px;
    }

    .ds-biblio--cercle .ds-biblio-grid {
        gap: 16px;
        margin: 0 -20px 40px 0;
        padding: 0 20px 0 0;
    }

    .ds-biblio--cercle .ds-biblio-dots {
        margin-bottom: 32px;
    }

    .ds-biblio--cercle .ds-biblio-cta {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
    }

    .ds-biblio--cercle .ds-biblio-cta .ds-btn {
        width: 100%;
        min-width: 0;
    }
}

/* Wide footer variant (section 54) */
.ds-footer-demo--spread .ds-footer-inner {
    align-self: stretch;
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
    padding: 0 26px;
    box-sizing: border-box;
}

.ds-footer-demo--spread .ds-footer-columns {
    width: 100%;
    justify-content: space-between;
}

.ds-footer-demo--spread .ds-footer-newsletter {
    gap: 16px;
}

.ds-footer-demo--spread .ds-footer-form {
    gap: 16px;
}

@media (max-width: 1024.5px) {
    .ds-footer-demo--spread .ds-footer-inner {
        padding: 0 40px;
    }
}

@media (max-width: 767.5px) {
    .ds-footer-demo--spread .ds-footer-inner {
        padding: 0 20px;
    }

    .ds-footer-demo--spread .ds-footer-columns {
        display: grid;
        justify-content: stretch;
    }
}

/* Newsletter block (section 52) on mobile: field and button stacked at full
   width, per your mobile screenshot. */
@media (max-width: 767.5px) {
    .ds-news-form {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .ds-news-form .ds-footer-form-input {
        width: 100%;
        flex: 0 0 auto;
    }

    .ds-news-form .ds-btn {
        width: 100%;
    }
}

/* Footer newsletter button on mobile: the "OK" button must not keep the
   203px minimum width of the plain button, or it pushes the form out of the
   screen (measured with the site's own Bootstrap and styles.css loaded). */
@media (max-width: 767.5px) {
    .ds-footer-form .ds-btn {
        flex: 0 0 auto;
        min-width: 0;
        padding-left: 48px;
        padding-right: 48px;
    }
    /* The newsletter row has to fill the footer width and the email field has
       to be allowed to shrink (the row was sized by its content and pushed
       "OK" 21px past the right edge of the 375px screen). */
    .ds-footer-form .ds-footer-form-input {
        flex: 1 1 0;
        min-width: 0;
    }

    .ds-footer-newsletter {
        width: 100%;
        min-width: 0;
    }
}

/* Update (2026-10-31): "Financement" page (section 55) - built from your
   desktop / tablet / mobile screenshots (no Figma spec). Intro paragraph
   left-aligned in marine, then the centered two-line title (light carmin
   line + Retromark script line) and three cream cards (the supervision
   small-card look: ocre clair fill, no visible border, marine bold title,
   carmin text link pinned to the bottom) each topped by a small circular
   photo. Desktop: cards stay 303px wide with a 32px gap, left-aligned in the
   1024px column. Tablet: three fluid columns (24px gap). Mobile: swipeable
   row (283px cards, the next one peeks) with three dots, like the other
   carousels. */
.ds-fin {
    max-width: 1024px;
    margin: 0 auto;
    padding: 80px 0 80px;
    box-sizing: border-box;
}

.ds-fin-intro {
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    font-size: 1.125rem;
    line-height: 1.75rem;
    letter-spacing: -.0275rem;
    color: var(--ds-marine);
    text-align: left;
}

.ds-fin-title {
    margin: 80px 0 56px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ds-fin-title-line,
.ds-fin-title-retro {
    display: block;
    margin: 0;
}

.ds-fin-title-retro {
    color: var(--ds-carmin);
}

.ds-fin-grid {
    display: flex;
    gap: 32px;
    align-items: stretch;
}

.ds-fin-card {
    flex: 0 0 303px;
    height: auto;
    min-height: 259px;
    gap: 16px;
    border-color: transparent;
    background: var(--ds-ocre-clair);
    cursor: default;
}

.ds-fin-card-photo {
    display: block;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: var(--ds-radius-full);
    overflow: hidden;
}

.ds-fin-card-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ds-fin-card .ds-card-small-title {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.75rem;
    letter-spacing: -.0275rem;
}

.ds-fin-card .ds-text-link {
    align-self: flex-start;
    margin-top: auto;
}

.ds-fin-dots {
    display: none;
    justify-content: center;
    align-items: center;
    gap: var(--ds-spacing-8);
    margin-top: 32px;
}

.ds-fin-dots .ds-start-dot {
    box-sizing: border-box;
    border: 1px solid var(--ds-marine);
    background: var(--ds-marine);
    transform: none;
}

.ds-fin-dots .ds-start-dot.is-active {
    background: transparent;
    transform: none;
}

@media (max-width: 1024.5px) {
    .ds-fin {
        padding: 56px 40px 72px;
    }

    .ds-fin-title {
        margin: 64px 0 48px;
    }

    .ds-fin-grid {
        gap: 24px;
    }

    .ds-fin-card {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        padding: 24px;
    }
}

@media (max-width: 767.5px) {
    .ds-fin {
        padding: 40px 20px 56px;
    }

    .ds-fin-intro {
        font-size: 1rem;
        line-height: 1.75rem;
    }

    .ds-fin-title {
        margin: 48px 0 32px;
    }

    .ds-fin-grid {
        gap: 20px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin: 0 -20px;
        padding: 0 20px;
        scroll-padding-left: 20px;
    }

    .ds-fin-grid::-webkit-scrollbar {
        display: none;
    }

    .ds-fin-card {
        flex: 0 0 283px;
        width: 283px;
        padding: 30px;
        scroll-snap-align: start;
    }

    .ds-fin-dots {
        display: flex;
    }
}

/* Update (2026-10-31): "Vous êtes indépendant" band of the Financement page
   (section 56), from your desktop / tablet / mobile screenshots. Full-bleed
   beige band (ocre def), centered two-line title (light carmin line + Retromark
   script; left-aligned on mobile), then two equal columns in the 1024px
   column: the "Micro-entrepreneur…" text on the left and a white card with a
   search icon on the right ("Comment obtenir l'attestation…"), and a white
   full-width card below ("Fonds d'assurance formation…"). Tablet keeps the
   two columns; mobile stacks everything (text, then the two cards, 24px
   apart). Links keep the body colour (your screenshots show none). */
.ds-indep {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    box-sizing: border-box;
    background: var(--ds-ocre-def);
    padding: 80px 0;
    scroll-margin-top: 80px;
}

.ds-indep-inner {
    max-width: 1024px;
    margin: 0 auto;
    box-sizing: border-box;
}

.ds-indep-title {
    margin: 0 0 48px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ds-indep-title-line,
.ds-indep-title-retro {
    display: block;
    margin: 0;
}

.ds-indep-title-retro {
    color: var(--ds-carmin);
}

.ds-indep-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
}

.ds-indep-heading {
    margin: 0 0 16px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.5rem;
    letter-spacing: -.0275rem;
    color: var(--ds-marine);
}

.ds-indep-heading:not(:first-child) {
    margin-top: 32px;
}

.ds-indep-text p {
    margin: 0 0 16px;
    font-family: 'Open Sans', sans-serif;
    font-size: .875rem;
    line-height: 1.6875rem;
    color: var(--ds-texte-fonce);
}

.ds-indep-text p:last-child {
    margin-bottom: 0;
}

.ds-indep-text a {
    color: inherit;
    text-decoration: none;
}

.ds-indep-card {
    box-sizing: border-box;
    background: var(--ds-blanc);
    border-radius: 20px;
    padding: 26px;
    text-align: left;
}

.ds-indep-card-icon {
    display: block;
    width: 18px;
    height: 18px;
    margin-bottom: 12px;
    color: var(--ds-marine);
}

.ds-indep-card .ds-indep-heading {
    margin-top: 0;
    margin-bottom: 16px;
}

.ds-indep-card-sub {
    font-weight: 700 !important;
    color: var(--ds-texte-fonce);
}

.ds-indep-card p {
    margin: 0 0 16px;
    font-family: 'Open Sans', sans-serif;
    font-size: .875rem;
    line-height: 1.6875rem;
    color: var(--ds-texte-fonce);
}

.ds-indep-card p:last-child {
    margin-bottom: 0;
}

.ds-indep-card a {
    color: inherit;
    text-decoration: none;
}

.ds-indep-card--wide {
    margin-top: 48px;
}

@media (max-width: 1024.5px) {
    .ds-indep {
        padding: 64px 0;
    }

    .ds-indep-inner {
        padding: 0 40px;
    }

    .ds-indep-grid {
        gap: 48px;
    }

    .ds-indep-card--wide {
        margin-top: 40px;
    }
}

@media (max-width: 767.5px) {
    .ds-indep {
        padding: 48px 0 40px;
    }

    .ds-indep-inner {
        padding: 0 20px;
    }

    .ds-indep-title {
        align-items: flex-start;
        text-align: left;
        margin-bottom: 24px;
    }

    .ds-indep-grid {
        grid-template-columns: 1fr;
        gap: 64px;
    }

    .ds-indep-card {
        padding: 24px 22px;
    }

    .ds-indep-card--wide {
        margin-top: 24px;
    }
}

/* Update (2026-10-31): "Vous êtes salarié" block of the Financement page
   (section 57), from your tablet and mobile screenshots (no desktop capture:
   same layout as the tablet, in the 1024px column). Same structure as the
   "indépendant" block above but on the white page background, with the card
   on the beige (ocre def) instead of white: title, two columns (text +
   "Qu'est-ce qu'un OPCO ?" card with a search icon), then three full-width
   paragraphs under both. Mobile: stacked, card 32px above the closing text. */
.ds-indep--sal {
    background: var(--ds-blanc);
}

.ds-indep--sal .ds-indep-card {
    background: var(--ds-ocre-def);
}

.ds-indep-extra {
    margin-top: 48px;
    text-align: left;
}

.ds-indep-extra p {
    margin: 0 0 16px;
    font-family: 'Open Sans', sans-serif;
    font-size: .875rem;
    line-height: 1.6875rem;
    color: var(--ds-texte-fonce);
}

.ds-indep-extra p:last-child {
    margin-bottom: 0;
}

.ds-indep-extra a {
    color: inherit;
    text-decoration: none;
}

@media (max-width: 1024.5px) {
    .ds-indep--sal .ds-indep-grid {
        gap: 48px;
    }

    .ds-indep-extra {
        margin-top: 40px;
    }
}

@media (max-width: 767.5px) {
    .ds-indep--sal .ds-indep-grid {
        gap: 56px;
    }

    .ds-indep-extra {
        margin-top: 32px;
    }
}

/* Update (2026-10-31): "Vous êtes demandeur d'emploi" band of the Financement
   page (section 58), from your desktop / tablet / mobile screenshots. Same
   beige band and title as the "indépendant" band (section 56). Content: the
   "Vous pouvez bénéficier d'un financement par l'AIF - POLE EMPLOI" heading
   and one paragraph on the left, and on the right a white 322px card holding
   the Pôle Emploi logo (images/logo-pole-emploi-fsl.png, 84px high). Tablet
   keeps both side by side; mobile stacks them, title left-aligned on two
   lines, the logo card full width below the text. */
.ds-indep--emploi .ds-indep-title {
    margin-bottom: 48px;
}

.ds-indep-split {
    display: grid;
    grid-template-columns: 1fr 322px;
    gap: 64px;
    align-items: center;
}

.ds-indep-split .ds-indep-heading {
    margin-top: 0;
}

.ds-indep-split .ds-indep-text a {
    color: inherit;
    text-decoration: none;
}

.ds-indep-logo-card {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 322px;
    height: 106px;
    padding: 11px;
    background: var(--ds-blanc);
    border-radius: 20px;
}

.ds-indep-logo-card img {
    display: block;
    height: 84px;
    width: auto;
}

@media (max-width: 1024.5px) {
    .ds-indep--emploi {
        padding: 56px 0 48px;
    }

    .ds-indep-split {
        gap: 40px;
    }
}

@media (max-width: 767.5px) {
    .ds-indep--emploi {
        padding: 48px 0;
    }

    .ds-indep--emploi .ds-indep-title {
        margin-bottom: 24px;
    }

    .ds-indep-split {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .ds-indep-logo-card {
        width: 100%;
    }
}

/* Update (2026-10-31): "Comment constituer son dossier" block of the
   Financement page (section 59), from your desktop / tablet / mobile
   screenshots. Same family as the "salarié" block (white page background,
   beige card): centered title ("Comment constituer mon" + Retromark "dossier",
   still centered on mobile where it wraps on three lines), left column of three
   paragraphs and the bold "Déclaration d'activité formation" lines, right
   beige card "Le dossier de prise en charge" (search icon, text, three
   bullets) that stretches to the height of the text and keeps its content
   vertically centered. Mobile: stacked, card below the text. */
.ds-indep--dossier .ds-indep-grid {
    align-items: stretch;
}

.ds-indep--dossier .ds-indep-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 32px 24px;
}

.ds-indep-declaration {
    font-weight: 700 !important;
    color: var(--ds-texte-fonce);
}

.ds-indep-list {
    margin: 0;
    padding: 0 0 0 20px;
    list-style: disc;
    font-family: 'Open Sans', sans-serif;
    font-size: .875rem;
    line-height: 1.6875rem;
    color: var(--ds-texte-fonce);
}

.ds-indep-list li {
    padding-left: 4px;
}

@media (max-width: 1024.5px) {
    .ds-indep--dossier .ds-indep-grid {
        gap: 48px;
    }
}

@media (max-width: 767.5px) {
    .ds-indep--dossier .ds-indep-title {
        align-items: center;
        text-align: center;
    }

    .ds-indep--dossier .ds-indep-grid {
        gap: 64px;
    }
}

/* Update (2026-10-31): "Certification Qualiopi" block of the Financement page
   (section 60), from your desktop / tablet / mobile screenshots - it differs
   from the Qualiopi band of section 21 (green panel, round badge, one-line
   title): white background, centered two-line title ("Certification" light
   carmin + "Qualiopi" Retromark), then a centered row with the bare logo
   (152px visible, the PNG has transparent margins: 192px box, images/qualiopi-finacement-logo.png) on the left and the
   text on the right (marine lead sentence, body text, small italic line).
   Desktop: 120px between logo and text, text column 420px; tablet: 72px and
   a 530px column. Mobile: stacked and centered, the logo sits last on a white
   round badge with a faint shadow. */
.ds-qualfin {
    box-sizing: border-box;
    max-width: 1024px;
    margin: 0 auto;
    padding: 80px 0;
}

.ds-qualfin-title {
    margin: 0 0 40px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ds-qualfin-title-line,
.ds-qualfin-title-retro {
    display: block;
    margin: 0;
}

.ds-qualfin-title-retro {
    color: var(--ds-carmin);
}

.ds-qualfin-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 120px;
}

.ds-qualfin-logo {
    flex: 0 0 auto;
    overflow: hidden;
}

.ds-qualfin-logo img {
    display: block;
    width: 192px;
    height: auto;
}

.ds-qualfin-text {
    flex: 0 1 420px;
    text-align: left;
}

.ds-qualfin-lead {
    margin: 0 0 16px;
    font-family: 'Open Sans', sans-serif;
    font-size: 1.125rem;
    line-height: 1.6875rem;
    color: var(--ds-marine);
}

.ds-qualfin-body {
    margin: 0 0 12px;
    font-family: 'Open Sans', sans-serif;
    font-size: .875rem;
    line-height: 1.75rem;
    color: var(--ds-texte-fonce);
}

.ds-qualfin-small {
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    font-style: italic;
    font-size: .75rem;
    line-height: 1.25rem;
    color: var(--ds-texte-fonce);
}

@media (max-width: 1024.5px) {
    .ds-qualfin {
        padding: 64px 40px;
    }

    .ds-qualfin-row {
        gap: 72px;
    }

    .ds-qualfin-text {
        flex: 0 1 530px;
    }
}

@media (max-width: 767.5px) {
    .ds-qualfin {
        padding: 48px 24px 40px;
    }

    .ds-qualfin-title {
        margin-bottom: 24px;
    }

    .ds-qualfin-row {
        flex-direction: column;
        gap: 32px;
    }

    .ds-qualfin-text {
        flex: 0 1 auto;
        text-align: center;
    }

    .ds-qualfin-logo {
        order: 2;
        width: 178px;
        height: 178px;
        border-radius: var(--ds-radius-full);
        background: var(--ds-blanc);
        box-shadow: 0 1px 6px rgba(16, 24, 40, .18);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .ds-qualfin-logo img {
        width: 178px;
    }
}

/* Update (2026-10-31): "Le cercle" main blog page (section 62), from your
   desktop / tablet / mobile screenshots. White page, no band. Under the hero
   and the four chips: a left-aligned marine intro sentence (18px), a featured
   event card (photo 400px on the left, "ÉVÈNEMENT" outline tag, 36px light
   title, text, bold line and a "Je m'inscris" button; photo on top on mobile),
   then the three article cards of section 50 (same component: 196px photo,
   10px corners, red tag, title, text, link) in three columns - and stacked
   full width on mobile instead of the swipeable row used on La systémie -
   then the two buttons "S'inscrire à la newsletter" (with a light shadow) and
   "Voir plus", side by side, stacked on mobile. */
.ds-cp {
    max-width: 1024px;
    margin: 0 auto;
    padding: 80px 0;
    text-align: left;
    box-sizing: border-box;
}

.ds-cp .ds-biblio-intro {
    max-width: none;
    margin: 0 0 72px;
    font-family: 'Open Sans', sans-serif;
    font-size: 1.125rem;
    line-height: 1.75rem;
    letter-spacing: -.0275rem;
    color: var(--ds-marine);
    text-align: left;
}

.ds-cp-feature {
    display: grid;
    grid-template-columns: 400px 1fr;
    margin-bottom: 80px;
    border: 1px solid var(--ds-ocre-3);
    border-radius: 12px;
    background: var(--ds-blanc);
    overflow: hidden;
}

.ds-cp-feature-img {
    min-height: 100%;
}

.ds-cp-feature-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ds-cp-feature-body {
    box-sizing: border-box;
    padding: 36px 40px 36px 60px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.ds-cp-feature-tag {
    display: inline-flex;
    align-items: center;
    margin: 0 0 20px;
    padding: 3px 10px;
    border: 1px solid var(--ds-carmin);
    border-radius: 4px;
    background: var(--ds-blanc);
    color: var(--ds-carmin);
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: .6875rem;
    line-height: 1.25rem;
    letter-spacing: 0;
    text-transform: uppercase;
}

.ds-cp-feature-title {
    margin: 0 0 20px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-size: 2.25rem;
    line-height: 2.75rem;
    color: var(--ds-marine);
}

.ds-cp-feature-text {
    margin: 0 0 16px;
    font-family: 'Open Sans', sans-serif;
    font-size: .875rem;
    line-height: 1.75rem;
    color: var(--ds-texte-fonce);
}

.ds-cp-feature-text strong {
    font-weight: 700;
}

.ds-cp-feature-body .ds-btn {
    margin-top: 12px;
}

.ds-cp .ds-biblio-grid {
    margin-bottom: 48px;
}

.ds-cp .ds-biblio-cta {
    gap: 24px;
}

.ds-cp .ds-biblio-cta .ds-btn-fill {
    box-shadow: 0 3px 8px rgba(16, 24, 40, .22);
}

@media (max-width: 1024.5px) {
    .ds-cp {
        padding: 48px 40px 64px;
    }

    .ds-cp .ds-biblio-intro {
        margin-bottom: 32px;
    }

    .ds-cp-feature {
        grid-template-columns: 392px 1fr;
        margin-bottom: 24px;
    }

    .ds-cp-feature-body {
        padding: 28px 32px 28px 32px;
    }

    .ds-cp .ds-biblio-grid {
        gap: 24px;
        margin-bottom: 32px;
    }
}

@media (max-width: 899.5px) {
    .ds-cp-feature {
        grid-template-columns: 320px 1fr;
    }
}

@media (max-width: 767.5px) {
    .ds-cp {
        padding: 32px 24px 48px;
    }

    .ds-cp .ds-biblio-intro {
        margin-bottom: 24px;
        font-size: 1rem;
    }

    .ds-cp-feature {
        grid-template-columns: 1fr;
        margin-bottom: 24px;
    }

    .ds-cp-feature-img {
        height: 177px;
        min-height: 0;
    }

    .ds-cp-feature-body {
        padding: 22px 22px 26px;
        align-items: stretch;
    }

    .ds-cp-feature-tag {
        align-self: flex-start;
    }

    .ds-cp-feature-title {
        font-size: 1.625rem;
        line-height: 2.25rem;
    }

    .ds-cp-feature-body .ds-btn {
        width: 100%;
        min-width: 0;
    }

    .ds-cp .ds-biblio-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 28px;
        overflow: visible;
        margin: 0 0 40px;
        padding: 0;
        text-align: center;
    }

    .ds-cp .ds-card-blog {
        flex: none;
        width: auto;
    }

    .ds-cp .ds-card-blog .ds-card-blog-img {
        height: 126px;
    }

    .ds-cp .ds-biblio-cta {
        flex-direction: column;
        gap: 12px;
    }

    .ds-cp .ds-biblio-cta .ds-btn {
        width: 100%;
        min-width: 0;
        padding-left: 16px;
        padding-right: 16px;
        white-space: nowrap;
    }
}

/* Update (2026-10-31): blog article detail page (section 63), from your
   desktop / tablet / mobile screenshots, nested at pages/blog-preview/detail.
   Hero: full-width cream band (#FDF8EB, same as the page heroes), photo with
   16px corners on the left (262px wide, as tall as the text block), red
   "ARTICLE" tag, the title in light carmin (56px, 48px on tablet, 28px on
   mobile) and the underlined "Retour sur le cercle" link; on mobile the photo
   sits above the text. Body: 1024px column, section titles in light marine
   (34px), 14px / 29px text with a blank line between paragraphs, numbered
   list, footnote calls as small superscripts. End: ocre-def band with
   "Abstract", "Mots Clé" and the author card (round portrait, 36px light name,
   shortened bio, "Lire plus"), then the "Notes". */
.ds-art-hero {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    box-sizing: border-box;
    background: #FDF8EB;
    padding: 40px 20px 96px;
}

.ds-art-hero-inner {
    max-width: 1080px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 262px 1fr;
    gap: 42px;
    align-items: stretch;
}

.ds-art-hero-img {
    border-radius: 16px;
    overflow: hidden;
    min-height: 212px;
}

.ds-art-hero-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ds-art-hero-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.ds-art-hero-text .ds-tag {
    min-width: 0;
    min-height: 0;
    margin-bottom: 14px;
    padding: .2857em .7143em;
    border-radius: .2857em;
    background: var(--ds-carmin);
    color: var(--ds-blanc);
}

.ds-art-hero-title {
    margin: 0 0 14px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-size: 3.5rem;
    line-height: 4rem;
    letter-spacing: -.02em;
    color: var(--ds-carmin);
}

.ds-art-hero-back {
    font-size: .75rem;
}

.ds-art {
    max-width: 1024px;
    margin: 0 auto;
    padding: 56px 0 80px;
    box-sizing: border-box;
}

.ds-art h2 {
    margin: 64px 0 24px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-size: 2.125rem;
    line-height: 3.375rem;
    letter-spacing: -.01em;
    color: var(--ds-marine);
}

.ds-art h2:first-child {
    margin-top: 0;
}

.ds-art p,
.ds-art li {
    font-family: 'Open Sans', sans-serif;
    font-size: .875rem;
    line-height: 1.8125rem;
    color: var(--ds-texte-fonce);
}

.ds-art p {
    margin: 0 0 29px;
}

.ds-art ol {
    margin: 0 0 29px;
    padding-left: 22px;
}

.ds-art sup {
    font-size: .55em;
    line-height: 0;
}

.ds-art sup a,
.ds-art-fn {
    color: inherit;
    text-decoration: none;
}

.ds-art-end {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    box-sizing: border-box;
    background: var(--ds-ocre-def);
    padding: 80px 20px;
}

.ds-art-end-inner {
    max-width: 1024px;
    margin: 0 auto;
}

.ds-art-end h2 {
    margin: 0 0 14px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-size: 2.125rem;
    line-height: 2.75rem;
    color: var(--ds-marine);
}

.ds-art-end p {
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    font-size: .875rem;
    line-height: 1.75rem;
    color: var(--ds-texte-fonce);
}

.ds-art-end h3 {
    margin: 24px 0 6px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.5rem;
    letter-spacing: -.0275rem;
    color: var(--ds-marine);
}

.ds-art-author {
    box-sizing: border-box;
    width: 492px;
    max-width: 100%;
    margin-top: 28px;
    padding: 24px 28px 22px;
    background: var(--ds-blanc);
    border: 1px solid var(--ds-ocre-3);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
}

.ds-art-author .ds-team-avatar {
    flex: 0 0 100px;
    width: 100px;
    height: 100px;
}

.ds-art-author .ds-team-head {
    gap: 20px;
}

.ds-art-author .ds-team-name {
    font-weight: 300;
    font-size: 2.25rem;
    line-height: 2.75rem;
}

.ds-art-author .ds-team-text {
    margin: 0;
    font-size: .8125rem;
    line-height: 1.5rem;
}

.ds-art-notes {
    max-width: 1024px;
    margin: 0 auto;
    padding: 40px 0 64px;
    box-sizing: border-box;
    border-top: 1px solid var(--ds-ocre-3);
}

.ds-art-notes h2 {
    margin: 0 0 16px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.5rem;
    color: var(--ds-marine);
}

.ds-art-notes p {
    margin: 0 0 10px;
    font-family: 'Open Sans', sans-serif;
    font-size: .75rem;
    line-height: 1.25rem;
    color: var(--ds-texte-fonce);
}

.ds-art-notes p {
    overflow-wrap: anywhere;
}

.ds-art-notes p a {
    color: inherit;
}

.ds-art-notes p a:first-child {
    color: var(--ds-carmin);
    font-weight: 700;
    margin-right: 6px;
    text-decoration: none;
}

@media (max-width: 1024.5px) {
    .ds-art-hero {
        padding: 40px 40px 72px;
    }

    .ds-art-hero-title {
        font-size: 3rem;
        line-height: 3.5rem;
    }

    .ds-art {
        padding: 40px 40px 64px;
    }

    .ds-art-end {
        padding: 64px 40px;
    }

    .ds-art-notes {
        padding: 32px 40px 56px;
        margin: 0;
        max-width: none;
        border-top: 0;
    }

    .ds-art-notes > * {
        max-width: 944px;
    }
}

@media (max-width: 767.5px) {
    .ds-art-hero {
        padding: 24px 24px 40px;
    }

    .ds-art-hero-inner {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .ds-art-hero-img {
        height: 200px;
        min-height: 0;
    }

    .ds-art-hero-title {
        font-size: 1.75rem;
        line-height: 2.25rem;
        letter-spacing: 0;
    }

    .ds-art {
        padding: 32px 24px 48px;
    }

    .ds-art h2 {
        font-size: 2.25rem;
        line-height: 2.75rem;
        margin: 40px 0 16px;
    }

    .ds-art h2:first-child {
        margin-top: 0;
    }

    .ds-art p {
        margin-bottom: 24px;
    }

    .ds-art-end {
        padding: 48px 24px;
    }

    .ds-art-end h2 {
        font-size: 2rem;
    }

    .ds-art-author {
        width: auto;
        padding: 20px 20px 18px;
    }

    .ds-art-author .ds-team-avatar {
        flex-basis: 88px;
        width: 88px;
        height: 88px;
    }

    .ds-art-author .ds-team-name {
        font-size: 2.25rem;
    }

    .ds-art-notes {
        padding: 28px 24px 48px;
    }
}

/* ============================================================
   64 - Le cercle : détail d'un livre (Bibliothèque) et d'un évènement
   (/blog-preview/bibliotheque, /blog-preview/evenements)
   Same hero / text column as the article page (section 63). Differences:
   the hero image is a cover or a poster, so it is shown whole (no crop, no
   rounded corners) and centred in its 262px column; the text column is short,
   so it gets a minimum height; paragraph links are underlined; the event page
   ends with a centred filled button.
   ============================================================ */
.ds-art-hero--cover .ds-art-hero-inner {
    align-items: center;
}

.ds-art-hero--cover .ds-art-hero-img {
    border-radius: 0;
    overflow: visible;
    min-height: 0;
    display: flex;
    justify-content: center;
}

.ds-art-hero--cover .ds-art-hero-img img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 340px;
    object-fit: contain;
}

.ds-art--short {
    padding-bottom: 96px;
}

.ds-art p strong {
    font-weight: 700;
}

.ds-art p a:not(.ds-art-fn) {
    color: inherit;
    text-decoration: underline;
}

.ds-art-cta {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.ds-art-cta .ds-btn-fill {
    box-shadow: 0 3px 8px rgba(16, 24, 40, .22);
}

@media (max-width: 1024.5px) {
    .ds-art--short {
        padding-bottom: 72px;
    }
}

@media (max-width: 767.5px) {
    .ds-art-hero--cover .ds-art-hero-img {
        height: auto;
    }

    .ds-art-hero--cover .ds-art-hero-img img {
        max-height: 280px;
    }

    .ds-art--short {
        padding-bottom: 48px;
    }

    .ds-art-cta {
        margin-top: 32px;
    }

    .ds-art-cta .ds-btn {
        width: 100%;
        box-sizing: border-box;
    }
}

/* ============================================================
   65 - Contact page (/contact-preview)
   Cream band (same cream as the article hero) with, on the left, the
   "Contact" title in light carmin, the office manager (round duotone portrait
   + bold marine lead + phone / mail), two paragraphs and the LinkedIn link;
   on the right the form in a bordered card (594px wide): bold labels, white
   fields with a beige 2px border, small legal text, the opt-out box, the
   reCAPTCHA, then a full-width marine "Envoyer" button. Under 1024.5px the
   form column narrows (420px, then 360px under 899.5px); under 767.5px
   everything stacks: portrait above its text, then the paragraphs, then the
   form. Below it the "Notre équipe" grid reuses the section 37 cards (retro
   heading only, white band). Sending feedback: a spinner overlay while the
   form posts, and a small dialog (marine header = success, carmin = error)
   when sendContact.php redirects back with ?contact=1 / ?contact=0.
   ============================================================ */
.ds-contact {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    box-sizing: border-box;
    background: #FDF8EB;
    padding: 56px 20px 72px;
}

.ds-contact-inner {
    max-width: 1056px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 594px;
    gap: 64px;
    align-items: start;
}

.ds-contact-title {
    margin: 0 0 24px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-size: 3.5rem;
    line-height: 4rem;
    letter-spacing: -.02em;
    color: var(--ds-carmin);
}

.ds-contact-audrey {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 28px;
}

.ds-contact-audrey .ds-team-avatar {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
}

.ds-contact-audrey-text p {
    margin: 0;
}

.ds-contact-lead {
    margin-bottom: 8px !important;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: .875rem;
    line-height: 1.5rem;
    color: var(--ds-marine);
}

.ds-contact-line {
    font-family: 'Open Sans', sans-serif;
    font-size: .8125rem;
    line-height: 1.5rem;
    color: var(--ds-texte-fonce);
}

.ds-contact-text {
    margin: 0 0 24px;
    font-family: 'Open Sans', sans-serif;
    font-size: .875rem;
    line-height: 1.5rem;
    color: var(--ds-texte-fonce);
}

.ds-contact-text strong {
    font-weight: 700;
}

.ds-contact-linkedin {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Open Sans', sans-serif;
    font-size: .8125rem;
    color: var(--ds-texte-fonce);
    text-decoration: none;
}

.ds-contact-linkedin img {
    display: block;
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.ds-contact-form {
    box-sizing: border-box;
    padding: 24px;
    background: var(--ds-blanc);
    border: 1.5px solid var(--ds-ocre-3);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ds-contact-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ds-contact-field label {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: .8125rem;
    line-height: 1.25rem;
    color: var(--ds-texte-fonce);
}

.ds-contact-input {
    box-sizing: border-box;
    width: 100%;
    height: 44px;
    padding: 0 14px;
    background: var(--ds-blanc);
    border: 2px solid var(--ds-ocre-3);
    border-radius: 8px;
    font-family: 'Open Sans', sans-serif;
    font-size: .8125rem;
    color: var(--ds-texte-fonce);
}

.ds-contact-input::placeholder {
    color: var(--ds-texte-fonce);
    opacity: .75;
}

.ds-contact-input:focus {
    outline: 0;
    border-color: var(--ds-marine);
}

.ds-contact-textarea {
    height: auto;
    min-height: 84px;
    padding: 12px 14px;
    resize: vertical;
}

.ds-contact-legal {
    margin: 8px 0 0;
    font-family: 'Open Sans', sans-serif;
    font-size: .75rem;
    line-height: 1.25rem;
    color: var(--ds-texte-fonce);
}

.ds-contact-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: 'Open Sans', sans-serif;
    font-size: .75rem;
    line-height: 1.25rem;
    color: var(--ds-texte-fonce);
    cursor: pointer;
}

.ds-contact-check input {
    flex: 0 0 16px;
    box-sizing: border-box;
    width: 16px;
    height: 16px;
    margin: 2px 0 0;
    background: var(--ds-blanc) center / 12px no-repeat;
    border: 1.5px solid var(--ds-marine);
    border-radius: 3px;
    cursor: pointer;
}

.ds-contact-check input:checked {
    background-color: var(--ds-marine);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 6.4l2.3 2.3 4.7-5' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.ds-contact-check input:focus-visible {
    outline: 2px solid var(--ds-marine) !important;
    outline-offset: 2px;
}

.ds-contact-captcha-error {
    display: none;
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    font-size: .75rem;
    font-weight: 600;
    color: var(--ds-carmin);
}

.ds-contact-captcha {
    width: 100%;
    overflow: hidden;
}

.ds-contact-captcha > div {
    width: 304px;
    transform-origin: 0 0;
}

.ds-contact-submit {
    box-sizing: border-box;
    width: 100%;
    height: 42px;
    border: 0;
    border-radius: 6px;
    background: var(--ds-marine);
    color: var(--ds-blanc);
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: .8125rem;
    cursor: pointer;
}

.ds-contact-submit:hover {
    filter: brightness(1.15);
}

.ds-contact-submit:focus-visible {
    outline: 2px solid var(--ds-carmin) !important;
    outline-offset: 2px;
}

/* Team grid: last card stays in the first column (as on the screenshots) */
.ds-team-demo--contact {
    padding: 56px 20px 72px;
}

.ds-team-demo--contact .ds-team-inner {
    max-width: 1056px;
}

.ds-team-avatar--empty {
    background: linear-gradient(135deg, #F7A26E 0%, #FBE3D3 50%, #E9FAFA 100%);
}

.ds-team-avatar--empty::after {
    display: none;
}

/* Feedback: loader + message */
.ds-contact-loader {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .7);
}

.ds-contact-loader[hidden] {
    display: none;
}

.ds-contact-spinner {
    width: 48px;
    height: 48px;
    border: 5px solid var(--ds-ocre-3);
    border-top-color: var(--ds-carmin);
    border-radius: 50%;
    animation: ds-contact-spin .9s linear infinite;
}

@keyframes ds-contact-spin {
    to { transform: rotate(360deg); }
}

.ds-contact-modal {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(16, 24, 40, .45);
}

.ds-contact-modal-box {
    box-sizing: border-box;
    width: 100%;
    max-width: 500px;
    background: var(--ds-blanc);
    box-shadow: 0 12px 32px rgba(16, 24, 40, .25);
    font-family: 'Open Sans', sans-serif;
    color: var(--ds-marine);
}

.ds-contact-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 20px;
    color: #EEE;
}

.ds-contact-modal-box--ok .ds-contact-modal-head {
    background: #2A6078;
}

.ds-contact-modal-box--ko .ds-contact-modal-head {
    background: #BF141C;
}

.ds-contact-modal-head h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5rem;
    color: #fff;
}

.ds-contact-modal-close {
    border: 0;
    background: none;
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.ds-contact-modal-body {
    padding: 20px;
    font-size: .875rem;
    line-height: 1.5rem;
}

.ds-contact-modal-body p {
    margin: 0 0 12px;
}

.ds-contact-modal-body p:last-child {
    margin-bottom: 0;
}

@media (max-width: 1024.5px) {
    .ds-contact {
        padding: 48px 40px 56px;
    }

    .ds-contact-inner {
        grid-template-columns: minmax(0, 1fr) 420px;
        gap: 32px;
    }

    .ds-contact-title {
        font-size: 3rem;
        line-height: 3.5rem;
    }

    .ds-team-demo--contact {
        padding: 48px 40px 56px;
    }
}

@media (max-width: 899.5px) {
    .ds-contact-inner {
        grid-template-columns: minmax(0, 1fr) 360px;
    }
}

@media (max-width: 767.5px) {
    .ds-contact {
        padding: 24px 20px 40px;
    }

    .ds-contact-inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .ds-contact-title {
        margin-bottom: 16px;
        font-size: 2.75rem;
        line-height: 3.25rem;
        letter-spacing: 0;
    }

    .ds-contact-audrey {
        flex-direction: column;
        gap: 14px;
    }

    .ds-contact-audrey .ds-team-avatar {
        flex-basis: auto;
        width: 80px;
        height: 80px;
    }

    .ds-contact-form {
        padding: 16px;
    }

    .ds-team-demo--contact {
        padding: 40px 20px 48px;
    }

    .ds-team-demo--contact .ds-team-name {
        font-size: 1.5rem;
        line-height: 1.75rem;
        overflow-wrap: normal;
        word-break: normal;
        hyphens: none;
    }
}

.ds-contact-captcha-demo {
    box-sizing: border-box;
    width: 304px;
    max-width: 100%;
    height: 78px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ds-blanc);
    border: 1px solid var(--ds-ocre-3);
    border-radius: 3px;
    font-family: 'Open Sans', sans-serif;
    font-size: .75rem;
    color: var(--ds-texte-fonce);
}

/* ============================================================
   66 - Blog logic (php/blog.php): small additions
   Book covers are portrait images: in the cards they are shown whole on the
   page beige instead of being cropped. The article chips get a second, smaller
   row of category chips. "Aucun contenu" is the empty state of a filter.
   ============================================================ */
.ds-card-blog--book .ds-card-blog-img {
    background: #F5EFDF;
}

.ds-biblio .ds-card-blog--book .ds-card-blog-img img {
    object-fit: contain;
    object-position: 50% 50%;
    padding: 8px 0;
    box-sizing: border-box;
}

.ds-page-filters--sub {
    margin-top: 16px;
    gap: var(--ds-spacing-8, 8px);
}

.ds-chip-filter--small {
    padding: .375em .875em;
    border-radius: .5em;
    font-size: .8125rem;
}

.ds-cp-empty {
    margin: 0 0 48px;
    font-family: 'Open Sans', sans-serif;
    font-size: .875rem;
    text-align: center;
    color: var(--ds-texte-fonce);
}

/* ============================================================
   Whole card clickable (blog cards + featured event)
   The card already had the pointer cursor and the hover shadow, but only its
   small text link was a link. The link now stretches over the whole card
   (its ::after covers the card), so the picture, the title and the text all
   open the same page, while the markup keeps a single link (one tab stop, one
   announcement for screen readers). The link is marine while the card is
   hovered, as it is when the link itself is hovered, and the keyboard focus
   shows on the whole card.
   ============================================================ */
.ds-card-blog {
    position: relative;
}

.ds-card-blog > .ds-text-link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.ds-card-blog:hover > .ds-text-link {
    border-bottom-color: var(--ds-marine);
    color: var(--ds-marine);
}

.ds-card-blog:focus-within {
    box-shadow: 0px 8px 24px 0px #0000004D;
}

.ds-card-blog > .ds-text-link:focus-visible {
    outline: none;
}

.ds-cp-feature {
    position: relative;
    cursor: pointer;
    transition: box-shadow .25s ease;
}

.ds-cp-feature:hover,
.ds-cp-feature:focus-within {
    box-shadow: 0px 8px 24px 0px #0000004D;
}

.ds-cp-feature-body .ds-btn {
    position: static;
}

.ds-cp-feature-body .ds-btn::after {
    content: "";
    position: absolute;
    inset: 0;
}

/* Whole card clickable - .ds-card-list (list cards: "Nouveau" block on the
   home, "Dans mon métier" list, section 10). Same stretched-link technique as
   .ds-card-blog: the card keeps ONE link in its markup (the existing text
   link), and its ::after covers the whole card, so a click on the image, the
   title, the text or the empty space opens the same page. */
.ds-card-list {
    position: relative;
    cursor: pointer; /* the whole card is clickable (stretched link) */
}

.ds-card-list > .ds-text-link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.ds-card-list:hover > .ds-text-link,
.ds-card-list.is-hover > .ds-text-link {
    border-bottom-color: var(--ds-marine);
    color: var(--ds-marine);
}

.ds-card-list:focus-within {
    box-shadow: 0px 8px 24px 0px #0000004D;
}

.ds-card-list > .ds-text-link:focus-visible {
    outline: none;
}

/* Whole card clickable - .ds-card, .ds-card-small, .ds-card-program
   (the "program highlight" block) and .ds-financer-row. Same stretched-link
   technique as .ds-card-blog / .ds-card-list: each component keeps ONE link in
   its markup (the existing text link or button) and that link's ::after covers
   the whole component, so a click anywhere on it - image, title, text, empty
   space - opens the same page. Hover/focus feedback comes from the component
   itself (shadow); the text link also takes its marine hover colour. */
.ds-card,
.ds-card-small,
.ds-card-program,
.ds-financer-row {
    position: relative;
}

.ds-card .ds-card-body > .ds-text-link::after,
.ds-card-small > .ds-text-link::after,
.ds-financer-row > .ds-text-link::after,
.ds-card-program-body > .ds-btn::after {
    content: "";
    position: absolute;
    inset: 0;
}

.ds-card:hover .ds-card-body > .ds-text-link,
.ds-card.is-hover .ds-card-body > .ds-text-link,
.ds-card-small:hover > .ds-text-link,
.ds-card-small.is-hover > .ds-text-link,
.ds-financer-row:hover > .ds-text-link {
    border-bottom-color: var(--ds-marine);
    color: var(--ds-marine);
}

/* .ds-financer-row had no hover state yet - it now matches the other cards. */
.ds-financer-row {
    cursor: pointer;
    transition: box-shadow .25s ease;
}

.ds-financer-row:hover {
    box-shadow: 0px 8px 24px 0px #0000004D;
}

.ds-card:focus-within,
.ds-card-small:focus-within,
.ds-financer-row:focus-within {
    box-shadow: 0px 8px 24px 0px #0000004D;
}

.ds-card-program:focus-within {
    box-shadow: 0px 4px 4px 0px #00000040;
}

.ds-card .ds-card-body > .ds-text-link:focus-visible,
.ds-card-small > .ds-text-link:focus-visible,
.ds-financer-row > .ds-text-link:focus-visible,
.ds-card-program-body > .ds-btn:focus-visible {
    outline: none;
}

/* Section 69 - demo wrappers only (the components themselves are unchanged):
   the loader and the dialog are fixed full-screen overlays on the real page, so
   the reference shows them inside a framed stage instead. */
.ds-feedback-demo {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-spacing-24);
    align-items: flex-start;
}

.ds-feedback-demo-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    max-width: 540px;
    min-height: 180px;
    text-align: left;
    padding: 20px;
    border: 1px dashed var(--ds-ocre-3);
    border-radius: var(--ds-radius-16);
    background: rgba(16, 24, 40, .45);
}

.ds-feedback-demo-stage--light {
    max-width: 260px;
    background: rgba(255, 255, 255, .7);
}

@media (max-width: 767.5px) {
    .ds-feedback-demo-stage--light {
        max-width: none;
    }
}

/* ============================================================
   Navigation with sub-menus (Formations, Supervision)
   Design from the "sous menu formation / sous menu supervision" Figma frames
   (2026-11-02): square panel on the same #FDF8EB as the bar, plain bold
   links (Open Sans 700, 14px/21px, marine) with a 53px pitch (16px above and
   below each line) and no chips. "Parcours certifiant" opens a nested list
   (Cycle 1-3, 13px, indented 14px, 33px pitch) with its chevron.
   The top-level link keeps going to its own page; the panel opens on hover
   or keyboard focus (focus-within). At/under 1180px the burger panel
   (.ds-nav-links) shows the sub-pages directly under their parent.
   ============================================================ */
.ds-nav-item {
    position: relative;
    display: flex;
    align-items: center;
}

.ds-nav-sub {
    display: none;
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1001;
    flex-direction: column;
    width: max-content;
    min-width: 100%;
    padding: 15px 27px 12px;
    box-sizing: border-box;
    border-radius: 0;
    background: #FDF8EB;
    box-shadow: 0px 4px 12px 0px #00000014;
}

/* invisible bridge so the panel doesn't close while the pointer crosses the gap */
.ds-nav-sub::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -16px;
    height: 16px;
}

.ds-nav-item:hover > .ds-nav-sub,
.ds-nav-item:focus-within > .ds-nav-sub,
.ds-nav-item.is-open > .ds-nav-sub {
    display: flex;
}

.ds-nav-item .ds-nav-chevron {
    transition: transform .25s ease;
}

.ds-nav-item:hover > .ds-nav-link .ds-nav-chevron,
.ds-nav-item:focus-within > .ds-nav-link .ds-nav-chevron,
.ds-nav-item.is-open > .ds-nav-link .ds-nav-chevron {
    transform: rotate(180deg);
}

.ds-nav-sub a,
.ds-nav-sub-group summary {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    letter-spacing: 0;
    color: var(--ds-marine);
    text-decoration: none;
    white-space: nowrap;
}

.ds-nav-sub > .ds-nav-sub-link,
.ds-nav-sub-group > summary {
    padding: 16px 0;
}

.ds-nav-sub a:hover,
.ds-nav-sub a:focus-visible {
    color: var(--ds-carmin);
    outline: none;
}

.ds-nav-sub a.is-active {
    color: var(--ds-carmin);
}

.ds-nav-sub-group > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    list-style: none;
    cursor: pointer;
}

.ds-nav-sub-group > summary::-webkit-details-marker {
    display: none;
}

.ds-nav-sub-group[open] > summary .ds-nav-chevron {
    transform: rotate(180deg);
}

.ds-nav-sub-children {
    display: flex;
    flex-direction: column;
    padding: 0 0 10px 14px;
}

.ds-nav-sub a.ds-nav-sub-link--child {
    padding: 6px 0;
    font-size: 13px;
}

@media (max-width: 1180px) {
    .ds-nav-links .ds-nav-item {
        display: block;
        border-bottom: 1px solid rgba(16, 24, 40, 0.08);
    }

    .ds-nav-links .ds-nav-item > .ds-nav-link {
        display: block;
        border-bottom: 0;
    }

    .ds-nav-links .ds-nav-item > .ds-nav-link .ds-nav-chevron {
        display: none;
    }

    .ds-nav-sub,
    .ds-nav-item:hover > .ds-nav-sub {
        display: flex;
        position: static;
        transform: none;
        width: auto;
        min-width: 0;
        padding: 0 0 var(--ds-spacing-8) var(--ds-spacing-16);
        background: none;
        box-shadow: none;
    }

    .ds-nav-sub::before {
        display: none;
    }

    .ds-nav-sub > .ds-nav-sub-link,
    .ds-nav-sub-group > summary {
        padding: 10px 0;
    }
}

/* anchors reached from the menu (fixed bar on top) */
#les-premiers-pas,
#diagnostique,
#a-la-carte,
#collective,
#individuelle {
    scroll-margin-top: 110px;
}

/* ==========================================================================
   Update (2026-11-02): pop-up "Je suis intéressé par la supervision" (section 72).
   From your two frames (form + "Demande envoyée"); the capture is shown at about
   half size, so every measure below is doubled back (input 23px -> 44px, card
   257px -> 514px, panel 440px -> 880px). Panel #FDF8EB (same cream as the
   navigation bar), white card with an ocre border, ocre 1px field borders,
   marine submit button. Reuses the contact-form fields' text sizes (13px labels,
   12px legal text). The success frame is a second, smaller panel in the same
   dialog.
   ========================================================================== */
body.ds-modal-open {
    overflow: hidden;
}

.ds-modal {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 24px 16px;
    overflow-y: auto;
    background: rgba(16, 24, 40, .45);
}

.ds-modal.is-open {
    display: flex;
}

.ds-modal-panel {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 880px;
    margin: auto;
    padding: 96px 40px 48px;
    background: #FDF8EB;
    font-family: 'Open Sans', sans-serif;
    color: var(--ds-texte-fonce);
}

.ds-modal-panel[hidden] {
    display: none;
}

.ds-modal-close {
    position: absolute;
    top: 36px;
    right: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ds-marine);
    cursor: pointer;
}

.ds-modal-close svg {
    width: 16px;
    height: 16px;
}

.ds-modal-close:hover {
    color: var(--ds-carmin);
}

.ds-modal-close:focus-visible {
    outline: 2px solid var(--ds-marine);
    outline-offset: 2px;
}

.ds-modal-title {
    margin: 0 0 40px;
    text-align: center;
}

.ds-modal-form {
    box-sizing: border-box;
    width: 100%;
    max-width: 514px;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: var(--ds-blanc);
    border: 1px solid var(--ds-ocre);
    border-radius: 8px;
}

.ds-modal-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.ds-modal-field > label,
.ds-modal-field > legend {
    padding: 0;
    font-weight: 700;
    font-size: .8125rem;
    line-height: 1.25rem;
    color: var(--ds-texte-fonce);
}

.ds-modal-input {
    box-sizing: border-box;
    width: 100%;
    height: 44px;
    padding: 0 14px;
    background: var(--ds-blanc);
    border: 1px solid var(--ds-ocre-3);
    border-radius: 10px;
    font-family: 'Open Sans', sans-serif;
    font-size: .8125rem;
    color: var(--ds-texte-fonce);
}

.ds-modal-input::placeholder {
    color: var(--ds-texte-fonce);
    opacity: .75;
}

.ds-modal-input:focus {
    outline: 0;
    border-color: var(--ds-marine);
}

textarea.ds-modal-input {
    height: auto;
    min-height: 68px;
    padding: 12px 14px;
    resize: vertical;
}

.ds-modal-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 40px;
}

.ds-modal-choice {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 200px;
    font-size: .8125rem;
    line-height: 1.25rem;
    color: var(--ds-texte-fonce);
    cursor: pointer;
}

.ds-modal-choice input,
.ds-modal-consent input {
    flex: 0 0 22px;
    box-sizing: border-box;
    width: 22px;
    height: 22px;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    background: var(--ds-blanc) center / 14px no-repeat;
    border: 1px solid var(--ds-ocre-3);
    border-radius: 4px;
    cursor: pointer;
}

.ds-modal-choice input:checked,
.ds-modal-consent input:checked {
    background-color: var(--ds-marine);
    border-color: var(--ds-marine);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 6.4l2.3 2.3 4.7-5' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.ds-modal-choice input:focus-visible,
.ds-modal-consent input:focus-visible {
    outline: 2px solid var(--ds-marine);
    outline-offset: 2px;
}

.ds-modal-legal {
    margin: 0;
    font-size: .75rem;
    line-height: 1.25rem;
    color: var(--ds-texte-fonce);
}

.ds-modal-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: .75rem;
    line-height: 1.25rem;
    color: var(--ds-texte-fonce);
    cursor: pointer;
}

.ds-modal-consent input {
    margin-top: 1px;
}

.ds-modal-captcha {
    box-sizing: border-box;
    width: 100%;
    min-height: 78px;
    overflow: hidden;
}

.ds-modal-captcha > div {
    width: 304px;
    transform-origin: 0 0;
}

/* static stand-in (design-system page only) for the reCAPTCHA widget */
.ds-modal-captcha-demo {
    display: flex;
    align-items: center;
    gap: 16px;
    box-sizing: border-box;
    width: 100%;
    height: 78px;
    padding: 0 16px;
    background: #FDF8EB;
    border: 1px solid var(--ds-ocre-3);
    border-radius: 4px;
    font-size: .75rem;
    color: var(--ds-texte-fonce);
}

.ds-modal-captcha-demo i {
    width: 24px;
    height: 24px;
    box-sizing: border-box;
    background: var(--ds-blanc);
    border: 2px solid var(--ds-ocre-3);
    border-radius: 3px;
}

.ds-modal-error {
    display: none;
    margin: 0;
    font-size: .75rem;
    line-height: 1.25rem;
    font-weight: 600;
    color: var(--ds-carmin);
}

.ds-modal-error.is-visible {
    display: block;
}

.ds-modal-submit {
    box-sizing: border-box;
    width: 100%;
    height: 42px;
    border: 0;
    border-radius: 6px;
    background: var(--ds-marine);
    color: var(--ds-blanc);
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: .8125rem;
    cursor: pointer;
    transition: background-color 300ms ease-out, box-shadow 300ms ease-out;
}

.ds-modal-submit:hover {
    background: var(--ds-carmin);
    box-shadow: 0px 4px 4px 0px #00000040;
}

.ds-modal-submit:disabled {
    background: #E0E0E0;
    color: #999999;
    box-shadow: none;
    cursor: wait;
}

.ds-modal-submit:focus-visible {
    outline: 2px solid var(--ds-carmin);
    outline-offset: 2px;
}

.ds-modal-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* success frame: smaller panel, centred message */
.ds-modal-panel--ok {
    max-width: 880px;
    padding: 96px 40px 44px;
    text-align: center;
}

.ds-modal-panel--ok .ds-modal-close {
    top: 28px;
}

.ds-modal-ok-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 24px;
    font-size: .8125rem;
    line-height: 1.25rem;
    color: var(--ds-marine);
}

.ds-modal-ok-status svg {
    width: 14px;
    height: 14px;
}

.ds-modal-ok-text {
    margin: 0;
    font-weight: 700;
    font-size: 1.0625rem;
    line-height: 1.5rem;
    color: var(--ds-marine);
}

/* design-system page: the two frames shown in the page flow, not as an overlay */
.ds-modal-demo {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.ds-modal-demo .ds-modal-panel {
    margin: 0;
}

@media (max-width: 767.5px) {
    .ds-modal {
        padding: 0;
    }

    .ds-modal-panel {
        min-height: 100%;
        padding: 72px 16px 32px;
    }

    .ds-modal-panel--ok {
        min-height: 0;
        margin-top: auto;
        margin-bottom: auto;
        padding: 72px 16px 32px;
    }

    .ds-modal-demo .ds-modal-panel {
        min-height: 0;
    }

    .ds-modal-close {
        top: 20px;
        right: 16px;
    }

    .ds-modal-title {
        margin-bottom: 24px;
    }

    .ds-modal-choice {
        min-width: 0;
    }
}

/* ============================================================
   Whole card clickable - .ds-module-card, .ds-parcours-card, .ds-sup-card
   Same stretched-link technique as the other cards: each card keeps ONE link
   in its markup (the existing text link or button) and that link's ::after
   covers the whole card, so the picture, the title, the tags, the text and the
   empty space all open the same page. The module card used to show the pointer
   cursor everywhere while only its small link was clickable; now the pointer
   cursor and the click area are the same surface. The parcours and
   supervision cards had neither the cursor nor the click area.
   ============================================================ */
.ds-module-card,
.ds-parcours-card,
.ds-sup-card {
    position: relative;
    cursor: pointer;
}

.ds-module-card-foot .ds-text-link,
.ds-parcours-card > .ds-parcours-card-cta,
.ds-sup-card-body > .ds-sup-card-cta {
    position: static;
}

.ds-module-card-foot .ds-text-link::after,
.ds-parcours-card > .ds-parcours-card-cta::after,
.ds-sup-card-body > .ds-sup-card-cta::after {
    content: "";
    position: absolute;
    inset: 0;
    cursor: pointer;
}

/* The foot, the body and the image wrappers must not create their own
   positioning context, otherwise the link would only cover its own box. */
.ds-module-card-body,
.ds-module-card-foot,
.ds-sup-card-body {
    position: static;
}

.ds-module-card:hover .ds-module-card-foot .ds-text-link {
    border-bottom-color: var(--ds-marine);
    color: var(--ds-marine);
}

/* Hover / keyboard focus feedback for the two cards that had none. */
.ds-parcours-card,
.ds-sup-card {
    transition: box-shadow .25s ease;
}

.ds-parcours-card:hover,
.ds-sup-card:hover,
.ds-parcours-card:focus-within,
.ds-sup-card:focus-within,
.ds-module-card:focus-within {
    box-shadow: 0px 8px 24px 0px #0000004D;
}

.ds-module-card-foot .ds-text-link:focus-visible,
.ds-parcours-card > .ds-parcours-card-cta:focus-visible,
.ds-sup-card-body > .ds-sup-card-cta:focus-visible {
    outline: none;
}

/* ============================================================
   Article annotations - tooltip (desktop) and sticky note panel (touch)
   The footnote numbers (.ds-art-fn) show their note without leaving the text.
   Desktop with a mouse (>= 768px): clicking a number opens a tooltip
   above it (below when there is no room under the fixed menu); it stays open
   until the same number, another place or Esc is clicked. Touch / small
   screens: tapping a number opens a panel pinned to the bottom of the screen
   that stays while reading; it is closed with the x button, Esc, or by tapping
   the same number again. The note text is read from the Notes list of the page,
   and without JavaScript the numbers remain plain links to that list.
   ============================================================ */
.ds-art .ds-art-fn {
    position: relative;
    transition: color .2s ease-out;
}

.ds-art .ds-art-fn:hover,
.ds-art .ds-art-fn.is-active {
    color: var(--ds-carmin);
}

.ds-art .ds-art-fn:focus-visible {
    outline: 2px solid var(--ds-turquoise);
    outline-offset: 2px;
    border-radius: 2px;
}

/* The numbers are tiny: enlarge the tap area without changing the layout. */
@media (hover: none), (pointer: coarse), (max-width: 767.5px) {
    .ds-art .ds-art-fn::before {
        content: "";
        position: absolute;
        inset: -12px -10px;
    }
}

.ds-fn-tip {
    position: fixed;
    z-index: 1500;
    box-sizing: border-box;
    width: max-content;
    max-width: min(380px, calc(100vw - 24px));
    padding: 14px 16px;
    background: var(--ds-blanc);
    border: 1px solid var(--ds-ocre-3);
    border-radius: 12px;
    box-shadow: 0px 8px 24px 0px #0000004D;
    font-family: 'Open Sans', sans-serif;
    font-size: .8125rem;
    line-height: 1.25rem;
    color: var(--ds-texte-fonce);
    text-align: left;
    overflow-wrap: anywhere;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity .15s ease-out, transform .15s ease-out, visibility 0s linear .15s;
}

.ds-fn-tip.is-below {
    transform: translateY(-4px);
}

.ds-fn-tip.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
}

.ds-fn-tip::after {
    content: "";
    position: absolute;
    left: var(--ds-fn-arrow, 50%);
    bottom: -6px;
    width: 10px;
    height: 10px;
    margin-left: -5px;
    background: var(--ds-blanc);
    border-right: 1px solid var(--ds-ocre-3);
    border-bottom: 1px solid var(--ds-ocre-3);
    transform: rotate(45deg);
}

.ds-fn-tip.is-below::after {
    bottom: auto;
    top: -6px;
    transform: rotate(225deg);
}

.ds-fn-tip a,
.ds-fn-sheet a {
    color: var(--ds-marine);
    text-decoration: underline;
}

.ds-fn-tip-num {
    margin-right: 6px;
    font-weight: 700;
    color: var(--ds-carmin);
}

.ds-fn-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1500;
    box-sizing: border-box;
    max-height: 45vh;
    overflow-y: auto;
    padding: 8px 20px calc(16px + env(safe-area-inset-bottom, 0px));
    background: var(--ds-blanc);
    border-top: 2px solid var(--ds-ocre-3);
    border-radius: 0;
    box-shadow: 0px -4px 16px 0px #00000026;
    font-family: 'Open Sans', sans-serif;
    color: var(--ds-texte-fonce);
    visibility: hidden;
    transform: translateY(100%);
    transition: transform .25s ease-out, visibility 0s linear .25s;
}

.ds-fn-sheet.is-open {
    visibility: visible;
    transform: none;
    transition-delay: 0s;
}

.ds-fn-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ds-fn-sheet-title {
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.5rem;
    color: var(--ds-carmin);
}

.ds-fn-sheet-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-right: -12px;
    padding: 0;
    background: none;
    border: 0;
    color: var(--ds-marine);
    cursor: pointer;
}

.ds-fn-sheet-close svg {
    width: 20px;
    height: 20px;
}

.ds-fn-sheet-text {
    font-size: .875rem;
    line-height: 1.375rem;
    overflow-wrap: anywhere;
}

/* The page keeps room at the bottom so the panel never hides the end of the text. */
html.has-fn-sheet body {
    padding-bottom: var(--ds-fn-sheet-h, 0px);
}

@media (min-width: 768px) {
    .ds-fn-sheet {
        left: 50%;
        right: auto;
        width: min(720px, calc(100vw - 48px));
        border-radius: 16px 16px 0 0;
        transform: translate(-50%, 100%);
    }
    .ds-fn-sheet.is-open {
        transform: translate(-50%, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ds-fn-tip,
    .ds-fn-sheet {
        transition: none;
    }
}

/* Design-system demo (section 73): the two states shown in a frame. */
.ds-fn-demo {
    position: relative;
}

.ds-fn-demo .ds-fn-tip,
.ds-fn-demo .ds-fn-sheet {
    position: static;
    visibility: visible;
    opacity: 1;
    transform: none;
}

.ds-fn-demo .ds-fn-tip {
    display: inline-block;
}

.ds-fn-demo .ds-fn-sheet {
    width: 100%;
    max-width: 375px;
    border: 1px solid var(--ds-ocre-3);
    border-radius: 0;
}

/* ============================================================
   Team cards with an expandable bio (sections 37 and 74)
   "Lire plus" expands the card itself: the short text folds away and the full
   bio unfolds in its place, so the card grows downwards (300 ms) and keeps its
   width. "Lire moins" folds it back. Cards can be open independently. The card
   next to an open one on the same row keeps its own height instead of stretching
   (.is-mate, set by the script). Without JavaScript the link keeps going to the
   team page.
   ============================================================ */
.ds-team-body {
    display: block;
    width: 100%;
}

.ds-team-teaser,
.ds-team-bio {
    display: grid;
    transition: grid-template-rows .3s ease-out, opacity .3s ease-out, visibility 0s linear 0s;
}

.ds-team-teaser {
    grid-template-rows: 1fr;
    opacity: 1;
}

.ds-team-bio {
    grid-template-rows: 0fr;
    opacity: 0;
    visibility: hidden;
    transition: grid-template-rows .3s ease-out, opacity .3s ease-out, visibility 0s linear .3s;
}

.ds-team-teaser > *,
.ds-team-bio > * {
    min-height: 0;
    overflow: hidden;
}

.ds-team-card.is-open .ds-team-teaser {
    grid-template-rows: 0fr;
    opacity: 0;
    visibility: hidden;
    transition: grid-template-rows .3s ease-out, opacity .3s ease-out, visibility 0s linear .3s;
}

.ds-team-card.is-open .ds-team-bio {
    grid-template-rows: 1fr;
    opacity: 1;
    visibility: visible;
    transition: grid-template-rows .3s ease-out, opacity .3s ease-out, visibility 0s linear 0s;
}

.ds-team-bio p {
    margin: 0;
    overflow-wrap: anywhere;
}

.ds-team-card.is-mate {
    align-self: start;
}

@media (prefers-reduced-motion: reduce) {
    .ds-team-teaser,
    .ds-team-bio,
    .ds-team-card.is-open .ds-team-teaser,
    .ds-team-card.is-open .ds-team-bio {
        transition: none;
    }
}

/* ============================================================
   Supervision detail page (section 75) - from "Page détail supervision"
   The hero, the chips, "Objectifs", the accordion and the info sections are the
   cycle detail ones (sections 31-36). New here: the bold introduction heading,
   the "En présentiel à Paris" / "En visio" cards (ocre background, rounded
   corners) and the row of two buttons under them. Measures are read from a
   small capture: cards about 640px wide in total, 24px gap, 24px padding.
   ============================================================ */
.ds-supdet-heading {
    margin: 0 0 24px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.5rem;
    color: var(--ds-marine);
}

.ds-supdet-body > p {
    margin: 0 0 24px;
}

.ds-supdet-formats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    max-width: 680px;
    margin: 40px 0 32px;
}

.ds-supdet-format {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 24px;
    background: var(--ds-ocre-def);
    border-radius: var(--ds-radius-16);
}

.ds-supdet-format-title {
    margin: 0 0 4px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.5rem;
    color: var(--ds-texte-fonce);
}

.ds-supdet-format p {
    margin: 0;
}

.ds-supdet-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

@media (max-width: 767.5px) {
    .ds-supdet-formats {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
        margin: 32px 0 24px;
    }

    .ds-supdet-actions .ds-btn {
        flex: 1 1 100%;
    }
}

/* Wider hero for a long title on one line ("Supervision collective"); mobile and tablet wrap as before. */
@media (min-width: 1024.5px) {
    .ds-cycle-hero--wide .ds-cycle-hero-inner {
        max-width: 960px;
    }
}

/* More room between the tag, the title and the button in the hero text (Supervision detail). */
.ds-cycle-hero--spaced .ds-cycle-hero-text {
    gap: var(--ds-spacing-16);
}

.ds-cycle-hero--spaced .ds-cycle-hero-cta {
    margin-top: var(--ds-spacing-8);
}

/* Update (2026-11-02), per "the button inside should not have a box-shadow when I hover it":
   in every whole-card-clickable component the card already carries the hover shadow, and the
   stretched link makes the button :hover whenever the card is hovered - so the button's own
   shadow doubled up. Inside those cards the button keeps its hover colour change only. */
.ds-card-program-body > .ds-btn:hover,
.ds-card-program-body > .ds-btn.is-hover,
.ds-sup-card-body > .ds-sup-card-cta:hover,
.ds-parcours-card > .ds-parcours-card-cta:hover,
.ds-cp-feature-body .ds-btn:hover,
.ds-card-program:hover .ds-btn,
.ds-sup-card:hover .ds-btn,
.ds-parcours-card:hover .ds-btn,
.ds-cp-feature:hover .ds-btn {
    box-shadow: none;
}

/* Update (2026-11-02): formation pages fed by Digiforma.
   - .ds-formation-desc : free text coming from Digiforma (description, teaching team) - paragraphs and lists.
   - .ds-catalogue : "Toutes nos formations" on the Formations page - the whole Digiforma catalogue as module cards,
     category chips on top; on mobile the cards stack (a long list does not suit the swipe row of the "à la carte" modules). */
.ds-formation-desc p {
    margin: 0 0 var(--ds-spacing-16);
}

.ds-formation-desc p:last-child {
    margin-bottom: 0;
}

.ds-formation-desc ul,
.ds-formation-desc ol {
    margin: 0 0 var(--ds-spacing-16);
    padding-left: 20px;
}

.ds-catalogue .ds-catalogue-filters {
    margin: 0 auto var(--ds-spacing-24);
}

.ds-catalogue .ds-modules-grid--all {
    grid-auto-rows: auto;
    align-items: stretch;
}

.ds-catalogue .ds-module-card[hidden] {
    display: none;
}

.ds-catalogue-empty {
    margin: var(--ds-spacing-32) 0 0;
    text-align: center;
}

@media (max-width: 767.5px) {
    .ds-catalogue .ds-modules-grid--all {
        display: flex;
        flex-direction: column;
        overflow: visible;
        gap: 0;
    }

    .ds-catalogue .ds-modules-grid--all .ds-module-card {
        flex: 0 0 auto;
    }
}

/* Update (2026-11-05), per request: (1) the fixed menu hides when the visitor scrolls down and comes back as soon as
   they scroll up (js/ds-scroll.js toggles .is-nav-hidden); (2) an oval "back to top" button, marine background
   (#234B5E) with a white arrow, appears bottom right after 400px of scrolling (js/ds-scroll.js creates .ds-scrolltop). */
.ds-nav-demo--fixed {
    transition: transform 300ms ease-out;
}

.ds-nav-demo--fixed.is-nav-hidden {
    transform: translateY(calc(-100% - 40px));
}

.ds-scrolltop {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: var(--ds-radius-full);
    background-color: var(--ds-marine);
    color: var(--ds-blanc);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 300ms ease-out, transform 300ms ease-out, visibility 0s linear 300ms, box-shadow 300ms ease-out;
}

.ds-scrolltop.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
}

.ds-scrolltop:hover,
.ds-scrolltop:focus-visible {
    box-shadow: 0px 4px 4px 0px #00000040;
}

.ds-scrolltop:focus-visible {
    outline: 2px solid var(--ds-carmin);
    outline-offset: 3px;
}

/* the reCAPTCHA badge sits at the bottom right of the pages that have a form */
.ds-scrolltop--raised {
    bottom: 96px;
}

/* static copy for the design-system page */
.ds-scrolltop--static {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
}

@media (max-width: 767.5px) {
    .ds-scrolltop {
        right: 16px;
        bottom: 16px;
        width: 56px;
        height: 40px;
    }

    .ds-scrolltop--raised {
        bottom: 88px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ds-nav-demo--fixed,
    .ds-scrolltop {
        transition: none;
    }
}

/* Update (2026-11-05), per request: the text link ("En savoir plus", "Text-link") now turns MARINE on hover
   everywhere (it was turquoise), including when its whole card is hovered; pressed / focus stays marine. */

/* Update (2026-11-05), per request (replaces the previous note on the "Point de départ" border): ALL card blocks
   now behave the same way on hover - carmin border, carmin title and the shadow. This covers .ds-card
   ("Point de départ"), .ds-card-list ("Nouveau", "Dans mon métier"), .ds-card-blog, .ds-card-small,
   .ds-financer-row, .ds-module-card, .ds-parcours-card, .ds-sup-card and .ds-cp-feature. */
.ds-card,
.ds-card-list,
.ds-card-blog,
.ds-card-small,
.ds-financer-row,
.ds-module-card,
.ds-parcours-card,
.ds-sup-card,
.ds-cp-feature {
    transition: box-shadow .25s ease, border-color .25s ease;
}

.ds-card:hover, .ds-card.is-hover, .ds-card:focus-within,
.ds-card-list:hover, .ds-card-list.is-hover, .ds-card-list:focus-within,
.ds-card-blog:hover, .ds-card-blog.is-hover, .ds-card-blog:focus-within,
.ds-card-small:hover, .ds-card-small.is-hover, .ds-card-small:focus-within,
.ds-financer-row:hover, .ds-financer-row:focus-within,
.ds-module-card:hover, .ds-module-card:focus-within,
.ds-parcours-card:hover, .ds-parcours-card:focus-within,
.ds-sup-card:hover, .ds-sup-card:focus-within,
.ds-cp-feature:hover, .ds-cp-feature:focus-within {
    border-color: var(--ds-carmin);
}

.ds-card-title,
.ds-card-list-title,
.ds-card-blog-title,
.ds-card-small-title,
.ds-module-card-title,
.ds-parcours-card-title,
.ds-sup-card-title,
.ds-cp-feature-title,
.ds-financer-title {
    transition: color .25s ease;
}

.ds-card:hover .ds-card-title,
.ds-card-list:hover .ds-card-list-title, .ds-card-list.is-hover .ds-card-list-title,
.ds-card-blog:hover .ds-card-blog-title, .ds-card-blog.is-hover .ds-card-blog-title,
.ds-card-small:hover .ds-card-small-title, .ds-card-small.is-hover .ds-card-small-title,
.ds-module-card:hover .ds-module-card-title,
.ds-parcours-card:hover .ds-parcours-card-title,
.ds-sup-card:hover .ds-sup-card-title,
.ds-cp-feature:hover .ds-cp-feature-title,
.ds-financer-row:hover .ds-financer-title {
    color: var(--ds-carmin);
}

/* Update (2026-11-05), per request: the four "Point de départ" cards now all have the SAME image height, taken from
   the "Rejoindre une supervision" card (about 170px). Before, the image filled whatever room the text left
   (flex: 1 1 auto), so the height changed with the number of text lines (190px / 190px / 170px / 162px).
   The card height (403px) is unchanged; only the image area is fixed. */
.ds-start-demo .ds-card-img-wrap {
    flex: 0 0 170px;
    height: 170px;
}

/* Update (2026-11-05), per request: on the "Dans mon métier" list rows (.ds-formez-list) the gap between the
   title and the text is reduced from 16px to 8px. The subtitles of the list cards on the home page are cut at
   75 characters with "…" on the PHP side (php/texte.php, fslTronquer()). */
.ds-formez-list .ds-card-list-text {
    gap: var(--ds-spacing-8);
}

/* Update (2026-11-05), per request: on the home page the three funding rows ("Indépendants", "Salariés",
   "Demandeur d'emploi") show a photo in the 40px round badge instead of an emoji. The badge keeps its size;
   the image fills it (cover) and is clipped to the circle. Images: images/home-independants.webp,
   home-salaries.webp, home-demandeurs-emplois.webp (160x160, cropped from the supplied .jpg originals). */
.ds-financer-icon-badge {
    overflow: hidden;
}

.ds-financer-icon-badge img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Update (2026-11-05), per request: in EVERY FAQ (all pages, the plain and the "retro" variants), the text of the
   questions and the chevron arrows are marine (#234B5E). The text colour was texte-fonce (set inline on each
   question label) and the arrow stroke was #101828 (set in each SVG), so both are overridden here once, for all
   FAQ blocks, instead of editing every page. */
.ds-faq-item .ds-faq-question .ds-faq-question-label {
    color: var(--ds-marine);
}

.ds-faq-item .ds-faq-question .ds-faq-chevron path {
    stroke: var(--ds-marine);
}

/* Update (2026-11-05), per request: on the "Un parcours de formation progressif" / "Apprendre par la pratique…"
   blocks (.ds-parcours-feature: Formations, La certification, cycle detail) the photo is now exactly as tall as
   the text block next to it (same principle as the home page cards and the "La systémie" page): the image box
   stretches to the height of the text and the picture is cropped to fit (object-fit: cover, absolutely
   positioned so it never makes the row taller). Width stays 230px (200px on tablet). On mobile the blocks are
   stacked and keep their fixed 260px photo. */
@media (min-width: 767.6px) {
    .ds-parcours-feature {
        align-items: stretch;
    }

    .ds-parcours-feature-img {
        position: relative;
        height: auto;
        align-self: stretch;
    }

    .ds-parcours-feature-img img {
        position: absolute;
        inset: 0;
    }

    .ds-parcours-feature-text {
        justify-content: center;
    }
}

/* Update (2026-11-05), per request: in EVERY "Témoignages" block (light variant: Formations, La certification,
   Dans mon métier, cycle detail; default variant: home page and the design system) the quote mark is now the
   supplied picture images/quotes-vector-temoignages.png (carmin, 23x18px) instead of the "❝" character. The
   character stays in the HTML (hidden with font-size: 0) so nothing else has to change in the pages. */
.ds-testimonial-quote {
    width: 23px;
    height: 18px;
    font-size: 0;
    line-height: 0;
    background: url("../images/quotes-vector-temoignages.png") no-repeat left center / contain;
}

/* Update (2026-11-05), per request, for ALL the detail pages (formation, cycle, supervision; .ds-cycle-hero):
   (1) on desktop the hero content (photo + text) is at most 900px wide (it was 760px, 960px for the wide variant);
   (2) from tablet up, the photo is exactly as tall as the text block next to it (same principle as the home cards):
   the photo box stretches to the height of the text and the picture is cropped to fit (object-fit: cover, absolutely
   positioned so it never makes the hero taller). Mobile keeps its stacked layout with the 190px photo. */
@media (min-width: 1024.5px) {
    .ds-cycle-hero-inner,
    .ds-cycle-hero--wide .ds-cycle-hero-inner {
        max-width: 900px;
    }
}

@media (min-width: 767.6px) {
    .ds-cycle-hero-inner {
        align-items: stretch;
    }

    .ds-cycle-hero-img {
        position: relative;
        height: auto;
        align-self: stretch;
    }

    .ds-cycle-hero-img img {
        position: absolute;
        inset: 0;
    }

    .ds-cycle-hero-text {
        justify-content: center;
    }
}

/* Update (2026-11-05), per request (replaces the previous hero subtitle): on the formation detail page the Digiforma
   subtitle ("Découvrir le paradigme systémique et son application avec l'approche stratégique de Palo Alto") is no
   longer in the hero. It sits in the body, between the anchor chips (Objectifs, Contenu...) and the description text,
   as a bold marine line. The hero keeps the tag, the title and the button; the cycle and supervision pages are untouched. */
.ds-formation-subtitle {
    margin: 0 0 var(--ds-spacing-16);
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 1.125rem;
    line-height: 1.5rem;
    color: var(--ds-marine);
}

/* Update (2026-11-05), per request, for ALL the detail pages (formation, cycle, supervision; .ds-cycle-hero):
   more space between the title (or the "Cycle n" line) and the button - 32px in total (8px flex gap + 24px margin on
   the button), the same on every page and at every width. The subtitle line margin is removed so the gap is the same
   with or without it. */
.ds-cycle-hero .ds-cycle-hero-sub {
    margin-bottom: 0;
}

.ds-cycle-hero .ds-cycle-hero-cta {
    margin-top: var(--ds-spacing-24);
}

.ds-cycle-hero.ds-cycle-hero--spaced .ds-cycle-hero-cta {
    margin-top: var(--ds-spacing-16);
}

/* Update (2026-11-05), per request, mobile and tablet consistency (home first, the components are shared):
   every band now has the same side gutter (40px on tablet, 20px on mobile), the blocks use the full content width
   and are centered, and nothing is left aligned inside a wider column.
   - FAQ, Qualiopi and "Des questions ?" bands: 16px gutters aligned on the others (40 / 20).
   - Certification block: the picture fills the width (no more 350px image on the left), the text no longer has a
     475px minimum height (that was the big empty gap), the button spans the width on mobile.
   - Supervision cards, Le Cercle cards and testimonials: full width on mobile, two columns centered on tablet;
     testimonial cards keep their natural height (no empty bottom).
   - Older footer: same side gutters, newsletter form fits the screen. */
@media (max-width: 1024.5px) {
    .ds-faq-section,
    .ds-qualiopi-demo,
    .ds-questions-demo {
        padding-left: 40px;
        padding-right: 40px;
    }

    .ds-footer-demo {
        padding-left: 40px;
        padding-right: 40px;
        box-sizing: border-box;
    }
}

@media (min-width: 767.6px) and (max-width: 1024.5px) {
    .ds-supervision-grid > .ds-card-small,
    .ds-cercle-demo:not(.ds-cercle-demo--carousel) .ds-cercle-grid > .ds-card-blog {
        flex: 0 1 calc(50% - 12px);
        width: calc(50% - 12px);
        max-width: calc(50% - 12px);
        box-sizing: border-box;
    }

    .ds-testimonial-card,
    .ds-testimonial-demo--clair .ds-testimonial-card {
        flex: 0 1 calc(50% - 16px);
        max-width: calc(50% - 16px);
    }
}

@media (max-width: 767.5px) {
    .ds-faq-section,
    .ds-qualiopi-demo,
    .ds-questions-demo,
    .ds-footer-demo {
        padding-left: 20px;
        padding-right: 20px;
    }

    .ds-cert-demo .ds-block-content-image {
        max-width: none;
        width: 100%;
        align-items: stretch;
        gap: 24px;
    }

    .ds-cert-demo .ds-block-content-image-img {
        width: 100%;
        max-width: none;
        height: 220px;
    }

    .ds-cert-demo .ds-block-content-image-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .ds-cert-demo .ds-block-content-image-text {
        width: 100%;
        min-height: 0;
        gap: 16px;
    }

    .ds-cert-demo .ds-cert-cta {
        margin-top: 0;
    }

    .ds-cert-demo .ds-cert-cta .ds-btn,
    .ds-cercle-cta .ds-btn {
        width: 100%;
        box-sizing: border-box;
        justify-content: center;
        text-align: center;
    }

    .ds-supervision-grid > .ds-card-small,
    .ds-cercle-demo:not(.ds-cercle-demo--carousel) .ds-cercle-grid > .ds-card-blog {
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .ds-testimonial-card,
    .ds-testimonial-demo--clair .ds-testimonial-card {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
    }

    .ds-footer-form {
        width: 100%;
        box-sizing: border-box;
    }

    .ds-footer-form-input {
        width: auto;
        flex: 1 1 auto;
        min-width: 0;
    }
}

/* Update (2026-11-05), follow-up of the block above: footer inner wrapper, newsletter form and the Certification
   button now follow the same gutters (the wrapper used to be wider than the screen on a phone, 1px from the edge). */
@media (max-width: 1024.5px) {
    .ds-footer-inner {
        width: 100%;
        box-sizing: border-box;
    }

    .ds-footer-newsletter {
        width: 100%;
    }

    .ds-footer-form {
        flex: 1 1 auto;
        min-width: 0;
        box-sizing: border-box;
    }

    .ds-footer-form-input {
        width: auto;
        flex: 1 1 auto;
        min-width: 0;
    }
}

@media (max-width: 767.5px) {
    .ds-cert-demo .ds-cert-cta {
        width: 100%;
        box-sizing: border-box;
        align-self: stretch;
        justify-content: center;
        text-align: center;
    }
}

/* Update (2026-11-05), mobile funding rows: the "En savoir plus" link used to stretch over the whole row (long
   underline, centered text). The row is now a 2-column grid (badge | text), and the link sits under the text, aligned
   on the left with the title, with an underline only as long as the words. */
@media (max-width: 767.5px) {
    .ds-financer-row {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr);
        column-gap: var(--ds-spacing-16);
        row-gap: var(--ds-spacing-16);
        align-items: start;
    }

    .ds-financer-row .ds-text-link {
        grid-column: 2;
        justify-self: start;
        flex: none;
        margin-left: 0;
    }
}

/* Update (2026-11-05), tablet only (768-1024px): (1) the four Certification steps (Cycle 1, 2, 3, Certification) sit in
   a clean 2 x 2 grid of equal cards, without the loose arrows that ended up at the line ends; (2) the link at the end
   of the program list rows ("Voir le programme", "Nous contacter") stays on one line, so its underline is not split. */
@media (min-width: 767.6px) and (max-width: 1024.5px) {
    .ds-cert-steps {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--ds-spacing-16);
        max-width: 688px;
    }

    .ds-cert-steps .ds-cert-step {
        max-width: none;
        flex: none;
    }

    .ds-cert-steps .ds-cert-step-arrow {
        display: none;
    }

    .ds-card-list > .ds-text-link {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}

/* Update (2026-11-05), mobile/tablet centering audit of every page (footer and school page):
   - the wide footer (.ds-footer-demo--spread) had its own side gutters in .ds-footer-inner ON TOP of the footer's
     gutter (content at 40px instead of 20px on a phone): on tablet and mobile only the footer's gutter is kept;
   - the hidden Sendinblue container inside the newsletter form (.sib-container) was an empty flex item and pushed the
     email field 24px to the right of the "Notre newsletter" label: it no longer takes any space;
   - on a phone, the footer link columns fill the full width (two equal columns) instead of being packed on the left;
   - the Qualiopi badge of the "L'école" page is centered under the text on a phone. */
.ds-footer-form > .sib-container {
    display: contents;
}

@media (max-width: 1024.5px) {
    .ds-footer-demo--spread .ds-footer-inner {
        padding-left: 0;
        padding-right: 0;
    }
}

@media (max-width: 767.5px) {
    .ds-footer-columns {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ds-qcert-logo {
        align-self: center;
    }
}

/* Update (2026-11-05), tablet: the four footer link columns spread over the full content width (they were packed on
   the left, 175px short of the right gutter). */
@media (min-width: 767.6px) and (max-width: 1024.5px) {
    .ds-footer-columns {
        width: 100%;
        justify-content: space-between;
    }
}

/* Update (2026-11-05), mobile: the two "Des questions ?" buttons (Nous contacter / Prendre RDV) have the same width. */
@media (max-width: 767.5px) {
    .ds-questions-demo--retro .ds-questions-cta {
        align-items: stretch;
        width: 100%;
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
    }

    .ds-questions-demo--retro .ds-questions-cta .ds-btn {
        width: 100%;
        box-sizing: border-box;
        justify-content: center;
        text-align: center;
    }
}

/* Update (2026-11-06): the chips on the module cards (à la carte, "Vous aimerez aussi") now show the competence TAGS of
   the Digiforma formation (field "tags", e.g. "Accompagner les collectifs"), not its category ("Modules à la carte").
   A formation with several tags shows several chips on one wrapping line. */
.ds-module-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-spacing-8);
}

/* Update (2026-11-06), formation detail page: the label above the title shows the competence TAGS of the Digiforma
   formation as colored chips (same chips as the module cards, e.g. "Accompagner les collectifs"). A formation without
   tag keeps the old category label. */
.ds-cycle-hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-spacing-8);
}

/* Update (2026-11-10), per request: on the four "Point de départ" cards of the home page, the link ("Je découvre la
   systémie", ...) now sits at the bottom of every card, on the same line. Before, the link followed the text, so it sat
   higher or lower depending on the number of lines of the title and the text. The text block fills the card under the
   fixed image (flex 1) and the link is pushed to the bottom (margin-top: auto); the title and text stay at the top. */
.ds-start-demo .ds-card-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.ds-start-demo .ds-card-body > .ds-text-link {
    margin-top: auto;
}

/* Update (2026-11-10), per request: the arrows of the "Point de départ" carousel (tablet and mobile) now use the same
   design as the "back to top" button (.ds-scrolltop): marine oval, white arrow, same sizes (64x44 on tablet, 56x40 on
   mobile), same shadow on hover and same carmin focus ring. They were a white circle with a dark arrow. The rotation
   moved from the button to its icon so the oval stays horizontal; the arrows sit on the middle of the card image (not over the text); the greyed-out state (first / last card) is kept. */
.ds-start-arrow {
    width: 64px;
    height: 44px;
    background: var(--ds-marine);
    color: var(--ds-blanc);
    box-shadow: none;
    transition: box-shadow 300ms ease-out, opacity 300ms ease-out;
}

.ds-start-arrow svg {
    width: 22px;
    height: 22px;
}

.ds-start-arrow svg path {
    stroke: currentColor;
}

.ds-start-arrow-prev {
    left: 8px;
    transform: translateY(-50%);
}

.ds-start-arrow-next {
    right: 8px;
    transform: translateY(-50%);
}

.ds-start-arrow-prev svg {
    transform: rotate(90deg);
}

.ds-start-arrow-next svg {
    transform: rotate(-90deg);
}

.ds-start-arrow:hover,
.ds-start-arrow:focus-visible {
    box-shadow: 0px 4px 4px 0px #00000040;
}

.ds-start-arrow:focus-visible {
    outline: 2px solid var(--ds-carmin);
    outline-offset: 3px;
}

@media (max-width: 767.5px) {
    .ds-start-arrow {
        width: 56px;
        height: 40px;
    }
}

/* Update (2026-11-10), per request: on the "Dans mon métier" list rows (.ds-formez-list, home page: "Systémie et
   stratégie", "Systémie et entreprise familiale", "Systémie & vous") there is no more gap between the title and the
   text under it (it was 8px since 2026-11-05, 16px before). */
.ds-formez-list .ds-card-list-text {
    gap: 0;
}

/* Update (2026-11-10), per request: on the home page the three "Supervision" cards show a photo in the 48px round badge
   instead of an emoji (images/home-supervision-collective_supervision.png, home-supervision-individuelle_supervision.png,
   home-supervision-portrait-superviseurs_supervision.png, 200x200). The badge keeps its size; the image fills it (cover)
   and is clipped to the circle. Same technique as .ds-financer-icon-badge. */
.ds-card-small-icon-badge {
    overflow: hidden;
}

.ds-card-small-icon-badge img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Update (2026-11-10), per request: the home "Le Cercle" band (tablet and mobile) also has the two marine arrows of the
   "Point de départ" carousel (same .ds-start-arrow button), on the middle of the card image (the image is 180px high
   here), in addition to the swipe and the dots. When all the cards fit on the screen (wide tablet) there is nothing to
   scroll, so the arrows and the dots are hidden (class is-fit, set by the page script). Desktop is unchanged. */
.ds-cercle-slider {
    position: relative;
}

@media (max-width: 1024.5px) {
    .ds-cercle-slider .ds-start-arrow {
        display: flex;
    }

    .ds-cercle-demo.is-fit .ds-start-arrow,
    .ds-cercle-demo.is-fit .ds-cercle-dots {
        display: none;
    }
}

/* Update (2026-11-10), per request, page "La systémie": "Notre bibliothèque" and "Le Cercle" now behave the same way on
   tablet and mobile (modifier .ds-biblio--slider): the cards are a swipeable row (the next one peeks) with the dots
   under it AND the two marine arrows of the "Point de départ" carousel, centred on the card image (196px high).
   "Notre bibliothèque" used to swipe on mobile only (up to 767px); it now swipes up to 1024px like "Le Cercle".
   When all the cards fit on the screen the arrows and the dots are hidden (class is-fit, set by the page script).
   Desktop is unchanged (three cards in a row). */
.ds-biblio-slider {
    position: relative;
}

@media (min-width: 767.51px) and (max-width: 1024.5px) {
    .ds-biblio--slider .ds-biblio-grid {
        display: flex;
        gap: 32px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin: 0 -48px 48px 0;
        padding: 0 48px 0 0;
        text-align: left;
    }

    .ds-biblio--slider .ds-biblio-grid::-webkit-scrollbar {
        display: none;
    }

    .ds-biblio--slider .ds-card-blog {
        flex: 0 0 320px;
        width: 320px;
        scroll-snap-align: start;
        text-align: center;
    }

    .ds-biblio--slider .ds-card-blog-content {
        padding-left: 24px;
        padding-right: 24px;
    }

    .ds-biblio--slider .ds-biblio-dots {
        display: flex;
        margin: 0 0 40px;
    }
}

@media (max-width: 1024.5px) {
    .ds-biblio-slider .ds-start-arrow {
        display: flex;
    }

    .ds-biblio-slider .ds-start-arrow-next {
        right: -40px; /* the row bleeds 48px to the right edge of the screen: 8px from that edge */
    }

    .ds-biblio.is-fit .ds-start-arrow,
    .ds-biblio.is-fit .ds-biblio-dots {
        display: none;
    }
}

@media (max-width: 767.5px) {
    .ds-biblio--cercle .ds-biblio-slider .ds-start-arrow-next {
        right: -12px;
    }

    .ds-biblio:not(.ds-biblio--cercle) .ds-biblio-slider .ds-start-arrow-next {
        right: -16px;
    }

    /* the library row has 56px of space under its cards on mobile: raise the arrows by half of it so they stay centred on the card */
    .ds-biblio:not(.ds-biblio--cercle) .ds-biblio-slider .ds-start-arrow {
        top: calc(50% - 28px);
    }
}

/* Update (2026-11-10), per request: the arrows of ALL the carousels (home "Point de départ" and "Le Cercle", page
   "La systémie" "Notre bibliothèque" and "Le Cercle") are now vertically centred on the card (middle of the row), a
   little lower than before, when they were on the middle of the card image. */
.ds-start-arrow {
    top: 50%;
}

/* Update (2026-11-10), per request, page "La systémie", desktop only (wider than 1024px): the "Conférences" and
   "Spectacle" blocks no longer put a tall photo next to the whole text (the photo stretched to the height of the long
   list, like a vertical rectangle). Now the photo is a small landscape picture (300px wide, as high as the title and
   the first paragraphs next to it):
   - Conférences: photo on the left; title, text and "Voici quelques thèmes..." on its right; then the list on two
     columns (6 + 4) under both; then the "Contactez-nous" button.
   - Spectacle: title and first paragraph on the left, photo on the right; then the long paragraph under both, full
     width; then the button.
   The photo is still the same file; it is cropped to fill its box. Tablet and mobile are unchanged. */
@media (min-width: 1024.51px) {
    .ds-confs .ds-confs-block {
        display: grid;
        grid-template-columns: 300px minmax(0, 1fr);
        column-gap: 60px;
        row-gap: 0;
        align-items: stretch;
    }

    .ds-confs .ds-confs-block.ds-lecole-block--reverse {
        grid-template-columns: minmax(0, 1fr) 300px;
    }

    .ds-confs .ds-confs-block .ds-lecole-text,
    .ds-confs .ds-confs-block .ds-confs-themes {
        display: contents;
    }

    .ds-confs .ds-confs-block .ds-lecole-img {
        min-height: 0;
        width: auto;
        flex: none;
        grid-column: 1;
        grid-row: 1 / span 3;
    }

    .ds-confs .ds-confs-block.ds-lecole-block--reverse .ds-lecole-img {
        grid-column: 2;
        grid-row: 1 / span 2;
    }

    /* text next to the photo */
    .ds-confs .ds-confs-block:not(.ds-lecole-block--reverse) .ds-lecole-title,
    .ds-confs .ds-confs-block:not(.ds-lecole-block--reverse) .ds-lecole-text > p,
    .ds-confs .ds-confs-block:not(.ds-lecole-block--reverse) .ds-confs-themes > p {
        grid-column: 2;
    }

    .ds-confs .ds-confs-block.ds-lecole-block--reverse .ds-lecole-title,
    .ds-confs .ds-confs-block.ds-lecole-block--reverse .ds-lecole-text > p:first-of-type {
        grid-column: 1;
    }

    .ds-confs .ds-confs-block.ds-lecole-block--reverse .ds-lecole-text > p:first-of-type {
        margin-bottom: 0;
    }

    /* the last paragraph next to the photo has no space under it (the space comes from the next element) */
    .ds-confs .ds-confs-block:not(.ds-lecole-block--reverse) .ds-confs-themes > p {
        margin-bottom: 0;
    }

    /* under the photo: full width */
    .ds-confs .ds-confs-block .ds-confs-list {
        grid-column: 1 / -1;
        margin-top: 28px;
        display: grid;
        grid-auto-flow: column;
        grid-template-rows: repeat(6, auto);
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 60px;
    }

    .ds-confs .ds-confs-block.ds-lecole-block--reverse .ds-lecole-text > p:nth-of-type(2) {
        grid-column: 1 / -1;
        margin: 28px 0 24px;
    }

    .ds-confs .ds-confs-block .ds-confs-cta {
        grid-column: 1 / -1;
        justify-self: start;
        margin-top: 28px;
    }

    .ds-confs .ds-confs-block.ds-lecole-block--reverse .ds-confs-cta {
        margin-top: 0;
    }
}

/* Spectacle photo on desktop: a little taller (135px) so "MOVIES" and "DRIVE-IN" stay readable in the crop; the extra
   height goes to the first paragraph's row, the title keeps its place. */
@media (min-width: 1024.51px) {
    .ds-confs .ds-confs-block.ds-lecole-block--reverse {
        grid-template-rows: auto minmax(0, 1fr) auto auto;
    }

    .ds-confs .ds-confs-block.ds-lecole-block--reverse .ds-lecole-img {
        min-height: 135px;
    }

    .ds-confs .ds-lecole-block--reverse .ds-lecole-img img {
        object-position: 85% 40%;
    }
}

/* Update (2026-11-10), per request: on mobile the email field of the "Souscrire à notre newsletter" block (page "La
   systémie") was only a thin line. The block stacks the field above the button, and a footer rule (flex: 1 1 0) gave
   the field a height of 0 in a column. The field now keeps its normal size, the same as the footer form's field
   (53px high, full width). */
@media (max-width: 767.5px) {
    .ds-news-form .ds-footer-form-input {
        flex: 0 0 auto;
        height: 53px;
        min-height: 53px;
        width: 100%;
    }
}

/* Update (2026-11-10), per request, page "La systémie": on desktop screens that are not much wider than the 1024px
   content column (about 1025px to 1100px), the "Conférences / Spectacle" band had no inner padding left and right: the
   photo, the text and the buttons touched the rounded edges of the band. The band now keeps 40px of padding on the
   left and right (same as on tablet), so the content never touches its edges. On wide screens nothing changes (the
   content column stays centred at 1024px). */
@media (min-width: 1024.51px) {
    .ds-confs {
        padding-left: 40px;
        padding-right: 40px;
    }
}

/* Update (2026-11-10), per request, page "Se former" (formations), section "Modules disponibles à la carte"
   (modifier .ds-modules-demo--slider): on tablet and mobile the cards no longer shrink to fit the width (on a
   tablet they got so narrow that "à partir de" and "Voir la formation" wrapped on two lines). Each card keeps a
   minimum width and its proportions (photo 180px high): 280px on tablet, at least 252px on mobile (82% of the
   screen otherwise). When the cards do not all fit, the row swipes, with the dots under it and the two marine
   arrows of the other carousels, on the photo. When they all fit (wide tablet) the arrows and the dots are
   hidden (class is-fit, set by the page script). Desktop is unchanged (three columns). */
.ds-modules-slider {
    position: relative;
}

@media (max-width: 1024.5px) {
    .ds-modules-demo--slider .ds-modules-grid {
        display: flex;
        gap: var(--ds-spacing-24);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .ds-modules-demo--slider .ds-modules-grid::-webkit-scrollbar {
        display: none;
    }

    .ds-modules-demo--slider .ds-module-card {
        flex: 0 0 280px;
        min-width: 252px;
        scroll-snap-align: start;
    }

    .ds-modules-demo--slider .ds-modules-dots {
        display: flex;
    }

    .ds-modules-slider .ds-start-arrow {
        display: flex;
        top: 110px; /* on the photo (180px high), a little below its middle, so the arrows never cover the title */
    }

    .ds-modules-demo--slider.is-fit .ds-start-arrow,
    .ds-modules-demo--slider.is-fit .ds-modules-dots {
        display: none;
    }
}

@media (max-width: 767.5px) {
    .ds-modules-demo--slider .ds-modules-grid {
        gap: var(--ds-spacing-16);
    }

    .ds-modules-demo--slider .ds-module-card {
        flex: 0 0 max(252px, min(82%, 320px)); /* 82% of the screen, but never narrower than 252px nor wider than 320px */
    }
}

/* Update (2026-11-10), per request: footer (all pages) - the line at the top of the footer and the line above the
   legal text ("© 2026 FSL – Fabulous Systemic Learning. Tous droits réservés.") are now marine (they were light grey),
   and the legal text is marine too (it was the dark text colour). */
.ds-footer-demo {
    border-top-color: var(--ds-marine);
}

.ds-footer-bottom {
    border-top-color: var(--ds-marine);
}

.ds-footer-bottom p {
    color: var(--ds-marine) !important;
}

/* Update (2026-11-10), per request, page "Le Cercle" (le-cercle): on tablet and mobile the photo of the cards now has
   about the same proportion as on desktop (320 x 196, i.e. 1.62 wide for 1 high). Before, it kept 196px on tablet
   (so almost square on a narrow card, 211 x 196 at 768px) and 126px on mobile (a thin strip, 340 x 126 on a phone and
   550 x 126 on a large phone). The height now follows the card width; on a wide single-column card it stops at 280px.
   Desktop is unchanged. */
@media (max-width: 1024.5px) {
    .ds-cp .ds-biblio-grid .ds-card-blog .ds-card-blog-img {
        position: relative;
        height: auto;
        aspect-ratio: 320 / 196;
        max-height: 280px;
    }

    .ds-cp .ds-biblio-grid .ds-card-blog .ds-card-blog-img img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }
}

/* Update (2026-11-10), per request, page "L'école" (a-propos), section "Équipe pédagogique" (.ds-team-demo--wide): the
   team cards were wide rectangles (492 x 203 on desktop: two cards per row; 460 x 203 at 1024px). They are now
   squarer, close to your capture (a card about 250-330px wide for about 220px high):
   - wider than 900px: three cards per row (about 325 x 225); the nine people fill three full rows;
   - 575px to 900px: two cards per row (the last, odd one is centred under them);
   - under 575px: one card per row.
   The card itself (picture, name, text, "Lire plus") is unchanged. */
.ds-team-demo--wide .ds-team-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.ds-team-demo--wide .ds-team-grid > .ds-team-card:last-child:nth-child(odd) {
    grid-column: auto;
    justify-self: stretch;
    width: auto;
}

@media (min-width: 574.51px) and (max-width: 899.5px) {
    .ds-team-demo--wide .ds-team-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ds-team-demo--wide .ds-team-grid > .ds-team-card:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        justify-self: center;
        width: calc((100% - 24px) / 2);
    }
}

@media (max-width: 574.5px) {
    .ds-team-demo--wide .ds-team-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    /* squarer on mobile: picture above the name, more room around the text */
    .ds-team-demo--wide .ds-team-card {
        padding: 28px 24px;
    }

    .ds-team-demo--wide .ds-team-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .ds-team-demo--wide .ds-team-avatar {
        flex: 0 0 80px;
        width: 80px;
        height: 80px;
    }
}

/* Update (2026-11-10), per request, block "Une école au cœur de Paris" (.ds-ecole-demo; used on a-propos, the cycle,
   formation and supervision detail pages): the two photos are now square (they were tall rectangles on desktop and
   wide banners on mobile) and are stacked one above the other, as in your capture.
   - desktop / tablet: one column of two square photos on the left, the text centred on the right;
   - mobile: the two photos first (one above the other), then the title, text and button. */
.ds-ecole-inner {
    grid-template-columns: 296px minmax(0, 1fr);
    grid-template-areas: "p1 text" "p2 text";
    column-gap: 40px;
    row-gap: 24px;
}

.ds-ecole-img,
.ds-ecole-img--2 {
    height: auto;
    aspect-ratio: 1 / 1;
}

.ds-ecole-text {
    align-self: center;
}

@media (max-width: 1024.5px) {
    .ds-ecole-inner {
        grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
        column-gap: 32px;
        row-gap: 20px;
    }

    .ds-ecole-img {
        height: auto;
    }
}

@media (max-width: 767.5px) {
    .ds-ecole-inner {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "p1" "p2" "text";
        row-gap: var(--ds-spacing-24);
    }

    .ds-ecole-img,
    .ds-ecole-img--2 {
        height: auto;
    }
}

/* Update (2026-11-10), per request, page "L'école" (a-propos), quote at the top: the dots under the quote are gone; a
   left and a right arrow now sit on either side of it (same marine oval + white arrow as the "back to top" button and
   the carousel arrows: 56x40 on desktop and tablet, 44x32 on mobile). They show the previous / next quote and loop
   (after the last quote comes the first). The quote area keeps the height of the longest quote so the page does not
   jump. */
.ds-lecole-quote--arrows {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

.ds-lecole-quote-list {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 480px;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ds-lecole-arrow {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: var(--ds-radius-full);
    background: var(--ds-marine);
    color: var(--ds-blanc);
    cursor: pointer;
    transition: box-shadow 300ms ease-out;
}

.ds-lecole-arrow svg {
    width: 22px;
    height: 22px;
}

.ds-lecole-arrow-prev svg {
    transform: rotate(90deg);
}

.ds-lecole-arrow-next svg {
    transform: rotate(-90deg);
}

.ds-lecole-arrow:hover,
.ds-lecole-arrow:focus-visible {
    box-shadow: 0px 4px 4px 0px #00000040;
}

.ds-lecole-arrow:focus-visible {
    outline: 2px solid var(--ds-carmin);
    outline-offset: 3px;
}

@media (max-width: 767.5px) {
    .ds-lecole-quote--arrows {
        gap: 12px;
    }

    .ds-lecole-quote-list {
        min-height: 72px;
    }

    .ds-lecole-arrow {
        width: 44px;
        height: 32px;
    }

    .ds-lecole-arrow svg {
        width: 18px;
        height: 18px;
    }
}

/* Update (2026-11-10), per request, page "L'école" (a-propos), arrows of the quote at the top: no more marine oval;
   they are now just a marine chevron with no background (still 56x40 / 44x32 clickable area). Hover and keyboard focus
   keep a light feedback (no shadow: the chevron gets slightly bigger, and the carmin focus ring stays). */
.ds-lecole-arrow {
    background: transparent;
    color: var(--ds-marine);
    box-shadow: none;
}

.ds-lecole-arrow svg {
    width: 28px;
    height: 28px;
    transition: transform 200ms ease-out;
}

.ds-lecole-arrow-prev:hover svg,
.ds-lecole-arrow-prev:focus-visible svg {
    transform: rotate(90deg) scale(1.15);
}

.ds-lecole-arrow-next:hover svg,
.ds-lecole-arrow-next:focus-visible svg {
    transform: rotate(-90deg) scale(1.15);
}

.ds-lecole-arrow:hover,
.ds-lecole-arrow:focus-visible {
    box-shadow: none;
}

@media (max-width: 767.5px) {
    .ds-lecole-arrow svg {
        width: 24px;
        height: 24px;
    }
}

/* Update (2026-11-10), per request, page "Supervision" detail (detail-supervision): the "Calendrier" block now shows three
   placeholder date cards (.ds-supcal, dates copied from your capture: "Supervision collective présentiel G1 2027",
   "Supervision présentiel G2 2027", "Supervision collective visio 2027") instead of the single line "Prochaine supervision
   collective : XX/XX/XXXX", and sits between "Une école au cœur de Paris" and "Portrait des superviseurs" (it was before the
   école block). Three cards on one row from 768px, one per row on mobile; white card, ocre-3 border, 16px radius, soft
   shadow, marine bold title and a bulleted list of dates. The "Je postule" button stays under the cards. */
.ds-supcal {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ds-spacing-24);
    align-items: stretch;
}

.ds-supcal-card {
    box-sizing: border-box;
    padding: 24px;
    background: var(--ds-blanc);
    border: 1px solid var(--ds-ocre-3);
    border-radius: var(--ds-radius-16);
    box-shadow: 0 2px 6px rgba(16, 24, 40, .18);
}

.ds-supcal-title {
    margin: 0 0 var(--ds-spacing-16);
    font-weight: 700;
}

.ds-supcal-list {
    margin: 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

@media (max-width: 1024.5px) {
    .ds-supcal {
        gap: var(--ds-spacing-16);
    }

    .ds-supcal-card {
        padding: 20px 16px;
    }
}

@media (max-width: 767.5px) {
    .ds-supcal {
        grid-template-columns: minmax(0, 1fr);
    }

    .ds-supcal-card {
        padding: 24px 20px;
    }
}

.ds-supcal + .ds-cal-cta {
    margin-top: var(--ds-spacing-32);
}

/* Update (2026-11-10), per request, footer newsletter form: the email field now has a marine border (it was the pale grey
   outline). Only the field changes: the divider lines, the button and the other newsletter forms (the page bands
   .ds-news-form) are untouched. */
.ds-footer-demo .ds-footer-form-input {
    border-color: var(--ds-marine);
}

/* Update (2026-11-10), per request, footer (all pages): the two lines are removed, the one at the top of the footer and the
   one above the legal text. The spacing is unchanged and the legal text stays marine. */
.ds-footer-demo {
    border-top: none;
}

.ds-footer-bottom {
    border-top: none;
}