html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto}input[type='search']{-webkit-appearance:none}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}@font-face{font-family:'webflow-icons';src:url("data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBiUAAAC8AAAAYGNtYXDpP+a4AAABHAAAAFxnYXNwAAAAEAAAAXgAAAAIZ2x5ZmhS2XEAAAGAAAADHGhlYWQTFw3HAAAEnAAAADZoaGVhCXYFgQAABNQAAAAkaG10eCe4A1oAAAT4AAAAMGxvY2EDtALGAAAFKAAAABptYXhwABAAPgAABUQAAAAgbmFtZSoCsMsAAAVkAAABznBvc3QAAwAAAAAHNAAAACAAAwP4AZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpAwPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAQAAAAAwACAACAAQAAQAg5gPpA//9//8AAAAAACDmAOkA//3//wAB/+MaBBcIAAMAAQAAAAAAAAAAAAAAAAABAAH//wAPAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEBIAAAAyADgAAFAAAJAQcJARcDIP5AQAGA/oBAAcABwED+gP6AQAABAOAAAALgA4AABQAAEwEXCQEH4AHAQP6AAYBAAcABwED+gP6AQAAAAwDAAOADQALAAA8AHwAvAAABISIGHQEUFjMhMjY9ATQmByEiBh0BFBYzITI2PQE0JgchIgYdARQWMyEyNj0BNCYDIP3ADRMTDQJADRMTDf3ADRMTDQJADRMTDf3ADRMTDQJADRMTAsATDSANExMNIA0TwBMNIA0TEw0gDRPAEw0gDRMTDSANEwAAAAABAJ0AtAOBApUABQAACQIHCQEDJP7r/upcAXEBcgKU/usBFVz+fAGEAAAAAAL//f+9BAMDwwAEAAkAABcBJwEXAwE3AQdpA5ps/GZsbAOabPxmbEMDmmz8ZmwDmvxmbAOabAAAAgAA/8AEAAPAAB0AOwAABSInLgEnJjU0Nz4BNzYzMTIXHgEXFhUUBw4BBwYjNTI3PgE3NjU0Jy4BJyYjMSIHDgEHBhUUFx4BFxYzAgBqXV6LKCgoKIteXWpqXV6LKCgoKIteXWpVSktvICEhIG9LSlVVSktvICEhIG9LSlVAKCiLXl1qal1eiygoKCiLXl1qal1eiygoZiEgb0tKVVVKS28gISEgb0tKVVVKS28gIQABAAABwAIAA8AAEgAAEzQ3PgE3NjMxFSIHDgEHBhUxIwAoKIteXWpVSktvICFmAcBqXV6LKChmISBvS0pVAAAAAgAA/8AFtgPAADIAOgAAARYXHgEXFhUUBw4BBwYHIxUhIicuAScmNTQ3PgE3NjMxOAExNDc+ATc2MzIXHgEXFhcVATMJATMVMzUEjD83NlAXFxYXTjU1PQL8kz01Nk8XFxcXTzY1PSIjd1BQWlJJSXInJw3+mdv+2/7c25MCUQYcHFg5OUA/ODlXHBwIAhcXTzY1PTw1Nk8XF1tQUHcjIhwcYUNDTgL+3QFt/pOTkwABAAAAAQAAmM7nP18PPPUACwQAAAAAANciZKUAAAAA1yJkpf/9/70FtgPDAAAACAACAAAAAAAAAAEAAAPA/8AAAAW3//3//QW2AAEAAAAAAAAAAAAAAAAAAAAMBAAAAAAAAAAAAAAAAgAAAAQAASAEAADgBAAAwAQAAJ0EAP/9BAAAAAQAAAAFtwAAAAAAAAAKABQAHgAyAEYAjACiAL4BFgE2AY4AAAABAAAADAA8AAMAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADQAAAAEAAAAAAAIABwCWAAEAAAAAAAMADQBIAAEAAAAAAAQADQCrAAEAAAAAAAUACwAnAAEAAAAAAAYADQBvAAEAAAAAAAoAGgDSAAMAAQQJAAEAGgANAAMAAQQJAAIADgCdAAMAAQQJAAMAGgBVAAMAAQQJAAQAGgC4AAMAAQQJAAUAFgAyAAMAAQQJAAYAGgB8AAMAAQQJAAoANADsd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzVmVyc2lvbiAxLjAAVgBlAHIAcwBpAG8AbgAgADEALgAwd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzUmVndWxhcgBSAGUAZwB1AGwAYQByd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzRm9udCBnZW5lcmF0ZWQgYnkgSWNvTW9vbi4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==") format('truetype');font-weight:normal;font-style:normal}[class^="w-icon-"],[class*=" w-icon-"]{font-family:'webflow-icons' !important;speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{height:100%}body{margin:0;min-height:100%;background-color:#fff;font-family:Arial,sans-serif;font-size:14px;line-height:20px;color:#333}img{max-width:100%;vertical-align:middle;display:inline-block}.w-inline-block{max-width:100%;display:inline-block}.w-button{display:inline-block;padding:9px 15px;background-color:#3898EC;color:white;border:0;line-height:inherit;text-decoration:none;cursor:pointer;border-radius:0}input.w-button{-webkit-appearance:button}html[data-w-dynpage] [data-w-cloak]{color:transparent !important}h1,h2,h3,h4,h5,h6{font-weight:bold;margin-bottom:10px}h1{font-size:38px;line-height:44px;margin-top:20px}h2{font-size:32px;line-height:36px;margin-top:20px}h3{font-size:24px;line-height:30px;margin-top:20px}h4{font-size:18px;line-height:24px;margin-top:10px}h5{font-size:14px;line-height:20px;margin-top:10px}h6{font-size:12px;line-height:18px;margin-top:10px}p{margin-top:0;margin-bottom:10px}blockquote{margin:0 0 10px 0;padding:10px 20px;border-left:5px solid #E2E2E2;font-size:18px;line-height:22px}figure{margin:0;margin-bottom:10px}figcaption{margin-top:5px;text-align:center}ul,ol{margin-top:0px;margin-bottom:10px;padding-left:40px}.w-list-unstyled{padding-left:0;list-style:none}.w-embed:before,.w-embed:after{content:" ";display:table;grid-column-start:1;grid-row-start:1;grid-column-end:2;grid-row-end:2}.w-embed:after{clear:both}fieldset{padding:0;margin:0;border:0}button,[type='button'],[type='reset']{border:0;cursor:pointer;-webkit-appearance:button}.w-form{margin:0 0 15px}.w-form-fail{display:none;margin-top:10px;padding:10px;background-color:#ffdede}label{display:block;margin-bottom:5px;font-weight:bold}.w-input{display:block;width:100%;height:38px;padding:8px 12px;margin-bottom:10px;font-size:14px;line-height:1.42857143;color:#333333;vertical-align:middle;background-color:#ffffff;border:1px solid #cccccc}.w-input::placeholder{color:#999}.w-input:focus{border-color:#3898EC;outline:0}.w-input[disabled],.w-input[readonly],fieldset[disabled] .w-input{cursor:not-allowed}.w-input[readonly]{background-color:#eeeeee}textarea.w-input{height:auto}.w-container{margin-left:auto;margin-right:auto;max-width:940px}.w-container:before,.w-container:after{content:" ";display:table;grid-column-start:1;grid-row-start:1;grid-column-end:2;grid-row-end:2}.w-container:after{clear:both}@media screen and (max-width:991px){.w-container{max-width:728px}}@media screen and (max-width:479px){.w-container{max-width:none}}@media screen and (max-width:767px){.w-nav-brand{padding-left:10px}}.w-nav-brand{position:relative;float:left;text-decoration:none;color:#333333}[data-nav-menu-open]{display:block !important;position:absolute;top:100%;left:0;right:0;background:#C8C8C8;text-align:center;overflow:visible;min-width:200px}@media screen and (max-width:767px){.w-nav-brand{padding-left:10px}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}:root{--container-lg:1272px;--purple:#827afe33;--inter:"Inter Tight",sans-serif;--large-button-size:64px;--violet-100:#4928fd;--regular-medium:16px;--white-100:white;--black-100:#1b1d1e;--medium-button-size:48px;--instrument:"Instrument Serif",sans-serif;--heading-h5-desktop:24px;--black-10:#1b1d1e1a;--regular-small:14px;--heading-h3-desktop:48px;--black-60:#1b1d1e;--white-60:#fff9;--yellow-100:#f6e683;--heading-h2-desktop:72px;--black-50:#1b1d1e0d;--white-10:#ffffff1a;--heading-h6-desktop:20px;--heading-h4-desktop:32px;--header-h1-desktop:130px;--violet-20:#4928fd33;--orange-100:#ffaf68;--orange-20:#ffaf6833;--yellow-20:#f6e68333;--green-100:#79d45e;--green-20:#79d45e33;--purple-100:#b981ed;--purple-20:#b981ed33;--pink-100:#f4889a;--pink-20:#f4889a33;--blue-100:#70b5ff;--blue-20:#70b5ff33;--container-md:738px;--container-sm:290px;--black-40:#1b1d1e66;--text:#00000096;--typo-taille:14px;--purple-leger:var(--white-100);--bg-cta-box:#000;--radius:0px}.w-layout-blockcontainer{max-width:940px;margin-left:auto;margin-right:auto;display:block}.w-layout-hflex{flex-direction:row;align-items:flex-start;display:flex}@media screen and (max-width:991px){.w-layout-blockcontainer{max-width:728px}}@media screen and (max-width:767px){.w-layout-blockcontainer{max-width:none}}body{color:#333;font-family:Arial,Helvetica Neue,Helvetica,sans-serif;font-size:14px;line-height:100%}p{margin-bottom:0}a{text-decoration:underline}img{max-width:100%;display:inline-block}.body{background-color:var(--purple);font-family:var(--inter)}.back-to-home-btn{grid-column-gap:16px;grid-row-gap:16px;border:1px solid var(--white-100);background-color:var(--black-100);color:var(--white-100);font-size:var(--regular-medium);line-height:var(--regular-medium);border-radius:45px;justify-content:center;align-items:center;padding:9px 8px 9px 20px;font-weight:500;text-decoration:none;display:flex}.div-block-23{background-color:var(--white-100);border-radius:40px;justify-content:center;align-items:center;width:32px;height:32px;display:flex}.pricing-grid{grid-column-gap:24px;grid-row-gap:24px;grid-template-rows:auto;grid-template-columns:1fr 1fr;margin-top:80px;display:flex}.footer{background-color:var(--white-100);border-top-left-radius:40px;border-top-right-radius:40px;margin-bottom:0;padding-bottom:0;position:relative}.container-14{max-width:var(--container-lg);padding:80px 20px 24px}.grid-19{grid-column-gap:64px;grid-row-gap:64px;grid-template-rows:auto;grid-template-columns:2fr 1fr 1fr 1.25fr;justify-content:space-between;margin-top:20px;margin-bottom:64px}.footer-column-1{grid-column-gap:24px;grid-row-gap:24px;flex-flow:column;align-items:flex-start;max-width:475px;display:flex}.title{color:var(--black-100);font-size:var(--regular-medium);margin-bottom:16px;font-weight:500}.list-item-9{color:var(--black-100);font-size:var(--regular-medium);min-height:22px;line-height:140%}.list-5{grid-column-gap:12px;grid-row-gap:12px;flex-flow:column;display:flex}.div-block-43{border-top:1px solid var(--black-10);padding-top:15px}.container-15{max-width:var(--container-lg)}.text-block-33{color:var(--black-60);font-size:var(--regular-medium);text-align:center;letter-spacing:.4px;line-height:140%}.navbar-brand-2{justify-content:flex-start;align-items:center;display:flex}.gradient-background{overflow-wrap:normal;-webkit-text-fill-color:inherit;mix-blend-mode:normal;background-image:url('../images/background-gradient.webp');background-position:50% 100%;background-repeat:repeat;background-size:cover;background-attachment:scroll;background-clip:border-box;flex-flow:row;justify-content:flex-start;align-items:flex-start;width:100%;height:50vh;display:flex;position:absolute;inset:0% auto auto 0%}.flex-block-2{grid-column-gap:16px;grid-row-gap:16px;grid-template-rows:auto;grid-template-columns:1fr 1fr;grid-auto-columns:1fr;display:grid}.div-block-201{position:relative}.div-block-175{padding-top:150px;position:relative}.div-block-177{flex-flow:column;justify-content:center;align-items:center;display:flex}.div-block-176{grid-column-gap:20px;grid-row-gap:20px;flex-flow:column;justify-content:center;align-items:center;margin-left:auto;display:inline-flex}.heading-30{text-align:center;margin-top:0;margin-bottom:0;font-family:var(--inter)}.text-span-19{font-family:var(--instrument);font-style:italic;font-weight:400}.text-block-40{font-family:var(--inter);font-weight:500}.utility-page-form{flex-direction:column;align-items:stretch;display:flex}.styleguide-bg-wrapper{position:relative}.div-block-209{grid-column-gap:20px;grid-row-gap:20px;flex-flow:wrap;justify-content:space-between;align-items:center;display:flex}.body-3{font-family:var(--inter);line-height:120%}.navigation-link{color:#000;flex-flow:column;justify-content:center;align-items:flex-start;font-size:1.2rem;font-weight:500;line-height:1.2;text-decoration:none;display:flex;position:relative;overflow:clip}.navigation-link.for-footer{color:var(--black-60);letter-spacing:.4px;font-size:1.5rem;font-weight:400;display:inline-flex}.navigation-link.for-footer:hover{color:var(--violet-100)}.nav-text.first{color:var(--black-60);font-size:var(--regular-medium);line-height:120%;text-decoration:none}.nav-text.second{pointer-events:none;font-size:var(--regular-medium);line-height:120%;position:absolute;top:100%}.container{width:100%;max-width:1290px;margin-left:auto;margin-right:auto;position:relative}.bar{flex-flow:column;justify-content:flex-start;align-items:center;height:100%;display:flex}.body-7{background-color:#827afe33}.text-block-55{font-family:var(--instrument);font-size:20px}@media screen and (min-width:1280px){.body-3{background-color:#827afe33}}@media screen and (min-width:1440px){.div-block-175{padding-top:175px}.div-block-174{padding-top:0}.div-block-176{width:100%;max-width:550px;margin-left:auto;margin-right:auto;line-height:120%}.heading-30{text-align:center;font-family:var(--inter);font-size:48px;font-weight:500;line-height:120%}.text-span-19{font-family:var(--instrument);font-size:48px;font-style:italic;font-weight:400;line-height:100%}}@media screen and (max-width:991px){.pricing-grid{grid-template-columns:1fr;margin-top:40px}.container-14{padding-top:24px}.grid-19{grid-column-gap:55px;grid-row-gap:55px;flex-flow:column;margin-top:40px;margin-bottom:40px}.footer-column-1{grid-column-gap:18px;grid-row-gap:18px}.gradient-background{height:60vh}.container-18{padding-left:25px;padding-right:25px}.heading-30{font-size:36px}.text-span-19{color:#1b1d1e;font-family:var(--instrument);font-style:italic;font-weight:400}.navigation-link{justify-content:center;align-items:flex-end;padding-top:2px;padding-bottom:2px;padding-right:12px}.navigation-link.for-footer{justify-content:center;align-items:flex-start}}@media screen and (max-width:767px){.navbar-brand-2{padding-left:0}.body-3{background-color:#827afe33}.navigation-link.for-footer{justify-content:center;align-items:flex-start}}@media screen and (max-width:479px){.container-14{padding-top:20px}.grid-19{grid-column-gap:30px;grid-row-gap:30px;grid-template-columns:2fr}.list-5{grid-column-gap:8px;grid-row-gap:8px}.text-block-33{text-align:left}.flex-block-2{grid-column-gap:20px;grid-row-gap:20px;grid-template-columns:1fr}.heading-30{font-size:30px;line-height:120%}.div-block-209{justify-content:flex-start}.nav-text.first{font-weight:400;line-height:140%}.body-7{background-color:#4928fd1a}.text-block-55{line-height:110%}.bold-text-18{font-family:Poppins,sans-serif;font-weight:300}}/* ================================================================
UNIDO – Custom CSS v4
Corrections + harmonisation du site
================================================================ */
/* ── 0. GRAIN — Texture noise subtile sur tout le site ─────────── */
/*
SVG turbulence en data URI, positionné en overlay fixe.
mix-blend-mode: overlay → s'intègre naturellement sans couvrir le contenu.
opacity 0.035 → quasi-invisible mais perceptible au toucher visuel.
*/
body::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 9997;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
background-size: 200px 200px;
background-repeat: repeat;
mix-blend-mode: overlay;
opacity: 0.035;
}
/* ── 1. PRELOADER ─────────────────────────────────────────────── */
/*
Filet de sécurité CSS : si pour une raison quelconque le JS ne tourne
pas (erreur, blocage CSP, PHP die() en milieu de page), le preloader
s'efface tout seul après 5s grâce à l'animation `unido-preloader-safety`.
Le JS reste maître en temps normal et applique display:none plus tôt
(vers 2-2.5s), masquant l'animation CSS qui n'est jamais visible.
*/
@keyframes unido-preloader-safety {
0%, 80% { opacity: 1; visibility: visible; }
100% { opacity: 0; visibility: hidden; }
}
#unido-preloader {
position: fixed;
inset: 0;
z-index: 9999;
background-color: #111111;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
/* Filet : 5s total — 4s pleine opacité puis 1s fondu — fill: forwards */
animation: unido-preloader-safety 5s linear forwards;
}
.unido-preloader-inner {
display: flex;
align-items: center;
gap: 14px;
}
.unido-preloader-logo {
width: 44px;
height: auto;
display: block;
}
.unido-preloader-name-img {
height: 2rem;
width: auto;
display: block;
filter: brightness(0) invert(1); /* force blanc sur fond sombre */
}
/* ── Variables globales ──────────────────────────────────────── */
:root {
/* NE PAS redéfinir --purple ici : Webflow l'utilise pour les backgrounds de page
--purple: #827afe33 (20%) dans webflow.css → correct, on ne touche pas */
--purple-full: #827afe; /* violet 100% pour les textes/accents uniquement */
--purple-soft: rgba(130, 122, 254, 0.20); /* violet 20% pour backgrounds */
--black: #111111;
--grey-text: #555555;
--grey-light: #f7f7f7;
--white: #ffffff;
--radius-card: 12px;
--radius-btn: 8px;
--transition: 0.25s ease;
--font-title: 'Instrument Serif', serif;
--font-body: 'Inter Tight', sans-serif;
--font-ui: 'Inter Tight', sans-serif;
}
/* ── 1. BACKGROUNDS — 827AFE à 20% partout ───────────────────── */
/* Sections / blocs */
/* Boutons — solid #827afe (pas 20%, les boutons doivent être visibles) */
/* Formulaires */
/* Typographies roses (#b981ed violet pâle, #4928fd bleu-violet) → #827afe */
:root {
--violet-100: #827afe !important;
--purple-100: #827afe !important;
--pink-100: #827afe !important;
}
/* Background violet 20% sur toutes les pages */
body,
.body,
.body-3 {
background-color: #827afe33 !important;
}
/* ── Gradient hero — transition douce sans coupure ── */
.gradient-background {
height: 70vh !important;
-webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%) !important;
mask-image: linear-gradient(to bottom, black 50%, transparent 100%) !important;
}
/* ── 2. TICKER — Animation défilement logos (accueil) ─────────── */
@keyframes marquee-logos {
0% { transform: translateX(0); }
100% { transform: translateX(-33.333%); }
}
/* ── 3. TICKER — Photos activités (pages de détail) ──────────── */
@keyframes ticker-photos {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* ── 4. ANIMATION — Fix "simple à organiser" (Webflow IX2 bug) ── */
@keyframes unido-fadein {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* Visibilité forcée — IX2 désactivé, plus besoin de hacks */
/* ── 5. BÉNÉFICES — Retirer la bordure sur les descriptions ─── */
/* ── 6. BÉNÉFICES — Image ronde bien visible ─────────────────── */
/* ── 7. AVIS — Padding desktop réduit ───────────────────────── */
/* IX2 désactivé — éléments visibles par défaut (sauf ceux gérés par unido-anim-in) */
/* ── 8. ACTIVITÉS — Titres de sections : Poppins responsive ──── */
/* ── 9. VOIR PLUS (bouton) ───────────────────────────────────── */
/* ── 10. HARMONISATION GÉNÉRALE ──────────────────────────────── */
/* Liens de navigation */
.link-6, .nav-link, .navigation-link, .link-block-6 {
transition: opacity var(--transition), color var(--transition);
}
/* ── Boutons nav — couleurs inversées ───────────────────────── */
/* ── Animations hover sur tous les boutons ──────────────────── */
/* Boutons hero / CTA principaux */
/* Boutons style "benji" (menu mobile, CTA inline) */
/* Bouton CTA carte activité */
/* Bouton "Voir plus" */
/* Bouton contact sidebar (detail_category) */
.button-benji.w-inline-block {
transition: transform var(--transition), box-shadow var(--transition), background var(--transition) !important;
}
/* Bouton submit formulaire */
/* CTA section confiance / appel */
/* Cartes activités */
/* Cartes bestseller */
/* Boîtes bénéfices */
/* Couleur accentuée — tous les em italic-text-* en violet */
em[class*="italic-text-"] {
color: #827afe !important;
font-style: italic;
}
/* Récurrence — badge réduction */
/* CTA section — textes en noir */
/* ── 11. TABLETTE — 768px ────────────────────────────────────── */
@media screen and (max-width: 767px) {
/* Avis : supprimer le padding énorme et mettre en carousel */
#confiance .div-block-231,
.div-block-238 > .div-block-231 {
padding-left: 20px !important;
padding-right: 20px !important;
}
/* Carousel horizontal — le conteneur fait défiler */
.testimonial-main.padding-global {
padding: 0 0 8px 16px !important;
overflow-x: auto !important;
overflow-y: hidden !important;
display: flex !important;
flex-direction: row !important;
align-items: flex-start !important;
gap: 14px !important;
scroll-snap-type: x mandatory !important;
-webkit-overflow-scrolling: touch !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Aplatir les .testimonial-row pour que les cartes soient
des enfants directs du scroll container */
/* Chaque carte : largeur fixe + snap */
/* Partie vidéo : inutile sur mobile */
}
/* ── 12. MOBILE — 479px ──────────────────────────────────────── */
@media screen and (max-width: 479px) {
/* Grille activités : 1 colonne */
/* Titres activités sur mobile */
/* Cards avis extra — cachées sur mobile uniquement (3 dernières) */
/* Bénéfices : 1 colonne */
/* Hero titre */
/* Sections : padding réduit */
/* Footer padding mobile */
.container-14 {
padding-left: 16px !important;
padding-right: 16px !important;
}
/* Logos ticker mobile */
}
/* ── 13. SMOOTH SCROLL ────────────────────────────────────────── */
html {
scroll-behavior: smooth;
}
/* ── Bloquer le scroll horizontal sur tout le site ───────────── */
/* NE PAS mettre overflow-x sur html → casse position:sticky du nav */
body {
overflow-x: hidden !important;
max-width: 100% !important;
}
/* ── 14. CACHER LE BADGE WEBFLOW ─────────────────────────────── */
/* ── 15. SECTION DUPLIQUÉE — affichage exclusif par breakpoint ── */
/* Desktop (>991px) : .time_layout visible, .box-tablet-compliqu caché */
/* Tablette et mobile (≤991px) : .box-tablet-compliqu visible, .time_layout caché */
/* Mobile only: hide time_layout */
/* ================================================================
UNIDO – v5 PREMIUM DESIGN SYSTEM
Focus : containers, shadows, radius, spacing, micro-details
================================================================
AUDIT CRITIQUE — Ce qui rendait le site "amateur" :
1. Radius chaos : 0px / 5px / 10px / 20px / 33px / 45px sans logique
2. Zéro hiérarchie d'ombres au repos — tout est plat ou sur-bordé
3. .box avec border: 2px solid #827afe (épaisseur bouton sur une carte)
4. .testimonial-card gris (#f2f2f2) incohérent sur fond violet pastel
5. .card-1 / .card-2 : aucun radius, aucune ombre — complètement nues
6. Spacing arbitraire : 70px, 54px, 100px — aucun système
7. Navbar sans effet verre malgré le .navbar-bg-blur dédié
8. Stats (.count-div-wrapper) flottent sans cadre visuel
9. Tableau comparaison (.link-block-3) avec radius 5px trop petit
================================================================ */
/* ── TOKEN SYSTEM ──────────────────────────────────────────────── */
:root {
/* Radius harmonisé (scale × 2) */
--radius-xs: 6px; /* chips, badges inline */
--radius-sm: 12px; /* inputs, boutons pill */
--radius-md: 16px; /* cartes secondaires, tableau */
--radius-lg: 24px; /* cartes principales */
--radius-xl: 32px; /* blocs hero, CTA immersifs */
--radius-pill: 100px; /* badges, tags */
/* Hiérarchie d'ombres — 4 niveaux */
--shadow-surface: 0 1px 3px rgba(0,0,0,0.05),
0 1px 2px rgba(0,0,0,0.03);
--shadow-card: 0 3px 12px rgba(0,0,0,0.07),
0 1px 4px rgba(0,0,0,0.04);
--shadow-float: 0 8px 28px rgba(0,0,0,0.09),
0 2px 8px rgba(0,0,0,0.05);
--shadow-premium: 0 16px 48px rgba(0,0,0,0.11),
0 4px 14px rgba(0,0,0,0.06);
--shadow-violet: 0 8px 24px rgba(130,122,254,0.22),
0 2px 6px rgba(130,122,254,0.10);
/* Bordures tokenisées */
--border-subtle: 1px solid rgba(0,0,0,0.06);
--border-light: 1px solid rgba(0,0,0,0.09);
--border-medium: 1px solid rgba(0,0,0,0.13);
--border-violet: 1px solid rgba(130,122,254,0.28);
/* 8pt spacing scale */
--sp-1: 8px;
--sp-2: 16px;
--sp-3: 24px;
--sp-4: 32px;
--sp-5: 40px;
--sp-6: 48px;
--sp-8: 64px;
--sp-10: 80px;
--sp-12: 96px;
/* Surcharge radius Webflow (--radius était à 0px) */
--radius: 12px;
}
/* ── NAV CONTACT — Pill avec 2 liens uniquement : padding symétrique ── */
/*
Sur les autres pages, la pill se termine par le bouton CTA "Nous contacter"
qui remplit visuellement le côté droit. Sur contact.html il n'y a pas de CTA,
donc on rééquilibre avec un padding-right identique au padding-left.
*/
.navbar-actions-2.home {
padding: .25rem 1.5rem !important;
}
/* ── NAVBAR — Effet verre (frosted glass) ──────────────────────── */
/* ── CARDS — Système "Floating" unifié ─────────────────────────── */
/* Toutes les cartes blanches passent en floating */
/* Hover élévation */
/* ── CARTES ACTIVITÉS (.product-item) ──────────────────────────── */
/* ── BOÎTES BÉNÉFICES (.box) — Gradient border ─────────────────── */
/*
Technique : on retire la border directe et on utilise
un ::before avec un gradient pour simuler une bordure
dégradée de 1px — effet premium (type Linear.app)
*/
/* ── TESTIMONIALS — Cohérence avec le fond ─────────────────────── */
/* ── PROFILE CARDS (récurrence) — Harmonisé ──────────────────── */
/* ── ACCORDION FAQ — Harmonisé ───────────────────────────────── */
/* ── TAB COLUMNS (.tab-colomn-wrap) ────────────────────────────── */
/* Offset alterné */
/* ── TABLEAU COMPARAISON (.link-block-3) ───────────────────────── */
/* ── TABLEAU DE COMPARAISON — Colonnes colorées ─────────────────── */
/* Colonne labels (1ère colonne) — neutre */
/* Colonne "Autres séminaires" (2ème colonne) — teinte rouge/corail */
/* Colonne "Avec nos séminaires" (UNIDO) — teinte verte, mise en avant */
/* Textes dans le tableau */
/* ── SECTION COMPARAISON — container-8 restauré, radius réduit ─── */
/*
On garde le fond sombre #271f36 du container-8.
On réduit juste le border-radius 20px → 16px et on affine la bordure.
*/
/* ── STATS (.count-div-wrapper) — Encadrement subtil ───────────── */
/* Séparateur vertical entre les blocs de stats (sauf le dernier) */
/* ── CTA BLOCK (.call-to-action) — Premium treatment ───────────── */
/* Halo violet en arrière-plan pour la profondeur */
/* ── TIMELINE ITEMS ─────────────────────────────────────────────── */
/* ── BADGES / PILLS — Micro-détails ────────────────────────────── */
/* ── BOUTONS — Radius harmonisé ────────────────────────────────── */
/* Les boutons pill gardent leur forme */
.button,
.let-s-collaborate,
.back-to-home-btn {
border-radius: var(--radius-pill) !important;
}
/* ── HERO — titre 100% Inter Tight bold, une seule police.
Rendu "tête de titre" : gras, tight tracking, les em en violet
gardent exactement la même police/poids (pas de mix serif/sans). */
@media screen and (max-width: 479px) {
/* Empêcher double-fond violet (body bg + section bg empilés) */
/* ── Hero mobile — sous-titre plus petit ──── */
/* ── Hero mobile — bouton + avis empilés, centrés ──── */
/* Les étoiles doivent rester en ligne (horizontal), pas empilées */
/* ── 3 stats (45min / 10-300 / 100%) — compact row ──── */
}
/* ── Hero — sous-titre Inter Tight (aligné DA du site) ─────── */
@media screen and (max-width: 767px) {
/* Les étoiles doivent rester EN LIGNE (horizontal) sur tout mobile */
}
/* Fallback super-générique : sur tout écran ≤ 820px la rating-div
doit rester horizontale, quel que soit l'ordre des media queries. */
/* ── SECTION SPACING — 8pt grid ────────────────────────────────── */
/* Grille layout standard */
/* Grille comparaison — espacement cohérent */
/* ── EFFET GRAIN LÉGER SUR LES CARTES ─────────────────────────── */
/*
Un filtre SVG inline en data URI génère une texture subtile.
Appliqué en ::after sur les cartes pour un rendu "matière".
*/
@property --grain-opacity {
syntax: '';
inherits: false;
initial-value: 0.025;
}
/* Les enfants des cartes passent au-dessus du grain */
/* ── "ORGANISER" — Suppression des wrappers .time_layout / .box-tablet-compliqu ── */
/* Fix overflow: hidden qui coupe les cards de la timeline */
/* Radius sur les cards de droite (timeline_item) — arrondis sur tous les coins */
/* Fix sticky gauche : top aligné juste sous la navbar (76px) + 16px marge = 92px → 96px grid */
/* ── SCROLL-MARGIN — Offset navbar sticky sur toutes les sections ── */
/*
Sans scroll-margin-top, une section ancre (#offres, #process…) se cache
partiellement sous la navbar sticky. On compense : navbar 76px + 16px marge.
*/
#home, #logo, #chiffres-trust, #problemes, #offres,
#comparaison, #process, #bestseller, #recurrence,
#confiance, #avis, #FAQ {
scroll-margin-top: 92px;
}
/* ── BESTSELLER — Suppression du wrapper opaque ────────────────── */
/*
.div-block-215 avait background violet + border #827afe + border-radius 40px.
On le neutralise complètement : le contenu (titre + cartes) flotte directement
sur le fond de la page, ce qui est bien plus pro pour une section informative.
*/
/* ── SECTION DIFFERENTIATION — désactivé pour harmoniser les backgrounds ── */
/* ── TRANSITIONS BLUR AU SURVOL ────────────────────────────────── */
/*
Micro-détail : légère réduction du blur sur les éléments
glass au hover pour donner une sensation d'interaction.
*/
/* ── RESPONSIVE OVERRIDES ──────────────────────────────────────── */
@media screen and (max-width: 991px) {
/* Stats : même largeur et moins de padding bas */
/* "Trouvez le bon format" — gap entre les cards */
}
/* ═══════════════════════════════════════════════════════════════
MOBILE FIXES v3 — Réécriture complète des corrections téléphone
Toutes les règles mobiles sont ici, organisées par section.
Zero impact sur desktop (≥ 992px) sauf grid-24 masqué partout.
═══════════════════════════════════════════════════════════════ */
/* ── Masquer grid-24 partout (tableau doublon inutile) ────────── */
/* ══════════════════════════════════════════════════════════════
BREAKPOINT ≤ 991px (tablette + téléphone)
══════════════════════════════════════════════════════════════ */
@media screen and (max-width: 991px) {
/* ── 1. NAV MOBILE — Logo + bouton centrés ensemble ────────── */
/* Tuer les pseudo-éléments clearfix de Webflow (.w-nav::before/after) */
/* La navbar mobile : flex, pleine largeur */
/* Conteneur : centré, sans gap Webflow qui pousse vers la gauche */
/* Tuer les clearfix du conteneur aussi */
/* Logo : annuler le float:left de webflow.css, rester dans le flux */
/* Image logo */
/* Pill Menu : annuler margin-left auto et float */
/* Bouton hamburger lui-même */
/* Cacher le nav-menu Webflow — on force même quand w-nav--open s'ajoute */
/* Masquer la 2ème nav sur activites.php */
/* ── 3. TIMELINE CARDS — Gap plus prononcé ────────────────── */
}
/* ══════════════════════════════════════════════════════════════
BREAKPOINT ≤ 767px (téléphone)
══════════════════════════════════════════════════════════════ */
@media screen and (max-width: 767px) {
/* ── 2. HERO PHOTOS — Grid 2×2 pleine largeur ─────────────── */
/* ── 4. COMPARAISON MOBILE — Masquer desktop, afficher mobile ─ */
/* Style commun aux deux tableaux mobiles */
/* Toutes cellules : base */
/* ─ Cellule header icône ─ */
/* ─ Cellule header titre ─ */
/* ─ UNIDO (tableau positif) ─ */
/* ─ Concurrents (tableau négatif) ─ */
/* ── 5. AVIS CLIENTS — Repartir de zéro ─────────────────────── */
/* Conteneur général section avis */
#confiance,
.div-block-238 {
padding-top: 40px !important;
padding-bottom: 40px !important;
width: 100% !important;
max-width: 100% !important;
min-height: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box !important;
overflow-x: hidden !important;
}
#confiance .div-block-231 {
padding-left: 20px !important;
padding-right: 20px !important;
padding-bottom: 28px !important;
}
/* Wrapper principal : empilement vertical simple */
.testimonial-main.padding-global {
display: flex !important;
flex-direction: column !important;
gap: 16px !important;
padding: 0 16px 4px !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
overflow: visible !important;
overflow-x: visible !important;
overflow-y: visible !important;
scroll-snap-type: none !important;
-webkit-overflow-scrolling: unset !important;
}
/* Lignes : empilement vertical aussi */
/* Chaque carte : pleine largeur, design épuré */
/* Masquer la partie vidéo (inutile sur mobile) */
/* Contenu intérieur : flex colonne */
/* Ligne du haut : avatar + nom + icône guillemet */
/* Avatar rond */
/* Bloc nom + rôle */
/* Icône guillemet (en haut à droite de la top row) */
/* Texte du témoignage */
}
/* ══════════════════════════════════════════════════════════════
BREAKPOINT ≤ 479px (petit téléphone)
══════════════════════════════════════════════════════════════ */
@media screen and (max-width: 479px) {
/* Photos hero légèrement moins hautes sur tout petit écran */
/* Padding réduit sur les tableaux comparaison */
/* Cartes avis : padding réduit */
}
/* ══════════════════════════════════════════════════════════════
DETAIL CATEGORY — Overrides
══════════════════════════════════════════════════════════════ */
/* ── 1. Polices : Instrument Serif → Poppins sur toute la page ── */
/* ── 2. Carte infos — redesign verre dépoli, sans border violette ── */
/* ── 3. Icônes SVG — taille et alignement cohérents ────────────── */
/* ══════════════════════════════════════════════════════════════
DETAIL CATEGORY — Mobile fixes (≤ 767px)
══════════════════════════════════════════════════════════════ */
@media screen and (max-width: 767px) {
/* ── Textes descriptions : taille et poids réduits ──────────── */
/* Descriptions dans les lignes icône : gauche */
/* ── Descriptions : alignement gauche ───────────────────────── */
/* ── Titre + sous-titre en haut : gauche ────────────────────── */
/* ── Section bénéfices : titre centré, lisible ──────────────── */
/* ── Ticker : pleine largeur + plus rapide ───────────────────── */
/* Animation ticker plus rapide — anime chaque rangée indépendamment */
@keyframes ticker-row-fast {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* Réinitialise l'animation sur le wrapper (il ne doit pas animer) */
}
/* ══════════════════════════════════════════════════════════════
MOBILE NAV OVERLAY — Fond flouté + carte centrée
══════════════════════════════════════════════════════════════ */
@keyframes mobileNavIn {
from { opacity: 0; transform: scale(0.94) translateY(10px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
/* ══════════════════════════════════════════════════════════════
INDEX.HTML — Background harmonization + card title alignment
══════════════════════════════════════════════════════════════ */
/* ── Harmoniser les backgrounds : toutes les sections transparentes ── */
/* Le body a déjà background-color: #827afe33.
Certaines sections ajoutent AUSSI #827afe33 → double layer = plus foncé.
On force transparent partout pour garder un seul niveau de violet. */
.body .home-achievement-sec,
.body .section-8,
.body .home-solution-section,
.body .section_time,
.body .section-6,
.body .section-12,
.body .section-7,
.body .home-logo-section,
.body .home-about-section,
.body .home-our-work-section,
.body .home-our-team-sec {
background-color: transparent !important;
}
/* box-tablet-compliqu avait un fond blanc sur mobile → transparent */
.body .box-tablet-compliqu {
background-color: transparent !important;
}
/* ── Card titles left-align dans "Organiser un moment d'équipe" ── */
/* Forcer sur mobile aussi — override .section-13 text-align: center */
/* ── Contact page — body-7 background harmonization ── */
.body-7 {
background-color: #827afe33 !important;
}
/* ══════════════════════════════════════════════════════════════
PLAN-1 — Section "1200+ Participants" — Redesign naturel
══════════════════════════════════════════════════════════════ */
/* Card visible avec fond blanc et texte foncé — horizontal par défaut */
/* Mobile : vertical */
/* Chaque bloc stat : séparé par une ligne subtile */
/* Mobile : séparateur horizontal */
/* Le nombre en gros */
/* Le label (Participants, Activités, Satisfaction) */
.pricing {
color: #555555 !important;
font-size: 16px !important;
font-weight: 500 !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
margin-top: 4px !important;
}
/* La description sous chaque stat */
/* ══════════════════════════════════════════════════════════════
COMPARAISON TABLET + MOBILE — Tableaux grid-tel redesign propre
══════════════════════════════════════════════════════════════ */
/* Afficher grid-tel sur tablette aussi (Webflow ne le montre qu'à ≤479px) */
@media screen and (max-width: 767px) {
/* Container des deux tableaux */
/* Header : icône + titre sur la même grille 2 colonnes */
/* Lignes de données */
/* Dernière ligne : pas de border-bottom */
/* ─ UNIDO tableau ─ */
/* ─ Concurrents tableau ─ */
/* Textes dans les tableaux — taille harmonisée + centrage */
/* Centrage de tous les éléments dans les cellules du tableau */
}
/* ══════════════════════════════════════════════════════════════
ACTIVITÉS — Images uniformes dans les cards
══════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════
TABLET — Section "Organiser un moment d'équipe" sticky fix
══════════════════════════════════════════════════════════════ */
@media screen and (max-width: 991px) {
/* Supprimer le sticky qui cause le chevauchement */
/* Layout : titre en haut, cards en dessous */
}
/* ══════════════════════════════════════════════════════════════
TABLET — Activités cards 2 par ligne + bouton visible
══════════════════════════════════════════════════════════════ */
@media screen and (max-width: 991px) and (min-width: 480px) {
/* Grille 2 colonnes */
/* Réafficher le bouton CTA masqué par Webflow */
}
/* ══════════════════════════════════════════════════════════════
TITRES UNIFIÉS — Même style que la section Tarifs partout
══════════════════════════════════════════════════════════════ */
/* Tous les h2 du site : Poppins 600, #111, tracking serré */
/* Variante fond sombre (section comparaison) */
/* Toutes les descriptions sous les h2 */
/* Variante fond sombre */
/* Responsive — Tablet */
/* Responsive — Mobile */
/* ══════════════════════════════════════════════════════════════
SECTION TARIFS — Pricing cards UNIDO
══════════════════════════════════════════════════════════════ */
/* ── Eyebrow universel — dot violet + label ── */
/* Retirer tout gap/margin-top parasite sur le titre qui suit l'eyebrow */
/* Variante clair pour sections à fond sombre */
/* Grille 2x2 */
/* Card pricing */
/* Couleurs par plan */
/* Partie gauche : badge + description + prix + bouton */
/* Partie droite : liste inclus */
/* CTA bas de section */
/* ── Responsive tarifs ── */
/* ── Contact form — success / error messages ────────────────── */
.contact-form-block .w-form-fail {
padding: 20px 24px;
border-radius: 12px;
background: rgba(220, 38, 38, 0.08);
border: 1px solid rgba(220, 38, 38, 0.3);
margin-top: 16px;
}
.contact-form-block .w-form-fail > div {
font-family: 'Inter Tight', sans-serif;
font-size: 15px;
color: #b91c1c;
text-align: center;
}
/* ── Contact — champ pleine largeur (slider participants) ──── */
/* ── Contact — Date picker natif ───────────────────────────── */
/* ── Contact — Select (type d'activité) ────────────────────── */
/* ── Contact — Slider participants ─────────────────────────── */
/* Range input */
/* ================================================================
MULTI-STEP CONTACT FORM (cc-* classes)
Adapted from CasinoClub template — #1a1a1a → #827afe
================================================================ */
/* ── Form layout ── */
/* ── Section blocks ── */
/* ── Section header ── */
/* ── Event type cards ── */
/* ── Slider (nombre de participants) ── */
/* ── Activity selection cards (checkbox) ── */
/* ── Budget cards ── */
/* ── Row layouts ── */
/* Inputs prennent toujours 100% de leur conteneur, y compris les
date pickers qui par défaut sont intrinsèquement dimensionnés sur
iOS et peuvent dépasser. */
/* ── Submit button ── */
/* ── Trust badges ── */
/* ── Error screen ── */
@keyframes ccFadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* ══ Quick action bar ══ */
/* ══ Direct contact section ══ */
/* ══ Fullscreen success overlay ══ */
.cc-fp-overlay {
position: fixed;
inset: 0;
z-index: 99999;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.5s ease;
}
.cc-fp-overlay.cc-fp-visible {
opacity: 1;
pointer-events: all;
}
.cc-fp-bg {
position: absolute;
inset: 0;
background: #fafafa;
}
.cc-fp-content {
position: relative;
z-index: 1;
text-align: center;
max-width: 520px;
width: 90%;
padding: 2rem;
animation: ccFpSlideUp 0.6s 0.2s ease both;
}
@keyframes ccFpSlideUp {
from { opacity: 0; transform: translateY(40px); }
to { opacity: 1; transform: translateY(0); }
}
.cc-fp-checkmark {
width: 90px;
height: 90px;
margin: 0 auto 2rem;
}
.cc-fp-svg {
width: 90px;
height: 90px;
}
.cc-fp-circle {
stroke: #827afe;
stroke-width: 2;
stroke-dasharray: 166;
stroke-dashoffset: 166;
}
.cc-fp-tick {
stroke: #827afe;
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 48;
stroke-dashoffset: 48;
}
.cc-fp-visible .cc-fp-circle {
animation: ccFpStroke 0.6s 0.5s ease forwards;
}
.cc-fp-visible .cc-fp-tick {
animation: ccFpStroke 0.4s 0.9s ease forwards;
}
@keyframes ccFpStroke {
to { stroke-dashoffset: 0; }
}
.cc-fp-title {
font-size: 2rem;
font-weight: 800;
color: #1a1a1a;
margin: 0 0 0.75rem;
letter-spacing: -0.02em;
font-family: 'Inter Tight', sans-serif;
}
.cc-fp-subtitle {
font-size: 1rem;
color: #666;
line-height: 1.6;
margin: 0 0 2.5rem;
}
.cc-fp-cards {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-bottom: 2.5rem;
}
.cc-fp-card {
display: flex;
align-items: center;
gap: 1rem;
text-align: left;
padding: 1rem 1.25rem;
background: #fff;
border: 1px solid #ededee;
border-radius: 1rem;
opacity: 0;
transform: translateY(10px);
}
.cc-fp-visible .cc-fp-card:nth-child(1) { animation: ccFpCardIn 0.4s 1.1s ease forwards; }
.cc-fp-visible .cc-fp-card:nth-child(2) { animation: ccFpCardIn 0.4s 1.25s ease forwards; }
.cc-fp-visible .cc-fp-card:nth-child(3) { animation: ccFpCardIn 0.4s 1.4s ease forwards; }
@keyframes ccFpCardIn {
to { opacity: 1; transform: translateY(0); }
}
.cc-fp-card-icon {
font-size: 1.5rem;
flex-shrink: 0;
}
.cc-fp-card-title {
font-size: 0.9rem;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 0.15rem;
}
.cc-fp-card-text {
font-size: 0.8rem;
color: #888;
line-height: 1.4;
}
.cc-fp-actions {
display: flex;
justify-content: center;
gap: 0.75rem;
flex-wrap: wrap;
opacity: 0;
}
.cc-fp-visible .cc-fp-actions {
animation: ccFpCardIn 0.4s 1.6s ease forwards;
}
.cc-fp-btn {
display: inline-flex;
align-items: center;
padding: 0.9rem 1.75rem;
border-radius: 100vw;
font-weight: 700;
font-size: 0.92rem;
text-decoration: none;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cc-fp-btn:hover {
transform: translateY(-2px);
}
.cc-fp-btn-primary {
background: #827afe;
color: #fff;
}
.cc-fp-btn-primary:hover {
box-shadow: 0 6px 24px rgba(130, 122, 254, 0.3);
}
.cc-fp-btn-secondary {
background: #fff;
color: #1a1a1a;
border: 1px solid #ddd;
}
.cc-fp-btn-secondary:hover {
border-color: #bbb;
box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}
/* ── Contact form hero section ── */
#formulaire.section.faq {
padding-top: 0;
}
#formulaire .padding-global {
padding: 2rem 2rem 4rem;
}
#formulaire .container-medium {
max-width: 900px;
margin: 0 auto;
}
/* ══ Responsive — Tablet ══ */
/* ══ Responsive — Mobile landscape ══ */
/* ══ Responsive — Mobile ══ */
@media screen and (max-width: 479px) {
#formulaire .padding-global {
padding: 1rem 0 3rem !important;
}
/* Le .cc-form se colle aux bords du wrap : pas de padding interne
supplémentaire qui réduit la largeur utile. */
/* Les sections prennent TOUTE la largeur du viewport (moins le
petit gutter du wrap), et leur padding interne est resserré. */
/* "Quelles activités" : 2 colonnes AVEC padding interne suffisant
pour que les cards ne touchent pas les bords de la section. */
/* Inputs : largeur 100% + box-sizing: border-box pour que le
date-picker iOS, qui par défaut est intrinsic-sized, ne dépasse
plus à droite. */
/* Grille "cc-row-2" empilée pour éviter tout débord */
.cc-fp-title {
font-size: 1.5rem;
}
.cc-fp-content {
padding: 1.5rem;
}
.cc-fp-actions {
flex-direction: column;
}
.cc-fp-btn {
width: 100%;
justify-content: center;
}
}
/* ================================================================
LEGAL PAGES (cc-legal-* classes)
================================================================ */
.cc-legal-section {
padding-top: 8rem;
padding-bottom: 4rem;
background: #fafafa;
min-height: 100vh;
position: relative;
z-index: 2;
}
.cc-legal-content {
max-width: 720px;
margin: 0 auto;
background: #fff;
border: 1px solid #ededee;
border-radius: 1.25rem;
padding: 3rem;
}
.cc-legal-title {
font-size: 2rem !important;
font-weight: 800 !important;
color: #1a1a1a !important;
margin: 0 0 0.5rem !important;
font-family: 'Inter Tight', sans-serif !important;
}
.cc-legal-update {
font-size: 0.85rem;
color: #999;
margin: 0 0 2.5rem;
}
.cc-legal-content h2 {
font-size: 1.1rem !important;
font-weight: 700 !important;
color: #1a1a1a !important;
margin: 2rem 0 0.75rem !important;
padding-top: 1rem;
border-top: 1px solid #f0f0f0;
font-family: 'Inter Tight', sans-serif !important;
}
.cc-legal-content h2:first-of-type {
border-top: none;
padding-top: 0;
}
.cc-legal-content p {
font-size: 0.92rem;
color: #555;
line-height: 1.7;
margin: 0 0 0.75rem;
}
.cc-legal-content ul {
padding-left: 1.5rem;
margin: 0 0 1rem;
}
.cc-legal-content li {
font-size: 0.92rem;
color: #555;
line-height: 1.7;
margin-bottom: 0.35rem;
}
.cc-legal-content a {
color: #827afe;
font-weight: 600;
}
@media screen and (max-width: 479px) {
.cc-legal-content {
padding: 1.75rem;
}
.cc-legal-title {
font-size: 1.5rem !important;
}
}
/* ================================================================
REDESIGNED FOOTER
================================================================ */
.unido-footer {
background: #111111;
color: #fff;
padding: 0;
position: relative;
overflow: hidden;
}
/* ── CTA banner at top of footer ── */
.unido-footer-cta {
padding: 4rem 2rem;
text-align: center;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.unido-footer-cta-inner {
max-width: 600px;
margin: 0 auto;
}
.unido-footer-cta-title {
font-family: 'Inter Tight', sans-serif;
font-size: 2.25rem;
font-weight: 800;
color: #fff;
margin: 0 0 0.75rem;
letter-spacing: -0.02em;
line-height: 1.2;
}
.unido-footer-cta-text {
font-size: 1.05rem;
color: rgba(255,255,255,0.55);
margin: 0 0 2rem;
line-height: 1.6;
}
.unido-footer-cta-btn {
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 1rem 2rem;
background: #827afe;
color: #fff;
border-radius: 100vw;
text-decoration: none;
font-weight: 700;
font-size: 1rem;
font-family: 'Inter Tight', sans-serif;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.unido-footer-cta-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 28px rgba(130, 122, 254, 0.4);
color: #fff;
}
.unido-footer-cta-btn svg {
width: 18px;
height: 18px;
transition: transform 0.2s;
}
.unido-footer-cta-btn:hover svg {
transform: translateX(3px);
}
/* ── Main footer content ── */
.unido-footer-main {
display: grid;
grid-template-columns: 1.3fr 1fr 1fr 1fr;
gap: 2.5rem;
max-width: 1140px;
margin: 0 auto;
padding: 3.5rem 2rem;
}
/* Brand column */
.unido-footer-brand {
display: flex;
flex-direction: column;
gap: 1rem;
}
.unido-footer-logo {
display: flex;
align-items: center;
gap: 10px;
}
.unido-footer-logo img:first-child {
width: 38px;
height: auto;
filter: invert(1);
}
.unido-footer-logo img:last-child {
height: 1.6rem;
width: auto;
filter: invert(1);
}
.unido-footer-tagline {
font-size: 0.88rem;
color: rgba(255,255,255,0.5);
line-height: 1.6;
max-width: 260px;
}
.unido-footer-socials {
display: flex;
gap: 0.6rem;
margin-top: 0.5rem;
}
.unido-footer-social {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255,255,255,0.08);
color: #fff;
text-decoration: none;
transition: background 0.2s, transform 0.2s;
}
.unido-footer-social:hover {
background: #827afe;
transform: translateY(-2px);
color: #fff;
}
.unido-footer-social svg {
width: 16px;
height: 16px;
}
/* Link columns */
.unido-footer-col-title {
font-family: 'Inter Tight', sans-serif;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: rgba(255,255,255,0.35);
margin: 0 0 1.25rem;
}
.unido-footer-links {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.unido-footer-links a {
color: rgba(255,255,255,0.7);
text-decoration: none;
font-size: 0.9rem;
font-weight: 500;
transition: color 0.2s;
}
.unido-footer-links a:hover {
color: #fff;
}
/* Contact info column */
.unido-footer-contact-item {
display: flex;
align-items: flex-start;
gap: 0.6rem;
margin-bottom: 0.9rem;
}
.unido-footer-contact-icon {
flex-shrink: 0;
width: 18px;
height: 18px;
color: #827afe;
margin-top: 2px;
}
.unido-footer-contact-text {
font-size: 0.9rem;
color: rgba(255,255,255,0.7);
line-height: 1.5;
}
.unido-footer-contact-text a {
color: rgba(255,255,255,0.7);
text-decoration: none;
transition: color 0.2s;
}
.unido-footer-contact-text a:hover {
color: #fff;
}
/* ── Bottom bar ── */
.unido-footer-bottom {
border-top: 1px solid rgba(255,255,255,0.08);
padding: 1.5rem 2rem;
max-width: 1140px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
.unido-footer-copy {
font-size: 0.8rem;
color: rgba(255,255,255,0.35);
}
.unido-footer-legal {
display: flex;
gap: 1.5rem;
}
.unido-footer-legal a {
font-size: 0.8rem;
color: rgba(255,255,255,0.35);
text-decoration: none;
transition: color 0.2s;
}
.unido-footer-legal a:hover {
color: rgba(255,255,255,0.7);
}
/* ── Footer responsive ── */
@media screen and (max-width: 991px) {
.unido-footer-main {
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
}
@media screen and (max-width: 479px) {
.unido-footer-cta-title {
font-size: 1.6rem;
}
.unido-footer-main {
grid-template-columns: 1fr;
gap: 2rem;
padding: 2.5rem 1.5rem;
}
.unido-footer-bottom {
flex-direction: column;
text-align: center;
gap: 0.75rem;
}
.unido-footer-legal {
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
}
}
/* ================================================================
NOS FORMATS — 8 stack buttons grid
================================================================ */
.unido-formats-section .w-container {
max-width: 1200px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* ── Responsive formats ─────────────────── */
@media (min-width: 768px) and (max-width: 991px) {
.unido-formats-section .w-container {
max-width: 100% !important;
}
}
/* ================================================================
GLOBAL — Uniform animations & hover effects
================================================================ */
/* ── Fade-in on scroll (applied via IntersectionObserver) ── */
/* ── Uniform section padding ──────────────────── */
/* ── Hover lift for cards / interactive blocks ── */
/* ── Hover on primary buttons ─────────────── */
/* ── Hover on tarifs cards ────────────────── */
/* ── Hover on bestseller cards ────────────── */
/* ── Process steps hover ──────────────────── */
/* ── Eyebrow dot pulse ────────────────────── */
@keyframes unido-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.6; transform: scale(1.3); }
}
/* ══════════════════════════════════════════════════════════════
FIDÉLITÉ — #recurrence — Alignement DA complète
Fond blanc, titres Instrument Serif, cartes blanches bordées.
══════════════════════════════════════════════════════════════ */
#recurrence.home-our-team-sec {
background: #ffffff !important;
padding: 100px 0 !important;
}
/* ── Alternance BG : Témoignages plus foncé, FAQ blanc ──── */
.unido-parts#confiance {
background: #f4f2fb !important;
}
.unido-parts#confiance #testimonials {
background: transparent !important;
}
#recurrence .ourteam-heading-div {
max-width: 1200px;
margin: 0 auto 60px !important;
padding: 0 40px !important;
text-align: center;
}
#recurrence .section-eyebrow {
display: inline-flex !important;
align-items: center;
gap: 8px;
color: #5b53d9 !important;
font-family: 'Inter Tight', system-ui, sans-serif !important;
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: .1em !important;
text-transform: uppercase !important;
margin-bottom: 20px !important;
}
#recurrence .section-eyebrow-text {
color: #5b53d9 !important;
font-family: 'Inter Tight', system-ui, sans-serif !important;
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: .1em !important;
text-transform: uppercase !important;
}
#recurrence .section-eyebrow-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #5b53d9 !important;
}
#recurrence .titre-page-d-accueil {
font-family: 'Instrument Serif', Georgia, serif !important;
font-weight: 400 !important;
font-size: clamp(36px, 4.5vw, 60px) !important;
line-height: 1.1 !important;
letter-spacing: -.02em !important;
color: #0c0b13 !important;
margin: 0 auto 20px !important;
max-width: 820px !important;
}
#recurrence .titre-page-d-accueil em,
#recurrence .titre-page-d-accueil .italic-text-5 {
font-family: 'Instrument Serif', Georgia, serif !important;
font-style: italic !important;
font-weight: 400 !important;
color: #5b53d9 !important;
}
#recurrence .description-page-d-accueil {
font-family: 'Inter Tight', system-ui, sans-serif !important;
font-size: 17px !important;
line-height: 1.65 !important;
color: #5f5c7a !important;
max-width: 620px !important;
margin: 0 auto !important;
}
#recurrence .creative-mind-wrapper {
max-width: 960px !important;
margin: 0 auto !important;
padding: 0 40px !important;
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 20px !important;
width: 100% !important;
}
#recurrence .profile-card {
background: #ffffff !important;
border: 1px solid rgba(12,11,19,.08) !important;
border-radius: 18px !important;
padding: 28px 22px 26px !important;
box-shadow: 0 2px 6px rgba(12,11,19,.03) !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 16px !important;
width: auto !important;
max-width: none !important;
min-height: 200px !important;
transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease !important;
}
#recurrence .profile-card:hover {
border-color: rgba(91,83,217,.30) !important;
transform: translateY(-4px) !important;
box-shadow: 0 10px 28px rgba(91,83,217,.10) !important;
}
#recurrence .profile-card img,
#recurrence .profile-card .image-31,
#recurrence .profile-card .image-32,
#recurrence .profile-card .image-33 {
width: 44px !important;
height: 44px !important;
max-width: 44px !important;
max-height: 44px !important;
object-fit: contain !important;
padding: 8px !important;
background: rgba(91,83,217,.08) !important;
border-radius: 12px !important;
}
#recurrence .creative-descp-block {
display: flex;
flex-direction: column;
gap: 6px;
}
#recurrence .creative-block-title {
font-family: 'Inter Tight', system-ui, sans-serif !important;
font-size: 17px !important;
font-weight: 600 !important;
color: #0c0b13 !important;
line-height: 1.3 !important;
margin: 0 !important;
letter-spacing: -0.01em !important;
}
#recurrence .position-txt {
font-family: 'Inter Tight', system-ui, sans-serif !important;
font-size: 14.5px !important;
font-weight: 400 !important;
color: #5f5c7a !important;
line-height: 1.55 !important;
}
@media (max-width: 900px) {
#recurrence .creative-mind-wrapper {
grid-template-columns: 1fr !important;
gap: 16px !important;
}
#recurrence.home-our-team-sec {
padding: 70px 0 !important;
}
/* Alignement unifié sur mobile : titres Fidélité à gauche comme le reste */
#recurrence .ourteam-heading-div {
text-align: left !important;
margin: 0 0 40px !important;
}
#recurrence .titre-page-d-accueil,
#recurrence .description-page-d-accueil {
text-align: left !important;
margin-left: 0 !important;
margin-right: 0 !important;
max-width: 100% !important;
}
}
/* ────────────────────────────────────────────────────────────
COLLAGE DES SECTIONS — supprime les écarts qui laissent
transparaître le fond entre sections (activites / contact).
──────────────────────────────────────────────────────────── */
/* Activités : le product-hero touche directement la FAQ (.section-8) */
/* Contact : la FAQ touche directement le footer (déjà fait dans unido-contact-solo.css) */
.solo-faq { margin-bottom: 0 !important; }
/* ================================================================
UNIDO – Parts CSS
Design system pour les nouvelles sections (à charger APRÈS
unido-custom.css). Les règles globales (*, body, section) sont
scopées pour ne pas casser les anciennes sections Webflow.
================================================================ */
/* ─── RESET & TOKENS (scopé aux nouvelles parties) ────────────── */
.unido-parts *,
.unido-parts *::before,
.unido-parts *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--bg: #ffffff;
--bg2: #f7f6fb;
--bg3: #efedf7;
--purple: #5b53d9;
--purple-s: rgba(91,83,217,.08);
--purple-m: rgba(91,83,217,.16);
--text: #0c0b13;
--text2: #5f5c7a;
--text3: #9591b8;
--border: rgba(12,11,19,.10);
--white: #fff;
--r-card: 16px;
--r-btn: 100px;
--ease: cubic-bezier(.4,0,.2,1);
--font-d: 'Instrument Serif', Georgia, serif;
--font-b: 'Inter Tight', system-ui, sans-serif;
}
.unido-parts {
background: var(--bg);
color: var(--text);
font-family: var(--font-b);
font-size: 16px;
line-height: 1.6;
}
/* grain overlay — porté par un wrapper .unido-parts pour ne pas
entrer en conflit avec le grain existant du site */
/* ─── UTILITIES ──────────────────────────────────────────────── */
.unido-parts .container { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
.unido-parts .eyebrow {
display: inline-flex; align-items: center; gap: 8px;
font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
color: var(--purple); margin-bottom: 20px;
}
.unido-parts .eyebrow::before {
content: ''; width: 6px; height: 6px; border-radius: 50%;
background: var(--purple); flex-shrink: 0;
}
.unido-parts .serif { font-family: var(--font-d); font-weight: 400; }
.unido-parts .italic { font-style: italic; color: var(--purple); }
.unido-parts h2.section-title {
font-family: var(--font-d);
font-size: clamp(36px, 4.5vw, 60px);
font-weight: 400; line-height: 1.1;
letter-spacing: -.02em; color: var(--text);
margin-bottom: 20px;
}
.unido-parts .section-desc {
font-size: 17px; color: var(--text2);
line-height: 1.65; max-width: 520px;
}
.unido-parts .btn-primary {
display: inline-flex; align-items: center; gap: 10px;
background: var(--purple); color: #fff;
font-family: var(--font-b); font-size: 14px; font-weight: 500;
padding: 14px 24px; border-radius: var(--r-btn);
text-decoration: none; border: none; cursor: pointer;
transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.unido-parts .btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 28px rgba(130,122,254,.4);
}
.unido-parts .btn-ghost {
display: inline-flex; align-items: center; gap: 10px;
background: transparent; color: var(--text);
font-family: var(--font-b); font-size: 14px; font-weight: 500;
padding: 13px 22px; border-radius: var(--r-btn);
border: 1px solid var(--border);
text-decoration: none; cursor: pointer;
transition: border-color .2s, background .2s;
}
.unido-parts .btn-ghost:hover { border-color: var(--purple); background: var(--purple-s); }
.unido-parts .arrow-icon { font-size: 16px; line-height: 1; }
.unido-parts section { padding: 100px 0; }
/* ─── NAVBAR ─────────────────────────────────────────────────── */
.unido-parts nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
padding: 16px 40px;
display: flex; align-items: center; justify-content: space-between;
background: rgba(12,11,19,.8);
backdrop-filter: blur(20px) saturate(1.4);
border-bottom: 1px solid var(--border);
transition: background .3s;
}
.unido-parts .nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.unido-parts .nav-logo img { height: 28px; width: auto; filter: brightness(0) invert(1); }
.unido-parts .nav-links {
display: flex; align-items: center; gap: 4px;
list-style: none;
}
.unido-parts .nav-links a {
color: var(--text2); text-decoration: none;
font-size: 13px; font-weight: 400; padding: 6px 12px;
border-radius: 8px; transition: color .2s, background .2s;
}
.unido-parts .nav-links a:hover { color: var(--text); background: var(--purple-s); }
.unido-parts .nav-actions { display: flex; gap: 8px; align-items: center; }
.unido-parts .nav-cta-light {
display: inline-flex; align-items: center; gap: 8px;
background: rgba(255,255,255,.08); color: var(--text);
font-size: 13px; font-weight: 500; padding: 9px 18px;
border-radius: var(--r-btn); border: 1px solid rgba(255,255,255,.12);
text-decoration: none; transition: background .2s;
}
.unido-parts .nav-cta-light:hover { background: rgba(255,255,255,.14); }
.unido-parts .nav-cta-dark {
display: inline-flex; align-items: center; gap: 8px;
background: var(--text); color: var(--bg);
font-size: 13px; font-weight: 500; padding: 9px 18px;
border-radius: var(--r-btn); text-decoration: none;
transition: opacity .2s;
}
.unido-parts .nav-cta-dark:hover { opacity: .88; }
.unido-parts .nav-avts { display: flex; }
.unido-parts .nav-avts img { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--bg); object-fit: cover; margin-left: -5px; }
.unido-parts .nav-avts img:first-child { margin-left: 0; }
/* ─── HERO ───────────────────────────────────────────────────── */
.unido-parts #hero {
min-height: 100vh;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
}
.unido-parts .hero-left {
padding: 140px 60px 80px 80px;
display: flex; flex-direction: column;
justify-content: center;
}
.unido-parts .hero-badge {
display: inline-flex; align-items: center; gap: 8px;
background: var(--purple-s); border: 1px solid var(--border);
border-radius: 100px; padding: 6px 14px;
font-size: 12px; color: var(--purple); font-weight: 500;
margin-bottom: 32px; width: fit-content;
}
.unido-parts .hero-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--purple); }
.unido-parts h1.hero-title {
font-family: var(--font-d);
font-size: clamp(44px, 5vw, 72px);
line-height: 1.05;
letter-spacing: -.025em;
font-weight: 400;
color: var(--text);
margin-bottom: 24px;
}
.unido-parts h1.hero-title em { font-style: italic; color: var(--purple); }
.unido-parts .hero-desc {
font-size: 17px; color: var(--text2); line-height: 1.65;
max-width: 440px; margin-bottom: 40px;
}
.unido-parts .hero-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 48px; }
.unido-parts .hero-social-proof {
display: flex; align-items: center; gap: 14px;
padding-top: 32px; border-top: 1px solid var(--border);
}
.unido-parts .hero-avts { display: flex; }
.unido-parts .hero-avts img { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--bg); object-fit: cover; margin-left: -8px; }
.unido-parts .hero-avts img:first-child { margin-left: 0; }
.unido-parts .hero-proof-text { font-size: 13px; color: var(--text2); line-height: 1.4; }
.unido-parts .hero-proof-text strong { color: var(--text); }
.unido-parts .hero-stars { color: var(--purple); font-size: 13px; }
.unido-parts .hero-right {
height: 100vh;
padding: 24px 40px 24px 0;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 10px;
overflow: hidden;
}
.unido-parts .hero-img {
border-radius: 12px; overflow: hidden;
position: relative;
}
.unido-parts .hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.unido-parts .hero-img:nth-child(1) { grid-column: 1; grid-row: 1 / 3; }
.unido-parts .hero-img:nth-child(2) { grid-column: 2; grid-row: 1; }
.unido-parts .hero-img:nth-child(3) { grid-column: 2; grid-row: 2; }
.unido-parts .hero-stat-card {
grid-column: 1; grid-row: 3;
background: var(--bg2); border: 1px solid var(--border);
border-radius: 12px; padding: 20px;
display: flex; flex-direction: column; justify-content: center;
}
.unido-parts .hero-stat-card .stat-num {
font-family: var(--font-d); font-size: 38px; color: var(--purple); line-height: 1;
}
.unido-parts .hero-stat-card .stat-label { font-size: 13px; color: var(--text2); margin-top: 4px; }
.unido-parts .hero-img-last { grid-column: 2; grid-row: 3; }
/* ─── MARQUEE ────────────────────────────────────────────────── */
.unido-parts #logos {
padding: 40px 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
background: var(--bg2);
overflow: hidden;
}
.unido-parts .marquee-track {
display: flex; gap: 70px; align-items: center;
/* Ralenti : avec 4 sets de logos, 48s donne un défilé plus long
et plus posé qu'à 24s avec 2 sets. */
animation: unido-marquee 48s linear infinite;
width: max-content;
}
@keyframes unido-marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.unido-parts .marquee-logo {
height: 32px; width: auto; object-fit: contain;
/* Fond lavande clair (#f7f6fb) → logos en NOIR désaturés avec
opacité moyenne pour un rendu premium lisible. L'ancien
brightness(0) invert(1) mettait les logos en BLANC invisible. */
filter: grayscale(1) brightness(0);
opacity: .55;
transition: opacity .25s ease;
}
.unido-parts .marquee-logo:hover { opacity: .85; }
/* ─── STATS ──────────────────────────────────────────────────── */
.unido-parts #stats { padding: 80px 0; background: var(--bg); }
.unido-parts .stats-grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 2px; background: var(--border);
border-radius: var(--r-card); overflow: hidden;
}
.unido-parts .stat-box {
background: var(--bg2); padding: 48px 40px;
display: flex; flex-direction: column; gap: 8px;
}
.unido-parts .stat-box .big-num {
font-family: var(--font-d); font-size: 64px; line-height: 1;
color: var(--purple); letter-spacing: -.03em;
}
.unido-parts .stat-box .stat-title { font-weight: 500; font-size: 15px; color: var(--text); }
.unido-parts .stat-box .stat-sub { font-size: 13px; color: var(--text2); line-height: 1.5; }
/* ─── MISSION ────────────────────────────────────────────────── */
.unido-parts #mission { background: var(--bg2); }
.unido-parts .mission-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.unido-parts .mission-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.unido-parts .pill {
display: inline-flex; align-items: center; gap: 8px;
background: var(--purple-s); border: 1px solid var(--border);
padding: 8px 16px; border-radius: 100px;
font-size: 13px; font-weight: 500; color: var(--purple);
}
.unido-parts .mission-img-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.unido-parts .mission-img { border-radius: 12px; overflow: hidden; aspect-ratio: 4/3; }
.unido-parts .mission-img img { width: 100%; height: 100%; object-fit: cover; }
.unido-parts .mission-img.tall { aspect-ratio: auto; grid-row: span 2; }
/* ─── FORMATS ────────────────────────────────────────────────── */
.unido-parts #formats { background: var(--bg); }
.unido-parts .formats-header { text-align: center; margin-bottom: 60px; }
.unido-parts .formats-header .section-desc { margin: 0 auto; text-align: center; }
.unido-parts .formats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.unido-parts .format-card {
background: var(--bg2); border: 1px solid var(--border);
border-radius: var(--r-card); padding: 28px 24px;
text-decoration: none; color: var(--text);
display: flex; flex-direction: column; gap: 10px;
transition: border-color .2s, background .2s, transform .2s;
cursor: pointer;
}
.unido-parts .format-card:hover {
border-color: var(--purple); background: var(--bg3);
transform: translateY(-3px);
}
.unido-parts .format-emoji { font-size: 28px; line-height: 1; }
.unido-parts .format-name { font-size: 15px; font-weight: 500; }
.unido-parts .format-desc { font-size: 13px; color: var(--text2); line-height: 1.5; }
/* ─── PROBLEMS ───────────────────────────────────────────────── */
.unido-parts #problems { background: var(--bg2); }
.unido-parts .problems-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.unido-parts .problems-list { display: flex; flex-direction: column; gap: 0; margin-top: 40px; }
.unido-parts .problem-item {
padding: 24px 0; border-bottom: 1px solid var(--border);
display: flex; gap: 20px; align-items: start;
}
.unido-parts .problem-item:first-child { border-top: 1px solid var(--border); }
.unido-parts .problem-num {
font-size: 0; color: transparent;
min-width: 24px; padding-top: 3px;
display: inline-flex; align-items: center; justify-content: center;
}
.unido-parts .problem-num::before {
content: ''; display: block; width: 16px; height: 16px;
background-color: #e53935;
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
.unido-parts .problem-title { font-weight: 500; font-size: 15px; color: var(--text); margin-bottom: 6px; }
.unido-parts .problem-desc { font-size: 14px; color: var(--text2); line-height: 1.55; }
/* ─── COMPARISON ─────────────────────────────────────────────── */
.unido-parts #comparison { background: var(--bg); }
.unido-parts .comparison-header { text-align: center; margin-bottom: 60px; }
.unido-parts .comparison-header .section-desc { margin: 0 auto; text-align: center; }
.unido-parts .comparison-table {
border-radius: var(--r-card); overflow: hidden;
border: 1px solid var(--border);
}
.unido-parts .comp-row {
display: grid; grid-template-columns: 1fr 1fr 1fr;
border-bottom: 1px solid var(--border);
}
.unido-parts .comp-row:last-child { border-bottom: none; }
.unido-parts .comp-cell {
padding: 18px 28px;
display: flex; align-items: center; gap: 10px;
font-size: 14px; color: var(--text2);
border-right: 1px solid var(--border);
}
.unido-parts .comp-cell:last-child { border-right: none; }
.unido-parts .comp-row.header .comp-cell {
background: var(--bg2); font-size: 12px; font-weight: 600;
text-transform: uppercase; letter-spacing: .08em; color: var(--text3);
padding: 14px 28px;
}
.unido-parts .comp-row.header .comp-cell.highlight { background: var(--purple-s); color: var(--purple); }
.unido-parts .comp-cell.feature { color: var(--text); font-weight: 500; background: var(--bg2); }
.unido-parts .comp-cell.bad { color: #f87171; }
.unido-parts .comp-cell.good { color: #4ade80; background: rgba(74,222,128,.04); }
.unido-parts .check { font-size: 16px; }
.unido-parts .cross { font-size: 16px; }
/* ─── PROCESS ────────────────────────────────────────────────── */
.unido-parts #process { background: var(--bg2); }
.unido-parts .process-header { margin-bottom: 70px; }
.unido-parts .process-steps {
display: grid; grid-template-columns: repeat(5, 1fr);
gap: 0; position: relative;
}
.unido-parts .process-steps::before {
content: ''; position: absolute;
top: 28px; left: calc(10% + 14px); right: calc(10% + 14px);
height: 1px; background: var(--border);
}
.unido-parts .process-step { padding: 0 16px; text-align: center; }
.unido-parts .process-num-wrap {
width: 56px; height: 56px; border-radius: 50%;
background: var(--bg3); border: 1px solid var(--border);
display: flex; align-items: center; justify-content: center;
margin: 0 auto 20px; position: relative; z-index: 1;
}
.unido-parts .process-step.active .process-num-wrap {
background: var(--purple); border-color: var(--purple);
}
.unido-parts .process-num {
font-family: var(--font-d); font-style: italic;
font-size: 18px; color: var(--text2);
}
.unido-parts .process-step.active .process-num { color: #fff; }
.unido-parts .process-step-title { font-size: 14px; font-weight: 500; color: var(--text); margin-bottom: 8px; line-height: 1.3; }
.unido-parts .process-step-desc { font-size: 12px; color: var(--text2); line-height: 1.5; }
/* ─── BESTSELLERS ────────────────────────────────────────────── */
.unido-parts #bestsellers { background: var(--bg); }
.unido-parts .bs-header { margin-bottom: 60px; display: flex; justify-content: space-between; align-items: flex-end; }
.unido-parts .bs-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.unido-parts .bs-card {
background: var(--bg2); border: 1px solid var(--border);
border-radius: var(--r-card); overflow: hidden;
transition: transform .2s, border-color .2s;
text-decoration: none !important;
color: var(--text);
display: block;
}
.unido-parts .bs-card *,
.unido-parts .bs-card-name,
.unido-parts .bs-card-desc,
.unido-parts .bs-chip {
text-decoration: none !important;
}
.unido-parts .bs-card:hover { transform: translateY(-4px); border-color: var(--purple); }
.unido-parts .bs-card-img { aspect-ratio: 4/3; overflow: hidden; }
.unido-parts .bs-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.unido-parts .bs-card:hover .bs-card-img img { transform: scale(1.04); }
.unido-parts .bs-card-body { padding: 24px; }
.unido-parts .bs-card-name { font-family: var(--font-d); font-size: 20px; margin-bottom: 8px; color: var(--text); }
.unido-parts .bs-card-desc { font-size: 13px; color: var(--text2); line-height: 1.55; margin-bottom: 16px; }
.unido-parts .bs-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.unido-parts .bs-chip {
background: var(--bg3); border: 1px solid var(--border);
border-radius: 100px; padding: 4px 12px;
font-size: 11px; color: var(--text2); font-weight: 500;
}
/* ─── PRICING ────────────────────────────────────────────────── */
.unido-parts #pricing { background: var(--bg2); }
.unido-parts .pricing-header { text-align: center; margin-bottom: 60px; }
.unido-parts .pricing-header .section-desc { margin: 0 auto; text-align: center; }
.unido-parts .pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.unido-parts .pricing-card {
background: var(--bg3); border: 1px solid var(--border);
border-radius: var(--r-card); padding: 32px 28px;
display: flex; flex-direction: column; gap: 20px;
text-decoration: none; color: var(--text);
transition: transform .2s, border-color .2s;
}
.unido-parts .pricing-card:hover { transform: translateY(-4px); border-color: var(--purple); }
.unido-parts .pricing-card.featured {
background: var(--purple-s); border-color: var(--purple);
position: relative;
}
.unido-parts .pricing-badge {
display: inline-block; font-size: 10px; font-weight: 700;
text-transform: uppercase; letter-spacing: .1em;
padding: 4px 10px; border-radius: 100px;
background: var(--purple-s); color: var(--purple); border: 1px solid var(--border);
width: fit-content;
}
.unido-parts .pricing-card.featured .pricing-badge { background: var(--purple); color: #fff; border-color: var(--purple); }
.unido-parts .pricing-participants { font-size: 13px; color: var(--text2); font-weight: 500; }
.unido-parts .pricing-price { font-family: var(--font-d); font-size: 42px; line-height: 1; color: var(--text); }
.unido-parts .pricing-price span { font-family: var(--font-b); font-size: 14px; color: var(--text2); }
.unido-parts .pricing-includes { display: flex; flex-direction: column; gap: 8px; }
.unido-parts .pricing-item { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--text2); }
.unido-parts .pricing-item::before { content: '✓'; color: var(--purple); flex-shrink: 0; font-size: 13px; font-weight: 600; }
.unido-parts .pricing-cta {
margin-top: auto; text-align: center; padding: 12px;
border-radius: 100px; border: 1px solid var(--border);
font-size: 13px; font-weight: 500; color: var(--text);
transition: background .2s, border-color .2s;
}
.unido-parts .pricing-card:hover .pricing-cta { background: var(--purple); border-color: var(--purple); color: #fff; }
.unido-parts .pricing-footer { text-align: center; margin-top: 48px; }
.unido-parts .pricing-footer p { color: var(--text2); font-size: 15px; margin-bottom: 20px; }
/* ─── TESTIMONIALS ───────────────────────────────────────────── */
.unido-parts #testimonials { background: var(--bg); }
.unido-parts .testimonials-header { margin-bottom: 60px; }
.unido-parts .testimonials-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.unido-parts .testimonials-grid-left { display: flex; flex-direction: column; gap: 16px; }
.unido-parts .testimonials-grid-right { display: flex; flex-direction: column; gap: 16px; }
.unido-parts .testi-card {
background: var(--bg2); border: 1px solid var(--border);
border-radius: var(--r-card); padding: 32px;
}
.unido-parts .testi-quote {
font-size: 15px; color: var(--text2); line-height: 1.7;
margin-bottom: 24px; font-style: italic;
}
.unido-parts .testi-person { display: flex; align-items: center; gap: 12px; }
.unido-parts .testi-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.unido-parts .testi-name { font-size: 14px; font-weight: 500; color: var(--text); }
.unido-parts .testi-role { font-size: 12px; color: var(--text3); }
.unido-parts .testi-role-only {
font-size: 12px; font-weight: 500;
color: var(--purple); opacity: .75;
letter-spacing: .04em; text-transform: uppercase;
padding-top: 4px;
}
.unido-parts .testi-icon {
float: right; font-size: 32px; color: var(--purple); opacity: .4;
font-family: Georgia, serif; line-height: .7; margin-left: 8px;
}
/* ─── FAQ ────────────────────────────────────────────────────── */
.unido-parts #faq { background: var(--bg2); }
.unido-parts .faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
.unido-parts .faq-list { display: flex; flex-direction: column; }
.unido-parts .faq-item {
border-bottom: 1px solid var(--border); overflow: hidden;
}
.unido-parts .faq-item:first-child { border-top: 1px solid var(--border); }
.unido-parts .faq-q {
display: flex; justify-content: space-between; align-items: center;
padding: 22px 0; cursor: pointer; gap: 16px;
font-size: 15px; font-weight: 500; color: var(--text);
user-select: none;
}
.unido-parts .faq-q:hover { color: var(--purple); }
.unido-parts .faq-icon {
width: 28px; height: 28px; border-radius: 50%;
background: var(--bg3); border: 1px solid var(--border);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0; font-size: 14px; color: var(--text2);
transition: transform .3s, background .2s;
}
.unido-parts .faq-item.open .faq-icon { transform: rotate(45deg); background: var(--purple-s); color: var(--purple); }
.unido-parts .faq-a {
max-height: 0; overflow: hidden;
transition: max-height .35s var(--ease), padding .3s;
font-size: 14px; color: var(--text2); line-height: 1.65;
padding-bottom: 0;
}
.unido-parts .faq-item.open .faq-a { max-height: 200px; padding-bottom: 22px; }
/* ─── CTA BANNER ─────────────────────────────────────────────── */
.unido-parts #cta-banner {
padding: 80px 0;
background: var(--bg);
}
.unido-parts .cta-inner {
background: var(--purple-s); border: 1px solid var(--border);
border-radius: 24px; padding: 70px 80px;
display: flex; align-items: center; justify-content: space-between; gap: 40px;
position: relative; overflow: hidden;
}
.unido-parts .cta-inner::before {
content: '';
position: absolute; top: -60px; right: -60px;
width: 240px; height: 240px; border-radius: 50%;
background: radial-gradient(circle, rgba(130,122,254,.25) 0%, transparent 70%);
pointer-events: none;
}
.unido-parts .cta-text h2 { font-family: var(--font-d); font-size: 42px; font-weight: 400; line-height: 1.1; margin-bottom: 12px; }
.unido-parts .cta-text p { font-size: 16px; color: var(--text2); }
.unido-parts .cta-actions { display: flex; flex-direction: column; gap: 12px; align-items: flex-end; flex-shrink: 0; }
.unido-parts .cta-badge { font-size: 12px; color: var(--text3); text-align: right; }
/* ─── FOOTER ─────────────────────────────────────────────────── */
.unido-parts footer {
background: var(--bg2); border-top: 1px solid var(--border);
padding: 60px 0 40px;
}
.unido-parts .footer-top {
display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 60px; margin-bottom: 60px;
}
.unido-parts .footer-brand img { height: 28px; filter: brightness(0) invert(1); margin-bottom: 16px; }
.unido-parts .footer-brand p { font-size: 13px; color: var(--text2); line-height: 1.6; max-width: 240px; }
.unido-parts .footer-col h4 { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text3); margin-bottom: 16px; }
.unido-parts .footer-col a { display: block; font-size: 13px; color: var(--text2); text-decoration: none; padding: 4px 0; transition: color .2s; }
.unido-parts .footer-col a:hover { color: var(--purple); }
.unido-parts .footer-bottom {
border-top: 1px solid var(--border); padding-top: 28px;
display: flex; justify-content: space-between; align-items: center;
}
.unido-parts .footer-bottom p { font-size: 12px; color: var(--text3); }
/* ─── MOBILE NAV HAMBURGER ───────────────────────────────────── */
.unido-parts .nav-hamburger {
display: none; flex-direction: column; gap: 5px;
background: none; border: none; cursor: pointer;
padding: 6px; z-index: 200;
}
.unido-parts .nav-hamburger span {
display: block; width: 22px; height: 2px;
background: var(--text); border-radius: 2px;
transition: transform .25s, opacity .25s;
}
.unido-parts .nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.unido-parts .nav-hamburger.open span:nth-child(2) { opacity: 0; }
.unido-parts .nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Mobile drawer */
.unido-parts .mobile-drawer {
display: none; position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: var(--bg2); z-index: 150;
flex-direction: column; justify-content: center; align-items: center;
gap: 8px; padding: 100px 40px 40px;
}
.unido-parts .mobile-drawer.open { display: flex; }
.unido-parts .mobile-drawer a {
font-family: var(--font-d); font-style: italic;
font-size: 32px; color: var(--text); text-decoration: none;
padding: 8px 0; transition: color .2s;
}
.unido-parts .mobile-drawer a:hover { color: var(--purple); }
.unido-parts .mobile-drawer-actions {
display: flex; flex-direction: column; gap: 10px;
width: 100%; margin-top: 32px;
}
.unido-parts .mobile-drawer-actions a {
font-family: var(--font-b); font-style: normal; font-size: 15px;
text-align: center; padding: 14px; border-radius: var(--r-btn);
}
.unido-parts .mobile-drawer-actions .btn-primary { width: 100%; justify-content: center; }
.unido-parts .mobile-drawer-actions .btn-ghost { width: 100%; justify-content: center; }
/* ─── TWEAKS PANEL ───────────────────────────────────────────── */
.unido-parts #tweaks-panel {
display: none; position: fixed; bottom: 24px; right: 24px;
width: 280px; background: var(--bg2); border: 1px solid var(--border);
border-radius: 16px; padding: 20px; z-index: 9999;
box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.unido-parts #tweaks-panel.active { display: block; }
.unido-parts .tweaks-title { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 16px; }
.unido-parts .tweak-row { margin-bottom: 14px; }
.unido-parts .tweak-label { font-size: 11px; color: var(--text2); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .06em; }
.unido-parts .tweak-options { display: flex; gap: 6px; flex-wrap: wrap; }
.unido-parts .tweak-btn {
padding: 5px 12px; border-radius: 100px;
border: 1px solid var(--border); background: var(--bg3);
color: var(--text2); font-size: 12px; cursor: pointer;
transition: all .15s;
}
.unido-parts .tweak-btn:hover, .unido-parts .tweak-btn.active { background: var(--purple-s); border-color: var(--purple); color: var(--purple); }
.unido-parts .tweak-range { width: 100%; accent-color: var(--purple); }
/* ─── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
.unido-parts #hero { grid-template-columns: 1fr; }
.unido-parts .hero-right { display: none; }
.unido-parts .hero-left { padding: 140px 40px 80px; }
.unido-parts .mission-grid,
.unido-parts .problems-grid,
.unido-parts .faq-grid { grid-template-columns: 1fr; gap: 48px; }
.unido-parts .mission-img-grid { display: grid; grid-template-columns: 1fr 1fr; }
.unido-parts .process-steps { grid-template-columns: 1fr 1fr; }
.unido-parts .process-steps::before { display: none; }
.unido-parts .process-step { padding: 20px 0; }
.unido-parts .pricing-grid { grid-template-columns: 1fr 1fr; }
.unido-parts .formats-grid { grid-template-columns: repeat(2, 1fr); }
.unido-parts .footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
.unido-parts nav { padding: 14px 20px; }
.unido-parts .nav-links { display: none; }
.unido-parts .nav-actions .nav-cta-light { display: none; }
.unido-parts .nav-actions .nav-avts { display: none; }
.unido-parts .container { padding: 0 20px; }
.unido-parts section { padding: 64px 0; }
.unido-parts h2.section-title { font-size: clamp(28px, 7vw, 40px); }
/* ── Alignement unifié sur mobile : tous les titres à gauche ── */
.unido-parts .formats-header,
.unido-parts .comparison-header,
.unido-parts .pricing-header,
.unido-parts .testimonials-header,
.unido-parts .comparison-header .section-desc,
.unido-parts .formats-header .section-desc,
.unido-parts .pricing-header .section-desc,
.unido-parts .testimonials-header .section-desc {
text-align: left !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.unido-parts .pricing-footer { text-align: left !important; }
.unido-parts .pricing-footer .btn-primary { align-self: flex-start; }
/* Hero */
.unido-parts .hero-left { padding: 110px 20px 64px; }
.unido-parts h1.hero-title { font-size: clamp(38px, 10vw, 52px); }
.unido-parts .hero-desc { font-size: 15px; }
.unido-parts .hero-actions { flex-direction: column; align-items: flex-start; gap: 12px; }
.unido-parts .hero-right { display: none; }
/* Stats */
.unido-parts .stats-grid { grid-template-columns: 1fr; }
.unido-parts .stat-box .big-num { font-size: 48px; }
.unido-parts .stat-box { padding: 32px 28px; }
/* Mission */
.unido-parts .mission-img-grid { grid-template-columns: 1fr 1fr; }
.unido-parts .mission-img.tall { grid-row: span 1; aspect-ratio: 4/3; }
/* Formats */
.unido-parts .formats-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
.unido-parts .format-card { padding: 20px 16px; }
/* Problems */
.unido-parts .problems-grid { grid-template-columns: 1fr; gap: 40px; }
/* Show hamburger */
.unido-parts .nav-hamburger { display: flex; }
/* Comparison — layout empilé (plus de scroll horizontal) */
.unido-parts .comparison-table {
overflow: visible;
border: none;
display: flex; flex-direction: column; gap: 12px;
}
.unido-parts .comp-row {
min-width: 0;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"feature feature"
"bad good";
border: 1px solid var(--border);
border-radius: var(--r-card);
overflow: hidden;
background: var(--bg);
}
.unido-parts .comp-row.header { display: none; }
.unido-parts .comp-cell {
padding: 12px 14px;
font-size: 13px;
border-right: none;
border-bottom: 1px solid var(--border);
}
.unido-parts .comp-cell.feature {
grid-area: feature;
font-weight: 600;
font-size: 13px;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--text);
background: var(--bg2);
justify-content: flex-start;
}
.unido-parts .comp-cell.bad {
grid-area: bad;
border-right: 1px solid var(--border);
border-bottom: none;
position: relative;
padding-top: 28px;
}
.unido-parts .comp-cell.good {
grid-area: good;
border-bottom: none;
position: relative;
padding-top: 28px;
}
.unido-parts .comp-cell.bad::before {
content: 'Autres';
position: absolute; top: 8px; left: 14px;
font-size: 10px; font-weight: 600;
text-transform: uppercase; letter-spacing: .08em;
color: var(--text3);
}
.unido-parts .comp-cell.good::before {
content: 'Avec Unido';
position: absolute; top: 8px; left: 14px;
font-size: 10px; font-weight: 600;
text-transform: uppercase; letter-spacing: .08em;
color: var(--purple);
}
/* CTA glow — clip overflow */
.unido-parts .cta-inner { overflow: hidden; }
/* Process */
.unido-parts .process-steps { grid-template-columns: 1fr 1fr; gap: 0; }
.unido-parts .process-steps::before { display: none !important; }
/* Bestsellers */
.unido-parts .bs-cards { grid-template-columns: 1fr; }
.unido-parts .bs-header { flex-direction: column; align-items: flex-start; gap: 16px; }
/* Pricing */
.unido-parts .pricing-grid { grid-template-columns: 1fr; }
.unido-parts .pricing-price { font-size: 36px; }
/* Testimonials */
.unido-parts .testimonials-grid { grid-template-columns: 1fr; }
/* FAQ */
.unido-parts .faq-grid { grid-template-columns: 1fr; gap: 40px; }
/* CTA */
.unido-parts .cta-inner { flex-direction: column; padding: 40px 28px; }
.unido-parts .cta-text h2 { font-size: 30px; }
.unido-parts .cta-actions { align-items: flex-start; width: 100%; }
.unido-parts .cta-badge { text-align: left; }
/* Footer */
.unido-parts .footer-top { grid-template-columns: 1fr; gap: 32px; }
.unido-parts .footer-bottom { flex-direction: column; gap: 10px; text-align: center; }
}
@media (max-width: 480px) {
.unido-parts nav { padding: 12px 16px; }
.unido-parts .nav-actions .nav-cta-dark { font-size: 12px; padding: 8px 14px; }
.unido-parts .container { padding: 0 16px; }
.unido-parts section { padding: 56px 0; }
.unido-parts h2.section-title { font-size: clamp(26px, 8vw, 34px); }
/* Hero */
.unido-parts .hero-left { padding: 100px 16px 56px; }
.unido-parts h1.hero-title { font-size: clamp(34px, 11vw, 44px); }
.unido-parts .hero-badge { font-size: 11px; padding: 5px 12px; }
.unido-parts .btn-primary,
.unido-parts .btn-ghost { width: 100%; justify-content: center; }
/* Stats */
.unido-parts .stat-box .big-num { font-size: 42px; }
/* Formats */
.unido-parts .formats-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
.unido-parts .format-card { padding: 16px 14px; }
.unido-parts .format-emoji { font-size: 22px; }
.unido-parts .format-name { font-size: 13px; }
.unido-parts .format-desc { display: none; }
/* Comparison — s'appuie sur le layout 768px ci-dessus */
.unido-parts .comp-cell { padding: 11px 12px; font-size: 12px; }
.unido-parts .comp-cell.bad,
.unido-parts .comp-cell.good { padding-top: 26px; }
/* Process */
.unido-parts .process-steps { grid-template-columns: 1fr; }
.unido-parts .process-steps::before { display: none !important; }
.unido-parts .process-step { display: flex; align-items: flex-start; gap: 16px; padding: 16px 0; text-align: left; border-bottom: 1px solid var(--border); }
.unido-parts .process-num-wrap { margin: 0; flex-shrink: 0; width: 44px; height: 44px; }
/* Pricing */
.unido-parts .pricing-card { padding: 24px 20px; }
.unido-parts .pricing-price { font-size: 32px; }
/* Testimonials */
.unido-parts .testi-card { padding: 24px 20px; }
/* CTA */
.unido-parts .cta-inner { padding: 32px 20px; border-radius: 16px; }
.unido-parts .cta-text h2 { font-size: 26px; }
/* Pills */
.unido-parts .mission-pills { gap: 8px; }
.unido-parts .pill { font-size: 12px; padding: 6px 12px; }
}
/* ================================================================
UNIDO – TopNav CSS
Nav globale fixée en haut, scopée sous .unido-topnav pour ne pas
entrer en conflit avec les anciennes navbars Webflow.
Dépend de :root tokens définis dans unido-parts.css
(--bg, --purple, --text, --text2, --border, --r-btn, --font-d, --font-b).
================================================================ */
.unido-topnav,
.unido-topnav *,
.unido-topnav *::before,
.unido-topnav *::after { box-sizing: border-box; }
.unido-topnav {
position: fixed;
/* Remonte la nav JUSQU'EN HAUT de l'écran (sous la notch iPhone).
Ensuite on ajoute un padding-top = safe-area-inset-top pour que
les contrôles ne passent pas sous la barre de statut. */
top: 0; left: 0; right: 0; z-index: 100;
padding: calc(18px + env(safe-area-inset-top)) 44px 18px;
display: flex; align-items: center; justify-content: space-between;
gap: 24px;
background: #ffffff;
-webkit-backdrop-filter: none;
backdrop-filter: none;
border-bottom: 1px solid var(--border, rgba(12,11,19,.10));
font-family: var(--font-b, 'Inter Tight', system-ui, sans-serif);
color: var(--text, #0c0b13);
min-height: calc(72px + env(safe-area-inset-top));
}
.unido-topnav-logo {
display: inline-flex; align-items: center;
text-decoration: none; flex-shrink: 0;
}
.unido-topnav-logo img { height: 34px; width: auto; display: block; }
/* Liens */
.unido-topnav-links {
display: flex; gap: 4px; list-style: none;
margin: 0; padding: 0;
align-items: center;
}
.unido-topnav-links li { list-style: none; margin: 0; padding: 0; }
.unido-topnav-links a {
color: var(--text2, #5f5c7a); text-decoration: none;
font-size: 14.5px; font-weight: 500;
padding: 10px 16px; border-radius: 10px;
transition: color .2s, background .2s;
display: inline-block;
white-space: nowrap;
line-height: 1;
}
.unido-topnav-links a:hover,
.unido-topnav-links a.active {
color: var(--purple, #5b53d9);
background: var(--purple-s, rgba(91,83,217,.08));
}
/* Actions droite */
.unido-topnav-actions {
display: flex; gap: 12px; align-items: center;
flex-shrink: 0;
}
.unido-topnav-avts { display: flex; margin-right: 4px; }
.unido-topnav-avts img {
width: 30px; height: 30px; border-radius: 50%;
border: 2px solid var(--bg, #fff); object-fit: cover;
margin-left: -8px;
}
.unido-topnav-avts img:first-child { margin-left: 0; }
.unido-topnav-cta-light,
.unido-topnav-cta-dark {
display: inline-flex; align-items: center; gap: 8px;
font-size: 14px; font-weight: 500; line-height: 1;
padding: 12px 22px; border-radius: var(--r-btn, 100px);
text-decoration: none; cursor: pointer;
transition: background .2s, border-color .2s, transform .2s, box-shadow .2s;
border: 1px solid transparent;
white-space: nowrap;
}
.unido-topnav-cta-light {
background: rgba(91, 83, 217, .08); color: var(--text, #0c0b13);
border-color: rgba(91, 83, 217, .18);
}
.unido-topnav-cta-light:hover {
background: rgba(91, 83, 217, .14);
border-color: rgba(91, 83, 217, .28);
}
.unido-topnav-cta-dark {
background: var(--text, #0c0b13); color: var(--bg, #fff);
}
.unido-topnav-cta-dark:hover {
transform: translateY(-1px);
box-shadow: 0 8px 22px rgba(12, 11, 19, .22);
}
/* Hamburger */
.unido-topnav-burger {
display: none; flex-direction: column; gap: 5px;
background: none; border: none; cursor: pointer;
padding: 8px; margin: 0;
z-index: 151;
}
.unido-topnav-burger span {
display: block; width: 22px; height: 2px;
background: var(--text, #0c0b13); border-radius: 2px;
transition: transform .3s ease, opacity .2s ease;
}
.unido-topnav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.unido-topnav-burger.open span:nth-child(2) { opacity: 0; }
.unido-topnav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Drawer mobile — s'adapte à la hauteur du contenu, ancré en haut */
.unido-topnav-drawer {
display: none;
position: fixed;
top: 0; left: 0; right: 0;
background: #ffffff; z-index: 160;
flex-direction: column; align-items: stretch;
padding: calc(76px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom));
max-height: 100vh;
max-height: 100dvh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
border-bottom: 1px solid rgba(12,11,19,.08);
box-shadow: 0 12px 32px rgba(12,11,19,.08);
}
.unido-topnav-drawer.open { display: flex; }
/* Bouton × de fermeture, coin haut-droit */
.unido-topnav-drawer-close {
position: absolute;
top: calc(16px + env(safe-area-inset-top));
right: 18px;
width: 44px; height: 44px;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(12,11,19,.05);
border: 1px solid rgba(12,11,19,.10);
border-radius: 50%;
color: var(--text, #0c0b13);
cursor: pointer;
padding: 0;
z-index: 2;
transition: background .18s ease, transform .18s ease, border-color .18s ease;
}
.unido-topnav-drawer-close:hover,
.unido-topnav-drawer-close:active {
background: rgba(91,83,217,.10);
border-color: rgba(91,83,217,.24);
color: var(--purple, #5b53d9);
transform: rotate(90deg);
}
.unido-topnav-drawer a {
font-family: var(--font-b, 'Inter Tight', system-ui, sans-serif);
font-style: normal;
font-size: 20px;
font-weight: 500;
color: var(--text, #0c0b13);
text-decoration: none;
padding: 14px 4px;
line-height: 1.2;
text-align: left;
border-bottom: 1px solid rgba(12,11,19,.08);
letter-spacing: -0.01em;
transition: color .18s ease, padding-left .18s ease;
display: flex; align-items: center; justify-content: space-between;
}
.unido-topnav-drawer a::after {
content: '›';
font-size: 22px;
color: rgba(12,11,19,.30);
font-weight: 300;
transition: color .18s ease, transform .18s ease;
}
.unido-topnav-drawer a:hover,
.unido-topnav-drawer a:active {
color: var(--purple, #5b53d9);
}
.unido-topnav-drawer a:hover::after,
.unido-topnav-drawer a:active::after {
color: var(--purple, #5b53d9);
transform: translateX(2px);
}
.unido-topnav-drawer a.active { color: var(--purple, #5b53d9); }
.unido-topnav-drawer a.active::after { color: var(--purple, #5b53d9); }
.unido-topnav-drawer-actions {
display: flex; flex-direction: column; gap: 10px;
width: 100%;
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid rgba(12,11,19,.08);
}
.unido-topnav-drawer-actions a {
font-family: var(--font-b, 'Inter Tight', sans-serif);
font-style: normal;
font-size: 16px;
font-weight: 600;
text-align: center;
padding: 14px 22px;
border-radius: var(--r-btn, 100px);
border-bottom: none;
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
letter-spacing: -0.005em;
line-height: 1;
transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.unido-topnav-drawer-actions a::after { content: none; }
.unido-topnav-drawer-btn-ghost {
background: #ffffff;
border: 1.5px solid rgba(12,11,19,.18);
color: var(--text, #0c0b13) !important;
}
.unido-topnav-drawer-btn-ghost:hover,
.unido-topnav-drawer-btn-ghost:active {
border-color: var(--text, #0c0b13);
background: rgba(12,11,19,.04);
}
.unido-topnav-drawer-btn-primary {
background: var(--purple, #5b53d9);
color: #fff !important;
border: 1.5px solid var(--purple, #5b53d9);
box-shadow: 0 10px 24px rgba(91,83,217,.28);
}
.unido-topnav-drawer-btn-primary:hover,
.unido-topnav-drawer-btn-primary:active {
transform: translateY(-1px);
box-shadow: 0 14px 30px rgba(91,83,217,.36);
}
.unido-topnav-drawer-btn-primary span[aria-hidden="true"] {
display: inline-block;
transition: transform .18s ease;
}
.unido-topnav-drawer-btn-primary:hover span[aria-hidden="true"] {
transform: translateX(3px);
}
/* Bloque le scroll quand drawer ouvert */
body.unido-topnav-locked { overflow: hidden; }
/* ── Responsive ── */
@media (max-width: 1100px) {
.unido-topnav { padding: 16px 32px; gap: 16px; }
.unido-topnav-links a { padding: 10px 12px; font-size: 13.5px; }
.unido-topnav-cta-light { display: none; }
.unido-topnav-avts { display: none; }
}
@media (max-width: 820px) {
.unido-topnav {
/* Nav mobile : fond BLANC solide qui couvre toute la safe-area.
Le padding-top embarque env(safe-area-inset-top) pour que la nav
s'étende jusqu'en haut physique de l'écran (y compris sous la
notch iPhone) et que le contenu ne transparaisse JAMAIS. */
padding: calc(14px + env(safe-area-inset-top)) 20px 14px !important;
gap: 10px;
min-height: calc(62px + env(safe-area-inset-top));
background: #ffffff !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
border-bottom: 1px solid rgba(12,11,19,.08);
z-index: 150;
}
.unido-topnav-links { display: none !important; }
.unido-topnav-actions { display: none !important; }
.unido-topnav-burger {
display: flex !important;
margin-left: auto;
z-index: 170;
}
.unido-topnav-logo img { height: 28px; }
/* Drawer ouvert : la nav reste BLANCHE pour qu'aucune transparence
ne laisse apparaître le contenu (ceinture + bretelles avec le
drawer full-screen opaque). */
body.unido-topnav-locked .unido-topnav {
background: #ffffff !important;
border-bottom-color: transparent !important;
}
}
/* Filet de sécurité : sur les pages portant UNIDO topnav, on force
html + body en FOND BLANC. C'est critique sur iOS Safari avec
viewport-fit=cover : sinon le body.body (bg --purple Webflow) ou
body.body-6 peint dans la safe-area au-dessus de la nav fixed. */
body.has-unido-topnav {
background-color: #ffffff !important;
overscroll-behavior-y: none;
}
/* Et html sur toutes les pages (simple) — les pages sans topnav
ne sont pas impactées visuellement. */
html { background-color: #ffffff; }
html.has-unido-topnav,
html:has(body.has-unido-topnav) {
background-color: #ffffff !important;
overscroll-behavior-y: none;
}
/* Cache-misère : un pseudo-élément fixé qui couvre TOUTE la zone au-dessus
de la nav (safe-area iOS, overscroll, etc.) en blanc opaque. */
body.has-unido-topnav::before {
content: '';
position: fixed;
top: -200px; left: 0; right: 0;
height: calc(200px + env(safe-area-inset-top));
background: #ffffff;
z-index: 99;
pointer-events: none;
}
/* Spacer : compense la nav fixed quand body porte la classe .has-unido-topnav */
html.has-unido-topnav { scroll-padding-top: 88px; }
body.has-unido-topnav { padding-top: 74px; }
@media (max-width: 820px) {
body.has-unido-topnav { padding-top: calc(66px + env(safe-area-inset-top)); }
}
/* Offset pour tous les targets d'ancrage, pour éviter que la nav fixe
masque le titre de section lorsqu'on navigue via #process, #tarifs, etc. */
.has-unido-topnav [id] { scroll-margin-top: 88px; }
@media (max-width: 820px) {
.has-unido-topnav [id] { scroll-margin-top: 74px; }
}