/* ============================================================
   CUISINOVORES : l'espace membre.
   Six écrans, une colonne de lecture, les jetons du reste du
   site. Remplace les cent quatre-vingt-sept kilo-octets de
   feuilles du greffon d'adhésion par un peu moins de six.
   ============================================================ */

/* La colonne, les formulaires, les bandeaux de message et le lien de retour
   sont désormais dans cuisinovores-simple.css : la page de contact s'en sert
   aussi, et deux copies auraient fini par diverger. */

/* ---------- Ce que le compte apporte ---------- */
.cuisi-atouts{list-style:none;margin:0 0 var(--sp-6);padding:var(--sp-4);display:grid;
  gap:var(--sp-3);background:var(--accent-soft);border-radius:var(--r-m)}
.cuisi-atouts li{display:flex;gap:var(--sp-3);align-items:flex-start;
  font-size:var(--t-s);color:var(--ink);line-height:1.45}
.cuisi-atouts li span{flex:none;font-weight:800;color:var(--accent)}

/* ---------- Les trois compteurs du profil ---------- */
.cuisi-chiffres{list-style:none;margin:0 0 var(--sp-7);padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-2)}
.cuisi-chiffres li{padding:var(--sp-4) var(--sp-2);text-align:center;background:var(--card);
  border:1px solid var(--line-2);border-radius:var(--r-m)}
.cuisi-chiffres strong{display:block;font-size:32px;font-weight:800;line-height:1;
  letter-spacing:-.03em;color:var(--accent)}
.cuisi-chiffres span{display:block;margin-top:var(--sp-2);font-size:var(--t-xs);
  color:var(--ink-3);line-height:1.3}

/* ---------- Les régimes retenus ---------- */
.cuisi-compte .cuisi-regimes{display:flex;flex-wrap:wrap;gap:var(--sp-2);
  margin:var(--sp-3) 0;padding:0;list-style:none}
.cuisi-compte .cuisi-regime{background:var(--green-bg);color:var(--green-fg);
  border-radius:var(--r-s);padding:6px var(--sp-3);font-size:var(--t-xs);font-weight:800}

.cuisi-compte .cuisi-bande{padding:var(--sp-5);margin-bottom:var(--sp-6);
  background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-l)}
.cuisi-compte .cuisi-bande h2{font-size:var(--t-xl);margin:0}
.cuisi-compte .cuisi-bande p{margin:var(--sp-2) 0 0;color:var(--ink-2);font-size:var(--t-s)}
.cuisi-compte .cuisi-bande .cuisi-cta{margin-top:var(--sp-4)}

.cuisi-compte section > h2{font-size:var(--t-2xl);margin:0 0 var(--sp-3)}
.cuisi-compte section > .cuisi-lead{margin:0 0 var(--sp-5)}

/* ---------- Les régimes à cocher ----------
   Deux colonnes dès qu'il y a la place : la liste en compte une douzaine, et
   une seule colonne obligeait à faire défiler pour la voir entière. */
.cuisi-cases{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.cuisi-cases label{display:flex;align-items:center;gap:var(--sp-3);
  min-height:var(--tap);padding:0 var(--sp-3);border-radius:var(--r-s);cursor:pointer;
  font-size:var(--t-s);color:var(--ink);
  transition:background var(--dur-1) var(--ease)}
.cuisi-cases label:hover{background:var(--accent-soft)}
.cuisi-cases input{flex:none;width:20px;height:20px;accent-color:var(--accent)}
/* Coché, le libellé prend la couleur des étiquettes de régime du site : on
   reconnaît d'un coup d'œil ce qui est retenu. */
.cuisi-cases input:checked + span{font-weight:800;color:var(--green-fg)}
@media (min-width:560px){
  .cuisi-cases{grid-template-columns:1fr 1fr;column-gap:var(--sp-3)}
}

/* ---------- Bas de page du profil ---------- */
.cuisi-compte__fin{margin-top:var(--sp-7);padding-top:var(--sp-6);
  border-top:1px solid var(--line);text-align:center}
.cuisi-compte__danger{margin-top:var(--sp-6);text-align:left}
.cuisi-compte__danger summary{cursor:pointer;font-size:var(--t-xs);color:var(--ink-3);
  min-height:var(--tap);display:flex;align-items:center;justify-content:center}
.cuisi-compte__danger[open] summary{margin-bottom:var(--sp-4)}
.cuisi-compte__danger > p{font-size:var(--t-s);color:var(--ink-2);margin:0 0 var(--sp-4)}
.cuisi-ghost--danger{border-color:var(--accent);color:var(--accent);width:100%}

/* ---------- Le carnet ---------- */
.cuisi-compte .cuisi-grille{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(2,1fr);gap:var(--sp-3)}
.cuisi-compte .cuisi-grille > li{position:relative}

.cuisi-compte .cuisi-tuile{position:relative;display:block;width:100%;overflow:hidden;
  aspect-ratio:1/1;border-radius:var(--r-m);color:#fff;background:var(--chrome)}
.cuisi-compte .cuisi-tuile.cuisi-tuile--haute{aspect-ratio:4/5}
.cuisi-compte .cuisi-tuile img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;transition:transform 500ms var(--ease)}
/* Le voile des vignettes, et non celui de la page recette.
   cuisinovores-page.css redéfinit --scrim pour la grande photo d'en-tête
   d'une fiche : presque opaque sur plus de la moitié de la hauteur, parce
   qu'un titre de quarante pixels doit s'y lire. Cette feuille est aussi
   chargée ici, et les vignettes du carnet en ressortaient quasi noires. On
   reprend donc le voile de l'accueil, celui qui laisse voir le plat. */
.cuisi-compte .cuisi-scrim{position:absolute;inset:0;
  background:linear-gradient(to top,
    rgba(19,24,38,.88) 0%, rgba(19,24,38,.45) 38%, rgba(19,24,38,0) 72%)}
.cuisi-compte .cuisi-info{position:absolute;left:0;right:0;bottom:0;display:flex;
  flex-direction:column;align-items:flex-start;gap:6px;padding:var(--sp-3)}
/* Seize pixels et non vingt : la vignette ne fait que cent soixante de large
   sur téléphone, et un titre long y prenait trois lignes et la moitié de la
   hauteur. Au-delà de trois lignes on coupe, la vignette entière est un lien
   vers la recette. */
.cuisi-compte .cuisi-titre{font-size:16px;font-weight:800;line-height:1.16;
  letter-spacing:-.02em;text-shadow:0 1px 3px rgba(8,11,18,.7);color:#fff;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media (hover:hover) and (pointer:fine){
  .cuisi-compte .cuisi-tuile:hover img{transform:scale(1.05)}
}

/* Le nom du carnet, pour les quelques recettes rangées ailleurs que dans la
   boîte. Sans lui, elles se mêleraient aux autres sans qu'on sache d'où
   elles viennent. */
.cuisi-carnet__nom{align-self:flex-start;padding:3px var(--sp-2);border-radius:var(--r-s);
  background:rgba(255,255,255,.9);color:var(--chrome);
  font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}

/* La croix qui retire du carnet : posée sur la vignette, jamais sur le titre. */
.cuisi-carnet__oter{position:absolute;top:var(--sp-2);right:var(--sp-2);
  width:34px;height:34px;display:grid;place-items:center;padding:0;
  border:0;border-radius:50%;cursor:pointer;color:#fff;
  background:rgba(8,11,18,.55);backdrop-filter:blur(4px);
  transition:background var(--dur-1) var(--ease),transform var(--dur-1) var(--ease)}
.cuisi-carnet__oter:hover,.cuisi-carnet__oter:focus-visible{background:var(--accent)}
.cuisi-carnet__oter:active{transform:scale(.92)}
.cuisi-carnet__oter svg{fill:none;stroke:currentColor}
/* La ligne s'efface avant que le serveur ait répondu : le geste doit paraître
   immédiat, et l'échec la fait revenir. */
.cuisi-compte .cuisi-grille > li.est-parti{opacity:0;transform:scale(.94);
  transition:opacity var(--dur-1) var(--ease),transform var(--dur-1) var(--ease)}

/* ---------- Carnet vide ---------- */
.cuisi-compte .cuisi-vide{padding:var(--sp-7) var(--sp-4);text-align:center;
  border:1px dashed var(--line-2);border-radius:var(--r-l)}
.cuisi-compte .cuisi-vide p{margin:0 0 var(--sp-4);color:var(--ink-2);font-size:var(--t-s);
  max-width:44ch;margin-inline:auto}
.cuisi-compte .cuisi-vide p:last-child{margin-bottom:0}

/* ---------- Tablette et bureau ---------- */
@media (min-width:768px){
  .cuisi-compte .cuisi-grille{grid-template-columns:repeat(3,1fr);gap:var(--sp-4)}
  .cuisi-compte .cuisi-titre{font-size:19px}
  /* Les trois compteurs suivent le même axe que le reste : calés à gauche
     sous le titre, et non centrés au milieu de l'écran. */
  .cuisi-chiffres{gap:var(--sp-4);max-width:38rem}
  .cuisi-chiffres strong{font-size:38px}
  .cuisi-ghost--danger{width:auto}
}
@media (min-width:1024px){
  .cuisi-compte .cuisi-grille{grid-template-columns:repeat(4,1fr)}
}

/* Prénom et nom côte à côte : deux champs courts qui gagnent à tenir
   sur une ligne dès qu'il y a la place, et l'un sous l'autre sur
   téléphone étroit. L'aide est commune aux deux, sous le duo. */
.cuisi-champ-duo{display:grid;gap:0 var(--sp-4);grid-template-columns:1fr}
@media (min-width:420px){.cuisi-champ-duo{grid-template-columns:1fr 1fr}}
.cuisi-champ-duo .cuisi-champ{margin-bottom:var(--sp-2)}
.cuisi-aide--duo{margin:0 0 var(--sp-4)}