/* Refonte 3D locale (13/10/2026) — hero avec scène WebGL. Chargée après styles.css ; ne modifie que le hero.
   Composition « large » : (min-width:1000px) and (min-aspect-ratio:23/20), identique à isWide() de la scène. */

/* Gabarit des sections : masqué dès la première image (le moteur des sections pose la même règle, mais seulement une
   fois chargé ; avant, le texte brut « {{ … }} » de la barre de navigation mobile apparaissait un instant). */
x-dc{display:none!important}
/* Pas de transitions pendant la mise en place des styles au chargement (boutons qui passaient du blanc à leur couleur). */
html.preload *,html.preload *::before,html.preload *::after{transition:none!important}

.hero.hero3d{background:#12100e}
.hero3d .hero-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;opacity:0;transition:opacity .7s var(--ease);touch-action:pan-y}
.hero3d.scene-water .hero-canvas,.hero3d.is-3d .hero-canvas{opacity:1}
.hero3d .hero-shade{display:none}
.hero3d::after{z-index:1;height:170px}
.hero3d .site-header,.hero3d .hero-content,.hero3d .hero-services,.hero3d .scroll-cue,.hero3d .scene-pause{z-index:3}
.hero3d .hero-stage{z-index:2;pointer-events:none}
.hero3d .scene-anchor{position:absolute;visibility:hidden}
.hero3d .scene-ring{display:none}
.hero3d .scene-poster{position:absolute;inset:0;display:none;background:url(assets/scene-poster.webp) 50% 30%/contain no-repeat}
.hero3d .hero-photo{z-index:1;overflow:hidden;background:#100e0c;transition:opacity .6s var(--ease)}
.hero3d .hero-photo img{object-fit:cover}

/* Bouton pause / reprise de l'animation */
.scene-pause{position:absolute;right:2.4%;bottom:2.6%;display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 16px 0 13px;border:1px solid #6e5e4799;border-radius:999px;background:#12100ecc;color:var(--gold-light);font:600 12px/1 var(--body);letter-spacing:.02em;cursor:pointer;transition:background-color var(--t-base) var(--ease),border-color var(--t-base) var(--ease),color var(--t-base) var(--ease),transform var(--t-fast) var(--ease)}
.scene-pause[hidden]{display:none}
.scene-pause svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.scene-pause .i-play{display:none;fill:currentColor;stroke:none}
.scene-pause.is-paused .i-play{display:block}.scene-pause.is-paused .i-pause{display:none}
.scene-pause:hover{background:#231b10e6;border-color:var(--gold)}
.scene-pause:active{transform:scale(.97)}
.scene-pause:focus-visible{outline:3px solid var(--gold-light);outline-offset:3px}

/* ---------- Composition large : texte à gauche, scène à droite ---------- */
@media (min-width:1000px) and (min-aspect-ratio:23/20){
  .hero.hero3d{container-type:size;height:max(620px,100svh)}
  .hero.hero3d .hero-content{width:min(41%,640px);top:17.5%}
  .hero.hero3d h1{font-size:clamp(48px,5vw,88px);line-height:.98;max-width:none}
  html[lang=de] .hero.hero3d h1{font-size:clamp(42px,4.3vw,78px)}
  .hero.hero3d .hero-subtitle{max-width:30ch}
  .hero.hero3d .hero-services{width:min(37%,600px);left:3.6%;bottom:7%}
  .hero.hero3d .service-card{padding-left:22px;padding-right:18px}
  /* Plateau commun à la scène : 1 px de référence = --u (cadre 1672 × 941 contenu dans le hero). */
  .hero.hero3d .hero-stage{position:absolute;inset:0;--u:min(calc(100cqh / 941),calc(100cqw / 1672));--sx:calc((100cqw - 1672 * var(--u)) / 2);--sy:max(0px,calc((100cqh - 941 * var(--u)) * .3));perspective:calc(100cqh * 2.19);perspective-origin:50% 50%}
  /* Vitre photo : boîte HTML de la plaque WebGL (même place, même taille). En repli (sans WebGL) et en attente du premier
     rendu, vitre CSS posée à l'emplacement de la plaque. Une fois la scène lancée, la boîte est collée à la plaque à chaque
     rendu (matrix3d calculée par la scène, classe .pane-glued) : seul le compte à rebours y reste visible. */
  .hero.hero3d .hero-pane{position:absolute;left:calc(var(--sx) + 882 * var(--u));top:calc(var(--sy) + 172 * var(--u));width:calc(760 * var(--u));height:calc(560 * var(--u));border-radius:calc(22 * var(--u));transform:rotateY(-24deg) rotateX(11.5deg) rotateZ(-1.6deg)}
  .hero.hero3d.pane-glued .hero-stage{perspective:none}
  .hero.hero3d.pane-glued .hero-pane{left:0;top:0;transform-origin:0 0}
  .hero.hero3d .hero-photo{inset:0;border-radius:inherit;box-shadow:0 40px 90px -30px #000d,inset 0 0 0 1px #d9b86e80}
  .hero.hero3d .hero-photo img{object-position:96% 50%}
  /* Masquée par défaut (la scène porte la photo) : jamais d'apparition fugace au chargement. Montrée seulement en repli. */
  .hero.hero3d .hero-photo{opacity:0;transition:none}
  html.no-scene .hero.hero3d .hero-photo,.hero.hero3d.scene-fallback:not(.is-3d) .hero-photo{opacity:1;transition:opacity .6s var(--ease)}
  .hero.hero3d.scene-fallback .scene-poster{display:block}
  /* Relais pendant la préparation de la scène : l'anneau seul apparaît, puis se fond dans la scène vivante. */
  .hero.hero3d .scene-ring{display:block;position:absolute;inset:0;background:url(assets/scene-ring.webp) 50% 30%/contain no-repeat;opacity:0;transition:opacity .9s var(--ease)}
  html.scene-pending .hero.hero3d .scene-ring{animation:afd-ring-in 1.1s .15s var(--ease) both}
  .hero.hero3d.is-3d .scene-ring{opacity:0}
  @keyframes afd-ring-in{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}
  .hero.hero3d .scroll-cue{left:6.2%}
}

/* ---------- Composition empilée : téléphone, tablette, fenêtre étroite ou très haute ---------- */
@media not all and (min-width:1000px) and (min-aspect-ratio:23/20){
  .hero.hero3d{height:auto;max-height:none;min-height:max(100svh,760px);display:flex;flex-direction:column;padding-bottom:12px}
  .hero.hero3d .hero-content{position:relative;left:auto;top:auto!important;width:auto;max-width:720px;margin:58px 5.7% 0}
  /* Globe à gauche ; à droite, une seule vitre : la photo, puis l'écran du compte à rebours dans le même verre. La photo
     garde la hauteur de la carte du 13/10 (cadre compris) ; la scène pose l'eau au bas du globe, comme le 13/10. */
  .hero.hero3d .hero-stage{position:relative;flex:1 0 auto;margin:20px 0 0}
  .hero.hero3d .hero-pane{--card-t:perspective(900px) rotateY(-15deg) rotateX(5deg) rotateZ(-1deg);position:relative;display:flex;flex-direction:column;gap:5px;box-sizing:border-box;width:54%;margin:calc(clamp(300px,64vw,560px) * .03) 6% 0 auto;padding:7px;border-radius:18px;background:linear-gradient(135deg,#5a4a33cc,#1d1712d9 45%,#2a1f16cc);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transform:var(--card-t);animation:afd-card-in 1.1s .05s cubic-bezier(.22,1.12,.36,1) both;transform-origin:70% 50%;box-shadow:0 30px 60px -24px #000e,inset 0 0 0 1px #f0d89b70,inset 1px 1px 0 1px #fff3d63d}
  .hero.hero3d .hero-pane::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;background:linear-gradient(118deg,#fff2d433 0,#fff2d40d 22%,transparent 40%,transparent 78%,#c52a3126 100%)}
  .hero.hero3d .hero-photo{position:relative;inset:auto;flex:none;height:calc(clamp(300px,64vw,560px) * .86 - 14px);border-radius:12px 12px 5px 5px}
  .hero.hero3d .hero-photo img{object-position:50% 30%}
  .hero.hero3d.scene-fallback .scene-anchor{visibility:visible;background:url(assets/scene-globe.webp) 50% 50%/contain no-repeat}
  .hero.hero3d .scene-anchor{left:3%;top:4%;width:42%;height:calc(clamp(300px,64vw,560px) * .8)}
  .hero.hero3d .hero-services{position:relative;left:auto;bottom:auto;width:auto;margin:14px 5.5% 0}
  .hero.hero3d .scroll-cue{position:relative;left:auto;bottom:auto;margin:6px 5.5% 0;align-self:flex-start}
  .hero.hero3d .scene-pause{position:absolute;right:5.5%;bottom:14px}
}
/* La vitre photo est déjà là à la première image (aucun temps mort) et finit de se poser en pivotant. */
@keyframes afd-card-in{from{opacity:.3;transform:var(--card-t) translate3d(40px,30px,-50px) rotateY(-20deg)}to{opacity:1;transform:var(--card-t)}}
@media (min-width:701px) and (max-width:999px){
  .hero.hero3d .hero-pane{width:56%;margin:calc(clamp(300px,50vw,450px) * .03) 8% 0 auto}
  .hero.hero3d .hero-photo{height:calc(clamp(300px,50vw,450px) * .8 - 14px)}
  .hero.hero3d .hero-photo img{object-position:78% 40%}
  .hero.hero3d .scene-anchor{width:38%;top:calc(clamp(300px,50vw,450px) * .04);height:calc(clamp(300px,50vw,450px) * .8)}
  .hero.hero3d .hero-content{margin-top:40px}
  .hero.hero3d .hero-services{max-width:720px;margin-top:16px}
}
@media (max-width:700px){
  .hero.hero3d .hero-content{margin-top:62px}
  /* Vitre agrandie jusqu'au bas du premier écran (390 × 844) : photo recadrée sur le visage et les épaules, écran du
     compte à rebours dessous (choix de Marco, 14/10). Le globe garde sa course du 13/10. */
  .hero.hero3d .hero-stage{flex:0 0 auto;margin-top:10px}
  .hero.hero3d .hero-pane{width:58%;margin:0 3.5% 0 auto}
  .hero.hero3d .hero-photo{height:clamp(124px,35vw,200px)}
  .hero.hero3d .scene-anchor{top:0;width:40%;height:clamp(193px,53.8vw,262px)}
  .hero.hero3d .hero-services{margin-top:14px}
  .hero.hero3d .service-card{background:#12100eb3}
}
@media (max-height:500px) and (min-width:701px){
  .hero.hero3d .hero-content{margin-top:30px}
}

/* Mouvement réduit : pas de fondu du canvas. */
@media (prefers-reduced-transparency:reduce){
  @media not all and (min-width:1000px) and (min-aspect-ratio:23/20){.hero.hero3d .hero-pane{-webkit-backdrop-filter:none;backdrop-filter:none;background:#1d1712}}
}
@media (prefers-reduced-motion:reduce){
  .hero3d .hero-canvas,.hero3d .hero-photo,.hero3d .hero-pane,.hero3d .scene-ring{transition:none;animation:none!important}
}


/* ---------- Mini parcours (section Trajet) : carte animée dans une vitre, comme la vitre photo de l'accueil ---------- */
.parcours{position:relative;margin-top:22px;perspective:1300px;perspective-origin:50% 30%}
.pc-card{--pc-bx:5deg;--pc-by:0deg;--pc-rx:0deg;--pc-ry:0deg;position:relative;aspect-ratio:12/5;max-height:520px;width:100%;padding:8px;border-radius:26px;
  background:linear-gradient(135deg,#5a4a33cc,#1d1712e6 45%,#2a1f16cc);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 46px 90px -40px #000,0 0 0 1px #d9b86e47 inset,inset 0 1px 0 #fff2d480,inset 1px 0 0 #fff2d433;
  transform:rotateX(calc(var(--pc-bx) + var(--pc-rx))) rotateY(calc(var(--pc-by) + var(--pc-ry)));transform-origin:50% 60%;will-change:transform}
/* Biseau : arête lumineuse en haut à gauche, reflet rouge en bas à droite (même verre que la vitre photo) */
.pc-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(118deg,#fff2d433 0,#fff2d40d 22%,transparent 40%,transparent 78%,#c52a3126 100%)}
.pc-screen{position:relative;width:100%;height:100%;border-radius:19px;overflow:hidden;background:radial-gradient(120% 95% at 50% 38%,#1f1a14 0,#13100d 58%,#0b0908 100%);box-shadow:inset 0 0 0 1px #000a,inset 0 22px 44px -24px #000}
/* Reflet de vitre qui glisse avec l'inclinaison */
.pc-screen::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(104deg,transparent calc(var(--pc-sheen,50%) - 26%),#fff2d412 calc(var(--pc-sheen,50%) - 4%),#fff2d40a var(--pc-sheen,50%),transparent calc(var(--pc-sheen,50%) + 22%)),radial-gradient(140% 100% at 50% 45%,transparent 55%,#0008 100%)}
.pc-svg{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:visible}
.pc-line{fill:none;stroke:#f0d79a;stroke-linejoin:round;stroke-linecap:round}
.pc-route{fill:none;stroke:#f0d79a;stroke-opacity:.5;stroke-width:1.3;stroke-dasharray:2.5 7;stroke-linecap:round}
.pc-trail{fill:none;stroke:#f3dca2;stroke-width:2.2;stroke-linecap:round}
.pc-trail-glow{fill:none;stroke:#e3a64e;stroke-opacity:.3;stroke-width:7;stroke-linecap:round}
.pc-tint{fill:#c52a31}
.pc-ring{fill:none;stroke:#f0d79a;stroke-width:1.3}
.pc-ring-red{stroke:#ec5a60}
.pc-plane{fill:#fbf2df;stroke:#14100c;stroke-width:1.1;stroke-linejoin:round}
.pc-labels{position:absolute;inset:0;pointer-events:none}
.pc-chip{position:absolute;left:0;top:0;display:inline-flex;align-items:center;gap:7px;padding:5px 12px 5px 7px;border-radius:999px;background:#120f0cc2;border:1px solid #d9b86e5c;color:#f8f0de;font:600 13px/1.2 var(--body),sans-serif;letter-spacing:.02em;white-space:nowrap;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 10px 20px -12px #000;visibility:hidden;will-change:transform,opacity}
.pc-chip-af{padding-left:12px;color:#f0d79a;letter-spacing:.14em;text-transform:uppercase;font-size:12px}
.pc-mini{display:block;height:14px;border-radius:2px;box-shadow:0 0 0 1px #0007}
.pc-chip-cm .pc-mini{width:21px}.pc-chip-de .pc-mini{width:23.3px}.pc-chip-ca .pc-mini{width:28px}
.pc-pause{position:absolute;right:18px;bottom:18px;z-index:2;width:44px;height:44px;padding:0;display:grid;place-items:center;border-radius:50%;border:1px solid #d9b86e70;background:#120f0cd0;color:#f0d79a;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background-color .2s,border-color .2s}
.pc-pause[hidden]{display:none}
.pc-pause svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pc-pause .i-play{display:none;fill:currentColor;stroke:none}
.pc-pause.is-paused .i-play{display:block}
.pc-pause.is-paused .i-pause{display:none}
.pc-pause:hover{background:#231b10ee;border-color:#d9b86e}
.pc-pause:focus-visible{outline:3px solid #f0d79a;outline-offset:3px}
/* Entrée : la vitre se pose en pivotant quand la section arrive à l'écran */
.parcours.pc-ready .pc-card{animation:afd-pc-in 1.15s cubic-bezier(.22,1.12,.36,1) both;animation-play-state:paused}
.parcours.pc-in .pc-card{animation-play-state:running}
@keyframes afd-pc-in{from{opacity:.35;transform:rotateX(calc(var(--pc-bx) + 16deg)) rotateY(calc(var(--pc-by) - 6deg)) translate3d(0,26px,-60px)}to{opacity:1;transform:rotateX(calc(var(--pc-bx) + var(--pc-rx))) rotateY(calc(var(--pc-by) + var(--pc-ry)))}}
@media (max-width:999px){.pc-card{aspect-ratio:16/10}}
@media (max-width:700px){
  .parcours{margin:18px -4px 0}
  .pc-card{--pc-bx:7deg;--pc-by:-10deg;aspect-ratio:4/5;padding:7px;border-radius:20px}
  .pc-screen{border-radius:14px}
  .pc-chip{font-size:12px;padding:4px 10px 4px 6px;gap:6px}
  .pc-chip-af{padding-left:10px;letter-spacing:.1em}
  .pc-mini{height:12px}.pc-chip-cm .pc-mini{width:18px}.pc-chip-de .pc-mini{width:20px}.pc-chip-ca .pc-mini{width:24px}
  .pc-pause{right:14px;bottom:14px}
}
@media (prefers-reduced-transparency:reduce){.pc-card,.pc-chip,.pc-pause{-webkit-backdrop-filter:none;backdrop-filter:none}.pc-card{background:#2a2118}.pc-chip,.pc-pause{background:#120f0c}}
@media (prefers-reduced-motion:reduce){.pc-card,.parcours.pc-ready .pc-card{animation:none;transform:none}}
.pc-svg{stroke:none}
.pc-mini{stroke:none}


/* ---------- Contact de l'accueil : Messenger et WhatsApp côte à côte, visibles sur tous les formats et animés ---------- */
.hero.hero3d .hero-actions{flex-direction:row;flex-wrap:wrap;align-items:stretch;gap:12px}
.hero.hero3d .hero-actions .cta{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;gap:12px;min-height:56px;max-width:none;padding:11px 22px 11px 12px;border-radius:14px;transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s,background-color .25s,color .25s}
.hero.hero3d .hero-actions .cta .arrow{margin-left:4px}
.cta-icon{position:relative;display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:50%}
.hero.hero3d .hero-actions .cta-icon svg{width:21px;height:21px;stroke-width:1.6}
.cta-messenger .cta-icon{background:#1a120a17;box-shadow:inset 0 0 0 1px #1a120a40}
.hero.hero3d .hero-actions .cta-whatsapp{display:inline-flex;color:#f6e7c4;font:600 16px/1.35 var(--body);text-shadow:none;background:linear-gradient(135deg,#2e2519d9,#15110de6);border:1px solid #d9b86e8c;box-shadow:inset 0 1px 0 #fff2d42e,0 12px 26px -16px #000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.cta-whatsapp .cta-icon{color:#5bdc8d;background:#25d3661c;box-shadow:inset 0 0 0 1px #25d36661}
.hero.hero3d .hero-actions .cta-whatsapp:hover{border-color:#e8c983;color:#fff3d6;transform:translateY(-2px);box-shadow:inset 0 1px 0 #fff2d440,0 16px 30px -16px #000}
.hero.hero3d .hero-actions .cta-whatsapp:focus-visible{outline:3px solid #f0d79a;outline-offset:3px}
/* Reflet qui balaie le bouton (sous le texte, au-dessus du fond) */
.cta::before{content:"";position:absolute;top:-25%;bottom:-25%;left:0;width:42%;z-index:-1;pointer-events:none;background:linear-gradient(100deg,transparent,#fff7e6b3 50%,transparent);transform:translateX(-170%) skewX(-18deg);opacity:0}
.cta-whatsapp::before{background:linear-gradient(100deg,transparent,#fff2d452 50%,transparent)}
/* Onde « disponible » autour de l'icône */
.cta-icon::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 2px #6b4515;opacity:0;pointer-events:none}
.cta-whatsapp .cta-icon::after{box-shadow:0 0 0 2px #3fd07a}
@media (prefers-reduced-motion:no-preference){
  .hero3d.is-3d .cta::before{animation:afd-cta-sheen 6.4s 2.4s infinite}
  .hero3d.is-3d .cta-whatsapp::before{animation-delay:5.6s}
  .hero3d.is-3d .cta-icon::after{animation:afd-cta-ping 6.4s 2.4s infinite}
  .hero3d.is-3d .cta-whatsapp .cta-icon::after{animation-delay:5.6s}
  .hero3d.is-3d .cta-icon svg{animation:afd-cta-nudge 6.4s 2.4s infinite}
  .hero3d.is-3d .cta-whatsapp .cta-icon svg{animation-delay:5.6s}
  .hero3d.is-paused .cta::before,.hero3d.is-paused .cta-icon::after,.hero3d.is-paused .cta-icon svg{animation-play-state:paused}
}
@keyframes afd-cta-sheen{0%{transform:translateX(-170%) skewX(-18deg);opacity:0}3%{opacity:1}19%{transform:translateX(330%) skewX(-18deg);opacity:1}20%,100%{transform:translateX(330%) skewX(-18deg);opacity:0}}
@keyframes afd-cta-ping{0%{transform:scale(1);opacity:.8}30%,100%{transform:scale(1.9);opacity:0}}
@keyframes afd-cta-nudge{0%,16%,100%{transform:none}3%{transform:rotate(-13deg) scale(1.1)}7%{transform:rotate(10deg) scale(1.1)}11%{transform:rotate(-5deg) scale(1.03)}}
@media (max-width:700px){
  .hero.hero3d .hero-actions{gap:10px;flex-wrap:nowrap}
  .hero.hero3d .hero-actions .cta{flex:1 1 0;min-width:0;min-height:54px;padding:8px 10px 8px 8px;gap:9px;font-family:var(--display);font-weight:400;font-size:16px;line-height:1.15;text-align:left;border-radius:12px}
  .cta-icon{width:32px;height:32px}
  .hero.hero3d .hero-actions .cta-icon svg{width:19px;height:19px}
  .cta-messenger .cta-icon{background:#fff4df1c;box-shadow:inset 0 0 0 1px #fff4df4d}
  .cta-messenger .cta-icon::after{box-shadow:0 0 0 2px #ffe6c4}
}
@media (max-width:380px){.hero.hero3d .hero-actions .cta{font:600 13px/1.2 var(--body);gap:7px;padding:7px 8px 7px 7px}.cta-icon{width:28px;height:28px}.hero.hero3d .hero-actions .cta-icon svg{width:17px;height:17px}}
/* Composition large : les deux boutons tiennent sur une ligne devant le globe, avec au moins 24 px d'air
   (bord gauche du globe = 715 px du plateau de référence) ; passage à la ligne seulement si la place manque. */
@media (min-width:1000px) and (min-aspect-ratio:23/20){
  .hero.hero3d .hero-content{--u:min(calc(100cqh / 941),calc(100cqw / 1672));--sx:calc((100cqw - 1672 * var(--u)) / 2)}
  .hero.hero3d .hero-actions{gap:10px;flex-wrap:nowrap;max-width:calc(var(--sx) + 715 * var(--u) - 6.2cqw - 24px)}
  .hero.hero3d .hero-actions .cta{flex:0 1 auto;min-width:0;min-height:52px;padding:8px 16px 8px 9px;gap:10px;font-size:clamp(14px,1.1vw,16px);line-height:1.2;text-align:left}
  .hero.hero3d .hero-actions .cta-icon{width:30px;height:30px}
  .hero.hero3d .hero-actions .cta-icon svg{width:19px;height:19px}
}
@media (min-width:1000px) and (max-width:1599px) and (min-aspect-ratio:23/20){.hero.hero3d .hero-actions .cta .arrow{display:none}}


/* ---------- Compte à rebours du cours d'allemand en ligne (14/10/2026), dans la vitre photo de l'accueil ----------
   Titre, compte à rebours jusqu'au 1er novembre 2026 (00:00, UTC+1), tarif de lancement et lien vers l'inscription
   existante, dans la même vitre que la jeune femme : aucun panneau, cadre ni biseau propres. Ordinateur : colonne posée
   sur le verre fumé de la moitié gauche de la photo, entre le globe et la jeune femme ; téléphone et tablette : écran sous
   la photo, dans le même verre. Vu à travers la perspective de la vitre, le texte est rendu à ~92 % de sa taille : plus petit
   texte 13 à 13,5 px et lien de 48 px, pour ≥ 12 px et ≥ 44 px à l'écran (mesuré par la recette). */
.course-plaque{position:relative;z-index:2}
.plq-screen{container-type:inline-size;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;gap:9px;color:#ece1cc}
.plq-title{margin:0;font:400 17px/1.2 var(--display);color:var(--gold-light);letter-spacing:0;text-wrap:balance}
.plq-title sup{font-size:max(13.5px,.62em);line-height:0;vertical-align:.5em;margin-left:.03em}
.plq-count{margin:0;align-self:stretch}
.plq-cells{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
.plq-cell{display:grid;justify-items:center;min-width:0;padding:4px 0 5px;border-radius:9px;background:linear-gradient(180deg,#fff2d414,#fff2d406);box-shadow:inset 0 0 0 1px #d9b86e40,inset 0 1px 0 #fff2d424}
/* Chiffres qui basculent : l'ancien pivote jusqu'à la tranche, le nouveau arrive de la tranche, dans une fenêtre fixe. */
.plq-num{display:grid;height:26px;overflow:hidden;perspective:120px}
.plq-v,.plq-old{grid-area:1/1;font:400 24px/26px var(--display);color:#f3d58f;font-variant-numeric:lining-nums tabular-nums;text-align:center;backface-visibility:hidden}
.plq-unit{margin-top:1px;font:600 13.5px/1.15 var(--body);color:#d6c8a8;letter-spacing:0;white-space:nowrap}
.plq-price{margin:0;font:500 13px/1.35 var(--body);color:#ece1cc;text-wrap:pretty}
.plq-price strong{font-weight:700;color:#f3d58f;white-space:nowrap}
.plq-link{display:inline-flex;align-items:center;gap:8px;box-sizing:border-box;max-width:100%;min-height:48px;padding:6px 14px 6px 16px;border-radius:999px;border:1px solid #d9b86e8c;background:linear-gradient(135deg,#2e2519e6,#15110df0);color:#f6e7c4;font:600 13.5px/1.2 var(--body);text-align:left;text-decoration:none;pointer-events:auto;box-shadow:inset 0 1px 0 #fff2d42e;transition:transform var(--t-fast) var(--ease),border-color var(--t-base) var(--ease),background-color var(--t-base) var(--ease),color var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease)}
.plq-link svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--t-base) var(--ease)}
.plq-link:hover{border-color:#e8c983;color:#fff3d6;background-color:#3a2d1c;box-shadow:inset 0 1px 0 #fff2d440,inset 0 0 0 1px #e8c98333;transform:translateY(-1px)}
.plq-link:hover svg{transform:translateX(3px)}
.plq-link:active{transform:scale(.97);transition-duration:100ms}
.plq-link:focus-visible{outline:3px solid #f0d79a;outline-offset:3px}
.plq-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.plq-count.is-pending .plq-cells,.plq-price.is-pending{visibility:hidden}
/* Colonne étroite (ordinateur jusqu'à 1280 px) : compte à rebours sur deux rangées. */
@container (max-width:199px){.plq-cells{grid-template-columns:repeat(2,minmax(0,1fr))}.plq-title{font-size:15px}.plq-link{padding:5px 12px}}
/* Grande vitre (grand écran, tablette) : à l'échelle. */
@container (min-width:270px){.plq-title{font-size:20px}.plq-num{height:31px}.plq-v,.plq-old{font-size:28px;line-height:31px}.plq-price,.plq-link{font-size:14px}}
/* Composition large : colonne sur le verre fumé de la moitié gauche de la photo (fractions de la photo : x de 0,07 à 0,425,
   bas à 3,5 %), entre le bord gauche de la vitre (le globe passe derrière, caché par la photo) et la chevelure de la jeune
   femme ; visage et chemise dégagés. Le verre fumé est peint par la
   plaque WebGL (plate.js, PLATE.smoke) ; en repli, même dégradé en CSS. Avant le premier rendu de la scène, rien : le compte
   à rebours apparaît avec la photo, découvert par le même rideau de lumière. */
@media (min-width:1000px) and (min-aspect-ratio:23/20){
  .hero.hero3d .course-plaque{position:absolute;inset:0;border-radius:inherit;pointer-events:none}
  .hero.hero3d .course-plaque::before{content:"";position:absolute;inset:calc(12 / 560 * 100%) calc(12 / 760 * 100%);border-radius:calc(13 * var(--u));background:linear-gradient(90deg,#090705ed 0,#090705ed 43%,#09070577 47.25%,#09070500 51.5%)}
  .hero.hero3d.pane-glued .course-plaque::before{display:none}
  .hero.hero3d .plq-screen{position:absolute;left:calc((12 + .07 * 736) / 760 * 100%);width:calc(.355 * 736 / 760 * 100%);bottom:calc((12 + .035 * 536) / 560 * 100%)}
  .hero.hero3d:not(.pane-glued) .course-plaque{visibility:hidden}
  html.no-scene .hero.hero3d .course-plaque,.hero.hero3d.scene-fallback:not(.is-3d) .course-plaque{visibility:visible}
}
/* Composition empilée : écran sous la photo, dans la même vitre. */
@media not all and (min-width:1000px) and (min-aspect-ratio:23/20){
  .hero.hero3d .plq-screen{gap:8px;padding:11px 12px 12px;border-radius:5px 5px 12px 12px;background:radial-gradient(130% 120% at 30% 0,#221a12 0,#13100c 60%,#0d0a08 100%);box-shadow:inset 0 0 0 1px #000a}
}
@media (max-width:700px){
  .hero.hero3d .plq-screen{gap:7px;padding:9px 8px 10px}
  .hero.hero3d .plq-title{font-size:15px}
  .hero.hero3d .plq-cells{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
  .hero.hero3d .plq-unit{font-size:13px}
  .hero.hero3d .plq-num{height:23px}
  .hero.hero3d .plq-v,.hero.hero3d .plq-old{font-size:20px;line-height:23px}
  .hero.hero3d .plq-link{padding:5px 12px}
}
/* Très petit téléphone : « heures » ne tient plus dans une case sur quatre (les unités allemandes et anglaises, oui). */
@media (max-width:374px){html[lang=fr] .hero.hero3d .plq-cells{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){.plq-link,.plq-link svg{transition:none}}

/* ---------- Titre du hero : jamais rogné (14/10, point final du titre allemand coupé à 768 px) ----------
   Les lignes masquent seulement à la verticale : l'entrée ligne par ligne (montée sous le masque) reste intacte, et rien
   n'est coupé à droite ou à gauche. Sans « overflow: clip », le masque complet d'origine reste en place. */
@supports (overflow:clip){.hero.hero3d #hero-title .line{overflow-x:visible;overflow-y:clip}}
/* Allemand (« beginnt mit einem / klaren Lebenslauf. ») : la boîte n'est plus bornée à 12 caractères sur tablette, et la
   taille suit la largeur disponible pour que chaque ligne tienne dans sa boîte, du petit téléphone au grand écran ; sur
   ordinateur, un peu plus petite que le 13/10 (4vw) pour garder de l'air entre les lignes plus longues et le globe. */
html[lang=de] .hero.hero3d h1{max-width:none}
@media (max-width:370px){html[lang=de] .hero.hero3d h1{font-size:10.2vw}}
@media (min-width:1000px) and (min-aspect-ratio:23/20){html[lang=de] .hero.hero3d h1{font-size:clamp(40px,4vw,72px)}}
@media not all and (min-width:1000px) and (min-aspect-ratio:23/20){@media (min-width:1101px){html[lang=de] .hero.hero3d h1{font-size:min(6.05vw,84px)}}}
/* Cartes de service du hero en allemand : « Lebenslauf » garde ~8 px de marge dans la carte sur téléphone (21 px → 4,6vw). */
@media (max-width:700px){html[lang=de] .hero.hero3d .service-card>span:last-child{font-size:min(21px,4.6vw)}}
/* Boutons de contact en allemand entre 381 et 419 px : « Per Messenger » manquait la ligne de 2 px (trois lignes, lien
   d'inscription repoussé sous le premier écran à 390) ; 15 px et un écart de 7 px suffisent pour deux lignes. */
@media (min-width:381px) and (max-width:419px){html[lang=de] .hero.hero3d .hero-actions .cta{font-size:15px;gap:7px}}
/* Sections en allemand (revue visuelle du 14/10) : la pastille « Kostenpflichtig · nach Angebot » passe sous le portrait
   plutôt que sur deux lignes ; titres des cartes de destination répartis de façon équilibrée (pas de fragment isolé). */
html[lang=de] #services article>div{flex-wrap:wrap;row-gap:12px}
html[lang=de] #destinations strong{text-wrap:balance}
html[lang=de] #services article>div>span{text-wrap:balance}