/*
 * MOD-IA 2026-09-02 : blocs déplacés tel quels depuis assets/css/style.css
 * dans le cadre du découpage CSS de la charte graphique. Aucune valeur n'a
 * changé ; des renvois restent aux anciens emplacements dans style.css.
 *
 * Famille « Cartes » : les surfaces qui regroupent un contenu et mènent quelque
 * part — .tdb-card-commercant, .tdb-prestation-card, .step-card.
 * Voir le tableau de routage dans la charte graphique (page-charte.php).
 *
 * N'a PAS été déplacée ici : .tdb-vignette-bon. Sa règle
 * .tdb-vignette-bon__detail a la MÊME spécificité que
 * .tdb-accordion__panel et ne l'emporte que parce qu'elle vient
 * après. La faire passer dans cette feuille, chargée avant
 * 04-navigation.css, déplierait toutes les vignettes du tableau de
 * bord. Elle reste dans style.css (chargé en dernier) tant que la
 * dépendance n'est pas levée autrement qu'en changeant une valeur.
 *
 * Les deux @media de cette feuille ont été SORTIS de @media partagés
 * avec des règles de mise en page (.steps__grid, .tdb-annuaire__grid),
 * qui, elles, restent dans style.css. Condition identique, contenu
 * scindé : le rendu ne change pas.
 */
/* ---------- Carte commerçant (réutilisée : accueil, annuaire, carte) ---------- */
.tdb-card-commercant {
    display: flex;
    flex-direction: column;
    gap: var( --space-md );
    background: var( --color-surface-muted );
    border-radius: 20px;
    padding: 15px 15px 20px;
    transition: background-color var( --duration-tdb ) var( --ease-tdb ), transform var( --duration-tdb ) var( --ease-tdb ), box-shadow var( --duration-tdb ) var( --ease-tdb );
}

/* Survol des cartes "Nos promotions" / bloc saison (nodes 100:681/635/651/666
   → 127:1300, 100:775/776/777/778 → 100:697) : fond gris → fond noir plein,
   titre blanc, badge flèche noir "+" → badge rond orange avec la mascotte
   (réaction ON_HOVER, Dissolve + Smart Animate). Le léger soulèvement
   (transform + ombre) n'est pas issu d'une valeur Figma précise : ajouté par
   cohérence avec le reste des cartes du site. */
.tdb-card-commercant:hover {
    background: var( --color-ink-strong );
    transform: translateY( -4px );
    box-shadow: 0 16px 32px rgba( 0, 0, 0, .24 );
}

.tdb-card-commercant__image {
    position: relative;
    aspect-ratio: 311 / 216;
    border-radius: 10px;
    overflow: hidden;
    /* MOD-IA 2026-09-22 : BC3 — le fond du conteneur passe au noir de la charte.
       Il était codé en dur à #e2e2e2 : une vignette sans image montrait donc
       DEUX gris superposés (ce fond, plus le #F7F7F7 de l'ancien placeholder),
       alors que le client demande « image noire et sourire ». Le repli servi
       par tdb_placeholder_image_uri() est désormais noir lui aussi
       (placeholder-commerce-noir.svg) : le liseré gris qui apparaissait quand
       le rapport de l'image ne coïncidait pas exactement avec le 311/216 de la
       vignette disparaît du même coup.
       ANCIEN CODE : background: #e2e2e2; */
    background: var( --color-ink );
}

.tdb-card-commercant__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tdb-card-commercant__badge {
    position: absolute;
    top: 10px;
    /* MOD-IA 2026-09-01 : la pastille « Promotion » est en haut à DROITE, collée
       à gauche du badge logo — vérifié sur le composant desktop (100:681) ET sur
       la frame mobile (450:1982, pastille mesurée en x=205→287, logo en
       296→356). Le thème la posait à gauche de la photo.
       Décalage = inset du logo (10) + largeur du logo (68) + gouttière (6). */
    /* ANCIEN CODE : left: 10px; */
    right: 84px;
    background: var( --color-primary );
    color: #000;
    font-size: 14px;
    font-weight: var( --weight-medium );
    padding: 5px 12px;
    border-radius: 5px;
}

/* Badge logo (100:592) : carré blanc de 68px, rayon 10px, inset 10px. */
.tdb-card-commercant__logo {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 68px;
    height: 68px;
    border-radius: var( --radius-sm );
    background: #fff;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tdb-card-commercant__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Modèle d'espacement du design (100:616) : les lignes du bloc texte n'ont
   pas de marge entre elles, chacune porte son propre padding de 8px. */
.tdb-card-commercant__sector {
    display: flex;
    align-items: center;
    height: 28px;
    padding: 8px;
    color: var( --color-primary );
    font-size: var( --text-card-sector-size );
    font-weight: var( --weight-semibold );
    letter-spacing: var( --tracking-tight );
    margin: 0;
}

.tdb-card-commercant__name {
    padding: 8px;
    font-size: var( --text-h2-size );
    line-height: var( --text-h2-lh );
    letter-spacing: var( --tracking-tight );
    margin: 0;
    transition: color var( --duration-tdb ) var( --ease-tdb );
}

.tdb-card-commercant:hover .tdb-card-commercant__name {
    color: #fff;
}

.tdb-card-commercant__place {
    display: flex;
    align-items: center;
    height: 30px;
    padding: 8px;
    color: var( --color-text-muted );
    font-size: var( --text-card-place-size );
    line-height: var( --text-card-place-lh );
    letter-spacing: var( --tracking-tight );
    margin: 0;
    transition: color var( --duration-tdb ) var( --ease-tdb );
}

.tdb-card-commercant:hover .tdb-card-commercant__place {
    color: #fff;
}

.tdb-card-commercant__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tdb-card-commercant__tags {
    padding: 8px;
    font-size: var( --text-caption-size );
    line-height: var( --text-caption-lh );
    letter-spacing: var( --tracking-tight );
    transition: color var( --duration-tdb ) var( --ease-tdb );
}

.tdb-card-commercant:hover .tdb-card-commercant__tags {
    color: var( --color-primary );
}

/* Badge flèche (bas-droite de la carte) : deux icônes superposées, l'une
   visible par défaut ("+" sur fond noir), l'autre au survol (mascotte sur
   fond orange rond) — crossfade en CSS plutôt qu'un changement de `src`,
   impossible en CSS pur. */
.tdb-card-commercant__arrow {
    position: relative;
    display: inline-flex;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
}

.tdb-card-commercant__arrow-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity var( --duration-tdb ) var( --ease-tdb );
}

.tdb-card-commercant__arrow-icon--hover {
    opacity: 0;
    background: var( --color-primary );
    border-radius: var( --radius-sm ); /* carré arrondi (100:697), pas un rond */
}

.tdb-card-commercant__arrow-icon--hover img {
    filter: brightness( 0 ) invert( 1 );
}

.tdb-card-commercant:hover .tdb-card-commercant__arrow-icon--default {
    opacity: 0;
}

.tdb-card-commercant:hover .tdb-card-commercant__arrow-icon--hover {
    opacity: 1;
}

/* Sorti du @media de l'annuaire : ces règles habillent la CARTE, pas la grille. */
@media ( max-width: 767px ) {
    /* MOD-IA 2026-09-01 : en mobile la photo de la carte a une hauteur FIXE de
       135px, pas le rapport 311/216 du desktop. Le composant « phone box
       commercant + promo » garde la même hauteur totale (283) quelle que soit
       sa largeur : seule la photo s'élargit, sa hauteur ne bouge pas
       (12 + 135 + 18 + 106 + 12 = 283). Avec le rapport desktop, la photo
       montait à ~235px et allongeait toute la grille. */
    .tdb-card-commercant__image {
        aspect-ratio: 339 / 135;
    }

    /* MOD-IA 2026-09-02 : la typographie mobile de la carte n'était pas
       appliquée — tokens.css déclarait bien --text-card-sector-size-mobile,
       --text-card-place-size-mobile et --text-h2-size-mobile (relevés sur les
       styles Figma "phone/texte box secteur", "phone/texte box lieu" et
       "phone/H2"), mais aucune règle ne les utilisait : la carte gardait ses
       14px et 24px de desktop sur téléphone. Écart relevé en confrontant la
       charte graphique (qui annonçait déjà 12px) au thème. */
    .tdb-card-commercant__sector {
        font-size: var( --text-card-sector-size-mobile );
    }

    .tdb-card-commercant__place {
        font-size: var( --text-card-place-size-mobile );
    }

    .tdb-card-commercant__name {
        font-size: var( --text-h2-size-mobile );
        line-height: var( --text-h2-lh-mobile );
    }
}

/* ---------- Carte prestation ---------- */
/* MOD-IA 2026-09-28 : 3 cartes par ligne sur la page commerçant (au lieu de
   2 ; 4 était trop serré) — piste de 25px d'écart, donc 2 écarts de 25px à
   répartir sur 3 cartes.
   ANCIEN CODE : flex: 0 0 calc( 50% - 12.5px ); */
.tdb-prestation-card {
    flex: 0 0 calc( ( 100% - 50px ) / 3 );
    min-width: 0;
    scroll-snap-align: start;
}
/* MOD-IA 2026-09-28 : tablette — 3 cartes seraient trop étroites, on en garde 2. */
@media ( min-width: 768px ) and ( max-width: 1023px ) {
    .tdb-prestation-card {
        flex: 0 0 calc( 50% - 12.5px );
    }
}
@media ( max-width: 767px ) {
    /* "prestations" (2068:6750) : cartes de 266px espacées de 15px, la
       suivante dépasse volontairement pour signaler le défilement. */
    .tdb-prestation-card {
        flex: 0 0 266px;
    }
}
/* Même traitement que "box commerce" (100:618) : carte au rayon 20px,
   photo intérieure au rayon 10px. */
/* MOD-IA 2026-09-08 : écarts internes repris de la maquette — vérification de
   parité desktop du 08.09.2026.

   L'écart était uniforme (--space-lg, 24px) entre les quatre blocs. Le
   composant « box promotion ok » (191:1340, utilisé dans 6153:6614) en emploie
   deux, relevés nœud par nœud :
     image → titre                35   (image finit à 200, le bloc texte débute à 235)
     titre → description          20   (titre h=56, description à y=76)
     description → ligne de prix  20   (bloc image+texte finit à 436, prix à 456)

   L'écart de base passe donc à 20, et l'image porte les 15px supplémentaires
   qui la séparent du titre. Les hauteurs, elles, restent dictées par le texte :
   la carte de la maquette fait 517 parce que son titre tient sur deux lignes et
   sa description sur cinq, ce qui dépend du contenu saisi, pas du gabarit.

   ANCIEN CODE : gap: var( --space-lg ); */
.tdb-prestation-card {
    background: var( --color-surface-muted );
    border-radius: var( --radius-card );
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    transition: background-color var( --duration-tdb ) var( --ease-tdb );
}

.tdb-prestation-card__image {
    margin-bottom: 15px;
}

/* Même traitement de survol "fond noir" que .tdb-card-commercant, par
   cohérence avec le reste des cartes du site — ce composant n'a pas de
   frame Figma dédiée sur la page d'accueil (utilisé aussi sur la page
   commerçant), ce n'est donc pas une valeur relevée mais extrapolée. */
.tdb-prestation-card:hover {
    background: var( --color-ink-strong );
}

/* MOD-IA 2026-09-28 : la description et le stock passent aussi en blanc au
   survol — ils restaient en encre sombre / gris, illisibles sur le fond noir.
   ANCIEN CODE : seul .tdb-prestation-card__title était concerné. */
.tdb-prestation-card__title,
.tdb-prestation-card__desc,
.tdb-prestation-card__stock {
    transition: color var( --duration-tdb ) var( --ease-tdb );
}

.tdb-prestation-card:hover .tdb-prestation-card__title,
.tdb-prestation-card:hover .tdb-prestation-card__desc,
.tdb-prestation-card:hover .tdb-prestation-card__desc *,
.tdb-prestation-card:hover .tdb-prestation-card__stock {
    color: #fff;
}

.tdb-prestation-card__image {
    position: relative;
    height: 200px;
    border-radius: var( --radius-sm );
    overflow: hidden;
    /* MOD-IA 2026-09-22 : PC2 — même traitement que la vignette commerçant
       ci-dessus : le conteneur n'imposait aucun fond, c'était donc le gris du
       placeholder qui transparaissait. Le fond noir garantit qu'une prestation
       sans image ne montre aucune bande grise résiduelle en haut ou en bas,
       quel que soit le rapport de l'image de repli. */
    background: var( --color-ink );
}

.tdb-prestation-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tdb-prestation-card__discount {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var( --color-ink );
    color: #fff;
    font-size: var( --text-button-size );
    font-weight: var( --weight-medium );
    padding: 5px 12px;
    border-radius: 5px;
}

.tdb-prestation-card__date {
    position: absolute;
    top: 10px;
    left: 90px;
    right: 10px;
    background: var( --color-primary );
    font-size: var( --text-button-size );
    font-weight: var( --weight-medium );
    padding: 5px 12px;
    border-radius: 5px;
    text-align: center;
}

.tdb-prestation-card__title {
    font-size: var( --text-h2-size );
    line-height: var( --text-h2-lh );
    margin: 0;
}

.tdb-prestation-card__desc {
    font-size: var( --text-card-desc-size );
    font-weight: var( --weight-light );
    color: var( --color-ink );
}

.tdb-prestation-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var( --space-md );
}

.tdb-prestation-card__price-main {
    color: var( --color-primary );
    font-size: 22px;
    font-weight: var( --weight-semibold );
    margin-right: var( --space-sm );
}

.tdb-prestation-card__price-old {
    color: var( --color-text-muted );
    text-decoration: line-through;
}

.tdb-prestation-card__stock {
    display: block;
    color: var( --color-text-muted );
    font-size: var( --text-caption-size );
}

/* ---------- Carte « étape » (page d'accueil) ---------- */
/* Le padding de 40px est porté par le texte, PAS par la carte : les unités
   `cqw` se mesurent sur la boîte de contenu du conteneur de requête, un padding
   sur .step-card réduirait donc l'échelle de tout le collage décoratif. */
.step-card {
    position: relative;
    overflow: hidden;                 /* "Rectangle 17" masque les jetons de l'étape 2 */
    aspect-ratio: 463 / 350;
    min-height: 350px;
    /* MOD-IA 2026-09-08 : la carte ne peut plus être PLUS LARGE que sa colonne
       — débordement horizontal repéré le 08.09.2026 entre 768px et ~1440px.

       `aspect-ratio` et `min-height` se combinent d'une façon peu intuitive :
       quand la hauteur imposée par `min-height` dépasse celle que le rapport
       donnerait, c'est la LARGEUR qui est recalculée à partir de cette hauteur.
       Dans une colonne de 224px (grille de 3 à 768px), la carte prenait donc
       350 x 463/350 = 463px de large et la page défilait jusqu'à 983px pour un
       écran de 768. Le défaut ne se voyait ni en dessous de 768 (carrousel
       horizontal, largeur fixée à 265px) ni à 1440 (la colonne fait alors
       justement 463px) : il n'apparaissait qu'entre les deux, c'est-à-dire sur
       toutes les tablettes et les petits portables.

       `max-width` borne la largeur employée sans toucher au rapport : la carte
       remplit sa colonne et devient simplement plus haute que le rapport ne le
       voudrait, ce que `min-height` demandait déjà. Sans effet sur le carrousel
       mobile, où `flex: 0 0 265px` fixe la largeur bien en deçà de la limite. */
    max-width: 100%;
    border-radius: 20px;
    background: var( --color-surface-muted );   /* #F7F7F7 */
    container-type: inline-size;
    transition: background-color var( --duration-spring ) var( --ease-spring );
}

/* Variante de survol : fond "TDB noir anthracite" (#212121), texte en blanc. */
.step-card:hover {
    background: var( --color-ink );
}

.step-card__text {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 40px;
}

.step-card__number {
    flex: none;
    width: 42px;
    color: var( --color-primary );
    font-size: 75px;
    line-height: 58px;
    font-weight: var( --weight-semibold );
    letter-spacing: var( --tracking-tight );
}

.step-card__label strong,
.step-card__label > span {
    display: block;
    color: #000;
    letter-spacing: var( --tracking-tight );
    transition: color var( --duration-spring ) var( --ease-spring );
}

.step-card__label strong {
    font-size: 24px;
    line-height: 28px;
    font-weight: var( --weight-semibold );
}

.step-card__label > span {
    font-size: 20px;
    line-height: 28px;
    font-weight: var( --weight-regular );
}

.step-card:hover .step-card__label strong,
.step-card:hover .step-card__label > span {
    color: #fff;
}

/* ---- Scène décorative (repère de 463 × 350 px, ancrée en bas) ---- */
.step-card__deco {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 75.594cqw;   /* 350 / 463 */
    pointer-events: none;
}

.step-tile,
.step-coin {
    position: absolute;
    display: block;
    transition:
        transform var( --duration-spring ) var( --ease-spring ),
        opacity   var( --duration-spring ) var( --ease-spring );
}

/* Les tuiles satellites disparaissent au survol (Smart Animate n'a pas de
   calque correspondant dans la variante cible : Figma les fond en opacité). */
.step-card:hover .step-tile--karting,
.step-card:hover .step-tile--vtt,
.step-card:hover .step-tile--coiffeur,
.step-card:hover .step-tile--veto,
.step-card:hover .step-coin--10,
.step-card:hover .step-coin--100,
.step-card:hover .step-coin--200 {
    opacity: 0;
}

/* ---- Étape 1 : tuiles secteur d'activité (groupe "pictos" 87:187) ---- */
.step-tile--karting  { left: 22.527cqw; top: 48.488cqw; width:  9.935cqw; height:  9.935cqw; transform: translate(-50%,-50%); }
.step-tile--veto     { left: 76.782cqw; top: 49.546cqw; width: 10.799cqw; height: 10.799cqw; transform: translate(-50%,-50%); }
.step-tile--vtt      { left: 31.188cqw; top: 49.136cqw; width: 14.903cqw; height: 14.903cqw; transform: translate(-50%,-50%); }
.step-tile--coiffeur { left: 67.689cqw; top: 49.546cqw; width: 17.495cqw; height: 19.654cqw; transform: translate(-50%,-50%); }
.step-tile--burger   { left: 49.438cqw; top: 48.099cqw; width: 29.158cqw; height: 29.158cqw; transform: translate(-50%,-50%); }

/* Survol : la tuile "burger" passe de 134,7 → 148,4 px et pivote de 21,8°. */
.step-card:hover .step-tile--burger {
    transform: translate(-50%,-50%) rotate( 21.8deg ) scale( 1.1016 );
}

/* ---- Étape 2 : jetons de montant (groupe "Group 13" 87:288) ---- */
.step-coin {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    font-weight: var( --weight-medium );
    letter-spacing: var( --tracking-tight );
    transition:
        left          var( --duration-spring ) var( --ease-spring ),
        top           var( --duration-spring ) var( --ease-spring ),
        width         var( --duration-spring ) var( --ease-spring ),
        height        var( --duration-spring ) var( --ease-spring ),
        border-radius var( --duration-spring ) var( --ease-spring ),
        font-size     var( --duration-spring ) var( --ease-spring ),
        transform     var( --duration-spring ) var( --ease-spring ),
        opacity       var( --duration-spring ) var( --ease-spring );
}

.step-coin--10 {
    left: 75.464cqw; top: 43.909cqw; width: 21.814cqw; height: 21.793cqw;
    border-radius: 4.622cqw; font-size: 6.479cqw;
    background: #EA8D28;
    transform: translate(-50%,-50%) rotate( -25.8deg );
}

.step-coin--200 {
    left: 82.073cqw; top: 61.944cqw; width: 12.678cqw; height: 12.678cqw;
    border-radius: 2.7cqw; font-size: 3.768cqw;
    background: #CA7518;
    transform: translate(-50%,-50%) rotate( -25.8deg );
}

.step-coin--100 {
    left: 65.292cqw; top: 71.771cqw; width: 21.814cqw; height: 21.793cqw;
    border-radius: 4.622cqw; font-size: 6.479cqw;
    background: #EA8D28;
    transform: translate(-50%,-50%) rotate( -25.8deg );
}

/* Le jeton "50" porte un contour dégradé orange → blanc (variable Figma
   "degrade orange") : rendu via deux fonds, l'un en padding-box, l'autre en
   border-box. */
.step-coin--50 {
    left: 47.84cqw; top: 49.741cqw; width: 29.093cqw; height: 29.071cqw;
    border-radius: 6.177cqw; font-size: 8.639cqw;
    color: #fff;
    font-weight: var( --weight-bold, 700 );
    border: 2px solid transparent;
    background:
        linear-gradient( var( --color-primary ), var( --color-primary ) ) padding-box,
        linear-gradient( 135deg, var( --color-primary ) 0%, #fff 100% ) border-box;
    transform: translate(-50%,-50%) rotate( -25.8deg );
}

/* Survol : le jeton "50" se recentre, grossit (134,7 → 156,2 px) et se
   redresse de −25,8° à −11,4°. */
.step-card:hover .step-coin--50 {
    left: 51.231cqw; top: 47.927cqw; width: 33.737cqw; height: 33.715cqw;
    border-radius: 5.788cqw; font-size: 9.578cqw;
    transform: translate(-50%,-50%) rotate( -11.4deg );
}

/* ---- Étape 3 : mascotte + pastilles (groupe "picto" 87:330) ---- */
.step-tile--mascot { left: 49.46cqw;  top: 50.518cqw; width: 26.566cqw; height: 26.35cqw;  z-index: 2; transform: translate(-50%,-50%); }
.step-tile--print  { left: 65.054cqw; top: 61.317cqw; width: 16.458cqw; height: 16.415cqw; z-index: 3; transform: translate(-50%,-50%) rotate( 15deg ); }
.step-tile--mail   { left: 33.866cqw; top: 44.255cqw; width: 16.458cqw; height: 16.415cqw; z-index: 4; transform: translate(-50%,-50%) rotate( 15deg ); }

.step-card:hover .step-tile--mascot {
    transform: translate(-50%,-50%) rotate( 9deg );
}

/* La pastille "imprimer" rétrécit ET repasse derrière la tuile mascotte
   (l'ordre de calques change entre les deux variantes Figma). */
.step-card:hover .step-tile--print {
    z-index: 1;
    transform: translate(-50%,-50%) translate( -8.596cqw, -5.313cqw ) rotate( 15deg ) scale( 0.7572 );
}

.step-card:hover .step-tile--mail {
    transform: translate(-50%,-50%) translate( -0.821cqw, -4.341cqw ) rotate( 15deg ) scale( 1.3071 );
}

/* Sorti du @media de l'accueil : ces règles habillent la CARTE, pas la grille. */
@media ( max-width: 767px ) {
    .step-card {
        /* 265x246 en maquette mobile, contre 463x350 en desktop : le rapport
           change, il faut donc redéfinir aspect-ratio et pas seulement la
           largeur. */
        flex: 0 0 265px;
        aspect-ratio: 265 / 246;
        scroll-snap-align: start;
        min-height: 0;
    }
    .step-card__text {
        padding: var( --space-lg );
    }
    .step-card__number {
        width: 30px;
        font-size: 54px;
        line-height: 42px;
    }
    .step-card__label strong {
        font-size: var( --text-h2-size-mobile );
        line-height: var( --text-h2-lh-mobile );
    }
    .step-card__label > span {
        font-size: 15px;
        line-height: 21px;
    }
}