/* Parcours compte Trylidays — habillage front de l'authentification (.tlc-signin)
   et de la page Mon compte (.tlc-account / .tlc-profile).
   Namespaces indépendants des styles génériques du plugin (.tlc-form / .tlc-btn)
   pour éviter tout conflit de cascade. */

/* ---------- Coquille de page (page-connexion.php) ---------- */

/* Le gabarit de connexion n'embarque pas de <style> inline (contrairement à
   front-page.php / page.php) : la remise à zéro minimale vit donc ici. */
.tlc-signin-page,
.tlc-signin-page * {
    box-sizing: border-box;
}

.tlc-signin-page {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    background: #fff;
    color: #101010;
    -webkit-font-smoothing: antialiased;
}

/* Pas de reset global sur h1/p/a ici : ces sélecteurs (0,1,1) l'emporteraient
   sur les classes des composants (0,1,0) et écraseraient leurs marges et
   couleurs. Chaque élément du formulaire définit les siennes explicitement. */

.tlc-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.tlc-shell__nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 28px 5vw;
}

.tlc-shell__logo {
    font-size: 25px;
    font-weight: 800;
    letter-spacing: -1px;
    text-decoration: none;
    color: inherit;
}

.tlc-shell__back {
    font-size: 14px;
    font-weight: 600;
    color: #2A2A28;
    text-decoration: none;
    /* IL EST POSE A MEME LA PHOTO, jamais sur une carte. Un halo clair le
       detache d'un ciel comme d'un feuillage, sans lui donner le poids d'un
       bouton — ce qu'il n'est pas. */
    text-shadow: 0 1px 8px rgba(255, 255, 255, .95), 0 0 3px rgba(255, 255, 255, 1);
}

.tlc-shell__back:hover {
    color: #101010;
    text-decoration: underline;
}

.tlc-shell__nav-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* SORTIE DU COMPTE : UNE PASTILLE BLANCHE, comme sur la maquette.
   Elle etait un simple mot noir sur la photo ; des que le fond a gagne en
   presence, elle se perdait dans les feuillages. La pastille la detache sans
   crier, et c'est le seul element de l'en-tete qui merite d'etre trouve du
   premier coup d'oeil. */
.tlc-shell__logout {
    padding: 9px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 1px 2px rgba(23, 30, 38, .06), 0 6px 18px -10px rgba(23, 30, 38, .35);
    font-size: 14px;
    font-weight: 600;
    color: #101010;
    text-decoration: none;
    padding: 9px 16px;
    border: 1px solid #d8d5ce;
    border-radius: 100px;
    white-space: nowrap;
    transition: border-color .15s ease, background .15s ease;
}

.tlc-shell__logout:hover {
    border-color: #101010;
    background: #fff;
}

@media (max-width: 600px) {
    /* Logo + deux actions ne tiennent pas toujours sur une ligne à 390 px :
       on autorise le passage à la ligne plutôt qu'un débordement. */
    .tlc-shell__nav {
        flex-wrap: wrap;
        gap: 12px;
    }

    .tlc-shell__nav-actions {
        gap: 12px;
        margin-left: auto;
    }

    .tlc-shell__logout {
        padding: 8px 14px;
        font-size: 13.5px;
    }

    .tlc-shell__back {
        font-size: 13.5px;
    }
}

.tlc-shell__main {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 20px 48px;
}

.tlc-shell__foot {
    padding: 0 5vw 32px;
    text-align: center;
    font-size: 13px;
    /* Le pied de page est pose sur du creme, pas du blanc : le meme gris y
       perd du contraste. 4,15 contre un seuil de 4,5 — assombri juste ce
       qu'il faut. */
    color: #726F6A;
}

/* ---------- Carte de connexion ---------- */

.tlc-signin {
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
}

.tlc-signin__card {
    background: #fff;
    border: 1px solid #e7e4dd;
    border-radius: 20px;
    padding: 40px 40px 36px;
    box-shadow: 0 1px 2px rgba(16, 16, 16, .04), 0 12px 32px rgba(16, 16, 16, .06);
}

.tlc-signin__title {
    font-size: 28px;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -1px;
    margin: 0 0 10px;
}

.tlc-signin__subtitle {
    font-size: 15px;
    line-height: 1.55;
    color: #66635e;
    margin: 0 0 28px;
}

/* ---------- Messages ---------- */

.tlc-signin__alert {
    display: block;
    margin: 0 0 20px;
    padding: 13px 16px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.45;
}

.tlc-signin__alert--error {
    background: #fdf2f1;
    border: 1px solid #f0d7d4;
    color: #8a2f2a;
}

.tlc-signin__alert--success {
    background: #eef5ef;
    border: 1px solid #cfe2d3;
    color: #1e4620;
}

/* ---------- Formulaire ---------- */

.tlc-signin__form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.tlc-signin__field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tlc-signin__label-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.tlc-signin__label {
    font-size: 14px;
    font-weight: 600;
    color: #101010;
}

.tlc-signin__input {
    width: 100%;
    font-family: inherit;
    font-size: 16px;
    line-height: 1.2;
    color: #101010;
    min-height: 54px;
    padding: 0 16px;
    background: #fff;
    border: 1px solid #d8d5ce;
    border-radius: 12px;
    transition: border-color .15s ease, box-shadow .15s ease;
    -webkit-appearance: none;
    appearance: none;
}

.tlc-signin__input::placeholder {
    color: #a5a29b;
}

.tlc-signin__input:hover {
    border-color: #b9b5ac;
}

.tlc-signin__input:focus {
    outline: none;
    border-color: #101010;
    box-shadow: 0 0 0 3px rgba(16, 16, 16, .12);
}

/* Bouton texte « Afficher / Masquer » du mot de passe. */
.tlc-signin__toggle {
    background: none;
    border: 0;
    padding: 0;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: #5d5b57;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.tlc-signin__toggle:hover {
    color: #101010;
}

.tlc-signin__forgot {
    align-self: flex-start;
    font-size: 13.5px;
    color: #5d5b57;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.tlc-signin__forgot:hover {
    color: #101010;
}

.tlc-signin__submit {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 54px;
    margin-top: 4px;
    padding: 0 24px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 650;
    color: #fff;
    background: #101010;
    border: 1px solid #101010;
    border-radius: 100px;
    cursor: pointer;
    transition: opacity .2s ease, transform .2s ease;
}

.tlc-signin__submit:hover {
    opacity: .88;
}

.tlc-signin__submit:active {
    transform: translateY(1px);
}

/* ---------- Séparateur « ou » ---------- */

.tlc-signin__separator {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 26px 0;
    font-size: 13px;
    color: #767370;
}

.tlc-signin__separator::before,
.tlc-signin__separator::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e7e4dd;
}

/* ---------- Création de compte ---------- */

.tlc-signin__alt-text {
    margin: 0 0 14px;
    text-align: center;
    font-size: 14.5px;
    color: #66635e;
}

.tlc-signin__secondary {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 54px;
    padding: 0 24px;
    font-size: 15px;
    font-weight: 650;
    color: #101010;
    background: #fff;
    border: 1px solid #101010;
    border-radius: 100px;
    text-decoration: none;
    transition: background .2s ease, color .2s ease;
}

.tlc-signin__secondary:hover {
    background: #101010;
    color: #fff;
}

/* ---------- Accessibilité ---------- */

.tlc-signin :focus-visible,
.tlc-shell :focus-visible {
    outline: 2px solid #101010;
    outline-offset: 2px;
    border-radius: 4px;
}

.tlc-signin__input:focus-visible {
    outline: none;
}

/* ---------- Mobile ---------- */

@media (max-width: 600px) {

    .tlc-shell__nav {
        padding: 22px 20px;
    }

    .tlc-shell__logo {
        font-size: 22px;
    }

    .tlc-shell__main {
        padding: 12px 16px 48px;
    }

    .tlc-signin__card {
        padding: 28px 22px 26px;
        border-radius: 18px;
    }

    .tlc-signin__title {
        font-size: 25px;
        letter-spacing: -.6px;
    }

    .tlc-signin__subtitle {
        font-size: 14.5px;
        margin-bottom: 24px;
    }

    .tlc-signin__input,
    .tlc-signin__submit,
    .tlc-signin__secondary {
        min-height: 56px;
    }

    /* Aucun texte sous 14px sur mobile. */
    .tlc-signin__toggle,
    .tlc-signin__forgot,
    .tlc-signin__separator,
    .tlc-shell__foot {
        font-size: 14.5px;
    }
}

/* =========================================================================
   MON COMPTE
   La v0.31.0 du plugin embarque sa propre refonte complète de l'espace
   compte (templates/account-v2/, namespace .tlc-account-v2-*) avec ses
   styles. On ne redéfinit donc plus rien ici : le thème ne fournit que la
   coquille de page (page-mon-compte.php) et laisse le plugin habiller son
   contenu. Seule exception ci-dessous : la largeur de la zone centrale.
   ========================================================================= */

/* La coque account-v2 se contraint elle-même, mais l'ancienne mise en page
   (onglets autres que « Vue d'ensemble ») compte sur son conteneur : c'est
   ici qu'on borne la largeur, faute de quoi elle s'étale sur tout l'écran. */
.tlc-shell__main--wide {
    align-items: flex-start;
    padding-top: 16px;
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
}

/* .tlc-shell__main est un conteneur flex centré (justify-content: center) :
   sans largeur imposée, son enfant se dimensionne sur SON contenu et se
   recentre. La barre latérale de "Mon compte" se déplaçait donc
   horizontalement d'un onglet à l'autre, selon la largeur du contenu
   affiché à droite. On fixe la largeur de l'enfant : le cadre reste
   identique partout, seul le contenu de droite change. */
.tlc-shell__main--wide > * {
    width: 100%;
    min-width: 0;
}

@media (max-width: 600px) {

    .tlc-shell__main--wide {
        padding: 4px 16px 48px;
    }
}

/* =========================================================================
   L'ESPACE COMPTE RESPIRE UN LIEU, PAS UN TABLEAU DE BORD

   Trylidays vend des séjours dans de vrais logements ; son espace compte
   ressemblait à n'importe quel back-office. L'image est posée en fond de
   page — chalet enneigé d'un côté, mer et ville de l'autre : les deux
   saisons, les deux envies, en une seule vue.

   TROIS PRÉCAUTIONS, PARCE QU'UN FOND NE DOIT JAMAIS COÛTER UNE LECTURE.

   1. Elle est FIXE et très atténuée. Le contenu défile par-dessus ; l'image
      reste où elle est, comme une fenêtre derrière le bureau.
   2. Un voile blanc dense la recouvre. Les cartes de l'espace compte sont
      blanches : sans ce voile, un texte gris sur une photo claire tombe
      sous le seuil de contraste dès qu'une zone claire passe dessous.
   3. Sur téléphone, l'attachement fixe est abandonné — iOS le rend en
      étirant l'image de façon imprévisible, et le défilement en souffre.
      L'image reste, simplement solidaire de la page.
   ========================================================================= */

body.tlc-account-page {
    position: relative;
    background-color: #FBFAF8;
}

body.tlc-account-page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    /* WEBP D'ABORD, JPEG POUR LES AUTRES.
       image-set() laisse le navigateur choisir : ceux qui lisent le WebP
       prennent 57 Ko, les autres 110 Ko, et personne ne voit un fond
       manquant. La ligne url() qui suit sert de repli aux navigateurs qui
       ignorent image-set() : elle est ecrite AVANT, donc ecrasee des que la
       seconde est comprise. */
    /* LE NOM PORTE UNE EMPREINTE DU CONTENU, et ce n'est pas de la
       coquetterie : la premiere fois que ce fond a ete remplace, personne ne
       l'a vu. Le fichier avait le meme nom, les navigateurs ont resservi leur
       copie, et l'on a cherche le defaut dans le CSS. Une image differente a
       desormais une adresse differente — le cache ne peut plus mentir.

       Changer l'image : regenerer les fichiers, recalculer l'empreinte, et
       mettre a jour les quatre lignes ci-dessous. C'est le prix, il est bas. */
    background-image: url("img/compte-fond.da49e666.jpg");
    background-image: image-set(
        url("img/compte-fond.da49e666.webp") type("image/webp"),
        url("img/compte-fond.da49e666.jpg")  type("image/jpeg")
    );
    background-image: -webkit-image-set(
        url("img/compte-fond.da49e666.webp") type("image/webp"),
        url("img/compte-fond.da49e666.jpg")  type("image/jpeg")
    );
    background-size: cover;
    background-position: center 40%;
    background-repeat: no-repeat;
    /* Assez present pour qu'on RESSENTE le lieu — c'est tout l'objet — sans
       jamais disputer la lisibilite au contenu. Le voile ci-dessous s'en
       charge. */
    /* LE FOND EST LA POUR ETRE VU. La photo porte la promesse de Trylidays
       — la tasse et son slogan, le coussin de marque, la vue. Trop pale, il
       ne restait qu'un aplat beige et l'ecran ne racontait plus rien. Ce
       sont les CARTES, opaques, qui garantissent la lisibilite du contenu ;
       le voile ne protege que le peu de texte pose a meme le fond. */
    opacity: .96;
    pointer-events: none;
}

/* Le voile : c'est lui qui garantit la lisibilité, pas la chance. */
body.tlc-account-page::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        180deg,
        rgba(251, 250, 248, .16) 0%,
        rgba(251, 250, 248, .34) 40%,
        rgba(251, 250, 248, .62) 100%
    );
    pointer-events: none;
}

/* ---------------------------------------------------------------------------
   SUR UN ÉCRAN VERTICAL, LE CADRAGE CHANGE TOUT.

   L'image est panoramique (1600 × 941). Sur un téléphone en portrait,
   « cover » l'agrandit énormément et n'en garde qu'une bande centrale
   étroite — c'est-à-dire, ici, le mur beige vide entre les deux baies. Le
   chalet enneigé et la mer disparaissaient tous les deux, et l'écran
   redevenait un aplat sans propos. Mesuré : 77 % de l'écran occupé par ce
   vide.

   On décale donc le cadrage vers la gauche pour garder la baie sur la
   montagne, et on rend au fond l'intensité qu'on lui avait retirée : ce
   n'est pas la lisibilité qui l'exigeait — les cartes sont opaques — c'était
   une précaution devenue contre-productive.
   --------------------------------------------------------------------------- */

@media (max-width: 900px) {

    /* UNE IMAGE FAITE POUR L'ECRAN QU'ELLE OCCUPE.
       Decaler le cadrage aidait, mais sur 390 px de large les marges sont
       trop fines pour qu'on voie autre chose qu'une bande. Ce recadrage
       portrait est pris dans le tiers gauche de la photo — la baie sur la
       montagne, le feu, le canape : la partie qui RACONTE quelque chose. Le
       centre de l'image d'origine est un mur vide, sans propos sur un
       telephone. 44 Ko en WebP, servi UNIQUEMENT ici : un ecran large ne le
       telecharge jamais. */
    body.tlc-account-page::before {
        opacity: .8;
        background-position: center;
        background-image: url("img/compte-fond-portrait.a69aedfd.jpg");
        background-image: image-set(
            url("img/compte-fond-portrait.a69aedfd.webp") type("image/webp"),
            url("img/compte-fond-portrait.a69aedfd.jpg")  type("image/jpeg")
        );
        background-image: -webkit-image-set(
            url("img/compte-fond-portrait.a69aedfd.webp") type("image/webp"),
            url("img/compte-fond-portrait.a69aedfd.jpg")  type("image/jpeg")
        );
    }

    /* Le voile reste un peu plus dense en bas, là où le contenu s'arrête et
       où le fond se retrouve seul derrière la fin de page. */
    body.tlc-account-page::after {
        background: linear-gradient(
            180deg,
            rgba(251, 250, 248, .40) 0%,
            rgba(251, 250, 248, .58) 45%,
            rgba(251, 250, 248, .78) 100%
        );
    }
}

/* =========================================================================
   PAGE DE CONNEXION — ARRIVÉE DEPUIS "DÉPOSER UN BIEN À LA VENTE"
   (?tlc_intent=depot) : la méthode Trylidays expliquée à côté du
   formulaire, jamais à sa place.
   ========================================================================= */

.tlc-signin--pitch {
    max-width: 1080px;
}

/* Une seule colonne par défaut : le discours d'abord, le formulaire ensuite —
   l'ordre naturel de lecture sur téléphone. */
.tlc-pitch {
    margin-bottom: 40px;
}

.tlc-pitch__eyebrow {
    margin: 0 0 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--tl-primary-ink, #FF385C);
}

.tlc-pitch__title {
    margin: 0 0 22px;
    font-size: clamp(30px, 3.4vw, 44px);
    line-height: 1.08;
    letter-spacing: -1.2px;
    font-weight: 800;
    color: #101010;
}

.tlc-pitch__title span {
    color: #787570;
}

.tlc-pitch__lead {
    margin: 0 0 26px;
    max-width: 46ch;
    font-size: 16.5px;
    line-height: 1.7;
    color: #56514c;
}

.tlc-pitch__list {
    margin: 0 0 26px;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 18px;
    max-width: 46ch;
}

/* Chaque argument : un titre net, puis l'explication. Le filet vert à gauche
   remplace une puce — plus sobre, et plus proche de la charte du site. */
.tlc-pitch__list li {
    padding-left: 16px;
    border-left: 2px solid #d7d2c8;
    font-size: 14.5px;
    line-height: 1.6;
    color: #6a645e;
}

.tlc-pitch__list strong {
    display: block;
    margin-bottom: 3px;
    font-size: 15.5px;
    color: #101010;
}

.tlc-pitch__foot {
    margin: 0;
    max-width: 46ch;
    font-size: 14px;
    line-height: 1.65;
    color: #787570;
}

/* À partir de 900 px : le discours à gauche, la connexion à droite, alignés
   en haut. */
@media (min-width: 900px) {
    .tlc-signin--pitch {
        display: grid;
        grid-template-columns: 1.15fr .85fr;
        gap: 64px;
        align-items: start;
    }

    .tlc-pitch {
        margin-bottom: 0;
        padding-top: 6px;
    }
}

/* =========================================================================
   INSCRIPTION — même carte que la connexion, simplement plus haute.
   ========================================================================= */

.tlc-signin--register {
    max-width: 560px;
}

/* Inscription atteinte depuis « Vendre avec Trylidays » (?tlc_intent=depot) :
   les deux modificateurs se cumulent, et le 560 px de l'inscription écrasait
   le 1080 px du discours — tout se retrouvait empilé dans une colonne étroite
   au milieu d'un grand écran. On rend sa largeur au couple, et on laisse au
   formulaire la sienne : le discours prend le reste.

   Le seuil est plus haut que celui de la connexion (900 px). La carte
   d'inscription est bien plus large que celle de connexion ; à 900 px il ne
   reste que 236 px pour le discours, ce qui est illisible. Entre 900 et
   1119 px on annule donc la grille héritée de .tlc-signin--pitch et on
   revient à l'empilement — le discours d'abord, le formulaire ensuite. */
@media (min-width: 900px) and (max-width: 1119px) {

    .tlc-signin--register.tlc-signin--pitch {
        display: block;
    }

    .tlc-signin--register.tlc-signin--pitch .tlc-pitch {
        margin-bottom: 40px;
    }
}

@media (min-width: 1120px) {

    .tlc-signin--register.tlc-signin--pitch {
        max-width: 1180px;
        grid-template-columns: minmax(0, 1fr) 560px;
    }
}

/* Deux champs côte à côte (prénom / nom), empilés sur petit écran. */
.tlc-signin__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

@media (max-width: 560px) {
    .tlc-signin__row {
        grid-template-columns: 1fr;
    }
}

.tlc-signin__hint {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.55;
    /* #787570 ne donnait que 3,58 sur blanc, pour un seuil de 4,5. Ces
       precisions accompagnent la saisie d'un formulaire — elles doivent se
       lire, pas se deviner. Assombri au ton conforme le plus clair : 4,57. */
    color: #787570;
}

/* Indicatif + numéro : une seule rangée, l'indicatif juste assez large pour
   afficher le nom du pays sans écraser le numéro. */
.tlc-phone-group {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 10px;
}

/* Toute liste déroulante du parcours, pas seulement l'indicatif : sans ce
   chevron, un <select> stylé comme les champs texte ne s'annonce plus comme
   une liste — on croit devoir taper. */
select.tlc-signin__input,
.tlc-phone-code {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8781' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    text-overflow: ellipsis;
}

@media (max-width: 560px) {
    .tlc-phone-group {
        grid-template-columns: 1fr;
    }
}

/* Choix du profil : mêmes cartes que "Mon profil", posées dans la carte de
   connexion sans son cadre de fieldset. */
.tlc-signin__profiles {
    margin: 0;
    padding: 0;
    border: 0;
}

.tlc-signin__profiles legend {
    padding: 0;
    margin-bottom: 10px;
}

.tlc-signin__profiles .tlc-profile-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
    padding: 14px 16px;
    border: 1px solid #e7e4dd;
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
}

.tlc-signin__profiles .tlc-profile-card:has(input:checked) {
    border-color: #101010;
    background: #fff;
}

.tlc-signin__profiles .tlc-profile-card input {
    flex-shrink: 0;
    margin-top: 3px;
}

.tlc-signin__profiles .tlc-profile-card-body strong {
    display: block;
    margin-bottom: 3px;
    font-size: 14.5px;
    color: #101010;
}

.tlc-signin__profiles .tlc-profile-card-body span {
    display: block;
    font-size: 13.5px;
    line-height: 1.55;
    color: #6a645e;
}

/* Consentement CGU : case et texte alignés, jamais un texte décalé sous la
   case. */
.tlc-signin__consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 4px;
    font-size: 14px;
    line-height: 1.55;
    color: #56514c;
}

.tlc-signin__consent input {
    flex-shrink: 0;
    margin-top: 3px;
}

.tlc-signin__consent a {
    color: var(--tl-primary-ink, #FF385C);
}

/* =========================================================================
   MOT DE PASSE OUBLIÉ — écran de confirmation
   ========================================================================= */

/* Pastille d'accusé de réception, au-dessus du titre. */
.tlc-signin__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: #eef2f0;
    color: var(--tl-primary-ink, #FF385C);
}

/* Encadré "où chercher l'e-mail" : le moment précis où l'utilisateur a
   besoin qu'on lui parle des spams. */
.tlc-signin__tip {
    margin: 22px 0 26px;
    padding: 16px 18px;
    border-radius: 14px;
    background: #f4f1eb;
    text-align: left;
    font-size: 13.5px;
    line-height: 1.6;
    color: #56514c;
}

.tlc-signin__tip strong {
    color: #101010;
}

.tlc-signin__tip > strong {
    display: block;
    margin-bottom: 4px;
}

.tlc-signin__alt-text--tight {
    margin-top: 18px;
    font-size: 13.5px;
}

.tlc-signin__alt-text--tight a {
    color: #6a645e;
    text-decoration: underline;
}

/* ------------------------------------------------------------------
   Connexion Google. Mêmes dimensions que les champs et le bouton
   principal de ces pages (54 px, rayon 12 px) : le bloc reste homogène.
   Fond blanc et contour gris conformes aux règles de marque Google —
   le logo ne doit jamais être posé sur une couleur de marque tierce.
   ------------------------------------------------------------------ */

.tlc-google-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    width: 100%;
    min-height: 54px;
    padding: 0 20px;
    background: #fff;
    border: 1px solid #d8d5ce;
    border-radius: 12px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    color: #3c4043;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease;
}

.tlc-google-btn:hover,
.tlc-google-btn:focus {
    background: #faf9f7;
    border-color: #bdb9b0;
    color: #3c4043;
}

.tlc-google-btn-logo {
    flex: 0 0 auto;
}

/* Séparateur « ou » : un filet de part et d'autre du texte. */
.tlc-auth-separator {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    font-size: 14px;
    color: #8a8681;
}

.tlc-auth-separator::before,
.tlc-auth-separator::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e2ded7;
}

/* ---------------------------------------------------------------------------
   Particulier / professionnel
   Le choix ouvre le formulaire : deux cartes côte à côte, de la même famille
   que les cartes de profil plus bas, pour que la page garde une seule grammaire
   visuelle.
--------------------------------------------------------------------------- */
.tlc-account-type__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

@media (max-width: 560px) {
    .tlc-account-type__grid {
        grid-template-columns: 1fr;
    }
}

/* La marge basse des cartes vient de .tlc-signin__profiles : en grille, elle
   creuserait un écart sous les deux colonnes. */
.tlc-account-type .tlc-profile-card {
    margin-bottom: 0;
}

/* Bloc de facturation : encadré et légèrement teinté, pour qu'on voie d'un
   coup d'œil qu'il forme un ensemble apparu à la suite du choix précédent. */
.tlc-billing-fieldset {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 18px 18px 20px;
    border: 1px solid #e7e4dd;
    border-radius: 16px;
    background: #fff;
}

/* Sans cette règle, le display:flex ci-dessus l'emporterait sur [hidden]
   et le bloc resterait affiché pour les particuliers. */
.tlc-billing-fieldset[hidden] {
    display: none;
}

.tlc-billing-fieldset legend {
    padding: 0;
    font-size: 15px;
}

.tlc-billing-fieldset__intro {
    margin-top: 0;
}

/* ---------------------------------------------------------------------------
   Décor des pages d'entrée (connexion et création de compte)

   Deux panneaux photographiques ancrés aux bords, la carte du formulaire au
   centre sur le fond de page. Chaque panneau se recadre sur SON bord : le
   décor et le formulaire ne partagent aucune échelle, donc rien ne déborde
   jamais d'une carte peinte quand la fenêtre change de taille.
--------------------------------------------------------------------------- */
.tlc-signin-page--scene {
    /* Teinte relevée entre les deux photos : la jointure reste invisible. */
    /* Teinte du decor photographique, conservee ici : c'est la couleur du
       ciel entre les deux panneaux, pas un fond de page. */
    background: #f7f3ee;
}

.tlc-scene {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.tlc-scene__panel {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 34%;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Chaque panneau est ancré à son bord extérieur : c'est là que se trouve le
   sujet (la piscine à gauche, le chalet à droite), et c'est donc là qu'il
   faut préserver le cadrage quand la fenêtre rétrécit. */
.tlc-scene__panel--left {
    left: 0;
    background-position: left center;

    /* Fondu vers le centre : sans lui, la photo s'arrêterait sur une arête
       nette au milieu de l'écran. */
    -webkit-mask-image: linear-gradient(to right, #000 62%, transparent 100%);
    mask-image: linear-gradient(to right, #000 62%, transparent 100%);
}

.tlc-scene__panel--right {
    right: 0;
    background-position: right center;
    -webkit-mask-image: linear-gradient(to left, #000 62%, transparent 100%);
    mask-image: linear-gradient(to left, #000 62%, transparent 100%);
}

/* Encarts flottants : du vrai texte, reconstruit après avoir été effacé du
   décor — lisible, sélectionnable, et qui ne pixellise pas. */
.tlc-scene__note {
    position: absolute;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 232px;
    padding: 15px 17px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: 0 14px 34px rgba(16, 16, 16, .10);
}

.tlc-scene__note-icone {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: #dff0ed;
    color: #CA0025;
}

.tlc-scene__note--b .tlc-scene__note-icone {
    background: #fbe0e0;
    color: #d05a5a;
}

.tlc-scene__note-corps strong {
    display: block;
    margin-bottom: 4px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    color: #101010;
}

.tlc-scene__note-corps span {
    display: block;
    font-size: 12.5px;
    line-height: 1.5;
    color: #6a645e;
}

.tlc-scene__note--a { left: 8%;  top: 19%; }
.tlc-scene__note--b { right: 8%; top: 19%; }
.tlc-scene__note--c { left: 14%; bottom: 11%; }

/* Décor et encarts disparaissent ENSEMBLE, jamais l'un sans l'autre : les
   encarts couvrent l'emplacement d'où les cartes peintes ont été retirées du
   visuel. Les garder séparés exposerait cette retouche.
   Sous cette largeur, la carte n'aurait de toute façon plus la place de
   cohabiter avec deux panneaux photographiques. */
@media (max-width: 1200px) {
    .tlc-scene {
        display: none;
    }
}

/* Sur ce fond clair, la carte a besoin d'une ombre pour se détacher. */
.tlc-signin-page--scene .tlc-signin__card {
    box-shadow: 0 24px 60px rgba(16, 16, 16, .10), 0 4px 14px rgba(16, 16, 16, .05);
}

/* ---------------------------------------------------------------------------
   Mot de passe a l'inscription : on le relit, et on le confirme
   Le bouton « Afficher » se pose DANS le champ plutot qu'a cote : la colonne
   du formulaire est etroite, un bouton exterieur retrecirait la saisie.
--------------------------------------------------------------------------- */
.tlc-signin__password {
    position: relative;
}

.tlc-signin__password .tlc-signin__input {
    width: 100%;
    padding-right: 84px;
}

.tlc-signin__reveal {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    padding: 6px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #5f6663;
    cursor: pointer;
}

.tlc-signin__reveal:hover {
    background: #f3f2ee;
    color: #101010;
}

/* Concordance des deux saisies : vert quand elles se rejoignent, ambre tant
   qu'elles different. Ambre et non rouge — rien n'est encore perdu, la
   deuxieme saisie est peut-etre en cours. */
.tlc-signin__hint[data-tlc-password-match].is-ok {
    color: #1d5c46;
    font-weight: 600;
}

.tlc-signin__hint[data-tlc-password-match].is-mismatch {
    color: #9a6b12;
    font-weight: 600;
}

/* ---------------------------------------------------------------------
   LA PROMESSE SOUS LE LOGO
   ---------------------------------------------------------------------
   L'espace compte est l'ecran le plus frequente du site, et la marque y
   etait reduite a un mot. « Live it before you buy it » est ce qui
   distingue Trylidays d'un portail d'annonces.

   Le conteneur existe pour que le logo et sa baseline se deplacent
   ensemble : freres a freres dans un en-tete en flex, ils se seraient
   separes au premier retrecissement. */

.tlc-shell__marque {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.tlc-shell__baseline {
    margin: 0;
    padding-left: 2px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1.2;
    color: #3A3A38;
    /* Meme halo que le lien de retour : elle est posee a meme la photo, et
       un gris clair sur un ciel clair ne se lit pas. */
    text-shadow: 0 1px 8px rgba(255, 255, 255, .95), 0 0 3px rgba(255, 255, 255, 1);
}

/* Sur telephone, l'en-tete est deja serre : la promesse cede la place au
   logo et aux deux actions, qui doivent rester atteignables. */
@media (max-width: 560px) {
    .tlc-shell__baseline { display: none; }
}