/* HERO */
.hero{background:linear-gradient(135deg,#e7f6fc 0%,var(--opeq-cream) 60%);padding:72px 0 80px}
.hero__grid{display:grid;grid-template-columns:1fr;gap:40px;align-items:center}
@media(min-width:900px){.hero__grid{grid-template-columns:1.2fr 1fr;gap:56px}}
.hero__tag{display:inline-flex;align-items:center;gap:8px;background:#fff;padding:7px 14px;border-radius:999px;font-weight:700;font-size:13px;color:var(--opeq-blue);box-shadow:0 2px 8px rgba(14,40,65,.08);margin-bottom:20px}
.hero__tag::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--opeq-blue)}
.hero__title{font-family:var(--font-display);font-weight:900;font-size:clamp(34px,5vw,62px);line-height:1.02;color:var(--opeq-navy);text-transform:uppercase;letter-spacing:-.015em;margin-bottom:22px}
.hero__title em{font-style:normal;color:var(--opeq-blue)}
.hero__sub{font-size:clamp(17px,1.6vw,20px);line-height:1.6;color:var(--opeq-navy);max-width:580px}
.hero__visual{display:flex;align-items:center;justify-content:center;gap:20px;height:320px;position:relative}
.hero__charlie{width:clamp(160px,22vw,240px);animation:floatup .7s .2s ease-out backwards}
.hero__laptop{width:clamp(100px,14vw,160px);position:absolute;bottom:10%;right:10%;opacity:.8;animation:floatup .7s .5s ease-out backwards}
@keyframes floatup{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.hero__charlie,.hero__laptop{animation:none}}

/* SECTIONS */
.section{padding:80px 0}
.section--white{background:#fff}
.section--cream{background:var(--opeq-cream)}
.section--blue{background:var(--opeq-navy)}
.section__head{text-align:center;max-width:720px;margin:0 auto 52px}
.section__head .section-title{margin-top:4px}
.section__head p{font-size:17px;line-height:1.6;color:var(--fg-muted);margin-top:14px}

/* GUIDE CARDS */
.guides{display:grid;grid-template-columns:1fr;gap:22px}
@media(min-width:700px){.guides{grid-template-columns:repeat(3,1fr)}}
.guide{background:#fff;border-radius:24px;overflow:hidden;box-shadow:0 4px 18px rgba(14,40,65,.06);display:flex;flex-direction:column;transition:transform .15s,box-shadow .15s}
.guide:hover{transform:translateY(-4px);box-shadow:0 10px 28px rgba(14,40,65,.1)}
.guide__image{aspect-ratio:16/9;background:#e7f6fc;display:flex;align-items:center;justify-content:center;font-size:52px}
.guide:nth-child(2) .guide__image{background:#fefbe6}
.guide:nth-child(3) .guide__image{background:#e6f5e0}
.guide__body{padding:26px;flex:1;display:flex;flex-direction:column;gap:12px}
.guide__step{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--opeq-blue)}
.guide:nth-child(2) .guide__step{color:#8a7010}
.guide:nth-child(3) .guide__step{color:var(--opeq-green-deep)}
.guide__title{font-family:var(--font-display);font-weight:900;font-size:22px;color:var(--opeq-navy);text-transform:uppercase;line-height:1.1}
.guide__desc{font-size:14.5px;line-height:1.55;color:var(--fg-muted);flex:1}
.guide__cta{margin-top:auto}

/* RESSOURCES EXTERNES */
.ressources{display:grid;grid-template-columns:1fr;gap:14px;max-width:860px;margin:0 auto}
@media(min-width:700px){.ressources{grid-template-columns:1fr 1fr}}
.ressource{background:#fff;border-radius:16px;padding:20px 22px;display:flex;gap:16px;align-items:flex-start;border:1px solid rgba(14,40,65,.06);text-decoration:none;color:inherit;transition:box-shadow .15s,transform .15s}
.ressource:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(14,40,65,.08)}
.ressource__icon{flex:0 0 44px;width:44px;height:44px;border-radius:12px;background:#e7f6fc;display:flex;align-items:center;justify-content:center;font-size:20px}
.ressource__name{font-weight:800;font-size:15px;color:var(--opeq-navy);margin-bottom:4px}
.ressource__desc{font-size:13px;color:var(--fg-muted);line-height:1.4}
.ressource__ext{font-size:11px;font-weight:700;color:var(--opeq-blue);margin-top:4px}

/* FORMATIONS */
.formations{display:grid;grid-template-columns:1fr;gap:14px;max-width:860px;margin:0 auto}
@media(min-width:700px){.formations{grid-template-columns:repeat(3,1fr)}}
.formation{background:#fff;border-radius:16px;padding:24px;text-align:center;border:1px solid rgba(14,40,65,.06)}
.formation__icon{font-size:32px;margin-bottom:10px}
.formation__name{font-weight:800;font-size:16px;color:var(--opeq-navy);margin-bottom:6px}
.formation__desc{font-size:14px;color:var(--fg-muted);line-height:1.4}

/* FAQ RAPIDE */
.faq{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq__item{background:#fff;border-radius:16px;border:1px solid rgba(14,40,65,.08);overflow:hidden}
.faq__q{width:100%;padding:22px 26px;background:none;border:none;font-family:var(--font-body);font-weight:700;font-size:17px;color:var(--opeq-navy);text-align:left;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq__q:hover{background:var(--opeq-cream)}
.faq__chev{flex:0 0 28px;width:28px;height:28px;border-radius:50%;background:var(--opeq-cream);display:flex;align-items:center;justify-content:center;transition:transform .2s;font-size:14px}
.faq__item--open .faq__chev{transform:rotate(180deg)}
.faq__a{max-height:0;overflow:hidden;transition:max-height .3s,padding .3s;padding:0 26px}
.faq__item--open .faq__a{max-height:300px;padding:0 26px 22px}
.faq__a p{font-size:15px;line-height:1.6;color:var(--fg-muted)}

/* CONTACT ENCART */
.contact-encart{background:var(--opeq-navy);border-radius:28px;padding:48px 52px;max-width:860px;margin:0 auto;text-align:center;color:#fff}
@media(max-width:700px){.contact-encart{padding:32px 24px}}
.contact-encart h3{font-family:var(--font-display);font-weight:900;font-size:clamp(22px,2.8vw,32px);text-transform:uppercase;line-height:1.05;margin-bottom:12px}
.contact-encart p{font-size:16px;line-height:1.6;color:rgba(255,255,255,.8);margin-bottom:24px}
.contact-encart .contact-row{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}

/* FOOTER */
.footer{background:var(--opeq-navy);color:var(--opeq-cream);padding:64px 0 0}

/* Certs band */
.partner-badge { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 140px; }