/* =========================================================
Hoplite Cybersécurité — feuille de style principale
========================================================= */
:root {
--color-navy: #0F2436;
--color-accent: #CA814D;
--color-white: #FFFFFF;
--color-text: #666666;
--color-heading: #333333;
--font-heading: 'Cabin', Helvetica, Arial, sans-serif;
--font-body: 'Cabin', Helvetica, Arial, sans-serif;
--container-width: 1080px;
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
font-family: var(--font-body);
font-size: 16px;
line-height: 1.7;
color: var(--color-text);
background: var(--color-white);
}
img {
max-width: 100%;
height: auto;
display: block;
}
a {
color: var(--color-accent);
text-decoration: none;
}
h1, h2, h3, h4, h6 {
font-family: var(--font-heading);
color: var(--color-heading);
font-weight: 600;
line-height: 1.2;
margin: 0 0 16px;
}
h6 {
text-transform: uppercase;
letter-spacing: 1px;
font-size: 14px;
color: var(--color-accent);
}
p {
margin: 0 0 1em;
}
/* Masqué à l'écran, mais lu par les lecteurs d'écran et les moteurs. */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.container {
width: 90%;
max-width: var(--container-width);
margin: 0 auto;
}
.btn {
display: inline-block;
padding: 0.6em 1.6em;
border: 2px solid var(--color-accent);
border-radius: 3px;
color: var(--color-accent);
font-weight: 600;
transition: all 0.2s ease;
}
.btn:hover {
background-color: var(--color-accent);
color: var(--color-white);
}
/* ---------- Header ---------- */
.site-header {
position: sticky;
top: 0;
z-index: 999;
}
.site-header-bar {
background-color: var(--color-navy);
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}
.site-header--boxed {
padding: 24px 24px 0;
}
.site-header--boxed .site-header-bar {
border-radius: 12px;
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0;
}
/* Le logo est un PNG de 1081 px de large, affiché à 300 px : la mention
« CYBERSÉCURITÉ » reste lisible, et la définition de la source (3,6 fois la
taille d'affichage) garantit un rendu net sur les écrans haute densité.
Le plafond en vw évite qu'il ne vienne toucher le bouton du menu sur les
téléphones étroits, où 300 px ne laisseraient aucun espace entre les deux. */
.site-logo img {
display: block;
width: min(300px, 72vw);
height: auto;
}
.site-nav {
flex: 1;
display: flex;
justify-content: flex-end;
}
.nav-menu {
list-style: none;
display: flex;
align-items: center;
margin: 0;
padding: 0;
gap: 22px;
}
.nav-menu > li {
position: relative;
}
.nav-menu > li > a {
display: block;
padding: 31px 0;
color: var(--color-white);
font-size: 16px;
white-space: nowrap;
}
/* Sur grand écran, le menu gagne en présence. */
@media (min-width: 981px) {
.nav-menu {
gap: 26px;
}
.nav-menu > li > a {
font-size: 18px;
}
.nav-menu .sub-menu li a {
font-size: 16px;
}
}
.nav-menu > li.current > a,
.nav-menu > li > a:hover {
color: var(--color-accent);
}
.nav-menu .sub-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
width: 220px;
background: var(--color-navy);
border-top: 3px solid var(--color-accent);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
list-style: none;
margin: 0;
padding: 12px 0;
z-index: 10;
}
.nav-menu li.has-children:hover .sub-menu {
display: block;
}
.nav-menu .sub-menu li a {
display: block;
padding: 8px 20px;
color: var(--color-white);
font-size: 14px;
}
.nav-menu .sub-menu li a:hover {
background: rgba(255, 255, 255, 0.05);
color: var(--color-accent);
}
.mobile-menu-toggle {
display: none;
flex-direction: column;
gap: 5px;
background: none;
border: 0;
cursor: pointer;
padding: 8px;
}
.mobile-menu-toggle span {
width: 26px;
height: 2px;
background: var(--color-white);
}
.mobile-menu {
display: none;
background: var(--color-navy);
border-top: 3px solid var(--color-accent);
}
.mobile-menu.is-open {
display: block;
/* Le header est collant : un menu plus haut que l'écran ne pourrait
jamais être atteint en faisant défiler la page. Il défile donc
lui-même, dans la hauteur restant sous le header (calculée en JS,
avec une valeur de repli). */
max-height: var(--mobile-menu-max, 75vh);
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
.mobile-menu ul {
list-style: none;
margin: 0;
padding: 16px 5%;
}
.mobile-menu li a {
display: block;
padding: 10px 0;
color: var(--color-white);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.mobile-menu ul ul {
padding-left: 16px;
}
@media (max-width: 980px) {
.site-nav {
display: none;
}
.mobile-menu-toggle {
display: flex;
}
}
/* ---------- Hero ---------- */
.hero-frame {
background: var(--color-white);
padding: 40px 24px;
}
.hero {
color: var(--color-white);
}
.hero-panel {
position: relative;
display: flex;
align-items: center;
padding: 8vw 4vw 8vw 7vw;
min-height: 480px;
border-radius: 12px;
background-color: var(--color-navy);
background-size: cover;
background-position: center;
}
.hero-panel-inner {
position: relative;
z-index: 2;
max-width: 600px;
}
.hero-panel h1 {
color: var(--color-white);
font-size: 40px;
margin-bottom: 16px;
}
.hero-panel-text {
font-weight: 300;
font-size: 18px;
margin-bottom: 30px;
opacity: 0.9;
}
.hero-helmet {
display: block;
position: absolute;
top: -40px;
right: 0;
height: calc(100% + 80px);
width: auto;
z-index: 1;
pointer-events: none;
}
@media (max-width: 980px) {
.hero-helmet {
opacity: 0.35;
}
}
@media (max-width: 767px) {
.hero-frame {
padding: 20px 12px;
}
.hero-panel {
padding-left: 5vw;
}
.hero-panel h1 {
font-size: 28px;
}
.hero-panel-text {
font-size: 16px;
}
.hero-helmet {
display: none;
}
}
/* ---------- Page hero (pages secondaires) ---------- */
.page-hero {
background-color: var(--color-navy);
background-size: cover;
background-position: center;
padding: 90px 0;
text-align: center;
}
.page-hero h1 {
color: var(--color-white);
margin: 0;
}
/* ---------- Stats bar (société) ---------- */
.stats-bar {
background: var(--color-navy);
padding: 50px 0;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
text-align: center;
}
.stat-number {
display: block;
font-family: var(--font-heading);
font-weight: 700;
font-size: 42px;
color: var(--color-accent);
}
.stat-label {
display: block;
color: var(--color-white);
font-size: 14px;
}
@media (max-width: 767px) {
.stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}
}
/* ---------- CTA ---------- */
.cta {
background: var(--color-navy);
padding: 60px 0;
text-align: center;
}
.cta p {
color: var(--color-white);
font-size: 22px;
margin-bottom: 24px;
}
.btn--light {
border-color: var(--color-white);
color: var(--color-white);
}
.btn--light:hover {
background-color: var(--color-white);
color: var(--color-navy);
}
/* ---------- Mission ---------- */
.mission {
padding: 60px 0;
text-align: center;
}
.mission h2 {
color: var(--color-navy);
max-width: 780px;
margin-left: auto;
margin-right: auto;
}
.mission-text {
max-width: 720px;
margin: 0 auto 24px;
color: var(--color-text);
}
/* ---------- Testimonials ---------- */
.testimonials {
padding: 60px 0;
background-color: var(--color-navy);
background-size: cover;
background-position: center;
color: var(--color-white);
}
.testimonials h2 {
color: var(--color-white);
}
.testimonials-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
margin-top: 30px;
}
.testimonial-card {
margin: 0;
background: rgba(255, 255, 255, 0.06);
padding: 24px;
border-radius: 4px;
}
.testimonial-card p {
color: rgba(255, 255, 255, 0.9);
}
.testimonial-card cite {
display: block;
margin-top: 12px;
font-style: normal;
font-weight: 600;
color: var(--color-accent);
}
@media (max-width: 980px) {
.testimonials-grid {
grid-template-columns: 1fr;
}
}
/* ---------- Footer ---------- */
.site-footer {
background: var(--color-navy);
color: rgba(255, 255, 255, 0.85);
padding-top: 50px;
}
/* Cinq blocs placés par zones nommées : la structure HTML reste identique
d'un palier à l'autre, seul le placement change. « Infos » est plus large
que les autres car ses libellés sont les plus longs. */
.footer-grid {
display: grid;
grid-template-columns: auto 1fr 1.3fr 0.7fr auto;
grid-template-areas: "logo menu infos social badge";
gap: 30px;
align-items: start;
padding-bottom: 30px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-col--logo { grid-area: logo; }
.footer-col--menu { grid-area: menu; }
.footer-col--infos { grid-area: infos; }
.footer-col--social { grid-area: social; }
.footer-col--badge { grid-area: badge; }
/* Le badge RGPD est un élément de réassurance : il doit se voir. */
.footer-col--badge img {
display: block;
width: 160px;
height: auto;
}
.footer-col h4 {
color: var(--color-white);
font-size: 16px;
}
.footer-col ul {
list-style: none;
margin: 0;
padding: 0;
}
.footer-col ul li {
margin-bottom: 8px;
}
.footer-col a {
color: rgba(255, 255, 255, 0.85);
}
.footer-col a:hover {
color: var(--color-accent);
}
.footer-bottom {
padding: 20px 0;
text-align: center;
font-size: 13px;
}
/* Tablette : logo et badge en bandeau haut, puis les listes sur deux colonnes.
« Infos » et « Réseaux » s'empilent à droite pour équilibrer la hauteur du
menu, qui compte huit entrées.
Palier à 1100 px et non 980 : en dessous, les cinq colonnes deviennent trop
étroites et « Politique de gestion des cookies » se coupe en deux lignes. */
@media (max-width: 1100px) {
.footer-grid {
grid-template-columns: 1fr 1fr;
grid-template-areas:
"logo badge"
"menu infos"
"menu social";
gap: 24px 30px;
}
.footer-col--logo,
.footer-col--badge {
align-self: center;
}
.footer-col--badge {
justify-self: end;
}
}
/* Smartphone : une seule colonne centrée. Les libellés longs cessent de se
couper sur deux lignes, et le badge n'est plus orphelin en bas de grille. */
@media (max-width: 600px) {
.footer-grid {
grid-template-columns: 1fr;
grid-template-areas:
"logo"
"menu"
"infos"
"social"
"badge";
gap: 32px;
text-align: center;
justify-items: center;
}
.footer-col--badge {
justify-self: center;
}
.footer-col--badge img {
width: 200px;
}
.footer-col h4 {
margin-bottom: 12px;
}
.footer-col ul li {
margin-bottom: 12px;
}
}
/* ---------- Services page ---------- */
/* ---------- Quote hero (services) ---------- */
/* La citation se pose directement sur la photo de fond de page, au plus
près de la barre de menu pour remonter les boutons de sélection. */
.quote-hero {
position: relative;
padding: 36px 0 30px;
text-align: center;
}
.quote-hero .container {
position: relative;
z-index: 1;
}
.quote-hero h2 {
color: var(--color-white);
font-weight: 300;
font-style: italic;
font-size: 32px;
max-width: 780px;
margin: 0 auto 16px;
}
.quote-hero p {
color: rgba(255, 255, 255, 0.75);
margin: 0;
}
@media (max-width: 767px) {
.quote-hero {
padding: 24px 0 20px;
}
.quote-hero h2 {
font-size: 22px;
}
}
/* ---------- Sélecteur de services (services) ---------- */
/* Trois boîtes de verre dépoli alignées sous la citation : un clic affiche
la fiche correspondante seule, à la manière des onglets. La boîte active
s'illumine dans l'ocre de la charte. */
.service-switcher {
position: relative;
z-index: 1;
padding: 0 0 10px;
scroll-margin-top: 150px;
}
.service-switcher-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.service-switcher-item {
display: flex;
align-items: center;
gap: 16px;
padding: 22px 24px;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 18px;
background: linear-gradient(145deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 45%, rgba(255, 255, 255, 0.02) 100%);
-webkit-backdrop-filter: blur(16px) saturate(150%);
backdrop-filter: blur(16px) saturate(150%);
color: rgba(255, 255, 255, 0.8);
font-family: var(--font-heading);
font-size: 18px;
font-weight: 600;
line-height: 1.3;
text-decoration: none;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.22),
0 14px 30px -12px rgba(2, 10, 20, 0.7);
transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.service-switcher-item img {
flex-shrink: 0;
width: 44px;
height: auto;
}
/* Hors sélection, le pictogramme ocre passe en blanc. */
.service-switcher-item:not(.is-active) img {
filter: brightness(0) invert(1);
}
/* Page Formations : deux boîtes au lieu de trois, chacune avec un
surtitre (format) au-dessus de l'intitulé. */
.service-switcher-list--duo {
grid-template-columns: repeat(2, 1fr);
}
.service-switcher-text {
display: flex;
flex-direction: column;
gap: 4px;
}
.service-switcher-kicker {
font-size: 12px;
font-weight: 600;
letter-spacing: 1.4px;
text-transform: uppercase;
color: #EBBC8D;
}
.service-switcher-item:hover,
.service-switcher-item:focus-visible {
color: var(--color-white);
border-color: rgba(255, 255, 255, 0.3);
transform: translateY(-2px);
}
.service-switcher-item.is-active {
color: #EBBC8D;
border-color: rgba(235, 188, 141, 0.75);
background: linear-gradient(145deg, rgba(226, 166, 108, 0.45) 0%, rgba(226, 166, 108, 0.24) 50%, rgba(226, 166, 108, 0.14) 100%);
box-shadow:
inset 0 1px 0 rgba(255, 220, 180, 0.35),
0 0 0 1px rgba(226, 166, 108, 0.25),
0 0 28px -4px rgba(226, 166, 108, 0.55),
0 14px 30px -12px rgba(2, 10, 20, 0.7);
}
/* Le masquage n'intervient qu'une fois le script chargé. */
.has-service-switcher .services-page .service-detail {
display: none;
}
.has-service-switcher .services-page .service-detail.is-active {
display: block;
}
@media (max-width: 767px) {
.service-switcher-list,
.service-switcher-list--duo {
grid-template-columns: 1fr;
gap: 10px;
}
.service-switcher-item {
padding: 14px 18px;
font-size: 16px;
}
.service-switcher-item img {
width: 34px;
}
}
/* ---------- Service detail (services) ---------- */
.service-detail {
padding: 40px 0;
}
/* Chaque service est une carte blanche : la photo occupe toute la hauteur
d'un côté, à fond perdu, et se fond dans le blanc côté texte. Le titre
et le pictogramme ne sont plus répétés : ils figurent sur le bouton. */
.service-detail .container {
overflow: hidden;
padding: 0;
border-radius: 24px;
background: var(--color-white);
box-shadow: 0 30px 60px -30px rgba(2, 10, 20, 0.75);
}
.service-detail-grid {
display: grid;
grid-template-columns: 5fr 7fr;
align-items: stretch;
}
.service-detail-grid--reverse {
grid-template-columns: 7fr 5fr;
}
.service-detail-grid--reverse .service-detail-image {
order: 2;
}
/* La photo épouse la hauteur du texte et s'efface vers lui : le dernier
tiers devient transparent et laisse apparaître le blanc de la carte. */
.service-detail-image {
position: relative;
min-height: 320px;
}
.service-detail-image img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
-webkit-mask-image: linear-gradient(to right, #000 62%, transparent 100%);
mask-image: linear-gradient(to right, #000 62%, transparent 100%);
}
.service-detail-grid--reverse .service-detail-image img {
-webkit-mask-image: linear-gradient(to left, #000 62%, transparent 100%);
mask-image: linear-gradient(to left, #000 62%, transparent 100%);
}
/* ISO 27001 : photo en portrait, cadrée sur le sceau. */
#iso27001 .service-detail-image img {
object-position: center 38%;
}
.service-detail-content {
padding: 52px 56px 52px 8px;
font-size: 18px;
line-height: 1.8;
color: #3C4B58;
}
.service-detail-grid--reverse .service-detail-content {
padding: 52px 8px 52px 56px;
}
.service-detail-content p {
margin-bottom: 1.2em;
color: var(--color-navy);
}
.service-detail-content strong {
color: var(--color-navy);
}
/* Composantes du service : une ligne par volet, intitulé en gras. */
.service-detail-content ul {
list-style: none;
margin: 0 0 34px;
padding: 0;
display: grid;
gap: 16px;
}
.service-detail-content li {
position: relative;
padding-left: 26px;
}
.service-detail-content li::before {
content: '\25B8'; /* ▸ */
position: absolute;
left: 0;
top: 0;
color: var(--color-accent);
font-weight: 700;
}
.service-detail .btn {
font-size: 16px;
}
@media (max-width: 980px) {
.service-detail-grid,
.service-detail-grid--reverse {
grid-template-columns: 1fr;
}
/* En une colonne, la photo coiffe la carte et s'efface vers le bas. */
.service-detail-grid--reverse .service-detail-image {
order: 0;
}
.service-detail-image {
min-height: 240px;
}
.service-detail-image img,
.service-detail-grid--reverse .service-detail-image img {
-webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}
.service-detail-content,
.service-detail-grid--reverse .service-detail-content {
padding: 8px 28px 40px;
font-size: 17px;
}
}
/* ---------- Tabs (services) ---------- */
.tabs {
border: 1px solid #E2E2E2;
border-radius: 4px;
overflow: hidden;
}
.tabs-nav {
display: flex;
flex-wrap: wrap;
background: #F4F4F4;
margin: 0;
padding: 0;
list-style: none;
}
.tabs-nav-item {
font-family: var(--font-heading);
font-size: 16px;
font-weight: 600;
color: var(--color-text);
background: none;
border: 0;
border-right: 1px solid #E2E2E2;
cursor: pointer;
padding: 14px 24px;
}
.tabs-nav-item.is-active {
background: var(--color-white);
color: var(--color-heading);
}
.tabs-panels {
background: var(--color-white);
padding: 30px;
}
.tabs-panel {
display: none;
}
.tabs-panel.is-active {
display: block;
}
@media (max-width: 767px) {
.tabs-nav {
flex-direction: column;
}
.tabs-nav-item {
border-right: 0;
border-bottom: 1px solid #E2E2E2;
text-align: left;
}
}
/* ---------- Formations ---------- */
/* Le bandeau du titre se pose directement sur la photo de fond commune. */
.formations-page .page-hero {
background: transparent;
padding: 40px 0 34px;
}
.formation {
padding: 60px 0;
}
/* Chaque formation est une carte blanche, comme les fiches de la page
Services ; les deux motifs H ocre en ornent les coins supérieurs, sous
la photo : seul celui du coin resté libre apparaît. Les
marges intérieures sont des variables : l'en-tête photo s'en sert pour
déborder jusqu'aux bords de la carte. */
.formation .container {
--card-pad-top: 56px;
--card-pad-x: 4vw;
position: relative;
overflow: hidden;
padding: var(--card-pad-top) var(--card-pad-x) 50px;
border-radius: 24px;
background-color: var(--color-white);
background-image:
url('../images/backgrounds/Motif_H_coin.png'),
url('../images/backgrounds/Motif_H.png');
background-repeat: no-repeat, no-repeat;
background-position: top left, top right;
background-size: 150px auto, 228px auto;
box-shadow: 0 30px 60px -30px rgba(2, 10, 20, 0.75);
color: #3C4B58;
}
/* En-tête : comme sur la page Services, la photo occupe toute la hauteur
d'un côté, à fond perdu, et s'efface dans le blanc côté texte. */
.formation-head {
display: grid;
grid-template-columns: 5fr 7fr;
align-items: stretch;
margin: calc(-1 * var(--card-pad-top)) calc(-1 * var(--card-pad-x)) 40px;
}
.formation-head--reverse {
grid-template-columns: 7fr 5fr;
}
.formation-head--reverse .formation-photo {
order: 2;
}
.formation-photo {
position: relative;
min-height: 320px;
}
/* Contrairement aux fiches Services, le programme suit l'en-tête : la photo
s'efface aussi vers le bas pour ne pas s'arrêter net sur le blanc. */
.formation-photo img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
-webkit-mask-image:
linear-gradient(to right, #000 62%, transparent 100%),
linear-gradient(to bottom, #000 75%, transparent 100%);
-webkit-mask-composite: source-in;
mask-image:
linear-gradient(to right, #000 62%, transparent 100%),
linear-gradient(to bottom, #000 75%, transparent 100%);
mask-composite: intersect;
}
.formation-head--reverse .formation-photo img {
-webkit-mask-image:
linear-gradient(to left, #000 62%, transparent 100%),
linear-gradient(to bottom, #000 75%, transparent 100%);
mask-image:
linear-gradient(to left, #000 62%, transparent 100%),
linear-gradient(to bottom, #000 75%, transparent 100%);
}
/* Cadrage sur le formateur, côté opposé au fondu. */
#technique .formation-photo img {
object-position: 8% center;
}
#gouvernance .formation-photo img {
object-position: 85% center;
}
.formation-head .formation-intro {
max-width: none;
margin: 0;
padding: var(--card-pad-top) var(--card-pad-x) 0 8px;
}
.formation-head--reverse .formation-intro {
padding: var(--card-pad-top) 8px 0 var(--card-pad-x);
}
@media (max-width: 980px) {
.formation-head,
.formation-head--reverse {
grid-template-columns: 1fr;
}
/* En une colonne, la photo coiffe la carte et s'efface vers le bas. */
.formation-head--reverse .formation-photo {
order: 0;
}
.formation-photo {
min-height: 260px;
}
.formation-photo img,
.formation-head--reverse .formation-photo img {
-webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}
#technique .formation-photo img {
object-position: center 40%;
}
#gouvernance .formation-photo img {
object-position: 70% center;
}
.formation-head .formation-intro,
.formation-head--reverse .formation-intro {
padding: 8px var(--card-pad-x) 0;
}
/* Les motifs H se trouveraient sous la photo et transparaîtraient
dans son fondu : ils sont retirés. */
.formation .container {
background-image: none;
}
}
/* Sur fond blanc, l'ocre de marque foncé reste lisible. */
.formations-page h6,
.formations-page .formation-meta-item h4,
.formations-page .program-module-title {
color: var(--color-accent);
}
.formation-intro h2,
.formation-tagline,
.formation-duration,
.program-item h4 {
color: var(--color-navy);
}
.formation-meta-item p,
.program-item p {
color: #3C4B58;
}
/* Programme : onglets clairs, filet ocre sous l'onglet actif. */
.formation .tabs {
border-color: #E4E8EC;
border-radius: 14px;
}
.formation .tabs-nav {
background: #F2F5F8;
}
.formation .tabs-nav-item {
color: #52606D;
border-right-color: #E4E8EC;
}
.formation .tabs-nav-item.is-active {
background: var(--color-white);
color: var(--color-navy);
box-shadow: inset 0 -3px 0 var(--color-accent);
}
.formation-intro {
max-width: 780px;
margin: 0 auto 40px;
text-align: center;
}
.formation-icon {
width: 70px;
margin: 0 auto 16px;
}
.formation-tagline {
font-size: 18px;
margin-bottom: 30px;
}
.formation-meta {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
text-align: left;
margin-bottom: 24px;
}
.formation-meta-item h4 {
color: var(--color-accent);
font-size: 15px;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 8px;
}
.formation-meta-item p {
margin: 0;
}
.formation-duration {
font-weight: 600;
margin: 0;
}
.program-module-title {
color: var(--color-accent);
font-size: 20px;
margin-bottom: 20px;
}
.program-item {
margin-bottom: 20px;
}
.program-item:last-child {
margin-bottom: 0;
}
.program-item h4 {
font-size: 16px;
margin-bottom: 4px;
}
.program-item p {
margin: 0;
}
.formation-cta {
text-align: center;
margin-top: 40px;
}
@media (max-width: 767px) {
.formation-meta {
grid-template-columns: 1fr;
}
}
/* ---------- Sélecteur de formations (formations) ---------- */
/* Le masquage n'intervient qu'une fois le script chargé. */
.has-service-switcher .formations-page .formation {
display: none;
}
.has-service-switcher .formations-page .formation.is-active {
display: block;
}
/* ---------- Contact ---------- */
.contact {
padding: 60px 0;
}
.contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: start;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.form-field {
margin-bottom: 20px;
}
.form-field label {
display: block;
font-weight: 600;
color: var(--color-heading);
margin-bottom: 6px;
font-size: 14px;
}
.form-field input,
.form-field select,
.form-field textarea {
width: 100%;
padding: 14px 16px;
border: 1px solid #ddd;
border-radius: 3px;
background: #F6F6F6;
color: var(--color-heading);
font-family: var(--font-body);
font-size: 15px;
}
.form-field textarea {
min-height: 150px;
resize: vertical;
}
.form-field select {
appearance: none;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right 16px center;
padding-right: 40px;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
outline: none;
border-color: var(--color-accent);
background-color: var(--color-white);
}
.h-captcha {
margin-bottom: 20px;
}
.form-disclaimer {
font-size: 13px;
color: #999;
}
.form-message {
padding: 14px 18px;
border-radius: 3px;
margin: 0 0 20px;
list-style: none;
}
.form-message--success {
background: rgba(41, 196, 169, 0.12);
color: #1c7a68;
}
.form-message--error {
background: rgba(207, 46, 46, 0.08);
color: #cf2e2e;
padding-left: 34px;
}
@media (max-width: 767px) {
.contact-grid,
.form-row {
grid-template-columns: 1fr;
}
}
/* ---------- Contenu légal (mentions légales, etc.) ---------- */
.legal-content {
padding: 60px 0 80px;
}
.legal-content .container {
max-width: 780px;
}
.legal-content h3 {
margin-top: 40px;
font-size: 20px;
}
.legal-content h3:first-of-type {
margin-top: 0;
}
.legal-content ul {
margin: 0 0 1em;
padding-left: 1.25em;
}
.legal-content li {
margin-bottom: 6px;
}
.legal-content .table-scroll {
overflow-x: auto;
margin: 0 0 1.5em;
}
.legal-content table {
width: 100%;
min-width: 640px;
border-collapse: collapse;
font-size: 14px;
}
.legal-content th,
.legal-content td {
border: 1px solid #e2e2e2;
padding: 10px 14px;
text-align: left;
vertical-align: top;
}
.legal-content th {
background: var(--color-navy);
color: var(--color-white);
font-weight: 600;
}
/* ---------- Placeholder pages (404) ---------- */
.et_pb_section--placeholder {
padding: 80px 0;
}
/* ---------- Section intro (generic, homepage) ---------- */
.eyebrow {
display: block;
color: var(--color-accent);
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
margin-bottom: 8px;
}
.section-intro {
max-width: 720px;
margin: 0 auto 40px;
text-align: center;
}
.section-lead {
color: var(--color-text);
margin: 0;
}
/* ---------- Enjeux ---------- */
.enjeux {
padding: 60px 0;
text-align: center;
}
.enjeux-blocks {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin: 0 0 40px;
text-align: left;
}
.enjeux-block {
padding: 24px;
border: 1px solid #E2E2E2;
border-top: 3px solid var(--color-accent);
border-radius: 4px;
font-weight: 600;
color: var(--color-heading);
background: #FAFAFA;
}
.enjeux-challenge {
max-width: 640px;
margin: 0 auto 30px;
text-align: left;
}
.enjeux-challenge-intro {
font-weight: 600;
color: var(--color-heading);
margin-bottom: 16px;
}
.enjeux-questions {
margin: 0;
padding-left: 1.2em;
}
.enjeux-questions li {
margin-bottom: 8px;
color: var(--color-text);
}
.enjeux-closing {
max-width: 720px;
margin: 0 auto;
font-size: 20px;
font-weight: 600;
color: var(--color-navy);
}
@media (max-width: 767px) {
.enjeux-blocks {
grid-template-columns: 1fr;
}
}
/* ---------- Pour qui ---------- */
.pour-qui {
padding: 60px 0;
}
.pour-qui > .container > .eyebrow {
text-align: center;
margin-bottom: 24px;
}
/* ---------- Expertises ---------- */
.expertises {
padding: 60px 0;
background: #F6F6F6;
}
.expertise-groups {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.expertise-group {
background: var(--color-white);
border: 1px solid rgba(202, 129, 77, 0.35);
border-radius: 12px;
padding: 30px;
}
.expertise-group-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
.expertise-group-number {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--color-accent);
color: var(--color-white);
font-weight: 700;
font-family: var(--font-heading);
flex-shrink: 0;
}
.expertise-group-header h3 {
margin: 0;
text-transform: uppercase;
letter-spacing: 0.5px;
font-size: 18px;
}
.expertise-group-tagline {
font-size: 14px;
color: var(--color-text);
margin-bottom: 20px;
}
.expertise-items {
display: flex;
flex-direction: column;
gap: 16px;
}
.expertise-item {
display: block;
padding: 16px;
border-radius: 4px;
background: #F9F6F3;
transition: transform 0.2s ease, background 0.2s ease;
}
.expertise-item:hover {
transform: translateY(-2px);
background: #F3ECE4;
}
.expertise-item h4 {
margin-bottom: 6px;
color: var(--color-heading);
}
.expertise-item p {
font-size: 14px;
color: var(--color-text);
margin-bottom: 8px;
}
.expertise-item .more {
color: var(--color-accent);
font-weight: 600;
font-size: 13px;
}
@media (max-width: 980px) {
.expertise-groups {
grid-template-columns: 1fr;
}
}
/* ---------- Why (pourquoi Hoplite) ---------- */
.why {
padding: 60px 0;
}
.why-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 24px;
}
.why-card {
padding: 30px;
border: 1px solid rgba(202, 129, 77, 0.35);
border-radius: 12px;
background: linear-gradient(155deg, #FFFFFF 0%, #F5F1EB 100%);
}
.why-card-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--color-navy);
color: var(--color-accent);
font-family: var(--font-heading);
font-weight: 700;
margin-bottom: 16px;
}
.why-card h4 {
margin-bottom: 8px;
}
.why-card p {
font-size: 14px;
color: var(--color-text);
margin: 0;
}
/* ---------- Méthode ---------- */
.methode {
padding: 60px 0;
background: var(--color-navy);
color: var(--color-white);
}
.methode h2 {
color: var(--color-white);
}
.method-steps {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 24px;
}
.method-step {
text-align: center;
}
.method-step-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
border: 2px solid var(--color-accent);
color: var(--color-accent);
font-family: var(--font-heading);
font-weight: 700;
margin-bottom: 16px;
}
.method-step h4 {
color: var(--color-white);
margin-bottom: 8px;
}
.method-step p {
color: rgba(255, 255, 255, 0.75);
font-size: 14px;
margin: 0;
}
@media (max-width: 980px) {
.method-steps {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.method-steps {
grid-template-columns: 1fr;
}
}
/* ---------- Transformation ---------- */
.transformation {
padding: 60px 0;
text-align: center;
}
.transformation h2 {
color: var(--color-navy);
max-width: 780px;
margin-left: auto;
margin-right: auto;
}
.transformation-text {
max-width: 720px;
margin: 0 auto;
color: var(--color-text);
}
/* ---------- Blog ---------- */
.blog-page {
position: relative;
overflow: hidden;
background-color: #0A1826;
/* Papier millimétré : trame scientifique discrète */
background-image:
linear-gradient(rgba(202, 129, 77, 0.055) 1px, transparent 1px),
linear-gradient(90deg, rgba(202, 129, 77, 0.055) 1px, transparent 1px),
linear-gradient(rgba(202, 129, 77, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(202, 129, 77, 0.03) 1px, transparent 1px);
background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
}
/* Décor : atomes et formules, sans interaction */
.blog-decor {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
pointer-events: none;
overflow: hidden;
}
.blog-atom {
position: absolute;
opacity: 0.12;
}
.blog-atom--1 {
top: 40px;
right: -60px;
width: 320px;
transform: rotate(18deg);
}
.blog-atom--2 {
top: 46%;
left: -90px;
width: 260px;
transform: rotate(-24deg);
}
.blog-atom--3 {
bottom: 60px;
right: 8%;
width: 200px;
transform: rotate(40deg);
}
.blog-formula {
position: absolute;
color: var(--color-accent);
font-family: 'Cambria Math', Cambria, Georgia, serif;
font-style: italic;
white-space: nowrap;
opacity: 0.22;
user-select: none;
}
.blog-formula sup {
font-size: 0.65em;
}
.blog-formula--1 { top: 120px; left: 4%; font-size: 26px; transform: rotate(-6deg); }
.blog-formula--2 { top: 210px; right: 6%; font-size: 30px; transform: rotate(5deg); }
.blog-formula--3 { top: 34%; left: 8%; font-size: 22px; transform: rotate(3deg); }
.blog-formula--4 { top: 44%; right: 10%; font-size: 25px; transform: rotate(-4deg); }
.blog-formula--5 { top: 56%; left: 5%; font-size: 28px; transform: rotate(7deg); }
.blog-formula--6 { top: 66%; right: 5%; font-size: 23px; transform: rotate(-3deg); }
.blog-formula--7 { top: 78%; left: 9%; font-size: 24px; transform: rotate(4deg); }
.blog-formula--8 { bottom: 14%; right: 12%; font-size: 21px; transform: rotate(-5deg); }
.blog-formula--9 { bottom: 7%; left: 6%; font-size: 22px; transform: rotate(2deg); }
.blog-formula--10 { top: 26%; right: 16%; font-size: 20px; transform: rotate(-8deg); }
/* Sous 1200px les formules latérales passeraient sous le contenu */
@media (max-width: 1200px) {
.blog-formula {
display: none;
}
.blog-atom {
opacity: 0.08;
}
}
/* Hero */
.blog-hero {
position: relative;
z-index: 1;
padding: 70px 0 40px;
text-align: center;
}
.blog-hero h1 {
color: var(--color-white);
font-size: 40px;
max-width: 760px;
margin: 0 auto 12px;
}
.blog-hero-keywords {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin: 0;
}
.blog-hero-keywords button {
padding: 6px 16px;
border: 1px solid rgba(202, 129, 77, 0.5);
border-radius: 999px;
background: transparent;
color: var(--color-accent);
font-family: inherit;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.blog-hero-keywords button:hover,
.blog-hero-keywords button:focus-visible {
border-color: var(--color-accent);
background: rgba(202, 129, 77, 0.12);
}
.blog-hero-keywords button.is-active {
border-color: var(--color-accent);
background: var(--color-accent);
color: var(--color-white);
}
@media (max-width: 767px) {
.blog-hero h1 {
font-size: 28px;
}
}
/* Barre d'outils : recherche et modes d'affichage */
.blog-main {
position: relative;
z-index: 1;
padding: 20px 0 70px;
}
.blog-toolbar {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 20px;
margin-bottom: 40px;
padding: 24px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
background: rgba(255, 255, 255, 0.03);
}
.blog-filters {
display: flex;
flex-wrap: wrap;
gap: 16px;
flex: 1 1 420px;
}
.blog-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.blog-field--search {
flex: 1 1 220px;
}
.blog-field label {
color: var(--color-accent);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.blog-field input,
.blog-field select {
padding: 11px 14px;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 4px;
background: rgba(10, 24, 38, 0.7);
color: var(--color-white);
font-family: var(--font-body);
font-size: 15px;
}
.blog-field select {
appearance: none;
padding-right: 38px;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right 14px center;
}
.blog-field input::placeholder {
color: rgba(255, 255, 255, 0.4);
}
.blog-field input:focus,
.blog-field select:focus {
outline: none;
border-color: var(--color-accent);
}
.blog-views {
display: flex;
gap: 8px;
}
.blog-view-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 11px 18px;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 4px;
background: transparent;
color: rgba(255, 255, 255, 0.7);
font-family: var(--font-heading);
font-size: 14px;
font-weight: 600;
cursor: pointer;
}
.blog-view-btn:hover {
border-color: var(--color-accent);
color: var(--color-white);
}
.blog-view-btn.is-active {
border-color: var(--color-accent);
background: rgba(202, 129, 77, 0.15);
color: var(--color-white);
}
/* Pictogrammes des deux modes, dessinés en CSS */
.blog-view-icon {
display: grid;
gap: 2px;
width: 14px;
}
.blog-view-icon i {
display: block;
background: currentColor;
}
.blog-view-icon--mosaic {
grid-template-columns: 1fr 1fr;
}
.blog-view-icon--mosaic i {
height: 6px;
}
.blog-view-icon--feed i {
height: 3px;
}
/* Liste des articles */
.blog-list--mosaic {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 30px;
align-items: stretch;
}
/* Mosaïque : cartes de même hauteur, bouton « Lire l'article » aligné en bas */
.blog-list--mosaic .blog-card {
display: flex;
flex-direction: column;
}
.blog-list--mosaic .blog-card-body {
display: flex;
flex: 1;
flex-direction: column;
align-items: flex-start;
}
.blog-list--mosaic .blog-card-more {
margin-top: auto;
}
.blog-list--feed {
display: flex;
flex-direction: column;
gap: 50px;
}
.blog-card {
overflow: hidden;
border: 1px solid rgba(202, 129, 77, 0.25);
border-radius: 14px;
background:
radial-gradient(120% 80% at 12% 0%, rgba(202, 129, 77, 0.12) 0%, transparent 60%),
linear-gradient(160deg, #14293C 0%, #0E1F2E 60%, #0A1826 100%);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
/* Spécificité renforcée : doit primer sur le « display: grid » du mode lecture */
.blog-list .blog-card[hidden] {
display: none;
}
.blog-card-media img {
width: 100%;
height: 240px;
object-fit: cover;
object-position: center top;
}
.blog-card-body {
padding: 26px;
}
.blog-card-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-bottom: 10px;
color: rgba(255, 255, 255, 0.55);
font-size: 13px;
}
.blog-card-sep {
color: var(--color-accent);
}
.blog-card-body h2 {
color: var(--color-white);
font-size: 24px;
margin-bottom: 12px;
}
.blog-card-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 16px;
}
.blog-card-tags span {
padding: 3px 10px;
border-radius: 3px;
background: rgba(202, 129, 77, 0.14);
color: var(--color-accent);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.4px;
text-transform: uppercase;
}
.blog-card-excerpt,
.blog-card-content p {
color: rgba(255, 255, 255, 0.8);
margin-bottom: 1em;
}
.blog-card-content p {
text-align: justify;
hyphens: auto;
}
.blog-sources {
margin-top: 1.5em;
padding-top: 1em;
border-top: 1px solid rgba(255, 255, 255, 0.14);
font-size: 0.9em;
}
.blog-sources h3 {
margin: 0 0 0.5em;
font-size: 1em;
color: rgba(255, 255, 255, 0.94);
}
.blog-sources ol {
margin: 0;
padding-left: 1.4em;
color: rgba(255, 255, 255, 0.8);
}
.blog-ref a {
position: relative;
color: #E2A66C;
text-decoration: none;
font-size: 0.85em;
font-weight: 600;
}
/* Infobulle sombre au survol : titre de la source et son site */
.blog-ref-tip {
position: absolute;
bottom: 140%;
left: 50%;
z-index: 5;
width: max-content;
max-width: 280px;
padding: 8px 11px;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 8px;
background: #050C14;
color: #fff;
font-size: 0.82rem;
font-weight: 400;
line-height: 1.35;
text-align: left;
white-space: normal;
opacity: 0;
transform: translateX(calc(-50% + var(--tip-shift, 0px)));
transition: opacity 0.15s;
pointer-events: none;
}
.blog-ref-tip::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: calc(-6px - var(--tip-shift, 0px));
border: 6px solid transparent;
border-top-color: #050C14;
}
.blog-ref-tip small {
display: block;
margin-top: 3px;
color: #E2A66C;
font-size: 1em;
}
.blog-ref a:hover .blog-ref-tip,
.blog-ref a:focus-visible .blog-ref-tip {
opacity: 1;
}
.blog-sources a {
color: #E2A66C;
overflow-wrap: anywhere;
}
/* Image avec légende et crédit : uniquement pour les articles qui en ont (imageCaption) */
.blog-card-media--captioned {
position: relative;
}
.blog-media-caption {
position: absolute;
right: 0;
bottom: 0;
left: 0;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
padding: 48px 20px 12px;
background: linear-gradient(transparent, rgba(5, 12, 20, 0.92));
color: #fff;
}
.blog-media-caption p {
margin: 0;
}
.blog-media-legend {
display: none;
max-width: 62%;
font-size: 0.9rem;
font-style: italic;
}
.blog-media-credit {
margin-left: auto;
font-size: 0.75rem;
text-align: right;
}
.blog-media-credit a {
color: #E2A66C;
}
.blog-media-via,
.blog-media-info {
display: none;
}
/* Lecture : légende, « via » et commentaire apparaissent */
.blog-list--feed .blog-media-legend {
display: block;
}
.blog-list--feed .blog-media-via {
display: inline;
}
.blog-list--feed .blog-media-info {
display: block;
position: absolute;
top: 14px;
right: 14px;
}
.blog-media-info summary {
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border: 1.5px solid rgba(255, 255, 255, 0.7);
border-radius: 50%;
background: rgba(5, 12, 20, 0.6);
color: #fff;
font-weight: 700;
cursor: pointer;
list-style: none;
}
.blog-media-info summary::-webkit-details-marker {
display: none;
}
.blog-media-pop {
position: absolute;
top: 44px;
right: 0;
width: min(340px, 80vw);
padding: 14px 16px;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 10px;
background: rgba(5, 12, 20, 0.94);
color: rgba(255, 255, 255, 0.85);
font-size: 0.85rem;
font-style: italic;
}
.blog-media-pop strong {
color: #fff;
}
@media (max-width: 600px) {
.blog-media-caption {
flex-wrap: wrap;
}
.blog-media-legend {
max-width: 100%;
}
.blog-media-credit {
margin-left: 0;
text-align: left;
}
}
.blog-card-content p:last-child {
margin-bottom: 0;
}
/* Chaînes menace (rouge) → remédiation (vert), séparées par un bouclier */
.blog-chains {
list-style: none;
margin: 0 0 1em;
padding: 0;
}
.blog-chains li {
display: flex;
align-items: stretch;
gap: 12px;
margin-bottom: 12px;
}
.blog-chain {
flex: 1;
padding: 10px 14px;
border-left: 3px solid;
border-radius: 4px;
font-size: 15px;
line-height: 1.5;
}
.blog-chain--threat {
border-color: #E5534B;
background: rgba(229, 83, 75, 0.14);
color: #FF8A82;
}
.blog-chain--remedy {
border-color: #3FB96F;
background: rgba(63, 185, 111, 0.14);
color: #6EDB97;
}
.blog-chain-shield {
align-self: center;
font-size: 22px;
}
@media (max-width: 860px) {
.blog-chains li {
flex-direction: column;
gap: 6px;
}
}
/* Mosaïque : extrait seul, contenu complet masqué */
.blog-list--mosaic .blog-card-content {
display: none;
}
/* Lecture : article intégral, plus large, extrait masqué */
.blog-list--feed .blog-card-excerpt,
.blog-list--feed .blog-card-more {
display: none;
}
.blog-list--feed .blog-card {
display: grid;
grid-template-columns: 340px 1fr;
align-items: stretch;
}
.blog-list--feed .blog-card-media img {
height: 100%;
min-height: 300px;
}
/* Variante : image en paysage au-dessus du texte (articles marqués imageLandscape) */
.blog-list--feed .blog-card--landscape {
grid-template-columns: 1fr;
}
.blog-list--feed .blog-card--landscape .blog-card-media img {
height: auto;
aspect-ratio: 16 / 9;
max-height: 520px;
min-height: 0;
}
.blog-list--feed .blog-card-body {
padding: 34px;
}
.blog-list--feed .blog-card-body h2 {
font-size: 28px;
}
@media (max-width: 860px) {
.blog-list--feed .blog-card {
grid-template-columns: 1fr;
}
.blog-list--feed .blog-card-media img {
height: 240px;
min-height: 0;
}
}
.blog-empty {
padding: 40px 0;
color: rgba(255, 255, 255, 0.7);
text-align: center;
}
/* =========================================================
Page À propos — habillage sombre
Deux temps : « À propos » (vision, valeurs, parcours) puis
« La société », séparés par une rupture visuelle marquée.
========================================================= */
.about-page {
--ap-bg: #0B1A24;
--ap-ink: rgba(255, 255, 255, 0.94);
--ap-ink-soft: rgba(255, 255, 255, 0.68);
--ap-line: rgba(255, 255, 255, 0.10);
/* Verre dépoli des cartes de l'accueil */
--ap-card: linear-gradient(145deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 45%, rgba(255, 255, 255, 0.02) 100%);
--ap-accent: #E2A66C;
/* Texte courant posé sur la photo du temple : une seule taille */
--ap-overlay-size: 20px;
color: var(--ap-ink-soft);
}
/* Paragraphes posés directement sur la photo (ou sur le verre clair des
témoignages) : plus grands, plus contrastés, avec une ombre douce qui
les détache de la pierre claire. */
.about-manifeste p,
.company-split-content p,
.about-founder-step p,
.about-testimonial p {
font-size: var(--ap-overlay-size);
line-height: 1.75;
color: var(--ap-ink);
text-shadow: 0 1px 14px rgba(6, 18, 30, 0.55);
}
.about-page h1,
.about-page h2,
.about-page h3 {
color: var(--ap-ink);
}
.about-page p {
color: var(--ap-ink-soft);
}
.about-page .eyebrow {
font-family: var(--font-heading);
font-size: 20px;
font-weight: 700;
letter-spacing: 2.5px;
line-height: 1.3;
color: var(--ap-accent);
margin-bottom: 18px;
}
.about-page section {
padding: 84px 0;
}
.about-page .section-intro {
max-width: 860px;
margin-bottom: 56px;
}
.about-page .section-intro h2 {
font-size: clamp(30px, 3.4vw, 44px);
letter-spacing: -0.5px;
line-height: 1.14;
}
.about-page .btn:not(.btn--light) {
border-color: var(--ap-accent);
color: var(--ap-accent);
padding: 0.85em 2em;
font-size: 17px;
border-radius: 8px;
}
.about-page .btn:not(.btn--light):hover {
background: var(--ap-accent);
color: var(--ap-bg);
}
.about-page .btn--light {
padding: 0.85em 2em;
font-size: 17px;
border-radius: 8px;
}
/* Le CTA garderait sinon le navy générique, étranger à cette palette. */
.about-page .cta {
background:
radial-gradient(80% 140% at 50% 0%, rgba(226, 166, 108, 0.14) 0%, transparent 62%);
border-top: 1px solid var(--ap-line);
padding: 96px 0;
}
.about-page .cta p {
font-family: var(--font-heading);
font-size: clamp(26px, 3vw, 40px);
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.5px;
color: var(--ap-ink);
margin-bottom: 34px;
}
/* ---------- Hero : vision et micro-manifeste ---------- */
.about-hero {
background:
radial-gradient(70% 90% at 15% 10%, rgba(226, 166, 108, 0.13) 0%, transparent 62%);
border-bottom: 1px solid var(--ap-line);
text-align: center;
scroll-margin-top: 110px;
}
.about-hero h1 {
font-size: clamp(34px, 4.6vw, 60px);
line-height: 1.08;
letter-spacing: -1.2px;
font-weight: 700;
max-width: 900px;
margin: 0 auto 34px;
}
.about-manifeste {
max-width: 780px;
margin: 0 auto 40px;
text-align: left;
}
.about-manifeste p {
margin-bottom: 1.2em;
}
/* Le dernier paragraphe du manifeste porte la chute : on l'accentue. */
.about-manifeste p:last-child {
font-size: 22px;
font-weight: 600;
padding-left: 22px;
border-left: 2px solid var(--ap-accent);
margin-bottom: 0;
}
/* ---------- Valeurs ---------- */
.about-values-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.about-value {
position: relative;
overflow: hidden;
padding: 32px 26px;
border: 1px solid var(--ap-line);
border-radius: 18px;
background: var(--ap-card);
-webkit-backdrop-filter: blur(16px) saturate(150%);
backdrop-filter: blur(16px) saturate(150%);
transition: border-color 0.35s ease, background 0.35s ease;
}
.about-value::after {
content: '';
position: absolute;
right: -25%;
bottom: -35%;
width: 72%;
padding-top: 72%;
border-radius: 50%;
background: radial-gradient(circle, var(--card-glow) 0%, transparent 68%);
pointer-events: none;
}
.about-value:nth-child(1) { --card-glow: rgba(226, 166, 108, 0.16); --card-border: rgba(226, 166, 108, 0.42); }
.about-value:nth-child(2) { --card-glow: rgba(195, 208, 132, 0.15); --card-border: rgba(195, 208, 132, 0.42); }
.about-value:nth-child(3) { --card-glow: rgba(228, 144, 122, 0.15); --card-border: rgba(228, 144, 122, 0.42); }
.about-value:hover {
border-color: var(--card-border);
background: rgba(255, 255, 255, 0.055);
}
.about-value img {
position: relative;
z-index: 2;
width: 52px;
margin-bottom: 18px;
}
.about-value h3 {
position: relative;
z-index: 2;
font-size: 22px;
margin-bottom: 14px;
}
.about-value-line {
position: relative;
z-index: 2;
font-size: 15px;
line-height: 1.6;
margin: 0;
}
/* ---------- Parcours du fondateur ---------- */
/* Placé dans « La société », entre deux bandeaux de verre sombre : le
filet supérieur matérialise la séparation avec l'implantation. */
/* Même fond que le bandeau « Preuves sociales » de l'accueil : le motif
presque blanc, fusionné en multiply sur un bleu lumineux. */
.about-founder {
border-top: 1px solid var(--ap-line);
background: #2F5876 url('../images/backgrounds/motifs-fond-horizontal.jpg') center / cover;
background-blend-mode: multiply;
}
.about-founder-grid {
display: grid;
grid-template-columns: 340px 1fr;
gap: 56px;
align-items: start;
}
/* Médaillon : la photo est recadrée en rond, centrée sur le visage. */
.about-founder-portrait {
position: relative;
width: 340px;
aspect-ratio: 1;
border-radius: 50%;
overflow: hidden;
border: 1px solid rgba(226, 166, 108, 0.35);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 0 12px rgba(226, 166, 108, 0.06);
}
.about-founder-portrait img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 59% 28%;
}
.about-founder-steps {
display: grid;
gap: 26px;
}
.about-founder-step {
padding-left: 24px;
border-left: 2px solid rgba(226, 166, 108, 0.35);
}
.about-founder-step h3 {
font-size: 21px;
margin-bottom: 8px;
color: var(--ap-accent);
}
.about-founder-step p {
margin: 0;
}
/* ---------- Témoignages ---------- */
.about-testimonials-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.about-testimonial {
margin: 0;
padding: 32px 28px;
border: 1px solid var(--ap-line);
border-radius: 18px;
background: var(--ap-card);
-webkit-backdrop-filter: blur(16px) saturate(150%);
backdrop-filter: blur(16px) saturate(150%);
}
.about-testimonial cite {
display: block;
margin-top: 20px;
font-style: normal;
font-weight: 600;
color: var(--ap-accent);
}
/* ---------- La société : blocs texte / image ---------- */
/* Bandeau « Démystifier la cybersécurité » : le filtre cuivre / bleu de
la photo du temple cède la place aux teintes de la photo de la porte
(olive des murs à gauche, sarcelle du sol dans l'ombre à droite), pour
que celle-ci se fonde dans le fond. Le premier calque, fusionné en mode
« color », retient les lumières et les ombres du temple ; le second,
un voile translucide, l'assombrit juste assez pour s'accorder à la
photo. Les calques se fondent sur le fond de page, fixe ou non. */
.company-split {
position: relative;
}
.company-split::before,
.company-split::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
}
.company-split::before {
background: linear-gradient(100deg, #6A6338 0%, #4A5A3C 35%, #1E5254 70%, #0C3436 100%);
mix-blend-mode: color;
}
.company-split::after {
background:
/* Coin bas droit plongé dans le noir, comme l'ombre de la photo */
radial-gradient(75% 95% at 100% 100%, rgba(1, 6, 7, 0.95) 0%, rgba(1, 6, 7, 0.70) 40%, transparent 85%),
linear-gradient(100deg,
rgba(36, 38, 24, 0.40) 0%,
rgba(22, 34, 28, 0.45) 45%,
rgba(4, 24, 26, 0.55) 100%);
}
.company-split-inner {
position: relative;
z-index: 1;
}
.company-split-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 56px;
align-items: center;
}
.company-split-image img {
border-radius: 18px;
border: 1px solid var(--ap-line);
}
/* Sur deux colonnes, la photo prend la hauteur exacte du texte voisin :
la colonne s'étire sur la ligne de grille, l'image la remplit en hauteur
et garde ses proportions. */
@media (min-width: 981px) {
.company-split-inner {
align-items: stretch;
}
.company-split-content {
align-self: center;
}
.company-split-image {
position: relative;
}
.company-split-image img {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: auto;
max-width: 100%;
object-fit: cover;
}
}
.company-split-content h3 {
font-size: clamp(24px, 2.6vw, 32px);
line-height: 1.2;
margin-bottom: 20px;
}
/* ---------- Chiffres clés (mêmes que la page d'accueil) ---------- */
.about-page .company-stats {
border-top: 1px solid var(--ap-line);
border-bottom: 1px solid var(--ap-line);
padding: 30px 0;
}
.company-stats .stats-grid {
gap: 40px;
}
.company-stats .stat {
position: relative;
}
.company-stats .stat + .stat::before {
content: '';
position: absolute;
left: -20px;
top: 12%;
height: 76%;
width: 1px;
background: var(--ap-line);
}
.company-stats .stat-number {
font-size: clamp(40px, 5vw, 60px);
line-height: 1;
letter-spacing: -1.5px;
margin-bottom: 6px;
}
.company-stats .stat:nth-child(1) .stat-number { color: #E2A66C; }
.company-stats .stat:nth-child(2) .stat-number { color: #C3D084; }
.company-stats .stat:nth-child(3) .stat-number { color: #E4907A; }
.company-stats .stat-label {
font-size: 15px;
letter-spacing: 0.4px;
color: var(--ap-ink-soft);
}
/* ---------- Implantation et carte ---------- */
/* Le titre de la partie « La société » ouvre l'encadré de l'implantation. */
.company-map {
scroll-margin-top: 110px;
}
.company-map-head {
text-align: center;
margin-bottom: 52px;
padding-bottom: 36px;
border-bottom: 1px solid var(--ap-line);
}
.company-map-head h2 {
font-size: clamp(32px, 4vw, 52px);
letter-spacing: -1px;
line-height: 1.1;
margin: 0;
}
.company-map-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 56px;
align-items: center;
}
.company-map-content h3 {
font-size: clamp(24px, 2.6vw, 34px);
line-height: 1.2;
margin-bottom: 20px;
}
.company-map-content p {
font-size: 17px;
line-height: 1.75;
}
.company-map-facts {
list-style: none;
margin: 28px 0 0;
padding: 0;
display: grid;
gap: 12px;
}
.company-map-facts li {
display: flex;
flex-wrap: wrap;
gap: 4px 12px;
padding-top: 12px;
border-top: 1px solid var(--ap-line);
font-size: 16px;
color: var(--ap-ink-soft);
}
.company-map-facts strong {
min-width: 180px;
color: var(--ap-accent);
font-weight: 600;
}
.company-map-figure {
display: flex;
justify-content: center;
}
.france-map {
width: 100%;
max-width: 420px;
height: auto;
overflow: visible;
}
.france-map-land {
fill: rgba(255, 255, 255, 0.07);
stroke: rgba(255, 255, 255, 0.24);
stroke-width: 2;
}
.france-map-halo {
fill: rgba(226, 166, 108, 0.16);
}
.france-map-pin {
fill: #E2A66C;
}
.france-map-label {
fill: #E2A66C;
font-family: var(--font-heading);
font-size: 24px;
font-weight: 700;
letter-spacing: 1.5px;
}
/* ---------- Notre logo ---------- */
.about-page .company-logo {
border-top: 1px solid var(--ap-line);
text-align: center;
padding: 44px 0 36px;
}
.company-logo h3 {
font-size: clamp(24px, 2.6vw, 34px);
margin-bottom: 12px;
}
/* Le fichier entoure le logo d'un large panneau qui s'éteint en alpha sur
ses bords : on n'en garde que la bande utile (recadrage vertical), puis
on refait le fondu en haut et en bas pour que l'image se fonde toujours
dans le bandeau sans cadre visible. */
.company-logo-plate {
display: block;
width: 100%;
max-width: 920px;
margin: 0 auto;
}
.company-logo-plate img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1566 / 420;
object-fit: cover;
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
}
/* ---------- Adaptations ---------- */
@media (max-width: 980px) {
.about-page section {
padding: 60px 0;
}
.about-values-grid {
grid-template-columns: repeat(2, 1fr);
}
/* En une colonne, le bandeau est étroit et très haut, et le fond de page
porte déjà un voile plus dense : le dégradé passe à la verticale (la
photo de la porte est en bas), le voile s'allège et le noir se limite
au pied du bandeau, pour que le temple reste visible sous le texte. */
/* La fusion « color » sur le calque fixe du fond n'est pas fiable sur
mobile (Safari notamment) : le dégradé s'affichait opaque et masquait
le temple. Il devient un simple voile translucide. */
.company-split::before {
background: linear-gradient(180deg,
rgba(106, 99, 56, 0.55) 0%,
rgba(74, 90, 60, 0.55) 35%,
rgba(30, 82, 84, 0.55) 70%,
rgba(12, 52, 54, 0.60) 100%);
mix-blend-mode: normal;
}
.company-split::after {
background:
radial-gradient(100% 30% at 100% 100%, rgba(1, 6, 7, 0.85) 0%, rgba(1, 6, 7, 0.50) 45%, transparent 85%),
linear-gradient(180deg,
rgba(36, 38, 24, 0.10) 0%,
rgba(22, 34, 28, 0.15) 45%,
rgba(4, 24, 26, 0.35) 100%);
}
/* En une colonne, le bandeau devient très haut : « cover » grossirait
le motif. On lui donne la taille qu'il a dans les preuves sociales de
l'accueil sur smartphone, répétée en hauteur. */
.about-founder {
background-size: auto 740px;
background-repeat: repeat-y;
background-position: center top;
}
.about-founder-grid {
grid-template-columns: 1fr;
gap: 36px;
justify-items: center;
}
.about-founder-steps {
width: 100%;
}
.about-testimonials-grid {
grid-template-columns: 1fr;
}
.company-split-inner,
.company-map-inner {
grid-template-columns: 1fr;
gap: 36px;
}
/* En une colonne, l'image repasse toujours sous le texte */
.company-split--reverse .company-split-image {
order: 2;
}
}
@media (max-width: 767px) {
.about-page .eyebrow {
font-size: 17px;
letter-spacing: 2px;
}
.about-values-grid {
grid-template-columns: 1fr;
}
.about-founder-portrait {
width: 240px;
}
.about-page {
--ap-overlay-size: 18px;
}
.about-manifeste p:last-child {
font-size: 19px;
}
.company-stats .stats-grid {
grid-template-columns: 1fr;
gap: 22px;
}
/* En colonne, le séparateur vertical n'a plus de sens */
.company-stats .stat + .stat::before {
display: none;
}
.company-stats .stat-number {
font-size: 48px;
}
.company-map-facts strong {
min-width: 0;
width: 100%;
}
}
/* =========================================================
Homepage — habillage sombre
Contenu et structure inchangés : tout se joue ici, dans un
thème scopé sous .home. Chaque carte reçoit sa propre teinte
via --card-accent / --card-glow, dans une gamme volontairement
désaturée pour rester douce sur fond sombre.
========================================================= */
.home {
--home-ink: rgba(255, 255, 255, 0.94);
--home-ink-soft: rgba(255, 255, 255, 0.68);
/* Palette d'accents : ocre de marque, puis variations douces */
--accent-1: #E2A66C;
--accent-2: #C3D084;
--accent-3: #E4907A;
--accent-4: #92B7CD;
--accent-5: #D6B682;
color: var(--home-ink-soft);
}
/* ---------- Typographie : plus grande, plus affirmée ---------- */
.home h2,
.home h3,
.home h4 {
color: var(--home-ink);
}
.home p {
color: var(--home-ink-soft);
}
/* Les intitulés de section (ENJEUX, POUR QUI ?, MISSION…) portent
le repérage dans la page : ils passent de 13 à 20 px. */
.home .eyebrow {
font-family: var(--font-heading);
font-size: 20px;
font-weight: 700;
letter-spacing: 2.5px;
line-height: 1.3;
color: var(--accent-1);
margin-bottom: 18px;
}
.home .section-intro {
max-width: 860px;
margin-bottom: 56px;
}
.home .section-intro h2,
.home .mission h2,
.home .transformation h2,
.home .testimonials h2 {
font-size: clamp(30px, 3.4vw, 44px);
letter-spacing: -0.5px;
line-height: 1.14;
}
.home .section-lead {
font-size: 18px;
color: var(--home-ink-soft);
}
.home section {
padding-top: 84px;
padding-bottom: 84px;
}
/* ---------- Hero ---------- */
.home .hero-frame {
padding: 0 24px 24px;
}
.home .hero-panel {
border-radius: 20px;
min-height: 560px;
box-shadow: inset 0 0 0 1px var(--home-line);
}
.home .hero-panel-inner {
max-width: 680px;
z-index: 3;
}
.home .hero-panel h1 {
font-size: clamp(38px, 5.2vw, 68px);
line-height: 1.06;
letter-spacing: -1.5px;
font-weight: 700;
margin-bottom: 24px;
}
.home .hero-panel-text {
font-size: 20px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.78);
opacity: 1;
}
.home .hero-helmet {
z-index: 2;
}
/* ---------- Chiffres clés : le point d'accroche de la page ---------- */
.home .stats-bar {
padding: 64px 0;
}
.home .stats-grid {
gap: 40px;
}
.home .stat {
position: relative;
}
.home .stat + .stat::before {
content: '';
position: absolute;
left: -20px;
top: 12%;
height: 76%;
width: 1px;
background: var(--home-line);
}
.home .stat-number {
font-size: clamp(64px, 9vw, 112px);
line-height: 0.92;
letter-spacing: -3px;
margin-bottom: 10px;
color: var(--card-accent, var(--accent-1));
}
.home .stat:nth-child(1) { --card-accent: var(--accent-1); }
.home .stat:nth-child(2) { --card-accent: var(--accent-2); }
.home .stat:nth-child(3) { --card-accent: var(--accent-3); }
.home .stat-label {
font-size: 15px;
letter-spacing: 0.4px;
color: var(--home-ink-soft);
}
/* ---------- Cartes : socle commun ---------- */
/* Le halo diagonal reprend l'esprit des cartes de référence :
une lueur discrète dans la teinte de la carte, en bas à droite. */
.home .enjeux-block,
.home .expertise-group,
.home .why-card,
.home .testimonial-card {
position: relative;
overflow: hidden;
border-radius: 18px;
transition: border-color 0.35s ease, background 0.35s ease, transform 0.35s ease;
}
.home .enjeux-block::after,
.home .expertise-group::after,
.home .why-card::after,
.home .testimonial-card::after {
content: '';
position: absolute;
right: -25%;
bottom: -35%;
width: 72%;
padding-top: 72%;
border-radius: 50%;
background: radial-gradient(circle, var(--card-glow, rgba(226, 166, 108, 0.16)) 0%, transparent 68%);
pointer-events: none;
}
.home .enjeux-block:hover,
.home .expertise-group:hover,
.home .why-card:hover {
border-color: var(--card-border, rgba(255, 255, 255, 0.2));
}
/* ---------- Enjeux ---------- */
.home .enjeux-blocks {
gap: 28px;
margin-bottom: 60px;
}
.home .enjeux-block {
padding: 34px 30px;
border-top: 1px solid var(--home-line);
font-size: 21px;
font-weight: 600;
line-height: 1.3;
color: var(--home-ink);
}
/* Un filet coloré en tête de carte donne le rythme chromatique. */
.home .enjeux-block::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(to right, var(--card-accent), transparent);
}
.home .enjeux-block:nth-child(1) {
--card-accent: var(--accent-1);
--card-glow: rgba(226, 166, 108, 0.16);
--card-border: rgba(226, 166, 108, 0.42);
}
.home .enjeux-block:nth-child(2) {
--card-accent: var(--accent-2);
--card-glow: rgba(195, 208, 132, 0.15);
--card-border: rgba(195, 208, 132, 0.42);
}
.home .enjeux-block:nth-child(3) {
--card-accent: var(--accent-3);
--card-glow: rgba(228, 144, 122, 0.15);
--card-border: rgba(228, 144, 122, 0.42);
}
.home .enjeux-challenge {
max-width: 720px;
}
.home .enjeux-challenge-intro {
font-size: 19px;
color: var(--home-ink);
}
.home .enjeux-questions {
list-style: none;
padding: 0;
}
.home .enjeux-questions li {
position: relative;
padding-left: 30px;
margin-bottom: 14px;
font-size: 17px;
color: var(--home-ink-soft);
}
.home .enjeux-questions li::before {
content: '';
position: absolute;
left: 4px;
top: 12px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--accent-4);
}
.home .enjeux-closing {
font-size: clamp(22px, 2.4vw, 30px);
line-height: 1.35;
font-weight: 600;
color: var(--home-ink);
max-width: 840px;
}
/* ---------- Pour qui : onglets sur fond sombre ---------- */
.home .pour-qui .tabs {
border-radius: 18px;
max-width: 900px;
margin: 0 auto;
}
.home .pour-qui .tabs-nav {
background: rgba(255, 255, 255, 0.04);
justify-content: center;
}
/* Groupe centré : le filet du dernier onglet flotterait dans le vide. */
.home .pour-qui .tabs-nav-item:last-child {
border-right: 0;
}
.home .pour-qui .tabs-nav-item {
font-size: 17px;
padding: 18px 30px;
color: var(--home-ink-soft);
border-right-color: var(--home-line);
}
.home .pour-qui .tabs-nav-item.is-active {
background: rgba(255, 255, 255, 0.07);
color: var(--home-ink);
box-shadow: inset 0 -2px 0 var(--accent-1);
}
.home .pour-qui .tabs-panels {
background: transparent;
padding: 40px;
}
.home .pour-qui .tabs-panel p {
font-size: 19px;
line-height: 1.65;
margin: 0;
}
/* ---------- Mission ---------- */
.home .mission h2 {
color: var(--home-ink);
max-width: 900px;
}
.home .mission-text {
max-width: 780px;
font-size: 18px;
line-height: 1.75;
}
/* ---------- Expertises ---------- */
.home .expertise-groups {
gap: 28px;
}
.home .expertise-group {
padding: 34px 30px;
}
.home .expertise-group:nth-child(1) {
--card-accent: var(--accent-1);
--card-glow: rgba(226, 166, 108, 0.18);
--card-border: rgba(226, 166, 108, 0.42);
}
.home .expertise-group:nth-child(2) {
--card-accent: var(--accent-2);
--card-glow: rgba(195, 208, 132, 0.16);
--card-border: rgba(195, 208, 132, 0.42);
}
.home .expertise-group:nth-child(3) {
--card-accent: var(--accent-3);
--card-glow: rgba(228, 144, 122, 0.16);
--card-border: rgba(228, 144, 122, 0.42);
}
.home .expertise-group-header {
position: relative;
z-index: 2;
gap: 16px;
margin-bottom: 16px;
}
/* Le numéro devient un jeton discret, dans la teinte de la carte. */
.home .expertise-group-number {
width: 40px;
height: 40px;
font-size: 17px;
background: transparent;
color: var(--card-accent);
border: 1px solid var(--card-accent);
border-radius: 10px;
box-shadow: 0 0 22px -8px var(--card-accent);
}
.home .expertise-group-header h3 {
font-size: 22px;
letter-spacing: 1px;
color: var(--home-ink);
}
.home .expertise-group-tagline {
position: relative;
z-index: 2;
font-size: 16px;
line-height: 1.55;
margin-bottom: 26px;
}
.home .expertise-items {
position: relative;
z-index: 2;
gap: 14px;
}
.home .expertise-item {
padding: 22px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid transparent;
transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.home .expertise-item:hover {
transform: translateY(-3px);
background: rgba(255, 255, 255, 0.075);
border-color: var(--card-border);
}
.home .expertise-item h4 {
font-size: 19px;
margin-bottom: 10px;
color: var(--home-ink);
}
.home .expertise-item p {
font-size: 15px;
line-height: 1.6;
margin-bottom: 12px;
}
.home .expertise-item .more {
font-size: 14px;
color: var(--card-accent);
}
.home .expertise-item .more::after {
content: ' \2192';
}
/* Sélecteur des expertises : réservé au mobile et à la tablette, où les
trois blocs ne tiennent plus côte à côte. Trois boîtes, dans la teinte
de leur bloc, affichent chacune le sien seul, comme sur la page Services. */
.home .expertise-switcher {
display: none;
}
.home .expertise-switcher-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 16px 8px;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 16px;
background: linear-gradient(145deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 45%, rgba(255, 255, 255, 0.02) 100%);
-webkit-backdrop-filter: blur(16px) saturate(150%);
backdrop-filter: blur(16px) saturate(150%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.18),
0 14px 30px -18px rgba(2, 10, 20, 0.7);
color: var(--home-ink-soft);
font-family: var(--font-heading);
font-size: 15px;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
cursor: pointer;
opacity: 0.75;
transition: opacity 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.home .expertise-switcher-item:nth-child(1) { --card-accent: var(--accent-1); }
.home .expertise-switcher-item:nth-child(2) { --card-accent: var(--accent-2); }
.home .expertise-switcher-item:nth-child(3) { --card-accent: var(--accent-3); }
.home .expertise-switcher-number {
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border: 1px solid var(--card-accent);
border-radius: 10px;
color: var(--card-accent);
font-size: 16px;
}
.home .expertise-switcher-item:hover,
.home .expertise-switcher-item:focus-visible {
opacity: 1;
}
.home .expertise-switcher-item.is-active {
opacity: 1;
color: var(--card-accent);
border-color: var(--card-accent);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.18),
0 0 26px -12px var(--card-accent);
}
@media (max-width: 980px) {
.home .expertise-switcher {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-bottom: 20px;
}
/* Le masquage n'intervient qu'une fois le script chargé. */
.has-expertise-switcher .home .expertise-group {
display: none;
}
.has-expertise-switcher .home .expertise-group.is-active {
display: block;
}
}
@media (max-width: 400px) {
.home .expertise-switcher {
gap: 8px;
}
.home .expertise-switcher-item {
font-size: 13px;
letter-spacing: 0.2px;
}
}
/* ---------- Pourquoi Hoplite ---------- */
/* Cinq piliers sur une grille de 6 colonnes : chaque carte en occupe 2,
soit 3 par ligne. Les deux dernières sont décalées d'une colonne
pour rester centrées sous les trois premières. */
.home .why-grid {
grid-template-columns: repeat(6, 1fr);
gap: 28px;
}
.home .why-card {
grid-column: span 2;
}
.home .why-card:nth-child(4) {
grid-column: 2 / span 2;
}
.home .why-card:nth-child(5) {
grid-column: 4 / span 2;
}
.home .why-card {
padding: 34px 30px;
}
.home .why-card:nth-child(1) {
--card-accent: var(--accent-1);
--card-glow: rgba(226, 166, 108, 0.16);
--card-border: rgba(226, 166, 108, 0.42);
}
.home .why-card:nth-child(2) {
--card-accent: var(--accent-2);
--card-glow: rgba(195, 208, 132, 0.14);
--card-border: rgba(195, 208, 132, 0.42);
}
.home .why-card:nth-child(3) {
--card-accent: var(--accent-3);
--card-glow: rgba(228, 144, 122, 0.14);
--card-border: rgba(228, 144, 122, 0.42);
}
.home .why-card:nth-child(4) {
--card-accent: var(--accent-4);
--card-glow: rgba(146, 183, 205, 0.14);
--card-border: rgba(146, 183, 205, 0.42);
}
.home .why-card:nth-child(5) {
--card-accent: var(--accent-5);
--card-glow: rgba(214, 182, 130, 0.14);
--card-border: rgba(214, 182, 130, 0.42);
}
.home .why-card-number {
position: relative;
z-index: 2;
width: auto;
height: auto;
border-radius: 0;
background: none;
font-size: 46px;
line-height: 1;
letter-spacing: -2px;
color: var(--card-accent);
opacity: 0.9;
margin-bottom: 18px;
}
.home .why-card h4 {
position: relative;
z-index: 2;
font-size: 20px;
line-height: 1.25;
margin-bottom: 12px;
}
.home .why-card p {
position: relative;
z-index: 2;
font-size: 15px;
line-height: 1.65;
}
/* ---------- Méthode ---------- */
.home .method-steps {
gap: 28px;
}
.home .method-step {
text-align: left;
padding-top: 22px;
border-top: 1px solid var(--home-line);
}
.home .method-step:nth-child(1) { --card-accent: var(--accent-1); }
.home .method-step:nth-child(2) { --card-accent: var(--accent-2); }
.home .method-step:nth-child(3) { --card-accent: var(--accent-3); }
.home .method-step:nth-child(4) { --card-accent: var(--accent-4); }
.home .method-step:nth-child(5) { --card-accent: var(--accent-5); }
.home .method-step-number {
width: auto;
height: auto;
border: 0;
border-radius: 0;
font-size: 42px;
line-height: 1;
letter-spacing: -2px;
color: var(--card-accent);
margin-bottom: 14px;
}
.home .method-step h4 {
font-size: 20px;
margin-bottom: 10px;
}
.home .method-step p {
font-size: 15px;
line-height: 1.6;
color: var(--home-ink-soft);
}
/* ---------- Témoignages ---------- */
/* Le motif de fond est presque blanc : en multiply il ne laisse
affleurer que ses traits, sans éclaircir la section. */
.home .testimonials {
background-blend-mode: multiply;
}
.home .testimonials-grid {
gap: 28px;
margin-top: 48px;
}
.home .testimonial-card {
padding: 34px 30px;
}
.home .testimonial-card:nth-child(1) { --card-glow: rgba(226, 166, 108, 0.14); }
.home .testimonial-card:nth-child(2) { --card-glow: rgba(195, 208, 132, 0.13); }
.home .testimonial-card:nth-child(3) { --card-glow: rgba(228, 144, 122, 0.13); }
.home .testimonial-card p {
position: relative;
z-index: 2;
font-size: 18px;
line-height: 1.65;
}
.home .testimonial-card cite {
position: relative;
z-index: 2;
margin-top: 20px;
color: var(--accent-1);
}
/* ---------- Transformation ---------- */
.home .transformation h2 {
color: var(--home-ink);
max-width: 900px;
}
.home .transformation-text {
max-width: 780px;
font-size: 18px;
line-height: 1.75;
}
/* ---------- CTA final ---------- */
.home .cta {
border-top: 1px solid var(--home-line);
padding: 96px 0;
}
.home .cta p {
font-size: clamp(26px, 3vw, 40px);
line-height: 1.2;
letter-spacing: -0.5px;
font-family: var(--font-heading);
font-weight: 600;
color: var(--home-ink);
margin-bottom: 34px;
}
.home .btn {
padding: 0.85em 2em;
font-size: 17px;
border-radius: 8px;
}
/* L'ocre de marque manque de présence sur fond sombre :
les boutons reprennent la version éclaircie de la palette. */
.home .btn:not(.btn--light) {
border-color: var(--accent-1);
color: var(--accent-1);
}
.home .btn:not(.btn--light):hover {
background: var(--accent-1);
color: var(--home-bg);
}
/* ---------- Relief : fond éclairci et reflets spectraux ---------- */
/* Fond photo de toutes les pages : l'Acropole (constantinos.jpg), traitée
en bichromie cuivre / bleu, à la manière d'un filtre de couleur balayant
l'image de gauche à droite : cuivre de la charte (#CA814D) à gauche, bleu
(#2E6496 puis #143954) à droite. Ce dégradé, opaque et fusionné en mode
« color », remplace les teintes d'origine tout en conservant les
lumières et les ombres de la photo. Par-dessus, un voile translucide du
même sens (cuivre sombre vers bleu nuit #0F2436) assourdit l'ensemble
pour garder le texte blanc lisible. Fixée à la fenêtre, la surcouche ne
change pas au défilement.
Au-dessus encore, un reflet spectral : une lueur blanche en haut à droite
et un rai de lumière diagonal dont les franges irisées (bleu, lavande,
ambre, menthe) convergent vers un cœur blanc.
Tout en haut, un motif de chiffres binaires et de circuits, tiré de
l'ancien fond bleu : blanc translucide, fusionné en « screen », il prend
la teinte du dessous. Il occupe le coin haut gauche et s'efface vers le
centre pour laisser le temple dégagé.
Le nombre de modes de fusion déclarés doit suivre le nombre de couches de
chaque fond. Voile et photo sont fixés à la fenêtre : la page, le cadre du
header, la barre de menu et le panneau du H1 les partagent sans couture. */
:root {
--motif-size: 1208px;
--home-veil:
url('../images/backgrounds/motif-binaire-coin.webp') 0 0 / var(--motif-size) auto no-repeat fixed,
radial-gradient(55% 45% at 80% 0%, rgba(246, 246, 246, 0.26) 0%, rgba(246, 246, 246, 0.09) 45%, transparent 75%) fixed,
linear-gradient(115deg,
transparent 32%,
rgba(120, 170, 255, 0.06) 41%,
rgba(190, 165, 255, 0.08) 45%,
rgba(255, 255, 255, 0.17) 50%,
rgba(255, 222, 185, 0.08) 55%,
rgba(150, 230, 220, 0.06) 59%,
transparent 68%) fixed,
linear-gradient(100deg,
rgba(122, 68, 36, 0.50) 0%,
rgba(96, 62, 52, 0.50) 35%,
rgba(30, 58, 90, 0.58) 65%,
rgba(15, 36, 54, 0.68) 100%) fixed;
--home-photo:
linear-gradient(100deg, #CA814D 0%, #C07A55 30%, #2E6496 65%, #143954 100%) fixed,
#143954 url('../images/backgrounds/constantinos-2560.jpg') center / cover no-repeat fixed;
/* Motif binaire, lueur, rai spectral, voile, teinte bleue, photo */
--home-blend: screen, screen, screen, normal, color, normal;
}
/* Écran vertical (smartphone, tablette tenue droite) : recadrage portrait
de l'Acropole (1080 × 1800), centré sur le Parthénon. Le monument
occupe environ les trois quarts de la largeur d'un téléphone et se place
au milieu de l'écran, avec le ciel au-dessus et la colline au-dessous. */
@media (max-aspect-ratio: 4/5) {
:root {
--motif-size: 700px;
--home-photo:
linear-gradient(100deg, #CA814D 0%, #C07A55 30%, #2E6496 65%, #143954 100%) fixed,
#143954 url('../images/backgrounds/constantinos-mobile.jpg') center / cover no-repeat fixed;
}
}
/* Le fond de page s'éclaircit vers un bleu acier lumineux pour se détacher
du bleu marine des bandeaux (header, footer). Les sections deviennent
transparentes : une seule nappe de lumière, posée sur .home, court
sous toute la page au lieu d'être recoupée section par section. */
/* Accueil, Services, Formations et À propos partagent la photo de
l'Acropole et son voile. */
.home,
.services-page,
.formations-page,
.about-page {
background: var(--home-veil), var(--home-photo);
background-blend-mode: var(--home-blend);
}
/* Les navigateurs mobiles ignorent souvent le fond fixé : la photo serait
alors calculée sur toute la hauteur de la page, donc agrandie et cadrée
différemment d'une page à l'autre. Sur écran tactile ou étroit, elle
passe sur un calque fixé à l'écran, derrière le contenu, qui ne dépend
plus de la longueur de la page : le cadrage est identique partout. Le
calque prend la hauteur maximale de l'écran (100lvh) pour ne pas se
redimensionner quand la barre d'adresse se replie au défilement. Un voile
bleu nuit un peu plus dense garde une lecture confortable. */
@media (hover: none), (pointer: coarse), (max-width: 980px) {
.home,
.services-page,
.formations-page,
.about-page {
position: relative;
isolation: isolate;
background: none;
}
.home::before,
.services-page::before,
.formations-page::before,
.about-page::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
height: 100lvh;
z-index: -1;
pointer-events: none;
background:
linear-gradient(rgba(15, 36, 54, 0.22), rgba(15, 36, 54, 0.22)),
var(--home-veil),
var(--home-photo);
/* Le calque est déjà fixé : ses couches suivent son cadre. */
background-attachment: scroll;
background-blend-mode: normal, var(--home-blend);
}
/* Le calque fixé appartient à la page, positionnée : il passerait
par-dessus le pied de page, qui ne l'est pas. Le pied de page, opaque,
est placé au-dessus : la photo s'arrête où il commence. */
.site-footer {
position: relative;
z-index: 1;
}
}
/* Bandeaux de verre sombre de la page À propos, en alternance avec les
sections transparentes, comme sur l'accueil. */
.about-values,
.company-stats,
.company-map,
.company-logo {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 35%),
rgba(12, 32, 50, 0.80);
-webkit-backdrop-filter: blur(28px) saturate(170%);
backdrop-filter: blur(28px) saturate(170%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.08),
inset 0 -1px 0 rgba(0, 0, 0, 0.35);
}
.home {
--home-bg: #21425C;
--home-line: rgba(255, 255, 255, 0.14);
/* Spectre volontairement pâle : cyan, lavande, ocre de marque. */
--prism: linear-gradient(90deg,
rgba(146, 214, 230, 0) 0%,
rgba(110, 215, 245, 0.95) 22%,
rgba(175, 145, 255, 0.95) 50%,
rgba(240, 170, 100, 0.95) 78%,
rgba(226, 166, 108, 0) 100%);
position: relative;
isolation: isolate;
}
/* Le cadre du hero perd son fond blanc générique : la photo transparaît. */
.home .hero-frame {
background: transparent;
}
.home .cta {
background: radial-gradient(80% 140% at 50% 0%, rgba(226, 166, 108, 0.18) 0%, transparent 62%);
}
/* Témoignages : section claire entre deux bandeaux sombres. Le motif,
fusionné en multiply, a besoin d'une couleur opaque : on lui donne
un bleu plus lumineux que le fond pour qu'il ne passe pas pour sombre. */
.home .testimonials {
background-color: #2F5876;
}
/* Bandeaux bleu foncé, un sur deux, dans la teinte du header et du footer.
Ce sont des plaques de verre sombre : le flou d'arrière-plan diffuse la
photo qui passe dessous, un reflet clair court sur leur tranche haute
et un fil prismatique en souligne le bord. */
.home .stats-bar,
.home .pour-qui,
.home .expertises,
.home .methode,
.home .transformation {
position: relative;
background:
var(--prism) top / 100% 1px no-repeat,
linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 35%),
rgba(12, 32, 50, 0.80);
-webkit-backdrop-filter: blur(28px) saturate(170%);
backdrop-filter: blur(28px) saturate(170%);
border-top: 0;
border-bottom: 0;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.08),
inset 0 -1px 0 rgba(0, 0, 0, 0.35),
0 30px 60px -40px rgba(0, 0, 0, 0.6);
}
/* Le fil prismatique des chiffres clés est porté par le fond ci-dessus. */
.home .stats-bar::before,
.home .stats-bar::after {
content: none;
}
/* Le cadre du header de l'accueil, hors de .home, montre la même photo :
fixée à la fenêtre, elle se raccorde sans couture à la page. */
.site-header--boxed {
background: var(--home-veil), var(--home-photo);
background-blend-mode: var(--home-blend);
}
/* Le panneau du H1 reprend lui aussi la photo, fixée à la fenêtre et donc
raccordée à la barre de menu et à la page ; le casque reste posé
par-dessus. */
.home .hero-panel--main {
background:
/* Voile bleu nuit : sur la pierre claire du temple, il détache le
panneau de la page et garde le texte blanc et ocre lisible. */
linear-gradient(rgba(15, 36, 54, 0.32), rgba(15, 36, 54, 0.32)) fixed,
var(--home-veil),
var(--home-photo);
/* Voile bleu nuit en plus des couches communes */
background-blend-mode: normal, var(--home-blend);
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.14),
0 24px 50px -24px rgba(0, 0, 0, 0.65);
}
/* La barre de menu montre la même photo, fixée à la
fenêtre comme celle de la page, donc parfaitement raccordée. Un liseré
clair et l'ombre portée la détachent du cadre. */
.site-header--boxed .site-header-bar {
background:
/* Voile bleu nuit : sur la pierre claire du temple, il détache le
panneau de la page et garde le texte blanc et ocre lisible. */
linear-gradient(rgba(15, 36, 54, 0.32), rgba(15, 36, 54, 0.32)) fixed,
var(--home-veil),
var(--home-photo);
/* Voile bleu nuit en plus des couches communes */
background-blend-mode: normal, var(--home-blend);
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.14),
0 12px 30px -12px rgba(0, 0, 0, 0.6);
}
@media (hover: none), (pointer: coarse), (max-width: 980px) {
.site-header--boxed {
background: transparent;
}
.site-header--boxed .site-header-bar {
background: rgba(15, 36, 54, 0.78);
-webkit-backdrop-filter: blur(18px) saturate(150%);
backdrop-filter: blur(18px) saturate(150%);
}
.home .hero-panel--main {
background: rgba(15, 36, 54, 0.45);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
}
/* ---------- Effet vitre sur les cartes ---------- */
/* Verre dépoli : fond translucide dégradé, flou de ce qui passe derrière,
arête haute éclairée et ombre portée douce. */
.home .enjeux-block,
.home .expertise-group,
.home .why-card,
.home .testimonial-card,
.home .pour-qui .tabs {
background: linear-gradient(145deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 45%, rgba(255, 255, 255, 0.02) 100%);
-webkit-backdrop-filter: blur(16px) saturate(150%);
backdrop-filter: blur(16px) saturate(150%);
border: 1px solid rgba(255, 255, 255, 0.16);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.22),
inset 0 0 0 1px rgba(255, 255, 255, 0.03),
0 24px 50px -28px rgba(2, 10, 20, 0.7);
}
.home .enjeux-block:hover,
.home .expertise-group:hover,
.home .why-card:hover {
background: linear-gradient(145deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.06) 45%, rgba(255, 255, 255, 0.03) 100%);
}
/* Reflet spectral sur l'arête haute, comme la tranche d'un verre
qui décompose la lumière. */
.home .expertise-group::before,
.home .why-card::before,
.home .testimonial-card::before {
content: '';
position: absolute;
top: 0;
left: 8%;
right: 8%;
height: 1px;
background: var(--prism);
opacity: 0.9;
pointer-events: none;
transition: opacity 0.35s ease;
}
.home .expertise-group:hover::before,
.home .why-card:hover::before {
opacity: 1;
}
/* ---------- Adaptations ---------- */
@media (max-width: 980px) {
.home section {
padding-top: 60px;
padding-bottom: 60px;
}
.home .stats-grid {
grid-template-columns: repeat(3, 1fr);
}
/* Cinq étapes sur deux lignes : trois dessus, deux centrées dessous,
reliées par des flèches dans l'ordre de lecture. */
.home .method-steps {
grid-template-columns: repeat(6, 1fr);
column-gap: 28px;
row-gap: 36px;
}
.home .method-step {
position: relative;
grid-column: span 2;
text-align: center;
}
.home .method-step:nth-child(4) {
grid-column: 2 / span 2;
}
.home .method-step:not(:last-child):not(:nth-child(3))::after {
content: '\2192';
position: absolute;
top: 22px;
right: -14px;
transform: translateX(50%);
font-size: 20px;
line-height: 42px;
color: var(--home-ink-soft);
}
/* Deux piliers par ligne, le cinquième centré dessous */
.home .why-grid {
grid-template-columns: repeat(4, 1fr);
}
.home .why-card,
.home .why-card:nth-child(4) {
grid-column: span 2;
}
.home .why-card:nth-child(5) {
grid-column: 2 / span 2;
}
}
@media (max-width: 767px) {
.home .hero-frame {
padding: 0 12px 12px;
}
.home .hero-panel h1 {
letter-spacing: -0.8px;
}
.home .hero-panel-text {
font-size: 17px;
}
/* Casque : au lieu d'être masqué, il passe sous le texte, calé à
droite, et déborde du bas du panneau comme il déborde en haut et
en bas sur grand écran. */
.home .hero-panel {
flex-direction: column;
align-items: stretch;
min-height: 0;
padding-top: 48px;
padding-bottom: 0;
}
.home .hero-frame {
padding-bottom: 40px;
}
.home .hero-helmet {
display: block;
position: relative;
top: auto;
right: auto;
align-self: flex-end;
height: 250px;
width: auto;
margin: -12px -8px -36px 0;
opacity: 1;
}
/* Les trois chiffres restent alignés, plus petits ; leur libellé
passe sur plusieurs lignes. */
.home .stats-bar {
padding: 44px 0;
}
.home .stats-grid {
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.home .stat + .stat::before {
left: -10px;
}
.home .stat-number {
font-size: 52px;
letter-spacing: -1.5px;
margin-bottom: 8px;
}
.home .stat-label {
font-size: 13px;
line-height: 1.35;
letter-spacing: 0.2px;
}
.home .enjeux-block {
font-size: 19px;
}
.home .pour-qui .tabs-panels {
padding: 26px;
}
/* Trois colonnes seraient trop étroites : une étape par ligne, le
numéro à gauche, le texte à droite, sans flèches. */
.home .method-steps {
grid-template-columns: 1fr;
row-gap: 0;
}
.home .method-step,
.home .method-step:nth-child(4) {
display: grid;
grid-template-columns: 52px 1fr;
column-gap: 14px;
grid-column: auto;
text-align: left;
padding: 18px 0;
}
.home .method-step:not(:last-child):not(:nth-child(3))::after {
content: none;
}
.home .method-step-number {
grid-row: span 2;
font-size: 34px;
letter-spacing: -1px;
margin: 0;
}
.home .method-step h4 {
font-size: 17px;
margin-bottom: 4px;
}
.home .method-step p {
font-size: 16px;
line-height: 1.55;
}
.home .why-grid {
grid-template-columns: 1fr;
}
.home .why-card,
.home .why-card:nth-child(4),
.home .why-card:nth-child(5) {
grid-column: auto;
}
.home .eyebrow {
font-size: 17px;
letter-spacing: 2px;
}
}
/* =========================================================
Lecture mobile : réglages communs à toutes les pages
========================================================= */
@media (max-width: 980px) {
/* Bouton du menu et boutons d'action : zone tactile d'au moins 44 px */
.mobile-menu-toggle {
padding: 12px 9px;
margin-right: -9px;
}
.btn {
padding-top: 0.8em;
padding-bottom: 0.8em;
}
/* Sélecteurs Services / Formations : boîtes plus compactes sur tablette */
.service-switcher-list {
gap: 12px;
}
.service-switcher-item {
padding: 16px 16px;
gap: 12px;
font-size: 16px;
}
.service-switcher-item img {
width: 34px;
}
}
@media (max-width: 767px) {
/* Header : cadre et logo resserrés pour rendre de la hauteur au contenu */
.site-header--boxed {
padding: 10px 10px 0;
}
.header-inner {
padding: 6px 0;
}
.site-logo img {
width: min(210px, 58vw);
}
.mobile-menu li a {
padding: 12px 0;
font-size: 17px;
}
/* Formations : carte et programme respirent sans perdre de largeur */
.formation {
padding: 30px 0;
}
.formation .container {
--card-pad-top: 44px;
--card-pad-x: 20px;
padding-bottom: 36px;
}
.formation-intro h2 {
font-size: 26px;
}
.formation-tagline {
font-size: 17px;
}
/* Les cinq modules tiennent sur deux lignes au lieu d'une colonne
qui repousserait le programme sous la ligne de flottaison. */
.formation .tabs-nav {
flex-direction: row;
flex-wrap: wrap;
}
.formation .tabs-nav-item {
flex: 1 0 30%;
padding: 12px 10px;
text-align: center;
border-right: 1px solid #E4E8EC;
border-bottom: 1px solid #E4E8EC;
}
.formation .tabs-panels {
padding: 22px 18px;
}
/* La photo coiffe la carte sans repousser le titre trop bas. */
.formation-photo {
min-height: 200px;
}
.formation-icon {
width: 54px;
margin-bottom: 10px;
}
.formation-meta {
gap: 18px;
}
.program-item p,
.formation-meta-item p {
font-size: 16px;
line-height: 1.6;
}
}
/* Petits téléphones : chaque onglet de module et l'accroche des boutons
de formation restent sur une seule ligne. */
@media (max-width: 380px) {
.formation .tabs-nav-item {
padding: 12px 6px;
font-size: 14px;
white-space: nowrap;
}
.formations-page .service-switcher-kicker {
font-size: 11px;
letter-spacing: 0.6px;
white-space: nowrap;
}
}