/* Accueil, DA 2027 (#347 lot E, #344). Chargé par core/home.html seulement si le drapeau DA2027 est actif ; tout sélecteur commence par
   html.da27. Réutilise les jetons et classes da-* du socle (da27.css) ; ici, la mise en scène de l'accueil : recherche flottante,
   bande de chiffres qui chevauche le héros, carte en cadre arrondi, cartes d'accès, bande d'appel, bascule vers la carte économique. */

html.da27 .da-home-in { max-width: 1280px; margin-inline: auto; padding-inline: var(--marge-page); width: 100%; }
html.da27 .da-tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; margin-block-end: clamp(24px, 3vw, 40px); }
html.da27 .da-tete .da-etiquette { display: block; margin-block-end: 10px; }
html.da27 .da-tete .da-h2 { margin: 0; color: var(--c-text); text-wrap: balance; }
html.da27 .home.home--da { max-width: none; margin: 0; padding: 0; gap: 0; }

/* ---------- héros : photos de communes sous voile marine, titre Manrope, recherche flottante ---------- */
html.da27 .home-hero { background: var(--c-nuit); }
html.da27 .home-hero::after { background: linear-gradient(100deg, rgba(17, 26, 35, .94) 0%, rgba(30, 42, 54, .86) 42%, rgba(30, 42, 54, .5) 100%); }
html.da27[dir="rtl"] .home-hero::after { background: linear-gradient(260deg, rgba(17, 26, 35, .94) 0%, rgba(30, 42, 54, .86) 42%, rgba(30, 42, 54, .5) 100%); }
/* #297 : héros compact (≤ 25 % de l'écran) : titre et recherche côte à côte dès 900 px, sous-titre masqué sous 640 px, mosaïque et voile conservés */
html.da27 .home-hero__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px 40px; align-items: center; max-width: 1280px; margin-inline: auto;
    padding: 10px var(--marge-page) 36px; }
@media (min-width: 900px) { html.da27 .home-hero__in { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); padding-block: 20px 36px; } }
html.da27 .home-hero__title { font: 800 clamp(1.0625rem, .7rem + 1.9vw, 2.125rem)/1.15 var(--font-display); letter-spacing: -.025em; color: #fff; max-width: 26ch; margin: 0 0 6px; text-shadow: none; text-wrap: balance; }
html.da27 .home-hero__sub { display: block; font: 400 clamp(.9375rem, .85rem + .3vw, 1.0625rem)/1.4 var(--font-sans); color: var(--c-sur-nuit-2); max-width: 60ch; margin: 0; }
@media (max-width: 639.98px) { html.da27 .home-hero__sub { display: none; } }
html.da27[lang="ar"] .home-hero__title, html.da27[lang="hi"] .home-hero__title { line-height: 1.3; letter-spacing: 0; }
html.da27 .home-rech { background: #fff; color: var(--c-text); border-radius: var(--r-xl); box-shadow: var(--sh-3); padding: 8px; gap: 4px; max-width: 920px; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 4px; }
html.da27 .home-rech__ligne { grid-column: 1 / -1; }
html.da27 .home-rech__ligne { gap: 10px; }
html.da27 .home-rech__q { border: 1px solid var(--c-border-field); border-radius: var(--r-lg); box-shadow: none; background: #fff; flex: 1 1 auto; min-width: 0; }
html.da27 .home-rech__q:focus-within { outline: var(--da-focus) solid var(--c-action); outline-offset: 2px; }
html.da27 .home-rech .ui-input { min-height: 48px; border-radius: var(--r-lg); font-size: 1rem; }
html.da27 .home-rech__go { min-height: 48px; padding: 0 22px; border-radius: var(--r-full); background: var(--c-action); color: #fff; font-weight: 600; box-shadow: 0 1px 2px rgba(0, 102, 204, .3); }
html.da27 .home-rech__go:hover { background: var(--c-action-hover); }
html.da27 .home-rech__types.da-types { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; align-items: center; gap: 6px; padding: 2px 4px; min-width: 0; }
@media (min-width: 900px) { html.da27 .home-rech__types.da-types { flex-wrap: wrap; overflow: visible; } }
html.da27 .home-rech__types legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html.da27 .home-rech__types.da-types legend + * { clear: none; }
html.da27 .home-rech__types .home-pill { flex: none; min-height: 32px; padding: 0 12px; border: 1px solid var(--c-border-strong); border-radius: var(--r-full); font-size: .8125rem; font-weight: 600; background: #fff; color: var(--c-brand-soft-ink); }
html.da27 .home-rech__types .home-pill:hover { background: var(--brand-50); border-color: var(--c-brand); }
html.da27 .home-rech__types .home-pill:has(input:checked) { background: var(--c-brand); border-color: var(--c-brand); color: #fff; }
html.da27 .home-rech__types .home-pill:has(input:focus-visible), html.da27 .home-rech__q .ui-input:focus-visible { outline: var(--da-focus) solid var(--c-action); outline-offset: 2px; }
html.da27 .home-rech__bas { flex: none; padding: 0 4px; }
html.da27 .home-rech__plus summary { background: transparent; color: var(--c-action); min-height: 36px; padding: 0 8px; font-weight: 600; font-size: .875rem; }
html.da27 .home-rech__plus summary:hover:hover { background: var(--action-50); text-decoration: none; }
html.da27 .home-hero .home-rech a:focus-visible, html.da27 .home-hero .home-rech summary:focus-visible, html.da27 .home-hero .home-rech button:focus-visible { outline: var(--da-focus) solid var(--c-action); outline-offset: 2px; }
html.da27 .home-rech__panneau { left: auto; right: 0; border: 1px solid var(--c-border); border-radius: var(--r-lg); box-shadow: var(--sh-3); }
html.da27[dir="rtl"] .home-rech__panneau { left: 0; right: auto; }
html.da27 .home-credits { right: auto; left: auto; inset-inline-end: 8px; bottom: 4px; }
html.da27 .home-credits ul { right: auto; left: auto; inset-inline-end: 0; top: auto; bottom: calc(100% + 8px); }
@media (max-width: 479.98px) { html.da27 .home-rech__go { width: 56px; padding: 0; } }

/* ---------- bande de chiffres : chevauche le héros ---------- */
html.da27 .da-home-chiffres-wrap { position: relative; z-index: 6; margin-block-start: 12px; }
html.da27 .da-home-chiffres { margin: 0; padding: 0; list-style: none; box-shadow: var(--sh-2); }
html.da27 .da-home-lib { font: 500 .875rem/1.4 var(--font-sans); color: var(--c-text-2); }

/* #297 : bande de chiffres compacte, actualités en bande fine, carte remontée */
html.da27 .da-home-chiffres > * { padding: 8px 14px; gap: 0; }
@media (min-width: 900px) { html.da27 .da-home-chiffres > * { padding: 12px 18px; gap: 2px; } }
html.da27 .da-home-chiffres .da-chiffre { font-size: clamp(1.25rem, 1.05rem + 1.1vw, 2rem); }
html.da27 .da-home-lib { font-size: .8125rem; line-height: 1.25; }
html.da27 .home--da > .da-bande[data-home-news] { padding-block: 20px 4px; }
html.da27 .home--da > .da-bande[data-home-news] .da-tete { margin-block-end: 10px; }
html.da27 .home--da > .da-bande[data-home-news] .da-h2 { font-size: 1.125rem; line-height: 1.3; }
html.da27 .da-actus .da-carte-corps { padding: 12px 16px; gap: 4px; }
html.da27 .da-actus .da-h3 { font-size: .9375rem; line-height: 1.35; -webkit-line-clamp: 2; }
@media (max-width: 767.98px) { html.da27 .da-actus > li:nth-child(n+2) { display: none; } }
html.da27 .home-map.da-bande { padding-block: 24px var(--da-section); }
html.da27 .home-map .da-tete { margin-block-end: 14px; }
html.da27 .home-map .da-tete .da-etiquette { display: none; }
html.da27 .home-map .da-tete .da-h2 { font-size: 1.375rem; line-height: 1.25; }

/* ---------- carte des offres : cadre arrondi, commandes en verre ---------- */
html.da27 .home-map__frame { border-radius: var(--r-xl); border-color: var(--c-border); box-shadow: var(--sh-2); }
html.da27 .home-map__zone { height: clamp(440px, 72vh, 720px); max-height: none; }
html.da27 .home-map__compte, html.da27 .home-map__liste { border-radius: var(--r-full); background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: var(--sh-2); color: var(--c-text); }
html.da27 .home-map__compte strong { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; }
html.da27 .home-map__liste { color: var(--c-action); font-weight: 600; }
html.da27 .home-map__liste:hover { background: #fff; color: var(--c-action-hover); }
html.da27 .home-map__eco { border-radius: var(--r-full); background: rgba(17, 26, 35, .92); color: #fff; box-shadow: var(--sh-2); font-weight: 600; margin-inline-start: auto; }
html.da27 .home-map__eco:hover { background: var(--c-nuit); }
@media (max-width: 767.98px) { html.da27 .home-map__eco { margin-inline-start: 0; border-radius: var(--r-lg); } }
html.da27 .home-map__barre a:focus-visible { outline-color: var(--c-action); }
html.da27 .home-map__eco:focus-visible { outline-color: #fff; box-shadow: 0 0 0 5px var(--c-nuit); }
html.da27 .home-map [data-home-vue-offres][hidden], html.da27 .home-map .home-eco[hidden] { display: none; }

/* ---------- bascule sur place vers la carte économique (#344) ---------- */
html.da27 .home-eco { border: 1px solid var(--c-border); border-radius: var(--r-xl); box-shadow: var(--sh-2); background: var(--c-surface); overflow: hidden; }
html.da27 .home-eco__barre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px 16px; border-block-end: 1px solid var(--c-border); }
html.da27 .home-eco__barre .da-btn svg { transform: rotate(180deg); }
html.da27[dir="rtl"] .home-eco__barre .da-btn svg { transform: none; }
html.da27 .home-eco__corps[aria-busy="true"] { min-height: 320px; background: var(--c-bg-2); }
html.da27 .home-eco__corps .ce-scene { border-radius: 0; margin: 0; }

/* ---------- cartes d'accès, parcours, actualités ---------- */
html.da27 .home-entrees__liste, html.da27 .home-pourquoi__liste, html.da27 .da-actus { list-style: none; margin: 0; padding: 0; }
html.da27 .home-entree.da-carte { display: flex; flex-direction: column; padding: 0; background: var(--c-surface); }
html.da27 .home-entree__lien.da-carte-corps { flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; color: var(--c-text); text-decoration: none; padding: 22px; }
html.da27 .home-entree__lien .da-ico, html.da27 .home-tuile .da-ico { margin-block-end: 6px; }
html.da27 .home-entree__nom, html.da27 .home-tuile__nom { display: block; font: var(--t-h3); color: var(--c-text); overflow-wrap: anywhere; }
html.da27 .home-entree__txt, html.da27 .home-tuile__txt { font-size: .9375rem; line-height: 1.5; color: var(--c-text-2); }
html.da27 .home-entree__lien:hover .home-entree__nom, html.da27 .home-tuile:hover .home-tuile__nom { color: var(--c-brand-soft-ink); }
html.da27 .home-entree__carte.da-plus { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 52px; padding: 0 22px; border: 0; border-block-start: 1px solid var(--c-border); background: transparent;
    color: var(--c-action); font: 600 .875rem/1.2 var(--font-sans); text-align: start; cursor: pointer; }
html.da27 .home-entree__carte.da-plus:hover { background: var(--brand-50); color: var(--c-action-hover); }
html.da27 .home-entree__carte--lien.da-plus { cursor: default; }
html.da27 .home-entree__carte.da-plus:focus-visible { outline: var(--da-focus) solid var(--c-action); outline-offset: -3px; }
html.da27[dir="rtl"] .home-entree__carte.da-plus svg { transform: scaleX(-1); }
html.da27 .home-tuile.da-carte { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; height: 100%; color: var(--c-text); text-decoration: none; }
html.da27 .da-actus > li { display: flex; }
html.da27 .da-actus .da-carte { display: flex; flex-direction: column; gap: 12px; width: 100%; color: var(--c-text); text-decoration: none; }
html.da27 .da-actus .da-h3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
html.da27 .da-bande .da-grille > li { min-width: 0; }
html.da27 .home--da .home-nouvelles { margin: 0 auto; padding-block: 0 24px; padding-inline: var(--marge-page); font-size: .9375rem; }
html.da27 .home--da .home-nouvelles a { color: var(--c-action); }

/* ---------- bande d'appel ---------- */
html.da27 .da-appel { position: relative; overflow: hidden; display: grid; gap: 28px; align-items: center; padding: clamp(28px, 4vw, 56px); color: #fff; border-radius: var(--r-xl);
    background: linear-gradient(135deg, var(--c-nuit) 0%, var(--c-brand-hover) 100%); }
html.da27 .da-appel::after { content: ""; position: absolute; 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; }
@media (min-width: 900px) { html.da27 .da-appel { grid-template-columns: 1.4fr 1fr; } }
html.da27 .da-appel__txt, html.da27 .da-appel__coord { position: relative; z-index: 1; }
html.da27 .da-appel .da-h2 { margin: 0; color: #fff; text-wrap: balance; }
html.da27 .da-appel .da-chapo { color: var(--c-sur-nuit-2); margin: 12px 0 0; }
html.da27 .da-appel__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 0; }
html.da27 .da-appel .da-btn--primaire { background: #fff; color: var(--c-brand-soft-ink); box-shadow: none; }
html.da27 .da-appel .da-btn--primaire:hover { background: var(--brand-50); color: var(--c-brand-hover); }
html.da27 .da-appel :focus-visible { outline: var(--da-focus) solid #fff; outline-offset: 2px; }
html.da27 .da-appel__coord { display: grid; gap: 10px; font-style: normal; font-weight: 600; }
html.da27 .da-appel__coord > * { display: flex; align-items: flex-start; gap: 10px; min-height: 36px; color: #fff; text-decoration: none; overflow-wrap: anywhere; }
html.da27 .da-appel__coord a:hover span { text-decoration: underline; text-underline-offset: 3px; }
html.da27 .da-appel__coord svg { flex: none; margin-block-start: 2px; }
html.da27 .home--da .home-resources { margin: 0 auto 32px; width: 100%; max-width: 1280px; padding-inline: var(--marge-page); background: none; border: 0; box-shadow: none; }

@media (prefers-reduced-motion: reduce) { html.da27 .home-map__liste, html.da27 .home-map__eco { transition: none; } }

/* #358 : vignette de chaque actualité, à côté du texte (hauteur de carte inchangée : le premier écran reste tenu) */
html.da27 .da-actus .da-carte { flex-direction: row; align-items: center; }
html.da27 .da-actus .da-carte-corps { padding: 8px 12px; gap: 12px; }
html.da27 .da-actus__img { flex: none; width: 80px; height: 60px; border-radius: 10px; object-fit: cover; background: var(--c-bg-2); display: block; }
html.da27 .da-actus__img--vide { display: inline-flex; align-items: center; justify-content: center; color: var(--c-brand, #3D5A73); }
html.da27 .da-actus__texte { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
html.da27 a.da-carte:hover .da-actus__img { transform: none; }
html.da27 .da-actus .da-h3 { -webkit-line-clamp: 3; }