/* ============================================================
   OPTIMAT SAM — site.css
   Feuille de style partagée : reset léger, header, footer,
   navigation mobile, et utilitaires d'animation communs à toutes
   les pages (révélation au scroll, compteurs).
   Chaque page garde son propre bloc <style> pour son contenu
   spécifique (namespaces .op-home / .op-sol / .op-eng / .op-contact
   / .op-blog / .op-legal) ; ce fichier ne couvre que ce qui est
   strictement identique sur toutes les pages.
   ============================================================ */

:root{
  --op-red: #E52627;
  --op-red-hover: #c91f20;
  --op-ink: #181818;
  --op-text: #333333;
  --op-white: #FFFFFF;
  --op-beige: #F4F2EF;
  --op-line: #E7E3DC;
  --op-font-serif: "Playfair Display", Georgia, serif;
  --op-font-sans: "DM Sans", Arial, sans-serif;
  --op-header-h: 84px;
  --op-header-h-mobile: 64px;
  /* Accent écologique — touches de vert réservées aux contenus environnementaux
     (flotte, déchets, Pacte National...). Le rouge reste la couleur de marque
     principale (CTA, navigation) ; le vert est un accent secondaire, jamais
     utilisé pour un CTA ou la navigation. */
  --op-green: #2F6B4F;
  --op-green-dark: #1F4B3D;
  --op-green-light: #8FC3A3;
  --op-green-tint: #EAF3ED;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--op-font-sans);
  color:var(--op-text);
  background:var(--op-white);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; }
a{ color:inherit; }

/* Toute section ciblée par une ancre doit rester visible sous le header sticky */
section[id]{ scroll-margin-top: calc(var(--op-header-h) + 16px); }

/* Lien d'évitement clavier */
.op-skip-link{
  position:absolute; left:-999px; top:auto;
  background:var(--op-ink); color:#fff; padding:12px 18px; z-index:2000;
  font-family:var(--op-font-sans); font-size:13px; font-weight:600; border-radius:0 0 6px 0;
}
.op-skip-link:focus{ left:0; top:0; }

/* ============ RÉVÉLATION AU SCROLL + COMPTEURS (partagé) ============ */
.op-reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .65s cubic-bezier(.22,.61,.36,1), transform .65s cubic-bezier(.22,.61,.36,1);
}
.op-reveal.is-visible{ opacity:1; transform:translateY(0); }
.op-reveal-scale{ opacity:0; transform:scale(1.04); transition:opacity .8s ease, transform .8s ease; }
.op-reveal-scale.is-visible{ opacity:1; transform:scale(1); }
@media (prefers-reduced-motion: reduce){
  .op-reveal, .op-reveal-scale{ opacity:1; transform:none; transition:none; }
}

/* ============ HEADER ============ */
.op-site-header{
  position:sticky; top:0; z-index:1000;
  background:rgba(255,255,255,.96); backdrop-filter:saturate(180%) blur(6px);
  border-bottom:1px solid var(--op-line);
  height:var(--op-header-h);
}
.op-site-header-inner{
  max-width:1260px; margin:0 auto; height:100%; padding:0 40px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.op-logo{
  font-family:var(--op-font-serif); font-weight:600; font-size:24px; color:var(--op-ink);
  text-decoration:none; letter-spacing:.01em; flex:none;
}
.op-logo span{ color:var(--op-red); }
.op-logo--img{ display:flex; align-items:center; }
.op-logo--img img{ display:block; height:40px; width:auto; }
@media (max-width:980px){
  .op-logo--img img{ height:32px; }
}
.op-nav{ display:flex; align-items:center; gap:30px; }
.op-nav a{
  font-family:var(--op-font-sans); font-size:14px; font-weight:600; color:var(--op-ink);
  text-decoration:none; padding:6px 0; position:relative; white-space:nowrap;
}
.op-nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px; background:var(--op-red);
  transition:right .2s ease;
}
.op-nav a:hover::after, .op-nav a[aria-current="page"]::after{ right:0; }
.op-nav a[aria-current="page"]{ color:var(--op-red); }
.op-header-actions{ display:flex; align-items:center; gap:22px; flex:none; }
.op-header-phone{
  display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:700; color:var(--op-ink);
  text-decoration:none; white-space:nowrap;
}
.op-header-phone svg{ width:16px; height:16px; stroke:var(--op-red); fill:none; }
.op-header-phone:hover{ color:var(--op-red); }
.op-header-cta{
  display:inline-flex; align-items:center; gap:8px; background:var(--op-red); color:#fff;
  font-family:var(--op-font-sans); font-size:12.5px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; padding:11px 20px; border-radius:4px; text-decoration:none;
  white-space:nowrap; transition:background .15s ease;
}
.op-header-cta:hover{ background:var(--op-red-hover); }
.op-nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px; width:34px; height:34px;
  background:none; border:0; cursor:pointer; padding:0; flex:none;
}
.op-nav-toggle span{ display:block; width:100%; height:2px; background:var(--op-ink); transition:transform .2s ease, opacity .2s ease; }
.op-nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.op-nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.op-nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:980px){
  .op-site-header{ height:var(--op-header-h-mobile); }
  .op-site-header-inner{ padding:0 22px; }
  .op-nav{
    position:fixed; top:var(--op-header-h-mobile); left:0; right:0; bottom:0;
    background:#fff; flex-direction:column; align-items:flex-start; gap:0;
    padding:12px 26px 28px; overflow-y:auto;
    transform:translateX(100%); transition:transform .25s ease;
  }
  .op-nav.is-open{ transform:translateX(0); }
  .op-nav a{ width:100%; padding:14px 0; border-bottom:1px solid var(--op-line); font-size:16px; }
  .op-nav a::after{ display:none; }
  .op-header-phone{ display:none; }
  .op-header-cta{ padding:9px 14px; font-size:11.5px; }
  .op-nav-toggle{ display:flex; }
}

/* ============ FOOTER ============ */
.op-site-footer{ background:var(--op-ink); color:#D8D5CE; }
.op-site-footer-inner{
  max-width:1260px; margin:0 auto; padding:72px 40px 48px;
  display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:40px;
}
.op-footer-brand-name{
  font-family:var(--op-font-serif); font-weight:600; font-size:22px; color:#fff; letter-spacing:.01em;
}
.op-footer-tagline{
  font-family:var(--op-font-serif); font-style:italic; font-size:13.5px; color:var(--op-green-light);
  margin:8px 0 14px !important; max-width:280px;
}
.op-footer-brand p{ font-size:13.5px; line-height:1.7; color:#B9B6AE; margin:16px 0 22px; max-width:280px; }
.op-footer-coords{ display:flex; flex-direction:column; gap:10px; }
.op-footer-coords a, .op-footer-coords span{ font-size:13.5px; color:#D8D5CE; text-decoration:none; }
.op-footer-coords a:hover{ color:#fff; }
.op-footer-col h4{
  font-family:var(--op-font-sans); font-weight:700; font-size:12.5px; letter-spacing:.06em;
  text-transform:uppercase; color:#fff; margin:0 0 20px;
}
.op-footer-col{ display:flex; flex-direction:column; }
.op-footer-col a{ font-size:13.5px; color:#B9B6AE; text-decoration:none; margin-bottom:13px; line-height:1.4; }
.op-footer-col a:hover{ color:#fff; }
.op-footer-cookie-manage{
  font-family:var(--op-font-sans); font-size:13.5px; color:#B9B6AE; background:none; border:0; padding:0;
  text-align:left; cursor:pointer; line-height:1.4; text-decoration:underline; text-underline-offset:2px;
}
.op-footer-cookie-manage:hover{ color:#fff; }
.op-site-footer-bottom{ border-top:1px solid rgba(255,255,255,.12); }
.op-wrap-footer-bottom{
  max-width:1260px; margin:0 auto; padding:22px 40px; display:flex; justify-content:space-between;
  flex-wrap:wrap; gap:10px; font-size:12px; color:#8B887F;
}

@media (max-width:900px){
  .op-site-footer-inner{ grid-template-columns:1fr 1fr; padding:56px 24px 36px; gap:36px 24px; }
  .op-footer-brand{ grid-column:1 / -1; }
  .op-wrap-footer-bottom{ padding:18px 24px; flex-direction:column; }
}

/* ============================================================
   UTILITAIRES PARTAGÉS — pages simples (À propos, Légal, Blog)
   ============================================================ */
.op-wrap{ max-width:1180px; margin:0 auto; padding:0 40px; }

.op-page-hero{ background:var(--op-beige); padding:64px 0 56px; }
.op-page-hero .op-eyebrow{
  display:block; font-size:12px; font-weight:700; letter-spacing:.12em;
  color:var(--op-red); text-transform:uppercase; margin:0 0 14px; font-family:var(--op-font-sans);
}
.op-page-hero h1{ font-family:var(--op-font-serif); font-weight:600; font-size:42px; color:var(--op-ink); margin:0 0 16px; max-width:720px; }
.op-page-hero p{ font-size:15.5px; line-height:1.7; color:var(--op-text); margin:0; max-width:640px; }

.op-prose{ padding:56px 0 90px; }
.op-prose .op-wrap{ max-width:820px; }
.op-prose h2{ font-family:var(--op-font-serif); font-weight:600; font-size:24px; color:var(--op-ink); margin:44px 0 16px; }
.op-prose h2:first-child{ margin-top:0; }
.op-prose p{ font-size:15px; line-height:1.75; color:var(--op-text); margin:0 0 16px; }
.op-prose ul{ margin:0 0 16px; padding-left:20px; }
.op-prose li{ font-size:15px; line-height:1.75; color:var(--op-text); margin-bottom:6px; }
.op-prose a{ color:var(--op-red); text-decoration:underline; }
.op-prose strong{ color:var(--op-ink); }
.op-prose .op-updated{ font-size:13px; color:#8B887F; margin-bottom:36px; display:block; }
.op-prose mark.op-tbd{
  background:#FDF1CE; color:var(--op-ink); padding:1px 6px; border-radius:3px;
  font-size:.92em; font-weight:600; font-style:normal;
}

@media (max-width:768px){
  .op-page-hero{ padding:44px 0 36px; }
  .op-page-hero h1{ font-size:30px; }
  .op-prose{ padding:40px 0 60px; }
}

/* ---- Blog ---- */
.op-blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; padding:64px 0 90px; }
.op-blog-card{
  border:1px solid var(--op-line); border-radius:14px; overflow:hidden; display:flex; flex-direction:column;
  text-decoration:none; color:inherit; transition:box-shadow .2s ease, transform .2s ease;
}
.op-blog-card:hover{ box-shadow:0 14px 30px rgba(0,0,0,.08); transform:translateY(-2px); }
.op-blog-card-media{ aspect-ratio:16/10; background:#EDEAE4; position:relative; overflow:hidden; }
.op-blog-card-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.op-blog-card-body{ padding:22px 22px 26px; display:flex; flex-direction:column; flex:1; }
.op-blog-card-tag{
  font-family:var(--op-font-sans); font-size:11px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--op-red); margin-bottom:10px;
}
.op-blog-card h3{ font-family:var(--op-font-serif); font-weight:600; font-size:19px; color:var(--op-ink); margin:0 0 10px; line-height:1.3; }
.op-blog-card p{ font-size:13.8px; line-height:1.6; color:var(--op-text); margin:0 0 16px; flex:1; }
.op-blog-card-meta{ font-size:12px; color:#8B887F; }
@media (max-width:900px){ .op-blog-grid{ grid-template-columns:1fr 1fr; gap:22px; } }
@media (max-width:600px){ .op-blog-grid{ grid-template-columns:1fr; padding:44px 0 60px; } }

.op-blog-card--pending{ opacity:.82; }
.op-blog-card--pending .op-blog-card-media{ background:var(--op-beige); display:flex; align-items:center; justify-content:center; }
.op-blog-card--pending .op-blog-card-media svg{ width:34px; height:34px; stroke:#B9B6AE; fill:none; }

/* Repli visuel générique pour toute image qui échoue au chargement (ex. photo pas
   encore livrée) : masque l'icône "image cassée" + le texte alt que les navigateurs
   affichent par défaut, et montre à la place un repère discret sur fond beige.
   Activé via onerror="this.parentElement.classList.add('op-img-missing')" sur la
   balise <img> concernée (voir blog.html, bilan-environnemental-flotte.html).
   L'attribut alt reste inchangé dans le DOM : les lecteurs d'écran le lisent toujours,
   seul le rendu visuel du texte de repli est masqué. */
.op-img-missing{ background:var(--op-beige); display:flex !important; align-items:center; justify-content:center; }
.op-img-missing img{ display:none !important; }
.op-img-missing::after{
  content:""; width:34px; height:34px; flex:none; opacity:.55;
  background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B9B6AE' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E");
}
.op-blog-card-tag--pending{
  display:inline-flex; align-items:center; gap:6px; color:#8B887F;
}
.op-blog-card-tag--pending::before{
  content:""; width:6px; height:6px; border-radius:50%; background:#C9A227; flex:none;
}

/* ---- Accent écologique (utilitaires partagés) ---- */
.op-eyebrow--eco{ color:var(--op-green) !important; }
.op-blog-card-tag--eco{ color:var(--op-green); }
.op-stat-figure--eco, .op-about-stat-figure--eco{ color:var(--op-green) !important; }
.op-badge-eco{
  display:inline-flex; align-items:center; gap:8px; background:var(--op-green-tint);
  color:var(--op-green-dark); font-family:var(--op-font-sans); font-size:11.5px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; padding:7px 13px; border-radius:20px;
}
.op-badge-eco svg{ width:14px; height:14px; stroke:var(--op-green-dark); fill:none; }

/* ---- Bannière de consentement cookies (assets/js/cookie-consent.js) ----
   Ajoutée le 28/09/2026 (checklist mise en ligne, point "Bannière cookies").
   Injectée en JS dans <body>, pas de HTML dupliqué sur chaque page. */
.op-cookiebar{
  position:fixed; left:0; right:0; bottom:0; z-index:9999;
  background:var(--op-white); border-top:1px solid var(--op-line);
  box-shadow:0 -6px 24px rgba(24,24,24,.12);
  font-family:var(--op-font-sans); color:var(--op-text);
  padding:22px 24px; transform:translateY(110%); transition:transform .4s cubic-bezier(.22,.61,.36,1);
}
.op-cookiebar.is-visible{ transform:translateY(0); }
.op-cookiebar .op-wrap{ max-width:1180px; margin:0 auto; display:flex; flex-wrap:wrap; align-items:center; gap:18px 28px; }
.op-cookiebar-text{ flex:1 1 380px; font-size:13.5px; line-height:1.6; }
.op-cookiebar-text strong{ color:var(--op-ink); }
.op-cookiebar-text a{ color:var(--op-red); text-decoration:underline; }
.op-cookiebar-actions{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.op-cookiebar-actions button{
  font-family:var(--op-font-sans); font-size:12.5px; font-weight:700; letter-spacing:.03em;
  border-radius:8px; padding:11px 16px; cursor:pointer; white-space:nowrap; border:1.5px solid transparent;
}
.op-cookiebar-btn-accept{ background:var(--op-red); color:#fff; }
.op-cookiebar-btn-accept:hover{ background:var(--op-red-hover); }
.op-cookiebar-btn-refuse{ background:transparent; color:var(--op-ink); border-color:var(--op-line); }
.op-cookiebar-btn-refuse:hover{ border-color:var(--op-ink); }
.op-cookiebar-btn-customize{ background:transparent; color:var(--op-red); text-decoration:underline; padding:11px 4px; }
.op-cookiebar-panel{ flex:1 1 100%; display:none; border-top:1px solid var(--op-line); margin-top:6px; padding-top:16px; }
.op-cookiebar-panel.is-open{ display:block; }
.op-cookiebar-option{ display:flex; align-items:flex-start; gap:10px; margin-bottom:12px; font-size:13px; line-height:1.55; }
.op-cookiebar-option input{ margin-top:3px; flex:none; width:16px; height:16px; accent-color:var(--op-red); }
.op-cookiebar-option strong{ color:var(--op-ink); display:block; }
.op-cookiebar-panel-actions{ display:flex; justify-content:flex-end; }
@media (max-width:640px){
  .op-cookiebar{ padding:18px 16px; }
  .op-cookiebar .op-wrap{ gap:14px; }
  .op-cookiebar-actions{ width:100%; }
  .op-cookiebar-actions button{ flex:1 1 auto; }
}