suivi directement d'une
*/ .content ul + p { margin-top: 20px; /* Crée une transition visuelle agréable */ } /* Met en valeur un texte important */ .highlight { color: #000080; /* Texte en bleu foncé */ text-decoration: underline; /* Souligne le texte */ font-weight: bold; /* Le met en gras */ margin-bottom: 0; /* Aucun espace sous l’élément (utile pour un titre ou un mot isolé) */ } /* Applique un style italique au texte ciblé */ .italic-text { font-style: italic; /* Met le texte en italique */ } /* ==================== FOOTER ==================== */ .footer { background-color: #004466; /* Couleur du fond du footer */ color: white; /* Couleur du texte */ text-align: center; /* Centrage horizontal du contenu */ padding: 10px 0; /* Espace vertical interne */ position: fixed; /* Footer fixé en bas de l'écran */ bottom: 0; /* Collé au bas de la fenêtre */ width: 100%; /* Prend toute la largeur de la page */ box-shadow: 0 -2px 5px rgba(0,0,0,0.3); /* Ombre vers le haut pour un léger relief */ font-size: 12px; /* Taille du texte du footer */ } /* ==================== POUR LA PAGE UN PEU D'HISTOIRE ==================== */ /* Conteneur principal qui regroupe le texte et l'image côte à côte */ .text-image-container { display: flex; /* Active le mode flexbox pour aligner les éléments horizontalement */ gap: 20px; /* Espace horizontal entre le texte et l'image */ align-items: center; /* Centre verticalement les deux colonnes */ flex-wrap: wrap; /* Permet aux blocs de passer à la ligne si l'écran est trop étroit */ margin-bottom: 40px; /* Espace sous le bloc (séparation avec la suite du contenu) */ } /* Colonne contenant le texte */ .text-column { flex: 7; /* Représente 70 % de l'espace total (rapport 7/10) */ min-width: 250px; /* Évite que le texte devienne trop étroit sur petits écrans */ } /* Colonne contenant l'image */ .image-column { flex: 3; /* Représente 30 % de l'espace total (rapport 3/10) */ display: flex; /* Permet de centrer l'image dans la colonne */ justify-content: center;/* Centre l’image horizontalement */ align-items: center; /* Centre l’image verticalement */ min-width: 150px; /* Assure une largeur minimale pour la colonne image */ } /* Style appliqué à l’image */ .image-column img { max-width: 100%; /* L’image ne dépasse jamais la largeur de son conteneur */ height: auto; /* Garde les proportions d’origine */ border-radius: 10px; /* Arrondit légèrement les coins */ box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Ajoute une ombre légère autour de l’image */ } /* Bloc texte pleine largeur si utilisé */ .full-text { width: 100%; /* Prend toute la largeur du parent */ } /* ==================== RESPONSIVE (moins de 768px = mobile) ==================== */ @media (max-width: 768px) { /* Sur mobile, texte et image passent l'un sous l'autre */ .text-image-container { flex-direction: column; /* Passe du mode horizontal au mode vertical */ align-items: stretch; /* Chaque élément prend toute la largeur */ } /* Chaque colonne devient un bloc qui occupe 100 % de la largeur */ .text-column, .image-column { flex: 1 1 100%; /* Flex-grow, flex-shrink, flex-basis → 100% */ } /* Espace au-dessus de l’image lorsqu’elle passe sous le texte */ .image-column { margin-top: 20px; } } /* ==================== LIGNE D’IMAGES ==================== */ /* Conteneur qui aligne plusieurs images sur une même ligne */ .image-row { display: flex; /* Active le modèle flexbox pour aligner les images horizontalement */ gap: 20px; /* Espace horizontal entre chaque image */ justify-content: center; /* Centre toutes les images horizontalement dans le conteneur */ flex-wrap: wrap; /* Permet aux images de passer sur plusieurs lignes si l’espace est trop petit */ align-items: flex-start; /* Aligne les images en haut sur l’axe vertical */ } /* Style appliqué à chaque image de la ligne */ .image-row img { max-height: 250px; /* Limite la hauteur maximale de l’image à 250px */ width: auto; /* La largeur s’ajuste automatiquement pour garder les proportions */ height: auto; /* Hauteur proportionnelle pour ne pas déformer l’image */ border-radius: 10px; /* Arrondit les coins de l’image */ box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Ajoute une ombre légère pour donner du relief */ cursor: pointer; /* Change le curseur en main au survol (indique que l’image est cliquable) */ display: block; /* Supprime l’espace en bas que les images inline génèrent normalement */ transition: transform 0.2s; /* Ajoute une animation fluide pour toute transformation (ex: hover zoom) */ } /* ==================== RESPONSIVE (moins de 768px) ==================== */ @media (max-width: 768px) { /* Ajustement des images sur mobile */ .image-row img { max-height: 200px; /* Images légèrement plus petites pour s’adapter à l’écran */ width: auto; /* La largeur reste automatique pour conserver les proportions */ margin-bottom: 20px; /* Ajoute un espace vertical entre les images lorsqu’elles sont empilées */ } } /* ==================== PAGE DU BUREAU ==================== */ /* Conteneur général pour toutes les personnes du bureau */ .bureau { display: flex; /* Active le modèle flexbox pour aligner les éléments horizontalement */ justify-content: center; /* Centre toutes les personnes horizontalement dans le conteneur */ gap: 30px; /* Espace horizontal entre chaque personne */ flex-wrap: wrap; /* Permet aux personnes de passer sur plusieurs lignes si l’espace est insuffisant */ margin-top: 20px; /* Espace au-dessus du conteneur */ } /* Bloc individuel représentant une personne */ .personne { width: 180px; /* Largeur fixe du bloc */ text-align: center; /* Centre le texte à l’intérieur du bloc */ padding: 10px; /* Espacement interne autour du contenu */ border-radius: 10px; /* Arrondit légèrement les coins du bloc */ box-shadow: 0 3px 8px rgba(0,0,0,0.1); /* Ombre légère pour donner du relief */ } /* Image de la personne */ .personne img { width: 100%; /* L’image prend toute la largeur du bloc */ height: 180px; /* Hauteur fixe pour uniformité */ object-fit: cover; /* L’image remplit son conteneur sans déformation (recadrage possible) */ border-radius: 8px; /* Coins arrondis pour l’image */ } /* Nom de la personne */ .nom { font-size: 1.0em; /* Taille du texte (équivalente à 16px si 1em = 16px) */ font-weight: bold; /* Texte en gras */ margin-top: 4px; /* Petit espace au-dessus du nom */ margin-bottom: 2px; /* Petit espace sous le nom */ } /* Fonction de la personne */ .fonction { font-size: 1.0em; /* Taille identique au nom */ font-weight: normal; /* Texte normal (non gras) */ color: black; /* Couleur noire pour le texte */ margin-top: 0; /* Pas d’espace au-dessus */ margin-bottom: 2px; /* Petit espace sous le texte */ } /* Styles spécifiques selon le rôle de la personne */ /* Président */ .personne.president { border: 3px solid #004466; /* Bordure bleue foncée */ background-color: #3399b3; /* Fond bleu clair */ } /* Trésorier */ .personne.tresorier { border: 3px solid #004466; /* Bordure bleue foncée */ background-color: #5F9EA0; /* Fond bleu moyen */ } /* Secrétaire */ .personne.secretaire { border: 3px solid #004466; /* Bordure bleue foncée */ background-color: #5c92be; /* Fond bleu intermédiaire */ } /* ==================== RESPONSIVE (moins de 768px) ==================== */ @media (max-width: 768px) { /* Réduction de la largeur des blocs pour les petits écrans */ .personne { width: 140px; /* Largeur plus petite */ } /* Réduction de la hauteur des images pour correspondre à la largeur réduite */ .personne img { height: 140px; /* Hauteur réduite pour garder un ratio carré */ } } /* ==================== CARROUSEL DE PHOTOS ==================== */ /* Conteneur principal du carrousel */ .carousel-container { position: relative; /* Pour positionner les flèches à l'intérieur */ width: 90%; /* Largeur du carrousel */ max-width: 1600px; /* Limite largeur maximale */ height: 400px; /* Hauteur fixe du carrousel */ margin: 40px auto; /* Centre horizontalement et marge haut/bas */ overflow: hidden; /* Cache les images qui dépassent */ border: 4px solid #004466; /* Cadre bleu */ border-radius: 10px; /* Coins arrondis */ background-color: #D9D9D9; /* Fond du carrousel */ } /* Conteneur intermédiaire pour masquer le débordement horizontal */ .carousel-track-container { overflow: hidden; /* Cache tout ce qui dépasse horizontalement */ height: 100%; /* Prend toute la hauteur du carrousel */ } /* Conteneur de toutes les images en ligne */ .carousel-track { display: flex; /* Les images s’alignent horizontalement */ transition: transform 0.5s ease; /* Animation fluide lors du défilement */ height: 100%; /* Pour que les slides aient la même hauteur */ } /* Chaque slide individuel */ .carousel-slide { min-width: 33.333%; /* 3 images visibles */ box-sizing: border-box; /* Inclut le padding dans la largeur */ padding: 5px; /* Espace autour des images */ display: flex; /* Flex pour centrer image */ align-items: center; /* Centre verticalement l'image */ justify-content: center; /* Centre horizontalement l'image */ height: 100%; /* Prend toute la hauteur du track */ } /* Images à l'intérieur des slides */ .carousel-slide img { display: block; /* Supprime l’espace blanc en dessous de l’image */ max-width: 100%; /* L'image s'adapte à la largeur du slide */ max-height: 100%; /* L'image s'adapte à la hauteur du slide */ object-fit: contain; /* Conserve les proportions sans couper l’image */ border-radius: 8px; /* Coins arrondis des images */ } /* ==================== BOUTONS DE NAVIGATION ==================== */ /* Flèches générales */ .carousel-btn { position: absolute; /* Position sur le carrousel */ top: 50%; /* Centre verticalement */ transform: translateY(-50%); /* Ajuste le centrage exact */ background-color: rgba(0,0,0,0.5); /* Fond semi-transparent */ color: white; /* Couleur de la flèche */ border: none; /* Pas de bordure */ font-size: 2em; /* Taille de la flèche */ padding: 10px; /* Espacement interne */ cursor: pointer; /* Curseur pointer */ border-radius: 5px; /* Coins arrondis */ z-index: 10; /* Toujours au-dessus des images */ } /* Flèche gauche : à l’intérieur du cadre */ .carousel-btn.prev { left: 5px; /* Bord gauche du carrousel */ } /* Flèche droite : à l’intérieur du cadre */ .carousel-btn.next { right: 5px; /* Bord droit du carrousel */ } /* Effet au survol des flèches */ .carousel-btn:hover { background-color: rgba(0,0,0,0.8); /* Fond plus foncé */ } /* ==================== RESPONSIVE ==================== */ @media (max-width: 768px) { .carousel-slide { min-width: 100%; /* 1 image visible sur mobile */ } } /* ==================== IMAGES DE LA PAGE BOUTIQUE ==================== */ .boutique { width: 300px; /* Largeur identique pour toutes les images */ height: 300px; /* Hauteur identique pour toutes les images */ object-fit: contain; /* Conserve les proportions sans couper l'image */ margin: 10px; /* Espace entre les images */ border-radius: 10px; /* Coins arrondis optionnel */ box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Optionnel : effet d'ombre */ } /* ========================================================= */ /* ==================== REVUE DE PRESSE ==================== */ /* ========================================================= */ /* Conteneur général de la revue de presse : - affiche deux colonnes (liste + article) - hauteur = fenêtre - 180px (pour s'adapter au header/menu) - overflow hidden pour éviter les scrollbars inutiles */ .revue-container { display: flex; /* Mise en page en colonnes */ height: calc(100vh - 180px); /* Hauteur dynamique */ background-color: #D9D9D9; /* Gris clair */ overflow: hidden; /* Cache débordements */ transition: all 0.4s ease; /* Animation fluide lors du redimensionnement */ } /* Mode "full" : seulement la liste affichée (mode mobile ou fermeture article) */ .revue-container.full .liste-articles { width: 100%; /* La liste prend toute la largeur */ } .revue-container.full .affichage-article { display: none; /* Zone article masquée */ } /* ========== LISTE DES ARTICLES (colonne de gauche) ========== */ .liste-articles { width: 20%; /* 40% de l'écran */ min-width: 250px; /* Largeur minimale pour éviter écrasement */ background-color: #D9D9D9; color: #000080; /* Bleu foncé pour les titres */ padding: 20px; /* Marges internes */ border-right: 3px solid #76828b; /* Séparation visuelle */ overflow-y: auto; /* Scroll vertical si beaucoup d'articles */ transition: all 0.4s ease; /* Animation fluide si changement de taille */ } /* Style d’un article dans la liste */ .article-item { background-color: #e6e7e8; /* Fond gris clair */ padding: 8px 12px; margin-bottom: 5px; border-radius: 6px; /* Coins arrondis */ cursor: pointer; /* L’utilisateur comprend que c’est cliquable */ transition: all 0.2s ease; /* Animation hover */ font-size: 14px; } /* Effet au survol : léger mouvement et changement de couleur */ .article-item:hover { background-color: #a9a9aa; /* Gris plus foncé */ transform: translateX(4px); /* Décalage vers la droite */ } /* ========== ZONE D'AFFICHAGE DU PDF (colonne de droite) ========== */ .affichage-article { width: 80%; /* Colonne droite */ background-color: #F5F5F5; /* Fond presque blanc */ padding: 30px; /* Espace intérieur */ box-sizing: border-box; /* Le padding n'influe pas sur width */ overflow-y: auto; /* Scroll vertical si PDF trop grand */ display: none; /* Masqué par défaut */ position: relative; /* Nécessaire pour placer le bouton fermer */ border-left: 2px solid #ccc; /* Séparation visuelle */ } /* Devient visible quand un article est cliqué */ .affichage-article.active { display: block; } /* ========== BOUTON "FERMER" DANS LA ZONE ARTICLE ========== */ .btn-fermer { position: absolute; top: 20px; /* Position intérieure */ right: 20px; background-color: #000080; /* Bleu foncé */ color: #fff; /* Texte blanc */ border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-size: 14px; transition: background-color 0.2s; /* Léger effet hover */ } .btn-fermer:hover { background-color: #002244; /* Bleu encore plus foncé */ } /* ==================== RESPONSIVE (mobile) ==================== */ @media (max-width: 900px) { /* Les colonnes passent en mode empilé (vertical) */ .revue-container { flex-direction: column; } /* La liste prend toute la largeur, et la séparation passe en bas */ .liste-articles { width: 100%; border-right: none; border-bottom: 2px solid #24445C; } /* La zone article prend aussi 100% de la largeur */ .affichage-article { width: 100%; } } /* ================================================== */ /* ==================== ANNONCES ==================== */ /* ================================================== */ /* Conteneur principal qui regroupe : - la liste des annonces à gauche - l’affichage détaillé à droite */ .annonces-container { display: flex; /* Mise en page en deux colonnes */ flex-wrap: nowrap; /* Les colonnes ne doivent pas passer à la ligne */ min-height: 400px; /* Hauteur minimale pour une mise en forme stable */ background-color: #D9D9D9; /* Fond gris clair */ transition: all 0.4s ease; /* Animations fluides lors des changements */ } /* Mode "full" = seule la liste des annonces est affichée (par exemple quand aucune annonce n’est sélectionnée) */ .annonces-container.full .liste-annonces { width: 100%; /* La colonne liste prend toute la largeur */ } .annonces-container.full .affichage-annonce { display: none; /* La zone d'affichage est masquée */ } /* ==================== LISTE DES ANNONCES (colonne gauche) ==================== */ /* Bloc contenant la liste des petites annonces */ .liste-annonces { width: 20%; /* Occupe 20% de la largeur */ min-width: 200px; /* Jamais plus petit que 200px */ background-color: #D9D9D9; color: #000080; /* Bleu foncé pour les titres */ padding: 20px; border-right: 3px solid #76828b; /* Séparation visuelle entre colonnes */ overflow-y: auto; /* Scroll si trop d’annonces */ transition: all 0.4s ease; } /* Style de chaque annonce clickable */ .annonce-item { background-color: #e6e7e8; /* Fond d’un bloc annonce */ padding: 10px 15px; margin-bottom: 10px; border-radius: 6px; cursor: pointer; /* Apparence interactive */ transition: all 0.2s ease; } /* Effet au survol d’une annonce */ .annonce-item:hover { background-color: #a9a9aa; /* Gris plus foncé */ transform: translateX(4px); /* Petit déplacement vers la droite */ } /* ==================== AFFICHAGE DE L'ANNONCE (colonne droite) ==================== */ .affichage-annonce { width: 80%; /* Prend 80% de la largeur */ background-color: #F5F5F5; /* Fond presque blanc */ padding: 30px; box-sizing: border-box; /* Empêche padding d'augmenter la largeur réelle */ overflow-y: auto; /* Scroll si contenu long */ display: none; /* Masqué tant qu'aucune annonce n’est ouverte */ position: relative; /* Permet d’insérer le bouton fermer en position absolue */ animation: slideIn 0.4s ease forwards; /* Animation d'apparition */ border-left: 2px solid #ccc; /* Séparateur visuel */ } /* devient visible quand une annonce est sélectionnée */ .affichage-annonce.active { display: block; } /* ==================== BOUTON "FERMER" ==================== */ .btn-fermer { position: absolute; /* Position par rapport à affichage-annonce */ top: 20px; right: 20px; background-color: #000080; /* Bleu foncé */ color: #fff; /* Texte blanc */ border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-size: 14px; transition: background-color 0.2s; } /* Effet hover du bouton */ .btn-fermer:hover { background-color: #002244; /* Bleu plus foncé */ } /* ==================== CONTENU INTERNE DE L'ANNONCE ==================== */ /* Organisation du texte + image */ .annonce-detail { display: flex; /* Deux colonnes : texte + image */ gap: 25px; /* Espace entre les colonnes */ margin-top: 20px; } /* Colonne texte */ .annonce-texte { flex: 0 0 70%; /* 70% pour le texte */ } /* Colonne image */ .annonce-image { flex: 0 0 30%; /* 30% pour l'image */ display: flex; justify-content: flex-end; /* Image alignée à droite */ } /* Style de l'image dans l’annonce */ .annonce-image img { width: 100%; /* L’image remplit la colonne */ height: auto; border-radius: 10px; /* Coins arrondis */ } /* ==================== RESPONSIVE (petits écrans) ==================== */ @media (max-width: 900px) { .annonces-container { flex-direction: column; /* Colonnes deviennent des lignes (empilées) */ } .liste-annonces { width: 100%; /* Liste = pleine largeur */ border-right: none; /* On retire la séparation verticale */ border-bottom: 2px solid #24445C; /* Séparation horizontale */ } .affichage-annonce { width: 100%; /* L'affichage prend toute la largeur */ } .annonce-detail { flex-direction: column; /* Texte puis image empilés */ } .annonce-image { justify-content: center; /* Image centrée */ margin-top: 20px; } } /* ================================================== */ /* ==================== RECETTES ==================== */ /* ================================================== */ /* Conteneur principal : - Colonne de gauche : liste des recettes - Colonne de droite : détail d'une recette */ .recettes-container { display: flex; /* Mise en page en deux colonnes */ height: calc(100vh - 160px); /* Hauteur dynamique (moins header/footer) */ background-color: #D9D9D9; /* Fond gris clair */ overflow: hidden; /* Empêche le débordement horizontal */ transition: all 0.4s ease; /* Animations douces */ } /* Lorsque aucune recette n'est ouverte : La liste prend toute la largeur du conteneur */ .recettes-container.full .liste-recettes { width: 100%; } /* Et la zone d'affichage détaillée est masquée */ .recettes-container.full .affichage-recette { display: none; } /* ==================== LISTE DES RECETTES — COLONNE GAUCHE ==================== */ .liste-recettes { width: 20%; /* La liste occupe 20% du conteneur */ min-width: 200px; /* Ne se rétrécit jamais sous 200px */ background-color: #D9D9D9; color: #000080; /* Bleu foncé pour les titres */ padding: 20px; box-sizing: border-box; /* Empêche padding d'ajouter à la largeur totale */ border-right: 3px solid #76828b; /* Séparation verticale */ overflow-y: auto; /* Scroll si liste trop longue */ transition: all 0.4s ease; } /* Titre de la liste ("Les recettes") */ .liste-recettes h2 { text-align: center; margin-bottom: 20px; } /* Chaque recette cliquable dans la liste */ .recette-item { background-color: #e6e7e8; padding: 10px 15px; margin-bottom: 10px; border-radius: 6px; cursor: pointer; /* Indique que l'élément est interactif */ transition: all 0.2s ease; } /* Effet au survol : couleur + légère translation */ .recette-item:hover { background-color: #a9a9aa; transform: translateX(4px); } /* ==================== AFFICHAGE DE LA RECETTE — COLONNE DROITE ==================== */ .affichage-recette { width: 80%; /* Zone principale de visualisation */ background-color: #F5F5F5; padding: 30px; box-sizing: border-box; overflow-y: auto; /* Ajoute un scroll vertical si nécessaire */ display: none; /* Masquée par défaut */ position: relative; /* Pour positionner le bouton Fermer */ animation: slideIn 0.4s ease forwards; /* Animation d'apparition */ border-left: 2px solid #ccc; /* Séparation visuelle */ } /* Animation d'apparition depuis la droite */ @keyframes slideIn { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } } /* Rend visible le bloc lorsqu'une recette est cliquée */ .affichage-recette.active { display: block; } /* ==================== BOUTON FERMER ==================== */ .btn-fermer { position: absolute; top: 20px; right: 20px; background-color: #000080; /* Bleu foncé */ color: #fff; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-size: 14px; transition: background-color 0.2s; } /* Effet hover du bouton */ .btn-fermer:hover { background-color: #000080; /* Même couleur (peut être modifiée) */ } /* Titre de la recette */ .affichage-recette h3 { color: #002244; /* Bleu très foncé */ margin-top: 0; margin-bottom: 15px; } /* Liste des ingrédients */ .affichage-recette ul { list-style-type: disc; padding-left: 25px; margin-bottom: 15px; } /* Paragraphes (description, étapes…) */ .affichage-recette p { margin-bottom: 10px; line-height: 1.5; } /* ==================== RESPONSIVE — PETITS ÉCRANS ==================== */ @media (max-width: 900px) { .recettes-container { flex-direction: column; /* Les colonnes deviennent des lignes */ } .liste-recettes { width: 100%; /* La liste prend toute la largeur */ border-right: none; border-bottom: 2px solid #24445C; /* Séparation horizontale */ } .affichage-recette { width: 100%; /* Idem pour la recette ouverte */ } .btn-fermer { top: 10px; right: 10px; /* Ajustement bouton pour mobile */ } } /* ===================================================== */ /* ==================== PARTENAIRES ==================== */ /* ===================================================== */ /* Conteneur principal des partenaires : - Affichage en grille (grid) - 3 colonnes par ligne - Hauteur fixe pour chaque rangée */ .partenaires { display: grid; grid-template-columns: repeat(3, 1fr); /* 3 blocs égaux par ligne */ grid-auto-rows: 200px; /* Hauteur uniforme pour toutes les cases */ gap: 30px; /* Espacement horizontal et vertical */ justify-items: center; /* Centre les blocs dans chaque cellule */ margin-top: 20px; } /* Cadre individuel d’un partenaire */ .partenaire { width: 400px; /* Largeur fixe du bloc */ background-color: #faf6f0; /* Fond beige clair */ border: 2px solid #ccc; /* Cadre gris autour */ border-radius: 10px; /* Bords arrondis */ padding: 10px; box-shadow: 0 3px 6px rgba(0,0,0,0.1); /* Ombre légère */ display: flex; /* Organisation verticale */ flex-direction: column; align-items: center; justify-content: flex-start; /* Animation au survol */ transition: transform 0.2s, box-shadow 0.2s; } /* Animation lors du survol d’un partenaire */ .partenaire:hover { transform: translateY(-4px); /* Légère montée */ box-shadow: 0 5px 12px rgba(0,0,0,0.2);/* Ombre renforcée */ } /* Image du partenaire */ .partenaire img { width: 100%; /* L'image remplit la largeur du cadre */ height: auto; /* Conserve les proportions */ max-height: 120px; /* Empêche qu’elle devienne trop grande */ object-fit: contain; /* Ne coupe jamais l’image */ border-radius: 6px; margin-bottom: 10px; } /* Lien vers le site du partenaire : - Fond bleu marine - Texte blanc - Style encadré */ .partenaire a { display: block; width: 100%; text-align: center; padding: 8px; border: 2px solid #002244; /* Bleu marine */ border-radius: 6px; background-color: #002244; text-decoration: none; color: #ffffff; /* Texte blanc */ font-weight: bold; box-sizing: border-box; /* Empêche le padding de modifier la largeur */ transition: background-color 0.2s, color 0.2s; } /* Effet hover du lien */ .partenaire a:hover { background-color: #004466; /* Bleu un peu plus clair */ color: #ffffff; /* Le texte reste blanc */ } /* ==================== RESPONSIVE ==================== */ /* Sur tablette : affichage en 2 colonnes */ @media (max-width: 1200px) { .partenaires { grid-template-columns: repeat(2, 1fr); /* 2 par ligne */ grid-auto-rows: auto; /* Les blocs s’adaptent au contenu */ } .partenaire { width: 80%; /* Un peu plus petit pour rentrer mieux */ } } /* Sur mobile : 1 seule colonne */ @media (max-width: 700px) { .partenaires { grid-template-columns: repeat(1, 1fr); /* 1 bloc par ligne */ grid-auto-rows: auto; } .partenaire { width: 90%; /* Plus large pour bien occuper l'écran */ } } /* ======================================================================== */ /* ==================== VIE DE L ASSOCIATION - ARCHIVE ==================== */ /* ======================================================================== */ /* Conteneur global de la section "Infoasso" */ .infoasso-container { display: flex; /* affiche les enfants côte à côte (liste + affichage) */ height: calc(100vh - 160px); /* prend toute la hauteur de la fenêtre moins header/footer */ background-color: #D9D9D9; /* gris clair pour le fond */ overflow: hidden; /* empêche le contenu de dépasser */ transition: all 0.4s ease; /* transition douce pour changements de taille */ } /* Par défaut, quand aucune infoasso n'est sélectionnée : la liste prend toute la largeur */ .infoasso-container.full .liste-infoasso { width: 100%; } /* Masquer la zone d'affichage si aucune infoasso n'est ouverte */ .infoasso-container.full .affichage-infoasso { display: none; } /* Style de la liste des infoasso */ .liste-infoasso { width: 20%; /* prend 20% de la largeur quand une infoasso est ouverte */ min-width: 200px; /* largeur minimale pour éviter que la liste devienne trop étroite */ background-color: #D9D9D9; /* même gris clair */ color: #000080; /* texte bleu foncé */ padding: 20px; box-sizing: border-box; /* inclut le padding dans la largeur */ border-right: 3px solid #76828b; /* séparation avec la zone d'affichage */ overflow-y: auto; /* scroll vertical si beaucoup d'éléments */ transition: all 0.4s ease; /* transition douce pour changements de largeur */ } /* Titre de la liste centré */ .liste-infoasso h2 { text-align: center; margin-bottom: 20px; } /* Chaque élément de la liste */ .infoasso-item { background-color: #e6e7e8; /* fond gris clair légèrement différent */ padding: 10px 15px; margin-bottom: 10px; border-radius: 6px; /* coins arrondis */ cursor: pointer; /* indique que c'est cliquable */ transition: all 0.2s ease; /* transition rapide pour hover */ } /* Effet au survol d'un élément */ .infoasso-item:hover { background-color: #a9a9aa; /* gris plus foncé */ transform: translateX(4px); /* léger déplacement vers la droite */ } /* Zone d'affichage de l'infoasso sélectionnée */ .affichage-infoasso { width: 80%; /* prend 80% de la largeur */ background-color: #F5F5F5; /* fond légèrement plus clair que la liste */ padding: 30px; box-sizing: border-box; overflow-y: auto; /* scroll vertical si nécessaire */ display: none; /* masquée par défaut */ position: relative; /* pour positionner le bouton fermer */ animation: slideIn 0.4s ease forwards; /* animation lors de l'ouverture */ border-left: 2px solid #ccc; /* séparation visuelle avec la liste */ } /* Animation d'apparition de l'infoasso */ @keyframes slideIn { from { opacity: 0; transform: translateX(40px); } /* départ décalé et transparent */ to { opacity: 1; transform: translateX(0); } /* arrive à sa position normale */ } /* Affichage actif de l'infoasso */ .affichage-infoasso.active { display: block; } /* Bouton pour fermer la zone d'affichage */ .btn-fermer { position: absolute; top: 20px; right: 20px; background-color: #000080; /* bleu foncé */ color: #fff; /* texte blanc */ border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-size: 14px; transition: background-color 0.2s; /* transition pour le hover */ } .btn-fermer:hover { background-color: #000080; /* reste bleu foncé au survol */ } /* Titres dans la zone d'affichage */ .affichage-infoasso h3 { color: #002244; /* bleu foncé plus soutenu */ margin-top: 0; margin-bottom: 15px; } /* Listes à puces dans la zone d'affichage */ .affichage-infoasso ul { list-style-type: disc; padding-left: 25px; margin-bottom: 15px; } /* Paragraphes dans la zone d'affichage */ .affichage-infoasso p { margin-bottom: 10px; line-height: 1.5; /* espace entre les lignes pour lisibilité */ } /* ------------------ Responsive ------------------ */ @media (max-width: 900px) { .infoasso-container { flex-direction: column; /* les éléments s'empilent verticalement */ } .liste-infoasso { width: 100%; /* prend toute la largeur */ border-right: none; /* supprime la séparation verticale */ border-bottom: 2px solid #24445C; /* séparation horizontale */ } .affichage-infoasso { width: 100%; /* prend toute la largeur */ } .btn-fermer { top: 10px; /* ajuste le bouton pour mobile */ right: 10px; } } /* ======================================================================== */ /* ============================ PAGE SECURITE ============================= */ /* ======================================================================== */ .container-securite { display: grid; grid-template-columns: repeat(3, 1fr); /* 3 blocs par ligne */ gap: 20px; margin-top: 20px; } .bloc-securite { background-color: #faf6f0; border: 3px solid #002147; /* Cadre bleu marine */ border-radius: 8px; padding: 15px; text-align: center; } .bloc-securite p { margin-bottom: 10px; font-weight: bold; color: #003366; font-size: 1.1rem; } /* ----- Barre de séparation ----- */ .bloc-securite .separator { width: 100%; border-bottom: 3px solid #002147; /* même couleur + même épaisseur */ margin: 10px 0 15px 0; /* espacement haut/bas */ } .bloc-securite img { width: 100%; height: 200px; object-fit: contain; background-color: #faf6f0; border-radius: 6px; } /* Responsive : mobile */ @media (max-width: 768px) { .container-securite { grid-template-columns: repeat(1, 1fr); } } /* Responsive : tablette */ @media (max-width: 1100px) { .container-securite { grid-template-columns: repeat(2, 1fr); } }