/* ========== Thème & bases ========== */
:root{
  --bg:#FAF7F2;      /* crème doux */
  --paper:#FFFFFF;   /* cartes / panneaux */
  --ink:#0F172A;     /* texte principal */
  --muted:#475569;   /* texte secondaire */
  --line:#E5E7EB;    /* bordures claires */
  --accent:#0A005D;  /* bleu foncé demandé */
  --radius:16px;
  --shadow:0 10px 28px rgba(15,23,42,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
/* Logo image in header */
.logo{
  height:60px; /* plus grand */
  width:auto;
  display:block;
  object-fit:contain;
  background:transparent; /* s'il y a une transparence dans ton PNG */
}
@media (max-width:640px){
  .logo{height:48px}
}
body{
  margin:0;
  font-family:Manrope,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink); background:var(--bg);
  line-height:1.6; letter-spacing:.01em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
.container{width:min(1140px,92vw); margin-inline:auto}

/* Sections (paddings resserrés + ancrage propre) */
.section{padding:clamp(2.2rem,4.5vw,3.6rem) 0}
section{scroll-margin-top:98px} /* évite que l’ancre colle sous la topbar */

/* ========== Topbar ========== */
.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(250,247,242,.9);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.topbar-inner{display:flex; align-items:center; justify-content:space-between; min-height:86px}
.shortcuts{display:flex; gap:1rem; align-items:center}
.link-cta{
  padding:.5rem .9rem; border:1px solid var(--line);
  border-radius:999px; background:var(--paper); box-shadow:var(--shadow)
}
.hero-img {
  border-radius: 8px; /* arrondi léger */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* ombre subtile */
  width: 400px; /* un peu plus grande que le conteneur */
  height: auto;
}
@media (max-width: 980px){
  .hero-img { width: 100%; }
}

/* ========== HERO (ajustements majeurs) ========== */
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:1.4rem; align-items:center}
/* Réduction de la taille visuelle des images du HERO */
#hero .hero-media{max-width:560px; justify-self:end}
.highlight{background:var(--accent); color:#fff; padding:.08em .35em; border-radius:.4em}

/* iPhone/iPad optimisations for hero visuals */
@media (max-width: 980px){
  #hero .hero-media{max-width:420px; justify-self:center; margin-top:.6rem}
}
@media (max-width: 640px){
  .gallery img{aspect-ratio:3/2}
}


/* Titre “impact” + soulignement premium */
#hero h1{
  font-size:clamp(2.2rem, 1.2rem + 2.6vw, 3.2rem);
  font-weight:800;
  line-height:1.12;
  letter-spacing:.005em;
  margin:0 0 .9rem;
  /* soulignement discret haut de gamme, sans toucher au HTML */
  background-repeat:no-repeat;
  background-size:100% .42em;
  background-position:0 88%;
}

/* Moins d’espace en haut du héros */
#hero.section{padding-top:clamp(1.3rem, 3vw, 2rem)}

/* Texte & badges */
.hero .lead{color:var(--muted); margin:0 0 1rem}
.badges{display:flex; gap:.6rem; flex-wrap:wrap; margin:1rem 0 1.2rem}
.badges li{
  list-style:none; font-size:.95rem; color:#2b3341;
  padding:.42rem .7rem; border-radius:999px;
  border:1px solid var(--line); background:var(--paper); box-shadow:var(--shadow)
}

/* Galerie à droite du hero */
.gallery{display:grid; gap:.6rem}
.gallery img{border-radius:var(--radius); box-shadow:var(--shadow); aspect-ratio:4/3; object-fit:cover}

/* ========== Layouts généraux ========== */
.split{display:grid; grid-template-columns:1.1fr .9fr; gap:1.2rem; align-items:center}
.split.reverse{grid-template-columns:.9fr 1.1fr}
.copy .lead{color:var(--muted)}
.illu img{border-radius:var(--radius); border:1px solid var(--line); box-shadow:var(--shadow)}
/* Sections alternées : fond blanc pur, sans dégradé */
.alt {
  background: #FFFFFF;
}
.section.alt {
  border-top: 1px solid var(--line); /* séparation simple et nette */
  padding-top: clamp(2.2rem, 4.5vw, 3.6rem);
}

/* ========== Listes avec icônes ========== */
.icon-list{display:grid; gap:.8rem; margin-top:1rem}
.icon-list .item{display:grid; grid-template-columns:40px 1fr; gap:.7rem; align-items:flex-start}
.ico{
  width:40px; height:40px; border-radius:12px; border:1px solid var(--line);
  background:var(--paper); display:grid; place-items:center; box-shadow:var(--shadow)
}
.ico svg{
  width:22px; height:22px; stroke:var(--accent); stroke-width:1.8;
  fill:none; stroke-linecap:round; stroke-linejoin:round
}
.note{
  margin-top:1rem; background:var(--paper); border:1px solid var(--line);
  border-left:4px solid var(--accent); padding:.9rem 1rem;
  border-radius:12px; color:#334155
}

/* ========== Grilles cartes / puces ========== */
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem}
.cards .card{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius); padding:1rem; box-shadow:var(--shadow)
}
.cards .card h3{margin:.1rem 0 .4rem}
.cards.inline{display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1rem}
.pill{padding:.35rem .65rem; border-radius:999px; border:1px solid var(--line); background:var(--paper)}
.note{margin-top:.8rem; color:#334155}

/* ========== Méthode (steps) ========== */
.steps{
  display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem;
  counter-reset:step;
  list-style:none; padding-left:0; margin-left:0;
}
.step-card{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius); padding:1rem; box-shadow:var(--shadow); position:relative
}
.step-card h3{margin:.2rem 0 .35rem; padding-left:2rem}
.step-card h3::before{
  counter-increment:step; content:counter(step);
  position:absolute; left:.8rem; top:1rem;
  width:24px; height:24px; display:grid; place-items:center;
  border-radius:999px; background:var(--accent); color:#fff;
  font-weight:700; font-size:.9rem
}

/* ========== Thumbs (qualité visuelle) ========== */
.thumbs{display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem}
.thumbs img{border-radius:12px; border:1px solid var(--line); box-shadow:var(--shadow); aspect-ratio:4/3; object-fit:cover}

/* ========== Quote (qui sommes‑nous) ========== */
.quote{
  background:var(--paper); border:1px solid var(--line);
  border-left:4px solid var(--accent); padding:1rem;
  border-radius:12px; font-weight:700; color:#111827; box-shadow:var(--shadow)
}

/* ========== Tags (zones) ========== */
.tags{display:flex; gap:.6rem; flex-wrap:wrap; margin:.8rem 0}
.tag{padding:.35rem .7rem; border-radius:999px; border:1px solid var(--line); background:var(--paper)}
.small{color:#334155; font-size:0.95rem}

/* ========== FAQ ========== */
.faq-item{
  background:var(--paper); border:1px solid var(--line);
  border-radius:12px; padding:.8rem 1rem; box-shadow:var(--shadow);
  margin:.6rem 0
}
.faq-item summary{cursor:pointer; font-weight:700}
.faq-body{color:#334155; margin-top:.5rem}

/* ========== Contact ========== */
.contact-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:1rem}
.form{
  display:grid; gap:.8rem; background:var(--paper); border:1px solid var(--line);
  padding:1rem; border-radius:var(--radius); box-shadow:var(--shadow)
}
.form label{font-size:.96rem; color:#111827; display:grid; gap:.35rem}
.form input,.form select,.form textarea{
  width:100%; padding:.85rem .95rem; border-radius:12px; border:1px solid var(--line);
  background:#FDFDFE; color:#111827; font-size:1rem
}
.form textarea{min-height:120px; resize:vertical}
.row-2{display:grid; grid-template-columns:1fr 1fr; gap:.6rem}
.row-3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:.6rem}
.form-status{margin-top:.4rem; color:#14532d}
.contact-card{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:1rem; box-shadow:var(--shadow)}

/* ========== Boutons ========== */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.9rem 1.15rem; border-radius:999px; font-weight:800;
  border:1px solid var(--line); background:var(--paper); box-shadow:var(--shadow);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease
}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:var(--accent); color:#fff; border-color:var(--accent)}
.btn.ghost{background:var(--paper); color:var(--accent); border-color:var(--line)}

/* ========== Footer ========== */
.footer{padding:1.6rem 0; border-top:1px solid var(--line); color:#334155}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:.8rem; flex-wrap:wrap}

/* ========== Responsive ========== */
@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr}
  .split,.split.reverse{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr}
  .shortcuts{display:none}
}
@media (max-width: 640px){
  .steps{grid-template-columns:1fr}
  .row-2,.row-3{grid-template-columns:1fr}
  .thumbs{grid-template-columns:1fr}
}

/* Brand link styles for clickable logo */
.brand-link {
  display: inline-block;
  text-decoration: none;
}
.brand-link:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}