/* ============================================================
   STUDIO WEB — style.css
   ============================================================
   1.  Variables & reset
   2.  Typographie globale & layout
   3.  Container
   4.  Header & navigation desktop
   5.  Menu mobile
   6.  Boutons
   7.  Composants communs
   8.  Section Hero
   9.  Section Problème
   10. Section Solution
   11. Section Services
   12. Section Processus
   13. Section Contact & formulaire
   14. Page Offres — Introduction
   15. Page Offres — Cartes d'offres
   16. Page Offres — Fonctionnalités complémentaires
   17. Page Offres — CTA bas
   18. Footer
   19. Responsive — max 767px (mobile uniquement)
   20. Responsive — 768px (tablette)
   21. Responsive — 1024px (desktop)
   ============================================================ */


/* ============================================================
   1. VARIABLES & RESET
   ============================================================ */

:root {
  /* Couleurs de fond */
  --blanc:      #ffffff;
  --stone-50:   #fafaf9;
  --stone-100:  #f5f5f4;

  /* Bordures */
  --stone-200:  #e7e5e4;
  --stone-300:  #d6d3d1;

  /* Textes */
  --stone-400:  #a8a29e;
  --stone-500:  #78716c;
  --stone-600:  #57534e;
  --stone-700:  #44403c;
  --stone-900:  #1c1917;

  /* Bleu principal */
  --bleu:       #2563eb;
  --bleu-hover: #1d4ed8;
  --bleu-clair: #eff6ff;

  /* Vert — Site Présence */
  --vert:       #059669;
  --vert-hover: #047857;
  --vert-clair: #d1fae5;

  /* Violet — Site Business */
  --violet:       #7c3aed;
  --violet-hover: #6d28d9;
  --violet-clair: #ede9fe;

  /* Accents problèmes */
  --rouge:       #dc2626;
  --rouge-clair: #fee2e2;
  --orange:       #ea580c;
  --orange-clair: #ffedd5;
  --ambre:       #d97706;
  --ambre-clair: #fef3c7;

  /* Rayons */
  --rayon:    12px;
  --rayon-sm:  8px;
  --rayon-pill: 999px;

  /* Ombres */
  --ombre:    0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
  --ombre-md: 0 4px 8px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.05);
  --ombre-lg: 0 10px 20px rgba(0,0,0,.09), 0 4px 8px rgba(0,0,0,.05);

  /* Mise en page */
  --hauteur-header: 68px;
  --container-max:  1120px;
  --padding-section: 56px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none;
}

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

img,
svg {
  display: block;
  max-width: 100%;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font: inherit;
}

input,
select,
textarea {
  font: inherit;
}


/* ============================================================
   2. TYPOGRAPHIE GLOBALE & LAYOUT
   ============================================================ */

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color: var(--stone-900);
  background: var(--blanc);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1 {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--stone-900);
  letter-spacing: -0.01em;
}

h2 {
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--stone-900);
  letter-spacing: -0.005em;
}

h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--stone-900);
}

p {
  color: var(--stone-600);
  line-height: 1.75;
}

/* Scroll-margin pour les sections avec ancre
   (évite que le header sticky masque le début de section) */
section[id] {
  scroll-margin-top: calc(var(--hauteur-header) + 20px);
}


/* ============================================================
   3. CONTAINER
   ============================================================ */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: 20px;
}


/* ============================================================
   4. HEADER & NAVIGATION DESKTOP
   ============================================================ */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--blanc);
  border-bottom: 1px solid var(--stone-200);
}

.header-inner {
  display: flex;
  align-items: center;
  height: var(--hauteur-header);
  gap: 24px;
}

.logo {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--stone-900);
  white-space: nowrap;
  flex-shrink: 0;
}

.nav-desktop {
  display: none; /* masqué sur mobile — affiché en desktop via media query */
  align-items: center;
  gap: 28px;
  margin-left: auto;
}

.nav-lien {
  font-size: 0.9375rem;
  color: var(--stone-600);
  transition: color 0.2s;
}

.nav-lien:hover {
  color: var(--stone-900);
}

.nav-cta {
  display: none !important; /* !important requis : .btn défini plus bas aurait priorité sinon */
  flex-shrink: 0;
}


/* ============================================================
   5. MENU MOBILE
   ============================================================ */

/* Bouton hamburger — visible sur mobile uniquement */
.btn-hamburger {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  padding: 8px;
  border-radius: var(--rayon-sm);
  color: var(--stone-700);
  transition: background-color 0.2s;
}

.btn-hamburger:hover {
  background: var(--stone-100);
}

/* L'icône croix est masquée par défaut */
.icone-close {
  display: none;
}

/* Quand le menu est ouvert (classe .actif ajoutée par script.js) */
.btn-hamburger.actif .icone-menu {
  display: none;
}

.btn-hamburger.actif .icone-close {
  display: block;
}

/* Menu mobile — masqué par défaut */
.nav-mobile {
  display: none;
  flex-direction: column;

  /* Panneau flottant aligné à droite sous le header */
  position: absolute;
  top: calc(100% + 4px);
  right: 16px;
  width: 272px;
  max-width: calc(100vw - 32px);

  padding: 8px 16px 20px;
  gap: 0;
  background: var(--blanc);
  border: 1px solid var(--stone-200);
  border-radius: var(--rayon);
  box-shadow: 0 8px 24px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.08);
}

/* Quand le menu est ouvert (classe .ouvert ajoutée par script.js) */
.nav-mobile.ouvert {
  display: flex;
}

.nav-mobile-lien {
  display: block;
  padding: 12px 4px;
  font-size: 1rem;
  color: var(--stone-700);
  border-bottom: 1px solid var(--stone-100);
  transition: color 0.2s;
}

.nav-mobile-lien:last-of-type {
  border-bottom: none;
}

.nav-mobile-lien:hover {
  color: var(--stone-900);
}

.nav-mobile-cta {
  margin-top: 14px;
  text-align: center;
  justify-content: center;
}


/* ============================================================
   6. BOUTONS
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: var(--rayon-sm);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
  cursor: pointer;
  white-space: nowrap;
}

/* Bouton plein-largeur (formulaire, offres) */
.btn-plein {
  width: 100%;
  justify-content: center;
}

/* Bleu */
.btn-bleu {
  background: var(--bleu);
  color: var(--blanc);
  border: 2px solid var(--bleu);
}
.btn-bleu:hover {
  background: var(--bleu-hover);
  border-color: var(--bleu-hover);
}

/* Blanc avec bordure grise (hero) */
.btn-blanc {
  background: var(--blanc);
  color: var(--stone-900);
  border: 1px solid var(--stone-300);
}
.btn-blanc:hover {
  background: var(--stone-50);
}

/* Vert — Site Présence */
.btn-vert {
  background: var(--vert);
  color: var(--blanc);
  border: 2px solid var(--vert);
}
.btn-vert:hover {
  background: var(--vert-hover);
  border-color: var(--vert-hover);
}

/* Violet — Site Business */
.btn-violet {
  background: var(--violet);
  color: var(--blanc);
  border: 2px solid var(--violet);
}
.btn-violet:hover {
  background: var(--violet-hover);
  border-color: var(--violet-hover);
}

/* Blanc sur fond sombre — Sur mesure */
.btn-blanc-sombre {
  background: var(--blanc);
  color: var(--stone-900);
  border: 2px solid var(--blanc);
}
.btn-blanc-sombre:hover {
  background: var(--stone-100);
}

/* CTA blanc avec texte bleu (section CTA bas de offres.html) */
.btn-cta-blanc {
  background: var(--blanc);
  color: var(--bleu);
  border: 2px solid var(--blanc);
  padding: 12px 24px;
}
.btn-cta-blanc:hover {
  background: var(--bleu-clair);
}

/* CTA contour blanc sur fond bleu */
.btn-cta-contour {
  background: transparent;
  color: var(--blanc);
  border: 2px solid var(--blanc);
  padding: 12px 24px;
}
.btn-cta-contour:hover {
  background: rgba(255, 255, 255, 0.12);
}


/* ============================================================
   7. COMPOSANTS COMMUNS
   ============================================================ */

/* En-tête de section (titre + sous-titre centrés) */
.section-entete {
  text-align: center;
  margin-bottom: 48px;
}

.section-sous-titre {
  margin-top: 12px;
  font-size: 1rem;
  color: var(--stone-600);
}

/* Grille 3 colonnes (sections Problème et Services) */
.grille-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

/* Carte générique */
.carte {
  background: var(--blanc);
  border: 1px solid var(--stone-200);
  border-radius: var(--rayon);
  padding: 24px;
  box-shadow: var(--ombre);
  transition: box-shadow 0.25s;
}

.carte:hover {
  box-shadow: var(--ombre-lg);
}

/* Icône ronde dans une carte */
.carte-icone {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  flex-shrink: 0;
}

/* Couleurs d'icônes */
.icone-rouge      { background: var(--rouge-clair);  color: var(--rouge);  }
.icone-orange     { background: var(--orange-clair); color: var(--orange); }
.icone-ambre      { background: var(--ambre-clair);  color: var(--ambre);  }
.icone-bleu       { background: var(--bleu-clair);   color: var(--bleu);   }
.icone-vert       { background: var(--vert-clair);   color: var(--vert);   }
.icone-violet     { background: var(--violet-clair); color: var(--violet); }
.icone-bleu-clair { background: var(--bleu-clair);   color: var(--bleu);   }
.icone-mesure     { background: rgba(255,255,255,.12); color: var(--blanc); }

/* Placeholder image */
.img-placeholder {
  background: var(--stone-100);
  border-radius: var(--rayon);
  min-height: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--stone-500);
  font-size: 0.875rem;
  text-align: center;
  padding: 32px;
}

.placeholder-icone {
  color: var(--stone-300);
  width: 52px;
  height: 52px;
}

/* Vraie image (remplace les placeholders) */
.img-reelle {
  width: 100%;
  height: auto;
  border-radius: var(--rayon);
  object-fit: cover;
}

/* Texte en bleu (section solution) */
.texte-bleu {
  color: var(--bleu);
}


/* ============================================================
   8. SECTION HERO
   ============================================================ */

.section-hero {
  padding: var(--padding-section) 0;
  background: var(--blanc);
}

.hero-grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

.hero-texte h1 {
  margin-bottom: 20px;
}

.hero-sous-titre {
  font-size: 1rem;
  color: var(--stone-600);
  margin-bottom: 32px;
  line-height: 1.75;
  max-width: 520px;
}

.hero-boutons {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hero-image .img-placeholder {
  min-height: 300px;
}


/* ============================================================
   9. SECTION PROBLÈME
   ============================================================ */

.section-probleme {
  padding: var(--padding-section) 0;
  background: var(--stone-50);
}

.carte h3 {
  margin-bottom: 10px;
}


/* ============================================================
   10. SECTION SOLUTION
   ============================================================ */

.section-solution {
  padding: var(--padding-section) 0;
  background: var(--blanc);
}

.solution-grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

.solution-image .img-placeholder {
  min-height: 320px;
}

.solution-texte h2 {
  margin-bottom: 16px;
}

.solution-sous-titre {
  margin-bottom: 28px;
}

.solution-liste {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.solution-liste li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.9375rem;
  color: var(--stone-700);
  line-height: 1.5;
}

.icone-check {
  flex-shrink: 0;
  color: var(--bleu);
  margin-top: 1px;
}


/* ============================================================
   11. SECTION SERVICES
   ============================================================ */

.section-services {
  padding: var(--padding-section) 0;
  background: var(--stone-50);
}

.carte-service h3 {
  margin: 12px 0 8px;
}

.carte-service p {
  font-size: 0.9rem;
  color: var(--stone-600);
}


/* ============================================================
   12. SECTION PROCESSUS
   ============================================================ */

.section-processus {
  padding: var(--padding-section) 0;
  background: var(--blanc);
}

.processus-liste {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.processus-etape {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.processus-numero {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 50%;
  background: var(--bleu);
  color: var(--blanc);
  font-size: 1.125rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.processus-contenu h3 {
  margin-bottom: 6px;
  font-size: 1rem;
}

.processus-contenu p {
  font-size: 0.9rem;
  color: var(--stone-600);
}


/* ============================================================
   13. SECTION CONTACT & FORMULAIRE
   ============================================================ */

.section-contact {
  padding: var(--padding-section) 0;
  background: var(--stone-50);
}

.contact-carte {
  max-width: 580px;
  margin-inline: auto;
  background: var(--blanc);
  border: 1px solid var(--stone-200);
  border-radius: var(--rayon);
  padding: 32px 24px;
  box-shadow: var(--ombre-md);
}

.formulaire {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.champ {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.champ label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--stone-700);
}

.champ input,
.champ select,
.champ textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--stone-300);
  border-radius: var(--rayon-sm);
  font-size: 0.9375rem;
  color: var(--stone-900);
  background: var(--blanc);
  transition: border-color 0.2s, box-shadow 0.2s;
  appearance: auto;
}

.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  outline: none;
  border-color: var(--bleu);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.champ input::placeholder,
.champ textarea::placeholder {
  color: var(--stone-400);
}

.champ textarea {
  resize: none;
  line-height: 1.6;
}

/* Message de retour formulaire */
.formulaire-message {
  padding: 12px 16px;
  border-radius: var(--rayon-sm);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.5;
}

.formulaire-message.info {
  background: var(--bleu-clair);
  color: var(--bleu);
  border: 1px solid #bfdbfe;
}

.formulaire-message.succes {
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid #bbf7d0;
}

.formulaire-message.erreur {
  background: #fef2f2;
  color: var(--rouge);
  border: 1px solid #fecaca;
}


/* ============================================================
   14. PAGE OFFRES — INTRODUCTION
   ============================================================ */

.section-offres-intro {
  padding: 64px 0 52px;
  background: var(--blanc);
  text-align: center;
}

.section-offres-intro h1 {
  margin-bottom: 12px;
}

.offres-note {
  max-width: 600px;
  margin: 16px auto 0;
  font-size: 0.875rem;
  color: var(--stone-500);
  line-height: 1.65;
}


/* ============================================================
   15. PAGE OFFRES — CARTES D'OFFRES
   ============================================================ */

.section-cartes-offres {
  padding: 40px 0 80px;
  background: var(--stone-50);
}

.grille-offres {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

/* Carte d'offre — base */
.carte-offre {
  background: var(--blanc);
  border: 1px solid var(--stone-200);
  border-radius: var(--rayon);
  padding: 32px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: border-color 0.25s, box-shadow 0.25s;
}

/* Variante Site Présence — hover vert */
.carte-offre--presence:hover {
  border-color: var(--vert);
  box-shadow: var(--ombre-md);
}

/* Variante Site Contact — bordure bleue permanente */
.carte-offre--contact {
  border: 2px solid var(--bleu);
}
.carte-offre--contact:hover {
  box-shadow: var(--ombre-lg);
}

/* Variante Site Business — hover violet */
.carte-offre--business:hover {
  border-color: var(--violet);
  box-shadow: var(--ombre-md);
}

/* Variante Sur mesure — fond sombre */
.carte-offre--mesure {
  background: var(--stone-900);
  border-color: var(--stone-900);
  color: var(--blanc);
}
.carte-offre--mesure:hover {
  box-shadow: var(--ombre-lg);
}

/* Badge "Populaire" */
.offre-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bleu);
  color: var(--blanc);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 4px 14px;
  border-radius: var(--rayon-pill);
  white-space: nowrap;
}

/* Icône d'offre */
.offre-icone {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  flex-shrink: 0;
}

/* Nom de l'offre */
.offre-nom {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--stone-900);
  margin-bottom: 10px;
}
.carte-offre--mesure .offre-nom {
  color: var(--blanc);
}

/* Label "À partir de" / "Tarif" */
.offre-tarif-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone-500);
  margin-bottom: 4px;
}
.carte-offre--mesure .offre-tarif-label {
  color: rgba(255, 255, 255, 0.55);
}

/* Prix */
.offre-prix {
  font-size: 2rem;
  font-weight: 700;
  color: var(--stone-900);
  line-height: 1.1;
  margin-bottom: 12px;
}
.carte-offre--mesure .offre-prix {
  color: var(--blanc);
}

/* Description courte en italique */
.offre-description {
  font-size: 0.875rem;
  font-style: italic;
  margin-bottom: 10px;
  line-height: 1.5;
}
.carte-offre--presence .offre-description { color: var(--vert);   }
.carte-offre--contact  .offre-description { color: var(--bleu);   }
.carte-offre--business .offre-description { color: var(--violet); }
.carte-offre--mesure   .offre-description { color: rgba(255,255,255,.65); }

/* Accroche */
.offre-accroche {
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: 20px;
  line-height: 1.45;
}
.offre-accroche--vert   { color: var(--vert);   }
.offre-accroche--bleu   { color: var(--bleu);   }
.offre-accroche--violet { color: var(--violet); }
.offre-accroche--mesure { color: var(--blanc);  }

/* Liste de fonctionnalités */
.offre-liste {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
  flex-grow: 1; /* pousse le bouton vers le bas */
}

.offre-liste li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--stone-700);
  line-height: 1.5;
}

.offre-liste li svg {
  flex-shrink: 0;
  margin-top: 2px;
}

/* Couleur des coches selon offre */
.offre-liste--vert   li svg { color: var(--vert);   }
.offre-liste--bleu   li svg { color: var(--bleu);   }
.offre-liste--violet li svg { color: var(--violet); }
.offre-liste--mesure li     { color: rgba(255,255,255,.82); }
.offre-liste--mesure li svg { color: rgba(255,255,255,.6); }


/* ============================================================
   16. PAGE OFFRES — FONCTIONNALITÉS COMPLÉMENTAIRES
   ============================================================ */

.section-fonctionnalites {
  padding: var(--padding-section) 0;
  background: var(--blanc);
}

.badges-liste {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.badge-fonctionnalite {
  display: inline-block;
  padding: 7px 16px;
  background: var(--stone-100);
  color: var(--stone-700);
  border: 1px solid var(--stone-200);
  border-radius: var(--rayon-pill);
  font-size: 0.875rem;
  cursor: default;
  user-select: none;
}


/* ============================================================
   17. PAGE OFFRES — CTA BAS
   ============================================================ */

.section-cta-offres {
  padding: var(--padding-section) 0;
  background: var(--bleu);
  text-align: center;
}

.section-cta-offres h2 {
  color: var(--blanc);
  margin-bottom: 12px;
}

.cta-sous-titre {
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 0;
}

/* Annule le margin-bottom de .section-entete dans ce contexte */
.section-cta-offres .section-entete {
  margin-bottom: 0;
}

.cta-boutons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 32px;
}


/* ============================================================
   18. FOOTER
   ============================================================ */

.footer {
  background: var(--stone-900);
  padding-top: 48px;
}

.footer-inner {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-bottom: 40px;
}

.footer-logo {
  color: var(--blanc);
  font-size: 1.125rem;
  font-weight: 700;
}

.footer-tagline {
  margin-top: 6px;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.55);
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
}

.footer-nav a {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.65);
  transition: color 0.2s;
}

.footer-nav a:hover {
  color: var(--blanc);
}

.footer-bas {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 20px 0;
}

.footer-bas p {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
}


/* ============================================================
   19. RESPONSIVE — max 767px (mobile uniquement)
   ============================================================ */

@media (max-width: 767px) {

  /* --- Placeholders images --- */
  .img-placeholder {
    min-height: 240px;
  }

  .hero-image .img-placeholder {
    min-height: 220px;
  }

  .solution-image .img-placeholder {
    min-height: 220px;
  }

  /* --- Hero — fond dégradé subtil mobile --- */
  .section-hero {
    background: linear-gradient(160deg, #eff6ff 0%, #ffffff 55%);
  }

  /* --- Hero --- */
  .hero-grille {
    gap: 28px;
  }

  .hero-texte h1 {
    margin-bottom: 16px;
  }

  .hero-sous-titre {
    margin-bottom: 24px;
  }

  /* --- Section Solution --- */
  .solution-grille {
    gap: 28px;
  }

  .solution-sous-titre {
    margin-bottom: 20px;
  }

  /* --- En-têtes de section --- */
  .section-entete {
    margin-bottom: 32px;
  }

  /* --- Cartes génériques (Services, Problème) --- */
  .carte {
    padding: 20px;
  }

  .grille-3 {
    gap: 14px;
  }

  /* --- Processus --- */
  .processus-liste {
    gap: 18px;
  }

  /* --- Cartes d'offres --- */
  .carte-offre {
    padding: 24px;
  }

  .grille-offres {
    gap: 16px;
  }

  /* --- Page offres : intro et grille --- */
  .section-offres-intro {
    padding: 48px 0 36px;
  }

  .section-cartes-offres {
    padding: 32px 0 56px;
  }

  /* --- Boutons CTA pleine largeur sur mobile --- */
  .cta-boutons {
    align-items: stretch;
  }

}


/* ============================================================
   20. RESPONSIVE — 768px (tablette)
   ============================================================ */

@media (min-width: 768px) {

  /* Typographie */
  h1 { font-size: 2.375rem; }
  h2 { font-size: 1.75rem; }

  /* Espacements sections — restaure la valeur tablette */
  :root {
    --padding-section: 72px;
  }

  /* Container */
  .container {
    padding-inline: 32px;
  }

  /* Hero — boutons côte à côte */
  .hero-boutons {
    flex-direction: row;
    flex-wrap: wrap;
  }

  /* Grille 3 colonnes → 2 colonnes en tablette */
  .grille-3 {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  /* Cartes d'offres → 2 colonnes */
  .grille-offres {
    grid-template-columns: repeat(2, 1fr);
  }

  /* CTA — boutons côte à côte */
  .cta-boutons {
    flex-direction: row;
    justify-content: center;
  }

  /* Contact carte — padding agrandi */
  .contact-carte {
    padding: 40px;
  }

  /* Footer */
  .footer-inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }
}


/* ============================================================
   21. RESPONSIVE — 1024px (desktop)
   ============================================================ */

@media (min-width: 1024px) {

  /* Typographie */
  h1 { font-size: 2.625rem; }
  h2 { font-size: 1.875rem; }

  /* Container */
  .container {
    padding-inline: 40px;
  }

  /* Header — affiche navigation desktop, masque hamburger */
  .nav-desktop {
    display: flex;
  }

  .nav-cta {
    display: inline-flex !important;
  }

  .btn-hamburger {
    display: none;
  }

  /* Sécurité : le menu mobile ne s'affiche jamais en desktop */
  .nav-mobile {
    display: none !important;
  }

  /* Hero — 2 colonnes */
  .hero-grille {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 72px;
  }

  .hero-image .img-placeholder {
    min-height: 420px;
  }

  .hero-sous-titre {
    font-size: 1.0625rem;
  }

  /* Grille 3 colonnes → 3 colonnes en desktop */
  .grille-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Solution — 2 colonnes */
  .solution-grille {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 72px;
  }

  .solution-image .img-placeholder {
    min-height: 400px;
  }

  /* Processus — horizontal */
  .processus-liste {
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
  }

  .processus-etape {
    flex: 1;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .processus-numero {
    margin-bottom: 16px;
  }

  /* Espacement sections */
  .section-hero,
  .section-probleme,
  .section-solution,
  .section-services,
  .section-processus,
  .section-contact,
  .section-fonctionnalites,
  .section-cta-offres {
    --padding-section: 96px;
  }
}