/* ══════════════════════════════════════════════════════════════════════
   Proposition : les pages de clôture 20, 21 et 22 en visuel (pages
   ajoutées en fin : .p20b, avec .p21b ou .p22b selon l'interlocuteur).

   Une seule de ces trois pages s'affiche, celle de l'interlocuteur
   désigné par l'adresse. Elles partagent cette feuille ; chacune garde
   son fichier, ses textes et son portrait.

   Mêmes textes que la maquette, mot pour mot. L'idée : finir sur une
   main tendue, chaleureuse.
     la plage au coucher du soleil s'ouvre dans une arche, le soleil y
     respire, trois arcs de lumière aux couleurs de la marque l'entourent ;
     l'interlocuteur se présente sur une carte de verre posée sur la
     photo, son portrait cerclé d'un anneau qui tourne lentement ; ses
     trois phrases deviennent trois engagements, chacun son pictogramme ;
     le contact se lit comme trois gestes : le site, l'e-mail, et le
     téléphone, mis en avant, qui sonne doucement.

   Finitions du 06/11 : titre au système commun (46 px), grille 84 à
   1356, entrée posée avant 3,6 s, trois boucles seulement, élévations et
   arrondis du système.

   Le mouvement suit la grammaire de la présentation (css/anim.css). Les
   états de départ ne vivent que dans les animations : sans script, à
   l'impression ou avec « réduire les animations », tout est posé.
   ══════════════════════════════════════════════════════════════════════ */

.p20b{ background:#ffffff; }
.p20b-titre p{ line-height:56px; white-space:nowrap; }

/* ─────────────────────────────── Le décor ───────────────────────────── */
.p20b-chaleur{
  position:absolute; border-radius:50%; pointer-events:none;
}
.p20b-chaleur--soleil{
  left:420px; top:-120px; width:820px; height:760px;
  background:radial-gradient(closest-side, rgba(250,206,165,.75), rgba(250,206,165,.32) 50%, rgba(250,206,165,0));
}
.p20b-chaleur--rose{
  left:960px; top:80px; width:560px; height:560px;
  background:radial-gradient(closest-side, rgba(231,195,210,.75), rgba(231,195,210,0));
}
.p20b-chaleur--sable{
  left:-160px; top:260px; width:760px; height:500px;
  background:radial-gradient(closest-side, rgba(250,206,165,.42), rgba(250,206,165,0));
}

/* Trois arcs de lumière autour de l'arche. */
.p20b-arcs{ position:absolute; left:490px; top:44px; width:680px; height:726px; overflow:visible; pointer-events:none; }
.p20b-arcs path{ fill:none; stroke-linecap:round; }
.p20b-arc--1{ stroke:#cba12c; stroke-width:2.5; opacity:.85; }
.p20b-arc--2{ stroke:#d6713a; stroke-width:2;   opacity:.6; }
.p20b-arc--3{ stroke:#d20074; stroke-width:1.5; opacity:.4; }

/* ─────────────────────────────── La photo ───────────────────────────── */
.p20b-arche{
  position:absolute; left:580px; top:134px; width:500px; height:628px;
  border-radius:250px 250px 0 0; overflow:hidden;
}
/* Le cadre de l'arche : un liseré blanc et une ombre chaude. Il est à
   part, car l'ouverture de la photo (clip-path) couperait toute ombre. */
.p20b-cadre{
  position:absolute; left:580px; top:134px; width:500px; height:628px;
  border-radius:250px 250px 0 0;
  box-shadow:0 0 0 7px #fff, 0 0 0 8px rgba(214,113,58,.18), 0 2px 4px rgba(20,30,60,.06), 0 28px 56px -16px rgba(20,30,60,.30);
  /* Rien ne déborde sous l'arche : la bande du pied de page reste nette. */
  clip-path:inset(-120px -120px 0 -120px);
}
/* Le ciel prend la couleur du soir. */
.p20b-voile{
  position:absolute; inset:0; pointer-events:none; mix-blend-mode:multiply;
  background:linear-gradient(180deg, rgba(232,140,80,.55) 0%, rgba(240,170,110,.28) 26%, rgba(255,255,255,0) 50%);
}
/* Les logos, sur fond blanc dans leurs fichiers, se fondent dans la page. */
.p20b-logo{ mix-blend-mode:multiply; }
/* La photo, recadrée sur la chaise longue et le soleil. */
.p20b-plage{
  position:absolute; left:0; top:0; width:100%; height:100%;
  background-size:839.4px 839.4px !important; background-position:0 -179.5px !important;
}
/* Le soleil de la photo, rendu vivant : un éclat et des rayons. */
.p20b-eclat{
  position:absolute; left:46px; top:-34px; width:220px; height:220px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,250,235,.95), rgba(255,226,170,.55) 40%, rgba(255,200,140,0));
  mix-blend-mode:screen; pointer-events:none;
}
.p20b-rayons{
  position:absolute; left:-244px; top:-324px; width:800px; height:800px; border-radius:50%;
  background:repeating-conic-gradient(from 0deg, rgba(255,236,200,.22) 0deg 5deg, rgba(255,236,200,0) 5deg 15deg);
  -webkit-mask-image:radial-gradient(closest-side, #000 10%, transparent 75%);
          mask-image:radial-gradient(closest-side, #000 10%, transparent 75%);
  mix-blend-mode:screen; pointer-events:none;
}
/* Un voile chaud en bas de l'arche, qui pose la photo sur la page. */
.p20b-arche::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:120px;
  background:linear-gradient(rgba(214,113,58,0), rgba(214,113,58,.18));
  pointer-events:none;
}

/* ─────────────────────────────── La carte ───────────────────────────── */
.p20b-carte{
  position:absolute; left:900px; top:208px; width:456px; height:356px; box-sizing:border-box;
  border-radius:24px;
  background:linear-gradient(160deg, rgba(255,255,255,.9), rgba(255,247,250,.8));
  -webkit-backdrop-filter:blur(18px) saturate(1.25);
          backdrop-filter:blur(18px) saturate(1.25);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 2px 4px rgba(20,30,60,.06), 0 28px 56px -16px rgba(20,30,60,.30);
  font-family:'Montserrat', sans-serif;
}
.p20b-carte > *{ position:absolute; }
/* Un filet de couleur en tête de carte. */
.p20b-carte::before{
  content:""; position:absolute; left:32px; width:128px; top:0; height:4px; border-radius:0 0 10px 10px;
  background:linear-gradient(90deg, #d20074, #d6713a 55%, #cba12c);
}

/* Le portrait, cerclé d'un anneau aux couleurs de la marque. */
.p20b-anneau{
  left:24px; top:28px; width:128px; height:128px; border-radius:50%;
  background:conic-gradient(from 0deg, #d20074, #d6713a, #cba12c, #d6713a, #d20074);
  -webkit-mask-image:radial-gradient(closest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
          mask-image:radial-gradient(closest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
}
.p20b-portrait{
  left:32px; top:36px; width:112px; height:112px; border-radius:50%; box-sizing:border-box;
  border:4px solid #fff; background-color:#fff; background-repeat:no-repeat;
  box-shadow:0 1px 2px rgba(20,30,60,.06), 0 4px 12px -4px rgba(20,30,60,.14);
}
.p20b-nom{
  left:172px; top:54px; width:268px; margin:0;
  font-size:26px; font-weight:800; line-height:1.15; letter-spacing:-.01em; color:#1b2257;
  white-space:nowrap;
}
.p20b-nom--long{ font-size:22px; top:56px; }
.p20b-role{
  left:172px; top:92px; width:268px; margin:0;
  font-size:18px; font-weight:500; line-height:1.3; color:#d20074; white-space:nowrap;
}
.p20b-trait{
  left:172px; top:128px; width:44px; height:4px; border-radius:999px; background:#cba12c;
}

/* Les trois engagements. */
.p20b-engagement{
  left:28px; width:404px; margin:0; padding-left:56px; box-sizing:border-box;
  font-size:17px; line-height:1.4; color:#2b3344;
}
.p20b-engagement--cta{ font-weight:700; color:#243282; }
.p20b-picto{
  position:absolute; left:0; top:-6px; width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--fond); color:var(--c);
}
.p20b-picto svg{ width:20px; height:20px; overflow:visible; }
.p20b-picto svg *{ fill:none; stroke:currentColor; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; }

/* ─────────────────────────────── Le contact ─────────────────────────── */
.p20b-etiquette{
  display:flex; align-items:center; gap:12px;
  font-family:'Montserrat', sans-serif; font-weight:700; font-size:16px; letter-spacing:.32em;
  color:#243282;
}
.p20b-etiquette::before{
  content:""; width:12px; height:12px; border-radius:50%; background:#cba12c;
  box-shadow:0 0 0 5px rgba(203,161,44,.22);
}
.p20b-etiquette::after{
  content:""; width:120px; height:2px; border-radius:999px;
  background:linear-gradient(90deg, #cba12c, rgba(203,161,44,0));
}

/* Une ligne de contact : la pastille, le texte. Toute la ligne se clique. */
.p20b-ligne{
  display:flex; align-items:center; box-sizing:border-box; padding-left:76px;
  border-radius:24px; background:#fff;
  box-shadow:0 1px 0 rgba(20,30,60,.04), 0 18px 40px -12px rgba(20,30,60,.18), 0 0 0 1px rgba(36,50,130,.06);
  font-family:'Montserrat', sans-serif; font-size:19px; font-weight:600; color:#1b2257; white-space:nowrap;
}
.p20b-ligne span{ color:#1b2257; }
.p20b-pastille{
  left:12px; top:50%; width:48px; height:48px; margin-top:-24px; border-radius:50%;
  background:linear-gradient(140deg, #ea9a9c, #e28588 45%, #d4697a);
  box-shadow:0 1px 2px rgba(20,30,60,.06), 0 4px 12px -4px rgba(20,30,60,.14);
}
.p20b-icone{
  position:absolute; left:50%; top:50%; background-size:contain !important; background-position:center !important;
}

/* Le téléphone, mis en avant : on a envie d'appeler. */
.p20b-ligne--tel{
  padding-left:92px; border-radius:24px; overflow:hidden;
  background:linear-gradient(120deg, #e8268c 0%, #d20074 50%, #b5006a 100%);
  box-shadow:0 22px 40px -16px rgba(210,0,116,.6), inset 0 1px 0 rgba(255,255,255,.25);
  font-size:25px; font-weight:800; letter-spacing:.01em;
}
.p20b-ligne--tel span{ color:#fff; }
.p20b-ligne--tel .p20b-pastille{
  left:14px; width:60px; height:60px; margin-top:-30px;
  background:rgba(255,255,255,.2); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45);
}


/* ══════════════════════════════ Le mouvement ══════════════════════════
   Tout est posé avant 3,6 s. Trois sujets seulement vivent ensuite : le
   soleil qui respire, l'anneau du portrait qui tourne, le téléphone qui
   sonne. */

/* Les chaleurs et les arcs se posent sans respirer ensuite. */
.js-anim :is(.est-active, .est-sortante) .p20b-chaleur[data-rv="halo"]{
  animation:rv-halo 1800ms ease-out var(--d) both;
}
.js-anim :is(.est-active, .est-sortante) .p20b-arcs[data-rv="halo"]{
  animation:rv-halo 1100ms ease-out var(--d) both;
}

/* La photo se resserre en s'ouvrant ; le soleil se lève, ses rayons
   apparaissent, puis il respire. */
.js-anim :is(.est-active, .est-sortante) .p20b-plage{
  animation:p20b-approche 1100ms var(--anim-courbe) var(--d) both;
}
@keyframes p20b-approche{ from{ scale:1.12; } to{ scale:1; } }
.js-anim :is(.est-active, .est-sortante) .p20b-eclat{
  animation:p20b-leve 1100ms var(--anim-courbe) calc(var(--d) + 450ms) both,
            p20b-respire 4.5s ease-in-out calc(var(--d) + 1550ms) infinite alternate;
}
@keyframes p20b-leve{ from{ opacity:0; scale:.4; } to{ opacity:1; scale:1; } }
@keyframes p20b-respire{ from{ opacity:1; scale:1; } to{ opacity:.8; scale:1.1; } }
.js-anim :is(.est-active, .est-sortante) .p20b-rayons{
  animation:p20b-apparait 1100ms ease-out calc(var(--d) + 600ms) both;
}
@keyframes p20b-apparait{ from{ opacity:0; } to{ opacity:1; } }

/* Les arcs se tracent depuis le sol, l'un après l'autre. */
.js-anim :is(.est-active, .est-sortante) .p20b-arcs path{
  stroke-dasharray:1 1;
  animation:p20b-trace 1100ms var(--anim-douce) calc(var(--d) + var(--i) * 140ms) both;
}
@keyframes p20b-trace{ from{ stroke-dashoffset:1; } to{ stroke-dashoffset:0; } }

/* Le cadre apparaît avec la photo. */
.js-anim :is(.est-active, .est-sortante) .p20b-cadre{
  animation:p20b-cadre 1000ms var(--anim-courbe) calc(var(--rvd, 0ms) * var(--tempo, 1) + 250ms) both;
}
@keyframes p20b-cadre{ from{ opacity:0; scale:.97; } to{ opacity:1; scale:1; } }

/* L'anneau du portrait tourne lentement. */
.js-anim :is(.est-active, .est-sortante) .p20b-anneau{
  animation:p20b-tourne 14s linear var(--d) infinite;
}
@keyframes p20b-tourne{ from{ rotate:0deg; } to{ rotate:360deg; } }

/* Les pictogrammes éclosent avec leur phrase. */
.js-anim :is(.est-active, .est-sortante) .p20b-picto{
  animation:p20b-eclot 600ms var(--anim-ressort) calc(var(--d) + 120ms) both;
}
@keyframes p20b-eclot{ from{ scale:0; rotate:-30deg; } to{ scale:1; rotate:0deg; } }

/* Le téléphone sonne doucement, de temps en temps. */
.js-anim :is(.est-active, .est-sortante) .p20b-ligne--tel .p20b-icone{
  animation:p20b-sonne 3.6s ease-in-out calc(var(--d) + 1200ms) infinite;
}
@keyframes p20b-sonne{
  0%, 22%, 100%{ rotate:0deg; }
  3% { rotate:-16deg; } 6% { rotate:14deg; } 9% { rotate:-12deg; }
  12%{ rotate:10deg; } 15%{ rotate:-6deg; } 18%{ rotate:3deg; }
}

@media (prefers-reduced-motion:reduce){
  .js-anim .p20b *{ animation:none !important; }
}