/* ==========================================================================
   Sky Blu International - feuille de style principale
   Palette issue du logo : #009ED7 cyan / #1B76BC bleu / #0F4E8A navy
   ========================================================================== */

:root{
  --navy:#0F4E8A;
  --navy-d:#0B3A68;
  --blue:#1B76BC;
  --cyan:#009ED7;
  --cyan-d:#0089BC;
  --ink:#0B2239;
  --body:#42586B;
  --muted:#7B8FA1;
  --ice:#EAF6FC;
  --ice-2:#F4FAFD;
  --line:#DCE8F1;
  --white:#fff;
  --amber:#F0A202;
  --green:#159A63;
  --radius:14px;
  --radius-s:10px;
  --shadow:0 2px 4px rgba(11,34,57,.04), 0 12px 32px rgba(11,34,57,.07);
  --shadow-h:0 4px 8px rgba(11,34,57,.06), 0 20px 48px rgba(11,34,57,.12);
  --wrap:1180px;
  --font:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--font);font-size:17px;line-height:1.68;
  color:var(--body);background:var(--white);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--cyan-d)}
h1,h2,h3,h4{color:var(--ink);line-height:1.18;margin:0 0 .5em;font-weight:800;letter-spacing:-.02em}
h1{font-size:clamp(2rem,4.6vw,3.25rem)}
h2{font-size:clamp(1.6rem,3.2vw,2.35rem)}
h3{font-size:clamp(1.15rem,1.9vw,1.42rem)}
h4{font-size:1.05rem}
p{margin:0 0 1.15em}
ul,ol{margin:0 0 1.15em;padding-left:1.25em}
li{margin-bottom:.4em}
strong{color:var(--ink);font-weight:700}
hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0}
table{width:100%;border-collapse:collapse;margin:0 0 1.5rem;font-size:.96rem}
th,td{padding:.85rem 1rem;text-align:left;border-bottom:1px solid var(--line)}
th{background:var(--ice-2);color:var(--ink);font-weight:700;font-size:.83rem;text-transform:uppercase;letter-spacing:.05em}
tbody tr:hover{background:var(--ice-2)}
:focus-visible{outline:3px solid var(--cyan);outline-offset:2px;border-radius:4px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
.wrap-narrow{max-width:820px;margin:0 auto;padding:0 22px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--cyan);color:#fff;padding:.8rem 1.2rem;z-index:9999}
.skip-link:focus{left:0}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55em;
  padding:.92em 1.7em;border-radius:999px;border:2px solid transparent;
  font-weight:700;font-size:.98rem;line-height:1;cursor:pointer;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  text-align:center;
}
.btn:hover{transform:translateY(-2px)}
.btn svg{width:19px;height:19px;flex:none}
.btn-primary{background:var(--cyan);color:#fff;box-shadow:0 6px 18px rgba(0,158,215,.32)}
.btn-primary:hover{background:var(--cyan-d);color:#fff;box-shadow:0 10px 26px rgba(0,158,215,.42)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-d);color:#fff}
.btn-ghost{border-color:rgba(255,255,255,.55);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.14);color:#fff;border-color:#fff}
.btn-outline{border-color:var(--navy);color:var(--navy)}
.btn-outline:hover{background:var(--navy);color:#fff}
.btn-wa{background:#25D366;color:#fff}
.btn-wa:hover{background:#1FB855;color:#fff}
.btn-lg{padding:1.05em 2.1em;font-size:1.05rem}

/* ---------- Barre haute ---------- */
.topbar{background:var(--navy);color:rgba(255,255,255,.9);font-size:.85rem}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:42px;flex-wrap:wrap}
.topbar a{color:#fff}
.topbar-facts{display:flex;gap:1.6rem;flex-wrap:wrap;align-items:center}
.topbar-facts span{display:inline-flex;align-items:center;gap:.45em}
.topbar-facts svg{width:15px;height:15px;flex:none;opacity:.85}
.topbar-lang a{opacity:.7;font-weight:600;padding:0 .3em}
.topbar-lang a.on{opacity:1;text-decoration:underline}

/* ---------- En-tete ---------- */
.site-header{position:sticky;top:0;z-index:200;background:#fff;border-bottom:1px solid var(--line)}
.site-header.scrolled{box-shadow:0 4px 20px rgba(11,34,57,.09)}
.header-inner{display:flex;align-items:center;gap:1.5rem;min-height:82px}
.brand{display:flex;align-items:center;gap:.8rem;flex:none}
.brand img{height:58px;width:auto}
.brand-txt{display:none}
.main-nav{margin-left:auto}
.main-nav ul{list-style:none;display:flex;gap:.15rem;margin:0;padding:0;align-items:center}
.main-nav li{margin:0;position:relative}
.main-nav a{
  display:block;padding:.65rem .9rem;border-radius:8px;
  color:var(--ink);font-weight:600;font-size:.95rem;transition:.18s;
}
.main-nav a:hover{background:var(--ice);color:var(--navy)}
.main-nav .current-menu-item>a,
.main-nav .current-page-ancestor>a{color:var(--cyan-d);background:var(--ice)}
.main-nav .sub-menu{
  position:absolute;top:calc(100% + 6px);left:0;min-width:260px;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius-s);box-shadow:var(--shadow-h);
  padding:.45rem;display:none;flex-direction:column;gap:2px;
}
.main-nav li:hover>.sub-menu,.main-nav li:focus-within>.sub-menu{display:flex}
.main-nav .sub-menu a{font-weight:500;font-size:.93rem;white-space:normal}
.header-cta{flex:none}
.nav-toggle{
  display:none;margin-left:auto;background:none;border:0;padding:.5rem;cursor:pointer;
  color:var(--navy);
}
.nav-toggle svg{width:30px;height:30px}

/* ---------- Hero ---------- */
.hero{position:relative;color:#fff;isolation:isolate;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:-2}
.hero-bg img{width:100%;height:100%;object-fit:cover}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,rgba(11,34,57,.93) 0%,rgba(15,78,138,.86) 45%,rgba(0,158,215,.55) 100%);
}
.hero-inner{padding:clamp(3.5rem,9vw,6.5rem) 0 clamp(3rem,7vw,5rem);max-width:790px}
.hero h1{color:#fff;margin-bottom:.55em;text-shadow:0 2px 24px rgba(0,0,0,.25)}
.hero-lead{font-size:clamp(1.05rem,1.9vw,1.28rem);color:rgba(255,255,255,.94);margin-bottom:1.1em;max-width:660px}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:.5em;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:.42em 1.05em;
  font-size:.82rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;margin-bottom:1.4rem;
}
.hero-eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 4px rgba(0,158,215,.35)}
.hero-actions{display:flex;gap:.85rem;flex-wrap:wrap;margin-top:1.9rem}
.hero-meta{
  display:flex;gap:1.6rem;flex-wrap:wrap;margin-top:2.4rem;padding-top:1.5rem;
  border-top:1px solid rgba(255,255,255,.22);font-size:.9rem;color:rgba(255,255,255,.85);
}
.hero-meta b{color:#fff;display:block;font-size:1.15rem;letter-spacing:-.01em}

/* ==========================================================================
   Hero « bandeau d'expedition » — accueil
   Parti pris : pas de photo pleine largeur noyee sous un voile bleu.
   Un bloc editorial navy a gauche, la photo en couleurs reelles a droite,
   et un cartouche de specifications repris du carton d'export.
   ========================================================================== */
.hero-split{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  align-items:stretch;
  background:var(--ink);
}
.hs-texte{
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(0,158,215,.20) 0%, rgba(0,158,215,0) 55%),
    linear-gradient(165deg, #0B2239 0%, #0F4E8A 78%, #14639F 100%);
  color:#fff;display:flex;align-items:center;
  padding:clamp(3rem,6vw,5.5rem) clamp(1.4rem,4vw,4rem);
  position:relative;
}
/* filet cyan vertical, rappel du liseré des cartons */
.hs-texte::before{
  content:"";position:absolute;left:0;top:14%;bottom:14%;width:5px;
  background:linear-gradient(180deg,var(--cyan),rgba(0,158,215,0));
}
.hs-inner{max-width:600px;margin-left:auto;width:100%}

.hs-eyebrow{
  display:block;font-size:.76rem;font-weight:800;letter-spacing:.22em;
  text-transform:uppercase;color:#8ED8F5;margin:0 0 1.5rem;
  text-align:left;hyphens:manual;
}
.hs-eyebrow span{color:rgba(255,255,255,.4);padding:0 .55em}

.hero-split h1{
  color:#fff;text-align:left;
  font-size:clamp(2.15rem,4.3vw,3.5rem);
  line-height:1.06;letter-spacing:-.035em;margin:0 0 1.1rem;
}
.hero-split h1 em{
  font-style:normal;color:#8ED8F5;
  display:block;
}
.hs-lead{
  text-align:left;font-size:clamp(1rem,1.35vw,1.12rem);
  color:rgba(255,255,255,.86);margin:0 0 2rem;max-width:30em;
  hyphens:manual;
}
.hs-actions{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center;margin-bottom:2.6rem}
.hs-lien{
  color:#fff;font-weight:700;font-size:.97rem;
  border-bottom:2px solid rgba(255,255,255,.35);padding-bottom:2px;
}
.hs-lien:hover{color:#8ED8F5;border-color:#8ED8F5}

/* cartouche facon impression sur carton */
.hs-specs{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:0;
  border-top:1px solid rgba(255,255,255,.22);
}
.hs-specs > div{
  padding:1.05rem .9rem 0 0;
  border-right:1px solid rgba(255,255,255,.14);
}
.hs-specs > div:last-child{border-right:0}
.hs-specs > div + div{padding-left:.9rem}
.hs-specs dt{
  font-size:.63rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.5);margin:0 0 .3rem;
}
.hs-specs dd{
  margin:0;font-size:1.02rem;font-weight:800;color:#fff;letter-spacing:-.01em;
  line-height:1.25;
}
.hs-specs dd small{display:block;font-size:.72rem;font-weight:500;color:rgba(255,255,255,.55);letter-spacing:0;margin-top:.15rem}

/* photo : couleurs reelles, aucun voile */
.hs-media{position:relative;overflow:hidden;min-height:clamp(360px,52vh,660px)}
.hs-media img{width:100%;height:100%;object-fit:cover;display:block}
.hs-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(11,34,57,.55) 0%,rgba(11,34,57,0) 26%);
  pointer-events:none;
}

/* tampon d'agrement, incline comme une encre apposee */
.hs-tampon{
  /* a gauche : le bouton WhatsApp flottant occupe le coin bas-droit */
  position:absolute;left:clamp(1rem,2.5vw,2.4rem);bottom:clamp(1rem,2.5vw,2.4rem);
  transform:rotate(-7deg);z-index:2;
  border:3px solid rgba(255,255,255,.9);border-radius:8px;
  background:rgba(11,34,57,.42);
  padding:.7rem 1.05rem;text-align:center;color:#fff;
  box-shadow:0 6px 24px rgba(0,0,0,.25);
}
.hs-tampon b{
  display:block;font-size:1.32rem;font-weight:800;letter-spacing:.02em;line-height:1.1;
}
.hs-tampon span{
  display:block;font-size:.6rem;font-weight:700;letter-spacing:.19em;text-transform:uppercase;
  color:rgba(255,255,255,.82);
}
.hs-tampon span:first-child{margin-bottom:.3rem}
.hs-tampon span:last-child{margin-top:.3rem}

@media (max-width:900px){
  .hero-split{grid-template-columns:1fr}
  .hs-inner{margin:0 auto;max-width:640px}
  .hs-media{min-height:300px;aspect-ratio:16/9}
  .hs-media::after{background:linear-gradient(0deg,rgba(11,34,57,.45) 0%,rgba(11,34,57,0) 40%)}
  .hs-texte::before{top:0;bottom:auto;left:0;right:0;width:auto;height:4px;
    background:linear-gradient(90deg,var(--cyan),rgba(0,158,215,0))}
}
@media (max-width:560px){
  .hs-specs{grid-template-columns:repeat(2,1fr);row-gap:.2rem}
  .hs-specs > div{border-right:0;padding-right:.6rem}
  .hs-specs > div:nth-child(odd){border-right:1px solid rgba(255,255,255,.14)}
  .hs-specs > div + div{padding-left:0}
  .hs-specs > div:nth-child(even){padding-left:.9rem}
  .hs-actions .btn{width:100%;justify-content:center}
}

/* hero interne (pages secondaires) */
.page-hero{position:relative;color:#fff;isolation:isolate;overflow:hidden}
.page-hero .hero-bg{position:absolute;inset:0;z-index:-2}
.page-hero .hero-bg img{width:100%;height:100%;object-fit:cover}
.page-hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(11,34,57,.92) 0%,rgba(15,78,138,.82) 60%,rgba(0,158,215,.5) 100%)}
.page-hero-inner{padding:clamp(2.8rem,6vw,4.6rem) 0;max-width:760px}
.page-hero h1{color:#fff;margin-bottom:.35em}
.page-hero p{color:rgba(255,255,255,.92);font-size:1.1rem;margin:0}
.breadcrumb{font-size:.85rem;color:rgba(255,255,255,.72);margin-bottom:1rem}
.breadcrumb a{color:rgba(255,255,255,.9)}
.breadcrumb span{padding:0 .4em}

/* ---------- Bandeau de chiffres ---------- */
.factbar{background:var(--navy);color:#fff}
.factbar .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.13)}
.factbar .cell{background:var(--navy);padding:1.9rem 1.4rem;text-align:center}
.factbar .n{display:block;font-size:1.85rem;font-weight:800;color:#fff;letter-spacing:-.02em;line-height:1.1}
.factbar .l{display:block;font-size:.86rem;color:rgba(255,255,255,.74);margin-top:.35rem}

/* ---------- Sections ---------- */
.section{padding:clamp(3.2rem,7vw,5.4rem) 0}
.section-ice{background:var(--ice-2)}
.section-navy{background:var(--navy);color:rgba(255,255,255,.86)}
.section-navy h2,.section-navy h3,.section-navy h4{color:#fff}
.section-navy strong{color:#fff}
.section-navy a:not(.btn){color:#8ED8F5}
.section-head{max-width:760px;margin-bottom:2.8rem}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.eyebrow{
  display:block;color:var(--cyan-d);font-size:.82rem;font-weight:800;
  letter-spacing:.13em;text-transform:uppercase;margin-bottom:.7rem;
}
.section-head p{font-size:1.08rem;margin-bottom:0}
.lead{font-size:1.12rem;color:var(--ink)}

/* ---------- Grilles / cartes ---------- */
.grid{display:grid;gap:1.5rem}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:1.8rem;box-shadow:var(--shadow);transition:.22s;
}
.card:hover{box-shadow:var(--shadow-h);transform:translateY(-3px);border-color:#C9DEEE}
.card h3{margin-bottom:.45em}
.card p:last-child{margin-bottom:0}
.card-ico{
  width:54px;height:54px;border-radius:12px;background:var(--ice);
  display:flex;align-items:center;justify-content:center;margin-bottom:1.15rem;
}
.card-ico svg{width:28px;height:28px;color:var(--cyan-d)}

/* cartes pole (accueil) */
.pole{
  position:relative;overflow:hidden;border-radius:var(--radius);
  border:1px solid var(--line);background:#fff;box-shadow:var(--shadow);
  display:flex;flex-direction:column;transition:.22s;
}
.pole:hover{box-shadow:var(--shadow-h);transform:translateY(-4px)}
.pole-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--ice)}
.pole-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.pole:hover .pole-media img{transform:scale(1.05)}
.pole-tag{
  position:absolute;left:1rem;top:1rem;background:rgba(15,78,138,.94);color:#fff;
  border-radius:999px;padding:.35em 1em;font-size:.76rem;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;
}
.pole-body{padding:1.6rem 1.7rem 1.8rem;flex:1;display:flex;flex-direction:column}
.pole-body h3{margin-bottom:.4em}
.pole-body p{flex:1}
.pole-link{
  display:inline-flex;align-items:center;gap:.45em;font-weight:700;color:var(--cyan-d);
  margin-top:.4rem;
}
.pole-link svg{width:17px;height:17px;transition:transform .2s}
.pole:hover .pole-link svg{transform:translateX(4px)}
.pole-featured{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,158,215,.14),var(--shadow)}
.pole-featured .pole-tag{background:var(--cyan)}

/* carte posee sur fond navy */
.card-on-navy{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)}
.card-on-navy:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.28)}
.card-on-navy .card-ico{background:rgba(255,255,255,.1)}
.card-on-navy .card-ico svg{color:#8ED8F5}
.card-on-navy p{color:rgba(255,255,255,.82)}
.eyebrow-light{color:#8ED8F5}

/* ---------- Utilitaires de mise en page ---------- */
.figure-plain{margin:0}
.img-round{border-radius:var(--radius)}
.img-full{width:100%;border-radius:var(--radius);box-shadow:var(--shadow)}
.narrow-box{max-width:780px;margin-left:auto;margin-right:auto}
.no-mb{margin-bottom:0}
.mb-l{margin-bottom:2.6rem}
.mt-s{margin-top:.7rem}
.align-start{align-items:start}
.pad-0{padding:0}

/* ---------- Etapes du process ---------- */
.steps{counter-reset:step;display:grid;gap:1.3rem;grid-template-columns:repeat(3,1fr)}
.step{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.7rem 1.6rem 1.6rem}
.step::before{
  counter-increment:step;content:counter(step,decimal-leading-zero);
  display:block;font-size:.95rem;font-weight:800;color:#fff;background:var(--cyan);
  width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  margin-bottom:1rem;
}
.step h4{margin-bottom:.35em;font-size:1.08rem}
.step p{font-size:.95rem;margin:0}

/* ---------- Especes ---------- */
.species{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.spec{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow);transition:.22s;
}
.spec:hover{box-shadow:var(--shadow-h);transform:translateY(-3px)}
.spec-img{aspect-ratio:4/3;overflow:hidden;background:var(--ice)}
.spec-img img{width:100%;height:100%;object-fit:cover}
.spec-body{padding:1.15rem 1.25rem 1.4rem}
.spec-body h3{font-size:1.12rem;margin-bottom:.15em}
.spec-local{font-size:.85rem;color:var(--muted);font-style:italic;display:block;margin-bottom:.75rem}
.spec-cal{display:flex;gap:.35rem;flex-wrap:wrap}
.chip{
  display:inline-block;background:var(--ice);color:var(--navy);border-radius:6px;
  padding:.2em .6em;font-size:.76rem;font-weight:700;letter-spacing:.03em;
}
.chip-cyan{background:rgba(0,158,215,.13);color:var(--cyan-d)}

/* ---------- Bloc media + texte ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.split-media img{border-radius:var(--radius);box-shadow:var(--shadow-h);width:100%}
.split-media figure{margin:0}
.split-media figcaption{font-size:.85rem;color:var(--muted);margin-top:.7rem;text-align:center}
.split h2{margin-bottom:.6em}

/* ---------- Liste a puces cochees ---------- */
.checks{list-style:none;padding:0;margin:0 0 1.5rem}
.checks li{position:relative;padding-left:2rem;margin-bottom:.85em}
.checks li::before{
  content:"";position:absolute;left:0;top:.42em;width:19px;height:19px;border-radius:50%;
  background:var(--cyan) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat;
}
.section-navy .checks li::before{background-color:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F4E8A' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")}

/* ---------- Encadres ---------- */
.callout{
  border-left:4px solid var(--cyan);background:var(--ice-2);
  border-radius:0 var(--radius-s) var(--radius-s) 0;padding:1.4rem 1.6rem;margin:0 0 1.6rem;
}
.callout p:last-child{margin-bottom:0}
.callout-navy{background:var(--navy);color:rgba(255,255,255,.9);border-left-color:var(--cyan);border-radius:var(--radius)}
.callout-navy strong{color:#fff}

.badge-cert{
  display:inline-flex;align-items:center;gap:.7em;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:.5em 1.2em .5em .55em;font-size:.9rem;font-weight:600;color:var(--ink);
  box-shadow:var(--shadow);
}
.badge-cert i{
  width:32px;height:32px;border-radius:50%;background:var(--ice);display:flex;
  align-items:center;justify-content:center;flex:none;
}
.badge-cert svg{width:17px;height:17px;color:var(--cyan-d)}
.cert-row{display:flex;gap:.8rem;flex-wrap:wrap;margin-bottom:1.6rem}

/* ---------- CTA ---------- */
.cta{
  background:linear-gradient(120deg,var(--navy) 0%,var(--blue) 62%,var(--cyan) 130%);
  color:#fff;border-radius:var(--radius);padding:clamp(2.2rem,5vw,3.4rem);
  text-align:center;box-shadow:var(--shadow-h);
}
.cta h2{color:#fff;margin-bottom:.4em}
.cta p{color:rgba(255,255,255,.9);max-width:620px;margin:0 auto 1.7rem;font-size:1.06rem}
.cta-actions{display:flex;gap:.85rem;justify-content:center;flex-wrap:wrap}

/* ---------- Galerie ---------- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem}
.gallery img{border-radius:var(--radius-s);aspect-ratio:1;object-fit:cover;box-shadow:var(--shadow);transition:.25s}
.gallery img:hover{transform:scale(1.03);box-shadow:var(--shadow-h)}

/* ---------- Questions frequentes ---------- */
.faq details{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-s);
  margin-bottom:.75rem;box-shadow:var(--shadow);overflow:hidden;
}
.faq summary{
  cursor:pointer;padding:1.05rem 3rem 1.05rem 1.35rem;font-weight:700;color:var(--ink);
  list-style:none;position:relative;font-size:1.02rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:1.3rem;top:50%;width:11px;height:11px;
  border-right:2.5px solid var(--cyan-d);border-bottom:2.5px solid var(--cyan-d);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq summary:hover{background:var(--ice-2)}
.faq details p{padding:0 1.35rem 1.25rem;margin:0;font-size:.98rem}
.faq details[open] summary{border-bottom:1px solid var(--line);background:var(--ice-2)}

/* legendes sous les illustrations */
.fig-legende{
  font-size:.87rem;color:var(--muted);text-align:center;margin-top:.65rem;
}
.center-txt{text-align:center;margin:2rem 0 0}

/* ---------- Listes d'especes ---------- */
.card.esp-liste{display:flex;flex-direction:column}
.card.esp-saison{border-top:4px solid var(--amber)}
.card.esp-liste .card-ico{margin-bottom:1rem}
ul.especes{
  list-style:none;margin:1.1rem 0 0;padding:1.1rem 0 0;
  border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:.5rem;
}
ul.especes li{
  margin:0;background:var(--ice);color:var(--navy);
  border-radius:8px;padding:.42em .85em;font-size:.94rem;font-weight:600;
  text-align:left;
}
.esp-saison ul.especes li{background:rgba(240,162,2,.12);color:#8A5D00}

/* ---------- Carte de localisation ---------- */
.carte-sbi{margin:2.4rem 0 0}
.carte-cadre{
  position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);background:var(--ice);box-shadow:var(--shadow);
}
.carte-cadre iframe{width:100%;height:100%;border:0;display:block}
.carte-repli{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.6rem;text-align:center;padding:1.5rem;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(0,158,215,.12) 0%, rgba(0,158,215,0) 60%),
    var(--ice);
}
.carte-repli strong{font-size:1.08rem;color:var(--ink)}
.carte-repli span{font-size:.95rem;color:var(--body);max-width:34em}
.carte-repli small{font-size:.8rem;color:var(--muted);max-width:32em}
.carte-sbi figcaption{text-align:center;margin-top:.7rem;font-size:.9rem}

/* ---------- Cartes « modele » import / export ---------- */
.card.modele{border-top:4px solid var(--cyan)}
.card.modele-imp{border-top-color:#0F6BA8}
.modele-flux{
  margin:1.2rem 0 0!important;padding-top:1rem;border-top:1px dashed var(--line);
  font-size:.92rem;color:var(--muted);text-align:left;
}
.modele-flux strong{color:var(--navy)}

/* signature de marque */
.signature-sbi{
  margin:1.8rem 0 0;padding-left:1.1rem;border-left:4px solid var(--cyan);
  font-size:1.06rem;font-weight:700;color:var(--navy);font-style:italic;
  text-align:left;hyphens:manual;
}
.section-navy .signature-sbi{color:#fff;border-left-color:#8ED8F5}

.mt-l{margin-top:2.6rem}

/* ---------- Cartes equipe ---------- */
.card.equipe{text-align:center;padding-top:2.1rem}
.equipe-avatar{
  width:74px;height:74px;border-radius:50%;background:var(--ice);
  display:flex;align-items:center;justify-content:center;margin:0 auto 1.15rem;
  border:2px solid #D6EBF7;
}
.equipe-avatar svg{width:32px;height:32px;color:var(--cyan-d)}
/* le nom prime, la fonction le qualifie */
.equipe-nom{
  font-size:1.2rem;font-weight:800;color:var(--ink);letter-spacing:-.015em;
  margin:0 0 .2rem;text-align:center;
}
.card.equipe h3{
  font-size:.82rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--cyan-d);margin:0 0 1rem;padding-bottom:1rem;
  border-bottom:1px solid var(--line);
}
.card.equipe p{text-align:center;font-size:.95rem}
.equipe-contact{margin:1rem 0 0!important;font-size:.87rem;word-break:break-word}
.equipe-contact a{font-weight:600}

/* cartes especes (accueil) */
.card.esp{padding:1.35rem 1.5rem 1.5rem}
.card.esp h3{margin-bottom:.1em}
.card.esp .spec-local{margin-bottom:.85rem}

/* ---------- Formulaire ---------- */
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1.6rem,4vw,2.6rem);box-shadow:var(--shadow)}
.field{margin-bottom:1.15rem}
.field label{display:block;font-weight:700;color:var(--ink);font-size:.92rem;margin-bottom:.4rem}
.field .req{color:#D93025}
.field input,.field select,.field textarea{
  width:100%;padding:.82rem 1rem;border:1.5px solid var(--line);border-radius:var(--radius-s);
  font-family:inherit;font-size:1rem;color:var(--ink);background:#fff;transition:.16s;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--cyan);outline:none;box-shadow:0 0 0 4px rgba(0,158,215,.14)}
.field textarea{min-height:130px;resize:vertical}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.15rem}
.field-hint{font-size:.85rem;color:var(--muted);margin-top:.35rem}
.form-notice{padding:1rem 1.2rem;border-radius:var(--radius-s);margin-bottom:1.5rem;font-weight:600}
.form-ok{background:rgba(21,154,99,.1);color:#0E7048;border:1px solid rgba(21,154,99,.3)}
.form-ko{background:rgba(217,48,37,.08);color:#B3261E;border:1px solid rgba(217,48,37,.25)}
.hp-field{position:absolute!important;left:-9999px}
.fs-plain{border:0;padding:0;margin:0;min-width:0}

/* ---------- Coordonnees ---------- */
.contact-item{display:flex;gap:1rem;margin-bottom:1.6rem}
.contact-item i{
  width:44px;height:44px;border-radius:11px;background:var(--ice);flex:none;
  display:flex;align-items:center;justify-content:center;
}
.contact-item svg{width:21px;height:21px;color:var(--cyan-d)}
.contact-item h4{margin-bottom:.2em}
.contact-item p{margin:0;font-size:.97rem}

/* ---------- Pied de page ---------- */
.site-footer{background:var(--ink);color:rgba(255,255,255,.68);font-size:.95rem;padding-top:clamp(2.8rem,6vw,4rem)}
.site-footer h4{color:#fff;font-size:.88rem;letter-spacing:.11em;text-transform:uppercase;margin-bottom:1.1rem}
.site-footer a{color:rgba(255,255,255,.72)}
.site-footer a:hover{color:var(--cyan)}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:2.4rem;padding-bottom:2.6rem}
.footer-grid ul{list-style:none;padding:0;margin:0}
.footer-grid li{margin-bottom:.6em}
.footer-brand img{height:68px;width:auto;margin-bottom:1.1rem}
.site-footer li svg{width:16px;height:16px;display:inline-block;vertical-align:-3px;margin-right:.45em;opacity:.6}
/* La regle globale `strong{color:var(--ink)}` rend le gras illisible
   sur les fonds sombres : on le remet en blanc partout ou c'est le cas. */
.site-footer strong,
.hs-texte strong,
.hs-specs strong,
.cta strong{color:#fff}
.wa-tag{
  display:inline-block;background:rgba(37,211,102,.18);color:#6EE7A0;
  border-radius:4px;padding:.05em .45em;font-size:.7rem;font-weight:700;
  letter-spacing:.06em;margin-left:.35em;vertical-align:1px;
}
.contact-item svg,.card-ico svg,.badge-cert svg{display:block}
.footer-legalbar{
  border-top:1px solid rgba(255,255,255,.11);padding:1.4rem 0;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.87rem;
}
.footer-legalbar nav{display:flex;gap:1.3rem;flex-wrap:wrap;list-style:none;padding:0;margin:0}
.footer-legalbar nav li{list-style:none;margin:0}

/* ---------- Bouton WhatsApp flottant ---------- */
.wa-float{
  position:fixed;right:20px;bottom:20px;z-index:300;
  display:inline-flex;align-items:center;gap:.6em;
  background:#25D366;color:#fff;font-weight:700;font-size:.95rem;
  padding:.85em 1.35em;border-radius:999px;box-shadow:0 8px 26px rgba(37,211,102,.45);
  transition:.2s;
}
.wa-float:hover{background:#1FB855;color:#fff;transform:translateY(-2px);box-shadow:0 12px 32px rgba(37,211,102,.55)}
.wa-float svg{width:23px;height:23px;flex:none}

/* ---------- Blog ---------- */
.post-list{display:grid;grid-template-columns:repeat(3,1fr);gap:1.7rem}
.post-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:.22s}
.post-card:hover{box-shadow:var(--shadow-h);transform:translateY(-3px)}
.post-card .thumb{aspect-ratio:16/10;overflow:hidden;background:var(--ice)}
.post-card .thumb img{width:100%;height:100%;object-fit:cover}
.post-card .body{padding:1.35rem 1.45rem 1.6rem;flex:1;display:flex;flex-direction:column}
.post-meta{font-size:.83rem;color:var(--muted);margin-bottom:.5rem}
.post-card h3{font-size:1.13rem}
.entry-content{max-width:780px}
.entry-content img{border-radius:var(--radius);margin:1.8rem 0}
.pagination{display:flex;gap:.5rem;justify-content:center;margin-top:2.8rem;flex-wrap:wrap}
.pagination .page-numbers{
  padding:.6em 1em;border-radius:9px;border:1px solid var(--line);color:var(--ink);font-weight:600;
}
.pagination .current{background:var(--navy);color:#fff;border-color:var(--navy)}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .g4,.species,.gallery{grid-template-columns:repeat(3,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr;gap:2rem}
  .post-list{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  body{font-size:16px}
  .nav-toggle{display:block}
  .header-cta{display:none}
  .main-nav{
    position:fixed;inset:82px 0 auto;background:#fff;border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-h);padding:1rem 22px 1.6rem;display:none;max-height:calc(100vh - 82px);overflow:auto;
  }
  .main-nav.open{display:block}
  .main-nav ul{flex-direction:column;align-items:stretch;gap:0}
  .main-nav a{padding:.9rem .6rem;border-bottom:1px solid var(--line);border-radius:0}
  .main-nav .sub-menu{position:static;display:flex;border:0;box-shadow:none;padding:0 0 0 1rem;min-width:0}
  .g2,.g3,.g4,.steps,.split,.species,.post-list,.field-row{grid-template-columns:1fr}
  .factbar .grid{grid-template-columns:repeat(2,1fr)}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .split-media{order:-1}
  .hero-meta{gap:1.2rem}
  .topbar-facts span:nth-child(n+3){display:none}
  .wa-float span{display:none}
  .wa-float{padding:.95em;border-radius:50%}
}
@media (max-width:560px){
  /* la barre haute doit tenir sur une seule ligne */
  .topbar-facts span:nth-child(n+2){display:none}
}
@media (max-width:480px){
  .footer-grid{grid-template-columns:1fr}
  .brand img{height:38px}
  .header-inner{min-height:68px}
  .main-nav{inset:68px 0 auto}
  .hero-actions .btn{width:100%;justify-content:center}
}

/* ==========================================================================
   Harmonisation typographique : titres centres, textes justifies
   (place en fin de feuille pour primer sur les regles precedentes)
   ========================================================================== */

/* --- Titres centres UNIQUEMENT dans les blocs eux-memes centres ---
   Un titre centre au-dessus d'un texte au fer a gauche donne une composition
   bancale : on ne centre donc que la ou tout le bloc l'est. */
.section-head,
.section-head h2,
.section-head .eyebrow,
.section-head p,
.page-hero-inner,
.page-hero h1,
.cta h2,
.cta p,
.card.equipe h3,
.card.equipe p,
.factbar .cell{
  text-align:center;
}

/* --- Titres au fer a gauche : ils coiffent un texte au fer a gauche --- */
.split h2, .split h3, .split .eyebrow,
.card h3, .card h4, .step h4,
.pole-body h3, .spec-body h3,
.contact-item h4,
.entry-content h2, .entry-content h3,
.callout strong,
.faq summary{
  text-align:left;
}

/* --- Textes justifies ---
   Uniquement dans les colonnes assez larges : justifier un texte de carte
   (3 lignes sur 230 px) creerait des rivieres de blanc entre les mots. */
.entry-content p, .entry-content li,
.split > div > p, .split li, .checks li,
.faq details p,
.hero-lead, .lead{
  text-align:justify;
  text-justify:inter-word;
  hyphens:auto;
  -webkit-hyphens:auto;
}

/* Micro-textes des cartes : fer a gauche, plus lisible sur 3 lignes */
.card p, .step p, .pole-body p, .spec-body p, .contact-item p,
.card li, .card-on-navy p,
.callout p{                 /* encadre court, truffe de numeros et d'adresses
                               insecables : justifier y creuse des rivieres */
  text-align:left;
  hyphens:manual;
}

/* --- Chapeaux de section : centres, non justifies (texte court) --- */
.section-head{margin-left:auto;margin-right:auto;text-align:center}
.section-head p{text-align:center;hyphens:manual}
.eyebrow{text-align:center}

/* --- Hero : bloc centre, boutons centres --- */
.hero-inner, .page-hero-inner{margin-left:auto;margin-right:auto;text-align:center}
.hero-lead{margin-left:auto;margin-right:auto}
.hero-actions, .hero-eyebrow{justify-content:center}
.hero-eyebrow{display:inline-flex}
.hero-meta{justify-content:center;text-align:center}
.breadcrumb{text-align:center}

/* --- Blocs a deux colonnes : tout au fer a gauche, bouton compris --- */
.split .btn{display:inline-flex;width:auto;margin-left:0;margin-right:0}
.split .cert-row{margin-left:0;margin-right:0}

/* --- Ce qui ne doit surtout PAS etre justifie ni centre --- */
.topbar, .topbar *,
.main-nav, .main-nav *,
.site-footer, .site-footer *,
.btn, .chip, .spec-cal, .spec-local,
.field label, .field-hint, .form-notice,
th, td, table *,
.post-meta, .pagination, .pagination *,
.faq summary,
.badge-cert{
  text-align:left;
  hyphens:manual;
}
.site-footer h4{text-align:left}
.btn{text-align:center}
.pagination{text-align:center}
.factbar .cell, .factbar .n, .factbar .l{text-align:center}
figcaption, .fig-legende{text-align:center;hyphens:manual}
.cta p{text-align:center;hyphens:manual}
.center-txt{text-align:center}

/* La justification sur une colonne etroite cree des blancs disgracieux :
   sur mobile on repasse tout au fer a gauche.
   Les selecteurs reprennent exactement ceux de la regle de justification,
   sinon `.split > div > p` (plus specifique) continue de gagner. */
@media (max-width:820px){
  .entry-content p, .entry-content li,
  .callout p,
  .split > div > p, .split p, .split li, .checks li,
  .faq details p,
  .section p, .section li,
  .card p, .step p, .pole-body p,
  .hero-lead, .hs-lead, .lead,
  .section-head p{
    text-align:left;
    hyphens:manual;
  }
}

/* ==========================================================================
   Mobile : contenus larges (tableaux, schemas)
   ========================================================================== */
@media (max-width:760px){
  /* Le tableau des especes ne tient pas sur 390 px.
     On retire la colonne « Conditionnement », identique sur toutes les lignes
     et deja indiquee ailleurs, plutot que d'imposer un defilement lateral. */
  .section table{font-size:.88rem}
  .section th, .section td{padding:.65rem .5rem}
  .section thead th:nth-child(4),
  .section tbody td:nth-child(4){display:none}
  .section td[colspan]{display:table-cell}
  .chip{padding:.15em .45em;font-size:.72rem}

  /* Les schemas larges restent lisibles : on les fait defiler
     dans leur propre cadre au lieu de les ecraser. */
  figure:has(> .img-full){
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    border-radius:var(--radius);
  }
  figure:has(> .img-full) .img-full{
    min-width:680px;
    max-width:none;
  }
  figure:has(> .img-full)::after{
    content:"↔ faites glisser pour voir le schéma en entier";
    display:block;position:sticky;left:0;
    font-size:.78rem;color:var(--muted);padding:.5rem 0 0;
  }
}

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

@media print{
  .topbar,.site-header,.wa-float,.cta,.site-footer{display:none}
  body{font-size:12pt;color:#000}
}