… ` (fiches « Vos livrables », « Pour qui ? ») laissaient
leur titre en placement automatique, marge basse de 10 px comprise dans la
zone de grille — donc centre 5 px trop haut face a l'icone. Mesure :
5,01 -> 0,00 px. */
.card > h3,.dim > h3{margin:0;grid-column:2;grid-row:1;align-self:center}
/* ---------- segments de timeline : la demi-hauteur du trait ----------
Le designer cale `.tl .s::after` a top:0, soit le centre EXACT de la
pastille — mais le trait fait 1 px de haut et se dessine vers le bas : son
centre tombe donc 0,5 px trop bas. Meme correction que celle appliquee a
l'ancien `.tl::before` (44,5 px et non 45 px). Mesure : 0,50 -> 0,00 px. */
.tl .s::after{top:-.5px}
/* ---------- couvertures des livres blancs ---------- */
/* Hero en vis-a-vis : le texte a gauche, la couverture a droite. Le hero des
livres blancs herite de .page-hero (centre) : on repasse en aligne a gauche
tant que les deux colonnes tiennent cote a cote. */
.lb-hero .split{grid-template-columns:1.15fr .85fr;gap:clamp(32px,4vw,60px)}
.lb-hero{text-align:left}
.lb-hero .hero-txt{max-width:600px}
.lb-hero .lead{margin:0 0 34px}
.lb-hero .ctas{justify-content:flex-start}
.lb-cover{display:flex;justify-content:center}
.lb-cover img{display:block;width:100%;max-width:310px;height:auto;filter:drop-shadow(0 22px 46px rgba(21,34,56,.26))}
@media(max-width:860px){
.lb-hero .split{grid-template-columns:1fr}
.lb-hero{text-align:center}
.lb-hero .hero-txt{margin:0 auto}
.lb-hero .lead{margin:0 auto 34px}
.lb-hero .ctas{justify-content:center}
.lb-cover img{max-width:240px}
}
/* Cartes du hub : vignette de couverture au-dessus du titre. */
.lb-card{display:flex;flex-direction:column}
.lb-card .lb-thumb{display:block;width:auto;max-width:100%;height:190px;object-fit:contain;margin:0 auto 22px;filter:drop-shadow(0 14px 28px rgba(21,34,56,.2))}
/* ---------- avatar des temoignages ---------- */
/* L'avatar est un pictogramme anonyme sur fond navy : un liseré teal le
detache de la carte, elle aussi navy. */
.test .av{box-shadow:0 0 0 1px rgba(63,180,177,.4)}
.test .av img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}
/* ---------- catalogue en menu accordéon (page Teach You) ----------
Treize fiches depliees faisaient un mur illisible. Chaque formation est
maintenant une ligne repliee — intitule, domaine, duree, prix — qu'on
deplie pour lire objectifs et mentions reglementaires.
rend l'accordeon exclusif sans JavaScript ; tout le contenu reste dans le
DOM (opposable Qualiopi + indexable). Les filtres n'agissent que sur
l'affichage. */
.cat-filters{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin:0 auto 32px;max-width:900px}
.cat-chip{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 18px;border-radius:999px;
border:1px solid rgba(35,51,74,.14);background:var(--pure);color:var(--txt);font:inherit;font-size:14px;font-weight:700;
cursor:pointer;transition:border-color .18s var(--ease),background .18s var(--ease),color .18s var(--ease),box-shadow .18s var(--ease)}
.cat-chip span{font-size:12px;font-weight:800;opacity:.6;font-variant-numeric:tabular-nums}
.cat-chip:hover{border-color:var(--teal);color:var(--navy)}
.cat-chip.is-on{background:var(--navy);border-color:var(--navy);color:#fff;box-shadow:var(--e2)}
.cat-chip.is-on span{opacity:.7}
.fiche-menu{display:flex;flex-direction:column;gap:10px;max-width:960px;margin:0 auto}
details.fiche{padding:0;background:var(--pure);border:var(--hair);border-radius:14px;box-shadow:var(--e1);
overflow:hidden;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
details.fiche::before{display:none}
details.fiche.is-off{display:none}
details.fiche[open]{border-color:rgba(63,180,177,.5);box-shadow:var(--e2)}
.fiche-sum{display:grid;grid-template-columns:1fr auto auto auto;gap:20px;align-items:center;
padding:19px 22px;cursor:pointer;list-style:none;transition:background .18s var(--ease)}
.fiche-sum::-webkit-details-marker{display:none}
.fiche-sum:hover{background:var(--white)}
.fiche-sum-t{min-width:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fiche-sum-t b{font-size:17px;font-weight:700;color:var(--navy);letter-spacing:-.02em}
.fiche-sum-t em{flex-basis:100%;font-style:normal;font-size:13px;color:var(--accent)}
.fiche-sum .m-dur{background:rgba(63,180,177,.10);color:var(--teal-dark);font-size:12.5px;font-weight:700;
padding:5px 12px;border-radius:8px;white-space:nowrap;font-variant-numeric:tabular-nums}
.fiche-sum-p{font-size:16px;font-weight:800;color:var(--navy);letter-spacing:-.025em;white-space:nowrap;font-variant-numeric:tabular-nums}
.fiche-sum-p i{font-style:normal;font-size:11px;font-weight:600;color:var(--accent);letter-spacing:0}
.fiche-chev{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;
background:rgba(35,51,74,.06);color:var(--navy);font-size:15px;font-weight:700;flex:0 0 32px;transition:transform .25s var(--ease),background .2s,color .2s}
details.fiche[open] .fiche-chev{transform:rotate(180deg);background:var(--teal);color:#fff}
.fiche-open{padding:2px 22px 24px}
.fiche-open>p{margin:0 0 20px;max-width:74ch;font-size:15px;line-height:1.65;color:var(--txt);
border-top:1px solid rgba(35,51,74,.09);padding-top:20px}
details.fiche .fiche-obj{margin-bottom:18px}
details.fiche dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:14px 20px;margin:0 0 20px}
details.fiche[open] .fiche-open{animation:tfRise .28s var(--ease) both}
@keyframes tfRise{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){details.fiche[open] .fiche-open{animation:none}.fiche-chev{transition:none}}
@media(max-width:640px){
.fiche-sum{grid-template-columns:1fr auto;gap:10px 14px}
.fiche-sum .m-dur{grid-column:1;grid-row:2;justify-self:start}
.fiche-sum-p{grid-column:2;grid-row:2;justify-self:end}
.fiche-chev{grid-column:2;grid-row:1}
}
/* Marque officielle Qualiopi : deposer /assets/docs/qualiopi-marque.png (fichier du certificateur, non recree). */
.qualiopi-logo{display:block;width:100%;max-width:150px;height:auto;margin:14px auto 0;padding-top:14px;border-top:1px solid rgba(35,51,74,.1)}
/* Bilan de compétences : carte nuit, pour la sortir du flux clair. */
.bilan-navy .eyebrow{color:var(--teal)}
.bilan-navy .eyebrow::before{background:var(--teal)}
.bilan-navy h2{color:#fff}
.bilan-navy .btn-teal{box-shadow:0 8px 24px -6px rgba(63,180,177,.5)}
/* Sur mesure : puces alignees sur une pastille check, texte en retrait constant. */
.check-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.check-list li{position:relative;padding-left:30px;font-size:15px;line-height:1.5;color:var(--txt)}
.check-list li::before{content:"✓";position:absolute;left:0;top:1px;display:flex;align-items:center;justify-content:center;
width:20px;height:20px;border-radius:50%;background:rgba(63,180,177,.14);color:var(--teal-dark);font-size:11px;font-weight:900}
/* ---------- indicateurs Qualiopi : note nue sur nuit, sobre et lisible ----------
Retrait de la boite gris-bleu qui salissait le fond. La note devient nue :
chiffre blanc, "/20" en teal a la meme ligne de base, libelle aere. Filets
fins blancs a 12% pour separer sans cloisonner. */
.sec-navy .kpis-row{background:transparent;border:0;box-shadow:none;max-width:1000px;gap:0}
.sec-navy .kpi{padding:8px 30px;border-left:1px solid rgba(255,255,255,.12)}
.sec-navy .kpi:first-child{border-left:0}
.sec-navy .kpi>b{display:block;font-size:clamp(46px,5vw,62px);font-weight:800;color:#fff;
letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.sec-navy .kpi .kpi-sur{font-size:.34em;font-weight:700;color:var(--teal);letter-spacing:0;margin-left:3px;vertical-align:baseline}
.sec-navy .kpi>span{display:block;max-width:20ch;margin:16px auto 0;font-size:12px;font-weight:800;
letter-spacing:.11em;text-transform:uppercase;color:rgba(255,255,255,.6);line-height:1.5}
@media(max-width:760px){
.sec-navy .kpis-row{grid-template-columns:1fr;row-gap:30px}
.sec-navy .kpi{border-left:0;padding:0 20px}
.sec-navy .kpi:not(:first-child){padding-top:30px;border-top:1px solid rgba(255,255,255,.12)}
}
/* cartes : contenu ancre en haut — sinon, a hauteur egale, le contenu se
centre et les listes ne s'alignent plus d'une carte a l'autre. */
.card,.dim{align-content:start}
/* ---------- Bilan de compétences : bandeau nuit pleine largeur ----------
Reprend la version en ligne : grand titre, sous-titre a mots-cles teal,
bouton a droite, halo doux dans l'angle. */
.bilan{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:36px;align-items:center;
background:var(--navy);border-radius:var(--r-xl);padding:clamp(40px,5vw,72px) clamp(28px,4vw,60px);box-shadow:var(--e3)}
.bilan::before{content:"";position:absolute;top:50%;right:4%;width:48%;height:190%;transform:translateY(-50%);pointer-events:none;
background:radial-gradient(circle,rgba(255,255,255,.11),rgba(255,255,255,0) 60%)}
.bilan-txt{position:relative}
.bilan-txt h2{margin:0;color:#fff;font-size:clamp(38px,5.2vw,68px);font-weight:800;letter-spacing:-.035em;line-height:1.02}
.bilan-txt p{margin:22px 0 0;max-width:56ch;font-size:clamp(16px,1.7vw,19px);font-weight:600;color:rgba(255,255,255,.8);line-height:1.5}
.bilan-txt p i{font-style:normal;color:var(--teal)}
.bilan .btn{position:relative;white-space:nowrap}
@media(max-width:760px){.bilan{grid-template-columns:1fr;gap:28px}.bilan .btn{justify-self:start}}
/* ============================================================================
LIVRAISON 6 — page Done With You (delta reporte de livraison 5 -> 6)
Blocs : .plans-2, .who-sec.on-white, avis Google (.test-top/.test-stars/
.test-src), bande a 4 chiffres (:has), filet vertical, mur d'avis defilant
(.mq/.mq-track + marquee), etiquette Recommandation, portraits recadres,
boutons de prix a hauteur egale. Place AVANT le bloc ALIGNEMENT.
============================================================================ */
/* Deux formules (Done With You) : grille a 2 colonnes centree, pas 4. */
.plans.plans-2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:820px;margin:0 auto}
@media(max-width:720px){.plans.plans-2{grid-template-columns:1fr}}
/* Pour qui sur fond blanc quand l'alternance l'exige (page Done With You). */
.who-sec.on-white{background:var(--pure)}
/* Avis Google : etoiles + badge source, en tete de temoignage. */
.test-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.test-stars{color:var(--gold);font-size:15px;letter-spacing:2px;line-height:1}
.test-src{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:rgba(255,255,255,.62);letter-spacing:.02em}
.test-src svg{display:block;background:#fff;border-radius:3px;padding:2px;box-sizing:content-box}
/* ---------- bande de chiffres : colonnes = nombre de chiffres ----------
.stats-row etait fige a 3 colonnes. La page Done With You en a 4 : le
quatrieme chiffre retombait sur une 2e ligne et chevauchait le premier.
:has() ajuste le nombre de colonnes au nombre reel de .stat. */
.stats-sec .stats-row:has(.stat:nth-child(4)){grid-template-columns:repeat(4,minmax(0,1fr))}
.stats-sec .stats-row:has(.stat:nth-child(5)):not(:has(.stat:nth-child(6))){grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:760px){
.stats-sec .stats-row,
.stats-sec .stats-row:has(.stat:nth-child(4)),
.stats-sec .stats-row:has(.stat:nth-child(5)):not(:has(.stat:nth-child(6))){grid-template-columns:repeat(2,minmax(0,1fr));row-gap:30px}
}
@media(max-width:430px){
.stats-sec .stats-row,
.stats-sec .stats-row:has(.stat:nth-child(4)),
.stats-sec .stats-row:has(.stat:nth-child(5)):not(:has(.stat:nth-child(6))){grid-template-columns:1fr;row-gap:26px}
}
/* filet vertical entre les chiffres de la bande navy (comme la homepage) */
.stats-sec .stat{position:relative}
.stats-sec .stat + .stat::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:56px;background:rgba(255,255,255,.16)}
@media(max-width:760px){.stats-sec .stat + .stat::before{display:none}}
/* ---------- mur de temoignages defilant (2 rangs) ----------
15 avis : presentes en grille, la section devenait un tres long pave. Deux
rangs qui derivent en sens inverse, en pause au survol pour laisser lire,
et statiques (grille qui s'enroule) si l'utilisateur limite les animations. */
.mq{display:flex;flex-direction:column;gap:22px;overflow:hidden;padding:8px 0}
.mq-row{position:relative;overflow:hidden}
.mq-track{display:flex;gap:22px;width:max-content;will-change:transform}
.mq-a{animation:mqA 64s linear infinite}
.mq-b{animation:mqB 78s linear infinite}
.mq-row:hover .mq-track{animation-play-state:paused}
@keyframes mqA{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes mqB{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.mq .test{flex:0 0 clamp(300px,26vw,380px);width:clamp(300px,26vw,380px);margin:0}
.mq-fade{position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none}
.mq-fade-l{left:0;background:linear-gradient(90deg,var(--pure),rgba(255,255,255,0))}
.mq-fade-r{right:0;background:linear-gradient(270deg,var(--pure),rgba(255,255,255,0))}
@media(max-width:620px){.mq .test{flex-basis:82vw;width:82vw}.mq-fade{width:40px}}
@media(prefers-reduced-motion:reduce){
.mq{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:22px}
.mq-row{overflow:visible;display:contents}
.mq-track{animation:none;width:auto;flex-wrap:wrap;justify-content:center;gap:22px}
.mq-track .test:nth-child(n+8){display:none} /* on n'affiche pas les doublons */
.mq-fade{display:none}
}
/* etiquette « Recommandation » (cartes hors Google) */
.test-tag{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--teal)}
.test-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--teal)}
/* ---------- portraits equipe : recadres a la source ----------
Les 7 fichiers 480x480 sont pre-recadres (taille de visage identique, ligne
des yeux a 38%). Plus aucune transformation par personne : object-fit cover
suffit, ce qui garantit le meme rendu en desktop, tablette et mobile. */
.tm-photo img{object-position:center;transition:transform .5s var(--ease)}
.tm:hover .tm-photo img{transform:scale(1.04)}
@media(prefers-reduced-motion:reduce){.tm:hover .tm-photo img{transition:none;transform:none}}
/* ---------- formules a 2 cartes (Done With You) : hauteur de bouton egale ----------
.plan impose 7 rangees grid figees (kind,h3,size,price,ul=1fr,btn,note) pour
les 4 colonnes de Pulse. Ici pas de .size ni .note : le bouton retombait sur
la rangee 1fr et s'etirait pour combler le vide, d'ou deux boutons de
tailles differentes. On repasse ces cartes en flex : seule la liste absorbe
l'espace, le bouton garde sa hauteur naturelle. */
.plans-2 .plan{display:flex;flex-direction:column;grid-template-rows:none}
.plans-2 .plan ul{flex:1 1 auto;margin-bottom:26px}
.plans-2 .plan .btn{flex:0 0 auto;margin-top:auto;min-height:52px;display:inline-flex;align-items:center;justify-content:center}
/* ---------- alignement puce ✓ / texte (retour David) ----------
La pastille etait positionnee en absolu a top:5px : sur une ligne de ~22px
elle flottait au-dessus du texte. Puce et texte passent en grille, alignes
en haut, la pastille centree optiquement sur la premiere ligne. */
.plan li,.card li,.checks li{display:grid;grid-template-columns:17px minmax(0,1fr);gap:11px;align-items:start;padding-left:0}
.plan li::before,.card li::before,.checks li::before{position:static;left:auto;top:auto;margin-top:3px}
.checks li{grid-template-columns:20px minmax(0,1fr)}
.checks li::before{width:20px;height:20px;line-height:20px;margin-top:2px}
/* ============================================================================
LIVRAISON 7 — page Done For You restauree + direction Nuit (delta 6 -> 7)
Place AVANT le bloc ALIGNEMENT (dernier de la cascade).
============================================================================ */
/* ---------- .card avec description ET liste ----------
La grille .card place et
sur grid-row 2 : quand une carte porte les
deux, ils se superposent. Ils prennent chacun leur rangee. */
.card > p{grid-row:2}
.card > ul,.dim > ul{grid-row:3}
.card > p + ul{margin-top:14px}
/* ---------- .grid-2 : deux colonnes explicites ----------
auto-fit remplit autant de colonnes que la largeur permet : sur 4 cartes il
donne 3+1. Les grilles de 4 elements passent en 2x2. */
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:820px){.grid-2{grid-template-columns:1fr}}
/* ---------- hero Nuit sur les pages d'offre ----------
.page-hero est centre et etroit, sans radar. Les regles .hero.nuit couvrent
deja h1, lead, pill et bouton fantome ; il reste le surtitre et le liseré
de bas de hero, qui etaient poses pour un fond clair. */
.hero.nuit.page-hero{background:#111C2E;border-bottom:0}
.hero.nuit .eyebrow{color:rgba(255,255,255,.82)}
.hero.nuit .eyebrow::before{background:var(--teal)}
.hero.nuit .sub{color:rgba(255,255,255,.72)}
/* ---------- .sec-grey : une vraie seconde nuance neutre ----------
.sec-light et .sec-grey retombaient tous deux sur #F7F9FA, donc l'alternance
des fonds ne tenait pas des que les deux se suivaient. .sec-grey prend un
gris legerement plus dense, pris dans la charte (--line / #E3E7EB eclairci). */
.sec-grey{background:#EEF2F4}
/* ---------- .stat small : l'unite accolee au chiffre ----------
« 20 ans » perdait son espace car .stat b est en letter-spacing negatif fort.
L'unite devient un : plus petit, moins serre, detache du nombre. */
.stat b small{font-size:.52em;font-weight:800;letter-spacing:-.01em;margin-left:.12em}
/* ============================================================================
LIVRAISON 8 — page Pulse Fonds (delta reporte de livraison 7 -> 8)
Blocs : .chain, .cmp / .cmp-wrap, .ask, .hero.nuit.or .pill, et le correctif
.card > p / .card > ul en grid-row:auto. Place AVANT le bloc ALIGNEMENT.
============================================================================ */
/* ---------- page Pulse Fonds ----------
.chain : la sequence Pre-Acquisition -> Post-Acquisition -> Sortie sous le
lead du hero. .cmp : le tableau comparatif, colonne Pulse mise en avant.
.ask : la question qui ferme chaque carte module. L'or est structurel ici. */
.chain{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 26px;
font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.chain span{color:var(--gold);font-size:15px;letter-spacing:0}
.card .ask{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
font-size:14px;font-style:italic;line-height:1.55;color:var(--txt)}
.sec-navy .card .ask{border-top-color:rgba(255,255,255,.16);color:rgba(255,255,255,.72)}
.cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 14px;
border:var(--hair);border-radius:var(--r-lg);background:var(--pure);box-shadow:var(--e1)}
.cmp{width:100%;min-width:560px;border-collapse:collapse;text-align:left}
.cmp th,.cmp td{padding:15px 20px;border-bottom:1px solid var(--line);font-size:15px;color:var(--txt)}
.cmp thead th{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
color:var(--navy);background:#F7F9FA;border-bottom:2px solid var(--line)}
.cmp tbody td:first-child{font-weight:700;color:var(--navy)}
.cmp .hi{background:rgba(63,180,177,.07);color:var(--navy);font-weight:700}
.cmp thead .hi{background:rgba(63,180,177,.14);color:var(--teal-dark);
box-shadow:inset 0 3px 0 var(--teal)}
.cmp tbody tr:last-child td{border-bottom:0}
.cmp .hi:only-child{text-align:center}
.note{font-size:12.5px;color:var(--txt);opacity:.72;text-align:center;margin:0}
/* l'or structurel : le radar de Pulse Fonds et les surtitres de section */
.hero.nuit.or .pill{border-color:rgba(245,194,74,.34);color:#F7E3B4}
/* ---------- .card : empilement naturel sous le titre ----------
Les rangees figees (p en 2, ul en 3) se cassent des qu'une carte porte deux
paragraphes : les deux atterrissent sur la meme rangee et se superposent.
On laisse la grille placer les enfants implicitement, chacun sur toute la
largeur, dans l'ordre du document. */
.card > p,.card > ul,.dim > p,.dim > ul{grid-row:auto;grid-column:1/-1}
.card > p + p{margin-top:12px}
.card > .ask{margin-top:16px}
/* ============================================================================
LIVRAISON 9 — page A propos (delta reporte de livraison 8 -> 9)
Bloc : .card > .sig en grid-row:auto. Place AVANT le bloc ALIGNEMENT.
============================================================================ */
/* ---------- .sig dans une carte ----------
Sans regle de placement, .sig s'auto-place dans la colonne 1 de .card — la
piste prevue pour l'icone. Sur une carte sans icone, cette piste prenait
alors la largeur de la signature et ecrasait le titre a 32 px. */
.card > .sig,.dim > .sig{grid-column:1/-1;grid-row:auto}
/* ============================================================================
LIVRAISON 10 — Rendez-vous/Contact + Merci Pulse (delta reporte 9 -> 10)
Place AVANT le bloc ALIGNEMENT (dernier de la cascade).
============================================================================ */
/* ---------- .logos : le fond suit la classe posee ----------
.logos avait un fond fixe #F7F9FA, donc il se confondait avec une section
.sec-light voisine. Une classe de surface posee sur le bandeau l'emporte. */
.logos.sec-grey{background:#EEF2F4}
.logos.sec-white{background:var(--pure)}
/* ============================================================================
LIVRAISON 11 — Cabinets d'experts-comptables (delta reporte 10 -> 11)
Place AVANT le bloc ALIGNEMENT (dernier de la cascade).
============================================================================ */
/* ---------- .vid : video responsive ----------
Ratio 16/9 tenu par aspect-ratio, cadre arrondi et ombre du systeme.
Pas de padding-top hack : le ratio natif suffit et survit au responsive. */
.vid{position:relative;max-width:900px;margin:0 auto;aspect-ratio:16/9;
border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--e3);background:var(--navy)}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
/* ---------- GARDE anti-collision : .vid des cartes video (.vids .vid) ----------
COLLISION SIGNALEE A DAVID : le designer nomme .vid la video responsive de
/cabinets-experts/, mais .vid est deja la classe des cartes de la page
/videos-dirigeants-commercial/ (6 ). La regle .vid
ci-dessus leur imposait aspect-ratio 16/9 + fond navy et cassait les cartes.
On restaure ici l'habillage carte pour les .vid situes dans une grille .vids,
sans supprimer la regle du designer (qui reste pleinement active sur la video
isolee de cabinets-experts). Specificite 0-2-0 : cette garde l'emporte. */
.vids .vid{aspect-ratio:auto;max-width:none;margin:0;background:var(--pure);box-shadow:var(--e1)}
/* ---------- puces : retour au flux, pastille en absolu ----------
.card li en display:grid faisait de CHAQUE enfant une cellule : un - qui
contient un lien puis du texte se disloquait en autant de lignes. On revient
au flux inline (qui accepte n'importe quel contenu) avec la pastille en
absolu, calee sur la premiere ligne en em pour suivre la taille du texte.
NB : le bloc ALIGNEMENT ci-dessous reprend padding-left et ::before top en
les derivant de --kg-fs ; on garde les deux (cf. brief), l'essentiel ici est
display:block qui tue le display:grid de la livraison 6. */
.plan li,.card li,.checks li{display:block;grid-template-columns:none;gap:0;padding-left:28px;position:relative}
.plan li::before,.card li::before,.checks li::before{position:absolute;left:0;top:.28em;margin-top:0}
.checks li{padding-left:32px}
/* ---------- .titre-photo : portrait a cote du titre ----------
Le portrait accompagne le titre au lieu de repeter son contenu au-dessus. */
.titre-photo{display:flex;align-items:center;gap:18px;margin-bottom:14px}
.titre-photo img{width:72px;height:72px;flex:0 0 72px;border-radius:50%;object-fit:cover;
object-position:center top;border:2px solid rgba(63,180,177,.45)}
.titre-photo h2{margin:0}
@media(max-width:520px){.titre-photo{gap:14px}.titre-photo img{width:58px;height:58px;flex:0 0 58px}}
/* ---------- .specs : cartes a icone centree (design du site historique) ----------
La page en ligne presente « Specificite Keep Growing » en quatre cartes grises
a icone centree, pas en liste a puces. */
.specs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:44px}
.spec{background:var(--light);border-radius:var(--r-lg);padding:38px 26px 34px;text-align:center;
display:flex;flex-direction:column;align-items:center;gap:22px;
transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease)}
.spec:hover{transform:translateY(-3px);box-shadow:var(--e2);background:var(--pure)}
.spec-ic{display:flex;align-items:center;justify-content:center;width:56px;height:56px;color:var(--navy)}
.spec-ic svg{width:44px;height:44px}
.spec p{margin:0;color:var(--txt);font-size:15.5px;line-height:1.55;text-wrap:pretty}
@media(max-width:960px){.specs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.specs{grid-template-columns:1fr;gap:14px}
.spec{flex-direction:row;text-align:left;padding:24px 22px;gap:18px}
.spec-ic{width:44px;height:44px;flex:0 0 44px}.spec-ic svg{width:34px;height:34px}}
/* ---------- .etapes : modalites d'acces numerotees ----------
Pastille teal numerotee, titre, description, filet de separation entre
chaque etape — le traitement du site historique. */
.etapes{list-style:none;counter-reset:et;margin:0 auto;padding:0;max-width:820px;text-align:left}
.etapes li{counter-increment:et;position:relative;padding:30px 0 30px 76px;border-top:1px solid var(--line)}
.etapes li:first-child{border-top:0;padding-top:6px}
.etapes li::before{content:counter(et);position:absolute;left:0;top:28px;
width:50px;height:50px;border-radius:50%;background:var(--teal);color:#fff;
display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800}
.etapes li:first-child::before{top:4px}
.etapes b{display:block;font-size:21px;font-weight:800;color:var(--navy);letter-spacing:-.02em;margin-bottom:10px}
.etapes p{margin:0;color:var(--txt);font-size:15.5px;line-height:1.6}
.etapes p + p{margin-top:12px}
.etapes a{color:var(--teal-dark);font-weight:700}
@media(max-width:560px){
.etapes li{padding:26px 0 26px 58px}
.etapes li::before{width:40px;height:40px;font-size:17px;top:24px}
.etapes li:first-child::before{top:2px}
.etapes b{font-size:19px}
}
/* ---------- animation des etapes ----------
Le filet vertical qui relie les pastilles se trace au fil de la revelation :
gris tant que l'etape n'est pas lue, teal une fois entree dans l'ecran. La
pastille arrive en meme temps, d'un demi-cran d'echelle. */
.etapes li::after{content:"";position:absolute;left:24px;top:78px;bottom:-2px;width:2px;
background:var(--line);transform:scaleY(0);transform-origin:top;
transition:transform .55s var(--ease) .12s,background .4s var(--ease)}
.etapes li:first-child::after{top:54px}
.etapes li:last-child::after{display:none}
.etapes li.in::after{transform:scaleY(1);background:linear-gradient(var(--teal),rgba(63,180,177,.25))}
.etapes li::before{transform:scale(.72);opacity:0;
transition:transform .45s cubic-bezier(.2,.9,.3,1.25),opacity .3s var(--ease),box-shadow .25s var(--ease)}
.etapes li.in::before{transform:scale(1);opacity:1}
.etapes li:hover::before{box-shadow:0 0 0 6px rgba(63,180,177,.14)}
.etapes b{transition:color .25s var(--ease)}
.etapes li:hover b{color:var(--teal-dark)}
.etapes a{background-image:linear-gradient(var(--teal),var(--teal));background-size:0 2px;
background-repeat:no-repeat;background-position:0 100%;text-decoration:none;
transition:background-size .28s var(--ease)}
.etapes a:hover{background-size:100% 2px}
@media(max-width:560px){.etapes li::after{left:19px;top:66px}.etapes li:first-child::after{top:44px}}
/* Les cartes a icone : l'icone se pose une fraction apres la carte. */
.spec-ic{transition:transform .4s cubic-bezier(.2,.9,.3,1.25),color .25s var(--ease)}
.spec:hover .spec-ic{transform:scale(1.08);color:var(--teal-dark)}
.spec.kg-rv .spec-ic{transform:scale(.86)}
.spec.kg-rv.in .spec-ic{transform:scale(1);transition-delay:.14s}
@media(prefers-reduced-motion:reduce){
.etapes li::after{transform:scaleY(1);transition:none}
.etapes li::before{transform:scale(1);opacity:1;transition:none}
.spec-ic,.spec.kg-rv .spec-ic{transform:none;transition:none}
.etapes a{transition:none}
}
/* ---------- FAQ : barre de recherche + filtres thematiques ----------
Trente questions reparties en huit themes : sans point d'entree, la page est
un mur. La barre reste collee sous l'en-tete pendant tout le parcours. */
.fq-bar{position:sticky;top:0;z-index:40;background:rgba(247,249,250,.92);
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
border-bottom:1px solid var(--line);padding:16px 0}
.fq-bar-in{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.fq-search{display:flex;align-items:center;gap:10px;background:var(--pure);
border:1px solid var(--line);border-radius:999px;padding:0 16px;height:48px;
flex:0 0 330px;max-width:100%;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.fq-search:focus-within{border-color:var(--teal);box-shadow:0 0 0 3px rgba(63,180,177,.18)}
.fq-search svg{width:18px;height:18px;color:var(--txt);flex:0 0 18px}
.fq-search input{border:0;outline:0;background:transparent;font:inherit;font-size:15px;
color:var(--navy);width:100%;height:100%}
.fq-search input::-webkit-search-cancel-button{display:none}
.fq-clear{border:0;background:transparent;color:var(--txt);font-size:22px;line-height:1;
cursor:pointer;padding:0 2px;min-width:24px}
.fq-clear:hover{color:var(--navy)}
.fq-chips{display:flex;gap:8px;flex-wrap:wrap;flex:1;min-width:0}
.fq-chip{border:1px solid var(--line);background:var(--pure);color:var(--txt);
font:inherit;font-size:13.5px;font-weight:600;padding:9px 15px;border-radius:999px;
cursor:pointer;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease)}
.fq-chip:hover{border-color:var(--teal);color:var(--navy)}
.fq-chip.is-on{background:var(--navy);border-color:var(--navy);color:#fff}
.fq-n{font-size:11.5px;font-weight:700;opacity:.55;font-variant-numeric:tabular-nums}
.fq-vide{display:block;text-align:center;color:var(--txt);font-size:16px;padding:70px 20px}
.fq-vide .fq-reset{border:0;background:transparent;color:var(--teal-dark);font:inherit;
font-weight:700;text-decoration:underline;cursor:pointer}
.faq-sec[hidden],.fq-vide[hidden]{display:none}
/* en mode recherche, plus d'alternance de fond : la page devient une liste de resultats */
body.fq-filtre .faq-sec{background:var(--pure)}
@media(max-width:760px){
.fq-bar{padding:12px 0}
.fq-search{flex:1 1 100%}
.fq-chips{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;scrollbar-width:none}
.fq-chips::-webkit-scrollbar{display:none}
.fq-chip{min-height:44px}
}
/* accordeon : chevron pivotant et ouverture animee */
.faq summary::after{content:"";width:11px;height:11px;border-right:2px solid var(--teal);
border-bottom:2px solid var(--teal);transform:rotate(45deg) translate(-2px,-2px);
transition:transform .25s var(--ease);flex:0 0 11px}
.faq details[open] summary::after{content:"";transform:rotate(-135deg) translate(-2px,-2px)}
.faq details{transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.faq details:hover{border-color:rgba(63,180,177,.5)}
.faq details[open]{border-color:rgba(63,180,177,.5);box-shadow:var(--e1)}
.faq summary:focus-visible{outline:2px solid var(--teal);outline-offset:-2px;border-radius:12px}
.faq mark{background:rgba(63,180,177,.24);color:inherit;border-radius:3px;padding:0 2px}
@media(prefers-reduced-motion:reduce){.faq summary::after{transition:none}}
/* ---------- pages atelier : bandeau de faits dans le hero (delta v13->v14) ----------
Une page d'atelier se juge sur trois reperes concrets. Ils etaient enterres
en bas de page ; ils remontent dans le hero, sur une seule ligne. */
.at-facts{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
margin:38px 0 0;padding:0;text-align:left;border-top:1px solid rgba(255,255,255,.16)}
.at-facts li{padding:22px 26px 0;border-left:1px solid rgba(255,255,255,.16);min-width:0}
.at-facts li:first-child{padding-left:0;border-left:0}
.at-facts li:last-child{padding-right:0}
.at-facts b{display:block;color:#fff;font-size:20px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.at-facts span{display:block;margin-top:5px;color:rgba(255,255,255,.62);font-size:12.5px;
font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1.4}
.hero:not(.nuit) .at-facts{border-top-color:var(--line)}
.hero:not(.nuit) .at-facts li{border-left-color:var(--line)}
.hero:not(.nuit) .at-facts b{color:var(--navy)}
.hero:not(.nuit) .at-facts span{color:var(--txt)}
@media(max-width:720px){
.at-facts{grid-template-columns:1fr}
.at-facts li{border-left:0;padding:18px 0 0;
border-top:1px solid rgba(255,255,255,.12)}
.at-facts li:first-child{border-top:0}
.hero:not(.nuit) .at-facts li{border-top-color:var(--line)}
.at-facts b{font-size:18px}
}
/* Les etapes acceptent une liste a puces en corps, pas seulement un paragraphe. */
.etapes ul{margin:0;padding-left:20px;color:var(--txt);font-size:15.5px;line-height:1.6}
.etapes li ul li{counter-increment:none;padding:0;border-top:0;margin-bottom:7px;list-style:disc}
.etapes li ul li::before,.etapes li ul li::after{content:none;display:none}
/* Trois benefices tiennent sur une ligne : la largeur bridee a 760 px les
forcait en 2 + 1 orphelin. */
.checks-3{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1040px;gap:10px 26px}
@media(max-width:900px){.checks-3{grid-template-columns:1fr;max-width:620px}}
/* ---------- .offre-card : le bloc de decision d'une page atelier ----------
Le prix vivait seul dans une section grise, sans action possible : un
cul-de-sac juste avant le pied de page. Il devient une carte unique, prix a
gauche, boutons a droite, sur la meme ligne optique. */
.offre-card{display:flex;align-items:center;justify-content:space-between;gap:34px;
flex-wrap:wrap;max-width:880px;margin:0 auto;text-align:left;
background:var(--pure);border:1px solid var(--line);border-radius:var(--r-lg);
box-shadow:var(--e2);padding:34px 38px;position:relative;overflow:hidden}
.offre-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--teal)}
.offre-prix b{display:block;color:var(--navy);font-size:clamp(26px,3vw,34px);font-weight:800;
letter-spacing:-.03em;line-height:1.1}
.offre-prix span{display:block;margin-top:8px;color:var(--txt);font-size:13px;font-weight:800;
letter-spacing:.09em;text-transform:uppercase}
.offre-ctas{display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:720px){
.offre-card{padding:28px 24px 28px 28px;gap:24px}
.offre-ctas{width:100%}
.offre-ctas .btn{flex:1 1 100%;text-align:center}
}
/* ═══════════════════════════════════════════════════════════════════════════
APPORTS LIVRAISON 15 (designer) — delta livraison 14 → 15
Bibliotheque de ressources : cartes uniformes .res-grid/.res, filtres,
couverture livre blanc, .dl-card. Insere AVANT le bloc ALIGNEMENT.
═══════════════════════════════════════════════════════════════════════════ */
/* ---------- livres blancs : la couverture du document ----------
Une page qui demande cinq champs pour recevoir un document ne montrait pas
ce document. La couverture est dessinee en CSS : rien a produire, rien a
maintenir, et elle porte le titre reel de chaque livre blanc. */
.lb-hero .hero-grid{grid-template-columns:1.05fr .95fr;align-items:center}
.lb-cover-wrap{display:flex;justify-content:center;align-items:center;padding:10px}
.lb-cover{position:relative;width:300px;aspect-ratio:1/1.414;border-radius:4px 12px 12px 4px;
background:linear-gradient(150deg,#23334A 0%,#1B2A3E 58%,#16233450 100%),var(--navy);
box-shadow:0 30px 60px rgba(35,51,74,.32),0 4px 12px rgba(35,51,74,.2);
padding:44px 34px 32px;display:flex;flex-direction:column;
transform:rotate(-2.2deg);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.lb-cover::before{content:"";position:absolute;left:0;top:0;bottom:0;width:12px;
background:linear-gradient(90deg,rgba(0,0,0,.34),rgba(0,0,0,0));border-radius:4px 0 0 4px}
.lb-cover::after{content:"";position:absolute;left:34px;right:34px;top:98px;height:3px;
background:var(--teal);border-radius:2px}
.lb-cover:hover{transform:rotate(-1deg) translateY(-6px);
box-shadow:0 40px 74px rgba(35,51,74,.38),0 6px 16px rgba(35,51,74,.24)}
.lb-cover-eb{color:var(--teal);font-size:11.5px;font-weight:800;letter-spacing:.2em;
text-transform:uppercase}
.lb-cover b{margin-top:64px;color:#fff;font-size:29px;font-weight:800;letter-spacing:-.03em;
line-height:1.14;text-wrap:balance}
.lb-cover-sig{margin-top:auto;color:rgba(255,255,255,.72);font-size:15px;font-weight:800;
letter-spacing:-.02em}
.lb-cover-sig i{color:var(--teal);font-style:normal}
@media(max-width:900px){
.lb-hero .hero-grid{grid-template-columns:1fr}
.lb-cover-wrap{order:-1;padding:0 0 26px}
.lb-cover{width:230px;transform:rotate(-1.6deg)}
.lb-cover b{font-size:24px;margin-top:48px}
.lb-cover::after{top:82px}
}
@media(prefers-reduced-motion:reduce){.lb-cover,.lb-cover:hover{transition:none;transform:none}}
/* ---------- .dl-card : telechargement libre ----------
Zero email demande : le document part directement. La carte remplace le
formulaire a cinq champs — nature du fichier a gauche, bouton a droite. */
.dl-card{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;
max-width:680px;margin:0 auto;text-align:left;background:var(--pure);
border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--e2);
padding:26px 30px;position:relative;overflow:hidden}
.dl-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--teal)}
.dl-doc{display:flex;align-items:center;gap:16px;min-width:0}
.dl-ic{display:flex;align-items:center;justify-content:center;width:48px;height:48px;flex:0 0 48px;
border-radius:12px;background:var(--light);color:var(--navy)}
.dl-ic svg{width:26px;height:26px}
.dl-doc b{display:block;color:var(--navy);font-size:16.5px;font-weight:800;letter-spacing:-.01em}
.dl-doc span{display:block;margin-top:3px;color:var(--txt);font-size:13px;font-weight:700;
letter-spacing:.06em;text-transform:uppercase}
@media(max-width:620px){
.dl-card{padding:22px 22px 22px 26px;gap:20px}
.dl-card .btn{width:100%;text-align:center}
}
/* La section ressources suivait un fond gris identique au sien : elle passe en
blanc quand elle suit une section claire. */
/* Fin de page : ressources puis CTA, jamais deux fonds identiques quelle que
soit la section qui precede. */
.blog-sec{background:var(--white)}
.final{background:var(--pure)}
.sec-light + .blog-sec{background:var(--pure)}
.sec-light + .blog-sec + .final{background:var(--white)}
/* Le hero clair partageait le blanc de la premiere section. */
.hero.page-hero:not(.nuit){background:var(--white)}
/* La couverture accepte une vraie image quand elle existe : il suffit d'ajouter
un
![]()
dans .lb-cover, il recouvre le dessin CSS sans autre changement.
… */
.lb-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
border-radius:inherit;z-index:2}
.lb-cover:has(img)::after{display:none}
.lb-cover:has(img) .lb-cover-eb,.lb-cover:has(img) b,.lb-cover:has(img) .lb-cover-sig{
position:relative;z-index:3;visibility:hidden}
/* ---------- couverture photo ----------
Les visuels fournis sont deja des mock-ups de livre, avec leur perspective,
leur ombre portee et leur fond. Les enfermer dans le cadre dessine ajouterait
une seconde ombre et une seconde rotation : la carte s'efface entierement et
l'image est posee telle quelle. */
.lb-cover.is-photo{background:none;box-shadow:none;padding:0;border-radius:0;transform:none;
width:auto;max-width:400px;aspect-ratio:auto;display:block;
transition:transform .5s var(--ease)}
.lb-cover.is-photo::before,.lb-cover.is-photo::after{display:none}
.lb-cover.is-photo img{position:static;width:100%;height:auto;object-fit:contain;
border-radius:0;display:block;mix-blend-mode:multiply}
.lb-cover.is-photo:hover{transform:translateY(-6px);box-shadow:none}
.lb-cover.is-photo .lb-cover-eb,.lb-cover.is-photo b,.lb-cover.is-photo .lb-cover-sig{display:none}
@media(max-width:900px){.lb-cover.is-photo{max-width:300px;margin:0 auto}}
@media(prefers-reduced-motion:reduce){.lb-cover.is-photo,.lb-cover.is-photo:hover{transform:none;transition:none}}
/* ---------- .res-grid : la bibliotheque des ressources ----------
Livres blancs et guides sur une seule page, filtrables par famille. La
couverture porte la reconnaissance : on retrouve un document a son visuel
bien avant de lire son titre. */
.res-filtres{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:0 0 42px}
.res-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 22px;text-align:left}
.res{display:flex;flex-direction:column;background:var(--pure);border:1px solid var(--line);
border-radius:var(--r-lg);overflow:hidden;text-decoration:none;box-shadow:var(--e1);
transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease)}
.res:hover{transform:translateY(-4px);box-shadow:var(--e2);border-color:rgba(63,180,177,.5)}
.res[hidden]{display:none}
.res-vis{display:flex;align-items:center;justify-content:center;background:var(--light);
aspect-ratio:4/3;padding:18px;overflow:hidden}
.res-vis img{width:auto;height:100%;max-width:100%;object-fit:contain;mix-blend-mode:multiply;
transition:transform .35s var(--ease)}
.res:hover .res-vis img{transform:scale(1.05)}
.res-fallback{display:flex;flex-direction:column;justify-content:space-between;
width:132px;aspect-ratio:1/1.414;background:linear-gradient(150deg,#23334A,#1B2A3E);
border-radius:3px 8px 8px 3px;padding:18px 15px 14px;box-shadow:0 10px 22px rgba(35,51,74,.28)}
.res-fallback b{color:#fff;font-size:14px;font-weight:800;letter-spacing:-.02em;line-height:1.22;
text-wrap:balance}
.res-fallback i{color:rgba(255,255,255,.7);font-style:normal;font-size:11px;font-weight:800;
letter-spacing:-.01em}
.res-fallback i em{color:var(--teal);font-style:normal}
.res-body{display:flex;flex-direction:column;flex:1;padding:20px 22px 22px;gap:0}
.res-kind{color:var(--teal-dark);font-size:11px;font-weight:900;letter-spacing:.14em;
text-transform:uppercase;margin-bottom:9px}
.res-body b{color:var(--navy);font-size:17px;font-weight:800;letter-spacing:-.02em;line-height:1.25;
margin-bottom:8px;text-wrap:pretty}
.res-desc{color:var(--txt);font-size:14.5px;line-height:1.55;margin-bottom:16px}
.res-dl{margin-top:auto;color:var(--teal-dark);font-size:14px;font-weight:700}
@media(max-width:900px){.res-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:820px){.res-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){
.res-grid{grid-template-columns:1fr;gap:16px}
.res{flex-direction:row}
.res-vis{aspect-ratio:auto;flex:0 0 118px;padding:14px}
.res-fallback{width:auto;padding:12px 10px 10px}
.res-fallback b{font-size:12px}
.res-body{padding:18px 18px 18px 16px}
.res-desc{display:none}
}
@media(prefers-reduced-motion:reduce){.res,.res-vis img{transition:none}.res:hover{transform:none}}
/* Blocs a fond implicite (.stats-sec, .logos, .tests-sec, .price-sec,
.fonds-sec) : leur couleur ne depend pas de leur classe mais de ce qui
precede. Ces regles closent les derniers voisinages identiques. */
.sec-grey + .stats-sec,.sec-light + .stats-sec{background:var(--pure)}
.logos + .sec-white,.logos + .price-sec{background:var(--white)}
.tests-sec + .logos{background:var(--pure)}
/* ---------- detourage des couvertures ----------
Les mock-ups sont livres sur un fond blanc casse legerement variable. Poser
la vignette sur du blanc pur et laisser le multiply faire le reste evite le
rectangle gris visible autour de chaque livre. */
.res-vis{background:var(--pure)}
.res-vis img{mix-blend-mode:multiply;filter:contrast(1.02)}
.lb-cover.is-photo img{mix-blend-mode:multiply}
.lb-cover-wrap{background:transparent}
/* ---------- hauteur fixe de vignette ----------
L'aspect-ratio faisait dependre la hauteur de la carte du chargement de son
image : une rangee tombait a 227 px pendant que la suivante en faisait 452.
Une hauteur fixe rend les rangees identiques des le premier rendu. */
.res-vis{aspect-ratio:auto;height:250px;flex:0 0 250px;padding:20px}
.res-vis img{max-height:100%;width:auto}
.res-fallback{width:118px;height:auto;max-height:210px;aspect-ratio:1/1.414}
@media(max-width:520px){
.res-vis{height:auto;flex:0 0 118px;padding:14px}
.res-fallback{max-height:none}
}
/* ---------- rangees de hauteur egale ----------
Les hauteurs variaient encore d'une rangee a l'autre selon la longueur des
descriptions. Une hauteur minimale de corps aligne les liens de
telechargement sur toute la grille. */
.res-body{min-height:196px}
.res-desc{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:520px){.res-body{min-height:0}}
.res{min-height:470px}
@media(max-width:520px){.res{min-height:0}}
/* ---------- carte ressource : mise au propre ----------
Les regles s'etaient empilees et se contredisaient : bascule en ligne sous
520 px, hauteur minimale qui restait active, vignette a hauteur fixe. Ce
bloc reprend la carte a zero — colonne partout, meme rythme a toute
largeur. */
.res{flex-direction:column;min-height:0}
.res-vis{height:230px;flex:0 0 230px;padding:18px;aspect-ratio:auto}
.res-vis img{max-height:100%;max-width:100%;width:auto;height:auto}
.res-fallback{width:112px;height:158px;max-height:none;aspect-ratio:auto}
.res-body{min-height:0;padding:18px 20px 20px}
.res-body b{font-size:16px;line-height:1.28;display:-webkit-box;-webkit-line-clamp:2;
-webkit-box-orient:vertical;overflow:hidden;min-height:2.56em}
.res-desc{font-size:14px;line-height:1.5;-webkit-line-clamp:2;min-height:2.9em;margin-bottom:14px}
@media(max-width:520px){
.res-grid{grid-template-columns:1fr;gap:14px}
.res{flex-direction:row}
.res-vis{height:auto;flex:0 0 104px;padding:14px}
.res-fallback{width:76px;height:107px}
.res-body{padding:16px 18px 16px 14px;justify-content:center}
.res-body b,.res-desc{min-height:0}
.res-desc{display:none}
}
/* ---------- carte ressource : bloc autoritaire ----------
Les regles s'etaient empilees au fil des retouches et se contredisaient :
certaines cartes basculaient en ligne, d'autres restaient en colonne, les
hauteurs suivaient le chargement des images. Ce bloc, plus specifique que
tous les precedents, redefinit la carte une bonne fois. */
.res-grid{align-items:stretch}
.res-grid .res{display:flex;flex-direction:column;min-height:0}
.res-grid .res .res-vis{display:flex;align-items:center;justify-content:center;
height:236px;min-height:236px;max-height:236px;flex:0 0 236px;
padding:16px;aspect-ratio:auto;background:var(--pure);overflow:hidden}
.res-grid .res .res-vis img{max-height:204px;max-width:100%;width:auto;height:auto;
object-fit:contain;mix-blend-mode:multiply}
.res-grid .res .res-fallback{width:auto;height:204px;aspect-ratio:1/1.414;max-height:204px}
.res-grid .res .res-body{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;
padding:18px 20px 20px}
.res-grid .res .res-body b{font-size:16.5px;line-height:1.3;min-height:3.9em;
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.res-grid .res .res-desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
overflow:hidden;font-size:14px;line-height:1.5;min-height:3em;margin-bottom:14px}
.res-grid .res .res-dl{margin-top:auto}
@media(max-width:520px){
.res-grid .res{flex-direction:row}
.res-grid .res .res-vis{height:auto;min-height:0;max-height:none;flex:0 0 106px;padding:14px}
.res-grid .res .res-vis img{max-height:120px}
.res-grid .res .res-fallback{height:120px}
.res-grid .res .res-body{justify-content:center;padding:16px 18px 16px 14px}
.res-grid .res .res-body b{min-height:0}
.res-grid .res .res-desc{display:none;min-height:0}
}
/* ---------- hauteur plancher de carte ----------
Derniere cause du desordre : sans hauteur minimale, une carte se refermait
sur sa vignette et son corps debordait hors du cadre. */
.res-grid .res{min-height:430px}
@media(max-width:520px){.res-grid .res{min-height:140px}}
/* ========================================================================
BIBLIOTHEQUE — carte ressource, definition finale (remplace tout le reste)
======================================================================== */
.res-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 22px;
grid-auto-rows:1fr;align-items:stretch;text-align:left}
.res-grid .res{display:flex;flex-direction:column;min-height:0;height:100%;
background:var(--pure);border:1px solid var(--line);border-radius:var(--r-lg);
overflow:hidden;text-decoration:none;box-shadow:var(--e1);
transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease)}
.res-grid .res:hover{transform:translateY(-4px);box-shadow:var(--e2);border-color:rgba(63,180,177,.5)}
.res-grid .res .res-vis{display:flex;align-items:center;justify-content:center;
height:232px;min-height:232px;max-height:232px;flex:0 0 232px;
padding:20px 18px 12px;background:var(--pure);overflow:hidden;aspect-ratio:auto}
.res-grid .res .res-vis img{max-height:196px;max-width:82%;width:auto;height:auto;
object-fit:contain;mix-blend-mode:multiply;transition:transform .35s var(--ease)}
.res-grid .res:hover .res-vis img{transform:scale(1.04)}
.res-grid .res .res-fallback{width:auto;height:196px;aspect-ratio:1/1.414;max-height:196px}
.res-grid .res .res-body{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;
padding:0 22px 22px}
.res-grid .res .res-kind{color:var(--teal-dark);font-size:11px;font-weight:900;
letter-spacing:.14em;text-transform:uppercase;margin:0 0 9px}
.res-grid .res .res-body b{color:var(--navy);font-size:16.5px;font-weight:800;
letter-spacing:-.02em;line-height:1.28;margin:0 0 10px;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
min-height:2.56em}
.res-grid .res .res-desc{color:var(--txt);font-size:14px;line-height:1.5;margin:0 0 16px;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
min-height:3em}
.res-grid .res .res-dl{margin-top:auto;color:var(--teal-dark);font-size:14px;font-weight:700}
@media(max-width:1080px){.res-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:820px){.res-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){
.res-grid{grid-template-columns:1fr;gap:14px;grid-auto-rows:auto}
.res-grid .res{flex-direction:row;height:auto}
.res-grid .res .res-vis{height:auto;min-height:0;max-height:none;flex:0 0 116px;padding:14px 10px}
.res-grid .res .res-vis img{max-height:130px;max-width:100%}
.res-grid .res .res-fallback{height:130px}
.res-grid .res .res-body{justify-content:center;padding:16px 18px 16px 6px}
.res-grid .res .res-body b{min-height:0}
.res-grid .res .res-desc{display:none;min-height:0}
}
@media(prefers-reduced-motion:reduce){
.res-grid .res,.res-grid .res .res-vis img{transition:none}
.res-grid .res:hover{transform:none}
.res-grid .res:hover .res-vis img{transform:none}
}
/* ═══ delta livraison 15 → 16 ═══════════════════════════════════════════════
.dl-ic accueille desormais la couverture du document (et non une icone PDF) :
on la recadre au format carre de la pastille. Et tant qu'un PDF n'est pas
depose dans assets/docs/, le bouton de telechargement est rendu neutralise
(.is-disabled) : aucun href mort, aucun 404 en production. */
.dl-ic{overflow:hidden;padding:0}
.dl-ic img{width:100%;height:100%;object-fit:cover;display:block}
.btn.is-disabled{background:var(--light);color:var(--txt);box-shadow:none;cursor:not-allowed;pointer-events:none}
/* ============================================================================
ALIGNEMENT — pictogrammes et pseudo-elements cales sur la ligne de texte
----------------------------------------------------------------------------
Placee en fin de feuille : surcharge les regles precedentes sans les
supprimer. Principe : plus aucun `top` en dur. La position verticale d'un
pseudo-element est DERIVEE de la taille de police et de la hauteur de ligne
reellement declarees, portees par des variables locales :
--kg-fs taille de police du texte de la ligne
--kg-lh hauteur de ligne (sans unite)
--kg-pt padding vertical de l'element
--kg-mk diametre de la pastille
--kg-gap gouttiere entre la pastille et le texte
Consequence : changer --kg-fs suffit, la puce suit. Les clamp() du design
system peuvent faire varier les tailles sans jamais desaligner les coches.
============================================================================ */
/* ---------- listes a coches ---------- */
.plan li {--kg-fs:14px; --kg-lh:1.5; --kg-pt:4px; --kg-mk:17px; --kg-gap:11px}
.card li {--kg-fs:14.5px;--kg-lh:1.55; --kg-pt:5px; --kg-mk:17px; --kg-gap:11px}
.checks li {--kg-fs:15.5px;--kg-lh:1.6; --kg-pt:8px; --kg-mk:17px; --kg-gap:11px}
.fiche-obj li{--kg-fs:14px; --kg-lh:1.5; --kg-pt:0px; --kg-mk:16px; --kg-gap:10px}
.plan li,.card li,.checks li,.fiche-obj li{
position:relative;
font-size:var(--kg-fs);
line-height:var(--kg-lh);
padding-top:var(--kg-pt);
padding-bottom:var(--kg-pt);
padding-left:calc(var(--kg-mk) + var(--kg-gap));
}
.plan li::before,.card li::before,.checks li::before,.fiche-obj li::before{
content:"✓";
position:absolute;
left:0;
/* centre de la pastille = centre de la PREMIERE ligne de texte,
que l'element tienne sur une ligne ou sur trois */
top:calc(var(--kg-pt) + (var(--kg-fs) * var(--kg-lh) - var(--kg-mk)) / 2);
width:var(--kg-mk);
height:var(--kg-mk);
display:flex;
align-items:center;
justify-content:center;
line-height:1;
font-size:calc(var(--kg-mk) * .6);
font-weight:900;
color:var(--teal-dark);
}
.fiche-obj li::before{background:rgba(63,180,177,.14);border-radius:50%}
/* ---------- FAQ : le +/- se cale sur la 1re ligne de la question ----------
Une question sur deux lignes (frequent en 390 px) laissait le bouton flotter
au milieu du bloc, jusqu'a 27 px sous la 1re ligne. */
.faq summary{
--kg-fs:16.5px;--kg-lh:1.6;--kg-mk:28px;
font-size:var(--kg-fs);
line-height:var(--kg-lh);
align-items:flex-start;
}
.faq summary::after{
margin-top:calc((var(--kg-fs) * var(--kg-lh) - var(--kg-mk)) / 2);
width:var(--kg-mk);height:var(--kg-mk);flex:0 0 var(--kg-mk);
}
/* ============================================================================
WEBFORM PIPEDRIVE — cadre d'integration
Le formulaire est servi par Pipedrive dans une iframe : on ne maitrise pas
son interieur, seulement le cadre. On lui donne la meme carte blanche que
.form-card pour qu'il ne fasse pas piece rapportee, et une hauteur suffisante
pour que le visiteur n'ait jamais a scroller dans l'iframe (formulaire a 5
champs + reCAPTCHA : 643 px mesures en 700 px de large, 675 px en 360 px).
============================================================================ */
.pd-embed{
max-width:640px;margin:0 auto;text-align:left;
background:var(--pure);border:var(--hair);border-radius:var(--r-xl);
box-shadow:var(--e3);padding:clamp(16px,2.2vw,26px);
}
.pd-embed iframe{
display:block;width:100%;height:670px;border:0;border-radius:12px;
color-scheme:light;
}
.pd-embed .form-note{margin-top:14px}
.pd-fallback{font-size:15px;line-height:1.6;color:var(--txt);padding:22px 4px}
.pd-fallback a{color:var(--teal-dark);font-weight:700}
@media(max-width:620px){.pd-embed iframe{height:750px}}
/* Rappel du document demande sur les pages livre blanc / guide : le webform ne
sait pas recevoir cette information par parametre d'URL. */
.pd-doc{
--kg-fs:14.5px;--kg-lh:1.55;--kg-mk:20px;--kg-pt:14px;--kg-pl:16px;
position:relative;text-align:left;
max-width:640px;margin:0 auto 18px;
background:rgba(63,180,177,.09);border:1px solid rgba(63,180,177,.24);
border-radius:var(--r-md);
padding:var(--kg-pt) var(--kg-pl) var(--kg-pt)
calc(var(--kg-pl) + var(--kg-mk) + 12px);
font-size:var(--kg-fs);line-height:var(--kg-lh);color:var(--navy);
}
.pd-doc::before{
content:"i";position:absolute;left:var(--kg-pl);
/* meme derivation que les coches : centre de la pastille = centre de la 1re ligne */
top:calc(var(--kg-pt) + (var(--kg-fs) * var(--kg-lh) - var(--kg-mk)) / 2);
width:var(--kg-mk);height:var(--kg-mk);
display:flex;align-items:center;justify-content:center;
border-radius:50%;background:var(--teal);color:#fff;
font-size:12px;font-weight:900;font-style:italic;line-height:1;
}
.pd-doc b{color:var(--navy);font-weight:700}
/* ── FIX bandeau stats (67% / 80-100K€ / 6 mois, etc.) ──────────────────────
La fusion des 16 livraisons a laissé un conflit : une règle adjacente
`.sec-grey + .stats-sec{background:var(--pure)}` (blanc) alors que les
chiffres restent en blanc (`.stats-sec .stat b{color:#fff}`), d'où une
« bande blanche » quand le bandeau suit une section grise ou claire
(ex. pulse-audit). On verrouille ici le design voulu : bandeau navy,
chiffres blancs, partout et de façon cohérente. Placé en fin de fichier
pour gagner la cascade à spécificité égale. */
.stats-sec,
.sec-grey + .stats-sec,
.sec-light + .stats-sec,
.sec-white + .stats-sec{background:var(--navy)}
.stats-sec .stat b{color:#fff}
.stats-sec .stat span{color:rgba(255,255,255,.82)}
.stats-sec .stat{border-left:1px solid rgba(255,255,255,.17)}
.stats-sec .stat:first-child{border-left:0}
et
- sur grid-row 2 : quand une carte porte les
deux, ils se superposent. Ils prennent chacun leur rangee. */
.card > p{grid-row:2}
.card > ul,.dim > ul{grid-row:3}
.card > p + ul{margin-top:14px}
/* ---------- .grid-2 : deux colonnes explicites ----------
auto-fit remplit autant de colonnes que la largeur permet : sur 4 cartes il
donne 3+1. Les grilles de 4 elements passent en 2x2. */
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:820px){.grid-2{grid-template-columns:1fr}}
/* ---------- hero Nuit sur les pages d'offre ----------
.page-hero est centre et etroit, sans radar. Les regles .hero.nuit couvrent
deja h1, lead, pill et bouton fantome ; il reste le surtitre et le liseré
de bas de hero, qui etaient poses pour un fond clair. */
.hero.nuit.page-hero{background:#111C2E;border-bottom:0}
.hero.nuit .eyebrow{color:rgba(255,255,255,.82)}
.hero.nuit .eyebrow::before{background:var(--teal)}
.hero.nuit .sub{color:rgba(255,255,255,.72)}
/* ---------- .sec-grey : une vraie seconde nuance neutre ----------
.sec-light et .sec-grey retombaient tous deux sur #F7F9FA, donc l'alternance
des fonds ne tenait pas des que les deux se suivaient. .sec-grey prend un
gris legerement plus dense, pris dans la charte (--line / #E3E7EB eclairci). */
.sec-grey{background:#EEF2F4}
/* ---------- .stat small : l'unite accolee au chiffre ----------
« 20 ans » perdait son espace car .stat b est en letter-spacing negatif fort.
L'unite devient un : plus petit, moins serre, detache du nombre. */
.stat b small{font-size:.52em;font-weight:800;letter-spacing:-.01em;margin-left:.12em}
/* ============================================================================
LIVRAISON 8 — page Pulse Fonds (delta reporte de livraison 7 -> 8)
Blocs : .chain, .cmp / .cmp-wrap, .ask, .hero.nuit.or .pill, et le correctif
.card > p / .card > ul en grid-row:auto. Place AVANT le bloc ALIGNEMENT.
============================================================================ */
/* ---------- page Pulse Fonds ----------
.chain : la sequence Pre-Acquisition -> Post-Acquisition -> Sortie sous le
lead du hero. .cmp : le tableau comparatif, colonne Pulse mise en avant.
.ask : la question qui ferme chaque carte module. L'or est structurel ici. */
.chain{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 26px;
font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.chain span{color:var(--gold);font-size:15px;letter-spacing:0}
.card .ask{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
font-size:14px;font-style:italic;line-height:1.55;color:var(--txt)}
.sec-navy .card .ask{border-top-color:rgba(255,255,255,.16);color:rgba(255,255,255,.72)}
.cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 14px;
border:var(--hair);border-radius:var(--r-lg);background:var(--pure);box-shadow:var(--e1)}
.cmp{width:100%;min-width:560px;border-collapse:collapse;text-align:left}
.cmp th,.cmp td{padding:15px 20px;border-bottom:1px solid var(--line);font-size:15px;color:var(--txt)}
.cmp thead th{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
color:var(--navy);background:#F7F9FA;border-bottom:2px solid var(--line)}
.cmp tbody td:first-child{font-weight:700;color:var(--navy)}
.cmp .hi{background:rgba(63,180,177,.07);color:var(--navy);font-weight:700}
.cmp thead .hi{background:rgba(63,180,177,.14);color:var(--teal-dark);
box-shadow:inset 0 3px 0 var(--teal)}
.cmp tbody tr:last-child td{border-bottom:0}
.cmp .hi:only-child{text-align:center}
.note{font-size:12.5px;color:var(--txt);opacity:.72;text-align:center;margin:0}
/* l'or structurel : le radar de Pulse Fonds et les surtitres de section */
.hero.nuit.or .pill{border-color:rgba(245,194,74,.34);color:#F7E3B4}
/* ---------- .card : empilement naturel sous le titre ----------
Les rangees figees (p en 2, ul en 3) se cassent des qu'une carte porte deux
paragraphes : les deux atterrissent sur la meme rangee et se superposent.
On laisse la grille placer les enfants implicitement, chacun sur toute la
largeur, dans l'ordre du document. */
.card > p,.card > ul,.dim > p,.dim > ul{grid-row:auto;grid-column:1/-1}
.card > p + p{margin-top:12px}
.card > .ask{margin-top:16px}
/* ============================================================================
LIVRAISON 9 — page A propos (delta reporte de livraison 8 -> 9)
Bloc : .card > .sig en grid-row:auto. Place AVANT le bloc ALIGNEMENT.
============================================================================ */
/* ---------- .sig dans une carte ----------
Sans regle de placement, .sig s'auto-place dans la colonne 1 de .card — la
piste prevue pour l'icone. Sur une carte sans icone, cette piste prenait
alors la largeur de la signature et ecrasait le titre a 32 px. */
.card > .sig,.dim > .sig{grid-column:1/-1;grid-row:auto}
/* ============================================================================
LIVRAISON 10 — Rendez-vous/Contact + Merci Pulse (delta reporte 9 -> 10)
Place AVANT le bloc ALIGNEMENT (dernier de la cascade).
============================================================================ */
/* ---------- .logos : le fond suit la classe posee ----------
.logos avait un fond fixe #F7F9FA, donc il se confondait avec une section
.sec-light voisine. Une classe de surface posee sur le bandeau l'emporte. */
.logos.sec-grey{background:#EEF2F4}
.logos.sec-white{background:var(--pure)}
/* ============================================================================
LIVRAISON 11 — Cabinets d'experts-comptables (delta reporte 10 -> 11)
Place AVANT le bloc ALIGNEMENT (dernier de la cascade).
============================================================================ */
/* ---------- .vid : video responsive ----------
Ratio 16/9 tenu par aspect-ratio, cadre arrondi et ombre du systeme.
Pas de padding-top hack : le ratio natif suffit et survit au responsive. */
.vid{position:relative;max-width:900px;margin:0 auto;aspect-ratio:16/9;
border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--e3);background:var(--navy)}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
/* ---------- GARDE anti-collision : .vid des cartes video (.vids .vid) ----------
COLLISION SIGNALEE A DAVID : le designer nomme .vid la video responsive de
/cabinets-experts/, mais .vid est deja la classe des cartes de la page
/videos-dirigeants-commercial/ (6
- qui
contient un lien puis du texte se disloquait en autant de lignes. On revient
au flux inline (qui accepte n'importe quel contenu) avec la pastille en
absolu, calee sur la premiere ligne en em pour suivre la taille du texte.
NB : le bloc ALIGNEMENT ci-dessous reprend padding-left et ::before top en
les derivant de --kg-fs ; on garde les deux (cf. brief), l'essentiel ici est
display:block qui tue le display:grid de la livraison 6. */
.plan li,.card li,.checks li{display:block;grid-template-columns:none;gap:0;padding-left:28px;position:relative}
.plan li::before,.card li::before,.checks li::before{position:absolute;left:0;top:.28em;margin-top:0}
.checks li{padding-left:32px}
/* ---------- .titre-photo : portrait a cote du titre ----------
Le portrait accompagne le titre au lieu de repeter son contenu au-dessus. */
.titre-photo{display:flex;align-items:center;gap:18px;margin-bottom:14px}
.titre-photo img{width:72px;height:72px;flex:0 0 72px;border-radius:50%;object-fit:cover;
object-position:center top;border:2px solid rgba(63,180,177,.45)}
.titre-photo h2{margin:0}
@media(max-width:520px){.titre-photo{gap:14px}.titre-photo img{width:58px;height:58px;flex:0 0 58px}}
/* ---------- .specs : cartes a icone centree (design du site historique) ----------
La page en ligne presente « Specificite Keep Growing » en quatre cartes grises
a icone centree, pas en liste a puces. */
.specs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:44px}
.spec{background:var(--light);border-radius:var(--r-lg);padding:38px 26px 34px;text-align:center;
display:flex;flex-direction:column;align-items:center;gap:22px;
transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease)}
.spec:hover{transform:translateY(-3px);box-shadow:var(--e2);background:var(--pure)}
.spec-ic{display:flex;align-items:center;justify-content:center;width:56px;height:56px;color:var(--navy)}
.spec-ic svg{width:44px;height:44px}
.spec p{margin:0;color:var(--txt);font-size:15.5px;line-height:1.55;text-wrap:pretty}
@media(max-width:960px){.specs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.specs{grid-template-columns:1fr;gap:14px}
.spec{flex-direction:row;text-align:left;padding:24px 22px;gap:18px}
.spec-ic{width:44px;height:44px;flex:0 0 44px}.spec-ic svg{width:34px;height:34px}}
/* ---------- .etapes : modalites d'acces numerotees ----------
Pastille teal numerotee, titre, description, filet de separation entre
chaque etape — le traitement du site historique. */
.etapes{list-style:none;counter-reset:et;margin:0 auto;padding:0;max-width:820px;text-align:left}
.etapes li{counter-increment:et;position:relative;padding:30px 0 30px 76px;border-top:1px solid var(--line)}
.etapes li:first-child{border-top:0;padding-top:6px}
.etapes li::before{content:counter(et);position:absolute;left:0;top:28px;
width:50px;height:50px;border-radius:50%;background:var(--teal);color:#fff;
display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800}
.etapes li:first-child::before{top:4px}
.etapes b{display:block;font-size:21px;font-weight:800;color:var(--navy);letter-spacing:-.02em;margin-bottom:10px}
.etapes p{margin:0;color:var(--txt);font-size:15.5px;line-height:1.6}
.etapes p + p{margin-top:12px}
.etapes a{color:var(--teal-dark);font-weight:700}
@media(max-width:560px){
.etapes li{padding:26px 0 26px 58px}
.etapes li::before{width:40px;height:40px;font-size:17px;top:24px}
.etapes li:first-child::before{top:2px}
.etapes b{font-size:19px}
}
/* ---------- animation des etapes ----------
Le filet vertical qui relie les pastilles se trace au fil de la revelation :
gris tant que l'etape n'est pas lue, teal une fois entree dans l'ecran. La
pastille arrive en meme temps, d'un demi-cran d'echelle. */
.etapes li::after{content:"";position:absolute;left:24px;top:78px;bottom:-2px;width:2px;
background:var(--line);transform:scaleY(0);transform-origin:top;
transition:transform .55s var(--ease) .12s,background .4s var(--ease)}
.etapes li:first-child::after{top:54px}
.etapes li:last-child::after{display:none}
.etapes li.in::after{transform:scaleY(1);background:linear-gradient(var(--teal),rgba(63,180,177,.25))}
.etapes li::before{transform:scale(.72);opacity:0;
transition:transform .45s cubic-bezier(.2,.9,.3,1.25),opacity .3s var(--ease),box-shadow .25s var(--ease)}
.etapes li.in::before{transform:scale(1);opacity:1}
.etapes li:hover::before{box-shadow:0 0 0 6px rgba(63,180,177,.14)}
.etapes b{transition:color .25s var(--ease)}
.etapes li:hover b{color:var(--teal-dark)}
.etapes a{background-image:linear-gradient(var(--teal),var(--teal));background-size:0 2px;
background-repeat:no-repeat;background-position:0 100%;text-decoration:none;
transition:background-size .28s var(--ease)}
.etapes a:hover{background-size:100% 2px}
@media(max-width:560px){.etapes li::after{left:19px;top:66px}.etapes li:first-child::after{top:44px}}
/* Les cartes a icone : l'icone se pose une fraction apres la carte. */
.spec-ic{transition:transform .4s cubic-bezier(.2,.9,.3,1.25),color .25s var(--ease)}
.spec:hover .spec-ic{transform:scale(1.08);color:var(--teal-dark)}
.spec.kg-rv .spec-ic{transform:scale(.86)}
.spec.kg-rv.in .spec-ic{transform:scale(1);transition-delay:.14s}
@media(prefers-reduced-motion:reduce){
.etapes li::after{transform:scaleY(1);transition:none}
.etapes li::before{transform:scale(1);opacity:1;transition:none}
.spec-ic,.spec.kg-rv .spec-ic{transform:none;transition:none}
.etapes a{transition:none}
}
/* ---------- FAQ : barre de recherche + filtres thematiques ----------
Trente questions reparties en huit themes : sans point d'entree, la page est
un mur. La barre reste collee sous l'en-tete pendant tout le parcours. */
.fq-bar{position:sticky;top:0;z-index:40;background:rgba(247,249,250,.92);
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
border-bottom:1px solid var(--line);padding:16px 0}
.fq-bar-in{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.fq-search{display:flex;align-items:center;gap:10px;background:var(--pure);
border:1px solid var(--line);border-radius:999px;padding:0 16px;height:48px;
flex:0 0 330px;max-width:100%;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.fq-search:focus-within{border-color:var(--teal);box-shadow:0 0 0 3px rgba(63,180,177,.18)}
.fq-search svg{width:18px;height:18px;color:var(--txt);flex:0 0 18px}
.fq-search input{border:0;outline:0;background:transparent;font:inherit;font-size:15px;
color:var(--navy);width:100%;height:100%}
.fq-search input::-webkit-search-cancel-button{display:none}
.fq-clear{border:0;background:transparent;color:var(--txt);font-size:22px;line-height:1;
cursor:pointer;padding:0 2px;min-width:24px}
.fq-clear:hover{color:var(--navy)}
.fq-chips{display:flex;gap:8px;flex-wrap:wrap;flex:1;min-width:0}
.fq-chip{border:1px solid var(--line);background:var(--pure);color:var(--txt);
font:inherit;font-size:13.5px;font-weight:600;padding:9px 15px;border-radius:999px;
cursor:pointer;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease)}
.fq-chip:hover{border-color:var(--teal);color:var(--navy)}
.fq-chip.is-on{background:var(--navy);border-color:var(--navy);color:#fff}
.fq-n{font-size:11.5px;font-weight:700;opacity:.55;font-variant-numeric:tabular-nums}
.fq-vide{display:block;text-align:center;color:var(--txt);font-size:16px;padding:70px 20px}
.fq-vide .fq-reset{border:0;background:transparent;color:var(--teal-dark);font:inherit;
font-weight:700;text-decoration:underline;cursor:pointer}
.faq-sec[hidden],.fq-vide[hidden]{display:none}
/* en mode recherche, plus d'alternance de fond : la page devient une liste de resultats */
body.fq-filtre .faq-sec{background:var(--pure)}
@media(max-width:760px){
.fq-bar{padding:12px 0}
.fq-search{flex:1 1 100%}
.fq-chips{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;scrollbar-width:none}
.fq-chips::-webkit-scrollbar{display:none}
.fq-chip{min-height:44px}
}
/* accordeon : chevron pivotant et ouverture animee */
.faq summary::after{content:"";width:11px;height:11px;border-right:2px solid var(--teal);
border-bottom:2px solid var(--teal);transform:rotate(45deg) translate(-2px,-2px);
transition:transform .25s var(--ease);flex:0 0 11px}
.faq details[open] summary::after{content:"";transform:rotate(-135deg) translate(-2px,-2px)}
.faq details{transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.faq details:hover{border-color:rgba(63,180,177,.5)}
.faq details[open]{border-color:rgba(63,180,177,.5);box-shadow:var(--e1)}
.faq summary:focus-visible{outline:2px solid var(--teal);outline-offset:-2px;border-radius:12px}
.faq mark{background:rgba(63,180,177,.24);color:inherit;border-radius:3px;padding:0 2px}
@media(prefers-reduced-motion:reduce){.faq summary::after{transition:none}}
/* ---------- pages atelier : bandeau de faits dans le hero (delta v13->v14) ----------
Une page d'atelier se juge sur trois reperes concrets. Ils etaient enterres
en bas de page ; ils remontent dans le hero, sur une seule ligne. */
.at-facts{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
margin:38px 0 0;padding:0;text-align:left;border-top:1px solid rgba(255,255,255,.16)}
.at-facts li{padding:22px 26px 0;border-left:1px solid rgba(255,255,255,.16);min-width:0}
.at-facts li:first-child{padding-left:0;border-left:0}
.at-facts li:last-child{padding-right:0}
.at-facts b{display:block;color:#fff;font-size:20px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.at-facts span{display:block;margin-top:5px;color:rgba(255,255,255,.62);font-size:12.5px;
font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1.4}
.hero:not(.nuit) .at-facts{border-top-color:var(--line)}
.hero:not(.nuit) .at-facts li{border-left-color:var(--line)}
.hero:not(.nuit) .at-facts b{color:var(--navy)}
.hero:not(.nuit) .at-facts span{color:var(--txt)}
@media(max-width:720px){
.at-facts{grid-template-columns:1fr}
.at-facts li{border-left:0;padding:18px 0 0;
border-top:1px solid rgba(255,255,255,.12)}
.at-facts li:first-child{border-top:0}
.hero:not(.nuit) .at-facts li{border-top-color:var(--line)}
.at-facts b{font-size:18px}
}
/* Les etapes acceptent une liste a puces en corps, pas seulement un paragraphe. */
.etapes ul{margin:0;padding-left:20px;color:var(--txt);font-size:15.5px;line-height:1.6}
.etapes li ul li{counter-increment:none;padding:0;border-top:0;margin-bottom:7px;list-style:disc}
.etapes li ul li::before,.etapes li ul li::after{content:none;display:none}
/* Trois benefices tiennent sur une ligne : la largeur bridee a 760 px les
forcait en 2 + 1 orphelin. */
.checks-3{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1040px;gap:10px 26px}
@media(max-width:900px){.checks-3{grid-template-columns:1fr;max-width:620px}}
/* ---------- .offre-card : le bloc de decision d'une page atelier ----------
Le prix vivait seul dans une section grise, sans action possible : un
cul-de-sac juste avant le pied de page. Il devient une carte unique, prix a
gauche, boutons a droite, sur la meme ligne optique. */
.offre-card{display:flex;align-items:center;justify-content:space-between;gap:34px;
flex-wrap:wrap;max-width:880px;margin:0 auto;text-align:left;
background:var(--pure);border:1px solid var(--line);border-radius:var(--r-lg);
box-shadow:var(--e2);padding:34px 38px;position:relative;overflow:hidden}
.offre-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--teal)}
.offre-prix b{display:block;color:var(--navy);font-size:clamp(26px,3vw,34px);font-weight:800;
letter-spacing:-.03em;line-height:1.1}
.offre-prix span{display:block;margin-top:8px;color:var(--txt);font-size:13px;font-weight:800;
letter-spacing:.09em;text-transform:uppercase}
.offre-ctas{display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:720px){
.offre-card{padding:28px 24px 28px 28px;gap:24px}
.offre-ctas{width:100%}
.offre-ctas .btn{flex:1 1 100%;text-align:center}
}
/* ═══════════════════════════════════════════════════════════════════════════
APPORTS LIVRAISON 15 (designer) — delta livraison 14 → 15
Bibliotheque de ressources : cartes uniformes .res-grid/.res, filtres,
couverture livre blanc, .dl-card. Insere AVANT le bloc ALIGNEMENT.
═══════════════════════════════════════════════════════════════════════════ */
/* ---------- livres blancs : la couverture du document ----------
Une page qui demande cinq champs pour recevoir un document ne montrait pas
ce document. La couverture est dessinee en CSS : rien a produire, rien a
maintenir, et elle porte le titre reel de chaque livre blanc. */
.lb-hero .hero-grid{grid-template-columns:1.05fr .95fr;align-items:center}
.lb-cover-wrap{display:flex;justify-content:center;align-items:center;padding:10px}
.lb-cover{position:relative;width:300px;aspect-ratio:1/1.414;border-radius:4px 12px 12px 4px;
background:linear-gradient(150deg,#23334A 0%,#1B2A3E 58%,#16233450 100%),var(--navy);
box-shadow:0 30px 60px rgba(35,51,74,.32),0 4px 12px rgba(35,51,74,.2);
padding:44px 34px 32px;display:flex;flex-direction:column;
transform:rotate(-2.2deg);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.lb-cover::before{content:"";position:absolute;left:0;top:0;bottom:0;width:12px;
background:linear-gradient(90deg,rgba(0,0,0,.34),rgba(0,0,0,0));border-radius:4px 0 0 4px}
.lb-cover::after{content:"";position:absolute;left:34px;right:34px;top:98px;height:3px;
background:var(--teal);border-radius:2px}
.lb-cover:hover{transform:rotate(-1deg) translateY(-6px);
box-shadow:0 40px 74px rgba(35,51,74,.38),0 6px 16px rgba(35,51,74,.24)}
.lb-cover-eb{color:var(--teal);font-size:11.5px;font-weight:800;letter-spacing:.2em;
text-transform:uppercase}
.lb-cover b{margin-top:64px;color:#fff;font-size:29px;font-weight:800;letter-spacing:-.03em;
line-height:1.14;text-wrap:balance}
.lb-cover-sig{margin-top:auto;color:rgba(255,255,255,.72);font-size:15px;font-weight:800;
letter-spacing:-.02em}
.lb-cover-sig i{color:var(--teal);font-style:normal}
@media(max-width:900px){
.lb-hero .hero-grid{grid-template-columns:1fr}
.lb-cover-wrap{order:-1;padding:0 0 26px}
.lb-cover{width:230px;transform:rotate(-1.6deg)}
.lb-cover b{font-size:24px;margin-top:48px}
.lb-cover::after{top:82px}
}
@media(prefers-reduced-motion:reduce){.lb-cover,.lb-cover:hover{transition:none;transform:none}}
/* ---------- .dl-card : telechargement libre ----------
Zero email demande : le document part directement. La carte remplace le
formulaire a cinq champs — nature du fichier a gauche, bouton a droite. */
.dl-card{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;
max-width:680px;margin:0 auto;text-align:left;background:var(--pure);
border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--e2);
padding:26px 30px;position:relative;overflow:hidden}
.dl-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--teal)}
.dl-doc{display:flex;align-items:center;gap:16px;min-width:0}
.dl-ic{display:flex;align-items:center;justify-content:center;width:48px;height:48px;flex:0 0 48px;
border-radius:12px;background:var(--light);color:var(--navy)}
.dl-ic svg{width:26px;height:26px}
.dl-doc b{display:block;color:var(--navy);font-size:16.5px;font-weight:800;letter-spacing:-.01em}
.dl-doc span{display:block;margin-top:3px;color:var(--txt);font-size:13px;font-weight:700;
letter-spacing:.06em;text-transform:uppercase}
@media(max-width:620px){
.dl-card{padding:22px 22px 22px 26px;gap:20px}
.dl-card .btn{width:100%;text-align:center}
}
/* La section ressources suivait un fond gris identique au sien : elle passe en
blanc quand elle suit une section claire. */
/* Fin de page : ressources puis CTA, jamais deux fonds identiques quelle que
soit la section qui precede. */
.blog-sec{background:var(--white)}
.final{background:var(--pure)}
.sec-light + .blog-sec{background:var(--pure)}
.sec-light + .blog-sec + .final{background:var(--white)}
/* Le hero clair partageait le blanc de la premiere section. */
.hero.page-hero:not(.nuit){background:var(--white)}
/* La couverture accepte une vraie image quand elle existe : il suffit d'ajouter
un
dans .lb-cover, il recouvre le dessin CSS sans autre changement.
*/ .lb-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; border-radius:inherit;z-index:2} .lb-cover:has(img)::after{display:none} .lb-cover:has(img) .lb-cover-eb,.lb-cover:has(img) b,.lb-cover:has(img) .lb-cover-sig{ position:relative;z-index:3;visibility:hidden} /* ---------- couverture photo ---------- Les visuels fournis sont deja des mock-ups de livre, avec leur perspective, leur ombre portee et leur fond. Les enfermer dans le cadre dessine ajouterait une seconde ombre et une seconde rotation : la carte s'efface entierement et l'image est posee telle quelle. */ .lb-cover.is-photo{background:none;box-shadow:none;padding:0;border-radius:0;transform:none; width:auto;max-width:400px;aspect-ratio:auto;display:block; transition:transform .5s var(--ease)} .lb-cover.is-photo::before,.lb-cover.is-photo::after{display:none} .lb-cover.is-photo img{position:static;width:100%;height:auto;object-fit:contain; border-radius:0;display:block;mix-blend-mode:multiply} .lb-cover.is-photo:hover{transform:translateY(-6px);box-shadow:none} .lb-cover.is-photo .lb-cover-eb,.lb-cover.is-photo b,.lb-cover.is-photo .lb-cover-sig{display:none} @media(max-width:900px){.lb-cover.is-photo{max-width:300px;margin:0 auto}} @media(prefers-reduced-motion:reduce){.lb-cover.is-photo,.lb-cover.is-photo:hover{transform:none;transition:none}} /* ---------- .res-grid : la bibliotheque des ressources ---------- Livres blancs et guides sur une seule page, filtrables par famille. La couverture porte la reconnaissance : on retrouve un document a son visuel bien avant de lire son titre. */ .res-filtres{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:0 0 42px} .res-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 22px;text-align:left} .res{display:flex;flex-direction:column;background:var(--pure);border:1px solid var(--line); border-radius:var(--r-lg);overflow:hidden;text-decoration:none;box-shadow:var(--e1); transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease)} .res:hover{transform:translateY(-4px);box-shadow:var(--e2);border-color:rgba(63,180,177,.5)} .res[hidden]{display:none} .res-vis{display:flex;align-items:center;justify-content:center;background:var(--light); aspect-ratio:4/3;padding:18px;overflow:hidden} .res-vis img{width:auto;height:100%;max-width:100%;object-fit:contain;mix-blend-mode:multiply; transition:transform .35s var(--ease)} .res:hover .res-vis img{transform:scale(1.05)} .res-fallback{display:flex;flex-direction:column;justify-content:space-between; width:132px;aspect-ratio:1/1.414;background:linear-gradient(150deg,#23334A,#1B2A3E); border-radius:3px 8px 8px 3px;padding:18px 15px 14px;box-shadow:0 10px 22px rgba(35,51,74,.28)} .res-fallback b{color:#fff;font-size:14px;font-weight:800;letter-spacing:-.02em;line-height:1.22; text-wrap:balance} .res-fallback i{color:rgba(255,255,255,.7);font-style:normal;font-size:11px;font-weight:800; letter-spacing:-.01em} .res-fallback i em{color:var(--teal);font-style:normal} .res-body{display:flex;flex-direction:column;flex:1;padding:20px 22px 22px;gap:0} .res-kind{color:var(--teal-dark);font-size:11px;font-weight:900;letter-spacing:.14em; text-transform:uppercase;margin-bottom:9px} .res-body b{color:var(--navy);font-size:17px;font-weight:800;letter-spacing:-.02em;line-height:1.25; margin-bottom:8px;text-wrap:pretty} .res-desc{color:var(--txt);font-size:14.5px;line-height:1.55;margin-bottom:16px} .res-dl{margin-top:auto;color:var(--teal-dark);font-size:14px;font-weight:700} @media(max-width:900px){.res-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:820px){.res-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:520px){ .res-grid{grid-template-columns:1fr;gap:16px} .res{flex-direction:row} .res-vis{aspect-ratio:auto;flex:0 0 118px;padding:14px} .res-fallback{width:auto;padding:12px 10px 10px} .res-fallback b{font-size:12px} .res-body{padding:18px 18px 18px 16px} .res-desc{display:none} } @media(prefers-reduced-motion:reduce){.res,.res-vis img{transition:none}.res:hover{transform:none}} /* Blocs a fond implicite (.stats-sec, .logos, .tests-sec, .price-sec, .fonds-sec) : leur couleur ne depend pas de leur classe mais de ce qui precede. Ces regles closent les derniers voisinages identiques. */ .sec-grey + .stats-sec,.sec-light + .stats-sec{background:var(--pure)} .logos + .sec-white,.logos + .price-sec{background:var(--white)} .tests-sec + .logos{background:var(--pure)} /* ---------- detourage des couvertures ---------- Les mock-ups sont livres sur un fond blanc casse legerement variable. Poser la vignette sur du blanc pur et laisser le multiply faire le reste evite le rectangle gris visible autour de chaque livre. */ .res-vis{background:var(--pure)} .res-vis img{mix-blend-mode:multiply;filter:contrast(1.02)} .lb-cover.is-photo img{mix-blend-mode:multiply} .lb-cover-wrap{background:transparent} /* ---------- hauteur fixe de vignette ---------- L'aspect-ratio faisait dependre la hauteur de la carte du chargement de son image : une rangee tombait a 227 px pendant que la suivante en faisait 452. Une hauteur fixe rend les rangees identiques des le premier rendu. */ .res-vis{aspect-ratio:auto;height:250px;flex:0 0 250px;padding:20px} .res-vis img{max-height:100%;width:auto} .res-fallback{width:118px;height:auto;max-height:210px;aspect-ratio:1/1.414} @media(max-width:520px){ .res-vis{height:auto;flex:0 0 118px;padding:14px} .res-fallback{max-height:none} } /* ---------- rangees de hauteur egale ---------- Les hauteurs variaient encore d'une rangee a l'autre selon la longueur des descriptions. Une hauteur minimale de corps aligne les liens de telechargement sur toute la grille. */ .res-body{min-height:196px} .res-desc{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} @media(max-width:520px){.res-body{min-height:0}} .res{min-height:470px} @media(max-width:520px){.res{min-height:0}} /* ---------- carte ressource : mise au propre ---------- Les regles s'etaient empilees et se contredisaient : bascule en ligne sous 520 px, hauteur minimale qui restait active, vignette a hauteur fixe. Ce bloc reprend la carte a zero — colonne partout, meme rythme a toute largeur. */ .res{flex-direction:column;min-height:0} .res-vis{height:230px;flex:0 0 230px;padding:18px;aspect-ratio:auto} .res-vis img{max-height:100%;max-width:100%;width:auto;height:auto} .res-fallback{width:112px;height:158px;max-height:none;aspect-ratio:auto} .res-body{min-height:0;padding:18px 20px 20px} .res-body b{font-size:16px;line-height:1.28;display:-webkit-box;-webkit-line-clamp:2; -webkit-box-orient:vertical;overflow:hidden;min-height:2.56em} .res-desc{font-size:14px;line-height:1.5;-webkit-line-clamp:2;min-height:2.9em;margin-bottom:14px} @media(max-width:520px){ .res-grid{grid-template-columns:1fr;gap:14px} .res{flex-direction:row} .res-vis{height:auto;flex:0 0 104px;padding:14px} .res-fallback{width:76px;height:107px} .res-body{padding:16px 18px 16px 14px;justify-content:center} .res-body b,.res-desc{min-height:0} .res-desc{display:none} } /* ---------- carte ressource : bloc autoritaire ---------- Les regles s'etaient empilees au fil des retouches et se contredisaient : certaines cartes basculaient en ligne, d'autres restaient en colonne, les hauteurs suivaient le chargement des images. Ce bloc, plus specifique que tous les precedents, redefinit la carte une bonne fois. */ .res-grid{align-items:stretch} .res-grid .res{display:flex;flex-direction:column;min-height:0} .res-grid .res .res-vis{display:flex;align-items:center;justify-content:center; height:236px;min-height:236px;max-height:236px;flex:0 0 236px; padding:16px;aspect-ratio:auto;background:var(--pure);overflow:hidden} .res-grid .res .res-vis img{max-height:204px;max-width:100%;width:auto;height:auto; object-fit:contain;mix-blend-mode:multiply} .res-grid .res .res-fallback{width:auto;height:204px;aspect-ratio:1/1.414;max-height:204px} .res-grid .res .res-body{display:flex;flex-direction:column;flex:1 1 auto;min-height:0; padding:18px 20px 20px} .res-grid .res .res-body b{font-size:16.5px;line-height:1.3;min-height:3.9em; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .res-grid .res .res-desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; overflow:hidden;font-size:14px;line-height:1.5;min-height:3em;margin-bottom:14px} .res-grid .res .res-dl{margin-top:auto} @media(max-width:520px){ .res-grid .res{flex-direction:row} .res-grid .res .res-vis{height:auto;min-height:0;max-height:none;flex:0 0 106px;padding:14px} .res-grid .res .res-vis img{max-height:120px} .res-grid .res .res-fallback{height:120px} .res-grid .res .res-body{justify-content:center;padding:16px 18px 16px 14px} .res-grid .res .res-body b{min-height:0} .res-grid .res .res-desc{display:none;min-height:0} } /* ---------- hauteur plancher de carte ---------- Derniere cause du desordre : sans hauteur minimale, une carte se refermait sur sa vignette et son corps debordait hors du cadre. */ .res-grid .res{min-height:430px} @media(max-width:520px){.res-grid .res{min-height:140px}} /* ======================================================================== BIBLIOTHEQUE — carte ressource, definition finale (remplace tout le reste) ======================================================================== */ .res-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 22px; grid-auto-rows:1fr;align-items:stretch;text-align:left} .res-grid .res{display:flex;flex-direction:column;min-height:0;height:100%; background:var(--pure);border:1px solid var(--line);border-radius:var(--r-lg); overflow:hidden;text-decoration:none;box-shadow:var(--e1); transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease)} .res-grid .res:hover{transform:translateY(-4px);box-shadow:var(--e2);border-color:rgba(63,180,177,.5)} .res-grid .res .res-vis{display:flex;align-items:center;justify-content:center; height:232px;min-height:232px;max-height:232px;flex:0 0 232px; padding:20px 18px 12px;background:var(--pure);overflow:hidden;aspect-ratio:auto} .res-grid .res .res-vis img{max-height:196px;max-width:82%;width:auto;height:auto; object-fit:contain;mix-blend-mode:multiply;transition:transform .35s var(--ease)} .res-grid .res:hover .res-vis img{transform:scale(1.04)} .res-grid .res .res-fallback{width:auto;height:196px;aspect-ratio:1/1.414;max-height:196px} .res-grid .res .res-body{display:flex;flex-direction:column;flex:1 1 auto;min-height:0; padding:0 22px 22px} .res-grid .res .res-kind{color:var(--teal-dark);font-size:11px;font-weight:900; letter-spacing:.14em;text-transform:uppercase;margin:0 0 9px} .res-grid .res .res-body b{color:var(--navy);font-size:16.5px;font-weight:800; letter-spacing:-.02em;line-height:1.28;margin:0 0 10px; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; min-height:2.56em} .res-grid .res .res-desc{color:var(--txt);font-size:14px;line-height:1.5;margin:0 0 16px; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; min-height:3em} .res-grid .res .res-dl{margin-top:auto;color:var(--teal-dark);font-size:14px;font-weight:700} @media(max-width:1080px){.res-grid{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:820px){.res-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:520px){ .res-grid{grid-template-columns:1fr;gap:14px;grid-auto-rows:auto} .res-grid .res{flex-direction:row;height:auto} .res-grid .res .res-vis{height:auto;min-height:0;max-height:none;flex:0 0 116px;padding:14px 10px} .res-grid .res .res-vis img{max-height:130px;max-width:100%} .res-grid .res .res-fallback{height:130px} .res-grid .res .res-body{justify-content:center;padding:16px 18px 16px 6px} .res-grid .res .res-body b{min-height:0} .res-grid .res .res-desc{display:none;min-height:0} } @media(prefers-reduced-motion:reduce){ .res-grid .res,.res-grid .res .res-vis img{transition:none} .res-grid .res:hover{transform:none} .res-grid .res:hover .res-vis img{transform:none} } /* ═══ delta livraison 15 → 16 ═══════════════════════════════════════════════ .dl-ic accueille desormais la couverture du document (et non une icone PDF) : on la recadre au format carre de la pastille. Et tant qu'un PDF n'est pas depose dans assets/docs/, le bouton de telechargement est rendu neutralise (.is-disabled) : aucun href mort, aucun 404 en production. */ .dl-ic{overflow:hidden;padding:0} .dl-ic img{width:100%;height:100%;object-fit:cover;display:block} .btn.is-disabled{background:var(--light);color:var(--txt);box-shadow:none;cursor:not-allowed;pointer-events:none} /* ============================================================================ ALIGNEMENT — pictogrammes et pseudo-elements cales sur la ligne de texte ---------------------------------------------------------------------------- Placee en fin de feuille : surcharge les regles precedentes sans les supprimer. Principe : plus aucun `top` en dur. La position verticale d'un pseudo-element est DERIVEE de la taille de police et de la hauteur de ligne reellement declarees, portees par des variables locales : --kg-fs taille de police du texte de la ligne --kg-lh hauteur de ligne (sans unite) --kg-pt padding vertical de l'element --kg-mk diametre de la pastille --kg-gap gouttiere entre la pastille et le texte Consequence : changer --kg-fs suffit, la puce suit. Les clamp() du design system peuvent faire varier les tailles sans jamais desaligner les coches. ============================================================================ */ /* ---------- listes a coches ---------- */ .plan li {--kg-fs:14px; --kg-lh:1.5; --kg-pt:4px; --kg-mk:17px; --kg-gap:11px} .card li {--kg-fs:14.5px;--kg-lh:1.55; --kg-pt:5px; --kg-mk:17px; --kg-gap:11px} .checks li {--kg-fs:15.5px;--kg-lh:1.6; --kg-pt:8px; --kg-mk:17px; --kg-gap:11px} .fiche-obj li{--kg-fs:14px; --kg-lh:1.5; --kg-pt:0px; --kg-mk:16px; --kg-gap:10px} .plan li,.card li,.checks li,.fiche-obj li{ position:relative; font-size:var(--kg-fs); line-height:var(--kg-lh); padding-top:var(--kg-pt); padding-bottom:var(--kg-pt); padding-left:calc(var(--kg-mk) + var(--kg-gap)); } .plan li::before,.card li::before,.checks li::before,.fiche-obj li::before{ content:"✓"; position:absolute; left:0; /* centre de la pastille = centre de la PREMIERE ligne de texte, que l'element tienne sur une ligne ou sur trois */ top:calc(var(--kg-pt) + (var(--kg-fs) * var(--kg-lh) - var(--kg-mk)) / 2); width:var(--kg-mk); height:var(--kg-mk); display:flex; align-items:center; justify-content:center; line-height:1; font-size:calc(var(--kg-mk) * .6); font-weight:900; color:var(--teal-dark); } .fiche-obj li::before{background:rgba(63,180,177,.14);border-radius:50%} /* ---------- FAQ : le +/- se cale sur la 1re ligne de la question ---------- Une question sur deux lignes (frequent en 390 px) laissait le bouton flotter au milieu du bloc, jusqu'a 27 px sous la 1re ligne. */ .faq summary{ --kg-fs:16.5px;--kg-lh:1.6;--kg-mk:28px; font-size:var(--kg-fs); line-height:var(--kg-lh); align-items:flex-start; } .faq summary::after{ margin-top:calc((var(--kg-fs) * var(--kg-lh) - var(--kg-mk)) / 2); width:var(--kg-mk);height:var(--kg-mk);flex:0 0 var(--kg-mk); } /* ============================================================================ WEBFORM PIPEDRIVE — cadre d'integration Le formulaire est servi par Pipedrive dans une iframe : on ne maitrise pas son interieur, seulement le cadre. On lui donne la meme carte blanche que .form-card pour qu'il ne fasse pas piece rapportee, et une hauteur suffisante pour que le visiteur n'ait jamais a scroller dans l'iframe (formulaire a 5 champs + reCAPTCHA : 643 px mesures en 700 px de large, 675 px en 360 px). ============================================================================ */ .pd-embed{ max-width:640px;margin:0 auto;text-align:left; background:var(--pure);border:var(--hair);border-radius:var(--r-xl); box-shadow:var(--e3);padding:clamp(16px,2.2vw,26px); } .pd-embed iframe{ display:block;width:100%;height:670px;border:0;border-radius:12px; color-scheme:light; } .pd-embed .form-note{margin-top:14px} .pd-fallback{font-size:15px;line-height:1.6;color:var(--txt);padding:22px 4px} .pd-fallback a{color:var(--teal-dark);font-weight:700} @media(max-width:620px){.pd-embed iframe{height:750px}} /* Rappel du document demande sur les pages livre blanc / guide : le webform ne sait pas recevoir cette information par parametre d'URL. */ .pd-doc{ --kg-fs:14.5px;--kg-lh:1.55;--kg-mk:20px;--kg-pt:14px;--kg-pl:16px; position:relative;text-align:left; max-width:640px;margin:0 auto 18px; background:rgba(63,180,177,.09);border:1px solid rgba(63,180,177,.24); border-radius:var(--r-md); padding:var(--kg-pt) var(--kg-pl) var(--kg-pt) calc(var(--kg-pl) + var(--kg-mk) + 12px); font-size:var(--kg-fs);line-height:var(--kg-lh);color:var(--navy); } .pd-doc::before{ content:"i";position:absolute;left:var(--kg-pl); /* meme derivation que les coches : centre de la pastille = centre de la 1re ligne */ top:calc(var(--kg-pt) + (var(--kg-fs) * var(--kg-lh) - var(--kg-mk)) / 2); width:var(--kg-mk);height:var(--kg-mk); display:flex;align-items:center;justify-content:center; border-radius:50%;background:var(--teal);color:#fff; font-size:12px;font-weight:900;font-style:italic;line-height:1; } .pd-doc b{color:var(--navy);font-weight:700} /* ── FIX bandeau stats (67% / 80-100K€ / 6 mois, etc.) ────────────────────── La fusion des 16 livraisons a laissé un conflit : une règle adjacente `.sec-grey + .stats-sec{background:var(--pure)}` (blanc) alors que les chiffres restent en blanc (`.stats-sec .stat b{color:#fff}`), d'où une « bande blanche » quand le bandeau suit une section grise ou claire (ex. pulse-audit). On verrouille ici le design voulu : bandeau navy, chiffres blancs, partout et de façon cohérente. Placé en fin de fichier pour gagner la cascade à spécificité égale. */ .stats-sec, .sec-grey + .stats-sec, .sec-light + .stats-sec, .sec-white + .stats-sec{background:var(--navy)} .stats-sec .stat b{color:#fff} .stats-sec .stat span{color:rgba(255,255,255,.82)} .stats-sec .stat{border-left:1px solid rgba(255,255,255,.17)} .stats-sec .stat:first-child{border-left:0} …