/* ============================================================
   MAQUETTE V2 : pages intérieures (hub Interventions + modèle commun des 4 pages publics)
   S'ajoute à v2.css : même langage (angles vifs + coupe en biais, filets, grande typo,
   interrupteurs, repères d'angle). Aucune carte arrondie, aucune grille encadrée.
   ============================================================ */
.nav-links a.active { background: #fff; color: var(--navy); }
.sec, .presta { scroll-margin-top: 60px; }

/* ---------- HERO DE PAGE : sombre, titre à gauche, photo allumée par un interrupteur ---------- */
.phero { position: relative; background: var(--night); color: #fff; overflow: clip; isolation: isolate; }
.phero::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 88px 88px; -webkit-mask-image: linear-gradient(100deg, #000 0, transparent 70%); mask-image: linear-gradient(100deg, #000 0, transparent 70%); }
.phero::after { content: ''; position: absolute; right: -12%; top: 6%; width: 60%; aspect-ratio: 1; z-index: 0; pointer-events: none; background: radial-gradient(circle, rgba(0,54,191,.5), transparent 62%); opacity: .25; transition: opacity 1.4s; }
.phero.on::after { opacity: 1; }
.ph-inner { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); gap: 72px; align-items: center; padding-top: calc(var(--nav-h) + 76px); padding-bottom: 96px; min-height: min(86vh, 820px); }
.phero .note { grid-column: 1 / -1; margin: 0; }
.crumb { display: flex; align-items: center; gap: 12px; margin-bottom: 30px; font-size: 12px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; color: rgba(255,255,255,.7); }
.crumb a { text-decoration: none; color: var(--cyan); }
.crumb a:hover { color: #fff; }
.crumb span[aria-hidden] { opacity: .5; }
.ph-eyebrow { display: inline-flex; align-items: center; gap: 14px; margin-bottom: 26px; font-size: 12px; font-weight: 800; letter-spacing: 2.2px; text-transform: uppercase; color: #FFC32B; }
.crumb + .ph-eyebrow { display: flex; }
.phero h1.big { font-size: clamp(44px, 6.2vw, 96px); }
.phero h1 { font-size: clamp(34px, 4.2vw, 62px); font-weight: 800; line-height: .98; letter-spacing: -.04em; color: rgba(255,255,255,.93); margin-bottom: 28px; }
.phero h1 .acc { font-family: 'Comfortaa', 'Mona Sans', sans-serif; font-weight: 700; letter-spacing: -.045em; color: #fff; transition: color 1s .2s; }
.phero.on h1 .acc { color: var(--cyan); }
.ph-sub { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.7; color: rgba(255,255,255,.82); max-width: 560px; margin-bottom: 36px; }
.ph-actions { display: flex; flex-wrap: wrap; gap: 14px; }

.ph-frame { position: relative; justify-self: end; width: 100%; max-width: 560px; }
.ph-frame.brk::after { inset: -14px; }
.ph-photo { position: relative; aspect-ratio: 4 / 3; background: var(--navy); overflow: hidden; --cut: 54px; margin: 0; }
.ph-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(.42) contrast(1.1); transform: scale(1.04); transition: filter 1.3s ease, transform 1.6s var(--ease); }
.phero.on .ph-photo img { filter: none; transform: scale(1); }
.ph-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0,26,101,.6)); pointer-events: none; }
.ph-sw { position: absolute; left: -16px; bottom: -18px; z-index: 4; width: 98px; height: 52px; border-radius: 99px; background: var(--navy-dark); border: 4px solid #fff; box-shadow: 0 10px 28px rgba(0,0,0,.45); transition: background .6s; padding: 0; animation: pingw 2.4s ease-out infinite; }
.ph-sw::after { content: ''; position: absolute; top: 4px; left: 4px; width: 36px; height: 36px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #cfd6e6 70%); box-shadow: 0 2px 6px rgba(0,0,0,.4); transition: transform .7s var(--ease); }
.ph-sw[aria-checked="true"] { background: var(--cold); animation: none; }
.ph-sw[aria-checked="true"]::after { transform: translateX(46px); }
.ph-sw:focus-visible { outline: 3px solid var(--cyan); outline-offset: 6px; }
@keyframes pingw { 0% { box-shadow: 0 10px 28px rgba(0,0,0,.45), 0 0 0 0 rgba(0,204,255,.55); } 70%, 100% { box-shadow: 0 10px 28px rgba(0,0,0,.45), 0 0 0 20px rgba(0,204,255,0); } }

/* hub : mosaïque de quatre photos qui s'allument l'une après l'autre */
.ph-mosaic { position: relative; justify-self: end; width: 100%; max-width: 580px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ph-mosaic figure { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--navy); --cut: 34px; cursor: pointer; }
.ph-mosaic figure:nth-child(even) { margin-top: 38px; margin-bottom: -38px; }
.ph-mosaic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(.42) contrast(1.1); transform: scale(1.06); transition: filter 1s ease, transform 1.4s var(--ease); }
.ph-mosaic figure.on img { filter: none; transform: scale(1); }
.ph-mosaic figure::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0,26,101,.85)); pointer-events: none; }
.ph-mosaic figcaption { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 14px; }
.ph-mosaic figcaption a { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: var(--cyan); text-decoration: none; }
.ph-mosaic figcaption a:hover { color: #fff; }
.ph-mosaic .hab { object-position: 56% 50%; }

/* ---------- SOMMAIRE COLLANT ---------- */
.subnav { position: sticky; top: var(--nav-h); z-index: 90; background: rgba(255,255,255,.95); backdrop-filter: blur(12px); border-bottom: 1px solid var(--ll); overflow-x: auto; scrollbar-width: none; }
.subnav::-webkit-scrollbar { display: none; }
.subnav ul { display: flex; align-items: stretch; width: max-content; min-width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 5%; }
.subnav li { display: flex; }
.subnav a { position: relative; display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 20px 0 0; margin-right: 8px; font-size: 13px; font-weight: 800; color: var(--gray); text-decoration: none; white-space: nowrap; transition: color .2s; }
.subnav a i { font-style: normal; font-size: 11px; letter-spacing: 1.2px; color: var(--orange-ink); font-variant-numeric: tabular-nums; }
.subnav a::after { content: ''; position: absolute; left: 0; right: 20px; bottom: 0; height: 3px; background: var(--warm); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.subnav a:hover { color: var(--navy); }
.subnav a.on { color: var(--navy); }
.subnav a.on::after { transform: scaleX(1); }
.subnav .sub-cta { margin-left: auto; align-self: center; flex-shrink: 0; }
.subnav .sub-cta .btn { min-height: 38px; padding: 6px 18px; font-size: 12.5px; }

/* ---------- PRESTATIONS : bandes alternées, texte + photo en repères d'angle ---------- */
.presta-list { margin-top: -34px; }
.presta { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 76px; align-items: center; padding: 86px 0; border-top: 1px solid var(--ll); }
.presta:first-child { border-top: 0; }
.presta:nth-child(even) .p-frame { order: -1; }
.p-no { display: block; margin-bottom: 14px; font-size: clamp(60px, 7.4vw, 112px); font-weight: 800; line-height: .82; letter-spacing: -.05em; color: #fff; -webkit-text-stroke: 3px rgba(0,26,101,.3); paint-order: stroke fill; font-variant-numeric: normal; } /* remplissage blanc : masque les recouvrements internes de la police variable */
.p-badge { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; font-size: 11.5px; font-weight: 800; letter-spacing: 1.7px; text-transform: uppercase; color: var(--orange-ink); }
.p-sub { font-family: 'Comfortaa', 'Mona Sans', sans-serif; font-weight: 700; font-size: 17px; color: var(--blue); margin-bottom: 8px; }
.p-title { font-size: clamp(28px, 3.5vw, 52px); font-weight: 800; line-height: 1.06; letter-spacing: -.035em; color: var(--navy); margin-bottom: 20px; max-width: 640px; }
.p-acc { font-size: 17px; line-height: 1.75; color: var(--text); max-width: 600px; margin-bottom: 24px; }
.p-main .tags { margin-bottom: 4px; }
.p-main .spec { padding-top: 26px; max-width: 600px; }
.p-frame { position: relative; }
.p-frame.brk::after { inset: -12px; }
.p-photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--navy); --cut: 44px; margin: 0; }
.p-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.presta:hover .p-photo img { transform: scale(1.04); }
/* visuel provisoire : illustration dessinée avec les formes de la charte (assets/illus), numéro et type de fiche.
   Le libellé « Visuel à venir » n'apparaît qu'avec les notes de maquette : une vraie photo remplacera l'illustration. */
.p-photo.ph { background: var(--light); color: var(--navy); }
.p-photo.ph .ph-art { position: absolute; left: auto; right: 0; bottom: auto; top: 50%; width: 76%; height: auto; max-width: none; object-fit: contain; transform: translateY(-50%); }
.presta:hover .p-photo.ph .ph-art { transform: translateY(-50%); }
.p-photo.ph .ph-k { position: absolute; left: 22px; top: 20px; display: inline-flex; align-items: center; gap: 10px; max-width: 40%; font-size: 12px; font-weight: 800; letter-spacing: 1.4px; line-height: 1.35; text-transform: uppercase; color: var(--navy); }
.p-photo.ph.k-a .ph-k { color: var(--orange-ink); }
.p-photo.ph .ph-n { position: absolute; left: 22px; bottom: 14px; font-size: 72px; font-weight: 800; letter-spacing: -.05em; line-height: 1; color: var(--navy); }
.p-photo.ph.k-a .ph-n { color: var(--orange-ink); }
.p-photo.ph .ph-l { display: none; position: absolute; left: 22px; bottom: 100px; padding: 4px 8px; background: #fff; font-size: 11px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: var(--gray); }
body.show-notes .p-photo.ph .ph-l { display: block; }

/* ateliers : barre de filtres horizontale + « ce qui reste » */
.fbar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 32px; align-items: end; margin-bottom: 26px; }
.fbar .seg { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); }
.fbar .seg .fopt { border-bottom: 1px solid var(--ll); }
.after-k { padding-top: 6px; margin: 22px 0 6px; font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gray); }
.after-v { font-size: clamp(22px, 2.4vw, 32px); font-weight: 800; letter-spacing: -.02em; line-height: 1.25; color: var(--navy); }
.atel-head { margin-bottom: 52px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: end; }
.sec-head { margin-bottom: 60px; }

/* ---------- RSE (professionnels) : dossier sur fond marine ---------- */
.rse-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 72px; align-items: start; }
.rse-top .display { font-size: clamp(32px, 4vw, 58px); margin-bottom: 26px; }
.rse-base { font-family: 'Comfortaa', 'Mona Sans', sans-serif; font-weight: 700; font-size: clamp(16px, 1.5vw, 20px); line-height: 1.65; color: rgba(255,255,255,.82); max-width: 480px; }
.rse-top .id-table { margin-top: 6px; }
.rse-top .id-table div { grid-template-columns: 190px 1fr; }
.rse-top .id-table dd { font-weight: 500; font-size: 15.5px; line-height: 1.65; color: rgba(255,255,255,.9); }

/* ---------- AUTRES PUBLICS : mêmes lignes que « À qui s'adresse » ---------- */
.who.x { margin-top: 0; }
a.who-row { text-decoration: none; color: inherit; }
.who.x .who-row .t { font-size: clamp(28px, 4vw, 58px); }
.who-wrap.hub { grid-template-columns: 1fr 340px; }

/* ---------- DÉMARCHE (hub) : frise à quatre temps ---------- */
.frise.f4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fr-item.step { padding-right: 30px; }
.fr-item.step .fr-date { margin-top: 2px; }
.fr-item.step .fr-media { font-size: clamp(22px, 2.1vw, 30px); }
.fr-item.step .fr-desc { margin-top: 4px; }
.fr-item.step:last-child::before, .fr-item.step:last-child::after { right: 30px; }

/* ---------- CTA de page ---------- */
.cta.pg h2 { font-size: clamp(32px, 4.4vw, 68px); max-width: 1040px; }
.cta.pg .cta-note { margin: 0 auto 34px; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1180px) {
  .ph-inner { grid-template-columns: 1fr; gap: 56px; min-height: 0; padding-bottom: 80px; }
  .ph-frame, .ph-mosaic { justify-self: center; max-width: 560px; }
  .presta { grid-template-columns: 1fr; gap: 44px; padding: 64px 0; }
  .presta:nth-child(even) .p-frame { order: 0; }
  .p-frame { max-width: 600px; }
  .fbar { grid-template-columns: 1fr; gap: 20px; }
  .atel-head { grid-template-columns: 1fr; gap: 20px; }
  .rse-top { grid-template-columns: 1fr; gap: 44px; }
  .who-wrap.hub { grid-template-columns: 1fr; }
  .frise.f4 { display: flex; }
  .subnav .sub-cta { display: none; }
}
@media (max-width: 900px) {
  .ph-sw { left: -8px; bottom: -14px; width: 84px; height: 46px; }
  .ph-sw::after { width: 30px; height: 30px; }
  .ph-sw[aria-checked="true"]::after { transform: translateX(38px); }
  .rse-top .id-table div { grid-template-columns: 1fr; gap: 4px; }
  .presta-list { margin-top: -20px; }
}
@media (max-width: 700px) {
  .ph-inner { padding-top: calc(var(--nav-h) + 40px); padding-bottom: 64px; }
  .ph-mosaic { gap: 10px; }
  .ph-mosaic figure:nth-child(even) { margin-top: 24px; margin-bottom: -24px; }
  .p-no { font-size: 64px; }
  .p-photo.ph .ph-n { font-size: 52px; }
  .p-photo.ph .ph-k { font-size: 11px; max-width: 44%; }
  .subnav a { min-height: 50px; }
}

/* ============================================================
   Rythme clair / sombre : témoignages et démarche sur fond marine,
   prestations en bandes pleine largeur alternées, intervention phare en marine
   ============================================================ */
/* scène de citations sur fond sombre */
.dark #qText { color: #fff; }
.dark .q-by { border-top-color: var(--ld); }
.dark .q-by strong { color: #fff; }
.dark .q-by span { color: rgba(255,255,255,.74); }
.dark .q-more, .dark .q-all { color: var(--cyan); }
.dark .q-more:hover, .dark .q-all:hover { color: #FFC32B; }
.dark .q-prog { background: rgba(255,255,255,.16); }
.dark .q-arr { background: transparent; border-color: rgba(255,255,255,.38); color: #fff; }
.dark .q-arr:hover { background: #fff; color: var(--navy); border-color: #fff; }
.dark .q-dot:not([aria-current="true"]) { background: rgba(255,255,255,.3); }
.dark .q-dot:not([aria-current="true"]):hover { background: rgba(255,255,255,.5); }
.dark .q-count { color: rgba(255,255,255,.72); }
.dark .pause { background: transparent; border-color: rgba(255,255,255,.38); color: #fff; }
.dark .pause:hover { background: rgba(255,255,255,.14); border-color: var(--cyan); }

/* frise sur fond sombre */
.dark .fr-item::before { background: rgba(255,255,255,.2); }
.dark .fr-media { color: #fff; }
.dark .fr-date { color: #FFC32B; }
.dark .fr-desc { color: rgba(255,255,255,.78); }

/* prestations : une bande sur deux en fond bleu pâle, pleine largeur */
.presta { border-top: 0; }
.presta:nth-child(even)::before, .presta.dk::before { content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; margin-left: -50vw; background: rgba(226,244,248,.8); pointer-events: none; }
.presta.dk::before { background-color: var(--navy); background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 88px 88px; }
.presta.dk .p-no { color: var(--navy); -webkit-text-stroke-color: rgba(255,255,255,.4); }
.presta.dk .p-badge { color: #FFC32B; }
.presta.dk .p-sub { color: var(--cyan); }
.presta.dk .p-title { color: #fff; }
.presta.dk .p-acc { color: rgba(255,255,255,.86); }
.presta.dk .tags li { background: transparent; color: #fff; border-color: rgba(255,255,255,.3); }
.presta.dk .spec dl { border-top-color: var(--ld); }
.presta.dk .spec dl > div { border-bottom-color: var(--ld); }
.presta.dk .spec dt { color: #FFC32B; }
.presta.dk .spec dd { color: #fff; }
.presta.dk .btn-warm { color: var(--navy-dark); }

/* ============================================================
   Particules : trois mouvements de plus (chute, vague, scintillement)
   et un mouvement différent par bande de prestation
   ============================================================ */
/* chute : l'inverse de la montée, avec balancement */
.m-fall { top: 0 !important; left: var(--x, 50%); }
.m-fall .fl-x { transform: translateY(-120px); animation: flFall var(--tdur) linear var(--tdelay) infinite; }
@keyframes flFall { from { transform: translateY(calc(-1 * var(--s) - 40px)); } to { transform: translateY(calc(var(--H, 800px) + 40px)); } }
/* vague : traverse la section en ondulant (traversée + oscillation verticale) */
.m-wave .fl-x img { animation: flBob var(--bob, 4s) ease-in-out var(--delay) infinite alternate, flGlow var(--gdur) ease-in-out var(--delay) infinite alternate; }
@keyframes flBob { from { transform: translateY(calc(var(--amp, 70px) * -1)) rotate(-14deg); } to { transform: translateY(var(--amp, 70px)) rotate(14deg); } }
/* scintillement : sur place, l'élément gonfle, s'éclaire et s'éteint */
.m-twinkle { left: var(--x, 50%); }
.m-twinkle .fl-x { animation: none; transform: none; }
.m-twinkle .fl-x img { animation: flPulse var(--bob, 4s) ease-in-out var(--delay) infinite alternate; }
@keyframes flPulse { from { transform: scale(.5) rotate(var(--r0)); opacity: .18; filter: drop-shadow(0 0 0 var(--glow)); } to { transform: scale(1.3) rotate(var(--r1)); opacity: .95; filter: drop-shadow(0 0 28px var(--glow)); } }
@media (prefers-reduced-motion: reduce) {
  .m-fall .fl-x { animation: none !important; transform: translateY(40%); }
  .m-wave .fl-x img, .m-twinkle .fl-x img { animation: none !important; opacity: .6; }
}

/* particules propres à chaque bande de prestation (pleine largeur) */
.presta > .floaters { inset: 0 auto 0 50%; width: 100vw; margin-left: -50vw; }

/* ============================================================
   QUI SUIS-JE
   ============================================================ */
/* portrait : panneau clair, détourage multiplié, allumé par l'interrupteur */
.ph-frame.por { max-width: 430px; }
.ph-frame.por .ph-photo { aspect-ratio: 1 / 1.08; background: var(--light); filter: grayscale(1) brightness(.4); transition: filter 1.3s ease; }
.phero.on .ph-frame.por .ph-photo { filter: none; }
.ph-frame.por .ph-photo img { object-fit: cover; object-position: 50% 30%; mix-blend-mode: multiply; filter: none; transform: none; }
.ph-frame.por .ph-photo::after { background: linear-gradient(180deg, transparent 62%, rgba(0,26,101,.78)); }
.ph-cap { position: absolute; z-index: 2; left: 22px; right: 22px; bottom: 16px; display: flex; flex-direction: column; gap: 3px; }
.ph-cap b { font-family: 'Comfortaa', sans-serif; font-size: 18px; font-weight: 700; color: #fff; }
.ph-cap span { font-size: 11px; font-weight: 800; letter-spacing: 1.7px; text-transform: uppercase; color: var(--cyan); }

/* histoire : chapeau + visages en liste typographique */
.hist-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: start; margin-bottom: 70px; }
.hist-head .display { font-size: clamp(34px, 4.6vw, 68px); }
.hist-lead p { font-size: 17px; line-height: 1.8; color: var(--text); margin-bottom: 20px; }
.hist-lead p:first-child { font-family: 'Comfortaa', 'Mona Sans', sans-serif; font-weight: 700; font-size: 18px; color: var(--gray); }
.faces, .vals { border-top: 1px solid var(--ll); }
.face, .val { position: relative; display: grid; grid-template-columns: 44px minmax(0, .9fr) minmax(0, 1.3fr); gap: 24px; align-items: start; padding: 34px 8px 34px 0; border-bottom: 1px solid var(--ll); transition: opacity .7s var(--ease), transform .7s var(--ease), padding .4s var(--ease); }
.face .n, .val .n { padding-top: 14px; font-size: 13px; font-weight: 800; letter-spacing: 1.5px; color: var(--orange-ink); }
.face h3, .val h3 { font-size: clamp(28px, 3.6vw, 54px); font-weight: 800; letter-spacing: -.035em; line-height: 1; color: rgba(0,26,101,.42); transition: color .3s; }
.face p, .val p { padding-top: 8px; font-size: 16px; line-height: 1.75; color: var(--text); max-width: 620px; }
.face::before, .val::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--warm); transform: scaleY(0); transform-origin: top; transition: transform .4s var(--ease); }
.face:hover, .val:hover { padding-left: 18px; }
.face:hover h3, .val:hover h3 { color: var(--navy); }
.face:hover::before, .val:hover::before { transform: scaleY(1); }
.val h3 { font-size: clamp(26px, 3vw, 44px); }

/* grande citation sur fond marine */
.quote-big { padding: 150px 0; }
.pq { font-size: clamp(34px, 5.2vw, 82px); line-height: 1.04; max-width: 1100px; margin: 0 0 54px; }
.pq-after { max-width: 620px; margin-left: auto; font-family: 'Comfortaa', 'Mona Sans', sans-serif; font-weight: 700; font-size: clamp(16px, 1.5vw, 20px); line-height: 1.7; color: rgba(255,255,255,.82); }

/* méthode : quatre intitulés avec interrupteurs */
.meth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.meth .display { font-size: clamp(34px, 4.6vw, 68px); }
.steps-inline li { display: flex; align-items: center; gap: 22px; padding: 22px 0; border-bottom: 1px solid var(--ld); font-size: clamp(20px, 2.2vw, 30px); font-weight: 800; letter-spacing: -.02em; }
.steps-inline li:first-child { border-top: 1px solid var(--ld); }
.steps-inline .mini-sw { flex-shrink: 0; margin: 0; vertical-align: 0; }
.cta-pts a { color: inherit; text-decoration: none; }
.cta-pts a:hover { text-decoration: underline; }

@media (max-width: 1180px) {
  .hist-head, .meth { grid-template-columns: 1fr; gap: 36px; }
  .quote-big { padding: 100px 0; }
}
@media (max-width: 700px) {
  .face, .val { grid-template-columns: 34px minmax(0, 1fr); gap: 8px 14px; padding-right: 0; }
  .face p, .val p { grid-column: 2; padding-top: 4px; }
  .face .n, .val .n { padding-top: 8px; }
  .pq-after { margin-left: 0; }
}
.ph-frame.por .ph-sw { left: auto; right: -16px; }

/* ============================================================
   TÉMOIGNAGES
   ============================================================ */
/* hero : très grand guillemet allumé par l'interrupteur */
.ph-frame.bigq { max-width: 440px; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.ph-bigq { position: relative; width: 100%; height: 100%; display: flex; align-items: flex-start; justify-content: center; overflow: hidden; }
.ph-bigq span { position: absolute; top: 14%; left: 50%; transform: translateX(-50%); font-family: Georgia, serif; font-size: clamp(300px, 36vw, 560px); line-height: .9; font-weight: 700; }
.ph-bigq .q0 { color: rgba(255,255,255,.07); }
.ph-bigq .q1 { opacity: 0; background: var(--warm); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; filter: drop-shadow(0 0 36px rgba(244,120,7,.5)); transition: opacity 1.3s ease; }
.phero.on .ph-bigq .q1 { opacity: 1; }

/* témoignage phare */
.phare-lead { font-size: clamp(30px, 4.2vw, 62px); line-height: 1.08; max-width: 1100px; margin-bottom: 64px; }
.phare-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 72px; align-items: start; border-top: 1px solid var(--ll); padding-top: 38px; }
.phare-by { font-size: 14px; line-height: 1.6; color: var(--gray); }
.phare-by .pb-k { display: block; margin-bottom: 14px; font-size: 11px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; color: var(--orange-ink); }
.phare-by strong { display: block; font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--navy); margin-bottom: 4px; }
.phare-body p { font-size: 17px; line-height: 1.8; color: var(--text); margin-bottom: 20px; max-width: 640px; }

/* tous les retours : une citation par ligne */
.tfilter { margin-bottom: 18px; max-width: 760px; }
.tfilter .seg { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.tqs { border-top: 1px solid var(--ll); }
.tq { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1.6fr) minmax(0, .8fr); gap: 28px; align-items: start; padding: 34px 8px 34px 0; border-bottom: 1px solid var(--ll); transition: padding .4s var(--ease), background .3s; animation: rowIn .45s var(--ease) backwards; }
.tq[hidden] { display: none; }
.tq .n { padding-top: 8px; font-size: 13px; font-weight: 800; letter-spacing: 1.5px; color: var(--orange-ink); }
.tq blockquote { font-size: clamp(20px, 2.3vw, 34px); font-weight: 800; letter-spacing: -.025em; line-height: 1.2; color: var(--navy); }
.tq-by { padding-top: 6px; font-size: 14px; line-height: 1.55; color: var(--gray); }
.tq-by strong { display: block; font-size: 16px; font-weight: 800; color: var(--navy); }
.tq-by small { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 11px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--gray); }
.tq::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--warm); transform: scaleY(0); transform-origin: top; transition: transform .4s var(--ease); }
.tq:hover { padding-left: 18px; background: linear-gradient(90deg, rgba(255,255,255,.8), transparent 70%); }
.tq:hover::before { transform: scaleY(1); }

/* presse sur fond sombre */
.dark .fr-item h3 { color: #fff; }
.dark .pgo { color: var(--cyan); }
.dark .fr-item:hover .pgo { color: #FFC32B; }
.dark .fr-img { background: var(--navy-dark); }

/* fenêtre d'agrandissement des articles */
.f-close { position: absolute; width: 44px; height: 44px; border-radius: 50%; font-size: 26px; line-height: 1; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(0,0,0,.4); }

@media (max-width: 1180px) { .phare-grid { grid-template-columns: 1fr; gap: 28px; } .ph-frame.bigq { max-width: 320px; } }
@media (max-width: 700px) {
  .tq { grid-template-columns: 34px minmax(0, 1fr); gap: 10px 14px; padding-right: 0; }
  .tq .tq-by { grid-column: 2; padding-top: 0; }
}

/* ============================================================
   PARTENAIRES
   ============================================================ */
/* hero : neuf logos qui s'allument un à un */
.ph-mosaic.logos { grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 520px; }
.ph-mosaic.logos figure { aspect-ratio: 3 / 2; margin: 0 !important; background: rgba(255,255,255,.1); --cut: 20px; cursor: default; transition: background 1s ease; }
.ph-mosaic.logos figure.on { background: #fff; }
.ph-mosaic.logos figure::after { display: none; }
.ph-mosaic.logos img { inset: auto; left: 14%; top: 14%; width: 72%; height: 72%; object-fit: contain; transform: none; filter: grayscale(1) opacity(.25); }
.ph-mosaic.logos figure.on img { filter: none; mix-blend-mode: multiply; }

/* introduction */
.intro-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 72px; align-items: start; margin-bottom: 64px; }
.intro-big { font-size: clamp(22px, 2.6vw, 38px); font-weight: 800; letter-spacing: -.025em; line-height: 1.22; color: var(--navy); }
.intro-end { font-size: clamp(30px, 4.2vw, 62px); max-width: 1100px; }

/* partenaires : une ligne par partenaire, logo sur plaque à coupe en biais */
.pts { border-top: 1px solid var(--ll); }
.pts + .grp, .pts + .grp.reveal { margin-top: 56px; }
.pt { position: relative; display: grid; grid-template-columns: 132px minmax(0, .9fr) minmax(0, 1.3fr) auto; gap: 28px; align-items: center; padding: 26px 8px 26px 0; border-bottom: 1px solid var(--ll); transition: opacity .7s var(--ease), transform .7s var(--ease), padding .4s var(--ease); }
.pt::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--warm); transform: scaleY(0); transform-origin: top; transition: transform .4s var(--ease); }
.pt:hover { padding-left: 18px; }
.pt:hover::before { transform: scaleY(1); }
.pt-logo { display: flex; align-items: center; justify-content: center; width: 132px; height: 80px; background: var(--light); clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%); }
.sec.paper .pt-logo { background: #fff; }
.pt-logo img { max-width: 74%; max-height: 66%; width: auto; height: auto; object-fit: contain; mix-blend-mode: multiply; }
.pt-id b { display: block; font-size: clamp(20px, 2vw, 28px); font-weight: 800; letter-spacing: -.025em; line-height: 1.15; color: var(--navy); }
.pt-id small { display: flex; align-items: center; gap: 10px; margin-top: 9px; font-size: 11px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--gray); }
.pt-desc { font-size: 15px; line-height: 1.7; color: var(--text); }
.pt-go { font-size: 13px; font-weight: 800; color: var(--blue); text-decoration: none; white-space: nowrap; }
.pt-go:hover { color: var(--orange-ink); }
/* emplacements « rejoindre » : lignes en pointillés */
.pt.join { border-bottom-style: dashed; }
.pt-logo.plus { background: transparent; clip-path: none; border: 1.5px dashed rgba(0,26,101,.3); font-size: 38px; font-weight: 800; color: rgba(0,26,101,.3); }
.pt.join .pt-desc { font-family: 'Comfortaa', 'Mona Sans', sans-serif; font-weight: 700; color: var(--gray); }
/* sur fond sombre */
.dark .pts { border-top-color: var(--ld); }
.dark .pt { border-bottom-color: var(--ld); }
.dark .pt-id b { color: #fff; }
.dark .pt-id small { color: rgba(255,255,255,.72); }
.dark .pt-logo { background: #fff; }
.dark .pt-go { color: var(--cyan); }
.dark .pt-go:hover { color: #FFC32B; }
.pts-d .pt { grid-template-columns: 132px minmax(0, 1fr) auto; }
/* Quartier d'Affaires, en tête de la section sombre */
.qa { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 56px; align-items: center; margin-bottom: 56px; }
.qa-plaque { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / .9; background: #fff; --cut: 40px; }
.qa-plaque img { width: 62%; height: auto; mix-blend-mode: multiply; }
.qa-txt h3 { font-size: clamp(30px, 4vw, 56px); font-weight: 800; letter-spacing: -.035em; line-height: 1.02; color: #fff; margin-bottom: 18px; }
.qa-txt p { font-size: 17px; line-height: 1.75; color: rgba(255,255,255,.85); max-width: 620px; margin-bottom: 22px; }
.credits { margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--ll); font-size: 12.5px; color: var(--gray); }
.credits a { color: inherit; text-underline-offset: 3px; }

@media (max-width: 1180px) {
  .intro-grid, .qa { grid-template-columns: 1fr; gap: 32px; }
  .qa-plaque { max-width: 320px; }
  .pt { grid-template-columns: 112px minmax(0, 1fr); gap: 10px 20px; align-items: start; padding-right: 0; }
  .pt-logo { width: 112px; height: 70px; grid-row: 1 / span 2; }
  .pt-desc, .pt-go { grid-column: 2; }
  .pts-d .pt { grid-template-columns: 112px minmax(0, 1fr); }
  .ph-mosaic.logos { max-width: 460px; }
}
@media (max-width: 700px) {
  .pt { grid-template-columns: 88px minmax(0, 1fr); gap: 8px 16px; }
  .pt-logo { width: 88px; height: 58px; }
}

/* réseau de partenaires dans le hero */
.phero .pn-graph { justify-self: end; width: 100%; max-width: 540px; }
.phero .pn-card { margin: 0 0 32px; max-width: 460px; }
.phero .pause { background: transparent; border-color: rgba(255,255,255,.38); color: #fff; }
@media (max-width: 1180px) { .phero .pn-graph { justify-self: center; max-width: 480px; } }

/* logo complet (format large) : la plaque lui laisse presque toute la largeur */
.pt-logo.wide img { max-width: 94%; max-height: 92%; }
.intro-end { margin-bottom: 64px; }
.intro-grid { margin-bottom: 0; }

/* ============================================================
   CONTACT
   ============================================================ */
/* coordonnées dans l'ouverture */
.coords { justify-self: end; width: 100%; max-width: 520px; }
.coords-t { font-size: clamp(22px, 2.2vw, 30px); font-weight: 800; letter-spacing: -.02em; color: #fff; margin-bottom: 8px; }
.coords-s { font-size: 14.5px; line-height: 1.65; color: rgba(255,255,255,.78); margin-bottom: 26px; max-width: 420px; }
.coords-l { border-top: 2px solid #FFC32B; }
.coords-l > div { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--ld); }
.coords-l dt { padding-top: 5px; font-size: 11px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: #FFC32B; }
.coords-l dd { font-size: clamp(20px, 2vw, 26px); font-weight: 800; letter-spacing: -.02em; color: #fff; line-height: 1.2; }
.coords-l dd a { color: inherit; text-decoration: none; transition: color .2s; }
.coords-l dd a:hover { color: var(--cyan); }
.coords-l small { display: block; margin-top: 5px; font-size: 13px; font-weight: 500; letter-spacing: 0; color: rgba(255,255,255,.7); }

/* formulaire : champs soulignés, choix en liste, thématiques en interrupteurs */
.cf { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 88px; align-items: start; }
.cf-side { position: sticky; top: calc(var(--nav-h) + 30px); }
.cf-side .display { font-size: clamp(34px, 4.4vw, 64px); margin-bottom: 36px; }
.delay { display: flex; gap: 18px; align-items: flex-start; padding-top: 22px; border-top: 1px solid var(--ll); font-size: 15px; line-height: 1.7; color: var(--text); max-width: 420px; }
.delay strong { color: var(--orange-ink); }
.delay .mini-sw, .cf-ok .mini-sw { background: rgba(0,26,101,.28); margin: 5px 0 0; flex-shrink: 0; vertical-align: 0; }
.delay .mini-sw.on, .cf-ok .mini-sw.on { background: var(--cold); }
.delay .mini-sw.on::after, .cf-ok .mini-sw.on::after { transform: translateX(17px); }
.fld { margin: 0 0 34px; border: 0; padding: 0; min-width: 0; }
.fld label, .fld .lab { display: block; padding: 0; margin-bottom: 4px; font-size: 11px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; color: var(--gray); }
.opt-l { font-weight: 500; letter-spacing: 0; text-transform: none; font-size: 12px; }
.fld input[type="text"], .fld input[type="email"], .fld input[type="tel"], .fld textarea { width: 100%; padding: 10px 0 12px; border: 0; border-bottom: 1.5px solid var(--ll); border-radius: 0; background: transparent; font: inherit; font-size: 20px; font-weight: 600; color: var(--navy); outline: none; transition: border-color .25s, box-shadow .25s; appearance: none; }
.fld textarea { resize: vertical; min-height: 140px; line-height: 1.6; font-size: 17px; font-weight: 500; }
.fld input:focus, .fld textarea:focus { border-bottom-color: var(--orange); box-shadow: 0 1.5px 0 0 var(--orange); }
.fld input::placeholder, .fld textarea::placeholder { color: #8591ad; font-weight: 500; }
.fld-row { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.fld-row .fld { min-width: 0; }
.hp { position: absolute; left: -9999px; top: -9999px; }
.opts { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; margin-top: 8px; }
.opt { position: relative; display: block; cursor: pointer; }
.opt input { position: absolute; opacity: 0; }
.opt span { display: block; padding: 15px 4px; border-bottom: 1px solid var(--ll); font-size: 16px; font-weight: 700; color: var(--navy); transition: padding .25s var(--ease), box-shadow .25s, background .25s; }
.opt:hover span { padding-left: 12px; }
.opt input:checked + span { padding-left: 16px; box-shadow: inset 4px 0 0 var(--orange); background: rgba(226,244,248,.7); }
.opt input:focus-visible + span, .tgl input:focus-visible ~ span { outline: 3px solid var(--cyan); outline-offset: 2px; }
.tgls { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; margin-top: 8px; }
.tgl { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 4px; border-bottom: 1px solid var(--ll); cursor: pointer; font-size: 15.5px; font-weight: 700; color: var(--navy); }
.tgl input { position: absolute; opacity: 0; }
.tgl .mini-sw { background: rgba(0,26,101,.28); margin: 0; flex-shrink: 0; vertical-align: 0; }
.tgl input:checked + .mini-sw { background: var(--cold); }
.tgl input:checked + .mini-sw::after { transform: translateX(17px); }
.cf-ref { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 34px; padding: 14px 16px; background: rgba(226,244,248,.7); border-left: 4px solid var(--orange); font-size: 14.5px; color: var(--navy); }
.cf-ref[hidden] { display: none; }
.cf-ref button { margin-left: auto; font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--blue); }
.cf-ref button:hover { color: var(--orange-ink); }
.cf-mention { margin-top: 16px; font-size: 12.5px; line-height: 1.6; color: var(--gray); max-width: 520px; }
.cf-err { margin-bottom: 30px; padding: 16px 20px; border-left: 4px solid #c0392b; background: rgba(231,76,60,.08); color: #a5281b; font-size: 15px; font-weight: 700; }
.cf-ok { padding: 10px 0 30px; }
.cf-ok[hidden], .cf-err[hidden], #cform[hidden] { display: none; }
.cf-ok .display { font-size: clamp(32px, 4vw, 58px); margin: 22px 0 16px; }
.cf-ok-t { font-family: 'Comfortaa', 'Mona Sans', sans-serif; font-weight: 700; font-size: 18px; color: var(--gray); }

@media (max-width: 1180px) {
  .coords { justify-self: start; max-width: 560px; }
  .cf { grid-template-columns: 1fr; gap: 40px; }
  .cf-side { position: static; }
}
@media (max-width: 700px) {
  .coords-l > div { grid-template-columns: 1fr; gap: 4px; }
  .fld-row, .opts, .tgls { grid-template-columns: 1fr; }
  .fld-row { gap: 0; }
}
.fld label.opt, .fld label.tgl { margin: 0; padding: 0; letter-spacing: 0; text-transform: none; font-size: 16px; color: var(--navy); }
.fld label.opt { display: block; }
.fld label.tgl { display: flex; padding: 14px 4px; font-size: 15.5px; }
.tgl small { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 500; line-height: 1.45; color: var(--gray); }

/* ============================================================
   Code couleur : bleu = interventions (format de base), orange = ateliers (fiches ASL-2026)
   ============================================================ */
.r-ref span { display: block; line-height: 1.35; }
.r-ref span b { display: block; font-weight: 800; letter-spacing: .6px; color: var(--navy); text-transform: none; }
.k-a .r-ref span { color: var(--orange-ink); }
.k-i .r-ref span { color: var(--blue); }
.fopt .mark { width: 22px; height: 8px; margin-right: 8px; vertical-align: 1px; }
.p-badge { color: var(--blue); }
.subnav a.iv i { color: var(--blue); }
.subnav a.at i { color: var(--orange-ink); }
#ateliers .display .acc { color: var(--orange-ink); }
#ateliers .sec-top .idx { color: var(--orange-ink); }
.presta.dk .p-badge { color: var(--cyan); }

/* ============================================================
   Modèle d'offre après tri : séances (bleu), ateliers (orange), volet, planning
   ============================================================ */
.intro-p { max-width: 760px; margin: -26px 0 54px; font-size: clamp(15px, 1.35vw, 18px); }
.presta.at .p-no { -webkit-text-stroke-color: rgba(179,71,0,.38); }
.p-badge.at { color: var(--orange-ink); }
.presta.at .p-frame.brk::after { --c: #FFC32B; }
.custom.plan { margin-top: 20px; }
.volet-foot { margin-top: 34px; padding: 18px 20px; border-left: 4px solid var(--orange); background: rgba(255,255,255,.7); font-size: 15px; font-weight: 700; color: var(--navy); max-width: 760px; }
.p-sub-r { margin: 8px 0 0; font-family: 'Comfortaa', 'Mona Sans', sans-serif; font-weight: 700; font-size: 15px; color: var(--orange-ink); }
.fbar { grid-template-columns: minmax(0, 360px); }
.ph-inner > * { min-width: 0; }
.crumb { flex-wrap: wrap; row-gap: 6px; }

/* ============================================================
   MENTIONS LÉGALES : ouverture courte, sommaire collant, blocs à filets
   ============================================================ */
.phero.slim .ph-inner { grid-template-columns: 1fr; min-height: 0; padding-bottom: 72px; }
.phero.slim .ph-sub { margin-bottom: 0; }
.ml { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 72px; align-items: start; }
.ml-nav { position: sticky; top: calc(var(--nav-h) + 24px); }
.ml-nav ol { list-style: none; border-top: 1px solid var(--ll); }
.ml-nav a { display: flex; gap: 14px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--ll); font-size: 14px; font-weight: 700; color: var(--gray); text-decoration: none; transition: color .2s; }
.ml-nav a span { font-size: 12px; font-weight: 800; letter-spacing: 1.4px; color: var(--orange-ink); font-variant-numeric: tabular-nums; }
.ml-nav a:hover { color: var(--navy); }
.ml-b { padding-bottom: 56px; margin-bottom: 56px; border-bottom: 1px solid var(--ll); scroll-margin-top: calc(var(--nav-h) + 24px); }
.ml-b h2 { display: flex; align-items: baseline; gap: 16px; margin-bottom: 24px; font-size: clamp(24px, 2.6vw, 34px); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: var(--navy); }
.ml-b h2 .n { font-size: 13px; font-weight: 800; letter-spacing: 1.6px; color: var(--orange-ink); font-variant-numeric: tabular-nums; }
.ml-b p { max-width: 70ch; margin-bottom: 14px; font-size: 16px; line-height: 1.75; color: var(--text); }
.ml-b p strong { color: var(--navy); }
.ml-b a { color: var(--blue); text-underline-offset: 3px; }
.ml-b a:hover { color: var(--orange-ink); }
.ml-t { width: 100%; margin: 20px 0 24px; border-collapse: collapse; font-size: 15px; }
.ml-t th { padding: 0 16px 12px 0; text-align: left; font-size: 11px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: var(--gray); border-bottom: 2px solid var(--navy); }
.ml-t td { padding: 14px 16px 14px 0; vertical-align: top; line-height: 1.55; border-bottom: 1px solid var(--ll); }
.ml-t td:first-child { font-weight: 700; color: var(--navy); white-space: nowrap; }
.ml-key { padding: 4px 0 4px 20px; margin: 22px 0; border-left: 4px solid var(--cyan); }
.ml-upd { font-size: 14px; color: var(--gray); }
.ml-upd a { color: var(--blue); }
@media (max-width: 1000px) {
  .ml { grid-template-columns: 1fr; gap: 40px; }
  .ml-nav { position: static; }
}
@media (max-width: 640px) {
  .ml-t td:first-child { white-space: normal; }
  .ml-t th, .ml-t td { padding-right: 10px; font-size: 14px; }
}

/* ============================================================
   PAGE FINANCEURS : chiffres, fiche d'identité, graphiques, tableau, témoignages, étapes
   ============================================================ */
.fin-head { margin-bottom: 40px; }
.fin-head .lead { margin-top: 20px; }
.fin-p { max-width: 68ch; margin-bottom: 40px; font-size: 18px; line-height: 1.7; }
.fin-p strong { color: var(--navy); }
.fin-h3 { margin: 56px 0 20px; font-size: clamp(20px, 2vw, 26px); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: var(--navy); }
.fin-kpis { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; border-top: 2px solid var(--navy); margin-bottom: 40px; }
.fk { padding: 24px 24px 0 0; }
.fk + .fk { padding-left: 24px; border-left: 1px solid var(--ll); }
.fk b { display: block; font-size: clamp(44px, 6vw, 88px); font-weight: 800; letter-spacing: -.045em; line-height: .95; color: var(--navy); font-variant-numeric: tabular-nums; }
.fk.o b { color: var(--orange-ink); }
.fk span { display: block; margin-top: 12px; font-size: 15px; font-weight: 700; color: var(--gray); }
.fk small { display: block; font-size: 13px; color: var(--gray); }
.fin-id { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; border-top: 1px solid var(--ll); }
.fin-id div { display: grid; grid-template-columns: 140px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--ll); }
.fin-id dt { font-size: 13px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--gray); }
.fin-id dd { font-weight: 600; color: var(--navy); }
.fin-id a { color: var(--blue); }
.fin-fig { max-width: 820px; }
.fin-fig svg { display: block; width: 100%; height: auto; font-family: 'Mona Sans', sans-serif; }
.fin-cap { margin: 8px 0 32px; font-size: 14px; color: var(--gray); }
.fin-dep { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--ll); max-width: 820px; margin-bottom: 32px; }
.fin-dep li { padding: 16px 12px 0 0; }
.fin-dep b { display: block; font-size: 32px; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--navy); }
.fin-dep span { display: block; margin-top: 6px; font-size: 14px; line-height: 1.3; color: var(--gray); font-weight: 600; }
.fin-link { margin-top: 40px; }
.fin-two { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: 900px; margin-bottom: 48px; }
.fin-two > div { padding-top: 16px; border-top: 4px solid var(--blue); }
.fin-two > div.a { border-top-color: var(--orange); }
.fin-two h3 { margin-bottom: 8px; font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--navy); }
.fin-two p { font-size: 16px; line-height: 1.65; }
.fin-tw { overflow-x: auto; }
.fin-t { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.fin-t thead th { text-align: left; padding: 0 20px 12px 0; font-size: 12px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: var(--gray); border-bottom: 2px solid var(--navy); }
.fin-t tbody th, .fin-t tbody td { padding: 14px 20px 14px 0; vertical-align: top; text-align: left; font-weight: 400; border-bottom: 1px solid var(--ll); }
.fin-t tbody th { width: 24%; font-weight: 800; color: var(--navy); }
.fin-quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 48px 56px; }
.fin-quotes figure { margin: 0; }
.fin-quotes blockquote { padding-left: 20px; margin-bottom: 12px; border-left: 4px solid var(--cyan); font-size: 18px; line-height: 1.6; color: var(--text); }
.fin-quotes figcaption { padding-left: 24px; font-size: 14px; line-height: 1.4; color: var(--gray); }
.fin-quotes figcaption b { display: block; color: var(--navy); font-weight: 800; }
.fin-chips { display: flex; flex-wrap: wrap; gap: 12px; }
.fin-chips li { padding: 10px 20px; border: 1px solid var(--navy); font-size: 15px; font-weight: 700; color: var(--navy); }
.fin-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-bottom: 8px; counter-reset: fs; }
.fin-steps li { position: relative; list-style: none; padding-top: 16px; border-top: 4px solid var(--navy); font-size: 17px; line-height: 1.55; }
.fin-steps li::before { counter-increment: fs; content: counter(fs, decimal-leading-zero); display: block; margin-bottom: 8px; font-size: 13px; font-weight: 800; letter-spacing: 2px; color: var(--orange-ink); }
@media (max-width: 1000px) {
  .fin-kpis { grid-template-columns: 1fr 1fr; }
  .fk { padding-bottom: 24px; }
  .fk:nth-child(3) { padding-left: 0; border-left: 0; }
  .fin-id, .fin-two, .fin-quotes, .fin-steps { grid-template-columns: 1fr; }
  .fin-id { gap: 0; }
  .fin-steps { gap: 32px; }
}
@media (max-width: 640px) {
  .fin-id div { grid-template-columns: 1fr; gap: 4px; }
  .fin-dep { grid-template-columns: repeat(2, 1fr); row-gap: 16px; }
}
@media (max-width: 640px) {
  .fin-t { min-width: 0; }
  .fin-t thead { position: absolute; left: -9999px; }
  .fin-t tr { display: block; padding: 14px 0; border-bottom: 1px solid var(--ll); }
  .fin-t tbody th, .fin-t tbody td { display: block; width: auto; padding: 2px 0; border: 0; }
  .fin-t tbody td::before { display: block; margin-top: 6px; font-size: 12px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--gray); }
  .fin-t tbody td:nth-child(2)::before { content: 'Public'; }
  .fin-t tbody td:nth-child(3)::before { content: 'Format'; }
  .fin-t tbody td:nth-child(4)::before { content: 'Ce qui reste'; }
}

/* visuel d'un atelier, dans le panneau déplié de la ligne */
.row-p .row-img { display: block; width: 100%; height: auto; margin: 22px 0 4px; }

/* visuel 16:9 qui contient déjà son titre : cadre 16:9 pour ne rien rogner */
.p-photo.wide { aspect-ratio: 16 / 9; }

/* Titre du hub : « accompagner » est un mot long (6,9 fois la taille du corps). Sur ordinateur, la taille suit la largeur réelle de la colonne de texte,
   pas celle de l'écran, pour que le mot ne passe jamais sous la mosaïque de photos. */
@media (min-width: 1181px) {
  @supports (container-type: inline-size) {
    .ph-text:has(h1.fit) { container-type: inline-size; }
    .phero h1.big.fit { font-size: clamp(44px, calc((100cqw + 16px) / 6.95), 96px); }
  }
}

/* Témoignages : sur téléphone, le grand guillemet décoratif est masqué (il occupait plus de la moitié de l'ouverture) ; il reste sur tablette et ordinateur */
@media (max-width: 700px) {
  .ph-frame.bigq { display: none; }
}