/* =========================================================
   Lo On Shing — encarts « Focus » des pages pays
   Un bloc dense, une note téléchargeable au bout.
   ========================================================= */
.focus-panel {
    background: #fff;
    border: 1px solid var(--bg-border, #e2e8f0);
    border-top: 4px solid var(--brand-orange, #e67e22);
    border-radius: var(--radius-md, 6px);
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.06));
    padding: 1.75rem 1.9rem;
    margin-bottom: 1.75rem;
}
.focus-panel:last-child { margin-bottom: 0; }
.focus-eyebrow {
    display: inline-block;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #AF5309; /* 5,2:1 sur blanc — audit v4, 5 sept. 2026 (l'orange sombre #C75E0A ne donnait que 4,2:1) */
    margin-bottom: 0.5rem;
}
.focus-panel h3 {
    font-size: 1.32rem;
    color: var(--brand-primary-darker, #092f66);
    margin: 0 0 0.15rem;
    line-height: 1.25;
}
.focus-sub {
    font-size: 0.95rem;
    color: var(--text-muted, #64748b);
    font-style: italic;
    margin: 0 0 1rem;
}
.focus-panel > p { font-size: 0.95rem; line-height: 1.7; color: var(--text-body, #334155); }

.focus-figs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 1.2rem 0 1.3rem;
}
.focus-fig {
    flex: 1 1 8.5rem;
    border: 1px solid var(--bg-border, #e2e8f0);
    border-left: 3px solid var(--brand-primary, #1a55a8);
    border-radius: var(--radius-md, 6px);
    padding: 0.7rem 0.85rem;
    background: var(--bg-subtle, #eef3fa);
}
.focus-fig b {
    display: block;
    font-family: var(--font-display, inherit);
    font-size: 1.32rem;
    color: var(--brand-primary-dark, #0d4494);
    line-height: 1.15;
}
.focus-fig span {
    display: block;
    font-size: 0.78rem;
    color: var(--text-muted, #64748b);
    margin-top: 0.25rem;
    line-height: 1.4;
}

.focus-points {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1.1rem 1.6rem;
    margin: 1.2rem 0 1.4rem;
}
.focus-points h4 {
    font-size: 0.95rem;
    color: var(--brand-primary-dark, #0d4494);
    margin: 0 0 0.3rem;
}
.focus-points p { font-size: 0.88rem; line-height: 1.62; color: var(--text-body, #334155); margin: 0; }

.focus-chain {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 1.1rem 0 1.3rem;
    padding: 0.9rem 1rem;
    background: var(--bg-subtle, #eef3fa);
    border-radius: var(--radius-md, 6px);
}
.focus-chain span {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--brand-primary-darker, #092f66);
    background: #fff;
    border: 1px solid var(--brand-accent, #dbe6f5);
    border-radius: 999px;
    padding: 0.32rem 0.85rem;
}
.focus-chain i {
    font-style: normal;
    color: var(--brand-orange, #e67e22);
    font-weight: 700;
}

.focus-note {
    background: var(--bg-subtle, #eef3fa);
    border-left: 3px solid var(--brand-primary, #1a55a8);
    border-radius: var(--radius-md, 6px);
    padding: 0.85rem 1.05rem;
    font-size: 0.88rem;
    line-height: 1.65;
    color: var(--text-body, #334155);
    margin: 1.1rem 0 1.3rem;
}
.focus-note strong { color: var(--brand-primary-darker, #092f66); }

.focus-dl {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding-top: 1.15rem;
    border-top: 1px solid var(--bg-border, #e2e8f0);
}
.focus-dl .meta {
    font-size: 0.82rem;
    color: var(--text-muted, #64748b);
}

@media (max-width: 640px) {
    .focus-panel { padding: 1.25rem 1.15rem; }
    .focus-panel h3 { font-size: 1.15rem; }
    /*  Les libellés de téléchargement nomment la note en entier ; sur
        un écran étroit ils passent à la ligne au lieu de déborder.  */
    .focus-dl .btn {
        max-width: 100%;
        white-space: normal;
        text-align: center;
        line-height: 1.35;
    }
}

/* ---------- masque de recherche CCSS ---------- */
.ccss-mask {
    max-width: 640px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--bg-border, #e2e8f0);
    border-top: 4px solid var(--brand-orange, #e67e22);
    border-radius: var(--radius-md, 6px);
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.06));
    padding: 2rem 2.1rem;
    /*  réserve en haut pour le ruban d'angle : sans elle, la bande
        passe sur le libellé « Company name or registration number »  */
    padding-top: 3.1rem;
    position: relative;
    overflow: hidden;
}

/* ---------- ruban « coming soon » sur le formulaire ----------
   Même ruban que sur l'aperçu du site CCSS, mais le formulaire n'est
   pas une photo : la translucidité n'a rien à laisser voir, on
   l'opacifie un peu, et le bloc étant bien plus petit que le hero on
   réduit franchement. La bande doit passer AU-DESSUS du premier
   libellé — un ruban qui rend illisible ce qu'il annonce se retourne
   contre lui-même. */
.ccss-mask .ruban-angle {
    width: 96px;
    height: 96px;
    border-top-left-radius: inherit;
}
.ccss-mask .ruban-angle span {
    top: 19px;
    left: -38px;
    width: 136px;
    padding: 4px 0;
    font-size: 0.6rem;
    letter-spacing: 0.09em;
    background: rgba(230, 126, 34, 0.74);
}
.ccss-row { margin-bottom: 1.4rem; }
.ccss-row label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--brand-primary-darker, #092f66);
}
.ccss-row input,
.ccss-row select {
    width: 100%;
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--bg-border, #e2e8f0);
    border-radius: var(--radius-md, 6px);
    font-family: inherit;
    font-size: 0.98rem;
    color: var(--text-body, #334155);
    background: #fff;
    box-sizing: border-box;
}
.ccss-row input:focus,
.ccss-row select:focus {
    outline: none;
    border-color: var(--brand-primary, #1a55a8);
    box-shadow: 0 0 0 3px rgba(26, 85, 168, .12);
}
.ccss-hint { font-size: 0.82rem; color: var(--text-muted, #64748b); margin: 0.45rem 0 0; }
.ccss-warn {
    font-size: 0.85rem;
    color: #a55d10;
    background: #fdf0e2;
    border-radius: 4px;
    padding: 0.5rem 0.7rem;
    margin: 0 0 1rem;
}
.ccss-foot {
    font-size: 0.79rem;
    color: var(--text-muted, #64748b);
    text-align: center;
    margin: 1rem 0 0;
    line-height: 1.55;
}
@media (max-width: 640px) { .ccss-mask { padding: 1.4rem 1.2rem; } }

/* ---------- bandeau d'entrée : fond transparent à 90 % ---------- */
#entry-cta.dark-band {
    background: rgba(9, 47, 102, 0.10);
    border-top: 1px solid rgba(9, 47, 102, 0.10);
    border-bottom: 1px solid rgba(9, 47, 102, 0.10);
}
#entry-cta h2 {
    color: var(--brand-primary-darker, #092f66) !important;
    font-size: 1.45rem;
    margin-bottom: 0.3rem;
}
#entry-cta p { color: var(--text-body, #334155) !important; }
#entry-cta .btn-accent {
    background: var(--brand-primary-dark, #0d4494);
    border-color: var(--brand-primary-dark, #0d4494);
    color: #fff;
}
#entry-cta .btn-outline-white {
    border-color: var(--brand-primary, #1a55a8);
    color: var(--brand-primary-dark, #0d4494);
    background: transparent;
}
#entry-cta .btn-outline-white:hover {
    background: var(--brand-primary-dark, #0d4494);
    color: #fff;
}
#entry-cta .btn { margin: 0.3rem 0.25rem; }

/* ---------- logo CCSS dans un titre ---------- */
.logo-inline {
    height: 1.05em;
    width: auto;
    vertical-align: -0.12em;
    margin-left: 0.15em;
}
h1 .logo-inline { height: 1.15em; vertical-align: -0.2em; }

/* Le titre de la page de recherche tient sur une seule ligne :
   le logo est large (ratio 2:1), donc le titre se met à l'échelle
   de la largeur disponible au lieu de passer à la ligne. */
body[data-page="company-search"] .page-hero h1 {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: 0.3em;
    font-size: clamp(1.35rem, 4.4vw, 2.6rem);
    line-height: 1.15;
}
body[data-page="company-search"] .page-hero h1 .logo-inline {
    height: 1.05em;
    vertical-align: baseline;
    flex: 0 0 auto;
}


/* =========================================================
   Cartes de situation
   Une carte par endroit, la ou son sujet est traite. Le blanc
   marque le territoire dont parle la page ; le reste est ombre.
   ========================================================= */
.geo-map {
    margin: 2.6rem auto 0;
    max-width: 980px;
}
.geo-map img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
    border: 1px solid rgba(13, 68, 148, 0.14);
    box-shadow: 0 12px 30px rgba(9, 47, 102, 0.10);
}
.geo-map figcaption {
    margin-top: 0.7rem;
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--text-muted, #5b6675);
    text-align: center;
}
.geo-map figcaption b { color: var(--brand-primary-dark, #0d4494); font-weight: 700; }
.geo-credit {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.74rem;
    letter-spacing: 0.02em;
    color: #5A6570; /* 6:1 sur blanc — audit v4 (était #97a1ae, 2,6:1) */
}

/* ---------------------------------------------------------
   Deux cartes côte à côte  [geo-maps-two]
   ---------------------------------------------------------
   Le pays d'abord, la région ensuite : le lecteur situe le
   lieu avant qu'on le lui détaille. C'est la disposition
   déjà retenue pour les notes de briefing, reprise ici.
   Sous 760 px elles s'empilent — deux cartes à 380 px de
   large ne se lisent plus.                                */
.geo-maps-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.4rem;
    margin: 2.6rem auto 0;
    max-width: 1040px;
    align-items: start;
}
.geo-maps-two .geo-map { margin: 0; max-width: 100%; }

/*  Les hauteurs sont bornées ensemble, comme dans les notes : deux
    cartes de proportions différentes posées côte à côte doivent tomber
    sur la même ligne de base, sans quoi la paire se lit comme deux
    illustrations sans rapport. La capture anglaise du Vietnam est en
    portrait (542 x 887) là où celle de Đồng Nai est en paysage : sans
    cette borne, la première montait à neuf cents pixels quand la
    seconde en faisait trois cent soixante. La carte plus étroite se
    centre alors dans sa colonne, et sa légende garde toute la largeur
    de la colonne — c'est la légende qui décide de la largeur de la
    colonne, pas l'image.                                              */
.geo-maps-two .geo-map img {
    max-height: 340px;
    width: auto;
    max-width: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.focus-panel .geo-maps-two { max-width: 100%; margin: 1.5rem 0 0.2rem; }

@media (max-width: 760px) {
    .geo-maps-two { grid-template-columns: 1fr; gap: 1.8rem; }
}

/* Dans un encart In focus, la carte prend toute la largeur du
   cartouche et se resserre sur le texte qui la suit. */
.focus-panel .geo-map { max-width: 100%; margin: 1.5rem 0 0.2rem; }
.focus-panel .geo-map figcaption { text-align: left; }

@media (max-width: 700px) {
    .geo-map { margin-top: 1.8rem; }
    .geo-map figcaption { font-size: 0.8rem; }
}


/* =========================================================
   Rappel de la photo d'en-tete
   La photo du bandeau est assombrie a 80 % : on la reprend en
   clair dans le contenu, a taille mesuree.
   ========================================================= */
.hero-echo {
    max-width: 620px;
    margin: 1.7rem auto 2.2rem;
}
/* L'apercu du site CCSS : la page entiere, sans recadrage. Ce n'est
   plus un lien tant que CCSS n'est pas en ligne ; le cadre garde
   l'aspect, sans le survol. */
.hero-echo-frame,
.hero-echo a {
    display: block;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(9, 47, 102, 0.16);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.hero-echo a:hover,
.hero-echo a:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(9, 47, 102, 0.26);
}
.hero-echo img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}
.hero-echo-cue {
    position: absolute;
    right: 12px;
    bottom: 12px;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    background: rgba(9, 47, 102, 0.86);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    backdrop-filter: blur(2px);
}
@media (max-width: 620px) {
    .hero-echo { max-width: 100%; margin-bottom: 1.6rem; }
    .hero-echo-cue { font-size: 0.72rem; padding: 0.32rem 0.7rem; }
}


/* =========================================================
   Recherche CCSS — l'apercu du site a gauche, le masque a
   droite. Deux colonnes egales, alignees sur leur milieu ;
   sous 900 px elles repassent l'une sous l'autre.
   ========================================================= */
.ccss-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2.6rem;
    align-items: center;
    max-width: 1140px;
    margin: 2rem auto 0;
}
/* Le masque de recherche a gauche, l'apercu du site a droite —
   l'oeil rencontre l'outil avant l'illustration. L'ordre du balisage
   ne bouge pas : la photo reste annoncee en premier pour qui lit la
   page au clavier ou a la voix. */
.ccss-split .ccss-mask { order: 1; max-width: 100%; margin: 0; }
.ccss-split .hero-echo { order: 2; max-width: 100%; margin: 0; }

@media (max-width: 900px) {
    .ccss-split { grid-template-columns: 1fr; gap: 1.8rem; max-width: 640px; }
}


/* =========================================================
   Introduction en deux colonnes : la photo d'en-tete reprise
   en clair a gauche, le texte a droite. Meme grille que la
   recherche CCSS, meme point de bascule.
   ========================================================= */
.intro-split {
    display: grid;
    /* Le texte porte la section ; la photo l'accompagne a sa gauche.
       Elle etait descendue a 130 px, ce qui convenait a un gros plan mais
       plus au paysage qui l'a remplacee : une vallee se lit a partir d'une
       certaine largeur, en dessous elle n'est qu'une tache verte. 240 px
       la rend lisible sans qu'elle prenne le pas sur le texte. */
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 1.8rem;
    align-items: center;
    max-width: 1140px;
    margin: 0 auto 2.6rem;
}
.intro-photo { order: 1; margin: 0; }
.intro-text { order: 2; }
.intro-photo img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(9, 47, 102, 0.16);
}
.intro-text h2 {
    margin: 0.4rem 0 0.8rem;
    font-size: clamp(1.4rem, 2.6vw, 1.9rem);
    color: var(--brand-primary-darker, #092f66);
}
.intro-text p {
    margin: 0 0 0.8rem;
    line-height: 1.7;
    color: var(--text-muted, #5b6675);
}
.intro-text p:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
    .intro-split { grid-template-columns: 1fr; gap: 1.6rem; max-width: 700px; }
    .intro-photo { max-width: 200px; }
}

/* ---------- les trois familles de rapports CCSS ----------
   Trois cartes de texte, et non trois tuiles de prix. La carte porte
   un numéro discret en filigrane : il rend le « trois » du titre
   vérifiable d'un coup d'oeil, ce que quatre cartes sans numéro
   rendaient impossible. */
.famille-cartes { align-items: stretch; }
.famille .card-body { position: relative; padding-top: 1.5rem; }
.famille-num {
    position: absolute;
    top: .55rem;
    right: .9rem;
    font-family: var(--font-display, Georgia, serif);
    font-size: 1.45rem;
    font-weight: 700;
    color: rgba(46, 107, 168, 0.16);
    letter-spacing: .02em;
    line-height: 1;
}
.famille h3 { margin: 0 0 .3rem; font-size: 1.12rem; color: #1E4F85; }
.famille .best-for {
    margin: 0 0 .7rem;
    font-style: italic;
    color: #5A6875;
    font-size: .9rem;
    line-height: 1.4;
}
.famille p { font-size: .89rem; line-height: 1.62; color: #46586B; }
.famille .famille-usage {
    margin: .85rem 0 0;
    padding-top: .65rem;
    border-top: 1px solid #E2E8F0;
    font-size: .85rem;
    color: #5A6875;
}
.famille .famille-usage strong { color: #1E4F85; }

/* ============================================================
   Hierarchie des titres  [hierarchie-titres]
   ------------------------------------------------------------
   Trois pages sautaient un niveau — client-access portait meme
   deux h1. Les titres concernes ont ete remontes d'un cran pour
   que la structure du document soit juste ; leur apparence, elle,
   ne doit pas changer : ce sont des titres de carte, pas des
   titres de grande section. On leur redonne ici la taille d'un h3. */
.card .card-body > h2,
.auth-card h2 {
    font-size: 1.4rem;
    margin-bottom: 0.75rem;
    color: var(--text-dark);
}
.auth-header h2 {
    font-size: 1.6rem;
    text-align: center;
    color: var(--text-dark);
}

/* ============================================================
   En-tete sur telephone  [entete-mobile]
   ------------------------------------------------------------
   Deplace dans style.css le 2 septembre 2026 : quatre pages
   (contact, client-access, client-questionnaire, admin-agent)
   ne chargent pas focus.css et montraient sur grand ecran les
   deux entrees de menu reservees au telephone. L'en-tete est
   commun a toutes les pages ; sa feuille doit l'etre aussi.
   ============================================================ */


/* =========================================================
   Accords de libre-echange  [fta]
   ---------------------------------------------------------
   Le tableau des droits reprend `.risk-table` : meme famille
   que le tableau des risques de la page recherche, pas un
   deuxieme style de tableau dans la maison. Il est seulement
   resserre — treize lignes sur cinq colonnes, la ou le tableau
   des risques en porte cinq sur quatre.

   La colonne des taux est alignee a droite et chiffree en
   tabulaire : des pourcentages ranges en colonne se comparent
   d'un coup d'oeil, en vrac ils se lisent un par un.
   ========================================================= */
.fta-grid { align-items: stretch; }
.fta-grid .card-body ul { margin-top: 0.2rem; }

.focus-panel .risk-table-wrapper { margin-top: 1.3rem; }
.fta-table { font-size: 0.88rem; }
.fta-table thead th { padding: 0.7rem 0.85rem; font-size: 0.72rem; }
.fta-table tbody td { padding: 0.6rem 0.85rem; line-height: 1.45; }
.fta-table td:nth-child(2) { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.82rem; color: var(--text-muted, #64748b); white-space: nowrap; }
.fta-table th:nth-child(3), .fta-table td:nth-child(3),
.fta-table th:nth-child(4), .fta-table td:nth-child(4) {
    text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fta-table td:nth-child(4) { font-weight: 700; color: var(--brand-primary-darker, #092f66); }
.fta-table td:nth-child(5) { white-space: nowrap; color: var(--text-muted, #64748b); }
/*  Zero n'est pas un taux parmi d'autres : c'est le seul chiffre
    de la colonne qui dise « rien a payer ». Il se distingue par la
    couleur ET par la graisse, jamais par la couleur seule.  */
.fta-table td.fta-zero { color: #1d7a4c; }

.fta-caption {
    caption-side: top;
    text-align: left;
    padding: 0 0 0.6rem;
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--text-muted, #64748b);
}
.fta-source {
    margin: 0.75rem 0 0;
    font-size: 0.79rem;
    line-height: 1.55;
    color: var(--text-muted, #64748b);
}

@media (max-width: 980px) { .fta-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px)  { .fta-grid { grid-template-columns: 1fr; } }

/*  Sous 720 px, `.risk-table` se déplie en blocs et supprime ses
    en-têtes. C'est juste pour le tableau des risques, dont chaque
    ligne est un récit numéroté qui se lit seul. C'est faux ici : un
    taux sans sa colonne ne veut rien dire, et le téléphone affichait
    « 10 % / 0 % / already » empilés sous un nom de produit, sans dire
    lequel des deux taux était lequel.

    Le tableau des droits reste donc une grille et défile dans son
    cadre — `.risk-table-wrapper` a son ascenseur depuis toujours. La
    colonne coupée au bord droit est ce qui annonce le défilement ;
    c'est aussi pourquoi la largeur minimale ne descend pas plus bas.  */
@media (max-width: 720px) {
    .fta-table { display: table; font-size: 0.8rem; min-width: 540px; }
    .fta-table thead { display: table-header-group; }
    .fta-table thead th { padding: 0.55rem 0.6rem; }
    .fta-table tbody tr { display: table-row; padding: 0; border-bottom: none; }
    .fta-table tbody td {
        display: table-cell;
        padding: 0.5rem 0.45rem;
        border-top: 1px solid rgba(0,0,0,0.06);
        border-bottom: none;
    }
    /*  La dernière colonne perd son `nowrap` : « 1 January 2027 » sur
        deux lignes coûte de la hauteur, que le téléphone a, plutôt que
        de la largeur, qu'il n'a pas. Ce sont deux cents pixels de
        défilement en moins.  */
    .fta-table td:nth-child(5) { white-space: normal; }
    .fta-table td:nth-child(2) { font-size: 0.74rem; }
    .fta-caption { font-size: 0.82rem; }
}

/* =========================================================
   Onglets de section  [intercalaires]
   ---------------------------------------------------------
   Demandés par Antoine le 31 août 2026 : sur chaque page pays,
   des onglets en bordure de page, en forme d'intercalaires de
   classeur, un par section.

   Deux libellés par onglet, et c'est tout le dessin :

     — le court, toujours visible, tient dans une bande de 82 px
       qui ne mord jamais sur le contenu ;
     — le long, révélé au survol et au clavier, dit ce que la
       section est vraiment.

   Un intercalaire de classeur porte « Impôts », pas « Fiscalité
   applicable aux sociétés à participation étrangère » : c'est un
   repère, pas un titre. Mais un repère qui ne dit que « Work »
   n'aide personne qui découvre la page — d'où le second libellé.

   L'onglet s'ouvre vers la GAUCHE, en s'allongeant depuis le bord
   droit. La colonne est donc alignée à droite et chaque onglet
   grandit tout seul : rien n'est animé en largeur de conteneur,
   c'est le libellé long qui passe de 0 à sa largeur naturelle.

   Sous 1280 px la bande disparaît. En dessous, la marge droite
   tombe à moins de 20 px et l'onglet passerait sur le texte. Les
   pastilles d'ancres du bandeau de titre restent, elles, à toutes
   les tailles : la navigation n'est jamais perdue, seulement
   déplacée.
   ========================================================= */
.intercalaires {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 40;
    display: none;                 /* activé par la requête de média */
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    pointer-events: none;          /* la bande ne bloque rien ; les onglets, si */
}
.intercalaires a {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 0;
    min-height: 34px;
    padding: 0.42rem 0.7rem 0.42rem 0.6rem;
    background: #fff;
    color: var(--brand-primary-darker, #092f66);
    border: 1px solid var(--bg-border, #e2e8f0);
    border-right: none;
    border-left: 3px solid var(--brand-accent, #dbe6f5);
    border-radius: var(--radius-md, 6px) 0 0 var(--radius-md, 6px);
    box-shadow: -2px 2px 8px rgba(9, 47, 102, 0.09);
    font-size: 0.73rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    min-width: 6.1rem;
    transition: border-left-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.intercalaires .court { flex: 1 1 auto; }
/*  Le libellé long est là dès le chargement — pour le lecteur
    d'écran, qui lit les deux et n'a que faire du survol — mais
    replié à zéro. C'est sa largeur qui s'ouvre, pas celle de
    l'onglet : un conteneur animé en largeur saute d'une image à
    l'autre, un texte replié non.  */
.intercalaires .long {
    flex: 0 0 auto;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    font-weight: 600;
    color: var(--text-muted, #64748b);
    transition: max-width 0.24s cubic-bezier(.4, 0, .2, 1), opacity 0.18s ease, margin 0.24s ease;
}
.intercalaires a:hover,
.intercalaires a:focus-visible {
    border-left-color: var(--brand-orange, #e67e22);
    box-shadow: -4px 3px 14px rgba(9, 47, 102, 0.16);
    outline: none;
}
.intercalaires a:hover .long,
.intercalaires a:focus-visible .long {
    max-width: 15rem;
    opacity: 1;
    margin-left: 0.45rem;
}
/*  La section qu'on est en train de lire. Marquée par la couleur
    ET par la graisse du filet, jamais par la couleur seule.  */
.intercalaires a.is-active {
    border-left-width: 5px;
    border-left-color: var(--brand-orange, #e67e22);
    background: #fff7ef;
    padding-left: 0.5rem;
}

@media (min-width: 1280px) { .intercalaires { display: flex; } }

/*  Impression : une navigation fixée à l'écran n'a aucun sens sur
    une feuille, et laisserait une bande blanche dans la marge. */
@media print { .intercalaires { display: none !important; } }

/*  Un lecteur qui a demandé moins de mouvement garde l'ouverture,
    mais sans l'animation.  */
@media (prefers-reduced-motion: reduce) {
    .intercalaires a,
    .intercalaires .long { transition: none; }
}

/* =========================================================
   Carte des routes de la soie  [soie]
   ---------------------------------------------------------
   Elle est large — 1472 x 826 — et ne gagne rien à être
   bornée sur la largeur d'un texte : c'est une carte de
   continent, elle se lit à la taille où l'Eurasie tient.

   La légende est du TEXTE, pas une boîte dessinée dans
   l'image. Trois raisons : elle se traduit, elle se
   sélectionne, et un lecteur d'écran la lit. Les deux
   échantillons de trait reprennent exactement les couleurs
   et les styles du tracé — orange plein pour la terre,
   bleu tireté pour la mer.
   ========================================================= */
.geo-map-wide { max-width: 1180px; }
.geo-map-wide figcaption { text-align: left; }

.soie-cle {
    display: block;
    margin: 0.5rem 0 0.55rem;
    padding: 0.55rem 0.75rem;
    background: var(--bg-subtle, #eef3fa);
    border-radius: var(--radius-md, 6px);
    font-size: 0.83rem;
    line-height: 1.7;
    color: var(--text-body, #334155);
}
.soie-cle b { color: var(--brand-orange-dark, #c75e0a); }
.soie-cle i {
    display: inline-block;
    width: 30px;
    height: 0;
    vertical-align: 0.22em;
    margin-right: 0.4rem;
}
.soie-cle i.terre { border-top: 4px solid #c75e0a; }
/*  Le tireté est refait à l'identique du tracé : 13 px de
    plein, 9 de vide. Un pointillé « au hasard » ne
    ressemblerait pas à ce qu'il désigne.  */
.soie-cle i.mer {
    border-top: 4px dashed #0d4494;
    width: 34px;
}
/*  L'échantillon de la zone claire : les deux bleus sont relevés
    DANS la carte livrée, mer ombrée et mer éclaircie, plutôt que
    choisis — c'est la seule façon que la clé ressemble à ce qu'elle
    désigne.  */
.soie-cle i.clair {
    height: 12px;
    width: 26px;
    border: 0;
    background: linear-gradient(90deg, #7193b7 0 45%, #cfdcea 55% 100%);
    border-radius: 2px;
    vertical-align: -0.14em;
}

@media (max-width: 900px) {
    .soie-cle { font-size: 0.79rem; }
}