/* ============================================================
   SeLoger — One-Pager Summer 26
   Styles globaux (le reste de la mise en forme est en inline,
   par élément, directement dans index.html).
   ============================================================ */

/* --- Police de marque : Cera SL --- */
@font-face{font-family:'Cera SL';src:url('fonts/CeraSL-Light.ttf') format('truetype');font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:'Cera SL';src:url('fonts/CeraSL-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Cera SL';src:url('fonts/CeraSL-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Cera SL';src:url('fonts/CeraSL-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Cera SL';src:url('fonts/CeraSL-Black.ttf') format('truetype');font-weight:900;font-style:normal;font-display:swap;}

/* --- Tokens de marque --- */
:root{
  --sl-red:#E30513;
  --sl-black:#000;
  --sl-white:#fff;
  --sl-bg:#F3F3F3;
  --sl-muted:#9A9A9A;
  --sl-font:'Cera SL',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

/* --- Reset minimal --- */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{background:var(--sl-bg);}

/* --- Empilement des blocs « tip » sur petit écran --- */
@media (max-width:640px){
  .sl-row-12,.sl-row-14{gap:0 !important;}
  .sl-row-12>*,.sl-row-14>*{flex:1 1 100% !important;}
  .sl-row-12>:first-child{border-radius:12px 12px 0 0 !important;}
  .sl-row-12>:last-child{border-radius:0 0 12px 12px !important;}
  .sl-tip-red{order:0 !important;border-radius:14px 14px 0 0 !important;}
  .sl-tip-white{order:1 !important;border-radius:0 0 14px 14px !important;}
}

/* --- Repositionnement du visuel quand le HEADER lui-même est étroit (mobile) --- */
@container (max-width:430px){
  .sl-hero-phonebox{ top:0 !important; }
  .sl-hero-phone{
    width:154px !important;
    right:-8px !important;
    top:62% !important;
    transform:translateY(-50%) rotate(9deg) !important;
    transform-origin:center !important;
  }
  .sl-hero-kicker{ white-space:nowrap !important; font-size:16px !important; }
}