/* ---------------------------------------------------------------------------
   responsive.css — couche mobile / tablette du site jeandebailliencourt.fr

   Les pages sont générées avec des styles inline (template design-canvas) :
   la plupart des règles ci-dessous ont donc besoin de !important pour passer
   devant l'attribut style. Chargée depuis <head>, donc avant le rendu.

   Points de rupture
     1010px  resserrage des marges
      900px  header en menu burger + grilles larges en 2 colonnes
      740px  passage en une seule colonne
      560px  téléphone étroit
--------------------------------------------------------------------------- */

html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{overflow-x:clip}
img,svg,video,image-slot{max-width:100%}
/* <image-slot> pose touch-action:none sur son <img> (pan/zoom au doigt dans
   l'éditeur). Sur le site, en lecture seule, ça bloque juste le scroll quand
   le doigt tombe sur une image : on rend le geste vertical au navigateur. */
image-slot::part(image){touch-action:pan-y pinch-zoom}

/* --- header : reste collé en haut, translucide, arrière-plan légèrement flouté.
   Sans backdrop-filter, on garde un fond presque opaque pour la lisibilité. --- */
.jdb-header{position:sticky;top:0;z-index:50;background:rgba(246,241,227,.94)!important;border-bottom:1px solid rgba(38,32,22,.09)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .jdb-header{background:rgba(246,241,227,.66)!important;-webkit-backdrop-filter:blur(9px) saturate(1.25);backdrop-filter:blur(9px) saturate(1.25)}
  /* menu burger déplié : les liens passent au-dessus du contenu, fond plus dense */
  .jdb-header:has(.jdb-navtoggle:checked){background:rgba(246,241,227,.95)!important}
}

/* --- fiches et bulles : légère ombre portée pour les faire flotter.
   Les classes jdb-card (fiches) et jdb-chip (pastilles, badges, boutons) sont
   posées dans le HTML de chaque page ; toute nouvelle fiche doit les porter. --- */
.jdb-card,a.jdb-postrow,.jdb-carousel,.jdb-hero-media{box-shadow:0 1px 3px rgba(38,32,22,.08),0 10px 24px -8px rgba(38,32,22,.27)}
.jdb-chip{box-shadow:0 1px 2px rgba(38,32,22,.14),0 3px 7px -3px rgba(38,32,22,.18)}
/* zones blanches des fiches : dégradé jaune moutarde très léger — plus de la
   moitié de la fiche reste blanche ou pâle, la teinte n'arrive qu'en bas */
.jdb-card,a.jdb-postrow{background:linear-gradient(165deg,#fffefa 0%,#fffbf1 54%,#fbf0cc 80%,#f4dfa0 100%)!important}

/* --- burger : la case à cocher porte l'état, le <label> est le bouton ----- */
.jdb-navtoggle{position:absolute;width:1px;height:1px;opacity:0;margin:0;padding:0;border:0;pointer-events:none}
.jdb-burger{display:none;flex:none;width:44px;height:40px;border-radius:11px;border:1.5px solid rgba(38,32,22,.18);background:#efe9db;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px;-webkit-tap-highlight-color:transparent}
.jdb-burger span{display:block;width:19px;height:2px;border-radius:2px;background:#262016;transition:transform .22s ease,opacity .16s ease}
.jdb-navtoggle:checked~.jdb-burger{background:#262016;border-color:#262016}
.jdb-navtoggle:checked~.jdb-burger span{background:#efe9db}
.jdb-navtoggle:checked~.jdb-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.jdb-navtoggle:checked~.jdb-burger span:nth-child(2){opacity:0}
.jdb-navtoggle:checked~.jdb-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.jdb-navtoggle:focus-visible~.jdb-burger{outline:2px solid #c94f38;outline-offset:2px}

/* ============================== <= 1010px ================================ */
@media (max-width:1010px){
  .jdb-main{padding-left:28px!important;padding-right:28px!important}
  .jdb-page{padding-left:28px!important;padding-right:28px!important}
  .jdb-header{padding-left:24px!important;padding-right:24px!important}
  .jdb-footer{padding-left:24px!important;padding-right:24px!important}
  .jdb-nav{gap:18px!important}
  .jdb-social{gap:5px!important}
  .jdb-hero{gap:30px!important}
  .jdb-detail{gap:28px!important}
  .jdb-about{gap:30px!important}
}

/* ================== <= 900px : header en menu burger ===================== */
@media (max-width:900px){
  .jdb-header{
    flex-wrap:wrap!important;
    padding:11px 16px!important;
    column-gap:10px!important;row-gap:0!important;
  }
  .jdb-brand{order:1;flex:1 1 auto;min-width:0;gap:11px!important}
  .jdb-brand img{width:34px!important;height:34px!important}
  .jdb-brand span{font-size:15px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .jdb-lang{order:2;flex:none;width:34px!important;height:34px!important;margin-left:0!important}
  .jdb-burger{order:3;display:flex}

  /* panneau déroulant : replié par défaut, déplié quand la case est cochée */
  .jdb-nav,.jdb-social{
    order:4;flex-basis:100%;width:100%;
    margin:0!important;padding:0!important;
    max-height:0;opacity:0;overflow:hidden;
    /* visibility replie => les liens sortent de l ordre de tabulation */
    visibility:hidden;
    transition:max-height .28s ease,opacity .2s ease,padding .28s ease,visibility 0s linear .28s;
  }
  .jdb-nav{flex-direction:column!important;gap:0!important}
  .jdb-social{order:5;justify-content:center;gap:14px!important}
  .jdb-navtoggle:checked~.jdb-nav,
  .jdb-navtoggle:checked~.jdb-social{visibility:visible;transition-delay:0s}
  .jdb-navtoggle:checked~.jdb-nav{max-height:400px;opacity:1;padding-top:4px!important}
  .jdb-navtoggle:checked~.jdb-social{max-height:90px;opacity:1;padding:14px 0 8px!important}
  .jdb-nav a{display:block;padding:14px 2px;font-size:16px!important;border-top:1px solid rgba(38,32,22,.1)}
  .jdb-social a{width:38px!important;height:38px!important}
  .jdb-social svg{width:17px;height:17px}
  .jdb-social img{width:23px!important;height:23px!important}
}
@media (max-width:900px) and (prefers-reduced-motion:reduce){
  .jdb-nav,.jdb-social{transition:none}
}

/* ============= <= 900px : grilles larges -> deux colonnes ================ */
@media (max-width:900px){
  .jdb-grid-4,.jdb-grid-3{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
  .jdb-hero{grid-template-columns:minmax(0,1fr)!important;gap:26px!important;margin-bottom:42px!important}
  .jdb-hero-media{max-width:520px;aspect-ratio:5/4!important}
  .jdb-about{grid-template-columns:minmax(0,1fr)!important;gap:26px!important}
  .jdb-about>div:last-child{max-width:420px}
  .jdb-detail{grid-template-columns:minmax(0,1fr)!important;gap:26px!important}
  .jdb-main{padding:32px 22px 52px!important}
  .jdb-page{padding:26px 22px 56px!important}
  .jdb-main h1{font-size:clamp(29px,7.2vw,44px)!important;line-height:1.1!important}
  .jdb-pagenum{font-size:clamp(29px,7.2vw,44px)!important}
  .jdb-sechead{font-size:clamp(23px,4.2vw,30px)!important}
  .jdb-sectitle{flex-wrap:wrap!important;gap:4px 14px!important}
  .jdb-page h1{font-size:clamp(32px,8vw,64px)!important;line-height:1.06!important;margin:24px 0 32px!important}
}

/* ================= <= 740px : une seule colonne partout ================== */
@media (max-width:740px){
  .jdb-grid-4,.jdb-grid-3,.jdb-grid-2{grid-template-columns:minmax(0,1fr)!important;gap:14px!important}
  .jdb-about>div:last-child{max-width:none}

  /* lignes du blog : date sur sa propre ligne, titre + flèche en dessous */
  .jdb-postrow{grid-template-columns:minmax(0,1fr) auto!important;gap:8px 12px!important;padding:15px 18px!important}
  .jdb-postrow>:first-child{grid-column:1/-1;justify-self:start}

  /* pied de page : une colonne, tout centré */
  .jdb-footer{grid-template-columns:minmax(0,1fr)!important;justify-items:center;gap:16px;text-align:center;padding:24px 20px 30px!important}
  .jdb-footlinks{justify-content:center!important;flex-wrap:wrap;gap:16px!important}
  .jdb-flag{display:none!important}

  /* carrousel des fiches produit : pleine largeur, flèches atteignables */
  .jdb-carousel{aspect-ratio:4/3!important;touch-action:pan-y}
  .jdb-carousel>button{width:42px!important;height:42px!important}
  .jdb-carousel>button:nth-of-type(1){left:8px!important}
  .jdb-carousel>button:nth-of-type(2){right:8px!important}
}

/* ==================== <= 560px : téléphone étroit ======================== */
@media (max-width:560px){
  .jdb-main{padding:26px 16px 44px!important}
  .jdb-page{padding:22px 16px 48px!important}
  .jdb-header{padding:10px 14px!important}
  .jdb-footer{padding:22px 16px 28px!important}
  .jdb-hero-media{aspect-ratio:4/3!important}

  /* modale « +1 » : marges réduites et champ empilé */
  .jdb-modal{padding:22px 18px!important;max-height:calc(100vh - 28px);overflow-y:auto}
  .jdb-modal h3{font-size:22px!important}
  .jdb-modalform{flex-direction:column!important}
  .jdb-modalform button{justify-content:center}
}