/* ==========================================================================
   Site Web Création — Feuille de style MOBILE
   Surcouche responsive qui transforme la mise en page plein écran fixe
   (1100px, position:absolute, overflow:hidden) en une page qui scrolle
   normalement sur téléphone et tablette.

   À charger APRÈS style.css. Ne touche pas au desktop (tout est dans
   des media queries). Voir INSTALLATION-MOBILE.txt pour l'intégration.
   ========================================================================== */

/* Variables de marque reprises du thème existant */
:root{
  --swc-orange:#f96523;
  --swc-orange-2:#EC6021;
  --swc-dark:#251F24;
  --swc-panel:rgba(31,26,28,.92);
  --swc-bar:#1b1618;
  --swc-text:#d2d2d2;
  --swc-muted:#9a8e87;
}

/* Éléments injectés par mobile.js : masqués sur desktop */
#swc-mobilebar, #swc-overlay{display:none;}

/* --------------------------------------------------------------------------
   BREAKPOINT PRINCIPAL : tablette + téléphone (<= 900px)
   -------------------------------------------------------------------------- */
@media (max-width:900px){

  /* Libère le défilement vertical bloqué par le layout plein écran */
  html, body{
    overflow:auto !important;
    height:auto !important;
    position:static !important;
    background:var(--swc-dark) !important;
  }
  body{
    padding-top:54px !important;              /* place pour la barre fixe */
    -webkit-text-size-adjust:100%;
  }

  /* Conteneurs : on casse tous les position:absolute / hauteurs fixes */
  #container,
  #content-body,
  #content-texts,
  #content-texts .page-content,
  #area-logos,
  #area-texts,
  #area-texts .content{
    position:static !important;
    left:auto !important; right:auto !important;
    top:auto !important; bottom:auto !important;
    width:100% !important;
    height:auto !important;
    margin:0 !important;
    max-width:100% !important;
    overflow:visible !important;
    background-image:none !important;          /* enlève les séparateurs/filtres desktop */
  }

  /* ---- Barre supérieure fixe (logo texte + burger + appel) ------------- */
  #swc-mobilebar{
    position:fixed; top:0; left:0; right:0; height:54px; z-index:200;
    display:flex; align-items:center; gap:10px;
    padding:0 12px;
    background:var(--swc-bar);
    border-bottom:2px solid var(--swc-orange);
    box-shadow:0 2px 10px rgba(0,0,0,.4);
  }
  #swc-burger{
    width:42px; height:38px; border:0; background:transparent; cursor:pointer;
    display:flex; flex-direction:column; justify-content:center; gap:5px; padding:8px;
  }
  #swc-burger span{display:block; height:2px; background:#fff; border-radius:2px; transition:.25s;}
  body.swc-nav-open #swc-burger span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  body.swc-nav-open #swc-burger span:nth-child(2){opacity:0;}
  body.swc-nav-open #swc-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  #swc-bar-title{
    flex:1; color:#fff; font-family:'Open Sans',Arial,sans-serif; font-weight:300;
    font-size:15px; letter-spacing:.5px; white-space:nowrap;
  }
  #swc-bar-title b{color:var(--swc-orange); font-weight:600;}
  #swc-call{
    display:inline-flex; align-items:center; justify-content:center;
    width:40px; height:40px; border-radius:50%;
    background:var(--swc-orange); color:#fff; font-size:18px; text-decoration:none;
  }
  #swc-call:hover{background:var(--swc-orange-2);}

  /* ---- Hero : l'image de fond de la page devient une bannière ---------- */
  #background{
    position:relative !important;
    width:100% !important; height:190px !important;
    background-size:cover !important; background-position:center !important;
    overflow:hidden !important;
  }
  #background::after{                           /* voile dégradé pour la lisibilité */
    content:""; position:absolute; inset:0;
    background:linear-gradient(180deg,rgba(37,31,36,.15) 0%,rgba(37,31,36,.85) 100%);
  }
  #background .img-1x, #background .img-2x{display:none !important;}

  /* ---- Menu principal : panneau déroulant sous la barre --------------- */
  #menu-bottom{
    position:fixed !important; top:54px; left:0; right:0; bottom:auto !important;
    width:100% !important; height:auto !important; z-index:199;
    background:var(--swc-bar) !important;
    border-bottom:1px solid #000;
    box-shadow:0 8px 16px rgba(0,0,0,.45);
    max-height:0; overflow:hidden !important;
    transition:max-height .3s ease;
    text-align:left !important;
  }
  body.swc-nav-open #menu-bottom{max-height:80vh; overflow-y:auto !important;}
  #menu-bottom .menu{padding:6px 0;}
  #menu-bottom li{display:block !important;}
  #menu-bottom a{
    display:block !important; height:auto !important; margin:0 !important;
    padding:14px 20px !important; line-height:1.2 !important;
    color:#e9e2dd !important; text-transform:uppercase; font-size:14px;
    border-bottom:1px solid rgba(255,255,255,.06); background:none !important;
    overflow:visible !important;
  }
  #menu-bottom a span{
    display:inline !important; padding:0 !important; height:auto !important;
    background:none !important; white-space:normal !important;
  }
  #menu-bottom a .cl, #menu-bottom a .cr{display:none !important;}
  #menu-bottom a:hover, #menu-bottom a.active{color:var(--swc-orange) !important;}
  #fullscreen{display:none !important;}

  /* ---- Liens secondaires (sitemap, blog…) ----------------------------- */
  #menu-top{
    position:static !important; width:100% !important;
    text-align:center !important; font-size:12px !important;
    padding:14px 16px 4px !important; color:var(--swc-muted) !important;
    line-height:2;
  }
  #menu-top a{color:var(--swc-muted) !important;}

  /* ---- Boutons sociaux Facebook/Google posés en absolu : on masque ---- */
  .fb-like, .g-plusone{display:none !important;}

  /* ---- Bloc logo + partage -------------------------------------------- */
  #area-logos{padding:18px 16px 6px !important; text-align:center;}
  #logo-swc{
    display:inline-block !important; margin:0 auto !important;
    background:none !important;
  }
  #logo-swc img{max-width:230px; height:auto;}
  #area-logos .shares{
    position:static !important; display:flex; gap:18px; justify-content:center;
    margin-top:14px; white-space:normal !important;
  }
  #area-logos .shares a{float:none !important;}

  /* ---- Carte de contenu principale ------------------------------------ */
  #area-texts{
    background:var(--swc-panel) !important;
    margin:0 12px 18px !important; width:auto !important;
    border-radius:12px; border:1px solid rgba(255,255,255,.06);
  }
  #area-texts .content{margin:0 !important; padding:22px 18px !important;}
  #area-texts h1{font-size:1.65em !important; line-height:1.15em !important;}
  #area-texts h1 strong{font-size:1.4em !important; margin-bottom:2px !important;}
  #area-texts h1 span{display:block; padding-left:0 !important; font-size:1em !important;}
  #area-texts h2{font-size:1.15em !important;}
  #area-texts .description{font-size:1em !important; text-align:left !important;}
  #area-texts .sep-1{margin:10px 0 !important;}

  /* ---- Bloc nouveautés : cartes empilées ------------------------------ */
  #block-news, #block-blog{
    height:auto !important; background-image:none !important;
    background:rgba(0,0,0,.18) !important; border-radius:10px;
    margin:18px 0 0 !important; padding:4px 0 !important;
  }
  #block-news .pad, #block-blog .pad{padding:14px !important;}
  #block-news article, #block-blog article{
    float:none !important; width:100% !important;
    border:0 !important; border-bottom:1px dotted rgba(255,255,255,.18) !important;
    margin:0 0 10px !important; padding:0 0 10px !important;
    background-image:none !important;
  }
  #block-news article:last-child, #block-blog article:last-child{
    border-bottom:0 !important; margin-bottom:0 !important; padding-bottom:0 !important;
  }
  #block-news article h3, #block-blog article h3{height:auto !important; margin-bottom:4px;}
  #block-news article p, #block-blog article p{height:auto !important;}
  #block-news article p{color:var(--swc-text) !important;}
  #block-news article .plus, #block-blog article .plus{
    float:none !important; display:inline-block; margin-top:4px;
    color:var(--swc-orange) !important;
  }

  /* ---- Formulaire de contact : une colonne ---------------------------- */
  #area-texts form table,
  #area-texts form tbody,
  #area-texts form tr,
  #area-texts form td{display:block !important; width:100% !important;}
  #area-texts form td{padding:0 !important;}
  form p{
    display:flex; flex-direction:column; align-items:stretch;
    padding:8px 0 !important; gap:4px;
  }
  label{float:none !important; margin:0 !important; color:#cfc7c1;}
  form p input, form p select, form p textarea{
    float:none !important; width:100% !important; box-sizing:border-box;
    font-size:16px !important;                 /* >=16px : pas de zoom auto iOS */
    padding:10px !important;
  }
  form p textarea{min-height:120px;}
  .button, button.button{
    width:100% !important; padding:14px !important; font-size:16px !important;
    background:var(--swc-orange) !important; color:#fff !important; border:0 !important;
    border-radius:8px;
  }
  .button:hover{background:var(--swc-orange-2) !important;}
  .derniereLigne{text-align:center;}

  /* Voile sombre quand le menu est ouvert */
  #swc-overlay{
    display:block;
    position:fixed; inset:0; top:54px; z-index:150;
    background:rgba(0,0,0,.45); opacity:0; pointer-events:none; transition:.25s;
  }
  body.swc-nav-open #swc-overlay{opacity:1; pointer-events:auto;}
}

/* Très petits écrans : on resserre encore un peu */
@media (max-width:380px){
  #area-texts h1{font-size:1.45em !important;}
  #swc-bar-title{font-size:13px;}
  #logo-swc img{max-width:200px;}
}

/* Respect de la préférence "réduire les animations" */
@media (prefers-reduced-motion:reduce){
  #menu-bottom, #swc-burger span, #swc-overlay{transition:none !important;}
}