/**
 * Contrat entretien & ramonage.
 *
 * Préfixe : .lenain-contrat
 *
 * La carte-contrat façon coupon : carte anthracite dans un bloc blanc, coupée
 * par une découpe pointillée à encoches, tampon « sans coût supplémentaire »
 * à cheval sur le coin supérieur droit — sur le bord haut sous 700px, où le
 * coin devient intenable. Tout le décor vit ici.
 *
 * HYPOTHÈSE DE FOND : les encoches de la découpe sont peintes en blanc — le
 * bloc suppose un fond de page blanc derrière lui. Ni la section ni la carte
 * ne rognent (pas d'overflow:hidden) : les encoches et le tampon débordent,
 * le débord haut du tampon (~35px, et sa moitié — au plus 48px — sous 700px)
 * vit dans la marge de section (--lp-section-gap-sm, 72 → 112px).
 */

.lenain-contrat__inner {
    display: block;
}

/*
 * Le wrapper ne peint RIEN : chaque volet porte son fond et ses angles — au
 * survol, le coupon pivote et le fond de page se voit réellement dans
 * l'interstice de la perforation.
 */
.lenain-contrat__carte {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    color: var(--wp--preset--color--white);

    /*
     * Taille du tampon. Au-dessus du seuil étroit, la valeur de la maquette :
     * le disque ET son pictogramme s'y réfèrent, aucune taille ne vit plus
     * ailleurs — c'est ce qui empêche le picto de se décaler du disque.
     */
    --lp-tampon-taille: 118px;
}

/* ------------------------------------------------------------- Le récit */

/*
 * La déchirure est vraie : chaque volet porte SA moitié de perforation — la
 * demi-encoche est RETIRÉE de la forme par un mask (l'ombre portée, en
 * drop-shadow, épouse le contour découpé), et chaque bord porte sa demi-rangée
 * de pointillés blancs (la couleur du fond de page : dans l'interstice ils se
 * fondent, sur l'anthracite ils dessinent les trous). Au survol, la moitié
 * droite suit le volet qui pivote, la gauche reste : la découpe se sépare.
 */
.lenain-contrat__content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding: 56px 64px 56px 56px;
    background: var(--wp--preset--color--anthracite);
    border-radius: var(--lp-radius-lg) 0 0 var(--lp-radius-lg);
    /* Rayon FIXE en px (jamais d'ellipse ni de %) : l'encoche reste un cercle
       parfait quelle que soit la largeur du volet — le même rayon sur les
       quatre demi-encoches des deux volets. */
    --lp-encoche: 14px;

    -webkit-mask: radial-gradient(circle var(--lp-encoche) at right top, transparent calc(var(--lp-encoche) - 0.5px), #000 var(--lp-encoche)),
        radial-gradient(circle var(--lp-encoche) at right bottom, transparent calc(var(--lp-encoche) - 0.5px), #000 var(--lp-encoche));
    -webkit-mask-composite: source-in;
    mask: radial-gradient(circle var(--lp-encoche) at right top, transparent calc(var(--lp-encoche) - 0.5px), #000 var(--lp-encoche)),
        radial-gradient(circle var(--lp-encoche) at right bottom, transparent calc(var(--lp-encoche) - 0.5px), #000 var(--lp-encoche));
    mask-composite: intersect;
}

.lenain-contrat__content::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 1px;
    background: repeating-linear-gradient(to bottom, var(--wp--preset--color--white) 0 4px, transparent 4px 9px);
}

/* Le sur-titre est le PREMIER paragraphe : stylé par sa position. */
.lenain-contrat__content > p:first-child {
    margin: 0;
    font-size: var(--wp--preset--font-size--xxs);
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgb(255 255 255 / 0.55);
}

.lenain-contrat__content h2 {
    margin: 0;
    color: var(--wp--preset--color--white);
    font-size: var(--wp--preset--font-size--xl-3);
    line-height: 1.4;
}

.lenain-contrat__content > p:not(:first-child) {
    margin: 0;
    max-width: 52ch;
    font-size: var(--wp--preset--font-size--base);
    line-height: 1.75;
    color: rgb(255 255 255 / 0.82);
}

/* ------------------------------------------------------------- Le coupon */

/*
 * Le coupon porte son propre fond : au survol, il se « détache » d'un cheveu
 * le long de la perforation — rotation légère depuis la ligne, retour souple
 * à ressort. La carte du dessous étant du même anthracite, seul le geste se
 * voit, jamais de déchirure ; encoches et pointillé vivent sur le coupon et
 * suivent d'un bloc, sans se désolidariser.
 */
.lenain-contrat__coupon {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 22px;
    padding: 64px 40px 48px;
    /* Le volet droit mord d'un pixel sous le gauche : la jointure ne laisse
       filtrer aucun liseré subpixel au repos — l'interstice n'existe qu'au
       survol, quand le coupon s'écarte. */
    margin-left: -1px;
    background: var(--wp--preset--color--anthracite);
    border-radius: 0 var(--lp-radius-lg) var(--lp-radius-lg) 0;
    --lp-encoche: 14px;

    -webkit-mask: radial-gradient(circle var(--lp-encoche) at left top, transparent calc(var(--lp-encoche) - 0.5px), #000 var(--lp-encoche)),
        radial-gradient(circle var(--lp-encoche) at left bottom, transparent calc(var(--lp-encoche) - 0.5px), #000 var(--lp-encoche));
    -webkit-mask-composite: source-in;
    mask: radial-gradient(circle var(--lp-encoche) at left top, transparent calc(var(--lp-encoche) - 0.5px), #000 var(--lp-encoche)),
        radial-gradient(circle var(--lp-encoche) at left bottom, transparent calc(var(--lp-encoche) - 0.5px), #000 var(--lp-encoche));
    mask-composite: intersect;
    transform-origin: left center;
    /* Rastérisé une fois puis transformé comme une texture : le bord masqué
       n'est plus recalculé en subpixel à chaque frame de l'animation. */
    will-change: transform;
    transition:
        transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
        background-color 0.45s ease,
        filter 0.45s ease;
}

/* Sa demi-rangée de pointillés, sur son bord — elle pivote avec lui. */
.lenain-contrat__coupon::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 1px;
    background: repeating-linear-gradient(to bottom, var(--wp--preset--color--white) 0 4px, transparent 4px 9px);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    /* Saisi : le coupon s'écarte le long de la perforation et s'éclaircit.
       L'ombre est un drop-shadow : appliquée après le mask, elle épouse le
       contour réellement découpé, creux des encoches compris. Le sélecteur
       renforcé (reveal) prime sur le `transform: none` de l'état révélé,
       que la feuille de rythme déclare après celle du bloc. */
    .lenain-contrat__coupon:hover,
    .lenain-contrat__coupon.lenain-reveal.is-visible:hover {
        transform: rotate(1.2deg) translateX(3px);
        background: color-mix(in srgb, var(--wp--preset--color--anthracite) 91%, var(--wp--preset--color--white));
        filter: drop-shadow(0 10px 14px rgb(0 0 0 / 0.25));
    }
}

/* Le bouton : la déclinaison claire du CTA, sur la carte sombre. */
.lenain-contrat__coupon .leb-cta {
    --lp-cta-bg: var(--wp--preset--color--white);
    --lp-cta-bg-hover: #e9e9e6;
    --lp-cta-border: var(--wp--preset--color--white);
    --lp-cta-border-hover: #e9e9e6;
    --lp-cta-text: var(--wp--preset--color--anthracite);
    --lp-cta-text-hover: var(--wp--preset--color--anthracite);
    --lp-cta-dot: var(--wp--preset--color--rose);
    --lp-cta-arrow: var(--wp--preset--color--white);
}

.lenain-contrat__phone {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--wp--preset--color--white);
    font-size: var(--wp--preset--font-size--lg);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-decoration: none;
}

.lenain-contrat__phone-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--wp--preset--color--white);
    border-radius: 50%;
    flex: 0 0 auto;
    color: var(--wp--preset--color--rose);
    transition: transform 0.3s ease;
    transform-origin: bottom left;
}

/* Le combiné salue, comme au header. */
.lenain-contrat__phone:hover .lenain-contrat__phone-ico,
.lenain-contrat__phone:focus-visible .lenain-contrat__phone-ico {
    transform: rotate(-8deg);
}

/* ------------------------------------------------------------- Le tampon */

/*
 * À cheval sur le coin supérieur droit — un tiers dehors, deux tiers dedans.
 * Le filet rose le détoure sur n'importe quel fond. (Sous 700px, cette
 * disposition mord sur le titre : voir la bascule en fin de feuille.)
 */
.lenain-contrat__tampon {
    position: absolute;
    top: 0;
    right: 0;
    width: var(--lp-tampon-taille);
    height: var(--lp-tampon-taille);
    /* L'ancrage au coin vit dans deux variables : l'animation d'apposition et
       la disposition étroite les recomposent sans dupliquer le transform. Les
       variables --lp-tampon-x/y sont posées par view.js (magnétisme) ; le
       lissage est ici. */
    --lp-tampon-ancre-x: 30%;
    --lp-tampon-ancre-y: -30%;

    transform: translate(calc(var(--lp-tampon-ancre-x) + var(--lp-tampon-x, 0px)), calc(var(--lp-tampon-ancre-y) + var(--lp-tampon-y, 0px))) rotate(10deg);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    z-index: 2;
}

.lenain-contrat__tampon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.lenain-contrat__tampon-fond {
    fill: var(--wp--preset--color--rose);
    stroke: var(--wp--preset--color--white);
    stroke-width: 1;
}

.lenain-contrat__tampon-pointille {
    fill: none;
    stroke: color-mix(in srgb, var(--wp--preset--color--rose) 45%, var(--wp--preset--color--white));
    stroke-width: 1;
    stroke-dasharray: 2 3;
}

/* Le cœur blanc qui porte le pictogramme couleur. */
.lenain-contrat__tampon-coeur {
    fill: var(--wp--preset--color--white);
}

.lenain-contrat__tampon-texte {
    fill: var(--wp--preset--color--white);
    font-family: var(--wp--preset--font-family--body);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/*
 * Le pictogramme est centré par `inset:0 + margin:auto` DANS le span : sa taille
 * doit donc suivre celle du span, pas une valeur propre — sinon disque et picto
 * se désynchronisent dès que l'un des deux change de palier. Il garde le rapport
 * exact de la maquette (40 sur 118) et reste calé sur le cœur blanc du disque.
 */
.lenain-contrat__tampon-ico {
    position: absolute;
    inset: 0;
    margin: auto;
    width: calc(var(--lp-tampon-taille) * 40 / 118);
    height: auto;
}

/*
 * Apparition — l'objet se raconte : le ticket se POSE (fondu + scale 0.97→1,
 * une pointe de rotation qui se stabilise), puis le tampon s'APPOSE d'un
 * « toc » (scale 1.35→1, rebond sec) 0.4s après. Les états cachés n'existent
 * que si reveal.js a armé (.lenain-reveal) : sans script, rien n'est masqué ;
 * sous prefers-reduced-motion le script ne tourne pas. Le toc est une
 * ANIMATION (jouée une fois) : le magnétisme reprend ensuite sa transition
 * sans conflit de transform.
 */
.lenain-contrat__content.lenain-reveal:not(.is-visible),
.lenain-contrat__coupon.lenain-reveal:not(.is-visible) {
    transform: scale(0.97) rotate(-0.5deg);
}

.lenain-contrat__content.lenain-reveal.is-visible,
.lenain-contrat__coupon.lenain-reveal.is-visible {
    transition:
        opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        background-color 0.45s ease,
        filter 0.45s ease;
    transition-delay: 0s;
}

/* Au survol, le détachement retrouve son ressort. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .lenain-contrat__coupon.lenain-reveal.is-visible:hover {
        transition:
            transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
            background-color 0.45s ease,
            filter 0.45s ease;
    }
}

.lenain-contrat__tampon.lenain-reveal.is-visible {
    animation: lenain-tampon-toc 0.45s cubic-bezier(0.3, 1.4, 0.5, 1) 0.4s both;
    /* Une fois le toc joué, le magnétisme retrouve SON lissage — sans cette
       liste, la transition générique du reveal (0.9s) ramollirait le suivi. */
    transition:
        transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.9s var(--lp-ease);
}

@keyframes lenain-tampon-toc {
    from {
        opacity: 0;
        transform: translate(calc(var(--lp-tampon-ancre-x) + var(--lp-tampon-x, 0px)), calc(var(--lp-tampon-ancre-y) + var(--lp-tampon-y, 0px))) rotate(10deg) scale(1.35);
    }

    35% {
        opacity: 1;
    }

    65% {
        transform: translate(calc(var(--lp-tampon-ancre-x) + var(--lp-tampon-x, 0px)), calc(var(--lp-tampon-ancre-y) + var(--lp-tampon-y, 0px))) rotate(10deg) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translate(calc(var(--lp-tampon-ancre-x) + var(--lp-tampon-x, 0px)), calc(var(--lp-tampon-ancre-y) + var(--lp-tampon-y, 0px))) rotate(10deg) scale(1);
    }
}

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

@media (max-width: 900px) {
    .lenain-contrat__carte {
        grid-template-columns: minmax(0, 1fr);
    }

    .lenain-contrat__content {
        border-radius: var(--lp-radius-lg) var(--lp-radius-lg) 0 0;
        -webkit-mask: none;
        mask: none;
    }

    .lenain-contrat__content::after {
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: auto;
        height: 1px;
        background: repeating-linear-gradient(to right, var(--wp--preset--color--white) 0 4px, transparent 4px 9px);
    }

    /* La découpe devient horizontale, sans encoches. */
    .lenain-contrat__coupon {
        align-items: flex-start;
        text-align: left;
        margin-left: 0;
        margin-top: -1px;
        padding: 32px 36px 40px;
        border-radius: 0 0 var(--lp-radius-lg) var(--lp-radius-lg);
        -webkit-mask: none;
        mask: none;
    }

    .lenain-contrat__coupon::after {
        top: 0;
        right: 0;
        bottom: auto;
        left: 0;
        width: auto;
        height: 1px;
        background: repeating-linear-gradient(to right, var(--wp--preset--color--white) 0 4px, transparent 4px 9px);
    }

    .lenain-contrat__coupon::before,
    .lenain-contrat__coupon::after {
        content: none;
    }
}

@media (max-width: 640px) {
    .lenain-contrat__content {
        padding: 36px 24px 28px;
    }

    .lenain-contrat__coupon {
        padding: 28px 24px 32px;
    }
}

/*
 * BASCULE À 700px — deux dispositions, pas une adaptation continue.
 *
 * Mesuré sur cette carte : à 701px, l'ancrage au coin ne passe plus qu'à 1,8px
 * au-dessus du titre (avec 27,9px de recouvrement horizontal) ; à 699px il
 * mord franchement dessus (53,6 × 23,8px). 700px est donc la largeur exacte où
 * la position de coin devient intenable — c'est aussi, à l'identique, le seuil
 * que la feuille utilisait déjà pour le tampon.
 *
 * En dessous, le tampon quitte le coin : il se centre sur le BORD HAUT (moitié
 * dehors, moitié dedans) et rentre de 10% du bord droit, hors de l'aplomb du
 * texte ; la carte réserve en haut la hauteur de sa moitié visible.
 *
 * Cette réserve n'est ouverte QUE par la classe que le rendu pose lorsque le
 * tampon existe réellement (cf. render.php) : une carte sans tampon ne paie
 * aucun vide. Un drapeau serveur plutôt qu'un `:has()` — la réserve colle à ce
 * qui a été rendu, sans dépendre du support du sélecteur, et le repli en cas de
 * non-support serait précisément le défaut à corriger (texte sous le tampon).
 */
@media (max-width: 700px) {
    .lenain-contrat__carte {
        /* Fluide entre les deux paliers de la maquette (96 puis 80). */
        --lp-tampon-taille: clamp(100px, 17vw, 112px);
        /* Respiration entre le bas du tampon et la première ligne de texte. */
        --lp-tampon-marge: clamp(12px, 2.6vw, 18px);
        /*
         * Ce qui descend sous le bord haut de la carte : le tampon est centré
         * sur ce bord, mais incliné de 10° — la demi-hauteur de sa boîte
         * réellement peinte vaut taille × (cos10° + sin10°) / 2 ≈ 0,586.
         */
        --lp-tampon-debord: calc(var(--lp-tampon-taille) * 0.586);
    }

    .lenain-contrat__tampon {
        right: 10%;
        --lp-tampon-ancre-x: 0px;
        --lp-tampon-ancre-y: -50%;
    }

    /*
     * Empilée, c'est la carte de récit qui passe sous le tampon : la réserve
     * lui revient. Elle dépasse par construction les retraits de la maquette à
     * ces largeurs (59 à 68px contre 36 et 56px), d'où la valeur directe.
     */
    .lenain-contrat__carte--tampon .lenain-contrat__content {
        padding-top: calc(var(--lp-tampon-debord) + var(--lp-tampon-marge));
    }
}

/* ------------------------------------------------------------- Éditeur */

/*
 * Le canevas montre la carte et les quatre champs empilés ; la répartition en
 * volets et le décor complet appartiennent au rendu.
 */
.lenain-contrat--canvas {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding: 56px;
    background: var(--wp--preset--color--anthracite);
    border-radius: var(--lp-radius-lg);
    color: var(--wp--preset--color--white);
}

.lenain-contrat--canvas > p:first-child {
    margin: 0;
    font-size: var(--wp--preset--font-size--xxs);
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgb(255 255 255 / 0.55);
}

.lenain-contrat--canvas h2 {
    margin: 0;
    color: var(--wp--preset--color--white);
    font-size: var(--wp--preset--font-size--xl-3);
    line-height: 1.4;
}

.lenain-contrat--canvas > p:not(:first-child) {
    margin: 0;
    max-width: 52ch;
    font-size: var(--wp--preset--font-size--base);
    line-height: 1.75;
    color: rgb(255 255 255 / 0.82);
}