/* Base commune à toutes les pages */
html,body{margin:0;background:var(--page-bg,#f3efe6);-webkit-font-smoothing:antialiased}
body{overflow-x:hidden}
a{color:inherit}
a:hover{color:#5b3fd6}
*{box-sizing:border-box}
/* Pas de flash gris au toucher (iOS/Android) ni de contour au clic ;
   le contour reste visible à la navigation clavier. */
*{-webkit-tap-highlight-color:transparent}
:focus:not(:focus-visible){outline:none}
:focus-visible{outline:2.5px solid #5b3fd6;outline-offset:3px}
.pm-shot>div{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.pm-shot:hover>div{transform:scale(1.04)}
/* Visionneuse : flèches sur les côtés (ordinateur), en bas autour du compteur (mobile). */
.pm-zoom{padding:68px 12px}
.pm-zoom-nav{padding:68px 80px}
.pm-zprev{left:16px;top:50%;translate:0 -50%}
.pm-znext{right:16px;top:50%;translate:0 -50%}
@media (max-width:640px){
  .pm-zoom-nav{padding:68px 12px 90px}
  .pm-zprev{top:auto;bottom:10px;left:calc(50% - 110px);translate:none}
  .pm-znext{top:auto;bottom:10px;right:calc(50% - 110px);translate:none}
}

/* Animations */
@keyframes mq{to{transform:translateX(-50%)}}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -8px}}
@keyframes heroIn{from{opacity:0;transform:translateY(60px) scale(.94)}to{opacity:1;transform:none}}
@keyframes cvHeroIn{from{opacity:0;transform:translateY(40px) rotate(-8deg)}to{opacity:1;transform:rotate(-3deg)}}
@keyframes wordIn{from{opacity:0;transform:translateY(40%)}to{opacity:1;transform:none}}
@keyframes wordInPx{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes ring{0%,100%{transform:rotate(0)}10%,30%{transform:rotate(-14deg)}20%,40%{transform:rotate(14deg)}50%{transform:rotate(0)}}
@keyframes blink{50%{opacity:.3}}
@keyframes navIn{from{clip-path:circle(0% at calc(100% - 40px) 36px)}to{clip-path:circle(150% at calc(100% - 40px) 36px)}}
@keyframes navLink{from{opacity:0;transform:translateY(30px) rotate(3deg)}to{opacity:1;transform:none}}
@keyframes pmFade{from{opacity:0}to{opacity:1}}
@keyframes pmPop{from{opacity:0;transform:scale(.86) rotate(-2deg)}to{opacity:1;transform:none}}
@keyframes pmUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes shake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
/* pour:start — généré par scripts/pour-keyframes.js, ne pas éditer à la main */
@keyframes pour{
  0%{clip-path:polygon(0 0,100% 0,100% -13%,93.75% -11.89%,87.5% -11.15%,81.25% -11.04%,75% -11.59%,68.75% -12.61%,62.5% -13.77%,56.25% -14.66%,50% -15%,43.75% -14.66%,37.5% -13.77%,31.25% -12.61%,25% -11.59%,18.75% -11.04%,12.5% -11.15%,6.25% -11.89%,0% -13%)}
  10%{clip-path:polygon(0 0,100% 0,100% -15.41%,93.75% -13.69%,87.5% -10.89%,81.25% -7.95%,75% -5.86%,68.75% -5.33%,62.5% -6.54%,56.25% -9.07%,50% -12.08%,43.75% -14.55%,37.5% -15.65%,31.25% -15%,25% -12.83%,18.75% -9.87%,12.5% -7.12%,6.25% -5.49%,0% -5.55%)}
  20%{clip-path:polygon(0 0,100% 0,100% -7.59%,93.75% -10.38%,87.5% -10.65%,81.25% -8.32%,75% -4.16%,68.75% 0.41%,62.5% 3.86%,56.25% 5.03%,50% 3.51%,43.75% -0.17%,37.5% -4.78%,31.25% -8.76%,25% -10.77%,18.75% -10.14%,12.5% -7.07%,6.25% -2.61%,0% 1.75%)}
  30%{clip-path:polygon(0 0,100% 0,100% 15.53%,93.75% 10.07%,87.5% 4.48%,81.25% 0.64%,75% -0.15%,68.75% 2.37%,62.5% 7.36%,56.25% 13.13%,50% 17.73%,43.75% 19.63%,37.5% 18.17%,31.25% 13.85%,25% 8.12%,18.75% 2.92%,12.5% 0%,6.25% 0.34%,0% 3.83%)}
  40%{clip-path:polygon(0 0,100% 0,100% 37.71%,93.75% 37.84%,87.5% 34.42%,81.25% 28.6%,75% 22.36%,68.75% 17.78%,62.5% 16.42%,56.25% 18.74%,50% 23.94%,43.75% 30.29%,37.5% 35.63%,31.25% 38.17%,25% 37.06%,18.75% 32.66%,12.5% 26.46%,6.25% 20.55%,0% 16.93%)}
  50%{clip-path:polygon(0 0,100% 0,100% 50%,93.75% 55.97%,87.5% 59.93%,81.25% 60.54%,75% 57.6%,68.75% 52.1%,62.5% 45.89%,56.25% 41.06%,50% 39.25%,43.75% 41.06%,37.5% 45.89%,31.25% 52.1%,25% 57.6%,18.75% 60.54%,12.5% 59.93%,6.25% 55.97%,0% 50%)}
  60%{clip-path:polygon(0 0,100% 0,100% 63.7%,93.75% 66.83%,87.5% 71.94%,81.25% 77.29%,75% 81.09%,68.75% 82.06%,62.5% 79.86%,56.25% 75.24%,50% 69.76%,43.75% 65.26%,37.5% 63.27%,31.25% 64.44%,25% 68.39%,18.75% 73.79%,12.5% 78.81%,6.25% 81.77%,0% 81.66%)}
  70%{clip-path:polygon(0 0,100% 0,100% 86.1%,93.75% 83.59%,87.5% 83.34%,81.25% 85.45%,75% 89.2%,68.75% 93.32%,62.5% 96.44%,56.25% 97.49%,50% 96.12%,43.75% 92.8%,37.5% 88.65%,31.25% 85.05%,25% 83.23%,18.75% 83.8%,12.5% 86.57%,6.25% 90.6%,0% 94.54%)}
  80%{clip-path:polygon(0 0,100% 0,100% 105.41%,93.75% 103.09%,87.5% 100.71%,81.25% 99.07%,75% 98.73%,68.75% 99.81%,62.5% 101.93%,56.25% 104.39%,50% 106.35%,43.75% 107.15%,37.5% 106.53%,31.25% 104.69%,25% 102.26%,18.75% 100.04%,12.5% 98.8%,6.25% 98.94%,0% 100.43%)}
  90%{clip-path:polygon(0 0,100% 0,100% 112.38%,93.75% 112.4%,87.5% 111.78%,81.25% 110.72%,75% 109.57%,68.75% 108.74%,62.5% 108.49%,56.25% 108.91%,50% 109.86%,43.75% 111.02%,37.5% 112%,31.25% 112.47%,25% 112.26%,18.75% 111.46%,12.5% 110.32%,6.25% 109.24%,0% 108.58%)}
  100%{clip-path:polygon(0 0,100% 0,100% 113%,93.75% 114.11%,87.5% 114.85%,81.25% 114.96%,75% 114.41%,68.75% 113.39%,62.5% 112.23%,56.25% 111.34%,50% 111%,43.75% 111.34%,37.5% 112.23%,31.25% 113.39%,25% 114.41%,18.75% 114.96%,12.5% 114.85%,6.25% 114.11%,0% 113%)}
}
/* pour:end */

/* LEMESLE : chaque lettre se remplit de peinture, de gauche à droite. */
/* Lettres dessinées en CSS (content) : le texte du H1 reste « Théo Lemesle » pour Google. */
.pour-l{position:relative;display:inline-block}
.pour-l::before{content:attr(data-l)}
.pour-l::after{content:attr(data-l);position:absolute;inset:0;color:#1d1638;animation:pour 1.6s linear both;animation-delay:calc(1.2s + var(--i) * .16s)}
/* Texte présent dans le HTML (moteurs, lecteurs d'écran) mais invisible. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Pied de page légal et pages Mentions légales / Confidentialité */
.legal-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;max-width:1180px;margin:0 auto;padding:18px 22px 22px;font:500 13px/1.4 'Figtree',sans-serif;color:#6b6488}
.legal-foot span:last-child{display:flex;gap:18px}
.legal-foot a{color:#6b6488}
.legal-page{max-width:760px;margin:0 auto;padding:clamp(120px,14vw,160px) 22px 60px;font-size:16px;line-height:1.6;color:#4a4368}
.legal-page h1{margin:0 0 6px;font:800 clamp(40px,7vw,72px)/.95 'Bricolage Grotesque',sans-serif;letter-spacing:-.04em;color:#1d1638}
.legal-page .legal-maj{margin:0 0 30px;font-size:14px;color:#6b6488}
.legal-page h2{margin:34px 0 8px;font:800 22px/1.2 'Bricolage Grotesque',sans-serif;color:#1d1638}
.legal-page p{margin:0 0 10px}
.legal-page ul{margin:0 0 10px;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.legal-page a{color:#5b3fd6}

/* États de survol (les styles de base sont en ligne, d'où les !important) */
.h-navlink:hover{background:#a8f0d2!important}
.h-palm:hover{transform:translate(-3px,-3px) rotate(-.6deg)!important;box-shadow:10px 10px 0 #5b3fd6!important}
.h-palm-big:hover{transform:translate(-4px,-4px)!important;box-shadow:12px 12px 0 #5b3fd6!important}
.h-card:hover{transform:rotate(0deg) scale(1.03)!important;box-shadow:6px 6px 0 #a8f0d2!important}
.h-xp:hover{padding-left:12px!important}
.h-cvxp:hover{transform:translateX(6px)!important;box-shadow:-6px 6px 0 #a8f0d2!important}
.h-form:hover{transform:rotate(0deg) scale(1.02)!important}
.h-skill:hover{transform:rotate(0deg) scale(1.12)!important}
.h-tel:hover{transform:rotate(-1.5deg) scale(1.02)!important;color:#a8f0d2!important}
.h-mail:hover{transform:rotate(1.5deg) scale(1.02)!important;color:#1d1638!important}
.h-send:hover{transform:translate(-2px,-2px)!important;box-shadow:6px 6px 0 #1d1638!important;color:#fff!important}

/* Hero de l'accueil sur mobile : THÉO sous la nav, photo qui le chevauche
   (comme sur ordinateur), étiquettes dans les marges, LEMESLE en plein. */
@media (max-width:640px){
  .hero{min-height:0!important;padding-top:calc(104px + 13vw)!important}
  .hero-first{top:104px!important}
  .hero-photo{width:min(86vw,380px)!important}
  .hero-last{bottom:3%!important}
  .hero-last .pour-l::after{text-shadow:2px 0 0 #fff,-2px 0 0 #fff,0 2px 0 #fff,0 -2px 0 #fff,2px 2px 0 #fff,-2px -2px 0 #fff,2px -2px 0 #fff,-2px 2px 0 #fff}
  .sticker-a{top:calc(104px + 21.6vw + 22px)!important;left:4%!important}
  .sticker-b{top:auto!important;bottom:40%!important;right:4%!important}
  .sticker-c{bottom:20%!important;left:4%!important}
}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.pour-l::after{clip-path:none!important}}

/* FAQ Prestations (contenu généré par scripts/seo.js) */
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';flex:none;width:34px;height:34px;border-radius:50%;background:#a8f0d2;border:1.5px solid #1d1638;display:grid;place-items:center;font:800 20px/1 'Bricolage Grotesque',sans-serif;transition:transform .3s cubic-bezier(.3,1.5,.5,1)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:focus-visible{outline:2px solid #5b3fd6;outline-offset:4px;border-radius:8px}