/* ==========================================================================
   Accueil, section 07 · Contact (#contact) : « le lever de lune ».
   Chargé après home.css ; tout est limité à main.home #contact (le bloc .cta
   est partagé avec les autres pages) et à html:not(.calage).
   - Taille : planche 1920 × 1080 (jetons --u, --pl, --pr, --xtra de home.css).
     Texte calé en haut à gauche, lune de 1500 u dont le sommet de l'arc est à
     72 % de la section (plus bas si le texte l'exige : --ct-top, posé par
     home/contact.js), rochers de 1600 u centrés sous la lune.
   - Arrivée (classe .st-in posée par sections.js, durées × --tk) : la lune se
     lève, son bord s'embrase du sommet vers les côtés, les rochers prennent la
     lumière, un anneau de lumière fait le tour de l'adresse, des braises
     montent. Ambiance sur la section active seulement. Départ piloté par --ar.
   - Calques ajoutés par home/contact.js (.cta__orb, .cta__halo, .cta__glint,
     .cta__ridge, .cta__lit, .cta__embers, .cta__beacon) : jamais dans
     l'éditeur ni en ?calage. Sans html.yn-fx : état final, immobile.
   ========================================================================== */

@property --ct-a{syntax:'<angle>';inherits:false;initial-value:180deg}     /* bord allumé : 0 → 180deg depuis le sommet */
@property --ct-ring{syntax:'<angle>';inherits:false;initial-value:0deg}    /* tour de l'anneau du bouton mailto */

/* ---- calques communs (créés par contact.js) ------------------------------ */
html:not(.calage) main.home #contact :is(.cta__orb,.cta__ridge,.cta__lit,.cta__embers){position:absolute;inset:0;pointer-events:none}
html:not(.calage) main.home #contact .cta__halo{position:absolute;pointer-events:none;
  left:calc(var(--ct-cx) - var(--ct-d) * .68);width:calc(var(--ct-d) * 1.36);
  top:calc(var(--ct-mt) - var(--ct-d) * .26);height:calc(var(--ct-d) * .6)}
html:not(.calage) main.home #contact .cta__halo::before{content:"";position:absolute;inset:0;
  background:radial-gradient(closest-side,rgba(246,43,62,.28),rgba(200,20,36,.12) 46%,rgba(120,8,18,.045) 72%,transparent)}
/* repère de la « source de lumière » (sommet de l'arc), lu par le volume de poussière */
html:not(.calage) main.home #contact .cta__beacon{position:absolute;left:var(--ct-cx);top:var(--ct-mt);width:0;height:0}
/* reflet qui glisse sur le bord de la lune */
html:not(.calage) main.home #contact .cta__glint{position:absolute;inset:calc(-1 * var(--ct-bw)) 0 0;border-radius:50%;pointer-events:none;opacity:.5;
  background:conic-gradient(from -9deg,transparent,rgba(255,214,220,.95) 9deg,transparent 18deg);
  -webkit-mask-image:radial-gradient(closest-side,transparent calc(100% - var(--ct-bw) * 2.6),#000 calc(100% - var(--ct-bw) * .9),#000 calc(100% - 1px),transparent 100%);
  mask-image:radial-gradient(closest-side,transparent calc(100% - var(--ct-bw) * 2.6),#000 calc(100% - var(--ct-bw) * .9),#000 calc(100% - 1px),transparent 100%)}
/* copie éclairée des rochers : même boîte que .cta__rocks, version chaude,
   éclairée depuis la lune (masque) ; seule l'opacité bouge */
html:not(.calage) main.home #contact .cta__lit{opacity:calc(1 - var(--ar,0))}
html:not(.calage) main.home #contact .cta__rocks--lit{opacity:.7;
  padding-top:calc(var(--ct-bw) * 8);   /* la boîte monte au-dessus de l'arête : la lueur n'est pas coupée net */
  filter:sepia(1) saturate(4.2) hue-rotate(-50deg) brightness(1.25) drop-shadow(0 calc(-.8 * var(--ct-bw)) calc(.5 * var(--ct-bw)) rgba(255,92,108,.9)) drop-shadow(0 calc(-2 * var(--ct-bw)) calc(4 * var(--ct-bw)) rgba(246,43,62,.38));
  -webkit-mask-image:radial-gradient(56% 110% at 50% -6%,#000 34%,rgba(0,0,0,.5) 62%,transparent 90%);
  mask-image:radial-gradient(56% 110% at 50% -6%,#000 34%,rgba(0,0,0,.5) 62%,transparent 90%)}
/* braises : seulement avec les effets */
html:not(.calage) main.home #contact .cta__embers i{display:none}

/* ---- « Copier l'adresse » : l'icône devient une coche tracée ------------- */
html:not(.calage) main.home #contact .cta__ico{display:inline-grid;flex:none}
html:not(.calage) main.home #contact .cta__ico > *{grid-area:1/1}
html:not(.calage) main.home #contact .cta__ico > .ico{transition:opacity .2s var(--ease),transform .3s var(--ease)}
html:not(.calage) main.home #contact .cta__check{width:1.5em;height:1.5em;fill:none;stroke:var(--red);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
html:not(.calage) main.home #contact .is-copied .cta__ico > .ico{opacity:0;transform:scale(.6)}
html:not(.calage) main.home #contact .is-copied .cta__check{opacity:1;stroke-dashoffset:0;transition:stroke-dashoffset .3s var(--ease-out) .05s,opacity .08s linear}

/* ==========================================================================
   Ordinateur : la planche
   ========================================================================== */
@media (min-width:1024px){
  html:not(.calage) main.home #contact{
    --ct-d:calc(1500 * var(--u));                          /* diamètre de la lune */
    --ct-cx:calc(var(--fx) + 1320 * var(--u));             /* centre horizontal de la lune */
    --ct-mt:max(68%,var(--ct-top,0px));                    /* sommet de l'arc */
    --ct-bw:max(2px,calc(2.6 * var(--u)));                 /* épaisseur du bord lumineux */
    /* lueurs du bord (celles de contact.css, à l'échelle de la planche) */
    --ct-glow:inset 0 calc(4 * var(--u)) calc(6 * var(--u)) calc(-1 * var(--u)) rgba(255,90,100,.9),inset 0 calc(16 * var(--u)) calc(28 * var(--u)) calc(-10 * var(--u)) rgba(255,60,75,.45),
      0 calc(-3.5 * var(--u)) calc(18 * var(--u)) calc(-3.5 * var(--u)) rgba(255,70,85,.9),0 calc(-14 * var(--u)) calc(70 * var(--u)) calc(-10 * var(--u)) rgba(246,43,62,.6),0 calc(-25 * var(--u)) calc(160 * var(--u)) calc(-18 * var(--u)) rgba(200,20,36,.35);
    justify-content:flex-start;padding-top:calc(var(--fs-top) + 40 * var(--u))}
  html:not(.calage) main.home #contact .cta__grid{max-width:none;padding:0 var(--pr) 0 var(--pl)}
  html:not(.calage) main.home #contact .cta__title{margin-top:calc(26 * var(--u) + .1 * var(--xtra));font-size:max(44px,calc(112 * var(--u)))}
  html:not(.calage) main.home #contact .cta__body{padding-top:calc(38 * var(--u) + .25 * var(--xtra))}
  html:not(.calage) main.home #contact .cta__body .txt{font-size:var(--t-lede);line-height:1.55;max-width:max(25em,calc(700 * var(--u)))}
  html:not(.calage) main.home #contact .cta__actions{margin-top:calc(42 * var(--u) + .25 * var(--xtra));gap:max(10px,calc(14 * var(--u)))}
  html:not(.calage) main.home #contact .cta__actions .btn--red{font-size:max(13px,calc(16 * var(--u)))}

  /* lune : 1500 u, bord et lueurs internes de contact.css à l'échelle */
  html:not(.calage) main.home #contact .cta__moon{left:calc(var(--ct-cx) - var(--ct-d) / 2);top:var(--ct-mt);bottom:auto;width:var(--ct-d);height:var(--ct-d);
    border-top-width:var(--ct-bw);box-shadow:var(--ct-glow)}
  /* rochers : 1600 u centrés sous la lune ; bord droit fondu (écrans très larges) */
  html:not(.calage) main.home #contact .cta__rocks{left:calc(var(--ct-cx) - 800 * var(--u));width:calc(1600 * var(--u));height:auto;bottom:calc(-22 * var(--u));
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  /* voile : le texte reste lisible sur la vidéo, la lune reste vive */
  html:not(.calage) main.home #contact .cta__haze{background:
    radial-gradient(calc(var(--ct-d) * .5) calc(var(--ct-d) * .14) at var(--ct-cx) calc(var(--ct-mt) + var(--ct-d) * .02),rgba(246,43,62,.12),transparent 70%),
    linear-gradient(90deg,rgba(5,5,5,.6) calc(var(--pl) + 380 * var(--u)),rgba(5,5,5,.22) calc(var(--pl) + 760 * var(--u)),transparent calc(var(--pl) + 1080 * var(--u)))}
  /* annotation : en haut à droite, au-dessus de la colonne de l'index */
  html:not(.calage) main.home #contact .cta__notes{font-size:var(--t-mono);bottom:auto;right:calc(28 * var(--m) + 44px);
    top:calc(50vh - 3.5 * max(24px,calc(28 * var(--u))) - 30 * var(--u) - 6.2em)}
}
/* Un seul slogan sur ce dernier écran (le titre ; le pied de page a sa signature) :
   la note « Construisons quelque chose qui se voit » est masquée à toutes les
   tailles, comme déjà au téléphone (contact.css). L'élément et sa clé contact_title
   restent, et la note reste visible dans l'éditeur du back-office (pour pouvoir la
   modifier) : on ne la masque que si home/contact.js a tourné (.cta__orb créé). */
html:not(.calage) main.home #contact .cta__scene:has(.cta__orb) ~ .cta__notes{display:none}

/* ==========================================================================
   Téléphone et tablette : texte en haut, la lune se lève en bas de l'écran
   ========================================================================== */
@media (max-width:1023px){
  html:not(.calage) main.home #contact{
    --ct-d:170vw;--ct-cx:58vw;--ct-mt:22%;--ct-bw:2px;
    --ct-glow:inset 0 3px 4px -1px rgba(255,90,100,.9),inset 0 10px 18px -8px rgba(255,60,75,.45),0 -2px 12px -2px rgba(255,70,85,.95),0 -8px 44px -6px rgba(246,43,62,.6),0 -14px 90px -10px rgba(200,20,36,.35);
    justify-content:flex-start;padding-top:var(--fs-top)}
  html:not(.calage) main.home #contact .cta__grid{margin-block:0}
  html:not(.calage) main.home #contact .cta__title{font-size:clamp(32px,calc(46 * var(--u)),60px)}
  html:not(.calage) main.home #contact .cta__body .txt{font-size:var(--t-body)}
  html:not(.calage) main.home #contact .cta__scene{flex:1 1 auto;height:auto;min-height:clamp(110px,22svh,420px);margin-top:clamp(8px,2.4svh,28px)}
  /* masque plus long qu'à l'origine : la calotte reste pleine jusqu'aux rochers (pas de bande claire) */
  html:not(.calage) main.home #contact .cta__moon{left:calc(var(--ct-cx) - var(--ct-d) / 2);top:var(--ct-mt);width:var(--ct-d);height:var(--ct-d);transform:none;box-shadow:var(--ct-glow);
    -webkit-mask-image:linear-gradient(#000 38%,transparent 60%);mask-image:linear-gradient(#000 38%,transparent 60%)}
  html:not(.calage) main.home #contact .cta__rocks{left:calc(var(--ct-cx) - 65vw);width:130vw;height:auto;bottom:-2px;top:auto}
  html:not(.calage) main.home #contact .cta__haze{background:radial-gradient(60% 46% at var(--ct-cx) var(--ct-mt),rgba(246,43,62,.12),transparent 70%)}
}

/* ==========================================================================
   Effets (html.yn-fx) : états de départ, arrivée, ambiance, pointeur, départ.
   Avant l'arrivée : :not(.st-in). Au doigt, .ct-wait retient la scène tant
   qu'elle n'est pas à l'écran (contact.js).
   ========================================================================== */
/* -- lune : lever minuté (translate), pointeur et couché au départ (transform) */
html.yn-fx main.home #contact .cta__orb{
  transform:translate3d(calc(var(--ct-px,0) * 10 * var(--u)),calc(var(--ct-py,0) * 8 * var(--u) + var(--ar,0) * var(--ct-d) * .3),0)}
html.yn-fx main.home #contact:is(:not(.st-in),.ct-wait) .cta__orb{translate:0 calc(var(--ct-d) * .42)}
html.yn-fx main.home #contact.st-in:not(.ct-wait) .cta__orb{transition:translate calc(1700ms * var(--tk,1)) var(--e-out)}
/* halo : s'allume avec la lune, puis respire */
html.yn-fx main.home #contact:is(:not(.st-in),.ct-wait) .cta__halo{opacity:0}
html.yn-fx main.home #contact.st-in:not(.ct-wait) .cta__halo{transition:opacity calc(1400ms * var(--tk,1)) var(--e-out) calc(150ms * var(--tk,1))}
html.yn-fx main.home #contact .cta__halo::before{animation:ctBreath 8.2s ease-in-out infinite alternate;animation-play-state:paused}

/* -- bord : sombre au départ, il s'embrase du sommet vers les côtés -------- */
html.yn-fx main.home #contact .cta__moon{transform:none;border-top-color:#5a121a;   /* plus de --rise (scrollfx.js) : le lever est minuté */
  box-shadow:inset 0 calc(var(--ct-bw) * 6) calc(var(--ct-bw) * 11) calc(var(--ct-bw) * -4) rgba(255,60,75,.12)}
html.yn-fx main.home #contact .cta__moon::before,
html.yn-fx main.home #contact .cta__moon::after{content:"";position:absolute;inset:calc(-1 * var(--ct-bw)) 0 0;border-radius:50%;pointer-events:none;--ct-a:0deg}
/* bord allumé : le même que sans effets, découvert par un masque conique symétrique */
html.yn-fx main.home #contact .cta__moon::before{border-top:var(--ct-bw) solid #ff5263;box-shadow:var(--ct-glow);
  -webkit-mask-image:conic-gradient(#000 calc(var(--ct-a) - 14deg),transparent var(--ct-a) calc(360deg - var(--ct-a)),#000 calc(374deg - var(--ct-a)));
  mask-image:conic-gradient(#000 calc(var(--ct-a) - 14deg),transparent var(--ct-a) calc(360deg - var(--ct-a)),#000 calc(374deg - var(--ct-a)))}
/* fronts chauds : deux étincelles qui descendent le long du bord */
html.yn-fx main.home #contact .cta__moon::after{opacity:0;
  background:conic-gradient(transparent calc(var(--ct-a) - 18deg),rgba(255,236,238,.95) calc(var(--ct-a) - 1deg),transparent var(--ct-a) calc(360deg - var(--ct-a)),rgba(255,236,238,.95) calc(361deg - var(--ct-a)),transparent calc(378deg - var(--ct-a)));
  -webkit-mask-image:radial-gradient(closest-side,transparent calc(100% - var(--ct-bw) * 4),#000 calc(100% - var(--ct-bw) * 1.2),#000 calc(100% - 1px),transparent 100%);
  mask-image:radial-gradient(closest-side,transparent calc(100% - var(--ct-bw) * 4),#000 calc(100% - var(--ct-bw) * 1.2),#000 calc(100% - 1px),transparent 100%)}
html.yn-fx main.home #contact.st-in:not(.ct-wait) .cta__moon::before{--ct-a:180deg;transition:--ct-a calc(1200ms * var(--tk,1)) var(--e-io) calc(300ms * var(--tk,1))}
html.yn-fx main.home #contact.st-in:not(.ct-wait) .cta__moon::after{--ct-a:180deg;opacity:1;
  transition:--ct-a calc(1200ms * var(--tk,1)) var(--e-io) calc(300ms * var(--tk,1)),opacity calc(160ms * var(--tk,1)) linear calc(300ms * var(--tk,1))}
/* pendant l'embrasement seulement : le bord a son propre calque (la lune ne se repeint pas) */
html.yn-fx main.home #contact.st-in:not(.ct-wait):not(.ct-done) .cta__moon::before,
html.yn-fx main.home #contact.st-in:not(.ct-wait):not(.ct-done) .cta__moon::after{will-change:transform}
/* reflet : apparaît une fois le bord allumé, glisse de ±18° (17 s), suit l'abscisse du pointeur (±25°) */
html.yn-fx main.home #contact .cta__glint{opacity:0;transform:rotate(calc(var(--ct-px,0) * 25deg));
  animation:ctGlint 17s ease-in-out -8.5s infinite alternate;animation-play-state:paused}
html.yn-fx main.home #contact.st-in:not(.ct-wait) .cta__glint{opacity:.85;transition:opacity calc(900ms * var(--tk,1)) var(--e-out) calc(1400ms * var(--tk,1))}

/* -- rochers : montent de 24 u, prennent la lumière, suivent le pointeur --- */
html.yn-fx main.home #contact .cta__ridge{transform:translate3d(calc(var(--ct-px,0) * -20 * var(--u)),0,0)}
html.yn-fx main.home #contact:is(:not(.st-in),.ct-wait) .cta__ridge{translate:0 calc(24 * var(--u))}
html.yn-fx main.home #contact.st-in:not(.ct-wait) .cta__ridge{transition:translate calc(900ms * var(--tk,1)) var(--e-out)}
/* les rochers prennent la lumière (0 → 0,7), puis les fissures rougeoient
   (0,55 ↔ 0,75) ; la seconde animation n'avance que sur la section active */
html.yn-fx main.home #contact .cta__rocks--lit{opacity:0}
html.yn-fx main.home #contact.st-in:not(.ct-wait) .cta__rocks--lit{
  animation:ctLitIn calc(1000ms * var(--tk,1)) var(--e-out) calc(600ms * var(--tk,1)) both,ctCrack 6.6s ease-in-out calc(1600ms * var(--tk,1)) infinite;
  animation-play-state:running,paused}
html.yn-fx main.home #contact.is-current.st-in:not(.ct-wait) .cta__rocks--lit{animation-play-state:running}

/* -- braises (technique des fonds vivants du site en ligne) --------------- */
/* chaque braise monte sur une ligne légèrement inclinée (rotate statique) */
html.yn-fx main.home #contact .cta__embers i{display:block;position:absolute;bottom:9%;left:var(--x);width:var(--s);height:var(--s);border-radius:50%;rotate:var(--r);
  background:radial-gradient(circle,#ffd9dc 0,#f62b3e 52%,transparent 74%);box-shadow:0 0 9px 2px rgba(246,43,62,.3);
  opacity:0;animation:ctEmber var(--t) linear var(--dl) infinite;animation-play-state:paused}
html.yn-fx main.home #contact .cta__embers i:nth-child(1){--x:54%;--s:4px;--r:3deg;--t:21s;--dl:-4s}
html.yn-fx main.home #contact .cta__embers i:nth-child(2){--x:63%;--s:3px;--r:-2deg;--t:27.5s;--dl:-15s}
html.yn-fx main.home #contact .cta__embers i:nth-child(3){--x:71%;--s:5px;--r:2.5deg;--t:23.5s;--dl:-9s}
html.yn-fx main.home #contact .cta__embers i:nth-child(4){--x:80%;--s:3px;--r:-3deg;--t:29.5s;--dl:-21s}
html.yn-fx main.home #contact .cta__embers i:nth-child(5){--x:59%;--s:3px;--r:4deg;--t:18.5s;--dl:-11s}
html.yn-fx main.home #contact .cta__embers i:nth-child(6){--x:76%;--s:4px;--r:-1.5deg;--t:25s;--dl:-2s}
html.yn-fx main.home #contact .cta__embers i:nth-child(7){--x:86%;--s:3px;--r:-4deg;--t:17s;--dl:-7s}
html.yn-fx main.home #contact .cta__embers i:nth-child(8){--x:67%;--s:4px;--r:1.5deg;--t:31s;--dl:-25s}
html.yn-fx main.home #contact:is(:not(.st-in),.ct-wait) .cta__embers{opacity:0}
html.yn-fx main.home #contact.st-in:not(.ct-wait) .cta__embers{transition:opacity calc(1200ms * var(--tk,1)) var(--e-out) calc(1200ms * var(--tk,1))}
@media (max-width:1023px),(hover:none),(pointer:coarse){
  html.yn-fx main.home #contact .cta__embers i:nth-child(n+5){display:none}
}
@media (max-width:1023px){
  html.yn-fx main.home #contact .cta__embers i{animation-name:ctEmberM}
}

/* -- adresse : un anneau de lumière fait le tour du bouton, puis lueur douce */
html.yn-fx main.home #contact .cta__actions .btn--red::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  padding:max(1.5px,calc(2 * var(--u)));
  background:conic-gradient(from var(--ct-ring),transparent 0deg 240deg,rgba(255,214,220,.3) 300deg,#fff 352deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
html.yn-fx main.home #contact.st-in .cta__actions .btn--red::after{animation:ctRing calc(900ms * var(--tk,1)) var(--e-io) calc(1100ms * var(--tk,1)) both}
html.yn-fx main.home #contact.ct-lit .cta__actions .btn--red:not(:hover):not(:focus-visible),
html:not(.calage):not(.yn-fx) main.home #contact .cta__actions .btn--red:not(:hover):not(:focus-visible){box-shadow:0 0 calc(30 * var(--u)) calc(-6 * var(--u)) rgba(246,43,62,.55)}

/* -- ambiance et calques : seulement sur la section active ---------------- */
html.yn-fx main.home #contact.is-current .cta__halo::before,
html.yn-fx main.home #contact.is-current .cta__glint,
html.yn-fx main.home #contact.is-current .cta__rocks--lit,
html.yn-fx main.home #contact.is-current .cta__embers i{animation-play-state:running}
html.yn-fx main.home #contact.is-current :is(.cta__orb,.cta__ridge){will-change:transform}
html.yn-fx main.home #contact.is-current .cta__lit{will-change:opacity}

@keyframes ctBreath{from{opacity:.78}to{opacity:1}}
@keyframes ctGlint{from{rotate:-18deg}to{rotate:18deg}}
@keyframes ctCrack{0%,100%{opacity:.7}30%{opacity:.75}70%{opacity:.55}}
@keyframes ctLitIn{from{opacity:0}to{opacity:.7}}
@keyframes ctEmber{0%{transform:translate3d(0,0,0);opacity:0}10%{opacity:.32}76%{opacity:.16}100%{transform:translate3d(0,-58vh,0);opacity:0}}
@keyframes ctEmberM{0%{transform:translate3d(0,0,0);opacity:0}10%{opacity:.32}76%{opacity:.16}100%{transform:translate3d(0,-34vh,0);opacity:0}}
@keyframes ctRing{0%{--ct-ring:0deg;opacity:0}12%{opacity:1}82%{opacity:1}100%{--ct-ring:360deg;opacity:0}}

@media (prefers-reduced-motion:reduce){
  html:not(.calage) main.home #contact .cta__ico > .ico,
  html:not(.calage) main.home #contact .cta__check{transition:none!important}
  html:not(.calage) main.home #contact .cta__halo::before,
  html:not(.calage) main.home #contact .cta__glint,
  html:not(.calage) main.home #contact .cta__rocks--lit{animation:none!important;opacity:.7}
}