/* ==========================================================================
   olivierbarontini.fr — feuille de style unique
   Sommaire
     1. Police (Anybody, hébergée avec le site, aucune requête externe)
     2. Styles du site (trame, hero, sections, pages projet, formulaire, pied)
     3. Ajouts v10 : liens légaux, en-tête (logo sous « Contact »), navigation
        contextuelle, pages Merci et 404
   ========================================================================== */

/* ---------- 1. Police ---------- */
/* Anybody (SIL Open Font License), sous-ensemble latin, hébergée dans la page : aucune requête vers Google */
@font-face{font-family:'Anybody';font-style:normal;font-weight:100 900;font-stretch:50% 150%;font-display:swap;src:url('/assets/fonts/anybody-latin.woff2') format('woff2')}

/* ---------- 2. Styles du site ---------- */
/* ==========================================================================
   SUR MESURE — v7
   Trois couleurs (papier, encre, bleu de tracé), une police variable,
   une trame de 12 colonnes. Une cote bleue mesure toujours quelque chose
   de réel. Les éléments secondaires (menu, pause, drapeau) sont à peine
   suggérés : flous et gris, ils se précisent quand on s'en approche.
   ========================================================================== */
:root{
  --paper:#F3F3F0; --ink:#000000; --blue:#1F3BFF; --muted:#5E5E5A; --soft:#8A8A85;
  --grid:rgba(0,0,0,.06); --line:rgba(0,0,0,.16); --field:rgba(0,0,0,.035);
  --gut:clamp(20px,4vw,56px); --measure:62ch;
  --ease:cubic-bezier(.22,.61,.36,1);
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --paper:#000000; --ink:#F3F3F0; --blue:#8494FF; --muted:#A3A39E; --soft:#76766F; --grid:rgba(255,255,255,.08); --line:rgba(255,255,255,.2); --field:rgba(255,255,255,.05); }
}
:root[data-theme="dark"]{ --paper:#000000; --ink:#F3F3F0; --blue:#8494FF; --muted:#A3A39E; --soft:#76766F; --grid:rgba(255,255,255,.08); --line:rgba(255,255,255,.2); --field:rgba(255,255,255,.05); }
html{scroll-padding-top:calc(96px + env(safe-area-inset-top,0px));-webkit-text-size-adjust:100%}
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:'Anybody','Helvetica Neue',Helvetica,sans-serif;font-variation-settings:"wdth" 100,"wght" 400;
  font-size:clamp(16px,1.05vw,18px);line-height:1.6;-webkit-font-smoothing:antialiased;
}
:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
a{color:inherit}
img{max-width:100%;display:block;height:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:var(--gut);top:-100px;z-index:50;background:var(--ink);color:var(--paper);padding:10px 14px;text-decoration:none}
.skip:focus{top:calc(12px + env(safe-area-inset-top,0px))}
.wrap{padding-inline:var(--gut)}

/* Trame fixe derrière toute la page */
.grid{
  position:fixed;top:0;bottom:0;left:var(--gut);right:var(--gut);z-index:0;pointer-events:none;
  border-right:1px solid var(--grid);
  background-image:linear-gradient(to right,var(--grid) 1px,transparent 1px);background-size:calc(100% / 12) 100%;
  opacity:0;transition:opacity 1.4s ease;
}
.grid.on{opacity:1}
main,footer,header{position:relative;z-index:1}

/* Zones à peine suggérées : floues et grises jusqu'à l'approche */
.veil{filter:blur(2.4px);opacity:.42;transition:filter .7s var(--ease),opacity .7s var(--ease)}
.veil:hover,.veil:focus-within,.veil.open{filter:none;opacity:1}
@media (hover:none){.veil{filter:none;opacity:.75}}

.late{opacity:0;transition:opacity 1s ease,transform 1s ease}
.late.on{opacity:1}

/* ---------- En-tête ---------- */
header.top{
  position:fixed;left:0;right:0;top:0;z-index:20;
  padding:calc(18px + env(safe-area-inset-top,0px)) var(--gut) 14px;
  display:flex;justify-content:flex-end;align-items:center;gap:clamp(20px,3vw,44px);
  background:color-mix(in srgb,var(--paper) 86%,transparent);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.contact-btn{
  display:inline-flex;align-items:center;min-height:48px;padding:0;border:0;background:transparent;cursor:pointer;
  color:var(--soft);font:inherit;font-size:14px;text-decoration:none;transition:color .5s ease;
}
.contact-btn:hover,.contact-btn:focus-visible{color:var(--ink)}
.lock{display:flex;align-items:flex-start;color:var(--ink)}
.markwrap{position:relative;width:44px;height:40px;isolation:isolate}
.mark{position:relative;z-index:1;display:block;width:44px;height:40px}
.omark{display:block;width:44px;height:40px;overflow:visible}
.omark .top{transition:transform 1s var(--ease)}
.contact-btn:hover .omark .top,.contact-btn:focus-visible .omark .top{transform:translateX(22px)}
.lk{display:flex;flex-direction:column;padding-top:15px}
.lk-line{height:1px;width:100%;background:var(--ink);transition:background-color .6s ease}
.lk-word{padding:5px 0 0 9px;font-size:14px;line-height:1;font-variation-settings:"wdth" 100,"wght" 440;letter-spacing:.01em}
.contact-btn:hover .lk-line,.contact-btn:focus-visible .lk-line{background:var(--blue)}
.clbl{margin-right:18px}
.glow{position:absolute;inset:4px 6px;z-index:0;background:var(--blue);filter:blur(10px);border-radius:50%;opacity:0;pointer-events:none}
.beat .mark{animation:beat 4s cubic-bezier(.45,0,.25,1) infinite}
.beat .glow.g1{animation:glow 4s var(--ease) infinite}
.beat .glow.g2{animation:glow2 4s var(--ease) infinite}
.contact-btn:hover .beat *,.contact-btn:focus-visible .beat *{animation-play-state:paused}
@keyframes beat{0%,34%,100%{transform:scale(1)}7%{transform:scale(1.06)}15%{transform:scale(1)}22%{transform:scale(1.035)}}
@keyframes glow{0%{opacity:0;transform:scale(.9)}9%{opacity:.45;transform:scale(1.15)}55%,100%{opacity:0;transform:scale(2.2)}}
@keyframes glow2{0%,18%{opacity:0;transform:scale(.9)}25%{opacity:.26;transform:scale(1.1)}70%,100%{opacity:0;transform:scale(2.5)}}
.still .beat .mark,.still .beat .glow{animation:none}

nav.main{display:flex;align-items:center;gap:clamp(16px,2.2vw,30px)}
nav.main a{color:var(--ink);text-decoration:none;font-size:14px;min-height:44px;display:inline-flex;align-items:center;gap:6px}
nav.main a:hover{color:var(--blue)}
nav.main .sep{width:1px;height:16px;background:var(--line)}
nav.main .icon{width:40px;justify-content:center}
.menu-btn{display:none;min-height:44px;padding:0 4px;border:0;background:transparent;color:var(--muted);font:inherit;font-size:14px;cursor:pointer}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100vh;min-height:100dvh;display:grid;grid-template-rows:1fr auto;padding-top:96px}
.stage{position:relative;align-self:center;width:100%}
.axis{display:flex;justify-content:flex-end;align-items:center;margin-bottom:8px;min-height:44px}
.toggle{
  display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 2px;border:0;background:transparent;cursor:pointer;
  color:var(--muted);font:inherit;font-size:13px;font-variation-settings:"wdth" 90,"wght" 460;
}
.toggle .box{width:28px;height:28px;border:1px solid currentColor;display:grid;place-items:center}
.dim{position:relative;height:32px;margin-bottom:24px;color:var(--blue);width:0}
.dim::before{content:"";position:absolute;left:0;right:0;top:15px;height:1px;background:var(--blue)}
.dim .t{position:absolute;top:8px;width:1px;height:15px;background:var(--blue)}
.dim .t.l{left:0}.dim .t.r{right:0}
.dim .v{position:absolute;left:50%;top:4px;transform:translateX(-50%);background:var(--paper);padding:0 12px;font-size:13px;line-height:22px;font-variant-numeric:tabular-nums;font-variation-settings:"wdth" 85,"wght" 500;white-space:nowrap}
.titlebox{position:relative;display:flex;align-items:flex-end}
.hero h1{margin:0;font-weight:normal;position:relative;z-index:1}
.line{display:flex;justify-content:space-between;line-height:.84;white-space:nowrap}
.line span{flex:0 0 auto;display:block}
.device{position:absolute;left:-14px;bottom:-14px;border:1px solid var(--blue);pointer-events:none;transition:border-radius .5s ease,opacity .8s ease;opacity:0}
.device.on{opacity:1}
.probe{position:absolute;top:0;bottom:0;width:1px;background:var(--blue);pointer-events:none;opacity:0;transition:opacity .3s;left:0;z-index:2}
.probe.on{opacity:1}
.probe .pl{position:absolute;top:0;left:0;transform:translate(-50%,-110%);background:var(--paper);color:var(--blue);padding:0 8px;font-size:12px;line-height:20px;font-variant-numeric:tabular-nums;font-variation-settings:"wdth" 85,"wght" 500;white-space:nowrap}
.sub{margin:clamp(40px,7.5vh,80px) 0 0;max-width:31ch;font-size:clamp(22px,2.2vw,32px);line-height:1.24;font-variation-settings:"wdth" 92,"wght" 400;transform:translateY(10px)}
.sub.on{transform:none}
.hero-foot{padding-bottom:calc(26px + env(safe-area-inset-bottom,0px))}
.next{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--soft);text-decoration:none;font-size:14px;transition:color .4s}
.next:hover{color:var(--blue)}
.next svg{transition:transform .4s var(--ease)}.next:hover svg{transform:translateY(3px)}

/* ---------- Sections ---------- */
.sec{padding-block:clamp(110px,18vh,220px) 0}
.sec-head{display:grid;gap:18px;margin-bottom:clamp(40px,7vh,80px)}
.label{margin:0;font-size:14px;color:var(--soft);display:flex;align-items:center;gap:12px}
.label::before{content:"";width:18px;height:1px;background:var(--blue)}
.sec h2{margin:0;font-weight:normal;font-size:clamp(34px,4.4vw,64px);line-height:1.02;letter-spacing:-.01em;font-variation-settings:"wdth" 76,"wght" 560;max-width:16ch}
.lead{margin:0;max-width:48ch;color:var(--muted);font-size:clamp(17px,1.25vw,20px)}
/* Cote de section : mesure la largeur réelle de la colonne de contenu */
.scote{position:relative;height:28px;color:var(--blue);margin-bottom:clamp(28px,4vh,44px);transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--ease)}
.scote.on{transform:none}
.scote::before{content:"";position:absolute;left:0;right:0;top:13px;height:1px;background:var(--blue)}
.scote .t{position:absolute;top:6px;width:1px;height:15px;background:var(--blue)}
.scote .t.l{left:0}.scote .t.r{right:0}
.scote .v{position:absolute;left:50%;top:2px;transform:translateX(-50%);background:var(--paper);padding:0 10px;font-size:12px;line-height:22px;font-variant-numeric:tabular-nums;font-variation-settings:"wdth" 85,"wght" 500;white-space:nowrap}
@media (min-width:900px){
  .cols{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:0}
  .cols > .sec-head{grid-column:1 / span 4;padding-right:32px;align-content:start;position:sticky;top:120px;align-self:start}
  .cols > .body{grid-column:6 / -1}
}

/* En-tête large (Réalisations, Méthode) : titre à gauche, introduction alignée en bas à droite */
@media (min-width:900px){
  .sec-head.wide{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:0;align-items:end}
  .sec-head.wide .label{grid-column:1 / -1}
  .sec-head.wide h2{grid-column:1 / span 6;max-width:18ch}
  .sec-head.wide .lead{grid-column:8 / -1}
}
/* Services */
.offer{margin:0;padding:0;list-style:none}
.offer li{display:grid;gap:8px;padding-block:clamp(22px,3.4vh,34px);border-top:1px solid var(--line)}
.offer li:last-child{border-bottom:1px solid var(--line)}
.offer h3,.facts dt,.steps h3,.proof h3{font-weight:normal;margin:0}
.offer h3{font-size:clamp(20px,1.7vw,26px);line-height:1.2;font-variation-settings:"wdth" 92,"wght" 520}
.offer p{margin:0;color:var(--muted);max-width:52ch}
@media (min-width:1200px){.offer li{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:32px;align-items:baseline}}

.closing{margin:clamp(36px,6vh,64px) 0 0;max-width:32ch;font-size:clamp(20px,1.7vw,26px);line-height:1.3;font-variation-settings:"wdth" 92,"wght" 440}

/* Réalisations */
.proof{display:grid;gap:clamp(28px,4vw,56px);padding-block:clamp(56px,9vh,110px);border-top:1px solid var(--line)}
.proof:first-of-type{border-top:0;padding-top:0}
.proof-meta{margin:0 0 14px;font-size:14px;color:var(--soft)}
.proof h3{font-size:clamp(28px,3.1vw,46px);line-height:1.04;font-variation-settings:"wdth" 80,"wght" 540;max-width:15ch;margin-bottom:28px}
.facts{margin:0;display:grid}
.facts > div{display:grid;gap:4px;padding-block:14px;border-top:1px solid var(--line)}
.facts dt{font-size:14px;color:var(--soft)}
.facts dd{margin:0;max-width:46ch}
@media (min-width:1200px){.facts > div{grid-template-columns:9.5rem minmax(0,1fr);column-gap:20px}}
.links{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:26px}
.links a{display:inline-flex;align-items:center;gap:8px;min-height:44px;text-decoration:none;border-bottom:1px solid var(--line);font-size:15px;transition:color .4s,border-color .4s}
.links a:hover{color:var(--blue);border-color:var(--blue)}
.shot{margin:0;border:1px solid var(--line);overflow:hidden;background:var(--field)}
.shot img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;filter:grayscale(1) contrast(1.02);opacity:.9;transition:filter 1s var(--ease),opacity 1s var(--ease),transform 1.4s var(--ease)}
.proof:hover .shot img,.proof:focus-within .shot img{filter:none;opacity:1;transform:scale(1.015)}
.shot figcaption{padding:10px 14px;font-size:13px;color:var(--soft);border-top:1px solid var(--line)}
@media (min-width:900px){
  .proof{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:0;align-items:center}
  .proof .ptext{grid-column:1 / span 5;padding-right:24px}
  .proof .shot{grid-column:7 / -1}
  .proof.mirror .ptext{grid-column:8 / -1;padding:0 0 0 24px;order:2}
  .proof.mirror .shot{grid-column:1 / span 6;order:1}
}

/* Méthode */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:36px;counter-reset:s}
.steps li{position:relative;padding-top:26px}
.steps li::before{counter-increment:s;content:counter(s);position:absolute;top:0;left:0;font-size:13px;color:var(--blue);font-variant-numeric:tabular-nums;font-variation-settings:"wdth" 85,"wght" 500}
.steps h3{font-size:clamp(20px,1.6vw,24px);font-variation-settings:"wdth" 92,"wght" 520;margin-bottom:8px}
.steps p{margin:0;color:var(--muted)}
.ticks{position:relative;height:28px;margin-bottom:10px;color:var(--blue);display:none}
.ticks::before{content:"";position:absolute;left:0;right:0;top:13px;height:1px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform 1.6s var(--ease)}
.ticks.on::before{transform:none}
.ticks i{position:absolute;top:6px;width:1px;height:15px;background:var(--blue);opacity:0;transition:opacity .6s ease}
.ticks.on i{opacity:1}
@media (min-width:900px){
  .steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
  .steps li{padding-right:28px}
  .ticks{display:block}
}

/* Parcours */
.journey p{margin:0 0 1.1em;max-width:var(--measure)}
.journey p:first-child{font-size:clamp(20px,1.7vw,26px);line-height:1.4;font-variation-settings:"wdth" 92,"wght" 420;color:var(--ink)}
.journey p{color:var(--muted)}

.toolbox{margin-top:clamp(28px,5vh,48px);max-width:var(--measure);border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:14px}
.tb-title{margin:0;padding:14px 0 10px;color:var(--soft)}
.toolbox dl{margin:0 0 16px;display:grid;gap:6px}
.toolbox dl > div{display:grid;grid-template-columns:8.5rem minmax(0,1fr);gap:12px}
.toolbox dt{color:var(--soft)}
.toolbox dd{margin:0;color:var(--muted)}
@media (max-width:480px){.toolbox dl > div{grid-template-columns:1fr;gap:0}.toolbox dl{gap:12px}}


/* À propos : la photo cède la place au texte pendant le défilement.
   Actif seulement sur grand écran et sans réduction des animations ;
   sinon, photo puis texte, simplement empilés. */
.about .toolbox{margin-top:clamp(20px,3vh,32px)}
.about-photo{margin:0 0 clamp(32px,5vh,48px);max-width:360px}
.xf .about-stage{height:230vh}
.xf .about-sticky{position:sticky;top:120px;height:calc(100vh - 170px);display:grid;align-items:center}
.xf .about-photo,.xf .about-text{grid-area:1 / 1;margin:0}
.xf .about-photo{justify-self:center;width:auto;max-width:none;pointer-events:none;will-change:clip-path,transform}
.xf .about-photo .ph,.xf .about-photo img{height:min(64vh,620px);width:auto;aspect-ratio:3 / 4}
.xf .about-photo figcaption{text-align:center}
.xf .about .toolbox .tb-title,.xf .about .toolbox dl > div{will-change:opacity,transform}
.xf .about-text .ln{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.xf .about-text .ln-in{display:block;will-change:transform,opacity}
/* La cote qui balaie la photo */
.scan{display:none}
.xf .scan{display:block;position:absolute;top:0;bottom:0;left:0;width:1px;background:var(--blue);opacity:0;pointer-events:none;z-index:3}
.xf .scan::before,.xf .scan::after{content:"";position:absolute;left:-7px;width:15px;height:1px;background:var(--blue)}
.xf .scan::before{top:0}.xf .scan::after{bottom:0}
.scan-v{position:absolute;top:0;left:0;transform:translate(-50%,-130%);background:var(--paper);color:var(--blue);padding:0 8px;font-size:12px;line-height:20px;font-variant-numeric:tabular-nums;font-variation-settings:"wdth" 85,"wght" 500;white-space:nowrap}
/* Mobile et tablette : la photo reste en place, le texte glisse par-dessus */
@media (max-width:899.98px){
  .about-stage{position:relative}
  .about-photo{position:sticky;top:92px;z-index:0;margin:0 auto 0 0}
  .about-photo{margin-bottom:28px}
  .about-text{position:relative;z-index:1;background:var(--paper);padding-top:28px;border-top:1px solid var(--line)}
}

/* Questions */
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:64px;padding-block:14px;font-size:clamp(17px,1.35vw,21px);font-variation-settings:"wdth" 94,"wght" 480}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--blue)}
.sign{flex:none;position:relative;width:14px;height:14px}
.sign::before,.sign::after{content:"";position:absolute;left:0;right:0;top:6.5px;height:1px;background:currentColor;transition:transform .5s var(--ease)}
.sign::after{transform:rotate(90deg)}
details[open] .sign::after{transform:rotate(0)}
.faq p{margin:0 0 22px;max-width:56ch;color:var(--muted)}

/* Contact */
.assure{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:8px;font-size:15px}
.assure li{display:flex;align-items:center;gap:12px}
.assure li::before{content:"";width:5px;height:5px;background:var(--blue)}
.mail{justify-self:start;display:inline-flex;margin-top:28px;min-height:44px;align-items:center;text-decoration:none;border-bottom:1px solid var(--line)}
.mail:hover{color:var(--blue);border-color:var(--blue)}
.form{display:grid;gap:clamp(30px,4.5vh,44px)}
.group{border:0;margin:0;padding:0;min-width:0;display:grid;gap:22px}
.group legend{padding:0;margin-bottom:6px;font-size:14px;color:var(--soft);float:left;width:100%}
.group legend + *{clear:both}
.field{display:grid;gap:6px;align-content:start}
.field > label,.flabel{font-size:14px;color:var(--muted)}
.field input,.field textarea{
  width:100%;padding:12px 0;border:0;border-radius:0;background:transparent;color:var(--ink);font:inherit;
  box-shadow:inset 0 -1px 0 var(--line);transition:box-shadow .4s var(--ease)
}
.field textarea{min-height:7.5em;resize:vertical;line-height:1.55;padding:12px;background:var(--field)}
.field input:hover,.field textarea:hover{box-shadow:inset 0 -1px 0 var(--muted)}
.field input:focus-visible,.field textarea:focus-visible{outline:none;box-shadow:inset 0 -2px 0 var(--blue)}
.field input:user-invalid,.field textarea:user-invalid{box-shadow:inset 0 -2px 0 #C0391B}
.field textarea::placeholder{color:var(--soft)}
.hint{margin:0;font-size:13px;color:var(--soft)}
.choices{display:flex;flex-wrap:wrap;gap:8px}
.choice input{position:absolute;opacity:0;width:1px;height:1px}
.choice span{display:inline-flex;align-items:center;min-height:42px;padding:0 16px;border:1px solid var(--line);font-size:14px;color:var(--muted);cursor:pointer;transition:border-color .3s,color .3s}
.choice span::before{content:"";width:0;height:6px;background:var(--blue);transition:width .3s var(--ease),margin .3s var(--ease)}
.choice span:hover{color:var(--ink);border-color:var(--muted)}
.choice input:checked + span{color:var(--ink);border-color:var(--ink)}
.choice input:checked + span::before{width:6px;margin-right:10px}
.choice input:focus-visible + span{outline:2px solid var(--blue);outline-offset:3px}
.row2{display:grid;gap:22px}
.row2{align-items:start}
@media (min-width:640px){.row2{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);column-gap:28px}}
.call[hidden]{display:none}
.send{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px}
.btn{display:inline-flex;align-items:center;gap:12px;min-height:54px;padding:0 26px;border:0;background:var(--ink);color:var(--paper);font:inherit;font-size:16px;cursor:pointer;transition:background-color .4s}
.btn:hover{background:var(--blue)}
.btn svg{transition:transform .4s var(--ease)}.btn:hover svg{transform:translateX(4px)}
.note{margin:0;font-size:13px;color:var(--soft);max-width:34ch}
.status{margin:0;font-size:14px;color:var(--blue);min-height:1.6em}
.trap{position:absolute;left:-9999px}

/* ---------- Fin de page : bloc inversé ----------
   Le contact et le pied de page forment un bloc en négatif, dans les deux
   thèmes. Il répond au hero : même cote, même titre ajusté à la largeur. */
.end,header.top.dark{--ink:#F3F3F0;--paper:#000000;--muted:#A3A39E;--soft:#8A8A85;--line:rgba(255,255,255,.2);--field:rgba(255,255,255,.06);--blue:#8494FF;--grid:rgba(255,255,255,.08)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .end,:root:not([data-theme="light"]) header.top.dark{--ink:#000000;--paper:#F3F3F0;--muted:#5E5E5A;--soft:#8A8A85;--line:rgba(0,0,0,.16);--field:rgba(0,0,0,.035);--blue:#1F3BFF;--grid:rgba(0,0,0,.06)}
}
header.top{transition:background-color .6s ease,color .6s ease}
.contact-btn{transition:color .5s ease,opacity .5s ease,visibility .5s}
header.top.dark .contact-btn{opacity:0;visibility:hidden;pointer-events:none}
.end{
  position:relative;z-index:1;margin-top:clamp(140px,22vh,260px);
  background-color:var(--paper);color:var(--ink);
  background-image:linear-gradient(to right,var(--grid) 1px,transparent 1px);
  background-size:calc((100% - 2 * var(--gut)) / 12) 100%;background-position:var(--gut) 0;background-repeat:repeat-x;
  padding-top:clamp(120px,18vh,200px)
}
.end-title{margin:0 0 clamp(56px,9vh,110px);font-weight:normal}
.end-title .fit{display:flex;justify-content:space-between;white-space:nowrap;line-height:.86}
.end-title .fit span{flex:0 0 auto;display:block}
.end .sec-head{position:static}
@media (min-width:900px){.end .cols > .sec-head{padding-right:40px}}

/* Panneau du formulaire : un cadre qui dit « ici, on écrit » */
.end{--panel:rgba(255,255,255,.055);--input:rgba(255,255,255,.07)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .end{--panel:rgba(0,0,0,.04);--input:#FFFFFF}}
.panel{background:color-mix(in srgb,var(--paper) 93%,var(--ink));border:1px solid var(--line);padding:clamp(22px,3.2vw,48px);gap:clamp(28px,4vh,40px)}
.panel-intro{margin:0;font-size:14px;color:var(--muted);max-width:52ch}
.group legend{display:flex;align-items:center;gap:12px;font-size:clamp(18px,1.4vw,21px);color:var(--ink);font-variation-settings:"wdth" 92,"wght" 520;margin-bottom:10px}
.num{display:inline-grid;place-items:center;width:28px;height:28px;border:1px solid var(--blue);color:var(--blue);font-size:13px;font-variant-numeric:tabular-nums;font-variation-settings:"wdth" 85,"wght" 500}
.group + .group{padding-top:clamp(26px,3.6vh,36px);border-top:1px solid var(--line)}
.panel .field input,.panel .field textarea{background:var(--input);padding:13px 14px;box-shadow:inset 0 -1px 0 var(--line)}
.panel .field input:focus-visible,.panel .field textarea:focus-visible{box-shadow:inset 0 -2px 0 var(--blue),0 0 0 1px var(--line)}
.hint-in{color:var(--soft);font-size:13px;margin-left:6px}
.err{margin:6px 0 0;font-size:13px;color:#FF8A70}
.choices{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:8px}
.choice span{width:100%;min-height:46px}
.callgrid{display:grid;gap:22px}
.callgrid .tel{max-width:320px}
.creneaux{grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr))}
.alt-mail{margin:32px 0 0;font-size:15px;color:var(--muted)}
.alt-mail .mail{margin-top:6px;color:var(--ink)}
@media (max-width:639.98px){
  .panel{margin-inline:calc(var(--gut) * -1);border-inline:0;padding:26px var(--gut)}
  .choices{grid-template-columns:1fr}
  .choices.creneaux{grid-template-columns:1fr 1fr}
  .btn{width:100%;justify-content:center}
}

/* ---------- Pages projet (ouvertes par #projet-elodie, #projet-st) ----------
   Une page entière par-dessus le site, avec sa propre adresse : le bouton
   Retour du navigateur la referme. Même trame, même cote, même typographie. */
.links a.read{color:var(--ink);border-color:var(--ink)}
.case{position:fixed;inset:0;z-index:30;overflow-y:auto;overscroll-behavior:contain;background-color:var(--paper);
  background-image:linear-gradient(to right,var(--grid) 1px,transparent 1px);background-size:calc((100% - 2 * var(--gut)) / 12) 100%;background-position:var(--gut) 0;background-attachment:local;
  opacity:0;visibility:hidden;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease),visibility .6s}
.case.open{opacity:1;visibility:visible;transform:none}
body.reading{overflow:hidden}
.case-bar{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:calc(18px + env(safe-area-inset-top,0px)) var(--gut) 14px;background:color-mix(in srgb,var(--paper) 88%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.crumb{margin:0;font-size:14px;color:var(--soft)}
.crumb a{text-decoration:none;color:var(--ink);display:inline-flex;align-items:center;gap:10px;min-height:44px}
.crumb a:hover{color:var(--blue)}
.crumb .here{margin-left:6px}
.case-in{padding:clamp(56px,10vh,110px) var(--gut) 0}
.case h1{margin:0 0 clamp(40px,7vh,72px);font-weight:normal;font-size:clamp(38px,5.4vw,84px);line-height:1;letter-spacing:-.01em;font-variation-settings:"wdth" 74,"wght" 580;max-width:15ch}
.sheet-facts{margin:0 0 clamp(48px,8vh,90px);display:grid;border-top:1px solid var(--line)}
.sheet-facts > div{display:grid;gap:2px;padding-block:12px;border-bottom:1px solid var(--line)}
.sheet-facts dt{font-size:13px;color:var(--soft)}
.sheet-facts dd{margin:0}
@media (min-width:700px){.sheet-facts{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:24px}.sheet-facts > div{border-bottom:0}}
.case .shot{margin-bottom:clamp(64px,10vh,120px)}
.case .shot img{filter:none;opacity:1}
.story > section{padding-block:clamp(36px,6vh,64px);border-top:1px solid var(--line)}
.story h2{margin:0 0 14px;font-weight:normal;font-size:clamp(22px,1.9vw,30px);line-height:1.15;font-variation-settings:"wdth" 88,"wght" 540}
.story p{margin:0 0 1em;max-width:var(--measure);color:var(--muted)}
.story p.big{font-size:clamp(20px,1.7vw,26px);line-height:1.4;color:var(--ink);font-variation-settings:"wdth" 92,"wght" 420}
.story .todo{color:var(--blue)}
@media (min-width:900px){.story > section{display:grid;grid-template-columns:repeat(12,minmax(0,1fr))}.story h2{grid-column:1 / span 4;padding-right:24px}.story .txt{grid-column:6 / -1}}
.case-next{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px;margin-top:clamp(40px,8vh,90px);padding-block:36px calc(40px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line)}
.case-next a{display:inline-flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;font-size:clamp(17px,1.4vw,21px)}
.case-next a:hover{color:var(--blue)}
.case-next .to{font-variation-settings:"wdth" 88,"wght" 520}
.case-next small{display:block;font-size:13px;color:var(--soft)}
@media (prefers-reduced-motion: reduce){.case{transition:none}}
.case h1:focus{outline:none}
.case .label{margin:0 0 18px}
@media (max-width:640px){.case-bar > a.crumb{display:none}}

/* Portrait (Parcours) */
.portrait{margin:28px 0 0;max-width:260px}
.portrait .ph{aspect-ratio:3/4;border:1px solid var(--line);background:var(--field);display:grid;place-items:center;color:var(--soft);font-size:13px;text-align:center;padding:16px}
.portrait img{width:100%;aspect-ratio:3/4;object-fit:cover;filter:grayscale(1);transition:filter 1s var(--ease)}
.portrait:hover img{filter:none}
.portrait figcaption{margin-top:10px;font-size:13px;color:var(--soft)}

/* Pied de page */
footer.foot{margin-top:clamp(110px,16vh,180px);padding-block:32px calc(28px + env(safe-area-inset-bottom,0px));background:linear-gradient(var(--line),var(--line)) no-repeat var(--gut) 0 / calc(100% - 2 * var(--gut)) 1px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 28px;font-size:14px;color:var(--soft)}
footer.foot nav{display:flex;flex-wrap:wrap;gap:4px 24px}
footer.foot a{text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
footer.foot a:hover{color:var(--ink)}
.where{position:relative;display:flex;align-items:center;gap:20px}
.flagbtn{width:44px;height:44px;border:0;background:transparent;cursor:pointer;display:grid;place-items:center;padding:0}
.flag{display:block;box-shadow:0 0 0 1px var(--line)}
.pop{
  position:absolute;right:0;bottom:calc(100% + 10px);width:max-content;max-width:min(360px,84vw);padding:16px 18px;
  background:var(--paper);box-shadow:0 0 0 1px var(--line);font-size:14px;line-height:1.5;color:var(--ink);
  opacity:0;transform:translateY(6px);pointer-events:none;transition:opacity .45s var(--ease),transform .45s var(--ease)
}
.pop.open{opacity:1;transform:none;pointer-events:auto}
.pop p{margin:0}.pop p + p{margin-top:4px;color:var(--muted)}
.pop::after{content:"";position:absolute;right:21px;bottom:-10px;width:1px;height:10px;background:var(--blue)}

/* Menu mobile */
.sheet{position:fixed;inset:0;z-index:40;background:var(--paper);padding:calc(18px + env(safe-area-inset-top,0px)) var(--gut) calc(28px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;opacity:0;pointer-events:none;transition:opacity .45s var(--ease)}
.sheet.open{opacity:1;pointer-events:auto}
.sheet-top{display:flex;justify-content:flex-end}
.sheet-close{min-width:44px;min-height:44px;border:0;background:transparent;color:var(--ink);cursor:pointer;display:grid;place-items:center}
.sheet ul{list-style:none;margin:auto 0;padding:0;display:grid;gap:6px}
.sheet ul a{display:block;text-decoration:none;font-size:clamp(34px,11vw,56px);line-height:1.1;font-variation-settings:"wdth" 70,"wght" 560}
.sheet .alt{display:flex;gap:24px;font-size:15px;color:var(--muted)}
.sheet .alt a{text-decoration:none;min-height:44px;display:inline-flex;align-items:center}

@media (max-width:760px){
  nav.main{display:none}
  .menu-btn{display:inline-flex;align-items:center}
  .clbl{display:none}
  .toggle .lbl{display:none}
}
@media (prefers-reduced-motion: reduce){
  .grid,.late,.device,.scote,.veil,.shot img,.ticks::before{transition:none}
  .beat .mark,.beat .glow{animation:none}
  .omark .top{transition:none}
  html{scroll-behavior:auto}
}

/* ---------- 3. Ajouts v10 ---------- */

/* Liens dans la note du formulaire et dans les pages légales */
.note a{color:inherit;text-decoration:underline;text-underline-offset:3px}.note a:hover{color:var(--blue)}.story .txt a{color:var(--ink);text-underline-offset:3px}.story .txt a:hover{color:var(--blue)}

/* En-tête, écran large : le logo se place sous le lien « Contact ».
   Le mot « Contact » reste aligné sur la ligne de navigation. */
@media (min-width:761px){
  header.top{align-items:flex-start}
  .contact-btn{flex-direction:column;align-items:flex-start;gap:0}
  .clbl{margin-right:0;min-height:44px;display:inline-flex;align-items:center}
  html{scroll-padding-top:calc(128px + env(safe-area-inset-top,0px))}
}

/* Navigation contextuelle : pas de lien vers la section où l'on se trouve déjà.
   .home est posé par le script tant que l'accueil occupe l'écran ;
   .dark est posé quand on arrive sur le bloc Contact. */
header.top.home nav.main a[href="#accueil"],
header.top.home ~ .sheet a[href="#accueil"],
header.top.dark ~ .sheet a[href="#contact"]{display:none}

/* Pages Merci et 404 */
.page-simple{min-height:100vh;min-height:100dvh;display:grid;align-content:center;gap:28px;padding:var(--gut)}
.page-simple h1{margin:0;font-weight:normal;font-size:clamp(40px,7vw,96px);line-height:1;font-variation-settings:"wdth" 74,"wght" 600;max-width:14ch}
.page-simple p{margin:0;max-width:var(--measure);color:var(--muted);font-size:clamp(17px,1.4vw,20px);line-height:1.5}
.page-simple a.back{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--ink);text-underline-offset:4px}
.page-simple a.back:hover{color:var(--blue)}

/* Pages légales : les précisions « Clients professionnels / particuliers »
   restent visibles malgré les réglages de la police variable. */
.story strong{font-weight:normal;font-variation-settings:"wdth" 100,"wght" 620;color:var(--ink)}

/* Bulle « Où je travaille » : alignée à gauche quand le drapeau est à gauche
   de l'écran (mobile). Classe posée par le script. */
.pop.from-left{right:auto;left:0}
.pop.from-left::after{right:auto;left:21px}

/* Filet de sécurité mobile, limité au contenu principal : un élément qui
   dépasserait est coupé au bord de l'écran sans décaler l'en-tête ni le menu.
   (v10.4 : retiré de html/body, qui perturbait l'animation du titre.) */
main#contenu{overflow-x:clip}

/* Bulle « Où je travaille » sur mobile : fixée dans l'écran, entre les marges,
   quelle que soit la place du drapeau dans le pied de page. */
@media (max-width:760px){
  .pop,.pop.from-left{position:fixed;left:var(--gut);right:var(--gut);bottom:calc(84px + env(safe-area-inset-bottom,0px));width:auto;max-width:none}
  .pop::after,.pop.from-left::after{display:none}
}