/*
Theme Name: CVAO
Description: Thème du site de l'association CVAO (Coopération pour la Valorisation de l'Acte Officinal). Page d'accueil reprenant la maquette validée, trombinoscope par mandat et actions modifiables depuis l'administration.
Version: 1.2.1
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: cvao
*/

@font-face{font-family:"Poppins";font-weight:400;font-style:normal;font-display:swap;src:url("assets/fonts/poppins-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-weight:500;font-style:normal;font-display:swap;src:url("assets/fonts/poppins-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-weight:600;font-style:normal;font-display:swap;src:url("assets/fonts/poppins-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-weight:700;font-style:normal;font-display:swap;src:url("assets/fonts/poppins-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Source Serif 4";font-weight:400;font-style:normal;font-display:swap;src:url("assets/fonts/source-serif-4-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Source Serif 4";font-weight:400;font-style:italic;font-display:swap;src:url("assets/fonts/source-serif-4-latin-400-italic.woff2") format("woff2")}

:root{
  --vert:#00956E; --vert-fonce:#00704f; --violet:#4A3274; --orange:#F2A33A;
  --fond:#ffffff; --fond-doux:#f7f5fa; --texte:#2b2238; --texte-doux:#5e5670; --trait:#e6e1ee;
  --f-titre:"Poppins","Segoe UI",system-ui,sans-serif;
  --f-texte:"Source Serif 4",Georgia,"Times New Roman",serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{background:var(--fond);color:var(--texte);font:400 17px/1.65 var(--f-texte);margin:0}
img{max-width:100%;height:auto}
[hidden]{display:none!important}
.wrap{max-width:1080px;margin:0 auto;padding-inline:20px}
h1,h2,h3{font-family:var(--f-titre);color:var(--violet);text-wrap:balance;line-height:1.2;margin:0}
h2{font-size:clamp(26px,4vw,34px);font-weight:600}
h3{font-size:18px;font-weight:600}
p{margin:0}
.eyebrow{font:600 12px/1.2 var(--f-titre);letter-spacing:.14em;text-transform:uppercase;color:var(--vert)}
a{color:var(--vert-fonce)}
a:focus-visible,.btn:focus-visible,button:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link:focus{position:fixed;left:12px;top:12px;width:auto;height:auto;clip:auto;z-index:100;background:#fff;padding:8px 14px;font-family:var(--f-titre)}

/* En-tête */
header.top{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);border-bottom:1px solid var(--trait)}
.admin-bar header.top{top:32px}
@media (max-width:782px){.admin-bar header.top{top:0}}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:10px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo img{width:150px;height:64px;object-fit:cover;object-position:center 47%}
nav.principale ul{display:flex;gap:18px;flex-wrap:wrap;list-style:none;margin:0;padding:0;font:500 14px var(--f-titre)}
nav.principale a{color:var(--texte);text-decoration:none}
nav.principale a:hover{color:var(--vert)}
.btn{display:inline-block;font:600 15px var(--f-titre);text-decoration:none;padding:11px 20px;border-radius:999px;border:2px solid transparent;cursor:pointer}
.btn-orange{background:var(--orange);color:var(--violet)}
.btn-ligne{border-color:var(--violet);color:var(--violet);background:transparent}
.btn-petit{padding:7px 14px;font-size:13px}
.boutons-entete{display:flex;gap:8px;flex-wrap:wrap}

/* Hero */
.hero{background:var(--orange);position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;left:calc(50% + 20px);top:50%;transform:translateY(-50%);width:max(75vw,1000px);aspect-ratio:1;border-radius:46% 54% 40% 60%;background:#fff;opacity:.95}
.hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.15fr 1fr;gap:32px;align-items:center;padding-block:56px}
.hero .eyebrow{color:var(--violet)}
.hero h1{font-size:clamp(30px,5vw,50px);font-weight:700;color:var(--violet);margin-top:12px}
.hero h1 em{font-style:normal;color:#fff}
.hero p.lead{margin-top:16px;font-size:19px;color:var(--violet);max-width:34em}
.hero .boutons{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.hero .btn-orange{background:var(--violet);color:#fff}
.sigle{font:700 clamp(54px,11vw,120px)/1 var(--f-titre);letter-spacing:-.02em;text-align:center}
.sigle .c{color:var(--vert)} .sigle .v{color:var(--violet)} .sigle .a,.sigle .o{color:var(--orange)}
.sigle small{display:block;font:500 15px/1.4 var(--f-titre);color:var(--violet);letter-spacing:0;margin-top:10px}

section.bloc{padding-block:64px}
section.doux{background:var(--fond-doux)}
.intro{display:grid;grid-template-columns:1fr 1.4fr;gap:40px;align-items:start}
.intro .texte{display:grid;gap:14px;max-width:62ch}
.intro .texte p{margin:0}
.tete{display:grid;gap:10px;margin-bottom:32px;max-width:62ch}
.tete p{color:var(--texte-doux)}

.valeurs{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:48px}
.valeur{border-top:3px solid var(--vert);padding-top:14px;display:grid;gap:6px;align-content:start}
.valeur:nth-child(2){border-color:var(--violet)} .valeur:nth-child(3){border-color:var(--orange)}
.valeur p{font-size:15.5px;color:var(--texte-doux)}

.actions-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.action{background:#fff;border:1px solid var(--trait);border-radius:14px;padding:22px;display:grid;gap:8px;align-content:start}
.action img{border-radius:8px;aspect-ratio:16/9;object-fit:cover;width:100%}
.action .tag{font:600 11px var(--f-titre);letter-spacing:.1em;text-transform:uppercase;color:var(--vert)}
.action p{font-size:15.5px;color:var(--texte-doux)}
.action a.suite{font:600 14px var(--f-titre)}

.bureau{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.membre{display:grid;gap:4px;text-align:center;align-content:start}
.photo{width:100%;max-width:150px;aspect-ratio:1;border-radius:50%;margin:0 auto 10px;display:grid;place-items:center;font:600 28px var(--f-titre);color:#fff;overflow:hidden}
.photo img{width:100%;height:100%;object-fit:cover}
.membre:nth-child(4n+1) .photo{background:var(--vert)} .membre:nth-child(4n+2) .photo{background:var(--violet)}
.membre:nth-child(4n+3) .photo{background:var(--orange)} .membre:nth-child(4n+4) .photo{background:var(--vert-fonce)}
.membre .role{font:600 13px var(--f-titre);color:var(--vert);text-transform:uppercase;letter-spacing:.08em}
.membre .nom{font:600 16px var(--f-titre);color:var(--violet)}
.membre .metier{font-size:14px;color:var(--texte-doux)}
.mandats{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px}
.mandats button{font:500 14px var(--f-titre);border:1px solid var(--trait);background:#fff;color:var(--texte);padding:7px 16px;border-radius:999px;cursor:pointer}
.mandats button[aria-pressed="true"]{background:var(--violet);border-color:var(--violet);color:#fff}
.vide{color:var(--texte-doux);font-style:italic}

.adhesion{background:var(--violet);color:#fff}
.adhesion h2,.adhesion h3{color:#fff}
.adhesion .eyebrow{color:var(--orange)}
.adh-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:start}
.adh-grid .texte{margin-top:14px;max-width:36em;display:grid;gap:10px}
.adh-grid ul.avantages{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.adh-grid ul.avantages li{padding-left:28px;position:relative}
.adh-grid ul.avantages li::before{content:"+";position:absolute;left:0;top:-1px;font:700 20px var(--f-titre);color:var(--orange)}
.etapes{background:#fff;color:var(--texte);border-radius:16px;padding:26px;display:grid;gap:16px}
.etapes ol{margin:0;padding-left:20px;display:grid;gap:8px}
.etapes h3{color:var(--violet)}
.etapes small{color:var(--texte-doux);font-size:13px}
.helloasso-widget{width:100%;border:0;border-radius:12px;background:#fff;min-height:750px}

.membres-zone{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center}
.cadenas{border:1px dashed var(--violet);border-radius:16px;padding:24px;display:grid;gap:10px;background:#fff}
.cadenas ul{margin:0;padding-left:18px;display:grid;gap:6px;color:var(--texte-doux)}

/* Pages intérieures (mentions légales, actions, etc.) */
.page-contenu{padding-block:56px}
.page-contenu .wrap{max-width:760px}
.page-contenu h1{font-size:clamp(28px,4.5vw,40px);margin-bottom:24px}
.page-contenu .entry{display:grid;gap:16px}
.page-contenu .entry h2{font-size:24px;margin-top:16px}
.page-contenu .entry ul,.page-contenu .entry ol{margin:0;padding-left:22px}

footer.pied{background:var(--texte);color:#ddd6e8;font:400 14px/1.6 var(--f-titre);padding-block:40px}
footer.pied .wrap{display:grid;grid-template-columns:2fr 1fr 1fr;gap:28px}
footer.pied strong{color:#fff;display:block;margin-bottom:6px}
footer.pied a{color:var(--orange)}
footer.pied ul{list-style:none;margin:0;padding:0}

@media (max-width:860px){
  .hero .wrap,.intro,.adh-grid,.membres-zone{grid-template-columns:1fr}
  .hero::after{width:110%;left:auto;right:-40%;top:auto;bottom:-55%;transform:none}
  .valeurs,.bureau{grid-template-columns:repeat(2,1fr)}
  .actions-grid{grid-template-columns:1fr}
  footer.pied .wrap{grid-template-columns:1fr}
  nav.principale{display:none}
  .hero .sigle{display:none}
}
@media (prefers-reduced-motion:no-preference){.btn{transition:transform .15s}.btn:hover{transform:translateY(-1px)}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}