@import url('../font/stylesheet.css');

:root {

  --background: #f5f7fb;
  --foreground: #0f172a;

  --primary: #1e3a5f;
  --primary-light: #2563eb;

  --secondary: #475569;

  --muted: #64748b;
  --border: #e2e8f0;

  --card: #ffffff;

  --success: #10b981;

  --radius: 16px;

  --shadow:
    0 4px 20px rgba(15, 23, 42, .04);

  --transition:
    .25s cubic-bezier(.4, 0, .2, 1);

  --hero:
    linear-gradient(135deg,
      #0f172a 0%,
      #162844 58%,
      #1e3a5f 100%);
}

/* =========================================================
   RESET
========================================================= */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

a {
  text-decoration: none;
  color: var(--muted);
}

body {
  font-family: 'Inter',
    var(--roboto),
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    Helvetica,
    Arial,
    sans-serif;

  background: var(--background);
  color: var(--foreground);
  line-height: 1.95;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* =========================================================
   BACKGROUND
========================================================= */
body::before {
  content: "";

  position: fixed;
  inset: 0;

  pointer-events: none;

  background:
    radial-gradient(circle at top left,
      rgba(37, 99, 235, .04),
      transparent 40%);

  z-index: -1;
}


/* =========================================================
   CONTAINER
========================================================= */
.container {
  max-width: 1100px;
  margin: auto;
  padding: 60px 130px 120px;
}

/* =========================================================
   NAV
========================================================= */
nav.fil-nav {
  margin: 100px 0 18px;
}

nav ul {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  list-style: none;
  
}

nav li {
  padding: 0 !important;
  margin: 0 !important;

  font-size: 13px;

  color: var(--muted);

  font-weight: 400;
}

nav li::before {
  display: none;
}

.fil-arianne a {
  color: var(--muted);

  text-decoration: none;

  transition: var(--transition);
}

.fil-arianne a:hover {
  color: var(--primary-light);
}

/* =========================================================
   META
========================================================= */
.publication {
  margin-bottom: 24px;
}

.publication ul {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;

  list-style: none;
}

.publication li {
  padding: 0 !important;
  margin: 0 !important;

  font-size: 13px;

  color: var(--muted);

  font-weight: 400;
}

.publication li::before {
  display: none;
}

.point {
  opacity: .4;
}

/* =========================================================
   TITLE
========================================================= */
.article-name {
  font-size: clamp(2.7rem, 5vw, 4.8rem);

  line-height: 1.03;

  letter-spacing: -.06em;

  font-weight: 760;

  max-width: 1200px;

  margin-bottom: 30px;

  animation: fadeUp .7s ease both;
}

.intro {
  max-width: 1050px;

  font-size: 18px;

  line-height: 2.05;

  color: var(--muted);

  margin-bottom: 90px;

  font-weight: 400;

  animation: fadeUp .8s .1s ease both;
}

/* =========================================================
   BLOG STYLE SECTIONS
========================================================= */
.reflexes,
.brands,
.checklist,
.pricing,
.serrures,
.erreurs,
.appeler,
.techniques,
.eviter,
.checklist-serrurier {

  margin: 70px 0;

  position: relative;
}

/* ligne discrète entre sections */
.reflexes:not(:first-of-type),
.brands,
.checklist,
.pricing,
.serrures,
.erreurs,
.appeler,
.techniques,
.eviter,
.checklist-serrurier {
  padding-top: 60px;
}

.reflexes:not(:first-of-type)::before,
.brands::before,
.checklist::before,
.pricing::before,
.serrures::before,
.erreurs::before,
.appeler::before,
.techniques::before,
.eviter::before,
.checklist-serrurier::before {

  content: "";

  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 1px;

  background:
    linear-gradient(90deg,
      transparent,
      rgba(226, 232, 240, .9),
      transparent);
}

/* =========================================================
   HEADINGS
========================================================= */
h1,
h2,
h3 {
  color: var(--foreground);
}

h2 {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 34px;
  font-weight: 620;
  letter-spacing: -.04em;
  margin-bottom: 34px;
  line-height: 1.2;

  padding:
    14px 20px;

  border-radius: 18px;

  transition: var(--transition);
}

/* rectangle hover subtil */
h2::before {
  content: "";

  position: absolute;
  inset: 0;

  border-radius: 18px;

  background:
    linear-gradient(135deg,
      rgba(37, 99, 235, .06),
      rgba(255, 255, 255, .35));

  border: 1px solid rgba(59, 130, 246, .08);

  opacity: 0;

  transition: opacity .25s ease;
}

h2:hover::before {
  opacity: 1;
}

h2 i {
  position: relative;
  z-index: 2;

  font-size: 18px;

  color: var(--primary-light);
}

h2 {
  z-index: 2;
}

/* =========================================================
   SOUS TITRES
========================================================= */
h3 {
  font-size: 21px;

  font-weight: 500;

  margin-bottom: 10px;

  letter-spacing: -.02em;
}

/* =========================================================
   TEXT
========================================================= */
p {
  font-size: 16px;

  color: var(--muted);

  line-height: 2.05;

  font-weight: 400;
}

/* =========================================================
   LISTS
========================================================= */
ul {
  list-style: none;
}

ul li {
  position: relative;

  padding-left: 20px;

  margin-bottom: 16px;

  color: var(--secondary);

  font-size: 15.8px;

  font-weight: 400;

  line-height: 1.95;
}

ul li::before {
  content: "";

  position: absolute;

  left: 0;
  top: 14px;

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: rgba(37, 99, 235, .6);
}

/* =========================================================
   REFLEXES
========================================================= */
.reflexes ul {
  display: grid;
  gap: 42px;
}

.reflexe {
  padding-left: 28px !important;
}

.reflexe::before {
  width: 7px;
  height: 7px;

  top: 12px;
}

/* =========================================================
   BRANDS
========================================================= */
.brand-grid {
  display: grid;

  grid-template-columns:
    repeat(auto-fit, minmax(260px, 1fr));

  gap: 40px;
}

.brand-card {
  padding: 0;

  background: none;

  border: none;
}

.brand-card h3 {
  margin-bottom: 12px;
}

/* =========================================================
   CHECKLIST
========================================================= */
.checklist {
  display: grid;
  gap: 46px;
}

.bloc h2 {
  font-size: 24px;

  margin-bottom: 20px;
}

/* =========================================================
   TABLE
========================================================= */
table {
  width: 100%;

  border-collapse: collapse;

  margin-top: 34px;
}

th {
  text-align: left;

  padding:
    16px 0;

  border-bottom:
    1px solid rgba(226, 232, 240, .9);

  color: var(--foreground);

  font-size: 13px;

  font-weight: 600;

  letter-spacing: .04em;

  text-transform: uppercase;
}

td {
  padding:
    18px 0;

  border-bottom:
    1px solid rgba(226, 232, 240, .65);

  color: var(--secondary);

  font-size: 15px;

  font-weight: 400;
}

tr:last-child td {
  border-bottom: none;
}

.nb {
  margin-top: 20px;

  font-size: 13px;

  color: var(--muted);
}

/* =========================================================
   SECURITY CARDS
========================================================= */
.carte {
  padding:
    26px 0;

  border-bottom:
    1px solid rgba(226, 232, 240, .7);
}

.carte:last-child {
  border-bottom: none;
}

.prix {
  color: var(--primary-light);

  font-size: 18px;

  font-weight: 500;

  margin-bottom: 8px;
}

/* =========================================================
   CHECKLIST FINAL
========================================================= */
.liste-check {
  display: grid;
  gap: 20px;
}

.liste-check li {
  padding-left: 34px !important;

  font-weight: 400;
}

.liste-check li::before {
  content: "✓";

  background: none;

  width: auto;
  height: auto;

  top: 0;
  left: 0;

  color: var(--success);

  font-size: 16px;

  font-weight: 700;
}

/* =========================================================
   ANIMATION
========================================================= */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width:1200px) {

  .container {
    padding:
      50px 70px 100px;
  }
}

@media (max-width:768px) {

  .header {
    padding: 18px 20px;
  }

  .container {
    padding:
      36px 22px 70px;
  }

  .article-name {
    font-size: 2.6rem;
  }

  .intro {
    font-size: 16px;

    margin-bottom: 60px;
  }

  h2 {
    font-size: 26px;
  }

  h3 {
    font-size: 18px;
  }

  p,
  ul li {
    font-size: 15px;
  }

  .brand-grid {
    grid-template-columns: 1fr;

    gap: 30px;
  }

  table {
    display: block;
    overflow-x: auto;
  }

  td,
  th {
    min-width: 160px;
  }
}