/* Landing théâtre-forum : composants propres à la page, construits sur le socle AD BUILDER (base.css). */

html{scroll-padding-top:100px}

/* ---------- Illustrations ---------- */
.ill{width:100%; max-width:380px; margin-inline:auto}

/* ---------- Enjeux ---------- */
.sec-split{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:clamp(32px,5vw,64px); align-items:end; margin-bottom:clamp(48px,6vw,80px)}
.sec:not(.free)#enjeux{padding-top:clamp(120px,13vw,190px)}   /* 0.23 : la landing théâtre-forum seulement, pas les sections libres des pages Solutions qui portent aussi l’ancre « enjeux » */
.sec-split .sec-h{margin-bottom:0}

/* ---------- Thématiques (fond marine, onglets verticaux) ---------- */
.dark .vtab{background:rgba(255,255,255,.07); color:#fff; box-shadow:none}
.dark .vtab .ti{background:rgba(255,255,255,.1)}
.dark .vtab .ti svg{color:var(--yellow)}
.dark .vtab:hover{background:rgba(255,255,255,.13); box-shadow:none}
.dark .vtab[aria-selected="true"]{background:#fff; color:var(--navy); box-shadow:var(--e-dark)}
.dark .vtab[aria-selected="true"] .ti{background:var(--yellow)}
.dark .vtab[aria-selected="true"] .ti svg{color:var(--navy)}
.vpanel{color:var(--ink)}
.vp-head{display:grid; grid-template-columns:minmax(0,1fr) 120px; gap:24px; align-items:center; margin-bottom:24px}
.vp-head p{font-size:17.5px}
.vp-cols{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px}
.vp-cols h4{font:800 12.5px/1.2 var(--f-body); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); margin-bottom:14px}
.objs{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.objs li{display:grid; grid-template-columns:26px 1fr; gap:10px; font-size:16.5px; line-height:1.5}
.objs .ck2{width:24px; height:24px; border-radius:50%; background:var(--tint); display:grid; place-items:center; margin-top:1px}
.objs .ck2 svg{width:14px; height:14px; color:var(--blue)}
.sk{display:grid; gap:10px}
.skb{background:var(--tint); border-radius:16px}
.skb button{width:100%; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 16px; border:0; background:none; text-align:left; cursor:pointer; font:700 16px/1.35 var(--f-body)}
.skb button svg{width:18px; height:18px; flex:none; color:var(--blue); transition:transform .25s var(--ease)}
.skb button[aria-expanded="true"] svg{transform:rotate(180deg)}
.skb p{padding:0 16px 16px; font-size:15.5px; color:var(--ink-2)}
.vp-foot{display:flex; justify-content:flex-end; margin-top:26px}

/* ---------- Comprendre ---------- */
.understand{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(32px,5vw,72px); align-items:center}
.understand h3{font-size:var(--t-h3); margin:26px 0 12px}
.understand p.body{color:var(--ink-2)}

/* ---------- Saynète à arrêter : scène sombre à gauche, « À vous de jouer » à droite, en trois étapes ---------- */
.say-h{max-width:820px; margin-bottom:40px}
.say-h .h2{font-size:var(--t-h2)}
.say-card{position:relative; z-index:4; margin-bottom:calc(-1 * (var(--edge) + 100px)); color:var(--ink); padding:clamp(14px,1.6vw,20px); display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:clamp(16px,2.4vw,32px); box-shadow:var(--e-cross)}
/* La scène */
.stage{background:radial-gradient(120% 70% at 50% -10%, #24405F 0%, var(--navy) 55%, var(--navy-deep) 100%); color:#fff; border-radius:18px; padding:clamp(20px,2.4vw,30px); min-height:440px; display:flex; flex-direction:column}
.stage-wait{margin-top:auto; padding-top:24px; display:flex; gap:8px; align-items:center; justify-content:center; font-size:15px; color:var(--on-dark-2)}
.stage-wait svg{width:16px; height:16px; color:var(--yellow)}
.stage-h{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px}
.stage-h h3{font-size:clamp(22px,2vw,26px)}
.stage-h .tag{font-size:13px; font-weight:800; color:var(--navy); background:var(--yellow); border-radius:var(--r-pill); padding:5px 12px}
.cast{display:flex; flex-wrap:wrap; gap:8px 16px; margin:0 0 20px; padding:0 0 18px; list-style:none; border-bottom:1px solid rgba(255,255,255,.14)}
.cast li{display:flex; align-items:center; gap:8px; font-size:14px; color:var(--on-dark-2)}
.cast b{color:#fff}
.av{flex:none; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; font:800 13px/1 var(--f-body); color:var(--navy)}
.av.n{background:var(--yellow)} .av.l{background:#fff} .av.s{background:var(--blue)} .av.i{background:#C9B8F0}
.script{list-style:none; margin:0; padding:0; display:grid; gap:12px; align-content:start}
.ln{display:grid; grid-template-columns:32px minmax(0,1fr); gap:10px; align-items:start; animation:lnIn .3s var(--ease)}
@keyframes lnIn{from{opacity:0; transform:translateY(8px)}}
.ln .bub{background:#fff; color:var(--ink); border-radius:4px 16px 16px 16px; padding:10px 14px; font-size:16.5px; line-height:1.5}
.ln .who{display:block; font-size:12.5px; font-weight:800; color:var(--ink-2); margin-bottom:2px}
.ln .who em{font-style:normal; color:var(--navy); background:var(--yellow); border-radius:6px; padding:1px 6px; margin-left:4px}
.ln.did{grid-template-columns:minmax(0,1fr)}
.ln.did .bub{background:none; color:#fff; padding:10px 16px; border-radius:16px; margin-inline:-16px; font:600 clamp(18px,1.6vw,20px)/1.4 var(--f-title); letter-spacing:-.005em}
.ln.stopped .bub{box-shadow:0 0 0 3px var(--yellow)}
.ln.pickable{cursor:pointer}
.ln.pickable .bub{box-shadow:0 0 0 2px color-mix(in srgb,var(--blue) 80%,transparent)}
.ln.pickable:hover .bub{box-shadow:0 0 0 3px var(--yellow)}
.ln.new .bub{background:var(--yellow)}
.ln.new .who{color:var(--navy)}
.ln.new .who em{background:var(--navy); color:#fff}
.ln.is-off{display:none}
.stopmark{display:inline-flex; align-items:center; gap:6px; font:800 12px/1 var(--f-body); letter-spacing:.06em; text-transform:uppercase; color:var(--navy); background:var(--yellow); padding:7px 11px; border-radius:8px}
.stopmark svg{width:14px; height:14px}
.replay-h{display:flex; align-items:center; gap:10px; font:800 12.5px/1 var(--f-body); letter-spacing:.12em; text-transform:uppercase; color:var(--yellow); margin:8px 0 2px}
.replay-h::before,.replay-h::after{content:""; flex:1; height:1px; background:color-mix(in srgb,var(--yellow) 45%,transparent)}
/* À vous de jouer */
.play{display:flex; flex-direction:column; padding:clamp(6px,1vw,12px) clamp(4px,1vw,12px) 6px 0}
.play-k{font:800 13px/1.2 var(--f-body); letter-spacing:.14em; text-transform:uppercase; color:var(--blue); margin-bottom:14px}
.steps3{list-style:none; margin:0 0 22px; padding:0; display:grid; gap:8px}
.sp{display:grid; grid-template-columns:36px minmax(0,1fr); gap:12px; align-items:center; font-weight:700; font-size:16px; color:var(--ink-2)}
.sp-n{width:36px; height:36px; border-radius:50%; display:grid; place-items:center; font:800 15px/1 var(--f-title); background:#fff; color:var(--ink-2); box-shadow:inset 0 0 0 2px var(--tint)}
.sp-n svg{width:18px; height:18px}
.sp.on{color:var(--navy)}
.sp.on .sp-n{background:var(--navy); color:#fff; box-shadow:none}
.sp.done .sp-n{background:var(--yellow); color:var(--navy); box-shadow:none}
.sp-s{grid-column:2; font-weight:500; font-size:14.5px; color:var(--ink-2); margin-top:-4px}
.sp-s b{color:var(--ink)}
.play-b{display:grid; gap:14px; align-content:start; border-top:1px solid #DCE6F1; padding-top:20px; animation:lnIn .25s var(--ease)}
.play-b .intro{font-size:17px; color:var(--ink)}
.play-b .q{font:700 21px/1.25 var(--f-title); color:var(--navy)}
.play-b .hint{font-size:15px; color:var(--ink-2)}
.stopbtn{display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:72px; padding:0 36px; border-radius:var(--r-pill); border:0; background:var(--yellow); color:var(--navy); font:800 26px/1 var(--f-title); cursor:pointer; box-shadow:0 12px 28px color-mix(in srgb,var(--yellow) 45%,transparent); transition:transform .15s var(--ease), box-shadow .15s var(--ease); animation:pulse 1.6s ease-in-out infinite}
.stopbtn svg{width:28px; height:28px}
.stopbtn:hover{transform:translateY(-2px)}
@keyframes pulse{50%{box-shadow:0 12px 36px color-mix(in srgb,var(--yellow) 75%,transparent)}}
.choices{display:flex; flex-wrap:wrap; gap:8px}
.chip{min-height:44px; padding:8px 16px; border-radius:var(--r-pill); border:2px solid transparent; background:#fff; box-shadow:var(--e1); color:var(--navy); font-size:15.5px; font-weight:700; cursor:pointer; text-align:left; line-height:1.3; transition:border-color .15s, background .15s}
.chip:hover{border-color:var(--navy)}
.chip[aria-pressed="true"]{background:var(--navy); border-color:var(--navy); color:#fff}
.say-r{font-size:16px; color:var(--ink); background:var(--tint); border-radius:14px; padding:12px 16px; border-left:4px solid var(--blue)}
.whos{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px}
.whob{display:grid; justify-items:start; gap:6px; padding:14px; border-radius:16px; border:2px solid transparent; background:#fff; box-shadow:var(--e1); color:var(--navy); cursor:pointer; text-align:left; transition:border-color .15s, transform .15s var(--ease)}
.whob:hover{border-color:var(--navy); transform:translateY(-2px)}
.whob b{font-size:16px}
.whob span:last-child{font-size:14px; color:var(--ink-2); line-height:1.35}
.props{display:grid; gap:10px}
.propb{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; border-radius:16px; border:2px solid transparent; background:#fff; box-shadow:var(--e1); color:var(--navy); font-weight:700; font-size:16px; cursor:pointer; text-align:left; transition:border-color .15s, background .15s}
.propb:hover{border-color:var(--navy)}
.propb[aria-pressed="true"]{background:var(--navy); border-color:var(--navy); color:#fff}
.propb svg{width:18px; height:18px; flex:none}
.debrief{background:var(--navy); color:#fff; border-radius:16px; padding:16px 18px}
.debrief b{display:block; font:800 12.5px/1.2 var(--f-body); letter-spacing:.12em; text-transform:uppercase; color:var(--yellow); margin-bottom:6px}
.debrief p{font-size:16px; color:#fff}
.jk-actions{display:flex; flex-wrap:wrap; gap:8px}
.jk-actions .btn{white-space:normal; text-align:left; line-height:1.25}
.jk-line{display:flex; gap:10px; align-items:baseline; font-size:15px; color:var(--ink-2); margin-top:auto; padding-top:20px}
.jk-line b{flex:none; font:800 12px/1.2 var(--f-body); letter-spacing:.12em; text-transform:uppercase; color:var(--navy); background:var(--tint); padding:5px 9px; border-radius:7px}
.play .note{font-size:14.5px; color:var(--ink-2); margin-top:12px}
.linkbtn{border:0; background:none; padding:0; color:var(--navy); font-weight:700; font-size:15px; text-decoration:underline; text-underline-offset:3px; cursor:pointer; justify-self:start; align-self:flex-start}
.btn-t{background:var(--tint); color:var(--navy)}
.btn-t:hover{background:var(--tint-2)}

/* ---------- Frise chronologique du déroulé (section « Comment se déroule ») ---------- */
.tl{margin-top:clamp(48px,6vw,80px); background:#fff; border-radius:var(--r-card); box-shadow:var(--e2); padding:clamp(22px,3vw,40px)}
.tl-h{display:flex; justify-content:space-between; align-items:end; gap:12px 24px; flex-wrap:wrap; margin-bottom:30px}
.tl-h h3{font-size:clamp(22px,2.2vw,28px)}
.tl-h p{color:var(--ink-2); font-size:16px}
.rail-w{overflow-x:auto; scrollbar-width:none; margin:0 -8px 22px; padding:0 8px}
.rail-w::-webkit-scrollbar{display:none}
.rail{--n:7; position:relative; display:grid; grid-template-columns:repeat(var(--n),minmax(118px,1fr)); gap:6px; list-style:none; margin:0; padding:0; min-width:calc(var(--n) * 124px)}
.rail::before{content:""; position:absolute; left:calc(100% / var(--n) / 2); right:calc(100% / var(--n) / 2); top:25px; height:4px; background:#D7E8F5; border-radius:4px}
.rail .fill{position:absolute; left:calc(100% / var(--n) / 2); top:25px; height:4px; width:0; background:var(--yellow); border-radius:4px; transition:width .45s var(--ease)}
.stp{position:relative; display:grid; justify-items:center; align-content:start; gap:8px; border:0; background:none; cursor:pointer; padding:0 4px 8px; text-align:center; width:100%; color:var(--ink); border-radius:16px}
.stp .dot{width:54px; height:54px; border-radius:50%; background:#fff; box-shadow:inset 0 0 0 3px #D7E8F5; display:grid; place-items:center; font:800 19px/1 var(--f-title); color:var(--ink-2); transition:all .2s var(--ease)}
.stp:hover .dot{box-shadow:inset 0 0 0 3px var(--blue); color:var(--navy)}
.stp[aria-selected="true"] .dot{background:var(--navy); color:#fff; box-shadow:0 0 0 6px color-mix(in srgb,var(--blue) 28%,transparent)}
.stp.past .dot{background:var(--yellow); color:var(--navy); box-shadow:none}
.stp .sic{width:44px; height:44px; border-radius:14px; background:var(--tint); display:grid; place-items:center; margin-top:6px}
.stp .sic svg{width:22px; height:22px; color:var(--blue)}
.stp[aria-selected="true"] .sic{background:var(--yellow)}
.stp[aria-selected="true"] .sic svg{color:var(--navy)}
.stp .t{font-size:14.5px; font-weight:800; line-height:1.25; min-height:2.5em}
.stp .d{display:inline-flex; gap:5px; align-items:center; font-size:13.5px; color:var(--ink-2)}
.stp .d svg{width:14px; height:14px}
.stp-detail{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:22px; align-items:center; background:var(--navy); color:#fff; border-radius:18px; padding:22px 26px; animation:lnIn .25s var(--ease)}
.stp-detail .big{font:800 44px/1 var(--f-title); color:var(--yellow)}
.stp-detail .big small{font-size:18px; color:var(--on-dark-2); margin-left:2px}
.stp-detail h4{font-size:20px; margin-bottom:4px}
.stp-detail p{color:var(--on-dark-2)}
.stp-detail .dur{display:inline-flex; gap:6px; align-items:center; font-size:15px; font-weight:700; color:var(--navy); background:var(--yellow); border-radius:var(--r-pill); padding:7px 14px; white-space:nowrap}
.stp-detail .dur svg{width:16px; height:16px}
.frise-f{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-top:18px}
.frise-f p{display:flex; gap:8px; align-items:center; font-size:15.5px; font-weight:600; color:var(--ink)}
.frise-f p svg{width:18px; height:18px; color:var(--blue); flex:none}
/* Ancienne frise (section masquée, gardée pour les contenus qui l'ont encore) */
.frise{position:relative; z-index:4; margin-bottom:calc(-1 * (var(--edge) + 100px)); padding:clamp(20px,3vw,36px); color:var(--ink); box-shadow:var(--e-cross)}

/* ---------- Pourquoi AD Conseil ---------- */
.pillars{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; list-style:none; margin:0; padding:0}
.pillar{padding:28px}
.pillar .ic{width:56px; height:56px; border-radius:16px; background:var(--tint); display:grid; place-items:center; margin-bottom:18px}
.pillar .ic svg{width:28px; height:28px; color:var(--blue)}
.pillar h3{font-size:var(--t-h3); margin-bottom:10px; line-height:1.2}
.pillar p{color:var(--ink-2); font-size:17px}
.team-top{display:flex; align-items:end; justify-content:space-between; gap:16px 24px; flex-wrap:wrap; margin-bottom:28px}
.team-top .sec-h{margin-bottom:0}
#intervenants{padding-block:clamp(56px,6vw,84px)}
.team-h{display:flex; align-items:end; justify-content:space-between; gap:16px; margin:64px 0 22px}
.team-h h3{font-size:clamp(24px,2.4vw,30px)}
.arrows{display:flex; gap:10px}
.arrows button{width:48px; height:48px; border-radius:50%; border:0; background:#fff; box-shadow:var(--e1); cursor:pointer; display:grid; place-items:center; transition:transform .15s var(--ease), box-shadow .15s var(--ease)}
.arrows button:hover{transform:translateY(-2px); box-shadow:var(--e2)}
.arrows svg{width:20px; height:20px}
.team{display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 72px)/4); gap:24px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; list-style:none; margin:0 -12px; padding:12px 12px 28px}
.team::-webkit-scrollbar{display:none}
.team .member{scroll-snap-align:start}
.member .ph{position:relative}
.member .ph img{width:100%; height:100%; object-fit:cover}
/* La fiche garde sa largeur, quelle que soit la taille de la photo : textes jamais coupés à droite */
.member{grid-template-columns:minmax(0,1fr)}
.member .ph, .member .bd{min-width:0}
.team.ph-orig .member .ph img{width:100%}
/* Photos au même format : la photo remplit le cadre, recadrée (cadrage haut, centre ou bas) */
.team:not(.ph-orig) .member .ph{overflow:hidden}
.team:not(.ph-orig) .member .ph img{position:absolute; inset:0}
.team.ph-11 .member .ph{aspect-ratio:1/1}
.team.ph-34 .member .ph{aspect-ratio:3/4}
.team.ph-orig .member .ph{aspect-ratio:auto; min-height:180px}
.team.ph-orig .member .ph img{height:auto}
.ph-fmt{margin:0 0 6px}
.member .ph .ed-tog{position:absolute; left:12px; top:12px}
.member .phb{position:absolute; right:12px; bottom:12px; display:inline-flex; align-items:center; gap:6px; height:38px; padding:0 14px; border-radius:var(--r-pill); background:#fff; color:var(--navy); box-shadow:var(--e1); font:700 14px/1 var(--f-body); cursor:pointer}
.member .phb input{position:absolute; inset:0; opacity:0; cursor:pointer; width:100%}
.member .phb:focus-within{outline:2px solid var(--blue); outline-offset:2px}
.member .phb svg{width:16px; height:16px}
.member.is-ed [contenteditable]{outline:1px dashed var(--blue); outline-offset:3px; border-radius:2px; cursor:text}
.member.is-ed [contenteditable]:focus{outline:2px solid var(--blue)}
.team-note{display:flex; gap:10px; align-items:center; font-size:15px; color:var(--navy); background:#fff; border-radius:14px; padding:12px 16px; box-shadow:var(--e1); margin:-6px 0 8px}
.team-note svg{width:18px; height:18px; color:var(--blue); flex:none}

/* ---------- Contact (fond marine, carte qui chevauche la FAQ) ---------- */
.contact-g{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(32px,5vw,64px); align-items:start}
.pts{list-style:none; margin:28px 0; padding:0; display:grid; gap:12px}
.pts li{display:grid; grid-template-columns:30px 1fr; gap:10px; align-items:center; font-weight:600}
.pts .ck2{width:28px; height:28px; border-radius:50%; background:var(--yellow); display:grid; place-items:center}
.pts .ck2 svg{width:16px; height:16px; color:var(--navy)}
.contact-g .ill{max-width:300px; margin:0}
.form-card{position:relative; z-index:4; margin-bottom:calc(-1 * (var(--edge) + 110px)); padding:clamp(22px,3vw,34px); color:var(--ink); box-shadow:var(--e-cross)}
.form{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.form .full{grid-column:1/-1}
#f-page.form{grid-template-columns:minmax(0,1fr); gap:14px}   /* dans la carte du bas de page : une colonne, pour que le nom et l'exemple tiennent dans chaque champ */
.fld{display:grid; gap:7px}
.fld label, .fld legend{font-size:15px; font-weight:700; padding:0}
.fld fieldset{border:0; margin:0; padding:0; display:grid; gap:9px}
.fld input, .fld textarea{width:100%; min-height:50px; padding:12px 16px; border:1px solid rgba(77,180,232,.42); border-radius:14px; font:400 16.5px/1.4 var(--f-body); color:var(--ink); background:#fff; transition:border-color .15s var(--ease), box-shadow .15s var(--ease)}
.fld textarea{min-height:120px; resize:vertical}
.fld input:hover, .fld textarea:hover{border-color:var(--navy)}
.fld input:focus, .fld textarea:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 4px color-mix(in srgb,var(--blue) 20%,transparent)}
.fld .opt{font-weight:400; color:var(--ink-2)}
/* Libellé dans le champ : nom en gras et exemple, effacés dès la première lettre (aucun libellé qui remonte) */
.fld.in{position:relative; display:block}
.fld.in label{position:absolute; left:17px; right:16px; top:0; height:50px; display:flex; align-items:center; font:400 16px/1.3 var(--f-body); color:var(--ink-2); pointer-events:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.fld.in label b{font-weight:700; color:var(--ink); margin-right:.25em}
.fld.in label.f-nx .f-ex{display:none}   /* 0.20.1 : exemple qui ne tient pas, retiré par site.js */
.fld.in.ta label{height:auto; top:13px; white-space:normal}
.fld.in input:not(:placeholder-shown) + label, .fld.in textarea:not(:placeholder-shown) + label{visibility:hidden}
.fld.in input::placeholder, .fld.in textarea::placeholder{color:transparent}
.tog{display:flex; flex-wrap:wrap; gap:8px}
.tog label{position:relative}
.tog input{position:absolute; opacity:0; pointer-events:none}
.tog span{display:inline-flex; align-items:center; min-height:42px; padding:8px 16px; border-radius:var(--r-pill); background:var(--tint); font-size:15px; font-weight:700; cursor:pointer; transition:background .15s}
.tog span:hover{background:var(--tint-2)}
.tog input:checked + span{background:var(--navy); color:#fff}
.tog input:focus-visible + span{outline:2px solid var(--blue); outline-offset:2px}
.form .send{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap}
.form .rgpd{font-size:14px; color:var(--ink-2); max-width:34ch}
.form .send .btn{margin-left:auto}
.f-done{grid-column:1/-1; display:grid; gap:12px; justify-items:center; text-align:center; padding:36px 12px}
.f-done svg{width:64px; height:64px}
.f-done h4{font-size:24px}
.f-done p{color:var(--ink-2); max-width:46ch}

/* ---------- FAQ ---------- */
.faq-list{margin-inline:auto}
.qa h4{font:inherit; margin:0}

/* ---------- Pied de page (repris de WordPress) ---------- */
.foot-s{background:var(--navy-deep); color:var(--on-dark-2); padding-block:64px 28px; font-size:15.5px}
.foot-g{display:grid; grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr)); gap:32px}
.foot-g .brand{color:#fff; display:inline-block; margin-bottom:14px}
.foot-g h4{font:800 13px/1.2 var(--f-body); letter-spacing:.14em; text-transform:uppercase; color:#fff; margin-bottom:14px}
.foot-g ul{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.foot-g a{text-decoration:none}
.foot-g a:hover{color:#fff; text-decoration:underline}
.foot-b{display:flex; flex-wrap:wrap; gap:18px; justify-content:space-between; margin-top:44px; padding-top:22px; box-shadow:inset 0 1px 0 rgba(255,255,255,.1); font-size:14px}
.foot-b nav{display:flex; flex-wrap:wrap; gap:20px}
.foot-b nav a[hidden]{display:none}

/* ---------- Fenêtre, message ---------- */
.modal{position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:16px; background:rgba(14,28,44,.6)}
.modal[hidden]{display:none}
.box2{position:relative; width:min(760px,100%); max-height:calc(100vh - 32px); overflow:auto; scrollbar-width:none; background:#fff; border-radius:28px; padding:clamp(22px,3vw,34px); box-shadow:var(--e3); animation:pop .22s var(--ease)}
@keyframes pop{from{opacity:0; transform:scale(.97)}}
.box2::-webkit-scrollbar{display:none}
.box2 h3{font-size:28px; margin-bottom:6px}
.box2 .sub{color:var(--ink-2); margin-bottom:22px}
.x{position:absolute; right:16px; top:16px; width:44px; height:44px; border-radius:50%; border:0; background:var(--tint); cursor:pointer; display:grid; place-items:center}
.x:hover{background:var(--tint-2)}
.x svg{width:18px; height:18px}
.toast{position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); z-index:95; background:var(--navy); color:#fff; padding:13px 20px; border-radius:14px; font-size:15px; box-shadow:var(--e3); animation:toast .25s var(--ease); max-width:calc(100vw - 32px)}
@keyframes toast{from{opacity:0; transform:translate(-50%,10px)}}

/* ---------- Largeurs ---------- */
@media (max-width:1180px){ .team{grid-auto-columns:calc((100% - 48px)/3)} }
@media (max-width:1000px){
  .say-card{grid-template-columns:minmax(0,1fr)}
  .seo-g{grid-template-columns:minmax(0,1fr)}
  .side{position:static; max-height:none}
  .contact-g, .understand{grid-template-columns:minmax(0,1fr)}
  .contact-g .ill{display:none}
  .pillars{grid-template-columns:minmax(0,1fr)}
  .team{grid-auto-columns:calc((100% - 24px)/2)}
 
  .stage{min-height:0}
}
@media (max-width:900px){ .sec-split{grid-template-columns:minmax(0,1fr)} .sec-split .ill{display:none} .vp-head{grid-template-columns:minmax(0,1fr)} .vp-head .ill{display:none} }
@media (max-width:760px){
  .vp-cols{grid-template-columns:minmax(0,1fr)}
  .stp-detail{grid-template-columns:auto minmax(0,1fr); gap:14px 18px; padding:18px 20px}
  .stp-detail .dur{grid-column:1/-1; justify-self:start}
  .stp-detail .big{font-size:34px}
  .whos{grid-template-columns:minmax(0,1fr)}
 
  .form{grid-template-columns:minmax(0,1fr)}
  .form .send .btn{width:100%}
  .team{grid-auto-columns:82%}
  .row{grid-template-columns:56px minmax(0,1fr); padding:5px 12px}
  .sep{padding:20px 12px 8px}
  .foot-g{grid-template-columns:1fr 1fr}
  .foot-g > div:first-child{grid-column:1/-1}
  .understand .ill{max-width:260px}
}
@media (max-width:560px){
  .fixed .btn{display:none}
  .stopbtn{width:100%}
}
.vp-foot .btn{white-space:normal; text-align:center}
@media (max-width:560px){ .vp-foot .btn{width:100%} }


.top .pills{flex:none}
.top .pills a{white-space:nowrap}
.menu{gap:clamp(14px,1.8vw,26px)}

.dark .vpanel{box-shadow:var(--e-dark)}
.facts .btn-p{box-shadow:0 10px 24px rgba(5,12,22,.5)}

/* ---------- Ajouts du moteur ---------- */
.skip{position:absolute; left:16px; top:-60px; z-index:100; background:#fff; color:var(--navy); padding:10px 16px; border-radius:10px; font-weight:700}
.skip:focus{top:12px}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.form-err{color:#8A1F14; background:#FBE2E0; border-radius:12px; padding:10px 14px; font-size:15px; font-weight:600}
.form .btn[disabled]{opacity:.6; cursor:default; transform:none}
.f-done h3{font-size:24px}
.say-start{cursor:pointer}
.no-js .say-start{display:none}
/* Menu sur téléphone : volet sous l'en-tête */
.drawer{position:absolute; left:0; right:0; top:100%; background:var(--navy); box-shadow:0 18px 30px rgba(5,12,22,.4); padding:8px max(20px,env(safe-area-inset-right,0px)) 18px max(20px,env(safe-area-inset-left,0px))}
.drawer nav{display:grid}
.drawer a{display:block; padding:14px 4px; color:#fff; text-decoration:none; font:800 14px/1.2 var(--f-body); letter-spacing:.08em; text-transform:uppercase; box-shadow:inset 0 -1px 0 rgba(255,255,255,.08)}
.top.scrolled .drawer{background:#fff} .top.scrolled .drawer a{color:var(--navy); box-shadow:inset 0 -1px 0 var(--tint)}
/* Bandeau de consentement (coupé par défaut) */
.consent{position:fixed; left:calc(20px + env(safe-area-inset-left,0px)); bottom:calc(20px + env(safe-area-inset-bottom,0px)); z-index:96; width:min(420px,calc(100vw - 40px)); background:#fff; color:var(--ink); border-radius:var(--r20,20px); padding:18px 20px; box-shadow:var(--e3)}
.consent p{font-size:15px; margin-bottom:12px} .consent p b{display:block; font-family:var(--f-title); font-size:17px; margin-bottom:4px}
.consent div{display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap}
/* Écran de connexion à la modification */
.no-anim *{transition:none!important; animation:none!important}
.foot-g .fh{font:800 13px/1.2 var(--f-body); letter-spacing:.14em; text-transform:uppercase; color:#fff; margin-bottom:14px}
.foot-g p{margin-top:4px}

/* Accès rapide à la modification, pour les administrateur·ices connecté·es (jamais montré aux visiteur·ices) */
.ed-quick{position:fixed; z-index:90; left:calc(16px + env(safe-area-inset-left,0px)); bottom:calc(16px + env(safe-area-inset-bottom,0px)); display:flex; gap:4px; padding:4px; background:var(--navy); border-radius:var(--r-pill); box-shadow:0 10px 26px rgba(5,12,22,.45)}
.ed-quick a{display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 16px; border-radius:var(--r-pill); color:#fff; font:700 14.5px/1 var(--f-body); text-decoration:none}
.ed-quick a:first-child{background:var(--yellow); color:var(--navy)}
.ed-quick a:hover{box-shadow:inset 0 0 0 2px rgba(255,255,255,.5)}
.ed-quick svg{width:16px; height:16px}

/* Thématiques du formulaire : lignes égales (3 par ligne, 2 sur téléphone), jamais une pastille seule */
.tog.th{display:grid; grid-template-columns:repeat(3,max-content)}
.tog.th label span{display:flex; justify-content:center}
@media (max-width:560px){ .tog.th{grid-template-columns:repeat(2,minmax(0,1fr))} .tog.th label, .tog.th label span{width:100%} }

/* ============================================================
   Lot 2 : sous-menus, brouillon, sections nouvelles et interactives.
   Fond au choix (marine, blanc, bleu clair) ; cartes blanches, ombres teintées de bleu clair sur fond clair, bleu nuit sur marine.
   ============================================================ */
/* Menu tiré de l'arbre : sous-menus (survol, clavier, toucher) */
.menu .mi{position:relative; display:inline-flex; align-items:center; gap:2px}
.mi-t{width:26px; height:26px; padding:0; border:0; background:none; color:inherit; cursor:pointer; display:grid; place-items:center; border-radius:8px}
.mi-t svg{width:14px; height:14px; transition:transform .15s var(--ease)}
.mi-t[aria-expanded="true"] svg{transform:rotate(180deg)}
.mi-sub{position:absolute; left:-14px; top:100%; min-width:240px; display:none; flex-direction:column; padding:10px; background:#fff; border-radius:16px; box-shadow:0 18px 40px rgba(5,12,22,.32)}
.top.scrolled .mi-sub{box-shadow:0 18px 40px color-mix(in srgb,var(--blue) 28%,transparent)}
.mi:hover .mi-sub, .mi:focus-within .mi-sub, .mi-t[aria-expanded="true"] + .mi-sub{display:flex}
.mi-sub a{color:var(--navy); padding:11px 12px; border-radius:10px; letter-spacing:.04em}
.mi-sub a:hover{background:var(--tint); color:var(--navy)}
.drawer .d-sub{display:grid; padding-left:16px}
.drawer .d-sub a{font-weight:700; letter-spacing:.04em; color:var(--on-dark-2)}
.top.scrolled .drawer .d-sub a{color:var(--ink-2)}
.draft-b{position:relative; z-index:41; margin:0; padding:10px max(20px,env(safe-area-inset-left,0px)); background:var(--yellow); color:var(--navy); font-weight:700; font-size:15px; text-align:center}
/* Section qui déborde en dernière position : pas de débordement sur le pied de page */
.sec.last-out{padding-bottom:clamp(72px, 9vw, 120px)}
.sec.last-out .edge{display:none}
.sec.last-out .form-card, .sec.last-out .say-card{margin-bottom:0}

/* Fonds au choix : textes et cartes */
.sec.free .lead{max-width:62ch}
.sec.dark .card{color:var(--ink)}
.sec.tint .card, .sec.white .card{box-shadow:var(--e1)}
.sec.white .card.soft{background:var(--tint); box-shadow:none}

/* ---------- Texte et image ---------- */
.ti-g{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(32px,5vw,72px); align-items:center}
.ti-g.img-left .ti-t{order:2}
.ti-t .body{color:var(--ink-2); margin-top:18px; max-width:60ch}
.dark .ti-t .body{color:var(--on-dark-2)}
.ti-t .ctas{margin-top:28px}
.ti-i{position:relative}
.ti-i .ill{max-width:420px}
/* ---------- Bandeau d'appel ---------- */
.cta-b{text-align:center; max-width:820px; margin:0 auto}
.cta-b .lead{margin-inline:auto}
.cta-b .ctas{justify-content:center; margin-top:30px}
.ctas{display:flex; flex-wrap:wrap; gap:14px}
/* ---------- Cartes de liens ---------- */
.lk-g{display:grid; grid-template-columns:repeat(var(--n,4),minmax(0,1fr)); gap:24px; list-style:none; margin:0; padding:0}
.lk{display:flex; flex-direction:column; gap:12px; height:100%; padding:28px; text-decoration:none; color:var(--ink); position:relative}
.lk .ic{width:52px; height:52px; border-radius:16px; background:var(--tint); display:grid; place-items:center}
.lk .ic svg{width:26px; height:26px; color:var(--blue)}
.lk h3{font-size:var(--t-h3); line-height:1.2}
.lk p{color:var(--ink-2); font-size:17px; flex:1}
.lk .more{display:inline-flex; align-items:center; gap:8px; font-weight:800; color:var(--navy)}
.lk .more svg{width:18px; height:18px; color:var(--blue); transition:transform .18s var(--ease)}
.lk:hover .more svg{transform:translateX(4px)}
.tint .lk .ic{background:var(--tint)}
.dark .lk, .dark a.card.lk:hover{box-shadow:var(--e-dark)}
.white a.card.lk:hover, .tint a.card.lk:hover{box-shadow:var(--e2)}
/* ---------- Chiffres clés ---------- */
.st-g{display:grid; grid-template-columns:repeat(var(--n,4),minmax(0,1fr)); gap:28px; list-style:none; margin:0; padding:0}
.st-g li{display:grid; gap:8px; align-content:start; padding-top:22px; box-shadow:inset 0 3px 0 var(--yellow)}
.st-n{font:800 clamp(40px,5vw,64px)/1 var(--f-title); color:var(--navy); font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.dark .st-n{color:var(--yellow)}
.st-l{font-size:17px; font-weight:600; color:var(--ink)}
.dark .st-l{color:#fff}
.st-s{font-size:14px; color:var(--ink-2)}
.dark .st-s{color:var(--on-dark-2)}
.st-note{margin-top:36px; font-size:15px; color:var(--ink-2)}
.dark .st-note{color:var(--on-dark-2)}
/* ---------- Logos ---------- */
.lg-g{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:16px; list-style:none; margin:0; padding:0}
.lg-t{position:relative; display:grid; place-items:center; min-height:96px; padding:18px; border-radius:18px; background:var(--white); box-shadow:var(--e1); text-align:center}
.white .lg-t{background:var(--tint); box-shadow:none}
.dark .lg-t{box-shadow:var(--e-dark)}
.lg-i{max-height:56px; width:auto; max-width:100%; object-fit:contain}
.lg-n{font:700 17px/1.25 var(--f-title); color:var(--navy)}
/* ---------- Témoignage (Bricolage pour la citation, jamais d'italique) ---------- */
.qt{max-width:900px; margin:0 auto; text-align:center}
.qt-m{display:inline-grid; place-items:center; width:64px; height:64px; border-radius:var(--r20,20px); background:var(--yellow); color:var(--navy); margin-bottom:22px}
.qt-m svg{width:30px; height:30px}
.qt blockquote{margin:0; font:600 clamp(22px,2.6vw,32px)/1.35 var(--f-title); letter-spacing:-.01em; text-wrap:balance}
.qt figcaption{display:inline-flex; align-items:center; gap:14px; margin-top:28px; text-align:left; position:relative}
.qt figcaption b{display:block; font-size:17px}
.qt figcaption span span{display:block; color:var(--ink-2); font-size:15.5px}
.dark .qt figcaption span span{color:var(--on-dark-2)}
.qt-ph{width:56px; height:56px; border-radius:50%; object-fit:cover; max-width:none; margin:0}

/* ---------- Vrai ou faux : la carte se retourne ---------- */
.tf-g{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; list-style:none; margin:0; padding:0}
.tf{perspective:1400px}
.tf-in{display:grid; height:100%; transition:transform .6s var(--ease); transform-style:preserve-3d}
.tf-f, .tf-k{grid-area:1/1; backface-visibility:hidden; -webkit-backface-visibility:hidden; padding:26px; display:flex; flex-direction:column; gap:14px}
.tf-k{transform:rotateY(180deg); outline:none}
.tf.done .tf-in{transform:rotateY(180deg)}
.tf.done .tf-f{visibility:hidden; transition:visibility 0s .3s}
.tf-n{display:inline-grid; place-items:center; width:40px; height:40px; border-radius:12px; background:var(--tint); font:800 17px/1 var(--f-title); color:var(--navy)}
.tf-s{font:600 19px/1.4 var(--f-title); color:var(--ink); flex:1}
.tf-b{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.tf-b .btn{width:100%}
.tf-v{font:800 22px/1.2 var(--f-title)}
.tf.good .tf-v{color:#1F6E4A} .tf.bad .tf-v{color:#A23B14}
.tf.good .tf-k{box-shadow:inset 0 0 0 3px #A9DCC2, var(--e1)} .tf.bad .tf-k{box-shadow:inset 0 0 0 3px #F2C3AE, var(--e1)}
.tf-r{align-self:flex-start; font:800 13px/1 var(--f-body); letter-spacing:.1em; text-transform:uppercase; padding:8px 12px; border-radius:999px; background:var(--navy); color:#fff}
.tf-k p{color:var(--ink-2); font-size:16.5px}
.tf-end{display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap; margin-top:30px; font-size:18px}
.tf-end b{font:800 30px/1 var(--f-title); color:var(--navy)}
.dark .tf-end{color:#fff} .dark .tf-end b{color:var(--yellow)}
.tf-end .btn svg{width:16px; height:16px}
/* ---------- Que feriez-vous ? ---------- */
.sc{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:0; overflow:hidden}
.sc-sit{background:var(--navy); color:#fff; padding:clamp(26px,3vw,40px); display:grid; align-content:start; gap:14px}
.sc-k{font:800 13px/1.2 var(--f-body); letter-spacing:.14em; text-transform:uppercase; color:var(--yellow)}
.sc-sit p{font:600 clamp(19px,1.8vw,23px)/1.45 var(--f-title)}
.sc-r{padding:clamp(22px,3vw,36px); display:grid; gap:14px; align-content:start}
.sc-q{font:800 14px/1.2 var(--f-body); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2)}
.sc-o{display:grid; gap:10px}
.sc-b{display:flex; align-items:center; gap:14px; width:100%; text-align:left; padding:14px 16px; border:2px solid transparent; box-shadow:var(--e1); border-radius:16px; background:#fff; color:var(--ink); font:600 16.5px/1.4 var(--f-body); cursor:pointer; transition:border-color .15s, background .15s}
.sc-b:hover{border-color:var(--navy)}
.sc-b[aria-pressed="true"]{border-color:var(--navy); background:var(--tint)}
.sc-b.seen:not([aria-pressed="true"]) .sc-l{background:var(--tint-2)}
.sc-l{flex:none; display:inline-grid; place-items:center; width:34px; height:34px; border-radius:10px; background:var(--tint); font:800 15px/1 var(--f-title); color:var(--navy)}
.sc-b[aria-pressed="true"] .sc-l{background:var(--navy); color:#fff}
.sc-e{padding:18px 20px; border-radius:16px; background:var(--tint); display:grid; gap:8px; animation:pop .25s var(--ease)}
.sc-e p{color:var(--ink); font-size:16.5px}
.tone{justify-self:start; font:800 12.5px/1 var(--f-body); letter-spacing:.08em; text-transform:uppercase; padding:7px 11px; border-radius:999px}
.tone.bien{background:#E3F4EC; color:#1F6E4A} .tone.moyen{background:#FFF4CC; color:#7A5A00} .tone.risque{background:#FBE5DA; color:#A23B14}
/* ---------- Autodiagnostic express ---------- */
.sd{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:24px; align-items:start}
.sd-q{list-style:none; margin:0; padding:clamp(20px,2.6vw,30px); display:grid; gap:22px}
.sd-q fieldset{border:0; margin:0; padding:0; display:grid; gap:12px}
.sd-q legend{display:flex; gap:12px; align-items:flex-start; font-weight:600; font-size:17px; padding:0; line-height:1.45}
.sd-n{flex:none; display:inline-grid; place-items:center; width:30px; height:30px; border-radius:9px; background:var(--tint); font:800 14px/1 var(--f-title); color:var(--navy); margin-top:-2px}
.sd-s{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; padding-left:42px}
.sd-s label{position:relative}
.sd-s input{position:absolute; opacity:0; pointer-events:none}
.sd-s span{display:flex; align-items:center; justify-content:center; text-align:center; min-height:44px; padding:6px 8px; border-radius:12px; background:var(--tint); font-size:14.5px; font-weight:700; line-height:1.2; cursor:pointer; transition:background .15s}
.sd-s span:hover{background:var(--tint-2)}
.sd-s input:checked + span{background:var(--navy); color:#fff}
.sd-s input:focus-visible + span{outline:2px solid var(--blue); outline-offset:2px}
.sd-r{position:sticky; top:100px; padding:clamp(22px,2.6vw,30px); display:grid; gap:14px; background:var(--navy); color:#fff}
.tint .sd-r, .white .sd-r{box-shadow:var(--e2)}
.sd-k{font:800 13px/1.2 var(--f-body); letter-spacing:.14em; text-transform:uppercase; color:var(--yellow)}
.sd-g{height:10px; border-radius:10px; background:rgba(255,255,255,.14); overflow:hidden}
.sd-g i{display:block; height:100%; width:0; border-radius:10px; background:var(--yellow); transition:width .4s var(--ease)}
.sd-c{color:var(--on-dark-2); font-size:15px} .sd-c b{color:#fff}
.sd-res h3{font-size:var(--t-h3); margin-bottom:8px}
.sd-res p{color:var(--on-dark-2)}
.sd.full .sd-r{animation:pop .3s var(--ease)}
.sd-r .btn-p{box-shadow:0 10px 24px rgba(5,12,22,.5); justify-self:start}
/* ---------- Simulateur de devis ---------- */
.sim-g{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,5vw,72px); align-items:center}
.sim{padding:clamp(24px,3vw,36px); display:grid; gap:18px}
.sim-k{font:800 14px/1.2 var(--f-body); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2)}
.sim-in{display:grid; grid-template-columns:minmax(0,1fr) 110px; gap:16px; align-items:center}
.sim-r{-webkit-appearance:none; appearance:none; width:100%; height:10px; border-radius:10px; background:linear-gradient(90deg,var(--blue) var(--p,20%),var(--tint-2) var(--p,20%)); outline-offset:6px; cursor:pointer}
.sim-r::-webkit-slider-thumb{-webkit-appearance:none; width:28px; height:28px; border-radius:50%; background:#fff; border:3px solid var(--navy); box-shadow:0 4px 12px color-mix(in srgb,var(--blue) 45%,transparent)}
.sim-r::-moz-range-thumb{width:24px; height:24px; border-radius:50%; background:#fff; border:3px solid var(--navy); box-shadow:0 4px 12px color-mix(in srgb,var(--blue) 45%,transparent)}
.sim-v{width:100%; min-height:52px; padding:8px 12px; border:1px solid #B7C2D3; border-radius:14px; font:800 24px/1 var(--f-title); color:var(--navy); text-align:center; background:#fff}
.sim-v:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 4px color-mix(in srgb,var(--blue) 20%,transparent)}
.sim-o{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:0}
.sim-o div{background:var(--tint); border-radius:16px; padding:14px 16px; display:grid; gap:2px}
.sim-o dt{font-size:14px; color:var(--ink-2); order:2}
.sim-o dd{margin:0; font:800 28px/1.1 var(--f-title); color:var(--navy); font-variant-numeric:tabular-nums}
.sim-o .tot{grid-column:1/-1; background:var(--navy); color:#fff}
.sim-o .tot dt{color:var(--on-dark-2)} .sim-o .tot dd{color:var(--yellow); font-size:clamp(30px,3.4vw,40px)}
.sim-note{font-size:14.5px; color:var(--ink-2)}
.sim .btn{justify-self:start}
/* ---------- Avant / après : le curseur déplace la séparation ---------- */
.ba{position:relative; padding:clamp(14px,1.8vw,20px); --xc:clamp(25%, calc(var(--x) * 1%), 75%)}
.ba-w{display:grid; grid-template-columns:var(--xc) 0 minmax(0,1fr); min-height:260px; transition:grid-template-columns .12s linear}
.ba-p{padding:clamp(20px,2.6vw,32px); border-radius:18px; display:grid; align-content:start; gap:14px; transition:opacity .2s, filter .2s}
.ba-before{background:#E4ECF4; margin-right:12px}
.ba-after{background:var(--navy); color:#fff; margin-left:12px}
.ba-p h3{font-size:var(--t-h3)}
.ba-p ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.ba-p li{display:flex; gap:10px; font-size:16.5px; line-height:1.4}
.ba-before .ck2{background:var(--tint); color:var(--navy)}
.ba-after .ck2{background:var(--yellow); color:var(--navy)}
.ba.to-a .ba-before, .ba.to-b .ba-after{opacity:.45}
.ba-h{position:relative; z-index:2; align-self:center; justify-self:center; width:48px; height:48px; border-radius:50%; background:#fff; color:var(--navy); display:grid; place-items:center; box-shadow:0 6px 18px color-mix(in srgb,var(--blue) 45%,transparent)}
.ba-h > span{display:grid; place-items:center} .ba-h svg{width:22px; height:22px}
.ba-r{position:absolute; left:clamp(14px,1.8vw,20px); right:clamp(14px,1.8vw,20px); top:0; bottom:0; width:calc(100% - 2 * clamp(14px,1.8vw,20px)); margin:0; opacity:0; cursor:ew-resize; z-index:3}
.ba:has(.ba-r:focus-visible) .ba-h{outline:3px solid var(--blue); outline-offset:3px}
/* ---------- Cartes à retourner ---------- */
.fl-g{display:grid; grid-template-columns:repeat(var(--n,4),minmax(0,1fr)); gap:20px; list-style:none; margin:0; padding:0}
.fl{display:block; width:100%; height:100%; min-height:220px; padding:0; border:0; background:none; cursor:pointer; perspective:1200px; text-align:left; color:var(--ink); border-radius:var(--r-card)}
.fl-in{position:relative; display:grid; height:100%; min-height:220px; transition:transform .55s var(--ease); transform-style:preserve-3d}
.fl-f, .fl-b{grid-area:1/1; backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:var(--r-card); padding:24px}
.fl-f{background:var(--navy); color:#fff; display:flex; flex-direction:column; justify-content:space-between; gap:16px; box-shadow:var(--e1)}
.fl-f b{font:800 clamp(28px,2.8vw,38px)/1.05 var(--f-title); color:var(--yellow); letter-spacing:-.01em}
.fl-f small{display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:14.5px; color:var(--on-dark-2)}
.fl-f small svg{width:16px; height:16px}
.fl-b{background:#fff; transform:rotateY(180deg); font-size:16.5px; line-height:1.5; box-shadow:var(--e1); display:flex; align-items:center}
.fl[aria-pressed="true"] .fl-in{transform:rotateY(180deg)}
.dark .fl-f{background:#1D3350; box-shadow:var(--e-dark)} .dark .fl-b{box-shadow:var(--e-dark)}

@media (max-width:1000px){
  .lk-g, .st-g, .fl-g{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tf-g{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sd, .sim-g{grid-template-columns:minmax(0,1fr)}
  .sd-r{position:static}
}
@media (max-width:860px){
  .ti-g{grid-template-columns:minmax(0,1fr)} .ti-g.img-left .ti-t{order:0} .ti-i .ill{max-width:280px}
  .sc{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .lk-g, .st-g, .tf-g, .fl-g{grid-template-columns:minmax(0,1fr)}
  .sd-s{grid-template-columns:repeat(2,minmax(0,1fr)); padding-left:0}
  .ba-w{grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto auto; min-height:0}
  .ba-before{margin:0 0 10px} .ba-after{margin:10px 0 0} .ba-h{transform:rotate(90deg)}
  .sim-in{grid-template-columns:minmax(0,1fr) 90px}
}
@media (prefers-reduced-motion:reduce){
  .tf-in, .fl-in{transition:none}
  .tf.done .tf-in, .fl[aria-pressed="true"] .fl-in{transform:none}
  .tf.done .tf-f{display:none} .tf-k{transform:none; visibility:hidden} .tf.done .tf-k{visibility:visible}
  .fl-b{transform:none; visibility:hidden} .fl[aria-pressed="true"] .fl-b{visibility:visible} .fl[aria-pressed="true"] .fl-f{visibility:hidden}
}
.ba-p .ck2{flex:none; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; margin-top:1px}
.ba-p .ck2 svg{width:14px; height:14px}
.sim-g > *, .ti-g > *, .sd > *{min-width:0}
.sim .btn, .ti-t .btn, .cta-b .btn{white-space:normal; text-align:center; line-height:1.25; padding-block:10px}
@media (max-width:640px){ .fl, .fl-in{min-height:150px} .sim .btn{justify-self:stretch} }


/* ============================================================
   0.9 : en-tête et pied de page d'AD Conseil (planche 9). Menu repris de WordPress : méga-menu (colonnes, icônes, descriptions,
   carte, bouton) ou liste avec icônes ; fond marine, blanc ou transparent ; en-tête qui se cache au défilement ; pied de page en colonnes.
   ============================================================ */
@media (max-width:1100px){ .burger{display:grid} .top .pills{margin-left:auto} .top .burger{margin-left:0} }
.top .wrap{position:relative}
.menu .mi.mega{position:static}
.mi.mega > .mi-sub{left:0; right:0; top:calc(100% - 6px); min-width:0; padding:24px; border-radius:var(--r22,22px); display:none; flex-direction:column; gap:18px; cursor:default}
.mi.mega:hover > .mi-sub, .mi.mega:focus-within > .mi-sub, .mi.mega > .mi-t[aria-expanded="true"] + .mi-sub{display:flex}
.mi.lst > .mi-sub{min-width:320px; padding:10px; gap:2px}
.mi-sub::before{content:""; position:absolute; left:0; right:0; top:-16px; height:16px}   /* pont invisible : le survol ne se perd pas entre l'intitulé et le menu */
.nv-mega{display:grid; grid-template-columns:repeat(var(--n),minmax(0,1fr)); gap:20px}
.nv-col{display:grid; gap:4px; align-content:start; min-width:0}
.nv-h{display:block; padding:0 10px 6px; color:var(--navy); font:800 15px/1.2 var(--f-body); letter-spacing:.14em; text-transform:uppercase}
.mi-sub a.nv-l{display:grid; grid-template-columns:40px minmax(0,1fr); gap:12px; align-items:start; padding:10px; border-radius:14px; color:var(--navy); text-transform:none; letter-spacing:0; white-space:normal; font:inherit; transition:background .15s var(--ease)}
.mi.lst a.nv-l{grid-template-columns:36px minmax(0,1fr); align-items:center; min-height:52px; padding:6px 12px}
.mi-sub a.nv-l:hover, .mi-sub a.nv-l:focus-visible{background:var(--tint); color:var(--navy)}
.nv-ic{display:grid; place-items:center; width:40px; height:40px; border-radius:12px; background:var(--tint); color:var(--navy)}
.mi.lst .nv-ic{width:36px; height:36px; border-radius:10px}
.nv-ic svg{width:20px; height:20px}
.nv-ic.img{background:none} .nv-ic img{width:100%; height:100%; object-fit:contain}
.mi-sub a.nv-l:hover .nv-ic{background:var(--white); box-shadow:var(--e1)}
.nv-tx{display:grid; gap:4px; min-width:0}
.nv-tx b{font:700 15.5px/1.3 var(--f-body)}
.nv-tx span{font-size:15px; line-height:1.45; color:var(--navy)}
.mi-sub a.nv-card{display:grid; grid-template-columns:96px minmax(0,1fr); gap:14px; align-items:center; margin-top:8px; padding:12px; border-radius:16px; background:var(--navy); color:#fff; text-transform:none; letter-spacing:0; white-space:normal; font:inherit; transition:transform .18s var(--ease)}
.mi-sub a.nv-card:hover{background:var(--navy); color:#fff; transform:translateY(-2px)}
.nv-card:not(:has(.nv-ci)){grid-template-columns:minmax(0,1fr)}
.nv-ci{display:block; height:86px; border-radius:10px; overflow:hidden; background:var(--tint)} .nv-ci img{width:100%; height:100%; object-fit:cover}
.nv-ct{display:grid; gap:6px}
.nv-ct em{font:800 15px/1.2 var(--f-body); font-style:normal; letter-spacing:.12em; text-transform:uppercase; color:var(--yellow)}
.nv-ct b{font:700 16px/1.25 var(--f-title)}
.nv-ct i{display:inline-flex; align-items:center; gap:6px; font-style:normal; font-size:15px; font-weight:700; color:var(--blue)} .nv-ct i svg{width:16px; height:16px}
.nv-foot{display:flex; justify-content:flex-end; padding-top:16px; box-shadow:inset 0 1px 0 var(--tint)}
.mi-sub .nv-foot a.btn{color:var(--navy); padding:0 20px; letter-spacing:0; text-transform:none; font-size:15px}
.mi-sub .nv-foot a.btn:hover{background:var(--blue-h, var(--blue-h)); color:var(--navy)}
/* Fonds de l'en-tête : blanc d'emblée, ou transparent sur le haut de page marine (devient blanc au défilement) */
.top.h-light{background:var(--white); color:var(--navy); box-shadow:0 8px 28px color-mix(in srgb,var(--blue) 18%,transparent)}
.top.h-light .lg-c{display:none} .top.h-light .lg-d{display:block} .top.h-light .burger{border-color:color-mix(in srgb,var(--navy) 25%,transparent)}
.top.h-light .drawer{background:#fff} .top.h-light .drawer a{color:var(--navy); box-shadow:inset 0 -1px 0 var(--tint)}
.top.h-clear:not(.scrolled){background:transparent; box-shadow:none}
.top.h-clear{margin-bottom:-80px}
.top.h-clear ~ main > .sec:first-child{padding-top:calc(80px + clamp(40px,5vw,72px))}
@media (max-width:640px){ .top.h-clear{margin-bottom:-68px} .top.h-clear ~ main > .sec:first-child{padding-top:calc(68px + 40px)} }
/* Au défilement : l'en-tête se cache en descendant, revient en remontant */
.top.h-hide{transition:transform .3s var(--ease), background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease)}
.top.h-hide.gone{transform:translateY(-100%)}
@media (prefers-reduced-motion:reduce){ .top.h-hide{transition:none} }
/* Tiroir (téléphone, tablette) : un intitulé à sous-menu se déplie */
.drawer .d-g{display:grid; grid-template-columns:minmax(0,1fr) 48px; align-items:center; box-shadow:inset 0 -1px 0 rgba(255,255,255,.08)}
.drawer .d-g a{box-shadow:none}
.d-t{width:44px; height:44px; border:0; border-radius:12px; background:none; color:inherit; display:grid; place-items:center; cursor:pointer}
.d-t svg{width:18px; height:18px; transition:transform .2s var(--ease)} .d-t[aria-expanded="true"] svg{transform:rotate(180deg)}
.d-t:hover{background:rgba(255,255,255,.1)} .top.scrolled .d-t:hover, .top.h-light .d-t:hover{background:var(--tint)}
.drawer .d-fold{padding:4px 0 10px 12px}
.drawer .d-fold a{padding:11px 4px; text-transform:none; letter-spacing:0; font-size:16px; font-weight:700; color:#fff; box-shadow:none}
.top.scrolled .drawer .d-fold a, .top.h-light .drawer .d-fold a{color:var(--navy)}
/* Pied de page d'AD Conseil */
.foot-ac .fa-g{display:grid; grid-template-columns:repeat(var(--n),minmax(0,1fr)) minmax(180px,.9fr); gap:32px}
.foot-ac .fa-c{display:grid; gap:26px; align-content:start; min-width:0}
.foot-ac .fh{font:800 15px/1.2 var(--f-body); letter-spacing:.14em; text-transform:uppercase; color:#fff; margin:0 0 14px}
.foot-ac ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.foot-ac a{color:#fff; text-decoration:none}
.foot-ac .fa-b a:hover, .foot-ac .fq-a:hover, .foot-ac .foot-b nav a:hover{text-decoration:underline; text-underline-offset:3px}
.fsos{display:flex; gap:10px}
.fso{display:grid; place-items:center; width:42px; height:42px; border-radius:12px; box-shadow:inset 0 0 0 2px rgba(255,255,255,.5); transition:background .15s var(--ease), box-shadow .15s var(--ease)}
.fso svg{width:20px; height:20px} .fso:hover{background:var(--blue); box-shadow:none; color:var(--navy)}
.fq-g{display:flex; flex-wrap:wrap; gap:10px}
.fq-l{display:grid; place-items:center; min-width:72px; height:48px; padding:6px 10px; border-radius:10px; background:#fff; color:var(--navy)}
.fq-l.tx{font:800 15px/1 var(--f-body)}
.fq-l img{display:block; height:36px; width:auto; max-width:120px; object-fit:contain}
.fq-a{display:inline-block; margin-top:12px; font-size:15px}
.foot-ac .foot-b{align-items:center}
.foot-ac .foot-b .brand img{height:22px}
.foot-ed{position:absolute; right:18px; margin-top:-40px; width:40px; height:40px; border-radius:12px; border:0; background:var(--blue); color:var(--navy); display:grid; place-items:center; cursor:pointer}
.foot-s{position:relative} .foot-ed svg{width:18px; height:18px}
@media (max-width:1100px){ .foot-ac .fa-g{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .foot-ac .fa-g{grid-template-columns:minmax(0,1fr); gap:28px} }
.hp input{border:0; background:transparent; color:transparent}   /* 0.19 : champ piège, hors de l’écran, sans couleur hors charte */
/* 0.21 : champs ajoutés « à la carte » (écran Formulaires) : liste déroulante et case à cocher, à la hauteur et au contour des autres champs */
.fld.f-sel select{width:100%; min-height:50px; padding:12px 44px 12px 16px; border:1px solid rgba(77,180,232,.42); border-radius:14px; font:400 16px/1.3 var(--f-body); color:var(--ink); background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23132438' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 18px center; appearance:none; cursor:pointer}
.fld.f-sel select:hover{border-color:var(--navy)} .fld.f-sel select:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 4px color-mix(in srgb,var(--blue) 20%,transparent)}
.fld.f-ck .f-ckl{display:flex; align-items:center; gap:12px; font-size:16px; font-weight:400; cursor:pointer}
.fld.f-ck input{appearance:none; flex:none; width:24px; height:24px; margin:0; border-radius:6px; border:1px solid rgba(77,180,232,.6); background:#fff; display:grid; place-items:center; cursor:pointer}
.fld.f-ck input:checked{background:var(--blue); border-color:var(--blue)}
.fld.f-ck input:checked::after{content:""; width:6px; height:11px; border:solid var(--navy); border-width:0 2.5px 2.5px 0; transform:rotate(45deg) translateY(-1px)}
.fld.f-ck input:focus-visible{outline:2px solid var(--blue); outline-offset:2px}
.fld.in label .f-opt{margin-right:.25em}   /* 0.21 : « (facultatif) » gardé quand l'exemple est retiré */
/* 0.31.3 : la case des champs « case à cocher » et de l'abonnement Acumbamail garde sa taille (24 px) face aux règles des champs texte */
.form .fld.f-ck input[type=checkbox]{width:24px; height:24px; min-height:0; padding:0; flex:none}