/* ==========================================================================
   INKÛNU — La carte produit

   Extraite de la section de l'accueil pour etre partagee avec le cross-sell de
   la fiche produit. Elle etait ecrite dans le bloc style de ink-collection ;
   deux surfaces devaient l'afficher, la copier aurait garanti qu'elles
   divergent au premier reglage.

   La grille qui porte les cartes reste dans chaque section : le nombre de
   colonnes et le carrousel mobile ne sont pas les memes des deux cotes.
   ========================================================================== */

  /* --- La grille qui porte les cartes ------------------------------------ */

  /* Base commune aux trois surfaces. Chaque section n'ecrit plus que son
     nombre de colonnes en desktop, la seule chose qui les distingue vraiment. */
  .ink-cards{
    display:grid;
    gap:18px;
    margin:0;padding:0;list-style:none;
  }
  /* Une colonne par defaut, mais seulement sous le palier : ecrite sans media
     query, cette regle arrivait apres celle de la section dans le document et
     ecrasait son nombre de colonnes, a specificite egale. Le desktop n'appartient
     donc qu'aux sections. */
  @media(max-width:749px){
    .ink-cards{grid-template-columns:1fr;}
  }
  @media(min-width:750px){
    .ink-cards{gap:24px;}
  }

  /* Carrousel mobile en scroll-snap : pas une ligne de JS, et le geste natif
     du pouce reste celui du systeme. Les marges negatives font sortir la piste
     des gouttieres pour que la carte suivante depasse et signale qu'il y a une
     suite. Il suppose donc une gouttiere de 20 px sur le conteneur. */
  @media(max-width:749px){
    .ink-cards--swipe{
      display:flex;
      gap:14px;
      overflow-x:auto;
      scroll-snap-type:x mandatory;
      -webkit-overflow-scrolling:touch;
      scrollbar-width:none;
      margin:0 -20px;
      padding:4px 20px 12px;
    }
    .ink-cards--swipe::-webkit-scrollbar{display:none;}
    .ink-cards--swipe>li{flex:0 0 80%;scroll-snap-align:center;}
  }

  /* Deux colonnes sur mobile, pour les surfaces qui ne veulent pas du
     carrousel : la carte reste lisible a moitie de largeur. */
  @media(max-width:749px){
    .ink-cards--two{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
  }

  /* --- La carte ----------------------------------------------------------- */

  .ink-card{
    --card-ink:#0a0a0a;
    /* La carte est un <a> : on coupe les styles de lien de Dawn, la couleur
       venant de --card-ink qui bascule au survol. */
    color:var(--card-ink);
    text-decoration:none;
    position:relative;
    display:flex;flex-direction:column;
    /* Accordé au fond du packshot, pour qu'aucune marche n'apparaisse entre la
       photo et le reste de la carte. La valeur vient du réglage manuel s'il est
       posé, sinon de inkunu-cards.js qui la lit dans la photo. Blanc en repli. */
    background:var(--card-bg,#ffffff);
    border:1px solid #ece4d6;
    box-shadow:0 2px 18px rgba(40,26,7,.06);
    overflow:hidden;
    isolation:isolate;
  }

  /* Image d'ambiance : elle couvre TOUTE la carte, pas seulement la zone
     visuel, puisque c'est sur elle que le texte doit rester lisible. */
  .ink-card__hover{
    position:absolute;inset:0;z-index:-1;
    width:100%;height:100%;
    object-fit:cover;
    opacity:0;
    transition:opacity .45s ease;
  }

  /* Voile sous le texte : les ambiances ne sont pas toutes sombres, et le
     crème ne peut pas tenir seul sur un ciel clair ou des azulejos. */
  .ink-card__scrim{
    display:block;position:absolute;inset:0;z-index:-1;
    pointer-events:none;
    background:linear-gradient(180deg,rgba(22,14,4,.66) 0%,rgba(22,14,4,.26) 42%,rgba(22,14,4,.72) 74%,rgba(22,14,4,.80) 100%);
    opacity:0;
    transition:opacity .45s ease;
  }

  /* Le contenu reste dans le flux, sans z-index : `isolation:isolate` sur la
     carte enferme les calques en z-index négatif, qui passent donc au-dessus du
     fond blanc mais sous le texte. */
  .ink-card__body{
    display:flex;flex-direction:column;flex:1 1 auto;
    padding:20px 20px 18px;
  }

  .ink-card__head{
    display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  }

  .ink-card__title{
    margin:0;
    display:flex;flex-direction:column;
    line-height:1.12;letter-spacing:0;
    color:var(--card-ink);
    transition:color .45s ease;
  }

  /* Chaque ligne de titre porte sa propre typo. Les valeurs arrivent en
     variables CSS posées sur la carte : c'est ce qui permet de garder le palier
     mobile, impossible à exprimer dans un attribut style inline. */
  .ink-card__title .l1{
    font-weight:var(--t1-w,400);
    font-style:var(--t1-i,normal);
    font-size:calc(var(--t1-s,25px) * .9);
  }
  .ink-card__title .l2{
    font-weight:var(--t2-w,500);
    font-style:var(--t2-i,normal);
    font-size:calc(var(--t2-s,25px) * .9);
  }
  @media(min-width:750px){
    .ink-card__title .l1{font-size:var(--t1-s,25px);}
    .ink-card__title .l2{font-size:var(--t2-s,25px);}
  }

  .ink-card__badge{
    flex:none;
    padding:5px 11px;
    border:1px solid var(--card-ink);
    color:var(--card-ink);
    background:transparent;
    font-size:10px;line-height:1;
    letter-spacing:0;
    font-weight:var(--bd-w,500);
    font-style:var(--bd-i,normal);
    white-space:nowrap;
    transition:color .45s ease,border-color .45s ease,opacity .45s ease;
  }
  .ink-card__badge--caps{text-transform:uppercase;}

  /* Le visuel sort des gouttières du corps : le fond studio du packshot va
     ainsi bord à bord au lieu de dessiner un rectangle gris au milieu du blanc. */
  .ink-card__media{
    position:relative;
    margin:16px -20px 0;
    aspect-ratio:1/1;
  }
  .ink-card__shot{
    position:absolute;inset:0;
    width:100%;height:100%;
    object-fit:contain;
    transition:opacity .45s ease;
  }

  /* Grille à deux colonnes : les contenances s'alignent entre elles et les
     prix aussi, quel que soit le nombre de lignes. L'écart vient du column-gap
     et non d'une espace, qui ne serait ni net ni régulier. L'espace littérale
     reste dans le texte pour la copie et la synthèse vocale : entre deux
     éléments de grille, un texte fait uniquement d'espaces ne génère pas de
     boîte, elle ne casse donc pas les colonnes. */
  .ink-card__prices{
    display:grid;
    grid-template-columns:max-content max-content;
    column-gap:1.7em;
    row-gap:2px;
    justify-content:center;
    /* margin-top:auto pousse le bloc prix + bouton au fond de la carte, quelle
       que soit la longueur du titre. */
    margin:auto 0 0;padding:16px 0 12px;
    list-style:none;
    color:var(--card-ink);
    font-size:13px;letter-spacing:0;line-height:1.7;
    transition:color .45s ease,opacity .35s ease;
  }
  .ink-card__prices li{display:contents;}

  .ink-card__prices .sz{
    font-weight:var(--sz-w,400);
    font-style:var(--sz-i,normal);
  }
  .ink-card__prices .pr{
    font-weight:var(--pr-w,500);
    font-style:var(--pr-i,normal);
  }

  /* Bouton pleine largeur, à fleur des bords bas de la carte. */
  /* `position:static` est délibéré : c'est ce qui fait que le ::after ci-dessous
     s'ancre sur la CARTE et non sur le bouton, et couvre donc toute la carte. */
  /* Barre tout en bas de la carte, sous le prix. Elle ne touche aucun bord :
     la gouttière du corps lui donne sa marge latérale, donc elle s'aligne sur
     le titre, et le padding bas du corps la décolle du bord inférieur. */
  .ink-card__cta{
    display:block;
    width:100%;
    padding:13px 12px;
    background:#0a0a0a;
    color:var(--cream);
    border:1px solid transparent;
    font-size:12px;font-weight:600;letter-spacing:.06em;
    text-transform:uppercase;text-align:center;
    transition:border-color .45s ease;
  }

  /* Le focus se voit sur la carte entière, puisque c'est elle le lien. */
  .ink-card:focus-visible{
    outline:2px solid #0a0a0a;
    outline-offset:3px;
  }

  /* --- Survol et focus clavier -------------------------------------------- */

  .ink-card:hover,
  .ink-card:focus-visible{
    --card-ink:var(--cream);
  }
  .ink-card:hover .ink-card__hover,
  .ink-card:focus-visible .ink-card__hover,
  .ink-card:hover .ink-card__scrim,
  .ink-card:focus-visible .ink-card__scrim{
    opacity:1;
  }
  .ink-card:hover .ink-card__shot,
  .ink-card:focus-visible .ink-card__shot{
    opacity:0;
  }
  /* Survol façon Crivelli : le prix s'efface et la barre SHOP se pose sur le
     bas de l'image. Le prix n'est pas retiré du flux, sinon la carte se
     raccourcirait sous le curseur ; sa place devient de l'image. Le filet
     supérieur détache la barre du visuel sans l'encadrer. */
  .ink-card:hover .ink-card__prices,
  .ink-card:focus-visible .ink-card__prices{
    opacity:0;
  }
  .ink-card:hover .ink-card__cta,
  .ink-card:focus-visible .ink-card__cta{
    border-color:rgba(247,239,224,.5);
  }

  /* Sans image d'ambiance il n'y a rien à révéler : la carte reste au repos. */
  .ink-card--flat:hover,
  .ink-card--flat:focus-visible{--card-ink:#0a0a0a;}
  .ink-card--flat:hover .ink-card__shot,
  .ink-card--flat:focus-visible .ink-card__shot{opacity:1;}
  .ink-card--flat:hover .ink-card__prices,
  .ink-card--flat:focus-visible .ink-card__prices{opacity:1;}
  .ink-card--flat:hover .ink-card__cta,
  .ink-card--flat:focus-visible .ink-card__cta{border-color:transparent;}

  /* Le fondu est déclenché par l'utilisateur, il reste sous prefers-reduced-motion.
     Seules les durées sont raccourcies pour éviter la traîne. */
  @media(prefers-reduced-motion:reduce){
    .ink-card__hover,.ink-card__scrim,.ink-card__shot,
    .ink-card__title,.ink-card__badge,.ink-card__prices,.ink-card__cta{
      transition-duration:.01s;
    }
  }