/* ========== Variables & Reset ========== */
:root{
  --blue-900:#1A1F36; /* bleu nuit */
  --blue-500:#5E8CE6; /* bleu ciel (CTA) */
  --ivory:#F9FAFB;    /* ivoire clair */
  --text:#0F172A;     /* bleu-noir lisible */
  --muted:#4B5563;    /* gris texte */
  --card:#FFFFFF;
  --radius:16px;
  --shadow:0 10px 25px rgba(16,24,40,.08);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.6;
  background:#fff;
}

/* ========== Typography ========== */
h1,h2,h3,h4{font-family:Montserrat,Inter,Arial,sans-serif; margin:0 0 .5rem 0}
h1{font-size:clamp(2rem,3.6vw,3rem); line-height:1.2}
h2{font-size:clamp(1.5rem,2.4vw,2rem)}
h3{font-size:1.25rem}
h4{font-size:1.1rem}
.lede{font-size:1.125rem}
.muted{color:var(--muted)}
.tiny{font-size:.85rem}

/* ========== Layout ========== */
.container{width:min(1120px,90%); margin:0 auto}
.section{padding:64px 0}
.section.alt{background:var(--ivory)}
.grid-2 {  display: grid;  grid-template-columns: repeat(2, minmax(0,1fr));  gap: 24px;}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:24px}

@media (max-width: 720px) {
  .grid-2 { grid-template-columns: 1fr; }
}

.card{
  background:var(--card);
  border-radius:var(--radius);
  padding:24px;
  box-shadow:var(--shadow);
  color: black;
}
.card.price {
  display: flex;
  flex-direction: column;
}

.card.price .btn {
  margin-top: auto; /* C'est la magie ! Pousse le bouton vers le bas. */
}
.card.price .price-tag{margin:.5rem 0 1rem 0; color:var(--blue-900)}

/* ========== Header ========== */
.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--blue-900); color:#fff; border-bottom:1px solid rgba(255,255,255,.08);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand img{display:block}

.nav-toggle{
  display:none; width:40px; height:40px; border:1px solid rgba(255,255,255,.2);
  background:transparent; color:#fff; border-radius:10px; position:relative;
}
.nav-toggle-bar{position:absolute; inset:0; margin:auto; width:22px; height:2px; background:#fff; box-shadow:0 6px 0 #fff, 0 -6px 0 #fff}
.nav-menu{display:flex; gap:18px; align-items:center; list-style:none; margin:0; padding:0}
.nav-menu a{color:#fff; text-decoration:none; font-weight:500; opacity:.95}
.nav-menu a:hover{opacity:1}

/* ========== Hero ========== */
.hero{background:var(--blue-900); color:#fff}
.hero-inner{display:grid; grid-template-columns:1.1fr .9fr; gap:32px; align-items:center; padding:68px 0}
.hero-media img{width:100%; height:auto; border-radius:20px; box-shadow:var(--shadow)}

/* ========== Buttons ========== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 18px; border-radius:12px; text-decoration:none; font-weight:600; border:1px solid transparent;
}
.btn-primary{background:var(--blue-500); color:#fff; border-color:var(--blue-500)}
.btn-primary:hover{filter:brightness(1.05)}
.btn-secondary{background:#fff; color:var(--blue-900); border-color:#fff}
.btn-cta{background:var(--blue-500); padding:10px 14px; border-radius:10px}

/* ========== Mini cards ========== */
.mini{
  background:#fff; border-radius:14px; padding:18px; box-shadow:var(--shadow);
}

/* ========== Forms ========== */
.contact-form{margin-top:16px}
.form-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
.form-grid .full{grid-column:1 / -1}
label span{display:block; font-weight:600; margin-bottom:8px}
input,textarea{
  width:100%; padding:12px 14px; border:1px solid #E5E7EB; border-radius:12px; font:inherit;
  background:#fff;
}
input:focus,textarea:focus{outline:2px solid var(--blue-500); border-color:transparent}
.form-status{margin-top:10px; min-height:1.2em}

/* ========== Footer ========== */
.site-footer{background:var(--blue-900); color:#D1D5DB; padding:32px 0}
.footer-inner{display:flex; align-items:center; justify-content:space-between}
.foot-nav a{color:#D1D5DB; text-decoration:none; margin-left:16px}
.foot-nav a:hover{color:#fff}

/* ========== Responsive ========== */
@media (max-width: 980px){
  .grid-3{grid-template-columns:1fr}
  .grid-4{grid-template-columns:1fr 1fr}
  .hero-inner{grid-template-columns:1fr; text-align:center}
  .hero-actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
  .nav-toggle{display:inline-block}
  .nav-menu{
    position:absolute; right:5%; top:70px; background:var(--blue-900);
    padding:14px; border-radius:14px; flex-direction:column; align-items:flex-start;
    display:none; width:220px; box-shadow:var(--shadow);
  }
  .nav-menu.show{display:flex}
}
@media (max-width: 640px){
  .form-grid{grid-template-columns:1fr}
}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
/* Note Shopify */
.note-shopify{
  margin:16px 0 8px 0; padding:12px 14px;
  background:#FFF7ED; /* orange-50 doux */
  border:1px solid #FED7AA; /* orange-200 */
  border-radius:12px; color:#7C2D12; /* orange-900 */
  font-size:.95rem;
}
.cta-row{display:flex; gap:12px; margin-top:12px; flex-wrap:wrap}

/* Reveal on scroll */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease}
.reveal.in-view{opacity:1; transform:none}

/* Respecter le prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .reveal{transition:none}
}
.nav-menu .lang{opacity:.9; display:flex; gap:8px; align-items:center; margin-left:6px}
.nav-menu .lang a{opacity:.9}
.nav-menu .lang a:hover{opacity:1; text-decoration:underline}

.card{ transition: transform .2s ease, box-shadow .2s ease }
.card:hover{ transform: translateY(-4px); box-shadow: 0 16px 32px rgba(16,24,40,.12) }

.hero-copy, .hero-media{ opacity:0; transform:translateY(12px); animation:fadeUp .6s ease .1s forwards }
.hero-media{ animation-delay:.2s }
@keyframes fadeUp{ to{ opacity:1; transform:none } }


.imgarticles{
  width: 300px;
 }
 .icoarticles{
  width: 50px;
 }

/* Accent visuel sur #dev (garde ton dev-bg.jpg si tu veux) */
.dev-section{
  background: url('../assets/dev-bg.jpg') no-repeat center/cover;
  position: relative; color:#fff;
}
.dev-section::before{ content:""; position:absolute; inset:0; background:rgba(26,31,54,.72) }
.dev-section .container{ position:relative; z-index:1; text-align:center }
.dev-section h2, .dev-section p{ color:#fff }

/* Petits badges optionnels pour les titres de cartes */
.card h3{ display:flex; align-items:center; gap:8px }
.card h3::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background: var(--blue-500);
}

/* ===== Toast ===== */
.toast{
  position: fixed;
  inset: auto 16px 16px auto; /* bottom-right */
  max-width: min(540px, 90vw);
  background: #101828; /* dark neutral */
  color: #fff;
  padding: 12px 14px;
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(16,24,40,.24);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .28s ease, transform .28s ease;
  z-index: 9999;
  font-size: 0.95rem;
}
.toast.show{
  opacity: 1;
  transform: translateY(0);
}
.toast.success{ background:#0E7A3E }   /* vert discret */
.toast.error{ background:#B42318 }     /* rouge discret */

/* Respect du prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .toast{ transition: none }
}

/* ===== Form grid : e-mail 2× plus large ===== */
.form-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}
.form-grid label.full{ grid-column: 1 / -1; } /* tu l’as déjà sûrement */
.form-grid label.wide{ grid-column: span 2; }  /* e-mail prendra 2 colonnes */

@media (max-width: 720px){
  .form-grid{ grid-template-columns: 1fr; }
  .form-grid label.wide{ grid-column: 1 / -1; } /* mobile : 100% largeur */
}

/* ===== Bloc Vision (texte 2/3 + image 1/3) ===== */
.grid-illustr{
  display: grid;
  grid-template-columns: 2fr 1fr;   /* texte large, image étroite (à droite) */
  gap: 28px;
  align-items: center;
}

.vision-copy h2{
  margin-bottom: .5rem;
}
.vision-copy .muted{
  line-height: 1.7;
  font-size: 1.05rem;
}

.vision-illustr{
  margin: 0;
}
.vision-illustr img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(16,24,40,.12);
  /* douce apparition comme le hero */
  opacity: 0;
  transform: translateY(10px);
  animation: fadeUp .6s ease .2s forwards;
}

/* Responsive : pile en colonne sur mobile */
@media (max-width: 920px){
  .grid-illustr{
    grid-template-columns: 1fr;
  }
  .vision-illustr{
    order: 2;     /* garder le texte en premier sur mobile */
    max-width: 600px;
    justify-self: center;
  }
}

/* Respecte prefers-reduced-motion (si tu l’as déjà, ignore) */
@media (prefers-reduced-motion: reduce){
  .vision-illustr img{ animation: none; opacity: 1; transform: none; }
}