/* Chasse La Bécasse de Santa Fé — PROPOSITION DE REFONTE (13/09/2026)
   Arthur : « je veux que ça ressemble à une refonte, pas qu'on croie à un clone. Sans perdre
   les codes de la chasse. » Ce qui change, et pourquoi :
   · une PALETTE DE TERRAIN au lieu du blanc plat — papier calcaire, écorce de sous-bois, olive,
     et l'or des filets. Son rouge #8B0000 est CONSERVÉ : c'est son identité.
   · des SECTIONS SOMBRES en alternance : c'est ce qui donne la profondeur qui manquait.
   · les GALERIES ne coupent plus RIEN et sont pourtant alignées — rangée à hauteur commune,
     image entière posée dessus. C'était la remarque d'Arthur, deux fois.
   · une SIGNATURE : la silhouette de la bécasse, leur oiseau, en ornement sous les titres.
   · zéro JavaScript, zéro image de décor — les ornements sont du SVG en ligne.
   ⚠️ Contrastes mesurés : encre/papier 9,67 · rouge/papier 8,97 · sable/écorce 8,79 ·
      crème/olive 4,81. L'or #b08a4a ne sert QUE de filet, jamais de texte (2,86 sur papier).
------------------------------------------------------------------------------------------------*/
@font-face{font-family:'Josefin Slab';src:url(/fonts/josefinslab.woff2) format('woff2');font-weight:300 700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Oswald;src:url(/fonts/oswald.woff2) format('woff2');font-weight:300 600;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Open Sans';src:url(/fonts/opensans.woff2) format('woff2');font-weight:300 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Pochoir;src:url(/fonts/stencil.woff2) format('woff2');font-weight:700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ⚠️ `margin-block`, JAMAIS le raccourci `margin: X 0` — c'est un bug qui a survécu à trois
   signalements d'Arthur (13/09). Ces blocs PORTENT la classe `.wrap`, qui se centre avec
   `margin-inline:auto` ; un raccourci `margin` remet les marges latérales à ZÉRO et écrase ce
   centrage. Résultat invisible à 1280 px (120 px perdus à droite), mais à 2560 px la galerie
   était collée au bord gauche avec **1400 px de vide à droite**.
   📌 La leçon : je rendais mes contrôles à 1280 px seulement — tout était vert pendant que
   l'écran d'Arthur était bancal. Un contrôle qui ne teste pas SON écran ne prouve rien. */
/* Socle
---------------------------------------------------------------------------*/
:root{--rouge:#8B0000;--encre:#3a3f36;--papier:#f7f2e7;--sable:#e8dcc6;--ecorce:#2f3a2c;--olive:#5c6b47;--or:#b08a4a;--or-clair:#d8b877;--creme:#f2ead9}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--papier);color:var(--encre);font-family:'Josefin Slab',Georgia,'Times New Roman',serif;font-size:21px;font-weight:500;line-height:1.75;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block;margin-inline:auto}
a{color:var(--rouge)}
h1,h2,h3{margin:0;font-weight:600;line-height:1.2}
p{margin:0 0 1em}
.wrap{width:min(1160px,100% - 40px);margin-inline:auto}
:focus-visible{outline:3px solid var(--rouge);outline-offset:2px}
main strong{color:var(--rouge);font-weight:700}

/* Le menu — bois sombre, liseré d'or
---------------------------------------------------------------------------*/
.menu{background:var(--ecorce);border-bottom:2px solid var(--or)}
.menu ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center}
.menu a{display:block;padding:.7em 1.15em;color:var(--creme);text-decoration:none;font-family:Oswald,'Open Sans',Arial,sans-serif;font-size:17px;font-weight:400;letter-spacing:.8px;text-transform:uppercase}
.menu a:hover,.menu a[aria-current]{color:var(--papier);background:var(--olive)}

/* La bannière — plus haute, assise sur un dégradé, son nom au pochoir
---------------------------------------------------------------------------*/
.banniere{position:relative;overflow:hidden;background:var(--ecorce)}
.banniere .fond{width:100%;height:clamp(300px,42vw,580px);object-fit:cover;object-position:center 45%}
.banniere::after{content:"";position:absolute;inset:auto 0 0;height:52%;background:linear-gradient(to top,rgba(28,34,26,.82),rgba(28,34,26,0));pointer-events:none}
.banniere .titre{position:absolute;inset:0;display:grid;place-items:start center;padding-top:clamp(10px,2.4vw,30px);z-index:2}
.banniere h1,.banniere .nom{color:#fff;font-family:'Josefin Slab',Georgia,serif;font-weight:300;font-size:clamp(34px,6vw,86px);letter-spacing:clamp(6px,1.6vw,22px);text-shadow:0 2px 18px rgba(0,0,0,.6);margin:0}
.banniere .logo{position:absolute;left:50%;top:clamp(70px,13vw,164px);transform:translateX(-50%);width:clamp(110px,14vw,180px);height:auto;box-shadow:0 4px 18px rgba(0,0,0,.45);z-index:3}
.accroche{position:absolute;left:0;right:0;bottom:clamp(14px,2.4vw,30px);z-index:3;text-align:center;color:var(--creme);font-family:Oswald,'Open Sans',Arial,sans-serif;font-size:clamp(13px,1.5vw,19px);letter-spacing:clamp(2px,.5vw,6px);text-transform:uppercase;text-shadow:0 2px 10px rgba(0,0,0,.7);margin:0}

/* Le bandeau des chiffres — ce qui définit le domaine, en un regard
---------------------------------------------------------------------------*/
.chiffres{background:var(--sable);border-bottom:1px solid rgba(176,138,74,.4)}
.chiffres ul{list-style:none;margin:0;padding:clamp(18px,2.4vw,30px) 0;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;text-align:center}
.chiffres li{border-left:1px solid rgba(176,138,74,.45)}
.chiffres li:first-child{border-left:0}
.chiffres b{display:block;font-size:clamp(26px,3.4vw,40px);font-weight:700;color:var(--rouge);line-height:1.1}
.chiffres span{display:block;font-family:Oswald,'Open Sans',Arial,sans-serif;font-size:14px;letter-spacing:1.4px;text-transform:uppercase;color:#556241;margin-top:.25em}  /* olive assombri de 8 % ICI SEULEMENT : sur le sable, var(--olive) donne 4,24 pour un seuil
     de 4,5 (14 px, normal). Mesure axe-core le 13/09. Ailleurs l olive passe, on ne touche pas
     a la variable. Ici : 4,82. */
@media (max-width:700px){.chiffres ul{grid-template-columns:repeat(2,1fr);gap:18px 10px}.chiffres li:nth-child(3){border-left:0}}

/* Corps de page — une section sur deux dans le sous-bois
---------------------------------------------------------------------------*/
.sec{padding:clamp(40px,5vw,76px) 0}
.sec.sombre{background:var(--ecorce);color:var(--creme)}
.sec.sombre h1,.sec.sombre h2,.sec.sombre h3{color:var(--or-clair)}
.sec.sombre strong{color:var(--or-clair)}
.sec.sombre a{color:var(--or-clair)}
.sec.sombre .legende{color:#c9c3b2}
.sec h1,.sec h2,.sec h3{color:var(--rouge);font-size:clamp(26px,3vw,38px);font-weight:700;margin:0 0 .5em;letter-spacing:.3px}

/* L'ornement : la bécasse, leur oiseau, sous chaque titre de section
---------------------------------------------------------------------------*/
.sec h1::after,.sec h2::after{content:"";display:block;width:118px;height:14px;margin:.5em 0 0;background:var(--olive);opacity:.85;-webkit-mask:var(--becasse) center/contain no-repeat;mask:var(--becasse) center/contain no-repeat}
.sec.sombre h1::after,.sec.sombre h2::after{background:var(--or)}
.texte[style*=center] h1::after,.texte[style*=center] h2::after,.note h2::after{margin-inline:auto}
:root{--becasse:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 236 28'%3E%3Cpath d='M0 14h78M158 14h78' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M96 20c-4-1-7-4-7-8 0-5 5-9 12-9 4 0 7 1 10 3l17-5-14 8c2 2 3 4 3 6 0 4-3 7-8 8l-4 4-2-4c-3 0-5 0-7-1z'/%3E%3C/svg%3E")}

.duo{display:grid;grid-template-columns:320px 1fr;gap:clamp(24px,3.4vw,54px);align-items:start}
@media (max-width:820px){.duo{grid-template-columns:1fr}}
.texte p:last-child{margin-bottom:0}

/* Le bloc note — la carte crème, posée comme une fiche
---------------------------------------------------------------------------*/
.note{background:var(--sable);border-radius:0 22px 22px 22px;border-left:4px solid var(--or);padding:28px 24px 32px;text-align:center;font-size:19px;line-height:1.6;box-shadow:0 4px 20px rgba(47,58,44,.15)}
.note h2{font-family:'Josefin Slab',Georgia,serif;color:var(--rouge);font-size:30px;font-weight:700;margin:0 0 .8em;text-align:center}
.note p{margin:0 0 .15em}
.note .t{margin-top:1.1em;font-weight:700;color:var(--olive)}
.note a{color:var(--rouge);white-space:nowrap}

/* LES GALERIES — rien n'est coupé, et tout est pourtant aligné.
   C'est la remarque d'Arthur, et voici la réponse : la RANGÉE a une hauteur commune, l'image
   s'y pose ENTIÈRE (`contain`) sur un fond sable. Un portrait garde ses marges, un paysage
   remplit — mais la ligne du bas est droite, et aucune tête n'est coupée.
---------------------------------------------------------------------------*/
.trois,.deux{display:grid;gap:16px;margin-block:clamp(26px,3.4vw,44px)}
.trois{grid-template-columns:repeat(3,1fr)}
.deux{grid-template-columns:repeat(2,1fr)}
.trois img,.deux img{width:100%;height:100%;object-fit:contain;background:var(--sable);border:1px solid rgba(176,138,74,.35);border-radius:8px;box-shadow:0 4px 18px rgba(47,58,44,.17)}
.trois img{aspect-ratio:4/3}
.deux img{aspect-ratio:3/2}
.sec.sombre .trois img,.sec.sombre .deux img,.sec.sombre .pleine img{background:#26301f;border-color:rgba(176,138,74,.3)}
@media (max-width:700px){.trois,.deux{grid-template-columns:1fr}}
.pleine{margin-block:clamp(26px,3.4vw,44px)}
/* ⚠️ UNE GRANDE IMAGE NE S'AFFICHE JAMAIS PLUS LARGE QUE SA SOURCE — mesuré le 13/09.
   `.pleine` occupait 1160 px alors que ces photos font 1200 px au mieux (×1,03), et 616 px
   pour l'une d'elles : elle était donc ÉTIRÉE ×1,88. C'est ça qu'Arthur voyait « pixélisé ».
   `width:auto` laisse l'attribut `width` de la balise commander : une image plus petite que
   le plafond s'affiche à SA taille, nette, centrée. Le plafond de 780 px garde du souffle
   sans jamais agrandir. */
.pleine img{width:auto;max-width:min(100%,780px);border-radius:10px;border:1px solid rgba(176,138,74,.35);box-shadow:0 6px 26px rgba(47,58,44,.22)}
.legende{text-align:center;font-size:17px;font-style:italic;color:#6b6f62;margin:.6em 0 0}

/* Le grand titre au pochoir — il s'affiche maintenant sur le sous-bois
---------------------------------------------------------------------------*/
.sec h2.pochoir,.sec.sombre h2.pochoir,.pochoir{font-family:Pochoir,'Josefin Slab',Georgia,serif;color:var(--or-clair);font-size:clamp(30px,5vw,62px);line-height:1.14;font-weight:700;text-align:center;text-transform:uppercase;letter-spacing:3px;max-width:20ch;margin:0 auto}
.sec.bref{padding:clamp(44px,5.4vw,76px) 0 clamp(30px,3.4vw,44px)}
.sec.bref + .sec.pochoir-bloc{padding-top:0}
.sec.pochoir-bloc{background:var(--ecorce);padding:clamp(20px,2.6vw,40px) 0 clamp(48px,5.6vw,86px)}
.sec.pochoir-bloc h2::after{display:none}
.filets{display:block;width:200px;height:12px;margin:1.1em auto 0;background:var(--or);opacity:.9;-webkit-mask:var(--becasse) center/contain no-repeat;mask:var(--becasse) center/contain no-repeat}

/* Les boutons vers l'extérieur — feux de forêt, mémento sécurité
---------------------------------------------------------------------------*/
.boutons{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:.4em 0 1em}
.bouton{display:inline-block;padding:13px 22px;background:var(--rouge);color:var(--papier);text-decoration:none;border-radius:8px;font-family:Oswald,'Open Sans',Arial,sans-serif;font-size:16px;letter-spacing:.6px;text-transform:uppercase;box-shadow:0 3px 12px rgba(47,58,44,.22);transition:background .2s}
.bouton:hover,.bouton:focus{background:var(--ecorce);color:var(--or-clair)}
.bouton.pale{background:var(--olive)}
.bouton.pale:hover,.bouton.pale:focus{background:var(--ecorce)}

/* Le trombinoscope
---------------------------------------------------------------------------*/
.trombi{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:22px 16px;margin-top:1.6em}
.trombi figure{margin:0;text-align:center}
.trombi img{width:100%;aspect-ratio:8/9;object-fit:contain;background:var(--sable);border-radius:8px;border:1px solid rgba(176,138,74,.45);box-shadow:0 4px 14px rgba(47,58,44,.22)}
/* ⚠️ NI ROND NI `cover` — signalé par la cliente le 13/09 : les photos rondes coupaient
   les visages. Le cercle 1/1 en `cover` recadrait les 43 portraits (tous en 0,86-0,92) ;
   le dernier (348×464) perdait le plus — un homme debout avec son chien, coupé.
   Même recette que les galeries : rangée de hauteur commune, image ENTIÈRE dedans. */
.trombi figcaption{margin-top:.55em;font-size:19px;color:var(--rouge);font-weight:700}
.sec.sombre .trombi figcaption{color:var(--or-clair)}

/* Les cinq milieux du territoire
---------------------------------------------------------------------------*/
.milieux{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-block:clamp(22px,3vw,38px)}
@media (max-width:760px){.milieux{grid-template-columns:repeat(2,1fr)}}
.milieux figure{margin:0;text-align:center}
.milieux img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;border:1px solid rgba(176,138,74,.35);box-shadow:0 3px 12px rgba(47,58,44,.16)}
.milieux figcaption{margin-top:.45em;font-family:Oswald,'Open Sans',Arial,sans-serif;font-size:14px;letter-spacing:1.2px;text-transform:uppercase;color:var(--olive);font-weight:400}
.sec.sombre .milieux figcaption{color:var(--or-clair)}

/* Le pied de page
---------------------------------------------------------------------------*/
.pied{background:var(--ecorce);color:#bfc4b4;border-top:2px solid var(--or);padding:2.6em 0;text-align:center;font-size:16px;font-style:italic}
.pied p{margin:0}
.pied a{color:var(--or-clair)}

/* La porte de gestion — une silhouette discrete au bout du menu
---------------------------------------------------------------------------------------------- */
.menu .cnx-li{margin-left:auto}
.menu .cnx{display:flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;border-radius:50%;color:var(--creme);opacity:.85;transition:opacity .2s,background .2s}
.menu .cnx:hover,.menu .cnx:focus-visible{opacity:1;background:rgba(47,58,44,.12)}
.menu .cnx svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Une fiche du trombinoscope sans photo — meme cadre, une initiale a la place du visage
---------------------------------------------------------------------------------------------- */
.trombi .sans-photo .initiale{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:8/9;background:var(--sable);border-radius:8px;border:1px solid rgba(176,138,74,.45);box-shadow:0 4px 14px rgba(47,58,44,.22);font-family:Oswald,'Open Sans',Arial,sans-serif;font-size:2.6rem;color:var(--or)}