/* =========================================================
   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 --------
   Composition HTML/CSS/SVG d'après docs/maquettes/maquette-hero-2026-10-30-v1.png (1672 x 860 utiles). Bureau (≥ 1100 px) : tout est placé en pourcentages de .hero__scene,
   polices et pictogrammes en cqw : la composition se met à l'échelle comme une image, sans dépasser la hauteur de la fenêtre. En dessous : pile verticale
   (tablette : trois groupes côte à côte ; mobile : un verbe par ligne), entonnoir court. Fond #FAF5EB raccordé à la section suivante. */
.hero {
  --hero-navy: #14183A; --hero-orange: #F04E23; --hero-bord: #E6DDD0;
  position: relative; padding-top: 1rem; overflow: hidden; color: var(--hero-navy);
  background: linear-gradient(180deg, #FAF5EB calc(100% - 3rem), var(--mp-cream) 100%);
}
.hero__scene { container-type: inline-size; position: relative; display: flex; flex-direction: column; align-items: center; width: min(100%, 44rem); margin-inline: auto; padding: 0.5rem 1.25rem 2rem; }
.hero__titre { align-self: flex-start; margin: 0 0 1.5rem; font-family: "Fraunces", var(--mp-font-serif); font-weight: 700; font-size: clamp(2.5rem, 11.5vw, 3.5rem); line-height: 1.04; letter-spacing: -0.025em; color: var(--hero-navy); text-wrap: balance; }
.hero__souligne { position: relative; display: inline-block; }
.hero__trait { position: absolute; left: 0; bottom: -0.16em; width: 100%; height: 0.2em; overflow: visible; }
.hero__trait path { fill: none; stroke: var(--hero-orange); stroke-width: 4px; stroke-linecap: round; }
.hero__point { color: var(--hero-orange); }
.hero__feuilles { display: none; }

.hero__groupes { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 1.1rem; }
.groupe { display: grid; justify-items: center; }
.groupe__verbe { margin: 0; font-family: "Caveat", "Segoe Script", cursive; font-weight: 600; font-size: 2.1rem; line-height: 1; color: var(--hero-orange); }
.groupe__accolade { width: 100%; height: 14px; margin: 0.2rem 0 0.5rem; overflow: visible; }
.groupe__accolade path { fill: none; stroke: var(--hero-orange); stroke-width: 2.5px; stroke-linecap: round; }
.groupe__outils { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.outil {
  --r: 0deg; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; min-height: 8.5rem; padding: 0.75rem 0.5rem;
  border-radius: 1.1rem; background: var(--fond); text-align: center; transform: rotate(var(--r)); box-shadow: 0 6px 14px -8px rgba(20, 24, 58, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.55) inset;
}
.outil:focus-visible { outline: 3px solid var(--hero-navy); outline-offset: 3px; }
.outil__icone { flex: none; width: 2.6rem; height: 2.6rem; color: var(--hero-navy); }
.outil__libelle { font-family: var(--mp-font-sans); font-weight: 600; font-size: 0.9rem; line-height: 1.15; color: var(--hero-navy); }
.outil--jaune { --fond: #FBE08A; --r: -4deg; } .outil--bleu { --fond: #BFD9F7; --r: 1.5deg; } .outil--rose { --fond: #F8C4CC; --r: 2deg; }
.outil--vert { --fond: #BFE6CB; --r: -1.5deg; } .outil--peche { --fond: #FBCBA8; --r: -3deg; } .outil--violet { --fond: #D8C9F2; --r: 2deg; }

.hero__entonnoir { display: block; overflow: visible; }
.hero__entonnoir--large, .hero__entonnoir--mobile { display: none; }
.hero__entonnoir--court { width: min(100%, 17rem); height: auto; margin: -0.25rem auto 0; }
.ruban { stroke-linecap: butt; opacity: 0.92; }
.hero__legende { margin: 0.75rem 0 0; max-width: 18rem; text-align: center; font-family: "Caveat", "Segoe Script", cursive; font-weight: 500; font-size: 1.55rem; line-height: 1.15; color: var(--hero-navy); }
.hero__fleche { display: none; }

.hero__telephone { position: relative; margin: 1.25rem 0 0; width: min(15rem, 62%); }
.telephone {
  position: relative; aspect-ratio: 0.5; overflow: hidden; border: 0.6rem solid #1D2340; border-radius: 2.2rem; background: #1D2340;
  box-shadow: 0 24px 40px -18px rgba(20, 24, 58, 0.55), 0 0 0 2px #3A4066; transform: rotate(5deg);
}
.telephone__ilot { position: absolute; z-index: 2; top: 0.35rem; left: 50%; width: 28%; height: 0.8rem; border-radius: 1rem; background: #0B0E22; transform: translateX(-50%); }
.telephone__ecran { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; border-radius: 1.6rem; background: #fff; }

/* Bureau seulement (≥ 1024 px) : display: none écarte aussi le bloc de l'arbre d'accessibilité en dessous. */
.hero__profils { display: none; width: 100%; margin-top: 1.75rem; }
@media (min-width: 1024px) { .hero__profils { display: block; } }
.hero__question { margin: 0 0 0.6rem; font-family: var(--mp-font-sans); font-weight: 700; font-size: 1.15rem; color: var(--hero-navy); }
.pastilles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem; }
.pastille {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem; min-height: 4.4rem; padding: 0.5rem 0.4rem; border: 1px solid var(--hero-bord); border-radius: 0.9rem;
  background: #fff; color: var(--hero-navy); text-align: center; box-shadow: 0 2px 6px -3px rgba(20, 24, 58, 0.25); transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.pastille:hover, .pastille:focus-visible { transform: translateY(-2px); border-color: var(--hero-navy); box-shadow: 0 8px 14px -8px rgba(20, 24, 58, 0.45); }
.pastille:focus-visible { outline: 3px solid var(--hero-navy); outline-offset: 2px; }
.pastille__icone { display: inline-flex; }
.pastille__libelle { font-family: var(--mp-font-sans); font-weight: 600; font-size: 0.9rem; line-height: 1.1; }

.hero__boutons { display: grid; gap: 0.75rem; width: 100%; margin-top: 1.5rem; }
.hero__bouton { justify-content: center; padding: 1.05rem 1.5rem; font-size: 1rem; font-weight: 700; }
.hero .btn--orange { background: var(--mp-orange-deep); }  /* texte blanc à 4,6:1 (l'orange vif n'atteint que 3,6:1) */
.hero .btn--orange:hover { background: #B8340F; }
.hero__bouton--contour { background: transparent; color: var(--hero-navy); border: 2px solid var(--hero-navy); }
.hero__bouton--contour:hover { background: var(--hero-navy); color: #fff; }
.hero__bouton:focus-visible { outline: 3px solid var(--hero-navy); outline-offset: 3px; }

@media (min-width: 640px) {
  .hero__scene { width: min(100%, 48rem); }
  .hero__groupes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem; }
  .groupe { min-width: 0; }
  .groupe__verbe { font-size: 2.2rem; }
  .groupe__outils { gap: 0.5rem; }
  .outil { min-height: 8.5rem; padding-inline: 0.3rem; }
  .outil__icone { width: 2.2rem; height: 2.2rem; }
  .outil__libelle { font-size: 0.8rem; overflow-wrap: anywhere; }
  .pastilles { grid-template-columns: repeat(4, 1fr); }
  .hero__boutons { grid-auto-flow: column; width: auto; }
}

/* Mobile (< 640 px) : trois colonnes égales, un verbe au-dessus de deux tuiles empilées ; entonnoir dédié aux positions réelles des colonnes. Les 640-1099 px gardent leur disposition. */
@media (max-width: 639px) {
  .hero__groupes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.375rem; width: calc(100% + 0.5rem); margin-inline: -0.25rem; }
  .groupe { min-width: 0; }
  .groupe__verbe { font-size: 1.6rem; white-space: nowrap; }
  .groupe__accolade { height: 10px; margin: 0.15rem 0 0.4rem; }
  .groupe__accolade path { stroke-width: 2px; }
  .groupe__outils { grid-template-columns: minmax(0, 1fr); gap: 0.375rem; }
  .hero .outil { min-height: 5.6rem; aspect-ratio: auto; gap: 0.3rem; padding: 0.5rem 0.25rem; border-radius: 0.9rem; }
  .outil--jaune, .outil--vert, .outil--peche { --r: -1deg; }
  .outil--bleu, .outil--rose, .outil--violet { --r: 1deg; }
  .outil__icone { width: 1.75rem; height: 1.75rem; }
  .outil__libelle { font-size: 0.8125rem; line-height: 1.12; overflow-wrap: anywhere; }
  .hero__entonnoir--court { display: none; }
  .hero__entonnoir--mobile { display: block; width: calc(100% + 0.5rem); max-width: none; height: auto; margin: -0.1rem -0.25rem 0; }
}

@media (min-width: 1100px) {
  .hero { padding-top: 0.5rem; background: linear-gradient(180deg, #FAF5EB calc(100% - 4rem), var(--mp-cream) 100%); }
  /* Largeur plafonnée pour que la composition entière tienne dans la fenêtre (rapport 1672 / 860). */
  .hero__scene { display: block; width: min(100% - 2rem, 1560px, calc((100vh - var(--mp-header-h) - 1rem) * 1.944)); width: min(100% - 2rem, 1560px, calc((100svh - var(--mp-header-h) - 1rem) * 1.944)); aspect-ratio: 1672 / 860; padding: 0; }
  .hero__scene > * { position: absolute; margin: 0; }
  .hero__titre { left: 3.95%; top: 3%; font-size: 4.9cqw; line-height: 1.05; text-wrap: nowrap; }
  .hero__trait path { stroke-width: 0.33cqw; }
  .hero__feuilles { display: block; z-index: 0; fill: #FBD7BF; opacity: 0.85; }
  .hero__feuilles .tige { fill: none; stroke: #FBD7BF; stroke-width: 5px; stroke-linecap: round; }
  .hero__feuilles--droite { right: -1%; top: 14%; width: 36%; }
  .hero__feuilles--gauche { left: -1%; top: 53%; width: 15%; }

  .hero__groupes { z-index: 2; left: 2%; top: 20.5%; width: 56%; gap: 1.5cqw; }
  .groupe__verbe { font-size: 3.5cqw; margin-bottom: 0.1cqw; }
  .groupe__accolade { height: 1.55cqw; margin: 0.3cqw 0 0.7cqw; }
  .groupe__accolade path { stroke-width: 0.2cqw; }
  .groupe__outils { gap: 0.55cqw; }
  .outil { min-height: 0; aspect-ratio: 0.8; gap: 0.7cqw; padding: 0.6cqw 0.4cqw; border-radius: 1.3cqw; }
  .outil__icone { width: 3.6cqw; height: 3.6cqw; }
  .outil__libelle { font-size: max(11px, 1.15cqw); }

  .hero__entonnoir--court { display: none; }
  .hero__entonnoir--large { z-index: 1; display: block; left: 0; top: 30.2%; width: 71.2%; height: auto; }

  .hero__legende { z-index: 2; left: 40.5%; top: 66.5%; width: 24%; max-width: none; text-align: left; font-size: 1.9cqw; transform: rotate(-6deg); }
  .hero__fleche { z-index: 2; display: block; left: 61%; top: 57%; width: 6.6%; height: auto; overflow: visible; }
  .hero__fleche path { fill: none; stroke: var(--hero-orange); stroke-width: 0.22cqw; stroke-linecap: round; stroke-linejoin: round; }

  .hero__telephone { z-index: 3; left: 69.4%; top: 3.2%; width: 22.4%; }
  .hero .telephone { aspect-ratio: 0.585; border-width: 0.7cqw; border-radius: 3.1cqw; transform: rotate(7deg); }
  .hero .telephone__ilot { top: 0.45cqw; height: 1.2cqw; }
  .hero .telephone__ecran { border-radius: 2.4cqw; }

  .hero__profils { z-index: 2; left: 4%; top: 79%; width: 63.2%; }
  .hero__question { margin-bottom: 0.7cqw; font-size: 1.65cqw; }
  .pastilles { display: flex; gap: 0.6cqw; }
  .pastilles li { flex: 1 1 0; display: flex; }
  .pastilles li:nth-child(6) { flex-grow: 1.35; }
  .pastille { flex: 1; min-height: 5.6cqw; gap: 0.35cqw; padding: 0.4cqw 0.3cqw; border-radius: 1.1cqw; }
  .pastille__icone svg { width: 2.5cqw; height: 2.5cqw; }
  .pastille__libelle { font-size: max(11px, 1.08cqw); }

  .hero__boutons { z-index: 4; left: 72.2%; top: 82.8%; width: 24.4%; display: grid; grid-auto-flow: row; gap: 1.1cqw; margin: 0; }
  .hero__bouton { padding: 1.1cqw 1.2cqw; font-size: max(13px, 1.17cqw); white-space: nowrap; }
}

/* Animation d'arrivée (CSS seul) : les tuiles glissent vers l'entonnoir, les rubans s'y engouffrent, puis le téléphone s'illumine. Statique si le mouvement est réduit. */
@media (prefers-reduced-motion: no-preference) {
  .outil { animation: tuile-entree 0.75s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: calc(var(--n, 0) * 90ms); }
  .ruban { animation: ruban-entree 1.1s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay: calc(0.7s + var(--i, 0) * 110ms); }
  .ruban-fin, .etincelles { animation: apparition 0.6s ease both; animation-delay: 1.7s; }
  .telephone { animation: telephone-lueur 1.5s ease 1.9s both; }
}
@keyframes tuile-entree { from { opacity: 0; transform: translateX(-2.5rem) rotate(var(--r)); } to { opacity: 1; transform: rotate(var(--r)); } }
@keyframes ruban-entree { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }
@keyframes apparition { from { opacity: 0; } to { opacity: 1; } }
@keyframes telephone-lueur {
  from { filter: brightness(0.7) saturate(0.7); box-shadow: 0 24px 40px -18px rgba(20, 24, 58, 0.55), 0 0 0 2px #3A4066; }
  60% { filter: brightness(1.08); box-shadow: 0 24px 40px -18px rgba(20, 24, 58, 0.55), 0 0 0 2px #3A4066, 0 0 3rem 0.4rem rgba(240, 78, 35, 0.35); }
  to { filter: none; box-shadow: 0 24px 40px -18px rgba(20, 24, 58, 0.55), 0 0 0 2px #3A4066, 0 0 2rem 0.2rem rgba(240, 78, 35, 0.18); }
}

/* -------- Bandeau équation : un média qui informe + une appli qui fait interagir = un collectif qui s'implique -------- */
.equation { padding-block: 2.25rem 2.5rem; background: var(--mp-cream); }
.equation__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; justify-items: center; align-items: center; }
.equation__bloc { display: flex; align-items: center; gap: 1rem; width: min(100%, 24rem); padding: 1.1rem 1.4rem; border-radius: 1.4rem; color: var(--hero-navy, #14183A); }
.equation__bloc p { margin: 0; font-family: "Fraunces", var(--mp-font-serif); font-weight: 700; font-size: 1.3rem; line-height: 1.15; }
.equation__bloc strong { color: var(--mp-orange-deep); font-weight: 700; }
.equation__icone { flex: none; display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%; background: rgba(255, 255, 255, 0.75); }
.equation__bloc--bleu { background: #DCE9FB; } .equation__bloc--rose { background: #FBDDE2; } .equation__bloc--orange { background: #FFE0CF; }
.equation__signe { font-family: "Fraunces", var(--mp-font-serif); font-weight: 700; font-size: 2.6rem; line-height: 1; color: var(--mp-orange-deep); }
@media (min-width: 900px) {
  .equation__liste { grid-template-columns: 1fr auto 1fr auto 1fr; gap: 1.25rem; }
  .equation__bloc { width: auto; height: 100%; }
}

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

/* Pictogramme des cartes de « Vous gardez la main » (voir aussi .picto dans pages/home/_picto). */
.picto { width: clamp(72px, 5.6vw, 120px); height: auto; }

/* -------- 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--compact { grid-template-columns: repeat(2, 1fr); } .projet--full { grid-column: 1 / -1; } }
/* Famille unique, le collectif : étiquette discrète (h3) puis grille rythmée (voir plus bas). */
.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; }
@media (min-width: 900px) { .exemples__grid--compact { grid-template-columns: repeat(3, 1fr); } }
/* Grille (dès 768 px) : la répartition est faite côté serveur (Exemples::Repartition) ; chaque ligne compte deux ou trois cartes, jamais une seule.
   Classes de carte : .ligne-2g (grande à gauche), .ligne-2d (grande à droite), .ligne-3 (trois cartes égales, dernière ligne d'un nombre impair), avec .carte-grande / .carte-petite sur les lignes de deux.
   Dès 1024 px : 12 colonnes, grande 7 (58 %) + petite 5 (42 %), la grande alternant de côté d'une ligne à l'autre ; ligne de trois : 4 + 4 + 4, téléphone réduit (--phone-h).
   Tablette (768 à 1023 px) : rythme d'avant le 01/11/2026 sur 60 colonnes (motif de 8 cartes : lignes impaires 55 / 45 de 820 à 1023 px, 50 / 50 de 768 à 819 px, la grande à gauche puis à droite ; lignes paires 50 / 50) ; ligne de trois : 20 + 20 + 20 (téléphone réduit à la largeur de la carte).
   Sous 768 px, une colonne. Disposition interne : colonne (texte puis téléphone) ; grande carte en ligne (texte à gauche, téléphone à droite) dès 1400 px (en dessous, le titre « Faire politique publique » passerait sur trois lignes). */
@media (min-width: 768px) {
  .exemples__grid:not(.exemples__grid--compact) { --grande: 30; --petite: 30; grid-template-columns: repeat(60, minmax(0, 1fr)); column-gap: 0; margin-inline: -12px; grid-auto-rows: minmax(560px, auto); }
  .exemples__grid:not(.exemples__grid--compact) > .projet { grid-column: span 30; margin-inline: 12px; }
  /* 60 colonnes sans gouttière (60 gouttières de 24 px ne tiennent pas) : l'écart de 24 px entre cartes vient de leurs marges. */
  .exemples__grid:not(.exemples__grid--compact) > .projet.ligne-3 { grid-column: span 20; --phone-h: min(440px, calc(((100vw - 125px) / 3 - 59px) * 0.95 * 19.5 / 9)); padding: clamp(1.1rem, 1.6vw, 1.5rem); }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .exemples__grid:not(.exemples__grid--compact) > .projet:not(.ligne-3):is(:nth-child(8n+1), :nth-child(8n+6)) { grid-column: span var(--grande); }
  .exemples__grid:not(.exemples__grid--compact) > .projet:not(.ligne-3):is(:nth-child(8n+2), :nth-child(8n+5)) { grid-column: span var(--petite); }
}
@media (min-width: 820px) {
  .exemples__grid:not(.exemples__grid--compact) { --grande: 33; --petite: 27; }
}
@media (min-width: 1024px) {
  .exemples__grid:not(.exemples__grid--compact) { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; margin-inline: 0; }
  .exemples__grid:not(.exemples__grid--compact) > .projet { margin-inline: 0; }
  .exemples__grid:not(.exemples__grid--compact) > .projet.ligne-seule { grid-column: span 6; }
  .exemples__grid:not(.exemples__grid--compact) > .projet.carte-grande { grid-column: span 7; }
  .exemples__grid:not(.exemples__grid--compact) > .projet.carte-petite { grid-column: span 5; }
  .exemples__grid:not(.exemples__grid--compact) > .projet.ligne-3 { grid-column: span 4; --phone-h: 500px; }
}
@media (min-width: 1400px) {
  .exemples__grid:not(.exemples__grid--compact) > .projet.carte-grande { flex-direction: row; align-items: center; gap: clamp(1.25rem, 2.4vw, 2.5rem); }
  .exemples__grid:not(.exemples__grid--compact) > .projet.carte-grande .projet__text { flex: 1 1 0; }
  .exemples__grid:not(.exemples__grid--compact) > .projet.carte-grande .projet__stage { flex: 0 0 auto; margin-top: 0; }
}
@media (min-width: 1700px) {
  .exemples__grid:not(.exemples__grid--compact) > .projet.ligne-3 { --phone-h: 541px; }
}
.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; } }
/* Mobile : le téléphone, incliné jusqu'à 4°, tient dans la carte (80 % de sa largeur, grille de 100vw - 86 px) au lieu de frôler son bord à 375 px. */
@media (max-width: 767px) { .projet:not(.projet--compact) { --phone-h: min(541px, calc((100vw - 86px) * 0.8 * 19.5 / 9)); } }
/* « Faire communauté » : le mot le plus long du titre dépassait de 7 px la zone de texte à 375 px. */
@media (max-width: 767px) { .projet--faire-communaute { --titre-cqi: 15.6cqi; } }
.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). */
/* « Faire communauté » (ex-MIST) : bleu profond, accent jaune, halo jaune derrière le téléphone. */
/* « Faire association » : vert sapin (blanc 6,5:1), accent et bouton vert pâle (texte #0F3B21) ; aucun autre vert dans la grille. */
.projet--faire-association { --card-bg: #1B6B3A; --card-fg: #fff; --card-accent: #E4F5B8; --card-on-accent: #0F3B21; }
.projet--faire-association .projet__fonction.is-active { border-color: #E4F5B8; background: #E4F5B8; color: #0F3B21; }
.projet--faire-association .projet__stage::before { content: ""; position: absolute; width: 110%; aspect-ratio: 1; border-radius: 50%; background: rgba(228, 245, 184, 0.18); }
/* « Faire œuvre » : violet profond (blanc 8,2:1), accent et bouton orange de la toile du héros (texte #2B0A3D, 9,8:1) ; aucun autre violet de cette teinte dans la grille. */
.projet--faire-oeuvre { --card-bg: #7B1FA2; --card-fg: #fff; --card-accent: #FFB36B; --card-on-accent: #2B0A3D; }
.projet--faire-oeuvre .projet__fonction.is-active { border-color: #FFB36B; background: #FFB36B; color: #2B0A3D; }
.projet--faire-oeuvre .projet__stage::before { content: ""; position: absolute; width: 110%; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 179, 107, 0.2); }
.projet--faire-oeuvre .projet__badge { background: transparent; color: var(--card-fg); border: 1px solid color-mix(in srgb, var(--card-fg) 45%, transparent); font-weight: 600; }
/* « Faire club » : orange vif du club (marine #0B1B33 dessus, 7,3:1), accent et bouton marine. */
.projet--faire-club { --card-bg: #FF8A2B; --card-fg: #0B1B33; --card-accent: #0B1B33; --card-on-accent: #fff; }
.projet--faire-club .projet__fonction.is-active { border-color: #0B1B33; background: #0B1B33; color: #fff; }
.projet--faire-club .projet__badge { background: transparent; color: var(--card-fg); border: 1px solid color-mix(in srgb, var(--card-fg) 45%, transparent); font-weight: 600; }
/* « Faire consulat » : rouge de l'appli assombri (blanc 7,2:1), accent et bouton blancs. */
.projet--faire-consulat { --card-bg: #AE0E2E; --card-fg: #fff; --card-accent: #fff; --card-on-accent: #8A0B25; }
.projet--faire-consulat .projet__fonction.is-active { border-color: #fff; background: #fff; color: #8A0B25; }
.projet--faire-consulat .projet__badge { background: transparent; color: var(--card-fg); border: 1px solid color-mix(in srgb, var(--card-fg) 45%, transparent); font-weight: 600; }
/* « Faire CCI » : bleu ciel clair (les bleus foncés sont déjà pris par Faire campagne, Faire communauté et Faire sommeil), texte et bouton dans le bleu nuit #0B2D6B de l'appli. */
.projet--faire-cci { --card-title: #061630; --card-bg: #A9CBF2; --card-fg: #0B2D6B; --card-accent: #0B2D6B; --card-on-accent: #fff; }
.projet--faire-cci .projet__fonction.is-active { border-color: #0B2D6B; background: #0B2D6B; color: #fff; }
.projet--faire-cci .projet__stage::before { content: ""; position: absolute; width: 110%; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, 0.35); }
.projet--faire-communaute { --card-bg: #0F2A5A; --card-fg: #fff; --card-accent: #FFD23F; --card-on-accent: #0F2A5A; }
.projet--faire-communaute .projet__stage::before { content: ""; position: absolute; width: 110%; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 210, 63, 0.22); }
/* « Faire sommeil » (ex-Vive le sommeil) : violet de nuit profond, accent doré. */
.projet--faire-sommeil { --card-bg: #2B1055; --card-fg: #F4F1FF; --card-accent: #F7D774; --card-on-accent: #2B1055; }
.projet--faire-sommeil .projet__fonction.is-active { border-color: #F7D774; background: #F7D774; color: #2B1055; }
/* « Faire train » (ex-L'espace entre les wagons) : brun rouille profond, accent et bouton sable doré. */
.projet--faire-train { --card-bg: #70290F; --card-fg: #fff; --card-accent: #F2C078; --card-on-accent: #3A1405; }
.projet--faire-train .projet__fonction.is-active { border-color: #F2C078; background: #F2C078; color: #3A1405; }
.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; }
/* « Faire CSE » : sarcelle profond (le turquoise de l'appli, assombri pour le contraste), accent et bouton pêche (la terre cuite de l'appli). */
.projet--faire-cse { --card-bg: #0B4744; --card-fg: #fff; --card-accent: #FFC2A1; --card-on-accent: #062B29; }
.projet--faire-cse .projet__fonction.is-active { border-color: #FFC2A1; background: #FFC2A1; color: #062B29; }
.projet--faire-cse .projet__badge { background: transparent; color: var(--card-fg); border: 1px solid color-mix(in srgb, var(--card-fg) 45%, transparent); font-weight: 600; }
/* Palettes échangées le 24/10/2026 : « Faire commune » en rose framboise soutenu (blanc 8,0:1), accent et bouton rose pâle ;
   « Faire cause » en rose clair, texte et bouton bleu marine, halo blanc derrière le téléphone. */
.projet--faire-commune { --card-bg: #9E1048; --card-fg: #fff; --card-accent: #FFD0E0; --card-on-accent: #4A0A24; }
.projet--faire-commune .projet__fonction.is-active { border-color: #FFD0E0; background: #FFD0E0; color: #4A0A24; }
.projet--faire-commune .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-cause { --card-title: #061630; --card-bg: #F2A0BE; --card-fg: #0B2D6B; --card-accent: #0B2D6B; --card-on-accent: #fff; }
.projet--faire-cause .projet__stage::before { content: ""; position: absolute; width: 110%; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, 0.3); }
.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); }

/* -------- Pages de profil (/pour/:profil) -------- */
.profil-bandeau { padding-block: 0.9rem; background: #FAF5EB; border-bottom: 1px solid var(--mp-line); }
.profil-bandeau__liste { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.5rem; overflow-x: auto; scrollbar-width: thin; padding-bottom: 0.25rem; }
.profil-bandeau__liste li { flex: none; }
.pastille--ligne { flex-direction: row; gap: 0.5rem; min-height: 0; padding: 0.55rem 0.9rem; border-radius: 999px; white-space: nowrap; }
.pastille--ligne[aria-current="page"] { background: var(--hero-navy, #14183A); border-color: var(--hero-navy, #14183A); color: #fff; }
.pastille--ligne[aria-current="page"] .pastille__icone { color: #fff !important; }
.profil { padding-block: 2.5rem 4rem; background: linear-gradient(180deg, #FAF5EB, var(--mp-cream)); }
.profil__inner { display: grid; gap: 2.5rem; align-items: center; }
.profil__surtitre { margin: 0 0 0.5rem; font-weight: 600; font-size: 0.9rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--mp-body); }
.profil__titre { margin: 0 0 1.25rem; font-family: "Fraunces", var(--mp-font-serif); font-weight: 700; font-size: clamp(2.1rem, 6vw, 3.4rem); line-height: 1.08; letter-spacing: -0.02em; color: #14183A; text-wrap: balance; }
.profil__paragraphe { margin: 0 0 1rem; max-width: 38rem; font-size: 1.1rem; line-height: 1.6; color: #2B2F4F; }
.profil__paragraphe--resultat { font-weight: 600; color: #14183A; }
.profil__boutons { display: grid; gap: 0.75rem; margin-top: 1.5rem; }
.profil__bouton { justify-content: center; padding: 1.05rem 1.5rem; font-size: 1rem; font-weight: 700; }
.profil .btn--orange { background: var(--mp-orange-deep); }
.profil .btn--orange:hover { background: #B8340F; }
.profil__bouton--contour { background: transparent; color: #14183A; border: 2px solid #14183A; }
.profil__bouton--contour:hover { background: #14183A; color: #fff; }
.profil__autres { margin: 1.25rem 0 0; font-size: 0.95rem; }
.profil__autres a { color: var(--mp-body); text-decoration: underline; text-underline-offset: 4px; }
.profil__autres a:hover { color: #14183A; }
.profil__telephone { position: relative; margin: 0; justify-self: center; width: min(15rem, 70%); perspective: 1100px; }
.profil__profondeur { position: absolute; inset: 8% -22% -6% -22%; border-radius: 50%; background: radial-gradient(closest-side, #FFD9C2, transparent); z-index: 0; }
.telephone--profil { z-index: 1; transform: rotateY(-14deg) rotateX(4deg) rotate(3deg); box-shadow: -18px 28px 40px -16px rgba(20, 24, 58, 0.55), 0 0 0 2px #3A4066; }
.profil__legende { position: relative; z-index: 1; margin-top: 1.25rem; text-align: center; font-family: "Caveat", "Segoe Script", cursive; font-size: 1.6rem; color: #14183A; }
@media (min-width: 640px) { .profil__boutons { grid-auto-flow: column; justify-content: start; } }
@media (min-width: 900px) {
  .profil { padding-block: 4rem 5rem; }
  .profil__inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 4rem; }
  .profil__telephone { width: 18.5rem; }
}
@media (prefers-reduced-motion: reduce) { .telephone--profil { transform: none; } }
@media (min-width: 900px) { .profil-bandeau__liste { flex-wrap: wrap; overflow: visible; } }