/* ============================================================
   FEUILLE DE STYLE DU SITE — LOOK 1 "ATELIER" (choisi par Thomas le 03/09/2026)
   Vert foret + papier + bois clair. Titres en Fraunces, texte en Inter.
   ------------------------------------------------------------
   🔴 C EST ICI LA SOURCE UNIQUE DU STYLE. Aucun generateur ne doit
   porter de CSS en dur : ils LISENT ce fichier (moteur/maquette.py).
   Le bug de Tavolia (le CSS vivait dans gen_accueil.py et ecrasait la
   maquette a chaque lancement) ne peut donc pas se reproduire ici.
   ============================================================ */

/* ------------------------------------------------------------ palette
   Un fond papier chaud, une seule couleur d'accent (terre cuite), le vert
   sauge en second calme. Aucun fond sombre, aucun ornement. */
:root{
  --papier:#FBFAF7;      --papier-2:#EFEDE6;   --carte:#FFFFFF;
  --encre:#15251C;       --encre-2:#4A564E;    --encre-3:#7B857D;
  --terre:#1F5D45;       --terre-fonce:#16412F; --terre-voile:#E4EDE7;
  --sauge:#8A6A4B;       --sauge-voile:#F2EAE0;
  --trait:#E3E0D8;       --trait-fin:#EEECE4;
  --ombre:0 1px 2px rgba(60,42,28,.04), 0 8px 24px -12px rgba(60,42,28,.14);
  --ombre-forte:0 2px 4px rgba(60,42,28,.06), 0 16px 36px -14px rgba(60,42,28,.22);
  --serif:"Fraunces","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mesure:34rem;        /* largeur de lecture confortable */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--papier);color:var(--encre);
     font-family:var(--sans);font-size:17px;line-height:1.72;
     font-feature-settings:"kern","liga";-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--terre);text-underline-offset:.18em}

.wrap{width:min(100% - 3rem, 68rem);margin-inline:auto}
.lire{max-width:var(--mesure)}

/* petites capitales espacees : la signature typographique du site */
.oeil{font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
      color:var(--sauge);margin:0 0 .55rem}

/* ------------------------------------------------------------ entete */
.site{position:sticky;top:0;z-index:20;background:rgba(250,246,240,.88);
      backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid var(--trait-fin)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:2rem;
     padding:1.15rem 0 1.35rem}   /* un peu d'air sous le nom pour son relief */
/* Le nom en relief : des ombres empilees d'un pixel, de plus en plus foncees,
   qui creusent une epaisseur sous les lettres — puis une ombre portee douce
   qui pose le tout sur le papier. Les deux mots ont leur propre epaisseur :
   beige chaud pour Tavolia, terre cuite foncee pour Bassio. */
.logo{font-family:var(--serif);font-size:1.62rem;font-weight:600;letter-spacing:-.012em;
      text-decoration:none;color:var(--encre);white-space:nowrap;
      display:inline-block;line-height:1;padding:.1rem 0 .2rem;
      transition:transform .18s ease, text-shadow .18s ease;
      text-shadow:
        1px 1px 0 #E6D9C6,
        2px 2px 0 #DACBB4,
        3px 3px 0 #CDBBA0,
        4px 4px 0 #BFA98B,
        5px 7px 10px rgba(88,60,36,.20);}
/* Bassio : lettre FONCEE, epaisseur CLAIRE qui s'eclaircit en descendant.
   C'est le meme sens que Tavolia (lettre sombre, relief clair) — l'inverse
   donnait une lettre claire posee sur un trou noir, seule fausse note du bloc. */
.logo i{font-style:italic;color:#8A4021;letter-spacing:-.004em;
        transition:text-shadow .18s ease;
        text-shadow:
          1px 1px 0 #A85331,
          2px 2px 0 #C26B44,
          3px 3px 0 #D68A62,
          4px 4px 0 #E5A886,
          5px 7px 10px rgba(90,45,20,.18);}
/* au survol, le nom s'enfonce dans le papier : l'epaisseur diminue et il descend */
.logo:hover{transform:translate(2px,2px);
      text-shadow:
        1px 1px 0 #E6D9C6,
        2px 2px 0 #DACBB4,
        3px 4px 6px rgba(88,60,36,.18);}
.logo:hover i{text-shadow:
          1px 1px 0 #A85331,
          2px 2px 0 #C26B44,
          3px 4px 6px rgba(90,45,20,.16);}
.nav{display:flex;gap:1.7rem}
.nav a{font-size:.94rem;color:var(--encre-2);text-decoration:none;position:relative;padding:.15rem 0;
       white-space:nowrap}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
              background:var(--terre);transition:right .28s ease}
.nav a:hover{color:var(--terre)}
.nav a:hover::after{right:0}

/* Le menu telephone : une case a cocher cachee + une etiquette-bouton (le
   "burger"), sans une ligne de JavaScript — le site n'en a aucune ailleurs.
   Repere : menu-burger-v1 */
.case-menu{display:none}
.burger{display:none;border:1px solid var(--trait);background:var(--papier-2);
        border-radius:11px;width:42px;height:38px;flex:0 0 auto;
        flex-direction:column;justify-content:center;align-items:center;
        gap:4px;cursor:pointer}
.burger span{display:block;width:19px;height:2px;background:var(--encre-2);
             border-radius:2px;transition:transform .22s ease,opacity .18s ease}
.case-menu:checked ~ .wrap .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.case-menu:checked ~ .wrap .burger span:nth-child(2){opacity:0}
.case-menu:checked ~ .wrap .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.tiroir{display:none}

/* ------------------------------------------------------------ hero */
.hero{padding:5.5rem 0 3.2rem;border-bottom:1px solid var(--trait-fin)}
h1{font-family:var(--serif);font-weight:600;
   font-size:clamp(2.4rem,5.4vw,4.1rem);line-height:1.06;letter-spacing:-.028em;
   margin:0 0 1.45rem;max-width:22ch;text-wrap:balance}
h1 em{font-style:italic;color:var(--terre)}
.chapeau{font-size:1.17rem;line-height:1.68;color:var(--encre-2);
         max-width:var(--mesure);margin:0}
.chapeau strong{color:var(--encre);font-weight:600;
                box-shadow:inset 0 -.42em 0 var(--terre-voile)}

/* les reperes : hairlines, pas de boites — plus sobre, plus cher */
.reperes{display:grid;grid-template-columns:repeat(4,1fr);gap:0;
         margin:3.1rem 0 0;border-top:1px solid var(--trait)}
.reperes div{padding:1.35rem 1.4rem 0 0;border-right:1px solid var(--trait-fin)}
.reperes div:last-child{border-right:0}
.reperes b{display:block;font-family:var(--serif);font-weight:600;
           font-size:1.72rem;line-height:1.1;color:var(--terre);letter-spacing:-.02em}
.reperes span{display:block;font-size:.83rem;line-height:1.45;color:var(--encre-3);margin-top:.4rem}

/* ------------------------------------------------------------ pastilles */
.pastilles{display:flex;flex-wrap:wrap;gap:.55rem;padding:2.2rem 0 .4rem}
.pastilles a{font-size:.9rem;text-decoration:none;color:var(--encre-2);
             background:var(--carte);border:1px solid var(--trait);
             padding:.46rem 1rem;border-radius:999px;
             transition:border-color .2s,color .2s,transform .2s}
.pastilles a:hover{border-color:var(--terre);color:var(--terre);transform:translateY(-1px)}

/* ------------------------------------------------------------ rayons */
.rayon{padding:4.4rem 0;border-top:1px solid var(--trait-fin)}
.rayon:first-of-type{border-top:0}
.entete{max-width:var(--mesure)}
h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.68rem,3vw,2.25rem);
   line-height:1.16;letter-spacing:-.022em;margin:0 0 .85rem;text-wrap:balance}
.intro{margin:0;color:var(--encre-2);font-size:1.03rem}

.produits{display:grid;grid-template-columns:repeat(3,1fr);gap:1.15rem;margin:2.4rem 0 1.5rem}
.prod{background:var(--carte);border:1px solid var(--trait-fin);border-radius:18px;
      overflow:hidden;display:flex;flex-direction:column;
      box-shadow:var(--ombre);transition:transform .25s ease,box-shadow .25s ease}
.prod:hover{transform:translateY(-3px);box-shadow:var(--ombre-forte)}
.vignette{aspect-ratio:4/3;background:
    linear-gradient(150deg,var(--papier-2) 0%,#EDE4D6 55%,var(--papier-2) 100%);
    display:flex;align-items:center;justify-content:center}
.vignette span{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:#B6A996}
/* CONTAIN et pas COVER : en cover, un meuble est rogne sur les cotes et on ne
   voit plus sa forme, qui est justement ce que le visiteur regarde. */
.vignette img{width:100%;height:100%;object-fit:contain;padding:.7rem;
              mix-blend-mode:multiply}
.corps{padding:1.15rem 1.2rem 1.25rem;display:flex;flex-direction:column;flex:1}
.role{display:inline-block;font-size:.68rem;font-weight:600;letter-spacing:.13em;
      text-transform:uppercase;color:var(--sauge);background:var(--sauge-voile);
      padding:.24rem .6rem;border-radius:999px;margin-bottom:.7rem}
.role.vide{background:none;padding:0;height:1.28rem}
.prod h3{margin:0 0 .5rem;font-size:.98rem;font-weight:600;line-height:1.42;
         letter-spacing:-.005em}
.specs{margin:0 0 1.15rem;font-size:.83rem;line-height:1.55;color:var(--encre-3)}
.pied{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:.8rem}
.prix{font-family:var(--serif);font-weight:600;font-size:1.32rem;letter-spacing:-.02em}
.btn{background:var(--terre);color:#fff;text-decoration:none;white-space:nowrap;
     padding:.62rem 1.05rem;border-radius:11px;font-size:.87rem;font-weight:600;
     transition:background .2s}
.btn:hover{background:var(--terre-fonce)}
.panier{display:block;margin:.55rem 1.2rem 1.2rem;text-align:center;text-decoration:none;
        border:1px solid var(--terre);color:var(--terre);border-radius:11px;
        padding:.5rem;font-size:.83rem;font-weight:600}
.panier:hover{background:var(--terre-voile)}

.suite{margin:0}
.suite a{font-weight:600;font-size:1rem;text-decoration:none;
         display:inline-flex;align-items:center;gap:.5rem}
.suite a:hover{text-decoration:underline}
.fleche{transition:transform .25s ease}
.suite a:hover .fleche{transform:translateX(4px)}

/* --------------------------------------- livraison offerte (essai Prime) */
/* 🔴 02/09/2026 — LE CSS DU SITE VIT A DEUX ENDROITS, et c'est ICI la source.
   gen_pages.py et gen_tous_hubs.py lisent la feuille de style dans
   `maquette_accueil_fr.html` — mais ce fichier est justement CE QUE CE
   GENERATEUR ECRIT (SORTIE_FR). Une regle ajoutee a la main dans la maquette
   survit donc jusqu'au prochain lancement de gen_accueil, qui la remplace par
   le CSS ci-dessous. C'est exactement ce qui est arrive a la regle `.prime` a
   17h13 : ecrite dans la maquette, effacee 1 minute plus tard.
   ➜ Toute regle de style nouvelle s'ecrit ICI, puis on relance gen_accueil. */
.prime{margin:1.1rem 0 0;padding:.7rem 1.05rem;border-radius:12px;
       background:var(--papier-2);border:1px solid var(--trait-fin);
       font-size:.87rem;line-height:1.5;color:var(--encre-2)}
.prime a{color:var(--terre);font-weight:600;text-decoration:none}
.prime a:hover{text-decoration:underline}
.prime-pied{margin:.9rem 0 0;font-size:.82rem;color:var(--encre-3)}
.prime-pied a{color:var(--encre-2)}

/* ------------------------------------------------------------ alerte prix */
/* 🔴 03/09/2026 — ce bloc n'avait jamais eu de style : bouton, champ et case
   RGPD tenaient sur l'apparence par defaut du navigateur, ternes a cote du
   reste du site. Memes tokens que .btn/.prime plus haut, rien de nouveau. */
.capture-email{background:var(--papier-2);border:1px solid var(--trait-fin);
               border-radius:16px;padding:1.8rem 1.9rem;margin:2.2rem 0;max-width:34rem}
.capture-email h2{margin:0 0 .5rem;font-size:1.25rem}
.capture-email>p{margin:0 0 1.1rem;color:var(--encre-2);font-size:.92rem;line-height:1.55}
.form-email{display:flex;flex-wrap:wrap;gap:.6rem}
.form-email input[type=email]{flex:1 1 14rem;padding:.62rem .9rem;border:1px solid var(--trait);
               border-radius:10px;font-size:.9rem;background:var(--carte);color:var(--encre)}
.form-email input[type=email]:focus{outline:2px solid var(--terre-voile);border-color:var(--terre)}
.form-email button{background:var(--terre);color:#fff;border:0;cursor:pointer;
               padding:.62rem 1.2rem;border-radius:11px;font-size:.87rem;font-weight:600;
               transition:background .2s}
.form-email button:hover{background:var(--terre-fonce)}
.optin{width:100%}
.optin a{color:var(--terre)}
.optin input[type=checkbox]{accent-color:var(--terre);width:1.05rem;height:1.05rem}

/* ------------------------------------------------------------ affiliation */
.affil{border-top:1px solid var(--trait);margin-top:1rem;padding:1.5rem 0 0;
       font-size:.88rem;line-height:1.6;color:var(--encre-3);max-width:46rem}

/* ------------------------------------------------------------ FAQ */
.faq{padding:4.4rem 0;border-top:1px solid var(--trait-fin)}
.faq h2{margin-bottom:1.9rem}
details.qr{border-top:1px solid var(--trait-fin);display:block}
details.qr:last-of-type{border-bottom:1px solid var(--trait-fin)}
details.qr summary{list-style:none;cursor:pointer;padding:1.15rem 2rem 1.15rem 0;
     position:relative;font-weight:600;font-size:1.02rem;line-height:1.5}
details.qr summary::-webkit-details-marker{display:none}
details.qr summary::after{content:"+";position:absolute;right:.4rem;top:1rem;
     font-size:1.35rem;font-weight:400;color:var(--terre);line-height:1}
details.qr[open] summary::after{content:"\2212"}
details.qr .r{margin:0 0 1.15rem;color:var(--encre-2);font-size:.97rem;max-width:var(--mesure)}

/* ------------------------------------------------------------ plan */
.plan{background:var(--sauge-voile);border-radius:26px;padding:3rem 2.6rem;margin:1rem 0 4rem}
.plan h2{margin-bottom:1.9rem}
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:2.2rem 2.6rem}
.cols h3.sous{font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
         color:var(--sauge);margin:0 0 .8rem;padding-bottom:.65rem;
         border-bottom:1px solid #D3DCCB}
.cols ul{list-style:none;margin:0;padding:0}
.cols li{margin-bottom:.42rem}
.cols a{font-size:.95rem;text-decoration:none;color:#3F4A39}
.cols a:hover{color:var(--terre-fonce);text-decoration:underline}

/* ------------------------------------------------------------ pied */
footer{border-top:1px solid var(--trait);background:var(--carte);
       padding:2.8rem 0 3.6rem;font-size:.92rem;color:var(--encre-3)}
.liens-pied{display:flex;flex-wrap:wrap;gap:.4rem 1.7rem;margin-bottom:1.5rem}
.liens-pied a{color:var(--encre-2);text-decoration:none}
.liens-pied a:hover{color:var(--terre)}
.langues{display:flex;flex-wrap:wrap;gap:.4rem 1.25rem;padding-top:1.35rem;
         border-top:1px solid var(--trait-fin)}
.langues a{color:var(--encre-3);text-decoration:none;font-size:.88rem}
.langues a:hover{color:var(--terre)}

/* ------------------------------------------------------------ ecrans etroits */
@media(max-width:900px){
  .produits{grid-template-columns:repeat(2,1fr)}
  .cols{grid-template-columns:repeat(2,1fr)}
  .reperes{grid-template-columns:repeat(2,1fr);row-gap:.2rem}
  .reperes div:nth-child(2){border-right:0}
}
/* 🔴 05/09/2026 — LE MENU DEBORDAIT ENTRE 700 ET 900 PX.
   Il ne passait en tiroir qu'a 620 px : entre les deux, ses six rubriques
   poussaient la page de quelques pixels vers la droite, et « Banquettes »
   sortait de l'ecran. Mesure a 700 px : 11 px de debordement. Le tiroir
   prend donc la main des 900 px, la meme largeur ou le tableau se resserre. */
@media(max-width:900px){
  .bar{gap:1rem}
  .nav{display:none}
  .burger{display:flex}
  .tiroir{display:block;max-height:0;overflow:hidden;background:var(--carte);
          border-top:1px solid var(--trait);transition:max-height .3s ease}
  .case-menu:checked ~ .tiroir{max-height:480px}
  .tiroir a{display:block;padding:.78rem 1.1rem;font-size:.95rem;
            color:var(--encre-2);text-decoration:none;
            border-bottom:1px solid var(--trait-fin)}
  .tiroir a:last-child{border-bottom:0}
  .tiroir a::after{content:" ›";float:right;color:var(--trait)}
}

@media(max-width:620px){
  body{font-size:16px}
  .wrap{width:min(100% - 2.2rem,68rem)}
  .hero{padding:3.4rem 0 2.4rem}
  /* 🔴 03/09/2026 — remplace le menu qui defilait horizontalement (mémoire :
     les 5 rubriques suivantes restaient invisibles, rien ne disait qu'on
     pouvait faire glisser). Le vrai menu passe dans le tiroir "burger",
     repere menu-burger-v1. */
  .produits,.cols{grid-template-columns:1fr}
  .qr{grid-template-columns:1fr;gap:.5rem}
  .plan{padding:2.2rem 1.5rem;border-radius:20px}
  .reperes div{padding-right:1rem}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto}
}


/* ==========================================================
   REGLES DES PAGES (avant : recopiees dans 5 generateurs)
   ========================================================== */

/* --- regles venues de gen_pages.py --- */

.fil{font-size:.85rem;color:var(--encre-3);padding:1.6rem 0 0}

.fil a{color:var(--encre-3);text-decoration:none}

.fil a:hover{color:var(--terre)}

.fil a::after{content:" \203a";color:var(--trait)}

.tab{overflow-x:auto;margin:2.2rem 0;border:1px solid var(--trait-fin);
       border-radius:16px;background:var(--carte)}

table{border-collapse:collapse;width:100%;font-size:.92rem;min-width:34rem}

th,td{padding:.85rem 1.1rem;text-align:left;border-bottom:1px solid var(--trait-fin)}

th{background:var(--papier-2);font-size:.7rem;font-weight:600;letter-spacing:.13em;
     text-transform:uppercase;color:var(--encre-2)}

tr:last-child td{border-bottom:0}

td.nb{font-family:var(--serif);font-size:1.05rem;font-weight:600;white-space:nowrap}

td.cta{text-align:right;width:1%;white-space:nowrap}

.btn.mini{display:inline-block;padding:.42rem .85rem;font-size:.78rem;border-radius:9px}

table tr:hover{background:var(--papier)}

td.modele{display:flex;align-items:center;gap:.75rem}

.mini-photo{width:56px;height:56px;object-fit:contain;flex:0 0 56px;
              background:var(--papier-2);border-radius:9px;padding:3px;mix-blend-mode:multiply}

.fiches{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:2.1rem 0}

.fiche{background:var(--carte);border:1px solid var(--trait-fin);border-radius:16px;
         overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--ombre)}

.fiche .vignette{aspect-ratio:4/3}

.fiche .corps{padding:.95rem 1rem 1.05rem}

.fiche h3{font-size:.9rem;line-height:1.35;margin:0 0 .4rem}

.fiche .specs{font-size:.78rem;margin:0 0 .75rem}

.fiche .note{font-size:.855rem;line-height:1.5;color:var(--encre-2);margin:0 0 .95rem}

.fiche .prix{font-size:1.15rem}

.fiche .btn{padding:.55rem .8rem;font-size:.81rem}

.fiche .role{font-size:.64rem;padding:.2rem .5rem;margin-bottom:.55rem}

.bloc{padding:2.6rem 0 0;max-width:var(--mesure)}

.bloc h2{margin-bottom:.9rem}

.retenir{margin:1rem 0 0;padding:.9rem 1.15rem;border-radius:12px;
           background:var(--terre-voile);border:1px solid #E9CFC1;
           font-size:.92rem;line-height:1.5}

.retenir .oeil{display:inline;margin:0 .5rem 0 0;color:var(--terre)}

.sommaire-page{display:flex;flex-wrap:wrap;gap:.5rem;margin:2rem 0 0}

.sommaire-page a{font-size:.86rem;text-decoration:none;color:var(--encre-2);
       background:var(--carte);border:1px solid var(--trait);padding:.4rem .9rem;border-radius:999px}

.sommaire-page a:hover{border-color:var(--terre);color:var(--terre)}

details.qr{border-top:1px solid var(--trait-fin);display:block}

details.qr:last-of-type{border-bottom:1px solid var(--trait-fin)}

details.qr summary{list-style:none;cursor:pointer;padding:1.15rem 2rem 1.15rem 0;
       position:relative;font-weight:600;font-size:1.02rem;line-height:1.5}

details.qr summary::-webkit-details-marker{display:none}

details.qr summary::after{content:"+";position:absolute;right:.4rem;top:1rem;
       font-size:1.35rem;font-weight:400;color:var(--terre);line-height:1}

details.qr[open] summary::after{content:"\2212"}

details.qr .r{margin:0 0 1.15rem;color:var(--encre-2);font-size:.97rem;max-width:var(--mesure)}

@media(max-width:980px){ .fiches{grid-template-columns:repeat(2,1fr)} }

@media(max-width:760px){ .fiches{grid-template-columns:1fr} }

/* ------------------------------------------- comparatif sur telephone */
  /* 03/09/2026 — le tableau a 5 colonnes et une largeur minimum de 34rem :
     sur un telephone, seules « Modele » et « Prix » tenaient, et le bouton
     d'achat — la seule chose qui rapporte — etait hors de l'ecran, sans rien
     pour dire qu'on pouvait faire glisser. Chaque ligne devient une ligne
     serree : photo | nom + taille/teinte | prix + bouton. Les prix restent
     alignes en colonne a droite, donc on compare encore d'un coup d'oeil.
     Habillage seul : le HTML des pages n'a pas bouge. Repere : mobile-tableau-v1 */
  @media(max-width:620px){
    .tab{overflow-x:visible;border-radius:14px}
    .tab table{min-width:0;width:100%;display:block}
    .tab tbody{display:block}
    .tab tr{display:grid;
            grid-template-columns:52px minmax(0,auto) minmax(0,1fr) auto;
            grid-template-areas:"ph nom nom prix" "ph dim tei btn";
            gap:.12rem .45rem;align-items:center;padding:.65rem .7rem;
            border-bottom:1px solid var(--trait-fin)}
    .tab tr:first-child{display:none}      /* la ligne d'entete Modele/Prix/... */
    .tab tr:last-child{border-bottom:0}
    .tab tr:hover{background:transparent}
    .tab td{display:block;padding:0;border:0}
    .tab td.modele{display:contents}       /* la photo et le nom deviennent 2 cases */
    .tab .mini-photo{grid-area:ph;width:52px;height:52px;flex:0 0 52px}
    .tab td.modele b{grid-area:nom;font-size:.85rem;line-height:1.3;
                     display:-webkit-box;-webkit-line-clamp:2;
                     -webkit-box-orient:vertical;overflow:hidden}
    .tab td.nb{grid-area:prix;text-align:right;font-size:1.05rem;align-self:end}
    .tab td:nth-child(3){grid-area:dim}
    .tab td:nth-child(4){grid-area:tei}
    .tab td:nth-child(3),.tab td:nth-child(4){font-size:.72rem;color:var(--encre-3);
            white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .tab td:nth-child(4)::before{content:"· "}
    .tab td.cta{grid-area:btn;width:auto;text-align:right;align-self:start}
    .tab .btn.mini{padding:.3rem .5rem;font-size:.7rem}
  }

/* --- regles venues de gen_tous_hubs.py --- */

/* ---- propre aux pages de hub ---- */
  .fil{font-size:.85rem;color:var(--encre-3);padding:1.6rem 0 0}

/* 3 par ligne, 2 lignes : les six tiennent dans un ecran au lieu de trois. */
  .fiches{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:2.1rem 0}

details.qr{border-top:1px solid var(--trait-fin);padding:0;display:block}

details.qr[open] summary::after{content:"‘2"}

.mini-photo{width:56px;height:56px;object-fit:contain;flex:0 0 56px;
              background:var(--papier-2);border-radius:9px;padding:3px;
              mix-blend-mode:multiply}

/* --- regles venues de gen_confiance.py --- */

/* ---- pages de confiance : du texte, rien d'autre ---- */
  .fil{font-size:.85rem;color:var(--encre-3);padding:1.6rem 0 0}

.bloc{padding:2.4rem 0 0;max-width:var(--mesure)}

.bloc h2{margin-bottom:.85rem}

.sommaire-page{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.8rem 0 0}

/* --- regles venues de gen_merci.py --- */

/* ---- page merci : un message, un bouton ---- */
  .merci-bloc{padding:3.2rem 0 4rem;max-width:var(--mesure);text-align:center;margin:0 auto}

.merci-bloc .coche{width:56px;height:56px;margin:0 auto 1.2rem;border-radius:50%;
       background:var(--sauge-voile);display:flex;align-items:center;justify-content:center;
       font-size:1.6rem;color:var(--terre-fonce)}

.merci-bloc h1{margin:0 0 .8rem}

.merci-bloc p{color:var(--encre-2);line-height:1.6}

.merci-bloc .bouton-retour{display:inline-block;margin-top:1.6rem;padding:.8rem 1.8rem;
       border-radius:999px;background:var(--terre);color:#fff;text-decoration:none;font-weight:600}

.merci-bloc .bouton-retour:hover{background:var(--terre-fonce)}


/* ============================================================
   LE BANDEAU COOKIES — pose en bas, ne recouvre jamais le contenu.
   L attribut "hidden" au depart : le script le montre seulement s il faut.
   Les couleurs viennent des memes variables que le reste du site.
   ============================================================ */
.bandeau-cookies{position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:.9rem 1.4rem;padding:.95rem 1.2rem;
  background:var(--papier-2);border-top:2px solid var(--encre);
  box-shadow:0 -4px 18px rgba(0,0,0,.10)}
.bandeau-cookies[hidden]{display:none}
.bandeau-texte{margin:0;max-width:62ch;font-size:.95rem;line-height:1.55;color:var(--encre-2)}
.bandeau-texte a{color:var(--terre);text-decoration:underline}
.bandeau-boutons{display:flex;gap:.6rem;flex:none}
.bandeau-cookies button{font:inherit;font-size:.95rem;font-weight:600;cursor:pointer;
  padding:.62rem 1.25rem;border-radius:6px;border:1.5px solid var(--terre)}
.bandeau-oui{background:var(--terre);color:#fff}
.bandeau-non{background:transparent;color:var(--terre)}
.bandeau-cookies button:hover{opacity:.88}
@media(max-width:640px){
  .bandeau-cookies{flex-direction:column;align-items:stretch;text-align:left}
  .bandeau-boutons{justify-content:stretch}
  .bandeau-cookies button{flex:1}
}


/* ================= CE QU'UNE PAGE ECRITE A LA MAIN A BESOIN ==================
   05/09/2026. Le moteur du canape a ete copie depuis la table basse AVANT que
   le process ne change : a l'epoque, une page etait une phrase a trous remplie
   par le moteur, et toutes ses formes etaient prevues ici. Depuis, une page est
   ECRITE — avec ses propres tableaux et ses propres barres d'achat — et deux
   formes manquaient completement a cette feuille : sans elles, un tableau ecrit
   s'affichait nu et une barre d'achat n'etait qu'une suite de lignes. */

/* --- LE TABLEAU ECRIT A LA MAIN ---
   Le tableau `.tab` plus haut est fabrique par le moteur et a toujours les
   memes colonnes. Celui-ci a un nombre de colonnes LIBRE (« Forme | Ce qu'elle
   occupe | Prix median | Ce qui la distingue »). Sur grand ecran : un vrai
   tableau. Sous 620px : une carte par ligne, chaque cellule affichant son
   entete via `data-l`, pose par le generateur.
   🔴 Ne JAMAIS lui donner de `min-width` : c'est ce qui force a faire glisser
   du doigt, et personne ne devine qu'on peut faire glisser. */
/* 🔴 05/09/2026 — LA COLONNE PRIX ETAIT COUPEE, SANS RIEN POUR LE DIRE.
   Une section de texte est bornee a la largeur de LECTURE (34rem). Le tableau
   ecrit vivait dedans, avec `overflow:hidden` : ses deux dernieres colonnes —
   « passe une porte » et « prix », c'est-a-dire ce qui fait decider et ce qui
   fait vendre — etaient simplement rognees. Aucune barre de defilement, aucun
   signe : le HTML etait juste, l'ECRAN mentait. Vu seulement en regardant.
   La section qui porte un tableau passe donc en pleine largeur (`.bloc.large`,
   pose par le generateur), et son TEXTE garde la largeur de lecture. */
.bloc.large{max-width:none}
.bloc.large > p, .bloc.large > ul, .bloc.large > h3,
.bloc.large > .achat, .bloc.large > .retenir{max-width:var(--mesure)}
/* 🔴 05/09/2026, DECISION THOMAS — UN TABLEAU NE SE POUSSE JAMAIS DU DOIGT.
   `overflow-x:auto` etait un filet ; c'en est un mauvais. Rien ne dit qu'on
   PEUT faire glisser, donc la colonne qui depasse n'est jamais lue — et c'est
   toujours la derniere, celle qui porte le prix et le bouton. Le tableau
   s'adapte ou il bascule en cartes, il ne glisse pas. */
.tab-txt{margin:2.2rem 0;border:1px solid var(--trait-fin);border-radius:16px;
         background:var(--carte);overflow:hidden;max-width:100%}
.tab-txt table{table-layout:auto}
.tab-txt table{min-width:0;width:100%;font-size:.9rem;border-collapse:collapse}
.tab-txt th{vertical-align:bottom;text-align:left;padding:.7rem 1rem;
            font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;
            color:var(--encre-3);border-bottom:1px solid var(--trait-fin)}
.tab-txt td{vertical-align:top;padding:.7rem 1rem;
            border-bottom:1px solid var(--trait-fin)}
.tab-txt tr:last-child td{border-bottom:0}
.tab-txt td:first-child{font-weight:600;color:var(--encre)}
.tab-txt td.nb{font-variant-numeric:tabular-nums;white-space:nowrap}

/* --- LA BARRE D'ACHAT, posee par le marqueur [BOUTON: asin] ---
   Le texte au-dessus a deja tout dit du modele : cette barre ne redit rien,
   elle donne la photo, le nom, les cotes, le prix du catalogue et le lien. */
.achat{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:.9rem;
       align-items:center;margin:1.5rem 0 2.2rem;padding:.8rem 1rem;
       border:1px solid var(--trait-fin);border-radius:14px;background:var(--carte)}
.achat .mini-photo{width:64px;height:64px;flex:0 0 64px}
.achat .qui{min-width:0}
.achat .qui b{display:block;font-size:.88rem;line-height:1.3;font-weight:600}
.achat .qui .specs{font-size:.76rem;color:var(--encre-3);margin:.2rem 0 0}
.achat .sous{display:flex;flex-direction:column;align-items:flex-end;gap:.4rem}
.achat .prix{font-family:var(--serif);font-size:1.15rem;font-weight:600;
             white-space:nowrap}
.prix-txt{font-weight:600;white-space:nowrap}

/* de 620 a 900 px : le tableau se resserre avant de basculer */
@media(max-width:900px){
  .tab-txt table{font-size:.82rem}
  .tab-txt th{padding:.5rem .55rem;font-size:.58rem;letter-spacing:.06em}
  .tab-txt td{padding:.5rem .55rem}
  .tab-txt td.nb{white-space:normal}
}

/* sous 760 px : une carte par ligne, chaque valeur avec son intitule */
@media(max-width:760px){
  .tab-txt table,.tab-txt tbody,.tab-txt tr,.tab-txt td{display:block;width:auto}
  .tab-txt thead{display:none}
  .tab-txt tr{padding:.9rem 1.1rem;border-bottom:1px solid var(--trait-fin)}
  .tab-txt tr:last-child{border-bottom:0}
  .tab-txt td{padding:.18rem 0;border:0;display:grid;
              grid-template-columns:8.6rem minmax(0,1fr);gap:.7rem;
              align-items:baseline;font-size:.88rem}
  .tab-txt td::before{content:attr(data-l);font-size:.68rem;font-weight:600;
                      letter-spacing:.08em;text-transform:uppercase;
                      color:var(--encre-3);line-height:1.5}
  .tab-txt td:first-child{display:block;font-size:1rem;line-height:1.35;
                          margin-bottom:.4rem;padding-top:0}
  .tab-txt td:first-child::before{content:none}
  .tab-txt td:empty{display:none}
  /* le bouton passe en pleine largeur, sous la carte : c'est la qu'on clique */
  .tab-txt td:last-child{display:block;margin-top:.55rem}
  .tab-txt td:last-child::before{content:none}
  .tab-txt td:last-child .btn.mini{display:block;text-align:center;
                                   padding:.55rem 1rem;font-size:.85rem}
}

@media(max-width:620px){
  .achat{grid-template-columns:56px minmax(0,1fr);gap:.7rem}
  .achat .mini-photo{width:56px;height:56px;flex:0 0 56px}
  .achat .sous{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;align-items:center;
               justify-content:space-between;gap:.7rem}
  .achat .sous .btn{flex:1;text-align:center}
  /* 🔴 05/09/2026, VU A 320 px ET NULLE PART AILLEURS — le bouton « Mettre au
     panier » gardait les marges de son ancien gabarit (1,2 rem de chaque cote)
     et sortait de l'ecran de 38 px, en poussant toute la page de cote. Sur un
     telephone etroit, le lecteur pousse la page au lieu de cliquer. Il prend
     desormais sa propre ligne, en pleine largeur : c'est aussi une cible de
     clic bien plus grande. */
  .achat .sous .panier{flex:1 0 100%;margin:0;text-align:center}
}