@font-face{font-family:"Archivo Narrow";font-weight:400;font-style:normal;font-display:swap;src:local("Archivo Narrow"),url(fonts/archivo-narrow-400.woff2) format("woff2")}
:root{--teal:#2da69a;--bouton:#1a7f74;--bouton-fonce:#146a61;--vert:#17534d;--gris:#f2f2f2;--texte:#212529;--doux:#545454;--ligne:#dde2e1;--rayon:5px;
--titre:"Archivo Narrow","Arial Narrow",Arial,sans-serif;--corps:Arial,Helvetica,sans-serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:16px/1.65 var(--corps);color:var(--texte);background:#fff}
img{max-width:100%;height:auto;display:block}
a{color:var(--bouton)}
a:hover{color:var(--vert)}
:focus-visible{outline:3px solid var(--vert);outline-offset:2px}
h1,h2,h3{font-family:var(--titre);font-weight:400;line-height:1.2;color:var(--vert);margin:0 0 .6em}
h1{font-size:2.4rem}
h2{font-size:1.8rem;margin-top:1.6em}
h3{font-size:1.3rem}
h2.petit{font-size:1.3rem;margin-top:1.2em}
.ico{width:1.1em;height:1.1em;flex:none;vertical-align:-.15em}
.conteneur{width:100%;max-width:1140px;margin:0 auto;padding:0 20px}
.etroit{max-width:760px}
.centre{text-align:center}
.saut{position:absolute;left:-999px;top:0;background:#fff;padding:8px 12px;z-index:10}
.saut:focus{left:8px;top:8px}

.barre{background:var(--vert);color:#fff;font-size:.9rem}
.barre-int{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:40px}
.barre a{color:#fff;text-decoration:none;display:inline-flex;align-items:center;gap:7px}
.barre a:hover{text-decoration:underline}
.barre-droite{display:flex;align-items:center;gap:16px}
.benevoles{border-left:1px solid rgba(255,255,255,.4);padding-left:16px}

.entete{background:var(--gris);position:relative}
.entete-int{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:84px}
.marque{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--vert);font:1.7rem var(--titre)}
.marque .ico{width:1.6em;height:1.6em;color:var(--teal)}
.marque img{height:56px;width:auto}
.menu{display:flex;align-items:center;gap:6px}
.menu a{text-decoration:none;color:var(--texte);font-weight:700;text-transform:uppercase;font-size:.88rem;letter-spacing:.02em;padding:10px 14px;border-radius:var(--rayon)}
.menu a:hover,.menu a[aria-current=page]{color:var(--bouton)}
.menu a.bouton{color:#fff;padding:10px 18px}
.menu a.bouton:hover{color:#fff}
.menu-bouton{display:none;background:none;border:0;padding:8px;color:var(--vert);cursor:pointer}
.menu-bouton .ico{width:1.6rem;height:1.6rem}

.bouton{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--bouton);color:#fff;border:2px solid var(--bouton);border-radius:var(--rayon);padding:11px 22px;font:700 .95rem var(--corps);text-decoration:none;cursor:pointer}
.bouton:hover{background:var(--bouton-fonce);border-color:var(--bouton-fonce);color:#fff}
.bouton-contour{background:transparent;color:var(--bouton)}
.bouton-contour:hover{color:#fff}
.bouton-clair{background:#fff;color:var(--vert);border-color:#fff}
.bouton-clair:hover{background:var(--gris);color:var(--vert);border-color:var(--gris)}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}

.hero{background:var(--vert);color:#fff;padding:72px 0}
.hero h1{color:#fff;font-size:3rem;max-width:18ch}
.hero p{max-width:60ch;font-size:1.1rem}
.hero-photo{background:linear-gradient(rgba(23,83,77,.82),rgba(23,83,77,.82)),url(img/hero.jpg) center/cover}

.section{padding:56px 0}
.section-gris{background:var(--gris)}
.section h2:first-child{margin-top:0}
.info{background:var(--gris);border-left:4px solid var(--teal);padding:14px 18px;border-radius:var(--rayon)}
.fil{color:var(--doux);font-size:.9rem;margin:0 0 20px}
.liste{padding-left:1.2em}
.texte-long h2{font-size:1.4rem}
.texte{white-space:normal}

.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:24px;margin:28px 0}
.carte{background:#fff;border:1px solid var(--ligne);border-radius:var(--rayon);overflow:hidden}
.carte a{display:block;color:inherit;text-decoration:none}
.carte:hover{border-color:var(--teal);box-shadow:0 4px 14px rgba(0,0,0,.08)}
.carte img,.carte-vide{aspect-ratio:4/3;width:100%;object-fit:cover}
.carte-vide{display:flex;align-items:center;justify-content:center;background:var(--gris);color:#b5c4c1}
.carte-vide .ico{width:3rem;height:3rem}
.carte-vide.grand{border-radius:var(--rayon)}
.carte-corps{display:block;padding:14px 16px 18px}
.carte h3{margin:6px 0 2px}
.carte-meta{color:var(--doux);font-size:.9rem}
.etiquette{display:inline-block;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:3px 9px;border-radius:3px;background:#e3f3f1;color:var(--vert)}
.etiquette-reserve{background:#fdf0d5;color:#7a5200}
.etiquette-adopte{background:#e9ecef;color:#495057}

.onglets{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 4px}
.onglets a{padding:8px 18px;border:1px solid var(--ligne);border-radius:999px;text-decoration:none;color:var(--texte);font-weight:700;font-size:.9rem}
.onglets a[aria-current=page]{background:var(--bouton);border-color:var(--bouton);color:#fff}

.etapes{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:28px;margin:28px 0}
.etapes .ico{width:2.2rem;height:2.2rem;color:var(--teal)}
.etapes p{margin:0;color:var(--doux)}

.fiche{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px;align-items:start}
.galerie-grande img{width:100%;border-radius:var(--rayon);aspect-ratio:4/3;object-fit:cover}
.vignettes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px}
.vignettes img{border-radius:var(--rayon);width:100%;aspect-ratio:4/3;object-fit:cover}
.infos{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:18px 0}
.infos div{background:var(--gris);border-radius:var(--rayon);padding:10px 14px}
.infos dt{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--doux)}
.infos dd{margin:0;font-weight:700;overflow-wrap:anywhere}
.rib{grid-template-columns:1fr}

.deux{display:grid;grid-template-columns:1fr 1.2fr;gap:48px}
.coordonnees{list-style:none;padding:0}
.coordonnees li{display:flex;align-items:center;gap:10px;margin:10px 0}
.coordonnees .ico{color:var(--teal)}

.formulaire label{display:block;font-weight:700;font-size:.92rem;margin-bottom:16px}
.formulaire input[type=text],.formulaire input[type=email],.formulaire input[type=tel],.formulaire select,.formulaire textarea{display:block;width:100%;margin-top:6px;padding:10px 12px;font:1rem var(--corps);border:1px solid #b9c2c0;border-radius:var(--rayon);background:#fff;color:var(--texte)}
.formulaire input:focus,.formulaire select:focus,.formulaire textarea:focus{outline:3px solid rgba(45,166,154,.4);border-color:var(--bouton)}
.ligne{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.case{display:flex!important;gap:10px;align-items:flex-start;font-weight:400!important}
.case input{margin-top:5px;flex:none}
.erreur{display:block;color:#b02a37;font-weight:400;font-size:.88rem;margin-top:4px}
.aide{font-size:.85rem;color:var(--doux)}
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.alerte{display:flex;gap:12px;align-items:flex-start;padding:14px 18px;border-radius:var(--rayon);margin:18px 0}
.alerte .ico{width:1.5rem;height:1.5rem;margin-top:2px}
.alerte-ok{background:#e3f3f1;color:var(--vert)}
.alerte-ko{background:#fbe9eb;color:#8a1f2b}

.pied{background:var(--vert);color:#dbe9e7;margin-top:0;font-size:.94rem}
.pied a{color:#fff}
.pied-int{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;padding-top:44px;padding-bottom:28px}
.pied strong{display:block;color:#fff;font:1.3rem var(--titre);margin-bottom:8px}
.pied ul{list-style:none;padding:0;margin:0}
.pied li{margin:6px 0}
.pied p{margin:0}
.pied-bas{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;border-top:1px solid rgba(255,255,255,.2);padding-top:16px;padding-bottom:20px;font-size:.85rem}

@media (max-width:860px){
  h1{font-size:2rem}.hero h1{font-size:2.3rem}
  .fiche,.deux{grid-template-columns:1fr;gap:28px}
  .pied-int{grid-template-columns:1fr}
  .ligne{grid-template-columns:1fr}
  .barre span span{display:none}
  .barre .benevoles span{display:inline}
  .js .menu-bouton{display:block}
  .js .menu{display:none;position:absolute;left:0;right:0;top:100%;z-index:5;flex-direction:column;align-items:stretch;background:var(--gris);padding:8px 20px 16px;border-top:1px solid var(--ligne);box-shadow:0 8px 14px rgba(0,0,0,.08)}
  .js .menu.ouvert{display:flex}
  .menu a.bouton{text-align:center;margin-top:6px}
  .barre-int>a span{display:none}
}
@media (prefers-reduced-motion:no-preference){.bouton,.carte{transition:background .15s,border-color .15s,box-shadow .15s}}