/*
Theme Name: Last Call CHR
Theme URI: https://lastcallchr.fr
Author: Audrey Ver Eecke
Description: Site vitrine Last Call CHR — consultante en développement commercial CHR.
Version: 1.1
Requires at least: 6.0
Requires PHP: 7.4
License: Tous droits réservés
Text Domain: lastcall-chr
*/

body{margin:0;font-family:'Archivo',Helvetica,sans-serif;background:#FFFFFF;color:#16030A}
a{color:#16030A}a:hover{color:#C3103F}
.ol{color:transparent;-webkit-text-stroke:3px #16030A}
.oll{color:transparent;-webkit-text-stroke:3px #F7E6E4}
.olk{color:transparent;-webkit-text-stroke:3px #16030A}
.x{font-weight:900;font-stretch:62%;text-transform:uppercase;line-height:0.84;letter-spacing:-1px}
.w{font-weight:900;font-stretch:125%;text-transform:uppercase}
.m{font-family:'JetBrains Mono',monospace;font-weight:700;letter-spacing:1px;text-transform:uppercase}

@font-face{font-family:'Archivo';src:url('fonts/archivo.woff2') format('woff2');font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('fonts/jetbrains-mono.woff2') format('woff2');font-weight:100 900;font-display:swap}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.page{width:100%;max-width:1440px;margin:0 auto;display:flex;flex-direction:column;background:#FFFFFF;color:#16030A;overflow:hidden}
img{max-width:100%;display:block}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #C3103F;outline-offset:3px}
input,textarea{max-width:100%}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.site-header{position:sticky;top:0;z-index:10;background:#FFFFFF}
.err-row>p{flex:1;min-width:0}
@media (max-width:1300px){
  .err-row>div.m{width:clamp(96px,12%,180px)!important;flex-shrink:0}
  .err-row>h3{width:44%!important;flex-shrink:0}
}
@media (max-width:1100px) and (min-width:761px){
  section div.err-row[style*="display: flex"][style*="gap"][style*="border-bottom"]:not(.band){flex-direction:row!important;align-items:center!important;gap:28px!important}
  section div.err-row[style*="display: flex"] > h3[style*="flex-shrink: 0"]{width:44%!important}
  section div.err-row[style*="display: flex"] > div.m[style*="flex-shrink: 0"]{width:96px!important}
}
.legal{max-width:760px;margin:0 auto;padding:64px 20px 96px;font-size:17px;line-height:1.6;color:#16030A}
.legal h1{font-weight:900;font-stretch:62%;text-transform:uppercase;line-height:.9;font-size:clamp(48px,8vw,96px);margin:0 0 32px}
.legal h2{font-weight:900;font-stretch:125%;text-transform:uppercase;font-size:20px;margin:40px 0 8px}
.legal .back{display:inline-block;margin-bottom:40px;font-family:'JetBrains Mono',monospace;font-weight:700;text-transform:uppercase;font-size:14px}
.legal .todo{background:#F7E6E4;padding:0 4px}

/* ---------- Section parcours : photo à gauche, texte à droite ; empilé seulement sur petit écran ---------- */
section#apropos{align-items:flex-start!important}
section#apropos .photo-wrap{margin-top:8px}
@media (max-width:1300px) and (min-width:901px){
  html body section#apropos{flex-direction:row!important;align-items:flex-start!important;gap:48px!important}
  html body section#apropos .photo-wrap{width:44%!important;height:auto!important;padding:0 20px 20px 0;flex-shrink:0}
  html body section#apropos .photo{position:relative!important;width:100%!important;height:auto!important;aspect-ratio:600/465}
  html body section#apropos .photo-shadow{width:auto!important;height:auto!important;inset:20px 0 0 20px}
  html body section#apropos h2 .x{font-size:clamp(44px,5vw,150px)!important}
  html body section#apropos > div:not(.photo-wrap){min-width:0}
}
@media (max-width:900px){
  section#apropos{flex-direction:column!important;align-items:stretch!important;gap:48px!important}
}

/* ---------- Grands écrans : fonds et bandeaux sur toute la largeur ---------- */
.band{left:-130px!important;width:calc(100% + 260px)!important}
@media (min-width:1441px){
  .page{max-width:none}
  section,header,footer{padding-left:calc((100% - 1312px) / 2)!important;padding-right:calc((100% - 1312px) / 2)!important}
}
@media (min-width:1800px){
  .band-1{transform:rotate(-2.5deg)!important}
  .band-2{transform:rotate(2deg)!important}
}

/* ---------- Tablette ---------- */
@media (max-width:1100px){
  section,header,footer{padding-left:32px!important;padding-right:32px!important}
  [style*="repeat(5"]{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  [style*="repeat(4"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  [style*="repeat(3"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .site-nav a:not(:last-child){display:none}
  [style*="repeat(5"]>:nth-child(5){grid-column:span 2}
  [style*="repeat(3"]>:last-child:nth-child(odd){grid-column:span 2}
  section [style*="display: flex"]:not([style*="flex-direction: column"]):not(.band):not([role="img"]){flex-direction:column!important;align-items:stretch!important;gap:20px!important}
  section#apropos,section#faq{flex-direction:column!important;align-items:stretch!important}
  [style*="flex-shrink: 0"]:not(input){width:auto!important;max-width:100%!important}
  section#apropos .photo-wrap{width:min(100%,640px)!important;height:auto!important;padding:0 20px 20px 0}
  section#apropos .photo{position:relative!important;width:100%!important;height:auto!important;aspect-ratio:600/465}
  section#apropos .photo-shadow{width:auto!important;height:auto!important;inset:20px 0 0 20px}
  .band{font-size:30px!important;left:-130px!important;width:calc(100% + 260px)!important}
  .bands{height:320px!important}
  .band-1{top:50px!important}
  .band-2{top:190px!important}
}

/* ---------- Mobile ---------- */
@media (max-width:760px){
  section,header,footer{padding-left:20px!important;padding-right:20px!important}
  section{padding-top:64px!important;padding-bottom:64px!important;gap:32px!important}
  section[aria-label="Le terrain en chiffres"]{padding-bottom:0!important}
  [style*="grid-template-columns"]{grid-template-columns:1fr!important}
  [style*="repeat(5"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  [style*="repeat(5"]>:nth-child(5){grid-column:span 2}
  [style*="repeat(3"]>:last-child:nth-child(odd){grid-column:auto}

  .site-header{padding-top:16px!important;padding-bottom:16px!important}
  .site-nav{gap:0!important}
  .site-nav a:last-child{padding:12px 14px!important;font-size:12px}
  .bands{height:200px!important}
  .band{font-size:17px!important;font-stretch:90%!important;gap:12px!important;padding:12px 20px!important;left:-60px!important;width:calc(100% + 120px)!important}
  .band-1{top:30px!important}
  .band-2{top:112px!important}
  .wordmark{font-size:17vw!important;margin-bottom:-6px!important}
  .ol,.olk,.oll{-webkit-text-stroke-width:2px}
  a.m,button.m{text-align:center}
}