/* ============================================================
   Paola Bolle — Coach TDAH — style-02-home.css  (PAGE D'ACCUEIL)
   ------------------------------------------------------------
   RÔLE : styles propres à la page d'accueil et à ses grands blocs :
     - le header fixe en haut (barre de navigation) ;
     - le « hero » d'ouverture (grande image/vidéo + titre) ;
     - la bande de logos défilante (marquee) ;
     - le manifesto / texte d'introduction ;
     - la liste des accompagnements (lignes interactives) ;
     - le portfolio / médias (grilles d'images et vidéos) ;
     - la « façade » YouTube (vignette cliquable qui charge la vidéo).

   ORDRE DE CHARGEMENT : 01-base → 02-home → 03-pages → 04-responsive.
   S'appuie sur les variables de 01-base. Ne pas réordonner (cascade).

   CHARTE PAOLA : univers doux (crème/bleu/olive/ocre/rose/gris-bleu),
   coins arrondis, contours crayon, ombres douces, Poppins + Nunito.
   ============================================================ */

/* ---------- Header (pleine largeur) ----------
   Barre de navigation collée en haut de l'écran, sur toute la largeur. */
.site-header{
  position:fixed;top:0;left:0;right:0;   /* reste toujours visible en haut */
  z-index:60;
  background:rgba(247,242,234,.95);       /* crème quasi opaque (demande Yan) */
  -webkit-backdrop-filter:blur(8px);      /* léger « verre dépoli » dès le sommet */
  backdrop-filter:blur(8px);
  transition:background .3s var(--ease),border-color .3s var(--ease);
  border-bottom:1px solid var(--ligne);   /* fin trait de séparation visible */
}
/* Classe « scrolled » (ajoutée en JS) dès qu'on descend : la barre se
   densifie en crème pour rester lisible par-dessus le contenu. */
.site-header.scrolled{
  background:rgba(247,242,234,.94);        /* crème presque opaque */
  -webkit-backdrop-filter:blur(10px);      /* effet « verre dépoli » (Safari) */
  backdrop-filter:blur(10px);
  border-bottom-color:var(--ligne);        /* le fin trait du bas devient visible */
}
/* Intérieur du header : logo à gauche, navigation à droite. */
.header-inner{
  width:100%;
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(16px,3vw,48px);
  height:clamp(64px,7vw,88px);
  padding:0 clamp(18px,3vw,44px);
}
.logo{flex-shrink:0;display:flex;align-items:center}  /* le logo ne rétrécit jamais */
.logo img{height:clamp(30px,3.4vw,40px);width:auto}   /* garde les proportions */

/* Menu de navigation (liens alignés horizontalement). */
.main-nav{
  display:flex;align-items:center;
  gap:clamp(16px,2.4vw,40px);
  min-width:0;
}
.main-nav a{
  font-size:clamp(.8rem,.95vw,.92rem);font-weight:700;
  letter-spacing:.02em;text-transform:none;
  color:rgba(17,17,17,.72);       /* noir crayonné atténué au repos */
  padding:8px 0;position:relative;
  white-space:nowrap;
  transition:color .2s;
}
/* Soulignement animé (ocre) sous chaque lien (sauf le bouton nav-cta). */
.main-nav a:not(.nav-cta)::after{
  content:"";position:absolute;left:0;right:100%;bottom:2px;
  height:2px;background:var(--ocre);border-radius:2px;
  transition:right .3s var(--ease);
}
.main-nav a:hover,.main-nav a.active{color:var(--bleu)}  /* lien bleu au survol / actif */
.main-nav a:not(.nav-cta):hover::after,
.main-nav a:not(.nav-cta).active::after{right:0}  /* déploie le soulignement */

/* Bouton d'appel à l'action du menu (ex. « Prendre contact ») :
   présenté comme un petit bouton arrondi bleu. */
.main-nav .nav-cta{
  border:2px solid var(--noir);
  padding:11px 22px;border-radius:var(--radius);
  color:var(--bleu);background:transparent;
  transition:background .25s var(--ease),color .25s var(--ease);
}
.main-nav .nav-cta:hover,
.main-nav .nav-cta.active{background:var(--bleu);color:var(--creme)}  /* se remplit de bleu */

/* Bouton « Mon espace » : plein ocre pour ressortir avec chaleur. */
.main-nav .nav-account{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--ocre);color:var(--noir);border-color:var(--noir);
}
.main-nav .nav-account:hover{background:var(--ocre-fonce);color:var(--noir)}
.main-nav .nav-account svg{flex:0 0 auto}

/* Burger : le bouton à trois barres du menu mobile.
   Caché sur grand écran ; apparaît sous 1000px (voir @media plus bas). */
.nav-toggle{
  display:none;
  position:relative;z-index:75;
  width:48px;height:48px;
  background:none;border:2px solid var(--noir);border-radius:12px;
  cursor:pointer;
  flex-shrink:0;
}
/* Les trois barres du burger (des <span> positionnés à la main). */
.nav-toggle span{
  position:absolute;left:12px;right:12px;height:2px;border-radius:2px;
  background:var(--noir);
  transition:transform .3s var(--ease),opacity .2s;
}
.nav-toggle span:nth-child(1){top:16px}
.nav-toggle span:nth-child(2){top:23px}
.nav-toggle span:nth-child(3){top:30px}
/* Menu ouvert (.open) : les barres se transforment en croix (×). */
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* --- Menu mobile : en dessous de 1000px de large (tablette / téléphone) --- */
@media(max-width:1000px){
  .nav-toggle{display:block}     /* le burger apparaît */
  .main-nav{
    position:fixed;inset:0;z-index:70;
    background:var(--creme);      /* panneau crème plein écran */
    flex-direction:column;justify-content:center;align-items:center;text-align:center;
    gap:clamp(20px,4.5vh,36px);
    padding:max(76px,12vh) 22px max(40px,8vh);
    visibility:hidden;opacity:0;
    transition:opacity .3s var(--ease),visibility .3s;
    overflow-y:auto;
  }
  .main-nav.open{visibility:visible;opacity:1}
  .main-nav a{
    width:auto;max-width:100%;
    font-size:clamp(1.2rem,6vw,1.75rem);
    font-weight:700;letter-spacing:.01em;line-height:1.15;
    opacity:0;transform:translateY(16px);
    transition:opacity .35s var(--ease),transform .35s var(--ease),color .2s;
  }
  .main-nav a:not(.nav-cta)::after{display:none}
  .main-nav.open a{opacity:1;transform:none}
  /* Effet « cascade » : chaque lien apparaît un peu après le précédent. */
  .main-nav.open a:nth-child(1){transition-delay:.05s}
  .main-nav.open a:nth-child(2){transition-delay:.1s}
  .main-nav.open a:nth-child(3){transition-delay:.15s}
  .main-nav.open a:nth-child(4){transition-delay:.2s}
  .main-nav.open a:nth-child(5){transition-delay:.25s}
  .main-nav.open a:nth-child(6){transition-delay:.3s}
  .main-nav .nav-cta{padding:14px 28px;max-width:90vw}
}

/* ---------- Hero ----------
   Grande section d'ouverture : image/vidéo + titre en bas. */
.hero{
  position:relative;
  min-height:100svh;              /* hauteur d'écran « stable » sur mobile */
  display:flex;align-items:flex-end;  /* contenu aligné EN BAS */
  padding:0 0 clamp(56px,9vh,110px);
  overflow:hidden;
}
.hero-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;               /* remplit le cadre sans se déformer */
  /* Retouche douce : on ÉCLAIRCIT légèrement pour un rendu chaleureux. */
  filter:brightness(1.02) saturate(1.02);
  transform:translateY(var(--hero-shift,0px)) scale(1.14);  /* parallaxe + sur-cadrage */
  will-change:transform;
}
.work-media{will-change:transform}
@media(prefers-reduced-motion:reduce){
  .hero-video{transform:none}
}
/* Voile crème très léger par-dessus l'image, pour que le texte foncé
   reste lisible quelle que soit la photo de fond. */
.hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top, rgba(247,242,234,.55), rgba(247,242,234,.15));
}
.hero-content{position:relative;z-index:2;width:100%}  /* le texte passe DEVANT l'image */
/* Petit sur-titre au-dessus du titre principal (« eyebrow »). */
.hero-eyebrow{
  font-size:clamp(.72rem,1.2vw,.84rem);font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--olive);
  margin-bottom:clamp(18px,2.6vw,30px);
  display:flex;align-items:center;gap:18px;
}
.hero-eyebrow::before{content:"";flex:0 0 56px;height:2px;background:var(--ocre);border-radius:2px}
.hero h1{max-width:12em}
.hero-sub{
  margin-top:clamp(18px,2.4vw,26px);
  font-size:clamp(1rem,1.6vw,1.2rem);
  font-weight:400;color:var(--gris-clair);
  max-width:38em;
}
.hero-cta{margin-top:clamp(28px,4vw,44px);display:flex;gap:16px;flex-wrap:wrap}
/* Indice « défiler » vertical, dans le coin bas-droit du hero. */
.scroll-hint{
  position:absolute;right:clamp(24px,4vw,52px);bottom:clamp(56px,9vh,110px);
  z-index:2;
  font-size:.7rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gris-moyen);
  writing-mode:vertical-rl;
  display:flex;align-items:center;gap:12px;
}
.scroll-hint::after{
  content:"";width:2px;height:54px;background:var(--ocre);border-radius:2px;
  animation:scrollPulse 2.2s var(--ease) infinite;
}
@keyframes scrollPulse{
  0%{transform:scaleY(0);transform-origin:top}
  45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}
}
@media(max-width:700px){.scroll-hint{display:none}}

/* ---------- Bande de logos ----------
   Bandeau qui fait défiler en boucle des noms/logos (effet « marquee »). */
.clients-band{
  border-top:1px solid var(--ligne);
  border-bottom:1px solid var(--ligne);
  padding:26px 0;
  overflow:hidden;
  background:var(--bleu-clair);     /* bandeau gris-bleu doux */
}
.clients-band .band-label{
  font-size:.7rem;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gris-moyen);
  text-align:center;margin-bottom:14px;
}
.marquee{display:flex;overflow:hidden;user-select:none}
.marquee-track{
  display:flex;flex-shrink:0;align-items:center;
  min-width:100%;justify-content:space-around;
  gap:clamp(36px,6vw,84px);
  padding-right:clamp(36px,6vw,84px);
  animation:marquee 36s linear infinite;
}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{
  white-space:nowrap;
  font-size:clamp(.86rem,1.4vw,1.05rem);
  font-weight:700;letter-spacing:.06em;text-transform:none;
  color:var(--bleu);
}
.marquee-track .client-logo{display:flex;align-items:center}
.marquee-track .client-logo img{
  height:clamp(30px,4vw,44px);width:auto;max-width:200px;
  object-fit:contain;
  /* Logos ramenés en niveaux de gris, assombris pour rester lisibles sur fond clair. */
  filter:grayscale(1) contrast(1.02) brightness(.55);
  opacity:.7;
  transition:opacity .25s,filter .25s;
}
.marquee-track .client-logo img:hover{opacity:1;filter:grayscale(0)}
@keyframes marquee{to{transform:translateX(-100%)}}
@media(prefers-reduced-motion:reduce){
  .marquee-track{animation:none;flex-wrap:wrap;justify-content:center;padding:0}
}

/* ---------- Manifesto / intro ----------
   Grand texte de positionnement et son bloc d'introduction. */
.manifesto{
  font-size:clamp(1.35rem,3.2vw,2.3rem);
  font-weight:600;line-height:1.4;
  letter-spacing:-.005em;
  max-width:30em;
  color:var(--bleu);
}
/* Les mots mis en <em> ne sont PAS en italique : on les colore en ocre
   pour créer une touche chaleureuse dans la phrase. */
.manifesto em{font-style:normal;color:var(--ocre-fonce)}
.intro-grid{
  display:grid;grid-template-columns:1.4fr 1fr;
  gap:clamp(28px,5vw,72px);align-items:end;
}
.intro-side p{color:var(--gris-clair);font-size:1.02rem;margin-bottom:26px;max-width:34em}
@media(max-width:880px){.intro-grid{grid-template-columns:1fr}}

/* ---------- Accompagnements : lignes interactives (accueil) ----------
   Liste affichée en lignes cliquables ; au survol, la ligne se teinte
   de bleu (texte crème) et se décale doucement. */
.services-index{border-top:1px solid var(--ligne)}
.service-line{
  display:grid;
  grid-template-columns:64px 1fr auto 30px;
  gap:clamp(14px,3vw,40px);
  align-items:baseline;
  padding:clamp(20px,3vw,30px) clamp(8px,1.5vw,18px);
  border-bottom:1px solid var(--ligne);
  border-radius:14px;
  transition:background .25s var(--ease),color .25s var(--ease),padding-left .25s var(--ease);
}
.service-line .num{
  font-size:.8rem;font-weight:700;letter-spacing:.06em;color:var(--ocre-fonce);
  transition:color .25s;
}
.service-line .titre{
  font-family:'Poppins','Nunito',sans-serif;
  font-size:clamp(1.2rem,2.6vw,1.9rem);
  font-weight:700;text-transform:none;letter-spacing:-.005em;
  line-height:1.2;color:var(--bleu);
}
.service-line .prix{
  font-size:.9rem;font-weight:700;letter-spacing:.02em;
  color:var(--gris-moyen);white-space:nowrap;
  transition:color .25s;
}
.service-line .fleche{
  font-weight:800;opacity:0;transform:translateX(-8px);color:var(--bleu);
  transition:opacity .25s var(--ease),transform .25s var(--ease);
}
/* Survol : la ligne se remplit de bleu (texte crème) et se décale à droite. */
.service-line:hover{
  background:var(--bleu);color:var(--creme);
  padding-left:clamp(16px,2.5vw,30px);
}
.service-line:hover .num,
.service-line:hover .prix,
.service-line:hover .titre,
.service-line:hover .fleche{color:var(--creme)}
.service-line:hover .num,
.service-line:hover .prix{color:rgba(247,242,234,.75)}
.service-line:hover .fleche{opacity:1;transform:none}
@media(max-width:700px){
  .service-line{grid-template-columns:42px 1fr auto}
  .service-line .fleche{display:none}
  .service-line .prix{font-size:.78rem}
}

/* ---------- Portfolio / médias ----------
   Vignettes : cadre arrondi, ombre douce, image qui zoome au survol. */
.work-media{
  position:relative;overflow:hidden;
  border:2px solid var(--noir);
  border-radius:var(--radius-card);
  background:var(--bleu-clair);
  box-shadow:var(--ombre);
}
.work-media img{
  width:100%;aspect-ratio:16/10;object-fit:cover;
  filter:saturate(.95);
  transition:transform .8s var(--ease),filter .5s;
}
.work-media--portrait img{aspect-ratio:4/5}
.work:hover .work-media img{transform:scale(1.045);filter:saturate(1.05)}
.work-caption{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:14px 2px 0;
}
.work-caption strong{
  font-size:.95rem;font-weight:700;
  text-transform:none;letter-spacing:0;color:var(--bleu);
}
.work-caption span{
  font-size:.74rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--gris-moyen);white-space:nowrap;
}

/* grille asymétrique (accueil) : trame de 12 colonnes, placements irréguliers. */
.asym-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:clamp(16px,2.6vw,30px);
}
.asym-grid .work:nth-child(1){grid-column:1/8}
.asym-grid .work:nth-child(2){grid-column:8/13;align-self:end}
.asym-grid .work:nth-child(3){grid-column:1/6}
.asym-grid .work:nth-child(4){grid-column:6/13}
@media(max-width:700px){.asym-grid .work{grid-column:1/13 !important}}

/* grille standard (page réalisations) — 3 colonnes égales. */
.portfolio-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,2.6vw,30px);
}
.video-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(16px,2.6vw,30px);
  margin-bottom:var(--s2);
}
@media(max-width:980px){.portfolio-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.portfolio-grid,.video-grid{grid-template-columns:1fr}}

/* vidéo mise en avant (accueil) */
.featured{margin-bottom:clamp(24px,4vw,44px)}
.featured .yt{aspect-ratio:16/9}

/* ---------- Façade YouTube ----------
   Vignette légère + bouton lecture ; la vraie iframe n'est chargée qu'AU CLIC. */
.yt{
  position:relative;display:block;width:100%;
  aspect-ratio:16/9;
  background-color:var(--bleu-clair);
  background-size:cover;background-position:center;
  cursor:pointer;overflow:hidden;
  border:2px solid var(--noir);border-radius:var(--radius-card);
  box-shadow:var(--ombre);
}
/* Voile bleuté doux par-dessus la vignette (éclairci au survol). */
.yt::before{
  content:"";position:absolute;inset:0;
  background:rgba(36,79,122,.22);
  transition:background .3s;
}
.yt:hover::before{background:rgba(36,79,122,.08)}
/* Bouton lecture arrondi, centré. */
.yt-play{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:84px;height:58px;border-radius:16px;
  border:2px solid var(--creme);
  background:rgba(36,79,122,.85);
  display:flex;align-items:center;justify-content:center;
  transition:background .25s;
}
/* Triangle « play » dessiné en CSS (bordure gauche colorée). */
.yt-play span{
  border-left:15px solid var(--creme);
  border-top:9px solid transparent;
  border-bottom:9px solid transparent;
  margin-left:4px;
  transition:border-color .25s;
}
.yt:hover .yt-play{background:var(--creme);border-color:var(--noir)}
.yt:hover .yt-play span{border-left-color:var(--bleu)}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}