/* maquettes/shared/base.css — reset et utilitaires sans decision esthetique */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul[class],ol[class]{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
summary{cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}

:root{
  --container:1200px;
  --pad:clamp(1rem,4vw,2.5rem);
  --gap:1.5rem;
  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;
  --space-5:1.5rem;--space-6:2rem;--space-7:3rem;--space-8:5rem;
}

.container{width:min(var(--container),100% - 2*var(--pad));margin-inline:auto}
.section{padding-block:clamp(3rem,7vw,var(--space-8))}
.section__head{max-width:46rem;margin-bottom:var(--space-6)}
.section__head p{margin-top:var(--space-4)}

.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}

/* Logo inline (sprite #logo-popin) : fill currentColor, recolorable par piste ; fonctionne aussi en file:// */
.logo{display:inline-block;width:132px;line-height:0}
.logo__svg{display:block;width:100%;aspect-ratio:283.46/102.3;fill:currentColor}

/* Icones du sprite */
.icon{width:1.5rem;height:1.5rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* Boutons : geometrie seulement, couleurs dans chaque piste */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.9rem 1.5rem;font-weight:600;line-height:1;white-space:nowrap;transition:transform .15s,background .15s,color .15s}
.btn:active{transform:translateY(1px)}

/* Badge des contenus a fournir par le client */
.badge-todo{display:inline-block;padding:.2rem .55rem;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;background:#FFE9A8;color:#6B4E00;border:1px dashed #C49A1A}

/* Rails : grille sur desktop, slider a defilement horizontal sur mobile */
.rail{display:grid;gap:var(--gap)}
.rail--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.rail--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.rail--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.rail--5{grid-template-columns:repeat(5,minmax(0,1fr))}
.rail-dots{display:none}
@media (max-width:1023px){
  .rail--4,.rail--5{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){
  .rail,.rail--2,.rail--3,.rail--4,.rail--5{
    grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(82%,320px);
    overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
    margin-inline:calc(-1*var(--pad));padding-inline:var(--pad);padding-bottom:var(--space-2)}
  .rail::-webkit-scrollbar{display:none}
  .rail>*{scroll-snap-align:start}
  .rail-dots{display:flex;justify-content:center;gap:.5rem;margin-top:var(--space-4)}
  .rail-dots button{width:.6rem;height:.6rem;border-radius:50%;background:currentColor;opacity:.25}
  .rail-dots button[aria-current="true"]{opacity:1}
}

/* Menu mobile : mecanique d'affichage, l'esthetique reste dans la piste */
.nav-toggle{display:none}
@media (max-width:1023px){
  .nav-toggle{display:inline-flex;align-items:center;gap:.5rem}
  .site-nav{display:none}
  body.nav-open .site-nav{display:flex;flex-direction:column;position:fixed;inset:0;z-index:50;padding:5rem var(--pad) var(--pad);gap:var(--space-4);overflow:auto}
  body.nav-open{overflow:hidden}
}

:focus-visible{outline:3px solid currentColor;outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}