/* design.css — nouveau design (inspiration Attio + Notion), novembre 2026.
   Toutes les classes commencent par « d- » pour ne pas toucher aux styles existants de style.css.
   Couleurs : uniquement la charte PM SIDE (variables de style.css), jamais de bleu. */

:root {
  --d-gris: #8F908E;
  --d-voile: #FBE9E8;
  --d-trait: #E7E7E5;
  --d-ombre: 0 30px 80px -30px rgba(41, 42, 41, .35), 0 0 0 1px #E7E7E5;
  --d-ombre-carte: 0 20px 50px -20px rgba(41, 42, 41, .35), 0 0 0 1px #E7E7E5;
}

/* ---------- Éléments communs ---------- */
.d-pastille { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--rouge); background: var(--d-voile); padding: 5px 12px; border-radius: 999px; }
.d-deux-tons .d-suite { color: var(--d-gris); transition: color .6s; }
.d-deux-tons.d-on .d-suite { color: var(--texte); }
.d-section-tete { display: grid; gap: 16px; justify-items: start; max-width: 780px; }
.d-section-tete h2 { font-size: clamp(30px, 4.2vw, 48px); font-weight: 800; line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; margin: 0; }
.d-fenetre, .d-flottante { cursor: default; user-select: none; }
.d-petit { font-size: 12px; color: var(--texte-doux); margin: 0; }
.d-tag { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--gris-fond); color: var(--texte); white-space: nowrap; }
.d-tag.d-fort { background: var(--d-voile); color: var(--rouge-fonce); }
.d-pt { width: 9px; height: 9px; border-radius: 50%; background: var(--rouge); display: inline-block; flex: none; }
.d-pt.d-gris { background: #D8D8D5; } .d-pt.d-moyen { background: var(--rouge-moyen); }
.d-tiret { width: 16px; border-top: 2px dashed var(--texte); opacity: .6; display: inline-block; }
.d-legende { font-size: 11px; color: var(--texte-doux); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 10px 0 0; }
@keyframes d-pousse { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes d-monte { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes d-trace { to { stroke-dashoffset: 0; } }
@keyframes d-apparait { to { transform: rotate(45deg) scale(1); } }
@keyframes d-glisse { from { left: 44%; } to { left: 52%; } }

/* ---------- Fenêtre d'application ---------- */
.d-fenetre { background: #fff; border-radius: var(--r-m); box-shadow: var(--d-ombre); overflow: hidden; text-align: left; }
.d-barre { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--d-trait); font-size: 13px; color: var(--texte-doux); white-space: nowrap; }
.d-barre b { color: var(--texte); font-weight: 700; }
.d-barre .d-titre { overflow: hidden; text-overflow: ellipsis; }
.d-points { display: flex; gap: 6px; margin-right: 8px; }
.d-points i { width: 11px; height: 11px; border-radius: 50%; background: var(--d-trait); display: block; }
.d-points i:first-child { background: var(--rouge-pale); }
.d-onglets { margin-left: auto; display: flex; gap: 2px; }
.d-onglets span { padding: 4px 9px; border-radius: 999px; font-weight: 600; font-size: 12px; white-space: nowrap; }
.d-onglets .d-actif { background: var(--texte); color: #fff; }
.d-haut .d-onglets span { pointer-events: none; }

/* ---------- Haut de page (accueil) ---------- */
.d-haut { margin-top: 80px; padding-block: 72px 0; text-align: center; position: relative; overflow: hidden; background: linear-gradient(180deg, #fff 0%, #fff 50%, var(--d-voile) 82%, var(--gris-fond) 100%); }
.d-haut h1 { font-size: clamp(36px, 6vw, 68px); font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; max-width: 21ch; margin: 18px auto 0; text-wrap: balance; }
.d-haut .d-ligne2 { color: var(--d-gris); }
.d-haut .d-mot { position: relative; color: var(--texte); white-space: nowrap; }
.d-haut .d-mot svg { position: absolute; left: -4%; bottom: -14px; width: 108%; height: 22px; overflow: visible; }
.d-haut .d-mot path { stroke: var(--rouge); stroke-width: 5; fill: none; stroke-linecap: round; stroke-dasharray: 420; stroke-dashoffset: 420; animation: d-trace 1.1s .6s ease-out forwards; }
.d-haut .d-intro { font-size: 19px; color: var(--texte-doux); max-width: 52ch; margin: 28px auto 0; }
.d-haut .boutons { justify-content: center; margin-top: 32px; }
.d-scene { position: relative; margin: 64px auto 0; max-width: 1060px; padding-bottom: 72px; }

.d-gantt { display: grid; grid-template-columns: 200px 1fr; font-size: 13px; }
.d-gantt-noms, .d-gantt-temps { display: grid; grid-auto-rows: 44px; }
.d-gantt-noms { border-right: 1px solid var(--d-trait); }
.d-gantt-noms div { display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--gris-fond); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-entete-col { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--d-gris); text-transform: uppercase; }
.d-avatar { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 10px; font-weight: 700; color: #fff; flex: none; }
.d-gantt-temps { position: relative; }
.d-semaines { display: grid; grid-template-columns: repeat(8, 1fr); align-items: center; border-bottom: 1px solid var(--gris-fond); }
.d-semaines span { padding-left: 10px; }
.d-ligne { position: relative; border-bottom: 1px solid var(--gris-fond); }
.d-barre-t { position: absolute; top: 12px; height: 20px; border-radius: 10px; transform-origin: left center; transform: scaleX(0); animation: d-pousse 1.1s cubic-bezier(.2,.7,.2,1) forwards; }
.d-barre-t .d-fait { position: absolute; inset: 0 auto 0 0; border-radius: 10px; background: rgba(41,42,41,.22); }
.d-jalon { position: absolute; top: 13px; width: 18px; height: 18px; background: var(--texte); transform: rotate(45deg) scale(0); border-radius: 4px; animation: d-apparait .5s 1.3s forwards; }
.d-jour { position: absolute; top: 44px; bottom: 0; width: 2px; background: var(--rouge); left: 47%; animation: d-glisse 10s ease-in-out infinite alternate; }
.d-jour::before { content: ""; position: absolute; top: -5px; left: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--rouge); }
.d-jour em { position: absolute; top: -26px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 11px; font-weight: 700; color: #fff; background: var(--rouge); padding: 2px 8px; border-radius: 999px; white-space: nowrap; }

.d-flottante { position: absolute; background: #fff; border-radius: var(--r-m); box-shadow: var(--d-ombre-carte); padding: 14px 16px; text-align: left; font-size: 13px; will-change: transform; }
.d-flottante h4 { margin: 0 0 10px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--d-gris); }
.d-carte-charge { left: -56px; bottom: 30px; width: 250px; }
.d-carte-avancement { right: -56px; top: 120px; width: 262px; }
@media (max-width: 1180px) { .d-carte-charge { left: 12px; bottom: -10px; } .d-carte-avancement { right: 12px; top: auto; bottom: -40px; } }

/* Charge empilée : ce projet / le reste / capacité */
.d-pile { display: flex; align-items: flex-end; gap: 6px; height: 72px; position: relative; }
.d-pile span { flex: 1; height: 100%; display: flex; flex-direction: column-reverse; gap: 2px; }
.d-pile i { display: block; width: 100%; border-radius: 4px; background: var(--rouge); transform-origin: bottom; }
.d-pile i.d-autre { background: #D8D8D5; }
.d-pile .d-sur i:not(.d-autre) { background: var(--rouge-fonce); }
.d-pile .d-cap { position: absolute; left: 0; right: 0; bottom: 64%; border-top: 2px dashed var(--texte); opacity: .55; }

/* Saisie d'avancement */
.d-tags { display: flex; gap: 6px; margin: 8px 0; flex-wrap: wrap; }
.d-champs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13px; }
.d-champs label b { display: inline-block; min-width: 34px; padding: 3px 8px; margin-left: 4px; border-radius: 8px; background: var(--gris-fond); text-align: right; font-variant-numeric: tabular-nums; }
.d-avance { flex: 1; min-width: 60px; height: 6px; border-radius: 3px; background: var(--gris-fond); overflow: hidden; margin-top: 8px; }
.d-champs .d-avance { margin-top: 0; }
.d-avance i { display: block; height: 100%; background: var(--rouge); border-radius: 3px; transform-origin: left; }

@media (max-width: 720px) {
  .d-haut { padding-top: 48px; }
  .d-gantt { grid-template-columns: 112px 1fr; font-size: 12px; }
  .d-gantt-noms div { padding: 0 10px; }
  .d-gantt-noms .d-avatar { display: none; }
  .d-semaines span:nth-child(even) { visibility: hidden; }
  .d-haut .d-onglets { display: none; }
  .d-flottante { position: relative; inset: auto; width: auto; margin-top: 16px; }
  .d-scene { padding-bottom: 48px; margin-top: 48px; }
}

/* ---------- Clients ---------- */
.d-clients { padding-block: 56px; }
.d-clients-titre { text-align: center; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--d-gris); margin: 0; }
.d-clients .clients-grille { background: transparent; padding: 28px 0 0; }

/* ---------- Chiffres ---------- */
.d-chiffres { background: var(--gris-fond); padding-block: 72px; }
.d-chiffres-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 20px; }
.d-chiffre { background: #fff; border-radius: var(--r-m); padding: 26px; }
.d-chiffre b { display: block; font-size: clamp(40px, 5vw, 56px); font-weight: 800; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.d-chiffre span { display: block; margin-top: 10px; color: var(--texte-doux); }

/* ---------- Sections ---------- */
.d-section { padding-block: 96px; }
.d-section.d-grise { background: var(--gris-fond); }

/* ---------- Aperçu Henry (accueil) ---------- */
.d-apercu { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 20px; margin-top: 48px; }
.d-apercu .d-fenetre { display: grid; grid-template-rows: auto 1fr; }
.d-apercu .d-vue { padding: 18px; display: grid; gap: 12px; align-content: start; }
.d-apercu-texte { margin-top: 40px; display: grid; gap: 24px; max-width: 760px; }
.d-apercu-texte p { color: var(--texte-doux); font-size: 17px; margin: 0; }

/* ---------- Vues de Henry ---------- */
.d-vue h5 { margin: 0 0 14px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--d-gris); }
.d-svg-gantt { width: 100%; height: auto; font-family: inherit; font-size: 13px; }
.d-svg-gantt text { fill: var(--texte); }
.d-svg-gantt .d-b { transform-box: fill-box; transform-origin: left; }
.d-svg-gantt .d-lien { fill: none; stroke: var(--d-gris); stroke-width: 1.5; stroke-dasharray: 160; }
.d-membres { display: grid; gap: 14px; }
.d-membre { display: grid; grid-template-columns: 130px 1fr; gap: 14px; align-items: end; }
.d-membre b { display: block; font-size: 13px; } .d-membre small { font-size: 11px; color: var(--texte-doux); }
.d-membre .d-pile { height: 70px; }
.d-taches { display: grid; gap: 12px; }
.d-tache { border-radius: var(--r-s); background: #fff; box-shadow: 0 0 0 1px var(--d-trait); padding: 12px 14px; display: grid; gap: 8px; }
.d-tache-ligne { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.d-niveaux { display: grid; gap: 10px; }
.d-niveau { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--r-s); background: var(--gris-fond); font-size: 13px; flex-wrap: wrap; }
.d-niveau .d-petit, .d-niveau .d-tag { margin-left: auto; }
.d-niveau.d-alerte { background: var(--d-voile); }
@keyframes d-appel { 50% { box-shadow: 0 0 0 4px rgba(211,51,45,.25); } }
.d-compteur { font-size: 13px; color: var(--texte-doux); margin: 0; }
.d-compteur b { color: var(--rouge); font-size: 18px; }
.d-projets { display: grid; gap: 12px; }
.d-projet { display: grid; grid-template-columns: 1fr 80px 120px 56px; gap: 14px; align-items: center; font-size: 13px; padding: 12px 14px; border-radius: var(--r-s); background: var(--gris-fond); }
.d-jauge { height: 8px; border-radius: 4px; background: #fff; overflow: hidden; }
.d-jauge i { display: block; height: 100%; background: var(--rouge); border-radius: 4px; transform-origin: left; }
.d-etat { font-size: 12px; font-weight: 700; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.d-etat::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.d-ok { color: var(--texte); } .d-veille { color: var(--rouge-moyen); }
.d-ecart { font-size: 12px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; color: var(--rouge-fonce); }
@media (max-width: 900px) { .d-projet { grid-template-columns: 1fr 60px; } .d-membre { grid-template-columns: 1fr; gap: 6px; } }

/* Animations déclenchées quand une vue devient active (.d-actif) ou visible (.d-on) */
.d-joue .d-svg-gantt .d-b { animation: d-pousse .9s cubic-bezier(.2,.7,.2,1) both; }
.d-joue .d-svg-gantt .d-lien { animation: d-lien 1.2s .6s both; }
@keyframes d-lien { from { stroke-dashoffset: 160; } to { stroke-dashoffset: 0; } }
.d-joue .d-pile i:not(.d-autre) { animation: d-monte .8s cubic-bezier(.2,.7,.2,1) both; }
.d-joue .d-avance i, .d-joue .d-jauge i { animation: d-pousse 1s .3s cubic-bezier(.2,.7,.2,1) both; }
.d-joue .d-niveau.d-alerte { animation: d-appel 1.6s .5s 2; }

/* ---------- Récit Henry (écran fixe) ---------- */
.d-recit { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; margin-top: 56px; }
.d-etape { min-height: 62vh; display: grid; align-content: center; gap: 12px; padding-block: 24px; opacity: .35; transition: opacity .4s; }
.d-etape.d-actif { opacity: 1; }
.d-etape .d-num { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--rouge); }
.d-etape h3 { font-size: 30px; font-weight: 800; line-height: 1.15; margin: 0; }
.d-etape p { color: var(--texte-doux); font-size: 17px; max-width: 42ch; margin: 0; }
.d-etape .d-vue-mobile { display: none; }
.d-colle { position: sticky; top: 120px; height: min(520px, 70vh); align-self: start; }
.d-colle .d-fenetre { height: 100%; display: grid; grid-template-rows: auto 1fr; }
.d-vues { position: relative; }
.d-vues .d-vue { position: absolute; inset: 0; padding: 22px; opacity: 0; transform: translateY(14px) scale(.985); transition: opacity .45s, transform .45s; pointer-events: none; }
.d-vues .d-vue.d-actif { opacity: 1; transform: none; pointer-events: auto; }
#d-onglets-henry span { cursor: pointer; transition: background .2s, color .2s; }
#d-onglets-henry span:not(.d-actif):hover { background: var(--gris-fond); }
@media (max-width: 900px) {
  .d-recit { grid-template-columns: 1fr; gap: 0; }
  .d-colle { display: none; }
  .d-etape { min-height: 0; opacity: 1; padding-block: 28px; }
  .d-etape .d-vue-mobile { display: block; margin-top: 12px; }
}

/* ---------- Fragments More With Project et Project Server ---------- */
.d-fragment { background: #fff; border-radius: var(--r-m); padding: 14px; box-shadow: 0 0 0 1px var(--d-trait); font-size: 13px; }
.d-ruban { display: flex; gap: 4px; background: var(--gris-fond); padding: 4px; border-radius: 999px; position: relative; }
.d-ruban span { flex: 1; text-align: center; padding: 6px 4px; border-radius: 999px; font-size: 12px; font-weight: 600; position: relative; z-index: 1; transition: color .3s; }
.d-ruban .d-curseur { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 5); border-radius: 999px; background: var(--rouge); transition: transform .5s cubic-bezier(.6,0,.2,1); z-index: 0; padding: 0; }
.d-coach { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; }
.d-bulle { background: var(--texte); color: #fff; border-radius: 14px 14px 14px 4px; padding: 8px 12px; font-size: 12px; }
.d-serveurs { display: grid; gap: 8px; }
.d-serveur { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--r-s); background: var(--gris-fond); }
.d-led { width: 8px; height: 8px; border-radius: 50%; background: var(--texte); animation: d-clignote 2.4s infinite; flex: none; }
.d-serveur:nth-child(2) .d-led { animation-delay: .8s; } .d-serveur:nth-child(3) .d-led { animation-delay: 1.6s; }
.d-serveur span:last-child { margin-left: auto; color: var(--texte-doux); font-size: 12px; }
@keyframes d-clignote { 50% { opacity: .25; } }
@media (max-width: 520px) {
  .d-fragment-ruban { overflow-x: auto; }
  .d-fragment-ruban .d-ruban { min-width: 430px; }
  .d-fragment-ruban .d-ruban span { font-size: 11px; }
}

/* ---------- Dessin au trait et frise qui se remplit ---------- */
.d-dessin { margin-top: 28px; width: 100%; max-width: 380px; }
.d-dessin path, .d-dessin line, .d-dessin rect { stroke: var(--texte); stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.d-dessin .d-accent { stroke: var(--rouge); }
.d-dessin .d-trace { stroke-dasharray: var(--l, 600); stroke-dashoffset: var(--l, 600); transition: stroke-dashoffset 1.6s ease-out; }
.d-dessin.d-on .d-trace { stroke-dashoffset: 0; }
.d-frise-vive { position: relative; }
.d-frise-vive::after { content: ""; position: absolute; left: 0; top: 4px; width: 4px; border-radius: 2px; background: var(--rouge); height: var(--d-progres, 100%); transition: height .2s linear; z-index: 0; }

@media (prefers-reduced-motion: reduce) {
  [class*="d-"], [class*="d-"]::before, [class*="d-"]::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .d-flottante { transform: none !important; }
}

.d-frise-vive { align-self: start; }
#offres .offres { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
#offres .offre { min-width: 0; }
#offres .offre > * { min-width: 0; }
/* Récit : sans script, la première vue reste visible */
.d-recit:not(.d-pret) .d-vues .d-vue:first-child { opacity: 1; transform: none; }
.entete-illustree .d-fenetre .d-vue { padding: 18px; }
.d-barre .d-titre { min-width: 0; }
.d-serveur span { min-width: 0; }
.d-serveur span:last-child { flex: none; }
.entete-illustree > div { min-width: 0; }

/* Planning du haut : passé, en cours, à venir ; ligne du jour fixe */
.d-barre-t.d-passe { background: var(--rouge-fonce); }
.d-barre-t.d-passe::after { content: "✓"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: #fff; font-size: 11px; font-weight: 800; line-height: 1; }
.d-barre-t.d-encours { background: var(--rouge); }
.d-barre-t.d-futur { background: var(--rouge-pale); }
.d-jour { left: 47%; animation: d-descend .9s .2s cubic-bezier(.2,.7,.2,1) both; transform-origin: top; }
@keyframes d-descend { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.d-legende-gantt { margin: 0; padding: 10px 16px; border-top: 1px solid var(--d-trait); gap: 8px; }
.d-cle { display: inline-block; width: 18px; height: 8px; border-radius: 4px; margin-left: 6px; }
.d-cle:first-child { margin-left: 0; }
.d-cle.d-passe { background: var(--rouge-fonce); } .d-cle.d-encours { background: var(--rouge); } .d-cle.d-futur { background: var(--rouge-pale); }

/* Plan de charge : colonnes empilées sur une même échelle (45 h), capacité 35 h, surcharge expliquée */
.d-graphe-pile { position: relative; display: flex; align-items: flex-end; gap: 8px; height: 96px; padding-top: 18px; }
.d-col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; position: relative; }
.d-col i { display: block; width: 100%; transform-origin: bottom; }
.d-col .d-proj { background: var(--rouge); border-radius: 5px 5px 0 0; }
.d-col .d-autre { background: #D8D8D5; border-radius: 0 0 5px 5px; }
.d-col .d-proj[style^="height:0.0%"] + .d-autre { border-radius: 5px; }
.d-col.d-sur .d-proj { background: var(--rouge-fonce); }
.d-depasse { position: absolute; left: 50%; transform: translateX(-50%); top: -2px; font-style: normal; font-size: 10px; font-weight: 800; color: var(--rouge-fonce); white-space: nowrap; }
.d-graphe-pile .d-cap { position: absolute; left: 0; right: 0; border-top: 2px dashed var(--texte); opacity: .55; }
.d-graphe-semaines { display: flex; gap: 8px; margin-top: 6px; }
.d-graphe-semaines span { flex: 1; text-align: center; font-size: 10px; font-weight: 700; color: var(--d-gris); }
.d-graphe-semaines .d-ajd { color: var(--rouge); }
.d-pt.d-fonce { background: var(--rouge-fonce); }
.d-joue .d-col .d-proj { animation: d-monte .8s cubic-bezier(.2,.7,.2,1) both; }
.d-membre .d-graphe-pile { height: 80px; }
.d-depasse { top: auto; }
.d-col { height: calc(100% - 0px); }
.d-graphe-pile { padding-top: 0; margin-top: 16px; }
.d-carte-charge { width: 280px; }
.d-col.d-sur .d-proj { background: var(--rouge); border-radius: 0; }
.d-col .d-exces { background: var(--rouge-fonce); border-radius: 5px 5px 0 0; }

/* Logos clients monochromes : même teinte, tailles équilibrées */
.client-case img { filter: none; opacity: .7; height: auto; width: auto; max-width: 150px; max-height: 36px; }
.client-case img.logo-carre { max-height: 56px; max-width: 120px; }
.client-case:hover img { opacity: 1; }

/* Planning : à droite de la ligne du jour, tout est gris ; la part réalisée se remplit de gauche à droite */
.d-barre-t.d-futur { background: #D8D8D5; }
.d-barre-t.d-encours { background: #D8D8D5; overflow: hidden; }
.d-barre-t .d-realise { position: absolute; inset: 0 auto 0 0; background: var(--rouge); border-radius: 10px 0 0 10px; transform-origin: left; transform: scaleX(0); animation: d-pousse 1.4s 1.2s cubic-bezier(.2,.7,.2,1) forwards; }
.d-cle.d-futur { background: #D8D8D5; }
@media (prefers-reduced-motion: reduce) { .d-barre-t .d-realise { transform: none; } }
.d-haut .d-jalon { background: #BDBDBA; }
.d-cle.d-encours { background: linear-gradient(90deg, var(--rouge) 60%, #D8D8D5 60%); }

/* Planning en SVG (page Henry) : mêmes règles que le haut de l'accueil */
.d-svg-gantt .d-svg-ajd { fill: #fff; font-size: 11px; font-weight: 700; }
.d-svg-gantt .d-svg-coche { fill: #fff; font-size: 11px; font-weight: 800; }
/* Planning dans l'écran fixe du récit */
.d-vue-gantt { padding: 18px 0 0 !important; }
.d-vue-gantt h5 { padding: 0 18px; }
.d-vues .d-gantt { grid-template-columns: 150px 1fr; font-size: 12px; }
.d-vues .d-gantt-noms div { padding: 0 10px; }
.d-vues .d-gantt-noms, .d-vues .d-gantt-temps { grid-auto-rows: 40px; }
.d-vues .d-jour { top: 40px; }
.d-vues .d-barre-t { top: 11px; height: 18px; }
.d-vues .d-jalon { top: 11px; }
.d-jalon { background: #BDBDBA; }

/* More With Project : tableau tâches / ressources ; le coach signale les tâches sans ressource */
.d-scene-etroite { max-width: 760px; }
.d-mwp-table { display: grid; font-size: 13px; }
.d-mwp-ligne { display: grid; grid-template-columns: 150px 90px 1fr; align-items: center; min-height: 38px; border-bottom: 1px solid var(--gris-fond); padding: 0 6px; border-radius: 8px; }
.d-mwp-ligne.d-entete-col { min-height: 28px; }
.d-mwp-ligne.d-manque { background: var(--d-voile); }
.d-sans { color: var(--rouge-fonce); font-weight: 800; }
.d-piste { position: relative; height: 38px; }
.d-piste .d-barre-t { top: 11px; height: 16px; }
@media (max-width: 520px) { .d-mwp-ligne { grid-template-columns: 110px 60px 1fr; font-size: 12px; } }
.d-scene-dessin { max-width: 520px; padding-bottom: 56px; }
.d-scene-dessin .d-dessin { max-width: none; margin: 0 auto; display: block; }

/* Notre histoire et Contact */
.d-fenetre-illus { padding: 24px; }
.d-scene-bulles { max-width: 420px; padding-bottom: 56px; }
.frise-histoire.d-frise-vive::after { top: 0; }
@media (min-width: 768px) { .frise-histoire.d-frise-vive::after { left: 226.5px; } }
/* Chemin de PM SIDE : le repère avance une seule fois de 2009 jusqu'à Henry, sans revenir en arrière */
.pms-ill .travel { animation: d-chemin 3.2s cubic-bezier(.3,.6,.2,1) .4s 1 both; }
@keyframes d-chemin { from { transform: translate(0, 0); } to { transform: translate(320px, -10px); } }
.d-gantt > *, .d-etape, .d-etape > * { min-width: 0; }
.d-semaines span { overflow: hidden; }
.d-fenetre { max-width: 100%; }

/* ---------- Écrans propres aux pages (différents de l'accueil) ---------- */
/* Tableau de bord */
.d-tdb { padding: 20px; display: grid; gap: 14px; text-align: left; }
.d-tdb-semaine { margin: 0; font-weight: 700; font-size: 14px; }
.d-tdb-haut { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.d-anneau { width: 104px; height: 104px; border-radius: 50%; background: conic-gradient(var(--rouge) calc(var(--p) * 1%), var(--gris-fond) 0); display: grid; place-content: center; text-align: center; position: relative; flex: none; }
.d-anneau::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: #fff; }
.d-anneau b, .d-anneau small { position: relative; display: block; }
.d-anneau b { font-size: 22px; font-weight: 800; line-height: 1; }
.d-anneau small { font-size: 11px; color: var(--texte-doux); }
.d-jours { display: flex; gap: 10px; flex-wrap: wrap; }
.d-jour-b { width: 64px; height: 64px; border-radius: 50%; display: grid; place-content: center; text-align: center; font-size: 11px; color: var(--texte-doux); position: relative; }
.d-jour-b b { font-size: 14px; color: var(--texte); }
.d-jour-b em { position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 10px; font-weight: 700; color: var(--rouge); white-space: nowrap; }
.d-jour-b.d-passe { background: var(--d-voile); }
.d-jour-b.d-ajd { background: #fff; box-shadow: 0 0 0 2px var(--rouge); }
.d-jour-b.d-futur { background: var(--gris-fond); }
.d-tdb-titre { margin: 8px 0 0; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--d-gris); }
/* Plan comparé */
.d-svg-gantt .d-svg-decale { fill: var(--rouge-fonce); font-size: 11px; font-weight: 800; }
.d-cle.d-nomme { background: transparent; border: 1.5px dashed #8F908E; height: 10px; }
/* Charge de l'équipe en tableau */
.d-grille-charge { display: grid; grid-template-columns: 110px repeat(6, 1fr); gap: 6px; align-items: center; font-size: 12px; }
.d-grille-charge .d-ajd { color: var(--rouge); }
.d-grille-charge .d-nom { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-case { text-align: center; padding: 10px 0; border-radius: 8px; font-weight: 700; font-variant-numeric: tabular-nums; background: rgba(211, 51, 45, calc(var(--n) * .45)); }
.d-case.d-sur { background: var(--rouge-fonce); color: #fff; }
.d-cle.d-surcle { background: var(--rouge-fonce); }
/* Saisie de la semaine */
.d-saisies { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.d-saisie { border-radius: 10px; padding: 8px 4px; text-align: center; font-size: 11px; color: var(--texte-doux); background: var(--gris-fond); display: grid; gap: 2px; }
.d-saisie b { font-size: 14px; color: var(--texte); }
.d-saisie.d-passe { background: var(--d-voile); }
.d-saisie.d-ajd { background: #fff; box-shadow: 0 0 0 2px var(--rouge); }
.d-saisie.d-futur b { color: var(--d-gris); }
/* Déclaration à valider */
.d-file { display: flex; gap: 8px; flex-wrap: wrap; font-size: 12px; margin-bottom: 12px; }
.d-file span { background: var(--gris-fond); border-radius: 999px; padding: 4px 12px; }
.d-file b { color: var(--rouge); }
.d-declaration { border-radius: var(--r-s); box-shadow: 0 0 0 1px var(--d-trait); padding: 14px; display: grid; gap: 10px; font-size: 13px; }
.d-rouge { color: var(--rouge-fonce); }
.d-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.d-btn-f, .d-btn-c { font-size: 12px; font-weight: 700; padding: 6px 14px; border-radius: 999px; }
.d-btn-f { background: var(--rouge); color: #fff; }
.d-btn-c { box-shadow: inset 0 0 0 1.5px var(--texte); }
/* Coach virtuel (More With Project) */
.d-coach-panneau { border-radius: var(--r-s); background: var(--gris-fond); padding: 12px 14px; display: grid; gap: 8px; font-size: 13px; text-align: left; }
.d-coach-panneau .d-entete-col { margin: 0; }
.d-check { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.d-check > :last-child { margin-left: auto; }
.d-ok-rond { width: 20px; height: 20px; border-radius: 50%; background: var(--texte); color: #fff; display: inline-grid; place-items: center; font-size: 11px; font-weight: 800; flex: none; }
.d-check.d-ko .d-ok-rond { background: var(--rouge); }
/* Agenda (Contact) */
.d-rdv { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.d-rdv-col { display: grid; gap: 6px; align-content: start; text-align: center; }
.d-rdv-col .d-entete-col { margin: 0 0 4px; }
.d-creneau { font-size: 12px; font-weight: 600; padding: 7px 0; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--d-trait); }
.d-creneau.d-choisi { background: var(--rouge); color: #fff; box-shadow: none; }
.d-rdv-choix { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; text-align: left; }
@media (max-width: 520px) { .d-grille-charge { grid-template-columns: 70px repeat(6, 1fr); font-size: 10px; } .d-rdv { gap: 4px; } .d-creneau { font-size: 10px; } .d-jour-b { width: 52px; height: 52px; } }
.d-grille-charge { grid-template-columns: 100px repeat(6, minmax(0, 1fr)); }
.d-case { font-size: 11px; padding: 9px 0; }
.d-barre .d-onglets { min-width: 0; overflow: hidden; }
.d-colle .d-fenetre { overflow: hidden; }
.d-colle .d-fenetre { grid-template-columns: minmax(0, 1fr); }
.d-vues { min-width: 0; }
.d-dessin circle { stroke: var(--texte); stroke-width: 2.2; fill: #fff; fill-opacity: .6; }
.d-tdb-bonjour { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.1; }
.d-tdb-semaine { color: var(--texte-doux); font-weight: 600; }

/* Récit Henry : étapes resserrées, écran fixe ajusté à son contenu */
.d-etape { min-height: 42vh; padding-block: 16px; }
.d-colle { top: 140px; height: min(400px, 62vh); }
.d-recit { margin-top: 40px; }

/* Page Henry : blocs « D'où vient Henry », « À qui », « Comment » en cartes */
.d-blocs-henry { display: grid; gap: 72px; }
.d-bloc { display: grid; gap: 24px; }
.d-bloc-titre { margin: 0; font-size: clamp(28px, 3.6vw, 40px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.12; }
.d-cartes-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 20px; }
.d-carte-texte { background: #fff; border-radius: var(--r-m); padding: 24px; display: grid; gap: 12px; align-content: start; justify-items: start; }
.d-carte-texte p { margin: 0; color: var(--texte-doux); font-size: 15px; line-height: 1.65; }
.d-carte-texte h3 { margin: 0; font-size: 18px; font-weight: 700; }
.d-icone { width: 40px; height: 40px; border-radius: 50%; background: var(--d-voile); color: var(--rouge); display: grid; place-items: center; }
.d-public { gap: 18px; justify-items: stretch; }
.d-public-ligne { display: grid; grid-template-columns: 140px 1fr; gap: 16px; align-items: start; }
.d-public-libelle { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--d-gris); padding-top: 7px; }
.d-puces { display: flex; flex-wrap: wrap; gap: 8px; }
.d-puce { font-size: 14px; font-weight: 600; padding: 6px 14px; border-radius: 999px; background: var(--gris-fond); }
.d-public-note { border-top: 1px solid var(--d-trait); padding-top: 16px; }
@media (max-width: 640px) { .d-public-ligne { grid-template-columns: 1fr; gap: 8px; } }

/* Haut de page en deux colonnes (More With Project) : texte à gauche, fenêtre à droite */
@media (min-width: 980px) {
  .d-haut-cote { text-align: left; padding-block: 72px 0; }
  .d-cote { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 56px; align-items: center; }
  .d-haut-cote h1 { font-size: clamp(40px, 4.4vw, 60px); margin-left: 0; }
  .d-haut-cote .d-intro { margin-left: 0; }
  .d-haut-cote .boutons { justify-content: flex-start; }
  .d-scene-cote { margin: 0; padding-block: 0 72px; }
}
@media (min-width: 980px) {
  .d-cote { padding-bottom: 88px; }
  .d-scene-cote { padding: 0; }
  .d-haut-cote .boutons .btn { padding-inline: 20px; }
}
@media (min-width: 980px) { .d-haut-cote .boutons { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; } .d-haut-cote .boutons .btn { width: auto; } }
@media (min-width: 980px) { .d-cote { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; } }

/* Cartes de fonctionnalités : survol avec un trait rouge en dessous */
.fonctions .fonction { position: relative; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease, background .25s ease; }
.fonctions .fonction::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--rouge); transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.fonctions .fonction:hover { transform: translateY(-4px); background: #fff; box-shadow: 0 18px 40px -22px rgba(41, 42, 41, .35), 0 0 0 1px var(--d-trait); }
.fonctions .fonction:hover::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .fonctions .fonction:hover { transform: none; } }

/* Outil gratuit .mpp */
.d-mpp { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.d-mpp-fichier { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; padding: 8px 12px; border-radius: var(--r-s); background: var(--gris-fond); white-space: nowrap; }
.d-mpp-fichier i, .d-mpp-fichier svg { color: var(--rouge); }
.d-mpp-fleche { font-size: 20px; font-weight: 800; color: var(--rouge); }
.d-mpp-gantt { position: relative; flex: 1; min-width: 140px; height: 52px; border-radius: var(--r-s); background: #fff; box-shadow: 0 0 0 1px var(--d-trait); }
.d-mpp-gantt i { position: absolute; height: 8px; border-radius: 4px; }
.d-mpp-gantt i:nth-child(1) { top: 10px; } .d-mpp-gantt i:nth-child(2) { top: 22px; } .d-mpp-gantt i:nth-child(3) { top: 34px; }
.d-mpp-gantt b { position: absolute; top: 31px; width: 10px; height: 10px; background: var(--texte); border-radius: 2px; transform: rotate(45deg); }
.d-bande-mpp { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; align-items: center; background: #fff; border-radius: var(--r-l); padding: 32px; margin-bottom: 32px; box-shadow: 0 0 0 1px var(--d-trait); }
.d-bande-mpp-texte { display: grid; gap: 12px; justify-items: start; }
.d-bande-mpp h3 { margin: 0; font-size: 24px; font-weight: 800; }
.d-bande-mpp p { margin: 0; color: var(--texte-doux); }
@media (max-width: 800px) { .d-bande-mpp { grid-template-columns: 1fr; padding: 24px; } }
.d-svg-gantt .d-svg-sem { fill: var(--d-gris); font-size: 10px; font-weight: 700; letter-spacing: .06em; }
.d-cle.d-nomme { height: 6px; border-radius: 3px; }

/* Haut de page inversé (Expertise Project Server) : illustration à gauche, texte à droite */
@media (min-width: 980px) {
  .d-haut-inverse .d-cote { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 64px; }
  .d-haut-inverse .d-scene-cote { order: -1; }
  .d-haut-inverse h1 { font-size: clamp(38px, 4vw, 54px); }
}

/* Illustration : demande de support suivie de bout en bout */
.d-sup { padding: 18px 20px 20px; display: grid; gap: 16px; }
.d-sup-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.d-sup-tete h5 { margin: 0; font-size: 15px; font-weight: 700; color: var(--texte); }
.d-sup-etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.d-sup-etapes li { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; padding-bottom: 12px; }
.d-sup-etapes li:last-child { padding-bottom: 0; }
.d-sup-etapes li::before { content: ""; position: absolute; left: 10px; top: 22px; bottom: 0; border-left: 2px solid var(--d-trait); }
.d-sup-etapes li.d-fait::before { border-left-color: var(--rouge-fonce); }
.d-sup-etapes li:last-child::before { display: none; }
.d-sup-pt { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; background: #D8D8D5; position: relative; z-index: 1; }
.d-fait .d-sup-pt { background: var(--rouge-fonce); }
.d-actuel .d-sup-pt { background: #fff; box-shadow: inset 0 0 0 6px var(--rouge); }
.d-sup-etapes b { font-size: 14px; color: var(--texte); margin-right: 8px; }
.d-sup-date { font-size: 12px; color: var(--texte-doux); white-space: nowrap; }
.d-sup-etapes p { margin: 2px 0 0; font-size: 13px; color: var(--texte-doux); }
.d-avenir b, .d-avenir .d-sup-date, .d-avenir p { color: var(--d-gris); }
.d-sup-mesure { border-top: 1px solid var(--d-trait); padding-top: 14px; display: grid; gap: 8px; }
.d-sup-ligne { display: grid; grid-template-columns: 52px minmax(0, 1fr) 36px; gap: 10px; align-items: center; font-size: 12px; color: var(--texte-doux); }
.d-sup-ligne i { display: block; height: 10px; width: var(--l); border-radius: 5px; transform-origin: left center; }
.d-sup-ligne b { font-size: 13px; color: var(--texte); text-align: right; }
.d-sup-avant { background: #D8D8D5; }
.d-sup-apres { background: var(--rouge); }
@keyframes d-sup-entre { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes d-sup-pouls { 0%, 100% { box-shadow: inset 0 0 0 6px var(--rouge), 0 0 0 0 rgba(211, 51, 45, .35); } 50% { box-shadow: inset 0 0 0 6px var(--rouge), 0 0 0 7px rgba(211, 51, 45, 0); } }
.d-joue .d-sup-etapes li { animation: d-sup-entre .5s cubic-bezier(.2,.7,.2,1) both; }
.d-joue .d-sup-etapes li:nth-child(2) { animation-delay: .25s; }
.d-joue .d-sup-etapes li:nth-child(3) { animation-delay: .5s; }
.d-joue .d-sup-etapes li:nth-child(4) { animation-delay: .75s; }
.d-joue .d-sup-etapes li:nth-child(5) { animation-delay: 1s; }
.d-joue .d-actuel .d-sup-pt { animation: d-sup-pouls 1.8s 1.3s ease-in-out 3; }
.d-joue .d-sup-avant { animation: d-pousse .9s 1.2s cubic-bezier(.2,.7,.2,1) both; }
.d-joue .d-sup-apres { animation: d-pousse .6s 1.8s cubic-bezier(.2,.7,.2,1) both; }
@media (prefers-reduced-motion: reduce) { .d-joue .d-sup-etapes li, .d-joue .d-actuel .d-sup-pt, .d-joue .d-sup-ligne i { animation: none; } }

/* ---------- Pourquoi PM SIDE : page en chapitres (constat, puis réponse) ---------- */
.d-haut-pq { text-align: left; padding-bottom: 72px; }
.d-pq-tete { display: grid; gap: 32px; align-items: center; }
.d-haut-pq h1 { margin-left: 0; max-width: 19ch; }
.d-haut-pq .d-intro { margin-left: 0; }
.d-pq-dessin { width: 100%; min-width: 0; }
@media (min-width: 980px) {
  .d-pq-tete { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; }
  .d-haut-pq h1 { font-size: clamp(40px, 4vw, 56px); }
}
.d-pq-sommaire { position: relative; margin-top: 16px; display: grid; gap: 16px; }
.d-pq-sommaire-titre { display: block; margin-top: 56px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--d-gris); }
.d-pq-chap { position: relative; display: grid; gap: 6px; align-content: start; padding: 22px 22px 20px; border-radius: var(--r-m); background: #fff; box-shadow: var(--d-ombre-carte); color: var(--texte); text-decoration: none; transition: transform .25s ease, box-shadow .25s ease; }
.d-pq-chap::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; border-radius: 0 0 var(--r-m) var(--r-m); background: var(--rouge); transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.d-pq-chap:hover { transform: translateY(-4px); }
.d-pq-chap:hover::after { transform: scaleX(1); }
.d-pq-num { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--rouge); color: #fff; font-size: 13px; font-weight: 800; position: relative; z-index: 1; margin-bottom: 6px; }
.d-pq-date { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--rouge); }
.d-pq-chap b { font-size: 17px; line-height: 1.35; }
.d-pq-lire { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--texte-doux); }
.d-pq-chap:hover .d-pq-lire { color: var(--rouge); }
@media (min-width: 860px) {
  .d-pq-sommaire { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  /* le fil qui relie les trois chapitres, à hauteur des numéros */
  .d-pq-sommaire::before { content: ""; position: absolute; left: 40px; right: 40px; top: 39px; border-top: 2px dashed var(--rouge-pale); }
}

.d-pq-chapitre { scroll-margin-top: 80px; padding-block: 88px; }
.d-pq-grille { display: grid; gap: 32px; }
.d-pq-cote { display: grid; gap: 16px; justify-items: start; align-content: start; }
.d-pq-cote h2 { margin: 0; font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
.d-pq-grand { font-size: clamp(72px, 9vw, 128px); font-weight: 800; line-height: .9; letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 2px var(--rouge-pale); }
.d-pq-cote .boutons { justify-content: flex-start; margin-top: 8px; }
@media (min-width: 980px) {
  .d-pq-grille { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 72px; align-items: start; }
  .d-pq-cote { position: sticky; top: 112px; }
  .d-pq-cote .boutons { display: flex; flex-direction: row; flex-wrap: wrap; gap: 12px; }
  .d-pq-cote .boutons .btn { width: auto; padding-inline: 20px; }
}
.d-pq-recit { display: grid; justify-items: stretch; }
.d-pq-constat, .d-pq-reponse { border-radius: var(--r-m); padding: 26px 28px; display: grid; gap: 12px; }
.d-pq-constat { background: var(--gris-fond); }
.section-grise .d-pq-constat { background: #fff; }
.d-pq-reponse { background: #fff; box-shadow: var(--d-ombre-carte); border-top: 4px solid var(--rouge); }
.d-pq-constat p, .d-pq-reponse p { margin: 0; font-size: 17px; line-height: 1.65; }
.d-pq-constat p { color: var(--texte-doux); }
.d-pq-reponse p { color: var(--texte); }
.d-pq-label { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--d-gris); }
.d-pq-reponse .d-pq-label { color: var(--rouge); }
.d-pq-fleche { display: grid; place-items: center; height: 56px; }
.d-pq-fleche svg { width: 24px; height: 48px; fill: none; stroke: var(--rouge); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
@keyframes d-pq-entre { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.d-pq-reponse.d-joue { animation: d-pq-entre .7s cubic-bezier(.2,.7,.2,1) both; }
.d-pq-pionniers { margin-top: 72px; }
.d-pq-duo { display: grid; gap: 20px; margin-top: 40px; }
@media (min-width: 760px) { .d-pq-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .d-pq-reponse.d-joue { animation: none; } }

/* Illustration Pourquoi PM SIDE : chaque constat relié au logiciel créé pour y répondre */
.d-pqi-corps { padding: 16px 18px 18px; display: grid; gap: 10px; }
.d-pqi-tete, .d-pqi-lignes li { display: grid; grid-template-columns: minmax(0, 1.12fr) 40px minmax(0, 1fr); align-items: center; }
.d-pqi-tete span { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--d-gris); }
.d-pqi-tete span:last-child { grid-column: 3; color: var(--rouge); }
.d-pqi-lignes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.d-pqi-constat { display: flex; align-items: flex-start; gap: 8px; background: var(--gris-fond); border-radius: 10px; padding: 10px 12px; font-size: 13px; line-height: 1.4; color: var(--texte-doux); min-height: 58px; align-content: center; }
.d-pqi-oeil { flex: none; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--d-gris); }
.d-pqi-lien { position: relative; height: 2px; margin: 0 8px 0 4px; background: var(--rouge); transform-origin: left center; }
.d-pqi-lien::after { content: ""; position: absolute; right: -2px; top: -4px; border: 5px solid transparent; border-left: 7px solid var(--rouge); border-right: 0; }
.d-pqi-reponse { display: grid; gap: 2px; background: #fff; border: 1px solid var(--d-trait); border-left: 4px solid var(--rouge-fonce); border-radius: 10px; padding: 9px 12px; min-height: 58px; align-content: center; }
.d-pqi-reponse b { font-size: 14px; color: var(--texte); line-height: 1.25; }
.d-pqi-reponse small { font-size: 11.5px; color: var(--texte-doux); }
.d-pqi-lignes li:last-child .d-pqi-reponse { background: var(--rouge); border-color: var(--rouge); }
.d-pqi-lignes li:last-child .d-pqi-reponse b, .d-pqi-lignes li:last-child .d-pqi-reponse small { color: #fff; }
@media (max-width: 560px) {
  .d-pqi-tete { display: none; }
  .d-pqi-lignes { gap: 16px; }
  .d-pqi-lignes li { grid-template-columns: minmax(0, 1fr); }
  .d-pqi-constat, .d-pqi-reponse { min-height: 0; }
  .d-pqi-lien { width: 2px; height: 14px; margin: 0 0 0 22px; transform-origin: center top; }
  .d-pqi-lien::after { right: auto; left: -4px; top: auto; bottom: -3px; border: 5px solid transparent; border-top: 7px solid var(--rouge); border-bottom: 0; }
}
@keyframes d-pqi-entre { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes d-pqi-trait { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes d-pqi-trait-v { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.d-joue .d-pqi-constat { animation: d-pqi-entre .5s cubic-bezier(.2,.7,.2,1) both; }
.d-joue .d-pqi-lien { animation: d-pqi-trait .45s ease-out both; }
.d-joue .d-pqi-reponse { animation: d-pqi-entre .5s cubic-bezier(.2,.7,.2,1) both; }
@media (max-width: 560px) { .d-joue .d-pqi-lien { animation-name: d-pqi-trait-v; } }
.d-joue .d-pqi-lignes li:nth-child(1) .d-pqi-constat { animation-delay: .2s; }
.d-joue .d-pqi-lignes li:nth-child(1) .d-pqi-lien { animation-delay: .6s; }
.d-joue .d-pqi-lignes li:nth-child(1) .d-pqi-reponse { animation-delay: .95s; }
.d-joue .d-pqi-lignes li:nth-child(2) .d-pqi-constat { animation-delay: 1.3s; }
.d-joue .d-pqi-lignes li:nth-child(2) .d-pqi-lien { animation-delay: 1.7s; }
.d-joue .d-pqi-lignes li:nth-child(2) .d-pqi-reponse { animation-delay: 2.05s; }
.d-joue .d-pqi-lignes li:nth-child(3) .d-pqi-constat { animation-delay: 2.4s; }
.d-joue .d-pqi-lignes li:nth-child(3) .d-pqi-lien { animation-delay: 2.8s; }
.d-joue .d-pqi-lignes li:nth-child(3) .d-pqi-reponse { animation-delay: 3.15s; }
@media (prefers-reduced-motion: reduce) { .d-joue .d-pqi-constat, .d-joue .d-pqi-lien, .d-joue .d-pqi-reponse { animation: none; } }

/* ---------- Notre histoire : titre et intro côte à côte, photo des fondateurs ---------- */
.d-haut-histoire { text-align: left; padding-bottom: 72px; }
.d-hi-tete { display: grid; gap: 16px; align-items: end; }
.d-haut-histoire h1 { margin: 16px 0 0; }
.d-haut-histoire .d-intro { margin: 0; }
@media (min-width: 980px) {
  .d-hi-tete { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 64px; }
  .d-haut-histoire .d-intro { padding-bottom: 10px; }
}
.d-hi-photo { position: relative; margin: 48px 0 0; border-radius: var(--r-l); overflow: hidden; box-shadow: var(--d-ombre); background: var(--gris-fond); }
.d-hi-photo img { display: block; width: 100%; height: auto; aspect-ratio: 1800 / 1201; object-fit: cover; }
@media (min-width: 980px) { .d-hi-photo img { aspect-ratio: 16 / 8; object-position: 50% 35%; } }
.d-hi-photo figcaption { position: absolute; left: 20px; bottom: 20px; display: grid; gap: 2px; background: #fff; border-radius: var(--r-m); padding: 12px 16px; box-shadow: var(--d-ombre-carte); border-left: 4px solid var(--rouge); max-width: calc(100% - 40px); }
.d-hi-photo figcaption b { font-size: 15px; color: var(--texte); }
.d-hi-photo figcaption span { font-size: 13px; color: var(--texte-doux); }
@media (max-width: 560px) {
  .d-hi-photo figcaption { position: static; border-radius: 0; box-shadow: none; max-width: none; border-left: 0; border-top: 4px solid var(--rouge); }
}
.d-hi-duo { display: grid; gap: 20px; margin-top: 40px; }
@media (min-width: 760px) { .d-hi-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.d-hi-personne { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; align-items: start; padding: 26px; border-radius: var(--r-m); background: var(--gris-fond); }
.d-hi-initiales { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--rouge); color: #fff; font-weight: 800; font-size: 17px; letter-spacing: .02em; }
.d-hi-personne h3 { margin: 0; font-size: 20px; font-weight: 800; }
.d-hi-role { display: inline-block; margin: 6px 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--rouge); }
.d-hi-personne p { margin: 0; color: var(--texte-doux); font-size: 16px; line-height: 1.65; }
.d-hi-etapes { display: grid; gap: 32px; }
@media (min-width: 980px) { .d-hi-etapes { grid-template-columns: 220px minmax(0, 1fr); gap: 48px; } }