/* AQUASSAY (2026-11-06, troisième version). Hors de la racine fantôme, chargé par les seules cartes des collaborateurs
   d'Aquassay (Ombeline Rivaud, Arthur Authiat). Chaque carte garde ce que son titulaire a choisi (photo, logo, accent du
   recto, textes) ; le FOND, l'ambiance et tout le mini-site sont pris dans les couleurs de la société (consignes de Dan
   du 2026-11-06 : « fais dans les couleurs de la société pour le fond », puis le mini-site aussi, « pour ne pas dénaturer »).

   COULEURS D'AQUASSAY, RELEVÉES LE 2026-11-06 :
     #28b8e7  cyan du logo (pixels du logo de sa carte, une seule couleur)
     #0bb7ec  cyan des titres h2 du site (feuille en ligne d'aquassay.com, règle h2)
     #17abe5  bleu des liens et des titres du pied de page (thème Divi d'aquassay.com, couleur d'accent)
     #268ad4  bleu de l'en-tête du site et des textes importants (header, .text_important)
     #00344c  bleu pétrole des textes du site (styles en ligne de l'accueil)
     #263547  bleu ardoise des boutons de formulaire (.forminator-button-submit)
   Le motif de gouttes semées vient du fond « backgound-logo-07.png » du site ; les vagues fines, de « hosting-company-01.png ».
   Contraste : le blanc sur le haut du fond (#1b75b8, le #268ad4 assombri) vaut 4,9:1 ; sur #00344c, 12:1.
   Titres en Rubik, la police du site (licence OFL). */
@font-face{font-family:PsmRubik;font-style:normal;font-weight:300 700;font-display:swap;src:url(polices/691cd1d9b4c0cdf31a1dcf04259c86f92c85e69f6622abab7964d81e36890691.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* LE FOND : la colonne d'eau d'Aquassay. En haut, le bleu de l'en-tête de leur site, éclairé de cyan comme une surface ;
   en bas, le bleu pétrole de leurs textes, comme le fond. Peint par la page elle-même : il ne dépend d'aucun réglage de
   fond de la carte (la vidéo choisie dans le Studio n'est pas rendue ici). */
html { background: #00344c !important; }
html body.cp-body, html body.cp-body.cp-body-with-bg { background: transparent !important; color: #f2fafe; }
.cp-backdrop, .cp-page-dim, .cp-page-video, .cp-screen .cp-bg, .cp-screen .cp-ambient { display: none !important; }
html body.cp-body .cp-screen.cp-screen-prestige { background: none; }
html body.cp-body .cp-screen.cp-screen-prestige::before { content: none !important; }
html body.cp-body::after { content: none !important; }
html body.cp-body::before {
  content: "" !important; position: fixed !important; inset: 0 !important; z-index: -2 !important; pointer-events: none; opacity: 1 !important;
  background:
    radial-gradient(80vmax 46vmax at 78% -8%, rgba(40, 184, 231, .42), transparent 62%),
    radial-gradient(70vmax 60vmax at -10% 40%, rgba(23, 171, 229, .20), transparent 66%),
    radial-gradient(90vmax 60vmax at 50% 118%, rgba(0, 26, 40, .65), transparent 70%),
    linear-gradient(180deg, #1b75b8 0%, #14649f 26%, #0b4d73 60%, #00344c 100%) !important;
}

/* L'EAU VIVANTE (posée par l'expérience, sous tout le reste) : deux nappes de lumière qui ondulent comme les reflets au
   fond d'un bassin, les gouttes d'Aquassay semées comme sur leur site et qui remontent lentement, deux vagues fines. */
.psm-eau { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.psm-eau .nappe { position: absolute; inset: -30%; opacity: .5; mix-blend-mode: soft-light; background-size: 520px 520px; will-change: transform; }
.psm-eau .nappe.n1 { animation: psmNappe1 28s ease-in-out infinite alternate; }
.psm-eau .nappe.n2 { opacity: .32; background-size: 780px 780px; mix-blend-mode: screen; animation: psmNappe2 36s ease-in-out infinite alternate; }
@keyframes psmNappe1 { from { transform: translate3d(-4%, -2%, 0) rotate(0deg); } to { transform: translate3d(4%, 3%, 0) rotate(4deg); } }
@keyframes psmNappe2 { from { transform: translate3d(3%, 2%, 0) rotate(0deg) scale(1.05); } to { transform: translate3d(-3%, -3%, 0) rotate(-5deg) scale(1); } }
.psm-eau .semee { position: absolute; width: var(--t); aspect-ratio: 220 / 278; left: var(--x); top: var(--y); opacity: var(--o); transform: rotate(var(--r));
  background: var(--psm-goutte) center / contain no-repeat; filter: brightness(2.2) saturate(.4); animation: psmMonte var(--d) linear infinite; animation-delay: var(--dl); }
@keyframes psmMonte { from { translate: 0 0; } to { translate: 0 -140vh; } }
.psm-eau .vagues { position: absolute; left: -10%; width: 240%; bottom: 6vh; height: 34vh; opacity: .45; animation: psmVagues 40s linear infinite; }
.psm-eau .vagues path { fill: none; stroke: rgba(234, 248, 255, .55); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.psm-eau .vagues path + path { stroke: rgba(11, 183, 236, .7); }
@keyframes psmVagues { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* LE RECTO : sa carte, sa photo, son accent. Le bas de la carte prend le bleu pétrole d'Aquassay au lieu du marine, et un
   reflet d'eau passe sous ses coordonnées. Son nom en lettres droites et grasses, comme sur sa carte du matin, en Rubik. */
.cp-screen .pr { box-shadow: inset 0 0 0 1px rgba(234, 248, 255, .14), 0 40px 80px rgba(0, 20, 34, .45); }
.cp-screen .pr .pr-corps { background: linear-gradient(180deg, rgba(0, 52, 76, 0) 0%, rgba(0, 52, 76, .55) 30%, #00344c 100%); }
.cp-screen .pr .pr-nom { font-family: PsmRubik, PrestigeSans, system-ui, sans-serif !important; font-weight: 600 !important; letter-spacing: -.02em !important; line-height: 1.02 !important; text-shadow: 0 2px 18px rgba(0, 20, 34, .45) !important; }
.cp-screen .pr .pr-distinction { font-family: PsmRubik, PrestigeSans, system-ui, sans-serif !important; font-style: normal !important; font-weight: 500 !important; letter-spacing: .02em; }
.cp-screen .pr .pr-distinction span + span { color: #5fd3f7 !important; }

/* LE RECTO « EXPERT », QUATRIÈME VERSION (consigne de Dan du 2026-11-06 : « la carte de visite en haut doit reprendre au
   maximum ce qu'elle a créé »). Pour une carte AVEC photo, le recto Prestige reprend la composition du recto « expert »
   qu'Ombeline a faite dans le Studio : la couverture en haut (posée par l'expérience), la photo ronde à cheval sur un
   panneau clair, le logo en pastille blanche, le nom puis le poste en petites capitales, les gestes en boutons empilés
   dans le même ordre (le premier plein, à son accent ; le deuxième teinté ; le troisième au trait), les réseaux et
   « Ajouter aux contacts » ensuite. Ses couleurs : l'accent de sa carte (--pr-or, lu dans le Studio), l'encre presque
   noire, le panneau #f4f8fc. Le Prestige n'ajoute que la finition (Rubik, ombres, onde sur le logo). Une carte sans
   photo garde le recto précédent. */
.cp-screen .pr.pr-avec-photo { background: #f4f8fc; color: #0e141b; box-shadow: inset 0 0 0 1px rgba(14, 20, 27, .08), 0 40px 80px rgba(0, 20, 34, .45); }
.cp-screen .pr.pr-avec-photo .pr-ciel { position: relative; z-index: 3; flex: 1 1 58cqw; min-height: 40cqw; background: #e9ecee; }
.cp-screen .pr.pr-avec-photo .psm-couverture { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 38%; display: block; }
.cp-screen .pr.pr-avec-photo .pr-ombre { display: none; }
.cp-screen .pr.pr-avec-photo .pr-portrait { top: auto; left: 50%; bottom: -16cqw; width: 32cqw; height: 32cqw; transform: translateX(-50%); border-radius: 50%; object-fit: cover; object-position: center top;
  border: max(2px, .7cqw) solid #2a7fb0; box-shadow: 0 8px 24px rgba(0, 32, 52, .28); background: #fff; }
.cp-screen .pr.pr-avec-photo .pr-logo-coin { top: auto; left: calc(50% + 7cqw); bottom: -16cqw; width: 10cqw; height: 10cqw; padding: 1.6cqw; box-sizing: border-box; border-radius: 2.4cqw; background: #fff;
  box-shadow: 0 4px 14px rgba(0, 32, 52, .22); filter: none; z-index: 4; }
.cp-screen .pr.pr-avec-photo .psm-onde-recto { z-index: 5; border-radius: 2.4cqw; overflow: hidden; }
.cp-screen .pr.pr-avec-photo .pr-haut { left: 4cqw; right: auto; }
.cp-screen .pr.pr-avec-photo .pr-haut .pr-porte { background: #fff !important; color: #0e141b !important; border: 0 !important; box-shadow: 0 4px 14px rgba(0, 32, 52, .18); }
.cp-screen .pr.pr-avec-photo .pr-corps { margin-top: -7cqw; padding: 24cqw 6cqw 5cqw; gap: 2.4cqw; text-align: center; align-items: stretch; background: #f4f8fc; }
.cp-screen .pr.pr-avec-photo .pr-nom { color: #0e141b !important; font-size: 9.6cqw !important; font-weight: 700 !important; letter-spacing: -.035em !important; line-height: 1.05 !important; text-shadow: none !important; text-align: center; }
.cp-screen .pr.pr-avec-photo .pr-nom-famille { display: inline; font-size: 1em; letter-spacing: inherit; }
.cp-screen .pr.pr-avec-photo .pr-distinction { margin: 0; color: #4a5563 !important; font-size: max(3.4cqw, 10.5px) !important; font-weight: 500 !important; letter-spacing: .16em !important; text-transform: uppercase; text-align: center; }
.cp-screen .pr.pr-avec-photo .pr-distinction span { display: inline; }
.cp-screen .pr.pr-avec-photo .pr-distinction span + span { color: #4a5563 !important; }
.cp-screen .pr.pr-avec-photo .pr-distinction span + span::before { content: " · "; }
.cp-screen .pr.pr-avec-photo .pr-gestes { grid-template-columns: 1fr; gap: 2.2cqw; margin-top: 1.4cqw; }
.cp-screen .pr.pr-avec-photo .pr-geste { flex-direction: row; justify-content: flex-start; gap: 3.4cqw; min-height: max(11.4cqw, 44px); padding: 0 4.6cqw; border-radius: 3.4cqw;
  background: color-mix(in srgb, var(--pr-or) 16%, #fff); border: 1px solid color-mix(in srgb, var(--pr-or) 45%, #fff); color: #0e141b; font-size: max(4.1cqw, 13px); font-weight: 600; }
.cp-screen .pr.pr-avec-photo .pr-geste:first-child { background: var(--pr-or); border-color: var(--pr-or); }
.cp-screen .pr.pr-avec-photo .pr-geste:nth-child(3) { background: transparent; border-color: #c9d2db; }
.cp-screen .pr.pr-avec-photo .pr-geste .cf-geste-icone { width: max(5.6cqw, 18px); height: max(5.6cqw, 18px); padding: 0; border: 0; border-radius: 0; color: #0e141b !important; background: none !important; flex: none; }
.cp-screen .pr.pr-avec-photo .pr-geste .cf-geste-mot { flex: 1; text-align: start; }
.cp-screen .pr.pr-avec-photo .pr-geste::after { content: ""; flex: none; width: max(5cqw, 16px); height: max(5cqw, 16px); background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; }
.cp-screen .pr.pr-avec-photo .pr-reseau { color: #0e141b !important; border-color: #c9d2db !important; background: #fff; }
.cp-screen .pr.pr-avec-photo .pr-contact { border-radius: 3.4cqw; border: 0 !important; background: #00344c !important; color: #fff !important; font-weight: 600; }
.cp-screen .pr.pr-avec-photo .pr-signature { color: #6b7684; }
.cp-screen .pr.pr-avec-photo a:focus-visible, .cp-screen .pr.pr-avec-photo button:focus-visible { outline-color: #00344c; }

/* L'ONDE DU RECTO : trois calques posés exactement sur le logo, chacun découpé par une ligne de la goutte. Toutes les 7 s,
   une lueur claire parcourt les lignes de l'intérieur vers l'extérieur, puis s'éteint : le logo retrouve son cyan exact.
   Rien ne déborde du logo, donc rien ne passe sur la photo. */
.cp-screen .psm-onde-recto { position: absolute; z-index: 2; pointer-events: none; }
.cp-screen .psm-onde-recto i { position: absolute; inset: 0; opacity: 0; background: #effbff;
  -webkit-mask: var(--psm-ligne1) center / contain no-repeat; mask: var(--psm-ligne1) center / contain no-repeat;
  animation: psmOndeRecto 7s ease-in-out 3.2s infinite; }
.cp-screen .psm-onde-recto .l2 { -webkit-mask-image: var(--psm-ligne2); mask-image: var(--psm-ligne2); animation-delay: 3.45s; }
.cp-screen .psm-onde-recto .l3 { -webkit-mask-image: var(--psm-ligne3); mask-image: var(--psm-ligne3); animation-delay: 3.7s; }
@keyframes psmOndeRecto { 0%, 100% { opacity: 0; } 6% { opacity: .8; } 16% { opacity: 0; } }

/* L'OUVERTURE « LA MESURE » : sur la colonne d'eau d'Aquassay, la goutte du logo se remplit comme un instrument de
   mesure, graduations comprises ; à plein, la surface frémit, une onde part du cœur de la spirale et ouvre l'écran sur
   la carte. Une fois par onglet. */
html[data-psm-voile]::before { content: ""; position: fixed; inset: 0; z-index: 2147483646; pointer-events: none; background: linear-gradient(180deg, #1b75b8, #00344c); }
.psm-mesure { position: fixed; inset: 0; z-index: 2147483647; display: grid; place-items: center; align-content: center; gap: 30px; pointer-events: none; overflow: hidden;
  background: radial-gradient(70vmax 50vmax at 50% 0%, rgba(40, 184, 231, .35), transparent 65%), linear-gradient(180deg, #1b75b8 0%, #0b4d73 55%, #00344c 100%);
  -webkit-mask: radial-gradient(circle at var(--cx, 50%) var(--cy, 50%), transparent var(--trou, 0px), #000 calc(var(--trou, 0px) + 2px));
  mask: radial-gradient(circle at var(--cx, 50%) var(--cy, 50%), transparent var(--trou, 0px), #000 calc(var(--trou, 0px) + 2px)); }
.psm-mesure.psm-fin { transition: opacity .35s .55s; opacity: 0; }
.psm-instrument { position: relative; width: min(40vw, 176px); aspect-ratio: 220 / 278; }
.psm-instrument img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none !important; }
.psm-instrument .vide { opacity: .2; filter: brightness(2.4) saturate(.2); }
.psm-instrument .plein { clip-path: inset(calc(100% - var(--niv, 0%)) 0 0 0); }
.psm-surface { position: absolute; left: -8%; right: -8%; height: 10px; bottom: calc(var(--niv, 0%) - 5px); opacity: 0; transition: opacity .3s;
  background: radial-gradient(50% 50% at 50% 50%, rgba(239, 251, 255, .9), transparent 70%); filter: blur(1px); }
.psm-mesure.psm-remplit .psm-surface { opacity: 1; }
.psm-mesure.psm-plein .psm-surface { opacity: 0; }
.psm-graduations { position: absolute; top: 4%; bottom: 0; right: -30%; width: 14px; display: flex; flex-direction: column; justify-content: space-between; }
.psm-graduations i { display: block; height: 1.5px; width: 7px; margin-left: auto; background: rgba(234, 248, 255, .35); transition: background .2s, width .2s; }
.psm-graduations i:nth-child(5n + 1) { width: 14px; }
.psm-graduations i.atteint { background: #28b8e7; }
.psm-onde-ouv { position: fixed; left: var(--cx); top: var(--cy); width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; border: 2px solid rgba(239, 251, 255, .85); opacity: 0; pointer-events: none; z-index: 2147483647; }
.psm-mesure.psm-plein ~ .psm-onde-ouv { animation: psmOndeOuv 1.1s cubic-bezier(.2, .6, .3, 1) both; }
.psm-mesure.psm-plein ~ .psm-onde-ouv.o2 { animation-delay: .18s; }
@keyframes psmOndeOuv { 0% { opacity: .9; transform: scale(.5); } 100% { opacity: 0; transform: scale(40); } }
.psm-legende { display: grid; gap: 8px; margin: 0; padding: 0 20px; text-align: center; opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .5s cubic-bezier(.2, .7, .3, 1); transition-delay: .5s; }
.psm-legende span { font: 500 clamp(24px, 6vw, 32px)/1.15 PsmRubik, PrestigeSans, system-ui, sans-serif; color: #fff; }
.psm-legende i { font: 500 12px/1.5 PsmRubik, PrestigeSans, system-ui, sans-serif; font-style: normal; letter-spacing: .22em; text-transform: uppercase; color: #9fe3fb; }
.psm-mesure.psm-remplit .psm-legende { opacity: 1; transform: none; }

/* LE HÉROS D'ORDINATEUR : la goutte d'Aquassay en tête, les titres en Rubik, le texte en blanc sur la colonne d'eau. */
.pb-heros .psm-sym { display: block; width: 72px; height: auto; margin: 0 0 26px; filter: drop-shadow(0 8px 24px rgba(40, 184, 231, .45)); }
.pb-heros .pb-heros-titre, .pb-heros .pb-sommaire-titre { font-family: PsmRubik, PrestigeSans, system-ui, sans-serif !important; font-weight: 500 !important; letter-spacing: -.015em !important; color: #fff !important; }
.pb-heros .pb-heros-titre { text-shadow: 0 4px 30px rgba(0, 30, 50, .35) !important; }
.pb-heros .pb-heros-surtitre { color: #9fe3fb !important; }
.pb-heros .pb-heros-texte, .pb-heros .pb-heros-accroche { color: #e6f5fc !important; }
.pb-heros .pb-sommaire-numero, .pb-heros .pb-sommaire svg { color: #9fe3fb !important; }

@media (prefers-reduced-motion: reduce) {
  .cp-screen .psm-onde-recto { display: none; }
  .psm-eau .nappe, .psm-eau .semee, .psm-eau .vagues { animation: none !important; }
}