/* Safi Surf Camp – École & À propos | assets/css/ecole-apropos.css
   Self-contenu : variables et styles propres, ne dépend d'aucune classe
   du thème actif, pour un rendu cohérent quel que soit le thème utilisé. */

.ssea-ecole-wrap, .ssea-about-wrap {
	--ssea-ocean:      #0E4D6E;
	--ssea-terracotta: #C1592D;
	--ssea-dark:       #23201C;
	--ssea-gray:       #5A5347;
	--ssea-light-blue: #F3ECE1;
	--ssea-r-sm:  8px;
	--ssea-r-lg:  20px;
	--ssea-r-pill:2rem;
	--ssea-font-d:'Fraunces',Georgia,serif;
	--ssea-font-b:'Work Sans',-apple-system,sans-serif;
	font-family: var(--ssea-font-b);
	box-sizing: border-box;
}
.ssea-ecole-wrap *, .ssea-about-wrap * { box-sizing: border-box; }

.ssea-label{font-size:.73rem;font-weight:600;letter-spacing:.2em;color:var(--ssea-terracotta);text-transform:uppercase;margin-bottom:.8rem;display:block}
.ssea-title{font-family:var(--ssea-font-d);font-weight:700;font-size:clamp(1.8rem,4vw,2.7rem);color:var(--ssea-dark);margin:0 0 1rem}
.ssea-sub{font-size:.97rem;color:var(--ssea-gray);line-height:1.75;max-width:540px;margin:0 0 2.2rem;text-align:justify}
.ssea-btn{background:var(--ssea-terracotta);color:#fff;border:none;padding:.82rem 2rem;border-radius:var(--ssea-r-sm);font-size:.9rem;font-weight:600;cursor:pointer;transition:background .2s;display:inline-block;font-family:var(--ssea-font-b)}
.ssea-btn:hover{background:#9C441F}

/* ---------- École de Surf ---------- */
.ssea-cours-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
@media(max-width:820px){.ssea-cours-grid{grid-template-columns:1fr}}

.ssea-cours-visual{border-radius:var(--ssea-r-lg);background:linear-gradient(135deg,var(--ssea-ocean),#0a3550);height:360px;display:flex;align-items:center;justify-content:center;font-size:5rem;overflow:hidden}
.ssea-cours-visual.ssea-has-img img{width:100%;height:100%;object-fit:cover;display:block}

.ssea-niveau-list{display:flex;flex-direction:column;gap:.9rem;list-style:none;margin:0;padding:0}
.ssea-niveau-item{display:flex;gap:1rem;align-items:flex-start;padding:1rem;border-radius:var(--ssea-r-sm);border:1px solid #EDE4D6;transition:border-color .2s}
.ssea-niveau-item:hover{border-color:var(--ssea-terracotta)}
.ssea-niveau-dot{width:36px;height:36px;border-radius:50%;background:var(--ssea-light-blue);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1.1rem}
.ssea-niveau-name{font-weight:600;font-size:.9rem;color:var(--ssea-dark);margin-bottom:.18rem}
.ssea-niveau-desc{font-size:.8rem;color:var(--ssea-gray);text-align:justify}

.ssea-coaching-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin-top:2rem}
.ssea-coaching-card{background:var(--ssea-light-blue);border-radius:var(--ssea-r-sm);padding:1rem;border:1px solid #E3D9CB}
.ssea-coaching-card h4{font-size:.88rem;font-weight:700;color:var(--ssea-ocean);margin:0 0 .3rem}
.ssea-coaching-card p{font-size:.78rem;color:var(--ssea-gray);line-height:1.55;margin:0}

/* ---------- À propos ---------- */
.ssea-about-wrap{background:var(--ssea-ocean);color:#fff;border-radius:var(--ssea-r-lg);padding:clamp(1.8rem,4vw,3.2rem)}
.ssea-about-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
@media(max-width:820px){.ssea-about-grid{grid-template-columns:1fr}}

.ssea-label-light{color:#E08A5B}
.ssea-title-light{color:#fff}

.ssea-about-tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.5rem}
.ssea-about-tab{padding:.38rem .95rem;border-radius:var(--ssea-r-pill);border:1px solid rgba(255,255,255,.25);font-size:.78rem;color:rgba(255,255,255,.7);background:transparent;cursor:pointer;transition:all .2s;font-family:var(--ssea-font-b)}
.ssea-about-tab.active{background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.5)}
.ssea-about-panel{display:none}
.ssea-about-panel.show{display:block}
.ssea-about-panel p{font-size:.9rem;color:rgba(255,255,255,.78);line-height:1.75;margin:0;text-align:justify}

.ssea-about-values{display:flex;flex-direction:column;gap:.7rem;margin:1.2rem 0 0;padding:0;list-style:none}
.ssea-about-val{display:flex;align-items:flex-start;gap:.6rem;font-size:.87rem;color:rgba(255,255,255,.82)}
.ssea-about-val::before{content:'✓';color:#E08A5B;font-size:.7rem;flex-shrink:0;margin-top:.18rem}

.ssea-about-visual{border-radius:var(--ssea-r-lg);overflow:hidden;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);height:340px;display:flex;align-items:center;justify-content:center;font-size:5rem}
.ssea-about-visual.ssea-has-img img{width:100%;height:100%;object-fit:cover;display:block}