/* ============================================================
   Cuizio — cuizio.fr
   Thème propre : terracotta/brique (#B0472A) + moutarde chaude
   (#D9A441), fond creme — identite "cuisine du quotidien",
   distincte d'Aerioss (bleu/orange), Noctura (violet/beige) et
   Pedalix (vert foret). Revu le 16/07/2026 apres retour d'Aubin.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --primary:      #B0472A;
  --primary-dark: #8A3620;
  --primary-light:#FBEAE4;
  --accent:    #D9A441;
  --accent-light: #FBF1DC;
  --text:      #2B1F18;
  --text-muted:#7A6A5D;
  --bg:        #FFFBF6;
  --surface:   #FFFFFF;
  --border:    #EDDDD0;
  --radius:    8px;
  --shadow:    0 2px 12px rgba(176,71,42,.12);
  --max-w:     860px;
}

/* Verrou anti-scroll-horizontal (16/07/2026) : quel que soit l'element qui
   deborderait (mot trop long, badge, futur ajout de contenu...), la page ne
   doit jamais pouvoir se deplacer horizontalement sur mobile. Les elements
   qui ont vraiment besoin de scroller (tables, cf. regle .page-content table
   plus bas) restent scrollables sur eux-memes malgre ce verrou. */
html { overflow-x: hidden; }
body { max-width: 100%; }

html { scroll-behavior: smooth; }
body {
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  background:var(--bg); color:var(--text); line-height:1.7; font-size:1rem;
}
/* Titres en serif chaud (chartes systeme, aucune police externe a charger) :
   registre "carnet de recettes" volontairement different du sans-serif tout
   plat d'Aerioss - lisible, pas de FOUC, pas de requete externe. */
h1, h2, h3, .site-logo, .card-name, .card-rank {
  font-family: Georgia, "Iowan Old Style", Charter, "Noto Serif", serif;
}

/* ── Layout ── */
.page-wrapper { display:flex; flex-direction:column; min-height:100vh; }
.page-main    { flex:1; max-width:780px; margin:0 auto; padding:1.75rem 1.25rem 3.5rem; width:100%; }

/* ── Header ── */
.site-header  { background:var(--surface); border-bottom:3px solid var(--primary); position:sticky; top:0; z-index:100; }
.header-inner { max-width:780px; margin:0 auto; padding:.85rem 1.25rem; display:flex; align-items:center; gap:2rem; flex-wrap:wrap; }
.site-logo    { display:flex; align-items:center; gap:.5rem; text-decoration:none; font-size:1.4rem; font-weight:700; color:var(--primary); }
.logo-icon    { font-size:1.5rem; }
.site-nav     { display:flex; gap:1.5rem; flex-wrap:wrap; }
.site-nav a   { text-decoration:none; color:var(--text-muted); font-size:.88rem; font-weight:600; letter-spacing:.02em; text-transform:uppercase; padding-bottom:.2rem; border-bottom:2px solid transparent; transition:border-color .15s,color .15s; }
.site-nav a:hover { color:var(--primary); border-bottom-color:var(--accent); }

/* ── Breadcrumb ── */
.breadcrumb   { font-size:.82rem; color:var(--text-muted); margin-bottom:1.5rem; display:flex; flex-wrap:wrap; gap:.25rem; align-items:center; }
.breadcrumb a { color:var(--primary); text-decoration:none; }
.breadcrumb a:hover { text-decoration:underline; }
.breadcrumb span[aria-hidden] { color:var(--border); margin:0 .15rem; }

/* ── Hero ── */
.hero-section   { margin-bottom:1.5rem; padding-bottom:1.25rem; border-bottom:1px dashed var(--border); }
.hero-title     { font-size:2rem; font-weight:700; line-height:1.18; color:var(--text); margin-bottom:.85rem; }
.hero-intro     { font-size:1.08rem; color:var(--text-muted); max-width:65ch; }
.hero-meta      { margin-top:.85rem; font-size:.82rem; color:var(--text-muted); display:flex; gap:.75rem; flex-wrap:wrap; align-items:center; }
.hero-meta .a-byline a { color:var(--primary); font-weight:600; text-decoration:none; }
.hero-meta .a-byline a:hover { text-decoration:underline; }

/* ── Verdict box : "carte de reponse rapide", pas un bloc labo ── */
.verdict-box    {
  background:var(--surface); border:1px solid var(--border); border-left:5px solid var(--accent);
  border-radius:2px 12px 12px 2px; padding:1.2rem 1.5rem; margin-bottom:2.25rem;
  box-shadow:var(--shadow);
}
.verdict-label  {
  display:inline-flex; align-items:center; gap:.35rem; font-size:.72rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.06em; color:var(--accent-dark, var(--primary));
  background:var(--accent-light); padding:.2rem .6rem; border-radius:999px; margin-bottom:.6rem;
}
.verdict-label::before { content:"🍳"; font-size:.85rem; }
.verdict-text   { font-size:1rem; line-height:1.65; }

.verdict-produit .verdict-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:.5rem; }
.verdict-score-global { display:flex; align-items:baseline; gap:.1rem; }
.score-number   { font-size:2rem; font-weight:900; color:var(--primary); }
.score-denom    { font-size:1rem; color:var(--text-muted); }
.btn-verdict    { display:inline-block; margin-top:.9rem; }

/* ── Picks / cards : hierarchie "podium", le n°1 se voit vraiment ──
   different du grid a poids egal d'Aerioss - guide l'oeil vers le meilleur
   choix plutot que de presenter 3 cartes identiques. */
.picks-section  { margin-bottom:2.75rem; }
.products-grid  { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1.25rem; margin-top:1.1rem; align-items:start; }
.product-card   {
  background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--border);
  border-radius:4px 10px 10px 4px; padding:1.25rem 1.35rem; position:relative;
  box-shadow:var(--shadow); transition:transform .15s,box-shadow .15s;
}
.product-card:hover { transform:translateY(-2px); box-shadow:0 6px 22px rgba(176,71,42,.16); }
.product-card.card--top {
  border-left-color:var(--accent); background:var(--accent-light);
  grid-column: span 1;
  transform:scale(1.02);
}
.product-card.card--top:hover { transform:scale(1.02) translateY(-2px); }
.card-rank {
  position:absolute; top:-.6rem; left:1rem; width:1.9rem; height:1.9rem; border-radius:50%;
  background:var(--primary); color:#fff; font-size:.9rem; font-weight:700;
  display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(0,0,0,.2);
}
.card--top .card-rank { background:var(--accent); }
.card-badge     {
  display:inline-block; background:transparent; color:var(--accent-dark, var(--primary));
  font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  margin-bottom:.5rem; margin-top:.35rem;
}
/* Visuel produit (03/09/2026) — image officielle servie par Amazon.
   Fond clair et objet entier (contain) : les photos Amazon sont detourees sur
   blanc, un recadrage couperait le produit. Hauteur fixe = grille reguliere. */
.card-media {
  background:#fff; border:1px solid var(--border); border-radius:8px;
  margin:.35rem 0 .8rem; padding:.6rem; display:flex; align-items:center;
  justify-content:center; height:150px; overflow:hidden;
}
.card-media img { max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block; }
.card--top .card-media { height:170px; }
@media (max-width:480px) { .card-media { height:130px; } }

.card-header    { display:flex; justify-content:space-between; align-items:flex-start; gap:.5rem; margin-bottom:.5rem; }
.card-name      { font-weight:700; font-size:1rem; line-height:1.3; }
.card-score     { font-size:.88rem; font-weight:700; color:var(--primary); white-space:nowrap; }
.card-desc      { font-size:.85rem; color:var(--text-muted); margin-bottom:.6rem; }
.card-note      { font-size:.75rem; color:var(--text-muted); margin:.4rem 0 0; font-style:italic; }
.card-price     { font-size:1rem; font-weight:800; color:var(--text); margin-bottom:.85rem; }
.card-ctas      { display:flex; gap:.5rem; flex-wrap:wrap; }

/* ── Buttons : pilule, different des rectangles arrondis d'Aerioss ── */
.btn-buy, .btn-details {
  display:inline-block; padding:.6rem 1.25rem; border-radius:999px;
  font-size:.86rem; font-weight:700; text-decoration:none; text-align:center;
  transition:opacity .15s,transform .15s;
}
.btn-buy      { background:var(--accent); color:#3A2400; }
.btn-buy:hover { opacity:.9; transform:translateY(-1px); }
.btn-details  { background:transparent; color:var(--primary); border:1.5px solid var(--primary); }
.btn-details:hover { background:var(--primary); color:#fff; }
.btn-large    { font-size:1rem; padding:.8rem 1.7rem; }

/* ── Scores barres ── */
.scores-section { margin-bottom:2rem; }
.scores-grid    { display:flex; flex-direction:column; gap:.7rem; margin-top:.75rem; }
.rating-bar     { display:grid; grid-template-columns:180px 1fr 60px; align-items:center; gap:.6rem; }
.rating-label   { font-size:.875rem; color:var(--text); }
.bar-track      { height:8px; background:var(--border); border-radius:4px; overflow:hidden; }
.bar-fill       { height:100%; background:var(--primary); border-radius:4px; transition:width .3s ease; }
.bar-fill.bar-energie { background:#27AE60; }
.bar-fill.bar-prix    { background:var(--accent); }
.rating-value   { font-size:.85rem; font-weight:700; color:var(--text-muted); }

/* ── Pour qui / Pas pour qui ── */
.pour-qui-section { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:2rem; }
.pour-qui-bloc  { border-radius:10px; padding:1.1rem 1.3rem; }
.pour-qui-bloc.pour   { background:#EFF7EF; border:1px solid #BFDCC0; }
.pour-qui-bloc.pas-pour { background:#FBEFEA; border:1px solid #E8C7B8; }
.pour-qui-title { font-size:.9rem; font-weight:700; margin-bottom:.6rem; font-family:Georgia,serif; }
.pour-title     { color:#2E7D4F; }
.pas-title      { color:#A8461E; }
.pour-qui-list  { list-style:none; padding:0; }
.pour-qui-list li { font-size:.875rem; padding:.25rem 0; padding-left:1.25rem; position:relative; }
.pour-qui-list li::before { content:"✓"; position:absolute; left:0; }
.pour-qui-bloc.pour .pour-qui-list li::before { color:#2E7D4F; }
.pour-qui-bloc.pas-pour .pour-qui-list li::before { content:"✗"; color:#A8461E; }

/* ── Tableaux : specs-table (Aerioss) + tables brutes du main_content (Cuizio,
   62 tableaux comparatifs) - meme habillage chaleureux pour les deux. ── */
.specs-section  { margin-bottom:2rem; }
.specs-table,
.page-content table,
.article-content table {
  width:100%; border-collapse:separate; border-spacing:0; font-size:.88rem;
  border:1px solid var(--border); border-radius:10px; overflow:hidden;
}
.specs-table th, .specs-table td,
.page-content table th, .page-content table td,
.article-content table th, .article-content table td {
  padding:.65rem .85rem; border-bottom:1px solid var(--border); text-align:left; vertical-align:top;
}
.specs-table th,
.page-content table th,
.article-content table th {
  background:var(--primary); font-weight:700; color:#fff; font-size:.82rem;
  text-transform:uppercase; letter-spacing:.03em;
}
.specs-table tr:last-child td,
.page-content table tr:last-child td,
.article-content table tr:last-child td { border-bottom:none; }
.specs-table tr:nth-child(even) td,
.page-content table tr:nth-child(even) td,
.article-content table tr:nth-child(even) td { background:#FBF6EF; }

/* ── Contenu éditorial ── */
.page-content,
.article-content { margin-bottom:2.5rem; }
.page-content h2,
.article-content h2 {
  font-size:1.4rem; font-weight:700; margin:2.25rem 0 .85rem; color:var(--text);
  padding-left:.85rem; border-left:4px solid var(--accent);
}
.page-content h3,
.article-content h3 { font-size:1.12rem; font-weight:700; margin:1.5rem 0 .5rem; color:var(--primary-dark); }
.page-content p,
.article-content p  { margin-bottom:1rem; }
.page-content ul,
.page-content ol,
.article-content ul,
.article-content ol { margin:0 0 1rem 1.4rem; }
.page-content li,
.article-content li { margin-bottom:.35rem; }
.page-content strong,
.article-content strong { color:var(--text); }
.page-content a,
.article-content a  { color:var(--primary); text-decoration:underline; text-underline-offset:2px; }

/* ── Pages statiques (homepage, about…) ── */
.home-section   { margin-bottom:2.5rem; }
.section-intro  { color:var(--text-muted); margin-bottom:1.25rem; }

/* ── Breadcrumb sémantique (ol/li) ── */
.breadcrumb ol  { list-style:none; display:flex; flex-wrap:wrap; gap:.25rem; align-items:center; padding:0; margin:0; }
.breadcrumb li  { display:flex; align-items:center; gap:.25rem; }
.breadcrumb li + li::before { content:"›"; color:var(--border); margin-right:.15rem; }

/* Section titles (hors page-content) */
.section-title  { font-size:1.25rem; font-weight:700; margin-bottom:1rem; }

/* ── CTA block ── */
.cta-section    { text-align:center; margin:2rem 0; }
.cta-legal      { font-size:.78rem; color:var(--text-muted); margin-top:.5rem; }

/* ── Liens internes ── */
.related-section { margin-bottom:2rem; }
.related-list   { list-style:none; padding:0; display:flex; flex-direction:column; gap:.4rem; }
.related-list li { font-size:.9rem; }
.related-list a  { color:var(--primary); text-decoration:none; font-weight:500; }
.related-list a:hover { text-decoration:underline; }
.link-desc      { color:var(--text-muted); font-size:.85rem; }

/* ── FAQ ── */
.faq-section    { margin-bottom:2.5rem; }
.faq-item       { border:1px solid var(--border); border-radius:var(--radius); margin-bottom:.5rem; overflow:hidden; background:var(--surface); }
.faq-question   { list-style:none; padding:.85rem 1.1rem; font-weight:600; font-size:.95rem; cursor:pointer; display:flex; justify-content:space-between; align-items:center; }
.faq-question::after { content:"▸"; font-size:.8rem; color:var(--primary); transition:transform .2s; flex-shrink:0; }
details[open] .faq-question::after { transform:rotate(90deg); }
.faq-answer     { padding:.75rem 1.1rem 1rem; font-size:.9rem; border-top:1px solid var(--border); }

/* ── Cookie banner ── */
.cookie-banner  { position:fixed; bottom:0; left:0; right:0; background:var(--surface); border-top:1px solid var(--border); padding:1rem 1.25rem; display:flex; align-items:center; gap:1rem; flex-wrap:wrap; z-index:200; box-shadow:0 -2px 12px rgba(0,0,0,.08); }
.cookie-banner p { font-size:.87rem; flex:1; min-width:200px; }
.cookie-banner a { color:var(--primary); }
.cookie-actions { display:flex; gap:.6rem; }
.btn-cookie     { padding:.4rem .9rem; border-radius:5px; font-size:.85rem; font-weight:600; cursor:pointer; border:none; }
.btn-accept     { background:var(--primary); color:#fff; }
.btn-refuse     { background:var(--primary-light); color:var(--primary); border:1px solid var(--primary); }

/* ── Footer ── */
.site-footer    { background:var(--text); color:#CBD5E1; margin-top:auto; }
.footer-inner   { max-width:var(--max-w); margin:0 auto; padding:2rem 1.25rem; }
.footer-brand   { font-size:.95rem; margin-bottom:.75rem; }
.footer-brand strong { color:#fff; }
.footer-nav     { display:flex; gap:1.25rem; flex-wrap:wrap; margin-bottom:.9rem; }
.footer-nav a   { color:#94A3B8; text-decoration:none; font-size:.88rem; }
.footer-nav a:hover { color:#fff; }
.footer-legal   { font-size:.78rem; color:#64748B; line-height:1.6; }
.footer-legal a { color:#94A3B8; }

/* ── Tables : scroll horizontal plutot que deborder toute la page (mobile) ──
   Ajoute le 16/07/2026 suite au garde-fou "audit_responsive_layout" : les
   tableaux comparatifs (5+ colonnes) du main_content debordaient sur un
   ecran de telephone sans cette regle. */
.page-content table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* ── Responsive ── */
@media (max-width:680px) {
  .hero-title       { font-size:1.5rem; }
  .products-grid    { grid-template-columns:1fr; }
  .pour-qui-section { grid-template-columns:1fr; }
  .rating-bar       { grid-template-columns:1fr 1fr; grid-template-rows:auto auto; }
  .rating-label     { grid-column:1/-1; }
  .site-nav         { gap:.75rem; }
}

@media print {
  .site-header, .cookie-banner, .site-footer { display:none; }
  .page-main { max-width:100%; }
}

/* Mention de releve des prix (29/07/2026) — un prix sans date se lit comme un prix actuel */
.prix-note{margin:1.8rem 0;padding:.9rem 1.1rem;border-left:3px solid #d9d3c7;background:#faf8f4;font-size:.93rem;line-height:1.6;color:#55504a;border-radius:0 6px 6px 0}


/* ── LISIBILITE SUR ORDINATEUR + BANDEAU COOKIES (09/08/2026) ──────────────
   1. Largeur du texte. Mesure du 09/08 sur un ecran de 1280 px : 93
      caracteres par ligne, alors que le confort de lecture est entre 60 et 90.
      Au-dela, l'oeil perd le debut de la ligne suivante et le lecteur decroche.
      On borne le TEXTE seulement : tableaux, grilles de cartes et images
      gardent toute la largeur.
   2. Bandeau cookies. Mesure du 09/08 : avec la barre du haut, il occupait
      jusqu'a 24 % de l'ecran d'un telephone (mesure sur Cuizio : 71 + 126 px
      sur 812). Il disparait des qu'on repond, mais il s'affiche a CHAQUE
      nouveau visiteur venu de Google -- donc a presque tout le monde
      aujourd'hui. On le rend plus compact sur petit ecran, sans jamais
      rapetisser les boutons (ils doivent rester attrapables au doigt).   */
.page-content > p,
.page-content > ul,
.page-content > ol { max-width: 78ch; }
@media (max-width: 768px) {
  .cookie-banner { padding: .55rem .8rem !important; gap: .45rem .7rem !important; }
  .cookie-banner p { font-size: .76rem !important; line-height: 1.35 !important; min-width: 0 !important; }
  #bandeau-cookies { padding: 8px 12px !important; gap: 8px !important;
                     font-size: 12.5px !important; line-height: 1.35 !important; }
}

/* Boutons du bandeau cookies : 40 px de haut minimum sur telephone (09/08/2026).
   Ils faisaient 30 px -- trop petit pour un doigt. Compacter le bandeau ne doit
   jamais se payer sur la facilite a repondre. */
@media (max-width:768px){
 .btn-cookie,
 .cookie-banner button,
 .cookie-banner a.btn,
 #bandeau-cookies button{min-height:40px !important;padding-top:0 !important;padding-bottom:0 !important}
}

/* ── CONFORT AU DOIGT (10/08/2026) ─────────────────────────────────────────
   Mesure sur un ecran de telephone : les liens de navigation faisaient 17 a
   31 px de haut (menus, pieds de page, fils d'Ariane, sommaires, listes
   « a lire aussi »), alors qu'un doigt a besoin d'environ 40 px pour viser
   sans se tromper. On ajoute de la ZONE DE CLIC autour du lien -- pas de la
   taille de texte : la mise en page et la longueur des lignes ne bougent pas.
   Les liens ecrits DANS une phrase sont volontairement exclus : les grossir
   casserait le texte, et on ne vise pas un mot au milieu d'un paragraphe
   comme on vise un bouton.                                                 */
@media (max-width:768px){
 nav a,
 footer a,
 .fil a, .breadcrumb a, [class*="ariane"] a,
 [class*="sommaire"] a, [class*="toc"] a,
 [class*="related"] li > a,
 [class*="list"] li > a,
 [class*="liste"] li > a,
 li > a:only-child{
   display:inline-block;
   padding-top:10px;
   padding-bottom:10px;
 }
}