/* ============================================================
   CONCEPT — les 3 encarts de « C'est quoi, ce délire ? »
   ------------------------------------------------------------
   Parti pris : ne PAS inventer un composant. Les cartes reprennent
   la surface du socle (.pilier, .emb-card, .temo-card) — fond blanc,
   bordure 1px var(--ligne), grand rayon, ombre douce et diffuse,
   légère rotation. Aucun trait noir : le seul élément à traits noirs
   de l'accueil reste le marquee jaune.
   Le seul ajout est une réglure de couleur sous le titre, qui file
   sur toute la largeur à l'ouverture — même objet que la barre jaune
   déjà présente sous .stat-num.
   Ce fichier ajoute l'ouverture automatique au scroll sur mobile
   (voir js/concept-scroll.js) ; il n'écrase jamais le socle.
   ============================================================ */

/* ---------- la ligne triptyque ----------
   Aucun cadre, aucune pastille, aucun fond : trois mentions posées à
   même le crème, ponctuées des flèches orange du composant .triptyque
   d'origine. On neutralise la pastille héritée de style.css. */
.triptyque-ligne{
  display:flex;align-items:baseline;flex-wrap:wrap;
  gap:8px 14px;margin:30px 0 52px;
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(.9rem,1.7vw,1.06rem);letter-spacing:.045em;line-height:1.3;
  color:var(--encre);
}
.triptyque-ligne span{background:none;border:0;border-radius:0;padding:0}
/* terra et pas orange : l'orange reste à l'action */
.triptyque-ligne b{color:var(--terra);font-weight:800}
.triptyque-ligne i{
  font-style:normal;color:var(--orange);
  font-size:1.3em;line-height:1;
}

/* ---------- la carte ----------
   Valeurs reprises telles quelles de .pilier (css/style.css). */
.panneau{
  background:#fff;
  border:1px solid var(--ligne);
  border-radius:18px;
  box-shadow:0 14px 38px rgba(31,26,19,.08);
  padding:14px 18px 40px;
  display:flex;flex-direction:column;
  transition:transform .34s cubic-bezier(.16,1,.3,1),
             box-shadow .34s cubic-bezier(.16,1,.3,1),
             border-color .34s ease;
}
/* les trois surfaces sont identiques : c'est l'accent qui les distingue */
.panneau-alt{background:#fff}

/* un accent par carte — jamais d'orange, il est réservé à l'action */
.piliers-panneaux .panneau:nth-child(1){--accent:var(--jaune)}
.piliers-panneaux .panneau:nth-child(2){--accent:var(--terra)}
.piliers-panneaux .panneau:nth-child(3){--accent:var(--jaune)}

/* ---------- ouvert : la carte se redresse et lévite ----------
   Exactement le geste de .pilier.open du socle.
   :focus-visible et :hover ne sont câblés QUE hors mode scroll — en
   mode scroll c'est .open qui pilote à la fois la chromatique et
   l'échange de contenu, et les laisser agir seuls donnerait une carte
   qui a l'air ouverte tout en affichant encore son texte de repos. */
.panneau.open,
.piliers:not(.piliers-scroll) .panneau:focus-visible{
  transform:rotate(0deg) translateY(-6px);
  box-shadow:0 26px 54px rgba(31,26,19,.14);
  border-color:rgba(31,26,19,.16);
}
@media (hover:hover){
  .piliers:not(.piliers-scroll) .panneau:hover{
    transform:rotate(0deg) translateY(-6px);
    box-shadow:0 26px 54px rgba(31,26,19,.14);
    border-color:rgba(31,26,19,.16);
  }
}

/* ---------- la photo ----------
   Plus d'encadrement noir : un filet interne de 1px, posé en ::after
   parce que les <img> sont en position:absolute et recouvriraient un
   box-shadow inset. */
.panneau .pilier-img{
  border:0;border-radius:12px;
  aspect-ratio:4/3;margin:0 -4px 16px;flex:none;
}
.panneau .pilier-img::after{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  border-radius:12px;box-shadow:inset 0 0 0 1px var(--ligne);
}

/* ---------- la réglure sous le titre ----------
   Même famille que .stat-num::after. On anime scaleX et pas width :
   une transition de width relayouterait le titre à chaque frame. */
.panneau h3{margin-bottom:0}
.panneau h3::after{
  content:'';display:block;width:100%;height:4px;border-radius:2px;
  background:var(--accent,var(--jaune));margin:10px 0 12px;
  transform:scaleX(.16);transform-origin:left center;
  transition:transform .45s cubic-bezier(.16,1,.3,1);
}
.panneau.open h3::after,
.piliers:not(.piliers-scroll) .panneau:focus-visible h3::after{transform:scaleX(1)}
@media (hover:hover){
  .piliers:not(.piliers-scroll) .panneau:hover h3::after{transform:scaleX(1)}
}

.panneau-accroche{font-size:.95rem;color:var(--encre)}
.panneau-note{
  display:block;margin-top:10px;
  font-family:var(--hand);font-size:1.08rem;color:var(--gris);
  transform:rotate(-1.2deg);transform-origin:left center;
}
.panneau .pilier-plus p{font-size:.92rem;color:var(--gris)}

/* ---------- le « + » : une affordance, pas un bouton ---------- */
.panneau-plus{
  position:absolute;right:18px;bottom:12px;
  font-family:var(--display);font-weight:800;font-size:1.45rem;line-height:1;
  color:var(--orange);opacity:.7;
  transition:transform .38s cubic-bezier(.16,1,.3,1),opacity .3s ease;
}
.panneau.open .panneau-plus,
.piliers:not(.piliers-scroll) .panneau:focus-visible .panneau-plus{
  transform:rotate(45deg);opacity:1;
}
@media (hover:hover){
  .piliers:not(.piliers-scroll) .panneau:hover .panneau-plus{transform:rotate(45deg);opacity:1}
}

/* ---------- le créneau note / texte long ----------
   Desktop : flux normal — la note reste, le texte long se déplie.
   Mobile  : les deux enfants sont empilés dans la MÊME cellule de
   grille, donc la hauteur du créneau = la plus haute des deux, figée
   une fois pour toutes. Ouvrir/fermer ne change alors plus AUCUNE
   hauteur : zéro layout shift pendant le scroll. Rien de ce qui
   bascule n'entraîne de relayout — opacity, transform et visibility
   uniquement. */

/* ---------- mobile : ouverture pilotée par le scroll ---------- */
@media (max-width:760px){
  .triptyque-ligne{
    flex-direction:column;align-items:flex-start;
    gap:7px;margin:24px 0 38px;
    font-size:.94rem;letter-spacing:.04em;
  }
  /* en colonne, les flèches horizontales n'ont plus de sens : chaque
     mention porte la sienne, tournée vers le bas */
  .triptyque-ligne i{display:none}
  .triptyque-ligne span{position:relative;padding-left:22px}
  .triptyque-ligne span::before{
    content:'→';position:absolute;left:0;top:0;
    color:var(--orange);font-size:1.05em;line-height:inherit;
  }

  .panneau{
    padding:12px 15px 38px;
    box-shadow:0 10px 26px rgba(31,26,19,.07);
    transform:rotate(calc(var(--rot,0deg) * .45));
  }
  .panneau .pilier-img{aspect-ratio:16/11}
  .panneau.open{
    transform:rotate(0deg) translateY(-4px);
    box-shadow:0 18px 40px rgba(31,26,19,.12);
    border-color:rgba(31,26,19,.16);
  }

  /* le créneau à hauteur figée */
  .piliers-scroll .panneau-slot{display:grid}
  .piliers-scroll .panneau-slot>*{grid-area:1/1;align-self:start}

  /* L'accroche cède la place au texte long, dans la même cellule.
     Fondu enchaîné en contre-phase et en `linear` : deux rampes
     opposées en linear somment à une constante, donc le créneau ne se
     vide jamais. Avec un easing en `ease`, le milieu du croisement
     tombait à ~0.05 d'encre — un blanc de ~90 ms très visible en
     scroll rapide. `visibility` (transition discrète, donc décalée en
     fin de fondu) sort le bloc masqué du hit-test ET de l'arbre
     d'accessibilité : sans elle, le texte invisible reste cliquable
     et lu par-dessus le texte affiché. */
  .piliers-scroll .panneau-repos{
    transition:opacity .24s linear .1s,transform .34s cubic-bezier(.16,1,.3,1) .1s,visibility 0s linear 0s;
  }
  .piliers-scroll .panneau.open .panneau-repos{
    opacity:0;transform:translateY(-8px);visibility:hidden;
    transition:opacity .2s linear,transform .34s cubic-bezier(.16,1,.3,1),visibility 0s linear .2s;
  }

  .piliers-scroll .panneau .pilier-plus{grid-template-rows:1fr;transition:none}
  .piliers-scroll .panneau .pilier-plus p{
    padding-top:0;opacity:0;transform:translateY(9px);visibility:hidden;
    transition:opacity .2s linear,transform .34s cubic-bezier(.16,1,.3,1),visibility 0s linear .2s;
  }
  .piliers-scroll .panneau.open .pilier-plus p{
    opacity:1;transform:translateY(0);visibility:visible;
    transition:opacity .24s linear .1s,transform .38s cubic-bezier(.16,1,.3,1) .1s,visibility 0s linear 0s;
  }

  /* Une fenêtre desktop réduite sous 760 px coche à la fois
     (hover:hover) et le mode scroll : les règles :hover du socle
     donneraient la photo révélée et la carte soulevée sur un panneau
     resté fermé. En mode scroll, seul .open décide — on les neutralise
     ici plutôt que de toucher à css/style.css, qui est validé. */
  @media (hover:hover){
    .piliers-scroll .panneau:hover{
      transform:rotate(calc(var(--rot,0deg) * .45));
      box-shadow:0 10px 26px rgba(31,26,19,.07);
      border-color:var(--ligne);
    }
    .piliers-scroll .panneau.open:hover{
      transform:rotate(0deg) translateY(-4px);
      box-shadow:0 18px 40px rgba(31,26,19,.12);
      border-color:rgba(31,26,19,.16);
    }
    .piliers-scroll .panneau:hover h3::after{transform:scaleX(.16)}
    .piliers-scroll .panneau.open:hover h3::after{transform:scaleX(1)}
    .piliers-scroll .panneau:hover .panneau-plus{transform:none;opacity:.7}
    .piliers-scroll .panneau.open:hover .panneau-plus{transform:rotate(45deg);opacity:1}
    .piliers-scroll .panneau:hover .pilier-img .img-hover{opacity:0;transform:scale(1.07)}
    .piliers-scroll .panneau.open:hover .pilier-img .img-hover{opacity:1;transform:scale(1)}
  }
}

/* ---------- accessibilité mouvement ----------
   L'état ouvert reste lisible sans une seule transition : réglure
   pleine largeur, « + » en croix, photo révélée. */
@media (prefers-reduced-motion:reduce){
  .panneau,.panneau h3::after,.panneau-plus,
  .panneau-note,.panneau .pilier-plus p{transition:none}
  .panneau{transform:none}
}