@font-face { font-family: "Inter"; src: url("polices/inter.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("polices/source-serif-4.woff2") format("woff2"); font-weight: 200 900; font-display: swap; }
:root { --rayon: .5rem; --espace: 1rem; --largeur: 70rem; }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: var(--police, system-ui, sans-serif); color: var(--couleur-texte, #1f2937); background: var(--couleur-fond, #fff); line-height: 1.6; }
a { color: var(--couleur-principale, #1d4ed8); }
a:focus-visible, button:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }
header, main, footer { max-width: var(--largeur); margin: 0 auto; padding: var(--espace); }
.btn, button { display: inline-block; padding: .6em 1.2em; border: 0; border-radius: var(--rayon); background: var(--couleur-principale, #1d4ed8); color: #fff; text-decoration: none; }
footer { border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent); font-size: .9rem; }
/* Famille « artisan » : sobre, angles francs, titres robustes. */
.famille-artisan { --rayon: .25rem; }
.famille-artisan h1, .famille-artisan h2 { font-weight: 800; letter-spacing: -.01em; }
/* Famille « restauration » : arrondie, aérée, titres centrés. */
.famille-restauration { --rayon: 1.5rem; --espace: 1.5rem; }
.famille-restauration h1, .famille-restauration h2 { text-align: center; font-weight: 500; }
.famille-restauration header { text-align: center; }
/* Famille « beauté et bien-être » : très arrondie, titres légers et espacés, en-tête centré. */
.famille-beaute { --rayon: 2rem; --espace: 1.75rem; }
.famille-beaute h1, .famille-beaute h2 { font-weight: 300; letter-spacing: .06em; text-transform: uppercase; text-align: center; }
.famille-beaute header { text-align: center; }
/* Famille « santé » : sobre et rassurante, texte large, angles légèrement arrondis. */
.famille-sante { --rayon: .5rem; --largeur: 60rem; }
body.famille-sante { font-size: 1.0625rem; line-height: 1.75; }
.famille-sante h1, .famille-sante h2 { font-weight: 600; }
/* Famille « commerce » : dense, large, titres francs, boutons carrés. */
.famille-commerce { --rayon: 0; --espace: .75rem; --largeur: 80rem; }
.famille-commerce h1, .famille-commerce h2 { font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.famille-commerce header { border-bottom: 3px solid var(--couleur-principale); }
/* Famille « indépendant / services » : éditoriale, colonne de lecture étroite. */
.famille-services { --rayon: .375rem; --largeur: 52rem; --espace: 1.25rem; }
.famille-services h1, .famille-services h2 { font-weight: 650; letter-spacing: -.02em; }
.famille-services header { border-bottom: 1px solid color-mix(in srgb, currentColor 20%, transparent); }
a.skip, body > a:first-child { position: absolute; left: -999px; }
body > a:first-child:focus { left: var(--espace); top: var(--espace); background: var(--couleur-fond, #fff); padding: .5em; z-index: 10; }
.annonce { margin: 0; padding: .6em var(--espace); text-align: center; background: var(--couleur-texte, #1f2937); color: var(--couleur-fond, #fff); }

.galerie-grille { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.galerie-grille figure { margin: 0; }
.galerie-grille img { display: block; width: 100%; height: auto; border-radius: 0.5rem; }
.galerie-grille figcaption { font-size: 0.9rem; margin-top: 0.25rem; }