/* Base partagée — propriété de l'agent DA (hero). Reset, typo, .container, .btn, .todo.
   Les autres sections utilisent ces classes telles quelles. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}
img,svg,video,canvas,picture{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,h4,h5,h6{margin:0;font-family:var(--font-display);font-weight:500;line-height:1.05;letter-spacing:-.04em;color:var(--text)}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
::selection{background:var(--orange);color:#0a0a0a}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:6px}

.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}

/* ---------- Boutons partagés (reproduits d'agencee, animés) ----------
   Markup recommandé :
   <a class="btn btn-primary" href="/contact">
     <span class="btn-label">Réserver mon appel</span>
     <span class="btn-arrow" aria-hidden="true"><svg viewBox="0 0 256 256"><path d="M88 40l112 88-112 88z"/></svg></span>
   </a>
   Variantes : .btn-primary (orange, sur fond sombre) · .btn-dark (noir texte blanc, pour fonds ORANGE)
   · .btn-ghost (contour). Tailles : .btn-sm / défaut / .btn-lg. .btn-glow = halo plus fort.
   Tous les .btn : reflet qui balaie en boucle (~3,6 s) ; primary/dark : halo qui respire ;
   survol : soulèvement, halo renforcé, flèche qui glisse. Respecte prefers-reduced-motion. */
.btn{
  --btn-h:50px;
  --btn-shine:rgba(255,255,255,.55);
  --btn-halo:rgba(var(--orange-rgb),.9);
  position:relative;isolation:isolate;
  display:inline-flex;align-items:stretch;justify-content:center;
  min-height:var(--btn-h);
  border-radius:var(--radius-pill);
  font-family:var(--font-display);font-weight:400;font-size:12px;line-height:1;
  letter-spacing:-.1px;text-transform:uppercase;
  white-space:nowrap;cursor:pointer;
  border:1px solid transparent;
  transition:transform .4s var(--ease),background-color .3s var(--ease),color .3s var(--ease),box-shadow .4s var(--ease),border-color .3s var(--ease);
}
.btn-label,.btn-arrow{position:relative;z-index:1}
.btn-label{display:inline-flex;align-items:center;padding:0 30px}
/* reflet lumineux qui balaie le bouton en boucle */
.btn::after{
  content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,var(--btn-shine) 50%,transparent 62%) no-repeat;
  background-size:250% 100%;background-position:100% 0;
  animation:btn-shine 3.6s cubic-bezier(.4,0,.2,1) infinite;
}
.btn:nth-of-type(2n)::after{animation-delay:1.2s}
@keyframes btn-shine{0%{background-position:100% 0}32%,100%{background-position:0 0}}
.btn:hover::after{animation-duration:1.6s}
/* halo lumineux qui respire (couche floue derrière le bouton) */
.btn::before{
  content:"";position:absolute;inset:-3px;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(70% 140% at 50% 50%,var(--btn-halo),transparent 72%);
  filter:blur(16px);opacity:0;
  transition:opacity .45s var(--ease),transform .45s var(--ease);
}
.btn-primary::before,.btn-dark::before{animation:btn-breathe 3.2s ease-in-out infinite}
@keyframes btn-breathe{0%,100%{opacity:.3;transform:scale(.96)}50%{opacity:.7;transform:scale(1.1)}}
.btn-glow::before{animation-name:btn-breathe-strong}
@keyframes btn-breathe-strong{0%,100%{opacity:.55;transform:scale(1.02)}50%{opacity:1;transform:scale(1.2)}}
.btn:hover{transform:translateY(-3px)}
.btn:hover::before{opacity:1;animation:btn-halo 1.5s ease-in-out infinite}
@keyframes btn-halo{0%,100%{opacity:.8;transform:scale(1.08)}50%{opacity:1;transform:scale(1.25)}}
.btn:active{transform:translateY(-1px) scale(.98)}

.btn-primary{
  background:var(--orange);color:#0a0a0a;border-color:var(--orange);
  box-shadow:0 10px 30px -12px rgba(var(--orange-rgb),.6);
}
.btn-primary:hover{box-shadow:0 0 0 4px rgba(var(--orange-rgb),.16),0 18px 44px -12px rgba(var(--orange-rgb),.85)}

/* pour les fonds ORANGE : bouton noir, texte blanc, même reflet */
.btn-dark{
  --btn-shine:rgba(255,255,255,.22);
  --btn-halo:rgba(0,0,0,.75);
  background:#0a0a0a;color:#fff;border-color:#0a0a0a;
  box-shadow:0 12px 30px -12px rgba(0,0,0,.6);
}
.btn-dark:hover{background:#151515;box-shadow:0 0 0 4px rgba(0,0,0,.14),0 20px 44px -12px rgba(0,0,0,.75)}
.btn-dark .btn-arrow{color:var(--orange);border-left-color:var(--orange)}

.btn-ghost{--btn-shine:rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:var(--text);border-color:rgba(255,255,255,.15)}
.btn-ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3)}
.btn-ghost .btn-arrow{border-left-color:rgba(255,255,255,.2)}

/* zone flèche à droite (triangle ▶ d'agencee) ; au survol une barre la sépare du libellé et la flèche glisse */
.btn-arrow{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:50px;margin-left:-10px;
  border-left:0 solid #0a0a0a;
  transition:border-left-width .3s var(--ease);
}
.btn-arrow svg{width:16px;height:16px;fill:currentColor;transition:transform .4s var(--ease)}
.btn-primary .btn-arrow{color:#0d0d0d}
.btn:hover .btn-arrow{border-left-width:5px}
.btn:hover .btn-arrow svg{animation:btn-nudge .7s var(--ease) infinite alternate}
@keyframes btn-nudge{from{transform:translateX(0)}to{transform:translateX(4px)}}

.btn-sm{--btn-h:40px}
.btn-sm .btn-label{padding:0 20px}
.btn-sm .btn-arrow{width:42px}
.btn-lg{--btn-h:58px;font-size:13px}
.btn-lg .btn-label{padding:0 34px}
.btn-lg .btn-arrow{width:58px}

/* ---------- Emplacements à remplir par Emrick ---------- */
.todo{
  color:inherit;
  background:rgba(var(--orange-rgb),.14);
  border-bottom:1.5px dashed var(--orange);
  border-radius:3px;
  padding:0 .25em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}

.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ==========================================================================
   MODE CLAIR — base partagée. Le sombre n'est pas touché : tout est sous
   :root[data-theme="light"]. Fond crème avec matière (grain + lueurs chaudes).
   ========================================================================== */
:root[data-theme="light"] body{
  background-color:var(--bg);
  /* grain très léger : évite le crème « plat » */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35  0 0 0 0 .22  0 0 0 0 .08  0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
:root[data-theme="light"] ::selection{background:var(--orange);color:#0f0f0f}
:root[data-theme="light"] :focus-visible{outline-color:var(--orange-ink)}

/* Boutons */
:root[data-theme="light"] .btn-primary{box-shadow:0 10px 26px -12px rgba(217,96,0,.55)}
:root[data-theme="light"] .btn-primary:hover{box-shadow:0 0 0 4px rgba(var(--orange-rgb),.18),0 18px 40px -14px rgba(217,96,0,.6)}
:root[data-theme="light"] .btn-primary::before{--btn-halo:rgba(var(--orange-rgb),.75)}
:root[data-theme="light"] .btn-dark{box-shadow:0 12px 28px -14px rgba(15,15,15,.55)}
:root[data-theme="light"] .btn-dark:hover{box-shadow:0 0 0 4px rgba(15,15,15,.08),0 20px 40px -14px rgba(15,15,15,.55)}
:root[data-theme="light"] .btn-ghost{
  --btn-shine:rgba(255,255,255,.85);
  background:rgba(255,253,249,.7);color:var(--text);border-color:rgba(15,15,15,.16);
  box-shadow:0 6px 18px -12px rgba(90,52,14,.3);
}
:root[data-theme="light"] .btn-ghost:hover{background:#fff;border-color:rgba(15,15,15,.3)}
:root[data-theme="light"] .btn-ghost .btn-arrow{border-left-color:rgba(15,15,15,.18);color:var(--orange-ink)}

/* Emplacements à remplir */
:root[data-theme="light"] .todo{background:rgba(var(--orange-rgb),.18);border-bottom-color:var(--orange-ink)}

/* Bascule de thème : transition douce des couleurs, seulement pendant le changement
   (classe posée ~0,5 s par hero.js → rien n'anime au premier chargement). */
@media (prefers-reduced-motion:no-preference){
  html.pt-theme-anim,html.pt-theme-anim *,html.pt-theme-anim *::before,html.pt-theme-anim *::after{
    transition:background-color .4s ease,color .4s ease,border-color .4s ease,fill .4s ease,stroke .4s ease,box-shadow .4s ease,opacity .4s ease!important;
  }
}