/* =========================================================
   Wah! — fiches pratiques « Initiatives et outils » (body.wah-io), voir CHARTE-INITIATIVES.md
   Les rôles des blocs (wah-io-…) sont posés par initiatives.php à l'affichage.
   Divi règle chaque module (.et_pb_text_3 h4…) : #main-content et !important passent devant.
   ========================================================= */

.wah-io{--nuit:#000058;--cyan:#5FFFFF;--violet:#8265FF;--lilas:#DC87FF;--lavande:#ECEBFF;--papier:#F6F5FF;--encre-douce:#3a3a72;--lecture:760px;--large:1180px;--ease:cubic-bezier(.16,1,.3,1);
  --trait-cyan:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath fill='%235FFFFF' d='M3 5C45 2 140 1 196 4c3 3 3 9 1 12-46 3-140 4-193 1-3-3-3-9-1-12z'/%3E%3C/svg%3E")}
.wah-io #main-content .et_pb_section{background-color:#fff!important;background-image:none!important;border:0!important}
.wah-io #main-content .et_pb_section :is(.et_pb_row,.et_pb_column){background-color:transparent!important}
.wah-io #main-content .et_pb_section:not(.wah-io-grille):not(.wah-io-entete):not(.wah-d-intact) .et_pb_text :is(p,li,h1,h2,h3,h4,h5,h6){font-family:Poppins,Helvetica,Arial,sans-serif!important;text-align:left!important;color:var(--nuit)!important;letter-spacing:0;text-transform:none!important}

/* Fil d'Ariane (extension Wah! En-tête) : aligné sur la colonne de la fiche, pas sur le bord de l'écran */
.wah-io .wah-ariane ol{max-width:var(--large);width:calc(100% - 32px)}

/* 1. En-tête : mur bleu nuit dans le prolongement du menu */
.wah-io #main-content .wah-io-entete{background:var(--nuit)!important;padding:clamp(14px,2vw,24px) 0 clamp(26px,3vw,40px)!important}
.wah-io #main-content .wah-io-entete .et_pb_row{padding:0!important;max-width:var(--large);width:calc(100% - 32px)}
.wah-io #main-content .wah-io-entete .et_pb_column{width:100%!important;margin:0!important;float:none!important;background:none!important}
.wah-io #main-content .wah-io-entete .et_pb_text{background:none!important;padding:0!important;margin:0!important;border:0!important;max-width:none!important}
.wah-io-entete-texte{text-align:left}
/* Surtitre : le chantier, en simple texte lilas (le fil d'Ariane dit déjà « Initiatives et outils ») */
.wah-io #main-content a.wah-io-serie{display:inline-block;margin:0 0 8px;color:var(--lilas);font:700 13px/1.5 Poppins,Helvetica,Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;transition:color .25s}
.wah-io #main-content a.wah-io-serie:hover{color:var(--cyan)}
.wah-io #main-content .wah-io-entete h1.wah-io-titre{max-width:32ch;margin:0;padding:0;color:#fff!important;font:800 clamp(1.7rem,3.3vw,2.45rem)/1.1 Poppins,Helvetica,Arial,sans-serif!important;letter-spacing:-.03em!important;text-wrap:balance}
.wah-io-sommaire{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:clamp(16px,2vw,22px)}
.wah-io-sommaire-titre{color:var(--lilas);font:700 13px/1.4 Poppins,Helvetica,Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase}
/* Sommaire : de simples liens blancs, flèche cyan ; soulignés au survol seulement */
.wah-io-sommaire ul{display:flex;flex-wrap:wrap;gap:6px 26px;margin:0;padding:0!important;list-style:none}
.wah-io-sommaire li{margin:0;padding:0;list-style:none}
.wah-io #main-content .wah-io-sommaire a{display:inline-flex;align-items:baseline;gap:6px;color:#fff;font:600 14px/1.4 Poppins,Helvetica,Arial,sans-serif;text-decoration:none!important;transition:text-decoration-color .25s}
.wah-io #main-content .wah-io-sommaire a::after{content:"↓";color:var(--cyan);font-weight:700}
.wah-io #main-content .wah-io-sommaire a:hover{text-decoration:underline!important;text-decoration-color:var(--cyan)!important;text-decoration-thickness:2px!important;text-underline-offset:5px}

/* 2. Introduction : texte et illustration, puis texte en colonne de lecture */
.wah-io #main-content .wah-io-section-intro{padding:clamp(36px,5vw,64px) 0 clamp(20px,3vw,32px)!important}
.wah-io #main-content .wah-io-section-intro + .wah-io-section-intro{padding-top:0!important}
.wah-io #main-content .wah-io-ouverture{display:flex;align-items:center;gap:clamp(24px,4vw,64px);max-width:var(--large);width:calc(100% - 32px);padding:0 0 clamp(24px,3vw,36px)!important}
.wah-io #main-content .wah-io-ouverture::before,.wah-io #main-content .wah-io-ouverture::after{display:none}
.wah-io #main-content .wah-io-ouverture > .et_pb_column{margin:0!important;padding:0!important;width:auto!important;background:none!important;float:none!important}
.wah-io #main-content .wah-io-ouverture > .et_pb_column:has(.et_pb_text){flex:1 1 0;order:1}
.wah-io #main-content .wah-io-ouverture > .et_pb_column:has(.et_pb_image):not(:has(.et_pb_text)){flex:0 0 clamp(200px,32%,340px);order:2}
.wah-io #main-content .wah-io-inverse > .et_pb_column:has(.et_pb_image):not(:has(.et_pb_text)){order:0}
.wah-io #main-content .wah-io-ouverture > .et_pb_column:empty{display:none}
.wah-io #main-content .wah-io-ouverture .et_pb_image{margin:0 auto!important;width:100%!important;max-width:340px!important;text-align:center}
.wah-io #main-content .wah-io-ouverture .et_pb_image img{width:100%;height:auto;max-height:420px;object-fit:contain}
.wah-io #main-content .wah-io-texte{display:block;max-width:var(--lecture);width:calc(100% - 32px);margin:0 auto 0 max(16px,calc((100% - var(--large))/2))!important;padding:0 0 clamp(16px,2vw,24px)!important}
.wah-io #main-content .wah-io-texte > .et_pb_column{width:100%!important;margin:0!important;padding:0!important;float:none!important;background:none!important}
.wah-io #main-content .wah-io-section-intro .et_pb_text{background:none!important;padding:0!important;margin:0 0 1em!important;border:0!important;max-width:none!important;width:auto!important}
.wah-io #main-content .wah-io-section-intro .et_pb_text:last-child{margin-bottom:0!important}
.wah-io #main-content .wah-io-section-intro p{font-size:16.5px!important;line-height:1.72!important;font-weight:400!important;padding:0 0 .9em!important}
.wah-io #main-content .wah-io-section-intro p:last-child{padding-bottom:0!important}
.wah-io #main-content .wah-io-section-intro p.wah-io-chapo{font-size:clamp(1.12rem,1.6vw,1.3rem)!important;line-height:1.55!important;font-weight:500!important}
.wah-io #main-content .wah-io-section-intro :is(strong,b){font-weight:700!important}
.wah-io #main-content .wah-io-section-intro h3.wah-io-intertitre{margin:0 0 .6em!important;padding:0!important;font-size:clamp(1.3rem,2.2vw,1.65rem)!important;font-weight:800!important;line-height:1.2!important;letter-spacing:-.02em!important}
.wah-io #main-content .wah-io-section-intro h3.wah-io-intertitre:not(:first-child){margin-top:1.4em!important}
.wah-io #main-content .wah-io-section-intro 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-io #main-content .wah-io-section-intro :is(ul,ol){padding:0 0 .9em 1.3em!important}
.wah-io #main-content .wah-io-section-intro li{font-size:16.5px!important;line-height:1.65!important}

/* Les trois fiches « Pourquoi ? Comment ? Attention ! » : un titre de section, trois grandes cartes de même taille */
.wah-io #main-content .wah-io-essentiel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,32px);max-width:var(--large)!important;width:calc(100% - 32px)!important;margin-left:auto!important;margin-right:auto!important;padding:clamp(28px,4vw,52px) 0 clamp(48px,6vw,80px)!important;scroll-margin-top:72px} /* marges et largeurs saisies dans Divi (190 px sur « Communiquer… ») ignorées */
.wah-io #main-content .wah-io-essentiel::before,.wah-io #main-content .wah-io-essentiel::after{display:none}
.wah-io #main-content .wah-io-essentiel > h2.wah-io-titre-grille{grid-column:1/-1;margin-bottom:clamp(4px,1vw,12px)!important}
.wah-io #main-content .wah-io-essentiel > .et_pb_column{width:auto!important;margin:0!important;padding:0!important;float:none!important}
.wah-io #main-content .wah-io-essentiel .et_pb_image_n10s{margin:0!important;width:100%!important;max-width:none!important;container-type:inline-size}
/* Le mot (« POURQUOI ? ») est un texte posé sur l'image, en taille fixe chez Divi : il suit ici la taille de la carte */
.wah-io #main-content .wah-io-essentiel .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}
.wah-io #main-content .wah-io-essentiel :is(.et_pb_module_inner,.n10s-block){width:100%!important;max-width:100%!important;margin:0!important}
.wah-io #main-content .wah-io-essentiel .et_pb_image_n10s img{width:100%!important;max-width:100%!important;height:auto}

/* 3. Grilles d'exemples : alternance lavande et blanc, titre souligné au pinceau */
.wah-io #main-content .wah-io-grille{padding:clamp(44px,5vw,72px) 0!important;scroll-margin-top:72px}
.wah-io #main-content .wah-io-grille:nth-child(odd of .wah-io-grille){background-color:var(--lavande)!important}
.wah-io #main-content .wah-io-grille .et_pb_row{max-width:var(--large);width:calc(100% - 32px);padding:0!important}
.wah-io #main-content .wah-io-grille .et_pb_text{background:none!important;padding:0!important;margin:0!important;border:0!important;max-width:none!important}
.wah-io #main-content .wah-io-grille .et_pb_row + .et_pb_row,.wah-io #main-content .wah-io-grille .et_pb_text + .et_pb_text{margin-top:clamp(18px,2.4vw,28px)!important}
.wah-io #main-content h2.wah-io-titre-grille{margin:0!important;padding:0!important;color:var(--nuit)!important;font:800 clamp(1.6rem,3vw,2.2rem)/1.15 Poppins,Helvetica,Arial,sans-serif!important;letter-spacing:-.025em!important;text-align:left!important;text-transform:none!important}
.wah-io #main-content h2.wah-io-titre-grille::after{content:"";display:block;width:clamp(90px,12vw,140px);height:.42em;margin-top:.18em;background:var(--trait-cyan) left center/100% 100% no-repeat}
/* Vignettes Go Portfolio : le texte qui descend au survol (titre, résumé, bouton) tient dans la vignette */
.wah-io #main-content .wah-io-grille .gw-gopf-post-overlay-inner{padding-top:0!important}
.wah-io #main-content .wah-io-grille .gw-gopf-post-content{padding:12px 14px!important}
.wah-io #main-content .wah-io-grille .gw-gopf-post-content :is(h2,h3,h4){margin:0 0 4px!important;padding:0!important}
.wah-io #main-content .wah-io-grille .gw-gopf-post-content :is(h2,h3,h4) a{font-size:14px!important;line-height:1.25!important}
.wah-io #main-content .wah-io-grille .gw-gopf-post-excerpt{font-size:12px!important;line-height:1.35!important;margin:0 0 6px!important;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.wah-io #main-content .wah-io-grille .gw-gopf-post-content .gw-gopf-btn{font-size:12px!important;line-height:1.3!important;padding:4px 12px!important}

/* 4. Fin de page : les autres fiches du chantier, puis l'appel. Un filet bleu nuit sur toute la largeur la sépare toujours de la dernière grille. */
.wah-io .wah-io-suite{position:relative;max-width:var(--large);width:calc(100% - 32px);margin:0 auto;padding:clamp(48px,6vw,80px) 0}
.wah-io .wah-io-suite::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--nuit);box-shadow:0 0 0 100vmax var(--nuit);clip-path:inset(0 -100vmax)}
.wah-io .wah-io-suite-tete{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:6px 24px;margin-bottom:clamp(28px,4vw,40px)}
.wah-io #main-content .wah-io-suite-num{grid-column:1/-1;margin:0;padding:0;color:var(--violet);font:700 13px/1.4 Poppins,Helvetica,Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase}
.wah-io #main-content .wah-io-suite h2{margin:0;padding:0;color:var(--nuit);font:800 clamp(1.5rem,2.8vw,2.1rem)/1.12 Poppins,Helvetica,Arial,sans-serif;letter-spacing:-.025em;text-wrap:balance}
.wah-io #main-content .wah-io-tous{display:inline-block;padding:9px 20px;border:2px solid var(--nuit);border-radius:40px;color:var(--nuit);font:700 14px/1.3 Poppins,Helvetica,Arial,sans-serif;white-space:nowrap;transition:background-color .25s,color .25s}
.wah-io #main-content .wah-io-tous:hover{background:var(--nuit);color:#fff}
.wah-io .wah-io-fiches{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:clamp(16px,2.4vw,28px);margin:0;padding:0!important;list-style:none}
.wah-io .wah-io-fiche{position:relative;display:flex;flex-direction:column;margin:0;padding:22px 24px;list-style:none;background:var(--papier);border-radius:6px;box-shadow:0 14px 26px -16px rgba(0,0,30,.4),0 2px 6px rgba(0,0,30,.08);transition:transform .5s var(--ease)}
.wah-io .wah-io-fiche:hover{transform:translateY(-4px) rotate(-.6deg)}
.wah-io .wah-io-fiche:nth-child(even):hover{transform:translateY(-4px) rotate(.6deg)}
.wah-io .wah-io-fiche .illu{height:120px;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.wah-io .wah-io-fiche .illu img{max-height:120px;width:auto;max-width:80%;object-fit:contain}
.wah-io #main-content .wah-io-fiche h3{margin:0;padding:0;font:800 1.15rem/1.2 Poppins,Helvetica,Arial,sans-serif;letter-spacing:-.015em;text-wrap:balance}
.wah-io #main-content .wah-io-fiche h3 a{color:var(--nuit)}
.wah-io #main-content .wah-io-fiche h3 a::after{content:"";position:absolute;inset:0;border-radius:6px}
.wah-io #main-content .wah-io-fiche h3 span{background:var(--trait-cyan) no-repeat 0 82%/0% .5em;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size .55s var(--ease)}
.wah-io #main-content .wah-io-fiche:is(:hover,:focus-within) h3 span{background-size:100% .5em}
.wah-io #main-content .wah-io-fiche p{margin:8px 0 0;padding:0;color:var(--encre-douce);font:400 14.5px/1.5 Poppins,Helvetica,Arial,sans-serif}

.wah-io .wah-io-appel{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:32px;padding:clamp(48px,5.6vw,80px) max(16px,calc((100% - var(--large))/2));background:var(--nuit);color:#fff}
.wah-io #main-content .wah-io-appel h2{max-width:24ch;margin:0;padding:0;color:#fff;font:800 clamp(1.6rem,2.8vw,2.4rem)/1.1 Poppins,Helvetica,Arial,sans-serif;letter-spacing:-.025em;text-wrap:balance}
.wah-io #main-content .wah-io-appel h2 em{font-style:normal;color:var(--cyan)}
.wah-io #main-content .wah-io-appel p{max-width:56ch;margin:10px 0 0;padding:0;color:var(--lavande);font:400 16px/1.6 Poppins,Helvetica,Arial,sans-serif}
.wah-io #main-content .wah-io-ecrire{display:inline-block;padding:12px 26px;border-radius:40px;background:var(--cyan);color:var(--nuit);font:700 15px/1.3 Poppins,Helvetica,Arial,sans-serif;white-space:nowrap;transition:background-color .25s}
.wah-io #main-content .wah-io-ecrire:hover{background:#fff}

@media (max-width:767px){
  .wah-io #main-content .wah-io-ouverture{flex-direction:column;align-items:stretch}
  .wah-io #main-content .wah-io-ouverture > .et_pb_column:has(.et_pb_image):not(:has(.et_pb_text)){flex:none;order:0;max-width:240px;margin:0 auto!important}
  .wah-io #main-content .wah-io-ouverture > .et_pb_column:has(.et_pb_text){flex:none}
  .wah-io #main-content .wah-io-texte{margin:0 auto!important}
  .wah-io #main-content .wah-io-essentiel{grid-template-columns:minmax(0,1fr);margin:0 auto!important}
  .wah-io .wah-io-suite-tete,.wah-io .wah-io-appel{grid-template-columns:minmax(0,1fr)}
  .wah-io .wah-io-suite-tete .wah-io-tous{justify-self:start}
}
@media (prefers-reduced-motion:reduce){
  .wah-io .wah-io-fiche,.wah-io #main-content .wah-io-fiche h3 span{transition:none}
}