/* Candescence — feuille de style du site. Les jetons de :root sont la charte : toute couleur ou taille part d'ici. */

@font-face{font-family:"Archivo";src:url("../assets/polices/archivo-latin-wdth-normal.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("../assets/polices/archivo-latin-wdth-italic.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-style:italic;font-display:swap}
@font-face{font-family:"Libre Caslon Text";src:url("../assets/polices/libre-caslon-text-latin-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}

:root{
  /* Encres de la carte */
  --papier:#f0f2f4;
  --papier-vif:#fbfcfc;
  --encre:#1d2230;
  --encre-2:#4b5268;
  --ombre:#3a3874;
  --ombre-2:#707aa0;
  --lumiere:#ffcd68;
  --lumiere-2:#fff0be;
  --braise:#e88a12;
  --eau:#1f6fae;
  --eau-2:#bedbf0;
  --eau-fonce:#17548a;
  --sienne:#a9663c;
  --rouge:#cf3320;
  --rouge-fonce:#a82614;
  --trait:rgba(58,56,116,.22);
  --carroyage:rgba(58,56,116,.07);

  --texte:"Archivo","Helvetica Neue",Arial,sans-serif;
  --eaux:"Libre Caslon Text","Iowan Old Style",Georgia,serif;

  /* Une seule règle d'espacement : l'équidistance. Tout écart en est un multiple. */
  --eq:.5rem;
  --marge:clamp(.875rem,3vw,2.75rem);
  --retrait:clamp(1.25rem,4.5vw,4rem);
  --colonne:74rem;
  --sortie:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:1rem;-webkit-text-size-adjust:100%;scrollbar-color:var(--ombre-2) var(--papier)}
body{margin:0;background:var(--papier);color:var(--encre);font-family:var(--texte);font-size:1.0625rem;line-height:1.55;font-stretch:100%;font-variant-numeric:lining-nums;caret-color:var(--rouge);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--lumiere);color:var(--encre)}
img,svg,canvas{display:block;max-width:100%}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration-thickness:.08em;text-underline-offset:.22em}
a:hover{text-decoration-color:var(--rouge)}
:focus-visible{outline:2px solid var(--rouge);outline-offset:3px;border-radius:1px}
[hidden]{display:none!important}
.evitement{position:absolute;left:var(--marge);top:-4rem;z-index:20;background:var(--encre);color:var(--papier-vif);padding:.6rem 1rem;text-decoration:none}
.evitement:focus{top:.5rem}

/* ---------- Marge haute : le nom et les renvois ---------- */
.marge-haut{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:calc(var(--eq)*2) var(--marge)}
.nom{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;font-weight:700;font-stretch:112%;font-size:1.2rem;letter-spacing:-.012em}
.nom svg{width:1.9rem;height:1.9rem;flex:none}
.renvois{display:flex;gap:clamp(1rem,2.6vw,2.25rem);font-size:.98rem;font-weight:550}
.renvois a{text-decoration:none;padding:.5rem 0;background:linear-gradient(var(--rouge),var(--rouge)) 0 100%/0 2px no-repeat;transition:background-size .35s var(--sortie)}
.renvois a:hover,.renvois a:focus-visible{background-size:100% 2px}

/* ---------- La feuille : première vue. La carte occupe tout le cadre, le titre est posé dessus ---------- */
.feuille{min-height:100svh;display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.cadre{position:relative;overflow:hidden;margin:0 var(--marge);container-type:size;min-height:31rem;background:var(--papier);--fx:.5;--fy:.3;isolation:isolate}
.cadre::after{content:"";position:absolute;inset:0;z-index:3;border:1.5px solid var(--encre);pointer-events:none}
/* --u : unités de la planche par pixel d'écran. js/carte.js le règle au plus juste ; la valeur ci-dessous sert sans script. */
.terrain{position:absolute;aspect-ratio:1600/1124;width:max(100cqw,calc(100cqh*1.4235));left:calc(var(--fx)*100cqw);top:calc(var(--fy)*100cqh);transform:translate(calc(var(--fx)*-100%),calc(var(--fy)*-100%));--u:1.15}
.terrain>*{position:absolute;inset:0;width:100%;height:100%}
.relief{opacity:0;transition:opacity .5s linear}
.relief.pret{opacity:1}
.plan{overflow:visible;font-family:var(--texte)}
.plan .frontiere-bande{fill:none;stroke:var(--ombre);stroke-opacity:.16;stroke-width:calc(5px*var(--u));stroke-linejoin:round}
.plan .frontiere{fill:none;stroke:var(--ombre);stroke-opacity:.6;stroke-width:calc(.85px*var(--u));stroke-dasharray:9 4 1.5 4;stroke-linejoin:round}
.plan text{paint-order:stroke;stroke:var(--papier);stroke-opacity:.82;stroke-width:calc(2.6px*var(--u));stroke-linejoin:round}
.plan .massif{font-size:min(calc(23px*var(--u)),48px);font-weight:500;font-stretch:125%;letter-spacing:.72em;fill:var(--ombre);fill-opacity:.82}
.plan .lac{font-family:var(--eaux);font-style:italic;font-size:calc(16.5px*var(--u));letter-spacing:.07em;fill:var(--eau);stroke-opacity:.6;stroke-width:calc(1.8px*var(--u))}
.plan .lac.petit{font-size:calc(14px*var(--u))}
.plan .ville text{font-size:min(calc(13.5px*var(--u)),46px);font-weight:520;font-stretch:96%;fill:var(--encre);transform:translate(calc((var(--u) - 1)*4px),calc((var(--u) - 1)*3px))}
.plan .ville text[text-anchor=end]{transform:translate(calc((var(--u) - 1)*-4px),calc((var(--u) - 1)*1px))}
.plan .ville.discrete text{display:none}
.plan .ville circle{fill:var(--papier-vif);stroke:var(--encre);stroke-width:1.6;transition:fill .7s linear,stroke .7s linear}
.plan .ville circle:not(.eclat),.plan .ici .coeur,.plan .sommet path{transform-box:fill-box;transform-origin:center;transform:scale(calc(var(--u)*.7))}
.plan .sommet text{font-size:calc(11.5px*var(--u));font-style:italic;font-stretch:92%;fill:var(--encre-2);transform:translate(calc((var(--u) - 1)*4px),calc((var(--u) - 1)*2px))}
.plan .sommet path{fill:var(--encre)}
.plan .ville.allumee circle:not(.eclat){fill:#fff1c2;stroke:var(--braise)}
.plan .ville .eclat{fill:none;stroke:var(--braise);stroke-width:1.6;opacity:0;transform-box:fill-box;transform-origin:center}
.plan .ville.arrivee .eclat{animation:onde 2.4s var(--sortie)}
@keyframes onde{from{transform:scale(calc(var(--u)*.1));opacity:.9}to{transform:scale(calc(var(--u)*.56));opacity:0}}
/* Le rayon : la traîne de la lumière quand elle passe d'une ville à l'autre */
.plan .rayon{fill:none;stroke:#ffc45c;stroke-opacity:.5;stroke-width:calc(4.6px*var(--u));stroke-linecap:round;transition:opacity .4s linear}
.plan .rayon.vif{stroke:#fff6d6;stroke-opacity:.95;stroke-width:calc(1.3px*var(--u))}
.plan .ici{display:none}
.plan.anime .ici{display:block}
.plan .ici .coeur{fill:#fffdf6;stroke:var(--braise);stroke-width:2.4}
.plan .ici .halo{fill:url(#aura)}
.plan.guide .rayon{opacity:0}
.plan .encre{transition:opacity 1s linear .35s}
.js .plan .encre.attente{opacity:0}
.titre{position:absolute;left:0;top:0;z-index:2;padding:clamp(1.5rem,7cqh,4rem) var(--retrait);max-width:min(100%,52rem)}
.titre p,.titre .lien{text-shadow:0 0 .15rem var(--papier),0 0 .4rem var(--papier),0 0 .8rem var(--papier),0 0 1.5rem var(--papier),0 0 2.2rem var(--papier)}
.titre h1{text-shadow:0 0 1.2rem rgba(240,242,244,.75)}

/* Amorces de coordonnées sur le cadre, posées par js/carte.js */
.amorces{position:absolute;inset:0;z-index:3;pointer-events:none;font-size:.7rem;font-weight:520;font-variant-numeric:tabular-nums lining-nums;color:var(--encre)}
.amorces span{position:absolute;white-space:nowrap;line-height:1;text-shadow:0 0 .2rem var(--papier),0 0 .45rem var(--papier)}
.amorces span::before{content:"";position:absolute;background:var(--encre)}
.amorces .b{bottom:0;transform:translateX(-50%);padding-bottom:.6rem}
.amorces .h{top:0;transform:translateX(-50%);padding-top:.6rem}
.amorces .b::before,.amorces .h::before{left:calc(50% - .75px);width:1.5px;height:.42rem}
.amorces .b::before{bottom:0}
.amorces .h::before{top:0}
.amorces .d{right:0;transform:translateY(-50%);padding-right:.62rem}
.amorces .g{left:0;transform:translateY(-50%);padding-left:.62rem}
.amorces .d::before,.amorces .g::before{top:calc(50% - .75px);height:1.5px;width:.42rem}
.amorces .d::before{right:0}
.amorces .g::before{left:0}

/* La lumière de la lampe déborde du cadre et tombe sur le papier des sections suivantes */
main{position:relative;z-index:0;overflow-x:clip}
.lueur{position:absolute;z-index:-1;left:0;top:0;width:min(185vw,104rem);aspect-ratio:1;translate:-50% -50%;transform:translate(50vw,34rem);background:radial-gradient(closest-side,rgba(255,216,128,.62),rgba(255,231,160,.36) 38%,rgba(255,240,190,.14) 68%,rgba(255,240,190,0));pointer-events:none;will-change:transform}
h1{font-size:clamp(2.75rem,min(1.2rem + 5.6vw,13.5svh),5.75rem);line-height:.96;font-weight:760;font-stretch:104%;letter-spacing:-.036em;text-wrap:balance}
.titre p{margin-top:calc(var(--eq)*3);max-width:35ch;font-size:clamp(1.08rem,.95rem + .55vw,1.3rem);line-height:1.42;color:var(--encre);font-weight:450}
.gestes{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.75rem;margin-top:calc(var(--eq)*4)}
.bouton{display:inline-flex;align-items:center;gap:.7rem;min-height:3.25rem;padding:.8rem 1.35rem .8rem 1.5rem;background:var(--rouge);color:#fff;font-weight:650;font-size:1.08rem;text-decoration:none;letter-spacing:.005em;transition:background-color .2s linear,gap .35s var(--sortie)}
.bouton svg{width:1.15rem;height:1.15rem;flex:none}
.bouton:hover{background:var(--rouge-fonce);gap:1.05rem}
.bouton:active{transform:translateY(1px)}
.lien{font-weight:600;text-decoration-color:var(--ombre-2)}

.marge-bas{display:flex;align-items:center;justify-content:space-between;gap:1rem 2rem;padding:calc(var(--eq)*1.5) var(--marge) calc(var(--eq)*2);font-size:.82rem;font-variant-numeric:tabular-nums lining-nums;color:var(--encre-2)}
.echelle{display:flex;align-items:flex-end;gap:.6rem}
.echelle i{display:block;width:var(--km100,7rem);height:.42rem;border:1px solid var(--encre);background:linear-gradient(90deg,var(--encre) 25%,transparent 25% 50%,var(--encre) 50% 75%,transparent 75%)}
.lecture{text-align:right;color:var(--encre);font-weight:500;white-space:nowrap}

/* ---------- Sections sur papier quadrillé ---------- */
main>section:not(.feuille){position:relative;padding:clamp(4rem,7.5vw,7rem) calc(var(--marge) + var(--retrait))}
.carroye{background-image:linear-gradient(to right,var(--carroyage) 1px,transparent 1px),linear-gradient(to bottom,var(--carroyage) 1px,transparent 1px);background-size:7.5rem 7.5rem;background-position:var(--marge) 0}
.dedans{max-width:78rem;margin:0;position:relative}
h2{font-size:clamp(2.1rem,1.1rem + 3.4vw,3.75rem);line-height:1.02;font-weight:740;font-stretch:102%;letter-spacing:-.03em;text-wrap:balance}
h3{font-size:1.32rem;line-height:1.2;font-weight:680;letter-spacing:-.012em}
.corps{color:var(--encre-2);max-width:62ch}
.corps strong{color:var(--encre);font-weight:620}

/* Tête de section : le titre à gauche, une phrase d'introduction à droite, posée sur la même ligne de pied */
.tete{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:clamp(1.5rem,6vw,6rem);align-items:end}
.tete h2{max-width:21ch}
.tete .corps{font-size:1.16rem;line-height:1.55;padding-bottom:.3rem}

/* Qui nous sommes : une phrase courte dont le mot « rayonner » éclaire la page, puis le propos */
.entreprise{overflow-x:clip}
.entreprise .dedans{isolation:isolate;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.manifeste{font-size:clamp(2.6rem,1.2rem + 4.4vw,4.75rem);line-height:1;max-width:9ch}
.sans-coupe{white-space:nowrap}
.rayonner{position:relative;display:inline-block;padding:0 .04em;margin-right:-.07em;font-family:var(--eaux);font-style:italic;font-weight:400;font-size:1.08em;letter-spacing:-.012em;text-shadow:0 0 .35em #fff8e0}
.rayonner::before,.rayonner::after{content:"";position:absolute;z-index:-1;left:50%;top:56%;aspect-ratio:1;border-radius:50%;translate:-50% -50%;pointer-events:none}
.rayonner::before{width:6.4em;background:radial-gradient(closest-side,rgba(255,253,244,.96),rgba(255,236,168,.9) 20%,rgba(255,210,116,.55) 44%,rgba(255,205,104,.18) 72%,rgba(255,205,104,0));transition:scale 1.9s var(--sortie),opacity 1.1s linear}
.rayonner::after{width:15em;background:repeating-conic-gradient(rgba(255,184,72,.62) 0 .9deg,rgba(255,184,72,0) .9deg 7.5deg);-webkit-mask-image:radial-gradient(closest-side,transparent 15%,#000 21%,rgba(0,0,0,.42) 48%,transparent 96%);mask-image:radial-gradient(closest-side,transparent 15%,#000 21%,rgba(0,0,0,.42) 48%,transparent 96%);animation:tourner 180s linear infinite;transition:scale 2.6s var(--sortie) .15s,opacity 1.6s linear .15s}
@keyframes tourner{to{rotate:360deg}}
.js .rayonner:not(.vu)::before{scale:.2;opacity:0}
.js .rayonner:not(.vu)::after{scale:.45;opacity:0}
.propos{padding-top:.5rem}
.chapeau{font-size:clamp(1.3rem,1rem + 1.05vw,1.75rem);line-height:1.32;font-weight:480;letter-spacing:-.014em;max-width:34ch;text-wrap:pretty}
.reperes{margin-top:clamp(2.25rem,4.5vw,3.75rem);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.5rem,3vw,3rem)}
.reperes>div{border-top:1.5px solid var(--encre);padding-top:calc(var(--eq)*2.5)}
.reperes h3{margin-bottom:.5rem}
.reperes p{color:var(--encre-2);max-width:40ch}

/* Les domaines : quatre scènes animées, une par métier. Chaque scène se construit quand elle arrive à l'écran, tient, puis recommence. */
.domaines{margin-top:clamp(2.5rem,5vw,4.5rem);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2.5rem,5vw,4.25rem) clamp(1.5rem,3vw,2.75rem)}
.domaines>li>h3{font-size:clamp(1.4rem,1.1rem + .8vw,1.7rem);margin-bottom:.5rem}
.domaines>li>p{color:var(--encre-2);max-width:46ch;font-size:1.08rem}
.exemples{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.1rem}
.exemples li{font-size:.86rem;font-weight:560;line-height:1.2;padding:.36rem .65rem;border:1px solid var(--trait);background:var(--papier-vif)}
.scene{display:block;width:100%;height:auto;margin-bottom:calc(var(--eq)*3.5);outline:1px solid var(--trait);outline-offset:-1px;font-family:var(--texte);background:var(--papier-vif)}
.s-site{background:radial-gradient(115% 125% at 0 0,var(--lumiere-2),var(--papier-vif) 68%)}
.s-appli{background:radial-gradient(115% 125% at 100% 0,#cfe4f4,var(--papier-vif) 70%)}
.s-papier{background:radial-gradient(115% 125% at 0 100%,#f3e3d3,var(--papier-vif) 70%)}
.s-ia{background:radial-gradient(48% 64% at 50% 50%,rgba(255,205,104,.24),rgba(255,205,104,0)),var(--encre);outline-color:var(--encre)}
.s-ombre{fill:var(--ombre);fill-opacity:.24;filter:blur(11px);transform:translateY(13px)}
.s-fenetre,.s-tel{fill:var(--papier-vif);stroke:var(--encre);stroke-width:1.5}
.s-filet{fill:none;stroke:var(--encre);stroke-width:1.5}
.s-filet.fin{stroke-width:1.2}
.s-pt{fill:var(--ombre-2)}
.s-pt.r{fill:var(--rouge)}
.s-pt.j{fill:var(--lumiere)}
.s-pt.b{fill:var(--eau)}
.s-champ{fill:var(--papier);stroke:var(--ombre);stroke-opacity:.28}
.s-url{font-size:13px;font-weight:500;fill:var(--encre-2)}
.s-encre{fill:var(--encre)}
.s-gris{fill:var(--ombre-2);fill-opacity:.5}
.s-rouge{fill:var(--rouge)}
.s-blanc{fill:#fff}
.s-blanc.faible{fill-opacity:.36}
.s-jaune{fill:var(--lumiere)}
.s-braise{fill:var(--lumiere);stroke:var(--braise);stroke-width:1.5}
.s-carte{fill:var(--papier-vif);stroke:var(--ombre);stroke-opacity:.3}
.s-carte.chaude{fill:var(--lumiere-2);stroke:var(--braise);stroke-opacity:.85}
.s-tuile{fill:var(--lumiere-2)}
.s-tuile.eau{fill:var(--eau-2)}
.s-nuit{fill:var(--encre)}
.s-actif{fill:#fff;fill-opacity:.14}
.s-mont{fill:var(--ombre);fill-opacity:.62}
.s-mont.loin{fill:var(--ombre-2);fill-opacity:.55}
.s-soleil{fill:#fff6d8;stroke:var(--braise);stroke-width:1.5}
.s-cadre{fill:none;stroke:var(--encre);stroke-width:1.5}
.s-curseur{fill:var(--encre);stroke:#fff;stroke-width:1.3;stroke-linejoin:round}
.s-titre{font-size:16px;font-weight:720;fill:var(--encre);letter-spacing:-.012em}
.s-titre.petit{font-size:13.5px}
.s-chiffre{font-size:20px;font-weight:740;fill:var(--encre);font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.01em}
.s-barre{fill:var(--ombre-2);fill-opacity:.55}
.s-barre.vive{fill:var(--lumiere);fill-opacity:1;stroke:var(--braise);stroke-width:1.5}
.s-ligne{fill:none;stroke:var(--rouge);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.s-rond{fill:var(--papier);stroke:var(--ombre);stroke-opacity:.3}
.s-feuille{fill:var(--papier);stroke:var(--ombre);stroke-opacity:.4}
.s-feuille.dessus{fill:var(--papier-vif);stroke:var(--encre);stroke-opacity:1;stroke-width:1.5}
.s-manuscrit{fill:none;stroke:var(--ombre-2);stroke-width:1.5;stroke-linecap:round}
.s-signature{fill:none;stroke:var(--encre);stroke-width:1.5;stroke-linecap:round}
.s-tampon{fill:none;stroke:var(--rouge);stroke-width:1.6;stroke-dasharray:3 2.8}
.s-tampon.plein{stroke-dasharray:none}
.s-arc{fill:none;stroke:var(--braise);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:.1 7;animation:s-filer 1.2s linear infinite}
.s-coche{fill:none;stroke:var(--encre);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.s-fil{fill:none;stroke:#fff;stroke-opacity:.2;stroke-width:1.4}
.s-doc{fill:#f7f8fa}
.s-noeud{fill:#fffdf6;stroke:var(--braise);stroke-width:2}
.s-anneau{fill:none;stroke:var(--encre);stroke-width:1.8}
.s-point{fill:var(--braise)}
.s-etiquette{fill:var(--lumiere-2)}
.s-etiquette.eau{fill:var(--eau-2)}
.s-mot{font-size:14px;font-weight:640;fill:var(--encre);text-anchor:middle}
.s-verre{fill:#fff;fill-opacity:.07;stroke:#fff;stroke-opacity:.32}
.s-courbe{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.s-prevision{fill:none;stroke:var(--lumiere);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:.1 6}
/* Mouvements : un cycle de 10 s par élément, décalé par --d. L'état de repos (sans animation) est la scène achevée. */
.a{animation:10s var(--sortie) var(--d,0s) infinite backwards;transform-box:fill-box}
.a-app{animation-name:s-app}
.a-not{animation-name:s-not}
.a-ecr{animation-name:s-ecr;transform-origin:0 50%}
.a-pou{animation-name:s-pou;transform-origin:50% 100%}
.a-tra{animation-name:s-tra;stroke-dasharray:100 120}
.a-pop{animation-name:s-pop;transform-origin:50% 50%}
.a-lever{animation-name:s-lever}
@keyframes s-app{0%{opacity:0;transform:translateY(12px)}6%,84%{opacity:1;transform:none}91%,100%{opacity:0;transform:none}}
@keyframes s-not{0%{opacity:0;transform:translateY(-18px) scale(.94)}5%,84%{opacity:1;transform:none}91%,100%{opacity:0;transform:none}}
@keyframes s-ecr{0%{transform:scaleX(0);opacity:1}7%,84%{transform:none;opacity:1}91%,100%{transform:none;opacity:0}}
@keyframes s-pou{0%{transform:scaleY(0)}9%,84%{transform:none}92%,100%{transform:scaleY(0)}}
@keyframes s-tra{0%{stroke-dashoffset:106;opacity:1}14%,84%{stroke-dashoffset:0;opacity:1}91%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes s-pop{0%{opacity:0;transform:scale(.5)}4%{opacity:1;transform:scale(1.07)}7%,84%{opacity:1;transform:none}91%,100%{opacity:0;transform:none}}
@keyframes s-lever{0%{transform:translateY(66px)}22%,84%{transform:none}93%,100%{transform:translateY(66px)}}
.a-curseur{transform:translate(150px,210px);animation:s-curseur 10s var(--sortie) infinite backwards}
@keyframes s-curseur{0%{opacity:0;transform:translate(440px,296px)}16%{opacity:1;transform:translate(440px,296px)}31%{transform:translate(150px,210px)}33%{transform:translate(150px,210px) scale(.84)}36%,84%{opacity:1;transform:translate(150px,210px)}91%,100%{opacity:0;transform:translate(150px,210px)}}
.a-clic{fill:none;stroke:var(--rouge);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center;animation:s-clic 10s linear infinite backwards}
@keyframes s-clic{0%,32%{opacity:0;transform:scale(.25)}33%{opacity:.85;transform:scale(.3)}41%,100%{opacity:0;transform:scale(1.3)}}
.a-bascule{transform:translateX(16px);animation:s-bascule 10s var(--sortie) infinite backwards}
@keyframes s-bascule{0%,46%{transform:none}51%,88%{transform:translateX(16px)}94%,100%{transform:none}}
.a-inter{fill:var(--eau);animation:s-inter 10s linear infinite backwards}
@keyframes s-inter{0%,46%{fill:#b9bfd2}51%,88%{fill:var(--eau)}94%,100%{fill:#b9bfd2}}
.a-vol{opacity:0;transform-box:fill-box;transform-origin:center;animation:s-vol 10s cubic-bezier(.45,0,.2,1) var(--d,0s) infinite backwards}
@keyframes s-vol{0%{opacity:0;transform:translate(0,0) rotate(-4deg) scale(1)}2%{opacity:1;transform:translate(4px,-10px) rotate(-4deg) scale(1)}9%{opacity:1;transform:translate(105px,-82px) rotate(7deg) scale(.84)}15%{opacity:.9;transform:translate(205px,var(--y,0px)) rotate(0deg) scale(.42)}17%,100%{opacity:0;transform:translate(205px,var(--y,0px)) rotate(0deg) scale(.42)}}
@keyframes s-filer{to{stroke-dashoffset:-14.2}}
.a-grain{fill:none;stroke:var(--lumiere);stroke-width:6.5;stroke-linecap:round;stroke-dasharray:.1 300;opacity:0;animation:s-grain 2.8s linear var(--d,0s) infinite}
@keyframes s-grain{0%{stroke-dashoffset:0;opacity:0}10%,86%{opacity:1}100%{stroke-dashoffset:-100;opacity:0}}
.a-pulse{transform-box:fill-box;transform-origin:center;animation:s-pulse 3.4s ease-in-out infinite}
@keyframes s-pulse{0%,100%{transform:scale(.84);opacity:.72}50%{transform:scale(1.06);opacity:1}}
/* Hors de l'écran, la scène reste achevée et immobile ; js/page.js pose .joue quand elle est visible. */
.js .scene:not(.joue) *{animation:none!important}

/* L'accompagnement : quatre étapes, et une lumière qui grandit de l'une à l'autre */
.parcours{position:relative;isolation:isolate;margin-top:clamp(3.5rem,7vw,6rem);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));counter-reset:etape}
.parcours li{position:relative;padding:calc(var(--eq)*6.5) clamp(1.25rem,3vw,3rem) 0 0;counter-increment:etape}
.parcours li::before{content:"";position:absolute;left:0;right:0;top:calc(.5rem - 1px);height:2px;background:linear-gradient(90deg,var(--braise),var(--lumiere));opacity:calc(.3 + var(--k)*.175);transform-origin:0 50%;transition:transform 1.1s var(--sortie) calc((var(--k) - 1)*.32s)}
.astre{position:absolute;left:0;top:0;width:1rem;height:1rem;border-radius:50%;background:#fffdf6;border:2.5px solid var(--braise)}
.astre::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:calc(1.25rem + var(--k)*2.3rem);aspect-ratio:1;border-radius:50%;translate:-50% -50%;background:radial-gradient(closest-side,rgba(255,246,214,calc(.55 + var(--k)*.11)),rgba(255,214,128,calc(.22 + var(--k)*.11)) 46%,rgba(255,196,92,0));transition:scale 1.3s var(--sortie) calc((var(--k) - 1)*.32s + .2s),opacity .9s linear calc((var(--k) - 1)*.32s + .2s)}
.parcours h3{margin-bottom:.45rem}
.parcours h3::before{content:counter(etape) ".";margin-right:.5em;font-family:var(--eaux);font-style:italic;font-weight:400;font-size:1.06em;color:var(--ombre)}
.parcours p{color:var(--encre-2);max-width:30ch}
.js .parcours:not(.vu) li::before{transform:scaleX(0)}
.js .parcours:not(.vu) .astre::before{scale:.3;opacity:0}

/* Le contact : un lac */
.contact{background:var(--eau-2);overflow:hidden;color:var(--encre);isolation:isolate}
.contact::before{content:"";position:absolute;inset:0;background:radial-gradient(58rem 32rem at 6% -14%,rgba(255,250,236,.8),rgba(255,250,236,0) 70%);pointer-events:none}
/* Courbes de profondeur : l'adresse est au plus profond, et les courbes s'effacent avant d'atteindre le texte de gauche. */
.fond-lac{position:relative;width:fit-content;max-width:100%}
.contact .isobathes{position:absolute;z-index:-1;width:1500px;height:1100px;max-width:none;left:calc(50% - 750px);top:calc(50% - 550px);pointer-events:none;-webkit-mask-image:linear-gradient(to right,transparent 23%,#000 33%);mask-image:linear-gradient(to right,transparent 23%,#000 33%)}
.contact .isobathes path{fill:none;stroke:var(--eau);stroke-opacity:.34;stroke-width:1.2;vector-effect:non-scaling-stroke}
.contact .isobathes.motif{display:none}
.contact .dedans{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(2rem,6vw,6rem);align-items:end}
.contact h2{max-width:11ch}
.contact .corps{color:#2b3550;margin-top:calc(var(--eq)*3);max-width:38ch;font-size:1.12rem}
.coordonnees{display:grid;gap:calc(var(--eq)*2.5)}
.coordonnees a.gros{display:block;font-size:clamp(1.45rem,.9rem + 2.3vw,2.6rem);font-weight:700;font-stretch:98%;letter-spacing:-.022em;line-height:1.1;text-decoration:none;overflow-wrap:anywhere;background:linear-gradient(var(--encre),var(--encre)) 0 100%/100% 2px no-repeat;padding-bottom:.35rem;width:fit-content;max-width:100%;transition:background-size .4s var(--sortie),color .2s linear}
.coordonnees a.gros:hover{color:var(--rouge-fonce);background-image:linear-gradient(var(--rouge),var(--rouge))}
.coordonnees dt{font-family:var(--eaux);font-style:italic;color:var(--eau-fonce);font-size:1.05rem;margin-bottom:.2rem}

/* Marge basse du site */
.colophon{padding:calc(var(--eq)*5) calc(var(--marge) + var(--retrait)) calc(var(--eq)*6);font-size:.85rem;color:var(--encre-2);border-top:1.5px solid var(--encre)}
.colophon .dedans{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.75rem 2.5rem}
.colophon p{max-width:62ch}
.colophon a{text-decoration-color:var(--ombre-2)}
.colophon strong{color:var(--encre);font-weight:650}

/* ---------- Écrans étroits ---------- */
@media (max-width:60rem){
  .tete,.contact .dedans,.entreprise .dedans{grid-template-columns:1fr}
  .tete{gap:calc(var(--eq)*3)}
  .contact .dedans{align-items:start}
  .manifeste{max-width:none}
  .domaines{grid-template-columns:1fr}
  .parcours{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:2.75rem}
  /* En colonne unique, les courbes deviennent un petit motif en haut à droite, hors de tout texte. */
  .contact .isobathes{display:none}
  .contact .isobathes.motif{display:block;z-index:0;width:150px;height:110px;left:auto;right:-1.6rem;top:1.1rem;-webkit-mask-image:none;mask-image:none}
}
@media (max-width:40rem){
  body{font-size:1rem}
  .nom{font-size:1.04rem;gap:.45rem}
  .nom svg{width:1.7rem;height:1.7rem}
  .renvois{gap:.8rem;font-size:.9rem}
  .renvois a{padding:.75rem 0}
  .marge-haut{flex-wrap:wrap;row-gap:0}
  /* Sur téléphone, le titre passe au-dessus de la carte, et la Suisse tient en entier dans le cadre. */
  .cadre{display:flex;flex-direction:column;container-type:normal;min-height:0}
  .titre{position:static;order:1;flex:1 0 auto;padding:1.6rem var(--retrait) 1.5rem;max-width:none}
  .terrain{position:relative;order:2;left:auto;top:auto;transform:none;flex:none;width:112%;margin:-2% 0 -4% -7.5%;--u:3.9}
  .plan .lac,.plan .sommet,.plan .second text{display:none}
  .plan .ville.discrete text{display:block}
  .lueur{transform:translate(50vw,35rem)}
  .amorces .h,.amorces .g{display:none}
  .marge-bas{flex-direction:column;align-items:flex-start;gap:.45rem}
  .lecture{text-align:left;white-space:normal}
  .echelle i{width:calc(var(--km100,14rem)/2)}
  .echelle span{font-size:0}
  .echelle span::before{content:"50 km";font-size:.82rem}
  .reperes{grid-template-columns:1fr;gap:0}
  .reperes>div{padding-bottom:calc(var(--eq)*4)}
  .parcours{grid-template-columns:1fr;row-gap:0}
  .parcours li{padding:0 0 2.25rem 2.5rem}
  .parcours li:last-child{padding-bottom:.25rem}
  .parcours li::before{left:calc(.5rem - 1px);right:auto;top:.5rem;bottom:-.5rem;width:2px;height:auto;background:linear-gradient(180deg,var(--braise),var(--lumiere));transform-origin:50% 0}
  .parcours li:last-child::before{bottom:auto;height:0}
  .astre{top:.3rem}
  .js .parcours:not(.vu) li::before{transform:scaleY(0)}
}
@media (max-width:27rem){
  .renvois a:nth-child(2){display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
@media print{.relief,.rayon,.ici{display:none}.cadre{min-height:18rem}}