du site : À propos (#about), Pil-Demat (#pil-demat), Services (#services), Formations (#formations), Pourquoi-nous (#pourquoi-nous), Équipe (#equipe). ===================================================================== */ .section { padding: 7% 10%; background-color: var(--bg); position: relative; z-index: 10; } .section h2 { text-align: center; font-size: var(--fs-h2); margin-bottom: 3rem; background: var(--gradient); -webkit-background-clip: text; color: transparent; font-family: "IBM Plex Sans", sans-serif; font-weight: bold; } .section h3 { text-align: relative; font-size: var(--fs-h3); margin-bottom: 2rem; /* background: var(--gradient); -webkit-background-clip: text; color: transparent; */ font-family: "IBM Plex Sans", sans-serif; font-weight: 800; color: var(--dark-blue); } .section p { margin-top: 1rem; font-size: var(--fs-body); color: var(--text); text-align: justify; } /* Les media queries qui réduisaient .section h2 / .section h3 à 375px et 425px ont été supprimées : le clamp() ci-dessus gère déjà la fluidité sur toute la largeur d'écran (et corrige au passage une inversion de valeurs entre les deux anciens breakpoints). */ /* Boutons de formulaire — actuellement inutilisés : le seul

du site se trouve dans la section "Avis", désactivée via {% comment %} */ form button { padding: 12px; background: var(--gradient); border: none; border-radius: 8px; color: white; font-weight: bold; cursor: pointer; transition: background 0.3s ease; } form button:hover { background: linear-gradient(135deg, #00d6ff, #005fff); } /* Animation générique d'apparition au scroll : poser l'attribut data-reveal sur n'importe quel élément (pas de valeur requise). L'ajout/retrait de .is-visible est piloté en JS par un IntersectionObserver (voir index.js). */ [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); } [data-reveal].is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } } /* ===================================================================== 3. EN-TÊTE / NAVIGATION Utilisé dans

(logo + menu de navigation) ===================================================================== */ .header { position: fixed; width: 100%; height: 100px; padding: 20px 40px; display: flex; justify-content: space-between; align-items: center; z-index: 1000; /* border-bottom: 1px solid rgba(255, 255, 255, 0.1); */ } .div-logo { width: 70px; height: 100%; } .img-logo { width: 100%; height: 100%; } .div-logo a { position: relative; display: block; width: 100%; height: 100%; } .img-logo { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: opacity 0.3s ease; } .img-logo--full { opacity: 1; } .img-logo--compact { opacity: 0; } .header.is-logo-compact .img-logo--full { opacity: 0; } .header.is-logo-compact .img-logo--compact { opacity: 1; } .nav { flex-direction: row; gap: 1rem; } .nav a { /* margin-left: 24px; */ color: white; text-decoration: none; transition: color 0.3s ease; display: flex; font-size: var(--fs-body); } .nav a:hover { color: var(--accent); } /* Bouton pour ouvrir le menu (mobile) */ .menu-lat { display: none; background: none; border: none; font-size: 1.5rem; cursor: pointer; } /* Responsive - menu latéral mobile */ @media screen and (max-width: 922px) { .nav { position: fixed; top: 0; left: -100%; /* Cache le menu hors de l'écran */ height: 100%; width: 250px; background-color: var(--bg); flex-direction: column; gap: 16px; padding: 20px; box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2); transition: left 0.3s ease; } .nav.open { left: 0; /* Affiche le menu */ } .menu-lat { display: block; /* Affiche le bouton pour ouvrir le menu */ } /* .img-logo { width: 55%; height: 55%; } */ } /* La réduction de police du menu mobile à 882px a été supprimée : .nav a utilise déjà var(--fs-body), qui reste lisible en dessous de 882px (le menu passe de toute façon en colonne verticale). */ /* ===================================================================== 4. HERO Utilisé dans

===================================================================== */ .hero { height: 100vh; position: relative; display: flex; justify-content: center; align-items: center; text-align: center; /* padding: 100px 20px; */ z-index: 10; } .hero-content h1 { font-size: var(--fs-h1); background: var(--gradient); -webkit-background-clip: text; color: transparent; text-align: center; font-family: "Ethnocentric", sans-serif; filter: drop-shadow(5px 5px 10px rgb(0, 0, 0)); } .hero-content p { margin-top: 1rem; font-size: var(--fs-body); color: whitesmoke; text-align: center; text-shadow: #000000 5px 5px 10px; /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); */ } /* ===================================================================== 5. À PROPOS Utilisé dans

===================================================================== */ .grid-bubble-about { display: grid; grid-template-columns: repeat(2, 2fr); grid-template-rows: auto; /* margin-top: 100px; */ gap: 20px; align-items: center; } .text-section-about { text-align: center; padding: 0 30px; font-size: var(--fs-body) } /* Responsive */ @media screen and (max-width: 1024px) { .text-section-about { padding: 0; } } /* ===================================================================== 6. NOS VALEURS (bulles animées "Sérieux / Savoir-faire / Bienveillance / Prudence") — Utilisé dans

(.bubbles-grid et sa version repliée .responsive-valeurs pour mobile) ===================================================================== */ .bubbles-grid { position: relative; width: 100%; max-width: 700px; aspect-ratio: 655 / 581; margin: auto; } .bubble { position: absolute; } #bubble-serieux { width: 49%; top: 18%; left: 0%; z-index: 2; } /* id="bubble-serieux" */ .text-bubble-serieux { display: flex; position: absolute; top: 0%; left: 120%; width: 200px; height: 200px; align-items: center; opacity: 0; } #bubble-savoir-faire { width: 65%; top: 3%; right: -2%; z-index: 1; } /* id="bubble-savoir-faire" */ .text-bubble-savoir-faire { display: flex; position: absolute; top: 5%; left: -50%; width: 200px; height: 200px; align-items: center; opacity: 0; } #bubble-bienveillance { width: 56%; bottom: -2%; left: 2%; z-index: 3; } /* id="bubble-bienveillance" */ .text-bubble-bienveillance { display: flex; position: absolute; top: 5%; left: 110%; width: 200px; height: 200px; align-items: center; opacity: 0; } #bubble-prudence { width: 47%; bottom: 2%; right: -2%; z-index: 2; } /* id="bubble-prudence" */ .text-bubble-prudence { display: flex; position: absolute; top: 5%; left: -85%; width: 200px; height: 200px; align-items: center; opacity: 0; } @media (max-width: 1024px){ .text-bubble-serieux { top: -22%; left: 104%; padding: 1.5rem; } .text-bubble-bienveillance { top: -22%; left: 96%; padding: 1.5rem; } .text-bubble-savoir-faire { top: -10%; left: -70%; padding: 1.5rem; } .text-bubble-prudence { top: -16%; left: -102%; padding: 1.5rem; } .text-bubble-serieux p, .text-bubble-bienveillance p, .text-bubble-savoir-faire p, .text-bubble-prudence p { font-size: var(--fs-body) !important; } } .bubble svg { width: 100%; height: auto; display: block; } .bubbles-grid:hover .bubble { opacity: 0; } .bubble:hover { opacity: 1 !important; z-index: 2; } .bubbles-grid, .bubble { overflow: visible; } .bubble:hover svg .bubble-background-left { transform: translateX(300px); transition: transform 0.4s ease; } .bubble:hover svg .bubble-background-right { transform: translateX(-300px); transition: transform 0.4s ease; } .text-bubble-style { font-size: var(--fs-h4) !important; text-align: center !important; } #bubble-serieux:hover .text-bubble-serieux, #bubble-savoir-faire:hover .text-bubble-savoir-faire, #bubble-bienveillance:hover .text-bubble-bienveillance, #bubble-prudence:hover .text-bubble-prudence { opacity: 1; transition: opacity 0.8s ease; } .text-bubble-serieux, .text-bubble-savoir-faire, .text-bubble-bienveillance, .text-bubble-prudence { pointer-events: none; } /* Version texte repliée (affichée uniquement sous 882px, voir media query) */ .responsive-valeurs #serieux-gradient { text-align: center; background: linear-gradient( 135deg, #9B1D20, #F65A5B); -webkit-background-clip: text; color: transparent; } .responsive-valeurs #savoir-faire-gradient { text-align: center; background: linear-gradient( 135deg, #003366, #00BCD4); -webkit-background-clip: text; color: transparent; } .responsive-valeurs #bienveillance-gradient { text-align: center; background: linear-gradient( 135deg, #40E0D0, #ADD8E6); -webkit-background-clip: text; color: transparent; } .responsive-valeurs #prudence-gradient { text-align: center; background: linear-gradient( 135deg, #FFD961 0%, #FE8729 50%, #FF7272 100%); -webkit-background-clip: text; color: transparent; } .responsive-valeurs { display: none; } .responsive-valeurs p { font-size: var(--fs-body); margin-bottom: 2rem; } /* Responsive */ /* @media screen and (max-width: 1240px) { .text-bubble-prudence { left: 0%; } } */ @media screen and (max-width: 1023px) { .responsive-valeurs { display: block; } .grid-bubble-about { display: block; } .bubbles-grid { display: none; } } /* ===================================================================== 7. COLLABORATEURS (bandeau de logos défilant) Utilisé dans la

juste après "À propos" (pas d'id dédié, deux

: un défilement normal + un inversé) ===================================================================== */ @keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(calc((var(--slide-width) + var(--slide-gap)) * -13)); } } @keyframes scroll-reverse { 0% { transform: translateX(calc((var(--slide-width) + var(--slide-gap)) * -13)); } 100% { transform: translateX(0); } } .slider { background: #F5F6FA; height: 150px; overflow: hidden; position: relative; width: 100%; } .slider::before, .slider::after { background: linear-gradient(to right, #F5F6FA 0%, rgba(255, 255, 255, 0) 100%); content: ""; height: 150px; position: absolute; width: 200px; z-index: 2; } .slider::after { right: 0; top: 0; transform: rotateZ(180deg); } .slider::before { left: 0; top: 0; } .slider .slide-track { animation: scroll 50s linear infinite; display: flex; width: calc((var(--slide-width) * 26) + (var(--slide-gap) * 26)); gap: var(--slide-gap); height: 100%; will-change: transform; } .slider .slide-track-reverse { animation: scroll-reverse 50s linear infinite; display: flex; width: calc((var(--slide-width) * 26) + (var(--slide-gap) * 26)); gap: var(--slide-gap); height: 100%; will-change: transform; } .slider .slide { height: 100%; width: var(--slide-width); padding: 20px 0%; filter: grayscale(100%); } .slide img { height: 100%; width: 100%; object-fit: scale-down; } /* ===================================================================== 8. PIL-DEMAT Utilisé dans

. La mise en page de base vient de ".section" (voir section 2) ; ".pil-demat-disposition" / ".pil-demat-txt" n'ont pas de règle dédiée. Les styles ci-dessous concernent le bloc ".method-wrap" et ".card-graphic", actuellement désactivés côté HTML via {% comment %} dans index.html — conservés au cas où la section "étapes de la méthode" serait réactivée. ===================================================================== */ /* .demat-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; } */ /* Actuellement inutilisée nulle part dans le HTML fourni */ .method-wrap { margin-top: 3.5rem; border-top: 1px solid var(--dark-blue); } .method-step { display: grid; grid-template-columns: .9fr 1.2fr; gap: 2rem; align-items: start; padding: 2.25rem 0; border-bottom: 1px solid var(--dark-blue); transition: background .25s ease, padding .25s ease; } .method-step:hover { padding-inline: 1rem; background: rgba(255,255,255,.02); } .method-number { color: var(--orange-2); font: 700 .8rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; } .method-step h3 { margin-bottom: 0; color: var(--dark-blue) } .method-step p { margin-bottom: 0; color: var(--darkest-grey); } /* Responsive du bloc method-step */ @media (max-width: 820px){ .method-step { grid-template-columns: 50px 1fr; } .method-step p { grid-column: 2; } } @media (max-width: 620px){ .method-step { gap: .8rem; } .case-visual {display: none !important;} .case-card {min-height: 460px !important; } } /* ===================================================================== 9. SERVICES Utilisé dans

, contenu injecté via le plugin CMS service_plugin.html ({% placeholder "section service" %}) ===================================================================== */ .expertise-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 3rem; } .expertise-card { position: relative; min-height: 340px; padding: clamp(1.5rem, 3vw, 2.2rem); overflow: hidden; border: 1px solid var(--medium-grey); border-radius: 24px; background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.018)); transition: transform .35s ease, border-color .35s ease, background .35s ease; } .expertise-card:hover { transform: translateY(-6px); border-color: #00c8d7; background: linear-gradient(145deg, rgba(0, 200, 215, 0.1), rgba(255,255,255,.018)); } .expertise-card h3 { max-width: 430px; color: var(--dark-blue) } .expertise-card p { max-width: 480px; color:var(--darkest-grey)} .tag-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; } .tag { padding: .42rem .65rem; border: 1px solid var(--medium-grey); border-radius: 999px; color: #0d0f17; font-size: var(--fs-small); background-color: white; position: relative; z-index: 1;} .card-graphic { position: absolute; right: -30px; bottom: -45px; width: 190px; height: 190px; object-fit: cover; border: 1px solid rgba(255,255,255,.08); border-radius: 42px; transform: rotate(18deg); box-shadow: inset 0 0 50px rgba(255,255,255,.02); opacity: 0.125; /* optionnel, pour garder un effet discret comme avant */ filter: grayscale(100%) } /* Responsive */ @media screen and (max-width: 1260px) { #services { height: 100% !important; } } @media screen and (max-width: 1024px) { .expertise-grid { grid-template-columns: 1fr; } } /* ===================================================================== 10. FORMATIONS Utilisé dans

===================================================================== */ /* .formations-grid { display: grid; grid-template-columns: repeat(5, 1fr); background-color:#ffffffda; border-radius: 30px; height: 100%; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3); padding: 20px; } .formations-item { display: grid; height: 100%; width: 100%; align-items: center; grid-template-rows: 25% 25% 50%; padding: 10px; } .formations-item h3 { font-size: var(--fs-h4); margin: 0; } .divider-h { background-color: #13f3ff; height: 80%; width: 1px; position: relative; top: 10%; opacity: 0.3; } .formations-disposition { display: grid; grid-template-columns: 1fr 1px; } .formations-title { text-align: center; } .formations-txt p { text-align: center; font-size: var(--fs-small); } .formations-img { justify-self: center; margin-bottom: 20px; text-align: center; } .formations-img img { width: 100%; height: 100%; justify-self: center; } */ /* Responsive */ /* @media screen and (max-width: 1290px) { */ /* Tailles de police retirées : .formations-item h3 (var(--fs-h4)) et .formations-grid p (var(--fs-small) si besoin, voir plus bas) sont déjà fluides via clamp(). */ /* .formations-img img { width: 45px; } } @media screen and (max-width: 1248px) { .formations-grid { grid-template-columns: repeat(3, 1fr); } } */ /* Overrides de font-size retirés à 1024px : .formations-item h3 et .formations-txt p sont déjà fluides via clamp(). */ /* @media screen and (max-width: 730px) { .formations-grid { grid-template-columns: repeat(2, 1fr); } #item2 .divider-h, #item4 .divider-h { display: none; } #item3 .divider-h { display: flex; } } @media screen and (max-width: 435px) { .formations-grid { grid-template-columns: repeat(1, 1fr); } #item2 .divider-h, #item4 .divider-h, #item3 .divider-h, #item1 .divider-h, #item5 .divider-h { display: none; } } */ /* ===================================================================== 13. RÉALISATIONS Utilisé dans

, contenu injecté via le plugin CMS realisation_plugin.html (carrousel Owl Carousel : .owl-carousel / .owl-theme sont fournis par la librairie externe, seuls .item-desc et .high-title sont personnalisés ici) ===================================================================== */ .disposition-realisations{ display: flex; align-items: center; gap: 10px; } .arrow { padding: 5px; color: #0078ff; opacity: 1; font-size: 2rem; } .arrow:hover { color: #0b1e36; } .arrow:focus { outline: none } .owl-dots { display: none; } @media (max-width: 768px) { #carousel-prev, #carousel-next { display: none; } .owl-dots { display: block; } } .game-section { background-color: var(--bg); padding: 7% 10%; position: relative; z-index: 10; } .game-section h2 { text-align: center; font-size: var(--fs-h2); margin-bottom: 3.75rem; background: var(--gradient); -webkit-background-clip: text; color: transparent; font-family: "IBM Plex Sans", sans-serif; font-weight: bold; } .game-section h3 { font-size: var(--fs-h3); } .game-section p { font-size: clamp(0.9rem, 0.864rem + 0.182vw, 1rem); } .owl-carousel.custom-carousel { flex: 1 1 0; min-width: 0; /* la clé : autorise le rétrécissement sous la largeur du contenu */ overflow: hidden; } /* Par défaut */ .item-desc { transform: translateY(calc(100% - 54px)); transition: all 0.4s ease-in-out; } /* Si le titre est trop long (classe ajoutée en JS dans index.html) */ .item-desc.high-title { transform: translateY(calc(100% - 65px)); /* Remonter davantage */ } /* ===================================================================== 14. INCITATION / APPEL À L'ACTION Composant réutilisé 3 fois dans la page (#incitation1, #incitation2, #incitation3), toujours avec la même structure .incitation ===================================================================== */ .incitation { background-color: #0B1E36; padding: 3rem 10%; } .disposition-incitation { display: grid; grid-template-columns: 1.5fr .5fr; min-width: 0; /* empêche le contenu des colonnes de forcer la grille à s'élargir */ } .incitation-text { color: #A3D9DD; font-size: var(--fs-h2); margin: 0; justify-content: left; display: flex; /* padding: 0 1rem; */ } .incitation-text.rotating-text { color: #A3D9DD; flex-wrap: wrap; min-width: 0; max-width: 100%; overflow: hidden; /* filet de sécurité : rien ne peut dépasser la colonne */ } .incitation-text.rotating-text p { font-size: inherit; font-weight: inherit; margin: 0; display: flex; position: relative; vertical-align: top; min-width: 0; } /* Le

n'a normalement aucune largeur puisque ses .word sont en position: absolute. On réserve la largeur du mot le plus long ("une question ?") via un ::after invisible, qui suit la même taille de police que les mots réels donc reste fluide. */ .incitation-text.rotating-text p.rotating-word::after { content: "\2002une\2002question\2002?"; visibility: hidden; white-space: pre; } .incitation-text.rotating-text p .word { position: absolute; top: 0; left: 0; display: flex; opacity: 0; white-space: pre; max-width: 100%; } .incitation-text.rotating-text p .word .letter { transform-origin: center center 25px; } .incitation-text.rotating-text p .word .letter.out { transform: rotateX(90deg); transition: 0.32s ease; } .incitation-text.rotating-text p .word .letter.in { transition: 0.38s ease; } .incitation-text.rotating-text p .word .letter.behind { transform: rotateX(-90deg); } .incitation-text.rotating-text .alizarin { color: #FE8729; } .incitation-text.rotating-text .wisteria { color: #FF7272; } .incitation-text.rotating-text .peter-river { color: #40E0D0; } .incitation-div-btn { display: flex; justify-content: center; width: 100%; height: 100%; align-self: center; } .incitation-btn { color: white; width: 100%; background: linear-gradient(135deg, #00c8d7, #0078ff); border-radius: 8px; border: none; font-size: var(--fs-button); font-weight: 1000; } /* Responsive */ @media screen and (max-width: 983px) { .incitation { padding: 50px 10%; } /* Tailles de police retirées : .incitation-text (var(--fs-h2)) et .incitation-btn (var(--fs-button)) sont déjà fluides via clamp(). */ .incitation-div-btn { width: 100%; height: 60%; } } @media (max-width: 795px) { .disposition-incitation { grid-template-rows: 1fr 1.5fr; grid-template-columns:none; gap: 10px; } .incitation-text{ justify-content: center; } } @media (max-width: 558px){ .disposition-incitation { grid-template-rows:none; grid-template-columns: 1fr .5fr; gap: 5px; } .incitation-text{ justify-content: left; } .incitation-text.rotating-text p .word { left: -18px; } } @media (max-width: 495px){ .incitation-text.rotating-text p .word { left: 50%; transform: translateX(-50%); } .disposition-incitation { grid-template-rows: 1fr .8fr; grid-template-columns: none; } .incitation-text{ justify-content: center; } } /* .incitation-text{ justify-content: center; font-size: var(--fs-h3); } */ /* ===================================================================== 15. FOOTER Utilisé dans