/* ============================================================
   EDMÉE COV — STYLE PROPRE À LA PAGE D'ACCUEIL
   Chargé uniquement par index-v4.html.
   L'accueil a volontairement une écriture visuelle à part :
   hero plein écran qui se déploie, galerie mosaïque, cartes
   de services dépliables, frise horizontale.
   Les pages intérieures utilisent styles/pages.css.
   ============================================================ */

/* ============================================================
   HERO — image qui se déploie au clic ou au scroll
   ============================================================ */
.hero{ position:relative; }
.hero__stage{
  position:relative; display:flex; flex-direction:column; align-items:center;
  min-height:100dvh;
}
.hero__bg{
  position:absolute; inset:0; z-index:0; height:100dvh; overflow:hidden;
  background:
    radial-gradient(120% 90% at 82% 8%,  rgba(242,208,216,.55), transparent 58%),
    radial-gradient(110% 80% at 10% 96%, rgba(27,95,168,.16),  transparent 62%),
    linear-gradient(168deg, #FFFFFF 0%, var(--ice) 46%, var(--mist) 100%);
}
.hero__bg svg{ position:absolute; left:0; bottom:0; width:100%; height:auto; }
.hero__bg .w1{ fill:rgba(27,95,168,.10); }
.hero__bg .w2{ fill:rgba(27,95,168,.16); }
.hero__bg .w3{ fill:rgba(11,35,66,.07); }
.hero__bg .waveTexture{ opacity:.85; -webkit-mask-image:none; mask-image:none; }

.hero__viewport{
  position:relative; z-index:10; width:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  height:100dvh; overflow:hidden;
  cursor:pointer;                     /* le hero entier réagit au clic */
}
.hero__viewport.is-open{ cursor:default; }

/* La règle « hauteur ≤ tiers de la largeur de page » est appliquée en JS
   (voir capH dans render()). Ici, simple garde-fou vertical. */
.hero__media{
  position:absolute; z-index:0; top:50%; left:50%;
  transform:translate(-50%,-50%);
  max-width:95vw; max-height:88vh;
  border-radius:22px;
  box-shadow:0 0 60px rgba(11,35,66,.42);
}
.hero__media figure{ position:relative; width:100%; height:100%; margin:0; }
.hero__media img{ width:100%; height:100%; object-fit:cover; border-radius:20px; }
.hero__media .veil{
  position:absolute; inset:0; border-radius:20px;
  background:linear-gradient(180deg, rgba(11,35,66,.42), rgba(11,35,66,.20));
}

/* Texte porté par l'image : « Collaboratrice Virtuelle » en grand romain,
   « Freelance » en petit italique. */
.hero__onMedia{
  position:absolute; z-index:10; inset:auto 0 0 0;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:0 20px clamp(46px,7vh,66px);
}
.hero__onMedia b{
  display:block; font-family:var(--serif); font-weight:500; font-style:normal;
  font-size:clamp(1.3rem,2.2vw,1.95rem); color:#fff; letter-spacing:.04em;
  text-shadow:0 2px 22px rgba(11,35,66,.75);
}
.hero__onMedia i{
  display:block; margin-top:3px; font-style:italic;
  font-family:var(--serif); font-size:clamp(.95rem,1.5vw,1.3rem); font-weight:400;
  color:#F7FAFE; letter-spacing:.01em; text-shadow:0 2px 22px rgba(11,35,66,.75);
}

/* ── Bande d'actualités, posée dans la moitié basse de l'image ──
   Filet fin façon « lower third » : pas d'étiquette, pas de pastilles,
   avance par à-coups (voir le pas dans scripts/accueil.js). */
.ticker{
  position:absolute; z-index:12; left:0; right:0;
  top:70%; transform:translateY(-50%);
  display:flex; align-items:center; overflow:hidden;
  height:clamp(42px,5.8vh,56px);
  background:linear-gradient(90deg,
    rgba(11,35,66,.16) 0%, rgba(11,35,66,.50) 14%,
    rgba(11,35,66,.50) 86%, rgba(11,35,66,.16) 100%);
  -webkit-backdrop-filter:blur(9px) saturate(125%); backdrop-filter:blur(9px) saturate(125%);
  border-top:1px solid rgba(255,255,255,.18);
  border-bottom:1px solid rgba(255,255,255,.18);
  opacity:0; transition:opacity .7s var(--ease);
}
.ticker.is-on{ opacity:1; }
.ticker__win{
  flex:1; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.ticker__track{ display:flex; align-items:center; width:max-content; will-change:transform; }
.ticker__track a{
  position:relative; display:inline-flex; align-items:baseline; gap:.85em;
  white-space:nowrap; padding:0 clamp(24px,2.8vw,46px); color:#fff;
  transition:color .4s var(--ease);
}
.ticker__track a::before{          /* losange de séparation */
  content:''; position:absolute; left:-2px; top:50%;
  width:4px; height:4px; transform:translateY(-50%) rotate(45deg);
  background:rgba(242,208,216,.55);
}
.ticker__k{
  font-size:.58rem; font-weight:600; letter-spacing:.26em; text-transform:uppercase;
  color:var(--blush);
}
.ticker__t{ font-family:var(--serif); font-size:clamp(.88rem,1.1vw,1.02rem); font-weight:400; }
.ticker__track a:hover .ticker__t{ text-decoration:underline; text-underline-offset:4px; }
@media (max-width:700px){
  .ticker{ height:44px; top:72%; }
  .ticker__k{ display:none; }
}

/* Invite sous l'image */
.hero__cue{
  position:absolute; z-index:10; left:0; right:0;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-size:.72rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--navy); pointer-events:none;
}
.hero__cue u{ text-decoration:none; color:var(--ruby); }
.hero__cue span{
  width:1px; height:26px; background:linear-gradient(180deg,var(--ruby),transparent);
  animation:cue 1.9s var(--ease) infinite;
}
@keyframes cue{ 0%,100%{ transform:scaleY(.35); opacity:.35 } 50%{ transform:scaleY(1); opacity:1 } }

/* « Edmée COV » sur une seule ligne AU-DESSUS de l'image. Les deux mots
   s'écartent horizontalement à mesure que l'image se déploie. */
.hero__title{
  position:absolute; z-index:10; left:0; right:0;
  display:flex; align-items:baseline; justify-content:center; gap:clamp(10px,1.4vw,20px);
  text-align:center; pointer-events:none; white-space:nowrap;
}
.hero__title h1{
  margin:0; color:var(--navy);
  font-size:clamp(3.2rem,9vw,6.6rem); font-weight:500; letter-spacing:-.035em;
  text-shadow:0 2px 30px rgba(250,248,244,.95);
}
.hero__title h1:last-child{
  font-size:clamp(2.1rem,5.6vw,4.2rem); letter-spacing:.16em; font-weight:400; color:var(--blue);
}

.hero__reveal{
  position:relative; z-index:10; width:100%;
  opacity:0; transition:opacity .8s var(--ease);
  background:var(--cream);
}
.hero__reveal.is-shown{ opacity:1; }

/* ============================================================
   Approche — galerie + piliers
   ============================================================ */
.intro{ position:relative; padding:clamp(48px,6.5vw,80px) 0 clamp(40px,5.5vw,68px); overflow:hidden; }
/* Colonne galerie réduite d'un tiers (.82 → .55) : la galerie baisse d'autant
   en hauteur, à proportions constantes, et le texte gagne en largeur. */
.intro__grid{ display:grid; grid-template-columns:.55fr 1.45fr; gap:clamp(32px,4.5vw,58px); align-items:start; }
.intro__visual{ position:relative; }
.gallery{
  display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:1fr;
  gap:12px; margin:0;
}
.gallery figure{
  margin:0; position:relative; overflow:hidden; border-radius:var(--r-md);
  border:1px solid var(--mist); box-shadow:var(--shadow-soft);
  transition:transform .6s var(--ease), box-shadow .6s var(--ease), border-color .6s var(--ease);
}
.gallery figure:nth-child(1),
.gallery figure:nth-child(4){ grid-column:1 / -1; }
.gallery img{
  width:100%; height:100%; aspect-ratio:1/1; object-fit:cover; object-position:center;
  transition:transform 1.1s var(--ease);
}
.gallery figure:nth-child(1) img{ aspect-ratio:16/10; }
.gallery figure:nth-child(4) img{ aspect-ratio:21/8; object-position:center 62%; }
.gallery figure:hover{ transform:translateY(-4px); border-color:var(--blush); box-shadow:var(--shadow-lift); }
.gallery figure:hover img{ transform:scale(1.06); }
.gallery figure::after{             /* voile d'onde discret */
  content:''; position:absolute; inset:auto 0 0 0; height:46%;
  background:linear-gradient(180deg, transparent, rgba(11,35,66,.28));
  opacity:0; transition:opacity .6s var(--ease); pointer-events:none;
}
.gallery figure:hover::after{ opacity:1; }

/* Tampon */
.intro__badge{
  position:absolute; right:-16px; bottom:-22px; z-index:2;
  background:#fff; border:1px solid var(--blush); border-radius:18px;
  padding:14px 22px; box-shadow:var(--shadow-lift);
  font-size:.7rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--ruby);
  text-align:center;
}
.intro__badge b{
  display:block; font-family:var(--serif); font-size:1.45rem; font-weight:500;
  letter-spacing:0; text-transform:none; color:var(--navy);
}
.intro__badge b em{ font-style:normal; color:var(--blue); }
.intro h2{ font-size:clamp(1.9rem,4vw,3.1rem); margin-top:14px; }
.intro h2 em{ font-style:italic; color:var(--blue); }
/* La colonne de texte étant large, on élargit aussi la mesure :
   moins de lignes, donc une hauteur alignée sur celle de la galerie. */
.intro__lede{ font-size:clamp(1rem,1.5vw,1.12rem); color:var(--slate); margin-top:18px; max-width:66ch; }
.intro__lede + .intro__lede{ margin-top:12px; }
.pillars{ display:grid; gap:12px; margin-top:17px; }
.pillar{
  display:flex; gap:18px; align-items:flex-start;
  padding:18px 22px; border-radius:var(--r-md);
  background:#fff; border:1px solid var(--mist);
  box-shadow:var(--shadow-soft);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.pillar:hover{ transform:translateX(6px); border-color:var(--blush); box-shadow:var(--shadow-lift); }
.pillar__ico{
  flex:none; width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background:var(--ice); color:var(--blue);
  transition:background .5s var(--ease), color .5s var(--ease);
}
.pillar:hover .pillar__ico{ background:var(--blush); color:var(--ruby); }
.pillar h3{ font-family:var(--sans); font-size:.95rem; font-weight:600; letter-spacing:.01em; }
.pillar p{ font-size:.9rem; color:var(--slate); margin-top:4px; }

/* ============================================================
   Services — 3 cartes dépliables
   ============================================================ */
.services{ position:relative; background:var(--ice); padding:clamp(54px,7vw,88px) 0 clamp(58px,7.5vw,94px); overflow:hidden; }
.services__head{ max-width:640px; }
.services__head h2{ font-size:clamp(1.9rem,4vw,3rem); margin-top:16px; }
.services__head p{ color:var(--slate); margin-top:18px; }
/* align-items:start → seule la carte survolée s'agrandit,
   les deux autres ne bougent pas. */
.cards{
  display:grid; grid-template-columns:repeat(3,1fr); align-items:start;
  gap:clamp(18px,2.2vw,28px); margin-top:clamp(28px,3.4vw,42px);
}
.card{
  position:relative; isolation:isolate; overflow:hidden;
  background:#fff; border:1px solid var(--mist); border-radius:var(--r-lg);
  padding:clamp(26px,2.6vw,34px);
  box-shadow:var(--shadow-soft);
  transition:transform .6s var(--ease), box-shadow .6s var(--ease), border-color .6s var(--ease);
  transform-style:preserve-3d;
}
.card::before{                       /* onde qui monte au survol */
  content:''; position:absolute; z-index:-1; left:-20%; right:-20%; bottom:-70%; height:150%;
  background:
    radial-gradient(60% 60% at 30% 100%, rgba(27,95,168,.14), transparent 70%),
    radial-gradient(50% 50% at 80% 100%, rgba(181,40,74,.09), transparent 70%);
  transform:translateY(38%); opacity:0;
  transition:transform .8s var(--ease), opacity .8s var(--ease);
}
.card:hover{ transform:translateY(-10px); border-color:#c9d8ec; box-shadow:var(--shadow-lift); }
.card:hover::before{ transform:translateY(0); opacity:1; }
.card__wave{
  position:absolute; z-index:-1; left:0; right:0; bottom:0; height:120px; opacity:.35;
  transition:opacity .7s var(--ease), transform .9s var(--ease); transform:translateY(24px);
}
.card:hover .card__wave{ opacity:.75; transform:translateY(0); }
.card__num{
  font-family:var(--serif); font-size:.85rem; letter-spacing:.2em; color:var(--ruby);
  display:block; margin-bottom:22px;
}
.card::after{                        /* filet d'accent au survol */
  content:''; position:absolute; left:0; top:0; height:3px; width:100%;
  background:linear-gradient(90deg,var(--ruby),var(--blue));
  transform:scaleX(0); transform-origin:left; transition:transform .7s var(--ease);
}
.card:hover::after, .card:focus-within::after{ transform:scaleX(1); }
.card__ico{
  width:56px; height:56px; border-radius:16px; display:grid; place-items:center;
  background:linear-gradient(150deg, var(--ice), #fff);
  border:1px solid var(--mist); color:var(--blue);
  transition:transform .6s var(--ease), background .6s var(--ease), color .6s var(--ease), border-color .6s var(--ease);
}
.card:hover .card__ico{
  transform:rotate(-6deg) scale(1.06);
  background:linear-gradient(150deg, var(--ruby), #7E1732); color:#fff; border-color:transparent;
}
.card__ico svg{ width:26px; height:26px; }
.card h3{ font-size:clamp(1.25rem,1.9vw,1.55rem); margin-top:22px; }
.card > p{ font-size:.94rem; color:var(--slate); margin-top:12px; }
.card__list{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-rows:0fr; opacity:0;
  transition:grid-template-rows .7s var(--ease), opacity .55s var(--ease), margin-top .7s var(--ease);
  margin-top:0;
}
.card__list > div{ overflow:hidden; }
.card:hover .card__list, .card:focus-within .card__list{ grid-template-rows:1fr; opacity:1; margin-top:20px; }
.card__list li{
  display:flex; gap:11px; align-items:flex-start;
  font-size:.87rem; color:var(--navy); padding:7px 0;
  border-top:1px solid var(--mist);
}
.card__list li:first-child{ border-top:0; }
.card__list li::before{
  content:''; flex:none; width:6px; height:6px; margin-top:8px; border-radius:50%;
  background:var(--ruby); box-shadow:0 0 0 4px var(--blush);
}
.card__foot{
  margin-top:24px; padding-top:18px; border-top:1px solid var(--mist);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-size:.8rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--slate);
  transition:color .5s var(--ease);
}
.card:hover .card__foot{ color:var(--ruby); }
.card__foot svg{ transition:transform .5s var(--ease); }
.card:hover .card__foot svg{ transform:translateX(5px); }

/* ============================================================
   Méthode — frise horizontale
   ============================================================ */
.method{ position:relative; padding:clamp(54px,7vw,88px) 0; background:var(--cream); overflow:hidden; }
.method__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.method__head h2{ font-size:clamp(1.9rem,4vw,3rem); margin-top:16px; max-width:16ch; }
.method__head p{ color:var(--slate); max-width:38ch; font-size:.96rem; }
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,26px); margin-top:clamp(30px,3.6vw,46px); position:relative; }
.step{ position:relative; padding-top:30px; }
.step::before{
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--mist); border-radius:2px; overflow:hidden;
}
.step::after{
  content:''; position:absolute; top:0; left:0; height:2px; width:0; border-radius:2px;
  background:linear-gradient(90deg,var(--blue),var(--ruby));
  transition:width 1.1s var(--ease);
}
.step.is-in::after{ width:100%; }
.step span{ font-size:.72rem; font-weight:700; letter-spacing:.2em; color:var(--blue); }
.step h3{ font-family:var(--sans); font-size:1.05rem; font-weight:600; margin-top:10px; }
.step p{ font-size:.89rem; color:var(--slate); margin-top:8px; }

/* ============================================================
   Confiance
   ============================================================ */
.trust{ position:relative; background:var(--navy); color:#fff; padding:clamp(54px,7vw,84px) 0; overflow:hidden; }
.trust .waveTexture{
  opacity:.9;
  background-image:
    repeating-radial-gradient(circle at 10% 120%, transparent 0 62px, rgba(255,255,255,.055) 62px 63px),
    repeating-radial-gradient(circle at 88% -12%, transparent 0 80px, rgba(242,208,216,.06) 80px 81px);
}
.trust__grid{ position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(40px,6vw,80px); align-items:center; }
.trust .eyebrow{ color:var(--blush); }
.trust .eyebrow::before{ background:linear-gradient(90deg,transparent,var(--blush)); }
.trust h2{ font-size:clamp(1.9rem,4vw,3rem); margin-top:16px; }
.trust h2 em{ font-style:italic; color:var(--blush); }
.trust p.lede{ color:#B9C8DA; margin-top:20px; max-width:46ch; }
.quote{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-lg); padding:clamp(28px,3vw,40px);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.quote p{ font-family:var(--serif); font-style:italic; font-size:clamp(1.15rem,2vw,1.5rem); line-height:1.45; }
.quote footer{ margin-top:22px; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; color:var(--blush); }
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:34px; }
.stat strong{ font-family:var(--serif); font-size:clamp(1.8rem,3.4vw,2.6rem); font-weight:500; display:block; color:var(--blush); }
.stat span{ font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:#93A8BF; }
.stat{ position:relative; padding-left:16px; }
.stat::before{
  content:''; position:absolute; left:0; top:6px; bottom:6px; width:2px; border-radius:2px;
  background:linear-gradient(180deg,var(--ruby),transparent);
}

/* ============================================================
   Premier échange (bloc CTA de l'accueil)
   ============================================================ */
/* Enchaîne directement Les services : pas de double respiration en haut */
.contact{ position:relative; padding:0 0 clamp(54px,7vw,88px); background:var(--ice); overflow:hidden; text-align:center; }
.contact__card{
  position:relative; max-width:820px; margin-inline:auto;
  background:#fff; border:1px solid var(--mist); border-radius:32px;
  padding:clamp(38px,5vw,70px); box-shadow:var(--shadow-lift); overflow:hidden;
}
.contact__card::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:6px;
  background:linear-gradient(90deg,var(--blue),var(--ruby),var(--blue));
  background-size:200% 100%; animation:slide 7s linear infinite;
}
@keyframes slide{ to{ background-position:200% 0 } }
.contact h2{ font-size:clamp(1.9rem,4vw,3rem); margin-top:16px; }
.contact h2 em{ font-style:italic; color:var(--ruby); }
.contact p{ color:var(--slate); margin-top:18px; max-width:48ch; margin-inline:auto; }
.contact__actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:34px; }
.contact__meta{ margin-top:30px; font-size:.82rem; color:var(--slate); letter-spacing:.06em; }

/* ============================================================
   Adaptations écran
   ============================================================ */
@media (max-width:960px){
  .intro__grid{ grid-template-columns:1fr; }
  .intro__visual{ max-width:330px; margin:0 auto 26px; width:100%; }
  .cards{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:repeat(2,1fr); row-gap:34px; }
  .trust__grid{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  .hero__title h1{ font-size:clamp(2.5rem,11vw,4rem); }
  .hero__title h1:last-child{ font-size:clamp(1.6rem,7vw,2.6rem); letter-spacing:.12em; }
  .hero__cue{ padding-inline:24px; font-size:.62rem; letter-spacing:.14em; line-height:1.5; }
  .hero__cue em{ display:block; max-width:26ch; text-align:center; }
  .ticker{ height:40px; top:72%; }
  .ticker__track a{ padding:0 18px; }
  .ticker__t{ font-size:.8rem; }
}
@media (max-width:560px){
  .steps{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:1fr; gap:14px; }
  .intro__badge{ right:0; bottom:-16px; padding:11px 16px; }
  .intro__badge b{ font-size:1.2rem; }
  .quote{ padding:24px 22px; }
  .contact__card{ border-radius:24px; }
  .contact__actions .btn{ width:100%; justify-content:center; }
}