/* DA 2027 (#347), lot G : S'implanter (page d'entrée, 17 pages du parcours, pages de rubrique). Chargé seulement quand `da27` est actif ; tout est sous html.da27.
   Le balisage ne change pas ; propriétés logiques pour servir aussi le RTL. */

/* ---------- Page d'entrée : cinq cartes photo ---------- */
html.da27 .hub { gap: var(--da-section); padding-block: clamp(32px, 5vw, 64px) var(--da-section); }
html.da27 .hub-etapes__tete { margin-block-end: 24px; }
html.da27 .hub-etapes__tete .ui-h2, html.da27 .hub-chiffres .ui-h2 { font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em; }
html.da27 .hub-recherche .ui-input { border-radius: var(--r-full); }
html.da27 .hub-grille { gap: 20px; }
html.da27 .hub-tuile { position: relative; isolation: isolate; justify-content: flex-end; min-height: 420px; border: 0; border-radius: var(--r-xl); background: var(--c-nuit); color: #fff; box-shadow: var(--sh-2); }
html.da27 .hub-tuile::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(17,26,35,.15) 0%, rgba(17,26,35,.6) 38%, rgba(17,26,35,.95) 72%); pointer-events: none; }
html.da27 .hub-tuile__media { position: absolute; inset: 0; z-index: 0; aspect-ratio: auto; }
html.da27 .hub-tuile__media .ui-figure img { transition: transform .8s var(--ease); }
html.da27 .hub-tuile:hover .hub-tuile__media .ui-figure img { transform: scale(1.04); }
html.da27 .hub-tuile__media .ui-figure__credit { inset-block: 0 auto; inset-inline: auto 0; right: auto; left: auto; border-radius: 0; border-end-start-radius: var(--r-sm); z-index: 3; }
html.da27 .hub-tuile__picto { inset-block: 16px auto; inset-inline: 16px auto; left: auto; bottom: auto; z-index: 3; width: 44px; height: 44px; border-radius: var(--r-full); background: rgba(17,26,35,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: none; }
html.da27 .hub-tuile__corps { position: relative; z-index: 2; padding: 24px; gap: 10px; flex: 0 0 auto; }
html.da27 .hub-tuile__etape { font: 800 .8125rem/1 var(--font-display); letter-spacing: .06em; color: var(--c-accent-vif); }
html.da27 .hub-tuile__titre { font: 800 1.5rem/1.15 var(--font-display); letter-spacing: -.02em; color: #fff; }
html.da27 .hub-tuile__phrase { color: var(--c-sur-nuit-2); font-size: .9375rem; }
html.da27 .hub-tuile__liens { border-top-color: rgba(255,255,255,.18); }
html.da27 .hub-tuile__liens li { border-bottom-color: rgba(255,255,255,.18); }
html.da27 .hub-tuile__liens a { min-height: 44px; color: #fff; font-weight: 600; font-size: .9375rem; }
html.da27 .hub-tuile__liens a:hover { color: var(--c-accent-vif); }
html.da27 .hub-tuile__liens a:focus-visible, html.da27 .hub-tuile a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
html.da27 .hub-tuile__liens svg { transform: none; }
html.da27[dir="rtl"] .hub-tuile__liens svg { transform: scaleX(-1); }
@media (min-width: 1100px) { html.da27 .hub-tuile { min-height: 460px; } }

/* ---------- Chiffres en cases collées (hub, pages) ---------- */
html.da27 .hub-chiffres { background: none; border: 0; padding: 0; }
html.da27 .hub-chiffres .ui-kpi, html.da27 .sp-chiffres { gap: 1px; background: var(--c-border); border: 1px solid var(--c-border); border-radius: var(--r-xl); overflow: hidden; }
html.da27 .hub-chiffres .ui-kpi .ui-kpi__item, html.da27 .sp-chiffres .sp-chiffre { border: 0; border-radius: 0; box-shadow: none; background: var(--c-surface); padding: clamp(20px, 3vw, 32px); }
html.da27 .hub-chiffres .ui-kpi__item:last-child:nth-child(odd), html.da27 .sp-chiffres:not(.sp-chiffres--3) .sp-chiffre:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 900px) { html.da27 .hub-chiffres .ui-kpi { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } html.da27 .hub-chiffres .ui-kpi__item:last-child:nth-child(odd) { grid-column: auto; } }

/* ---------- Bande d'appel : encart de contact du hub, contact des pages ---------- */
html.da27 .ui-contactbox--large, html.da27 .sp-contact { position: relative; overflow: hidden; isolation: isolate; border: 0; border-radius: var(--r-xl); box-shadow: none; padding: clamp(28px, 4vw, 48px);
    background: linear-gradient(135deg, var(--c-nuit) 0%, var(--c-brand-hover) 100%); color: #fff; }
html.da27 .ui-contactbox--large::after, html.da27 .sp-contact::after { content: ""; position: absolute; z-index: -1; inset-inline-end: -80px; inset-block-start: -80px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(156,201,214,.28), transparent 70%); pointer-events: none; }
html.da27 .ui-contactbox--large .ui-contactbox__titre, html.da27 .sp-contact .ui-h2 { color: #fff; font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em; }
html.da27 .ui-contactbox--large .ui-contactbox__texte, html.da27 .sp-coordonnees, html.da27 .sp-coordonnees dt, html.da27 .ui-contactbox--large .ui-contactbox__lignes { color: var(--c-sur-nuit-2); }
html.da27 .ui-contactbox--large .ui-icon { color: var(--c-accent-vif); }
html.da27 .ui-contactbox--large a:not(.ui-btn), html.da27 .sp-contact a:not(.ui-btn) { color: #fff; font-weight: 600; }
html.da27 .ui-contactbox--large :focus-visible, html.da27 .sp-contact :focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
html.da27 .ui-contactbox--large .ui-btn--primary, html.da27 .sp-contact .ui-btn--primary { background: #fff; border-color: #fff; color: var(--c-brand-soft-ink, var(--c-brand-hover)); }
html.da27 .sp-contact .ui-btn--secondary { background: transparent; border-color: rgba(255,255,255,.6); color: #fff; }
html.da27 .sp-contact .ui-btn--secondary:hover { background: rgba(255,255,255,.12); }
html.da27 .hub-contact__lien .ui-btn--link { font-weight: 700; }

/* ---------- Pages du parcours : sommaire, sections, sources ---------- */
html.da27 .pc-corps { padding-block-start: clamp(20px, 3vw, 40px); }
html.da27 .pc-sommaire { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: 20px; }
html.da27 .pc-sommaire__t, html.da27 .sf-titre { font: 800 .75rem/1.2 var(--font-display); letter-spacing: .08em; color: var(--c-text-2); }
html.da27 .pc-sommaire__a { border-radius: var(--r-md); box-shadow: none; }
html.da27 .pc-sommaire__a:hover { border-color: var(--c-brand); background: var(--brand-50, var(--c-brand-soft)); box-shadow: none; }
html.da27 .pc-sommaire__n { background: var(--c-brand); font-family: var(--font-display); font-weight: 800; }
html.da27 .sf-a { border-inline-start-width: 0; border-left: 0; border-radius: var(--r-full); padding: 8px 14px; }
html.da27 .sf-a:hover { background: var(--brand-50, var(--c-bg-2)); text-decoration: none; }
html.da27 .sf-a[aria-current] { background: var(--c-brand); color: #fff; }
html.da27 .sf-a--sous[aria-current] { background: var(--brand-100, var(--c-brand-soft)); color: var(--c-brand-hover); }
html.da27 .sf-sous { border-left: 0; border-inline-start: 1px solid var(--c-border); margin-left: 0; margin-inline-start: 16px; }
html.da27 .sf-bouton { border-radius: var(--r-full); border-left-width: 1px; border-left-color: var(--c-border-strong, var(--c-border)); padding-inline: 16px; }
html.da27 .sf[data-sf-js] .sf-liste { border-radius: var(--r-lg); }
html.da27 .sf-a:focus-visible, html.da27 .sf-haut a:focus-visible, html.da27 .sf-bouton:focus-visible { outline: 3px solid var(--c-action, #0B5CAD); outline-offset: 2px; }
html.da27 .pc-section + .pc-section { margin-block-start: var(--da-section); padding-block-start: clamp(24px, 4vw, 40px); border-top: 1px solid var(--c-border); }
html.da27 .pc-liees { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: 16px 20px; }
html.da27 .sp-sources { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: clamp(20px, 3vw, 32px); }
html.da27 .sp-sources .ui-h2, html.da27 .sp-voir .ui-h2 { font-family: var(--font-display); font-weight: 800; }
html.da27 .sp-surtitre, html.da27 .si-kicker { font: 800 .8125rem/1.2 var(--font-display); letter-spacing: .06em; text-transform: uppercase; color: var(--c-brand); }
html.da27[lang="ar"] .sp-surtitre, html.da27[lang="ar"] .si-kicker, html.da27[lang="hi"] .sp-surtitre, html.da27[lang="hi"] .si-kicker { text-transform: none; letter-spacing: 0; }
html.da27 .sp-chapo, html.da27 .si-intro { font-size: clamp(1rem, 1.4vw, 1.125rem); line-height: 1.6; color: var(--c-text-2); }
html.da27 .si-fig { border-radius: var(--r-lg); box-shadow: none; }
@media (prefers-reduced-motion: reduce) { html.da27 .hub-tuile__media .ui-figure img { transition: none; } html.da27 .hub-tuile:hover .hub-tuile__media .ui-figure img { transform: none; } }