/* ==========================================================================
   safiDog — safidog.com
   Palette et typographie dérivées du logo (savane : vert, fauve, sable)
   ========================================================================== */

:root{
  --ink:        #221A11;
  --ink-soft:   #4A3F30;
  --paper:      #F7F3E8;
  --sand:       #EDE5D2;
  --sand-deep:  #E2D7BC;
  --green-deep: #2F3B20;
  --green:      #5C6E3C;
  --green-soft: #8A9A64;
  --fauve:      #C4863C;
  --fauve-deep: #9C6526;
  --white:      #FFFFFF;

  --font-display: "Big Shoulders", "Arial Narrow", sans-serif;
  --font-body:    "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  --radius: 14px;
  --shadow-sm: 0 2px 8px rgba(34,26,17,.08);
  --shadow-md: 0 10px 30px rgba(34,26,17,.14);
  --maxw: 1180px;
  --ease: cubic-bezier(.22,.75,.35,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.65;
  font-size:16.5px;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:var(--green-deep); }
.container{ width:min(var(--maxw), 92vw); margin-inline:auto; }

/* ---------- Typographie ---------- */
h1,h2,h3,.display{
  font-family:var(--font-display);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.015em;
  line-height:.98;
  color:var(--ink);
}
h1{ font-size:clamp(2.9rem, 7.5vw, 5.4rem); }
h2{ font-size:clamp(2.1rem, 4.5vw, 3.3rem); margin-bottom:.5em; }
h3{ font-size:clamp(1.25rem, 2.2vw, 1.6rem); font-weight:700; letter-spacing:.03em; }
p{ color:var(--ink-soft); max-width:62ch; }
.lead{ font-size:clamp(1.05rem, 1.6vw, 1.25rem); }

.eyebrow{
  display:inline-flex; align-items:center; gap:.55em;
  font-weight:800; font-size:.78rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--green);
  margin-bottom:1em;
}
.eyebrow::before{
  content:""; width:1.05em; height:1.05em; flex:none;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12.5c-2.6 0-5 2.2-5 4.7 0 1.6 1.1 2.8 2.7 2.8 1 0 1.6-.4 2.3-.4s1.3.4 2.3.4c1.6 0 2.7-1.2 2.7-2.8 0-2.5-2.4-4.7-5-4.7zM6.2 8.2c-1.1-.3-2.3.6-2.7 2s.2 2.8 1.3 3.1 2.3-.6 2.7-2-.2-2.8-1.3-3.1zm11.6 0c-1.1.3-1.7 1.7-1.3 3.1s1.6 2.3 2.7 2 1.7-1.7 1.3-3.1-1.6-2.3-2.7-2zM9.4 3.6c-1.2.2-1.9 1.6-1.6 3.1s1.4 2.6 2.6 2.4 1.9-1.6 1.6-3.1-1.4-2.6-2.6-2.4zm5.2 0c-1.2-.2-2.3.9-2.6 2.4s.4 2.9 1.6 3.1 2.3-.9 2.6-2.4-.4-2.9-1.6-3.1z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12.5c-2.6 0-5 2.2-5 4.7 0 1.6 1.1 2.8 2.7 2.8 1 0 1.6-.4 2.3-.4s1.3.4 2.3.4c1.6 0 2.7-1.2 2.7-2.8 0-2.5-2.4-4.7-5-4.7zM6.2 8.2c-1.1-.3-2.3.6-2.7 2s.2 2.8 1.3 3.1 2.3-.6 2.7-2-.2-2.8-1.3-3.1zm11.6 0c-1.1.3-1.7 1.7-1.3 3.1s1.6 2.3 2.7 2 1.7-1.7 1.3-3.1-1.6-2.3-2.7-2zM9.4 3.6c-1.2.2-1.9 1.6-1.6 3.1s1.4 2.6 2.6 2.4 1.9-1.6 1.6-3.1-1.4-2.6-2.6-2.4zm5.2 0c-1.2-.2-2.3.9-2.6 2.4s.4 2.9 1.6 3.1 2.3-.9 2.6-2.4-.4-2.9-1.6-3.1z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--font-body); font-weight:800; font-size:.95rem;
  padding:.85em 1.7em; border-radius:999px; text-decoration:none;
  border:2px solid transparent; cursor:pointer;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s;
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn:focus-visible{ outline:3px solid var(--fauve); outline-offset:3px; }
.btn-primary{ background:var(--fauve); color:var(--white); }
.btn-primary:hover{ background:var(--fauve-deep); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:var(--paper); }
.btn-light{ background:var(--paper); color:var(--green-deep); }
.btn-wa{ background:#1FA855; color:#fff; }
.btn-wa:hover{ background:#178a45; }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(10px);
  transition:box-shadow .3s, background .3s;
}
.site-header.scrolled{ box-shadow:var(--shadow-sm); background:var(--paper); }
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:.7rem 0; gap:1rem;
}
.brand{
  display:flex; align-items:center; gap:.65rem; text-decoration:none;
}
.brand img{ width:52px; height:52px; }
.brand span{
  font-family:var(--font-display); font-weight:800; font-size:1.7rem;
  color:var(--ink); letter-spacing:.02em;
}
.brand b{ color:var(--green); }
.nav-links{ display:flex; align-items:center; gap:1.7rem; list-style:none; }
.nav-links a{
  text-decoration:none; color:var(--ink); font-weight:700; font-size:.95rem;
  padding:.3em 0; border-bottom:2px solid transparent;
  transition:border-color .2s, color .2s;
}
.nav-links a:hover, .nav-links a[aria-current="page"]{
  color:var(--green-deep); border-color:var(--fauve);
}
.nav-cta{ display:flex; gap:.6rem; }
.nav-toggle{
  display:none; background:none; border:0; cursor:pointer; padding:.4rem;
}
.nav-toggle span{
  display:block; width:26px; height:3px; background:var(--ink);
  margin:5px 0; border-radius:2px; transition:transform .3s, opacity .3s;
}

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg, var(--paper) 0%, var(--sand) 100%);
}
.hero-grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:3rem;
  align-items:center; padding:4.5rem 0 5.5rem;
}
.hero h1 em{ font-style:normal; color:var(--green); }
.hero h1 .fauve{ color:var(--fauve); }
.hero .lead{ margin:1.4rem 0 2.2rem; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.9rem; }
.hero-badges{
  display:flex; flex-wrap:wrap; gap:1.6rem; margin-top:2.6rem;
}
.hero-badges div strong{
  font-family:var(--font-display); font-size:2rem; font-weight:800;
  display:block; color:var(--green-deep); line-height:1;
}
.hero-badges div small{
  font-size:.78rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-soft);
}
.hero-photo{
  position:relative; border-radius:26px; overflow:hidden;
  box-shadow:var(--shadow-md);
  aspect-ratio:4/4.6;
}
.hero-photo img{ width:100%; height:100%; object-fit:cover; }
.hero-photo::after{
  content:""; position:absolute; inset:0;
  border-radius:26px; border:2px solid rgba(255,255,255,.35); pointer-events:none;
}
.hero-photo .tag{
  position:absolute; left:1.1rem; bottom:1.1rem;
  background:rgba(34,26,17,.78); color:var(--paper);
  padding:.5em 1em; border-radius:999px; font-size:.8rem; font-weight:700;
  letter-spacing:.06em; backdrop-filter:blur(4px);
}

/* Piste — la signature : trace de pistage en pointillés */
.trail{
  position:absolute; inset:0; pointer-events:none; z-index:0;
}
.trail path{
  fill:none; stroke:var(--green-soft); stroke-width:2.5;
  stroke-dasharray:7 11; opacity:.55;
}
.trail .paw{ fill:var(--green-soft); opacity:.55; }
.hero .container, .hero-grid{ position:relative; z-index:1; }

/* ---------- Sections ---------- */
section{ padding:5.5rem 0; position:relative; }
.section-sand{ background:var(--sand); }
.section-deep{ background:var(--green-deep); }
.section-deep h2, .section-deep h3{ color:var(--paper); }
.section-deep p{ color:#D8DCC4; }
.section-deep .eyebrow{ color:var(--fauve); }
.section-head{ max-width:720px; margin-bottom:3rem; }

/* ---------- Cartes services ---------- */
.cards{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1.4rem;
}
.card{
  background:var(--white); border-radius:var(--radius);
  padding:2rem 1.7rem; box-shadow:var(--shadow-sm);
  border-top:4px solid var(--sand-deep);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-top-color:var(--fauve); }
.card .ico{
  width:54px; height:54px; border-radius:14px; display:grid; place-items:center;
  background:var(--sand); margin-bottom:1.2rem;
}
.card .ico svg{ width:28px; height:28px; stroke:var(--green-deep); fill:none; stroke-width:1.8; }
.card h3{ margin-bottom:.5rem; }
.card p{ font-size:.95rem; }
.card a.more{
  display:inline-block; margin-top:1rem; font-weight:800; font-size:.88rem;
  text-decoration:none; color:var(--fauve-deep);
}
.card a.more:hover{ text-decoration:underline; }

/* ---------- Bloc unité cynophile ---------- */
.k9{
  display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:center;
}
.k9-photo{ border-radius:22px; overflow:hidden; box-shadow:var(--shadow-md); aspect-ratio:4/4.8; }
.k9-photo img{ width:100%; height:100%; object-fit:cover; }
.k9 ul{ list-style:none; margin-top:1.6rem; display:grid; gap:.9rem; }
.k9 ul li{
  display:flex; gap:.8rem; align-items:flex-start; color:#D8DCC4; font-weight:600;
}
.k9 ul li::before{
  content:"✓"; flex:none; width:1.5em; height:1.5em; border-radius:50%;
  background:var(--fauve); color:#fff; display:grid; place-items:center;
  font-size:.8em; margin-top:.15em;
}

/* ---------- Races ---------- */
.breeds{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.breed{
  position:relative; border-radius:var(--radius); overflow:hidden;
  aspect-ratio:3/3.8; box-shadow:var(--shadow-sm); background:var(--sand-deep);
}
.breed img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s var(--ease);
}
.breed:hover img{ transform:scale(1.05); }
.breed figcaption{
  position:absolute; inset:auto 0 0 0; padding:2.4rem 1.4rem 1.2rem;
  background:linear-gradient(0deg, rgba(24,18,10,.85), transparent);
  color:var(--paper);
}
.breed figcaption h3{ color:var(--paper); }
.breed figcaption p{ color:#E4DECB; font-size:.88rem; max-width:none; }

/* ---------- Galerie ---------- */
.gallery{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.gallery a{
  border-radius:12px; overflow:hidden; aspect-ratio:1;
  box-shadow:var(--shadow-sm); display:block;
}
.gallery img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s var(--ease);
}
.gallery a:hover img{ transform:scale(1.06); }

.lightbox{
  position:fixed; inset:0; z-index:100; display:none;
  background:rgba(20,15,8,.92); place-items:center; padding:4vh 4vw;
}
.lightbox.open{ display:grid; }
.lightbox img{ max-width:92vw; max-height:88vh; border-radius:10px; }
.lightbox button{
  position:absolute; top:1rem; right:1.2rem; background:none; border:0;
  color:#fff; font-size:2.4rem; cursor:pointer; line-height:1;
}

/* ---------- CTA bandeau ---------- */
.cta-band{
  background:linear-gradient(120deg, var(--green-deep), var(--green));
  border-radius:22px; padding:3.2rem; color:var(--paper);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.6rem;
  box-shadow:var(--shadow-md);
}
.cta-band h2{ color:var(--paper); margin:0; }
.cta-band p{ color:#D8DCC4; }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:3rem; align-items:start; }
.contact-info{ display:grid; gap:1.1rem; }
.contact-info .line{
  display:flex; gap:1rem; align-items:flex-start;
  background:var(--white); padding:1.1rem 1.3rem; border-radius:var(--radius);
  box-shadow:var(--shadow-sm); text-decoration:none; color:var(--ink);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
a.line:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.contact-info .line svg{
  width:24px; height:24px; flex:none; stroke:var(--green-deep); fill:none; stroke-width:1.8; margin-top:.15rem;
}
.contact-info .line strong{ display:block; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--green); }

form.contact-form{
  background:var(--white); border-radius:var(--radius); padding:2.2rem;
  box-shadow:var(--shadow-md); display:grid; gap:1.1rem;
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
label{ font-weight:800; font-size:.85rem; display:grid; gap:.4rem; color:var(--ink); }
input, select, textarea{
  font:inherit; padding:.8em 1em; border:1.5px solid var(--sand-deep);
  border-radius:10px; background:var(--paper); width:100%; color:var(--ink);
  transition:border-color .2s, box-shadow .2s;
}
input:focus, select:focus, textarea:focus{
  outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(92,110,60,.18);
}
textarea{ min-height:130px; resize:vertical; }
.hp{ position:absolute; left:-6000px; opacity:0; height:0; overflow:hidden; }
.form-note{ font-size:.82rem; color:var(--ink-soft); }

/* ---------- Footer ---------- */
.site-footer{
  background:var(--green-deep); color:#C9CFAF; padding:3.5rem 0 2rem; margin-top:5rem;
}
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5rem; }
.site-footer .brand span{ color:var(--paper); }
.site-footer h4{
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:.05em;
  color:var(--paper); font-size:1.15rem; margin-bottom:1rem;
}
.site-footer ul{ list-style:none; display:grid; gap:.55rem; }
.site-footer a{ color:#C9CFAF; text-decoration:none; }
.site-footer a:hover{ color:var(--paper); text-decoration:underline; }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.14); margin-top:2.5rem; padding-top:1.4rem;
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.8rem;
  font-size:.85rem;
}
.socials{ display:flex; gap:.8rem; margin-top:1rem; }
.socials a{
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.1); transition:background .25s;
}
.socials a:hover{ background:var(--fauve); }
.socials svg{ width:18px; height:18px; fill:#fff; }

/* ---------- WhatsApp flottant ---------- */
.wa-float{
  position:fixed; right:1.2rem; bottom:1.2rem; z-index:70;
  width:56px; height:56px; border-radius:50%; background:#1FA855;
  display:grid; place-items:center; box-shadow:var(--shadow-md);
  transition:transform .25s var(--ease);
}
.wa-float:hover{ transform:scale(1.08); }
.wa-float svg{ width:30px; height:30px; fill:#fff; }

/* ---------- Page hero (pages internes) ---------- */
.page-hero{
  background:linear-gradient(180deg, var(--sand), var(--paper));
  padding:4rem 0 3rem;
}

/* ---------- Services détaillés ---------- */
.service-row{
  display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center;
  padding:3.2rem 0; border-bottom:1px dashed var(--sand-deep);
}
.service-row:last-child{ border-bottom:0; }
.service-row .photo{
  border-radius:20px; overflow:hidden; box-shadow:var(--shadow-md); aspect-ratio:4/3.4;
}
.service-row .photo img{ width:100%; height:100%; object-fit:cover; }
.service-row:nth-child(even) .photo{ order:2; }
.service-row ul{ margin:1rem 0 0 1.2rem; color:var(--ink-soft); display:grid; gap:.4rem; }

/* ---------- Reveal animations ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.visible{ opacity:1; transform:none; }
.reveal-d1{ transition-delay:.12s; } .reveal-d2{ transition-delay:.24s; } .reveal-d3{ transition-delay:.36s; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .hero-grid, .k9, .contact-grid, .service-row{ grid-template-columns:1fr; }
  .service-row:nth-child(even) .photo{ order:0; }
  .cards, .breeds{ grid-template-columns:1fr 1fr; }
  .gallery{ grid-template-columns:repeat(3,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .hero-photo{ max-width:520px; }
}
@media (max-width: 680px){
  section{ padding:3.5rem 0; }
  .cards, .breeds{ grid-template-columns:1fr; }
  .gallery{ grid-template-columns:repeat(2,1fr); }
  .form-row{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .cta-band{ padding:2.2rem 1.6rem; }
  .nav-cta .btn-ghost{ display:none; }

  .nav-links{
    position:fixed; inset:64px 0 auto 0; z-index:59;
    flex-direction:column; align-items:flex-start; gap:0;
    background:var(--paper); box-shadow:var(--shadow-md);
    padding:.5rem 1.4rem 1.2rem;
    transform:translateY(-130%); transition:transform .35s var(--ease);
  }
  .nav-links.open{ transform:none; }
  .nav-links li{ width:100%; }
  .nav-links a{ display:block; padding:.9em 0; border-bottom:1px solid var(--sand-deep); width:100%; }
  .nav-toggle{ display:block; }
  .nav-toggle.open span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2){ opacity:0; }
  .nav-toggle.open span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }
}