/* Composants des pages accueil, dirigeants et entreprises.
   À charger après v2.css et accueil.css. */

/* Couleurs des personnages et contrastes des actions. */
:root { --beat: var(--gray-600); }
.final .pill { background: var(--white); color: var(--ink); }
.final .pill:hover { background: var(--gray-100); }
.short-play { background: var(--ink); color: var(--white); }
.short-play:hover { background: var(--gray-800); }
.split .human h3, .versus .human h3 { color: var(--white); }

/* Les personnages : formes rondes, deux yeux, une couleur chacun. */
.blob { position: relative; display: block; width: var(--t, 64px); height: var(--t, 64px); background: var(--c, var(--ink)); border-radius: 50%; }
.blob::before, .blob::after { content: ""; position: absolute; top: 44%; width: 14%; height: 21%; border-radius: 50%; background: #fff; transform: translate(-50%, -50%); transform-origin: center; }
.blob::before { left: 35%; } .blob::after { left: 65%; }
.blob-carre { border-radius: 34%; } .blob-oeuf { border-radius: 50% 50% 46% 46% / 60% 60% 40% 40%; }
.blob-goutte { border-radius: 50% 12% 50% 50%; } .blob-galet { border-radius: 60% 40% 55% 45% / 50% 55% 45% 50%; }
.blob-hexa { border-radius: 0; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.blob-bouclier { border-radius: 24% 24% 50% 50% / 18% 18% 66% 66%; } .blob-feuille { border-radius: 78% 12% 78% 12%; }
/* Le majordome, c'est l'étoile de monExpansion : même dessin, même dégradé, et deux yeux. */
.blob.blob-etoile, .forme.forme-etoile { border-radius: 0; background: linear-gradient(135deg, #f2553e, #f7964a); -webkit-mask: url("/img/etoile-pleine-petit.svg") center / contain no-repeat; mask: url("/img/etoile-pleine-petit.svg") center / contain no-repeat; }
/* Ses branches la font paraître plus petite : plus grande que les autres (+10 % demandés par Julien le 27/09), c'est elle qui mène l'équipe. */
.blob.blob-etoile, .forme.forme-etoile { width: calc(var(--t, 64px) * 1.375); height: calc(var(--t, 64px) * 1.375); }
.equipe-libre .forme.forme-etoile { width: calc(var(--t, 64px) * 1.485); height: calc(var(--t, 64px) * 1.485); }
.blob.blob-etoile::before, .blob.blob-etoile::after, .forme.forme-etoile::before, .forme.forme-etoile::after { top: 52%; width: 10%; height: 14.6%; }
/* L'étoile penche d'environ 10° vers la droite : les yeux suivent (l'œil droit plus bas, chaque œil incliné),
   centrés sur le corps de l'étoile d'après la référence de Julien (27/09). */
.blob.blob-etoile::before, .forme.forme-etoile::before { left: 42.3%; top: 49.6%; }
.blob.blob-etoile::after, .forme.forme-etoile::after { left: 59.5%; top: 53%; }
.blob.blob-etoile::before, .blob.blob-etoile::after, .forme.forme-etoile::before, .forme.forme-etoile::after { transform: translate(-50%, -50%) rotate(10deg); }
@media (prefers-reduced-motion: no-preference) {
  .blob.blob-etoile::before, .blob.blob-etoile::after, .forme.forme-etoile::before, .forme.forme-etoile::after { animation-name: cligne-etoile; }
}
@keyframes cligne-etoile { 0%, 92%, 100% { transform: translate(-50%, -50%) rotate(10deg) scaleY(1); } 95% { transform: translate(-50%, -50%) rotate(10deg) scaleY(.1); } }
.blob-nuit::before, .blob-nuit::after { height: 8%; width: 18%; border-radius: 999px; }
.blob-sm { --t: 40px; }
.card > .blob-sm { margin-bottom: 18px; }

/* Vivants et discrets : ils flottent à peine et clignent des yeux. */
@media (prefers-reduced-motion: no-preference) {
  .blob::before, .blob::after, .forme::before, .forme::after { animation: cligne 5s infinite; }
  .equipe-libre .forme { animation: flotte-r 6.5s ease-in-out infinite; }
  .equipe-libre .perso:nth-child(2n) .forme { animation-duration: 8s; animation-delay: -2.5s; }
  .equipe-libre .perso:nth-child(3n) .forme { animation-duration: 7.2s; animation-delay: -4s; }
  .equipe-libre .perso:nth-child(2n) .forme::before, .equipe-libre .perso:nth-child(2n) .forme::after { animation-delay: 1.7s; }
  .equipe-libre .perso:nth-child(3n) .forme::before, .equipe-libre .perso:nth-child(3n) .forme::after { animation-delay: 3.1s; }
}
@keyframes flotte-r { 0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-6px) rotate(var(--r, 0deg)); } }
@keyframes cligne { 0%, 92%, 100% { transform: translate(-50%, -50%) scaleY(1); } 95% { transform: translate(-50%, -50%) scaleY(.1); } }

/* Portes de l'accueil : texte centré, puis l'image 16:9 sur toute la largeur. */
.porte .head > p:not(.eyebrow) { max-width: 34em; }
.porte .head .link { margin-top: 22px; }
.porte-image { margin-top: clamp(40px, 5vw, 64px); }

/* Cadres des images : fond et formats. */
.concept { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r-panel); background: var(--wall); aspect-ratio: 16 / 9; }
.concept.concept-4x5 { aspect-ratio: 4 / 5; border-radius: var(--r-card); }
.concept > .lumiere { z-index: 0; }
.concept > img { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; }
.concept > figcaption { position: absolute; left: 14px; top: 14px; z-index: 3; padding: 7px 12px; border-radius: 999px; background: var(--paper); color: var(--ink-2); font-size: 12px; font-weight: 500; }

/* Témoignage : vidéo verticale et citation. */
.preuve-grid { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; justify-content: center; margin-top: clamp(48px, 5vw, 72px); }
.short { margin: 0; }
.short-frame { position: relative; overflow: hidden; aspect-ratio: 9 / 16; border-radius: var(--r-card); background: var(--gray-800); }
.short-frame img, .short-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.short-play { position: absolute; left: 50%; top: 50%; z-index: 2; display: grid; place-items: center; width: 68px; height: 68px; padding: 0; border: 0; border-radius: 999px; background: var(--orange-vif); color: var(--ink); cursor: pointer; transform: translate(-50%, -50%); }
.short-play .play-symbol { border-width: 9px 0 9px 15px; margin-left: 4px; }
.short-frame .short-play { left: auto; top: auto; right: 16px; bottom: 16px; transform: none; }
.short-play:hover { background: var(--white); }
.short figcaption { margin-top: 16px; font-size: 15px; color: var(--ink-2); }
.short .short-title { display: block; margin-bottom: 4px; font-weight: 500; color: var(--ink); }
.preuve-grid .quote { margin: 0; text-align: left; }
.preuve-grid .quote blockquote p { font-size: clamp(24px, 2.4vw, 34px); }
.preuve-note { max-width: 62ch; margin: clamp(40px, 5vw, 64px) auto 0; text-align: center; font-size: 15px; color: var(--ink-2); }

/* Tutos : trois vignettes 16:9, titre en dessous. */
.tutos-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(48px, 5vw, 72px); }
.tuto { display: block; color: inherit; text-decoration: none; }
.tuto-frame { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--r-card); background: var(--gray-100); }
.tuto-frame img { width: 100%; height: 100%; object-fit: cover; }
.tuto-frame .short-play { width: 52px; height: 52px; }
.tuto-frame .short-play .play-symbol { border-width: 7px 0 7px 12px; margin-left: 3px; }
.tuto h3 { margin-top: 16px; font-size: 18px; font-weight: 500; letter-spacing: -.01em; }
.tuto p { margin-top: 4px; font-size: 14px; color: var(--ink-2); }
.tutos-link { display: flex; justify-content: center; margin-top: 40px; }

/* Ce qui rassure (Dirigeants) : trois colonnes courtes. */
.rassure-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 32px; margin-top: clamp(48px, 5vw, 72px); }
.rassure-grid.rassure-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .rassure-grid.rassure-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rassure-grid > div { padding-top: 22px; border-top: 1px solid var(--ink); }
.rassure-grid h3 { font-size: 24px; }
.rassure-grid p { margin-top: 12px; color: var(--ink-2); }
.rassure-grid .link { margin-top: 10px; }

/* Couverture : titre centré, bouton et image 16:9. */
.hero-apple { padding-top: clamp(40px, 5vw, 72px); }
.hero-apple .head .eyebrow { margin-bottom: 22px; }
.hero-apple h1 { font-size: clamp(40px, 5.2vw, 78px); line-height: 1; letter-spacing: -.038em; }
.hero-apple h1 .beat { display: block; }
.hero-apple .head > p:not(.eyebrow) { max-width: 34em; }
.hero-apple .actions { justify-content: center; align-items: center; margin-top: 30px; }
.hero-apple .actions .link { padding-inline: 8px; }
.hero-apple .reassurance { margin-top: 16px; text-align: center; font-size: 13px; color: var(--ink-2); }
.hero-apple .concept { margin-top: clamp(40px, 5vw, 64px); }

/* Tes outils : huit tuiles en encre, puis les exemples « outil → ce qui change ». */
.logos { list-style: none; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; }
.logos li { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; aspect-ratio: 1; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--card); text-align: center; }
.logos img { width: 36px; height: 36px; }
.logos .logo-name { font-size: 13px; font-weight: 500; color: var(--ink-2); line-height: 1.2; }
.exemples { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 32px; margin-top: clamp(40px, 5vw, 56px); }
.exemples.exemples-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.exemple { padding-top: 20px; border-top: 1px solid var(--line); }
.exemple h3 { font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.exemple p { margin-top: 8px; font-size: 16px; color: var(--ink-2); }
.outils-note { margin-top: 32px; text-align: center; font-size: 15px; color: var(--ink-2); }

/* Concrètement : six cartes, la tâche, l'outil, ce qui change, le chiffre. */
.concret .card h3 { margin-top: 0; font-size: 22px; }
.concret .card p:not(.chiffre) { margin-top: 14px; }
.tache { --ct: color-mix(in oklab, var(--c) 68%, #000); }
.tache-qui { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.tache-qui .blob { --t: 40px; flex: none; }
.tache-nom { font-size: 14px; font-weight: 600; color: var(--ct); white-space: nowrap; }
.tache-fil { flex: 1; min-width: 10px; border-top: 2px dotted color-mix(in oklab, var(--c) 45%, transparent); }
.tache-apps { display: flex; align-items: center; gap: 6px; flex: none; }
.tache-apps img { width: 26px; height: 26px; }
.tache-prive { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; background: color-mix(in oklab, var(--c) 10%, var(--paper)); font-size: 12px; font-weight: 600; color: var(--ct); }
.concret .card .chiffre { margin-top: 22px; font-size: 24px; font-weight: 600; letter-spacing: -.025em; color: var(--ink); font-variant-numeric: tabular-nums; }
.concret .card .chiffre small { display: block; margin-top: 4px; font-size: 13px; font-weight: 500; color: var(--ink-2); letter-spacing: 0; }
.concret-total { max-width: 34em; margin: 40px auto 0; text-align: center; font-size: clamp(20px, 2vw, 26px); font-weight: 500; letter-spacing: -.02em; }
.concret-total small { display: block; margin-top: 10px; font-size: 14px; font-weight: 400; color: var(--ink-2); letter-spacing: 0; }

/* Chatbot ou bras droit : deux colonnes, trois lignes chacune. */
.versus { margin-top: clamp(40px, 5vw, 56px); }
.versus ul { margin: 12px 0 0; padding-left: 0; list-style: none; }
.versus li { padding: 10px 0; border-top: 1px solid var(--line); color: var(--ink-2); }
.versus .human li { border-top-color: rgba(255, 255, 255, .14); color: var(--gray-100); }
.versus .machine { background: var(--gray-100); }
.versus .human { background: var(--gray-800); color: var(--white); }
.versus .human h3 { color: var(--orange-vif); }

/* L'équipe : disposition libre, formes, couleurs et horaires. */
.equipe-libre { position: relative; list-style: none; height: clamp(560px, 46vw, 640px); margin: 0; padding: 0; }
.equipe-libre .perso { position: absolute; left: var(--x); top: var(--y); width: 180px; margin: calc(var(--t) / -2) 0 0 -90px; display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.forme { position: relative; width: var(--t, 64px); height: var(--t, 64px); margin-bottom: 12px; background: var(--c, var(--ink)); border-radius: 50%; transform: rotate(var(--r, 0deg)); }
.forme::before, .forme::after { content: ""; position: absolute; top: 42%; width: 13%; height: 19%; border-radius: 50%; background: #fff; transform: translate(-50%, -50%); }
.forme::before { left: 35%; } .forme::after { left: 65%; }
.forme-carre { border-radius: 30%; } .forme-oeuf { border-radius: 50% 50% 46% 46% / 60% 60% 40% 40%; }
.forme-goutte { border-radius: 50% 12% 50% 50%; } .forme-galet { border-radius: 60% 40% 55% 45% / 50% 55% 45% 50%; }
.forme-hexa { border-radius: 0; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.forme-bouclier { border-radius: 24% 24% 50% 50% / 18% 18% 66% 66%; } .forme-feuille { border-radius: 78% 12% 78% 12%; }
.forme-nuit::before, .forme-nuit::after { height: 6%; width: 17%; border-radius: 999px; }
.perso .heure { font-size: 13px; font-variant-numeric: tabular-nums; }
.perso .nom { font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.perso .travail { font-size: 14px; }
.equipe-note { max-width: 36em; margin: 32px auto 0; text-align: center; font-size: 15px; color: var(--ink-2); }
@media (max-width: 900px) {
  .equipe-libre { height: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 12px; padding-bottom: 30px; }
  .equipe-libre .perso:last-child:nth-child(2n) { grid-column: 1 / -1; justify-self: center; }
  .equipe-libre .perso { position: static; width: auto; margin: 0; }
  .equipe-libre .perso:first-child { grid-column: 1 / -1; }
  .equipe-libre .perso:nth-child(2n+3) { transform: translateY(30px); }
  .equipe-libre .forme { width: calc(var(--t) * .72); height: calc(var(--t) * .72); }
  .equipe-libre .forme.forme-etoile { width: calc(var(--t) * .72 * 1.485); height: calc(var(--t) * .72 * 1.485); }
}

/* Panneaux : texte et aperçu d'interface avec son personnage. */
.panneaux { display: grid; gap: 16px; margin-top: clamp(48px, 5vw, 72px); }
.feature-panel { position: relative; isolation: isolate; overflow: visible; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding: clamp(32px, 5vw, 64px); border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--white); color: var(--ink); }
.feature-panel > * { min-width: 0; }
.feature-panel { --c: var(--ink); --ct: color-mix(in oklab, var(--c) 70%, #000); }
.fp-eyebrow { margin: 0 0 18px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ct); }
.fp-title { font-size: clamp(34px, 4.2vw, 58px); line-height: 1; letter-spacing: -.04em; color: var(--ink); }
.fp-text { margin-top: 18px; max-width: 28em; font-size: 16px; color: var(--ink-2); }
.mock { position: relative; margin-inline: auto; width: min(100%, 460px); padding: 20px 22px; border: 1px solid color-mix(in oklab, var(--c, var(--ink)) 20%, var(--line)); border-radius: 18px; background: color-mix(in oklab, var(--c, var(--ink)) 5%, var(--paper)); color: var(--ink); font-size: 14px; line-height: 1.45; box-shadow: 0 12px 40px rgba(40, 30, 20, .10); }
.mock-head { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--ink-2); }
.mock-head strong { color: var(--ink); }
.mock-head .mock-nom { display: inline-flex; align-items: center; gap: 6px; color: var(--ct); }
.mock-agent { position: absolute; left: -28px; top: -32px; z-index: 2; --t: 64px; }
.mock:has(.mock-agent) .mock-head { padding-left: 34px; }
.chat:has(.mock-agent) { padding-top: 44px; }
.chat p.lui { background: color-mix(in oklab, var(--c) 13%, #fff); }
.mock ul { margin: 0; padding: 0; list-style: none; }
.mock li { padding: 8px 0; border-top: 1px solid var(--line); }
.mock li:first-child { border-top: 0; }
.mock .mock-actions { display: flex; gap: 8px; margin-top: 14px; }
.mock .mock-actions span { padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 500; border: 1px solid var(--line-strong); }
.mock .mock-actions span.prim { background: var(--ink); color: #fff; border-color: var(--ink); }
.chat { display: grid; gap: 10px; }
.chat p { margin: 0; max-width: 88%; padding: 10px 14px; border-radius: 16px; background: var(--gray-100); }
.chat p.moi { justify-self: end; background: var(--ink); color: #fff; }
@media (max-width: 760px) { .feature-panel { grid-template-columns: minmax(0, 1fr); padding: 28px 22px; border-radius: var(--r-card); } .mock-agent { left: -10px; top: -26px; --t: 52px; } }

/* Panneau sombre de l'équipe. */
.equipe-sombre { padding: clamp(28px, 4vw, 48px) clamp(16px, 3vw, 40px) clamp(32px, 4vw, 56px); border-radius: var(--r-panel); background: #121212; color: #fff; }
.equipe-sombre { margin-top: clamp(48px, 5vw, 72px); }
.equipe-sombre .heure, .equipe-sombre .travail { color: #B8B8B8; }
.equipe-sombre .nom { color: #fff; }
.equipe-sombre .forme::before, .equipe-sombre .forme::after { background: #fff; }

/* Pour qui : deux portes métier, un grand chiffre, trois lignes à symboles. */
.metiers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: clamp(48px, 5vw, 72px); }
.metier { display: flex; flex-direction: column; padding: clamp(28px, 4vw, 48px); border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--card); }
.metier-pour { font-size: 15px; font-weight: 600; }
.metier-badge { align-self: flex-start; margin-top: 10px; padding: 5px 11px; border-radius: 999px; background: var(--gray-100); font-size: 12px; font-weight: 600; color: var(--ink-2); }
.metier-chiffre { margin-top: 28px; font-size: clamp(56px, 6vw, 88px); font-weight: 600; letter-spacing: -.05em; line-height: .95; }
.metier-chiffre small { display: block; margin-top: 12px; font-size: 16px; font-weight: 500; letter-spacing: 0; line-height: 1.35; color: var(--ink-2); }
.metier-taches { list-style: none; display: grid; gap: 8px; margin: 32px 0 0; padding: 0; }
.metier-taches li { --ct: color-mix(in oklab, var(--c) 68%, #000); display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: color-mix(in oklab, var(--c) 7%, var(--paper)); }
.metier-taches .blob { --t: 34px; }
.metier-taches img { width: 24px; height: 24px; }
.metier-taches .t { font-size: 15px; line-height: 1.3; }
.metier-taches .g { font-size: 16px; font-weight: 600; color: var(--ct); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.metier-taches .g small { display: block; font-size: 12px; font-weight: 500; }
.metier .link { margin-top: auto; padding-top: 28px; align-self: flex-start; }
@media (max-width: 760px) { .metiers { grid-template-columns: minmax(0, 1fr); } .metier { border-radius: var(--r-card); } .metier-taches li { grid-template-columns: auto auto minmax(0, 1fr); } .metier-taches .g { grid-column: 3; text-align: left; } }

/* Grands chiffres de la recherche : même taille que le constat de l'accueil. */
.stats .stat-n { font-size: clamp(44px, 4.6vw, 66px); line-height: 1; letter-spacing: -.045em; font-weight: 600; color: var(--ink); }

/* Surtitre sans numéro. */
.eyebrow { font-variant-numeric: normal; }

@media (max-width: 960px) {
  .preuve-grid { grid-template-columns: minmax(0, 280px) minmax(0, 1fr); }
  .logos { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; }
  .logos li { aspect-ratio: auto; min-height: 88px; }
  .exemples.exemples-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .preuve-grid, .tutos-grid, .rassure-grid, .rassure-grid.rassure-4, .exemples, .exemples.exemples-3 { grid-template-columns: minmax(0, 1fr); }
  .hero-apple h1 { font-size: clamp(34px, 9vw, 48px); }
  .preuve-grid { justify-items: center; }
  .short { width: min(100%, 320px); }
  .preuve-grid .quote { text-align: center; }
  .concept { border-radius: var(--r-card); }
}

/* Légendes IA : une étiquette en bas à gauche dans les images de contenu,
   en bas à droite sur les couvertures (le texte de la couverture est à gauche). */
.concept > figcaption.photo-note { top: auto; bottom: 12px; left: 12px; }
.hero .photo-note { left: auto; right: 12px; bottom: 12px; }
.photo-credit { margin-top: 20px; text-align: center; font-size: 12px; color: var(--ink-2); }

/* Témoignages : les deux Shorts d'Anne côte à côte, centrés (citation d'Eric retirée le 27/09, trop anecdotique). */
.preuve-duo { grid-template-columns: minmax(0, 560px); }
.shorts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); align-items: start; }
/* Bouton en haut à droite : en bas, il cachait l'accroche incrustée du second Short. */
.shorts .short-frame .short-play { top: 12px; bottom: auto; }
@media (max-width: 960px) {
  .preuve-duo { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .preuve-duo .shorts { width: min(100%, 560px); }
}
@media (max-width: 760px) {
  .preuve-duo .short { width: auto; }
  .shorts .short-frame .short-play { width: 52px; height: 52px; top: 10px; right: 10px; bottom: auto; }
  .shorts figcaption { font-size: 14px; }
}

/* Cas clients : portrait, nom, métier, puis avant · mis en place · aujourd'hui. */
.cas-clients { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); margin-top: clamp(56px, 6vw, 88px); text-align: left; }
.cas { padding: clamp(24px, 3vw, 36px); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--card); }
.cas-tete { display: flex; align-items: center; gap: 16px; }
.cas-tete img { width: 64px; height: 64px; flex: none; border-radius: 50%; object-fit: cover; }
.cas-tete h3 { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
.cas-tete p { margin: 3px 0 0; font-size: 15px; line-height: 1.35; color: var(--ink-2); }
.cas dl { display: grid; gap: 14px; margin: 24px 0 0; }
.cas dl > div { display: grid; grid-template-columns: 7.2em minmax(0, 1fr); gap: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.cas dt { font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--muted); }
.cas dd { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ink); }
@media (max-width: 760px) {
  .cas-clients { grid-template-columns: minmax(0, 1fr); }
  .cas dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
/* Chaque cas porte son agent et les outils du client (même ligne que les cartes Concrètement). */
.cas .tache-qui { margin: 22px 0 0; }
.cas dl { margin-top: 18px; }