/* ===== Les Gardiens du Midi — feuille de style commune ===== */
:root{
  --fond:#f6f4ee; --creme:#fbfaf6; --encre:#2c332a; --gris:#6d746a;
  --vert:#5a7052; --vert-fonce:#3f5139; --vert-pale:#e7ede2; --terre:#b0714a; --ligne:#e2e0d6;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Inter',-apple-system,'Segoe UI',sans-serif; background:var(--fond); color:var(--encre); line-height:1.7; font-size:16px;}
h1,h2,h3{font-family:'Fraunces','Georgia',serif; font-weight:600; line-height:1.18;}
a{color:inherit;}
.cadre{max-width:1080px; margin:0 auto; padding:0 24px;}

/* Barre annonce */
.annonce{background:var(--vert-fonce); color:#eef2e8; text-align:center; font-size:13.5px; padding:9px 16px;}
.annonce a{color:#fff; font-weight:600;}

/* Navigation */
nav{background:rgba(246,244,238,.94); backdrop-filter:blur(8px); border-bottom:1px solid var(--ligne); position:sticky; top:0; z-index:20;}
nav .cadre{display:flex; align-items:center; justify-content:space-between; height:74px; gap:16px;}
.marque{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--encre);}
.marque .rond{width:44px; height:44px; border-radius:50%; background:var(--vert); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-size:20px; flex-shrink:0;}
.marque .logo-img{height:48px; width:auto; display:block;}
.marque .nom{font-family:'Fraunces',serif; font-size:18px; font-weight:600; line-height:1.1; white-space:nowrap;}
.marque .nom small{display:block; font-family:'Inter',sans-serif; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--gris); font-weight:500;}
.menu{display:flex; gap:24px; list-style:none; align-items:center;}
.menu > li{position:relative;}
.menu a{text-decoration:none; font-size:14.5px; color:var(--gris); padding:8px 0; display:block;}
.menu a:hover, .menu a.actif{color:var(--vert-fonce);}
.sous{position:absolute; top:100%; left:-14px; background:var(--creme); border:1px solid var(--ligne); border-radius:10px; padding:8px; min-width:180px; box-shadow:0 12px 30px rgba(44,51,42,.1); display:none;}
.menu li:hover .sous{display:block;}
.sous a{padding:8px 12px; border-radius:6px; font-size:14px;}
.sous a:hover{background:var(--vert-pale);}
.cta{background:var(--terre); color:#fff !important; padding:10px 18px !important; border-radius:999px; font-weight:600;}
.cta:hover{background:#985c39;}
.burger{display:none; background:none; border:0; font-size:26px; cursor:pointer; color:var(--vert-fonce);}
@media(max-width:860px){
  .menu{position:fixed; inset:74px 0 auto 0; background:var(--creme); flex-direction:column; align-items:stretch; gap:0; padding:8px 24px 20px; border-bottom:1px solid var(--ligne); display:none;}
  .menu.ouvert{display:flex;}
  .menu a{padding:12px 0; border-bottom:1px solid var(--ligne);}
  .sous{position:static; display:block; border:0; box-shadow:none; padding:0 0 0 16px; background:transparent;}
  .burger{display:block;}
}

/* Hero */
.hero{position:relative; min-height:520px; display:flex; align-items:center; color:#fff; text-align:center;}
.hero::before{content:""; position:absolute; inset:0; background:linear-gradient(rgba(30,40,28,.5),rgba(30,40,28,.62)), var(--hero-img) center/cover; z-index:-1;}
.hero .contenu{max-width:700px; margin:0 auto; padding:90px 24px;}
.hero .sur{letter-spacing:.22em; text-transform:uppercase; font-size:13px; margin-bottom:16px; color:#e0e8d8;}
.hero h1{font-size:clamp(36px,6vw,60px); margin-bottom:20px;}
.hero p{font-size:18px; max-width:520px; margin:0 auto 32px; color:#f0f3ec;}
.btn{display:inline-block; padding:14px 30px; border-radius:999px; text-decoration:none; font-weight:600; font-size:15.5px; cursor:pointer; border:0;}
.btn-terre{background:var(--terre); color:#fff;}
.btn-terre:hover{background:#985c39;}
.btn-blanc{background:#fff; color:var(--vert-fonce);}
.btn-ligne{border:1.5px solid #fff; color:#fff;}
.btn-vert{background:var(--vert); color:#fff;}
.btn-vert:hover{background:var(--vert-fonce);}

/* Sections */
section{padding:80px 0;}
.sur-titre{font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--terre); font-weight:600; margin-bottom:10px;}
h2.titre{font-size:clamp(28px,3.6vw,40px); margin-bottom:16px;}
.intro{color:var(--gris); max-width:600px; margin-bottom:44px; font-size:16.5px;}
.centre{text-align:center;} .centre .intro{margin-left:auto; margin-right:auto;}

/* Cartes races */
.grille-3{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
@media(max-width:860px){.grille-3{grid-template-columns:1fr;}}
.carte-race{background:var(--creme); border:1px solid var(--ligne); border-radius:16px; overflow:hidden; text-decoration:none; color:inherit; display:block; transition:transform .18s ease, box-shadow .18s ease;}
.carte-race:hover{transform:translateY(-4px); box-shadow:0 16px 36px rgba(44,51,42,.1);}
.carte-race .img{height:220px; background-size:cover; background-position:center;}
.carte-race .txt{padding:22px 24px 26px;}
.carte-race h3{font-size:22px; margin-bottom:8px;}
.carte-race p{font-size:14.5px; color:var(--gris); margin-bottom:14px;}
.carte-race .lien{font-weight:600; color:var(--vert); border-bottom:1.5px solid var(--vert); padding-bottom:1px; font-size:14.5px;}

/* Valeurs */
.valeurs{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
@media(max-width:760px){.valeurs{grid-template-columns:1fr;}}
.valeur{text-align:center; padding:10px;}
.valeur .ico{width:56px; height:56px; margin:0 auto 14px; border-radius:50%; background:var(--vert-pale); color:var(--vert); display:flex; align-items:center; justify-content:center; font-size:26px;}
.valeur h3{font-size:19px; margin-bottom:8px;}
.valeur p{font-size:14.5px; color:var(--gris);}

/* Page race */
.race-hero{background:var(--vert-pale); padding:64px 0;}
.race-hero .sur-titre{color:var(--vert);}
.race-hero h1{font-size:clamp(32px,5vw,52px);}
.fiche{display:grid; grid-template-columns:1.4fr 1fr; gap:48px; align-items:start;}
@media(max-width:820px){.fiche{grid-template-columns:1fr;}}
.fiche .bloc{margin-bottom:26px;}
.fiche h3{font-size:20px; color:var(--vert-fonce); margin-bottom:8px;}
.fiche p{color:var(--gris);}
.encadre{background:var(--creme); border:1px solid var(--ligne); border-radius:16px; padding:26px 28px; position:sticky; top:96px;}
.encadre h3{font-family:'Fraunces',serif; font-size:19px; margin-bottom:16px;}
.encadre .ligne{display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--ligne); font-size:14.5px;}
.encadre .ligne:last-child{border-bottom:0;}
.encadre .ligne span:first-child{color:var(--gris);}
.encadre .ligne span:last-child{font-weight:600; text-align:right;}

/* Chiens (fiches individuelles) */
.chiens{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
@media(max-width:860px){.chiens{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.chiens{grid-template-columns:1fr;}}
.chien{background:var(--creme); border:1px solid var(--ligne); border-radius:16px; overflow:hidden;}
.chien .img{height:260px; background-size:cover; background-position:center;}
.chien .txt{padding:18px 20px 22px;}
.chien h3{font-size:20px; margin-bottom:4px;}
.chien .meta{font-size:14px; color:var(--gris); line-height:1.7;}
.badge{display:inline-block; margin-top:12px; background:var(--terre); color:#fff; font-size:12px; font-weight:700; padding:4px 12px; border-radius:999px;}
.badge.dispo{background:var(--vert);}

/* Contact */
.contact-grille{display:grid; grid-template-columns:1fr 1fr; gap:48px;}
@media(max-width:820px){.contact-grille{grid-template-columns:1fr;}}
.champ{margin-bottom:14px;}
.champ label{display:block; font-size:12.5px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--gris); margin-bottom:5px;}
.champ input, .champ textarea, .champ select{width:100%; padding:12px 14px; border:1px solid var(--ligne); border-radius:10px; font-family:inherit; font-size:15px; background:var(--creme);}
.champ input:focus, .champ textarea:focus, .champ select:focus{outline:2px solid var(--vert); outline-offset:-1px;}
.coord{margin-top:8px;}
.coord .item{display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--ligne); font-size:15px;}
.coord .item .e{width:44px; height:44px; border-radius:50%; background:var(--vert-pale); color:var(--vert); display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0;}
.coord .item strong{display:block; font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--gris);}
.reseaux{display:flex; gap:12px; margin-top:22px;}
.reseaux a{width:46px; height:46px; border-radius:50%; background:var(--vert); color:#fff; display:flex; align-items:center; justify-content:center; text-decoration:none; font-size:19px;}
.reseaux a:hover{background:var(--vert-fonce);}
.note-form{font-size:12.5px; color:var(--gris); margin-top:10px;}

/* Bande CTA */
.bande{background:var(--vert-fonce); color:#fff; text-align:center; padding:70px 24px;}
.bande h2{font-size:clamp(26px,3.6vw,38px); margin-bottom:14px;}
.bande p{color:#d8e2d0; max-width:520px; margin:0 auto 28px;}

/* Partenaires / infos */
.mini-grille{display:grid; grid-template-columns:repeat(3,1fr); gap:32px;}
@media(max-width:700px){.mini-grille{grid-template-columns:1fr;}}
.mini-grille h3{font-size:18px; color:var(--vert-fonce); margin-bottom:8px;}
.mini-grille p{font-size:14.5px; color:var(--gris);}

/* Footer */
footer{background:#20281d; color:#aab5a2; padding:48px 0 28px; font-size:14px;}
footer .cols{display:grid; grid-template-columns:2fr 1fr 1fr; gap:32px; margin-bottom:32px;}
@media(max-width:760px){footer .cols{grid-template-columns:1fr;}}
footer h4{color:#fff; font-family:'Fraunces',serif; font-size:17px; margin-bottom:12px;}
footer a{color:#aab5a2; text-decoration:none;}
footer a:hover{color:#fff;}
footer ul{list-style:none;}
footer li{padding:4px 0;}
footer .bas{border-top:1px solid #34402c; padding-top:20px; text-align:center; font-size:13px; color:#7d8a74;}
footer .bas a{color:#b0714a;}

/* Animations */
@keyframes montee{from{opacity:0; transform:translateY(24px);} to{opacity:1; transform:none;}}
.reveal{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease;}
.reveal.vu{opacity:1; transform:none;}
.hero .contenu > *{animation:montee .8s ease both;}
.hero .sur{animation-delay:.1s;} .hero h1{animation-delay:.25s;} .hero p{animation-delay:.4s;} .hero .btns{animation-delay:.55s;}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1; transform:none;} .hero .contenu > *{animation:none;}}

/* Boutique en ligne */
.boutique-cta{background:var(--vert-pale); padding:82px 0; border-top:1px solid var(--ligne);}
.bq-grille{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; max-width:1000px; margin:0 auto;}
@media(max-width:820px){.bq-grille{grid-template-columns:1fr; gap:30px;}}
.bq-txt .sur-titre{margin-bottom:10px;}
.bq-txt h2{margin-bottom:14px;}
.bq-txt p{color:var(--gris); font-size:16.5px; line-height:1.7; margin:0 0 22px;}
.bq-chips{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 28px; padding:0; list-style:none;}
.bq-chips li{background:#fff; border:1px solid var(--ligne); color:var(--encre); font-size:13px; font-weight:600; padding:7px 15px; border-radius:999px;}
.bq-img{aspect-ratio:4/3; border-radius:20px; background-size:cover; background-position:center; box-shadow:0 20px 44px rgba(44,51,42,.15);}
@media(max-width:820px){.bq-img{aspect-ratio:16/10;}}

.chiens.deux{grid-template-columns:1fr 1fr;}
@media(max-width:560px){.chiens.deux{grid-template-columns:1fr;}}
.race-detail{display:grid; grid-template-columns:1fr 1fr; gap:22px 44px; max-width:960px; margin:0 auto;}
.race-detail .bloc{margin-bottom:0;}
@media(max-width:700px){.race-detail{grid-template-columns:1fr;}}