/* CMS HOSANNA — animations et éléments vivants, partagés par toutes les pages */
.vie-progress{position:fixed; top:0; left:0; height:3px; width:0; background:linear-gradient(90deg,#4A90D9,#F9A825); z-index:1000; transition:width .1s linear;}
header.vie-scrolled{box-shadow:0 6px 24px rgba(0,51,153,.14) !important;}
header .nav-wrap{transition:padding .25s ease;}
header.vie-scrolled .nav-wrap{padding-top:8px; padding-bottom:8px;}

/* Bandeau campagne */
.vie-bandeau{display:block; background:linear-gradient(90deg,#E91E78,#C2185B,#E91E78); background-size:200% 100%; animation:vie-glisse 6s linear infinite; color:#fff; text-decoration:none; font-family:'Poppins',sans-serif; font-weight:600; font-size:.9rem; text-align:center; padding:9px 16px; line-height:1.4;}
.vie-bandeau b{color:#FFE08A;}
.vie-bandeau .vie-fleche{display:inline-block; margin-left:6px; animation:vie-pousse 1.4s ease-in-out infinite;}
@keyframes vie-glisse{to{background-position:-200% 0;}}
@keyframes vie-pousse{50%{transform:translateX(4px);}}

/* Boutons : reflet qui passe et onde au toucher */
.btn{position:relative; overflow:hidden; isolation:isolate;}
.btn:hover{transform:translateY(-2px);}
.btn-primary::after{content:""; position:absolute; top:0; left:-60%; width:40%; height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent); transform:skewX(-20deg); animation:vie-reflet 4.5s ease-in-out infinite; z-index:-1;}
@keyframes vie-reflet{0%,70%{left:-60%;} 100%{left:130%;}}
.vie-onde{position:absolute; border-radius:50%; background:rgba(255,255,255,.45); transform:scale(0); animation:vie-onde .6s ease-out forwards; pointer-events:none;}
@keyframes vie-onde{to{transform:scale(4); opacity:0;}}

/* Cartes : légère élévation, icône qui s'anime */
.card, .testi-card, .photo-card{transition:transform .3s ease, box-shadow .3s ease;}
.card:hover, .testi-card:hover{transform:translateY(-6px); box-shadow:0 18px 40px rgba(0,51,153,.14);}
.card:hover .card-icon, .card:hover .icon{animation:vie-saut .6s ease;}
@keyframes vie-saut{40%{transform:translateY(-6px) scale(1.08);} 70%{transform:translateY(1px);}}

/* Apparition en cascade */
.reveal.vie-d1{transition-delay:.08s;} .reveal.vie-d2{transition-delay:.16s;} .reveal.vie-d3{transition-delay:.24s;}

/* Héros vivant */
.hero{background-size:180% 180% !important; animation:vie-degrade 14s ease-in-out infinite alternate;}
@keyframes vie-degrade{from{background-position:0% 0%;} to{background-position:100% 100%;}}
.vie-bulle{position:absolute; border-radius:50%; background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.28),rgba(74,144,217,.12)); pointer-events:none; z-index:1; animation:vie-flotte linear infinite;}
@keyframes vie-flotte{0%{transform:translateY(0) translateX(0);} 50%{transform:translateY(-40px) translateX(14px);} 100%{transform:translateY(0) translateX(0);}}
.hero h1, .hero .motto, .hero p, .hero .hero-actions, .hero .eyebrow{animation:vie-entree .9s cubic-bezier(.2,.7,.2,1) both;}
.hero .eyebrow{animation-delay:.05s;} .hero h1{animation-delay:.15s;} .hero .motto{animation-delay:.3s;} .hero p{animation-delay:.4s;} .hero .hero-actions{animation-delay:.55s;}
@keyframes vie-entree{from{opacity:0; transform:translateY(22px);} to{opacity:1; transform:none;}}
.vie-defile{display:block; font-family:'Poppins',sans-serif; font-weight:700; color:#fff; font-size:1.05rem; min-height:1.6em; margin:-6px 0 14px;}
.vie-defile span{color:#F9A825; border-right:3px solid #F9A825; padding-right:3px; animation:vie-curseur .8s step-end infinite;}
@keyframes vie-curseur{50%{border-color:transparent;}}

/* Bande de chiffres */
.vie-chiffres{position:relative; z-index:5; margin-top:-56px; padding:0 0 8px;}
.vie-chiffres .grille{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; background:#fff; border-radius:20px; padding:22px; box-shadow:0 18px 44px rgba(0,51,153,.13);}
.vie-chiffre{text-align:center; padding:6px;}
.vie-chiffre b{display:block; font-family:'Poppins',sans-serif; font-size:clamp(1.6rem,4vw,2.2rem); font-weight:800; color:#003399; line-height:1.1;}
.vie-chiffre b small{font-size:.55em; color:#4A90D9;}
.vie-chiffre > span{font-size:.85rem; color:#5B6577;}
@media (max-width:760px){.vie-chiffres .grille{grid-template-columns:repeat(2,1fr);} .vie-chiffres{margin-top:-40px;}}

/* Témoignages en carrousel sur téléphone */
@media (max-width:760px){
  .vie-carrousel{display:flex !important; overflow-x:auto; scroll-snap-type:x mandatory; gap:14px; padding-bottom:10px; scrollbar-width:none;}
  .vie-carrousel::-webkit-scrollbar{display:none;}
  .vie-carrousel > *{flex:0 0 86%; scroll-snap-align:center;}
  .vie-points{display:flex; justify-content:center; gap:8px; margin-top:8px;}
  .vie-points i{width:8px; height:8px; border-radius:50%; background:#D6E3F2; transition:all .3s;}
  .vie-points i.on{width:22px; border-radius:6px; background:#4A90D9;}
}
@media (min-width:761px){.vie-points{display:none;}}

/* Retour en haut */
.vie-haut{position:fixed; left:20px; bottom:24px; width:46px; height:46px; border-radius:50%; border:none; background:#003399; color:#fff; font-size:1.3rem; cursor:pointer; box-shadow:0 8px 20px rgba(0,51,153,.3); opacity:0; transform:translateY(20px); transition:all .3s; z-index:199;}
.vie-haut.on{opacity:1; transform:none;}

@media (prefers-reduced-motion: reduce){
  .vie-bandeau, .vie-bandeau .vie-fleche, .btn-primary::after, .hero, .vie-bulle, .hero h1, .hero .motto, .hero p, .hero .hero-actions, .hero .eyebrow, .vie-defile span{animation:none !important;}
}

/* Menu mobile : totalement caché quand il est fermé */
@media (max-width:960px){
  header nav:not(.open){visibility:hidden; transition:transform .3s ease, visibility 0s linear .3s;}
  header nav.open{visibility:visible; transition:transform .3s ease;}
}

.vie-court{display:none;}
@media (max-width:640px){.vie-long{display:none;} .vie-court{display:inline;} .vie-bandeau{font-size:.85rem; padding:8px 12px;}}

/* ===== Accueil : parcours patients ===== */
.parcours{padding:64px 0 40px;}
.parcours-card{background:#fff; border:1.5px solid #E2EAF5; border-radius:18px; padding:22px; transition:transform .3s, box-shadow .3s, border-color .3s;}
.parcours-card:hover{transform:translateY(-6px); box-shadow:0 18px 40px rgba(0,51,153,.12); border-color:#4A90D9;}
.parcours-ic{width:54px; height:54px; border-radius:16px; background:#EAF3FC; display:grid; place-items:center; font-size:1.6rem; margin-bottom:14px;}
.parcours-card h3{font-size:1.1rem; margin-bottom:6px;}
.parcours-card p{color:#5b6474; font-size:.92rem; margin-bottom:14px;}
.parcours-liens{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.parcours-wa{width:40px; height:40px; border-radius:50%; background:#25D366; display:grid; place-items:center; text-decoration:none; font-size:1.1rem; flex:none; transition:transform .2s;}
.parcours-wa:hover{transform:scale(1.1);}
.parcours-sein{text-align:center; margin-top:26px; background:#FDECF3; border-radius:14px; padding:14px 18px; color:#22303F;}
.parcours-sein a{color:#C2185B; font-weight:700;}

/* ===== Accueil : pourquoi nous ===== */
.pourquoi{padding:64px 0;}
.pourquoi-grille{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.pourquoi-item{display:flex; gap:14px; align-items:flex-start; background:#fff; border-radius:16px; padding:20px; box-shadow:0 6px 20px rgba(0,51,153,.06);}
.pourquoi-item > span{flex:none; width:46px; height:46px; border-radius:14px; background:linear-gradient(135deg,#003399,#4A90D9); display:grid; place-items:center; font-size:1.3rem;}
.pourquoi-item h3{font-size:1rem; margin-bottom:4px;}
.pourquoi-item p{font-size:.9rem; color:#5b6474;}

/* ===== Accueil : conseils santé ===== */
.conseils-sante{padding:56px 0;}
.article-card{display:block; text-decoration:none; color:inherit; background:#fff; border-radius:18px; padding:22px; border:1.5px solid #E2EAF5; transition:transform .3s, box-shadow .3s;}
.article-card:hover{transform:translateY(-6px); box-shadow:0 18px 40px rgba(0,51,153,.12);}
.article-ic{font-size:1.8rem; display:block; margin-bottom:10px;}
.article-card h3{font-size:1.05rem; margin-bottom:6px;}
.article-card p{font-size:.9rem; color:#5b6474; margin-bottom:12px;}

/* ===== Avis ===== */
.avis-cta{text-align:center; margin-top:24px;}
.avis-cta .source-note{margin-top:10px;}

/* ===== Localisation ===== */
.localisation{padding:56px 0;}
.loc-grille{display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:center;}
.loc-grille img{width:100%; height:320px; object-fit:cover; border-radius:20px; box-shadow:0 18px 40px rgba(0,51,153,.14);}
.loc-grille h2{margin:8px 0 10px;}
.loc-grille p{color:#5b6474; margin-bottom:14px;}
.loc-infos{list-style:none; margin:0 0 20px; padding:0; display:flex; flex-direction:column; gap:8px;}
.loc-infos a{color:#003399; font-weight:600;}

/* ===== Appel final ===== */
.cta-final{background:linear-gradient(140deg,#4A90D9,#003399); color:#fff; text-align:center; padding:60px 0;}
.cta-final h2{color:#fff; margin-bottom:10px;}
.cta-final p{color:rgba(255,255,255,.88); margin-bottom:22px;}
.cta-btns{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}

@media (max-width:900px){
  .pourquoi-grille{grid-template-columns:1fr 1fr;}
  .loc-grille{grid-template-columns:1fr;}
  .loc-grille img{height:220px;}
}
@media (max-width:600px){ .pourquoi-grille{grid-template-columns:1fr;} }

/* ===== Barre d'actions fixe sur téléphone ===== */
.vie-barre{display:none;}
@media (max-width:760px){
  .vie-barre{display:grid; grid-template-columns:repeat(4,1fr); position:fixed; left:0; right:0; bottom:0; z-index:300; background:#fff; border-top:1px solid #E2EAF5; box-shadow:0 -6px 20px rgba(0,51,153,.1); padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));}
  .vie-barre a{display:flex; flex-direction:column; align-items:center; gap:2px; text-decoration:none; color:#003399; font-size:.72rem; font-weight:700; font-family:'Poppins',sans-serif; padding:4px 0;}
  .vie-barre a span{font-size:1.25rem; line-height:1;}
  .vie-barre a.rdv{color:#1a1200;}
  .vie-barre a.rdv span{background:#F9A825; border-radius:10px; padding:2px 10px;}
  body.vie-avec-barre{padding-bottom:70px;}
  body.vie-avec-barre .wa-float{display:none;}
  body.vie-avec-barre .vie-haut{bottom:84px; left:auto; right:16px; width:40px; height:40px; font-size:1.1rem;}
}
@media (max-width:760px){
  .parcours .grid-3{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
  .parcours-card{padding:14px; border-radius:14px;}
  .parcours-ic{width:42px; height:42px; font-size:1.25rem; margin-bottom:8px; border-radius:12px;}
  .parcours-card h3{font-size:.95rem;}
  .parcours-card p{font-size:.8rem; margin-bottom:10px;}
  .parcours-liens .link{font-size:.8rem;}
  .parcours-wa{width:34px; height:34px; font-size:.95rem;}
  .parcours{padding:48px 0 28px;}
}