/*
Theme Name: Dir IPS
Description: Thème sur-mesure Dir IPS — refonte 2026 (Wizz You)
Author: Wizz You
Template: hello-elementor
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;
/* ⛔ #7C4DFF venait de la direction abandonnée du 20/08 et n'appartient à
aucune palette Dir IPS. Le jeton pointe désormais sur le bleu clair de
la charte : les quarante usages d'accent suivent d'un coup. */
--violet: #4A54D6;
--violet-bright: #9DBEF4; /* même raison : le mauve clair d'origine n'est pas de la charte */
--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: clip; /* 12/09 : la vague verte débordait sur les cartes de Contact. */
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);
/* Plafonné : au-delà de huit frères, tout le monde arrive ensemble. */
transition-delay: calc(min(var(--i, 0), 7) * 90ms);
}
.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; }
/* ⛔ Employée seule, cette variante ne dessinait aucune bordure : le bouton
se réduisait à un texte blanc. Elle porte désormais son propre trait. */
.fr-btn--clair{ color: #fff; border: 2px solid #fff; background: transparent; }
.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: 60px 0 64px; 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: 58px 0 62px; 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: 60px 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: 58px 0 62px; 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; }
/* Les deux liens sociaux étaient deux pastilles de 32 px portant « in » et un
triangle, perdues dans la barre légale : illisibles, et YouTube ne se
reconnaissait pas. Vrais logos, pastilles de 44 px, dans la colonne
d'identité (retour du 01/09). */
.fr-pied__reseaux{ display: flex; align-items: center; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.fr-pied__reseaux-titre{
flex: 0 0 100%; font-size: .78rem; font-weight: 700; letter-spacing: .08em;
text-transform: uppercase; color: var(--fr-vert); margin-bottom: 2px;
}
.fr-pied__reseaux a{
display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
background: rgba(255,255,255,.14); color: #fff; text-decoration: none;
transition: background .18s ease, transform .18s ease;
}
.fr-pied__reseaux a:hover,
.fr-pied__reseaux a:focus-visible{ background: var(--fr-vert); transform: translateY(-2px); }
/* --- 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 52px; 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.
⚠️ C'était un `border-top` de 3px sur une carte bordée de 1px et arrondie à
16px : le navigateur raccorde les deux épaisseurs en biseau et courbe le
trait dans l'angle, si bien que le vert dépassait de la carte des deux
côtés. C'est le « trait vert qui dépasse » relevé le 01/09. Le repère est
maintenant un trait posé à l'intérieur, qui s'arrête avant les arrondis. */
.fr-carte:not(:has(.fr-carte__media)){
position: relative;
padding-top: 24px;
}
.fr-carte:not(:has(.fr-carte__media))::before{
content: '';
position: absolute;
top: 0;
left: 16px;
right: 16px;
height: 3px;
border-radius: 0 0 3px 3px;
background: var(--fr-vert-clair);
}
/* --- 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: 46px 0 48px; 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
est un aplat #2A2586 (retour Sylvain 16/09 : plus de dégradé), 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: #2A2586;
}
.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); }
/* Ces deux lignes arrivent après la variante claire et, à specificité égale,
l'emportaient : sur fond indigo, « Devenir collaborateur » virait au navy
sur un fond navy à 7 %, donc illisible au survol. La variante claire
reprend la main partout où les deux se croisent (retour Ryan du 01/09). */
.fr-btn--ligne.fr-btn--clair{ color: #fff; border-color: #fff; }
.fr-btn--ligne.fr-btn--clair:hover,
.fr-btn--ligne.fr-btn--clair:focus-visible{
background: #fff; color: var(--fr-indigo); border-color: #fff;
}
/* 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: #2A2586;
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: #2A2586;
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: #2A2586 !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: #2A2586;
}
.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;
/* 185px reprenaient le retrait de leur bannière, deux fois plus haute que
notre écran utile. Le titre arrivait au tiers de la page et le bandeau
d'échéance passait sous la ligne de flottaison (retour du 01/09). */
padding-top: 120px;
padding-bottom: 48px;
}
/* ⚠️ 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"]:not([href*="dir-calendrier-cadres"]),
.cadres-verrouilles .fr-bloc__texte a[href*="uploads"]:not([href*="dir-calendrier-cadres"]),
.cadres-verrouilles .tc-contexte a[href*="uploads"]:not([href*="dir-calendrier-cadres"]){
/* Retour client du 02/09 : « Ne pas rayer les annexes, les griser ».
La rature laissait croire que le cadre était retiré ou périmé. */
pointer-events: none;
color: #9AA0BC;
opacity: 1;
text-decoration: none;
cursor: default;
}
@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.
--------------------------------------------------------------------------- */
/* Deuxième passe le 01/09 : 780px laissaient encore la bannière occuper
l'écran entier, échéance comprise. On descend à 560, le vide sous les
boutons se réduit d'autant. */
.fr-hero, .fr-hero__int{ min-height: 560px; }
/* ---------------------------------------------------------------------------
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; }
}
/* Plusieurs échéances au même endroit : elles se superposent dans une pile de
hauteur constante, pour que le bandeau ne saute pas quand on change
d'entrée (demande du 27/08, reprise le 01/09). */
.fr-echeance__pile{ position: relative; flex: 1; display: grid; }
.fr-echeance__item{
grid-area: 1 / 1;
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
opacity: 0; visibility: hidden; transition: opacity .5s ease;
}
.fr-echeance__item.is-active{ opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce){
.fr-echeance__item{ transition: none; }
}
/* Fiches partenaires : aperçu au survol, présentation complète au clic
(retour du 01/09). La vignette devient un bouton, sans changer son allure
au repos. */
.fr-partenaire--ouvrable{ padding: 0; }
.fr-partenaire__declencheur{
display: flex; flex-direction: column; align-items: center; gap: 8px;
width: 100%; height: 100%; padding: 18px 16px;
background: none; border: 0; font: inherit; color: inherit;
cursor: pointer; border-radius: inherit; position: relative;
}
.fr-partenaire__declencheur:hover,
.fr-partenaire__declencheur:focus-visible{ background: rgba(42, 37, 134, .04); }
.fr-partenaire__apercu{
font-size: .82rem; line-height: 1.5; color: #4A5070;
max-height: 0; overflow: hidden; opacity: 0;
transition: max-height .25s ease, opacity .25s ease;
}
.fr-partenaire__declencheur:hover .fr-partenaire__apercu,
.fr-partenaire__declencheur:focus-visible .fr-partenaire__apercu,
.fr-partenaire__declencheur[aria-expanded="true"] .fr-partenaire__apercu{
max-height: 8em; opacity: 1;
}
.fr-partenaires__fiches{ margin-top: 24px; }
.fr-partenaire__fiche{
background: #fff; border: 1px solid rgba(42, 37, 134, .12);
border-radius: 14px; padding: 24px 28px; text-align: left;
box-shadow: 0 10px 26px rgba(30, 26, 107, .08);
}
.fr-partenaire__fiche h3{ margin-top: 0; }
@media (prefers-reduced-motion: reduce){
.fr-partenaire__apercu{ transition: none; }
}
/* Depuis que les presentations ont quitte le fil de la page, cette section
bascule en deux colonnes et la grille des logos se retrouve comprimee en
face d une colonne vide. Elle reprend toute la largeur. */
.fr-bloc__int--deux:has(.fr-partenaires){ grid-template-columns: 1fr; }
/* ---------------------------------------------------------------------------
Le « fond sur fond » relevé le 01/09
La bande des chiffres est en #1E1A6B plat, la section des enjeux en #2A2586
texturé : deux bleus voisins qui se touchaient net, séparés par un trait, et
une texture qui démarrait d'un coup. La couleur du dessus se prolonge donc
sur 140 pixels et s'efface, il n'y a plus de rupture.
--------------------------------------------------------------------------- */
.fr-enjeux::after{
content: '';
position: absolute;
inset: 0 0 auto 0;
height: 140px;
z-index: -1;
background: linear-gradient(180deg, #1E1A6B 0%, rgba(30, 26, 107, 0) 100%);
pointer-events: none;
}
/* ============================================================
Devenir collaborateur — gabarit dédié (01/09)
Bannière photo, esprit d'équipe sur fond indigo, offres réelles,
témoignage et appel à candidature. Charte dirips.fr.
============================================================ */
.rec-hero{
background: linear-gradient(160deg, #FFFFFF 0%, #F1F6FF 44%, #E4EDFE 100%);
padding: 44px 0 60px; position: relative; overflow: hidden;
}
.rec-hero__int{ min-height: 420px; display: flex; align-items: center; }
.rec-hero__texte{ position: relative; z-index: 3; width: min(100%, 520px); }
.rec-hero__surtitre{
margin: 18px 0 12px; font-family: var(--font-heading); font-size: .78rem; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase; color: var(--fr-bleu-pale);
}
.rec-hero h1{
font-family: var(--font-heading); font-weight: 800; color: var(--navy);
font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.14; margin: 0 0 22px; text-wrap: balance;
}
.rec-hero h1 span{ color: var(--fr-bleu-pale); display: block; }
.rec-hero__chapo{ color: #333A5C; font-size: 1.02rem; line-height: 1.7; margin: 0 0 26px; max-width: 38ch; }
.rec-hero__actions{ display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; }
.rec-hero__ancre{
font-family: var(--font-heading); font-weight: 600; font-size: .95rem; color: var(--navy);
text-decoration: none; border-bottom: 2px solid transparent; transition: border-color .2s ease, color .2s ease;
}
.rec-hero__ancre::after{ content: ' ↓'; }
.rec-hero__ancre:hover, .rec-hero__ancre:focus-visible{ color: var(--fr-bleu-clair); border-bottom-color: var(--fr-bleu-clair); }
.rec-hero__visuel{
position: absolute; inset: 0 0 0 auto; width: 64%; z-index: 1; overflow: hidden;
}
.rec-hero__visuel > img:first-child{
display: block; width: 100%; height: 100%; object-fit: cover; object-position: 62% 42%;
-webkit-mask-image:
linear-gradient(90deg, transparent 0%, rgba(0,0,0,.18) 20%, rgba(0,0,0,.62) 42%, #000 68%),
linear-gradient(180deg, #000 0%, #000 52%, rgba(0,0,0,.55) 80%, transparent 100%);
mask-image:
linear-gradient(90deg, transparent 0%, rgba(0,0,0,.18) 20%, rgba(0,0,0,.62) 42%, #000 68%),
linear-gradient(180deg, #000 0%, #000 52%, rgba(0,0,0,.55) 80%, transparent 100%);
-webkit-mask-composite: source-in;
mask-composite: intersect;
}
/* Trois voiles : fondu vers le texte à gauche, fondu vers le fond en bas,
et une teinte indigo qui raccorde la photo à l'univers de la page. */
.rec-hero__voile{
position: absolute; inset: 0; pointer-events: none;
background:
linear-gradient(180deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,0) 26%, rgba(228,237,254,0) 62%, rgba(228,237,254,.6) 100%),
linear-gradient(90deg, rgba(42,37,134,0) 34%, rgba(42,37,134,.06) 56%, rgba(42,37,134,.11) 100%);
}
.rec-hero__vague{
position: absolute; right: -8%; bottom: -10%; width: 58%; height: auto;
z-index: 2; pointer-events: none; opacity: .55;
}
.rec-btn span{ margin-left: 6px; }
.rec-esprit{
background: #2A2586;
color: #fff; padding: 64px 0; position: relative; overflow: hidden;
}
.rec-esprit::before{
content: ''; position: absolute; inset: 0;
background: url('assets/img/fr/DirIPS-Home-Vague-Invert.svg') right -40px bottom -40px / auto 92% no-repeat;
opacity: .09; pointer-events: none;
}
.rec-esprit::after{
content: ''; position: absolute; right: -140px; top: -110px; width: 360px; height: 360px;
background: radial-gradient(circle, rgba(100, 210, 185, .14) 0%, rgba(100, 210, 185, 0) 70%);
pointer-events: none;
}
.rec-esprit__int{
position: relative; display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 64px; align-items: center;
}
.rec-esprit__surtitre{
margin: 0 0 12px; font-family: var(--font-heading); font-size: .78rem; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase; color: var(--fr-turquoise);
}
.rec-esprit h2{
font-family: var(--font-heading); font-weight: 800; color: #fff;
font-size: clamp(1.6rem, 2.4vw, 2.15rem); line-height: 1.22; margin: 0 0 18px; text-wrap: balance;
}
.rec-esprit h2 span{ color: var(--fr-turquoise); }
.rec-esprit__gauche p{ color: #D9DEF7; line-height: 1.78; margin: 0 0 14px; max-width: 54ch; font-size: .99rem; }
.rec-esprit__gauche p:last-of-type{ margin-bottom: 0; }
.rec-esprit__illus{ display: block; width: 100%; max-width: 236px; height: auto; margin: 24px 0 0; }
.rec-valeurs{
list-style: none; margin: 0; display: grid; gap: 32px;
padding: 34px 32px; border-radius: 22px;
background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12);
}
.rec-valeur{ display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 26px; align-items: center; }
.rec-valeur__picto{
width: 84px; height: 84px; border-radius: 18px; padding: 17px; background: #fff;
box-shadow: -6px 6px 0 0 var(--fr-bleu-pale); display: flex; align-items: center; justify-content: center;
}
.rec-valeur__picto svg{ width: 100%; height: 100%; display: block; }
.rec-valeur h3{
font-family: var(--font-heading); font-weight: 700; color: #fff; font-size: 1.24rem;
margin: 0 0 8px; padding-top: 0;
}
.rec-valeur h3::before{
content: ''; display: block; width: 34px; height: 3px; background: var(--fr-turquoise); margin: 0 0 12px;
}
.rec-valeur p{ color: #DCE1F8; line-height: 1.68; margin: 0; font-size: 1rem; max-width: 42ch; }
.rec-offres{ background: #fff; padding: 72px 0; }
.rec-offres__tete{ max-width: 620px; margin: 0 0 36px; }
.rec-offres__tete h2{
font-family: var(--font-heading); font-weight: 800; color: var(--navy);
font-size: clamp(1.6rem, 2.4vw, 2.1rem); margin: 0 0 14px;
}
.rec-offres__tete p{ color: #3A4060; line-height: 1.75; margin: 0; }
.rec-offres__liste{
list-style: none; margin: 0; padding: 0; display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; align-items: stretch;
}
.rec-offre{
background: #fff; border: 1px solid #E2E8F6; border-radius: 16px; padding: 26px 28px 24px;
display: flex; flex-direction: column; gap: 12px;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.rec-offre:hover{ transform: translateY(-3px); border-color: var(--fr-bleu-pale); box-shadow: 0 14px 30px rgba(42, 37, 134, .12); }
.rec-offre h3{ font-family: var(--font-heading); font-weight: 700; font-size: 1.12rem; margin: 0; line-height: 1.35; }
.rec-offre h3 a{ color: var(--navy); text-decoration: none; }
.rec-offre h3 a:hover{ color: var(--fr-bleu-clair); }
.rec-offre__reperes{ display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.rec-offre__reperes span{
background: #EEF3FE; color: var(--navy); border-radius: 999px; padding: 5px 12px;
font-family: var(--font-heading); font-size: .78rem; font-weight: 600;
}
.rec-offre__lien{
margin-top: auto; align-self: flex-start; font-family: var(--font-heading); font-weight: 600;
font-size: .92rem; color: var(--fr-bleu); text-decoration: none;
border-bottom: 2px solid transparent; transition: border-color .2s ease;
}
.rec-offre__lien::after{ content: ' →'; }
.rec-offre__lien:hover, .rec-offre__lien:focus-visible{ border-bottom-color: var(--fr-bleu); }
.rec-offres__vide{ color: #3A4060; line-height: 1.75; margin: 0; }
.rec-temoin{ background: var(--fr-degrade-gamme); padding: 78px 0; position: relative; overflow: hidden; }
.rec-temoin::before{
content: ''; position: absolute; left: -50px; bottom: 30px; width: 720px; height: 190px;
background: var(--navy);
-webkit-mask: url('assets/img/fr/testimonials-typo-dirIPS.svg') left center / contain no-repeat;
mask: url('assets/img/fr/testimonials-typo-dirIPS.svg') left center / contain no-repeat;
opacity: .07; pointer-events: none;
}
.rec-temoin__int{ position: relative; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: center; }
.rec-temoin__surtitre{
margin: 0 0 12px; font-family: var(--font-heading); font-size: .78rem; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase; color: var(--fr-vert);
}
.rec-temoin__gauche h2{
font-family: var(--font-heading); font-weight: 800; color: var(--navy);
font-size: clamp(1.5rem, 2.3vw, 2rem); line-height: 1.22; margin: 0 0 14px;
}
.rec-temoin__gauche p{ color: #3A4060; line-height: 1.75; margin: 0; }
.rec-temoin__carte{
background: #fff; border-radius: 18px; padding: 38px 40px; margin: 0;
box-shadow: 0 18px 40px rgba(42, 37, 134, .10); position: relative;
}
.rec-temoin__carte::before{
content: '“'; position: absolute; top: 10px; left: 26px;
font-family: Georgia, 'Times New Roman', serif; font-size: 4.2rem; line-height: 1; color: var(--fr-vert-clair);
}
.rec-temoin__carte blockquote{ margin: 0 0 22px; padding: 0 0 0 34px; border: 0; }
.rec-temoin__carte blockquote p{ font-style: italic; color: #2E3459; line-height: 1.8; margin: 0; }
.rec-temoin__carte figcaption{ display: grid; gap: 4px; padding: 20px 0 0 34px; border-top: 1px solid #E6ECF8; }
.rec-temoin__nom{ font-family: var(--font-heading); font-weight: 700; color: var(--navy); }
.rec-temoin__role{ color: #5B628A; font-size: .92rem; }
.rec-fin{ background: #fff; padding: 72px 0 78px; }
.rec-fin__carte{
background: #2A2586;
border-radius: 20px; padding: 44px 48px; color: #fff;
display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px 48px; align-items: center;
}
.rec-fin__surtitre{
margin: 0 0 10px; font-family: var(--font-heading); font-size: .76rem; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase; color: var(--fr-turquoise);
}
.rec-fin__carte h2{
font-family: var(--font-heading); font-weight: 800; color: #fff;
font-size: clamp(1.4rem, 2.1vw, 1.85rem); margin: 0 0 12px;
}
.rec-fin__carte p{ color: #D8DDF6; line-height: 1.7; margin: 0; max-width: 52ch; }
.rec-fin__action{ display: grid; justify-items: center; gap: 10px; }
.rec-fin__btn{ background: var(--fr-vert-clair); border: 2px solid var(--fr-vert-clair); color: var(--fr-indigo) !important; }
.rec-fin__btn:hover{ background: #fff; border-color: #fff; color: var(--fr-indigo); }
.rec-fin__note{ color: #C7CEEE; font-size: .85rem; }
@media (max-width: 980px){
.rec-hero__int{ display: block; min-height: 0; }
.rec-hero__texte{ width: 100%; }
.rec-hero__visuel{ position: static; width: 100%; height: 250px; border-radius: 18px; margin-top: 26px; }
.rec-hero__voile{
background:
linear-gradient(180deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 34%, rgba(228,237,254,0) 62%, rgba(228,237,254,.85) 100%),
linear-gradient(0deg, rgba(42,37,134,.08), rgba(42,37,134,.08));
}
.rec-hero__vague{ display: none; }
.rec-esprit__illus{ max-width: 210px; margin-top: 22px; }
.rec-valeurs{ gap: 26px; padding: 26px 22px; }
.rec-esprit__int,
.rec-temoin__int{ grid-template-columns: 1fr; gap: 36px; }
.rec-esprit__illus{ max-width: 260px; }
.rec-fin__carte{ grid-template-columns: 1fr; padding: 36px 30px; }
.rec-fin__action{ justify-items: start; }
}
@media (max-width: 620px){
.rec-hero{ padding: 40px 0 52px; }
.rec-valeur{ grid-template-columns: 60px minmax(0, 1fr); gap: 16px; }
.rec-valeur__picto{ width: 60px; height: 60px; padding: 11px; border-radius: 13px; }
.rec-temoin__carte{ padding: 30px 24px; }
.rec-temoin__carte blockquote,
.rec-temoin__carte figcaption{ padding-left: 0; }
.rec-temoin::before{ width: 340px; height: 150px; }
}
/* ============================================================
L'entreprise — gabarit dédié (01/09)
Bannière, sens du service, valeurs et relations, frise des dates,
aujourd'hui, fabrication d'un logiciel. Charte dirips.fr.
============================================================ */
.ent-surtitre{
margin: 0 0 12px; font-family: var(--font-heading); font-size: .78rem; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase; color: var(--fr-bleu-pale);
}
.ent-lien-ancre{
font-family: var(--font-heading); font-weight: 600; font-size: .95rem; color: var(--navy);
text-decoration: none; border-bottom: 2px solid transparent; transition: border-color .2s ease, color .2s ease;
}
.ent-lien-ancre::after{ content: ' ↓'; }
.ent-lien-ancre:hover, .ent-lien-ancre:focus-visible{ color: var(--fr-bleu-clair); border-bottom-color: var(--fr-bleu-clair); }
.ent-hero{
background: linear-gradient(160deg, #FFFFFF 0%, #F1F6FF 45%, #E2ECFE 100%);
padding: 56px 0 72px; position: relative; overflow: hidden;
}
.ent-hero__int{ min-height: 470px; display: flex; align-items: center; }
.ent-hero__texte{ position: relative; z-index: 3; width: min(100%, 560px); }
.ent-hero__surtitre{
margin: 18px 0 12px; font-family: var(--font-heading); font-size: .78rem; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase; color: var(--fr-bleu-pale);
}
.ent-hero h1{
font-family: var(--font-heading); font-weight: 800; color: var(--navy);
font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.14; margin: 0 0 22px; text-wrap: balance;
}
.ent-hero h1 span{ color: var(--fr-bleu-pale); display: block; }
.ent-hero__chapo{ color: #3A4060; font-size: 1.03rem; line-height: 1.72; margin: 0 0 30px; max-width: 42ch; }
.ent-hero__actions{ display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; }
.ent-hero__visuel{
position: absolute; top: 26px; right: 0; bottom: 0; width: 48%; z-index: 1;
border-radius: 0 0 0 26px; overflow: hidden;
}
.ent-hero__visuel img{ display: block; width: 100%; height: 100%; object-fit: cover; }
.ent-sens{ background: #fff; padding: 70px 0; }
.ent-sens__int{ display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: start; }
.ent-sens h2{
font-family: var(--font-heading); font-weight: 800; color: var(--navy);
font-size: clamp(1.45rem, 2.2vw, 1.95rem); line-height: 1.25; margin: 0 0 18px; text-wrap: balance;
}
.ent-sens__lieu{ display: flex; align-items: center; gap: 10px; margin: 0; color: var(--fr-vert); font-family: var(--font-heading); font-weight: 600; font-size: .95rem; }
.ent-sens__lieu svg{ width: 20px; height: 20px; flex: none; }
.ent-sens__droite p{ color: #3A4060; line-height: 1.78; margin: 0 0 16px; }
.ent-sens__droite .fr-btn{ margin-top: 12px; }
.ent-valeurs{
background: #2A2586;
color: #fff; padding: 74px 0; position: relative; overflow: hidden;
}
.ent-valeurs::before{
content: ''; position: absolute; inset: 0;
background: url('assets/img/fr/DirIPS-Home-Vague-Invert.svg') right -60px bottom -80px / auto 130% no-repeat;
opacity: .16; pointer-events: none;
}
.ent-valeurs .container{ position: relative; }
.ent-valeurs__tete{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: end; margin: 0 0 40px; }
.ent-valeurs__tete h2{
font-family: var(--font-heading); font-weight: 800; color: #fff;
font-size: clamp(1.6rem, 2.5vw, 2.2rem); line-height: 1.2; margin: 0; text-wrap: balance;
}
.ent-valeurs__tete h2 span{ color: var(--fr-turquoise); display: block; }
.ent-valeurs__tete p{ color: #D8DDF6; line-height: 1.75; margin: 0; }
.ent-valeurs__liste{ list-style: none; margin: 0 0 44px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 26px; }
.ent-valeur{ display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 18px; align-items: start; }
/* 92 px : les illustrations du client sont détaillées, elles ne se lisent
pas dans une vignette de 66. */
.ent-valeur__picto{
width: 92px; height: 92px; border-radius: 18px; padding: 10px; background: #fff;
box-shadow: -6px 6px 0 0 var(--fr-bleu-pale); display: flex; align-items: center; justify-content: center;
}
.ent-valeur__picto img{ width: 100%; height: 100%; object-fit: contain; }
.ent-valeur__picto svg{ width: 100%; height: 100%; color: var(--fr-bleu); }
.ent-valeur h3{ font-family: var(--font-heading); font-weight: 700; color: #fff; font-size: 1.08rem; margin: 4px 0 6px; }
.ent-valeur p{ color: #D8DDF6; line-height: 1.65; margin: 0; font-size: .92rem; }
.ent-relations{
list-style: none; margin: 0; padding: 34px 0 0; border-top: 1px solid rgba(255, 255, 255, .18);
display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 30px;
}
.ent-relation__icone{ display: inline-flex; color: var(--fr-bleu-pale); }
.ent-relation__icone svg{ width: 26px; height: 26px; }
.ent-relation h3{ font-family: var(--font-heading); font-weight: 700; color: #fff; font-size: 1.05rem; margin: 10px 0 8px; }
.ent-relation p{ color: #C7CEEE; line-height: 1.7; margin: 0; font-size: .92rem; }
.ent-histoire{ background: var(--fr-degrade-gamme); padding: 66px 0; }
.ent-histoire__int{ display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
.ent-histoire__tete{ position: sticky; top: 108px; }
.ent-histoire__tete h2{
font-family: var(--font-heading); font-weight: 700; color: var(--navy);
font-size: clamp(1.4rem, 2.1vw, 1.85rem); line-height: 1.26; margin: 0 0 14px; text-wrap: balance;
}
.ent-histoire__tete p{ color: var(--dh-text, #3A4060); line-height: 1.7; margin: 0; font-size: .94rem; }
/* Frise en une colonne : rail à gauche, année puis intitulé. */
.ent-frise{ list-style: none; margin: 0; padding: 0 0 0 26px; position: relative; }
.ent-frise::before{
content: ''; position: absolute; left: 5px; top: 10px; bottom: 10px; width: 2px; background: rgba(42, 37, 134, .16);
}
.ent-jalon{
position: relative; display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 22px; align-items: start;
padding: 15px 0; border-bottom: 1px solid rgba(42, 37, 134, .10);
}
.ent-jalon:last-child{ border-bottom: 0; }
.ent-jalon::before{
content: ''; position: absolute; left: -26px; top: 22px; width: 11px; height: 11px; border-radius: 50%;
background: var(--fr-vert-clair); box-shadow: 0 0 0 4px rgba(255, 255, 255, .9);
}
.ent-jalon__annee{ font-family: var(--font-heading); font-weight: 700; color: var(--navy); font-size: 1.08rem; line-height: 1.45; }
.ent-jalon__corps h3{ font-family: var(--font-heading); font-weight: 700; color: var(--navy); font-size: .98rem; margin: 0 0 4px; line-height: 1.35; }
.ent-jalon__corps p{ color: #5B628A; line-height: 1.55; margin: 0 0 4px; font-size: .9rem; }
.ent-jalon__corps p:last-child{ margin-bottom: 0; }
.ent-aujourdhui{ background: #fff; padding: 76px 0; }
.ent-aujourdhui__int{ display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 52px; align-items: center; }
.ent-aujourdhui h2{
font-family: var(--font-heading); font-weight: 800; color: var(--navy);
font-size: clamp(1.55rem, 2.4vw, 2.1rem); line-height: 1.2; margin: 0 0 16px; text-wrap: balance;
}
.ent-aujourdhui p{ color: #3A4060; line-height: 1.78; margin: 0; }
.ent-citation{
background: #F6F9FF; border-radius: 18px; padding: 36px 40px; margin: 0;
box-shadow: 0 16px 36px rgba(42, 37, 134, .08); position: relative;
}
.ent-citation::before{
content: '“'; position: absolute; top: 8px; left: 26px;
font-family: Georgia, 'Times New Roman', serif; font-size: 4rem; line-height: 1; color: var(--fr-vert-clair);
}
.ent-citation blockquote{ margin: 0 0 20px; padding: 0 0 0 34px; border: 0; }
.ent-citation blockquote p{ font-style: italic; color: #2E3459; line-height: 1.8; margin: 0; }
.ent-citation figcaption{ display: grid; gap: 4px; padding: 18px 0 0 34px; border-top: 1px solid #E1E9F8; }
.ent-citation__nom{ font-family: var(--font-heading); font-weight: 700; color: var(--navy); }
.ent-citation__role{ color: #5B628A; font-size: .92rem; }
.ent-fabrique{ background: var(--fr-degrade-gamme); padding: 76px 0; }
.ent-fabrique__int{ display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2fr); gap: 48px; align-items: start; }
.ent-fabrique__tete h2{
font-family: var(--font-heading); font-weight: 800; color: var(--navy);
font-size: clamp(1.4rem, 2.1vw, 1.85rem); line-height: 1.25; margin: 0 0 14px; text-wrap: balance;
}
.ent-fabrique__tete p{ color: #3A4060; line-height: 1.75; margin: 0; }
.ent-etapes{ list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 24px; }
.ent-etape{ display: grid; gap: 10px; align-content: start; }
.ent-etape__num{ font-family: var(--font-heading); font-weight: 800; font-size: 1.5rem; color: var(--fr-turquoise); line-height: 1; }
.ent-etape__icone{
width: 64px; height: 64px; border-radius: 14px; background: #fff; color: var(--fr-bleu);
display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(42, 37, 134, .10);
}
.ent-etape__icone svg{ width: 28px; height: 28px; }
.ent-etape h3{ font-family: var(--font-heading); font-weight: 700; color: var(--navy); font-size: 1.02rem; margin: 4px 0 0; }
.ent-etape{ position: relative; }
.ent-etape p{ color: #3A4060; line-height: 1.62; margin: 0; font-size: .9rem; }
.ent-etape__fleche{ position: absolute; right: -16px; top: 26px; color: var(--fr-bleu-pale); font-size: 1.1rem; font-weight: 700; }
.ent-fabrique__note{ color: #3A4060; line-height: 1.7; margin: 0 0 22px; font-size: .95rem; }
.ent-fabrique__actions{ display: flex; flex-wrap: wrap; gap: 16px; }
@media (max-width: 980px){
.ent-hero__int{ display: block; min-height: 0; }
.ent-hero__texte{ width: 100%; }
.ent-hero__visuel{ position: static; width: 100%; height: 260px; border-radius: 18px; margin-top: 28px; }
.ent-sens__int,
.ent-valeurs__tete,
.ent-aujourdhui__int,
.ent-fabrique__int{ grid-template-columns: 1fr; gap: 30px; }
.ent-histoire__int{ grid-template-columns: 1fr; gap: 26px; }
.ent-histoire__tete{ position: static; }
.ent-jalon{ grid-template-columns: 1fr; gap: 4px; }
.ent-etape__fleche{ display: none; }
}
@media (max-width: 620px){
.ent-hero{ padding: 40px 0 52px; }
.ent-citation{ padding: 28px 22px; }
.ent-citation blockquote,
.ent-citation figcaption{ padding-left: 0; }
}
/* ============================================================
Nos partenaires — gabarit dédié (01/09)
Bannière, domaines d'expertise, cartes partenaires avec
présentation dépliable, mur de logos, appels à l'action.
============================================================ */
.part-hero{
background: linear-gradient(160deg, #FFFFFF 0%, #F1F6FF 45%, #E2ECFE 100%);
padding: 56px 0 72px; position: relative; overflow: hidden;
}
.part-hero__int{ min-height: 430px; display: flex; align-items: center; }
.part-hero__texte{ position: relative; z-index: 3; width: min(100%, 520px); }
.part-hero__surtitre{
margin: 18px 0 12px; font-family: var(--font-heading); font-size: .78rem; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase; color: var(--fr-bleu-pale);
}
.part-hero h1{
font-family: var(--font-heading); font-weight: 800; color: var(--navy);
font-size: clamp(1.9rem, 3.2vw, 2.8rem); line-height: 1.15; margin: 0 0 20px; text-wrap: balance;
}
.part-hero h1 span{ color: var(--fr-bleu-pale); display: block; }
.part-hero__chapo{ color: #3A4060; font-size: 1rem; line-height: 1.72; margin: 0 0 28px; max-width: 42ch; }
.part-hero__actions{ display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; }
.part-hero__visuel{
position: absolute; top: 26px; right: 0; bottom: 0; width: 50%; z-index: 1;
border-radius: 0 0 0 26px; overflow: hidden;
}
.part-hero__visuel img{ display: block; width: 100%; height: 100%; object-fit: cover; }
.part-hero__vague{
position: absolute; right: -6%; bottom: -8%; width: 66%; height: auto;
z-index: 2; pointer-events: none; opacity: .85;
}
.part-domaines{
background: #2A2586;
padding: 34px 0; position: relative; overflow: hidden;
}
.part-domaines::before{
content: ''; position: absolute; inset: 0;
background: url('assets/img/fr/DirIPS-Home-Vague-Invert.svg') right -60px bottom -80px / auto 130% no-repeat;
opacity: .14; pointer-events: none;
}
.part-domaines .container{ position: relative; }
.part-domaines__liste{
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px 34px;
}
.part-domaine{ display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 18px; align-items: center; }
.part-domaine + .part-domaine{ border-left: 1px solid rgba(255, 255, 255, .16); padding-left: 34px; }
.part-domaine__picto{
width: 62px; height: 62px; border-radius: 14px; background: #fff; color: var(--fr-bleu);
display: flex; align-items: center; justify-content: center;
}
.part-domaine__picto svg{ width: 26px; height: 26px; }
.part-domaine h2{ font-family: var(--font-heading); font-weight: 700; color: #fff; font-size: 1.08rem; margin: 0 0 5px; }
.part-domaine p{ color: #C7CEEE; line-height: 1.55; margin: 0; font-size: .88rem; }
.part-reseau{ background: #fff; padding: 70px 0; }
.part-reseau__tete{ max-width: 620px; margin: 0 0 34px; }
.part-reseau__tete h2{
font-family: var(--font-heading); font-weight: 800; color: var(--navy);
font-size: clamp(1.5rem, 2.3vw, 2rem); line-height: 1.22; margin: 0 0 12px; text-wrap: balance;
}
.part-reseau__tete p{ color: #5B628A; line-height: 1.7; margin: 0; font-size: .95rem; }
.part-cartes{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.part-carte{
display: grid; grid-template-columns: 200px minmax(0, 1fr);
background: #fff; border: 1px solid #E6ECF8; border-radius: 14px; overflow: hidden;
transition: box-shadow .2s ease, border-color .2s ease;
}
.part-carte:hover{ border-color: var(--fr-bleu-pale); box-shadow: 0 14px 30px rgba(42, 37, 134, .10); }
.part-carte--large{ grid-column: 1 / -1; }
.part-carte__logo{
display: grid; align-content: center; justify-items: center; gap: 12px;
padding: 26px 20px; border-right: 1px solid #EDF1FA; background: #FCFDFF;
}
.part-carte__logo img{ max-width: 150px; height: auto; max-height: 56px; object-fit: contain; }
.part-carte__logo span{ font-family: var(--font-heading); font-weight: 700; color: var(--navy); font-size: .82rem; text-align: center; }
.part-carte__txt{ padding: 24px 26px; display: grid; align-content: start; gap: 10px; }
.part-carte__txt h3{ font-family: var(--font-heading); font-weight: 700; color: var(--navy); font-size: 1.05rem; margin: 0; }
.part-carte__txt > p{ color: #5B628A; line-height: 1.6; margin: 0; font-size: .9rem; }
.part-carte__plus summary{
display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
font-family: var(--font-heading); font-weight: 600; font-size: .88rem; color: var(--fr-bleu);
}
.part-carte__plus summary::-webkit-details-marker{ display: none; }
.part-carte__plus summary::after{ content: '→'; transition: transform .2s ease; }
.part-carte__plus[open] summary::after{ transform: rotate(90deg); }
.part-carte__plus summary:hover{ color: var(--fr-bleu-clair); }
.part-carte__texte{ margin-top: 12px; }
.part-carte__texte p{ color: #3A4060; line-height: 1.7; margin: 0 0 10px; font-size: .9rem; }
.part-carte__texte p:last-child{ margin-bottom: 0; }
.part-carte__texte img{ display: none; }
.part-mur{
list-style: none; margin: 34px 0 0; padding: 34px 0 0; border-top: 1px solid #E6ECF8;
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
}
.part-mur__tuile{
display: grid; justify-items: center; align-content: center; gap: 12px;
background: #fff; border: 1px solid #E6ECF8; border-radius: 14px; padding: 24px 18px; min-height: 132px;
transition: box-shadow .2s ease, border-color .2s ease;
}
.part-mur__tuile:hover{ border-color: var(--fr-bleu-pale); box-shadow: 0 12px 26px rgba(42, 37, 134, .09); }
.part-mur__tuile img{ max-width: 150px; max-height: 48px; height: auto; object-fit: contain; }
.part-mur__tuile span{ font-family: var(--font-heading); font-weight: 700; color: var(--navy); font-size: .82rem; text-align: center; }
.part-durables{ background: var(--fr-degrade-gamme); padding: 56px 0; }
.part-durables__int{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.part-durables h2{
font-family: var(--font-heading); font-weight: 800; color: var(--navy);
font-size: clamp(1.35rem, 2.1vw, 1.8rem); line-height: 1.24; margin: 0; text-wrap: balance;
}
.part-durables__droite p{ color: #3A4060; line-height: 1.7; margin: 0 0 20px; font-size: .95rem; }
@media (max-width: 980px){
.part-hero__int{ display: block; min-height: 0; }
.part-hero__texte{ width: 100%; }
.part-hero__visuel{ position: static; width: 100%; height: 240px; border-radius: 18px; margin-top: 26px; }
.part-hero__vague{ display: none; }
.part-domaine + .part-domaine{ border-left: 0; padding-left: 0; }
.part-durables__int{ grid-template-columns: 1fr; gap: 22px; }
.part-cartes{ grid-template-columns: 1fr; }
.part-mur{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px){
.part-hero{ padding: 40px 0 48px; }
.part-carte{ grid-template-columns: 1fr; }
.part-carte__logo{ border-right: 0; border-bottom: 1px solid #EDF1FA; }
.part-mur{ grid-template-columns: 1fr; }
}
/* ============================================================
Fiche logiciel — mise en page du 01/09
Bannière fondue, promesses, visionneuse à onglets, grille de
fonctionnalités, couverture, terrain, accompagnement, croisé,
ressources et appel final. Portée : .lg-*
============================================================ */
.lg-hero{
background: linear-gradient(160deg, #FFFFFF 0%, #F1F6FF 44%, #E4EDFE 100%);
padding: 44px 0 60px; position: relative; overflow: hidden;
}
.lg-hero__int{ min-height: 400px; display: flex; align-items: center; }
.lg-hero__texte{ position: relative; z-index: 3; width: min(100%, 520px); }
.lg-hero__surtitre{
margin: 18px 0 12px; font-family: var(--font-heading); font-size: .76rem; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase; color: var(--fr-bleu-pale);
}
.lg-hero h1{
font-family: var(--font-heading); font-weight: 800; color: var(--navy);
font-size: clamp(1.9rem, 3.1vw, 2.7rem); line-height: 1.16; margin: 0 0 20px; text-wrap: balance;
}
.lg-hero h1 span{ color: var(--fr-bleu-pale); display: block; }
.lg-hero__chapo{ color: #333A5C; font-size: 1rem; line-height: 1.7; margin: 0 0 26px; max-width: 40ch; }
.lg-hero__actions{ display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; }
.lg-hero__visuel{ position: absolute; inset: 0 0 0 auto; width: 62%; z-index: 1; overflow: hidden; }
.lg-hero__visuel > img:first-child{
display: block; width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%;
-webkit-mask-image:
linear-gradient(90deg, transparent 0%, rgba(0,0,0,.18) 20%, rgba(0,0,0,.62) 42%, #000 68%),
linear-gradient(180deg, #000 0%, #000 52%, rgba(0,0,0,.55) 80%, transparent 100%);
mask-image:
linear-gradient(90deg, transparent 0%, rgba(0,0,0,.18) 20%, rgba(0,0,0,.62) 42%, #000 68%),
linear-gradient(180deg, #000 0%, #000 52%, rgba(0,0,0,.55) 80%, transparent 100%);
-webkit-mask-composite: source-in;
mask-composite: intersect;
}
.lg-hero__voile{
position: absolute; inset: 0; pointer-events: none;
background:
linear-gradient(180deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,0) 26%, rgba(228,237,254,0) 62%, rgba(228,237,254,.6) 100%),
linear-gradient(90deg, rgba(42,37,134,0) 34%, rgba(42,37,134,.06) 56%, rgba(42,37,134,.11) 100%);
}
.lg-hero__vague{
position: absolute; right: -8%; bottom: -10%; width: 58%; height: auto;
z-index: 2; pointer-events: none; opacity: .5;
}
.lg-promesses{
background: #2A2586;
padding: 34px 0; position: relative; overflow: hidden;
}
.lg-promesses::before{
content: ''; position: absolute; inset: 0;
background: url('assets/img/fr/DirIPS-Home-Vague-Invert.svg') right -40px bottom -60px / auto 110% no-repeat;
opacity: .09; pointer-events: none;
}
.lg-promesses .container{ position: relative; }
.lg-promesses__liste{
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px 34px;
}
.lg-promesse{ display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 18px; align-items: center; }
.lg-promesse + .lg-promesse{ border-left: 1px solid rgba(255, 255, 255, .16); padding-left: 34px; }
.lg-promesse__picto{
width: 62px; height: 62px; border-radius: 14px; background: #fff; color: var(--fr-bleu);
display: flex; align-items: center; justify-content: center; box-shadow: -5px 5px 0 0 rgba(157, 190, 244, .5);
}
.lg-promesse__picto svg{ width: 26px; height: 26px; }
.lg-promesse h2{ font-family: var(--font-heading); font-weight: 700; color: #fff; font-size: 1.1rem; margin: 0 0 5px; }
.lg-promesse p{ color: #C7CEEE; line-height: 1.55; margin: 0; font-size: .89rem; }
.lg-pratique{ background: var(--fr-degrade-gamme); padding: 70px 0; }
.lg-pratique__int{ display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 52px; align-items: center; }
.lg-pratique h2{
font-family: var(--font-heading); font-weight: 800; color: var(--navy);
font-size: clamp(1.5rem, 2.3vw, 2rem); line-height: 1.22; margin: 0 0 14px; text-wrap: balance;
}
.lg-pratique__chapo{ color: #3A4060; line-height: 1.72; margin: 0 0 26px; font-size: .97rem; }
.lg-atouts{ list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.lg-atouts li{ display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 16px; align-items: start; }
.lg-atout__picto{
width: 46px; height: 46px; border-radius: 12px; background: #fff; color: var(--fr-bleu);
display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(42, 37, 134, .10);
}
.lg-atout__picto svg{ width: 21px; height: 21px; }
.lg-atouts strong{ display: block; font-family: var(--font-heading); font-weight: 700; color: var(--navy); font-size: .98rem; margin-bottom: 3px; }
.lg-atouts span{ color: #5B628A; line-height: 1.55; font-size: .88rem; }
.lg-visionneuse{ display: grid; gap: 0; }
.lg-visionneuse__onglets{ display: flex; flex-wrap: wrap; gap: 4px; }
.lg-onglet{
appearance: none; border: 0; background: transparent; cursor: pointer;
font-family: var(--font-heading); font-weight: 600; font-size: .88rem; color: #5B628A;
padding: 12px 18px; border-radius: 10px 10px 0 0; transition: color .2s ease, background-color .2s ease;
}
.lg-onglet:hover{ color: var(--fr-bleu); }
.lg-onglet.est-actif{ background: #fff; color: var(--navy); box-shadow: 0 -4px 14px rgba(42, 37, 134, .06); }
.lg-visionneuse__cadre{
background: #fff; border-radius: 0 16px 16px 16px; padding: 14px;
box-shadow: 0 24px 50px -28px rgba(23, 20, 63, .45); border: 1px solid #E6ECF8;
}
.lg-vue{ margin: 0; }
.lg-vue img{ display: block; width: 100%; height: auto; border-radius: 8px; }
.lg-fonctions{ background: #fff; padding: 72px 0; }
.lg-fonctions__tete{ max-width: 620px; margin: 0 0 34px; }
.lg-fonctions__tete h2{
font-family: var(--font-heading); font-weight: 800; color: var(--navy);
font-size: clamp(1.5rem, 2.3vw, 2rem); line-height: 1.22; margin: 0; text-wrap: balance;
}
.lg-fonctions__grille{
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
}
.lg-fonction{ padding: 26px 28px; border-top: 1px solid #E9EEF9; border-left: 1px solid #E9EEF9; }
.lg-fonction:nth-child(3n+1){ border-left: 0; padding-left: 0; }
.lg-fonction__picto{ display: inline-flex; color: var(--fr-bleu); margin-bottom: 12px; }
.lg-fonction__picto svg{ width: 26px; height: 26px; }
.lg-fonction h3{ font-family: var(--font-heading); font-weight: 700; color: var(--navy); font-size: 1.02rem; margin: 0 0 8px; }
.lg-fonction p{ color: #5B628A; line-height: 1.6; margin: 0; font-size: .89rem; }
.lg-apercus{ display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; margin-top: 38px; }
.lg-apercu{
margin: 0; background: #fff; border: 1px solid #E6ECF8; border-radius: 16px; padding: 16px;
box-shadow: 0 18px 40px -26px rgba(23, 20, 63, .40);
}
.lg-apercu figcaption{
font-family: var(--font-heading); font-weight: 700; color: var(--navy); font-size: .92rem;
margin: 4px 4px 12px;
}
.lg-apercu img{ display: block; width: 100%; height: auto; border-radius: 10px; }
.lg-couverture{
background: linear-gradient(150deg, #0D0A4A 0%, #2A2585 100%);
color: #fff; padding: 64px 0; position: relative; overflow: hidden;
}
.lg-couverture::before{
content: ''; position: absolute; inset: 0;
background: url('assets/img/fr/DirIPS-Home-Vague-Invert.svg') right -60px bottom -70px / auto 120% no-repeat;
opacity: .10; pointer-events: none;
}
.lg-couverture__int{ position: relative; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 52px; align-items: start; }
.lg-couverture__surtitre{
margin: 0 0 12px; font-family: var(--font-heading); font-size: .76rem; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase; color: var(--fr-turquoise);
}
.lg-couverture h2{
font-family: var(--font-heading); font-weight: 800; color: #fff;
font-size: clamp(1.5rem, 2.3vw, 2rem); line-height: 1.22; margin: 0 0 14px; text-wrap: balance;
}
.lg-couverture__gauche p{ color: #C7CEEE; line-height: 1.72; margin: 0; font-size: .94rem; }
.lg-couverture__liste{
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px 34px;
}
.lg-couverture__liste li{ display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; color: #E4E8FB; font-size: .92rem; line-height: 1.5; }
.lg-couverture__liste svg{ width: 18px; height: 18px; color: var(--fr-turquoise); margin-top: 2px; }
.lg-terrain{ background: #fff; padding: 56px 0; text-align: center; }
.lg-terrain h2{
font-family: var(--font-heading); font-weight: 800; color: var(--navy);
font-size: clamp(1.3rem, 2vw, 1.7rem); margin: 0 0 24px;
}
.lg-terrain__types{ list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.lg-terrain__types li{
background: #EEF3FE; color: var(--navy); border-radius: 999px; padding: 8px 18px;
font-family: var(--font-heading); font-weight: 600; font-size: .84rem;
}
.lg-terrain__note{ color: #5B628A; margin: 0; font-size: .9rem; }
.lg-equipe{ background: var(--fr-degrade-gamme); padding: 66px 0; }
.lg-equipe__int{ display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 52px; align-items: center; }
.lg-equipe h2{
font-family: var(--font-heading); font-weight: 800; color: var(--navy);
font-size: clamp(1.45rem, 2.2vw, 1.9rem); line-height: 1.22; margin: 0 0 14px; text-wrap: balance;
}
.lg-equipe__gauche p{ color: #3A4060; line-height: 1.72; margin: 0 0 22px; font-size: .95rem; }
.lg-equipe__piliers{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 26px 30px; }
.lg-pilier{ display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 16px; align-items: start; }
.lg-pilier__picto{
width: 54px; height: 54px; border-radius: 14px; background: #fff; color: var(--fr-bleu);
display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(42, 37, 134, .10);
}
.lg-pilier__picto svg{ width: 24px; height: 24px; }
.lg-pilier h3{ font-family: var(--font-heading); font-weight: 700; color: var(--navy); font-size: 1rem; margin: 4px 0 6px; }
.lg-pilier p{ color: #5B628A; line-height: 1.55; margin: 0; font-size: .88rem; }
.lg-temoin{ background: #fff; padding: 66px 0; }
.lg-temoin__int{ display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: 40px; align-items: center; }
.lg-temoin__carte{
margin: 0; background: #F6F9FF; border-radius: 18px; padding: 34px 38px; position: relative;
box-shadow: 0 16px 36px rgba(42, 37, 134, .07);
}
.lg-temoin__carte::before{
content: '“'; position: absolute; top: 6px; left: 24px;
font-family: Georgia, 'Times New Roman', serif; font-size: 3.8rem; line-height: 1; color: var(--fr-vert-clair);
}
.lg-temoin__carte blockquote{ margin: 0 0 18px; padding: 0 0 0 32px; border: 0; }
.lg-temoin__carte blockquote p{ font-style: italic; color: #2E3459; line-height: 1.78; margin: 0; }
.lg-temoin__carte figcaption{ display: grid; gap: 4px; padding: 16px 0 0 32px; border-top: 1px solid #E1E9F8; }
.lg-temoin__nom{ font-family: var(--font-heading); font-weight: 700; color: var(--navy); }
.lg-temoin__role{ color: #5B628A; font-size: .9rem; }
.lg-temoin__chiffres{ list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.lg-temoin__chiffres strong{
display: block; font-family: var(--font-heading); font-weight: 800; color: var(--navy); font-size: 2rem; line-height: 1;
}
.lg-temoin__chiffres span{ display: block; color: #5B628A; font-size: .88rem; line-height: 1.5; margin-top: 6px; }
.lg-croise{ background: var(--fr-degrade-gamme); padding: 0 0 66px; }
.lg-croise__carte{
display: grid; grid-template-columns: minmax(0, .55fr) minmax(0, 1fr); gap: 34px; align-items: center;
background: var(--fr-degrade-gamme); border-radius: 20px; padding: 26px; border: 1px solid #E1E9F8;
}
.lg-croise__visuel img{ display: block; width: 100%; height: 100%; max-height: 240px; object-fit: cover; border-radius: 14px; }
.lg-croise__texte h2{
font-family: var(--font-heading); font-weight: 800; color: var(--navy);
font-size: clamp(1.25rem, 1.9vw, 1.6rem); line-height: 1.25; margin: 0 0 12px; text-wrap: balance;
}
.lg-croise__texte p{ color: #3A4060; line-height: 1.7; margin: 0 0 16px; font-size: .94rem; }
.lg-croise__lien{
font-family: var(--font-heading); font-weight: 700; font-size: .86rem; letter-spacing: .06em;
text-transform: uppercase; color: var(--fr-bleu); text-decoration: none;
border-bottom: 2px solid transparent; transition: border-color .2s ease;
}
.lg-croise__lien::after{ content: ' →'; }
.lg-croise__lien:hover, .lg-croise__lien:focus-visible{ border-bottom-color: var(--fr-bleu); }
.lg-ressources{ background: #fff; padding: 0 0 66px; text-align: center; }
.lg-ressources h2{
font-family: var(--font-heading); font-weight: 800; color: var(--navy);
font-size: clamp(1.25rem, 1.9vw, 1.6rem); margin: 0 0 24px;
}
.lg-ressources__liste{
list-style: none; margin: 0 auto; padding: 0; max-width: 860px;
display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 40px;
}
.lg-ressources__liste li{ border-bottom: 1px solid #E9EEF9; }
.lg-ressources__liste a{
display: block; padding: 13px 4px; text-align: left; text-decoration: none;
font-family: var(--font-heading); font-weight: 600; font-size: .92rem; color: var(--fr-bleu);
transition: color .2s ease, padding-left .2s ease;
}
.lg-ressources__liste a::after{ content: ' →'; }
.lg-ressources__liste a:hover{ color: var(--fr-bleu-clair); padding-left: 8px; }
.lg-final{ background: #fff; padding: 0 0 78px; }
.lg-final__carte{
background: #2A2586;
border-radius: 20px; padding: 42px 48px; color: #fff;
display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30px 48px; align-items: center;
}
.lg-final__carte h2{
font-family: var(--font-heading); font-weight: 800; color: #fff;
font-size: clamp(1.35rem, 2.1vw, 1.8rem); line-height: 1.24; margin: 0 0 10px; text-wrap: balance;
}
.lg-final__carte p{ color: #D8DDF6; line-height: 1.7; margin: 0; max-width: 52ch; font-size: .95rem; }
.lg-final__actions{ display: grid; justify-items: center; gap: 12px; }
.lg-final__lien{
font-family: var(--font-heading); font-weight: 600; font-size: .9rem; color: #C7CEEE; text-decoration: none;
border-bottom: 1px solid transparent; transition: color .2s ease, border-color .2s ease;
}
.lg-final__lien::after{ content: ' →'; }
.lg-final__lien:hover{ color: #fff; border-bottom-color: #fff; }
@media (max-width: 980px){
.lg-hero__int{ display: block; min-height: 0; }
.lg-hero__texte{ width: 100%; }
.lg-hero__visuel{ position: static; width: 100%; height: 240px; border-radius: 18px; margin-top: 26px; }
.lg-hero__visuel > img:first-child{
-webkit-mask-image: none; mask-image: none; border-radius: 18px;
}
.lg-hero__vague{ display: none; }
.lg-promesse + .lg-promesse{ border-left: 0; padding-left: 0; }
.lg-pratique__int,
.lg-couverture__int,
.lg-equipe__int,
.lg-temoin__int{ grid-template-columns: 1fr; gap: 30px; }
.lg-fonctions__grille{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lg-fonction:nth-child(3n+1){ border-left: 1px solid #E9EEF9; padding-left: 28px; }
.lg-fonction:nth-child(2n+1){ border-left: 0; padding-left: 0; }
.lg-croise__carte{ grid-template-columns: 1fr; }
.lg-final__carte{ grid-template-columns: 1fr; padding: 34px 28px; }
.lg-final__actions{ justify-items: start; }
}
@media (max-width: 620px){
.lg-hero{ padding: 36px 0 46px; }
.lg-visionneuse__cadre{ border-radius: 14px; padding: 10px; }
.lg-onglet{ padding: 10px 12px; font-size: .82rem; }
.lg-fonctions__grille{ grid-template-columns: 1fr; }
.lg-fonction,
.lg-fonction:nth-child(3n+1){ border-left: 0; padding-left: 0; }
.lg-temoin__carte{ padding: 26px 22px; }
.lg-temoin__carte blockquote,
.lg-temoin__carte figcaption{ padding-left: 0; }
.lg-temoin__carte::before{ display: none; }
}
/* Témoignage de la page Démonstration : citation courte, pas un article. */
.demo-temoin{ background: #fff; padding: 62px 0; }
.demo-temoin__int{ display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: 40px; align-items: center; }
.demo-temoin__carte{
margin: 0; background: #F6F9FF; border-radius: 18px; padding: 32px 36px; position: relative;
box-shadow: 0 16px 36px rgba(42, 37, 134, .07);
}
.demo-temoin__carte::before{
content: '“'; position: absolute; top: 4px; left: 22px;
font-family: Georgia, 'Times New Roman', serif; font-size: 3.6rem; line-height: 1; color: var(--fr-vert-clair);
}
.demo-temoin__carte blockquote{ margin: 0 0 18px; padding: 0 0 0 30px; border: 0; }
.demo-temoin__carte blockquote p{ font-style: italic; color: #2E3459; line-height: 1.78; margin: 0; font-size: 1.05rem; }
.demo-temoin__carte figcaption{ display: grid; gap: 4px; padding: 16px 0 0 30px; border-top: 1px solid #E1E9F8; }
.demo-temoin__nom{ font-family: var(--font-heading); font-weight: 700; color: var(--navy); }
.demo-temoin__role{ color: #5B628A; font-size: .9rem; }
.demo-temoin__lien{
justify-self: start; margin-top: 6px; font-family: var(--font-heading); font-weight: 600; font-size: .88rem;
color: var(--fr-bleu); text-decoration: none; border-bottom: 2px solid transparent; transition: border-color .2s ease;
}
.demo-temoin__lien::after{ content: ' →'; }
.demo-temoin__lien:hover, .demo-temoin__lien:focus-visible{ border-bottom-color: var(--fr-bleu); }
.demo-temoin__chiffres{ list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.demo-temoin__chiffres strong{
display: block; font-family: var(--font-heading); font-weight: 800; color: var(--navy); font-size: 2rem; line-height: 1;
}
.demo-temoin__chiffres span{ display: block; color: #5B628A; font-size: .88rem; line-height: 1.5; margin-top: 6px; }
@media (max-width: 980px){
.demo-temoin__int{ grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 620px){
.demo-temoin__carte{ padding: 26px 22px; }
.demo-temoin__carte::before{ display: none; }
.demo-temoin__carte blockquote,
.demo-temoin__carte figcaption{ padding-left: 0; }
}
/* ============================================================
Accompagnement et modes de diffusion (02/09)
Portée : .ac-* et .op-*. Les bannières reprennent la recette
commune : photo masquée, texte au-dessus, vague discrète.
============================================================ */
.ecran-lecteur{
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.ac-hero,
.op-hero{
background: linear-gradient(160deg, #FFFFFF 0%, #F1F6FF 44%, #E4EDFE 100%);
padding: 44px 0 56px; position: relative; overflow: hidden;
}
.ac-hero__int,
.op-hero__int{ min-height: 360px; display: flex; align-items: center; }
.ac-hero__texte,
.op-hero__texte{ position: relative; z-index: 3; width: min(100%, 500px); }
.ac-hero__surtitre,
.op-hero__surtitre{
margin: 18px 0 12px; font-family: var(--font-heading); font-size: .76rem; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase; color: var(--fr-bleu-pale);
}
.ac-hero h1,
.op-hero h1{
font-family: var(--font-heading); font-weight: 800; color: var(--navy);
font-size: clamp(1.8rem, 2.9vw, 2.5rem); line-height: 1.16; margin: 0 0 18px; text-wrap: balance;
}
.ac-hero h1 span,
.op-hero h1 span{ color: var(--fr-bleu-pale); display: block; }
.ac-hero__chapo,
.op-hero__chapo{ color: #333A5C; font-size: 1rem; line-height: 1.7; margin: 0 0 24px; max-width: 40ch; }
.ac-hero__actions,
.op-hero__actions{ display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; }
.ac-hero__visuel,
.op-hero__visuel{ position: absolute; inset: 0 0 0 auto; width: 58%; z-index: 1; overflow: hidden; }
.ac-hero__visuel > img:first-child,
.op-hero__visuel > img:first-child{
display: block; width: 100%; height: 100%; object-fit: cover; object-position: 58% 42%;
-webkit-mask-image:
linear-gradient(90deg, transparent 0%, rgba(0,0,0,.18) 20%, rgba(0,0,0,.62) 42%, #000 68%),
linear-gradient(180deg, #000 0%, #000 52%, rgba(0,0,0,.55) 80%, transparent 100%);
mask-image:
linear-gradient(90deg, transparent 0%, rgba(0,0,0,.18) 20%, rgba(0,0,0,.62) 42%, #000 68%),
linear-gradient(180deg, #000 0%, #000 52%, rgba(0,0,0,.55) 80%, transparent 100%);
-webkit-mask-composite: source-in; mask-composite: intersect;
}
.ac-hero__voile,
.op-hero__voile{
position: absolute; inset: 0; pointer-events: none;
background:
linear-gradient(180deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,0) 26%, rgba(228,237,254,0) 62%, rgba(228,237,254,.6) 100%),
linear-gradient(90deg, rgba(42,37,134,0) 34%, rgba(42,37,134,.06) 56%, rgba(42,37,134,.11) 100%);
}
.ac-hero__vague,
.op-hero__vague{
position: absolute; right: -8%; bottom: -10%; width: 54%; height: auto; z-index: 2;
pointer-events: none; opacity: .5;
}
@media (max-width: 980px){
.ac-hero__int, .op-hero__int{ display: block; min-height: 0; }
.ac-hero__texte, .op-hero__texte{ width: 100%; }
.ac-hero__visuel, .op-hero__visuel{ position: static; width: 100%; height: 220px; border-radius: 18px; margin-top: 24px; }
.ac-hero__visuel > img:first-child,
.op-hero__visuel > img:first-child{ -webkit-mask-image: none; mask-image: none; border-radius: 18px; }
.ac-hero__vague, .op-hero__vague{ display: none; }
.ac-etapes{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ac-preuve__int, .ac-formation__int, .op-cloud__int{ grid-template-columns: 1fr; gap: 30px; }
.op-modes__liste{ grid-template-columns: 1fr; }
}
@media (max-width: 620px){
.ac-hero, .op-hero{ padding: 36px 0 42px; }
.ac-etapes{ grid-template-columns: 1fr; }
.ac-preuve__carte, .op-preuve__carte{ padding: 26px 22px; }
.ac-preuve__carte::before, .op-preuve__carte::before{ display: none; }
.ac-preuve__carte blockquote, .ac-preuve__carte figcaption,
.op-preuve__carte blockquote, .op-preuve__carte figcaption{ padding-left: 0; }
}
/* ============================================================
Listes éditoriales — webinaires et témoignages (02/09)
Portée : .ed-*. Même famille de cartes que les actualités.
============================================================ */
.ed-tete{
background: linear-gradient(160deg, #FFFFFF 0%, #F1F6FF 60%, #E4EDFE 100%);
padding: 40px 0 34px;
}
.ed-tete__surtitre{
margin: 16px 0 10px; font-family: var(--font-heading); font-size: .76rem; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase; color: var(--fr-bleu-pale);
}
.ed-tete h1{
font-family: var(--font-heading); font-weight: 800; color: var(--navy);
font-size: clamp(1.75rem, 2.7vw, 2.3rem); line-height: 1.18; margin: 0 0 12px; text-wrap: balance;
}
.ed-tete h1 span{ color: var(--fr-bleu-pale); }
.ed-tete__chapo{ color: #333A5C; font-size: 1rem; line-height: 1.7; margin: 0; max-width: 66ch; }
.ed-liste{ background: #fff; padding: 46px 0 56px; }
.ed-liste__tete{ max-width: 640px; margin: 0 0 26px; }
.ed-liste__tete h2{
font-family: var(--font-heading); font-weight: 800; color: var(--navy);
font-size: clamp(1.4rem, 2.1vw, 1.8rem); margin: 0 0 8px;
}
.ed-liste__tete p{ color: #5B628A; line-height: 1.65; margin: 0; font-size: .93rem; }
.ed-filtres{ display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 26px; }
.ed-filtre{
appearance: none; cursor: pointer; background: #fff; border: 1px solid #E1E9F8; border-radius: 999px;
padding: 9px 18px; font-family: var(--font-heading); font-weight: 600; font-size: .86rem; color: var(--navy);
transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.ed-filtre:hover{ border-color: var(--fr-bleu-pale); }
.ed-filtre.est-actif{ background: var(--fr-bleu); border-color: var(--fr-bleu); color: #fff; }
.ed-cartes{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ed-carte > a{
display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid #E6ECF8;
border-radius: 16px; overflow: hidden; text-decoration: none;
transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.ed-carte > a:hover{ border-color: var(--fr-bleu-pale); box-shadow: 0 20px 42px -26px rgba(23, 20, 63, .45); transform: translateY(-3px); }
.ed-carte__media{ display: block; background: var(--fr-degrade-gamme); }
.ed-carte__media img{ display: block; width: 100%; height: 178px; object-fit: cover; }
.ed-carte__corps{ display: flex; flex-direction: column; gap: 9px; padding: 20px 22px 22px; flex: 1; }
.ed-carte__meta{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ed-carte__date{ color: #8A90B4; font-size: .8rem; font-family: var(--font-heading); font-weight: 600; }
.ed-carte__etiquette{
background: #EEF3FE; color: var(--navy); border-radius: 999px; padding: 4px 11px;
font-family: var(--font-heading); font-size: .74rem; font-weight: 700;
}
.ed-carte__titre{
font-family: var(--font-heading); font-weight: 700; color: var(--navy); font-size: 1.02rem; line-height: 1.35;
}
.ed-carte__extrait{ color: #5B628A; font-size: .89rem; line-height: 1.6; }
.ed-carte__lien{
margin-top: auto; font-family: var(--font-heading); font-weight: 600; font-size: .88rem; color: var(--fr-bleu);
}
.ed-liste__note{ color: #5B628A; font-size: .92rem; line-height: 1.65; margin: 26px 0 0; }
.ed-liste__note a{ color: var(--fr-bleu); font-weight: 600; }
.ed-liste__vide{ color: #5B628A; margin: 22px 0 0; }
.ed-externes{ background: var(--fr-degrade-gamme); padding: 56px 0; }
.ed-externes__tete{ max-width: 700px; margin: 0 0 26px; }
.ed-externes__tete h2{
font-family: var(--font-heading); font-weight: 800; color: var(--navy);
font-size: clamp(1.35rem, 2vw, 1.7rem); margin: 0 0 10px;
}
.ed-externes__tete p{ color: #3A4060; line-height: 1.7; margin: 0; font-size: .94rem; }
.ed-externe{ background: #fff; border: 1px solid #E1E9F8; border-radius: 16px; padding: 22px 26px; }
.ed-externe + .ed-externe{ margin-top: 18px; }
.ed-externe__tete{ display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.ed-externe__tete h3{ font-family: var(--font-heading); font-weight: 700; color: var(--navy); font-size: 1.05rem; margin: 0; }
.ed-externe__tous{
font-family: var(--font-heading); font-weight: 600; font-size: .86rem; color: var(--fr-bleu); text-decoration: none;
border-bottom: 2px solid transparent; transition: border-color .2s ease;
}
.ed-externe__tous::after{ content: ' ↗'; }
.ed-externe__tous:hover{ border-bottom-color: var(--fr-bleu); }
.ed-externe__liste{ list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ed-externe__liste a{
display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px;
padding: 11px 4px; border-bottom: 1px solid #EEF2FA; text-decoration: none; color: #3A4060; font-size: .92rem;
transition: color .2s ease, padding-left .2s ease;
}
.ed-externe__liste li:last-child a{ border-bottom: 0; }
.ed-externe__liste a:hover{ color: var(--fr-bleu); padding-left: 6px; }
.ed-externe__etat{
font-family: var(--font-heading); font-size: .76rem; font-weight: 600; color: var(--fr-vert);
background: #F1FBF8; border-radius: 999px; padding: 3px 10px; white-space: nowrap;
}
@media (max-width: 1100px){
.ed-cartes{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
.ed-cartes{ grid-template-columns: 1fr; }
.ed-externe{ padding: 20px 20px; }
}
/* Ressources extérieures : deux organismes, sans liste d'événements. */
.ed-organismes{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.ed-organisme{ background: #fff; border: 1px solid #E1E9F8; border-radius: 16px; padding: 24px 26px; display: grid; gap: 10px; align-content: start; }
.ed-organisme h3{ font-family: var(--font-heading); font-weight: 700; color: var(--navy); font-size: 1.05rem; margin: 0; }
.ed-organisme p{ color: #5B628A; line-height: 1.65; margin: 0; font-size: .92rem; }
.ed-organisme .ed-externe__tous{ justify-self: start; }
@media (max-width: 780px){ .ed-organismes{ grid-template-columns: 1fr; } }
/* ============================================================
Pages documentaires (maquette du 02/09) — bandeau, recherche,
familles de textes, panneau par exercice. Portée : .doc-*
Communes aux quatre pages de la veille réglementaire.
============================================================ */
.doc-hero{
background: linear-gradient(120deg, #E4EDFE 0%, #EEF4FF 58%, #F6F9FF 100%);
padding: 30px 0 44px; position: relative; overflow: hidden;
}
.doc-hero__int{ display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 40px; align-items: center; }
.doc-hero__surtitre{
margin: 16px 0 12px; font-family: var(--font-heading); font-size: .76rem; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase; color: var(--navy); position: relative; padding-top: 16px;
}
.doc-hero__surtitre::before{ content: ''; position: absolute; left: 0; top: 0; width: 30px; height: 3px; background: var(--fr-vert-clair); }
.doc-hero h1{
font-family: var(--font-heading); font-weight: 800; color: var(--navy);
font-size: clamp(1.8rem, 3.4vw, 2.7rem); line-height: 1.16; margin: 0 0 16px; max-width: none;
}
.doc-hero h1 span{ color: var(--fr-bleu-clair); }
.doc-hero__chapo{ color: #333A5C; font-size: 1rem; line-height: 1.7; margin: 0; max-width: 52ch; }
.doc-hero__visuel{ position: relative; height: 250px; }
.doc-hero__feuille{
position: absolute; background: #fff; border-radius: 16px;
box-shadow: 0 22px 46px rgba(30, 26, 107, .14); display: grid; align-content: start; gap: 9px;
}
.doc-hero__feuille--fond{ right: 0; top: 8px; width: 168px; height: 208px; padding: 34px 24px 0; transform: rotate(2deg); }
.doc-hero__feuille--avant{ right: 116px; top: 46px; width: 158px; height: 176px; padding: 46px 0 0 26px; transform: rotate(-3deg); color: var(--fr-bleu); }
.doc-hero__ligne{ height: 5px; border-radius: 3px; background: #DCE6F8; }
.doc-hero__ligne:nth-child(3){ width: 72%; }
.doc-hero__ligne:nth-child(5){ width: 58%; }
.doc-hero__marque{
position: absolute; top: 0; right: 26px; width: 17px; height: 30px; background: var(--fr-vert-clair);
clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 74%, 0 100%);
}
.doc-hero__feuille--avant .doc-hero__marque{ right: auto; left: 24px; }
/* --- Recherche et familles de textes -------------------------------- */
.doc-outils{ background: #fff; padding: 34px 0 8px; }
.doc-recherche{
position: relative; max-width: 540px; margin: 0 auto 26px;
display: flex; align-items: center; background: #fff;
border: 1px solid #D6E0F5; border-radius: 999px; padding: 0 20px; box-shadow: 0 8px 22px rgba(30, 26, 107, .06);
}
.doc-recherche svg{ width: 20px; height: 20px; color: #8A90B4; flex: 0 0 auto; }
.doc-recherche input{
flex: 1 1 auto; border: 0; background: transparent; padding: 14px 12px;
font-family: inherit; font-size: .95rem; color: var(--navy);
}
.doc-recherche input:focus{ outline: none; }
.doc-recherche:focus-within{ border-color: var(--fr-bleu-pale); }
.doc-recherche input::placeholder{ color: #8A90B4; }
.doc-familles{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.doc-famille{
appearance: none; cursor: pointer; width: 100%; height: 100%; text-align: center;
background: #fff; border: 1px solid #E4EAF6; border-radius: 14px; padding: 22px 16px 20px;
display: grid; justify-items: center; gap: 6px; position: relative;
box-shadow: 0 8px 22px rgba(30, 26, 107, .05);
transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.doc-famille:hover{ border-color: var(--fr-bleu-pale); transform: translateY(-2px); }
.doc-famille::after{
content: ''; position: absolute; left: 18%; right: 18%; bottom: -1px; height: 4px; border-radius: 3px;
background: var(--fr-indigo); opacity: 0; transition: opacity .2s ease;
}
.doc-famille.est-actif{ border-color: #CBD8F2; box-shadow: 0 14px 30px rgba(30, 26, 107, .10); }
.doc-famille.est-actif::after{ opacity: 1; }
.doc-famille__picto{ color: var(--fr-bleu); display: flex; }
.doc-famille__court{ font-family: var(--font-heading); font-weight: 800; color: var(--navy); font-size: 1.5rem; line-height: 1.2; }
.doc-famille__sous{ color: #5B628A; font-size: .84rem; line-height: 1.45; }
/* --- Rail d'accès rapide et panneau --------------------------------- */
.doc-corps{ background: var(--fr-degrade-gamme); padding: 40px 0 52px; }
.doc-corps__int{ display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 32px; align-items: start; }
.doc-rail{
background: #fff; border: 1px solid #E4EAF6; border-radius: 14px; padding: 22px 18px;
position: sticky; top: 108px;
}
.doc-rail__titre{
font-family: var(--font-heading); font-weight: 700; color: var(--navy);
font-size: .95rem; margin: 0 0 12px;
}
.doc-rail__titre--annee{ margin-top: 22px; padding-top: 18px; border-top: 1px solid #EEF2FA; }
.doc-rail ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.doc-acces{
appearance: none; cursor: pointer; width: 100%; text-align: left; background: transparent;
border: 0; border-left: 3px solid transparent; border-radius: 0 8px 8px 0; padding: 10px 12px;
display: flex; align-items: center; justify-content: space-between; gap: 10px;
font-family: var(--font-heading); font-weight: 600; font-size: .92rem; color: var(--navy);
transition: background-color .2s ease, border-color .2s ease;
}
.doc-acces:hover{ background: var(--fr-degrade-gamme); }
.doc-acces.est-actif{ background: #EEF3FE; border-left-color: var(--fr-indigo); }
.doc-acces__compte{ color: #8A90B4; font-size: .78rem; font-weight: 700; }
.doc-choix-annee select{
width: 100%; appearance: none; background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B628A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 16px 16px;
border: 1px solid #D6E0F5; border-radius: 10px; padding: 11px 34px 11px 14px;
font-family: inherit; font-size: .9rem; color: var(--navy); cursor: pointer;
}
.doc-choix-annee select:focus{ outline: 2px solid var(--fr-bleu-pale); outline-offset: 1px; }
.doc-rail__compte{ color: #8A90B4; font-size: .82rem; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid #EEF2FA; }
/* Une page qui aligne beaucoup de familles : la liste se déroule sur place
plutôt que d'étirer la colonne bien au-delà du panneau. */
.doc-rail__liste--longue{ max-height: 372px; overflow-y: auto; padding-right: 4px; }
.doc-rail__liste--longue::-webkit-scrollbar{ width: 6px; }
.doc-rail__liste--longue::-webkit-scrollbar-thumb{ background: #D6E0F5; border-radius: 3px; }
.doc-panneau{ background: #fff; border: 1px solid #E4EAF6; border-radius: 16px; padding: 30px 32px 26px; }
.doc-resultat{ color: var(--navy); font-family: var(--font-heading); font-weight: 700; margin: 0 0 18px; }
.doc-section h2{
font-family: var(--font-heading); font-weight: 800; color: var(--navy);
font-size: clamp(1.25rem, 2vw, 1.65rem); line-height: 1.25; margin: 0 0 6px;
}
.doc-section__sous{ color: #5B628A; font-size: .92rem; margin: 0 0 22px; }
.doc-section__intro{ color: #5B628A; font-size: .92rem; margin: 0 0 22px; }
.doc-section__intro p{ margin: 0 0 8px; }
.doc-section__intro a{ color: var(--fr-bleu); }
.doc-groupe{ border-top: 1px solid #EEF2FA; }
.doc-groupe:first-of-type{ border-top: 0; }
.doc-groupe > summary{
list-style: none; cursor: pointer; padding: 14px 30px 14px 0; position: relative;
display: flex; align-items: center; gap: 14px;
font-family: var(--font-heading); font-weight: 700; color: var(--fr-bleu); font-size: 1.05rem;
}
.doc-groupe > summary::-webkit-details-marker{ display: none; }
/* Le marqueur : un trait quand le groupe est ouvert, une croix quand il est
replié — les deux barres se superposent au lieu de se suivre. */
.doc-groupe > summary::after{
content: ''; position: absolute; right: 0; top: 50%; margin-top: -1px;
width: 14px; height: 2px; background: var(--fr-bleu);
}
.doc-groupe:not([open]) > summary::before{
content: ''; position: absolute; right: 6px; top: 50%; margin-top: -7px;
width: 2px; height: 14px; background: var(--fr-bleu);
}
.doc-groupe__compte{ margin-left: auto; color: #8A90B4; font-size: .8rem; font-weight: 600; }
.doc-entrees{ list-style: none; margin: 0 0 16px; padding: 0; border: 1px solid #E9EEF9; border-radius: 12px; }
.doc-entree{
display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 18px; align-items: center;
padding: 16px 20px; border-bottom: 1px solid #EEF2FA;
}
.doc-entree:last-child{ border-bottom: 0; }
.doc-entree__picto{
width: 54px; height: 54px; border-radius: 10px; border: 1px solid #E4EAF6; background: #F7FAFF;
display: flex; align-items: center; justify-content: center; color: var(--fr-bleu);
}
.doc-entree__texte h3{
font-family: var(--font-heading); font-weight: 600; color: var(--navy);
font-size: .98rem; line-height: 1.4; margin: 0;
}
.doc-entree__texte p{
color: #8A90B4; font-size: .84rem; line-height: 1.5; margin: 5px 0 0;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.doc-entree__liens{ list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; justify-items: end; }
.doc-entree__liens a{
display: inline-flex; align-items: center; gap: 7px; max-width: 240px;
font-family: var(--font-heading); font-weight: 700; font-size: .88rem; color: var(--fr-bleu);
text-decoration: none; text-align: right;
}
.doc-entree__liens a span{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-entree__liens a::after{ content: '→'; flex: 0 0 auto; transition: transform .2s ease; }
.doc-entree__liens a:hover{ color: var(--fr-indigo); }
.doc-entree__liens a:hover::after{ transform: translateX(3px); }
.doc-vide{ color: #5B628A; margin: 10px 0 0; }
/* --- Contexte, autres références, renvoi logiciel -------------------- */
.doc-contexte{ background: #fff; padding: 46px 0 10px; }
.doc-contexte .container{ display: grid; gap: 20px; }
.doc-contexte__bloc{
background: var(--fr-degrade-gamme); border: 1px solid #E4EAF6; border-radius: 16px;
padding: 26px 32px; margin: 0;
}
.doc-contexte__bloc > *{ max-width: 82ch; }
.doc-contexte__bloc h2{
font-family: var(--font-heading); font-weight: 700; color: var(--navy);
font-size: clamp(1.2rem, 1.9vw, 1.55rem); margin: 0 0 14px; position: relative; padding-bottom: 14px;
}
.doc-contexte__bloc h2::after{ content: ''; position: absolute; left: 0; bottom: 0; width: 30px; height: 3px; background: var(--fr-vert-clair); }
.doc-contexte__texte{ color: #333A5C; line-height: 1.75; font-size: .96rem; }
.doc-contexte__texte p{ margin: 0 0 12px; }
.doc-contexte__texte a{ color: var(--fr-bleu); }
.doc-autres{ background: #fff; padding: 46px 0 34px; }
.doc-autres h2{
font-family: var(--font-heading); font-weight: 800; color: var(--navy);
font-size: clamp(1.3rem, 2.1vw, 1.75rem); margin: 0 0 22px; position: relative; padding-bottom: 16px;
}
.doc-autres h2::after{ content: ''; position: absolute; left: 0; bottom: 0; width: 32px; height: 3px; background: var(--fr-vert-clair); }
.doc-autres__liste{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.doc-autre{
appearance: none; cursor: pointer; width: 100%; text-align: left;
background: #fff; border: 1px solid #E4EAF6; border-radius: 14px; padding: 20px 22px;
display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; align-items: center;
transition: border-color .2s ease, transform .2s ease;
}
.doc-autre:hover{ border-color: var(--fr-bleu-pale); transform: translateY(-2px); }
.doc-autre__picto{ color: var(--fr-bleu); display: flex; }
.doc-autre__titre{ display: block; font-family: var(--font-heading); font-weight: 700; color: var(--navy); font-size: .95rem; line-height: 1.35; }
.doc-autre__lien{ display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-family: var(--font-heading); font-weight: 700; font-size: .85rem; color: var(--fr-bleu); }
.doc-autre__lien::after{ content: '→'; }
.doc-logiciel{ background: #fff; padding: 20px 0 40px; }
.doc-logiciel__carte{
background: #2A2586; border-radius: 18px; padding: 32px 40px;
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 40px; color: #fff;
position: relative;
}
.doc-logiciel__carte::before{ content: ''; position: absolute; left: 40px; top: 22px; width: 34px; height: 3px; background: var(--fr-turquoise); }
.doc-logiciel__carte h2{ font-family: var(--font-heading); font-weight: 700; color: #fff; font-size: clamp(1.2rem, 2vw, 1.6rem); margin: 12px 0 8px; }
.doc-logiciel__carte p{ color: #D9DCF3; margin: 0; font-size: .95rem; max-width: 44ch; }
.doc-logiciel__actions{ display: flex; flex-wrap: wrap; gap: 14px; }
.doc-btn-vert{ background: var(--fr-turquoise); border: 2px solid var(--fr-turquoise); color: #0C2A34; }
.doc-btn-vert:hover{ background: #0FB8A6; border-color: #0FB8A6; color: #06232C; }
@media (max-width: 1080px){
.doc-hero__int{ grid-template-columns: 1fr; }
.doc-hero__visuel{ display: none; }
.doc-corps__int{ grid-template-columns: 208px minmax(0, 1fr); gap: 22px; }
.doc-familles{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.doc-autres__liste{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px){
.doc-corps__int{ grid-template-columns: 1fr; }
.doc-rail{ position: static; }
.doc-panneau{ padding: 22px 18px 18px; }
.doc-entree{ grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 14px 14px; }
.doc-entree__picto{ width: 44px; height: 44px; }
.doc-entree__picto svg{ width: 24px; height: 24px; }
.doc-entree__liens{ grid-column: 1 / -1; justify-items: start; }
.doc-entree__liens a{ max-width: 100%; text-align: left; }
.doc-autres__liste{ grid-template-columns: 1fr; }
.doc-logiciel__carte{ padding: 26px 24px; }
.doc-logiciel__carte::before{ left: 24px; }
}
@media (max-width: 520px){
.doc-familles{ grid-template-columns: 1fr; }
.doc-logiciel__actions .fr-btn{ width: 100%; justify-content: center; }
}
/* ============================================================
Nos logiciels — composition de la maquette du 02/09
Portée : .nl-*
============================================================ */
.nl-hero{
background: linear-gradient(160deg, #FFFFFF 0%, #F1F6FF 44%, #E4EDFE 100%);
padding: 40px 0 54px; position: relative; overflow: hidden;
}
.nl-hero__int{ min-height: 400px; display: flex; align-items: center; }
.nl-hero__texte{ position: relative; z-index: 3; width: min(100%, 620px); }
.nl-hero__surtitre{
margin: 16px 0 14px; font-family: var(--font-heading); font-size: .76rem; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase; color: var(--fr-vert);
display: flex; align-items: center; gap: 12px;
}
.nl-hero__surtitre::after{ content: ''; width: 26px; height: 2px; background: var(--fr-vert-clair); }
.nl-hero h1{
font-family: var(--font-heading); font-weight: 800; color: var(--navy);
line-height: 1.22; margin: 0 0 18px; text-wrap: balance;
}
.nl-hero h1 span{ color: var(--fr-bleu-pale); display: block; }
.nl-hero__chapo{ color: var(--dh-text, #3A4060); font-size: 1rem; line-height: 1.7; margin: 0 0 26px; max-width: 42ch; }
.nl-hero__actions{ display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.nl-hero__visuel{ position: absolute; inset: 0 0 0 auto; width: 52%; z-index: 1; overflow: hidden; }
.nl-hero__visuel > img:first-child{
display: block; width: 100%; height: 100%; object-fit: cover; object-position: 56% 42%;
-webkit-mask-image:
linear-gradient(90deg, transparent 0%, rgba(0,0,0,.18) 20%, rgba(0,0,0,.62) 42%, #000 68%),
linear-gradient(180deg, #000 0%, #000 58%, rgba(0,0,0,.6) 84%, transparent 100%);
mask-image:
linear-gradient(90deg, transparent 0%, rgba(0,0,0,.18) 20%, rgba(0,0,0,.62) 42%, #000 68%),
linear-gradient(180deg, #000 0%, #000 58%, rgba(0,0,0,.6) 84%, transparent 100%);
-webkit-mask-composite: source-in; mask-composite: intersect;
}
.nl-hero__voile{
position: absolute; inset: 0; pointer-events: none;
background:
linear-gradient(180deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 26%, rgba(228,237,254,0) 66%, rgba(228,237,254,.55) 100%),
linear-gradient(90deg, rgba(42,37,134,0) 34%, rgba(42,37,134,.05) 56%, rgba(42,37,134,.09) 100%);
}
.nl-hero__vague{
position: absolute; right: -8%; bottom: -10%; width: 54%; height: auto; z-index: 2;
pointer-events: none; opacity: .45;
}
.nl-promesses{ background: #2A2586; padding: 32px 0; }
.nl-promesses__liste{
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 40px;
}
.nl-promesse{ display: grid; grid-template-columns: 75px minmax(0, 1fr); gap: 20px; align-items: center; }
.nl-promesse__picto{
width: 75px; height: 75px; border-radius: 15px; padding: 15px; background: #fff; color: var(--fr-bleu);
display: flex; align-items: center; justify-content: center; box-shadow: -6px 6px 0 0 var(--fr-bleu-pale);
}
.nl-promesse__picto svg{ width: 100%; height: 100%; }
.nl-promesse h2{ font-family: var(--font-heading); font-weight: 700; color: #fff; font-size: 1.12rem; margin: 0 0 5px; }
.nl-promesse p{ color: #D9DCF3; line-height: 1.55; margin: 0; font-size: .92rem; max-width: 26ch; }
.nl-choix{ background: #fff; padding: 72px 0 76px; }
.nl-choix__tete{ text-align: center; margin: 0 auto 34px; max-width: 720px; }
.nl-choix__surtitre{
margin: 0 0 12px; font-family: var(--font-heading); font-size: .76rem; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase; color: var(--fr-vert);
}
.nl-choix__tete h2{
font-family: var(--font-heading); font-weight: 700; color: var(--navy);
font-size: clamp(1.7rem, 2.6vw, 2.25rem); line-height: 1.26; margin: 0;
}
.nl-cartes{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.nl-carte{
background: #fff; border: 1px solid #E4EAF6; border-radius: 16px; padding: 26px 28px 28px;
display: flex; flex-direction: column; gap: 16px; box-shadow: 0 10px 28px rgba(30, 26, 107, .07);
}
.nl-carte__tete{ display: grid; grid-template-columns: 75px minmax(0, 1fr); gap: 20px; align-items: center; }
.nl-carte__picto{
width: 75px; height: 75px; border-radius: 15px; padding: 15px; background: #fff; color: var(--fr-bleu);
display: flex; align-items: center; justify-content: center; box-shadow: -6px 6px 0 0 var(--fr-bleu-pale);
}
.nl-carte__picto svg{ width: 100%; height: 100%; }
.nl-carte__surtitre{
display: block; margin: 0 0 4px; font-family: var(--font-heading); font-size: .74rem; font-weight: 700;
letter-spacing: .1em; text-transform: uppercase; color: var(--fr-vert);
}
.nl-carte h3{ font-family: var(--font-heading); font-weight: 700; color: var(--navy); font-size: 1.45rem; margin: 0; }
.nl-carte__phrase{ color: var(--dh-muted, #4A4E66); line-height: 1.6; margin: 0; font-size: .96rem; }
.nl-carte__points{ list-style: none; margin: 0; padding: 0; display: grid; }
.nl-carte__points li{
display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: center;
padding: 11px 0; border-bottom: 1px solid #EEF2FA; color: #4A4E66; font-size: .94rem;
}
.nl-carte__points li:last-child{ border-bottom: 0; }
.nl-carte__points svg{ width: 18px; height: 18px; color: var(--fr-vert); }
.nl-carte .fr-btn{ align-self: stretch; text-align: center; margin-top: auto; }
.nl-choix__note{ text-align: center; color: #5B628A; font-size: .93rem; margin: 26px 0 0; }
.nl-integration{ background: var(--fr-degrade-gamme); padding: 66px 0 60px; }
.nl-integration__haut{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.nl-integration h2{
font-family: var(--font-heading); font-weight: 700; color: var(--navy);
font-size: clamp(1.5rem, 2.3vw, 2rem); line-height: 1.26; margin: 0; text-wrap: balance; position: relative; padding-bottom: 18px;
}
.nl-integration h2::after{ content: ''; position: absolute; left: 0; bottom: 0; width: 34px; height: 3px; background: var(--fr-vert-clair); }
.nl-integration__droite p{ color: var(--dh-text, #3A4060); line-height: 1.7; margin: 0 0 12px; font-size: .96rem; }
.nl-hebergements{
list-style: none; margin: 44px 0 0; padding: 0;
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
}
.nl-hebergements li{ display: grid; justify-items: center; gap: 14px; padding: 6px 20px; }
.nl-hebergements li + li{ border-left: 1px solid #D6E0F5; }
.nl-hebergement__picto{ width: 56px; height: 56px; color: var(--fr-bleu); display: flex; align-items: center; justify-content: center; }
.nl-hebergement__picto svg{ width: 100%; height: 100%; }
.nl-hebergement__nom{ font-family: var(--font-heading); font-weight: 700; color: var(--navy); font-size: 1rem; }
.nl-integration__lien{ text-align: center; margin: 26px 0 0; }
.nl-equipe{ background: #2A2586; color: #fff; padding: 62px 0; }
.nl-equipe__int{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 52px; align-items: center; }
.nl-equipe h2{
font-family: var(--font-heading); font-weight: 700; color: #fff;
font-size: clamp(1.5rem, 2.3vw, 2rem); line-height: 1.24; margin: 0 0 14px;
}
.nl-equipe h2 span{ color: var(--fr-turquoise); }
.nl-equipe__gauche p{ color: #D9DCF3; line-height: 1.7; margin: 0 0 22px; font-size: .96rem; max-width: 42ch; }
.nl-etapes{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.nl-etapes li{ display: grid; justify-items: center; gap: 14px; text-align: center; }
.nl-etape__picto{
width: 75px; height: 75px; border-radius: 15px; padding: 15px; background: #fff; color: var(--fr-bleu);
display: flex; align-items: center; justify-content: center; box-shadow: -6px 6px 0 0 var(--fr-bleu-pale);
}
.nl-etape__picto svg{ width: 100%; height: 100%; }
.nl-etape__nom{ font-family: var(--font-heading); font-weight: 700; color: #fff; font-size: 1rem; line-height: 1.35; }
.nl-preuve{ background: #fff; padding: 62px 0; }
.nl-citation{ margin: 0 auto; max-width: 780px; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 8px 20px; }
.nl-citation__guillemets{
font-family: Georgia, 'Times New Roman', serif; font-size: 5rem; line-height: .8; color: var(--fr-vert-clair);
grid-row: 1 / span 2;
}
.nl-citation blockquote{ margin: 0; padding: 0; border: 0; }
.nl-citation blockquote p{
font-style: italic; color: var(--navy); font-size: 1.16rem; line-height: 1.6; margin: 0;
font-family: var(--font-heading); font-weight: 600;
}
.nl-citation figcaption{ display: grid; gap: 3px; padding-top: 14px; }
.nl-citation__nom{ font-family: var(--font-heading); font-weight: 700; color: var(--navy); font-size: .96rem; }
.nl-citation__role{ color: #5B628A; font-size: .9rem; }
.nl-citation figcaption .sa-service__lien{ margin-top: 8px; }
@media (max-width: 980px){
.nl-hero__int{ display: block; min-height: 0; }
.nl-hero__texte{ width: 100%; }
.nl-hero__visuel{ position: static; width: 100%; height: 230px; border-radius: 18px; margin-top: 24px; }
.nl-hero__visuel > img:first-child{ -webkit-mask-image: none; mask-image: none; border-radius: 18px; }
.nl-hero__vague{ display: none; }
.nl-promesses__liste{ grid-template-columns: 1fr; }
.nl-cartes{ grid-template-columns: 1fr; }
.nl-integration__haut,
.nl-equipe__int{ grid-template-columns: 1fr; gap: 28px; }
.nl-hebergements{ grid-template-columns: 1fr; gap: 22px; }
.nl-hebergements li + li{ border-left: 0; border-top: 1px solid #D6E0F5; padding-top: 22px; }
}
@media (max-width: 620px){
.nl-hero{ padding: 32px 0 40px; }
.nl-carte{ padding: 22px 22px 24px; }
.nl-etapes{ grid-template-columns: 1fr; }
.nl-citation{ grid-template-columns: 1fr; }
.nl-citation__guillemets{ grid-row: auto; font-size: 3.4rem; }
}
/* ============================================================
Services associés — composition de la maquette du 02/09
Portée : .sa-*
============================================================ */
.sa-hero{
background: linear-gradient(160deg, #FFFFFF 0%, #F1F6FF 44%, #E4EDFE 100%);
padding: 40px 0 52px; position: relative; overflow: hidden;
}
.sa-hero__int{ min-height: 400px; display: flex; align-items: center; }
.sa-hero__texte{ position: relative; z-index: 3; width: min(100%, 600px); }
.sa-hero__surtitre{
margin: 16px 0 14px; font-family: var(--font-heading); font-size: .76rem; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase; color: var(--fr-vert); position: relative; padding-bottom: 12px;
}
.sa-hero__surtitre::after{ content: ''; position: absolute; left: 0; bottom: 0; width: 34px; height: 3px; background: var(--fr-vert-clair); }
.sa-hero h1{
font-family: var(--font-heading); font-weight: 800; color: var(--navy);
line-height: 1.22; margin: 0 0 18px; text-wrap: balance;
}
.sa-hero h1 span{ color: var(--fr-bleu-pale); display: block; }
.sa-hero__chapo{ color: var(--dh-text, #3A4060); font-size: 1rem; line-height: 1.7; margin: 0 0 26px; max-width: 40ch; }
.sa-hero__actions{ display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.sa-hero__visuel{ position: absolute; inset: 0 0 0 auto; width: 52%; z-index: 1; overflow: hidden; }
.sa-hero__visuel > img:first-child{
display: block; width: 100%; height: 100%; object-fit: cover; object-position: 56% 42%;
-webkit-mask-image:
linear-gradient(90deg, transparent 0%, rgba(0,0,0,.18) 20%, rgba(0,0,0,.62) 42%, #000 68%),
linear-gradient(180deg, #000 0%, #000 58%, rgba(0,0,0,.6) 84%, transparent 100%);
mask-image:
linear-gradient(90deg, transparent 0%, rgba(0,0,0,.18) 20%, rgba(0,0,0,.62) 42%, #000 68%),
linear-gradient(180deg, #000 0%, #000 58%, rgba(0,0,0,.6) 84%, transparent 100%);
-webkit-mask-composite: source-in; mask-composite: intersect;
}
.sa-hero__voile{
position: absolute; inset: 0; pointer-events: none;
background:
linear-gradient(180deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 26%, rgba(228,237,254,0) 66%, rgba(228,237,254,.55) 100%),
linear-gradient(90deg, rgba(42,37,134,0) 34%, rgba(42,37,134,.05) 56%, rgba(42,37,134,.09) 100%);
}
.sa-hero__vague{ position: absolute; right: -8%; bottom: -10%; width: 54%; height: auto; z-index: 2; pointer-events: none; opacity: .45; }
.sa-qualites{ background: #2A2586; padding: 32px 0; }
.sa-qualites__liste{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 40px; }
.sa-qualite{ display: grid; grid-template-columns: 75px minmax(0, 1fr); gap: 20px; align-items: center; }
.sa-qualite__picto{
width: 75px; height: 75px; border-radius: 15px; padding: 15px; background: #fff; color: var(--fr-bleu);
display: flex; align-items: center; justify-content: center; box-shadow: -6px 6px 0 0 var(--fr-bleu-pale);
}
.sa-qualite__picto svg{ width: 100%; height: 100%; }
.sa-qualite h2{ font-family: var(--font-heading); font-weight: 700; color: var(--fr-turquoise); font-size: 1.12rem; margin: 0 0 5px; }
.sa-qualite p{ color: #D9DCF3; line-height: 1.55; margin: 0; font-size: .92rem; max-width: 24ch; }
.sa-services{ background: #fff; padding: 66px 0 72px; }
.sa-services__tete{ margin: 0 0 30px; max-width: 720px; }
.sa-services__surtitre{
margin: 0 0 12px; font-family: var(--font-heading); font-size: .76rem; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase; color: var(--fr-vert); position: relative; padding-bottom: 12px;
}
.sa-services__surtitre::after{ content: ''; position: absolute; left: 0; bottom: 0; width: 34px; height: 3px; background: var(--fr-vert-clair); }
.sa-services__tete h2{
font-family: var(--font-heading); font-weight: 700; color: var(--navy);
font-size: clamp(1.7rem, 2.6vw, 2.25rem); line-height: 1.26; margin: 0 0 10px;
}
.sa-services__tete p{ color: var(--dh-muted, #4A4E66); margin: 0; font-size: .98rem; }
/* Deux cartes depuis le retrait des webinaires. Elles gardent la même
hauteur, et le contenu de la plus courte se centre : ni trou en bas de
carte, ni colonne de droite qui s'arrête à mi-hauteur. */
.sa-services__grille{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
.sa-services__grille > .sa-service:not(.sa-service--large){ align-content: center; }
.sa-service{
background: #fff; border: 1px solid #E4EAF6; border-radius: 16px; padding: 26px 28px;
box-shadow: 0 10px 28px rgba(30, 26, 107, .07);
}
/* Deux cartes depuis le retrait des webinaires : plus de rangée double. */
.sa-service--large{ display: flex; flex-direction: column; gap: 14px; height: 100%; }
.sa-services__grille > .sa-service:not(.sa-service--large){ display: grid; grid-template-columns: 75px minmax(0, 1fr); gap: 20px; align-items: start; }
.sa-service__picto{
width: 75px; height: 75px; border-radius: 15px; padding: 15px; background: #fff; color: var(--fr-bleu);
display: flex; align-items: center; justify-content: center; box-shadow: -6px 6px 0 0 var(--fr-bleu-pale); flex: none;
}
.sa-service__picto svg{ width: 100%; height: 100%; }
.sa-service h3{ font-family: var(--font-heading); font-weight: 700; color: var(--navy); font-size: 1.22rem; margin: 0 0 8px; }
.sa-service--large h3{ margin-top: 6px; }
.sa-service p{ color: var(--dh-muted, #4A4E66); line-height: 1.6; margin: 0 0 10px; font-size: .95rem; }
.sa-service__points{ list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
.sa-service__points li{ display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: center; color: #4A4E66; font-size: .94rem; }
.sa-service__points svg{ width: 18px; height: 18px; color: var(--fr-vert); }
.sa-service--large .fr-btn{ align-self: flex-start; margin-top: auto; }
.sa-service__tags{ display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 12px !important; }
.sa-service__tags span{ color: var(--fr-bleu); font-family: var(--font-heading); font-weight: 600; font-size: .88rem; }
.sa-service__tags span + span::before{ content: '· '; color: #A8B2CE; }
.sa-service__lien{
font-family: var(--font-heading); font-weight: 600; font-size: .9rem; color: var(--fr-bleu);
text-decoration: none; border-bottom: 2px solid transparent; transition: border-color .2s ease;
}
.sa-service__lien::after{ content: ' →'; }
.sa-service__lien:hover, .sa-service__lien:focus-visible{ border-bottom-color: var(--fr-bleu); }
.sa-parcours{ background: var(--fr-degrade-gamme); padding: 62px 0; }
.sa-parcours h2{
font-family: var(--font-heading); font-weight: 700; color: var(--navy);
font-size: clamp(1.5rem, 2.3vw, 2rem); margin: 0 0 34px;
}
.sa-frise{
list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px; position: relative;
}
.sa-frise::before{
content: ''; position: absolute; left: 12%; right: 12%; top: 22px; height: 1px; background: rgba(42, 37, 134, .18);
}
.sa-etape{ display: grid; justify-items: center; text-align: center; gap: 8px; position: relative; }
.sa-etape__num{
width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 2px solid var(--fr-vert-clair);
display: flex; align-items: center; justify-content: center; position: relative; z-index: 2;
font-family: var(--font-heading); font-weight: 700; color: var(--navy); font-size: .92rem;
}
.sa-etape__nom{ font-family: var(--font-heading); font-weight: 700; color: var(--navy); font-size: 1rem; margin-top: 6px; }
.sa-etape__texte{ color: #5B628A; font-size: .88rem; line-height: 1.5; max-width: 22ch; }
/* La démarche Qualité Projet compte six étapes, pas quatre. */
.ac-frise{ grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
.ac-frise .sa-etape__nom{ font-size: .93rem; }
.ac-parcours{ background: #fff; padding: 56px 0 60px; }
.ac-parcours__tete{ text-align: center; margin-bottom: 38px; }
.ac-parcours__tete h2{
font-family: var(--font-heading); font-weight: 800; color: var(--navy);
font-size: clamp(1.35rem, 2.2vw, 1.85rem); line-height: 1.2; margin: 8px 0 0;
}
@media (max-width: 1000px){ .ac-frise{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px){ .ac-frise{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sa-parcours__note{ text-align: center; color: #4A4E66; margin: 30px 0 0; font-size: .95rem; }
.sa-veille{ background: #2A2586; color: #fff; padding: 62px 0; }
.sa-veille__int{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 52px; align-items: center; }
.sa-veille h2{
font-family: var(--font-heading); font-weight: 700; color: #fff;
font-size: clamp(1.5rem, 2.3vw, 2rem); line-height: 1.24; margin: 0 0 16px;
}
.sa-veille h2 span{ color: var(--fr-turquoise); }
.sa-veille__gauche p{ color: #D9DCF3; line-height: 1.7; margin: 0 0 24px; font-size: .96rem; max-width: 40ch; }
.sa-reperes{ list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.sa-repere{ display: grid; grid-template-columns: 75px minmax(0, 1fr); gap: 20px; align-items: center; }
.sa-repere__picto{
width: 75px; height: 75px; border-radius: 15px; padding: 15px; background: #fff; color: var(--fr-bleu);
display: flex; align-items: center; justify-content: center; box-shadow: -6px 6px 0 0 var(--fr-bleu-pale);
}
.sa-repere__picto svg{ width: 100%; height: 100%; }
.sa-repere h3{ font-family: var(--font-heading); font-weight: 700; color: var(--fr-turquoise); font-size: 1.05rem; margin: 0 0 5px; }
.sa-repere p{ color: #D9DCF3; line-height: 1.55; margin: 0; font-size: .92rem; }
.sa-logiciels{ background: #fff; padding: 56px 0 40px; text-align: center; }
.sa-logiciels__tete h2{
font-family: var(--font-heading); font-weight: 700; color: var(--navy);
font-size: clamp(1.4rem, 2.1vw, 1.8rem); margin: 0 0 10px;
}
.sa-logiciels__tete p{ color: var(--dh-muted, #4A4E66); margin: 0 0 22px; font-size: .95rem; }
.sa-logiciels__liens{ list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 16px 48px; }
.sa-logiciels__liens li + li{ border-left: 1px solid #E1E9F8; padding-left: 48px; }
.sa-logiciels__liens a{
display: inline-flex; align-items: center; gap: 12px; text-decoration: none;
font-family: var(--font-heading); font-weight: 700; color: var(--navy); font-size: 1.05rem;
}
.sa-logiciels__fleche{
width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--fr-bleu); color: var(--fr-bleu);
display: inline-flex; align-items: center; justify-content: center; font-size: .9rem;
transition: background-color .2s ease, color .2s ease;
}
.sa-logiciels__liens a:hover .sa-logiciels__fleche{ background: var(--fr-bleu); color: #fff; }
@media (max-width: 980px){
.sa-hero__int{ display: block; min-height: 0; }
.sa-hero__texte{ width: 100%; }
.sa-hero__visuel{ position: static; width: 100%; height: 230px; border-radius: 18px; margin-top: 24px; }
.sa-hero__visuel > img:first-child{ -webkit-mask-image: none; mask-image: none; border-radius: 18px; }
.sa-hero__vague{ display: none; }
.sa-qualites__liste{ grid-template-columns: 1fr; }
.sa-services__grille{ grid-template-columns: 1fr; }
.sa-service--large{ grid-row: auto; }
.sa-frise{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sa-frise::before{ display: none; }
.sa-veille__int{ grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 620px){
.sa-hero{ padding: 32px 0 40px; }
.sa-frise{ grid-template-columns: 1fr; }
.sa-logiciels__liens li + li{ border-left: 0; padding-left: 0; }
}
/* ============================================================
Animations d'entrée — décalage progressif dans une rangée.
Sans JavaScript ou avec animations réduites, tout reste visible.
============================================================ */
.anime{
opacity: 0;
transform: translateY(16px);
transition: opacity .55s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1);
transition-delay: var(--dirips-delai, 0ms);
will-change: opacity, transform;
}
.anime.est-vu{ opacity: 1; transform: none; }
/* Les pictogrammes en tuile prennent vie au survol de leur bloc. */
.nl-promesse__picto, .nl-carte__picto, .nl-etape__picto,
.sa-qualite__picto, .sa-service__picto, .sa-repere__picto,
.rec-valeur__picto, .ent-valeur__picto, .lg-promesse__picto{
transition: transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s ease;
}
.nl-promesse:hover .nl-promesse__picto,
.nl-carte:hover .nl-carte__picto,
.nl-etapes li:hover .nl-etape__picto,
.sa-qualite:hover .sa-qualite__picto,
.sa-service:hover .sa-service__picto,
.sa-repere:hover .sa-repere__picto,
.rec-valeur:hover .rec-valeur__picto,
.lg-promesse:hover .lg-promesse__picto{
transform: translate(2px, -2px);
box-shadow: -8px 8px 0 0 var(--fr-bleu-pale);
}
/* Les pastilles de la frise se remplissent à l'arrivée. */
.sa-etape.est-vu .sa-etape__num{ animation: sa-pastille .5s cubic-bezier(.34,1.56,.64,1) var(--dirips-delai, 0ms) both; }
@keyframes sa-pastille{
0%{ transform: scale(.6); opacity: 0; }
100%{ transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce){
.anime, .anime.est-vu{ opacity: 1; transform: none; transition: none; }
.sa-etape.est-vu .sa-etape__num{ animation: none; }
.nl-promesse__picto, .nl-carte__picto, .nl-etape__picto,
.sa-qualite__picto, .sa-service__picto, .sa-repere__picto,
.rec-valeur__picto, .ent-valeur__picto, .lg-promesse__picto{ transition: none; }
}
/* ============================================================
Accompagnement — composition de la maquette du 02/09
Portée : .ac-* (la bannière commune reste plus haut)
============================================================ */
.ac-hero__surtitre{
display: flex; align-items: center; gap: 12px;
color: var(--fr-vert) !important;
}
.ac-hero__surtitre::before{ content: ''; width: 30px; height: 3px; background: var(--fr-vert-clair); flex: none; }
.ac-hero h1 span{ color: var(--fr-bleu-pale); display: block; }
.ac-hero__texte{ width: min(100%, 600px); }
.ac-hero__visuel{ width: 54%; }
.ac-reperes{ background: #2A2586; padding: 32px 0; }
.ac-reperes__liste{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 40px; }
.ac-repere{ display: grid; grid-template-columns: 75px minmax(0, 1fr); gap: 20px; align-items: center; }
.ac-repere__picto{
width: 75px; height: 75px; border-radius: 15px; padding: 15px; background: #fff; color: var(--fr-bleu);
display: flex; align-items: center; justify-content: center; box-shadow: -6px 6px 0 0 var(--fr-bleu-pale);
}
.ac-repere__picto svg{ width: 100%; height: 100%; }
.ac-repere h2{ font-family: var(--font-heading); font-weight: 700; color: #fff; font-size: 1.08rem; margin: 0 0 5px; }
.ac-repere p{ color: #D9DCF3; line-height: 1.5; margin: 0 0 8px; font-size: .9rem; }
.ac-repere div::after{ content: ''; display: block; width: 30px; height: 3px; background: var(--fr-turquoise); }
.ac-parcours{ background: #fff; padding: 66px 0 72px; }
.ac-parcours__tete{ text-align: center; margin: 0 auto 34px; }
.ac-parcours__tete h2{
font-family: var(--font-heading); font-weight: 700; color: var(--navy);
font-size: clamp(1.7rem, 2.6vw, 2.25rem); margin: 0 0 16px; position: relative; padding-bottom: 16px;
}
.ac-parcours__tete h2::after{
content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
width: 34px; height: 3px; background: var(--fr-vert-clair);
}
.ac-etapes{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ac-etape{
background: #fff; border: 1px solid #E4EAF6; border-radius: 16px; padding: 24px 26px;
display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start;
box-shadow: 0 10px 28px rgba(30, 26, 107, .07);
}
.ac-etape__num{
font-family: var(--font-heading); font-weight: 700; font-size: 1.6rem; color: var(--fr-vert-clair); line-height: 1.1;
}
.ac-etape h3{ font-family: var(--font-heading); font-weight: 700; color: var(--navy); font-size: 1.05rem; margin: 4px 0 8px; }
.ac-etape p{ color: var(--dh-muted, #4A4E66); line-height: 1.6; margin: 0; font-size: .92rem; }
.ac-formation{ background: var(--fr-degrade-gamme); padding: 62px 0; }
.ac-formation__int{ display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: 46px; align-items: center; }
.ac-formation h2{
font-family: var(--font-heading); font-weight: 700; color: var(--navy);
font-size: clamp(1.5rem, 2.3vw, 2rem); line-height: 1.24; margin: 0 0 16px; position: relative; padding-bottom: 16px;
}
.ac-formation h2::after{ content: ''; position: absolute; left: 0; bottom: 0; width: 34px; height: 3px; background: var(--fr-vert-clair); }
.ac-formation__gauche p{ color: var(--dh-text, #3A4060); line-height: 1.72; margin: 0; font-size: .95rem; }
.ac-certificats{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
/* ⛔ Première version : deux cartes portant un titre et un lien, séparés par
un space-between sur 168 px de haut — donc un grand vide au milieu. Chaque
carte dit maintenant ce qu'elle atteste, et la troisième du .com est là. */
.ac-certificat{
background: #fff; border: 1px solid #E4EAF6; border-radius: 16px; padding: 22px 20px;
display: flex; flex-direction: column; gap: 14px;
box-shadow: 0 10px 28px rgba(30, 26, 107, .07);
}
.ac-certificat > div{ display: grid; gap: 8px; }
.ac-certificat__picto{
width: 46px; height: 46px; border-radius: 12px; background: var(--fr-degrade-gamme);
display: grid; place-items: center; color: var(--fr-bleu); flex: none;
}
.ac-certificat__picto svg{ width: 22px; height: 22px; }
.ac-certificat h3{ font-family: var(--font-heading); font-weight: 700; color: var(--navy); font-size: 1.02rem; margin: 0; line-height: 1.35; }
.ac-certificat p{ color: #5B628A; font-size: .89rem; line-height: 1.55; margin: 0; }
.ac-formation__declaration{ color: #5B628A !important; font-size: .88rem !important; margin-top: 12px !important; }
.ac-certificat a{
font-family: var(--font-heading); font-weight: 600; font-size: .86rem; color: var(--fr-bleu); text-decoration: none;
border-bottom: 2px solid transparent; transition: border-color .2s ease; align-self: flex-start;
}
.ac-certificat a::after{ content: ' →'; }
.ac-certificat a:hover{ border-bottom-color: var(--fr-bleu); }
.ac-reponses{ background: #2A2586; color: #fff; padding: 62px 0; }
.ac-reponses h2{
font-family: var(--font-heading); font-weight: 700; color: #fff; text-align: center;
font-size: clamp(1.5rem, 2.3vw, 2rem); margin: 0 auto 34px; position: relative; padding-bottom: 16px;
}
.ac-reponses h2::after{
content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
width: 34px; height: 3px; background: var(--fr-turquoise);
}
.ac-reponses__chapo{ color: #D9DEF6; font-size: .98rem; line-height: 1.7; margin: 0 auto 30px; max-width: 74ch; text-align: center; }
.ac-assistance{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.ac-canal{ display: grid; grid-template-columns: 75px minmax(0, 1fr); gap: 20px; align-items: start; padding-right: 26px; }
.ac-assistance li + li{ border-left: 1px solid rgba(255, 255, 255, .16); padding-left: 26px; }
.ac-canal__picto{
width: 75px; height: 75px; border-radius: 15px; padding: 15px; background: #fff; color: var(--fr-bleu);
display: flex; align-items: center; justify-content: center; box-shadow: -6px 6px 0 0 var(--fr-bleu-pale);
}
.ac-canal__picto svg{ width: 100%; height: 100%; }
.ac-canal h3{ font-family: var(--font-heading); font-weight: 700; color: #fff; font-size: 1.05rem; margin: 4px 0 6px; }
.ac-canal p{ color: #D9DCF3; line-height: 1.5; margin: 0 0 8px; font-size: .9rem; }
.ac-canal div::after{ content: ''; display: block; width: 30px; height: 3px; background: var(--fr-turquoise); }
.ac-reponses__bas{
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 40px; margin-top: 38px;
}
.ac-reponses__bas p{ color: #D9DCF3; line-height: 1.6; margin: 0; font-size: .93rem; max-width: 46ch; }
.ac-reponses__lien{
font-family: var(--font-heading); font-weight: 600; font-size: .92rem; color: #fff; text-decoration: none;
border-bottom: 2px solid var(--fr-turquoise); padding-bottom: 4px;
}
.ac-reponses__lien::after{ content: ' →'; }
.ac-reponses__lien:hover{ color: var(--fr-turquoise); }
.ac-citation{ background: #fff; padding: 56px 0; text-align: center; }
.ac-citation figure{ margin: 0 auto; max-width: 760px; }
.ac-citation blockquote{ margin: 0; padding: 0; border: 0; position: relative; }
.ac-citation blockquote::before,
.ac-citation blockquote::after{
font-family: Georgia, 'Times New Roman', serif; font-size: 3rem; line-height: 1; color: var(--fr-vert-clair);
position: absolute;
}
.ac-citation blockquote::before{ content: '“'; left: -34px; top: -6px; }
.ac-citation blockquote::after{ content: '”'; right: -34px; bottom: -26px; }
.ac-citation blockquote p{
font-family: var(--font-heading); font-weight: 600; font-style: italic; color: var(--fr-vert);
font-size: clamp(1.15rem, 1.9vw, 1.5rem); line-height: 1.45; margin: 0;
}
.ac-citation figcaption{
display: grid; justify-items: center; gap: 8px; margin-top: 22px; padding-top: 20px; position: relative;
color: #5B628A; font-size: .93rem;
}
.ac-citation figcaption::before{
content: ''; position: absolute; left: 50%; top: 0; transform: translateX(-50%);
width: 34px; height: 3px; background: var(--fr-vert-clair);
}
.ac-final{ background: #fff; padding: 0 0 72px; }
.ac-final__carte{
background: var(--fr-degrade-gamme); border: 1px solid #DCE6F8; border-radius: 20px;
padding: 34px 40px; display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 32px; align-items: center;
}
.ac-final__picto{
width: 110px; height: 110px; border-radius: 50%; background: #fff; color: var(--fr-bleu);
display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 30px rgba(42, 37, 134, .10);
}
.ac-final__picto svg{ width: 46px; height: 46px; }
.ac-final h2{
font-family: var(--font-heading); font-weight: 700; color: var(--navy);
font-size: clamp(1.4rem, 2.1vw, 1.85rem); margin: 0 0 8px;
}
.ac-final p{ color: var(--dh-muted, #4A4E66); margin: 0 0 18px; font-size: .96rem; }
@media (max-width: 980px){
.ac-reperes__liste{ grid-template-columns: 1fr; }
.ac-etapes{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ac-formation__int{ grid-template-columns: 1fr; gap: 28px; }
.ac-certificats{ grid-template-columns: 1fr; }
.ac-assistance{ grid-template-columns: 1fr; }
.ac-assistance li + li{ border-left: 0; padding-left: 0; border-top: 1px solid rgba(255,255,255,.16); padding-top: 22px; }
.ac-canal{ padding-right: 0; }
.ac-final__carte{ grid-template-columns: 1fr; justify-items: start; gap: 20px; padding: 28px 24px; }
}
@media (max-width: 620px){
.ac-etapes{ grid-template-columns: 1fr; }
.ac-citation blockquote::before,
.ac-citation blockquote::after{ display: none; }
}
/* ============================================================
On-premise et cloud — composition de la maquette du 02/09
Portée : .op-*
============================================================ */
.op-hero__surtitre{ display: flex; align-items: center; gap: 12px; color: var(--fr-vert) !important; }
.op-hero__surtitre::before{ content: ''; width: 30px; height: 3px; background: var(--fr-vert-clair); flex: none; }
.op-hero h1 span{ color: var(--fr-bleu-pale); display: block; }
.op-hero__texte{ width: min(100%, 600px); }
.op-hero__visuel{ width: 54%; }
.op-btn-bas span{ margin-left: 8px; }
.op-modes{ background: #fff; padding: 62px 0 66px; }
.op-modes__tete{ text-align: center; margin: 0 auto 34px; }
.op-modes__tete h2{
font-family: var(--font-heading); font-weight: 700; color: var(--navy);
font-size: clamp(1.7rem, 2.6vw, 2.25rem); margin: 0; position: relative; padding-bottom: 16px;
}
.op-modes__tete h2::after{
content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
width: 34px; height: 3px; background: var(--fr-vert-clair);
}
.op-modes__liste{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; }
.op-mode{
background: #fff; border: 1px solid #E4EAF6; border-radius: 16px; padding: 26px 26px 28px;
display: flex; flex-direction: column; gap: 16px; box-shadow: 0 10px 28px rgba(30, 26, 107, .07);
}
.op-mode--hebergees{ box-shadow: 0 16px 36px rgba(30, 26, 107, .12); }
.op-mode__tete{ display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 18px; align-items: center; }
.op-mode__picto{
width: 72px; height: 72px; border-radius: 15px; padding: 14px; background: #fff; color: var(--fr-bleu);
display: flex; align-items: center; justify-content: center; box-shadow: -6px 6px 0 0 var(--fr-bleu-pale);
}
.op-mode__picto svg{ width: 100%; height: 100%; }
.op-mode__etiquette{
display: block; font-family: var(--font-heading); font-size: .74rem; font-weight: 700;
letter-spacing: .1em; text-transform: uppercase; color: var(--fr-vert); margin-bottom: 4px;
}
.op-mode h3{ font-family: var(--font-heading); font-weight: 700; color: var(--navy); font-size: 1.25rem; margin: 0; }
.op-mode__points{ list-style: none; margin: 0; padding: 0; display: grid; }
.op-mode__points li{
display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; align-items: start;
padding: 12px 0; border-bottom: 1px solid #EEF2FA; color: var(--dh-muted, #4A4E66); font-size: .92rem; line-height: 1.5;
}
.op-mode__points li:last-child{ border-bottom: 0; }
.op-mode__chevron{ color: var(--fr-vert); font-weight: 700; font-size: 1.1rem; line-height: 1.2; }
.op-mode .sa-service__lien{ margin-top: auto; align-self: flex-start; }
.op-reversible{
display: flex; align-items: center; gap: 20px; margin: 32px 0 0;
background: var(--fr-degrade-gamme); border: 1px solid #DCE6F8; border-radius: 16px; padding: 18px 26px;
}
.op-reversible__picto{
width: 62px; height: 62px; border-radius: 50%; background: #fff; color: var(--fr-bleu); flex: none;
display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(42, 37, 134, .10);
}
.op-reversible__picto svg{ width: 26px; height: 26px; }
.op-reversible > span:last-child{ font-family: var(--font-heading); font-weight: 700; color: var(--navy); font-size: 1.05rem; }
.op-cloud{ background: #2A2586; color: #fff; padding: 60px 0; }
.op-cloud__int{ display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: 48px; align-items: center; }
.op-cloud h2{
font-family: var(--font-heading); font-weight: 700; color: #fff;
font-size: clamp(1.5rem, 2.3vw, 2rem); line-height: 1.24; margin: 0 0 16px; position: relative; padding-top: 18px;
}
.op-cloud h2::before{ content: ''; position: absolute; left: 0; top: 0; width: 34px; height: 3px; background: var(--fr-turquoise); }
.op-cloud__gauche p{ color: #D9DCF3; line-height: 1.7; margin: 0; font-size: .96rem; max-width: 40ch; }
.op-atouts{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.op-atout{ display: grid; justify-items: center; text-align: center; gap: 12px; padding: 0 22px; align-content: start; }
.op-atouts li + li{ border-left: 1px solid rgba(255, 255, 255, .16); }
.op-atout__picto{
width: 75px; height: 75px; border-radius: 15px; padding: 15px; background: #fff; color: var(--fr-bleu);
display: flex; align-items: center; justify-content: center; box-shadow: -6px 6px 0 0 var(--fr-bleu-pale);
}
.op-atout__picto svg{ width: 100%; height: 100%; }
.op-atout h3{ font-family: var(--font-heading); font-weight: 700; color: #fff; font-size: 1.08rem; margin: 4px 0 0; }
.op-atout p{ color: #D9DCF3; line-height: 1.55; margin: 0; font-size: .9rem; max-width: 24ch; }
/* Les trois intitulés du .com sous chaque famille. */
.op-atout__points{ list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 7px; }
.op-atout__points li{ color: #D9DCF3; font-size: .9rem; line-height: 1.45; }
.op-questions{ background: #fff; padding: 62px 0; }
.op-questions__int{ display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 48px; align-items: start; }
.op-questions h2{
font-family: var(--font-heading); font-weight: 700; color: var(--navy);
font-size: clamp(1.5rem, 2.3vw, 1.95rem); line-height: 1.24; margin: 0 0 26px; position: relative; padding-top: 18px;
}
.op-questions h2::before{ content: ''; position: absolute; left: 0; top: 0; width: 34px; height: 3px; background: var(--fr-vert-clair); }
.op-questions__liste{ list-style: none; margin: 0; padding: 0; display: grid; }
.op-questions__liste li{
display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 20px; align-items: center;
padding: 18px 0; border-bottom: 1px solid #EEF2FA;
}
.op-questions__liste li:last-child{ border-bottom: 0; }
.op-question__picto{
width: 54px; height: 54px; border-radius: 50%; background: var(--fr-degrade-gamme); color: var(--fr-bleu);
display: flex; align-items: center; justify-content: center;
}
.op-question__picto svg{ width: 24px; height: 24px; }
.op-questions__liste strong{ display: block; font-family: var(--font-heading); font-weight: 700; color: var(--navy); font-size: 1rem; margin-bottom: 4px; }
.op-questions__liste span{ color: var(--dh-muted, #4A4E66); font-size: .92rem; line-height: 1.5; }
.op-guide{
background: var(--fr-degrade-gamme); border: 1px solid #DCE6F8; border-radius: 18px; padding: 30px 32px;
display: grid; justify-items: start; gap: 12px;
}
.op-guide__picto{
width: 64px; height: 64px; border-radius: 50%; background: #fff; color: var(--fr-bleu);
display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(42, 37, 134, .10);
}
.op-guide__picto svg{ width: 28px; height: 28px; }
.op-guide h3{ font-family: var(--font-heading); font-weight: 700; color: var(--navy); font-size: 1.3rem; margin: 6px 0 0; line-height: 1.25; }
.op-guide p{ color: var(--dh-muted, #4A4E66); line-height: 1.65; margin: 0; font-size: .95rem; }
.op-final__carte{ text-align: center; grid-template-columns: 1fr !important; justify-items: center; }
.op-final__carte h2{ margin-bottom: 18px !important; }
@media (max-width: 980px){
.op-modes__liste{ grid-template-columns: 1fr; }
.op-cloud__int, .op-questions__int{ grid-template-columns: 1fr; gap: 30px; }
.op-atouts{ grid-template-columns: 1fr; gap: 26px; }
.op-atouts li + li{ border-left: 0; border-top: 1px solid rgba(255,255,255,.16); padding-top: 24px; }
.op-reversible{ flex-direction: column; align-items: flex-start; text-align: left; }
}
/* ============================================================
Dir IPS — composition de la maquette du 02/09. Portée : .di-*
============================================================ */
.di-hero{
background: linear-gradient(160deg, #FFFFFF 0%, #F1F6FF 44%, #E4EDFE 100%);
padding: 40px 0 52px; position: relative; overflow: hidden;
}
.di-hero__int{ min-height: 380px; display: flex; align-items: center; }
.di-hero__texte{ position: relative; z-index: 3; width: min(100%, 560px); }
.di-hero__surtitre{
margin: 16px 0 12px; font-family: var(--font-heading); font-size: .76rem; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase; color: var(--fr-vert);
}
.di-hero h1{ font-family: var(--font-heading); font-weight: 800; color: var(--navy); line-height: 1.2; margin: 0 0 18px; }
.di-hero h1 span{ color: var(--fr-bleu-pale); }
.di-hero__chapo{ color: var(--dh-text, #3A4060); font-size: 1rem; line-height: 1.7; margin: 0 0 26px; max-width: 42ch; }
.di-hero__actions{ display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.di-hero__visuel{ position: absolute; inset: 0 0 0 auto; width: 54%; z-index: 1; overflow: hidden; }
.di-hero__visuel > img:first-child{
display: block; width: 100%; height: 100%; object-fit: cover; object-position: 56% 42%;
-webkit-mask-image:
linear-gradient(90deg, transparent 0%, rgba(0,0,0,.18) 20%, rgba(0,0,0,.62) 42%, #000 68%),
linear-gradient(180deg, #000 0%, #000 58%, rgba(0,0,0,.6) 84%, transparent 100%);
mask-image:
linear-gradient(90deg, transparent 0%, rgba(0,0,0,.18) 20%, rgba(0,0,0,.62) 42%, #000 68%),
linear-gradient(180deg, #000 0%, #000 58%, rgba(0,0,0,.6) 84%, transparent 100%);
-webkit-mask-composite: source-in; mask-composite: intersect;
}
.di-hero__voile{
position: absolute; inset: 0; pointer-events: none;
background:
linear-gradient(180deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 26%, rgba(228,237,254,0) 66%, rgba(228,237,254,.55) 100%),
linear-gradient(90deg, rgba(42,37,134,0) 34%, rgba(42,37,134,.05) 56%, rgba(42,37,134,.09) 100%);
}
.di-hero__vague{ position: absolute; right: -8%; bottom: -10%; width: 52%; height: auto; z-index: 2; pointer-events: none; opacity: .45; }
.di-reperes{ background: #2A2586; padding: 30px 0; }
.di-reperes__liste{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 40px; }
.di-repere{ display: grid; grid-template-columns: 75px minmax(0, 1fr); gap: 20px; align-items: center; }
.di-repere__picto{
width: 75px; height: 75px; border-radius: 15px; padding: 15px; background: #fff; color: var(--fr-bleu);
display: flex; align-items: center; justify-content: center; box-shadow: -6px 6px 0 0 var(--fr-bleu-pale);
}
.di-repere__picto svg{ width: 100%; height: 100%; }
.di-repere h2{ font-family: var(--font-heading); font-weight: 700; color: #fff; font-size: 1.08rem; margin: 0 0 5px; }
.di-repere p{ color: #D9DCF3; line-height: 1.5; margin: 0; font-size: .9rem; max-width: 24ch; }
.di-portes{ background: #fff; padding: 62px 0 66px; }
.di-portes__tete{ text-align: center; margin: 0 auto 32px; }
.di-portes__tete h2{
font-family: var(--font-heading); font-weight: 700; color: var(--navy);
font-size: clamp(1.7rem, 2.6vw, 2.25rem); margin: 0; position: relative; padding-top: 20px;
}
.di-portes__tete h2::before{
content: ''; position: absolute; left: 50%; top: 0; transform: translateX(-50%);
width: 34px; height: 3px; background: var(--fr-vert-clair);
}
.di-portes__liste{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.di-porte{
background: #fff; border: 1px solid #E4EAF6; border-radius: 16px; padding: 26px 28px;
display: grid; grid-template-columns: 75px minmax(0, 1fr); gap: 22px; align-items: start;
box-shadow: 0 10px 28px rgba(30, 26, 107, .07);
}
.di-porte__picto{
width: 75px; height: 75px; border-radius: 15px; padding: 15px; background: #fff; color: var(--fr-bleu);
display: flex; align-items: center; justify-content: center; box-shadow: -6px 6px 0 0 var(--fr-bleu-pale);
}
.di-porte__picto svg{ width: 100%; height: 100%; }
.di-porte h3{ font-family: var(--font-heading); font-weight: 700; color: var(--navy); font-size: 1.12rem; margin: 4px 0 8px; }
.di-porte p{ color: var(--dh-muted, #4A4E66); line-height: 1.6; margin: 0 0 12px; font-size: .94rem; }
.di-porte a{
font-family: var(--font-heading); font-weight: 600; font-size: .9rem; color: var(--fr-bleu); text-decoration: none;
border-bottom: 2px solid transparent; transition: border-color .2s ease;
}
.di-porte a::after{ content: ' →'; }
.di-porte a:hover{ border-bottom-color: var(--fr-bleu); }
.di-secteurs{ background: var(--fr-degrade-gamme); padding: 58px 0; }
.di-secteurs__haut{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; margin-bottom: 34px; }
.di-secteurs h2{
font-family: var(--font-heading); font-weight: 700; color: var(--navy);
font-size: clamp(1.5rem, 2.3vw, 2rem); line-height: 1.24; margin: 0; position: relative; padding-bottom: 18px;
}
.di-secteurs h2::after{ content: ''; position: absolute; left: 0; bottom: 0; width: 34px; height: 3px; background: var(--fr-vert-clair); }
.di-secteurs__droite p{ color: var(--dh-text, #3A4060); line-height: 1.7; margin: 0; font-size: .96rem; }
.di-familles{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.di-familles li{
background: #fff; border: 1px solid #E4EAF6; border-radius: 14px; padding: 18px 20px;
display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 14px; align-items: center;
}
.di-famille__picto{ width: 42px; height: 42px; color: var(--fr-bleu); display: flex; align-items: center; justify-content: center; }
.di-famille__picto svg{ width: 100%; height: 100%; }
.di-famille__nom{ font-family: var(--font-heading); font-weight: 700; color: var(--navy); font-size: .95rem; line-height: 1.3; }
.di-domaines{ margin: 26px 0 0; }
.di-domaines summary{
cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px;
font-family: var(--font-heading); font-weight: 600; font-size: .9rem; color: var(--fr-bleu);
}
.di-domaines summary::-webkit-details-marker{ display: none; }
.di-domaines summary::after{ content: '＋'; }
.di-domaines[open] summary::after{ content: '－'; }
.di-domaines ul{ list-style: none; margin: 16px 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.di-domaines li{
background: #fff; border: 1px solid #E1E9F8; border-radius: 999px; padding: 6px 14px;
font-family: var(--font-heading); font-weight: 600; font-size: .8rem; color: var(--navy);
}
.di-domaines__suite{ color: #8A90B4 !important; }
.di-domaines p{ color: #5B628A; font-size: .89rem; margin: 0; }
.di-secteurs__lien{ margin: 24px 0 0; }
.di-duo{ background: #2A2586; color: #fff; padding: 56px 0; }
.di-duo__tete{ text-align: center; margin: 0 auto 30px; }
.di-duo__tete h2{
font-family: var(--font-heading); font-weight: 700; color: #fff;
font-size: clamp(1.5rem, 2.3vw, 2rem); margin: 0; position: relative; padding-top: 20px;
}
.di-duo__tete h2 span{ color: var(--fr-turquoise); }
.di-duo__tete h2::before{
content: ''; position: absolute; left: 50%; top: 0; transform: translateX(-50%);
width: 34px; height: 3px; background: var(--fr-turquoise);
}
.di-duo__liste{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.di-duo__item{
background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); border-radius: 16px;
padding: 24px 26px; display: grid; grid-template-columns: 75px minmax(0, 1fr); gap: 22px; align-items: center;
}
.di-duo__picto{
width: 75px; height: 75px; border-radius: 15px; padding: 15px; background: #fff; color: var(--fr-bleu);
display: flex; align-items: center; justify-content: center; box-shadow: -6px 6px 0 0 var(--fr-bleu-pale);
}
.di-duo__picto svg{ width: 100%; height: 100%; }
.di-duo__item h3{ font-family: var(--font-heading); font-weight: 700; color: #fff; font-size: 1.12rem; margin: 0 0 6px; }
.di-duo__item p{ color: #D9DCF3; line-height: 1.55; margin: 0 0 10px; font-size: .93rem; }
.di-duo__item a{
font-family: var(--font-heading); font-weight: 600; font-size: .9rem; color: var(--fr-turquoise);
text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .2s ease;
}
.di-duo__item a::after{ content: ' →'; }
.di-duo__item a:hover{ border-bottom-color: var(--fr-turquoise); }
.di-contact{ background: #fff; padding: 58px 0; }
.di-contact__int{ display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: center; }
.di-contact h2{
font-family: var(--font-heading); font-weight: 700; color: var(--navy);
font-size: clamp(1.4rem, 2.1vw, 1.85rem); line-height: 1.24; margin: 0 0 22px; position: relative; padding-bottom: 18px;
}
.di-contact h2::after{ content: ''; position: absolute; left: 0; bottom: 0; width: 34px; height: 3px; background: var(--fr-vert-clair); }
.di-coordonnees{
list-style: none; margin: 0; padding: 24px 26px; display: grid; gap: 16px;
background: var(--fr-degrade-gamme); border: 1px solid #DCE6F8; border-radius: 16px;
}
.di-coordonnees li{ display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; align-items: center; color: var(--dh-muted, #4A4E66); font-size: .95rem; line-height: 1.5; }
.di-coordonnee__picto{ width: 30px; height: 30px; color: var(--fr-bleu); }
.di-coordonnee__picto svg{ width: 100%; height: 100%; }
.di-coordonnees a{ color: var(--fr-bleu); font-weight: 600; text-decoration: none; }
.di-contact__droite{ display: grid; justify-items: center; gap: 18px; text-align: center; border-left: 1px solid #E4EAF6; padding-left: 48px; }
.di-contact__picto{
width: 92px; height: 92px; border-radius: 50%; background: var(--fr-degrade-gamme); color: var(--fr-bleu);
display: flex; align-items: center; justify-content: center;
}
.di-contact__picto svg{ width: 40px; height: 40px; }
.di-contact__droite p{ color: var(--dh-muted, #4A4E66); line-height: 1.6; margin: 0; font-size: .98rem; max-width: 28ch; }
.di-final{ background: var(--fr-degrade-gamme); padding: 40px 0 48px; }
.di-final__carte{
background: #2A2586; border-radius: 18px; padding: 30px 40px;
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px;
}
.di-final__carte h2{ font-family: var(--font-heading); font-weight: 700; color: #fff; font-size: clamp(1.35rem, 2vw, 1.75rem); margin: 0; }
@media (max-width: 980px){
.di-hero__int{ display: block; min-height: 0; }
.di-hero__texte{ width: 100%; }
.di-hero__visuel{ position: static; width: 100%; height: 220px; border-radius: 18px; margin-top: 24px; }
.di-hero__visuel > img:first-child{ -webkit-mask-image: none; mask-image: none; border-radius: 18px; }
.di-hero__vague{ display: none; }
.di-reperes__liste, .di-portes__liste, .di-duo__liste{ grid-template-columns: 1fr; }
.di-secteurs__haut, .di-contact__int{ grid-template-columns: 1fr; gap: 26px; }
.di-familles{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.di-contact__droite{ border-left: 0; padding-left: 0; border-top: 1px solid #E4EAF6; padding-top: 26px; }
}
@media (max-width: 620px){
.di-familles{ grid-template-columns: 1fr; }
.di-final__carte{ padding: 26px 22px; }
}
/* ============================================================
Veille réglementaire — composition de la maquette du 02/09
Portée : .vr-*
============================================================ */
.vr-hero{
background: linear-gradient(120deg, #E4EDFE 0%, #EEF4FF 55%, #F6F9FF 100%);
padding: 38px 0 46px; position: relative; overflow: hidden;
}
.vr-hero__photo{ position: absolute; inset: 0 auto 0 0; width: 17%; overflow: hidden; }
.vr-hero__photo img{
display: block; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%;
-webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.55) 58%, transparent 100%);
mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.55) 58%, transparent 100%);
}
.vr-hero__int{ position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 40px; align-items: center; }
.vr-hero__texte{ padding-left: 170px; }
.vr-hero__surtitre{
margin: 14px 0 12px; font-family: var(--font-heading); font-size: .76rem; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase; color: var(--fr-vert);
}
.vr-hero h1{
font-family: var(--font-heading); font-weight: 800; color: var(--navy);
line-height: 1.2; margin: 0 0 16px;
}
.vr-hero h1 span{ color: var(--fr-bleu-pale); }
.vr-hero__chapo{ color: var(--dh-text, #3A4060); font-size: 1rem; line-height: 1.7; margin: 0 0 24px; max-width: 40ch; }
.vr-tuiles{
list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 96px);
gap: 20px; justify-content: center; align-content: center;
}
.vr-tuiles li{
width: 96px; height: 96px; border-radius: 18px; background: #fff; color: var(--fr-bleu);
display: flex; align-items: center; justify-content: center; position: relative;
box-shadow: 0 14px 32px rgba(30, 26, 107, .10);
}
.vr-tuiles li::after{
content: ''; position: absolute; bottom: 16px; width: 24px; height: 3px; background: var(--fr-vert-clair);
}
.vr-tuiles li svg{ width: 36px; height: 36px; margin-bottom: 12px; }
.vr-tuiles li:nth-child(3){ grid-column: 2; transform: translateY(14px); }
/* Les deux témoignages de la page Veille du .com. */
.vr-citations{ background: #fff; padding: 10px 0 56px; }
.vr-citations__liste{
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px;
}
.vr-citations figure{
margin: 0; background: var(--fr-degrade-gamme); border-radius: 16px; padding: 26px 30px;
border: 1px solid #E4EAF6; height: 100%;
display: flex; flex-direction: column; gap: 14px; justify-content: space-between;
}
.vr-citations blockquote{ margin: 0; }
.vr-citations blockquote p{ color: var(--navy); font-size: 1rem; line-height: 1.65; margin: 0; }
.vr-citations figcaption{ color: #5B628A; font-size: .88rem; font-weight: 600; }
.vr-usages__pied{ color: #333A5C; font-size: .96rem; line-height: 1.7; margin: 22px 0 0; }
.vr-hero__relance{ color: #3A4166; font-size: .96rem; line-height: 1.7; margin: 0 0 22px; max-width: 62ch; }
.vr-newsletter__intro{ color: #333A5C; font-size: .96rem; line-height: 1.7; margin: 0 0 18px; max-width: 78ch; }
@media (max-width: 820px){ .vr-citations__liste{ grid-template-columns: 1fr; } }
.vr-rubriques{ background: #fff; padding: 58px 0 62px; }
.vr-rubriques__tete{ text-align: center; margin: 0 auto 32px; }
.vr-rubriques__tete h2{
font-family: var(--font-heading); font-weight: 700; color: var(--navy);
font-size: clamp(1.6rem, 2.5vw, 2.1rem); margin: 0; position: relative; padding-bottom: 18px;
}
.vr-rubriques__tete h2::after{
content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
width: 34px; height: 3px; background: var(--fr-vert-clair);
}
.vr-entrees__liste{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.vr-entree{
background: #fff; border: 1px solid #E4EAF6; border-radius: 16px; padding: 26px 28px;
display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 24px; align-items: start;
box-shadow: 0 10px 28px rgba(30, 26, 107, .07);
}
.vr-entree__picto{
width: 82px; height: 82px; border-radius: 16px; background: #fff; color: var(--fr-bleu); position: relative;
display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 24px rgba(30, 26, 107, .10);
}
.vr-entree__picto::after{ content: ''; position: absolute; bottom: 14px; width: 22px; height: 3px; background: var(--fr-vert-clair); }
.vr-entree__picto svg{ width: 34px; height: 34px; margin-bottom: 10px; }
.vr-entree h3{ font-family: var(--font-heading); font-weight: 700; color: var(--navy); font-size: 1.22rem; margin: 4px 0 8px; line-height: 1.25; }
.vr-entree p{ color: var(--dh-muted, #4A4E66); line-height: 1.6; margin: 0 0 14px; font-size: .94rem; }
.vr-entree a{
font-family: var(--font-heading); font-weight: 600; font-size: .92rem; color: var(--fr-bleu); text-decoration: none;
border-bottom: 2px solid transparent; transition: border-color .2s ease;
}
.vr-entree a::after{ content: ' →'; }
.vr-entree a:hover{ border-bottom-color: var(--fr-bleu); }
.vr-cadres{ margin: 34px 0 0; background: var(--fr-degrade-gamme); border: 1px solid #DCE6F8; border-radius: 18px; padding: 28px 32px 32px; }
.vr-cadres h2{
text-align: center; font-family: var(--font-heading); font-weight: 700; color: var(--navy);
font-size: clamp(1.2rem, 1.8vw, 1.5rem); margin: 0 auto 26px; position: relative; padding-bottom: 16px;
}
.vr-cadres h2::after{
content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
width: 30px; height: 3px; background: var(--fr-vert-clair);
}
.vr-cadres__int{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.vr-cadres__int > :last-child{ border-left: 1px solid #D6E0F5; padding-left: 24px; }
.vr-cadre{ display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 20px; align-items: center; }
.vr-cadre__picto{
width: 68px; height: 68px; border-radius: 50%; background: #fff; color: var(--fr-bleu); position: relative;
display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(42, 37, 134, .10);
}
.vr-cadre__picto::after{ content: ''; position: absolute; bottom: 14px; width: 20px; height: 3px; background: var(--fr-vert-clair); }
.vr-cadre__picto svg{ width: 28px; height: 28px; margin-bottom: 8px; }
.vr-cadre__liste{ font-family: var(--font-heading); font-weight: 700; color: var(--navy); font-size: 1rem; margin: 0 0 8px; }
.vr-usages{ background: #fff; padding: 20px 0 58px; }
.vr-usages__int{ display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; align-items: center; }
.vr-usages h2{
font-family: var(--font-heading); font-weight: 700; color: var(--navy);
font-size: clamp(1.4rem, 2.1vw, 1.85rem); line-height: 1.24; margin: 0; position: relative; padding-bottom: 18px;
}
.vr-usages h2::after{ content: ''; position: absolute; left: 0; bottom: 0; width: 34px; height: 3px; background: var(--fr-vert-clair); }
.vr-usages__droite > p{ color: var(--dh-text, #3A4060); line-height: 1.7; margin: 0 0 20px; font-size: .96rem; }
.vr-logiciels{ list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.vr-logiciels li{
display: grid; grid-template-columns: 54px minmax(0, 1fr) 24px; gap: 18px; align-items: center;
background: #fff; border: 1px solid #E4EAF6; border-radius: 14px; padding: 16px 20px;
transition: border-color .2s ease, box-shadow .2s ease;
}
.vr-logiciels li:hover{ border-color: var(--fr-bleu-pale); box-shadow: 0 12px 26px rgba(42, 37, 134, .09); }
.vr-logiciels__picto{ width: 54px; height: 54px; border-radius: 13px; background: var(--fr-degrade-gamme); color: var(--fr-bleu); display: flex; align-items: center; justify-content: center; }
.vr-logiciels__picto svg{ width: 24px; height: 24px; }
.vr-logiciels a{ text-decoration: none; display: grid; gap: 3px; }
.vr-logiciels strong{ font-family: var(--font-heading); font-weight: 700; color: var(--navy); font-size: 1rem; }
.vr-logiciels span{ color: #5B628A; font-size: .9rem; line-height: 1.5; }
.vr-logiciels__fleche{ color: var(--fr-bleu); font-weight: 700; }
.vr-echange{ background: #fff; padding: 0 0 40px; }
.vr-echange__carte{
background: #2A2586; border-radius: 18px; padding: 30px 36px;
display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 28px; align-items: center; color: #fff;
}
.vr-echange__picto{ width: 92px; height: 92px; color: #fff; display: flex; align-items: center; justify-content: center; }
.vr-echange__picto svg{ width: 100%; height: 100%; }
.vr-echange__picto svg [stroke="#2A2586"]{ stroke: #fff; }
.vr-echange h2{ font-family: var(--font-heading); font-weight: 700; color: #fff; font-size: clamp(1.3rem, 2vw, 1.7rem); margin: 0 0 8px; }
.vr-echange p{ color: #D9DCF3; margin: 0 0 18px; font-size: .95rem; }
.vr-newsletter{ background: #fff; padding: 0 0 66px; }
.vr-newsletter__carte{
background: var(--fr-degrade-gamme); border: 1px solid #DCE6F8; border-radius: 18px; padding: 30px 36px;
display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 30px; align-items: center;
}
.vr-newsletter__picto{
width: 96px; height: 96px; border-radius: 50%; background: #fff; color: var(--fr-bleu); position: relative;
display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 26px rgba(42, 37, 134, .10);
}
.vr-newsletter__picto::after{ content: ''; position: absolute; bottom: 20px; width: 24px; height: 3px; background: var(--fr-vert-clair); }
.vr-newsletter__picto svg{ width: 40px; height: 40px; margin-bottom: 10px; }
/* Le bloc d'inscription est le composant commun : ici il vit sur fond clair. */
.vr-newsletter__bloc .newsletter{ background: transparent; padding: 0; display: grid; gap: 16px; }
.vr-newsletter__bloc .newsletter h2{ color: var(--navy); font-size: clamp(1.25rem, 1.9vw, 1.6rem); margin: 0; }
.vr-newsletter__bloc .newsletter p{ color: var(--dh-muted, #4A4E66); }
.vr-newsletter__bloc .newsletter__form input[type="email"]{ background: #fff; border: 1px solid #D6E0F5; color: var(--navy); }
.vr-newsletter__bloc .newsletter__form input[type="email"]::placeholder{ color: #8A90B4; }
.vr-newsletter__bloc .newsletter__mention{ grid-column: auto; margin-top: 0; font-size: .85rem; color: #5B628A; }
@media (max-width: 1240px){
.vr-hero__photo{ width: 10%; }
.vr-hero__texte{ padding-left: 140px; }
}
@media (max-width: 1080px){
.vr-hero__photo{ display: none; }
.vr-hero__texte{ padding-left: 0; }
}
@media (max-width: 980px){
.vr-hero__int{ grid-template-columns: 1fr; }
.vr-hero__texte{ padding-left: 0; }
.vr-hero{ padding-top: 34px; }
.vr-hero__photo{ display: none; }
.vr-tuiles{ grid-template-columns: repeat(3, 82px); justify-content: start; }
.vr-tuiles li{ width: 82px; height: 82px; }
.vr-tuiles li:nth-child(3){ grid-column: auto; transform: none; }
.vr-entrees__liste{ grid-template-columns: 1fr; }
.vr-cadres__int{ grid-template-columns: 1fr; }
.vr-cadres__int > :last-child{ border-left: 0; padding-left: 0; border-top: 1px solid #D6E0F5; padding-top: 24px; }
.vr-usages__int{ grid-template-columns: 1fr; gap: 26px; }
.vr-echange__carte, .vr-newsletter__carte{ grid-template-columns: 1fr; gap: 20px; padding: 26px 22px; }
}
/* ============================================================
Cadres à télécharger — composition de la maquette du 02/09
Portée : .tc-*
============================================================ */
.tc-hero{
background: linear-gradient(150deg, #EEF4FF 0%, #E4EDFE 60%, #F4F8FF 100%);
padding: 38px 0 44px; position: relative; overflow: hidden;
}
.tc-hero__int{ display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 40px; align-items: center; }
.tc-hero__surtitre{
margin: 14px 0 12px; font-family: var(--font-heading); font-size: .76rem; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase; color: var(--fr-vert);
position: relative; padding-bottom: 12px;
}
.tc-hero__surtitre::after{ content: ''; position: absolute; left: 0; bottom: 0; width: 34px; height: 3px; background: var(--fr-vert-clair); }
.tc-hero h1{
font-family: var(--font-heading); font-weight: 800; color: var(--navy);
line-height: 1.18; margin: 0 0 14px;
}
.tc-hero__chapo{ color: var(--dh-text, #3A4060); font-size: 1rem; line-height: 1.7; margin: 0 0 22px; max-width: 44ch; }
.tc-hero__compte{ color: #5B628A; font-size: .9rem; margin: 14px 0 0; }
.tc-tuiles{ list-style: none; margin: 0; padding: 0; display: flex; gap: 22px; justify-content: center; align-items: center; }
.tc-tuiles li{
width: 112px; height: 132px; border-radius: 18px; background: #fff; color: var(--fr-bleu);
display: flex; align-items: center; justify-content: center; box-shadow: 0 16px 36px rgba(30, 26, 107, .12);
}
.tc-tuiles li:last-child{ transform: translateY(18px); }
.tc-tuiles li svg{ width: 48px; height: 48px; }
.tc-acces{ background: #fff; padding: 32px 0 0; }
.tc-acces__carte{
background: #fff; border: 1px solid #E4EAF6; border-radius: 18px; padding: 6px 30px 22px;
box-shadow: 0 10px 28px rgba(30, 26, 107, .07);
}
.tc-acces .fr-seuil{ margin: 0; background: transparent; border: 0; padding: 18px 0 0; }
.tc-acces .fr-seuil__titre{ font-size: 1.35rem !important; color: var(--navy) !important; }
.tc-liste{ background: #fff; padding: 32px 0 40px; }
.tc-liste__carte{
background: #fff; border: 1px solid #E4EAF6; border-radius: 18px; padding: 28px 30px 30px;
box-shadow: 0 10px 28px rgba(30, 26, 107, .07);
}
.tc-liste__carte > h2{
font-family: var(--font-heading); font-weight: 700; color: var(--navy);
font-size: clamp(1.3rem, 2vw, 1.6rem); margin: 0 0 20px;
}
.tc-recherche{ position: relative; margin: 0 0 18px; }
.tc-recherche input{
width: 100%; border: 1px solid #D6E0F5; border-radius: 999px; padding: 14px 58px 14px 22px;
font-family: var(--font-body); font-size: .96rem; color: var(--navy); background: #FBFCFF;
}
.tc-recherche input:focus{ outline: 2px solid var(--fr-bleu-pale); outline-offset: 1px; }
.tc-recherche__picto{
position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
width: 42px; height: 42px; border-radius: 50%; background: var(--fr-bleu); color: #fff;
display: flex; align-items: center; justify-content: center; pointer-events: none;
}
.tc-recherche__picto svg{ width: 20px; height: 20px; }
.tc-recherche__picto svg [stroke="#2A2586"]{ stroke: #fff; }
.tc-filtres{ display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px; }
.tc-filtre{
appearance: none; cursor: pointer; background: #fff; border: 1px solid #D6E0F5; border-radius: 999px;
padding: 9px 20px; font-family: var(--font-heading); font-weight: 600; font-size: .86rem; color: var(--navy);
transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.tc-filtre:hover{ border-color: var(--fr-bleu-pale); }
.tc-filtre.est-actif{ background: var(--fr-bleu); border-color: var(--fr-bleu); color: #fff; }
.tc-liste__corps .fr-pli{ scroll-margin-top: 110px; }
.tc-liste__vide{ color: #5B628A; margin: 18px 0 0; }
.tc-raccourcis{ background: #fff; padding: 0 0 40px; }
.tc-raccourcis__liste{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.tc-raccourci{
background: var(--fr-degrade-gamme); border: 1px solid #DCE6F8; border-radius: 16px; padding: 22px 24px;
display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 20px; align-items: center;
}
.tc-raccourci__picto{
width: 72px; height: 72px; border-radius: 15px; background: #fff; color: var(--fr-bleu);
display: flex; align-items: center; justify-content: center; box-shadow: -6px 6px 0 0 var(--fr-bleu-pale);
}
.tc-raccourci__picto svg{ width: 30px; height: 30px; }
.tc-raccourci h3{ font-family: var(--font-heading); font-weight: 700; color: var(--navy); font-size: 1.05rem; margin: 0 0 8px; line-height: 1.25; }
.tc-raccourci a{
font-family: var(--font-heading); font-weight: 600; font-size: .9rem; color: var(--fr-bleu); text-decoration: none;
border-bottom: 2px solid transparent; transition: border-color .2s ease;
}
.tc-raccourci a::after{ content: ' →'; }
.tc-raccourci a:hover{ border-bottom-color: var(--fr-bleu); }
.tc-gestionnaire{ background: #fff; padding: 0 0 26px; }
.tc-gestionnaire__carte{
background: #2A2586; border-radius: 18px; padding: 32px 40px;
display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 36px; align-items: center; color: #fff;
}
.tc-gestionnaire__picto{
width: 132px; height: 132px; border-radius: 20px; background: #fff; color: var(--fr-bleu);
display: flex; align-items: center; justify-content: center; box-shadow: -8px 8px 0 0 rgba(157, 190, 244, .55);
}
.tc-gestionnaire__picto svg{ width: 56px; height: 56px; }
.tc-gestionnaire h2{ font-family: var(--font-heading); font-weight: 700; color: #fff; font-size: clamp(1.3rem, 2vw, 1.75rem); margin: 0 0 10px; }
.tc-gestionnaire p{ color: #D9DCF3; line-height: 1.65; margin: 0 0 18px; max-width: 44ch; font-size: .96rem; }
.tc-echange{ background: #fff; padding: 0 0 40px; }
.tc-echange__carte{
background: #2A2586; border-radius: 18px; padding: 28px 40px;
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 36px; color: #fff;
}
.tc-echange h2{ font-family: var(--font-heading); font-weight: 700; color: #fff; font-size: clamp(1.2rem, 1.9vw, 1.55rem); margin: 0 0 6px; }
.tc-echange p{ color: #D9DCF3; margin: 0; font-size: .95rem; }
.tc-contexte{ background: var(--fr-degrade-gamme); padding: 50px 0; }
.tc-contexte__surtitre{
margin: 0 0 14px; font-family: var(--font-heading); font-size: .76rem; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase; color: var(--fr-bleu-pale);
}
.tc-contexte__corps{ display: grid; gap: 14px; }
.tc-contexte__corps h2{
font-family: var(--font-heading); font-weight: 700; color: var(--navy);
font-size: clamp(1.2rem, 1.8vw, 1.5rem); line-height: 1.26; margin: 16px 0 4px;
}
.tc-contexte__corps p{ color: var(--dh-text, #3A4060); line-height: 1.75; margin: 0; font-size: .95rem; max-width: 78ch; }
.tc-contexte__corps a{ color: var(--fr-bleu); }
.tc-contexte__corps img{ display: none; }
@media (max-width: 980px){
.tc-hero__int{ grid-template-columns: 1fr; }
.tc-tuiles{ justify-content: flex-start; }
.tc-raccourcis__liste{ grid-template-columns: 1fr; }
.tc-gestionnaire__carte{ grid-template-columns: 1fr; gap: 22px; padding: 26px 24px; }
.tc-liste__carte, .tc-acces__carte{ padding: 22px 20px; }
}
/* ============================================================
Webinaires — composition de la maquette du 02/09. Portée : .wb-*
============================================================ */
.wb-surtitre{
margin: 0 0 12px; font-family: var(--font-heading); font-size: .76rem; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase; color: var(--navy); position: relative; padding-top: 16px;
}
.wb-surtitre::before{ content: ''; position: absolute; left: 0; top: 0; width: 30px; height: 3px; background: var(--fr-vert-clair); }
.wb-hero{
background: linear-gradient(160deg, #FFFFFF 0%, #F1F6FF 44%, #E4EDFE 100%);
padding: 36px 0 48px; position: relative; overflow: hidden;
}
.wb-hero__int{ min-height: 380px; display: flex; align-items: center; }
.wb-hero__texte{ position: relative; z-index: 3; width: min(100%, 560px); }
.wb-hero__surtitre{
margin: 14px 0 12px; font-family: var(--font-heading); font-size: .76rem; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase; color: var(--navy); position: relative; padding-top: 16px;
}
.wb-hero__surtitre::before{ content: ''; position: absolute; left: 0; top: 0; width: 30px; height: 3px; background: var(--fr-vert-clair); }
.wb-hero h1{ font-family: var(--font-heading); font-weight: 800; color: var(--navy); line-height: 1.2; margin: 0 0 16px; }
.wb-hero h1 span{ color: var(--fr-bleu-pale); }
.wb-hero__chapo{ color: var(--dh-text, #3A4060); font-size: 1rem; line-height: 1.7; margin: 0 0 24px; max-width: 40ch; }
.wb-hero__actions{ display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; }
.wb-hero__visuel{ position: absolute; inset: 0 0 0 auto; width: 52%; z-index: 1; overflow: hidden; }
.wb-hero__visuel img{
display: block; width: 100%; height: 100%; object-fit: cover; object-position: 55% 40%;
-webkit-mask-image:
linear-gradient(90deg, transparent 0%, rgba(0,0,0,.2) 18%, rgba(0,0,0,.65) 40%, #000 66%),
linear-gradient(180deg, #000 0%, #000 60%, rgba(0,0,0,.6) 85%, transparent 100%);
mask-image:
linear-gradient(90deg, transparent 0%, rgba(0,0,0,.2) 18%, rgba(0,0,0,.65) 40%, #000 66%),
linear-gradient(180deg, #000 0%, #000 60%, rgba(0,0,0,.6) 85%, transparent 100%);
-webkit-mask-composite: source-in; mask-composite: intersect;
}
.wb-hero__voile{
position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(180deg, rgba(255,255,255,.24) 0%, rgba(255,255,255,0) 26%, rgba(228,237,254,0) 66%, rgba(228,237,254,.5) 100%);
}
.wb-une{ background: #fff; padding: 52px 0 46px; }
.wb-une__tete{ margin: 0 0 24px; }
.wb-une__tete h2{
font-family: var(--font-heading); font-weight: 700; color: var(--navy);
font-size: clamp(1.5rem, 2.3vw, 2rem); margin: 0;
}
.wb-une__carte{
display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
background: #fff; border: 1px solid #E4EAF6; border-radius: 18px; overflow: hidden;
box-shadow: 0 12px 30px rgba(30, 26, 107, .08);
}
.wb-une__visuel{
background: #2A2586; color: #fff;
display: grid; place-items: center; gap: 22px; padding: 44px 32px; position: relative; text-align: center;
}
.wb-une__visuel--image{ padding: 0; background: #EEF3FC; overflow: hidden; }
.wb-une__visuel--image img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.wb-une__visuel--image .wb-une__lecture{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: rgba(30, 26, 107, .55); backdrop-filter: blur(2px); }
.wb-une__mots{ font-family: var(--font-heading); font-weight: 800; font-size: 1.5rem; display: grid; gap: 8px; }
.wb-une__mots em{ font-style: normal; font-weight: 600; font-size: 1.05rem; color: var(--fr-turquoise); }
.wb-une__lecture{
width: 68px; height: 68px; border-radius: 50%; border: 2px solid rgba(255,255,255,.85);
display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: #fff;
}
.wb-une__corps{ padding: 32px 36px; display: grid; align-content: center; gap: 12px; }
.wb-une__etiquette{
margin: 0; font-family: var(--font-heading); font-size: .74rem; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase; color: var(--fr-bleu);
}
.wb-une__corps h3{ font-family: var(--font-heading); font-weight: 800; color: var(--navy); font-size: clamp(1.2rem, 1.9vw, 1.55rem); margin: 0; line-height: 1.28; }
.wb-une__date{ display: flex; align-items: center; gap: 10px; color: #5B628A; font-size: .92rem; margin: 0; }
.wb-une__date svg{ width: 20px; height: 20px; }
.wb-une__extrait{ color: var(--dh-muted, #4A4E66); line-height: 1.6; margin: 0; font-size: .95rem; }
.wb-une__corps .fr-btn{ justify-self: start; margin-top: 6px; }
.wb-tous{ background: var(--fr-degrade-gamme); padding: 52px 0 56px; }
.wb-tous__tete h2{
font-family: var(--font-heading); font-weight: 700; color: var(--navy);
font-size: clamp(1.5rem, 2.3vw, 2rem); margin: 0 0 20px; position: relative; padding-top: 16px;
}
.wb-tous__tete h2::before{ content: ''; position: absolute; left: 0; top: 0; width: 30px; height: 3px; background: var(--fr-vert-clair); }
.wb-filtres{ display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 24px; }
.wb-filtre{
appearance: none; cursor: pointer; background: #fff; border: 1px solid #D6E0F5; border-radius: 999px;
padding: 9px 20px; font-family: var(--font-heading); font-weight: 600; font-size: .86rem; color: var(--navy);
transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.wb-filtre:hover{ border-color: var(--fr-bleu-pale); }
.wb-filtre.est-actif{ background: var(--fr-bleu); border-color: var(--fr-bleu); color: #fff; }
.wb-cartes{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.wb-carte > a{
display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid #E4EAF6;
border-radius: 16px; overflow: hidden; text-decoration: none;
transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.wb-carte > a:hover{ border-color: var(--fr-bleu-pale); box-shadow: 0 18px 38px -24px rgba(23, 20, 63, .45); transform: translateY(-3px); }
.wb-carte__visuel{
display: flex; align-items: center; justify-content: center; height: 132px;
background: #2A2586;
}
.wb-carte__visuel--clair{ background: linear-gradient(145deg, #4B7BE8 0%, #6E9BF2 100%); }
/* Retour client du 03/09 : le .com montre la couverture de chaque webinaire.
Le carreau à pictogramme ne sert plus que de repli. */
.wb-carte__visuel--image{ background: #EEF3FC; padding: 0; overflow: hidden; }
.wb-carte__visuel--image img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.wb-carte__visuel svg{ width: 46px; height: 46px; }
.wb-carte__corps{ display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 22px; flex: 1; }
.wb-carte__date{ color: #8A90B4; font-size: .8rem; font-family: var(--font-heading); font-weight: 600; }
.wb-carte__titre{ font-family: var(--font-heading); font-weight: 700; color: var(--navy); font-size: 1.02rem; line-height: 1.35; }
.wb-carte__lien{ margin-top: auto; font-family: var(--font-heading); font-weight: 600; font-size: .88rem; color: var(--fr-bleu); }
.wb-vide{ color: #5B628A; margin: 20px 0 0; }
.wb-tous__note{ color: #5B628A; font-size: .92rem; margin: 24px 0 0; }
.wb-acteurs{ background: #fff; padding: 52px 0; }
.wb-acteurs__tete h2{
font-family: var(--font-heading); font-weight: 700; color: var(--navy);
font-size: clamp(1.4rem, 2.1vw, 1.85rem); margin: 0 0 22px; position: relative; padding-top: 16px;
}
.wb-acteurs__tete h2::before{ content: ''; position: absolute; left: 0; top: 0; width: 30px; height: 3px; background: var(--fr-vert-clair); }
.wb-acteurs__liste{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.wb-acteur{
background: #fff; border: 1px solid #E4EAF6; border-radius: 16px; padding: 24px 26px;
display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 22px; align-items: start;
box-shadow: 0 10px 28px rgba(30, 26, 107, .07);
}
.wb-acteur__picto{
width: 76px; height: 76px; border-radius: 15px; background: var(--fr-degrade-gamme); color: var(--fr-bleu);
display: flex; align-items: center; justify-content: center;
}
.wb-acteur__picto svg{ width: 34px; height: 34px; }
.wb-acteur h3{ font-family: var(--font-heading); font-weight: 700; color: var(--navy); font-size: 1.08rem; margin: 4px 0 8px; line-height: 1.3; }
.wb-acteur p{ color: var(--dh-muted, #4A4E66); line-height: 1.6; margin: 0 0 12px; font-size: .93rem; }
.wb-acteur a{
font-family: var(--font-heading); font-weight: 600; font-size: .9rem; color: var(--fr-bleu); text-decoration: none;
border-bottom: 2px solid transparent; transition: border-color .2s ease;
}
.wb-acteur a::after{ content: ' →'; }
.wb-acteur a:hover{ border-bottom-color: var(--fr-bleu); }
.wb-invitations{ background: #fff; padding: 0 0 40px; }
.wb-invitations__carte{
background: #2A2586; border-radius: 18px; padding: 34px 40px;
display: grid; grid-template-columns: minmax(0, 1fr) 160px; gap: 30px; align-items: center; color: #fff;
}
.wb-invitations h2{ font-family: var(--font-heading); font-weight: 700; color: #fff; font-size: clamp(1.3rem, 2vw, 1.7rem); margin: 0 0 10px; }
.wb-invitations p{ color: #D9DCF3; line-height: 1.65; margin: 0 0 20px; max-width: 44ch; font-size: .96rem; }
.wb-invitations__picto{ width: 160px; height: 120px; display: flex; align-items: center; justify-content: center; }
.wb-invitations__picto svg{ width: 100%; height: 100%; }
.wb-question{ background: #fff; padding: 0 0 62px; }
.wb-question__int{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 40px; border-top: 1px solid #E4EAF6; padding-top: 34px; }
.wb-question h2{
font-family: var(--font-heading); font-weight: 700; color: var(--navy);
font-size: clamp(1.3rem, 2vw, 1.65rem); margin: 0 0 8px; position: relative; padding-top: 16px;
}
.wb-question h2::before{ content: ''; position: absolute; left: 0; top: 0; width: 30px; height: 3px; background: var(--fr-vert-clair); }
.wb-question p{ color: var(--dh-muted, #4A4E66); margin: 0; max-width: 52ch; font-size: .95rem; }
@media (max-width: 980px){
.wb-hero__int{ display: block; min-height: 0; }
.wb-hero__texte{ width: 100%; }
.wb-hero__visuel{ position: static; width: 100%; height: 220px; border-radius: 18px; margin-top: 22px; }
.wb-hero__visuel img{ -webkit-mask-image: none; mask-image: none; border-radius: 18px; }
.wb-une__carte{ grid-template-columns: 1fr; }
.wb-cartes{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wb-acteurs__liste{ grid-template-columns: 1fr; }
.wb-invitations__carte{ grid-template-columns: 1fr; padding: 26px 24px; }
.wb-invitations__picto{ display: none; }
}
@media (max-width: 620px){
.wb-cartes{ grid-template-columns: 1fr; }
.wb-une__corps{ padding: 24px 22px; }
}
/* ============================================================
Témoignages — composition de la maquette du 02/09. Portée : .tm-*
============================================================ */
.tm-hero{
background: linear-gradient(120deg, #E4EDFE 0%, #EEF4FF 55%, #F6F9FF 100%);
padding: 36px 0 44px; position: relative; overflow: hidden;
}
.tm-hero__photo{ position: absolute; inset: 0 auto 0 0; width: 15%; overflow: hidden; }
.tm-hero__photo img{
display: block; width: 100%; height: 100%; object-fit: cover;
-webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.5) 60%, transparent 100%);
mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.5) 60%, transparent 100%);
}
.tm-hero__int{ position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; align-items: center; }
.tm-hero__texte{ padding-left: 150px; }
.tm-hero__surtitre{
margin: 14px 0 12px; font-family: var(--font-heading); font-size: .76rem; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase; color: var(--navy); position: relative; padding-top: 16px;
}
.tm-hero__surtitre::before{ content: ''; position: absolute; left: 0; top: 0; width: 30px; height: 3px; background: var(--fr-vert-clair); }
.tm-hero h1{ font-family: var(--font-heading); font-weight: 800; color: var(--navy); line-height: 1.2; margin: 0 0 16px; }
.tm-hero h1 span{ color: var(--fr-bleu-clair); }
.tm-hero__chapo{ color: var(--dh-text, #3A4060); font-size: 1rem; line-height: 1.7; margin: 0 0 24px; max-width: 40ch; }
.tm-bulles{ list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; justify-items: end; }
.tm-bulles li{
background: #fff; border-radius: 16px; padding: 18px 22px; width: min(100%, 260px);
box-shadow: 0 14px 32px rgba(30, 26, 107, .10); position: relative;
}
.tm-bulles li:nth-child(2){ transform: translateX(-28px); }
.tm-bulles li:nth-child(3){ transform: translateX(-56px); }
.tm-bulles li span{ font-family: Georgia, 'Times New Roman', serif; font-size: 2rem; line-height: 1; color: var(--fr-vert-clair); display: block; margin-bottom: 8px; }
/* Les barres grises figuraient du texte : il y en a du vrai maintenant. */
.tm-une{ background: #fff; padding: 46px 0 40px; }
.tm-une__carte{
background: #2A2586; border-radius: 18px; padding: 34px 40px;
display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 22px; align-items: start; color: #fff; margin-top: 18px;
}
.tm-une__guillemets{ font-family: Georgia, 'Times New Roman', serif; font-size: 5rem; line-height: .8; color: var(--fr-turquoise); }
.tm-une__carte h2{ font-family: var(--font-heading); font-weight: 800; color: #fff; font-size: clamp(1.3rem, 2.1vw, 1.8rem); line-height: 1.28; margin: 10px 0 12px; }
.tm-une__extrait{ color: #D9DCF3; line-height: 1.65; margin: 0 0 20px; font-size: .96rem; max-width: 62ch; }
.tm-liste{ background: var(--fr-degrade-gamme); padding: 50px 0 56px; }
.tm-liste__tete{ text-align: center; margin: 0 auto 22px; }
.tm-liste__tete h2{
font-family: var(--font-heading); font-weight: 700; color: var(--navy);
font-size: clamp(1.5rem, 2.3vw, 2rem); margin: 0;
}
.tm-filtres{ display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 26px; }
.tm-filtre{
appearance: none; cursor: pointer; background: #fff; border: 1px solid #D6E0F5; border-radius: 999px;
padding: 9px 20px; font-family: var(--font-heading); font-weight: 600; font-size: .86rem; color: var(--navy);
transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.tm-filtre:hover{ border-color: var(--fr-bleu-pale); }
.tm-filtre.est-actif{ background: var(--fr-bleu); border-color: var(--fr-bleu); color: #fff; }
.tm-cartes{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
/* Carte impaire de fin de grille : centrée plutôt que collée à gauche.
La largeur reprend celle d'une colonne, gouttière déduite. */
.tm-carte.est-orpheline{ grid-column: 1 / -1; justify-self: center; width: calc(50% - 12px); }
.tm-carte{
background: #fff; border: 1px solid #E4EAF6; border-radius: 16px; padding: 24px 26px;
display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 20px; align-items: start;
box-shadow: 0 10px 28px rgba(30, 26, 107, .07);
}
.tm-carte__picto{
width: 62px; height: 62px; border-radius: 14px; background: var(--fr-degrade-gamme);
display: flex; align-items: center; justify-content: center;
font-family: Georgia, 'Times New Roman', serif; font-size: 2.2rem; line-height: 1; color: var(--fr-vert-clair);
padding-top: 18px;
}
.tm-carte__tete{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 14px; margin-bottom: 8px; }
.tm-carte h3{ font-family: var(--font-heading); font-weight: 700; color: var(--navy); font-size: 1.05rem; margin: 0; line-height: 1.3; }
.tm-carte__etiquette{
background: #EAF7F3; color: var(--fr-vert); border-radius: 999px; padding: 4px 12px;
font-family: var(--font-heading); font-size: .74rem; font-weight: 700; white-space: nowrap;
}
.tm-carte p{ color: var(--dh-muted, #4A4E66); line-height: 1.6; margin: 0 0 12px; font-size: .93rem; }
.tm-carte a{
font-family: var(--font-heading); font-weight: 600; font-size: .9rem; color: var(--fr-bleu); text-decoration: none;
border-bottom: 2px solid transparent; transition: border-color .2s ease;
}
.tm-carte a::after{ content: ' →'; }
.tm-carte a:hover{ border-bottom-color: var(--fr-bleu); }
.tm-vide{ color: #5B628A; margin: 22px 0 0; text-align: center; }
.tm-relation{ background: #fff; padding: 56px 0; }
.tm-relation__int{ display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; align-items: center; }
.tm-relation h2{
font-family: var(--font-heading); font-weight: 700; color: var(--navy);
font-size: clamp(1.4rem, 2.1vw, 1.85rem); line-height: 1.24; margin: 0 0 16px; position: relative; padding-bottom: 18px;
}
.tm-relation h2::after{ content: ''; position: absolute; left: 0; bottom: 0; width: 34px; height: 3px; background: var(--fr-vert-clair); }
.tm-relation__gauche p{ color: var(--dh-text, #3A4060); line-height: 1.7; margin: 0 0 22px; font-size: .96rem; }
.tm-relation__liens{ display: flex; flex-wrap: wrap; gap: 14px; }
.tm-piliers{ list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.tm-pilier{ display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 20px; align-items: start; padding-bottom: 18px; border-bottom: 1px solid #EEF2FA; }
.tm-pilier:last-child{ border-bottom: 0; padding-bottom: 0; }
.tm-pilier__picto{
width: 62px; height: 62px; border-radius: 14px; background: #fff; color: var(--fr-bleu);
display: flex; align-items: center; justify-content: center; box-shadow: -6px 6px 0 0 var(--fr-bleu-pale);
}
.tm-pilier__picto svg{ width: 28px; height: 28px; }
.tm-pilier h3{ font-family: var(--font-heading); font-weight: 700; color: var(--navy); font-size: 1.05rem; margin: 4px 0 6px; }
.tm-pilier p{ color: var(--dh-muted, #4A4E66); line-height: 1.6; margin: 0; font-size: .92rem; }
.tm-partage{ background: #fff; padding: 0 0 40px; }
.tm-partage__carte{
background: #2A2586; border-radius: 18px; padding: 28px 36px;
display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 26px; align-items: center; color: #fff;
}
.tm-partage__picto{ width: 84px; height: 84px; color: #fff; display: flex; align-items: center; justify-content: center; }
.tm-partage__picto svg{ width: 100%; height: 100%; }
.tm-partage__picto svg [stroke="#2A2586"]{ stroke: #fff; }
.tm-partage h2{ font-family: var(--font-heading); font-weight: 700; color: #fff; font-size: clamp(1.2rem, 1.9vw, 1.55rem); margin: 0 0 6px; }
.tm-partage p{ color: #D9DCF3; margin: 0; font-size: .95rem; }
.tm-final{ background: var(--fr-degrade-gamme); padding: 44px 0 52px; }
.tm-final__int{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; }
.tm-final h2{
font-family: var(--font-heading); font-weight: 700; color: var(--navy);
font-size: clamp(1.3rem, 2vw, 1.7rem); margin: 0; max-width: 24ch;
}
@media (max-width: 1240px){
.tm-hero__photo{ width: 10%; }
.tm-hero__texte{ padding-left: 130px; }
}
@media (max-width: 1080px){
.tm-hero__photo{ display: none; }
.tm-hero__texte{ padding-left: 0; }
}
@media (max-width: 980px){
.tm-hero__int{ grid-template-columns: 1fr; }
.tm-bulles{ justify-items: start; }
.tm-bulles li:nth-child(2), .tm-bulles li:nth-child(3){ transform: none; }
.tm-cartes{ grid-template-columns: 1fr; }
.tm-carte.est-orpheline{ grid-column: auto; width: auto; }
.tm-relation__int{ grid-template-columns: 1fr; gap: 28px; }
.tm-une__carte{ grid-template-columns: 1fr; gap: 10px; padding: 26px 24px; }
.tm-partage__carte{ grid-template-columns: 1fr; gap: 18px; padding: 26px 24px; }
}
/* ============================================================
Fiches des cadres réglementaires (maquette du 02/09).
Portée : .cf-* — communes aux sept fiches.
============================================================ */
.cf-hero{
background: linear-gradient(115deg, #E4EDFE 0%, #EEF4FF 46%, #F3F8FF 62%, rgba(243, 248, 255, 0) 100%);
padding: 30px 0 46px; position: relative; overflow: hidden;
}
.cf-hero__photo{ position: absolute; inset: 0 0 0 auto; width: 52%; }
.cf-hero__photo img{
display: block; width: 100%; height: 100%; object-fit: cover;
-webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 24%, #000 52%);
mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 24%, #000 52%);
}
.cf-hero__int{ position: relative; z-index: 2; }
.cf-hero__texte{ max-width: 46%; }
.cf-hero__surtitre{
margin: 16px 0 12px; font-family: var(--font-heading); font-size: .76rem; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase; color: var(--fr-vert); position: relative; padding-top: 16px;
}
.cf-hero__surtitre::before{ content: ''; position: absolute; left: 0; top: 0; width: 30px; height: 3px; background: var(--fr-vert-clair); }
.cf-hero h1{
font-family: var(--font-heading); font-weight: 800; color: var(--navy);
font-size: clamp(1.7rem, 3.2vw, 2.5rem); line-height: 1.17; margin: 0 0 16px; max-width: none;
}
.cf-hero h1 span{ color: var(--navy); }
.cf-hero__chapo{ color: #333A5C; font-size: 1rem; line-height: 1.7; margin: 0 0 24px; max-width: 40ch; }
.cf-hero__actions{ display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.cf-hero__lien{
font-family: var(--font-heading); font-weight: 700; font-size: .95rem; color: var(--fr-bleu);
text-decoration: none; border-bottom: 2px solid transparent;
}
.cf-hero__lien:hover{ border-bottom-color: var(--fr-bleu); }
.cf-hero__jetons{
list-style: none; margin: 26px 0 0; padding: 0; display: flex; gap: 18px;
position: absolute; right: 0; bottom: -4px;
}
.cf-hero__jetons li{
width: 96px; height: 96px; border-radius: 14px; background: #fff; color: var(--fr-bleu);
display: flex; align-items: center; justify-content: center; box-shadow: 0 16px 34px rgba(30, 26, 107, .14);
}
.cf-nav{ background: #fff; border-bottom: 1px solid #EEF2FA; }
.cf-nav ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 52px; }
.cf-nav a{
display: inline-flex; align-items: center; gap: 10px; padding: 18px 2px;
font-family: var(--font-heading); font-weight: 600; font-size: .95rem; color: #4A4E66;
text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px;
transition: color .2s ease, border-color .2s ease;
}
.cf-nav a:hover{ color: var(--navy); border-bottom-color: var(--fr-vert-clair); }
.cf-nav svg{ color: var(--fr-bleu); }
.cf-comprendre{ background: #fff; padding: 52px 0 56px; }
.cf-comprendre__int{ display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 52px; align-items: center; }
.cf-comprendre h2{
font-family: var(--font-heading); font-weight: 800; color: var(--navy);
font-size: clamp(1.35rem, 2.2vw, 1.85rem); line-height: 1.24; margin: 0 0 18px;
position: relative; padding-bottom: 16px; max-width: 20ch;
}
.cf-comprendre h2::after{ content: ''; position: absolute; left: 0; bottom: 0; width: 32px; height: 3px; background: var(--fr-vert-clair); }
.cf-comprendre__texte p{ color: #333A5C; line-height: 1.75; font-size: .96rem; margin: 0 0 14px; }
.cf-comprendre__texte a{ color: var(--fr-bleu); }
.cf-cycle{ list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.cf-cycle__etape a{
display: grid; justify-items: center; gap: 8px; text-align: center; text-decoration: none;
background: #fff; border: 1px solid #E4EAF6; padding: 28px 16px 26px; height: 100%;
transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.cf-cycle__etape:first-child a{ border-radius: 14px 0 0 14px; }
.cf-cycle__etape:last-child a{ border-radius: 0 14px 14px 0; }
.cf-cycle__etape:not(:first-child) a{ border-left: 0; }
.cf-cycle__etape a:hover{ border-color: var(--fr-bleu-pale); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(30, 26, 107, .08); }
.cf-cycle__etape.est-actif a{ background: #F7FAFF; border-color: #CBD8F2; }
.cf-cycle__picto{
width: 54px; height: 54px; border-radius: 50%; background: #E8F6F1; color: var(--fr-bleu);
display: flex; align-items: center; justify-content: center;
}
.cf-cycle__etape.est-actif .cf-cycle__picto{ background: var(--fr-vert-clair); color: #0C2A34; }
.cf-cycle__code{ font-family: var(--font-heading); font-weight: 800; color: var(--fr-bleu); font-size: 1.15rem; line-height: 1.25; }
.cf-cycle__role{ color: #4A4E66; font-size: .92rem; }
.cf-preparer{ background: var(--fr-degrade-gamme); padding: 52px 0 56px; }
.cf-preparer__int{ display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: start; }
.cf-preparer__int--seul{ grid-template-columns: 1fr; }
.cf-preparer__int--seul .cf-preparer__texte{ max-width: 80ch; }
.cf-preparer__int--seul h2{ max-width: 32ch; }
.cf-preparer h2{
font-family: var(--font-heading); font-weight: 800; color: var(--navy);
font-size: clamp(1.3rem, 2.1vw, 1.75rem); line-height: 1.25; margin: 0 0 16px; max-width: 22ch;
}
.cf-preparer__texte p{ color: #4A4E66; line-height: 1.7; font-size: .94rem; margin: 0 0 14px; }
.cf-preparer__texte a{ color: var(--fr-bleu); }
.cf-points{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.cf-point{
background: #fff; border: 1px solid #E4EAF6; border-radius: 14px; padding: 22px 24px;
display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 18px; align-items: start;
box-shadow: 0 8px 22px rgba(30, 26, 107, .05);
}
.cf-point__picto{
width: 54px; height: 54px; border-radius: 12px; background: #F1F6FF; color: var(--fr-bleu);
display: flex; align-items: center; justify-content: center;
}
.cf-point h3{ font-family: var(--font-heading); font-weight: 700; color: var(--fr-bleu); font-size: 1rem; margin: 0 0 6px; }
.cf-point p{ color: #4A4E66; line-height: 1.6; font-size: .9rem; margin: 0; }
.cf-logiciel{ background: var(--fr-degrade-gamme); padding: 0 0 52px; }
.cf-logiciel__carte{
background: #2A2586; border-radius: 18px;
padding: 40px 44px 36px; color: #fff; position: relative; overflow: hidden;
}
.cf-logiciel__carte::before{ content: ''; position: absolute; left: 44px; top: 24px; width: 34px; height: 3px; background: var(--fr-turquoise); }
.cf-logiciel h2{
font-family: var(--font-heading); font-weight: 800; color: #fff;
font-size: clamp(1.3rem, 2.1vw, 1.75rem); line-height: 1.25; margin: 16px 0 14px; max-width: 40ch;
text-wrap: balance;
}
.cf-logiciel__texte{ color: #D9DCF3; line-height: 1.7; font-size: .94rem; margin: 0 0 12px; max-width: 78ch; }
.cf-logiciel__texte a{ color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.cf-atouts{ list-style: none; margin: 28px 0 30px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.cf-atouts li{ display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 18px; align-items: start; }
.cf-atouts__picto{
width: 60px; height: 60px; border-radius: 12px; background: #fff; color: var(--fr-bleu);
display: flex; align-items: center; justify-content: center;
}
.cf-atouts h3{ font-family: var(--font-heading); font-weight: 700; color: #fff; font-size: 1rem; margin: 4px 0 6px; }
.cf-atouts p{ color: #C9CDEC; font-size: .88rem; line-height: 1.55; margin: 0; }
.cf-btn-vert{ background: var(--fr-turquoise); border: 2px solid var(--fr-turquoise); color: #0C2A34; }
.cf-btn-vert:hover{ background: #0FB8A6; border-color: #0FB8A6; color: #06232C; }
.cf-cadres{ background: #fff; padding: 52px 0 46px; scroll-margin-top: 96px; }
.cf-cadres__int{ display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: 48px; align-items: start; }
.cf-cadres h2{
font-family: var(--font-heading); font-weight: 800; color: var(--navy);
font-size: clamp(1.3rem, 2.1vw, 1.75rem); line-height: 1.25; margin: 0 0 16px; max-width: 18ch;
position: relative; padding-bottom: 16px;
}
.cf-cadres h2::after{ content: ''; position: absolute; left: 0; bottom: 0; width: 32px; height: 3px; background: var(--fr-vert-clair); }
.cf-cadres__texte p{ color: #4A4E66; line-height: 1.7; font-size: .93rem; margin: 0 0 12px; }
.cf-cadres__liste ul{ list-style: none; margin: 0 0 18px; padding: 0; border: 1px solid #E9EEF9; border-radius: 14px; }
.cf-fichier{
display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
padding: 14px 20px; border-bottom: 1px solid #EEF2FA;
}
.cf-fichier:last-child{ border-bottom: 0; }
.cf-fichier__picto{ flex: 0 0 auto; color: var(--fr-bleu); display: flex; }
.cf-fichier__nom{ flex: 1 1 220px; font-family: var(--font-heading); font-weight: 600; color: var(--navy); font-size: .95rem; line-height: 1.4; }
.cf-fichier__variantes{ display: inline-flex; align-items: center; gap: 12px; flex: 0 1 auto; }
.cf-fichier__variantes i{ color: #C9CFE4; font-style: normal; }
.cf-fichier__variantes a{
font-family: var(--font-heading); font-weight: 600; font-size: .86rem; color: var(--fr-bleu);
text-decoration: none; border-bottom: 1px solid #BFD0F0;
}
.cf-fichier__variantes a:hover{ border-bottom-color: var(--fr-bleu); }
.cf-fichier__ext{
flex: 0 0 auto; border: 1px solid var(--fr-vert-clair); border-radius: 999px; padding: 3px 12px;
font-family: var(--font-heading); font-weight: 700; font-size: .72rem; color: var(--fr-vert);
}
.cf-fichier__lien{
flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; color: var(--navy);
display: flex; align-items: center; justify-content: center; transition: background-color .2s ease, color .2s ease;
}
.cf-fichier__lien:hover{ background: var(--fr-bleu); color: #fff; }
.cf-cadres__tous{
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--font-heading); font-weight: 700; font-size: .93rem; color: var(--fr-bleu); text-decoration: none;
border-bottom: 2px solid transparent;
}
.cf-cadres__tous:hover{ border-bottom-color: var(--fr-bleu); }
.cf-voisins{ background: #fff; padding: 0 0 46px; }
.cf-voisins ul{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.cf-voisin{
display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 20px; align-items: center;
background: #fff; border: 1px solid #E4EAF6; border-radius: 14px; padding: 22px 26px; text-decoration: none;
transition: border-color .2s ease, transform .2s ease;
}
.cf-voisin:hover{ border-color: var(--fr-bleu-pale); transform: translateY(-2px); }
.cf-voisin__picto{
width: 64px; height: 64px; border-radius: 50%; background: #E8F6F1; color: var(--fr-bleu);
display: flex; align-items: center; justify-content: center;
}
.cf-voisin__titre{ display: block; font-family: var(--font-heading); font-weight: 700; color: var(--navy); font-size: 1.05rem; }
.cf-voisin__role{ display: block; color: #4A4E66; font-size: .9rem; margin-top: 4px; }
.cf-voisin__fleche{ color: var(--navy); font-size: 1.25rem; }
.cf-final{ background: #2A2586; padding: 44px 0 48px; text-align: center; }
.cf-final h2{
font-family: var(--font-heading); font-weight: 800; color: #fff;
font-size: clamp(1.35rem, 2.3vw, 1.9rem); line-height: 1.25; margin: 0 auto 22px; max-width: 22ch;
}
@media (max-width: 1180px){
.cf-hero__texte{ max-width: 54%; }
.cf-hero__jetons li{ width: 80px; height: 80px; }
.cf-comprendre__int, .cf-preparer__int, .cf-cadres__int{ grid-template-columns: 1fr; gap: 30px; }
.cf-comprendre h2, .cf-preparer h2, .cf-cadres h2{ max-width: none; }
}
@media (max-width: 900px){
.cf-hero__photo{ width: 100%; opacity: .28; }
.cf-hero__texte{ max-width: none; }
.cf-hero__jetons{ position: static; }
.cf-atouts{ grid-template-columns: 1fr; gap: 18px; }
.cf-points{ grid-template-columns: 1fr; }
.cf-voisins ul{ grid-template-columns: 1fr; }
.cf-logiciel__carte{ padding: 28px 24px 26px; }
.cf-logiciel__carte::before{ left: 24px; }
.cf-nav ul{ gap: 4px 26px; }
}
@media (max-width: 620px){
.cf-cycle{ grid-auto-flow: row; grid-auto-columns: auto; }
.cf-cycle__etape:first-child a{ border-radius: 14px 14px 0 0; }
.cf-cycle__etape:last-child a{ border-radius: 0 0 14px 14px; }
.cf-cycle__etape:not(:first-child) a{ border-left: 1px solid #E4EAF6; border-top: 0; }
.cf-hero__jetons li{ width: 68px; height: 68px; }
.cf-fichier{ padding: 14px; }
.cf-fichier__nom{ flex-basis: 100%; }
}
/* ============================================================
Pages légales — mentions légales et CGU. Portée : .jur-*
Même grammaire que les pages documentaires : bandeau, sommaire
collant, sections numérotées.
============================================================ */
.jur-hero{
background: linear-gradient(120deg, #E4EDFE 0%, #EEF4FF 58%, #F6F9FF 100%);
padding: 30px 0 42px; position: relative; overflow: hidden;
}
.jur-hero__int{ display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 40px; align-items: center; }
.jur-hero__surtitre{
margin: 16px 0 12px; font-family: var(--font-heading); font-size: .76rem; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase; color: var(--navy); position: relative; padding-top: 16px;
}
.jur-hero__surtitre::before{ content: ''; position: absolute; left: 0; top: 0; width: 30px; height: 3px; background: var(--fr-vert-clair); }
.jur-hero h1{
font-family: var(--font-heading); font-weight: 800; color: var(--navy);
font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1.16; margin: 0 0 16px; max-width: none;
}
.jur-hero h1 span{ color: var(--fr-bleu-clair); }
.jur-hero__chapo{ color: #333A5C; font-size: 1rem; line-height: 1.7; margin: 0 0 14px; max-width: 58ch; }
.jur-hero__maj{ color: #5B628A; font-size: .86rem; margin: 0; }
.jur-hero__visuel{ display: flex; justify-content: flex-end; }
.jur-hero__sceau{
width: 108px; height: 108px; border-radius: 50%; background: #fff; color: var(--fr-bleu);
display: flex; align-items: center; justify-content: center; box-shadow: 0 18px 38px rgba(30, 26, 107, .13);
position: relative;
}
.jur-hero__sceau::after{
content: ''; position: absolute; inset: -9px; border-radius: 50%;
border: 2px dashed #CBD8F2;
}
.jur-corps{ background: #fff; padding: 46px 0 52px; }
.jur-corps__int{ display: grid; grid-template-columns: 262px minmax(0, 1fr); gap: 48px; align-items: start; }
.jur-sommaire{
background: var(--fr-degrade-gamme); border: 1px solid #E4EAF6; border-radius: 14px; padding: 22px 20px;
position: sticky; top: 108px;
}
.jur-sommaire__titre{
font-family: var(--font-heading); font-weight: 700; color: var(--navy);
font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; margin: 0 0 14px;
}
.jur-sommaire ol{ list-style: none; margin: 0; padding: 0; counter-reset: jur; display: grid; gap: 2px; }
.jur-sommaire li{ counter-increment: jur; }
.jur-sommaire a{
display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; align-items: baseline;
padding: 7px 8px; border-radius: 7px; text-decoration: none;
color: var(--navy); font-size: .89rem; line-height: 1.45;
transition: background-color .2s ease;
}
.jur-sommaire a::before{
content: counter(jur, decimal-leading-zero);
font-family: var(--font-heading); font-weight: 700; font-size: .74rem; color: var(--fr-bleu-clair);
font-variant-numeric: tabular-nums;
}
.jur-sommaire a:hover{ background: #fff; }
.jur-texte{ display: grid; gap: 34px; }
.jur-bloc{ scroll-margin-top: 104px; }
.jur-bloc h2{
display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: baseline;
font-family: var(--font-heading); font-weight: 800; color: var(--navy);
font-size: clamp(1.2rem, 2vw, 1.55rem); line-height: 1.25; margin: 0 0 16px;
padding-bottom: 14px; border-bottom: 1px solid #EEF2FA;
}
.jur-bloc__num{
font-size: .8rem; font-weight: 700; color: var(--fr-vert); font-variant-numeric: tabular-nums;
letter-spacing: .04em;
}
.jur-bloc__corps{ padding-left: 58px; color: #333A5C; line-height: 1.78; font-size: .96rem; }
.jur-bloc__corps h3{
font-family: var(--font-heading); font-weight: 700; color: var(--navy);
font-size: 1rem; margin: 22px 0 8px;
}
.jur-bloc__corps h3:first-child{ margin-top: 0; }
.jur-bloc__corps p{ margin: 0 0 14px; max-width: 74ch; }
.jur-bloc__corps p:last-child{ margin-bottom: 0; }
.jur-bloc__corps a{ color: var(--fr-bleu); }
.jur-bloc__corps code{
font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .86em;
background: var(--fr-degrade-gamme); border: 1px solid #E4EAF6; border-radius: 5px;
padding: 1px 6px; color: var(--navy);
}
.jur-bloc__corps ul{ margin: 0 0 14px; padding-left: 20px; }
.jur-bloc__corps li{ margin-bottom: 6px; }
.jur-bloc__corps a:hover{ text-decoration: underline; text-underline-offset: 3px; }
.jur-fin{ background: #fff; padding: 0 0 52px; }
.jur-fin__carte{
background: #2A2586; border-radius: 18px; padding: 30px 38px;
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 36px; color: #fff;
position: relative;
}
.jur-fin__carte::before{ content: ''; position: absolute; left: 38px; top: 20px; width: 32px; height: 3px; background: var(--fr-turquoise); }
.jur-fin h2{ font-family: var(--font-heading); font-weight: 700; color: #fff; font-size: clamp(1.15rem, 1.9vw, 1.5rem); margin: 12px 0 6px; }
.jur-fin p{ color: #D9DCF3; margin: 0; font-size: .94rem; }
@media (max-width: 1080px){
.jur-hero__int{ grid-template-columns: 1fr; }
.jur-hero__visuel{ display: none; }
.jur-corps__int{ grid-template-columns: 218px minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 860px){
.jur-corps__int{ grid-template-columns: 1fr; }
.jur-sommaire{ position: static; }
.jur-bloc__corps{ padding-left: 0; }
.jur-bloc h2{ grid-template-columns: 34px minmax(0, 1fr); gap: 10px; }
.jur-fin__carte{ padding: 24px 22px; }
.jur-fin__carte::before{ left: 22px; }
}
/* Pictogrammes rendus cliquables (retour client du 02/09). Le lien reprend la
composition de la case et occupe toute sa surface : rien ne bouge à l'œil,
seul le survol se signale.
⛔ Pas de « display: contents » : le lien n'aurait plus de boîte, donc plus
de zone cliquable exploitable ni de contour de focus. */
.nl-hebergement__lien,
.nl-etape__lien{
display: grid; justify-items: center; gap: 14px; width: 100%; height: 100%;
color: inherit; text-decoration: none; border-radius: 10px; padding: 4px;
}
.nl-hebergement__lien:hover .nl-hebergement__nom,
.nl-etape__lien:hover .nl-etape__nom{ color: var(--fr-bleu-clair); }
.nl-hebergement__lien:hover .nl-hebergement__picto,
.nl-etape__lien:hover .nl-etape__picto{ transform: translateY(-2px); }
.nl-hebergement__picto,
.nl-etape__picto{ transition: transform .2s ease; }
.nl-hebergement__lien:focus-visible,
.nl-etape__lien:focus-visible{ outline: 2px solid var(--fr-bleu-clair); outline-offset: 3px; }
/* Les cases ne se dessinent plus en grille : c'est le lien qui la porte. */
.nl-hebergements li,
.nl-etapes li{ display: block; }
.op-mode{ scroll-margin-top: 104px; }
.ac-reperes, .ac-formation, .ac-reponses{ scroll-margin-top: 96px; }
/* Le texte de présentation repris du .com (retour client du 02/09).
Deux colonnes plutôt qu'une colonne centrée : la page respire mieux et le
bloc cesse de flotter entre deux sections. */
}
/* Provenance des cadres (retour client du 02/09). */
.tc-provenance{
color: #5B628A; font-size: .9rem; line-height: 1.65; margin: 0 0 20px; max-width: 84ch;
padding-left: 14px; border-left: 3px solid var(--fr-vert-clair);
}
/* Ticket #107 : sans image à la une, l'article reprenait le visuel de partage —
le logo Dir IPS sur fond bleu — qui se fondait dans la carte bleue. Le repli
se pose désormais sur un fond clair, et le logo n'est plus rogné. */
.visuel-repli{
object-fit: contain !important;
background: linear-gradient(140deg, #F1F6FF 0%, #E4EDFE 100%);
padding: 11% 20%;
}
/* Ticket #101 : le bloc « Pour aller plus loin » se lit mieux justifié. */
.tc-contexte__corps p{ text-align: justify; hyphens: auto; }
/* Textes repris du .com sur les fiches produit (tickets #78 et #88).
⛔ Première version : dix paragraphes justifiés à la suite, un mur.
Le premier paragraphe sert maintenant de chapô, les autres se lisent en
deux colonnes de mesure courte, sans justification — elle creusait des
rivières entre les mots. */
/* Une seule capture : le cadre n'a plus à occuper une demi-page. */
.lg-pratique__int:has(.lg-visionneuse) .lg-visionneuse{ max-width: 100%; }
.rc-texte{
background: linear-gradient(180deg, #FFFFFF 0%, #F4F7FD 34%, #F1F5FC 100%);
padding: 66px 0 72px;
}
.rc-texte__int{
display: grid; grid-template-columns: minmax(0, 236px) minmax(0, 64ch);
gap: 0 72px; align-items: start; justify-content: center;
}
/* Le titre accompagne la lecture au lieu de la surplomber : même parti que
.lg-grille__tete et .ent-histoire__tete, 108 px sous l'en-tête collant. */
.rc-texte__rail{ position: sticky; top: 108px; }
.rc-texte h2{
font-family: var(--font-heading); font-weight: 800; color: var(--navy);
font-size: clamp(1.32rem, 2vw, 1.72rem); line-height: 1.2; margin: 0;
position: relative; padding-bottom: 18px; text-wrap: balance;
}
.rc-texte h2::after{
content: ''; position: absolute; left: 0; bottom: 0;
width: 34px; height: 3px; background: var(--fr-vert-clair);
}
/* Le premier paragraphe du .com sert de chapeau : c'est lui qui définit le
logiciel, les suivants le détaillent. */
.rc-texte__chapo{
margin: 0 0 34px; padding-left: 24px; border-left: 3px solid var(--fr-vert-clair);
color: var(--navy); font-weight: 500; font-size: clamp(1.05rem, 1.5vw, 1.16rem);
line-height: 1.62; max-width: 58ch;
}
.rc-texte__prose p{ color: #333A5C; font-size: .985rem; line-height: 1.82; margin: 0 0 1.35em; }
.rc-texte__prose p:last-child{ margin-bottom: 0; }
.rc-texte__liste{ margin: 0 0 1.35em; padding: 0; list-style: none; }
.rc-texte__liste li{
color: #333A5C; font-size: .985rem; line-height: 1.78;
margin: 0 0 .85em; padding-left: 22px; position: relative;
}
.rc-texte__liste li:last-child{ margin-bottom: 0; }
.rc-texte__liste li::before{
content: ''; position: absolute; left: 0; top: .72em;
width: 8px; height: 2px; background: var(--fr-vert-clair);
}
/* Sigles et technologies en relief, première occurrence seulement : c'est le
seul repère visuel possible sur un texte qu'on n'a pas le droit de découper. */
.rc-texte__cle{ color: var(--navy); font-weight: 600; }
@media (max-width: 1000px){
.rc-texte__int{ grid-template-columns: 1fr; gap: 22px; }
.rc-texte__rail{ position: static; }
.rc-texte__chapo{ margin-bottom: 26px; }
}
/* ── Passages repris du .com, en composition rythmée ────────────────────
⛔ Le texte du client ne se découpe pas : le rythme vient des contenants,
carte claire, deux colonnes, bande indigo, jamais d'un mot ajouté. */
.rc-detail{ background: linear-gradient(180deg, #FFFFFF 0%, #F7F9FE 100%); padding: 60px 0 66px; }
.rc-detail > .container + .container{ margin-top: 26px; }
.rc-detail__titre{
font-family: var(--font-heading); font-weight: 800; color: var(--navy);
font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.16; margin: 0 0 22px;
max-width: 22ch; text-wrap: balance;
}
.rc-detail__titre span{ display: block; color: var(--fr-bleu-clair); }
.rc-detail__chapo{
color: #333A5C; font-size: 1.02rem; line-height: 1.72; margin: 0;
max-width: 78ch;
}
/* La tuile du pictogramme : carré blanc, ombre douce, liseré vert en pied. */
.rc-tuile{
flex: 0 0 auto; width: 64px; height: 64px; border-radius: 16px; background: #fff;
display: grid; place-items: center; color: var(--fr-bleu); position: relative;
box-shadow: 0 10px 22px -14px rgba(23, 20, 63, .45);
}
.rc-tuile::after{
content: ''; position: absolute; left: 10px; right: 10px; bottom: -3px; height: 3px;
border-radius: 3px; background: var(--fr-vert-clair); opacity: .85;
}
.rc-tuile svg{ width: 28px; height: 28px; }
.rc-encart{
display: flex; align-items: center; gap: 30px;
background: #F2F6FD; border-radius: 18px; padding: 26px 34px;
}
.rc-encart p{ color: #333A5C; font-size: .99rem; line-height: 1.75; margin: 0; }
.rc-encart--liste{ align-items: flex-start; }
.rc-encart--liste > div{ display: grid; gap: 16px; }
.rc-liste{ list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rc-liste li{
color: #333A5C; font-size: .97rem; line-height: 1.7; padding-left: 22px; position: relative;
}
.rc-liste li::before{
content: ''; position: absolute; left: 0; top: .74em; width: 9px; height: 2px;
border-radius: 2px; background: var(--fr-vert-clair);
}
.rc-bande .rc-liste li{ color: #D9DEF6; }
.rc-colonnes--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.rc-colonnes--3 .rc-colonne{ padding-left: 26px; }
.rc-colonnes{
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px;
}
.rc-colonne{ display: flex; align-items: flex-start; gap: 22px; padding-left: 34px; }
.rc-colonne:first-child{ padding-left: 0; }
.rc-colonne + .rc-colonne{ border-left: 1px solid #D7DEF1; }
.rc-colonne p{ color: #333A5C; font-size: .97rem; line-height: 1.72; margin: 0; }
.rc-colonne .rc-tuile{ width: 58px; height: 58px; border-radius: 14px; }
.rc-colonne .rc-tuile svg{ width: 26px; height: 26px; }
/* La bande indigo casse le fil des cartes claires ; une seule par passage. */
.rc-bande{ background: var(--fr-indigo); padding: 44px 0 46px; margin: 34px 0; }
.rc-bande__titre{
font-family: var(--font-heading); font-weight: 700; color: #fff;
font-size: clamp(1.12rem, 1.9vw, 1.4rem); line-height: 1.3; margin: 0 0 28px;
}
.rc-bande .rc-colonne p{ color: #D9DEF6; }
.rc-bande .rc-colonne + .rc-colonne{ border-left-color: rgba(255, 255, 255, .18); }
/* Le filet court sur toute la largeur ; seul le texte garde sa mesure. */
.rc-bande__pied{ margin: 30px 0 0; padding-top: 26px; }
.rc-bande__pied p{ color: #D9DEF6; font-size: .97rem; line-height: 1.72; margin: 0; max-width: 86ch; }
.rc-bande .rc-texte__cle,
.rc-bande__pied .rc-texte__cle{ color: #fff; }
@media (max-width: 860px){
.rc-colonnes,
.rc-colonnes--3{ grid-template-columns: 1fr; gap: 26px; }
.rc-colonnes--3 .rc-colonne{ padding-left: 0; }
.rc-colonne{ padding-left: 0; }
.rc-colonne + .rc-colonne{ border-left: 0; border-top: 1px solid #D7DEF1; padding-top: 26px; }
.rc-bande .rc-colonne + .rc-colonne{ border-top-color: rgba(255, 255, 255, .18); }
.rc-encart{ flex-direction: column; align-items: flex-start; gap: 18px; padding: 24px 22px; }
}
/* « Le point de vue de clients » — rubrique reprise du .com. */
/* Fond blanc : la bande équipe qui précède est déjà claire. */
.lg-avis{ background: #fff; padding: 52px 0 56px; }
.lg-avis h2{
font-family: var(--font-heading); font-weight: 800; color: var(--navy);
font-size: clamp(1.35rem, 2.2vw, 1.85rem); margin: 0 0 26px;
position: relative; padding-bottom: 16px;
}
.lg-avis h2::after{ content: ''; position: absolute; left: 0; bottom: 0; width: 32px; height: 3px; background: var(--fr-vert-clair); }
/* Le nombre de témoignages varie d'une fiche à l'autre : neuf sur
Gestionnaire, quatre sur DirIgami Facturation. En grille de trois, la
quatrième carte restait seule à gauche. En ligne souple centrée, une
rangée incomplète se centre d'elle-même, quel que soit le nombre. */
.lg-avis__liste{
list-style: none; margin: 0; padding: 0;
display: flex; flex-wrap: wrap; justify-content: center; gap: 22px;
}
.lg-avis__carte{ flex: 1 1 300px; max-width: 382px; }
.lg-avis__carte a{
display: grid; gap: 8px; height: 100%; text-decoration: none;
background: #fff; border: 1px solid #E4EAF6; border-radius: 14px; padding: 24px 26px;
box-shadow: 0 8px 22px rgba(30, 26, 107, .05);
transition: border-color .2s ease, transform .2s ease;
}
.lg-avis__carte a:hover{ border-color: var(--fr-bleu-pale); transform: translateY(-2px); }
.lg-avis__guillemets{ font-family: Georgia, 'Times New Roman', serif; font-size: 2.2rem; line-height: .8; color: var(--fr-vert-clair); }
.lg-avis__titre{ font-family: var(--font-heading); font-weight: 700; color: var(--navy); font-size: 1rem; line-height: 1.35; }
.lg-avis__extrait{ color: var(--dh-muted, #4A4E66); font-size: .9rem; line-height: 1.6; }
.lg-avis__lien{
font-family: var(--font-heading); font-weight: 700; font-size: .88rem; color: var(--fr-bleu); margin-top: 4px;
}
.lg-avis__lien::after{ content: ' →'; }
@media (max-width: 640px){ .lg-avis__carte{ flex-basis: 100%; max-width: none; } }
/* Grilles de fonctionnalités reprises du .com (tickets #78, #80 et #88).
⛔ Première version : trois grilles de cartes blanches à la suite, sans
rythme. Reprises avec la grammaire du site — colonne de titre à gauche et
cartes à droite, comme .nl-integration ou .sa-services, et bande indigo
pour la grille de bénéfices, comme .nl-equipe et .ac-reponses. */
.lg-grille{ background: var(--fr-degrade-gamme); padding: 62px 0 66px; }
.lg-grille + .lg-grille{ border-top: 1px solid #E4EAF6; }
.lg-grille__int{
display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
gap: 44px 56px; align-items: start;
}
.lg-grille__tete{ position: sticky; top: 108px; }
.lg-grille__tete h2{
font-family: var(--font-heading); font-weight: 800; color: var(--navy);
font-size: clamp(1.35rem, 2.2vw, 1.9rem); line-height: 1.2; margin: 8px 0 0;
text-wrap: balance; position: relative; padding-bottom: 18px;
}
.lg-grille__tete h2::after{ content: ''; position: absolute; left: 0; bottom: 0; width: 34px; height: 3px; background: var(--fr-vert-clair); }
.lg-grille__chapo{ color: #4A4E66; font-size: .96rem; line-height: 1.7; margin: 16px 0 0; max-width: 40ch; }
.lg-grille__liste{
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px;
}
.lg-bloc-fonc{
background: #fff; border: 1px solid #E4EAF6; border-radius: 14px; padding: 24px 24px 22px;
box-shadow: 0 8px 22px rgba(30, 26, 107, .05);
}
.lg-bloc-fonc__picto{
display: flex; width: 50px; height: 50px; border-radius: 12px; margin-bottom: 14px;
align-items: center; justify-content: center;
background: var(--fr-degrade-gamme); color: var(--fr-bleu);
}
.lg-bloc-fonc__picto svg{ width: 25px; height: 25px; }
.lg-bloc-fonc h3{
font-family: var(--font-heading); font-weight: 700; color: var(--navy);
font-size: 1.02rem; line-height: 1.3; margin: 0 0 12px; padding-bottom: 12px;
border-bottom: 1px solid #EEF2FA;
}
.lg-bloc-fonc ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lg-bloc-fonc ul li{ color: #4A4E66; font-size: .9rem; line-height: 1.5; padding-left: 16px; position: relative; }
.lg-bloc-fonc ul li::before{
content: ''; position: absolute; left: 0; top: .55em;
width: 6px; height: 6px; border-radius: 50%; background: var(--fr-vert-clair);
}
/* Variante indigo : la grille de bénéfices casse le rythme, comme ailleurs. */
.lg-grille--indigo{ background: #2A2586; }
.lg-grille--indigo .ent-surtitre{ color: var(--fr-turquoise); }
.lg-grille--indigo .lg-grille__tete h2{ color: #fff; }
.lg-grille--indigo .lg-grille__tete h2::after{ background: var(--fr-turquoise); }
.lg-grille--indigo .lg-grille__chapo{ color: #D9DCF3; }
.lg-grille--indigo .lg-grille__liste{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lg-grille--indigo .lg-bloc-fonc{
background: transparent; border: 0; box-shadow: none; padding: 0;
}
.lg-grille--indigo .lg-bloc-fonc__picto{ background: #fff; color: var(--fr-bleu); }
.lg-grille--indigo .lg-bloc-fonc h3{ color: #fff; border-bottom-color: rgba(255, 255, 255, .18); }
.lg-grille--indigo .lg-bloc-fonc ul li{ color: #C9CDEC; }
.lg-grille--indigo .lg-bloc-fonc ul li::before{ background: var(--fr-turquoise); }
@media (max-width: 1080px){
.lg-grille__int{ grid-template-columns: 1fr; gap: 26px; }
.lg-grille__tete{ position: static; }
.lg-grille__chapo{ max-width: none; }
}
@media (max-width: 700px){
.lg-grille__liste,
.lg-grille--indigo .lg-grille__liste{ grid-template-columns: 1fr; }
}
/* ====================================================================
ACCUEIL — retours du 01/09 posés sur le design de la v2
==================================================================== */
/* L'échéance était une bande pleine largeur sous le hero. Elle remonte
dans le hero, sous « Demander une démonstration ». */
.fr-echeance--hero{
display: block;
max-width: 620px;
margin: 26px 0 0;
background: rgba(255, 255, 255, .88);
border: 1px solid var(--fr-bleu-pale);
border-top: 3px solid var(--fr-turquoise);
border-radius: 12px;
box-shadow: 0 12px 30px -20px rgba(23, 18, 79, .5);
backdrop-filter: blur(2px);
}
.fr-echeance--hero .fr-echeance__int{ padding: 13px 20px; }
/* Dans le hero la bande est etroite : le lien passe a la ligne, cale a gauche. */
.fr-echeance--hero a{ margin-left: 0; }
/* « CTA peu visible » : le bouton était bleu sur l'indigo. */
.fr-actus .fr-btn--clair{ color: #fff; border-color: rgba(255,255,255,.75); }
.fr-actus .fr-btn--clair:hover{ background: #fff; color: var(--fr-indigo); border-color: #fff; }
/* Mention d'hébergement, sous le chapô de la gamme. */
.fr-gamme__hebergement{
margin: 34px 0 0; font-size: .95rem; color: #4A4E66; text-align: center;
}
/* « Bouton devenir un collaborateur » : le contour blanc se perdait dans
la colonne de liens du pied de page. */
.fr-pied__colonne a.fr-pied__collab{
background: var(--fr-vert); border: 2px solid var(--fr-vert); color: #0F2A44; font-weight: 700;
}
.fr-pied__colonne a.fr-pied__collab:hover{ background: #fff; border-color: #fff; color: var(--fr-indigo); }
@media (min-width: 981px){
/* « Réduire les écarts », noté quatre fois sur le document du 01/09.
Les valeurs relevées sur dirips.fr laissaient trop d'air entre les
bandes : le rythme vertical est resserré d'environ 30 %. */
.fr-hero, .fr-hero__int{ min-height: 780px; }
.fr-hero__int{ padding: 64px 0; }
.fr-enjeux{ padding: 68px 0 74px; }
.fr-gamme{ padding: 64px 0 68px; }
.fr-temoignages{ padding: 68px 0 64px; }
.fr-confiance{ padding: 56px 0 64px; }
.fr-actus{ padding: 68px 0 72px; }
.fr-newsletter{ padding: 56px 0; }
.fr-cta{ padding: 62px 0; }
/* La colonne de gauche des témoignages descendait bien plus bas que la
carte : on rapproche les deux, et les flèches rejoignent le bouton. */
.fr-temoignages__visuel{ max-width: 356px; }
.fr-temoignage{ padding: 40px 38px; }
.fr-temoignage blockquote{ font-size: 1.1rem; margin-top: 22px; padding-top: 22px; }
.fr-temoignages__bas{
display: flex; align-items: center; justify-content: space-between;
gap: 24px; margin-top: 26px;
}
.fr-temoignages__bas > .fr-btn{ margin-top: 0; }
.fr-temoignages__bas .carrousel__nav{ margin: 0; }
}
/* Défilement des rails horizontaux : la molette repart à la page. */
.fr-actus__piste,
.carrousel__piste,
.fr-temoignages__piste{
scroll-snap-type: x proximity;
scroll-behavior: auto;
overscroll-behavior-x: contain;
overscroll-behavior-y: auto;
touch-action: pan-x pan-y pinch-zoom;
}
/* Les deux lignes du .com sous le nom du logiciel, avec le même repère vert
que les piliers : c'est une étiquette, pas une description écourtée. */
.fr-carte__lignes{ list-style: none; margin: 14px 0 22px; padding: 0; }
.fr-carte__lignes li{
position: relative; padding-left: 20px; margin-bottom: 8px;
color: #4A4E66; line-height: 1.6;
}
.fr-carte__lignes li::before{
content: ''; position: absolute; left: 0; top: .6em;
width: 8px; height: 8px; border-radius: 50%; background: var(--fr-vert);
}
/* Les deux lignes de gamme que le .com pose sous le chapô du hero « Nos
logiciels ». Elles nomment les logiciels avant le premier écran. */
.nl-hero__gamme{ list-style: none; margin: 18px 0 0; padding: 0; }
.nl-hero__gamme li{
position: relative; padding-left: 22px; margin-bottom: 8px;
color: #3A4060; line-height: 1.6; font-size: .97rem;
}
.nl-hero__gamme li::before{
content: ''; position: absolute; left: 0; top: .58em;
width: 9px; height: 9px; border-radius: 50%; background: var(--fr-vert);
}
/* Titre d'encart : le .com coiffe certains paragraphes d'un intertitre. */
.rc-encart__titre{
margin: 0 0 10px; color: var(--fr-indigo);
font-size: 1.12rem; line-height: 1.35;
}
/* ====================================================================
À PROPOS — le bandeau des valeurs comme mardi (retour du 06/09)
==================================================================== */
/* Les quatre illustrations du client sont en teintes pâles : sur l'aplat
indigo elles s'éteignaient. Fond clair, comme sur la version qui leur
avait plu, et le nom de la valeur sous le dessin. */
.ent-valeurs{
background: linear-gradient(180deg, #F4F7FF 0%, #E8EEFF 100%);
color: var(--navy);
}
.ent-valeurs::before{ opacity: .07; }
.ent-valeurs__tete h2{ color: var(--fr-indigo); }
.ent-valeurs__tete h2 span{ color: var(--fr-vert); }
.ent-valeurs__tete p{ color: #4A4E66; }
.ent-valeurs__liste{
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 30px;
}
.ent-valeur{
display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px;
}
.ent-valeur__picto{
width: 150px; height: 150px; border-radius: 26px; padding: 14px;
background: #fff; box-shadow: 0 14px 30px rgba(42, 37, 134, .10);
}
.ent-valeur h3{
color: var(--fr-indigo); font-size: .96rem; letter-spacing: .12em;
text-transform: uppercase; margin: 0;
}
.ent-valeur p{ color: #4A4E66; font-size: .93rem; margin: 0; max-width: 260px; }
/* Les trois relations, sous le filet, suivent le fond clair. */
.ent-relations{ border-top-color: rgba(42, 37, 134, .14) !important; }
.ent-relation h3{ color: var(--fr-indigo) !important; }
.ent-relation p{ color: #4A4E66 !important; }
.ent-relation__icone{ color: var(--fr-bleu) !important; }
/* ====================================================================
BANNIÈRES ILLUSTRÉES — À propos et Nos partenaires (retour du 06/09)
==================================================================== */
/* La photo remplissait le cadre en le rognant. Une illustration se pose
entière, sur le fond clair de la bannière, comme sur la version de
mardi qui leur avait plu. */
.ent-hero__visuel--illus,
.part-hero__visuel--illus{
background: transparent; border-radius: 0; overflow: visible;
display: flex; align-items: center; justify-content: center;
top: 0; padding: 24px 0 24px 24px;
/* L'illustration filait jusqu'au bord de l'écran alors que le texte
s'arrête à la gouttière : elle se cale sur la même marge que le
contenu, comme les autres bannières. */
right: max(24px, calc(50% - 596px));
}
.ent-hero__visuel--illus img,
.part-hero__visuel--illus img{
width: 100%; height: auto; max-height: 400px; object-fit: contain;
}
/* La vague décorative dépasse la bannière sobre, plus courte que les autres,
et vient couvrir les cartes du dessous. Elle y reste contenue. */
.hero-page--sobre{ overflow: clip; }
/* Le renvoi vers Gestionnaire et la citation, sortis du dernier panneau
dépliant : sur le .com ils sont posés à part, sous la liste. */
.tc-hors-pli{
margin: 26px 0 0; padding: 26px 28px;
background: #fff; border: 1px solid var(--fr-bleu-pale); border-radius: 16px;
}
.tc-hors-pli > p{ margin: 0 0 14px; color: #3A4060; line-height: 1.7; }
.tc-hors-pli blockquote{
margin: 0; padding-left: 18px; border-left: 3px solid var(--fr-vert);
color: #3A4060; font-style: italic; line-height: 1.7;
}
.tc-hors-pli blockquote p{ margin: 0 0 8px; }
.tc-hors-pli blockquote p:last-child{ margin: 0; font-style: normal; font-size: .92rem; }
/* Logos partenaires cliquables : le client nous a donné l'adresse de chaque
site le 10/09. Le nom et le logo forment un seul lien. */
.part-site{
display: grid; justify-items: center; align-content: center; gap: 12px;
text-decoration: none; color: inherit;
}
.part-site img{ transition: transform .2s ease; }
.part-site:hover img,
.part-site:focus-visible img{ transform: translateY(-2px); }
.part-site:hover span,
.part-site:focus-visible span{ color: var(--fr-bleu); }
.part-site:focus-visible{ outline: 2px solid var(--fr-bleu); outline-offset: 6px; border-radius: 10px; }
/* Un élément masqué par l'attribut hidden doit disparaître même si sa règle
lui donne un display (grid, flex…). Sans cela le filtre des témoignages
posait bien l'attribut, mais rien ne bougeait à l'écran. */
[hidden]{ display: none !important; }
/* Pagination des témoignages : même vocabulaire graphique que les filtres
juste au-dessus de la liste. */
.tm-pages{ display: flex; justify-content: center; gap: 8px; margin-top: 34px; flex-wrap: wrap; }
.tm-page{
min-width: 40px; height: 40px; padding: 0 12px; cursor: pointer;
border: 1px solid #DDE5F6; border-radius: 999px; background: #fff;
font-family: var(--font-heading); font-weight: 700; font-size: .9rem; color: var(--navy);
transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.tm-page:hover{ border-color: var(--fr-bleu); color: var(--fr-bleu); }
.tm-page.est-actif{ background: var(--navy); border-color: var(--navy); color: #fff; }
.tm-page:focus-visible{ outline: 2px solid var(--fr-bleu); outline-offset: 3px; }
/* Sept entrées d'accompagnement au lieu de trois : la grille se pave d'elle
même plutôt que de forcer trois colonnes. */
.nl-etapes{ display: flex; flex-wrap: wrap; justify-content: center; gap: 28px 22px; }
.nl-etapes li{ flex: 0 0 128px; }
.nl-etape__picto{ width: 66px; height: 66px; padding: 13px; }
.nl-etape__nom{ font-size: .92rem; }
@media (max-width: 980px){
.nl-etapes li{ flex: 0 0 116px; }
}
/* Les trois promesses étaient centrées chacune dans sa colonne : leurs titres
ne tombaient pas à la même hauteur. Elles s'alignent en haut. */
.lg-promesse{ align-items: start; }
.lg-promesse__picto{ margin-top: 2px; }
/* Les cartes de la gamme portent une description, plus une liste de mots-clés. */
.fr-carte__texte{
margin: 0 0 22px; color: #4A4E66; line-height: 1.6; font-size: .95rem;
}
/* Les flèches du carrousel de l'accueil : même pastille que sur les autres
carrousels, avec un état survolé lisible. */
.fr-temoignages .carrousel__fleche{ font-size: 1.1rem; line-height: 1; }
.carrousel__fleche:hover:not(:disabled){ background: var(--navy); color: #fff; border-color: var(--navy); }
.carrousel__fleche:focus-visible{ outline: 2px solid var(--fr-bleu); outline-offset: 3px; }
.carrousel__fleche:disabled{ opacity: .35; cursor: default; }
/* Les icônes de services viennent du .fr : ce sont des images, pas des SVG
au trait hérités de la couleur du texte. */
.nl-etape__picto img{ width: 100%; height: 100%; object-fit: contain; }
/* Bannière de liste avec illustration : l'image n'est pas une photo cadrée,
elle respire dans sa colonne. */
.hero-page__visuel--illus{ display: flex; align-items: center; justify-content: center; }
.dirips-2026 .hero-page__visuel--illus img,
.hero-page__visuel--illus img{
width: 100%; max-width: 520px; height: auto; border-radius: 0;
box-shadow: none; border: 0; background: transparent; object-fit: contain;
}
@media (max-width: 980px){
/* 12/09 : l'illustration reste visible sur mobile, en petit, comme le théâtre. */
.hero-page__visuel--illus{ display: flex; order: 2; margin: 8px auto 0; }
.hero-page__visuel--illus img, .dirips-2026 .hero-page__visuel--illus img{ max-width: 260px; height: auto; }
}
/* Citations des bulles de la bannière Témoignages. */
.tm-bulles li{ width: min(100%, 300px); padding: 16px 20px 14px; }
.tm-bulles li span{ margin-bottom: 2px; }
.tm-bulles li p{ margin: 0; color: #3A4060; font-size: .88rem; line-height: 1.55; }
.tm-bulle__qui{ margin-top: 10px !important; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.tm-bulle__qui strong{ font-family: var(--font-heading); font-weight: 700; color: var(--navy); font-size: .84rem; }
.tm-bulles li .tm-bulle__qui span{
font-family: var(--font-heading); font-weight: 600; font-size: .76rem; color: var(--fr-vert);
display: inline; margin: 0; line-height: inherit;
}
/* ============================================================
Page Dir IPS, remontée du 10/09 : photo + texte, illustration,
pied de secteurs. Portée : .di-qui, .di-duo__haut, .di-secteurs__pied
============================================================ */
.di-qui{ background: #fff; padding: 64px 0 56px; }
.di-qui__int{ display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 56px; align-items: center; }
.di-qui__photo{ position: relative; margin: 0; }
.di-qui__photo img{
display: block; width: 100%; height: 420px; object-fit: cover; object-position: 50% 40%;
border-radius: 22px; position: relative; z-index: 1;
box-shadow: 0 28px 60px -26px rgba(23, 20, 63, .35);
}
.di-qui__cadre{
position: absolute; inset: 22px -22px -22px 22px; border-radius: 22px;
border: 2px solid var(--fr-vert-clair); opacity: .7;
transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.di-qui__photo:hover .di-qui__cadre{ transform: translate(-6px, -6px); }
.di-qui__chapo{
font-family: var(--font-heading); font-weight: 600; color: var(--navy);
font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.45; margin: 0 0 26px; text-wrap: pretty;
}
.di-qui__points{ list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.di-qui__points li{ display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; align-items: start; }
.di-qui__points p{ margin: 0; color: var(--dh-text, #3A4060); line-height: 1.7; font-size: .96rem; }
.di-duo__haut{
display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
gap: 48px; align-items: center; margin-bottom: 36px;
}
.di-duo__intro h2{
font-family: var(--font-heading); font-weight: 700; color: #fff; text-align: left;
font-size: clamp(1.5rem, 2.3vw, 2rem); margin: 0 0 18px; position: relative; padding: 0 0 18px;
}
.di-duo__intro h2 span{ color: var(--fr-turquoise); }
.di-duo__intro h2::before{ content: none; }
.di-duo__intro h2::after{ content: ''; position: absolute; left: 0; bottom: 0; width: 34px; height: 3px; background: var(--fr-turquoise); }
.di-duo__intro p{ color: #D9DCF3; line-height: 1.75; margin: 0; font-size: .98rem; max-width: 56ch; }
.di-duo__illus{ display: flex; justify-content: center; }
.di-duo__illus img{
width: 100%; max-width: 440px; height: auto; filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .25));
animation: di-flotte 7s ease-in-out infinite;
}
@keyframes di-flotte{ 0%, 100%{ transform: translateY(0); } 50%{ transform: translateY(-12px); } }
.di-secteurs__pied{
list-style: none; margin: 30px 0 0; padding: 26px 0 0; border-top: 1px solid rgba(42, 37, 134, .12);
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 40px;
}
.di-secteurs__pied li{ display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; align-items: start; }
.di-secteurs__pied p{ margin: 0; color: var(--dh-text, #3A4060); line-height: 1.7; font-size: .95rem; }
.di-secteurs__pied .sa-service__lien{ margin-left: 4px; }
/* Cascade au défilement : les grilles de la page se révèlent carte après carte. */
.di-portes__liste .reveal, .di-familles .reveal, .di-duo__liste .reveal{ transition-duration: .7s; }
@media (max-width: 980px){
.di-qui__int{ grid-template-columns: 1fr; gap: 34px; }
.di-qui__photo img{ height: 280px; }
.di-qui__cadre{ inset: 14px -14px -14px 14px; }
.di-duo__haut{ grid-template-columns: 1fr; gap: 26px; }
.di-duo__illus img{ max-width: 300px; }
.di-secteurs__pied{ grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce){
.di-duo__illus img{ animation: none; }
.di-qui__cadre{ transition: none; }
}
/* ============================================================
Cartes de témoignages : citation en grand, signée, teintée par
logiciel. Remplace la carte « picto + titre + extrait » du 02/09.
============================================================ */
.tm-carte{
--tm-accent: var(--fr-bleu); --tm-accent-doux: #EEF0FF;
grid-template-columns: 1fr; gap: 0; padding: 30px 30px 24px; position: relative; overflow: hidden;
border-top: 4px solid var(--tm-accent);
}
.tm-carte.is-revealed{ transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, opacity .35s ease; transition-delay: 0s; }
.tm-carte--vert{ --tm-accent: var(--fr-vert); --tm-accent-doux: #EAF7F3; }
.tm-carte:hover{ transform: translateY(-5px); box-shadow: 0 22px 44px rgba(30, 26, 107, .13); }
.tm-carte__guillemet{
position: absolute; right: 22px; top: 6px; font-family: Georgia, 'Times New Roman', serif;
font-size: 6.5rem; line-height: 1; color: var(--tm-accent-doux); pointer-events: none;
transition: color .35s ease, transform .35s ease;
}
.tm-carte:hover .tm-carte__guillemet{ color: var(--tm-accent); opacity: .18; transform: translateY(-4px); }
.tm-carte .tm-carte__etiquette{
position: relative; z-index: 1; align-self: start; justify-self: start;
background: var(--tm-accent-doux); color: var(--tm-accent); margin-bottom: 16px;
}
.tm-carte__citation{
position: relative; z-index: 1; margin: 0 0 18px;
font-family: var(--font-heading); font-weight: 600; color: var(--navy);
font-size: 1.12rem; line-height: 1.45; text-wrap: pretty;
}
.tm-carte__citation::before{ content: '« '; color: var(--tm-accent); }
.tm-carte__citation::after{ content: ' »'; color: var(--tm-accent); }
.tm-carte__citation--repli{ font-weight: 500; font-size: 1rem; color: var(--dh-text, #3A4060); }
.tm-carte__citation--repli::before, .tm-carte__citation--repli::after{ content: none; }
.tm-carte__signature{
position: relative; z-index: 1; margin: 0 0 16px; padding-left: 14px; border-left: 3px solid var(--tm-accent);
display: grid; gap: 2px; font-size: .9rem; line-height: 1.45;
}
.tm-carte__signature strong{ font-family: var(--font-heading); font-weight: 700; color: var(--navy); font-size: .95rem; }
.tm-carte__role{ color: var(--dh-muted, #4A4E66); }
.tm-carte__ou{ font-family: var(--font-heading); font-weight: 700; color: var(--tm-accent); font-size: .82rem; letter-spacing: .02em; text-transform: uppercase; }
.tm-carte h3{
position: relative; z-index: 1; margin: auto 0 0; padding-top: 14px; border-top: 1px solid #EEF2FA;
font-family: var(--font-heading); font-weight: 600; font-size: .86rem; line-height: 1.4;
}
.tm-carte h3 a{ color: var(--fr-bleu); text-decoration: none; border-bottom: 2px solid transparent; transition: border-color .2s ease; }
.tm-carte h3 a::after{ content: ' →'; }
.tm-carte h3 a:hover{ border-bottom-color: var(--fr-bleu); }
/* La cascade ne doit pas faire attendre les dernières cartes d'une page. */
.tm-cartes .reveal{ transition-delay: calc(min(var(--i, 0), 5) * 90ms); transition-duration: .7s; }
@media (max-width: 980px){
.tm-carte{ padding: 26px 22px 20px; }
.tm-carte__guillemet{ font-size: 5rem; right: 14px; }
}
/* Tactile : un geste vertical commencé sur un rail horizontal doit faire
défiler la page, pas rester prisonnier du rail. L'accroche (snap) est ce
qui retient le geste sur mobile ; elle ne sert qu'à la souris. */
@media (pointer: coarse){
.fr-actus__piste,
.carrousel__piste,
.fr-temoignages__piste{
scroll-snap-type: none;
scroll-behavior: auto;
overflow-y: hidden;
overscroll-behavior-y: auto;
-webkit-overflow-scrolling: touch;
touch-action: pan-x pan-y pinch-zoom;
}
}
/* Retours 2 du 10/09 : étiquettes multiples, lien de site sur les cartes
partenaires sans présentation, textes longs des valeurs. */
.tm-carte__etiquettes{ display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; position: relative; z-index: 1; }
.tm-carte__etiquettes .tm-carte__etiquette{ margin-bottom: 0; }
.tm-carte__etiquettes .tm-carte__etiquette:nth-child(2){ background: #EAF7F3; color: var(--fr-vert); }
.part-carte__site{
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--font-heading); font-weight: 600; font-size: .88rem; color: var(--fr-bleu); text-decoration: none;
border-bottom: 2px solid transparent; transition: border-color .2s ease;
}
.part-carte__site:hover{ border-bottom-color: var(--fr-bleu); }
.ent-relations{ align-items: start; }
.ent-relation p{ font-size: .9rem !important; line-height: 1.7 !important; text-wrap: pretty; }
/* ============================================================
Passe « dynamisme » du 10/09 : survol des cartes, respiration des
illustrations. Aucun texte touché.
============================================================ */
.aside-carte:not(.reveal), .aside-carte.is-revealed,
.demo-temoin__carte:not(.reveal), .demo-temoin__carte.is-revealed,
.ent-citation:not(.reveal), .ent-citation.is-revealed,
.fr-temoignage:not(.reveal), .fr-temoignage.is-revealed,
.frise-histoire__carte:not(.reveal), .frise-histoire__carte.is-revealed,
.histoire-citation:not(.reveal), .histoire-citation.is-revealed,
.lg-bloc-fonc:not(.reveal), .lg-bloc-fonc.is-revealed,
.lg-temoin__carte:not(.reveal), .lg-temoin__carte.is-revealed,
.rec-temoin__carte:not(.reveal), .rec-temoin__carte.is-revealed,
.sa-service:not(.reveal), .sa-service.is-revealed,
.di-porte:not(.reveal), .di-porte.is-revealed,
.di-duo__item:not(.reveal), .di-duo__item.is-revealed,
.part-carte:not(.reveal), .part-carte.is-revealed,
.rc-encart:not(.reveal), .rc-encart.is-revealed,
.rc-colonne:not(.reveal), .rc-colonne.is-revealed,
.tm-pilier:not(.reveal), .tm-pilier.is-revealed,
.ent-relation:not(.reveal), .ent-relation.is-revealed,
.di-familles li:not(.reveal), .di-familles li.is-revealed,
.nl-hebergements li:not(.reveal), .nl-hebergements li.is-revealed,
.part-domaine:not(.reveal), .part-domaine.is-revealed,
.ac-canal:not(.reveal), .ac-canal.is-revealed,
.op-mode:not(.reveal), .op-mode.is-revealed,
.rh-valeur:not(.reveal), .rh-valeur.is-revealed,
.ent-valeur:not(.reveal), .ent-valeur.is-revealed{
transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease, opacity .35s ease;
transition-delay: 0s;
}
.aside-carte:hover, .demo-temoin__carte:hover, .ent-citation:hover, .fr-temoignage:hover, .frise-histoire__carte:hover,
.histoire-citation:hover, .lg-bloc-fonc:hover, .lg-temoin__carte:hover, .rec-temoin__carte:hover, .sa-service:hover,
.di-porte:hover, .part-carte:hover, .rc-encart:hover, .tm-pilier:hover, .di-familles li:hover, .part-domaine:hover{
transform: translateY(-4px);
box-shadow: 0 22px 44px -18px rgba(30, 26, 107, .28);
}
.di-duo__item:hover{ transform: translateY(-4px); background: rgba(255, 255, 255, .11); }
.ent-valeur:hover .ent-valeur__picto, .rh-valeur:hover .rh-valeur__picto, .op-mode:hover .op-mode__picto, .ac-canal:hover .ac-canal__picto{ transform: translateY(-4px); }
.ent-valeur__picto, .rh-valeur__picto, .op-mode__picto, .ac-canal__picto{ transition: transform .35s cubic-bezier(.2,.7,.2,1); }
/* Les illustrations du .fr respirent dans les bannières. */
section img[src*="-Illus-"], .fr-enjeux__illus img, .rec-esprit__illus img{
animation: di-flotte 8s ease-in-out infinite;
}
.di-duo__illus img{ animation-duration: 7s; }
@media (prefers-reduced-motion: reduce){
section img[src*="-Illus-"], .fr-enjeux__illus img, .rec-esprit__illus img{ animation: none; }
.aside-carte:not(.reveal), .aside-carte.is-revealed,
.demo-temoin__carte:not(.reveal), .demo-temoin__carte.is-revealed,
.ent-citation:not(.reveal), .ent-citation.is-revealed,
.fr-temoignage:not(.reveal), .fr-temoignage.is-revealed,
.frise-histoire__carte:not(.reveal), .frise-histoire__carte.is-revealed,
.histoire-citation:not(.reveal), .histoire-citation.is-revealed,
.lg-bloc-fonc:not(.reveal), .lg-bloc-fonc.is-revealed,
.lg-temoin__carte:not(.reveal), .lg-temoin__carte.is-revealed,
.rec-temoin__carte:not(.reveal), .rec-temoin__carte.is-revealed,
.sa-service:not(.reveal), .sa-service.is-revealed,
.di-porte:not(.reveal), .di-porte.is-revealed,
.di-duo__item:not(.reveal), .di-duo__item.is-revealed,
.part-carte:not(.reveal), .part-carte.is-revealed,
.rc-encart:not(.reveal), .rc-encart.is-revealed,
.rc-colonne:not(.reveal), .rc-colonne.is-revealed,
.tm-pilier:not(.reveal), .tm-pilier.is-revealed,
.ent-relation:not(.reveal), .ent-relation.is-revealed,
.di-familles li:not(.reveal), .di-familles li.is-revealed,
.nl-hebergements li:not(.reveal), .nl-hebergements li.is-revealed,
.part-domaine:not(.reveal), .part-domaine.is-revealed,
.ac-canal:not(.reveal), .ac-canal.is-revealed,
.op-mode:not(.reveal), .op-mode.is-revealed,
.rh-valeur:not(.reveal), .rh-valeur.is-revealed,
.ent-valeur:not(.reveal), .ent-valeur.is-revealed{ transition: none; }
}
@media (max-width: 980px){
/* Sur téléphone aussi : respiration plus courte, plus discrète. */
section img[src*="-Illus-"], .fr-enjeux__illus img, .rec-esprit__illus img{ animation-duration: 6s; }
}
/* La règle de cascade des témoignages vient plus bas que celle du survol :
une fois révélée, la carte répond sans délai. */
.tm-cartes .tm-carte.is-revealed{ transition-delay: 0s; }
/* ============================================================
Niveau 1 « profondeur et mouvement » — 10/09
============================================================ */
/* Fonds alternés : la seconde de deux sections blanches consécutives. */
.di-qui + .di-portes,
.nl-preuve + .lg-final, .lg-ressources + .lg-final, .sa-logiciels + .lg-final,
.tm-relation + .tm-partage,
.ac-citation + .ac-final,
.rc-detail + .op-questions,
.vr-rubriques + .vr-usages, .vr-citations + .vr-echange,
.doc-contexte + .doc-autres, .doc-contexte + .doc-logiciel,
.tc-acces + .tc-liste, .tc-raccourcis + .tc-gestionnaire,
.wb-acteurs + .wb-invitations,
.hero-page ~ section + .demo-temoin{
background: #F4F7FD;
}
.vr-newsletter{ background: var(--fr-degrade-gamme); }
/* Filets de titres : se dessinent à l'arrivée du bloc. */
.ac-citation figcaption::before,
.ac-formation h2::after,
.ac-parcours__tete h2::after,
.ac-reponses h2::after,
.cf-logiciel__carte::before,
.di-contact h2::after,
.di-duo__intro h2::after,
.di-duo__tete h2::before,
.di-portes__tete h2::before,
.di-secteurs h2::after,
.dirips-2026 .article-corps h2::after,
.doc-logiciel__carte::before,
.fr-mosaique__item h3::before,
.lg-grille__tete h2::after,
.nl-integration h2::after,
.op-cloud h2::before,
.op-modes__tete h2::after,
.op-questions h2::before,
.rc-texte h2::after,
.rec-valeur h3::before,
.sa-hero__surtitre::after,
.sa-services__surtitre::after,
.section-composee__tete h2::after,
.tc-hero__surtitre::after,
.tm-relation h2::after,
.vr-rubriques__tete h2::after,
.vr-usages h2::after{
transition: width .8s cubic-bezier(.2,.7,.2,1) .25s;
}
.ac-citation figcaption.reveal:not(.is-visible)::before,
.ac-citation.reveal:not(.is-visible) figcaption::before,
.ac-formation h2.reveal:not(.is-visible)::after,
.ac-formation.reveal:not(.is-visible) h2::after,
.ac-parcours__tete h2.reveal:not(.is-visible)::after,
.ac-parcours__tete.reveal:not(.is-visible) h2::after,
.ac-reponses h2.reveal:not(.is-visible)::after,
.ac-reponses.reveal:not(.is-visible) h2::after,
.cf-logiciel__carte.reveal:not(.is-visible)::before,
.di-contact h2.reveal:not(.is-visible)::after,
.di-contact.reveal:not(.is-visible) h2::after,
.di-duo__intro h2.reveal:not(.is-visible)::after,
.di-duo__intro.reveal:not(.is-visible) h2::after,
.di-duo__tete h2.reveal:not(.is-visible)::before,
.di-duo__tete.reveal:not(.is-visible) h2::before,
.di-portes__tete h2.reveal:not(.is-visible)::before,
.di-portes__tete.reveal:not(.is-visible) h2::before,
.di-secteurs h2.reveal:not(.is-visible)::after,
.di-secteurs.reveal:not(.is-visible) h2::after,
.dirips-2026 .article-corps h2.reveal:not(.is-visible)::after,
.dirips-2026 .article-corps.reveal:not(.is-visible) h2::after,
.dirips-2026.reveal:not(.is-visible) .article-corps h2::after,
.doc-logiciel__carte.reveal:not(.is-visible)::before,
.fr-mosaique__item h3.reveal:not(.is-visible)::before,
.fr-mosaique__item.reveal:not(.is-visible) h3::before,
.lg-grille__tete h2.reveal:not(.is-visible)::after,
.lg-grille__tete.reveal:not(.is-visible) h2::after,
.nl-integration h2.reveal:not(.is-visible)::after,
.nl-integration.reveal:not(.is-visible) h2::after,
.op-cloud h2.reveal:not(.is-visible)::before,
.op-cloud.reveal:not(.is-visible) h2::before,
.op-modes__tete h2.reveal:not(.is-visible)::after,
.op-modes__tete.reveal:not(.is-visible) h2::after,
.op-questions h2.reveal:not(.is-visible)::before,
.op-questions.reveal:not(.is-visible) h2::before,
.rc-texte h2.reveal:not(.is-visible)::after,
.rc-texte.reveal:not(.is-visible) h2::after,
.rec-valeur h3.reveal:not(.is-visible)::before,
.rec-valeur.reveal:not(.is-visible) h3::before,
.reveal:not(.is-visible) .ac-citation figcaption::before,
.reveal:not(.is-visible) .ac-formation h2::after,
.reveal:not(.is-visible) .ac-parcours__tete h2::after,
.reveal:not(.is-visible) .ac-reponses h2::after,
.reveal:not(.is-visible) .cf-logiciel__carte::before,
.reveal:not(.is-visible) .di-contact h2::after,
.reveal:not(.is-visible) .di-duo__intro h2::after,
.reveal:not(.is-visible) .di-duo__tete h2::before,
.reveal:not(.is-visible) .di-portes__tete h2::before,
.reveal:not(.is-visible) .di-secteurs h2::after,
.reveal:not(.is-visible) .dirips-2026 .article-corps h2::after,
.reveal:not(.is-visible) .doc-logiciel__carte::before,
.reveal:not(.is-visible) .fr-mosaique__item h3::before,
.reveal:not(.is-visible) .lg-grille__tete h2::after,
.reveal:not(.is-visible) .nl-integration h2::after,
.reveal:not(.is-visible) .op-cloud h2::before,
.reveal:not(.is-visible) .op-modes__tete h2::after,
.reveal:not(.is-visible) .op-questions h2::before,
.reveal:not(.is-visible) .rc-texte h2::after,
.reveal:not(.is-visible) .rec-valeur h3::before,
.reveal:not(.is-visible) .sa-hero__surtitre::after,
.reveal:not(.is-visible) .sa-services__surtitre::after,
.reveal:not(.is-visible) .section-composee__tete h2::after,
.reveal:not(.is-visible) .tc-hero__surtitre::after,
.reveal:not(.is-visible) .tm-relation h2::after,
.reveal:not(.is-visible) .vr-rubriques__tete h2::after,
.reveal:not(.is-visible) .vr-usages h2::after,
.sa-hero__surtitre.reveal:not(.is-visible)::after,
.sa-services__surtitre.reveal:not(.is-visible)::after,
.section-composee__tete h2.reveal:not(.is-visible)::after,
.section-composee__tete.reveal:not(.is-visible) h2::after,
.tc-hero__surtitre.reveal:not(.is-visible)::after,
.tm-relation h2.reveal:not(.is-visible)::after,
.tm-relation.reveal:not(.is-visible) h2::after,
.vr-rubriques__tete h2.reveal:not(.is-visible)::after,
.vr-rubriques__tete.reveal:not(.is-visible) h2::after,
.vr-usages h2.reveal:not(.is-visible)::after,
.vr-usages.reveal:not(.is-visible) h2::after{
width: 0;
}
/* Photos de bannière : léger recul à l'ouverture. */
@keyframes hero-ouvre{ from{ transform: scale(1.06); opacity: .55; } to{ transform: scale(1); opacity: 1; } }
.rec-hero__visuel img:not([src*="Illus"]), .sa-hero__visuel img:not([src*="Illus"]), .nl-hero__visuel img:not([src*="Illus"]),
.lg-hero__visuel img:not([src*="Illus"]), .op-hero__visuel img:not([src*="Illus"]), .wb-hero__visuel img:not([src*="Illus"]),
.di-hero__visuel > img:first-child, .tm-hero__photo img,
.hero-page__visuel:not(.hero-page__visuel--illus) img{
animation: hero-ouvre 1.2s cubic-bezier(.2,.7,.2,1) both;
}
/* Boutons : la flèche avance au survol. */
.fr-btn span[aria-hidden], .rec-btn span[aria-hidden], .part-carte__site span[aria-hidden]{ display: inline-block; transition: transform .25s ease; }
.fr-btn:hover span[aria-hidden], .rec-btn:hover span[aria-hidden], .part-carte__site:hover span[aria-hidden]{ transform: translateX(4px); }
.fr-btn--ligne:hover{ transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce){
.ac-citation figcaption.reveal:not(.is-visible)::before, .ac-citation.reveal:not(.is-visible) figcaption::before, .ac-formation h2.reveal:not(.is-visible)::after, .ac-formation.reveal:not(.is-visible) h2::after, .ac-parcours__tete h2.reveal:not(.is-visible)::after, .ac-parcours__tete.reveal:not(.is-visible) h2::after, .ac-reponses h2.reveal:not(.is-visible)::after, .ac-reponses.reveal:not(.is-visible) h2::after, .cf-logiciel__carte.reveal:not(.is-visible)::before, .di-contact h2.reveal:not(.is-visible)::after, .di-contact.reveal:not(.is-visible) h2::after, .di-duo__intro h2.reveal:not(.is-visible)::after, .di-duo__intro.reveal:not(.is-visible) h2::after, .di-duo__tete h2.reveal:not(.is-visible)::before, .di-duo__tete.reveal:not(.is-visible) h2::before, .di-portes__tete h2.reveal:not(.is-visible)::before, .di-portes__tete.reveal:not(.is-visible) h2::before, .di-secteurs h2.reveal:not(.is-visible)::after, .di-secteurs.reveal:not(.is-visible) h2::after, .dirips-2026 .article-corps h2.reveal:not(.is-visible)::after, .dirips-2026 .article-corps.reveal:not(.is-visible) h2::after, .dirips-2026.reveal:not(.is-visible) .article-corps h2::after, .doc-logiciel__carte.reveal:not(.is-visible)::before, .fr-mosaique__item h3.reveal:not(.is-visible)::before, .fr-mosaique__item.reveal:not(.is-visible) h3::before, .lg-grille__tete h2.reveal:not(.is-visible)::after, .lg-grille__tete.reveal:not(.is-visible) h2::after, .nl-integration h2.reveal:not(.is-visible)::after, .nl-integration.reveal:not(.is-visible) h2::after, .op-cloud h2.reveal:not(.is-visible)::before, .op-cloud.reveal:not(.is-visible) h2::before, .op-modes__tete h2.reveal:not(.is-visible)::after, .op-modes__tete.reveal:not(.is-visible) h2::after, .op-questions h2.reveal:not(.is-visible)::before, .op-questions.reveal:not(.is-visible) h2::before, .rc-texte h2.reveal:not(.is-visible)::after, .rc-texte.reveal:not(.is-visible) h2::after, .rec-valeur h3.reveal:not(.is-visible)::before, .rec-valeur.reveal:not(.is-visible) h3::before, .reveal:not(.is-visible) .ac-citation figcaption::before, .reveal:not(.is-visible) .ac-formation h2::after, .reveal:not(.is-visible) .ac-parcours__tete h2::after, .reveal:not(.is-visible) .ac-reponses h2::after, .reveal:not(.is-visible) .cf-logiciel__carte::before, .reveal:not(.is-visible) .di-contact h2::after, .reveal:not(.is-visible) .di-duo__intro h2::after, .reveal:not(.is-visible) .di-duo__tete h2::before, .reveal:not(.is-visible) .di-portes__tete h2::before, .reveal:not(.is-visible) .di-secteurs h2::after, .reveal:not(.is-visible) .dirips-2026 .article-corps h2::after, .reveal:not(.is-visible) .doc-logiciel__carte::before, .reveal:not(.is-visible) .fr-mosaique__item h3::before, .reveal:not(.is-visible) .lg-grille__tete h2::after, .reveal:not(.is-visible) .nl-integration h2::after, .reveal:not(.is-visible) .op-cloud h2::before, .reveal:not(.is-visible) .op-modes__tete h2::after, .reveal:not(.is-visible) .op-questions h2::before, .reveal:not(.is-visible) .rc-texte h2::after, .reveal:not(.is-visible) .rec-valeur h3::before, .reveal:not(.is-visible) .sa-hero__surtitre::after, .reveal:not(.is-visible) .sa-services__surtitre::after, .reveal:not(.is-visible) .section-composee__tete h2::after, .reveal:not(.is-visible) .tc-hero__surtitre::after, .reveal:not(.is-visible) .tm-relation h2::after, .reveal:not(.is-visible) .vr-rubriques__tete h2::after, .reveal:not(.is-visible) .vr-usages h2::after, .sa-hero__surtitre.reveal:not(.is-visible)::after, .sa-services__surtitre.reveal:not(.is-visible)::after, .section-composee__tete h2.reveal:not(.is-visible)::after, .section-composee__tete.reveal:not(.is-visible) h2::after, .tc-hero__surtitre.reveal:not(.is-visible)::after, .tm-relation h2.reveal:not(.is-visible)::after, .tm-relation.reveal:not(.is-visible) h2::after, .vr-rubriques__tete h2.reveal:not(.is-visible)::after, .vr-rubriques__tete.reveal:not(.is-visible) h2::after, .vr-usages h2.reveal:not(.is-visible)::after, .vr-usages.reveal:not(.is-visible) h2::after{ width: revert; }
.rec-hero__visuel img, .sa-hero__visuel img, .nl-hero__visuel img, .lg-hero__visuel img, .op-hero__visuel img, .wb-hero__visuel img,
.di-hero__visuel > img:first-child, .tm-hero__photo img, .hero-page__visuel img{ animation: none; }
}
/* Cartes partenaires : deux cartes côte à côte font la même hauteur, la
ligne d'actions est calée en bas de chacune — retour Sylvain, « garder un
équilibre, une harmonie ». */
.part-cartes{ align-items: stretch; }
.part-carte__txt{ gap: 10px; grid-template-rows: auto 1fr auto; align-content: stretch; }
.part-carte__actions{ align-self: end; }
.part-carte__plus + .part-carte__site{ margin-top: 2px; }
.part-carte__site{ align-self: start; }
/* Cartes partenaires : ligne d'actions commune, et la fiche en fenêtre. */
/* Toujours l'une sous l'autre : sur une ligne à 1 600 px et sur deux à 1 440, ça se voyait. */
.part-carte__actions{ display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 4px; }
.part-carte__lire{
appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--font-heading); font-weight: 600; font-size: .88rem; color: var(--fr-bleu);
border-bottom: 2px solid transparent; transition: border-color .2s ease;
}
.part-carte__lire:hover{ border-bottom-color: var(--fr-bleu); }
.part-carte__lire span, .part-carte__site span{ display: inline-block; transition: transform .25s ease; }
.part-carte__lire:hover span, .part-carte__site:hover span{ transform: translateX(4px); }
.part-carte__lire:focus-visible, .part-carte__site:focus-visible{ outline: 2px solid var(--fr-bleu); outline-offset: 3px; border-radius: 4px; }
.part-fiche{
border: 0; padding: 0; background: transparent; max-width: min(92vw, 760px); width: 100%;
margin: auto; overflow: visible;
}
.part-fiche::backdrop{ background: rgba(23, 20, 63, .55); backdrop-filter: blur(3px); }
.part-fiche[open]{ animation: part-fiche-ouvre .3s cubic-bezier(.2,.7,.2,1); }
@keyframes part-fiche-ouvre{ from{ opacity: 0; transform: translateY(14px) scale(.98); } to{ opacity: 1; transform: none; } }
.part-fiche__int{
position: relative; background: #fff; border-radius: 20px; padding: 36px 40px 34px;
box-shadow: 0 40px 90px -30px rgba(23, 20, 63, .6); max-height: 84vh; overflow: auto;
}
.part-fiche__fermer{
position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%;
border: 1px solid #E4EAF6; background: #fff; color: var(--navy); font-size: 1.5rem; line-height: 1; cursor: pointer;
transition: background .2s ease, color .2s ease;
}
.part-fiche__fermer:hover{ background: var(--navy); color: #fff; }
.part-fiche__tete{ display: flex; align-items: center; gap: 18px; margin: 0 40px 18px 0; }
.part-fiche__tete img{ max-width: 150px; max-height: 48px; height: auto; object-fit: contain; }
.part-fiche__tete h3{ font-family: var(--font-heading); font-weight: 700; color: var(--navy); font-size: 1.3rem; margin: 0; }
.part-fiche__texte{ color: var(--dh-text, #3A4060); line-height: 1.7; font-size: .96rem; margin-bottom: 22px; }
.part-fiche__texte p{ margin: 0 0 12px; }
.part-fiche__texte a{ color: var(--fr-bleu); }
@media (max-width: 700px){ .part-fiche__int{ padding: 26px 20px 24px; } .part-fiche__tete{ flex-direction: column; align-items: flex-start; } }
@media (prefers-reduced-motion: reduce){ .part-fiche[open]{ animation: none; } }
/* ============================================================
Grammaire d'animation du .fr — 10/09
============================================================ */
/* Variantes d'entrée : par le haut, zoom, par la droite / la gauche. */
.reveal--haut{ transform: translateY(-56px); transition-duration: .75s; }
.reveal--zoom{ transform: scale(.3); transition-duration: .75s; transition-timing-function: cubic-bezier(.2,.8,.2,1); }
.reveal--droite{ transform: translateX(90px); transition-duration: .75s; }
.reveal--gauche{ transform: translateX(-90px); transition-duration: .75s; }
.reveal--haut.is-visible, .reveal--zoom.is-visible, .reveal--droite.is-visible, .reveal--gauche.is-visible{ transform: none; }
/* Titres : chaque mot monte de dessous sa ligne. */
.titre-anime .mot{ display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .12em; margin-bottom: -.12em; }
.titre-anime .mot > span{ display: inline-block; transform: translateY(110%); }
.reveal.is-visible .mot > span, .titre-anime.reveal.is-visible .mot > span{
animation: mot-monte .7s cubic-bezier(.2,.7,.2,1) forwards;
animation-delay: calc(var(--m, 0) * 55ms + .1s);
}
@keyframes mot-monte{ to{ transform: none; } }
/* Ronds des témoignages : zoom à l'arrivée, puis suivent la souris. */
.fr-rond{ transition: transform .35s ease-out, opacity .75s ease; }
.fr-rond.is-visible{ transform: translate(var(--sx, 0px), var(--sy, 0px)); }
.fr-rond.reveal--zoom:not(.is-visible){ transform: scale(.3); }
@media (max-width: 980px){
.reveal--haut{ transform: translateY(-28px); }
.reveal--droite{ transform: translateX(44px); }
.reveal--gauche{ transform: translateX(-44px); }
.reveal--zoom{ transform: scale(.5); }
}
@media (prefers-reduced-motion: reduce){
.reveal--haut, .reveal--zoom, .reveal--droite, .reveal--gauche{ transform: none; transition: none; }
.titre-anime .mot > span{ transform: none; animation: none; }
.fr-rond{ transition: none; }
}
/* Décor qui suit la souris : la translation s'ajoute à ce que l'élément
fait déjà (respiration, dérive de la vague). */
.suit-souris{ transition: translate .45s ease-out; translate: var(--sx, 0px) var(--sy, 0px); }
.fr-rond.suit-souris{ transition: transform .35s ease-out, opacity .75s ease, translate .45s ease-out; }
@media (prefers-reduced-motion: reduce){ .suit-souris{ translate: none; transition: none; } }
/* Retour Sylvain (11/09, sur PC) : la molette posée sur le rail d'actualités
faisait défiler le rail de 24 px vers le bas au lieu de la page. Le rail
avait un léger débordement vertical (cartes en attente de révélation),
donc un ascenseur invisible qui capturait la molette. Le défilement
vertical du rail est interdit, pour tous les pointeurs ; il ne défile
qu'horizontalement. Un peu d'air en haut pour que le soulèvement au
survol ne soit pas rogné. */
.fr-actus__piste, .carrousel__piste, .fr-temoignages__piste{
overflow: auto hidden;
padding-top: 10px; margin-top: -10px;
}
/* ============================================================
Bloc « en détail » en fiches — 11/09. Le texte du .com, composé.
============================================================ */
.rc-detail--fiches .rc-detail__chapo{
font-family: var(--font-heading); font-weight: 600; color: var(--navy);
font-size: clamp(1.08rem, 1.5vw, 1.3rem); line-height: 1.5; max-width: 60ch; margin-bottom: 8px;
}
.rc-fiches{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 26px; }
.rc-fiche{
background: #fff; border: 1px solid #E6ECF8; border-radius: 20px; padding: 28px 30px 26px;
display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 22px; align-items: start;
box-shadow: 0 14px 34px -22px rgba(30, 26, 107, .28);
}
.rc-fiche--large{ grid-column: 1 / -1; }
.rc-fiche__icone{ width: 72px; height: 72px; display: grid; place-items: center; }
.rc-fiche__icone img{ width: 72px; height: 72px; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(30, 26, 107, .12)); }
.rc-fiche .rc-tuile{ width: 64px; height: 64px; margin: 4px; }
.rc-fiche__corps{ display: grid; gap: 10px; }
.rc-fiche h3{
font-family: var(--font-heading); font-weight: 700; color: var(--navy);
font-size: 1.08rem; line-height: 1.4; margin: 0; text-wrap: pretty;
}
.rc-fiche p{ color: #4A4E66; font-size: .95rem; line-height: 1.72; margin: 0; max-width: 62ch; }
.rc-fiche .rc-liste{ margin-top: 4px; }
.rc-fiche:hover{ transform: translateY(-3px); box-shadow: 0 22px 40px -22px rgba(30, 26, 107, .38); }
.rc-fiche:not(.reveal), .rc-fiche.is-revealed{ transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, opacity .35s ease; transition-delay: 0s; }
/* Sur la bande indigo : fiches translucides, texte clair. */
.rc-bande .rc-fiches{ margin-top: 0; }
.rc-bande .rc-fiche{ background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .16); box-shadow: none; }
.rc-bande .rc-fiche h3{ color: #fff; }
.rc-bande .rc-fiche p{ color: #D9DEF6; }
.rc-bande .rc-fiche .rc-texte__cle{ color: var(--fr-turquoise); }
.rc-bande .rc-fiche:hover{ background: rgba(255, 255, 255, .11); }
@media (max-width: 980px){
.rc-fiches{ grid-template-columns: 1fr; gap: 16px; }
.rc-fiche{ grid-template-columns: 56px minmax(0, 1fr); gap: 16px; padding: 22px 20px; }
.rc-fiche__icone, .rc-fiche__icone img{ width: 56px; height: 56px; }
}
/* ============================================================
Bannière « théâtre » : illustration + tuiles en orbite — 11/09
============================================================ */
.ac-hero__visuel--theatre, .nl-hero__visuel--theatre, .di-hero__visuel--theatre{
overflow: visible; display: flex; align-items: center; justify-content: center; padding: 24px 20px;
-webkit-mask-image: none; mask-image: none;
}
.theatre{ position: relative; width: min(100%, 540px); aspect-ratio: 62 / 48; }
.theatre__vague{ position: absolute; right: -14%; bottom: -16%; width: 70%; opacity: .45; pointer-events: none; }
.theatre__illus{
position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain;
animation: di-flotte 8s ease-in-out infinite;
}
.theatre__tuile{
position: absolute; z-index: 2; width: 88px; height: 88px;
filter: drop-shadow(0 18px 26px rgba(30, 26, 107, .22));
translate: var(--sx, 0px) var(--sy, 0px); transition: translate .45s ease-out;
}
.theatre__tuile img{ width: 100%; height: 100%; object-fit: contain; }
.theatre__tuile--1{ left: -4%; top: 10%; animation: theatre-1 6.5s ease-in-out infinite; }
.theatre__tuile--2{ right: -6%; top: 4%; animation: theatre-2 7.5s ease-in-out infinite .6s; }
.theatre__tuile--3{ right: 2%; bottom: 6%; animation: theatre-3 8.5s ease-in-out infinite 1.1s; }
@keyframes theatre-1{ 0%,100%{ transform: translateY(0) rotate(-2deg); } 50%{ transform: translateY(-14px) rotate(2deg); } }
@keyframes theatre-2{ 0%,100%{ transform: translateY(0) rotate(2deg); } 50%{ transform: translateY(-18px) rotate(-1deg); } }
@keyframes theatre-3{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-11px) translateX(5px); } }
/* L'entrée en zoom ne doit pas se battre avec la respiration : la respiration
ne démarre qu'une fois la tuile révélée. */
.theatre__tuile.reveal:not(.is-visible){ animation: none; }
.theatre__illus.reveal:not(.is-visible){ animation: none; }
@media (max-width: 980px){
.ac-hero__visuel--theatre, .nl-hero__visuel--theatre, .di-hero__visuel--theatre{ position: static; width: 100%; padding: 8px 12px 0; }
.theatre{ width: min(100%, 360px); margin: 0 auto; }
.theatre__tuile{ width: 64px; height: 64px; }
}
@media (prefers-reduced-motion: reduce){
.theatre__illus, .theatre__tuile{ animation: none !important; transition: none; }
}
/* Les enveloppes de mots héritent de la couleur de leur parent : l'accent des
bannières ne colore que ses propres mots, plus le titre entier. */
.titre-anime .mot, .titre-anime .mot > span{ color: inherit; }
/* Théâtre : les autres conteneurs de bannière. */
.rec-hero__visuel--theatre, .op-hero__visuel--theatre, .sa-hero__visuel--theatre, .wb-hero__visuel--theatre,
.ent-hero__visuel--theatre, .part-hero__visuel--theatre, .lg-hero__visuel--theatre, .doc-hero__visuel--theatre,
.hero-page__visuel--theatre, .tm-hero__photo--theatre, .vr-hero__photo--theatre{
overflow: visible; display: flex; align-items: center; justify-content: center; padding: 24px 20px;
-webkit-mask-image: none; mask-image: none;
}
.tm-hero__photo--theatre, .vr-hero__photo--theatre{ width: 44%; }
.tm-hero__photo--theatre .theatre, .vr-hero__photo--theatre .theatre{ width: min(100%, 460px); }
.hero-page__visuel--theatre .theatre{ width: min(100%, 520px); }
@media (max-width: 980px){
.rec-hero__visuel--theatre, .op-hero__visuel--theatre, .sa-hero__visuel--theatre, .wb-hero__visuel--theatre,
.ent-hero__visuel--theatre, .part-hero__visuel--theatre, .lg-hero__visuel--theatre, .doc-hero__visuel--theatre,
.hero-page__visuel--theatre, .tm-hero__photo--theatre, .vr-hero__photo--theatre{ position: static; width: 100%; padding: 8px 12px 0; display: flex; }
}
/* Bannières à visuel à gauche (Veille, Témoignages) : le théâtre reste dans
la colonne de gauche, sans mordre sur le titre. */
.vr-hero__photo--theatre{ width: 34%; align-items: flex-start; padding-top: 48px; }
.vr-hero__photo--theatre .theatre{ width: min(100%, 400px); }
.tm-hero__photo--theatre{ width: 36%; }
.tm-hero__photo--theatre .theatre{ width: min(100%, 420px); }
/* Veille et Témoignages en théâtre : la bande de gauche s'élargit et le
texte se décale d'autant, au lieu de passer dessous. */
.vr-hero--theatre .vr-hero__photo, .tm-hero--theatre .tm-hero__photo{ width: 30%; align-items: center; padding: 24px 12px; }
.vr-hero--theatre .vr-hero__photo .theatre, .tm-hero--theatre .tm-hero__photo .theatre{ width: min(100%, 380px); }
.vr-hero--theatre .vr-hero__texte, .tm-hero--theatre .tm-hero__texte{ padding-left: calc(36% + 24px) !important; }
.vr-hero--theatre .vr-hero__photo .theatre, .tm-hero--theatre .tm-hero__photo .theatre{ width: min(100%, 340px); }
@media (max-width: 980px){
.vr-hero--theatre .vr-hero__int, .tm-hero--theatre .tm-hero__int{ padding-left: 0; }
.vr-hero--theatre .vr-hero__texte, .tm-hero--theatre .tm-hero__texte{ padding-left: 0; }
}
.tm-hero--theatre .tm-hero__texte{ padding-left: calc(40% + 24px) !important; }
/* Dans la bande de gauche, la règle de la photo (masque dégradé, cover) ne
doit pas s'appliquer aux images du théâtre. */
.tm-hero__photo--theatre img, .vr-hero__photo--theatre img{
-webkit-mask-image: none; mask-image: none; object-fit: contain; object-position: center;
}
.tm-hero__photo--theatre .theatre__illus, .vr-hero__photo--theatre .theatre__illus{ width: 100%; height: 100%; }
.tm-hero__photo--theatre .theatre__tuile img, .vr-hero__photo--theatre .theatre__tuile img{ width: 100%; height: 100%; }
.tm-hero__photo--theatre .theatre__vague, .vr-hero__photo--theatre .theatre__vague{ width: 70%; height: auto; }
/* Page Demonstration (11/09) : le hero se lisait mal, titre de 56 px sur
trois lignes, trois points orphelins en bas de colonne, carte de
formulaire enorme. Le titre redescend a la taille des autres pages de
formulaire, les points suivent le chapo, et le theatre anime comble la
colonne face au formulaire, plus serre. Le contenu ne change pas. */
.dirips-2026 .demo-grille .hero-page__texte h1, .demo-grille .hero-page__texte h1{ font-size: clamp(2rem, 3vw, 2.6rem); line-height: 1.14; margin: 14px 0 16px; text-wrap: balance; }
.page-id-435 .hero-page__chapo, .demo-grille .hero-page__chapo{ max-width: 520px; }
.demo-grille{ grid-template-areas: none; grid-template-columns: 1fr .92fr; gap: 48px; align-items: start; }
.demo-grille .hero-page__texte, .demo-grille .demo-form{ grid-area: auto; }
.vl-liste.demo-points{ margin: 22px 0 0; max-width: 520px; gap: 10px; }
.vl-liste.demo-points li{ font-size: .98rem; }
.demo-theatre{ margin-top: 22px; }
.demo-theatre .theatre{ width: min(100%, 380px); }
.demo-theatre .theatre__tuile{ width: 70px; height: 70px; }
.demo-form.card{ padding: 30px 32px 26px; border-radius: 22px; }
.demo-grille .hero-page__texte > p[style]{ margin-top: 18px !important; }
.demo-form h2{ font-size: 1.3rem; margin-bottom: 14px; }
.demo-form label{ font-size: .9rem; margin-bottom: 5px; }
.demo-form input, .demo-form select{ padding: 11px 13px; font-size: .96rem; }
.demo-form textarea{ padding: 11px 13px; font-size: .96rem; min-height: 84px; }
.demo-form p{ margin-bottom: 12px; }
.demo-form .contact-note{ font-size: .84rem; margin: 10px 0 0; }
@media (max-width: 980px){
.demo-grille{ grid-template-columns: 1fr; gap: 30px; }
.demo-theatre{ display: none; }
}
/* ====================================================================
Retours Théodore du 12/09 — treize documents
==================================================================== */
/* Home : le bandeau « prochaine échéance » défile à nouveau. */
.fr-echeance--defile{ overflow: hidden; }
.fr-echeance--defile .fr-echeance__piste{ display: flex; width: max-content; animation: fr-echeance-defile var(--duree, 40s) linear infinite; will-change: transform; }
.fr-echeance--defile .fr-echeance__lot{ display: flex; align-items: center; }
.fr-echeance--defile .fr-echeance__item{ display: flex; align-items: center; gap: 12px; padding: 13px 28px; white-space: nowrap; opacity: 1; visibility: visible; position: static; }
.fr-echeance--defile .fr-echeance__item::after{ content: ''; width: 5px; height: 5px; border-radius: 50%; background: rgba(42, 37, 134, .35); margin-left: 16px; }
.fr-echeance--defile a{ margin-left: 4px; }
.fr-echeance--defile:hover .fr-echeance__piste, .fr-echeance--defile:focus-within .fr-echeance__piste{ animation-play-state: paused; }
@keyframes fr-echeance-defile{ from{ transform: translate3d(0, 0, 0); } to{ transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: reduce){
.fr-echeance--defile .fr-echeance__piste{ animation: none; width: auto; }
.fr-echeance--defile .fr-echeance__lot[aria-hidden="true"], .fr-echeance--defile .fr-echeance__item[aria-hidden="true"]{ display: none; }
.fr-echeance--defile .fr-echeance__item{ white-space: normal; flex-wrap: wrap; }
}
/* Cadres réglementaires : théâtre dans la bannière, bandeau bleu, visuel
à côté de « pour aller plus loin ». */
.tc-hero__visuel--theatre{ display: flex; align-items: center; justify-content: center; padding: 10px 20px; }
.tc-hero__visuel--theatre .theatre{ width: min(100%, 460px); }
.tc-reperes .di-repere__picto svg{ color: var(--fr-bleu); }
.tc-reperes + .tc-acces{ padding-top: 40px; }
.tc-contexte__int{ display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .75fr); gap: 48px; align-items: start; }
.tc-contexte__visuel{ position: sticky; top: 110px; display: flex; justify-content: center; padding-top: 34px; }
.tc-contexte__visuel .theatre{ width: min(100%, 420px); }
.tc-contexte__corps .fr-cartes{ grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
/* Fiches cadres : le texte seul face à un visuel animé. */
.cf-preparer__int--visuel{ grid-template-columns: minmax(0, 1.1fr) minmax(0, .8fr); align-items: center; }
.cf-preparer__int--visuel .cf-preparer__texte{ max-width: 66ch; }
.cf-preparer__visuel{ display: flex; justify-content: center; }
.cf-preparer__visuel .theatre{ width: min(100%, 420px); }
/* Pages documentaires : les encarts du .com à gauche, un visuel animé à
droite qui suit le défilement. */
.doc-contexte__int{ display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .8fr); gap: 40px; align-items: start; }
.doc-contexte__blocs{ display: grid; gap: 20px; }
.doc-contexte__bloc > *{ max-width: none; }
.doc-contexte__visuel{ position: sticky; top: 110px; display: flex; justify-content: center; padding-top: 20px; }
.doc-contexte__visuel .theatre{ width: min(100%, 420px); }
/* À propos : « privilégier les blocs esthétiques ». Les trois textes
Clients / Partenaires / Collaborateurs passent en cartes. */
.ent-relations{ border-top: 0; padding-top: 30px; gap: 24px; }
.ent-relation{ background: #fff; border-radius: 20px; padding: 28px 28px 30px; box-shadow: 0 22px 44px -28px rgba(15, 12, 60, .5); }
.ent-relation__icone{ width: 56px; height: 56px; border-radius: 15px; background: var(--fr-bleu-pale, #E8ECFF); color: var(--fr-bleu); display: inline-flex; align-items: center; justify-content: center; }
.ent-relation h3{ color: var(--fr-indigo); font-size: 1.12rem; margin: 16px 0 10px; }
.ent-relation p{ color: #3A4060; }
.ent-relation.is-revealed{ transition: transform .25s ease, box-shadow .25s ease; }
.ent-relation.is-revealed:hover{ transform: translateY(-4px); box-shadow: 0 28px 50px -26px rgba(15, 12, 60, .6); }
/* CTA : un survol avec changement de couleur sur tous les boutons. */
.btn-primary:hover{ background: var(--fr-indigo); }
.btn-outline:hover{ background: var(--navy); border-color: var(--navy); color: #fff; }
.header-cta .btn:hover{ background: var(--fr-indigo); color: #fff; }
.part-carte__site:hover, .part-carte__lire:hover, .cf-hero__lien:hover, .lg-croise__lien:hover, .sa-service__lien:hover,
.demo-temoin__lien:hover, .rec-offre__lien:hover, .fr-actu__lien:hover, .tm-carte__lien:hover, .vr-carte__lien:hover{ color: var(--fr-bleu); }
.tm-pages button:hover, .tm-pages a:hover{ background: var(--fr-bleu); color: #fff; border-color: var(--fr-bleu); }
@media (max-width: 980px){
.tc-contexte__int, .doc-contexte__int, .cf-preparer__int--visuel{ grid-template-columns: 1fr; }
.tc-contexte__visuel, .doc-contexte__visuel, .cf-preparer__visuel{ position: static; padding-top: 0; }
.tc-contexte__visuel .theatre, .doc-contexte__visuel .theatre, .cf-preparer__visuel .theatre{ width: min(100%, 340px); }
.tc-hero__visuel--theatre{ padding: 8px 12px 0; }
.fr-echeance--defile .fr-echeance__item{ padding: 11px 18px; }
}
.tc-contexte__corps .fr-carte p{ text-align: left; hyphens: manual; }
.ent-relations{ align-items: stretch; }
.dirips-2026 .section-alt{ overflow: clip; } /* 12/09 : mêmes vagues qui traversaient les cartes de Contact. */
.fr-actu__lien:hover, .sa-service__lien:hover, .lg-avis__lien:hover, .lg-croise__lien:hover, .nl-integration__lien a:hover, .tm-relation__liens a:hover{ color: var(--fr-indigo); }
/* Retours 2 du 12/09 : bandeau bleu sur toutes les pages, frise en blocs. */
.di-repere__titre{ font-family: var(--font-heading); font-weight: 700; color: #fff; font-size: 1.08rem; margin: 0 0 5px; line-height: 1.3; }
.di-repere__titre + p{ color: #D9DCF3; line-height: 1.5; margin: 0; font-size: .9rem; max-width: 26ch; }
.di-reperes--page .di-repere__picto svg{ color: var(--fr-bleu); }
.di-reperes--page + .section, .di-reperes--page + section{ padding-top: 52px; }
.tm-hero + .di-reperes, .vr-hero + .di-reperes{ margin-top: 0; }
/* 12/09 : la frise « Notre histoire » reste la frise chronologique d'origine
(rail, points verts, révélation en cascade) : Sylvain la préfère aux blocs. */
/* Veille en mode théâtre : les trois tuiles de droite doublaient le visuel. */
.vr-hero--theatre .vr-tuiles{ display: none; }
.vr-hero--theatre .vr-hero__int{ grid-template-columns: minmax(0, 1fr); }
/* Veille et Témoignages en théâtre (12/09) : le visuel à droite du texte,
comme sur les autres bannières, plus de bande à gauche. */
.vr-hero--theatre .vr-hero__texte, .tm-hero--theatre .tm-hero__texte{ padding-left: 0 !important; }
.vr-hero--theatre .vr-hero__int, .tm-hero--theatre .tm-hero__int{ grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 40px; }
.vr-hero__visuel--theatre, .tm-hero__visuel--theatre{ display: flex; align-items: center; justify-content: center; padding: 10px 16px; }
.vr-hero__visuel--theatre .theatre, .tm-hero__visuel--theatre .theatre{ width: min(100%, 480px); }
@media (max-width: 980px){
.vr-hero--theatre .vr-hero__int, .tm-hero--theatre .tm-hero__int{ grid-template-columns: 1fr; }
.vr-hero__visuel--theatre .theatre, .tm-hero__visuel--theatre .theatre{ width: min(100%, 360px); }
}
/* À propos, « Comment naît un logiciel » : quatre gros blocs (12/09). Le titre
passe au-dessus, les étapes en cartes 2 x 2 sur toute la largeur. */
.ent-fabrique__int{ grid-template-columns: 1fr; gap: 34px; }
.ent-fabrique__tete{ max-width: 760px; }
.ent-etapes{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-bottom: 26px; }
.ent-etape{ grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 20px; row-gap: 6px; background: #fff; border-radius: 22px; padding: 30px 32px 32px; border: 1px solid #E4EAF6; box-shadow: 0 22px 44px -30px rgba(15, 12, 60, .5); }
.ent-etape__num{ grid-column: 2; grid-row: 1; font-size: 1.05rem; letter-spacing: .06em; }
.ent-etape__icone{ grid-column: 1; grid-row: 1 / span 3; align-self: start; }
.ent-etape h3{ grid-column: 2; font-size: 1.22rem; margin: 0; }
.ent-etape p{ grid-column: 2; font-size: .96rem; line-height: 1.7; }
.ent-etape__fleche{ display: none; }
.ent-etape.is-revealed{ transition: transform .25s ease, box-shadow .25s ease; }
.ent-etape.is-revealed:hover{ transform: translateY(-4px); box-shadow: 0 30px 50px -28px rgba(15, 12, 60, .6); }
.ent-fabrique__note, .ent-fabrique__actions{ text-align: center; }
.ent-fabrique__actions{ justify-content: center; }
@media (max-width: 700px){ .ent-etapes{ grid-template-columns: 1fr; } .ent-etape{ padding: 24px 22px; grid-template-columns: 52px minmax(0, 1fr); } }
/* Fiches cadres réglementaires (12/09) : paragraphes justifiés. */
.cf-hero__chapo, .cf-comprendre__texte p, .cf-preparer__texte p, .cf-logiciel__texte, .cf-cadres__texte p{ text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
/* ====================================================================
Survol des CTA — retour client du 12/09 : « beaucoup de CTA ne changent
pas de couleur au passage de la souris ». Le bleu → indigo était trop
proche pour être vu. Règle unique, dans la charte : ce qui est bleu passe
au vert de marque, ce qui est vert passe au bleu, les liens fléchés
passent au vert. !important : la feuille d'harmonisation, plus spécifique, ne doit pas repasser devant.
==================================================================== */
html body .fr-btn--plein:hover, html body .btn-primary:hover, html body .header-cta .btn:hover,
html body .tm-filtre.est-actif:hover, html body .wb-filtre.est-actif:hover, html body .filtre-pill.is-active:hover,
html body .cf-fichier__lien:hover, html body .tc-filtre.est-actif:hover, html body .doc-famille.est-actif:hover,
html body .btn-outline:hover, html body .btn-fantome:hover, html body .fr-btn--ligne:hover,
html body .tc-filtre.est-actif:hover{
background-color: var(--green, #0E9E82) !important;
border-color: var(--green, #0E9E82) !important;
color: #fff !important;
transform: translateY(-2px);
box-shadow: 0 12px 26px rgba(14, 158, 130, .32);
}
/* Boutons verts et boutons de formulaire (certains sont bleus au repos selon
la page) : ils passent en blanc bordé de bleu, comme le bouton du pied. Visible
quel que soit l'état de départ. */
html body .btn.btn-vert:hover, html body .btn-vert:hover, html body .btn-clair:hover, html body form button[type="submit"]:hover,
html body form input[type="submit"]:hover, html body .newsletter button[type="submit"]:hover,
html body .fr-pied__colonne a.fr-pied__collab:hover, html body .cf-btn-vert:hover, html body .rec-fin__btn:hover,
html body #main .rec-fin__btn:hover, html body .fr-cta .fr-btn--clair:hover, html body .fr-btn--clair:hover{
background-color: #fff !important;
border-color: var(--navy, #2A2586) !important;
color: var(--navy, #2A2586) !important;
transform: translateY(-2px);
box-shadow: 0 12px 26px rgba(42, 37, 134, .22);
}
/* Liens fléchés et liens d'action en texte : bleu → vert, flèche qui glisse. */
html body .sa-service__lien:hover, html body .lg-croise__lien:hover, html body .cf-hero__lien:hover, html body .fr-actu__lien:hover,
html body .part-carte__lire:hover, html body .part-carte__site:hover, html body .rec-offre__lien:hover, html body .demo-temoin__lien:hover,
html body .lg-avis__lien:hover, html body .nl-integration__lien a:hover, html body .tm-relation__liens a:hover, html body .lg-final__lien:hover,
html body .prod-ressources__lien:hover, html body .ac-reponses__lien:hover, html body .article-partage__lien:hover, html body .tc-raccourci:hover .tc-raccourci__lien,
html body .fr-echeance a:hover, html body .fr-pied__colonne a:hover, html body .fr-pied__liens a:hover, html body .fil-ariane a:hover{
color: var(--green, #0E9E82) !important;
border-bottom-color: var(--green, #0E9E82) !important;
text-decoration-color: var(--green, #0E9E82);
}
html body .sa-service__lien:hover::after, html body .lg-avis__lien:hover::after{ margin-left: 4px; }
/* Cartes cliquables : bord et titre au vert, légère levée. */
html body a.actu-card:hover, html body a.article-vedette:hover, html body a.fr-actu__media:hover, html body .tc-raccourci:hover,
html body .contact-porte:hover, html body .cf-cycle__etape a:hover, html body .di-porte:hover, html body .fr-carte:hover, html body .nl-etape__lien:hover{
border-color: var(--green, #0E9E82) !important;
box-shadow: 0 18px 36px -22px rgba(14, 158, 130, .5);
transform: translateY(-3px);
}
html body a.actu-card:hover h3, html body a.actu-card:hover h2, html body a.article-vedette:hover h2, html body a.article-vedette:hover h3,
html body .tc-raccourci:hover h3, html body .contact-porte:hover h3, html body .cf-cycle__etape a:hover .cf-cycle__code, html body .fr-carte:hover h4, html body .fr-carte:hover h3{
color: var(--green, #0E9E82) !important;
}
/* Flèches de carrousel et boutons de rail. */
html body .carrousel__fleche:hover, html body .fr-rail-bouton:hover, html body .fr-rond:hover{
background-color: var(--green, #0E9E82) !important; border-color: var(--green, #0E9E82) !important; color: #fff !important;
}
/* Filtres, onglets, plis : vert au survol. */
html body .tc-filtre:hover, html body .tm-filtre:hover, html body .wb-filtre:hover, html body .filtre-pill:hover, html body .doc-famille:hover, html body .doc-acces:hover,
html body .lg-onglet:hover, html body .tm-pages button:hover, html body .tm-pages a:hover{
background-color: rgba(14, 158, 130, .12) !important; border-color: var(--green, #0E9E82) !important; color: var(--green, #0E9E82) !important;
}
html body .fr-pli__titre:hover, html body .fr-pli summary:hover, html body .doc-groupe__titre:hover, html body summary:hover{ color: var(--green, #0E9E82) !important; cursor: pointer; }
html body .cf-fichier__lien:hover .cf-fichier__nom{ color: #fff; }
/* Transition commune pour que le changement se voie sans sauter. */
html body a, html body button, html body summary{ transition: background-color .22s ease, color .22s ease, border-color .22s ease, box-shadow .22s ease, transform .22s ease; }
@media (prefers-reduced-motion: reduce){ html body a:hover, html body button:hover{ transform: none; } }
/* Cartes d'actualité : le survol passe par la carte entière. */
html body a.actu-card:hover, html body a.article-vedette:hover, html body a.fr-actu__media:hover, html body .fr-actu:hover{ background-color: #F1FAF7 !important; }
html body .fr-actu:hover .fr-actu__lien, html body .fr-actu:hover h3{ color: var(--green, #0E9E82) !important; }
/* Fiches cadres (12/09) : un théâtre différent par fiche à la place de la
photo commune ; le texte garde la gauche, le visuel prend la droite. */
.cf-hero--theatre .cf-hero__int{ display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 40px; align-items: center; }
.cf-hero--theatre .cf-hero__texte{ max-width: none; }
.cf-hero__visuel--theatre{ display: flex; align-items: center; justify-content: center; padding: 6px 12px; }
.cf-hero__visuel--theatre .theatre{ width: min(100%, 470px); }
@media (max-width: 980px){
.cf-hero--theatre .cf-hero__int{ grid-template-columns: 1fr; gap: 20px; }
.cf-hero__visuel--theatre .theatre{ width: min(100%, 360px); }
}
/* 13/09 : le texte de consentement avait viré au vert dans les formulaires :
la règle de l'astérisque (label span en vert) attrapait le span qui
enveloppe désormais la phrase. */
.dirips-consent label > span{ color: #3A4060 !important; font-weight: 400; }
.dirips-consent label > span a{ color: var(--navy) !important; }
/* 13/09 : « .hero-page form » posait une seconde carte blanche ombrée à
l'intérieur de la carte du formulaire (Démonstration, Échange) : bord
visible autour des champs. Dans une carte, le formulaire reste nu. */
.demo-form form, .card form, .contact-formulaire form{ background: transparent !important; box-shadow: none !important; border-radius: 0; }
/* ====================================================================
Retours CTA du 11/09 — points 1 à 5
==================================================================== */
/* 1. Bandeau échéance sous l'en-tête, au-dessus de la bannière. */
.fr-echeance--defile{ border-bottom: 1px solid rgba(42, 37, 134, .10); }
/* 5. Deux boutons dans la bannière Logiciels. */
.nl-hero__actions{ display: flex; flex-wrap: wrap; gap: 14px; }
/* 4. Bande d'appel à l'action : pictos flottants, vague, deux boutons. */
.cta-bande{ background: var(--fr-degrade-gamme); padding: 48px 0 56px; }
.cta-bande__carte{
position: relative; overflow: hidden; isolation: isolate;
background: #2A2586; border-radius: 22px; padding: 44px 48px; color: #fff;
display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; gap: 28px 44px; align-items: center;
}
.cta-bande__vague{ position: absolute; right: -6%; bottom: -30%; width: 46%; opacity: .22; pointer-events: none; z-index: -1; }
.cta-bande__visuel{ position: relative; height: 150px; }
.cta-bande__tuile{
position: absolute; width: 74px; height: 74px; border-radius: 18px; background: #fff; padding: 12px;
box-shadow: -6px 6px 0 0 rgba(157, 190, 244, .9), 0 18px 34px -16px rgba(0, 0, 0, .45);
}
.cta-bande__tuile img{ width: 100%; height: 100%; object-fit: contain; }
.cta-bande__tuile--1{ left: 0; top: 0; animation: theatre-1 6.5s ease-in-out infinite; }
.cta-bande__tuile--2{ left: 92px; top: 26px; animation: theatre-2 7.5s ease-in-out infinite .6s; }
.cta-bande__tuile--3{ left: 34px; top: 82px; animation: theatre-3 8.5s ease-in-out infinite 1.1s; }
.cta-bande__tuile.reveal:not(.is-visible){ animation: none; }
.cta-bande__surtitre{ margin: 0 0 10px; font-family: var(--font-heading); font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--fr-turquoise); }
.cta-bande__texte h2{ font-family: var(--font-heading); font-weight: 800; color: #fff; font-size: clamp(1.4rem, 2.1vw, 1.85rem); margin: 0 0 10px; text-wrap: balance; }
.cta-bande__texte p{ color: #D8DDF6; line-height: 1.7; margin: 0; max-width: 52ch; }
.cta-bande__actions{ display: grid; justify-items: center; gap: 12px; }
.cta-bande__actions .fr-btn{ white-space: nowrap; }
.cta-bande__note{ color: #C7CEEE; font-size: .85rem; }
@media (max-width: 980px){
.cta-bande__carte{ grid-template-columns: 1fr; padding: 34px 28px; gap: 22px; }
.cta-bande__visuel{ height: 120px; width: 190px; }
.cta-bande__tuile{ width: 62px; height: 62px; }
.cta-bande__tuile--2{ left: 80px; top: 18px; } .cta-bande__tuile--3{ left: 28px; top: 64px; }
.cta-bande__actions{ justify-items: start; }
.cta-bande__vague{ width: 70%; }
}
@media (prefers-reduced-motion: reduce){ .cta-bande__tuile{ animation: none !important; } }
/* Les deux boutons de la bannière Logiciels tiennent sur une ligne (la feuille
d'harmonisation, plus spécifique, remettait 30 px de marge interne). */
body.dirips-harmonisation-v1 #main .nl-hero__actions .fr-btn, .nl-hero__actions .fr-btn{ padding-left: 22px !important; padding-right: 22px !important; white-space: nowrap; flex: 0 0 auto; }
@media (max-width: 480px){ body.dirips-harmonisation-v1 #main .nl-hero__actions .fr-btn, .nl-hero__actions .fr-btn{ flex: 1 1 100%; text-align: center; } }
body.dirips-harmonisation-v1 #main .nl-hero__actions, .nl-hero__actions{ flex-direction: row; align-items: center; }
@media (max-width: 480px){ body.dirips-harmonisation-v1 #main .nl-hero__actions, .nl-hero__actions{ flex-direction: column; align-items: stretch; } }
/* Retours CTA du 11/09 — points 6 à 10 */
.sa-newsletter{ margin-top: 26px; background: #fff; border-radius: 18px; padding: 22px 24px 20px; box-shadow: 0 22px 44px -28px rgba(0, 0, 0, .5); }
.sa-newsletter .newsletter{ padding: 0; margin: 0; background: transparent; box-shadow: none; }
.sa-newsletter .newsletter h2{ color: var(--navy); font-size: 1.12rem; margin: 0 0 6px; }
.sa-newsletter .newsletter p{ color: #3A4060; font-size: .92rem; margin: 0 0 12px; max-width: none; }
.sa-newsletter .newsletter__form{ display: flex; gap: 10px; flex-wrap: wrap; }
.sa-newsletter .newsletter__form input[type="email"]{ flex: 1 1 200px; min-width: 0; padding: 11px 13px; border: 1px solid #D6E0F5; border-radius: 10px; font-size: .95rem; }
.sa-newsletter .newsletter__mention{ color: #5B628A; font-size: .8rem; margin: 10px 0 0; }
.vr-hero__actions{ display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
body.dirips-harmonisation-v1 #main .vr-hero__actions .fr-btn, .vr-hero__actions .fr-btn{ padding-left: 22px !important; padding-right: 22px !important; white-space: nowrap; }
.doc-hero__actions{ margin-top: 22px; }
.sa-veille__droite{ display: grid; }
body.dirips-harmonisation-v1 #main .vr-hero__actions .fr-btn, .vr-hero__actions .fr-btn{ padding-left: 18px !important; padding-right: 18px !important; letter-spacing: .06em; }
.sa-newsletter .newsletter{ display: block; }
.sa-newsletter .newsletter__texte{ margin-bottom: 12px; }
.sa-newsletter .newsletter__form{ flex-wrap: nowrap; }
.sa-newsletter .newsletter__form .btn{ white-space: nowrap; padding: 11px 18px; }
@media (max-width: 480px){ .sa-newsletter .newsletter__form{ flex-wrap: wrap; } }
/* Retours CTA du 11/09 — points 11 à 15 */
:root{ --fr-rose-pale: #F7DDEC; }
.nl-bande{ background: #fff; padding: 10px 0 66px; }
.nl-bande__carte{
position: relative; overflow: hidden; isolation: isolate; border-radius: 22px; padding: 38px 44px;
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 40px; align-items: center;
background: linear-gradient(105deg, #DCE7FF 0%, #E6E1FA 52%, var(--fr-rose-pale) 100%);
box-shadow: 0 24px 48px -30px rgba(42, 37, 134, .35);
}
.nl-bande__vague{ position: absolute; right: -6%; top: -46%; width: 52%; opacity: .5; pointer-events: none; z-index: -1; }
.nl-bande__gauche{ display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 22px; align-items: center; }
.nl-bande__picto{ width: 92px; height: 92px; border-radius: 22px; background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: -7px 7px 0 0 rgba(157, 190, 244, .9); }
.nl-bande__picto svg{ width: 46px; height: 46px; }
.nl-bande__intro{ margin: 0 0 2px; color: var(--navy); font-size: 1.15rem; }
.nl-bande__mot{ margin: 0; font-family: var(--font-heading); font-weight: 800; font-size: clamp(1.9rem, 3.2vw, 2.9rem); overflow-wrap: anywhere; letter-spacing: .02em; line-height: 1; color: var(--fr-indigo); }
.nl-bande .newsletter{ background: transparent; padding: 0; margin: 0; display: grid; gap: 12px; box-shadow: none; }
.nl-bande .newsletter h2{ color: var(--navy); font-size: 1.15rem; margin: 0; }
.nl-bande .newsletter p{ color: #3A4060; margin: 0; max-width: none; }
.nl-bande .newsletter__form{ display: flex; gap: 10px; flex-wrap: wrap; }
.nl-bande .newsletter__form input[type="email"]{ flex: 1 1 220px; min-width: 0; background: #fff; border: 1px solid #D6D9F0; border-radius: 10px; padding: 12px 14px; color: var(--navy); }
.nl-bande .newsletter__form .btn{ white-space: nowrap; }
.nl-bande .newsletter__mention{ font-size: .82rem; color: #5B628A; }
.wb-invitations__actions{ display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 6px; }
@media (max-width: 980px){
.nl-bande__carte{ grid-template-columns: 1fr; padding: 28px 24px; gap: 22px; }
.nl-bande__gauche{ grid-template-columns: 72px minmax(0, 1fr); gap: 16px; }
.nl-bande__picto{ width: 72px; height: 72px; }
}
/* Retours CTA du 11/09 — points 16 à 20 : menus déroulants des formulaires */
.contact-formulaire select, .fr-dpo__form select{ width: 100%; padding: 12px 14px; border: 1px solid #D6E0F5; border-radius: 10px; font: inherit; color: var(--navy); background: #fff; }
.contact-formulaire select:focus{ outline: 2px solid var(--violet, #4A54D6); outline-offset: 1px; }
/* Page légale sans sommaire (une seule section, ex. politique de confidentialité) :
le texte tombait dans la colonne de 262 px réservée au sommaire. */
.jur-corps__int > .jur-texte:first-child{ grid-column: 1 / -1; }
.jur-bloc__corps .fr-dpo__form p, .jur-bloc__corps .fr-dpo__form div{ max-width: none; }
.fr-dpo__form textarea, .fr-dpo__form input{ width: 100%; box-sizing: border-box; }
/* Retours CTA du 11/09 — points 21 à 25 */
/* 21. Mentions légales : une seule couleur pour les intertitres. */
.jur-bloc__corps h3, .jur-bloc__corps h4, .jur-bloc__corps strong{ color: var(--navy); }
.jur-bloc__corps h3{ font-size: 1.02rem; margin: 18px 0 6px; }
/* 23. Qualiopi mis en avant + bandeau de chiffres. */
.ac-qualiopi{ display: inline-flex; align-items: center; gap: 12px; margin: 18px 0 0 !important; padding: 12px 18px; border-radius: 14px; background: #fff; border: 1px solid #DCE6F8; box-shadow: 0 14px 30px -20px rgba(42, 37, 134, .4); color: #3A4060 !important; }
.ac-qualiopi svg{ width: 30px; height: 30px; color: var(--green); flex: 0 0 auto; }
.ac-qualiopi strong{ color: var(--navy); }
.ac-chiffres{ background: #fff; padding: 46px 0 56px; }
.ac-chiffres__intro{ text-align: center; color: #3A4060; margin: 0 0 22px; font-size: .96rem; }
.ac-chiffres__liste{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.ac-chiffres__liste li{ background: #fff; border: 1px solid #E4EAF6; border-radius: 18px; padding: 26px 18px; text-align: center; box-shadow: 0 18px 36px -28px rgba(15, 12, 60, .45); }
.ac-chiffres__liste strong{ display: block; font-family: var(--font-heading); font-weight: 800; font-size: clamp(1.8rem, 3vw, 2.5rem); color: var(--navy); line-height: 1.1; margin-bottom: 8px; }
.ac-chiffres__liste span{ color: #5B628A; font-size: .92rem; }
/* 24. Newsletter dans le pied de page. */
.fr-pied__newsletter .newsletter{ background: transparent; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr !important; gap: 10px; box-shadow: none; }
.fr-pied__newsletter .newsletter h2{ font-size: .98rem; color: #fff; margin: 0; padding: 0; border: 0; }
.fr-pied__newsletter .newsletter p{ color: #C7CEEE; font-size: .88rem; margin: 0; }
.fr-pied__newsletter .newsletter__form{ display: flex; gap: 8px; flex-wrap: wrap; }
.fr-pied__newsletter .newsletter__form input[type="email"]{ flex: 1 1 160px; min-width: 0; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .08); color: #fff; }
.fr-pied__newsletter .newsletter__form input::placeholder{ color: #B8BEE6; }
.fr-pied__newsletter .newsletter__form .btn{ padding: 10px 16px; white-space: nowrap; }
.fr-pied__newsletter .newsletter__mention{ color: #9AA3D0; font-size: .78rem; }
/* 25. Cartes « Découvrez Dir IPS » : le lien s'étend à toute la carte
(pseudo-élément), la mise en page d'origine reste intacte. */
.di-porte--cliquable{ position: relative; cursor: pointer; }
.di-porte--cliquable .di-porte__lien::before{ content: ''; position: absolute; inset: 0; border-radius: 16px; }
html body .di-porte--cliquable:hover h3, html body .di-porte--cliquable:hover .di-porte__lien{ color: var(--green, #0E9E82) !important; }
@media (max-width: 980px){
.ac-chiffres__liste{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fr-pied__haut{ grid-template-columns: 1fr; }
}
html body .di-porte--cliquable:hover{ background-color: #F1FAF7 !important; }
html body footer.fr-pied .fr-pied__newsletter .newsletter{ grid-template-columns: 1fr !important; }
html body footer.fr-pied .fr-pied__newsletter .newsletter > *{ grid-column: 1; }
/* Retours UX du 11/09 — points 26 à 30 */
/* 26/30. Éléments graphiques sur les photos de bannière. */
/* .a-decor : le positionnement est posé par le script, seulement si le conteneur
est encore en static — sinon il casse les bannières à visuel absolu. */
.photo-decor{ position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.photo-decor__vague{ position: absolute; right: -8%; bottom: -12%; width: 62%; opacity: .55; }
.photo-decor__tuile{
position: absolute; width: 72px; height: 72px; border-radius: 18px; background: #fff; padding: 12px;
box-shadow: -6px 6px 0 0 rgba(247, 221, 236, .95), 0 18px 34px -16px rgba(30, 26, 107, .45);
translate: var(--sx, 0px) var(--sy, 0px); transition: translate .45s ease-out;
}
.photo-decor__tuile img{ width: 100%; height: 100%; object-fit: contain; }
.photo-decor__tuile--1{ left: 7%; top: 10%; animation: theatre-1 6.5s ease-in-out infinite; }
.photo-decor__tuile--2{ right: 8%; bottom: 12%; animation: theatre-3 8.5s ease-in-out infinite 1.1s; }
.photo-decor__tuile.reveal:not(.is-visible){ animation: none; }
.tm-hero__photo .photo-decor__tuile--2, .tm-hero__photo .photo-decor__vague{ display: none; }
.tm-hero__photo .photo-decor__tuile--1{ left: 12%; top: 14%; width: 60px; height: 60px; }
/* 27. Le rose pâle de la palette, en respiration sur les sections alternées. */
.dirips-2026 .section-alt{ background: linear-gradient(160deg, #FFFFFF 0%, #F4F8FE 45%, #FAF0F6 100%); }
.a-decor .photo-decor__tuile, .cta-bande__tuile, .di-repere__picto{ box-shadow: -6px 6px 0 0 rgba(247, 221, 236, .95), 0 18px 34px -16px rgba(30, 26, 107, .35); }
@media (max-width: 980px){
.photo-decor__tuile{ width: 54px; height: 54px; padding: 9px; }
.photo-decor__tuile--1{ left: 5%; top: 8%; } .photo-decor__tuile--2{ right: 5%; bottom: 8%; }
}
@media (prefers-reduced-motion: reduce){ .photo-decor__tuile{ animation: none !important; } }
/* Ancres : l'en-tête collant masquait la cible (retour du 14/09 sur #newsletter) ;
la page s'arrête un peu au-dessus de la cible. */
main [id]{ scroll-margin-top: 120px; }
.nl-bande .newsletter, .sa-newsletter .newsletter{ scroll-margin-top: 215px; }
/* Page Ressources (retour du 11/09 : « manque page Ressources »). */
.res-portes{ padding-top: 48px; padding-bottom: 20px; }
.res-portes__liste{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.res-portes .contact-porte h2{ font-size: 1.3rem; margin-bottom: 8px; color: var(--navy); }
.res-derniers__titre{ font-family: var(--font-heading); font-weight: 800; color: var(--navy); font-size: clamp(1.5rem, 2.4vw, 2rem); margin: 0 0 26px; }
.res-grille{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.res-derniers__tous{ margin: 28px 0 0; text-align: center; }
@media (max-width: 980px){ .res-portes__liste, .res-grille{ grid-template-columns: 1fr; } }
/* Théâtre dans une bannière hero-page (Ressources, Contact en théâtre) : la règle
des photos (.hero-page__visuel img : hauteur, ombre, arrondi) déformait les
pictos en grands blocs blancs. */
.dirips-2026 .hero-page__visuel--theatre .theatre img, .hero-page__visuel--theatre .theatre img{ height: auto; max-width: 100%; box-shadow: none; border-radius: 0; background: transparent; object-fit: contain; }
.dirips-2026 .hero-page__visuel--theatre .theatre__tuile img, .hero-page__visuel--theatre .theatre__tuile img{ width: 100%; height: 100%; }
.dirips-2026 .hero-page__visuel--theatre .theatre__illus, .hero-page__visuel--theatre .theatre__illus{ width: 100%; height: 100%; }
.dirips-2026 .hero-page__visuel--theatre .theatre__vague, .hero-page__visuel--theatre .theatre__vague{ position: absolute; width: 70%; height: auto; }
.dirips-2026 .hero-page__visuel--theatre .theatre__tuile img, .hero-page__visuel--theatre .theatre__tuile img{ position: static; }
.dirips-2026 .hero-page__visuel--theatre .theatre__illus, .hero-page__visuel--theatre .theatre__illus{ position: relative; }
/* Pied de page (retour du 14/09) : le raccourci padding de .fr-pied__haut effaçait
les 24 px latéraux du conteneur — tout collait au bord gauche sur mobile. */
.fr-pied__haut, .fr-pied__bas-int{ padding-left: 24px; padding-right: 24px; }
@media (max-width: 980px){
.fr-pied__haut{ grid-template-columns: 1fr 1fr; gap: 30px 24px; padding: 40px 24px 30px; }
.fr-pied__identite, .fr-pied__newsletter{ grid-column: 1 / -1; }
.fr-pied__bas-int{ padding: 18px 24px; gap: 10px; }
}
@media (max-width: 480px){
.fr-pied__haut{ grid-template-columns: 1fr; }
}
/* Pied de page centré sur mobile (retour client du 14/09). */
@media (max-width: 600px){
.fr-pied__haut{ grid-template-columns: 1fr; text-align: center; justify-items: center; }
.fr-pied__haut > *{ width: 100%; }
.fr-pied__identite img{ margin: 0 auto; display: block; }
.fr-pied__identite address, .fr-pied__identite p{ text-align: center; }
.fr-pied__reseaux{ justify-content: center; display: flex; flex-wrap: wrap; align-items: center; }
.fr-pied__reseaux-titre{ width: 100%; text-align: center; }
.fr-pied__colonne ul{ text-align: center; }
.fr-pied__colonne h2{ text-align: center; }
.fr-pied__colonne a.fr-pied__collab{ display: inline-block; margin-left: auto; margin-right: auto; }
.fr-pied__newsletter .newsletter{ justify-items: center; text-align: center; }
.fr-pied__newsletter .newsletter__form{ justify-content: center; }
.fr-pied__bas-int{ align-items: center; text-align: center; }
.fr-pied__legal{ display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; }
}
/* Retour responsive du 15/09 — chantier 1 : bandes et cartes centrées sur mobile/tablette. */
@media (max-width: 980px){
.cta-bande__carte{ text-align: center; justify-items: center; }
.cta-bande__visuel{ margin: 0 auto; }
.cta-bande__texte p, .cta-bande__texte h2{ margin-left: auto; margin-right: auto; }
.cta-bande__actions{ justify-items: center; width: 100%; }
.cta-bande__actions .fr-btn{ width: min(100%, 360px); text-align: center; white-space: normal; }
.lg-final__carte{ text-align: center; }
.lg-final__carte p{ margin-left: auto; margin-right: auto; }
.lg-final__actions{ justify-items: center; }
.lg-final__actions .fr-btn{ width: min(100%, 360px); text-align: center; }
.wb-invitations__carte{ text-align: center; }
.wb-invitations p{ margin-left: auto; margin-right: auto; }
.wb-invitations__actions{ justify-content: center; }
.wb-invitations__actions .fr-btn{ width: min(100%, 360px); text-align: center; }
.wb-invitations__picto{ margin: 0 auto; }
.nl-bande__carte{ text-align: center; }
.nl-bande__gauche{ grid-template-columns: 1fr; justify-items: center; }
.nl-bande .newsletter{ justify-items: center; }
.nl-bande .newsletter__form, .sa-newsletter .newsletter__form{ justify-content: center; }
.nl-bande .newsletter__form .btn{ min-width: 180px; }
.doc-logiciel__carte{ text-align: center; }
.doc-logiciel__carte::before{ left: 50%; transform: translateX(-50%); }
.doc-logiciel__carte p{ margin-left: auto; margin-right: auto; }
.doc-logiciel__actions{ justify-content: center; }
.doc-logiciel__actions .fr-btn{ width: min(100%, 360px); text-align: center; }
.sa-newsletter{ text-align: center; }
}
@media (max-width: 980px){ .doc-logiciel__carte{ display: grid; grid-template-columns: 1fr; justify-items: center; } }
/* Retour responsive du 15/09 — chantier 2 : le mot NEWSLETTER ne se coupe plus
(« NEWSLETTE / R ») ; il se réduit avec l'écran au lieu de passer à la ligne. */
.nl-bande__mot{ white-space: nowrap; overflow-wrap: normal; }
@media (max-width: 980px){ .nl-bande__mot{ font-size: clamp(1.5rem, 8.6vw, 2.9rem); letter-spacing: .01em; } }
/* Retour responsive du 15/09 — chantier 3 : dans les listes documentaires, le
libellé du lien (nowrap + points de suspension) débordait de la carte sur
mobile ; il passe à la ligne, sous le texte, aligné à gauche. */
@media (max-width: 980px){
.doc-entree__liens{ grid-column: 1 / -1; justify-items: start; min-width: 0; width: 100%; }
.doc-entree__liens li{ min-width: 0; max-width: 100%; }
.doc-entree__liens a{ max-width: 100%; min-width: 0; text-align: left; align-items: flex-start; }
.doc-entree__liens a span{ white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.doc-entree__liens a::after{ margin-top: .15em; }
}
/* Pied de page (retour du 15/09) : « ça respire un peu trop les uns sur les
autres » — colonnes plus espacées, liens plus aérés, ligne légale détachée. */
.fr-pied__haut{ gap: 64px; padding: 76px 24px 60px; }
.fr-pied__colonne h2{ margin-bottom: 24px; padding-bottom: 16px; }
.fr-pied__colonne li{ margin-bottom: 18px; }
.fr-pied__colonne li:last-child{ margin-bottom: 0; }
.fr-pied__collab{ margin-top: 32px; }
.fr-pied__identite img{ margin-bottom: 26px; }
.fr-pied__raison{ margin-bottom: 18px; }
.fr-pied__identite address{ line-height: 1.85; margin-bottom: 18px; }
.fr-pied__tel{ margin: 0 0 4px; }
.fr-pied__reseaux{ margin-top: 26px; gap: 14px; }
.fr-pied__newsletter .newsletter{ gap: 16px; }
.fr-pied__newsletter .newsletter p{ line-height: 1.7; }
.fr-pied__newsletter .newsletter__form{ margin-top: 2px; gap: 10px; }
.fr-pied__bas-int{ padding: 26px 24px; gap: 18px 28px; }
.fr-pied__legal{ gap: 28px; }
@media (max-width: 980px){
.fr-pied__haut{ gap: 40px 28px; padding: 52px 24px 40px; }
}
/* Pied (retour du 15/09) : « Devenir collaborateur » coupé en deux lignes et
champ e-mail tronqué — la colonne newsletter gagne de la place, le bouton
tient sur une ligne et le formulaire s'empile. */
.fr-pied__colonne a.fr-pied__collab{ white-space: nowrap; font-size: .72rem; padding: 12px 20px; }
.fr-pied__newsletter .newsletter__form{ flex-direction: column; align-items: stretch; gap: 12px; }
.fr-pied__newsletter .newsletter__form input[type="email"]{ flex: 1 1 auto; width: 100%; }
.fr-pied__newsletter .newsletter__form .btn{ width: 100%; justify-content: center; }
@media (max-width: 980px){
.fr-pied__newsletter .newsletter__form{ flex-direction: row; align-items: center; }
.fr-pied__newsletter .newsletter__form input[type="email"]{ flex: 1 1 200px; width: auto; }
.fr-pied__newsletter .newsletter__form .btn{ width: auto; }
}
@media (max-width: 560px){
.fr-pied__newsletter .newsletter__form{ flex-direction: column; }
.fr-pied__newsletter .newsletter__form input[type="email"], .fr-pied__newsletter .newsletter__form .btn{ width: 100%; }
}
/* Bandeau échéance (15/09) : le point gris de séparation collait trop loin du
point vert de l'entrée suivante — l'écart se resserre. */
.fr-echeance--defile .fr-echeance__item{ padding-left: 14px; padding-right: 14px; }
.fr-echeance--defile .fr-echeance__item::after{ margin-left: 10px; }
@media (max-width: 700px){ .fr-echeance--defile .fr-echeance__item{ padding-left: 12px; padding-right: 12px; } }
/* Retour du 16/09 — points 1 à 3 */
/* 1. Bandeau échéance : entrées encore rapprochées. */
.fr-echeance--defile .fr-echeance__item{ padding-left: 200px; padding-right: 200px; gap: 10px; }
.fr-echeance--defile .fr-echeance__item::after{ margin-left: 6px; }
@media (max-width: 700px){ .fr-echeance--defile .fr-echeance__item{ padding-left: 12px; padding-right: 12px; } }
/* 2. Bannière À propos : moins de vide autour du texte. */
.ent-hero{ padding: 40px 0 44px; }
.ent-hero__int{ min-height: 0; }
.ent-hero__chapo{ margin-bottom: 22px; }
.ent-hero__texte h1{ margin-bottom: 16px; }
/* 3. Le bandeau newsletter du .fr ferme les pages, juste au-dessus du pied. */
.nl-bande + .fr-pied, .fr-pied{ margin-top: 0; }
.nl-bande:last-of-type{ padding-bottom: 54px; }
/* Bannière d'accueil (16/09) : « remonter, que ce soit toujours dans la ligne
de flottaison de chaque écran ». Sa hauteur suit désormais celle de l'écran —
en-tête (100 px) et bandeau d'échéance (60 px) déduits — au lieu des 900 px
fixes hérités du .fr, deux fois plus haut que l'écran utile d'un 13 pouces. */
/* 16/09 : « un peu haut, et trop d'espace bleu en bas » — la bannière se cale
sur son contenu, le reste de la hauteur d'écran n'est plus du vide. */
.fr-hero, .fr-hero__int{ min-height: min(600px, calc(100svh - 168px)) !important; }
.fr-hero__int{ align-items: center !important; }
.fr-hero__int{ padding-top: clamp(28px, 7vh, 110px) !important; padding-bottom: clamp(24px, 5vh, 60px) !important; }
@media (max-width: 980px){
.fr-hero, .fr-hero__int{ min-height: 0 !important; }
.fr-hero__int{ padding-top: 40px !important; padding-bottom: 36px !important; }
}
/* Écrans peu hauts (13 pouces, 1280x650…) : le texte de la bannière se compacte
pour que le bandeau d'échéance reste au-dessus de la ligne de flottaison. */
@media (min-width: 981px) and (max-height: 860px){
.fr-hero__int{ padding-top: 24px !important; padding-bottom: 20px !important; }
.fr-hero h1{ font-size: clamp(1.7rem, 2.5vw, 2.3rem) !important; margin: 0 0 10px !important; }
.fr-hero__texte p{ font-size: .95rem !important; line-height: 1.55 !important; margin-bottom: 10px !important; }
.fr-hero__actions{ margin-top: 18px !important; }
}
@media (max-width: 980px){
.fr-hero__int{ padding-top: 24px !important; padding-bottom: 24px !important; }
.fr-hero__texte p{ line-height: 1.6; margin-bottom: 12px; }
.fr-hero__actions{ margin-top: 20px; }
}
/* Pied (16/09) : la colonne newsletter est partie avec le bandeau du .fr ; les
trois blocs restants se répartissent la largeur au lieu de laisser un vide. */
@media (min-width: 981px){
.fr-pied__haut{ grid-template-columns: minmax(280px, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 72px; }
.fr-pied__colonne{ max-width: 320px; }
}
/* Retour du 16/09 — points 7 et 9 */
/* 9. Bandeau des repères et bloc Qualiopi : plus d'air. */
.ac-reperes{ padding: 44px 0; }
.ac-reperes__liste{ gap: 30px 48px; }
.ac-repere{ align-items: start; }
.ac-repere h2{ margin-bottom: 7px; }
.ac-repere p{ margin-bottom: 10px; }
.ac-formation__int{ gap: 56px; }
.ac-formation__gauche p{ margin-bottom: 14px; }
.ac-formation__gauche p:last-child{ margin-bottom: 0; }
.ac-qualiopi{ margin: 22px 0 20px !important; padding: 14px 20px; line-height: 1.5; }
.ac-certificats{ gap: 24px; }
.ac-certificat{ padding: 22px 22px 24px; }
.ac-chiffres{ padding-top: 54px; }
/* Retour du 16/09 — points 12 et 14 */
/* 12. Veille réglementaire : les textes respirent sur toute la page. */
.vr-hero__chapo{ line-height: 1.8; margin-bottom: 20px; }
.vr-hero__relance{ line-height: 1.8; margin-bottom: 26px; }
.vr-rubriques{ padding: 62px 0 68px; }
.vr-rubriques__tete{ margin-bottom: 40px; }
.vr-usages{ padding: 46px 0 62px; }
.vr-usages__int{ gap: 56px; }
.vr-usages__droite > p{ line-height: 1.8; margin-bottom: 24px; }
.vr-usages__pied{ line-height: 1.8; margin-top: 28px; }
.vr-citations{ padding: 30px 0 62px; }
.vr-citations__liste{ gap: 26px; }
.vr-citations figure{ padding: 26px 28px; }
.vr-citations blockquote p{ line-height: 1.75; }
.vr-citations figcaption{ margin-top: 14px; }
/* 14. Les autres références : la carte masquée ne réserve plus sa colonne. */
.doc-autres__liste{ display: grid !important; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important; gap: 20px; }
.doc-autres__liste{ justify-items: stretch !important; }
.doc-autres__liste > li{ min-width: 0; width: 100%; }
.doc-autres__liste > li > button{ width: 100%; }
.doc-autres__liste > li[hidden]{ display: none !important; }
/* Retour Sylvain 16/09 : le titre du bandeau newsletter collait à sa phrase. */
.newsletter__texte h2, .nl-bande .newsletter__texte h2{ margin-bottom: 12px; }
/* Retour Sylvain 16/09 : sur la page Partenaires, les repères et les domaines
se lisaient comme un seul bloc. Un filet et un intertitre séparent les deux
rangées. */
/* Deux dégradés accolés dessinaient une cassure au milieu du bloc bleu :
les deux rangées partagent un aplat uni et des marges symétriques. La
feuille d'harmonisation repose le dégradé, d'où la spécificité. */
body.page-id-431 #main .di-reperes--page{ padding-top: 44px; padding-bottom: 14px; }
body.page-id-431 #main .di-reperes--page + .part-domaines{ padding-top: 26px; padding-bottom: 44px; }
.part-domaines__surtitre{
margin: 0 0 22px; font-family: var(--font-heading); font-size: .76rem; font-weight: 700;
letter-spacing: .16em; text-transform: uppercase; color: #9FA8DC;
}
/* Les pictos des domaines étaient plus petits et plats, ceux des repères en
relief : même gabarit pour les deux rangées. */
.part-domaine{ grid-template-columns: 75px minmax(0, 1fr); gap: 20px; }
/* Les traits verticaux décalaient les colonnes 2 et 3 : sans eux, les pictos
des domaines tombent pile sous ceux des repères. */
.part-domaines__liste{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 40px; }
.part-domaine + .part-domaine{ border-left: 0; padding-left: 0; }
@media (max-width: 980px){ .part-domaines__liste{ grid-template-columns: 1fr; } }
.part-domaine__picto{
width: 75px; height: 75px; border-radius: 15px; padding: 15px;
box-shadow: -6px 6px 0 0 rgba(247, 221, 236, .95), 0 18px 34px -16px rgba(30, 26, 107, .35);
}
.part-domaine__picto svg{ width: 100%; height: 100%; }
/* Bannière Nos logiciels : les boutons collaient à la dernière puce. */
body.dirips-harmonisation-v1 #main .nl-hero__gamme + .nl-hero__actions,
.nl-hero__gamme + .nl-hero__actions{ margin-top: 26px; }
/* Retour Sylvain 16/09 : la colonne de gauche restait vide sous le titre,
le logo s'y pose en filigrane. */
.nl-integration__gauche{ position: relative; }
.nl-integration__gauche::after{
content: ''; display: block; margin-top: 30px; height: 210px;
background: url('assets/img/logo.webp') left center / contain no-repeat;
opacity: .08; pointer-events: none;
}
@media (max-width: 980px){ .nl-integration__gauche::after{ display: none; } }
/* Retour Sylvain 16/09 : tous les bandeaux du site suivent celui validé sur
la page Partenaires — pictos de 75 px en relief, trois colonnes alignées,
plus aucun trait vertical entre les blocs. */
.lg-promesses__liste{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 40px; }
.lg-promesse{ grid-template-columns: 75px minmax(0, 1fr); gap: 20px; }
.lg-promesse__picto{ width: 75px; height: 75px; border-radius: 15px; padding: 15px; }
.lg-promesse__picto svg{ width: 100%; height: 100%; }
/* Les traits verticaux décalaient les colonnes de droite. */
.lg-promesse + .lg-promesse,
.ac-assistance li + li,
.op-atouts li + li{ border-left: 0; padding-left: 0; }
/* Même relief que les repères sur tous les pictos de bandeau. */
.lg-promesse__picto, .nl-promesse__picto, .ac-canal__picto, .op-atout__picto, .part-domaine__picto{
box-shadow: -6px 6px 0 0 rgba(247, 221, 236, .95), 0 18px 34px -16px rgba(30, 26, 107, .35);
}
@media (max-width: 980px){
.lg-promesses__liste{ grid-template-columns: 1fr; }
}
/* 16/09 : On-premise et Cloud, retour client « justifié » — les intitulés des
trois familles ne sont plus centrés ligne à ligne : bloc centré sous le titre,
texte justifié à l intérieur. */
.op-atout .op-atout__points{ justify-self: stretch; text-align: left; }
/* 16/09 : bandeau bleu des repères, retour client sur Veille (« espacer titre
et sous-titre ») — appliqué à tous les bandeaux pour rester cohérent. */
.di-repere__titre{ margin-bottom: 10px; }
/* 16/09, lot Veille / EPRD / pages documentaires ------------------------- */
/* Veille : « espacer la dernière phrase » sous les deux cartes logiciels. */
.vr-usages .vr-usages__pied{ margin-top: 44px; }
/* Bande Gestionnaire sans sous-titre : titre à la hauteur des boutons. */
.doc-logiciel__carte--titre-seul h2{ margin: 6px 0 0; }
.doc-logiciel__carte--titre-seul::before{ top: 20px; }
.nl-bande + .doc-logiciel{ padding-top: 34px; }
/* Fiches cadres, « Qu'apporte Gestionnaire … » : texte et bouton centrés. */
.cf-logiciel__carte{ display: grid; justify-items: center; text-align: center; }
.cf-logiciel__carte::before{ left: 50%; transform: translateX(-50%); }
.cf-logiciel h2{ margin-left: auto; margin-right: auto; }
.cf-logiciel__texte{ margin-left: auto; margin-right: auto; }
.cf-logiciel .cf-atouts{ width: 100%; max-width: 78ch; text-align: left; }
/* Cadres réglementaires, « ajuster les cadres » : les trois cartes du contenu
importé prennent la même hauteur quelle que soit la longueur du titre. */
.fr-cartes{ align-items: stretch; }
.fr-cartes > .fr-carte{ align-self: stretch; height: auto; }
.cf-logiciel .cf-atouts{ max-width: 88ch; }
/* 16/09 : bande finale des fiches cadres « arrondir les bords », comme les
autres bandes (carte indigo dans le conteneur, plus de pleine largeur). */
.cf-final{ background: transparent; padding: 0 0 48px; }
.cf-final .container{ background: #2A2586; border-radius: 18px; padding: 44px 28px 48px; }
/* 16/09 : Webinaires, « Une question sur votre établissement ? » — une ligne
d espace entre le titre et son sous-titre. */
.wb-question h2 + p{ margin-top: 18px; }
/* 16/09 : Webinaires, intro de « Les ressources des acteurs du secteur ». */
.wb-acteurs__tete{ margin-bottom: 26px; }
.wb-acteurs__intro{ color: var(--dh-muted, #4A4E66); line-height: 1.7; font-size: .98rem; max-width: none; margin: 14px 0 0; }
/* Retour client 18/09 : les sigles mis en gras au fil du texte doivent
redevenir du texte courant. */
.rc-texte__cle,
.rc-bande .rc-texte__cle,
.rc-bande__pied .rc-texte__cle,
.rc-bande .rc-fiche .rc-texte__cle{ color: inherit; font-weight: inherit; }
/* Retour client 23/09 : toutes les icônes de fiche portent le même cadre en
relief. Celles dont le fichier dessine déjà le sien gardent leur rendu. */
.rc-fiche__icone--cadre{
background: #fff; border-radius: 15px; padding: 14px;
box-shadow: -6px 6px 0 0 rgba(157, 190, 244, .47), 0 18px 34px -16px rgba(30, 26, 107, .28);
}
.rc-fiche__icone--cadre img{ width: 100%; height: 100%; filter: none; }
/* Retour client 23/09 : le paragraphe de bas de bande est mis en valeur,
police plus grande et centré. */
.rc-bande__pied{ text-align: center; }
.rc-bande__pied p{ font-size: 1.12rem; line-height: 1.7; max-width: 70ch; margin-left: auto; margin-right: auto; }
/* Retour client 23/09 : la liste des témoignages reçoit le logo en filigrane,
comme le fond de leur exemple. */
.tm-liste{ position: relative; overflow: hidden; }
.tm-liste::before{
content: ''; position: absolute; left: -6%; top: 6%;
width: 62%; aspect-ratio: 170 / 52;
background: url('assets/img/logo.png') left top / contain no-repeat;
opacity: .07; pointer-events: none; z-index: 0;
}
.tm-liste::after{
content: ''; position: absolute; right: -8%; bottom: 4%;
width: 52%; aspect-ratio: 170 / 52;
background: url('assets/img/logo.png') right bottom / contain no-repeat;
opacity: .05; pointer-events: none; z-index: 0;
}
.tm-liste > .container{ position: relative; z-index: 1; }
@media (max-width: 980px){ .tm-liste::before{ width: 90%; left: -10%; } }
/* 12/10/2026 — retours client du 05/10.
Les boutons placés dans une liste de liens fléchés (.tm-relation__liens) prenaient la couleur
verte des liens au survol, sur un fond devenu vert : le texte disparaissait. */
html body .tm-relation__liens a.fr-btn:hover{ color: #fff !important; }
/* Le panneau des pages documentaires se recale sous l'en-tête fixe quand on change de famille. */
.doc-panneau{ scroll-margin-top: 110px; }
/* Support PDF d'un webinaire (ancien shortcode gview du .com). */
.doc-pdf{ margin: 28px 0; }
.doc-pdf iframe{ width: 100%; height: 620px; border: 1px solid #E4EAF6; border-radius: 12px; background: #F6F8FD; }
.doc-pdf__lien{ display: inline-block; margin-top: 10px; font-weight: 600; }
@media (max-width: 720px){ .doc-pdf iframe{ height: 420px; } }
/* Le pli ouvert par une ancre se cale sous l'en-tête fixe. */
details.fr-pli{ scroll-margin-top: 110px; }
/* 12/10/2026 — page des cadres : seconde ligne du titre en bleu ciel (retour client du 05/10). */
.tc-hero h1 span{ color: var(--fr-bleu-pale); }
.tc-hero .op-btn-bas + .op-btn-bas{ margin-left: 12px; }
@media (max-width: 640px){ .tc-hero .op-btn-bas + .op-btn-bas{ margin-left: 0; margin-top: 12px; } }
/* Bandeau bleu à deux repères : deux colonnes centrées plutôt qu'un trou à droite. */
.di-reperes__liste:has(> li:nth-child(2):last-child){ grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 860px; margin-left: auto; margin-right: auto; }
/* Carte de famille active survolée : tout le texte passe en blanc sur le vert. */
html body .doc-famille.est-actif:hover, html body .doc-famille.est-actif:hover *{ color: #fff !important; }
/* 12/10/2026 — « Pour approfondir » (Gestionnaire) ne colle plus au bloc du dessus. */
.lg-ressources{ padding-top: 64px; }
/* Pages de veille : deux boutons dans la bannière. */
.doc-hero__actions{ display: flex; flex-wrap: wrap; gap: 12px; }
.doc-hero__actions .op-btn-bas{ margin: 0; }
/* Chapô des pages de veille en deux paragraphes. */
.doc-hero__chapo + .doc-hero__chapo{ margin-top: 10px; }
/* 13/10/2026 — réponses de Dir IPS du 12/10. */
.contact-portes{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px){ .contact-portes{ grid-template-columns: 1fr; } }
.tc-raccourcis{ background: #F4F7FD; }
html body .lg-final{ padding-top: 72px; padding-bottom: 72px; }
html body .lg-final .lg-final__carte{ margin-top: 0; margin-bottom: 0; }
.cf-logiciel__liste{ margin: 4px 0 18px; padding-left: 1.2em; color: #E7EAFB; line-height: 1.7; }
.cf-logiciel__liste li{ margin: 0 0 8px; }
.cf-logiciel__liste a{ color: #fff; text-decoration: underline; }
.doc-gate-ok{ position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 1000; margin: 0;
background: #0E9E82; color: #fff; padding: 12px 20px; border-radius: 10px; font-weight: 600; box-shadow: 0 12px 26px rgba(14, 158, 130, .32); }
.doc-gate__carte form label{ display: block; }
/* 13/10/2026 — lot des retours faisables sans arbitrage. */
/* Liens dans les textes : le bleu que le client a désigné (avertissement HAPI), partout sur fond clair. */
.jur-bloc__corps a, .doc-section__intro a, .doc-contexte__texte a, .part-fiche__texte a, .tc-contexte__corps a,
.tc-provenance a, .cf-comprendre a, .cf-preparer__texte a, .rc-fiche p a, .fr-bloc__texte p a, .dirips-consent a,
.fr-dpo a, .vr-entree p a, .article-corps a, .page-corps p a, .fr-pli__corps p a{
color: var(--fr-bleu-clair, #4A54D6); text-decoration: underline; text-underline-offset: 2px;
}
/* Pictogrammes des textes de veille selon le type. */
.doc-entree__picto--pdf{ color: #C2410C; }
.doc-entree__picto--tableur{ color: #15803D; }
.doc-entree__picto--lien{ color: var(--fr-bleu-clair, #4A54D6); }
/* Blocs « large » : le texte occupe toute la largeur du bloc (T09). */
.rc-fiche--large p, .rc-fiche--large h3{ max-width: none; }
.rc-fiche .sa-service__lien{ display: inline-block; margin-top: 12px; }
/* Webinaires (R133) : moins de blanc avant « Les webinaires en détail ». */
.wb-question + .rc-detail{ padding-top: 24px; }
/* Dir IPS (R161) : les deux encarts alignés sur la hauteur. */
.di-secteurs__pied{ align-items: center; }
/* Titre du formulaire des cadres à la taille des autres titres de la page (R042). */
.fr-seuil__titre{ font-size: clamp(1.5rem, 2.4vw, 1.9rem); font-weight: 800; color: var(--navy, #2A2586); }
/* 13/10/2026 : le lien de consentement suit la couleur des liens de texte. */
.dirips-consent label > span a{ color: var(--fr-bleu-clair, #4A54D6) !important; }
/* 24/10/2026 : lien vers la page Démarche Qualité Projet sous la frise d'Accompagnement. */
.ac-parcours__lien{ text-align: center; margin: 28px 0 0; }
/* 24/10/2026 : page Démarche Qualité Projet (gabarit page-demarche-qualite-projet.php). */
.dq-section{ padding: 76px 0; }
.dq-intro{ max-width: 760px; color: #4A4E66; font-size: 1.02rem; line-height: 1.75; margin: 14px 0 0; }
.dq-phases{ list-style: none; padding: 0; margin: 30px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.dq-phase{ background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 26px 24px; box-shadow: 0 18px 36px -28px rgba(30, 26, 107, .35); }
.dq-phase__num{ display: inline-block; font-weight: 800; color: var(--fr-bleu-clair, #4A54D6); font-size: .92rem; letter-spacing: .08em; margin-bottom: 8px; }
.dq-phase h3{ font-size: 1.12rem; color: var(--navy, #2A2586); margin: 0 0 10px; }
.dq-phase p{ color: #4A4E66; font-size: .95rem; line-height: 1.7; margin: 0 0 8px; }
.dq-phase p:last-child{ margin-bottom: 0; }
.dq-schema{ margin: 30px auto 0; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 20px; max-width: 1120px; box-shadow: 0 18px 36px -28px rgba(30, 26, 107, .35); }
.dq-schema img{ display: block; width: 100%; height: auto; }
.dq-schema--etroit{ max-width: 760px; }
.dq-schema--carre{ margin: 0; max-width: 460px; justify-self: end; }
.dq-archi{ display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 36px; align-items: center; margin-top: 30px; }
.dq-offres{ list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.dq-offres li{ background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; color: #4A4E66; line-height: 1.65; }
.dq-offres strong{ display: block; color: var(--navy, #2A2586); margin-bottom: 4px; }
@media (max-width: 980px){ .dq-phases{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .dq-archi{ grid-template-columns: 1fr; } .dq-schema--carre{ justify-self: center; } }
@media (max-width: 640px){ .dq-section{ padding: 52px 0; } .dq-phases{ grid-template-columns: 1fr; } .dq-schema{ padding: 12px; } }
/* 24/10/2026 : introductions centrées sous les titres centrés de la page Démarche Qualité Projet. */
.dq-intro{ margin-left: auto; margin-right: auto; text-align: center; }
/* 24/10/2026 : lot des retours faisables du 05/10.
R213 : les deux paragraphes de la bannière Veille à la même largeur. */
.vr-hero__relance{ max-width: 40ch; }
/* R153 : la phrase et le lien du bas du bloc support d'Accompagnement, rapprochés. */
.ac-reponses__bas{ justify-content: center; gap: 10px 26px; }
.ac-reponses__bas p{ max-width: none; }
/* ==========================================================================
28/10/2026 : propositions de mise en page validées par Dir IPS (sauf le point 9).
========================================================================== */
/* 1. Bannières : plus de surtitre, le fil d'Ariane donne la rubrique. */
[class*="-hero__surtitre"], .hero-page .eyebrow--clair{ display: none !important; }
/* Le modèle commun (Ressources, Contact, Actualités…) prend le titre de la maquette. */
.hero-page h1{ font-family: var(--font-heading); font-weight: 800; color: var(--navy); line-height: 1.22; font-size: clamp(2.2rem, 3.5vw, 3rem); text-wrap: balance; }
.hero-page h1 span{ color: var(--fr-bleu-pale); display: block; }
/* Illustrations de L'entreprise et Partenaires calées sur le bord droit et agrandies. */
.ent-hero__visuel, .part-hero__visuel{ justify-self: end; }
.ent-hero__visuel .theatre__illus, .ent-hero__visuel--illus img, .part-hero__visuel .theatre__illus, .part-hero__visuel--illus img{ transform-origin: right center; transform: translateX(24px) scale(1.12); }
/* 2. Citations : la carte de l'accueil prend le style sobre (texte, puis nom et fonction). */
.fr-temoignage{ display: flex; flex-direction: column; position: relative; border-radius: 18px; padding: 38px 40px; box-shadow: 0 18px 40px rgba(42, 37, 134, .10); }
.fr-temoignage::before{ content: '“'; position: absolute; top: 10px; left: 26px; font-family: Georgia, 'Times New Roman', serif; font-size: 4.2rem; line-height: 1; color: var(--fr-vert-clair); }
.fr-temoignage blockquote{ order: 1; margin: 0 0 22px; padding: 0 0 0 34px; border: 0; font-style: italic; color: #2E3459; line-height: 1.8; font-size: 1rem; }
.fr-temoignage figcaption{ order: 2; display: grid; gap: 4px; padding: 20px 0 0 34px; border-top: 1px solid #E6ECF8; }
.fr-temoignage figcaption strong{ font-family: var(--font-heading); font-weight: 700; color: var(--navy); font-size: 1rem; }
.fr-temoignage > :not(blockquote):not(figcaption){ order: 3; }
.rec-temoin--citation .rec-temoin__lien{ margin-top: 14px; }
@media (max-width: 860px){ .fr-temoignage{ padding: 30px 24px; } .fr-temoignage blockquote, .fr-temoignage figcaption{ padding-left: 0; } }
/* 3. Plus de gras dans le texte courant ni d'exergue ; le texte occupe toute la largeur des cartes. */
.rc-fiche h3{ font-family: inherit; font-weight: 400; font-size: .95rem; line-height: 1.72; letter-spacing: 0; color: #4A4E66; }
.rc-bande .rc-fiche h3{ color: #D9DEF6; }
.rc-texte__cle{ font-weight: inherit !important; color: inherit !important; }
.rc-detail__chapo, .rc-texte__chapo{ font-weight: 400; font-size: 1rem; color: #4A4E66; }
.rc-fiche p{ max-width: none; }
/* 4. Un seul format d'image, 3:2, cadré au centre. */
.actu-card img{ height: auto; aspect-ratio: 3 / 2; object-position: center; }
.fr-actu__media{ aspect-ratio: 3 / 2; }
.fr-actu__media img, .wb-une__visuel--image img, .wb-carte__visuel--image img, .article-vedette__visuel img{ object-position: center; }
.wb-carte__visuel--image{ height: auto; aspect-ratio: 3 / 2; }
.wb-une__visuel--image{ aspect-ratio: 3 / 2; align-self: center; }
.article-vedette__visuel{ min-height: 0; aspect-ratio: 3 / 2; align-self: center; }
/* 8. Quatre tuiles sur la veille médico-sociale. */
.doc-familles--groupes{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px){ .doc-familles--groupes{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 28/10/2026 : l'introduction des blocs « en détail » suit la même règle, sans exergue. */
.rc-detail--fiches .rc-detail__chapo{ font-family: inherit; font-weight: 400; font-size: 1rem; line-height: 1.7; color: #4A4E66; }