/* ============================================================
   EXPERT NUISIBLES 3D 32 — Design system v2
   Concept : la fiche d'intervention terrain — papier technique,
   tampon d'agrément, rubans de sécurité, typographie de rapport.
   Palette : papier / encre / jaune sécurité / rouge alerte
   Type : Oswald (display condensé) + IBM Plex Mono (labels/data)
   ============================================================ */

:root{
  --paper: #F1EDE1;        /* papier technique */
  --paper-alt: #E7E0CC;    /* variation, sections alternées */
  --ink: #17140E;          /* encre quasi-noire */
  --ink-soft: #3A362B;
  --hazard: #EEBF1F;       /* jaune sécurité — accent structurel */
  --alert: #C1272D;        /* rouge alerte — urgence, CTA */
  --alert-dark: #9C1F24;
  --line: #C9C0A4;         /* traits, pointillés */
  --white: #FFFFFF;
  --radius: 0px;           /* pas d'arrondi — esthétique document/tampon */
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }

body{
  background: var(--paper);
  color: var(--ink);
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:'Oswald', Arial, sans-serif;
  text-transform: uppercase;
  color: var(--ink);
  line-height:1.05;
  letter-spacing:.005em;
  font-weight:700;
}
h1{ font-size: clamp(2.3rem, 5.4vw, 4rem); }
h2{ font-size: clamp(1.5rem, 3vw, 2.2rem); margin-bottom:18px; }
h3{ font-size:1.15rem; margin-bottom:10px; letter-spacing:.01em; }

p{ margin-bottom:1rem; max-width:60ch; }
a{ color:var(--ink); }
img{ max-width:100%; display:block; }

.container{ max-width:1160px; margin:0 auto; padding:0 24px; }
.section{ padding:80px 0; }
.section-alt{ background: var(--paper-alt); }
.section-ink{ background: var(--ink); color: var(--paper); }
.section-ink h1, .section-ink h2, .section-ink h3{ color:var(--paper); }

/* ---------- Ruban de sécurité (device de marque) ---------- */
.hazard-strip{
  height:10px;
  width:100%;
  background: repeating-linear-gradient(135deg,
    var(--hazard) 0 16px,
    var(--ink) 16px 32px);
}

/* ---------- Étiquette / tag mono ---------- */
.tag{
  display:inline-block;
  font-family:'IBM Plex Mono', monospace;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:4px 10px;
  background: var(--ink);
  color: var(--paper);
}
.tag-alert{ background: var(--alert); color:var(--white); }
.tag-outline{ background:transparent; border:1.5px solid var(--ink); color:var(--ink); }

.eyebrow{
  display:flex; align-items:center; gap:10px;
  font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  color: var(--alert); margin-bottom:16px; font-weight:600;
}
.eyebrow::before{ content:""; width:22px; height:2px; background:var(--alert); display:inline-block; }

/* ---------- Header ---------- */
.site-header{
  background: var(--paper);
  border-bottom: 2px solid var(--ink);
  position: sticky; top:0; z-index:100;
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px; max-width:1160px; margin:0 auto; gap:20px; flex-wrap:wrap;
}
.logo{
  font-family:'Oswald', sans-serif; font-weight:700; text-transform:uppercase;
  font-size:1.05rem; letter-spacing:.01em; color:var(--ink); line-height:1.05;
}
.logo span{
  display:block; font-family:'IBM Plex Mono', monospace; font-weight:400;
  font-size:.62rem; letter-spacing:.12em; color:var(--ink-soft); text-transform:uppercase; margin-top:4px;
}
nav.main-nav{ display:flex; gap:26px; flex-wrap:wrap; }
nav.main-nav a{
  font-family:'IBM Plex Mono', monospace;
  font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:500;
  padding-bottom:4px; border-bottom:2px solid transparent;
}
nav.main-nav a:hover, nav.main-nav a.active{ color:var(--ink); border-bottom-color:var(--hazard); }
.header-cta{ display:flex; gap:10px; align-items:center; }

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 24px;
  font-family:'IBM Plex Mono', monospace;
  font-weight:600; font-size:.82rem;
  letter-spacing:.08em; text-transform:uppercase;
  border:2px solid var(--ink);
  cursor:pointer;
  transition: transform .1s ease, background .15s ease, color .15s ease;
}
.btn:hover{ transform: translate(-2px,-2px); }
.btn-alert{ background:var(--alert); border-color:var(--alert); color:var(--white); }
.btn-alert:hover{ background:var(--alert-dark); border-color:var(--alert-dark); }
.btn-ink{ background:var(--ink); color:var(--paper); }
.btn-ink:hover{ background:var(--ink-soft); }
.btn-ghost{ background:transparent; color:var(--paper); border-color:var(--paper); }
.btn-ghost:hover{ background:var(--paper); color:var(--ink); }
.btn-ghost-dark{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn-ghost-dark:hover{ background:var(--ink); color:var(--paper); }
.btn-sm{ padding:8px 14px; font-size:.72rem; }

/* ---------- Hero ---------- */
.hero{ background:var(--ink); color:var(--paper); padding:64px 0 76px; }
.hero-grid{
  display:grid; grid-template-columns: 1.5fr 1fr; gap:48px; align-items:center;
}
@media (max-width:860px){ .hero-grid{ grid-template-columns:1fr; } }
.hero h1{ color:var(--paper); }
.hero .lead{ color:#CFC8B4; font-size:1.08rem; max-width:52ch; font-family:'IBM Plex Mono',monospace; line-height:1.7; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:28px; }

.hero-checklist{ list-style:none; margin-top:34px; display:flex; flex-direction:column; gap:10px; }
.hero-checklist li{ font-size:.85rem; color:#CFC8B4; display:flex; gap:10px; align-items:baseline; }
.hero-checklist li::before{ content:"✓"; color:var(--hazard); font-weight:700; }

/* ---------- Tampon SVG ---------- */
.stamp-wrap{ display:flex; justify-content:center; }
.stamp{ width:190px; height:190px; color:var(--hazard); }
@media (max-width:860px){ .stamp{ width:130px; height:130px; } }

/* ---------- Fiches / cartes ticket ---------- */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:40px; border-top:2px solid var(--ink); border-left:2px solid var(--ink); }
@media (max-width:860px){ .grid-3{ grid-template-columns:1fr; } }

.ticket{
  position:relative;
  background:var(--paper);
  padding:32px 26px;
  border-right:2px solid var(--ink);
  border-bottom:2px solid var(--ink);
}
.ticket .tag{ margin-bottom:16px; }
.ticket a.card-link{
  display:inline-block; margin-top:6px;
  font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--alert); border-bottom:2px solid var(--alert);
}

/* ---------- Étapes / protocole ---------- */
.protocol{ margin-top:40px; display:flex; flex-direction:column; }
.protocol-step{
  display:grid; grid-template-columns:90px 1fr; gap:24px;
  padding:26px 0; border-bottom:1.5px dashed var(--line);
  align-items:start;
}
.protocol-step:first-child{ border-top:1.5px dashed var(--line); }
.protocol-step .step-no{
  font-family:'Oswald', sans-serif; font-weight:700; font-size:2.6rem;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ink);
}

/* ---------- Bande de confiance ---------- */
.trust-strip{
  display:flex; flex-wrap:wrap; gap:0;
  border:2px solid var(--ink);
}
.trust-strip span{
  flex:1; min-width:150px;
  text-align:center;
  padding:16px 12px;
  font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; font-weight:600;
  border-right:2px solid var(--ink);
}
.trust-strip span:last-child{ border-right:none; }
@media (max-width:700px){ .trust-strip span{ border-right:none; border-bottom:2px solid var(--ink); } .trust-strip span:last-child{ border-bottom:none; } }

/* ---------- Formulaire ---------- */
.form-panel{
  background:var(--white);
  border:2px solid var(--ink);
  padding:8px;
  max-width:680px;
  margin:36px auto 0;
  position:relative;
}
.form-panel::before{
  content:"FICHE DE DEMANDE — À COMPLÉTER";
  position:absolute; top:-13px; left:16px;
  background:var(--hazard); color:var(--ink);
  font-family:'IBM Plex Mono',monospace; font-size:.66rem; letter-spacing:.1em;
  padding:3px 10px; font-weight:700;
}
.tally-embed-note{ font-size:.78rem; color:var(--ink-soft); text-align:center; margin-top:12px; letter-spacing:.02em; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--ink); color:#C9C2AC; padding:56px 0 26px; font-size:.85rem; }
.footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:36px; padding-bottom:30px; border-bottom:1.5px solid #3A362B; }
@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-grid h4{ color:var(--paper); font-family:'Oswald',sans-serif; text-transform:uppercase; font-size:.85rem; letter-spacing:.06em; margin-bottom:14px; }
.footer-grid a{ color:#C9C2AC; display:block; margin-bottom:9px; font-size:.85rem; }
.footer-grid a:hover{ color:var(--hazard); }
.footer-bottom{ padding-top:22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:.72rem; color:#847C68; letter-spacing:.03em; }

/* ---------- Bouton WhatsApp flottant ---------- */
.wa-float{
  position:fixed; right:22px; bottom:22px; z-index:999;
  display:flex; align-items:center; gap:10px;
  background:#25D366; color:#fff;
  padding:14px 18px 14px 14px;
  border:2px solid var(--ink);
  font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:.82rem; letter-spacing:.03em;
  text-transform:uppercase;
  box-shadow:4px 4px 0 var(--ink);
  transition: transform .12s ease;
}
.wa-float:hover{ transform: translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink); }
.wa-float svg{ width:24px; height:24px; flex-shrink:0; }
@media (max-width:600px){ .wa-float span{ display:none; } .wa-float{ padding:14px; } }

.ticket .thumb{
  width:100%; height:150px; object-fit:cover;
  border:2px solid var(--ink); margin-bottom:16px;
  filter:grayscale(15%);
}

/* ---------- Photo (cadre document) ---------- */
.photo-frame{
  border:2px solid var(--ink);
  background:var(--paper);
  padding:8px;
  max-width:640px;
  margin:32px auto 0;
}
.photo-frame img{ width:100%; display:block; }
.photo-frame figcaption{
  padding:12px 4px 4px;
  font-size:.78rem; letter-spacing:.03em; color:var(--ink-soft);
}

/* ---------- FAQ (accordéon) ---------- */
.faq{ max-width:760px; margin:36px auto 0; border-top:2px solid var(--ink); }
.faq-item{ border-bottom:2px solid var(--ink); }
.faq-item summary{
  cursor:pointer; list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:20px 4px;
  font-family:'Oswald', sans-serif; text-transform:uppercase; font-weight:700;
  font-size:1rem; letter-spacing:.01em;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; font-family:'IBM Plex Mono',monospace; font-size:1.3rem; font-weight:700;
  color:var(--alert); flex-shrink:0;
}
.faq-item[open] summary::after{ content:"–"; }
.faq-item p{ padding:0 4px 22px; color:var(--ink-soft); max-width:65ch; }

/* ---------- Utilitaires ---------- */
.text-center{ text-align:center; }
.section-head{ max-width:660px; margin:0 auto 8px; text-align:center; }
.section-head p{ margin:0 auto; }
.mx-auto{ margin-left:auto; margin-right:auto; }