/* ==========================================================================
   WAKAME - Page « Contact »

   Chargée par la seule route /contact (voir routes/pages.js), après tokens.css
   et wakame.css.

   Cette feuille est courte, et c'est voulu : la page est montée avec les blocs
   qui existent déjà dans la maquette plutôt qu'avec des blocs à elle - le
   panneau des coordonnées EST .wk-book__card / .wk-book__info / .wk-book__map,
   le bloc « Réserver » de l'accueil ; les titres sont .wk-title ; le bouton est
   .wk-btn--fill.

   TROIS COULEURS, PAS UNE DE PLUS :

     - le fond    : --ink, le bleu-nuit des sections sombres du site - c'est
                    aussi celui de l'en-tête et du pied de page, qui encadrent
                    la page sans rupture de teinte ;
     - le panneau : --paper, la seule surface claire de la page ;
     - l'accent   : --red, réservé à trois endroits - le mot d'accent du titre,
                    le titre du panneau, le bouton « Réserver ».

   Le crème (--cream) n'y a pas sa place : c'est la couleur de FOND de la
   vitrine, celle sur laquelle l'encre et le rouge se posent. En faire ici un
   texte sur fond sombre en aurait fait une quatrième couleur d'accent, en
   concurrence avec le rouge.

   Comme le reste de la vitrine, les distances sont en --u (1 px de la maquette
   Figma) : la page suit les mêmes paliers d'échelle que l'accueil sur les
   grands écrans, sans règle supplémentaire.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fond de page

   Le <body> aussi, et pas seulement le <main> : la zone d'élan du défilement
   (le rebond en haut et en bas) prend la couleur du corps, et laissait
   apparaître une bande crème au dessus de l'en-tête. Cette feuille n'étant
   chargée que par /contact, le reste du site garde son crème.
   -------------------------------------------------------------------------- */
body.wakame { background: var(--ink); }

.ct-page {
  background: var(--ink);
  color: var(--paper);
}

/* Titre de section (« Nous suivre », « Vous vouliez réserver… »). Il garde la
   taille de .wk-title, celle des titres de section de tout le site : c'est un
   repère, pas une affiche. */
.ct-h2 { margin-bottom: calc(50 * var(--u)); }

/* --------------------------------------------------------------------------
   2. En-tête de page

   Le dessin, le titre, l'accroche - centrés, comme l'en-tête de « La carte ».
   -------------------------------------------------------------------------- */
.ct-head {
  padding-block: calc(90 * var(--u)) calc(110 * var(--u));
  /* Fond posé en toutes lettres, et section isolée : le dessin s'additionne à
     ce qui est peint SOUS lui (voir .ct-umbrella). Sans contexte d'empilement
     à lui, il irait chercher son fond plus loin dans la page et l'en-tête
     collant lui passerait dessus - c'est-à-dire dessous, au sens de la fusion. */
  isolation: isolate;
  background: var(--ink);
}

.ct-head__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(20 * var(--u));
  text-align: center;
}

/* Le dessin de parasols : le fichier tel quel, à une fusion près.

   Il est fait d'aplats blancs cernés de noir sur fond transparent. Le noir y
   est un VRAI noir (#000), plus sombre que l'encre du fond : posé simplement,
   son trait creusait des sillons plus noirs que la page.

   `plus-lighter` additionne le dessin et le fond, canal par canal :

     noir  (0, 0, 0)       + --ink  =  --ink   -> le trait devient le fond
     blanc (255, 255, 255) + --ink  =  blanc   -> les aplats restent blancs

   Il ne reste donc que les blancs du dessin sur l'encre, et le trait dessine
   en creux. Ni opacité, ni dégradé, ni animation : la fusion ne fait que
   remettre le noir du fichier à la couleur de la page.

   Là où `plus-lighter` n'est pas connu, la déclaration est ignorée et le
   dessin s'affiche tel quel - le seul écart est ce noir un peu plus profond
   que l'encre.

   Sa largeur est plafonnée en --u plutôt qu'en % : au delà, le dessin cesse
   d'être un en-tête et devient une illustration pleine page. */
.ct-umbrella {
  width: min(100%, calc(1250 * var(--u)));
  height: auto;
  margin-bottom: calc(20 * var(--u));
  mix-blend-mode: plus-lighter;
  user-select: none;
  -webkit-user-drag: none;
}

/* Un cran au-dessus des titres de section, et pas davantage : la brosse
   grossit vite, et le titre passait avant le dessin qu'il légende. */
.ct-head__title {
  font-size: clamp(26px, 3.1vw, 40px);
  line-height: 1.15;
  /* Le second morceau du titre porte un trait d'union (« Contactez-nous ») :
     sans équilibrage, le navigateur coupait dessus et laissait « NOUS » seul
     sur la deuxième ligne. Là où il n'est pas connu, le titre revient au
     retour à la ligne ordinaire. */
  text-wrap: balance;
}

/* L'accroche est en Fredoka ORDINAIRE et non en semi-bold : deux lignes
   grasses l'une sous l'autre, le titre ne se détachait plus de sa légende. */
.ct-head__sub {
  max-width: calc(2200 * var(--u));
  font-size: var(--fs-48);
  line-height: 1.35;
  color: rgb(255 247 247 / .75);
}

/* --------------------------------------------------------------------------
   3. Coordonnées

   Le panneau vient de wakame.css. Ne sont réglés ici que sa tête et les blocs
   qu'il contient.
   -------------------------------------------------------------------------- */
.ct-coord { padding-bottom: calc(140 * var(--u)); }

/* Titre rouge et filet qui court jusqu'au bord : la tête de catégorie de la
   carte (.wk-carte__cathead / .wk-carte__rule, menu.css). Recopiée ici parce
   que menu.css n'est pas chargée sur cette page - le dessin du filet est le
   même à l'unité près, pour que les deux se ressemblent vraiment. */
.ct-cathead {
  display: flex;
  align-items: center;
  gap: calc(40 * var(--u));
}
.ct-cathead__titre { color: var(--red); }
.ct-cathead__rule {
  flex: 1;
  height: calc(4 * var(--u));
  min-width: calc(50 * var(--u));
  background: repeating-linear-gradient(
    to right,
    var(--brown) 0 calc(12 * var(--u)),
    transparent calc(12 * var(--u)) calc(24 * var(--u))
  );
  opacity: .45;
}

/* Les quatre blocs sont plus serrés entre eux que les enfants directs du
   panneau (.wk-book__info, 50 unités) : ils forment une liste, et cette liste
   est UN élément du panneau, pas quatre. */
.ct-blocs {
  display: flex;
  flex-direction: column;
  gap: calc(45 * var(--u));
}
.ct-bloc { display: flex; flex-direction: column; gap: calc(4 * var(--u)); }

/* Le libellé est le plus discret de la carte : il nomme ce qui suit, on ne le
   lit qu'une fois. En brun éteint et non en rouge - le rouge est déjà pris par
   le titre du panneau, quatre libellés rouges l'auraient dilué. */
.ct-bloc__label {
  font-size: var(--fs-40);
  line-height: 1.4;
  color: rgb(45 20 8 / .55);
}

/* La valeur qu'on vient chercher : au corps des noms de plats (.wk-dish__nom),
   et cliquable - on appelle, on écrit ou on ouvre le plan sans rien recopier. */
.ct-val {
  display: block;
  font-family: var(--f-ui);
  font-weight: 600;
  font-size: var(--fs-48);
  line-height: 1.4;
  /* Une adresse email est longue et n'a aucun espace où se couper : sans cette
     autorisation, elle élargissait la colonne du panneau. */
  overflow-wrap: anywhere;
  transition: color .2s var(--ease);
}
.ct-val:hover { color: var(--red); text-decoration: underline; }

/* Horaires : le jour, puis ses services en dessous. Pas de points de conduite
   comme sur la carte - ils courent d'un plat à son prix, c'est-à-dire d'un
   bord à l'autre d'une feuille ; dans une colonne de panneau, ils traversaient
   un demi-écran pour rejoindre trois mots. */
.ct-horaires {
  display: flex;
  flex-direction: column;
  gap: calc(15 * var(--u));
}
.ct-horaires li {
  font-family: var(--f-ui);
  font-size: var(--fs-48);
  line-height: 1.4;
}
.ct-horaires__jour { font-weight: 600; margin-right: calc(20 * var(--u)); }
.ct-horaires__h    { color: rgb(45 20 8 / .75); }

/* --------------------------------------------------------------------------
   4. Réseaux

   Deux liens, et rien qui ressemble à un bouton : un cadre et un fond en
   auraient fait des cases à cocher. Le logo, le nom souligné au survol, le
   pseudo dessous.
   -------------------------------------------------------------------------- */
.ct-suivre { padding-bottom: calc(140 * var(--u)); }

.ct-reseaux {
  display: flex;
  flex-wrap: wrap;
  gap: calc(60 * var(--u)) calc(150 * var(--u));
}

.ct-reseau {
  display: flex;
  align-items: center;
  gap: calc(45 * var(--u));
}

/* Les logos sont les fichiers de /img/wakame, posés en MASQUE : ils sont noirs
   dans le SVG (#000000 en dur sur la balise racine), donc invisibles sur ce
   fond-là, et une <img> ne se recolore pas. Le masque ne garde que leur
   silhouette et la remplit de la couleur du lien, qui suit alors le survol.

   Le blanc plutôt que le rouge : ce sont des marques, on les reconnaît à leur
   dessin, et le rouge de la page appartient aux actions du restaurant. Le
   survol, lui, les passe au rouge - c'est le geste, pas la marque. */
.ct-reseau__logo {
  flex: none;
  width: calc(110 * var(--u));
  height: calc(110 * var(--u));
  background: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: background-color .2s var(--ease);
}
.ct-reseau__logo--ig {
  -webkit-mask-image: url("/img/wakame/logo-instagram.svg");
  mask-image: url("/img/wakame/logo-instagram.svg");
}
.ct-reseau__logo--fb {
  -webkit-mask-image: url("/img/wakame/logo-facebook.svg");
  mask-image: url("/img/wakame/logo-facebook.svg");
}

.ct-reseau__txt { display: flex; flex-direction: column; }
.ct-reseau__nom {
  font-family: var(--f-ui);
  font-weight: 600;
  font-size: var(--fs-48);
  line-height: 1.3;
}
.ct-reseau__pseudo {
  font-size: var(--fs-40);
  line-height: 1.4;
  color: rgb(255 247 247 / .6);
}

.ct-reseau:hover { color: var(--red); }
.ct-reseau:hover .ct-reseau__nom { text-decoration: underline; }
.ct-reseau:hover .ct-reseau__pseudo { color: rgb(216 50 50 / .8); }

/* --------------------------------------------------------------------------
   5. Rappel réservation
   -------------------------------------------------------------------------- */
.ct-book { padding-bottom: calc(180 * var(--u)); }

.ct-book__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(20 * var(--u));
  text-align: center;
}
/* Le titre porte déjà la marge basse commune (.ct-h2) : ici la ligne qui le
   suit s'en charge, sinon les deux se seraient éloignés l'un de l'autre. */
.ct-book__inner .ct-h2 { margin-bottom: 0; }
.ct-book__line {
  font-size: var(--fs-40);
  line-height: 1.5;
  color: rgb(255 247 247 / .75);
  margin-bottom: calc(30 * var(--u));
}

/* --------------------------------------------------------------------------
   6. Adaptatif  (mêmes points de rupture que la landing page)
   -------------------------------------------------------------------------- */

/* Le passage du panneau en une seule colonne n'est pas écrit ici : wakame.css
   le fait déjà à ce point de rupture pour le bloc « Réserver » de l'accueil,
   plan compris (.wk-book__card, .wk-book__map). C'est tout l'intérêt d'avoir
   repris ses classes. Ne restent que les respirations propres à la page. */
@media (max-width: 900px) {
  .ct-head { padding-block: calc(60 * var(--u)) calc(90 * var(--u)); }
  .ct-coord,
  .ct-suivre { padding-bottom: calc(110 * var(--u)); }
  .ct-reseaux { gap: calc(50 * var(--u)) calc(100 * var(--u)); }
}

@media (max-width: 640px) {
  /* Les deux réseaux l'un sous l'autre, et le bouton pleine largeur : à cette
     taille, chacun est seul sur sa ligne. */
  .ct-reseaux { flex-direction: column; }
  .ct-book__inner .wk-btn { width: 100%; }

  /* Le jour et ses heures l'un sous l'autre : côte à côte, les heures se
     coupaient en deux lignes plutôt que de tenir sur la leur. */
  .ct-horaires__jour { display: block; margin-right: 0; }
}