/* ═══════════════════════════════════════════════════════════════
   TRAVAILLER AVEC MOI — work.css
   Chargé uniquement sur le template "Travailler avec moi"
═══════════════════════════════════════════════════════════════ */

/* ── CONTENEUR DE PAGE ── */
.ldk-page-container {
    background-color: var(--bg-color);
}

.ldk-page-content {
    padding-top: 0;
}

.ldk-work-wrapper {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 40px 100px;
}

/* ── TITRE ── */
.ldk-work-page-title {
    /* Typographie : rôle « titre de page » — voir typographie.css */
    color: #ff1400 !important;
    padding-top: 120px;
    margin-bottom: 70px;
}

/* ── INTRO DEUX COLONNES ── */
/* La grille elle-même est le composant .ldk-intro-grid (main.css),
   partagé avec la page À propos. Rien de spécifique à déclarer ici. */

.ldk-work-intro-label {
    /* Typographie : rôle « surtitre » — voir typographie.css */
    color: #ff1400 !important;
    padding-top: 4px;
}

.ldk-work-intro-text p {
    /* Typographie : rôle « texte d'introduction » — voir typographie.css */
    color: #ff1400 !important;
    margin-bottom: 18px;
}

.ldk-work-intro-text p:last-child {
    margin-bottom: 0;
}

/* ══════════════════════════════════════════════════════════════
   STACKING CARDS — ARCHITECTURE « PIN TRACK »

   Pourquoi pas du position:sticky par carte ?
   Une carte sticky se décolle quand SON bas atteint le bas du
   conteneur. Comme la carte 2 est plus basse dans le flux que la
   carte 1 tout en ayant la même hauteur, elle se décollait AVANT
   la carte 1 → décrochage. Et comme les cartes gardaient leur
   hauteur DOM complète, le corps de la carte 2 réapparaissait
   dès que la carte 3 se réduisait en tiroir.

   Nouvelle architecture — 3 niveaux :

   .ldk-stack-section   → « track » : réserve la hauteur de scroll
                          (height fixée en JS)
   .ldk-stack-pin       → un SEUL élément sticky : toute la pile
                          se libère donc d'un bloc, sans décalage
   .ldk-stack-card      → position:absolute, déplacée en
                          translate3d par le JS

   Comme les cartes sont absolues, changer leur hauteur n'a AUCUN
   effet sur la mise en page : plus de boucle de rétroaction, plus
   de spacer de compensation. Le mapping scroll → translation est
   1:1, le rendu reste donc celui d'un scroll naturel.

   État par défaut (mobile, sans JS, prefers-reduced-motion) :
   flux normal, cartes ouvertes → contenu toujours lisible et
   indexable.
══════════════════════════════════════════════════════════════ */

/* ── TRACK ── */
.ldk-stack-section {
    position: relative;

    /* Espace entre les cartes dans l'état « en flux ».
       Source de vérité unique : le JS mesure les positions réelles. */
    --ldk-card-gap: 64px;

    /* ── RÉGLAGES DE L'EFFET DE SUPERPOSITION ──────────────────
       Le JS écrit --ldk-stack-depth sur chaque carte : le nombre de
       cartes empilées par-dessus elle (0 = carte de devant).
       Tout l'effet de profondeur se règle ici.
    ─────────────────────────────────────────────────────────── */

    /* Assombrissement du rouge par niveau d'enfouissement.
       C'est l'indice de recul principal. 0% pour le désactiver. */
    --ldk-stack-shade: 7%;

    /* Resserrement latéral par niveau — les cartes du fond sont
       plus étroites, comme un jeu de cartes vu de face.
       ATTENTION : modifie la largeur utile du header. Au-delà de
       ~10px, vérifie que les badges ne passent pas à la ligne sur
       les écrans étroits (sinon la hauteur mesurée change).
       0px = désactivé, c'est l'encoche d'angle qui porte l'effet. */
    --ldk-stack-inset: 0px;

    /* Padding vertical du bandeau, dans ses deux états.
       Le JS interpole entre les deux au fil du scroll et atteint la valeur
       compacte pile au moment où la carte passe au rouge.
       Mettre les deux à la même valeur désactive le resserrement.
       Chaque px gagné ici est gagné trois fois sur la hauteur de la pile,
       donc autant de place rendue à la dernière carte. */
    --ldk-head-pad-open: 25px;
    --ldk-head-pad-shut: 18px;

    /* Ombre projetée vers le HAUT : les cartes montent par le bas,
       chacune s'ombre donc sur celle qui la précède.
       C'est le seul indice de superposition pendant la MONTÉE — à ce
       moment-là les deux cartes sont encore crème sur crème, la nuance
       de rouge ne joue pas encore. C'est donc elle qu'il faut ajuster
       si l'effet manque de présence au scroll. `none` = rendu 100% plat. */
    --ldk-stack-shadow: 0 -8px 22px -8px rgba(120, 12, 0, 0.34);
}

/* ── ZONE ÉPINGLÉE ── */
.ldk-stack-pin {
    position: static;
}

/* ── LA CARTE ── */
.ldk-stack-card {
    position: relative;
    border-radius: 16px;
    border: 1.5px solid #ff1400;
    background-color: var(--bg-color);
    overflow: hidden;
    margin-bottom: var(--ldk-card-gap);

    /* Jeton du nuancier, et non plus 0,4s : la même propriété sert au
       fondu du fond ET au passage au rouge de la carte qui se replie.
       Une seule durée possible, donc — et c'est celle du fond qui
       commande, pour que rien ne se désynchronise au changement de
       nuance. Le repli est d'autant plus doux.
       La bordure suit : sur une carte fermée, c'est ELLE qui porte
       var(--bg-color) pendant que le fond est rouge. */
    transition: background-color var(--ldk-transition-fond),
                border-color     var(--ldk-transition-fond);
}

.ldk-stack-card:last-child {
    margin-bottom: 0;
}

/* ── MODE ÉPINGLÉ (activé par le JS, desktop uniquement) ── */
.ldk-stack-section.is-pinned .ldk-stack-pin {
    position: sticky;
    top: var(--ldk-stack-offset, 82px);
    /* height : fixée en JS = hauteur de la pile entièrement fermée */
}

.ldk-stack-section.is-pinned .ldk-stack-card {
    position: absolute;
    top: 0;
    margin: 0;
    /* transform + z-index : pilotés en JS */
    will-change: transform, height;
    /* Isole le recalcul de mise en page à l'intérieur de la carte :
       la hauteur du corps change à chaque frame, autant éviter que
       le navigateur remonte l'arbre.
       (layout seul, pas « paint » : sinon l'ombre serait rognée.) */
    contain: layout;

    /* Resserrement latéral selon la profondeur.
       La transition ne se déclenche qu'aux 2 ou 3 changements de
       niveau, pas à chaque frame. */
    left:  calc(var(--ldk-stack-depth, 0) * var(--ldk-stack-inset));
    right: calc(var(--ldk-stack-depth, 0) * var(--ldk-stack-inset));

    /*box-shadow: var(--ldk-stack-shadow);*/

    /* Fond et bordure : jeton du nuancier, comme au repos.
       Le resserrement latéral garde sa propre durée : il ne dépend pas
       de la couleur, il accompagne le changement de profondeur. */
    transition: background-color var(--ldk-transition-fond),
                border-color     var(--ldk-transition-fond),
                left             0.45s cubic-bezier(0.4, 0, 0.2, 1),
                right            0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── PASSE DE MESURE ──
   Le JS rebascule brièvement en flux normal pour lire les hauteurs
   réelles (init, resize, chargement des polices). Lecture et
   restauration ont lieu dans la même frame : aucun paint
   intermédiaire, donc invisible à l'écran. */
.ldk-stack-section.is-measuring .ldk-stack-pin {
    position: static !important;
    height: auto !important;
}

.ldk-stack-section.is-measuring .ldk-stack-card {
    position: relative !important;
    transform: none !important;
    margin: 0 0 var(--ldk-card-gap) !important;
    transition: none !important;
    /* Pleine largeur obligatoire : on mesure la hauteur des headers,
       un resserrement latéral résiduel pourrait les faire passer à la
       ligne et fausser toutes les hauteurs de la pile. */
    left: 0 !important;
    right: 0 !important;
}

.ldk-stack-section.is-measuring .ldk-stack-card:last-child {
    margin-bottom: 0 !important;
}

.ldk-stack-section.is-measuring .ldk-card-content-wrapper {
    height: auto !important;
}

/* ── ÉTAT FERMÉ ──────────────────────────────────────────────
   Aucune propriété qui touche à la géométrie : la largeur de
   bordure reste à 1.5px pour que la hauteur « fermée » de la carte
   ne bouge pas d'un pixel entre ouvert et fermé (sinon la pile
   tremble d'un pixel à chaque bascule).
─────────────────────────────────────────────────────────────── */
.ldk-stack-card.is-collapsed {
    /* Repli pour les navigateurs sans color-mix() */
    background-color: #ff1400;
    border-color: var(--bg-color);
    box-shadow: inset 0 -19px 10px rgba(0, 0, 0, 0.2);
}

.is-collapsed#ldk-card-3 {
    box-shadow: none;
}

.ldk-stack-card.is-overlapped {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.ldk-stack-card.is-collapsed .ldk-card-icon {
    color: var(--bg-color) !important;
}

.ldk-stack-card.is-collapsed .ldk-card-title,
.ldk-stack-card.is-collapsed .ldk-card-dash,
.ldk-stack-card.is-collapsed .ldk-card-subtitle {
    color: var(--bg-color) !important;
}

.ldk-stack-card.is-collapsed .ldk-card-tags .cat-badge {
    color: var(--bg-color) !important;
    border-color: var(--bg-color) !important;
}

/* ── CORPS DE CARTE ───────────────────────────────────────
   La hauteur est écrite en px par le JS (tiroir de la dernière
   carte + fermeture des cartes recouvertes).
   Pas de transition CSS : la fermeture d'une carte recouverte
   doit être instantanée, dans la même frame que le déplacement,
   sinon on aperçoit son bas dépasser.
─────────────────────────────────────────────────────────── */
.ldk-card-content-wrapper {
    overflow: hidden;
}

/* min-height : toutes les cartes ouvertes à la hauteur de la plus haute.
   Les trois corps n'ont pas la même longueur de texte ; sans ça, la pile
   présente trois hauteurs différentes, et l'écart se voit d'autant plus
   que les cartes se recouvrent. Le JS mesure la plus haute et écrit
   --ldk-corps-min sur .ldk-stack-section. Hors pile (mobile, mouvement
   réduit), la variable n'existe pas et chaque carte reprend sa hauteur
   naturelle. */
.ldk-card-content-inner {
    overflow: hidden;
    min-height: var(--ldk-corps-min, 0px);
}

.ldk-card-body {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 40px;
    padding: 5px 35px 20px;
}

/* ── HEADER — toujours visible ────────────────────────────────
   Deux enfants directs, sur une ligne :
     .ldk-card-icon         l'icône florale, largeur fixe
     .ldk-card-title-group  colonne : titre au-dessus, badges dessous
─────────────────────────────────────────────────────────────── */
/* Le padding vertical est piloté par le JS entre --ldk-head-pad-open et
   --ldk-head-pad-shut (déclarés sur .ldk-stack-section). Le bandeau se
   resserre à mesure que la carte suivante le recouvre, et atteint sa
   valeur compacte pile quand la carte passe au rouge.
   Sans JS (mobile, mouvement réduit), la variable n'est jamais écrite et
   c'est la valeur ouverte qui s'applique. */
.ldk-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: var(--ldk-head-pad, 25px) 30px;
    box-sizing: border-box;
}

/* Le bandeau est cliquable : il ramène sa carte à quai, ouverte. Le
   curseur ne l'annonce que quand la pile est active — hors pile, le clic
   ne fait rien et le curseur ne doit rien promettre. */
.ldk-stack-section.is-pinned .ldk-card-header {
    cursor: pointer;
}

/* Le déclencheur clavier, inséré par le JS à l'intérieur du <h2> quand la
   pile s'active : le titre reste un titre, et il y a un vrai bouton
   dedans. Tout hérite du h2 — c'est lui qui porte le rôle typographique
   et la couleur, y compris son passage au crème à la fermeture. */
.ldk-card-declencheur {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    text-align: left;
    cursor: pointer;
}

.ldk-card-declencheur:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
    border-radius: 2px;
}

/* Icône florale — couleur via currentColor sur le <path>.
   Ne pas retirer `color` : le SVG hériterait alors de la couleur de
   texte du document et l'icône passerait au noir quand la carte est
   ouverte. C'est .is-collapsed qui la repasse en crème. */
.ldk-card-icon {
    flex-shrink: 0;
    width: 45px;
    height: 45px;
    color: #ff1400;
    transition: color 0.4s ease;
}

.ldk-card-title-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.ldk-card-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Titre + dash + sous-titre sur une même ligne */
.ldk-card-title-text {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    min-width: 0;
}

.ldk-card-title {
    /* Typographie : rôle « titre de section » — voir typographie.css */
    color: #ff1400 !important;
    transition: color 0.4s ease;
    white-space: nowrap;
}

.ldk-card-dash {
    font-family: 'Philosopher', sans-serif !important;
    font-size: 1.1rem;
    font-weight: 400;
    color: #ff1400 !important;
    transition: color 0.4s ease;
    padding: 0 6px;
    white-space: nowrap;
}

.ldk-card-subtitle {
    font-family: 'Philosopher', sans-serif !important;
    font-style: italic;
    font-size: 1.1rem;
    font-weight: 400;
    color: #ff1400 !important;
    transition: color 0.4s ease;
    white-space: nowrap;
}

/* ── TAGS : on étend le style cat-badge existant dans ce contexte ── */
.ldk-card-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
    flex-shrink: 0;
}

.ldk-card-tags .cat-badge {
    white-space: nowrap;
    color: #ff1400 !important;
    transition: color 0.4s ease, border-color 0.4s ease;
}

/* Colonne gauche */
.ldk-card-left {}

.ldk-card-lead {
    font-size: 0.9rem;
    line-height: 1.5;
    font-weight: 500;
    margin-bottom: 15px;
    color: #ff1400 !important;
}

.ldk-card-desc {
    font-size: 0.8rem;
    line-height: 1.5;
    font-weight: 300;
    color: #ff1400 !important;
}

/* Colonne droite */
.ldk-card-info-block {
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid rgba(255, 20, 0, 1);
}

.ldk-card-info-block:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

/* ── OPTION MESURÉE — blocs d'info sur deux rangs ─────────────
   Constat, mesuré au navigateur sur les trois cartes : la colonne
   de droite est TOUJOURS la plus haute (284 à 342 px contre 113 à
   212 px à gauche). C'est donc elle, et elle seule, qui fixe la
   hauteur de la carte — le vide sous le texte de gauche, c'est
   exactement la hauteur en trop.

   En rangeant les trois blocs sur deux rangs plutôt qu'en pile,
   sans toucher à la proportion des colonnes :
       1280 px : 411 px -> 370 px   (les 3 cartes : 1157 -> 1019)
        900 px : 431 px -> 407 px   (les 3 cartes : 1234 -> 1090)

   Pour l'activer : retirer les deux lignes de commentaire qui
   encadrent le bloc ci-dessous.

.ldk-card-right {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 28px;
    align-content: start;
}

.ldk-card-info-block {
    margin-bottom: 0;
}
── fin de l'option ─────────────────────────────────────────── */

.ldk-info-title {
    /* Typographie : rôle « titre de bloc » — voir typographie.css */
    margin-bottom: 8px;
    color: #ff1400 !important;
}

.ldk-info-text {
    font-size: 0.8rem;
    line-height: 1.5;
    font-weight: 300;
    color: #ff1400 !important;
}

/* ── CTA FINAL ── */
.ldk-work-cta {
    position: relative;
    text-align: center;
    padding: 180px 0 100px;
}

.ldk-work-cta-text {
    font-family: 'Philosopher', sans-serif !important;
    font-size: 1.8rem;
    font-weight: 400;
    font-style: italic;
    line-height: 1.4;
    margin-bottom: 34px;
    color: #ff1400 !important;
}

.ldk-work-cta-link {
    display: inline-block;
    border: 1.5px solid #ff1400;
    padding: 13px 34px;
    border-radius: 30px;
    font-family: 'Philosopher', sans-serif !important;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    font-size: 0.78rem;
    text-decoration: none !important;
    color: #ff1400 !important;
    transition: background-color 0.32s ease, color 0.32s ease;
}

.ldk-work-cta-link:hover {
    background-color: #ff1400;
    color: var(--bg-color) !important;
}

/* ── RESPONSIVE TABLETTE ── */
@media (max-width: 1024px) {
    .ldk-work-wrapper {
        padding: 0 40px 100px;
    }

    /* Voir .ldk-intro-grid dans responsive.css */
    

    /* Mesuré au navigateur sur les trois cartes, de 800 à 1024 px :
       à colonnes égales, la carte la plus haute fait 431 px ; avec la
       proportion retenue en desktop, 411 px. On garde donc la même
       proportion partout, il n'y a aucune raison d'en changer ici. */
    .ldk-card-body {
        grid-template-columns: 1fr 1.3fr;
        gap: 32px;
    }


    #ldk-services-label {
    margin-bottom: 40px;
}

}

/* ── RESPONSIVE MOBILE ── */
@media (max-width: 768px) {
    .ldk-work-wrapper {
        padding: 0 40px 80px;
    }

    .ldk-work-page-title {
        padding-top: 40px;
        margin-bottom: 40px;
    }

    /* Voir .ldk-intro-grid dans responsive.css */

    /* Mobile : aucun épinglage, retour au flux normal.
       Le JS ne s'active pas sous 768px, mais on neutralise
       les règles au cas où la fenêtre est redimensionnée. */
    .ldk-stack-section {
        height: auto !important;
        --ldk-card-gap: 20px;
    }

    .ldk-stack-section .ldk-stack-pin {
        position: static !important;
        height: auto !important;
    }

    .ldk-stack-card {
        position: relative !important;
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        margin: 0 0 40px !important;
        will-change: auto;
        box-shadow: none !important;
    }

    .ldk-stack-card:last-child {
        margin-bottom: 0 !important;
    }

    .ldk-card-content-wrapper {
        height: auto !important;
    }


    /* Forcer toutes les cartes ouvertes en mobile */
    .ldk-stack-card.is-collapsed {
        background-color: var(--bg-color);
        border-color: #ff1400;
    }

    .ldk-stack-card.is-overlapped {
        border-bottom-left-radius: 16px;
        border-bottom-right-radius: 16px;
    }

    .ldk-stack-card.is-collapsed .ldk-card-icon {
        color: #ff1400 !important;
    }

    .ldk-stack-card.is-collapsed .ldk-card-title,
    .ldk-stack-card.is-collapsed .ldk-card-dash,
    .ldk-stack-card.is-collapsed .ldk-card-subtitle {
        color: #ff1400 !important;
    }

    .ldk-stack-card.is-collapsed .ldk-card-tags .cat-badge {
        color: #ff1400 !important;
        border-color: #ff1400 !important;
    }

    .ldk-card-body {
        grid-template-columns: 1fr;
        gap: 26px;
        padding: 22px 20px 28px;
    }

    /* ── HEADER DE CARTE : tout s'empile et se centre ──────────────
       Le centrage se règle sur l'axe TRANSVERSAL (align-items), pas sur
       l'axe principal (justify-content). En direction column, l'axe
       principal est vertical : justify-content: center n'y déplaçait
       donc rien horizontalement.

       Et surtout : .ldk-card-title-group porte align-items: flex-start
       en desktop. Sans l'écraser ici, chacun de ses enfants restait une
       boîte calée à gauche et large de son seul contenu. Un text-align:
       center à l'intérieur d'une boîte déjà collée à gauche ne se voyait
       que lorsque le texte passait à la ligne : c'est ce qui produisait
       le décalage du sous-titre du Studio, le seul assez long pour
       revenir à la ligne. */
    .ldk-card-header {
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 14px;
        padding: 20px;
    }

    .ldk-card-icon {
        width: 38px;
        height: 38px;
    }

    .ldk-card-title-group {
        align-items: center;
        width: 100%;
        gap: 15px;
    }

    .ldk-card-title-text {
        flex-direction: column;
        align-items: center;
        gap: 4px;
    }

    /* Le tiret séparait le titre du sous-titre sur une même ligne.
       Empilés, il se retrouverait seul au milieu de sa propre ligne. */
    .ldk-card-dash {
        display: none;
    }

    /* nowrap est utile en desktop, où titre et sous-titre tiennent sur
       une ligne. Sur un téléphone il forcerait un débordement. */
    .ldk-card-title,
    .ldk-card-subtitle {
        white-space: normal;
        text-align: center;
    }

    .ldk-card-tags {
        justify-content: center;
    }

    .ldk-work-cta-text {
        font-size: 1.4rem;
    }

    .ldk-services {
    margin-top: 60px !important;
}
}

/* ── ACCESSIBILITÉ : mouvement réduit ──
   Le JS n'active pas l'épinglage dans ce cas ; ces règles ne sont
   qu'un filet de sécurité si la préférence change en cours de session. */
@media (prefers-reduced-motion: reduce) {
    .ldk-stack-section {
        height: auto !important;
    }

    .ldk-stack-section .ldk-stack-pin {
        position: static !important;
        height: auto !important;
    }

    .ldk-stack-card {
        position: relative !important;
        transform: none !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 0 var(--ldk-card-gap) !important;
        transition: none;
        box-shadow: none !important;
    }

    .ldk-stack-card:last-child {
        margin-bottom: 0 !important;
    }

    .ldk-card-content-wrapper {
        height: auto !important;
    }
}

.ldk-services {
    margin-top: 120px;
}

.ldk-services-label {
    /* Typographie : rôle « surtitre » — voir typographie.css */
    color: #ff1400 !important;
    margin-bottom: 10px;
}

/* ── TITRES ── */
.ldk-service-title {
    /* Typographie : rôle « titre large » — voir typographie.css */
    color: #ff1400 !important;
    margin-bottom: 18px;
}

.no-cut {
  white-space: nowrap;
}

/* Le bouton ne doit rien apporter visuellement : il n'est là que
   pour le clavier et l'accessibilité. */
.ldk-service-trigger {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
    cursor: default;
}

/* main.css impose Sono à tous les <span> en !important : il faut
   donc redéclarer Philosopher ici, sinon l'intitulé retombe en Sono.

   Le titre se replie librement dans sa colonne : pas de nowrap, et
   break-word en garde-fou pour un mot plus large que la colonne. */
.ldk-service-name {
    display: block;
    font-family: 'Philosopher', sans-serif !important;
    overflow-wrap: break-word;
}

/* ── PANNEAU DE CONTENU ── */
.ldk-service-panel {
    margin-bottom: 60px;
}

.ldk-service-desc {
    /* Typographie : rôle « texte courant » — voir typographie.css */
    color: #ff1400 !important;
    margin-bottom: 28px;
    max-width: 46ch;
}

/* Le thème pose une puce ✤ sur tous les <li> (main.css) : on la
   neutralise ici, la liste des prestations se lit mieux nue. */
.ldk-service-list li::before {
    content: none;
}

.ldk-service-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ldk-service-list li {
    padding-left: 0;
    margin-bottom: 0;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 2;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #ff1400 !important;
}

/* ── LES MOTS DÉCOUPÉS PAR LE JS ──
   Le découpage mot à mot enveloppe chaque mot dans un <span>, et
   main.css cible `span` directement (font-family Sono, weight 300).
   Une règle qui s'applique à l'élément l'emporte toujours sur ce
   qu'il hérite de son parent : sans ce rappel, les <li> et le
   paragraphe reprendraient le style du thème dès que le JS passe.
   On force donc chaque mot à hériter de son bloc d'origine. */
.ldk-services .ldk-word {
    font-family: inherit !important;
    font-weight: inherit;
    letter-spacing: inherit;
}

/* ═══ ÉTAT INTERACTIF ═══════════════════════════════════════ */

@media (min-width: 769px) {

    .ldk-services.is-interactive .ldk-services-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: auto auto auto;
        column-gap: 80px;
        align-items: center;
    }

    /* display: contents fait disparaître la boîte de l'article :
       le titre et le panneau deviennent eux-mêmes des cellules de
       la grille, ce qui permet de les envoyer dans deux colonnes
       différentes tout en gardant un balisage sémantique groupé. */
    .ldk-services.is-interactive .ldk-service {
        display: contents;
    }

    .ldk-services.is-interactive .ldk-service-title {
        grid-column: 1;
        margin-bottom: 0;
        padding: 10px 0;
        opacity: 0.4;
        font-size: clamp(1.4rem, 2.2vw, 1.8rem);
        transition: font-size 0.5s ease, opacity 0.5s ease;
    }

    .ldk-services.is-interactive .ldk-service:nth-child(1) .ldk-service-title { grid-row: 1; }
    .ldk-services.is-interactive .ldk-service:nth-child(2) .ldk-service-title { grid-row: 2; }
    .ldk-services.is-interactive .ldk-service:nth-child(3) .ldk-service-title { grid-row: 3; }

    .ldk-services.is-interactive .ldk-service.is-active .ldk-service-title {
        opacity: 1;
        font-size: clamp(2.2rem, 4vw, 3.2rem);
        padding: 22px 0;
    }

    /* ── POURQUOI max-width EN ch ──
       Le titre actif grandit de 1.8rem à 3.2rem. Si la largeur de
       repli est fixe (px, rem, %), le texte tient sur une ligne au
       début de la transition et bascule sur deux au milieu : la
       hauteur de la ligne saute alors d'un coup et pousse les
       titres suivants. C'est ce décrochage que l'on voyait.

       L'unité ch est relative à la police : la largeur de repli
       grandit exactement au même rythme que le texte, donc le
       nombre de lignes ne change JAMAIS pendant l'animation. La
       hauteur varie continûment, le mouvement redevient fluide.

       14ch = deux lignes pour les trois intitulés. C'est la valeur
       à ajuster si un titre se replie mal — en gardant à l'esprit
       qu'il faut le même nombre de lignes dans les deux états. */
    .ldk-services.is-interactive .ldk-service-name {
        max-width: 14ch;
    }

    .ldk-services.is-interactive .ldk-service-trigger {
        cursor: pointer;
    }

    /* Survol : uniquement sur les services non sélectionnés. Le
       service actif est déjà à pleine opacité, l'assombrir au
       passage de la souris laisserait croire qu'il reste à activer. */
    .ldk-services.is-interactive .ldk-service:not(.is-active) .ldk-service-trigger:hover {
        opacity: 0.75;
    }

    .ldk-services.is-interactive .ldk-service.is-active .ldk-service-trigger {
        cursor: default;
    }

    .ldk-services.is-interactive .ldk-service-trigger:focus-visible {
        outline: 1px solid #ff1400;
        outline-offset: 6px;
    }

    /* ── PANNEAUX SUPERPOSÉS ──
       Tous dans la même cellule : la colonne se dimensionne une
       fois sur le plus long et ne bouge plus.
       visibility (et non display) pour garder la hauteur réservée
       et rester hors de l'ordre de tabulation quand c'est masqué. */
    .ldk-services.is-interactive .ldk-service-panel {
        grid-column: 2;
        grid-row: 1 / -1;
        align-self: center;
        margin-bottom: 0;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s ease, visibility 0.2s ease;
    }

    .ldk-services.is-interactive .ldk-service.is-active .ldk-service-panel {
        opacity: 1;
        visibility: visible;
    }

    /* ── APPARITION MOT À MOT ──
       Le rang de chaque mot est posé une fois par le JS dans --w ;
       le décalage en cascade est ensuite purement CSS. Le navigateur
       n'a plus qu'à composer des opacités : rien à recalculer.
       L'animation se rejoue à chaque fois que .is-active revient
       sur le groupe. */
    .ldk-services.is-interactive .ldk-service.is-active .ldk-word {
        animation: ldk-word-in 0.4s ease both;
        animation-delay: calc(var(--w, 0) * 22ms);
    }
}

@keyframes ldk-word-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── ACCESSIBILITÉ : mouvement réduit ──
   Le JS ne pose pas .is-interactive dans ce cas ; filet de sécurité
   si la préférence change en cours de session. */
@media (prefers-reduced-motion: reduce) {
    .ldk-services .ldk-service-panel {
        opacity: 1 !important;
        visibility: visible !important;
        transition: none !important;
    }

    .ldk-services .ldk-word {
        animation: none !important;
        opacity: 1 !important;
    }

    .ldk-services .ldk-service-title {
        transition: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   PORTE D'ENTRÉE — L'AUDIT
   ═══════════════════════════════════════════════════════════
   Bande posée entre la pile de cartes et la section Services.
   Elle reprend le cadre des cartes (16px de rayon, filet rouge
   de 1.5px) : l'audit appartient visuellement à la même
   famille que les trois offres, il en est la porte d'entrée. */

.ldk-audit {
    margin-top: 120px;
    border-radius: 16px;
    border: 1.5px solid #ff1400;
    background-color: var(--bg-color);
    color: #ff1400;

    /* Sans cette ligne, le bloc changeait de couleur INSTANTANÉMENT au
       clic sur le nuancier, pendant que la page mettait 0,6s : l'audit
       arrivait à la nouvelle couleur bien avant son fond, et le
       décalage se voyait. Même jeton que le fond de page, donc même
       durée et même courbe — les deux avancent ensemble. */
    transition: background-color var(--ldk-transition-fond);
}

.ldk-audit-inner {
    display: grid;
    grid-template-columns: 1fr minmax(280px, 360px);
    gap: 60px;
    align-items: center;
    padding: 56px 48px;
}

/* ── Colonne de gauche ──
   Le surtitre porte la classe de rôle .ldk-surtitre dans le HTML :
   la typographie vient donc de typographie.css, comme pour « Trois
   façons de travailler ensemble » et « Services ». Ne rien
   redéclarer ici, sinon ce bloc dérive du reste de la page. */
.ldk-audit-surtitre {
    /* Typographie : rôle « surtitre » — voir typographie.css */
    color: #ff1400 !important;
    margin-bottom: 16px;
}

.ldk-audit-title {
    /* Typographie : rôle « titre large » — voir typographie.css */
    font-family: 'Philosopher', sans-serif !important;
    font-size: var(--ldk-fs-titre-large);
    color: #ff1400 !important;
    margin-bottom: 20px;
}

.ldk-audit-desc {
    /* Typographie : rôle « texte » — voir typographie.css */
    font-family: 'Sono', sans-serif !important;
    font-size: var(--ldk-fs-texte);
    line-height: 1.7;
    max-width: 62ch;
}

/* ── Colonne de droite ──
   Le prix et la déduction restent dans la même colonne : c'est la
   phrase de déduction qui rend le prix acceptable, elle ne doit
   jamais s'en détacher. */
.ldk-audit-prix {
    font-family: 'Philosopher', sans-serif !important;
    font-size: 3rem;
    line-height: 1;
    margin-bottom: 14px;
}

.ldk-audit-ht {
    font-family: 'Sono', sans-serif !important;
    font-size: var(--ldk-fs-surtitre);
    letter-spacing: 0.08em;
    opacity: 0.7;
}

.ldk-audit-deduction {
    font-family: 'Sono', sans-serif !important;
    font-size: var(--ldk-fs-texte);
    line-height: 1.6;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 20, 0, 0.3);
    margin-bottom: 26px;
}

.ldk-audit-lien {
    display: inline-block;
    font-family: 'Sono', sans-serif !important;
    font-size: var(--ldk-fs-surtitre);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #ff1400 !important;
    background-color: transparent;
    text-decoration: none;
    padding: 14px 26px;
    border: 1.5px solid #ff1400;
    border-radius: 30px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* La couleur de survol est écrite en dur plutôt qu'en var(--bg-color) :
   la variable est repeinte ailleurs sur le site, et le texte du bouton
   disparaissait sur certaines pages. Le !important répond à celui posé
   sur la couleur au repos, sans quoi la règle de survol ne gagne pas. */
.ldk-audit-lien:hover,
.ldk-audit-lien:focus-visible {
    background-color: #ff1400;
    color: #eeeae2 !important;
}

.ldk-audit-lien:focus-visible {
    outline: 2px solid #ff1400;
    outline-offset: 3px;
}

/* ── Petit écran : une colonne, le prix passe sous le texte ── */
@media (max-width: 768px) {
    .ldk-audit {
        margin-top: 70px;
    }

    .ldk-audit-inner {
        grid-template-columns: 1fr;
        gap: 34px;
        padding: 40px 24px;
    }

    .ldk-audit-prix {
        font-size: 2.4rem;
    }
}