/*
Theme Name: Étoiles Academy
Theme URI: https://etoiles-academy.sn
Author: Groupe scolaire Étoiles Academy
Description: Thème WordPress pleine page pour école maternelle et élémentaire. Page d'accueil en une seule page (diaporama, classes, horaires, inscription, galerie, actualités, contact), en-tête collant, pied de page à widgets et coordonnées modifiables depuis la personnalisation.
Version: 1.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: etoiles-academy
Tags: education, one-page, full-width, custom-logo, custom-menu, featured-images, translation-ready
*/


:root{
  --nuit:#10214B; --nuit-2:#16295C; --nuit-3:#0B1734;
  --or:#D9A420; --or-clair:#F3CB69;
  --ciel:#4FA3D9; --ciel-pale:#E4F1FA;
  --mangue:#EF8F3C;
  --creme:#FFF8EC; --craie:#FFFDF8;
  --encre:#22304E; --gris:#5D6B86; --trait:#E7DECB;
  --r-s:8px; --r-m:14px; --r-l:22px;
  --max:1560px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:96px}
body{margin:0; background:var(--craie); color:var(--encre);
  font-family:"Nunito Sans",system-ui,sans-serif; font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:"Baloo 2","Nunito Sans",sans-serif; line-height:1.15; margin:0; font-weight:700}
p{margin:0 0 1rem}
a{color:inherit}
img{max-width:100%; display:block}
.wrap{max-width:var(--max); margin:0 auto; padding:0 clamp(20px,4vw,60px)}
.section{padding:clamp(52px,7vw,92px) 0}
.star{width:1em;height:1em;display:inline-block;vertical-align:-.12em;fill:var(--or)}

.titre-sec{text-align:center; max-width:720px; margin:0 auto clamp(34px,5vw,56px)}
.titre-sec .sur{font-family:"Baloo 2"; color:var(--mangue); font-weight:600; font-size:1rem; display:block; margin-bottom:.3rem}
.titre-sec h2{font-size:clamp(1.8rem,3.6vw,2.7rem)}
.titre-sec p{color:var(--gris); margin:.9rem 0 0}
.filet{display:flex; align-items:center; justify-content:center; gap:8px; margin:14px 0 0}
.filet i{display:block; height:3px; width:52px; background:var(--trait); border-radius:2px}
.filet .star{font-size:1.1rem}

.btn{display:inline-flex; align-items:center; gap:.5rem; font-family:"Baloo 2",sans-serif; font-weight:600;
  border-radius:999px; padding:.7rem 1.5rem; text-decoration:none; border:0; cursor:pointer; font-size:1rem}
.btn-or{background:var(--or); color:#1A1405; box-shadow:0 5px 0 #A97C14}
.btn-or:hover{background:var(--or-clair)}
.btn-or:active{transform:translateY(2px); box-shadow:0 3px 0 #A97C14}
.btn-ligne{border:2px solid rgba(255,255,255,.65); color:#fff}
.btn-ligne:hover{background:rgba(255,255,255,.14)}

/* ---------- barre supérieure ---------- */
.topbar{background:var(--nuit-3); color:#A9BCDD; font-size:.9rem}
.topbar .wrap{display:flex; align-items:center; gap:22px; min-height:42px; flex-wrap:wrap}
.topbar span{display:inline-flex; align-items:center; gap:.45rem}
.topbar svg{width:15px; height:15px; fill:var(--or)}
.topbar a{color:#DCE6F7; text-decoration:none}
.topbar a:hover{color:#fff}
.topbar .droite{margin-left:auto; display:flex; gap:18px; flex-wrap:wrap}

/* ---------- en-tête ---------- */
.entete{background:#fff; border-bottom:1px solid var(--trait); position:sticky; top:0; z-index:60;
  box-shadow:0 2px 14px rgba(16,33,75,.07)}
.entete .wrap{display:flex; align-items:center; gap:20px; height:100px}
.marque{display:flex; align-items:center; gap:12px; text-decoration:none; margin-right:auto}
.marque img{height:78px; width:auto}
.marque b{display:block; font-family:"Baloo 2"; font-size:1.2rem; color:var(--nuit); letter-spacing:.05em; line-height:1.05}
.marque .sous{font-size:.72rem; letter-spacing:.24em; color:var(--mangue); text-transform:uppercase}
.menu{display:flex; gap:24px}
.menu a{text-decoration:none; font-weight:700; font-size:.96rem; color:var(--nuit); padding:6px 0;
  border-bottom:3px solid transparent}
.menu a:hover,.menu a.actif{border-color:var(--or)}
.burger{display:none; background:none; border:0; color:var(--nuit); font-size:1.7rem; cursor:pointer; line-height:1}

/* ---------- diaporama ---------- */
.diapo{position:relative; background:var(--nuit); overflow:hidden}
.slide{position:absolute; inset:0; opacity:0; transition:opacity .9s ease}
.slide.on{opacity:1; position:relative}
.slide>img{width:100%; height:clamp(460px,calc(100vh - 124px),820px); object-fit:cover; opacity:.45}
.slide .voile{position:absolute; inset:0;
  background:linear-gradient(100deg,rgba(9,20,50,.93) 0%,rgba(9,20,50,.74) 48%,rgba(9,20,50,.28) 100%)}
.slide .txt{position:absolute; inset:0; display:flex; align-items:center}
.slide .txt .wrap{width:100%}
.slide h1,.slide h2{color:#fff; font-size:clamp(2rem,4.6vw,3.5rem); font-weight:800; max-width:17ch; text-shadow:0 2px 20px rgba(0,0,0,.35)}
.slide em{font-style:normal; color:var(--or-clair)}
.slide p{color:#E2EAF8; max-width:56ch; font-size:clamp(1rem,1.7vw,1.18rem); margin-top:1rem}
.slide .boutons{display:flex; gap:12px; flex-wrap:wrap; margin-top:1.7rem}
.etiq{display:inline-flex; align-items:center; gap:.5rem; background:rgba(255,255,255,.13); color:#fff;
  border:1px solid rgba(255,255,255,.24); border-radius:999px; padding:.35rem .95rem; font-weight:600; font-size:.9rem; margin-bottom:1rem}
.fleche{position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:46px; height:46px; border-radius:50%;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.3); color:#fff; font-size:1.3rem; cursor:pointer;
  display:grid; place-items:center; line-height:1}
.fleche:hover{background:rgba(255,255,255,.3)}
.fleche.g{left:18px} .fleche.d{right:18px}
.points{position:absolute; bottom:78px; left:0; right:0; z-index:5; display:flex; justify-content:center; gap:9px}
.points button{width:11px; height:11px; border-radius:50%; border:0; background:rgba(255,255,255,.45); cursor:pointer; padding:0}
.points button.on{background:var(--or); width:28px; border-radius:6px}

/* ---------- encarts chevauchants ---------- */
.encarts{position:relative; z-index:6; margin-top:-58px}
.encarts .grille{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.encart{background:#fff; border-radius:var(--r-l); padding:26px; box-shadow:0 14px 34px rgba(16,33,75,.13);
  border-top:5px solid var(--or); display:flex; gap:16px; align-items:flex-start}
.encart:nth-child(2){border-top-color:var(--ciel)}
.encart:nth-child(3){border-top-color:var(--mangue)}
.encart .rond{width:48px; height:48px; flex:none; border-radius:50%; background:var(--ciel-pale); display:grid; place-items:center}
.encart .rond svg{width:23px; height:23px; fill:var(--nuit)}
.encart h3{font-size:1.15rem; margin-bottom:.25rem}
.encart p{margin:0; font-size:.96rem; color:var(--gris)}

/* ---------- à propos ---------- */
.apropos{display:grid; grid-template-columns:1fr 1.1fr; gap:52px; align-items:center}
.cadre-photo{position:relative}
.cadre-photo img{width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:var(--r-l); box-shadow:0 18px 40px rgba(16,33,75,.18)}
.cadre-photo .vignette{position:absolute; right:-18px; bottom:-22px; background:var(--or); color:#1A1405;
  border-radius:var(--r-m); padding:16px 22px; font-family:"Baloo 2"; box-shadow:0 10px 24px rgba(0,0,0,.2)}
.cadre-photo .vignette b{display:block; font-size:1.6rem; line-height:1}
.cadre-photo .vignette span{font-size:.85rem}
.apropos h2{font-size:clamp(1.7rem,3.2vw,2.4rem); margin-bottom:1rem}
.apropos .sur{font-family:"Baloo 2"; color:var(--mangue); font-weight:600}
.promesses{display:grid; gap:14px; margin-top:1.4rem}
.promesse{display:flex; gap:14px; align-items:flex-start; background:var(--creme); border:1px solid var(--trait);
  border-radius:var(--r-m); padding:16px 18px}
.promesse .n{width:32px; height:32px; flex:none; border-radius:50%; background:var(--nuit); color:var(--or-clair);
  display:grid; place-items:center; font-family:"Baloo 2"; font-size:.95rem}
.promesse b{font-family:"Baloo 2"; font-size:1.05rem; display:block}
.promesse span{font-size:.95rem; color:var(--gris)}

/* ---------- classes ---------- */
.classes{display:grid; grid-template-columns:repeat(3,1fr); gap:30px}
.classe{background:#fff; border:1px solid var(--trait); border-radius:var(--r-l); padding:28px 24px; text-align:center;
  box-shadow:0 10px 26px rgba(21,35,72,.06); transition:transform .25s ease, box-shadow .25s ease}
.classe:hover{transform:translateY(-5px); box-shadow:0 18px 34px rgba(21,35,72,.13)}
.classe .medaillon{width:122px; height:122px; margin:0 auto 14px}
.classe .age{font-family:"Baloo 2"; color:var(--mangue); font-weight:600}
.classe p{font-size:.96rem; color:var(--gris); margin:.55rem 0 0}
.classe .eff{margin-top:16px; padding-top:14px; border-top:1px dashed var(--trait); font-weight:700; font-size:.93rem}
.elementaire{margin-top:26px; background:var(--ciel-pale); border:1px solid #C3E0F2; border-radius:var(--r-l);
  padding:32px; display:grid; grid-template-columns:150px 1fr; gap:28px; align-items:center}
.niveaux{display:flex; flex-wrap:wrap; gap:10px; margin:14px 0 0; padding:0; list-style:none}
.niveaux li{background:#fff; border:1px solid #C3E0F2; border-radius:999px; padding:.35rem 1rem; font-weight:700; font-size:.92rem; color:var(--nuit)}

/* ---------- compteurs ---------- */
.compteurs{background:var(--nuit); color:#fff; position:relative; overflow:hidden}
.compteurs .grille{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:center; position:relative; z-index:2}
.compteur b{display:block; font-family:"Baloo 2"; font-size:clamp(2.2rem,4.4vw,3.1rem); color:var(--or-clair); line-height:1.05}
.compteur span{color:#C4D3EC; font-size:.98rem}
.ciel{position:absolute; inset:0; z-index:1; pointer-events:none}

/* ---------- horaires ---------- */
.journee{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:start}
.timeline{list-style:none; margin:0; padding:0; border-left:2px solid var(--trait)}
.timeline li{position:relative; padding:0 0 24px 28px}
.timeline li::before{content:""; position:absolute; left:-9px; top:5px; width:16px; height:16px; border-radius:50%;
  background:var(--or); border:3px solid var(--craie)}
.timeline li:last-child{padding-bottom:0}
.timeline .h{font-family:"Baloo 2"; font-weight:700; color:var(--nuit); font-size:1.1rem}
.timeline .d{color:var(--gris); font-size:.96rem}
.encadre{background:#fff; border:1px solid var(--trait); border-radius:var(--r-l); padding:30px; box-shadow:0 10px 26px rgba(21,35,72,.06)}
.encadre h3{margin-bottom:.8rem}
.encadre ul{margin:0; padding-left:1.1rem; color:var(--gris)}
.encadre li{margin-bottom:.5rem}
.encadre li b{color:var(--encre)}

/* ---------- inscription ---------- */
.deux{display:grid; grid-template-columns:1fr 1fr; gap:30px}
.dossier{list-style:none; margin:18px 0 0; padding:0}
.dossier li{display:flex; gap:.85rem; align-items:flex-start; padding:14px 0; border-bottom:1px dashed var(--trait); font-weight:600}
.dossier li:last-child{border-bottom:0}
.dossier .star{margin-top:.35em; flex:none}
.regime{background:#fff; border:1px solid var(--trait); border-left:6px solid var(--mangue); border-radius:var(--r-m);
  padding:18px 22px; margin-bottom:16px}
.regime b{font-family:"Baloo 2"; font-size:1.08rem}
.regime span{display:block; color:var(--gris); font-size:.96rem}
.postes{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px}
.poste{background:var(--craie); border:1px solid var(--trait); border-radius:var(--r-m); padding:14px 16px}
.poste b{display:block; font-family:"Baloo 2"; font-size:1.03rem}
.poste span{color:var(--gris); font-size:.92rem}
.tableau{list-style:none; padding:0; margin:0}
.tableau li{display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px dashed var(--trait)}
.tableau li:last-child{border-bottom:0}

/* ---------- galerie ---------- */
.galerie{display:grid; grid-template-columns:repeat(2,1fr); gap:20px}
.galerie figure{margin:0; border-radius:var(--r-l); overflow:hidden; background:#fff; border:1px solid var(--trait)}
.galerie img{width:100%; height:330px; object-fit:cover}
.galerie figcaption{padding:14px 18px; font-size:.95rem; color:var(--gris)}
.galerie figure:first-child{grid-column:span 2}
.galerie figure:first-child img{height:480px}

/* ---------- actualités ---------- */
.billets{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.billet{background:#fff; border:1px solid var(--trait); border-radius:var(--r-l); overflow:hidden;
  box-shadow:0 10px 26px rgba(21,35,72,.06); display:flex; flex-direction:column}
.billet .vig{position:relative}
.billet .vig img{height:210px; width:100%; object-fit:cover}
.billet .date{position:absolute; left:16px; bottom:-18px; background:var(--or); color:#1A1405; border-radius:var(--r-s);
  padding:8px 12px; text-align:center; font-family:"Baloo 2"; line-height:1.05; box-shadow:0 6px 16px rgba(0,0,0,.2)}
.billet .date b{display:block; font-size:1.25rem}
.billet .date span{font-size:.72rem; letter-spacing:.06em}
.billet .corps{padding:34px 22px 22px}
.billet .cat{font-size:.85rem; font-weight:700; color:var(--mangue)}
.billet h3{font-size:1.18rem; margin:.35rem 0 .5rem}
.billet p{font-size:.95rem; color:var(--gris); margin:0}

/* ---------- appel à l'action ---------- */
.cta{background:linear-gradient(100deg,var(--nuit) 0%,var(--nuit-2) 100%); color:#fff}
.cta .wrap{display:flex; align-items:center; gap:30px; flex-wrap:wrap; padding-top:44px; padding-bottom:44px}
.cta h2{font-size:clamp(1.5rem,3vw,2.1rem)}
.cta p{margin:.4rem 0 0; color:#C9D7EE}
.cta .boutons{margin-left:auto; display:flex; gap:12px; flex-wrap:wrap}

/* ---------- contact ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1.05fr; gap:44px; align-items:start}
.coord{list-style:none; margin:0; padding:0}
.coord li{display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--trait)}
.coord b{display:block; font-family:"Baloo 2"; color:var(--nuit); font-size:1.05rem}
.coord .ico{width:42px; height:42px; flex:none; border-radius:50%; background:var(--ciel-pale); display:grid; place-items:center}
.coord .ico svg{width:19px; height:19px; fill:var(--nuit)}
.formulaire{background:#fff; border:1px solid var(--trait); border-radius:var(--r-l); padding:32px; box-shadow:0 12px 30px rgba(21,35,72,.08)}
.formulaire h3{margin-bottom:18px}
.champ{margin-bottom:16px}
.champ label{display:block; font-weight:700; font-size:.92rem; margin-bottom:6px}
.champ input,.champ select,.champ textarea{width:100%; font:inherit; font-size:.98rem; padding:.7rem .9rem;
  border:1.5px solid var(--trait); border-radius:var(--r-s); background:var(--craie); color:var(--encre)}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:3px solid rgba(79,163,217,.45); border-color:var(--ciel)}
.duo{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.aide{font-size:.87rem; color:var(--gris); margin:.7rem 0 0}
.retour{margin-top:12px; font-weight:700; color:#1E7A46; display:none}

/* ---------- pied de page ---------- */
footer{background:var(--nuit); color:#A9BCDD; padding-top:56px; font-size:.95rem}
.widgets{display:grid; grid-template-columns:1.4fr 1fr 1.2fr 1fr; gap:34px; padding-bottom:44px}
.widget h4{color:#fff; font-size:1.1rem; margin-bottom:16px; position:relative; padding-bottom:10px}
.widget h4::after{content:""; position:absolute; left:0; bottom:0; width:42px; height:3px; background:var(--or); border-radius:2px}
.widget ul{list-style:none; margin:0; padding:0}
.widget li{padding:7px 0; display:flex; gap:.6rem; align-items:flex-start}
.widget a{color:#C6D5EE; text-decoration:none}
.widget a:hover{color:#fff}
.widget .star{font-size:.8rem; margin-top:.45em; flex:none}
.widget-marque .pastille{width:78px; height:78px; border-radius:50%; background:#FFFDF8; display:grid;
  place-items:center; margin-bottom:16px}
.widget-marque .pastille img{height:56px}
.copyright{border-top:1px solid rgba(255,255,255,.13); padding:18px 0; font-size:.9rem}
.copyright .wrap{display:flex; gap:16px; flex-wrap:wrap; justify-content:space-between}

/* ---------- flottants ---------- */
.flottant{position:fixed; right:18px; bottom:18px; z-index:70; background:#25D366;
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center; box-shadow:0 8px 22px rgba(0,0,0,.28)}
.flottant svg{width:29px; height:29px; fill:#fff}
.haut{position:fixed; right:20px; bottom:86px; z-index:70; width:44px; height:44px; border-radius:var(--r-s);
  background:var(--nuit); color:#fff; border:0; cursor:pointer; font-size:1.1rem; display:none; place-items:center}
.haut.vu{display:grid}

@media (max-width:980px){
  .encarts{margin-top:-30px}
  .encarts .grille,.classes,.billets,.journee,.deux,.apropos,.contact-grid{grid-template-columns:1fr}
  .compteurs .grille{grid-template-columns:repeat(2,1fr); gap:28px}
  .widgets{grid-template-columns:1fr 1fr}
  .galerie{grid-template-columns:1fr}
  .galerie figure:first-child{grid-column:auto}
  .galerie figure:first-child img,.galerie img{height:230px}
  .elementaire{grid-template-columns:1fr; text-align:center}
  .elementaire .medaillon{margin:0 auto}
  .niveaux{justify-content:center}
  .cta .boutons{margin-left:0}
  .points{bottom:16px}
  .menu{position:absolute; top:100px; left:0; right:0; background:#fff; flex-direction:column; gap:0;
    padding:6px 22px 16px; display:none; border-bottom:1px solid var(--trait); box-shadow:0 12px 24px rgba(16,33,75,.12)}
  .menu.ouvert{display:flex}
  .menu a{padding:12px 0; border-bottom:1px solid var(--trait)}
  .burger{display:block}
  .entete .btn{display:none}
  .fleche{display:none}
  .cadre-photo .vignette{right:10px}
}
@media (max-width:560px){
  .postes,.duo{grid-template-columns:1fr}
  .widgets{grid-template-columns:1fr}
  .formulaire,.encadre{padding:22px}
  .topbar .droite{margin-left:0}
  .topbar .adresse{display:none}
  .topbar .wrap{justify-content:center; gap:12px}
}
@media (prefers-reduced-motion:no-preference){
  .scintille{animation:scintille 4.5s ease-in-out infinite}
  .scintille:nth-child(2n){animation-delay:1.2s}
  .scintille:nth-child(3n){animation-delay:2.4s}
  @keyframes scintille{0%,100%{opacity:.25}50%{opacity:1}}
}
@media (prefers-reduced-motion:reduce){
  .slide,.classe{transition:none}
}

/* ---------- intégration WordPress ---------- */
.admin-bar .entete{top:32px}
@media screen and (max-width:782px){.admin-bar .entete{top:46px}}
.screen-reader-text{position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap}
.menu ul{list-style:none; margin:0; padding:0; display:flex; gap:24px}
.menu li{position:relative}
.menu .sub-menu{position:absolute; top:100%; left:0; display:none; flex-direction:column; gap:0; background:#fff;
  min-width:220px; padding:8px 0; border:1px solid var(--trait); border-radius:var(--r-m); box-shadow:0 14px 30px rgba(16,33,75,.14); z-index:5}
.menu li:hover>.sub-menu{display:flex}
.menu .sub-menu a{padding:8px 18px; border-bottom:0}
.menu .current-menu-item>a{border-color:var(--or)}

.entete-page{background:linear-gradient(100deg,var(--nuit) 0%,var(--nuit-2) 100%); color:#fff; padding:clamp(44px,7vw,84px) 0; position:relative; overflow:hidden}
.entete-page h1{font-size:clamp(1.9rem,4vw,3rem); position:relative; z-index:2}
.entete-page .fil{color:#C9D7EE; font-size:.95rem; margin-top:.6rem; position:relative; z-index:2}
.entete-page .fil a{color:var(--or-clair); text-decoration:none}

.contenu{max-width:78ch; margin:0 auto}
.contenu.pleine{max-width:none}
.contenu h2{font-size:1.9rem; margin:2rem 0 .8rem}
.contenu h3{font-size:1.4rem; margin:1.6rem 0 .6rem}
.contenu img{border-radius:var(--r-m); height:auto}
.contenu ul,.contenu ol{padding-left:1.3rem}
.contenu li{margin-bottom:.4rem}
.contenu blockquote{margin:1.6rem 0; padding:1rem 1.4rem; border-left:5px solid var(--or); background:var(--creme); border-radius:0 var(--r-m) var(--r-m) 0}
.contenu a{color:var(--nuit)}
.meta{color:var(--gris); font-size:.95rem; margin-bottom:1.4rem}
.wp-caption{max-width:100%}
.wp-caption-text,.wp-block-image figcaption{font-size:.9rem; color:var(--gris)}
.alignleft{float:left; margin:0 1.5rem 1rem 0}
.alignright{float:right; margin:0 0 1rem 1.5rem}
.aligncenter{margin-left:auto; margin-right:auto}
.pagination{display:flex; gap:8px; justify-content:center; margin-top:40px; flex-wrap:wrap}
.pagination .page-numbers{padding:.5rem .95rem; border:1px solid var(--trait); border-radius:var(--r-s);
  background:#fff; text-decoration:none; font-weight:700}
.pagination .current{background:var(--or); border-color:var(--or)}
.widget .textwidget{color:#A9BCDD}
.widget select,.widget input{width:100%; padding:.6rem .8rem; border-radius:var(--r-s); border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.08); color:#fff}