/* =========================================================
   Wah! — page « Actualités » (templates/actualites.php)
   Chargé après homepage.css et rubriques.css, dont il reprend les jetons et les composants.
   ========================================================= */

/* Ouverture : l'article à la une sur la feuille scotchée */
.wah-actualites .titre .chapo-2 a{color:#fff;text-decoration:underline;text-decoration-color:var(--cyan);text-decoration-thickness:2px;text-underline-offset:4px}
.wah-actualites .a-la-une{transform:rotate(-1deg);padding-top:clamp(30px,3vw,40px)}
.wah-actualites .a-la-une .kicker{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:600;color:var(--encre-douce)}
.wah-actualites .a-la-une .kicker span{font-size:13px;font-weight:700;padding:5px 12px;border-radius:40px;background:var(--nuit);color:var(--cyan)}
.wah-actualites .a-la-une .img{margin-top:16px;border-radius:4px;overflow:hidden;aspect-ratio:16/9;background:var(--lavande)}
.wah-actualites .a-la-une .img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.wah-actualites .a-la-une:hover .img img{transform:scale(1.03)}
.wah-actualites .a-la-une .date{margin-top:16px}
.wah-actualites .a-la-une h2{font-size:clamp(1.35rem,2.1vw,1.85rem);line-height:1.12;letter-spacing:-.02em;margin-top:6px;padding:0;border:0;text-wrap:balance}
.wah-actualites .a-la-une h2 span,.wah-actualites .carte h3 span,.wah-actualites .portrait h3 span{background:var(--trait,var(--trait-cyan)) no-repeat 0 84%/0% .45em;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size .55s var(--ease)}
.wah-actualites .a-la-une:hover h2 span,.wah-actualites .a-la-une h2 a:focus-visible span{background-size:100% .45em}
.wah-actualites .a-la-une .resume{margin-top:10px;color:var(--encre-douce);font-size:15px;line-height:1.55}
.wah-actualites .a-la-une .bouton{margin-top:20px}

.wah-actualites .vers-news{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:700;text-decoration:underline;text-decoration-color:var(--lilas);text-decoration-thickness:3px;text-underline-offset:5px}
.wah-actualites .vers-news svg{width:16px;height:16px}

.wah-actualites .fil-actualite{--trait:var(--trait-cyan)}
.wah-actualites .fil-projets{--trait:var(--trait-lilas)}
.wah-actualites .fil-portrait{--trait:var(--trait-rouge)}

/* Portraits « What About Her ? » : des tirages posés de travers */
.wah-actualites .tirages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(36px,4vw,56px) clamp(24px,3vw,44px)}
.wah-actualites .portrait{position:relative}
.wah-actualites .tirage{background:#fff;padding:10px 10px 0;border-radius:4px;box-shadow:var(--ombre-carte);transform:rotate(-2deg);transition:transform .6s var(--ease)}
.wah-actualites .portrait:nth-child(3n+2) .tirage{transform:rotate(1.5deg)}
.wah-actualites .portrait:nth-child(3n) .tirage{transform:rotate(-.8deg)}
.wah-actualites .portrait:hover .tirage{transform:rotate(0) translateY(-6px)}
.wah-actualites .tirage img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:top}
.wah-actualites .portrait .serie{display:block;margin-top:22px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--encre-douce)}
.wah-actualites .portrait h3{font-size:clamp(1.3rem,1.8vw,1.6rem);line-height:1.1;letter-spacing:-.02em;margin-top:4px}

/* Newsletter : l'abonnement sur le mur, les anciens numéros sur une feuille */
.wah-actualites .newsletter{background:var(--nuit);color:#fff;position:relative;overflow:hidden;isolation:isolate;scroll-margin-top:72px}
.wah-actualites .newsletter::before{content:"";position:absolute;z-index:-1;width:min(900px,62vw);aspect-ratio:2000/1800;right:-14%;top:50%;translate:0 -50%;background:url(../img/fond.png) center/contain no-repeat;transform:rotate(18deg)}
.wah-actualites .newsletter .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(36px,6vw,96px);align-items:center;padding-top:clamp(56px,7vw,104px);padding-bottom:clamp(56px,7vw,104px)}
.wah-actualites .newsletter h2{font-size:clamp(1.9rem,3.6vw,3.2rem);line-height:1.02;letter-spacing:-.03em;max-width:16ch;text-wrap:balance}
.wah-actualites .newsletter h2 em{font-style:normal;color:var(--cyan)}
.wah-actualites .newsletter .abonnement>p{color:var(--lavande-2);margin-top:16px;max-width:48ch}
.wah-actualites .numeros-news{background:var(--papier);color:var(--encre);border-radius:4px;padding:clamp(26px,3vw,36px) clamp(22px,3vw,36px);transform:rotate(1.2deg);box-shadow:var(--ombre-feuille);position:relative}
.wah-actualites .numeros-news::before{content:"";position:absolute;top:-16px;left:50%;translate:-50% 0;width:118px;height:34px;background:rgba(95,255,255,.78);mix-blend-mode:multiply;transform:rotate(-3deg)}
.wah-actualites .numeros-news h3{font-size:1.25rem;line-height:1.2;padding-bottom:10px;border-bottom:3px solid var(--nuit)}
.wah-actualites .numeros-news li{border-bottom:1px solid var(--filet)}
.wah-actualites .numeros-news a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;font-size:15px;font-weight:600}
.wah-actualites .numeros-news a:hover{color:var(--violet)}
.wah-actualites .numeros-news li:first-child a{font-weight:800}

/* Module « Inscription » de Divi, à la charte : champ et bouton en pilules */
.wah-actualites .formulaire{margin-top:28px;max-width:560px}
.wah-actualites .formulaire .et_pb_newsletter{padding:0!important;background:none!important;margin:0!important}
.wah-actualites .formulaire .et_pb_newsletter_description{display:none}
.wah-actualites .formulaire .et_pb_newsletter_form{padding:0!important;width:100%!important;max-width:none!important}
.wah-actualites .formulaire .et_pb_newsletter_fields{display:flex;flex-wrap:wrap;gap:10px;padding:6px;border-radius:40px;background:#fff}
.wah-actualites .formulaire .et_pb_newsletter_fields>p{margin:0!important;padding:0!important;width:auto!important;flex:1 1 220px}
.wah-actualites .formulaire .et_pb_newsletter_fields>p.et_pb_newsletter_button_wrap{flex:0 0 auto}
/* Les réglages du module (texte blanc, bouton blanc) sont imprimés par Divi avec des sélecteurs forts : #main-content passe devant */
#main-content.wah-actualites .formulaire .et_pb_newsletter_form p input.input{width:100%;height:100%;min-height:46px;border:0!important;border-radius:40px!important;background:transparent!important;color:var(--nuit)!important;font:500 16px/1.4 Poppins,sans-serif!important;padding:10px 18px!important}
#main-content.wah-actualites .formulaire .et_pb_newsletter_form p .input::-webkit-input-placeholder{color:#5c5c8a!important;opacity:1}
#main-content.wah-actualites .formulaire .et_pb_newsletter_form p .input::placeholder{color:#5c5c8a!important;opacity:1}
body #page-container #main-content.wah-actualites .formulaire .et_pb_newsletter_button.et_pb_button{display:inline-flex!important;align-items:center;justify-content:center;min-height:46px;margin:0!important;padding:11px 24px!important;border:0!important;border-radius:40px!important;background:var(--nuit)!important;color:var(--cyan)!important;font:700 15px/1.3 Poppins,sans-serif!important;letter-spacing:0!important;text-transform:none!important}
body #page-container #main-content.wah-actualites .formulaire .et_pb_newsletter_button.et_pb_button:hover{background:var(--violet)!important;color:#fff!important}
.wah-actualites .formulaire .et_pb_newsletter_button.et_pb_button::after,.wah-actualites .formulaire .et_pb_newsletter_button.et_pb_button::before{display:none!important}
.wah-actualites .formulaire .et_pb_newsletter_result{color:#fff;font-weight:600;margin-bottom:12px}
.wah-actualites .formulaire .et_pb_newsletter_result h2{font-size:1.1rem;color:var(--cyan)}
.wah-actualites .formulaire :focus-visible{outline-color:var(--cyan)}

/* ---------- Responsive ---------- */
@media (max-width:1060px){
  .wah-actualites .tirages{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wah-actualites .newsletter .wrap{grid-template-columns:minmax(0,1fr)}
  .wah-actualites .numeros-news{max-width:520px}
}
@media (max-width:720px){
  .wah-actualites .tirages{grid-template-columns:minmax(0,1fr)}
  .wah-actualites .a-la-une{transform:rotate(-.6deg)}
  .wah-actualites .tirages{max-width:420px}
}