/* =========================================================
   Wah! — rubrique « Ressources » (templates/ressources.php)
   Chargé après homepage.css, dont il reprend les jetons et les bases (.wah-home).
   ========================================================= */

/* Ouverture : titre à gauche, sommaire en feuille scotchée à droite */
.wah-ressources .ouverture::before{width:min(1000px,70vw);right:-16%;top:50%;bottom:auto;translate:0 -50%;background-image:url(../img/fond.png);transform:rotate(-24deg)}
.wah-ressources .ouverture .wrap{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
.wah-ressources .ariane{font-size:14px;color:var(--lavande-2);display:flex;gap:8px;flex-wrap:wrap}
.wah-ressources .ariane a{color:#fff;text-decoration:underline;text-decoration-color:var(--cyan);text-decoration-thickness:2px;text-underline-offset:4px}
.wah-ressources .titre h1{color:var(--cyan);font-size:clamp(3rem,6.2vw,6rem);line-height:.86;letter-spacing:-.04em;margin-top:clamp(18px,2.4vw,32px)}
.wah-ressources .titre .chapo{font-size:clamp(1.25rem,2vw,1.75rem);font-weight:700;line-height:1.25;margin-top:clamp(18px,2vw,28px);max-width:20ch;text-wrap:balance}
.wah-ressources .titre .chapo-2{font-size:15px;color:var(--lavande-2);margin-top:18px;max-width:38ch;line-height:1.6}

.wah-ressources .sommaire{background:var(--papier);color:var(--encre);border-radius:4px;padding:clamp(28px,3vw,40px) clamp(22px,3vw,44px) clamp(24px,3vw,36px);position:relative;transform:rotate(1.2deg);box-shadow:0 30px 60px -20px rgba(0,0,30,.65),0 6px 14px rgba(0,0,30,.25);animation:wah-pose-sommaire .9s var(--ease) both}
@keyframes wah-pose-sommaire{from{transform:translateY(28px) rotate(4deg)}}
.wah-ressources .sommaire h2{font-size:clamp(1.4rem,2.2vw,1.9rem);line-height:1.1;letter-spacing:-.02em;padding-bottom:12px;border-bottom:3px solid var(--nuit)}
.wah-ressources .etageres-liste li{border-bottom:1px solid var(--filet)}
.wah-ressources .etageres-liste a{display:grid;grid-template-columns:28px 1fr 20px;gap:8px;align-items:baseline;padding:10px 0 9px}
.wah-ressources .etageres-liste .num{font-size:13px;font-weight:600;color:var(--encre-douce);font-variant-numeric:tabular-nums}
.wah-ressources .etageres-liste .t{font-size:clamp(1rem,1.2vw,1.12rem);font-weight:800;line-height:1.2;letter-spacing:-.01em}
.wah-ressources .etageres-liste .r{display:block;font-size:13px;font-weight:500;color:var(--encre-douce);margin-top:3px}
.wah-ressources .etageres-liste svg{width:18px;height:18px;align-self:center;transition:transform .45s var(--ease)}
.wah-ressources .etageres-liste .tt{background:var(--trait) no-repeat 0 78%/0% .6em;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size .55s var(--ease)}
.wah-ressources .etageres-liste a:hover .tt,.wah-ressources .etageres-liste a:focus-visible .tt{background-size:100% .6em}
.wah-ressources .etageres-liste a:hover svg,.wah-ressources .etageres-liste a:focus-visible svg{transform:translateY(4px)}
.wah-ressources .etageres-liste li:nth-child(3n+1){--trait:var(--trait-cyan)}
.wah-ressources .etageres-liste li:nth-child(3n+2){--trait:var(--trait-lilas)}
.wah-ressources .etageres-liste li:nth-child(3n+3){--trait:var(--trait-rouge)}
.wah-ressources .recherche{margin-top:clamp(18px,2.2vw,26px);padding-left:20px}

/* Les étagères : une ligne par sous-rubrique, fonds blanc et lavande en alternance */
.wah-ressources .etagere{padding:clamp(48px,6vw,88px) 0;scroll-margin-top:100px}
.wah-ressources .etagere:nth-of-type(even){background:var(--lavande)}
.wah-ressources .etagere .wrap{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,5fr) minmax(0,4fr);gap:clamp(24px,4vw,64px);align-items:center}
.wah-ressources .etagere .illu{justify-self:center;width:100%;max-width:240px}
.wah-ressources .etagere .num{display:block;font-size:14px;font-weight:600;color:var(--encre-douce);font-variant-numeric:tabular-nums}
.wah-ressources .etagere h2{font-size:clamp(1.7rem,3vw,2.6rem);line-height:1.05;letter-spacing:-.025em;margin-top:8px;text-wrap:balance}
.wah-ressources .etagere h2 a span{background:var(--trait) no-repeat 0 78%/0% .5em;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size .55s var(--ease)}
.wah-ressources .etagere h2 a:hover span,.wah-ressources .etagere h2 a:focus-visible span{background-size:100% .5em}
.wah-ressources .etagere:nth-of-type(3n+1){--trait:var(--trait-rouge)}
.wah-ressources .etagere:nth-of-type(3n+2){--trait:var(--trait-cyan)}
.wah-ressources .etagere:nth-of-type(3n+3){--trait:var(--trait-lilas)}
/* Divi stylise blockquote (bordure, marges, italique) : on reprend la main */
.wah-ressources .etagere blockquote{margin:14px 0 0;padding:0 0 0 16px;border:0;border-left:3px solid var(--nuit);font-style:normal;quotes:none;font-size:clamp(1.05rem,1.3vw,1.2rem);font-weight:600;line-height:1.4;color:var(--encre);max-width:34ch}
.wah-ressources .etagere .desc{margin-top:12px;color:var(--encre-douce);max-width:46ch}
.wah-ressources .etagere .lien{margin-top:22px;border-color:var(--nuit);border-radius:40px}
.wah-ressources .etagere .lien:hover{background:var(--nuit);color:#fff}

/* Pile de couvertures, posée de travers comme des disques sur une table */
.wah-ressources .pile{position:relative;height:clamp(220px,20vw,280px);width:100%;max-width:380px;justify-self:center}
.wah-ressources .pile img{position:absolute;max-width:none;border-radius:3px;box-shadow:0 14px 26px -12px rgba(0,0,30,.55),0 2px 6px rgba(0,0,30,.18);transition:transform .6s var(--ease);background:#fff}
.wah-ressources .pile.livres img{width:40%;height:auto;aspect-ratio:2/3;object-fit:cover;top:8%}
.wah-ressources .pile.livres img:nth-child(1){left:2%;transform:rotate(-7deg)}
.wah-ressources .pile.livres img:nth-child(2){left:30%;top:2%;transform:rotate(1deg);z-index:2}
.wah-ressources .pile.livres img:nth-child(3){left:58%;transform:rotate(8deg)}
.wah-ressources .pile.ecrans img{width:62%;height:auto;aspect-ratio:3/2;object-fit:cover}
.wah-ressources .pile.ecrans img:nth-child(1){left:0;top:4%;transform:rotate(-5deg)}
.wah-ressources .pile.ecrans img:nth-child(2){left:36%;top:22%;transform:rotate(4deg);z-index:2}
.wah-ressources .pile.ecrans img:nth-child(3){left:8%;top:48%;transform:rotate(-2deg);z-index:3}
.wah-ressources .etagere:hover .pile.livres img:nth-child(1){transform:rotate(-11deg) translateX(-10px)}
.wah-ressources .etagere:hover .pile.livres img:nth-child(3){transform:rotate(12deg) translateX(10px)}
.wah-ressources .etagere:hover .pile.ecrans img:nth-child(2){transform:rotate(7deg) translate(10px,-6px)}
.wah-ressources .pile.icones{display:flex;align-items:center;justify-content:center;gap:24px}
.wah-ressources .pile.icones img{position:static;width:44%;box-shadow:none;background:none}

/* ---------- Responsive ---------- */
@media (max-width:1060px){
  .wah-ressources .ouverture .wrap{grid-template-columns:minmax(0,1fr)}
  .wah-ressources .ouverture::before{right:-50%;top:auto;bottom:-14%;translate:none;width:min(900px,150vw)}
  .wah-ressources .etagere .wrap{grid-template-columns:minmax(0,2fr) minmax(0,3fr)}
  .wah-ressources .etagere .illu{grid-row:1;max-width:200px}
  .wah-ressources .etagere .texte{grid-row:1/span 2;grid-column:2}
  .wah-ressources .etagere .pile{grid-column:1;grid-row:2;max-width:300px;height:220px}
}
@media (max-width:720px){
  .wah-ressources .sommaire{transform:rotate(.8deg);padding-top:34px;animation-name:wah-pose-sommaire-mobile}
  .wah-ressources .etagere .wrap{grid-template-columns:minmax(0,1fr)}
  .wah-ressources .etagere .illu{grid-row:auto;max-width:150px;justify-self:start}
  .wah-ressources .etagere .texte,.wah-ressources .etagere .pile{grid-row:auto;grid-column:1}
  .wah-ressources .etagere .pile{justify-self:start;max-width:320px;height:200px}
  .wah-ressources .etagere blockquote{max-width:none}
  .wah-ressources .recherche{padding-left:16px}
}
@keyframes wah-pose-sommaire-mobile{from{transform:translateY(20px) rotate(2deg)}}