/* Reset & variables */
*,*::before,*::after{box-sizing:border-box}
:root{
  /* Palette pastel: rose ► pervenche, avec texte prune profond */
  --bg: #ffffff;                          /* base claire pour surfaces */
  --bg-soft: rgba(255,255,255,0.5);      /* cartes/verres */
  --text: #2b2240;                        /* texte principal (prune) */
  --muted: #6f6787;                       /* texte secondaire (lavande grise) */
  --brand: #ff73b9;                       /* rose vif du dégradé */
  --brand-2: #f8dabe;                     /* pervenche douce */
  --accent: #ffd8ec;                      /* rose très pâle pour hovers */
  --stroke: #e6e0f4;                      /* bordures lavande claires */
  --radius: 18px;
  --shadow: 0 12px 30px rgba(108, 78, 148, .18);
  --maxw: 1200px;
  --gap: clamp(16px, 4vw, 32px);
}

html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  font:400 16px/1.6 "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing:.2px;

  /* On laisse le fond du body transparent, on le peint via des pseudo-éléments */
  background: transparent;
  position: relative;
  overflow-x: hidden; /* au cas où */
}

/* Couche dégradé pastel, immense et hors-écran */
body::before {
  content: "";
  position: fixed;
  inset: -25vh -25vw -25vh -25vw;
  z-index: -1;
  pointer-events: none;

  /* GROS BLOBS + ambiance violette pastel */
  background:
    /* Blob énorme haut-gauche */
    radial-gradient(
      80vw 80vw at 5% 0%,
      rgba(255, 140, 220, 0.9) 0%,
      rgba(255, 96, 157, 0.4) 40%,
      rgba(255, 255, 255, 0.0) 70%
    ),

    /* Blob énorme bas-droite */
    radial-gradient(
      85vw 85vw at 100% 100%,
      rgba(255, 140, 220, 0.9) 0%,
      rgba(255, 96, 157, 0.4) 40%,
      rgba(255, 255, 255, 0.0) 70%
    ),

    /* Grand voile violet général */
    radial-gradient(
      120vw 120vw at 50% 60%,
      rgba(250, 180, 255, 0.35) 0%,
      rgba(255, 255, 255, 0.0) 70%
    ),

    /* fond clair */
    linear-gradient(#fff, #fff);

  filter: saturate(1.08);
  animation: bg-wave 22s ease-in-out infinite alternate;
  will-change: transform;
}


/* Voile de grain très léger pour casser les aplats (data-URI SVG, 0.6% d’opacité) */
body::after{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .06;
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'>\
  <filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter>\
  <rect width='140' height='140' filter='url(%23n)' opacity='0.8'/></svg>");
  background-size: 220px 220px; /* taille de motif assez large, pas de “carreaux” visibles */
  mix-blend-mode: multiply;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.container{width:min(100% - 2rem,var(--maxw));margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Header / Nav */
header{
  backdrop-filter: saturate(1.2) blur(10px);
  background: color-mix(in oklab, var(--bg-soft) 60%, transparent);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:.75rem 0}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:800;letter-spacing:.2px}
.brand-logo {
  background: conic-gradient(
    from 210deg,
    #ff9ad5 0deg,
    #ff6fb1 60deg,
    #d03993 150deg,
    #f3d7ff 260deg,
    #ff9ad5 360deg
  );
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width:36px;height:36px;border-radius:12px;
}

.brand span{font-size:clamp(16px,2.4vw,20px)}
nav ul{list-style:none;display:flex;gap:clamp(10px,2.8vw,28px);margin:0;padding:0;align-items:center}
nav a{color:var(--muted);font-weight:700}
nav a:hover{color: color-mix(in oklab, var(--text) 70%, var(--brand))}
/* ===== CTA : état normal = joli mais sage ===== */
nav a.cta {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: .7rem 1.2rem;
  border-radius: 999px;
  font-weight: 800;
  border: none;
  color: #2b2240;

  /* gradient plutôt "normal" mais joli */
  background: linear-gradient(
    135deg,
    #ff9ad5 0%,
    #ff6fb1 35%,
    #ff4f8b 75%,
    #f3d7ff 100%
  );

  box-shadow:
    0 4px 14px rgba(255, 105, 180, 0.24),
    inset 0 0 8px rgba(255, 255, 255, 0.18);

  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}

/* ===== Facettes gemstone : INVISIBLES par défaut ===== */
nav a.cta::before,
nav a.cta::after {
  content: "";
  position: absolute;
  inset: -40%;
  pointer-events: none;
  opacity: 0;                 /* <- invisible à l'état normal */
  mix-blend-mode: screen;
  z-index: -1;

  /* reflets géométriques */
  background: conic-gradient(
    from 0deg,
    rgba(255,255,255,0.8) 0deg,
    rgba(255,255,255,0.15) 60deg,
    rgba(255,255,255,0.6) 120deg,
    rgba(255,255,255,0.18) 180deg,
    rgba(255,255,255,0.5) 260deg,
    rgba(255,255,255,0.15) 360deg
  );

  /* masque rond pour que ça reste doux */
  mask-image: radial-gradient(circle at 50% 50%,
    rgba(255,255,255,1) 40%,
    rgba(255,255,255,0) 75%
  );

  transform: translate(0,0) rotate(0deg) scale(1);
  transition: transform .8s cubic-bezier(.32,.1,.32,1), opacity .35s ease;
}

/* deuxième couche pour l'effet 3D */
nav a.cta::after {
  background: conic-gradient(
    from 160deg,
    rgba(255,255,255,0.7) 0deg,
    rgba(255,255,255,0.2) 80deg,
    rgba(255,255,255,0.55) 150deg,
    rgba(255,255,255,0.18) 230deg,
    rgba(255,255,255,0.6) 310deg,
    rgba(255,255,255,0.2) 360deg
  );
}

/* ===== HOVER : la gemme s'active ===== */
nav a.cta:hover {
  transform: translateY(-3px);
  filter: saturate(1.12);
  box-shadow:
    0 10px 26px rgba(255, 105, 180, 0.45),
    inset 0 0 14px rgba(255, 255, 255, 0.3);
}

nav a.cta:hover::before {
  opacity: 0.85;
  transform: translate(18%, -12%) rotate(32deg) scale(1.18);
}

nav a.cta:hover::after {
  opacity: 0.6;
  transform: translate(-15%, 16%) rotate(-26deg) scale(1.12);
}

.burger{display:none;width:42px;height:42px;border:1px solid var(--stroke);border-radius:14px;background:var(--bg-soft);align-items:center;justify-content:center}
.burger span{width:20px;height:2px;background:var(--text);position:relative;display:block}
.burger span::before,.burger span::after{content:"";position:absolute;inset:0;height:2px;background:var(--text);translate:0 -6px}
.burger span::after{translate:0 6px}
@media (max-width:900px){
  nav ul{
    position:fixed;inset:64px 0 auto 0;background:color-mix(in oklab, var(--bg-soft) 95%, transparent);
    display:none;flex-direction:column;padding:1rem;border-bottom:1px solid var(--stroke)
  }
  nav ul.show{display:flex}
  .burger{display:flex}
}

/* Hero */
.hero{padding:clamp(32px,6vw,72px) 0}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--gap);align-items:center}
.hero h1{
  font-size:clamp(28px,6vw,56px);line-height:1.05;margin:0 0 .6rem;
  letter-spacing:.3px;
  text-shadow: 0 1px 0 rgba(255,255,255,.6)
}
.hero p.lead{color:var(--muted);font-size:clamp(16px,2.6vw,20px);max-width:58ch}
.cta-row{display:flex;gap:.8rem;margin-top:1.2rem;flex-wrap:wrap}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;

  padding: .85rem 1.05rem;
  border-radius: 14px;
  font-weight: 800;

  /* 🌫 effet “glass” pastel */
  background: linear-gradient(
    135deg,
    rgba(255, 245, 255, 0.65),
    rgba(245, 230, 255, 0.55)
  );
  border: 1px solid var(--stroke);

  /* Glow lavande doux, cohérent avec .btn.rose */
  box-shadow:
    0 6px 14px rgba(205, 170, 255, .16),
    inset 0 0 10px rgba(235, 220, 255, 0.18);

  color: var(--text);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.btn:hover {
  background: linear-gradient(
    135deg,
    rgba(255, 245, 255, 0.8),
    rgba(245, 230, 255, 0.7)
  );
  box-shadow:
    0 8px 18px rgba(205, 170, 255, .22),
    inset 0 0 12px rgba(235, 220, 255, 0.24);
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
  box-shadow:
    0 4px 10px rgba(205, 170, 255, .18),
    inset 0 0 8px rgba(235, 220, 255, 0.18);
}

.btn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px color-mix(in oklab, #f3d7ff 55%, transparent),
    0 6px 14px rgba(205, 170, 255, .22);
}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}}

/* Sections */
.section{padding:clamp(28px,5.5vw,72px) 0}
.section h2{
  font-size:clamp(22px,4.6vw,36px);margin:0 0 .8rem;
  letter-spacing:.2px
}
.section p.sub{color:var(--muted);margin:0 0 1.2rem}

/* ====== Portfolio grid aligné (5 colonnes minimum) ====== */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  /* 180px ≈ largeur d'une carte, ajuste selon ton goût */
  gap: 1rem;
  align-items: start; /* les cartes ne s’étirent pas à la même hauteur */
}

/* Cartes : largeur fixée par la colonne, hauteur naturelle */
.card {
  border: 1px solid var(--stroke);
  border-radius: 16px;
  background: var(--bg-soft);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,.1);
}

/* Image : garde son ratio naturel, largeur 100 % de la carte */
.card .thumb {
  width: 100%;
  overflow: hidden;
}
.card .thumb img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}


/* Responsive: on conserve minimum 5 cartes par ligne sur desktop */
@media (min-width: 1400px) {
  .grid { grid-template-columns: repeat(6, 1fr); }
}
@media (min-width: 900px) and (max-width: 1399px) {
  .grid { grid-template-columns: repeat(5, 1fr); }
}
@media (min-width: 640px) and (max-width: 899px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 639px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}

/* --- Correction : meta en colonne pour les cartes du portfolio --- */
.card .meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .3rem; /* petit espace entre le titre et le tag */
}

.card .meta span {
  display: block;
}

.card .meta .chip {
  align-self: flex-start;
  background: var(--bg-soft);
  border: 1px solid var(--stroke);
  border-radius: 999px;
  padding: .2rem .6rem;
  font-size: .8rem;
  color: var(--muted);
}


/* Services */
.service{
  grid-column:span 6;border:1px solid var(--stroke);border-radius:18px;padding:1rem;
  background: linear-gradient(180deg, rgba(255,255,255,.66), rgba(255,255,255,.58))
}
.service h3{margin:.2rem 0 .4rem;font-size:clamp(18px,3.6vw,22px)}
.service p{color:var(--muted);margin:0}

/* CTA band */
/* ===== CTA Band — version légère mais lisible ===== */
.services .cta-band {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid var(--stroke);
  padding: clamp(1.6rem, 4vw, 2rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;

  /* fond pastel plus marqué que les cartes */
  background: linear-gradient(
    120deg,
    rgba(230, 215, 255, 0.6) 0%,
    rgba(255, 220, 245, 0.55) 50%,
    rgba(240, 250, 255, 0.6) 100%
  );
  box-shadow: 0 8px 22px rgba(108, 78, 148, 0.15);
  backdrop-filter: saturate(1.1) blur(8px);
  transition: box-shadow .25s ease, transform .25s ease;
}

.services .cta-band:hover {
  box-shadow: 0 10px 26px rgba(108, 78, 148, 0.22);
  transform: translateY(-2px);
}

/* Légère lumière interne */
.services .cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 70% 30%,
    rgba(239, 115, 255, 0.14),
    transparent 70%
  );
  pointer-events: none;
}

/* Typo et boutons */
.services .cta-band strong {
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  color: var(--text);
}

.services .cta-band .btn {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--stroke);
  box-shadow: 0 4px 10px rgba(108, 78, 148, 0.08);
}
.services .cta-band .btn:hover {
  background: color-mix(in oklab, var(--accent) 25%, var(--bg));
  transform: translateY(-2px);
}

.services .cta-band .btn.rose {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #2b2240;
  border: none;
  box-shadow: 0 6px 16px rgba(239, 115, 255, 0.22);
}
.services .cta-band .btn.rose:hover {
  box-shadow: 0 8px 20px rgba(239, 115, 255, 0.3);
}

/* Responsive */
@media (max-width: 700px) {
  .services .cta-band {
    flex-direction: column;
    text-align: center;
  }
  .services .cta-band .cta-row {
    justify-content: center;
  }
}


/* About */
.about{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--gap);align-items:center}
.about .portrait{
  border-radius: var(--radius);overflow:hidden;border:1px solid var(--stroke);
}
.about p{color:var(--muted)}
@media (max-width:900px){.about{grid-template-columns:1fr}}

/* Footer */
footer{
  background: color-mix(in oklab, #ffffff 70%, transparent)
}
.foot{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--gap);padding:1.6rem 0}
.foot h4{margin:.2rem 0 .6rem}
.foot a{color:var(--muted)}
.foot a:hover{color:#5b4fa8}
.copyright{color:var(--muted);font-size:.9rem;padding:1rem 0;border-top:1px dashed var(--stroke)}
@media (max-width:900px){.foot{grid-template-columns:1fr}}

/* Utility */
.blur-cap{
  background:linear-gradient(to top, color-mix(in oklab, #ffffff 70%, transparent), transparent);
  height:40px;margin-top:-40px
}

/* Petits bonus d’animation douce */
.btn, .card { transition: transform .2s ease, background .2s ease, color .2s ease }
a:hover { text-decoration: none }

/* ====== Services page ====== */

/* Contexte */
.services-hero .lead { max-width: 70ch; }

/* Grille des offres principales */
.offers-grid { row-gap: 1rem; }
.offer-card { display: flex; flex-direction: column; }
.offer-card .meta { justify-content: flex-start; gap: .6rem; }
.offer-card__body { padding: 1rem; }
.offer-list { margin: .6rem 0 0 1.1rem; color: var(--muted); }
.offer-card .price { margin-right: .4rem; }

/* Grilles commissions / licences / FAQ */
.commission-grid,
.license-grid,
.faq-grid { row-gap: .8rem; }

.commission,
.faq-item { display: flex; flex-direction: column; gap: .4rem; }

/* Tableau comparatif */
.table-wrap {
  overflow: auto;
  border: 1px solid var(--stroke);
  border-radius: 12px;
  background: var(--bg-soft);
}
.pricing-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.98rem;
}
.pricing-table thead tr {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #2b2240;
}
.pricing-table th,
.pricing-table td {
  text-align: left;
  padding: .8rem;
  border-top: 1px solid var(--stroke);
}
.pricing-table thead th { border-top: 0; }

/* ===== Grille services : 2 par ligne ===== */
.offers-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  align-items: start;
}

/* Chaque carte garde une apparence cohérente */
.offer-card {
  border: 1px solid var(--stroke);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.6));
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}
.offer-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
}
.offer-card__body { padding: 1.2rem; }
.offer-card h2 { margin-top: .2rem; margin-bottom: .6rem; }

/* Responsive : 1 carte par ligne sur petits écrans */
@media (max-width: 900px) {
  .offers-grid {
    grid-template-columns: 1fr;
  }
}


/* Processus */
.process-steps {
  margin: 0 0 0 1.2rem;
  color: var(--muted);
}
.process-steps li { margin-bottom: .35rem; }

/* Responsive layout tweaks */
@media (min-width: 901px){
  .offers-grid .offer-card { grid-column: span 6; }
  .commission-grid .commission { grid-column: span 6; }
  .license-grid .service { grid-column: span 6; }
  .faq-grid .faq-item { grid-column: span 6; }
}
@media (max-width: 900px){
  .offer-card__body { padding: .9rem; }
}
@media (max-width: 640px){
  .offers-grid .offer-card,
  .commission-grid .commission,
  .license-grid .service,
  .faq-grid .faq-item { grid-column: span 12; }
  .pricing-table { font-size: 0.95rem; }
}

/* Harmonisation avec thème whimsical */
.services .card {
  background: color-mix(in oklab, #ffffff 82%, transparent);
}
.services .service {
  border: 1px solid var(--stroke);
  border-radius: 18px;
  padding: 1rem;
  background: linear-gradient(180deg, rgba(255,255,255,.66), rgba(255,255,255,.58));
}
.services h2 { letter-spacing: .2px; }
.services .cta-band {
  margin-top: var(--gap);
}

/* ====== Contact page (stacked, fully responsive) ====== */

.contact-hero .lead { max-width: 70ch; }

/* Layout global: formulaire + aside (OK d'être en 2 colonnes sur grands écrans) */
.contact-grid { row-gap: 1.2rem; }
.contact-col { display: flex; flex-direction: column; gap: 1rem; }

/* Formulaire: TOUT EN COLONNE, TOUJOURS */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* On garde .form-row pour la sémantique mais on n'en fait pas un grid/2 colonnes */
.form-row { display: block; }
.form-field { display: flex; flex-direction: column; gap: .45rem; width: 100%; }

.form-field label { font-weight: 700; letter-spacing: .2px; }
.req { color: color-mix(in oklab, var(--brand) 70%, var(--text)); }

/* Champs */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="date"],
.contact-form input[type="file"],
.contact-form select,
.contact-form textarea {
  width: 100%;
  appearance: none;
  padding: .9rem 1rem;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: var(--bg-soft);
  color: var(--text);
  outline: none;
  transition: box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.contact-form textarea { resize: vertical; min-height: 168px; }
.contact-form input::file-selector-button{
  border: 1px solid var(--stroke);
  border-radius: 10px;
  padding: .55rem .85rem;
  background: #fff;
  cursor: pointer;
}

/* Focus states accessibles */
.contact-form :focus {
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--brand-2) 30%, transparent);
  border-color: color-mix(in oklab, var(--brand-2) 60%, var(--stroke));
}

/* Espacements fins pour confort tactile (mobile + desktop) */
.contact-form .cta-row { gap: .8rem; }
.form-status { color: var(--muted); min-height: 1.2em; }

/* Honeypot anti-bot (invisible) */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Consentement */
.form-consent .checkbox {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .6rem;
  align-items: start;
  color: var(--muted);
}
.form-consent input[type="checkbox"]{ transform: translateY(.15rem); }

/* Aside infos */
.contact-aside .contact-infos { list-style: none; margin: 0; padding: 0; }
.contact-aside .contact-infos li { margin: .35rem 0; color: var(--muted); }

/* Responsive: le formulaire reste en colonne partout.
   On autorise le split form/aside sur écrans larges (confort de lecture). */
@media (min-width: 901px){
  .contact-grid > .contact-col:first-child { grid-column: span 8; }
  .contact-grid > .contact-aside { grid-column: span 4; }
}

/* Petits écrans: tout en une colonne, respiration préservée */
@media (max-width: 900px){
  .contact-grid > .contact-col,
  .contact-grid > .contact-aside { grid-column: 1 / -1; }
}

/* Très petits écrans: marges et tailles légèrement adaptées */
@media (max-width: 420px){
  .contact-form input[type="text"],
  .contact-form input[type="email"],
  .contact-form input[type="date"],
  .contact-form input[type="file"],
  .contact-form select,
  .contact-form textarea { padding: .8rem .9rem; }
  .form-consent .checkbox { gap: .5rem; }
}
/* Champs invalides (contact) */
.contact-form .invalid{
  border-color:#e66;
  background: color-mix(in oklab, #ffecec 75%, var(--bg));
}
.contact-form button[disabled]{ opacity:.7; cursor:not-allowed; }

/* Ajustements selon l'orientation détectée */
.card.landscape .thumb img {
  width: 100%;
  height: auto;
}
.card.portrait .thumb img {
  width: auto;
  height: 100%;
}

/* ===== Accueil : ligne horizontale scrollable ===== */
/* ===== Accueil : ligne horizontale scrollable ===== */
.scroll-row {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: .5rem;
}
.scroll-row::-webkit-scrollbar { display: none; }

.scroll-row .card {
  flex: 0 0 240px;      /* largeur "carte" ≈ mini-tile */
  min-width: 200px;
  scroll-snap-align: start;
}

/* Container de l'image avec ratio fixe */
.scroll-row .card .thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;  /* choisis 1/1, 3/4, 16/9 selon ce que tu préfères */
  overflow: hidden;
}

/* Image recadrée/zoomée dans la preview */
.scroll-row .card .thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;    /* zoom auto */
}


/* Flèches de navigation */
.scroll-controls {
  position: relative;
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  margin-top: .5rem;
}
.scroll-btn {
  border: 1px solid var(--stroke);
  background: var(--bg-soft);
  border-radius: 50%;
  width: 36px; height: 36px;
  font-size: 1.2rem;
  color: var(--text);
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: background .2s ease;
}
.scroll-btn:hover { background: var(--accent); }

.scroll-btn:disabled {
  opacity: .4;
  cursor: default;
  pointer-events: none;
}

/* ===== Services: 2 colonnes fixes, 2x2 aligné ===== */
.services .offers-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  align-items: start;
}

/* Les cartes prennent la colonne qui vient, pas 100% */
.services .offers-grid .offer-card{
  grid-column: auto;
}

/* Mobile: 1 par ligne */
@media (max-width: 900px){
  .services .offers-grid{
    grid-template-columns: 1fr;
  }
}

/* Patch anti-régression: neutralise l’ancienne règle 12 colonnes */
@media (min-width: 901px){
  .offers-grid .offer-card{ grid-column: auto !important; }
}

/* =========================
   Bouton rose responsive
   ========================= */
/* Utilisation: <a class="btn rose">…</a> ou <button class="btn rose">…</button> */
.btn.rose{
  padding: clamp(.75rem, 1.8vw, .95rem) clamp(1rem, 2.4vw, 1.25rem);
  font-size: clamp(.95rem, 1.6vw, 1rem);
  border-radius: 14px;
  font-weight: 800;
  border: none;
  color: #2b2240;

  /* Dégradé rose standard, doux mais saturé */
  background: linear-gradient(
    135deg,
    #ff9ad5 0%,
    #ff6fb1 30%,
    #ff4f8b 70%,
    #f3d7ff 100%
  );

  box-shadow:
    0 6px 14px rgba(255, 105, 180, 0.25),
    inset 0 0 6px rgba(255, 255, 255, 0.22);

  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease, background .22s ease;
}

/* ===== Hover visible mais sobre ===== */
.btn.rose:hover{
  transform: translateY(-2px);

  /* Légère montée en intensité + shift de gradient pour un vrai "clickable" */
  background: linear-gradient(
    135deg,
    #ffb2e1 0%,
    #ff7fc0 28%,
    #ff5a9a 65%,
    #efd1ff 100%
  );

  filter: saturate(1.08);

  box-shadow:
    0 8px 20px rgba(255, 105, 180, 0.33),
    inset 0 0 8px rgba(255, 255, 255, 0.25);
}

.btn.rose:active{
  transform: translateY(0);
  box-shadow:
    0 4px 12px rgba(255, 105, 180, 0.25),
    inset 0 0 5px rgba(255, 255, 255, 0.18);
}

.btn.rose:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px rgba(243, 215, 255, 0.8),
    0 6px 14px rgba(255, 105, 180, 0.28);
}


/* Mobile: meilleure zone tactile, pas de zoom typographique agressif */
@media (max-width: 480px){
  .btn.rose{
    border-radius: 16px;
    line-height: 1.1;
  }
}

/* Accessibilité: pas d’animation si l’utilisateur n’en veut pas */
@media (prefers-reduced-motion: reduce){
  .btn.rose{
    transition: none;
    transform: none;
  }
}

/* ===== Animation rotation infinie du logo étoile ===== */
.brand-logo img {
  display: block;
  width: 100%;
  height: auto;
  animation: spinStar 12s linear infinite;
  transform-origin: center;
}

/* Ajustement pour les petits écrans */
@media (max-width: 600px) {
  .brand-logo img {
    animation-duration: 16s; /* un peu plus lent sur mobile */
  }
}

/* Keyframes de rotation */
@keyframes spinStar {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ===== À propos : layout élégant ===== */

/* Hero plus aérien */
.about-hero .lead{
  max-width: 70ch;
  color: var(--muted);
}

/* Grille principale : portrait + bloc bio équilibrés */
.apropos .about-grid{
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(1rem, 4vw, 2rem);
  align-items: stretch;
}

/* Carte portrait soyeuse avec cadre dégradé */
.about-portrait{
  position: relative;
  border-radius: 20px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.about-portrait img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: var(--bg-soft);
}

/* Bloc bio en carte verre, lisible et chic */
.about-bio{
  align-self: stretch;
  border: 1px solid var(--stroke);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.62));
  backdrop-filter: saturate(1.05) blur(6px);
  box-shadow: var(--shadow);
  padding: clamp(1rem, 3.5vw, 1.4rem);
}
.about-bio h2{
  margin-top: .2rem;
  margin-bottom: .6rem;
  letter-spacing: .2px;
}
.about-bio p{
  color: var(--muted);
  margin: 0 0 1rem;
}

/* Section compétences/outils en cartes respirantes */
.skills{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(1rem, 3vw, 1.4rem);
  margin-top: .6rem;
}
.skill-block{
  border: 1px solid var(--stroke);
  border-radius: 16px;
  background: color-mix(in oklab, #ffffff 82%, transparent);
  padding: clamp(.9rem, 3vw, 1.2rem);
  box-shadow: var(--shadow);
}
.skill-block h3{ margin: .2rem 0 .6rem; }

/* “Chips” propres, alignées au thème */
.chips{
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .6rem;
  margin: 0;
  padding: 0;
}
.chips li{
  padding: .45rem .7rem;
  border: 1px solid var(--stroke);
  border-radius: 999px;
  background: var(--bg-soft);
  color: var(--text);
  font-size: .95rem;
}

/* Liens en grille de boutons élégants */
.links{
  list-style: none;
  margin: .6rem 0 0;
  padding: 0;
  display: grid;
  gap: .8rem;
}
.links a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .75rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--stroke);
  background: var(--bg-soft);
  font-weight: 700;
  color: var(--text);
  transition: background .2s ease, transform .2s ease;
  text-align: center;
}
.links a:hover{
  background: color-mix(in oklab, var(--bg-soft) 80%, var(--accent));
  transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 1000px){
  .apropos .about-grid{
    grid-template-columns: 1fr;
  }
  .links{ grid-template-columns: 1fr; }
}

/* ===== Contact page : nouvelle grille côte à côte ===== */
.contact-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--gap);
  align-items: start;
}

/* Responsive : une colonne sur mobile */
@media (max-width: 900px) {
  .contact-layout {
    grid-template-columns: 1fr;
  }
}

/* ===== Menu burger : fond plus opaque sur mobile ===== */
@media (max-width: 900px) {
  nav ul {
    /* remplace la transparence vaporeuse par un fond plus dense */
    background: rgba(255, 255, 255, 1); /* blanc quasi plein, toujours un peu doux */
    backdrop-filter: blur(12px) saturate(1.1); /* garde l’effet verre dépoli */
    -webkit-backdrop-filter: blur(12px) saturate(1.1);
  }
}

/* ===== Lightbox plein écran ===== */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(7, 4, 18, 0.78); /* fond sombre */
}

.lightbox-overlay[hidden] {
  display: none;
}

.lightbox-overlay img {
  max-width: min(95vw, 1200px);
  max-height: 80vh;
  border-radius: 18px;
  border: 1px solid var(--stroke);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.55);
  background: #fff;
}

.lightbox-close {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, 0.92);
  color: #2b2240;
  font-size: 1.4rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow);
}

.lightbox-close:hover {
  background: #fff;
}

#lightbox-caption {
  margin-top: .9rem;
  max-width: 60ch;
  text-align: center;
  color: #f8f2ff;
  font-size: .95rem;
}

@keyframes bg-wave {
  0%   { transform: translate3d(-10vw, -6vh, 0) scale(1.03); }
  25%  { transform: translate3d(8vw, -3vh, 0)  scale(1.05); }
  50%  { transform: translate3d(12vw, 8vh, 0)  scale(1.06); }
  75%  { transform: translate3d(-6vw, 5vh, 0)  scale(1.04); }
  100% { transform: translate3d(-12vw, -4vh, 0) scale(1.03); }
}