/* =================================================================== PLEEM — Design system (refonte Claude Design) =================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500&display=swap'); :root{ --teal:#0C7C88; --teal-dark:#0a5f69; --teal-light:#37C0C4; --teal-bright:#16a3ab; --teal-mint:#2ec7c9; --cream:#FBF3EC; --mint-100:#eafafa; --mint-200:#c6ecea; --mint-300:#a9e8e6; --mint-400:#5fd6d8; --mint-500:#3bc4c6; --border-mint:#cfe9e7; --border-mint-2:#d9ecec; --border-mint-3:#eef6f5; --border-input:#b6d6d9; --text-body:#2f4a4f; --text-muted:#5b757a; --text-dark:#12333a; --green-1:#9fd88a; --green-2:#7cc76a; --green-3:#4aa832; --green-4:#3aa14a; --footer-teal:#1aa7ae; --footer-dark:#3e3e3e; --radius-lg:24px; --radius-md:16px; --shadow-soft:0 20px 50px rgba(12,124,136,.14); --shadow-card:0 16px 40px rgba(12,124,136,.12); } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;font-family:'Raleway',sans-serif;color:var(--text-body);background:#fff;-webkit-font-smoothing:antialiased;overflow-x:hidden} h1,h2,h3,h4{font-family:'Raleway',sans-serif;margin:0;line-height:1.08} p{margin:0} a{color:var(--teal);text-decoration:none} a:hover{color:var(--teal-dark)} button{font-family:'Raleway',sans-serif} img{max-width:100%;display:block} ul{margin:0} ::selection{background:#a9e8e6} input::placeholder,textarea::placeholder{color:#6f8f93;opacity:1} input:focus,textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(12,124,136,.18)} .container{max-width:1160px;margin:0 auto;padding:0 32px} .container--md{max-width:1060px;margin:0 auto;padding:0 32px} .container--sm{max-width:900px;margin:0 auto;padding:0 32px} /* --------------------------------------------------------------- HEADER --------------------------------------------------------------- */ .site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--border-mint-3);box-shadow:0 4px 20px rgba(12,124,136,.06)} /* v2 fixe max-width:1200px, mais le contenu du header en réclame 1201 (hors padding) : la barre se replierait sur 2 lignes à toute largeur. On élargit le seul conteneur — toutes les valeurs typographiques v2 sont conservées. */ .site-header__inner{max-width:1280px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:22px;flex-wrap:wrap} .site-header__logo{cursor:pointer;height:40px;width:auto;object-fit:contain;flex:0 0 auto} .main-nav{display:flex;gap:26px;align-items:center;flex-wrap:wrap;margin-left:8px} .main-nav a{font-size:15px;padding:4px 0;color:#5b7a80;font-weight:700;border-bottom:2px solid transparent;transition:color .15s,border-color .15s;white-space:nowrap} .main-nav a:hover{color:var(--teal)} .main-nav a.is-active{color:var(--teal);font-weight:800;border-bottom-color:var(--teal)} .header-actions{margin-left:auto;display:flex;align-items:center;gap:16px} .social-icons{display:flex;gap:8px} .social-icons a{width:32px;height:32px;border-radius:50%;background:var(--teal);display:flex;align-items:center;justify-content:center;transition:background .15s} .social-icons a:hover{background:var(--teal-light)} /* Sélecteur de langue —
natif : ouverture au clic, accessible au clavier, fonctionne sans JavaScript. */ .lang-switch{position:relative;flex:0 0 auto} .lang-switch__toggle{display:flex;align-items:center;gap:6px;border:1px solid var(--border-mint-2);border-radius:20px;padding:5px 12px;font-weight:700;font-size:13px;color:var(--text-body);background:#fff;cursor:pointer;list-style:none;user-select:none;transition:border-color .15s,color .15s,box-shadow .15s} .lang-switch__toggle::-webkit-details-marker{display:none} .lang-switch__toggle::marker{content:''} .lang-switch__toggle:hover{border-color:var(--teal);color:var(--teal)} .lang-switch[open] .lang-switch__toggle{border-color:var(--teal);color:var(--teal);box-shadow:0 0 0 3px rgba(12,124,136,.12)} .lang-flag{width:20px;height:14px;border-radius:2px;object-fit:cover;display:block;flex:0 0 auto;box-shadow:0 0 0 1px rgba(0,0,0,.06)} .lang-switch__caret{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;transition:transform .15s} .lang-switch[open] .lang-switch__caret{transform:rotate(180deg)} .lang-switch__menu{position:absolute;top:calc(100% + 8px);right:0;min-width:168px;background:#fff;border:1px solid var(--border-mint-2);border-radius:14px;box-shadow:0 16px 34px rgba(12,124,136,.18);padding:6px;margin:0;list-style:none;z-index:60} .lang-switch__menu li{list-style:none} .lang-switch__menu a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;font-size:14px;font-weight:700;color:var(--text-body);white-space:nowrap} .lang-switch__menu a:hover{background:var(--mint-100);color:var(--teal)} .lang-switch__menu a.is-current{background:var(--border-mint-3);color:var(--teal)} .mobile-toggle{display:none;background:none;border:none;cursor:pointer;padding:6px;margin-left:auto} .mobile-toggle span{display:block;width:24px;height:2px;background:var(--teal);margin:5px 0;border-radius:2px} /* --------------------------------------------------------------- BUTTONS --------------------------------------------------------------- */ .btn{display:inline-flex;align-items:center;gap:8px;border:none;border-radius:30px;padding:16px 34px;font-size:16px;font-weight:800;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,background .2s ease,color .2s ease} .btn--white{background:#fff;color:var(--teal);box-shadow:0 10px 24px rgba(0,0,0,.14)} .btn--white:hover{background:var(--teal);color:#fff;box-shadow:0 16px 34px rgba(0,0,0,.24);transform:translateY(-3px) scale(1.04)} .btn--solid{background:var(--teal);color:#fff;box-shadow:0 10px 24px rgba(12,124,136,.24)} .btn--solid:hover{background:var(--teal-dark)} .btn--outline{background:#fff;border:2px solid var(--teal);color:var(--teal);padding:11px 26px;font-size:15px;border-radius:24px} .btn--outline:hover{background:var(--teal);color:#fff} /* Bouton aux couleurs du produit courant : la slide porte --scent, le bouton s'y accorde. Au survol, fond de la senteur et texte blanc. Le repli sur --teal garde le bouton correct si --scent n'est pas défini. */ .btn--scent{color:var(--scent,var(--teal));border-color:var(--scent,var(--teal))} .btn--scent:hover{background:var(--scent,var(--teal));border-color:var(--scent,var(--teal));color:#fff} .pill-badge{display:inline-block;background:#fff;color:var(--teal);border:1.5px solid var(--border-mint);border-radius:26px;padding:12px 24px;font-weight:800;box-shadow:0 8px 20px rgba(12,124,136,.10)} /* Paire de CTA de fin de page : côte à côte, empilés dès que la place manque. */ .cta-pair{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;margin-top:56px} .cta-pair .btn{text-align:center} .carousel-nav-btn{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--border-mint);background:#fff;color:var(--teal);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s,transform .15s,box-shadow .15s} .carousel-nav-btn:hover{background:var(--teal);color:#fff;transform:scale(1.08);box-shadow:0 8px 20px rgba(12,124,136,.22)} .carousel-nav-btn:active{transform:scale(.92)} .carousel-dot{width:11px;height:11px;border-radius:50%;border:none;padding:0;cursor:pointer;background:var(--border-mint);transition:background .2s,transform .2s} .carousel-dot.is-active{background:var(--scent,var(--teal));transform:scale(1.3)} /* --------------------------------------------------------------- HERO (per-page background set inline via style attr) --------------------------------------------------------------- */ .hero{position:relative;padding:74px 0 150px;overflow:hidden;background-size:cover;background-position:center top;background-repeat:no-repeat} .hero__grid{max-width:1160px;margin:0 auto;padding:0 32px;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:40px;align-items:center;position:relative;z-index:1} .hero__grid--even{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:36px} .hero__media{position:relative;height:400px} .hero__media--sm{height:320px} .hero__logo{height:120px;width:auto;object-fit:contain;margin-bottom:24px} .hero__title{font-size:clamp(28px,5vw,40px);font-weight:700;max-width:460px;text-shadow:0 3px 14px rgba(0,0,0,.1)} .hero__spacer{height:32px} .hero__title--sm{font-size:clamp(27px,5vw,38px)} .hero__text{margin:20px 0 32px;max-width:430px;font-size:17px;line-height:1.5} .wave-bottom{position:absolute;bottom:-1px;left:0;width:100%;height:70px;display:block} .wave-bottom--tall{height:80px} .hero--center{text-align:center;color:#fff} .hero--center h1{font-size:clamp(34px,6vw,52px);text-shadow:0 3px 14px rgba(0,0,0,.12)} .hero--center p{font-size:19px;opacity:.95;margin-top:14px} /* --------------------------------------------------------------- SECTIONS --------------------------------------------------------------- */ .section{padding:70px 0 80px} .section--cream{background:var(--cream)} .section--mint{background:var(--mint-200)} .section-title{text-align:center;color:var(--teal);font-size:clamp(26px,4.6vw,36px);margin-bottom:38px} /* Entrée de champ, reprise des réglages du pleem.fr actuel (Divi « slideLeft » : 1 s, ease-in-out, opacité 0, intensité 50%). Le cadre masque le débordement pour qu'aucun scroll horizontal n'apparaisse pendant le glissement. « is-armed » n'est posé par le JS que sur un titre hors champ : sans JS, en mouvement réduit ou si l'observer manque, le titre reste simplement lisible. */ .reveal-frame{overflow:hidden} .reveal-slide-left.is-armed{opacity:0;transform:translateX(-50%)} .reveal-slide-left.is-revealed{animation:revealSlideLeft 1s ease-in-out both} @keyframes revealSlideLeft{from{opacity:0;transform:translateX(-50%)}to{opacity:1;transform:translateX(0)}} .section-title--lg{font-size:clamp(27px,5vw,38px)} .section-title--sm{font-size:clamp(24px,4.2vw,32px)} /* Image slot -> plain figure wrapper */ .media-frame{position:relative;height:100%;width:100%;border-radius:var(--radius-md);overflow:hidden} .media-frame img{width:100%;height:100%;object-fit:contain;display:block} .media-frame--cover img{object-fit:cover} .media-frame--r12{border-radius:12px} .media-frame--r18{border-radius:18px} /* --------------------------------------------------------------- VIDEO BLOCK --------------------------------------------------------------- */ .video-band{background:#3ec9cb;padding:44px 0 56px} .video-block{position:relative;border-radius:22px;overflow:hidden;box-shadow:0 24px 60px rgba(12,124,136,.18);aspect-ratio:16/9;background:#111} .video-block img{width:100%;height:100%;object-fit:cover} .video-block__player{display:block;width:100%;height:100%;object-fit:cover} /* Plein ecran "element" (iPad, desktop) : le cadre 16/9 du site ne s'applique plus, donc `cover` rognerait l'image. `contain` la letterboxe correctement. Ces regles ne peuvent gagner que parce que la video porte une classe et non des styles inline. Sans effet sur iPhone, qui bascule sur le lecteur natif du systeme. */ .video-block__player:fullscreen,.video-block__player:-webkit-full-screen{object-fit:contain;background:#000} .video-block__play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none} .video-block__play-circle{width:88px;height:88px;border-radius:50%;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 30px rgba(0,0,0,.4)} .video-block__play-triangle{width:0;height:0;border-left:26px solid #fff;border-top:16px solid transparent;border-bottom:16px solid transparent;margin-left:6px} .video-block__caption{position:absolute;left:0;right:0;bottom:26px;text-align:center;color:#fff;font-weight:800;font-size:18px;text-shadow:0 2px 8px rgba(0,0,0,.4);pointer-events:none} /* --------------------------------------------------------------- CAROUSEL — scents / net products --------------------------------------------------------------- */ .carousel-grid{position:relative} .carousel-slide{display:none;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:40px;align-items:center} .carousel-slide.is-active{display:grid} .carousel-slide--net{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))} .carousel-media{height:340px;position:relative;min-width:0} .carousel-media--sm{height:300px} /* Pas de fond ni de padding : les packshots nettoyants (pack-*.webp) ont un vrai canal alpha, la carte grise plaquée derrière (#f4f6f7) se voyait à travers leurs zones transparentes — ce que Thomas nous a fourni ces sources avec alpha précisément pour éviter. */ .carousel-media--net{height:300px} .carousel-card{background:#fff;border-radius:var(--radius-lg);padding:34px 38px;box-shadow:var(--shadow-soft);border:1px solid var(--border-mint-3);min-width:0} .carousel-card__badge{display:inline-block;color:#fff;font-weight:800;font-size:16px;padding:10px 26px;border-radius:22px} .carousel-card__title{font-size:20px;margin:22px 0 8px} .carousel-card__text{color:var(--text-muted);line-height:1.55;font-size:15px} .carousel-card__label{font-weight:800;margin:22px 0 8px;font-size:15px} .carousel-card__flowers{display:flex;gap:8px;font-size:20px} .carousel-card__flowers span{opacity:.25} .carousel-card__formats{display:flex;gap:10px;flex-wrap:wrap} .format-chip{border:1.5px solid var(--border-mint);font-weight:700;padding:7px 16px;border-radius:20px;font-size:14px} .carousel-card__steps{color:var(--text-muted);line-height:1.7;font-size:15px;padding-left:18px;margin:0 0 16px} .carousel-card__cta{margin-top:24px} .carousel-card__actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px} .carousel-controls{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:34px} .carousel-dots{display:flex;gap:10px} /* Entrée de slide — un fondu sur l'ensemble, le produit qui glisse vers la droite (128px) et le bloc de texte qui monte (64px). Même traitement quel que soit le sens de navigation : c'est le calme qui est recherché, pas la lecture d'une direction. Courbe volontairement PAS en ease-out-expo (essayé puis abandonné) : une expo écrase tout le mouvement dans les premiers 30-40% du temps et arrive déjà figée bien avant la fin — la fin ne peut alors plus « ralentir » puisqu'il n'y a plus rien à y ralentir. La courbe actuelle répartit la décélération sur toute la durée (encore ~15% de la distance parcourue entre 80% et 100% du temps), donc le mouvement est visiblement encore en train de finir jusqu'au bout. Le fondu (2.8s) dure bien plus longtemps que la mise en place du produit et du texte (~1.4s) : une fois tout en place, l'ensemble continue de « monter depuis le blanc » encore plus d'une seconde — c'est ce prolongement qui rend le fondu perceptible, pas sa vitesse. */ @keyframes carouselFadeIn{from{opacity:0}to{opacity:1}} @keyframes carouselMediaIn{from{opacity:0;transform:translateX(-128px)}to{opacity:1;transform:translateX(0)}} @keyframes carouselCardIn{from{opacity:0;transform:translateY(64px)}to{opacity:1;transform:translateY(0)}} .carousel-slide.anim-in{animation:carouselFadeIn 2.8s ease both} .carousel-slide.anim-in .carousel-media{animation:carouselMediaIn 1.4s cubic-bezier(.25,.46,.45,.94) both} .carousel-slide.anim-in .carousel-card{animation:carouselCardIn 1.4s .1s cubic-bezier(.25,.46,.45,.94) both} .carousel-media img{transition:transform .4s ease} .carousel-media:hover img{transform:scale(1.035)} /* cursor-following prev/next arrow over the carousel image */ .carousel-media.js-cursor-nav{cursor:none} .carousel-cursor-arrow{position:absolute;top:0;left:0;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:rgba(255,255,255,.94);box-shadow:0 12px 30px rgba(12,124,136,.28);display:flex;align-items:center;justify-content:center;color:var(--teal);pointer-events:none;z-index:5;opacity:0;transform:scale(.6);transition:opacity .18s ease,transform .18s ease} .carousel-cursor-arrow.is-visible{opacity:1;transform:scale(1)} .carousel-cursor-arrow svg{width:20px;height:20px;transition:transform .15s ease} .carousel-cursor-arrow.is-prev svg{transform:rotate(180deg)} .new-badge{position:absolute;top:8px;right:8px;width:70px;height:70px;border-radius:50%;background:#f3c206;color:var(--teal);display:flex;align-items:center;justify-content:center;text-align:center;font-weight:800;font-size:13px;line-height:1.1;transform:rotate(-14deg);box-shadow:0 6px 16px rgba(0,0,0,.22);z-index:2} .composition-block{margin-top:20px;padding-top:18px;border-top:1px solid var(--border-mint-3)} .composition-block__label{font-weight:800;font-size:14px;margin-bottom:8px} .composition-block__list{color:var(--text-muted);line-height:1.6;font-size:13.5px;padding-left:18px;margin:0 0 8px} .composition-block__parfums{color:var(--text-muted);font-size:13px;line-height:1.5} /* --------------------------------------------------------------- AVANTAGES --------------------------------------------------------------- */ .avantages-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:34px} .avantage{text-align:center} .avantage__media{width:190px;height:190px;margin:0 auto 22px;position:relative;border-radius:50%;overflow:hidden;box-shadow:0 16px 40px rgba(12,124,136,.18);border:6px solid #fff} .avantage__media img{width:100%;height:100%;object-fit:cover} .avantage h3{color:var(--teal);font-size:21px;margin-bottom:10px} .avantage p{color:var(--text-muted);line-height:1.55;font-size:14.5px;max-width:300px;margin:0 auto} /* --------------------------------------------------------------- FACILE (2 method cards) --------------------------------------------------------------- */ .method-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:26px} .method-card{background:#fff;border-radius:22px;padding:32px 34px;box-shadow:var(--shadow-card)} .method-card img{width:74px;height:74px;object-fit:contain;margin-bottom:14px} .method-card h3{color:var(--teal);font-size:22px;margin-bottom:14px} .method-card ul{color:var(--text-muted);line-height:1.7;font-size:15px;padding-left:18px} /* --------------------------------------------------------------- SURDOSAGE / QUALITE bands --------------------------------------------------------------- */ /* position:relative indispensable : la .wave-bottom de cette section est en position:absolute. Sans ancêtre positionné, elle se calait sur le bloc conteneur initial — donc à une hauteur de fenêtre du haut du document, en pleine liste presse, où sa couleur (#a9e8e6, celle du fond de section) la rendait invisible sauf là où elle recouvrait du contenu : elle tranchait le haut du logo IFA. Comme sa position dépendait de la hauteur de la fenêtre, le défaut apparaissait sous Firefox et pas sous Chrome. */ .band{position:relative;padding:76px 32px;text-align:center;color:#fff;background:linear-gradient(160deg,var(--teal-mint),var(--teal-bright))} .band h2{color:#fff;font-size:clamp(28px,5vw,40px)} .band .lead{color:#fff;opacity:.95;font-weight:800;font-size:20px;margin:14px 0 16px} .band .sub{color:#fff;opacity:.95;max-width:560px;margin:0 auto;font-size:16px;line-height:1.6} .band--sm{padding:70px 32px} .band--sm h2{font-size:clamp(27px,5vw,38px)} .band--sm .lead{font-size:19px;margin:14px 0 14px} .band--sm .sub{max-width:540px;line-height:1.55} .quality{background:#fff;padding:66px 32px;text-align:center;color:var(--teal)} .quality h2{font-size:clamp(25px,4.4vw,34px);color:var(--teal)} .quality--sm{padding:60px 32px} .quality--sm h2{font-size:clamp(24px,4.2vw,32px)} .quality--sm p{margin:14px auto 26px} .quality p{opacity:.95;max-width:640px;margin:16px auto 30px;font-size:16px} .cert-list{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;max-width:760px;margin:0 auto} .cert-chip{background:#f4fbfa;border:1px solid var(--border-mint);color:var(--teal);padding:10px 20px;border-radius:22px;font-weight:700;font-size:14px} /* --------------------------------------------------------------- COMPOSITION (2 alternating rows) --------------------------------------------------------------- */ .compo-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:44px;align-items:center;margin-bottom:56px} .compo-row:last-child{margin-bottom:0} .compo-row h3{color:var(--teal);margin-bottom:18px} .compo-row ul{color:var(--text-muted);line-height:1.8;font-size:15px;padding-left:18px} .compo-row p{color:var(--text-muted);line-height:1.6;font-size:15px;margin-bottom:22px} .compo-media{height:280px;position:relative;border-radius:var(--radius-md);overflow:hidden} .compo-media img{width:100%;height:100%;object-fit:cover} .eco-icons{display:flex;gap:26px;margin-bottom:22px} .eco-icon{width:64px;height:64px;border-radius:50%;background:#e6f7f6;display:flex;align-items:center;justify-content:center;color:var(--teal);font-weight:800;font-size:22px} /* --------------------------------------------------------------- COMMENT ÇA MARCHE — usage cards --------------------------------------------------------------- */ .usage-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:30px} .usage-card{background:#fff;border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 16px 40px rgba(12,124,136,.10);border:1px solid var(--border-mint-3);display:flex;flex-direction:column} .usage-card__media{position:relative;aspect-ratio:4/5;overflow:hidden} .usage-card__media img{width:100%;height:100%;object-fit:cover;display:block} .usage-card__body{padding:24px 26px 30px;display:flex;flex-direction:column;gap:16px} .usage-tag{display:inline-block;color:#fff;font-weight:800;font-size:13px;letter-spacing:.6px;text-transform:uppercase;padding:6px 16px;border-radius:20px;margin-bottom:12px} .usage-card__body h3{color:var(--text-dark);font-size:21px;line-height:1.3} .usage-steps{display:flex;flex-direction:column;gap:13px} .usage-step{display:flex;gap:13px;align-items:flex-start} .usage-step__num{flex:0 0 26px;height:26px;border-radius:50%;color:#fff;font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;margin-top:1px} .usage-step p{color:var(--text-muted);line-height:1.55;font-size:15px} /* --------------------------------------------------------------- QUI SOMMES-NOUS --------------------------------------------------------------- */ /* Le bas réserve la hauteur de la vague (80px) + une marge, sinon la ligne « Réduisons notre empreinte carbone » vient buter dessus et paraît tronquée. */ .hero-qui{position:relative;padding:clamp(110px,16vw,210px) 32px clamp(130px,14vw,170px);text-align:center;overflow:hidden;background:linear-gradient(160deg,var(--green-1),var(--green-2))} /* Feuilles purement décoratives : elles restent DERRIÈRE le contenu (z-index 0 contre 2) — auparavant, positionnées et donc peintes au-dessus du texte statique, elles recouvraient le logo, le titre et la baseline. */ .hero-qui img.leaf{position:absolute;z-index:0;pointer-events:none;height:auto} .hero-qui .leaf--top{top:30px;left:55%;width:190px;transform:rotate(200deg)} .hero-qui .leaf--bottom{bottom:70px;left:15%;width:240px;transform:rotate(-14deg)} .hero-qui__content{position:relative;z-index:2} .hero-qui__logo{width:470px;max-width:80%;height:auto;object-fit:contain;margin:0 auto} .hero-qui h2{color:#1f5b6b;font-size:clamp(19px,3.4vw,24px);letter-spacing:1px;margin-top:20px} .hero-qui p{color:#14474a;font-size:17px;margin-top:8px} .founder{background:var(--cream);padding:54px 32px} .founder__inner{max-width:1040px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:44px;align-items:center} .founder__media{height:240px;position:relative;border-radius:var(--radius-md);overflow:hidden} .founder__media img{width:100%;height:100%;object-fit:cover} .founder h2{color:var(--green-4);font-size:44px} .safegreen-block{background:var(--green-3);padding:66px 32px;color:#fff} .safegreen-block__inner{max-width:920px;margin:0 auto;border-top:1px solid rgba(255,255,255,.4);border-bottom:1px solid rgba(255,255,255,.4);padding:34px 0} .safegreen-block h3{font-size:30px;letter-spacing:1px;margin-bottom:18px} .safegreen-block p{line-height:1.7;font-size:16px;opacity:.96} /* --------------------------------------------------------------- PAGES JURIDIQUES (politique de protection des données / mentions légales) --------------------------------------------------------------- */ .legal-content{padding:60px 0 100px} .legal-content h2{color:var(--teal);font-size:20px;margin:46px 0 14px} .legal-content h2:first-child{margin-top:0} .legal-content p{color:var(--text-muted);line-height:1.75;font-size:15.5px;margin-bottom:16px} .legal-content p:last-child{margin-bottom:0} .legal-content a{text-decoration:underline} /* --------------------------------------------------------------- PRESSE --------------------------------------------------------------- */ .press-intro h2{color:var(--teal);font-size:26px;margin-bottom:14px} .press-intro p{color:#357c82;line-height:1.6;font-size:15px;margin-bottom:44px;max-width:720px} .press-list{display:flex;flex-direction:column;gap:40px} .press-item{display:flex;gap:34px;align-items:center} .press-item.is-reverse{flex-direction:row-reverse} .press-item__photo{flex:0 0 260px;height:180px;position:relative;background:#fff;border-radius:16px;padding:8px;box-shadow:0 10px 26px rgba(12,124,136,.16);overflow:hidden} .press-item__photo img{width:100%;height:100%;object-fit:cover;border-radius:10px} .press-item__body{flex:1} .press-item__body img{height:46px;width:auto;max-width:210px;object-fit:contain;margin-bottom:14px;display:block} .press-item__body h3{color:var(--teal);font-size:18px;margin-bottom:8px} .press-item__body p{color:#3a6b70;line-height:1.55;font-size:14.5px;margin-bottom:16px} /* Le CTA presse est un