/* ========================================
   EastFlow Global — Couche UI partagee
   Chargee par TOUTES les pages, apres style.css.

   Contient :
     1. les primitives de section reutilisees partout (.rt-*)
     2. la navbar en pilule flottante
     3. les heros sombres a degrade vert
     4. les boutons a pastille fleche
     5. les grilles de cartes generiques
   ======================================== */

/* ---------- Primitives partagees ---------- */

.rt-section {
    padding: 104px 0;
    position: relative;
}

.rt-section--tight { padding: 72px 0; }

.rt-section--dark {
    background: var(--primary);
    color: #fff;
}

.rt-section--soft { background: var(--bg-light); }

.rt-section--green {
    background: var(--accent-soft);
}

.rt-eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-text);
    margin-bottom: 18px;
}

.rt-section--dark .rt-eyebrow { color: var(--accent-on-dark); }

.rt-title {
    font-size: clamp(1.9rem, 3.6vw, 2.9rem);
    font-weight: 700;
    line-height: 1.14;
    letter-spacing: -0.025em;
    max-width: 20ch;
}

.rt-title--wide { max-width: 28ch; }
.rt-title--center { margin-inline: auto; text-align: center; }

.rt-lede {
    font-size: 1.13rem;
    line-height: 1.7;
    color: var(--text-medium);
    max-width: 62ch;
    margin-top: 20px;
}

.rt-section--dark .rt-lede { color: rgba(255, 255, 255, 0.72); }

.rt-head { margin-bottom: 56px; }
.rt-head--center { text-align: center; }
.rt-head--center .rt-lede { margin-inline: auto; }

/* Lien-CTA contextuel de fin de section */
.rt-next {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 40px;
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--accent-text);
    text-decoration: none;
    padding-bottom: 4px;
    border-bottom: 2px solid var(--accent-line);
    transition: gap var(--transition), border-color var(--transition);
}

.rt-next:hover { gap: 16px; border-bottom-color: var(--accent); }
.rt-next .rt-next__arrow { transition: transform var(--transition); }
.rt-next:hover .rt-next__arrow { transform: translateX(2px); }

.rt-section--dark .rt-next {
    color: var(--accent-on-dark);
    border-bottom-color: rgba(127, 178, 34, 0.4);
}
.rt-section--dark .rt-next:hover { border-bottom-color: var(--accent-on-dark); }

/* Reveal au scroll — la mecanique de progressive disclosure */
/* Duree calee sur la reference : My Sourcify anime ses entrees en 1.25s
   (Elementor fadeIn / zoomIn). A 0.7s avec 26px de glissement, l effet
   etait percu comme trop sec. On allonge et on reduit le deplacement :
   davantage un fondu qu un glissement. */
.rt-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 1.25s ease, transform 1.25s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: opacity, transform;
}

.rt-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .rt-reveal { opacity: 1; transform: none; transition: none; }
    .rt-loop__body { transition: none !important; }
}

/* .logo-img vit dans style.css : le logo image sert sur toutes les pages,
   pas seulement sur la Home. */


/* ========================================
   2 · NAVBAR EN PILULE FLOTTANTE
   Deux etats : transparente au-dessus d'un hero sombre,
   blanche des que la page defile (.scrolled, pose par script.js).
   ======================================== */

.navbar {
    background: transparent;
    backdrop-filter: none;
    border-bottom: 1px solid transparent;
}

.navbar.scrolled {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(14px);
    border-bottom-color: var(--border);
}

.nav-container { gap: 24px; }

/* Le logo bascule entre sa version sombre et sa version claire */
.logo-img--light { display: none; }

body.has-dark-hero .navbar:not(.scrolled) .logo-img--dark  { display: none; }
body.has-dark-hero .navbar:not(.scrolled) .logo-img--light { display: block; }

/* La pilule elle-meme */
.nav-menu {
    gap: 4px;
    padding: 7px 10px;
    border-radius: 100px;
    background: rgba(18, 22, 23, 0.05);
    border: 1px solid rgba(18, 22, 23, 0.07);
    margin: 0 auto;
}

body.has-dark-hero .navbar:not(.scrolled) .nav-menu {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(12px);
}

.nav-menu a {
    display: block;
    padding: 9px 18px;
    border-radius: 100px;
    font-size: 0.93rem;
    font-weight: 500;
    white-space: nowrap;
    transition: background var(--transition), color var(--transition);
}

.nav-menu a:hover {
    background: rgba(18, 22, 23, 0.07);
    color: var(--accent-text);
}

.nav-menu a.active {
    background: var(--accent-soft);
    color: var(--accent-text);
    font-weight: 600;
}

body.has-dark-hero .navbar:not(.scrolled) .nav-menu a { color: rgba(255, 255, 255, 0.86); }

body.has-dark-hero .navbar:not(.scrolled) .nav-menu a:hover,
body.has-dark-hero .navbar:not(.scrolled) .nav-menu a.active {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

/* Bloc de droite : langue + CTA + hamburger */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.nav-actions .lang-toggle { margin-left: 0; }

body.has-dark-hero .navbar:not(.scrolled) .lang-toggle {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.20);
    color: #fff;
}

body.has-dark-hero .navbar:not(.scrolled) .nav-toggle span { background: #fff; }


/* ========================================
   3 · BOUTON A PASTILLE FLECHE
   ======================================== */

.btn-arrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 7px 7px 7px 22px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 11px;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}

.btn-arrow__badge {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #fff;
    color: var(--primary);
    flex-shrink: 0;
    transition: transform var(--transition);
}

.btn-arrow:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(18, 22, 23, 0.26);
}

.btn-arrow:hover .btn-arrow__badge { transform: translate(2px, -2px); }

/* Variante verte, pour les CTA principaux dans le corps de page */
.btn-arrow--accent { background: var(--accent-text); }
.btn-arrow--accent .btn-arrow__badge { color: var(--accent-text); }
.btn-arrow--accent:hover { background: var(--accent-hover); box-shadow: 0 10px 26px rgba(93, 141, 3, 0.34); }

/* Variante claire, sur fond sombre */
.btn-arrow--light { background: #fff; color: var(--primary); }
.btn-arrow--light .btn-arrow__badge { background: var(--primary); color: #fff; }

.btn-arrow--lg { padding: 9px 9px 9px 28px; font-size: 1.03rem; }
.btn-arrow--lg .btn-arrow__badge { width: 40px; height: 40px; }

/* Sur fond sombre non defile, le CTA de la navbar doit ressortir */
body.has-dark-hero .navbar:not(.scrolled) .nav-actions .btn-arrow {
    background: rgba(18, 22, 23, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(12px);
}


/* ========================================
   4 · HERO SOMBRE A DEGRADE DIAGONAL
   La diagonale verte reprend la construction de la reference,
   en couleurs EastFlow plutot qu'en bleu.
   ======================================== */

.ui-hero {
    position: relative;
    background: var(--primary);
    color: #fff;
    overflow: hidden;
    padding: 168px 0 96px;
    isolation: isolate;
}

.ui-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(118deg, transparent 34%, rgba(93, 141, 3, 0.62) 63%, #6FA30B 100%);
    clip-path: polygon(46% 0, 100% 0, 100% 100%, 20% 100%);
}

.ui-hero--short { padding: 152px 0 72px; }

.ui-hero h1 {
    font-size: clamp(2.4rem, 5vw, 4.2rem);
    font-weight: 800;
    line-height: 1.03;
    letter-spacing: -0.038em;
    max-width: 15ch;
    text-wrap: balance;
}

.ui-hero__sub {
    font-size: 1.16rem;
    line-height: 1.66;
    color: rgba(255, 255, 255, 0.76);
    max-width: 54ch;
    margin-top: 24px;
}

.ui-hero__cta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 38px;
}

/* Fil d'Ariane des pages internes */
.ui-crumb {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 22px;
}

.ui-crumb a { color: rgba(255, 255, 255, 0.78); text-decoration: none; }
.ui-crumb a:hover { color: #fff; }


/* ========================================
   5 · GRILLES DE CARTES GENERIQUES
   ======================================== */

.ui-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.ui-grid--2 { grid-template-columns: repeat(2, 1fr); }
.ui-grid--3 { grid-template-columns: repeat(3, 1fr); }

.ui-card {
    padding: 32px 30px;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.ui-card:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
}

.ui-card__num {
    display: block;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--accent-text);
    margin-bottom: 15px;
}

.ui-card h3 {
    font-size: 1.24rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    margin-bottom: 10px;
}

.ui-card p {
    color: var(--text-medium);
    line-height: 1.66;
}

.ui-card__list {
    list-style: none;
    margin-top: 18px;
    display: grid;
    gap: 10px;
}

.ui-card__list li {
    position: relative;
    padding-left: 24px;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--text-medium);
}

.ui-card__list li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: var(--accent-text);
    font-weight: 700;
}

.rt-section--dark .ui-card {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.14);
    color: #fff;
}

.rt-section--dark .ui-card p { color: rgba(255, 255, 255, 0.66); }
.rt-section--dark .ui-card__num { color: var(--accent-on-dark); }
.rt-section--dark .ui-card:hover { border-color: var(--accent-on-dark); }


/* ========================================
   6 · BANDEAU CTA DE FIN DE PAGE
   Chaque page se termine par une etape suivante, jamais en cul-de-sac.
   ======================================== */

.ui-cta {
    padding: 92px 0;
    background: var(--primary);
    color: #fff;
    text-align: center;
}

.ui-cta h2 {
    font-size: clamp(1.8rem, 3.4vw, 2.7rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    max-width: 22ch;
    margin: 0 auto 18px;
    text-wrap: balance;
}

.ui-cta p {
    color: rgba(255, 255, 255, 0.7);
    max-width: 56ch;
    margin: 0 auto 34px;
    line-height: 1.65;
}

.ui-cta__row {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}


/* ========================================
   7 · RESPONSIVE
   ======================================== */

@media (max-width: 1100px) {
    .nav-menu a { padding: 9px 13px; font-size: 0.89rem; }
    .nav-container { gap: 14px; }
}

@media (max-width: 1024px) {
    /* La pilule redevient un panneau deroulant plein largeur */
    .nav-menu {
        margin: 0;
        padding: 24px;
        border-radius: 0;
        background: #fff;
        border: none;
        border-bottom: 1px solid var(--border);
    }

    body.has-dark-hero .navbar:not(.scrolled) .nav-menu {
        background: #fff;
        backdrop-filter: none;
        border-color: var(--border);
    }

    body.has-dark-hero .navbar:not(.scrolled) .nav-menu a { color: var(--text-dark); }

    .nav-menu a { padding: 6px 0; font-size: 1rem; }
    .nav-menu a:hover, .nav-menu a.active { background: none; }

    /* Le panneau mobile est blanc : il faut neutraliser la regle
       "fond sombre" du lien actif, plus specifique, sinon il s'affiche
       en blanc sur blanc et disparait. */
    body.has-dark-hero .navbar:not(.scrolled) .nav-menu a:hover,
    body.has-dark-hero .navbar:not(.scrolled) .nav-menu a.active {
        background: none;
        color: var(--accent-text);
    }

    .nav-menu a.active { color: var(--accent-text); font-weight: 650; }

    /* Le CTA rejoint le panneau : la barre reste lisible en mobile */
    .nav-actions .btn-arrow { display: none; }
}

@media (max-width: 980px) {
    .ui-hero { padding: 128px 0 72px; }
    .ui-hero::after { clip-path: polygon(0 62%, 100% 34%, 100% 100%, 0 100%); }
    .ui-grid--2, .ui-grid--3 { grid-template-columns: 1fr; }
    .ui-cta { padding: 72px 0; }
}

/* Le lien Contact du panneau mobile double le bouton a fleche,
   masque sous 1024px. Il ne doit donc apparaitre que la. */
.nav-menu__cta { display: none; }

@media (max-width: 1024px) {
    .nav-menu__cta { display: block; }
    .nav-menu__cta a { color: var(--accent-text); font-weight: 650; }
}

/* ========================================
   8 · HERO : composition media + cartes flottantes
   Les cartes portent des faits verifiables (langues de travail,
   conditions du premier echange). Ne JAMAIS y mettre de fausse
   interface produit : EastFlow n'a pas de plateforme de suivi.
   ======================================== */

.ui-hero__grid {
    display: grid;
    grid-template-columns: 1.06fr 0.94fr;
    gap: 56px;
    align-items: center;
}

.ui-hero__media {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    box-shadow: 0 34px 80px rgba(0, 0, 0, 0.42);
}

.ui-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ui-hero__stage { position: relative; }

/* Compact : a 222px de large le badge couvrait 44% de la photo.
   Il doit signaler, pas concurrencer l image. */
.ui-hero__float {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 13px 8px 9px;
    background: rgba(255, 255, 255, 0.96);
    color: var(--primary);
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
    font-size: 0.78rem;
    font-weight: 650;
    line-height: 1.28;
    backdrop-filter: blur(8px);
}

/* Composition en diagonale : bas-gauche et haut-droite.
   L'image du hero est cadree en 4/3 sur un original en 2.25:1, donc
   tres rognee lateralement. Dans ce cadrage, le visage de l'homme
   occupe le haut-gauche et celui de la femme le centre-droit : une
   carte posee en haut a gauche masque un visage. Les deux positions
   ci-dessous ne recouvrent que le sol et le plafond de l'entrepot.
   Toute modification doit etre reverifiee sur l'image reelle. */
/* Sur hero-branded, le carton logote occupe toute la moitie basse de
   l image : un badge pose la masque justement ce qui fait sa valeur.
   Le haut a gauche ne montre que la paroi du conteneur. */
.ui-hero__float--a { left: -16px;  top: 6%;    bottom: auto; }
/* La seconde carte se pose en bas a droite, pas en haut : sur
   hero-branded, le visage occupe le haut de l'image et le carton logote
   le centre. Le bas-droit est la seule zone que rien d'important n'occupe,
   et la diagonale evite que les deux cartes se lisent comme un bloc. */
.ui-hero__float--b { right: -22px; bottom: 8%; top: auto; }

.ui-hero__float small {
    display: block;
    font-weight: 500;
    font-size: 0.7rem;
    color: var(--text-medium);
    margin-top: 1px;
}

/* La carte tarifaire porte une etiquette plutot qu'une coche : la coche
   annonce un acquis, l'etiquette annonce un prix. */
.ui-hero__dot--tag {
    background: var(--accent-text);
    color: #fff;
}

.ui-hero__dot {
    width: 21px;
    height: 21px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent-text);
    flex-shrink: 0;
}

/* Bande de langues, version fond sombre */
.ui-langs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-top: 36px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.68);
}

.ui-langs__label { font-weight: 650; color: #fff; }
.ui-langs__sep { color: var(--accent-on-dark); font-weight: 700; }

.ui-scrollhint {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin-top: 28px;
    font-size: 0.94rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    transition: color var(--transition);
}

.ui-scrollhint:hover { color: #fff; }

.ui-scrollhint__chev {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.32);
    animation: ui-bob 2.1s ease-in-out infinite;
}

@keyframes ui-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(5px); }
}

@media (prefers-reduced-motion: reduce) {
    .ui-scrollhint__chev { animation: none; }
}

@media (max-width: 980px) {
    .ui-hero__grid { grid-template-columns: 1fr; gap: 44px; }
    .ui-hero__media { aspect-ratio: 16 / 10; }
    /* Il faut neutraliser explicitement le cote non utilise : sans cela,
       le `bottom` de la regle desktop et le `top` d'ici s'appliquent
       ensemble et etirent la carte sur toute la hauteur de l'image.
       On conserve la meme diagonale qu'en desktop pour ne pas masquer
       les visages, qui restent au centre du cadrage. */
    .ui-hero__float--a { left: 12px;  top: 14px;  bottom: auto; }
    .ui-hero__float--b { right: 12px; top: auto;   bottom: 14px; }
}

@media (max-width: 560px) {
    .ui-hero__float { display: none; }
}

/* ========================================
   9 · Anciennes en-tetes .page-hero (FAQ, Ressources, Contact)
   Alignees sur le traitement de .ui-hero : diagonale verte et
   hauteur suffisante pour passer sous la navbar flottante.
   ======================================== */

.page-hero {
    position: relative;
    padding: 152px 0 72px;
    overflow: hidden;
    isolation: isolate;
}

.page-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(118deg, transparent 34%, rgba(93, 141, 3, 0.62) 63%, #6FA30B 100%);
    clip-path: polygon(46% 0, 100% 0, 100% 100%, 20% 100%);
}

.page-hero h1 {
    font-size: clamp(2.4rem, 5vw, 4.2rem);
    line-height: 1.03;
    letter-spacing: -0.038em;
    max-width: 16ch;
    text-wrap: balance;
}

.page-hero p { max-width: 54ch; color: rgba(255, 255, 255, 0.76); }

.breadcrumb { color: rgba(255, 255, 255, 0.55); margin-bottom: 22px; }
.breadcrumb a { color: rgba(255, 255, 255, 0.78); }
.breadcrumb a:hover { color: #fff; }

@media (max-width: 980px) {
    .page-hero { padding: 128px 0 60px; }
    .page-hero::after { clip-path: polygon(0 62%, 100% 34%, 100% 100%, 0 100%); }
}

/* Sur les heros courts (pages internes), il n'y a pas de media a droite :
   la diagonale pleine intensite devient un aplat vert trop dominant.
   On la rend plus sourde et on la fait demarrer plus loin. */
.ui-hero--short::after,
.page-hero::after {
    background: linear-gradient(122deg, transparent 40%, rgba(93, 141, 3, 0.34) 68%, rgba(111, 163, 11, 0.62) 100%);
    clip-path: polygon(54% 0, 100% 0, 100% 100%, 30% 100%);
}

@media (max-width: 980px) {
    .ui-hero--short::after,
    .page-hero::after { clip-path: polygon(0 70%, 100% 44%, 100% 100%, 0 100%); }
}

/* Les contreparties ne doivent pas porter une coche verte :
   une limite affichee comme un benefice decredibilise la liste entiere. */
.ui-card__list li.is-con::before {
    content: "\2212";
    color: var(--text-light);
    font-weight: 700;
}

.rt-section--dark .ui-card__list li.is-con::before { color: rgba(255, 255, 255, 0.42); }

/* ========================================
   10 · Blocs promus depuis home.css
   Ces motifs servent desormais sur plusieurs pages
   (services, e-commerce, a-propos), plus seulement sur la Home.
   ======================================== */

/* ---------- 03 · LA CHAINE : sourcer > trouver un fournisseur ---------- */

.rt-chain {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 44px;
}

.rt-chain__node {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 15px 22px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 100px;
    font-size: 0.97rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.03);
    transition: border-color var(--transition), background var(--transition), color var(--transition);
}

.rt-chain__node:hover {
    border-color: var(--accent-on-dark);
    background: rgba(127, 178, 34, 0.10);
    color: #fff;
}

.rt-chain__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-on-dark);
    flex-shrink: 0;
}

.rt-chain__sep {
    align-self: center;
    color: rgba(255, 255, 255, 0.28);
    font-size: 0.9rem;
}

.rt-chain__punch {
    margin-top: 48px;
    padding-top: 34px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    font-size: clamp(1.4rem, 2.6vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.rt-chain__punch em {
    font-style: normal;
    color: var(--accent-on-dark);
}

/* ---------- 04 · LE VRAI COUT ---------- */

.rt-cost {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: start;
}

.rt-cost__list {
    list-style: none;
    display: grid;
    gap: 2px;
    background: var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
}

.rt-cost__list li {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 17px 22px;
    background: #fff;
    font-size: 0.99rem;
    color: var(--text-dark);
}

.rt-cost__mark {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #FBE9E7;
    color: #B3261E;
    font-size: 0.82rem;
    font-weight: 700;
}

.rt-cost__aside {
    position: sticky;
    top: 104px;
}

.rt-cost__quote {
    padding: 34px;
    background: var(--primary);
    color: #fff;
    border-radius: var(--radius);
    font-size: 1.28rem;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: -0.015em;
}

.rt-cost__quote strong { color: var(--accent-on-dark); }

/* ---------- 06 · PERIMETRE : inclus / en supplement ---------- */

.rt-scope {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    margin-top: 8px;
}

.rt-scope__col {
    padding: 36px 32px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: #fff;
}

.rt-scope__col--in {
    border-color: var(--accent-line);
    background: linear-gradient(180deg, var(--accent-soft) 0%, #fff 58%);
}

.rt-scope__label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    margin-bottom: 8px;
    color: var(--text-medium);
}

.rt-scope__col--in .rt-scope__label { color: var(--accent-text); }

.rt-scope__col h3 {
    font-size: 1.28rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    margin-bottom: 22px;
}

.rt-scope__col ul {
    list-style: none;
    display: grid;
    gap: 13px;
}

.rt-scope__col li {
    position: relative;
    padding-left: 30px;
    line-height: 1.55;
    color: var(--text-medium);
}

.rt-scope__col li::before {
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 700;
}

.rt-scope__col--in li::before  { content: "\2713"; color: var(--accent-text); }
.rt-scope__col--out li::before { content: "+";     color: var(--text-light); font-size: 1.15rem; line-height: 1.35; }

.rt-scope__note {
    margin-top: 28px;
    padding: 20px 24px;
    border-left: 3px solid var(--accent);
    background: var(--bg-light);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: 0.97rem;
    line-height: 1.6;
    color: var(--text-medium);
}

/* ---------- 07 · E-COMMERCE ---------- */

.rt-ecom__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}

.rt-ecom__pains {
    list-style: none;
    display: grid;
    gap: 14px;
}

.rt-ecom__pains li {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 18px 22px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    line-height: 1.55;
}

.rt-ecom__pains b {
    display: block;
    font-weight: 650;
    color: var(--text-dark);
    margin-bottom: 3px;
}

.rt-ecom__pains span:first-child {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent-text);
    font-size: 0.8rem;
    font-weight: 700;
}

.rt-ecom__pains p {
    font-size: 0.95rem;
    color: var(--text-medium);
    margin: 0;
}

.rt-ecom__media {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.rt-ecom__media img {
    width: 100%;
    height: 100%;
    max-height: 460px;
    object-fit: cover;
    display: block;
}

/* ---------- 11 · HUMAIN ---------- */

.rt-human__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 200px;
    gap: 14px;
    margin-top: 8px;
}

.rt-human__grid figure {
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--bg-light);
}

/* Rythme large / etroit alterne. Les cellules etendues (1, 4, 5)
   remplissent exactement trois rangees de trois colonnes. */
.rt-human__grid figure:nth-child(1),
.rt-human__grid figure:nth-child(4),
.rt-human__grid figure:nth-child(5) { grid-column: span 2; }

.rt-human__grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.7s var(--ease-out);
}

.rt-human__grid figure:hover img { transform: scale(1.045); }

.rt-human__claim {
    margin-top: 44px;
    font-size: clamp(1.25rem, 2.4vw, 1.72rem);
    font-weight: 650;
    letter-spacing: -0.02em;
    line-height: 1.4;
    max-width: 30ch;
}

.rt-human__claim em {
    font-style: normal;
    color: var(--accent-text);
}


/* Declinaisons responsives des blocs ci-dessus */
/* ---------- Responsive ---------- */

@media (max-width: 980px) {
    .rt-section { padding: 76px 0; }
    .rt-hero { padding: 116px 0 64px; }

    .rt-hero__grid,
    .rt-cost,
    .rt-ecom__grid,
    .rt-china,
    .rt-final__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .rt-final__or { display: flex; }
    .rt-hero__media { aspect-ratio: 16 / 10; }
    .rt-cost__aside { position: static; }
    .rt-loops { grid-template-columns: 1fr; }
    .rt-recap { grid-template-columns: repeat(2, 1fr); }
    .rt-pause { padding: 92px 0; }
}

@media (max-width: 620px) {
    .rt-scope,
    .rt-skills,
    .rt-recap {
        grid-template-columns: 1fr;
    }

    .rt-human__grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 150px;
    }

    .rt-human__grid figure:nth-child(1),
    .rt-human__grid figure:nth-child(4),
    .rt-human__grid figure:nth-child(5) { grid-column: span 2; }

    .rt-chain__sep { display: none; }
    .rt-quickform { padding: 26px 22px; }
}

/* ========================================
   11 · RESEAUX SOCIAUX (footer)
   Chaque pastille porte la couleur officielle de sa plateforme.
   Les liens restent inertes tant que data-social-pending est present
   (voir ui.js) : mieux vaut une icone qui ne fait rien qu'un lien
   qui renvoie le visiteur en haut de page.
   ======================================== */

.social {
    display: flex;
    align-items: center;
    gap: 12px;
    list-style: none;
    margin-top: 24px;
    padding: 0;
}

.social__link {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    color: #fff;
    text-decoration: none;
    transition: transform var(--transition), box-shadow var(--transition), filter var(--transition);
}

.social__link svg { width: 20px; height: 20px; fill: currentColor; display: block; }

.social__link:hover {
    transform: translateY(-3px);
    filter: saturate(1.15);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.42);
}

.social__link:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

.social__link--fb { background: #1877F2; }
.social__link--li { background: #0A66C2; }
.social__link--wa { background: #25D366; }

/* Degrade officiel Instagram, approxime en lineaire */
.social__link--ig {
    background: radial-gradient(circle at 30% 107%,
        #FDF497 0%, #FDF497 5%, #FD5949 45%, #D6249F 60%, #285AEB 90%);
}

/* Tant qu'aucune URL reelle n'est fournie */
.social__link[data-social-pending] { cursor: default; }
.social__link[data-social-pending]:hover { transform: none; box-shadow: none; }

@media (max-width: 600px) {
    .social { justify-content: flex-start; }
    .social__link { width: 38px; height: 38px; }
    .social__link svg { width: 18px; height: 18px; }
}

/* ========================================
   12 · BANDEAU DEFILANT DE PLATEFORMES
   Deux pistes identiques se suivent et la translation s'arrete
   exactement a -50% : la boucle est alors invisible.
   Le defilement se met en pause au survol et disparait
   completement si l'utilisateur a demande moins d'animations.
   ======================================== */

/* Le libelle ayant ete retire, la bande n avait plus rien au-dessus des
   noms et 52px de vide en dessous. On resserre et on centre. */
.ui-marquee {
    position: relative;
    padding: 18px 0;
    overflow: hidden;
    background: var(--primary);
}

.ui-marquee--onhero {
    margin-top: -8px;
}

.ui-marquee__label {
    text-align: center;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.42);
    margin-bottom: 30px;
}

.ui-marquee__viewport {
    position: relative;
    overflow: hidden;
    /* Les extremites s'estompent : le defilement parait continu
       au lieu d'etre coupe net par le bord de l'ecran. */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.ui-marquee__track {
    display: flex;
    width: max-content;
    animation: ui-marquee 46s linear infinite;
}

.ui-marquee__viewport:hover .ui-marquee__track { animation-play-state: paused; }

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

.ui-marquee__group {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.ui-plat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 210px;
    flex-shrink: 0;
    padding: 0 18px;
    color: rgba(255, 255, 255, 0.52);
    text-align: center;
    transition: color var(--transition);
}

.ui-marquee__viewport:hover .ui-plat { color: rgba(255, 255, 255, 0.38); }
.ui-plat:hover { color: rgba(255, 255, 255, 0.95); }

.ui-plat__cjk {
    font-size: 1.34rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.15;
}

.ui-plat__latin {
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    line-height: 1.2;
}

.ui-plat__num {
    font-size: 1.72rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
}

/* Vrais logos. Normalisation par la HAUTEUR : les fichiers viennent de
   sources differentes, avec des proportions et des couleurs incoherentes.
   Contraindre la largeur donnait des poids optiques tres inegaux
   (un logotype large finissait deux fois plus petit qu'un embleme carre).

   Rendu par defaut : silhouette blanche uniforme, quelle que soit la
   couleur d'origine du fichier. Au survol, le logo reprend ses couleurs. */
.ui-plat img {
    height: 34px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    opacity: 0.58;
    filter: grayscale(1) brightness(0) invert(1);
    transition: opacity var(--transition), filter var(--transition);
}

.ui-plat:hover img {
    opacity: 1;
    filter: none;
}

@media (max-width: 700px) {
    .ui-plat img { height: 28px; max-width: 130px; }
}

@media (prefers-reduced-motion: reduce) {
    .ui-marquee__track { animation: none; }
    .ui-marquee__viewport {
        overflow-x: auto;
        -webkit-mask-image: none;
                mask-image: none;
    }
    .ui-marquee__group + .ui-marquee__group { display: none; }
}

@media (max-width: 700px) {
    .ui-plat { width: 158px; padding: 0 12px; }
    .ui-plat__cjk { font-size: 1.14rem; }
    .ui-plat__num { font-size: 1.44rem; }
    .ui-marquee__track { animation-duration: 34s; }
}

/* Bandeau vente : noms latins uniquement, donc un seul niveau typographique */
.ui-plat__name {
    font-size: 1.28rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.2;
}

/* Sens inverse, pour distinguer les deux bandeaux d'un coup d'oeil */
.ui-marquee__track--alt { animation-direction: reverse; }

@media (max-width: 700px) {
    .ui-plat__name { font-size: 1.08rem; }
}

/* ========================================
   13 · VARIANTES DE HERO
   Chaque page recoit un traitement de fond distinct. Sans cela, neuf
   pages partageant la meme diagonale verte donnent l'impression de
   toujours consulter la meme page.
   Le squelette (.ui-hero) reste commun : seule la couche ::after change.
   ======================================== */

/* v2 — halo radial en bas a droite, sans arete franche */
.ui-hero--glow::after {
    background:
        radial-gradient(760px 620px at 88% 108%, rgba(111, 163, 11, 0.55), transparent 68%),
        radial-gradient(520px 420px at 62% -10%, rgba(93, 141, 3, 0.16), transparent 70%);
    clip-path: none;
}

/* v3 — le vert monte depuis le bord inferieur */
.ui-hero--rise::after {
    background: linear-gradient(to top, rgba(111, 163, 11, 0.58), rgba(93, 141, 3, 0.16) 42%, transparent 72%);
    clip-path: none;
}

/* v4 — trame de points + lueur d'angle */
.ui-hero--mesh::after {
    background:
        radial-gradient(620px 520px at 96% 8%, rgba(111, 163, 11, 0.40), transparent 66%),
        radial-gradient(rgba(255, 255, 255, 0.10) 1px, transparent 1px);
    background-size: auto, 22px 22px;
    clip-path: none;
}

/* v5 — diagonale inversee, depuis la gauche */
.ui-hero--mirror::after {
    background: linear-gradient(-118deg, transparent 38%, rgba(93, 141, 3, 0.40) 68%, rgba(111, 163, 11, 0.66) 100%);
    clip-path: polygon(0 0, 46% 0, 70% 100%, 0 100%);
}

/* v6 — photo de fond assombrie. L'image porte l'identite de la page ;
   le voile garantit que le texte blanc reste lisible dessus. */
.ui-hero--photo {
    background-color: var(--primary);
    background-size: cover;
    background-position: center 32%;
}

.ui-hero--photo::after {
    background: linear-gradient(96deg, rgba(18, 22, 23, 0.94) 26%, rgba(18, 22, 23, 0.74) 54%, rgba(60, 92, 6, 0.55) 100%);
    clip-path: none;
}

/* Memes variantes pour les anciennes en-tetes .page-hero */
.page-hero--glow::after   { background: radial-gradient(700px 560px at 88% 110%, rgba(111, 163, 11, 0.48), transparent 68%); clip-path: none; }
.page-hero--rise::after   { background: linear-gradient(to top, rgba(111, 163, 11, 0.48), transparent 70%); clip-path: none; }
.page-hero--mirror::after { background: linear-gradient(-118deg, transparent 40%, rgba(93, 141, 3, 0.34) 70%, rgba(111, 163, 11, 0.56) 100%); clip-path: polygon(0 0, 44% 0, 68% 100%, 0 100%); }


/* ========================================
   14 · VARIANTES D'ANIMATION D'APPARITION
   Pose sur <body data-anim="..."> : la mecanique JS ne change pas,
   seule la transformation de depart differe d'une page a l'autre.
   ======================================== */

body[data-anim="left"]  .rt-reveal { transform: translateX(-22px); }
body[data-anim="right"] .rt-reveal { transform: translateX(22px); }
body[data-anim="scale"] .rt-reveal { transform: scale(0.97); }
body[data-anim="rise"]  .rt-reveal { transform: translateY(30px); }

body[data-anim] .rt-reveal.is-in { transform: none; }

@media (prefers-reduced-motion: reduce) {
    body[data-anim] .rt-reveal { transform: none; }
}


/* ========================================
   15 · BANDE PHOTO PLEINE LARGEUR
   Sert a repartir les visuels sur les pages internes plutot que de
   tout concentrer sur la Home.
   ======================================== */

.ui-band {
    position: relative;
    overflow: hidden;
}

.ui-band__media {
    position: relative;
    height: clamp(220px, 34vw, 380px);
    overflow: hidden;
}

.ui-band__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Le voile evite que la bande ne devienne un aplat clair au milieu
   d'une page a dominante sombre, et permet d'y poser du texte. */
.ui-band__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(18, 22, 23, 0.14), rgba(18, 22, 23, 0.52));
}

.ui-band__caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 32px 0;
    color: #fff;
    z-index: 1;
}

.ui-band__caption p {
    font-size: clamp(1.1rem, 2.1vw, 1.55rem);
    font-weight: 650;
    letter-spacing: -0.02em;
    line-height: 1.35;
    max-width: 30ch;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}

.ui-band__caption em { font-style: normal; color: var(--accent-on-dark); }

/* Bande en deux colonnes : photo + texte cote a cote */
.ui-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 56px;
}

.ui-split--flip .ui-split__media { order: -1; }

.ui-split__media {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    aspect-ratio: 3 / 2;
}

.ui-split__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 900px) {
    .ui-split { grid-template-columns: 1fr; gap: 34px; }
    .ui-split--flip .ui-split__media { order: 0; }
}

/* Le teaser e-commerce de la Home n'a plus de visuel (il est reserve a
   la page E-commerce) : la grille repasse sur une seule colonne. */
.rt-ecom__grid--solo { grid-template-columns: 1fr; }
.rt-ecom__grid--solo .rt-ecom__pains { max-width: 760px; }

/* Ligne de reassurance sous le bouton du hero.
   Remplace les cartes flottantes sur la Home : la photo y est cadree
   plein sujet, avec le carton logote en bas, et toute carte posee
   dessus masquait justement ce qui fait l'interet de l'image. */
.ui-reassure {
    /* flex de niveau bloc + largeur ajustee au contenu : sans cela la
       ligne se colle a l'invitation a defiler, qui est aussi en
       inline-flex, et les deux se retrouvent cote a cote. */
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 9px;
    margin-top: 22px;
    font-size: 0.94rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.82);
}

.ui-reassure__tick {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(127, 178, 34, 0.20);
    color: var(--accent-on-dark);
    flex-shrink: 0;
}

.ui-reassure__sep { color: var(--accent-on-dark); }

/* La photo du hero est en 2.19:1 : un cadre en 4/3 la rognait de 39%.
   Le 16/10 conserve l'essentiel du sujet et le carton logote. */
.ui-hero__media { aspect-ratio: 16 / 10; }

/* ========================================
   16 · TABLEAU COMPARATIF
   Pour opposer plusieurs options sur les memes criteres. Une grille de
   cartes juxtapose des blocs ; un tableau permet de LIRE EN LIGNE, ce
   qui est le seul moyen de comparer reellement.
   ======================================== */

.ui-compare {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.97rem;
}

.ui-compare th,
.ui-compare td {
    padding: 18px 20px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}

.ui-compare thead th {
    font-size: 1.08rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--primary);
    border-bottom: 2px solid var(--primary);
    padding-bottom: 14px;
}

.ui-compare thead th:first-child {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--text-light);
}

.ui-compare tbody th {
    font-weight: 600;
    color: var(--text-dark);
    width: 22%;
}

.ui-compare td { color: var(--text-medium); line-height: 1.55; }

/* Colonne mise en avant : celle qu'on recommande le plus souvent */
.ui-compare .is-featured {
    background: var(--accent-soft);
}

.ui-compare thead .is-featured {
    border-bottom-color: var(--accent);
    color: var(--accent-text);
}

.ui-compare__tag {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-text);
    margin-top: 4px;
}

.ui-compare tbody tr:last-child th,
.ui-compare tbody tr:last-child td { border-bottom: none; }

.ui-compare__wrap { overflow-x: auto; }

@media (max-width: 780px) {
    .ui-compare { min-width: 620px; }
}


/* ========================================
   17 · GRILLE COMPACTE
   Beaucoup d'entrees courtes, sans description longue. Une carte par
   entree gaspillerait la page et donnerait le meme rythme visuel que
   partout ailleurs.
   ======================================== */

.ui-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0;
    /* Les separateurs sont portes par les tuiles, pas par un fond visible
       a travers les gouttieres : le nombre d'entrees ne divise pas toujours
       le nombre de colonnes, et une cellule vide se voyait alors comme un
       rectangle gris. Sans tuile, il n'y a plus de trait du tout. */
    border-top: 1px solid var(--border);
    border-left: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.ui-tile {
    background: var(--bg-white);
    padding: 26px 24px;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    transition: background var(--transition);
}

.ui-tile:hover { background: var(--accent-soft); }

.ui-tile h3 {
    font-size: 1.02rem;
    font-weight: 650;
    letter-spacing: -0.01em;
    margin-bottom: 6px;
}

.ui-tile p {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-medium);
}


/* ========================================
   18 · DECLARATIONS NUMEROTEES
   Trois affirmations fortes, portees par la typographie plutot que par
   des cartes. Donne a la page un rythme editorial, pas catalogue.
   ======================================== */

.ui-claims { display: grid; gap: 0; }

.ui-claim {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 28px;
    padding: 44px 0;
    border-top: 1px solid var(--border);
    align-items: start;
}

.ui-claim:last-child { border-bottom: 1px solid var(--border); }

.ui-claim__num {
    font-size: 3.1rem;
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -0.04em;
    color: var(--accent-line);
    font-variant-numeric: tabular-nums;
}

.ui-claim__body h3 {
    font-size: clamp(1.3rem, 2.4vw, 1.85rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.22;
    margin-bottom: 12px;
    max-width: 24ch;
}

.ui-claim__body p {
    color: var(--text-medium);
    line-height: 1.72;
    max-width: 62ch;
}

.rt-section--dark .ui-claim { border-color: rgba(255, 255, 255, 0.14); }
.rt-section--dark .ui-claim__num { color: rgba(127, 178, 34, 0.42); }
.rt-section--dark .ui-claim__body p { color: rgba(255, 255, 255, 0.68); }

@media (max-width: 700px) {
    .ui-claim { grid-template-columns: 1fr; gap: 10px; padding: 32px 0; }
    .ui-claim__num { font-size: 2.2rem; }
}


/* ========================================
   19 · VARIANTES DE MISE EN PAGE DU HERO
   Le fond ne suffisait pas : toutes les pages internes ouvraient sur le
   meme bloc titre-a-gauche. On change la COMPOSITION, pas la couleur.
   ======================================== */

/* Titre centre, chapeau centre */
.ui-hero--center { text-align: center; }
.ui-hero--center h1 { max-width: 20ch; margin-inline: auto; }
.ui-hero--center .ui-hero__sub { margin-inline: auto; }
.ui-hero--center .ui-crumb { justify-content: center; }
.ui-hero--center .ui-hero__cta { justify-content: center; }

/* Titre a gauche, chapeau a droite : lecture en deux temps */
.ui-hero--duo .ui-hero__inner {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 56px;
    align-items: end;
}

.ui-hero--duo h1 { max-width: 18ch; }

.ui-hero--duo .ui-hero__sub {
    margin-top: 0;
    padding-bottom: 8px;
    border-left: 2px solid var(--accent-on-dark);
    padding-left: 22px;
}

@media (max-width: 900px) {
    .ui-hero--duo .ui-hero__inner { grid-template-columns: 1fr; gap: 28px; align-items: start; }
    .ui-hero--duo .ui-hero__sub { border-left: none; padding-left: 0; }
}

/* ========================================
   20 · ACCORDEON DE PROCESSUS
   Promu depuis home.css : la Home et la page Services l'utilisent
   toutes deux. Tant qu'il vivait dans home.css, l'accordeon de
   Services s'affichait sans style, tous panneaux ouverts.
   ======================================== */

/* ---------- 09 · PROCESS PROGRESSIF ---------- */

.rt-steps {
    display: grid;
    gap: 0;
    border-top: 1px solid var(--border);
}

.rt-step {
    border-bottom: 1px solid var(--border);
}

.rt-step__btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 26px;
    padding: 30px 8px;
    background: none;
    border: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: padding-left var(--transition);
}

.rt-step__btn:hover { padding-left: 18px; }

.rt-step__btn:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: -3px;
}

.rt-step__num {
    flex-shrink: 0;
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--text-light);
    transition: color var(--transition);
    font-variant-numeric: tabular-nums;
}

.rt-step[data-open="true"] .rt-step__num { color: var(--accent-text); }

.rt-step__label {
    flex: 1;
    font-size: clamp(1.1rem, 2vw, 1.45rem);
    font-weight: 650;
    letter-spacing: -0.02em;
}

.rt-step__sign {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    color: var(--accent-text);
    transition: transform var(--transition), border-color var(--transition), background var(--transition);
}

.rt-step[data-open="true"] .rt-step__sign {
    transform: rotate(45deg);
    border-color: var(--accent);
    background: var(--accent-soft);
}

.rt-step__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.42s var(--ease-out);
}

.rt-step[data-open="true"] .rt-step__panel { grid-template-rows: 1fr; }

.rt-step__panelInner { overflow: hidden; }

.rt-step__panel p {
    max-width: 66ch;
    padding: 0 8px 32px 60px;
    color: var(--text-medium);
    line-height: 1.72;
}

@media (max-width: 640px) {
    .rt-step__panel p { padding-left: 8px; }
}


/* ========================================
   21 · PARCOURS NUMEROTE
   Cinq etapes simples, sans interaction. Un accordeon obligerait a
   cliquer cinq fois pour comprendre un processus dont l'interet est
   justement d'etre lisible d'un coup d'oeil.
   Horizontal en desktop, vertical en mobile.
   ======================================== */

.ui-flow {
    display: grid;
    /* le nombre d etapes varie d une page a l autre */
    grid-template-columns: repeat(var(--flow-cols, 5), 1fr);
    gap: 0;
    counter-reset: flow;
}

/* Au-dela de cinq colonnes, la place par etape se reduit : on resserre
   la typographie plutot que de laisser le texte deborder. */
.ui-flow[style*="--flow-cols: 7"] .ui-flow__step { padding-right: 14px; }
.ui-flow[style*="--flow-cols: 7"] .ui-flow__step h3 { font-size: 0.95rem; max-width: 14ch; }
.ui-flow[style*="--flow-cols: 7"] .ui-flow__step p { font-size: 0.86rem; max-width: 18ch; }
.ui-flow[style*="--flow-cols: 7"] .ui-flow__num { width: 38px; height: 38px; font-size: 0.84rem; }
.ui-flow[style*="--flow-cols: 7"] .ui-flow__step::before { top: 18px; left: 38px; }

.ui-flow__step {
    position: relative;
    padding: 0 22px 0 0;
}

/* Le fil conducteur relie les pastilles, sans depasser aux extremites */
.ui-flow__step::before {
    content: "";
    position: absolute;
    top: 21px;
    left: 44px;
    right: -2px;
    height: 2px;
    background: var(--accent-line);
}

.ui-flow__step:last-child::before { display: none; }

.ui-flow__num {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--accent-text);
    color: #fff;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    margin-bottom: 22px;
}

.ui-flow__step h3 {
    font-size: 1.03rem;
    font-weight: 650;
    letter-spacing: -0.015em;
    line-height: 1.3;
    margin-bottom: 8px;
    max-width: 18ch;
}

.ui-flow__step p {
    font-size: 0.93rem;
    line-height: 1.6;
    color: var(--text-medium);
    max-width: 22ch;
}

@media (max-width: 1000px) {
    .ui-flow { grid-template-columns: 1fr; gap: 0; }

    .ui-flow__step {
        display: grid;
        grid-template-columns: 44px 1fr;
        column-gap: 22px;
        padding: 0 0 34px 0;
    }

    /* Le fil devient vertical */
    .ui-flow__step::before {
        top: 52px;
        bottom: -8px;
        left: 21px;
        right: auto;
        width: 2px;
        height: auto;
    }

    .ui-flow__num { margin-bottom: 0; }
    .ui-flow__step h3,
    .ui-flow__step p { max-width: 46ch; }
    .ui-flow__step h3 { margin-top: 10px; }
    .ui-flow__step p { grid-column: 2; }
}


/* ========================================
   22 · BLOC "AUJOURD'HUI / ENSUITE"
   Distingue visuellement ce qui est disponible maintenant de ce qui
   viendra. Sans cette separation, une page de vente laisse croire que
   tout est deja inclus.
   ======================================== */

.ui-stage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    margin-top: 8px;
}

.ui-stage__col {
    padding: 34px 32px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
}

.ui-stage__col--now {
    background: var(--accent-soft);
    border-color: var(--accent-line);
}

.ui-stage__label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 14px;
    color: var(--text-light);
}

.ui-stage__col--now .ui-stage__label { color: var(--accent-text); }

.ui-stage__col h3 {
    font-size: 1.22rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    margin-bottom: 12px;
}

.ui-stage__col p {
    color: var(--text-medium);
    line-height: 1.68;
}

@media (max-width: 820px) {
    .ui-stage { grid-template-columns: 1fr; }
}

/* Pastille d'icone en tete de carte */
.ui-card__icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: var(--accent-soft);
    color: var(--accent-text);
    margin-bottom: 18px;
}

/* Respiration resserree : a 104px de padding, huit sections faisaient
   onze ecrans de defilement. L'objectif est desormais la lecture rapide. */
.rt-section { padding: 82px 0; }
.rt-section--tight { padding: 54px 0; }
.ui-cta { padding: 76px 0; }
.rt-head { margin-bottom: 44px; }

/* ========================================
   23 · CLUSTERS INDUSTRIELS
   Promu depuis home.css : le bloc a ete deplace de la Home vers
   A propos, ou il illustre la conviction 'profondeur avant etendue'.
   Sans cette promotion, l'echine verticale et les pastilles
   disparaissaient.
   ======================================== */

/* ---------- 08 · CLUSTERS CHINE ---------- */

.rt-china {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 64px;
    align-items: start;
}

/* Echine cotiere schematique : nord en haut, sud en bas.
   Ce n'est pas une carte : aucune pretention geographique. */
.rt-coast {
    position: relative;
    display: grid;
    gap: 4px;
    padding-left: 34px;
}

.rt-coast::before {
    content: "";
    position: absolute;
    left: 9px;
    top: 14px;
    bottom: 14px;
    width: 2px;
    background: linear-gradient(to bottom, transparent, var(--accent-on-dark) 12%, var(--accent-on-dark) 88%, transparent);
    opacity: 0.5;
}

.rt-cluster {
    position: relative;
    padding: 20px 24px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    transition: background var(--transition), border-color var(--transition);
}

.rt-cluster:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(127, 178, 34, 0.35);
}

.rt-cluster::before {
    content: "";
    position: absolute;
    left: -30px;
    top: 27px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--primary);
    border: 2px solid var(--accent-on-dark);
}

.rt-cluster h3 {
    font-size: 1.08rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 5px;
}

.rt-cluster p {
    font-size: 0.94rem;
    color: rgba(255, 255, 255, 0.62);
    line-height: 1.55;
}

.rt-china__claim {
    font-size: clamp(1.5rem, 2.9vw, 2.15rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.2;
}

.rt-china__claim em {
    font-style: normal;
    color: var(--accent-on-dark);
}


/* Perimetre sur une seule colonne : les deux colonnes inclus/supplement
   ont fusionne, le detail de facturation passant en note. */
.rt-scope--solo { grid-template-columns: 1fr; max-width: 780px; margin-inline: auto; }
.rt-scope--solo .rt-scope__col--in ul { columns: 2; column-gap: 40px; }
.rt-scope--solo .rt-scope__col--in li { break-inside: avoid; }

@media (max-width: 640px) {
    .rt-scope--solo .rt-scope__col--in ul { columns: 1; }
}

/* Prestations cles sous le bouton du hero */
.ui-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin-top: 24px;
}

.ui-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.86);
    white-space: nowrap;
}

.ui-pill__tick {
    display: grid;
    place-items: center;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: rgba(127, 178, 34, 0.22);
    color: var(--accent-on-dark);
    flex-shrink: 0;
}

@media (max-width: 560px) {
    .ui-pills { gap: 8px 14px; }
    .ui-pill { font-size: 0.84rem; }
}

/* Icone de famille dans les tuiles Produits.
   Ce sont des pictogrammes dessines, pas des photographies : il n existe
   pas de visuel par famille de produits dans la bibliotheque du site. */
.ui-tile__icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--accent-soft);
    color: var(--accent-text);
    margin-bottom: 14px;
}

/* La derniere tuile est un appel a l action */
.ui-tile--cta {
    display: block;
    text-decoration: none;
    color: inherit;
    background: var(--accent-soft);
}

.ui-tile--cta .ui-tile__icon { background: #fff; }
.ui-tile--cta h3 { color: var(--accent-text); }
.ui-tile--cta:hover { background: #fff; }

/* ========================================
   24 · ANIMATION DES BOUTONS A PASTILLE
   Le client veut une animation sur les icones de contact, "parler a un
   expert" et WhatsApp, sur toutes les pages.
   La fleche part en diagonale et une seconde la remplace : le geste
   suggere l ouverture d une conversation plutot qu un simple survol.
   ======================================== */

.btn-arrow__badge {
    position: relative;
    overflow: hidden;
}

.btn-arrow__badge svg {
    transition: transform 0.34s var(--ease-out), opacity 0.22s ease;
}

/* La fleche sortante */
.btn-arrow:hover .btn-arrow__badge svg,
.btn-arrow:focus-visible .btn-arrow__badge svg {
    transform: translate(120%, -120%);
    opacity: 0;
}

/* Celle qui la remplace, entrant par le bas a gauche */
.btn-arrow__badge::after {
    content: "";
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 15px 15px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23121617' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M17 7H8M17 7v9'/%3E%3C/svg%3E");
    transform: translate(-120%, 120%);
    opacity: 0;
    transition: transform 0.34s var(--ease-out) 0.06s, opacity 0.22s ease 0.06s;
}

.btn-arrow:hover .btn-arrow__badge::after,
.btn-arrow:focus-visible .btn-arrow__badge::after {
    transform: none;
    opacity: 1;
}

/* La pastille des variantes vertes et sombres a une fleche claire */
.btn-arrow--accent .btn-arrow__badge::after,
.btn-arrow--light .btn-arrow__badge::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%234A7002' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M17 7H8M17 7v9'/%3E%3C/svg%3E");
}

.btn-arrow--light .btn-arrow__badge::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M17 7H8M17 7v9'/%3E%3C/svg%3E");
}

/* Le bouton flottant WhatsApp : pulsation discrete, arretee au survol */
.whatsapp-float::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid #25D366;
    animation: wa-pulse 2.6s ease-out infinite;
    pointer-events: none;
}

.whatsapp-float:hover::after { animation-play-state: paused; }

@keyframes wa-pulse {
    0%   { transform: scale(1);    opacity: 0.55; }
    70%  { transform: scale(1.45); opacity: 0; }
    100% { transform: scale(1.45); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .btn-arrow__badge svg,
    .btn-arrow__badge::after { transition: none; }
    .whatsapp-float::after { animation: none; }
}


/* ========================================
   25 · THEME CLAIR
   Les surfaces autrefois noires passent en vert pale (#EAEFE0).
   Ce n est pas un echange de variable : le texte pose dessus etait
   blanc. Ce bloc traite ensemble les surfaces, la couleur du texte
   et le vert eclairci, qui n existait que pour le fond sombre.
   Il doit rester en fin de feuille : il surcharge les regles
   precedentes.
   ======================================== */

body:not(.theme-sombre) {
    /* Teinte de surface retenue : vert pale derive du vert du logo. */
    --surface: #EAEFE0;
    --surface-line: rgba(18, 22, 23, 0.10);
    --surface-soft: rgba(18, 22, 23, 0.04);
}/* ---------- 1. Les surfaces ---------- */

body:not(.theme-sombre) .ui-hero,
body:not(.theme-sombre) .page-hero,
body:not(.theme-sombre) .rt-section--dark,
body:not(.theme-sombre) .ui-cta,
body:not(.theme-sombre) .footer,
body:not(.theme-sombre) .ui-marquee,
body:not(.theme-sombre) .counters-section,
body:not(.theme-sombre) .cta-section {
    background: var(--surface);
    color: var(--text-dark);
}/* Le degrade diagonal reste le marqueur visuel de la marque : sur fond
   clair il faut le remonter franchement, sinon il ne se lit plus.
   Le vert monte jusqu a 55% d opacite du cote droit. */
body:not(.theme-sombre) .ui-hero::after,
body:not(.theme-sombre) .page-hero::after {
    background: linear-gradient(118deg, transparent 30%, rgba(93, 141, 3, 0.24) 58%, rgba(93, 141, 3, 0.55) 100%);
}body:not(.theme-sombre) .ui-hero--glow::after { background: radial-gradient(820px 660px at 88% 108%, rgba(93, 141, 3, 0.50), transparent 66%), radial-gradient(520px 420px at 62% -10%, rgba(93, 141, 3, 0.14), transparent 70%); }body:not(.theme-sombre) .ui-hero--rise::after { background: linear-gradient(to top, rgba(93, 141, 3, 0.48), rgba(93, 141, 3, 0.14) 42%, transparent 74%); }body:not(.theme-sombre) .ui-hero--mesh::after { background: radial-gradient(660px 560px at 96% 8%, rgba(93, 141, 3, 0.44), transparent 64%), radial-gradient(rgba(18, 22, 23, 0.08) 1px, transparent 1px); }body:not(.theme-sombre) .ui-hero--mirror::after { background: linear-gradient(-118deg, transparent 34%, rgba(93, 141, 3, 0.24) 62%, rgba(93, 141, 3, 0.52) 100%); }/* Les sections sombres devenues claires recoivent elles aussi une
   nuance, pour ne pas retomber sur un aplat uniforme. */
body:not(.theme-sombre) .rt-section--dark,
body:not(.theme-sombre) .ui-cta {
    background: linear-gradient(150deg, var(--surface) 42%, rgba(93, 141, 3, 0.20) 100%);
}body:not(.theme-sombre) .footer {
    background: linear-gradient(200deg, var(--surface) 55%, rgba(93, 141, 3, 0.16) 100%);
}/* Le hero photo garde un voile, mais clair */
body:not(.theme-sombre) .ui-hero--photo::after {
    background: linear-gradient(96deg, rgba(234, 239, 224, 0.95) 26%, rgba(234, 239, 224, 0.80) 54%, rgba(93, 141, 3, 0.28) 100%);
}/* ---------- 2. Le texte ---------- */

body:not(.theme-sombre) .ui-hero h1,
body:not(.theme-sombre) .page-hero h1,
body:not(.theme-sombre) .rt-section--dark .rt-title,
body:not(.theme-sombre) .ui-cta h2,
body:not(.theme-sombre) .rt-recap__punch,
body:not(.theme-sombre) .rt-chain__punch,
body:not(.theme-sombre) .ui-hero--photo h1 { color: var(--primary); }body:not(.theme-sombre) .ui-hero__sub,
body:not(.theme-sombre) .page-hero p,
body:not(.theme-sombre) .rt-section--dark .rt-lede,
body:not(.theme-sombre) .ui-cta p,
body:not(.theme-sombre) .ui-hero--photo .ui-hero__sub { color: var(--text-medium); }body:not(.theme-sombre) .ui-crumb,
body:not(.theme-sombre) .breadcrumb { color: var(--text-light); }body:not(.theme-sombre) .ui-crumb a,
body:not(.theme-sombre) .breadcrumb a { color: var(--text-medium); }body:not(.theme-sombre) .ui-crumb a:hover,
body:not(.theme-sombre) .breadcrumb a:hover { color: var(--primary); }body:not(.theme-sombre) .ui-langs,
body:not(.theme-sombre) .ui-pill { color: var(--text-medium); }body:not(.theme-sombre) .ui-langs__label { color: var(--primary); }body:not(.theme-sombre) .ui-scrollhint { color: var(--text-medium); }body:not(.theme-sombre) .ui-scrollhint:hover { color: var(--primary); }body:not(.theme-sombre) .ui-scrollhint__chev { border-color: var(--accent-line); }/* Le vert eclairci n existe que pour le fond sombre */
body:not(.theme-sombre) .rt-section--dark .rt-eyebrow,
body:not(.theme-sombre) .ui-hero .rt-eyebrow,
body:not(.theme-sombre) .page-hero .rt-eyebrow,
body:not(.theme-sombre) .rt-chain__punch em,
body:not(.theme-sombre) .rt-china__claim em,
body:not(.theme-sombre) .ui-langs__sep,
body:not(.theme-sombre) .ui-pill__tick,
body:not(.theme-sombre) .footer-links a:hover,
body:not(.theme-sombre) .footer-legal a:hover,
body:not(.theme-sombre) .counter-number,
body:not(.theme-sombre) .counter-suffix { color: var(--accent-text); }body:not(.theme-sombre) .ui-pill__tick { background: var(--accent-soft); }/* Le titre du hero d accueil forcait le vert clair en style inline */
body:not(.theme-sombre) .ui-hero h1 span[style*="accent-on-dark"] { color: var(--accent-text) !important; }/* ---------- 3. Les composants sur fond sombre ---------- */

body:not(.theme-sombre) .rt-section--dark .ui-card,
body:not(.theme-sombre) .rt-recap__item,
body:not(.theme-sombre) .rt-chain__node {
    background: #fff;
    border-color: var(--border);
    color: var(--text-dark);
}body:not(.theme-sombre) .rt-section--dark .ui-card p,
body:not(.theme-sombre) .rt-recap__item span:last-child { color: var(--text-medium); }body:not(.theme-sombre) .rt-section--dark .ui-card__num,
body:not(.theme-sombre) .rt-section--dark .ui-claim__num { color: var(--accent-line); }body:not(.theme-sombre) .rt-section--dark .ui-claim { border-color: var(--border); }body:not(.theme-sombre) .rt-section--dark .ui-claim__body p { color: var(--text-medium); }body:not(.theme-sombre) .rt-chain__dot { background: var(--accent); }body:not(.theme-sombre) .rt-chain__sep { color: var(--text-light); }body:not(.theme-sombre) .rt-chain__punch { border-top-color: var(--surface-line); }body:not(.theme-sombre) .rt-recap__check { background: var(--accent-text); color: #fff; }/* Clusters */
body:not(.theme-sombre) .rt-cluster h3 { color: var(--primary); }body:not(.theme-sombre) .rt-cluster p { color: var(--text-medium); }body:not(.theme-sombre) .rt-cluster::before { background: var(--surface); border-color: var(--accent); }body:not(.theme-sombre) .rt-cluster:hover { background: var(--surface-soft); border-color: var(--accent-line); }body:not(.theme-sombre) .rt-coast::before { background: linear-gradient(to bottom, transparent, var(--accent) 12%, var(--accent) 88%, transparent); opacity: 0.4; }/* Bandeau des places de marche */
body:not(.theme-sombre) .ui-plat { color: var(--text-light); }body:not(.theme-sombre) .ui-plat:hover { color: var(--primary); }body:not(.theme-sombre) .ui-marquee__viewport:hover .ui-plat { color: var(--text-light); }/* Citation sur fond sombre */
body:not(.theme-sombre) .rt-cost__quote { background: var(--primary); color: #fff; }/* ---------- 4. La navigation ---------- */

body:not(.theme-sombre).has-dark-hero .navbar:not(.scrolled) .logo-img--dark { display: block; }body:not(.theme-sombre).has-dark-hero .navbar:not(.scrolled) .logo-img--light { display: none; }body:not(.theme-sombre).has-dark-hero .navbar:not(.scrolled) .nav-menu {
    background: rgba(18, 22, 23, 0.05);
    border-color: rgba(18, 22, 23, 0.07);
}body:not(.theme-sombre).has-dark-hero .navbar:not(.scrolled) .nav-menu a { color: var(--text-dark); }body:not(.theme-sombre).has-dark-hero .navbar:not(.scrolled) .nav-menu a:hover,
body:not(.theme-sombre).has-dark-hero .navbar:not(.scrolled) .nav-menu a.active {
    background: var(--accent-soft);
    color: var(--accent-text);
}body:not(.theme-sombre).has-dark-hero .navbar:not(.scrolled) .lang-toggle {
    background: var(--bg-light);
    border-color: var(--border);
    color: var(--text-dark);
}body:not(.theme-sombre).has-dark-hero .navbar:not(.scrolled) .nav-toggle span { background: var(--text-dark); }body:not(.theme-sombre).has-dark-hero .navbar:not(.scrolled) .nav-actions .btn-arrow {
    background: var(--primary);
    border: none;
}/* ---------- 5. Les boutons ---------- */

/* La variante "claire" servait a ressortir sur du noir. Sur fond clair
   elle disparaitrait : on la bascule en sombre. */
body:not(.theme-sombre) .btn-arrow--light {
    background: var(--primary);
    color: #fff;
}body:not(.theme-sombre) .btn-arrow--light .btn-arrow__badge { background: #fff; color: var(--primary); }body:not(.theme-sombre) .btn-arrow--light .btn-arrow__badge::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23121617' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M17 7H8M17 7v9'/%3E%3C/svg%3E");
}body:not(.theme-sombre) .rt-section--dark .rt-next,
body:not(.theme-sombre) .ui-hero .rt-next,
body:not(.theme-sombre) .page-hero .rt-next {
    color: var(--accent-text);
    border-bottom-color: var(--accent-line);
}/* ---------- 6. Le pied de page ---------- */

body:not(.theme-sombre) .footer { border-top: 1px solid var(--surface-line); }body:not(.theme-sombre) .footer-links h4 { color: var(--primary); }body:not(.theme-sombre) .footer-links a,
body:not(.theme-sombre) .footer-links li { color: var(--text-medium); }body:not(.theme-sombre) .footer-bottom { border-top-color: var(--surface-line); }body:not(.theme-sombre) .footer-bottom p,
body:not(.theme-sombre) .footer-legal a { color: var(--text-light); }/* ---------- 7. Le badge du hero ---------- */

body:not(.theme-sombre) .ui-hero__float {
    background: #fff;
    box-shadow: 0 10px 28px rgba(18, 22, 23, 0.14);
    border: 1px solid var(--border);
}/* ========================================
   26 · CONTRASTES DU THEME CLAIR
   Mesures faites sur les fonds reels (surface #EAEFE0, sections teintees
   a 20% de vert, degrade du hero jusqu a 55%).
   Deux couleurs echouaient et sont corrigees ici.
   ======================================== */

body:not(.theme-sombre) {
    /* #8a8a8a ne donnait que 2.95:1 sur la surface claire : illisible.
       #5E5E5E passe 5.6:1 sur la surface et 4.5:1 sur les sections. */
    --text-light: #5E5E5E;

    /* Vert assombri pour les fonds teintes : #4A7002 n y donnait que
       3.99:1, sous le seuil du texte courant. */
    --accent-on-tint: #365202;
}/* Le vert de marque reste #5D8D03 pour les traits, icones et bordures
   (seuil 3:1), jamais pour du texte courant sur fond teinte. */
body:not(.theme-sombre) .rt-section--dark .rt-eyebrow,
body:not(.theme-sombre) .rt-section--dark .rt-next,
body:not(.theme-sombre) .ui-cta .rt-eyebrow,
body:not(.theme-sombre) .rt-china__claim em,
body:not(.theme-sombre) .rt-chain__punch em,
body:not(.theme-sombre) .rt-recap__punch em {
    color: var(--accent-on-tint);
}/* Le bandeau defilant repose sur la surface pleine : le gris corrige
   suffit, mais les noms sont petits, on les renforce d un cran. */
body:not(.theme-sombre) .ui-plat { color: var(--text-medium); }body:not(.theme-sombre) .ui-marquee__viewport:hover .ui-plat { color: var(--text-medium); }body:not(.theme-sombre) .ui-plat:hover { color: var(--primary); }/* Le pied de page est teinte a 16% : on evite le gris le plus clair. */
body:not(.theme-sombre) .footer-bottom p,
body:not(.theme-sombre) .footer-legal a { color: var(--text-medium); }/* Les separateurs de la bande de langues etaient au vert de marque
   (3.64:1) : sous le seuil meme pour de la ponctuation. */
body:not(.theme-sombre) .ui-langs__sep,
body:not(.theme-sombre) .rt-langs__sep { color: var(--accent-text); }

/* Tableau a deux colonnes de meme nature (profils de clients), par
   opposition au tableau critere/options : la premiere colonne n est pas
   un libelle de ligne, elle porte un vrai titre. */
.ui-compare--pair thead th:first-child {
    font-size: 1.08rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    text-transform: none;
    color: var(--primary);
    padding-bottom: 14px;
}

.ui-compare--pair td { width: 50%; }

/* Le libelle du bandeau etait en blanc translucide, concu pour le fond
   sombre : sur les pages claires il devenait illisible. */
body:not(.theme-sombre) .ui-marquee__label { color: var(--text-medium); }

/* Mention "a la carte" sous le parcours, avec l appel au devis.
   Le client peut activer tout le parcours ou seulement certaines etapes. */
.ui-modular {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    flex-wrap: wrap;
    margin-top: 48px;
    padding: 24px 28px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-white);
}

.ui-modular__txt {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--text-dark);
    max-width: 62ch;
}

.ui-modular__icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--accent-soft);
    color: var(--accent-text);
    flex-shrink: 0;
}

/* La variante claire depend de la SECTION, pas de la page : sur une page
   au theme sombre, ce bloc peut tout de meme se trouver dans une section
   blanche. Scoper sur le body rendait le texte blanc sur fond blanc. */
.rt-section--dark .ui-modular,
.ui-cta .ui-modular {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.14);
}

.rt-section--dark .ui-modular__txt,
.ui-cta .ui-modular__txt { color: rgba(255, 255, 255, 0.88); }

.rt-section--dark .ui-modular__icon,
.ui-cta .ui-modular__icon {
    background: rgba(127, 178, 34, 0.18);
    color: var(--accent-on-dark);
}

@media (max-width: 720px) {
    .ui-modular { flex-direction: column; align-items: flex-start; gap: 20px; }
}

/* ==========================================================================
   27. TAILLE DU LOGO

   La signature "Smarter Sourcing." est incrustee dans le fichier logo et
   occupe 8,96 % de sa hauteur. Elle n'est donc lisible que si le logo lui
   meme est assez grand : la hauteur d'affichage se lit directement en
   hauteur de signature.
   ========================================================================== */

.logo-img { height: 44px; }
.footer .logo-img { height: 56px; }

@media (max-width: 1024px) { .logo-img { height: 40px; } }
@media (max-width: 480px)  { .logo-img { height: 36px; } .footer .logo-img { height: 48px; } }