.section-page { min-height: 100vh; background: var(--bg-main); color: var(--text-main); }
/* Le geste horizontal est réservé aux sections : le navigateur ne doit pas
   afficher ses flèches de navigation précédant / suivant par-dessus le site. */
html { overscroll-behavior-x: none; }
body, body.gallery-page { touch-action: pan-y; overscroll-behavior-x: none; }
.section-page-main { width: min(72rem, calc(100% - 2rem)); margin: 0 auto; padding: 3rem 0 6rem; }
.section-intro { max-width: 42rem; margin-bottom: 2rem; }
.section-eyebrow { margin: 0 0 .55rem; color: var(--text-muted); font-size: .72rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.section-intro h2 { margin: 0; font-size: clamp(1.7rem, 4vw, 3.1rem); line-height: 1; }
.section-intro p:not(.section-eyebrow) { color: var(--text-muted); line-height: 1.55; }
.section-switch { position: relative; }
.section-switch > summary { list-style: none; }
.section-switch > summary::-webkit-details-marker { display: none; }
.section-switch > summary.btn { display: inline-flex; gap: .42rem; padding: .3rem .62rem; border: 1px solid rgba(242,242,242,.18); border-radius: 999px; background: #202027; color: #f2f2f2; cursor: pointer; }
.section-switch > summary.btn:hover, .section-switch[open] > summary.btn { border-color: rgba(242,242,242,.45); background: #30303a; }
.section-switch > summary.btn > i:first-child { color: #cda9ff; }
.section-switch-chevron { font-size: .62rem; color: rgba(242,242,242,.58); transition: transform .16s ease; }
.section-switch[open] .section-switch-chevron { transform: rotate(180deg); }
.section-switch-menu { position: absolute; top: calc(100% + .5rem); right: 0; z-index: 200; display: grid; grid-template-columns: repeat(2, minmax(9.5rem, 1fr)); width: min(25rem, calc(100vw - 1rem)); gap: .3rem; padding: .45rem; border: 1px solid rgba(242,242,242,.2); border-radius: .6rem; background: rgba(22,22,25,.98); box-shadow: 0 16px 35px rgba(0,0,0,.45); }
.section-switch-menu a { display: flex; align-items: center; gap: .55rem; min-height: 2.25rem; padding: .45rem .55rem; border-radius: .38rem; color: rgba(242,242,242,.76); font-size: .76rem; font-weight: 700; text-decoration: none; }
.section-switch-menu a:hover, .section-switch-menu a[aria-current="page"] { background: rgba(255,255,255,.1); color: #fff; }
.section-switch-menu a i { width: 1rem; text-align: center; }
.section-switch-menu a[href="/galerie"] { color: #cda9ff; background: rgba(139,74,245,.17); }
.section-switch-menu a[href="/photos"] { color: #9edbff; background: rgba(9,157,255,.16); }
.section-switch-menu a[href="/contact"] { color: #ffb0cc; background: rgba(255,67,136,.16); }
.section-switch-menu a[href="/accueil"] { color: #f0f3f8; background: rgba(215,220,228,.15); }
.section-switch-menu a[href="/noise"] { color: #a9eee9; background: rgba(36,159,150,.15); }
.section-switch-menu a[href="/game"] { color: #ffadad; background: rgba(255,36,36,.15); }
.section-switch-menu a[href="/calendrier"] { color: #b7c2ff; background: rgba(53,83,255,.16); }
.section-switch-menu .is-private { color: rgba(242,242,242,.42); }
.section-switch-menu .is-private::after { content: 'privé'; margin-left: auto; color: rgba(242,242,242,.28); font-size: .59rem; }

/* Navigation directe : une seule ligne de pastilles, comme Painting / Projet. */
/* La navigation est centrée dans sa propre colonne : l'apparition ou la
   disparition d'un bouton à gauche/droite ne peut donc plus la pousser. */
@media (min-width: 701px) and (max-width: 1650px) {
  .app-header:has(.section-direct-nav) { display: grid; grid-template-columns: minmax(9rem, 1fr) max-content minmax(9rem, 1fr); gap: .55rem; }
  .app-header:has(.section-direct-nav) .brand { grid-column: 1; justify-self: start; }
  .app-header:has(.section-direct-nav) .section-direct-nav { grid-column: 2; width: max-content; max-width: 100%; margin: 0; }
  .app-header:has(.section-direct-nav) .nav-controls { grid-column: 3; justify-self: end; }
}
.app-header:has(.section-direct-nav) .brand { flex: 0 1 auto; color: inherit; text-decoration: none; cursor: pointer; }
.app-header:has(.section-direct-nav) .brand-title { margin-left: 1.25rem; }
.app-header:has(.section-direct-nav) .brand-name-gap { display: inline-block; width: .56em; }
.section-direct-nav { position: relative; display: inline-flex; flex: 1 1 auto; min-width: 0; align-items: center; gap: .22rem; margin: 0 .6rem; padding: .22rem; overflow: hidden; border: 1px solid var(--border-color); border-radius: 999px; background: rgba(13,13,16,.94); box-shadow: 0 0 0 1px rgba(255,255,255,.025), 0 6px 18px rgba(0,0,0,.18); }
.section-active-pill { position: absolute; z-index: 0; top: .22rem; left: .22rem; width: 0; height: calc(100% - .44rem); border-radius: 999px; background: #8b3dff; box-shadow: 0 4px 14px rgba(139,61,255,.4); opacity: 0; pointer-events: none; transform: scale(.92); transform-origin: center; transition: left .42s cubic-bezier(.2,.85,.25,1), width .42s cubic-bezier(.2,.85,.25,1), background .35s ease, box-shadow .35s ease, opacity .2s ease, transform .42s cubic-bezier(.2,.85,.25,1); }
.section-direct-link { position: relative; z-index: 1; display: inline-flex; min-width: 0; align-items: center; justify-content: center; gap: .52rem; height: 2.2rem; padding: 0 1.08rem; border-radius: 999px; background: #202027; color: #cbd5e1; font-size: .9rem; font-weight: 700; line-height: 1; text-decoration: none; white-space: nowrap; transition: background .25s ease, color .25s ease, box-shadow .25s ease; }
.section-direct-link > i,
.section-login-access > i {
  display: inline-flex;
  width: 1.25em;
  height: 1.25em;
  align-items: center;
  justify-content: center;
  flex: 0 0 1.25em;
  line-height: 1;
  text-align: center;
}
/* Font Awesome réserve un espace différent selon le dessin de chaque icône.
   Ce cadre fixe évite que la manette, l'onde et l'appareil photo paraissent
   décalés dans leurs boutons ronds. */
.section-direct-link > i::before,
.section-login-access > i::before {
  display: block;
  width: 1em;
  line-height: 1;
  text-align: center;
  transform: translateY(-.035em);
}
.section-direct-link:hover { transform: none; }

/* Chaque teinte vient de son fond actif : aucun survol ni halo ne possède une
   couleur indépendante. Le survol la mélange à un gris bleuté mat, jamais au
   blanc, pour obtenir un résultat plus désaturé que lumineux. */
.section-direct-link.section-accueil { --section-accent: #e4e4e4; --section-ink: #171d29; }
.section-direct-link.section-gallery { --section-accent: #8b3dff; --section-ink: #fff; }
.section-direct-link.section-photos { --section-accent: #0a9dff; --section-ink: #071725; }
.section-direct-link.section-noise { --section-accent: #04e4ce; --section-ink: #041817; }
.section-direct-link.section-game { --section-accent: #ff2424; --section-ink: #fff; }
.section-direct-link.section-calendar { --section-accent: #3553ff; --section-ink: #f7f8ff; }
.section-direct-link.section-notes { --section-accent: #f5b700; --section-ink: #251a00; }
.section-direct-link.section-contact { --section-accent: #ff4e8f; --section-ink: #2a071a; }

.section-direct-link:is(.section-accueil,.section-gallery,.section-photos,.section-noise,.section-game,.section-calendar,.section-notes,.section-contact):hover {
  color: var(--section-ink);
  background: var(--section-accent);
  box-shadow: none;
}
.section-direct-link.is-current {
  color: var(--section-ink);
  background: var(--section-accent);
  box-shadow: 0 3px 12px color-mix(in srgb, var(--section-accent) 60%, transparent);
}
.section-direct-link.is-current:hover {
  background: var(--section-accent);
  box-shadow: none;
}
/* L'onglet actif garde sa propre pastille colorée. L'ancien indicateur mobile
   placé derrière les boutons pouvait dépasser dans les espaces pendant un
   clic ou un défilement horizontal. */
.section-active-pill { display: none !important; }
.section-direct-link:active { transform: none; }
.section-direct-link.section-game + .section-direct-link.section-calendar { margin-left: .7rem; }
.section-direct-link.is-private[hidden] { display: none; }
/* Certaines anciennes pages contiennent encore un raccourci Calendrier dans
   leur HTML initial, avant que la navigation commune soit reconstruite. Il ne
   fait pas partie de la barre actuelle : on le cache dès le premier rendu
   pour supprimer tout clignotement au rechargement. */
.section-direct-link.section-calendar { display: none !important; }

.section-login-access {
  display: inline-flex;
  inline-size: 2.35rem;
  block-size: 2.35rem;
  align-items: center;
  justify-content: center;
  padding: 0;
  gap: 0;
  text-decoration: none;
}
.section-login-access[hidden] { display: none !important; }
.pwa-install-button { gap: .42rem; }
.pwa-install-button[hidden] { display: none !important; }
.pwa-install-button > i { color: #9edbff; }

@media(max-width:700px){
  .pwa-install-button { inline-size: var(--section-mobile-button-size); block-size: var(--section-mobile-button-size); padding: 0; font-size: clamp(.94rem, 4vw, 1.12rem); }
  .pwa-install-button > span { display: none; }
}

/* Indication discrète du prochain onglet pendant un balayage tactile. */

/* Version ordinateur : la barre respire davantage et le nom garde toute sa
   largeur. La navigation se compacte avant de couper le nom. */
@media(min-width:1651px){
  .app-header:has(.section-direct-nav) {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    --app-header-height: 90px;
    padding-inline: 32px;
    gap: 16px;
  }
  .app-header:has(.section-direct-nav) .brand {
    grid-column: 1;
    justify-self: start;
    flex: 0 0 auto;
    min-width: max-content;
    max-width: max-content;
    overflow: visible;
  }
  .app-header:has(.section-direct-nav) .brand-title {
    width: max-content;
    max-width: none;
    overflow: visible;
    font-size: 40px;
  }
  .app-header:has(.section-direct-nav) .section-direct-nav {
    grid-column: 2;
    justify-self: center;
    width: max-content;
    max-width: 100%;
    gap: .32rem;
    padding: .3rem;
    margin-inline: .35rem;
  }
  .app-header:has(.section-direct-nav) .section-direct-link {
    padding: .55rem .88rem;
    font-size: .9rem;
  }
  .app-header:has(.section-direct-nav) .nav-controls {
    grid-column: 3;
    justify-self: end;
    gap: 12px;
  }
  .app-header:has(.section-direct-nav) .nav-controls .btn {
    padding: 10px 16px;
    font-size: 15px;
  }
  .app-header:has(.section-direct-nav) .section-login-access {
    inline-size: 2.7rem;
    block-size: 2.7rem;
    padding: 0;
  }
}

/* Dès que la barre devient trop étroite, les intitulés se replient en icônes
   sans déplacer ni recouvrir le nom. Les cibles restent assez grandes pour le
   tactile au lieu de devenir de minuscules boutons. */
@media(max-width:1650px){
  .section-direct-label { display: none; }
  .app-header:has(.section-direct-nav) .section-direct-link {
    display: grid !important;
    width: 2.55rem !important;
    height: 2.45rem !important;
    padding: 0 !important;
    place-items: center !important;
    font-size: 1rem;
  }
  /* En mode icône seule, l'icône utilise toute la surface cliquable : elle
     reste donc exactement au centre, quel que soit son dessin Font Awesome. */
  .app-header:has(.section-direct-nav) .section-direct-link > i {
    position: absolute !important;
    inset: 0 !important;
    display: grid !important;
    width: auto !important;
    height: auto !important;
    place-items: center !important;
    flex: none !important;
    margin: 0 !important;
    line-height: 1 !important;
  }
  .app-header:has(.section-direct-nav) .section-direct-link > i::before {
    width: auto !important;
    transform: none !important;
    line-height: 1 !important;
  }
  .section-direct-nav { flex: 1 1 auto; }
}

@media(min-width:701px) and (max-width:1650px) and (max-aspect-ratio:6/5){
  .app-header:has(.section-direct-nav) .brand-title {
    font-size: clamp(2rem, 4vw, 2.8rem);
    line-height: .96;
  }
  .app-header:has(.section-direct-nav) .brand {
    min-width: max-content;
    max-width: max-content;
  }
  .section-direct-link { width: 2.75rem; height: 2.75rem; font-size: 1.2rem; }
}

/* Sur les formats intermédiaires, le nom et la connexion occupent les côtés
   tandis que la navigation reste dans une colonne centrale réelle. */
@media(min-width:701px) and (max-width:1650px){
  .app-header:has(.section-direct-nav) {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    gap: .55rem;
  }
  .app-header:has(.section-direct-nav) .brand {
    grid-column: 1;
    justify-self: start;
  }
  .app-header:has(.section-direct-nav) .section-direct-nav {
    grid-column: 2;
    justify-self: center;
    width: max-content;
    max-width: 100%;
    justify-content: center;
  }
  .app-header:has(.section-direct-nav) .nav-controls {
    grid-column: 3;
    justify-self: end;
  }
}
.contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.contact-hero {
  display: grid;
  justify-items: start;
  gap: .55rem;
  max-width: 42rem;
  margin-bottom: 1.8rem;
}
.contact-page .section-page-main { width: min(46rem, calc(100% - 2rem)); }
.contact-hero h2 {
  margin: .1rem 0 0;
  font-size: clamp(1.45rem, 2.6vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -.02em;
}
.contact-bio {
  margin: .15rem 0 0;
  max-width: 40rem;
  color: var(--text-muted);
  font-size: .92rem;
  line-height: 1.5;
}
.contact-avatar {
  width: 5.6rem;
  height: 5.6rem;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .18);
  background: #111114;
}
.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .35rem;
}
.contact-toast {
  min-height: 1.2rem;
  margin: .35rem 0 0;
  color: #e4e4e7;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .01em;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .28s ease, transform .28s ease;
}
.contact-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.contact-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.35rem;
  padding: .45rem .9rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: #17171b;
  color: #f4f4f5;
  font-size: .88rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.contact-pill:hover {
  border-color: rgba(255, 255, 255, .32);
  background: #222228;
  color: #ffffff;
}
.contact-pill i {
  width: 1rem;
  color: #d4d4d8;
  text-align: center;
}
.contact-card, .section-placeholder { padding: 1rem; border: 1px solid var(--border-color); border-radius: 1.15rem; background: var(--bg-card); }
.contact-card {
  display: flex;
  align-items: center;
  gap: .9rem;
  min-height: 4.7rem;
  padding: .9rem 1rem;
  color: var(--text-main);
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease;
}
.contact-card:hover {
  border-color: var(--border-color-hover);
  background: var(--bg-card-hover);
}
.contact-logo {
  display: grid;
  width: 2.9rem;
  height: 2.9rem;
  flex: 0 0 2.9rem;
  place-items: center;
  overflow: hidden;
  border-radius: .78rem;
  background: #111111;
}
.contact-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.contact-card strong { display: block; font-size: .95rem; }
.contact-card span {
  display: block;
  margin-top: .12rem;
  color: var(--text-muted);
  font-size: .76rem;
}
.section-placeholder { max-width: 42rem; color: var(--text-muted); line-height: 1.5; }
@media(max-width:700px){
  .section-page-main { width: min(100% - 1.1rem, 72rem); padding-top: 2rem; }
  .section-switch > summary span, .section-switch-chevron { display: none; }
  .section-switch > summary.btn { width: 2.15rem; height: 2.15rem; padding: 0; justify-content: center; }
  .section-switch-menu { grid-template-columns: 1fr 1fr; right: -.25rem; }
  .section-switch-menu a span { display: inline; }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-hero { justify-items: center; text-align: center; }
  .contact-actions { justify-content: center; }
  .app-header:has(.section-direct-nav) {
    --app-header-height: 9.5rem;
    position: relative;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: flex-start;
    gap: .35rem;
    padding: .4rem .55rem;
  }
  .app-header:has(.section-direct-nav) .brand {
    position: absolute;
    top: .8rem;
    left: 50%;
    z-index: 2;
    display: flex;
    width: calc(100% - 5.5rem);
    max-width: calc(100% - 5.5rem);
    flex: 0 0 auto;
    min-width: 0;
    align-items: center;
    justify-content: center;
    overflow: visible;
    transform: translateX(-50%);
  }
  .app-header:has(.section-direct-nav) .brand-title {
    margin-left: 0;
    width: 100%;
    max-width: 100%;
    overflow: visible;
    text-align: center;
    font-size: clamp(1.55rem, 7.4vw, 2rem);
  }
  .app-header:has(.section-direct-nav) .brand-name-group { transform-origin: center center; }
  .app-header:has(.section-direct-nav) .nav-controls {
    position: absolute;
    top: .4rem;
    right: .55rem;
    margin-left: 0;
  }
  .section-direct-nav {
    position: absolute;
    right: .55rem;
    bottom: .1rem;
    left: .55rem;
    order: 3;
    width: auto;
    max-width: none;
    margin: 0;
    /* La taille suit progressivement la largeur disponible : aucune bascule
       brutale entre de gros ronds et une barre qui dépasse. */
    /* Les dix boutons tiennent encore à 400 px. La réduction est fluide,
       légère et ne concerne que cette rangée d'icônes. */
    --section-mobile-button-size: clamp(2.15rem, calc((100vw - 3.5rem) / 10), 2.75rem);
    gap: clamp(.06rem, .4vw, .15rem);
    padding: .22rem 0;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 0;
    background: transparent;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    /* Centré quand toutes les icônes tiennent ; sinon le navigateur adopte
       automatiquement l'alignement de départ pour conserver le premier
       bouton entier et permettre le glissement horizontal. */
    justify-content: safe center;
  }
  .section-active-pill { top: .22rem; height: calc(100% - .44rem); }
  .section-direct-nav::-webkit-scrollbar { display: none; }
  .section-direct-link { flex: 0 0 var(--section-mobile-button-size); width: var(--section-mobile-button-size); height: var(--section-mobile-button-size); padding: 0; font-size: clamp(.94rem, 4vw, 1.12rem); }
  .section-login-access { inline-size: var(--section-mobile-button-size); block-size: var(--section-mobile-button-size); font-size: clamp(.94rem, 4vw, 1.12rem); }
  .section-direct-nav .section-direct-label { display: none; }
}

/* Sur les écrans compacts, on conserve une barre utilisable plutôt que la
   grande hauteur destinée au bureau. */
@media(max-width:1650px){
  .app-header:has(.section-direct-nav) {
    --app-header-height: 90px;
  }
  .app-header:has(.section-direct-nav) .brand-title {
    width: max-content;
    max-width: none;
    overflow: visible;
  }
}

@media(min-width:701px) and (max-width:1650px){
  .app-header:has(.section-direct-nav) .brand { overflow: visible; }
}

@media(max-width:700px){
  .app-header:has(.section-direct-nav) .brand-name-gap { width: .35em; }
}

/* Cette règle est placée en dernier : elle garde bien les deux rangées sur
   téléphone, même après les réglages communs tablette. */
@media(max-width:700px){
  .app-header:has(.section-direct-nav) { --app-header-height: 7.375rem; }
}
/* Entre 500 et 700 px, le titre et les boutons sont tous les deux grands. */
@media(min-width:501px) and (max-width:700px){
  .app-header:has(.section-direct-nav) { --app-header-height: clamp(8.6875rem, calc(7.125rem + 5vw), 9.3125rem); }
}
/* Sous 500 px les icônes se réduisent elles aussi : la hauteur accompagne
   cette réduction sans saut perceptible. */
@media(max-width:500px){
  .app-header:has(.section-direct-nav) { --app-header-height: clamp(7.375rem, calc(2.125rem + 21vw), 8.6875rem); }
}

/* Galaxy S20 et téléphones étroits : on réduit les espaces, jamais la taille
   des boutons. Si toutes les sections ne tiennent pas, la barre se glisse
   proprement de gauche à droite. */
@media(max-width:390px){ .section-direct-nav { gap: .12rem; } }

/* Format presque carré (petite tablette, fenêtre réduite) : on adopte la
   composition téléphone avant que les icônes ne commencent à se comprimer. */
@media (min-width:701px) and (max-width:1100px) and (max-aspect-ratio:5/4){
  .app-header:has(.section-direct-nav) {
    --app-header-height: 9.35rem;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: flex-start;
    gap: .35rem;
    padding: .4rem .75rem;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .app-header:has(.section-direct-nav) .brand {
    position: absolute;
    top: .8rem;
    left: 50%;
    z-index: 2;
    display: flex;
    width: calc(100% - 8rem);
    max-width: calc(100% - 8rem);
    min-width: 0;
    align-items: center;
    justify-content: center;
    overflow: visible;
    transform: translateX(-50%);
  }
  .app-header:has(.section-direct-nav) .brand-title {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    overflow: visible;
    text-align: center;
    font-size: clamp(1.8rem, 5.2vw, 3rem);
  }
  .app-header:has(.section-direct-nav) .brand-name-group { transform-origin: center center; }
  .app-header:has(.section-direct-nav) .nav-controls {
    position: absolute;
    top: .4rem;
    right: .75rem;
    margin-left: 0;
  }
  .section-direct-nav {
    position: absolute;
    right: .75rem;
    bottom: 1rem;
    left: .75rem;
    width: auto;
    max-width: none;
    margin: 0;
    overflow-x: auto;
    overflow-y: hidden;
    justify-content: center;
  }
  .section-direct-link { flex: 0 0 2.75rem; width: 2.75rem; height: 2.75rem; padding: 0; font-size: 1.12rem; }
  .section-direct-nav .section-direct-label { display: none; }
}
/* Cette règle finale neutralise la largeur de contenu appliquée aux écrans
   intermédiaires : sur téléphone, le calcul JavaScript peut ainsi réduire le
   nom avec une pente douce au lieu de basculer d'un coup. */
@media(max-width:700px){
  .app-header:has(.section-direct-nav) .brand-title { width: 100%; max-width: 100%; }
}

/* Sous 1100 px de large, quelle que soit la hauteur ou l'orientation, le nom
   garde sa propre rangée et les raccourcis passent nettement en dessous. */
@media (min-width:701px) and (max-width:1100px) {
  .app-header:has(.section-direct-nav) {
    --app-header-height: 8.8rem;
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 4.1rem 3.35rem;
    align-content: center;
    justify-items: center;
    gap: .65rem;
    padding: .35rem .7rem;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .app-header:has(.section-direct-nav) .brand {
    position: static;
    grid-row: 1;
    width: calc(100% - 8rem);
    max-width: calc(100% - 8rem);
    min-width: 0;
    justify-content: center;
    justify-self: center;
    overflow: visible;
    transform: none;
  }

  .app-header:has(.section-direct-nav) .brand-title {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    overflow: visible;
    text-align: center;
    font-size: clamp(1.85rem, 5.6vw, 2.6rem);
  }

  .app-header:has(.section-direct-nav) .brand-name-group {
    transform-origin: center center;
  }

  .app-header:has(.section-direct-nav) .section-direct-nav {
    position: static;
    grid-column: 1;
    grid-row: 2;
    width: max-content;
    max-width: calc(100% - 8rem);
    margin: 0;
    justify-self: center;
    overflow-x: auto;
    overflow-y: hidden;
    justify-content: safe center;
    scrollbar-width: none;
  }

  .app-header:has(.section-direct-nav) .section-direct-link {
    flex: 0 0 2.85rem;
    width: 2.85rem;
    height: 2.85rem;
    font-size: 1.18rem;
  }

  .app-header:has(.section-direct-nav) .nav-controls {
    position: absolute;
    top: .55rem;
    right: .7rem;
    z-index: 3;
    display: flex;
    margin: 0;
  }
}

/* L'espace entre le prénom et le nom respire sur grand écran, puis se réduit
   naturellement à mesure que la fenêtre devient étroite. */
@media (min-width:701px) {
  .app-header:has(.section-direct-nav) .brand-name-gap { width: clamp(.42em, 1.8vw, .95em); }
}
@media (max-width:700px) {
  .app-header:has(.section-direct-nav) .brand-name-gap { width: clamp(.28em, 1.9vw, .48em); }
}

/* Ancrage indépendant du nom : sur ordinateur, la navigation ne participe
   plus à la grille qui contient la marque. Les variations de police, largeur
   ou étirement de « Erwan Bayeul » ne peuvent donc plus la déplacer entre les
   pages. Sa position dépend uniquement de la largeur de la fenêtre. */
@media (min-width:1101px) {
  .app-header:has(.section-direct-nav) {
    display: block;
    position: sticky;
  }
  .app-header:has(.section-direct-nav) .brand {
    position: absolute;
    top: 50%;
    left: clamp(1rem, 2.4vw, 2rem);
    width: clamp(27rem, 35vw, 33rem);
    max-width: clamp(27rem, 35vw, 33rem);
    transform: translateY(-50%);
  }
  .app-header:has(.section-direct-nav) .section-direct-nav {
    position: absolute;
    top: 50%;
    left: clamp(30rem, 39vw, 36rem);
    width: max-content;
    max-width: calc(100vw - clamp(30rem, 39vw, 36rem) - 5rem);
    transform: translateY(-50%);
  }
  .app-header:has(.section-direct-nav) .nav-controls {
    position: absolute;
    top: 50%;
    right: clamp(1rem, 2.4vw, 2rem);
    transform: translateY(-50%);
  }
}

/* iPad / tablette : les pages classiques partagent la même composition que
   Notes. Le nom occupe sa première ligne et les icônes sont centrées sur la
   seconde, sans dépendre des actions présentes à droite (Filtre, connexion…). */
@media (min-width:701px) and (max-width:1100px) {
  .app-header:has(.section-direct-nav) {
    --app-header-height: 8.8rem;
    position: relative !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 4.1rem 3.35rem !important;
    align-content: center !important;
    justify-items: center !important;
    gap: .65rem !important;
    padding: .35rem .7rem !important;
  }
  .app-header:has(.section-direct-nav) .brand {
    position: static !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: calc(100% - 8rem) !important;
    max-width: calc(100% - 8rem) !important;
    min-width: 0 !important;
    justify-self: center !important;
    justify-content: center !important;
    margin: 0 !important;
    overflow: visible !important;
    transform: none !important;
  }
  .app-header:has(.section-direct-nav) .brand-title {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    overflow: visible !important;
    text-align: center !important;
    font-size: clamp(1.85rem, 5.6vw, 2.6rem) !important;
  }
  .app-header:has(.section-direct-nav) .section-direct-nav {
    position: static !important;
    grid-column: 1 !important;
    grid-row: 2 !important;
    justify-self: center !important;
    width: max-content !important;
    max-width: calc(100% - 8rem) !important;
    margin: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    transform: none !important;
  }
  .app-header:has(.section-direct-nav) .nav-controls {
    position: absolute !important;
    top: .55rem !important;
    right: .7rem !important;
    margin: 0 !important;
    transform: none !important;
  }
}

/* Un h1 possède une marge par défaut dans le navigateur. Dans la grille
   tablette elle le faisait remonter hors de sa première ligne. */
@media (min-width:701px) and (max-width:1100px) {
  .app-header:has(.section-direct-nav) .brand-title { margin: 0 !important; }
}

/* Grand écran : une seule ligne de mise en page, volontairement simple.
   Les anciennes règles positionnées servaient aux formats intermédiaires mais
   pouvaient se cumuler avec la grille et expédier le menu à l'autre bout de
   l'écran. Cette zone réserve toujours d'abord la place du mot-symbole. */
@media (min-width:1101px) {
  .app-header:has(.section-direct-nav) {
    --app-header-height: 4.85rem;
    display: flex;
    position: sticky;
    align-items: center;
    gap: 0;
    padding: 0 clamp(1.25rem, 2.4vw, 2.5rem);
  }
  .app-header:has(.section-direct-nav) .brand {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    flex: 0 0 clamp(25rem, 32vw, 31rem);
    width: clamp(25rem, 32vw, 31rem);
    max-width: clamp(25rem, 32vw, 31rem);
    margin: 0;
    transform: none;
    overflow: hidden;
  }
  .app-header:has(.section-direct-nav) .section-direct-nav {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    flex: 0 0 auto;
    width: max-content;
    max-width: none;
    margin: 0;
    transform: none;
  }
  .app-header:has(.section-direct-nav) .nav-controls {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    margin: 0 0 0 auto;
    transform: none;
  }
}

/* Barre partagée : toutes les pages classiques utilisent exactement les mêmes
   trois colonnes. Les colonnes latérales ont la même largeur, donc le dock
   central reste au centre de la fenêtre, pas au centre de l'espace restant. */
@media (min-width:1101px) {
  .app-header:has(.section-direct-nav) {
    --app-header-height: 4.85rem;
    display: grid;
    /* Première colonne réservée au nom. Sa largeur ne dépend ni de la page,
       ni du nombre de boutons à droite : le dock commence donc toujours à la
       même distance du bord gauche. */
    grid-template-columns: clamp(29rem, 38vw, 34rem) max-content minmax(2.6rem, 1fr);
    align-items: center;
    gap: 1rem;
    padding-inline: clamp(1rem, 2.4vw, 2rem);
  }
  .app-header:has(.section-direct-nav) .brand { grid-column: 1; min-width: 0; max-width: 100%; overflow: hidden; }
  .app-header:has(.section-direct-nav) .brand-title { width: 100%; max-width: 100%; margin-left: 0; overflow: hidden; font-size: clamp(1.7rem, 2.35vw, 2.55rem); }
  .app-header:has(.section-direct-nav) .section-direct-nav { grid-column: 2; justify-self: start; width: max-content; max-width: 100%; margin: 0; flex: 0 0 auto; }
  .app-header:has(.section-direct-nav) .nav-controls { grid-column: 3; justify-self: end; min-width: 0; }
}

/* Le dock n'est plus enfermé dans une seconde grande capsule. Seuls les
   boutons gardent leur forme ronde : la rangée reste plus légère et continue
   visuellement avec le reste de la barre. */
.section-direct-nav {
  gap: .28rem;
  padding: .22rem;
  border: 1px solid rgba(242,242,242,.18);
  border-radius: 999px;
  background: rgba(13,13,16,.82);
  box-shadow: none;
}
/* Toutes les commandes complémentaires de la barre ont la même géométrie :
   les actions textuelles sont des pilules, les actions avec icône seule sont
   des boutons parfaitement ronds. */
.app-header:has(.section-direct-nav) .nav-controls { gap: .42rem; }
.app-header:has(.section-direct-nav) .nav-controls .btn {
  min-height: 2.45rem;
  border-radius: 999px;
  box-shadow: none;
}
.app-header:has(.section-direct-nav) .nav-controls .section-login-access {
  inline-size: 2.45rem;
  block-size: 2.45rem;
  padding: 0;
}

/* Une fenêtre plus carrée offre moins de largeur utile qu'un écran 16/9.
   La réserve du nom et le point de départ du menu se rapprochent donc tous
   les deux, en proportion, tout en restant séparés. */
@media (min-width:1101px) and (max-aspect-ratio:3/2) {
  .app-header:has(.section-direct-nav) .brand {
    width: clamp(20rem, 30vw, 27rem);
    max-width: clamp(20rem, 30vw, 27rem);
  }
  .app-header:has(.section-direct-nav) .section-direct-nav {
    left: clamp(22rem, 34vw, 28rem);
    max-width: calc(100vw - clamp(22rem, 34vw, 28rem) - 4rem);
  }
}
/* La barre principale reste immobile : pas de zoom, de halo, ni de changement
   de taille au survol ou pendant le clic. La couleur n'indique que la page
   actuellement ouverte. */
.section-direct-link,
.section-direct-link:hover,
.section-direct-link:focus-visible,
.section-direct-link:active,
.section-direct-link.is-current,
.section-direct-link.is-current:hover {
  transform: none;
  box-shadow: none;
}
.section-direct-link:hover:not(.is-current),
.section-direct-link:focus-visible:not(.is-current) {
  color: var(--section-ink);
  background: var(--section-accent);
}
/* Au repos, toutes les destinations restent gris foncé. Leur teinte apparaît
   seulement au survol et demeure sur la destination active, sans halo. */
.section-direct-link:not(.is-current) {
  background: #202027;
}
@media (max-width:700px) {
  .section-direct-nav { gap: .34rem; }
  .section-direct-link { flex-basis: 3rem; width: 3rem; height: 3rem; font-size: 1.18rem; }
}

/* Le mot-symbole garde un espace présent mais plus discret entre le prénom et
   le nom, qui continue à se réduire de manière fluide sur petit écran. */
@media (min-width:701px) {
  .app-header:has(.section-direct-nav) .brand-name-gap { width: clamp(.34em, 1.15vw, .64em); }
}
@media (max-width:700px) {
  .app-header:has(.section-direct-nav) .brand-name-gap { width: clamp(.24em, 1.25vw, .38em); }
}

/* Téléphone : le nom et la navigation partagent une vraie grille à deux
   rangées. Les marges verticales ne dépendent donc plus de "bottom" ou de
   "top" et restent visuellement équilibrées autour des deux éléments. */
@media (max-width:700px) {
  .app-header:has(.section-direct-nav) {
    --app-header-height: 9rem;
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 3rem 3rem;
    align-content: space-between;
    justify-items: center;
    padding: .75rem .55rem;
    gap: 0;
  }
  .app-header:has(.section-direct-nav) .brand {
    position: static;
    grid-row: 1;
    width: calc(100% - 6.5rem);
    max-width: calc(100% - 6.5rem);
    justify-self: center;
    justify-content: center;
    overflow: visible;
    transform: none;
  }
  .app-header:has(.section-direct-nav) .brand-title {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    overflow: visible;
    text-align: center;
    font-size: clamp(1.55rem, 7.4vw, 2rem);
  }
  .app-header:has(.section-direct-nav) .brand-name-group { transform-origin: center center; }
  .app-header:has(.section-direct-nav) .section-direct-nav {
    position: static;
    grid-row: 2;
    width: max-content;
    max-width: calc(100% - .5rem);
    margin: 0;
    justify-self: center;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .app-header:has(.section-direct-nav) .nav-controls {
    position: absolute;
    top: .55rem;
    right: .55rem;
    margin: 0;
  }
}

/* Règle finale pour ordinateur : le nom, le menu et le bouton de calendrier
   sont trois éléments d'une même ligne. Les !important sont intentionnels :
   ce fichier contient des variantes historiques qui employaient à la fois
   grille et position absolue pour ces mêmes éléments. */
@media (min-width:1101px) {
  .app-header:has(.section-direct-nav) {
    --app-header-height: 4.85rem;
    display: flex !important;
    position: sticky !important;
    align-items: center !important;
    gap: 0 !important;
    padding: 0 clamp(1.25rem, 2.4vw, 2.5rem) !important;
  }
  .app-header:has(.section-direct-nav) .brand {
    position: relative !important;
    inset: auto !important;
    /* Le mot-symbole ne doit jamais être tronqué : sa largeur minimale
       correspond à « Erwan Bayeul » complet, même dans une fenêtre réduite. */
    flex: 0 0 clamp(30rem, 29vw, 32rem) !important;
    width: clamp(30rem, 29vw, 32rem) !important;
    max-width: clamp(30rem, 29vw, 32rem) !important;
    margin: 0 !important;
    transform: none !important;
    overflow: visible !important;
  }
  .app-header:has(.section-direct-nav) .section-direct-nav {
    position: relative !important;
    inset: auto !important;
    flex: 0 0 auto !important;
    width: max-content !important;
    max-width: none !important;
    /* L'écart s'agrandit sur les très grands écrans et se resserre
       progressivement avant le format tablette. Cela rapproche naturellement
       le centre du menu de celui de la fenêtre, sans bouger le nom. */
    margin: 0 0 0 clamp(1rem, 4.5vw, 6rem) !important;
    transform: none !important;
  }
  .app-header:has(.section-direct-nav) .nav-controls {
    position: relative !important;
    inset: auto !important;
    margin: 0 0 0 auto !important;
    transform: none !important;
  }
}

/* Règle finale tablette : elle doit venir après les anciennes variantes
   bureau afin que les raccourcis restent réellement centrés. Un écran haut
   et presque carré est traité comme une tablette, même s'il dépasse 1100 px
   de large : il offre moins d'espace horizontal qu'un ordinateur 16/9. */
@media (min-width:701px) and (max-width:1100px) {
  .app-header:has(.section-direct-nav) {
    --app-header-height: 8.8rem;
    position: relative !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 4.1rem 3.35rem !important;
    align-content: center !important;
    justify-items: center !important;
    gap: .65rem !important;
    padding: .35rem .7rem !important;
  }
  .app-header:has(.section-direct-nav) .brand {
    position: static !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: calc(100% - 8rem) !important;
    max-width: calc(100% - 8rem) !important;
    min-width: 0 !important;
    justify-self: center !important;
    justify-content: center !important;
    margin: 0 !important;
    overflow: visible !important;
    transform: none !important;
  }
  .app-header:has(.section-direct-nav) .brand-title {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    overflow: visible !important;
    text-align: center !important;
    font-size: clamp(1.85rem, 5.6vw, 2.6rem) !important;
  }
  .app-header:has(.section-direct-nav) .section-direct-nav {
    position: static !important;
    grid-column: 1 !important;
    grid-row: 2 !important;
    justify-self: center !important;
    width: max-content !important;
    max-width: calc(100% - 8rem) !important;
    margin: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    transform: none !important;
  }
  .app-header:has(.section-direct-nav) .nav-controls {
    position: absolute !important;
    top: .55rem !important;
    right: .7rem !important;
    margin: 0 !important;
    transform: none !important;
  }
}