<!-- 🌐 Style global -->
<style>
/* Mise en page plein écran */
.markdown-body {
width: 100% !important;
max-width: none !important;
padding: 2vw 5vw !important;
margin: 0 !important;
background-color: #e6e9ef;
font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
color: #111;
box-sizing: border-box;
font-size: 1.2rem; /* texte plus grand sur PC */
}
/* Masquer barre CodiMD en rendu */
body.view-mode .navbar,
body.view-mode .ui-header { display: none !important; }
body { background-color: #e6e9ef !important; }
/* Sections et cartes */
section { margin-bottom: 2.5rem; }
.card {
background: #fff;
padding: 1rem 1.2rem;
border-radius: 10px;
box-shadow: 0 4px 14px rgba(0,0,0,0.08);
margin: 1rem 0;
}
button, .btn {
display: inline-block;
padding: 0.5rem 1rem;
border-radius: 8px;
background: #2c38a2;
color: #fff !important;
font-weight: 600;
text-decoration: none;
}
/* Pied de page */
footer {
text-align: center;
color: #444;
margin-top: 3rem;
font-size: 0.9rem;
padding: 1.5rem 0;
background: #d9dde4;
}
/* Bouton retour édition */
body.view-mode #return-edit {
position: fixed;
top: 15px;
right: 15px;
background: #2c38a2;
color: white !important;
padding: 0.5rem 1rem;
border-radius: 8px;
font-weight: 600;
text-decoration: none;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
body:not(.view-mode) #return-edit { display: none; }
/* Hack titre quasi invisible */
h1.hidden-title {
color: #e6e9ef;
font-size: 0.1rem;
margin: 0;
padding: 0;
line-height: 0;
}
/* Vignettes */
.vignette {
text-align: center;
margin: 1.5rem 0;
}
.vignette img {
width: 100%;
max-width: 300px;
height: auto;
display: block;
margin: auto;
border-radius: 8px;
border: 2px solid #2c38a2;
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
transition: transform 0.2s;
}
.vignette img:hover { transform: scale(1.05); }
.vignette span { font-size: 1.5rem; color: #555; display: block; margin-top: 0.3rem; }
/* Emoji devant h2 */
h2::before {
content: "✨";
font-size: 1.1em;
margin-right: 0.4em;
vertical-align: middle;
color: #5b6bff; /* Bleu clair lumineux */
text-shadow: 1px 1px 2px #333; /* pour bien ressortir sur fond clair */
}
/* Lignes séparation */
hr {
border: none;
height: 3px;
margin: 2rem 0;
background-color: #3a4eb7;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
border-radius: 2px;
}
/* Titres fluides */
h1 { color: #1e2b6d !important; font-weight: 800 !important; font-size: 1.8rem !important; line-height: 1.3 !important; margin-top: 1.5rem !important; margin-bottom: 0.8rem !important; }
h2 { color: #2b3e91 !important; font-weight: 700 !important; font-size: 1.7rem !important; line-height: 1.4 !important; margin-top: 1.2rem !important; margin-bottom: 0.6rem !important; }
h3, h4, h5, h6 { font-weight: 700; font-size: 1.3rem; }
/* Texte mobile */
@media (max-width: 768px) {
.markdown-body { font-size: 0.95rem; }
h1 { font-size: 1.4rem !important; }
h2 { font-size: 1.3rem !important; }
h3, h4, h5, h6 { font-size: 1.1rem; }
.vignette span { font-size: 1.2rem; }
}
/* Vidéo responsive avec hauteur réduite */
.video-wrapper {
position: relative;
width: 100%;
max-width: 900px; /* largeur maxi sur grand écran */
margin: 1rem auto; /* centrer la vidéo */
padding-top: 50%; /* ratio réduit pour diminuer la hauteur */
}
.video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
.btn-camera {
display: inline-block;
padding: 0.6rem 1.2rem;
border-radius: 8px;
background: #2c38a2; /* même couleur que tes autres boutons */
color: #fff !important;
font-weight: 600;
font-size: 1.1rem;
text-decoration: none;
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
transition: transform 0.2s, box-shadow 0.2s;
}
.btn-camera:hover {
transform: translateY(-2px);
box-shadow: 0 6px 14px rgba(0,0,0,0.25);
}
</style>
<!-- Image en haut de page -->
[](https://www.google.fr)
# ++La cité éducative à Guéret :++
<div class="video-wrapper">
<iframe
title="TEASER final"
src="https://tube-institutionnel.apps.education.fr/videos/embed/wS1mLRRL6GXX6YQHXqGhsM?title=0&warningTitle=0&peertubeLink=0&p2p=0" style="border: 0px;"
allowfullscreen
sandbox="allow-same-origin allow-scripts allow-popups allow-forms">
</iframe>
</div>
<!-- Bouton pour accéder à la page caméra -->
<div style="text-align:center; margin:2rem 0;">
<a href="https://codimd.apps.education.fr/s/eUHB-LqnA#" class="btn-camera">
📷 Accéder au reportage complet
</a>
</div>
<!-- Styles du bouton -->
---
# ++Les actions de la Cité Éducative++
## Rencontre inspirante pour les élèves du collège Martin Nadaud avec un pianiste de renommée internationale : **Alexandre THARAUD**
<div class="vignette">
<a href="https://codimd.apps.education.fr/s/nkFMGJM04#">
<img src="https://minio.apps.education.fr/codimd-prod/uploads/visqmarnltib5v35y3m46qdyu.jpg" alt="Rencontre Alexandre Tharaud">
</a>
</div>
<div style="text-align:center; margin:2rem 0;">
<a href="https://codimd.apps.education.fr/s/nkFMGJM04#" class="btn-camera">
📷 Accéder à l'article
</a>
</div>
---
<!-- Images horizontales en bas -->
<div style="display:flex; flex-wrap:wrap; justify-content:space-around; align-items:center; gap:10px; margin-top:2rem;">
<img src="https://minio.apps.education.fr/codimd-prod/uploads/em95qt2cm9ouwi61i6u17iix2.png" style="max-width:32%; height:auto;">
<img src="https://minio.apps.education.fr/codimd-prod/uploads/mlsfrzd2l23d5epyvg10jz2ky.png" style="max-width:32%; height:auto;">
<img src="https://minio.apps.education.fr/codimd-prod/uploads/w9ewdhr7umhi83tw06ngj90dc.png" style="max-width:32%; height:auto;">
</div>
---
<footer>
© 2025 Cité Éducative Guéret — Tous droits réservés
</footer>