/* Accueil : « L'Afrique est notre ADN » (manifeste) et domaines en triptyque interactif.
   Fichier commun au site statique et au thème (wp-theme/sinequanone/assets/css/sections.css),
   comportements dans sections.js. */

/* ─── L'agence : manifeste « L'Afrique est notre ADN » ─── */
.adn{position:relative;overflow:hidden;padding-block:clamp(90px,11vw,150px)}
.adn-bg{position:absolute;right:-2vw;bottom:-4vw;z-index:0;margin:0;font:normal clamp(180px,30vw,460px)/.8 var(--display);letter-spacing:.02em;color:transparent;-webkit-text-stroke:1.5px rgba(29,134,163,.2);pointer-events:none;user-select:none;will-change:transform}
.adn-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(40px,7vw,120px);align-items:center}
.adn-visual{position:relative;margin:0;width:100%;max-width:470px}
.adn-visual .ph{aspect-ratio:3/4;border-radius:22px 140px 22px 22px;overflow:hidden;background:#111;clip-path:inset(0 0 100% 0);transition:clip-path 1.3s cubic-bezier(.7,0,.2,1)}
.adn-visual.in .ph{clip-path:inset(0)}
.adn-visual img{width:100%;height:100%;object-fit:cover;transform:scale(1.18);transition:transform 1.9s cubic-bezier(.2,.7,.2,1)}
.adn-visual.in img{transform:scale(1)}
.adn-visual svg{position:absolute;left:-22px;bottom:-22px;width:46%;height:46%;overflow:visible;transform:rotate(180deg);pointer-events:none}
.adn-visual svg path{fill:none;stroke:var(--sky);stroke-width:9;stroke-linecap:square;stroke-dasharray:1200;stroke-dashoffset:1200;transition:stroke-dashoffset 1.4s .6s cubic-bezier(.6,0,.2,1)}
.adn-visual.in svg path{stroke-dashoffset:0}
.adn-tag{position:absolute;right:-16px;top:44px;padding:12px 16px;border-radius:12px;background:var(--night);color:#fff;font:700 11.5px/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;box-shadow:0 18px 40px -20px rgba(0,0,0,.5)}
.adn-tag::before{content:"";display:inline-block;width:8px;height:8px;margin-right:9px;border-radius:50%;background:var(--sky);vertical-align:1px}
.adn-kicker{display:flex;align-items:center;gap:14px;margin:0;font:700 12.5px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--teal)}
.adn-kicker::before{content:"";flex:none;width:46px;height:7px;background:var(--sky)}
.adn-title{margin:20px 0 0;font:normal clamp(42px,5.6vw,86px)/1.02 var(--display);letter-spacing:.01em;color:var(--ink)}
.adn-title > span:not(.w){display:block;color:var(--teal)}
.adn-lead{margin:30px 0 0;font:400 clamp(21px,2vw,28px)/1.55 var(--sans);color:var(--ink);max-width:36ch}
.adn-lead strong{font-weight:700;color:var(--teal)}
.adn-p{margin:18px 0 0;font-size:clamp(17px,1.3vw,19px);line-height:1.75;color:var(--text);max-width:48ch}
.adn-p strong{color:var(--teal)}
.adn-route{display:flex;flex-wrap:wrap;align-items:center;gap:10px 0;margin:34px 0 0;padding:0;list-style:none}
.adn-route li{display:flex;align-items:center;opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s}
.adn-route li+li::before{content:"";flex:none;width:20px;height:2px;background:var(--sky)}
.adn-route span{padding:9px 13px;border:1.5px solid var(--line);border-radius:999px;background:#fff;font:700 12.5px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.adn-route li:first-child span{border-color:var(--teal);background:var(--teal);color:#fff}
.adn-route.in li{opacity:1;transform:none}
.adn-route.in li:nth-child(2){transition-delay:.12s}.adn-route.in li:nth-child(3){transition-delay:.24s}.adn-route.in li:nth-child(4){transition-delay:.36s}.adn-route.in li:nth-child(5){transition-delay:.48s}.adn-route.in li:nth-child(6){transition-delay:.6s}.adn-route.in li:nth-child(n+7){transition-delay:.72s}
.adn .cta{display:flex;justify-content:flex-start;margin-top:36px}
@media (max-width:900px){.adn-grid{grid-template-columns:1fr}.adn-visual{max-width:380px}.adn-tag{right:-8px}.adn-bg{bottom:auto;top:28%}}

/* ─── Domaines : intro éditoriale + triptyque de pôles ─── */
.areas .wrap.poles-wrap{display:block}
.poles-head{display:grid;gap:clamp(22px,3vw,34px);margin-bottom:clamp(40px,5vw,64px)}
.poles-intro{display:grid;grid-template-columns:minmax(0,.3fr) minmax(0,1fr);gap:clamp(18px,4vw,64px);align-items:start;padding-top:28px;border-top:1px solid var(--line)}
.poles-intro h3{margin:0;font:normal clamp(22px,2.2vw,30px)/1.15 var(--display);letter-spacing:.02em;color:var(--teal)}
.poles-lead{margin:0;font:400 clamp(20px,1.9vw,27px)/1.6 var(--sans);color:var(--ink)}
.poles-lead .hl{color:var(--teal);font-style:italic;cursor:pointer;background:linear-gradient(var(--sky),var(--sky)) 0 100%/0 2px no-repeat;transition:background-size .45s}
.poles-lead .hl.on,.poles-lead .hl:hover{background-size:100% 2px}
.poles{display:flex;gap:14px;min-height:clamp(440px,36vw,500px)}
.pole{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;border-radius:22px;background:#fff;color:var(--ink);overflow:hidden;transition:flex-grow .8s cubic-bezier(.6,0,.2,1),background-color .5s}
.pole.is-open{flex-grow:2.4;background:var(--teal)}
.pole::after{content:"";position:absolute;top:24px;right:24px;width:34px;height:34px;border-top:5px solid var(--sky);border-right:5px solid var(--sky);transition:transform .6s,border-color .4s;pointer-events:none}
.pole.is-open::after{border-color:#fff;transform:translate(4px,-4px)}
.pole-tab{display:grid;gap:12px;width:100%;margin:0;padding:clamp(26px,2.6vw,38px) clamp(24px,2.4vw,36px) 0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.pole-tab:focus-visible{outline:2px solid var(--sky);outline-offset:-8px;border-radius:22px}
.pole-n{font:normal clamp(56px,6vw,96px)/.85 var(--display);color:transparent;-webkit-text-stroke:1.5px var(--teal);transition:-webkit-text-stroke-color .5s}
.pole-name{font:normal clamp(22px,1.9vw,28px)/1.1 var(--display);letter-spacing:.02em;color:var(--ink);transition:color .5s}
.pole-verb{font:italic 400 17px/1.45 var(--sans);color:var(--teal);transition:color .5s}
.pole.is-open .pole-n{-webkit-text-stroke-color:rgba(255,255,255,.75)}
.pole.is-open .pole-name{color:#fff}
.pole.is-open .pole-verb{color:var(--sky)}
.pole-body{display:grid;grid-template-rows:0fr;margin-top:auto;padding:0 clamp(24px,2.4vw,36px);opacity:0;transition:grid-template-rows .7s cubic-bezier(.6,0,.2,1),opacity .4s,padding .7s}
.pole-body > div{overflow:hidden;min-height:0}
.pole-body p{margin:18px 0 0;font-size:16.5px;line-height:1.7;color:rgba(255,255,255,.92);max-width:54ch}
.pole.is-open .pole-body{grid-template-rows:1fr;opacity:1;padding-bottom:clamp(26px,2.6vw,38px);transition-delay:0s,.25s,0s}
.pole-more{display:flex;align-items:center;gap:10px;margin-top:auto;padding:18px clamp(24px,2.4vw,36px) clamp(26px,2.6vw,34px);font:700 12.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--teal)}
.pole-more::after{content:"→";font-size:16px;transition:transform .3s}
.pole:hover .pole-more::after{transform:translateX(4px)}
.pole.is-open .pole-more{display:none}
@media (max-width:980px){.poles{flex-direction:column;min-height:0}.pole{flex:none}.poles-intro{grid-template-columns:1fr}.pole-n{font-size:52px}.pole-body{margin-top:0}}
@media (prefers-reduced-motion:reduce){.adn-visual .ph,.adn-visual img,.adn-visual svg path,.adn-route li,.pole,.pole-body{transition:none}.adn-visual .ph{clip-path:none}.adn-visual img{transform:none}.adn-visual svg path{stroke-dashoffset:0}}

/* ─── Animations des deux sections (désactivées si « réduire les animations ») ─── */
@keyframes sqnBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes sqnPing{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.6);opacity:0}}
@keyframes sqnProg{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes sqnShine{from{background-position:-120% 0}to{background-position:220% 0}}
/* fond « ADN » : se dessine de gauche à droite */
.adn-bg{clip-path:inset(0 100% 0 0);transition:clip-path 2.2s cubic-bezier(.6,0,.2,1)}
.adn-bg.in{clip-path:inset(-10% -10% -10% -10%)}
/* titre : mots qui montent derrière un masque */
.adn-title.rv{opacity:1;transform:none}
.adn-title .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em;margin-bottom:-.06em}
.adn-title .w > i{display:inline-block;font-style:normal;transform:translateY(110%) rotate(4deg);transform-origin:0 100%;transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.adn-title.in .w > i{transform:none}
/* photo : inclinaison 3D au survol, étiquette qui flotte */
.adn-visual{perspective:1100px}
.adn-visual .ph{position:relative}
.adn-visual .ph{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:preserve-3d;transition:clip-path 1.3s cubic-bezier(.7,0,.2,1),transform .5s cubic-bezier(.2,.7,.2,1)}
.adn-visual .ph::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.28),transparent 55%);opacity:0;transition:opacity .4s;pointer-events:none}
.adn-visual:hover .ph::after{opacity:1}
.adn-visual.in .adn-tag{animation:sqnBob 4s 1.6s ease-in-out infinite}
.adn-tag{opacity:0;translate:0 12px;transition:opacity .6s 1.1s,translate .6s 1.1s}
.adn-visual.in .adn-tag{opacity:1;translate:0 0}
.adn-tag::before{position:relative}
/* mots en bleu : reflet qui passe */
.adn-lead strong,.adn-p strong{background:linear-gradient(100deg,transparent 30%,rgba(60,191,230,.35) 50%,transparent 70%) no-repeat;background-size:60% 100%;background-position:-120% 0}
.adn-lead.in strong,.adn-p.in strong{animation:sqnShine 1.6s .7s ease-out both}
/* itinéraire : traits qui se tracent, Bruxelles qui « émet » */
.adn-route li+li::before{transform:scaleX(0);transform-origin:left}
.adn-route.in li+li::before{transform:scaleX(1);transition:transform .45s;transition-delay:inherit}
.adn-route li:first-child span{position:relative}
.adn-route li:first-child span::after{content:"";position:absolute;inset:-2px;border-radius:inherit;border:2px solid var(--teal);opacity:0}
.adn-route.in li:first-child span::after{animation:sqnPing 2.2s 1.2s ease-out infinite}
.adn-route span{transition:transform .3s,background-color .3s,color .3s,border-color .3s}
.adn-route li:hover span{transform:translateY(-3px);border-color:var(--teal)}
/* pôles : entrée en cascade */
.poles .pole.rv{transform:translateY(60px) scale(.97);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1),flex-grow .8s cubic-bezier(.6,0,.2,1),background-color .5s}
.poles .pole.rv.in{transform:none}
.poles .pole.rv:nth-child(2){transition-delay:.12s,.12s,0s,0s}
.poles .pole.rv:nth-child(3){transition-delay:.24s,.24s,0s,0s}
/* pôles : halo qui suit la souris */
.pole::before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(420px circle at var(--mx,50%) var(--my,30%),rgba(60,191,230,.16),transparent 60%);opacity:0;transition:opacity .4s;pointer-events:none}
.pole.is-open::before{background:radial-gradient(520px circle at var(--mx,50%) var(--my,30%),rgba(255,255,255,.16),transparent 60%)}
.pole:hover::before{opacity:1}
.pole > *{position:relative;z-index:1}
/* pôles : le numéro se remplit, le texte monte */
.pole-n{background:linear-gradient(#fff,#fff) 0 100%/100% 0 no-repeat;-webkit-background-clip:text;background-clip:text;transition:-webkit-text-stroke-color .5s,background-size .9s .2s cubic-bezier(.6,0,.2,1)}
.pole.is-open .pole-n{background-size:100% 100%}
.pole-name{display:inline-block;transition:color .5s,transform .6s cubic-bezier(.2,.7,.2,1)}
.pole.is-open .pole-name{transform:translateX(6px)}
.pole-body p{transform:translateY(22px);transition:transform .8s .2s cubic-bezier(.2,.7,.2,1)}
.pole.is-open .pole-body p{transform:none}
/* pôles : défilement automatique tant que personne n'y touche */
.pole-prog{position:absolute;left:0;right:0;bottom:0;z-index:2;height:4px;background:var(--sky);transform:scaleX(0);transform-origin:left;pointer-events:none}
.poles.is-auto .pole.is-open .pole-prog{animation:sqnProg var(--auto,6s) linear forwards}
@media (max-width:980px){.pole-prog{display:none}}
@media (prefers-reduced-motion:reduce){.adn-bg{clip-path:none;transition:none}.adn-title .w > i,.pole-n,.pole-body p,.pole-name{transform:none;transition:none}.adn-visual .ph{transform:none}.adn-tag,.adn-route.in li:first-child span::after,.adn-lead.in strong,.adn-p.in strong{animation:none}.adn-tag{opacity:1;translate:0 0}.adn-route li+li::before{transform:none}.poles .pole.rv{transform:none}.pole-prog{display:none}}

/* ─── Photos de marque : bande contact (stylo), en-tête du blog (lunettes), pré-inscription (signature) ─── */
.touch-photo{position:relative;margin:0;justify-self:end;width:100%;max-width:340px}
.touch-photo .ph{aspect-ratio:4/5;border-radius:20px 20px 20px 120px;overflow:hidden;background:#0B0C0D;box-shadow:0 30px 60px -32px rgba(0,0,0,.55)}
.touch-photo img{width:100%;height:100%;object-fit:cover}
.touch-photo svg{position:absolute;top:-18px;right:-18px;width:52%;height:52%;overflow:visible;pointer-events:none}
.touch-photo svg path{fill:none;stroke:#fff;stroke-width:8;stroke-linecap:square}
@media (max-width:860px){.touch-photo{justify-self:start;max-width:260px}}
.list-hero .lh-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:clamp(32px,5vw,80px);align-items:center}
.lh-photo{position:relative;margin:0;justify-self:end;width:100%;max-width:290px}
.lh-photo .ph{aspect-ratio:4/5;border-radius:20px 20px 20px 110px;overflow:hidden;background:#000}
.lh-photo img{width:100%;height:100%;object-fit:cover}
.lh-photo svg{position:absolute;top:-16px;right:-16px;width:50%;height:50%;overflow:visible;pointer-events:none}
.lh-photo svg path{fill:none;stroke:var(--sky);stroke-width:8;stroke-linecap:square}
@media (max-width:860px){.list-hero .lh-grid{grid-template-columns:1fr}.lh-photo{display:none}}
.ins-photo{margin:12px 0 0;border-radius:20px 20px 20px 90px;overflow:hidden;aspect-ratio:4/3;background:#111}
.ins-photo img{width:100%;height:100%;object-fit:cover}
@media (max-width:860px){.ins-photo{max-width:480px}}