/* ============================================================
   AMPERO — Électricité générale
   Système de design partagé
   Clair & pro · rouge de marque #E00810 en accent mesuré
   ============================================================ */

@font-face{font-family:'Inter';src:url('../fonts/Inter-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/Inter-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/Inter-SemiBold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/Inter-Bold.ttf') format('truetype');font-weight:700 800;font-style:normal;font-display:swap}
@font-face{font-family:'Inter Display';src:url('../fonts/InterDisplay-SemiBold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Inter Display';src:url('../fonts/InterDisplay-Bold.ttf') format('truetype');font-weight:700 800;font-style:normal;font-display:swap}

:root{
  /* Marque */
  --red:        #E00810;
  --red-600:    #C00510;
  --red-700:    #9E040D;
  --red-tint:   #FCEAEB;

  /* Encre & gris */
  --ink:        #16181C;
  --ink-soft:   #33373D;
  --grey:       #6B7178;
  --grey-400:   #9AA0A8;
  --line:       #E6E8EC;
  --line-soft:  #EFF1F4;

  /* Fonds */
  --bg:         #FFFFFF;
  --bg-alt:     #F5F6F8;
  --bg-dark:    #121418;
  --bg-darker:  #0C0E11;

  /* Typo */
  --display: 'Inter', system-ui, sans-serif;
  --heading: 'Inter Display', 'Inter', system-ui, sans-serif;
  --body:    'Inter', system-ui, sans-serif;

  /* Layout */
  --container: 1240px;
  --gutter: clamp(20px, 5vw, 48px);
  --radius: 4px;
  --radius-lg: 8px;

  /* Ombres */
  --shadow-sm: 0 1px 2px rgba(16,18,22,.06), 0 2px 8px rgba(16,18,22,.05);
  --shadow-md: 0 8px 30px rgba(16,18,22,.10);
  --shadow-lg: 0 24px 60px rgba(16,18,22,.16);

  --header-h: 76px;
  --bar-h: 38px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--body);
  color:var(--ink);
  background-color:var(--bg);
  background-image:url(../img/a-filigrane.png);
  background-repeat:no-repeat;
  background-position:right -7vw center;
  background-attachment:fixed;
  background-size:auto 86vh;
  font-size:17px;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:var(--red); color:#fff; }

/* ---------- Typographie ---------- */
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:700;
  line-height:1.05;
  letter-spacing:-0.02em;
  margin:0;
  color:var(--ink);
  text-wrap:balance;
}
.h-xxl{ font-size:clamp(2.6rem, 6vw, 5rem); }
.h-xl { font-size:clamp(2.1rem, 4.4vw, 3.5rem); }
.h-lg { font-size:clamp(1.7rem, 3vw, 2.5rem); }
.h-md { font-size:clamp(1.3rem, 2vw, 1.6rem); }
p{ margin:0 0 1em; }
.lead{ font-size:clamp(1.05rem,1.4vw,1.3rem); line-height:1.6; color:var(--ink-soft); }
strong{ font-weight:700; }

.eyebrow{
  font-family:var(--display);
  font-weight:600;
  font-size:.78rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--red);
  display:inline-flex;
  align-items:center;
  gap:.65em;
}
.eyebrow::before{
  content:"";
  width:26px; height:2px;
  background:var(--red);
  display:inline-block;
}
.eyebrow.muted{ color:var(--grey); }
.eyebrow.muted::before{ background:var(--grey-400); }
.eyebrow.on-dark{ color:#fff; }
.eyebrow.on-dark::before{ background:var(--red); }

.text-red{ color:var(--red); }
.text-grey{ color:var(--grey); }

/* ---------- Layout ---------- */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.section{ padding:clamp(64px, 9vw, 130px) 0; }
.section.tight{ padding:clamp(48px,6vw,80px) 0; }
.section.alt{ background:var(--bg-alt); }
.section.dark{ background:var(--bg-dark); color:#E8EAEE; }
.section.dark h1,.section.dark h2,.section.dark h3{ color:#fff; }
.section.dark .lead{ color:#AfB4Bd; }

.grid{ display:grid; gap:clamp(20px,3vw,40px); }
.cols-2{ grid-template-columns:repeat(2,1fr); }
.cols-3{ grid-template-columns:repeat(3,1fr); }
.cols-4{ grid-template-columns:repeat(4,1fr); }

.section-head{ max-width:720px; margin-bottom:clamp(36px,5vw,64px); }
.section-head .eyebrow{ margin-bottom:18px; }
.section-head p{ margin-top:14px; }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head.center .eyebrow{ justify-content:center; }

/* ---------- Boutons ---------- */
.btn{
  --bg-btn:var(--red);
  display:inline-flex; align-items:center; gap:.65em;
  font-family:var(--display);
  font-weight:600;
  font-size:.95rem;
  letter-spacing:.01em;
  padding:15px 26px;
  border:1.5px solid transparent;
  border-radius:var(--radius);
  background:var(--bg-btn);
  color:#fff;
  transition:transform .18s ease, background .2s ease, box-shadow .2s ease, color .2s, border-color .2s;
  white-space:nowrap;
  line-height:1;
}
.btn svg{ width:18px; height:18px; }
.btn:hover{ background:var(--red-600); transform:translateY(-2px); box-shadow:0 10px 24px rgba(224,8,16,.28); }
.btn.ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn.ghost:hover{ background:var(--ink); color:#fff; border-color:var(--ink); box-shadow:var(--shadow-md); }
.btn.outline-red{ background:transparent; color:var(--red); border-color:var(--red); }
.btn.outline-red:hover{ background:var(--red); color:#fff; }
.btn.on-dark.ghost{ color:#fff; border-color:rgba(255,255,255,.28); }
.btn.on-dark.ghost:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.btn.lg{ padding:18px 32px; font-size:1.02rem; }
.btn.block{ width:100%; justify-content:center; }

.link-arrow{
  font-family:var(--display);
  font-weight:600;
  font-size:.95rem;
  color:var(--ink);
  display:inline-flex; align-items:center; gap:.5em;
  transition:gap .2s, color .2s;
}
.link-arrow svg{ width:16px; height:16px; transition:transform .2s; color:var(--red); }
.link-arrow:hover{ color:var(--red); gap:.75em; }

/* ============================================================
   UTILITY BAR
   ============================================================ */
.utilbar{
  background:var(--bg-dark);
  color:#C7CBD1;
  font-size:.8rem;
  height:var(--bar-h);
  display:flex; align-items:center;
}
.utilbar .container{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.utilbar a{ color:#C7CBD1; transition:color .2s; }
.utilbar a:hover{ color:#fff; }
.utilbar .ub-left{ display:flex; align-items:center; gap:22px; }
.utilbar .ub-item{ display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
.utilbar .ub-item svg{ width:13px; height:13px; color:var(--grey-400); }
.utilbar .ub-right{ display:flex; align-items:center; gap:18px; }
.utilbar .ub-247{ color:#fff; font-weight:600; }
.utilbar .ub-247 .dot{ width:7px; height:7px; border-radius:50%; background:#2ec27e; display:inline-block; box-shadow:0 0 0 0 rgba(46,194,126,.6); animation:pulse 2s infinite; }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(46,194,126,.55);} 70%{box-shadow:0 0 0 7px rgba(46,194,126,0);} 100%{box-shadow:0 0 0 0 rgba(46,194,126,0);} }
.langsel{ display:inline-flex; align-items:center; gap:2px; margin-right:-7px; }
.langsel button{
  background:none; border:none; color:#8A9098; font-family:var(--display);
  font-size:.78rem; font-weight:600; letter-spacing:.05em; padding:3px 7px; border-radius:3px; transition:.2s;
}
.langsel button:hover{ color:#fff; }
.langsel button.active{ color:#fff; background:rgba(255,255,255,.1); }
.ub-social{ display:inline-flex; gap:12px; }
.ub-social a svg{ width:15px; height:15px; }

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(140%) blur(8px);
  -webkit-backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .25s, background .25s, border-color .25s;
}
.site-header.scrolled{ box-shadow:var(--shadow-sm); }
.nav{
  height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand{ display:flex; align-items:center; gap:11px; flex-shrink:0; }
.brand .brand-mark{ height:56px; width:auto; display:block; }
.brand .brand-word{ height:36px; width:auto; display:block; }
@media (max-width:920px){
  .brand .brand-mark{ height:46px; }
  .brand .brand-word{ height:30px; }
}

.menu{ display:flex; align-items:center; gap:2px; list-style:none; margin:0; padding:0; }
.menu > li{ position:relative; }
.menu > li > a{
  font-family:var(--display); font-weight:500; font-size:.96rem; color:var(--ink);
  padding:10px 10px; border-radius:var(--radius); display:inline-flex; align-items:center; gap:6px;
  transition:color .2s, background .2s; white-space:nowrap;
}
.menu > li > a .chev{ width:12px; height:12px; opacity:.55; transition:transform .25s; }
.menu > li > a:hover, .menu > li.current > a{ color:var(--red); }
.menu > li.current > a{ font-weight:600; }
.menu > li > a:hover .chev{ transform:rotate(180deg); }

/* dropdown */
.has-drop > .dropdown{
  position:absolute; top:calc(100% + 8px); left:0;
  min-width:300px; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  padding:10px; opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .2s, transform .2s, visibility .2s;
}
.has-drop:hover > .dropdown, .has-drop:focus-within > .dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
.dropdown a{
  display:flex; gap:13px; align-items:flex-start; padding:12px 14px; border-radius:var(--radius); transition:background .18s;
}
.dropdown a:hover{ background:var(--bg-alt); }
.dropdown .di-ic{ width:42px; height:42px; flex-shrink:0; border-radius:7px; background:none; display:grid; place-items:center; color:var(--red); }
.dropdown .di-ic svg{ width:20px; height:20px; }
.dropdown .di-ic img{ width:100%; height:100%; object-fit:contain; }
.dropdown .di-t{ font-family:var(--display); font-weight:600; font-size:.95rem; color:var(--ink); }
.dropdown .di-d{ font-size:.82rem; color:var(--grey); line-height:1.4; }

.nav-cta{ display:flex; align-items:center; gap:14px; flex-shrink:0; }
.nav-phone{ display:flex; align-items:center; gap:10px; }
.nav-phone .np-ic{ width:40px; height:40px; border-radius:50%; background:var(--red-tint); display:grid; place-items:center; color:var(--red); flex-shrink:0; }
.nav-phone .np-ic svg{ width:19px; height:19px; }
.nav-phone .np-txt small{ display:block; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--red); font-family:var(--display); font-weight:600; white-space:nowrap; text-align:center; }
.nav-phone .np-txt b{ font-family:var(--display); font-size:1.02rem; color:var(--ink); white-space:nowrap; }

.burger{ display:none; flex-direction:column; gap:5px; background:none; border:none; padding:8px; }
.burger span{ width:24px; height:2px; background:var(--ink); transition:.25s; }

/* mobile drawer */
.mobile-nav{ display:none; }

@media (max-width:1200px){
  .nav-phone .np-txt{ display:none; }
  .menu > li > a{ padding:10px 11px; font-size:.92rem; }
}
@media (max-width:1024px){
  .menu, .nav-phone{ display:none; }
  .burger{ display:flex; }
  .mobile-nav{
    display:block; position:fixed; inset:0; z-index:200;
    background:rgba(12,14,17,.5); opacity:0; visibility:hidden; transition:.25s;
  }
  .mobile-nav.open{ opacity:1; visibility:visible; }
  .mobile-panel{
    position:absolute; top:0; right:0; height:100%; width:min(360px,86vw);
    background:#fff; padding:26px 24px; overflow-y:auto;
    transform:translateX(100%); transition:transform .3s ease;
    display:flex; flex-direction:column; gap:6px;
  }
  .mobile-nav.open .mobile-panel{ transform:translateX(0); }
  .mobile-panel .mclose{ align-self:flex-end; background:none; border:none; font-size:1.6rem; color:var(--ink); line-height:1; padding:4px; }
  .mobile-panel a{ font-family:var(--display); font-weight:600; font-size:1.1rem; padding:13px 4px; border-bottom:1px solid var(--line-soft); display:flex; justify-content:space-between; align-items:center; }
  .mobile-panel a .sub{ font-size:.8rem; color:var(--grey); font-weight:500; }
  .mobile-panel .mphone{ margin-top:18px; }
}

/* ============================================================
   HERO SLIDESHOW
   ============================================================ */
.hero{ position:relative; height:clamp(560px, 88vh, 820px); overflow:hidden; background:var(--bg-dark); }
.hero-slides{ position:absolute; inset:0; }
.hero-slide{
  position:absolute; inset:0; opacity:0; transition:opacity 1.1s ease;
  z-index:1;
}
.hero-slide.active{ opacity:1; z-index:2; }
.hero-slide .slot{ width:100%; height:100%; }
.hero-slide .ken{ position:absolute; inset:0; animation:none; }
.hero-slide.active .ken{ animation:ken 7s ease-out forwards; }
@keyframes ken{ from{ transform:scale(1.08); } to{ transform:scale(1); } }
.hero-scrim{ position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(90deg, rgba(12,14,17,.82) 0%, rgba(12,14,17,.52) 46%, rgba(12,14,17,.08) 100%);
}
.hero-scrim::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(12,14,17,.55), transparent 40%); }
.hero-inner{ position:relative; z-index:4; height:100%; display:flex; align-items:center; }
.hero-content{ max-width:680px; color:#fff; }
.hero-content .eyebrow{ color:#fff; margin-bottom:22px; }
.hero-content h1{ color:#fff; margin-bottom:22px; }
.hero-content h1 em{ font-style:normal; color:var(--red); }
.hero-content p{ font-size:clamp(1.05rem,1.5vw,1.28rem); color:#D6D9DE; max-width:560px; margin-bottom:32px; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; }

.hero-dots{ position:absolute; bottom:34px; left:50%; transform:translateX(-50%); z-index:5; display:flex; gap:10px; }
.hero-dots button{ width:34px; height:4px; border:none; background:rgba(255,255,255,.35); border-radius:2px; padding:0; transition:.3s; }
.hero-dots button.active{ background:var(--red); width:50px; }

.hero-meta{ position:absolute; right:var(--gutter); bottom:30px; z-index:5; color:#fff; text-align:right; }
.hero-meta .num{ font-family:var(--display); font-weight:700; font-size:1.1rem; }
.hero-meta .num span{ color:var(--grey-400); }

/* trust strip */
.trust{ border-bottom:1px solid var(--line); background:#fff; }
.trust .container{ display:flex; align-items:center; justify-content:space-between; gap:30px; padding-block:26px; flex-wrap:wrap; }
.trust-item{ display:flex; align-items:center; gap:13px; }
.trust-item .ti-ic{ width:42px; height:42px; border-radius:8px; background:var(--bg-alt); color:var(--red); display:grid; place-items:center; flex-shrink:0; }
.trust-item .ti-ic svg{ width:21px; height:21px; }
.trust-item b{ font-family:var(--display); font-size:.98rem; display:block; }
.trust-item small{ color:var(--grey); font-size:.82rem; }

/* ============================================================
   SERVICES — cartes
   ============================================================ */
.svc-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.svc-card{
  position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:32px 28px; overflow:hidden; transition:transform .25s, box-shadow .25s, border-color .25s;
  display:flex; flex-direction:column; min-height:280px;
}
.svc-card::before{ content:""; position:absolute; left:0; top:0; height:3px; width:0; background:var(--red); transition:width .35s ease; }
.svc-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:transparent; }
.svc-card:hover::before{ width:100%; }
.svc-card .svc-ic{ width:54px; height:54px; border-radius:10px; background:var(--bg-alt); color:var(--red); display:grid; place-items:center; margin-bottom:22px; transition:background .25s, color .25s; }
.svc-card:hover .svc-ic{ background:var(--red); color:#fff; }
.svc-card .svc-ic svg{ width:28px; height:28px; }
/* pictogrammes de marque (images couleur) */
.svc-picto{ width:74px; height:74px; object-fit:contain; display:block; margin-bottom:20px; transition:transform .25s; }
.svc-card:hover .svc-picto{ transform:scale(1.06); }
.svc-detail-picto{ width:80px; height:80px; object-fit:contain; display:block; margin-bottom:18px; }
.svc-card h3{ font-size:1.22rem; margin-bottom:10px; }
.svc-card p{ font-size:.92rem; color:var(--grey); margin-bottom:20px; flex:1; }
.svc-card .svc-num{ position:absolute; top:24px; right:26px; font-family:var(--display); font-weight:700; font-size:.85rem; color:var(--line); }
.svc-card .link-arrow{ font-size:.88rem; }

/* feature row (image + texte alterné) */
.feature{ display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:clamp(30px,5vw,70px); }
.feature.flip .feature-media{ order:2; }
.feature-media .slot{ width:100%; aspect-ratio:4/3; }
.feature-media{ position:relative; }
.feature-media .tag{
  position:absolute; left:18px; bottom:18px; background:var(--red); color:#fff;
  font-family:var(--display); font-weight:600; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
  padding:8px 14px; border-radius:var(--radius); z-index:3;
}
.feature-body .eyebrow{ margin-bottom:16px; }
.feature-body h2{ margin-bottom:18px; }
.feature-list{ list-style:none; padding:0; margin:24px 0 30px; display:grid; gap:13px; }
.feature-list li{ display:flex; gap:13px; align-items:flex-start; font-size:.98rem; }
.feature-list li .ck{ width:22px; height:22px; border-radius:50%; background:var(--red-tint); color:var(--red); display:grid; place-items:center; flex-shrink:0; margin-top:1px; }
.feature-list li .ck svg{ width:13px; height:13px; }

/* ============================================================
   DÉPANNAGE BANNER
   ============================================================ */
.depan-banner{ position:relative; overflow:hidden; background:var(--bg-darker); color:#fff; border-radius:var(--radius-lg); }
.depan-banner .db-bg{ position:absolute; inset:0; opacity:.32; }
.depan-banner .db-bg .slot{ width:100%; height:100%; }
.depan-banner::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(12,14,17,.95), rgba(12,14,17,.7)); }
.depan-inner{ position:relative; z-index:2; padding:clamp(40px,6vw,72px); display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.depan-inner h2{ color:#fff; max-width:560px; }
.depan-inner h2 em{ font-style:normal; color:var(--red); }
.depan-inner .lead{ color:#C7CBD1; max-width:520px; margin-top:14px; }
.depan-phone{ flex-shrink:0; }
.depan-phone .dp-call{ display:inline-flex; align-items:center; gap:16px; background:var(--red); color:#fff; padding:20px 28px; border-radius:var(--radius-lg); transition:transform .2s, background .2s; }
.depan-phone .dp-call:hover{ transform:translateY(-3px); background:var(--red-600); }
.depan-phone .dp-call .dpc-ic{ width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.18); display:grid; place-items:center; }
.depan-phone .dp-call svg{ width:24px; height:24px; }
.depan-phone .dp-call small{ display:block; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; opacity:.85; font-family:var(--display); font-weight:600; }
.depan-phone .dp-call b{ font-family:var(--display); font-size:1.5rem; line-height:1.1; }

/* ============================================================
   STATS
   ============================================================ */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; }
.stat{ background:#fff; padding:34px 26px; text-align:center; }
.section.dark .stats{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.12); }
.section.dark .stat{ background:transparent; }
.stat .sn{ font-family:var(--display); font-weight:700; font-size:clamp(2.2rem,4vw,3.1rem); color:var(--ink); line-height:1; letter-spacing:-.03em; }
.section.dark .stat .sn{ color:#fff; }
.stat .sn .u{ color:var(--red); }
.stat .sl{ margin-top:10px; font-size:.88rem; color:var(--grey); letter-spacing:.02em; }

/* ============================================================
   NEWS CARDS
   ============================================================ */
.news-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.news-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; transition:transform .25s, box-shadow .25s; display:flex; flex-direction:column; }
.news-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); }
.news-card .nc-media{ position:relative; }
.news-card .nc-media .slot{ width:100%; aspect-ratio:16/10; }
.news-card .nc-cat{ position:absolute; top:14px; left:14px; background:#fff; color:var(--ink); font-family:var(--display); font-weight:600; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; padding:6px 12px; border-radius:var(--radius); z-index:3; }
.news-card .nc-body{ padding:24px 24px 26px; display:flex; flex-direction:column; flex:1; }
.news-card .nc-date{ font-size:.8rem; color:var(--grey); letter-spacing:.04em; margin-bottom:10px; font-family:var(--display); font-weight:500; }
.news-card h3{ font-size:1.18rem; line-height:1.25; margin-bottom:12px; }
.news-card p{ font-size:.9rem; color:var(--grey); margin-bottom:18px; flex:1; }

/* ============================================================
   CONSEILS CARDS
   ============================================================ */
.advice-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.advice-card{ position:relative; border-radius:var(--radius-lg); overflow:hidden; min-height:360px; display:flex; align-items:flex-end; color:#fff; }
.advice-card .slot{ position:absolute; inset:0; width:100%; height:100%; }
.advice-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(12,14,17,.9) 5%, rgba(12,14,17,.25) 60%, rgba(12,14,17,.1)); z-index:2; }
.advice-card .ac-body{ position:relative; z-index:3; padding:28px; }
.advice-card .ac-tag{ font-family:var(--display); font-weight:600; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:#fff; background:var(--red); display:inline-block; padding:5px 12px; border-radius:var(--radius); margin-bottom:14px; }
.advice-card h3{ color:#fff; font-size:1.35rem; margin-bottom:10px; }
.advice-card p{ color:#D6D9DE; font-size:.9rem; margin:0; }

/* ============================================================
   PAGE HEADER (sous-pages)
   ============================================================ */
.page-hero{ position:relative; background:var(--bg-dark); color:#fff; overflow:hidden; }
.page-hero .ph-bg{ position:absolute; inset:0; opacity:.28; }
.page-hero .ph-bg .slot{ width:100%; height:100%; }
.page-hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(100deg, rgba(12,14,17,.94), rgba(12,14,17,.66)); z-index:1; }
.page-hero .container{ position:relative; z-index:2; padding-block:clamp(64px,10vw,120px); }
.page-hero .breadcrumb{ font-family:var(--display); font-size:.85rem; color:#9AA0A8; margin-bottom:20px; display:flex; gap:8px; align-items:center; }
.page-hero .breadcrumb a:hover{ color:#fff; }
.page-hero .breadcrumb .sep{ color:var(--red); }
.page-hero h1{ color:#fff; max-width:840px; }
.page-hero p{ color:#C7CBD1; max-width:600px; margin-top:20px; font-size:1.12rem; }

/* generic prose */
.prose{ max-width:760px; }
.prose p{ color:var(--ink-soft); margin-bottom:1.3em; }
.prose h3{ font-size:1.4rem; margin:1.6em 0 .6em; }

/* ============================================================
   FORMULAIRES
   ============================================================ */
.form{ display:grid; gap:18px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field{ display:flex; flex-direction:column; gap:7px; }
.field label{ font-family:var(--display); font-weight:600; font-size:.85rem; letter-spacing:.02em; }
.field label .req{ color:var(--red); }
.field input, .field textarea, .field select{
  font-family:var(--body); font-size:.98rem; color:var(--ink);
  padding:13px 15px; border:1.5px solid var(--line); border-radius:var(--radius); background:#fff; transition:border-color .2s, box-shadow .2s;
}
.field textarea{ resize:vertical; min-height:130px; }
.field input:focus, .field textarea:focus, .field select:focus{ outline:none; border-color:var(--red); box-shadow:0 0 0 3px rgba(224,8,16,.12); }
.field.error input, .field.error textarea{ border-color:var(--red); }
.field .err-msg{ color:var(--red); font-size:.8rem; display:none; }
.field.error .err-msg{ display:block; }
.check{ display:flex; gap:11px; align-items:flex-start; font-size:.9rem; color:var(--grey); }
.check input{ margin-top:3px; width:17px; height:17px; accent-color:var(--red); flex-shrink:0; }
.form-note{ font-size:.82rem; color:var(--grey); }
.form-success{ display:none; background:#EAF7F0; border:1px solid #B6E4CC; color:#1B7a4b; padding:16px 18px; border-radius:var(--radius); font-size:.94rem; }
.form-success.show{ display:flex; gap:10px; align-items:center; }
.form-success svg{ width:20px; height:20px; flex-shrink:0; }

.newsletter-box{ background:var(--bg-dark); color:#fff; border-radius:var(--radius-lg); padding:clamp(34px,5vw,56px); }
.newsletter-box h3{ color:#fff; }
.newsletter-box p{ color:#AfB4Bd; }
.newsletter-form{ display:flex; gap:12px; margin-top:22px; flex-wrap:wrap; }
.newsletter-form input{ flex:1; min-width:220px; padding:15px 17px; border-radius:var(--radius); border:1.5px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); color:#fff; font-family:var(--body); font-size:1rem; }
.newsletter-form input::placeholder{ color:#8A9098; }
.newsletter-form input:focus{ outline:none; border-color:var(--red); }

/* contact info cards */
.cinfo{ display:grid; gap:16px; }
.cinfo-item{ display:flex; gap:16px; align-items:flex-start; padding:20px; border:1px solid var(--line); border-radius:var(--radius-lg); background:#fff; transition:border-color .2s, box-shadow .2s; }
.cinfo-item:hover{ box-shadow:var(--shadow-sm); }
.cinfo-item .ci-ic{ width:46px; height:46px; border-radius:9px; background:var(--red-tint); color:var(--red); display:grid; place-items:center; flex-shrink:0; }
.cinfo-item .ci-ic svg{ width:22px; height:22px; }
.cinfo-item b{ font-family:var(--display); display:block; margin-bottom:3px; }
.cinfo-item a, .cinfo-item span{ color:var(--grey); font-size:.95rem; }
.cinfo-item a:hover{ color:var(--red); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ background:var(--bg-darker); color:#9AA0A8; padding-top:clamp(56px,7vw,84px); font-size:.92rem; }
.footer-top{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,.09); }
.footer-brand img{ width:280px; margin:-42px 0 -26px -6px; }
.footer-brand p{ max-width:300px; line-height:1.6; }
.footer-col h4{ font-family:var(--display); font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; color:#fff; margin-bottom:18px; font-weight:600; }
.footer-col ul{ list-style:none; padding:0; margin:0; display:grid; gap:11px; }
.footer-col a{ color:#9AA0A8; transition:color .2s; }
.footer-col a:hover{ color:#fff; }
.footer-contact li{ display:flex; gap:10px; align-items:flex-start; }
.footer-contact svg{ width:16px; height:16px; color:var(--red); flex-shrink:0; margin-top:3px; }
.footer-bottom{ display:flex; align-items:center; justify-content:space-between; gap:18px; padding:26px 0; flex-wrap:wrap; }
.footer-bottom .fb-legal{ display:flex; gap:20px; flex-wrap:wrap; }
.footer-bottom a:hover{ color:#fff; }
.footer-social{ display:flex; gap:12px; }
.footer-social a{ width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.14); display:grid; place-items:center; transition:.2s; }
.footer-social a:hover{ background:var(--red); border-color:var(--red); color:#fff; }
.footer-social svg{ width:16px; height:16px; }

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
  .reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
  .reveal.in{ opacity:1; transform:none; }
  .reveal.d1{ transition-delay:.08s; }
  .reveal.d2{ transition-delay:.16s; }
  .reveal.d3{ transition-delay:.24s; }
  .reveal.d4{ transition-delay:.32s; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .svc-grid{ grid-template-columns:repeat(2,1fr); }
  .news-grid{ grid-template-columns:repeat(2,1fr); }
  .advice-grid{ grid-template-columns:repeat(2,1fr); }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .feature{ grid-template-columns:1fr; gap:34px; }
  .feature.flip .feature-media{ order:0; }
  .footer-top{ grid-template-columns:1fr 1fr; gap:32px; }
  .footer-brand{ grid-column:1 / -1; }
}
@media (max-width:620px){
  body{ font-size:16px; }
  .cols-2,.cols-3,.cols-4{ grid-template-columns:1fr; }
  .svc-grid,.news-grid,.advice-grid{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .form-row{ grid-template-columns:1fr; }
  .utilbar .ub-left .ub-hide{ display:none; }
  .depan-inner{ flex-direction:column; align-items:flex-start; }
  .hero-meta{ display:none; }
}

/* Titres en Inter Display (optique grande taille) */
h1,h2,h3,h4{ font-family:var(--heading); }

/* ============================================================
   ARTICLE (actualités)
   ============================================================ */
.article-hero .container{ padding-block:clamp(56px,8vw,96px); }
.article-meta{ display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center; margin-top:22px; color:#C7CBD1; font-size:.92rem; }
.article-meta .a-cat{ background:var(--red); color:#fff; font-weight:600; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; padding:6px 12px; border-radius:var(--radius); }
.article-figure{ max-width:980px; margin:clamp(-60px,-5vw,-40px) auto 0; position:relative; z-index:3; padding-inline:var(--gutter); }
.article-figure .slot{ display:block; width:100%; aspect-ratio:16/9; }
.article-figure figcaption{ font-size:.82rem; color:var(--grey); margin-top:10px; }
.article-body{ max-width:720px; margin:0 auto; padding:clamp(40px,6vw,64px) var(--gutter) clamp(56px,8vw,96px); font-size:1.08rem; line-height:1.78; color:var(--ink-soft); }
.article-body .lead{ font-size:1.22rem; color:var(--ink); margin-bottom:1.6em; }
.article-body h2{ font-size:clamp(1.4rem,2.4vw,1.75rem); margin:2em 0 .7em; color:var(--ink); }
.article-body h3{ font-size:1.2rem; margin:1.6em 0 .5em; color:var(--ink); }
.article-body p{ margin:0 0 1.15em; }
.article-body ul,.article-body ol{ margin:0 0 1.3em; padding-left:1.3em; }
.article-body li{ margin-bottom:.55em; }
.article-body li::marker{ color:var(--red); font-weight:700; }
.article-body a{ color:var(--red); text-decoration:underline; text-underline-offset:3px; }
.article-body a:hover{ color:var(--red-700); }
.article-body .callout{ background:var(--bg-alt); border-radius:var(--radius-lg); padding:24px 26px; margin:2em 0; }
.article-body .callout b{ display:block; font-family:var(--heading); color:var(--ink); font-size:1.05rem; margin-bottom:8px; }
.article-body .callout ul{ margin:0; }
.article-body .sources{ font-size:.85rem; color:var(--grey); border-top:1px solid var(--line); padding-top:18px; margin-top:2.4em; }
.article-body .sources a{ color:var(--grey); }
.article-cta{ margin-top:2.4em; background:var(--bg-dark); color:#D6D9DE; border-radius:var(--radius-lg); padding:clamp(26px,4vw,36px); display:flex; gap:20px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.article-cta b{ font-family:var(--heading); color:#fff; font-size:1.2rem; display:block; margin-bottom:4px; }
.article-cta p{ margin:0; font-size:.95rem; color:#AfB4Bd; }
.article-cta .btn{ text-decoration:none; color:#fff; }
.article-back{ display:inline-flex; margin-bottom:26px; }

/* ====== WordPress ====== */
.slot{display:block;width:100%;object-fit:cover}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.form-error-box{background:#FCEAEB;border:1px solid #F3B9BC;color:#9E040D;padding:14px 16px;border-radius:var(--radius);font-size:.94rem}
.form-success.show,.form-success.is-visible{display:flex;gap:10px;align-items:center}
.article-body .is-style-ampero-lead{font-size:1.22rem;color:var(--ink);margin-bottom:1.6em}
.article-body .is-style-ampero-callout{background:var(--bg-alt);border-radius:var(--radius-lg);padding:24px 26px;margin:2em 0}
.article-body .is-style-ampero-callout>p:first-child strong{display:block;font-family:var(--heading);color:var(--ink);font-size:1.05rem}
.article-body .is-style-ampero-callout>p:first-child{margin-bottom:8px}
.article-body .is-style-ampero-callout ul{margin:0}
.article-body .is-style-ampero-sources{font-size:.85rem;color:var(--grey);border-top:1px solid var(--line);padding-top:18px;margin-top:2.4em}
.article-body .is-style-ampero-sources a{color:var(--grey)}
.article-body img{height:auto;max-width:100%}
.article-body figure{margin:1.8em 0}
.article-body figcaption{font-size:.85rem;color:var(--grey);margin-top:8px}
.legal-updated{font-size:.9rem;color:var(--grey);margin-bottom:2em}
.pagination-wrap{display:flex;justify-content:center;gap:8px;margin-top:44px}
.pagination-wrap .page-numbers{padding:9px 15px;border:1px solid var(--line);border-radius:var(--radius);font-weight:600}
.pagination-wrap .current{background:var(--red);border-color:var(--red);color:#fff}
.error-404{text-align:center;max-width:620px;margin:0 auto}