/* Styles propres à la page d'accueil. */

/* Hero */
.hero{padding:96px 0 110px;position:relative;overflow:hidden;min-height:min(88vh,760px);display:flex;align-items:center;background:var(--marine) linear-gradient(160deg,var(--bleu) 0%,var(--marine) 55%,var(--marine-2) 100%);color:var(--blanc)}
.hero-media{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--marine) url("https://eurotel.sn/wp-content/uploads/2025/05/eurotel-services-ecole-du-dos.webp") center/cover no-repeat}
.hero-media iframe{position:absolute;top:50%;left:50%;border:0;pointer-events:none;transform:translate(-50%,-50%);opacity:0;transition:opacity 1.2s ease}
.hero-media iframe.visible{opacity:1}
.hero-voile{position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(10,20,71,.92) 0%,rgba(13,27,94,.80) 45%,rgba(30,86,168,.35) 100%),linear-gradient(0deg,rgba(10,20,71,.55) 0%,transparent 40%)}
.hero .conteneur{position:relative;z-index:2}
.hero h1{margin:0 0 10px;font-family:"Bebas Neue",Impact,sans-serif;font-weight:400;font-size:clamp(3.2rem,8vw,6.2rem);line-height:.92;letter-spacing:.01em}
.hero .accroche{margin:0 0 18px;font-size:clamp(1rem,1.8vw,1.2rem);font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--cyan)}
.hero p.intro{margin:0 0 30px;max-width:520px;color:rgba(255,255,255,.85);font-size:1.05rem}
.hero .actions{display:flex;flex-wrap:wrap;gap:14px}
.video-ctrl{position:absolute;right:92px;bottom:28px;z-index:3;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.5);background:rgba(10,20,71,.45);color:#fff;cursor:pointer;display:grid;place-items:center;backdrop-filter:blur(4px)}
.video-ctrl[hidden]{display:none}
.video-ctrl:hover{background:rgba(10,20,71,.7)}
.video-ctrl svg{width:16px;height:16px}

/* Pour qui */
.deux-col{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.liste-check{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.liste-check li{position:relative;padding-left:34px;font-weight:500;line-height:1.5}
.liste-check li::before{content:"";position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:50%;background:var(--cyan) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.liste-check.bleue li::before{background-color:var(--bleu)}
.pour-qui-grille{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.pour-qui-grille .titre{font-size:clamp(1.4rem,2.6vw,1.9rem);margin-bottom:22px}
.note-douce{margin-top:22px;padding:14px 18px;border-left:4px solid var(--cyan);background:var(--cyan-clair);border-radius:0 12px 12px 0;font-weight:500}
.final .entreprise{margin:28px auto 0;max-width:none;font-size:.92rem;color:rgba(255,255,255,.75)}
.final .entreprise a{color:var(--cyan);font-weight:700;text-decoration:none}

/* Galerie */
.galerie{display:grid;grid-template-columns:1.5fr 1fr 1fr;grid-template-rows:230px 230px;gap:14px}
.galerie figure{margin:0;position:relative;border-radius:var(--rayon);overflow:hidden;background:var(--cyan-clair)}
.galerie figure:first-child{grid-row:1/3}
.galerie figure:first-child img{object-position:70% center}
.galerie figure:last-child{grid-column:2/4}
.galerie img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.galerie figure:hover img{transform:scale(1.04)}
.galerie figcaption{position:absolute;left:12px;bottom:12px;padding:6px 12px;border-radius:999px;background:rgba(10,20,71,.78);color:var(--blanc);font-size:.8rem;font-weight:600;backdrop-filter:blur(4px)}

/* Déroulé */
.etapes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:18px;counter-reset:etape}
.etapes li{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--rayon);padding:26px 20px;counter-increment:etape;position:relative}
.etapes li::before{content:counter(etape);display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--cyan);color:var(--blanc);font-weight:800;margin-bottom:16px}
.etapes h3{margin:0 0 8px;font-size:1.05rem}
.etapes p{margin:0;font-size:.9rem;color:rgba(255,255,255,.78)}

/* Séances */
.liste-seances{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:18px}
.seance{background:var(--blanc);border:2px solid transparent;border-radius:var(--rayon);box-shadow:var(--ombre);padding:20px;display:grid;grid-template-columns:auto 1fr;gap:16px 18px;align-items:center;transition:border-color .2s ease,transform .2s ease}
.seance:not(.complet):hover{transform:translateY(-3px)}
.seance.actif{border-color:var(--cyan)}
.seance .date-bloc{width:72px;text-align:center;border-radius:12px;background:var(--bleu);color:var(--blanc);padding:10px 0}
.seance .date-bloc b{display:block;font-size:1.7rem;line-height:1;font-weight:800}
.seance .date-bloc small{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em}
.seance.complet .date-bloc{background:#B5BCCB}
.seance h3{margin:0;font-size:1rem}
.seance .meta{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:.86rem;color:var(--gris);margin:2px 0 10px}
.jauge{height:6px;border-radius:3px;background:var(--gris-clair);overflow:hidden;max-width:280px}
.jauge i{display:block;height:100%;background:var(--cyan);border-radius:3px}
.seance.dernieres .jauge i{background:var(--alerte)}
.seance.complet .jauge i{background:#B5BCCB}
.places{display:inline-block;margin-top:6px;font-size:.8rem;font-weight:700;color:var(--bleu)}
.seance.dernieres .places{color:var(--alerte)}
.seance.complet .places{color:var(--gris)}
.seance .btn{grid-column:1/-1;width:100%;padding:13px 22px}
.aucune{padding:28px;text-align:center;background:var(--blanc);border-radius:var(--rayon);color:var(--gris)}

/* Réservation */
.resa-grille{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:start}
.resa-points{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:14px}
.resa-points li{display:flex;gap:14px;align-items:flex-start;color:rgba(255,255,255,.88)}
.resa-points li b{color:var(--blanc)}
.resa-points .icone{background:rgba(0,168,232,.18);color:var(--cyan);width:40px;height:40px}
.formulaire{background:var(--blanc);color:var(--texte);border-radius:20px;padding:30px;box-shadow:0 30px 60px rgba(0,0,0,.25)}
.recap{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--cyan-clair);border-radius:12px;padding:14px 16px;margin-bottom:22px}
.recap small{display:block;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--bleu)}
.recap strong{font-size:.98rem}
.recap .prix{font-size:1.2rem;font-weight:800;color:var(--bleu);white-space:nowrap}
.champs{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.champ{display:grid;gap:6px}
.champ.large{grid-column:1/-1}
.champ label,.champ legend{font-size:.84rem;font-weight:600}
.champ label .opt{font-weight:400;color:var(--gris)}
.champ input:not([type=radio]):not([type=checkbox]),.champ select,.champ textarea{width:100%;padding:12px 14px;border:1.5px solid var(--gris-clair);border-radius:10px;font:500 .95rem "Montserrat",sans-serif;color:var(--texte);background:var(--blanc)}
.champ textarea{min-height:84px;resize:vertical}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 4px rgba(0,168,232,.15)}
fieldset.champ{border:0;padding:0;margin:0}
.consentement label{display:flex;gap:10px;align-items:flex-start;font-weight:400;line-height:1.5;color:var(--gris);cursor:pointer}
.consentement input{flex:none;margin:3px 0 0;accent-color:var(--bleu)}
.consentement a{color:var(--bleu);font-weight:600}
.radios{display:flex;flex-wrap:wrap;gap:8px}
.radios label{flex:none;white-space:nowrap;display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:1.5px solid var(--gris-clair);border-radius:999px;font-weight:500;cursor:pointer}
.radios input{accent-color:var(--bleu);margin:0}
.radios label:has(input:checked){border-color:var(--bleu);background:var(--cyan-clair);color:var(--bleu)}
.formulaire .btn{width:100%;margin-top:22px;padding:16px}
.note-acompte{display:flex;gap:12px;align-items:flex-start;margin-top:20px;padding:14px 16px;border-radius:12px;background:#FFF4E5;color:#7A3E00;font-size:.88rem;line-height:1.5}
.note-acompte svg{flex:none;width:20px;height:20px;margin-top:1px;color:#B54708}
.note-acompte b{color:#B54708}
.erreur{display:none;margin-top:14px;padding:12px 14px;border-radius:10px;background:#FDECEC;color:#B42318;font-size:.88rem;font-weight:600}
.succes{display:none;text-align:center;padding:12px 4px}
.succes .coche{width:68px;height:68px;margin:0 auto 16px;border-radius:50%;background:#E7F7EE;color:var(--succes);display:grid;place-items:center}
.succes h3{margin:0 0 8px;font-size:1.35rem;color:var(--bleu)}
.succes p{margin:0 0 12px;color:var(--gris)}
.succes .encadre{text-align:left;background:var(--fond);border-radius:12px;padding:16px 18px;margin:18px 0;font-size:.9rem}
.succes .encadre div{display:flex;justify-content:space-between;gap:12px;padding:4px 0}
.succes .encadre div span:first-child{color:var(--gris)}
.succes .encadre div span:last-child{font-weight:700;text-align:right}
.statut-attente{display:inline-block;padding:4px 10px;border-radius:999px;background:#FFF4E5;color:#B54708;font-size:.78rem;font-weight:700}

/* Formateur */
.formateur-section{padding:64px 0}
.formateur{display:grid;grid-template-columns:auto 1fr;gap:56px;align-items:center}
.formateur-photo{position:relative;width:220px}
.formateur-photo img{color:transparent;width:220px;height:220px;border-radius:50%;object-fit:cover;border:6px solid var(--cyan-clair);background:var(--cyan-clair)}
.formateur-photo .badge{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);white-space:nowrap;background:var(--bleu);color:var(--blanc);box-shadow:0 8px 18px rgba(30,86,168,.35)}
.surtitre{display:block;font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan);margin-bottom:6px}
.formateur h2{margin:0 0 12px;font-size:clamp(1.8rem,3.4vw,2.5rem);font-weight:800;line-height:1.1;color:var(--bleu)}
.formateur h2 em{font-style:normal;font-weight:300}
.formateur-bio{margin:0 0 26px;max-width:620px;color:var(--gris);font-size:1.02rem}

/* FAQ */
.faq{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.faq details{background:var(--blanc);border:1px solid var(--gris-clair);border-radius:12px;padding:0 20px}
.faq summary{cursor:pointer;list-style:none;padding:18px 32px 18px 0;font-weight:700;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:1.5rem;font-weight:400;color:var(--cyan)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 18px;color:var(--gris)}
.faq details a{color:var(--bleu);font-weight:700}

/* Appel final */
.final{text-align:center;padding:72px 0}
.final h2{margin:0 auto 10px;max-width:760px;font-family:"Bebas Neue",Impact,sans-serif;font-weight:400;font-size:clamp(2.4rem,5.5vw,3.8rem);line-height:1;letter-spacing:.01em}
.final p{margin:0 auto 28px;max-width:520px;color:rgba(255,255,255,.8)}

/* Responsive */
@media (prefers-reduced-motion:reduce){.hero-media iframe{display:none}}
@media (max-width:1024px){
  .etapes{grid-template-columns:repeat(2,1fr)}
  .faq{grid-template-columns:1fr}
  .etapes li:last-child{grid-column:1/-1}
}
@media (max-width:860px){
  .pour-qui-grille{grid-template-columns:1fr;gap:40px}
  .galerie{grid-template-columns:1fr 1fr;grid-template-rows:240px 160px 160px}
  .galerie figure:first-child{grid-column:1/-1;grid-row:auto}
  .galerie figure:last-child{grid-column:1/-1}
  .hero{padding:56px 0 72px;min-height:0}
  .hero-voile{background:linear-gradient(180deg,rgba(10,20,71,.75) 0%,rgba(13,27,94,.88) 100%)}
  .deux-col,.resa-grille{grid-template-columns:1fr;gap:36px}
  .formateur{grid-template-columns:1fr;gap:32px;text-align:center}
  .formateur-photo{margin:0 auto}
  .formateur-bio{margin-inline:auto}
}
@media (max-width:560px){
  .etapes,.champs{grid-template-columns:1fr}
  .etapes li:last-child{grid-column:auto}
  .etapes li{display:grid;grid-template-columns:auto 1fr;column-gap:14px;padding:16px}
  .etapes li::before{grid-row:1/3;margin:0;width:36px;height:36px}
  .etapes h3{margin-bottom:2px}
  .faq{grid-template-columns:1fr}
  .liste-seances{grid-template-columns:1fr}
  .galerie{grid-template-rows:220px 130px 150px;gap:10px}
  .formulaire{padding:22px 18px}
  .recap{flex-direction:column;align-items:flex-start}
  .video-ctrl{right:16px;bottom:16px}
}

/* Animations */
@keyframes entree-hero {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: none; }
}
.hero h1, .hero .accroche, .hero p.intro, .hero .actions { animation: entree-hero .8s cubic-bezier(.2,.7,.3,1) both; }
.hero .accroche { animation-delay: .15s; }
.hero p.intro { animation-delay: .3s; }
.hero .actions { animation-delay: .45s; }

.etapes li { transition: transform .2s ease, background .2s ease; }
.etapes li:hover { transform: translateY(-4px); background: rgba(255,255,255,.1); }

.faq details { transition: border-color .2s ease, box-shadow .2s ease; }
.faq details:hover { border-color: var(--cyan); }
.faq details[open] { box-shadow: var(--ombre); }
.faq details[open] p { animation: ouverture-faq .3s ease both; }
@keyframes ouverture-faq {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

.succes .coche { animation: apparition-coche .5s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes apparition-coche {
  from { opacity: 0; transform: scale(.5); }
  to { opacity: 1; transform: none; }
}