/* Pied de page « équipe Otopcy » : la dernière page d'un carnet de croquis.
   Port sans framework du composant DoodleCrewFooter, aux couleurs et aux icônes d'Otopcy. */
.ofc{--ink:#0a0a0a;--paper:#fff;--soft:#5f5f66;--line:#e4e4e8;--accent:var(--blue);
  position:relative;isolation:isolate;overflow:hidden;overflow:clip;background:var(--paper);color:var(--ink);font-family:var(--ui);display:flex;flex-direction:column}
.ofc a{color:inherit}
.ofc :focus-visible{outline:2px dashed var(--ink);outline-offset:4px;border-radius:6px}
.ofc-in{max-width:1360px;width:100%;margin:0 auto;padding:0 clamp(16px,4vw,56px)}

/* Trois encarts en verre liquide, comme l'en-tête : liseré clair, reflet, ombre douce */
.ofc-top{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,20px);padding-top:clamp(36px,5vw,64px);position:relative;z-index:4}
/* un léger halo de couleurs derrière les encarts, pour que le verre ait quelque chose à flouter */
.ofc-top::before{content:"";position:absolute;inset:10% 6% -10%;z-index:-1;pointer-events:none;filter:blur(60px);opacity:.22;
  background:radial-gradient(30% 60% at 18% 50%,var(--green),transparent 70%),radial-gradient(30% 60% at 50% 40%,var(--blue),transparent 70%),radial-gradient(30% 60% at 84% 55%,var(--violet),transparent 70%)}
.ofc-col{--glass-tint:rgba(255,255,255,.55);--gs:inset 0 0 0 1px rgba(255,255,255,.8),inset 0 1px 0 rgba(255,255,255,.95),0 0 0 1px rgba(10,10,10,.06),0 10px 30px rgba(10,10,10,.06);
  border-radius:26px;padding:clamp(22px,2.4vw,32px);display:flex;flex-direction:column;transition:transform .5s var(--ease),box-shadow .5s}
.ofc-col::after{-webkit-backdrop-filter:blur(24px) saturate(1.6);backdrop-filter:blur(24px) saturate(1.6)}
html.glass-svg .ofc-col::after{backdrop-filter:blur(24px) saturate(1.6)}
.ofc-col:hover{transform:translateY(-3px)}
.ofc-col h3{margin:0 0 16px;font-family:var(--display);font-size:clamp(19px,1.6vw,22px);font-weight:700;letter-spacing:-.025em;display:flex;align-items:center;gap:9px}
.ofc-col h3 i{width:9px;height:9px;border-radius:50%;background:var(--dc)}
.ofc-col ul{display:grid;gap:8px}
.ofc-social{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:22px}
.ofc-social a{--glass-tint:rgba(255,255,255,.7);--gs:inset 0 0 0 1px rgba(255,255,255,.85),0 0 0 1px rgba(10,10,10,.07),0 4px 12px rgba(10,10,10,.06);width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--ink);transition:transform .3s var(--ease),color .2s}
.ofc-social a::after{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.ofc-social a{transition:transform .3s var(--ease),color .25s,background .25s}
.ofc-social a:hover{transform:translateY(-2px);background:var(--sc);color:#fff}
.ofc-social a:hover::after{opacity:0}
.ofc-social svg{width:17px;height:17px}
.ofc-link{white-space:nowrap}
.ofc-link{position:relative;display:inline-flex;align-items:center;font-size:14px;font-weight:500;color:var(--soft);padding:2px 0;transition:color .35s var(--ease)}
/* survol : effet partagé .o-link (app.css), dans la couleur de l'encart */
.ofc-col{--lc:var(--dc)}
.ofc-link em{font-style:normal;font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;background:var(--blue);color:#fff;border-radius:999px;padding:2px 6px;margin-left:6px;vertical-align:2px}

/* Le monde : le mot, l'équipe, les doodles */
.ofc-world{position:relative;z-index:5;padding-top:clamp(84px,10vw,150px);padding-bottom:clamp(28px,4vw,52px)}
.ofc-stage{position:relative;z-index:1}
.ofc-word{position:relative;z-index:2;display:flex;justify-content:center;align-items:flex-start;font-family:var(--display);font-weight:800;font-size:clamp(76px,19vw,300px);line-height:1;letter-spacing:0;gap:.07em;user-select:none;-webkit-user-select:none;padding:0 .04em}
.ofc-l{display:inline-block;transform-origin:50% 100%;cursor:default}
.ofc-l:nth-child(1){color:var(--blue)}.ofc-l:nth-child(2){color:var(--green)}.ofc-l:nth-child(4){color:var(--violet)}.ofc-l:nth-child(5){color:var(--yellow)}.ofc-l:nth-child(6){color:var(--red)}
/* les lettres sont les images du logo, à hauteur commune (l'icône fait la même taille que dans le logo) */
.ofc-l img{display:block;height:.814em;width:auto;pointer-events:none;-webkit-user-drag:none}
.ofc-l.is-ico img{transform-origin:50% 48.6%;transition:rotate .9s cubic-bezier(.3,1.4,.5,1)}
.ofc-l.is-ico:hover img{rotate:90deg}
.ofc-l:not(.is-ico):hover{animation:ofc-jiggle .6s cubic-bezier(.3,1.5,.5,1)}
.ofc-ground{position:absolute;left:0;right:0;height:30px;z-index:1;pointer-events:none;overflow:visible}
.ofc-ground path{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round}
.ofc-ground .tufts{stroke-width:1.6}

/* L'équipe */
.ofc-crew{position:absolute;left:0;top:0;z-index:3;cursor:pointer;background:none;border:0;padding:0;transform-origin:50% 100%}
.ofc-crew.is-behind{z-index:3}
.ofc-crew svg{display:block;width:100%;height:100%;overflow:visible}
.ofc-front{position:absolute;z-index:3;pointer-events:none}
.ofc-front svg{display:block;width:100%;height:100%;overflow:visible}
.ofc-art{stroke:var(--ink);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;fill:var(--paper)}
.ofc-art .n{fill:none}.ofc-art .k{fill:var(--ink)}.ofc-art .w{fill:#fff}.ofc-art .d{fill:#1d1d1f}
.ofc-art .sh{fill:var(--ink);stroke:none;opacity:.12}
.ofc-art .pk{fill:#ff8fa3;stroke:none;opacity:.8}
.ofc-art .gl{fill:#fff;stroke:none}
.ofc-art .thin{stroke-width:1.6}
.ofc-eye{transform-box:fill-box;transform-origin:center;animation:ofc-blink var(--bt,5s) infinite var(--bd,0s)}
.ofc-hop{transform-box:fill-box;transform-origin:50% 100%}
.ofc-hop.is-hop{animation:ofc-hop .62s cubic-bezier(.3,.7,.4,1)}
.ofc-idle-bob{animation:ofc-bob 3.2s ease-in-out infinite}
.ofc-idle-sway{transform-box:fill-box;transform-origin:50% 100%;animation:ofc-sway 4s ease-in-out infinite}
.ofc-bubble{position:absolute;z-index:6;transform:translate(-50%,-100%);transform-origin:50% 100%;
  background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(18px) saturate(1.7);backdrop-filter:blur(18px) saturate(1.7);
  color:var(--ink);border-radius:16px;padding:9px 14px;font-size:13px;font-weight:500;line-height:1.35;white-space:nowrap;width:max-content;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.85),inset 0 1px 0 #fff,0 0 0 1px rgba(10,10,10,.07),0 12px 32px rgba(10,10,10,.12);
  animation:ofc-bubble .35s cubic-bezier(.3,1.5,.5,1) both;pointer-events:none}
.ofc-bubble::after{content:"";position:absolute;left:50%;bottom:-6px;width:12px;height:12px;background:rgba(255,255,255,.92);border-radius:0 0 3px 0;box-shadow:1px 1px 0 rgba(10,10,10,.07);transform:translateX(-50%) rotate(45deg)}
.ofc-bubble.is-left{transform:translate(-86%,-100%)}.ofc-bubble.is-left::after{left:86%}
.ofc-bubble.is-right{transform:translate(-14%,-100%)}.ofc-bubble.is-right::after{left:14%}

/* Doodles qui tombent */
.ofc-doodles{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden}
.ofc-doodle{position:absolute;left:0;top:0;pointer-events:auto;cursor:pointer;will-change:transform;touch-action:manipulation}
.ofc-doodle svg{display:block;width:100%;height:100%;stroke:var(--ink);stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(2px 2px 0 rgba(10,10,10,.14))}

/* Phrase et boutons */
.ofc-cta{position:relative;z-index:5;display:flex;flex-direction:column;align-items:center;gap:20px;padding:clamp(26px,3vw,40px) 0 clamp(30px,4vw,48px);text-align:center}
.ofc-tagline{font-family:var(--display);font-weight:600;font-size:clamp(20px,2.2vw,28px);letter-spacing:-.025em;line-height:1.25;max-width:32ch;text-wrap:balance}
.ofc-word-t{display:inline-block;white-space:pre}
.ofc-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.ofc-btn{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 20px 0 15px;border-radius:999px;border:2px solid var(--ink);font-size:14.5px;font-weight:700;box-shadow:0 3px 0 var(--ink);transition:transform .18s cubic-bezier(.3,1.4,.5,1),box-shadow .18s cubic-bezier(.3,1.4,.5,1)}
.ofc-btn svg{width:18px;height:18px;stroke:var(--ink);stroke-width:1.9}
.ofc-btn.is-outline{background:#fff;color:var(--ink)}
.ofc-btn.is-solid{background:var(--blue);color:#fff;box-shadow:0 3px 0 var(--ink)}
.ofc-btn.is-solid svg{stroke:#fff}
.ofc-btn:hover{transform:translateY(-2px) rotate(-1.2deg);box-shadow:0 5px 0 var(--ink)}
.ofc-btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink);transition-duration:.06s}
.ofc-btn:hover svg{animation:ofc-wiggle .5s ease-in-out}

/* Barre du bas */
.ofc-bar{position:relative;z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;padding-top:18px;padding-bottom:22px;font-size:13px}
.ofc-bar{justify-content:space-between}
.ofc-copy{color:var(--soft)}
.ofc-made{color:var(--soft)}
.ofc-heart{display:inline-block;color:inherit;font-size:1.15em;animation:ofc-beat 1.6s ease-in-out infinite}
@keyframes ofc-beat{0%,40%,100%{transform:scale(1)}20%{transform:scale(1.25)}30%{transform:scale(.95)}}
.ofc-inline{display:flex;flex-wrap:wrap;gap:4px 18px}
.ofc-inline .ofc-link{font-size:13px}
.ofc-socials .ofc-link{color:var(--ink);font-weight:600}
.ofc-totop{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:13px;font-weight:600;padding:6px 12px;border-radius:999px;border:1.5px solid var(--ink);background:#fff;color:var(--ink);cursor:pointer;transition:transform .2s cubic-bezier(.3,1.5,.5,1)}
.ofc-totop svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ofc-totop:hover{transform:translateY(-2px)}
.ofc-totop:hover svg{animation:ofc-up .6s ease-in-out infinite}

/* Le scénario : tout est caché, puis chaque élément joue à son --d quand le pied de page entre à l'écran */
.ofc[data-play="0"] .ofc-l,.ofc[data-play="0"] .ofc-arrive,.ofc[data-play="0"] .ofc-word-t,.ofc[data-play="0"] .ofc-pop,.ofc[data-play="0"] .ofc-rise,.ofc[data-play="0"] .ofc-fade,.ofc[data-play="0"] .ofc-doodle{opacity:0}
.ofc[data-play="0"] .ofc-draw{stroke-dasharray:1;stroke-dashoffset:1}
.ofc[data-play="1"] .ofc-l{animation:ofc-stamp .62s cubic-bezier(.2,.8,.25,1.15) var(--d) both}
.ofc[data-play="1"] .ofc-draw{stroke-dasharray:1;animation:ofc-draw 1.1s cubic-bezier(.6,0,.3,1) var(--d) both}
.ofc[data-play="1"] .ofc-fade{animation:ofc-fade .6s ease-out var(--d) both}
.ofc[data-play="1"] .ofc-arrive.is-front{animation:ofc-rise-up .75s cubic-bezier(.3,1.5,.5,1) var(--d) both}
.ofc[data-play="1"] .ofc-arrive.is-top{animation:ofc-plop .8s cubic-bezier(.3,.9,.4,1) var(--d) both}
.ofc[data-play="1"] .ofc-arrive.is-behind{animation:ofc-peek .9s cubic-bezier(.3,1.4,.5,1) var(--d) both}
.ofc[data-play="1"] .ofc-word-t{animation:ofc-wordin .6s cubic-bezier(.2,.8,.3,1) var(--d) both}
.ofc[data-play="1"] .ofc-pop{animation:ofc-popin .55s cubic-bezier(.3,1.6,.5,1) var(--d) both}
.ofc[data-play="1"] .ofc-rise{animation:ofc-fadeup .7s cubic-bezier(.2,.8,.3,1) var(--d) both}
.ofc-arrive{transform-origin:50% 100%}

@keyframes ofc-stamp{0%{opacity:0;transform:translateY(-34%) scale(1.28) rotate(var(--r))}55%{opacity:1;transform:translateY(2%) scale(.95,1.05)}75%{transform:scale(1.04,.95)}100%{opacity:1;transform:none}}
@keyframes ofc-draw{to{stroke-dashoffset:0}}
@keyframes ofc-fade{from{opacity:0}to{opacity:1}}
@keyframes ofc-rise-up{0%{opacity:0;transform:translateY(30%) scale(.7,.3)}45%{opacity:1;transform:translateY(-8%) scale(.92,1.12)}70%{transform:scale(1.08,.92)}100%{opacity:1;transform:none}}
@keyframes ofc-plop{0%{opacity:0;transform:translateY(-90%)}50%{opacity:1;transform:scale(1.1,.86)}68%{transform:translateY(-10%) scale(.96,1.04)}84%{transform:scale(1.03,.97)}100%{opacity:1;transform:none}}
@keyframes ofc-peek{0%{opacity:0;transform:translateY(55%)}60%{opacity:1;transform:translateY(-6%)}100%{opacity:1;transform:none}}
@keyframes ofc-wordin{from{opacity:0;transform:translateY(.6em) rotate(3deg)}to{opacity:1;transform:none}}
@keyframes ofc-popin{0%{opacity:0;transform:translateY(10px) scale(.6) rotate(-4deg)}100%{opacity:1;transform:none}}
@keyframes ofc-fadeup{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes ofc-jiggle{25%{transform:rotate(-4deg) scale(1.03,.97)}50%{transform:rotate(3deg) translateY(-3%)}75%{transform:rotate(-1.5deg)}}
@keyframes ofc-hop{18%{transform:scale(1.12,.84)}45%{transform:translateY(-28%) scale(.94,1.08)}72%{transform:scale(1.1,.88)}86%{transform:scale(.97,1.03)}}
@keyframes ofc-blink{0%,95%,100%{transform:scaleY(1)}97%{transform:scaleY(.08)}}
@keyframes ofc-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes ofc-sway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2.5deg)}}
@keyframes ofc-bubble{from{opacity:0;scale:.6}to{opacity:1;scale:1}}
@keyframes ofc-wiggle{30%{transform:rotate(-14deg) scale(1.15)}60%{transform:rotate(10deg)}}
@keyframes ofc-up{50%{transform:translateY(-3px)}}

@media (max-width:860px){.ofc-top{grid-template-columns:1fr 1fr}.ofc-col:last-child{grid-column:1/-1}}
@media (max-width:560px){.ofc-bubble{white-space:normal;max-width:200px}.ofc-top{grid-template-columns:1fr}.ofc-link{white-space:normal}.ofc-copy{width:100%;margin-right:0}.ofc-btn{height:42px;font-size:13.5px}.ofc-bubble{font-size:12px;max-width:180px}.ofc-totop span{display:none}}
@media (prefers-reduced-motion:reduce){.ofc *,.ofc *::before,.ofc *::after{animation:none!important;transition:none!important}.ofc .ofc-l,.ofc .ofc-arrive,.ofc .ofc-word-t,.ofc .ofc-pop,.ofc .ofc-rise,.ofc .ofc-fade,.ofc .ofc-doodle{opacity:1!important}.ofc .ofc-draw{stroke-dashoffset:0!important}}

/* Sélecteur de langue : une pastille de verre, la liste s'ouvre vers le haut */
.ofc-lang{position:relative}
.ofc-lang__btn{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px 0 12px;border:0;border-radius:999px;font:inherit;font-weight:500;color:var(--ink);cursor:pointer}
.ofc-lang__btn>svg:first-child{width:16px;height:16px}
.ofc-lang__chev{width:12px;height:12px;transition:transform .35s var(--ease)}
.ofc-lang.is-open .ofc-lang__chev{transform:rotate(180deg)}
.ofc-lang__menu{position:absolute;left:50%;bottom:calc(100% + 10px);z-index:10;min-width:170px;margin:0;padding:6px;list-style:none;border-radius:18px;background:#fff;box-shadow:0 0 0 1px rgba(10,10,10,.06),0 12px 32px rgba(10,10,10,.1);
  opacity:0;visibility:hidden;transform:translate(-50%,8px) scale(.96);transform-origin:50% 100%;transition:opacity .25s,transform .35s var(--ease),visibility 0s .35s}
.ofc-lang.is-open .ofc-lang__menu{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .25s,transform .35s var(--ease)}
.ofc-lang__menu button{display:flex;justify-content:space-between;align-items:center;width:100%;padding:10px 12px;border:0;border-radius:12px;background:none;font:inherit;font-size:14px;color:var(--ink);cursor:pointer;text-align:left}
.ofc-lang__menu button:hover,.ofc-lang__menu button:focus-visible{background:rgba(10,10,10,.05)}
.ofc-lang__menu button[aria-selected="true"]{font-weight:600}
.ofc-lang__menu i{font-style:normal;color:var(--blue)}
@media (max-width:560px){
  .ofc-lang__btn{height:30px;gap:5px;padding:0 9px 0 8px;font-size:12px}
  .ofc-lang__btn>svg:first-child{width:13px;height:13px}.ofc-lang__chev{width:10px;height:10px}
  .ofc-lang__menu{min-width:140px;border-radius:14px}.ofc-lang__menu button{padding:8px 10px;font-size:13px}
}
/* mobile : copyright, puis la langue seule sur sa ligne, puis la signature */
@media (max-width:560px){.ofc-bar{flex-direction:column;align-items:flex-start;gap:14px}}
/* mobile : la langue vient en dernier, après la signature */
@media (max-width:560px){.ofc-lang{order:3}}

/* Lettre d'information : une ligne sous les colonnes */
.ofc-news{--glass-tint:rgba(255,255,255,.55);display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:clamp(12px,1.6vw,20px);padding:clamp(18px,2vw,26px) clamp(20px,2.4vw,32px);border-radius:var(--r,28px);position:relative;z-index:4}
.ofc-news__t{flex:1 1 280px;min-width:0}
.ofc-news__t h3{margin:0;font-size:18px;letter-spacing:-.02em}
.ofc-news__t p{margin:4px 0 0;font:400 14px/1.45 var(--ui);color:var(--muted,#6f6f6f)}
.ofc-news__f{display:flex;align-items:center;gap:6px;flex:1 1 360px;max-width:520px;padding:5px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px rgba(10,10,10,.08)}
.ofc-news__f input{flex:1;min-width:0;padding:10px 16px;border:0;background:transparent;font:16px var(--ui);color:var(--fg,#0a0a0a);outline:0}
.ofc-news__f .btn{height:44px;padding:0 20px;font-size:14px;flex:none}
.ofc-news.is-err .ofc-news__f{box-shadow:inset 0 0 0 1.5px #d70015}
.ofc-news__m{flex-basis:100%;margin:0;font:500 13px var(--ui);color:var(--muted,#6f6f6f)}.ofc-news__m:empty{display:none}
.ofc-news.is-err .ofc-news__m{color:#d70015}.ofc-news.is-ok .ofc-news__m{color:#009d32}
.ofc-news .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}