/* 2sec.fr — version statique
   Reproduction à l'identique du site Joomla original.
   Couleurs d'origine :
     --primary : #1B5C71 (bleu sarcelle foncé — bandeau hero / compteurs)
     --accent   : #009999 (teal — section "Ils nous font confiance")
     --footer   : #112342 (bleu nuit — footer)
   Police : ProximaNova (self-hosted, comme le template tx_financio d'origine).
            Le texte de footer utilise Montserrat (comme sur le site d'origine).
   Tailles de base (reprises du template) : 1rem = 15px.
     body 15px / line-height 1.5 / couleur #212126
     h1 2.4rem (36px) · h2 1.6rem (24px) · h3 1.32rem (~20px) · h4 1.2rem (18px)
     titre de blurb h3 : 24px / 700 (fixé en inline sur le site d'origine)
     corps de blurb : 16px / line-height 1.8em
     liens de menu : 13px
     compteurs : 6rem (~90px)
*/

/* ---------- Polices ProximaNova (self-hosted) ---------- */
@font-face {
  font-family: "ProximaNova";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local("ProximaNova-Light"), url("fonts/ProximaNova-Light.woff2") format("woff2");
}
@font-face {
  font-family: "ProximaNova";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("ProximaNova-Regular"), url("fonts/ProximaNova-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "ProximaNova";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: local("ProximaNova-RegItalic"), url("fonts/ProximaNova-RegItalic.woff2") format("woff2");
}
@font-face {
  font-family: "ProximaNova";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local("ProximaNova-Bold"), url("fonts/ProximaNova-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "ProximaNova";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: local("ProximaNova-Extrabold"), url("fonts/ProximaNova-Extrabold.woff2") format("woff2");
}
@font-face {
  font-family: "ProximaNova";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: local("ProximaNova-Black"), url("fonts/ProximaNova-Black.woff2") format("woff2");
}

/* Police d'icônes Quix (qxi) — sous-échantillonnée au seul glyphe \ea11
   utilisé par le bouton panique (.qxif-exclamation-triangle). */
@font-face {
  font-family: "qxi";
  font-display: swap;
  src: url("fonts/qxi.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}

:root {
  --primary: #1B5C71;
  --accent: #009999;
  --footer: #112342;
  --text: #333;
  --muted: #666;
}

* { box-sizing: border-box; }

/* Root = 15px (identique au template T4 : html{font-size:15px}).
   Toutes les tailles en rem ci-dessous reproduisent la typo responsive du site Joomla. */
html { scroll-behavior: smooth; font-size: 15px; }

body {
  margin: 0;
  font-family: ProximaNova, Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: #212126;
  background: #fff;
}

/* Taille de body en pt par breakpoint — reprise du template T4 Joomla.
   Le menu (.main-nav a) hérite de body (comme sur Joomla : la règle font-size:13px
   n'existe que dans @media 768-1024px). */
@media (max-width: 767px)        { body { font-size: 9.295pt !important; } }   /* ≤767 */
@media (min-width: 768px)        { body { font-size: 10.14pt !important; } }  /* 768–1199 */
@media (min-width: 1200px)       { body { font-size: 11.7pt  !important; } }  /* 1200–1440 */
@media (min-width: 1441px)       { body { font-size: 13pt    !important; } }  /* ≥1441 */

img { max-width: 100%; height: auto; }

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Typographie responsive (reprise du template T4) ----------
   Breakpoints T4 : ≤767 / 768–1199 / 1200–1440 / ≥1441.
   Valeurs rem identiques à celles du site Joomla (ex : h1 = 1.8rem ≥1200px). */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 .5em;
  font-family: ProximaNova, Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
h1 { font-size: 1.32rem; line-height: 1.2; }   /* mobile  ≤767 */
h2 { font-size: 0.88rem; line-height: 1.3; }   /* mobile */
h3 { font-size: 0.726rem; line-height: 1.4; } /* mobile */
h4 { font-size: 0.66rem; line-height: 1.4; }   /* mobile */

@media (min-width: 768px) {
  h1 { font-size: 1.44rem; }   /* 768–1199 */
  h2 { font-size: 0.96rem; }
  h3 { font-size: 0.792rem; }
  h4 { font-size: 0.72rem; }
}
@media (min-width: 1200px) {
  h1 { font-size: 1.8rem; }    /* 1200–1440 */
  h2 { font-size: 1.2rem; }
  h3 { font-size: 0.99rem; }
  h4 { font-size: 0.9rem; }
}
@media (min-width: 1441px) {
  h1 { font-size: 2.4rem; }    /* ≥1441 */
  h2 { font-size: 1.6rem; }
  h3 { font-size: 1.32rem; }
  h4 { font-size: 1.2rem; }
}

/* Container = .qx-container Joomla (box-sizing:content-box, max-width responsive, padding 15/30/40).
   Media queries reprises du template T4 : 768 >=576 . 1010 >=768 . 1200 >=1010 . 1440 >=1200 . 1920 >=1441. */
.container {
  margin: 0 auto;
  padding: 0 15px;
  box-sizing: content-box;
}
@media (min-width: 576px)  { .container { max-width: 768px; } }
@media (min-width: 768px)  { .container { max-width: 1010px; } }
@media (min-width: 1010px) { .container { max-width: 1200px; } }
@media (min-width: 1200px) { .container { max-width: 1440px; } }
@media (min-width: 1441px) { .container { max-width: 1920px; } }
@media (min-width: 640px) { .container { padding-left: 30px; padding-right: 30px; } }
@media (min-width: 960px) { .container { padding-left: 40px; padding-right: 40px; } }

.section { padding: 25px 0; }
.section--tight { padding: 20px 0; }
.text-center { text-align: center; }
.bg-primary { background: var(--primary); color: #fff; }
.bg-accent { background: var(--accent); color: #fff; }
.bg-footer { background: var(--footer); color: rgba(255,255,255,.8); }

/* ---------- Header ----------
   Reproduit #t4-header.header1 du template T4 :
   - fond blanc, border-bottom
   - logo : max-height (70px desktop) et non max-width
   - menu (.t4-navbar a) : text-transform:uppercase, 13px, weight 600,
     couleur #212126, hover/active #099 (règles #t4-header.header1 ... navbar-nav>li>a) */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid #eee;
}
/* Header pleine largeur (.qx-container-fluid Joomla) : pas de max-width,
   padding 15px. Le contenu (logo / menu / bouton) se répartit sur toute la largeur. */
.site-header__inner {
  padding: 10px 15px 0;
  display: flex;
  align-items: center;
  gap: 15px;
}
.site-header__logo { padding: 8px 0; }
.site-header__logo img { max-height: 70px; width: auto; height: auto; display: block; }
.site-header__logo .logo-sm { display: none; }

.main-nav { flex: 1 1 auto; }
.main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;   /* menu aligné à droite */
}
.main-nav li { margin: 0; }
.main-nav a {
  color: #212126;
  font-weight: 600;
  text-transform: uppercase;   /* #t4-header .t4-navbar a { text-transform: uppercase !important } */
  padding: 8px 8px;
  display: block;
  /* font-size hérite du body (comme Joomla). Règle 13px seulement en 768-1024 : */
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .main-nav a { font-size: 13px; }   /* règle Joomla spécifique au range 768-1024 */
}
.main-nav a:hover,
.main-nav a.is-active {
  color: var(--accent);      /* #099 — règle hover/active du méga-menu */
  text-decoration: none;
}

/* Bouton panique = .qx-btn.qx-btn-primary du #qx-button-529 Joomla :
   font-size 1.44rem, graisse 700, uppercase, border-radius 0,
   bordure 3px #099, padding 5px 10px, icône qxi (\ea11) 17px blanche. */
.panic-btn {
  display: inline-flex;
  align-items: center;
  background: var(--accent);           /* #099 */
  color: #fff !important;
  font-weight: 700;                    /* .qx-btn { font-weight: 700 !important } */
  font-size: 1.44rem;                  /* .qx-btn { font-size: 1.44rem !important } */
  text-transform: uppercase;
  padding: 5px 10px;                   /* #qx-button-529 .qx-btn { padding: 5px 10px } */
  border: 3px solid var(--accent);     /* .qx-btn { border-width: 3px } + border-color #099 */
  border-radius: 0;                    /* .qx-btn { border-radius: 0 !important } */
  margin-left: 1rem;                   /* marge à gauche : décolle le bouton du texte du menu */
}
.panic-btn:hover { background: #11426d; border-color: #11426d; text-decoration: none; }
/* Icône = .qxif-exclamation-triangle : glyphe \ea11 de la police Quix (qxi) */
.panic-btn::before {
  content: "\ea11";
  font-family: "qxi";
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-size: 17px;                     /* #qx-button-529 a i { width/height/font-size: 17px } */
  color: #fff;                         /* icône blanche */
  margin-right: 15px;                  /* desktop */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media (min-width: 768px) and (max-width: 1024px) {
  .panic-btn::before { margin-right: 30px; }   /* tablette Joomla */
}
@media (max-width: 767px) {
  .panic-btn::before { margin-right: 20px; }   /* mobile Joomla */
}

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  font-size: 24px;
  cursor: pointer;
  color: var(--primary);
  margin-left: auto;
  padding: 6px 10px;
}

/* ---------- Hero bandeau ---------- */
.hero {
  position: relative;
  background: var(--primary);
  overflow: hidden;
}
.hero__img {
  width: 100%;
  height: 495px;
  object-fit: cover;
  display: block;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
  padding: 20px;
}
.hero__overlay h1 { color: #fff; margin: 0 0 12px; }   /* hérite des tailles h1 responsive */
.hero__overlay p { margin: 0; font-size: 1rem; }   /* = body 15px, comme le slide-content Joomla */
.hero__overlay .btn {
  display: inline-block;
  margin-top: 18px;
  background: #fff;
  color: var(--primary);
  padding: 10px 22px;
  border-radius: 3px;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 14px;
}
.hero__overlay .btn:hover { text-decoration: none; background: #f0f0f0; }

/* ---------- Titre de page ---------- */
.page-title { text-align: center; padding: 30px 15px 10px; }
.page-title h1 {
  font-weight: 600;
  text-transform: uppercase;
}   /* hérite des tailles h1 responsive */

/* ---------- Grilles ---------- */
.grid { display: flex; flex-wrap: wrap; gap: 20px; }
.grid--3 > * { flex: 1 1 33.333%; min-width: 260px; }
.grid--2 > * { flex: 1 1 47%; min-width: 280px; }
/* En grille 2 colonnes, un bloc seul (ou le dernier d'un nombre impair) prend toute la largeur */
.grid--2 > *:only-child,
.grid--2 > *:last-child:nth-child(odd):not(:only-child) { flex: 1 1 100%; }

/* ---------- Blurb (carte avec icône) ----------
   Reproduit .qx-element-blurb-v2 : wrapper centré (icône centrée),
   mais h2/h3 text-align:left avec un carré vert ::before (règle T4 .qx-element-blurb-v2 h3:before). */
.blurb { text-align: center; padding: 25px; margin-bottom: 30px; }
.blurb__media { margin-bottom: 25px; }
.blurb__media img { height: 100px; width: auto; display: inline-block; }   /* hauteur fixe : icônes de ratios différents → titres alignés */
.blurb__title h2,
.blurb__title h3 {
  font-weight: 700;
  line-height: 1.2em;
  margin-bottom: 18px;
  text-align: left;          /* .qx-element-blurb-v2 h3 { text-align: left } */
  text-transform: uppercase; /* .qx-element-blurb-v2 h3 { text-transform: uppercase } */
  padding-left: 0;
  /* font-size : hérite du h3 responsive en rem (règle T4 !important qui écrase l'inline 24px) :
     0.726rem ≤767 · 0.792rem 768–1199 · 0.99rem 1200–1440 · 1.32rem ≥1441 */
}
/* Carré vert avant les titres h2/h3 de blurb (règle T4 .qx-element-blurb-v2 h3:before) */
.blurb__title h2::before,
.blurb__title h3::before {
  content: "■";
  color: var(--primary);   /* #1b5c71 */
  padding-right: 10px;
  text-decoration: none;
  font-size: 25px !important;
}
.blurb__body {
  font-size: 16px;
  line-height: 1.6rem;   /* .qx-element-blurb-v2 .qx-element-blurb__body * { line-height: 1.6rem !important } */
  text-align: justify;
  color: #343a40;         /* .qx-element-blurb-v2 .qx-element-blurb__body { color: #343a40 !important } */
}
.blurb__body p { margin: 0 0 1em; }

/* ---------- Compteurs ---------- */
.counters { background: var(--primary); color: #fff; padding: 20px 0; }
.counters .counter { font-size: 6rem; font-weight: 700; line-height: 1; }   /* 6rem = 90px, comme .qx-element-counter-v2 .counter-count */
@media (max-width: 767px) {
  .counters .counter { font-size: 3.5rem; }   /* sécurité mobile : évite l'overflow */
}
.counters .counter-card {
  background: rgba(255,255,255,.06);
  padding: 20px;
  border-radius: 4px;
}
.counters .counter-card p { margin: 0 0 1em; }
.counters .counter-card a { color: #fff; }
.counters .counter-card .more { text-align: right; display: block; }

/* ---------- Bloc image + texte ----------
   Reproduit le template T4 :
   - .qx-element-image-v2 / .frame-around-image : cadre avec traits verts #1b5c71
     aux coins haut-gauche et bas-droit (padding 20px + 4 gradients, 120px).
   - .qx-element-blurb-v2.blurb-frame : fond gris #f2f2f2, bord 1px #6c757d,
     border-radius 15px, padding 35px.
   Sur le site Joomla, TOUS les blocs feature (image+texte) portent ces deux styles. */
.feature { display: flex; flex-wrap: wrap; gap: 30px; align-items: center; padding: 25px 0; }
.feature > * { flex: 1 1 45%; min-width: 280px; }

/* Cadre vert aux coins sur l'image de feature */
.feature img {
  width: 100%;
  display: block;
  padding: 20px;
  background:
    linear-gradient(to right,  var(--primary) 3px, transparent 3px) 0 0,
    linear-gradient(to bottom, var(--primary) 3px, transparent 3px) 0 0,
    linear-gradient(to left,   var(--primary) 3px, transparent 3px) 100% 100%,
    linear-gradient(to top,    var(--primary) 3px, transparent 3px) 100% 100%;
  background-repeat: no-repeat;
  background-size: 120px 120px;
}

.feature--reverse { flex-direction: row-reverse; }

/* blurb-frame : fond gris clair, bord fin arrondi */
.feature .blurb {
  text-align: left;
  padding: 35px;
  margin: 0;
  background-color: #f2f2f2;
  border: 1px solid #6c757d;
  border-radius: 15px;
  min-height: 0;
}
.feature .blurb__media { display: none; }



/* ---------- Article / contenu légal ---------- */
.article { padding: 30px 0; }
.article h2 { text-transform: uppercase; color: var(--primary); margin-top: 1.5em; }
.article h3 { color: var(--primary); margin-top: 1.5em; }
.article p { margin: 0 0 1em; text-align: justify; }
.article ul { margin: 0 0 1em 1.5em; padding: 0; }
.article ul li { margin-bottom: .5em; }

/* ---------- Plan du site ---------- */
.plan ul { list-style: none; padding: 0; }
.plan li { margin: 6px 0; }
.plan h2 { text-transform: uppercase; color: var(--primary); }

/* ---------- Coordonnées / contact ---------- */
.contact-block { display: flex; flex-wrap: wrap; gap: 30px; padding: 30px 0; }
.contact-block > * { flex: 1 1 320px; }
.contact-coords p { margin: 0 0 .5em; }
.contact-coords a { color: var(--primary); }
.map iframe { width: 100%; height: 300px; border: 0; }
.contact-cta {
  background: #f7f7f7;
  padding: 25px;
  border-left: 4px solid var(--primary);
  margin-bottom: 20px;
}
.contact-cta ul { list-style: none; padding: 0; margin: 0; }
.contact-cta li { margin-bottom: 8px; }

.mailto-card {
  display: inline-block;
  margin: 10px 0 20px;
  background: var(--primary);
  color: #fff !important;
  padding: 12px 24px;
  border-radius: 3px;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 14px;
}
.mailto-card:hover { background: #164a5b; text-decoration: none; }

/* ---------- Footer ---------- */
.site-footer { background: var(--footer); color: rgba(255,255,255,.8); padding: 30px 0 25px; }
.site-footer .grid { align-items: flex-start; }
/* Footer sur 2 colonnes égales (menu mentions légales + bloc logo/texte) jusqu'à 767px. */
.site-footer .grid--2 > * { flex: 1 1 0; min-width: 0; }
.site-footer a { color: #fff; }
.site-footer__logo { text-align: center; margin-bottom: 15px; }
.site-footer__logo img { width: 30%; min-width: 120px; }
.site-footer__text {
  text-align: center;
  font-family: Montserrat, "Segoe UI", Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8em;
  color: rgba(255,255,255,.8);
}
.footer-nav ul { list-style: none; margin: 0; padding: 0; }
.footer-nav li { margin-bottom: 8px; color: #fff; }   /* #t4-footer .nav li{color:#fff} */
/* Carré teal avant chaque item du menu footer — #t4-footer .nav li:before{content:"■";color:#099;font-size:25px!important} */
.footer-nav li::before {
  content: "■";
  color: var(--accent);     /* #099 */
  padding-right: 10px;
  text-decoration: none;
  font-size: 25px !important;
}
.footer-nav a { color: #fff; font-weight: 600; text-transform: uppercase; line-height: normal; }   /* font-size hérite du body */
.footer-nav a:hover { text-decoration: underline; }

/* ---------- Badges / images inline ---------- */
.badge { display: block; margin: 15px auto 0; max-width: 180px; }
.img-fluid { width: 100%; }

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
  .hero__img { height: 400px; }
}

@media (max-width: 767px) {
  .site-header__inner { flex-wrap: wrap; }
  .site-header__logo { flex: 0 0 auto; }
  .site-header__logo .logo-lg { display: none; }
  .site-header__logo .logo-sm { display: inline-block; }

  .main-nav {
    width: 100%;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
  }
  .main-nav.is-open { max-height: 420px; }
  .main-nav ul {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;   /* reset du flex-end desktop */
    padding: 8px 0 12px;
  }
  .main-nav li { margin: 0; }
  .main-nav li:last-child { margin-left: 0; }   /* mobile : bouton panique non décalé */
  .main-nav a { padding: 10px 4px; border-bottom: 1px solid rgba(0,0,0,.06); }
  .panic-btn { margin: 8px 0; justify-content: center; }
  .nav-toggle { display: inline-block; }

  .hero__img { height: 300px; object-fit: cover; }

  .feature { flex-direction: column; }
  .feature--reverse { flex-direction: column; }

  .site-footer .grid > * { flex: 1 1 100%; text-align: center; }
  .footer-nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; }
  .footer-nav li { margin: 0; }
}