/* ============================================================
   CUISINOVORES : la page d'Allison.
   Une mise en page en blocs, mais un texte de billet : c'est elle
   qui parle, à la première personne, et le rythme des blocs sert
   uniquement à ce que la lecture ne soit pas un mur.
   ============================================================ */

/* ---------- Le portrait et l'accueil ---------- */
.cuisi-allison__haut{display:grid;gap:var(--sp-5)}
/* Le cadre porte le format, la photo le remplit : une image différée n'a pas
   encore de dimensions propres, et le bloc s'étirerait. */
.cuisi-allison__cadre{position:relative;display:block;overflow:hidden;
  aspect-ratio:4/3;border-radius:var(--r-l);box-shadow:var(--shadow-2)}
.cuisi-allison__cadre img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 32%}
.cuisi-allison__bonjour{font-size:var(--t-2xl);font-weight:800;
  letter-spacing:-.03em;color:var(--ink);margin:0 0 var(--sp-3)}
/* Justifié comme le récit plus bas. Ces quatre paragraphes d'introduction
   étaient les seuls à rester alignés à gauche, et la rupture se voyait :
   la page changeait de mise en forme au milieu sans raison. */
.cuisi-allison__mot p{margin:0 0 var(--sp-3);font-size:var(--t-md);
  line-height:1.66;color:var(--ink-2);
  text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.cuisi-allison__mot p:last-child{margin-bottom:0}

/* ---------- Trois chiffres ---------- */
.cuisi-allison__chiffres{display:grid;gap:var(--sp-3)}
.cuisi-allison__chiffres li{padding:var(--sp-4);background:var(--card);
  border:1px solid var(--line-2);border-radius:var(--r-l);box-shadow:var(--shadow-1)}
.cuisi-allison__chiffres b{display:block;font-size:38px;font-weight:800;
  letter-spacing:-.04em;color:var(--accent);line-height:1}
.cuisi-allison__chiffres span{display:block;margin-top:var(--sp-2);
  font-size:var(--t-s);color:var(--ink-3)}

/* ---------- Le récit ----------
   Plus grand que la normale : c'est un texte qui se lit d'une traite. */
.cuisi-allison__texte{max-width:66ch;margin-top:var(--sp-4)}
.cuisi-allison__texte p{margin:0 0 var(--sp-4);font-size:var(--t-md);
  line-height:1.68;color:var(--ink-2)}
.cuisi-allison__texte p:last-child{margin-bottom:0}
/* La phrase la plus courte du récit, celle qui bascule tout. */
.cuisi-allison__pause{font-size:var(--t-xl)!important;font-weight:800;
  color:var(--ink)!important;letter-spacing:-.02em}

/* ---------- Les livres ---------- */
.cuisi-allison__livres{display:grid;gap:var(--sp-3);margin:var(--sp-5) 0}
.cuisi-allison__livres li{padding:var(--sp-4);border-left:3px solid var(--cta-bg);
  background:var(--card);border-radius:0 var(--r-m) var(--r-m) 0}
.cuisi-allison__livres b{display:block;font-weight:800;color:var(--ink)}
.cuisi-allison__livres span{display:block;margin-top:2px;font-size:var(--t-xs);color:var(--ink-3)}

/* ---------- La signature ---------- */
/* La signature ferme le récit, elle ne forme pas une section à elle seule.
   Avec la bande complète au-dessus, ces deux lignes flottaient au milieu de
   cent pixels de vide de chaque côté, comme oubliées là. Elles se rattachent
   au bloc qui précède ; le trait au-dessus suffit à les en séparer. */
.cuisi-simple .cuisi-allison__adieu{padding-top:var(--sp-5)}
.cuisi-allison__signature{max-width:66ch;margin:0;padding-top:var(--sp-5);
  border-top:1px solid var(--line);color:var(--ink);font-size:var(--t-md);line-height:1.6}
.cuisi-allison__signature b{font-weight:800}

/* ---------- La largeur de la page ----------
   Le récit est plafonné à 66 caractères, comme tout texte qui se lit d'une
   traite. Dans une page large de 1240 pixels, cette colonne restait collée à
   gauche et laissait un demi-écran vide à droite : la page paraissait posée
   de travers. C'est donc la page entière qui se resserre, titres et cartes
   compris, plutôt que le seul texte : tout garde le même bord. */
/* 720 pixels, et non 840 : à 840, une ligne portait 86 caractères, bien
   au-delà des 75 qu'un œil suit sans se perdre en changeant de ligne. */
.cuisi-allison{--col:720px}
@media (min-width:1024px){
  .cuisi-allison__texte,.cuisi-allison__signature{max-width:none}
}

/* ---------- Tablette et bureau ---------- */
@media (min-width:768px){
  .cuisi-allison__haut{grid-template-columns:42% 1fr;gap:var(--sp-6);align-items:center}
  .cuisi-allison__chiffres{grid-template-columns:repeat(3,1fr);gap:var(--sp-4)}
  .cuisi-allison__livres{grid-template-columns:repeat(3,1fr)}
  .cuisi-allison__texte p{font-size:19px}
}
@media (min-width:1024px){
  .cuisi-allison__haut{grid-template-columns:38% 1fr;gap:var(--sp-7)}
}

/* ---------- Les couvertures dans les recueils ----------
   Une ligne de recueil montre maintenant le livre. Le cadre porte le
   format 2:3 des couvertures : la place est réservée avant que l'image
   n'arrive, donc la liste ne saute pas au chargement. */
.cuisi-allison__livres li{display:flex;align-items:center;gap:var(--sp-4)}
.cuisi-allison__couv{flex:0 0 62px;aspect-ratio:2/3;border-radius:var(--r-s);
  overflow:hidden;background:var(--card);box-shadow:var(--shadow-1)}
.cuisi-allison__couv img{display:block;width:100%;height:100%;object-fit:cover}
.cuisi-allison__livre-txt{display:flex;flex-direction:column;gap:2px;min-width:0}

/* ---------- La carte des chiffres ----------
   Le nombre et sa légende se suivaient dans le flux : « 3 » restait seul
   en haut et « recueils papier, tous sans gluten » commençait dessous,
   ce qui donnait l'impression d'une phrase coupée en deux. Le nombre
   devient un bloc à part entière, la légende suit, et la coupure devient
   une mise en page voulue plutôt qu'un accident. */
.cuisi-allison__chiffres b{display:block;line-height:1}
.cuisi-allison__chiffres span{display:block;text-wrap:balance}

/* ---------- Le récit ----------
   Justifié, comme Allison le souhaite. La césure automatique est
   indispensable avec ce réglage : sans elle, une colonne de téléphone
   étire les espaces entre les mots et creuse des rivières blanches au
   milieu du paragraphe. La page déclare lang="fr-FR", le navigateur
   coupe donc selon les règles françaises. */
.cuisi-allison__texte p{text-align:justify;hyphens:auto;-webkit-hyphens:auto}
/* La ligne isolée du récit garde son alignement à gauche : justifier une
   phrase de quatre mots l'étirerait d'un bord à l'autre. */
.cuisi-allison__texte .cuisi-allison__pause{text-align:left;hyphens:manual}

/* Justifié seulement quand la colonne est assez large.
   Mesuré : « hyphens:auto » ne coupe rien en français dans Chrome, le
   paragraphe fait exactement la même hauteur avec et sans. Une colonne de
   357 pixels justifiée sans césure creuse alors des rivières de blanc entre
   les mots, jusqu'à trois espaces d'affilée. Sous 768 pixels, le texte
   revient donc à gauche : toute la page l'est, rien ne dépareille. */
@media (max-width:767px){
  .cuisi-allison__mot p,.cuisi-allison__texte p{text-align:left}
}