/* ============================================================
   CUISINOVORES : les pages de contenu.
   Les livres, les aides cuisine. Mêmes jetons que le reste,
   une seule colonne de lecture, aucune fioriture.
   ============================================================ */

.cuisi-simple{padding-bottom:var(--sp-7)}

/* ---------- Tête de page ---------- */
.cuisi-simple__tete{background:var(--chrome);color:var(--chrome-fg);
  padding-block:var(--sp-6) var(--sp-7);margin-bottom:var(--sp-7)}
.cuisi-simple__tete h1{margin-top:var(--sp-2);font-size:38px;line-height:1.02;
  letter-spacing:-.04em;color:var(--chrome-fg);max-width:16ch}
.cuisi-simple .cuisi-kick{margin:0;font-size:var(--t-xs);font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cta-bg)}

.cuisi-simple .cuisi-bande{padding-top:var(--sp-8)}
.cuisi-simple .cuisi-bande > h2{font-size:var(--t-2xl)}
/* Le chapô du corps de page, sur fond clair. */
.cuisi-simple .cuisi-lead{margin:var(--sp-2) 0 0;font-size:var(--t-md);
  color:var(--ink-2);max-width:60ch}
/* Celui de la tête de page est sur l'ardoise, il lui faut la couleur claire.
   Cette règle doit rester APRÈS la précédente : les deux ont la même
   spécificité, et c'est la dernière qui l'emporte. Déclarée avant, elle
   perdait, et le chapô sortait en gris foncé sur bleu nuit, illisible.
   Elle vaut pour toutes les pages refaites, pas seulement le carnet. */
.cuisi-simple__tete .cuisi-lead{margin-top:var(--sp-4);
  color:rgba(244,242,238,.82);font-size:var(--t-md);max-width:56ch}
.cuisi-simple__fin{text-align:center}
.cuisi-simple__fin .cuisi-lead{margin-inline:auto;margin-bottom:var(--sp-5)}

/* ---------- Les recueils ----------
   Sur téléphone, la couverture se met à gauche du texte plutôt qu'au-dessus :
   un livre tient alors en deux cents pixels au lieu de cinq cents, et les
   trois se voient presque d'un seul écran. Sur grand écran, ils passent de
   front. Dans les deux cas, on doit voir tout de suite qu'ils sont trois. */
.cuisi-recueils{display:grid;gap:var(--sp-5)}
.cuisi-recueil{display:grid;grid-template-columns:110px 1fr;gap:var(--sp-4);
  align-items:start;padding-bottom:var(--sp-5);border-bottom:1px solid var(--line)}
.cuisi-recueil:last-of-type{border-bottom:0;padding-bottom:0}
/* Le cadre porte le format, la couverture le remplit : une image différée
   n'a pas encore de dimensions propres. */
/* width:100% n'est pas décoratif : l'image est en position absolue, le cadre
   n'a donc aucun contenu dans le flux. Sans largeur imposée, il se réduit à
   zéro dès qu'il devient une case de grille centrée. */
.cuisi-recueil__couv{position:relative;display:block;overflow:hidden;width:100%;
  aspect-ratio:2/3;max-width:260px;border-radius:var(--r-s);box-shadow:var(--shadow-2)}
.cuisi-recueil__couv img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cuisi-reserve{position:absolute;inset:0;display:grid;place-items:center;text-align:center;
  padding:var(--sp-2);background:var(--accent-soft);border:1px dashed var(--line-2);
  font-size:12px;color:var(--ink-3);line-height:1.35}
.cuisi-recueil__txt h2{font-size:var(--t-lg);margin:0;line-height:1.2}
.cuisi-recueil__sous{margin:var(--sp-2) 0 var(--sp-3);font-size:var(--t-xs);
  font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.cuisi-recueil__txt p{margin:0 0 var(--sp-4);color:var(--ink-2);font-size:var(--t-s);max-width:54ch}
@media (min-width:768px){
  .cuisi-recueil__txt h2{font-size:var(--t-xl)}
  .cuisi-recueil__txt p{font-size:var(--t-base)}
}
.cuisi-recueil__txt .cuisi-recueil__sous{color:var(--accent);margin-bottom:var(--sp-3)}

/* ---------- La carte d'Allison ----------
   Le gabarit des livres nomme ce bloc « __texte » là où la page recette le
   nomme « __txt », et seul « __txt » avait une gouttière. Résultat : sur les
   livres, le titre et la citation venaient buter contre la bordure de la
   carte, des quatre côtés. Mêmes valeurs que sur la recette. */
.cuisi-autrice__texte{padding:var(--sp-5)}
.cuisi-autrice__texte h2{font-size:var(--t-xl)}
.cuisi-autrice__texte blockquote{margin:var(--sp-3) 0 var(--sp-5);padding:0;border:0;
  font-size:var(--t-md);color:var(--ink-2)}

/* ---------- Les deux outils ---------- */
.cuisi-outils{display:grid;gap:var(--sp-4)}
.cuisi-outil{display:block;padding:var(--sp-5);color:var(--ink);
  background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-l);
  box-shadow:var(--shadow-1);
  transition:transform var(--dur-2) var(--ease),border-color var(--dur-1) var(--ease)}
.cuisi-outil__ic{display:grid;place-items:center;width:58px;height:58px;
  border-radius:var(--r-m);background:var(--accent-soft);color:var(--accent);
  margin-bottom:var(--sp-4)}
.cuisi-outil__ic svg{fill:none;stroke:currentColor}
.cuisi-outil h2{font-size:var(--t-xl)}
.cuisi-outil__sous{margin:var(--sp-2) 0 var(--sp-3);font-size:var(--t-xs);
  font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.cuisi-outil p{margin:0 0 var(--sp-4);color:var(--ink-2);font-size:var(--t-s)}
.cuisi-outil__all{font-weight:800;color:var(--accent);font-size:var(--t-s)}
@media (hover:hover) and (pointer:fine){
  .cuisi-outil:hover{transform:translateY(-3px);border-color:var(--accent);color:var(--ink)}
  .cuisi-outil:hover .cuisi-arw{transform:translateX(4px)}
}

/* ============================================================
   Formulaires, colonne de lecture et bandeaux de message.

   Ces règles vivaient dans la feuille de l'espace membre. La page
   de contact a besoin des mêmes : plutôt que de les recopier, elles
   remontent ici, où toutes les pages refaites les trouvent.
   ============================================================ */

/* Une colonne étroite : un formulaire se lit mieux court que large.

   C'est le contenu qu'on limite, pas la colonne. La colonne garde la
   gouttière du site, donc le même bord gauche que le titre de la tête de
   page : tout est sur un seul axe. Limiter la colonne elle-même puis la
   centrer ne marche pas, la gouttière y ajoute sa propre marge et il ne
   reste presque rien sur un grand écran. */
.cuisi-col > *{max-width:38rem}
.cuisi-col > section + section,
.cuisi-col > section + .cuisi-bande,
.cuisi-col > .cuisi-bande + section{margin-top:var(--sp-7)}

/* ---------- Le lien de retour ----------
   Posé sur l'ardoise, au-dessus du titre : ces pages n'ont pas de fil
   d'Ariane et on s'y retrouvait sans porte de sortie. */
.cuisi-retour{margin:0;background:var(--chrome);padding-top:var(--sp-4)}
.cuisi-retour a{display:inline-flex;align-items:center;gap:6px;min-height:var(--tap);
  font-size:var(--t-s);font-weight:700;color:rgba(244,242,238,.78);
  transition:color var(--dur-1) var(--ease)}
.cuisi-retour a:hover,.cuisi-retour a:focus-visible{color:var(--chrome-fg)}
.cuisi-retour svg{flex:none;transition:transform var(--dur-1) var(--ease)}
@media (hover:hover) and (pointer:fine){
  .cuisi-retour a:hover svg{transform:translateX(-3px)}
}
/* La tête suit immédiatement le lien : sans cela elle rouvrait son propre
   espace au-dessus, et l'ardoise se coupait en deux. */
.cuisi-retour + .cuisi-simple__tete{padding-top:var(--sp-3)}

/* ---------- Bandeaux de message ---------- */
.cuisi-alerte{margin:0 0 var(--sp-5);padding:var(--sp-4);border-radius:var(--r-m);
  font-size:var(--t-s);line-height:1.45;border:1px solid transparent}
.cuisi-alerte ul{margin:0;padding:0;list-style:none;display:grid;gap:var(--sp-2)}
.cuisi-alerte a{text-decoration:underline}
.cuisi-alerte--oui{background:var(--green-bg);color:var(--green-fg);border-color:var(--green-fg)}
/* Le refus emprunte la couleur d'accent plutôt qu'un rouge de plus : le site
   n'en a qu'une, et un formulaire refusé n'est pas une avarie. */
.cuisi-alerte--non{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}

/* ---------- Formulaires ---------- */
.cuisi-form{display:grid;gap:var(--sp-4)}
.cuisi-champ{margin:0;display:grid;gap:6px}
.cuisi-champ label{font-size:var(--t-s);font-weight:800;color:var(--ink)}
.cuisi-champ input[type=text],
.cuisi-champ input[type=email],
.cuisi-champ input[type=password],
.cuisi-champ select,
.cuisi-champ textarea{width:100%;min-height:var(--tap);
  padding:0 var(--sp-3);font:inherit;font-size:var(--t-base);color:var(--ink);
  background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-s);
  transition:border-color var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease)}
/* Un texte long respire : les mêmes bords, mais du rembourrage en haut et
   en bas, et le redimensionnement limité à la hauteur pour qu'on ne puisse
   pas le tirer hors de la colonne. */
.cuisi-champ textarea{padding:var(--sp-3);line-height:1.5;resize:vertical;min-height:9rem}
.cuisi-champ select{appearance:none;cursor:pointer;padding-right:var(--sp-7);
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
    linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 2px),calc(100% - 14px) calc(50% + 2px);
  background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.cuisi-champ input:focus,.cuisi-champ select:focus,.cuisi-champ textarea:focus{outline:0;
  border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.cuisi-champ input:disabled{color:var(--ink-3);background:var(--bg);cursor:not-allowed}
.cuisi-aide{font-size:var(--t-xs);color:var(--ink-3);line-height:1.4}
.cuisi-aide[hidden]{display:none}

/* Une case à cocher se lit sur une ligne, pas en colonne. */
.cuisi-champ--case{gap:0}
.cuisi-champ--case label{display:flex;align-items:flex-start;gap:var(--sp-2);
  font-weight:400;font-size:var(--t-s);color:var(--ink-2);min-height:var(--tap);
  align-content:center;flex-wrap:wrap}
.cuisi-champ--case input[type=checkbox]{flex:none;width:20px;height:20px;margin-top:1px;
  accent-color:var(--accent)}
.cuisi-champ--case a{color:var(--accent);text-decoration:underline}

.cuisi-form .cuisi-cta{width:100%;margin-top:var(--sp-2)}
.cuisi-form__sous{margin:var(--sp-4) 0 0;text-align:center;font-size:var(--t-s);color:var(--ink-2)}
.cuisi-form__sous a{color:var(--accent);font-weight:800}

/* Le piège à robots : hors de l'écran, hors du parcours au clavier, jamais
   display:none, que certains robots savent détecter. */
.cuisi-piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

@media (min-width:768px){
  .cuisi-form .cuisi-cta{width:auto;min-width:14rem;justify-self:start}
}

/* ---------- Apparitions ---------- */
.cuisi-anim .cuisi-simple .cuisi-reveal{opacity:0;transform:translateY(12px)}
.cuisi-anim .cuisi-simple .cuisi-reveal.is-in{opacity:1;transform:none;
  transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease)}

/* ---------- Tablette et bureau ---------- */
@media (min-width:768px){
  .cuisi-simple__tete h1{font-size:52px}
  /* Les trois de front. La couverture repasse au-dessus du texte, centrée,
     et bornée en largeur : au tiers de la colonne de lecture, une image au
     format 2:3 ferait près de six cents pixels de haut à elle seule. */
  .cuisi-recueils{grid-template-columns:repeat(3,1fr);gap:var(--sp-6);align-items:start}
  .cuisi-recueil{grid-template-columns:1fr;gap:var(--sp-4);
    padding-bottom:0;border-bottom:0}
  /* La couverture s'aligne sur le bord gauche du texte, et non au centre de
     sa colonne : centrée, elle flottait au-dessus d'un titre calé à gauche,
     et les trois livres n'avaient plus de ligne commune. */
  .cuisi-recueil__couv{max-width:200px}
  .cuisi-outils{grid-template-columns:1fr 1fr}
  /* La carte passe en deux colonnes : le texte s'aère et se cale sur la photo. */
  .cuisi-autrice__texte{padding:var(--sp-6);align-self:center}
}
@media (min-width:1024px){
  .cuisi-simple__tete{padding-block:var(--sp-7) var(--sp-8)}
  .cuisi-simple__tete h1{font-size:60px}

  /* ---------- La tête de page se centre sur grand écran ----------
     Le titre est plafonné à seize caractères de large et le chapô à
     cinquante-six : c'est ce qui rend un texte lisible, et on n'y touche pas.
     Mais calés à gauche d'une colonne de mille deux cent quarante pixels,
     ils laissaient sept cents pixels de vide à leur droite, et le bandeau
     sombre paraissait à moitié rempli. Centrés, les deux plafonds restent
     les mêmes et le bandeau retrouve son équilibre.

     Uniquement à partir de mille vingt-quatre pixels : sur téléphone, la
     colonne fait déjà la largeur du texte, il n'y a aucun vide à combler, et
     un titre long centré se lit moins bien. */
  .cuisi-simple__tete{text-align:center}
  .cuisi-simple__tete h1,
  .cuisi-simple__tete .cuisi-lead{margin-inline:auto}

  /* Et le contenu suit le même axe.

     Le titre était centré depuis cette largeur, le contenu restait collé à
     gauche. Sur une page longue, un article ou les mentions légales, cela se
     remarquait peu : le texte remplit la hauteur. Sur la page de connexion,
     c'était voyant. Le formulaire, six cent huit pixels de large, se
     retrouvait posé à gauche d'un écran de mille quatre cent quarante, sous un
     titre centré, avec sept cents pixels de vide à sa droite.

     On centre les blocs, pas leur texte : les libellés, les champs et les
     paragraphes gardent leur alignement à gauche, qui est celui qui se lit. */
  .cuisi-col > *{margin-inline:auto}

  .cuisi-recueil__couv{max-width:240px}
}

@media (prefers-reduced-motion:reduce){
  .cuisi-anim .cuisi-simple .cuisi-reveal{opacity:1;transform:none}
}