/* nscm.be : un premier écran qui dit tout, puis l'agenda qui se remplit, puis un seul appel : le call de 30 minutes.
   L'univers de la bannière LinkedIn. Pensé d'abord pour le téléphone.
   La grille : 5 colonnes, comme les 5 jours de la semaine et les 5 logos. Le texte en prend 3, la photo 2. */
@font-face {
  font-family: "Fraunces";
  src: url("/fonts/fraunces.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --creme: #FBFAF7;
  --nuit: #0E1A2B;
  --nuit-clair: #1D3350;
  --gris: #5E6672;
  --gris-clair: #B9C0CA;
  --bord: #E7E3DA;
  --blanc: #FFFFFF;
  --bleu: #3D8BE8;
  --orange: #F2A541;
  --vert: #3FC07A;
  --marqueur: #F7D49B;
  --erreur: #B4431C;
  --bord-champ: #8C94A0;
  /* La colonne, la marge, l'intervalle de la grille. */
  --largeur: 1120px;
  --marge: 20px;
  --pas: 6px;
  /* De la colonne au bord de l'écran : ce qui permet aux ronds de déborder. */
  --gouttiere: max(var(--marge), calc((100vw - var(--largeur)) / 2));
  /* Les rayons : un seul jeu, partout. */
  --r-petit: 10px;
  --r-moyen: 14px;
  --r-grand: 28px;
  --titre: "Fraunces", Georgia, "Times New Roman", serif;
  --texte: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --sortie: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  overflow-x: clip;
  background: var(--creme);
  color: var(--nuit);
  font: 400 1.0625rem/1.55 var(--texte);
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Les ronds débordent de l'écran sans jamais élargir la page. */
main { overflow-x: hidden; overflow-x: clip; }
img, svg { display: block; }
img { max-width: 100%; }
h1, h2, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--bleu); outline-offset: 3px; }
::selection { background: var(--marqueur); color: var(--nuit); }
.insecable { white-space: nowrap; }

.enveloppe { width: calc(100% - 2 * var(--marge)); max-width: var(--largeur); margin-inline: auto; }

/* Les titres : Fraunces en coupe de titrage. Plus le corps est grand, plus le dessin s'affine. */
h1, .semaine h2, .contact h2, .popup-titre {
  font-family: var(--titre);
  font-optical-sizing: none;
  text-wrap: balance;
}
h1 {
  font-weight: 580;
  font-variation-settings: "opsz" 84;
  font-size: clamp(2.5rem, 12.8vw, 5.25rem);
  line-height: 1.03;
  letter-spacing: -0.01em;
  max-width: 6.8em;
}
/* Le surligneur : posé sur la ligne de base, il dépasse à peine du mot, comme un vrai coup de feutre. */
mark {
  color: inherit;
  margin-inline: -0.04em;
  padding-inline: 0.04em;
  background: linear-gradient(var(--marqueur), var(--marqueur)) no-repeat 0 86% / 100% 0.34em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.etiquette { font: 500 0.9375rem/1.4 var(--texte); color: var(--gris); }

.c-bleu { background: var(--bleu); }
.c-orange { background: var(--orange); }
.c-vert { background: var(--vert); }

/* Le logo NSCM, en vrai texte : net à toute taille. */
.logo {
  display: inline-grid;
  flex: none;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 3px;
  row-gap: 3px;
  width: 64px;
  font: 700 15px/1 var(--texte);
  text-align: center;
  color: var(--nuit);
}
.logo i { aspect-ratio: 1; border-radius: 3.5px; }
.logo b { font-weight: 700; }

.entete { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; padding-top: 16px; }
.entete-lien {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.003em;
  text-decoration: underline; text-decoration-color: var(--marqueur); text-decoration-thickness: 2px; text-underline-offset: 5px;
  transition: text-decoration-color 200ms var(--sortie);
}
.entete-lien:hover { text-decoration-color: var(--orange); }

/* Les boutons */
.boutons { display: flex; flex-wrap: wrap; gap: 10px; }
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 24px;
  border: 0; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: 1rem; font-weight: 600; line-height: 1.15; letter-spacing: -0.005em; text-decoration: none; text-align: center; white-space: nowrap;
  transition: background-color 200ms var(--sortie), box-shadow 200ms var(--sortie), transform 200ms var(--sortie);
}
.boutons .bouton { flex: 1 1 auto; }
.bouton:hover { transform: translateY(-1px); }
.bouton:active { transform: none; }
.bouton svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.bouton-plein { background: var(--nuit); color: var(--creme); }
.bouton-plein:hover { background: var(--nuit-clair); box-shadow: 0 10px 24px -12px rgba(14, 26, 43, .55); }
.bouton-orange { background: var(--orange); color: var(--nuit); }
.bouton-orange:hover { background: var(--marqueur); }

.rond { position: absolute; display: block; border-radius: 50%; }

/* 1. L'accroche */
.accroche { padding-top: 12px; }
.surtitre { font-size: 0.9375rem; font-weight: 500; line-height: 1.4; color: var(--gris); }
h1 { margin-top: 8px; }
.sous { margin-top: 12px; font: 400 1.1875rem/1.26 var(--titre); letter-spacing: -0.004em; }
/* Sur téléphone, la coupure tombe après la virgule. */
.sous-debut { display: block; }
.accroche .boutons { margin-top: 18px; }
.portrait { --photo: clamp(124px, 39.5vw, 148px); position: relative; display: flex; align-items: center; margin: 20px 0 0; min-height: var(--photo); padding-left: calc(var(--photo) + 16px); }
.ronds { position: absolute; left: 0; top: 0; width: var(--photo); aspect-ratio: 1; }
.rond-photo { left: 0; top: 0; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.ronds .rond-orange { --d: clamp(80px, 25.6vw, 96px); background: var(--orange); width: var(--d); aspect-ratio: 1; left: calc(100vw - var(--marge) - var(--d) / 2); top: -20px; z-index: -1; }
.ronds .rond-vert { background: var(--vert); width: 36%; aspect-ratio: 1; left: -9%; bottom: -3%; z-index: -1; }
figcaption { font-size: 0.875rem; line-height: 1.32; color: var(--gris); text-wrap: balance; }
figcaption strong { display: block; margin-bottom: 1px; font-size: 1rem; font-weight: 600; letter-spacing: -0.005em; color: var(--nuit); }

/* 2. La preuve : les logos complets, avec le même poids dans chaque tuile. */
.preuve { margin-top: 20px; }
.logos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--pas); margin-top: 8px; }
.logos li {
  display: grid; place-items: center; grid-column: span 2;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  height: 56px; padding: 7px 10px;
  background: var(--blanc); border: 1px solid var(--bord); border-radius: var(--r-moyen);
}
/* Sur téléphone, les deux logos au trait fin prennent les grandes tuiles : ils restent lisibles. */
.logos li:nth-child(1), .logos li:nth-child(4) { grid-column: span 3; }
.logos li:nth-child(4) { order: -1; }
.logos li:nth-child(1) { order: -2; }
.logos img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.logos .l-contigo { max-width: min(84%, 170px); }
.logos .l-belga { max-width: min(92%, 128px); }
.logos .l-dutra { max-height: 27px; }
.logos .l-powerspot { max-height: 42px; }
.logos .l-sourse { max-width: min(86%, 118px); }

/* 3. La semaine : le problème, puis l'agenda. Les raisons sont des exemples, pas des clients. */
.semaine { margin-top: 64px; }
.semaine h2 {
  font-weight: 420;
  font-variation-settings: "opsz" 80;
  font-size: clamp(1.75rem, 7.6vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: -0.008em;
}
/* Le compliment en demi-teinte, la promesse en plein : la phrase qui compte porte le poids. */
.semaine h2 span { display: block; margin-top: 0.08em; font-weight: 590; }
.exemple { margin-top: 14px; font-size: 0.8125rem; font-weight: 500; color: var(--gris); }

/* L'agenda posé à même la page : des filets, des heures en marge, et les rendez-vous sur les colonnes de la grille. */
.agenda {
  --rdv-x: clamp(6px, 2.1vw, 8px);
  display: grid; margin-top: 24px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--pas);
  grid-template-rows: 30px repeat(8, 42px) 1px;
}
.jr { grid-row: 1; padding-left: var(--rdv-x); font-size: 0.8125rem; font-weight: 600; line-height: 1.3; color: var(--gris); }
.d4 { color: var(--nuit); }
.heure { display: none; font-size: 0.75rem; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--gris); }
.ligne { grid-column: 1 / -1; align-self: start; border-top: 1px solid var(--bord); }
.t1 { grid-row: 2; } .t2 { grid-row: 3; } .t3 { grid-row: 4; } .t4 { grid-row: 5; } .t5 { grid-row: 6; }
.t6 { grid-row: 7; } .t7 { grid-row: 8; } .t8 { grid-row: 9; } .t9 { grid-row: 10; }

.rdv { z-index: 1; display: flex; flex-direction: column; margin-block: 2px 1px; padding: 7px var(--rdv-x); border-radius: var(--r-petit); overflow: hidden; }
.rdv small { font-size: 0.71875rem; font-weight: 500; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rdv b { margin-top: 3px; font-size: clamp(0.71875rem, 3.34vw, 0.78125rem); font-weight: 600; line-height: 1.22; letter-spacing: -0.003em; text-wrap: balance; }
.r1 { grid-row: 2 / span 2; } .r2 { grid-row: 7 / span 2; } .r3 { grid-row: 3 / span 2; }
.r4 { grid-row: 8 / span 2; } .r5 { grid-row: 2 / span 2; } .r6 { grid-row: 6 / span 2; }
.r7 { grid-row: 8 / span 2; } .r8 { grid-row: 2 / span 2; } .r9 { grid-row: 7 / span 2; }

/* Le créneau encore libre : c'est lui, le bouton. Le seul objet qui sort de la grille. */
.vous {
  position: relative; z-index: 2; grid-row: 4 / span 3;
  display: flex; flex-direction: column; margin-block: 2px 1px; padding: 9px var(--rdv-x) 10px; border-radius: var(--r-moyen);
  background: var(--nuit); color: var(--creme); text-decoration: none;
  box-shadow: 0 1px 2px rgba(14, 26, 43, .16), 0 14px 28px -14px rgba(14, 26, 43, .55);
  transition: transform 240ms var(--sortie), box-shadow 240ms var(--sortie);
}
.vous:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(14, 26, 43, .16), 0 22px 38px -16px rgba(14, 26, 43, .62); }
.vous small { font-size: 0.71875rem; line-height: 1.2; font-variant-numeric: tabular-nums; color: var(--gris-clair); }
.vous b { font: 500 clamp(1rem, 5vw, 1.1875rem)/1.06 var(--titre); letter-spacing: -0.008em; white-space: nowrap; }
.vous i { margin-top: auto; font-size: 0.71875rem; font-style: normal; font-weight: 600; line-height: 1.2; color: var(--orange); }
.soc { margin-top: 1px; font-size: clamp(0.6875rem, 3.1vw, 0.75rem); font-weight: 500; line-height: 1.2; }
.vous-qui { display: flex; flex-direction: column; gap: 4px; margin-block: auto; }
.vous-qui img { width: 44px; height: 44px; border-radius: 50%; box-shadow: 0 0 0 2px var(--orange); }
.fleche { display: none; }

/* Sur téléphone, 3 jours suffisent. */
.d3, .d5, .r5, .r6, .r8, .r9 { display: none; }
.d1, .r1, .r2 { grid-column: 1; }
.d2, .r3, .r4 { grid-column: 2; }
.d4, .r7, .vous { grid-column: 3; }

/* Ce qui bouge suit le défilement. Le surligneur du premier écran, lui, est là d'emblée : il fait partie de l'identité, pas de l'effet. */
/* Les effets. Rien n'en dépend : sans eux, la page est simplement déjà pleine. */
@keyframes trait { from { background-size: 0 0.34em; } to { background-size: 100% 0.34em; } }
@keyframes monte { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
@keyframes eclot { from { opacity: 0; scale: .7; } to { opacity: 1; scale: 1; } }
@keyframes pose { from { opacity: 0; translate: 0 14px; scale: .86; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes flotte { from { translate: 0 0; } to { translate: 0 -12px; } }
@keyframes fondu { from { opacity: 0; } to { opacity: 1; } }
@keyframes appel { 0%, 100% { box-shadow: 0 0 0 0 rgba(242, 165, 65, .55); } 70% { box-shadow: 0 0 0 11px rgba(242, 165, 65, 0); } }

@media screen and (prefers-reduced-motion: no-preference) {
  :root { --rebond: cubic-bezier(.2, 1.35, .4, 1); }

  /* Le premier écran s'installe en moins d'une seconde et demie. */
  .surtitre, h1, .sous, .accroche .boutons, figcaption, .preuve h2, .logos li { animation: monte 700ms var(--sortie) both; }
  h1 { animation-delay: 70ms; }
  h1 mark { animation: trait 800ms 560ms var(--sortie) both; }
  .sous { animation-delay: 240ms; }
  .accroche .boutons { animation-delay: 340ms; }
  .rond-photo { animation: eclot 800ms 140ms var(--rebond) both; }
  .ronds .rond-orange { animation: eclot 900ms 340ms var(--rebond) both, flotte 7s 1.4s ease-in-out infinite alternate; }
  .ronds .rond-vert { animation: eclot 900ms 480ms var(--rebond) both, flotte 9s 1.6s ease-in-out infinite alternate-reverse; }
  figcaption { animation-delay: 620ms; }
  .preuve h2 { animation-delay: 640ms; }
  .logos li:nth-child(1) { animation-delay: 700ms; }
  .logos li:nth-child(2) { animation-delay: 770ms; }
  .logos li:nth-child(3) { animation-delay: 840ms; }
  .logos li:nth-child(4) { animation-delay: 910ms; }
  .logos li:nth-child(5) { animation-delay: 980ms; }
  .logos li { transition: transform 240ms var(--sortie), box-shadow 240ms var(--sortie); }
  .logos li:hover { transform: translateY(-3px); box-shadow: 0 12px 24px -16px rgba(14, 26, 43, .4); }

  /* Le trait sous le mot, à l'arrivée sur le titre. */
  .effets .semaine h2:not(.vu) mark { background-size: 0 0.34em; }
  .effets .semaine h2.vu mark { animation: trait 800ms var(--sortie) both; }

  /* La semaine se remplit sous les yeux, de haut en bas. Le créneau libre arrive en dernier, et il appelle. */
  .effets .agenda:not(.vu) .rdv, .effets .agenda:not(.vu) .vous { opacity: 0; }
  .effets .agenda.vu .rdv { animation: pose 560ms var(--rebond) both; }
  .effets .agenda.vu .r1 { animation-delay: 0ms; }
  .effets .agenda.vu .r5 { animation-delay: 130ms; }
  .effets .agenda.vu .r8 { animation-delay: 260ms; }
  .effets .agenda.vu .r3 { animation-delay: 390ms; }
  .effets .agenda.vu .r6 { animation-delay: 560ms; }
  .effets .agenda.vu .r2 { animation-delay: 690ms; }
  .effets .agenda.vu .r9 { animation-delay: 820ms; }
  .effets .agenda.vu .r4 { animation-delay: 950ms; }
  .effets .agenda.vu .r7 { animation-delay: 1080ms; }
  .effets .agenda.vu .vous { animation: pose 720ms 1380ms var(--rebond) both; }
  .vous::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; animation: appel 2.6s 2.2s ease-out infinite; }

  /* Le bloc sombre : la phrase monte, les ronds éclosent puis flottent. */
  .effets .contact:not(.vu) h2, .effets .contact:not(.vu) .boutons, .effets .contact:not(.vu) .contact-autres, .effets .contact:not(.vu) .contact-zone, .effets .contact:not(.vu) .rond { opacity: 0; }
  .effets .contact.vu h2 { animation: monte 800ms var(--sortie) both; }
  .effets .contact.vu .boutons { animation: monte 700ms 160ms var(--sortie) both; }
  .effets .contact.vu .contact-autres { animation: monte 700ms 280ms var(--sortie) both; }
  .effets .contact.vu .contact-zone { animation: monte 700ms 360ms var(--sortie) both; }
  .effets .contact.vu .r-bleu { animation: eclot 1000ms 100ms var(--rebond) both, flotte 8s 1.4s ease-in-out infinite alternate; }
  .effets .contact.vu .r-vert { animation: eclot 1000ms 280ms var(--rebond) both, flotte 10s 1.6s ease-in-out infinite alternate-reverse; }
  .effets .contact.vu .r-orange { animation: eclot 1000ms 440ms var(--rebond) both, flotte 9s 1.8s ease-in-out infinite alternate; }

  .popup[open] { animation: pose 380ms var(--sortie) both; }
  .popup[open]::backdrop { animation: fondu 240ms ease both; }
}

/* 4. On en parle 30 minutes ? */
.contact {
  --panneau: 8px;
  position: relative; overflow: hidden;
  margin: 64px var(--panneau) 0; padding-block: 48px 124px;
  background: var(--nuit); color: var(--creme);
  border-radius: var(--r-grand);
}
/* Le texte du panneau retombe exactement sur la colonne de la page. */
.contact-dedans { position: relative; z-index: 1; width: min(var(--largeur), calc(100% - 2 * (var(--marge) - var(--panneau)))); margin-inline: auto; }
.contact h2 {
  max-width: 7em;
  font-weight: 540;
  font-variation-settings: "opsz" 144;
  font-size: clamp(2.75rem, 14.6vw, 7rem);
  line-height: 1;
  letter-spacing: -0.012em;
}
.contact .boutons { margin-top: 24px; }
.contact-autres { display: flex; flex-wrap: wrap; gap: 2px 22px; margin-top: 12px; }
.contact-autres a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 500; letter-spacing: -0.003em;
  text-decoration: underline; text-decoration-color: rgba(251, 250, 247, .4); text-decoration-thickness: 1px; text-underline-offset: 5px;
  transition: text-decoration-color 200ms var(--sortie), color 200ms var(--sortie);
}
.contact-autres a:hover { color: var(--marqueur); text-decoration-color: currentColor; }
.contact a:focus-visible { outline-color: var(--creme); }
.contact-zone { font-size: 0.9375rem; line-height: 1.4; color: var(--gris-clair); text-wrap: balance; }
/* Les trois ronds comme sur la bannière : le bleu en haut, le vert et l'orange en bas. */
.contact .r-bleu { background: var(--bleu); width: 40vw; aspect-ratio: 1; right: -12vw; top: -20vw; }
.contact .r-vert { background: var(--vert); width: 25vw; aspect-ratio: 1; right: 44vw; bottom: -9vw; }
.contact .r-orange { background: var(--orange); width: 38vw; aspect-ratio: 1; right: -8vw; bottom: -18vw; }

/* Pied de page */
.pied { display: flex; align-items: center; gap: 18px; padding-block: 20px 24px; font-size: 0.75rem; line-height: 1.5; color: var(--gris); }

/* La popup : 30 minutes avec Vincent. La photo et ses deux ronds rappellent le premier écran. */
html:has(.popup[open]) { overflow: hidden; scrollbar-gutter: stable; }
.popup {
  width: min(600px, calc(100% - 24px));
  max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px);
  margin: auto; padding: 0; border: 0; overflow: auto; overscroll-behavior: contain;
  border-radius: var(--r-grand);
  background: var(--creme); color: var(--nuit);
  box-shadow: 0 32px 80px -24px rgba(14, 26, 43, .6);
}
.popup::backdrop { background: rgba(14, 26, 43, .62); }
.popup [hidden] { display: none; }
.popup-dedans { position: relative; padding: 24px 20px 20px; }
.popup-fermer {
  position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%; background: none; color: var(--gris); cursor: pointer;
  transition: background-color 200ms var(--sortie), color 200ms var(--sortie);
}
.popup-fermer:hover { background: var(--bord); color: var(--nuit); }
.popup-fermer svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; }
/* Sur téléphone, la phrase passe sous la photo : le formulaire remonte d'autant. */
.popup-tete { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 14px; }
.popup-tete > div { display: contents; }
.popup-tete .popup-titre { padding-right: 32px; }
.popup-tete .popup-sous { grid-column: 1 / -1; margin-top: 12px; }
.popup-ronds { position: relative; flex: none; width: 52px; height: 52px; margin: 2px 0 2px 4px; }
.popup-ronds img { position: relative; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.popup-ronds::before, .popup-ronds::after { content: ""; position: absolute; border-radius: 50%; }
.popup-ronds::before { width: 34%; height: 34%; top: -2px; right: -10%; background: var(--orange); }
.popup-ronds::after { width: 29%; height: 29%; bottom: -1px; left: -8%; background: var(--vert); }
.popup-titre { font-weight: 540; font-variation-settings: "opsz" 80; font-size: clamp(1.5rem, 6.6vw, 2.125rem); line-height: 1.08; letter-spacing: -0.008em; }
.popup-sous { margin-top: 6px; font-size: 0.9375rem; line-height: 1.4; color: var(--gris); text-wrap: pretty; }
.piege { display: none; }
.champs { display: grid; gap: 10px; margin-top: 16px; }
.champ label { display: block; margin-bottom: 5px; font-size: 0.875rem; font-weight: 600; line-height: 1.3; }
.champ label span { font-weight: 400; color: var(--gris); }
.champ input, .champ textarea {
  display: block; width: 100%; min-height: 48px; padding: 0 14px;
  border: 1px solid var(--bord-champ); border-radius: var(--r-petit);
  background: var(--blanc); color: var(--nuit);
  font: 400 1rem/1.4 var(--texte);
  transition: border-color 160ms var(--sortie), box-shadow 160ms var(--sortie);
}
.champ textarea { padding-block: 12px; min-height: 60px; resize: vertical; }
.champ input:focus, .champ textarea:focus { outline: none; border-color: var(--bleu); box-shadow: 0 0 0 2px var(--bleu); }
.champ input:user-invalid { border-color: var(--erreur); }
.popup-erreur { margin-top: 14px; font-size: 0.9375rem; font-weight: 500; line-height: 1.4; color: var(--erreur); }
.popup-pied { display: grid; gap: 12px; margin-top: 16px; }
.popup-pied .bouton:disabled { opacity: .6; cursor: progress; transform: none; }
.popup-note { font-size: 0.8125rem; line-height: 1.4; color: var(--gris); text-wrap: pretty; }
.popup a { text-underline-offset: 2px; }
.popup-merci { padding: 28px 28px 8px 0; outline: none; }
.popup-merci .bouton { margin-top: 20px; }

/* La page introuvable */
.page-404 { padding-block: 64px 96px; }
.page-404 .bouton { margin-top: 28px; padding-inline: 24px; }

/* Tablette */
@media (min-width: 620px) {
  :root { --marge: 32px; --pas: 12px; }
  .boutons .bouton { flex: 0 1 auto; }
  .logos li { height: 64px; }
  .logos .l-dutra { max-height: 32px; }
  .logos .l-powerspot { max-height: 48px; }
  .accroche { padding-top: 24px; }
  .sous { margin-top: 16px; font-size: 1.375rem; }
  .sous-debut { display: inline; }
  .accroche .boutons { margin-top: 24px; }
  .preuve { margin-top: 32px; }
  .portrait { --photo: 196px; margin-top: 28px; padding-left: calc(var(--photo) + 28px); }
  .ronds .rond-orange { --d: 150px; top: -6px; }
  figcaption { font-size: 0.9375rem; }
  .semaine, .contact { margin-top: 88px; }
  .contact { --panneau: 12px; padding-block: 64px 150px; }
  .contact .r-bleu { width: clamp(200px, 36vw, 300px); right: -70px; top: clamp(-130px, -15vw, -90px); }
  .contact .r-vert { width: 150px; right: 300px; bottom: -60px; }
  .contact .r-orange { width: 230px; right: -50px; bottom: -90px; }

  .popup-dedans { padding: 32px 36px 28px; }
  .popup-fermer { top: 12px; right: 12px; }
  .popup-tete { column-gap: 18px; }
  .popup-ronds { grid-row: 1 / span 2; width: 76px; height: 76px; }
  .popup-tete .popup-titre { align-self: end; }
  .popup-tete .popup-sous { grid-column: 2; align-self: start; margin-top: 6px; }
  .champs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 20px; }
  .champ textarea { min-height: 72px; }
  .champ-large { grid-column: 1 / -1; }
  .popup-pied { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 18px; }
}

/* Les 5 logos en ligne, dès qu'ils y restent lisibles. */
@media (min-width: 760px) {
  .logos { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .logos li, .logos li:nth-child(1), .logos li:nth-child(4) { grid-column: span 1; order: 0; padding-inline: 10px; }
  .logos .l-contigo { max-width: 96%; }
  .logos .l-powerspot { max-width: 96%; }
}

/* Ordinateur : le premier écran tient dans la fenêtre, le reste vient au défilement. */
@media (min-width: 960px) {
  :root {
    --largeur: clamp(1120px, 72vw, 1360px);
    --marge: 48px;
    --pas: 14px;
    --r-grand: 32px;
  }
  body { font-size: 1.0625rem; }
  .ecran1 { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
  .entete { padding-top: clamp(14px, 2.4vh, 24px); }

  .accroche {
    flex: 1; display: grid; align-items: center; padding-top: 0;
    grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--pas);
  }
  .accroche-texte { grid-column: 1 / span 3; }
  .surtitre { font-size: 1rem; }
  h1 { margin-top: clamp(10px, 1.7vh, 18px); font-weight: 570; font-variation-settings: "opsz" 110; font-size: clamp(3.6rem, min(6.4vw, 11.8vh), 7.5rem); line-height: 1.02; letter-spacing: -0.006em; }
  .sous { margin-top: clamp(14px, 2.6vh, 26px); font-size: clamp(1.25rem, min(1.62vw, 2.9vh), 1.75rem); line-height: 1.25; }
  .accroche .boutons { margin-top: clamp(20px, 3.6vh, 38px); }
  .bouton { min-height: 58px; padding-inline: 28px; font-size: 1.0625rem; }

  .portrait { grid-column: 4 / span 2; display: block; justify-self: end; width: min(100%, 52vh); min-height: 0; margin: 0; padding-left: 0; }
  .ronds { position: relative; width: 100%; }
  /* Le rond orange part de derrière la photo et sort de l'écran, quelle que soit la largeur de la fenêtre. */
  .ronds .rond-orange {
    --d: min(calc(var(--gouttiere) + 110px), 480px);
    width: var(--d); left: auto; right: calc(-1 * var(--gouttiere) - 70px); top: calc(26% - var(--d) / 2); z-index: auto;
  }
  .ronds .rond-vert { width: 40%; left: -17%; bottom: 3%; z-index: auto; }
  figcaption { margin-top: clamp(10px, 1.7vh, 16px); font-size: 0.9375rem; line-height: 1.45; text-align: center; }
  figcaption strong { font-size: 1.0625rem; }

  .preuve { margin-top: 0; padding-bottom: clamp(16px, 2.8vh, 30px); }
  .logos { margin-top: clamp(8px, 1.3vh, 12px); }
  .logos li { height: clamp(64px, 9.4vh, 96px); padding: 8px clamp(10px, 1.2vw, 18px); }
  .logos .l-contigo { max-width: clamp(120px, 82%, 190px); }
  .logos .l-belga { max-width: min(72%, 170px); }
  .logos .l-dutra { max-height: clamp(32px, 4.8vh, 46px); }
  .logos .l-powerspot { max-width: 86%; max-height: clamp(46px, 6.6vh, 62px); }
  .logos .l-sourse { max-width: min(70%, 165px); }

  .semaine { margin-top: clamp(72px, 12vh, 128px); }
  .semaine h2 { font-size: clamp(2.5rem, 4vw, 4rem); line-height: 1.06; }
  .agenda {
    margin-top: clamp(28px, 4.6vh, 48px);
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-rows: 34px repeat(8, clamp(46px, 6.2vh, 62px)) 1px;
  }
  .agenda { --rdv-x: 12px; }
  .jr { font-size: 0.875rem; }
  /* Les heures en marge, posées sur leur filet. */
  .heure { display: block; grid-column: 1; justify-self: start; align-self: start; transform: translate(calc(-100% - 10px), -50%); }
  .d3 { display: block; }
  .d5 { display: block; }
  .r5, .r6, .r8, .r9 { display: flex; }
  .d1, .r1, .r2 { grid-column: 1; }
  .d2, .r3, .r4 { grid-column: 2; }
  .d3, .r5, .r6 { grid-column: 3; }
  .d4, .r7, .vous { grid-column: 4; }
  .d5, .r8, .r9 { grid-column: 5; }
  .rdv { padding-block: clamp(8px, 1.2vh, 12px); }
  .rdv small { font-size: 0.75rem; }
  .rdv b { font-size: clamp(0.875rem, 1.02vw, 1rem); line-height: 1.24; }
  .vous { margin-inline: -4px; padding: clamp(12px, 1.7vh, 18px) 16px; }
  .vous small { font-size: 0.8125rem; }
  .vous-qui { flex-direction: row; align-items: center; gap: clamp(10px, 1vw, 16px); }
  .vous-qui img { width: clamp(52px, 4.4vw, 84px); height: clamp(52px, 4.4vw, 84px); }
  .vous b { font-size: clamp(1.375rem, 1.85vw, 2.125rem); }
  .soc { font-size: clamp(0.78125rem, 0.92vw, 0.875rem); }
  .vous i { font-size: clamp(0.8125rem, 1vw, 0.9375rem); }
  .fleche { display: inline-block; transition: transform 240ms var(--sortie); }
  .vous:hover .fleche { transform: translateX(3px); }

  .contact { --panneau: 20px; margin-top: clamp(72px, 12vh, 128px); padding-block: clamp(72px, 11vh, 112px) clamp(64px, 9.6vh, 96px); }
  .contact h2 { font-size: clamp(4.5rem, 7.6vw, 8.25rem); line-height: .99; }
  .contact .boutons { margin-top: clamp(28px, 4.4vh, 40px); }
  .contact-autres { margin-top: 18px; }
  .contact-zone { margin-top: 2px; }
  .contact .r-bleu { width: min(25vw, 420px); right: min(4vw, 68px); top: max(-7.4vw, -124px); }
  .contact .r-vert { width: min(13.6vw, 228px); right: min(21.4vw, 360px); bottom: max(-4vw, -66px); }
  .contact .r-orange { width: min(19vw, 320px); right: max(-6vw, -100px); bottom: max(-5.4vw, -90px); }

  .pied { justify-content: space-between; padding-block: 28px 32px; font-size: 0.8125rem; }
  .pied p { text-align: right; }
}

@media (prefers-reduced-motion: reduce) {
  .bouton, .vous, .entete-lien, .contact-autres a, .fleche, .popup-fermer, .champ input, .champ textarea { transition: none; }
  .bouton:hover, .vous:hover { transform: none; }
}