:root {
    --tc-primary: #ff800f;
    --tc-primary-dark: #e56a00;
    --tc-primary-light: #ff9a3d;
    /* Texte posé sur l'orange : le blanc n'y atteint que 2,5:1 de contraste (WCAG demande 4,5:1),
       le bleu nuit 7,6:1. */
    --tc-on-primary: #010a35;
    /* Orange foncé pour le texte et les icônes sur fond clair (5,2:1 sur blanc). L'orange vif
       reste réservé aux fonds de bouton et aux fonds sombres. */
    --tc-primary-text: #c2410c;
    --tc-focus-ring: #0a6fa8;
    /* Bleu glacier (repris du logo) : fraîcheur, technique. 5,4:1 sur blanc pour le texte ;
       la version claire est réservée aux fonds sombres. */
    --tc-frost: #0a6fa8;
    --tc-frost-bright: #38bdf8;
    --tc-frost-tint: #eef7fc;
    --tc-accent: #0a6fa8;
    --tc-accent-dark: #075985;
    --tc-dark: #010a35;
    --tc-dark-soft: #312f92;
    --tc-ink: #1c1f2b;
    --tc-muted: #696e77;
    --tc-surface: #f6f7f8;
    --tc-border: #e9eaec;
    /* Mouvement : une seule courbe (départ rapide, arrivée douce) et trois durées pour tout le site. */
    --tc-ease: cubic-bezier(.22, 1, .36, 1);
    --tc-dur-fast: .2s;
    --tc-dur: .35s;
    --tc-dur-slow: .7s;
    /* Ombres : repos, survol. */
    --tc-shadow-sm: 0 1px 2px rgba(1, 10, 53, .05), 0 2px 8px rgba(1, 10, 53, .04);
    --tc-shadow-lg: 0 14px 34px rgba(1, 10, 53, .12), 0 4px 10px rgba(1, 10, 53, .05);
}

html {
    overflow-x: clip;
}

body {
    font-family: 'Plus Jakarta Sans', 'Cairo', 'Roboto', system-ui, -apple-system, sans-serif;
    font-size: 1rem;
    -webkit-font-smoothing: antialiased;
    color: var(--tc-ink);
    background: #fff;
    overflow-x: clip;
}

h1, h2, h3, h4, h5, h6, .section-title, .navbar-brand {
    font-family: 'Plus Jakarta Sans', 'Cairo', system-ui, sans-serif;
    letter-spacing: -.015em;
}

/* Arabe : Cairo en premier (Plus Jakarta Sans n'a pas de glyphes arabes). */
[dir="rtl"] body,
[dir="rtl"] :is(h1, h2, h3, h4, h5, h6, .section-title) {
    font-family: 'Cairo', system-ui, sans-serif;
    letter-spacing: 0;
}

h1, h2, h3, .section-title {
    text-wrap: balance;
}

/* text-wrap: balance calcule mal la largeur des grands titres display-* dans un conteneur
   étroit (le h1 du hero débordait de l'écran sur mobile) : retour au retour à la ligne normal. */
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    text-wrap: normal;
}

.btn, .rounded-pill {
    border-radius: .625rem !important;
}

.rounded-4 {
    border-radius: .5rem !important;
}

p {
    line-height: 1.75;
}

/* ---------- Barre du haut / navigation ---------- */
.topbar {
    background: #000726;
    color: #fff;
}

.navbar {
    border-bottom: 1px solid var(--tc-border);
}

.nav-link.active {
    color: var(--tc-primary-text) !important;
    font-weight: 600;
}

.navbar-nav .nav-link {
    transition: color var(--tc-dur-fast) ease;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus-visible {
    color: var(--tc-primary-text);
}

/* ---------- Focus clavier ---------- */
/* Un anneau net et identique partout pour qui navigue au clavier ; invisible au clic souris. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible {
    outline: 3px solid var(--tc-focus-ring);
    outline-offset: 2px;
    box-shadow: none;
}

.hero a:focus-visible,
.home-hero a:focus-visible,
.cta-band a:focus-visible,
.footer a:focus-visible,
.quote-text a:focus-visible,
.contact-form-panel a:focus-visible,
.contact-form-panel button:focus-visible {
    outline-color: #fff;
}

/* ---------- Boutons / couleurs ---------- */
/* Variables Bootstrap : survol, clic, focus et état désactivé restent cohérents entre eux. */
.btn-primary {
    --bs-btn-color: var(--tc-on-primary);
    --bs-btn-bg: var(--tc-primary);
    --bs-btn-border-color: var(--tc-primary);
    --bs-btn-hover-color: var(--tc-on-primary);
    --bs-btn-hover-bg: var(--tc-primary-light);
    --bs-btn-hover-border-color: var(--tc-primary-light);
    --bs-btn-active-color: var(--tc-on-primary);
    --bs-btn-active-bg: var(--tc-primary-dark);
    --bs-btn-active-border-color: var(--tc-primary-dark);
    --bs-btn-disabled-color: var(--tc-on-primary);
    --bs-btn-disabled-bg: var(--tc-primary);
    --bs-btn-disabled-border-color: var(--tc-primary);
    font-weight: 600;
    transition: background-color .15s ease, border-color .15s ease, transform .2s ease, box-shadow .2s ease;
}

.btn-outline-primary {
    --bs-btn-color: var(--tc-primary-text);
    --bs-btn-border-color: var(--tc-primary-text);
    --bs-btn-hover-color: var(--tc-on-primary);
    --bs-btn-hover-bg: var(--tc-primary);
    --bs-btn-hover-border-color: var(--tc-primary);
    --bs-btn-active-color: var(--tc-on-primary);
    --bs-btn-active-bg: var(--tc-primary-dark);
    --bs-btn-active-border-color: var(--tc-primary-dark);
    font-weight: 600;
}

.text-primary {
    color: var(--tc-primary-text) !important;
}

/* Sur fond sombre, l'orange vif est le plus lisible (7,6:1 sur le bleu nuit). */
.footer .text-primary,
.quote-text .text-primary,
.contact-form-panel .text-primary {
    color: var(--tc-primary) !important;
}

.bg-primary {
    background-color: var(--tc-primary) !important;
}

/* L'orange est réservé aux actions (devis, appel) : icônes d'information en bleu glacé,
   prix en bleu nuit. */
.text-frost {
    color: var(--tc-frost);
}

.service-price {
    color: var(--tc-dark);
}

/* Détail d'un service : l'encadré prix + boutons suit le défilement sous la barre de navigation.
   (La classe sticky-top de Bootstrap a le même z-index que la barre et passait par-dessus.) */
@media (min-width: 992px) {
    .service-aside {
        position: sticky;
        top: 100px;
        z-index: 1;
    }
}

.bg-primary.bg-opacity-10 {
    background-color: rgba(255, 128, 15, .1) !important;
}

/* ---------- Hero ---------- */
.hero {
    position: relative;
    overflow: hidden;
    background: var(--tc-dark);
    color: #fff;
    padding: 5rem 0;
}

.hero > .container {
    position: relative;
    z-index: 2;
}

/* ---------- Hero : apparition du contenu ---------- */
.hero-anim {
    opacity: 0;
    animation: heroFadeUp .8s cubic-bezier(.25, .8, .35, 1) forwards;
}

.hero-anim-1 { animation-delay: .05s; }
.hero-anim-2 { animation-delay: .2s; }
.hero-anim-3 { animation-delay: .35s; }
.hero-anim-4 { animation-delay: .5s; }

@keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .hero-anim { animation: none; opacity: 1; }
}

.hero .btn-outline-light:hover {
    color: var(--tc-dark);
}

.hero .btn-lg {
    transition: transform .25s ease, box-shadow .25s ease;
}

.hero .btn-lg:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .25);
}

.icon-box-lg {
    width: 90px;
    height: 90px;
    font-size: 2rem;
}

/* ---------- Logos des marques partenaires ---------- */
.brand-badge {
    font-family: 'Plus Jakarta Sans', 'Cairo', system-ui, sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--tc-ink);
    opacity: .5;
    letter-spacing: .5px;
    white-space: nowrap;
    transition: opacity .2s ease;
}

.brand-badge:hover {
    opacity: 1;
    color: var(--tc-primary-text);
}

.brand-mark-logo {
    height: 34px;
    width: auto;
    flex-shrink: 0;
    transition: transform .2s ease, opacity .2s ease;
}

.brand-marquee-track a:hover .brand-mark-logo {
    transform: scale(1.08);
    opacity: .85;
}

/* ---------- Défilé des marques (boucle continue) ---------- */
.brand-marquee {
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.brand-marquee-track {
    display: flex;
    align-items: center;
    gap: 3.5rem;
    width: max-content;
    animation: brandMarquee 22s linear infinite;
}

.brand-marquee:hover .brand-marquee-track,
.brand-marquee:focus-within .brand-marquee-track {
    animation-play-state: paused;
}

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

@media (prefers-reduced-motion: reduce) {
    .brand-marquee-track {
        animation: none;
    }
}

/* ---------- Accueil : bloc formulaire de contact ---------- */
.contact-form-panel {
    background: var(--tc-dark);
}

.contact-form-panel label {
    color: rgba(255, 255, 255, .85);
}

/* ---------- Galerie photo d'un service (ouverture haut/bas) ---------- */
.gallery-carousel {
    position: relative;
    height: 400px;
    overflow: hidden;
    background: var(--tc-dark);
}

.gallery-carousel-slide {
    position: absolute;
    inset: 0;
}

.gallery-carousel-half {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 1.1s cubic-bezier(.65, 0, .35, 1);
}

.gallery-carousel-half--top {
    clip-path: inset(0 0 50% 0);
    transform: translateY(-100%);
}

.gallery-carousel-half--bottom {
    clip-path: inset(50% 0 0 0);
    transform: translateY(100%);
}

.gallery-carousel-slide.is-active .gallery-carousel-half {
    transform: translateY(0);
}

.gallery-carousel-card {
    height: 210px;
    border-radius: 6px 6px 0 0;
}

.gallery-carousel-tile {
    height: 140px;
}

/* ---------- Formulaires ---------- */
/* Champs obligatoires signalés par un astérisque (le thème Bootstrap de Symfony ajoute la
   classe « required » au label). Les lecteurs d'écran lisent déjà l'attribut required. */
.form-label.required::after {
    content: " *";
    color: var(--tc-primary-text);
    font-weight: 700;
}

/* ---------- Pastilles d'icône ---------- */
.icon-box {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tc-primary);
    color: var(--tc-on-primary);
    font-size: 1.6rem;
}

/* Texte à côté d'une icône (email…) : peut rétrécir et se couper au lieu de déborder. */
.contact-line-value {
    min-width: 0;
    overflow-wrap: break-word;
}

.icon-box-sm {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    font-size: 1.05rem;
}

/* ---------- Cartes avantages ---------- */
.advantage-card {
    padding: 1.75rem 1.1rem;
    border-radius: 6px;
    transition: background-color .2s ease, transform .2s ease;
}

.advantage-card:hover {
    background: var(--tc-surface);
    transform: translateY(-4px);
}

/* ---------- Cartes témoignages ---------- */
.testimonial-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--tc-border);
    border-radius: 6px;
    padding: 2.1rem 1.6rem 1.6rem;
    box-shadow: 0 1px 2px rgba(1, 10, 53, .04);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.testimonial-card::before {
    content: "\201C";
    position: absolute;
    top: -.35rem;
    left: 1.4rem;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 3.75rem;
    line-height: 1;
    color: var(--tc-accent);
    opacity: .3;
}

.testimonial-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 1.25rem 2.5rem rgba(1, 10, 53, .12);
    border-color: var(--tc-accent);
    z-index: 1;
}

.testimonial-card blockquote {
    margin: 0;
}

@media (prefers-reduced-motion: reduce) {
    .testimonial-card:hover { transform: none; }
}

/* ---------- Visuel de remplacement (aucune photo) ---------- */
.media-placeholder {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(135deg, var(--tc-dark) 0%, var(--tc-primary-dark) 100%);
    color: rgba(255, 255, 255, .85);
}

.media-placeholder::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1px);
    background-size: 18px 18px;
    opacity: .5;
}

.media-placeholder i {
    position: relative;
    z-index: 1;
    font-size: 2.6rem;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .25));
}

/* ---------- Cartes ---------- */
.service-card, .project-card, .stat-card {
    border: 1px solid var(--tc-border);
    border-radius: 6px;
    transition: transform var(--tc-dur) var(--tc-ease), box-shadow var(--tc-dur) var(--tc-ease), border-color var(--tc-dur) ease;
    background: #fff;
}

.service-card, .project-card {
    overflow: hidden;
    box-shadow: var(--tc-shadow-sm);
}

.service-card:hover, .project-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--tc-shadow-lg);
    border-color: transparent;
}

.project-card img, .service-card img, .project-card .media-placeholder, .service-card .media-placeholder {
    border-radius: 6px 6px 0 0;
    height: 210px;
    object-fit: cover;
    width: 100%;
}

.project-card img,
.service-card img,
.project-card .media-placeholder,
.service-card .media-placeholder,
.project-card .gallery-carousel,
.service-card .gallery-carousel {
    transition: transform var(--tc-dur-slow) var(--tc-ease);
}

.project-card:hover img,
.service-card:hover img,
.project-card:hover .media-placeholder,
.service-card:hover .media-placeholder,
.project-card:hover .gallery-carousel,
.service-card:hover .gallery-carousel {
    transform: scale(1.04);
}

.section-title {
    font-weight: 800;
    font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.15rem);
    letter-spacing: -0.01em;
    color: var(--tc-dark);
}

.section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: var(--tc-accent-dark);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 600;
    font-size: .78rem;
    margin-bottom: .5rem;
}

.section-eyebrow::before {
    content: "";
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: var(--tc-accent);
}

.text-center .section-eyebrow {
    justify-content: center;
}

/* Arabe : pas de majuscules ni d'espacement entre les lettres (il casserait leur liaison). */
[dir="rtl"] .section-eyebrow,
[dir="rtl"] .footer-title,
[dir="rtl"] .method-step__index {
    letter-spacing: 0;
    font-size: .9rem;
}

.video-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(1, 10, 53, .65);
    backdrop-filter: blur(4px);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

/* ---------- Pied de page ---------- */
.footer {
    background: var(--tc-dark) !important;
}

.footer a {
    color: rgba(255, 255, 255, .65);
    text-decoration: none;
    transition: color var(--tc-dur-fast) ease;
}

/* Liens du pied de page : décalage d'un cran au survol, vers la fin de ligne (gauche en arabe). */
.footer-links a {
    display: inline-block;
    transition: color var(--tc-dur-fast) ease, transform var(--tc-dur) var(--tc-ease);
}

.footer-links a:hover {
    transform: translateX(4px);
}

[dir="rtl"] .footer-links a:hover {
    transform: translateX(-4px);
}

.footer a:hover {
    color: #fff;
}

.footer-links li {
    margin-bottom: .5rem;
}

.flash-message {
    z-index: 2000;
}

.badge-status {
    font-size: .75rem;
}

.whatsapp-float {
    position: fixed;
    bottom: 24px;
    inset-inline-end: 24px;
    background: #25D366;
    color: #fff;
    border-radius: 50%;
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
    z-index: 1500;
    transition: transform var(--tc-dur) var(--tc-ease), box-shadow var(--tc-dur) var(--tc-ease);
}

/* Apparaît en fondu et en glissant plutôt que d'un coup ; reste inaccessible tant qu'il est caché. */
.back-to-top {
    display: flex;
    position: fixed;
    bottom: 94px;
    inset-inline-end: 24px;
    width: 45px;
    height: 45px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    z-index: 1500;
    opacity: 0;
    visibility: hidden;
    translate: 0 12px;
    transition: opacity var(--tc-dur) var(--tc-ease), translate var(--tc-dur) var(--tc-ease), visibility 0s linear var(--tc-dur), transform var(--tc-dur-fast) var(--tc-ease), box-shadow var(--tc-dur-fast) ease, background-color .15s ease;
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;
    translate: 0 0;
    transition-delay: 0s;
}

.whatsapp-float:hover {
    color: #fff;
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .28);
}

/* ========================================================================
   Refonte du site public : sections, cartes, accueil
   ======================================================================== */

/* ---------- Rythme des sections ---------- */
.section-pad {
    padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem);
}

/* Fond « givré » : blanc à peine bleuté, pour alterner les sections sans gris terne. */
.bg-frost {
    background: linear-gradient(180deg, var(--tc-frost-tint) 0%, #fff 100%);
}

.section-head {
    max-width: 680px;
    margin: 0 auto 2.75rem;
}

.section-head.d-md-flex {
    max-width: none;
}

.section-lead {
    color: var(--tc-muted);
    font-size: 1.075rem;
    line-height: 1.7;
    margin: .75rem 0 0;
}

.section-title--sm {
    font-size: clamp(1.3rem, 1.1rem + .8vw, 1.6rem);
}

/* Lien texte « Voir plus » avec flèche (voir .btn-more pour l'animation de la flèche). */
.link-more {
    display: inline-flex;
    align-items: center;
    font-weight: 700;
    color: var(--tc-primary-text);
    text-decoration: none;
}

.link-more:hover {
    color: var(--tc-primary-dark);
}

/* ---------- Bouton WhatsApp ---------- */
/* Vert foncé : le texte blanc y atteint 4,5:1 (sur le vert WhatsApp clair, seulement 2:1). */
.btn-whatsapp {
    --bs-btn-color: #fff;
    --bs-btn-bg: #0e7a40;
    --bs-btn-border-color: #0e7a40;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0b6a37;
    --bs-btn-hover-border-color: #0b6a37;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #095a2f;
    --bs-btn-active-border-color: #095a2f;
    font-weight: 600;
    transition: background-color var(--tc-dur-fast) ease, transform var(--tc-dur-fast) var(--tc-ease), box-shadow var(--tc-dur-fast) ease;
}

.btn-whatsapp:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(14, 122, 64, .3);
}

/* ---------- Accueil : hero ---------- */
.home-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    color: #fff;
    padding: clamp(3rem, 2rem + 4vw, 5.5rem) 0 clamp(3.5rem, 2rem + 5vw, 6.5rem);
    background:
        radial-gradient(60% 70% at 85% 20%, rgba(56, 189, 248, .22), transparent 70%),
        radial-gradient(45% 60% at 0% 100%, rgba(255, 128, 15, .16), transparent 70%),
        linear-gradient(160deg, #031447 0%, var(--tc-dark) 60%);
}

/* Trame de points discrète, estompée vers le bas. */
.home-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1px);
    background-size: 24px 24px;
    mask-image: linear-gradient(180deg, #000 0%, transparent 80%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 80%);
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .9rem;
    border-radius: 999px;
    background: rgba(56, 189, 248, .12);
    border: 1px solid rgba(56, 189, 248, .35);
    color: #bae6fd;
    font-size: .85rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
}

.home-hero__title {
    font-size: clamp(2.1rem, 1.4rem + 3vw, 3.5rem);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -.025em;
    margin-bottom: 1.25rem;
    color: #fff;
}

.home-hero__lead {
    font-size: clamp(1.02rem, .95rem + .3vw, 1.15rem);
    color: rgba(255, 255, 255, .78);
    max-width: 34rem;
    margin-bottom: 2rem;
}

.home-hero .btn-lg {
    padding: .95rem 1.6rem;
    font-size: 1.02rem;
}

.hero-points {
    list-style: none;
    padding: 0;
    margin: 2rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1.5rem;
    font-size: .95rem;
    color: rgba(255, 255, 255, .85);
}

.hero-points li {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.hero-points .bi {
    color: var(--tc-frost-bright);
}

.hero-anim-5 { animation-delay: .65s; }

/* Photos de chantier : grande photo encadrée, petite photo en décalé, carte « 24h » flottante. */
.hero-visual {
    position: relative;
    max-width: 520px;
    margin-inline: auto;
    padding: 0 0 2.5rem 2.5rem;
}

.hero-visual__main {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    aspect-ratio: 4 / 4.6;
    box-shadow: 0 30px 60px rgba(0, 0, 0, .35);
    outline: 1px solid rgba(255, 255, 255, .12);
    outline-offset: -1px;
}

.hero-visual__main img,
.hero-visual__inset img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hero-visual__main img {
    object-position: center 65%;
}

.hero-visual__inset {
    position: absolute;
    inset-inline-start: 0;
    bottom: 0;
    width: 42%;
    aspect-ratio: 1;
    border-radius: 18px;
    overflow: hidden;
    border: 5px solid var(--tc-dark);
    box-shadow: 0 20px 40px rgba(0, 0, 0, .35);
}

.hero-visual__card {
    position: absolute;
    top: 1.5rem;
    inset-inline-end: -1rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1.1rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, .96);
    color: var(--tc-ink);
    box-shadow: 0 18px 40px rgba(1, 10, 53, .3);
}

.hero-visual__card strong,
.hero-visual__card small {
    display: block;
    line-height: 1.25;
}

.hero-visual__card small {
    color: var(--tc-muted);
}

.hero-visual__card-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--tc-primary);
    color: var(--tc-on-primary);
    font-size: 1.2rem;
    flex-shrink: 0;
}

/* La carte flotte doucement : seule animation continue du hero, très lente et sur transform. */
.motion .hero-visual__card {
    animation: floatCard 6s ease-in-out 1.5s infinite alternate;
}

@keyframes floatCard {
    from { transform: translateY(0); }
    to { transform: translateY(-8px); }
}

@media (max-width: 991.98px) {
    .hero-visual {
        max-width: 440px;
    }

    .hero-visual__card {
        inset-inline-end: .5rem;
    }
}

@media (max-width: 575.98px) {
    .hero-visual {
        padding: 0;
    }

    .hero-visual__main {
        aspect-ratio: 4 / 3.6;
    }

    .hero-visual__card {
        top: auto;
        bottom: 1rem;
        inset-inline: 1rem;
    }
}

/* ---------- Bandeau d'engagements sous le hero ---------- */
.trust-strip {
    position: relative;
    z-index: 2;
    margin-top: -2.5rem;
}

.trust-strip > .container > .row {
    background: #fff;
    border-radius: 18px;
    box-shadow: var(--tc-shadow-lg);
    padding: 1.25rem .75rem;
    margin-inline: 0;
}

.trust-strip-item {
    display: flex;
    align-items: center;
    gap: .9rem;
    height: 100%;
}

.trust-strip-item .icon-box {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    flex-shrink: 0;
    font-size: 1.25rem;
    background: var(--tc-frost-tint);
    color: var(--tc-frost);
}

.trust-strip-value {
    font-weight: 800;
    font-size: 1.35rem;
    line-height: 1.1;
    color: var(--tc-dark);
}

.trust-strip-value--text {
    font-size: 1rem;
}

.trust-strip-label {
    font-size: .85rem;
    color: var(--tc-muted);
    margin-top: .15rem;
}

@media (max-width: 575.98px) {
    .trust-strip-item {
        flex-direction: column;
        align-items: flex-start;
        gap: .5rem;
    }
}

/* ---------- Cartes de services (accueil) ---------- */
.service-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--tc-border);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--tc-shadow-sm);
    transition: transform var(--tc-dur) var(--tc-ease), box-shadow var(--tc-dur) var(--tc-ease), border-color var(--tc-dur) ease;
}

.service-tile:hover {
    transform: translateY(-6px);
    box-shadow: var(--tc-shadow-lg);
    border-color: transparent;
}

.service-tile__media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--tc-frost-tint);
}

.service-tile__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--tc-dur-slow) var(--tc-ease);
}

.service-tile:hover .service-tile__media img {
    transform: scale(1.05);
}

/* Pastille d'icône à cheval sur la photo et le texte (marge négative : la photo reste rognée
   proprement pour son zoom au survol). */
.service-tile__icon {
    position: relative;
    z-index: 2;
    width: 48px;
    height: 48px;
    margin: -24px 0 1rem;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: var(--tc-primary);
    color: var(--tc-on-primary);
    font-size: 1.25rem;
    box-shadow: 0 8px 18px rgba(255, 128, 15, .35);
    transition: transform var(--tc-dur) var(--tc-ease);
}

.service-tile:hover .service-tile__icon {
    transform: translateY(-3px);
}

.service-tile__body {
    padding: 0 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-grow: 1;
}

.service-tile__title {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: .6rem;
}

.service-tile__title a {
    color: var(--tc-dark);
    text-decoration: none;
}

.service-tile__text {
    color: var(--tc-muted);
    font-size: .95rem;
    line-height: 1.65;
    flex-grow: 1;
    margin-bottom: 1rem;
}


/* ---------- Méthode de travail ---------- */
.method-steps {
    position: relative;
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    counter-reset: none;
}

/* Ligne de circulation qui relie les étapes (du bleu glacier à l'orange). */
.method-steps::before {
    content: "";
    position: absolute;
    top: 32px;
    inset-inline: 12.5%;
    height: 2px;
    background: linear-gradient(90deg, var(--tc-frost-bright), var(--tc-primary));
    border-radius: 2px;
    transform-origin: left center;
}

[dir="rtl"] .method-steps::before {
    background: linear-gradient(270deg, var(--tc-frost-bright), var(--tc-primary));
    transform-origin: right center;
}

.motion .method-steps::before {
    transform: scaleX(0);
    transition: transform 1.2s var(--tc-ease) .2s;
}

.motion .method-steps:has(.is-revealed)::before {
    transform: scaleX(1);
}

.method-step {
    position: relative;
    text-align: center;
    padding: 0 .5rem;
}

.method-step__num {
    position: relative;
    z-index: 1;
    width: 64px;
    height: 64px;
    margin: 0 auto 1.1rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #fff;
    border: 2px solid var(--tc-frost-tint);
    box-shadow: 0 10px 24px rgba(10, 111, 168, .14);
    color: var(--tc-frost);
    font-size: 1.5rem;
    transition: transform var(--tc-dur) var(--tc-ease), background-color var(--tc-dur) ease, color var(--tc-dur) ease;
}

.method-step:hover .method-step__num {
    transform: translateY(-4px);
    background: var(--tc-frost);
    color: #fff;
}

.method-step__index {
    display: block;
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .12em;
    color: var(--tc-primary-text);
    margin-bottom: .35rem;
}

.method-step__title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: .5rem;
}

.method-step__text {
    color: var(--tc-muted);
    font-size: .95rem;
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 991.98px) {
    .method-steps {
        grid-template-columns: 1fr 1fr;
        row-gap: 2.5rem;
    }

    .method-steps::before {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .method-steps {
        grid-template-columns: 1fr;
    }

    .method-step {
        display: grid;
        grid-template-columns: 64px 1fr;
        column-gap: 1rem;
        text-align: start;
    }

    .method-step__num {
        grid-row: span 3;
        margin: 0;
    }
}

/* ---------- Pourquoi nous : collage de photos de chantier ---------- */
.about-collage {
    position: relative;
    max-width: 540px;
    margin-inline: auto;
    padding-bottom: 12%;
    padding-inline-end: 18%;
}

.about-collage__a {
    width: 100%;
    aspect-ratio: 4 / 3.4;
    object-fit: cover;
    border-radius: 22px;
    box-shadow: var(--tc-shadow-lg);
}

.about-collage__b {
    position: absolute;
    inset-inline-end: 0;
    bottom: 0;
    width: 52%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 18px;
    border: 6px solid #fff;
    box-shadow: var(--tc-shadow-lg);
}

.about-collage__badge {
    position: absolute;
    top: 1.25rem;
    inset-inline-start: -1rem;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .75rem 1.1rem;
    border-radius: 14px;
    background: var(--tc-dark);
    color: #fff;
    font-weight: 700;
    font-size: .95rem;
    box-shadow: 0 16px 32px rgba(1, 10, 53, .3);
}

.about-collage__badge .bi {
    color: var(--tc-frost-bright);
    font-size: 1.25rem;
}

@media (max-width: 575.98px) {
    .about-collage__badge {
        inset-inline-start: .75rem;
    }
}

.advantage-item {
    display: flex;
    gap: 1rem;
    height: 100%;
    padding: 1.1rem;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--tc-border);
    transition: transform var(--tc-dur) var(--tc-ease), box-shadow var(--tc-dur) var(--tc-ease), border-color var(--tc-dur) ease;
}

.advantage-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--tc-shadow-sm);
    border-color: rgba(10, 111, 168, .25);
}

.advantage-item .icon-box {
    flex-shrink: 0;
    background: var(--tc-frost-tint);
    color: var(--tc-frost);
}

.advantage-item__title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: .25rem;
}

.advantage-item__text {
    font-size: .9rem;
    color: var(--tc-muted);
    line-height: 1.55;
    margin: 0;
}

/* Bloc « Appelez-nous » : numéro en grand, cliquable sur téléphone. */
.phone-cta {
    display: inline-flex;
    align-items: center;
    gap: .9rem;
    text-decoration: none;
    color: var(--tc-dark);
}

.phone-cta small {
    display: block;
    color: var(--tc-muted);
    font-size: .85rem;
}

.phone-cta strong {
    display: block;
    font-size: 1.35rem;
    font-weight: 800;
}

.phone-cta__icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--tc-primary);
    color: var(--tc-on-primary);
    font-size: 1.3rem;
    box-shadow: 0 0 0 6px rgba(255, 128, 15, .15);
    transition: box-shadow var(--tc-dur) var(--tc-ease);
}

.phone-cta:hover {
    color: var(--tc-dark);
}

.phone-cta:hover .phone-cta__icon {
    box-shadow: 0 0 0 10px rgba(255, 128, 15, .12);
}

/* ---------- Réalisations : mosaïque de grandes photos ---------- */
.project-mosaic {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    grid-auto-rows: 260px;
    gap: 1.25rem;
}

.project-mosaic > :first-child {
    grid-row: span 2;
}

.project-mosaic > :only-child {
    grid-column: span 2;
}

/* Deux réalisations seulement : deux grandes photos côte à côte, sans case vide. */
.project-mosaic:has(> :nth-child(2):last-child) {
    grid-template-columns: 1fr 1fr;
}

.project-mosaic:has(> :nth-child(2):last-child) > * {
    grid-row: span 2;
}

.project-tile {
    position: relative;
    display: block;
    border-radius: 20px;
    overflow: hidden;
    background: var(--tc-dark);
    color: #fff;
    text-decoration: none;
    box-shadow: var(--tc-shadow-sm);
    transition: box-shadow var(--tc-dur) var(--tc-ease), transform var(--tc-dur) var(--tc-ease);
}

.project-tile img,
.project-tile .media-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--tc-dur-slow) var(--tc-ease);
}

/* Dégradé sombre en bas pour la légende. */
.project-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(1, 10, 53, .85) 0%, rgba(1, 10, 53, .2) 45%, transparent 70%);
    pointer-events: none;
}

.project-tile:hover {
    color: #fff;
    box-shadow: var(--tc-shadow-lg);
}

.project-tile:hover img,
.project-tile:hover .media-placeholder {
    transform: scale(1.05);
}

.project-tile__caption {
    position: absolute;
    inset-inline: 1.25rem;
    bottom: 1.1rem;
    z-index: 1;
    transition: translate var(--tc-dur) var(--tc-ease);
}

.project-tile:hover .project-tile__caption {
    translate: 0 -4px;
}

.project-tile__caption small {
    display: block;
    color: rgba(255, 255, 255, .75);
    font-size: .85rem;
    margin-bottom: .2rem;
}

.project-tile__caption strong {
    display: block;
    font-size: 1.15rem;
    line-height: 1.3;
}

.project-tile .video-badge {
    z-index: 2;
}

@media (max-width: 767.98px) {
    .project-mosaic {
        grid-template-columns: 1fr;
        grid-auto-rows: 240px;
    }

    .project-mosaic > :first-child {
        grid-row: auto;
    }

    .project-mosaic > :only-child {
        grid-column: auto;
    }
}

/* ---------- Avis clients ---------- */
.testimonial-stars {
    color: #f59e0b;
    letter-spacing: .1em;
}

.testimonial-card blockquote p {
    color: var(--tc-ink);
    font-size: 1rem;
    line-height: 1.7;
}

/* ---------- Contact (accueil) ---------- */
.contact-split {
    border-radius: 22px;
    overflow: hidden;
    box-shadow: var(--tc-shadow-lg);
}

.contact-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    display: grid;
    gap: 1rem;
    color: var(--tc-ink);
}

.contact-list li {
    display: flex;
    align-items: center;
    gap: .9rem;
    min-width: 0;
}

.contact-list .icon-box {
    flex-shrink: 0;
    background: var(--tc-frost-tint);
    color: var(--tc-frost);
}

.contact-list a {
    color: inherit;
    text-decoration: none;
}

.contact-list a:hover {
    color: var(--tc-primary-text);
}

/* ---------- Appel à l'action final ---------- */
.cta-band-wrap {
    padding-bottom: clamp(3rem, 2rem + 3vw, 5rem);
}

.cta-band {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem 2rem;
    padding: clamp(2rem, 1.5rem + 2vw, 3.25rem);
    border-radius: 26px;
    color: #fff;
    background:
        radial-gradient(50% 120% at 100% 0%, rgba(56, 189, 248, .3), transparent 70%),
        linear-gradient(135deg, #062a6b 0%, var(--tc-dark) 70%);
}

/* Lignes d'air en fond : trois courbes très légères, statiques. */
.cta-band::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .18;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 200' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23bae6fd' stroke-width='1.5'%3E%3Cpath d='M0 60 C150 20 300 100 600 40'/%3E%3Cpath d='M0 110 C200 70 350 150 600 90'/%3E%3Cpath d='M0 160 C150 120 400 190 600 140'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 100% 100%;
}

.cta-band__title {
    color: #fff;
    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
    font-weight: 800;
    margin-bottom: .5rem;
}

.cta-band__text {
    color: rgba(255, 255, 255, .75);
    margin: 0;
    max-width: 36rem;
}

.cta-band__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

/* ---------- Pages intérieures : cartes, formulaires, carte ---------- */
.service-card, .project-card {
    border-radius: 18px;
}

.project-card img, .service-card img, .project-card .media-placeholder, .service-card .media-placeholder {
    border-radius: 0;
}

.gallery-carousel-card {
    border-radius: 0;
}

/* Cadre des formulaires (devis, intervention, contact). */
.form-card {
    background: #fff;
    border: 1px solid var(--tc-border);
    border-radius: 22px;
    box-shadow: var(--tc-shadow-lg);
}

.form-control,
.form-select {
    border-radius: 10px;
    padding-block: .65rem;
    border-color: #d5d9e0;
}

.form-label {
    font-weight: 600;
    font-size: .92rem;
    color: var(--tc-ink);
}

/* En-têtes des pages intérieures : même fond que le hero de l'accueil. */
.hero.py-5 {
    background: linear-gradient(160deg, #031447 0%, var(--tc-dark) 65%);
    padding-block: clamp(3rem, 2rem + 3vw, 4.5rem) !important;
}

.hero.py-5 h1 {
    font-size: clamp(2rem, 1.5rem + 2vw, 2.8rem);
    font-weight: 800;
    letter-spacing: -.02em;
}

/* ---------- Pied de page ---------- */
.footer {
    margin-top: 0;
    padding: 4rem 0 1.5rem;
    background:
        radial-gradient(40% 60% at 100% 0%, rgba(56, 189, 248, .1), transparent 70%),
        var(--tc-dark) !important;
}

.footer-tagline {
    color: rgba(255, 255, 255, .65);
    font-size: .95rem;
    line-height: 1.7;
    max-width: 22rem;
}

/* WhatsApp, Facebook et Instagram côte à côte sous le slogan. */
.footer-social {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
}

.footer-social__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    font-size: 1.1rem;
    transition: color var(--tc-dur-fast) ease, background-color var(--tc-dur-fast) ease;
}

.footer-social__icon:hover {
    background: rgba(255, 255, 255, .16);
}

.footer-title {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tc-frost-bright);
    margin-bottom: 1.1rem;
}

.footer-contact li {
    display: flex;
    gap: .7rem;
    color: rgba(255, 255, 255, .75);
    margin-bottom: .7rem;
    min-width: 0;
}

.footer-contact .bi {
    color: var(--tc-primary);
    margin-top: .15rem;
}

/* Email du footer : jamais coupé au milieu de l'adresse ; un peu plus petit pour tenir dans la
   colonne étroite (col-lg-3) entre 992 et 1199 px. */
.footer-contact .contact-line-value {
    white-space: nowrap;
    font-size: .875rem;
}

.footer-bottom {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, .1);
    text-align: center;
    color: rgba(255, 255, 255, .5);
    font-size: .875rem;
}

/* ---------- Animations : apparition au défilement ---------- */
/* La classe « motion » est posée sur <html> par le script du <head> (base.html.twig), seulement
   si le visiteur n'a pas demandé moins d'animations et si le navigateur sait détecter l'entrée
   à l'écran. Sans elle (ou si le script de la page échoue), tout le contenu reste affiché tel quel.
   Seules opacity et translate/scale sont animées : rien ne force un recalcul de la mise en page.
   translate (et non transform) laisse transform libre pour l'élévation au survol des cartes. */
.motion :is(.section-eyebrow, .section-title, .section-lead, .service-card, .service-tile, .project-card,
            .project-tile, .testimonial-card, .trust-strip-item, .advantage-item, .method-step, [data-reveal]) {
    opacity: 0;
    translate: 0 24px;
    transition:
        opacity var(--tc-dur-slow) var(--tc-ease) var(--reveal-delay, 0ms),
        translate var(--tc-dur-slow) var(--tc-ease) var(--reveal-delay, 0ms),
        transform var(--tc-dur) var(--tc-ease),
        box-shadow var(--tc-dur) var(--tc-ease),
        border-color var(--tc-dur) ease;
}

/* Photos : légère mise au point (de 96 % à 100 %) au lieu de monter. */
.motion [data-reveal="image"] {
    opacity: 0;
    scale: .96;
    translate: none;
    transition:
        opacity var(--tc-dur-slow) var(--tc-ease) var(--reveal-delay, 0ms),
        scale var(--tc-dur-slow) var(--tc-ease) var(--reveal-delay, 0ms);
}

.motion .is-revealed {
    opacity: 1;
    translate: 0 0;
    scale: 1;
}

/* Le trait des surtitres se dessine juste après l'apparition du texte. */
.motion .section-eyebrow::before {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--tc-dur-slow) var(--tc-ease) calc(var(--reveal-delay, 0ms) + .2s);
}

[dir="rtl"] .motion .section-eyebrow::before {
    transform-origin: right center;
}

.motion .section-eyebrow.is-revealed::before {
    transform: scaleX(1);
}

/* ---------- Cartes de services : halo qui suit la souris ---------- */
.spotlight {
    position: relative;
}

.spotlight::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(260px circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(255, 128, 15, .14), transparent 70%);
    opacity: 0;
    transition: opacity var(--tc-dur) ease;
    z-index: 2;
}

.spotlight:hover::after {
    opacity: 1;
}

/* ---------- Bouton principal du hero : reflet ---------- */
/* Deux passages après l'apparition du hero, puis à chaque survol : attire l'œil sans clignoter
   en permanence. Le reflet glisse par transform (pas de recalcul de mise en page). */
.btn-shimmer {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.btn-shimmer::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 45%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
    transform: translateX(-130%) skewX(-20deg);
    animation: btnShimmer 1.4s var(--tc-ease) 1.2s 2;
    pointer-events: none;
    z-index: -1;
}

.btn-shimmer:hover::after {
    animation: btnShimmerHover 1s var(--tc-ease);
}

@keyframes btnShimmer {
    from { transform: translateX(-130%) skewX(-20deg); }
    to { transform: translateX(260%) skewX(-20deg); }
}

/* Même trajet sous un autre nom : le navigateur relance l'animation au survol. */
@keyframes btnShimmerHover {
    from { transform: translateX(-130%) skewX(-20deg); }
    to { transform: translateX(260%) skewX(-20deg); }
}

/* ---------- Navigation ---------- */
/* Au défilement : ombre et logo un peu plus petit. Le logo rétrécit par scale, la barre garde sa
   hauteur : le contenu de la page ne saute pas. */
.navbar.sticky-top {
    transition: box-shadow var(--tc-dur) var(--tc-ease);
}

.navbar.sticky-top.is-scrolled {
    box-shadow: 0 6px 24px rgba(1, 10, 53, .10) !important;
}

.navbar .brand-logo {
    transform-origin: left center;
    transition: scale var(--tc-dur) var(--tc-ease);
}

[dir="rtl"] .navbar .brand-logo {
    transform-origin: right center;
}

.navbar.is-scrolled .brand-logo {
    scale: .85;
}

/* Soulignement des liens du menu : se trace depuis le centre au survol, reste sous la page active. */
.navbar-nav .nav-link:not(.dropdown-toggle) {
    position: relative;
}

.navbar-nav .nav-link:not(.dropdown-toggle)::after {
    content: "";
    position: absolute;
    inset-inline: .5rem;
    bottom: .2rem;
    height: 2px;
    border-radius: 2px;
    background: var(--tc-primary);
    transform: scaleX(0);
    transition: transform var(--tc-dur) var(--tc-ease);
}

.navbar-nav .nav-link:not(.dropdown-toggle):hover::after,
.navbar-nav .nav-link:not(.dropdown-toggle):focus-visible::after,
.navbar-nav .nav-link.active::after {
    transform: scaleX(1);
}

/* Menu mobile : Bootstrap anime déjà la hauteur ; les liens arrivent l'un après l'autre. */
@media (max-width: 991.98px) {
    .navbar-nav .nav-link:not(.dropdown-toggle)::after {
        inset-inline: 0 auto;
        width: 1.5rem;
        bottom: .35rem;
        transform-origin: left center;
    }

    [dir="rtl"] .navbar-nav .nav-link:not(.dropdown-toggle)::after {
        transform-origin: right center;
    }

    .motion .navbar-collapse .nav-item {
        opacity: 0;
        translate: 0 -6px;
        transition: opacity var(--tc-dur) var(--tc-ease), translate var(--tc-dur) var(--tc-ease);
    }

    .motion .navbar-collapse.show .nav-item {
        opacity: 1;
        translate: 0 0;
    }

    .motion .navbar-collapse.show .nav-item:nth-child(2) { transition-delay: .03s; }
    .motion .navbar-collapse.show .nav-item:nth-child(3) { transition-delay: .06s; }
    .motion .navbar-collapse.show .nav-item:nth-child(4) { transition-delay: .09s; }
    .motion .navbar-collapse.show .nav-item:nth-child(5) { transition-delay: .12s; }
    .motion .navbar-collapse.show .nav-item:nth-child(6) { transition-delay: .15s; }
    .motion .navbar-collapse.show .nav-item:nth-child(7) { transition-delay: .18s; }
}

/* Choix de la langue : le menu glisse en fondu au lieu d'apparaître d'un coup. */
.motion .dropdown-menu.show {
    animation: dropdownIn var(--tc-dur-fast) var(--tc-ease);
}

@keyframes dropdownIn {
    from { opacity: 0; translate: 0 -6px; }
    to { opacity: 1; translate: 0 0; }
}

/* ---------- Boutons ---------- */
/* Survol : le bouton se soulève ; clic : il s'enfonce légèrement, retour immédiat. */
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 128, 15, .35);
}

.btn-primary:active,
.btn-outline-primary:active {
    transform: translateY(0) scale(.98);
    box-shadow: none;
    transition-duration: .08s;
}

.btn-outline-primary {
    transition: background-color var(--tc-dur-fast) ease, border-color var(--tc-dur-fast) ease, color var(--tc-dur-fast) ease, transform var(--tc-dur-fast) var(--tc-ease);
}

/* « En savoir plus » : une flèche glisse vers la fin de ligne au survol de la carte (vers la
   gauche en arabe). Classe dédiée : les petits boutons d'icône de l'admin n'en ont pas. */
.btn-more::after {
    content: "\2192";
    display: inline-block;
    margin-inline-start: .35rem;
    transition: transform var(--tc-dur) var(--tc-ease);
}

[dir="rtl"] .btn-more::after {
    content: "\2190";
}

.btn-more:hover::after,
.service-tile:hover .btn-more::after,
.service-card:hover .btn-more::after {
    transform: translateX(4px);
}

[dir="rtl"] .btn-more:hover::after,
[dir="rtl"] .service-tile:hover .btn-more::after,
[dir="rtl"] .service-card:hover .btn-more::after {
    transform: translateX(-4px);
}

/* Envoi d'un formulaire : le bouton montre qu'il travaille et ne peut pas être cliqué deux fois. */
.btn.is-loading {
    pointer-events: none;
    opacity: .85;
}

/* ---------- Icônes ---------- */
.icon-box {
    transition: transform var(--tc-dur) var(--tc-ease), box-shadow var(--tc-dur) var(--tc-ease);
}

.advantage-item:hover .icon-box,
.trust-strip-item:hover .icon-box {
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(255, 128, 15, .3);
}

/* ---------- Champs de formulaire ---------- */
.form-control,
.form-select {
    transition: border-color var(--tc-dur-fast) ease, box-shadow var(--tc-dur-fast) ease, background-color var(--tc-dur-fast) ease;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--tc-primary);
    box-shadow: 0 0 0 .25rem rgba(255, 128, 15, .18);
}

.form-control:hover:not(:focus),
.form-select:hover:not(:focus) {
    border-color: #c5c9d2;
}

/* Champ fichier (devis, intervention) : bouton compact posé au-dessus du texte natif
   (« Aucun fichier choisi », nom du fichier), qui garde ainsi toute la largeur au lieu d'être
   tronqué au milieu par le navigateur dans les colonnes étroites. */
.form-control[type="file"] {
    padding: .45rem .55rem;
    font-size: .9rem;
    line-height: 1.6;
}

.form-control[type="file"]::file-selector-button {
    display: block;
    margin: 0 0 .45rem;
    padding: .3rem .8rem;
    border: 0;
    border-radius: 7px;
    background: #eef0f5;
    color: var(--tc-ink);
    font-weight: 600;
}

.form-control[type="file"]:hover:not(:disabled)::file-selector-button {
    background: #e2e5ec;
}

/* ---------- En-têtes des pages intérieures (Services, Devis, Contact…) ---------- */
/* Halos de couleur et trame de points au lieu d'un aplat bleu uni. Les halos glissent une seule
   fois à l'ouverture de la page puis restent en place : pas d'animation permanente. */
.hero.py-5 {
    isolation: isolate;
}

.hero.py-5::before,
.hero.py-5::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
}

.hero.py-5::before {
    inset: -40%;
    background:
        radial-gradient(35% 45% at 20% 30%, rgba(255, 128, 15, .28), transparent 70%),
        radial-gradient(40% 50% at 80% 70%, rgba(49, 47, 146, .65), transparent 70%);
    animation: headerGlow 1.6s var(--tc-ease) both;
}

.hero.py-5::after {
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .10) 1px, transparent 1px);
    background-size: 22px 22px;
    mask-image: linear-gradient(180deg, #000, transparent 85%);
    -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%);
}

@keyframes headerGlow {
    from { opacity: 0; transform: translate(-6%, -4%); }
    to { opacity: 1; transform: none; }
}

.hero.py-5 h1,
.hero.py-5 p,
.hero.py-5 .btn {
    animation: heroFadeUp var(--tc-dur-slow) var(--tc-ease) both;
}

.hero.py-5 p { animation-delay: .1s; }
.hero.py-5 .btn { animation-delay: .2s; }

/* Messages flash (« Merci, votre demande a été envoyée ») : descendent en douceur. */
.flash-message {
    animation: flashIn var(--tc-dur-slow) var(--tc-ease) both;
}

@keyframes flashIn {
    from { opacity: 0; translate: 0 -100%; }
    to { opacity: 1; translate: 0 0; }
}

/* ---------- Moins d'animations demandées par le système ---------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        transition-delay: 0s !important;
        scroll-behavior: auto !important;
    }

    .btn-shimmer::after,
    .spotlight::after {
        display: none;
    }

    .service-card:hover, .project-card:hover, .service-tile:hover, .project-tile:hover, .testimonial-card:hover,
    .btn-primary:hover, .whatsapp-float:hover {
        transform: none;
    }
}

/* ---------- Mobile : barre d'action fixe (Appeler / WhatsApp) ---------- */
.mobile-action-bar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 1500;
    display: flex;
    gap: .5rem;
    padding: .5rem .75rem calc(.5rem + env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid var(--tc-border);
    box-shadow: 0 -4px 16px rgba(1, 10, 53, .08);
}

/* Monte du bas peu après l'ouverture de la page : l'œil la remarque sans qu'elle gêne la lecture. */
.motion .mobile-action-bar {
    animation: actionBarIn var(--tc-dur-slow) var(--tc-ease) .5s both;
}

@keyframes actionBarIn {
    from { translate: 0 100%; }
    to { translate: 0 0; }
}

.mobile-action-bar__btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 48px;
    border-radius: .375rem;
    font-weight: 700;
    text-decoration: none;
    transition: filter .15s ease, transform .08s ease;
}

.mobile-action-bar__btn:active {
    filter: brightness(.92);
    transform: scale(.97);
}

.mobile-action-bar__btn--call {
    background: var(--tc-primary);
    color: var(--tc-on-primary);
}

/* Vert WhatsApp foncé : le texte blanc y atteint 4,5:1 (sur #25D366, seulement 2:1). */
.mobile-action-bar__btn--whatsapp {
    background: #0e7a40;
    color: #fff;
}

.mobile-action-bar__btn--call:hover { color: var(--tc-on-primary); }
.mobile-action-bar__btn--whatsapp:hover { color: #fff; }

@media (max-width: 991.98px) {
    /* La barre ne doit pas cacher le bas du pied de page (pages publiques seulement : l'admin
       partage cette feuille de style mais n'a pas de barre). */
    body:has(.mobile-action-bar) {
        padding-bottom: calc(64px + env(safe-area-inset-bottom));
    }

    /* Déjà dans la barre : la bulle WhatsApp ferait doublon. */
    .whatsapp-float {
        display: none;
    }

    .back-to-top {
        bottom: calc(76px + env(safe-area-inset-bottom));
    }
}

/* ---------- Admin ---------- */
.brand-logo {
    height: 56px;
    width: auto;
    display: block;
}

.navbar .brand-logo {
    height: 40px;
}

/* Le logo a été dessiné sur fond sombre : ses parties argentées (icône, « Eco ») se perdent
   sur fond clair. Un léger contour sombre leur rend du contraste, sans fond plein. */
.navbar-light .brand-logo,
.admin-topbar .brand-logo {
    filter: drop-shadow(0 0 1px rgba(1, 10, 53, .55)) drop-shadow(0 0 4px rgba(1, 10, 53, .35));
}

.admin-content {
    background: var(--tc-surface);
    min-height: 100vh;
    /* Élément flex : sans min-width: 0, un tableau large élargirait la page au lieu de
       défiler dans son .table-responsive. */
    min-width: 0;
}

.stat-card {
    padding: 1.4rem;
}

a.stat-card {
    cursor: pointer;
}

.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 1rem 2rem rgba(1, 10, 53, .08);
}

.stat-card-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin-bottom: .75rem;
}

.stat-card-icon.text-primary { background: linear-gradient(135deg, rgba(255, 128, 15, .2), rgba(255, 128, 15, .06)); }
.stat-card-icon.text-info { background: linear-gradient(135deg, rgba(0, 16, 100, .16), rgba(0, 16, 100, .04)); }
.stat-card-icon.text-success { background: linear-gradient(135deg, rgba(25, 135, 84, .2), rgba(25, 135, 84, .06)); }
.stat-card-icon.text-warning { background: linear-gradient(135deg, rgba(255, 193, 7, .3), rgba(255, 193, 7, .08)); }
.stat-card-icon.text-secondary { background: linear-gradient(135deg, rgba(105, 110, 119, .2), rgba(105, 110, 119, .06)); }

.stat-card-value {
    font-family: 'Plus Jakarta Sans', 'Cairo', system-ui, sans-serif;
    font-style: italic;
    font-weight: 800;
    font-size: 1.9rem;
    line-height: 1.15;
    color: var(--tc-dark);
}

.stat-card-label {
    font-size: .82rem;
    font-weight: 500;
    color: var(--tc-muted);
}

.stat-card .list-row {
    color: var(--tc-ink);
    border-radius: 6px;
    padding-left: .4rem;
    padding-right: .4rem;
    margin: 0 -.4rem;
}

.stat-card .list-row:last-child {
    border-bottom: 0 !important;
}

.stat-card .list-row:hover {
    background: var(--tc-surface);
}

/* ---------- Admin : tableaux ---------- */
.admin-content table.table thead th {
    text-transform: uppercase;
    font-size: .72rem;
    letter-spacing: .04em;
    color: var(--tc-muted);
    font-weight: 600;
    border-bottom-width: 1px;
    white-space: nowrap;
}

.admin-content table.table tbody td {
    vertical-align: middle;
    font-size: .92rem;
}

.admin-content table.table tbody tr:hover {
    background-color: var(--tc-surface);
}

.admin-content table.table-borderless th {
    font-weight: 600;
    color: var(--tc-muted);
    font-size: .82rem;
    padding-top: .55rem;
    padding-bottom: .55rem;
}

.admin-content table.table-borderless td {
    padding-top: .55rem;
    padding-bottom: .55rem;
    font-size: .92rem;
}

.admin-content .actions-cell {
    white-space: nowrap;
}

.admin-content table .form-control:focus {
    outline: 0;
    box-shadow: none;
}

/* ---------- Admin : factures ---------- */
.invoice-header h2 {
    word-break: break-word;
}

.invoice-totals {
    background: var(--tc-surface);
    border: 1px solid var(--tc-border);
    border-radius: 6px;
    padding: 1rem 1.25rem;
}

.invoice-totals .row-total {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .3rem 0;
    color: var(--tc-muted);
}

.invoice-totals .row-total.grand-total {
    border-top: 1px solid var(--tc-border);
    margin-top: .4rem;
    padding-top: .6rem;
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--tc-dark);
}

/* ---------- Admin : tableau de bord ---------- */
.dash {
    --ink: #0d1440;
    --ink-soft: #4a5275;
    --muted: #5f6680;
    --line: #e3e6f0;
    --surface: #ffffff;
    --canvas: #f3f5fa;
    --frost: #0a6fa8;
    --frost-tint: #e6f4fc;
    --warm: #c2410c;
    --warm-tint: #fdf0e6;
    --ok: #1f9d6b;
    --ok-tint: #e5f6ef;
    --danger: #c8384a;
    --danger-tint: #fbe9eb;
    color: var(--ink);
    max-width: 1280px;
    font-variant-numeric: tabular-nums;
}

.dash a { color: inherit; }

.dash a:focus-visible,
.dash button:focus-visible { outline: 2px solid var(--frost); outline-offset: 2px; border-radius: 6px; }

/* Les titres de l'admin sont en italique (.admin-content h1, h2) : pas ici. */
.dash h1, .dash h2 { font-family: inherit; font-style: normal; }

.dash-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.75rem; }
.dash-head h1 { font-size: 1.85rem; font-weight: 800; letter-spacing: -0.02em; margin: 0; line-height: 1.15; }
.dash-head p { margin: .35rem 0 0; color: var(--ink-soft); font-size: .95rem; }
.dash-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.dash-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .55rem .95rem; border-radius: 8px; font-size: .875rem; font-weight: 600; text-decoration: none; border: 1px solid var(--line); background: var(--surface); transition: border-color .15s, background .15s; }
.dash-btn:hover { border-color: var(--ink-soft); }
.dash-btn--primary { background: var(--ink); color: #fff !important; border-color: var(--ink); }
.dash-btn--primary:hover { background: #1c2766; }

/* « À traiter » : le bloc principal de la page. */
.dash-todo { background: var(--ink); color: #fff; border-radius: 14px; padding: 1.5rem 1.75rem; margin-bottom: 1.5rem; display: grid; grid-template-columns: minmax(180px, 1fr) 3fr; gap: 1.5rem; align-items: center; }
.dash-todo__intro h2 { font-size: 1.1rem; font-weight: 700; margin: 0 0 .3rem; color: #fff; }
.dash-todo__intro p { margin: 0; color: #b8bfe0; font-size: .875rem; }
.dash-todo__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.dash-todo__item { display: block; text-decoration: none; padding: 1rem 1.1rem; border-radius: 10px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); transition: background .15s; }
.dash-todo__item:hover { background: rgba(255, 255, 255, .12); }
.dash-todo__num { font-size: 2rem; font-weight: 800; line-height: 1; color: #fff; }
.dash-todo__label { display: block; margin-top: .4rem; font-size: .85rem; color: #c9cfec; }
.dash-todo__item.has-items { background: var(--warm); border-color: var(--warm); }
.dash-todo__item.has-items .dash-todo__label { color: #fff; }
.dash-todo__item.has-items:hover { background: #9a3412; }
.dash-todo--clear .dash-todo__intro p { color: #9fe3c4; }

.dash-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.dash-card__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 1.1rem 1.35rem .9rem; border-bottom: 1px solid var(--line); }
.dash-card__head h2 { font-size: 1rem; font-weight: 700; margin: 0; }
.dash-card__head a { font-size: .85rem; font-weight: 600; color: var(--frost); text-decoration: none; }
.dash-card__head a:hover { text-decoration: underline; }

/* Suivi des interventions : une colonne par étape, puis une barre de répartition. */
.dash-pipe { margin-bottom: 1.5rem; }
.dash-pipe__body { padding: 1.25rem 1.35rem 1.4rem; }
.dash-pipe__steps { display: grid; grid-template-columns: repeat(4, 1fr); }
.dash-pipe__step { position: relative; padding-right: 1rem; }
.dash-pipe__step + .dash-pipe__step { padding-left: 1rem; border-left: 1px solid var(--line); }
.dash-pipe__count { font-size: 1.6rem; font-weight: 800; line-height: 1.1; }
.dash-pipe__name { font-size: .85rem; color: var(--ink-soft); margin-top: .2rem; }
.dash-pipe__bar { display: flex; height: 8px; border-radius: 99px; overflow: hidden; background: var(--canvas); margin-top: 1.25rem; }
.dash-pipe__bar span { display: block; height: 100%; }
.dash-pipe__empty { color: var(--muted); font-size: .875rem; margin: 1rem 0 0; }
.c-new { background: #9aa3c7; } .t-new { color: #6b7499; }
.c-accepted { background: var(--frost); } .t-accepted { color: var(--frost); }
.c-progress { background: var(--warm); } .t-progress { color: var(--warm); }
.c-done { background: var(--ok); } .t-done { color: var(--ok); }

.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1.5rem; }
/* Sans min-width: 0, une carte de la grille s'élargit à la taille de son tableau et déborde. */
.dash-grid > * { min-width: 0; }
.dash-table-wrap { overflow-x: auto; }
.dash-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.dash-table td { padding: .8rem 1.35rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.dash-table tr:last-child td { border-bottom: 0; }
.dash-table tr:hover td { background: #fafbfe; }
.dash-table__name { font-weight: 600; text-decoration: none; }
.dash-table__name:hover { color: var(--frost); }
.dash-table__sub { display: block; color: var(--muted); font-size: .8rem; margin-top: .15rem; }
.dash-table__date { color: var(--ink-soft); white-space: nowrap; font-size: .85rem; }
.dash-table__status { text-align: right; white-space: nowrap; }
.dash-urgent { color: var(--danger); font-weight: 700; }
.dash-empty { padding: 2rem 1.35rem; margin: 0; color: var(--ink-soft); font-size: .9rem; }

.dash-pill { display: inline-block; padding: .22rem .6rem; border-radius: 99px; font-size: .75rem; font-weight: 700; background: var(--canvas); color: var(--ink-soft); }
.dash-pill.is-new { background: var(--warm-tint); color: #a34a0e; }
.dash-pill.is-waiting { background: var(--canvas); color: var(--ink-soft); }
.dash-pill.is-accepted { background: var(--frost-tint); color: #0b70a8; }
.dash-pill.is-progress { background: #fff6dc; color: #8a5a00; }
.dash-pill.is-done { background: var(--ok-tint); color: #187a53; }
.dash-pill.is-refused { background: var(--danger-tint); color: var(--danger); }

.dash-content { display: grid; grid-template-columns: repeat(4, 1fr); }
.dash-content__item { display: block; padding: 1.1rem 1.35rem; text-decoration: none; border-left: 1px solid var(--line); }
.dash-content__item:first-child { border-left: 0; }
.dash-content__item:hover { background: #fafbfe; }
.dash-content__num { font-size: 1.35rem; font-weight: 800; }
.dash-content__label { display: block; font-size: .85rem; color: var(--ink-soft); }

@media (max-width: 1100px) {
    .dash-todo { grid-template-columns: 1fr; }
    .dash-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
    .dash-todo__list { grid-template-columns: 1fr; }
    .dash-pipe__steps { grid-template-columns: 1fr 1fr; row-gap: 1rem; }
    .dash-pipe__step:nth-child(3) { border-left: 0; padding-left: 0; }
    .dash-content { grid-template-columns: 1fr 1fr; }
    .dash-content__item:nth-child(3) { border-left: 0; }
    .dash-content__item:nth-child(n+3) { border-top: 1px solid var(--line); }
    .dash-table td { padding: .75rem 1rem; }
    /* La date reste sur la fiche : sur téléphone, la ligne garde le nom et le statut. */
    .dash-table__date { display: none; }
    .dash-card__head { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
    .dash * { transition: none !important; }
}

/* ========================================================================
   Admin : habillage (même police et mêmes couleurs que le site public)
   ======================================================================== */
.admin-body {
    background: #f3f5fa;
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: var(--tc-ink);
}

.admin-body :is(h1, h2, h3, h4, h5, h6) {
    font-family: inherit;
    font-style: normal;
}

/* ---------- Barre latérale ---------- */
.admin-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    min-height: 0;
    width: 264px;
    flex-shrink: 0;
    padding: 1.25rem 1rem;
    overflow-y: auto;
    background:
        radial-gradient(80% 40% at 0% 0%, rgba(56, 189, 248, .14), transparent 70%),
        linear-gradient(180deg, #031447 0%, var(--tc-dark) 100%);
    color: #fff;
}

.offcanvas.admin-sidebar {
    position: fixed;
    height: 100%;
    width: 280px;
    padding: 0;
}

.admin-brand {
    display: block;
    padding: .25rem .5rem 1.25rem;
    margin-bottom: .5rem;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.admin-brand .brand-logo {
    height: 44px;
}

.admin-nav-label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(186, 230, 253, .55);
    padding: 1.1rem .75rem .4rem;
}

.admin-nav a,
.admin-account a {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .6rem .75rem;
    margin-bottom: 2px;
    border-radius: 10px;
    color: rgba(255, 255, 255, .72);
    font-size: .93rem;
    font-weight: 500;
    text-decoration: none;
    position: relative;
    transition: background-color var(--tc-dur-fast) ease, color var(--tc-dur-fast) ease;
}

.admin-nav a .bi,
.admin-account a .bi {
    font-size: 1.05rem;
    width: 1.25rem;
    text-align: center;
    transition: transform var(--tc-dur) var(--tc-ease);
}

.admin-nav a:hover,
.admin-account a:hover {
    background: rgba(255, 255, 255, .07);
    color: #fff;
}

.admin-nav a:hover .bi {
    transform: translateX(2px);
}

/* Page en cours : fond clair et trait orange à gauche. */
.admin-nav a.active {
    background: rgba(56, 189, 248, .14);
    color: #fff;
    font-weight: 600;
}

.admin-nav a.active::before {
    content: "";
    position: absolute;
    left: -1rem;
    top: 20%;
    bottom: 20%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--tc-primary);
}

.offcanvas .admin-nav a.active::before {
    left: -1rem;
}

.admin-nav a.active .bi {
    color: var(--tc-frost-bright);
}

.admin-account {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.admin-account__user {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .25rem .5rem .75rem;
    min-width: 0;
}

.admin-account__avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--tc-frost-bright), var(--tc-frost));
    color: #fff;
    font-weight: 700;
    font-size: .85rem;
}

.admin-account__name {
    min-width: 0;
}

.admin-account__name strong,
.admin-account__name small {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-account__name strong {
    font-size: .9rem;
}

.admin-account__name small {
    color: rgba(255, 255, 255, .5);
    font-size: .78rem;
}

/* ---------- Barre du haut (mobile) ---------- */
.admin-topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .6rem 1rem;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--tc-border);
}

.admin-topbar .brand-logo {
    height: 34px;
}

.admin-topbar__menu {
    font-size: 1.5rem;
    line-height: 1;
    padding: .25rem .5rem;
    border-radius: 10px;
}

.admin-topbar__menu:hover {
    background: var(--tc-frost-tint);
}

/* ---------- Contenu ---------- */
.admin-content {
    background: transparent;
}

.admin-page {
    padding: clamp(1rem, .5rem + 2vw, 2rem);
    max-width: 1320px;
}

/* Titre de page (les gabarits utilisent un h2.fw-bold en tête). */
.admin-page h2.fw-bold,
.admin-page .dash-head h1 {
    font-size: clamp(1.4rem, 1.2rem + .8vw, 1.85rem);
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--tc-dark);
}

.admin-content h1, .admin-content h2 {
    font-style: normal;
}

/* Cartes : blanches, coins arrondis, ombre légère. */
.admin-page .stat-card {
    border-radius: 16px;
    border-color: #e6e9f0;
    box-shadow: 0 1px 2px rgba(1, 10, 53, .04);
    padding: 1.5rem;
}

.admin-page .stat-card.p-0 {
    padding: 0;
    overflow: hidden;
}

.admin-page a.stat-card:hover,
.admin-page .stat-card:has(> .table-responsive):hover {
    transform: none;
}

.stat-card-value {
    font-family: inherit;
    font-style: normal;
}

/* ---------- Tableaux ---------- */
.admin-content table.table {
    --bs-table-bg: transparent;
}

.admin-content table.table thead th,
.admin-content .table-light th {
    background: #f8f9fc !important;
    color: #6b7194;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    padding: .85rem 1rem;
    border-bottom: 1px solid #e6e9f0;
}

.admin-content table.table tbody td {
    padding: .9rem 1rem;
    border-color: #eef0f5;
}

.admin-content table.table tbody tr {
    transition: background-color var(--tc-dur-fast) ease;
}

.admin-content table.table tbody tr:hover {
    background-color: #f8fafe;
}

.admin-content table.table tbody tr:last-child td {
    border-bottom: 0;
}

/* Boutons d'action des lignes : carrés discrets, colorés au survol. */
.admin-content td .btn-sm {
    width: 34px;
    height: 34px;
    padding: 0;
    display: inline-grid;
    place-items: center;
    border-radius: 9px !important;
    border-color: #e1e4ec;
    background: #fff;
    color: #4a5275;
}

/* Exception : « Confirmer » (statut d'un message) est un bouton texte, pas une icône : largeur
   selon le texte au lieu du carré de 34 px qui le tronquait. */
.admin-content td .btn-sm.status-confirm {
    width: auto;
    padding: 0 .8rem;
    white-space: nowrap;
    background: var(--tc-primary);
    border-color: var(--tc-primary);
    color: var(--tc-on-primary);
}

.admin-content td .btn-sm.btn-outline-primary:hover {
    background: var(--tc-frost-tint);
    border-color: var(--tc-frost);
    color: var(--tc-frost);
}

.admin-content td .btn-sm.btn-outline-danger:hover {
    background: #fbe9eb;
    border-color: #c8384a;
    color: #c8384a;
}

.admin-content td .btn-sm.btn-outline-success:hover {
    background: #e5f6ef;
    border-color: #1f9d6b;
    color: #1f9d6b;
}

/* Listes sur téléphone : chaque ligne devient une fiche, avec l'intitulé de colonne devant
   chaque valeur (posé en data-label par le script de admin/base.html.twig). Sans script, le
   tableau reste un tableau qui défile de côté. */
@media (max-width: 767.98px) {
    .admin-list-table thead {
        display: none;
    }

    .admin-list-table,
    .admin-list-table tbody,
    .admin-list-table tr,
    .admin-list-table td {
        display: block;
        width: 100%;
    }

    .admin-list-table tbody tr {
        padding: .9rem 1rem;
        border-bottom: 1px solid #eef0f5;
    }

    .admin-list-table tbody tr:last-child {
        border-bottom: 0;
    }

    .admin-content .admin-list-table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        padding: .3rem 0;
        border: 0;
        text-align: end;
    }

    .admin-list-table td[data-label]::before {
        content: attr(data-label);
        flex-shrink: 0;
        color: #8a90ab;
        font-size: .75rem;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        text-align: start;
    }

    /* Première colonne (client, nom…) : en titre de fiche, sans intitulé. */
    .admin-content .admin-list-table tbody td:first-child {
        display: block;
        text-align: start;
        padding-bottom: .5rem;
    }

    .admin-list-table td:first-child::before {
        display: none;
    }

    /* Colonne des actions (sans intitulé) : boutons alignés à droite, en bas de la fiche. */
    .admin-content .admin-list-table tbody td:not([data-label]):last-child {
        justify-content: flex-end;
        padding-top: .6rem;
    }
}
/* Actions d'une ligne de liste (voir, statut + « Confirmer », supprimer) : à la ligne plutôt
   que tronquées ou superposées quand la colonne est étroite. Flex sur un div et non sur le
   <td>, qui perdrait son comportement de cellule. */
.admin-row-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
}

/* ---------- Statuts : pastilles douces (même style que le tableau de bord) ---------- */
.admin-content .badge {
    font-weight: 700;
    font-size: .75rem;
    padding: .38em .75em;
    border-radius: 999px;
}

.admin-content .badge.bg-primary { background: #fdf0e6 !important; color: #b65410 !important; }
.admin-content .badge.bg-warning { background: #fff6dc !important; color: #8a5a00 !important; }
.admin-content .badge.bg-success { background: #e5f6ef !important; color: #187a53 !important; }
.admin-content .badge.bg-danger { background: #fbe9eb !important; color: #b42f40 !important; }
.admin-content .badge.bg-info { background: #e6f4fc !important; color: #0b6a9e !important; }
.admin-content .badge.bg-secondary { background: #eef0f5 !important; color: #4a5275 !important; }

/* ---------- Formulaires ---------- */
.admin-content .form-label {
    font-weight: 600;
    font-size: .88rem;
    color: #2b3152;
}

.admin-content .form-control,
.admin-content .form-select {
    border-radius: 10px;
    border-color: #d9dde7;
    padding-block: .6rem;
}

.admin-content .form-control:focus,
.admin-content .form-select:focus {
    border-color: var(--tc-frost);
    box-shadow: 0 0 0 .2rem rgba(10, 111, 168, .15);
}

.admin-content legend.col-form-label,
.admin-content legend.form-label {
    font-weight: 600;
    font-size: .88rem;
    color: #2b3152;
}

.admin-content .form-text {
    color: #8a90ab;
}

/* Onglets de langue (FR / EN / AR) en contrôle segmenté. */
.admin-content .nav-tabs {
    display: inline-flex;
    gap: .25rem;
    padding: .3rem;
    border: 0;
    border-radius: 12px;
    background: #f0f2f7;
}

.admin-content .nav-tabs .nav-link {
    border: 0;
    border-radius: 9px;
    padding: .45rem 1rem;
    font-weight: 600;
    font-size: .9rem;
    color: #4a5275;
    transition: background-color var(--tc-dur-fast) ease, color var(--tc-dur-fast) ease, box-shadow var(--tc-dur-fast) ease;
}

.admin-content .nav-tabs .nav-link:hover {
    color: var(--tc-dark);
}

.admin-content .nav-tabs .nav-link.active {
    background: #fff;
    color: var(--tc-dark);
    box-shadow: 0 1px 3px rgba(1, 10, 53, .12);
}

/* Bouton « Annuler » à côté d'« Enregistrer ». */
.admin-content .btn-link {
    color: #4a5275;
    text-decoration: none;
    font-weight: 600;
}

.admin-content .btn-link:hover {
    color: var(--tc-dark);
}

/* Boutons du tableau de bord alignés sur la police commune. */
.dash {
    font-family: inherit;
}

/* Tableau de bord : les tuiles « à traiter » se soulèvent au survol, comme les cartes du site. */
.dash-todo__item {
    transition: background-color .15s ease, transform var(--tc-dur) var(--tc-ease);
}

.dash-todo__item:hover {
    transform: translateY(-3px);
}

/* ---------- Messages flash ---------- */
.admin-flash {
    display: flex;
    align-items: center;
    gap: .6rem;
    border: 0;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(1, 10, 53, .08);
    animation: adminFlashIn var(--tc-dur-slow) var(--tc-ease) both;
}

@keyframes adminFlashIn {
    from { opacity: 0; translate: 0 -8px; }
    to { opacity: 1; translate: 0 0; }
}

/* ---------- Animations ---------- */
/* Le contenu apparaît en fondu à chaque changement de page ; les cartes se suivent. */
@media (prefers-reduced-motion: no-preference) {
    .admin-page > * {
        animation: adminIn .45s var(--tc-ease) both;
    }

    .admin-page > :nth-child(2) { animation-delay: .04s; }
    .admin-page > :nth-child(3) { animation-delay: .08s; }
    .admin-page > :nth-child(n+4) { animation-delay: .12s; }
}

@keyframes adminIn {
    from { opacity: 0; translate: 0 10px; }
    to { opacity: 1; translate: 0 0; }
}

/* ---------- Connexion ---------- */
.login-body {
    background: #f3f5fa;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}

.login-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
}

.login-visual {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2.5rem;
    color: #fff;
    background: var(--tc-dark);
}

.login-visual__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .45;
    animation: loginKenBurns 20s ease-out both;
}

@keyframes loginKenBurns {
    from { scale: 1.08; }
    to { scale: 1; }
}

.login-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(60% 50% at 20% 0%, rgba(56, 189, 248, .3), transparent 70%),
        linear-gradient(180deg, rgba(3, 20, 71, .35) 0%, rgba(1, 10, 53, .92) 100%);
}

.login-visual > :not(img) {
    position: relative;
    z-index: 1;
}

.login-visual .brand-logo {
    height: 64px;
}

.login-visual h1 {
    font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -.02em;
    max-width: 26rem;
    margin-bottom: .75rem;
}

.login-visual p {
    color: rgba(255, 255, 255, .72);
    max-width: 26rem;
    margin: 0;
}

.login-panel {
    display: grid;
    place-items: center;
    padding: 2rem 1.25rem;
}

.login-card {
    width: 100%;
    max-width: 400px;
    animation: adminIn .6s var(--tc-ease) .1s both;
}

.login-card h2 {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--tc-dark);
}

.login-card .form-label {
    font-weight: 600;
    font-size: .9rem;
}

.login-card .input-group-text {
    background: #fff;
    color: #8a90ab;
    border-radius: 10px 0 0 10px;
}

.login-card .form-control {
    padding-block: .7rem;
}

.login-card .form-control:focus {
    border-color: var(--tc-frost);
    box-shadow: 0 0 0 .2rem rgba(10, 111, 168, .15);
}

.login-card .btn-primary {
    padding-block: .8rem;
}

@media (max-width: 991.98px) {
    .login-shell {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }

    .login-visual {
        min-height: 200px;
        padding: 1.5rem;
    }

    .login-visual h1,
    .login-visual p {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .login-visual__photo,
    .login-card,
    .admin-flash {
        animation: none;
    }
}

/* ---------- Anti-spam : champ piège invisible (FormSpamGuard) ---------- */
/* Masqué sur place (rogné à 1 px) et non décalé hors écran : en arabe (RTL), un left négatif
   agrandirait la page vers la gauche. */
.hp-field {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0;
    pointer-events: none;
}

/* ---------- Contenu détaillé d'un service (filtre rich_text) ---------- */
.service-content h2 {
    font-size: 1.35rem;
    margin: 2rem 0 .75rem;
}

.service-content h3 {
    font-size: 1.1rem;
    margin: 1.5rem 0 .5rem;
}

.service-content p,
.service-content li {
    line-height: 1.7;
}

.service-content ul {
    padding-inline-start: 1.25rem;
    margin-bottom: 1rem;
}