/* =========================================================
   Wah! — pages « Dispositifs » (body.wah-io.wah-dispo), voir CHARTE-DISPOSITIFS.md
   S'ajoute à css/initiative.css (en-tête, sommaire, cartes, grilles, fin de page communs).
   Les rôles des blocs (wah-d-…) sont posés par dispositifs.php à l'affichage.
   ========================================================= */

/* En-tête : l'accroche du dispositif sous le titre */
.wah-dispo #main-content p.wah-d-accroche{max-width:62ch;margin:12px 0 0;padding:0;color:var(--lavande)!important;font:400 clamp(1rem,1.4vw,1.12rem)/1.55 Poppins,Helvetica,Arial,sans-serif!important}

/* Rangées : la colonne de la page */
.wah-dispo #main-content :is(.wah-d-intro,.wah-d-bloc,.wah-d-suite-bloc) > .et_pb_row{max-width:var(--large);width:calc(100% - 32px);padding:0!important}
.wah-dispo #main-content :is(.wah-d-intro,.wah-d-bloc,.wah-d-suite-bloc) > .et_pb_row + .et_pb_row{margin-top:clamp(20px,3vw,36px)!important}
.wah-dispo #main-content :is(.wah-d-intro,.wah-d-bloc,.wah-d-suite-bloc) .et_pb_text{background:none!important;padding:0!important;border:0!important;max-width:none!important}

/* Introduction, puis blocs titrés : séparés par un filet lavande */
.wah-dispo #main-content .wah-d-intro{padding:clamp(36px,5vw,64px) 0 clamp(24px,3vw,40px)!important}
.wah-dispo #main-content .wah-d-intro + .wah-d-intro{padding-top:0!important}
.wah-dispo #main-content .wah-d-intact{padding-top:clamp(28px,3.5vw,44px)!important}.wah-dispo #main-content .wah-d-bloc{padding:clamp(48px,6vw,80px) 0 clamp(20px,3vw,32px)!important;border-top:1px solid #DCD9FF!important;scroll-margin-top:72px}
.wah-dispo #main-content .wah-io-grille.wah-d-bloc{padding-bottom:clamp(44px,5vw,72px)!important;border-top:0!important}
.wah-dispo #main-content .wah-d-suite-bloc{padding:clamp(24px,3vw,40px) 0!important}
.wah-dispo #main-content .wah-d-bloc h2.wah-io-titre-grille{margin-bottom:clamp(20px,3vw,32px)!important}

/* Textes : colonne de lecture, paragraphes, intertitres */
.wah-dispo #main-content :is(.wah-d-intro,.wah-d-bloc,.wah-d-suite-bloc) .et_pb_text_inner > :is(p,ul,ol,h3,blockquote){max-width:var(--lecture)}
.wah-dispo #main-content :is(.wah-d-intro,.wah-d-bloc,.wah-d-suite-bloc) .et_pb_text:not(:has(.gw-gopf,[class*="wpdm"])) p{font-size:16.5px!important;line-height:1.72!important;font-weight:400!important;padding:0 0 .9em!important}
.wah-dispo #main-content :is(.wah-d-intro,.wah-d-bloc,.wah-d-suite-bloc) .et_pb_text p:last-child{padding-bottom:0!important}
.wah-dispo #main-content .wah-d-intro .et_pb_text_inner > p.wah-io-chapo{font-size:clamp(1.12rem,1.6vw,1.3rem)!important;line-height:1.55!important;font-weight:500!important}
.wah-dispo #main-content :is(.wah-d-intro,.wah-d-bloc,.wah-d-suite-bloc) :is(strong,b){font-weight:700!important}
.wah-dispo #main-content :is(.wah-d-intro,.wah-d-bloc,.wah-d-suite-bloc) .et_pb_text:not(:has(.gw-gopf,[class*="wpdm"])) a:not(.et_pb_button){color:var(--nuit)!important;text-decoration:underline solid var(--cyan)!important;text-decoration-thickness:3px!important;text-underline-offset:4px}
.wah-dispo #main-content h3.wah-io-intertitre{margin:0 0 .5em!important;padding:0!important;font-size:clamp(1.15rem,1.8vw,1.35rem)!important;font-weight:800!important;line-height:1.25!important;letter-spacing:-.015em!important;text-decoration:none!important}
.wah-dispo #main-content h3.wah-d-soustitre{margin:clamp(28px,4vw,48px) 0 clamp(16px,2vw,24px)!important;padding:0!important;font-size:clamp(1.15rem,1.9vw,1.4rem)!important;font-weight:700!important;line-height:1.3!important;letter-spacing:-.01em!important;text-align:left!important}
.wah-dispo #main-content .et_pb_text:first-child h3.wah-d-soustitre:first-child{margin-top:0!important}

/* Citations (« J'attends de me nourrir… ») : filet cyan, texte gras ; groupées quand elles se suivent */
.wah-dispo #main-content blockquote.wah-d-citation{margin:0 0 14px!important;padding:2px 0 2px 20px!important;border:0!important;border-left:4px solid var(--cyan)!important;background:none!important}
.wah-dispo #main-content blockquote.wah-d-citation-premiere{margin-top:clamp(18px,2.4vw,28px)!important}
.wah-dispo #main-content .et_pb_text blockquote.wah-d-citation p{font-size:clamp(1.02rem,1.4vw,1.12rem)!important;line-height:1.5!important;font-weight:600!important;font-style:normal!important;padding:0!important}
.wah-dispo #main-content blockquote.wah-d-citation p::before{content:"«\202F"}
.wah-dispo #main-content blockquote.wah-d-citation p::after{content:"\202F»"}

/* Boutons dans les blocs (« Téléchargez le journal… », « voir l'outil ») : pilule de la charte, alignés à gauche */
.wah-dispo #main-content :is(.wah-d-intro,.wah-d-bloc,.wah-d-suite-bloc) .et_pb_button_module_wrapper{text-align:left!important;margin:14px 0 0!important}

/* Rangées de cartes (« Contenus Wah#1… ») : le mot suit la taille de la carte, comme les trois fiches */
.wah-dispo #main-content .wah-d-cartes .et_pb_image_n10s{container-type:inline-size}
.wah-dispo #main-content .wah-d-cartes .et_pb_image_n10s h2{font-size:clamp(15px,5.6cqi,24px)!important;line-height:1.2!important;padding:0 6cqi 6.5cqi 0!important}

/* Grilles de portraits (images qui ouvrent une fiche) : rangées alignées sur la colonne */
.wah-dispo #main-content :is(.wah-d-bloc,.wah-d-suite-bloc) .et_pb_image{margin-bottom:clamp(12px,2vw,24px)!important}

/* Fin de page : les trois autres dispositifs */
.wah-dispo .wah-d-fiches{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.wah-dispo .wah-d-fiches .illu{height:170px;margin:-22px -24px 18px;overflow:hidden;background:#fff;border-radius:6px 6px 0 0}
.wah-dispo .wah-d-fiches .illu img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;object-position:50% 30%}
.wah-dispo #main-content .wah-io-fiche p.wah-d-pour{order:-1;margin:0 0 6px;color:var(--violet);font:700 12px/1.4 Poppins,Helvetica,Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase}
.wah-dispo .wah-io-fiche .illu{order:-2}

/* Onglets W/A/H/! : Divi fige la section à 1550px et empile les panneaux en absolu ;
   sur écran étroit le panneau W est plus haut et débordait sur les vidéos. Il reprend sa place. */
@media (max-width:980px){
  .wah-dispo #main-content .wah-d-intact{height:auto!important;padding-top:24px!important}
  .wah-dispo #main-content .wah-d-intact > .et_pb_row:first-child{position:relative!important;top:0!important}
  .wah-dispo #main-content .wah-d-intact > .et_pb_row:not(:first-child){top:24px!important}
}