*{box-sizing:border-box}
:root{--bleu:#175fc7;--vert:#0b9b4f;--or:#e49a16;--encre:#17233b;--texte:#5d6a7b}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;color:var(--encre);min-height:100vh;background:
radial-gradient(circle at 9% 13%,rgba(58,189,121,.16),transparent 28rem),
radial-gradient(circle at 92% 8%,rgba(56,132,245,.16),transparent 30rem),
linear-gradient(145deg,#fffaf0 0%,#f3f8ff 52%,#f5fff9 100%)}
.portail{width:min(1080px,calc(100% - 32px));margin:auto;padding:24px 0 30px}
.portail-entete{display:flex;align-items:center;gap:15px;padding:2px 2px 20px;border-bottom:1px solid rgba(117,137,157,.2)}
.portail-entete img{width:64px;height:64px;object-fit:contain}
.portail-entete span{font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:#607083}
.portail-entete h1{font-size:1.25rem;margin:4px 0 0}
.portail-entete h1 b{color:var(--or)}
.portail-hero{margin:32px auto 0;max-width:940px;border-radius:30px;overflow:hidden;background:#fff;box-shadow:0 22px 60px rgba(27,52,83,.14);animation:heroFlotte 7s ease-in-out infinite}
.portail-hero img{display:block;width:100%;height:auto}
.choix-entete{text-align:center;padding:42px 10px 24px}
.sur-titre{margin:0;font-weight:800;color:#b66d00;text-transform:uppercase;letter-spacing:.14em;font-size:.78rem}
.choix-entete h2{font-size:clamp(1.8rem,5vw,2.8rem);margin:7px 0 8px}
.choix-entete>p:last-child{color:var(--texte);margin:auto;max-width:590px}
.espaces{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;max-width:940px;margin:auto}
.carte-image{display:block;overflow:hidden;border-radius:25px;background:#fff;border:1px solid rgba(195,208,220,.72);box-shadow:0 16px 42px rgba(26,42,69,.12);transition:transform .25s ease,box-shadow .25s ease;will-change:transform}
.carte-image img{display:block;width:100%;height:auto;transition:transform .35s ease}
.carte-image:hover,.carte-image:focus-visible{transform:translateY(-7px);box-shadow:0 24px 58px rgba(26,42,69,.19);outline:3px solid rgba(23,95,199,.22);outline-offset:4px}
.carte-image:hover img,.carte-image:focus-visible img{transform:scale(1.018)}
.carte-eleve{animation:carteFlotte 6s ease-in-out infinite}
.carte-prof{animation:carteFlotte 6s ease-in-out 1.2s infinite}
.portail-atouts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:940px;margin:28px auto 0;padding:18px;border-radius:24px;background:linear-gradient(100deg,rgba(255,247,218,.92),rgba(235,249,255,.94));border:1px solid rgba(225,210,153,.55);box-shadow:0 12px 32px rgba(38,55,77,.07)}
.portail-atouts div{display:grid;grid-template-columns:46px 1fr;column-gap:11px;align-items:center;padding:7px}
.portail-atouts span{grid-row:1/3;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.84);font-size:1.35rem;box-shadow:0 6px 17px rgba(34,56,78,.09)}
.portail-atouts strong{font-size:.92rem}
.portail-atouts small{color:#657385;line-height:1.35}
.portail-liens{display:flex;justify-content:center;gap:26px;padding:32px 20px 22px}
.portail-liens a{color:#33445a;text-decoration:none;font-weight:650}
.portail-liens a:hover{text-decoration:underline}
footer{text-align:center;color:#788696;font-size:.85rem;padding:12px}
@keyframes heroFlotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes carteFlotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@media(max-width:700px){
  .portail{width:min(100% - 22px,1080px);padding-top:14px}
  .portail-entete{padding-bottom:14px}.portail-entete img{width:54px;height:54px}.portail-entete h1{font-size:1.04rem}.portail-entete span{font-size:.66rem}
  .portail-hero{margin-top:22px;border-radius:20px;animation:none}
  .choix-entete{padding:32px 8px 19px}
  .espaces{grid-template-columns:1fr;gap:17px}
  .carte-image{border-radius:20px}.carte-eleve,.carte-prof{animation:none}
  .portail-atouts{grid-template-columns:1fr;margin-top:22px;padding:12px}
  .portail-liens{flex-direction:column;align-items:center;gap:14px}
}
@media(prefers-reduced-motion:reduce){
  .portail-hero,.carte-eleve,.carte-prof{animation:none}
  .carte-image,.carte-image img{transition:none}
}


/* ── Bannière Le Micro d'Or sur la page d'accueil ───────────
   Les textes d'origine de la topbar restent au premier plan. */
.portail-entete-concours{
  position:relative;
  isolation:isolate;
  min-height:154px;
  overflow:hidden;
  padding:22px 132px 38px;
  border:1px solid rgba(242,183,5,.55);
  border-bottom:3px solid #f2b705;
  border-radius:0 0 24px 24px;
  background:linear-gradient(112deg,#062f25 0%,#0d523e 50%,#08392d 100%);
  box-shadow:0 10px 30px rgba(6,47,37,.22);
}
.portail-identite{
  position:relative;
  z-index:4;
  display:flex;
  align-items:center;
  gap:15px;
  min-width:0;
}
.portail-entete-concours .portail-logo{
  width:64px;
  height:64px;
  flex:0 0 auto;
  object-fit:contain;
  padding:5px;
  border-radius:14px;
  background:rgba(255,255,255,.94);
  box-shadow:0 0 0 2px rgba(242,183,5,.42),0 4px 14px rgba(0,0,0,.25);
}
.portail-entete-concours .portail-identite-texte{min-width:0;text-shadow:0 1px 8px rgba(0,0,0,.55)}
.portail-entete-concours .portail-identite-texte span{color:#f8e59b;font-weight:700}
.portail-entete-concours .portail-identite-texte h1{color:#fff}
.portail-entete-concours .portail-identite-texte h1 b{color:#f2b705}
.portail-concours-decoration{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}
.portail-concours-decoration::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  background:linear-gradient(90deg,rgba(6,47,37,.04),rgba(6,47,37,.53) 25%,rgba(6,47,37,.53) 75%,rgba(6,47,37,.04));
}
.portail-trophee{
  position:absolute;
  bottom:6px;
  z-index:1;
  width:auto;
  height:140px;
  object-fit:contain;
  opacity:.95;
  filter:drop-shadow(0 8px 9px rgba(0,0,0,.38));
  animation:portailTropheeRespire 4.8s ease-in-out infinite;
}
.portail-trophee-gauche{left:8px;transform-origin:left bottom}
.portail-trophee-droite{right:8px;transform-origin:right bottom;animation-delay:-2.4s}
.portail-marquee{
  position:absolute;
  left:137px;
  right:137px;
  bottom:7px;
  z-index:3;
  height:24px;
  overflow:hidden;
  border-top:1px solid rgba(242,183,5,.48);
  border-bottom:1px solid rgba(242,183,5,.20);
  background:rgba(5,35,27,.42);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.portail-marquee-track{
  display:flex;
  align-items:center;
  width:max-content;
  min-width:200%;
  height:100%;
  white-space:nowrap;
  animation:portailMarquee 18s linear infinite;
}
.portail-marquee-track span{
  display:inline-block;
  min-width:50%;
  padding-right:56px;
  color:#f2b705;
  font-size:11px;
  line-height:22px;
  font-weight:850;
  letter-spacing:.15em;
  text-transform:uppercase;
  text-shadow:0 1px 3px rgba(0,0,0,.55);
}
@keyframes portailMarquee{to{transform:translateX(-50%)}}
@keyframes portailTropheeRespire{
  0%,100%{translate:0 0;rotate:0deg}
  50%{translate:0 -4px;rotate:.7deg}
}
@media(max-width:700px){
  .portail-entete-concours{
    min-height:126px;
    padding:15px 72px 31px;
    border-radius:0 0 18px 18px;
  }
  .portail-entete-concours .portail-identite{gap:8px;justify-content:center}
  .portail-entete-concours .portail-logo{width:43px;height:43px;padding:3px;border-radius:10px}
  .portail-entete-concours .portail-identite-texte span{font-size:.58rem;letter-spacing:.08em}
  .portail-entete-concours .portail-identite-texte h1{font-size:.91rem;white-space:nowrap}
  .portail-trophee{height:108px;bottom:5px;opacity:.94}
  .portail-trophee-gauche{left:4px}
  .portail-trophee-droite{right:4px}
  .portail-marquee{left:59px;right:59px;bottom:5px;height:22px}
  .portail-marquee-track span{font-size:8px;line-height:20px;letter-spacing:.1em;padding-right:30px}
}
@media(max-width:390px){
  .portail-entete-concours{min-height:118px;padding-left:62px;padding-right:62px}
  .portail-entete-concours .portail-logo{width:38px;height:38px}
  .portail-entete-concours .portail-identite-texte span{font-size:.52rem}
  .portail-entete-concours .portail-identite-texte h1{font-size:.78rem}
  .portail-trophee{height:98px;bottom:4px;opacity:.92}
  .portail-marquee{left:50px;right:50px}
}
@media(prefers-reduced-motion:reduce){
  .portail-trophee,.portail-marquee-track{animation:none!important}
  .portail-marquee-track{transform:none}
}