/* =========================================================
   médiappli : feuille de style principale
   Tokens, échelle typographique, conteneur et rythme repris (copie)
   du Bureau des communs : aucune dépendance entre les dépôts.
   ========================================================= */

/* -------- Tokens -------- */
:root {
  --mp-orange: #F04E23;
  --mp-orange-deep: #D63F17;
  --mp-cream: #FAF6F0;        /* fond général */
  --mp-warm: #F3EDE3;         /* fond des sections alternées */
  --mp-shell: #EDE5DA;        /* aplats et formes claires */
  --mp-sand: #DED3C2;
  --mp-clay: #C9BBA5;
  --mp-orange-soft: #FFE7DA;
  --mp-bark: #2A2622;         /* illustrations du héros */
  --mp-bark-deep: #1A1815;
  --mp-ink: #111111;
  --mp-ink-soft: #1C1B1A;
  --mp-body: #55504B;         /* corps de texte */
  --mp-mute: #989086;         /* surtitres, mentions */
  --mp-line: #E3DACD;
  --mp-white: #FFFFFF;

  --mp-font-sans: "Inter", "Helvetica Neue", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mp-font-serif: "Playfair Display", ui-serif, Georgia, "Times New Roman", serif;
  --mp-font-wordmark: "Playfair Display", ui-serif, Georgia, serif;

  /* Échelle typographique : valeur à 1440 px, réduite à 1024 px, fluide entre
     les deux (clamp). Les titres poursuivent ensuite leur croissance jusqu'à
     2333 px, où le conteneur atteint son plafond (x1,617 : rapport titre / texte
     constant). En dessous de 1024 px, les valeurs de 1024 px s'appliquent,
     affinées pour les mobiles dans le bloc @media (max-width: 719px). */
  --mp-fs-hero: max(clamp(2.875rem, calc(0.1058rem + 4.3269vw), 4rem), min(calc(0.0213rem + 4.4208vw), 6.4683rem));      /* titre du héros */
  --mp-fs-section: max(clamp(2.125rem, calc(0.2788rem + 2.8846vw), 2.875rem), min(calc(0.0153rem + 3.1774vw), 4.6491rem));   /* titres de section */
  --mp-fs-angle: max(clamp(1.6875rem, calc(0.6106rem + 1.6827vw), 2.125rem), min(calc(0.0113rem + 2.3485vw), 3.4363rem));     /* titres de colonne */
  --mp-fs-panel: max(clamp(1.9375rem, calc(0.5529rem + 2.1635vw), 2.5rem), min(calc(0.0133rem + 2.7630vw), 4.0427rem));     /* titre du panneau médiappli */
  --mp-fs-card: max(clamp(1.1875rem, calc(0.726rem + 0.7212vw), 1.375rem), min(calc(0.0073rem + 1.5196vw), 2.2235rem));      /* titres de projet */
  --mp-fs-quote: max(clamp(1.5rem, calc(0.5769rem + 1.4423vw), 1.875rem), min(calc(0.0100rem + 2.0722vw), 3.0320rem));     /* citation */
  /* Corps de texte : 18 px (~14 pt) à 1440 px, 17 px à 1024 px, x1,3 jusqu'à 2333 px (23,4 px). */
  --mp-fs-body: max(clamp(1.0625rem, calc(0.9086rem + 0.2404vw), 1.125rem), min(calc(0.5808rem + 0.6047vw), 1.4625rem));
  --mp-fs-lead: var(--mp-fs-body);
  /* Longueur de ligne : 50ch ~ 58 caractères réels d'Inter (le ch, largeur du « 0 »,
     surestime d'environ 20 % la largeur moyenne d'un caractère). */
  --mp-measure: 50ch;
  --mp-fs-small: max(clamp(0.875rem, calc(0.7212rem + 0.2404vw), 0.9375rem), min(calc(0.4841rem + 0.5037vw), 1.2188rem));
  --mp-fs-eyebrow: clamp(0.6875rem, 0.3rem + 0.29vw, 0.875rem);         /* 11 px : surtitres et étiquettes */

  --mp-radius: 10px;
  --mp-radius-lg: 18px;
  --mp-radius-pill: 999px;

  --mp-shadow-card: 0 18px 40px -26px rgba(17, 17, 17, 0.35);

  /* Conteneur fluide : voir .container (90 vw, plafonné à 2100 px). */

  /* Respiration verticale : 120 px entre grandes sections, 160 px autour du
     panneau médiappli (valeurs à 1440 px, fluides en dessous). */
  --mp-space-section: clamp(4rem, 8.3333vw, 7.5rem);

  --mp-header-h: 64px;        /* hauteur du bandeau : 84 px dès 900 px */
  --mp-space-panel: clamp(5rem, 11.1111vw, 10rem);
}

/* -------- Reset -------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--mp-font-sans);
  font-size: var(--mp-fs-body);
  line-height: 1.6;
  color: var(--mp-body);
  background: var(--mp-cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--mp-orange); color: var(--mp-white); }

/* -------- Typographie -------- */
.eyebrow {
  display: block;
  font-family: var(--mp-font-sans);
  font-size: var(--mp-fs-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mp-mute);
  font-weight: 600;
  line-height: 1.4;
}
.eyebrow--on-orange { color: rgba(255, 255, 255, 0.85); }
.eyebrow--on-dark { color: rgba(255, 255, 255, 0.55); }

.display {
  font-family: var(--mp-font-serif);
  font-weight: 400;
  font-size: var(--mp-fs-hero);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--mp-ink);
}
.display em { font-style: italic; color: var(--mp-orange); }

.section-title {
  font-family: var(--mp-font-serif);
  font-weight: 400;
  font-size: var(--mp-fs-section);
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
  color: var(--mp-ink);
}
.section-title em { font-style: italic; color: var(--mp-orange); }

/* -------- Primitives de mise en page -------- */
.container {
  width: min(2100px, 90vw);
  margin-inline: auto;
  padding-inline: clamp(24px, 3vw, 72px);
}


/* -------- Boutons -------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.45rem;
  border-radius: var(--mp-radius-pill);
  font-weight: 600;
  font-size: var(--mp-fs-small);
  line-height: 1;
  border: 1px solid transparent;
  transition: transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn .arrow { transition: transform .3s ease; }
.btn:hover .arrow { transform: translateX(3px); }

.btn--orange { background: var(--mp-orange); color: var(--mp-white); }
.btn--orange:hover { background: var(--mp-orange-deep); }
.btn--dark { background: var(--mp-ink); color: var(--mp-white); }
.btn--dark:hover { background: #000; }
.btn--ghost {
  background: transparent;
  color: var(--mp-ink);
  border-color: rgba(17, 17, 17, 0.2);
}
.btn--ghost:hover { border-color: var(--mp-ink); }
.btn--paper {
  background: var(--mp-white);
  color: var(--mp-ink);
  border-color: var(--mp-line);
}
.btn--paper:hover { border-color: var(--mp-ink); }
.btn--outline-light {
  background: transparent;
  color: var(--mp-white);
  border-color: rgba(255, 255, 255, 0.55);
}
.btn--outline-light:hover { border-color: var(--mp-white); background: rgba(255, 255, 255, 0.1); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--mp-ink);
  border-bottom: 1px solid var(--mp-ink);
  padding-bottom: 2px;
  transition: color .25s ease, border-color .25s ease;
}
.link-arrow svg { transition: transform .3s ease; }
.link-arrow:hover { color: var(--mp-orange); border-color: var(--mp-orange); }
.link-arrow:hover svg { transform: translateX(3px); }

/* -------- En-tête --------
   Bandeau opaque (fond de page), fixe en haut : 84 px sur ordinateur, 64 px sur mobile. */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--mp-cream);
  box-shadow: 0 1px 0 var(--mp-line), 0 8px 18px -14px rgba(17, 17, 17, 0.22);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: var(--mp-header-h);
}
@media (min-width: 900px) {
  :root { --mp-header-h: 84px; }
  .site-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.5rem; }
}

.brand {
  display: inline-block;
  justify-self: start;
  font-family: var(--mp-font-wordmark);
  font-weight: 700;
  font-size: clamp(1.32rem, 1.47vw, 2.1rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--mp-ink);
}
.brand__word { display: block; }
.brand__dot {
  display: inline-block;
  width: 0.4em; height: 0.4em;
  border-radius: 50%;
  background: var(--mp-orange);
  margin-left: 0.3em;
  vertical-align: 0.1em;
}
.brand--light { color: var(--mp-white); }

.nav { display: none; }
@media (min-width: 900px) {
  .nav { display: flex; align-items: center; gap: clamp(1.25rem, 3.06vw, 2.75rem); }
}
.nav__link {
  font-size: clamp(1.0625rem, 1.25vw, 1.125rem);
  font-weight: 500;
  color: var(--mp-ink);
  position: relative;
  padding-block: 4px;
  transition: color .2s ease;
}
.nav__link:hover,
.nav__link:focus-visible,
.nav__link[aria-current] { color: var(--mp-orange); }
.nav__link:focus-visible { outline: 2px solid var(--mp-orange); outline-offset: 6px; border-radius: 4px; }
/* Trait du lien actif : 3 px, extrémités arrondies, à peu près 12 px sous le texte. */
.nav__link::after,
.mobile-nav__text::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -8px;
  height: 3px; border-radius: 3px; background: var(--mp-orange);
  opacity: 0; transform: scaleX(0.4);
  transition: opacity .2s ease, transform .2s ease;
}
.nav__link[aria-current]::after,
.mobile-nav__link[aria-current] .mobile-nav__text::after { opacity: 1; transform: none; }

.site-header__actions { display: flex; align-items: center; gap: 0.6rem; justify-self: end; }
.site-header__sep { display: none; width: 1px; height: 42px; background: var(--mp-line); margin-right: 0.9rem; }
@media (min-width: 900px) { .site-header__sep { display: block; } }

/* Boutons ronds (loupe, burger) : 44 px sur mobile, 50 px sur ordinateur. */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%;
  background: var(--mp-shell); color: var(--mp-ink);
  transition: background .2s ease;
}
.icon-btn:hover { background: var(--mp-sand); }
.icon-btn:focus-visible { outline: 2px solid var(--mp-orange); outline-offset: 3px; }
.icon-btn > svg { width: 22px; height: 22px; }
@media (min-width: 900px) { .icon-btn { width: 50px; height: 50px; } }

@media (min-width: 900px) { .menu-toggle { display: none; } }
/* Burger : trois traits identiques (même boîte de 18 x 2 px), qui se
   rejoignent en croix quand le menu est ouvert. */
.menu-toggle__icon {
  flex: none;
  position: relative; display: inline-block; width: 18px; height: 14px;
}
.menu-toggle__icon i {
  position: absolute; left: 0; width: 18px; height: 2px;
  background: var(--mp-ink);
  transition: transform .2s ease, opacity .2s ease;
}
.menu-toggle__icon i:nth-child(1) { top: 0; }
.menu-toggle__icon i:nth-child(2) { top: 6px; }
.menu-toggle__icon i:nth-child(3) { top: 12px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon i:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.menu-toggle__text--close,
.menu-toggle[aria-expanded="true"] .menu-toggle__text--open { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__text--close { display: inline; }
@media (prefers-reduced-motion: reduce) {
  .menu-toggle__icon i { transition: none; }
}

.mobile-nav {
  display: none;
  padding-block: 1rem 1.5rem;
  border-top: 1px solid var(--mp-line);
}
.mobile-nav[data-open="true"] { display: block; }
.mobile-nav__text { position: relative; display: inline-block; }
.mobile-nav__text::after { bottom: -4px; }
.mobile-nav__link[aria-current] { color: var(--mp-orange); }
.mobile-nav__link {
  display: block;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--mp-line);
  font-size: 1.25rem;
  font-family: var(--mp-font-serif);
  color: var(--mp-ink);
}
.mobile-nav__cta { margin-top: 1.4rem; font-size: 1.125rem; padding: 1.15rem 2rem; }


/* -------- Mobiles : échelle resserrée --------
   Sous 720 px, les tailles de 1024 px sont encore trop grandes pour une
   colonne de 350 px : on les ramène à une échelle de téléphone. */
@media (max-width: 719px) {
  :root {
    --mp-fs-hero: 2.125rem;
    --mp-fs-section: 1.75rem;
    --mp-fs-angle: 1.625rem;
    --mp-fs-panel: 1.75rem;
    --mp-fs-card: 1.25rem;
    --mp-fs-quote: 1.375rem;
    --mp-fs-body: 1.0625rem;
  }
}

/* -------- Apparition au défilement --------
   L'état masqué est posé par reveal_controller.js, uniquement sur les blocs
   situés sous la ligne de flottaison. Sans JS, ou pour une capture pleine
   page, le contenu reste visible. */
[data-reveal][data-reveal-hidden] {
  opacity: 0;
  transform: translateY(16px);
}
[data-reveal] {
  transition: opacity .8s ease, transform .8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Révélation globale (redimensionnement, impression) : sans fondu. */
[data-reveal-instant] [data-reveal] { transition: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal][data-reveal-hidden] { opacity: 1; transform: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* -------- Utilitaires -------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* -------- Pied de page -------- */
.site-footer {
  background: var(--mp-ink);
  color: var(--mp-white);
  padding-block: clamp(3rem, 5.5vw, 5rem) 1.75rem;
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 900px) {
  .site-footer__grid { grid-template-columns: 1fr 0.55fr 1.35fr; }
  .site-footer__quote {
    border-left: 1px solid rgba(255, 255, 255, 0.18);
    padding-left: clamp(2rem, 4vw, 3.5rem);
  }
}
.site-footer__claim {
  margin-top: 1.4rem;
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--mp-fs-small);
  line-height: 1.55;
}
.site-footer__brand .btn { margin-top: 1.6rem; }

.site-footer__links ul { display: grid; gap: 0.95rem; }
.site-footer__links a {
  font-size: clamp(1.1875rem, 0.85vw, 1.65rem);
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.82);
  transition: color .2s ease;
}
.site-footer__links a:hover { color: var(--mp-orange); }

.site-footer__quote blockquote p {
  font-family: var(--mp-font-serif);
  font-style: italic;
  font-size: clamp(1.25rem, 1.9vw, 1.75rem);
  line-height: 1.4;
  color: var(--mp-white);
  text-wrap: balance;
}
.site-footer__quote em { color: var(--mp-orange); }
.site-footer__quote svg { margin-top: 1.4rem; }
.site-footer__quote figcaption { margin-top: 1rem; font-size: var(--mp-fs-small); font-weight: 600; color: rgba(255, 255, 255, 0.85); }

.site-footer__bottom {
  margin-top: clamp(1.75rem, 3vw, 2.6rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  font-size: 0.83rem;
  color: rgba(255, 255, 255, 0.6);
}
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 1.6rem; }
.site-footer__legal a { transition: color .2s ease; }
.site-footer__legal a:hover { color: var(--mp-white); }
.site-footer__signature {
  margin-top: 1.6rem;
  font-family: var(--mp-font-serif);
  font-size: var(--mp-fs-card);
  line-height: 1.25;
  color: var(--mp-white);
}
.site-footer__signature + .site-footer__claim { margin-top: 0.9rem; }


/* -------- Ancres : l'en-tête ne masque pas les titres -------- */
[id] { scroll-margin-top: 6rem; }

/* -------- Héros -------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: max(640px, 100vh);
  min-height: max(640px, 100svh);
  padding-block: 4.6rem 4rem;
  background: var(--mp-bark-deep);
  color: var(--mp-white);
}
.hero__bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 40% 60%;
}
.hero__shade {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(17, 14, 12, 0.6), rgba(17, 14, 12, 0) 24%),
    linear-gradient(90deg, rgba(17, 14, 12, 0.88) 0%, rgba(17, 14, 12, 0.7) 32%, rgba(17, 14, 12, 0.2) 56%, rgba(17, 14, 12, 0) 76%);
}
.hero__inner { width: min(2100px, 90vw); display: grid; grid-template-columns: 1fr; }
.hero__eyebrow { color: rgba(255, 255, 255, 0.92); letter-spacing: 0.2em; }
.hero__title {
  margin-top: 1.25rem;
  color: var(--mp-white);
  font-size: clamp(2.4rem, 4.2vw, 5.4rem);
  line-height: 1.08;
}
.hero__title em { color: var(--mp-orange); }
.hero__title { text-wrap: balance; }
.hero__eyebrow { text-wrap: balance; }
.hero__br { display: none; }
@media (max-width: 559px) { .hero__title { font-size: clamp(1.8rem, 8vw, 2.4rem); } }
@media (min-width: 560px) { .hero__br { display: inline; } }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2rem; }

/* Repère de défilement : en bas du héros, centré, disparaît en fondu après 80 px. */
.hero__scroll {
  position: absolute; z-index: 3; left: 50%; bottom: 20px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.1rem;
  min-width: 44px; min-height: 44px; padding: 0.25rem 0.75rem;
  font-size: var(--mp-fs-small); color: rgba(255, 255, 255, 0.92); text-decoration: none;
  transition: opacity 0.35s ease, visibility 0.35s;
}
.hero__scroll:hover { color: var(--mp-white); }
.hero__scroll:focus-visible { outline: 2px solid var(--mp-white); outline-offset: 2px; border-radius: 8px; }
.hero__scroll svg { animation: scroll-bounce 2s ease-in-out infinite; }
.hero__scroll.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
@keyframes scroll-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .hero__scroll svg { animation: none; } .hero__scroll { transition: none; } }

.hero__script {
  font-family: "Caveat", "Segoe Script", cursive;
  font-weight: 600;
  font-size: clamp(1.8rem, 3vw, 3.6rem);
  line-height: 1.12;
  color: var(--mp-white);
  transform: rotate(-9deg);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}
.hero__script li:nth-child(2) { margin-left: 0.25em; }
.hero__script li:nth-child(3) { margin-left: 0.5em; }
.hero__script::after {
  content: ""; display: block;
  width: 70%; height: 3px; margin: 0.35em 0 0 0.9em;
  border-radius: 2px; background: var(--mp-orange);
  transform: rotate(-3deg);
}
.hero__strokes { position: absolute; width: 18%; height: auto; }
.hero__strokes--a { left: -22%; top: 10%; }
.hero__strokes--b { left: 104%; top: 54%; }

/* Téléphone du héros : voir phone_screens.css. */
.hero__device { container-type: inline-size; }

/* Mobile : texte en haut, téléphone dessous, ENTIER dans le premier écran (414 x 896). */
@media (max-width: 899px) {
  .hero { align-items: flex-start; padding-block: 2.5rem 6.6rem; }
  .hero__bg { object-position: 22% 40%; }
  .hero__shade {
    background: linear-gradient(180deg, rgba(17, 14, 12, 0.82) 0%, rgba(17, 14, 12, 0.62) 55%, rgba(17, 14, 12, 0.45) 100%);
  }
  .hero__inner { gap: 1.75rem; }
  .hero__ctas { margin-top: 1.5rem; }
  .hero__device { position: relative; justify-self: end; width: min(66vw, (100vh - 25.5rem) * 0.546, 360px); width: min(66vw, (100svh - 25.5rem) * 0.546, 360px); margin-right: 5vw; margin-top: 6.5rem; }
  /* Téléphone +20 % : plus de place à sa gauche, les mots manuscrits passent au-dessus, à gauche. */
  .hero__script { position: absolute; right: auto; left: calc(100% - 78vw); top: -6.6rem; font-size: 1.56rem; }
  .hero__strokes--a { left: -30%; top: 62%; width: 22%; }
  .hero__strokes--b { display: none; }
}

/* Mobile (jusqu'à 767 px) : titre, bouton, puis téléphone centré à la taille des téléphones des cartes (cadre 250 px et plus,
   290 px au plus), indépendante de la hauteur de l'écran (le hero grandit). Mots et éclairs de part et d'autre, sans recouvrir le cadre. */
@media (max-width: 767px) {
  .hero__device { --hero-phone-w: clamp(250px, 72vw, 290px); width: var(--hero-phone-w); justify-self: center; margin-right: 0; margin-top: 7.5rem; }
  .hero__script { left: -4vw; top: -7rem; }
  .hero__strokes--a { left: -17%; top: 58%; width: 15%; }
  .hero__strokes--b { display: block; left: 103%; top: -7%; width: 15%; }
}

/* Ordinateur : le téléphone tient dans la hauteur du héros, marge comprise. */
@media (min-width: 900px) {
  /* Le hero commence sous le bandeau : toute la photo est visible. */
  .hero { min-height: clamp(560px, calc(100vh - var(--mp-header-h)), 900px); min-height: clamp(560px, calc(100svh - var(--mp-header-h)), 900px); padding-block: 3.5rem 4.5rem; }
  .hero__bg { object-position: 40% 5%; }  /* visages à 7-36 % de la hauteur de l'image */
  .hero__inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; }
  .hero__copy { max-width: 60rem; }
  .hero__device {
    position: relative; justify-self: center;
    width: clamp(240px, min(33.1vw, (100vh - 13.5rem) * 0.546), 600px);
    width: clamp(240px, min(33.1vw, (100svh - 13.5rem) * 0.546), 600px);
  }
  .hero__script { position: absolute; z-index: 1; left: calc(100% + 0.75rem); top: -3%; }
}
/* Écran très large et peu haut : le cover rogne davantage, le hero grandit avec la largeur. */
@media (min-width: 900px) and (min-aspect-ratio: 11/5) {
  .hero { min-height: max(clamp(560px, calc(100vh - var(--mp-header-h)), 900px), min(46vw, 900px)); min-height: max(clamp(560px, calc(100svh - var(--mp-header-h)), 900px), min(46vw, 900px)); }
}
}

.lead strong { font-weight: 700; color: var(--mp-ink); }

/* -------- Trois fonctions -------- */
.angles { padding-block: var(--mp-space-section); background: var(--mp-cream); }
.angles__head { text-align: center; max-width: 72rem; margin-inline: auto; }
.angles__sub { margin-top: 0.8rem; color: var(--mp-body); }
.angles__grid {
  margin-top: clamp(2rem, 3.6vw, 3.25rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 1.6vw, 1.5rem);
}
@media (min-width: 900px) { .angles__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 899px) { .angles__grid { max-width: 34rem; margin-inline: auto; } }
.angle {
  background: var(--mp-white);
  border-radius: var(--mp-radius-lg);
  padding: clamp(1.75rem, 3vw, 2.75rem) clamp(1.25rem, 2.2vw, 2rem);
  box-shadow: 0 14px 34px -22px rgba(17, 17, 17, 0.25);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.picto { width: clamp(72px, 5.6vw, 120px); height: auto; }
.angle__title {
  font-family: var(--mp-font-serif);
  font-weight: 400;
  font-size: var(--mp-fs-angle);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--mp-ink);
  margin-top: clamp(1rem, 2vw, 1.5rem);
}
.angle__blurb { margin-top: 0.7rem; max-width: 34ch; }

/* -------- Des médiappli en service --------
   Grille asymétrique (dès 1100 px), identité propre à chaque carte (variables --card-*),
   smartphone entier jamais rogné. Tablette : 2 colonnes verticales. Mobile : carrousel. */
.exemples { padding-block: var(--mp-space-section); background: var(--mp-warm); }
.exemples__lead { margin-top: 0.9rem; max-width: 54ch; color: var(--mp-body); }
.link-arrow--orange { color: #C2380F; border-bottom: 2px solid var(--mp-orange); }
.link-arrow--orange:hover { color: var(--mp-ink); border-color: var(--mp-orange); }
.exemples__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; }
.exemples__grid {
  margin-top: clamp(2rem, 3.6vw, 3.25rem);
  display: grid; grid-template-columns: 1fr; gap: 24px;
}
@media (min-width: 768px) { .exemples__grid { grid-template-columns: repeat(2, 1fr); } .projet--full { grid-column: 1 / -1; } }
/* Deux familles : étiquettes discrètes (h3) ; collectif en grille 3 colonnes (2+1 / 1+2 / 2+1), origines plus sobres. */
.exemples__famille { margin-top: clamp(1.75rem, 3vw, 2.5rem); scroll-margin-top: var(--mp-header-h, 84px); }
.exemples__famille:first-of-type { margin-top: clamp(1.25rem, 2.4vw, 2rem); }
.exemples__famille .exemples__grid { margin-top: clamp(0.9rem, 1.6vw, 1.25rem); }
.exemples__famille-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.4rem 1.5rem; }
.exemples__famille-label { color: #6E675F; }
.exemples__famille-lead { margin-top: 0.35rem; max-width: 64ch; color: var(--mp-body); }
.exemples__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; font-size: var(--mp-fs-eyebrow); color: #6E675F; }
.exemples__mini { padding: 0.1rem 0.55rem; border-radius: var(--mp-radius-pill); background: var(--mp-orange-deep); color: #fff; font-size: var(--mp-fs-eyebrow); font-weight: 700; line-height: 1.4; }
.exemples__legend .exemples__mini:last-of-type { margin-right: 0.3rem; }
.exemples__famille--origines { padding-top: clamp(1.25rem, 2.4vw, 2rem); border-top: 1px solid var(--mp-line); }
@media (min-width: 900px) { .exemples__grid--compact { grid-template-columns: repeat(3, 1fr); } }
/* Desktop (dès 1024 px) : grille de 6 colonnes, lignes toujours pleines et de même hauteur.
   Ordre : 3 + 3, puis (3) + (4) et (5) + (6) en 4 + 2 dès 1340 px (3 + 3 avant), puis 3 + 3. Tablette : deux colonnes, une carte par colonne. */
@media (min-width: 1024px) {
  .exemples__grid--compact { grid-template-columns: repeat(3, 1fr); }
  .exemples__grid { grid-auto-rows: minmax(560px, auto); }
  .exemples__grid:not(.exemples__grid--compact) { grid-template-columns: repeat(6, 1fr); }
  .exemples__grid:not(.exemples__grid--compact) > .projet { grid-column: span 3; }
  /* Carte seule sur la dernière ligne : toute la largeur. */
  .exemples__grid:not(.exemples__grid--compact) > .projet:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* Dès 1340 px : lignes 2 et 3 en 4 + 2 ; la carte large place le texte à gauche et le téléphone à droite, la carte étroite garde le téléphone dessous. */
@media (min-width: 1340px) {
  .exemples__grid:not(.exemples__grid--compact) > .projet:nth-child(3),
  .exemples__grid:not(.exemples__grid--compact) > .projet:nth-child(5) { grid-column: span 4; }
  .exemples__grid:not(.exemples__grid--compact) > .projet:nth-child(4),
  .exemples__grid:not(.exemples__grid--compact) > .projet:nth-child(6) { grid-column: span 2; }
}
@media (min-width: 1700px) {
  .exemples__grid:not(.exemples__grid--compact) > .projet:nth-child(3),
  .exemples__grid:not(.exemples__grid--compact) > .projet:nth-child(5) { flex-direction: row; align-items: center; gap: 2rem; }
  .exemples__grid:not(.exemples__grid--compact) > .projet:nth-child(3) .projet__text,
  .exemples__grid:not(.exemples__grid--compact) > .projet:nth-child(5) .projet__text { flex: 1 1 0; }
  .exemples__grid:not(.exemples__grid--compact) > .projet:nth-child(3) .projet__stage,
  .exemples__grid:not(.exemples__grid--compact) > .projet:nth-child(5) .projet__stage { flex: 0 0 42%; margin-top: 0; }
}
/* Demi-lignes (3 colonnes) : texte à gauche et téléphone à droite dès que la colonne de texte peut porter le titre agrandi (1,4 x). */
@media (min-width: 1700px) {
  .exemples__grid:not(.exemples__grid--compact) > .projet:nth-child(1),
  .exemples__grid:not(.exemples__grid--compact) > .projet:nth-child(2),
  .exemples__grid:not(.exemples__grid--compact) > .projet:nth-child(n+7) { flex-direction: row; align-items: center; gap: 1.25rem; }
  .exemples__grid:not(.exemples__grid--compact) > .projet:nth-child(1) .projet__text,
  .exemples__grid:not(.exemples__grid--compact) > .projet:nth-child(2) .projet__text,
  .exemples__grid:not(.exemples__grid--compact) > .projet:nth-child(n+7) .projet__text { flex: 1 1 0; }
  .exemples__grid:not(.exemples__grid--compact) > .projet:nth-child(1) .projet__stage,
  .exemples__grid:not(.exemples__grid--compact) > .projet:nth-child(2) .projet__stage,
  .exemples__grid:not(.exemples__grid--compact) > .projet:nth-child(n+7) .projet__stage { flex: 0 0 auto; margin-top: 0; }
}
.projet {
  --phone-h: 541px;
  --card-bg: #fff; --card-fg: var(--mp-ink); --card-accent: var(--mp-orange); --card-on-accent: #fff; --card-title: var(--card-fg); --titre-cqi: 16.5cqi;
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; gap: 1.1rem;
  padding: clamp(1.4rem, 2vw, 1.9rem);
  border-radius: 28px;
  background: var(--card-bg); color: var(--card-fg);
  box-shadow: 0 18px 40px -26px rgba(17, 17, 17, 0.5);
}
@media (min-width: 768px) { .projet { --phone-h: 541px; } }
@media (min-width: 1024px) { .projet { --phone-h: 606px; } }
.projet--compact { --phone-h: 541px; gap: 0.9rem; padding: clamp(1.1rem, 1.6vw, 1.5rem); border-radius: 22px; box-shadow: 0 10px 24px -20px rgba(17, 17, 17, 0.45); }
@media (min-width: 768px) { .projet--compact { --phone-h: 484px; } }
.projet--compact { --titre-cqi: 12.5cqi; }
.projet--compact .projet__tagline { font-size: var(--mp-fs-small); }
.projet__decor { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.projet__text { container-type: inline-size; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.projet__label {
  padding: 0.3rem 0.8rem; border-radius: var(--mp-radius-pill);
  background: rgba(127, 127, 127, 0.18);
  background: color-mix(in srgb, var(--card-fg) 14%, transparent);
  font-size: var(--mp-fs-small); font-weight: 600; line-height: 1.3;
}
/* Titre commun à toutes les cartes : Fraunces, grande taille, trait d'accent arrondi dessous ; seule la couleur varie (--card-title). */
.projet__name {
  margin-top: 0.7rem;
  font-family: "Fraunces", var(--mp-font-serif); font-weight: 700; letter-spacing: -0.01em;
  font-size: min(clamp(2.5rem, 1.4rem + 2.4vw, 3.75rem), var(--titre-cqi)); line-height: 1.08; color: var(--card-title);
  text-wrap: balance; overflow-wrap: break-word; hyphens: manual;
}
.projet__name::after { content: ""; display: block; width: 3rem; height: 5px; margin-top: 0.7rem; border-radius: 3px; background: var(--card-accent); }
.projet__tagline { margin-top: 0.9rem; max-width: 30ch; font-size: var(--mp-fs-body); line-height: 1.45; color: var(--card-fg); opacity: 0.9; }
/* Pastilles Info / Réseau / Action : active = orange médiappli (blanc, 4,6:1), inactive = contour fin grisé. */
.projet__fonctions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.9rem; padding: 0; list-style: none; }
.projet__fonction {
  padding: 0.2rem 0.7rem; border-radius: var(--mp-radius-pill);
  border: 1px solid rgba(127, 127, 127, 0.45);
  border: 1px solid color-mix(in srgb, var(--card-fg) 30%, transparent);
  font-size: var(--mp-fs-eyebrow); font-weight: 600; line-height: 1.4;
  color: var(--card-fg);
  color: color-mix(in srgb, var(--card-fg) 62%, var(--card-bg));
}
.projet__fonction.is-active { border-color: var(--mp-orange-deep); background: var(--mp-orange-deep); color: #fff; font-weight: 700; }
.projet__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 1rem; }
.projet__cta {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.55rem 1.1rem; border-radius: var(--mp-radius-pill);
  background: var(--card-accent); color: var(--card-on-accent);
  font-size: var(--mp-fs-small); font-weight: 700;
}
.projet__cta .arrow { transition: transform .3s ease; }
.projet:hover .projet__cta .arrow { transform: translateX(3px); }
.projet__soon { font-size: var(--mp-fs-small); font-weight: 600; opacity: 0.9; }
.projet__badge {
  padding: 0.4rem 0.8rem; border-radius: var(--mp-radius-pill);
  background: var(--card-fg); color: var(--card-bg);
  font-size: var(--mp-fs-eyebrow); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
}
.projet--soon { cursor: default; }

/* Disposition : étroite = texte puis téléphone ; large (dès 1100 px) = texte et téléphone côte à côte. */
.projet__stage { position: relative; display: grid; place-items: center; margin-top: auto; }

/* Smartphone entier, dérivé du téléphone du héros (cadre noir fin, encoche, reflet discret). */
.phone--sm {
  position: relative; z-index: 1; height: var(--phone-h); width: calc(var(--phone-h) * 9 / 19.5);
  container-type: inline-size;
  transform: rotate(var(--tilt, 0deg));
  transition: transform .4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Les cqw se lisent sur le conteneur : le cadre est donc un enfant du .phone--sm. */
.phone--sm__body {
  position: relative; height: 100%;
  padding: 2.4cqw; border-radius: 12cqw; background: #121212;
  box-shadow: inset 0 0 0 0.5cqw #3a3a3a, 0 26px 44px -18px rgba(0, 0, 0, 0.55);
}
.phone--sm__body::before {
  content: ""; position: absolute; z-index: 3; top: 4.4cqw; left: 50%; width: 26cqw; height: 6.4cqw;
  transform: translateX(-50%); border-radius: 4cqw; background: #121212;
}
.phone--sm__body::after {
  content: ""; position: absolute; z-index: 3; inset: 2.4cqw; border-radius: 9.8cqw; pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 32%);
}
/* Bande de barre d'état : l'îlot (fin à 10,8cqw du cadre) se détache sur une bande unie à la couleur du haut de la capture,
   la capture commence dessous. Si elle manque de hauteur, c'est le bas qui est recadré, jamais le haut. */
.phone--sm__screen {
  position: relative; height: 100%; overflow: hidden; border-radius: 9.8cqw; background: var(--status-bar, #f6f3ec);
  padding-top: 11.5cqw; display: flex; flex-direction: column;
}
.phone--sm__screen img { display: block; width: 100%; flex: 1 1 0; min-height: 0; object-fit: cover; object-position: top center; }
.phone--sm__screen .mk { flex: 1 1 0; min-height: 0; height: auto; padding-top: 9cqw; }
.projet:hover .phone--sm { transform: translateY(-8px) rotate(0deg); }
.projet__cta { transition: transform .3s ease; }
.projet:hover .projet__cta { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  .phone--sm, .projet__cta, .projet .arrow { transition: none; }
  .projet:hover .phone--sm, .projet:hover .projet__cta { transform: rotate(var(--tilt, 0deg)); }
  .projet:hover .phone--sm { transform: rotate(var(--tilt, 0deg)); }
  .projet:hover .projet__cta { transform: none; }
}

/* Identités : couleurs, typographie, décor. Contrastes AA contrôlés (texte et bouton). */
.projet--mist { --card-bg: #0F2A5A; --card-fg: #fff; --card-accent: #FFD23F; --card-on-accent: #0F2A5A; }
.projet--mist .projet__stage::before { content: ""; position: absolute; width: 110%; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 210, 63, 0.22); }
.projet--faire-commune .projet__stage::before { content: ""; position: absolute; width: 110%; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, 0.3); }
.projet--faire-commune { --card-title: #061630; --card-bg: #F2A0BE; --card-fg: #0B2D6B; --card-accent: #0B2D6B; --card-on-accent: #fff; }
.projet--vive-le-sommeil { --card-bg: #1E1B4B; --card-fg: #F4F1FF; --card-accent: #F7D774; --card-on-accent: #1E1B4B; }
.projet--espace-entre-les-wagons { --card-bg: #EFE3CF; --card-fg: #2B211A; --card-accent: #B5422A; --card-on-accent: #fff; }
.projet--faire-campagne { --card-bg: #1D3FBB; --card-fg: #fff; --card-accent: #E5384A; --card-on-accent: #fff; }
.projet--faire-campagne .projet__cta { background: #FFD23F; color: #0F2A5A; }
.projet--faire-residence { --card-bg: #FFD84A; --card-fg: #0F2F1E; --card-accent: #1F5637; --card-on-accent: #FDFBF6; }
.projet--faire-bassin { --card-title: #061630; --card-bg: #27B5AB; --card-fg: #072447; --card-accent: #072447; --card-on-accent: #fff; }
/* « Faire filière » : couleurs de la maquette (bleu nuit, turquoise) ; badge « Démonstration » discret, en contour. */
.projet--faire-filiere { --card-bg: #7A55B8; --card-fg: #fff; --card-accent: #F6EEDC; --card-on-accent: #2A1650; }
.projet--faire-filiere .projet__badge { background: transparent; color: var(--card-fg); border: 1px solid color-mix(in srgb, var(--card-fg) 45%, transparent); font-weight: 600; }
/* « Faire entreprise » : orange brûlé (distinct de l'orange de la marque), bouton crème ; Fraunces pour le titre. */
.projet--faire-entreprise { --card-bg: #C9480F; --card-fg: #fff; --card-accent: #F6EEDC; --card-on-accent: #3A1405; }
.projet--faire-entreprise .projet__fonction.is-active { border-color: #FFF3E6; background: #FFF3E6; color: #7A2A06; }
.projet--faire-entreprise .projet__badge { background: transparent; color: var(--card-fg); border: 1px solid color-mix(in srgb, var(--card-fg) 45%, transparent); font-weight: 600; }
.projet--faire-lycee { --card-bg: #F9F4E9; --card-fg: #0B2D6B; --card-accent: #0C5A9E; --card-on-accent: #fff; }
.projet--prime-de-risque { --card-bg: #101826; --card-fg: #E8EDF3; --card-accent: #F5B841; --card-on-accent: #101826; }
.exemples__more a { color: var(--mp-orange-deep); font-weight: 600; border-bottom: 1px solid currentColor; }
.exemples__more {
  margin-top: clamp(2rem, 3.6vw, 3rem);
  max-width: 60ch;
  padding-left: 1.25rem;
  border-left: 3px solid var(--mp-orange);
  color: var(--mp-ink-soft);
}

/* -------- Une médiappli pour tous les collectifs --------
   Dès 1100 px : six tuiles photo qui se chevauchent, inclinées en alternance ; le texte se
   révèle au survol et au focus. Tablette : 3 x 2. Mobile : carrousel, texte toujours visible. */
.pour-qui { padding-block: var(--mp-space-section); background: var(--mp-cream); }
.pour-qui__lead { margin-top: 1rem; max-width: 64ch; color: var(--mp-body); }
.tuiles { position: relative; max-width: 1440px; margin: clamp(2.5rem, 4.5vw, 4rem) auto 0; }
.tuiles__deco { position: absolute; z-index: 0; pointer-events: none; }
.tuiles__deco--a { top: -2.6rem; left: -0.5rem; width: 150px; }
.tuiles__deco--b { top: -3rem; right: 4%; width: 230px; }
.tuiles__track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tuile { --rot: -2deg; --dy: 0px; position: relative; z-index: 1; outline: none; transform: translateY(var(--dy)) rotate(var(--rot)); transition: transform .35s cubic-bezier(0.22, 0.61, 0.36, 1); }
.tuile:nth-child(2) { --rot: 1.5deg; --dy: 14px; }
.tuile:nth-child(3) { --rot: -1deg; }
.tuile:nth-child(4) { --rot: 2deg; --dy: 14px; }
.tuile:nth-child(5) { --rot: -1.5deg; }
.tuile:nth-child(6) { --rot: 1deg; --dy: 14px; }
.tuile:hover, .tuile:focus-visible { z-index: 3; transform: translateY(calc(var(--dy) - 10px)) rotate(var(--rot)); }
.tuile__card {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 18px;
  background: var(--mp-sand); box-shadow: 0 24px 40px -24px rgba(17, 17, 17, 0.55), 0 6px 14px -8px rgba(17, 17, 17, 0.25);
}
.tuile:focus-visible .tuile__card { outline: 3px solid var(--mp-orange); outline-offset: 3px; }
.tuile__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50%) 50%; }
.tuile--filieres { --pos: 76%; }
.tuile--associations { --pos: 22%; }
.tuile--citoyens { --pos: 60%; }
.tuile--causes { --pos: 42%; }
.tuile__pill {
  position: absolute; z-index: 2; top: 12px; left: 12px;
  display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.75rem 0.4rem 0.5rem;
  border-radius: 10px; background: var(--mp-white); box-shadow: 0 6px 16px -8px rgba(17, 17, 17, 0.45);
  font-size: 0.875rem; font-weight: 600; color: var(--mp-ink);
}
.tuile__picto {
  width: 22px; height: 22px; flex: none; background: var(--mp-orange);
  -webkit-mask: var(--picto) center / contain no-repeat; mask: var(--picto) center / contain no-repeat;
}
.tuile__body {
  position: absolute; z-index: 1; inset: auto 0 0 0; padding: 4rem 1rem 1.05rem;
  background: linear-gradient(to top, rgba(14, 11, 8, 0.94) 0%, rgba(14, 11, 8, 0.82) 58%, rgba(14, 11, 8, 0) 100%);
  color: var(--mp-white); opacity: 0; transform: translateY(10px);
  transition: opacity .35s ease, transform .35s ease;
}
.tuile:hover .tuile__body, .tuile:focus-visible .tuile__body { opacity: 1; transform: none; }
.tuile__who { font-size: 1rem; font-weight: 700; line-height: 1.25; }
.tuile__what { margin-top: 0.3rem; font-size: 0.8125rem; line-height: 1.4; }
.tuile__example { margin-top: 0.4rem; font-size: 0.75rem; line-height: 1.4; color: rgba(255, 255, 255, 0.82); }
@media (min-width: 1100px) {
  /* Six tuiles distinctes : gap net de 20 px, ratio portrait 3 / 4, hauteurs légèrement variées. */
  .tuiles__track { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; align-items: start; padding: 26px 0 40px; }
  .tuile { --rot: -1.5deg; --dy: 0px; --dh: 0px; container-type: inline-size; }
  .tuile:nth-child(2) { --rot: 1.5deg; --dy: 16px; --dh: 12px; }
  .tuile:nth-child(3) { --rot: -1.5deg; --dy: 0px; --dh: -12px; }
  .tuile:nth-child(4) { --rot: 1.5deg; --dy: 16px; --dh: 8px; }
  .tuile:nth-child(5) { --rot: -1.5deg; --dy: 0px; --dh: -8px; }
  .tuile:nth-child(6) { --rot: 1.5deg; --dy: 16px; --dh: 12px; }
  .tuile__card { aspect-ratio: auto; height: calc(100cqw * 4 / 3 + var(--dh)); }
  .tuile__body { padding: 3rem 0.75rem 0.8rem; }
  .tuile__who { font-size: clamp(0.8rem, 8cqw, 1rem); }
  .tuile__what { font-size: clamp(0.68rem, 6.4cqw, 0.8125rem); }
  .tuile__example { font-size: clamp(0.64rem, 5.8cqw, 0.75rem); }
  .tuile__pill { top: 10px; left: 10px; max-width: calc(100% - 20px); font-size: clamp(0.72rem, 7cqw, 0.875rem); padding: 0.3rem 0.55rem 0.3rem 0.4rem; gap: 0.35rem; }
}
}
@media (prefers-reduced-motion: reduce) {
  .tuile, .tuile__body { transition: none; }
  .tuile:hover, .tuile:focus-visible { transform: translateY(var(--dy)) rotate(var(--rot)); }
}
.pour-qui__end { margin-top: clamp(2.75rem, 4.5vw, 4rem); display: flex; flex-direction: column; align-items: center; gap: 0.75rem; text-align: center; }
.pour-qui__caption { text-wrap: balance; font-family: var(--mp-font-serif); font-size: clamp(1.2rem, 1.5vw, 1.6rem); line-height: 1.35; color: var(--mp-body); }
.pour-qui__also { max-width: 56ch; font-size: var(--mp-fs-small); color: #6E675F; }
.pour-qui__cta { margin-top: 0.75rem; }

/* -------- Un outil à votre image -------- */
.solution { padding-block: calc(var(--mp-space-section) * 0.3) 0; background: var(--mp-cream); }
.solution__grid { display: grid; grid-template-columns: 1fr; gap: clamp(2.5rem, 4vw, 4rem); align-items: center; }
@media (min-width: 900px) { .solution__grid { grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 4vw, 5rem); } }
.solution__title { margin-top: 1.1rem; }
.solution__lead { margin-top: 1.25rem; max-width: var(--mp-measure); color: var(--mp-ink-soft); }
.solution__lead strong { color: var(--mp-ink); }
.checklist { margin-top: 1.5rem; display: grid; gap: 0.7rem; }
.checklist li { display: flex; align-items: center; gap: 0.8rem; color: var(--mp-ink-soft); }
.checklist svg { flex: none; width: 1.15em; height: 1.15em; }
.solution__cta { margin-top: 2rem; }

/* Composition du visuel : tout est positionné en pourcentage du cadre. */
.outil { position: relative; width: 100%; max-width: 44rem; margin-inline: auto; aspect-ratio: 1.02; }
.outil__disc {
  position: absolute; right: 2%; top: 6%; width: 52%; aspect-ratio: 1;
  border-radius: 50%; background: var(--mp-orange);
}
.outil__photo { position: absolute; object-fit: cover; box-shadow: 0 18px 36px -24px rgba(17, 17, 17, 0.45); }
.outil__photo--a { left: 0; top: 17%; width: 37%; aspect-ratio: 1; border-radius: 28px 28px 28px 80px; }
.outil__photo--b { right: 0; bottom: 7%; width: 44%; aspect-ratio: 1.15; border-radius: 28px 80px 28px 28px; }
.outil__phone {
  position: absolute; left: 50%; top: 5%; height: 90%; width: auto; max-width: none;
  transform: translateX(-50%);
  filter: drop-shadow(0 22px 28px rgba(17, 17, 17, 0.28));
}
.outil__pill {
  position: absolute; z-index: 2;
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.65rem 0.9rem;
  background: var(--mp-white);
  border-radius: 12px;
  box-shadow: 0 14px 28px -14px rgba(17, 17, 17, 0.35);
  font-size: clamp(0.7rem, 1.05vw, 0.9rem);
  line-height: 1.2;
  color: var(--mp-ink);
}
.outil__pill svg { flex: none; width: 1.9em; height: 1.9em; }
.outil__pill span { display: grid; gap: 0.35rem; }
.outil__pill i { display: block; height: 0.5rem; width: 6em; border-radius: 4px; background: var(--mp-shell); }
.outil__pill--a { left: 1%; top: 4%; }
.outil__pill--b { right: 0; top: 40%; }
.outil__pill--c { left: 3%; bottom: 8%; }
.outil__pill--d { right: 6%; bottom: 0; }
.outil__strokes { position: absolute; width: 8%; height: auto; }
.outil__strokes--a { left: 0; bottom: 30%; }
.outil__strokes--b { right: 24%; top: 0; }
@media (max-width: 599px) {
  .outil { aspect-ratio: 0.92; }
  .outil__pill { padding: 0.45rem 0.6rem; gap: 0.4rem; font-size: 0.62rem; }
  .outil__pill i { width: 4.5em; height: 0.4rem; }
  .outil__pill--a { left: 0; top: 0; }
  .outil__pill--b { top: 34%; }
}

/* -------- Mentions légales -------- */
.legal { padding-block: var(--mp-space-section); }
.legal__inner { max-width: 60rem; }
.legal__title { margin-top: 1.1rem; }
.legal__inner p { margin-top: 1rem; max-width: 60ch; }
.legal__h {
  margin-top: clamp(2rem, 3.5vw, 3rem);
  font-family: var(--mp-font-serif);
  font-weight: 400;
  font-size: var(--mp-fs-angle);
  color: var(--mp-ink);
}
.legal__list {
  margin: 1rem 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.35rem 2rem;
}
.legal__list dt { font-weight: 600; color: var(--mp-ink); }
.legal__list dd { margin: 0 0 0.9rem; }
@media (min-width: 720px) {
  .legal__list { grid-template-columns: 16rem 1fr; }
  .legal__list dd { margin: 0; }
}
/* Valeur en attente : impossible à manquer. */
.a-completer {
  display: inline-block;
  padding: 0.05em 0.5em;
  background: var(--mp-orange-soft);
  border: 1px dashed var(--mp-orange);
  color: var(--mp-orange-deep);
  font-weight: 600;
  font-size: 0.92em;
}

/* -------- Pages juridiques : suite -------- */
.legal__inner a { color: #C2380F; text-decoration: underline; text-underline-offset: 3px; }
.legal__date { margin-top: 2.5rem; color: #6E675F; font-size: var(--mp-fs-small); }

/* -------- Contact --------
   Deux colonnes dès 900 px (présentation à gauche, formulaire à droite) ; sur mobile, le formulaire d'abord. */
.contact { padding-block: calc(var(--mp-space-section) * 0.6) var(--mp-space-section); }
.contact__head { padding-top: 5.5rem; max-width: 46rem; }
.contact__title { margin-top: 1rem; }
.contact__title em { font-family: "Fraunces", var(--mp-font-serif); font-style: italic; font-weight: 600; color: var(--mp-orange); }
.contact__lead { margin-top: 1rem; max-width: 52ch; color: var(--mp-body); }
.contact__grid { margin-top: clamp(2rem, 4vw, 3.25rem); display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 900px) {
  .contact__grid { grid-template-columns: 1fr minmax(0, 32rem); gap: clamp(2.5rem, 5vw, 5rem); }
  .contact__who { grid-column: 1; grid-row: 1; }
  .contact__card { grid-column: 2; grid-row: 1; }
}
.contact__card {
  padding: clamp(1.4rem, 3vw, 2.25rem); border-radius: 24px; background: var(--mp-white);
  border: 1px solid var(--mp-line); box-shadow: 0 24px 50px -32px rgba(17, 17, 17, 0.35);
}
.contact__who { display: flex; flex-direction: column; gap: 1rem; }
.contact__who p { max-width: 60ch; color: var(--mp-ink-soft); }
.contact__who-title { font-family: var(--mp-font-serif); font-weight: 400; font-size: var(--mp-fs-angle); color: var(--mp-ink); }
.contact__person { display: flex; align-items: center; gap: 1.1rem; }
.contact__portrait { flex: none; width: 112px; height: 112px; border-radius: 50%; object-fit: cover; box-shadow: 0 10px 24px -12px rgba(17, 17, 17, 0.5); }
.contact__name { font-weight: 700; font-size: 1.15rem; color: var(--mp-ink); }
.contact__role { margin-top: 0.15rem; font-size: var(--mp-fs-small); color: var(--mp-body); }
.contact__coords { margin-top: 0.5rem; font-size: var(--mp-fs-small); }
.contact__who a, .contact__privacy { color: #C2380F; text-decoration: underline; text-underline-offset: 3px; }
.contact__promise { font-family: var(--mp-font-serif); font-style: italic; font-size: 1.25rem; padding-left: 1rem; border-left: 3px solid var(--mp-orange); }

.contact__form { display: grid; gap: 1.1rem; }
.contact__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field label:not(.check) { display: block; margin-bottom: 0.35rem; font-weight: 600; font-size: var(--mp-fs-small); color: var(--mp-ink); }
.field input[type="text"], .field input[type="email"], .field select, .field textarea {
  width: 100%; padding: 0.8rem 0.95rem; border: 1.5px solid #8A8279; border-radius: 12px;
  background: var(--mp-cream); color: var(--mp-ink); font: inherit; font-size: 1rem;
}
.field textarea { resize: vertical; min-height: 9rem; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible, .check input:focus-visible {
  outline: 3px solid var(--mp-orange); outline-offset: 2px; border-color: var(--mp-ink);
}
.field--error input, .field--error select, .field--error textarea { border-color: #B3260F; background: #FFF4F0; }
.field__error { margin-top: 0.35rem; font-size: var(--mp-fs-small); font-weight: 600; color: #A8300F; }
.check { display: flex; align-items: flex-start; gap: 0.7rem; font-size: var(--mp-fs-small); cursor: pointer; }
.check input { flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.15rem; accent-color: var(--mp-orange); }
.contact__submit { justify-self: start; padding: 1rem 1.7rem; cursor: pointer; }
.contact__alert { margin-bottom: 1.1rem; padding: 0.85rem 1rem; border-radius: 12px; background: var(--mp-orange-soft); color: #7A2209; font-weight: 600; }
.contact__alert a { color: #7A2209; text-decoration: underline; }
.contact__thanks { display: grid; gap: 0.6rem; justify-items: start; }
.contact__thanks-title { font-family: var(--mp-font-serif); font-size: var(--mp-fs-angle); color: var(--mp-ink); }

/* -------- Carrousel mobile (sections « en service » et « tous les collectifs ») --------
   Sous 768 px : défilement horizontal natif avec accroche ; la carte suivante dépasse. */
.exemples, .pour-qui { overflow-x: clip; }
.carousel__dots { display: none; }
@media (max-width: 767px) {
  .carousel__track {
    display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: 20px;
    padding: 4px 20px 1.25rem; margin-inline: calc(50% - 50vw);
    scrollbar-width: none;
  }
  .carousel__track::-webkit-scrollbar { display: none; }
  .carousel__track > * { flex: 0 0 min(82vw, 340px); scroll-snap-align: start; }
  .carousel__track:focus-visible { outline: 2px solid var(--mp-orange); outline-offset: -2px; }
  .carousel__dots { display: flex; justify-content: center; gap: 0.1rem; }
  .carousel__dot { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; padding: 0; border: 0; background: none; cursor: pointer; }
  .carousel__dot span { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: rgba(17, 17, 17, 0.25); transition: background .3s, transform .3s; }
  .carousel__dot.is-active span { background: var(--mp-orange); transform: scale(1.25); }
  .carousel__dot:focus-visible { outline: 2px solid var(--mp-ink); outline-offset: -2px; border-radius: 50%; }

  .pour-qui__caption br { display: none; }
  /* Tuiles des collectifs : 70 vw, photo puis texte toujours visible (pas de survol au toucher). */
  .tuiles__deco { display: none; }
  .tuiles__track { padding-block: 14px 2.25rem; }
  .tuiles__track > .tuile { flex: 0 0 70vw; --dy: 0px; --rot: -1deg; }
  .tuiles__track > .tuile:nth-child(even) { --rot: 1deg; }
  .tuile:hover, .tuile:focus-visible { transform: rotate(var(--rot)); }
  .tuile__card { aspect-ratio: auto; background: var(--mp-white); }
  .tuile__photo { position: relative; height: auto; aspect-ratio: 4 / 3; }
  .tuile__body { position: static; padding: 0.9rem 1rem 1.1rem; background: none; color: var(--mp-ink); opacity: 1; transform: none; }
  .tuile__what { color: var(--mp-ink-soft); }
  .tuile__example { color: #6E675F; }
}

/* -------- Recherche intégrée -------- */
.search {
  width: min(640px, calc(100vw - 2rem)); max-width: none;
  margin: 12vh auto auto; padding: 0;
  border: 0; border-radius: var(--mp-radius-lg);
  background: var(--mp-white); color: var(--mp-ink);
  box-shadow: 0 30px 80px -30px rgba(17, 17, 17, 0.5);
}
.search::backdrop { background: rgba(17, 17, 17, 0.4); }
.search__panel { padding: 1rem 1.25rem 1.25rem; min-height: 9rem; }
.search__bar { display: flex; align-items: center; gap: 0.75rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--mp-line); }
.search__glass { display: inline-flex; flex: none; color: var(--mp-mute); }
.search__glass svg { width: 22px; height: 22px; }
.search__input {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: 0;
  font: inherit; font-size: 1.125rem; color: var(--mp-ink); padding: 0.4rem 0;
}
.search__input::placeholder { color: var(--mp-mute); }
.search__bar:focus-within { border-bottom-color: var(--mp-orange); }
.search__close {
  flex: none; border: 1px solid var(--mp-line); background: transparent; border-radius: var(--mp-radius-pill);
  padding: 0.4rem 0.9rem; font: inherit; font-size: 0.9375rem; color: var(--mp-ink);
}
.search__close:hover { border-color: var(--mp-ink); }
.search__close:focus-visible, .search__chip:focus-visible { outline: 2px solid var(--mp-orange); outline-offset: 2px; }
.search__suggestions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding-top: 1.1rem; }
.search__suggestions[hidden], .search__none[hidden], .search__results[hidden] { display: none; }
.search__hint { color: var(--mp-mute); font-size: 0.9375rem; }
.search__chip {
  border: 0; border-radius: var(--mp-radius-pill); background: var(--mp-shell); color: var(--mp-ink);
  padding: 0.4rem 0.95rem; font: inherit; font-size: 0.9375rem;
}
.search__chip:hover { background: var(--mp-sand); }
.search__none { margin: 1.1rem 0 0; color: var(--mp-body); }
.search__results { display: flex; flex-direction: column; padding-top: 0.6rem; }
.search__result {
  display: flex; flex-direction: column; gap: 0.1rem;
  padding: 0.7rem 0.75rem; border-radius: var(--mp-radius); color: var(--mp-ink);
}
.search__result strong { font-weight: 700; }
.search__result span { color: var(--mp-mute); font-size: 0.9375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search__result:hover, .search__result[aria-selected="true"] { background: var(--mp-warm); }
.search__result[aria-selected="true"] { outline: 2px solid var(--mp-orange); outline-offset: -2px; }
@media (max-width: 899px) {
  .search { width: 100%; height: 100vh; height: 100dvh; max-height: none; margin: 0; border-radius: 0; }
  .search__panel { min-height: 100%; }
}

/* -------- Tarifs -------- */

.t-hero h1, .t-sec h2, .t-sec h3, .t-close h2 { text-wrap: balance; }
.t-sec { padding-block: clamp(3rem, 6vw, 5rem); }
.t-sec--cream { background: var(--mp-cream); }
.t-sec--white { background: var(--mp-white); }
.t-sec--tight { padding-block: clamp(1.5rem, 3vw, 2.5rem); }
.t-title { font-family: var(--mp-font-serif); font-weight: 400; font-size: var(--mp-fs-angle); line-height: 1.15; color: var(--mp-ink); }
.t-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.t-badge { margin: 0; padding: 0.5rem 1.1rem; border-radius: var(--mp-radius-pill); background: var(--mp-orange); color: var(--mp-white); font-weight: 700; font-size: var(--mp-fs-small); }

/* 1.1 En-tête */
.t-hero { position: relative; isolation: isolate; overflow: hidden; color: var(--mp-white); background: #1b1a18; }
.t-hero__bg { position: absolute; inset: -24px; z-index: -2; width: calc(100% + 48px); height: calc(100% + 48px); max-width: none; object-fit: cover; filter: blur(14px); }
.t-hero__veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10, 10, 10, 0.78) 0%, rgba(10, 10, 10, 0.6) 100%); }
.t-hero__inner { display: grid; gap: 2rem; align-items: center; padding-block: clamp(3rem, 6vw, 5rem); }
.t-hero__title { margin-top: 0.8rem; color: var(--mp-white); }
.t-hero__title em { font-family: "Fraunces", var(--mp-font-serif); font-style: italic; font-weight: 600; color: var(--mp-orange); }
.t-hero__lead { margin-top: 1rem; max-width: 46ch; color: rgba(255, 255, 255, 0.88); }
.t-hero__pills { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.t-hero__pills li { padding: 0.45rem 1rem; border-radius: var(--mp-radius-pill); border: 1px solid rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.12); font-weight: 600; font-size: var(--mp-fs-small); }
.t-hero__pills li:last-child { background: var(--mp-orange); border-color: var(--mp-orange); }
.t-hero__device { --phone-h: 260px; position: relative; display: flex; justify-content: center; padding-bottom: 1.5rem; }
.t-hero__note { position: absolute; z-index: 2; left: calc(50% + 3.6rem); bottom: 18%; width: 6.5rem; margin: 0; transform: rotate(-7deg); font-family: "Caveat", "Segoe Script", cursive; font-weight: 600; font-size: 1.5rem; line-height: 1.05; color: var(--mp-white); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6); }
@media (min-width: 900px) {
  .t-hero__inner { width: min(1060px, 90vw); grid-template-columns: 1.1fr 0.9fr; gap: 3.5rem; }
  .t-hero__device { --phone-h: 380px; justify-content: center; padding-bottom: 0; }
  .t-hero__note { left: calc(50% + 6.4rem); width: 10rem; bottom: 20%; font-size: 2rem; }
}

/* 1.2 Formules */
.formules { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
@media (min-width: 900px) { .formules { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; } }
.formule { position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--mp-white); border: 1px solid var(--mp-line); border-radius: var(--mp-radius-lg); box-shadow: var(--mp-shadow-card); transition: transform .3s ease, box-shadow .3s ease; }
.formule:hover { transform: translateY(-4px); box-shadow: 0 26px 44px -24px rgba(17, 17, 17, 0.42); }
@media (prefers-reduced-motion: reduce) { .formule { transition: none; } .formule:hover { transform: none; } }
.formule--featured { border: 2px solid var(--mp-orange); }
.formule__flag { align-self: flex-start; margin-bottom: -4px; line-height: 1.25; padding: 0.3rem 0.8rem; border-radius: var(--mp-radius-pill); background: var(--mp-orange); color: var(--mp-white); font-size: var(--mp-fs-small); font-weight: 700; }
/* Bandeau coloré des cartes d'exemples (/tarifs, /le-principe) : 208 px (184 px mobile), téléphone entier à 84 % de la hauteur, centré, jamais rogné. */
.phone-card-visual { --band-h: 260px; --phone-h: calc(var(--band-h) * 0.9); position: relative; height: var(--band-h); display: flex; justify-content: center; align-items: center; background: radial-gradient(ellipse 60% 75% at 50% 50%, rgb(255 255 255 / 0.2), transparent 72%), var(--card-bg, var(--mp-warm)); }
.phone-card-visual .phone--sm { flex: none; }
.phone-card-visual .phone--sm__body { box-shadow: inset 0 0 0 0.5cqw #3a3a3a, 0 12px 22px -6px rgba(0, 0, 0, 0.5); }
.phone-card-visual--lg { --band-h: 320px; --phone-h: calc(var(--band-h) * 0.92); }
.formule__flag--spacer { visibility: hidden; }
@media (min-width: 900px) { .formule--featured .formule__body { padding-top: calc(clamp(1.25rem, 2vw, 2rem) - 1px); } }
@media (max-width: 899.98px) { .formule__flag--spacer { display: none; } }
@media (max-width: 767.98px) {
  .phone-card-visual { --band-h: 232px; --phone-h: calc(var(--band-h) * 0.91); }
  .phone-card-visual--lg { --band-h: 272px; --phone-h: calc(var(--band-h) * 0.9); }
  .formule__flag { margin-bottom: 0; }
}
.formule__body { display: flex; flex: 1; flex-direction: column; gap: 1rem; padding: clamp(1.25rem, 2vw, 2rem); }
.formule__name { font-family: var(--mp-font-serif); font-weight: 400; font-size: var(--mp-fs-angle); color: var(--mp-ink); }
.formule__hook { margin: 0; color: var(--mp-body); }
@media (min-width: 900px) { .formule__hook { min-height: 4.7em; } }
.formule__price { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; min-height: 3.4rem; align-content: flex-end; color: var(--mp-body); }
.formule__price strong { font-family: var(--mp-font-serif); font-weight: 700; font-size: clamp(2rem, 2.6vw, 2.75rem); line-height: 1.1; color: var(--mp-ink); }
.formule__list { list-style: none; margin: 0; padding: 1rem 0 0; border-top: 1px solid var(--mp-line); display: grid; gap: 0.6rem; }
.formule__list li { display: flex; gap: 0.6rem; align-items: flex-start; color: var(--mp-ink-soft); }
.check { flex: none; margin-top: 0.2em; color: var(--mp-orange-deep); }
.formule__examples { margin-top: auto; padding-top: 0.5rem; }
.formule__examples h3 { font-size: var(--mp-fs-eyebrow); letter-spacing: 0.14em; text-transform: uppercase; color: #6E675F; font-weight: 600; }
.formule__examples ul { list-style: none; margin: 0.6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip { display: inline-block; padding: 0.3rem 0.8rem; border-radius: var(--mp-radius-pill); background: var(--mp-orange-soft); color: #8F2A09; font-weight: 600; font-size: var(--mp-fs-small); text-decoration: none; }
a.chip:hover { background: #ffd6c1; }
.chip--soon { background: #ECE8E2; color: #5F5953; font-weight: 500; }
.chip small { font-size: 0.85em; }
.formule__suivi { margin: 0; font-size: var(--mp-fs-small); color: #6E675F; }
.tarifs__note { margin: 1.5rem 0 0; max-width: 62ch; color: var(--mp-body); }
.formule__cta { align-self: flex-start; }

/* 1.3 Dans chaque formule */
.commun { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 600px) { .commun { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .commun { grid-template-columns: repeat(4, 1fr); } }
.commun li { display: flex; flex-direction: column; align-items: flex-start; gap: 0.8rem; padding: 1.25rem; border-radius: var(--mp-radius-lg); background: var(--mp-cream); border: 1px solid var(--mp-line); font-weight: 600; color: var(--mp-ink); }
.commun__detail { display: block; margin-top: 0.3rem; font-size: 0.85rem; font-weight: 400; line-height: 1.4; color: var(--mp-body); }

/* Carte Associations (tarif solidaire) */
.formule__flag--assoc { background: var(--mp-orange-deep); }
.phone-card-visual--assoc { background: #1E3B2C; }
.formule__disc { display: grid; place-items: center; width: 150px; height: 150px; border-radius: 50%; background: #F6EEDC; }
.formule--assoc .formule__price span { font-size: var(--mp-fs-small); }
.formule__domains { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.formule__domains li { padding: 0.2rem 0.65rem; border: 1px solid var(--mp-line); border-radius: var(--mp-radius-pill); color: #6E675F; font-size: var(--mp-fs-small); line-height: 1.3; }
.formule__mention { margin: 0; font-size: var(--mp-fs-small); color: #6E675F; }
.formule--assoc .formule__cta { white-space: normal; text-align: left; }

/* Bande Sur mesure sous les cartes */
.sm-band { margin-top: 2rem; display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; padding: clamp(1.25rem, 2.5vw, 1.75rem); background: var(--mp-white); border: 1px solid var(--mp-line); border-radius: var(--mp-radius-lg); scroll-margin-top: calc(var(--mp-header-h, 84px) + 1rem); }
@media (min-width: 768px) { .sm-band { flex-direction: row; align-items: center; justify-content: space-between; gap: 2rem; } }
.sm-band__copy { display: grid; gap: 0.6rem; max-width: 70ch; }
.sm-band__copy p { margin: 0; color: var(--mp-body); }
.sm-band__title { font-family: var(--mp-font-serif); font-weight: 400; font-size: var(--mp-fs-card); color: var(--mp-ink); }
.sm-band__examples { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; font-size: var(--mp-fs-small); color: #6E675F; }
.sm-band__examples ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sm-band__cta { flex: none; }

/* 1.5 Frise */
.frise { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; position: relative; counter-reset: none; }
.frise li { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; row-gap: 0.2rem; align-items: start; color: var(--mp-body); }
.frise__n { grid-row: span 2; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--mp-orange); color: var(--mp-white); font-weight: 700; position: relative; z-index: 1; }
.frise strong { color: var(--mp-ink); font-size: 1.1rem; }
.frise li:not(:last-child)::after { content: ""; position: absolute; left: 1.35rem; top: 2.75rem; bottom: -1.5rem; width: 2px; background: var(--mp-line); }
@media (min-width: 800px) {
  .frise { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .frise li { grid-template-columns: 1fr; row-gap: 0.5rem; }
  .frise__n { grid-row: auto; }
  .frise li:not(:last-child)::after { left: 3.25rem; right: -2rem; top: 1.35rem; bottom: auto; width: auto; height: 2px; }
}

/* 1.6 TVA */
.tarifs__vat { margin: 0; display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.5rem; border-radius: var(--mp-radius-lg); background: var(--mp-orange-soft); color: var(--mp-ink); border-left: 4px solid var(--mp-orange); }
.tarifs__vat img { flex: none; }

/* 1.7 FAQ + portrait */
.faq-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; align-items: start; }
@media (min-width: 900px) { .faq-wrap { grid-template-columns: 1.5fr 1fr; gap: 4rem; } }
.faq details { margin-top: 0.75rem; border-bottom: 1px solid var(--mp-line); padding-bottom: 0.75rem; }
.faq .t-title + details { margin-top: 1.25rem; }
.faq summary { cursor: pointer; font-weight: 600; color: var(--mp-ink); padding-block: 0.5rem; }
.faq summary:focus-visible { outline: 2px solid var(--mp-orange); outline-offset: 3px; border-radius: 4px; }
.faq details p { margin-top: 0.4rem; max-width: 60ch; color: var(--mp-body); }
.portrait { display: flex; flex-direction: column; align-items: flex-start; gap: 0.8rem; padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: var(--mp-radius-lg); background: var(--mp-warm); border: 1px solid var(--mp-line); }
/* Médaillon d'origine : 96 px ; multiplié par 2,5 = 240 px. */
.portrait img { flex: none; width: 240px; height: 240px; border-radius: 50%; object-fit: cover; object-position: 50% 45%; margin-bottom: 0.4rem; }
.portrait h3 { font-family: var(--mp-font-serif); font-weight: 400; font-size: var(--mp-fs-card); color: var(--mp-ink); }
.portrait p { margin: 0; color: var(--mp-body); }

/* 1.8 Clôture */
.t-close { padding-block: clamp(3.5rem, 7vw, 6rem); background: var(--mp-bark-deep); color: var(--mp-white); text-align: center; }
.t-close .container { display: flex; flex-direction: column; align-items: center; gap: 1.75rem; }
.t-close__title { font-family: var(--mp-font-serif); font-weight: 400; font-size: var(--mp-fs-section); line-height: 1.12; color: var(--mp-white); }
.t-close__title em { font-family: "Fraunces", var(--mp-font-serif); font-style: italic; font-weight: 600; color: var(--mp-orange); }
.pour-qui__tarifs { margin-top: 0.5rem; }
.t-hero .eyebrow { color: rgba(255, 255, 255, 0.82); }

/* -------- Le principe -------- */

.p-hero h1, .p-sec h2, .p-sec h3 { text-wrap: balance; }
.p-sec { padding-block: clamp(3rem, 6vw, 5rem); }
.p-sec--cream { background: var(--mp-cream); }
.p-sec--white { background: var(--mp-white); }
.p-center { text-align: center; text-wrap: balance; margin-inline: auto; }
.p-note { margin: 1.75rem 0 0; max-width: 62ch; color: var(--mp-body); }

/* 1. En-tête : fond uni chaud, téléphone à droite (dessous sur mobile). */
.p-hero { background: var(--mp-warm); overflow: hidden; }
.p-hero__inner { display: grid; gap: 2.5rem; align-items: center; padding-block: clamp(3rem, 6vw, 5.5rem); }
.p-hero__eyebrow { color: #6E675F; }
.p-hero__title { margin-top: 0.8rem; font-size: var(--mp-fs-hero); }
.p-hero__title em { font-family: "Fraunces", var(--mp-font-serif); font-weight: 600; }
.p-hero__lead { margin-top: 1.1rem; max-width: 46ch; font-size: var(--mp-fs-body); color: var(--mp-body); }
.p-hero__device { --phone-h: 300px; display: flex; justify-content: center; }
@media (min-width: 900px) {
  .p-hero__inner { width: min(clamp(1040px, 66vw, 1400px), 90vw); grid-template-columns: minmax(0, 1fr) 280px; gap: 3rem; align-items: center; }
  .p-hero__device { --phone-h: 400px; }
}

/* 2. Définition */
.p-definition { margin: 0 auto; max-width: 34ch; text-align: center; text-wrap: balance; font-family: var(--mp-font-serif); font-size: var(--mp-fs-panel); line-height: 1.3; color: var(--mp-ink); }
.p-definition em { font-style: italic; color: var(--mp-orange-deep); }
.p-mobile { margin: 1.25rem auto 0; max-width: 52ch; text-align: center; text-wrap: balance; color: var(--mp-body); }

/* 3. Ingrédients */
.ingredients { list-style: none; margin: 2.25rem 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
@media (min-width: 900px) { .ingredients { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ingredient { display: flex; flex-direction: column; align-items: flex-start; gap: 0.7rem; padding: clamp(1.5rem, 2.5vw, 2.25rem); border-radius: var(--mp-radius-lg); background: var(--mp-white); border: 1px solid var(--mp-line); box-shadow: var(--mp-shadow-card); }
.ingredient__picto { width: 64px; height: 64px; }
.ingredient__title { font-family: var(--mp-font-serif); font-weight: 400; font-size: var(--mp-fs-card); color: var(--mp-ink); }
.ingredient p { margin: 0; color: var(--mp-body); }

/* 4. Comparatif : tableau dès 900 px, une carte par solution en dessous. */
.compare { margin-top: 2.25rem; }
.compare__table { display: none; width: 100%; border-collapse: separate; border-spacing: 0; }
.compare__table th, .compare__table td { padding: 0.95rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--mp-line); }
.compare__table thead th { font-family: var(--mp-font-serif); font-weight: 400; font-size: var(--mp-fs-card); color: var(--mp-ink); border-bottom-color: var(--mp-sand); }
.compare__table tbody th { font-weight: 600; color: var(--mp-ink); width: 26%; }
.compare__table td { color: var(--mp-body); }
.compare__table .is-mediappli { background: #FFF4EE; color: var(--mp-ink); font-weight: 600; border-inline: 2px solid var(--mp-orange); }
.compare__table thead .is-mediappli { border-top: 2px solid var(--mp-orange); border-radius: var(--mp-radius) var(--mp-radius) 0 0; color: #B8330F; }
.compare__table tbody tr:last-child .is-mediappli { border-bottom: 2px solid var(--mp-orange); border-radius: 0 0 var(--mp-radius) var(--mp-radius); }
.compare__cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.compare__card { padding: 1.25rem; border-radius: var(--mp-radius-lg); background: var(--mp-cream); border: 1px solid var(--mp-line); }
.compare__card.is-mediappli { background: #FFF4EE; border: 2px solid var(--mp-orange); }
.compare__card h3 { font-family: var(--mp-font-serif); font-weight: 400; font-size: var(--mp-fs-card); color: var(--mp-ink); }
.compare__card dl { margin: 0.75rem 0 0; display: grid; gap: 0.6rem; }
.compare__card dl div { padding-top: 0.6rem; border-top: 1px solid var(--mp-line); }
.compare__card dt { font-size: var(--mp-fs-small); color: #6E675F; }
.compare__card dd { margin: 0.15rem 0 0; font-weight: 600; color: var(--mp-ink); }
@media (min-width: 900px) {
  .compare__table { display: table; }
  .matrix, .compare__more { display: none; }
}

/* Pastilles de notation : n pleines sur 3 ; la forme (pleine ou vide) porte l'information. */
.rating { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; }
.rating__dot { box-sizing: border-box; width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid #857E74; background: transparent; }
.rating__dot.is-full { background: var(--mp-ink); border-color: var(--mp-ink); }
.rating--accent .rating__dot.is-full { background: var(--mp-orange); border-color: var(--mp-orange); }
.compare__legend { display: grid; grid-template-columns: repeat(2, max-content); justify-content: start; align-items: center; gap: 0.4rem 1.6rem; margin: 1rem 0 0; font-size: 0.8125rem; line-height: 1.4; color: var(--mp-body); }
.compare__key { display: inline-flex; align-items: center; gap: 0.45rem; white-space: nowrap; }
.compare__legend-note { grid-column: 1 / -1; }
@media (min-width: 900px) { .compare__legend { display: none; } }

/* Matrice compacte (sous 900 px) : critère sur toute la largeur, quatre cellules de pastilles dessous. */
.matrix { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; }
.matrix thead th { padding: 0.4rem 0.1rem 0.5rem; font-size: 0.8125rem; font-weight: 700; line-height: 1.2; text-align: center; color: var(--mp-ink); border-bottom: 2px solid var(--mp-sand); overflow-wrap: anywhere; }
.matrix thead .is-mediappli { background: #FFF4EE; color: #B8330F; border-radius: var(--mp-radius) var(--mp-radius) 0 0; }
.matrix__criterion { padding: 0.55rem 0 0; font-size: 0.875rem; font-weight: 400; line-height: 1.3; text-align: left; color: var(--mp-body); }
.matrix td { padding: 0.4rem 0 0.55rem; line-height: 1; text-align: center; border-bottom: 1px solid var(--mp-line); }
.matrix td .rating { gap: 3px; }
.matrix td.is-mediappli { background: #FFF4EE; }
.matrix tbody:last-of-type td.is-mediappli { border-radius: 0 0 var(--mp-radius) var(--mp-radius); }
.matrix tbody:last-of-type td { border-bottom: 0; }
.compare__more { margin-top: 1.25rem; }
.compare__more summary { cursor: pointer; font-weight: 600; color: var(--mp-orange-deep); padding-block: 0.4rem; }
.compare__more summary:focus-visible { outline: 2px solid var(--mp-orange); outline-offset: 3px; border-radius: 4px; }
.compare__more .compare__cards { margin-top: 1rem; }

.p-whatsapp { margin: 2.25rem auto 0; max-width: 62ch; text-align: center; }
.p-whatsapp__title { font-family: var(--mp-font-serif); font-weight: 400; font-size: var(--mp-fs-card); color: var(--mp-ink); }
.p-whatsapp p { margin: 0.6rem 0 0; color: var(--mp-body); }
.p-whatsapp .p-whatsapp__note { margin-top: 0.9rem; font-size: 0.8rem; color: var(--mp-mute); }

/* 5. Déroulé : frise des tarifs, quatre étapes. */
@media (min-width: 800px) { .frise--4 { grid-template-columns: repeat(4, 1fr); } }
.frise--4 li { align-content: start; }
.frise--4 strong { font-family: var(--mp-font-serif); font-weight: 400; font-size: var(--mp-fs-card); }

/* 6. Exemples vus de près */
.p-exemples { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
@media (min-width: 900px) { .p-exemples { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.p-exemple { display: flex; flex-direction: column; overflow: hidden; background: var(--mp-white); border: 1px solid var(--mp-line); border-radius: var(--mp-radius-lg); box-shadow: var(--mp-shadow-card); }
.p-exemple__body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 0.6rem; padding: clamp(1.25rem, 2vw, 1.75rem); }
.p-exemple__label { font-size: var(--mp-fs-eyebrow); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: #6E675F; }
.p-exemple__name { font-family: var(--mp-font-serif); font-weight: 400; font-size: var(--mp-fs-card); color: var(--mp-ink); }
.p-exemple p { margin: 0; color: var(--mp-body); }
.p-exemple .link-arrow { margin-top: auto; }
.link-arrow:focus-visible { outline: 2px solid var(--mp-orange); outline-offset: 4px; border-radius: 4px; }

/* 7. Clôture */
.p-close__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.9rem; }

/* Lien vers le principe depuis les tarifs */
.t-hero__lead a { color: var(--mp-white); text-decoration: underline; text-decoration-color: var(--mp-orange); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.t-hero__lead a:hover { text-decoration-color: var(--mp-white); }
.t-hero__lead a:focus-visible { outline: 2px solid var(--mp-white); outline-offset: 3px; border-radius: 3px; }

/* Carrousel des formules sous 768 px : onglets, défilement scroll-snap, points */
.fcar__tabs, .fcar__dots { display: none; }
@media (max-width: 767.98px) {
  .fcar__tabs { display: flex; flex-wrap: nowrap; gap: 0.4rem; margin-bottom: 1rem; }
  .fcar__tab { padding: 0.5rem 0.85rem; white-space: nowrap; border-radius: var(--mp-radius-pill); background: var(--mp-white); border: 1px solid var(--mp-line); color: var(--mp-ink); font-weight: 600; font-size: var(--mp-fs-small); text-decoration: none; }
  .fcar__tab--assoc { background: #1E3B2C; border-color: #1E3B2C; color: #F6EEDC; }
  .fcar__tab.is-active { background: var(--mp-ink); border-color: var(--mp-ink); color: var(--mp-white); }
  .fcar__tab:focus-visible { outline: 2px solid var(--mp-orange); outline-offset: 2px; }
  .fcar .formules { display: flex; gap: 16px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; scrollbar-width: none; margin-inline: calc(-24px - 5vw); padding: 0.5rem calc(24px + 5vw) 1rem; scroll-padding-inline: calc(24px + 5vw); align-items: flex-start; transition: height .25s ease; }
  .fcar .formules::-webkit-scrollbar { display: none; }
  .fcar .formule { flex: 0 0 86%; scroll-snap-align: start; }
  .fcar .formule:hover { transform: none; }
  .fcar__dots { display: flex; justify-content: center; gap: 0.6rem; margin-bottom: 1rem; }
  .fcar__dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: rgba(17, 17, 17, 0.25); transition: background .3s, transform .3s; }
  .fcar__dot.is-active { background: var(--mp-orange); transform: scale(1.25); }
}
@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) { .fcar .formules { scroll-behavior: auto; } }

/* Listes repliées des cartes (Départ, Média) : sous 768 px et seulement avec JavaScript (classe « js » de <html>) */
.formule__more { display: none; }
@media (max-width: 767.98px) {
  .js .formule__more { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.6rem; padding: 0.35rem 0; background: none; border: 0; font: inherit; font-size: var(--mp-fs-small); font-weight: 600; color: var(--mp-orange-deep); cursor: pointer; }
  .js .formule__more:hover { text-decoration: underline; text-underline-offset: 3px; }
  .js .formule__more:focus-visible { outline: 2px solid var(--mp-orange); outline-offset: 2px; border-radius: 3px; }
  .formule__more-arrow { transition: transform .2s ease; }
  .formule__fold.is-open .formule__more-arrow { transform: rotate(180deg); }
  .js .formule__fold:not(.is-open) .formule__row--extra { display: none; }
}
@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) { .formule__more-arrow, .fcar .formules { transition: none; } }

/* /tarifs en version mobile compacte (sous 768 px) */
@media (max-width: 767.98px) {
  .t-hero__device { display: none; }
  .t-hero__inner { padding-block: 40px 32px; gap: 0; }
  .t-hero__lead { margin-top: 0.7rem; }
  .t-hero__pills { margin-top: 1rem; gap: 0.5rem; }
  .t-hero__pills li { padding: 0.3rem 0.8rem; }
  .t-sec { padding-block: 40px; }
  .t-sec--tight { padding-block: 24px; }
  .t-close { padding-block: 40px; }
  .formule__disc { width: 128px; height: 128px; }
  .commun { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin-top: 1.25rem; }
  .commun li { gap: 0.5rem; padding: 14px; font-size: 0.875rem; line-height: 1.3; overflow-wrap: anywhere; }
  .commun li img { width: 28px; height: 28px; }
  .commun__detail { font-size: 0.75rem; line-height: 1.3; margin-top: 0.2rem; }
  .tarifs__note { margin-top: 1rem; }
  .sm-band { margin-top: 1.5rem; }
  .formule__body { gap: 0.75rem; padding: 1.1rem; }
  .formule__price { min-height: 0; }
  .formule__list { padding-top: 0.75rem; gap: 0.45rem; }
  .formule__examples { padding-top: 0; }
  .frise { margin-top: 1.25rem; gap: 1rem; }
  .frise li:not(:last-child)::after { bottom: -1rem; }
  .faq-wrap { gap: 1.5rem; }
  .faq .t-title + details { margin-top: 0.75rem; }
  .sm-band { gap: 0.9rem; padding: 1.1rem; }
  .tarifs__vat { padding: 0.9rem 1rem; }
  .tarifs__note { font-size: 0.875rem; line-height: 1.5; }
  .t-hero__lead { font-size: 0.95rem; line-height: 1.5; }
  .frise { gap: 0.8rem; margin-top: 1rem; }
  .frise strong { font-size: 1rem; }
  .frise__n { width: 2.25rem; height: 2.25rem; }
  .frise li:not(:last-child)::after { left: 1.1rem; top: 2.25rem; }
  .tarifs__vat img { width: 32px; height: 32px; }
  .t-close .container { gap: 1.25rem; }
  .t-close { padding-block: 32px; }
  .faq details { padding-block: 0.15rem; }
  .faq summary { padding-block: 0.7rem; }
  .t-sec { padding-block: 36px; }
  .t-head { gap: 0.6rem 1rem; }
  .formule__hook { font-size: 0.95rem; line-height: 1.45; }
  .formule__name { line-height: 1.1; }
  .faq .t-title + details { margin-top: 0.5rem; }
  .formule__list li { line-height: 1.4; }
  .sm-band { margin-top: 1rem; }
  .t-close { padding-block: 28px; }
  .frise { gap: 0.65rem; }
}

/* ==========================================================================
   Raccords des pages composées de blocs (mode édition, ADAPTATIONS.md).
   Sans effet visible sur le rendu d'origine : ils recollent des sections devenues
   distinctes et habillent les boutons « Modifier » réservés aux membres.
   ========================================================================== */

/* Accueil : « Appel » suit « Pour qui » sur le même fond, comme la fin de section d'origine. */
.appel { padding-block: var(--mp-space-section); background: var(--mp-cream); }
.appel .pour-qui__end { margin-top: 0; }
.pour-qui:has(+ .appel), .mp-bloc:has(> .pour-qui):has(+ .mp-bloc > .appel) .pour-qui { padding-bottom: 0; }
.pour-qui + .appel, .mp-bloc:has(> .pour-qui) + .mp-bloc > .appel { padding-top: 0.75rem; }
.appel__titre { margin: 0; }

/* Contact : en-tête et formulaire en deux sections, espacements d'origine. */
.contact--entete { padding-bottom: 0; }
.contact--formulaire { padding-top: 0; }

/* Capture d'écran choisie en mode édition pour le téléphone de l'en-tête. */
.phone__capture { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

/* Boutons « Modifier » et « Ajouter » posés sur les contenus, membres en mode édition seulement. */
.mp-modifier {
  position: relative; z-index: 3; display: inline-flex; align-self: flex-start; justify-self: start; width: fit-content; align-items: center; gap: 6px; margin-top: 0.6rem;
  padding: 6px 12px; border-radius: 999px; background: #F2B84B; color: #1B1405;
  font: 600 14px/1.2 var(--mp-font-sans, system-ui, sans-serif); text-decoration: none; box-shadow: 0 4px 14px -6px rgba(0, 0, 0, 0.45);
}
.mp-modifier:hover { background: #F6C866; }
.mp-modifier:focus-visible { outline: 3px solid #111111; outline-offset: 2px; }
.mp-modifier .ma-icone { width: 16px; height: 16px; }
.mp-modifier--ajouter { margin: 1rem auto 0; display: flex; width: fit-content; }

/* Pied de page : retour au mode édition (membre qui voit le site comme le public). */
.site-footer__edition-form { margin-top: 1.5rem; text-align: center; }
.site-footer__edition {
  padding: 8px 16px; border-radius: 999px; border: 1px solid currentColor; background: transparent; color: inherit;
  font: inherit; font-size: 0.875rem; cursor: pointer;
}
.site-footer__edition:focus-visible { outline: 3px solid var(--mp-orange); outline-offset: 2px; }

/* Messages de l'administration (connexion, déconnexion). */
.mp-messages { padding-top: 1rem; }
.mp-message { margin: 0; padding: 0.75rem 1rem; font-size: 1rem; line-height: 1.4; border-radius: 12px; background: var(--mp-orange-soft, #FFE7DA); color: var(--mp-ink); font-weight: 600; }
.mp-message--info { background: var(--mp-warm); }

/* Vous gardez la main (édition autonome) : quatre points sur deux colonnes, captures du mode édition
   dans des fenêtres d'écran en composition décalée ; une colonne sous 900 px, captures sous les points. */
.autonomie { padding-block: var(--mp-space-section); background: var(--mp-warm); scroll-margin-top: var(--mp-header-h, 84px); }
.autonomie__lead { margin-top: 1.25rem; max-width: var(--mp-measure); color: var(--mp-body); }
.autonomie__points { margin-top: clamp(1.75rem, 3vw, 2.5rem); display: grid; gap: 1.5rem clamp(1.5rem, 3vw, 2.5rem); max-width: 68rem; }
@media (min-width: 600px) { .autonomie__points { grid-template-columns: repeat(2, 1fr); } }
.autonomie__point { display: grid; grid-template-columns: 3.25rem 1fr; gap: 1rem; align-items: start; color: var(--mp-body); }
.autonomie__point .picto { width: 3.25rem; }
.autonomie__corps { display: grid; grid-template-columns: auto 1fr; column-gap: 0.6rem; align-items: start; }
.autonomie__corps > p { grid-column: 1 / -1; }
.autonomie__titre-point { font-family: var(--mp-font-serif); font-weight: 400; font-size: var(--mp-fs-card); line-height: 1.2; color: var(--mp-ink); margin-bottom: 0.35rem; }
.autonomie__num {
  display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; align-self: start; margin-top: calc(var(--mp-fs-card) * 0.6 - 0.75rem);
  border-radius: 50%; background: var(--mp-orange-deep); color: var(--mp-white);
  font-family: var(--mp-font-sans); font-size: 0.8rem; font-weight: 700; line-height: 1;
}
/* Trois cartes : photo 2/1, pastille, schéma 4/3 sur fond crème, légende. En rangée dès 1280 px, pour garder des libellés
   de schéma de 14 px au moins ; en dessous, une colonne. */
.autonomie__cartes {
  list-style: none; margin: clamp(2.5rem, 4vw, 3.5rem) auto 0; padding: 0;
  display: grid; gap: clamp(1.5rem, 2.5vw, 2rem); max-width: 34rem;
}
@media (min-width: 1280px) { .autonomie__cartes { grid-template-columns: repeat(3, 1fr); max-width: none; } }
.autonomie__cartes > li { display: flex; }
.autonomie__carte {
  margin: 0; flex: 1; display: flex; flex-direction: column; overflow: hidden;
  background: var(--mp-white); border: 1px solid var(--mp-line); border-radius: var(--mp-radius-lg); box-shadow: var(--mp-shadow-card);
}
.autonomie__photo { position: relative; }
.autonomie__photo .autonomie__image { aspect-ratio: 2 / 1; }
.autonomie__image { display: block; width: 100%; height: auto; object-fit: cover; }
.autonomie__num--photo {
  position: absolute; left: 0.85rem; bottom: 0.85rem; margin: 0; width: 2rem; height: 2rem; font-size: 0.95rem;
  box-shadow: 0 0 0 3px var(--mp-white);
}
.autonomie__schema { background: var(--mp-cream); border-top: 1px solid var(--mp-line); }
.autonomie__schema .autonomie__image { aspect-ratio: 4 / 3; }
.autonomie__legende { margin-top: auto; padding: 0.9rem 1.1rem 1.1rem; font-size: var(--mp-fs-small); font-weight: 600; color: var(--mp-ink-soft); }
.autonomie__suite { margin-top: clamp(2rem, 3.5vw, 2.75rem); text-align: center; }
.autonomie__note { color: var(--mp-ink-soft); font-weight: 600; }
.autonomie__cta { margin-top: 1.25rem; }
@media (max-width: 599px) { .autonomie__cartes { margin-inline: -24px; } }
.solution__plus { margin-top: 1rem; font-size: var(--mp-fs-small); }
.solution__plus a { color: var(--mp-ink-soft); text-decoration: underline; text-underline-offset: 3px; }
.solution__plus a:hover { color: var(--mp-orange-deep); }