/* =========================================================
   CK Pâtisserie — ajustements de la version statique
   Ce fichier est chargé APRÈS style.css : il complète le
   thème d'origine sans le modifier.
   ========================================================= */

/* --- Accessibilité : lien d'évitement au clavier --- */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 10000;
    background: var(--text-primary, #5C2D18);
    color: #fff;
    padding: 12px 20px;
    border-radius: 0 0 8px 0;
    font-size: 14px;
    letter-spacing: .05em;
    text-decoration: none;
}
.skip-link:focus {
    left: 0;
}

/* --- Focus visible sur tous les éléments interactifs --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--color-strawberry, #E32646);
    outline-offset: 3px;
    border-radius: 4px;
}

/* --- Aucune image ne peut déborder de son conteneur --- */
img {
    max-width: 100%;
}

/* --- Filet de sécurité : le preloader ne doit jamais rester bloqué --- */
.ck-preloader.ck-force-hide {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity .5s ease;
}

/* --- Retour visuel du formulaire de contact --- */
.ck-form-feedback {
    margin-top: 18px;
    padding: 14px 18px;
    border-radius: 10px;
    font-size: 15px;
    line-height: 1.5;
    display: none;
}
.ck-form-feedback.is-visible {
    display: block;
}
.ck-form-feedback.is-ok {
    background: rgba(212, 163, 115, .18);
    color: var(--text-primary, #5C2D18);
    border: 1px solid rgba(212, 163, 115, .5);
}
.ck-form-feedback.is-error {
    background: rgba(227, 38, 70, .10);
    color: var(--color-strawberry, #E32646);
    border: 1px solid rgba(227, 38, 70, .35);
}

/* --- Repli si le widget d'avis Google ne se charge pas (hors ligne) --- */
.ck-reviews-fallback {
    display: none;
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted, #7D6B60);
    font-size: 16px;
    line-height: 1.7;
}
.ck-reviews-fallback.is-visible {
    display: block;
}
.ck-reviews-fallback a {
    color: var(--color-strawberry, #E32646);
    font-weight: 500;
}

/* --- Respect du réglage système « réduire les animations » --- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .ck-preloader {
        display: none !important;
    }
    .custom-cursor {
        display: none !important;
    }
}

/* --- Impression : on retire le décor, on garde le contenu --- */
@media print {
    .site-header,
    .site-footer,
    .ck-preloader,
    .custom-cursor,
    #glow-field,
    .ticker-section,
    .partners-section {
        display: none !important;
    }
    body {
        background: #fff;
        color: #000;
    }
}

/* =========================================================
   SECTION INSTAGRAM
   ========================================================= */

.ck-instagram-section {
    position: relative;
    padding: 110px 0 120px;
    background: var(--bg-main, #FDFBF9);
    overflow: hidden;
}

.ck-ig-wrapper {
    width: 90%;
    max-width: 1320px;
    margin: 0 auto;
}

/* --- En-tête --- */
.ck-ig-header {
    text-align: center;
    margin-bottom: 42px;
}
.ck-ig-eyebrow {
    display: inline-block;
    font-size: 13px;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--color-strawberry, #E32646);
    margin-bottom: 14px;
}
.ck-ig-header h2 {
    font-family: var(--font-heading, serif);
    font-size: clamp(38px, 5vw, 64px);
    line-height: 1.05;
    color: var(--text-primary, #5C2D18);
    margin: 0 0 16px;
    font-weight: 500;
}
.ck-ig-header p {
    max-width: 560px;
    margin: 0 auto;
    color: var(--text-muted, #7D6B60);
    font-size: 16px;
    line-height: 1.7;
}

/* --- Flux en direct : embed officiel Instagram --- */
.ck-ig-feed {
    position: relative;
    width: 100%;
    max-width: 680px;
    margin: 0 auto 38px;
    min-height: 260px;
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(212, 163, 115, .22);
    box-shadow: 0 16px 44px rgba(92, 45, 24, .07);
}
.ck-ig-live {
    display: block;
    width: 100%;
    height: 620px;          /* affinée en JS selon la largeur réelle */
    border: 0;
    opacity: 0;
    transition: opacity .6s ease;
}
.ck-ig-feed.is-live .ck-ig-live {
    opacity: 1;
}
.ck-ig-feed-chargement {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: var(--text-muted, #7D6B60);
    font-size: 14px;
    letter-spacing: .04em;
    transition: opacity .4s ease;
}
.ck-ig-feed.is-live .ck-ig-feed-chargement {
    opacity: 0;
    pointer-events: none;
}
.ck-ig-spinner {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid rgba(212, 163, 115, .3);
    border-top-color: var(--color-strawberry, #E32646);
    animation: ckIgSpin .9s linear infinite;
}
@keyframes ckIgSpin {
    to { transform: rotate(360deg); }
}

/* --- Repli : galerie des créations, affichée si le flux ne répond pas --- */
.ck-ig-repli[hidden] {
    display: none;
}
.ck-ig-repli-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    max-width: 620px;
    margin: 0 auto 26px;
    padding: 14px 20px;
    border-radius: 14px;
    background: rgba(212, 163, 115, .12);
    border: 1px solid rgba(212, 163, 115, .28);
    color: var(--text-muted, #7D6B60);
    font-size: 14px;
    line-height: 1.55;
    text-align: center;
}
.ck-ig-repli-note i {
    color: var(--color-gold, #D4A373);
}

/* --- Galerie navigable --- */
.ck-ig-gallery {
    position: relative;
}
.ck-ig-track {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 6px 2px 18px;
    -ms-overflow-style: none;
    scrollbar-width: none;
    cursor: grab;
}
.ck-ig-track::-webkit-scrollbar {
    display: none;
}
.ck-ig-track.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto;
    scroll-snap-type: none;
}
.ck-ig-track:focus-visible {
    outline: 2px solid var(--color-strawberry, #E32646);
    outline-offset: 6px;
    border-radius: 18px;
}

.ck-ig-tile {
    position: relative;
    flex: 0 0 auto;
    width: clamp(180px, 22vw, 260px);
    aspect-ratio: 1 / 1;
    border-radius: 18px;
    overflow: hidden;
    scroll-snap-align: start;
    background: #f3ece7;
    text-decoration: none;
    box-shadow: 0 12px 32px rgba(92, 45, 24, .06);
    transition: transform .45s cubic-bezier(.16, 1, .3, 1), box-shadow .45s ease;
}
.ck-ig-tile:hover,
.ck-ig-tile:focus-visible {
    transform: translateY(-6px);
    box-shadow: 0 22px 48px rgba(92, 45, 24, .13);
}
.ck-ig-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s cubic-bezier(.16, 1, .3, 1);
}
.ck-ig-tile:hover img {
    transform: scale(1.06);
}
.ck-ig-tile-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px;
    text-align: center;
    color: #fff;
    background: linear-gradient(180deg, rgba(92, 45, 24, 0) 35%, rgba(92, 45, 24, .78) 100%);
    opacity: 0;
    transition: opacity .35s ease;
}
.ck-ig-tile:hover .ck-ig-tile-overlay,
.ck-ig-tile:focus-visible .ck-ig-tile-overlay {
    opacity: 1;
}
.ck-ig-tile-overlay i {
    font-size: 26px;
}
.ck-ig-tile-legende {
    font-size: 14px;
    line-height: 1.35;
    letter-spacing: .02em;
}

/* --- Flèches de navigation --- */
.ck-ig-nav {
    position: absolute;
    top: calc(50% - 12px);
    transform: translateY(-50%);
    z-index: 3;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(212, 163, 115, .3);
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    color: var(--text-primary, #5C2D18);
    font-size: 15px;
    cursor: pointer;
    display: grid;
    place-items: center;
    box-shadow: 0 8px 24px rgba(92, 45, 24, .10);
    transition: opacity .3s ease, transform .3s ease, background .3s ease;
}
.ck-ig-nav:hover {
    background: var(--text-primary, #5C2D18);
    color: #fff;
}
.ck-ig-prev { left: -14px; }
.ck-ig-next { right: -14px; }
.ck-ig-nav[disabled] {
    opacity: 0;
    pointer-events: none;
}

/* --- Bouton d'abonnement --- */
.ck-ig-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 40px auto 0;
    padding: 17px 34px;
    border-radius: 999px;
    color: #fff;
    font-size: 15px;
    letter-spacing: .05em;
    text-decoration: none;
    background: linear-gradient(45deg, #F09433, #E6683C 25%, #DC2743 50%, #CC2366 75%, #BC1888);
    box-shadow: 0 14px 34px rgba(220, 39, 67, .26);
    transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s ease;
}
.ck-ig-wrapper > .ck-ig-cta {
    display: flex;
    width: fit-content;
}
.ck-ig-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 44px rgba(220, 39, 67, .34);
}
.ck-ig-cta i {
    font-size: 19px;
}

@media (max-width: 768px) {
    .ck-instagram-section { padding: 80px 0 90px; }
    .ck-ig-nav { display: none; }
    .ck-ig-tile { width: 63vw; }
    .ck-ig-feed { max-width: 100%; }
}

/* --- Visuel « Photo à venir » : on ne déforme pas le pictogramme --- */
img.ck-photo-attente {
    object-fit: contain !important;
    background: #FDFBF9;
    padding: 8%;
    box-sizing: border-box;
}

/* =========================================================
   FRISE « NOTRE HISTOIRE AU FIL DES ANS » (page À propos)
   Correction : .timeline-moving-line est un conteneur flex dont la largeur
   était contrainte par son parent. Les jalons, prévus à 450 px, étaient donc
   compressés à ~80 px : les cartes se superposaient et il ne restait presque
   rien à faire défiler horizontalement.
   ========================================================= */

.timeline-moving-line {
    width: max-content;
}

.timeline-milestone-item {
    flex: 0 0 450px;
}

@media (max-width: 768px) {
    .timeline-milestone-item {
        flex: 0 0 300px;
        margin-right: 40px;
    }
    .milestone-card {
        width: 270px;
        padding: 22px;
    }
}

/* --- Mention de l'agence dans le pied de page --- */
.footer-agency {
    margin-top: 10px !important;
    font-size: 13px;
    letter-spacing: .06em;
    opacity: .85;
}
.footer-agency a {
    color: var(--color-gold, #D4A373);
    text-decoration: none;
    border-bottom: 1px solid rgba(212, 163, 115, .45);
    padding-bottom: 1px;
    transition: color .3s ease, border-color .3s ease;
}
.footer-agency a:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, .7);
}

/* --- Carte de Noël : message affiché quand la collection n'est pas encore saisie --- */
.noel-empty-msg {
    grid-column: 1 / -1;
    max-width: 620px;
    margin: 0 auto;
    padding: 28px 30px;
    text-align: center;
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-muted, #7D6B60);
    background: rgba(212, 163, 115, .10);
    border: 1px solid rgba(212, 163, 115, .26);
    border-radius: 18px;
}

/* =========================================================
   PAGE BISCUITERIE — rayon réduit
   Recherche et onglets de filtre n'ont pas de sens sur trois produits ou
   moins : ils sont alors remplacés par un simple intitulé, et la grille est
   centrée plutôt qu'alignée à gauche.
   ========================================================= */

.biscuit-grid-title {
    margin: 0;
    text-align: center;
    font-family: var(--font-heading, serif);
    font-size: clamp(30px, 3.6vw, 44px);
    font-weight: 500;
    color: var(--text-primary, #5C2D18);
}

.biscuit-grid-title + .vrac-products-grid {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}
.biscuit-grid-title + .vrac-products-grid > .vrac-product-card {
    width: 360px;
    max-width: 100%;
}

/* --- Bloc « Fournées du jour » --- */
.biscuit-fournee {
    margin: 90px auto 0;
    max-width: 1000px;
    padding: 0 20px;
}
.biscuit-fournee-inner {
    position: relative;
    padding: 56px 50px;
    border-radius: 28px;
    text-align: center;
    background: linear-gradient(140deg, rgba(212, 163, 115, .13), rgba(227, 38, 70, .06));
    border: 1px solid rgba(212, 163, 115, .26);
}
.biscuit-fournee-eyebrow {
    display: inline-block;
    font-size: 13px;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--color-strawberry, #E32646);
    margin-bottom: 14px;
}
.biscuit-fournee-inner h2 {
    font-family: var(--font-heading, serif);
    font-size: clamp(30px, 4vw, 48px);
    line-height: 1.1;
    font-weight: 500;
    color: var(--text-primary, #5C2D18);
    margin: 0 0 20px;
}
.biscuit-fournee-inner p {
    max-width: 620px;
    margin: 0 auto 32px;
    color: var(--text-muted, #7D6B60);
    font-size: 16px;
    line-height: 1.75;
}
.biscuit-fournee-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 18px 28px;
}
.biscuit-fournee-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 30px;
    border-radius: 999px;
    background: var(--text-primary, #5C2D18);
    color: #fff;
    font-size: 15px;
    letter-spacing: .04em;
    text-decoration: none;
    transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s ease;
    box-shadow: 0 12px 30px rgba(92, 45, 24, .18);
}
.biscuit-fournee-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(92, 45, 24, .26);
}
.biscuit-fournee-lien {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-primary, #5C2D18);
    font-size: 14px;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: 1px solid rgba(92, 45, 24, .35);
    padding-bottom: 3px;
    transition: color .3s ease, border-color .3s ease;
}
.biscuit-fournee-lien:hover {
    color: var(--color-strawberry, #E32646);
    border-color: var(--color-strawberry, #E32646);
}

@media (max-width: 768px) {
    .biscuit-fournee { margin-top: 60px; }
    .biscuit-fournee-inner { padding: 40px 24px; }
}

/* --- Carte de Noël : visuel de la collection --- */
.noel-visuel {
    margin: 10px auto 60px;
    max-width: 470px;
    text-align: center;
}
.noel-visuel img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 22px;
    box-shadow: 0 22px 55px rgba(92, 45, 24, .16);
}
.noel-visuel figcaption {
    margin-top: 16px;
    font-size: 13px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--text-muted, #7D6B60);
}

/* --- Page 404 --- */
.ck-404 {
    min-height: 62vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 160px 24px 120px;
}
.ck-404-inner {
    max-width: 620px;
    text-align: center;
}
.ck-404-code {
    display: block;
    font-family: var(--font-heading, serif);
    font-size: clamp(80px, 14vw, 150px);
    line-height: 1;
    color: var(--color-gold, #D4A373);
    opacity: .45;
    margin-bottom: 8px;
}
.ck-404-inner h1 {
    font-family: var(--font-heading, serif);
    font-size: clamp(32px, 5vw, 56px);
    line-height: 1.1;
    font-weight: 500;
    color: var(--text-primary, #5C2D18);
    margin: 0 0 20px;
}
.ck-404-inner p {
    color: var(--text-muted, #7D6B60);
    font-size: 16px;
    line-height: 1.75;
    margin: 0 0 34px;
}
.ck-404-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px 26px;
}
.ck-404-btn {
    display: inline-flex;
    padding: 16px 32px;
    border-radius: 999px;
    background: var(--text-primary, #5C2D18);
    color: #fff;
    font-size: 15px;
    letter-spacing: .04em;
    text-decoration: none;
    box-shadow: 0 12px 30px rgba(92, 45, 24, .18);
    transition: transform .35s cubic-bezier(.16, 1, .3, 1);
}
.ck-404-btn:hover { transform: translateY(-3px); }
.ck-404-lien {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-primary, #5C2D18);
    font-size: 14px;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: 1px solid rgba(92, 45, 24, .35);
    padding-bottom: 3px;
}
.ck-404-lien:hover { color: var(--color-strawberry, #E32646); }

/* =========================================================
   AFFICHAGE MOBILE — HERO
   Le thème ne prévoyait rien pour le hero sous 992 px : la grille restait
   à deux colonnes (490 px + 330 px sur un écran de 375 px), le visuel
   partait hors écran et le titre restait figé à 130 px.
   ========================================================= */

@media (max-width: 992px) {
    .hero-container {
        grid-template-columns: 1fr;
        gap: 44px;
    }
    .hero-title {
        font-size: clamp(44px, 12.5vw, 118px);
        line-height: 1.06;
        overflow-wrap: break-word;
    }
    .hero-visual {
        height: auto;
        min-height: 380px;
    }
    /* le blob décoratif est recentré : son animation pilote déjà `transform`,
       on le centre donc par les marges et non par une translation */
    .hero-shape {
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 600px) {
    .hero-section {
        min-height: auto;
        padding: 110px 0 70px;
    }
    .hero-text {
        font-size: 16px;
    }
    .hero-visual {
        min-height: 300px;
    }
    .hero-shape {
        width: min(300px, 82vw);
        height: min(300px, 82vw);
    }
    .hero-img-wrapper {
        width: min(262px, 72vw);
        height: min(262px, 72vw);
    }
}

/* =========================================================
   AFFICHAGE MOBILE — CARTES « NOS UNIVERS CRÉATIFS »
   Sous 992 px la boîte image passe à 300 px, mais l'image gardait sa hauteur
   fixe de 550 px héritée de la mise en page à deux colonnes : elle débordait
   de 250 px et recouvrait le titre et les tags de la carte.
   ========================================================= */

@media (max-width: 992px) {
    .card-image-box {
        overflow: hidden;
    }
    .card-image-box img {
        height: 100%;
    }
}

/* --- Photo illustrant un bloc éditorial (page Carte Évènementielle) --- */
.event-photo {
    margin: 26px 0 34px;
    max-width: 420px;
}
.event-photo img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 20px 48px rgba(92, 45, 24, .15);
}
.event-photo figcaption {
    margin-top: 14px;
    font-size: 13px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-muted, #7D6B60);
}
@media (max-width: 768px) {
    .event-photo { max-width: 100%; margin-inline: auto; text-align: center; }
}

/* --- Horaires : précision sur la fermeture du salon de thé --- */
.hours-note {
    margin: 14px 0 0;
    font-size: 13px;
    line-height: 1.5;
    font-style: italic;
    color: var(--text-muted, #7D6B60);
    opacity: .9;
}

/* --- Badge de saison : la plage de dates tient sur deux lignes si besoin --- */
.hours-card-badge {
    line-height: 1.4;
}

/* --- Carrousel « Individuels du Moment » ---
   La section est épinglée le temps du défilement horizontal : l'en-tête et les
   cartes doivent tenir entièrement dans la fenêtre, sinon le bas des cartes est
   coupé. Sur les écrans courts (portables 720–820 px), on resserre les marges
   et on réduit la hauteur des visuels. --- */

@media (max-height: 820px) {
    .showcase-pinned-container {
        padding: 40px 0;
    }
    .showcase-header {
        margin-bottom: 18px;
    }
    .product-card-image-wrap {
        height: 280px;
    }
}

@media (max-height: 760px) {
    .showcase-pinned-container {
        padding: 28px 0;
    }
    .showcase-header {
        margin-bottom: 12px;
    }
    .showcase-header h2 {
        font-size: 40px;
    }
    .product-card-image-wrap {
        height: 230px;
    }
    .product-card-details {
        padding: 22px;
    }
}

/* --- Carrousel épinglé sur mobile : visuel un peu plus court, pour laisser
       la place à l'en-tête sous la barre de navigation fixe --- */
@media (max-width: 768px) {
    .product-card-image-wrap {
        height: 240px;
    }
}

/* --- « Nos Univers Créatifs » : rythme de l'empilement ---
   Chaque carte reste épinglée jusqu'à ce que la suivante la recouvre. L'écart
   ci-dessous fixe la distance de défilement entre deux cartes : plus il est
   grand, plus la séquence est lente. Le script relit cette valeur, les deux
   restent donc cohérents. Réservé au grand écran : sous 993 px les cartes
   s'empilent normalement et l'écart doit rester serré. --- */
@media (min-width: 993px) {
    .cards-container {
        gap: 280px;
    }
}

/* --- Macaron de saison : texte centré, et repli propre sur deux lignes
       quand la plage de dates est trop longue pour la largeur de la carte --- */
.hours-card-badge {
    text-align: center;
    white-space: normal;
    max-width: calc(100% - 40px);
    line-height: 1.4;
}

/* --- Macaron de saison sur petit écran ---
   En positionnement absolu, la plage de dates passait sur quatre lignes et
   recouvrait le titre de la carte. Sous 850 px, le macaron reprend sa place
   dans le flux : il pousse le contenu au lieu de le masquer. --- */
@media (max-width: 850px) {
    .hours-card {
        padding-top: 28px;
    }
    .hours-card-badge {
        position: static;
        transform: none;
        left: auto;
        top: auto;
        width: fit-content;
        max-width: 100%;
        margin: 0 auto;
        letter-spacing: 1.2px;
        padding: 8px 18px;
    }
}

/* =========================================================
   PAGE « LES ATELIERS » — annonce de reprise
   ========================================================= */

.ck-ateliers {
    padding: 170px 24px 120px;
}
.ck-ateliers-inner {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 70px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.ck-ateliers-eyebrow {
    display: inline-block;
    font-size: 13px;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--color-strawberry, #E32646);
    margin-bottom: 14px;
}
.ck-ateliers-texte h1 {
    font-family: var(--font-heading, serif);
    font-size: clamp(46px, 6vw, 86px);
    line-height: 1.02;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--text-primary, #5C2D18);
    margin: 0 0 22px;
}
.ck-ateliers-chapo {
    max-width: 480px;
    color: var(--text-muted, #7D6B60);
    font-size: 16px;
    line-height: 1.75;
    margin: 0 0 34px;
}

/* --- Encart de l'annonce --- */
.ck-ateliers-annonce {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    max-width: 520px;
    padding: 26px 28px;
    border-radius: 20px;
    background: linear-gradient(140deg, rgba(212, 163, 115, .14), rgba(227, 38, 70, .06));
    border: 1px solid rgba(212, 163, 115, .28);
    margin-bottom: 34px;
}
.ck-ateliers-icone {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 18px;
    color: #fff;
    background: var(--text-primary, #5C2D18);
}
.ck-ateliers-annonce strong {
    display: block;
    font-size: 19px;
    color: var(--text-primary, #5C2D18);
    margin-bottom: 6px;
}
.ck-ateliers-annonce span {
    color: var(--text-muted, #7D6B60);
    font-size: 15px;
    line-height: 1.65;
}

/* --- Actions --- */
.ck-ateliers-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 28px;
}
.ck-ateliers-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    border-radius: 999px;
    background: var(--text-primary, #5C2D18);
    color: #fff;
    font-size: 15px;
    letter-spacing: .04em;
    text-decoration: none;
    box-shadow: 0 12px 30px rgba(92, 45, 24, .18);
    transition: transform .35s cubic-bezier(.16, 1, .3, 1);
}
.ck-ateliers-btn:hover {
    transform: translateY(-3px);
}
.ck-ateliers-lien {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--text-primary, #5C2D18);
    font-size: 14px;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: 1px solid rgba(92, 45, 24, .35);
    padding-bottom: 3px;
    transition: color .3s ease, border-color .3s ease;
}
.ck-ateliers-lien:hover {
    color: var(--color-strawberry, #E32646);
    border-color: var(--color-strawberry, #E32646);
}

/* --- Visuel --- */
.ck-ateliers-visuel {
    margin: 0;
}
.ck-ateliers-visuel img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 55% 45% 55% 45% / 45% 55% 45% 55%;
    box-shadow: 0 24px 60px rgba(92, 45, 24, .16);
}

@media (max-width: 992px) {
    .ck-ateliers {
        padding: 130px 24px 90px;
    }
    .ck-ateliers-inner {
        grid-template-columns: 1fr;
        gap: 46px;
    }
    .ck-ateliers-visuel {
        max-width: 420px;
        margin: 0 auto;
        order: -1;
    }
}