/* =========================================================
   Chaly Communication — feuille de style
   Pour changer les couleurs du site, modifiez simplement
   les valeurs ci-dessous (--encre, --corail, etc.).
   ========================================================= */

:root {
  /* Palette officielle de la charte Chaly 2026 */
  --encre:   #1F1B4D;  /* Nuit indigo : texte et sections sombres */
  --corail:  #FF6B57;  /* Corail : accent (boutons, bulle du logo) */
  --soleil:  #FFC247;  /* Soleil : « communication », petits détails */
  --creme:   #FFF7EE;  /* Crème : fond principal */

  /* Nuances dérivées de la palette */
  --sable:   #F8EADB;  /* fond des sections teintées */
  --corail-fonce: #F0503B; /* survol des boutons */
  --gris:    #55517A;  /* texte secondaire */
  --blanc:   #ffffff;

  --titre: "Lora", Georgia, serif;                 /* titres éditoriaux (italique) */
  --texte: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;

  --rayon: 22px;
  --ombre: 0 14px 40px rgba(31, 27, 77, 0.12);
}

/* ---------- Bases ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0;
  background: var(--creme);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 17px;
  line-height: 1.65;
}
img { max-width: 100%; display: block; }
/* Sécurité anti-débordement sur iPhone : vidéos jamais plus larges que leur bloc, pas de défilement horizontal */
video { max-width: 100%; }
html, body { overflow-x: hidden; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }
a { color: inherit; }
/* Titres éditoriaux : Lora Italic (charte) — sous-titres : Poppins */
h1, h2 { font-family: var(--titre); font-style: italic; font-weight: 600; line-height: 1.12; margin: 0 0 .6em; }
h1 { font-size: clamp(2.3rem, 5.5vw, 3.9rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); }
h3 { font-family: var(--texte); font-weight: 600; font-size: 1.2rem; line-height: 1.3; margin: 0 0 .6em; }
em { color: var(--corail); }
p { margin: 0 0 1em; }
.hidden { display: none; }

.container { width: min(1120px, 100% - 32px); margin-inline: auto; }

.eyebrow {
  display: inline-block;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--corail);
  margin-bottom: .8em;
}

/* Pastille « opérationnel » : point vert qui pulse doucement */
.status {
  display: inline-flex; align-items: center; gap: 10px;
  padding: .4em 1em .4em .8em; margin: 0 0 1.2em;
  border-radius: 999px;
  background: var(--blanc);
  box-shadow: var(--ombre);
  font-size: .88rem; font-weight: 600;
}
.status__dot {
  display: inline-block; flex: none;
  width: 10px; height: 10px; border-radius: 50%;
  background: #22C55E;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, .6);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  70%  { box-shadow: 0 0 0 9px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
.section__intro a { color: var(--corail); font-weight: 600; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-block;
  padding: .85em 1.5em;
  border-radius: 999px;
  background: var(--corail);
  color: var(--blanc);
  font-weight: 700;
  text-decoration: none;
  border: 2px solid var(--corail);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  transition: transform .2s, background .2s, color .2s;
}
.btn:hover { transform: translateY(-2px); background: var(--corail-fonce); border-color: var(--corail-fonce); }
.btn--small { padding: .5em 1.1em; font-size: .95rem; }
.btn--ghost { background: transparent; color: var(--encre); border-color: var(--encre); }
.btn--ghost:hover { background: var(--encre); color: var(--blanc); border-color: var(--encre); }
.btn--ghost-light { background: transparent; color: var(--creme); border-color: rgba(255,247,238,.5); }
.btn--ghost-light:hover { background: var(--creme); color: var(--encre); border-color: var(--creme); }

/* ---------- Barre du haut ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 247, 238, .9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(31, 27, 77, .08);
}
.topbar__inner { display: flex; align-items: center; justify-content: space-between; height: 70px; }
/* Logo : bulle « C » + CHALY + communication (recréé d'après la charte) */
.logo {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none;
  margin: 0;
  color: var(--encre);
}
.logo__mark { width: 40px; height: 40px; flex: none; color: var(--encre); }
.logo__mark { --dots: var(--corail); }
.logo__words { display: flex; flex-direction: column; line-height: 1; }
.logo__name { font-weight: 700; font-size: 1.35rem; letter-spacing: .06em; }
.logo__sub  { font-weight: 500; font-size: .66rem; letter-spacing: .13em; color: var(--corail); margin-top: 3px; }

/* Version sur fond indigo : bulle corail, CHALY crème, communication soleil */
.logo--light { color: var(--creme); }
.logo--light .logo__mark { color: var(--corail); }
.logo--light .logo__mark { --dots: var(--creme); }
.logo--light .logo__sub { color: var(--soleil); }

.nav { display: flex; align-items: center; gap: 1.8rem; }
.nav a:not(.btn) { text-decoration: none; font-weight: 500; }
.nav a:not(.btn):hover { color: var(--corail); }

.menu-btn { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.menu-btn span { display: block; width: 24px; height: 2px; background: var(--encre); margin: 5px 0; transition: .3s; }

/* ---------- Accueil ---------- */
.hero { padding: clamp(48px, 8vw, 110px) 0; overflow: hidden; }
.hero__inner { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 48px; align-items: center; }
.hero__lead { font-size: 1.15rem; color: var(--gris); max-width: 34em; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.6em; }

.hero__visual { position: relative; aspect-ratio: 4 / 5; }
.hero__card {
  position: absolute; inset: 8% 6% 0 10%;
  border-radius: 200px 200px var(--rayon) var(--rayon);
  background: var(--encre);
  display: grid; place-items: center;
  padding: 24px;
  box-shadow: var(--ombre);
}
.hero__mark { width: 58%; color: var(--corail); }
.hero__mark { --dots: var(--creme); }
.bubble {
  position: absolute; z-index: 2;
  background: var(--blanc);
  padding: .5em 1em;
  border-radius: 999px;
  font-weight: 700; font-size: .9rem;
  box-shadow: var(--ombre);
  animation: flotte 5s ease-in-out infinite;
}
.bubble::before { content: "● "; color: var(--corail); }
.bubble--b::before { color: var(--soleil); }
.bubble--a { top: 6%;  left: 0; }
.bubble--b { top: 44%; right: -2%; animation-delay: -1.6s; }
.bubble--c { bottom: 10%; left: 2%; animation-delay: -3.2s; }
@keyframes flotte { 50% { transform: translateY(-10px); } }

/* ---------- Sections ---------- */
.section { padding: clamp(64px, 9vw, 110px) 0; }
.section--tinted { background: var(--sable); }
.section--dark { background: var(--encre); color: var(--creme); }
.section--dark .eyebrow { color: var(--soleil); }
.section__intro { color: var(--gris); max-width: 40em; margin-bottom: 2.2em; }
.section--dark .section__intro { color: rgba(255,247,238,.7); }

.grid { display: grid; gap: 24px; margin-top: 2rem; }
.grid--offers   { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 2.6rem; align-items: stretch; }
.grid--videos   { grid-template-columns: repeat(3, minmax(0, 280px)); justify-content: center; margin-top: 0; }


/* À propos */
.about { max-width: 760px; }
.steps { list-style: none; padding: 0; margin: 2rem 0 0; counter-reset: etape; }
.steps li {
  counter-increment: etape;
  position: relative;
  padding: 0 0 1.4rem 64px;
}
.steps li::before {
  content: counter(etape, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  font-family: var(--titre); font-style: italic; font-size: 1.6rem; font-weight: 600;
  color: var(--corail);
}
.steps strong { display: block; }
.steps span { color: var(--gris); }

/* Services : carrousel qui défile en continu (pause au survol) */
.carousel {
  overflow-x: auto;
  scrollbar-width: none;
  padding: 16px 0 36px;
  /* fondu doux sur les bords gauche et droit */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.carousel__track {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 22px;
  width: max-content;
}
.carousel::-webkit-scrollbar { display: none; }

.section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.section__head h2 { margin-bottom: 0; }
.carousel__nav { display: flex; gap: 10px; flex: none; }
.carousel__btn {
  width: 48px; height: 48px; border-radius: 50%;
  border: 1.5px solid var(--encre); background: transparent; color: var(--encre);
  font: inherit; font-size: 1.2rem; cursor: pointer;
  transition: background .2s, color .2s, transform .2s;
}
.carousel__btn:hover { background: var(--encre); color: var(--creme); transform: scale(1.06); }

.svc {
  flex: 0 0 340px;
  display: flex; flex-direction: column;
  background: var(--blanc);
  border-radius: var(--rayon);
  overflow: hidden;
  box-shadow: var(--ombre);
  transition: transform .35s ease, box-shadow .35s ease;
}
.svc:hover { transform: translateY(-8px); box-shadow: 0 24px 50px rgba(31, 27, 77, .2); }
.svc__media { aspect-ratio: 4 / 3; overflow: hidden; }
.svc__media > * { width: 100%; height: 100%; transition: transform .5s ease; }
.svc:hover .svc__media > * { transform: scale(1.08); }   /* l'image s'agrandit au survol */
.svc__body { padding: 22px 24px 26px; }
.svc__body p { margin: 0; color: var(--gris); font-size: .95rem; }
.svc--featured { background: var(--encre); color: var(--creme); }
.svc--featured .svc__body p { color: rgba(255,247,238,.78); }
.svc__tag {
  display: inline-block; margin-bottom: .8em;
  background: var(--soleil); color: var(--encre);
  font-size: .75rem; font-weight: 700;
  padding: .25em .8em; border-radius: 999px;
}

/* ---------- Illustrations animées des cartes ---------- */
.tile { position: relative; display: grid; place-items: center; overflow: hidden; }
.tile--encre  { background: var(--encre); }
.tile--soleil { background: var(--soleil); }
.tile--corail { background: var(--corail); }
.tile--sable  { background: var(--sable); }

/* 1. Vidéo : un écran horizontal + un téléphone vertical qui « tournent » */
.anim-video { grid-template-columns: auto auto; gap: 18px; align-items: center; justify-content: center; }
.frame {
  position: relative;
  border: 3px solid var(--creme); border-radius: 12px;
  display: grid; place-items: center;
}
.frame--h { width: 118px; aspect-ratio: 16 / 9; }
.frame--v { width: 74px; aspect-ratio: 9 / 16; animation: flotte 4s ease-in-out infinite; }
.frame__play {
  width: 0; height: 0;
  border-left: 16px solid var(--corail);
  border-top: 10px solid transparent; border-bottom: 10px solid transparent;
  margin-left: 4px;
  animation: battement 1.6s ease-in-out infinite;
}
.frame__bar {
  position: absolute; left: 8px; right: 8px; bottom: 7px; height: 4px; border-radius: 2px;
  background: rgba(255,247,238,.25); overflow: hidden;
}
.frame__bar::after {
  content: ""; position: absolute; inset: 0; background: var(--soleil);
  transform-origin: left; animation: progression 3.2s linear infinite;
}
.frame--v .frame__bar::after { animation-delay: -1.4s; }
.frame__rec {
  position: absolute; top: 7px; left: 8px;
  font-size: .55rem; font-weight: 700; letter-spacing: .08em; color: var(--creme);
}
.frame__rec::before {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 4px;
  border-radius: 50%; background: var(--corail); animation: clignote 1s steps(1) infinite;
}

/* 2. Rédaction : un document qui s'écrit ligne par ligne */
.doc {
  width: 46%; aspect-ratio: 3 / 4;
  background: var(--blanc); border-radius: 10px;
  box-shadow: 0 12px 30px rgba(31, 27, 77, .18);
  padding: 16px 14px; display: flex; flex-direction: column; gap: 9px;
  transform: rotate(-3deg);
}
.doc__title { height: 9px; width: 60%; border-radius: 4px; background: var(--encre); margin-bottom: 4px; }
.doc__line {
  height: 6px; border-radius: 3px; background: var(--sable);
  position: relative; overflow: hidden;
}
.doc__line::after {
  content: ""; position: absolute; inset: 0; background: var(--corail);
  transform-origin: left; transform: scaleX(0);
  animation: ecriture 4.8s ease-in-out infinite;
}
.doc__line:nth-child(3)::after { animation-delay: .5s; }
.doc__line:nth-child(4)::after { animation-delay: 1s; }
.doc__line:nth-child(5)::after { animation-delay: 1.5s; }
.doc__line--short { width: 55%; }

/* 3. Photo : l'appareil se déclenche avec un flash */
.camera {
  width: 38%; fill: none; stroke: var(--creme); stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round;
  animation: declic 2.8s ease-in-out infinite;
}
.camera__lens { transform-origin: 32px 34px; animation: objectif 2.8s ease-in-out infinite; }
.flash {
  position: absolute; inset: 0; background: var(--blanc);
  opacity: 0; animation: flash 2.8s ease-out infinite;
}
.spark {
  position: absolute; width: 10px; height: 10px;
  background: var(--soleil);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation: etincelle 2.8s ease-in-out infinite;
}
.spark--a { top: 20%; left: 22%; }
.spark--b { top: 26%; right: 20%; width: 14px; height: 14px; animation-delay: .2s; }
.spark--c { bottom: 22%; right: 30%; animation-delay: .4s; }

/* 4. Textile : un t-shirt qui se balance, logo qui change de couleur */
.shirt { width: 46%; overflow: visible; transform-origin: 50% 10%; animation: balance 3.6s ease-in-out infinite; }
.shirt__body { fill: var(--encre); }
.shirt__logo path { stroke: var(--corail); fill: var(--corail); animation: couleurs 6s steps(1) infinite; }
.shirt__logo path:first-child { fill: none; animation-name: couleurs-trait; }

/* 5. Site vitrine : un mini site qui défile dans le navigateur */
.mock {
  width: 64%; aspect-ratio: 4 / 3;
  background: var(--blanc); border-radius: 10px;
  box-shadow: 0 14px 32px rgba(0, 0, 0, .25);
  padding: 8px; display: flex; flex-direction: column; gap: 6px;
}
.mock__bar { display: flex; gap: 4px; flex: none; }
.mock__bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--sable); }
.mock__bar i:first-child { background: var(--corail); }
.mock__screen { flex: 1; overflow: hidden; border-radius: 6px; }
.mock__page { display: flex; flex-direction: column; gap: 7px; animation: scroll-site 6s ease-in-out infinite; }
.mock__hero { height: 52px; border-radius: 6px; background: var(--encre); flex: none; }
.mock__line { height: 6px; border-radius: 3px; background: var(--sable); flex: none; }
.mock__line--short { width: 60%; }
.mock__btn { width: 36%; height: 11px; border-radius: 999px; background: var(--corail); flex: none; }
.mock__cards { display: flex; gap: 5px; flex: none; }
.mock__cards i { flex: 1; height: 30px; border-radius: 5px; background: var(--soleil); }
.mock__cards i:nth-child(2) { background: var(--corail); }
.mock__cards i:nth-child(3) { background: var(--encre); }

/* 6. Accompagnement A à Z : des barres qui montent + courbe de progression */
.chart {
  position: relative;
  width: 56%; aspect-ratio: 4 / 3;
  display: flex; align-items: flex-end; gap: 10%;
  border-bottom: 3px solid var(--encre);
  padding: 0 6%;
}
.chart__bar {
  flex: 1; border-radius: 6px 6px 0 0; background: var(--encre);
  transform-origin: bottom; animation: croissance 4s ease-in-out infinite;
}
.chart__bar:nth-child(1) { height: 30%; }
.chart__bar:nth-child(2) { height: 48%; animation-delay: .15s; }
.chart__bar:nth-child(3) { height: 66%; animation-delay: .3s; }
.chart__bar:nth-child(4) { height: 92%; animation-delay: .45s; background: var(--corail); }
.chart__trend {
  position: absolute; left: -4%; top: -14%; width: 108%;
  fill: none; stroke: var(--corail); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 140; animation: trace 4s ease-in-out infinite;
}

/* ---------- Les mouvements ---------- */
@keyframes battement  { 50% { transform: scale(1.25); } }
@keyframes progression { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes clignote   { 50% { opacity: 0; } }
@keyframes ecriture   { 0% { transform: scaleX(0); } 30%, 80% { transform: scaleX(1); } 100% { transform: scaleX(0); opacity: 0; } }
@keyframes declic     { 0%, 70%, 100% { transform: scale(1); } 76% { transform: scale(.92); } }
@keyframes objectif   { 0%, 70%, 100% { transform: scale(1); } 76% { transform: scale(.6); } }
@keyframes flash      { 0%, 74% { opacity: 0; } 77% { opacity: .85; } 100% { opacity: 0; } }
@keyframes etincelle  { 0%, 74% { transform: scale(0) rotate(0); } 82% { transform: scale(1.2) rotate(45deg); } 100% { transform: scale(0) rotate(90deg); } }
@keyframes balance    { 50% { transform: rotate(-5deg); } 0%, 100% { transform: rotate(5deg); } }
@keyframes couleurs   { 0% { stroke: var(--corail); fill: var(--corail); } 33% { stroke: var(--soleil); fill: var(--soleil); } 66% { stroke: var(--creme); fill: var(--creme); } }
@keyframes couleurs-trait { 0% { stroke: var(--corail); } 33% { stroke: var(--soleil); } 66% { stroke: var(--creme); } }
@keyframes scroll-site { 0%, 15% { transform: translateY(0); } 50%, 65% { transform: translateY(-58px); } 100% { transform: translateY(0); } }
@keyframes croissance { 0% { transform: scaleY(.1); } 40%, 85% { transform: scaleY(1); } 100% { transform: scaleY(.1); } }
@keyframes trace      { 0% { stroke-dashoffset: 140; } 45%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 140; } }

/* Qui sommes-nous */
.team { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 64px; align-items: center; }
.team__lead { font-size: 1.08rem; color: var(--gris); }
.team__roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 1.8rem 0; }
.role {
  background: var(--blanc);
  border-radius: var(--rayon);
  padding: 20px 22px;
  border-top: 4px solid var(--corail);
  box-shadow: var(--ombre);
}
.role + .role { border-top-color: var(--soleil); }
.role h3 { margin-bottom: .4em; }
.role h3 span { display: block; font-size: .8rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--gris); margin-top: 2px; }
.role p { margin: 0; font-size: .95rem; color: var(--gris); }
.team__block { margin-top: 1.4rem; }
.team__label { font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .6em; }
.chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li {
  font-size: .88rem; font-weight: 500;
  padding: .4em .95em; border-radius: 999px;
  background: var(--encre); color: var(--creme);
}
.chips--refs li { background: var(--blanc); color: var(--encre); border: 1px solid rgba(31,27,77,.12); }
.team__quote {
  margin: 2rem 0 0; padding-left: 18px;
  border-left: 3px solid var(--corail);
  font-family: var(--titre); font-style: italic; font-size: 1.25rem; line-height: 1.45;
}

/* Vidéo du duo + flèches manuscrites */
.duo { position: relative; padding: 64px 0 0 92px; max-width: 440px; justify-self: center; width: 100%; }
.duo__frame {
  border-radius: var(--rayon); overflow: hidden;
  box-shadow: var(--ombre);
  transform: rotate(1.5deg);
  background: var(--encre);
}
.duo__frame video { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 0%; }
.duo__name {
  position: absolute;
  font-family: "Caveat", cursive; font-weight: 600; font-size: 2rem; line-height: 1;
  color: var(--encre);
}
.duo__name--charlotte { top: 0; right: 4px; transform: rotate(-4deg); }
.duo__name--lilly { left: 0; top: 46%; transform: rotate(-6deg); }
.duo__arrow { position: absolute; fill: none; stroke: var(--encre); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; z-index: 2; }
.duo__arrow--charlotte { width: 58px; top: 30px; right: 96px; }
.duo__arrow--lilly { width: 104px; left: 6px; top: calc(46% - 78px); }

/* ---------- Notre méthode : frise animée ---------- */
.method__intro { max-width: 760px; }
.method { position: relative; margin-top: 3rem; --centre: calc((100% - 56px) / 6); }
/* rail gris + trait corail qui se dessine */
.method::before, .method::after {
  content: ""; position: absolute; top: 40px; left: var(--centre); right: var(--centre); height: 3px; border-radius: 2px;
}
.method::before { background: rgba(31, 27, 77, .12); }
.method::after { background: var(--corail); transform: scaleX(0); transform-origin: left; transition: transform 1.6s cubic-bezier(.6,0,.2,1) .2s; }
.method.is-visible::after { transform: scaleX(1); }
/* point lumineux qui voyage d'une étape à l'autre */
.method__dot {
  position: absolute; top: 35px; left: var(--centre); z-index: 2;
  width: 13px; height: 13px; margin-left: -6px; border-radius: 50%;
  background: var(--soleil); box-shadow: 0 0 0 5px rgba(255, 194, 71, .35);
  opacity: 0;
}
.method.is-visible .method__dot { animation: voyage 4.5s ease-in-out 1.8s infinite; }
@keyframes voyage {
  0%   { left: var(--centre); opacity: 0; }
  8%   { opacity: 1; }
  45%  { left: 50%; }
  85%  { left: calc(100% - var(--centre)); opacity: 1; }
  100% { left: calc(100% - var(--centre)); opacity: 0; }
}
.method__list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; position: relative; }
.method__step {
  text-align: center;
  opacity: 0; transform: translateY(28px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1);
}
.method.is-visible .method__step { opacity: 1; transform: none; }
.method.is-visible .method__step:nth-child(2) { transition-delay: .7s; }
.method.is-visible .method__step:nth-child(3) { transition-delay: 1.4s; }
.method__step p { color: var(--gris); max-width: 28ch; margin: 0 auto; }
.method__num { display: block; margin: 18px 0 4px; font-family: var(--titre); font-style: italic; font-size: 1.3rem; font-weight: 600; color: var(--corail); }
.method__icon {
  position: relative; z-index: 1;
  width: 82px; height: 82px; margin: 0 auto;
  border-radius: 50%; background: var(--encre);
  box-shadow: 0 0 0 8px var(--sable);
  transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
.method__step:hover .method__icon { transform: scale(1.12) rotate(-4deg); }
/* onde qui pulse quand le point passe */
.method__icon::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--corail); opacity: 0;
}
.method.is-visible .method__icon::after { animation: onde 4.5s ease-out infinite; }
.method.is-visible .method__step:nth-child(1) .method__icon::after { animation-delay: 1.9s; }
.method.is-visible .method__step:nth-child(2) .method__icon::after { animation-delay: 3.8s; }
.method.is-visible .method__step:nth-child(3) .method__icon::after { animation-delay: 5.6s; }
@keyframes onde { 0% { transform: scale(1); opacity: .9; } 25%, 100% { transform: scale(1.5); opacity: 0; } }

/* Icône 1 : deux bulles de conversation qui « écrivent » à tour de rôle */
.bulle {
  position: absolute; display: flex; align-items: center; justify-content: center; gap: 3px;
  width: 34px; height: 22px; border-radius: 11px;
}
.bulle--a { left: 13px; top: 18px; background: var(--soleil); border-bottom-left-radius: 3px; animation: pop 2.8s ease-in-out infinite; }
.bulle--b { right: 12px; bottom: 18px; background: var(--creme); border-bottom-right-radius: 3px; animation: pop 2.8s ease-in-out 1.4s infinite; }
.bulle i { width: 4px; height: 4px; border-radius: 50%; background: var(--encre); animation: tape 1.4s ease-in-out infinite; }
.bulle i:nth-child(2) { animation-delay: .15s; }
.bulle i:nth-child(3) { animation-delay: .3s; }
.bulle--b i { animation-delay: .7s; }
.bulle--b i:nth-child(2) { animation-delay: .85s; }
.bulle--b i:nth-child(3) { animation-delay: 1s; }
@keyframes tape { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-3px); } }
@keyframes pop  { 0%, 100% { transform: scale(1); } 10% { transform: scale(1.12); } 20% { transform: scale(1); } }

/* Icône 2 : une liste dont les cases se cochent une à une */
.icon-plan { display: flex; flex-direction: column; justify-content: center; gap: 7px; padding-left: 22px; }
.todo { display: flex; align-items: center; gap: 7px; }
.todo b { position: relative; width: 10px; height: 10px; border: 2px solid var(--soleil); border-radius: 3px; }
.todo b::after { content: ""; position: absolute; inset: 1px; border-radius: 1px; background: var(--corail); transform: scale(0); animation: coche 3.6s ease infinite; }
.todo:nth-child(2) b::after { animation-delay: .5s; }
.todo:nth-child(3) b::after { animation-delay: 1s; }
.todo i { height: 4px; width: 26px; border-radius: 2px; background: var(--creme); opacity: .85; }
.todo:nth-child(2) i { width: 20px; }
@keyframes coche { 0%, 10% { transform: scale(0); } 20%, 80% { transform: scale(1); } 95%, 100% { transform: scale(0); } }

/* Icône 3 : un cercle qui se trace puis une coche de validation */
.icon-valid { display: grid; place-items: center; }
.icon-valid svg { width: 46px; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.valid__ring  { stroke: var(--soleil); stroke-width: 3; stroke-dasharray: 95; transform: rotate(-90deg); transform-origin: center; animation: anneau 3.6s ease-in-out infinite; }
.valid__check { stroke: var(--corail); stroke-width: 3.5; stroke-dasharray: 24; animation: coche-trait 3.6s ease-in-out infinite; }
@keyframes anneau      { 0% { stroke-dashoffset: 95; } 35%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 95; } }
@keyframes coche-trait { 0%, 30% { stroke-dashoffset: 24; } 50%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 24; } }

/* Portfolio */
.shot { margin: 0; position: relative; border-radius: var(--rayon); overflow: hidden; background: var(--sable); }
.shot img, .shot__placeholder { width: 100%; height: 100%; object-fit: cover; }
.shot__placeholder {
  display: grid; place-items: center;
  color: var(--gris); font-weight: 700;
  background: repeating-linear-gradient(45deg, #F6E6D4 0 12px, #FBF0E3 12px 24px);
}
.shot figcaption {
  position: absolute; left: 12px; bottom: 12px; right: 12px;
  background: rgba(31,27,77,.82); color: var(--creme);
  font-size: .85rem; padding: .45em .9em; border-radius: 10px;
  opacity: 0; transform: translateY(8px); transition: .25s;
}
/* Vidéos : lecteur vertical 9:16, titre sous la vidéo */
.shot--video { background: none; overflow: visible; border-radius: 0; }
.shot__frame {
  position: relative; overflow: hidden;
  border-radius: var(--rayon); background: var(--encre); box-shadow: var(--ombre);
  transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease;
}
.shot--video video {
  width: 100%; aspect-ratio: 9 / 16; object-fit: cover; display: block;
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
/* Au survol : la vidéo se soulève, s'agrandit et s'entoure de jaune */
.shot--video:hover .shot__frame {
  transform: translateY(-10px) rotate(-1deg);
  box-shadow: 0 0 0 3px var(--soleil), 0 28px 56px rgba(31, 27, 77, .28);
}
.shot--video:nth-child(2):hover .shot__frame { transform: translateY(-10px) rotate(1deg); }
.shot--video:hover video { transform: scale(1.08); }
.shot--video figcaption { transition: color .3s ease, transform .3s ease; }
.shot--video:hover figcaption { color: var(--corail); transform: translateX(6px); }
/* Gros bouton lecture au centre (disparaît pendant la lecture) */
.shot__play {
  position: absolute; left: 50%; top: 50%;
  width: 68px; height: 68px; margin: -34px 0 0 -34px;
  border-radius: 50%; background: var(--corail);
  box-shadow: 0 10px 30px rgba(255, 107, 87, .5);
  border: 0; padding: 0; cursor: pointer;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .3s ease;
}
.shot__play::before {
  content: ""; position: absolute; left: 27px; top: 22px;
  border-left: 18px solid var(--creme); border-top: 12px solid transparent; border-bottom: 12px solid transparent;
}
.shot__play::after {
  content: ""; position: absolute; inset: -8px; border-radius: 50%;
  border: 2px solid var(--creme); opacity: .7;
  animation: onde 2.4s ease-out infinite;
}
.shot--video:hover .shot__play { transform: scale(1.18); }
/* Reel Instagram : même cadre vertical que les autres vidéos */
.shot__frame--insta { aspect-ratio: 9 / 16; background: var(--blanc); }
.shot__link { color: var(--corail); font-weight: 600; }
.shot__frame--insta iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.shot__frame.is-playing .shot__play { opacity: 0; transform: scale(.6); pointer-events: none; }
.shot__play:focus-visible { outline: 3px solid var(--soleil); outline-offset: 4px; }
.shot--video figcaption {
  position: static; opacity: 1; transform: none;
  background: none; color: var(--encre);
  padding: .8em 0 0; font-size: .95rem; font-weight: 600;
}
.play {
  display: grid; place-items: center;
  width: 64px; height: 64px; margin-bottom: 12px;
  border-radius: 50%; background: var(--encre); color: var(--soleil);
  font-size: 1.3rem; padding-left: 4px;
}
.shot--video .shot__placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.shot:hover figcaption, .shot:focus-within figcaption { opacity: 1; transform: none; }

/* Offres */
.offer {
  position: relative;
  display: flex; flex-direction: column;
  padding: 32px 28px;
  border-radius: var(--rayon);
  border: 1px solid rgba(255,247,238,.18);
}
.offer--featured { background: var(--creme); color: var(--encre); border-color: var(--creme); }
.offer__tag {
  position: absolute; top: -14px; left: 28px; z-index: 2;
  background: var(--soleil); color: var(--encre);
  font-size: .78rem; font-weight: 700;
  padding: .3em .9em; border-radius: 999px;
}
.offer__price { font-family: var(--texte); font-size: 2rem; font-weight: 700; margin: .2em 0 .6em; }
.offer__price small { font-family: var(--texte); font-size: .95rem; font-weight: 400; opacity: .7; }
.offer ul { padding: 0; margin: 0 0 1.8rem; list-style: none; flex: 1; }
.offer li { padding: .45em 0 .45em 1.6em; position: relative; border-bottom: 1px dashed rgba(127,120,140,.35); }
.offer li::before { content: "✓"; position: absolute; left: 0; color: var(--corail); font-weight: 700; }
.offer .btn { align-self: flex-start; }

/* Offre mise en avant : visuel animé (4 vidéos verticales) + effet au survol */
.offer--featured {
  transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease;
  box-shadow: 0 0 0 0 rgba(255, 194, 71, 0);
}
.offer--featured:hover {
  transform: translateY(-10px) scale(1.03);
  box-shadow: 0 0 0 3px var(--soleil), 0 30px 60px rgba(0, 0, 0, .35);
}
.offer__media {
  margin: 6px 0 22px;
  border-radius: 16px; overflow: hidden;
  background: var(--encre);
  aspect-ratio: 16 / 8;
}
.offer__phones {
  height: 100%;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  transition: transform .6s cubic-bezier(.2,.8,.2,1), gap .6s ease;
}
.offer--featured:hover .offer__phones { transform: scale(1.12); gap: 20px; }   /* l'image s'agrandit */
.mini {
  position: relative;
  width: 15%; aspect-ratio: 9 / 16;
  border: 2.5px solid var(--creme); border-radius: 9px;
  display: grid; place-items: center;
  animation: flotte 3.4s ease-in-out infinite;
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.mini:nth-child(2) { animation-delay: -.8s; }
.mini:nth-child(3) { animation-delay: -1.6s; }
.mini:nth-child(4) { animation-delay: -2.4s; }
.mini i {   /* bouton lecture */
  width: 0; height: 0; margin-left: 3px;
  border-left: 11px solid var(--corail);
  border-top: 7px solid transparent; border-bottom: 7px solid transparent;
  transition: transform .3s ease;
}
.mini b {   /* barre de lecture */
  position: absolute; left: 6px; right: 6px; bottom: 6px; height: 3px; border-radius: 2px;
  background: rgba(255,247,238,.25); overflow: hidden;
}
.mini b::after {
  content: ""; position: absolute; inset: 0; background: var(--soleil);
  transform-origin: left; transform: scaleX(.15);
  transition: transform 1.4s ease;
}
/* Au survol : les 4 vidéos s'éventaillent, se lancent et se remplissent */
.offer--featured:hover .mini:nth-child(1) { transform: rotate(-8deg) translateY(4px); }
.offer--featured:hover .mini:nth-child(2) { transform: rotate(-3deg) translateY(-6px); }
.offer--featured:hover .mini:nth-child(3) { transform: rotate(3deg) translateY(-6px); }
.offer--featured:hover .mini:nth-child(4) { transform: rotate(8deg) translateY(4px); }
.offer--featured:hover .mini i { animation: battement 1.2s ease-in-out infinite; }
.offer--featured:hover .mini b::after { transform: scaleX(1); }
.offer--featured:hover .mini:nth-child(2) b::after { transition-delay: .15s; }
.offer--featured:hover .mini:nth-child(3) b::after { transition-delay: .3s; }
.offer--featured:hover .mini:nth-child(4) b::after { transition-delay: .45s; }
.offer--featured .offer__price { transition: color .3s ease, transform .3s ease; transform-origin: left; }
.offer--featured:hover .offer__price { color: var(--corail); transform: scale(1.06); }
.offer--featured:hover .offer__tag { animation: fretille .6s ease; }
.offer--featured:hover .btn { box-shadow: 0 10px 24px rgba(255, 107, 87, .45); }
@keyframes fretille { 25% { transform: rotate(-6deg) scale(1.08); } 50% { transform: rotate(5deg) scale(1.08); } 75% { transform: rotate(-3deg); } }
/* Formules : accroche, prix « sur devis » et version 360° */
.offer h3 { font-size: 1.4rem; margin-bottom: .2em; }
/* Petites étiquettes des formats sous l'introduction des formules */
.formats { list-style: none; padding: 0; margin: -1rem 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.formats li {
  padding: .35em .95em; border-radius: 999px;
  border: 1.5px solid rgba(255, 247, 238, .35); color: var(--creme);
  font-size: .85rem; font-weight: 600;
  transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.formats li:hover { background: var(--soleil); border-color: var(--soleil); color: var(--encre); transform: translateY(-2px); }
.offer__pitch { color: var(--gris); margin: 0 0 1rem; }
.offer__price { font-size: 1.3rem; color: var(--encre); }
.offer__billing {
  display: inline-block; vertical-align: middle; margin-left: 8px;
  padding: .25em .75em; border-radius: 999px;
  background: var(--sable); color: var(--encre);
  font-size: .75rem; font-weight: 600; letter-spacing: .02em;
}
.offer--premium .offer__billing { background: var(--soleil); }
.offer--carte .mini { width: 13%; }
.offer--premium { border-color: var(--soleil); box-shadow: 0 0 0 2px var(--soleil); }
.offer--premium .offer__media { background: var(--soleil); display: grid; place-items: center; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.offer--premium .chart { width: 46%; }
.offer--premium:hover .offer__media { transform: scale(1.04); }
.offer--premium:hover .chart { transform: scale(1.12); }
.offer--premium .chart { transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.offer__other { text-align: center; margin: 2.4rem 0 0; color: rgba(255,247,238,.8); }
.offer__other a { color: var(--soleil); font-weight: 600; }

/* Contact */
.contact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; align-items: start; }
.contact__list { list-style: none; padding: 0; margin: 1.6rem 0; }
.contact__list li { padding: .6em 0; border-bottom: 1px solid rgba(31,27,77,.1); }
.contact__list li > span:first-child { display: inline-block; min-width: 110px; font-weight: 700; }
.contact__list .status__dot { margin-right: 8px; }
.contact__list a { color: var(--corail); }
.socials { display: flex; flex-wrap: wrap; gap: 10px; }
.socials a {
  text-decoration: none; font-weight: 500;
  padding: .45em 1.1em; border-radius: 999px;
  border: 1.5px solid var(--encre);
  transition: .2s;
}
.socials a:hover { background: var(--encre); color: var(--creme); }

.form {
  background: var(--blanc);
  padding: 32px;
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  display: grid; gap: 18px;
}
.form label { display: grid; gap: 6px; font-weight: 700; font-size: .95rem; }
.form input, .form textarea {
  font: inherit; font-weight: 400;
  padding: .8em 1em;
  border: 1.5px solid #E8D9C8;
  border-radius: 12px;
  background: var(--creme);
  color: var(--encre);
}
.form input:focus, .form textarea:focus { outline: none; border-color: var(--corail); background: var(--blanc); }
.form .btn { justify-self: start; }
.form__error { margin: 0; padding: .8em 1em; border-radius: 12px; background: rgba(255, 107, 87, .12); color: var(--encre); font-size: .9rem; }
.form__error a { color: var(--corail); font-weight: 600; }

/* Formulaire : il se soulève au survol, l'enveloppe s'ouvre, l'avion décolle */
.form { transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease; }
.form:hover, .form:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 0 0 3px var(--soleil), 0 26px 56px rgba(31, 27, 77, .18);
}
.form__head { display: flex; align-items: center; gap: 16px; padding-bottom: 18px; border-bottom: 1px dashed rgba(31, 27, 77, .15); }
.form__head-text strong { display: block; font-size: 1.05rem; }
.form__head-text span { font-size: .88rem; color: var(--gris); }
.envelope { position: relative; width: 58px; height: 44px; flex: none; animation: flotte 3.2s ease-in-out infinite; }
.envelope__letter {
  position: absolute; left: 7px; right: 7px; top: 6px; height: 34px;
  background: var(--blanc); border: 2px solid var(--encre); border-radius: 4px;
  padding: 5px 6px; display: flex; flex-direction: column; gap: 3px;
  transition: transform .55s cubic-bezier(.2,.8,.2,1);
}
.envelope__letter i { height: 3px; border-radius: 2px; background: var(--corail); }
.envelope__letter i:nth-child(2) { background: var(--sable); }
.envelope__letter i:nth-child(3) { background: var(--sable); width: 60%; }
.envelope__front {
  position: absolute; left: 0; right: 0; bottom: 0; height: 28px; z-index: 1;
  background: var(--corail); border-radius: 3px 3px 9px 9px;
  clip-path: polygon(0 0, 50% 52%, 100% 0, 100% 100%, 0 100%);
}
.form:hover .envelope__letter, .form:focus-within .envelope__letter { transform: translateY(-16px) rotate(-4deg); }
.form label { transition: color .25s ease; }
.form label:focus-within { color: var(--corail); }
.form input, .form textarea { transition: border-color .25s ease, background .25s ease, box-shadow .25s ease; }
.form input:focus, .form textarea:focus { box-shadow: 0 0 0 4px rgba(255, 107, 87, .15); }
.btn--send { display: inline-flex; align-items: center; gap: 10px; overflow: hidden; }
.plane { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.btn--send:hover .plane, .btn--send:focus-visible .plane { animation: decolle 1s ease-in-out; }
@keyframes decolle {
  0%   { transform: translate(0, 0); }
  45%  { transform: translate(28px, -28px); opacity: 0; }
  50%  { transform: translate(-24px, 24px); opacity: 0; }
  100% { transform: translate(0, 0); opacity: 1; }
}

/* Pied de page */
.footer { background: var(--encre); color: rgba(255,247,238,.75); padding: 32px 0; font-size: .9rem; }
.footer__inner { display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between; align-items: center; }
.footer p { margin: 0; }


/* Apparition douce au défilement (gérée par script.js) */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* =========================================================
   VERSION TABLETTE ET TÉLÉPHONE
   ========================================================= */
@media (max-width: 960px) {
  .hero__inner, .about, .contact, .team { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .grid--offers { grid-template-columns: minmax(0, 520px); justify-content: center; gap: 36px; }
  .hero__visual { max-width: 380px; width: 100%; margin-inline: auto; }
}

@media (max-width: 760px) {
  .menu-btn { display: block; }
  .nav {
    position: absolute; top: 70px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--creme);
    border-bottom: 1px solid rgba(31,27,77,.1);
    padding: 8px 16px 20px;
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav a:not(.btn) { padding: 14px 0; border-bottom: 1px solid rgba(31,27,77,.08); }
  .nav .btn { margin-top: 14px; text-align: center; }
  .menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .grid--videos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .shot--video figcaption { font-size: .85rem; }
  .play { width: 44px; height: 44px; font-size: 1rem; }
  .shot figcaption { opacity: 1; transform: none; }
  .form { padding: 22px; }
}

@media (max-width: 520px) {
  body { font-size: 16px; }
  .svc { flex-basis: 280px; }
  .carousel__btn { width: 42px; height: 42px; }
  .grid--videos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team__roles { grid-template-columns: minmax(0, 1fr); }
  /* frise « Notre méthode » en vertical sur téléphone */
  .method::before, .method::after { display: none; }
  .method__step { position: relative; }
  /* un trait corail relie chaque icône à la suivante */
  .method__step:not(:last-child)::before {
    content: ""; position: absolute; left: 40px; top: 94px; bottom: -22px; width: 3px; border-radius: 2px;
    background: var(--corail); transform: scaleY(0); transform-origin: top;
    transition: transform .8s ease .6s;
  }
  .method.is-visible .method__step:not(:last-child)::before { transform: scaleY(1); }
  .method.is-visible .method__step:nth-child(2)::before { transition-delay: 1.3s; }
  .method__dot { display: none; }
  .method__list { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .method__step { text-align: left; display: grid; grid-template-columns: 82px minmax(0, 1fr); column-gap: 20px; transform: translateX(-20px); }
  .method__icon { grid-row: span 3; margin: 0; }
  .method__num { margin-top: 6px; }
  .method__step p { margin: 0; }
  .duo { padding: 56px 0 0 72px; }
  .duo__name { font-size: 1.7rem; }
  .duo__arrow--lilly { width: 86px; top: calc(46% - 69px); }
  .hero__actions .btn { width: 100%; text-align: center; }
}

/* Respecte les personnes qui préfèrent moins d'animations */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  .carousel { overflow-x: auto; }
}