/* ==========================================================================
   Studio Phare — feuille de style
   --------------------------------------------------------------------------
   Concept : une nuit sur le fleuve. Un phare ancré à gauche reste en place
   pendant le défilement; son faisceau balaie le nom, les forfaits, la mission
   et la présentation, puis le reste du site défile normalement.

   Sommaire
     1. Polices (hébergées sur le site, aucune requête vers Google)
     2. Variables : couleurs, polices, marges
     3. Base
     4. Navigation
     5. Scène du phare (ciel, phare, faisceau, mer)
     6. Contenu qui défile sur la scène (nom + panneaux)
     7. Panneau Forfaits
     8. Panneau Présentation
     9. Engagements
    10. Réalisations (portfolio)
    11. Contact
    12. Petits écrans (≤ 760 px)
    13. Mouvement réduit
   ========================================================================== */


/* 1. Polices --------------------------------------------------------------- */
/* Newsreader est une police variable : un seul fichier couvre toutes les graisses. */
@font-face{
  font-family:"Newsreader";
  src:url("../fonts/newsreader.woff2") format("woff2");
  font-weight:200 800;
  font-display:swap;
}
@font-face{ font-family:"Hanken Grotesk"; src:url("../fonts/hanken-grotesk-400.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face{ font-family:"Hanken Grotesk"; src:url("../fonts/hanken-grotesk-500.woff2") format("woff2"); font-weight:500; font-display:swap; }
@font-face{ font-family:"Hanken Grotesk"; src:url("../fonts/hanken-grotesk-600.woff2") format("woff2"); font-weight:600; font-display:swap; }
@font-face{ font-family:"IBM Plex Mono";  src:url("../fonts/ibm-plex-mono-400.woff2") format("woff2");  font-weight:400; font-display:swap; }
@font-face{ font-family:"IBM Plex Mono";  src:url("../fonts/ibm-plex-mono-500.woff2") format("woff2");  font-weight:500; font-display:swap; }


/* 2. Variables ------------------------------------------------------------- */
:root{
  color-scheme:dark;

  /* Couleurs : la nuit (bleus) et la lumière du phare (or pâle) */
  --abysse:#060c1d;        /* fond le plus profond */
  --nuit:#0b1631;          /* surfaces */
  --maree:#15274f;         /* cadres, fonds d'images */
  --ligne:#22365f;         /* filets et bordures */
  --brume:#8a9bbd;         /* texte secondaire */
  --ecume:#e7ecf6;         /* texte principal */
  --lumiere:#f6dc96;       /* lumière du phare (accent) */
  --lumiere-vive:#fff3cf;
  --papier:#f2e9cf;        /* panneau éclairé par le faisceau */
  --encre:#0b1631;         /* texte sur panneau éclairé */
  --encre-douce:#2c3650;
  --ocre:#8a6a1f;          /* petites étiquettes sur panneau éclairé */

  /* Polices */
  --f-display:"Newsreader", "Iowan Old Style", Georgia, serif;
  --f-body:"Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Marges latérales : au moins 16 px, plus l'encoche des téléphones */
  --gutter-l:max(16px, env(safe-area-inset-left, 0px));
  --gutter-r:max(16px, env(safe-area-inset-right, 0px));
}


/* 3. Base ------------------------------------------------------------------ */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--abysse);
  color:var(--ecume);
  font:400 1.0625rem/1.65 var(--f-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--lumiere); outline-offset:3px; border-radius:2px; }

.wrap{ padding-left:var(--gutter-l); padding-right:var(--gutter-r); }
.inner{ max-width:72rem; margin-inline:auto; }

/* Petites étiquettes en capitales (« FORFAITS », « CONTACT »…) */
.mono{ font-family:var(--f-mono); font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; }
p.mono{ margin:0; }
/* Dans un panneau, les étiquettes gardent leur style même si les paragraphes changent de taille */
.panel p.mono{ margin:0; max-width:none; font-size:.75rem; color:var(--brume); }
.panel.on p.mono{ color:var(--ocre); }


/* 4. Navigation ------------------------------------------------------------ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:20;
  padding:calc(env(safe-area-inset-top, 0px) + 14px) var(--gutter-r) 14px var(--gutter-l);
  background:rgba(6,12,29,.82);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(34,54,95,.6);
}
.nav .inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; font-family:var(--f-display); font-size:1.15rem; }
.brand i{ width:8px; height:8px; border-radius:50%; background:var(--lumiere); box-shadow:0 0 12px 3px rgba(246,220,150,.6); }
.nav ul{ display:flex; gap:clamp(14px,3vw,32px); list-style:none; margin:0; padding:0; }
.nav ul a{ text-decoration:none; color:var(--brume); font-size:.9rem; transition:color .2s; }
.nav ul a:hover{ color:var(--lumiere); }


/* 5. Scène du phare -------------------------------------------------------- */
/* La scène contient deux couches :
   - .stage : le décor (ciel, phare, faisceau, mer), épinglé à l'écran (sticky);
   - .scene-flow : le contenu, qui défile par-dessus le décor.
   Quand le contenu est terminé, le décor se détache et défile avec la page. */
.scene{
  position:relative;
  /* Taille du phare : plus haut que l'écran, sa base est cachée sous la mer */
  --tower-h:114vh; --tower-h:114svh;
  --tower-sink:22vh; --tower-sink:22svh;
  --tower-w:calc(var(--tower-h) * .4);   /* le dessin fait 400 × 1000 */
}
.stage{
  position:sticky; top:0;
  height:100vh; height:100svh;
  overflow:hidden;
  background:linear-gradient(180deg, #040917 0%, var(--abysse) 35%, #0e1d42 82%, #13274f 100%);
}

/* Étoiles : un seul point dont les ombres (box-shadow) sont générées en JS */
.stars{ position:absolute; left:0; top:0; width:1px; height:1px; border-radius:50%; opacity:.85; }

/* Faisceau : dégradé conique centré sur la lanterne, qui s'estompe avec la distance.
   Sa position est calée sur la lanterne en JS; sa rotation suit le défilement. */
.beam{
  position:absolute; left:0; top:0; z-index:2;
  width:300vmax; height:300vmax; margin:-150vmax 0 0 -150vmax;
  border-radius:50%; pointer-events:none; will-change:transform; mix-blend-mode:screen;
  background:conic-gradient(from 76deg,
    rgba(246,220,150,0) 0deg, rgba(246,220,150,.14) 5deg, rgba(246,220,150,.42) 12deg,
    rgba(255,243,207,.5) 14deg, rgba(246,220,150,.42) 16deg, rgba(246,220,150,.14) 23deg,
    rgba(246,220,150,0) 28deg, rgba(246,220,150,0) 360deg);
  -webkit-mask-image:radial-gradient(circle closest-side, #000 0%, rgba(0,0,0,.75) 18%, rgba(0,0,0,.25) 45%, rgba(0,0,0,0) 80%);
          mask-image:radial-gradient(circle closest-side, #000 0%, rgba(0,0,0,.75) 18%, rgba(0,0,0,.25) 45%, rgba(0,0,0,0) 80%);
}
/* Halo de la lanterne */
.halo{
  position:absolute; left:0; top:0; z-index:4;
  width:220px; height:220px; margin:-110px 0 0 -110px;
  border-radius:50%; pointer-events:none; mix-blend-mode:screen;
  background:radial-gradient(circle, rgba(255,243,207,.55) 0%, rgba(246,220,150,.18) 30%, rgba(246,220,150,0) 68%);
}
/* Le phare : en partie hors de la page à gauche et en bas */
.tower{
  position:absolute; z-index:3;
  left:calc(var(--tower-w) * -0.22);
  bottom:calc(var(--tower-sink) * -1);
  height:var(--tower-h); aspect-ratio:400 / 1000;
  pointer-events:none;
}
.tower img{ display:block; width:100%; height:100%; max-width:none; }
/* Point d'origine du faisceau : le centre de la lanterne dans le dessin */
.lantern-anchor{ position:absolute; left:50%; top:11.8%; width:1px; height:1px; }

.sea{ position:absolute; inset:auto 0 0 0; height:13%; z-index:4; pointer-events:none; }
.sea svg{ display:block; width:100%; height:100%; }


/* 6. Contenu qui défile ---------------------------------------------------- */
.scene-flow{
  position:relative; z-index:5;
  margin-top:-100vh; margin-top:-100svh;   /* remonte par-dessus le décor */
  padding-left:max(var(--gutter-l), calc(var(--tower-w) * .7 + clamp(24px, 4vw, 80px)));
  padding-right:var(--gutter-r);
}
/* Chaque bloc occupe un écran; le faisceau l'éclaire quand son centre passe au milieu */
.flow-block{
  min-height:100vh; min-height:100svh;
  display:flex; align-items:center; justify-content:flex-end;
  padding-block:10vh;
}
.flow-name{ display:block; padding-top:calc(78px + env(safe-area-inset-top, 0px)); padding-bottom:0; }

/* Nom du studio */
.nameplate{ position:relative; min-width:0; }
.nameplate .kicker{ display:flex; align-items:center; gap:14px; color:var(--brume); }
.nameplate .kicker::after{ content:""; height:1px; flex:1; max-width:9rem; background:var(--ligne); }
.wordmark{ margin:.1em 0 0; font-family:var(--f-display); font-weight:400; line-height:.86; letter-spacing:-.025em; }
.wordmark .w-studio{
  display:block; margin-bottom:.6rem; padding-left:.3em;
  font-family:var(--f-mono); font-size:clamp(.8rem,1.4vw,1rem); letter-spacing:.6em; text-transform:uppercase;
  color:var(--lumiere);
}
.wordmark .w-phare{ display:block; font-size:clamp(4.2rem, 13vw, 11.5rem); color:var(--ecume); transition:text-shadow .1s linear; }
.tagline{ margin:1.1rem 0 0; max-width:34ch; color:var(--brume); font-size:clamp(1rem,1.5vw,1.15rem); text-wrap:balance; }
.hint{ margin-top:1.4rem; display:inline-flex; align-items:center; gap:10px; color:var(--brume); }
.hint span{ display:block; width:1px; height:28px; background:linear-gradient(var(--lumiere), transparent); }

/* Panneaux : sombres au repos, ils deviennent une page claire quand le faisceau les éclaire.
   --lit (0 à 1) et la classe .on sont mis à jour en JS. */
.panel{
  --lit:0;
  position:relative; min-width:0;
  padding:clamp(20px,2.6vw,34px);
  background:rgba(11,22,49,.6);
  border:1px solid var(--ligne);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
.panel::before{ /* la « feuille de papier » qui apparaît sous la lumière (ordinateur seulement) */
  content:""; position:absolute; inset:-1px; z-index:-1;
  background:var(--papier); opacity:var(--lit);
  box-shadow:0 0 70px 10px rgba(246,220,150,calc(var(--lit) * .35));
}
.panel, .panel *{ transition:color .35s ease, border-color .35s ease; }
.panel .mono{ color:var(--brume); }
.panel h2{
  margin:.5rem 0 .8rem;
  font-family:var(--f-display); font-weight:400; font-size:clamp(1.7rem,3vw,2.5rem); line-height:1.08;
  text-wrap:balance; color:var(--ecume);
}
.panel p{ margin:0 0 .8rem; max-width:44ch; color:var(--brume); }
.panel p:last-child{ margin-bottom:0; }

/* État éclairé */
.panel.on{ border-color:transparent; }
.panel.on h2, .panel.on h3, .panel.on .price{ color:var(--encre); }
.panel.on p, .panel.on li{ color:var(--encre-douce); }
.panel.on .mono, .panel.on .price .from{ color:var(--ocre); }

.mission{ max-width:35rem; }




/* 7. Forfaits -------------------------------------------------------------- */
.forfaits{ width:100%; max-width:58rem; }

/* Étiquettes « Forfaits », « Mission », « Présentation » à côté des panneaux, à la verticale.
   Elle s'allume en même temps que le panneau : --lit est aussi posé sur le bloc parent. */
.side-label{
  margin:0 clamp(14px,2vw,28px) 0 0; align-self:center;     /* centré sur la hauteur du panneau */
  writing-mode:vertical-rl; transform:rotate(180deg); text-align:center;
  font-family:var(--f-display); font-weight:400; font-size:clamp(2.4rem,4.6vw,4rem); line-height:1; letter-spacing:-.01em;
  color:var(--brume);
  color:color-mix(in oklab, var(--lumiere-vive) calc(var(--lit, 0) * 100%), var(--brume));
  text-shadow:0 0 calc(var(--lit, 0) * 28px) rgba(246,220,150,calc(var(--lit, 0) * .55));
}

.panel-head h2{ margin:0 0 1.4rem; }
.plans{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); border-top:1px solid var(--ligne); }
.plan{ min-width:0; padding:20px 22px 4px 0; }
.plan + .plan{ padding-left:22px; border-left:1px solid var(--ligne); }
.panel.on .plans, .panel.on .plan + .plan, .panel.on .fine{ border-color:rgba(11,22,49,.16); }

.plan h3{ margin:0; font:600 .95rem var(--f-body); color:var(--ecume); }
.panel .price{
  max-width:none; margin:.5rem 0 .9rem;
  font-family:var(--f-display); font-size:clamp(1.7rem,2.6vw,2.2rem); line-height:1.1;
  color:var(--ecume); font-variant-numeric:tabular-nums;
}
.price .from{
  display:block; margin-bottom:4px;
  font:500 .66rem var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--brume);
}
.panel .monthly{ margin:-.4rem 0 .9rem; font-size:.86rem; color:var(--brume); }
.monthly b{ font-weight:600; color:var(--ecume); }
.panel.on .monthly b{ color:var(--encre); }

.plan ul{ list-style:none; margin:0; padding:0; display:grid; gap:7px; }
.plan li{ position:relative; padding-left:16px; font-size:.92rem; line-height:1.45; color:var(--brume); }
.plan li::before{ content:""; position:absolute; left:0; top:.62em; width:6px; height:1px; background:currentColor; }
.plan li.lead{ padding-left:0; font-style:italic; }       /* « Tout l'Essentiel, et : » */
.plan li.lead::before{ display:none; }
.panel .fine{ max-width:none; margin-top:1.2rem; padding-top:14px; border-top:1px solid var(--ligne); font-size:.82rem; }


/* 8. Présentation ---------------------------------------------------------- */
.moi{
  display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(20px,3vw,40px); align-items:center;
  width:100%; max-width:46rem;
}
.portrait{ margin:0; aspect-ratio:4 / 5; max-width:100%; overflow:hidden; background:var(--maree); }
/* La photo est en noir et blanc assombri, puis en couleur quand le faisceau l'atteint */
.portrait img{ display:block; width:100%; height:100%; object-fit:cover; filter:grayscale(.75) brightness(.72); transition:filter .5s ease; }
.moi.on .portrait img{ filter:none; }
.moi-text{ min-width:0; }
.moi-link{
  display:inline-block; margin-top:.4rem; padding-bottom:2px;
  font-weight:600; color:var(--lumiere); text-decoration:none; border-bottom:1px solid currentColor;
}
.panel.on .moi-link{ color:var(--encre); }


/* 9. Engagements ----------------------------------------------------------- */
.pledges{ background:var(--nuit); border-block:1px solid var(--ligne); }
.pledges .inner{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(20px,4vw,56px); padding-block:clamp(40px,6vw,72px); }
.pledge h3{ margin:0 0 .35rem; display:flex; align-items:center; gap:12px; font-family:var(--f-display); font-weight:400; font-size:1.3rem; }
.pledge h3::before{ content:""; flex:none; width:7px; height:7px; border-radius:50%; background:var(--lumiere); box-shadow:0 0 10px 2px rgba(246,220,150,.45); }
.pledge p{ margin:0; color:var(--brume); font-size:.98rem; }


/* 10. Réalisations --------------------------------------------------------- */
.escales{ padding-block:clamp(72px,10vw,128px); }
.section-head{ display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:12px 32px; margin-bottom:clamp(32px,5vw,56px); }
.section-head h2{ margin:.4rem 0 0; font-family:var(--f-display); font-weight:400; font-size:clamp(2.2rem,5vw,3.6rem); line-height:1; }
.section-head .mono{ color:var(--lumiere); }
.section-head p{ margin:0; max-width:36ch; color:var(--brume); }

/* Grille décalée sur 12 colonnes : grand, petit, puis centré */
.works{ display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:clamp(28px,4vw,48px) clamp(16px,3vw,40px); }
.work{ margin:0; min-width:0; }
.work.w1{ grid-column:1 / 8; }
.work.w2{ grid-column:8 / 13; align-self:end; }
.work.w3{ grid-column:3 / 11; }

.work-link{ display:block; text-decoration:none; border-radius:10px; }
.frame{
  overflow:hidden; border-radius:10px; background:var(--maree);
  border:1px solid var(--ligne);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.7);
  transition:transform .35s ease, box-shadow .35s ease;
}
.work-link:hover .frame, .work-link:focus-visible .frame{
  transform:translateY(-4px);
  box-shadow:0 34px 70px -28px rgba(0,0,0,.75), 0 0 0 1px rgba(246,220,150,.35);
}
/* Barre de navigateur stylisée au-dessus de chaque capture */
.chrome{ display:flex; align-items:center; gap:6px; height:26px; padding:0 12px; background:var(--nuit); border-bottom:1px solid var(--ligne); }
.chrome i{ width:7px; height:7px; border-radius:50%; background:var(--ligne); }
.chrome span{ min-width:0; margin-left:10px; font-family:var(--f-mono); font-size:.68rem; color:var(--brume); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.shot{ display:block; width:100%; height:auto; aspect-ratio:16 / 10; object-fit:cover; object-position:top; }

.work figcaption{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px; margin-top:14px; }
.work figcaption strong{ font-family:var(--f-display); font-weight:400; font-size:1.35rem; }
.work figcaption span{ color:var(--brume); font-size:.95rem; }
.tag{ padding:2px 7px; border:1px solid rgba(246,220,150,.4); border-radius:999px; font-family:var(--f-mono); font-size:.65rem; letter-spacing:.12em; text-transform:uppercase; color:var(--lumiere); }


/* 11. Contact -------------------------------------------------------------- */
.contact{ background:var(--nuit); border-top:1px solid var(--ligne); }
.contact .inner{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(28px,5vw,72px); align-items:end;
  padding-block:clamp(64px,9vw,112px);
}
.contact h2{ margin:.4rem 0 1rem; font-family:var(--f-display); font-weight:400; font-size:clamp(2.2rem,5vw,3.6rem); line-height:1; }
.contact .mono{ color:var(--lumiere); }
.contact p{ margin:0; color:var(--brume); max-width:40ch; }

.mail{ min-width:0; padding-top:20px; border-top:1px solid var(--ligne); container-type:inline-size; }
/* L'adresse tient toujours sur une ligne : sa taille suit la largeur de la colonne (cqw) */
.mail .addr{
  display:block; font-family:var(--f-display); font-size:min(2.4rem, 5.3cqw); line-height:1.15;
  color:var(--ecume); text-decoration:none; white-space:nowrap; user-select:all;
}
.mail .addr:hover{ color:var(--lumiere); }
.mail .row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:18px; }

.btn{
  padding:11px 20px; border:1px solid var(--lumiere); border-radius:999px;
  font:500 .95rem var(--f-body); text-decoration:none; cursor:pointer;
  transition:background .2s, color .2s;
}
.btn-solid{ background:var(--lumiere); color:var(--abysse); }
.btn-solid:hover{ background:var(--lumiere-vive); }
.btn-ghost{ background:transparent; color:var(--lumiere); }
.btn-ghost:hover{ background:rgba(246,220,150,.1); }
.copied{ min-height:1.4em; margin-top:10px; font-size:.85rem; color:var(--brume); }

.contact .phone{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 16px; max-width:none; margin:14px 0 0; padding-top:16px; border-top:1px solid var(--ligne); }
.phone .mono{ color:var(--brume); }
.phone a{ font-family:var(--f-display); font-size:1.5rem; color:var(--ecume); text-decoration:none; font-variant-numeric:tabular-nums; }
.phone a:hover{ color:var(--lumiere); }


/* 12. Petits écrans -------------------------------------------------------- */
@media (max-width:760px){
  .nav ul{ gap:14px; }
  .nav ul li:nth-child(2){ display:none; }           /* « Mission » : on garde 3 liens */

  /* Phare plus petit; le contenu passe pleine largeur */
  .scene{ --tower-h:62vh; --tower-h:62svh; --tower-sink:10vh; --tower-sink:10svh; }
  .scene-flow{ padding-left:var(--gutter-l); }
  .flow-block{ padding-block:8vh; }
  .flow-name{ padding-block:calc(64px + env(safe-area-inset-top, 0px)) 0; }

  .wordmark .w-phare{ font-size:clamp(3.8rem, 22vw, 6rem); }
  .wordmark .w-studio{ letter-spacing:.45em; margin-bottom:.4rem; }
  .tagline{ margin-top:.6rem; font-size:.95rem; }
  .hint{ display:none; }

  /* Panneaux à droite du phare, sauf les forfaits qui prennent toute la largeur */
  /* Sur téléphone, le faisceau n'éclaire pas les panneaux : fond opaque, toujours lisible */
  .panel{
    width:calc(100% - var(--tower-w) * .62); min-width:min(240px, 100%);
    padding:16px 16px 18px;
    background:var(--nuit);
    -webkit-backdrop-filter:none; backdrop-filter:none;
  }
  .panel::before{ display:none; }
  .panel.forfaits{ width:100%; }
  .portrait img{ filter:none; }                     /* photo en couleur d'emblée */
  .panel h2{ font-size:1.3rem; margin:.35rem 0 .55rem; }
  .panel p{ font-size:.88rem; line-height:1.5; margin-bottom:.55rem; }

  /* Forfaits empilés et compacts */
  .forfaits .panel-head h2{ margin-bottom:.6rem; }
  .plans{ grid-template-columns:1fr; border-top:0; }
  .plan, .plan + .plan{ padding:11px 0 10px; border-left:0; border-top:1px solid var(--ligne); }
  .panel .price{ margin:.2rem 0 .45rem; font-size:1.4rem; }
  .price .from{ font-size:.6rem; margin-bottom:2px; }
  .panel .monthly{ margin:-.2rem 0 .5rem; font-size:.82rem; }
  .plan ul{ gap:3px; }
  .plan li{ font-size:.82rem; line-height:1.4; }
  .panel .fine{ margin-top:.6rem; padding-top:10px; }

  /* Sur téléphone, l'étiquette passe au-dessus du panneau, à l'horizontale, alignée sur lui */
  .flow-block.has-label{ flex-direction:column; align-items:flex-end; }
  .side-label{
    writing-mode:horizontal-tb; transform:none; align-self:auto; text-align:start;
    width:calc(100% - var(--tower-w) * .62); min-width:min(240px, 100%);
    margin:0 0 10px; font-size:2rem; color:var(--ecume); text-shadow:none;
  }
  #forfaits .side-label{ width:100%; }
  .moi{ grid-template-columns:1fr; }
  .portrait{ max-width:180px; }

  .pledges .inner{ grid-template-columns:1fr; }
  .works{ grid-template-columns:1fr; }
  .work.w1, .work.w2, .work.w3{ grid-column:1 / -1; }
  .contact .inner{ grid-template-columns:1fr; }
}
/* Téléphones très courts : on allège la mission */
@media (max-width:760px) and (max-height:640px){
  .mission p:last-of-type{ display:none; }
}


/* 13. Mouvement réduit ----------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .frame, .work-link:hover .frame, .work-link:focus-visible .frame{ transition:none; transform:none; }
  .panel, .panel *, .portrait img{ transition:none; }
}