/* ------------------------------------------------------------------
   Landing (accueil) — finition premium. Chargé UNIQUEMENT sur index.html.
   Objectif : casser le blanc/gris plat avec des dégradés doux, des halos
   d'ambiance discrets et des séparateurs soignés — SANS toucher au hero,
   au contenu, ni à l'identité (bleu #2563EB, Inter).
   Tout est scopé sous body.home + .section (le hero n'est pas un .section,
   il n'est donc jamais ciblé). Aucune autre page n'est affectée.
------------------------------------------------------------------ */

/* Fonds de sections : dégradés doux au lieu du blanc / gris plat */
body.home .section{position:relative;overflow:hidden}
body.home .section > .container{position:relative;z-index:2}
body.home .section.bg-soft{background:linear-gradient(180deg,#FAFBFD 0%,#F1F3F7 100%)}
body.home .section:not(.bg-soft){background:linear-gradient(180deg,#FFFFFF 0%,#FBFCFD 100%)}

/* Halo d'ambiance très diffus (premium, faible opacité) + lente dérive.
   Contenu au-dessus (z-index:2), halo derrière (z-index:0). */
body.home .section::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  width:560px;height:560px;border-radius:50%;
  background:radial-gradient(circle,rgba(37,99,235,.05),transparent 70%);
  filter:blur(40px);top:-170px;right:-130px;
  animation:homeFloat 20s ease-in-out infinite alternate;
}
body.home .section:nth-of-type(even)::before{
  right:auto;left:-150px;
  background:radial-gradient(circle,rgba(148,163,184,.08),transparent 70%);
  animation-duration:26s;
}
@keyframes homeFloat{from{transform:translate(0,0)}to{transform:translate(26px,30px)}}

/* Séparateur premium en haut de chaque bande : liseré dégradé qui s'efface aux bords */
body.home .section::after{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(900px,86%);height:1px;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(148,163,184,.30),transparent);
}

/* Pastilles (eyebrow) : léger dégradé + anneau. Uniquement dans les sections
   → l'eyebrow du hero n'est pas touché. */
body.home .section .eyebrow{
  background:linear-gradient(135deg,#EAF1FF,#F4F8FF);
  border:1px solid rgba(37,99,235,.16);
  box-shadow:0 2px 12px -5px rgba(37,99,235,.30);
}

/* Comparatif : mini-courbe qui se (re)dessine EN BOUCLE quand la carte entre
   à l'écran (déclenché par .is-in du reveal — plus besoin de survol). */
body.home #le-basculement .bsc-card{position:relative;overflow:hidden}
body.home #le-basculement .bsc-spark{
  position:absolute;right:22px;bottom:18px;width:104px;height:44px;opacity:.5;pointer-events:none;
  transition:opacity .5s ease;
}
body.home #le-basculement .bsc-spark path{
  fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:240;stroke-dashoffset:240;
}
body.home #le-basculement .bsc-bad  .bsc-spark path{stroke:#F87171}
body.home #le-basculement .bsc-good .bsc-spark path{stroke:#10B981}
/* Au scroll (carte révélée) : courbe visible + tracé en boucle */
body.home #le-basculement .bsc-card.is-in .bsc-spark{opacity:.9}
body.home #le-basculement .bsc-card.is-in .bsc-spark path{animation:bscDrawLoop 5s ease-in-out infinite}
/* léger décalage de la courbe verte pour un rendu vivant (pas synchrone) */
body.home #le-basculement .bsc-good.is-in .bsc-spark path{animation-duration:5.6s}
@keyframes bscDrawLoop{
  0%{stroke-dashoffset:240}   /* vide */
  22%{stroke-dashoffset:0}    /* tracé */
  78%{stroke-dashoffset:0}    /* maintien */
  86%{stroke-dashoffset:240}  /* reset (repart à zéro) */
  100%{stroke-dashoffset:240} /* pause avant re-tracé */
}
@media (prefers-reduced-motion: reduce){
  body.home #le-basculement .bsc-spark path{stroke-dashoffset:0;animation:none!important}
}
/* Mobile : la courbe ne doit pas chevaucher la dernière ligne de texte
   (ex. « profils vérifiés »). On réserve de l'espace sous le contenu et on
   descend légèrement la courbe. */
@media(max-width:640px){
  body.home #le-basculement .bsc-card{padding-bottom:58px}
  body.home #le-basculement .bsc-spark{right:16px;bottom:14px;width:88px;height:36px;opacity:.85}
}

/* « Ça vous parle » — SABLIERS décoratifs dans chaque encart (~11 h / 2 min).
   Le sable s'écoule (haut → bas), puis le sablier se retourne, en boucle.
   Parcours classique = écoulement LENT (le temps qui traîne) ; solution = RAPIDE.
   Le cadre est symétrique → le retournement 180° boucle sans saut visible. */
#ca-vous-parle .cvp-card{--hg:6.5s}          /* parcours classique : lent */
#ca-vous-parle .cvp-solution{--hg:2.8s}      /* solution : rapide */
#ca-vous-parle .cvp-card > *{position:relative;z-index:2}
#ca-vous-parle .cvp-hg{
  position:absolute;top:20px;right:22px;width:44px;height:56px;z-index:1;pointer-events:none;overflow:visible;
  animation:hgFlip var(--hg) ease-in-out infinite;transform-origin:50% 50%;
}
#ca-vous-parle .cvp-hg .hg-frame{fill:none;stroke:rgba(148,163,184,.5);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
#ca-vous-parle .cvp-hg .hg-sand{fill:rgba(148,163,184,.6)}
#ca-vous-parle .cvp-hg .hg-top{transform-box:fill-box;transform-origin:50% 100%;animation:hgTop var(--hg) ease-in-out infinite}
#ca-vous-parle .cvp-hg .hg-bot{transform-box:fill-box;transform-origin:50% 100%;animation:hgBot var(--hg) ease-in-out infinite}
#ca-vous-parle .cvp-hg .hg-stream{stroke:rgba(148,163,184,.7);stroke-width:1.7;stroke-linecap:round;stroke-dasharray:1.6 3.1;animation:hgFall .5s linear infinite, hgVis var(--hg) linear infinite}
/* Carte solution : sablier bleu */
#ca-vous-parle .cvp-solution .cvp-hg .hg-frame{stroke:rgba(96,165,250,.62)}
#ca-vous-parle .cvp-solution .cvp-hg .hg-sand{fill:rgba(96,165,250,.72)}
#ca-vous-parle .cvp-solution .cvp-hg .hg-stream{stroke:rgba(96,165,250,.82)}
@keyframes hgFlip{0%,84%{transform:rotate(0)}100%{transform:rotate(180deg)}}
@keyframes hgTop{0%{transform:scale(1)}80%,100%{transform:scale(.04)}}
@keyframes hgBot{0%{transform:scaleY(.04)}80%,100%{transform:scaleY(1)}}
@keyframes hgFall{from{stroke-dashoffset:0}to{stroke-dashoffset:-9.4}}
@keyframes hgVis{0%,7%{opacity:0}15%{opacity:1}76%{opacity:1}83%,100%{opacity:0}}
@media(max-width:640px){
  #ca-vous-parle .cvp-hg{top:16px;right:16px;width:38px;height:48px}
}
@media (prefers-reduced-motion: reduce){
  #ca-vous-parle .cvp-hg,
  #ca-vous-parle .cvp-hg *{animation:none!important}
  #ca-vous-parle .cvp-hg .hg-top{transform:scale(.5)}
  #ca-vous-parle .cvp-hg .hg-bot{transform:scaleY(.5)}
}

@media (prefers-reduced-motion: reduce){
  body.home .section::before{animation:none}
}
@media (max-width:640px){
  body.home .section::before{width:340px;height:340px;filter:blur(30px)}
}

/* --- Bandeau de marques défilant (sous la vitrine) --- */
body.home .ttv-marquee{
  position:relative;margin-top:46px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
body.home .ttv-marquee-track{
  display:flex;width:max-content;
  animation:ttvMarquee 34s linear infinite;
}
body.home .ttv-marquee:hover .ttv-marquee-track{animation-play-state:paused}
body.home .ttv-marquee span{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;padding:0 26px;
}
body.home .ttv-brand-logo{
  /* boîte de taille identique pour chaque logo → rendu harmonisé
     (les emblèmes remplissent la hauteur, les logos-mots la largeur). */
  width:104px;height:44px;object-fit:contain;
  flex:0 0 auto;display:block;
}
@keyframes ttvMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (max-width:640px){
  body.home .ttv-marquee{margin-top:34px}
  body.home .ttv-marquee span{padding:0 18px}
  body.home .ttv-brand-logo{width:82px;height:36px}
}
@media (prefers-reduced-motion: reduce){
  body.home .ttv-marquee-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;gap:8px 0}
  body.home .ttv-marquee{-webkit-mask-image:none;mask-image:none}
}

/* --- Réseaux sociaux (footer uniquement) --- */
.ttv-social{display:flex;align-items:center;gap:6px}
.ttv-social-link{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;transition:color .15s,background .15s}
.ttv-social-link svg{width:18px;height:18px;display:block}
.footer .ttv-social{margin:0 0 22px}
.footer .ttv-social-link{color:rgba(255,255,255,.72)}
.footer .ttv-social-link:hover{color:#fff;background:rgba(255,255,255,.12)}

/* --- Avis clients (bandeau défilant) --- */
body.home #avis .avis-rating{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-size:15px;color:var(--ink-600);flex-wrap:wrap;justify-content:center}
body.home #avis .avis-rating .stars{color:#F59E0B;letter-spacing:1.5px;font-size:17px}
body.home #avis .avis-rating strong{color:var(--ink-900);font-weight:800;font-size:16px}
body.home #avis .avis-rating .avis-src{color:var(--ink-500)}
body.home #avis .avis-rating .g{color:#4285F4;font-weight:700}
body.home .avis-marquee{
  position:relative;z-index:2;margin-top:40px;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);
}
body.home .avis-track{display:flex;width:max-content;padding:8px 0;animation:avisMarquee 48s linear infinite}
body.home .avis-marquee:hover .avis-track{animation-play-state:paused}
@keyframes avisMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
body.home .avis-card{
  flex:0 0 auto;width:340px;margin-right:20px;background:#fff;border:1px solid var(--ink-100);
  border-radius:18px;padding:22px 24px;box-shadow:0 18px 44px -30px rgba(15,23,42,.28);
  display:flex;flex-direction:column;gap:12px;
}
body.home .avis-card .stars{color:#F59E0B;letter-spacing:1.5px;font-size:15px}
body.home .avis-card .avis-quote{font-size:14.5px;line-height:1.6;color:var(--ink-700);margin:0;flex:1}
body.home .avis-card .avis-author{display:flex;align-items:center;gap:11px}
body.home .avis-card .avis-av{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--blue-400),var(--blue-700));color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px;flex-shrink:0}
body.home .avis-card .avis-author strong{display:block;font-size:14px;color:var(--ink-900)}
body.home .avis-card .avis-author span{font-size:12.5px;color:var(--ink-500)}
@media(max-width:640px){body.home .avis-card{width:282px;margin-right:14px}}
@media (prefers-reduced-motion: reduce){body.home .avis-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto}body.home .avis-marquee{-webkit-mask-image:none;mask-image:none}}

/* ------------------------------------------------------------------
   Robustesse mobile du hero (iPhone standard / zoom d'affichage).
   Cause : `.btn` a white-space:nowrap ; le bouton CTA long
   (« Publier ma recherche — c'est gratuit ») ne pouvait ni rétrécir ni
   passer à la ligne → il forçait la colonne du hero à ~367px, débordait
   le conteneur et était rogné par overflow:hidden (contenu « coupé »).
   Fix : les items de la grille peuvent rétrécir + les boutons du hero
   passent à la ligne. Vérifié : plus aucun débordement jusqu'à 320px. */
body.home .hero-grid > *{min-width:0}
body.home .hero .hero-cta .btn{white-space:normal}

/* ------------------------------------------------------------------
   Réseaux sociaux dans la barre du haut — MOBILE UNIQUEMENT.
   Sur desktop ils restent dans le footer ; sur téléphone (≤680px, là où
   le header passe en blanc et n'affiche que logo + burger) on réaffiche
   les 3 icônes à droite, avant le burger. */
body.home .ttv-social-header{display:none;align-items:center;gap:2px}
body.home .ttv-social-header .ttv-social-link{color:var(--ink-500)}
body.home .ttv-social-header .ttv-social-link:hover{color:var(--blue-600);background:var(--ink-100)}
@media(max-width:680px){
  body.home .ttv-social-header{display:flex;margin-left:auto}
  body.home .ttv-burger{margin-left:6px}
}
/* Sous ~420px (iPhone standard, mini, zoom d'affichage), le wordmark large
   ne laisse plus la place aux icônes sociales + burger → on garde le logo
   seul (toujours cliquable vers l'accueil). Pro Max (≥421px) garde le nom. */
@media(max-width:420px){
  body.home .ttv-brand .ttv-word{display:none}
}
@media(max-width:360px){
  body.home .ttv-social-header{gap:0}
  body.home .ttv-social-header .ttv-social-link{width:30px;height:30px}
  body.home .ttv-social-header .ttv-social-link svg{width:17px;height:17px}
}

/* ------------------------------------------------------------------
   « Pourquoi ça marche » — BOUCLIER À COCHE (confiance / « mieux pour vous »),
   bleu de la marque. Il flotte doucement + halo bleu qui « respire », et la
   coche se (re)dessine en boucle. Sans cadre. Respecte prefers-reduced-motion. */
#pcm-encart .pcm-badge.pcm-shield{
  position:relative;overflow:visible;
  background:transparent;border:0;box-shadow:none;   /* pas de pastille encadrée */
}
#pcm-encart .pcm-badge .pcm-shieldsvg{
  width:40px;height:40px;overflow:visible;position:relative;z-index:1;transform-origin:50% 50%;
  animation:pcmShieldGlow 2.8s ease-in-out infinite;
}
@keyframes pcmShieldGlow{
  0%,100%{filter:drop-shadow(0 3px 6px rgba(37,99,235,.32)) drop-shadow(0 0 5px rgba(37,99,235,.22));transform:translateY(0) scale(1)}
  50%{filter:drop-shadow(0 7px 13px rgba(37,99,235,.5)) drop-shadow(0 0 13px rgba(96,165,250,.6));transform:translateY(-2px) scale(1.05)}
}
/* la coche se (re)dessine discrètement, en boucle */
#pcm-encart .pcm-sh-check{stroke-dasharray:14;stroke-dashoffset:0;animation:pcmCheck 2.8s ease-in-out infinite}
@keyframes pcmCheck{0%,16%{stroke-dashoffset:14}34%,100%{stroke-dashoffset:0}}
@media (prefers-reduced-motion: reduce){
  #pcm-encart .pcm-badge .pcm-shieldsvg,
  #pcm-encart .pcm-sh-check{animation:none}
  #pcm-encart .pcm-sh-check{stroke-dashoffset:0}
}