/* ============================================================
   BE SEEN — Feuille de styles principale
   Social Media Manager freelance
   ============================================================ */

/* ----------------------------------------------------------
   1. VARIABLES CSS (couleurs, typographies, espacements)
   ---------------------------------------------------------- */
:root {
  /* Palette de marque */
  --violet: #623CEA;          /* Violet dominant */
  --creme: #FCFBF1;           /* Fond crème */
  --violet-fonce: #311E75;    /* Violet foncé (titres) */
  --rose-lavande: #EFBDEB;    /* Rose lavande (accents) */
  --violet-bouton: #452AA4;   /* Violet boutons */
  --violet-annotation: #9177F0; /* Violet annotations */

  /* Couleurs de texte */
  --texte: #1f1536;           /* Texte principal sur fond clair */
  --texte-clair: #FCFBF1;     /* Texte sur fond sombre (crème, jamais blanc pur) */
  --texte-attenue: #5a5170;   /* Texte secondaire */

  /* Surfaces */
  --blanc-casse: #ffffff;
  --bordure: #e6e2d4;

  /* Typographies */
  --police-titre: 'Lora', serif;
  --police-corps: 'Source Sans Pro', sans-serif;

  /* Mise en page */
  --largeur-max: 1200px;
  --rayon: 16px;
  --rayon-petit: 10px;
  --ombre: 0 10px 40px rgba(49, 30, 117, 0.08);
  --ombre-forte: 0 20px 60px rgba(49, 30, 117, 0.15);
  --transition: 0.25s ease;
  --hauteur-header: 76px;
}

/* ----------------------------------------------------------
   2. RÉINITIALISATION ET BASE
   ---------------------------------------------------------- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hauteur-header) + 20px);
}

body {
  font-family: var(--police-corps);
  color: var(--texte);
  background-color: var(--creme);
  line-height: 1.65;
  font-size: 17px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--police-titre); /* Lora */
  color: var(--violet-fonce);
  line-height: 1.2;
  font-weight: 600;
}

a {
  color: var(--violet);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover {
  color: var(--violet-bouton);
}

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

ul {
  list-style: none;
}

/* ----------------------------------------------------------
   3. UTILITAIRES DE MISE EN PAGE
   ---------------------------------------------------------- */
.conteneur {
  width: 100%;
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: 90px 0;
}

.section--creme-sombre {
  background-color: #f5f2e4;
}

.section--violet {
  background-color: var(--violet-fonce);
  color: var(--texte-clair);
}

.section--violet h1,
.section--violet h2,
.section--violet h3 {
  color: var(--texte-clair);
}

.section-entete {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
}

.section-entete .surtitre {
  display: inline-block;
  font-family: var(--police-corps);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--violet);
  margin-bottom: 14px;
}

.section-entete h2 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin-bottom: 16px;
}

.section-entete p {
  color: var(--texte-attenue);
  font-size: 1.08rem;
}

.section--violet .section-entete .surtitre {
  color: var(--rose-lavande);
}

.section--violet .section-entete p {
  color: var(--rose-lavande);
}

/* ----------------------------------------------------------
   4. BOUTONS
   ---------------------------------------------------------- */
/* Boutons « pilule » arrondis avec ombre douce (cf. identité visuelle BE SEEN) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--police-corps);
  font-weight: 600;
  font-size: 1rem;
  padding: 15px 34px;
  border-radius: 100px;             /* pilule entièrement arrondie */
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--transition);
  text-align: center;
  line-height: 1.2;
}

.btn--primaire {
  background-color: var(--violet-bouton);
  color: var(--texte-clair);
  box-shadow: 0 10px 24px rgba(69, 42, 164, 0.28); /* ombre douce violette */
}

.btn--primaire:hover {
  background-color: var(--violet);
  color: var(--texte-clair);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(69, 42, 164, 0.36);
}

.btn--secondaire {
  background-color: transparent;
  color: var(--violet-bouton);
  border-color: var(--violet-bouton);
}

.btn--secondaire:hover {
  background-color: var(--violet-bouton);
  color: var(--texte-clair);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(69, 42, 164, 0.24);
}

/* Variante des boutons sur fond sombre */
.section--violet .btn--secondaire {
  color: var(--texte-clair);
  border-color: var(--rose-lavande);
}

.section--violet .btn--secondaire:hover {
  background-color: var(--rose-lavande);
  color: var(--violet-fonce);
}

.btn--clair {
  background-color: var(--creme);
  color: var(--violet-fonce);
  box-shadow: 0 10px 24px rgba(17, 10, 45, 0.22);
}

.btn--clair:hover {
  background-color: var(--rose-lavande);
  color: var(--violet-fonce);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(17, 10, 45, 0.28);
}

/* ----------------------------------------------------------
   5. EN-TÊTE / NAVIGATION
   ---------------------------------------------------------- */
.entete {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--hauteur-header);
  background-color: rgba(252, 251, 241, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 1000;
  transition: box-shadow var(--transition), background-color var(--transition);
  border-bottom: 1px solid transparent;
}

/* Ombre ajoutée au scroll via JS (classe .entete--scroll) */
.entete--scroll {
  box-shadow: var(--ombre);
  border-bottom-color: var(--bordure);
}

.entete__contenu {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  font-family: var(--police-corps);
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: 0.08em;
  color: var(--violet-fonce);
  display: flex;
  align-items: center;
  gap: 2px;
}

.logo:hover {
  color: var(--violet);
}

.logo span {
  color: var(--violet);
}

.nav {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav__liste {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav__lien {
  font-family: var(--police-corps);
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--texte);
  position: relative;
  padding: 4px 0;
}

.nav__lien::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--violet);
  transition: width var(--transition);
}

.nav__lien:hover::after,
.nav__lien.actif::after {
  width: 100%;
}

.nav__lien.actif {
  color: var(--violet);
}

/* Bouton hamburger (mobile) */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 20px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 1100;
}

.hamburger span {
  display: block;
  width: 100%;
  height: 2.5px;
  background-color: var(--violet-fonce);
  border-radius: 3px;
  transition: all var(--transition);
}

.hamburger.actif span:nth-child(1) {
  transform: translateY(8.5px) rotate(45deg);
}

.hamburger.actif span:nth-child(2) {
  opacity: 0;
}

.hamburger.actif span:nth-child(3) {
  transform: translateY(-8.5px) rotate(-45deg);
}

/* ----------------------------------------------------------
   6. HERO
   ---------------------------------------------------------- */
.hero {
  padding: calc(var(--hauteur-header) + 80px) 0 100px;
  background:
    radial-gradient(circle at 15% 20%, rgba(239, 189, 235, 0.35), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(145, 119, 240, 0.25), transparent 50%),
    var(--creme);
}

.hero__contenu {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}

.hero .surtitre {
  display: inline-block;
  font-family: var(--police-corps);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--violet);
  background-color: rgba(98, 60, 234, 0.08);
  padding: 8px 18px;
  border-radius: 100px;
  margin-bottom: 26px;
}

.hero h1 {
  font-size: clamp(2rem, 5.5vw, 3.6rem);
  font-weight: 800;
  margin-bottom: 24px;
  letter-spacing: -0.01em;
}

.hero h1 em {
  font-style: normal;
  color: var(--violet);
  position: relative;
}

.hero__baseline {
  font-size: clamp(1.05rem, 2.5vw, 1.35rem);
  color: var(--texte-attenue);
  max-width: 680px;
  margin: 0 auto 38px;
  line-height: 1.55;
}

.hero__ctas {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Hero plus compact pour les pages intérieures */
.hero--page {
  padding: calc(var(--hauteur-header) + 60px) 0 70px;
  text-align: center;
}

.hero--page h1 {
  font-size: clamp(1.9rem, 4.5vw, 3rem);
}

/* ----------------------------------------------------------
   7. CARTES GÉNÉRIQUES
   ---------------------------------------------------------- */
.grille {
  display: grid;
  gap: 28px;
}

.grille--3 {
  grid-template-columns: repeat(3, 1fr);
}

.grille--2 {
  grid-template-columns: repeat(2, 1fr);
}

.grille--4 {
  grid-template-columns: repeat(4, 1fr);
}

.carte {
  background-color: var(--blanc-casse);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 34px 30px;
  transition: transform var(--transition), box-shadow var(--transition);
  height: 100%;
}

.carte:hover {
  transform: translateY(-6px);
  box-shadow: var(--ombre);
}

.carte__icone {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background-color: rgba(98, 60, 234, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  font-size: 1.5rem;
}

.carte h3 {
  font-size: 1.3rem;
  margin-bottom: 12px;
}

.carte p {
  color: var(--texte-attenue);
  font-size: 1rem;
}

/* Carte mise en avant (solution) */
.carte--accent {
  background-color: var(--violet-fonce);
  border-color: var(--violet-fonce);
}

.carte--accent h3 {
  color: var(--texte-clair);
}

.carte--accent p {
  color: var(--rose-lavande);
}

.carte--accent .carte__icone {
  background-color: rgba(239, 189, 235, 0.2);
}

/* ----------------------------------------------------------
   8. CARTES DE FORMULES (tarifs)
   ---------------------------------------------------------- */
.grille-formules {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-items: stretch;
}

.formule {
  background-color: var(--blanc-casse);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 38px 32px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform var(--transition), box-shadow var(--transition);
}

.formule:hover {
  transform: translateY(-6px);
  box-shadow: var(--ombre);
}

.formule--populaire {
  border: 2px solid var(--violet);
  box-shadow: var(--ombre);
}

.formule__badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--violet);
  color: var(--texte-clair);
  font-family: var(--police-corps);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  padding: 6px 20px;
  border-radius: 100px;
  text-transform: uppercase;
  white-space: nowrap;
}

.formule__nom {
  font-size: 1.5rem;
  margin-bottom: 8px;
}

.formule__prix {
  font-family: var(--police-corps);
  font-weight: 800;
  font-size: 2.4rem;
  color: var(--violet);
  margin: 10px 0 2px;
}

.formule__prix small {
  font-size: 1rem;
  font-weight: 500;
  color: var(--texte-attenue);
}

.formule__prefixe {
  display: block;
  font-family: var(--police-titre); /* Lora */
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--violet-fonce);
  letter-spacing: 0.04em;
}

.formule__tagline {
  font-family: var(--police-corps);
  font-style: italic;
  font-size: 1rem;
  color: var(--violet);
  margin-top: 4px;
}

.formule__engagement {
  font-size: 0.9rem;
  color: var(--texte-attenue);
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--bordure);
}

.formule__liste {
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin-bottom: 30px;
  flex-grow: 1;
}

.formule__liste li {
  position: relative;
  padding-left: 30px;
  font-size: 0.98rem;
  color: var(--texte);
}

.formule__liste li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--violet);
  font-weight: 700;
}

.formule .btn {
  width: 100%;
}

/* ----------------------------------------------------------
   9. ÉTAPES (approche)
   ---------------------------------------------------------- */
.etape {
  position: relative;
  padding-top: 20px;
}

.etape__numero {
  font-family: var(--police-corps);
  font-weight: 800;
  font-size: 3rem;
  color: var(--rose-lavande);
  line-height: 1;
  margin-bottom: 14px;
}

.etape h3 {
  font-size: 1.35rem;
  margin-bottom: 12px;
}

.etape p {
  color: var(--texte-attenue);
}

/* ----------------------------------------------------------
   10. TÉMOIGNAGES
   ---------------------------------------------------------- */
.temoignage {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}

.temoignage__citation {
  font-family: var(--police-titre); /* Lora */
  font-weight: 500;
  font-style: italic;
  font-size: clamp(1.3rem, 3vw, 1.75rem);
  line-height: 1.5;
  color: var(--texte-clair);
  margin-bottom: 30px;
}

.temoignage__citation::before {
  content: '“';
  display: block;
  font-size: 4rem;
  color: var(--rose-lavande);
  line-height: 0.5;
  margin-bottom: 20px;
}

.temoignage__auteur {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.temoignage__auteur-infos {
  text-align: left;
}

.temoignage__auteur-nom {
  font-family: var(--police-corps);
  font-weight: 600;
  color: var(--texte-clair);
}

.temoignage__auteur-poste {
  font-size: 0.9rem;
  color: var(--rose-lavande);
}

/* ----------------------------------------------------------
   11. IMAGES PLACEHOLDER
   ---------------------------------------------------------- */
.placeholder-img {
  background:
    repeating-linear-gradient(
      45deg,
      rgba(145, 119, 240, 0.08),
      rgba(145, 119, 240, 0.08) 12px,
      rgba(239, 189, 235, 0.15) 12px,
      rgba(239, 189, 235, 0.15) 24px
    ),
    var(--rose-lavande);
  border: 1.5px dashed var(--violet-annotation);
  border-radius: var(--rayon);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--violet-fonce);
  font-family: var(--police-corps);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 20px;
  min-height: 220px;
  width: 100%;
}

.placeholder-img span {
  opacity: 0.85;
  word-break: break-word;
}

.placeholder-img--ronde {
  border-radius: 50%;
  aspect-ratio: 1;
  min-height: auto;
  width: 220px;
  max-width: 100%;
}

.placeholder-img--portrait {
  aspect-ratio: 4 / 5;
  min-height: auto;
}

/* ----------------------------------------------------------
   12. CTA (appel à l'action)
   ---------------------------------------------------------- */
.cta-bloc {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}

.cta-bloc h2 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin-bottom: 18px;
}

.cta-bloc p {
  font-size: 1.1rem;
  color: var(--rose-lavande);
  margin-bottom: 34px;
}

.cta-bloc .hero__ctas {
  margin-top: 0;
}

/* ----------------------------------------------------------
   13. PORTFOLIO / ÉTUDES DE CAS
   ---------------------------------------------------------- */
.cas {
  background-color: var(--blanc-casse);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.cas:hover {
  transform: translateY(-6px);
  box-shadow: var(--ombre);
}

.cas .placeholder-img {
  border: none;
  border-radius: 0;
  min-height: 200px;
}

.cas__corps {
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.cas__secteur {
  font-family: var(--police-corps);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--violet);
  margin-bottom: 10px;
}

.cas h3 {
  font-size: 1.3rem;
  margin-bottom: 12px;
}

.cas p {
  color: var(--texte-attenue);
  font-size: 0.98rem;
  margin-bottom: 18px;
  flex-grow: 1;
}

.cas__resultats {
  display: flex;
  gap: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--bordure);
}

.cas__resultat-chiffre {
  font-family: var(--police-corps);
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--violet);
  line-height: 1;
}

.cas__resultat-label {
  font-size: 0.8rem;
  color: var(--texte-attenue);
}

/* Métadonnée et liste de mission dans une étude de cas */
.cas__meta {
  font-weight: 600;
  color: var(--violet-fonce) !important;
  font-size: 0.92rem !important;
  margin-bottom: 14px !important;
  flex-grow: 0 !important;
}

.cas__mission {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding-top: 16px;
  border-top: 1px solid var(--bordure);
}

.cas__mission li {
  position: relative;
  padding-left: 26px;
  font-size: 0.93rem;
  color: var(--texte-attenue);
}

.cas__mission li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--violet);
  font-weight: 700;
}

/* ----------------------------------------------------------
   14. FAQ (accordéon)
   ---------------------------------------------------------- */
.faq {
  max-width: 820px;
  margin: 0 auto;
}

.faq__item {
  background-color: var(--blanc-casse);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-petit);
  margin-bottom: 14px;
  overflow: hidden;
}

.faq__question {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  padding: 22px 24px;
  font-family: var(--police-corps);
  font-weight: 600;
  font-size: 1.08rem;
  color: var(--violet-fonce);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.faq__question:hover {
  color: var(--violet);
}

.faq__icone {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  position: relative;
  transition: transform var(--transition);
}

.faq__icone::before,
.faq__icone::after {
  content: '';
  position: absolute;
  background-color: var(--violet);
  border-radius: 2px;
}

.faq__icone::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: 2.5px;
  transform: translateY(-50%);
}

.faq__icone::after {
  top: 0;
  left: 50%;
  width: 2.5px;
  height: 100%;
  transform: translateX(-50%);
  transition: opacity var(--transition);
}

.faq__item.ouvert .faq__icone::after {
  opacity: 0;
}

.faq__reponse {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition);
}

.faq__reponse p {
  padding: 0 24px 24px;
  color: var(--texte-attenue);
}

/* ----------------------------------------------------------
   15. VALEURS (à propos)
   ---------------------------------------------------------- */
.valeur {
  text-align: center;
  padding: 10px;
}

.valeur__icone {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background-color: rgba(98, 60, 234, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  font-size: 1.6rem;
}

.valeur h3 {
  font-size: 1.2rem;
  margin-bottom: 10px;
}

.valeur p {
  color: var(--texte-attenue);
  font-size: 0.98rem;
}

/* ----------------------------------------------------------
   16. BIO (à propos)
   ---------------------------------------------------------- */
.bio {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 56px;
  align-items: center;
}

.bio__texte h2 {
  font-size: clamp(1.7rem, 3.5vw, 2.3rem);
  margin-bottom: 20px;
}

.bio__texte p {
  color: var(--texte-attenue);
  margin-bottom: 16px;
}

.bio__liste {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 4px 0 18px;
}

.bio__liste li {
  position: relative;
  padding-left: 28px;
  color: var(--texte-attenue);
}

.bio__liste li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--violet);
  font-weight: 700;
}

.bio__signature {
  font-family: var(--police-corps);
  font-weight: 700;
  color: var(--violet);
  margin-top: 8px;
}

/* ----------------------------------------------------------
   17. PAGE CONTACT
   ---------------------------------------------------------- */
.contact-grille {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 48px;
  align-items: start;
}

.contact-infos h2 {
  font-size: 1.6rem;
  margin-bottom: 20px;
}

.contact-infos__item {
  display: flex;
  gap: 14px;
  margin-bottom: 22px;
  align-items: flex-start;
}

.contact-infos__icone {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background-color: rgba(98, 60, 234, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.contact-infos__item strong {
  display: block;
  font-family: var(--police-corps);
  color: var(--violet-fonce);
  margin-bottom: 2px;
}

.contact-infos__item a,
.contact-infos__item span {
  color: var(--texte-attenue);
}

.contact-infos__item a:hover {
  color: var(--violet);
}

.reseaux {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

.reseaux a {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background-color: var(--violet-fonce);
  color: var(--texte-clair);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--police-corps);
  font-weight: 600;
  font-size: 0.85rem;
  transition: background-color var(--transition), transform var(--transition);
}

.reseaux a:hover {
  background-color: var(--violet);
  color: var(--texte-clair);
  transform: translateY(-3px);
}

.calendly-bloc {
  background-color: rgba(98, 60, 234, 0.06);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 26px;
  margin-top: 30px;
}

.calendly-bloc h3 {
  font-size: 1.15rem;
  margin-bottom: 8px;
}

.calendly-bloc p {
  color: var(--texte-attenue);
  font-size: 0.95rem;
  margin-bottom: 18px;
}

/* Formulaire */
.formulaire {
  background-color: var(--blanc-casse);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 36px;
}

.champ {
  margin-bottom: 22px;
}

.champ label {
  display: block;
  font-family: var(--police-corps);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--violet-fonce);
  margin-bottom: 8px;
}

.champ label .requis {
  color: var(--violet);
}

.champ input,
.champ select,
.champ textarea {
  width: 100%;
  font-family: var(--police-corps);
  font-size: 1rem;
  color: var(--texte);
  padding: 13px 16px;
  border: 1.5px solid var(--bordure);
  border-radius: var(--rayon-petit);
  background-color: var(--creme);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  outline: none;
  border-color: var(--violet);
  box-shadow: 0 0 0 3px rgba(98, 60, 234, 0.12);
}

.champ textarea {
  resize: vertical;
  min-height: 130px;
}

.champ input.erreur,
.champ select.erreur,
.champ textarea.erreur {
  border-color: #d64545;
}

.champ__erreur {
  display: none;
  color: #d64545;
  font-size: 0.85rem;
  margin-top: 6px;
}

.champ__erreur.visible {
  display: block;
}

.message-succes {
  display: none;
  background-color: rgba(98, 60, 234, 0.08);
  border: 1.5px solid var(--violet);
  border-radius: var(--rayon-petit);
  padding: 20px 24px;
  color: var(--violet-fonce);
  font-family: var(--police-corps);
  font-weight: 600;
  margin-bottom: 24px;
  text-align: center;
}

.message-succes.visible {
  display: block;
  animation: fadeIn 0.4s ease;
}

.message-erreur {
  display: none;
  background-color: rgba(214, 69, 69, 0.08);
  border: 1.5px solid #d64545;
  border-radius: var(--rayon-petit);
  padding: 20px 24px;
  color: #a62a2a;
  font-family: var(--police-corps);
  font-weight: 600;
  margin-bottom: 24px;
  text-align: center;
}

.message-erreur a {
  color: #a62a2a;
  text-decoration: underline;
}

.message-erreur.visible {
  display: block;
  animation: fadeIn 0.4s ease;
}

/* ----------------------------------------------------------
   18. PAGE JURIDIQUE (mentions légales)
   ---------------------------------------------------------- */
.contenu-juridique {
  max-width: 820px;
  margin: 0 auto;
}

.contenu-juridique h2 {
  font-size: 1.4rem;
  margin: 40px 0 14px;
  padding-top: 20px;
  border-top: 1px solid var(--bordure);
}

.contenu-juridique h2:first-of-type {
  border-top: none;
  padding-top: 0;
}

.contenu-juridique p,
.contenu-juridique li {
  color: var(--texte-attenue);
  margin-bottom: 12px;
}

.contenu-juridique ul {
  list-style: disc;
  padding-left: 22px;
  margin-bottom: 12px;
}

.contenu-juridique strong {
  color: var(--violet-fonce);
}

/* ----------------------------------------------------------
   19. PIED DE PAGE
   ---------------------------------------------------------- */
.pied {
  background-color: var(--violet-fonce);
  color: var(--texte-clair);
  padding: 64px 0 28px;
}

.pied__grille {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1.2fr;
  gap: 48px;
  margin-bottom: 48px;
}

.pied__logo {
  font-family: var(--police-corps);
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: 0.08em;
  color: var(--texte-clair);
  margin-bottom: 16px;
  display: inline-block;
}

.pied__logo span {
  color: var(--rose-lavande);
}

.pied__description {
  color: var(--rose-lavande);
  font-size: 0.96rem;
  max-width: 320px;
}

.pied__titre {
  font-family: var(--police-corps);
  font-weight: 600;
  font-size: 1rem;
  color: var(--texte-clair);
  margin-bottom: 18px;
}

.pied__liste li {
  margin-bottom: 11px;
}

.pied__liste a,
.pied__contact-item {
  color: var(--rose-lavande);
  font-size: 0.96rem;
}

.pied__liste a:hover {
  color: var(--texte-clair);
}

.pied__contact-item {
  margin-bottom: 11px;
}

.pied .reseaux {
  margin-top: 18px;
}

.pied .reseaux a {
  background-color: rgba(252, 251, 241, 0.12);
}

.pied .reseaux a:hover {
  background-color: var(--rose-lavande);
  color: var(--violet-fonce);
}

.pied__bas {
  border-top: 1px solid rgba(252, 251, 241, 0.15);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.88rem;
  color: var(--rose-lavande);
}

.pied__bas a {
  color: var(--rose-lavande);
}

.pied__bas a:hover {
  color: var(--texte-clair);
}

/* ----------------------------------------------------------
   20. ANIMATIONS (fade-in au scroll)
   ---------------------------------------------------------- */
.fade-in {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Respect des préférences de mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .fade-in {
    opacity: 1;
    transform: none;
  }
}

/* ----------------------------------------------------------
   21. RESPONSIVE — breakpoint 968px
   ---------------------------------------------------------- */
@media (max-width: 968px) {
  body {
    font-size: 16px;
  }

  .section {
    padding: 64px 0;
  }

  /* Navigation mobile */
  .hamburger {
    display: flex;
  }

  .nav {
    position: fixed;
    top: var(--hauteur-header);
    right: 0;
    width: min(320px, 85%);
    height: calc(100vh - var(--hauteur-header));
    background-color: var(--creme);
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    padding: 32px 28px;
    box-shadow: var(--ombre-forte);
    transform: translateX(100%);
    transition: transform var(--transition);
    overflow-y: auto;
  }

  .nav.ouvert {
    transform: translateX(0);
  }

  .nav__liste {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
  }

  .nav__lien {
    display: block;
    width: 100%;
    padding: 14px 0;
    font-size: 1.1rem;
    border-bottom: 1px solid var(--bordure);
  }

  .nav__lien::after {
    display: none;
  }

  .nav .btn {
    width: 100%;
    margin-top: 20px;
  }

  /* Grilles sur 1 ou 2 colonnes */
  .grille--3,
  .grille--4,
  .grille-formules {
    grid-template-columns: 1fr;
  }

  .grille--2 {
    grid-template-columns: 1fr;
  }

  .formule--populaire {
    order: -1;
  }

  .bio {
    grid-template-columns: 1fr;
    gap: 36px;
    text-align: center;
  }

  .bio__media {
    max-width: 360px;
    margin: 0 auto;
  }

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

  .pied__grille {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }

  .pied__description {
    grid-column: 1 / -1;
  }
}

/* ----------------------------------------------------------
   22. RESPONSIVE — breakpoint 480px
   ---------------------------------------------------------- */
@media (max-width: 480px) {
  .conteneur {
    padding: 0 18px;
  }

  .section {
    padding: 52px 0;
  }

  .hero {
    padding: calc(var(--hauteur-header) + 50px) 0 64px;
  }

  .hero__ctas {
    flex-direction: column;
  }

  .hero__ctas .btn {
    width: 100%;
  }

  .carte,
  .formule,
  .formulaire {
    padding: 26px 22px;
  }

  .cas__resultats {
    gap: 16px;
  }

  .pied__grille {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .pied__bas {
    flex-direction: column;
    text-align: center;
  }

  .temoignage__auteur {
    flex-direction: column;
    text-align: center;
  }

  .temoignage__auteur-infos {
    text-align: center;
  }
}