/* ==================================================================
   Design tokens - one palette for the whole site. The header and the
   footer share --ink (navy) and the --brand blue rule; everything in
   between (cards, buttons, headings, tables) reuses the same values.
   ================================================================== */
:root{
    /* Brand colour - the only values a theme (below) changes. */
    --brand:#0d6efd;
    --brand-rgb:13,110,253;           /* same colour, for rgba() */
    --brand-dark:#0056d2;
    --brand-gradient:linear-gradient(135deg,#0d6efd,#0056d2);
    --brand-soft:#e7f0ff;             /* tinted backgrounds */
    --brand-light:#60a5fa;            /* accent on the navy header */
    --on-brand:#fff;                  /* text on the brand gradient (buttons, logo, banner) */

    --ink:#111827;          /* header / footer background */
    --ink-deep:#0b1120;     /* footer bottom bar */
    --text:#1f2937;
    --muted:#6b7280;
    --page-bg:#f4f7fb;
    --line:#e5e7eb;
    --verified:#198754;     /* "Vérifié" badge - blue in the green themes */
    --radius:12px;
    --radius-sm:8px;
    --shadow:0 1px 3px rgba(17,24,39,.06),0 1px 2px rgba(17,24,39,.04);
    --shadow-lift:0 10px 24px rgba(17,24,39,.10);

    /* Bootstrap reads these for links, .text-primary, .bg-primary… */
    --bs-primary:var(--brand);
    --bs-primary-rgb:var(--brand-rgb);
    --bs-link-color:var(--brand);
    --bs-link-color-rgb:var(--brand-rgb);
    --bs-link-hover-color:var(--brand-dark);
    --bs-body-color:#1f2937;
    --bs-border-radius:.75rem;
}

/* Alternative palettes. Activated by SITE_THEME in config.php, which
   header.php writes as <html data-theme="...">. Default: blue. */
html[data-theme="orange"]{
    --brand:#c2410c;
    --brand-rgb:194,65,12;
    --brand-dark:#9a3412;
    --brand-gradient:linear-gradient(135deg,#ea580c,#c2410c);
    --brand-soft:#fff1e7;
    --brand-light:#fb923c;
}

html[data-theme="indigo"]{
    --brand:#4f46e5;
    --brand-rgb:79,70,229;
    --brand-dark:#3730a3;
    --brand-gradient:linear-gradient(135deg,#6366f1,#4338ca);
    --brand-soft:#eef0ff;
    --brand-light:#a5b4fc;
}

html[data-theme="bordeaux"]{
    --brand:#9f1239;
    --brand-rgb:159,18,57;
    --brand-dark:#881337;
    --brand-gradient:linear-gradient(135deg,#be123c,#881337);
    --brand-soft:#fff0f3;
    --brand-light:#fda4af;
}

/* Gold on navy - the TaskerPlace flyers. A bright yellow can't be read
   as text on white, so this theme uses two yellows: the gradient (bright
   gold) for filled surfaces, with navy text on them (--on-brand), and a
   deeper amber (--brand) for links and coloured text on white. */
html[data-theme="jaune"]{
    --brand:#a16207;
    --brand-rgb:161,98,7;
    --brand-dark:#854d0e;
    --brand-gradient:linear-gradient(135deg,#f8c537,#f2aa0c);
    --brand-soft:#fff6db;
    --brand-light:#f5b31a;
    --on-brand:#111827;
}

html[data-theme="jaune"] .btn-primary,
html[data-theme="jaune"] .btn-primary:hover,
html[data-theme="jaune"] .btn-primary:focus,
html[data-theme="jaune"] .btn-primary:active{
    --bs-btn-color:var(--on-brand);
    --bs-btn-hover-color:var(--on-brand);
    --bs-btn-active-color:var(--on-brand);
    color:var(--on-brand);
}

html[data-theme="jaune"] .btn-primary:hover,
html[data-theme="jaune"] .btn-primary:focus{
    background:#e9a300;               /* deeper gold: navy text stays readable */
}

/* Sign-up banner (includes/ad_slot.php): navy text on the gold. */
html[data-theme="jaune"] .ad-slot.text-white{
    color:var(--on-brand)!important;
}

html[data-theme="jaune"] .ad-slot-step{
    background:var(--ink);
    color:var(--brand-light);
}

html[data-theme="jaune"] .ad-slot-plan{
    background:rgba(17,24,39,.07);
    border-color:rgba(17,24,39,.25);
}

html[data-theme="jaune"] .ad-slot-plan-verifie{
    background:rgba(255,255,255,.35);
    border-color:rgba(17,24,39,.55);
}

html[data-theme="jaune"] .ad-slot .btn-light.text-primary{
    background:var(--ink);
    border-color:var(--ink);
    color:var(--brand-light)!important;
}

/* Green themes: the "Vérifié" badge turns blue, otherwise it would
   blend into the green accent and stop standing out. */

/* Gabon flag: green accent, yellow in the header, blue badge. */
html[data-theme="vert-gabon"]{
    --brand:#007a4d;
    --brand-rgb:0,122,77;
    --brand-dark:#005c3a;
    --brand-gradient:linear-gradient(135deg,#009e60,#007a4d);
    --brand-soft:#e6f5ee;
    --brand-light:#fcd116;
    --verified:#0d6efd;
}

html[data-theme="emeraude"]{
    --brand:#047857;
    --brand-rgb:4,120,87;
    --brand-dark:#065f46;
    --brand-gradient:linear-gradient(135deg,#059669,#047857);
    --brand-soft:#e7f8f1;
    --brand-light:#6ee7b7;
    --verified:#0d6efd;
}

html[data-theme="sarcelle"]{
    --brand:#0f766e;
    --brand-rgb:15,118,110;
    --brand-dark:#115e59;
    --brand-gradient:linear-gradient(135deg,#0d9488,#0f766e);
    --brand-soft:#e6f6f4;
    --brand-light:#5eead4;
    --verified:#0d6efd;
}

html[data-theme="terre-cuite"]{
    --brand:#a8431f;
    --brand-rgb:168,67,31;
    --brand-dark:#86341a;
    --brand-gradient:linear-gradient(135deg,#c2572e,#9a3d1c);
    --brand-soft:#fbefe9;
    --brand-light:#f4a07a;
}

body{
    background:var(--page-bg);
    color:var(--text);
}

/* ------------------------------------------------------------------
   Header - includes/header.php (mirrors .site-footer)
   ------------------------------------------------------------------ */
.site-header{
    background:var(--ink);
    border-bottom:4px solid var(--brand);
    border-image:var(--brand-gradient) 1;
    box-shadow:0 4px 14px rgba(17,24,39,.15);
    padding-top:.6rem;
    padding-bottom:.6rem;
}

.site-brand{
    font-weight:600;
    letter-spacing:.02em;
}

.site-brand-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    border-radius:var(--radius-sm);
    background:var(--brand-gradient);
    font-size:1rem;
}

/* A worker's reply under a client review (tacheron.php). */
.avis-reponse{
    border-left:3px solid var(--brand);
    background:var(--brand-soft);
    border-radius:0 var(--radius-sm) var(--radius-sm) 0;
    padding:.6rem .8rem;
}

/* Slogan under the site name (header, computers only). */
.site-brand-slogan{
    font-size:.8rem;
    font-weight:600;
    letter-spacing:.01em;
    line-height:1.2;
    color:var(--brand-light);   /* same look as .footer-slogan */
}

.footer-slogan{
    color:var(--brand-light);
    font-weight:600;
    font-size:.95rem;
}

/* Temporary logo: "TP" initials in the square. */
.site-brand-initiales{
    color:var(--on-brand);
    font-weight:800;
    font-size:.95rem;
    letter-spacing:-.02em;
    line-height:1;
}

@media (min-width:992px){
    .site-brand-initiales{
        font-size:1.35rem;
    }
}

.site-brand-accent{
    color:var(--brand-light);
}

/* Computer screens only: a slightly larger logo. */
@media (min-width:992px){
    .site-brand{
        font-size:1.45rem;
    }

    /* Same height as the two lines beside it (name + slogan). */
    .site-brand-icon{
        width:50px;
        height:50px;
    }
}

.site-header .nav-link{
    color:#d1d5db;
    font-size:.95rem;
    padding-left:.75rem!important;
    padding-right:.75rem!important;
    border-radius:var(--radius-sm);
}

.site-header .nav-link:hover{
    color:#fff;
    background:rgba(255,255,255,.06);
}

/* Active page: same blue underline as the footer's column titles. */
.site-header .nav-link.active{
    color:#fff;
    box-shadow:inset 0 -2px 0 var(--brand);
    border-radius:0;
}

/* ------------------------------------------------------------------
   Headings - the footer's blue underline, reused on every page
   ------------------------------------------------------------------ */
.page-title{
    font-weight:700;
    color:var(--ink);
    margin-bottom:.35rem;
}

.page-title::after{
    content:"";
    display:block;
    width:56px;
    height:4px;
    margin-top:.5rem;
    border-radius:2px;
    background:var(--brand-gradient);
}

.text-center > .page-title::after,
.page-title.text-center::after{
    margin-left:auto;
    margin-right:auto;
}

.page-subtitle{
    color:var(--muted);
}

.section-title{
    font-weight:600;
    color:var(--ink);
    display:inline-block;
    padding-bottom:.35rem;
    margin-bottom:1rem;
    border-bottom:2px solid rgba(var(--brand-rgb),.6);
}

/* ------------------------------------------------------------------
   Cards, buttons, forms
   ------------------------------------------------------------------ */
.card{
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
}

.card-header{
    border-top-left-radius:var(--radius)!important;
    border-top-right-radius:var(--radius)!important;
}

/* Only clickable cards (listing, contact channels) lift on hover -
   forms and content blocks stay put. */
.card-lift{
    transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}

.card-lift:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-lift);
    border-color:rgba(var(--brand-rgb),.35);
}

.card-title{
    color:var(--text);
}

/* Highlighted block inside a form (register.php: plan, payment). */
.form-section{
    background:var(--brand-soft);
    border:1px solid rgba(var(--brand-rgb),.25);
    border-radius:var(--radius);
}

.form-section .section-title{
    font-size:1.05rem;
}

.btn{
    border-radius:10px;
    font-weight:500;
}

.btn-primary{
    background:var(--brand-gradient);
    border:0;
}

.btn-primary:hover,
.btn-primary:focus{
    background:var(--brand-dark);
}

.form-control,
.form-select{
    border-radius:10px;
    border-color:#d1d5db;
}

.form-control:focus,
.form-select:focus{
    border-color:var(--brand);
    box-shadow:0 0 0 .2rem rgba(var(--brand-rgb),.15);
}

.form-label{
    font-weight:500;
}

textarea{
    resize:none;
}

.text-warning i{
    font-size:16px;
}

.alert{
    border-radius:var(--radius);
}

.breadcrumb a{
    text-decoration:none;
}

/* Bootstrap parts with the blue hardcoded in bootstrap.min.css. */
.form-check-input:checked{
    background-color:var(--brand);
    border-color:var(--brand);
}

.form-check-input:focus{
    border-color:var(--brand);
    box-shadow:0 0 0 .2rem rgba(var(--brand-rgb),.15);
}

.btn-outline-primary{
    --bs-btn-color:var(--brand);
    --bs-btn-border-color:var(--brand);
    --bs-btn-hover-color:#fff;
    --bs-btn-hover-bg:var(--brand);
    --bs-btn-hover-border-color:var(--brand);
    --bs-btn-active-color:#fff;
    --bs-btn-active-bg:var(--brand-dark);
    --bs-btn-active-border-color:var(--brand-dark);
    --bs-btn-focus-shadow-rgb:var(--brand-rgb);
}

.pagination{
    --bs-pagination-color:var(--brand);
    --bs-pagination-hover-color:var(--brand-dark);
    --bs-pagination-active-bg:var(--brand);
    --bs-pagination-active-border-color:var(--brand);
    --bs-pagination-focus-box-shadow:0 0 0 .2rem rgba(var(--brand-rgb),.15);
}

/* "Vérifié" badge: its own colour token, not Bootstrap's bg-success,
   so green themes can move it off green. */
.badge-verifie{
    background-color:var(--verified);
    color:#fff;
}

/* Avatar placeholder (avatar_html() without a photo). */
.avatar-initiale{
    background:var(--brand-soft);
    color:var(--brand);
    border-color:rgba(var(--brand-rgb),.2)!important;
}

/* Admin tables - navy header row, like the site header. */
.table{
    border-radius:var(--radius);
    overflow:hidden;
}

.table > thead th{
    background:var(--ink);
    color:#fff;
    font-weight:500;
    border-color:var(--ink);
}

.pagination .page-link{
    border-radius:var(--radius-sm);
    margin:0 .15rem;
}

/* Ad slot - includes/ad_slot.php. Full width, matching the search
   bar's .container (no max-width cap, unlike a standalone IAB
   "leaderboard" unit would have). Fixed height per breakpoint (not
   position:fixed) so a real ad, once wired in, causes no layout shift.
   Currently a clickable temporary self-promo banner - see the gradient/
   hover rules below - rather than an empty placeholder. */
.ad-slot-wrap{
    margin-top:3mm;         /* the header drops its mb-4 on these pages ($adSlotBelow) */
    margin-bottom:1.5rem;
}

.ad-slot{
    width:100%;
    min-height:340px;       /* stacked columns on phones */
    padding-top:1.25rem;
    padding-bottom:1.25rem;
    background:var(--brand-gradient);
    border-radius:var(--radius);
    box-shadow:0 8px 20px rgba(var(--brand-rgb),.25);
    transition:filter .2s ease;
}

.ad-slot:hover{
    filter:brightness(1.06);
}

@media (min-width:768px){
    .ad-slot{
        min-height:240px;
    }
}

@media (min-width:992px){
    .ad-slot{
        min-height:180px;
    }
}

.ad-slot-kicker{
    font-size:.8rem;
    text-transform:uppercase;
    letter-spacing:.06em;
    opacity:.85;
}

.ad-slot-title{
    font-size:1.3rem;
    font-weight:700;
    line-height:1.25;
}

.ad-slot-steps li{
    display:flex;
    align-items:flex-start;
    gap:.5rem;
    font-size:.9rem;
    margin-bottom:.45rem;
}

.ad-slot-steps li:last-child{
    margin-bottom:0;
}

.ad-slot-step{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:22px;
    height:22px;
    border-radius:50%;
    background:#fff;
    color:var(--brand);
    font-size:.75rem;
    font-weight:700;
}

.ad-slot-plan{
    padding:.6rem .75rem;
    border-radius:var(--radius-sm);
    background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.3);
}

.ad-slot-plan-verifie{
    border-color:rgba(255,255,255,.75);
    background:rgba(255,255,255,.2);
}

.ad-slot-plan-name{
    font-size:.8rem;
    margin-bottom:.2rem;
}

.ad-slot-plan-price{
    font-size:1.1rem;
    font-weight:700;
    white-space:nowrap;
}

.ad-slot-plan-price small{
    font-size:.75rem;
    font-weight:400;
}

.ad-slot-plan-alt{
    font-size:.75rem;
    opacity:.9;
}

/* The banner's two clickable parts (sign-up, rewards programme). */
.ad-slot-lien{
    display:block;
    color:inherit;
    text-decoration:none;
}

.ad-slot-lien:hover{
    color:inherit;
}

.ad-slot-lien:hover .ad-slot-plan{
    background:rgba(255,255,255,.26);
}

/* Rewards: the big percentage next to its text, as on the flyers. */
.ad-slot-recompense{
    display:flex;
    align-items:center;
    gap:.75rem;
}

/* Slightly larger title and text in the two reward boxes (not the rates). */
.ad-slot-recompense .ad-slot-plan-name{
    font-size:.95rem;
}

.ad-slot-recompense .ad-slot-plan-alt{
    font-size:.85rem;
    line-height:1.35;
}

.ad-slot-taux{
    flex:0 0 auto;
    font-size:1.9rem;
    font-weight:800;
    line-height:1;
    letter-spacing:-.02em;
}

/* index.php search form: "Recherche générale" at exactly 16% - not a
   whole-twelfths Bootstrap fraction, hence a dedicated rule. The seven
   other cells (Métier, Pays, Ville, Quartier, Note, Vérifié, Rechercher)
   are plain col-lg and share the remaining 84% equally (12% each). Only
   applied at lg+ (>=992px), where all filters share one line; below that
   the search field is full width and the filters wrap 2 per row (phone)
   or 3 per row (tablet). */
@media (min-width:992px){
    .col-filtre-recherche{
        flex:0 0 16%;
        max-width:16%;
    }
}

/* Footer - includes/footer.php */
/* The blue top rule (same gradient as the navbar) marks a clear break
   from the light page body above. */
.site-footer{
    background:var(--ink);
    color:#9ca3af;
    border-top:5px solid var(--brand);
    border-image:var(--brand-gradient) 1;
    box-shadow:0 -6px 18px rgba(17,24,39,.12);
}

.site-footer h2,
.site-footer h3{
    letter-spacing:.03em;
}

.site-footer h3{
    padding-bottom:.5rem;
    border-bottom:2px solid rgba(var(--brand-rgb),.6);
    display:inline-block;
}

.footer-tarif{
    padding:.5rem .75rem;
    border-radius:8px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.1);
}

.footer-tarif-verifie{
    border-color:var(--verified);
}

/* Plain text links only: applied to buttons too, the white hover colour
   met Bootstrap's white .btn-outline-light hover background and the
   label vanished. */
.site-footer a:not(.btn){
    color:#d1d5db;
    text-decoration:none;
}

.site-footer a:not(.btn):hover{
    color:#fff;
    text-decoration:underline;
}

/* "Comment ça marche ?": outlined at rest, filled with the theme colour
   on hover - same family as the "Contact" button beside it. */
.site-footer .btn-outline-light{
    --bs-btn-color:#e5e7eb;
    --bs-btn-border-color:rgba(255,255,255,.45);
    --bs-btn-hover-color:#fff;
    --bs-btn-hover-bg:var(--brand);
    --bs-btn-hover-border-color:var(--brand);
    --bs-btn-active-color:#fff;
    --bs-btn-active-bg:var(--brand-dark);
    --bs-btn-active-border-color:var(--brand-dark);
}

.site-footer-bottom{
    border-top:1px solid rgba(255,255,255,.1);
    background:var(--ink-deep);
}

/* Contact page - contact.php */
.contact-channel-icon{
    font-size:2.5rem;
}

.chat-card{
    min-height:480px;
}

.chat-log{
    height:340px;
    overflow-y:auto;
    background:#f8fafc;
    display:flex;
    flex-direction:column;
    gap:.5rem;
}

.chat-msg{
    max-width:85%;
    padding:.5rem .75rem;
    border-radius:12px;
    white-space:pre-wrap;
    word-wrap:break-word;
    font-size:.95rem;
}

.chat-msg-bot{
    align-self:flex-start;
    background:#fff;
    border:1px solid #e5e7eb;
}

.chat-msg-user{
    align-self:flex-end;
    background:var(--brand);
    color:#fff;
}

.chat-msg-pending{
    color:#6b7280;
}

.chat-msg-error{
    border-color:#f5c2c7;
    background:#f8d7da;
    color:#842029;
}

.chat-disclaimer{
    font-size:.75rem;
}

/* register.php plan picker - radio (.btn-check) + card label. */
.formule-option{
    display:block;
    cursor:pointer;
    padding:.75rem .9rem;
    background:#fff;
    border:2px solid var(--line);
    border-radius:var(--radius);
    transition:border-color .15s ease,box-shadow .15s ease;
}

.formule-option:hover{
    border-color:rgba(var(--brand-rgb),.45);
}

.btn-check:checked + .formule-option{
    border-color:var(--brand);
    box-shadow:0 0 0 .2rem rgba(var(--brand-rgb),.15);
}

.btn-check:focus-visible + .formule-option{
    outline:2px solid var(--brand);
    outline-offset:2px;
}

.formule-option-prix{
    font-weight:600;
    color:var(--ink);
}

/* ------------------------------------------------------------------
   Small screens
   ------------------------------------------------------------------ */

/* tacheron.php: photo + WhatsApp/Appeler column. Fixed 150px beside
   the details on wider screens; full width under them on phones. */
.profil-actions{
    width:150px;
}

@media (max-width:575.98px){
    /* 16px side gutter instead of Bootstrap's 12px. */
    .container{
        padding-left:16px;
        padding-right:16px;
    }

    .profil-actions{
        width:100%;
    }

    .page-title{
        font-size:1.5rem;
    }
}

/* Narrow phones (320-399px): keep the brand and the menu button on
   one line. */
@media (max-width:399.98px){
    .site-brand{
        font-size:1rem;
        margin-right:.5rem;
    }

    .site-brand-icon{
        width:28px;
        height:28px;
        font-size:.85rem;
    }

    .navbar-toggler{
        padding:.25rem .5rem;
    }
}

/* Admin pages - includes/admin_layout.php */
.admin-tabs .nav-link{
    color:var(--muted);
}

.admin-tabs .nav-link.active{
    color:var(--ink);
    font-weight:600;
    border-bottom-color:transparent;
    box-shadow:inset 0 3px 0 var(--brand);
}

/* Super admin counters on admin.php */
.stat-card{
    color:var(--text);
}

.stat-card-label{
    font-size:.8rem;
    color:var(--muted);
}

.stat-card-value{
    font-size:1.75rem;
    font-weight:700;
    color:var(--ink);
    font-variant-numeric:tabular-nums;
}

.stat-card-alerte{
    border-color:rgba(var(--brand-rgb),.45);
    background:var(--brand-soft);
}

.stat-card-alerte .stat-card-value{
    color:var(--brand);
}

.tabular{
    font-variant-numeric:tabular-nums;
}

/* comment_ca_marche.php */
.info-sommaire{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:.5rem;
}

.info-sommaire a{
    display:inline-flex;
    align-items:center;
    gap:.4rem;
    padding:.4rem .85rem;
    border:1px solid var(--line);
    border-radius:999px;
    background:#fff;
    color:var(--ink);
    font-size:.9rem;
    text-decoration:none;
}

.info-sommaire a:hover{
    border-color:var(--brand);
    color:var(--brand);
}

.info-section{
    margin-bottom:3rem;
    scroll-margin-top:90px;   /* clears the sticky header on anchor jumps */
}

.info-step,
.info-card,
.info-plan{
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:1rem 1.1rem;
}

.info-step{
    position:relative;
    padding-top:1.25rem;
}

.info-step-num{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:30px;
    height:30px;
    margin-bottom:.5rem;
    border-radius:50%;
    background:var(--brand-gradient);
    color:#fff;
    font-weight:700;
}

.info-list{
    padding-left:1.2rem;
}

.info-list li{
    margin-bottom:.6rem;
}

.info-plan-prix{
    font-size:1.3rem;
    font-weight:700;
    color:var(--ink);
}

.info-plan-prix small{
    font-size:.8rem;
    font-weight:400;
}

.info-plan-verifie{
    border-color:var(--verified);
}

.info-legal-highlight{
    padding:.9rem 1.1rem;
    border-left:4px solid var(--brand);
    border-radius:var(--radius-sm);
    background:var(--brand-soft);
    font-weight:600;
    color:var(--ink);
}

.info-cta{
    padding:2rem 1rem;
    border-radius:var(--radius);
    background:#fff;
    border:1px solid var(--line);
}

.info-card-accent{
    border-color:rgba(var(--brand-rgb),.45);
    background:var(--brand-soft);
}

/* Work photos - register.php / mon_compte.php previews, tacheron.php
   gallery, admin.php thumbnails. */
.apercu-photos{
    display:flex;
    flex-wrap:wrap;
    gap:.5rem;
}

.apercu-photos:empty{
    display:none;
}

.apercu-photo{
    width:96px;
    height:72px;
    object-fit:cover;
    border-radius:var(--radius-sm);
    border:1px solid var(--line);
}

.photo-travail img,
.galerie-photo img{
    display:block;
    width:100%;
    aspect-ratio:4/3;
    object-fit:cover;
    border-radius:var(--radius-sm);
    border:1px solid var(--line);
}

.galerie-photo{
    display:block;
    transition:transform .2s ease;
}

.galerie-photo:hover{
    transform:scale(1.02);
}

/* Pending sign-up: what the profile will publish (admin.php). */
.admin-apercu-profil{
    min-width:260px;
    max-width:360px;
}

.admin-description{
    font-size:.85rem;
    max-height:9rem;          /* long texts scroll inside the cell */
    overflow-y:auto;
    padding:.35rem .5rem;
    background:var(--page-bg);
    border:1px solid var(--line);
    border-radius:4px;
    white-space:normal;
}

/* Photos of the work under a published review (tacheron.php). */
.avis-photo{
    width:96px;
    height:96px;
    object-fit:cover;
    border-radius:.5rem;
    border:1px solid var(--bs-border-color, #dee2e6);
}

.admin-miniature{
    width:64px;
    height:48px;
    object-fit:cover;
    border-radius:4px;
    border:1px solid var(--line);
}

/* Suggestion lists ("Métier", "Pays") - suggestions.js (register.php, mon_compte.php) */
.suggestions-enveloppe{
    position:relative;
}

.suggestions-liste{
    position:absolute;
    z-index:1050;
    left:0;
    right:0;
    top:calc(100% + 4px);
    max-height:260px;
    overflow-y:auto;
    margin:0;
    padding:.25rem 0;
    list-style:none;
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius-sm);
    box-shadow:var(--shadow-lift);
}

.suggestions-liste li{
    padding:.45rem .85rem;
    cursor:pointer;
}

/* Same text colour for every trade (hovered/selected ones included):
   only a light background marks the item under the pointer. */
.suggestions-liste li{
    color:var(--text);
}

.suggestions-liste li:hover,
.suggestions-liste li.actif{
    background:var(--brand-soft);
}

/* Bootstrap's .invalid-feedback relies on being the input's next sibling. */
.suggestions-enveloppe:has(.is-invalid) ~ .invalid-feedback{
    display:block;
}

/* Multiple choice (chips) - suggestions.js, "Villes d'intervention" */
.suggestions-puces{
    display:flex;
    flex-wrap:wrap;
    gap:.35rem;
    margin-bottom:.4rem;
}

.suggestions-puce{
    display:inline-flex;
    align-items:center;
    gap:.25rem;
    padding:.2rem .35rem .2rem .65rem;
    border-radius:999px;
    background:var(--brand-soft);
    border:1px solid rgba(var(--brand-rgb),.3);
    color:var(--text);
    font-size:.9rem;
}

.suggestions-puce button{
    border:0;
    background:transparent;
    color:var(--muted);
    font-size:1.05rem;
    line-height:1;
    padding:0 .2rem;
    cursor:pointer;
}

.suggestions-puce button:hover{
    color:var(--text);
}

/* ------------------------------------------------------------------
   Business card - carte.php (85 × 55 mm, real size; scaled up on
   screen, printed as an A4 sheet of 10 cards to cut out)
   ------------------------------------------------------------------ */
.carte-visite{
    box-sizing:border-box;
    width:85mm;
    height:55mm;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    background:#fff;
    color:var(--ink);
    border:1px solid var(--line);
    border-radius:3mm;
    font-family:"Segoe UI",Arial,Helvetica,sans-serif;
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
}

.carte-ecran .carte-visite{
    transform:scale(1.45);
    transform-origin:top center;
    margin-bottom:calc(55mm * .45);
    box-shadow:0 4px 14px rgba(17,24,39,.12);
}

@media (max-width:575.98px){
    .carte-ecran .carte-visite{
        transform:scale(1.05);
        margin-bottom:calc(55mm * .05);
    }
}

.carte-bandeau{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:2mm;
    height:11mm;
    padding:0 4mm;
    background:var(--ink);
    border-bottom:.9mm solid var(--brand);
    border-image:var(--brand-gradient) 1;
}

.carte-logo{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:7mm;
    height:7mm;
    border-radius:1.2mm;
    background:var(--brand-gradient);
    color:var(--on-brand);
    font-weight:800;
    font-size:3.2mm;
}

.carte-site{
    color:#fff;
    font-weight:700;
    font-size:4.2mm;
}

.carte-site-accent{
    color:var(--brand-light);
}

.carte-corps{
    flex:1 1 auto;
    display:flex;
    gap:3mm;
    padding:2.6mm 4mm 1mm;
    min-height:0;
}

.carte-infos{
    flex:1 1 auto;
    min-width:0;
}

.carte-nom{
    font-weight:800;
    font-size:4.3mm;
    line-height:1.15;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.carte-metier{
    color:var(--brand);
    font-weight:600;
    font-size:3.1mm;
    margin-bottom:1mm;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

/* The pro's rating: stars from the published reviews and the mark. */
.carte-note{
    font-size:2.6mm;
    font-weight:700;
    color:#374151;
    margin-bottom:.8mm;
    white-space:nowrap;
}
.carte-etoiles{
    color:#f59e0b;
    letter-spacing:.15mm;
    margin-right:.6mm;
}
.carte-etoiles-vides{
    color:#d1d5db;
}

.carte-verifie{
    margin-bottom:.9mm;
    line-height:1;
}
/* The site's "Vérifié" badge, sized for the 85 x 55 mm card; colours kept in print. */
.carte-verifie .badge{
    font-size:2.5mm;
    font-weight:400;
    padding:.7mm 1.6mm;
    border-radius:1mm;
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
}

.carte-ligne{
    font-size:2.7mm;
    color:#374151;
    line-height:1.45;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.carte-qr-zone{
    flex:0 0 20mm;
    text-align:center;
}

.carte-qr{
    width:19mm;
    height:19mm;
    margin:0 auto;
}

.carte-qr svg{
    display:block;
    width:100%;
    height:100%;
}

.carte-qr-texte{
    font-size:1.9mm;
    color:#374151;
    margin-top:.8mm;
    line-height:1.2;
}

.carte-pied{
    flex:0 0 auto;
    padding:1mm 4mm;
    background:var(--ink);
    color:#fff;
    font-size:2.3mm;
    font-weight:600;
}

/* The print sheet only exists on paper. */
.carte-planche{
    display:none;
}

@media print{
    @page{
        size:A4;
        margin:8mm 10mm;     /* 5 rows of 55 mm need 275 mm of the 281 left */
    }

    .site-header,
    .site-footer,
    .carte-ecran,
    .ad-slot-wrap,
    body > .pt-5{           /* footer spacer */
        display:none!important;
    }

    body,
    main{
        background:#fff!important;
        margin:0!important;
        padding:0!important;
    }

    .carte-page{
        max-width:none!important;
        margin:0!important;
        padding:0!important;
    }

    .carte-planche{
        display:grid;
        grid-template-columns:85mm 85mm;
        justify-content:center;
        column-gap:4mm;
        row-gap:.4mm;
    }

    .carte-planche .carte-visite{
        border:.2mm dashed #9ca3af;     /* cutting guide */
        border-radius:0;
        break-inside:avoid;
    }
}

/* Public counters on the profile (tacheron.php): views, "Appeler" clicks. */
.fiche-stat{
    display:inline-flex;
    align-items:center;
    gap:.35rem;
    padding:.2rem .65rem;
    border-radius:999px;
    background:var(--brand-soft);
    color:var(--ink);
    font-size:.85rem;
    font-weight:600;
}

.fiche-stat .bi{
    color:var(--brand);
}

/* "Demander un avis à un client" (mon_compte.php) and its target on the
   profile (tacheron.php#donner-avis, clear of the sticky header). */
.demande-avis{
    padding:.75rem .9rem;
    border-radius:var(--radius-sm);
    background:var(--brand-soft);
}

#donner-avis{
    scroll-margin-top:90px;
}

/* Usual name in brackets after the full name on the profile (tacheron.php). */
.fiche-nom-usuel{
    color:var(--brand);
    font-weight:600;
}

.carte-nom-sous{
    font-size:2.5mm;
    color:#6b7280;
    font-weight:600;
    margin-top:-.4mm;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

/* "Recherches populaires" (index.php): links to the trade / country pages. */
.recherche-lien{
    display:inline-block;
    padding:.3rem .75rem;
    border:1px solid var(--line);
    border-radius:999px;
    background:#fff;
    font-size:.85rem;
    color:var(--ink);
    text-decoration:none;
}

.recherche-lien:hover{
    border-color:var(--brand);
    color:var(--brand);
}

/* Side ads (includes/pub_laterale.php): fixed in the empty margins left
   and right of the 1320 px content, so only on screens wide enough to
   have them - 120 px wide from 1600 px, 160 px (the standard IAB
   skyscraper) from 1720 px. Never shown on smaller screens. */
.pub-laterale{
    display:none;
}
@media (min-width:1600px){
    .pub-laterale{
        display:block;
        position:fixed;
        top:110px;
        width:120px;
        z-index:5;
    }
    .pub-laterale-gauche{ left:calc((100vw - 1320px) / 4 - 60px); }
    .pub-laterale-droite{ right:calc((100vw - 1320px) / 4 - 60px); }
}
@media (min-width:1720px){
    .pub-laterale{ width:160px; }
    .pub-laterale-gauche{ left:calc((100vw - 1320px) / 4 - 80px); }
    .pub-laterale-droite{ right:calc((100vw - 1320px) / 4 - 80px); }
}
.pub-laterale-mention{
    font-size:.65rem;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:#8a94a6;
    text-align:center;
    margin-bottom:.25rem;
}
.pub-laterale-lien{
    display:block;
    text-decoration:none;
}
/* The banner frame: 160x600 proportions; with several campaigns their
   banners are stacked in .pub-piste, which slides up one banner at a
   time (includes/pub_laterale.php). */
.pub-defilement{
    aspect-ratio:160 / 600;
    max-height:calc(100vh - 140px);
    overflow:hidden;
    border-radius:.5rem;
    box-shadow:0 6px 18px rgba(15,23,42,.18);
}
.pub-piste{
    height:100%;
    display:flex;
    flex-direction:column;
}
.pub-diapo{
    flex:0 0 100%;
    display:block;
}
.pub-diapo img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    background:#fff;
}
.pub-laterale-lien img{
    display:block;
    width:100%;
    height:auto;
    border-radius:.5rem;
}
.pub-laterale-banniere{
    height:min(600px, calc(100vh - 140px));
    padding:1.1rem .75rem;
    border-radius:.75rem;
    /* Free space ("Votre publicité ici"): the site's own colours. */
    background:var(--brand-gradient);
    color:#fff;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:.6rem;
    box-shadow:0 6px 18px rgba(15,23,42,.18);
    transition:transform .15s ease, box-shadow .15s ease;
}
.pub-laterale-lien:hover .pub-laterale-banniere{
    transform:translateY(-2px);
    box-shadow:0 10px 24px rgba(15,23,42,.25);
}
.pub-laterale-icone{
    width:3rem;
    height:3rem;
    border-radius:50%;
    background:rgba(255,255,255,.18);
    color:#fff;
    font-size:1.4rem;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 0 0 3px rgba(255,255,255,.25);
}
.pub-laterale-marque{
    font-weight:800;
    font-size:1.05rem;
    line-height:1.15;
}
.pub-laterale-accroche{
    font-weight:600;
    font-size:.85rem;
    line-height:1.3;
}
.pub-laterale-points{
    list-style:none;
    padding:0;
    margin:0;
    font-size:.75rem;
    line-height:1.35;
    opacity:.9;
}
.pub-laterale-points li + li{
    margin-top:.4rem;
}
.pub-laterale-bouton{
    margin-top:auto;
    background:#fff;
    color:var(--brand-dark);
    font-weight:700;
    font-size:.8rem;
    padding:.4rem .7rem;
    border-radius:999px;
}
.pub-laterale-site{
    font-size:.65rem;
    opacity:.8;
    word-break:break-all;
}