/* Numeo : socle du site. Les couleurs viennent de la charte du 24/10. */

@font-face { font-family: Poppins; font-weight: 300; font-style: normal; font-display: swap; src: url('../fonts/poppins-latin-300-normal.woff2') format('woff2'); }
@font-face { font-family: Poppins; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/poppins-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: Poppins; font-weight: 500; font-style: normal; font-display: swap; src: url('../fonts/poppins-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: Poppins; font-weight: 600; font-style: normal; font-display: swap; src: url('../fonts/poppins-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: Poppins; font-weight: 700; font-style: normal; font-display: swap; src: url('../fonts/poppins-latin-700-normal.woff2') format('woff2'); }

:root {
  --encre: #081426;
  --nuit: #0F2A4F;
  --signature: #3F7BC2;
  --brume: #C3CBD4;
  --papier: #F4F6F8;
  --aube-clair: #8DB6E6;
  --gris: #4E5866;
  --rouge-pointage: #C0392B;
  --texte-sur-nuit: #D7E2EF;
  /* L'accent, choisi par Thomas le 31/10 : le bouton, la lumière et le montant à vérifier, rien d'autre. */
  --abricot: #F9C398;
  --abricot-haut: #FCD9BB;
  --abricot-texte: #9C4A10;
  --abricot-fond: #FCE3CD;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: Poppins, 'Helvetica Neue', Arial, sans-serif;
  background: var(--papier);
  color: var(--encre);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 6px; }

/* Le mot « numeo » : Poppins grasse, blanc sur sombre, noir sur clair. */
.marque { display: inline-flex; align-items: center; gap: .42em; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.marque img { display: block; width: auto; height: 1.12em; }

/* Bouton principal, le même partout sur le site. */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 28px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--abricot-haut), var(--abricot));
  color: var(--encre);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -.01em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), 0 1px 2px rgba(8, 20, 38, .4), 0 16px 40px rgba(8, 20, 38, .36);
  transition: transform .25s ease, box-shadow .25s ease;
}
.cta:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), 0 1px 2px rgba(8, 20, 38, .4), 0 20px 44px rgba(8, 20, 38, .46); }

/* ------- Ouverture : un premier écran calme, l'aube derrière le titre ------- */
.ouverture {
  position: relative;
  isolation: isolate;
  overflow: clip;
  color: #fff;
  text-align: center;
  --bas-ouverture: 95px;
  /* Tout le premier écran. Le texte se centre au-dessus de la lumière, qui monte du bas : plus bas, il ne se lirait plus. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  padding-bottom: max(var(--bas-ouverture), 38vh);
  /* Paliers en pixels : le texte reste sur la partie sombre, quelle que soit la hauteur de l'écran. */
  /* Le fond tant que le verre cannelé n'est pas peint, ou sans script. */
  background: linear-gradient(180deg, #050E22 0, #0A2558 420px, #1557B8 900px, #2E86E8 calc(100% - var(--bas-ouverture)), var(--papier) 100%);
}
/* La lumière derrière du verre cannelé, peinte par le script : elle reste à l'écran tant qu'on est dans l'ouverture. */
.aube {
  position: sticky;
  top: 0;
  z-index: -2;
  display: block;
  width: 100%;
  height: 100vh;
  margin-bottom: -100vh;
}
/* Grain très léger : évite les bandes visibles dans le dégradé. */
.ouverture::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .05;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* La lumière s'éteint avant le bord : le papier de la section suivante arrive sans couture. */
.ouverture::after {
  content: '';
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--bas-ouverture);
  pointer-events: none;
  /* Une courbe, pas une droite : un fondu linéaire laisse voir l'endroit où il s'arrête. */
  background: linear-gradient(180deg,
    rgba(244, 246, 248, 0) 0,
    rgba(244, 246, 248, .06) 18%,
    rgba(244, 246, 248, .2) 34%,
    rgba(244, 246, 248, .42) 50%,
    rgba(244, 246, 248, .66) 66%,
    rgba(244, 246, 248, .85) 80%,
    rgba(244, 246, 248, .96) 92%,
    var(--papier) 100%);
}

.barre-site {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  /* Dans l'ouverture en colonne flex, sans cette largeur, ses marges automatiques la réduiraient à son contenu. */
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 20px 32px 24px;
  font-size: 15px;
}
.barre-site .marque { font-size: 24px; color: #fff; }
.barre-site .pilule { justify-self: end; }
.liens {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  list-style: none;
  border-radius: 999px;
  font-size: 14px;
  color: var(--texte-sur-nuit);
  background: rgba(255, 255, 255, .09);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), inset 0 1px 0 rgba(255, 255, 255, .2);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.liens a { display: block; padding: 7px 16px; border-radius: 999px; transition: background .2s ease, color .2s ease; }
.liens a:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.pilule {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 999px;
  color: #fff;
  font-weight: 500;
  font-size: 14px;
  background: rgba(255, 255, 255, .12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24), inset 0 1px 0 rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: background .2s ease;
}
.pilule:hover { background: rgba(255, 255, 255, .2); }

/* La pilule qui reste à portée, sur l'accueil : son propre fond plein, lisible sur le papier comme sur la nuit. Le script la montre. */
.pilule-flottante {
  position: fixed;
  z-index: 40;
  top: 20px;
  right: calc(24px + env(safe-area-inset-right));
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 999px;
  color: var(--encre);
  font-weight: 600;
  font-size: 14px;
  background: var(--abricot);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), 0 1px 2px rgba(8, 20, 38, .3), 0 10px 26px rgba(8, 20, 38, .28);
  visibility: hidden;
  opacity: 0;
  transition: opacity .25s ease, background .2s ease, visibility 0s linear .25s;
}
.pilule-flottante.visible { visibility: visible; opacity: 1; transition: opacity .25s ease, background .2s ease, visibility 0s; }
.pilule-flottante:hover { background: var(--abricot-haut); }
/* Le contour se lit sur tous les fonds : l'encre, puis un liseré blanc. */
.pilule-flottante:focus-visible { outline: 2px solid var(--encre); outline-offset: 2px; border-radius: 999px; box-shadow: 0 0 0 6px #fff; }
@media (max-width: 760px) {
  .pilule-flottante { top: auto; right: calc(16px + env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .pilule-flottante, .pilule-flottante.visible { transition: none; }
}

/* L'aube arrive : ce voile de nuit se retire au chargement. Absent sans script. */
.voile { position: absolute; inset: 0; z-index: -1; opacity: 0; pointer-events: none; background: var(--encre); }
/* La lumière qui suit la souris. */
.lumiere {
  position: absolute;
  z-index: -1;
  top: -450px;
  left: -450px;
  width: 900px;
  height: 900px;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .13), rgba(255, 255, 255, 0));
  will-change: transform;
}

.accroche { margin-block: auto; padding: 34px 24px 0; }
.ouverture h1 {
  max-width: 15em;
  margin: 0 auto;
  font-size: clamp(38px, 5.4vw, 78px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -.045em;
  text-wrap: balance;
}
/* Chaque ligne du titre monte depuis un masque ; la marge laisse passer les jambages. */
.ouverture h1 .ligne { display: block; overflow: clip; padding-bottom: .14em; margin-bottom: -.14em; }
.ouverture h1 .ligne > span { display: block; }
.sous {
  max-width: 680px;
  margin: 20px auto 0;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .88);
  text-wrap: pretty;
}
.actions { margin-top: 24px; }
.preuve { margin-top: 14px; font-size: 13px; color: #fff; }

/* Téléphone : le menu se resserre, le texte passe en pleine largeur. */
@media (max-width: 760px) {
  .barre-site { padding: 18px 20px; }
  .barre-site .marque { font-size: 22px; }
  .barre-site { grid-template-columns: 1fr auto; }
  .liens { display: none; }
  .accroche { padding: 28px 20px 0; }
  .sous { font-size: 16px; margin-top: 18px; }
  .actions { margin-top: 26px; }
  .cta { width: 100%; max-width: 360px; }
  .preuve { font-size: 13px; }
  .preuve span { display: block; }
  .preuve .point { display: none; }
}

/* ------- Sections de la page ------- */
.contenant { width: min(1180px, 100% - 64px); margin: 0 auto; }
main section[id] { scroll-margin-top: 24px; }
.surtitre { font-size: 14px; font-weight: 600; color: var(--nuit); }
main h2 {
  margin-top: 12px;
  font-size: clamp(32px, 3.9vw, 54px);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -.04em;
  color: var(--encre);
  text-wrap: balance;
}
.chapo { margin-top: 20px; font-size: 18px; line-height: 1.6; color: var(--gris); text-wrap: pretty; }

@media (max-width: 1180px) {
  .contenant { width: min(1180px, 100% - 40px); }
}

@media (max-width: 760px) {
  .contenant { width: calc(100% - 32px); }
  .surtitre { font-size: 13px; }
  .chapo { font-size: 16px; margin-top: 14px; }
}

/* ------- Sécurité, questions, réservation ------- */
#securite { padding: 24px 0 72px; }
#questions { padding: 24px 0 96px; }
#demo { position: relative; padding: 0 0 96px; }
.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 72px; align-items: start; }
.duo-tete { max-width: 500px; }
.garanties { padding: 0; list-style: none; border-bottom: 1px solid rgba(8, 20, 38, .1); }
.garanties li { padding: 26px 0; border-top: 1px solid rgba(8, 20, 38, .1); }
.garanties h3 { font-size: clamp(20px, 1.8vw, 26px); font-weight: 500; letter-spacing: -.02em; color: var(--encre); }
.garanties p { margin-top: 8px; max-width: 54ch; font-size: 15px; line-height: 1.6; color: var(--gris); text-wrap: pretty; }
/* Le trajet du fichier : la ligne vit dans l'espace entre les deux colonnes, chaque étape à la hauteur de sa phrase.
   Le fichier vit à la ligne OVHcloud et n'en repart jamais.
   Sans script : le fichier posé à sa ligne, la route entière, les trois étapes. */
.garanties-route { --route-x: -40px; --page-l: 46px; --page-h: 60px; position: relative; }
.garanties li { position: relative; }
.trajet { position: absolute; inset: 0; pointer-events: none; }
.trajet-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.trajet-svg path, .trajet-repli { fill: none; stroke-linecap: round; }
.trajet-repli { stroke: var(--signature); stroke-width: 2.5; transform: translateX(var(--route-x)); }
.garanties-route[data-trace] .trajet-repli { display: none; }
.trajet-fond { stroke: var(--brume); stroke-width: 2; stroke-dasharray: 3 8; }
.trajet-trace { stroke: var(--signature); stroke-width: 2.5; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
/* Le point de départ, que le fichier laisse derrière lui. Il n'a de place que mesuré. */
.trajet-depart { display: none; fill: var(--signature); stroke: var(--papier); stroke-width: 1.5; }
.garanties-route[data-trace] .trajet-depart { display: block; }
.trajet-noeud {
  position: absolute;
  z-index: 1;
  left: calc(var(--route-x) - 7px);
  top: calc(50% - 7px);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--nuit);
  box-shadow: 0 0 0 3px var(--papier);
}
.garanties li:last-child .trajet-noeud { background: var(--abricot); box-shadow: 0 0 0 3px var(--papier), inset 0 0 0 1px rgba(156, 74, 16, .35); }
/* La place du fichier une fois effacé, à OVHcloud : il s'efface là où il est. */
.trajet-vide {
  position: absolute;
  left: calc(var(--route-x) - var(--page-l) / 2);
  top: calc(50% - var(--page-h) / 2);
  width: var(--page-l);
  height: var(--page-h);
  border-radius: 7px;
  border: 1.5px dashed #9AA7B5;
  background: var(--papier);
}
.trajet-page {
  position: absolute;
  z-index: 2;
  left: calc(var(--route-x) - var(--page-l) / 2);
  top: calc(50% - var(--page-h) / 2);
  width: var(--page-l);
  height: var(--page-h);
  will-change: transform;
}
.trajet-feuille {
  position: relative;
  height: 100%;
  overflow: hidden;
  padding: 16px 7px 0;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(8, 20, 38, .08), 0 8px 18px rgba(8, 20, 38, .16);
}
/* Le coin replié : c'est lui qui fait lire un fichier. */
.trajet-feuille::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 12px;
  height: 12px;
  border-bottom-left-radius: 3px;
  background: linear-gradient(225deg, var(--papier) 50%, #DDE3EA 50%);
}
.trajet-barre { display: block; height: 3px; margin-bottom: 7px; border-radius: 2px; background: var(--brume); }
.trajet-barre:last-child { width: 62%; }
@media (max-width: 960px) {
  /* Une seule colonne : la route passe dans une marge prise sur les lignes, le fichier part de l'espace au-dessus. */
  .garanties-route { --route-x: 20px; --page-l: 34px; --page-h: 44px; }
  .garanties li { padding-left: 56px; }
  .trajet-feuille { padding: 12px 5px 0; }
  .trajet-feuille::before { width: 9px; height: 9px; }
  .trajet-barre { height: 2px; margin-bottom: 5px; }
}
/* Les questions : les mêmes filets que la sécurité, un signe qui pivote, rien d'autre. Sans script, tout s'ouvre pareil. */
.questions-liste { border-bottom: 1px solid rgba(8, 20, 38, .1); }
.questions-liste details { border-top: 1px solid rgba(8, 20, 38, .1); }
.questions-liste summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 72px;
  padding: 18px 0;
  font-size: clamp(18px, 1.5vw, 21px);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.3;
  color: var(--encre);
  cursor: pointer;
  list-style: none;
}
.questions-liste summary::-webkit-details-marker { display: none; }
.questions-liste summary:focus-visible { outline: 2px solid var(--signature); outline-offset: 2px; border-radius: 6px; }
/* Un plus dessiné par deux traits : le trait vertical se couche à l'ouverture. */
.questions-liste summary::after {
  content: '';
  flex: none;
  width: 16px;
  height: 16px;
  background:
    linear-gradient(var(--signature), var(--signature)) center / 100% 2px no-repeat,
    linear-gradient(var(--signature), var(--signature)) center / 2px 100% no-repeat;
}
.questions-liste details[open] summary::after {
  background:
    linear-gradient(var(--signature), var(--signature)) center / 100% 2px no-repeat;
}
.questions-liste details p { max-width: 58ch; padding: 0 40px 24px 0; font-size: 16px; line-height: 1.65; color: var(--gris); text-wrap: pretty; }
/* Le dernier mot de la page : un panneau de nuit, l'abricot du bouton comme seule lumière. */
.demo-panneau {
  position: relative;
  overflow: hidden;
  padding: clamp(40px, 6vw, 84px) clamp(24px, 6vw, 88px);
  border-radius: 28px;
  text-align: center;
  background-color: var(--encre);
  background-image:
    radial-gradient(ellipse 60% 70% at 50% 108%, rgba(249, 195, 152, .24), rgba(249, 195, 152, 0) 70%),
    linear-gradient(165deg, var(--encre), var(--nuit) 60%, #1B4577);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 30px 80px rgba(8, 20, 38, .22);
}
.demo-panneau h2 { margin-top: 0; color: #fff; }
.demo-panneau .chapo { max-width: 560px; margin-inline: auto; color: var(--texte-sur-nuit); }
.demo-noms { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; margin-top: 14px; font-size: 16px; font-weight: 500; color: #fff; }
/* Côte à côte et de même taille : deux associés à égalité. */
.demo-visages { display: inline-flex; gap: 6px; }
.demo-visages img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: 50% 18%; box-shadow: 0 0 0 2px rgba(255, 255, 255, .55); filter: saturate(.8); }
.demo-actions { margin-top: 34px; }
.demo-secours { margin-top: 22px; font-size: 15px; color: var(--texte-sur-nuit); }
.demo-secours a { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .5); white-space: nowrap; }
/* Le fil vers la démo : du bas de la liste des questions au bord du bouton.
   Sans script, il part de l'espace au-dessus du panneau ; le script le cale ensuite sur la mise en page. */
.filage {
  position: absolute;
  z-index: 1;
  top: -52px;
  left: calc(50% - min(590px, 50% - 32px) + clamp(28px, 4vw, 72px));
  right: calc(50% + 126px);
  bottom: calc(96px + clamp(40px, 6vw, 84px) + 72.5px);
  pointer-events: none;
}
.filage[data-trace] { inset: 0; }
.filage-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.filage-svg path { fill: none; stroke-linecap: round; }
.filage:not([data-trace]) path { vector-effect: non-scaling-stroke; }
.filage-fond { stroke: var(--brume); stroke-opacity: .7; stroke-width: 2; stroke-dasharray: 3 8; }
.filage-trace { stroke: var(--signature); stroke-width: 2.5; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.filage:not([data-trace]) .filage-trace { stroke-dasharray: none; }
.filage[data-trace] .filage-trace { stroke: url(#filage-degrade); }
.filage-noeud { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; }
.filage-depart { left: 0; top: 0; background: var(--nuit); box-shadow: 0 0 0 3px var(--papier); }
.filage-arrivee { left: 100%; top: 100%; background: var(--abricot); box-shadow: 0 0 0 3px var(--nuit); }
/* L'arrivée, une seule fois : un cercle de lumière quitte le bouton et s'éteint. Créé par le script, retiré aussitôt. */
#demo .cta { position: relative; }
.cta-onde { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: 0 0 0 1.5px var(--abricot), 0 0 26px rgba(249, 195, 152, .6); }
/* Une seule colonne : il n'a plus de place pour passer sans toucher le texte. */
@media (max-width: 960px) {
  .filage { display: none; }
}
@media (max-width: 960px) {
  .duo { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .duo-tete { max-width: 620px; }
}
@media (max-width: 760px) {
  #securite { padding: 16px 0 56px; }
  #questions { padding: 16px 0 72px; }
  .questions-liste summary { min-height: 64px; padding: 14px 0; }
  .questions-liste details p { padding-right: 0; }
  #demo { padding-bottom: 56px; }
  .demo-panneau { border-radius: 22px; }
}

/* Masqué seulement si le script a posé la classe js : sans lui, tout reste visible. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; }
  .js .voile { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ------- Pages légales et pied de page ------- */
.entete-legal { background-color: var(--nuit); background-image: linear-gradient(180deg, var(--encre), var(--nuit)); color: #fff; }
.texte-legal { max-width: 760px; padding: clamp(40px, 6vw, 80px) 0 clamp(56px, 8vw, 104px); overflow-wrap: anywhere; }
.texte-legal h1 { font-size: clamp(34px, 4.4vw, 54px); font-weight: 300; line-height: 1.1; letter-spacing: -.04em; color: var(--encre); }
.texte-legal .maj { margin-top: 14px; font-size: 14px; color: var(--gris); }
.texte-legal h2 { margin-top: 44px; font-size: 22px; font-weight: 500; letter-spacing: -.02em; line-height: 1.25; color: var(--encre); }
.texte-legal p, .texte-legal dd { margin-top: 12px; font-size: 16px; line-height: 1.7; color: var(--gris); }
.texte-legal a { color: var(--nuit); text-decoration: underline; text-underline-offset: 3px; }
.texte-legal dl { margin-top: 16px; border-top: 1px solid rgba(8, 20, 38, .1); }
.texte-legal dl > * { margin: 0; }
.texte-legal dt { padding-top: 14px; font-size: 14px; font-weight: 600; color: var(--encre); }
.texte-legal dd { margin-top: 2px; padding-bottom: 14px; border-bottom: 1px solid rgba(8, 20, 38, .1); }

/* ------- À propos : le gabarit des pages légales, mais une page qui se regarde ------- */
.apropos-tete {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--nuit);
  /* Le fond tant que le verre cannelé n'est pas peint, ou sans script. */
  background-image:
    radial-gradient(ellipse 46% 90% at 96% 110%, rgba(249, 195, 152, .26), rgba(249, 195, 152, 0) 72%),
    radial-gradient(ellipse 70% 120% at 76% 118%, rgba(63, 123, 194, .5), rgba(63, 123, 194, 0) 74%);
  color: #fff;
}
/* Le même verre que l'accueil, limité à l'ouverture de la page. */
.apropos-tete .aube { position: absolute; inset: 0; z-index: -1; height: 100%; margin: 0; }
/* Le verre s'éteint avant le papier de la suite. */
.apropos-tete::after { content: ''; position: absolute; inset: auto 0 0; z-index: -1; height: clamp(48px, 7vw, 96px); background: linear-gradient(180deg, rgba(244, 246, 248, 0), var(--papier)); }
/* Le menu se pose sur le verre, comme sur l'accueil. */
.page-apropos .entete-legal { position: absolute; inset: 0 0 auto; z-index: 2; background: none; }
.apropos-tete .contenant { padding: clamp(136px, 15vw, 200px) 0 clamp(72px, 10vw, 144px); }
/* Sur téléphone, le texte tient plus de place : il garde sa distance avec la lumière. */
@media (max-width: 760px) { .apropos-tete .contenant { padding-bottom: 200px; } }
.apropos-tete .surtitre { color: var(--aube-clair); }
.apropos-tete h1 {
  max-width: 15em;
  margin-top: 18px;
  font-size: clamp(40px, 6.2vw, 84px);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.apropos-intro { max-width: 40em; margin-top: clamp(24px, 3vw, 40px); font-size: clamp(17px, 1.5vw, 20px); line-height: 1.65; color: var(--texte-sur-nuit); text-wrap: pretty; }
/* Les deux portraits en quinconce, de même taille : un rythme de lecture, pas une hiérarchie. */
.personnes {
  max-width: 1100px;
  padding: clamp(48px, 7vw, 96px) 0 clamp(48px, 6vw, 80px);
  list-style: none;
}
.personne {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
  padding-block: clamp(32px, 4vw, 56px);
}
.personne:nth-child(2) .portrait { order: 2; }
.portrait {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  max-width: 400px;
  aspect-ratio: 1;
  margin-inline: auto;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(8, 20, 38, .08), 0 0 0 12px rgba(249, 195, 152, .14), 0 40px 70px -35px rgba(8, 20, 38, .55);
}
.portrait img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; filter: saturate(.72) contrast(1.03) brightness(.98); }
/* Un même traitement pour deux fonds différents : le bord s'éteint vers la nuit, la lumière abricot vient du bas. */
.portrait::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 40%, rgba(15, 42, 79, 0) 46%, rgba(15, 42, 79, .5) 100%),
    radial-gradient(ellipse 70% 40% at 50% 108%, rgba(249, 195, 152, .34), rgba(249, 195, 152, 0) 70%);
}
main .personne h2 { margin-top: 0; font-size: clamp(32px, 3.5vw, 48px); }
.personne-role { margin-top: 10px; font-size: 14px; font-weight: 600; color: var(--nuit); }
.personne-texte { margin-top: 24px; font-size: 17px; line-height: 1.7; color: var(--gris); text-wrap: pretty; }
.personne-ou { margin-top: 18px; font-size: 14px; font-weight: 600; color: var(--nuit); }
.personne-lien { display: inline-block; margin-top: 10px; font-size: 14px; font-weight: 500; color: var(--nuit); text-decoration: underline; text-underline-offset: 3px; }
.apropos-fin { margin-bottom: clamp(56px, 8vw, 104px); }
.apropos-fin p:first-child { max-width: 24em; margin-inline: auto; font-size: clamp(24px, 2.6vw, 36px); font-weight: 300; line-height: 1.2; letter-spacing: -.03em; color: #fff; text-wrap: balance; }
.apropos-fin .cta { background-color: var(--abricot); }
@media (max-width: 760px) {
  .personne { grid-template-columns: minmax(0, 1fr); }
  .personne:nth-child(2) .portrait { order: 0; }
  .portrait { max-width: 240px; }
  /* Le libellé du bouton tient sur une ligne à 390 px. */
  .apropos-fin { padding-inline: 16px; }
  .apropos-fin .cta { padding-inline: 20px; }
}

.pied-site { border-top: 1px solid rgba(8, 20, 38, .1); background: var(--papier); }
.pied-site .contenant { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding: 28px 0 36px; }
.pied-site .marque { font-size: 20px; color: var(--encre); }
.pied-site ul { display: flex; flex-wrap: wrap; gap: 8px 28px; padding: 0; list-style: none; font-size: 14px; color: var(--gris); }
.pied-site a:not(.marque) { text-decoration: underline; text-underline-offset: 3px; }
.pied-site a:not(.marque):hover { color: var(--encre); }