/*
Theme Name: Trylidays
Theme URI: https://trylidays.com
Author: Trylidays
Description: Thème sur mesure pour la plateforme Trylidays.
Version: 1.0
Text Domain: trylidays
*/
/* ---------------------------------------------------------------------------
   Badge « PRO »
   Signale un bien proposé par un professionnel de l'immobilier — l'acheteur
   n'a pas les mêmes recours selon qu'il traite avec un particulier ou une
   agence. Le badge accompagne toujours le NOM du vendeur, jamais le bien :
   c'est une qualité de la personne, pas du logement.
--------------------------------------------------------------------------- */
.t-pro-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 100px;
    background: var(--tl-primary-ink, #CA0025);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1.6;
    vertical-align: middle;
    /* Le badge ne doit jamais hériter d'une graisse ou d'une casse imposée
       par le nom qu'il suit. */
    text-transform: none;
}

/* ---------------------------------------------------------------------------
   Pied de page
   Fond quasi noir et accents cyan. Un seul partiel (parts/site-footer.php)
   sert désormais toutes les pages : il en existait deux, différents.
--------------------------------------------------------------------------- */
.tl-foot {
    /* Le pied de page gardait un bleu qui n'appartient a aucune palette du
       site. Il reprend le rouge de la marque, deja porte par --tl-primary
       partout ailleurs — le jeton du plugin d'abord, la valeur en repli si la
       feuille du plugin n'est pas chargee. */
    --tl-foot-accent: var(--tl-primary, #FF385C);
    --tl-foot-accent-fonce: var(--tl-primary-ink, #CA0025);

    background: #0B0B0B;
    color: #e6e6e6;
    padding: 76px 5vw 30px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

.tl-foot-top {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 3.2fr) minmax(0, 1.05fr);
    gap: 56px;
    max-width: 1600px;
    margin: 0 auto;
}

/* Filets verticaux entre les trois zones, comme sur la maquette. */
.tl-foot-nav,
.tl-foot-news {
    padding-left: 56px;
    border-left: 1px solid #262626;
}

.tl-foot-logo {
    display: inline-block;
    font-size: 40px;
    font-weight: 800;
    letter-spacing: -2px;
    line-height: 1;
    color: #fff;
    text-decoration: none;
}

.tl-foot-logo span {
    color: var(--tl-foot-accent);
}

.tl-foot-baseline {
    margin: 18px 0 0;
    font-size: 17px;
    font-weight: 600;
    color: var(--tl-foot-accent);
}

.tl-foot-pitch {
    margin: 16px 0 0;
    max-width: 34ch;
    font-size: 14.5px;
    line-height: 1.65;
    color: #9a9a9a;
}

/* Cinq colonnes sur une ligne : auto-fit les repliait en deux rangees des que
   la place manquait un peu, ce qui cassait la lecture horizontale du menu. */
.tl-foot-phone {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 22px;
    padding: 11px 18px 11px 14px;
    border: 1px solid #2e2e2e;
    border-radius: 100px;
    color: #fff;
    text-decoration: none;
}

.tl-foot-phone:hover {
    border-color: var(--tl-foot-accent);
}

.tl-foot-phone svg {
    flex-shrink: 0;
    color: var(--tl-foot-accent);
}

.tl-foot-phone-label {
    display: block;
    font-size: 11.5px;
    color: #8f8f8f;
}

.tl-foot-phone-number {
    display: block;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .3px;
}

/* LA BROCHURE PROFESSIONNELS.

   MEME FORME QUE LE BOUTON TELEPHONE JUSTE AU-DESSUS, et ce n'est pas de la
   paresse : les deux repondent a la meme question — « je veux en savoir plus
   avant de m'engager ». Leur donner deux allures differentes aurait fait
   passer le second pour un encart publicitaire au milieu du pied de page.

   « PROFESSIONNELS » ET NON « AGENCES & PROFESSIONNELS ». La colonne fait
   environ 225 px sur un ecran de 1500 ; le libelle long n'y tenait pas et les
   deux lignes se brisaient chacune en deux. Un mot plus court qui tient dit
   mieux les choses qu'un mot juste qui se coupe.

   TROIS DECLARATIONS DE LARGEUR, ET AUCUNE N'EST DE TROP :

     display: flex    le met SUR SA PROPRE LIGNE. En inline-flex il venait se
                      ranger a cote du bouton telephone des que la colonne
                      s'elargissait — deux pastilles cote a cote, dont la
                      seconde tranchee par le bord de l'ecran sur mobile.
     width: fit-content  il se cale sur son contenu, comme le telephone, au
                      lieu de s'etirer sur toute la colonne.
     max-width: 100%  et il ne depasse jamais, meme quand la colonne devient
                      plus etroite que le texte : le titre se replie alors sur
                      deux lignes, ce qui reste lisible. */
.tl-foot-doc {
    display: flex;
    width: fit-content;
    max-width: 100%;
    align-items: center;
    gap: 11px;
    margin-top: 12px;
    padding: 10px 14px;
    border: 1px solid #2e2e2e;
    border-radius: 100px;
    color: #fff;
    text-decoration: none;
    transition: border-color 180ms ease, background 180ms ease;
}

.tl-foot-doc:hover,
.tl-foot-doc:focus-visible {
    border-color: var(--tl-foot-accent);
    background: #141414;
}

.tl-foot-doc svg {
    flex-shrink: 0;
    color: var(--tl-foot-accent);
}

.tl-foot-doc-corps {
    min-width: 0;
}

.tl-foot-doc-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    color: #8f8f8f;
}

/* La pastille dit ce qui va se passer au clic, la ou un bouton muet laisse
   craindre une enieme page a lire. */
.tl-foot-doc-meta {
    flex-shrink: 0;
    padding: 2px 7px;
    border-radius: 100px;
    background: rgba(255, 56, 92, .14);
    color: var(--tl-foot-accent);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .08em;
}

.tl-foot-doc-title {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .1px;
}

.tl-foot-nav {
    display: grid;
    /* Le compte vient du tableau de colonnes, pose en --tl-foot-cols sur le
       <nav> par parts/site-footer.php. Ecrit ici en dur, il laissait une
       colonne vide des qu'on en retirait une. Le 4 de repli sert au cas ou la
       feuille de style serait servie sans le balisage qui l'accompagne. */
    grid-template-columns: repeat(var(--tl-foot-cols, 4), minmax(0, 1fr));
    gap: 30px 22px;
}

@media (max-width: 1280px) {
    .tl-foot-nav {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .tl-foot-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.tl-foot-col-title {
    margin: 0 0 16px;
    font-size: 11.5px;
    font-weight: 700;
    /* Interlettrage resserre : a 1,1 px, « PROPRIÉTAIRES » debordait de sa
       colonne et venait chevaucher le titre voisin. */
    letter-spacing: .7px;
    text-transform: uppercase;

    /* LE TITRE SE COUPE PLUTOT QUE DE DEBORDER.

       Il etait en nowrap, et ce nowrap a tenu tant que les titres etaient
       courts. « Expériences de vie » l'a mis en defaut : dans une colonne de
       grille en minmax(0, 1fr), un texte qui refuse de se couper ne retrecit
       pas la colonne — il SORT par la droite. Sur l'accueil comme sur le
       catalogue, la rangee se lisait « EXPÉRIENCES DE VIE VENDEURS », les deux
       titres l'un sur l'autre.

       Il se coupe donc. Mais s'il se coupait librement, la colonne sur deux
       lignes decalerait sa liste de 14 px vers le bas et la rangee de liens ne
       serait plus alignee : la hauteur minimale reserve les deux lignes pour
       TOUS les titres, qu'ils les utilisent ou non. */
    min-height: 2.5em;
    line-height: 1.25;
    text-wrap: balance;
    color: var(--tl-foot-accent);
}

.tl-foot-col ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tl-foot-col li + li {
    margin-top: 13px;
}

.tl-foot-col a {
    font-size: 14.5px;
    color: #d5d5d5;
    text-decoration: none;
}

.tl-foot-col a:hover {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Le titre du bloc contact partage la ligne des autres en-tetes de colonne. */
.tl-foot-news-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tl-foot-news-text {
    margin: 0 0 18px;
    font-size: 14px;
    line-height: 1.6;
    color: #9a9a9a;
}

.tl-foot-news-form {
    display: flex;
    gap: 10px;
}

.tl-foot-news-form input {
    flex: 1;
    min-width: 0;
    height: 48px;
    padding: 0 15px;
    border: 1px solid #2e2e2e;
    border-radius: 11px;
    background: #141414;
    font-family: inherit;
    font-size: 14.5px;
    color: #fff;
}

.tl-foot-news-form input::placeholder {
    color: #7d7d7d;
}

.tl-foot-news-form input:focus {
    outline: none;
    border-color: var(--tl-foot-accent);
}

.tl-foot-news-form button {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 52px;
    height: 48px;
    border: 0;
    border-radius: 11px;
    background: var(--tl-foot-accent);
    /* Blanc, et non plus le bleu-nuit d'origine : sur le rouge de la marque,
       un texte fonce tombe a 2,2:1 alors que le blanc tient 4,6:1. */
    color: #fff;
    cursor: pointer;
}

.tl-foot-news-form button:hover {
    background: var(--tl-foot-accent-fonce, #CA0025);
}

.tl-foot-news-legal {
    margin: 12px 0 0;
    font-size: 12px;
    line-height: 1.55;
    color: #7d7d7d;
}

.tl-foot-news-ok {
    margin: 10px 0 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--tl-foot-accent);
}

.tl-foot-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    max-width: 1600px;
    margin: 60px auto 0;
    padding-top: 26px;
    border-top: 1px solid #232323;
}

.tl-foot-copy,
/* Liens legaux et aide : 44 px de haut, on les vise au pouce. */
.tl-foot-legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 18px;
}

.tl-foot-legal a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 14px;
    color: rgba(255, 255, 255, .72);
    text-decoration: none;
}

.tl-foot-legal a:hover {
    color: #fff;
    text-decoration: underline;
}

.tl-foot-claim {
    margin: 0;
    font-size: 13.5px;
    color: #8f8f8f;
}

.tl-foot-claim span {
    margin-right: 7px;
    color: var(--tl-foot-accent);
}

.tl-foot-social {
    display: flex;
    gap: 11px;
}

/* Pastilles aux couleurs des marques : ce sont leurs identites, elles ne
   suivent pas la charte Trylidays. */
.tl-foot-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    color: #fff;
}

.tl-foot-social a:hover {
    transform: translateY(-2px);
}

.tl-foot-social-instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.tl-foot-social-facebook  { background: #1877f2; }
.tl-foot-social-linkedin  { background: #0a66c2; }
.tl-foot-social-youtube   { background: #ff0000; }

@media (max-width: 1100px) {
    .tl-foot-top {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    /* Les filets verticaux n'ont plus de sens en colonne unique. */
    .tl-foot-nav,
    .tl-foot-news {
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid #262626;
        padding-top: 34px;
    }
}

@media (max-width: 720px) {
    .tl-foot-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }
}

/* ---------------------------------------------------------------------------
   Inviter un propriétaire — fenêtre d'invitation par SMS
--------------------------------------------------------------------------- */
.tl-invite[hidden] {
    display: none;
}

.tl-invite {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    justify-content: center;

    /* LE REMBOURRAGE SE COMPTE DEDANS, ET C'EST UNE CORRECTION.
       En content-box, les 24 px s'AJOUTAIENT a la hauteur : la fenetre
       mesurait 100dvh + 48, et la carte qu'elle centre debordait donc de
       l'ecran par le haut ET par le bas. Mesure faite sur un ecran de 520 px
       de haut : fenetre 544, carte 542, haut a -11 px. */
    box-sizing: border-box;
    padding: 24px;

    /* CENTREE QUAND ELLE TIENT, ACCROCHEE EN HAUT QUAND ELLE NE TIENT PLUS.
       « align-items: center » centrait toujours — et une carte plus haute
       que l'ecran deborde alors des DEUX cotes a la fois. Or le
       debordement du haut n'est atteignable par aucun geste : le titre et
       l'explication devenaient inaccessibles, ce qui est exactement le
       defaut constate depuis le telephone.

       « margin: auto » sur la carte fait les deux : il centre tant qu'il
       reste de la place, et se reduit a zero des qu'il n'y en a plus. */
    align-items: flex-start;
}

/* dvh SUIT LA BARRE D'ADRESSE DU TELEPHONE, vh NON. Sur iOS et Android, vh
   se calcule sur la fenetre barre d'adresse RETRACTEE : la fenetre depassait
   donc du bas a l'ouverture, et les deux boutons se retrouvaient sous le
   bord de l'ecran. La regle vh reste juste avant, en repli. */
@supports (height: 100dvh) {
    .tl-invite {
        height: 100dvh;
    }
}

.tl-invite-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(12, 12, 12, .55);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.tl-invite-card {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 520px;

    /* Voir « align-items » plus haut : centree tant qu'elle tient. */
    margin: auto;

    /* SA HAUTEUR SE MESURE SUR SA FENETRE, PLUS EN UNITES D'ECRAN.
       C'etait calc(100vh - 48px) : « vh » se calcule sur la fenetre barre
       d'adresse RETRACTEE, donc plus haute que ce qu'on voit reellement, et
       la carte depassait d'autant. « 100 % » se mesure sur la boite de
       contenu de la fenetre, qui a deja la bonne hauteur et le bon
       rembourrage — il n'y a plus deux calculs a garder d'accord. */
    max-height: 100%;
    overflow-y: auto;
    /* Le defilement s'arrete au bord de la fenetre au lieu d'entrainer la
       page derriere elle. */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 34px 34px 28px;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .28);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    text-align: left;
}

/* La carte prend le curseur a l'ouverture sur telephone (tabindex="-1") :
   c'est ce qui evite que le navigateur fasse defiler jusqu'a un champ, mais
   certains navigateurs dessinent alors un contour autour de toute la carte.
   Il n'apprend rien — on sait qu'on est dans la fenetre, elle occupe l'ecran. */
.tl-invite-card:focus {
    outline: none;
}

.tl-invite-x {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: #f3f2ee;
    color: #46443f;
    cursor: pointer;
}

.tl-invite-x:hover {
    background: #e7e4dd;
}

.tl-invite-eyebrow {
    margin: 0 0 6px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #CA0025;
}

.tl-invite-title {
    /* « Demandez au proprietaire de vous laisser le tester avant de
       l'acheter. » fait trois fois la longueur de l'ancien « Ecrivez au
       proprietaire » : a 26 px fixes il occupait quatre lignes sur un
       telephone et noyait la promesse. La taille suit donc la largeur. */
    margin: 0 0 12px;
    font-size: clamp(21px, 5.2vw, 27px);
    font-weight: 800;
    letter-spacing: -.6px;
    line-height: 1.2;
    color: #101010;
    max-width: 22ch;
}

.tl-invite-lead {
    margin: 0 0 18px;
    font-size: 14.5px;
    line-height: 1.62;
    color: #5f6663;
}

/* ---------------------------------------------------------------------
   D'OU VIENT L'ANNONCE.

   Des pastilles TYPOGRAPHIQUES : le nom des plateformes dans la police de
   Trylidays, sur le gris de la maison. Aucun logo, aucune couleur de marque
   — la mention legale juste en dessous acheve de lever l'ambiguite.

   Leur role premier est de faire comprendre en une seconde OU l'on a pu
   trouver l'annonce. Qu'elles soient cliquables vient apres, et ne conduit
   a rien d'obligatoire. */
.tl-invite-sources {
    margin: 0 0 20px;
}

.tl-invite-sources-label {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 600;
    color: #101010;
}

.tl-invite-sources-facultatif {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #a9a69f;
}

.tl-invite-sources-liste {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* 40 px de haut : la cible tactile reste confortable sans transformer une
   question facultative en rangee de gros boutons. */
.tl-invite-source {
    min-height: 40px;
    padding: 0 15px;
    border: 1px solid #e7e4dd;
    border-radius: 100px;
    background: #fff;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: #46443f;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, color .16s ease;
}

.tl-invite-source:hover {
    border-color: #b9b5ad;
}

.tl-invite-source.is-choisie {
    border-color: #101010;
    background: #101010;
    color: #fff;
}

.tl-invite-source:focus-visible {
    outline: 2px solid #CA0025;
    outline-offset: 2px;
}

.tl-invite-sources-legal {
    margin: 10px 0 0;
    font-size: 11px;
    line-height: 1.5;
    color: #a9a69f;
}

/* Une respiration franche entre « ce que c'est » et « ce que je remplis ». */
.tl-invite-sep {
    height: 1px;
    margin: 0 0 20px;
    border: 0;
    background: #eeece7;
}

.tl-invite-card label {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 16px;
    font-size: 13.5px;
    font-weight: 600;
    color: #101010;
}

.tl-invite-card input,
.tl-invite-card textarea,
.tl-invite-card select {
    width: 100%;
    padding: 0 14px;
    border: 1px solid #e7e4dd;
    border-radius: 12px;
    background: #fff;
    font-family: inherit;
    /* 16 px, ET PAS UN DE MOINS. En dessous, Safari sur iPhone ZOOME sur le
       champ des qu'on le touche : la fenetre deborde alors de l'ecran et il
       faut pincer pour revenir. C'est la seule raison de ce chiffre. */
    font-size: 16px;
    font-weight: 400;
    color: #101010;
}

.tl-invite-card input,
.tl-invite-card select {
    height: 52px;
}

.tl-invite-card textarea {
    min-height: 74px;
    padding: 12px 14px;
    line-height: 1.5;
    resize: vertical;
}

.tl-invite-card select {
    /* Le chevron natif disparait avec l'apparence : on le redessine. */
    -webkit-appearance: none;
    appearance: none;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2346443f' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px 16px;
    cursor: pointer;
}

.tl-invite-card input:focus,
.tl-invite-card textarea:focus,
.tl-invite-card select:focus {
    outline: none;
    border-color: #CA0025;
}

/* « facultatif » ne doit pas peser autant que l'intitule du champ. */
/* Prenom et nom sur une meme ligne : ce sont deux moities d'une seule
   information. Ils se replient en dessous de 460 px, ou deux champs cote a
   cote deviennent illisibles. */
.tl-invite-duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 12px;
}

@media (max-width: 460px) {
    .tl-invite-duo {
        grid-template-columns: 1fr;
    }
}

.tl-invite-facultatif {
    margin-left: 6px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: #8a8781;
}

.tl-invite-intitule {
    display: block;
}

.tl-invite-hint {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.45;
    color: #8a8781;
}

.tl-invite-compteur {
    flex: none;
    font-variant-numeric: tabular-nums;
    color: #a9a69f;
}

/* « Ces quatre informations composent le message » : une phrase plutot que
   quatre asterisques, qui ne distingueraient rien puisque tout est requis. */
.tl-invite-requis {
    margin: 0 0 16px;
    font-size: 12.5px;
    line-height: 1.5;
    color: #8a8781;
}

/* Le champ fautif, et lui seul. « Un champ est vide » sans dire lequel
   oblige a relire tout le formulaire. */
.tl-invite-card input.est-en-defaut {
    border-color: #CA0025;
    background: #fffafa;
}

.tl-invite-error {
    margin: 0 0 12px;
    padding: 10px 14px;
    border-radius: 10px;
    background: #fdecec;
    font-size: 13.5px;
    color: #a12626;
}

.tl-invite-preview-label {
    margin: 6px 0 6px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #8a8781;
}

/* Le message est montré avant l'envoi : on n'expédie pas en son nom un texte
   qu'on n'a pas lu. */
.tl-invite-preview {
    margin: 0 0 10px;
    white-space: pre-line;
    padding: 14px 16px;
    border-radius: 12px;
    background: #f7f6f3;
    font-size: 13.5px;
    line-height: 1.6;
    color: #46443f;
}

.tl-invite-preview-note {
    margin: 0 0 20px;
    font-size: 12px;
    line-height: 1.55;
    color: #8a8781;
}

.tl-invite-bureau {
    margin: 12px 0 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: #5f6663;
}

.tl-invite-bureau[hidden] {
    display: none;
}

/* Le message occupe de la place : sur un telephone, le bouton d'envoi reste
   colle en bas de la fenetre plutot que d'attendre au bout du defilement. */
.tl-invite-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 -34px -28px;
    padding: 14px 34px 28px;
    background: #fff;
    box-shadow: 0 -14px 20px -14px rgba(0, 0, 0, .16);
}

.tl-invite-send,
.tl-invite-copy {
    flex: 1;
    min-width: 170px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 54px;
    padding: 0 20px;
    border-radius: 100px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
}

/* L'intitule le plus long du lot : il lui faut sa largeur, sinon il se casse
   en deux lignes dans le bouton. */
.tl-invite-send {
    gap: 9px;
    min-width: 248px;
    white-space: nowrap;
    border: 0;
    background: #101010;
    color: #fff;
}

.tl-invite-send svg {
    flex: none;
}

/* Sur un ordinateur, c'est la copie qui aboutit : elle prend la place forte,
   sans que le lien SMS disparaisse pour autant. On inverse le poids visuel,
   pas l'ordre des boutons : au clavier, on doit les rencontrer dans l'ordre
   ou on les voit. */
.tl-invite--bureau .tl-invite-send {
    background: #fff;
    border: 1px solid #d8d5ce;
    color: #101010;
}

.tl-invite--bureau .tl-invite-send:hover {
    background: #fff;
    border-color: #101010;
}

.tl-invite--bureau .tl-invite-copy {
    border: 0;
    background: #101010;
    color: #fff;
}

.tl-invite--bureau .tl-invite-copy:hover {
    background: #2a2a2a;
}

.tl-invite-send:hover {
    background: #2a2a2a;
}

.tl-invite-copy {
    border: 1px solid #d8d5ce;
    background: #fff;
    color: #101010;
}

.tl-invite-copy:hover {
    border-color: #101010;
}

.tl-invite-legal {
    margin: 16px 0 0;
    font-size: 12px;
    line-height: 1.55;
    color: #8a8781;
}

/* ---------------------------------------------------------------------
   TELEPHONE.

   La fenetre prend presque tout l'ecran, avec une marge franche de 12 px de
   chaque cote : c'est ce qui la fait lire comme une fenetre posee sur la
   page, et non comme une page de plus.

   Les deux boutons passent l'un SOUS l'autre. Cote a cote, « Ouvrir mon
   application SMS » reclame 248 px a lui seul : sur un ecran de 360 px ils
   se chevauchaient ou debordaient. Empiles, chacun garde toute la largeur —
   et l'action principale reste la premiere sous le pouce. */
@media (max-width: 520px) {
    .tl-invite {
        padding: 12px;
    }

    .tl-invite-card {
        /* Plus de max-height ici : « 100 % » se mesure sur la fenetre, dont
           le rembourrage vient de passer a 12 px juste au-dessus. Le calcul
           suit tout seul. */
        padding: 26px 20px 20px;
        border-radius: 20px;
    }

    .tl-invite-actions {
        flex-direction: column;
        gap: 10px;
        margin: 0 -20px -20px;
        padding: 14px 20px 20px;
    }

    .tl-invite-send,
    .tl-invite-copy {
        width: 100%;
        /* min-width: 248px sur un ecran de 360 px provoquait un debordement
           horizontal de toute la fenetre. */
        min-width: 0;

        /* « flex: 1 » (plus haut) vaut « flex-basis: 0 » : en COLONNE, c'est
           la hauteur qu'il met a zero, et les deux boutons se retrouvaient
           ecrases a 18 px — un trait noir sous le message, mesure sur
           telephone le 11 septembre 2026. Ici chacun garde sa hauteur. */
        flex: 0 0 auto;
        height: 54px;
    }

    .tl-invite-x {
        top: 12px;
        right: 12px;
    }

    /* Le surtitre doit contourner la croix de fermeture SANS se casser en
       deux lignes : « VOUS AVEZ REPERE UN BIEN A VENDRE ? » fait 34 signes,
       et la chasse de 1,4 px lui coutait a elle seule une trentaine de
       pixels. On la resserre plutot que de reduire la lisibilite. */
    .tl-invite-eyebrow {
        padding-right: 40px;
        font-size: 11px;
        letter-spacing: 1.1px;
    }
}

/* Mode de deplacement d'un point d'interet : « 5 min a pied » se lit d'un
   bloc, mais le mode reste secondaire par rapport a la duree. */
.t-distance-mode {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    font-weight: 400;
    color: #5f6663;
}