/* ============================================================
   QYLINE — Templates de sites (catalogue, fiche, panier, démo)
   ------------------------------------------------------------
   Charte « papier, bleu, jaune », la même que la page d'accueil :
   bandeau bleu quadrillé, titres très gras, étiquettes jaunes
   penchées, cadres bordés de bleu sur ombre jaune, cartes bordées
   d'encre sur ombre dure, boutons qui glissent vers leur ombre,
   liens soulignés d'un trait épais.

   Toutes les classes commencent par « tq- » : cette feuille ne
   touche à rien d'autre sur le site.

   1 · Jetons et socle        5 · Fiche d'un template
   2 · Barre du haut          6 · Panier
   3 · Liens, boutons, mots   7 · Messages
   4 · Catalogue et cartes    8 · Pied de page
   ============================================================ */

/* ---------- 1 · Jetons et socle ---------- */
:root{
  color-scheme:light;
  --bleu:#24459A;
  --bleu-fonce:#1B347A;
  --jaune:#F5C518;
  --encre:#121A33;
  --papier:#F4F6FA;
  --blanc:#FFFFFF;
  --gris:#3A4666;
  --clair:#D5DCF0;
  --cadre:#DCE4F5;
  --filet:#C3CEEA;
  --vert:#17703F;
  --rouge:#C5281C;
  --police:'Bricolage Grotesque','Trebuchet MS','Segoe UI',system-ui,sans-serif;
  --grille:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
}
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body.tq{
  margin:0;
  font-family:var(--police);
  font-size:1.0625rem;
  line-height:1.55;
  color:var(--encre);
  background:var(--papier);
  -webkit-font-smoothing:antialiased;
  font-optical-sizing:auto;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
.tq h1,.tq h2,.tq h3,.tq p,.tq figure{margin:0;}
.tq h1,.tq h2,.tq h3{font-weight:800;line-height:1;letter-spacing:-.03em;text-wrap:balance;}
.tq img,.tq svg{max-width:100%;display:block;}
.tq a{color:inherit;}
.tq button,.tq input{font-family:inherit;}
.tq ::selection{background:var(--jaune);color:var(--encre);}
.tq :where(a,button,input,summary):focus-visible{outline:3px solid currentColor;outline-offset:4px;}
.tq-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;}

.tq-conteneur{width:100%;max-width:1200px;margin:0 auto;}
.tq-corps{flex:1;padding:clamp(40px,6vw,76px) 24px clamp(64px,8vw,104px);}
.tq-pile{display:flex;flex-direction:column;gap:clamp(36px,5vw,56px);}

/* ---------- 2 · Barre du haut : le bandeau bleu quadrillé ---------- */
.tq-barre{
  position:sticky;top:0;z-index:30;
  padding:12px 24px;
  color:#fff;
  background-color:var(--bleu);
  background-image:var(--grille);
  background-size:36px 36px;
  border-bottom:2px solid var(--encre);
}
.tq-barre-in{display:flex;align-items:center;gap:10px 26px;flex-wrap:wrap;}
.tq-logo{display:inline-flex;align-items:center;gap:11px;font-weight:800;font-size:1.5rem;letter-spacing:.03em;line-height:1;text-decoration:none;color:#fff;}
.tq-logo img{height:34px;width:auto;border-radius:4px;background:var(--encre);padding:3px;box-shadow:2px 2px 0 var(--jaune);}
.tq-menu{display:flex;align-items:center;gap:4px 22px;flex-wrap:wrap;flex:1;}
.tq-barre .tq-lien{color:#fff;}
.tq-barre-act{display:flex;align-items:center;gap:10px 18px;flex-wrap:wrap;margin-left:auto;}
.tq-pastille{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:24px;height:24px;padding:0 6px;border-radius:3px;
  background:var(--encre);color:#fff;font-size:.9rem;font-weight:800;line-height:1;
}

/* ---------- 3 · Liens, boutons, étiquettes ---------- */
.tq-lien{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;
  font-weight:600;color:inherit;
  text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px;
  background:none;border:0;padding:0;cursor:pointer;font-size:inherit;
}
.tq-lien:hover{text-decoration-thickness:4px;}
.tq-lien.fort{color:var(--bleu-fonce);font-weight:700;}
.tq-lien.actif{text-decoration-thickness:4px;text-decoration-color:var(--jaune);}
.tq-lien svg{flex:0 0 auto;}

.tq-bouton{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:44px;padding:14px 24px;
  border:0;border-radius:4px;
  font-weight:700;font-size:1.08rem;line-height:1.2;
  text-decoration:none;cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease;
}
.tq-bouton:hover{transform:translate(2px,2px);}
.tq-bouton:active{transform:translate(4px,4px);}
.tq-bouton svg{flex:0 0 auto;}
.tq-bouton.jaune{background:var(--jaune);color:var(--encre);box-shadow:5px 5px 0 var(--encre);}
.tq-bouton.jaune:hover{box-shadow:3px 3px 0 var(--encre);}
.tq-bouton.jaune:active{box-shadow:1px 1px 0 var(--encre);}
.tq-bouton.encre{background:var(--encre);color:#fff;box-shadow:5px 5px 0 var(--bleu);}
.tq-bouton.encre:hover{box-shadow:3px 3px 0 var(--bleu);}
.tq-bouton.encre:active{box-shadow:1px 1px 0 var(--bleu);}
.tq-bouton.blanc{background:#fff;color:var(--encre);box-shadow:inset 0 0 0 2px var(--encre), 5px 5px 0 var(--encre);}
.tq-bouton.blanc:hover{box-shadow:inset 0 0 0 2px var(--encre), 3px 3px 0 var(--encre);}
.tq-bouton.blanc:active{box-shadow:inset 0 0 0 2px var(--encre), 1px 1px 0 var(--encre);}
.tq-bouton.mini{padding:9px 15px;font-size:1rem;}
.tq-bouton.mini.jaune{box-shadow:3px 3px 0 var(--encre);}
.tq-bouton.mini.blanc{box-shadow:inset 0 0 0 2px var(--encre), 3px 3px 0 var(--encre);}
.tq-bouton.mini:hover{transform:translate(1px,1px);}
.tq-bouton.large{width:100%;}
.tq-bouton[disabled]{opacity:.55;cursor:not-allowed;transform:none;}

/* Le petit repère jaune penché */
.tq-repere{
  display:inline-flex;align-items:center;align-self:flex-start;
  padding:5px 12px;border-radius:3px;
  background:var(--jaune);color:var(--encre);
  font-weight:700;font-size:1rem;line-height:1.3;
  box-shadow:3px 4px 0 var(--encre);
  transform:rotate(-2deg);
}
/* Une mention posée à plat : bord d'encre, fond blanc */
.tq-mot{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 9px;border-radius:3px;
  background:#fff;color:var(--encre);
  font-size:.88rem;font-weight:700;line-height:1.35;
  box-shadow:inset 0 0 0 1.5px var(--encre);
}
.tq-mot.bleu{background:var(--bleu);color:#fff;box-shadow:none;}
.tq-mot.vert{background:var(--vert);color:#fff;box-shadow:none;}
.tq-genre{color:var(--bleu-fonce);font-weight:600;}

/* ---------- 4 · Catalogue ---------- */
.tq-tete{display:flex;flex-direction:column;gap:18px;max-width:48rem;}
.tq-tete h1{font-size:clamp(2.4rem,6.4vw,4.6rem);line-height:.97;letter-spacing:-.035em;}
.tq-tete p{color:var(--gris);font-size:1.2rem;max-width:42rem;}

/* Le pass : un cadre bordé de bleu sur ombre jaune */
.tq-pass{
  display:flex;flex-wrap:wrap;align-items:center;gap:22px 44px;
  margin-right:12px;padding:clamp(22px,3.4vw,36px);
  background:#fff;border:2px solid var(--bleu);
  box-shadow:12px 12px 0 var(--jaune);
}
.tq-pass-txt{flex:1 1 380px;min-width:0;display:flex;flex-direction:column;gap:12px;}
.tq-pass-txt h2{font-size:clamp(1.7rem,3.6vw,2.6rem);}
.tq-pass-txt p{color:var(--gris);}
.tq-pass-txt strong{color:var(--encre);}
.tq-pass-prix{display:flex;flex-direction:column;align-items:flex-start;gap:14px;}
.tq-prix-grand{font-weight:800;font-size:clamp(2.4rem,5vw,3.4rem);line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums;white-space:nowrap;}
.tq-prix-grand small{display:block;margin-top:8px;font-size:1rem;font-weight:600;letter-spacing:0;color:var(--gris);}
.tq-barre-prix{color:var(--gris);text-decoration:line-through;text-decoration-thickness:2px;font-weight:600;white-space:nowrap;}

/* Filtres : des étiquettes à plat, la choisie devient jaune et penche */
.tq-filtres{display:flex;gap:10px;flex-wrap:wrap;}
.tq-filtre{
  border:2px solid var(--encre);background:#fff;color:var(--encre);
  font-size:.98rem;font-weight:700;padding:7px 14px;border-radius:3px;cursor:pointer;
  transition:background .12s ease, transform .12s ease;
}
.tq-filtre:hover{background:var(--jaune);}
.tq-filtre.on{background:var(--jaune);box-shadow:3px 4px 0 var(--encre);transform:rotate(-2deg);}

.tq-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:38px 32px;}

/* Une carte : elle se clique, donc ombre d'encre */
.tq-carte{
  display:flex;flex-direction:column;min-width:0;
  background:#fff;border:2px solid var(--encre);border-radius:4px;
  box-shadow:5px 5px 0 var(--encre);
}
.tq-carte[hidden]{display:none;}
.tq-vue{
  position:relative;display:block;aspect-ratio:16 / 10;overflow:hidden;
  border-bottom:2px solid var(--encre);border-radius:2px 2px 0 0;
  background-color:var(--cadre);
  background-image:repeating-linear-gradient(135deg, rgba(36,69,154,.14) 0 2px, transparent 2px 16px);
  text-decoration:none;color:var(--encre);
}
.tq-vue img{width:100%;height:100%;object-fit:cover;object-position:top center;}
/* Sans image : une planche typographique, pas un trou */
.tq-planche{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:18px;text-align:center;}
.tq-planche b{padding:7px 14px;background:#fff;color:var(--encre);font-weight:800;font-size:clamp(1.4rem,3vw,2rem);line-height:1;letter-spacing:-.04em;overflow-wrap:anywhere;box-shadow:4px 4px 0 var(--encre);}
.tq-planche span{padding:4px 11px;background:var(--bleu);color:#fff;font-size:.95rem;font-weight:600;}
.tq-vue .tq-prix{
  position:absolute;top:12px;right:12px;
  padding:5px 12px;border-radius:3px;
  background:var(--jaune);color:var(--encre);
  font-weight:800;font-size:1.1rem;line-height:1.2;font-variant-numeric:tabular-nums;
  box-shadow:3px 4px 0 var(--encre);transform:rotate(2deg);
}
.tq-vue .tq-voir{
  position:absolute;left:0;bottom:0;
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 13px;background:var(--encre);color:#fff;font-size:.95rem;font-weight:700;
}
.tq-carte-corps{display:flex;flex-direction:column;gap:12px;flex:1;padding:20px;}
.tq-carte-corps h3{font-size:1.55rem;line-height:1.05;letter-spacing:-.025em;}
.tq-carte-corps h3 a{text-decoration:none;}
.tq-carte-corps h3 a:hover{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:5px;}
.tq-carte-corps > p{color:var(--gris);font-size:1rem;}
.tq-mots{display:flex;flex-wrap:wrap;gap:7px;}
.tq-carte-bas{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:auto;padding-top:14px;border-top:2px solid var(--encre);}
.tq-carte-bas form{margin:0;}
.tq-carte-bas .tq-lien{margin-left:auto;}

.tq-vide{padding:56px 20px;text-align:center;color:var(--gris);font-size:1.15rem;border:2px dashed var(--filet);border-radius:4px;background:#fff;}
.tq-vide strong{display:block;margin-bottom:8px;color:var(--encre);font-size:1.5rem;font-weight:800;letter-spacing:-.02em;}

/* ---------- 5 · Fiche d'un template ---------- */
.tq-fiche{display:flex;flex-wrap:wrap;align-items:flex-start;gap:44px 64px;}
/* Le grand cadre : bord bleu, ombre jaune, posé légèrement de travers */
.tq-cadre{
  position:relative;flex:1 1 480px;min-width:0;display:block;
  aspect-ratio:16 / 10;overflow:hidden;
  border:2px solid var(--bleu);
  background-color:var(--cadre);
  background-image:repeating-linear-gradient(135deg, rgba(36,69,154,.14) 0 2px, transparent 2px 16px);
  box-shadow:10px 10px 0 var(--jaune);
  transform:rotate(-.8deg);
  margin:6px 12px 12px 4px;
  text-decoration:none;color:var(--encre);
  transition:transform .15s ease, box-shadow .15s ease;
}
a.tq-cadre:hover{box-shadow:6px 6px 0 var(--jaune);transform:rotate(0deg) translate(2px,2px);}
.tq-cadre img{width:100%;height:100%;object-fit:cover;object-position:top center;}
.tq-cadre .tq-voir{position:absolute;left:0;bottom:0;display:inline-flex;align-items:center;gap:8px;padding:9px 15px;background:var(--jaune);color:var(--encre);font-weight:700;}
.tq-fiche-txt{flex:1 1 360px;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:16px;}
.tq-fiche-txt h1{font-size:clamp(2.2rem,5vw,3.6rem);overflow-wrap:anywhere;}
.tq-fiche-txt > p:not([class]){color:var(--gris);font-size:1.15rem;max-width:34rem;}
.tq-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 16px;}
.tq-actions form{margin:0;}
.tq-ia{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:14px 16px;background:#fff;border-left:6px solid var(--jaune);max-width:34rem;}
.tq-ia p{color:var(--gris);font-size:1rem;}
/* Liste de points : un carré jaune par ligne */
.tq-points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;}
.tq-points li{display:flex;gap:12px;align-items:flex-start;}
.tq-points li::before{content:"";flex:0 0 auto;margin-top:.5em;width:11px;height:11px;border-radius:2px;background:var(--jaune);box-shadow:2px 2px 0 var(--encre);}

.tq-feuille{background:#fff;border:2px solid var(--encre);border-radius:4px;padding:clamp(20px,3.4vw,34px);}
.tq-feuille h2{font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:16px;}
.tq-feuille .tq-texte{color:var(--gris);max-width:70ch;white-space:pre-line;}
.tq-versions{list-style:none;margin:0;padding:0;}
.tq-versions li{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px 22px;padding:16px 0;border-top:2px solid var(--encre);}
.tq-versions li:first-child{border-top:0;padding-top:0;}
.tq-versions .v-num{flex:0 0 auto;min-width:92px;font-weight:800;font-size:1.3rem;letter-spacing:-.02em;line-height:1.2;}
.tq-versions .v-txt{flex:1 1 260px;min-width:0;color:var(--gris);}
.tq-versions .v-txt small{display:block;color:var(--encre);font-size:.95rem;font-weight:600;}
.tq-versions .v-notes{white-space:pre-line;}

/* ---------- 6 · Panier ---------- */
.tq-panier{display:flex;flex-wrap:wrap;align-items:flex-start;gap:36px 48px;}
.tq-panier-liste{flex:1 1 520px;min-width:0;}
.tq-ligne{display:flex;align-items:center;gap:16px 20px;flex-wrap:wrap;padding:18px 0;border-top:2px solid var(--encre);}
.tq-ligne:first-child{border-top:0;padding-top:0;}
.tq-ligne .tq-vignette{flex:0 0 132px;aspect-ratio:16 / 10;position:relative;overflow:hidden;border:2px solid var(--encre);background-color:var(--cadre);
  background-image:repeating-linear-gradient(135deg, rgba(36,69,154,.14) 0 2px, transparent 2px 16px);}
.tq-ligne .tq-vignette img{width:100%;height:100%;object-fit:cover;object-position:top center;}
/* Dans une vignette, la planche typographique se réduit au seul nom */
.tq-ligne .tq-vignette .tq-planche{padding:6px;}
.tq-ligne .tq-vignette .tq-planche b{padding:3px 6px;font-size:.78rem;line-height:1.15;letter-spacing:-.01em;box-shadow:2px 2px 0 var(--encre);}
.tq-ligne .tq-vignette .tq-planche span{display:none;}
.tq-ligne .tq-vignette.pass{display:flex;align-items:center;justify-content:center;background:var(--bleu);background-image:var(--grille);background-size:18px 18px;color:var(--jaune);}
.tq-ligne-txt{flex:1 1 220px;min-width:0;display:flex;flex-direction:column;gap:6px;}
.tq-ligne-txt b{font-weight:800;font-size:1.25rem;letter-spacing:-.02em;line-height:1.15;overflow-wrap:anywhere;}
.tq-ligne-txt span{color:var(--gris);font-size:.98rem;}
.tq-ligne-prix{font-weight:800;font-size:1.35rem;letter-spacing:-.02em;white-space:nowrap;font-variant-numeric:tabular-nums;}
.tq-ligne form{margin:0;}
.tq-total{
  flex:1 1 320px;max-width:440px;min-width:0;
  display:flex;flex-direction:column;gap:16px;
  margin-right:10px;padding:24px;
  background:#fff;border:2px solid var(--bleu);box-shadow:10px 10px 0 var(--jaune);
}
.tq-total h2{font-size:1.6rem;}
.tq-cote{display:flex;align-items:baseline;gap:12px;}
.tq-cote span:first-child{font-weight:600;color:var(--gris);white-space:nowrap;}
.tq-cote i{flex:1 1 20px;min-width:14px;border-bottom:3px dotted var(--filet);transform:translateY(-5px);}
.tq-cote b{font-weight:800;font-size:2.1rem;line-height:1;letter-spacing:-.035em;white-space:nowrap;font-variant-numeric:tabular-nums;}
.tq-total p{color:var(--gris);font-size:.98rem;}
.tq-accord{display:flex;gap:12px;align-items:flex-start;padding:14px;background:var(--papier);border-left:6px solid var(--jaune);font-size:.98rem;color:var(--encre);cursor:pointer;}
.tq-accord input{flex:0 0 auto;width:22px;height:22px;margin:2px 0 0;accent-color:var(--bleu);cursor:pointer;}

/* ---------- 7 · Messages ---------- */
.tq-avis{padding:13px 16px;background:#fff;border-left:6px solid var(--bleu);font-weight:600;}
.tq-avis.ok{border-left-color:var(--vert);}
.tq-avis.erreur{border-left-color:var(--rouge);}
.tq-avis + .tq-avis{margin-top:10px;}

/* ---------- 8 · Pied de page d'encre ---------- */
.tq-pied{padding:34px 24px;text-align:center;background:var(--encre);color:var(--clair);font-size:.92rem;line-height:1.7;}
.tq-pied p{margin:0 0 5px;}
.tq-pied strong{color:#fff;}
.tq-pied a{color:var(--clair);text-decoration:underline;text-underline-offset:3px;}
.tq-pied a:hover{color:#fff;}

@media (max-width:640px){
  .tq-barre{padding:10px 16px;}
  .tq-menu{order:3;flex-basis:100%;}
  .tq-corps{padding-left:16px;padding-right:16px;}
  .tq-pass,.tq-total{margin-right:8px;box-shadow:8px 8px 0 var(--jaune);}
  .tq-cadre{margin-right:10px;box-shadow:8px 8px 0 var(--jaune);}
  .tq-ligne .tq-vignette{flex-basis:104px;}
  .tq-carte-bas .tq-lien{margin-left:0;}
}
@media (prefers-reduced-motion:reduce){
  .tq-bouton,.tq-cadre,.tq-filtre{transition:none;}
}