/* ==========================================================================
   Tagtek — habillage de la page d'accueil
   Inspiré du thème Masco (mthemeus) : palette, General Sans, formes arrondies.
   Chargé APRES les feuilles du script, pour gagner la cascade.
   Déposé le 30/08/2026. À remettre après chaque mise à jour du script.
   ========================================================================== */

/* ---------- polices ---------- */
@font-face{font-family:'General Sans';src:url('../fonts/general-sans/GeneralSans-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'General Sans';src:url('../fonts/general-sans/GeneralSans-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'General Sans';src:url('../fonts/general-sans/GeneralSans-Semibold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'General Sans';src:url('../fonts/general-sans/GeneralSans-Bold.woff2') format('woff2');font-weight:700;font-display:swap}

/* ---------- jetons ---------- */
:root{
  --tt-accent:#3147FF;
  --tt-accent-dark:#1F31C7;
  --tt-accent-soft:#EEF0FF;
  --tt-amber:#FFC947;
  --tt-heading:#0A102F;
  --tt-body:#5A6182;
  --tt-bg:#FFFFFF;
  --tt-bg-soft:#F6F8FF;
  --tt-border:#E6E9F5;
  --tt-radius:18px;
  --tt-radius-lg:28px;
  --tt-shadow:0 8px 30px rgba(10,16,47,.06);
  --tt-shadow-lg:0 18px 50px rgba(10,16,47,.10);
  --tt-font:'General Sans','Segoe UI',system-ui,-apple-system,sans-serif;
}

/* ---------- base ---------- */
body{font-family:var(--tt-font);color:var(--tt-body);background:var(--tt-bg);
     -webkit-font-smoothing:antialiased;line-height:1.65}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3{font-family:var(--tt-font);color:var(--tt-heading);
     font-weight:600;letter-spacing:-.02em;line-height:1.2}
h1,.h1{font-size:clamp(2.1rem,4.4vw,3.5rem);font-weight:700}
h2,.h2{font-size:clamp(1.7rem,3vw,2.5rem)}
h3,.h3{font-size:clamp(1.15rem,1.7vw,1.4rem)}
p{color:var(--tt-body)}
a{color:var(--tt-accent);text-decoration:none}
a:hover{color:var(--tt-accent-dark)}
section{padding-block:clamp(48px,7vw,96px)}

/* ---------- LE LOGO : correction du débordement ----------
   Le gabarit pose class="w-auto h-100" sur l'image. Sans hauteur définie
   sur le parent, le logo prenait toute la place et passait sous le menu. */
.navbar-brand{display:inline-flex;align-items:center;height:auto!important;
  max-width:200px;flex:0 0 auto;margin-right:28px}
.navbar-brand img,
header .navbar-brand img,
.navbar .navbar-brand img{
  height:44px!important;
  width:auto!important;
  max-width:100%!important;
  max-height:44px!important;
  object-fit:contain;
  display:block}
@media(max-width:991px){
  .navbar-brand{max-width:150px;margin-right:12px}
  .navbar-brand img,.navbar .navbar-brand img{height:36px!important;max-height:36px!important}
}
@media(max-width:400px){
  .navbar-brand{max-width:124px}
  .navbar-brand img,.navbar .navbar-brand img{height:30px!important;max-height:30px!important}
}

/* ---------- en-tête ---------- */
header,.header-section,.navbar{background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(12px)}
header .navbar{padding-block:12px}
.navbar-nav .nav-link{color:var(--tt-heading)!important;font-weight:500;font-size:.97rem;
  padding:8px 14px!important;border-radius:10px;transition:.18s}
.navbar-nav .nav-link:hover{color:var(--tt-accent)!important;background:var(--tt-accent-soft)}
header{border-bottom:1px solid var(--tt-border)}

/* ---------- boutons ---------- */
.btn{font-family:var(--tt-font);font-weight:600;border-radius:999px;
  padding:12px 26px;transition:.2s;border-width:1.5px}
.btn-primary,.btn-sm-success.btn-primary{
  background:var(--tt-accent)!important;border-color:var(--tt-accent)!important;color:#fff!important;
  box-shadow:0 8px 20px rgba(49,71,255,.22)}
.btn-primary:hover,.btn-primary:focus{
  background:var(--tt-accent-dark)!important;border-color:var(--tt-accent-dark)!important;
  transform:translateY(-1px);box-shadow:0 12px 26px rgba(49,71,255,.3)}
.btn-outline-primary{color:var(--tt-accent)!important;border-color:var(--tt-accent)!important;background:transparent!important}
.btn-outline-primary:hover{background:var(--tt-accent)!important;color:#fff!important}

/* ---------- héros ---------- */
.hero-section{background:
   radial-gradient(1100px 480px at 78% -8%,rgba(49,71,255,.10),transparent 60%),
   radial-gradient(760px 380px at 6% 4%,rgba(255,201,71,.16),transparent 62%),
   var(--tt-bg);
  padding-top:clamp(56px,7vw,96px)}
.hero-section h1{margin-bottom:18px}
.hero-section p{font-size:clamp(1rem,1.3vw,1.16rem);max-width:56ch}
.hero-section .form-control,.front-input{
  border:1.5px solid var(--tt-border);border-radius:999px;padding:15px 22px;
  font-size:1rem;box-shadow:var(--tt-shadow);background:#fff}
.hero-section .form-control:focus,.front-input:focus{
  border-color:var(--tt-accent);box-shadow:0 0 0 4px rgba(49,71,255,.12)}

/* ---------- cartes et blocs ---------- */
.card,.feature-card,.pricing-card,.testimonial-card,.vcard-box,.plan-card{
  border:1px solid var(--tt-border)!important;border-radius:var(--tt-radius)!important;
  box-shadow:var(--tt-shadow);background:#fff;transition:.25s}
.card:hover,.feature-card:hover,.vcard-box:hover{
  transform:translateY(-4px);box-shadow:var(--tt-shadow-lg);border-color:rgba(49,71,255,.25)!important}

/* ---------- fonctionnalités ---------- */
.features-section{background:var(--tt-bg-soft)}
.features-section .card,.features-section .feature-card{padding:26px}
.features-section h3,.features-section h4,.features-section h5{margin-bottom:10px;font-weight:600}

/* ---------- tarifs ---------- */
.pricing-plan-section{background:var(--tt-bg)}
.pricing-plan-section .price{color:var(--tt-heading);font-weight:700;
  font-size:clamp(1.8rem,2.6vw,2.4rem)}
.pricing-plan-section .card{padding:8px}

/* ---------- témoignages ---------- */
.testimonial-section{background:var(--tt-bg-soft)}

/* ---------- modèles de cartes ---------- */
.vcard-section img{border-radius:14px;box-shadow:var(--tt-shadow)}

/* ---------- contact ---------- */
.contact-section{background:var(--tt-bg)}
.contact-form .form-control{border:1.5px solid var(--tt-border);border-radius:14px;padding:13px 18px}
.contact-form .form-control:focus{border-color:var(--tt-accent);box-shadow:0 0 0 4px rgba(49,71,255,.12)}

/* ---------- pied de page ---------- */
footer{background:var(--tt-heading);color:rgba(255,255,255,.72)}
footer h2,footer h3,footer h4,footer h5,footer .footer-title{color:#fff}
footer a{color:rgba(255,255,255,.72)}
footer a:hover{color:#fff}
footer .footer-logo img,footer img.footer-logo{height:40px;width:auto;max-height:40px;object-fit:contain}

/* ---------- titres de section ---------- */
.section-title,.section-heading{text-align:center;margin-bottom:44px}
.section-title h2,.section-heading h2{margin-bottom:12px}

/* ---------- confort de lecture ---------- */
img{max-width:100%;height:auto}
::selection{background:var(--tt-accent);color:#fff}

/* ---------- retouches du 30/08 ---------- */
/* le gabarit pose .text-black sur le titre du heros */
.hero-section h1.text-black,.hero-section .h1.text-black{color:var(--tt-heading)!important}
.hero-content p,.text-gray-100{color:var(--tt-body)!important}

/* le grand blanc entre le heros et les modeles */
.hero-section{padding-bottom:0!important}
.hero-section .vcard-section{padding-top:clamp(40px,5vw,72px)!important;margin-top:clamp(24px,4vw,48px)}
.vcard-section{background:var(--tt-bg-soft);border-radius:var(--tt-radius-lg)}

/* titres de section centres, un peu d'air */
.vcard-section h2,.features-section h2,.modern-interface-section h2,
.pricing-plan-section h2,.contact-section h2{margin-bottom:clamp(24px,3vw,40px)}

/* le menu qui se casse sur deux lignes */
.navbar-nav .nav-link{white-space:nowrap}

/* tarifs : mise en avant du forfait conseille */
.pricing-plan-section .card{border-radius:var(--tt-radius)!important}
.pricing-plan-section .card:hover{border-color:var(--tt-accent)!important}