/*
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;
/* Charte relevée sur dirips.fr le 29/08 : Inter pour les titres, Roboto
pour le texte courant. Nous composions en Montserrat et Open Sans. */
--font-heading: 'Inter', system-ui, sans-serif;
--font-body: 'Roboto', 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); }
/* --- 12. Cartes produit et icône de l'appel à l'action --------------- */
/* Couleurs prélevées au pixel sur leur page : le corps des cartes n'est pas
blanc mais bleu très pâle, et chaque produit porte sa propre teinte —
indigo pour Gestionnaire, menthe pour DirIgami Facturation. C'est ce que
le client appelle « le contraste entre les deux logiciels ». */
.fr-carte{ background: #EBF3FE; }
.fr-carte--bleu .fr-carte__picto{ background: #272378; }
.fr-carte--vert .fr-carte__picto{ background: #62D2B9; }
.fr-carte--bleu h3{ color: #2B248C; }
.fr-carte--vert h3{ color: #3BB79B; }
.fr-carte--bleu .fr-btn--plein{ background: #2B248C; border-color: #2B248C; }
.fr-carte--bleu .fr-btn--plein:hover{ background: #1E1A6B; border-color: #1E1A6B; }
.fr-carte--vert .fr-btn--plein{ background: #65D1B9; border-color: #65D1B9; color: #14503F; }
.fr-carte--vert .fr-btn--plein:hover{ background: #3BB79B; border-color: #3BB79B; color: #fff; }
/* La pastille est posée sur le coin haut droit et déborde légèrement du
bord supérieur, comme chez eux. */
.fr-carte__picto{ top: -22px; right: 22px; border-radius: 12px; }
.fr-cta__picto{ display: block; margin: 0 auto 26px; height: 96px; width: auto; }
@media (max-width: 620px){ .fr-cta__picto{ height: 72px; } }
/* --- 13. Pages intérieures ------------------------------------------ */
.fr-page-hero{
background: linear-gradient(160deg, #FFFFFF 0%, #EFF5FF 45%, #DCE8FE 100%);
padding: 72px 0 80px; position: relative; overflow: hidden;
}
.fr-page-hero__int{ display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; align-items: center; }
.fr-page-hero h1{
font-size: clamp(1.9rem, 3.2vw, 2.75rem); line-height: 1.2; color: var(--fr-indigo);
margin: 0 0 22px; font-weight: 800;
}
.fr-page-hero__chapo{ color: #3A4060; font-size: 1.03rem; line-height: 1.72; margin: 0 0 30px; max-width: 560px; }
.fr-page-hero__illus img{ display: block; width: 100%; height: auto; max-width: 430px; margin-left: auto; }
.fr-page-corps{ background: #fff; padding: 72px 0 84px; }
.fr-page-corps__int{ max-width: 860px; }
.fr-page-corps__int h2{ font-size: clamp(1.45rem, 2.2vw, 1.95rem); color: var(--fr-indigo); margin: 44px 0 18px; line-height: 1.3; }
.fr-page-corps__int h3{ font-size: 1.24rem; color: var(--fr-bleu); margin: 32px 0 14px; }
.fr-page-corps__int p{ color: #3A4060; line-height: 1.78; margin: 0 0 18px; }
.fr-page-corps__int ul,
.fr-page-corps__int ol{ color: #3A4060; line-height: 1.78; margin: 0 0 20px; padding-left: 22px; }
.fr-page-corps__int li{ margin-bottom: 9px; }
.fr-page-corps__int a{ color: var(--fr-bleu); }
.fr-page-corps__int img{ max-width: 100%; height: auto; border-radius: 12px; margin: 12px 0; }
.fr-page-corps__int blockquote{
margin: 26px 0; padding: 20px 26px; border-left: 4px solid var(--fr-vert-clair);
background: #F4F8FF; color: #2C3150; font-style: italic;
}
/* Les tableaux du contenu importé débordent sur mobile : ils défilent dans
leur propre cadre plutôt que de pousser la page. */
.fr-page-corps__int table{ width: 100%; border-collapse: collapse; margin: 22px 0; }
.fr-page-corps__int table td,
.fr-page-corps__int table th{ border: 1px solid var(--fr-gris); padding: 10px 12px; }
@media (max-width: 900px){
.fr-page-hero__int{ grid-template-columns: 1fr; gap: 32px; }
.fr-page-hero__illus{ display: none; }
}
/* Le champ de message garde sa largeur en colonnes par défaut, ce qui le
fait dépasser sur un petit écran. */
textarea{ max-width: 100%; box-sizing: border-box; }
/* --- 14. Pages à formulaire, alignées sur le .fr --------------------- */
/*
* Les quatre pages qui portent un formulaire — contact, démonstration,
* échange réglementaire, vérification de conformité — gardent leurs
* gabarits d'origine : le formulaire y est câblé aux traitements et le
* réécrire ferait courir un risque pour rien. Seule leur apparence est
* réalignée sur les pages intérieures reprises du .fr.
*/
.hero-page{
background: linear-gradient(160deg, #FFFFFF 0%, #EFF5FF 45%, #DCE8FE 100%);
color: var(--fr-indigo);
padding: 64px 0 76px;
}
.hero-page__fond{ display: none; }
.hero-page h1{ color: var(--fr-indigo); font-weight: 800; line-height: 1.2; }
.hero-page__chapo{ color: #3A4060; }
.hero-page .eyebrow{ color: var(--fr-bleu); background: rgba(42, 37, 137, .08); }
.hero-page li,
.hero-page__texte li{ color: #3A4060; }
.hero-page a:not(.btn):not(.fr-btn){ color: var(--fr-bleu); }
.hero-page .fil-ariane,
.hero-page .breadcrumb{ color: #6B7090; }
/* La carte du formulaire reprend le grain des cartes produit. */
.hero-page form,
.formulaire-carte{
background: #fff; border-radius: 14px;
box-shadow: 0 18px 44px rgba(30, 26, 107, .12);
}
.hero-page label{ color: var(--fr-indigo); font-weight: 600; }
.hero-page input[type="text"],
.hero-page input[type="email"],
.hero-page input[type="tel"],
.hero-page select,
.hero-page textarea{
border: 1px solid #D8E0F2; border-radius: 8px; background: #FBFCFF;
color: #171633; max-width: 100%; box-sizing: border-box;
}
.hero-page input:focus,
.hero-page select:focus,
.hero-page textarea:focus{ border-color: var(--fr-bleu); outline: 2px solid rgba(42,37,137,.14); }
/* Le bouton d'envoi était vert : c'est l'indigo qui porte l'action
principale sur leur site, le vert n'y sert que d'accent. */
.hero-page button[type="submit"],
.hero-page input[type="submit"],
.hero-page .btn-primary{
background: var(--fr-bleu); border-color: var(--fr-bleu); color: #fff;
border-radius: 30px; font-family: var(--font-heading); font-weight: 700;
letter-spacing: .06em; text-transform: uppercase; font-size: .82rem;
}
.hero-page button[type="submit"]:hover,
.hero-page input[type="submit"]:hover,
.hero-page .btn-primary:hover{ background: var(--fr-indigo); border-color: var(--fr-indigo); }
/* La bande de repères sous le formulaire suit la charte des chiffres. */
.vl-reassurance{ background: #fff; padding: 34px 0 8px; }
.vl-reassurance .stat-bar strong{ color: var(--fr-indigo); }
/* --- 15. Sections des pages intérieures ------------------------------ */
/*
* Le contenu importé est une suite de titres et de paragraphes. Découpé sur
* ses
, il devient une succession de bandes pleine largeur aux fonds
* alternés, comme les pages intérieures du .fr : le texte respire au lieu
* de défiler d'un bloc.
*/
.fr-bloc{ padding: 66px 0 72px; }
.fr-bloc--clair{ background: #fff; }
.fr-bloc--lavis{ background: linear-gradient(180deg, #F7FAFF 0%, #EDF3FF 100%); }
.fr-bloc--sombre{
background: var(--fr-indigo) url('assets/img/fr/DirIPS-BG-cta-scaled.webp') center/cover no-repeat;
color: #fff;
}
.fr-bloc__int{ max-width: 900px; }
.fr-bloc__int--deux{
max-width: none; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
gap: 52px; align-items: center;
}
.fr-bloc__int--inverse .fr-bloc__texte{ order: 2; }
.fr-bloc__int--inverse .fr-bloc__visuel{ order: 1; }
.fr-bloc__texte > *:first-child{ margin-top: 0; }
.fr-bloc h2{ font-size: clamp(1.5rem, 2.3vw, 2.05rem); line-height: 1.26; color: var(--fr-indigo); margin: 0 0 20px; }
.fr-bloc--sombre h2{ color: var(--fr-vert-clair); }
.fr-bloc h3{ font-size: 1.2rem; color: var(--fr-bleu); margin: 28px 0 12px; }
.fr-bloc--sombre h3{ color: #fff; }
.fr-bloc p{ color: #3A4060; line-height: 1.78; margin: 0 0 16px; }
.fr-bloc--sombre p{ color: #DCDFF4; }
.fr-bloc a{ color: var(--fr-bleu); }
.fr-bloc--sombre a{ color: var(--fr-vert-clair); }
.fr-bloc strong{ color: var(--fr-indigo); }
.fr-bloc--sombre strong{ color: #fff; }
.fr-bloc ul{ list-style: none; margin: 0 0 20px; padding: 0; }
.fr-bloc li{ position: relative; padding-left: 26px; margin-bottom: 10px; color: #3A4060; line-height: 1.68; }
.fr-bloc--sombre li{ color: #DCDFF4; }
.fr-bloc li::before{
content: ''; position: absolute; left: 0; top: .58em; width: 10px; height: 10px;
border-radius: 50%; background: var(--fr-vert-clair);
}
/* Le premier paragraphe d'une bande porte le propos : il est un cran plus
grand, comme sur leurs pages. */
.fr-bloc__texte > h2 + p{ font-size: 1.08rem; color: #2C3150; }
.fr-bloc--sombre .fr-bloc__texte > h2 + p{ color: #E6E8F8; }
/* Citations : le traitement de leur bloc témoignage, guillemet compris. */
.fr-bloc blockquote{
position: relative; margin: 26px 0; padding: 26px 30px 26px 58px;
background: #F4F8FF; border-radius: 14px; color: #2C3150;
font-style: italic; line-height: 1.72;
}
.fr-bloc blockquote::before{
content: '\201C'; position: absolute; left: 20px; top: 6px;
font-family: Georgia, serif; font-size: 3.4rem; color: var(--fr-vert-clair); line-height: 1;
}
.fr-bloc--sombre blockquote{ background: rgba(255,255,255,.08); color: #fff; }
/* Le visuel latéral reprend le rond des témoignages du .fr. */
.fr-bloc__visuel{ position: relative; }
.fr-bloc__visuel img{
position: relative; z-index: 2; display: block; width: 100%; height: auto;
border-radius: 18px; box-shadow: 0 22px 50px rgba(30, 26, 107, .16);
}
.fr-bloc__rond{ position: absolute; z-index: 1; border-radius: 50%; display: block; }
.fr-bloc__rond--vert{ width: 96px; height: 96px; background: var(--fr-vert-clair); left: -26px; top: -22px; opacity: .85; }
.fr-bloc__rond--bleu{ width: 72px; height: 72px; background: var(--fr-bleu-clair); right: -18px; bottom: -18px; opacity: .8; }
.fr-bloc table{ width: 100%; border-collapse: collapse; margin: 20px 0; }
.fr-bloc td, .fr-bloc th{ border: 1px solid #E1E8F5; padding: 10px 12px; }
.fr-bloc--sombre td, .fr-bloc--sombre th{ border-color: rgba(255,255,255,.18); }
@media (max-width: 900px){
.fr-bloc{ padding: 46px 0 50px; }
.fr-bloc__int--deux{ grid-template-columns: 1fr; gap: 32px; }
.fr-bloc__int--inverse .fr-bloc__texte,
.fr-bloc__int--inverse .fr-bloc__visuel{ order: initial; }
.fr-bloc__rond{ display: none; }
}
/* Les images restées dans le flux du texte : sans contrainte, un
pictogramme carré de 300 px s'étale sur toute la colonne. On les cadre,
et les petits carrés — les pictogrammes de valeurs — se rangent en ligne. */
.fr-bloc__texte img{
max-width: 100%; height: auto; border-radius: 14px;
display: block; margin: 18px 0;
}
.fr-bloc__texte p:has(> img){ display: flex; flex-wrap: wrap; gap: 22px; align-items: center; }
.fr-bloc__texte p > img{ width: 96px; height: 96px; object-fit: contain; margin: 0; border-radius: 50%; background: #fff; padding: 8px; }
/* Une image seule dans son paragraphe, et large à l'origine, reste une
illustration : elle garde une taille d'illustration, pas de vignette. */
.fr-bloc__texte p > img[width]:not([width="300"]):not([width="150"]){
width: min(520px, 100%); height: auto; border-radius: 14px; padding: 0;
}
/* Les pictogrammes de valeurs sont des ronds décoratifs, pas des
illustrations : ils gardaient l'attribut de largeur de leur fichier
d'origine, jusqu'à 980 px. On les ramène à leur usage. */
.fr-bloc__texte img[src*="valeurs"]{
width: 108px; height: 108px; object-fit: contain;
border-radius: 50%; background: #fff; padding: 6px; margin: 0 16px 16px 0;
display: inline-block; vertical-align: middle;
}
/* Toute autre image du flux reste une illustration cadrée. */
.fr-bloc__texte img:not([src*="valeurs"]){ width: min(520px, 100%); height: auto; }
/* Les règles précédentes se marchaient dessus : un pictogramme de valeur
portant width="980" tombait dans la règle des illustrations. On tranche
sur le nom du fichier, qui est le seul indice fiable, et on le fait avec
assez de poids pour passer devant. */
.fr-bloc .fr-bloc__texte img[src*="valeur"],
.fr-bloc .fr-bloc__visuel img[src*="valeur"]{
width: 104px; height: 104px; object-fit: contain;
border-radius: 50%; background: #fff; padding: 8px; box-shadow: none;
margin: 0 18px 14px 0; display: inline-block; vertical-align: middle;
}
/* Un bloc dont le seul visuel est un pictogramme n'a pas besoin de sa
colonne latérale : le picto rejoint le texte. */
.fr-bloc__int--deux:has(.fr-bloc__visuel img[src*="valeur"]){ grid-template-columns: 1fr; }
.fr-bloc__visuel:has(img[src*="valeur"]) .fr-bloc__rond{ display: none; }
/* La règle des illustrations gagnait en spécificité : ses deux :not()
comptent chacun pour une classe. On repasse devant avec le même poids
plus le nom de fichier. */
.fr-bloc__texte p > img[src*="valeur"][width]:not([width="0"]):not([width="1"]){
width: 104px; height: 104px; object-fit: contain;
border-radius: 50%; background: #fff; padding: 8px;
margin: 0 18px 14px 0; display: inline-block; vertical-align: middle;
}
/* --- 16. Mouvement au défilement -------------------------------------
*
* Demandé en réunion le 24/08 : « ajouter davantage de mouvements et
* d'interactions lors du défilement » et « pouvez-vous soigner les
* transitions ». On garde la mécanique d'apparition existante et on lui
* donne du relief : les blocs entrent depuis leur côté, les visuels se
* posent avec une légère mise au point, les cartes réagissent au survol.
*
* Tout est désactivé pour qui a demandé moins d'animations : la règle est
* en fin de section.
* ------------------------------------------------------------------- */
.fr-bloc .fr-bloc__texte.reveal{ opacity: 0; transform: translateX(-26px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); }
.fr-bloc .fr-bloc__visuel.reveal{ opacity: 0; transform: translateX(26px) scale(.96); transition: opacity .8s ease .1s, transform .8s cubic-bezier(.22,.61,.36,1) .1s; }
.fr-bloc__int--inverse .fr-bloc__texte.reveal{ transform: translateX(26px); }
.fr-bloc__int--inverse .fr-bloc__visuel.reveal{ transform: translateX(-26px) scale(.96); }
.fr-bloc .fr-bloc__texte.reveal.is-visible,
.fr-bloc .fr-bloc__visuel.reveal.is-visible{ opacity: 1; transform: none; }
/* Les ronds décoratifs arrivent après le visuel, en s'écartant. */
.fr-bloc__rond{ opacity: 0; transform: scale(.4); transition: opacity .7s ease .35s, transform .7s cubic-bezier(.34,1.56,.64,1) .35s; }
.reveal.is-visible .fr-bloc__rond{ opacity: .85; transform: scale(1); }
/* Bannière : le titre puis le texte puis les boutons, à un souffle
d'intervalle — c'est la cascade que Sofia trouvait plus vivante. */
.fr-hero__texte.reveal.is-visible h1,
.fr-page-hero__texte.reveal.is-visible h1{ animation: fr-monte .7s cubic-bezier(.22,.61,.36,1) both; }
.fr-hero__texte.reveal.is-visible p,
.fr-page-hero__texte.reveal.is-visible p{ animation: fr-monte .7s cubic-bezier(.22,.61,.36,1) .12s both; }
.fr-hero__actions,
.fr-page-hero__texte .fr-btn{ animation: fr-monte .7s cubic-bezier(.22,.61,.36,1) .26s both; }
@keyframes fr-monte{ from{ opacity: 0; transform: translateY(18px); } to{ opacity: 1; transform: none; } }
/* Les repères chiffrés montent l'un après l'autre. */
.fr-repere.reveal{ opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1); }
.fr-reperes__int .fr-repere:nth-child(2){ transition-delay: .1s; }
.fr-reperes__int .fr-repere:nth-child(3){ transition-delay: .2s; }
.fr-repere.reveal.is-visible{ opacity: 1; transform: none; }
/* Cartes : la profondeur bouge, pas la taille — moins tape-à-l'œil. */
.fr-carte,
.fr-actu,
.fr-temoignage{ transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease; }
.fr-carte:hover,
.fr-actu:hover{ transform: translateY(-6px); box-shadow: 0 26px 54px rgba(30, 26, 107, .18); }
.fr-carte__picto{ transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.fr-carte:hover .fr-carte__picto{ transform: rotate(-6deg) scale(1.06); }
/* Boutons et liens : une transition franche mais brève. */
.fr-btn{ transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease; }
.fr-btn--plein:hover{ transform: translateY(-2px); box-shadow: 0 12px 26px rgba(42, 37, 137, .3); }
.fr-actu__lien,
.fr-pied__colonne a,
.fr-pied__legal a{ transition: color .2s ease; }
.fr-actu__lien:hover{ transform: none; letter-spacing: .01em; }
/* Les pictogrammes de section se posent en tournant très légèrement. */
.fr-picto-section{ transition: transform .8s cubic-bezier(.22,.61,.36,1); }
.reveal.is-visible .fr-picto-section,
.fr-gamme .fr-picto-section{ transform: none; }
/* L'aile delta de la bannière dérive lentement : le mouvement de fond que
Sofia décrivait comme « plus interactif » sur leur ancien site. */
@keyframes fr-derive{ 0%{ transform: translate3d(0,0,0); } 50%{ transform: translate3d(-14px, 8px, 0); } 100%{ transform: translate3d(0,0,0); } }
.fr-hero__vague{ animation: fr-derive 16s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){
.fr-bloc .fr-bloc__texte.reveal,
.fr-bloc .fr-bloc__visuel.reveal,
.fr-repere.reveal,
.fr-bloc__rond{ opacity: 1; transform: none; transition: none; }
.fr-hero__vague{ animation: none; }
.fr-hero__texte.reveal.is-visible h1,
.fr-hero__texte.reveal.is-visible p,
.fr-page-hero__texte.reveal.is-visible h1,
.fr-page-hero__texte.reveal.is-visible p,
.fr-hero__actions,
.fr-page-hero__texte .fr-btn{ animation: none; }
.fr-carte:hover, .fr-actu:hover, .fr-btn--plein:hover{ transform: none; }
}
/* --- 17. Fiches produit, alignées sur la charte du .fr ---------------
*
* Sur leur site, chaque logiciel porte sa couleur : indigo pour
* Gestionnaire, menthe pour DirIgami Facturation. C'est ce que le client
* appelait « le manque de contraste entre les deux logiciels ». Le vert
* était appliqué aux deux, ce qui les rendait indistinguables.
* ------------------------------------------------------------------- */
.prod-hero{
background: linear-gradient(160deg, #FFFFFF 0%, #EFF5FF 45%, #DCE8FE 100%);
position: relative; overflow: hidden;
}
.prod-hero h1{ color: var(--fr-indigo); }
.prod-hero .eyebrow,
.prod-hero__surtitre{ color: var(--fr-bleu); }
.prod-hero p{ color: #3A4060; }
/* Gestionnaire : indigo. */
.single-logiciel .prod-hero__act .btn-vert,
body.postid-441 .prod-hero__act .btn-vert{
background: var(--fr-bleu); border-color: var(--fr-bleu); color: #fff;
}
.single-logiciel .prod-hero__act .btn-vert:hover{ background: var(--fr-indigo); border-color: var(--fr-indigo); }
.prod-hero__badge{ background: var(--fr-bleu); color: #fff; }
/* DirIgami Facturation : menthe, comme sur leur gamme. */
body.logiciel-dirigami-facturation .prod-hero__act .btn-vert,
body.postid-442 .prod-hero__act .btn-vert{
background: #65D1B9; border-color: #65D1B9; color: #14503F;
}
body.postid-442 .prod-hero__act .btn-vert:hover{ background: #3BB79B; border-color: #3BB79B; color: #fff; }
body.postid-442 .prod-hero__badge{ background: #3BB79B; }
/* Les puces de fonctionnalités suivent l'accent du produit. */
body.postid-441 .prod-liste li::marker,
body.postid-441 .prod-atout__icone{ color: var(--fr-bleu); }
body.postid-442 .prod-liste li::marker,
body.postid-442 .prod-atout__icone{ color: #3BB79B; }
/* Le bandeau de repères prend le fond blanc des pages intérieures. */
.prod-reassurance{ background: #fff; }
.prod-reassurance strong{ color: var(--fr-indigo); }
/* --- 18. Cadres réglementaires en cartes ------------------------------
*
* La page des cadres est le point d'arrivée du référencement : c'est là
* que le visiteur télécharge. Elle enchaînait une centaine de lignes
* indistinctes. Chaque document a désormais sa carte, ses fichiers en
* boutons, et les groupes sont séparés.
* ------------------------------------------------------------------- */
.fr-cadres{ margin-top: 8px; }
.fr-cadres__groupe{ margin: 0 0 46px; }
.fr-cadres__groupe > h3{
font-size: 1.18rem; color: var(--fr-indigo); margin: 0 0 20px; padding-bottom: 12px;
border-bottom: 2px solid var(--fr-vert-clair); letter-spacing: .01em;
}
.fr-cadres__groupe{ display: block; }
.fr-cadres__groupe > .fr-cadre{ margin-bottom: 14px; }
.fr-cadre{
background: #fff; border: 1px solid #E4EBF7; border-radius: 12px;
padding: 20px 24px; transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.fr-cadre:hover{ border-color: #C8D6F2; box-shadow: 0 14px 32px rgba(30, 26, 107, .10); transform: translateY(-2px); }
.fr-cadre h4{ font-size: 1.04rem; color: var(--fr-indigo); margin: 0 0 8px; line-height: 1.35; }
.fr-cadre__texte,
.fr-cadre p{ color: #4A4E66; font-size: .94rem; line-height: 1.62; margin: 0 0 12px; }
/* Chaque fichier devient un bouton, avec son format annoncé : le visiteur
sait ce qu'il télécharge avant de cliquer. */
.fr-cadre__fichier{
display: inline-flex; align-items: center; gap: 9px;
margin: 6px 10px 0 0; padding: 9px 16px;
background: #F2F6FF; border: 1px solid #DCE6F8; border-radius: 24px;
color: var(--fr-bleu); text-decoration: none; font-size: .88rem; font-weight: 600;
transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.fr-cadre__fichier::before{
content: attr(data-ext); text-transform: uppercase; font-size: .62rem; letter-spacing: .08em;
background: var(--fr-vert); color: #fff; padding: 3px 7px; border-radius: 4px; font-weight: 700;
}
.fr-cadre__fichier:hover{ background: var(--fr-bleu); border-color: var(--fr-bleu); color: #fff; transform: translateY(-2px); }
.fr-cadre__fichier:hover::before{ background: rgba(255,255,255,.22); }
/* Sur fond indigo, la carte s'inverse. */
.fr-bloc--sombre .fr-cadre{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); }
.fr-bloc--sombre .fr-cadre h4{ color: #fff; }
.fr-bloc--sombre .fr-cadre p{ color: #DCDFF4; }
.fr-bloc--sombre .fr-cadres__groupe > h3{ color: var(--fr-vert-clair); }
@media (max-width: 620px){
.fr-cadre{ padding: 16px 18px; }
.fr-cadre__fichier{ width: 100%; justify-content: flex-start; margin-right: 0; }
}
/* Le bouton d'envoi restait vert hors de la bannière : l'indigo porte
l'action principale partout, le vert n'est qu'un accent. */
form button[type="submit"],
form input[type="submit"],
.btn-vert{
background: var(--fr-bleu); border-color: var(--fr-bleu); color: #fff;
border-radius: 30px; font-family: var(--font-heading); font-weight: 700;
letter-spacing: .06em; text-transform: uppercase; font-size: .82rem;
transition: background-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
form button[type="submit"]:hover,
form input[type="submit"]:hover,
.btn-vert:hover{
background: var(--fr-indigo); border-color: var(--fr-indigo);
transform: translateY(-2px); box-shadow: 0 12px 26px rgba(42, 37, 137, .28);
}
/* Le formulaire d'inscription du pied garde son accent menthe : il n'est
pas en concurrence avec l'action principale de la page. */
.newsletter button[type="submit"]{ background: var(--fr-vert); border-color: var(--fr-vert); }
.newsletter button[type="submit"]:hover{ background: #0B846C_; background: #0B8A6E; border-color: #0B8A6E; }
/* --- 19. Correctifs de la revue page par page ------------------------ */
/* Sur fond indigo, seuls h2 et h3 étaient traités : les h4 et h5 du
contenu importé restaient en encre presque noire, donc illisibles. */
.fr-bloc--sombre h4,
.fr-bloc--sombre h5,
.fr-bloc--sombre h6{ color: #fff; }
.fr-bloc--sombre span,
.fr-bloc--sombre em,
.fr-bloc--sombre td,
.fr-bloc--sombre th{ color: #DCDFF4; }
.fr-bloc--sombre .fr-cadre__texte{ color: #DCDFF4; }
/* Le numéro de téléphone du pied héritait du gris de texte courant. */
.fr-pied__tel,
.fr-pied p{ color: #C9CDE8; }
/* Les boutons de Divi survivaient en simples liens : ils reprennent
l'apparence des nôtres, sinon l'appel à l'action disparaît dans le
texte. */
.fr-bloc a.et_pb_button,
.fr-bloc a[class*="et_pb_button"]{
display: inline-block; margin: 6px 12px 6px 0; padding: 13px 26px;
background: var(--fr-bleu); color: #fff; border: 2px solid var(--fr-bleu);
border-radius: 30px; text-decoration: none;
font-family: var(--font-heading); font-weight: 700; font-size: .8rem;
letter-spacing: .08em; text-transform: uppercase;
transition: background-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.fr-bloc a[class*="et_pb_button"]:hover{
background: var(--fr-indigo); border-color: var(--fr-indigo);
transform: translateY(-2px); box-shadow: 0 12px 26px rgba(42,37,137,.28);
}
.fr-bloc--sombre a[class*="et_pb_button"]{ background: transparent; border-color: #fff; color: #fff; }
.fr-bloc--sombre a[class*="et_pb_button"]:hover{ background: #fff; color: var(--fr-indigo); }
/* Les tableaux du contenu importé sont plus larges que l'écran d'un
téléphone : ils défilent dans leur propre cadre plutôt que de pousser
toute la page. Le cadre porte une ombre à droite tant qu'il reste du
contenu à faire glisser, sinon rien n'indique qu'on peut le faire. */
.fr-bloc__texte table,
.fr-page-corps__int table{ display: block; overflow-x: auto; max-width: 100%; }
@supports (scrollbar-width: thin){
.fr-bloc__texte table{ scrollbar-width: thin; }
}
.fr-bloc__texte table tbody{ display: table; width: 100%; min-width: 460px; }
.fr-bloc__texte table thead{ display: table; width: 100%; min-width: 460px; }
/* Un décor en pseudo-élément débordait de 27 px sur mobile, invisible à
l'inspection puisqu'aucun nœud du document ne le porte. `clip` coupe le
dépassement sans créer de contexte de défilement, contrairement à
`hidden` qui casserait l'en-tête collant. */
/* Le décalage d'entrée des blocs (26px sur l'axe X) débordait aussi entre
1001 et 1279px, là où le conteneur touche presque les bords de la fenêtre.
Au-delà de 1280px il est centré à largeur fixe et garde sa marge : la borne
s'arrête donc là, pour ne rien rogner sur les grands écrans. */
@media (max-width: 1279px){
main, .fr-bloc, .fr-page-hero, .fr-hero{ overflow-x: clip; }
}
/* Les logos partenaires arrivaient chacun dans son paragraphe, à 520 px de
large et empilés : une colonne de logos géants. Ils passent en grille,
à taille de logo, sur une pastille blanche. */
.fr-bloc__texte img[src*="logo-"]{
width: auto; max-width: 170px; max-height: 74px; height: auto;
object-fit: contain; display: block; margin: 0 auto;
border-radius: 0; box-shadow: none;
}
.fr-bloc__texte p:has(> img[src*="logo-"]){
display: inline-flex; align-items: center; justify-content: center;
width: 200px; height: 108px; margin: 0 14px 14px 0; padding: 14px 18px;
background: #fff; border: 1px solid #E4EBF7; border-radius: 12px;
transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
vertical-align: top;
}
.fr-bloc__texte p:has(> img[src*="logo-"]):hover{
border-color: #C8D6F2; box-shadow: 0 12px 26px rgba(30,26,107,.10); transform: translateY(-3px);
}
.fr-bloc--sombre .fr-bloc__texte p:has(> img[src*="logo-"]){ background: #fff; border-color: rgba(255,255,255,.2); }
@media (max-width: 620px){
.fr-bloc__texte p:has(> img[src*="logo-"]){ width: calc(50% - 10px); height: 92px; margin-right: 10px; }
}
/* Sur la page partenaires, chaque logo est suivi d'un lien portant le nom
de la marque. Traité comme un bouton, ce lien devenait une grosse
pastille bleue et cassait la ligne. Il redevient une légende, et le
conteneur range les couples logo + nom en grille. */
.fr-bloc__texte:has(img[src*="logo-"]){
display: flex; flex-wrap: wrap; gap: 0 6px; align-items: flex-start;
}
.fr-bloc__texte:has(img[src*="logo-"]) > h2,
.fr-bloc__texte:has(img[src*="logo-"]) > h3,
.fr-bloc__texte:has(img[src*="logo-"]) > p:not(:has(img)){ flex: 0 0 100%; }
.fr-bloc__texte:has(img[src*="logo-"]) > a[class*="et_pb_button"]{
flex: 0 0 200px; margin: 0 14px 22px 0; padding: 0;
background: none; border: 0; color: #6B7090;
font-size: .74rem; letter-spacing: .07em; text-transform: uppercase;
text-align: center; font-weight: 700;
}
.fr-bloc__texte:has(img[src*="logo-"]) > a[class*="et_pb_button"]:hover{
background: none; color: var(--fr-bleu); transform: none; box-shadow: none;
}
.fr-bloc__texte:has(img[src*="logo-"]) > p:has(> img[src*="logo-"]){
flex: 0 0 200px; margin: 0 14px 6px 0;
}
/* Le nom de la marque suit le logo dans un paragraphe ordinaire : ma règle
précédente, qui donnait toute la largeur aux paragraphes sans image, le
faisait passer à la ligne. On le reconnaît à sa position — celui qui
suit immédiatement un logo — et il devient la légende de la vignette. */
.fr-bloc__texte:has(img[src*="logo-"]) > p:has(> img[src*="logo-"]) + p{
flex: 0 0 200px; margin: 0 14px 24px 0; padding: 0;
color: #6B7090; font-size: .74rem; font-weight: 700;
letter-spacing: .07em; text-transform: uppercase; text-align: center;
}
/* Le nom de la marque est un bouton Divi niché dans le paragraphe qui suit
le logo. En pastille bleue il volait la vedette au logo ; il redevient
une légende discrète. */
.fr-bloc__texte:has(img[src*="logo-"]) p:has(> img[src*="logo-"]) + p a[class*="et_pb_button"],
.fr-bloc__texte:has(img[src*="logo-"]) p:has(> img[src*="logo-"]) + p > a{
display: block; margin: 0; padding: 0;
background: none; border: 0; box-shadow: none;
color: #6B7090; font-size: .74rem; font-weight: 700;
letter-spacing: .07em; text-transform: uppercase; text-align: center;
}
.fr-bloc__texte:has(img[src*="logo-"]) p:has(> img[src*="logo-"]) + p a:hover{
background: none; color: var(--fr-bleu); transform: none; box-shadow: none;
}
/* La légende se décalait d'une case : dans un flux en grille, le nom du
premier logo vient se placer sous le deuxième. Les partenaires sont tous
des logotypes lisibles — Talentia, Sage, GePI, EBP, Cegid — la légende
n'apporte rien et le lien reste porté par la vignette. */
.fr-bloc__texte:has(img[src*="logo-"]) p:has(> img[src*="logo-"]) + p{ display: none; }
/* ==========================================================================
Contenu importé du .com : cartes et mosaïques
--------------------------------------------------------------------------
Divi disposait en colonnes les séries « visuel + intertitre + description ».
L'export a perdu les colonnes : chacune se retrouvait seule sur toute la
largeur, et une page de trois produits faisait défiler trois écrans. On leur
rend leur grille.
La mosaïque, elle, sert aux suites de sections trop courtes pour tenir une
bande — les étapes de fabrication d'un produit, les partenaires listés un
par un. Regroupées, elles forment une section ; séparées, elles donnaient
des bandes de deux lignes.
========================================================================== */
.fr-cartes{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 26px;
margin: 32px 0 8px;
}
.fr-carte{
display: flex; flex-direction: column;
background: #fff;
border: 1px solid var(--fr-degrade-bord, #E4EAF6);
border-radius: 16px;
padding: 24px 24px 26px;
box-shadow: 0 10px 28px rgba(30, 26, 107, .07);
}
.fr-bloc--sombre .fr-carte{
background: rgba(255, 255, 255, .07);
border-color: rgba(255, 255, 255, .16);
box-shadow: none;
}
.fr-carte__media{ margin: -4px 0 18px; }
.fr-carte__media a,
.fr-carte__media p{ margin: 0; display: block; }
/* Le visuel de carte est un carré de 300 px à l'origine : on le cadre en
bandeau, sinon il impose sa hauteur à toute la rangée. */
.fr-carte__media img{
width: 100%; height: 148px; object-fit: cover;
border-radius: 12px; display: block; margin: 0; padding: 0;
background: var(--fr-gris);
}
.fr-carte h3{
font-size: 1.12rem; line-height: 1.3; margin: 0 0 10px;
color: var(--fr-indigo);
}
.fr-bloc--sombre .fr-carte h3{ color: #fff; }
.fr-carte h3 a{ text-decoration: none; }
.fr-carte h3 a:hover{ text-decoration: underline; }
.fr-carte p{ margin: 0 0 6px; font-size: .96rem; line-height: 1.6; }
.fr-carte p:last-child{ margin-bottom: 0; }
.fr-carte ul{ margin: 0; }
/* Une carte sans visuel garde un repère coloré, pour que la rangée ne soit
pas une suite de rectangles blancs identiques. */
.fr-carte:not(:has(.fr-carte__media)){
border-top: 3px solid var(--fr-vert-clair);
padding-top: 22px;
}
/* --- Mosaïque des sections courtes regroupées --- */
.fr-mosaique{
display: grid;
gap: 30px 40px;
max-width: 1100px;
margin: 0 auto;
}
.fr-mosaique--2{ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.fr-mosaique--3{ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.fr-mosaique__item > *:first-child{ margin-top: 0; }
.fr-mosaique__item h3{
font-size: 1.16rem; line-height: 1.3; margin: 0 0 12px;
color: var(--fr-indigo); position: relative; padding-top: 14px;
}
.fr-mosaique__item h3::before{
content: ''; position: absolute; left: 0; top: 0;
width: 34px; height: 3px; border-radius: 2px; background: var(--fr-vert-clair);
}
.fr-bloc--sombre .fr-mosaique__item h3{ color: #fff; }
.fr-mosaique__item p{ margin: 0 0 12px; }
.fr-mosaique__item p:last-child{ margin-bottom: 0; }
.fr-mosaique__item img{ max-width: 100%; height: auto; border-radius: 12px; }
@media (max-width: 700px){
.fr-cartes{ gap: 18px; }
.fr-carte{ padding: 20px; }
.fr-carte__media img{ height: 168px; }
.fr-mosaique{ gap: 26px; }
}
/* Une mosaïque de témoignages ou de webinaires porte une vignette : sans
cadre, chaque image imposait sa hauteur d'origine à sa rangée. */
.fr-mosaique__item img{
width: 100%; height: 172px; object-fit: cover;
border-radius: 12px; display: block; margin: 0 0 14px;
}
.fr-mosaique__item p:has(> img){ display: block; margin: 0 0 14px; }
/* --- 20. Bandeau des partenaires ------------------------------------
*
* « Un affichage plus dynamique, par exemple sous la forme d'un
* défilement horizontal des logos », demandé le 24/08. La piste est
* doublée dans le gabarit : l'animation la décale d'exactement la moitié,
* la boucle est donc invisible.
* ------------------------------------------------------------------- */
.fr-confiance{ background: #fff; padding: 66px 0 70px; text-align: center; overflow: hidden; }
.fr-confiance h2{
font-size: clamp(1.35rem, 2vw, 1.7rem); color: var(--fr-indigo); margin: 0 0 12px;
}
.fr-confiance__chapo{
max-width: 620px; margin: 0 auto 40px; color: var(--fr-bleu-clair);
line-height: 1.65; font-size: .98rem;
}
.fr-defile{
position: relative;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.fr-defile__piste{ display: flex; width: max-content; animation: fr-defile 34s linear infinite; }
.fr-defile__lot{
display: flex; align-items: center; gap: 62px;
list-style: none; margin: 0; padding: 0 31px;
}
.fr-defile__lot img{
height: 46px; width: auto; max-width: 168px; object-fit: contain;
filter: grayscale(1); opacity: .62;
transition: filter .3s ease, opacity .3s ease;
}
.fr-defile__lot img:hover{ filter: none; opacity: 1; }
@keyframes fr-defile{ from{ transform: translate3d(0,0,0); } to{ transform: translate3d(-50%,0,0); } }
/* Au survol on suspend : le visiteur qui veut lire un nom peut le faire. */
.fr-defile:hover .fr-defile__piste{ animation-play-state: paused; }
@media (prefers-reduced-motion: reduce){
.fr-defile__piste{ animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
.fr-defile__lot[aria-hidden="true"]{ display: none; }
.fr-defile__lot{ flex-wrap: wrap; justify-content: center; gap: 40px; }
}
@media (max-width: 620px){
.fr-defile__lot{ gap: 40px; padding: 0 20px; }
.fr-defile__lot img{ height: 38px; }
}
/* ---------------------------------------------------------------------------
Boutons sortis des cartes (28/08)
Les appels à l'action de fin de section tombaient dans la dernière carte de
la grille, qui dépassait alors ses voisines. Ils forment maintenant leur
propre rangée, sous la grille.
--------------------------------------------------------------------------- */
.fr-actions{
display: flex;
flex-wrap: wrap;
gap: 14px;
margin: 30px 0 6px;
}
.fr-actions .fr-btn{ margin: 0; }
/* Les cartes d'une même rangée gardent la même hauteur. */
.fr-cartes{ align-items: stretch; }
.fr-carte{ display: flex; flex-direction: column; }
.fr-carte > p:last-child{ margin-bottom: 0; }
/* Trois blocs restent sur une ligne tant que la place le permet : la borne à
240px laissait parfois passer un retour à la ligne prématuré sur portable
large. En dessous de 900px ils s'empilent franchement. */
@media (min-width: 900px){
.fr-cartes{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fr-cartes:has(> .fr-carte:nth-child(4)){
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.fr-cartes:has(> .fr-carte:nth-child(2):last-child){
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.fr-cartes:has(> .fr-carte:only-child){ grid-template-columns: minmax(0, 1fr); }
}
/* ---------------------------------------------------------------------------
Pagination centrée (28/08)
Le bloc de liens était en `inline-flex` dans un conteneur en bloc : il se
collait au bord gauche de la grille au lieu de se poser sous son milieu.
--------------------------------------------------------------------------- */
.pagination, .navigation.pagination, .posts-navigation{
display: flex;
justify-content: center;
margin: 44px 0 8px;
}
.pagination .nav-links, .navigation .nav-links{ justify-content: center; }
.pagination .screen-reader-text, .navigation .screen-reader-text{
position: absolute; width: 1px; height: 1px;
margin: -1px; padding: 0; overflow: hidden;
clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* ---------------------------------------------------------------------------
Séquence d'étapes (28/08)
Sur « Dir IPS », la naissance d'un produit se lit en quatre temps. Le .com
les signalait par des bandeaux jaune et vert vif, hors charte, et centrait
leur texte au milieu de pages alignées à gauche. La numérotation remplace
la couleur : ici elle porte une information réelle, l'ordre des étapes.
--------------------------------------------------------------------------- */
.fr-etapes{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 22px;
counter-reset: fr-etape;
list-style: none;
margin: 36px 0 0;
padding: 0;
}
.fr-bloc .fr-etape,
.fr-etape{
counter-increment: fr-etape;
padding-left: 22px;
margin-bottom: 0;
color: inherit;
position: relative;
padding: 26px 22px 24px;
border-radius: 16px;
background: rgba(255, 255, 255, .07);
border: 1px solid rgba(255, 255, 255, .16);
}
.fr-bloc .fr-etape::before,
.fr-etape::before{
content: counter( fr-etape );
position: static;
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
margin-bottom: 14px;
border-radius: 50%;
background: var(--turquoise, #11CFC1);
color: #17124F;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.fr-bloc .fr-etape h3,
.fr-etape h3{
margin: 0 0 10px;
font-size: 1.06rem;
line-height: 1.3;
text-align: left;
}
.fr-bloc .fr-etape p,
.fr-etape p{ margin: 0 0 8px; text-align: left; }
.fr-etape p:last-child{ margin-bottom: 0; }
.fr-etape em{ font-style: normal; font-weight: 600; }
/* Sur fond clair, la même séquence en encre. */
.fr-bloc--clair .fr-etape,
.fr-bloc--lavis .fr-etape{
background: #fff;
border-color: var(--azure-line, #D7E3F6);
}
.fr-bloc--clair .fr-etape::before,
.fr-bloc--lavis .fr-etape::before{
background: var(--navy, #2B248C);
color: #fff;
}
@media (max-width: 720px){
.fr-etapes{ grid-template-columns: 1fr; gap: 16px; }
}
/* ---------------------------------------------------------------------------
Déroulants de fin de barre (28/08)
Tous les sous-menus s'ouvraient vers la droite depuis le bord gauche de leur
parent. Sur les derniers éléments de la barre, leurs 240px sortaient de la
fenêtre et élargissaient la page entre 1200 et 1279px de large. Les deux
derniers s'alignent maintenant sur le bord droit de leur parent.
--------------------------------------------------------------------------- */
@media (min-width: 981px){
.main-nav > ul > li:nth-last-child(-n+2) > ul.sub-menu{
left: auto;
right: 0;
}
}
/* ---------------------------------------------------------------------------
Charte relevée sur dirips.fr (29/08)
Trois valeurs manquaient à notre palette. La plus visible : le bleu pâle
dans lequel ils écrivent « Dir » au début de leurs titres. Nous avions un
#4A54D6 bien plus foncé, qui ne donnait aucun contraste avec l'indigo.
--------------------------------------------------------------------------- */
:root{
--fr-bleu-pale: #9DBEF4; /* « Dir » dans les titres, intertitres sur fond sombre */
--fr-turquoise: #64D2B9; /* titres de section sur fond sombre */
--fr-indigo-clair: #3732A0;/* second ton des dégradés indigo */
}
/* La marque en deux tons. Sur fond sombre le bleu pâle tient seul ; sur fond
clair il a besoin que « IPS » reste dans l'indigo pour que le contraste
se lise comme une intention et non comme une faiblesse. */
.fr-marque-dir{ color: var(--fr-bleu-pale); }
.fr-bloc--sombre .fr-marque-dir,
.fr-hero .fr-marque-dir,
.fr-cta .fr-marque-dir,
.fr-etape .fr-marque-dir{ color: var(--fr-bleu-pale); }
/* Titre de section sur fond sombre : leur turquoise, pas notre vert vif. */
.fr-bloc--sombre h2,
.fr-cta h2{ color: var(--fr-turquoise); }
/* Intertitres sur fond sombre : le bleu pâle, comme sur leurs pages. */
.fr-bloc--sombre h3,
.fr-bloc--sombre .fr-carte h3,
.fr-bloc--sombre .fr-etape h3{ color: var(--fr-bleu-pale); }
/* Bannière d'accueil : leurs valeurs exactes. Nous étions à #1E1A6B en 46px
avec un « Dir » en #4A54D6, presque de la même valeur que le reste du titre :
le contraste ne se voyait pas. */
.fr-hero h1{ color: var(--navy); font-size: clamp(2rem, 3.5vw, 3.125rem); }
.fr-hero h1 > span,
.fr-hero h1 .fr-marque-dir{ color: var(--fr-bleu-pale); }
.fr-page-hero h1{ color: var(--navy); }
/* Surtitre de bannière : le libellé court du .com, posé au-dessus du titre
comme sur dirips.fr, où il annonce la rubrique sans manger la place du
chapeau. */
.fr-page-hero__surtitre{
margin: 0 0 10px;
font-family: var(--font-heading);
font-size: .78rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--fr-bleu-pale);
}
.fr-page-hero__chapo{ max-width: 46ch; }
/* ---------------------------------------------------------------------------
Bandes sombres : leurs dégradés (29/08)
Sur dirips.fr les bandes indigo ne sont pas des aplats. La bande de section
descend de #2A2586 vers #3C37A7 en biais, et la bande d'appel final part
d'un indigo presque noir. C'est ce qui leur donne de la profondeur là où nos
aplats posés sur une photo restaient sourds.
--------------------------------------------------------------------------- */
.fr-bloc--sombre{
background: linear-gradient(145deg, #2A2586 67%, #3C37A7 100%);
}
.fr-cta{
background: linear-gradient(150deg, #0D0A4A 0%, #2A2585 100%);
background-attachment: scroll;
}
.fr-cta h2{ color: var(--fr-turquoise); }
/* Listes de contenu : leur cercle coché turquoise, à la place de notre point.
Le pied de page et la navigation gardent leurs propres puces. */
.fr-bloc__texte ul:not(.fr-etapes):not(.fr-valeurs):not(.fr-partenaires) > li::before,
.article-corps ul > li::before{
content: '';
position: absolute;
left: 0;
top: .34em;
width: 19px;
height: 19px;
border-radius: 0;
background: var(--fr-turquoise);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm155 195L233 381c-5 5-12 5-17 0l-115-115c-5-5-5-12 0-17l17-17c5-5 12-5 17 0l90 90 152-152c5-5 12-5 17 0l17 17c4 4 4 12-1 16z'/%3E%3C/svg%3E") center/contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm155 195L233 381c-5 5-12 5-17 0l-115-115c-5-5-5-12 0-17l17-17c5-5 12-5 17 0l90 90 152-152c5-5 12-5 17 0l17 17c4 4 4 12-1 16z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.fr-bloc__texte ul:not(.fr-etapes):not(.fr-valeurs):not(.fr-partenaires) > li,
.article-corps ul > li{ padding-left: 30px; }
/* Boutons à contour sur fond sombre.
Le contour était tracé dans l'indigo de la marque : posé sur une bande
indigo, il devenait invisible et les boutons se lisaient comme de simples
liens. Sur fond sombre, contour clair et libellé dans leur turquoise. */
.fr-bloc--sombre .fr-btn--ligne,
.fr-cta .fr-btn--ligne,
.fr-etape .fr-btn--ligne{
border-color: rgba(255, 255, 255, .42);
color: var(--fr-turquoise);
}
.fr-bloc--sombre .fr-btn--ligne:hover,
.fr-cta .fr-btn--ligne:hover,
.fr-etape .fr-btn--ligne:hover{
border-color: var(--fr-turquoise);
background: rgba(100, 210, 185, .12);
color: #fff;
}
/* ⛔ Ticket #52. J'avais passé TOUS les boutons à contour au turquoise pour
régler leur invisibilité sur les bandes indigo. Sur la bannière claire, ce
turquoise sur fond pâle ne se lit plus : « Découvrir nos logiciels » était
presque effacé. Le turquoise ne vaut donc que sur fond sombre ; sur fond
clair le libellé reprend l'indigo de la marque, qui contraste. */
.fr-btn--ligne{ color: var(--navy); border-color: var(--navy); }
.fr-btn--ligne:hover{ background: rgba(42, 37, 134, .07); color: var(--navy); }
/* Couleur des titres de section : la leur. Nous écrivions les h2 des bandes
claires en #1E1A6B, un cran plus sombre que leur #2A2586 — l'écart se voyait
dès qu'on posait les deux pages côte à côte. */
.fr-bloc h2,
.fr-bloc--clair h2,
.fr-bloc--lavis h2{ color: var(--navy); }
.fr-bloc--sombre h2{ color: var(--fr-turquoise); }
/* Un seul turquoise sur tout le site. Le nôtre, #3FD9BC, était plus saturé que
le leur : la nuance sautait aux yeux entre le pied de page et leurs pages. */
:root{ --fr-vert-clair: #64D2B9; }
/* ===========================================================================
ACCUEIL — les valeurs relevées sur dirips.fr, section par section (29/08)
Chaque fond, chaque hauteur et chaque couleur de titre vient de leur page.
Ce que nous posions en aplat, ils le posent en dégradé : c'est ce qui donne
à leur accueil sa profondeur d'un bout à l'autre du défilement.
=========================================================================== */
/* 1. Bannière — 900px chez eux, 594 chez nous : leur accueil respire.
⚠️ La hauteur se pose sur le conteneur intérieur, pas sur la section :
mettre la section en `flex` faisait du conteneur un élément souple, qui
perdait sa largeur et poussait le texte au milieu de la photo. */
.fr-hero{ min-height: 900px; }
.fr-hero__int{ min-height: 900px; padding: 90px 0; }
/* 3. « Des logiciels conçus pour les enjeux des ESMS » */
.fr-enjeux{
background: linear-gradient(145deg, #2A2586 67%, #3C37A7 100%);
padding: 96px 0 104px;
}
/* 4. « Une gamme de logiciels complémentaires » — leur titre est en #3732A0,
un indigo plus clair que celui des autres sections. */
.fr-gamme{
background: #fff url('assets/img/fr/DirIPS-BG-Gamme-1-scaled.webp') center/cover no-repeat;
padding: 88px 0 92px;
}
.fr-gamme h2{ color: var(--fr-indigo-clair); }
/* 6. Témoignages — un dégradé bleu ciel qui s'éteint vers le blanc. */
.fr-temoignages{
background: linear-gradient(#DCE9FF 49%, #FFFFFF 100%);
padding: 96px 0 104px;
}
.fr-temoignages h2{ color: var(--navy); }
/* 7. Actualités — leur bande indigo en biais, titre en blanc. */
.fr-actus{
background: linear-gradient(149deg, #2A2586 70%, #3C37A7 100%);
color: #fff;
padding: 96px 0 104px;
}
.fr-actus h2{ color: #fff; }
/* 8. Newsletter — leur fond dédié. */
.fr-newsletter{
background: #1E1A6B url('assets/img/fr/Dir-IPSFond-Newsletter.webp') center/cover no-repeat;
padding: 72px 0;
}
/* Le bandeau partenaires, que le client a demandé en plus de leur accueil,
se pose sur le blanc où s'éteint le dégradé des témoignages. */
.fr-confiance{ background: #FFFFFF; }
.fr-confiance h2{ color: var(--navy); }
/* ---------------------------------------------------------------------------
Accueil : leurs huit bandes relevées au pixel (29/08)
Leur page fait 6400px, la nôtre 6010. L'écart venait d'une bannière trop
courte et de trois bandes traitées en aplat là où ils posent un dégradé.
--------------------------------------------------------------------------- */
/* 1. La bannière : 900px chez eux, 594 chez nous.
⚠️ La hauteur se pose sur le conteneur interne, pas sur la section : mettre
`display:flex` sur `.fr-hero` transforme le fond, la vague et le conteneur
en éléments flex — le conteneur, centré par ses marges automatiques, emporte
le texte au milieu de la photo, là où elle est la plus chargée. */
.fr-hero__int{ min-height: 900px; padding: 90px 0; }
/* 3. Les enjeux ESMS : leur dégradé en biais, pas une photo. */
.fr-enjeux{
background: linear-gradient(145deg, #2A2586 67%, #3C37A7 100%) !important;
}
/* 4. La gamme : leur indigo clair sur le titre, pas notre indigo foncé. */
.fr-gamme h2{ color: var(--fr-indigo-clair); }
/* 6. Les témoignages : un dégradé du bleu pâle vers le blanc, pas un aplat.
C'est ce qui pose la section sans la couper du reste de la page. */
.fr-temoignages{
background: linear-gradient(#DCE9FF 49%, #FFFFFF 100%);
}
/* 7. Les actualités : le même biais que les enjeux, plus prononcé. */
.fr-actus{
background: linear-gradient(149deg, #2A2586 70%, #3C37A7 100%);
}
.fr-actus h2{ color: #fff; }
/* Le bandeau partenaires s'intercale entre témoignages et actualités : il
prend le blanc sur lequel le dégradé des témoignages se termine. */
.fr-confiance{ background: #FFFFFF; }
/* ---------------------------------------------------------------------------
Bannière d'accueil : plus de voile (29/08)
Nous posions un dégradé blanc par-dessus la photo, en croyant reprendre le
.fr « au pixel ». Leur bannière n'a aucun voile : le dégradé blanc est déjà
peint dans le fichier — d'où son nom, « Invert » — et ils calent simplement
l'image en haut à droite. Notre voile la délavait deux fois.
--------------------------------------------------------------------------- */
.fr-hero::after{ content: none; }
.fr-hero__fond{ background-position: 100% 0%; }
/* Bannière d'accueil : la position de leur titre, relevée au pixel.
Le leur commence à 185px du haut de la bande et à 135px du bord gauche ;
le nôtre tombait à 253 et 100 parce que le contenu se centrait dans la
hauteur. Il se cale donc en haut, à leur retrait. */
.fr-hero__int{
align-items: flex-start;
padding-top: 185px;
padding-bottom: 90px;
}
/* ⚠️ Une marge, pas un retrait intérieur : le padding rognait la colonne de
35px et les deux boutons, qui font 612px à eux deux, passaient l'un sous
l'autre alors qu'ils tiennent sur une ligne chez eux. */
.fr-hero__texte{ margin-left: 35px; max-width: 640px; }
.fr-hero__texte p{ max-width: 585px; }
.fr-hero h1{ margin-top: 0; }
/* Le voile blanc était trop discret : le paragraphe restait posé sur les
visages de la photo. Chez eux la moitié gauche est franchement blanche. */
.fr-hero::after{
background: linear-gradient(90deg,
#fff 0%,
rgba(255, 255, 255, .97) 30%,
rgba(255, 255, 255, .80) 46%,
rgba(240, 244, 255, .38) 66%,
rgba(255, 255, 255, 0) 100%);
}
@media (max-width: 900px){
.fr-hero__int{ min-height: 0; padding-top: 96px; padding-bottom: 72px; }
.fr-hero__texte{ margin-left: 0; }
}
/* ---------------------------------------------------------------------------
Textures de fond relevées sur dirips.fr (29/08)
⛔ Leurs bandes indigo ne sont pas de simples dégradés. Une image est posée
par-dessus en `::before`, à faible opacité : c'est elle qui donne la matière
qu'on voit derrière « PERFORMANCE / SIMPLICITÉ / SÉCURITÉ » et qui manquait
chez nous. Elle m'avait échappé parce qu'elle n'est ni sur la section ni sur
ses parents, mais sur un pseudo-élément.
⚠️ Aucun parallaxe : mesuré, rien ne bouge au défilement, ni transformation
ni `background-attachment: fixed`. La texture est solidaire de sa bande.
--------------------------------------------------------------------------- */
.fr-enjeux{ position: relative; isolation: isolate; }
.fr-enjeux::before{
content: '';
position: absolute;
inset: 0;
z-index: -1;
background: url('assets/img/fr/DirIPS-Fond-software.webp') 0 50% / cover no-repeat;
opacity: .15;
pointer-events: none;
}
/* Leur bande témoignages porte la même idée avec leur lettrage, à demi-opacité. */
.fr-temoignages{ position: relative; isolation: isolate; }
.fr-temoignages::before{
content: '';
position: absolute;
inset: 0;
z-index: -1;
background: url('assets/img/fr/testimonials-typo-dirIPS.svg') 0 0 / auto no-repeat;
opacity: .5;
pointer-events: none;
}
/* Pastille des trois piliers, relevée sur dirips.fr au pixel.
L'icône n'est pas posée nue sur l'indigo : elle vit dans un carré blanc de
75px, rayon 15, 15px de marge intérieure — l'icône occupe donc 45px — avec
une ombre portée NETTE, sans flou, en bleu pâle, décalée de 6px à gauche et
en bas. C'est ce décalage franc qui donne son relief à la bande. */
.fr-pilier img{
box-sizing: border-box;
width: 75px;
height: 75px;
padding: 15px;
background: #fff;
border-radius: 15px;
box-shadow: -6px 6px 0 0 var(--fr-bleu-pale);
margin-bottom: 22px;
}
/* Puces des trois piliers : leur cercle coché de 14px en bleu pâle, pas notre
point vert de 9px. Même famille que les puces de leurs pages intérieures,
mais teintées ici dans le bleu de la marque, pas dans le turquoise. */
.fr-pilier li{ padding-left: 26px; }
.fr-pilier li::before{
width: 14px;
height: 14px;
top: .34em;
border-radius: 0;
background: var(--fr-bleu-pale);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm155 195L233 381c-5 5-12 5-17 0l-115-115c-5-5-5-12 0-17l17-17c5-5 12-5 17 0l90 90 152-152c5-5 12-5 17 0l17 17c4 4 4 12-1 16z'/%3E%3C/svg%3E") center/contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm155 195L233 381c-5 5-12 5-17 0l-115-115c-5-5-5-12 0-17l17-17c5-5 12-5 17 0l90 90 152-152c5-5 12-5 17 0l17 17c4 4 4 12-1 16z'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* ---------------------------------------------------------------------------
Les quatre valeurs, en rangée (29/08)
Le .com les livrait à plat : les visuels empilés en colonne, chacun seul
dans son paragraphe, et les quatre noms entassés dans un même titre. Sur
dirips.fr c'est une rangée de quatre, chaque nom dans sa couleur.
--------------------------------------------------------------------------- */
.fr-valeurs{
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 28px;
list-style: none;
margin: 34px 0 30px;
padding: 0;
}
.fr-valeurs .fr-valeur{
padding: 0;
margin: 0;
text-align: center;
}
.fr-valeurs .fr-valeur::before{ content: none; }
/* ⚠️ `.fr-bloc__texte img:not([src*="valeurs"])` (0,2,1) plafonnait ces icônes
à la largeur de leur cellule — 247px au lieu de 150. Nos fichiers ne portent
plus « valeur » dans leur nom, l'exception d'origine ne les couvrait plus. */
.fr-bloc .fr-bloc__texte .fr-valeur img,
.fr-valeur img{
display: block;
width: 150px;
height: 150px;
max-width: 100%;
margin: 0 auto 14px;
border-radius: 0;
background: none;
padding: 0;
object-fit: contain;
}
.fr-valeur span{
display: block;
font-family: var(--font-heading);
font-size: 1.06rem;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
.fr-valeur--1 span{ color: #9DBEF4; }
.fr-valeur--2 span{ color: #FFB3B7; }
.fr-valeur--3 span{ color: #64D2B9; }
.fr-valeur--4 span{ color: #CF7BFF; }
@media (max-width: 780px){
.fr-valeurs{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.fr-valeur img{ width: 112px; height: 112px; }
}
/* ---------------------------------------------------------------------------
Sections repliables (29/08)
⛔ Le .com présente ces pages en accordéons, tous fermés. Notre import les
avait mises à plat : la page des textes médico-sociaux déroulait 23 542px et
116 titres d'affilée là où la source tient en 2 923px. `` natif :
pas de JavaScript, ouverture au clavier, impression correcte, et le
navigateur déplie tout seul la bonne section quand on cherche dans la page.
--------------------------------------------------------------------------- */
.fr-pli{
border: 1px solid var(--azure-line, #D7E3F6);
border-radius: 14px;
background: #fff;
margin: 0 0 12px;
overflow: hidden;
}
.fr-pli__titre{
display: flex;
align-items: center;
gap: 14px;
padding: 18px 22px;
cursor: pointer;
list-style: none;
font-family: var(--font-heading);
font-size: 1.02rem;
font-weight: 700;
color: var(--navy);
transition: background .18s ease, color .18s ease;
}
.fr-pli__titre::-webkit-details-marker{ display: none; }
.fr-pli__titre::before{
content: '';
flex: 0 0 auto;
width: 11px;
height: 11px;
border-right: 2px solid var(--fr-turquoise);
border-bottom: 2px solid var(--fr-turquoise);
transform: rotate(-45deg);
transition: transform .22s ease;
}
.fr-pli[open] > .fr-pli__titre::before{ transform: rotate(45deg); }
.fr-pli__titre:hover{ background: var(--azure-soft, #F2F7FF); color: var(--violet, #4A3FD0); }
.fr-pli__titre:focus-visible{ outline: 2px solid var(--fr-turquoise); outline-offset: -2px; }
.fr-pli__corps{ padding: 4px 22px 20px; }
.fr-pli__corps > *:first-child{ margin-top: 0; }
.fr-pli__corps > *:last-child{ margin-bottom: 0; }
/* Sur une bande sombre, le repli reste clair : une page ne devient pas un mur. */
.fr-bloc--sombre .fr-pli{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); }
.fr-bloc--sombre .fr-pli__titre{ color: #fff; }
.fr-bloc--sombre .fr-pli__titre:hover{ background: rgba(255,255,255,.1); color: var(--fr-turquoise); }
@media (prefers-reduced-motion: reduce){
.fr-pli__titre, .fr-pli__titre::before{ transition: none; }
}
/* ---------------------------------------------------------------------------
Bandeau de la prochaine échéance (ticket #32)
Les réglages vivaient dans Personnaliser depuis le début, mais aucun gabarit
ne les affichait : le client ne pouvait pas voir qu'il le maîtrise.
--------------------------------------------------------------------------- */
.fr-echeance{
background: var(--fr-bleu-pale);
color: #17124F;
font-size: .96rem;
}
.fr-echeance__int{
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px 16px;
padding: 13px 24px;
}
.fr-echeance p{ margin: 0; }
.fr-echeance strong{ font-family: var(--font-heading); font-weight: 700; }
.fr-echeance a{
margin-left: auto;
color: #17124F;
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
}
.fr-echeance a:hover{ color: var(--navy); }
.fr-echeance__pouls{
flex: 0 0 auto;
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--navy);
box-shadow: 0 0 0 0 rgba(42, 37, 134, .55);
animation: fr-pouls 2.4s ease-out infinite;
}
@keyframes fr-pouls{
70% { box-shadow: 0 0 0 9px rgba(42, 37, 134, 0); }
100% { box-shadow: 0 0 0 0 rgba(42, 37, 134, 0); }
}
@media (prefers-reduced-motion: reduce){
.fr-echeance__pouls{ animation: none; }
}
@media (max-width: 700px){
.fr-echeance a{ margin-left: 0; }
}
/* ---------------------------------------------------------------------------
Seuil des cadres réglementaires (ticket #34)
« Une simple fiche de coordonnées au premier accès, puis tous les cadres
sont en accès direct. » Un seuil, pas une barrière : la page se consulte
entièrement, seuls les fichiers attendent qu'on se présente. Un cookie d'un
an porte la mémoire, le visiteur n'est plus jamais interrompu.
--------------------------------------------------------------------------- */
.fr-seuil{
border: 1px solid var(--azure-line, #D7E3F6);
border-radius: 18px;
background: linear-gradient(150deg, #F4F8FF 0%, #FFFFFF 100%);
padding: 30px 32px 26px;
margin: 0 0 34px;
}
.fr-seuil h2{ margin: 0 0 10px; font-size: 1.36rem; color: var(--navy); }
.fr-seuil > p{ margin: 0 0 20px; max-width: 62ch; color: #3A4060; }
.fr-seuil__erreur{ color: #B3261E; font-weight: 600; }
.fr-seuil__form{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px 20px;
align-items: end;
}
.fr-seuil__form p{ margin: 0; }
.fr-seuil__form label{
display: block;
margin-bottom: 6px;
font-size: .92rem;
font-weight: 600;
color: var(--navy);
}
.fr-seuil__form input{
width: 100%;
padding: 11px 14px;
border: 1px solid var(--azure-line, #D7E3F6);
border-radius: 10px;
font: inherit;
background: #fff;
}
.fr-seuil__form input:focus-visible{ outline: 2px solid var(--fr-turquoise); outline-offset: 1px; }
.fr-seuil__envoi{ grid-column: 1 / -1; margin-top: 4px !important; }
/* Tant que le seuil n'est pas franchi, les fichiers ne s'ouvrent pas. */
.cadres-verrouilles .fr-cadre__fichier,
.cadres-verrouilles .fr-pli__corps a[href*="uploads"],
.cadres-verrouilles .fr-bloc__texte a[href*="uploads"]{
pointer-events: none;
opacity: .45;
text-decoration: line-through;
}
@media (max-width: 780px){
.fr-seuil__form{ grid-template-columns: 1fr; }
.fr-seuil{ padding: 24px 20px 20px; }
}
.fr-seuil__titre{
margin: 0 0 10px !important;
font-family: var(--font-heading);
font-size: 1.36rem;
font-weight: 800;
line-height: 1.25;
color: var(--navy);
}
/* ---------------------------------------------------------------------------
Actualités en carrousel (ticket #35)
Rail à défilement horizontal avec accroche, sur le modèle des témoignages :
aucun JavaScript pour faire défiler, le doigt et la molette suffisent. Les
deux flèches ne font que piloter ce même rail — sans elles, tout marche.
--------------------------------------------------------------------------- */
.fr-actus__rail{ position: relative; margin: 34px 0 22px; }
.fr-actus__piste{
display: flex;
gap: 26px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
padding-bottom: 6px;
}
.fr-actus__piste::-webkit-scrollbar{ display: none; }
.fr-actus__piste > .fr-actu{
flex: 0 0 calc((100% - 52px) / 3);
scroll-snap-align: start;
}
.fr-actus__pilotes{ display: flex; justify-content: center; gap: 12px; margin: 0 0 26px; }
.fr-rail-bouton{
width: 42px; height: 42px;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid rgba(255, 255, 255, .38);
border-radius: 50%;
background: transparent;
color: #fff;
font-size: 1.05rem;
cursor: pointer;
transition: background .18s ease, border-color .18s ease;
}
.fr-rail-bouton:hover{ background: rgba(255, 255, 255, .12); border-color: var(--fr-turquoise); }
.fr-rail-bouton:focus-visible{ outline: 2px solid var(--fr-turquoise); outline-offset: 2px; }
@media (max-width: 1000px){ .fr-actus__piste > .fr-actu{ flex: 0 0 calc((100% - 26px) / 2); } }
@media (max-width: 700px){ .fr-actus__piste > .fr-actu{ flex: 0 0 86%; } }
@media (prefers-reduced-motion: reduce){ .fr-actus__piste{ scroll-behavior: auto; } }
.fr-rail-bouton[disabled]{ opacity: .35; cursor: default; }
.fr-rail-bouton[disabled]:hover{ background: transparent; border-color: rgba(255,255,255,.38); }
/* ---------------------------------------------------------------------------
Recherche : le bouton débordait (tickets #54 et #55)
⛔ Le champ portait `flex: 1` sans `min-width: 0`. Un élément flex refuse par
défaut de rétrécir sous la largeur de son contenu : le champ gardait sa
place, et le bouton était poussé 12px hors du panneau. C'est le piège flex
le plus courant, et il ne se voit qu'à la mesure.
--------------------------------------------------------------------------- */
.recherche__panneau form{ align-items: stretch; }
.recherche__panneau input[type="search"],
.recherche__panneau input[type="text"]{
flex: 1 1 auto;
min-width: 0;
}
.recherche__panneau button[type="submit"]{
flex: 0 1 auto;
min-width: 0;
white-space: nowrap;
padding: 0 15px;
}
/* Recherche des pages de liste : le libellé d'exemple était coupé en plein
mot dans un champ de 253px. Le bloc respire, et l'exemple est plus court. */
.actu-recherche{ max-width: 520px; gap: 12px; }
.actu-recherche input[type="search"]{ flex: 1 1 260px; min-width: 0; }
.actu-recherche button, .actu-recherche [type="submit"]{ flex: 0 0 auto; white-space: nowrap; }
/* Formulaire du DPO (ticket #56) et respiration des cartes de formulaire (#57). */
.fr-dpo{ margin: 8px 0 4px; }
.fr-dpo__form{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px 22px;
}
.fr-dpo__form p{ margin: 0; }
.fr-dpo__large{ grid-column: 1 / -1; }
.fr-dpo__form label{
display: block;
margin-bottom: 6px;
font-size: .92rem;
font-weight: 600;
color: var(--navy);
}
.fr-dpo__form input,
.fr-dpo__form textarea{
width: 100%;
padding: 12px 14px;
border: 1px solid var(--azure-line, #D7E3F6);
border-radius: 10px;
font: inherit;
background: #fff;
}
.fr-dpo__form textarea{ resize: vertical; min-height: 140px; }
.fr-dpo__form input:focus-visible,
.fr-dpo__form textarea:focus-visible{ outline: 2px solid var(--fr-turquoise); outline-offset: 1px; }
.fr-dpo__ok{ color: #0E7A5F; font-weight: 600; }
.fr-dpo__erreur{ color: #B3261E; font-weight: 600; }
@media (max-width: 720px){ .fr-dpo__form{ grid-template-columns: 1fr; } }
/* #57 — les champs ne touchaient pas les bords (33px mesurés), mais dans une
carte de 557px six champs pleine largeur donnent cette impression. On
élargit la carte et on desserre. */
.demo-form.card, .contact-formulaire{ padding: 40px 42px; }
@media (max-width: 900px){ .demo-form.card, .contact-formulaire{ padding: 28px 24px; } }
/* ---------------------------------------------------------------------------
Harmonisation des séries (tickets #60 et #61)
Les cartes d'une série étaient étirées à la hauteur de la plus longue. Quand
l'écart de contenu va de 49 à 447 caractères — les certifications sur la
page accompagnement — cela laisse deux cartes aux trois quarts vides. Elles
épousent maintenant leur contenu et s'alignent par le haut : la série se lit
comme une série, sans trous.
--------------------------------------------------------------------------- */
.fr-cartes{ align-items: start; }
.fr-etapes{ align-items: start; }
/* Énumérations remises en liste (ticket #62). Serrées : ce sont des intitulés,
pas des paragraphes, et l'interligne pleine qui les séparait cassait la
lecture de la suite. */
.fr-liste-serree{ margin: 6px 0 22px; padding: 0; list-style: none; }
.fr-liste-serree li{ margin-bottom: 7px; }
.fr-carte .fr-liste-serree, .fr-etape .fr-liste-serree{ margin-bottom: 0; }
/* Case de consentement (analyse client du 27/08 : autorisation expresse au
recueil des données). Jamais pré-cochée — une case pré-cochée ne vaut pas
consentement — et la ligne reste lisible, pas une mention en petit. */
.dirips-consent{ margin: 4px 0 18px; }
.dirips-consent label{
display: flex;
align-items: flex-start;
gap: 10px;
font-size: .92rem;
line-height: 1.55;
font-weight: 400;
color: #3A4060;
cursor: pointer;
}
.dirips-consent input[type="checkbox"]{
flex: 0 0 auto;
width: 18px;
height: 18px;
margin-top: 2px;
accent-color: var(--navy, #2A2586);
}
.dirips-consent a{ color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }
.fr-seuil__envoi .dirips-consent, .fr-dpo__large .dirips-consent{ margin-bottom: 12px; }
/* Lien vers le témoignage complet (ticket #39 et engagement pris auprès des
témoins dans leur document d'analyse du 27/08). */
.fr-temoignage__lien{
display: inline-block;
margin-top: 16px;
font-family: var(--font-heading);
font-weight: 700;
font-size: .93rem;
color: var(--navy);
text-decoration: underline;
text-underline-offset: 3px;
}
.fr-temoignage__lien:hover{ color: var(--violet, #4A3FD0); }
/* ---------------------------------------------------------------------------
Vignettes des cartes de certification (ticket #64)
L'aile du logo s'affichait à 300px là où les badges Qualiopi et Datadock
font 74 : la première carte était deux fois plus haute que ses voisines, ce
qui donnait à croire à une mise en avant voulue. Les images posées DANS le
texte d'une carte prennent la taille d'un badge ; les captures produit, qui
vivent dans un bloc média dédié, ne sont pas concernées.
--------------------------------------------------------------------------- */
.fr-carte > p > img,
.fr-carte > p > a > img{
width: 74px;
height: 74px;
object-fit: contain;
margin: 0 0 12px;
}
/* ⚠️ L'aile était dans un bloc média, comme les captures produit — une règle
visant les images en ligne ne pouvait pas l'atteindre. Quand une même grille
mêle des badges en ligne et un bloc média, c'est une série de vignettes :
on les aligne. Les grilles de produits, qui n'ont aucun badge en ligne, ne
sont pas concernées. */
/* ⚠️ Ticket #64. Les trois vignettes de certification sont toutes dans un bloc
média, comme les captures produit : aucune règle de structure ne les
distingue. Les badges Qualiopi et Datadock ne sont bridés à 74px que parce
que leur nom de fichier commence par « logo- ». L'aile, qui sert ici de
vignette au lien vers le certificat PDF, échappait à cette règle et
s'affichait à 300px — d'où une carte deux fois plus haute que ses voisines,
qui donnait à croire à une mise en avant voulue. On la vise nommément. */
.fr-carte__media img[src*="aile-delta"]{
width: 74px;
height: 74px;
object-fit: contain;
}
/* Bandeau d'échéance : il passait inaperçu. Le texte était en gris à 15px sur
le bleu pâle ; il passe dans l'indigo de la marque, un cran plus grand, et
le libellé « Prochaine échéance » se détache. C'est une information datée,
elle doit s'attraper au vol. */
.fr-echeance__int{ padding: 16px 24px; }
.fr-echeance p{
font-size: 1rem;
color: var(--navy);
}
.fr-echeance strong{
font-size: .78rem;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--navy);
}
.fr-echeance a{
font-size: .96rem;
color: var(--navy);
}
.fr-echeance__pouls{ width: 11px; height: 11px; }
/* ---------------------------------------------------------------------------
Écart sous la bannière (retour du 31/08)
⚠️ On visait la hauteur de leur bannière — 900px — alors qu'il fallait viser
le VIDE sous les boutons. Leur bloc de texte étant plus haut que le nôtre,
la même hauteur de bande laissait chez nous 321px de blanc contre 195 chez
eux. On règle donc sur le vide, pas sur la bande.
--------------------------------------------------------------------------- */
.fr-hero, .fr-hero__int{ min-height: 780px; }
/* ---------------------------------------------------------------------------
Bandeau d'échéance, deuxième passe (31/08)
⚠️ Le bleu pâle #9DBEF4 est la teinte du bas de la bannière : le bandeau s'y
fondait, quelle que soit la taille du texte. Ce n'était pas un problème de
lisibilité mais de séparation. Il passe donc en blanc, entre la bannière
pâle au-dessus et la bande indigo en dessous, avec un filet turquoise qui
l'annonce et une ombre douce qui le décolle.
--------------------------------------------------------------------------- */
.fr-echeance{
background: #fff;
border-top: 3px solid var(--fr-turquoise);
box-shadow: 0 10px 26px -18px rgba(23, 18, 79, .55);
position: relative;
z-index: 2;
}
.fr-echeance__int{ padding: 18px 24px; }
.fr-echeance strong{
color: var(--fr-turquoise);
font-size: .8rem;
}
.fr-echeance p{ color: var(--navy); font-weight: 500; }
.fr-echeance__pouls{ background: var(--fr-turquoise); }
@keyframes fr-pouls{
70% { box-shadow: 0 0 0 10px rgba(100, 210, 185, 0); }
100% { box-shadow: 0 0 0 0 rgba(100, 210, 185, 0); }
}
.fr-echeance a{
color: var(--navy);
text-decoration-thickness: 2px;
}
.fr-echeance a:hover{ color: var(--fr-turquoise); }
/* ---------------------------------------------------------------------------
Grille des partenaires (ticket #58)
Les logos arrivaient empilés en colonne, un par paragraphe, suivis d'un
bouton dont l'ancre n'existait pas. Ils forment une grille ; les sept
partenaires qui ont une présentation plus bas y mènent, les six autres
restent de simples vignettes plutôt que des liens vers rien.
--------------------------------------------------------------------------- */
.fr-partenaires{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: 18px;
list-style: none;
margin: 8px 0 40px;
padding: 0;
}
.fr-partenaires .fr-partenaire{
margin: 0;
padding: 0;
}
.fr-partenaires .fr-partenaire::before{ content: none; }
.fr-partenaire > a,
.fr-partenaire{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
min-height: 132px;
padding: 18px 14px;
border: 1px solid var(--azure-line, #D7E3F6);
border-radius: 14px;
background: #fff;
text-align: center;
text-decoration: none;
}
.fr-partenaire > a{ border: 0; padding: 0; min-height: 0; background: none; }
.fr-partenaire img{
height: 56px;
width: auto;
max-width: 100%;
object-fit: contain;
}
.fr-partenaire span{
font-family: var(--font-heading);
font-size: .86rem;
font-weight: 700;
color: var(--navy);
line-height: 1.3;
}
.fr-partenaire > a:hover span{ color: var(--violet, #4A3FD0); }
.fr-partenaire > a:hover img{ transform: translateY(-2px); transition: transform .2s ease; }
/* Les vignettes ne débordent plus de leur tuile : hauteur bornée et largeur
contenue, quel que soit le rapport du logo d'origine. */
.fr-partenaire img{ max-height: 56px; max-width: 88%; }
.fr-partenaire{ overflow: hidden; }
/* ⚠️ Le fichier Talentia livré le 31/08 est inutilisable : il porte son propre
fond blanc et le mot « Talentia » y est écrit EN BLANC par-dessus. Seuls la
baseline grise et un carré magenta ressortent. On reprend donc leur ancien
logo, celui du .com, qui est lisible. À remplacer dès qu'ils fournissent un
fichier correct. */
/* ---------------------------------------------------------------------------
Partenaires : les logos tels qu'ils nous ont été remis (31/08)
Ils étaient affichés en niveaux de gris, atténués à 62 %. Le client les veut
dans leurs couleurs. Ce qui tenait la cohérence visuelle — le gris — doit
donc être repris autrement : par la grille elle-même, une hauteur optique
commune et un cadre discret qui laisse chaque marque parler.
--------------------------------------------------------------------------- */
/* --- Le bandeau défilant de l'accueil --- */
.fr-defile__lot img{
filter: none;
opacity: 1;
height: 52px;
max-width: 190px;
}
.fr-defile__lot{ gap: 54px; align-items: center; }
.fr-defile__lot li{
display: flex;
align-items: center;
justify-content: center;
min-width: 132px;
height: 84px;
padding: 0 18px;
background: #fff;
border: 1px solid var(--azure-line, #D7E3F6);
border-radius: 14px;
box-shadow: 0 10px 24px -18px rgba(30, 26, 107, .35);
}
.fr-defile__lot li::before{ content: none; }
.fr-defile__lot img:hover{ filter: none; opacity: 1; }
/* --- La grille de la page Partenaires --- */
.fr-partenaires{
grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
gap: 20px;
margin: 14px 0 44px;
}
.fr-partenaire{
min-height: 154px;
gap: 16px;
padding: 24px 18px 20px;
border-radius: 16px;
border-color: var(--azure-line, #D7E3F6);
box-shadow: 0 14px 30px -24px rgba(30, 26, 107, .45);
transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.fr-partenaire:hover{
transform: translateY(-3px);
border-color: var(--fr-bleu-pale);
box-shadow: 0 22px 40px -26px rgba(30, 26, 107, .5);
}
/* Hauteur optique commune : un logo large et un logo carré ne doivent pas
peser pareil. On borne les deux dimensions. */
.fr-partenaire img{
height: auto;
max-height: 62px;
max-width: 82%;
width: auto;
}
.fr-partenaire span{
font-size: .84rem;
letter-spacing: .01em;
color: #4A4E66;
}
@media (max-width: 620px){
.fr-partenaires{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.fr-partenaire{ min-height: 132px; padding: 18px 12px 16px; }
.fr-partenaire img{ max-height: 48px; }
.fr-defile__lot li{ min-width: 108px; height: 70px; }
.fr-defile__lot img{ height: 42px; }
}