/* Page d'accueil (front-page.php) */

.lc-home{
    /* Hauteur des photos de projets, et part qui dépasse dans le hero */
    --strip-h: clamp(11rem, 24vw, 22rem);
    --strip-peek: calc(var(--strip-h) * 0.2);
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");

    overflow-x: clip;
    color: var(--c-ink);
    font-size: 1rem;
    line-height: 1.6;
}

/* Remises à zéro en :where() pour ne pas peser sur la spécificité */
:where(.lc-home) :is(ul, ol){
    margin: 0;
    padding: 0;
    list-style: none;
}

:where(.lc-home) p{
    margin: 0;
}

:where(.lc-home) img{
    max-width: 100%;
    height: auto;
}

.lc-container{
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: calc(var(--container) + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.lc-section{
    position: relative;
    padding-block: clamp(4rem, 9vw, 7rem);
}

.lc-section--dark{
    background: var(--c-ink-deep);
    color: var(--c-cream);
}

/* Décors : toujours derrière le contenu, jamais cliquables */
.lc-deco{
    position: absolute;
    z-index: 0;
    pointer-events: none;
    user-select: none;
}

/* ---------- Titres ---------- */

.lc-home .lc-title{
    margin: 0 0 clamp(2rem, 5vw, 3.5rem);
    color: inherit;
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 5vw, 4.5rem);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: 0;
    text-wrap: balance;
}

.lc-home .lc-title--caps{
    text-align: center;
    text-transform: uppercase;
}

/* ---------- Boutons ---------- */

.lc-home .btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    min-height: 3rem;
    padding: 0.75rem 1.5rem;
    border-radius: var(--r-sm);
    background: var(--c-ink);
    color: var(--c-cream-light);
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
    text-decoration: none;
    transition: transform 200ms ease, background-color 200ms ease;
}

.lc-home .btn:hover{
    transform: scale(0.97);
    background: color-mix(in srgb, var(--c-ink) 87%, var(--c-white));
}

.lc-home .btn--light{
    background: var(--c-cream-light);
    color: var(--c-ink);
}

.lc-home .btn--light:hover{
    background: var(--c-white);
}

.btn__icon{
    flex: none;
    width: 1rem;
    height: 1rem;
    fill: currentColor;
}

.lc-actions{
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.lc-actions--center{
    justify-content: center;
    margin-top: clamp(2rem, 5vw, 3rem);
}

/* ---------- Cartes et listes ---------- */

.lc-card{
    padding: clamp(1.5rem, 3vw, 2rem);
    border-radius: var(--r-lg);
    background: var(--c-cream-light);
    color: var(--c-ink);
}

.lc-home .lc-list{
    display: grid;
    gap: 0.5rem;
    padding-left: 1.25rem;
    list-style: disc;
}

.lc-home .lc-list li::marker{
    color: var(--c-green-text);
}

.lc-home .lc-tags{
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.lc-tags li{
    padding: 0.25rem 0.75rem;
    border-radius: var(--r-sm);
    background: color-mix(in srgb, var(--c-green) 40%, transparent);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
}

/* ---------- Hero ---------- */

.lc-hero{
    position: relative;
    display: grid;
    place-items: center;
    min-height: 100svh;
    padding: calc(var(--nav-h) + 0.5rem) var(--gutter) calc(var(--strip-peek) + 1rem);
    overflow: hidden;
}

/* Un seul halo vert, discret, qui dérive lentement */
.lc-hero__aura{
    position: absolute;
    inset: -15%;
    background: radial-gradient(ellipse at 72% 60%, color-mix(in srgb, var(--c-green) 70%, transparent) 0%, transparent 50%);
    opacity: 0.3;
    filter: blur(80px);
    animation: lc-drift 16s ease-in-out infinite alternate;
}

/* Fond animé : il remplace le halo dès que WebGL a démarré */
.lc-fond{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 800ms ease;
}

.lc-hero.has-fond .lc-fond{
    opacity: 1;
}

/* Le grain est dessiné dans le fond lui-même : la couche de grain CSS, coûteuse à
   superposer sur un canvas animé, n'a plus lieu d'être */
.lc-hero.has-fond .lc-hero__aura,
.lc-hero.has-fond::after{
    display: none;
}

/* Le vinyle et l'anneau tournent en permanence : on les confie à la carte graphique,
   sinon le navigateur les redessine à chaque image */
.lc-orbit__ring,
.lc-coin__face img{
    will-change: transform;
}

.lc-hero::after{
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--grain);
    opacity: 0.18;
    mix-blend-mode: multiply;
    pointer-events: none;
}

@keyframes lc-drift{
    to{ translate: -8% -6%; scale: 1.15; }
}

/* Le logo et son anneau de mots-clés */
.lc-orbit{
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    /* 80 % de la hauteur laissée libre par la navigation et les photos */
    width: min(80vw, calc((100svh - var(--strip-peek) - var(--nav-h) - 3.5rem) * 0.8));
    aspect-ratio: 1;
    cursor: grab;
    touch-action: pan-y; /* le doigt peut toujours faire défiler la page verticalement */
    user-select: none;
    -webkit-user-select: none;
}

.lc-orbit.is-dragging{
    cursor: grabbing;
}

.lc-orbit > *{
    grid-area: 1 / 1;
}

.lc-orbit__ring{
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.lc-orbit__ring text{
    fill: var(--c-ink-deep);
    font-family: var(--font-sans);
    font-size: 17px; /* dans le repère de l'anneau : environ 14 px à l'écran */
    font-weight: 500;
}

/* La présentation : en bas à gauche, à plat, au-dessus des photos. Un titre, un petit texte aéré, un lien. */
.lc-hero__phrase{
    position: absolute;
    left: var(--gutter);
    bottom: calc(var(--strip-peek) + 2.5rem);
    z-index: 1;
    display: grid;
    justify-items: start;
    gap: 0.75rem;
    max-width: 22rem;
    color: var(--c-ink-deep);
    font-size: 0.8125rem;
    line-height: 1.65;
    letter-spacing: 0.06em;
}

.lc-home .lc-hero__titre{
    margin: 0;
    color: inherit;
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2vw, 1.875rem);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 0;
}

/* Les césures invisibles du texte (front-page.php) ne servent qu'en version justifiée, sur mobile */
.lc-hero__phrase p{
    hyphens: none;
    -webkit-hyphens: none;
}

/* Seconde ligne du titre : le métier et la ville, en plus petit */
.lc-hero__metier{
    display: block;
    margin-top: 0.375rem;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.02em;
}

.lc-home .lc-hero__lien{
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.3em;
}

.lc-home .lc-hero__lien:hover{
    color: var(--c-green-text);
}

/* La pièce : recto le logo en couleur, verso sa version noire */
.lc-home .lc-coin{
    position: relative;
    z-index: 1;
    width: 66%;
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--c-cream);
    perspective: 75rem;
    cursor: pointer;
}

.lc-home .lc-coin:hover,
.lc-home .lc-coin:focus{
    background: none;
    color: var(--c-cream);
}

.lc-coin__inner{
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 800ms cubic-bezier(0.3, 1.3, 0.5, 1);
    animation: lc-peek 7s ease-in-out infinite;
}

/* De temps en temps la pièce s'entrouvre, pour montrer qu'elle se retourne */
@keyframes lc-peek{
    0%, 80%, 100%{ rotate: y 0deg; }
    90%{ rotate: y 24deg; }
}

.lc-coin.is-flipped .lc-coin__inner{
    transform: rotateY(180deg);
    animation: none;
}

.lc-coin__face{
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    box-shadow: 0 1.5rem 3rem color-mix(in srgb, var(--c-ink-deep) 30%, transparent);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.lc-home .lc-coin__face img{
    width: 100%;
    height: 100%;
}

.lc-coin__face--back{
    transform: rotateY(180deg);
}

/* ---------- Platine : commandes en haut à droite du hero ---------- */

.lc-player{
    position: absolute;
    top: calc(0.75rem + (var(--nav-h) - 2.5rem) / 2);
    right: var(--gutter);
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--c-ink-deep);
}

/* Chaque commande est en retrait (70 %) et revient à 100 % au survol ou au clavier */
.lc-liste__btn,
.lc-player__btn{
    opacity: 0.7;
    transition: opacity 200ms ease;
}

.lc-liste__btn:hover,
.lc-liste__btn:focus-visible,
.lc-liste__btn[aria-expanded="true"],
.lc-player__btn:hover,
.lc-player__btn:focus-visible,
.lc-volume:hover .lc-player__btn,
.lc-volume:focus-within .lc-player__btn{
    opacity: 1;
}

/* Dans la platine, le contour de focus reste fin et sombre */
.lc-player :focus-visible{
    outline: 2px solid var(--c-ink-deep);
    outline-offset: 2px;
}

/* Liste des morceaux : du texte et un chevron */
.lc-liste{
    position: relative;
    margin-right: 0.25rem;
}

.lc-home .lc-liste__btn{
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.5rem;
    padding: 0.5rem 0.25rem;
    border: 0;
    border-radius: var(--r-sm);
    background: none;
    color: var(--c-ink-deep);
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25;
    cursor: pointer;
}

.lc-home .lc-liste__btn:hover,
.lc-home .lc-liste__btn:focus{
    background: none;
    color: var(--c-ink-deep);
}

.lc-liste__titre{
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lc-liste__btn svg{
    flex: none;
    width: 0.625rem;
    height: 0.4375rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: rotate 200ms ease;
}

.lc-liste__btn[aria-expanded="true"] svg{
    rotate: 180deg;
}

/* Le menu déplié reprend les couleurs et la typo du site */
.lc-home .lc-liste__options{
    position: absolute;
    top: calc(100% + 0.25rem);
    right: 0;
    z-index: 1;
    display: grid;
    gap: 0.125rem;
    min-width: 100%;
    width: max-content;
    max-width: calc(100vw - 2 * var(--gutter));
    padding: 0.375rem;
    border-radius: var(--r-md);
    background: var(--c-cream-light);
    outline: none;
}

.lc-home .lc-liste__options[hidden]{
    display: none;
}

.lc-liste__options li{
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--r-sm);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25;
    cursor: pointer;
}

/* Pastille verte devant le vinyle en cours */
.lc-liste__options li::before{
    content: "";
    flex: none;
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
}

.lc-liste__options li[aria-selected="true"]::before{
    background: var(--c-green);
}

.lc-liste__options li:hover,
.lc-liste__options li.is-active{
    background: color-mix(in srgb, var(--c-ink-deep) 8%, transparent);
}

.lc-home .lc-player__btn{
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--c-ink-deep);
    cursor: pointer;
}

.lc-home .lc-player__btn:hover,
.lc-home .lc-player__btn:focus{
    background: none;
    color: var(--c-ink-deep);
}

.lc-player__btn svg{
    width: 1.125rem;
    height: 1.125rem;
    fill: currentColor;
}

/* Une seule des deux icônes est visible selon l'état */
.lc-volume__croix,
.lc-volume__btn.is-muted .lc-volume__ondes,
.lc-player__icone-stop,
.lc-player__lecture.is-playing .lc-player__icone-lecture{
    display: none;
}

.lc-volume__btn.is-muted .lc-volume__croix,
.lc-player__lecture.is-playing .lc-player__icone-stop{
    display: inline;
}

/* La jauge de volume se déplie sous le haut-parleur, au survol ou au clavier */
.lc-volume{
    position: relative;
}

.lc-volume__jauge{
    position: absolute;
    top: 100%;
    left: 50%;
    width: 2rem;
    height: 7rem;
    border-radius: 1rem;
    background: var(--c-cream-light);
    opacity: 0;
    visibility: hidden;
    translate: -50% -0.25rem;
    transition: opacity 200ms ease, translate 200ms ease, visibility 200ms;
}

.lc-volume:hover .lc-volume__jauge,
.lc-volume:focus-within .lc-volume__jauge{
    opacity: 1;
    visibility: visible;
    translate: -50% 0;
}

/* Jauge verticale : un curseur horizontal tourné d'un quart de tour, centré dans son fond */
.lc-home .lc-volume__jauge input{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5.5rem;
    max-width: none;
    height: 1rem;
    margin: 0;
    padding: 0;
    translate: -50% -50%;
    rotate: -90deg;
    accent-color: var(--c-ink-deep);
    cursor: pointer;
}

/* Roue de chargement à côté de la liste */
.lc-player__spinner{
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.5rem;
    border: 2px solid color-mix(in srgb, var(--c-ink-deep) 20%, transparent);
    border-top-color: var(--c-ink-deep);
    border-radius: 50%;
    animation: lc-spin 0.8s linear infinite;
}

.lc-player__spinner[hidden]{
    display: none;
}

/* Vinyle en attente : les faces laissent place à un disque gris qui miroite */
.lc-coin.is-loading .lc-coin__face{
    background: linear-gradient(
        100deg,
        color-mix(in srgb, var(--c-ink-deep) 14%, var(--c-cream)) 30%,
        color-mix(in srgb, var(--c-ink-deep) 5%, var(--c-cream)) 50%,
        color-mix(in srgb, var(--c-ink-deep) 14%, var(--c-cream)) 70%
    ) 0 0 / 300% 100%;
    box-shadow: none;
    animation: lc-miroite 1.4s linear infinite;
}

.lc-coin.is-loading .lc-coin__face img{
    opacity: 0;
}

.lc-home .lc-coin__face img{
    transition: opacity 300ms ease;
}

@keyframes lc-miroite{
    from{ background-position: 100% 0; }
    to{ background-position: -100% 0; }
}

/* ---------- Écran de chargement ---------- */

/* Affiché seulement si le script a posé lc-loading sur <html> (voir functions.php) */
.lc-loader{
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: none;
    place-items: center;
    background: var(--c-cream);
}

.lc-loading .lc-loader,
.lc-ready .lc-loader{
    display: grid;
}

/* Filet de sécurité : quoi qu'il arrive, l'écran s'efface au bout de 6 s */
.lc-loading .lc-loader{
    animation: lc-loader-sortie 400ms 6s forwards;
}

.lc-ready .lc-loader{
    animation: lc-loader-sortie 500ms ease forwards;
}

@keyframes lc-loader-sortie{
    to{ opacity: 0; visibility: hidden; }
}

/* Le logo tourne comme un disque, à la vitesse d'un 33 tours */
.lc-home .lc-loader__logo{
    width: clamp(5rem, 12vw, 8rem);
    height: auto;
    animation: lc-spin 1.8s linear infinite;
}

/* ---------- Projets ---------- */

/* flow-root : la marge négative de la bande remonte les photos, pas la section entière */
.lc-projets{
    display: flow-root;
    padding-top: 0;
    /* Arrivée par l'ancre : la bande de photos se cale au milieu de l'écran
       (on retire le scroll-padding-top global, déjà compté par le navigateur) */
    scroll-margin-top: calc(50svh + var(--strip-peek) - var(--strip-h) / 2 - var(--nav-h) - 2rem);
}

/* Bande de photos : elle déborde dans le hero pour qu'on l'entrevoie dès l'arrivée */
.lc-home .lc-strip{
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
    margin-top: calc(-1 * var(--strip-peek));
    padding-inline: var(--gutter);
}

.lc-home .lc-strip__item{
    position: relative;
    display: block;
    height: var(--strip-h);
    overflow: hidden;
    border-radius: var(--r-md);
    color: var(--c-cream);
}

.lc-home .lc-strip__img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.lc-strip__item:hover .lc-strip__img,
.lc-strip__item:focus-visible .lc-strip__img{
    transform: scale(1.07);
}

/* Le titre n'apparaît qu'au survol ou au focus */
.lc-strip__titre{
    position: absolute;
    inset: auto 0 0;
    padding: 3rem 1rem 1rem;
    background: linear-gradient(transparent, color-mix(in srgb, var(--c-ink-deep) 90%, transparent));
    font-family: var(--font-serif);
    font-size: 1.125rem;
    line-height: 1.25;
    opacity: 0;
    translate: 0 0.5rem;
    transition: opacity 300ms ease, translate 300ms ease;
}

.lc-strip__item:hover .lc-strip__titre,
.lc-strip__item:focus-visible .lc-strip__titre{
    opacity: 1;
    translate: 0;
}

.lc-projets__pied{
    display: flex;
    justify-content: center;
    padding-top: clamp(3rem, 6vw, 5rem);
}

/* ---------- Services ---------- */

.lc-services__grid{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
    gap: 1.5rem;
}

.lc-service{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}

.lc-home .lc-service__title{
    margin: 0;
    color: inherit;
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.2;
}

/* Le web design, cœur de l'offre : carte sombre, sur toute la hauteur */
.lc-service--main{
    background: var(--c-ink-deep);
    color: var(--c-cream);
}

.lc-home .lc-service--main .lc-service__title{
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.5vw, 3rem);
    line-height: 1.05;
}

.lc-service--main p{
    font-size: 1.125rem;
}

.lc-service--main .btn{
    margin-top: auto;
}

.lc-services__side{
    display: grid;
    align-content: start;
    gap: 2rem;
}

.lc-services__group{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem 1.5rem;
}

.lc-services__label{
    grid-column: 1 / -1;
    color: var(--c-green-text);
    font-family: var(--font-serif);
    font-size: 1.125rem;
    line-height: 1.3;
}

/* Deux petits stickers, chacun dans son coin : ils ponctuent sans concurrencer les cartes */
.lc-services__sparkle{
    top: clamp(2rem, 5vw, 4rem);
    right: var(--gutter);
    width: clamp(3rem, 5vw, 4.5rem);
}

.lc-services__gribouille{
    bottom: 1.5rem;
    left: var(--gutter);
    width: clamp(2.5rem, 4vw, 3.5rem);
}

/* ---------- Avis ---------- */

.lc-carousel{
    max-width: 52rem;
    margin-inline: auto;
}

/* Un avis par écran : la piste défile horizontalement et s'aimante sur chaque avis */
.lc-home .lc-carousel__piste{
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    border-radius: var(--r-lg);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.lc-carousel__piste::-webkit-scrollbar{
    display: none;
}

.lc-carousel__slide{
    display: grid;
    flex: 0 0 100%;
    scroll-snap-align: start;
}

.lc-home .lc-temoignage{
    display: grid;
    grid-template-rows: 1fr auto;
    gap: 2rem;
    margin: 0;
    padding: clamp(1.5rem, 4vw, 3rem);
    /* Carte translucide : le fond de la section transparaît, le texte passe en clair */
    border: 1px solid color-mix(in srgb, var(--c-cream) 18%, transparent);
    background: color-mix(in srgb, var(--c-cream-light) 10%, transparent);
    color: var(--c-cream);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.lc-home .lc-temoignage blockquote{
    margin: 0;
    padding: 0;
    border: 0;
    font-family: var(--font-serif);
    font-size: clamp(1.125rem, 2vw, 1.5rem);
    font-style: normal;
    line-height: 1.5;
}

.lc-temoignage blockquote::before{
    content: "“";
    display: block;
    height: 2.5rem;
    color: var(--c-green);
    font-family: var(--font-display);
    font-size: 4rem;
    line-height: 1;
}

.lc-temoignage figcaption{
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
}

/* La couleur est forcée : le thème parent grise les figcaption */
.lc-home .lc-temoignage__nom{
    color: var(--c-cream);
    font-weight: 700;
}

.lc-home .lc-temoignage__projet{
    color: var(--c-green);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.lc-home .lc-temoignage__projet:hover{
    color: var(--c-cream);
}

.lc-carousel__nav{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    margin-top: 1.5rem;
}

.lc-carousel__nav[hidden]{
    display: none;
}

.lc-home .lc-carousel__btn{
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    padding: 0;
    border: 2px solid var(--c-cream);
    border-radius: 50%;
    background: none;
    color: var(--c-cream);
    cursor: pointer;
    transition: background-color 200ms ease, color 200ms ease;
}

.lc-home .lc-carousel__btn:hover,
.lc-home .lc-carousel__btn:focus-visible{
    background: var(--c-cream);
    color: var(--c-ink-deep);
}

.lc-carousel__btn svg{
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lc-carousel__compteur{
    min-width: 3rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.lc-avis__spikes{
    top: 2rem;
    right: var(--gutter);
    width: clamp(4rem, 7vw, 6rem);
}

/* ---------- Tarifs ---------- */

.lc-tarifs{
    background: var(--c-ink-deep);
    color: var(--c-cream);
}

/* Photo de fond, assombrie par le fond de la section qui transparaît */
.lc-tarifs__fond{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.45;
    pointer-events: none;
}

.lc-tarifs__grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 1.5rem;
}

.lc-tarif{
    position: relative;
    display: grid;
    gap: 1.25rem;
}

.lc-tarif--recommande{
    outline: 4px solid var(--c-green);
}

.lc-tarif__badge{
    position: absolute;
    top: 0;
    right: 1.5rem;
    padding: 0.25rem 0.75rem;
    border-radius: var(--r-sm);
    background: var(--c-ink-deep);
    color: var(--c-cream);
    font-size: 0.875rem;
    font-weight: 700;
    transform: translateY(-50%);
}

.lc-home .lc-tarif__nom{
    width: fit-content;
    margin: 0;
    padding: 0.5rem 1rem;
    border-radius: var(--r-sm);
    background: var(--c-green);
    color: var(--c-ink-deep);
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.25;
}

.lc-tarif__prix{
    font-family: var(--font-serif);
    font-size: 1.75rem;
    line-height: 1.2;
}

.lc-tarif__prix abbr{
    text-decoration: none;
}

.lc-tarifs__note{
    margin-top: 1.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
}

.lc-tarifs__circles{
    top: -3rem;
    right: var(--gutter);
    width: clamp(5rem, 9vw, 8rem);
}

/* ---------- Process ---------- */

.lc-process{
    padding-top: 0;
}

.lc-home .lc-process .lc-title{
    margin-bottom: 0.75rem;
}

.lc-process__intro{
    margin-bottom: clamp(2rem, 4vw, 3rem);
    font-size: 1.125rem;
    font-weight: 600;
    text-align: center;
}

/* Résumé : une ligne d'étapes numérotées reliées par un trait */
.lc-resume{
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 1.5rem;
    counter-reset: resume;
}

.lc-resume__step{
    position: relative;
    display: grid;
    align-content: start;
    gap: 0.5rem;
    padding-top: 3.5rem;
    counter-increment: resume;
}

.lc-resume__step::before{
    content: counter(resume);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--c-green);
    color: var(--c-ink-deep);
    font-weight: 700;
}

.lc-resume__step:not(:last-child)::after{
    content: "";
    position: absolute;
    top: 1.25rem;
    left: 2.5rem;
    width: calc(100% - 1rem);
    height: 2px;
    background: var(--c-ink);
    opacity: 0.25;
}

.lc-home .lc-resume__title{
    margin: 0;
    color: var(--c-ink);
    font-family: var(--font-serif);
    font-size: 1.375rem;
    font-weight: 400;
    line-height: 1.2;
}

.lc-details{
    margin-top: 2.5rem;
}

.lc-details summary{
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 3rem;
    padding: 0.75rem 1.5rem;
    border: 2px solid var(--c-ink);
    border-radius: var(--r-sm);
    font-weight: 700;
    list-style: none;
    cursor: pointer;
}

.lc-details summary::-webkit-details-marker{
    display: none;
}

.lc-details summary::after{
    content: "+";
    font-size: 1.25rem;
    line-height: 1;
}

.lc-details[open] summary::after{
    content: "−";
}

.lc-details summary:hover{
    background: var(--c-cream-light);
}

.lc-details[open] summary{
    margin-bottom: 1.5rem;
}

/* Lulu marche sur le bord de la section suivante */
.lc-home .lc-process__chat{
    display: block;
    width: 8rem;
    margin-top: 2rem;
    margin-bottom: calc(-1 * clamp(4rem, 9vw, 7rem) - 2px);
}

.lc-tabs{
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.lc-home .lc-tab{
    min-height: 3rem;
    padding: 0.75rem 1.5rem;
    border: 2px solid var(--c-green-text);
    border-radius: var(--r-sm);
    background: var(--c-white);
    color: var(--c-green-text);
    font-family: var(--font-serif);
    font-size: 1rem;
    line-height: 1.25;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 200ms ease;
}

.lc-home .lc-tab:hover{
    background: color-mix(in srgb, var(--c-green) 25%, transparent);
    color: var(--c-green-text);
}

.lc-home .lc-tab[aria-selected="true"]{
    border-color: var(--c-green);
    background: var(--c-green);
    color: var(--c-ink-deep);
}

/* Détail : toutes les étapes sur une ligne, qui défile horizontalement si elle déborde */
.lc-home .lc-steps{
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(15rem, 1fr);
    gap: 1rem;
    padding-bottom: 1rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--c-ink) 35%, transparent) transparent;
    counter-reset: etape;
}

.lc-step{
    display: grid;
    align-content: start;
    gap: 0.75rem;
    padding: 1.25rem;
    border-radius: var(--r-md);
    background: var(--c-white);
    font-size: 0.9375rem;
    line-height: 1.45;
    scroll-snap-align: start;
    counter-increment: etape;
}

.lc-home .lc-step__title{
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0;
    color: var(--c-ink);
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.2;
}

/* Le numéro reprend la typo et la taille du titre */
.lc-step__title::before{
    content: counter(etape);
    color: var(--c-green-text);
}

.lc-process__lines{
    top: -2rem;
    right: var(--gutter);
    width: clamp(3rem, 6vw, 5rem);
}

/* ---------- À propos ---------- */

.lc-about__inner{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    align-items: center;
    gap: clamp(2rem, 6vw, 5rem);
}

.lc-about__anim canvas{
    display: block;
    width: 100%;
    max-width: 30rem;
    height: auto;
    aspect-ratio: 1;
    margin-inline: auto;
}

.lc-about__text{
    display: grid;
    justify-items: start;
    gap: 1.25rem;
}

.lc-home .lc-about__text .lc-title{
    margin: 0 0 0.5rem;
}

.lc-about__text p{
    max-width: 38rem;
    font-size: 1.125rem;
}

.lc-about__cta{
    position: relative;
    margin-top: 0.5rem;
}

.lc-about__cta .btn{
    position: relative;
    z-index: 1;
}

.lc-about__star{
    top: -1.75rem;
    right: -1.5rem;
    width: 3.5rem;
}

.lc-about__globes{
    bottom: -2rem;
    left: -2rem;
    width: clamp(6rem, 10vw, 9rem);
    opacity: 0.6;
}

/* ---------- Variantes de titres et de sections ---------- */

.lc-home .lc-title--big{
    position: relative;
    width: fit-content;
    max-width: 100%;
    font-size: clamp(3rem, 8vw, 7rem);
    line-height: 0.95;
}

/* Trait tracé à la main sous le titre : il se dessine à l'arrivée dans l'écran */
.lc-scribble{
    position: absolute;
    left: 0;
    bottom: -0.2em;
    width: 100%;
    height: 0.22em;
    overflow: visible;
    fill: none;
    stroke: var(--c-green);
    stroke-width: 5;
    stroke-linecap: round;
    /* Le tracé se dévoile de gauche à droite (--trace : 1 = caché, 0 = entier).
       Un masque plutôt qu'un pointillé : avec non-scaling-stroke le pointillé se cale mal sur la longueur du trait. */
    clip-path: inset(-100% calc(var(--trace, 0) * 105% - 5%) -100% -5%);
}

.lc-scribble path{
    vector-effect: non-scaling-stroke;
}

/* Fond « aura » : sombre, avec des halos vert et magenta et un grain par-dessus */
.lc-aura{
    position: relative;
    isolation: isolate;
    background-color: var(--c-ink-deep);
    color: var(--c-cream);
}

.lc-aura::before,
.lc-aura::after{
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.lc-aura::before{
    background-image:
        radial-gradient(ellipse 55% 80% at 12% 15%, color-mix(in srgb, var(--c-green) 50%, transparent), transparent 70%),
        radial-gradient(ellipse 50% 75% at 90% 90%, color-mix(in srgb, var(--c-green) 32%, transparent), transparent 70%),
        radial-gradient(ellipse 35% 55% at 72% 5%, color-mix(in srgb, var(--c-magenta) 28%, transparent), transparent 70%);
}

.lc-aura::after{
    background-image: var(--grain);
    opacity: 0.4;
    mix-blend-mode: overlay;
}

/* ---------- Décors animés ---------- */

/* Les décors utilisent rotate/translate : transform reste libre pour la parallaxe (GSAP) */
.lc-services__gribouille,
.lc-about__star{
    animation: lc-spin 24s linear infinite;
}

.lc-about__star{
    animation-duration: 10s;
}

.lc-services__sparkle,
.lc-tarifs__circles,
.lc-avis__spikes{
    animation: lc-float 8s ease-in-out infinite;
}

@keyframes lc-spin{
    to{ rotate: 360deg; }
}

@keyframes lc-float{
    50%{ translate: 0 -1rem; }
}

/* Lulu : petit balancement pendant qu'elle avance (l'avancée est pilotée par le scroll) */
.lc-process__chat.is-walking{
    animation: lc-trot 0.5s ease-in-out infinite;
}

@keyframes lc-trot{
    50%{ translate: 0 -3px; rotate: -2deg; }
}

/* ---------- États de départ des animations ---------- */

/* Le hero est masqué jusqu'à ce que son animation d'entrée démarre.
   Filet de sécurité : si le script ne se charge pas, tout réapparaît au bout de 3 s. */
.lc-anim [data-hero],
.lc-anim .lc-strip > li{
    visibility: hidden;
    animation: lc-secours 0s 3s forwards;
}

@keyframes lc-secours{
    to{ visibility: visible; }
}

/* Process : le trait et les pastilles sont pilotés par deux variables animées */
.lc-resume__step::before{
    scale: var(--pop, 1);
}

.lc-resume__step:not(:last-child)::after{
    transform: scaleX(var(--trait, 1));
    transform-origin: left center;
}

/* ---------- Responsive ---------- */

@media (max-width: 68.75rem){
    /* Hero : en dessous de cette largeur, la phrase et les commandes de la platine n'ont plus la place
       de tenir autour du vinyle et de la navigation. La phrase passe sous le vinyle, dans le flux.
       Même seuil que le menu burger (css/header.css). */
    .lc-hero{
        align-content: center;
        gap: 2rem;
    }

    .lc-orbit{
        width: min(82vw, calc(100svh - var(--strip-peek) - var(--nav-h) - 18rem));
    }

    /* L'anneau est plus petit à l'écran : on grossit ses lettres pour qu'elles restent lisibles */
    .lc-orbit__ring text{
        font-size: 19px;
    }

    .lc-hero__phrase{
        position: static;
        justify-items: center;
        max-width: 21rem;
        padding-inline: 1rem;
        text-align: center;
    }

    /* Le paragraphe forme un bloc carré : justifié, avec des coupures de mots pour éviter les trous */
    .lc-hero__phrase p{
        text-align: justify;
        text-align-last: center;
        hyphens: auto;
        -webkit-hyphens: auto;
    }

    /* Le burger occupe le coin droit : les commandes de la platine passent à gauche, à sa hauteur */
    .lc-player{
        top: calc((var(--nav-h) - 2.5rem) / 2);
        right: auto;
        left: var(--gutter);
    }

    /* Sur les écrans étroits le titre se raccourcit pour ne pas toucher le burger */
    .lc-liste__titre{
        max-width: min(8.5rem, 100vw - 14rem);
    }

    .lc-home .lc-liste__options{
        right: auto;
        left: 0;
    }

    .lc-resume__step:not(:last-child)::after{
        transform: scaleY(var(--trait, 1));
        transform-origin: center top;
    }

    .lc-tarifs__grid{
        grid-template-columns: minmax(0, 1fr);
        max-width: 36rem;
        margin-inline: auto;
    }

    /* Résumé du process : les étapes passent en colonne, le trait devient vertical */
    .lc-resume{
        grid-auto-flow: row;
        max-width: 36rem;
        margin-inline: auto;
    }

    .lc-resume__step{
        padding: 0 0 0 4rem;
        min-height: 2.5rem;
    }

    .lc-resume__step:not(:last-child)::after{
        top: 2.5rem;
        left: 1.25rem;
        width: 2px;
        height: calc(100% - 1rem);
    }
}

@media (max-width: 53.125rem){
    /* La bande de photos défile horizontalement */
    .lc-home .lc-strip{
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 62%;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--gutter);
        scrollbar-width: none;
    }

    .lc-strip > li{
        scroll-snap-align: start;
    }

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

    .lc-about__anim canvas{
        max-width: 18rem;
    }

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

    .lc-services__sparkle,
    .lc-services__gribouille,
    .lc-avis__spikes,
    .lc-process__lines,
    .lc-about__globes{
        display: none;
    }

    .lc-tabs{
        flex-direction: column;
    }
}

@media (max-width: 35rem){
    .lc-home .btn{
        width: 100%;
    }

    .lc-actions{
        flex-direction: column;
    }

    .lc-details summary{
        width: 100%;
        justify-content: center;
    }
}

/* Écrans tactiles : les liens isolés sont assez hauts pour être touchés du doigt (44 px) */
@media (pointer: coarse){
    .lc-home .lc-hero__lien,
    .lc-home .lc-temoignage__projet{
        display: inline-flex;
        align-items: center;
        gap: 0.3em; /* l'espace entre le texte et la flèche, que la mise en ligne flexible supprime */
        min-height: 2.75rem;
    }
}

@media (prefers-reduced-motion: reduce){
    .lc-home .btn,
    .lc-home .lc-tab,
    .lc-home .lc-carousel__btn{
        transition: none;
    }

    .lc-deco,
    .lc-hero__aura,
    .lc-home .lc-loader__logo,
    .lc-coin.is-loading .lc-coin__face,
    .lc-process__chat,
    .lc-coin__inner,
    .lc-home .lc-coin,
    .lc-home .lc-strip__img,
    .lc-strip__titre{
        animation: none;
        transition: none;
    }
}