:
on neutralise la marge propre au form. */
.ftr .news form.row {
margin: 0;
}
/* =========================================================
INSCRIPTION — retour d'erreur et reference
========================================================= */
.cons .reg-err {
display: none;
margin: 0 0 16px;
padding: 12px 16px;
border-radius: 10px;
background: rgba(226, 55, 68, .08);
border: 1px solid rgba(226, 55, 68, .45);
color: #a5271b;
font-size: 15px;
line-height: 1.45;
}
.cons .reg-err.on {
display: block;
}
.cons .done .ref {
margin-top: 10px;
font-weight: 700;
letter-spacing: .5px;
color: var(--c-blue);
}
/* =========================================================
CORRECTIONS D'AFFICHAGE MOBILE
Des règles responsives existent plus haut dans cette feuille,
mais deux passes d'ajustements écrites ensuite les écrasent à
spécificité égale — par exemple « .pri .photo { min-height:420px } »
prévu sous 980 px, annulé plus bas par « height:auto ».
Ce bloc est volontairement placé en dernier pour rétablir le
comportement attendu sans toucher aux règles d'origine.
========================================================= */
/* ---------------------------------------------------------
1 · HERO
« .inner » est en position:absolute, donc hors du flux : il ne
donne aucune hauteur à son conteneur. Tant que « .slide-screen »
valait 100vh, « .gl-stage » était étiré par flex ; dès que la
hauteur passe en auto sous 1280 px, la chaîne s'effondre à zéro
et le hero disparaît entièrement. On remet le contenu dans le flux.
--------------------------------------------------------- */
@media (max-width: 1279px) {
#heroSection .slide-screen {
height: auto;
min-height: 0;
}
#heroSection .gl-stage {
flex: 0 0 auto;
min-height: 0;
}
#heroSection .inner {
position: relative;
inset: auto;
}
/* Même cause : ce bloc se réduisait à zéro et masquait le titre. */
#heroSection .text {
flex: none;
min-height: 0;
overflow: visible;
padding-bottom: 10px;
}
}
/* Le titre est dimensionné en 4.6vw, soit 17 px sur un téléphone.
On repasse sur une échelle lisible en dessous du format tablette. */
@media (max-width: 900px) {
#heroSection .h1 {
font-size: clamp(32px, 7.4vw, 58px);
letter-spacing: -.5px;
}
#heroSection .lead {
font-size: clamp(15px, 3.6vw, 18px);
}
#heroSection .story h2 {
font-size: clamp(24px, 5.4vw, 34px);
}
#heroSection .vision h3 {
font-size: clamp(22px, 5vw, 30px);
}
}
@media (max-width: 640px) {
#heroSection .gl-stage {
margin: .75rem .5rem;
border-radius: 20px;
}
#heroSection .topbar {
margin: 18px 20px 0;
}
/* Deux blocs de 270 px chacun allongent inutilement la page. */
#heroSection .stats,
#heroSection .vision {
min-height: 0;
}
}
/* ---------------------------------------------------------
2 · INFORMATIONS PRATIQUES
Les quatre cartes vivent dans un rail flex clippé par
« overflow:hidden », prévu pour être défilé — mais aucun script
ne pilote ce rail. Sous 640 px, chaque carte occupant 100 % de
la largeur, seule la première restait atteignable. On fait
passer les cartes à la ligne plutôt que de les clipper.
--------------------------------------------------------- */
@media (max-width: 980px) {
.news .vp {
overflow: visible;
}
.news .track {
flex-wrap: wrap;
transform: none;
transition: none;
}
.news .card {
flex: 0 0 calc((100% - 26px) / 2);
}
}
@media (max-width: 640px) {
.news .card {
flex: 0 0 100%;
}
}
/* ---------------------------------------------------------
3 · APPEL À COMMUNICATIONS
Le cadre de l'image ne contient qu'un
![]()
en position:absolute.
Sur grand écran il est étiré par « align-items:stretch » de la
grille ; en une seule colonne, plus rien ne l'étire et sa hauteur
tombe à zéro — l'image existe mais n'a aucune surface où s'afficher.
On lui donne donc une hauteur propre.
--------------------------------------------------------- */
@media (max-width: 980px) {
.pri .grid2 {
grid-template-columns: 1fr;
}
.pri .left {
display: block;
}
.pri .photo {
flex: none;
height: auto;
min-height: 300px;
aspect-ratio: 4 / 3;
}
}
@media (max-width: 560px) {
.pri .photo {
min-height: 240px;
aspect-ratio: 3 / 2;
}
}
/* ---------------------------------------------------------
4 · INSCRIPTION
La carte du formulaire est en position:absolute, calée à droite
du panneau et centrée par une transformation. La règle prévue
sous 1080 px la remettait à plat, mais une passe ultérieure lui
rendait sa transformation et sa hauteur maximale : sur mobile,
le formulaire se superposait au panneau au lieu de le suivre.
--------------------------------------------------------- */
@media (max-width: 1080px) {
.cons .cta {
min-height: 0;
padding: 34px 26px;
}
.cons .cta-content {
max-width: none;
padding-right: 0;
}
.cons .cta h1 {
font-size: clamp(28px, 6.4vw, 40px);
}
.cons .form-card {
position: static;
transform: none;
transform-origin: initial;
width: auto;
max-height: none;
overflow: visible;
margin-top: 22px;
}
}
/* ---------------------------------------------------------
5 · GARDE-FOUS
Aucun média ne doit pouvoir élargir la page au-delà de l'écran.
--------------------------------------------------------- */
@media (max-width: 980px) {
#heroSection img,
.sec img,
.ftr img {
max-width: 100%;
}
.res .wm {
display: none;
}
}
/* ---------------------------------------------------------
6 · MENU BURGER
Sous 900 px, la barre du haut faisait passer les six entrees
sur une troisieme ligne, qui mangeait la hauteur du hero.
Elles sont regroupees dans un panneau depliant.
--------------------------------------------------------- */
#heroSection .nav-toggle {
display: none;
}
@media (max-width: 900px) {
#heroSection .topbar {
position: relative;
flex-wrap: nowrap;
gap: 12px;
}
#heroSection .nav-toggle {
display: inline-flex;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 46px;
height: 46px;
flex: none;
padding: 0 11px;
border-radius: 12px;
background: rgba(255, 255, 255, .14);
border: 1px solid rgba(255, 255, 255, .30);
cursor: pointer;
}
#heroSection .nav-toggle span {
display: block;
width: 100%;
height: 2px;
background: #fff;
border-radius: 2px;
transition: transform .25s ease, opacity .2s ease;
}
/* Les trois barres deviennent une croix a l'ouverture. */
#heroSection .topbar.is-open .nav-toggle span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
#heroSection .topbar.is-open .nav-toggle span:nth-child(2) {
opacity: 0;
}
#heroSection .topbar.is-open .nav-toggle span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
#heroSection .menu {
position: absolute;
top: calc(100% + 14px);
left: 0;
right: 0;
z-index: 60;
order: 0;
flex-basis: auto;
display: none;
flex-direction: column;
align-items: stretch;
gap: 0;
padding: 8px;
background: rgba(6, 42, 78, .98);
border: 1px solid rgba(255, 255, 255, .18);
border-radius: 16px;
box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .5);
}
#heroSection .topbar.is-open .menu {
display: flex;
}
#heroSection .menu li {
padding: 0;
border-radius: 10px;
}
#heroSection .menu li+li {
border-top: 1px solid rgba(255, 255, 255, .10);
}
#heroSection .menu li a {
display: block;
padding: 14px 16px;
font-size: 16px;
}
/* Le soulignement jaune n'a plus de sens dans une liste verticale. */
#heroSection .menu li.active {
padding: 0;
background: rgba(127, 208, 255, .16);
}
#heroSection .menu li.active::after {
display: none;
}
}
@media (max-width: 560px) {
/* Le nom de l'autorite passe a la ligne et pousse le burger : le sceau suffit. */
#heroSection .brand span:last-child {
display: none;
}
#heroSection .contact {
padding: 10px 16px;
font-size: 14px;
}
}
/* ---------------------------------------------------------
7 · HERO PLUS COMPACT SUR TELEPHONE
Empiles, les trois blocs de cartes et leurs marges de grand
ecran donnaient un hero interminable au defilement.
--------------------------------------------------------- */
@media (max-width: 640px) {
#heroSection .text {
margin: 24px 0 18px;
}
#heroSection .lead {
margin-bottom: 16px;
}
#heroSection .cards {
gap: 14px;
padding-bottom: 18px;
}
#heroSection .story {
padding: 20px;
gap: 16px;
}
#heroSection .video {
width: 118px;
height: 118px;
}
#heroSection .stats {
padding: 20px 22px;
}
#heroSection .vision {
padding: 22px 0 0 22px;
}
#heroSection .word {
font-size: 58px;
}
#heroSection .big {
font-size: 32px;
}
}
/* ---------------------------------------------------------
8 · CRÉDIT DE CONCEPTION
« .ftr .copy » est en #cfd6cb sur fond #8e1d36 : sans traitement
propre, le lien se confondrait avec le texte de copyright.
--------------------------------------------------------- */
.ftr .bottom .copy .credit {
display: inline-block;
margin-left: 8px;
}
.ftr .bottom .copy .credit a {
color: #ffffff;
font-weight: 700;
text-decoration: none;
transition: color .2s;
}
.ftr .bottom .copy .credit a:hover,
.ftr .bottom .copy .credit a:focus-visible {
color: var(--lime);
}
@media (max-width: 560px) {
/* Sur une colonne etroite, le credit merite sa propre ligne. */
.ftr .bottom .copy .credit {
display: block;
margin-left: 0;
margin-top: 6px;
}
}
/* ---------------------------------------------------------
9 · PORTRAITS DES INTERVENANTS
Les cartes sans photo gardent leurs initiales sur aplat ;
celles qui en ont une recoivent un
![]()
place exactement
comme l'etait le bloc d'initiales, sous le degrade de
lisibilite du nom.
--------------------------------------------------------- */
.team .card img {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
object-fit: cover;
/* Cadrage haut : sur un portrait plus large que la carte,
un recadrage centre couperait le haut du visage. */
object-position: center 18%;
}
/* ---------------------------------------------------------
10 · LECTEUR VIDEO
Fenetre modale native :