.section-page { min-height: 100vh; background: var(--surface-page); color: var(--text-main); }
.noise-page .brand-title.brand-style-pending { visibility: visible; }
/* 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; }
.home-main { width: min(86rem, calc(100% - 2rem)); padding-top: clamp(2rem, 5vw, 5rem); }
.home-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.home-copy { display: grid; justify-items: start; gap: 1.25rem; }
.home-copy .section-eyebrow { color: var(--text-tertiary); }
.home-copy h2 { margin: 0; max-width: 100%; font-family: "SF Pro Display", system-ui, sans-serif; font-size: clamp(3rem, 5vw, 5.25rem); font-weight: 900; font-synthesis: none; letter-spacing: -.015em; line-height: 1.07; overflow-wrap: break-word; }
.home-copy p:not(.section-eyebrow) { max-width: 27rem; margin: 0; color: var(--text-secondary); font-size: clamp(1rem, 1.5vw, 1.25rem); line-height: 1.5; }
.home-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: .5rem; }
.home-action { display: inline-flex; align-items: center; justify-content: center; gap: .65rem; min-height: 2.8rem; padding: .7rem 1rem; border: 1px solid var(--border-default); border-radius: .75rem; background: var(--surface-control); color: var(--text-primary); font-weight: 700; text-decoration: none; }
.home-action:first-child { border-color: var(--accent-gallery); background: var(--accent-gallery); color: var(--text-on-accent); }
@media (hover: hover) and (pointer: fine) {
.home-action:hover { border-color: var(--text-primary); } }
.home-artwork { position: relative; display: block; overflow: hidden; min-height: 26rem; max-height: 48rem; border: 1px solid var(--border-default); border-radius: 1.35rem; background: var(--surface-control); }
.home-artwork img { display: block; width: 100%; height: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: 50% 54%; transition: transform .35s ease; }
@media (hover: hover) and (pointer: fine) {
.home-artwork:hover img { transform: scale(1.025); } }
.home-artwork span { position: absolute; right: .85rem; bottom: .85rem; padding: .55rem .75rem; border-radius: .55rem; background: color-mix(in srgb, var(--surface-page) 90%, transparent); color: var(--text-primary); font-size: .8rem; font-weight: 700; }
.home-sections { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; margin-top: 2.5rem; }
.home-section { display: grid; gap: .5rem; min-height: 9rem; align-content: space-between; padding: 1.15rem; border: 1px solid var(--border-default); border-radius: .9rem; background: var(--surface-card); color: var(--text-primary); text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
.home-section:hover { background: var(--surface-hover); border-color: var(--border-default); } }
.home-section i { display: grid; place-items: center; width: 2.35rem; height: 2.35rem; border-radius: .6rem; background: var(--home-accent); color: var(--text-on-accent); }
.home-section strong { font-size: 1.12rem; }
.home-section small { color: var(--text-secondary); line-height: 1.35; }
@media(max-width:850px) { .home-hero { grid-template-columns: 1fr; } .home-copy h2 { font-size: clamp(3rem, 8vw, 5rem); } .home-artwork { min-height: 0; max-height: 38rem; } .home-sections { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media(max-width:480px) { .home-main { padding-top: 2rem; } .home-copy h2 { font-size: clamp(2.5rem, 10vw, 3.6rem); } .home-sections { gap: .5rem; margin-top: 1.5rem; } .home-section { padding: .85rem; min-height: 8.2rem; } }
.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 var(--border-default); border-radius: 999px; background: var(--surface-raised); color: var(--text-primary); cursor: pointer; }
 .section-switch[open] > summary.btn { border-color: var(--border-strong); background: var(--surface-hover); }
@media (hover: hover) and (pointer: fine) {
.section-switch > summary.btn:hover { border-color: var(--border-strong); background: var(--surface-hover); } }
.section-switch > summary.btn > i:first-child { color: var(--accent-gallery); }
.section-switch-chevron { font-size: .62rem; color: var(--text-control); 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 var(--border-default); border-radius: .6rem; background: var(--surface-control); box-shadow: 0 16px 35px color-mix(in srgb, var(--surface-page) 45%, transparent); }
.section-switch-menu a { display: flex; align-items: center; gap: .55rem; min-height: 2.25rem; padding: .45rem .55rem; border-radius: .38rem; color: var(--text-label); font-size: .76rem; font-weight: 700; text-decoration: none; }
 .section-switch-menu a[aria-current="page"] { background: var(--surface-raised); color: var(--text-primary); }
@media (hover: hover) and (pointer: fine) {
.section-switch-menu a:hover { background: var(--surface-hover); color: var(--text-primary); } }
.section-switch-menu a i { width: 1rem; text-align: center; }
.section-switch-menu a[href="/galerie"] { color: var(--accent-gallery); background: color-mix(in srgb, var(--accent-gallery) 17%, transparent); }
.section-switch-menu a[href="/photos"] { color: var(--accent-photos); background: color-mix(in srgb, var(--accent-photos) 16%, transparent); }
.section-switch-menu a[href="/contact"] { color: var(--accent-contact); background: color-mix(in srgb, var(--accent-contact) 16%, transparent); }
.section-switch-menu a[href="/accueil"] { color: var(--text-primary); background: var(--surface-raised); }
.section-switch-menu a[href="/noise"] { color: var(--pill-accent-noise); background: color-mix(in srgb, var(--pill-accent-noise) 15%, transparent); }
.section-switch-menu a[href="/game"] { color: var(--accent-game); background: color-mix(in srgb, var(--accent-game) 15%, transparent); }
.section-switch-menu a[href="/calendrier"] { color: var(--accent-calendar); background: color-mix(in srgb, var(--accent-calendar) 16%, transparent); }
.section-switch-menu .is-private { color: var(--text-control); }
.section-switch-menu .is-private::after { content: 'privé'; margin-left: auto; color: var(--text-supporting); 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: var(--surface-card); box-shadow: 0 0 0 1px color-mix(in srgb, var(--text-primary) 2.5%, transparent), 0 6px 18px color-mix(in srgb, var(--surface-page) 18%, transparent); }
.section-active-pill { position: absolute; z-index: 0; top: .22rem; left: .22rem; width: 0; height: calc(100% - .44rem); border-radius: 999px; background: var(--accent-gallery); box-shadow: 0 4px 14px color-mix(in srgb, var(--accent-gallery) 28%, transparent); 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: var(--surface-raised); color: var(--text-tertiary); 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);
}
@media (hover: hover) and (pointer: fine) {
.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: var(--pill-accent-home); --section-ink: var(--text-on-accent); }
.section-direct-link.section-gallery { --section-accent: var(--pill-accent-gallery); --section-ink: var(--text-on-accent); }
.section-direct-link.section-photos { --section-accent: var(--pill-accent-photos); --section-ink: var(--text-on-accent); }
.section-direct-link.section-noise { --section-accent: var(--pill-accent-noise); --section-ink: var(--text-on-accent); }
.section-direct-link.section-game { --section-accent: var(--pill-accent-game); --section-ink: var(--text-on-accent); }
.section-direct-link.section-calendar { --section-accent: var(--pill-accent-calendar); --section-ink: var(--text-on-accent); }
.section-direct-link.section-notes { --section-accent: var(--pill-accent-notes); --section-ink: var(--text-on-accent); }
.section-direct-link.section-contact { --section-accent: var(--pill-accent-contact); --section-ink: var(--text-on-accent); }

@media (hover: hover) and (pointer: fine) {

.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);
}
@media (hover: hover) and (pointer: fine) {
.section-direct-link.is-current:hover {
  background: var(--section-accent);
  box-shadow: none;
} }
/* L'ancien indicateur est remplacé par le fond SVG à piste arrondie commune. */
.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; }
/* Les accès de session ne figurent pas dans la barre des sections. Cela
   couvre le lien de connexion et le bouton de déconnexion de Mon espace. */
.app-header:has(.section-direct-nav) .nav-controls .section-login-access { display: none !important; }
.pwa-install-button { gap: .42rem; }
.pwa-install-button[hidden] { display: none !important; }
.pwa-install-button > i { color: var(--accent-photos); }

@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; }
}

/* 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:1100px), (max-aspect-ratio:6/5){
  .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; }
}

/* Les libellés reviennent après 1400 px. À cette largeur, leur capsule et
   les outils des pages média doivent encore tenir côte à côte. */
@media (min-width: 1401px) and (max-width: 1500px) {
  .app-header:has(.section-direct-nav) .section-direct-link {
    gap: .4rem;
    padding-inline: .85rem;
    font-size: .88rem;
  }
}
@media (min-width: 1101px) and (max-width: 1500px) {
  .app-header:has(.section-direct-nav) .nav-controls :is(#btnToggleGalleryFilters, #btnTogglePhotoFilters, #btnToggleFirstNameTest) {
    display: inline-flex;
    inline-size: 2.75rem;
    min-height: 2.75rem;
    justify-content: center;
    align-items: center;
    padding: 0;
    font-size: 0;
  }
  .app-header:has(.section-direct-nav) .nav-controls :is(#btnToggleGalleryFilters, #btnTogglePhotoFilters, #btnToggleFirstNameTest) i {
    font-size: 1rem;
  }
}

@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;
  }
}

/* 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 var(--border-default);
  background: var(--surface-card);
}
.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .35rem;
}
.contact-toast {
  min-height: 1.2rem;
  margin: .35rem 0 0;
  color: var(--text-tertiary);
  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 var(--border-default);
  background: var(--surface-control);
  color: var(--text-primary);
  font-size: .88rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
@media (hover: hover) and (pointer: fine) {
.contact-pill:hover {
  border-color: var(--border-hover);
  background: var(--surface-hover);
  color: var(--text-primary);
} }
.contact-pill i {
  width: 1rem;
  color: var(--text-tertiary);
  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;
}
@media (hover: hover) and (pointer: fine) {
.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: var(--surface-card);
}
.contact-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.contact-logo-linktree img {
  width: 2rem;
  height: 2rem;
  object-fit: contain;
}
.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 var(--border-default);
  border-radius: 999px;
  background: var(--surface-card);
  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 .btn:not(.section-login-access) {
  border: 0;
  border-radius: .65rem;
}
.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:focus-visible,
.section-direct-link:active,
.section-direct-link.is-current {
  transform: none;
  box-shadow: none;
}
@media (hover: hover) and (pointer: fine) {

.section-direct-link:hover,
.section-direct-link.is-current:hover {
  transform: none;
  box-shadow: none;
} }

.section-direct-link:focus-visible:not(.is-current) {
  color: var(--section-ink);
  background: var(--section-accent);
}
@media (hover: hover) and (pointer: fine) {
.section-direct-link:hover: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: var(--surface-raised);
}
@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;
  }
}

/* Direction visuelle commune : surfaces presque noires, accents lisibles en noir. */
.section-direct-link.section-gallery { --section-accent: var(--pill-accent-gallery); --section-ink: var(--text-on-accent); }
.section-direct-link.section-game { --section-accent: var(--pill-accent-game); --section-ink: var(--text-on-accent); }
 .section-direct-link.section-game:is(:focus-visible,.is-current) > i { color: var(--text-on-accent); }
@media (hover: hover) and (pointer: fine) {
.section-direct-link.section-game:hover { color: var(--text-on-accent); } }
.section-direct-link.section-contact { --section-accent: var(--pill-accent-contact); --section-ink: var(--text-on-accent); }
.section-direct-link.section-calendar { --section-accent: var(--pill-accent-calendar); --section-ink: var(--text-on-accent); }
.section-direct-link.section-accueil,
.section-direct-link.section-photos,
.section-direct-link.section-noise,
.section-direct-link.section-notes,
.section-direct-link.section-contact { --section-ink: var(--text-on-accent); }

.contact-page { background: var(--surface-page); }
.contact-page .section-page-main { width: min(46rem, calc(100% - 2rem)); padding-top: clamp(2rem, 5vw, 4rem); background: transparent; }
.contact-page .contact-hero { display: grid; gap: 1rem; max-width: none; margin-bottom: 2rem; }
.contact-page .contact-avatar { width: 6.5rem; height: 6.5rem; border: 1px solid var(--border-default); }
.contact-page .contact-hero h2 { margin: 0; font-family: "SF Pro Display", system-ui, sans-serif; font-size: var(--section-title-size); font-weight: 900; font-synthesis: none; line-height: 1.08; letter-spacing: -.015em; color: var(--text-primary); }
.contact-page .contact-bio { max-width: 55ch; color: var(--text-secondary); font-size: .9rem; }
.contact-page .contact-actions { align-items: center; gap: .65rem; margin-top: .25rem; }
.contact-page .contact-pill { min-height: 2.75rem; padding: .55rem 1.1rem; background: var(--accent-neutral); border-color: var(--text-primary); color: var(--text-on-accent); font-weight: 750; }
.contact-page .contact-pill i { color: var(--text-on-accent); }
@media (hover: hover) and (pointer: fine) {
.contact-page .contact-pill:hover { background: var(--accent-neutral); color: var(--text-on-accent); } }
.contact-page .contact-grid { gap: .7rem; }
.contact-page .contact-card { min-height: 5.25rem; border: 1px solid var(--border-default); border-radius: 1.15rem; background: var(--surface-card); color: var(--text-primary); }

.contact-page .contact-card:focus-visible { border-color: var(--text-primary); background: var(--surface-control); outline: 0; }
@media (hover: hover) and (pointer: fine) {
.contact-page .contact-card:hover { border-color: var(--text-primary); background: var(--surface-hover); outline: 0; } }
.contact-page .contact-card strong { color: var(--text-primary); font-size: 1rem; }
.contact-page .contact-card > div > span { color: var(--text-secondary); }
.contact-page .contact-logo { width: 3.1rem; height: 3.1rem; flex-basis: 3.1rem; border-radius: .8rem; background: #1eb2e7; }
.contact-page .contact-card:first-child .contact-logo { background: var(--surface-control); }
.contact-page .contact-card:nth-child(2) .contact-logo { background: #e73d67; }
.contact-page .contact-card:nth-child(3) .contact-logo { background: #0a70cc; }
.contact-page .contact-card:nth-child(4) .contact-logo { background: #ff2128; }
.contact-page .contact-card:nth-child(5) .contact-logo { background: #9743ef; }
.contact-page .contact-card:nth-child(6) .contact-logo { background: #38df5b; color: var(--text-on-accent); }
.contact-page .contact-card .contact-logo { color: var(--text-on-accent); }
.contact-page .contact-logo svg { display: block; width: 2rem; height: 2rem; }
.contact-page .contact-logo .contact-artstation-icon { width: 2.45rem; height: 2.45rem; }
.contact-page .contact-logo .contact-brand-text { margin: 0; color: var(--text-on-accent); font-size: 1.8rem; font-weight: 900; letter-spacing: -.09em; line-height: 1; }
.contact-page .contact-logo > i { width: 1.7rem; text-align: center; line-height: 1.7rem; }
.contact-page .contact-card > .contact-logo { display: grid; place-items: center; margin: 0; color: var(--text-on-accent); line-height: 1; }
.contact-page .contact-logo > svg, .contact-page .contact-logo > i, .contact-page .contact-logo > .contact-brand-text { width: auto; line-height: 1; }
.contact-page .contact-logo > i { width: 1.7rem; text-align: center; line-height: 1.7rem; }
.contact-page .contact-logo > .contact-brand-text { width: auto; line-height: 1; }
@media (max-width:700px) {
  .contact-page .section-page-main { padding-top: 1.7rem; }
  .contact-page .contact-grid { grid-template-columns: 1fr; }
  .contact-page .contact-hero { justify-items: start; text-align: left; }
  .contact-page .contact-actions { justify-content: flex-start; }
}
/* Des rayons proches de la demi-hauteur évitent que le navigateur réduise
   les coins intérieurs, comme il le faisait avec 999px sur le même bouton. */
.section-direct-nav { --section-outer-radius: 1.1rem; --section-inner-radius: .6rem; border-radius: 999px; gap: .38rem; padding: .38rem; }
.section-direct-link, .section-active-pill { border-radius: var(--section-inner-radius); }
.section-direct-link:first-of-type { border-radius: var(--section-outer-radius) var(--section-inner-radius) var(--section-inner-radius) var(--section-outer-radius); }
.section-direct-link:last-of-type { border-radius: var(--section-inner-radius) var(--section-outer-radius) var(--section-outer-radius) var(--section-inner-radius); }
.section-direct-link { outline: none; }
.section-direct-link:focus-visible { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--text-primary) 88%, transparent); }
.section-active-pill { top: .38rem; height: calc(100% - .76rem); }
@media (min-width: 701px) and (max-width: 1100px) {
  .section-direct-nav { --section-outer-radius: 1.225rem; }
}
@media (max-width: 700px) {
  .section-direct-nav { --section-outer-radius: calc(var(--section-mobile-button-size) / 2); gap: .2rem; padding: .25rem; border-radius: 999px; }
  .section-active-pill { top: .25rem; height: calc(100% - .5rem); }
}

/* Sur une ligne, la capsule et les commandes ont chacune leur colonne. */
@media (min-width: 1101px) {
  .app-header:has(.section-direct-nav) {
    display: grid !important;
    grid-template-columns: clamp(32rem, 31vw, 34rem) minmax(0, 1fr) auto;
    column-gap: .75rem !important;
  }
  .app-header:has(.section-direct-nav) .brand {
    grid-column: 1;
    justify-self: start;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    overflow: visible !important;
  }
  .app-header:has(.section-direct-nav) .brand-title {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }
  .app-header:has(.section-direct-nav) .section-direct-nav {
    grid-column: 2;
    grid-row: 1;
    position: static !important;
    justify-self: center;
    width: max-content !important;
    max-width: 100% !important;
    margin: 0 !important;
    transform: none !important;
  }
  .app-header:has(.section-direct-nav) .nav-controls {
    grid-column: 3;
    grid-row: 1;
    position: static !important;
    justify-self: end;
    margin: 0 !important;
    transform: none !important;
  }
}

/* Sur deux rangées, la capsule se centre entre la marque et le bas du header. */
@media (min-width: 701px) and (max-width: 1100px) {
  .app-header:has(.section-direct-nav) {
    --app-header-height: 9rem;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 3.9rem minmax(0, 1fr) !important;
    align-content: stretch !important;
    justify-items: center !important;
    gap: 0 !important;
    padding: .5rem .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;
    justify-self: center !important;
    justify-content: center !important;
    overflow: visible !important;
    transform: none !important;
  }
  .app-header:has(.section-direct-nav) .brand-title {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    overflow: visible !important;
    text-align: center !important;
  }
  .app-header:has(.section-direct-nav) .brand-name-group { transform-origin: center center; }
  .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% - 1rem) !important;
    margin: 0 !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;
  }
}

/* Une seule géométrie du téléphone à la tablette : le nom prend toute la
   largeur, et les boutons diminuent avant que la capsule ne déborde. */
@media (max-width: 700px) {
  .app-header:has(.section-direct-nav) {
    --section-mobile-button-size: clamp(1.55rem, calc((100vw - 3.25rem) / 7), 2.85rem);
    --brand-row-height: clamp(3.8rem, 17.5vw, 4.7rem);
    --app-header-height: calc(2.4rem + var(--brand-row-height) + var(--section-mobile-button-size));
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--brand-row-height) minmax(0, 1fr);
    align-content: stretch;
    gap: 0;
    padding: .5rem .35rem;
  }
  .app-header:has(.section-direct-nav) .brand {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
  }
  .app-header:has(.section-direct-nav) .brand-title {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    overflow-y: visible;
  }
  .app-header:has(.section-direct-nav) .section-direct-nav {
    --section-mobile-button-size: inherit;
    grid-column: 1;
    grid-row: 2;
    width: max-content;
    max-width: 100%;
    min-width: 0;
    justify-self: center;
    gap: clamp(.14rem, .7vw, .25rem);
    padding: .28rem;
  }
  .app-header:has(.section-direct-nav) .section-direct-link {
    flex: 0 0 var(--section-mobile-button-size) !important;
    width: var(--section-mobile-button-size) !important;
    height: var(--section-mobile-button-size) !important;
    font-size: clamp(.8rem, 3.6vw, 1.1rem);
  }
  .app-header:has(.section-direct-nav) .nav-controls {
    display: none;
  }
  .app-header:has(.section-direct-nav):has(.nav-controls > :not(.section-login-access):not([hidden])) .nav-controls {
    display: flex;
  }
}

/* En paysage étroit, les noms restent entiers et la capsule défile si besoin. */
@media (min-width: 1101px) and (min-aspect-ratio: 1/1) {
  .app-header:has(.section-direct-nav) .section-direct-nav {
    overflow-x: auto;
    overflow-y: hidden;
    justify-content: safe center;
    scrollbar-width: none;
  }
  .app-header:has(.section-direct-nav) .section-direct-nav::-webkit-scrollbar { display: none; }
  .app-header:has(.section-direct-nav) .section-direct-link { flex: 0 0 auto; }
}
@media (min-width: 1101px) and (max-width: 1400px) and (min-aspect-ratio: 1/1) {
  .app-header:has(.section-direct-nav) .section-direct-link {
    gap: .4rem;
    padding-inline: .8rem;
    font-size: .88rem;
  }
}

/* Dans l'espace personnel, le dock du bas suffit dès qu'il prend le format
   téléphone. Le calendrier Notes classique a son propre document ; les pages
   publiques gardent toujours leur en-tête. Sans dock disponible, garder
   l'en-tête : le chargement du menu ne doit jamais bloquer la navigation. */
@media (max-width: 700px) {
  body:has(nav.calendar-workspace-dock:not([hidden]):not([style*="display: none"])) .personal-app > header.app-header:has(.section-direct-nav),
  body.has-workspace-dock:has(> nav.calendar-workspace-dock:not([hidden]):not([style*="display: none"])):has(#calendarNavHome) > header.app-header { display: none !important; }
  .personal-app:not(.is-tree-view) > .workspace-main:not(.unified-calendar-main):not(.personal-dashboard-main):not(.personal-live-main) {
    padding-top: 1rem !important;
  }
}

/* Pilules partagées : navigation du site, Notes et période des objectifs.
   Le SVG reprend la piste, les interstices et le ressort du dock du bas. */


/* Certains en-têtes hérités fixent la capsule en position static : le SVG
   doit toujours avoir cette capsule comme repère, y compris en paysage. */
html body .app-header .section-direct-nav.animated-pill-nav { position: relative !important; inset: auto !important; }

/* Les outils gardent leur emplacement propre : aucune superposition avec
   les onglets, même quand la fenêtre de bureau se rétrécit. */
@media (min-width: 1101px) and (max-width: 1650px) {
  .app-header:has(.section-direct-nav) .section-direct-label { display: none; }
}
@media (max-width: 1100px) {
  .app-header:has(.section-direct-nav) .section-direct-nav { align-self: center !important; }
}

/* Le nom reste ancré en haut. La rangée du menu occupe l'espace restant,
   sans retrait inférieur asymétrique ni décalages hérités. */
@media (max-width: 1100px) {
  html body .app-header:has(.section-direct-nav) {
    --app-header-height: var(--section-stack-height, 10rem);
    grid-template-rows: var(--section-brand-height, 4.8rem) minmax(0, 1fr) !important;
    gap: 0 !important;
    padding-bottom: 0 !important;
    align-content: stretch !important;
  }
  html body .app-header:has(.section-direct-nav) .brand { align-self: start !important; z-index: 0; }
  html body .app-header:has(.section-direct-nav) .section-direct-nav { z-index: 1; }
}