/* NetAvicole — feuille de style du site statique
   Charte reprise de l'ancien site : olive #505d14 */

:root{
  --olive:#505d14;
  --olive-d:#3b450f;
  --olive-l:#6d7d1e;
  --olive-p:#f2f5e6;
  --gold:#c9a227;
  --ink:#22251a;
  --body:#4a4f42;
  --line:#e2e4d8;
  --bg:#ffffff;
  --bg-alt:#f8f9f4;
  --radius:14px;
  --shadow:0 1px 2px rgba(34,37,26,.05), 0 8px 24px -12px rgba(34,37,26,.18);
  --wrap:1140px;
  --font:"Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font);color:var(--body);background:var(--bg);
  font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--olive);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--olive-d)}
h1,h2,h3,h4{color:var(--ink);line-height:1.22;margin:0 0 .6em;font-weight:700;letter-spacing:-.01em}
h1{font-size:clamp(1.85rem,1.2rem + 2.2vw,2.9rem)}
h2{font-size:clamp(1.45rem,1.1rem + 1.4vw,2.1rem)}
h3{font-size:1.2rem}
p{margin:0 0 1.1em}
hr{border:0;border-top:1px solid var(--line);margin:2.2rem 0}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:22px}
.sect{padding-block:clamp(2.5rem,1.5rem + 3vw,4.5rem)}
.sub{font-size:1.08rem;color:#6b7062;max-width:62ch;margin-bottom:2rem}
.center{text-align:center}
.center .sub{margin-inline:auto}

.skip{position:absolute;left:-9999px;top:0;background:var(--olive);color:#fff;
  padding:.7rem 1.2rem;z-index:100;border-radius:0 0 var(--radius) 0}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--olive-l);outline-offset:2px;border-radius:4px}

/* ---------- En-tete ---------- */
.site-head{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
}
.site-head .wrap{display:flex;align-items:center;gap:1.2rem;min-height:74px}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:inherit;
  flex:0 0 auto;min-height:44px}
.brand-mark{
  width:38px;height:38px;border-radius:11px;flex:0 0 auto;
  background:linear-gradient(145deg,var(--olive-l),var(--olive-d));
  position:relative;box-shadow:var(--shadow);
}
.brand-mark::after{
  content:"";position:absolute;inset:9px 10px;border-radius:50% 50% 45% 45%;
  background:#fff;opacity:.93;
}
.brand-txt{display:flex;flex-direction:column;line-height:1.15}
.brand-txt strong{font-size:1.22rem;color:var(--ink);letter-spacing:-.02em}
.brand-txt small{font-size:.75rem;color:#73785f;letter-spacing:.02em}

.burger{display:none;margin-left:auto;background:none;border:0;padding:10px;cursor:pointer;
  min-width:44px;min-height:44px}
.burger span{display:block;width:24px;height:2px;background:var(--ink);border-radius:2px}
.burger span+span{margin-top:5px}

.site-nav{margin-left:auto}
.site-nav ul{display:flex;gap:.15rem;list-style:none;margin:0;padding:0}
.site-nav a{
  display:block;padding:.55rem .85rem;border-radius:9px;text-decoration:none;
  color:var(--body);font-size:.94rem;font-weight:500;white-space:nowrap;
  transition:background .15s,color .15s;
}
.site-nav a:hover{background:var(--olive-p);color:var(--olive-d)}
.site-nav a.on,.site-nav a[aria-current]{color:var(--olive-d);background:var(--olive-p);font-weight:600}
.has-sub{position:relative}
.sub{margin:0}
.site-nav .sub{
  position:absolute;top:calc(100% + 6px);left:0;min-width:250px;display:block;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:.4rem;opacity:0;visibility:hidden;
  transform:translateY(-6px);transition:.16s;flex-direction:column;
}
.has-sub:hover .sub,.has-sub:focus-within .sub{opacity:1;visibility:visible;transform:none}
.site-nav .sub a{padding:.6rem .7rem;font-size:.9rem;min-height:40px;display:flex;align-items:center}

/* ---------- Hero ---------- */
.hero{
  background:linear-gradient(168deg,var(--olive-p) 0%,#fbfcf7 62%,#fff 100%);
  border-bottom:1px solid var(--line);
}
.hero-in{
  display:grid;grid-template-columns:1.15fr .85fr;gap:3rem;align-items:center;
  padding-block:clamp(2.8rem,1.5rem + 5vw,5.5rem);
}
.hero h1{margin-bottom:.5em}
.hero h1 em{color:var(--olive);font-style:normal}
.lead{font-size:1.12rem;max-width:52ch;color:#565b4d}
.cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.8rem}
.hero-img img{
  margin-inline:auto;border-radius:var(--radius);
  filter:drop-shadow(0 18px 34px rgba(34,37,26,.16));
}

.btn{
  display:inline-block;background:var(--olive);color:#fff;text-decoration:none;
  padding:.78rem 1.5rem;border-radius:10px;font-weight:600;font-size:.97rem;
  box-shadow:var(--shadow);transition:background .15s,transform .12s;
}
.btn:hover{background:var(--olive-d);color:#fff;transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--olive-d);box-shadow:none;
  border:1.5px solid var(--olive);}
.btn.ghost:hover{background:var(--olive-p)}

/* ---------- Bandes / cartes ---------- */
.band{background:var(--bg-alt);border-block:1px solid var(--line);
  padding-block:clamp(2.5rem,1.5rem + 3vw,4.5rem)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:1.4rem}
.card{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;text-decoration:none;color:inherit;
  box-shadow:var(--shadow);transition:transform .16s,box-shadow .16s,border-color .16s;
}
.card:hover{transform:translateY(-3px);border-color:var(--olive-l);
  box-shadow:0 14px 34px -14px rgba(34,37,26,.3)}
.card img{width:100%;height:172px;object-fit:cover;background:var(--olive-p)}
.card-b{padding:1.15rem 1.25rem 1.35rem}
.card-b h3{margin-bottom:.4em;color:var(--olive-d)}
.card-b p{font-size:.9rem;color:#6b7062;margin-bottom:.9em}
.more{font-size:.92rem;font-weight:600;color:var(--olive)}
.more::after{content:" →"}

.feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem}
.feat{
  display:flex;flex-direction:column;align-items:center;gap:.7rem;text-align:center;
  padding:1.5rem 1rem;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);text-decoration:none;color:var(--ink);font-weight:600;
  font-size:.94rem;transition:border-color .15s,background .15s;
}
.feat:hover{border-color:var(--olive-l);background:var(--olive-p)}
.feat img{width:46px;height:46px;object-fit:contain}

.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.2rem}
.tile{
  display:block;padding:1.6rem;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);text-decoration:none;box-shadow:var(--shadow);
  transition:transform .16s,border-color .16s;
}
.tile:hover{transform:translateY(-3px);border-color:var(--olive-l)}
.tile h3{color:var(--olive-d);margin-bottom:.3em}

/* ---------- Fil d'Ariane ---------- */
.crumbs{
  max-width:var(--wrap);margin-inline:auto;padding:1.1rem 22px .2rem;
  font-size:.9rem;color:#7d8273;
}
.crumbs a{color:#8a8f80;text-decoration:none;display:inline-block;padding-block:.3rem;
  min-height:26px}   /* >=24px : minimum WCAG 2.5.8 pour une cible tactile */
.crumbs a:hover{color:var(--olive);text-decoration:underline}
.crumbs .sep{margin-inline:.5rem;opacity:.55}
.crumbs [aria-current]{color:var(--ink);font-weight:600}
.crumbs .sep{display:inline-block}

/* ---------- Contenu d'article ---------- */
.prose{max-width:860px}
.prose h2{margin-top:1.8em}
.prose h3{margin-top:1.6em;color:var(--olive-d)}
.prose img{border-radius:10px;margin-block:1.2rem}
.prose ul,.prose ol{padding-left:1.3rem;margin:0 0 1.2em}
.prose li{margin-bottom:.45em}
.prose a{font-weight:500}
.prose .alert{
  background:var(--olive-p);border-left:4px solid var(--olive);
  padding:1.2rem 1.4rem;border-radius:0 10px 10px 0;margin-bottom:1.4em;
}
.prose table,.prose .grid{width:100%}
.empty{
  background:var(--bg-alt);border:1px dashed var(--line);border-radius:var(--radius);
  padding:1.6rem;color:#8a8f80;font-style:italic;
}
.note{font-size:.88rem;color:#8a8f80;border-top:1px solid var(--line);
  padding-top:1.2rem;margin-top:2.4rem}

.stack{display:flex;flex-direction:column;gap:1.6rem}
.entry{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:1.8rem 1.9rem;box-shadow:var(--shadow);
}
.entry h1,.entry h2{margin-top:0}
.entry h2{font-size:1.35rem;color:var(--olive-d);display:flex;align-items:center;gap:.6rem}
.entry h2 img{width:34px;height:34px;margin:0;display:inline-block}
.entry > :last-child{margin-bottom:0}

/* Grilles issues des anciennes tables de mise en page */
.grid{display:flex;flex-direction:column;gap:1.2rem;margin-bottom:1.4rem}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1.2rem;
  align-items:center}
.cell > :last-child{margin-bottom:0}
.ico{width:52px;height:52px;color:var(--olive);opacity:.85}

.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1.4rem;margin-block:2rem}
.contact-card{
  background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.7rem;
}
.contact-card h3{color:var(--olive-d);margin-top:0}
.contact-card small{color:#8a8f80;font-size:.85rem}
.big-link{
  display:inline-block;font-size:1.15rem;font-weight:600;word-break:break-word;
  min-height:44px;line-height:44px;   /* cible tactile confortable */
}

/* ---------- Vidéo (chargée seulement au clic) ---------- */
.video{
  position:relative;aspect-ratio:16/9;background:#000;border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow);margin-block:1.6rem;
}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-play{
  position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;
  background:none;cursor:pointer;display:block;
}
.video-play img{width:100%;height:100%;object-fit:cover;margin:0;border-radius:0;
  transition:transform .3s,filter .3s}
.video-play:hover img{transform:scale(1.03);filter:brightness(.85)}
.video-btn{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  pointer-events:none;filter:drop-shadow(0 4px 12px rgba(0,0,0,.4));
}
.video-btn .yt-bg{fill:#212121;fill-opacity:.85;transition:fill-opacity .2s}
.video-play:hover .video-btn .yt-bg{fill:#f00;fill-opacity:1}
.note-video{font-size:.9rem;color:#7d8273;margin-top:-.6rem}
.note-video a{display:inline-block;padding-block:.35rem;min-height:26px;font-weight:600}

/* ---------- Pied ---------- */
.site-foot{background:var(--ink);color:#c3c8b8;margin-top:4rem;font-size:.92rem}
.foot-grid{
  display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:2.5rem;
  padding-block:3rem 2.2rem;
}
.site-foot strong{display:block;color:#fff;margin-bottom:.9rem;font-size:1rem}
.site-foot p{color:#9ba394;max-width:38ch;margin:0}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li{margin-bottom:.2rem}
.site-foot li a{display:inline-block;min-height:44px;line-height:44px}
.site-foot li small{color:#8b9182}
.site-foot a{color:#c3c8b8;text-decoration:none}
.site-foot a:hover{color:#fff;text-decoration:underline}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);padding-block:1.3rem;color:#8b9182}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .hero-in{grid-template-columns:1fr;gap:2rem}
  .hero-img{order:-1;max-width:330px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:2rem}
}
@media (max-width:760px){
  body{font-size:16px}
  .burger{display:block}
  .site-nav{
    position:absolute;top:100%;left:0;right:0;background:#fff;
    border-bottom:1px solid var(--line);box-shadow:var(--shadow);
    max-height:0;overflow:hidden;transition:max-height .25s ease;
  }
  .site-nav.open{max-height:80vh;overflow-y:auto}
  .site-nav ul{flex-direction:column;padding:.6rem;gap:0}
  /* cibles tactiles : minimum 44 px de haut (recommandation WCAG / Apple / Google) */
  .site-nav a{padding:.75rem .9rem;min-height:44px;display:flex;align-items:center}
  .site-nav .sub{
    position:static;opacity:1;visibility:visible;transform:none;border:0;
    box-shadow:none;padding:0 0 .4rem 1rem;min-width:0;
  }
  .site-nav .sub a{font-size:.92rem;padding:.6rem .9rem;min-height:44px}
  .foot-grid{grid-template-columns:1fr;gap:1.8rem}
  .entry{padding:1.4rem 1.3rem}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

@media print{
  .site-head,.site-foot,.crumbs,.cta,.burger{display:none}
  body{font-size:12pt;color:#000}
}