/* Lagrange · l'accueil (V26) : l'affiche.
   Le nom en très grand, l'accroche, la prochaine date en grand, les suivantes en lignes ; puis le lieu dessiné, ce qu'on
   y fait, comment on vient, qui y joue, ce qui s'y est déjà passé, et le canal. Mobile d'abord : le premier écran d'un
   téléphone dit le nom, l'accroche, la prochaine date, ses jours et son bouton.
   Une seule lumière bouge, le halo ambre derrière la prochaine date, et prefers-reduced-motion l'arrête. Rien n'est une
   image : la grange et la carte sont des SVG, les jours des cases. La palette des lumières (ambre, violet, blanc,
   turquoise, vert) ne sert qu'à la grange dessinée et à la couleur de chaque date ; le violet des boutons est celui du site. */

/* POLICES:debut, recopié de styles.css par outils/construire.py à chaque construction : ne pas éditer ici */
@font-face{font-family:'Archivo';font-style:normal;font-weight:500 800;font-stretch:100% 125%;font-display:swap;
  src:url(polices/archivo.woff2?v=fe6afe9274) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:500 800;font-stretch:100% 125%;font-display:swap;
  src:url(polices/archivo-ext.woff2?v=aedc60b445) format('woff2');unicode-range:U+0100-0130,U+0132-0151,U+0154-024F,U+1E00-1EFF}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(polices/instrument-sans.woff2?v=ec079366fb) format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(polices/instrument-sans-ext.woff2?v=e85bd70f93) format('woff2');unicode-range:U+0100-0130,U+0132-0151,U+0154-024F,U+1E00-1EFF}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url(polices/dm-mono-400.woff2?v=9b21fe8fa1) format('woff2')}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url(polices/dm-mono-400-ext.woff2?v=e8d4c5ed1b) format('woff2');unicode-range:U+0100-0130,U+0132-0151,U+0154-024F,U+1E00-1EFF}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url(polices/dm-mono-500.woff2?v=7f8486809b) format('woff2')}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url(polices/dm-mono-500-ext.woff2?v=c7f9e219f8) format('woff2');unicode-range:U+0100-0130,U+0132-0151,U+0154-024F,U+1E00-1EFF}
@font-face{font-family:'Archivo secours';src:local('Arial'),local('Helvetica');size-adjust:96.9%}
@font-face{font-family:'Instrument Sans secours';src:local('Arial'),local('Helvetica');size-adjust:99.9%}
@font-face{font-family:'DM Mono secours';src:local('Menlo'),local('Courier New');size-adjust:99.7%}
:root{--display:'Archivo','Archivo secours',sans-serif; --body:'Instrument Sans','Instrument Sans secours',sans-serif; --mono:'DM Mono','DM Mono secours',monospace;}
/* POLICES:fin */

:root{
  --noir:#07060D; --ink:#EDEAF6; --dim:#A8A1C6; --beam:#6B5CFF; --oak:#8A6A45;
  --trait:rgba(237,234,246,.14);
  --marge:clamp(16px,4vw,56px);
}
/* la couleur de chaque date : la teinte, l'encre posée dessus, le fond pâle d'un jour, son bord, le texte sur le noir */
.couleur-ambre{--c:#FF9624;--c-sur:#07060D;--c-pale:rgba(255,150,36,.15);--c-bord:rgba(255,150,36,.55);--c-texte:#FFB45A}
.couleur-violet{--c:#8446FF;--c-sur:#FFFFFF;--c-pale:rgba(132,70,255,.2);--c-bord:rgba(150,104,255,.7);--c-texte:#B9A6FF}
.couleur-blanc{--c:#F0ECFF;--c-sur:#07060D;--c-pale:rgba(240,236,255,.1);--c-bord:rgba(240,236,255,.5);--c-texte:#F0ECFF}
.couleur-turquoise{--c:#28D6D0;--c-sur:#07060D;--c-pale:rgba(40,214,208,.13);--c-bord:rgba(40,214,208,.55);--c-texte:#62E2DD}
.couleur-vert{--c:#48EE8C;--c-sur:#07060D;--c-pale:rgba(72,238,140,.13);--c-bord:rgba(72,238,140,.55);--c-texte:#80F3B0}

*{box-sizing:border-box}
html{background:var(--noir);color:var(--ink);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--noir);color:var(--ink);font-family:var(--body);line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--beam);outline-offset:3px;border-radius:3px}

[hidden]{display:none!important}                 /* les têtes en réserve et les dates d'avant, cachées par le script */
.haut__droite{display:flex;align-items:center;gap:.6rem}   /* V27 : la langue, puis le canal */
.langue{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;color:var(--dim);text-decoration:none;padding:.35rem .55rem;
  min-height:28px;display:inline-flex;align-items:center;border:1px solid var(--trait);border-radius:999px}
@media (hover:hover){.langue:hover{color:var(--ink);border-color:var(--beam)}}
.langue:focus-visible{outline:2px solid var(--beam);outline-offset:3px}
.page{position:relative;overflow:hidden}                  /* le halo déborde, la page ne défile jamais de côté */
.affiche{position:relative;max-width:1480px;margin:0 auto;padding:0 var(--marge) calc(1.6rem + env(safe-area-inset-bottom))}

.sur{font-family:var(--mono);font-weight:400;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);line-height:1.6}
.sur b{color:var(--ink);font-weight:500}
.lien{display:inline-block;padding:.4rem 0;margin:-.4rem 0;color:var(--ink);   /* une cible de 24 px au moins, sans bouger la ligne */
  text-decoration:underline;text-decoration-color:var(--beam);text-underline-offset:.3em}
@media (hover:hover){.lien:hover{color:#fff;text-decoration-color:#fff}}

.bouton{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:.45rem 1rem;border:1px solid var(--beam);
  border-radius:999px;background:rgba(107,92,255,.14);font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink);text-decoration:none;white-space:nowrap}
@media (hover:hover){.bouton:hover{background:rgba(107,92,255,.34)}}
.bouton--plein{min-height:48px;padding:.85rem 1.55rem;background:var(--beam);color:#fff;font-size:.8rem}
@media (hover:hover){.bouton--plein:hover{background:var(--beam);filter:brightness(1.15)}}

/* ---------- le haut, le nom, l'accroche ---------- */
.haut{display:flex;justify-content:space-between;align-items:center;gap:.6rem 1rem;padding:max(.9rem,env(safe-area-inset-top)) 0 .3rem}
.haut__ou{min-width:0;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);line-height:1.5}
/* LAGRANGE : huit lettres d'Archivo élargi, à la largeur de la colonne. Le mot mesure 7,19 fois son corps (mesuré dans
   Chrome à 360, 390, 1280 et 1440 px) : le corps vaut la colonne divisée par 7,22, et le E s'arrête juste avant la marge.
   La borne basse tient jusqu'à 320 px, la borne haute arrête le nom avec la colonne (1480 px). Sans Archivo, le secours
   (Arial élargi de rien) est plus étroit : il tient de lui-même. */
.nom{margin:.35rem 0 0 -.04em;font-family:var(--display);font-weight:800;font-variation-settings:'wdth' 125,'wght' 800;
  text-transform:uppercase;line-height:.84;letter-spacing:-.025em;white-space:nowrap;
  font-size:clamp(2.2rem,calc((100vw - 2 * var(--marge)) / 7.22),11.8rem)}
.accroche{margin:.85rem 0 0;font-family:var(--display);font-weight:500;font-variation-settings:'wdth' 100,'wght' 500;
  text-transform:uppercase;letter-spacing:.02em;line-height:1.08;font-size:clamp(1.12rem,3.1vw,2.6rem);text-wrap:balance}

/* ---------- le corps ---------- */
.corps{display:grid;grid-template-columns:minmax(0,1fr);row-gap:2.8rem;margin-top:1.6rem;padding-top:1.3rem;border-top:1px solid var(--trait)}

/* la prochaine date, et derrière elle la seule lumière qui bouge */
.prochain{position:relative;isolation:isolate}
.prochain::before{content:'';position:absolute;z-index:-1;pointer-events:none;left:-46vw;top:-4rem;width:min(130vw,1000px);aspect-ratio:1;
  border-radius:50%;background:radial-gradient(closest-side,rgba(255,150,36,.32),rgba(255,150,36,.11) 46%,rgba(255,150,36,0) 72%);
  animation:respire 9s ease-in-out infinite alternate}
.prochain[data-etat=passe]::before{animation:none;opacity:.4}
@keyframes respire{from{transform:scale(.94);opacity:.8}to{transform:scale(1.04);opacity:1}}
.prochain__nom{margin:.5rem 0 0 -.02em;font-family:var(--display);font-weight:800;font-variation-settings:'wdth' 112,'wght' 800;
  text-transform:uppercase;line-height:.9;letter-spacing:-.02em;font-size:clamp(2.6rem,10.4vw,8.4rem)}
.prochain__nom--long{font-size:clamp(2.2rem,8.4vw,7rem)}
.prochain__nom a{text-decoration:none}
@media (hover:hover){.prochain__nom a:hover{color:var(--c-texte)}}
.prochain__dates{margin-top:.8rem;font-family:var(--display);font-weight:600;font-variation-settings:'wdth' 104,'wght' 600;
  text-transform:uppercase;font-size:clamp(1.05rem,2.3vw,1.9rem);line-height:1.15;letter-spacing:.01em}
.prochain__qui{margin-top:.75rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;color:var(--dim);line-height:1.6}
.prochain__quoi{max-width:44ch;margin-top:1rem;font-size:clamp(1rem,1.15vw,1.12rem);line-height:1.55}
.prochain .bouton--plein{margin-top:1.35rem}
.prochain--vide .prochain__quoi{color:var(--dim)}

/* les jours en cases, dans la couleur de la date : plein, la nuit ; pâle, le jour */
.jours{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .7rem;margin-top:.85rem}
.jours__cases{display:flex;gap:4px}
.jours__cases span{min-width:2.55rem;padding:.3rem .45rem .28rem;border-radius:3px;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.12em;text-transform:uppercase;text-align:center;line-height:1.3}
.jours__cases .nuit{background:var(--c);color:var(--c-sur)}
.jours__cases .jour{background:var(--c-pale);color:var(--c-texte);box-shadow:inset 0 0 0 1px var(--c-bord)}
.jours__cle{font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;color:var(--dim)}

/* l'état d'une date : construire.py le pose, le script du bas de page le tient à l'heure du visiteur */
.si-encours,.si-passe{display:none}
[data-etat=encours] .si-avenir,[data-etat=passe] .si-avenir{display:none}
[data-etat=encours] .si-encours,[data-etat=passe] .si-passe{display:inline}

/* et ensuite : une ligne par date, entière cliquable */
.suite{margin-top:2.5rem}
.suite ol{margin-top:.6rem;border-top:1px solid var(--trait)}
.suite__ligne{border-bottom:1px solid var(--trait)}
.suite__ligne > a{display:grid;grid-template-columns:4.9rem minmax(0,1fr) .9rem;column-gap:.85rem;align-items:start;padding:.9rem 0 .95rem;text-decoration:none}
.suite__quand{padding-top:.15rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;color:var(--dim);line-height:1.5}
.suite__corps{display:block;min-width:0}
.suite__etiquette{display:block;font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--c-texte);line-height:1.5}
.suite__nom{margin-top:.2rem;font-family:var(--display);font-weight:740;font-variation-settings:'wdth' 110,'wght' 740;text-transform:uppercase;
  font-size:clamp(1.4rem,3vw,2.4rem);line-height:.98;letter-spacing:-.015em}
.suite__qui{display:block;margin-top:.4rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);line-height:1.6}
.suite__corps .jours{margin-top:.55rem}
.suite__fleche{align-self:center;justify-self:end;width:.55rem;height:.55rem;margin-right:.2rem;border-top:1.5px solid var(--beam);
  border-right:1.5px solid var(--beam);transform:rotate(45deg)}
@media (hover:hover){.suite__ligne > a:hover .suite__nom{color:var(--c-texte)}}
.suite__ligne[data-etat=passe] > a{opacity:.62}

/* ---------- le lieu : la grange en coupe, pleine largeur au téléphone ---------- */
.coupe{margin:1rem calc(-1 * var(--marge)) 0}
.coupe__dessin{display:block;width:100%;height:auto}
.coupe__noms{position:relative;display:block;height:2.3rem;margin:.3rem 0 0}   /* la même largeur que le dessin, pour que chaque nom tombe sous son volume */
.coupe__noms span{position:absolute;top:0;transform:translateX(-50%);width:max-content;max-width:7.2rem;text-align:center;font-family:var(--mono);
  font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);line-height:1.35}

/* ---------- la nuit, le jour, les mains ---------- */
.trio{display:grid;row-gap:1.45rem}
.trio h2{font-family:var(--display);font-weight:700;font-variation-settings:'wdth' 110,'wght' 700;text-transform:uppercase;
  font-size:1.25rem;line-height:1;letter-spacing:-.01em}
.trio p{max-width:40ch;margin-top:.55rem;font-size:.97rem;line-height:1.55}

/* ---------- où, et comment on vient ---------- */
.carte{display:block;width:100%;max-width:470px;height:auto;margin-top:1rem}
.carte .mer-fond{fill:#0A0915}                                      /* la mer, à peine plus sombre que la terre */
.carte .terre{fill:#17142A}
.carte .cote{fill:none;stroke:rgba(237,234,246,.55);stroke-width:1.1;stroke-linejoin:round}
.carte .frontiere{fill:none;stroke:rgba(237,234,246,.5);stroke-width:1;stroke-dasharray:3 3}
.carte .tunnel{fill:none;stroke:rgba(237,234,246,.4);stroke-width:1;stroke-dasharray:1 3}   /* sous la Manche */
.carte text{font-family:var(--mono);font-size:10px;letter-spacing:.05em;fill:var(--dim);paint-order:stroke;stroke:#17142A;stroke-width:3px;stroke-linejoin:round}
.carte .ville circle{fill:var(--dim)}
.carte .capitale circle{fill:var(--ink)}
.carte .capitale text{fill:var(--ink);font-size:11.5px;letter-spacing:.06em}
.carte .pays{font-size:8.5px;letter-spacing:.32em;text-transform:uppercase;fill:rgba(168,161,198,.7)}
.carte .mer{font-size:8.5px;letter-spacing:.32em;text-transform:uppercase;font-style:italic;fill:rgba(140,150,200,.6);stroke:#0A0915}
.carte .ici{fill:var(--ink)}
.carte .ici-rond{fill:none;stroke:var(--ink);stroke-width:1.2;opacity:.6}
.carte .ici-t{fill:var(--ink);font-size:12.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase}
/* fin de la carte */
.venir__texte{margin-top:1.1rem}
.venir__ou{font-family:var(--display);font-weight:640;font-variation-settings:'wdth' 108,'wght' 640;text-transform:uppercase;font-size:1.35rem;line-height:1.1}
.venir__ou small{display:block;margin-top:.4rem;font-family:var(--mono);font-weight:400;font-variation-settings:normal;font-size:.66rem;
  letter-spacing:.14em;color:var(--dim)}
.venir__texte p:not(.venir__ou){max-width:44ch;margin-top:.75rem;font-size:.97rem;line-height:1.55}

/* ---------- les collectifs ---------- */
.points{overflow:hidden;padding-left:.45rem;margin-left:-.45rem}   /* les points en tête de ligne sortent du cadre et n'y sont pas vus */
.points > ul{display:flex;flex-wrap:wrap;align-items:baseline;margin-left:-1.5rem}
.points li::before{content:'·';display:inline-block;width:1.5rem;text-align:center;color:var(--beam);font-family:var(--body)}
.cols{margin-top:.8rem;row-gap:.1rem;font-family:var(--display);font-weight:600;font-variation-settings:'wdth' 104,'wght' 600;
  text-transform:uppercase;font-size:1rem;line-height:1.55}
.note{max-width:46ch;margin-top:.7rem;font-size:.92rem;color:var(--dim)}

/* ---------- les nuits déjà faites : quatre lignes sèches ---------- */
.passees__liste{margin-top:.8rem;border-top:1px solid var(--trait)}
.passees__liste li{display:grid;row-gap:.15rem;padding:.7rem 0;border-bottom:1px solid var(--trait)}
.passees__titre{font-family:var(--display);font-weight:640;font-variation-settings:'wdth' 108,'wght' 640;text-transform:uppercase;font-size:1rem;line-height:1.25}
.passees__infos{font-family:var(--mono);font-size:.68rem;letter-spacing:.07em;color:var(--dim);line-height:1.6}

/* ---------- le mur : une grille fixe, rien ne défile ---------- */
.mur__tete{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.4rem 1rem}
.mur__tete .lien{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase}
.mur__noms{margin-top:.8rem}
.mur__noms li{font-family:var(--display);font-weight:620;font-variation-settings:'wdth' 100,'wght' 620;text-transform:uppercase;
  letter-spacing:-.01em;font-size:clamp(.92rem,1.5vw,1.3rem);line-height:1.65;color:rgba(237,234,246,.86)}
.points > .mur__noms{margin-left:-1.4rem}
.mur__noms li::before{width:1.4rem}
.mur__noms a{display:inline-block}                       /* une ligne entière de haut : 24 px au moins sous le doigt */
.mur__noms li:target{color:#fff;text-shadow:0 0 18px rgba(107,92,255,.95)}   /* le nom qu'un lien de « Ce qui manque » vient chercher */

/* ---------- le canal ---------- */
.canal{padding:1.4rem;border:1px solid var(--beam);border-radius:14px;background:rgba(107,92,255,.08)}
.canal__texte p{max-width:36ch;margin-top:.7rem}
.canal__porte{margin-top:1.2rem}
.canal__porte p{margin-top:.75rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;color:var(--dim)}

/* ---------- le pied ---------- */
.pied{display:flex;flex-wrap:wrap;gap:.35rem 1.4rem;margin-top:2.4rem;padding-top:1rem;border-top:1px solid var(--trait);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.05em;color:var(--dim);line-height:1.7}
.pied span:last-child{margin-left:auto}
.pied a{display:inline-block;padding:.4rem 0;margin:-.4rem 0;color:var(--ink);text-decoration:underline;text-decoration-color:var(--beam);text-underline-offset:.25em}

/* ---------- ordinateur ---------- */
@media (min-width:960px){
  .corps{grid-template-columns:minmax(0,7fr) minmax(330px,4.2fr);column-gap:clamp(2.5rem,5.5vw,6rem);row-gap:4.6rem;align-items:start;
    grid-template-areas:'dates lieu' 'dates venir' 'trio trio' 'collectifs passees' 'mur mur' 'canal canal';margin-top:1.5rem;padding-top:1.35rem}
  .lieu,.venir{align-self:start}
  .prochain .bouton--plein{margin-top:1.1rem}
  .prochain .jours{margin-top:.7rem}
  .prochain__qui{margin-top:.6rem}
  .prochain__quoi{margin-top:.8rem}
  .prochain__dates{margin-top:.6rem}                                  /* la colonne de droite : le lieu, puis comment on vient */
  .dates{grid-area:dates}.lieu{grid-area:lieu}.trio{grid-area:trio}.venir{grid-area:venir}
  .collectifs{grid-area:collectifs}.passees{grid-area:passees}.mur{grid-area:mur}.canal{grid-area:canal}
  .lieu{padding-top:.2rem}
  .prochain::before{left:-20vw;top:-7rem;width:min(74vw,1040px)}
  .coupe{margin:1rem 0 0}
  .coupe__noms{margin:.35rem 0 0}
  .suite__ligne > a{grid-template-columns:7.4rem minmax(0,1fr) 1rem;column-gap:1.2rem}
  .prochain__nom{font-size:clamp(2.6rem,7vw,6.2rem)}            /* « Sweet Spot » sur une ligne, de 960 à 1480 px (7,6 corps) */
  .prochain__nom--long{font-size:clamp(2.2rem,6vw,5.2rem)}
  .trio{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(2rem,4vw,4.5rem);padding-top:2.2rem;border-top:1px solid var(--trait)}
  .canal{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1.2rem 3rem;padding:2rem 2.2rem}
  .canal__porte{margin-top:0;text-align:right}
  .mur{padding-top:.4rem}
}
@media (max-width:380px){
  .haut__ou{font-size:.62rem;letter-spacing:.08em}              /* la ligne du haut tient à côté du bouton */
  .suite__ligne > a{grid-template-columns:4.4rem minmax(0,1fr) .8rem;column-gap:.7rem}
}
@media (prefers-reduced-motion:reduce){
  .prochain::before{animation:none}
}