/*
Theme Name: Dir IPS
Description: Thème sur-mesure Dir IPS — refonte 2026 (Wizz You)
Author: Wizz You
Version: 0.1.0
Text Domain: dirips
*/
:root {
--chevron-blanc: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201032.000000%20924.000000%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%3E%3Cg%20transform%3D%22translate(0.000000%2C924.000000)%20scale(0.100000%2C-0.100000)%22%0Afill%3D%22%23000000%22%20stroke%3D%22none%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M5594%209117%20c-21%20-12%20-17%20-45%208%20-58%2012%20-6%2072%20-63%20134%20-125%2097%20-99%20117%0A-114%20145%20-114%2026%200%2042%20-11%2089%20-60%2047%20-50%2062%20-60%2090%20-60%2028%200%2045%20-13%20120%20-90%0A74%20-75%2093%20-90%20119%20-90%2028%200%2067%20-36%20346%20-315%20279%20-279%20315%20-318%20315%20-346%200%20-26%0A15%20-45%2090%20-119%2080%20-78%2090%20-92%2090%20-123%200%20-28%206%20-40%2030%20-57%2024%20-17%2030%20-28%2030%0A-60%200%20-32%206%20-43%2030%20-60%2024%20-17%2030%20-28%2030%20-60%200%20-32%206%20-43%2030%20-60%2024%20-17%2030%0A-28%2030%20-60%200%20-32%206%20-43%2030%20-60%2028%20-20%2030%20-25%2030%20-90%200%20-65%202%20-70%2030%20-90%2030%0A-21%2030%20-22%2030%20-120%200%20-98%200%20-99%2030%20-120%2030%20-21%2030%20-21%2030%20-540%200%20-519%200%20-519%0A-30%20-540%20-30%20-21%20-30%20-22%20-30%20-120%200%20-98%200%20-99%20-30%20-120%20-30%20-21%20-30%20-22%20-30%0A-120%200%20-98%200%20-99%20-30%20-120%20-28%20-20%20-30%20-25%20-30%20-90%200%20-65%20-2%20-70%20-30%20-90%20-24%0A-17%20-30%20-28%20-30%20-60%200%20-32%20-6%20-43%20-30%20-60%20-28%20-20%20-30%20-25%20-30%20-90%200%20-65%20-2%0A-70%20-30%20-90%20-24%20-17%20-30%20-28%20-30%20-60%200%20-32%20-6%20-43%20-30%20-60%20-24%20-17%20-30%20-28%0A-30%20-60%200%20-32%20-6%20-43%20-30%20-60%20-24%20-17%20-30%20-28%20-30%20-60%200%20-32%20-6%20-43%20-30%20-60%0A-24%20-17%20-30%20-29%20-30%20-57%200%20-31%20-8%20-44%20-60%20-93%20-52%20-49%20-60%20-62%20-60%20-93%200%20-28%0A-6%20-40%20-30%20-57%20-24%20-17%20-30%20-29%20-30%20-57%200%20-31%20-8%20-44%20-60%20-93%20-50%20-47%20-60%20-62%0A-60%20-90%200%20-28%20-10%20-43%20-60%20-90%20-50%20-47%20-60%20-62%20-60%20-90%200%20-28%20-13%20-45%20-90%0A-120%20-76%20-74%20-90%20-93%20-90%20-120%200%20-27%20-16%20-48%20-120%20-150%20-103%20-102%20-120%20-123%0A-120%20-150%200%20-27%20-20%20-51%20-150%20-180%20-129%20-127%20-150%20-153%20-150%20-179%200%20-47%20-1634%0A-1681%20-1680%20-1681%20-47%200%20-240%20-195%20-240%20-243%200%20-43%2015%20-57%2061%20-57%2030%200%2042%206%0A59%2030%2017%2024%2028%2030%2060%2030%2032%200%2043%206%2060%2030%2017%2024%2028%2030%2060%2030%2032%200%2043%206%2060%2030%0A17%2024%2028%2030%2060%2030%2032%200%2043%206%2060%2030%2017%2024%2029%2030%2057%2030%2031%200%2044%208%2093%2060%2049%2052%0A62%2060%2093%2060%2028%200%2040%206%2057%2030%2017%2024%2029%2030%2057%2030%2031%200%2044%208%2093%2060%2047%2050%2062%2060%0A90%2060%2028%200%2043%2010%2090%2060%2047%2050%2062%2060%2090%2060%2028%200%2043%2010%2090%2060%2047%2050%2062%2060%2090%2060%0A28%200%2043%2010%2090%2060%2047%2050%2062%2060%2090%2060%2028%200%2043%2010%2090%2060%2047%2050%2062%2060%2090%2060%2028%200%0A43%2010%2090%2060%2047%2050%2062%2060%2090%2060%2028%200%2043%2010%2090%2060%2047%2050%2062%2060%2090%2060%2028%200%2045%2013%0A120%2090%2078%2080%2092%2090%20123%2090%2028%200%2040%206%2057%2030%2017%2024%2029%2030%2057%2030%2031%200%2045%2010%20123%0A90%2074%2076%2093%2090%20120%2090%2027%200%2048%2016%20150%20120%20102%20104%20123%20120%20150%20120%2027%200%2046%2014%0A120%2090%2075%2077%2093%2090%20120%2090%2027%200%2045%2013%20120%2090%2075%2077%2093%2090%20120%2090%2027%200%2045%2013%0A120%2090%2074%2076%2093%2090%20120%2090%2027%200%2048%2016%20150%20120%20102%20103%20123%20120%20150%20120%2027%200%0A51%2020%20180%20150%20129%20130%20153%20150%20180%20150%2027%200%2051%2020%20180%20150%20127%20129%20153%20150%0A179%20150%2048%200%201261%201214%201261%201261%200%2026%2015%2046%2090%20119%2077%2075%2090%2092%2090%20120%200%2028%0A10%2043%2060%2090%2052%2049%2060%2062%2060%2093%200%2028%206%2040%2030%2057%2030%2021%2031%2024%2028%2091%20-3%2073%205%2088%0A45%2089%2016%200%2017%2017%2017%20209%200%20209%200%20209%20-30%20215%20-28%205%20-30%209%20-30%2047%200%2039%20-5%2047%0A-60%2099%20-49%2046%20-60%2063%20-60%2089%200%2047%20-253%20301%20-301%20301%20-26%200%20-48%2018%20-149%20120%0A-103%20104%20-122%20120%20-151%20120%20-27%200%20-42%2011%20-89%2060%20-47%2050%20-62%2060%20-90%2060%20-28%200%0A-43%2010%20-90%2060%20-47%2050%20-62%2060%20-90%2060%20-28%200%20-43%2010%20-90%2060%20-47%2050%20-62%2060%20-90%2060%0A-28%200%20-43%2010%20-90%2060%20-49%2052%20-62%2060%20-93%2060%20-28%200%20-40%206%20-57%2030%20-17%2024%20-29%2030%0A-57%2030%20-31%200%20-44%208%20-93%2060%20-49%2052%20-62%2060%20-93%2060%20-28%200%20-40%206%20-57%2030%20-17%2024%0A-28%2030%20-60%2030%20-32%200%20-43%206%20-60%2030%20-17%2024%20-28%2030%20-60%2030%20-32%200%20-43%206%20-60%2030%0A-17%2024%20-29%2030%20-57%2030%20-31%200%20-44%208%20-93%2060%20-49%2052%20-62%2060%20-93%2060%20-28%200%20-40%206%0A-57%2030%20-17%2024%20-28%2030%20-60%2030%20-32%200%20-43%206%20-60%2030%20-17%2024%20-28%2030%20-60%2030%20-32%200%0A-43%206%20-60%2030%20-17%2024%20-28%2030%20-60%2030%20-32%200%20-43%206%20-60%2030%20-17%2024%20-28%2030%20-60%2030%0A-32%200%20-43%206%20-60%2030%20-17%2024%20-28%2030%20-60%2030%20-32%200%20-43%206%20-60%2030%20-17%2024%20-28%2030%0A-60%2030%20-32%200%20-43%206%20-60%2030%20-17%2024%20-28%2030%20-60%2030%20-32%200%20-43%206%20-60%2030%20-20%2028%0A-25%2030%20-90%2030%20-65%200%20-70%202%20-90%2030%20-17%2024%20-28%2030%20-60%2030%20-32%200%20-43%206%20-60%2030%0A-17%2024%20-28%2030%20-60%2030%20-32%200%20-43%206%20-60%2030%20-17%2024%20-28%2030%20-60%2030%20-32%200%20-43%206%0A-60%2030%20-20%2028%20-25%2030%20-90%2030%20-65%200%20-70%202%20-90%2030%20-17%2024%20-28%2030%20-60%2030%20-32%200%0A-43%206%20-60%2030%20-20%2028%20-25%2030%20-90%2030%20-65%200%20-70%202%20-90%2030%20-20%2028%20-25%2030%20-90%2030%0A-65%200%20-70%202%20-90%2029%20-21%2030%20-21%2030%20-146%2033%20-69%202%20-132%20-1%20-140%20-5z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
--green-clair: #3FD9BC;
--navy: #2A2586;
--navy-deep: #1E1A66;
--navy-ink: #17143F;
--violet: #7C4DFF;
--violet-bright: #CF7BFF;
--green: #0E9E82;
--green-bright: #64D2B9;
--azure: #4A54D6;
--azure-soft: #EDEEFB;
--azure-line: #DCDEF7;
--amber: #F5A623;
--ink: #171633;
--muted: #4A4E66;
--line: #E5EAF3;
--soft: #F6F9FE;
--bg: #fff;
--font-heading: 'Montserrat', sans-serif;
--font-body: 'Open Sans', system-ui, sans-serif;
--radius: 16px;
--radius-sm: 10px;
/*
* Une seule largeur de contenu pour tout le site. Trois valeurs
* coexistaient — 1180 pour les pages courantes, 1320 pour les pages
* produit, 1440 pour l'en-tête et le pied — et deux d'entre elles se
* retrouvaient sur la même page : les sections ne s'alignaient plus
* verticalement d'un bloc à l'autre.
*/
--container: 1440px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--font-body);
font-size: 16px;
color: var(--ink);
background: var(--bg);
line-height: 1.65;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, .font-heading {
font-family: var(--font-heading);
color: var(--navy-ink);
line-height: 1.2;
margin: 0 0 .5em;
}
h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 600; }
p { margin: 0 0 1em; color: var(--muted); }
a { color: var(--azure); text-decoration: none; }
a:hover { color: var(--violet); }
img { max-width: 100%; height: auto; display: block; }
.container {
max-width: var(--container);
margin: 0 auto;
padding: 0 24px;
}
/* Rayon resserré : la gélule faisait paraître les boutons gonflés.
Corps remonté à 16 px, comme tout le reste des textes lus. */
.btn {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 15px 26px;
border-radius: 11px;
font-weight: 700;
font-family: var(--font-heading);
font-size: 1rem;
border: 2px solid transparent;
cursor: pointer;
transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
background: linear-gradient(135deg, var(--navy), var(--violet));
color: #fff;
box-shadow: 0 3px 10px rgba(42, 37, 134, .16);
}
.btn-primary:hover { color: #fff; box-shadow: 0 8px 18px rgba(42, 37, 134, .24); }
.btn-outline {
background: #fff;
color: var(--navy);
border-color: var(--azure-line);
}
.btn-outline:hover { color: var(--violet); border-color: var(--violet-bright); }
.eyebrow {
display: inline-block;
font-family: var(--font-heading);
/* 0,75 rem valait 12 px : c'était le texte le plus petit du site, et il
portait souvent l'intitulé de la section. */
font-size: 1rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--violet);
background: var(--azure-soft);
padding: 6px 14px;
border-radius: 999px;
margin-bottom: 16px;
}
.section { padding: 88px 0; }
.section-alt { background: var(--soft); }
.section-head { max-width: 640px; margin: 0 auto 48px; text-align: center; }
.section-head p { font-size: 1.05rem; }
.skip-link {
position: absolute;
left: -9999px;
top: 0;
background: var(--navy);
color: #fff;
padding: 12px 20px;
z-index: 10000;
}
.skip-link:focus { left: 16px; top: 16px; }
/* Header */
.site-header {
position: sticky;
top: 0;
z-index: 500;
background: rgba(255,255,255,.92);
backdrop-filter: blur(8px);
border-bottom: 1px solid var(--line);
}
.site-header .container {
display: flex;
align-items: center;
justify-content: space-between;
height: 96px;
max-width: 1440px;
}
.site-logo { display: inline-flex; align-items: center; font-family: var(--font-heading); font-weight: 800; font-size: 1.3rem; color: var(--navy-ink); flex-shrink: 0; }
.site-logo img { height: 46px; width: auto; display: block; }
.main-nav { min-width: 0; }
.main-nav ul { list-style: none; display: flex; gap: 0; margin: 0; padding: 0; }
.main-nav > ul { align-items: center; }
.main-nav li { position: relative; }
.main-nav a {
display: block;
/*
* Le menu passe à 16 px : sous cette taille il redevenait le seul texte
* du site qu'on lit en plissant les yeux. Le padding est resserré à 6 px
* pour compenser — mesuré, il reste 40 px de marge à 1600 px.
*/
padding: 8px 6px;
color: var(--navy-ink);
font-weight: 600;
font-size: 1rem;
border-radius: 999px;
white-space: nowrap;
}
.main-nav a:hover { background: var(--azure-soft); color: var(--navy); }
.main-nav .menu-item-has-children > a::after {
content: '';
display: inline-block;
width: 6px; height: 6px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
margin-left: 6px;
}
.main-nav ul ul {
position: absolute;
top: 100%;
left: 0;
flex-direction: column;
min-width: 260px;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
box-shadow: 0 20px 40px rgba(23,20,63,.12);
padding: 8px;
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.main-nav li:hover > ul,
.main-nav li:focus-within > ul { opacity: 1; visibility: visible; transform: translateY(0); }
.main-nav ul ul a { padding: 10px 14px; border-radius: 8px; }
.main-nav ul ul a:hover { background: var(--soft); }
.header-cta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
/* Même seuil de lisibilité que partout ailleurs : 16 px minimum. */
.header-cta .btn { padding: 12px 18px; font-size: 1rem; white-space: nowrap; }
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--navy-ink); margin: 5px 0; }
/*
* Le menu est passé à 16 px : à cette taille la barre complète ne tient plus
* qu'au-dessus de 1400 px. Deux paliers mesurés plutôt qu'un texte illisible :
* de 1150 à 1400 px le second bouton s'efface (il reste dans le pied de page
* et dans les appels de chaque section), en dessous c'est le burger.
*/
@media (max-width: 1400px) {
.header-cta .btn-outline { display: none; }
}
@media (max-width: 1149px) {
.main-nav { display: none; }
.nav-toggle { display: block; }
}
/*
* En dessous de 700 px, le logo, le bouton et le burger débordaient de
* 139 px : le bouton s'efface au profit du burger. L'appel à la démonstration
* reste présent dans chaque section et dans le pied de page.
*/
@media (max-width: 700px) {
.header-cta .btn { display: none; }
}
/*
* Panneau du menu ouvert.
*
* Le burger posait bien la classe .is-open, mais rien n'y répondait en CSS :
* les entrées héritaient du display:flex du menu de bureau et se rangeaient
* en ligne, hors écran. Elles passent en colonne, et les sous-menus se
* déplient à la suite au lieu de rester en survol.
*/
@media (max-width: 1149px) {
.main-nav.is-open{
max-height: calc(100vh - 84px);
overflow-y: auto;
box-shadow: 0 24px 44px rgba(23,20,63,.14);
}
.main-nav.is-open ul{ flex-direction: column; align-items: stretch; }
.main-nav.is-open > ul > li > a{
padding: 13px 8px;
border-bottom: 1px solid var(--line);
border-radius: 0;
}
.main-nav.is-open > ul > li:last-child > a{ border-bottom: none; }
/* Le survol n'a pas de sens au doigt : le sous-menu est déplié d'office. */
.main-nav.is-open ul ul{
position: static;
opacity: 1;
visibility: visible;
transform: none;
border: none;
box-shadow: none;
min-width: 0;
padding: 4px 0 10px 16px;
border-left: 2px solid var(--azure-line);
margin: 4px 0 10px 8px;
}
.main-nav.is-open ul ul a{ padding: 9px 8px; color: var(--muted); }
/* Le chevron indiquait un déroulé au survol qui n'existe plus ici. */
.main-nav.is-open .menu-item-has-children > a::after{ display: none; }
}
/* Footer */
.site-footer { background: var(--navy-ink); color: #fff; padding: 80px 0 32px; font-size: 1rem; }
.site-footer a { color: #C7CBFB; font-size: 1rem; }
.site-footer a:hover { color: #fff; }
.footer-grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
gap: 32px;
padding-bottom: 48px;
border-bottom: 1px solid rgba(255,255,255,.12);
}
.footer-grid h4 {
color: #fff;
font-size: 1rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .05em;
margin-bottom: 20px;
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.footer-brand img { margin-bottom: 20px; }
.footer-brand p { color: #A9ADD9; max-width: 320px; font-size: 1rem; line-height: 1.6; }
.footer-brand address { color: #A9ADD9; font-style: normal; font-size: 1rem; line-height: 1.7; }
.footer-bottom {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
padding-top: 24px;
color: #9CA0D4;
font-size: 1rem;
}
.footer-bottom a { font-size: 1rem; }
.footer-bottom ul { list-style: none; display: flex; gap: 20px; margin: 0; padding: 0; }
@media (max-width: 900px) {
.footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
.footer-grid { grid-template-columns: 1fr; }
}
/* Cards */
.card {
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 36px;
}
/* Skip-to-content + a11y */
.screen-reader-text {
position: absolute !important;
width: 1px; height: 1px;
overflow: hidden;
clip: rect(1px,1px,1px,1px);
}
/* ------------------------------------------------------------------ */
/* Motion & polish pass */
/* ------------------------------------------------------------------ */
/* Header gains depth once the page scrolls, instead of a flat hairline always-on. */
.site-header { box-shadow: 0 1px 0 rgba(23,20,63,.04); transition: box-shadow .25s ease, background-color .25s ease; }
.site-header.is-scrolled { box-shadow: 0 12px 24px -12px rgba(23,20,63,.18); background: rgba(255,255,255,.98); }
/* Cards lift and pick up a brand-tinted shadow on hover — the one thing
that made the flat sections feel like a spec sheet instead of a product. */
.card {
transition: transform .25s cubic-bezier(.22,.9,.35,1), box-shadow .25s ease, border-color .25s ease;
}
a.card:hover, .card.is-interactive:hover {
transform: translateY(-6px);
border-color: transparent;
box-shadow: 0 24px 48px -16px rgba(42,37,134,.22);
}
/* Buttons: press feedback instead of a flat click, exit faster than enter. */
.btn { transition: transform .15s cubic-bezier(.22,.9,.35,1), box-shadow .2s ease; }
.btn:active { transform: translateY(0) scale(.97); transition-duration: .1s; }
/* Icon badges — used for benefit/value rows instead of bare text labels. */
.icon-badge {
width: 56px; height: 56px;
border-radius: 16px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.icon-badge svg { width: 26px; height: 26px; }
.final-cta__icone {
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
border-radius: 50%;
background: rgba(255, 255, 255, .14);
color: #fff;
margin: 0 auto 18px;
}
.final-cta__icone svg { width: 30px; height: 30px; }
.cadre-carte .icon-badge { margin-bottom: 14px; width: 46px; height: 46px; }
.section-composee__duo {
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: 56px;
align-items: center;
}
.section-composee__duo .section-composee__corps { max-width: none; }
.section-composee__duo--inverse .section-composee__visuel { order: -1; }
.section-composee__visuel img {
display: block;
width: 100%;
height: auto;
border-radius: 18px;
box-shadow: 0 30px 60px -30px rgba(23, 20, 63, .38);
}
@media (max-width: 900px) {
.section-composee__duo { grid-template-columns: 1fr; gap: 30px; }
.section-composee__duo .section-composee__visuel { order: -1; }
}
/* --- Gabarit article : corps + colonne latérale collante ------------- */
.article-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 330px;
gap: 64px;
align-items: start;
max-width: 1240px;
}
.article-aside {
position: sticky;
top: 96px;
display: grid;
gap: 22px;
}
.aside-carte {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 24px 26px;
box-shadow: 0 10px 26px rgba(20, 27, 77, .06);
}
.aside-carte__titre {
font-family: var(--font-heading);
font-weight: 700;
color: var(--navy);
font-size: 1.05rem;
margin: 0 0 14px;
padding-left: 12px;
border-left: 3px solid var(--green);
}
.aside-sommaire {
margin: 0;
padding: 0;
list-style: none;
counter-reset: sommaire;
}
.aside-sommaire li {
counter-increment: sommaire;
margin-bottom: 10px;
}
.aside-sommaire li:last-child { margin-bottom: 0; }
.aside-sommaire a {
display: flex;
gap: 10px;
align-items: baseline;
color: var(--muted);
text-decoration: none;
font-size: .98rem;
line-height: 1.45;
}
.aside-sommaire a::before {
content: counter(sommaire, decimal-leading-zero);
font-family: var(--font-heading);
font-weight: 700;
font-size: .85rem;
color: var(--green);
}
.aside-sommaire a:hover { color: var(--navy); }
.aside-carte--cta {
background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep, #12102e) 100%);
border: none;
color: #fff;
}
.aside-carte--cta .aside-carte__titre { color: #fff; }
.aside-carte--cta p { color: rgba(255, 255, 255, .82); font-size: .98rem; margin: 0 0 18px; }
.aside-carte--cta .btn { width: 100%; justify-content: center; }
.aside-article {
display: flex;
gap: 14px;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid var(--line);
text-decoration: none;
}
.aside-article:last-child { border-bottom: none; padding-bottom: 0; }
.aside-article img {
width: 62px;
height: 62px;
object-fit: cover;
border-radius: 10px;
flex-shrink: 0;
}
.aside-article span {
font-family: var(--font-heading);
font-weight: 600;
font-size: 1rem;
line-height: 1.4;
color: var(--navy);
}
.aside-article:hover span { color: var(--violet); }
.article-pied { margin-top: 52px; }
.article-partage {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
padding: 20px 0;
border-top: 1px solid var(--line);
}
.article-partage > span { font-weight: 700; color: var(--navy); }
.article-partage__lien {
display: inline-flex;
padding: 8px 18px;
border: 1px solid var(--line);
border-radius: 999px;
background: #fff;
color: var(--navy);
font: inherit;
font-weight: 600;
font-size: 1rem;
text-decoration: none;
cursor: pointer;
transition: border-color .2s ease, color .2s ease;
}
.article-partage__lien:hover { border-color: var(--green); color: var(--green); }
.article-equipe {
display: flex;
gap: 20px;
align-items: flex-start;
background: var(--soft);
border-radius: 16px;
padding: 26px 28px;
}
.article-equipe img {
width: 64px;
height: auto;
background: #fff;
border-radius: 12px;
padding: 8px;
flex-shrink: 0;
}
.article-equipe strong {
display: block;
font-family: var(--font-heading);
color: var(--navy);
margin-bottom: 6px;
}
.article-equipe p { margin: 0; color: var(--muted); font-size: .98rem; }
@media (max-width: 1080px) {
.article-layout { grid-template-columns: 1fr; gap: 40px; }
.article-aside { position: static; }
[data-sommaire-article] { display: none; }
}
.actu-recherche {
display: flex;
flex-wrap: wrap;
gap: 10px;
max-width: 440px;
margin: 24px auto 0;
}
.actu-recherche input[type="search"] { flex: 1 1 220px; min-width: 0; }
/* Rubriques du hub veille : 3 cartes en haut, 2 en bas centrées. */
.rubriques-veille {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 215px), 1fr));
gap: 24px;
}
@media (min-width: 1101px) {
.rubriques-veille { grid-template-columns: repeat(6, 1fr); }
.rubriques-veille > * { grid-column: span 2; }
.rubriques-veille > *:nth-child(4) { grid-column: 2 / span 2; }
}
/* ==================== Hero accueil (refonte maquette 20/08) ============ */
.hero-accueil {
position: relative;
display: flex;
align-items: center;
min-height: clamp(480px, 42vw, 640px);
background: var(--navy-ink);
color: #fff;
padding: 64px 0 128px;
overflow: hidden;
}
.hero-accueil__fond {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.hero-accueil__voile {
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(23, 20, 63, .95) 0%, rgba(23, 20, 63, .88) 34%, rgba(30, 26, 102, .62) 62%, rgba(30, 26, 102, .46) 100%),
linear-gradient(0deg, rgba(23, 20, 63, .30) 0%, rgba(23, 20, 63, .08) 32%);
}
.hero-accueil__g { position: relative; z-index: 1; }
.hero-accueil__g {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
gap: 40px;
}
.hero-accueil__texte { max-width: 500px; flex: 0 1 500px; }
.hero-accueil__scene { position: relative; flex: 0 1 620px; max-width: 620px; min-height: 430px; }
.hero-accueil__dash {
position: absolute;
left: -3%;
top: 48%;
transform: translateY(-50%);
width: 76%;
max-width: 475px;
box-shadow: 0 34px 70px -22px rgba(0, 0, 0, .6);
}
.hero-accueil__programme {
position: absolute;
right: -6px;
top: 10%;
width: 240px;
background: #fff;
border-radius: 14px;
padding: 16px 18px;
box-shadow: 0 22px 48px -16px rgba(0, 0, 0, .45);
display: flex;
flex-direction: column;
gap: 5px;
}
.hero-accueil__programme-label {
font-family: var(--font-heading);
font-weight: 700;
font-size: .97rem;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--muted);
}
.hero-accueil__programme strong {
font-family: var(--font-heading);
font-size: 1.12rem;
color: var(--navy-ink);
}
.hero-accueil__programme-date { font-size: .97rem; color: var(--muted); line-height: 1.45; }
.hero-accueil__programme-statut {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 7px;
padding-top: 9px;
border-top: 1px solid var(--line);
font-size: .97rem;
color: var(--muted);
}
.hero-accueil__programme-statut em {
font-style: normal;
display: inline-flex;
align-items: center;
gap: 7px;
padding: 3px 10px;
border-radius: 999px;
background: #E8FBF5;
color: var(--green);
font-weight: 700;
font-size: .97rem;
}
.hero-accueil__badge {
position: absolute;
left: 4%;
bottom: -2%;
white-space: nowrap;
}
.eyebrow--hero {
background: rgba(255, 255, 255, .12);
color: #B9F4E9;
}
.hero-accueil h1 {
color: #fff;
font-size: clamp(1.9rem, 2.75vw, 2.4rem);
line-height: 1.2;
margin: 18px 0 20px;
}
.hero-accueil__texte > p {
color: #C9CCE8;
font-size: 1.14rem;
line-height: 1.7;
max-width: 480px;
}
.hero-accueil__actions {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-top: 30px;
}
.hero-accueil__bandeau {
position: absolute;
left: 0;
right: 0;
bottom: 0;
background: rgba(23, 20, 63, .68);
border-top: 1px solid rgba(255, 255, 255, .14);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
z-index: 1;
}
.hero-accueil__bandeau-int {
display: flex;
align-items: center;
gap: 14px;
padding-top: 15px;
padding-bottom: 15px;
}
.hero-accueil__bandeau p { margin: 0; color: #DFE2F6; font-size: .98rem; }
.hero-accueil__bandeau strong { color: #fff; }
.hero-accueil__bandeau a {
margin-left: auto;
color: var(--green-bright);
font-family: var(--font-heading);
font-weight: 700;
font-size: .98rem;
text-decoration: none;
white-space: nowrap;
}
.hero-accueil__bandeau a:hover { color: #fff; }
.hero-accueil__pulse {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--green);
flex-shrink: 0;
animation: dirips-pulse 2.2s ease-out infinite;
}
@keyframes dirips-pulse {
0% { box-shadow: 0 0 0 0 rgba(63, 217, 188, .55); }
70% { box-shadow: 0 0 0 9px rgba(63, 217, 188, 0); }
100% { box-shadow: 0 0 0 0 rgba(63, 217, 188, 0); }
}
.section-stats-accueil {
padding-top: 0;
padding-bottom: 40px;
}
.section-stats-accueil .stat-bar {
margin-top: 44px;
}
@media (max-width: 1100px) {
.hero-accueil { padding: 56px 0 118px; min-height: 0; }
.hero-accueil__g { grid-template-columns: 1fr; gap: 40px; }
.hero-accueil__scene { min-height: 300px; max-width: 560px; }
.hero-accueil__badge { left: 0; }
.hero-accueil__voile {
background: linear-gradient(180deg, rgba(23, 20, 63, .93) 0%, rgba(23, 20, 63, .84) 55%, rgba(23, 20, 63, .60) 100%);
}
}
@media (max-width: 700px) {
.hero-accueil__scene { display: none; }
.hero-accueil__bandeau-int { flex-wrap: wrap; row-gap: 4px; }
.hero-accueil__bandeau a { margin-left: 22px; }
}
/* Cartes « pourquoi » : icône et titre sur la même ligne, points de liaison */
.carte-pourquoi__tete {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 14px;
}
.carte-pourquoi__tete .icon-badge { width: 46px; height: 46px; border-radius: 13px; }
.carte-pourquoi__tete h3 { margin: 0; font-size: 1.14rem; }
.pourquoi-connecteur {
display: flex;
justify-content: space-around;
align-items: center;
max-width: 760px;
margin: 34px auto 0;
position: relative;
}
.pourquoi-connecteur::before {
content: '';
position: absolute;
left: 6%;
right: 6%;
top: 50%;
height: 1px;
background: var(--line);
}
.pourquoi-connecteur span {
width: 12px;
height: 12px;
border-radius: 50%;
background: #fff;
border: 2px solid var(--line);
position: relative;
}
@media (max-width: 700px) { .pourquoi-connecteur { display: none; } }
/* Cartes logiciels : capture posée sur un panneau doux */
.carte-logiciel__media--panneau {
background: var(--soft);
border-radius: 16px;
padding: 22px 22px 0;
overflow: hidden;
}
.carte-logiciel__media--panneau img {
display: block;
width: 100%;
height: auto;
border-radius: 10px 10px 0 0;
box-shadow: 0 14px 30px rgba(20, 27, 77, .14);
}
/* Bandeau réglementaire : navy profond + illustration en vignette */
.bandeau-reglementaire {
background:
radial-gradient(640px 320px at 92% 120%, rgba(124, 77, 255, .30), transparent 60%),
linear-gradient(140deg, var(--navy-deep, #12102e), var(--navy));
padding: 48px;
border-radius: 24px;
}
.bandeau-reglementaire__illus {
flex-shrink: 0;
width: 132px;
border-radius: 18px;
overflow: hidden;
background: #fff;
}
.bandeau-reglementaire__illus img { display: block; width: 100%; height: auto; }
/* Checks reliés par un fil vertical */
.check-col { position: relative; }
.check-col::before {
content: '';
position: absolute;
left: 15px;
top: 18px;
bottom: 26px;
width: 2px;
background: linear-gradient(var(--green-clair, #BFF0E4), rgba(191, 240, 228, 0));
}
.check-col .check-row { position: relative; }
/* Pastille de catégorie posée sur l'image des cartes actus */
.actu-card__media { position: relative; }
.actu-card__chip {
position: absolute;
left: 14px;
bottom: 14px;
margin: 0;
background: rgba(255, 255, 255, .94);
color: var(--violet);
}
/* Accents de la home alignés sur la maquette : primaire bleu, CTA navy. */
.home .hero-accueil .btn-primary {
background: var(--azure);
box-shadow: 0 12px 26px rgba(74, 84, 214, .38);
}
.home .hero-accueil .btn-primary:hover { background: #3B44BE; }
.home .grille-duo .btn-primary {
background: var(--navy);
box-shadow: 0 12px 26px rgba(42, 37, 134, .32);
}
.home .grille-duo .btn-primary:hover { background: var(--navy-deep); }
/* Bandeau de confiance : rangée statique comme la maquette. */
.home .bandeau-defilant__piste {
animation: none;
flex-wrap: wrap;
justify-content: center;
row-gap: 12px;
}
.home .bandeau-defilant__item[aria-hidden="true"] { display: none; }
.home .bandeau-defilant { -webkit-mask-image: none; mask-image: none; }
.home .bandeau-defilant__piste { width: auto; min-width: 0; }
/* Flèche décorative du CTA final. */
.final-cta--fleche { position: relative; overflow: hidden; }
.final-cta__doodle {
position: absolute;
right: 7%;
top: 50%;
transform: translateY(-58%) rotate(6deg);
width: 110px;
height: auto;
opacity: .85;
}
@media (max-width: 900px) { .final-cta__doodle { display: none; } }
.souligne-vert {
color: var(--navy);
background: linear-gradient(transparent 62%, rgba(17, 207, 193, .35) 62%);
padding: 0 2px;
}
.prod-ressources {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
}
.prod-ressources__lien {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 11px 20px;
border: 1px solid var(--line);
border-radius: 999px;
background: #fff;
color: var(--navy);
font-weight: 600;
font-size: 1rem;
text-decoration: none;
transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.prod-ressources__lien:hover {
border-color: var(--green);
box-shadow: 0 8px 20px rgba(20, 27, 77, .10);
transform: translateY(-2px);
}
/* Scroll-reveal: fade + rise, staggered per grid item via --i.
Respects prefers-reduced-motion (see override at the bottom). */
.reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity .6s cubic-bezier(.22,.9,.35,1), transform .6s cubic-bezier(.22,.9,.35,1);
transition-delay: calc(var(--i, 0) * 70ms);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
/* Hero mesh gradient — subtle, brand-toned, replaces flat white space
without turning into decoration-for-its-own-sake. */
.mesh-bg { position: relative; isolation: isolate; }
.mesh-bg::before {
content: '';
position: absolute;
inset: -10%;
z-index: -1;
background:
radial-gradient(circle at 15% 20%, rgba(124,77,255,.16), transparent 45%),
radial-gradient(circle at 85% 15%, rgba(100,210,185,.16), transparent 40%),
radial-gradient(circle at 50% 90%, rgba(74,84,214,.12), transparent 50%);
filter: blur(20px);
}
/* Testimonial cards get a quote glyph instead of a bare guillemet in body text. */
.quote-mark { color: var(--violet-bright); font-size: 2.5rem; font-family: Georgia, serif; line-height: 1; display: block; margin-bottom: 4px; }
/* Browser-frame mockup — wraps a product UI screenshot in a lightweight
chrome bar so it reads as "our software", not a bare floating image. */
.browser-frame {
background: #fff;
border-radius: var(--radius);
overflow: hidden;
box-shadow: 0 32px 64px -20px rgba(23,20,63,.28);
border: 1px solid var(--line);
}
.browser-frame__bar {
display: flex;
align-items: center;
gap: 6px;
padding: 12px 16px;
background: var(--soft);
border-bottom: 1px solid var(--line);
}
.browser-frame__bar span {
width: 9px; height: 9px;
border-radius: 50%;
background: var(--line);
}
.browser-frame img { width: 100%; height: auto; display: block; }
.browser-frame--sm .browser-frame__bar { padding: 8px 12px; }
.browser-frame--sm .browser-frame__bar span { width: 7px; height: 7px; }
/* Floating badge pinned to the corner of the hero mockup. */
.floating-badge {
position: absolute;
display: flex;
align-items: center;
gap: 10px;
background: #fff;
border-radius: 999px;
padding: 10px 18px 10px 10px;
box-shadow: 0 16px 32px -12px rgba(23,20,63,.25);
font-family: var(--font-heading);
font-weight: 700;
font-size: 1rem;
color: var(--navy-ink);
}
.floating-badge__icon {
width: 32px; height: 32px;
border-radius: 50%;
background: linear-gradient(135deg, var(--navy), var(--violet));
display: flex; align-items: center; justify-content: center;
color: #fff;
flex-shrink: 0;
}
/* Benefit checklist rows (used by the Accompagnement section). */
.check-row { display: flex; align-items: flex-start; gap: 14px; }
.check-row + .check-row { margin-top: 20px; }
.check-row__icon {
width: 28px; height: 28px;
border-radius: 50%;
background: #E8FBF5;
color: var(--green);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
margin-top: 2px;
}
.check-row__icon svg { width: 16px; height: 16px; }
.check-row h4 { margin: 0 0 4px; font-size: 1.05rem; }
.check-row p { margin: 0; }
@media (max-width: 900px) {
.floating-badge { display: none; }
}
/* Second floating window on the hero mockup — a small "live" indicator
card, cropped so it reads as a real product notification. */
.floating-window {
position: absolute;
width: 220px;
background: #fff;
border-radius: 14px;
box-shadow: 0 20px 40px -12px rgba(23,20,63,.28);
padding: 16px;
border: 1px solid var(--line);
}
.floating-window__label { display: flex; align-items: center; gap: 8px; font-family: var(--font-heading); font-weight: 700; font-size: 1rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px; }
.floating-window__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px #E8FBF5; }
.floating-window strong { display: block; font-family: var(--font-heading); font-size: 1.1rem; color: var(--navy-ink); }
.floating-window span { color: var(--muted); font-size: 1rem; }
@media (max-width: 900px) {
.floating-window { display: none; }
}
/* Stat bar — a single-row proof strip, used just under the hero. */
.stat-bar {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
gap: 32px;
background: #fff;
border: 1px solid var(--line);
border-radius: 20px;
padding: 36px 24px;
box-shadow: 0 24px 48px -32px rgba(23,20,63,.2);
}
.stat-bar__item {
display: grid;
grid-template-columns: auto auto;
align-items: center;
justify-content: center;
column-gap: 16px;
text-align: left;
}
@media (min-width: 781px) {
.stat-bar__item strong { white-space: nowrap; }
}
.stat-bar__item .stat-bar__icone { grid-row: 1 / 3; }
.stat-bar__item strong { display: block; font-family: var(--font-heading); font-size: clamp(1.6rem, 2.4vw, 2.1rem); color: var(--navy); font-weight: 800; }
/* Toujours sur sa propre ligne : sans ça, la légende se met à côté du
nombre quand le texte est court (96 %, Qualiopi) et en dessous quand il
est plus long (Depuis 1994), ce qui donnait un rendu incohérent. */
.stat-bar__item span { display: block; color: var(--muted); font-size: 1rem; }
@media (max-width: 780px) {
.stat-bar { grid-template-columns: 1fr 1fr; }
.stat-bar__item {
grid-template-columns: 1fr;
justify-items: center;
text-align: center;
}
.stat-bar__item .stat-bar__icone { grid-row: auto; margin-bottom: 8px; }
}
/* Featured testimonial layout — one large quote + a stack of secondary ones,
replacing the "three equal cards" pattern that read as filler. */
.testimonial-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: stretch; }
.testimonial-featured {
background: linear-gradient(155deg, var(--navy-ink), var(--navy));
color: #fff;
border-radius: 24px;
padding: 48px;
display: flex;
flex-direction: column;
justify-content: center;
}
.testimonial-featured .quote-mark { color: var(--violet-bright); }
.testimonial-featured p { color: #EDEEFB; font-size: 1.3rem; line-height: 1.5; font-family: var(--font-heading); font-weight: 600; }
.testimonial-featured strong { color: #fff; font-size: 1.05rem; }
.testimonial-featured .testimonial-role { color: #B7BBEE; font-size: 1rem; }
.testimonial-secondary-stack { display: flex; flex-direction: column; gap: 24px; }
.testimonial-secondary { flex: 1; }
.testimonial-secondary p { font-size: 1rem; }
@media (max-width: 900px) {
.testimonial-grid { grid-template-columns: 1fr; }
}
/* Editorial veille cards — used while the 115-article migration is pending,
so the section never falls back to raw WordPress placeholder content. */
.actu-card { display: block; text-decoration: none; border-radius: var(--radius); overflow: hidden; background: #fff; border: 1px solid var(--line); }
/* Les visuels sont des captures d'écran du logiciel : cadrées en bande
fine et centrées, elles devenaient illisibles. On garde le haut-gauche,
là où se trouvent le titre de l'écran et les indicateurs. */
.actu-card img { width: 100%; height: 196px; object-fit: cover; object-position: left top; background: var(--azure-soft); }
.actu-card__body { padding: 28px; }
.actu-card__body p { font-size: 1rem; }
/* Final CTA band — the commercial close before the footer. */
.final-cta {
background: linear-gradient(135deg, var(--navy), var(--violet));
border-radius: 24px;
padding: 64px 48px;
text-align: center;
color: #fff;
}
.final-cta h2 { color: #fff; }
.final-cta p { color: #E4E5FA; font-size: 1.1rem; max-width: 560px; margin: 0 auto 32px; }
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; transform: none; transition: none; }
a.card:hover, .card.is-interactive:hover { transform: none; }
.btn:hover, .btn:active { transform: none; }
html { scroll-behavior: auto; }
}
/* ------------------------------------------------------------------ */
/* Blog : article, archives, filtres */
/* ------------------------------------------------------------------ */
.fil-ariane { font-size: 1rem; color: var(--muted); margin-bottom: 16px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fil-ariane a { color: var(--muted); }
.fil-ariane a:hover { color: var(--violet); }
.article-meta { color: var(--muted); font-size: 1rem; }
/* Corps d'article : la lisibilité prime, mesure de ligne resserrée. */
.article-corps { font-size: 1.06rem; line-height: 1.75; }
.article-corps h2 { margin-top: 2em; font-size: clamp(1.4rem, 2.4vw, 1.75rem); }
.article-corps h3 { margin-top: 1.6em; }
.article-corps p { margin-bottom: 1.25em; }
.article-corps ul, .article-corps ol { margin: 0 0 1.4em; padding-left: 1.3em; color: var(--muted); }
.article-corps li { margin-bottom: .55em; }
.article-corps a { text-decoration: underline; text-underline-offset: 2px; }
.article-corps blockquote {
border-left: 3px solid var(--violet-bright);
padding: 4px 0 4px 24px;
margin: 2em 0;
font-style: italic;
color: var(--navy-ink);
}
.article-corps img { border-radius: var(--radius-sm); margin: 1.5em 0; }
.article-corps table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: 1rem; }
.article-corps th, .article-corps td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; }
.article-corps th { background: var(--soft); font-family: var(--font-heading); color: var(--navy-ink); }
/* Filtres par thématique */
.filtres-categories { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.filtre-pill {
display: inline-block;
padding: 8px 18px;
border-radius: 999px;
border: 1px solid var(--azure-line);
background: #fff;
color: var(--navy-ink);
font-size: 1rem;
font-weight: 600;
transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.filtre-pill:hover { border-color: var(--violet-bright); color: var(--violet); }
.filtre-pill.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }
/* Pagination */
.pagination .nav-links, .navigation .nav-links { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.pagination .page-numbers, .navigation .page-numbers {
display: inline-flex; align-items: center; justify-content: center;
min-width: 42px; height: 42px; padding: 0 12px;
border: 1px solid var(--azure-line); border-radius: 10px;
color: var(--navy-ink); font-weight: 600;
}
.pagination .page-numbers.current, .navigation .page-numbers.current { background: var(--navy); border-color: var(--navy); color: #fff; }
.pagination .page-numbers:hover, .navigation .page-numbers:hover { border-color: var(--violet-bright); color: var(--violet); }
@media (max-width: 900px) {
.article-corps { font-size: 1rem; }
}
/* ================================================================== */
/* Mouvement */
/* */
/* Registre visé : précision et fiabilité. Les courses sont courtes, */
/* la décélération est nette, il n'y a aucun rebond. Seuls transform */
/* et opacity sont animés, donc aucun décalage de mise en page. */
/* Tout est neutralisé plus bas si le visiteur réduit les animations. */
/* ================================================================== */
/* --- En-tête : se condense quand on descend --------------------------- */
.site-header {
transition: box-shadow .3s ease, background-color .3s ease, padding .3s cubic-bezier(.22,.9,.35,1);
}
.site-header.is-condensed {
box-shadow: 0 8px 28px -18px rgba(23,20,63,.35);
background: rgba(255,255,255,.92);
backdrop-filter: saturate(160%) blur(10px);
-webkit-backdrop-filter: saturate(160%) blur(10px);
}
.site-header .site-branding img,
.site-header .custom-logo {
transition: transform .3s cubic-bezier(.22,.9,.35,1);
transform-origin: left center;
}
.site-header.is-condensed .site-branding img,
.site-header.is-condensed .custom-logo { transform: scale(.88); }
/* --- Filet sous le sur-titre : se trace à la révélation ---------------- */
.section-head .eyebrow { position: relative; }
.section-head .eyebrow::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: -8px;
height: 2px;
background: linear-gradient(90deg, var(--violet), transparent);
transform: scaleX(0);
transform-origin: left center;
transition: transform .55s cubic-bezier(.22,.9,.35,1) .2s;
}
.section-head.is-visible .eyebrow::after { transform: scaleX(1); }
/* --- Chiffres clés : la largeur est figée avant le décompte ------------ */
.stat-bar__item strong {
font-variant-numeric: tabular-nums;
font-feature-settings: 'tnum' 1;
display: inline-block;
}
/* --- Fond du hero : dérive très lente, loin du texte ------------------- */
.mesh-bg::before {
animation: derive-mesh 28s ease-in-out infinite alternate;
will-change: transform;
}
@keyframes derive-mesh {
from { transform: translate3d(0, 0, 0) scale(1); }
to { transform: translate3d(-3%, 2%, 0) scale(1.06); }
}
/* --- Éléments flottants du hero : respiration à peine perceptible ------ */
.floating-badge, .floating-window {
animation: flottement 7s ease-in-out infinite;
will-change: transform;
}
.floating-window { animation-duration: 8.5s; animation-delay: -2s; }
@keyframes flottement {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
/* --- La maquette entre avec un léger recul ---------------------------- */
.browser-frame { transition: transform .7s cubic-bezier(.22,.9,.35,1), box-shadow .3s ease; }
.reveal .browser-frame { transform: scale(.97); }
.reveal.is-visible .browser-frame { transform: scale(1); }
/* --- Cartes : un langage de survol cohérent ---------------------------- */
a.card, .actu-card {
transition: transform .25s cubic-bezier(.22,.9,.35,1),
box-shadow .25s ease,
border-color .25s ease;
}
a.card:hover, .actu-card:hover { transform: translateY(-4px); }
a.card img, .actu-card img { transition: transform .5s cubic-bezier(.22,.9,.35,1); }
a.card:hover img, .actu-card:hover img { transform: scale(1.035); }
/* La flèche avance : elle indique que le clic mène ailleurs. */
a.card .font-heading, .actu-card .font-heading { display: inline-block; }
a.card .font-heading, .actu-card__body .font-heading {
transition: transform .25s cubic-bezier(.22,.9,.35,1);
}
a.card:hover .font-heading, .actu-card:hover .font-heading { transform: translateX(5px); }
/* --- Puces de la liste d'accompagnement -------------------------------- */
.check-row__icon { transition: transform .4s cubic-bezier(.22,.9,.35,1); }
.reveal .check-row__icon { transform: scale(.6); opacity: .4; }
.reveal.is-visible .check-row__icon { transform: scale(1); opacity: 1; }
.check-row:nth-child(2) .check-row__icon { transition-delay: .1s; }
.check-row:nth-child(3) .check-row__icon { transition-delay: .2s; }
/* --- Appel à l'action final : dégradé qui respire --------------------- */
.final-cta {
background-size: 200% 200%;
animation: derive-degrade 18s ease-in-out infinite alternate;
}
@keyframes derive-degrade {
from { background-position: 0% 50%; }
to { background-position: 100% 50%; }
}
/* --- Barre de progression de lecture (articles) ------------------------ */
.barre-lecture {
position: fixed;
top: 0; left: 0;
height: 3px;
width: 100%;
z-index: 100;
background: linear-gradient(90deg, var(--navy), var(--violet));
transform: scaleX(0);
transform-origin: left center;
will-change: transform;
pointer-events: none;
}
/* ================================================================== */
/* Bandeau des partenaires */
/* */
/* Élément de preuve, pas de décoration : ce sont de vrais clients. */
/* La liste est doublée dans le HTML pour que la boucle soit continue, */
/* le second exemplaire est masqué aux lecteurs d'écran. */
/* ================================================================== */
.bandeau-partenaires { padding: 40px 0 8px; }
.bandeau-partenaires__titre {
text-align: center;
font-size: 1rem;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--muted);
font-weight: 700;
margin-bottom: 24px;
}
.bandeau-defilant {
position: relative;
overflow: hidden;
/* Les bords s'estompent : la boucle n'a pas de couture visible. */
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.bandeau-defilant__piste {
display: flex;
align-items: center;
gap: 56px;
width: max-content;
animation: defiler var(--duree, 40s) linear infinite;
will-change: transform;
}
.bandeau-defilant:hover .bandeau-defilant__piste,
.bandeau-defilant.est-en-pause .bandeau-defilant__piste { animation-play-state: paused; }
@keyframes defiler {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.bandeau-defilant__item {
flex: 0 0 auto;
font-family: var(--font-heading, inherit);
font-weight: 700;
font-size: 1.02rem;
color: var(--navy);
opacity: .55;
white-space: nowrap;
text-decoration: none;
transition: opacity .25s ease, color .25s ease;
}
.bandeau-defilant__item:hover,
.bandeau-defilant__item:focus-visible { opacity: 1; color: var(--violet); }
.bandeau-defilant__item img {
height: 34px; width: auto;
filter: grayscale(1);
opacity: .6;
transition: filter .25s ease, opacity .25s ease;
}
.bandeau-defilant__item:hover img { filter: none; opacity: 1; }
/* Liste figée quand les animations sont réduites : on la centre et on
coupe le débordement plutôt que de laisser une bande qui déborde. */
.bandeau-defilant.est-fige .bandeau-defilant__piste {
animation: none;
flex-wrap: wrap;
justify-content: center;
width: 100%;
gap: 24px 40px;
}
.bandeau-defilant.est-fige .bandeau-defilant__piste [aria-hidden="true"] { display: none; }
/* ================================================================== */
/* Questions fréquentes (rendues par le plugin SEO) */
/* ================================================================== */
.wy-faq { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--line); }
.wy-faq > h2 { margin-bottom: 20px; }
.wy-faq-item {
border: 1px solid var(--line);
border-radius: 14px;
margin-bottom: 12px;
background: #fff;
transition: border-color .25s ease, box-shadow .25s ease;
}
.wy-faq-item[open] { border-color: var(--violet); box-shadow: 0 10px 30px -22px rgba(42,37,134,.5); }
.wy-faq-item > summary {
cursor: pointer;
list-style: none;
padding: 18px 52px 18px 20px;
font-weight: 700;
color: var(--navy);
position: relative;
}
.wy-faq-item > summary::-webkit-details-marker { display: none; }
.wy-faq-item > summary::after {
content: '';
position: absolute;
right: 22px; top: 50%;
width: 9px; height: 9px;
border-right: 2px solid var(--violet);
border-bottom: 2px solid var(--violet);
transform: translateY(-70%) rotate(45deg);
transition: transform .25s cubic-bezier(.22,.9,.35,1);
}
.wy-faq-item[open] > summary::after { transform: translateY(-30%) rotate(-135deg); }
.wy-faq-reponse { padding: 0 20px 18px; color: var(--ink); }
.wy-faq-reponse p { margin: 0; }
/* ================================================================== */
/* Arrêt complet si le visiteur a demandé à réduire les animations */
/* ================================================================== */
@media (prefers-reduced-motion: reduce) {
.mesh-bg::before,
.floating-badge, .floating-window,
.final-cta,
.bandeau-defilant__piste { animation: none !important; }
.section-head .eyebrow::after { transform: scaleX(1); transition: none; }
.reveal .browser-frame,
.reveal.is-visible .browser-frame { transform: none; transition: none; }
.reveal .check-row__icon { transform: none; opacity: 1; }
a.card:hover img, .actu-card:hover img { transform: none; }
a.card:hover .font-heading, .actu-card:hover .font-heading { transform: none; }
.site-header, .site-header.is-condensed .site-branding img { transition: none; transform: none; }
.barre-lecture { display: none; }
}
/* ================================================================== */
/* Grilles de la page d'accueil */
/* */
/* Elles étaient définies en style en ligne, donc impossibles à */
/* adapter : la home restait sur deux colonnes jusque sur téléphone. */
/* ================================================================== */
.grille-hero { display: grid; grid-template-columns: .95fr 1.15fr; gap: 56px; align-items: center; }
.grille-duo { display: grid; grid-template-columns: .85fr 1.15fr; gap: 56px; align-items: center; }
.grille-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.grille-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.grille-expert { display: grid; grid-template-columns: auto 1.2fr auto; gap: 32px; align-items: center; text-align: left; }
@media (max-width: 1100px) {
.grille-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
.grille-hero, .grille-duo, .grille-2 { grid-template-columns: 1fr; gap: 40px; }
/* Sur une seule colonne, la maquette passe sous le texte. */
.grille-duo > *:first-child { order: 2; }
.grille-expert { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: 20px; }
.grille-expert .btn { width: 100%; text-align: center; }
}
@media (max-width: 640px) {
.grille-3 { grid-template-columns: 1fr; gap: 24px; }
}
/* La maquette du hero débordait à droite sur les écrans intermédiaires. */
@media (max-width: 1100px) {
.grille-hero > *:last-child { margin-right: 0 !important; }
}
/* ------------------------------------------------------------------ */
/* Débordements horizontaux */
/* */
/* Le fond dégradé du hero dépassait de 144 px à droite et provoquait */
/* un défilement horizontal sur toute la page. On le laisse déborder */
/* verticalement, jamais latéralement. */
/* ------------------------------------------------------------------ */
.mesh-bg::before { inset: -10% 0; }
.mesh-bg { overflow-x: clip; }
/* Filet de sécurité : aucune page ne défile latéralement, tout en
laissant fonctionner les en-têtes collantes (contrairement à hidden). */
html { overflow-x: clip; }
/* En-tête sur petit écran : le bouton d'appel passe à la ligne plutôt
que de pousser la barre au-delà de l'écran. */
@media (max-width: 480px) {
.header-cta .btn { font-size: .98rem; padding: 11px 15px; }
.site-header .container { gap: 8px; }
}
/* ================================================================== */
/* Pages intérieures */
/* */
/* Une page intérieure n'est pas un article : elle s'ouvre sur un */
/* bandeau affirmé, alterne les fonds, et se termine par une action. */
/* ================================================================== */
/* --- Bandeau d'ouverture --------------------------------------------- */
/*
* Bandeau d'ouverture des pages courantes.
*
* Onze gabarits passent par cette classe : la basculer de l'aplat sombre
* vers la déclinaison claire du système produit met tout le site au même
* registre que la home et les fiches logiciel, sans toucher aux gabarits.
*/
.hero-page {
position: relative;
isolation: isolate;
overflow-x: clip;
background: linear-gradient(150deg, #F7FAFE 0%, #EEF3FC 52%, #E7EFF9 100%);
color: var(--ink);
padding: 44px 0 76px;
}
.hero-page__fond {
position: absolute;
inset: 0;
z-index: -1;
}
/* Voile diagonal côté visuel, comme sur les fiches produit. */
.hero-page__fond::after {
content: '';
position: absolute;
inset: 0 0 0 auto;
width: 56%;
background: linear-gradient(200deg, rgba(100,210,185,.15), rgba(74,84,214,.09));
clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
}
.hero-page--sobre .hero-page__fond::after { display: none; }
.hero-page__grille {
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: 56px;
align-items: center;
}
.hero-page--sobre .hero-page__grille { grid-template-columns: 1fr; max-width: 900px; margin-left: auto; margin-right: auto; }
.dirips-2026 .hero-page--sobre .hero-page__texte { text-align: center; margin: 0 auto; }
.dirips-2026 .hero-page--sobre .fil-ariane { justify-content: center; }
.dirips-2026 .hero-page--sobre .hero-page__chapo { margin-left: auto; margin-right: auto; }
.dirips-2026 .hero-page--sobre .hero-page__actions { justify-content: center; }
.dirips-2026 .hero-page--sobre form[role="search"] { margin-left: auto; margin-right: auto; }
.hero-page h1 { color: var(--navy-ink); margin: 14px 0 18px; font-size: clamp(2.1rem, 3.4vw, 3rem); line-height: 1.12; }
/* « Échange réglementaire Dir IPS » ne tenait pas sur une ligne dans la
colonne de texte du hero à deux colonnes (id de page 16, la plus longue
des accroches). Légèrement réduit, mesuré pour tenir sur une ligne. */
.page-id-16 .hero-page h1 { font-size: clamp(2rem, 2.9vw, 2.55rem); }
.hero-page__chapo { color: var(--muted); font-size: 1.14rem; line-height: 1.72; max-width: 56ch; margin: 0; }
/* L'œillet passe au vert de marque, sans pastille de fond. */
.hero-page .eyebrow,
.eyebrow--clair {
background: transparent;
color: var(--green);
padding: 0;
letter-spacing: .13em;
font-size: 1rem;
}
.fil-ariane--clair { margin-bottom: 6px; }
.fil-ariane--clair, .fil-ariane--clair span { color: var(--muted); }
.fil-ariane--clair a { color: var(--muted); text-decoration: none; }
.fil-ariane--clair a:hover { color: var(--navy); text-decoration: underline; }
.hero-page__actions { display: flex; gap: 13px; flex-wrap: wrap; margin-top: 28px; }
/* Dans ce bandeau clair, l'action principale porte le vert de marque. */
.hero-page .btn-clair {
background: var(--green);
color: #fff;
box-shadow: 0 3px 10px rgba(14,158,130,.20);
}
.hero-page .btn-clair:hover { background: var(--green); color: #fff; box-shadow: 0 10px 22px rgba(14,158,130,.30); }
.hero-page .btn-outline--clair {
background: #fff;
color: var(--navy);
border-color: var(--azure-line);
}
.hero-page .btn-outline--clair:hover { background: #fff; color: var(--violet); border-color: var(--violet-bright); }
/*
* Boutons sur fond sombre — le bandeau d'appel final (.final-cta) et le
* rendu de repli des fiches logiciel les utilisent. Ces règles globales
* avaient disparu avec l'ancien hero sombre : le bouton principal du
* bandeau s'affichait en texte nu sur le violet.
*/
.btn-clair { background: #fff; color: var(--navy); }
.btn-clair:hover { background: #F2F3FF; color: var(--navy); }
.btn-outline--clair { background: transparent; color: #fff; border-color: rgba(255,255,255,.42); }
.btn-outline--clair:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }
/* Repères chiffrés dans le bandeau. */
.hero-page__reperes {
list-style: none;
padding: 0;
margin: 34px 0 0;
display: flex;
flex-wrap: wrap;
gap: 14px 40px;
}
.hero-page__reperes li { display: flex; flex-direction: column; }
.hero-page__reperes strong {
font-family: var(--font-heading);
font-size: 1.9rem;
line-height: 1.1;
color: var(--navy-ink);
font-variant-numeric: tabular-nums;
}
.hero-page__reperes span { color: var(--muted); font-size: 1rem; }
/* Visuel : un calque décalé donne de la profondeur sans effet gratuit. */
.hero-page__visuel { position: relative; }
.hero-page__visuel img {
position: relative;
width: 100%;
height: 380px;
object-fit: cover;
border-radius: 20px;
box-shadow: 0 38px 72px -34px rgba(23,20,63,.45);
border: 1px solid rgba(42,37,134,.10);
}
.hero-page__calque {
position: absolute;
inset: 18px -18px -18px 18px;
border-radius: 20px;
border: 1px solid rgba(14,158,130,.35);
background: linear-gradient(135deg, rgba(14,158,130,.14), transparent 60%);
}
@media (max-width: 900px) {
.hero-page { padding: 28px 0 48px; }
.hero-page__grille { grid-template-columns: 1fr; gap: 32px; }
.hero-page__visuel img { height: 240px; }
.hero-page__calque { inset: 12px -12px -12px 12px; }
/* Les boutons gardent leur largeur naturelle : étirés sur toute la
colonne ils deviennent des pavés et perdent leur hiérarchie. */
.hero-page__actions { gap: 10px; margin-top: 22px; }
.hero-page__actions .btn { flex: 0 1 auto; }
}
/* --- Bande de chiffres ------------------------------------------------ */
.bande-chiffres { padding-top: 56px; padding-bottom: 56px; }
.bande-chiffres__intro {
text-align: center;
max-width: 640px;
margin: 0 auto 32px;
font-size: 1.05rem;
color: var(--navy-ink);
font-weight: 600;
}
.bande-chiffres__grille {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 24px;
background: #fff;
border: 1px solid var(--line);
border-radius: 22px;
padding: 36px 24px;
box-shadow: 0 24px 50px -34px rgba(42,37,134,.35);
}
.bande-chiffres__item { text-align: center; position: relative; }
.bande-chiffres__item + .bande-chiffres__item::before {
content: '';
position: absolute;
left: -12px; top: 12%; bottom: 12%;
width: 1px;
background: var(--line);
}
.bande-chiffres__item strong {
display: block;
font-family: var(--font-heading);
font-size: 2.5rem;
line-height: 1;
color: var(--navy);
font-variant-numeric: tabular-nums;
margin-bottom: 8px;
}
.bande-chiffres__item span { color: var(--muted); font-size: 1rem; }
@media (max-width: 640px) {
.bande-chiffres__item + .bande-chiffres__item::before { display: none; }
}
/* --- Cartes piliers --------------------------------------------------- */
.carte-pilier h3 { margin: 20px 0 10px; color: var(--navy); }
.carte-pilier p { margin: 0; }
/* --- Frise des étapes ------------------------------------------------- */
.frise {
list-style: none;
margin: 0;
padding: 0;
display: grid;
/* Nombre de colonnes fixé pour éviter une dernière ligne orpheline. */
grid-template-columns: repeat(6, 1fr);
gap: 28px 24px;
position: relative;
}
/* Le trait de liaison : il dit que ce sont des étapes, pas des options.
Il s'arrête au dernier jalon plutôt que de filer dans le vide. */
.frise::before {
content: '';
position: absolute;
top: 22px;
left: 23px;
right: calc((100% - 23px) / 6 + 23px);
height: 2px;
background: linear-gradient(90deg, var(--violet), rgba(124,77,255,.25));
}
@media (max-width: 1200px) {
.frise { grid-template-columns: repeat(3, 1fr); }
.frise::before { right: calc((100% - 23px) / 3 + 23px); }
}
.frise__etape { position: relative; padding-top: 62px; }
.frise__numero {
position: absolute;
top: 0; left: 0;
width: 50px; height: 50px;
border-radius: 50%;
background: #fff;
border: 2px solid var(--violet);
color: var(--violet);
font-family: var(--font-heading);
font-weight: 800;
font-size: 1rem;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 0 0 6px var(--azure-soft, #F1F0FE);
}
.frise__etape h3 { font-size: 1.05rem; margin: 0 0 6px; color: var(--navy); }
.frise__etape p { margin: 0; font-size: 1rem; }
@media (max-width: 780px) {
.frise { grid-template-columns: 1fr; gap: 20px; }
.frise::before { display: none; }
.frise__etape { padding-top: 0; padding-left: 62px; min-height: 46px; }
}
/* --- Bloc texte et visuel --------------------------------------------- */
.grille-duo--inverse > *:first-child { order: 2; }
.bloc-media__visuel img {
width: 100%;
height: 100%;
max-height: 440px;
object-fit: cover;
border-radius: 20px;
box-shadow: 0 28px 56px -32px rgba(42,37,134,.45);
}
.liste-points { margin-top: 28px; }
@media (max-width: 900px) {
.grille-duo--inverse > *:first-child { order: 0; }
.bloc-media__visuel img { max-height: 280px; }
}
/* --- Appel à l'action -------------------------------------------------- */
.final-cta__actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
/* --- Cartes de renvoi -------------------------------------------------- */
.carte-lien { display: flex; flex-direction: column; align-items: flex-start; text-decoration: none; }
.carte-lien .carte-lien__fleche { margin-top: auto; }
.carte-lien h3 { color: var(--navy); margin: 0 0 10px; font-size: 1.15rem; }
.carte-lien p { font-size: .98rem; margin: 0 0 14px; }
.carte-lien__fleche { font-weight: 700; color: var(--violet); }
/* --- Corps de texte des pages ------------------------------------------ */
/* Une colonne de texte reste lisible : on la borne, et on donne de l'air
entre les intertitres pour que la page respire au lieu de dérouler. */
.page-corps { max-width: 74ch; }
.page-corps h2 { margin-top: 48px; }
.page-corps h2:first-child { margin-top: 0; }
.page-corps h3 { margin-top: 32px; }
.page-corps ul { padding-left: 0; list-style: none; }
.page-corps ul li {
position: relative;
padding-left: 30px;
margin-bottom: 12px;
}
.page-corps ul li::before {
content: '';
position: absolute;
left: 4px; top: .55em;
width: 8px; height: 8px;
border-radius: 2px;
background: var(--violet);
transform: rotate(45deg);
}
/* ------------------------------------------------------------------ */
/* Colonne de lecture et sommaire */
/* */
/* Une page longue laissait la moitié de l'écran vide. Le sommaire */
/* occupe cet espace par de l'utile : il situe le lecteur et lui permet */
/* d'aller directement à ce qui l'intéresse. */
/* ------------------------------------------------------------------ */
.page-lecture {
display: grid;
grid-template-columns: minmax(0, 1fr) 260px;
gap: 64px;
align-items: start;
}
.page-lecture .page-corps { max-width: 72ch; }
.page-sommaire {
position: sticky;
top: 104px;
border-left: 2px solid var(--line);
padding-left: 20px;
}
.page-sommaire__titre {
font-family: var(--font-heading);
font-size: 1rem;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--muted);
font-weight: 700;
margin: 0 0 14px;
}
.page-sommaire ol { list-style: none; margin: 0; padding: 0; counter-reset: sommaire; }
.page-sommaire li { margin-bottom: 12px; counter-increment: sommaire; }
.page-sommaire a {
display: block;
font-size: 1rem;
line-height: 1.4;
color: var(--muted);
text-decoration: none;
transition: color .2s ease, transform .2s ease;
}
.page-sommaire a::before {
content: counter(sommaire, decimal-leading-zero);
font-family: var(--font-heading);
font-weight: 700;
font-size: 1rem;
color: var(--violet);
opacity: .5;
margin-right: 8px;
}
.page-sommaire a:hover { color: var(--navy); }
.page-sommaire a.est-actif { color: var(--navy); font-weight: 700; }
.page-sommaire a.est-actif::before { opacity: 1; }
/* Les ancres ne doivent pas passer sous l'en-tête collante. */
.page-corps h2 { scroll-margin-top: 100px; }
@media (max-width: 1100px) {
.page-lecture { grid-template-columns: 1fr; gap: 0; }
.page-sommaire { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.page-sommaire a { transition: none; }
}
/* Bandeau des pages de liste : le champ de recherche s'y intègre. */
.hero-page--liste { padding-bottom: 56px; }
.hero-page--liste form { margin-top: 26px !important; }
/* Le bandeau est passé au registre clair : la recherche suit. */
.hero-page--liste input[type="search"] {
background: #fff;
border-color: var(--azure-line) !important;
color: var(--ink);
}
.hero-page--liste input[type="search"]::placeholder { color: var(--muted); }
.hero-page--liste input[type="search"]:focus {
outline: 2px solid rgba(14,158,130,.45);
outline-offset: 2px;
}
.hero-page--liste .btn-outline {
background: var(--green);
color: #fff;
border-color: var(--green);
box-shadow: 0 3px 10px rgba(14,158,130,.20);
}
.hero-page--liste .btn-outline:hover { background: var(--green); color: #fff; border-color: var(--green); }
/* ================================================================== */
/* Cartes logiciels */
/* */
/* Les deux cartes n'avaient pas la même zone d'image : les titres et */
/* les boutons ne tombaient pas à la même hauteur. Zone fixe, corps en */
/* colonne, bouton poussé en bas : tout s'aligne quel que soit le texte.*/
/* ================================================================== */
.carte-logiciel {
display: flex;
flex-direction: column;
padding: 0;
overflow: hidden;
text-decoration: none;
}
.carte-logiciel__media {
height: 280px;
overflow: hidden;
border-bottom: 1px solid var(--line);
background: var(--azure-soft, #F1F0FE);
flex: 0 0 auto;
}
.carte-logiciel__media > img {
width: 100%; height: 100%;
object-fit: cover;
object-position: top center;
display: block;
}
.carte-logiciel__media .browser-frame {
border: none;
border-radius: 0;
box-shadow: none;
height: 100%;
display: flex;
flex-direction: column;
}
.carte-logiciel__media .browser-frame img {
flex: 1;
min-height: 0;
object-fit: cover;
object-position: top center;
}
.carte-logiciel__corps {
padding: 32px 36px 36px;
display: flex;
flex-direction: column;
flex: 1;
}
.carte-logiciel__corps h3 { margin: 0 0 10px; }
.carte-logiciel__baseline {
font-weight: 700;
color: var(--navy-ink);
font-size: 1.02rem;
margin: 0 0 12px;
padding-left: 16px;
position: relative;
}
.carte-logiciel__baseline::before {
content: '';
position: absolute;
left: 0; top: .45em;
width: 7px; height: 7px;
border-radius: 2px;
background: var(--violet);
transform: rotate(45deg);
}
.carte-logiciel__action { margin-top: auto; align-self: flex-start; }
/* ================================================================== */
/* Mur d'avis */
/* */
/* Trois avis de même poids valent mieux qu'un gros et deux petits : */
/* la hiérarchie inventée n'apportait rien, et la grande carte sonnait */
/* creux. Ce qui porte la crédibilité ici, c'est le nom de la structure.*/
/* ================================================================== */
.mur-avis { align-items: stretch; }
.carte-avis {
position: relative;
margin: 0;
padding: 40px 32px 32px;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius);
display: flex;
flex-direction: column;
overflow: hidden;
transition: transform .25s cubic-bezier(.22,.9,.35,1), box-shadow .25s ease;
}
.carte-avis:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -30px rgba(42,37,134,.45); }
.carte-avis::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: var(--teinte);
}
.carte-avis--violet { --teinte: var(--violet); }
.carte-avis--green { --teinte: var(--green); }
.carte-avis--navy { --teinte: var(--navy); }
/* Le guillemet est un motif de fond, pas un caractère à lire. */
.carte-avis__guillemet {
position: absolute;
top: 6px; right: 20px;
font-family: Georgia, serif;
font-size: 5.5rem;
line-height: 1;
color: var(--teinte);
opacity: .12;
pointer-events: none;
}
.carte-avis blockquote {
margin: 0 0 26px;
padding: 0;
border: none;
font-family: var(--font-heading);
font-weight: 600;
font-size: 1.12rem;
line-height: 1.5;
color: var(--navy-ink);
flex: 1;
}
.carte-avis blockquote p { margin: 0; font: inherit; color: inherit; }
.carte-avis__signature {
display: flex;
align-items: center;
gap: 14px;
padding-top: 20px;
border-top: 1px solid var(--line);
}
.carte-avis__monogramme {
flex: 0 0 auto;
width: 46px; height: 46px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: var(--teinte);
color: #fff;
font-family: var(--font-heading);
font-weight: 800;
font-size: 1rem;
letter-spacing: .02em;
}
.carte-avis__signature strong { display: block; color: var(--navy); font-size: 1rem; line-height: 1.3; }
.carte-avis__poste { display: block; color: var(--muted); font-size: 1rem; line-height: 1.35; }
.carte-avis__structure { display: block; color: var(--teinte); font-size: 1rem; font-weight: 700; }
@media (prefers-reduced-motion: reduce) {
.carte-avis:hover { transform: none; }
}
/* Date et durée de lecture sur les cartes d'article. */
.actu-card__meta {
display: block;
font-size: 1rem;
color: var(--muted);
margin: 0 0 12px;
}
.actu-card { display: flex; flex-direction: column; }
.actu-card__body { display: flex; flex-direction: column; flex: 1; }
.actu-card__body .font-heading { margin-top: auto; }
/* Bandeau de page : boutons resserrés sur les petites largeurs. */
@media (max-width: 560px) {
.hero-page__actions { flex-direction: column; align-items: flex-start; }
.hero-page__actions .btn {
width: auto;
padding: 12px 22px;
font-size: 1rem;
}
}
/* ================================================================== */
/* Filigrane du chevron Dir IPS */
/* */
/* Le chevron de la marque, très agrandi et très peu opaque, donne de */
/* la matière aux grands aplats sans jamais concurrencer le texte. */
/* Le tracé est vectoriel : net à toutes les tailles, aucun fichier */
/* supplémentaire à charger. */
/* ================================================================== */
.filigrane { position: relative; isolation: isolate; overflow: clip; }
.filigrane::after {
content: '';
position: absolute;
z-index: -1;
pointer-events: none;
background-repeat: no-repeat;
background-size: contain;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201032.000000%20924.000000%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%3E%3Cg%20transform%3D%22translate(0.000000%2C924.000000)%20scale(0.100000%2C-0.100000)%22%0Afill%3D%22%23000000%22%20stroke%3D%22none%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M5594%209117%20c-21%20-12%20-17%20-45%208%20-58%2012%20-6%2072%20-63%20134%20-125%2097%20-99%20117%0A-114%20145%20-114%2026%200%2042%20-11%2089%20-60%2047%20-50%2062%20-60%2090%20-60%2028%200%2045%20-13%20120%20-90%0A74%20-75%2093%20-90%20119%20-90%2028%200%2067%20-36%20346%20-315%20279%20-279%20315%20-318%20315%20-346%200%20-26%0A15%20-45%2090%20-119%2080%20-78%2090%20-92%2090%20-123%200%20-28%206%20-40%2030%20-57%2024%20-17%2030%20-28%2030%0A-60%200%20-32%206%20-43%2030%20-60%2024%20-17%2030%20-28%2030%20-60%200%20-32%206%20-43%2030%20-60%2024%20-17%2030%0A-28%2030%20-60%200%20-32%206%20-43%2030%20-60%2028%20-20%2030%20-25%2030%20-90%200%20-65%202%20-70%2030%20-90%2030%0A-21%2030%20-22%2030%20-120%200%20-98%200%20-99%2030%20-120%2030%20-21%2030%20-21%2030%20-540%200%20-519%200%20-519%0A-30%20-540%20-30%20-21%20-30%20-22%20-30%20-120%200%20-98%200%20-99%20-30%20-120%20-30%20-21%20-30%20-22%20-30%0A-120%200%20-98%200%20-99%20-30%20-120%20-28%20-20%20-30%20-25%20-30%20-90%200%20-65%20-2%20-70%20-30%20-90%20-24%0A-17%20-30%20-28%20-30%20-60%200%20-32%20-6%20-43%20-30%20-60%20-28%20-20%20-30%20-25%20-30%20-90%200%20-65%20-2%0A-70%20-30%20-90%20-24%20-17%20-30%20-28%20-30%20-60%200%20-32%20-6%20-43%20-30%20-60%20-24%20-17%20-30%20-28%0A-30%20-60%200%20-32%20-6%20-43%20-30%20-60%20-24%20-17%20-30%20-28%20-30%20-60%200%20-32%20-6%20-43%20-30%20-60%0A-24%20-17%20-30%20-29%20-30%20-57%200%20-31%20-8%20-44%20-60%20-93%20-52%20-49%20-60%20-62%20-60%20-93%200%20-28%0A-6%20-40%20-30%20-57%20-24%20-17%20-30%20-29%20-30%20-57%200%20-31%20-8%20-44%20-60%20-93%20-50%20-47%20-60%20-62%0A-60%20-90%200%20-28%20-10%20-43%20-60%20-90%20-50%20-47%20-60%20-62%20-60%20-90%200%20-28%20-13%20-45%20-90%0A-120%20-76%20-74%20-90%20-93%20-90%20-120%200%20-27%20-16%20-48%20-120%20-150%20-103%20-102%20-120%20-123%0A-120%20-150%200%20-27%20-20%20-51%20-150%20-180%20-129%20-127%20-150%20-153%20-150%20-179%200%20-47%20-1634%0A-1681%20-1680%20-1681%20-47%200%20-240%20-195%20-240%20-243%200%20-43%2015%20-57%2061%20-57%2030%200%2042%206%0A59%2030%2017%2024%2028%2030%2060%2030%2032%200%2043%206%2060%2030%2017%2024%2028%2030%2060%2030%2032%200%2043%206%2060%2030%0A17%2024%2028%2030%2060%2030%2032%200%2043%206%2060%2030%2017%2024%2029%2030%2057%2030%2031%200%2044%208%2093%2060%2049%2052%0A62%2060%2093%2060%2028%200%2040%206%2057%2030%2017%2024%2029%2030%2057%2030%2031%200%2044%208%2093%2060%2047%2050%2062%2060%0A90%2060%2028%200%2043%2010%2090%2060%2047%2050%2062%2060%2090%2060%2028%200%2043%2010%2090%2060%2047%2050%2062%2060%2090%2060%0A28%200%2043%2010%2090%2060%2047%2050%2062%2060%2090%2060%2028%200%2043%2010%2090%2060%2047%2050%2062%2060%2090%2060%2028%200%0A43%2010%2090%2060%2047%2050%2062%2060%2090%2060%2028%200%2043%2010%2090%2060%2047%2050%2062%2060%2090%2060%2028%200%2045%2013%0A120%2090%2078%2080%2092%2090%20123%2090%2028%200%2040%206%2057%2030%2017%2024%2029%2030%2057%2030%2031%200%2045%2010%20123%0A90%2074%2076%2093%2090%20120%2090%2027%200%2048%2016%20150%20120%20102%20104%20123%20120%20150%20120%2027%200%2046%2014%0A120%2090%2075%2077%2093%2090%20120%2090%2027%200%2045%2013%20120%2090%2075%2077%2093%2090%20120%2090%2027%200%2045%2013%0A120%2090%2074%2076%2093%2090%20120%2090%2027%200%2048%2016%20150%20120%20102%20103%20123%20120%20150%20120%2027%200%0A51%2020%20180%20150%20129%20130%20153%20150%20180%20150%2027%200%2051%2020%20180%20150%20127%20129%20153%20150%0A179%20150%2048%200%201261%201214%201261%201261%200%2026%2015%2046%2090%20119%2077%2075%2090%2092%2090%20120%200%2028%0A10%2043%2060%2090%2052%2049%2060%2062%2060%2093%200%2028%206%2040%2030%2057%2030%2021%2031%2024%2028%2091%20-3%2073%205%2088%0A45%2089%2016%200%2017%2017%2017%20209%200%20209%200%20209%20-30%20215%20-28%205%20-30%209%20-30%2047%200%2039%20-5%2047%0A-60%2099%20-49%2046%20-60%2063%20-60%2089%200%2047%20-253%20301%20-301%20301%20-26%200%20-48%2018%20-149%20120%0A-103%20104%20-122%20120%20-151%20120%20-27%200%20-42%2011%20-89%2060%20-47%2050%20-62%2060%20-90%2060%20-28%200%0A-43%2010%20-90%2060%20-47%2050%20-62%2060%20-90%2060%20-28%200%20-43%2010%20-90%2060%20-47%2050%20-62%2060%20-90%2060%0A-28%200%20-43%2010%20-90%2060%20-49%2052%20-62%2060%20-93%2060%20-28%200%20-40%206%20-57%2030%20-17%2024%20-29%2030%0A-57%2030%20-31%200%20-44%208%20-93%2060%20-49%2052%20-62%2060%20-93%2060%20-28%200%20-40%206%20-57%2030%20-17%2024%0A-28%2030%20-60%2030%20-32%200%20-43%206%20-60%2030%20-17%2024%20-28%2030%20-60%2030%20-32%200%20-43%206%20-60%2030%0A-17%2024%20-29%2030%20-57%2030%20-31%200%20-44%208%20-93%2060%20-49%2052%20-62%2060%20-93%2060%20-28%200%20-40%206%0A-57%2030%20-17%2024%20-28%2030%20-60%2030%20-32%200%20-43%206%20-60%2030%20-17%2024%20-28%2030%20-60%2030%20-32%200%0A-43%206%20-60%2030%20-17%2024%20-28%2030%20-60%2030%20-32%200%20-43%206%20-60%2030%20-17%2024%20-28%2030%20-60%2030%0A-32%200%20-43%206%20-60%2030%20-17%2024%20-28%2030%20-60%2030%20-32%200%20-43%206%20-60%2030%20-17%2024%20-28%2030%0A-60%2030%20-32%200%20-43%206%20-60%2030%20-17%2024%20-28%2030%20-60%2030%20-32%200%20-43%206%20-60%2030%20-20%2028%0A-25%2030%20-90%2030%20-65%200%20-70%202%20-90%2030%20-17%2024%20-28%2030%20-60%2030%20-32%200%20-43%206%20-60%2030%0A-17%2024%20-28%2030%20-60%2030%20-32%200%20-43%206%20-60%2030%20-17%2024%20-28%2030%20-60%2030%20-32%200%20-43%206%0A-60%2030%20-20%2028%20-25%2030%20-90%2030%20-65%200%20-70%202%20-90%2030%20-17%2024%20-28%2030%20-60%2030%20-32%200%0A-43%206%20-60%2030%20-20%2028%20-25%2030%20-90%2030%20-65%200%20-70%202%20-90%2030%20-20%2028%20-25%2030%20-90%2030%0A-65%200%20-70%202%20-90%2029%20-21%2030%20-21%2030%20-146%2033%20-69%202%20-132%20-1%20-140%20-5z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
/* Sur fond sombre : grand, à droite, très discret. */
.hero-page::after, .final-cta::after, .filigrane--clair::after {
content: '';
position: absolute;
z-index: 0;
pointer-events: none;
right: -6%;
top: 50%;
width: 42%;
aspect-ratio: 1032 / 924;
transform: translateY(-50%);
opacity: .05;
background: no-repeat center / contain url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201032.000000%20924.000000%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%3E%3Cg%20transform%3D%22translate(0.000000%2C924.000000)%20scale(0.100000%2C-0.100000)%22%0Afill%3D%22%23000000%22%20stroke%3D%22none%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M5594%209117%20c-21%20-12%20-17%20-45%208%20-58%2012%20-6%2072%20-63%20134%20-125%2097%20-99%20117%0A-114%20145%20-114%2026%200%2042%20-11%2089%20-60%2047%20-50%2062%20-60%2090%20-60%2028%200%2045%20-13%20120%20-90%0A74%20-75%2093%20-90%20119%20-90%2028%200%2067%20-36%20346%20-315%20279%20-279%20315%20-318%20315%20-346%200%20-26%0A15%20-45%2090%20-119%2080%20-78%2090%20-92%2090%20-123%200%20-28%206%20-40%2030%20-57%2024%20-17%2030%20-28%2030%0A-60%200%20-32%206%20-43%2030%20-60%2024%20-17%2030%20-28%2030%20-60%200%20-32%206%20-43%2030%20-60%2024%20-17%2030%0A-28%2030%20-60%200%20-32%206%20-43%2030%20-60%2028%20-20%2030%20-25%2030%20-90%200%20-65%202%20-70%2030%20-90%2030%0A-21%2030%20-22%2030%20-120%200%20-98%200%20-99%2030%20-120%2030%20-21%2030%20-21%2030%20-540%200%20-519%200%20-519%0A-30%20-540%20-30%20-21%20-30%20-22%20-30%20-120%200%20-98%200%20-99%20-30%20-120%20-30%20-21%20-30%20-22%20-30%0A-120%200%20-98%200%20-99%20-30%20-120%20-28%20-20%20-30%20-25%20-30%20-90%200%20-65%20-2%20-70%20-30%20-90%20-24%0A-17%20-30%20-28%20-30%20-60%200%20-32%20-6%20-43%20-30%20-60%20-28%20-20%20-30%20-25%20-30%20-90%200%20-65%20-2%0A-70%20-30%20-90%20-24%20-17%20-30%20-28%20-30%20-60%200%20-32%20-6%20-43%20-30%20-60%20-24%20-17%20-30%20-28%0A-30%20-60%200%20-32%20-6%20-43%20-30%20-60%20-24%20-17%20-30%20-28%20-30%20-60%200%20-32%20-6%20-43%20-30%20-60%0A-24%20-17%20-30%20-29%20-30%20-57%200%20-31%20-8%20-44%20-60%20-93%20-52%20-49%20-60%20-62%20-60%20-93%200%20-28%0A-6%20-40%20-30%20-57%20-24%20-17%20-30%20-29%20-30%20-57%200%20-31%20-8%20-44%20-60%20-93%20-50%20-47%20-60%20-62%0A-60%20-90%200%20-28%20-10%20-43%20-60%20-90%20-50%20-47%20-60%20-62%20-60%20-90%200%20-28%20-13%20-45%20-90%0A-120%20-76%20-74%20-90%20-93%20-90%20-120%200%20-27%20-16%20-48%20-120%20-150%20-103%20-102%20-120%20-123%0A-120%20-150%200%20-27%20-20%20-51%20-150%20-180%20-129%20-127%20-150%20-153%20-150%20-179%200%20-47%20-1634%0A-1681%20-1680%20-1681%20-47%200%20-240%20-195%20-240%20-243%200%20-43%2015%20-57%2061%20-57%2030%200%2042%206%0A59%2030%2017%2024%2028%2030%2060%2030%2032%200%2043%206%2060%2030%2017%2024%2028%2030%2060%2030%2032%200%2043%206%2060%2030%0A17%2024%2028%2030%2060%2030%2032%200%2043%206%2060%2030%2017%2024%2029%2030%2057%2030%2031%200%2044%208%2093%2060%2049%2052%0A62%2060%2093%2060%2028%200%2040%206%2057%2030%2017%2024%2029%2030%2057%2030%2031%200%2044%208%2093%2060%2047%2050%2062%2060%0A90%2060%2028%200%2043%2010%2090%2060%2047%2050%2062%2060%2090%2060%2028%200%2043%2010%2090%2060%2047%2050%2062%2060%2090%2060%0A28%200%2043%2010%2090%2060%2047%2050%2062%2060%2090%2060%2028%200%2043%2010%2090%2060%2047%2050%2062%2060%2090%2060%2028%200%0A43%2010%2090%2060%2047%2050%2062%2060%2090%2060%2028%200%2043%2010%2090%2060%2047%2050%2062%2060%2090%2060%2028%200%2045%2013%0A120%2090%2078%2080%2092%2090%20123%2090%2028%200%2040%206%2057%2030%2017%2024%2029%2030%2057%2030%2031%200%2045%2010%20123%0A90%2074%2076%2093%2090%20120%2090%2027%200%2048%2016%20150%20120%20102%20104%20123%20120%20150%20120%2027%200%2046%2014%0A120%2090%2075%2077%2093%2090%20120%2090%2027%200%2045%2013%20120%2090%2075%2077%2093%2090%20120%2090%2027%200%2045%2013%0A120%2090%2074%2076%2093%2090%20120%2090%2027%200%2048%2016%20150%20120%20102%20103%20123%20120%20150%20120%2027%200%0A51%2020%20180%20150%20129%20130%20153%20150%20180%20150%2027%200%2051%2020%20180%20150%20127%20129%20153%20150%0A179%20150%2048%200%201261%201214%201261%201261%200%2026%2015%2046%2090%20119%2077%2075%2090%2092%2090%20120%200%2028%0A10%2043%2060%2090%2052%2049%2060%2062%2060%2093%200%2028%206%2040%2030%2057%2030%2021%2031%2024%2028%2091%20-3%2073%205%2088%0A45%2089%2016%200%2017%2017%2017%20209%200%20209%200%20209%20-30%20215%20-28%205%20-30%209%20-30%2047%200%2039%20-5%2047%0A-60%2099%20-49%2046%20-60%2063%20-60%2089%200%2047%20-253%20301%20-301%20301%20-26%200%20-48%2018%20-149%20120%0A-103%20104%20-122%20120%20-151%20120%20-27%200%20-42%2011%20-89%2060%20-47%2050%20-62%2060%20-90%2060%20-28%200%0A-43%2010%20-90%2060%20-47%2050%20-62%2060%20-90%2060%20-28%200%20-43%2010%20-90%2060%20-47%2050%20-62%2060%20-90%2060%0A-28%200%20-43%2010%20-90%2060%20-49%2052%20-62%2060%20-93%2060%20-28%200%20-40%206%20-57%2030%20-17%2024%20-29%2030%0A-57%2030%20-31%200%20-44%208%20-93%2060%20-49%2052%20-62%2060%20-93%2060%20-28%200%20-40%206%20-57%2030%20-17%2024%0A-28%2030%20-60%2030%20-32%200%20-43%206%20-60%2030%20-17%2024%20-28%2030%20-60%2030%20-32%200%20-43%206%20-60%2030%0A-17%2024%20-29%2030%20-57%2030%20-31%200%20-44%208%20-93%2060%20-49%2052%20-62%2060%20-93%2060%20-28%200%20-40%206%0A-57%2030%20-17%2024%20-28%2030%20-60%2030%20-32%200%20-43%206%20-60%2030%20-17%2024%20-28%2030%20-60%2030%20-32%200%0A-43%206%20-60%2030%20-17%2024%20-28%2030%20-60%2030%20-32%200%20-43%206%20-60%2030%20-17%2024%20-28%2030%20-60%2030%0A-32%200%20-43%206%20-60%2030%20-17%2024%20-28%2030%20-60%2030%20-32%200%20-43%206%20-60%2030%20-17%2024%20-28%2030%0A-60%2030%20-32%200%20-43%206%20-60%2030%20-17%2024%20-28%2030%20-60%2030%20-32%200%20-43%206%20-60%2030%20-20%2028%0A-25%2030%20-90%2030%20-65%200%20-70%202%20-90%2030%20-17%2024%20-28%2030%20-60%2030%20-32%200%20-43%206%20-60%2030%0A-17%2024%20-28%2030%20-60%2030%20-32%200%20-43%206%20-60%2030%20-17%2024%20-28%2030%20-60%2030%20-32%200%20-43%206%0A-60%2030%20-20%2028%20-25%2030%20-90%2030%20-65%200%20-70%202%20-90%2030%20-17%2024%20-28%2030%20-60%2030%20-32%200%0A-43%206%20-60%2030%20-20%2028%20-25%2030%20-90%2030%20-65%200%20-70%202%20-90%2030%20-20%2028%20-25%2030%20-90%2030%0A-65%200%20-70%202%20-90%2029%20-21%2030%20-21%2030%20-146%2033%20-69%202%20-132%20-1%20-140%20-5z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
.hero-page > *, .final-cta > * { position: relative; z-index: 1; }
.final-cta { position: relative; overflow: hidden; }
/* Sur fond clair : plus petit, en bas à gauche, à peine perceptible. */
.section-alt { position: relative; overflow: clip; }
.section-alt::after {
content: '';
position: absolute;
z-index: 0;
pointer-events: none;
left: -4%;
bottom: -12%;
width: 26%;
aspect-ratio: 1032 / 924;
opacity: .035;
background: no-repeat center / contain url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201032.000000%20924.000000%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%3E%3Cg%20transform%3D%22translate(0.000000%2C924.000000)%20scale(0.100000%2C-0.100000)%22%0Afill%3D%22%23000000%22%20stroke%3D%22none%22%3E%3Cpath%20fill%3D%22%232A2586%22%20d%3D%22M5594%209117%20c-21%20-12%20-17%20-45%208%20-58%2012%20-6%2072%20-63%20134%20-125%2097%20-99%20117%0A-114%20145%20-114%2026%200%2042%20-11%2089%20-60%2047%20-50%2062%20-60%2090%20-60%2028%200%2045%20-13%20120%20-90%0A74%20-75%2093%20-90%20119%20-90%2028%200%2067%20-36%20346%20-315%20279%20-279%20315%20-318%20315%20-346%200%20-26%0A15%20-45%2090%20-119%2080%20-78%2090%20-92%2090%20-123%200%20-28%206%20-40%2030%20-57%2024%20-17%2030%20-28%2030%0A-60%200%20-32%206%20-43%2030%20-60%2024%20-17%2030%20-28%2030%20-60%200%20-32%206%20-43%2030%20-60%2024%20-17%2030%0A-28%2030%20-60%200%20-32%206%20-43%2030%20-60%2028%20-20%2030%20-25%2030%20-90%200%20-65%202%20-70%2030%20-90%2030%0A-21%2030%20-22%2030%20-120%200%20-98%200%20-99%2030%20-120%2030%20-21%2030%20-21%2030%20-540%200%20-519%200%20-519%0A-30%20-540%20-30%20-21%20-30%20-22%20-30%20-120%200%20-98%200%20-99%20-30%20-120%20-30%20-21%20-30%20-22%20-30%0A-120%200%20-98%200%20-99%20-30%20-120%20-28%20-20%20-30%20-25%20-30%20-90%200%20-65%20-2%20-70%20-30%20-90%20-24%0A-17%20-30%20-28%20-30%20-60%200%20-32%20-6%20-43%20-30%20-60%20-28%20-20%20-30%20-25%20-30%20-90%200%20-65%20-2%0A-70%20-30%20-90%20-24%20-17%20-30%20-28%20-30%20-60%200%20-32%20-6%20-43%20-30%20-60%20-24%20-17%20-30%20-28%0A-30%20-60%200%20-32%20-6%20-43%20-30%20-60%20-24%20-17%20-30%20-28%20-30%20-60%200%20-32%20-6%20-43%20-30%20-60%0A-24%20-17%20-30%20-29%20-30%20-57%200%20-31%20-8%20-44%20-60%20-93%20-52%20-49%20-60%20-62%20-60%20-93%200%20-28%0A-6%20-40%20-30%20-57%20-24%20-17%20-30%20-29%20-30%20-57%200%20-31%20-8%20-44%20-60%20-93%20-50%20-47%20-60%20-62%0A-60%20-90%200%20-28%20-10%20-43%20-60%20-90%20-50%20-47%20-60%20-62%20-60%20-90%200%20-28%20-13%20-45%20-90%0A-120%20-76%20-74%20-90%20-93%20-90%20-120%200%20-27%20-16%20-48%20-120%20-150%20-103%20-102%20-120%20-123%0A-120%20-150%200%20-27%20-20%20-51%20-150%20-180%20-129%20-127%20-150%20-153%20-150%20-179%200%20-47%20-1634%0A-1681%20-1680%20-1681%20-47%200%20-240%20-195%20-240%20-243%200%20-43%2015%20-57%2061%20-57%2030%200%2042%206%0A59%2030%2017%2024%2028%2030%2060%2030%2032%200%2043%206%2060%2030%2017%2024%2028%2030%2060%2030%2032%200%2043%206%2060%2030%0A17%2024%2028%2030%2060%2030%2032%200%2043%206%2060%2030%2017%2024%2029%2030%2057%2030%2031%200%2044%208%2093%2060%2049%2052%0A62%2060%2093%2060%2028%200%2040%206%2057%2030%2017%2024%2029%2030%2057%2030%2031%200%2044%208%2093%2060%2047%2050%2062%2060%0A90%2060%2028%200%2043%2010%2090%2060%2047%2050%2062%2060%2090%2060%2028%200%2043%2010%2090%2060%2047%2050%2062%2060%2090%2060%0A28%200%2043%2010%2090%2060%2047%2050%2062%2060%2090%2060%2028%200%2043%2010%2090%2060%2047%2050%2062%2060%2090%2060%2028%200%0A43%2010%2090%2060%2047%2050%2062%2060%2090%2060%2028%200%2043%2010%2090%2060%2047%2050%2062%2060%2090%2060%2028%200%2045%2013%0A120%2090%2078%2080%2092%2090%20123%2090%2028%200%2040%206%2057%2030%2017%2024%2029%2030%2057%2030%2031%200%2045%2010%20123%0A90%2074%2076%2093%2090%20120%2090%2027%200%2048%2016%20150%20120%20102%20104%20123%20120%20150%20120%2027%200%2046%2014%0A120%2090%2075%2077%2093%2090%20120%2090%2027%200%2045%2013%20120%2090%2075%2077%2093%2090%20120%2090%2027%200%2045%2013%0A120%2090%2074%2076%2093%2090%20120%2090%2027%200%2048%2016%20150%20120%20102%20103%20123%20120%20150%20120%2027%200%0A51%2020%20180%20150%20129%20130%20153%20150%20180%20150%2027%200%2051%2020%20180%20150%20127%20129%20153%20150%0A179%20150%2048%200%201261%201214%201261%201261%200%2026%2015%2046%2090%20119%2077%2075%2090%2092%2090%20120%200%2028%0A10%2043%2060%2090%2052%2049%2060%2062%2060%2093%200%2028%206%2040%2030%2057%2030%2021%2031%2024%2028%2091%20-3%2073%205%2088%0A45%2089%2016%200%2017%2017%2017%20209%200%20209%200%20209%20-30%20215%20-28%205%20-30%209%20-30%2047%200%2039%20-5%2047%0A-60%2099%20-49%2046%20-60%2063%20-60%2089%200%2047%20-253%20301%20-301%20301%20-26%200%20-48%2018%20-149%20120%0A-103%20104%20-122%20120%20-151%20120%20-27%200%20-42%2011%20-89%2060%20-47%2050%20-62%2060%20-90%2060%20-28%200%0A-43%2010%20-90%2060%20-47%2050%20-62%2060%20-90%2060%20-28%200%20-43%2010%20-90%2060%20-47%2050%20-62%2060%20-90%2060%0A-28%200%20-43%2010%20-90%2060%20-49%2052%20-62%2060%20-93%2060%20-28%200%20-40%206%20-57%2030%20-17%2024%20-29%2030%0A-57%2030%20-31%200%20-44%208%20-93%2060%20-49%2052%20-62%2060%20-93%2060%20-28%200%20-40%206%20-57%2030%20-17%2024%0A-28%2030%20-60%2030%20-32%200%20-43%206%20-60%2030%20-17%2024%20-28%2030%20-60%2030%20-32%200%20-43%206%20-60%2030%0A-17%2024%20-29%2030%20-57%2030%20-31%200%20-44%208%20-93%2060%20-49%2052%20-62%2060%20-93%2060%20-28%200%20-40%206%0A-57%2030%20-17%2024%20-28%2030%20-60%2030%20-32%200%20-43%206%20-60%2030%20-17%2024%20-28%2030%20-60%2030%20-32%200%0A-43%206%20-60%2030%20-17%2024%20-28%2030%20-60%2030%20-32%200%20-43%206%20-60%2030%20-17%2024%20-28%2030%20-60%2030%0A-32%200%20-43%206%20-60%2030%20-17%2024%20-28%2030%20-60%2030%20-32%200%20-43%206%20-60%2030%20-17%2024%20-28%2030%0A-60%2030%20-32%200%20-43%206%20-60%2030%20-17%2024%20-28%2030%20-60%2030%20-32%200%20-43%206%20-60%2030%20-20%2028%0A-25%2030%20-90%2030%20-65%200%20-70%202%20-90%2030%20-17%2024%20-28%2030%20-60%2030%20-32%200%20-43%206%20-60%2030%0A-17%2024%20-28%2030%20-60%2030%20-32%200%20-43%206%20-60%2030%20-17%2024%20-28%2030%20-60%2030%20-32%200%20-43%206%0A-60%2030%20-20%2028%20-25%2030%20-90%2030%20-65%200%20-70%202%20-90%2030%20-17%2024%20-28%2030%20-60%2030%20-32%200%0A-43%206%20-60%2030%20-20%2028%20-25%2030%20-90%2030%20-65%200%20-70%202%20-90%2030%20-20%2028%20-25%2030%20-90%2030%0A-65%200%20-70%202%20-90%2029%20-21%2030%20-21%2030%20-146%2033%20-69%202%20-132%20-1%20-140%20-5z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
.section-alt > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
.hero-page::after, .final-cta::after, .section-alt::after { opacity: .03; }
}
/* ================================================================== */
/* Pages composées */
/* */
/* Le contenu de l'éditeur est découpé à chaque intertitre et mis en */
/* scène : fonds alternés, numérotation, largeurs variables. L'objectif */
/* est qu'une page qui explique se lise comme une page, pas comme un */
/* document déroulé. */
/* ================================================================== */
/* --- Chapô, avant le premier intertitre ------------------------------ */
.section-intro { padding-top: 56px; padding-bottom: 8px; }
.page-chapo {
max-width: 980px;
margin: 0 auto;
border-left: 3px solid var(--green);
padding-left: 28px;
}
.page-chapo p {
font-size: 1.22rem;
line-height: 1.66;
color: var(--navy-ink);
font-weight: 500;
}
.page-chapo p + p { margin-top: 16px; font-size: 1.06rem; color: var(--ink); font-weight: 400; }
/* --- Sections composées : mise en page éditoriale --------------------- */
/*
* Le rendu précédent empilait « 01 » pâle, titre, paragraphes : une
* succession de texte. Le titre et son numéro tiennent maintenant une
* colonne de gauche qui suit la lecture ; le corps se déroule à droite.
*/
.section-composee { padding-top: 72px; padding-bottom: 72px; }
.section-composee .container {
display: grid;
grid-template-columns: 320px minmax(0, 1fr);
gap: 24px 64px;
align-items: start;
max-width: 1150px;
}
.section-composee__tete {
position: sticky;
top: 104px;
display: block;
margin: 0;
max-width: none;
}
.section-composee__numero {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
height: 44px;
padding: 0 12px;
border-radius: 12px;
background: var(--green);
color: #fff;
font-family: var(--font-heading);
font-weight: 800;
font-size: 1.05rem;
margin-bottom: 16px;
box-shadow: 0 10px 22px -12px rgba(14,158,130,.55);
opacity: 1;
letter-spacing: 0;
font-variant-numeric: tabular-nums;
}
.section-composee__tete h2 {
position: relative;
margin: 0;
font-size: clamp(1.4rem, 1.9vw, 1.75rem);
line-height: 1.28;
padding-bottom: 16px;
}
.section-composee__tete h2::after {
content: '';
position: absolute;
left: 0; bottom: 0;
width: 44px; height: 3px;
border-radius: 3px;
background: var(--green);
}
/* --- Corps de section ------------------------------------------------- */
.section-composee__corps {
max-width: none;
margin: 0;
padding-left: 0;
}
.section-composee__corps p {
font-size: 1.06rem;
line-height: 1.75;
margin-bottom: 16px;
max-width: 72ch;
}
.section-composee__corps p:last-child { margin-bottom: 0; }
.section-composee__corps .paragraphe-tete {
font-size: 1.16rem;
line-height: 1.68;
color: var(--navy-ink);
font-weight: 500;
}
.section-composee__corps h3 {
margin: 28px 0 10px;
font-size: 1.14rem;
}
.section-composee__corps a { color: var(--navy); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(14,158,130,.5); text-underline-offset: 3px; }
.section-composee__corps a:hover { text-decoration-color: var(--green); }
.section-composee__corps blockquote {
margin: 22px 0;
border: 1px solid rgba(14,158,130,.28);
border-radius: 14px;
background: linear-gradient(160deg, #fff, #F3FBF9);
padding: 20px 24px;
font-style: normal;
}
@media (max-width: 980px) {
.section-composee .container { grid-template-columns: 1fr; gap: 20px; }
.section-composee__tete { position: static; }
.section-composee { padding-top: 52px; padding-bottom: 52px; }
}
/* --- Définitions en grille -------------------------------------------- */
/* Trois textes du type « Terme : ce qu'il recouvre » se comparent mieux
côte à côte qu'empilés en paragraphes. */
.grille-definitions {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
gap: 18px;
margin: 8px 0 24px;
}
.carte-definition {
background: #fff;
border: 1px solid var(--line);
border-left: 3px solid var(--violet);
border-radius: 14px;
padding: 20px 22px;
transition: transform .25s cubic-bezier(.22,.9,.35,1), box-shadow .25s ease;
}
.carte-definition:hover { transform: translateY(-3px); box-shadow: 0 20px 42px -30px rgba(42,37,134,.5); }
.carte-definition:nth-child(3n+2) { border-left-color: var(--green); }
.carte-definition:nth-child(3n+3) { border-left-color: var(--navy); }
.carte-definition strong {
display: block;
font-family: var(--font-heading);
font-weight: 800;
font-size: 1.08rem;
color: var(--navy-ink);
margin-bottom: 8px;
}
.carte-definition p { margin: 0 !important; font-size: .97rem !important; line-height: 1.6 !important; color: var(--muted); max-width: none !important; }
/* --- Listes en points cochés ------------------------------------------ */
.grille-check {
list-style: none;
margin: 8px 0 24px;
padding: 0;
display: grid;
gap: 12px 28px;
}
.grille-check--deux { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grille-check li {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 1rem;
line-height: 1.6;
margin: 0;
padding: 0;
}
.grille-check li::before { content: none; }
.grille-check__puce {
flex: 0 0 auto;
width: 20px; height: 20px;
margin-top: 3px;
border-radius: 6px;
background: var(--azure-soft);
position: relative;
}
.grille-check__puce::after {
content: '';
position: absolute;
left: 7px; top: 4px;
width: 5px; height: 9px;
border-right: 2px solid var(--violet);
border-bottom: 2px solid var(--violet);
transform: rotate(42deg);
}
/* --- Tableaux ---------------------------------------------------------- */
.tableau-defilant { overflow-x: auto; margin: 8px 0 24px; -webkit-overflow-scrolling: touch; }
.tableau-cadre {
width: 100%;
border-collapse: collapse;
background: #fff;
border: 1px solid var(--line);
border-radius: 14px;
overflow: hidden;
font-size: .97rem;
}
.tableau-cadre th {
text-align: left;
background: var(--azure-soft);
color: var(--navy);
font-family: var(--font-heading);
font-weight: 700;
font-size: 1rem;
letter-spacing: .04em;
text-transform: uppercase;
padding: 12px 16px;
}
.tableau-cadre td { padding: 12px 16px; border-top: 1px solid var(--line); }
/* --- Le sommaire suit les sections composées --------------------------- */
.page-lecture--composee { display: block; }
@media (prefers-reduced-motion: reduce) {
.carte-definition:hover { transform: none; }
}
/* --- Sommaire flottant sur les pages composées ------------------------ */
/* Le contenu occupe désormais toute la largeur : le sommaire se place à
côté, en flottant, et disparaît quand il n'y a plus la place. */
.sommaire-flottant {
position: fixed;
left: 24px;
top: 50%;
transform: translateY(-50%);
z-index: 40;
max-width: 208px;
padding: 16px 18px;
background: rgba(255,255,255,.94);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid var(--line);
border-radius: 16px;
box-shadow: 0 22px 46px -30px rgba(23,20,63,.45);
}
.sommaire-flottant__titre {
font-family: var(--font-heading);
font-size: 1rem;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--muted);
font-weight: 700;
margin: 0 0 10px;
}
.sommaire-flottant ol { list-style: none; margin: 0; padding: 0; counter-reset: som; }
.sommaire-flottant li { counter-increment: som; margin-bottom: 8px; }
.sommaire-flottant li:last-child { margin-bottom: 0; }
.sommaire-flottant a {
display: block;
font-size: 1rem;
line-height: 1.35;
color: var(--muted);
text-decoration: none;
transition: color .2s ease;
}
.sommaire-flottant a::before {
content: counter(som, decimal-leading-zero);
font-family: var(--font-heading);
font-weight: 700;
font-size: 1rem;
color: var(--violet);
opacity: .45;
margin-right: 7px;
}
.sommaire-flottant a:hover, .sommaire-flottant a.est-actif { color: var(--navy); font-weight: 600; }
.sommaire-flottant a.est-actif::before { opacity: 1; }
.section-composee { scroll-margin-top: 90px; }
/* En dessous de 1500 px, il empiéterait sur le contenu : on le retire. */
@media (max-width: 1500px) { .sommaire-flottant { display: none !important; } }
/* Une section dont le corps s'étale (grille, tableau) porte un en-tête large. */
.section-composee:has(.section-composee__corps--large) .section-composee__tete { max-width: 1060px; }
/* Logo d'un partenaire, présenté seul et sobrement. */
.logo-partenaire {
max-width: 210px;
max-height: 84px;
width: auto;
height: auto;
object-fit: contain;
filter: grayscale(1);
opacity: .78;
transition: filter .3s ease, opacity .3s ease;
}
.logo-partenaire:hover { filter: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .logo-partenaire { transition: none; } }
/* ================================================================== */
.site-footer{padding:76px 0 0;font-size:1.02rem;line-height:1.7}
.footer-grid{
display:grid;
grid-template-columns:1.55fr 1fr 1fr 1fr 1.15fr;
gap:44px;
padding-bottom:52px;
border-bottom:1px solid rgba(255,255,255,.11);
align-items:start;
}
.footer-brand .site-logo{display:inline-block;margin-bottom:20px}
.footer-brand img{height:46px;width:auto}
.footer-brand p{font-size:1.02rem;line-height:1.75;color:#9AA4CC;max-width:23rem;margin-bottom:22px}
.footer-social{display:flex;gap:10px}
.footer-social a{
width:40px;height:40px;border-radius:11px;
background:rgba(255,255,255,.09);color:#C7CBFB;
display:flex;align-items:center;justify-content:center;
transition:background .2s ease,color .2s ease;
}
.footer-social a:hover{background:var(--violet);color:#fff}
/* La base du thème est à 16 px : 0,96rem tombait à 15,4 px. */
.site-footer h4{
font-family:var(--font-heading);font-size:1rem;font-weight:700;
letter-spacing:.1em;text-transform:uppercase;color:#fff;margin-bottom:19px;
}
.footer-col ul{list-style:none;margin:0;padding:0}
.footer-col li{margin-bottom:12px}
.footer-col li:last-child{margin-bottom:0}
.footer-col a{font-size:1.02rem;line-height:1.6}
/* Contact : les coordonnées se lisent, elles ne se cliquent pas comme un menu. */
.footer-contact .footer-tel{
display:block;font-family:var(--font-heading);font-weight:800;
font-size:1.34rem;color:#fff;line-height:1.3;margin-bottom:6px;
}
.footer-contact .footer-mail{display:block;margin-bottom:14px;color:#C7CBFB}
.footer-contact address{font-style:normal;color:#9AA4CC;line-height:1.7;margin-bottom:22px}
.btn-footer{
display:inline-flex;align-items:center;justify-content:center;
background:var(--green);color:#fff;
font-family:var(--font-heading);font-weight:700;font-size:.99rem;
padding:13px 20px;border-radius:11px;text-align:center;
}
.btn-footer:hover{background:#0C8A73;color:#fff}
.footer-bottom{
display:flex;align-items:center;gap:22px;flex-wrap:wrap;
padding:24px 0 34px;font-size:.99rem;color:#7F89B6;
}
.footer-bottom ul{list-style:none;display:flex;gap:20px;margin-left:auto;flex-wrap:wrap;padding:0}
.footer-bottom li{margin:0}
.footer-bottom a{color:#7F89B6;font-size:1rem}
.footer-bottom a:hover{color:#fff}
.footer-france{display:inline-flex;align-items:center;gap:9px;color:#9AA4CC}
.footer-france i{
width:22px;height:15px;border-radius:3px;display:inline-block;flex:0 0 auto;
background:linear-gradient(90deg,#2A2586 33%,#fff 33% 66%,#C8102E 66%);
}
@media (max-width:1100px){
.footer-grid{grid-template-columns:1.4fr 1fr 1fr;gap:38px}
.footer-contact{grid-column:span 3}
}
@media (max-width:700px){
.footer-grid{grid-template-columns:1fr 1fr}
.footer-brand,.footer-contact{grid-column:span 2}
.footer-bottom ul{margin-left:0}
}
/* ================================================================== */
/* Pied de page — version validée */
/* */
/* Fond nuit avec chevrons de marque, filet dégradé en tête, intitulés */
/* soulignés de turquoise, liens à chevron, et un bloc Contact isolé */
/* dans sa carte avec ses deux gages de confiance. */
/* ================================================================== */
.site-footer{
position: relative;
overflow: hidden;
background: #0B1338;
color: #B9C2E4;
padding: 82px 0 0;
font-size: 1.02rem;
line-height: 1.7;
}
/* Halo très doux à droite, pour que l'aplat ne soit pas mort. */
.site-footer::before{
content: '';
position: absolute;
right: -6%; top: -30%;
width: 62%; height: 150%;
background: radial-gradient(circle at 60% 45%, rgba(46,64,180,.42), transparent 62%);
pointer-events: none;
}
/* Filet dégradé en tête. */
.footer-filet{
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, #0E9E82 0%, #22D3C0 26%, #6FA8FF 58%, #C9A6FF 84%, rgba(201,166,255,0) 100%);
}
/* Chevrons de marque, en aplat très discret. */
.footer-decor{
position: absolute;
pointer-events: none;
opacity: .055;
background: no-repeat center / contain var(--chevron-blanc);
}
.footer-decor--g{ left: -7%; bottom: -18%; width: 26%; aspect-ratio: 1032/924; transform: scaleX(-1); }
.footer-decor--d{ right: -5%; top: -14%; width: 30%; aspect-ratio: 1032/924; }
/* Cinq colonnes ne tiennent pas dans le conteneur courant du thème. */
.site-footer .container{ position: relative; z-index: 1; }
.footer-grid{
display: grid;
grid-template-columns: 1.35fr .96fr .96fr .96fr 1.5fr;
gap: 32px;
padding-bottom: 56px;
align-items: start;
}
/* --- Colonne de marque --- */
.footer-brand .site-logo{ display: inline-block; margin-bottom: 24px; }
.footer-brand img{ height: 52px; width: auto; }
.footer-brand p{ font-size: 1.02rem; line-height: 1.75; color: #98A2CC; max-width: 22rem; }
.footer-preuve{
display: flex; align-items: center; gap: 11px;
margin-top: 22px; color: #98A2CC;
white-space: nowrap;
}
.footer-preuve strong{ color: #fff; font-family: var(--font-heading); font-weight: 800; }
.footer-social{ margin-top: 22px; }
.footer-social a{
width: 44px; height: 44px; border-radius: 12px;
border: 1px solid rgba(255,255,255,.16);
color: #C7CBFB;
display: inline-flex; align-items: center; justify-content: center;
transition: border-color .25s ease, color .25s ease, background .25s ease;
}
.footer-social a:hover{ border-color: var(--green); color: #fff; background: rgba(14,158,130,.16); }
/* --- Intitulés de colonne, soulignés --- */
.site-footer h4{
position: relative;
font-family: var(--font-heading);
font-size: 1rem; font-weight: 700;
letter-spacing: .1em; text-transform: uppercase;
color: #fff;
padding-bottom: 14px; margin-bottom: 22px;
}
.site-footer h4::after{
content: '';
position: absolute; left: 0; bottom: 0;
width: 34px; height: 2px; border-radius: 2px;
background: var(--green);
}
/* --- Liens de navigation, avec chevron --- */
.footer-col ul{ list-style: none; margin: 0; padding: 0; }
.footer-col li{ margin-bottom: 15px; }
.footer-col li:last-child{ margin-bottom: 0; }
.footer-col a{
display: flex; align-items: center; justify-content: space-between; gap: 10px;
font-size: 1rem; color: #B9C2E4;
transition: color .2s ease;
}
.footer-col a:hover{ color: #fff; }
.footer-chev{
color: var(--green); font-size: 1.2rem; line-height: 1;
transition: transform .2s ease;
}
.footer-col a:hover .footer-chev{ transform: translateX(3px); }
/* --- Carte Contact --- */
.footer-contact{
border: 1px solid rgba(255,255,255,.14);
border-radius: 18px;
padding: 26px 22px;
background: rgba(255,255,255,.035);
}
.footer-ligne{
display: flex; align-items: flex-start; gap: 12px;
margin-bottom: 15px; color: #B9C2E4;
transition: color .2s ease;
}
a.footer-ligne:hover{ color: #fff; }
.footer-ligne--fort{
font-family: var(--font-heading); font-weight: 800;
font-size: 1.18rem; color: #fff; align-items: center;
}
.footer-ligne--adresse{ line-height: 1.6; margin-bottom: 22px; font-size: .97rem; }
.footer-ic{ color: var(--green); flex: 0 0 auto; display: inline-flex; margin-top: 2px; }
.footer-ligne--fort .footer-ic{ margin-top: 0; }
.footer-cta{
display: flex; align-items: center; justify-content: center; gap: 9px;
border: 1px solid rgba(14,158,130,.55);
border-radius: 12px;
padding: 14px 14px;
white-space: nowrap;
font-family: var(--font-heading); font-weight: 700; font-size: 1rem;
color: var(--green-clair, #3FD9BC);
margin-bottom: 20px;
transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.footer-cta:hover{ background: var(--green); border-color: var(--green); color: #fff; }
.footer-gage{
display: flex; align-items: center; gap: 11px;
font-size: .97rem; color: #A7B0D6; margin-bottom: 11px;
white-space: nowrap;
}
.footer-gage:last-child{ margin-bottom: 0; }
.footer-drapeau{
width: 22px; height: 15px; border-radius: 3px; flex: 0 0 auto;
background: linear-gradient(90deg, #2A2586 33%, #fff 33% 66%, #C8102E 66%);
}
/* --- Barre du bas --- */
.footer-bottom{
display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
padding: 26px 0 34px;
border-top: 1px solid rgba(255,255,255,.11);
font-size: .99rem; color: #7E88B6;
}
.footer-bottom ul{
list-style: none; display: flex; margin-left: auto; padding: 0;
flex-wrap: wrap;
}
.footer-bottom li{ margin: 0; position: relative; padding: 0 18px; }
.footer-bottom li + li::before{
content: '';
position: absolute; left: 0; top: 50%;
width: 1px; height: 14px;
transform: translateY(-50%);
background: rgba(255,255,255,.16);
}
.footer-bottom li:last-child{ padding-right: 0; }
.footer-bottom a{ color: #7E88B6; font-size: .99rem; }
.footer-bottom a:hover{ color: #fff; }
@media (max-width: 1180px){
.footer-grid{ grid-template-columns: 1.4fr 1fr 1fr; }
.footer-contact{ grid-column: span 3; }
}
@media (max-width: 760px){
.footer-grid{ grid-template-columns: 1fr 1fr; gap: 34px; }
.footer-brand, .footer-contact{ grid-column: span 2; }
.footer-bottom ul{ margin-left: 0; }
.footer-bottom li{ padding-left: 0; }
.footer-bottom li + li::before{ display: none; }
.footer-bottom li{ padding-right: 18px; }
}
@media (prefers-reduced-motion: reduce){
.footer-col a .footer-chev{ transition: none; }
}
/* ================================================================== */
/* Fiche produit — gabarit single-logiciel.php */
/* */
/* Le vert de marque porte l'action sur ces pages : le violet reste */
/* une ponctuation, pas la couleur dominante. */
/* ================================================================== */
.btn-vert{
background: var(--green);
color: #fff;
box-shadow: 0 3px 10px rgba(14,158,130,.20);
}
.btn-vert:hover{ color: #fff; box-shadow: 0 10px 22px rgba(14,158,130,.30); }
.btn-fantome{
background: transparent;
color: var(--navy);
border-color: rgba(42,37,134,.30);
}
.btn-fantome:hover{ background: var(--navy); border-color: var(--navy); color: #fff; }
.prod-eyebrow{
display: inline-block;
font-family: var(--font-heading);
font-weight: 700;
font-size: 1rem;
letter-spacing: .13em;
text-transform: uppercase;
color: var(--green);
margin-bottom: 10px;
}
.prod-chapo{
font-size: 1.12rem;
line-height: 1.72;
color: var(--muted);
}
/* ------------------------------------------------------------------ */
/* Hero */
/* ------------------------------------------------------------------ */
.prod-hero{
position: relative;
overflow: clip;
background: linear-gradient(150deg, #F7FAFE 0%, #EEF3FC 52%, #E7EFF9 100%);
padding: 82px 0 88px;
}
/* Voile diagonal côté écran, pour détacher le visuel du fond. */
.prod-hero::before{
content: '';
position: absolute;
inset: 0 0 0 auto;
width: 56%;
background: linear-gradient(200deg, rgba(100,210,185,.16), rgba(74,84,214,.10));
clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
pointer-events: none;
}
.prod-hero .container{ position: relative; z-index: 1; }
.prod-hero__g{
display: grid;
/* « Voir DirIgami Facturation en action » est le libellé le plus long :
la colonne de texte est calée dessus pour que les deux actions
restent côte à côte quel que soit le produit. */
grid-template-columns: 1.17fr .83fr;
gap: 44px;
align-items: center;
}
.prod-hero h1{
font-size: clamp(2.1rem, 3.6vw, 2.85rem);
line-height: 1.14;
margin: 0 0 20px;
}
.prod-hero .prod-chapo{ max-width: 29rem; }
.prod-hero__act{
display: flex;
gap: 13px;
margin-top: 32px;
flex-wrap: wrap;
}
.prod-hero__act .btn{ padding: 14px 20px; font-size: .98rem; }
.prod-jouer i{
width: 26px; height: 26px;
border-radius: 50%;
background: var(--azure-soft);
color: var(--navy);
display: inline-flex; align-items: center; justify-content: center;
flex: 0 0 auto;
}
.prod-jouer i svg{ margin-left: 2px; }
.prod-hero__visuel{ position: relative; }
/*
* L'écran déborde à droite et s'incline : le produit continue hors cadre
* plutôt que d'être posé à plat.
*/
.prod-hero__ecran{
position: relative;
border-radius: 18px;
overflow: hidden;
border: 1px solid rgba(42,37,134,.12);
box-shadow: -38px 46px 88px -38px rgba(23,20,63,.55);
margin-right: -17%;
transform: perspective(2400px) rotateY(-11deg) rotateX(1.6deg) scale(1.04);
transform-origin: left center;
}
.prod-hero__ecran img{ display: block; width: 100%; height: auto; }
/* Le badge reste hors de l'élément incliné, sinon il suit la perspective. */
.prod-hero__badge{
position: absolute;
top: -42px; right: 3%;
z-index: 3;
display: inline-flex; align-items: center; gap: 9px;
background: var(--green);
color: #fff;
border-radius: 11px;
padding: 11px 16px;
font-family: var(--font-heading);
font-weight: 700;
font-size: 1rem;
box-shadow: 0 18px 34px -16px rgba(14,158,130,.7);
}
.prod-hero__badge svg{ width: 17px; height: 17px; flex: 0 0 auto; }
/* ------------------------------------------------------------------ */
/* Bandeau de réassurance */
/* ------------------------------------------------------------------ */
.prod-reassure{
border-bottom: 1px solid var(--line);
background: #fff;
padding: 24px 0;
}
.prod-reassure__g{
display: grid;
grid-template-columns: repeat(4, 1fr);
align-items: center;
}
.prod-reassure__i{
display: flex; align-items: center; gap: 12px;
justify-content: center;
font-size: 1.04rem;
color: var(--muted);
position: relative;
}
.prod-reassure__i + .prod-reassure__i::before{
content: '';
position: absolute; left: 0; top: 50%;
width: 1px; height: 26px;
transform: translateY(-50%);
background: var(--line);
}
.prod-reassure__i svg{ width: 22px; height: 22px; color: var(--green); flex: 0 0 auto; }
.prod-reassure__i strong{ color: var(--ink); font-family: var(--font-heading); font-weight: 800; }
.prod-drapeau{
width: 24px; height: 16px; border-radius: 3px; flex: 0 0 auto;
background: linear-gradient(90deg, #2A2586 33%, #fff 33% 66%, #C8102E 66%);
border: 1px solid var(--line);
}
/* ------------------------------------------------------------------ */
/* Convergence des sources */
/* ------------------------------------------------------------------ */
.prod-conv__g{
display: grid;
grid-template-columns: .82fr 1.18fr;
gap: 56px;
align-items: center;
}
.prod-schema{
display: grid;
grid-template-columns: 1fr 1.05fr 1fr;
gap: 22px;
align-items: center;
}
.prod-schema__col{ display: flex; flex-direction: column; gap: 14px; }
.prod-source, .prod-sortie{
border: 1px solid var(--line);
border-radius: 14px;
background: #fff;
padding: 17px 18px;
display: flex; align-items: center; gap: 11px;
min-height: 62px;
box-shadow: 0 2px 10px rgba(23,20,63,.04);
}
.prod-source img{ max-height: 24px; width: auto; }
.prod-source span{ font-weight: 600; color: var(--muted); }
.prod-sortie svg{ width: 19px; height: 19px; color: var(--green); flex: 0 0 auto; }
.prod-sortie strong{ font-family: var(--font-heading); font-size: 1.04rem; }
.prod-schema__coeur{
border: 1px solid rgba(14,158,130,.30);
border-radius: 18px;
background: linear-gradient(160deg, #fff, #F3FBF9);
padding: 26px 20px;
text-align: center;
box-shadow: 0 18px 38px -22px rgba(14,158,130,.45);
}
.prod-schema__pastille{
width: 52px; height: 52px;
border-radius: 15px;
background: rgba(14,158,130,.12);
color: var(--green);
display: inline-flex; align-items: center; justify-content: center;
margin-bottom: 12px;
}
.prod-schema__pastille svg{ width: 26px; height: 26px; }
.prod-schema__coeur strong{
display: block;
font-family: var(--font-heading);
font-size: 1.2rem; font-weight: 800;
color: var(--navy-ink);
}
.prod-schema__coeur > span{ font-size: .98rem; color: var(--muted); }
/* ------------------------------------------------------------------ */
/* L'essentiel, sur fond sombre */
/* ------------------------------------------------------------------ */
.prod-ess{
position: relative;
overflow: clip;
background: linear-gradient(155deg, var(--navy-deep), var(--navy-ink));
color: #C8CDEC;
}
.prod-ess::after{
content: '';
position: absolute; right: -8%; top: -25%;
width: 52%; aspect-ratio: 1; border-radius: 50%;
background: radial-gradient(circle, rgba(74,84,214,.32), transparent 64%);
pointer-events: none;
}
.prod-ess .container{ position: relative; z-index: 1; }
.prod-ess__tete{ max-width: 42rem; margin-bottom: 46px; }
.prod-ess__tete h2{ color: #fff; }
.prod-ess__tete p{ font-size: 1.12rem; line-height: 1.72; color: #AEB5DE; }
.prod-ess__g{
display: grid;
grid-template-columns: 1fr 1.5fr 1fr;
gap: 34px;
align-items: center;
}
.prod-ess__col{ display: flex; flex-direction: column; gap: 30px; }
.prod-atout h3{ color: #fff; font-size: 1.1rem; margin-bottom: 8px; }
.prod-atout p{ font-size: 1.01rem; line-height: 1.7; color: #A2AAD6; margin: 0; }
.prod-ess__ecran{
border-radius: 16px;
overflow: hidden;
border: 1px solid rgba(255,255,255,.14);
box-shadow: 0 42px 78px -34px rgba(0,0,0,.72);
}
.prod-ess__ecran img{ display: block; width: 100%; height: auto; }
/* ------------------------------------------------------------------ */
/* Blocs fonctionnels en alternance */
/* ------------------------------------------------------------------ */
.prod-bloc__g{
display: grid;
grid-template-columns: 1.08fr .92fr;
gap: 62px;
align-items: center;
}
.prod-bloc--image-droite .prod-bloc__visuel{ order: 2; }
.prod-bloc__visuel{
border-radius: 16px;
overflow: hidden;
border: 1px solid var(--line);
box-shadow: 0 34px 66px -34px rgba(23,20,63,.42);
}
.prod-bloc__visuel img{ display: block; width: 100%; height: auto; }
.prod-bloc__txt h2{ margin-bottom: 10px; }
.prod-bloc__chapo{
font-size: 1.12rem;
color: var(--muted);
margin-bottom: 24px;
}
.prod-check{ list-style: none; margin: 0; padding: 0; }
.prod-check li{
display: flex; align-items: flex-start; gap: 14px;
margin-bottom: 17px;
font-size: 1.06rem;
line-height: 1.62;
}
.prod-check li:last-child{ margin-bottom: 0; }
.prod-check svg{
width: 20px; height: 20px;
flex: 0 0 auto;
margin-top: 3px;
color: var(--green);
stroke-width: 2.2;
}
.prod-check--deux{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 17px 34px;
}
.prod-check--deux li{ margin-bottom: 0; }
/* ------------------------------------------------------------------ */
/* Couverture fonctionnelle */
/* ------------------------------------------------------------------ */
.prod-couv__g{
display: grid;
grid-template-columns: .86fr 1.14fr;
gap: 56px;
align-items: center;
}
/* ------------------------------------------------------------------ */
/* Types d'établissements */
/* ------------------------------------------------------------------ */
.prod-terrain{ padding: 64px 0; text-align: center; }
.prod-terrain__t{ margin-bottom: 28px; }
.prod-terrain__l{
display: flex; flex-wrap: wrap;
justify-content: center;
gap: 0;
}
.prod-terrain__l span{
position: relative;
padding: 4px 22px;
font-family: var(--font-heading);
font-weight: 700;
font-size: 1.06rem;
color: var(--navy-ink);
}
.prod-terrain__l span + span::before{
content: '';
position: absolute; left: 0; top: 50%;
width: 1px; height: 15px;
transform: translateY(-50%);
background: var(--azure-line);
}
.prod-terrain__n{
margin-top: 20px;
font-size: 1.02rem;
color: var(--muted);
}
/* ------------------------------------------------------------------ */
/* L'équipe */
/* ------------------------------------------------------------------ */
.prod-equipe__g{
display: grid;
grid-template-columns: .92fr 1.08fr;
gap: 56px;
align-items: center;
}
.prod-equipe__photo{
border-radius: 18px;
overflow: hidden;
box-shadow: 0 34px 66px -34px rgba(23,20,63,.44);
}
.prod-equipe__photo img{ display: block; width: 100%; height: auto; }
.prod-equipe__p{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 26px 20px;
margin: 30px 0 32px;
}
@media (max-width: 1100px) {
.prod-equipe__p{ grid-template-columns: repeat(2, 1fr); }
}
.prod-pilier svg{ width: 24px; height: 24px; color: var(--green); margin-bottom: 11px; }
.prod-pilier h3{ font-size: 1.06rem; margin-bottom: 6px; }
.prod-pilier p{ font-size: 1rem; line-height: 1.62; color: var(--muted); margin: 0; }
/* ------------------------------------------------------------------ */
/* Témoignage */
/* ------------------------------------------------------------------ */
.prod-temoin{
position: relative;
overflow: clip;
background: linear-gradient(155deg, var(--navy-deep), var(--navy-ink));
color: #C8CDEC;
padding: 84px 0;
}
.prod-temoin__g{
display: grid;
grid-template-columns: 1.55fr .45fr;
gap: 56px;
align-items: center;
}
.prod-temoin__guillemet{
display: block;
font-family: var(--font-heading);
font-size: 4.6rem;
line-height: .6;
color: var(--green-bright);
margin-bottom: 14px;
}
.prod-temoin blockquote{
margin: 0 0 26px;
font-family: var(--font-heading);
font-size: 1.5rem;
line-height: 1.5;
font-weight: 600;
color: #fff;
max-width: 44rem;
}
.prod-temoin__sig strong{
display: block;
font-family: var(--font-heading);
font-size: 1.16rem;
color: #fff;
}
.prod-temoin__sig span{ font-size: 1.02rem; color: #9AA2CF; }
.prod-temoin__chiffres{ display: flex; flex-direction: column; gap: 26px; }
.prod-temoin__chiffres strong{
display: block;
font-family: var(--font-heading);
font-size: 2.4rem; font-weight: 800;
color: var(--green-bright);
line-height: 1.1;
}
.prod-temoin__chiffres span{ font-size: 1.02rem; color: #A2AAD6; }
/* ------------------------------------------------------------------ */
/* Renvoi croisé */
/* ------------------------------------------------------------------ */
.prod-croise__g{
display: grid;
grid-template-columns: .88fr 1.12fr;
gap: 56px;
align-items: center;
}
.prod-croise .btn{ margin-top: 26px; }
.prod-croise__visuel{
border-radius: 16px;
overflow: hidden;
border: 1px solid var(--line);
box-shadow: 0 34px 66px -34px rgba(23,20,63,.42);
}
.prod-croise__visuel img{ display: block; width: 100%; height: auto; }
/* ------------------------------------------------------------------ */
/* Appel final — fond clair */
/* ------------------------------------------------------------------ */
.prod-final{
position: relative;
overflow: clip;
background: linear-gradient(168deg, #F4F7FD 0%, #EAF0FA 58%, #E4EDF8 100%);
padding: 96px 0 100px;
text-align: center;
}
.prod-final::before{
content: '';
position: absolute; inset: auto -10% -60% auto;
width: 60%; aspect-ratio: 1; border-radius: 50%;
background: radial-gradient(circle, rgba(14,158,130,.13), transparent 66%);
pointer-events: none;
}
.prod-final .container{ position: relative; z-index: 1; }
.prod-final h2{ font-size: clamp(1.8rem, 3.2vw, 2.5rem); line-height: 1.2; margin-bottom: 18px; }
.prod-final p{
font-size: 1.12rem; line-height: 1.72;
color: var(--muted);
max-width: 44rem;
margin: 0 auto 34px;
}
.prod-final__act{ display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
/* ------------------------------------------------------------------ */
/* Adaptations */
/* ------------------------------------------------------------------ */
@media (max-width: 1080px){
.prod-hero__g,
.prod-conv__g,
.prod-couv__g,
.prod-equipe__g,
.prod-croise__g,
.prod-bloc__g{ grid-template-columns: 1fr; gap: 40px; }
/* À plat, l'inclinaison et le débord n'ont plus de sens. */
.prod-hero__ecran{ margin-right: 0; transform: none; box-shadow: 0 28px 56px -30px rgba(23,20,63,.45); }
.prod-hero__badge{ top: -20px; right: 12px; }
.prod-bloc--image-droite .prod-bloc__visuel{ order: 0; }
.prod-ess__g{ grid-template-columns: 1fr; }
.prod-ess__col{ display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.prod-temoin__g{ grid-template-columns: 1fr; }
.prod-temoin__chiffres{ flex-direction: row; gap: 48px; }
}
@media (max-width: 760px){
.prod-reassure__g{ grid-template-columns: 1fr 1fr; gap: 18px 0; }
.prod-reassure__i:nth-child(3)::before{ display: none; }
.prod-schema{ grid-template-columns: 1fr; }
.prod-check--deux,
.prod-ess__col,
.prod-equipe__p{ grid-template-columns: 1fr; }
.prod-temoin blockquote{ font-size: 1.24rem; }
}
@media (prefers-reduced-motion: reduce){
.prod-hero__ecran{ transform: none; }
}
/* ================================================================== */
/* Recrutement — page d'atterrissage, archive et fiche d'offre */
/* ================================================================== */
.section-head--gauche{ text-align: left; margin-left: 0; max-width: 40rem; }
/* ------------------------------------------------------------------ */
/* Page d'atterrissage */
/* ------------------------------------------------------------------ */
.rh-hero{
position: relative;
overflow: clip;
background: linear-gradient(150deg, #F7FAFE 0%, #EEF3FC 52%, #E7EFF9 100%);
padding: 78px 0 84px;
}
.rh-hero::before{
content: '';
position: absolute; inset: auto -8% -55% auto;
width: 54%; aspect-ratio: 1; border-radius: 50%;
background: radial-gradient(circle, rgba(14,158,130,.14), transparent 66%);
pointer-events: none;
}
.rh-hero .container{ position: relative; z-index: 1; }
.rh-hero__g{
display: grid;
grid-template-columns: 1.06fr .94fr;
gap: 52px;
align-items: center;
}
.rh-hero h1{ font-size: clamp(2.1rem, 3.6vw, 2.8rem); line-height: 1.15; margin: 0 0 20px; }
.rh-hero .prod-chapo{ max-width: 32rem; }
.rh-hero__act{ display: flex; gap: 13px; margin-top: 32px; flex-wrap: wrap; }
.rh-hero__photo{
border-radius: 20px;
overflow: hidden;
box-shadow: 0 38px 72px -34px rgba(23,20,63,.46);
}
.rh-hero__photo img{ display: block; width: 100%; height: auto; }
/* --- Les quatre valeurs --- */
.rh-valeurs__g{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 28px;
margin-top: 44px;
}
.rh-valeur{
border: 1px solid var(--line);
border-radius: 18px;
background: #fff;
padding: 28px 26px;
box-shadow: 0 2px 12px rgba(23,20,63,.04);
transition: transform .25s ease, box-shadow .25s ease;
}
.rh-valeur:hover{ transform: translateY(-3px); box-shadow: 0 20px 40px -22px rgba(23,20,63,.28); }
.rh-valeur__ic{
width: 50px; height: 50px;
border-radius: 14px;
background: rgba(14,158,130,.10);
color: var(--green);
display: inline-flex; align-items: center; justify-content: center;
margin-bottom: 16px;
}
.rh-valeur__ic svg{ width: 24px; height: 24px; }
.rh-valeur h3{ font-size: 1.14rem; margin-bottom: 8px; }
.rh-valeur p{ font-size: 1.02rem; line-height: 1.66; color: var(--muted); margin: 0; }
/* --- Ce que nous offrons --- */
.rh-offrons{
display: grid;
grid-template-columns: .86fr 1.14fr;
gap: 56px;
align-items: center;
}
/* --- Le processus, en frise --- */
.rh-frise{
list-style: none;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
margin: 44px 0 0;
padding: 0;
counter-reset: none;
}
.rh-frise li{ position: relative; padding-top: 26px; }
/* Le trait qui relie les étapes, coupé après la dernière. */
.rh-frise li::before{
content: '';
position: absolute; top: 13px; left: 0; right: -32px;
height: 2px;
background: linear-gradient(90deg, var(--green) 0 22px, var(--azure-line) 22px);
}
.rh-frise li:last-child::before{ right: 0; }
.rh-frise li::after{
content: '';
position: absolute; top: 7px; left: 0;
width: 14px; height: 14px;
border-radius: 50%;
background: var(--green);
box-shadow: 0 0 0 4px rgba(14,158,130,.16);
}
.rh-frise__n{
display: block;
font-family: var(--font-heading);
font-size: .98rem; font-weight: 800;
color: var(--green);
letter-spacing: .08em;
margin-bottom: 8px;
}
.rh-frise h3{ font-size: 1.1rem; margin-bottom: 7px; }
.rh-frise p{ font-size: 1.01rem; line-height: 1.66; color: var(--muted); margin: 0; }
.rh-vide{
border: 1px dashed var(--azure-line);
border-radius: 16px;
padding: 34px;
text-align: center;
color: var(--muted);
font-size: 1.06rem;
background: #fff;
}
/* ------------------------------------------------------------------ */
/* Cartes d'offre */
/* ------------------------------------------------------------------ */
.offre-grille{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 26px;
}
.offre-carte-lien{
display: flex;
flex-direction: column;
border: 1px solid var(--line);
border-radius: 18px;
background: #fff;
padding: 28px 26px;
box-shadow: 0 2px 12px rgba(23,20,63,.04);
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.offre-carte-lien:hover{
transform: translateY(-3px);
border-color: rgba(14,158,130,.35);
box-shadow: 0 22px 44px -24px rgba(23,20,63,.30);
}
.offre-puce{
align-self: flex-start;
background: rgba(14,158,130,.10);
color: var(--green);
border-radius: 999px;
padding: 5px 14px;
font-family: var(--font-heading);
font-weight: 700;
font-size: 1rem;
margin-bottom: 14px;
}
.offre-carte-lien h3{ font-size: 1.24rem; line-height: 1.32; margin-bottom: 10px; }
.offre-carte-lien__res{
font-size: 1.02rem;
line-height: 1.66;
color: var(--muted);
margin: 0 0 18px;
}
.offre-carte-lien__meta{
list-style: none;
margin: 0 0 20px;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 8px 22px;
}
.offre-carte-lien__meta li{
display: flex; align-items: center; gap: 9px;
font-size: 1rem;
color: var(--muted);
}
.offre-carte-lien__meta svg{ width: 18px; height: 18px; color: var(--green); flex: 0 0 auto; }
.offre-carte-lien__cta{
margin-top: auto;
display: inline-flex; align-items: center; gap: 9px;
font-family: var(--font-heading);
font-weight: 700;
font-size: 1.02rem;
color: var(--navy);
}
.offre-carte-lien:hover .offre-carte-lien__cta span{ transform: translateX(3px); }
.offre-carte-lien__cta span{ transition: transform .2s ease; }
/* ------------------------------------------------------------------ */
/* Fiche d'une offre */
/* ------------------------------------------------------------------ */
.offre-hero{
background: linear-gradient(150deg, #F7FAFE 0%, #EEF3FC 60%, #E7EFF9 100%);
padding: 34px 0 62px;
}
.offre-hero h1{ font-size: clamp(1.9rem, 3.2vw, 2.5rem); line-height: 1.16; margin: 0 0 22px; max-width: 26ch; }
.offre-hero .prod-chapo{ max-width: 40rem; }
.offre-meta{
list-style: none;
display: flex; flex-wrap: wrap;
gap: 12px 14px;
margin: 0 0 28px;
padding: 0;
}
.offre-meta li{
display: inline-flex; align-items: center; gap: 9px;
background: #fff;
border: 1px solid var(--line);
border-radius: 999px;
padding: 8px 16px;
font-size: 1rem;
color: var(--ink);
}
.offre-meta svg{ width: 17px; height: 17px; color: var(--green); flex: 0 0 auto; }
.offre-hero__act{ display: flex; gap: 13px; flex-wrap: wrap; }
.offre-corps__g{
display: grid;
grid-template-columns: 1.55fr .45fr;
gap: 62px;
align-items: start;
}
/* --- Corps de l'annonce --- */
.offre-texte h2{
font-size: 1.55rem;
margin: 44px 0 16px;
padding-top: 26px;
border-top: 1px solid var(--line);
}
.offre-texte > :first-child{ margin-top: 0; }
.offre-texte h2:first-child{ border-top: none; padding-top: 0; margin-top: 0; }
.offre-texte h3{ font-size: 1.14rem; margin: 26px 0 8px; }
.offre-texte p{ font-size: 1.08rem; line-height: 1.75; margin: 0 0 16px; }
.offre-texte ul:not(.prod-check){ margin: 0 0 20px; padding-left: 0; list-style: none; }
.offre-texte ul:not(.prod-check) li{
position: relative;
padding-left: 28px;
margin-bottom: 12px;
font-size: 1.06rem;
line-height: 1.66;
}
.offre-texte ul:not(.prod-check) li::before{
content: '';
position: absolute; left: 4px; top: .62em;
width: 7px; height: 7px;
border-radius: 50%;
background: var(--green);
}
.offre-texte em{ color: var(--muted); }
/* --- Les étapes du recrutement, dans l'annonce --- */
.offre-etapes{
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 20px;
}
.offre-etapes li{
display: grid;
grid-template-columns: 54px 1fr;
gap: 18px;
align-items: start;
border: 1px solid var(--line);
border-radius: 16px;
padding: 20px 22px;
background: #fff;
}
.offre-etapes__n{
font-family: var(--font-heading);
font-weight: 800;
font-size: 1.2rem;
color: var(--green);
background: rgba(14,158,130,.10);
border-radius: 12px;
width: 54px; height: 54px;
display: inline-flex; align-items: center; justify-content: center;
}
.offre-etapes h3{ font-size: 1.1rem; margin: 4px 0 6px; }
.offre-etapes p{ font-size: 1.02rem; line-height: 1.66; color: var(--muted); margin: 0; }
/* --- Résumé qui suit le défilement --- */
.offre-resume{
position: sticky;
top: 104px;
display: grid;
gap: 20px;
}
.offre-carte{
border: 1px solid var(--line);
border-radius: 18px;
background: #fff;
padding: 28px 26px;
box-shadow: 0 18px 40px -26px rgba(23,20,63,.28);
}
.offre-carte--doux{ background: var(--soft); box-shadow: none; }
.offre-carte h2{ font-size: 1.16rem; margin-bottom: 18px; }
.offre-carte dl{ margin: 0 0 22px; }
.offre-carte dt{
font-size: .98rem;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--muted);
font-weight: 700;
font-family: var(--font-heading);
}
.offre-carte dd{
margin: 3px 0 15px;
font-size: 1.04rem;
line-height: 1.55;
color: var(--ink);
}
.offre-carte dd:last-of-type{ margin-bottom: 0; }
.offre-carte .btn{ width: 100%; justify-content: center; }
.offre-carte__note{
font-size: .99rem;
line-height: 1.6;
color: var(--muted);
margin: 14px 0 0;
}
.offre-carte--doux p{ font-size: 1.02rem; line-height: 1.66; color: var(--muted); margin: 0 0 18px; }
/* ------------------------------------------------------------------ */
/* Adaptations */
/* ------------------------------------------------------------------ */
@media (max-width: 1080px){
.rh-hero__g,
.rh-offrons{ grid-template-columns: 1fr; gap: 40px; }
.rh-valeurs__g{ grid-template-columns: 1fr 1fr; }
.rh-frise{ grid-template-columns: 1fr 1fr; gap: 34px 32px; }
/* Sur deux rangées, le trait ne doit plus courir jusqu'au bord. */
.rh-frise li:nth-child(2n)::before{ right: 0; }
.offre-corps__g{ grid-template-columns: 1fr; gap: 44px; }
.offre-resume{ position: static; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px){
.rh-valeurs__g,
.rh-frise,
.offre-resume{ grid-template-columns: 1fr; }
.rh-frise li::before{ right: 0; }
.offre-etapes li{ grid-template-columns: 1fr; gap: 12px; }
}
/* ================================================================== */
/* Hub Nos logiciels — comparatif des deux solutions */
/* ================================================================== */
.hub-duo{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
margin-top: 44px;
}
.hub-carte{
display: flex;
flex-direction: column;
border: 1px solid var(--line);
border-radius: 20px;
background: #fff;
overflow: hidden;
box-shadow: 0 2px 14px rgba(23,20,63,.05);
transition: transform .25s ease, box-shadow .25s ease;
}
.hub-carte:hover{ transform: translateY(-3px); box-shadow: 0 26px 52px -28px rgba(23,20,63,.32); }
.hub-carte__ecran{ border-bottom: 1px solid var(--line); background: var(--soft); }
.hub-carte__ecran img{ display: block; width: 100%; height: auto; }
.hub-carte__corps{ padding: 30px 28px 32px; display: flex; flex-direction: column; flex: 1; }
.hub-carte h3{ font-size: 1.4rem; margin-bottom: 12px; }
.hub-carte__q{
font-family: var(--font-heading);
font-size: 1.08rem;
line-height: 1.55;
font-weight: 600;
color: var(--green);
margin: 0 0 16px;
}
.hub-carte__t{ font-size: 1.05rem; line-height: 1.7; color: var(--muted); margin: 0 0 22px; }
.hub-carte .prod-check{ margin-bottom: 24px; }
.hub-carte .prod-check li{ font-size: 1.02rem; margin-bottom: 13px; }
.hub-carte__pour{
margin: 0 0 24px auto 0;
margin-top: auto;
padding-top: 20px;
border-top: 1px solid var(--line);
font-size: 1.02rem;
color: var(--ink);
}
.hub-carte__pour span{
display: block;
font-family: var(--font-heading);
font-size: .99rem;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--muted);
font-weight: 700;
margin-bottom: 4px;
}
.hub-carte .btn{ align-self: flex-start; margin-top: 22px; }
.hub-liant{
max-width: 52rem;
margin: 40px auto 0;
text-align: center;
font-size: 1.12rem;
line-height: 1.72;
color: var(--muted);
}
/* --- Socle commun, sur le fond sombre --- */
.hub-socle{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
}
.hub-socle__i svg{ width: 26px; height: 26px; color: var(--green-bright); margin-bottom: 14px; }
.hub-socle__i h3{ color: #fff; font-size: 1.1rem; margin-bottom: 9px; }
.hub-socle__i p{ font-size: 1.01rem; line-height: 1.68; color: #A2AAD6; margin: 0 0 14px; }
.hub-socle__i a{
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--font-heading); font-weight: 700; font-size: 1rem;
color: var(--green-bright);
}
.hub-socle__i a span{ transition: transform .2s ease; }
.hub-socle__i a:hover span{ transform: translateX(3px); }
/* --- Raccourcis vers les pages cadres --- */
.hub-cadres{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 16px;
margin-top: 40px;
}
/* 8 cadres : auto-fit calait 5 colonnes et laissait la dernière ligne à 3,
avec deux emplacements vides visibles. 4 colonnes tombent juste sur 2 lignes pleines. */
@media (min-width: 900px) {
.hub-cadres{ grid-template-columns: repeat(4, 1fr); }
}
.hub-cadre{
display: flex; align-items: center; gap: 13px;
border: 1px solid var(--line);
border-radius: 14px;
background: #fff;
padding: 18px 20px;
font-family: var(--font-heading);
font-weight: 700;
font-size: 1.04rem;
color: var(--navy-ink);
transition: border-color .2s ease, transform .2s ease;
}
.hub-cadre:hover{ border-color: rgba(14,158,130,.4); transform: translateY(-2px); color: var(--navy); }
.hub-cadre svg{ width: 20px; height: 20px; color: var(--green); flex: 0 0 auto; }
@media (max-width: 1080px){
.hub-duo{ grid-template-columns: 1fr; }
.hub-socle{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px){
.hub-socle{ grid-template-columns: 1fr; }
}
/* ================================================================== */
/* Page Contact */
/* */
/* Les deux grilles étaient posées en style inline dans le gabarit : */
/* aucune requête média ne pouvait les atteindre, d'où 238 px de */
/* débordement sur téléphone. */
/* ================================================================== */
.contact-g{
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 56px;
}
.contact-valeurs{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 40px;
}
.contact-valeur__n{
font-size: 1rem;
font-weight: 700;
letter-spacing: .04em;
color: #C7CBFB;
}
@media (max-width: 980px){
.contact-g{ grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 560px){
.contact-valeurs{ grid-template-columns: 1fr 1fr; gap: 20px 16px; }
}
/* ================================================================== */
/* Cartes partenaires */
/* ================================================================== */
.carte-partenaire{
display: flex;
flex-direction: column;
border: 1px solid var(--line);
border-radius: 18px;
background: #fff;
padding: 28px 26px;
box-shadow: 0 2px 12px rgba(23,20,63,.04);
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.carte-partenaire:hover{
transform: translateY(-3px);
border-color: rgba(14,158,130,.35);
box-shadow: 0 22px 44px -24px rgba(23,20,63,.30);
}
.carte-partenaire h3{ font-size: 1.24rem; margin-bottom: 12px; }
.carte-partenaire p{
font-size: 1.02rem;
line-height: 1.68;
color: var(--muted);
margin: 0 0 20px;
}
.carte-partenaire__cta{
margin-top: auto;
display: inline-flex; align-items: center; gap: 9px;
font-family: var(--font-heading);
font-weight: 700;
font-size: 1.02rem;
color: var(--navy);
}
.carte-partenaire__cta span{ transition: transform .2s ease; }
.carte-partenaire:hover .carte-partenaire__cta span{ transform: translateX(3px); }
/*
* Sommaire flottant : il chevauchait la colonne de lecture dès que la
* fenêtre passait sous 1500 px, et recouvrait le bas du bandeau d'ouverture.
* Il ne s'affiche qu'à partir de la largeur où il a réellement sa place.
*/
@media (max-width: 1500px){
.sommaire-flottant{ display: none; }
}
/* La colonne de lecture est décalée de 68 px : sur mobile, cette marge
ampute le texte sans rien apporter. */
@media (max-width: 700px){
.page-chapo,
.section-composee__corps{ padding-left: 0; }
}
/* Le sommaire n'entre qu'une fois la lecture commencée (classe posée en JS). */
.sommaire-flottant{
opacity: 0;
visibility: hidden;
transform: translateY(-50%) translateX(-12px);
transition: opacity .3s ease, transform .3s ease, visibility .3s;
}
.sommaire-flottant.est-visible{
opacity: 1;
visibility: visible;
transform: translateY(-50%) translateX(0);
}
@media (prefers-reduced-motion: reduce){
.sommaire-flottant{ transition: none; }
}
/* ================================================================== */
/* Hero d'accueil en pleine page */
/* */
/* La hauteur d'écran moins l'en-tête, avec un plancher en rem : sur */
/* un portable en paysage, 100vh écrase le contenu. */
/* ================================================================== */
.hero--plein{
position: relative;
display: flex;
align-items: center;
min-height: min(100vh - 84px, 62rem);
padding: 72px 0 96px;
overflow: clip;
}
.hero--plein .container{ width: 100%; }
.hero--plein h1{
font-size: clamp(2.2rem, 4.4vw, 3.6rem);
line-height: 1.08;
margin-bottom: 22px;
}
.hero--plein .grille-hero{ grid-template-columns: .92fr 1.18fr; gap: 64px; }
/* Repère de défilement, ancré en bas de la section. */
.hero__suite{
position: absolute;
left: 50%; bottom: 26px;
transform: translateX(-50%);
display: inline-flex; flex-direction: column; align-items: center; gap: 6px;
font-family: var(--font-heading);
font-weight: 700;
font-size: 1rem;
color: var(--muted);
z-index: 2;
}
.hero__suite:hover{ color: var(--navy); }
.hero__suite svg{ animation: heroSuite 2.4s ease-in-out infinite; }
@keyframes heroSuite{
0%, 100% { transform: translateY(0); }
50% { transform: translateY(5px); }
}
/*
* Sur un écran de portable (768 px de haut, très répandu), la pleine
* page pousse les boutons sous la ligne de flottaison. Mesuré : à
* partir de 860 px de haut le hero tient, en dessous on laisse le
* contenu dicter la hauteur.
*/
@media (max-height: 859px){
.hero--plein{ min-height: 0; padding: 34px 0 44px; }
/* Le titre passe à trois lignes : à 58 px il mange à lui seul
200 px de haut, et les boutons sortent de l'écran. */
.hero--plein h1{ font-size: clamp(1.9rem, 3.1vw, 2.7rem); margin-bottom: 16px; }
.hero--plein .grille-hero{ gap: 44px; }
.hero--plein p{ font-size: 1.06rem !important; }
.hero__suite{ display: none; }
}
@media (max-width: 1100px){
.hero--plein{ min-height: 0; padding: 56px 0 64px; }
.hero--plein .grille-hero{ grid-template-columns: 1fr; gap: 40px; }
.hero__suite{ display: none; }
}
@media (prefers-reduced-motion: reduce){
.hero__suite svg{ animation: none; }
}
/* Photos de terrain, sous les types d'établissements. */
.terrain-photos{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
gap: 22px;
margin-top: 44px;
}
.terrain-photos figure{
margin: 0;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 20px 42px -26px rgba(23,20,63,.38);
aspect-ratio: 4 / 3;
}
.terrain-photos img{ display: block; width: 100%; height: 100%; object-fit: cover; }
/* ================================================================== */
/* Hero d'accueil : photo en fond, écran du logiciel devant */
/* */
/* Incruster le tableau de bord sur l'écran de la photo a été essayé */
/* et abandonné : à 130 px de large dans l'image, l'interface n'était */
/* plus lisible. Les deux vivent donc côte à côte, chacun net. */
/* ================================================================== */
.hero--plein{ background: var(--navy-ink); }
.hero__fond{
position: absolute;
inset: 0;
width: 100%; height: 100%;
object-fit: cover;
object-position: 62% center;
z-index: 0;
}
/* Voile plus dense à gauche, là où se pose le texte. */
.hero__voile{
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(100deg, rgba(23,20,63,.95) 0%, rgba(23,20,63,.88) 30%, rgba(23,20,63,.52) 52%, rgba(23,20,63,.20) 78%, rgba(23,20,63,.14) 100%),
linear-gradient(180deg, rgba(23,20,63,.42) 0%, transparent 26%);
}
.hero--plein .container{ position: relative; z-index: 2; }
.hero--plein .eyebrow{ background: rgba(255,255,255,.14); color: #fff; }
.hero--plein h1{ color: #fff; }
.hero--plein p{ color: #C8CDEC; }
.hero--plein .btn-outline{ background: transparent; color: #fff; border-color: rgba(255,255,255,.44); }
.hero--plein .btn-outline:hover{ background: rgba(255,255,255,.14); border-color: #fff; color: #fff; }
/* Le cadre navigateur se détache sur la photo. */
.hero--plein .browser-frame{ box-shadow: 0 48px 96px -40px rgba(0,0,0,.72); }
.hero__suite{ color: #A9B0DA; }
.hero__suite:hover{ color: #fff; }
/*
* Le cadre du logiciel couvrait toute la moitié droite et masquait les
* personnes. Il est resserré et décalé vers la gauche pour qu'une bande
* de photo reste visible à droite.
*/
/* Cadrée en min-width : posée sans condition, cette règle écrasait le
passage en une colonne et comprimait le texte à 180 px sur téléphone. */
@media (min-width: 1101px){
.hero--plein .grille-hero{ grid-template-columns: 1fr 1fr; }
/* Le cadre s'arrête aux trois quarts de sa colonne : le dernier quart
de l'écran laisse voir la scène, sinon la photo ne sert à rien. */
.hero--plein .browser-frame{ max-width: 76%; }
.hero__fond{ object-position: 62% center; }
}
@media (max-width: 1100px){
.hero--plein .browser-frame{ max-width: 100%; }
.hero__fond{ object-position: 58% center; }
}
/*
* Sur téléphone, le titre occupait 230 px à lui seul et les boutons
* tombaient 100 px sous le pli. Mesuré à 390 px de large : à 1,85 rem
* le titre tient sur cinq lignes et l'appel à l'action reste visible.
*/
@media (max-width: 560px){
.hero--plein{ padding: 34px 0 44px; }
.hero--plein h1{ font-size: 1.85rem; line-height: 1.14; margin-bottom: 16px; }
.hero--plein p{ font-size: 1.02rem !important; }
.hero--plein .grille-hero{ gap: 30px; }
.hero--plein .btn{ padding: 13px 20px; }
}
/* ================================================================== */
/* Notre histoire */
/* ================================================================== */
.histoire-genese{
display: grid;
grid-template-columns: 1.1fr .9fr;
gap: 64px;
align-items: center;
}
.histoire-genese h2{ margin: 10px 0 18px; }
.histoire-genese p{ font-size: 1.08rem; line-height: 1.75; }
.histoire-citation{
margin: 0;
border: 1px solid rgba(14,158,130,.28);
border-radius: 20px;
background: linear-gradient(160deg, #fff, #F3FBF9);
padding: 34px 32px;
box-shadow: 0 22px 46px -30px rgba(14,158,130,.4);
}
.histoire-citation > span{
display: block;
font-family: var(--font-heading);
font-size: 3.6rem;
line-height: .5;
color: var(--green);
margin-bottom: 14px;
}
.histoire-citation p{
font-family: var(--font-heading);
font-size: 1.22rem;
line-height: 1.55;
font-weight: 600;
color: var(--navy-ink);
margin: 0 0 16px;
}
.histoire-citation footer{ color: var(--muted); font-size: 1rem; }
/* --- La frise : ligne centrale, cartes alternées ------------------- */
.frise-histoire{
position: relative;
list-style: none;
max-width: 980px;
margin: 48px auto 0;
padding: 8px 0 8px;
}
.frise-histoire::before{
content: '';
position: absolute;
left: 50%; top: 0; bottom: 0;
width: 2px;
transform: translateX(-50%);
background: linear-gradient(180deg, rgba(14,158,130,.0), rgba(14,158,130,.45) 6%, rgba(14,158,130,.45) 94%, rgba(14,158,130,0));
}
.frise-histoire li{
position: relative;
width: calc(50% - 44px);
margin-bottom: 34px;
}
.frise-histoire li:last-child{ margin-bottom: 0; }
.frise-histoire li:nth-child(odd){ margin-right: auto; text-align: right; }
.frise-histoire li:nth-child(even){ margin-left: auto; }
.frise-histoire__annee{
position: absolute;
top: 0;
font-family: var(--font-heading);
font-weight: 800;
font-size: 1.05rem;
color: #fff;
background: var(--green);
border-radius: 999px;
padding: 7px 16px;
box-shadow: 0 0 0 5px rgba(14,158,130,.15);
z-index: 1;
}
.frise-histoire li:nth-child(odd) .frise-histoire__annee{ right: -44px; transform: translateX(50%); }
.frise-histoire li:nth-child(even) .frise-histoire__annee{ left: -44px; transform: translateX(-50%); }
.frise-histoire__carte{
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px 24px;
box-shadow: 0 14px 32px -22px rgba(23,20,63,.25);
margin-top: 16px;
}
.frise-histoire__carte p{ margin: 0; font-size: 1.02rem; line-height: 1.68; }
.frise-histoire__carte p + p{ margin-top: 10px; }
@media (max-width: 820px){
.frise-histoire::before{ left: 15px; transform: none; }
.frise-histoire li,
.frise-histoire li:nth-child(odd),
.frise-histoire li:nth-child(even){
width: auto;
margin-left: 52px;
margin-right: 0;
text-align: left;
}
.frise-histoire li:nth-child(odd) .frise-histoire__annee,
.frise-histoire li:nth-child(even) .frise-histoire__annee{
left: -52px; right: auto; transform: translateX(-50%) translateX(15px);
}
.histoire-genese{ grid-template-columns: 1fr; gap: 36px; }
}
.histoire-slogan{
max-width: 46rem;
margin: 40px auto 0;
text-align: center;
font-size: 1.08rem;
color: var(--muted);
}
.histoire-methode{
display: grid;
grid-template-columns: .8fr 1.2fr;
gap: 56px;
align-items: start;
}
@media (max-width: 980px){
.histoire-methode{ grid-template-columns: 1fr; gap: 36px; }
}
/* --- Bandeau des garanties ----------------------------------------- */
.certifs__g{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
gap: 26px;
}
.certifs__i{
border: 1px solid var(--line);
border-radius: 18px;
background: #fff;
padding: 26px 24px;
box-shadow: 0 2px 12px rgba(23,20,63,.04);
}
.certifs__i svg{ width: 26px; height: 26px; color: var(--green); margin-bottom: 12px; }
.certifs__i .prod-drapeau{ margin-bottom: 14px; display: block; }
.certifs__i h3{ font-size: 1.08rem; margin-bottom: 7px; }
.certifs__i p{ font-size: 1rem; line-height: 1.62; color: var(--muted); margin: 0; }
/* ================================================================== */
/* On-premise et Cloud */
/* ================================================================== */
.modes__g{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
gap: 28px;
align-items: stretch;
margin-top: 44px;
}
.modes__carte{
position: relative;
display: flex;
flex-direction: column;
border: 1px solid var(--line);
border-radius: 20px;
background: #fff;
padding: 32px 30px;
box-shadow: 0 2px 12px rgba(23,20,63,.04);
}
.modes__carte--mise{
border-color: rgba(14,158,130,.4);
box-shadow: 0 26px 52px -30px rgba(14,158,130,.45);
}
.modes__badge{
position: absolute;
top: -14px; left: 30px;
background: var(--green);
color: #fff;
font-family: var(--font-heading);
font-weight: 700;
font-size: .98rem;
border-radius: 999px;
padding: 5px 15px;
}
.modes__carte h3{ font-size: 1.3rem; margin-bottom: 4px; }
.modes__mot{
font-family: var(--font-heading);
font-weight: 700;
color: var(--green);
font-size: 1.02rem;
letter-spacing: .06em;
text-transform: uppercase;
margin: 0 0 14px;
}
.modes__pour{ font-size: 1.02rem; line-height: 1.66; color: var(--muted); margin: 0 0 20px; }
.modes__carte .prod-check{ margin-top: auto; }
.modes__carte .prod-check li{ font-size: 1rem; margin-bottom: 12px; }
.modes__reversible{
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin: 36px auto 0;
max-width: 46rem;
font-size: 1.04rem;
color: var(--muted);
}
.modes__reversible svg{ width: 20px; height: 20px; color: var(--green); flex: 0 0 auto; }
/* --- Tableau comparatif -------------------------------------------- */
.tableau-modes__cadre{
max-width: 980px;
margin: 44px auto 0;
border: 1px solid var(--line);
border-radius: 18px;
background: #fff;
overflow-x: auto;
box-shadow: 0 18px 40px -28px rgba(23,20,63,.3);
}
.tableau-modes{
width: 100%;
border-collapse: collapse;
font-size: 1.02rem;
min-width: 640px;
}
.tableau-modes th,
.tableau-modes td{
padding: 15px 20px;
text-align: left;
border-bottom: 1px solid var(--line);
}
.tableau-modes thead th{
font-family: var(--font-heading);
font-size: 1rem;
color: var(--navy-ink);
background: var(--soft);
}
.tableau-modes tbody th{
font-family: var(--font-heading);
font-weight: 700;
font-size: 1rem;
color: var(--navy-ink);
background: #FAFBFE;
width: 26%;
}
.tableau-modes tbody tr:last-child th,
.tableau-modes tbody tr:last-child td{ border-bottom: none; }
.tableau-modes__mise{
background: rgba(14,158,130,.07);
font-weight: 600;
color: var(--navy-ink);
}
.tableau-modes thead .tableau-modes__mise{ color: var(--green); }
.cloud-securite{
display: grid;
grid-template-columns: 1.1fr .9fr;
gap: 60px;
align-items: center;
}
.cloud-securite__photo{
margin: 0;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 34px 66px -34px rgba(23,20,63,.44);
}
.cloud-securite__photo img{ display: block; width: 100%; height: auto; }
@media (max-width: 980px){
.cloud-securite{ grid-template-columns: 1fr; gap: 36px; }
}
/* ================================================================== */
/* Contact */
/* ================================================================== */
.contact-portes{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
gap: 24px;
}
.contact-porte{
display: flex;
flex-direction: column;
border: 1px solid var(--line);
border-radius: 18px;
background: #fff;
padding: 28px 26px;
box-shadow: 0 2px 12px rgba(23,20,63,.04);
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.contact-porte:hover{
transform: translateY(-3px);
border-color: rgba(14,158,130,.4);
box-shadow: 0 22px 44px -24px rgba(23,20,63,.3);
}
.contact-porte svg{ width: 26px; height: 26px; color: var(--green); margin-bottom: 14px; }
.contact-porte h3{ font-size: 1.14rem; margin-bottom: 7px; }
.contact-porte p{ font-size: 1rem; line-height: 1.62; color: var(--muted); margin: 0 0 18px; }
.contact-porte > span{
margin-top: auto;
font-family: var(--font-heading);
font-weight: 700;
font-size: 1rem;
color: var(--navy);
}
.contact-porte > span span{ transition: transform .2s ease; display: inline-block; }
.contact-porte:hover > span span{ transform: translateX(3px); }
.contact-duo{
display: grid;
grid-template-columns: .9fr 1.1fr;
gap: 56px;
align-items: start;
}
.contact-coordonnees h2{ margin-bottom: 10px; }
.contact-canaux{ display: grid; gap: 16px; margin: 28px 0; }
.contact-canal{
display: flex;
align-items: center;
gap: 16px;
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
padding: 18px 20px;
color: var(--ink);
transition: border-color .2s ease;
}
a.contact-canal:hover{ border-color: rgba(14,158,130,.45); }
.contact-canal svg{ width: 24px; height: 24px; color: var(--green); flex: 0 0 auto; }
.contact-canal span{
display: block;
font-size: .99rem;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--muted);
font-family: var(--font-heading);
font-weight: 700;
}
.contact-canal strong{ font-size: 1.08rem; line-height: 1.45; }
.contact-photo{
margin: 0;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 24px 48px -30px rgba(23,20,63,.4);
}
.contact-photo img{ display: block; width: 100%; height: auto; }
/* --- Formulaire ----------------------------------------------------- */
.contact-formulaire{
background: #fff;
border: 1px solid var(--line);
border-radius: 20px;
padding: 36px 34px;
box-shadow: 0 24px 52px -32px rgba(23,20,63,.35);
}
.contact-formulaire h2{ font-size: 1.5rem; margin-bottom: 22px; }
.contact-champs{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 18px;
}
.contact-formulaire p{ margin: 0 0 18px; }
.contact-formulaire label{
display: block;
font-family: var(--font-heading);
font-weight: 700;
font-size: 1rem;
color: var(--navy-ink);
margin-bottom: 7px;
}
.contact-formulaire label span{ color: var(--green); }
.contact-formulaire input,
.contact-formulaire textarea{
width: 100%;
padding: 13px 15px;
border: 1px solid var(--azure-line);
border-radius: 11px;
font-size: 1rem;
font-family: var(--font-body);
color: var(--ink);
background: #fff;
transition: border-color .2s ease, box-shadow .2s ease;
}
.contact-formulaire input:focus,
.contact-formulaire textarea:focus{
outline: none;
border-color: var(--green);
box-shadow: 0 0 0 3px rgba(14,158,130,.18);
}
.contact-formulaire .btn{ width: 100%; justify-content: center; }
.contact-note{
margin: 14px 0 0 !important;
font-size: .99rem;
color: var(--muted);
text-align: center;
}
.contact-erreur{
background: #FDECEC;
color: #A93226;
border-radius: 11px;
padding: 13px 16px;
font-size: 1rem;
}
.contact-succes{ text-align: center; padding: 26px 0; }
.contact-succes svg{
width: 46px; height: 46px;
color: var(--green);
background: rgba(14,158,130,.12);
border-radius: 50%;
padding: 10px;
margin-bottom: 16px;
}
.contact-succes h2{ margin-bottom: 8px; }
.contact-succes p{ color: var(--muted); }
@media (max-width: 980px){
.contact-duo{ grid-template-columns: 1fr; gap: 40px; }
.contact-champs{ grid-template-columns: 1fr; gap: 0; }
}
/* ================================================================== */
/* Fiche d'accès aux documents (demande client du 11/08) */
/* ================================================================== */
/* display:flex écraserait l'attribut hidden : la fenêtre invisible
couvrirait la page et bloquerait tous les clics. */
.doc-gate[hidden]{ display: none; }
.doc-gate{
position: fixed;
inset: 0;
z-index: 2000;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
background: rgba(23,20,63,.55);
backdrop-filter: blur(3px);
}
.doc-gate__carte{
position: relative;
width: min(460px, 100%);
max-height: calc(100vh - 40px);
overflow-y: auto;
background: #fff;
border-radius: 20px;
padding: 34px 32px;
box-shadow: 0 40px 90px -30px rgba(0,0,0,.5);
}
.doc-gate__carte h2{ font-size: 1.4rem; margin-bottom: 8px; }
.doc-gate__carte > div > p,
.doc-gate__carte > p{ color: var(--muted); font-size: 1.02rem; margin: 0 0 20px; }
.doc-gate__carte form p{ margin: 0 0 15px; }
.doc-gate__carte label{
display: block;
font-family: var(--font-heading);
font-weight: 700;
font-size: 1rem;
color: var(--navy-ink);
margin-bottom: 6px;
}
.doc-gate__carte label span{ color: var(--green); }
.doc-gate__carte input{
width: 100%;
padding: 12px 14px;
border: 1px solid var(--azure-line);
border-radius: 11px;
font-size: 1rem;
font-family: var(--font-body);
}
.doc-gate__carte input:focus{
outline: none;
border-color: var(--green);
box-shadow: 0 0 0 3px rgba(14,158,130,.18);
}
.doc-gate__carte .btn{ width: 100%; justify-content: center; }
.doc-gate__note{ font-size: .99rem !important; text-align: center; margin: 12px 0 0 !important; }
.doc-gate__fermer{
position: absolute;
top: 14px; right: 16px;
width: 40px; height: 40px;
border: none;
background: var(--soft);
border-radius: 50%;
font-size: 1.5rem;
line-height: 1;
color: var(--muted);
cursor: pointer;
}
.doc-gate__fermer:hover{ color: var(--navy-ink); }
/*
* Sur le hub Nos logiciels, l'écran incliné et coupé à droite n'a pas la
* mise en scène des fiches produit (badge, débord voulu) : il semblait
* juste tordu. Il se présente à plat, entier, dans son cadre.
*/
.prod-hero--plat .prod-hero__ecran{
transform: none;
margin-right: 0;
border-radius: 16px;
box-shadow: 0 38px 72px -34px rgba(23,20,63,.45);
}
/*
* Le sommaire flottant chevauchait la colonne de titres de la mise en
* page éditoriale, qui remplit désormais son rôle : les intitulés de
* section suivent la lecture. Il est retiré.
*/
.sommaire-flottant{ display: none !important; }
/* Le filigrane chevron des bandes alternées bavait derrière la colonne
de titres de la mise en page éditoriale : une tache grise. */
.section-composee.section-alt::after{ display: none; }
/* --- Liens de fichiers : de vrais boutons de téléchargement ---------- */
.lien-fichier{
display: inline-flex;
align-items: center;
gap: 10px;
border: 1px solid var(--azure-line);
border-radius: 12px;
background: #fff;
padding: 11px 16px;
margin: 3px 0;
font-family: var(--font-heading);
font-weight: 700 !important;
font-size: 1rem;
color: var(--navy) !important;
text-decoration: none !important;
transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.lien-fichier::before{
content: '';
flex: 0 0 auto;
width: 18px; height: 18px;
background: currentColor;
-webkit-mask: url('data:image/svg+xml,') center / contain no-repeat;
mask: url('data:image/svg+xml,') center / contain no-repeat;
color: var(--green);
}
.lien-fichier:hover{
border-color: rgba(14,158,130,.5);
transform: translateY(-1px);
box-shadow: 0 10px 22px -14px rgba(23,20,63,.35);
}
.grille-check .lien-fichier{ border: none; padding: 0; margin: 0; background: transparent; }
/* --- Hub Téléchargement : cartes de cadres décrites ------------------ */
.cadres-hub{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
gap: 24px;
}
/* Comme la maquette : 4 cartes en haut, 3 en bas centrées sur grand écran. */
@media (min-width: 1101px) {
.dirips-2026 .cadres-hub{ grid-template-columns: repeat(8, 1fr); }
.dirips-2026 .cadres-hub .cadre-carte{ grid-column: span 2; }
.dirips-2026 .cadres-hub .cadre-carte:nth-child(5){ grid-column: 2 / span 2; }
}
.bandeau-calendrier {
display: flex;
align-items: center;
gap: 28px;
margin-top: 34px;
padding: 30px 34px;
background: #fff;
border: 1px solid var(--line);
border-radius: 20px;
box-shadow: 0 14px 34px rgba(20, 27, 77, .07);
}
.bandeau-calendrier__badge {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 72px;
height: 72px;
border-radius: 20px;
background: var(--green);
color: #fff;
}
.bandeau-calendrier__badge svg { width: 34px; height: 34px; }
.bandeau-calendrier__titre { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.bandeau-calendrier__titre h2 { font-size: 1.3rem; margin: 0; }
.bandeau-calendrier__num {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 34px;
height: 34px;
border-radius: 10px;
background: var(--green);
color: #fff;
font-family: var(--font-heading);
font-weight: 700;
font-size: 1rem;
}
.bandeau-calendrier__texte p { margin: 0 0 12px; color: var(--muted); }
.bandeau-calendrier__apercu {
flex-shrink: 0;
margin-left: auto;
width: 190px;
height: auto;
border-radius: 12px;
border: 1px solid var(--line);
}
@media (max-width: 860px) {
.bandeau-calendrier { flex-direction: column; align-items: flex-start; }
.bandeau-calendrier__apercu { margin-left: 0; }
}
.cadre-carte{
display: flex;
flex-direction: column;
border: 1px solid var(--line);
border-radius: 18px;
background: #fff;
padding: 26px 24px;
box-shadow: 0 2px 12px rgba(23,20,63,.04);
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
color: var(--ink);
}
.cadre-carte:hover{
transform: translateY(-3px);
border-color: rgba(14,158,130,.4);
box-shadow: 0 22px 44px -24px rgba(23,20,63,.3);
}
.cadre-carte .icon-badge svg{ width: 24px; height: 24px; }
.cadre-carte h3{ font-size: 1.12rem; margin-bottom: 7px; }
.cadre-carte p{ font-size: 1rem; line-height: 1.62; color: var(--muted); margin: 0 0 16px; }
.cadre-carte span{
margin-top: auto;
font-family: var(--font-heading);
font-weight: 700;
font-size: 1rem;
color: var(--navy);
}
/* Dans une liste de fichiers, la coche doublonnait la flèche de
téléchargement : un seul symbole par ligne. */
.grille-check li:has(.lien-fichier) .grille-check__puce{ display: none; }
.grille-check li:has(.lien-fichier){ align-items: flex-start; }
.grille-check .lien-fichier{ font-size: 1.02rem; align-items: flex-start; }
.grille-check .lien-fichier::before{ margin-top: 3px; }
/* ------------------------------------------------------------------ */
/* Gabarit dédié à /veille-legislative/legislatif-secteur-sanitaire/ */
/* uniquement (page-legislatif-secteur-sanitaire.php) — pas partagé. */
/* ------------------------------------------------------------------ */
.vl-intro{
position: relative;
overflow: clip;
background: linear-gradient(155deg, var(--navy-deep), var(--navy-ink));
padding: 32px 0;
}
.vl-intro__g{
display: grid;
grid-template-columns: auto 1fr;
gap: 20px;
align-items: flex-start;
}
.vl-intro__icone{
width: 40px; height: 40px;
border-radius: 12px;
background: rgba(255,255,255,.12);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.vl-intro__icone svg{ width: 19px; height: 19px; }
.vl-intro__guillemet{
display: block;
font-family: var(--font-heading);
font-size: 2.4rem;
line-height: .6;
color: var(--green-bright);
margin-bottom: 10px;
}
.vl-intro__guillemet--fin{
margin: 12px 0 0;
text-align: right;
line-height: .2;
}
.vl-intro p{
margin: 0 0 10px;
font-size: 1.02rem;
line-height: 1.6;
color: #C8CDEC;
max-width: 56rem;
}
.vl-intro p:last-child{ margin-bottom: 0; }
@media (max-width: 700px){
.vl-intro__g{ grid-template-columns: 1fr; }
}
.vl-reassurance{
background: linear-gradient(180deg, #E7EFF9 0%, #FFFFFF 100%);
padding: 44px 0 20px;
}
.vl-section{
max-width: 1000px;
margin: 0 auto;
}
.vl-section__tete{ display: flex; align-items: center; gap: 16px; margin-bottom: 26px; }
.vl-section__numero{
display: inline-flex; align-items: center; justify-content: center;
min-width: 44px; height: 44px; padding: 0 12px;
border-radius: 12px;
background: var(--green);
color: #fff;
font-family: var(--font-heading);
font-weight: 800;
font-size: 1.05rem;
box-shadow: 0 10px 22px -12px rgba(14,158,130,.55);
flex-shrink: 0;
}
.vl-section__icone{
width: 44px; height: 44px;
border-radius: 12px;
background: var(--azure-soft);
color: var(--navy);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.vl-section__icone svg{ width: 22px; height: 22px; }
.vl-section__tete h2{ margin: 0; font-size: clamp(1.4rem, 1.9vw, 1.75rem); line-height: 1.28; }
.vl-section__corps p{ margin: 0 0 16px; max-width: 72ch; font-size: 1.05rem; line-height: 1.72; }
.vl-section__corps p:last-child{ margin-bottom: 0; }
@media (max-width: 520px){
.vl-section__tete{ flex-wrap: wrap; }
.vl-section__tete h2{ flex-basis: 100%; margin-top: 8px; }
}
.vl-liste{
list-style: none;
margin: 20px 0 0;
padding: 0;
display: grid;
gap: 12px;
max-width: 72ch;
}
.vl-liste li{ display: flex; align-items: flex-start; gap: 10px; font-size: 1.02rem; line-height: 1.55; }
.vl-liste svg{ flex-shrink: 0; width: 18px; height: 18px; margin-top: 3px; color: var(--green); }
.vl-process{
display: grid;
grid-template-columns: 1.1fr .9fr;
gap: 40px;
align-items: center;
margin-bottom: 24px;
}
.vl-process__visuel img{ width: 100%; height: auto; border-radius: 20px; display: block; }
@media (max-width: 860px){
.vl-process{ grid-template-columns: 1fr; }
.vl-process__visuel{ max-width: 380px; margin: 0 auto; order: -1; }
}
.vl-etapes{
display: flex;
flex-direction: column;
gap: 22px;
}
.vl-etape{ display: flex; gap: 16px; align-items: flex-start; }
.vl-etape__num{
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px;
border-radius: 50%;
background: var(--navy);
color: #fff;
font-family: var(--font-heading);
font-weight: 800;
font-size: 1rem;
flex-shrink: 0;
}
.vl-etape h3{ margin: 0 0 4px; font-size: 1.05rem; }
.vl-etape p{ margin: 0; font-size: .98rem; line-height: 1.6; color: var(--muted); }
.vl-cta-inline{ margin-top: 28px !important; padding: 28px; }
.vl-cta-inline p{ max-width: none; }
.vl-cta-inline .btn{ margin-top: 12px; }
/* ==================================================================== */
/* Refonte design (visuel uniquement, aucun texte modifié) — 19/08. */
/* Étendue le même jour à toute la famille « veille législative » (les 4 */
/* pages filles de /veille-legislative/, ID 25) : scopée à */
/* .dirips-2026, une classe que WordPress ajoute automatiquement */
/* au de toute page dont le parent est ce post. Ne touche aucun */
/* composant partagé (header.php, footer.php, blocs.php sont rendus */
/* tels quels ; seule leur apparence change sur ces 4 pages). */
/* ==================================================================== */
/* Largeur de conteneur unifiée (header/footer compris, puisqu'ils sont */
/* rendus dans le même ). */
.dirips-2026 .container { max-width: 1240px; }
/* --- 1. En-tête (v2, retravaillé sur retour du 19/08) ------------------ */
/* Le header garde sa largeur d'origine (1440px) : la nav à 5 entrées
+ logo + boutons entre en collision sous 1240px. */
.dirips-2026 .site-header .container { max-width: 1440px; height: 100px; }
.dirips-2026 .site-header { box-shadow: 0 2px 16px -10px rgba(23,20,63,.16); border-bottom: none; position: sticky; }
/* Filet de marque sous le bandeau, écho du filet du pied de page. */
.dirips-2026 .site-header::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: 0;
height: 2px;
background: linear-gradient(90deg, var(--navy) 0%, var(--violet) 50%, var(--green) 100%);
opacity: .30;
}
/* Nav centrée entre le logo et les actions, entrées plus aérées. */
.dirips-2026 .main-nav { margin-left: auto; margin-right: auto; }
.dirips-2026 .main-nav a {
padding: 11px 13px;
letter-spacing: .01em;
position: relative;
}
.dirips-2026 .main-nav .menu-item-has-children > a::after {
width: 5px; height: 5px;
margin-left: 8px;
opacity: .5;
transition: transform .2s ease;
transform: translateY(-2px) rotate(45deg);
}
.dirips-2026 .main-nav li:hover > a::after,
.dirips-2026 .main-nav li:focus-within > a::after { transform: translateY(1px) rotate(225deg); opacity: .9; }
/* Rubrique courante : violet sur pastille claire, même langage que le survol. */
.dirips-2026 .main-nav .current-menu-parent > a,
.dirips-2026 .main-nav .current-menu-ancestor > a {
color: var(--violet);
font-weight: 700;
background: var(--azure-soft);
}
/* Sous-menus en carte : bord fin, ombre portée, entrées en pastilles.
z-index : au-dessus du filet de marque (::after du bandeau), qui sinon
se peint par-dessus et raye la carte ouverte. */
.dirips-2026 .main-nav ul ul {
border: 1px solid var(--line);
border-radius: 14px;
box-shadow: 0 18px 40px -18px rgba(23,20,63,.28);
padding: 8px;
min-width: 240px;
z-index: 2;
}
.dirips-2026 .main-nav ul ul a { padding: 10px 12px; border-radius: 8px; font-weight: 500; }
.dirips-2026 .main-nav ul ul a:hover { background: var(--azure-soft); color: var(--violet); }
/* Actions hiérarchisées : un seul vrai bouton. Le secondaire redevient un
lien texte, ce qui allège tout le bloc de droite. */
.dirips-2026 .header-cta { gap: 6px; padding-left: 22px; margin-left: 16px; position: relative; }
.dirips-2026 .header-cta::before {
content: '';
position: absolute;
left: 0; top: 50%;
width: 1px; height: 28px;
transform: translateY(-50%);
background: var(--azure-line);
}
.dirips-2026 .header-cta .btn-outline {
background: transparent;
border-color: transparent;
color: var(--navy-ink);
padding: 11px 8px;
font-weight: 600;
}
.dirips-2026 .header-cta .btn-outline:hover {
background: transparent;
border-color: transparent;
color: var(--violet);
}
.dirips-2026 .header-cta .btn-primary {
padding: 12px 18px;
border-radius: 10px;
box-shadow: 0 8px 20px -8px rgba(124,77,255,.45);
}
/* --- 2. Bandeau principal / hero --------------------------------------- */
.dirips-2026 .hero-page {
background: linear-gradient(150deg, #FAFBFE 0%, #F2F5FB 100%);
padding: 72px 0 64px;
}
/* min-width : au-dessus du seuil existant (900px) uniquement, sinon la
spécificité (2 classes) passe devant la règle mobile qui empile le hero. */
@media (min-width: 901px) {
.dirips-2026 .hero-page__grille { grid-template-columns: 45% 55%; gap: 64px; align-items: center; }
.dirips-2026 .hero-page--sobre .hero-page__grille { grid-template-columns: 1fr; max-width: 900px; margin-left: auto; margin-right: auto; }
}
/* Pas de réduction de taille ici : en dessous de 1rem/16px, le fil
d'Ariane et l'eyebrow retombent sous le seuil de lisibilité minimum du
site (déjà documenté comme piège dans .main-nav a plus haut). Le
caractère "discret" vient de la couleur/graisse, pas de la taille. */
.dirips-2026 .fil-ariane--clair { margin-bottom: 10px; }
.dirips-2026 .hero-page h1 { font-size: clamp(2.6rem, 4.2vw, 3.5rem); line-height: 1.08; margin: 18px 0 20px; }
.dirips-2026 .hero-page__chapo { font-size: 1.05rem; line-height: 1.7; max-width: 500px; }
.dirips-2026 .hero-page__actions { gap: 12px; margin-top: 28px; }
/* Deux boutons de même taille, côte à côte comme empilés : dépareillés
(un long vert, un court blanc), ils donnaient un rendu bancal dès que la
colonne du hero les faisait passer l'un sous l'autre. */
.dirips-2026 .hero-page__actions .btn {
flex: 1 1 auto;
justify-content: center;
max-width: 320px;
text-align: center;
}
.dirips-2026 .hero-page__visuel img {
height: 460px;
border-radius: 22px;
border: none;
box-shadow: 0 28px 60px -26px rgba(23,20,63,.30);
}
.dirips-2026 .hero-page__calque { display: none; }
/* --- 3. Chiffres clés : à cheval sur le bas du hero -------------------- */
.dirips-2026 .vl-reassurance { background: transparent; padding: 0; margin-top: -64px; position: relative; z-index: 3; }
.dirips-2026 .stat-bar { padding: 40px 32px; }
.dirips-2026 .stat-bar__item { position: relative; }
.dirips-2026 .stat-bar__item:not(:last-child)::after {
content: '';
position: absolute;
top: 12%; bottom: 12%; right: -16px;
width: 1px;
background: var(--line);
}
.dirips-2026 .stat-bar__item strong { font-size: clamp(1.8rem, 2.8vw, 2.3rem); }
/* --- 4. Bandeau bleu marine d'introduction : carte, pas une bande ----- */
.dirips-2026 .vl-intro { background: transparent; padding: 56px 0 0; }
.dirips-2026 .vl-intro .container.vl-intro__g {
background: linear-gradient(155deg, var(--navy-deep), var(--navy-ink));
border-radius: 20px;
padding: 44px 48px;
}
.dirips-2026 .vl-intro__icone { background: rgba(255,255,255,.16); width: 48px; height: 48px; }
.dirips-2026 .vl-intro__icone svg { width: 23px; height: 23px; stroke-width: 1.8; }
.dirips-2026 .vl-section__icone { width: 52px; height: 52px; border-radius: 14px; }
.dirips-2026 .vl-section__icone svg { width: 26px; height: 26px; stroke-width: 1.8; }
.dirips-2026 .vl-intro p { max-width: 640px; line-height: 1.75; }
/* --- 5. Section 01 — Les textes que nous centralisons ------------------ */
.dirips-2026 .vl-sec-01 { padding: 100px 0; position: relative; overflow: clip; }
.dirips-2026 .vl-sec-01::before {
content: '';
position: absolute;
right: -6%; top: 10%;
width: 420px; height: 420px;
border-radius: 50%;
background: radial-gradient(circle, rgba(14,158,130,.06), transparent 70%);
pointer-events: none;
}
.dirips-2026 .vl-sec-01 .vl-section__tete h2 { font-size: clamp(1.6rem, 2.1vw, 2rem); }
.dirips-2026 .vl-sec-01 .vl-section__corps p { line-height: 1.8; max-width: 680px; }
.dirips-2026 .vl-sec-01 .vl-liste { margin-top: 28px; gap: 14px; max-width: 680px; }
/* --- 6. Section 02 — Ce que Gestionnaire prend en charge --------------- */
.dirips-2026 .vl-sec-02 .grille-2 { gap: 24px; }
.dirips-2026 .vl-sec-02 .card { padding: 32px 28px; transition: transform .25s ease, box-shadow .25s ease; }
.dirips-2026 .vl-sec-02 .card:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -22px rgba(23,20,63,.20); }
.dirips-2026 .vl-sec-02 .card h3 { color: var(--navy-ink); }
/* --- 7. Section 03 — Notre veille, étape par étape --------------------- */
/* min-width : au-dessus du seuil existant (860px) uniquement, pour ne pas
passer devant la règle mobile qui remet .vl-process en une colonne. */
@media (min-width: 861px) {
.dirips-2026 .vl-sec-03 .vl-process { grid-template-columns: 1fr 1fr; }
}
.dirips-2026 .vl-sec-03 .vl-etapes { gap: 32px; }
.dirips-2026 .vl-sec-03 .vl-etape { position: relative; }
.dirips-2026 .vl-sec-03 .vl-etape:not(:last-child)::before {
content: '';
position: absolute;
left: 15px; top: 34px; bottom: -24px;
width: 2px;
background: var(--line);
}
.dirips-2026 .vl-sec-03 .vl-etape h3 { font-weight: 700; }
.dirips-2026 .vl-cta-inline .btn-primary { background: var(--violet); }
/* --- 8. FAQ ------------------------------------------------------------- */
.dirips-2026 .wy-faq-item { border-radius: 12px; }
.dirips-2026 .wy-faq-item > summary { padding: 22px 56px 22px 24px; }
.dirips-2026 .wy-faq-item:hover { background: var(--soft); }
.dirips-2026 .wy-faq-reponse { padding: 0 24px 22px; }
/* --- 9. Dans la même rubrique -------------------------------------------- */
.dirips-2026 [data-reveal-group="soeurs"] .card { padding: 32px 28px; min-height: 176px; }
.dirips-2026 [data-reveal-group="soeurs"] a.card:hover { transform: translateY(-4px); }
.dirips-2026 [data-reveal-group="soeurs"] .icon-badge { width: 64px; height: 64px; border-radius: 18px; }
.dirips-2026 [data-reveal-group="soeurs"] .icon-badge svg { width: 30px; height: 30px; stroke-width: 1.8; }
.dirips-2026 [data-reveal-group="soeurs"] .carte-lien h3 { font-size: 1.22rem; }
/* --- 9b. Chiffres clés avec icône ronde, sections avec image alternée --- */
.dirips-2026 .stat-bar__icone {
width: 46px; height: 46px;
border-radius: 50%;
background: var(--azure-soft);
color: var(--navy);
display: flex; align-items: center; justify-content: center;
margin: 0;
flex-shrink: 0;
}
.dirips-2026 .stat-bar__icone svg { width: 20px; height: 20px; }
.dirips-2026 .stat-bar__icone .prod-drapeau { width: 22px; height: 15px; }
/* Alterne le sens des sections texte+image : la première en image à droite,
la suivante en image à gauche, comme une vraie double page plutôt qu'une
colonne répétée. */
.dirips-2026 .vl-process--inverse .vl-process__visuel { order: -1; }
/* --- 10. Bandeau final d'appel à l'action -------------------------------- */
.dirips-2026 .final-cta { background: var(--navy-ink); animation: none; padding: 72px 56px; }
.dirips-2026 .final-cta::before {
content: '';
position: absolute;
right: -80px; top: -80px;
width: 280px; height: 280px;
border-radius: 50%;
background: radial-gradient(circle, rgba(124,77,255,.28), transparent 70%);
pointer-events: none;
}
.dirips-2026 .final-cta h2 { font-size: clamp(1.8rem, 2.6vw, 2.3rem); }
/* --- 11. Footer ----------------------------------------------------------- */
.dirips-2026 .site-footer { padding: 96px 0 32px; }
.dirips-2026 .footer-grid { gap: 48px; }
.dirips-2026 .site-footer h4 { color: #fff; }
.dirips-2026 .footer-contact {
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.08);
border-radius: 16px;
padding: 28px;
}
/* --- Responsive : au-delà, les règles existantes (grilles à 1 colonne, */
/* stat-bar 2 colonnes, hero empilé, etc.) s'appliquent déjà sans besoin */
/* de surcharge supplémentaire. On neutralise juste le débord de la */
/* carte chiffres-clés une fois le hero empilé. */
@media (max-width: 900px) {
.dirips-2026 .vl-reassurance { margin-top: -40px; }
.dirips-2026 .hero-page__visuel img { height: 260px; }
.dirips-2026 .hero-page { padding: 28px 0 48px; }
.dirips-2026 .hero-page__actions { gap: 10px; margin-top: 22px; }
}
@media (max-width: 700px) {
.dirips-2026 .vl-reassurance { margin-top: 0; }
.dirips-2026 .vl-intro { padding: 40px 0 0; }
.dirips-2026 .vl-intro .container.vl-intro__g { padding: 32px 24px; }
}
/* --- Zone de dépôt de CV (page contact, candidature) ------------------- */
.champ-fichier { display: flex; flex-direction: column; gap: 8px; }
.champ-fichier__label { font-weight: 600; font-size: 1rem; color: var(--ink); }
.champ-fichier__zone {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
padding: 28px 20px;
border: 2px dashed var(--line);
border-radius: 14px;
background: var(--soft);
text-align: center;
cursor: pointer;
transition: border-color .2s ease, background .2s ease;
}
.champ-fichier__zone:hover, .champ-fichier__zone.is-survole { border-color: var(--violet); background: var(--azure-soft); }
.champ-fichier__zone.is-rempli { border-color: var(--green); border-style: solid; background: #F1FBF8; }
.champ-fichier__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.champ-fichier__icone { color: var(--violet); }
.champ-fichier__zone.is-rempli .champ-fichier__icone { color: var(--green); }
.champ-fichier__texte { font-size: 1rem; color: var(--muted); font-weight: 600; }
.champ-fichier__zone.is-rempli .champ-fichier__texte { color: var(--green); }
/* --- Pages génériques (composeur) alignées sur le design travaillé ------ */
/* L'en-tête de section passe de la colonne collante à la ligne compacte
numéro + titre, comme sur la rubrique veille : plus de vide sous le
titre quand le corps s'allonge. */
.dirips-2026 .section-composee .container { display: block; max-width: 1000px; }
.dirips-2026 .section-composee__tete { position: static; display: flex; align-items: center; gap: 16px; margin-bottom: 26px; }
.dirips-2026 .section-composee__numero { margin-bottom: 0; flex-shrink: 0; }
.dirips-2026 .section-composee__tete h2 { padding-bottom: 0; }
.dirips-2026 .section-composee__tete h2::after { content: none; }
.dirips-2026 .section-composee__corps p { max-width: 72ch; }
.dirips-2026 .grille-check__puce { border-radius: 50%; background: #E8FBF5; }
.dirips-2026 .grille-check__puce::after { border-color: var(--green); }
/* --- Page démonstration : formulaire directement dans le bandeau ------- */
.demo-grille { display: grid; grid-template-columns: 1.02fr .98fr; gap: 56px; align-items: start; }
.demo-form { padding: 34px 32px; box-shadow: 0 34px 64px -32px rgba(23,20,63,.30); }
.demo-form h2 { margin-bottom: 18px; font-size: 1.45rem; }
.demo-form label {
display: block;
font-weight: 600;
font-size: 1rem;
margin-bottom: 6px;
color: var(--ink);
}
.demo-form label span { color: var(--green); }
.demo-form input,
.demo-form select,
.demo-form textarea {
width: 100%;
padding: 12px 14px;
border: 1px solid var(--line);
border-radius: 10px;
font: inherit;
background: #fff;
color: var(--ink);
}
.demo-form input:focus,
.demo-form select:focus,
.demo-form textarea:focus { outline: 2px solid var(--violet); outline-offset: 1px; border-color: transparent; }
.demo-form p { margin: 0 0 16px; }
.demo-form .contact-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 980px) {
.demo-grille { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 560px) {
.demo-form .contact-champs { grid-template-columns: 1fr; }
}
/* --- Blog premium ------------------------------------------------------ */
/* Article vedette : le dernier article ouvre la liste en pleine largeur. */
.article-vedette {
grid-column: 1 / -1;
display: grid;
grid-template-columns: 1.05fr .95fr;
background: #fff;
border: 1px solid var(--line);
border-radius: 20px;
overflow: hidden;
text-decoration: none;
transition: transform .25s cubic-bezier(.22,.9,.35,1), box-shadow .25s ease;
}
.article-vedette:hover { transform: translateY(-4px); box-shadow: 0 28px 56px -24px rgba(42,37,134,.22); }
.article-vedette__visuel { min-height: 320px; }
.article-vedette__visuel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.article-vedette__corps { padding: 40px 44px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.article-vedette__corps h2 { margin: 4px 0 0; font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.22; color: var(--navy-ink); }
.article-vedette__meta { margin: 0; color: var(--muted); font-size: 1rem; }
.article-vedette__corps > p:not(.article-vedette__meta) { margin: 0; color: var(--ink); line-height: 1.65; }
.article-vedette__lire { font-weight: 700; color: var(--violet); margin-top: auto; padding-top: 10px; }
@media (max-width: 860px) {
.article-vedette { grid-template-columns: 1fr; }
.article-vedette__visuel { min-height: 200px; }
.article-vedette__corps { padding: 26px 24px; }
}
/* Bandeau d'article : le fond dégradé de la refonte, pastilles de meta. */
.article-hero {
background: linear-gradient(150deg, #F7FAFE 0%, #EEF3FC 52%, #E7EFF9 100%);
padding: 44px 0 84px;
}
.article-hero h1 { font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1.18; }
.article-meta { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; }
.article-meta__pastille {
display: inline-flex;
align-items: center;
gap: 8px;
background: #fff;
border: 1px solid var(--line);
border-radius: 999px;
padding: 8px 15px;
font-size: 1rem;
color: var(--ink);
}
.article-meta__pastille svg { width: 16px; height: 16px; color: var(--green); }
/* Visuel principal : déborde du bandeau vers le corps, comme la carte
de chiffres clés sous les heros de pages. */
.article-visuel { max-width: 860px; margin-top: -56px; position: relative; z-index: 2; }
.article-visuel img {
width: 100%;
border-radius: 20px;
box-shadow: 0 30px 60px -28px rgba(23,20,63,.35);
display: block;
}
/* Corps d'article : respiration et titres marqués. */
.dirips-2026 .article-corps h2 {
position: relative;
margin-top: 44px;
padding-bottom: 12px;
}
.dirips-2026 .article-corps h2::after {
content: '';
position: absolute;
left: 0; bottom: 0;
width: 44px; height: 3px;
border-radius: 3px;
background: var(--green);
}
.dirips-2026 .article-corps > p:first-child {
font-size: 1.12rem;
line-height: 1.75;
color: var(--navy-ink);
}
/* --- Correctifs de l'audit du 19/08 (visuel mobile) -------------------- */
/* Sur mobile, le formulaire de capture passe AVANT la liste d'arguments :
l'audit a mesuré ~2 écrans de scroll avant le premier champ sur
/demonstration/. Le desktop garde texte+points à gauche, formulaire à
droite via grid-areas. */
.demo-grille {
grid-template-areas: "intro form" "points form";
grid-template-rows: auto 1fr;
}
.demo-grille .hero-page__texte { grid-area: intro; }
.demo-grille .demo-form { grid-area: form; }
.demo-grille .demo-points { grid-area: points; }
@media (max-width: 980px) {
.demo-grille { grid-template-areas: "intro" "form" "points"; grid-template-rows: none; }
}
/* Bouton burger : zone tactile de 44px minimum, et l'icône devient une
croix quand le menu est ouvert (l'état était invisible). */
.dirips-2026 .nav-toggle { min-width: 44px; min-height: 44px; }
.dirips-2026 .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.dirips-2026 .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.dirips-2026 .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.dirips-2026 .nav-toggle span { transition: transform .25s ease, opacity .2s ease; }
/* --- Hub veille : carte intro bicolore et bandeaux horizontaux --------- */
.vl-intro-duo {
display: grid;
grid-template-columns: 220px 1fr;
background: var(--soft);
border: 1px solid var(--line);
border-radius: 20px;
overflow: hidden;
}
.vl-intro-duo__gauche {
background: linear-gradient(155deg, var(--navy-deep), var(--navy-ink));
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 18px;
padding: 32px;
}
.vl-intro-duo__guillemet {
font-family: var(--font-heading);
font-size: 4rem;
line-height: .6;
color: var(--green-bright);
}
.vl-intro-duo__icone {
width: 56px; height: 56px;
border-radius: 16px;
background: rgba(255,255,255,.14);
display: flex; align-items: center; justify-content: center;
}
.vl-intro-duo__icone svg { width: 26px; height: 26px; }
.vl-intro-duo__droite { padding: 34px 40px; position: relative; }
.vl-intro-duo__droite p { margin: 0 0 14px; font-size: 1.05rem; line-height: 1.7; max-width: 62rem; }
.vl-intro-duo__droite p:last-of-type { margin-bottom: 0; }
.vl-intro-duo__fin {
position: absolute;
right: 26px; bottom: 12px;
font-family: var(--font-heading);
font-size: 2.6rem;
line-height: 1;
color: var(--green);
}
@media (max-width: 700px) {
.vl-intro-duo { grid-template-columns: 1fr; }
.vl-intro-duo__gauche { flex-direction: row; padding: 20px; }
}
/* Bandeaux horizontaux : icône, texte, bouton sur une ligne. */
.vl-bandeau {
display: flex;
align-items: center;
gap: 24px;
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 26px 30px;
}
.vl-bandeau--vert { background: #F1FBF8; border-color: rgba(14,158,130,.25); }
.vl-bandeau__texte { flex: 1; min-width: 0; }
.vl-bandeau .btn { flex-shrink: 0; }
@media (max-width: 780px) {
.vl-bandeau { flex-direction: column; align-items: flex-start; }
}
/* =====================================================================
* Retours client du 24/08/2026.
*
* Le client compare le site à son ancien .fr et y cherche trois choses
* qu'il n'y retrouvait pas : le lavis bleuté des sections claires, l'aile
* delta en filigrane, et l'iconographie dessinée pour lui. Les trois
* proviennent des fichiers d'origine (assets/img/heritage), pas d'une
* réinterprétation : ce sont ses formes, reprises telles quelles.
*
* Rien ici ne touche au hero ni aux fonds sombres validés le 20/08 :
* l'éclaircissement de la page d'accueil est un arbitrage encore ouvert.
* ===================================================================== */
:root{
--lavis: linear-gradient(180deg, #FFFFFF 0%, #F4F8FE 42%, #E9F0FD 100%);
--vague-verte: url("assets/img/heritage/vague-verte.svg");
--vague-blanche: url("assets/img/heritage/vague-blanche.svg");
}
/* --- 1. Le lavis des sections claires ------------------------------- */
/*
* `--soft` était un gris plat identique d'une section à l'autre : c'est ce
* que Ryan décrivait comme « un fond assez uniforme, assez blanc, le même
* sur tout le site ». Le lavis rend la respiration verticale de l'ancien
* site sans changer aucune couleur de marque.
*/
.dirips-2026 .section-alt{ background: var(--lavis); }
.dirips-2026 .section--lavis{ background: var(--lavis); }
/* Deux sections claires qui se suivent ne doivent pas remettre le dégradé
à zéro au milieu : la seconde repart du bleu où la première s'arrête. */
.dirips-2026 .section-alt + .section-alt{
background: linear-gradient(180deg, #E9F0FD 0%, #F4F8FE 55%, #FFFFFF 100%);
}
/* --- 2. L'aile delta en filigrane ----------------------------------- */
.deco-vagues{ position: relative; isolation: isolate; overflow: hidden; }
.deco-vagues > *{ position: relative; z-index: 1; }
.deco-vagues::before,
.deco-vagues::after{
content: '';
position: absolute;
z-index: 0;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
pointer-events: none;
}
/* Proportions reprises du fichier d'origine (549.58 × 843.66). */
.deco-vagues::before{
background-image: var(--vague-verte);
width: min(34%, 380px); aspect-ratio: 549/844;
right: -6%; top: -14%;
opacity: .55;
}
.deco-vagues::after{
background-image: var(--vague-verte);
width: min(26%, 300px); aspect-ratio: 549/844;
left: -8%; bottom: -16%;
transform: scaleX(-1);
opacity: .3;
}
/* Sur fond sombre, c'est le tracé blanc de l'ancien site qui sert. */
.deco-vagues--clair::before,
.deco-vagues--clair::after{ background-image: var(--vague-blanche); opacity: .16; }
@media (max-width: 900px){
/* Sous 900px le filigrane passe derrière le texte au lieu de l'encadrer. */
.deco-vagues::before,
.deco-vagues::after{ display: none; }
}
/* --- 3. Les valeurs, avec leurs pictogrammes d'origine --------------- */
.bloc-valeurs{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin-top: 44px;
}
.valeur{
background: #fff;
border: 1px solid var(--azure-line);
border-radius: var(--radius);
padding: 30px 24px;
text-align: center;
box-shadow: 0 18px 36px -30px rgba(42,37,134,.45);
transition: transform .25s ease, box-shadow .25s ease;
}
.valeur:hover{ transform: translateY(-4px); box-shadow: 0 24px 44px -28px rgba(42,37,134,.5); }
.valeur img{
width: 68px; height: 68px;
margin: 0 auto 18px;
}
.valeur h3{
font-size: 1.05rem;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--navy);
margin-bottom: 10px;
}
.valeur p{ margin: 0; font-size: 1rem; }
@media (max-width: 1000px){ .bloc-valeurs{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .bloc-valeurs{ grid-template-columns: 1fr; } }
/* --- 4. Recherche dans l'en-tête ------------------------------------ */
.recherche{ position: relative; display: flex; align-items: center; }
.recherche__bouton{
width: 42px; height: 42px;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid var(--azure-line);
background: #fff;
color: var(--navy);
border-radius: 12px;
cursor: pointer;
transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.recherche__bouton:hover{ border-color: var(--azure); color: var(--azure); background: var(--azure-soft); }
.recherche__panneau{
position: absolute;
top: calc(100% + 12px);
right: 0;
width: min(380px, calc(100vw - 48px));
background: #fff;
border: 1px solid var(--azure-line);
border-radius: var(--radius);
box-shadow: 0 26px 50px -26px rgba(42,37,134,.4);
padding: 16px;
z-index: 60;
}
.recherche__panneau[hidden]{ display: none; }
.recherche__panneau form{ display: flex; gap: 10px; }
.recherche__panneau input[type="search"],
.recherche__panneau input[type="text"]{
flex: 1;
padding: 12px 14px;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
font: inherit;
color: var(--ink);
}
.recherche__panneau input:focus{ outline: 2px solid var(--azure); outline-offset: 1px; }
.recherche__panneau button[type="submit"]{
border: 0; cursor: pointer;
background: var(--navy); color: #fff;
border-radius: var(--radius-sm);
padding: 0 18px;
font-family: var(--font-heading); font-weight: 700;
}
.recherche__panneau button[type="submit"]:hover{ background: var(--azure); }
@media (max-width: 1180px){
/* L'en-tête est déjà dense à cette largeur : la recherche vit alors
dans le menu déroulant, pas à côté des boutons d'action. */
.header-cta .recherche{ display: none; }
}
/* --- 5. Carrousel des actualités ------------------------------------ */
.carrousel{ position: relative; }
.carrousel__piste{
display: grid;
grid-auto-flow: column;
grid-auto-columns: calc((100% - 2 * 28px) / 3);
gap: 28px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
padding: 4px 4px 8px;
margin: -4px -4px -8px;
}
.carrousel__piste::-webkit-scrollbar{ display: none; }
.carrousel__piste > *{ scroll-snap-align: start; }
.carrousel__nav{
display: flex; justify-content: center; align-items: center; gap: 12px;
margin-top: 28px;
}
.carrousel__fleche{
width: 46px; height: 46px;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid var(--azure-line);
background: #fff; color: var(--navy);
border-radius: 50%;
cursor: pointer;
transition: border-color .2s ease, color .2s ease, background .2s ease, opacity .2s ease;
}
.carrousel__fleche:hover{ border-color: var(--azure); color: var(--azure); background: var(--azure-soft); }
.carrousel__fleche[disabled]{ opacity: .35; cursor: default; }
.carrousel__fleche[disabled]:hover{ border-color: var(--azure-line); color: var(--navy); background: #fff; }
@media (max-width: 1000px){ .carrousel__piste{ grid-auto-columns: calc((100% - 28px) / 2); } }
@media (max-width: 700px){ .carrousel__piste{ grid-auto-columns: 88%; } }
/* --- 6. Pied de page : deux rubriques par colonne -------------------- */
/*
* Le menu principal compte cinq rubriques, le pied trois colonnes. Plutôt
* que d'inventer un classement différent — c'est précisément ce que Sofia
* a relevé — les cinq rubriques sont réparties dans l'ordre du menu, deux
* d'entre elles partageant une colonne.
*/
.footer-col .footer-rubrique + .footer-rubrique{ margin-top: 36px; }
/* --- 7. Révélations : la cascade de l'ancien site -------------------- */
/*
* Sofia décrit l'ancien site comme « plus fluide », avec « des éléments qui
* bougent » quand on descend. Le mécanisme existait déjà ; il était trop
* discret pour se voir. Course et décalage augmentés, rien de plus.
*/
.reveal{
transform: translateY(30px);
transition-delay: calc(var(--i, 0) * 95ms);
}
.reveal.is-visible{ transform: translateY(0); }
@media (prefers-reduced-motion: reduce){
.reveal{ opacity: 1; transform: none; transition: none; }
}
/* La recherche du menu déroulant ne sert que là où l'en-tête est trop
étroit pour l'accueillir : au-dessus, elle ferait doublon. */
.recherche--menu{ display: none; }
.recherche--menu .recherche__panneau{
position: static;
width: auto;
border: 0;
box-shadow: none;
padding: 16px 0 0;
}
@media (max-width: 1180px){
.main-nav.is-open .recherche--menu{ display: block; }
}
/* --- 8. Inscription à la newsletter (pied de page) ------------------- */
.newsletter{
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 32px 48px;
align-items: center;
padding: 0 0 48px;
margin-bottom: 48px;
border-bottom: 1px solid rgba(255,255,255,.12);
}
.newsletter h2{
color: #fff;
font-size: clamp(1.3rem, 2vw, 1.6rem);
margin-bottom: 8px;
}
.newsletter p{ color: #98A2CC; margin: 0; }
.newsletter__form{ display: flex; gap: 12px; flex-wrap: wrap; }
.newsletter__form input[type="email"]{
flex: 1 1 220px;
min-width: 0;
padding: 14px 16px;
border: 1px solid rgba(255,255,255,.18);
background: rgba(255,255,255,.06);
border-radius: var(--radius-sm);
color: #fff;
font: inherit;
}
.newsletter__form input[type="email"]::placeholder{ color: #8B95C4; }
.newsletter__form input[type="email"]:focus{ outline: 2px solid var(--green-bright); outline-offset: 1px; }
.newsletter__mention{ grid-column: 2; font-size: .95rem; margin-top: -18px; }
.newsletter__reponse{
grid-column: 2;
margin: 0;
padding: 14px 16px;
border-radius: var(--radius-sm);
font-weight: 600;
}
.newsletter__reponse--ok{ background: rgba(14,158,130,.18); color: #9FEAD8; }
.newsletter__reponse--ko{ background: rgba(245,166,35,.16); color: #FFD79A; }
@media (max-width: 860px){
.newsletter{ grid-template-columns: 1fr; }
.newsletter__mention,
.newsletter__reponse{ grid-column: 1; margin-top: 0; }
}
/* --- 9. Le filigrane devient visible -------------------------------- */
/*
* Le thème posait déjà l'aile delta du logo en filigrane sur les heros, les
* sections claires et les blocs sombres — mais à 3,5 % et 5 % d'opacité, et
* en blanc, y compris sur les fonds clairs, où il était donc strictement
* invisible. C'est ce que Ryan décrivait : « ce sont des éléments qui
* rendaient la navigation plus fluide, on ne les retrouve pas ».
*
* Sur fond clair, le tracé vert de l'ancien site remplace le blanc, à une
* opacité où il se voit ; sur fond sombre, le tracé blanc d'origine est
* simplement remonté. Les positions et les tailles ne changent pas.
*/
.dirips-2026 .hero-page::after{
background-image: var(--vague-verte);
right: -3%;
top: 46%;
width: min(26%, 340px);
aspect-ratio: 549/844;
opacity: .42;
}
.dirips-2026 .section-alt::after{
background-image: var(--vague-verte);
left: -3%;
bottom: -14%;
width: min(20%, 260px);
aspect-ratio: 549/844;
transform: scaleX(-1);
opacity: .34;
}
.dirips-2026 .final-cta::after,
.dirips-2026 .filigrane--clair::after{
opacity: .12;
}
@media (max-width: 900px){
/* Sur mobile, le filigrane croise le texte : il disparaît. */
.dirips-2026 .hero-page::after,
.dirips-2026 .section-alt::after{ display: none; }
}
@media (prefers-reduced-motion: reduce){
.dirips-2026 .hero-page::after{ opacity: .3; }
.dirips-2026 .section-alt::after{ opacity: .24; }
.dirips-2026 .final-cta::after{ opacity: .1; }
}
/* --- 10. « Depuis 1994 » qui chevauchait sa voisine ------------------ */
/*
* Sofia, réunion du 24/08 : « il y a écrit Depuis 1994, il y a une ligne
* qui se chevauche ».
*
* La bande de repères répartit ses colonnes en minmax(0, 1fr) — elles
* peuvent donc devenir plus étroites que leur contenu — pendant que le
* chiffre est en white-space: nowrap dès 781 px. Entre 781 et 1150 px,
* « Depuis 1994 » est plus large que sa colonne et déborde sur le repère
* suivant et son filet de séparation. Les repères courts (96 %, Qualiopi)
* ne le montraient pas : c'est bien celui-là qui se chevauchait.
*
* Le nowrap ne vaut plus que là où la place existe réellement.
*/
.dirips-2026 .stat-bar__item{ min-width: 0; }
.dirips-2026 .stat-bar__item strong{ overflow-wrap: break-word; }
@media (max-width: 1150px){
.dirips-2026 .stat-bar__item strong{ white-space: normal; }
}
/* --- 11. Calage du filigrane sur l'échelle d'origine ------------------ */
/*
* Le tracé de l'ancien site est un trait de 0,49 px dans un dessin de
* 549 px de large : une ligne de cheveu, affichée à sa taille naturelle.
* Réduit à 340 px et à 40 % d'opacité, il ne se voyait plus du tout — le
* défaut même qu'on cherche à corriger. Taille et opacité reviennent donc
* près de l'original ; c'est la finesse du trait qui le rend discret, pas
* la transparence.
*/
.dirips-2026 .hero-page::after{ width: min(42%, 560px); opacity: .9; }
.dirips-2026 .section-alt::after{ width: min(34%, 460px); opacity: .75; }
.deco-vagues::before{ width: min(40%, 540px); opacity: .9; }
.deco-vagues::after{ width: min(30%, 400px); opacity: .6; }
.deco-vagues--clair::before,
.deco-vagues--clair::after{ opacity: .45; }
/* ==========================================================================
Page d'accueil reprise de dirips.fr
Palette, fonds et proportions relevés sur leur site le 28/08/2026.
========================================================================== */
:root{
--fr-indigo: #1E1A6B;
--fr-indigo-fonce: #1B176D;
--fr-bleu: #2A2589;
--fr-bleu-clair: #4A54D6;
--fr-vert: #0E9E82;
--fr-vert-clair: #3FD9BC;
--fr-gris: #F4F6F7;
--fr-degrade-gamme: linear-gradient(180deg, #F3F8FF 50%, #D3E4FF 100%);
}
.fr-btn{
display: inline-block; padding: 15px 30px; border-radius: 30px;
font-family: var(--font-heading); font-weight: 700; font-size: .82rem;
letter-spacing: .09em; text-transform: uppercase; text-decoration: none;
transition: background-color .2s, color .2s, border-color .2s;
}
.fr-btn--plein{ background: var(--fr-bleu); color: #fff; border: 2px solid var(--fr-bleu); }
.fr-btn--plein:hover{ background: var(--fr-indigo); border-color: var(--fr-indigo); color: #fff; }
.fr-btn--ligne{ background: transparent; color: var(--fr-bleu); border: 2px solid var(--fr-bleu); }
.fr-btn--ligne:hover{ background: var(--fr-bleu); color: #fff; }
.fr-btn--clair{ color: #fff; border-color: #fff; }
.fr-btn--clair:hover{ background: #fff; color: var(--fr-indigo); }
/* --- 1. Bannière ---------------------------------------------------- */
.fr-hero{ position: relative; overflow: hidden; background: #fff; }
.fr-hero__fond{
position: absolute; inset: 0;
background-size: cover; background-position: right center; background-repeat: no-repeat;
}
/* Le dégradé blanc vers la droite : c'est lui qui donne au titre son fond
clair tout en laissant la photo respirer. Repris du .fr au pixel. */
.fr-hero::after{
content: ''; position: absolute; inset: 0; z-index: 1;
background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.92) 34%, rgba(240,244,255,.55) 62%, rgba(255,255,255,0) 100%);
}
.fr-hero__vague{
position: absolute; right: 0; bottom: -2px; width: 46%; max-width: 620px;
z-index: 2; pointer-events: none;
}
.fr-hero__int{ position: relative; z-index: 3; display: flex; align-items: center; min-height: 560px; padding: 90px 0 110px; }
.fr-hero__texte{ max-width: 620px; }
.fr-hero h1{
font-size: clamp(2rem, 3.4vw, 2.9rem); line-height: 1.22; color: var(--fr-indigo);
margin: 0 0 26px; font-weight: 800;
}
.fr-hero h1 span{ color: var(--fr-bleu-clair); }
.fr-hero__texte p{ color: #3A4060; font-size: 1.02rem; line-height: 1.72; margin: 0 0 16px; max-width: 560px; }
.fr-hero__actions{ display: flex; flex-wrap: wrap; gap: 16px; margin-top: 34px; }
/* --- 2. Bande de chiffres ------------------------------------------- */
.fr-reperes{ background: var(--fr-indigo); color: #fff; padding: 40px 0; }
.fr-reperes__int{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; text-align: center; }
.fr-repere img{ display: block; margin: 0 auto 12px; height: 48px; width: auto; }
.fr-repere strong{
display: block; font-family: var(--font-heading); font-size: clamp(1.8rem, 2.6vw, 2.5rem);
font-weight: 800; color: var(--fr-vert-clair); line-height: 1.1;
}
.fr-repere span{ display: block; margin-top: 6px; font-size: .93rem; color: #D7DAF2; line-height: 1.45; }
/* --- 3. Les enjeux -------------------------------------------------- */
.fr-enjeux{ position: relative; background: var(--fr-indigo); color: #fff; padding: 88px 0 96px; overflow: hidden; }
.fr-enjeux__int{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.fr-enjeux__logo{ width: 190px; height: auto; margin-bottom: 26px; }
.fr-enjeux h2{ font-size: clamp(1.7rem, 2.6vw, 2.25rem); line-height: 1.24; color: var(--fr-vert-clair); margin: 0 0 22px; }
.fr-enjeux p{ color: #D9DCF3; line-height: 1.75; margin: 0 0 16px; }
.fr-enjeux__illus{ display: block; width: 100%; max-width: 420px; margin-top: 34px; }
.fr-enjeux__droite{ display: grid; gap: 34px; }
.fr-pilier img{ height: 54px; width: auto; margin-bottom: 14px; }
.fr-pilier h3{ font-size: 1.12rem; letter-spacing: .06em; text-transform: uppercase; color: #fff; margin: 0 0 12px; }
.fr-pilier ul{ margin: 0; padding: 0; list-style: none; }
.fr-pilier li{ position: relative; padding-left: 22px; margin-bottom: 9px; color: #D9DCF3; line-height: 1.62; }
.fr-pilier li::before{
content: ''; position: absolute; left: 0; top: .55em; width: 9px; height: 9px;
border-radius: 50%; background: var(--fr-vert-clair);
}
/* --- 4. La gamme ---------------------------------------------------- */
.fr-gamme{ background: var(--fr-degrade-gamme); padding: 84px 0 92px; text-align: center; }
.fr-picto-section{ display: block; margin: 0 auto 20px; height: 60px; width: auto; }
.fr-titre-centre{ font-size: clamp(1.7rem, 2.6vw, 2.25rem); line-height: 1.26; color: var(--fr-indigo); margin: 0 0 18px; }
.fr-chapo{ max-width: 780px; margin: 0 auto 46px; color: var(--fr-bleu-clair); line-height: 1.7; }
.fr-gamme__cartes{ display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; max-width: 900px; margin: 0 auto; }
.fr-carte{
position: relative; background: #fff; border-radius: 14px; padding: 54px 30px 34px;
text-align: left; box-shadow: 0 18px 40px rgba(30, 26, 107, .10);
}
.fr-carte__picto{
position: absolute; top: -26px; right: 26px; width: 62px; height: 62px; border-radius: 14px;
display: grid; place-items: center;
}
.fr-carte--bleu .fr-carte__picto{ background: var(--fr-bleu); }
.fr-carte--vert .fr-carte__picto{ background: var(--fr-vert); }
.fr-carte__picto img{ width: 34px; height: 34px; }
.fr-carte h3{ font-size: 1.32rem; margin: 0 0 14px; }
.fr-carte--bleu h3{ color: var(--fr-bleu); }
.fr-carte--vert h3{ color: var(--fr-vert); }
.fr-carte p{ color: #4A4E66; line-height: 1.68; margin: 0 0 26px; }
/* --- 5. Appel à l'action -------------------------------------------- */
.fr-cta{ background: var(--fr-indigo) center/cover no-repeat; color: #fff; padding: 92px 0; text-align: center; }
.fr-cta__int{ max-width: 860px; margin: 0 auto; }
.fr-cta h2{ font-size: clamp(1.7rem, 2.6vw, 2.3rem); color: var(--fr-vert-clair); margin: 0 0 20px; }
.fr-cta p{ color: #E3E5F6; line-height: 1.75; margin: 0 0 32px; }
/* --- 6. Témoignages ------------------------------------------------- */
.fr-temoignages{ background: #FEFEFF; padding: 88px 0; }
.fr-temoignages__int{ display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1fr); gap: 54px; align-items: center; }
.fr-temoignages__gauche .fr-picto-section{ margin: 0 0 18px; }
.fr-temoignages h2{ font-size: clamp(1.7rem, 2.6vw, 2.25rem); color: var(--fr-indigo); margin: 0 0 16px; }
.fr-temoignages__gauche > p{ color: #4A4E66; line-height: 1.7; margin: 0 0 30px; max-width: 460px; }
.fr-temoignages__visuel{ position: relative; max-width: 420px; }
.fr-temoignages__photo{ position: relative; z-index: 2; width: 100%; height: auto; border-radius: 50%; }
.fr-rond{ position: absolute; z-index: 1; width: 120px; }
.fr-rond--vert{ left: -26px; top: 10px; }
.fr-rond--bleu{ right: -18px; bottom: 6px; width: 90px; }
.fr-temoignages__piste{ display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.fr-temoignages__piste::-webkit-scrollbar{ display: none; }
.fr-temoignage{
flex: 0 0 100%; scroll-snap-align: start; margin: 0;
background: #fff; border-radius: 14px; padding: 32px 30px;
box-shadow: 0 16px 38px rgba(30, 26, 107, .10);
}
.fr-temoignage figcaption strong{ display: block; color: var(--fr-indigo); font-size: 1.06rem; }
.fr-temoignage__structure{ display: block; color: var(--fr-vert); font-weight: 700; font-size: .93rem; margin-top: 2px; }
.fr-temoignage__role{ display: block; color: #6B7090; font-size: .9rem; margin-top: 2px; }
.fr-temoignage blockquote{
margin: 18px 0 0; padding-top: 18px; border-top: 1px solid #E5EAF3;
color: #3A4060; font-style: italic; line-height: 1.7;
}
.fr-temoignages__droite > .fr-btn{ margin-top: 26px; }
/* --- 7. Actualités -------------------------------------------------- */
.fr-actus{ background: var(--fr-gris); padding: 84px 0 92px; text-align: center; }
.fr-actus__grille{ display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 28px; margin-top: 44px; text-align: left; }
.fr-actu{ background: #fff; border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
.fr-actu__media{ display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #E9EEF7; }
.fr-actu__media img{ width: 100%; height: 100%; object-fit: cover; }
.fr-actu__cat{
display: inline-block; margin: 20px 24px 0; padding: 5px 13px; border-radius: 20px;
background: #EDEEFB; color: var(--fr-bleu); font-size: .74rem; font-weight: 700;
letter-spacing: .05em; text-transform: uppercase;
}
.fr-actu h3{ font-size: 1.08rem; line-height: 1.4; margin: 14px 24px 8px; }
.fr-actu h3 a{ color: var(--fr-indigo); text-decoration: none; }
.fr-actu h3 a:hover{ color: var(--fr-bleu); }
.fr-actu__date{ margin: 0 24px 10px; color: #8A8FA8; font-size: .84rem; }
.fr-actu > p{ margin: 0 24px 18px; color: #4A4E66; line-height: 1.62; font-size: .95rem; }
.fr-actu__lien{ margin: auto 24px 24px; color: var(--fr-bleu); font-weight: 700; text-decoration: none; font-size: .92rem; }
/* --- 8. Newsletter -------------------------------------------------- */
.fr-newsletter{ background: var(--fr-indigo) center/cover no-repeat; padding: 68px 0; }
@media (max-width: 1000px){
.fr-enjeux__int,
.fr-temoignages__int{ grid-template-columns: 1fr; gap: 40px; }
.fr-hero__vague{ display: none; }
.fr-hero::after{ background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,.88) 60%, rgba(255,255,255,.6) 100%); }
.fr-reperes__int{ grid-template-columns: 1fr; gap: 30px; }
}
/* --- 9. En-tête et pied de page repris de dirips.fr ------------------ */
/* Leur en-tête est blanc, sans appel à l'action : le menu et la loupe,
rien d'autre. Marc relevait d'ailleurs que « Demander une démonstration »
figurait en haut de chaque page alors qu'il est déjà dans le menu. */
.site-header{ background: #fff; box-shadow: 0 1px 0 rgba(30,26,107,.08); }
.site-header .header-cta .btn-outline,
.site-header .header-cta .btn-primary{ display: none; }
.fr-pied{ background: var(--fr-indigo); color: #fff; }
.fr-pied__haut{
display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 48px;
padding: 66px 0 52px; align-items: start;
}
.fr-pied__identite img{ width: 196px; height: auto; margin-bottom: 20px; }
.fr-pied__raison{ color: var(--fr-vert-clair); font-weight: 700; margin: 0 0 14px; }
.fr-pied address{ font-style: normal; color: #C9CDE8; line-height: 1.7; margin-bottom: 12px; }
.fr-pied__tel a{ color: #fff; text-decoration: none; font-weight: 700; }
.fr-pied__tel a:hover{ color: var(--fr-vert-clair); }
.fr-pied__colonne h2{
font-size: 1.28rem; color: var(--fr-vert-clair); margin: 0 0 18px; padding-bottom: 14px;
border-bottom: 2px solid rgba(63, 217, 188, .35);
}
.fr-pied__colonne ul{ list-style: none; margin: 0; padding: 0; }
.fr-pied__colonne li{ margin-bottom: 12px; }
.fr-pied__colonne a{ color: #DCDFF4; text-decoration: none; }
.fr-pied__colonne a:hover{ color: #fff; }
.fr-pied__collab{ margin-top: 22px; font-size: .74rem; padding: 12px 22px; }
.fr-pied__bas{ border-top: 1px solid rgba(255,255,255,.12); }
.fr-pied__bas-int{
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
gap: 16px; padding: 20px 0; font-size: .88rem;
}
.fr-pied__copy{ color: #A8ADD4; }
.fr-pied__legal{ display: flex; flex-wrap: wrap; gap: 22px; }
.fr-pied__legal a{ color: #C9CDE8; text-decoration: none; }
.fr-pied__legal a:hover{ color: #fff; }
.fr-pied__reseaux{ display: flex; gap: 10px; }
.fr-pied__reseaux a{
display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
background: rgba(255,255,255,.12); color: #fff; text-decoration: none;
font-size: .82rem; font-weight: 700;
}
.fr-pied__reseaux a:hover{ background: var(--fr-vert); }
/* --- 10. Les trois écarts relevés en comparant les deux pages -------- */
/* Chez eux le pictogramme de section chevauche la frontière entre le bloc
indigo et le bloc clair. Il se pose donc à cheval, pas à l'intérieur. */
.fr-gamme{ position: relative; }
.fr-gamme .fr-picto-section{
position: relative; margin-top: -74px; margin-bottom: 26px;
background: #fff; border-radius: 14px; padding: 10px;
box-shadow: 0 10px 26px rgba(30,26,107,.14);
width: 64px; height: 64px; box-sizing: content-box;
}
/* L'aile delta du bas de bannière, invisible faute de contraste sur le
dégradé clair : on la remonte et on l'assombrit très légèrement. */
.fr-hero__vague{ opacity: .9; filter: saturate(1.1); }
@media (max-width: 900px){
.fr-pied__haut{ grid-template-columns: 1fr; gap: 34px; padding: 46px 0 36px; }
.fr-pied__bas-int{ flex-direction: column; align-items: flex-start; }
}
/* Le fond de newsletter du .fr est un pastel très clair : le bloc y était
posé en texte blanc, donc illisible. On repose le voile indigo de leur
bandeau d'origine par-dessus, le texte redevient lisible et la section
retrouve la teinte qu'elle a chez eux. */
.fr-newsletter{ position: relative; }
.fr-newsletter::before{
content: ''; position: absolute; inset: 0;
background: linear-gradient(90deg, rgba(30,26,107,.94) 0%, rgba(42,37,137,.86) 55%, rgba(74,84,214,.74) 100%);
}
.fr-newsletter > .container{ position: relative; z-index: 1; }
.fr-newsletter .newsletter,
.fr-newsletter .newsletter__texte{ background: transparent; }
.fr-newsletter .newsletter h2{ color: #fff; }
.fr-newsletter .newsletter p{ color: #DDE0F4; }
.fr-newsletter input[type="email"]{
background: rgba(255,255,255,.96); border: 0; color: #171633;
}
/* La section actualités du .fr est sur fond indigo, pas sur gris clair :
le gris relevé au navigateur était celui du conteneur extérieur, le bloc
lui-même porte le #1B176D. Les cartes ressortent en blanc par-dessus. */
.fr-actus{ background: var(--fr-indigo-fonce); }
.fr-actus .fr-titre-centre{ color: #fff; }
.fr-actus .fr-chapo{ color: var(--fr-vert-clair); }
.fr-actus .fr-picto-section{ filter: brightness(0) invert(1); opacity: .95; }
.fr-actu{ box-shadow: 0 18px 40px rgba(0,0,0,.22); }
/* Bandeau des clients, tel qu'il ferme la section témoignages chez eux. */
.fr-confiance{ background: #FEFEFF; padding: 0 0 76px; text-align: center; }
.fr-confiance h2{ font-size: 1.42rem; color: var(--fr-indigo); margin: 0 0 30px; }
.fr-confiance__piste{
display: flex; gap: 54px; align-items: center; justify-content: center;
flex-wrap: wrap; opacity: .82;
}
.fr-confiance__piste img{ height: 42px; width: auto; filter: grayscale(1); transition: filter .2s, opacity .2s; }
.fr-confiance__piste img:hover{ filter: none; }
/* Chez eux le pictogramme de section reste coloré sur le fond indigo :
le blanchir le transformait en carré blanc sans lecture. */
.fr-actus .fr-picto-section{ filter: none; opacity: 1; }
.fr-actus__tous{ margin-top: 42px; }
/* Sous 1000px la grille des témoignages passe en une colonne, mais ses deux
enfants gardaient la largeur calculée pour deux : minmax(0,1fr) manquait,
et le visuel rond, en largeur fixe, poussait la page à 576px sur mobile. */
@media (max-width: 1000px){
.fr-temoignages__int{ grid-template-columns: minmax(0, 1fr); }
.fr-temoignages__gauche,
.fr-temoignages__droite{ min-width: 0; max-width: 100%; }
.fr-temoignages__visuel{ max-width: min(420px, 100%); margin-inline: auto; }
.fr-rond--bleu{ right: 0; }
.fr-rond{ width: 88px; }
}
@media (max-width: 620px){
.fr-rond{ display: none; }
}
/* --- 11. Fonds et parallaxe, relevés sur leur page ------------------- */
/* La section « gamme » porte chez eux une image de fond, pas un dégradé :
on retrouve les ailes du logo en filigrane, invisibles autrement. */
.fr-gamme{
background-image: url('assets/img/fr/DirIPS-BG-Gamme-1-scaled.webp');
background-size: cover; background-position: center; background-repeat: no-repeat;
}
/* Leur section indigo porte le même fond ailé que l'appel à l'action.
Sans lui, notre bloc était un aplat, là où le leur respire. */
.fr-enjeux{
background-image: url('assets/img/fr/DirIPS-BG-cta-scaled.webp');
background-size: cover; background-position: center; background-repeat: no-repeat;
}
/* C'est le point qui donne le mouvement au défilement : leur fond d'appel à
l'action est en background-attachment: fixed. L'image reste immobile
pendant que la section glisse par-dessus. */
.fr-cta{ background-attachment: fixed; }
/* Le parallaxe coûte cher en rendu sur mobile et n'y apporte rien : les
navigateurs tactiles le désactivent ou le rendent mal. */
@media (max-width: 900px){
.fr-cta{ background-attachment: scroll; }
}
@media (prefers-reduced-motion: reduce){
.fr-cta{ background-attachment: scroll; }
}
/* La règle des liens de colonne l'emportait en spécificité sur le bouton :
son libellé sortait en bleu-gris au lieu du blanc. */
.fr-pied__colonne a.fr-pied__collab{ color: #fff; }
.fr-pied__colonne a.fr-pied__collab:hover{ color: var(--fr-indigo); }