/* =====================================================================
   Landing pages de rachat  -  /go/<categorie>/<slug>-<id>.php
   ---------------------------------------------------------------------
   Charge UNIQUEMENT quand controller=Post ET category=go (voir header.php).
   Tout est scope sous .lp-vendre : le blog, l'accueil, le scan et le reste
   du site ne sont pas touches.

   Trois partis pris, dans l'ordre d'impact :
     1. le texte courant repasse en gris fonce (il etait bleu -> tout
        ressemblait a un lien, ca faisait page ecrite pour Google) ;
     2. l'orange redevient exclusivement l'appel a l'action (il etait sur
        les h1, les h2, les liens ET le bouton, donc il ne signalait plus rien) ;
     3. les titres quittent 'Fugaz One' pour Montserrat 700, deja chargee :
        registre "service" plutot que "dessin anime", sur une page ou le
        visiteur confie un colis et attend un virement.
   ===================================================================== */

.lp-vendre {
    --lp-text: #1f2933;   /* texte courant */
    --lp-soft: #52606d;   /* secondaire */
    --lp-link: #0069b4;   /* bleu de marque, reserve aux vrais liens */
    --lp-link-hover: #00507f;
    --lp-rule: #e4e7eb;
}

/* ---------- 1. Texte courant ---------------------------------------- */

.lp-vendre .content,
.lp-vendre .content p,
.lp-vendre .content li,
.lp-vendre .content td {
    color: var(--lp-text);
    font-size: 1.0625rem;
    line-height: 1.65;
}

/* PLEINE LARGEUR. Le texte occupe toute la colonne col-lg-12, comme le reste
   du site — arbitrage de Benjamin, 14/09/2026 : plus de colonne etroite, plus
   de centrage. Les deux tentatives precedentes sont retirees, pas commentees :
   une mesure en "ch" (qui donnait une boite differente par taille de police,
   148px d'ecart entre le H1 et son propre paragraphe) puis une colonne fer a
   gauche. Si un jour la longueur de ligne pose probleme, ca se regle avec un
   max-width en rem ICI, jamais en ch. */

.lp-vendre .content > p {
    margin-bottom: 1.15rem;
}

/* ---------- 2. Titres ------------------------------------------------ */

/* Depuis le 15/09/2026, Montserrat en gris foncé est la regle generale du
   site (custom.css) : la famille et la couleur arriveraient toutes seules.
   Ce qui compte encore ici, ce sont les TAILLES, reprises a l'identique dans
   css/client/pages-confiance.css (pages /go/) et dans le <style> de
   views/client/go/quiSommesNous.php. Tout changement se repercute dans les
   deux autres, sinon les trois familles de pages se mettent a diverger. */

.lp-vendre h1,
.lp-vendre .content h2,
.lp-vendre .content h3 {
    font-family: 'Montserrat', sans-serif;
    color: var(--lp-text);
}

.lp-vendre h1 {
    font-weight: 700;
    font-size: 2.125rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin-bottom: 1.4rem;
}

.lp-vendre .content h2 {
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.3;
    margin-top: 2.6rem;
    margin-bottom: 0.8rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--lp-rule);
}

.lp-vendre .content h3 {
    font-weight: 600;
    font-size: 1.1875rem;
    margin-top: 1.8rem;
    margin-bottom: 0.6rem;
}

/* ---------- 3. Liens : ils arretent de crier ------------------------- */
/* Etaient orange + font-weight 900 (.content a dans custom.css).
   Un paragraphe avec six mots en gras colore se lit comme du bourrage
   de mots-cles. On garde le lien lisible, on retire le hurlement. */

/* :not(.btn) est indispensable : le bloc 1-2-3 et son CTA sont injectes
   DANS $aPost['text'], donc ils tombent sous .content — sans cette
   exclusion le bouton orange passerait en bleu souligne. */
.lp-vendre .content a:not(.btn) {
    color: var(--lp-link);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.lp-vendre .content a:not(.btn):hover {
    color: var(--lp-link-hover);
    text-decoration: underline !important;
}

/* Le gras interne redevient du gras, pas une couleur d'alerte. */
.lp-vendre .content strong,
.lp-vendre .content b,
.lp-vendre .content .bold {
    color: var(--lp-text);
    font-weight: 600;
}

/* ---------- 4. Le bloc 1-2-3 ----------------------------------------- */

/* On ne retouche QUE l'habillage (bordure, arrondi, ombre).
   La geometrie d'origine est conservee telle quelle :
     - padding-top 50px = la reserve dans laquelle le rond vient se poser
       (.step_num est en position:absolute; top:-32px) ;
     - font-size .96rem / line-height 1.2rem / letter-spacing .6px =
       les valeurs qui font tomber "J'indique les jeux video" sur une ligne.
   Y toucher casse les cesures : c'est ce que j'avais fait. */

.lp-vendre .steps_process .step_card {
    position: relative;          /* ancre explicitement le rond sur SA carte */
    padding: 50px 8px 15px 8px;
    font-size: .96rem;
    line-height: 1.2rem;
    letter-spacing: .6px;
    border: 1px solid var(--lp-rule);
    border-top: 4px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .06);
}

.lp-vendre .steps_process .step_num {
    z-index: 2;                  /* le rond repasse devant, quoi qu'il arrive */
}

/* Le bloc 1-2-3 est enveloppe dans .container-fluid > .steps_process >
   .container : deux conteneurs Bootstrap imbriques qui ajoutent chacun 15px
   de padding et recentrent le tout. Resultat, il flottait au milieu pendant
   que le texte partait du bord gauche. On neutralise les deux. */
.lp-vendre .content .container-fluid,
.lp-vendre .steps_process > .container {
    max-width: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}

/* Les colonnes portent 7px de padding en style inline (dans la vue) : on cale
   la gouttiere de .row dessus, sinon le bord des cartes tombe 8px a gauche
   du bord du texte. */
.lp-vendre .steps_process .row {
    margin-left: -7px;
    margin-right: -7px;
}

/* L'image est en ligne, donc elle suivait l'alignement du texte (a gauche).
   Tant qu'elle remplissait la carte ca ne se voyait pas ; depuis qu'elle est
   plafonnee a 150px de haut, si. */
.lp-vendre .step_card img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-height: 150px;
    width: auto;
    object-fit: contain;
}

/* "bancaire." tout seul sur une 3e ligne : pretty repartit la fin de
   paragraphe pour supprimer le mot orphelin. Non supporte = rendu actuel. */
.lp-vendre .step_card .pr-0 {
    text-wrap: pretty;
}

.lp-vendre .step_card strong {
    font-weight: 700;
}

/* ---------- 5. L'appel a l'action ------------------------------------ */
/* Seul endroit ou l'orange subsiste : c'est tout l'interet de le liberer. */

/* Pleine largeur du bloc 1-2-3 qu'il conclut, et cale a gauche comme lui.
   (Le <a> porte deja .btn-block, donc width:100%.)

   La classe .btn-primary a ete RETIREE du markup : elle imposait sa couleur en
   !important et, au survol, inversait le bouton en blanc sur orange — un CTA
   qui palit quand la souris arrive. Tout est defini ici, sans !important. */
.lp-vendre .checkout_btn_orange {
    display: block;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding: 1rem 1.5rem;
    border: 0;
    border-radius: 10px;
    /* VERT, essai du 15/09/2026 (la classe garde son nom "orange" : elle est
       citee dans plusieurs vues, la renommer ferait plus de degats que de bien).

       Deux raisons de sortir de l'orange ICI et nulle part ailleurs :
         - sur une landing, ce bouton est la SEULE action de la page : il n'a
           personne a qui voler le signal, contrairement a l'accueil ou il
           cohabite avec les pastilles et le champ de scan ;
         - le vert dit "feu vert" et "argent", ce qui est exactement la fin du
           parcours promise juste au-dessus ("L'argent est verse sur mon compte").
       Degrade + ombre coloree : sur un fond gris clair, c'est le relief qui dit
       "objet cliquable", bien plus que la teinte.
       Pour revenir a l'orange : #f6a340 / #ef8500 / #dd7800 et l'ombre en
       rgba(224,122,0,...). */
    background: linear-gradient(180deg, #1faa5e 0%, #12864a 100%);
    color: #ffffff;
    text-align: center;
    box-shadow: 0 6px 16px rgba(18, 134, 74, .32);
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.lp-vendre .checkout_btn_orange:hover,
.lp-vendre .checkout_btn_orange:focus {
    background: linear-gradient(180deg, #12864a 0%, #0e7340 100%);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(18, 134, 74, .40);
}

.lp-vendre .cta_ligne {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
}

.lp-vendre .cta_ligne .fas {
    margin: 0 .6rem;
    font-size: .9em;
    opacity: .95;
}

/* La fleche avance au survol : micro-signal de direction, il confirme qu'on
   part quelque part et pas qu'on ouvre un accordeon. */
.lp-vendre .cta_fleche {
    transition: transform .15s ease;
}

.lp-vendre .checkout_btn_orange:hover .cta_fleche {
    transform: translateX(5px);
}

/* La ligne de leve-objection, juste sous le libelle : c'est elle qui repond au
   "ca va m'engager a quoi ?" au moment precis du clic. */
.lp-vendre .cta_sous {
    display: block;
    margin-top: .3rem;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.3;
    opacity: .92;
}

@media (max-width: 575px) {
    .lp-vendre .checkout_btn_orange {
        padding: .85rem 1rem;
    }

    /* "Cliquez ici pour estimer mes jeux PlayStation Portable" ne tient pas sur
       une ligne de telephone : le libelle se replie, la fleche reste collee au
       dernier mot plutot que de partir seule a la ligne. */
    .lp-vendre .cta_ligne {
        display: block;
        font-size: 1.0625rem;
    }

    .lp-vendre .cta_ligne .fas {
        margin: 0 .35rem;
    }

    .lp-vendre .cta_sous {
        font-size: .8125rem;
    }
}

/* ---------- 5 bis. Preuve chiffree sous le CTA ----------------------- */

/* Le compteur a son propre cadre : c'est une affirmation qui se suffit, elle
   ne se lit pas comme l'entete de la liste qui la suit. */
.lp-vendre .lp_compteur {
    margin: -1rem 0 1rem 0;   /* le CTA porte deja mb-5 au-dessus */
    padding: 1.1rem 1.5rem;
    border: 1px solid var(--lp-rule);
    border-radius: 10px;
    background: #ffffff;
    color: var(--lp-soft);
    font-size: 1.375rem;
    text-align: center;
}

/* Meme traitement que la preuve de l'accueil : le chiffre surligne au jaune
   du bouton Scan. C'est la meme promesse, appliquee a une console. */
/* Le logo est un JPEG sur fond blanc : il ne tient que parce que le cadre est
   blanc lui aussi. Si le fond du bloc change un jour, il faudra un PNG detoure.

   !important obligatoire : le conteneur de la landing porte la classe "blog",
   et custom02db.css y impose ".blog img { height: auto !important }". Sans lui
   le logo s'affiche a sa taille native (747px de large) et casse la ligne. */
.lp-vendre .lp_compteur_logo {
    height: 1.7em !important;
    width: auto;
    margin-left: .2rem;
    vertical-align: -.5em;
}

.lp-vendre .lp_compteur strong {
    padding: .02em .22em;
    color: var(--lp-text);
    font-size: 1.3em;
    font-weight: 700;
    background: linear-gradient(to top, #FEF222 72%, rgba(254, 242, 34, 0) 72%);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.lp-vendre .lp_preuve {
    margin: 0 0 2.5rem 0;
    padding: 1.25rem 0 1.25rem 1.5rem;
    border: 1px solid var(--lp-rule);
    border-radius: 10px;
    background: #ffffff;
    overflow: hidden;   /* le ruban deborde a droite, on le coupe net */
}

.lp-vendre .lp_preuve_titre {
    margin: 0 0 1rem 0;
    color: var(--lp-soft);
    font-size: .9375rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Meme mecanique que le bandeau des ventes de l'accueil : liste ecrite deux
   fois, translation de -50 %, raccord invisible. Les verrous de largeur sont
   obligatoires (cf. home.css) : un ruban de plusieurs milliers de pixels
   etire sa page s'il n'est pas borne. */
.lp-vendre .lp_preuve_piste {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.lp-vendre .lp_preuve_ruban {
    display: flex;
    width: max-content;
    margin: 0;
    padding: 0;
    list-style: none;
    animation: lp-ruban 45s linear infinite;
}

.lp-vendre .lp_preuve:hover .lp_preuve_ruban {
    animation-play-state: paused;
}

@keyframes lp-ruban {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.lp-vendre .lp_preuve_ruban li {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 132px;
    margin-right: 22px;
    text-align: center;
}

/* Hauteur fixe + contain : les jaquettes n'ont ni le meme format ni le meme
   cadrage (boitiers, visuels carres, captures), sans ca le ruban ondule.
   !important pour la meme raison que le logo : ".blog img" force height:auto. */
.lp-vendre .lp_preuve_ruban img {
    width: 100%;
    height: 132px !important;
    margin-bottom: .5rem;
    object-fit: contain;
}

/* Le logo console en secours ne doit pas se faire passer pour une jaquette :
   il occupe la meme boite, en plus discret. */
.lp-vendre .lp_preuve_ruban img.lp_preuve_secours {
    padding: 1.5rem .5rem;
    opacity: .55;
}

/* Hauteur figee a deux lignes, occupees ou non : sans ca le prix d'un jeu au
   titre court remonte et la ligne des prix part en escalier. */
.lp-vendre .lp_preuve_jeu {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 2.5em;
    color: var(--lp-text);
    font-size: .8125rem;
    line-height: 1.25;
}

.lp-vendre .lp_preuve_prix {
    margin-top: .25rem;
    color: #d97a06;
    font-size: 1.0625rem;
    font-weight: 700;
}

/* Un ruban qui bouge en permanence est un declencheur de nausee pour les
   personnes sensibles au mouvement, et le systeme le signale. */
@media (prefers-reduced-motion: reduce) {
    .lp-vendre .lp_preuve_ruban {
        width: auto;
        flex-wrap: wrap;
        justify-content: center;
        animation: none;
    }

    /* Sans animation les copies s'empilent et le ruban devient une grille de 20
       cartes, chaque jeu affiche deux fois. On ne garde que la premiere liste :
       les autres sont des doublons muets qui n'existaient que pour la boucle. */
    .lp-vendre .lp_preuve_ruban li[aria-hidden="true"] {
        display: none;
    }
}

@media (max-width: 767px) {
    .lp-vendre .lp_compteur {
        padding: .9rem 1rem;
        font-size: 1.125rem;
    }

    .lp-vendre .lp_preuve {
        padding: 1rem 0 1rem 1rem;
    }

    .lp-vendre .lp_preuve_ruban li {
        width: 108px;
        margin-right: 16px;
    }

    .lp-vendre .lp_preuve_ruban img {
        height: 108px;
    }
}

/* ---------- 6. Fil d'Ariane ------------------------------------------ */

.lp-vendre .breadcrumb,
.lp-vendre .breadcrumb a {
    font-size: 0.875rem;
    color: var(--lp-soft);
}

/* ---------- 7. Mobile ------------------------------------------------- */

@media (max-width: 767px) {
    .lp-vendre h1 {
        font-size: 1.625rem;
    }
    .lp-vendre .content h2 {
        font-size: 1.3125rem;
        margin-top: 2rem;
    }
    .lp-vendre .content,
    .lp-vendre .content p,
    .lp-vendre .content li {
        font-size: 1rem;
    }
    .lp-vendre .checkout_btn_orange {
        max-width: none;
    }
}