/* ================================================================
   STYLE.CSS — SecureIT Conseil
   ================================================================

   TABLE DES MATIÈRES :
   1.  Variables de couleurs & polices  ← MODIFIE ICI pour changer les couleurs
   2.  Reset & base
   3.  Navigation
   4.  Système de pages
   5.  Barre latérale (sidebar)
   6.  Héros (en-têtes de page)
   7.  Sections de contenu
   8.  Cartes de services
   9.  Grille de tarifs
   10. Étapes de processus
   11. FAQ
   12. Alertes / encadrés
   13. Boutons
   14. Page d'accueil
   15. Page de contact
   16. Pied de page (footer)
   17. Responsive (mobile)

================================================================ */


/* ================================================================
   1. VARIABLES — COULEURS & POLICES
   Modifie ces valeurs pour changer l'apparence globale du site
================================================================ */
:root {
  /* Couleurs principales */
  --navy:   #0b1f3a;   /* Bleu foncé — fond nav, héros PME        */
  --blue:   #1a5fb4;   /* Bleu moyen — hover boutons               */
  --blue2:  #3584e4;   /* Bleu vif — accents, boutons PME          */
  --cyan2:  #38bdf8;   /* Cyan clair — textes em, badges nav       */

  /* Couleur section travailleur autonome */
  --green:  #059669;   /* Vert — accents TA                        */
  --green2: #34d399;   /* Vert clair — textes em TA                */

  /* Couleur section résidentielle */
  --indigo:    #8B5F82;  /* Indigo — accents Résidentiel             */
  --indigo2:   #818cf8;  /* Indigo clair — textes em Résidentiel     */
  --indigo-bg: #eef2ff; /* Fond clair résidentiel                  */
  --indigo-border: #a5b4fc; /* Bordure résidentielle               */

  /* Couleurs neutres */
  --cream:  #f4f7fb;   /* Fond général de la page                  */
  --cream2: #e2e8f0;   /* Bordures, fonds de champs                */
  --white:  #ffffff;   /* Fond des cartes                          */
  --text:   #0f172a;   /* Texte principal                          */
  --muted:  #475569;   /* Texte secondaire, descriptions           */

  /* Rayon des coins arrondis */
  --r: 10px;

  /* Polices — modifie ici si tu veux changer la typographie */
  --font-main:    'DM Sans', sans-serif;
  --font-heading: 'Syne', sans-serif;
}


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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-main);
  background: var(--cream);
  color: var(--text);
  font-size: 15px;
  line-height: 1.65;
}

a {
  color: inherit;
  text-decoration: none;
}


/* ================================================================
   3. NAVIGATION
================================================================ */
nav {
  background: var(--navy);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;
  height: 60px;
  position: sticky;
  top: 0;
  z-index: 200;
}

/* Logo */
.logo {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.1rem;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.logo em {
  color: var(--cyan2);
  font-style: normal;
}

/* Petite icône carrée dans le logo */
.logo-icon {
  width: 28px;
  height: 28px;
}

/* ================================================================
   LOGO IMAGE — styles pour ton image de logo
   ➤ Change height si l'image est trop grande ou trop petite
   ➤ Le filtre "brightness invert" rend l'image blanche sur fond bleu foncé.
     Si ton logo est déjà blanc ou en couleur et que tu veux le garder
     tel quel, supprime la ligne "filter: brightness(0) invert(1);"
================================================================ */

/* Logo dans la barre de navigation */
.logo-img {
  height: 44px;                    /* ← Change cette valeur pour ajuster la taille */
  width: auto;                     /* La largeur s'adapte automatiquement */
  max-width: 200px;                /* Empêche le logo d'être trop large */
  object-fit: contain;             /* Garde les proportions de l'image */
  display: block;
  /* filter: brightness(0) invert(1); */ /* Désactivé — affiche le logo en couleurs originales */
}

/* Logo dans le footer */
.logo-img-footer {
  height: 32px;                    /* ← Un peu plus petit que dans la nav */
  width: auto;
  max-width: 180px;
  object-fit: contain;
  display: inline-block;
  opacity: 0.8;
  /* filter: brightness(0) invert(1); */ /* Désactivé — affiche le logo en couleurs originales */
  margin-bottom: 0.4rem;
}

/* Texte de remplacement si l'image est introuvable */
.footer-name-fallback {
  display: none; /* caché par défaut, affiché par onerror= dans le HTML */
  color: var(--cyan2);
  font-family: var(--font-heading);
  font-weight: 700;
}

/* Texte copyright sous le logo footer */
.footer-copy {
  display: block;
  font-size: 12px;
  color: rgba(255,255,255,0.35);
  margin-top: 0.3rem;
}

/* ← FIN DU BLOC LOGO IMAGE */

/* Icône carrée de remplacement (emoji) — visible seulement si pas d'image */
.logo-icon {
  width: 28px;
  height: 28px;
  background: var(--blue2);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

/* Liens de navigation */
.nav-links {
  display: flex;
  gap: 2px;
  list-style: none;
  align-items: center;
}

.nav-links a {
  color: rgba(255, 255, 255, 0.65);
  font-size: 13px;
  padding: 0.35rem 0.8rem;
  border-radius: 6px;
  transition: all 0.15s;
  cursor: pointer;
  display: block;
}

.nav-links a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.nav-links a.active {
  color: var(--cyan2);
  font-weight: 500;
}

/* Séparateur vertical dans la nav */
.nav-sep {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.15);
  margin: 0 0.25rem;
}

/* Bouton CTA dans la nav (Consultation gratuite) */
.nav-cta {
  background: var(--blue2) !important;
  color: #fff !important;
  font-weight: 500 !important;
}

.nav-cta:hover {
  background: var(--blue) !important;
}

/* Bouton hamburger mobile */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
}

.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: all 0.2s;
}


/* ================================================================
   4. SYSTÈME DE PAGES
   Chaque "page" est un div qui s'affiche/cache avec JavaScript
================================================================ */
.page {
  display: none;
}

.page.active {
  display: block;
}

/* Mise en page avec sidebar à gauche */
.page-inner {
  display: flex;
  min-height: calc(100vh - 60px);
}

/* Zone de contenu principal (à droite de la sidebar) */
.main-content {
  flex: 1;
  min-width: 0;
}


/* ================================================================
   5. BARRE LATÉRALE (SIDEBAR)
   Les ancres de navigation à gauche sur les pages PME et TA
================================================================ */
.sidebar {
  width: 210px;
  flex-shrink: 0;
  background: var(--white);
  border-right: 1px solid var(--cream2);
  position: sticky;
  top: 60px;
  height: calc(100vh - 60px);
  overflow-y: auto;
  padding: 1.25rem 0;
}

/* Étiquette de section dans la sidebar */
.sb-label {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 0 1.1rem;
  margin: 1rem 0 0.4rem;
}

.sb-label:first-child {
  margin-top: 0;
}

/* Couleurs des étiquettes selon la section */
.sb-label.blue  { color: var(--blue2); }
.sb-label.green { color: var(--green); }

/* Lien d'ancre dans la sidebar */
.al {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.42rem 1.1rem;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s;
  border-left: 2.5px solid transparent;
  user-select: none;
}

.al:hover {
  color: var(--navy);
  background: var(--cream);
  border-left-color: var(--cream2);
}

/* Lien actif — section PME (bleu) */
.al.active-b {
  color: var(--navy);
  font-weight: 500;
  background: rgba(26, 95, 180, 0.07);
  border-left-color: var(--blue2);
}

/* Lien actif — section TA (vert) */
.al.active-g {
  color: var(--navy);
  font-weight: 500;
  background: rgba(5, 150, 105, 0.07);
  border-left-color: var(--green);
}

/* Icône dans le lien de sidebar */
.al-icon {
  font-size: 13px;
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}

/* Ligne de séparation dans la sidebar */
.sb-div {
  height: 1px;
  background: var(--cream2);
  margin: 0.65rem 1.1rem;
}


/* ================================================================
   6. HÉROS (EN-TÊTES DE PAGE)
================================================================ */
.page-hero {
  color: #fff;
  padding: 3rem 2.25rem 2.5rem;
  position: relative;
  overflow: hidden;
}

/* Effet de halo décoratif en arrière-plan */
.page-hero::after {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 70%);
  pointer-events: none;
}

/* Couleur de fond selon la section */
.ph-blue  { background: var(--navy); }
.ph-green { background: linear-gradient(135deg, #064e3b 0%, #065f46 100%); }

/* Petit badge en haut du héros */
.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 0.28rem 0.8rem;
  border-radius: 20px;
  margin-bottom: 1rem;
}

.ht-blue  { background: rgba(53, 132, 228, 0.2); color: var(--cyan2); }
.ht-green { background: rgba(52, 211, 153, 0.15); color: var(--green2); }

/* Titre du héros */
.page-hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 0.6rem;
}

/* Mots en couleur dans les titres */
.em-blue  { color: var(--cyan2);  font-style: normal; }
.em-green { color: var(--green2); font-style: normal; }

/* Sous-titre du héros */
.page-hero p {
  color: rgba(255, 255, 255, 0.6);
  max-width: 480px;
  font-size: 14px;
  margin-bottom: 1.25rem;
}

/* Badges de mots-clés sous le sous-titre */
.hero-badges {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.hb {
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.75);
  font-size: 11.5px;
  padding: 0.25rem 0.7rem;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}


/* ================================================================
   7. SECTIONS DE CONTENU
================================================================ */
/* Conteneur d'une section */
.cs {
  padding: 2.5rem 2.25rem;
  border-bottom: 1px solid var(--cream2);
}

.cs:last-of-type {
  border-bottom: none;
}

/* Petite étiquette de section (ex: "Ce que nous faisons") */
.sl {
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.sl.blue  { color: var(--blue2); }
.sl.green { color: var(--green); }

/* Titre de section */
.st {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.35rem;
}

/* Sous-titre de section */
.ss {
  color: var(--muted);
  font-size: 13.5px;
  margin-bottom: 1.5rem;
  max-width: 500px;
}

/* Bouton "Retour en haut" en bas de chaque section */
.back-top {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.5rem;
  padding: 0.38rem 0.85rem;
  font-size: 12px;
  color: var(--muted);
  border: 1px solid var(--cream2);
  border-radius: 6px;
  cursor: pointer;
  background: var(--cream);
  transition: all 0.15s;
  user-select: none;
}

.back-top:hover        { border-color: var(--blue2); color: var(--navy); }
.back-top.green:hover  { border-color: var(--green); color: var(--navy); }


/* ================================================================
   8. CARTES DE SERVICES
================================================================ */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

.card {
  background: var(--white);
  border-radius: var(--r);
  padding: 1.2rem;
  transition: transform 0.15s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.card:hover {
  transform: translateY(-2px);
}

/* Bordure colorée en haut de la carte selon la section */
.bt-blue  { border-top: 3px solid var(--blue2); }
.bt-green { border-top: 3px solid var(--green); }

/* Emoji/icône de la carte */
.card-icon {
  font-size: 22px;
  margin-bottom: 0.65rem;
}

/* Titre de la carte */
.card h3 {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.25rem;
}

/* Description de la carte */
.card p {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
}

/* Badge de catégorie en bas de la carte */
.ctag {
  display: inline-block;
  margin-top: 0.6rem;
  font-size: 10.5px;
  padding: 0.15rem 0.55rem;
  border-radius: 20px;
  font-weight: 500;
}

/* Couleurs des badges de catégorie */
.t-sec    { background: rgba(14, 165, 233, 0.1);  color: #0369a1; }
.t-m365   { background: rgba(26, 95, 180, 0.1);   color: var(--blue); }
.t-audit  { background: rgba(234, 179, 8, 0.12);  color: #854d0e; }
.t-simple { background: rgba(5, 150, 105, 0.1);   color: var(--green); }


/* ================================================================
   9. GRILLE DE TARIFS
================================================================ */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  justify-content: center;
  justify-items: center;
  max-width: 1050px;
  margin-left: auto;
  margin-right: auto;
}

.pricing-grid .pc {
  width: 100%;
  max-width: 340px;
}

/* Carte de tarif */
.pc {
  background: var(--white);
  border-radius: var(--r);
  padding: 1.5rem;
  border: 1.5px solid var(--cream2);
  position: relative;
  transition: border-color 0.15s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Hover sur les cartes de tarif */
.pc.hb-blue:hover  { border-color: var(--blue2); }
.pc.hb-green:hover { border-color: var(--green); }

/* Carte de tarif mise en évidence (recommandée) — PME */
.pc.feat-blue {
  background: var(--navy);
  border-color: var(--navy);
}

/* Carte de tarif mise en évidence — TA */
.pc.feat-green {
  background: #064e3b;
  border-color: #064e3b;
}

/* Ajustements texte sur fond foncé */
.pc.feat-blue .pn,
.pc.feat-green .pn  { color: var(--cyan2); }
.pc.feat-blue .pp,
.pc.feat-green .pp  { color: #fff; }
.pc.feat-blue .per,
.pc.feat-green .per { color: rgba(255, 255, 255, 0.65); }
.pc.feat-blue .fi,
.pc.feat-green .fi  { color: rgba(255, 255, 255, 0.65); }

/* Badge "Recommandé" / "Le plus populaire" */
.pop-b, .pop-g {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 20px;
  white-space: nowrap;
  color: #fff;
}
.pop-b { background: var(--blue2); }
.pop-g { background: var(--green); }

/* Nom du forfait */
.pn {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.4rem;
}

/* Prix */
.pp {
  font-family: var(--font-heading);
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.15rem;
}

/* Prix en texte (sur mesure, devis) */
.pp.pp-sm {
  font-size: 1.2rem;
  margin-top: 0.4rem;
}

/* Unité après le prix (/mois, /projet) */
.pp-unit {
  font-size: 0.82rem;
  font-weight: 400;
}

/* Période / description courte */
.per {
  font-size: 11.5px;
  color: var(--muted);
  margin-bottom: 0.9rem;
}

/* Liste des inclusions */
.feat-list {
  list-style: none;
  margin-bottom: 1.25rem;
}

/* Item de la liste avec coche */
.fi {
  font-size: 12.5px;
  color: var(--muted);
  padding: 0.22rem 0 0.22rem 1.1rem;
  position: relative;
}

.fi-b::before { content: '✓'; position: absolute; left: 0; color: var(--blue2); font-weight: 600; }
.fi-g::before { content: '✓'; position: absolute; left: 0; color: var(--green); font-weight: 600; }


/* ================================================================
   10. ÉTAPES DE PROCESSUS
================================================================ */
.step {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: var(--white);
  padding: 1.2rem;
  border-radius: var(--r);
  margin-bottom: 0.7rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

/* Numéro de l'étape */
.sn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
  color: #fff;
}

.sn-blue  { background: var(--blue2); }
.sn-green { background: var(--green); }

/* Titre de l'étape */
.step h4 {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.15rem;
}

/* Description de l'étape */
.step p {
  font-size: 12.5px;
  color: var(--muted);
}


/* ================================================================
   11. FAQ (questions / réponses)
================================================================ */
.faq-item {
  background: var(--white);
  border-radius: var(--r);
  margin-bottom: 0.5rem;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

/* Question */
.fq {
  padding: 1rem 1.2rem;
  font-weight: 500;
  font-size: 13.5px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--navy);
  gap: 0.5rem;
}

.fq:hover {
  background: var(--cream);
}

/* Flèche d'ouverture */
.fa-arr {
  transition: transform 0.2s;
  font-size: 11px;
  flex-shrink: 0;
}
.fa-arr.blue  { color: var(--blue2); }
.fa-arr.green { color: var(--green); }

/* Réponse (cachée par défaut) */
.fa {
  padding: 0 1.2rem 1rem;
  font-size: 13px;
  color: var(--muted);
  display: none;
  line-height: 1.65;
}

/* Quand la FAQ est ouverte */
.faq-item.open .fa     { display: block; }
.faq-item.open .fa-arr { transform: rotate(180deg); }


/* ================================================================
   12. ALERTES / ENCADRÉS
================================================================ */
.alert {
  border-radius: var(--r);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  font-size: 13px;
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.alert-blue {
  background: rgba(14, 165, 233, 0.07);
  border: 1px solid rgba(14, 165, 233, 0.22);
  color: #0369a1;
}

.alert-green {
  background: rgba(5, 150, 105, 0.07);
  border: 1px solid rgba(5, 150, 105, 0.22);
  color: #065f46;
}

.alert-icon {
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}


/* ================================================================
   13. BOUTONS
================================================================ */
.btn {
  display: block;
  width: 100%;
  padding: 0.6rem;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: all 0.15s;
  text-align: center;
  font-family: var(--font-main);
}

/* Bouton bleu plein */
.btn-blue  { background: var(--blue2); color: #fff; }
.btn-blue:hover { background: var(--blue); }

/* Bouton vert plein */
.btn-green  { background: var(--green); color: #fff; }
.btn-green:hover { background: #047857; }

/* Bouton contour foncé */
.btn-outline-dark {
  background: transparent;
  color: var(--navy);
  border: 1.5px solid var(--navy);
}
.btn-outline-dark:hover { background: var(--navy); color: #fff; }

/* Boutons hors grille de tarifs */
.hbtn {
  padding: 0.7rem 1.5rem;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: all 0.15s;
  font-family: var(--font-main);
}
.hbtn-blue  { background: var(--blue2); color: #fff; }
.hbtn-green { background: rgba(5, 150, 105, 0.9); color: #fff; }


/* ================================================================
   14. PAGE D'ACCUEIL
================================================================ */

/* Héros de la page d'accueil */
.home-hero {
  background: var(--navy);
  color: #fff;
  padding: 4rem 2.5rem 3.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Halo décoratif */
.home-hero::before {
  content: '';
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(53, 132, 228, 0.13) 0%, transparent 65%);
  pointer-events: none;
}

/* Badge au-dessus du titre */
.home-hero .tag {
  display: inline-block;
  background: rgba(53, 132, 228, 0.18);
  color: var(--cyan2);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 0.3rem 0.9rem;
  border-radius: 20px;
  margin-bottom: 1.25rem;
  position: relative;
}

/* Titre principal de l'accueil */
.home-hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 0.8rem;
  position: relative;
}

.home-hero h1 em {
  color: var(--cyan2);
  font-style: normal;
}

/* Sous-titre de l'accueil */
.home-hero p {
  color: rgba(255, 255, 255, 0.6);
  max-width: 440px;
  margin: 0 auto 2rem;
  font-size: 15px;
  position: relative;
}

/* Conteneur des boutons d'accueil */
.hbtns {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
}

/* Barre de statistiques */
.trust-bar {
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  padding: 1.5rem 2rem;
  background: rgba(0, 0, 0, 0.15);
  background: var(--navy);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  flex-wrap: wrap;
}

.trust-num {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--cyan2);
  text-align: center;
}

.trust-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
  text-align: center;
  margin-top: 0.1rem;
}

/* Cartes d'aiguillage PME / TA */
.audience-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  padding: 2.5rem;
  max-width: 760px;
  margin: 0 auto;
}

.ac-card {
  background: var(--white);
  border-radius: 14px;
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.2s;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.ac-card.hov-blue:hover  { border-color: var(--blue2); transform: translateY(-3px); }
.ac-card.hov-green:hover { border-color: var(--green); transform: translateY(-3px); }
.ac-card.hov-indigo:hover { border-color: #8B5F82; transform: translateY(-3px); }

/* Grand emoji en haut de la carte */
.ac-em {
  font-size: 2.5rem;
  margin-bottom: 0.8rem;
}

.ac-card h2 {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.4rem;
}

.ac-card p {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 1.1rem;
}

/* Bouton dans la carte */
.ac-btn {
  display: inline-block;
  padding: 0.5rem 1.2rem;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.btn-navy  { background: var(--navy); color: #fff; }
.btn-green { background: var(--green); color: #fff; }
.btn-indigo-home { background: #8B5F82; color: #fff; }

/* Sous-texte de la carte */
.ac-sub {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 0.5rem;
}


/* ================================================================
   15. PAGE DE CONTACT
   Affiche uniquement les informations de contact (pas de formulaire)
================================================================ */

/* Héros de la page contact */
.contact-hero {
  background: var(--navy);
  color: #fff;
  padding: 3rem 2.25rem 2.5rem;
}

.contact-hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.5rem;
}

.contact-hero p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  max-width: 420px;
}

/* Corps de la page contact */
.contact-page-body {
  padding: 2.5rem;
  max-width: 900px;
}

/* Texte d'introduction */
.contact-intro {
  margin-bottom: 2rem;
}

.contact-intro p {
  font-size: 15px;
  color: var(--muted);
  max-width: 600px;
}

/* Grille des cartes de coordonnées */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
  margin-bottom: 2.5rem;
}

/* Carte individuelle de coordonnée */
.contact-card {
  background: var(--white);
  border-radius: var(--r);
  padding: 1.5rem;
  border-left: 4px solid var(--blue2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: transform 0.15s;
}

.contact-card:hover {
  transform: translateY(-2px);
}

/* Grande icône de la carte */
.contact-card-icon {
  font-size: 1.8rem;
  margin-bottom: 0.75rem;
}

/* Étiquette (ex: Téléphone, Courriel) */
.contact-card-label {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue2);
  font-weight: 600;
  margin-bottom: 0.3rem;
}

/* VALEUR PRINCIPALE (ton numéro, courriel, etc.) */
.contact-value {
  font-size: 15px;
  font-weight: 500;
  color: var(--navy);
  margin-bottom: 0.25rem;
}

.contact-value a {
  color: var(--blue2);
  text-decoration: underline;
  text-decoration-color: rgba(53, 132, 228, 0.3);
}

.contact-value a:hover {
  color: var(--blue);
}

/* Note secondaire sous la valeur */
.contact-note {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

/* Section "Ce à quoi vous pouvez vous attendre" */
.process-section {
  background: var(--white);
  border-radius: var(--r);
  padding: 2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.process-section h3 {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--navy);
  margin-bottom: 1.5rem;
}

/* Étapes du processus en ligne */
.process-steps {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.process-step {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
  min-width: 140px;
}

/* Numéro de l'étape */
.ps-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  flex-shrink: 0;
}
.ps-blue { background: var(--blue2); }

/* Texte de l'étape */
.ps-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.ps-text strong {
  font-size: 13px;
  color: var(--navy);
}

.ps-text span {
  font-size: 11.5px;
  color: var(--muted);
}

/* Flèche entre les étapes */
.process-arrow {
  color: var(--cream2);
  font-size: 1.2rem;
  flex-shrink: 0;
}


/* ================================================================
   16. PIED DE PAGE (FOOTER)
================================================================ */
footer {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.45);
  text-align: center;
  padding: 2rem;
  font-size: 12.5px;
}

/* Nom de l'entreprise dans le footer */
footer span {
  color: var(--cyan2);
}


/* ================================================================
   17. RESPONSIVE — MOBILE (max 768px)
================================================================ */
@media (max-width: 768px) {

  nav {
    padding: 0 1.25rem;
  }

  /* Cache les liens et les affiche quand le menu est ouvert */
  .nav-links {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    background: var(--navy);
    padding: 1rem;
    gap: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 199;
  }

  .nav-links.open {
    display: flex;
  }

  .nav-links a {
    padding: 0.6rem 1rem;
  }

  .nav-sep {
    display: none;
  }

  /* Affiche le bouton hamburger */
  .nav-hamburger {
    display: flex;
  }

  /* Cache la sidebar sur mobile */
  .sidebar {
    display: none;
  }

  .page-inner {
    flex-direction: column;
  }

  .cs {
    padding: 2rem 1.25rem;
  }

  .page-hero {
    padding: 2rem 1.25rem;
  }

  .home-hero {
    padding: 3rem 1.25rem 2.5rem;
  }

  .audience-cards {
    grid-template-columns: 1fr;
    padding: 1.5rem 1.25rem;
  }

  .contact-page-body {
    padding: 1.5rem 1.25rem;
  }

  .trust-bar {
    gap: 1.5rem;
  }

  .process-steps {
    flex-direction: column;
    align-items: flex-start;
  }

  .process-arrow {
    transform: rotate(90deg);
    align-self: flex-start;
    margin-left: 1rem;
  }

  .pricing-grid {
    grid-template-columns: 1fr;
  }

  .cards-grid {
    grid-template-columns: 1fr;
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }

  .problems-inner, .why-inner {
    flex-direction: column;
  }

  .why-sep {
    display: none;
  }
}

/* ================================================================
   SECTION PROBLÈMES FRÉQUENTS & SOLUTIONS
================================================================ */
.home-problems-section {
  background: var(--white);
  padding: 3.5rem 2rem;
}

.problems-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  gap: 3rem;
  align-items: flex-start;
}

.problems-col {
  flex: 1;
}

.section-tag {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.3rem 0.9rem;
  border-radius: 99px;
  margin-bottom: 1rem;
}

.tag-red   { background: #fee2e2; color: #b91c1c; }
.tag-green { background: #d1fae5; color: #065f46; }
.tag-blue  { background: #dbeafe; color: #1e40af; }
.tag-cyan  { background: #e0f2fe; color: #0369a1; }

.problems-col h2 {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  margin-bottom: 0.75rem;
  color: var(--navy);
}

.problems-col p {
  color: var(--muted);
  margin-bottom: 1rem;
}

.prob-list, .sol-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}

.prob-list li, .sol-list li {
  padding: 0.6rem 1rem;
  border-radius: var(--r);
  font-size: 0.95rem;
}

.prob-list li {
  background: #fff5f5;
  border-left: 3px solid #f87171;
  color: var(--text);
}

.sol-list li {
  background: #f0fdf4;
  border-left: 3px solid #34d399;
  color: var(--text);
}

.prob-results {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.prob-badge {
  padding: 0.35rem 0.85rem;
  border-radius: 99px;
  font-size: 0.82rem;
  font-weight: 600;
}

.prob-badge.bad {
  background: #fee2e2;
  color: #b91c1c;
}

/* ================================================================
   SECTION POURQUOI NOUS CHOISIR & EXPERTISE
================================================================ */
.home-why-section {
  background: var(--navy);
  padding: 3.5rem 2rem;
}

.why-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  gap: 3rem;
  align-items: flex-start;
}

.why-block {
  flex: 1;
}

.why-sep {
  width: 1px;
  background: rgba(255,255,255,0.12);
  align-self: stretch;
}

.why-block h2 {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  color: #fff;
  margin-bottom: 1rem;
}

.why-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.why-list li {
  color: #cbd5e1;
  padding: 0.6rem 1rem;
  border-radius: var(--r);
  background: rgba(255,255,255,0.05);
  border-left: 3px solid var(--cyan2);
  font-size: 0.95rem;
}

.cert-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.cert-badge {
  background: rgba(255,255,255,0.08);
  color: var(--cyan2);
  border: 1px solid rgba(56,189,248,0.25);
  padding: 0.3rem 0.75rem;
  border-radius: 99px;
  font-size: 0.8rem;
  font-weight: 500;
}

.ai-note {
  background: rgba(56,189,248,0.1);
  border-left: 3px solid var(--cyan2);
  color: #e2e8f0;
  padding: 0.85rem 1rem;
  border-radius: var(--r);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* ============================================================
   SECTION RÉSIDENTIELLE — couleurs indigo
============================================================ */
.sb-label.indigo { color: var(--indigo); }

.al.active-i { border-left-color: var(--indigo); color: var(--indigo); background: var(--indigo-bg); }

.ph-indigo {
  background: linear-gradient(135deg, #3730a3 0%, #4f46e5 100%);
  border-bottom: 3px solid var(--indigo);
}

.ht-indigo {
  background: var(--indigo-bg);
  color: var(--indigo);
  border: 1px solid var(--indigo-border);
}

.em-indigo { color: var(--indigo); font-style: normal; }

.sl.indigo  { color: var(--indigo); }

.bt-indigo  { border-top: 3px solid var(--indigo); }

.btn-indigo {
  background: var(--indigo);
  color: #fff;
  border: none;
}
.btn-indigo:hover { background: #4338ca; }

.back-top.indigo:hover { border-color: var(--indigo); color: var(--navy); }

/* Sidebar active state indigo */
#sb-residentiel .al.active-g {
  border-left-color: var(--indigo);
  color: var(--indigo);
  background: var(--indigo-bg);
}
#sb-residentiel .al:hover {
  border-left-color: var(--indigo);
  color: var(--indigo);
}
#sb-residentiel .sb-label {
  color: var(--indigo) !important;
}

/* Hero résidentiel */
#page-residentiel .page-hero {
  background: linear-gradient(135deg, #3730a3 0%, #4f46e5 100%);
  border-bottom: 3px solid var(--indigo);
}
#page-residentiel .page-hero h1 em {
  color: var(--indigo);
}
#page-residentiel .hero-tag {
  background: var(--indigo-bg);
  color: var(--indigo);
  border: 1px solid var(--indigo-border);
}

/* Cards résidentielles */
#page-residentiel .card {
  border-top: 3px solid var(--indigo);
}
#page-residentiel .card .ctag {
  background: var(--indigo-bg);
  color: var(--indigo);
}

/* Pricing card featured - résidentiel */
#page-residentiel .pc.feat-indigo {
  border: 2px solid var(--indigo);
}
#page-residentiel .pc.feat-indigo .pop-i {
  background: var(--indigo);
  color: #fff;
}

/* Boutons résidentiels dans pricing */
#page-residentiel .btn-indigo-full {
  background: var(--indigo);
  color: #fff;
  border: none;
  width: 100%;
  padding: 0.7rem;
  border-radius: 8px;
  font-size: 0.95rem;
  cursor: pointer;
  font-weight: 600;
}
#page-residentiel .btn-indigo-full:hover { background: #4338ca; }