/* Confort de lecture : tailles fluides, zones tactiles et écrans courts.
   Les limites suivent le contenu, indépendamment du modèle de téléphone. */
:root { --header-height: 89px; --page-gutter: 20px; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-height) + env(safe-area-inset-top, 0px) + 16px); }
body { overflow-wrap: break-word; }
:where(.wrap, .wrap > *, .ofr-grid > *, .story-grid > *, .editorial > *, .mix-signature > div) { min-width: 0; }
:where(h1, h2, h3, .ofr-badge, .choice, .btn, .ofr-cta) { overflow-wrap: anywhere; }
a, button, summary, label { touch-action: manipulation; }
.brand { min-height: 44px; }
.faces-toggle[hidden] { display: none; }
.faces-hint { display: none; }
.faces-marquee:focus-visible { outline-offset: -3px; }
.faces.is-offscreen .faces-track, .faces.is-background .faces-track { animation-play-state: paused; }
.mdm-action, .mdm-tile-press .mdm-action { min-height: 48px; }
.mdm-sources summary { min-height: 44px; padding-block: 12px; }
.footer-inner > a:last-child { min-height: 44px; display: inline-flex; align-items: center; }
.nav-shell { padding-top: env(safe-area-inset-top, 0px); }
.footer { padding-bottom: max(30px, env(safe-area-inset-bottom, 0px)); }

/* Le menu est entièrement défilable, même en paysage ou avec un fort zoom. */
@media (max-width: 1100px) {
  :root { --header-height: 73px; }
  .nav { height: 72px; gap: 16px; }
  .menu { display: block; flex: 0 0 48px; width: 48px; height: 48px; }
  .navlinks { display: none; position: absolute; inset: 100% 0 auto; background: #111514; border-bottom: 1px solid var(--line); padding: 12px max(var(--page-gutter), env(safe-area-inset-right, 0px)) max(20px, env(safe-area-inset-bottom, 0px)) max(var(--page-gutter), env(safe-area-inset-left, 0px)); flex-direction: column; align-items: stretch; gap: 0; max-height: calc(100vh - var(--header-height) - env(safe-area-inset-top, 0px)); max-height: calc(100dvh - var(--header-height) - env(safe-area-inset-top, 0px)); overflow-y: auto; overscroll-behavior-y: contain; }
  .navlinks.open { display: flex; }
  .navlinks a { display: flex; align-items: center; white-space: normal; min-height: 52px; padding: 12px 8px; font-size: 14px; line-height: 1.6; }
  .navlinks .nav-cta { margin-top: 12px; padding: 14px 16px; border: 1px solid var(--pink); border-radius: 3px; background: var(--pink); color: #141616 !important; }
  .navlinks a[aria-current]:after { left: auto; right: 8px; bottom: calc(50% - 2px); }
  .navlinks .nav-cta:after { display: none; }
  .hero-cinema { margin-top: calc(-1 * var(--header-height)); }
  .hc-caption { position: static; max-width: 560px; margin-top: 28px; text-align: left; }
  .hc-who { display: none; }
  .hc-audience { margin-top: 0; }
  .hc-scroll { display: none; }
  .hc-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hc-stat:nth-child(n) { padding: 20px 16px; border-left: 1px solid var(--line); border-top: 0; }
  .hc-stat:nth-child(3n + 1) { padding-left: 0; border-left: 0; }
  .hc-stat:nth-child(n + 4) { border-top: 1px solid var(--line); }
  .hc-stat span { font-size: 12px; line-height: 1.6; }
  .hc-stat strong { font-size: clamp(26px, 3.4vw, 34px); }
  .impact-inner { gap: 26px; }
  .impact-eyebrow { padding-right: 26px; }
  .impact-line { white-space: normal; }
  .ofr-grid { grid-template-columns: 1fr; gap: 32px; }
  #contact.contact-editorial .editorial { grid-template-columns: 1fr; gap: 36px; }
  #contact.contact-editorial .editorial-copy { max-width: 680px; }
  #contact.contact-editorial .editorial-copy .body-copy,
  #contact.contact-editorial .editorial-copy .after-copy { max-width: none; }
  #contact.contact-editorial .control { font-size: 16px; }
  #contact.contact-editorial .control, #contact.contact-editorial .cf-step { scroll-margin-block: calc(var(--header-height) + 20px) 24px; }
}

/* Tout le texte des univers reste accessible sans survol, y compris sur tablette tactile. */
@media (max-width: 1100px), (hover: none), (pointer: coarse) {
  .universes-hint { display: none; }
  .triptych { display: grid; grid-template-columns: 1fr; height: auto; gap: 24px; }
  .triptych .tri-panel { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); flex: none; border: 1px solid var(--line); background: var(--bg); }
  .tri-panel .tri-media, .tri-panel:hover .tri-media, .tri-panel:focus-within .tri-media { position: relative; inset: auto; height: auto; min-height: 280px; }
  .tri-media img { position: absolute; inset: 0; transform: none; }
  .tri-panel .tri-media:after { opacity: .25; }
  .tri-panel .tri-credit { opacity: 1; }
  .tri-cover, .tri-index { display: none; }
  .tri-panel .tri-side, .tri-panel:hover .tri-side, .tri-panel:focus-within .tri-side { position: static; width: auto; min-width: 0; opacity: 1; transform: none; pointer-events: auto; padding: 28px; }
  .tri-text { font-size: 15px; line-height: 1.75; }
  .tri-side .tri-tag { font-size: 16px; line-height: 1.6; }
  .tri-proof { flex-wrap: wrap; gap: 12px; }
  .tri-proof-copy { font-size: 12px; }
  .tri-cta { min-height: 48px; padding-block: 10px; font-size: 12px; }
  .faces-marquee { scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: #68746b transparent; mask-image: none; -webkit-mask-image: none; overscroll-behavior-x: contain; }
  .face-card { scroll-snap-align: start; }
  .faces-hint { display: block; margin: -16px 0 24px; color: var(--muted); font-size: 12px; line-height: 1.6; }
}

@media (max-width: 760px) {
  :root { --header-height: 65px; --page-gutter: clamp(16px, 4.5vw, 28px); }
  .wrap { width: auto; margin-left: max(var(--page-gutter), env(safe-area-inset-left, 0px)); margin-right: max(var(--page-gutter), env(safe-area-inset-right, 0px)); }
  .nav { height: 64px; }
  .section, .faces, .reviews.mix-section, .media-mosaic, #contact.contact-editorial { padding-block: clamp(48px, 10vw, 72px); }
  .section-label { margin-bottom: 24px; }
  .section-title, .section-title.small, .approach-copy .section-title, .story-text h2, .faces-title, .mix-section .section-title, .mdm-mosaic-head h2, .mfp-inner h2 { font-size: clamp(28px, 7.5vw, 44px); line-height: 1.16; letter-spacing: -.035em; }
  .approach-intro, .story-text p, .mfp-inner p, .mth-card p, .ofr-head .lead, .universes .lead, #methode .lead { font-size: 16px; line-height: 1.8; }
  .closing { font-size: clamp(20px, 5.5vw, 26px); line-height: 1.55; }
  .hero-cinema { min-height: 0; }
  /* La photo occupe sa propre ligne : aucun texte ni menu ne couvre le visage. */
  .hero-cinema { margin-top: 0; display: block; }
  .hc-bg { position: relative; inset: auto; z-index: 0; width: 100%; height: clamp(220px, 72vw, 390px); mask-image: none; -webkit-mask-image: none; }
  .hc-bg img { object-position: 50% 18%; animation: none; transform: none; }
  .hc-bg:after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 78%, #080909); }
  .hero-cinema:before { display: none; }
  .hc-content { padding-top: 20px; padding-bottom: 28px; }
  .hc-eyebrow { max-width: 100%; padding: 8px 11px; font-size: 10px; letter-spacing: .08em; margin-bottom: 20px; }
  .hc-eyebrow i { flex: 0 0 7px; animation: none; }
  .hc-title { max-width: 650px; font-size: clamp(28px, 7.8vw, 46px); line-height: 1.05; }
  .hc-line { overflow: visible; }
  .hc-lead { font-size: 15px; line-height: 1.7; margin-top: 18px; }
  .hc-actions { display: grid; gap: 10px; margin-top: 24px; max-width: 420px; }
  .hc-actions .btn { min-height: 54px; padding: 15px 18px; gap: 16px; font-size: 12px; }
  .hc-ghost { min-height: 48px; justify-content: center; text-align: center; padding: 12px 8px; font-size: 12px; }
  .hero-cinema .hc-caption { margin-top: 22px; }
  .hc-caption strong { font-size: 11px; line-height: 1.7; letter-spacing: .03em; }
  .hc-audience span { display: block; margin-top: 6px; font-size: 12px; line-height: 1.7; }
  .hc-statsbar { backdrop-filter: none; }
  .tri-panel .tri-side, .tri-panel:hover .tri-side, .tri-panel:focus-within .tri-side { padding: 24px 20px; }
  .tri-side h3 { font-size: clamp(26px, 7vw, 34px); line-height: 1.15; }
  .tri-proof { margin-top: 16px; }
  .tri-proof-copy { flex: 1 1 130px; max-width: none; }
  .mth-thread { margin-top: 32px; }
  .mth-step { padding-left: 64px; padding-bottom: 32px; }
  .mth-rail, .mth-fill, .mth-knot { left: 21px; }
  .mth-knot { width: 42px; height: 42px; margin-left: -21px; font-size: 12px; }
  .mth-card h3 { font-size: clamp(19px, 5.5vw, 28px); line-height: 1.2; }
  .mth-ghost { display: none; }
  .method.is-threaded .mth-card { opacity: 1; transform: none; }
  .mth-close { margin-top: 32px; font-size: 15px; }
  .portrait { height: auto; aspect-ratio: 4 / 5; max-height: 640px; }
  .portrait .photo-frame { height: 100%; }
  .faces-track { padding-inline: var(--page-gutter); }
  .face-card { flex-basis: clamp(156px, 44vw, 210px); }
  .face-card figcaption span { font-size: 12px; line-height: 1.6; }
  .reference-organizations { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 18px; gap: 16px; }
  .mdm-mosaic-head p { font-size: 15px; max-width: 560px; }
  .mdm-mosaic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; align-items: stretch; }
  .mdm-tile { min-height: 350px; padding: 24px; }
  .mdm-tile-podcast { grid-row: auto; }
  .mdm-tile-conference { grid-column: auto; }
  .mdm-tile-top { gap: 8px; align-items: flex-start; }
  .mdm-badge { font-size: 10px; letter-spacing: .06em; }
  .mdm-tile-content { padding-top: 50px; }
  .mdm-tile p, .mdm-tile-podcast p, .mdm-tile-live p { font-size: 14px; }
  .mdm-action, .mdm-tile-press .mdm-action, .mdm-tile-live .mdm-action { font-size: 13px; min-height: 48px; gap: 16px; }
  .mdm-kind, .mdm-tile-press .mdm-kind, .mdm-ambiance-label { font-size: 10px; }
  .mdm-sources { font-size: 12px; }
  .ofr-head { margin-bottom: 34px; }
  .ofr-card { padding: 30px clamp(18px, 5vw, 30px) 24px; min-width: 0; }
  .ofr-badge { left: 18px; right: 18px; width: fit-content; max-width: calc(100% - 36px); font-size: 10px; letter-spacing: .05em; line-height: 1.5; }
  .ofr-card h3 { font-size: clamp(26px, 7vw, 34px); line-height: 1.14; }
  .ofr-tag { font-size: 11px; letter-spacing: .08em; }
  .ofr-card p, .ofr-list li { font-size: 15px; line-height: 1.75; }
  .ofr-card .ofr-fine { font-size: 12px; }
  .ofr-foot { gap: 20px; }
  .ofr-cta { width: 100%; justify-content: space-between; min-height: 52px; gap: 12px; padding: 14px 16px; font-size: 12px; line-height: 1.6; }
  .ofr-how { padding: 0; margin-top: 36px; }
  .ofr-how li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 6px 16px; }
  .ofr-how b { grid-row: 1 / 3; margin: 0; }
  .ofr-how strong { font-size: 15px; }
  .ofr-how span { grid-column: 2; margin: 0; font-size: 14px; line-height: 1.75; }
  .mix-stage { gap: 24px; }
  .is-lead .mix-quote { font-size: 16px; line-height: 1.8; }
  .is-lead .mix-role, .mix-role { font-size: 12px; line-height: 1.6; }
  .is-lead .mix-name, .mix-name { font-size: 14px; }
  .mix-side-copy .mix-quote { font-size: 14px; }
  .mix-open { min-height: 48px; font-size: 12px; }
  .mix-arrows button { width: 48px; height: 48px; }
  .mix-prompt { font-size: 12px; }
  .mix-face { flex: 0 0 72px; font-size: 11px; gap: 12px; padding-block: 8px; }
  .mix-face img, .mix-face .mix-no-photo { width: 44px; height: 44px; }
  #contact.contact-editorial .editorial .title { font-size: clamp(30px, 7.8vw, 46px); line-height: 1.16; }
  #contact.contact-editorial .editorial .subtitle { font-size: clamp(23px, 6vw, 30px); }
  #contact.contact-editorial .body-copy, #contact.contact-editorial .editorial-copy .invitation { font-size: 16px; }
  #contact.contact-editorial .editorial-form { min-width: 0; padding: 24px clamp(16px, 4.5vw, 26px); }
  #contact.contact-editorial .editorial-form .form-heading { font-size: 20px; }
  #contact.contact-editorial .editorial-screen h3 { font-size: 23px; }
  #contact.contact-editorial .form-field > label, #contact.contact-editorial .group-label { font-size: 14px; }
  #contact.contact-editorial .editorial-progress { gap: 6px; }
  #contact.contact-editorial .editorial-progress li { font-size: 12px; line-height: 1.5; text-align: center; }
  #contact.contact-editorial .editorial-universes .choice span { font-size: 13px; text-align: center; }
  #contact.contact-editorial .editorial-requests .choice span { font-size: 14px; min-height: 52px; }
  #contact.contact-editorial .form-actions { flex-wrap: wrap; gap: 12px; }
  #contact.contact-editorial .editorial-form .form-actions .primary { min-height: 54px; min-width: 0; font-size: 14px; padding-inline: 16px; }
  #contact.contact-editorial .editorial-form .form-actions .back:not([hidden]) + .primary { margin-left: 0; }
  #contact.contact-editorial .back { min-height: 48px; padding: 12px 8px; font-size: 14px; }
  #contact.contact-editorial .consent { min-height: 48px; padding-block: 10px; font-size: 13px; }
  #contact.contact-editorial .consent input { width: 22px; height: 22px; flex-basis: 22px; }
  #contact.contact-editorial .optional-details summary { min-height: 48px; padding-block: 12px; font-size: 13px; }
  #contact.contact-editorial .optional, #contact.contact-editorial .form-note,
  #contact.contact-editorial .editorial-form .form-subtle, #contact.contact-editorial .editorial-form .required-note,
  #contact.contact-editorial .form-hint { font-size: 12px; }
  .footer small, .footer-credit { font-size: 11px; line-height: 1.8; }
  .footer-inner > a:last-child { font-size: 12px !important; }
}

@media (max-width: 600px) {
  .hc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hc-stat:nth-child(n) { padding: 18px 12px; border-left: 1px solid var(--line); border-top: 0; }
  .hc-stat:nth-child(odd) { padding-left: 0; border-left: 0; }
  .hc-stat:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .levers-gallery { grid-template-columns: 1fr; }
  .approach .lever, .approach .lever:nth-last-child(-n + 3) { grid-row: auto; grid-template-columns: minmax(72px, 28%) minmax(0, 1fr); grid-template-rows: auto auto 1fr; gap: 6px 16px; padding: 22px 0; }
  .lever .number { grid-column: 2; grid-row: 1; margin: 0; font-size: 11px; }
  .lever-photo { grid-column: 1; grid-row: 1 / 4; width: 100%; aspect-ratio: 1; margin: 0; }
  .approach .lever h3 { grid-column: 2; grid-row: 2; font-size: clamp(14px, 3.8vw, 19px); line-height: 1.35; }
  .approach .lever p { grid-column: 2; grid-row: 3; font-size: 14px; line-height: 1.7; margin: 0; }
  .triptych .tri-panel { grid-template-columns: minmax(0, 1fr); }
  .tri-panel .tri-media, .tri-panel:hover .tri-media, .tri-panel:focus-within .tri-media { min-height: 0; height: auto; aspect-ratio: 3 / 2; }
  .mdm-mosaic-grid { grid-template-columns: minmax(0, 1fr); }
  .mdm-tile { min-height: 330px; padding: 24px 20px; }
  .mdm-tile-podcast { min-height: 400px; }
  .mdm-tile-conference h3 { font-size: clamp(24px, 6.5vw, 31px); }
  .mix-stage { grid-template-columns: minmax(0, 1fr); }
  .mix-card:not(.is-lead) { display: grid; grid-template-columns: minmax(0, 1fr); }
  .mix-card:not(.is-lead) > .mix-signature { grid-row: 1; flex-direction: row; min-height: 0; margin: 0 0 16px; align-items: center; }
  .mix-side-copy { padding-bottom: 0; }
  .mix-side-copy .mix-quote { -webkit-line-clamp: 3; line-clamp: 3; }
  .mix-bottom { flex-wrap: wrap; gap: 14px; }
  .mix-prompt { order: 3; max-width: none; flex: 1 0 100%; }
}

@media (max-width: 380px) {
  .hc-eyebrow { font-size: 9px; }
  .hc-stat span { font-size: 11px; }
  .tri-panel .tri-side, .tri-panel:hover .tri-side, .tri-panel:focus-within .tri-side { padding-inline: 16px; }
  .mth-step { padding-left: 54px; }
  .ofr-badge { top: -16px; }
  .is-lead .mix-avatar { width: 58px; height: 58px; }
  .is-lead .mix-signature { gap: 12px; }
  #contact.contact-editorial .editorial-form .form-emblem { display: none; }
  #contact.contact-editorial .editorial-universes .choices { grid-template-columns: 1fr; }
  #contact.contact-editorial .editorial-universes .choice span { flex-direction: row; justify-content: flex-start; min-height: 52px; padding: 12px; }
  #contact.contact-editorial .form-actions .back { flex-basis: 100%; text-align: left; }
}

@media (max-width: 700px) {
  .mdm-mosaic-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 320px) {
  .nav, .nav .brand { gap: 6px; }
}

/* Repli pour les navigateurs qui ne prennent pas encore en charge les sous-grilles. */
@supports not (grid-template-rows: subgrid) {
  @media (min-width: 601px) {
    .approach .lever { grid-row: auto; grid-template-rows: auto auto auto 1fr; }
  }
}

/* Tablettes et téléphones en paysage : deux colonnes indépendantes.
   La hauteur de la photo ne dépend plus de celle du texte ou des statistiques. */
@media (min-width: 761px) and (max-width: 1100px), (min-width: 480px) and (max-width: 1100px) and (max-height: 500px) and (orientation: landscape) {
  .hero-cinema { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); align-items: start; min-height: 0; margin-top: 0; padding-top: 28px; }
  .hero-cinema:before { display: none; }
  .hc-bg { position: relative; inset: auto; z-index: 0; grid-column: 2; grid-row: 1; width: auto; height: auto; aspect-ratio: 3 / 4; margin-right: max(24px, env(safe-area-inset-right, 0px)); mask-image: none; -webkit-mask-image: none; }
  .hc-bg img { width: 100%; height: 100%; position: absolute; inset: 0; object-position: 50% 20%; transform: none; animation: none; }
  .hc-bg:after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 82%, #080909); }
  .hc-content { grid-column: 1; grid-row: 1; width: auto; min-width: 0; margin: 0 24px 0 max(24px, env(safe-area-inset-left, 0px)); padding: 12px 0 32px; }
  .hc-eyebrow { max-width: 100%; padding: 8px 10px; font-size: 9px; letter-spacing: .06em; margin-bottom: 18px; }
  .hc-eyebrow i { flex: 0 0 7px; }
  .hc-title { max-width: 100%; font-size: clamp(25px, 4.3vw, 46px); line-height: 1.06; }
  .hc-line { overflow: visible; }
  .hc-lead { max-width: 100%; font-size: 15px; line-height: 1.7; margin-top: 18px; }
  .hc-actions { display: grid; gap: 10px; max-width: 420px; margin-top: 22px; }
  .hc-actions .btn { min-height: 52px; padding: 14px 16px; gap: 12px; font-size: 12px; }
  .hc-ghost { min-height: 48px; padding: 12px 4px; font-size: 12px; justify-content: center; text-align: center; }
  .hero-cinema .hc-caption { max-width: 100%; margin-top: 22px; }
  .hc-statsbar { grid-column: 1 / -1; grid-row: 2; }
}

/* Sur ordinateur également, les légendes restent dans la colonne de texte. */
@media (min-width: 1101px) {
  .hc-title { font-size: clamp(38px, 4.3vw, 64px); max-width: 560px; }
  .hc-content { padding-top: 130px; }
  .hc-content > :not(.hc-scroll) { max-width: min(560px, 45%); }
  .hc-caption { position: static; text-align: left; margin-top: 24px; }
  .hc-who { display: none; }
  .hc-audience { margin-top: 0; }
  .hc-scroll { display: none; }
}

/* Paysage : un menu compact, une photo lisible dès le début du hero. */
@media (max-height: 500px) and (max-width: 1100px) and (orientation: landscape) {
  :root { --header-height: 57px; }
  .nav { height: 56px; }
  .hero-cinema { padding-top: 16px; }
  .hc-content { margin-inline: max(16px, env(safe-area-inset-left, 0px)) 18px; padding-top: 0; }
  .hc-bg { width: calc(100% - max(16px, env(safe-area-inset-right, 0px))); max-height: calc(100svh - 80px); margin-right: max(16px, env(safe-area-inset-right, 0px)); }
  .hc-bg img { object-position: 50% 24%; }
  .hc-eyebrow { font-size: 8px; }
  .hc-title { font-size: clamp(24px, 4.1vw, 40px); }
}

@media (hover: none), (pointer: coarse) {
  .hc-bg img, .hc-eyebrow i { animation: none; }
  .ofr-card:hover, .ofr-cta:hover, .btn:hover:not(:disabled) { transform: none; }
  .face-card:hover .face-photo img { transform: none; }
}