/* =========================================================================
   TSA3 — feuille de style
   Palette reprise du logo : encre noire, bleu, orange, corail, rose.
   Typographies sans empattement : Bricolage Grotesque + Karla.
   ========================================================================= */

/* ------------------------------------------------------------- variables -- */
:root {
  /* couleurs */
  --paper:      #fdf8f3;
  --paper-2:    #f7ede2;
  --paper-3:    #f2e2d3;
  --ink:        #211d1b;
  --ink-soft:   #5f554f;
  --ink-faint:  #8d8079;
  --ligne:      #e6d7c8;

  --bleu:       #2e9bd4;
  --bleu-clair: #d9eef8;
  --orange:     #ee5f28;
  --orange-clair:#fde4d6;
  --corail:     #f2907a;
  --corail-clair:#fde7e0;
  --rose:       #e1517c;
  --rose-clair: #fbe0e8;

  --accent:     var(--orange);
  --accent-clair: var(--orange-clair);

  /* typographie */
  --titre: "Bricolage Grotesque", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --texte: "Karla", "Helvetica Neue", Arial, system-ui, sans-serif;

  /* rythme */
  --large:    min(1200px, 92vw);
  --etroit:   min(780px, 92vw);
  --r-s:  10px;
  --r-m:  18px;
  --r-l:  28px;
  --r-xl: 40px;

  /* mouvement */
  --sortie:  cubic-bezier(0.23, 1, 0.32, 1);
  --entree-sortie: cubic-bezier(0.77, 0, 0.175, 1);
  --doux:    cubic-bezier(0.4, 0.05, 0.2, 1);

  --ombre-s: 0 1px 2px rgba(70, 45, 30, .05), 0 4px 14px -6px rgba(70, 45, 30, .12);
  --ombre-m: 0 2px 4px rgba(70, 45, 30, .05), 0 14px 34px -14px rgba(70, 45, 30, .22);
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--texte);
  font-size: clamp(16px, .55vw + 14.4px, 17.5px);
  line-height: 1.66;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* un grain très léger, pour que le fond ne soit pas un aplat mort */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
}
body > * { position: relative; z-index: 1; }

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
    text-underline-offset: .18em; text-decoration-thickness: .09em; }
a:hover { text-decoration-color: var(--accent); }

::selection { background: var(--orange-clair); color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--bleu);
  outline-offset: 3px;
  border-radius: 4px;
}

.saut-contenu {
  position: absolute; left: 12px; top: -100px;
  z-index: 200; padding: .7em 1.2em; border-radius: 999px;
  background: var(--ink); color: var(--paper); font-weight: 700;
  transition: top 180ms var(--sortie);
}
.saut-contenu:focus { top: 12px; }

.vh { position: absolute; width: 1px; height: 1px; overflow: hidden;
      clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------- typographie ----- */
h1, h2, h3, h4 {
  font-family: var(--titre);
  font-weight: 620;
  line-height: 1.05;
  letter-spacing: -0.022em;
  margin: 0 0 .5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 6.4vw, 4.6rem); letter-spacing: -0.032em; }
h2 { font-size: clamp(1.85rem, 3.4vw, 2.85rem); }
h3 { font-size: clamp(1.2rem, 1.5vw, 1.45rem); line-height: 1.18; letter-spacing: -0.012em; }
h4 { font-size: 1.05rem; letter-spacing: 0; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.chapo {
  font-size: clamp(1.12rem, 1.5vw, 1.35rem);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 34em;
  text-wrap: pretty;
}

.kicker {
  display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--titre);
  font-size: .8rem; font-weight: 650;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-faint);
}
.kicker::before {
  content: ""; width: 26px; height: 2px; border-radius: 2px;
  background: var(--accent);
}

/* mot surligné à la main */
.souligne-mot { position: relative; display: inline-block; white-space: nowrap; }
.souligne {
  position: absolute; left: -2%; bottom: -.2em; width: 104%; height: .38em;
  color: var(--accent); overflow: visible; z-index: -1;
}
.souligne path {
  stroke-dasharray: 240;
  opacity: .42;
  animation: tracer 950ms 420ms var(--sortie) both;
}
@keyframes tracer {
  from { stroke-dashoffset: 240; }
  to   { stroke-dashoffset: 0; }
}

/* -------------------------------------------------------------- mise en page */
.bloc { width: var(--large); margin-inline: auto; }
.bloc-etroit { width: var(--etroit); margin-inline: auto; }

section { padding-block: clamp(4rem, 9vw, 7.5rem); }
section.serre { padding-block: clamp(2.6rem, 5vw, 4rem); }

.fond-2 { background: var(--paper-2); }
.fond-encre { background: var(--ink); color: var(--paper); }

.vague { display: block; width: 100%; height: clamp(30px, 4vw, 60px); margin-bottom: -1px; }

/* -------------------------------------------------------------- boutons -- */
.btn {
  display: inline-flex; align-items: center; gap: .6em;
  padding: .82em 1.5em;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--ink); color: var(--paper);
  font-family: var(--titre); font-size: .98rem; font-weight: 620;
  letter-spacing: -0.005em;
  text-decoration: none; cursor: pointer;
  transition: transform 160ms var(--sortie), background-color 200ms ease,
              color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.btn .ico { width: 1.05em; height: 1.05em; }
.btn:active { transform: scale(.972); }

@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--accent); border-color: var(--accent); color: #fff;
               box-shadow: var(--ombre-m); }
  .btn:hover .ico { transform: translateX(3px); }
}
.btn .ico { transition: transform 200ms var(--sortie); }

.btn--clair {
  background: transparent; color: var(--ink);
}
@media (hover: hover) and (pointer: fine) {
  .btn--clair:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
}

.btn--sur-encre { background: var(--paper); border-color: var(--paper); color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .btn--sur-encre:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
}

.btn--petit { padding: .6em 1.15em; font-size: .9rem; border-width: 1.8px; }

/* liens fléchés / documents */
.lien-fleche {
  display: inline-flex; align-items: center; gap: .45em;
  font-family: var(--titre); font-weight: 620;
  text-decoration: none;
  border-bottom: 2px solid color-mix(in srgb, var(--accent) 40%, transparent);
  padding-bottom: .12em;
  transition: border-color 200ms ease, gap 200ms var(--sortie);
}

@media (hover: hover) and (pointer: fine) {
  .lien-fleche:hover { border-color: var(--accent); gap: .7em; }
}

.lien-doc {
  display: inline-flex; align-items: center; gap: .5em;
  font-weight: 700; text-decoration: none;
  color: var(--ink);
  background: var(--accent-clair);
  padding: .5em .95em; border-radius: 999px;
  transition: transform 160ms var(--sortie), background-color 200ms ease;
}
.lien-doc svg { width: 1.05em; height: 1.05em; flex: none; }
.lien-doc:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .lien-doc:hover { background: color-mix(in srgb, var(--accent) 26%, var(--paper)); }
}

.ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1em; height: 1em; flex: none;
}
.ico svg { display: block; width: 100%; height: 100%; }

/* ------------------------------------------------------------- en-tête --- */
.entete {
  position: sticky; top: 0; z-index: 60;
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: border-color 260ms ease, box-shadow 260ms ease;
}
.entete[data-defile="oui"] { border-bottom-color: var(--ligne);
  box-shadow: 0 10px 24px -22px rgba(70, 45, 30, .55); }

.entete__interieur {
  width: var(--large); margin-inline: auto;
  display: flex; align-items: center; gap: .8rem;
  padding-block: .85rem;
  transition: padding-block 260ms var(--doux);
}
.entete[data-defile="oui"] .entete__interieur { padding-block: .5rem; }

.logo { display: block; flex: none; }
.logo img {
  width: clamp(140px, 14vw, 178px);
  mix-blend-mode: multiply;
  transition: width 260ms var(--doux);
}
.entete[data-defile="oui"] .logo img { width: clamp(126px, 12vw, 152px); }

.nav { margin-left: auto; }
.nav__liste {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: .1rem;
}
.nav__lien {
  display: block; padding: .5em .45em;
  border-radius: 999px;
  font-family: var(--titre); font-weight: 550; font-size: .845rem;
  color: var(--ink-soft); text-decoration: none;
  white-space: nowrap;
  transition: color 180ms ease, background-color 180ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .nav__lien:hover { color: var(--ink); background: var(--paper-3); }
}
.nav__lien[aria-current="page"] { color: var(--ink); font-weight: 700; }
.nav__lien[aria-current="page"]::after {
  content: ""; display: block; height: 2.5px; border-radius: 2px;
  background: var(--accent); margin-top: 2px;
}

.entete__actions { display: flex; align-items: center; gap: .5rem; flex: none; }

.burger {
  display: none;
  width: 44px; height: 44px; padding: 9px;
  border: 1.8px solid var(--ink); border-radius: 999px;
  background: transparent; color: var(--ink); cursor: pointer;
  transition: transform 160ms var(--sortie), background-color 200ms ease;
}
.burger:active { transform: scale(.94); }
.burger svg { width: 100%; height: 100%; }

/* menu plein écran mobile */
.menu-mobile {
  position: fixed; inset: 0; z-index: 80;
  background: var(--paper);
  display: flex; flex-direction: column;
  padding: 1.2rem clamp(1.2rem, 5vw, 2rem) 2rem;
  opacity: 0; visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 220ms var(--sortie), transform 260ms var(--sortie),
              visibility 0s 260ms;
}
.menu-mobile[data-ouvert="oui"] {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 200ms var(--sortie), transform 260ms var(--sortie), visibility 0s;
}
.menu-mobile__haut { display: flex; align-items: center; justify-content: space-between; }
.menu-mobile__liste {
  list-style: none; margin: auto 0; padding: 0;
  display: flex; flex-direction: column; gap: .1rem;
}
.menu-mobile__liste a {
  display: block; padding: .38em 0;
  font-family: var(--titre); font-weight: 620;
  font-size: clamp(1.6rem, 7vw, 2.3rem);
  letter-spacing: -0.025em;
  text-decoration: none;
  opacity: 0; transform: translateY(10px);
}
.menu-mobile[data-ouvert="oui"] .menu-mobile__liste a {
  animation: entree-item 420ms var(--sortie) forwards;
  animation-delay: calc(var(--i) * 45ms + 60ms);
}
.menu-mobile__liste a[aria-current="page"] { color: var(--accent); }
@keyframes entree-item { to { opacity: 1; transform: none; } }
.menu-mobile__pied { display: flex; flex-wrap: wrap; gap: .6rem; }

/* --------------------------------------------------------------- héros --- */
.heros {
  position: relative;
  padding-top: clamp(2rem, 5vw, 4rem);
  padding-bottom: clamp(2rem, 5vw, 3rem);
  overflow: hidden;
}
.heros__grille {
  width: var(--large); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(1.6rem, 4vw, 4rem); align-items: end;
}
.heros__aparte { padding-bottom: .6rem; }
.heros h1 {
  margin-top: 0; margin-bottom: 0;
  font-size: clamp(2.7rem, 7.4vw, 5.4rem);
}
.heros h1 .l1 { display: block; color: var(--bleu); }
.heros h1 .l2 { display: block; color: var(--orange); }
.heros h1 .l3 { display: block; color: var(--rose); }

.heros__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; }

.heros__illu { position: relative; }
.illu-hero { width: 100%; height: auto; color: var(--ink); overflow: visible; }
.illu-hero .pastille--bleu   { fill: var(--bleu); }
.illu-hero .pastille--orange { fill: var(--orange); }
.illu-hero .pastille--corail { fill: var(--corail); }
.illu-hero .pastille--rose   { fill: var(--rose); }
.illu-hero .pastille {
  animation: flotter-pastille 9s var(--doux) infinite;
  animation-delay: var(--d, 0s);
  transform-box: fill-box; transform-origin: center;
}
@keyframes flotter-pastille {
  0%, 100% { transform: translate(0, 0); }
  33%      { transform: translate(5px, -9px); }
  66%      { transform: translate(-4px, 5px); }
}
.illu-hero .graine {
  animation: derive 11s var(--doux) infinite;
  animation-delay: var(--d, 0s);
  transform-box: fill-box; transform-origin: center;
}
@keyframes derive {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50%      { transform: translate(10px, -14px) rotate(7deg); }
}
.illu-hero .illu-tete { animation: respirer 12s ease-in-out infinite; transform-origin: 252px 214px; }
@keyframes respirer {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(1.6deg); }
}

/* graines décoratives en fond de page */
.deco-graine {
  position: absolute; width: 34px; height: 34px;
  color: var(--ink); opacity: .16; pointer-events: none;
  animation: voler 26s linear infinite;
}
.deco-graine--0 { top: 12%; left: 4%;  animation-duration: 30s; }
.deco-graine--1 { top: 62%; left: 8%;  animation-duration: 38s; animation-delay: -8s; }
.deco-graine--2 { top: 28%; right: 5%; animation-duration: 34s; animation-delay: -16s; }
.deco-graine--3 { top: 78%; right: 12%;animation-duration: 42s; animation-delay: -4s; }
@keyframes voler {
  0%   { transform: translate(0, 0) rotate(-6deg); }
  25%  { transform: translate(26px, -22px) rotate(8deg); }
  50%  { transform: translate(8px, -44px) rotate(-4deg); }
  75%  { transform: translate(-20px, -20px) rotate(6deg); }
  100% { transform: translate(0, 0) rotate(-6deg); }
}

/* --------------------------------------------------------- les trois A -- */
.trois-a {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.4vw, 1.8rem);
  margin-top: 3rem;
}
.carte-a {
  position: relative;
  padding: clamp(1.6rem, 2.6vw, 2.2rem);
  background: var(--paper);
  border: 1.8px solid var(--ink);
  border-radius: var(--r-l);
  box-shadow: 5px 6px 0 var(--teinte);
  transition: transform 260ms var(--sortie), box-shadow 260ms var(--sortie);
}
.carte-a:nth-child(1) { --teinte: var(--bleu);   rotate: -1.1deg; }
.carte-a:nth-child(2) { --teinte: var(--orange); rotate: .5deg; }
.carte-a:nth-child(3) { --teinte: var(--rose);   rotate: -.6deg; }
@media (hover: hover) and (pointer: fine) {
  .carte-a:hover { transform: translate(-3px, -4px); box-shadow: 9px 11px 0 var(--teinte); }
}
.carte-a__lettre {
  font-family: var(--titre); font-weight: 700;
  font-size: 4.4rem; line-height: .8; color: var(--teinte);
  letter-spacing: -0.05em;
  display: block; margin-bottom: .3rem;
}
.carte-a h3 { margin-bottom: .5rem; }
.carte-a p { color: var(--ink-soft); font-size: .97rem; margin: 0; }

/* --------------------------------------------------------- présentation -- */
.presentation {
  display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 5vw, 4.5rem);
  align-items: start;
}
.presentation__aside { position: sticky; top: 7rem; }
.presentation__texte { max-width: 62ch; }
.presentation__texte p { color: var(--ink-soft); }
.presentation__texte p:first-child {
  font-size: 1.12rem; color: var(--ink);
}
.note-def {
  margin-top: 1.6rem; padding-top: 1rem;
  border-top: 1px dashed var(--ligne);
  font-size: .88rem; color: var(--ink-faint);
}

.chiffres { display: flex; flex-wrap: wrap; gap: 1.8rem; margin-top: 2.5rem; }
.chiffre__valeur {
  font-family: var(--titre); font-weight: 700;
  font-size: 2.6rem; line-height: 1; letter-spacing: -0.04em;
  color: var(--accent);
}
.chiffre__label { font-size: .88rem; color: var(--ink-soft); max-width: 12ch; }

/* ------------------------------------------------------------ activités -- */
.activites {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
  margin-top: 3rem;
}
.carte {
  display: flex; flex-direction: column;
  padding: clamp(1.5rem, 2.4vw, 2rem);
  background: var(--paper);
  border: 1.5px solid var(--ligne);
  border-radius: var(--r-l);
  transition: transform 240ms var(--sortie), border-color 240ms ease,
              box-shadow 240ms var(--sortie);
}
@media (hover: hover) and (pointer: fine) {
  .carte:hover {
    transform: translateY(-5px);
    border-color: color-mix(in srgb, var(--teinte, var(--ink)) 45%, var(--ligne));
    box-shadow: var(--ombre-m);
  }
  .carte:hover .spot { transform: rotate(-6deg) scale(1.06); }
}
.carte__spot {
  width: 62px; height: 62px; margin-bottom: 1.1rem;
  display: grid; place-items: center;
  border-radius: 18px;
  background: var(--teinte-clair, var(--paper-2));
  color: var(--teinte, var(--ink));
}
.spot { width: 40px; height: 40px; transition: transform 300ms var(--sortie); }
.carte h3 { margin-bottom: .45rem; }
.carte p { color: var(--ink-soft); font-size: .97rem; }
.carte .lien-fleche { margin-top: auto; padding-top: 1.1rem; align-self: flex-start; }

/* teintes réutilisables */
.t-bleu   { --teinte: var(--bleu);   --teinte-clair: var(--bleu-clair);
            --teinte-texte: #14709f; }
.t-orange { --teinte: var(--orange); --teinte-clair: var(--orange-clair);
            --teinte-texte: #c24a17; }
.t-corail { --teinte: var(--corail); --teinte-clair: var(--corail-clair);
            --teinte-texte: #b8543b; }
.t-rose   { --teinte: var(--rose);   --teinte-clair: var(--rose-clair);
            --teinte-texte: #bc3159; }

/* ------------------------------------------------------------- l'équipe -- */
.equipe-apercu { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.pile-portraits { display: flex; }
.pile-portraits img {
  width: clamp(48px, 6vw, 62px); height: clamp(48px, 6vw, 62px);
  border-radius: 50%; object-fit: cover; object-position: center top;
  border: 3px solid var(--paper);
  margin-left: -14px;
  transition: transform 240ms var(--sortie);
}
.pile-portraits img:first-child { margin-left: 0; }
@media (hover: hover) and (pointer: fine) {
  .pile-portraits:hover img { transform: translateY(-4px); }
}
.pile-reste {
  display: grid; place-items: center;
  width: clamp(48px, 6vw, 62px); height: clamp(48px, 6vw, 62px);
  border-radius: 50%; margin-left: -14px;
  background: var(--ink); color: var(--paper);
  border: 3px solid var(--paper);
  font-family: var(--titre); font-weight: 700; font-size: .9rem;
}

.grille-equipe {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: 2.5rem;
}
.fiche {
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1.5px solid var(--ligne);
  border-radius: var(--r-l);
  overflow: hidden;
  text-decoration: none;
  transition: transform 240ms var(--sortie), box-shadow 240ms var(--sortie),
              border-color 240ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .fiche:hover { transform: translateY(-6px); box-shadow: var(--ombre-m);
                 border-color: color-mix(in srgb, var(--teinte) 40%, var(--ligne)); }
  .fiche:hover .fiche__photo img { transform: scale(1.045); }
  .fiche:hover .fiche__aller { background: var(--teinte); color: #fff; transform: rotate(-45deg); }
}
.fiche:active { transform: scale(.99); }
.fiche__photo {
  position: relative; aspect-ratio: 1 / 1; overflow: hidden;
  background: var(--teinte-clair);
}
.fiche__photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 22%;
  transition: transform 500ms var(--sortie);
}
.fiche__aller {
  position: absolute; right: 12px; bottom: 12px;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--paper); color: var(--ink);
  transition: background-color 220ms ease, color 220ms ease, transform 260ms var(--sortie);
}
.fiche__aller svg { width: 17px; height: 17px; }
.fiche__corps { padding: 1.05rem 1.15rem 1.25rem; display: flex; flex-direction: column; gap: .3rem; }
.fiche__nom { font-family: var(--titre); font-weight: 650; font-size: 1.14rem;
              letter-spacing: -0.015em; line-height: 1.15; }
.fiche__role { font-size: .87rem; color: var(--teinte-texte, var(--teinte));
               font-weight: 700; line-height: 1.3; }
.fiche__resume { font-size: .88rem; color: var(--ink-soft); line-height: 1.5; }

/* raccourcis vers un métier */
.ancres { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; }
.ancre {
  display: inline-flex; align-items: center;
  padding: .5em 1.1em;
  border-radius: 999px; border: 1.6px solid var(--ligne);
  font-family: var(--titre); font-weight: 600; font-size: .92rem;
  color: var(--ink-soft); text-decoration: none;
  transition: transform 150ms var(--sortie), background-color 200ms ease,
              color 200ms ease, border-color 200ms ease;
}
.ancre:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .ancre:hover { border-color: var(--ink); color: var(--ink); background: var(--paper-2); }
}

/* une section par métier */
.metier {
  padding-block: clamp(2.6rem, 5vw, 3.8rem) 0;
  scroll-margin-top: 6.5rem;
}
.metier + .metier { border-top: 1px solid var(--ligne); }
.metier__entete {
  display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
  gap: clamp(.8rem, 3vw, 3rem); align-items: baseline;
}
.metier__entete h2 { font-size: clamp(1.55rem, 2.6vw, 2.2rem); margin: 0; }
.metier__entete p { color: var(--ink-soft); font-size: .97rem; max-width: 54ch; margin: 0; }
.metier .grille-equipe { margin-top: 1.8rem; }

@media (max-width: 900px) {
  .metier__entete { grid-template-columns: 1fr; gap: .55rem; }
}

/* ------------------------------------------------ page intérieure -------- */
.tete-page {
  padding-top: clamp(2.4rem, 5vw, 4rem);
  padding-bottom: clamp(1.6rem, 3vw, 2.4rem);
}
.tete-page__grille {
  display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center;
}
.tete-page h1 { font-size: clamp(2.3rem, 5.4vw, 3.9rem); margin-bottom: .35em; }
.tete-page .spot {
  width: clamp(96px, 13vw, 150px); height: clamp(96px, 13vw, 150px);
  color: var(--teinte, var(--accent));
}
.fil { display: flex; gap: .5em; align-items: center; font-size: .86rem;
       color: var(--ink-faint); margin-bottom: 1.1rem; }
.fil a { text-decoration: none; }
.fil a:hover { text-decoration: underline; }

.contenu { max-width: 62ch; }
.contenu > h2 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  margin-top: 2.6rem; margin-bottom: .7rem;
}
.contenu > h2:first-child { margin-top: 0; }
.contenu > p { color: var(--ink-soft); }
.contenu ul { padding-left: 0; list-style: none; margin: 0 0 1.2em; }
.contenu ul li {
  position: relative; padding-left: 1.6em; margin-bottom: .5em; color: var(--ink-soft);
}
.contenu ul li::before {
  content: ""; position: absolute; left: .1em; top: .62em;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--teinte, var(--accent)); opacity: .55;
}

.encadre {
  margin: 1.8rem 0;
  padding: 1.4rem 1.5rem;
  border-radius: var(--r-m);
  background: var(--teinte-clair);
  border-left: 4px solid var(--teinte);
}
.encadre :is(h2, h3, h4) {
  font-family: var(--titre); font-size: 1.02rem; font-weight: 700;
  margin-bottom: .5rem; color: var(--ink);
  line-height: 1.05; letter-spacing: 0;
}
.encadre p { font-size: .97rem; color: var(--ink-soft); }
.encadre p:last-child { margin-bottom: 0; }

.tel-grand {
  font-family: var(--titre); font-weight: 700;
  font-size: clamp(1.5rem, 3.4vw, 2.1rem); letter-spacing: -0.02em;
  text-decoration: none; color: var(--ink);
  border-bottom: 3px solid var(--teinte);
}

/* étapes numérotées */
.etapes { counter-reset: e; margin: 2rem 0; display: grid; gap: 1rem; }
.etape {
  position: relative; display: grid; grid-template-columns: auto 1fr; gap: 1.1rem;
  padding: 1.3rem 1.4rem;
  background: var(--paper); border: 1.5px solid var(--ligne); border-radius: var(--r-m);
}
.etape::before {
  counter-increment: e; content: counter(e);
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--ink); color: var(--paper);
  font-family: var(--titre); font-weight: 700; font-size: 1.05rem;
}
.etape :is(h2, h3, h4) { margin-bottom: .25rem; font-size: 1.06rem;
                         line-height: 1.05; letter-spacing: 0; }
.etape p { margin: 0; font-size: .95rem; color: var(--ink-soft); }

/* numéros d'urgence */
.urgences { margin: 1.6rem 0; display: grid; gap: .6rem; }
.urgence {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem;
  padding: .9rem 1.1rem;
  border: 1.5px dashed var(--ligne); border-radius: var(--r-m);
  background: var(--paper);
  text-decoration: none;
  transition: border-color 200ms ease, background-color 200ms ease, transform 160ms var(--sortie);
}
a.urgence:active { transform: scale(.99); }
@media (hover: hover) and (pointer: fine) {
  a.urgence:hover { border-style: solid; border-color: var(--rose); background: var(--rose-clair); }
}
.urgence__num { font-family: var(--titre); font-weight: 700; font-size: 1.12rem; }
.urgence__quoi { font-size: .92rem; color: var(--ink-soft); }

/* liste à cocher */
.checklist { list-style: none; padding: 0; margin: 1.2rem 0; display: grid; gap: .55rem; }
.checklist li {
  position: relative; padding-left: 2.1em; color: var(--ink-soft); font-size: .97rem;
}
.checklist li::before {
  content: ""; position: absolute; left: 0; top: .18em;
  width: 20px; height: 20px; border-radius: 6px;
  border: 2px solid var(--teinte, var(--accent));
}
.checklist li::after {
  content: ""; position: absolute; left: 6px; top: .48em;
  width: 8px; height: 4.5px;
  border-left: 2.2px solid var(--teinte, var(--accent));
  border-bottom: 2.2px solid var(--teinte, var(--accent));
  transform: rotate(-45deg);
}

/* cartes de groupe */
.cartes-groupe {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1rem; margin: 1.8rem 0;
}
.carte-groupe {
  padding: 1.4rem 1.5rem;
  background: var(--paper); border: 1.5px solid var(--ligne);
  border-radius: var(--r-m); border-top: 5px solid var(--teinte);
}
.carte-groupe :is(h3, h4) { font-size: 1.1rem; margin-bottom: .2rem;
                            line-height: 1.05; letter-spacing: 0; }
.carte-groupe .meta {
  font-size: .82rem; font-weight: 700; color: var(--teinte-texte, var(--teinte));
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: .8rem;
}
.carte-groupe p { font-size: .94rem; color: var(--ink-soft); }

/* affiches */
.affiches {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1.4rem; margin: 2rem 0;
}
.affiche {
  display: flex; flex-direction: column; gap: .8rem;
  padding: 1rem; background: var(--paper);
  border: 1.5px solid var(--ligne); border-radius: var(--r-m);
}
.affiche img {
  width: 100%; border-radius: var(--r-s);
  border: 1px solid var(--ligne);
  transition: transform 300ms var(--sortie);
}
@media (hover: hover) and (pointer: fine) {
  .affiche a:hover img { transform: scale(1.02); }
}
.affiche :is(h2, h3, h4) { margin: 0; font-size: 1.05rem; line-height: 1.05; letter-spacing: 0; }
.affiche p { font-size: .93rem; color: var(--ink-soft); margin: 0; }

/* accès / adresse */
.carte-adresse {
  display: flex; gap: 1.2rem; align-items: flex-start;
  padding: 1.6rem 1.7rem; margin-bottom: 1.6rem;
  background: var(--paper-2); border-radius: var(--r-l);
}
.carte-adresse .ico { width: 30px; height: 30px; color: var(--rose); flex: none; margin-top: 2px; }
.carte-adresse p { font-size: 1.1rem; margin: 0; }

.acces { display: grid; gap: .1rem; margin: 1.6rem 0; }
.acces__ligne {
  display: grid; grid-template-columns: 42px 1fr; gap: 1rem; align-items: start;
  padding: 1rem 0; border-bottom: 1px solid var(--ligne);
}
.acces__ligne:last-child { border-bottom: 0; }
.acces__ligne .ico { width: 30px; height: 30px; color: var(--bleu); }
.acces__quoi { font-family: var(--titre); font-weight: 650; font-size: 1.05rem; }
.acces__detail { font-size: .95rem; color: var(--ink-soft); }

.qrcode { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
          margin-top: 2rem; padding-top: 1.6rem; border-top: 1px dashed var(--ligne); }
.qrcode img { width: 130px; border-radius: var(--r-s); }
.qrcode p { font-size: .92rem; color: var(--ink-soft); max-width: 26ch; margin: 0; }

/* ---------------------------------------------------------- fiche pro ---- */
.pro { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
       gap: clamp(1.6rem, 4vw, 3.5rem); align-items: start; }
.pro__aside { position: sticky; top: 7rem; display: grid; gap: 1rem; }
.pro__photo {
  border-radius: var(--r-l); overflow: hidden;
  border: 1.8px solid var(--ink); box-shadow: 6px 7px 0 var(--teinte);
  background: var(--teinte-clair);
}
.pro__photo img { width: 100%; aspect-ratio: 1/1; object-fit: cover; object-position: center 20%; }

.pro__contact { display: grid; gap: .45rem; }
.pro__contact a, .pro__contact span {
  display: flex; align-items: center; gap: .65em;
  padding: .7em .9em; border-radius: var(--r-m);
  background: var(--paper-2); text-decoration: none;
  font-size: .95rem; font-weight: 600;
  transition: background-color 200ms ease, transform 160ms var(--sortie);
  overflow-wrap: anywhere;
}
.pro__contact a:active { transform: scale(.985); }
@media (hover: hover) and (pointer: fine) {
  .pro__contact a:hover { background: var(--teinte-clair); }
}
.pro__contact .ico { width: 20px; height: 20px; flex: none; color: var(--teinte); }

.pro__entete { margin-bottom: 1.8rem; }
.pro__entete h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); margin-bottom: .2em; }
.pro__role { font-family: var(--titre); font-weight: 620; font-size: 1.16rem;
             color: var(--teinte-texte, var(--teinte)); }
.pro__role2 { font-size: .98rem; color: var(--ink-soft); }

.pro__texte > :is(h2, h3) {
  font-size: 1.2rem; margin-top: 2.2rem; margin-bottom: .5rem;
  line-height: 1.18; letter-spacing: -0.012em;
  display: flex; align-items: baseline; gap: .55em;
}
.pro__texte > :is(h2, h3)::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%;
  background: var(--teinte); flex: none;
}
.pro__texte > p { color: var(--ink-soft); }
.pro__texte ul { padding-left: 0; list-style: none; margin: 0 0 1.2em; }
.pro__texte ul li { position: relative; padding-left: 1.5em; margin-bottom: .45em;
                    color: var(--ink-soft); }
.pro__texte ul li::before {
  content: ""; position: absolute; left: .15em; top: .66em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--teinte); opacity: .5;
}
.pro__note {
  margin: 1.6rem 0; padding: 1.2rem 1.4rem;
  background: var(--paper-2); border-radius: var(--r-m);
  font-size: .96rem; color: var(--ink-soft);
  border-left: 4px solid var(--teinte);
}

.pro__pratique {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1rem; margin-top: 2.5rem;
}
.pave {
  padding: 1.3rem 1.4rem; border-radius: var(--r-m);
  background: var(--paper); border: 1.5px solid var(--ligne);
}
.pave :is(h2, h4) {
  display: flex; align-items: center; gap: .5em;
  font-size: .82rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-faint); margin-bottom: .8rem;
}
.pave :is(h2, h4) .ico { width: 17px; height: 17px; color: var(--teinte); }
.pave ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.pave li { font-size: .95rem; color: var(--ink-soft); padding-left: 1.1em; position: relative; }
.pave li::before { content: "·"; position: absolute; left: .2em; color: var(--teinte);
                   font-weight: 700; }

.nav-pro {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin-top: 3.5rem; padding-top: 1.6rem; border-top: 1px solid var(--ligne);
}

/* --------------------------------------------------------------- appel --- */
.appel {
  position: relative; overflow: hidden;
  background: var(--ink); color: var(--paper);
  border-radius: var(--r-xl);
  padding: clamp(2.4rem, 5vw, 4rem);
  display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center;
}
.appel h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); margin-bottom: .4em; }
.appel p { color: color-mix(in srgb, var(--paper) 72%, transparent); max-width: 38ch; margin: 0; }
.appel__actions { display: flex; flex-direction: column; gap: .7rem; }
.appel__pastilles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.appel__pastilles i {
  position: absolute; border-radius: 50%; display: block;
  animation: flotter-pastille 12s var(--doux) infinite;
}

/* ------------------------------------------------------------ pied de page */
.pied { background: var(--ink); color: var(--paper); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.pied a { color: inherit; }
.pied__grille {
  display: grid; grid-template-columns: 1.4fr repeat(2, 1fr) 1.2fr;
  gap: clamp(1.6rem, 4vw, 3rem);
}
.pied__logo { width: 190px; background: var(--paper); border-radius: var(--r-m); padding: .7rem; }
.pied__intro { margin-top: 1.1rem; font-size: .93rem;
               color: color-mix(in srgb, var(--paper) 62%, transparent); max-width: 30ch; }
.pied :is(h2, h4) {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .11em;
  color: color-mix(in srgb, var(--paper) 50%, transparent); margin-bottom: 1rem;
}
.pied ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.pied ul a { text-decoration: none; font-size: .95rem;
             color: color-mix(in srgb, var(--paper) 82%, transparent);
             transition: color 180ms ease; }
@media (hover: hover) and (pointer: fine) { .pied ul a:hover { color: var(--paper); } }
.pied__contact { display: grid; gap: .6rem; font-size: .95rem; }
.pied__contact a { display: flex; gap: .6em; align-items: center; text-decoration: none;
                   color: color-mix(in srgb, var(--paper) 82%, transparent); }
.pied__contact .ico { width: 18px; height: 18px; flex: none; }
.reseaux { display: flex; gap: .5rem; margin-top: 1rem; }
.reseaux a {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid color-mix(in srgb, var(--paper) 28%, transparent);
  transition: background-color 200ms ease, border-color 200ms ease, transform 160ms var(--sortie);
}
.reseaux a:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) {
  .reseaux a:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }
}
.reseaux svg { width: 19px; height: 19px; }

.pied__bas {
  margin-top: clamp(2.4rem, 5vw, 3.5rem); padding-top: 1.4rem;
  border-top: 1px solid color-mix(in srgb, var(--paper) 16%, transparent);
  display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; justify-content: space-between;
  font-size: .84rem; color: color-mix(in srgb, var(--paper) 52%, transparent);
}

/* ---------------------------------------------------------- révélations -- */
.reveler { opacity: 0; transform: translateY(16px); }
.reveler.est-visible {
  opacity: 1; transform: none;
  transition: opacity 620ms var(--sortie), transform 620ms var(--sortie);
  transition-delay: var(--retard, 0ms);
}

/* ------------------------------------------------------------ responsive - */
/* avec 10 onglets, la barre complète ne tient qu'au-delà de ~1320 px */
@media (max-width: 1320px) {
  .nav { display: none; }
  .burger { display: block; }
}

@media (max-width: 1080px) {
  .pied__grille { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .heros__grille { grid-template-columns: 1fr; gap: 1.6rem; }
  .heros__aparte { padding-bottom: 0; }
  .heros h1 { font-size: clamp(2.5rem, 11.5vw, 4rem); }
  .trois-a { grid-template-columns: 1fr; }
  .carte-a { rotate: none !important; }
  .presentation { grid-template-columns: 1fr; }
  .presentation__aside { position: static; }
  .pro { grid-template-columns: 1fr; }
  .pro__aside { position: static; grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
                align-items: start; }
  .appel { grid-template-columns: 1fr; }
  .tete-page__grille { grid-template-columns: 1fr; }
  .tete-page .spot { display: none; }
}

@media (max-width: 760px) {
  .entete__interieur { gap: .8rem; }
  .logo img { width: clamp(126px, 36vw, 168px); }
  .entete__actions .btn { display: none; }
}

@media (max-width: 620px) {
  .pied__grille { grid-template-columns: 1fr; }
  .pro__aside { grid-template-columns: 1fr; max-width: 320px; }
  .carte-adresse { flex-direction: column; }
  .appel { border-radius: var(--r-l); }
}

/* -------------------------------------------------- mouvement réduit ----- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveler { opacity: 1; transform: none; }
  .souligne path { stroke-dashoffset: 0; animation: none; }
  .menu-mobile__liste a { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------- impression --- */
@media print {
  .entete, .pied, .appel, .burger, .menu-mobile, .deco-graine { display: none; }
  body { background: #fff; }
  .reveler { opacity: 1; transform: none; }
}

/* ------------------------------------------- pages intérieures : 2 colonnes */
.page-double {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 17.5rem;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.page-double .contenu { max-width: 60ch; }

.cote { position: sticky; top: 7rem; display: grid; gap: 1rem; }
.cote__carte {
  padding: 1.3rem 1.4rem;
  background: var(--paper-2);
  border-radius: var(--r-l);
}
.cote__carte :is(h2, h4) {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .11em;
  color: var(--ink-faint); margin-bottom: .9rem;
}
.cote__carte p { font-size: .9rem; color: var(--ink-soft); margin: .9rem 0 1rem; }
.cote__carte p:last-child { margin-bottom: 0; }
.cote__carte--lieu p { margin-top: 0; line-height: 1.5; }

.cote__contact { display: grid; gap: .4rem; }
.cote__contact a {
  display: flex; align-items: center; gap: .6em;
  font-size: .92rem; font-weight: 600; text-decoration: none;
  overflow-wrap: anywhere;
  transition: color 180ms ease;
}
.cote__contact .ico { width: 17px; height: 17px; color: var(--teinte, var(--accent)); }
@media (hover: hover) and (pointer: fine) {
  .cote__contact a:hover { color: var(--teinte, var(--accent)); }
}

.cote__liste { list-style: none; margin: 0; padding: 0; display: grid; }
.cote__liste a {
  display: block; padding: .5em 0;
  font-size: .95rem; font-weight: 600; text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  transition: padding-left 200ms var(--sortie), color 180ms ease;
}
.cote__liste li:last-child a { border-bottom: 0; }
.cote__liste a[aria-current="page"] { color: var(--teinte, var(--accent)); }
.cote__liste a[aria-current="page"]::before { content: "→ "; }
@media (hover: hover) and (pointer: fine) {
  .cote__liste a:not([aria-current="page"]):hover { padding-left: .45em; color: var(--ink); }
}

@media (max-width: 940px) {
  .page-double { grid-template-columns: 1fr; }
  .cote { position: static; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
          margin-top: 2.5rem; }
}

/* ------------------------------------------------- planning des présences -- */
.planning-section { scroll-margin-top: 6.5rem; }

.planning__legende {
  display: flex; flex-wrap: wrap; gap: .4rem 1.6rem;
  margin: 1.8rem 0 1.2rem;
  font-size: .89rem; color: var(--ink-soft);
}
.planning__legende span { display: inline-flex; align-items: center; gap: .55em; }

/* la pastille d'un jour */
.jour {
  display: inline-block; width: 22px; height: 22px;
  border-radius: 7px; flex: none;
  background: var(--teinte, var(--ink));
}
.jour--alterne {
  background: linear-gradient(135deg,
              var(--teinte, var(--ink)) 0 50%,
              var(--teinte-clair, var(--paper-3)) 50% 100%);
}
.jour--ponctuel {
  background: transparent;
  border: 2px dotted var(--teinte, var(--ink));
}
.planning__legende i { --teinte: #6b615b; --teinte-clair: #e5d9cd; }

.planning__cadre { overflow-x: auto; }

.planning {
  width: 100%; border-collapse: collapse;
  font-size: .94rem;
}
.planning thead th {
  padding: .6rem .4rem; text-align: center;
  font-family: var(--titre); font-weight: 600; font-size: .82rem;
  color: var(--ink-faint); text-transform: uppercase; letter-spacing: .07em;
  border-bottom: 1.5px solid var(--ligne);
}
.planning thead th:first-child { text-align: left; }
.planning .jour-court { display: none; border: 0; text-decoration: none; }

.planning__groupe th {
  padding: 1.6rem .2rem .5rem; text-align: left;
  font-family: var(--titre); font-weight: 700; font-size: 1rem;
  color: var(--ink); letter-spacing: -0.01em;
}
.planning tbody tr:not(.planning__groupe) { border-bottom: 1px solid var(--ligne); }
.planning tbody tr:not(.planning__groupe):last-child { border-bottom: 0; }

.planning tbody th[scope="row"] {
  padding: .75rem 1.2rem .75rem .2rem;
  text-align: left; font-weight: 400;
  display: flex; flex-direction: column; gap: .1rem;
  min-width: 13rem;
}
.planning tbody th a {
  font-family: var(--titre); font-weight: 620; font-size: 1rem;
  text-decoration: none; color: var(--ink);
  border-bottom: 2px solid transparent;
  align-self: flex-start;
  transition: border-color 180ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .planning tbody th a:hover { border-bottom-color: var(--teinte); }
}
.planning__role { font-size: .82rem; color: var(--teinte-texte, var(--ink-soft)); font-weight: 700; }
.planning__note {
  font-size: .82rem; color: var(--ink-soft); line-height: 1.4;
  margin-top: .25rem; max-width: 34ch;
}

.planning tbody td { text-align: center; padding: .75rem .4rem; }
.planning .jour-vide::after {
  content: ""; display: inline-block; width: 10px; height: 2px;
  border-radius: 2px; background: var(--ligne);
}

.planning__hors { margin-top: 2.2rem; padding-top: 1.4rem; border-top: 1px solid var(--ligne); }
.planning__hors :is(h2, h3) { font-size: 1.05rem; margin-bottom: .8rem;
                              line-height: 1.18; letter-spacing: -0.012em; }
.planning__hors ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.planning__hors li { display: flex; flex-wrap: wrap; gap: .2rem .7rem; align-items: baseline; }
.planning__hors a { font-family: var(--titre); font-weight: 620; text-decoration: none;
                    border-bottom: 2px solid var(--ligne); }
.planning__hors span { font-size: .89rem; color: var(--ink-soft); }

/* --- version étroite : chaque professionnelle devient une carte --- */
@media (max-width: 760px) {
  .planning, .planning tbody, .planning tr, .planning th, .planning td { display: block; }
  .planning thead { display: none; }
  .planning__cadre { overflow-x: visible; }

  .planning tbody tr:not(.planning__groupe) {
    border: 1.5px solid var(--ligne); border-radius: var(--r-m);
    padding: 1rem 1.1rem; margin-bottom: .8rem;
  }
  .planning tbody th[scope="row"] { padding: 0 0 .7rem; min-width: 0; }
  .planning__note { max-width: none; }

  .planning tbody td {
    display: inline-flex; align-items: center; gap: .4em;
    padding: .25rem .55rem .25rem .25rem;
    font-size: .82rem; color: var(--ink-soft);
  }
  .planning tbody td::before { content: attr(data-jour); }
  .planning tbody td .jour { width: 15px; height: 15px; border-radius: 5px; }
  .planning tbody td.jour-vide { display: none; }

  .planning__groupe th { padding: 1.4rem 0 .6rem; }
}

/* ------------------------------------------------- passerelle équipe ↔ planning */
.vers-planning {
  display: flex; flex-wrap: wrap; gap: 1.2rem 2rem;
  align-items: center; justify-content: space-between;
  margin-top: clamp(2.6rem, 5vw, 3.8rem);
  padding: clamp(1.6rem, 3vw, 2.2rem) clamp(1.6rem, 3vw, 2.4rem);
  background: var(--paper-2); border-radius: var(--r-l);
}
.vers-planning h2 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); margin-bottom: .3rem; }
.vers-planning p { color: var(--ink-soft); font-size: .97rem; margin: 0; max-width: 46ch; }

/* ----------------------------------------------------- repères historiques -- */
.reperes { list-style: none; margin: 2rem 0; padding: 0; display: grid; gap: 0; }
.repere {
  display: grid; grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 1.6rem;
  padding: 1.4rem 0;
  border-top: 1px solid var(--ligne);
}
.repere:last-child { border-bottom: 1px solid var(--ligne); }
.repere__date {
  font-family: var(--titre); font-weight: 700; font-size: .92rem;
  letter-spacing: .02em; color: var(--teinte-texte, var(--accent));
  padding-top: .18em;
}
.repere :is(h2, h3, h4) { font-size: 1.1rem; margin-bottom: .3rem;
                         line-height: 1.05; letter-spacing: 0; }
.repere p { margin: 0; font-size: .96rem; color: var(--ink-soft); }

.chiffres--page {
  gap: 2.6rem; margin: 2.2rem 0 2.6rem;
  padding: 1.6rem 0; border-block: 1px solid var(--ligne);
}
.chiffres--page .chiffre__valeur { color: var(--teinte, var(--accent)); }

@media (max-width: 640px) {
  .repere { grid-template-columns: 1fr; gap: .35rem; }
  .chiffres--page { gap: 1.6rem 2rem; }
}

/* ------------------------------------------------------ déclaration forte -- */
.declaration {
  margin: 2.4rem 0;
  padding: clamp(1.6rem, 3vw, 2.2rem) clamp(1.6rem, 3vw, 2.4rem);
  background: var(--paper-2);
  border-radius: var(--r-l);
  border-left: 5px solid var(--teinte, var(--accent));
}
.declaration p {
  font-family: var(--titre); font-weight: 620;
  font-size: clamp(1.25rem, 2.2vw, 1.7rem); line-height: 1.25;
  letter-spacing: -0.018em; margin: 0 0 .7rem;
  text-wrap: balance;
}
.declaration cite {
  font-style: normal; font-size: .84rem; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-faint); font-weight: 700;
}

/* --------------------------------------------------------------- pastilles - */
/* on annule la puce ronde héritée des listes de contenu */
.contenu .puces li { padding-left: 0; margin-bottom: 0; color: inherit; }
.contenu .puces li::before { content: none; }

.puces {
  list-style: none; padding: 0;
  margin: 1.4rem 0 2rem;
  display: flex; flex-wrap: wrap; gap: .5rem;
}
.puce {
  padding: .45em 1em; border-radius: 999px;
  background: var(--teinte-clair); color: var(--teinte-texte, var(--ink));
  font-family: var(--titre); font-weight: 620; font-size: .95rem;
}
.puce--avenir {
  background: transparent; color: var(--ink-soft);
  border: 1.6px dashed var(--teinte);
}

/* ---------------------------------------------------------------- glossaire */
.glossaire {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 1rem; margin: 1.6rem 0 2.4rem;
}
.glossaire__item {
  padding: 1.3rem 1.4rem;
  background: var(--paper); border: 1.5px solid var(--ligne);
  border-radius: var(--r-m);
  border-top: 5px solid var(--teinte);
  transition: transform 240ms var(--sortie), box-shadow 240ms var(--sortie);
}
@media (hover: hover) and (pointer: fine) {
  .glossaire__item:hover { transform: translateY(-4px); box-shadow: var(--ombre-m); }
}
.glossaire__sigle {
  font-family: var(--titre); font-weight: 700;
  font-size: 2rem; line-height: 1; letter-spacing: -0.03em;
  color: var(--teinte); margin-bottom: .35rem;
}
.glossaire__mot {
  font-family: var(--titre); font-weight: 620; font-size: .95rem;
  line-height: 1.25; margin-bottom: .6rem;
}
.glossaire__item p { font-size: .92rem; color: var(--ink-soft); margin: 0; }

/* pied de carte : document + lien */
.carte__pied {
  margin-top: auto; padding-top: 1.1rem;
  display: flex; flex-direction: column; align-items: flex-start; gap: .8rem;
}
.carte__pied .lien-fleche { margin-top: 0; padding-top: 0; }

/* --------------------------------- professionnel.les listés dans une carte -- */
.mini-pros {
  display: grid; gap: .1rem;
  margin-top: 1.2rem; padding-top: .9rem;
  border-top: 1px solid var(--ligne);
}
.mini-pro {
  display: flex; align-items: center; gap: .7rem;
  padding: .45rem .5rem .45rem 0;
  border-radius: 12px; text-decoration: none;
  transition: background-color 200ms ease, padding-left 200ms var(--sortie);
}
.mini-pro img {
  width: 38px; height: 38px; flex: none;
  border-radius: 50%; object-fit: cover; object-position: center 20%;
  border: 2px solid var(--teinte-clair);
}
.mini-pro__nom {
  display: block; font-family: var(--titre); font-weight: 620;
  font-size: .92rem; line-height: 1.15;
}
.mini-pro__role {
  display: block; font-size: .76rem; line-height: 1.25;
  color: var(--teinte-texte, var(--ink-soft));
}
@media (hover: hover) and (pointer: fine) {
  .mini-pro:hover { background: var(--teinte-clair); padding-left: .5rem; }
}

.mini-pro { align-items: flex-start; }
.mini-pro img { margin-top: .15rem; }
.mini-pro__quand {
  display: block; margin-top: .25rem;
  font-size: .82rem; line-height: 1.4; color: var(--ink-soft);
}

.carte-groupe ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.carte-groupe li {
  position: relative; padding-left: 1.1em;
  font-size: .93rem; color: var(--ink-soft); line-height: 1.45;
}
.carte-groupe li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--teinte); opacity: .5;
}
.carte-groupe__pied {
  margin-top: .9rem; padding-top: .8rem;
  border-top: 1px dashed var(--ligne);
  font-size: .88rem; color: var(--ink-soft);
}

/* ------------------------------------------------- dépliant dans une carte -- */
.pliage { margin-top: 1.2rem; }
.pliage > summary {
  display: inline-flex; align-items: center; gap: .45em;
  cursor: pointer; list-style: none;
  font-family: var(--titre); font-weight: 620; font-size: .95rem;
  color: var(--ink);
  border-bottom: 2px solid color-mix(in srgb, var(--teinte) 45%, transparent);
  padding-bottom: .12em;
  transition: border-color 200ms ease, gap 200ms var(--sortie);
}
.pliage > summary::-webkit-details-marker { display: none; }
.pliage > summary .ico {
  transition: transform 240ms var(--sortie);
  transform: rotate(90deg);
}
.pliage[open] > summary .ico { transform: rotate(-90deg); }
@media (hover: hover) and (pointer: fine) {
  .pliage > summary:hover { border-color: var(--teinte); gap: .65em; }
}
.pliage .mini-pros { border-top: 0; margin-top: .9rem; padding-top: 0; }
.pliage[open] .mini-pros { animation: deplier 320ms var(--sortie) both; }
@keyframes deplier {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------- FAQ -- */
.faq { display: grid; gap: .1rem; margin: 1.6rem 0; }
.pliage--faq {
  margin-top: 0; padding: .2rem 0;
  border-bottom: 1px solid var(--ligne);
}
.pliage--faq > summary {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; width: 100%;
  padding: .95rem 0; border-bottom: 0;
  font-size: 1rem; line-height: 1.35;
}
.pliage--faq > summary .ico { margin-top: .2em; flex: none; }
.pliage__reponse { padding-bottom: 1.1rem; }
.pliage__reponse p { font-size: .96rem; color: var(--ink-soft); margin: 0 0 .8em; }
.pliage__reponse p:last-child { margin-bottom: 0; }
.pliage--faq[open] .pliage__reponse { animation: deplier 320ms var(--sortie) both; }
@media (hover: hover) and (pointer: fine) {
  .pliage--faq > summary:hover { color: var(--teinte-texte, var(--accent)); }
}

.pliage__corps { animation: deplier 320ms var(--sortie) both; }
.pliage__intro {
  margin: .9rem 0 0; font-size: .92rem; line-height: 1.55; color: var(--ink-soft);
}
.pliage__corps .lien-fleche { margin-top: 1rem; font-size: .92rem; }

/* ----------------------------------------------------------------- vidéo -- */
.video {
  margin: 1.8rem 0;
  display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: clamp(1.2rem, 3vw, 2rem); align-items: start;
}
.video video {
  width: 100%; height: auto; display: block;
  border-radius: var(--r-m);
  background: var(--paper-3);
  border: 1.5px solid var(--ligne);
}
.video figcaption { font-size: .95rem; color: var(--ink-soft); }
.video figcaption p { margin-bottom: .8em; }
.video figcaption p:last-child { margin-bottom: 0; font-size: .88rem; color: var(--ink-faint); }

@media (max-width: 620px) {
  .video { grid-template-columns: 1fr; }
  .video video { max-width: 20rem; }
}