/* ==========================================================================
   ÉCLORE STUDIO — Création de sites internet & visibilité
   Design "studio moderne" : bleu nuit, violet, jaune solaire.
   Même architecture que les sites Azur & Moi / By Swanie.
   ========================================================================== */

/* ==========================================================================
   1. VARIABLES
   ========================================================================== */
:root {
  --encre:        #1e2142;   /* bleu nuit — titres, footer */
  --violet:       #6c5ce7;   /* accent principal */
  --violet-fonce: #5546c8;
  --lavande:      #edeafd;   /* fond doux violet */
  --creme:        #fbfaff;   /* fond général */
  --soleil:       #ffcf56;   /* jaune solaire — boutons d'action */
  --soleil-fonce: #f5bd2e;
  --texte:        #454868;
  --texte-doux:   #7d80a0;
  --blanc:        #ffffff;
  --bordure:      #e6e3f5;

  --font-titres: "Fraunces", Georgia, serif;
  --font-texte:  "Plus Jakarta Sans", "Segoe UI", Helvetica, Arial, sans-serif;

  --degrade-signature: linear-gradient(120deg, var(--violet) 0%, #8f7ff0 45%, var(--soleil) 100%);

  --radius:      24px;
  --radius-sm:   14px;
  --ombre:       0 12px 34px rgba(30, 33, 66, 0.09);
  --ombre-forte: 0 24px 60px rgba(30, 33, 66, 0.16);
  --transition:  all 0.3s cubic-bezier(0.25, 0.6, 0.3, 1);
  --largeur-max: 1200px;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 110px; }

body {
  font-family: var(--font-texte);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--texte);
  background-color: var(--creme);
  -webkit-font-smoothing: antialiased;
}

::selection { background-color: var(--violet); color: var(--blanc); }

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

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

ul { list-style: none; }

h1, h2, h3, h4 {
  font-family: var(--font-titres);
  color: var(--encre);
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -0.015em;
}

h1 { font-size: clamp(2.6rem, 6vw, 4.1rem); }
h2 { font-size: clamp(2rem, 4.2vw, 2.9rem); }
h3 { font-size: 1.35rem; }

.mot-accent { font-style: italic; color: var(--violet); }

/* ==========================================================================
   3. UTILITAIRES
   ========================================================================== */
.conteneur { width: min(var(--largeur-max), 92%); margin-inline: auto; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.95rem 2.1rem;
  border-radius: 100px;
  font-family: var(--font-texte);
  font-size: 0.98rem;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: var(--transition);
  text-align: center;
  justify-content: center;
}

.btn::after { content: "→"; transition: transform 0.3s ease; }
.btn:hover::after { transform: translateX(4px); }

.btn-principal {
  background-color: var(--soleil);
  color: var(--encre);
  box-shadow: 0 10px 24px rgba(255, 207, 86, 0.45);
}

.btn-principal:hover {
  background-color: var(--soleil-fonce);
  color: var(--encre);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(255, 207, 86, 0.55);
}

.btn-secondaire {
  background-color: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(6px);
  color: var(--encre);
  border-color: rgba(30, 33, 66, 0.25);
}

.btn-secondaire:hover { background-color: var(--encre); border-color: var(--encre); color: var(--blanc); }

.btn-contour {
  background-color: transparent;
  color: var(--encre);
  border-color: rgba(30, 33, 66, 0.25);
}

.btn-contour:hover { border-color: var(--violet); background-color: var(--violet); color: var(--blanc); }

.btn-petit { padding: 0.55rem 1.3rem; font-size: 0.88rem; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  color: var(--violet);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}

.badge::before { content: ""; width: 28px; height: 2px; background-color: var(--violet); border-radius: 2px; }

.entete-section .badge { justify-content: center; }
.entete-section .badge::before { display: none; }

.entete-section { text-align: center; max-width: 720px; margin: 0 auto 3.5rem; }
.entete-section p { color: var(--texte-doux); font-size: 1.08rem; margin-top: 0.9rem; }

/* ==========================================================================
   4. HEADER — barre flottante en pilule
   ========================================================================== */
.header {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: min(var(--largeur-max), 94%);
  z-index: 1000;
  background-color: rgba(251, 250, 255, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(30, 33, 66, 0.07);
  border-radius: 100px;
  box-shadow: 0 6px 24px rgba(30, 33, 66, 0.07);
  transition: var(--transition);
}

.header.scrolle { box-shadow: 0 12px 34px rgba(30, 33, 66, 0.13); background-color: rgba(251, 250, 255, 0.95); }

.header .conteneur {
  width: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 66px;
  padding: 0 1.6rem 0 2rem;
}

.logo {
  font-family: var(--font-titres);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--encre);
}

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

.nav-liste { display: flex; align-items: center; gap: 1.35rem; }

.nav-liste a {
  color: var(--encre);
  font-size: 0.9rem;
  font-weight: 500;
  position: relative;
  padding: 0.3rem 0;
}

.nav-liste a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background-color: var(--violet);
  transition: var(--transition);
}

.nav-liste a:hover::after { width: 100%; }
.nav-liste a.btn::after { display: none; }

.burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; }
.burger span { width: 24px; height: 2px; border-radius: 2px; background-color: var(--encre); transition: var(--transition); }
.burger.ouvert span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.ouvert span:nth-child(2) { opacity: 0; }
.burger.ouvert span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   5. HERO — dégradé violet nuit avec halos animés
   ========================================================================== */
.hero {
  min-height: 92vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: 170px 0 100px;
  background:
    radial-gradient(circle at 80% 15%, rgba(255, 207, 86, 0.2), transparent 40%),
    radial-gradient(circle at 15% 85%, rgba(108, 92, 231, 0.35), transparent 50%),
    linear-gradient(150deg, #262a52 0%, #1e2142 55%, #33265c 100%);
  color: var(--blanc);
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.4;
  pointer-events: none;
}

.hero::before {
  width: 480px; height: 480px;
  top: -140px; right: -100px;
  background: radial-gradient(circle, rgba(108, 92, 231, 0.9), transparent 70%);
  animation: flotter 9s ease-in-out infinite alternate;
}

.hero::after {
  width: 380px; height: 380px;
  bottom: -120px; left: 12%;
  background: radial-gradient(circle, rgba(255, 207, 86, 0.5), transparent 70%);
  animation: flotter 11s ease-in-out infinite alternate-reverse;
}

.hero-contenu { max-width: 720px; position: relative; z-index: 1; }

.surtitre {
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--soleil);
  margin-bottom: 1.4rem;
}

.hero h1 { color: var(--blanc); margin-bottom: 1.4rem; }
.hero h1 .mot-accent { color: var(--soleil); }

.hero-contenu > p {
  font-size: 1.12rem;
  color: rgba(255, 255, 255, 0.85);
  max-width: 600px;
  margin-bottom: 2.2rem;
}

.hero-boutons { display: flex; flex-wrap: wrap; gap: 1rem; }

.hero-preuves {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 2.2rem;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.75);
}

/* ==========================================================================
   6. BANDEAU DÉFILANT
   ========================================================================== */
.bandeau-defilant {
  background-color: var(--soleil);
  color: var(--encre);
  overflow: hidden;
  padding: 0.9rem 0;
}

.defilement {
  display: flex;
  gap: 2.2rem;
  width: max-content;
  animation: defiler 30s linear infinite;
  font-family: var(--font-titres);
  font-style: italic;
  font-size: 1.05rem;
  white-space: nowrap;
}

.defilement .sep { color: var(--violet); font-style: normal; }

@keyframes defiler { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ==========================================================================
   7. SECTIONS
   ========================================================================== */
.section { padding: 6.5rem 0; }
.section-fond { background-color: var(--lavande); }

.bloc-duo {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 4rem;
  align-items: center;
}

.bloc-duo h2 { margin-bottom: 1.2rem; }
.bloc-duo p { margin-bottom: 1rem; }

.liste-atouts { margin-top: 1.6rem; display: grid; gap: 0.75rem; }
.liste-atouts li { position: relative; padding-left: 2rem; }
.liste-atouts li::before { content: "✦"; position: absolute; left: 0; color: var(--violet); }

/* --- Bloc de statistiques --- */
.visuel-stats { display: grid; gap: 1.5rem; }

.stat {
  background-color: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--radius);
  padding: 1.8rem 2rem;
  box-shadow: var(--ombre);
}

.stat-chiffre {
  font-family: var(--font-titres);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--violet);
  line-height: 1.1;
  margin-bottom: 0.3rem;
}

.stat p:not(.stat-chiffre) { font-size: 0.93rem; color: var(--texte-doux); }

/* ==========================================================================
   8. SERVICES
   ========================================================================== */
.grille-services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.8rem;
}

.carte-service {
  background-color: var(--blanc);
  border-radius: var(--radius);
  padding: 2.3rem 2rem;
  box-shadow: var(--ombre);
  transition: var(--transition);
}

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

.service-icone { font-size: 2.2rem; display: block; margin-bottom: 1rem; }
.carte-service h3 { font-size: 1.2rem; margin-bottom: 0.5rem; }
.carte-service p { font-size: 0.94rem; color: var(--texte-doux); }

/* ==========================================================================
   9. RÉALISATIONS
   ========================================================================== */
.grille-realisations {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.carte-realisation {
  background-color: var(--blanc);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--ombre);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  color: var(--texte);
}

.carte-realisation:hover { transform: translateY(-8px); box-shadow: var(--ombre-forte); color: var(--texte); }

.realisation-visuel {
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-titres);
  font-size: 2rem;
  font-weight: 700;
  color: var(--blanc);
  text-align: center;
  padding: 1rem;
}

.realisation-visuel span { font-style: italic; }

.realisation-azur   { background: linear-gradient(135deg, #004661, #00988f 60%, #fbd141); }
.realisation-swanie { background: linear-gradient(135deg, #b98a5a, #f3d7d3 60%, #f5c93f); color: #4a3427; }
.realisation-outils { background: linear-gradient(135deg, #2f7a5f, #6bbfa3 70%, #e8f3ee); }

.realisation-corps { padding: 1.6rem 1.7rem 1.8rem; display: flex; flex-direction: column; flex: 1; }
.realisation-corps h3 { font-size: 1.15rem; margin-bottom: 0.4rem; }
.realisation-corps p { font-size: 0.93rem; color: var(--texte-doux); flex: 1; }
.lien-suite { margin-top: 1.1rem; font-weight: 600; font-size: 0.92rem; color: var(--violet); }

/* ==========================================================================
   10. OFFRES / TARIFS
   ========================================================================== */
.grille-offres {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  align-items: stretch;
}

.carte-offre {
  background-color: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--radius);
  padding: 2.5rem 2.2rem;
  display: flex;
  flex-direction: column;
  box-shadow: var(--ombre);
  position: relative;
  transition: var(--transition);
}

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

.offre-vedette {
  border: 2px solid var(--violet);
  box-shadow: var(--ombre-forte);
}

.offre-etiquette {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--violet);
  color: var(--blanc);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.35rem 1.1rem;
  border-radius: 100px;
  white-space: nowrap;
}

.carte-offre h3 { font-size: 1.5rem; margin-bottom: 0.2rem; }
.offre-cible { font-size: 0.9rem; color: var(--texte-doux); margin-bottom: 1.2rem; }

.offre-prix { font-size: 1rem; color: var(--texte-doux); margin-bottom: 1.6rem; }
.offre-prix strong {
  font-family: var(--font-titres);
  font-size: 2.1rem;
  color: var(--encre);
  margin-left: 0.2rem;
}

.carte-offre ul { display: grid; gap: 0.6rem; margin-bottom: 2rem; flex: 1; }
.carte-offre li { position: relative; padding-left: 1.7rem; font-size: 0.94rem; }
.carte-offre li::before { content: "✓"; position: absolute; left: 0; color: var(--violet); font-weight: 700; }

.note-offres {
  margin-top: 2.5rem;
  text-align: center;
  font-size: 0.95rem;
  color: var(--texte);
  background-color: rgba(255, 207, 86, 0.22);
  border-radius: var(--radius-sm);
  padding: 1.1rem 1.6rem;
}

/* ==========================================================================
   11. ÉTAPES
   ========================================================================== */
.etapes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.8rem;
}

.etape {
  background-color: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--radius);
  padding: 2.2rem 1.8rem;
  box-shadow: var(--ombre);
}

.numero {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--degrade-signature);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-titres);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--blanc);
  margin-bottom: 1.3rem;
}

.etape h3 { margin-bottom: 0.5rem; font-size: 1.15rem; }
.etape p { font-size: 0.93rem; color: var(--texte-doux); }

/* ==========================================================================
   12. CTA
   ========================================================================== */
.cta {
  background:
    radial-gradient(circle at 85% 20%, rgba(255, 207, 86, 0.25), transparent 45%),
    radial-gradient(circle at 10% 85%, rgba(108, 92, 231, 0.4), transparent 50%),
    var(--encre);
  color: rgba(255, 255, 255, 0.85);
  padding: 6rem 0;
  text-align: center;
}

.cta h2 { color: var(--blanc); margin-bottom: 0.9rem; }
.cta h2 em { color: var(--soleil); }
.cta p { font-size: 1.1rem; max-width: 620px; margin: 0 auto 2.2rem; }
.cta .hero-boutons { justify-content: center; }

/* ==========================================================================
   13. FOOTER
   ========================================================================== */
.footer {
  background-color: var(--encre);
  color: rgba(255, 255, 255, 0.75);
  padding: 3.5rem 0 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-haut {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-marque {
  font-family: var(--font-titres);
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--blanc);
}

.footer-marque span { color: var(--soleil); font-style: italic; }

.footer-sous-titre { font-size: 0.9rem; opacity: 0.75; max-width: 420px; }

.footer-contact { display: grid; gap: 0.4rem; text-align: right; }
.footer-contact a { color: rgba(255, 255, 255, 0.85); font-size: 0.95rem; }
.footer-contact a:hover { color: var(--soleil); }

.footer-bas { padding-top: 1.6rem; text-align: center; font-size: 0.8rem; opacity: 0.6; }

/* ==========================================================================
   14. ANIMATIONS
   ========================================================================== */
@keyframes flotter {
  from { transform: translateY(0) translateX(0); }
  to   { transform: translateY(30px) translateX(-20px); }
}

.reveler {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveler.visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .reveler { opacity: 1; transform: none; transition: none; }
  .defilement { animation: none; }
  .hero::before, .hero::after { animation: none; }
}

/* ==========================================================================
   15. RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  .grille-services, .grille-realisations, .grille-offres { grid-template-columns: 1fr 1fr; }
  .etapes { grid-template-columns: 1fr 1fr; }
  .offre-vedette { order: -1; }
}

@media (max-width: 820px) {
  .nav {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    background-color: rgba(251, 250, 255, 0.98);
    border-radius: var(--radius);
    box-shadow: var(--ombre-forte);
    padding: 1.4rem;
    display: none;
  }

  .nav.ouvert { display: block; }
  .nav-liste { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .burger { display: flex; }

  .bloc-duo { grid-template-columns: 1fr; gap: 2.5rem; }
  .footer-contact { text-align: left; }
}

@media (max-width: 560px) {
  .grille-services, .grille-realisations, .grille-offres { grid-template-columns: 1fr; }
  .etapes { grid-template-columns: 1fr; }
  .section { padding: 4.5rem 0; }
}

/* ==========================================================================
   16. PORTRAIT "QUI SUIS-JE"
   ========================================================================== */
.portrait { text-align: center; }

.portrait-cadre {
  width: min(330px, 70vw);
  aspect-ratio: 1;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--degrade-signature);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--ombre-forte);
  position: relative;
  overflow: hidden;
}

/* Quand une vraie photo sera ajoutée : <img src="images/laura.jpg"> dans .portrait-cadre */
.portrait-cadre img { width: 100%; height: 100%; object-fit: cover; }

.portrait-initiale {
  font-family: var(--font-titres);
  font-style: italic;
  font-size: 9rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
}

.portrait-legende {
  margin-top: 1.2rem;
  font-size: 0.95rem;
  color: var(--texte-doux);
  font-style: italic;
}

/* ==========================================================================
   17. MODULES SUR MESURE
   ========================================================================== */
.grille-modules {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.module-chip {
  background-color: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--radius-sm);
  padding: 1.1rem 1.3rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--encre);
  box-shadow: var(--ombre);
  transition: var(--transition);
}

.module-chip:hover {
  transform: translateY(-4px);
  border-color: var(--violet);
  box-shadow: var(--ombre-forte);
}

@media (max-width: 560px) {
  .grille-modules { grid-template-columns: 1fr; }
}

/* ==========================================================================
   18. FORMATION IA
   ========================================================================== */
.formation { padding-top: 0; }

.formation-carte {
  background:
    radial-gradient(circle at 85% 15%, rgba(255, 207, 86, 0.3), transparent 45%),
    linear-gradient(135deg, #33265c 0%, #1e2142 60%, #262a52 100%);
  border-radius: var(--radius);
  padding: 3.5rem 3.5rem;
  display: grid;
  grid-template-columns: 1.4fr 0.6fr;
  gap: 2rem;
  align-items: center;
  color: rgba(255, 255, 255, 0.88);
  box-shadow: var(--ombre-forte);
}

.formation-carte h2 { color: var(--blanc); margin-bottom: 1rem; font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
.formation-carte h2 em { color: var(--soleil); }

.badge-clair { color: var(--soleil); }
.badge-clair::before { background-color: var(--soleil); }

.formation-liste { display: grid; gap: 0.55rem; margin: 1.3rem 0; font-size: 0.97rem; }

.formation-format {
  font-size: 0.9rem;
  opacity: 0.75;
  margin-bottom: 1.6rem;
}

.formation-visuel {
  font-size: 5.5rem;
  text-align: center;
  filter: drop-shadow(0 10px 30px rgba(255, 207, 86, 0.35));
}

@media (max-width: 820px) {
  .formation-carte { grid-template-columns: 1fr; padding: 2.5rem 1.8rem; }
  .formation-visuel { display: none; }
}