/* 21 octobre 2026 : coque du site refaite sur la structure du dépôt exalt-institut.
   Bandeau d'informations, en-tête collant avec navigation et bouton d'abonnement, menu latéral sur téléphone,
   barre d'abonnement fixée en bas sur téléphone, pied de page en colonnes. Chargée en dernier : elle remplace le rail et la barre flottante.
   Jetons de couleur, rayons et polices : ceux de anointed.css, sans changement. */

.rail, .dock { display: none; }
.coque, html[dir="rtl"] .coque { margin-left: 0; margin-right: 0; }
.coque-lecteur { margin: 0; }

/* Bandeau d'informations (ordinateur seulement). */
.barre-info { display: none; }
@media (min-width: 900px) {
  .barre-info { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 36px; padding-inline: max(24px, calc((100% - 1152px) / 2 + 32px)); border-bottom: 1px solid var(--border); background: var(--soft); color: var(--muted-foreground); font-size: 13px; }
  .barre-info p { margin: 0; }
  .barre-info a { display: inline-flex; align-items: center; min-height: 36px; color: inherit; }
  .barre-info a:hover { color: var(--foreground); text-decoration: underline; text-underline-offset: 3px; }
}

/* En-tête collant. */
.entete-site.barre-haut, .site-vitrine .entete-site.barre-haut { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: flex-start; gap: 16px; max-width: none; height: 72px; margin: 0; padding-inline: max(16px, calc((100% - 1152px) / 2 + 32px)); border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--background) 88%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.nav-site { display: none; align-items: center; gap: 2px; margin-inline-start: 12px; }
.nav-site a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--muted-foreground); font-size: 14px; font-weight: 550; }
.nav-site a:hover { color: var(--foreground); }
.nav-site a[aria-current="page"] { color: var(--foreground); text-decoration: underline; text-decoration-color: var(--accent-trait); text-decoration-thickness: 3px; text-underline-offset: 10px; }
.entete-site .outils { margin-inline-start: auto; gap: 8px; }
.entete-site .lien-connexion { display: none; align-items: center; min-height: 44px; padding: 0 8px; font-size: 14px; font-weight: 550; color: var(--muted-foreground); }
.entete-site .lien-connexion:hover { color: var(--foreground); }
.entete-site .connexion { display: none; }
.entete-site .outils .btn-icone { border: 0; background: none; }
.entete-site [data-theme-bascule] { display: none; }
@media (min-width: 721px) {
  .entete-site .connexion { display: inline-flex; align-items: center; background: var(--accent-citron); color: var(--accent-ink); }
  .entete-site .connexion.outline { background: var(--card); color: var(--foreground); }
  .entete-site .lien-connexion { display: inline-flex; }
}
@media (min-width: 1024px) {
  .nav-site { display: flex; }
  .entete-site .bouton-menu { display: none; }
  .entete-site [data-theme-bascule] { display: inline-grid; }
}
@media (max-width: 380px) { .entete-site .nom-site-texte { display: none; } }

/* Contenu centré sur 1152 px. */
.contenu, .site-vitrine .contenu { max-width: 1152px; padding: 32px clamp(16px, 4vw, 32px) 64px; }
.site-vitrine .contenu { max-width: none; padding: 0; }

/* Menu latéral (téléphone et tablette). */
dialog.feuille-menu { width: min(320px, 86vw); height: 100dvh; max-height: 100dvh; margin: 0; inset-block: 0; inset-inline: auto 0; padding: 20px; border-radius: 0; display: none; }
dialog.feuille-menu[open] { display: grid; align-content: start; gap: 12px; }
dialog.feuille-menu::before { display: none; }
dialog.feuille-menu[open] { animation: none; overflow-y: auto; }
.feuille-menu-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.feuille-menu-tete h2 { margin: 0; font-size: 20px; }
.feuille-menu nav { display: grid; margin-block: 8px 16px; }
.feuille-menu nav a { display: flex; align-items: center; min-height: 52px; border-bottom: 1px solid var(--border); font-size: 17px; font-weight: 550; }
.feuille-menu nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--accent-trait); text-decoration-thickness: 3px; text-underline-offset: 8px; }
.feuille-menu .btn { width: 100%; justify-content: center; }
.feuille-menu form { display: grid; }

/* Barre d'abonnement fixée en bas (téléphone, visiteurs). */
.barre-abo { display: none; }
@media (max-width: 899px) {
  .barre-abo { position: fixed; inset: auto 0 0 0; z-index: 30; display: block; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); background: color-mix(in srgb, var(--background) 95%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  .barre-abo .btn { width: 100%; justify-content: center; }
  .barre-abo ~ .haut-de-page { bottom: 88px; }
  .bandeau-cookies { bottom: 88px; }
}
.barre-cta { bottom: max(16px, env(safe-area-inset-bottom)); }

/* Pied de page en colonnes. */
.pied.pied-site { max-width: none; margin: 0; padding: 48px max(16px, calc((100% - 1152px) / 2 + 32px)) 28px; border-top: 1px solid var(--border); background: var(--soft); }
.pied-site .pied-grille { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 32px 40px; }
.pied-site .pied-marque p { max-width: 32ch; margin: 14px 0 0; color: var(--muted-foreground); font-size: 15px; }
.pied-site .pied-marque a:not(.nom-site) { display: inline-flex; align-items: center; min-height: 44px; color: var(--foreground); overflow-wrap: anywhere; }
.pied-site .pied-titre { margin-bottom: 8px; font-size: 14px; font-weight: 650; }
.pied-site li a { min-height: 44px; }
.pied-site .pied-bas { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--border); align-items: center; }
.pied-site .pied-bas .pied-droits, .pied-site .pied-signature { font-size: 13px; }
.pied-legal { display: flex; flex-wrap: wrap; gap: 0 20px; }
.pied-legal a { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; color: var(--muted-foreground); }
.pied-legal a:hover { color: var(--foreground); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 899px) {
  .pied-site .pied-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pied.pied-site { padding-bottom: 96px; }
}
@media (max-width: 560px) {
  .pied-site .pied-grille { grid-template-columns: minmax(0, 1fr); }
}

/* Bandeau d'en-tête des pages intérieures (21 octobre 2026) : fond clair du site, trait du bas, fil d'Ariane, titre et texte. */
.bandeau-page { border-bottom: 1px solid var(--border); background: var(--soft); }
.bandeau-page-int { max-width: 1152px; margin-inline: auto; padding: clamp(28px, 5vw, 56px) clamp(16px, 4vw, 32px); }
.fil-ariane { margin-bottom: 16px; font-size: 14px; color: var(--muted-foreground); }
.fil-ariane ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; margin: 0; padding: 0; list-style: none; }
.fil-ariane li + li::before { content: "/"; margin-inline-end: 8px; }
.fil-ariane a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; }
.fil-ariane a:hover { color: var(--foreground); text-decoration: underline; text-underline-offset: 4px; }
.fil-ariane [aria-current="page"] { color: var(--foreground); }
.bandeau-page h1 { margin: 0; max-width: 20ch; font-size: clamp(32px, 5vw, 52px); line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; }
.bandeau-page p { max-width: 62ch; margin: 14px 0 0; font-size: 17px; line-height: 1.65; color: var(--muted-foreground); }
.bandeau-page ~ .contenu { padding-top: clamp(28px, 4vw, 48px); }

/* 22 octobre 2026 : en-tête de page hors-centre. Le titre prend 5/12 à gauche, le texte d'appui 7/12 à droite,
   aligné sur le bas du titre et sur l'axe des sections de texte et de l'accueil. Sous 721 px, tout reste en une colonne. */
.bandeau-page h1 { font-weight: 700; letter-spacing: -.035em; line-height: 1.02; }
@media (min-width: 721px) {
  .bandeau-page-int { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 6vw, 80px); align-items: end; }
  .bandeau-page-int .fil-ariane { grid-column: 1 / -1; }
  .bandeau-page-int h1 { grid-column: 1; max-width: 14ch; }
  .bandeau-page-int p { grid-column: 2; margin: 0 0 .5rem; max-width: 42ch; }
}