/* Réinitialisation minimale + structure de base, reprises de design/css/bundle.css.
   Écarts volontaires par rapport aux maquettes (consignes CLAUDE.md §6) :
   - @container pcc (min-width:1024px) → @media (min-width:1024px)
   - .pcc-viewport n'a plus de "container" (inutile sans @container)
   - la règle sc-for,sc-if,dc-import{display:contents} (outil de maquettage) a été retirée */

*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-text);font-size:17px;line-height:27px;-webkit-text-size-adjust:100%}
img,svg{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,h4,p{margin:0}
a{color:inherit}

.pcc-viewport{background:var(--bg);color:var(--ink);font-family:var(--font-text);font-size:17px;line-height:27px;-webkit-text-size-adjust:100%;
  --accent:var(--ink);--accent-strong:var(--ink);--accent-tint:var(--surface-sunken);--on-accent:var(--surface)}
[data-species="chien"]{--accent:var(--dog);--accent-strong:var(--dog-strong);--accent-tint:var(--dog-tint);--on-accent:var(--on-dog)}
[data-species="chat"]{--accent:var(--cat);--accent-strong:var(--cat-strong);--accent-tint:var(--cat-tint);--on-accent:var(--on-cat)}
.pcc-viewport :focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.pcc-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pcc-dot{flex:none;box-sizing:border-box;width:12px;height:12px;border:1.5px solid var(--ink);border-radius:50%;background:var(--accent)}
.pcc-dot--chien{background:var(--dog)}
.pcc-dot--chat{background:var(--cat)}

/* Mise en page générale d'une page (contenu + colonne latérale) */
.pcc-main{padding:var(--space-4) var(--space-4) var(--space-8)}
.pcc-aside{display:none}
.pcc-h1{margin:0 0 var(--space-3);font:600 32px/38px var(--font-display)}
.pcc-lead{margin:0 0 var(--space-5);font-size:19px;line-height:29px}
@media (min-width:1024px){
  .pcc-main{display:grid;grid-template-columns:minmax(0,1fr) var(--sidebar);gap:var(--space-7);max-width:calc(var(--content-max) + 64px);margin:0 auto;padding:var(--space-5) 32px var(--space-8)}
  .pcc-main--full{display:block}
  .pcc-aside{display:block}
  .pcc-h1{font-size:44px;line-height:50px}
}