@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@400;700&family=Inter:wght@300;400;600&family=JetBrains+Mono:wght@400;700&display=swap');
/* Reset & base */
*{box-sizing:border-box}
:root{
  --terracotta: #B67A3D; /* accent premium */
  --anthracite: #1F2A37; /* plus luxe */
  --gris: #6F7A87; /* neutre premium */
  --cream: #F3EFE9; /* fond doux */
  --offwhite: #FFFCF8;
  --text-dark: #171D26;
  --panel: #FFFDFB;
  --sage: #C7B39A;
  --radius-sm: 10px;
  --radius-xs: 6px;
  --card-shadow: 0 18px 40px rgba(18, 25, 33, 0.08);
  --circuit-opacity: 0.12;
  --transition: all 0.2s ease;
}
html,body{height:100%;margin:0;background:linear-gradient(180deg,#f7f3ee 0%,#f1ece5 100%);color:var(--text-dark);font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial}
h1,h2,h3{font-family:"Fraunces", serif;color:var(--anthracite);line-height:1.02;letter-spacing:-0.02em}
code, .mono { font-family: "JetBrains Mono", monospace; color:var(--anthracite); background:transparent; padding:2px 6px; border-radius:3px; font-size:0.95em; }
 
/* Header */
.site-header{
  background:rgba(255,255,255,0.78);
  backdrop-filter: blur(10px);
  color:var(--anthracite);
  position:relative;
  z-index:10;
  box-shadow:0 10px 24px rgba(17,23,31,0.05);
  border-bottom:1px solid rgba(31,42,55,0.08);
}
.site-header .container{display:flex;align-items:center;justify-content:space-between;padding:14px 22px;gap:18px}
.site-brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--anthracite);font-weight:700;flex-shrink:0}
.site-brand img{height:52px; width:auto; display:block}
.site-brand span{font-size:1rem}
.site-nav{display:flex;gap:10px;align-items:center;flex:1;justify-content:center;padding:6px 8px}
.site-nav.collapse:not(.show){display:flex}
.site-footer{background:linear-gradient(135deg,#1a212d,#273445);color:var(--offwhite);padding:1rem 0;margin-top:3rem;border-top:1px solid rgba(255,255,255,0.08)}
.site-nav a{color:var(--anthracite);text-decoration:none;padding:9px 14px;border-radius:999px;font-weight:600;transition:var(--transition);background:transparent;letter-spacing:0.01em}
.site-nav a:hover{background:linear-gradient(135deg,var(--terracotta),#d7a05d);color:var(--offwhite);transform:translateY(-1px);box-shadow:0 8px 18px rgba(182,122,61,0.18)}
.site-nav a.active,.site-nav a[aria-current="page"]{background:linear-gradient(135deg,var(--terracotta),#d7a05d);color:var(--offwhite)}
.site-nav .logout-nav-button{color:var(--anthracite);text-decoration:none;padding:9px 14px;border-radius:999px;font-weight:600;transition:var(--transition);background:transparent;letter-spacing:0.01em;border:none;cursor:pointer;font-family:inherit}
.site-nav .logout-nav-button:hover{background:linear-gradient(135deg,var(--terracotta),#d7a05d);color:var(--offwhite);transform:translateY(-1px);box-shadow:0 8px 18px rgba(182,122,61,0.18)}
.navbar-toggler{display:none;border:1px solid rgba(31,42,55,0.12);background:var(--offwhite);border-radius:8px;padding:6px 10px}
.navbar-toggler-icon{width:1.3rem;height:1.3rem;display:inline-block;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(31,42,55,1)' stroke-linecap='round' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:center;background-size:100%}
.site-cta{background:linear-gradient(135deg,var(--terracotta),#d7a05d);color:var(--offwhite);padding:10px 18px;border-radius:999px;text-decoration:none;font-weight:700;display:inline-block;transition:var(--transition);box-shadow:0 12px 24px rgba(182,122,61,0.22)}
.site-cta:hover{background:linear-gradient(135deg,#a8652d,#c78b49);color:var(--offwhite);transform:translateY(-3px)}

/* Hero */
.hero{
  background:radial-gradient(circle at top left, rgba(182,122,61,0.09), transparent 30%), linear-gradient(180deg, rgba(255,255,255,0.58) 0%, rgba(246,240,232,0.8) 100%);
  padding:120px 0 100px;
  position:relative;
  overflow:visible;
}
.hero .inner{max-width:1200px;margin:0 auto;padding:20px;display:flex;gap:36px;align-items:center}
.hero .hero-text{flex:1;min-width:0}
.hero .eyebrow{font-family:Inter, sans-serif;font-size:0.85rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--terracotta);margin-bottom:14px;font-weight:700}
.hero .hero-text h1{font-size:3.2rem;margin:0 0 18px;color:var(--anthracite);letter-spacing:-0.035em;line-height:1.08}
.hero .hero-text p{color:var(--gris);font-size:1.125rem;margin:0 0 22px}
.hero .hero-actions a{display:inline-block;margin-right:12px;text-decoration:none}
.btn-primary{background:linear-gradient(135deg,var(--terracotta),#d7a05d);color:white;border:0;padding:14px 20px;border-radius:10px;font-weight:700;transition:var(--transition);text-decoration:none;box-shadow:0 14px 30px rgba(182,122,61,0.18)}
.btn-primary:hover{transform:translateY(-4px);box-shadow:0 18px 34px rgba(182,122,61,0.22)}
.btn-secondary{background:rgba(255,255,255,0.55);color:var(--anthracite);border:1px solid rgba(31,42,55,0.12);padding:12px 16px;border-radius:10px;transition:var(--transition);text-decoration:none}
.btn-secondary:hover{transform:translateY(-3px);box-shadow:0 8px 18px rgba(18,25,33,0.08)}

/* Hero visual (larger decorative circuit + illustration) */
.hero-visual{width:520px;min-height:340px;display:flex;align-items:center;justify-content:center;position:relative}
.hero-illus{width:420px;border-radius:8px;box-shadow:0 18px 40px rgba(43,42,37,0.12);transform:translateY(0);transition:transform 0.6s cubic-bezier(.2,.9,.3,1)}
.hero-illus:hover{transform:translateY(-8px) rotate(-0.5deg)}
.hero-circuit-svg{position:absolute;right:-6%;top:8%;width:60%;height:90%;opacity:0.18;pointer-events:none;filter:drop-shadow(0 6px 18px rgba(201,106,62,0.06))}
.hero-circuit-svg .circuit-line{stroke-dasharray:1200;stroke-dashoffset:1200;animation:dash 3.8s linear infinite}
@keyframes dash{0%{stroke-dashoffset:1200}50%{stroke-dashoffset:600}100%{stroke-dashoffset:1200}}
.hero-circuit-svg .circuit-node{opacity:0;transform-origin:center;animation:node-pulse 3.8s linear infinite}
@keyframes node-pulse{0%{opacity:0;transform:scale(0.9)}40%{opacity:1;transform:scale(1.08)}60%{opacity:1}100%{opacity:0;transform:scale(0.9)}}

.hero-visual img{max-width:110%;opacity:0.98}

/* small icon image used in 'Pourquoi nous choisir' cards */
.card-icon{width:100%;height:230px;object-fit:cover;display:block;border-radius:16px 16px 0 0;margin:0;border:1px solid rgba(31,42,55,0.08);background:linear-gradient(180deg, rgba(247,245,240,0.8), rgba(255,255,255,0.9));box-shadow:0 16px 30px rgba(18,25,33,0.08);transition:transform 0.35s ease, box-shadow 0.35s ease}

/* ensure hero illustration remains prominent but responsive */
.hero-illus{width:420px;border-radius:8px;box-shadow:0 18px 40px rgba(43,42,37,0.12);transform:translateY(0);transition:transform 0.6s cubic-bezier(.2,.9,.3,1)}
.hero-illus:hover{transform:translateY(-8px) rotate(-0.5deg)}

/* larger decorative circuit used as background to the right (subtle texture) */
.site-header::after, .hero::after{
  content:'';position:absolute;right:6%;top:6%;width:46%;height:88%;pointer-events:none;opacity:var(--circuit-opacity);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600'><g fill='none' stroke='%23C96A3E' stroke-width='3' stroke-linejoin='miter' stroke-linecap='round'><path d='M40 520 H220 V320 H420 V260 H600 V120 H760' /><path d='M220 320 V80 H360 V200 H520' /><path d='M420 260 V160 H520' /></g><g fill='%23C96A3E'><circle cx='220' cy='320' r='6'/><circle cx='420' cy='260' r='6'/><circle cx='520' cy='200' r='6'/><circle cx='600' cy='120' r='6'/><circle cx='760' cy='120' r='6'/></g></svg>");
  background-repeat:no-repeat;background-position:right center;background-size:contain;filter:grayscale(0.2);
}

/* Cards */
.card-plain{background:linear-gradient(180deg,#fffdfb 0%,#fffaf4 100%);border:1px solid rgba(31,42,55,0.08);border-radius:18px;padding:0;box-shadow:0 14px 30px rgba(17,23,31,0.06);transition:all 0.3s ease;position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:100%}
.card-plain::before{content:'';position:absolute;right:16px;top:16px;width:58px;height:58px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path d='M4 44 H24 V20 H40 V28 H60' stroke='%23B67A3D' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='miter'/><circle cx='24' cy='20' r='3' fill='%23B67A3D'/></svg>");background-repeat:no-repeat;background-position:center;background-size:contain;opacity:0.15}
.card-plain:hover{box-shadow:0 24px 42px rgba(18,25,33,0.12);transform:translateY(-8px)}
.card-plain:hover .card-icon,
.card-plain:hover .card-thumb{transform:scale(1.02)}
.card-plain .card-title{padding:0 24px 0;line-height:1.35}
.card-plain .card-desc{margin:12px 24px 16px;line-height:1.7;color:var(--gris);font-size:0.98rem}
.card-plain .card-points{margin:0 24px 20px;padding-left:1.1rem}

/* Card title + motif */
.card-title{display:flex;align-items:flex-start;gap:12px;font-size:1.125rem;font-weight:700;color:var(--anthracite);line-height:1.4;padding:24px 24px 0}
.card-motif{width:36px;height:36px;flex:0 0 36px;margin-top:2px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><g fill='none' stroke='%23C96A3E' stroke-width='2' stroke-linecap='round' stroke-linejoin='miter'><path d='M4 34 H14 V18 H26 V24 H38' /><path d='M14 18 V8 H22 V14' /><path d='M26 24 V20 H34' /></g><g fill='%23C96A3E'><circle cx='14' cy='18' r='2.5'/><circle cx='26' cy='24' r='2.5'/><circle cx='38' cy='24' r='2.5'/></g></svg>");background-repeat:no-repeat;background-position:center;background-size:contain;opacity:0.14}
.card-desc{color:var(--gris);margin:12px 24px 16px;line-height:1.7}
.card-points{margin:0 24px 24px;padding-left:1.1rem;color:var(--anthracite);line-height:1.8}
.card-points li{margin-bottom:8px}

/* Forms */
.form-control{border:1px solid var(--gris);border-radius:6px;padding:12px}
.form-control:focus{outline:none;box-shadow:0 0 0 6px rgba(201,106,62,0.08);border-color:var(--terracotta)}
.flatpickr-calendar,
.flatpickr-calendar svg,
.flatpickr-calendar input{width:auto;height:auto;max-width:none;max-height:none;box-sizing:border-box}

/* Back-office adjustments */
.admin-shell{background:linear-gradient(180deg,#fffdfb 0%,#fffaf4 100%);padding:1.25rem;border-radius:16px;box-shadow:var(--card-shadow);border:1px solid rgba(31,42,55,0.08)}
.admin-card{background:#fff;border:1px solid rgba(74,122,92,0.12);border-radius:12px;box-shadow:var(--card-shadow);padding:1.25rem}
.form-section{background:#fff;border:1px solid rgba(74,122,92,0.12);border-radius:12px;box-shadow:var(--card-shadow);padding:1.25rem}
.page-header{margin-bottom:1.5rem}
.page-header h1{margin:0;font-size:2.2rem;color:var(--anthracite)}
.table{border-collapse:separate;border-spacing:0;width:100%;background:#fff;border:1px solid rgba(31,42,55,0.08);border-radius:12px;overflow:hidden}
.table thead th{background:rgba(182,122,61,0.08);color:var(--anthracite);font-weight:700;letter-spacing:0.02em;padding:0.9rem 1rem;border-bottom:1px solid rgba(31,42,55,0.08)}
.table tbody td{padding:0.9rem 1rem;border-bottom:1px solid rgba(31,42,55,0.06);vertical-align:middle}
.table tbody tr:hover{background:rgba(182,122,61,0.03)}
.table tr:last-child td{border-bottom:none}
.table tr:nth-child(odd){background:rgba(247,245,240,0.5)}
.small-muted{color:var(--gris);font-size:0.95rem}
.btn-primary{background:var(--terracotta);border-color:var(--terracotta);border-radius:8px;padding:.7rem 1.1rem;font-weight:600}
.btn-primary:hover{background:#8f4c2e;border-color:#8f4c2e}
.btn-outline-secondary,.btn-outline-danger,.btn-outline-success{border-radius:8px;padding:.45rem .75rem}
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.75rem;padding:2.5rem 1rem;color:var(--gris);text-align:center}
.empty-state-icon{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:rgba(182,122,61,0.08);color:var(--terracotta);font-size:1.7rem;font-weight:700}
.empty-state p{margin:0;font-size:1rem}
.section-kicker{display:inline-block;font-size:0.76rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--terracotta);font-weight:700;font-family:'JetBrains Mono', monospace;margin-bottom:0.4rem}

/* utilities */
.container{max-width:1200px;margin:0 auto;padding:0 18px}
.text-terra{color:var(--terracotta)}
.hidden{display:none}

/* Card links & thumbnails */
.card-link{display:block;color:inherit;text-decoration:none}
.card-link:hover{text-decoration:none}
.card-link .card-plain{display:flex;height:100%}
.card-thumb{display:block;width:100%;height:240px;object-fit:cover;border-bottom:1px solid rgba(31,42,55,0.08);margin:0 0 0;border-radius:18px 18px 0 0;filter:saturate(0.96) contrast(1.03);box-shadow:0 14px 24px rgba(18,25,33,0.06);transition:transform 0.35s ease, box-shadow 0.35s ease}
.page-header h2{font-size:2.2rem;margin-bottom:0.75rem;color:var(--anthracite)}
.page-header{margin-bottom:2rem}

/* Detail page styles */
.detail-hero{background:linear-gradient(90deg, rgba(201,106,62,0.06), rgba(92,90,76,0.02));padding:48px 0;margin-bottom:24px}
.detail-gallery{display:flex;gap:12px;align-items:center}
.detail-gallery img{width:100%;height:auto;border-radius:6px;transition:transform 0.35s ease, box-shadow 0.25s ease}
.detail-gallery img:hover{transform:scale(1.03);box-shadow:0 12px 30px rgba(43,42,37,0.12)}

.fade-in{animation:fadeIn 0.6s ease both}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Transitions */
a,button,.btn-primary,.btn-secondary,.card-plain{transition:var(--transition)}

/* Responsive */
/* Fixes for admin pieces-manquantes responsive forms */
.resolve-form{flex-wrap:wrap !important;align-items:center}
.resolve-form .form-control{min-width:0;flex:1 1 auto}
.resolve-form .resolve-qty{flex:0 0 86px;min-width:70px}
.resolve-form .resolve-prix{flex:0 0 110px;min-width:80px}
.resolve-form .resolve-submit{flex:0 0 auto}


@media (max-width: 991.98px){
  .site-header .container{flex-wrap:wrap}
  .navbar-toggler{display:inline-flex;align-items:center;justify-content:center}
  .site-nav, .site-nav.collapse:not(.show){display:none;flex-direction:column;align-items:flex-start;width:100%;padding-top:0.5rem}
  .site-nav.show{display:flex}
  .site-nav a{width:100%}
}
@media (max-width: 900px){
  .hero .inner{flex-direction:column;align-items:flex-start}
  .hero-visual{width:100%;order:2}
  .hero .hero-text h1{font-size:2rem}
  .hero{padding:64px 0}
  .card-icon{height:200px}
  .card-thumb{height:210px}
}

@media (max-width: 767.98px){
  .card-icon{height:180px}
  .card-thumb{height:190px}
  .card-plain .card-title{padding:0 18px 0}
  .card-plain .card-desc{margin:10px 18px 14px}
  .card-plain .card-points{margin:0 18px 18px}
}

/* Signal hero */
.signal-wrap{width:100%;height:36px;margin-bottom:10px}
.signal-svg{width:100%;height:36px;display:block}
.signal-zigzag{stroke:#C96A3E;stroke-width:2.5;fill:none;opacity:1}
.signal-stable{stroke:#C96A3E;stroke-width:2.5;fill:none;opacity:0}
.signal-ticks{stroke:#e6e0da;stroke-width:1}
@keyframes revealStable{0%{opacity:0}60%{opacity:0}100%{opacity:1}}
@keyframes hideZigzag{0%{opacity:1}60%{opacity:1}100%{opacity:0}}
.signal-stable{animation:revealStable 2.2s forwards}
.signal-zigzag{animation:hideZigzag 2.2s forwards}

/* LED status badges */
.status-led{display:inline-flex;align-items:center;gap:10px;font-family:'JetBrains Mono', monospace;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;padding:10px 14px;border-radius:999px;background:rgba(31,42,55,0.04);border:1px solid rgba(31,42,55,0.08)}
.status-led .led-dot{width:12px;height:12px;border-radius:50%;box-shadow:0 0 8px rgba(0,0,0,0.08);display:inline-block}
.status-recu .led-dot{background:#8B8A82;box-shadow:0 0 10px rgba(139,138,130,0.18)}
.status-diagnostic .led-dot{background:#C9922E;box-shadow:0 0 10px rgba(201,146,46,0.18)}
.status-en-reparation .led-dot{background:#C96A3E;box-shadow:0 0 12px rgba(201,106,62,0.18)}
.status-termine .led-dot{background:#4A7A5C;box-shadow:0 0 12px rgba(74,122,92,0.18)}

.section-kicker{display:inline-block;font-size:0.78rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--terracotta);font-weight:700;font-family:'JetBrains Mono', monospace;margin-bottom:0.75rem}
.tracking-search-panel, .tracking-result-panel{min-height:100%;display:flex;flex-direction:column;justify-content:center}
.tracking-search-form{margin-top:1rem}
.tracking-input-group{display:flex;gap:10px;align-items:stretch}
.tracking-input-group .form-control{flex:1;min-height:48px;border-radius:10px;padding:0.75rem 1rem}
.tracking-input-group .btn{min-height:48px;border-radius:10px;padding:0.75rem 1.2rem}
.tracking-tip{margin-top:0.9rem;font-size:0.9rem}
.tracking-header{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid rgba(31,42,55,0.08)}
.tracking-header h3{margin:0;font-size:2rem}
.tracking-badge{display:inline-flex;align-items:center;padding:0.45rem 0.8rem;background:rgba(201,106,62,0.1);color:var(--terracotta);border:1px solid rgba(201,106,62,0.16);border-radius:999px;font-size:0.78rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase}
.tracking-auto-refresh{font-size:0.85rem}
.tracking-alert{margin-top:1rem}
.tracking-details{background:linear-gradient(180deg,#fffdfb,#fdf9f4);border:1px solid rgba(31,42,55,0.08);border-radius:14px;padding:1rem}
.tracking-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0.9rem}
.tracking-item{display:flex;flex-direction:column;gap:0.25rem;padding:0.85rem 0.9rem;border:1px solid rgba(31,42,55,0.08);border-radius:12px;background:#fff}
.tracking-item-wide{grid-column:1 / -1}
.tracking-label{font-size:0.72rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--gris);font-weight:700;font-family:'JetBrains Mono', monospace}
.tracking-item strong{font-size:1rem;line-height:1.5;word-break:break-word}
@media (max-width: 767.98px){
  .tracking-grid{grid-template-columns:1fr}
  .tracking-header{flex-direction:column;align-items:flex-start}
  .tracking-input-group{flex-direction:column}
}

/* Datasheet block */
.datasheet{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px;border-radius:8px;background:linear-gradient(180deg, rgba(247,245,240,0.6), rgba(255,255,255,0.9));}
.datasheet .value{font-family:'JetBrains Mono', monospace;font-size:2.6rem;font-weight:700;color:var(--anthracite)}
.datasheet .label{font-size:0.75rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--gris)}

/* Structural circuit separators */
.circuit-connector{position:relative}
.circuit-connector svg{display:block;width:100%;height:40px}
.circuit-connector .connector-line{stroke:#C96A3E;stroke-width:2;fill:none}
.circuit-connector .connector-dot{fill:#C96A3E}

/* Use JetBrains mono on labels */
.eyebrow, .status-led, .code, .datasheet .value{font-family:'JetBrains Mono', monospace}