/* Base : remise à zéro, typographie, gabarit de page, en-tête et pied de page. */
*{box-sizing:border-box;}
[hidden]{display:none!important;}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 12px);}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:var(--fs-base);line-height:1.5;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;}
code,kbd,.mono{font-family:var(--font-code);font-size:.9em;}
img{display:block;max-width:100%;}
a{color:var(--link);text-underline-offset:3px;}
a:hover{text-decoration-thickness:2px;}
button,input,select,textarea{font:inherit;color:inherit;}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}   /* anneau de focus Astryx : 2 px, décalé de 3 px */
h1,h2,h3{text-wrap:balance;margin:0;}
p{margin:0;}
::selection{background:var(--accent-soft);}
.wrap{max-width:1040px;margin-inline:auto;padding-inline:20px;}
main.wrap{padding-block:28px 64px;display:grid;gap:24px;}
main.wrap > *{min-width:0;}
main:focus{outline:none;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.num{font-variant-numeric:tabular-nums;}
.muted{color:var(--ink-soft);}
.nowrap{white-space:nowrap;}
.label{font-size:var(--fs-md);color:var(--ink-soft);font-weight:500;}
.label a{color:inherit;}
/* Le nom de la page est déjà dans la navigation : on ne garde au-dessus du titre que les fils d'Ariane. */
.page-head > .label:not(:has(a)){display:none;}

/* En-tête : sélecteur d'applis, menu de l'appli (« Mon chien » à droite), compte */
.site-header{position:sticky;top:0;z-index:20;background:var(--surface);border-bottom:1px solid var(--line-soft);}
.site-header__row{display:flex;align-items:stretch;gap:12px;min-height:var(--header-h);}
.appswitch{align-self:center;display:inline-flex;align-items:center;gap:10px;margin-left:-6px;padding:5px 8px 5px 6px;border:none;border-radius:var(--radius);background:none;color:var(--ink);cursor:pointer;text-align:left;}
.appswitch:hover{background:var(--hover);}
.appswitch--static{cursor:default;}
.appswitch--static:hover{background:none;}
.appswitch:active{background:var(--pressed);}
.appswitch__text{display:grid;line-height:1.15;}
.appswitch__text b{font-size:var(--fs-lg);font-weight:700;letter-spacing:-.01em;}
.appswitch__text span{font-size:var(--fs-sm);font-weight:600;color:var(--link);white-space:nowrap;}
.brand__logo{display:block;flex:none;height:30px;width:auto;}
.logo-i{fill:var(--logo-ink);}
.logo-a{fill:var(--logo-blue);}
.chev{width:12px;height:12px;flex:none;color:var(--ink-soft);}
.nav{order:2;display:flex;align-items:stretch;gap:2px;overflow-x:auto;scrollbar-width:none;margin-left:auto;}
.nav::-webkit-scrollbar{display:none;}
.nav a,.nav__group{font:inherit;font-size:var(--fs-md);font-weight:500;color:var(--ink-soft);text-decoration:none;display:flex;align-items:center;gap:4px;padding:2px 10px 0;border:none;border-bottom:2px solid transparent;background:none;white-space:nowrap;cursor:pointer;}
.nav a:hover,.nav__group:hover{color:var(--ink);}
.nav a[aria-current="page"],.nav__group[aria-current]{color:var(--ink);font-weight:600;border-bottom-color:var(--accent);}
.nav__dog{margin-left:8px;}
.usermenu{order:3;align-self:center;display:inline-flex;align-items:center;gap:8px;padding:4px 6px 4px 4px;border:none;border-radius:var(--radius-full);background:none;color:var(--ink);cursor:pointer;font-size:var(--fs-md);font-weight:600;}
.usermenu:hover{background:var(--hover);}
.usermenu__avatar{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:var(--fs-md);}
.usermenu__name{max-width:12ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
@media (max-width:720px){
  .site-header__row{flex-wrap:wrap;gap:0 12px;padding-top:8px;}
  .usermenu{order:1;margin-left:auto;}
  .usermenu__name{display:none;}
  .nav{order:3;margin-left:-10px;width:calc(100% + 20px);}
  .nav a,.nav__group{padding:12px 5px 10px;font-size:var(--fs-md);gap:2px;}
  .nav__dog{margin-left:0;}
}
/* Téléphones étroits : le menu tient sur une ligne, « Mon chien » reste visible à droite. */
@media (max-width:400px){ .nav .chev{width:9px;} .nav__group{gap:1px;} }
@media (max-width:380px){ .nav .chev{display:none;} }

/* Menus déroulants (popover) */
.menu{position:fixed;inset:auto;margin:0;min-width:210px;max-width:calc(100vw - 16px);padding:6px;border:1px solid var(--line-soft);border-radius:var(--radius-container);background:var(--surface);color:var(--ink);box-shadow:var(--shadow-high);}
.menu__title{margin:0;padding:6px 12px 6px;font-size:var(--fs-sm);font-weight:600;color:var(--ink-soft);}
.menu__item{display:block;width:100%;padding:10px 12px;border:none;border-radius:var(--radius);background:none;color:var(--ink);font:inherit;font-size:var(--fs-md);font-weight:500;text-align:left;text-decoration:none;cursor:pointer;}
.menu__item:hover{background:var(--hover);}
.menu__item[aria-current]{background:var(--accent-soft);font-weight:650;}
.menu--apps{min-width:260px;}
.menu__app{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--radius);color:var(--ink);text-decoration:none;}
.menu__app:hover{background:var(--hover);}
.menu__app[aria-current]{background:var(--surface-2);box-shadow:inset 3px 0 0 var(--dot);}
.menu__app b{display:block;font-weight:650;}
.menu__app small{display:block;font-size:var(--fs-sm);color:var(--ink-soft);}
.menu__dot{flex:none;width:14px;height:14px;border-radius:50%;background:var(--dot);}

/* Titres de page */
.page-head{display:grid;gap:8px;}
.page-title{font-weight:650;font-size:clamp(1.9rem,6.4vw,2.6rem);line-height:1.12;letter-spacing:-.02em;}
.page-title em{font-style:normal;color:inherit;}
.page-sub{font-size:var(--fs-base);color:var(--ink-soft);max-width:62ch;}

/* Pied de page */
.site-footer{border-top:1px solid var(--line-soft);background:var(--surface);padding-block:24px 48px;}
.site-footer p{font-size:var(--fs-sm);color:var(--ink-soft);max-width:78ch;}
.site-footer p + p{margin-top:8px;}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;}
}
@media print{
  .site-header,.site-footer,.no-print{display:none!important;}
  body{background:#fff;color:#000;}
  .panel{border-color:#999;box-shadow:none;}
}