/* ============================================================
   CUISINOVORES : la table de conversion.

   Douze tableaux là où il y avait dix images. Toute la difficulté est
   dans la largeur : le visiteur est sur un téléphone, souvent un vieux,
   et le plus étroit encore en circulation fait trois cent quarante
   pixels. Onze tableaux sur douze n'ont que deux colonnes et y tiennent.
   Le douzième en a quatre, il bascule en fiches empilées.

   Aucune couleur en dur : le thème sombre suit tout seul par les jetons.
   ============================================================ */

/* ---------- Le texte d'Allison ---------- */
.cuisi-conv__intro{max-width:62ch}
.cuisi-conv__intro p{margin:0 0 var(--sp-3);color:var(--ink-2);font-size:var(--t-md)}
.cuisi-conv__intro p:last-child{margin-bottom:0}
.cuisi-conv__intro strong{color:var(--ink)}

/* ---------- Sommaire ----------
   Trois liens d'ancre. Ils font la hauteur d'une cible tactile, sinon on
   les rate une fois sur deux avec le pouce. */
.cuisi-conv__somm{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-5)}
.cuisi-conv__somm a{display:inline-flex;align-items:center;min-height:var(--tap);
  padding:0 var(--sp-4);border-radius:var(--r-pill);
  background:var(--card);border:1px solid var(--line-2);
  color:var(--ink);font-size:var(--t-s);font-weight:800}
@media (hover:hover) and (pointer:fine){
  .cuisi-conv__somm a:hover{border-color:var(--accent);color:var(--accent)}
}

/* ---------- Le filtre ----------
   Découvert par le script seulement. Le sélecteur d'attribut suffit :
   pas de classe à poser côté PHP pour un état qui n'existe qu'avec lui. */
.cuisi-conv__rech{display:flex;align-items:center;gap:var(--sp-3);
  min-height:56px;margin-top:var(--sp-4);padding:0 var(--sp-4);
  max-width:560px;border-radius:var(--r-pill);
  background:var(--card);border:1px solid var(--line-2);color:var(--ink)}
.cuisi-conv__rech[hidden]{display:none}
.cuisi-conv__rech-ic{flex:none;display:grid;place-items:center;color:var(--ink-3)}
.cuisi-conv__rech-ic svg{fill:none;stroke:currentColor}
.cuisi-conv__rech input{flex:1;min-width:0;height:54px;border:0;background:none;outline:none;
  font-size:var(--t-base);color:var(--ink)}
/* Chrome et Safari posent leur propre croix dans un champ de recherche.
   Elle fait douze pixels et ne se style pas : la nôtre la remplace. */
.cuisi-conv__rech input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.cuisi-conv__rech input::placeholder{color:var(--ink-3)}
.cuisi-conv__vider{flex:none;display:grid;place-items:center;
  width:var(--tap);height:var(--tap);margin-right:calc(var(--sp-2) * -1);
  border-radius:var(--r-pill);color:var(--ink-3)}
.cuisi-conv__vider svg{fill:none;stroke:currentColor}
.cuisi-conv__vider[hidden]{display:none}

.cuisi-conv__etat{margin:var(--sp-3) 0 0;font-size:var(--t-s);color:var(--ink-2)}
.cuisi-conv__etat[hidden]{display:none}

/* ---------- Une partie ---------- */
.cuisi-conv__sec{padding-top:var(--sp-7);scroll-margin-top:calc(var(--hdr) + var(--sp-3))}
.cuisi-conv__sec[hidden]{display:none}
.cuisi-conv__sec-titre{font-size:var(--t-2xl);margin-bottom:var(--sp-5)}
.cuisi-conv__grille{display:grid;gap:var(--sp-5)}

/* ---------- Un tableau ---------- */
.cuisi-conv__bloc{padding:var(--sp-4);background:var(--card);
  border:1px solid var(--line-2);border-radius:var(--r-l);box-shadow:var(--shadow-1)}
.cuisi-conv__bloc[hidden]{display:none}

/* Largeur des colonnes laissée au navigateur : les libellés vont de « Eau »
   à « 1 morceau de sucre (N°4) », aucune répartition fixe ne convient aux
   douze tableaux à la fois. La coupe posée plus bas empêche le débordement. */
.cuisi-conv__t{width:100%;border-collapse:collapse;table-layout:auto}
.cuisi-conv__t caption{text-align:left;margin-bottom:var(--sp-3)}
.cuisi-conv__cap{display:block;font-size:var(--t-lg);font-weight:800;
  letter-spacing:-.02em;color:var(--ink)}
.cuisi-conv__note{display:block;margin-top:var(--sp-1);font-size:var(--t-xs);color:var(--ink-2)}

.cuisi-conv__t th,.cuisi-conv__t td{
  padding:10px var(--sp-2);text-align:left;font-size:var(--t-s);
  /* Les valeurs sont courtes mais « 1 morceau de sucre (N°4) » ne l'est pas :
     sans cette coupe, elle poussait la colonne au-delà du bloc. */
  overflow-wrap:anywhere}
.cuisi-conv__t thead th{font-size:var(--t-xs);font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink);background:var(--accent-soft);
  padding-block:var(--sp-2)}
.cuisi-conv__t thead th:first-child{border-radius:var(--r-s) 0 0 var(--r-s)}
.cuisi-conv__t thead th:last-child{border-radius:0 var(--r-s) var(--r-s) 0}
.cuisi-conv__t tbody th{font-weight:700;color:var(--ink)}
.cuisi-conv__t tbody td{color:var(--ink-2)}
.cuisi-conv__t tbody tr{border-bottom:1px solid var(--line)}
.cuisi-conv__t tbody tr:last-child{border-bottom:0}
.cuisi-conv__t tbody tr[hidden]{display:none}

/* La dernière colonne est celle qu'on vient chercher : elle porte la valeur,
   elle est alignée à droite et en gras pour qu'on la trouve d'un coup d'œil. */
.cuisi-conv__t:not(.cuisi-conv__t--fiches) thead th:last-child,
.cuisi-conv__t:not(.cuisi-conv__t--fiches) tbody td:last-child{
  text-align:right;font-weight:800;color:var(--ink)}

/* ---------- Le tableau à quatre colonnes, sur téléphone ----------
   Quatre colonnes dans trois cents pixels utiles font soixante-quinze pixels
   par colonne : « CENTILITRE » ne rentre pas, et un tableau qui déborde
   oblige à faire glisser la page entière de côté. Chaque ligne devient donc
   une petite fiche : le litre en titre, les trois autres unités en paires
   étiquette-valeur, l'étiquette reprise de l'en-tête par data-col.

   Le changement de display efface la nature de tableau aux yeux du
   navigateur : les rôles ARIA posés dans le gabarit la rétablissent. */
@media (max-width:559px){
  /* L'en-tête sort de l'écran mais reste dans la page : le lecteur d'écran
     doit continuer d'annoncer les colonnes. Les lignes et les cellules sont
     rétrécies elles aussi, sinon elles gardent leur largeur de tableau et
     dépassent le cadre, invisibles mais bien là. */
  .cuisi-conv__t--fiches thead{position:absolute;width:1px;height:1px;
    overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .cuisi-conv__t--fiches thead tr,
  .cuisi-conv__t--fiches thead th{display:block;width:1px;height:1px;
    overflow:hidden;padding:0;margin:0}
  .cuisi-conv__t--fiches tbody,
  .cuisi-conv__t--fiches tbody tr,
  .cuisi-conv__t--fiches tbody th,
  .cuisi-conv__t--fiches tbody td{display:block}
  .cuisi-conv__t--fiches tbody tr{padding:var(--sp-3) 0}
  .cuisi-conv__t--fiches tbody tr[hidden]{display:none}
  .cuisi-conv__t--fiches tbody th{padding:0 0 var(--sp-2);
    font-size:var(--t-md);font-weight:800;color:var(--ink)}
  .cuisi-conv__t--fiches tbody td{display:flex;align-items:baseline;
    justify-content:space-between;gap:var(--sp-3);padding:3px 0}
  .cuisi-conv__t--fiches tbody td::before{content:attr(data-col);
    font-size:var(--t-xs);font-weight:800;letter-spacing:.06em;
    text-transform:uppercase;color:var(--ink-3)}
  .cuisi-conv__t--fiches tbody td{color:var(--ink);font-weight:700}
}

/* Quand plus rien ne correspond, le compteur devient le seul contenu visible
   de la page : il prend la place et le ton d'un message. */
.cuisi-conv__etat--vide{margin-top:var(--sp-5);padding:var(--sp-5);text-align:center;
  border:1px dashed var(--line-2);border-radius:var(--r-l);
  font-size:var(--t-md);color:var(--ink)}

/* ---------- Apparitions ----------
   Le filtre montre et cache des blocs : un bloc encore transparent parce
   qu'il n'est jamais passé devant l'œil apparaîtrait vide au premier mot
   tapé. Dès que le filtre sert, l'animation est désarmée. */
.cuisi-conv.is-filtre .cuisi-reveal{opacity:1;transform:none}

/* ---------- Tablette et bureau ---------- */
@media (min-width:768px){
  .cuisi-conv__bloc{padding:var(--sp-5)}
  .cuisi-conv__t th,.cuisi-conv__t td{padding:12px var(--sp-3);font-size:var(--t-base)}
  .cuisi-conv__grille{grid-template-columns:1fr 1fr}
  /* Le tableau des litres a quatre colonnes : il prend la rangée entière. */
  .cuisi-conv__bloc--large{grid-column:1 / -1}
  .cuisi-conv__sec-titre{font-size:var(--t-3xl)}
}
@media (min-width:1024px){
  .cuisi-conv__grille{grid-template-columns:repeat(3,1fr)}
  .cuisi-conv__bloc--large{grid-column:1 / -1}
}