/* ==========================================================================
   Genisoft — Charte graphique de l'agence appliquée à la suite d'outils SEO
   (remplace tutoweb-theme.css ; polices servies depuis /agence-web/fonts/)
   ========================================================================== */

@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('/agence-web/fonts/poppins-400.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('/agence-web/fonts/poppins-500.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('/agence-web/fonts/poppins-600.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('/agence-web/fonts/poppins-700.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url('/agence-web/fonts/poppins-800.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/agence-web/fonts/inter-variable.woff2') format('woff2'); }

:root {
  --gs-night: #20114a;
  --gs-night-deep: #160b33;
  --gs-night-accent: #3a1577;
  --gs-pink: #e60067;
  --gs-pink-hover: #c70057;
  --gs-purple: #7928ca;
  --gs-text: #1f2937;
  --gs-muted: #64748b;
  --gs-light: #f8fafc;
  --gs-border: #e2e8f0;
  --gs-footer: #17171e;
  --gs-radius: 12px;
  --gs-shadow: 0 10px 25px -5px rgba(32, 17, 74, 0.08), 0 8px 10px -6px rgba(32, 17, 74, 0.04);
  --gs-heading: 'Poppins', sans-serif;
  --gs-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ---------- Base ---------- */
html body.antialiased {
  background: var(--gs-light) !important;
  color: var(--gs-text) !important;
  font-family: var(--gs-body) !important;
  font-size: 15px;
}

body.antialiased .page,
body.antialiased .page-wrapper,
body.antialiased .page-content {
  background: transparent !important;
}

body.antialiased h1, body.antialiased h2, body.antialiased h3,
body.antialiased h4, body.antialiased h5, body.antialiased h6,
body.antialiased .h1, body.antialiased .h2, body.antialiased .h3,
body.antialiased .h4, body.antialiased .h5, body.antialiased .h6 {
  font-family: var(--gs-heading) !important;
  color: var(--gs-night) !important;
  letter-spacing: -0.01em;
}

body.antialiased p, body.antialiased li { color: var(--gs-text); }
body.antialiased .text-muted, body.antialiased .text-body { color: var(--gs-muted) !important; }
body.antialiased .text-primary, body.antialiased .text-gradient.text-primary {
  color: var(--gs-pink) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}

body.antialiased a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand) { color: var(--gs-pink); }
body.antialiased a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand):hover { color: var(--gs-pink-hover); }

/* ---------- En-tête ---------- */
body.antialiased .navbar {
  background: var(--gs-night) !important;
  border: 0 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
  padding: 0.7rem 0 !important;
}

body.antialiased .navbar .nav-link {
  color: #ffffff !important;
  font-family: var(--gs-heading) !important;
  font-weight: 500 !important;
  font-size: 0.92rem !important;
  white-space: nowrap;
}

body.antialiased .navbar .nav-link:hover,
body.antialiased .navbar .nav-link:focus { color: var(--gs-pink) !important; background: transparent !important; }
body.antialiased .navbar .nav-link .fas,
body.antialiased .navbar .nav-link .far,
body.antialiased .navbar .nav-link .fab { color: inherit !important; }
body.antialiased .navbar .arrow { filter: brightness(0) invert(1); }

/* Logo texte de l'agence */
.gs-brand { display: flex !important; align-items: center; gap: 10px; margin-right: 1.5rem; text-decoration: none !important; }
.gs-brand img { height: 40px; width: auto; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3)); }
.gs-brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.gs-brand-name { font-family: var(--gs-heading); font-weight: 800; font-size: 1.45rem; color: #ffffff; letter-spacing: 0.5px; }
.gs-brand-name span { color: var(--gs-pink); }
.gs-brand-sub { font-family: var(--gs-body); font-size: 0.64rem; font-weight: 700; color: #a5b4fc; text-transform: uppercase; letter-spacing: 1.5px; margin-top: 2px; }

/* Bascule clair/sombre : la charte de l'agence est unique */
body.antialiased .btn-toggle-mode { display: none !important; }

/* Bouton de recherche et menus */
body.antialiased .navbar .btn-icon-only { background: rgba(255, 255, 255, 0.1) !important; color: #ffffff !important; border: 0 !important; box-shadow: none !important; }
body.antialiased .navbar .btn-icon-only i { color: #ffffff !important; }

body.antialiased .dropdown-menu {
  background: #ffffff !important;
  border: 1px solid var(--gs-border) !important;
  border-radius: var(--gs-radius) !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2) !important;
}
body.antialiased .dropdown-item { color: var(--gs-text) !important; font-size: 0.9rem; }
body.antialiased .dropdown-item:hover { background: var(--gs-light) !important; color: var(--gs-pink) !important; }

/* ---------- Boutons ---------- */
body.antialiased .btn {
  font-family: var(--gs-heading) !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border-radius: 9999px !important;
}

body.antialiased .btn.bg-gradient-primary,
body.antialiased .btn-primary,
body.antialiased .btn.bg-gradient-info,
body.antialiased .btn-info,
body.antialiased .btn.bg-gradient-danger,
body.antialiased .btn-danger {
  background: var(--gs-pink) !important;
  background-image: none !important;
  border: 0 !important;
  color: #ffffff !important;
  box-shadow: 0 10px 25px rgba(230, 0, 103, 0.3) !important;
}

body.antialiased .btn.bg-gradient-primary:hover,
body.antialiased .btn-primary:hover,
body.antialiased .btn.bg-gradient-info:hover,
body.antialiased .btn-info:hover,
body.antialiased .btn.bg-gradient-danger:hover,
body.antialiased .btn-danger:hover { background: var(--gs-pink-hover) !important; transform: translateY(-1px); }

body.antialiased .btn.bg-gradient-success,
body.antialiased .btn-success {
  background: var(--gs-night) !important;
  background-image: none !important;
  border: 0 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

body.antialiased .btn.bg-gradient-warning,
body.antialiased .btn-warning,
body.antialiased .btn.bg-gradient-secondary,
body.antialiased .btn-secondary,
body.antialiased .btn-default {
  background: #ffffff !important;
  background-image: none !important;
  border: 2px solid var(--gs-border) !important;
  color: var(--gs-night) !important;
  box-shadow: none !important;
}

body.antialiased .navbar .btn-default,
body.antialiased .navbar .btn-outline-success {
  background: transparent !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
}

/* ---------- Bandeau de titre (hero) ---------- */
body.antialiased #parallax > div.position-relative {
  background: radial-gradient(circle at 80% 20%, var(--gs-night-accent) 0%, var(--gs-night) 60%, var(--gs-night-deep) 100%) !important;
}
body.antialiased #parallax .mask,
body.antialiased #parallax .parallax-image { display: none !important; }
body.antialiased #parallax .col { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; margin-top: 0 !important; margin-bottom: 0 !important; }
body.antialiased #parallax h1,
body.antialiased #parallax .h1 { color: #ffffff !important; font-weight: 800 !important; font-size: clamp(1.8rem, 3.5vw, 2.8rem); }
body.antialiased #parallax .lead { color: #cbd5e1 !important; }

/* ---------- Cartes et outils ---------- */
body.antialiased .card {
  background: #ffffff !important;
  border: 1px solid var(--gs-border) !important;
  border-radius: var(--gs-radius) !important;
  box-shadow: var(--gs-shadow) !important;
  color: var(--gs-text) !important;
}

body.antialiased .card-header { background: transparent !important; border-bottom: 1px solid var(--gs-border) !important; }
body.antialiased .card-header h1, body.antialiased .card-header h2, body.antialiased .card-header h3,
body.antialiased .card-header h4, body.antialiased .card-header h5, body.antialiased .card-header h6 { color: var(--gs-night) !important; }

body.antialiased .item-box,
body.antialiased .card .card {
  background: #ffffff !important;
  border: 1px solid var(--gs-border) !important;
  border-radius: var(--gs-radius) !important;
  box-shadow: none !important;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

body.antialiased a:hover .item-box,
body.antialiased .item-box:hover,
body.antialiased a:hover > .card {
  transform: translateY(-3px);
  border-color: rgba(230, 0, 103, 0.35) !important;
  box-shadow: 0 12px 24px rgba(32, 17, 74, 0.1) !important;
}

body.antialiased .item-box,
body.antialiased .item-box * { color: var(--gs-night) !important; }

/* Liste « Outils populaires » */
body.antialiased .list-group-item {
  background: transparent !important;
  border-color: var(--gs-border) !important;
  color: var(--gs-text) !important;
}
body.antialiased .list-group-item:hover { color: var(--gs-pink) !important; }
body.antialiased .list-group-item .fa-check,
body.antialiased .list-group-item i { color: #10b981 !important; }

/* ---------- Formulaires ---------- */
body.antialiased .form-control,
body.antialiased .form-select,
body.antialiased textarea {
  background: #ffffff !important;
  border: 1px solid var(--gs-border) !important;
  color: var(--gs-text) !important;
  border-radius: 8px !important;
}
body.antialiased .form-control:focus,
body.antialiased .form-select:focus,
body.antialiased textarea:focus {
  border-color: var(--gs-pink) !important;
  box-shadow: 0 0 0 3px rgba(230, 0, 103, 0.18) !important;
}
body.antialiased .input-group-text { background: var(--gs-light) !important; border-color: var(--gs-border) !important; color: var(--gs-night) !important; }
body.antialiased label { color: var(--gs-night) !important; font-weight: 600; }

/* Tableaux de résultats */
body.antialiased .table { color: var(--gs-text) !important; }
body.antialiased .table thead th { background: var(--gs-night) !important; color: #ffffff !important; border: 0 !important; }
body.antialiased .table td, body.antialiased .table th { border-color: var(--gs-border) !important; }

/* ---------- Pied de page ---------- */
body.antialiased .footer {
  background: var(--gs-footer) !important;
  color: #cbd5e1 !important;
  margin-top: 3rem !important;
  padding-top: 3rem !important;
}
body.antialiased .footer h1, body.antialiased .footer h2, body.antialiased .footer h3,
body.antialiased .footer h4, body.antialiased .footer h5, body.antialiased .footer h6 { color: #ffffff !important; }
body.antialiased .footer p, body.antialiased .footer li, body.antialiased .footer span,
body.antialiased .footer .text-muted { color: #cbd5e1 !important; }
body.antialiased .footer a:not(.btn) { color: #ffffff !important; }
body.antialiased .footer a:not(.btn):hover { color: var(--gs-pink) !important; }
body.antialiased .footer .card { background: rgba(255, 255, 255, 0.05) !important; border-color: rgba(255, 255, 255, 0.1) !important; box-shadow: none !important; }
body.antialiased .footer .text-primary { color: var(--gs-pink) !important; }
body.antialiased hr.horizontal.dark { background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent) !important; }

/* Bandeau cookies et pagination */
body.antialiased .page-link { color: var(--gs-night) !important; border-color: var(--gs-border) !important; }
body.antialiased .page-item.active .page-link { background: var(--gs-pink) !important; border-color: var(--gs-pink) !important; color: #ffffff !important; }

@media (max-width: 991px) {
  body.antialiased .navbar-collapse { background: var(--gs-night); border-radius: var(--gs-radius); padding: 0.5rem 1rem; margin-top: 0.5rem; }
  .gs-brand-name { font-size: 1.25rem; }
}

/* En-têtes de catégorie d'outils (fond coloré, texte blanc) */
body.antialiased .card-header.bg-gradient-primary,
body.antialiased .card-header.category-box {
  background: var(--gs-night) !important;
  background-image: none !important;
  border-bottom: 0 !important;
  border-radius: var(--gs-radius) var(--gs-radius) 0 0 !important;
}
body.antialiased .card-header.bg-gradient-primary h1, body.antialiased .card-header.bg-gradient-primary h2,
body.antialiased .card-header.bg-gradient-primary h3, body.antialiased .card-header.bg-gradient-primary h4,
body.antialiased .card-header.bg-gradient-primary h5, body.antialiased .card-header.bg-gradient-primary a,
body.antialiased .card-header.bg-gradient-primary p { color: #ffffff !important; }
body.antialiased .card-header.bg-gradient-primary p { color: #cbd5e1 !important; }

/* Emplacements publicitaires du bandeau : pas de grand aplat vide */
body.antialiased #parallax ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important; }
/* Annonces AdSense insérées automatiquement dans le bandeau : fond neutre, pas de dégradé */
body.antialiased #parallax > .google-auto-placed {
  background: var(--gs-bg, #f8fafc) !important;
  background-image: none !important;
  padding: 1rem 0 !important;
}

/* Mobile : boutons de la barre de navigation sur plusieurs lignes, sans débordement horizontal */
@media (max-width: 575.98px) {
  body.antialiased .navbar .navbar-nav.flex-row { flex-wrap: wrap !important; justify-content: center !important; gap: 6px !important; max-width: 100% !important; }
  body.antialiased .navbar .navbar-nav.flex-row .btn { padding: 0.45rem 0.9rem !important; font-size: 0.8rem !important; margin: 0 !important; }
  html, body.antialiased { overflow-x: clip; }
}

/* Pages de connexion / inscription / mot de passe */
body.antialiased .page-header.min-vh-100 { min-height: auto !important; padding: 3rem 0 4rem !important; }
body.antialiased #login-page .card-plain, body.antialiased #register-page .card-plain,
body.antialiased .page-header .card-plain {
  background: #ffffff !important; border: 1px solid var(--gs-border) !important;
  border-radius: var(--gs-radius) !important; box-shadow: var(--gs-shadow) !important; padding: 0.5rem !important;
}
body.antialiased .page-header .card-plain .card-header { background: transparent !important; }
body.antialiased .page-header .card-plain .card-header h4 { color: var(--gs-night) !important; font-family: var(--gs-heading) !important; font-weight: 800 !important; }
body.antialiased .page-header .card-plain .card-header p,
body.antialiased .page-header .card-plain .form-label,
body.antialiased .page-header .card-plain .form-check-label { color: var(--gs-muted) !important; }
body.antialiased .page-header .card-plain a:not(.btn) { color: var(--gs-pink) !important; background: none !important; -webkit-text-fill-color: currentColor !important; }
body.antialiased .page-header .form-control { background: #ffffff !important; color: var(--gs-text) !important; border: 1px solid var(--gs-border) !important; border-radius: 8px !important; }
body.antialiased .page-header .form-control:focus { border-color: var(--gs-pink) !important; box-shadow: 0 0 0 3px rgba(230, 0, 103, 0.15) !important; }
body.antialiased .page-header .form-check-input:checked { background-color: var(--gs-pink) !important; border-color: var(--gs-pink) !important; }
body.antialiased .page-header .auth-background {
  background: radial-gradient(circle at 80% 20%, var(--gs-night-accent) 0%, var(--gs-night) 55%, var(--gs-night-deep) 100%) !important;
  background-image: radial-gradient(circle at 80% 20%, var(--gs-night-accent) 0%, var(--gs-night) 55%, var(--gs-night-deep) 100%) !important;
}
body.antialiased .page-header .auth-background .mask { display: none !important; }
body.antialiased .page-header .auth-background h4 { font-family: var(--gs-heading) !important; font-weight: 800 !important; color: #ffffff !important; }
body.antialiased .page-header .auth-background p { color: #cbd5e1 !important; }
@media (min-width: 992px) {
  /* Panneau d'accueil à côté du formulaire, plus en position absolue */
  body.antialiased .page-header > .container > .row { align-items: stretch !important; justify-content: center !important; }
  body.antialiased .page-header > .container > .row > .position-absolute {
    position: static !important; flex: 0 0 50% !important; max-width: 50% !important; height: auto !important; padding: 0 !important; margin: 0 !important; display: flex !important;
  }
  body.antialiased .page-header > .container > .row > .position-absolute > .auth-background { margin: 0 0 0 1.5rem !important; height: auto !important; flex: 1 1 auto; padding: 3rem !important; }
  body.antialiased .page-header > .container > .row > .col-xl-4 { flex: 0 0 42% !important; max-width: 42% !important; }
}

/* Indicateur de chargement Pace : la roue reste active à cause des annonces, on ne garde que la barre */
body.antialiased .pace .pace-activity { display: none !important; }

@media (max-width: 991.98px) {
  /* Menu ouvert : icône et libellé côte à côte, flèche de langue à droite */
  body.antialiased #navigation .nav-link { justify-content: flex-start !important; gap: 0.5rem; padding: 0.7rem 0.5rem !important; }
  body.antialiased #navigation .nav-link i { width: 1.1rem; text-align: center; margin-right: 0 !important; }
  body.antialiased #navigation .nav-link .arrow { margin-left: auto !important; }
  body.antialiased #navigation .navbar-nav { padding: 0.5rem 0 !important; }
  body.antialiased #navigation .nav-item { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
}
@media (max-width: 575.98px) {
  /* En-tête compact : recherche + 3 boutons sur une seule ligne */
  body.antialiased .navbar .navbar-nav.flex-row { flex-wrap: nowrap !important; gap: 4px !important; justify-content: space-between !important; width: 100%; }
  body.antialiased .navbar .navbar-nav.flex-row .btn { padding: 0.45rem 0.6rem !important; font-size: 0.72rem !important; line-height: 1.1 !important; white-space: nowrap !important; min-height: 36px; display: inline-flex !important; align-items: center; }
  body.antialiased .navbar .navbar-nav.flex-row .btn-icon-only { width: 36px !important; height: 36px !important; padding: 0 !important; justify-content: center; }
  body.antialiased .navbar .navbar-nav.flex-row .nav-item { margin: 0 !important; }
}
/* Cibles tactiles : listes d'outils populaires et liens « Lire la suite » */
@media (max-width: 991.98px) {
  body.antialiased .list-group-item a.d-block, body.antialiased a.text-body.d-block.text-nowrap { padding-top: 0.55rem !important; padding-bottom: 0.55rem !important; }
  body.antialiased a.icon-move-right { display: inline-block; padding: 0.5rem 0 !important; }
}
body.antialiased .navbar .btn-toggle-mode,
body.antialiased .navbar .navbar-nav.flex-row .btn-toggle-mode { display: none !important; }
/* Liens « Lire la suite » et textes info du thème : rose de la charte au lieu du cyan */
body.antialiased a.text-info, body.antialiased .text-info:not(.badge) { color: var(--gs-pink) !important; }
body.antialiased a.text-info:hover { color: var(--gs-pink-hover) !important; }
@media (max-width: 359.98px) {
  /* Très petits écrans (320 px) : les boutons passent sur deux lignes */
  body.antialiased .navbar .navbar-nav.flex-row { flex-wrap: wrap !important; justify-content: center !important; }
}