/* ========================================================= COMMITTED LEADERS - Maquette Home page Structure : plan client en 12 blocs (doc "Textes nouveau site_Home page") Palette : noir / or champagne / blanc Display: Archivo | Texte: Hanken Grotesk ========================================================= */ /* --------------------------------------------------------- PALETTE D'ACCENT - pilotée par [data-palette] sur --gold : aplats (boutons, surlignages, filets, barres) --gold-deep : etat survol de l'aplat --bronze : texte d'accent sur fond clair (doit rester lisible) --teal : accent sur fond sombre --teal-text : texte d'accent sur fond clair (= --bronze) Un jaune vif ne peut pas servir de couleur de texte sur blanc (contraste ~1.5:1) : sur les palettes vives le texte d'accent passe en noir, et le jaune ne s'exprime qu'en aplat et en surlignage. --------------------------------------------------------- */ html[data-palette="jaune"]{ /* #FFD62E - le jaune a tester */ --gold:#FFD62E; --gold-deep:#F0C400; --bronze:#121212; --teal:#FFD62E; --teal-text:#121212; } html[data-palette="marque"]{ /* le jaune du logo Committed Leaders */ --gold:#FBD600; --gold-deep:#E4C000; --bronze:#121212; --teal:#FBD600; --teal-text:#121212; } html[data-palette="ambre"]{ /* jaune d'or plus chaud, sans virer a l'ocre */ --gold:#FFC21A; --gold-deep:#E8A900; --bronze:#121212; --teal:#FFC21A; --teal-text:#121212; } html[data-palette="champagne"]{ /* la version precedente, pour comparaison */ --gold:#C2A24C; --gold-deep:#A6863A; --bronze:#876A2A; --teal:#C2A24C; --teal-text:#876A2A; } :root{ --ink:#121212; /* noir profond */ --ink-soft:#1E1E1C; --paper:#FFFFFF; /* blanc */ --paper-2:#F5F4F1; /* blanc cassé tres leger - cartes / sections alternées */ --gold:#FFC21A; /* defaut = palette "ambre", retenue par la cliente */ --gold-deep:#E8A900; --bronze:#121212; --teal:#FFC21A; --teal-text:#121212; --teal-deepbg:#1B1813; /* espresso profond pour fonds */ --muted:#5A554B; /* texte secondaire chaud */ --line:rgba(18,18,18,.12); --display:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --body:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --serif:"Instrument Serif",Georgia,"Times New Roman",serif; /* accent italique du hero (PPT p.19) */ --maxw:1240px; --gut:clamp(20px,5vw,72px); --r:16px; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ font-family:var(--body); background:var(--paper); color:var(--ink); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)} /* décalage d'ancre : le menu collant ne recouvre pas le titre visé */ section[id]{scroll-margin-top:96px} /* ---------- Typo utilitaire ---------- */ .eyebrow{ font-family:var(--body); font-size:.74rem;letter-spacing:.2em;text-transform:uppercase; font-weight:700;color:var(--bronze); display:inline-flex;align-items:center;gap:.7em; } /* filet arrondi : meme traitement que les separateurs du bloc 1 (demande cliente) */ .eyebrow::before{content:"";width:24px;height:3px;border-radius:3px;background:var(--gold);display:inline-block} .eyebrow.on-dark{color:var(--gold)} .eyebrow.on-dark::before{background:var(--gold)} /* Surlignage jaune sous un mot : une barre AUX BOUTS ARRONDIS, comme les filets du bloc 1 (demande cliente : "des arrondis partout"). Un background-image ne peut pas etre arrondi, on passe donc par un ::after. isolation:isolate cree un contexte d'empilement local : sans lui, le z-index negatif ferait passer la barre derriere le fond de la section. */ .constat h2 em,.banner-quote em{font-style:normal;color:var(--teal-text); position:relative;isolation:isolate;white-space:nowrap} .constat h2 em::after,.banner-quote em::after{content:"";position:absolute;z-index:-1; left:-.05em;right:-.05em;bottom:.12em;height:.17em;border-radius:99px;background:var(--gold)} h1,h2,h3{font-family:var(--display);font-weight:800;line-height:1.02;letter-spacing:-.03em} h2{font-size:clamp(2rem,4.6vw,3.4rem)} h3{font-size:1.3rem;font-weight:700;letter-spacing:-.02em} .lead{font-family:var(--body);font-size:clamp(1.05rem,1.6vw,1.26rem);color:var(--muted);max-width:46ch;line-height:1.55} .section{padding:clamp(52px,7.5vw,96px) 0} /* Lien contextuel optimisé (ancre riche en mots-clés). Ces ancres ont une vocation SEO plus qu'une vocation de navigation : elles doivent rester identifiables sans attirer l'oeil. Le lien prend donc la couleur et la graisse du texte courant, signalé par un simple filet fin ; le jaune n'apparait qu'au survol. Le soulignement (indicateur non colorimetrique) est conservé : sans lui, le lien ne serait plus perceptible par un daltonien. */ .lk{color:inherit;font-weight:inherit; border-bottom:1px solid rgba(18,18,18,.32); transition:color .2s ease,border-color .2s ease} .lk:hover{color:var(--ink);border-bottom-color:var(--gold-deep)} .lk.on-dark{color:inherit;border-bottom-color:rgba(255,255,255,.34)} .lk.on-dark:hover{color:var(--paper);border-bottom-color:var(--gold)} /* ---------- Lien "rond avec fleche" ---------- Motif retenu par la cliente (PPT "les trucs que j'aime bien"), applique partout : cartes d'offres, verbatim, galerie. Sur les cartes il porte seul le lien (intitule donne aux lecteurs d'ecran par aria-label) ; ailleurs il accompagne l'intitule, qui reste l'ancre utile au referencement. */ .more{display:inline-flex;align-items:center;gap:.8rem;margin-top:.2rem} .rnd{width:36px;height:36px;flex:0 0 auto;border-radius:50%; border:1.5px solid var(--line);background:var(--paper);color:var(--ink); display:inline-flex;align-items:center;justify-content:center; font-size:1.02rem;line-height:1; transition:background .3s ease,border-color .3s ease,transform .3s ease} .more:hover .rnd,.offre:hover .rnd{background:var(--gold);border-color:var(--gold);transform:translateX(3px)} .more:hover .lk{border-bottom-color:var(--gold-deep)} /* ---------- Boutons ---------- */ .btn{ display:inline-flex;align-items:center;gap:.6em; font-family:var(--body);font-weight:700;font-size:.98rem; padding:1rem 1.7rem;border-radius:10px;border:2px solid transparent; cursor:pointer;transition:transform .25s ease,background .25s ease,color .25s ease,border-color .25s; } .btn .arr{transition:transform .25s ease} .btn:hover .arr{transform:translateX(4px)} .btn-primary{background:var(--gold);color:var(--ink)} .btn-primary:hover{background:var(--gold-deep);transform:translateY(-2px)} .btn-ghost{background:transparent;border-color:var(--ink);color:var(--ink)} .btn-ghost:hover{background:var(--ink);color:var(--paper);transform:translateY(-2px)} .btn-ghost.on-dark{border-color:rgba(255,255,255,.4);color:var(--paper)} .btn-ghost.on-dark:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)} /* ============== NAV ============== */ header.nav{ position:sticky;top:0;z-index:50; background:rgba(255,255,255,.86);backdrop-filter:blur(12px); border-bottom:1px solid var(--line); } .nav-in{display:flex;align-items:center;justify-content:space-between;height:78px;gap:1rem} .brand-logo{height:34px;width:auto} /* meme taille de texte que le bouton (.98rem), gap resserré pour loger 6 entrées */ .nav-links{display:flex;gap:1.45rem;align-items:center} .nav-links a{font-size:1.02rem;font-weight:600;color:var(--ink);transition:color .2s,box-shadow .2s; padding-bottom:2px} .nav-links a:hover{box-shadow:inset 0 -2px 0 var(--gold)} .burger{display:none;background:none;border:none;cursor:pointer;font-size:1.5rem;color:var(--ink)} /* ============== 1. HERO ============== Mise en page reprise du test choisi par la cliente (PPT p.15) : photo pleine largeur en fond, titre centré ("potentiel" en jaune), ligne des trois métiers separee par des filets, et bouton blanc a bords arrondis. */ .hero{ position:relative;isolation:isolate;overflow:hidden; min-height:clamp(540px,80vh,790px); display:flex;align-items:center;justify-content:center; text-align:center;color:var(--paper);background:var(--ink); } .hero-bg{position:absolute;inset:0;z-index:-2} .hero-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 42%; filter:brightness(1.1) contrast(1.03)} /* Photo eclaircie au maximum a la demande de la cliente (on doit distinguer le cheval). Le voile uniforme est remplace par un halo concentré derriere le texte : les bords de la photo restent clairs, le titre garde son contraste. Meme principe que le CTA final. */ .hero::after{content:"";position:absolute;inset:0;z-index:-1; background: radial-gradient(ellipse 74% 62% at 50% 48%, rgba(18,18,18,.56), rgba(18,18,18,.06) 78%), linear-gradient(rgba(18,18,18,.14),rgba(18,18,18,.24))} .hero .wrap{position:relative;z-index:2; padding-top:clamp(52px,8vw,90px);padding-bottom:clamp(52px,8vw,90px)} .hero h1{font-size:clamp(2.2rem,5.6vw,4.3rem);font-weight:900; margin:0 auto 1.45rem;max-width:16ch;color:var(--paper); text-shadow:0 2px 30px rgba(0,0,0,.35)} .hero h1 .hl{color:var(--gold)} /* (Équi)coaching | formation | facilitation - filets jaunes en separateurs */ .hero-services{display:flex;flex-wrap:wrap;align-items:center;justify-content:center; gap:.5rem 1.2rem;margin:0 0 clamp(28px,4vw,44px); font-family:var(--body);font-weight:500; font-size:clamp(1rem,1.9vw,1.5rem);color:rgba(255,255,255,.95); text-shadow:0 1px 16px rgba(0,0,0,.4)} .hero-services span{display:inline-flex;align-items:center;gap:1.2rem} .hero-services span::after{content:"";width:3px;height:1.1em; background:var(--gold);border-radius:2px} .hero-services span:last-child::after{display:none} .hero-cta{ display:inline-flex;align-items:center; background:var(--paper);color:var(--ink); font-family:var(--body);font-weight:700;font-size:clamp(1rem,1.3vw,1.1rem); padding:1.05rem 2.5rem;border-radius:14px; /* bords arrondis demandés */ box-shadow:0 22px 46px -22px rgba(0,0,0,.62); transition:transform .25s ease,box-shadow .25s ease; } .hero-cta:hover{transform:translateY(-3px);box-shadow:0 28px 52px -22px rgba(0,0,0,.68)} @media(max-width:640px){ .hero{min-height:clamp(460px,72vh,600px)} .hero-cta{padding:.95rem 1.9rem} } /* ============== 2. CONSTAT + RÉPONSE ============== */ .constat{background:var(--paper);padding:clamp(64px,9vw,118px) 0} .constat-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(30px,5vw,76px);align-items:start} .constat h2{max-width:15ch;margin-top:.7rem} .constat h2 em{font-style:normal;color:var(--teal-text);white-space:nowrap} .constat-body p{color:var(--muted);font-size:clamp(1rem,1.25vw,1.09rem);line-height:1.65;margin-bottom:1.05rem;max-width:58ch} .constat-body p b{color:var(--ink);font-weight:700} /* symptomes : liste sobre (les anciennes pastilles arrondies passaient pour des boutons) */ .constat-symp{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem 1.8rem;margin-bottom:1.7rem;max-width:52ch} .constat-symp li{position:relative;padding-left:1.5rem;font-size:1rem;font-weight:600;color:var(--ink)} /* puce en slash : motif retenu par la cliente (PPT "les trucs que j'aime bien") */ .constat-symp li::before{content:"/";position:absolute;left:0;top:0; font-family:var(--display);font-weight:800;color:var(--gold-deep)} @media(max-width:560px){.constat-symp{grid-template-columns:1fr}} /* La phrase entiere en noir : le selecteur ".constat-body p" (0,2,1) l'emportait sur ".constat-punch" (0,1,0), la phrase heritait donc du gris et seul le ressortait en noir. Le selecteur est aligne pour que toute la phrase soit foncee. */ .constat-body p.constat-punch{font-family:var(--display);font-weight:800;font-size:clamp(1.2rem,2.1vw,1.62rem); line-height:1.2;letter-spacing:-.02em;color:var(--ink); position:relative;padding:.15rem 0 .15rem 1.15rem;margin-top:1.7rem;max-width:44ch} /* barre verticale aux bouts arrondis, comme les filets du bloc 1 */ .constat-punch::before{content:"";position:absolute;left:0;top:0;bottom:0; width:4px;border-radius:4px;background:var(--gold)} .constat-punch b{color:var(--ink);font-weight:800} /* ============== 3. CLIENTS (bandeau logos) ============== */ .clients{background:var(--paper-2);text-align:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line); padding:clamp(54px,7vw,86px) 0} .clients h2{font-size:clamp(1.5rem,2.7vw,2.15rem);margin:.7rem auto 0;max-width:26ch} .logo-marquee{overflow:hidden;margin-top:clamp(30px,4vw,48px); -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)} .logo-track{display:flex;width:max-content;animation:scroll-logos 34s linear infinite} .logo-marquee:hover .logo-track{animation-play-state:paused} .logo-set{display:flex;align-items:center;gap:clamp(46px,7vw,88px);padding-right:clamp(46px,7vw,88px)} /* logos en couleur, fond transparent. Hauteur ajustée au format pour egaliser la presence optique : un logo carré doit monter plus haut qu'un wordmark large pour peser autant a l'oeil. */ .logo-track img{width:auto;object-fit:contain;transition:transform .35s ease; height:clamp(30px,3.2vw,40px)} /* wordmarks larges */ .logo-track img.l-md{height:clamp(36px,3.8vw,47px)} /* formats intermediaires */ .logo-track img.l-sq{height:clamp(44px,4.7vw,58px)} /* logos carrés */ .logo-track img:hover{transform:scale(1.06)} @keyframes scroll-logos{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media(prefers-reduced-motion:reduce){ .logo-track{animation:none;flex-wrap:wrap;justify-content:center;gap:clamp(30px,5vw,60px) clamp(46px,7vw,88px)} .logo-set{padding-right:0} .logo-set:last-child{display:none} } /* ============== 4. VISUEL + PHRASE CHOC ============== */ .banner-band{position:relative;background:var(--paper)} /* cadrage remonté (demande cliente) : l'oeil du cheval est en bas de la photo, un ancrage bas le fait entrer franchement dans le champ visible */ .banner-figure{position:relative;width:100%;min-height:clamp(300px,40vw,520px); background:url("../photos/banniere.webp?v=20260813") no-repeat;background-size:cover;background-position:12% 100%} .banner-figure::before{content:"";position:absolute;inset:0; background:linear-gradient(90deg,rgba(255,255,255,0) 34%,rgba(255,255,255,.78) 74%)} .banner-inner{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-end} .banner-quote{max-width:20ch;text-align:right;font-family:var(--display);font-weight:900; font-size:clamp(1.45rem,2.9vw,2.5rem);line-height:1.08;letter-spacing:-.03em;color:var(--ink)} /* le surlignage arrondi est defini une seule fois, avec celui du bloc 2 */ /* En mobile, la phrase passe EN HAUT (le ciel de la photo y est deja blanc) et le voile avec elle : le bas de l'image reste net, donc la tete et l'oeil du cheval restent visibles, comme en desktop. */ @media(max-width:640px){ .banner-figure{background-position:8% 100%} .banner-figure::before{background:linear-gradient(180deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,.72) 38%,rgba(255,255,255,0) 66%)} .banner-inner{align-items:flex-start;justify-content:center;padding:2rem var(--gut) 0} .banner-quote{text-align:center;max-width:24ch} } /* ============== 5. POURQUOI LE CHEVAL (dark) ============== */ .why{background:var(--ink);color:#EDEDED;position:relative;overflow:hidden} .why h2{color:var(--paper);max-width:18ch;margin:.7rem 0 0} .why h2 em{font-style:normal;color:var(--teal)} .why-top{display:grid;grid-template-columns:1fr .9fr;gap:2rem;align-items:end} .why-top .lead{color:rgba(255,255,255,.66);max-width:44ch} .why .lead b{color:#fff;font-weight:700} /* variante « un seul fil » : titre pleine largeur puis texte courant */ .why-simple .why-top{display:block} .why-simple .why-top h2{max-width:22ch} .why-simple .why-top .lead{max-width:66ch;margin-top:clamp(18px,2.4vw,28px)} .why-simple .why-more{margin-top:clamp(14px,1.8vw,22px)} .why-more{margin-top:clamp(26px,3.2vw,40px);color:rgba(255,255,255,.66)} .why-more b{color:#fff;font-weight:700} .why-horse{position:absolute;top:-30px;right:-30px;width:min(420px,40vw);opacity:.07;pointer-events:none} .why-horse svg{width:100%;height:auto} /* ============== 6. OFFRES ============== */ /* grille plutot que flex : avec "Une" renvoyé a la ligne, le titre gagne une ligne et, en flex, poussait le chapô sous lui en laissant une colonne vide. La grille garde les deux cote a cote. */ .offres-head{display:grid;grid-template-columns:1.06fr .94fr;align-items:end; gap:2rem clamp(30px,5vw,70px);margin-bottom:clamp(34px,5vw,58px)} .offres-head h2{max-width:22ch;margin-top:.7rem} @media(max-width:980px){.offres-head{grid-template-columns:1fr}} .offres-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.3rem} .offre{ background:var(--paper-2);border-radius:var(--r); display:flex;flex-direction:column;position:relative;overflow:hidden; border:1px solid transparent;transition:transform .3s ease,box-shadow .3s ease,border-color .3s; } .offre::before{content:"";position:absolute;top:0;left:0;width:0;height:4px;background:var(--gold);transition:width .35s ease;z-index:3} .offre:hover::before{width:100%} .offre:hover{transform:translateY(-5px);box-shadow:0 26px 50px -30px rgba(14,14,14,.4);border-color:var(--line)} .offre-img{margin:0;height:clamp(160px,17vw,205px);overflow:hidden;background:linear-gradient(160deg,#23292b,#0E0E0E)} .offre-img img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)} .offre:hover .offre-img img{transform:scale(1.05)} .offre-body{padding:1.7rem 1.9rem 1.9rem;display:flex;flex-direction:column;gap:.85rem;flex:1} .offre h3{margin-top:.1rem} .offre p{color:var(--muted);font-size:.97rem;flex:1} .offres-all{margin-top:clamp(30px,4vw,46px);text-align:center} /* ============== 7. CHIFFRES CLÉS ============== */ .kpi{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .kpi-grid{display:grid;grid-template-columns:repeat(3,1fr)} .kpi-item{padding:clamp(34px,4vw,52px) clamp(18px,2vw,34px);position:relative;text-align:center} .kpi-item + .kpi-item::before{content:"";position:absolute;left:0;top:24%;bottom:24%;width:1px;background:var(--line)} .kpi-num{font-family:var(--display);font-weight:900;font-size:clamp(2.5rem,4.8vw,3.7rem); line-height:1;letter-spacing:-.04em;color:var(--ink)} .kpi-num em{font-style:normal;color:var(--teal-text)} .kpi-item p{font-size:.93rem;color:var(--muted);margin-top:.6rem;line-height:1.45} @media(max-width:760px){ .kpi-grid{grid-template-columns:1fr} .kpi-item + .kpi-item::before{display:none} .kpi-item + .kpi-item{border-top:1px solid var(--line)} } /* ============== 8. VERBATIM CLIENT ============== */ .quote-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,5vw,70px);align-items:center} .quote-photo{border-radius:var(--r);overflow:hidden;aspect-ratio:1/1;background:linear-gradient(150deg,var(--teal),var(--teal-deepbg))} .quote-photo img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)} .quote-photo:hover img{transform:scale(1.04)} blockquote{font-family:var(--display);font-weight:700;font-size:clamp(1.3rem,2.5vw,1.95rem);line-height:1.2;letter-spacing:-.02em} /* gros guillemets demandés par la cliente (PPT p.4) */ .quote-open,.quote-close{display:block;font-family:var(--display);font-weight:900; font-size:clamp(3.6rem,6.4vw,5.8rem);line-height:.5;color:var(--gold)} .quote-open{margin:1.5rem 0 .9rem} .quote-close{color:var(--gold);text-align:right;margin-top:1.3rem} .quote-by{margin-top:1.6rem;font-size:.95rem;color:var(--muted)} .quote-by b{color:var(--ink);font-weight:700} .quote-more{margin-top:1.5rem;font-size:.97rem} /* ============== 9. GALERIE ============== */ .gallery{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .gallery-head{max-width:60ch;margin-bottom:clamp(30px,4vw,52px)} .gallery-head h2{margin:.7rem 0 0} .gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(150px,19vw,238px);grid-auto-flow:dense;gap:14px} .g-item{position:relative;overflow:hidden;border-radius:var(--r);background:linear-gradient(160deg,#23292b,#0E0E0E)} .g-item img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)} .g-item:hover img{transform:scale(1.05)} .g-item::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 58%,rgba(14,14,14,.22));opacity:0;transition:opacity .45s} .g-item:hover::after{opacity:1} .g-a{grid-column:span 2;grid-row:span 2} .g-wide{grid-column:span 2} .g-full{grid-column:1/-1} .gallery-more{margin-top:clamp(26px,3.5vw,40px);text-align:center} @media(max-width:980px){ .gallery-grid{grid-template-columns:repeat(2,1fr)} .g-a{grid-column:span 1;grid-row:span 2} .g-wide{grid-column:span 2} } @media(max-width:640px){ .gallery-grid{grid-template-columns:1fr;grid-auto-rows:clamp(200px,60vw,260px)} .g-a,.g-wide,.g-full{grid-column:span 1;grid-row:span 1} } /* ============== FONDATRICE ============== */ /* ============== 10. FAQ ============== */ .faq{background:var(--paper-2)} .faq-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:clamp(28px,5vw,60px);align-items:start} .faq-list{border-top:1px solid var(--line)} .faq-item{border-bottom:1px solid var(--line)} .faq-q{width:100%;text-align:left;background:none;border:none;cursor:pointer;font-family:var(--display);font-weight:700;font-size:clamp(1.05rem,1.7vw,1.28rem);letter-spacing:-.02em;color:var(--ink);padding:1.35rem 2.5rem 1.35rem 0;position:relative;display:flex;line-height:1.2} .faq-q::after{content:"+";position:absolute;right:0;top:1.05rem;font-family:var(--body);font-size:1.6rem;color:var(--teal-text);transition:transform .3s} .faq-item.open .faq-q::after{transform:rotate(45deg)} .faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease;color:var(--muted)} .faq-a p{padding:0 0 .95rem;font-size:.97rem} .faq-a p:last-child{padding-bottom:1.6rem} .faq-a b{color:var(--ink);font-weight:700} .faq-a ul{list-style:none;margin:0 0 .95rem;display:flex;flex-direction:column;gap:.5rem} .faq-a li{position:relative;padding-left:1.35rem;font-size:.97rem} .faq-a li::before{content:"/";position:absolute;left:0;top:0; font-family:var(--display);font-weight:800;color:var(--gold-deep)} .faq-a li b{color:var(--ink)} .faq-a .src{font-size:.82rem;opacity:.82;font-style:italic} .faq-a .concl{font-family:var(--display);font-weight:700;font-style:italic;color:var(--ink);font-size:1.02rem} .faq-more{margin-top:1.7rem;font-size:.97rem;color:var(--muted)} /* ============== 11. CTA FINALE ============== */ .final{background:var(--ink);color:#EDE9DF;text-align:center;position:relative;overflow:hidden} /* Photo eclaircie a la demande de la cliente. Plutot que d'assombrir toute l'image, le voile est concentré derriere le texte (halo central) : les bords de la photo restent clairs et le titre comme le sous-titre gardent un contraste conforme. */ .final::before{content:"";position:absolute;inset:0;pointer-events:none; background: radial-gradient(ellipse 66% 62% at 50% 52%, rgba(18,18,18,.66), rgba(18,18,18,.06) 82%), linear-gradient(rgba(18,18,18,.10),rgba(18,18,18,.20)), url("../photos/cta-groupe.jpg?v=20260813") no-repeat center 40%/cover} .final .wrap{position:relative;z-index:2} /* "Parlons-en." retiré a la demande de la cliente : trois appels a l'action dans le meme bloc, c'etait un de trop. La marge du titre reprend l'espace. */ .final h2{color:var(--paper);max-width:18ch;margin:0 auto 2.4rem;font-size:clamp(2.1rem,4.6vw,3.6rem);font-weight:900} .final .btn-primary{background:var(--gold);color:var(--ink)} .final .btn-primary:hover{background:var(--gold-deep)} /* fond legerement teinte : la photo etant eclaircie, un bouton simplement cerné de blanc n'avait plus assez de contraste sur les zones claires */ .final .btn-ghost{border-color:rgba(246,242,233,.5);color:var(--paper);background:rgba(18,18,18,.34)} .final .btn-ghost:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)} /* meme largeur pour les deux boutons ("mettre boutons parlons-en et num de tel a la meme taille") : sans plancher commun, l'un est cale sur son texte et l'autre sur le sien, et le duo parait bancal */ .final-actions{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap;position:relative;z-index:2} .final-actions .btn{min-width:15.5rem;justify-content:center} @media(max-width:560px){.final-actions .btn{min-width:min(15.5rem,100%);width:100%}} /* surtitre en blanc (le filet reste ambre) : sur une photo eclaircie, l'ambre sur ambre du sable ne tient pas le seuil de lisibilite, le blanc si */ .final .eyebrow{color:var(--paper);justify-content:center} .final .eyebrow::before{background:var(--gold)} .final-horse{position:absolute;bottom:-40px;left:-20px;width:min(360px,36vw);opacity:.08;pointer-events:none;color:var(--gold)} .final-horse svg{width:100%;height:auto} /* En mobile la photo se cale sur sa hauteur : le ciel remonte derriere le surtitre. Le voile est renforcé en haut (zone vide de l'image) pour garder le texte lisible sans assombrir le groupe ni le cheval. */ @media(max-width:640px){ .final::before{background: radial-gradient(ellipse 92% 56% at 50% 58%, rgba(18,18,18,.58), rgba(18,18,18,.08) 84%), linear-gradient(rgba(18,18,18,.78) 0%, rgba(18,18,18,.34) 34%, rgba(18,18,18,.08) 62%, rgba(18,18,18,.16) 100%), url("../photos/cta-groupe.jpg?v=20260813") no-repeat center 40%/cover} } /* CTA de la page Offres : photo distincte de celle de l'accueil ("je changerais bien la photo pour ne pas avoir la meme sur toutes les pages"). Cadrage plus haut : le sable occupe le bas de l'image, le duo et le cheval sont dans le tiers superieur. */ .final-offres::before{background: radial-gradient(ellipse 70% 66% at 50% 50%, rgba(18,18,18,.72), rgba(18,18,18,.10) 82%), linear-gradient(rgba(18,18,18,.16),rgba(18,18,18,.26)), url("../photos/offres-cta.jpg?v=20260813") no-repeat center 32%/cover} @media(max-width:640px){ .final-offres::before{background: radial-gradient(ellipse 96% 60% at 50% 56%, rgba(18,18,18,.66), rgba(18,18,18,.12) 84%), linear-gradient(rgba(18,18,18,.62) 0%, rgba(18,18,18,.30) 36%, rgba(18,18,18,.14) 100%), url("../photos/offres-cta.jpg?v=20260813") no-repeat center 32%/cover} } /* ============== 12. TEXTE SEO (repliable) ==============
: le texte reste present dans le HTML meme replié, donc toujours lu et indexé par les moteurs. */ .seo-text{background:var(--paper);padding:clamp(52px,7vw,88px) 0} .seo-acc{border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .seo-acc summary{list-style:none;cursor:pointer;display:flex;align-items:center; justify-content:space-between;gap:1.5rem;padding:1.15rem 0} .seo-acc summary::-webkit-details-marker{display:none} .seo-acc summary:hover h2{color:var(--muted)} .seo-acc summary h2{margin:0;transition:color .2s} .seo-acc-i{font-family:var(--body);font-size:1.35rem;line-height:1;font-weight:400; color:var(--teal-text);transition:transform .3s ease;flex:0 0 auto} .seo-acc[open] .seo-acc-i{transform:rotate(45deg)} .seo-acc-body{padding:.4rem 0 2.1rem} /* Bloc discret a la demande de la cliente : ce contenu sert le référencement plus que la lecture. On reduit sans descendre sous ~14px : en dessous, Google traite le texte comme dissimulé et le devalorise - l'effet serait l'inverse de celui recherché. */ .seo-text h2{font-size:clamp(1.02rem,1.4vw,1.18rem);max-width:46ch;margin-bottom:1rem; letter-spacing:-.01em;color:var(--muted);font-weight:700} .seo-text summary:hover h2{color:var(--ink)} .seo-text p{color:var(--muted);font-size:.88rem;line-height:1.62;max-width:82ch;margin-bottom:.85rem} .seo-text p b{color:var(--ink);font-weight:600} .seo-text ul{list-style:none;margin:0 0 1.1rem;display:flex;flex-direction:column;gap:.42rem;max-width:82ch} .seo-text li{position:relative;padding-left:1.3rem;color:var(--muted);font-size:.88rem} .seo-text li::before{content:"/";position:absolute;left:0;top:0; font-family:var(--display);font-weight:800;color:var(--gold-deep)} .seo-text li b{color:var(--ink);font-weight:700} /* ============== FOOTER ============== */ footer.ft{background:var(--ink);color:rgba(255,255,255,.68);padding:clamp(50px,7vw,80px) 0 2.5rem} .ft-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem;padding-bottom:3rem;border-bottom:1px solid rgba(255,255,255,.14)} .ft .brand-logo{height:32px;filter:brightness(0) invert(1);margin-bottom:1rem} .ft p{font-size:.94rem;max-width:34ch} .ft h4{font-family:var(--body);font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);margin-bottom:1rem;font-weight:700} .ft ul{list-style:none;display:flex;flex-direction:column;gap:.6rem} .ft ul a{font-size:.95rem;transition:color .2s} .ft ul a:hover{color:var(--paper)} .ft-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;padding-top:1.8rem;font-size:.84rem;opacity:.55} /* ============== SELECTEUR DE PALETTE ============== Outil de validation client uniquement - a retirer avant integration Divi. */ .pal{position:fixed;right:16px;bottom:16px;z-index:200; background:rgba(255,255,255,.94);backdrop-filter:blur(10px); border:1px solid var(--line);border-radius:12px;padding:.7rem .8rem; box-shadow:0 18px 40px -20px rgba(14,14,14,.5);font-family:var(--body)} .pal-t{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase; font-weight:700;color:var(--muted);margin-bottom:.55rem;text-align:center} .pal-row{display:flex;gap:.45rem} .pal button{width:30px;height:30px;border-radius:50%;border:2px solid transparent; cursor:pointer;padding:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)} .pal button[aria-pressed="true"]{border-color:var(--ink)} .pal-n{font-size:.7rem;color:var(--muted);margin-top:.5rem;text-align:center} @media print{.pal{display:none}} /* ============== ANIMATIONS ============== */ .reveal{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)} .reveal.in{opacity:1;transform:none} .hero .reveal{transition-delay:var(--d,0s)} /* ============== RESPONSIVE ============== */ @media(max-width:980px){ .why-top,.quote-wrap,.faq-grid,.constat-grid{grid-template-columns:1fr} .ft-grid{grid-template-columns:1fr 1fr} /* 6 entrées de menu en 1.02rem ne tiennent plus : bascule burger dès 980px */ .nav-links{display:none} .burger{display:block} } @media(max-width:640px){ .hero h1{font-size:clamp(1.75rem,8vw,2.5rem)} .offres-grid{grid-template-columns:1fr} .ft-grid{grid-template-columns:1fr} } @media(max-width:380px){ /* tres petits ecrans : le CTA du header cassait sur deux lignes */ .nav-in .btn-primary{padding:.78rem 1rem;font-size:.9rem;white-space:nowrap} .brand-logo{height:28px} } @media(prefers-reduced-motion:reduce){ *{scroll-behavior:auto!important} .reveal{opacity:1;transform:none;transition:none} .btn,.offre{transition:none} } :focus-visible{outline:3px solid var(--teal-text);outline-offset:3px;border-radius:4px} /* ================================================================== MENU MOBILE Le burger existait sans panneau : sous 980px, la navigation etait simplement absente. Sans consequence sur une page unique, bloquant des lors qu'il y a les pages Offres et Contact. ================================================================== */ @media(max-width:980px){ .nav-in{position:relative} .nav-links.open{ display:flex;flex-direction:column;align-items:stretch;gap:0; position:absolute;left:0;right:0;top:100%; background:var(--paper);border-bottom:1px solid var(--line); box-shadow:0 24px 40px -28px rgba(14,14,14,.5); padding:.5rem var(--gut) 1.1rem; } .nav-links.open a{padding:.95rem 0;border-bottom:1px solid var(--line);font-size:1.06rem} .nav-links.open a:last-child{border-bottom:none} .nav-links.open a:hover{box-shadow:none;color:var(--gold-deep)} } /* ================================================================== EN-TETE DES PAGES INTERIEURES Plus bas que le hero de l'accueil : sur une page de contenu, le titre doit amener au texte, pas occuper l'ecran. ================================================================== */ .page-hero{position:relative;isolation:isolate;overflow:hidden; background:var(--ink);color:var(--paper); padding:clamp(70px,9vw,120px) 0 clamp(56px,7vw,92px)} .page-hero-bg{position:absolute;inset:0;z-index:-2} .page-hero-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 42%} .page-hero::after{content:"";position:absolute;inset:0;z-index:-1; background: radial-gradient(ellipse 82% 78% at 34% 52%, rgba(18,18,18,.82), rgba(18,18,18,.44) 84%), linear-gradient(rgba(18,18,18,.36),rgba(18,18,18,.54))} .page-hero h1{font-size:clamp(2rem,4.4vw,3.4rem);font-weight:900;max-width:20ch; margin:.8rem 0 1.2rem;color:var(--paper)} .page-hero .lead{color:rgba(255,255,255,.84);max-width:62ch} .page-hero .lead + .lead{margin-top:1rem} .page-hero .eyebrow{color:var(--gold)} .page-hero .eyebrow::before{background:var(--gold)} /* Photo eclaircie au maximum, comme sur le hero de l'accueil : le voile uniforme laisse la place a un halo concentré derriere la colonne de texte (alignee a gauche), les bords de l'image restent lumineux. */ .page-hero-clair .page-hero-bg img{filter:brightness(1.12) contrast(1.03)} .page-hero-clair::after{background: radial-gradient(ellipse 82% 90% at 28% 50%, rgba(18,18,18,.66), rgba(18,18,18,.05) 80%), linear-gradient(96deg, rgba(18,18,18,.46) 0%, rgba(18,18,18,.24) 52%, rgba(18,18,18,0) 78%), linear-gradient(rgba(18,18,18,.10),rgba(18,18,18,.18))} .page-hero-clair h1{text-shadow:0 2px 26px rgba(0,0,0,.34)} /* En-tête Approche : la cliente trouvait la photo trop sombre. Luminosité poussée et halo allégé, en gardant un contraste AA sur le titre. */ .page-hero-plus-clair .page-hero-bg img{filter:brightness(1.24) contrast(1.05)} .page-hero-plus-clair.page-hero-clair::after{background: radial-gradient(ellipse 68% 76% at 27% 50%, rgba(18,18,18,.78), rgba(18,18,18,.02) 80%), linear-gradient(96deg, rgba(18,18,18,.42) 0%, rgba(18,18,18,.26) 60%, rgba(18,18,18,0) 84%), linear-gradient(rgba(18,18,18,.04),rgba(18,18,18,.10))} /* surtitre en blanc, filet ambre conservé : mesure a 3,16:1 en ambre sur la photo eclaircie, sous le seuil de 4,5:1. Meme arbitrage que sur le CTA. */ .page-hero-clair .eyebrow{color:var(--paper)} /* En mobile la colonne occupe toute la largeur : le halo doit suivre, sinon la droite du texte deborde de la zone assombrie. */ @media(max-width:820px){ .page-hero-clair::after{background: radial-gradient(ellipse 108% 72% at 50% 54%, rgba(18,18,18,.66), rgba(18,18,18,.10) 84%), linear-gradient(rgba(18,18,18,.24),rgba(18,18,18,.30))} } /* Renvoi vers les cas clients (page Offres). Place juste AVANT le CTA plutot que dedans : sur la photo, cette ligne tombait dans le ciel et n'atteignait que 1,13:1 - il aurait fallu un voile de 80 % pour la rendre lisible. */ .avant-cta{background:var(--paper);text-align:center; padding:clamp(38px,4.6vw,60px) 0 clamp(42px,5vw,66px)} /* 28/09 : renomme. Sous son ancien nom, cette regle de PARAGRAPHE (page Offres) bridait aussi la SECTION CTA de la page Clients et des 3 etudes de cas, qui portent `class="final final-clients"` : 718 px au lieu de 1440. */ .avant-cta-texte{color:var(--ink);max-width:52ch;margin:0 auto; font-family:var(--display);font-weight:700;letter-spacing:-.01em; font-size:clamp(1.15rem,2vw,1.45rem);line-height:1.3} /* remonte sous les formats a la demande de la cliente, et signalé par le rond fléché : "avec le rond jaune avec la flêche" */ .avant-cta .more{margin-top:1rem} /* ================================================================== PAGE OFFRES ================================================================== */ /* 2. le detail, en accordeon (meme balisage que la FAQ, donc meme script) */ .briques-acc{margin-top:clamp(34px,4.5vw,56px);border-top:1px solid var(--line)} .brique{border-bottom:1px solid var(--line);scroll-margin-top:110px} .brique .faq-q{padding:1.6rem 3rem 1.6rem 0;align-items:baseline;gap:1rem; font-size:clamp(1.15rem,2vw,1.5rem)} .brique .faq-q::after{top:1.35rem;color:var(--gold-deep)} .brique-q-num{font-family:var(--display);font-weight:900;color:var(--gold-deep); font-size:.9em;flex:0 0 auto} .brique-chapo{font-size:1.05rem!important;color:var(--ink)!important;max-width:70ch!important} .brique-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3.4vw,52px); padding:.4rem 0 1.9rem} @media(max-width:820px){.brique-cols{grid-template-columns:1fr;gap:1.6rem}} .brique-cols h4,.coord-bloc h4{font-family:var(--body);font-size:.76rem;letter-spacing:.16em; text-transform:uppercase;color:var(--bronze);margin-bottom:.9rem;font-weight:700} .brique-liste{list-style:none;display:flex;flex-direction:column;gap:.55rem} .brique-liste li{position:relative;padding-left:1.35rem;font-size:.97rem;color:var(--muted)} .brique-liste li::before{content:"/";position:absolute;left:0;top:0; font-family:var(--display);font-weight:800;color:var(--gold-deep)} .brique-liste li b{color:var(--ink);font-weight:700} /* le process en 4 etapes : une pastille numerotee, pas une liste de plus */ .etapes{list-style:none;counter-reset:etape;display:flex;flex-direction:column;gap:1rem} .etapes li{counter-increment:etape;position:relative;padding-left:2.9rem;font-size:.97rem; color:var(--muted)} .etapes li::before{content:counter(etape);position:absolute;left:0;top:-.1rem; width:30px;height:30px;border-radius:50%;background:var(--gold);color:var(--ink); font-family:var(--display);font-weight:800;font-size:.92rem; display:inline-flex;align-items:center;justify-content:center} .etapes b{color:var(--ink);font-weight:700} .brique-pied{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.6rem; padding:1.1rem 0 1.9rem;border-top:1px solid var(--line)} .brique-duree-forte{font-family:var(--display);font-weight:800;font-size:1.02rem} .brique-duree-forte span{color:var(--gold-deep)} /* 3. en pratique La cliente ne voulait plus des pastilles ambre pleines ("les ronds jaune et noir") et demandait des visuels, notamment pour montrer les lieux. Chaque case porte donc une photo, et le picto passe au trait dans un rond blanc cerclé d'or, posé a cheval sur le bas de l'image. Le rond reste blanc a picto noir : l'or ne depasse pas 2,1:1 sur blanc, un trait fin dans cette teinte serait illisible. */ .pratique-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(22px,3vw,40px); margin-top:clamp(30px,4vw,46px)} .pratique{background:var(--paper);border:1px solid var(--line);border-radius:var(--r); overflow:hidden;display:flex;flex-direction:column; transition:transform .3s ease,box-shadow .3s ease} .pratique:hover{transform:translateY(-4px);box-shadow:0 26px 50px -32px rgba(14,14,14,.45)} .pratique-img{position:relative;aspect-ratio:16/10;background:var(--paper-2)} .pratique-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease} .pratique:hover .pratique-img img{transform:scale(1.04)} /* inline-flex et non inline : sur un span inline, width/height sont ignores (piege deja rencontre sur l'ancienne bande de reassurance) */ .pratique-ico{position:absolute;left:1.6rem;bottom:0;transform:translateY(50%); width:54px;height:54px;border-radius:50%;background:var(--paper); border:1.5px solid var(--gold);color:var(--ink); display:inline-flex;align-items:center;justify-content:center; box-shadow:0 12px 26px -16px rgba(14,14,14,.6)} .pratique-ico svg{display:block;width:25px;height:25px;fill:none;stroke:currentColor; stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .pratique-corps{padding:2.3rem 1.8rem 1.8rem} .pratique h3{font-size:1.12rem;margin-bottom:.6rem} .pratique p{color:var(--muted);font-size:.97rem} @media(max-width:820px){.pratique-grid{grid-template-columns:1fr}} @media(prefers-reduced-motion:reduce){ .pratique,.pratique-img img{transition:none} .pratique:hover{transform:none} .pratique:hover .pratique-img img{transform:none} } /* ================================================================== PAGE CONTACT ================================================================== */ .contact-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,72px); align-items:start} @media(max-width:920px){.contact-grid{grid-template-columns:1fr}} .form{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r); padding:clamp(24px,3.4vw,40px)} .form-ligne{display:grid;grid-template-columns:1fr 1fr;gap:1rem} @media(max-width:560px){.form-ligne{grid-template-columns:1fr}} .champ{display:flex;flex-direction:column;gap:.45rem;margin-bottom:1.1rem} .champ label{font-size:.86rem;font-weight:700;color:var(--ink)} .champ .opt{font-weight:500;color:var(--muted)} .champ input,.champ textarea{ font-family:var(--body);font-size:1rem;color:var(--ink); background:var(--paper);border:1.5px solid var(--line);border-radius:10px; padding:.85rem 1rem;width:100%;transition:border-color .2s ease} .champ textarea{min-height:150px;resize:vertical} .champ input:focus,.champ textarea:focus{outline:none;border-color:var(--gold-deep)} .champ input::placeholder,.champ textarea::placeholder{color:#8E8A80} .form .btn-primary{width:100%;justify-content:center;margin-top:.4rem;font-size:1.02rem} .form-rgpd{font-size:.84rem;color:var(--muted);margin-top:1rem;line-height:1.5} /* message de confirmation : le texte est celui de la cliente (PPT p.8) */ .form-merci{display:none;text-align:center;padding:clamp(30px,5vw,58px) 1rem} .form.envoye .form-corps{display:none} .form.envoye .form-merci{display:block} .form-merci .rnd{width:56px;height:56px;font-size:1.5rem;background:var(--gold); border-color:var(--gold);margin:0 auto 1.2rem} .form-merci p{font-family:var(--display);font-weight:800;font-size:clamp(1.2rem,2.2vw,1.6rem); line-height:1.25;max-width:24ch;margin:0 auto} .form-merci small{display:block;margin-top:1rem;font-size:.9rem;color:var(--muted);font-style:italic} .coord{display:flex;flex-direction:column;gap:clamp(22px,3vw,34px)} .coord-bloc h3{font-size:1.05rem;margin-bottom:.7rem} .coord-liste{list-style:none;display:flex;flex-direction:column;gap:.85rem} .coord-liste li{display:flex;align-items:center;gap:.85rem;font-size:1rem} .coord-ico{width:34px;height:34px;flex:0 0 auto;border-radius:50%;border:1.5px solid var(--line); background:var(--paper);display:inline-flex;align-items:center;justify-content:center; font-size:.95rem} .coord-liste a{border-bottom:1px solid rgba(18,18,18,.28)} .coord-liste a:hover{border-bottom-color:var(--gold-deep)} .coord-note{font-size:.9rem;color:var(--muted);margin-top:.7rem} .coord-liste small{color:var(--muted);font-size:.84rem} /* ================================================================== PAGE APPROCHE Textes : document cliente "Textes nouveau site_Approche" (19/09/2026). ================================================================== */ .conviction-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,5vw,64px);align-items:start} /* pleine page, bord à bord : la cliente voulait cette photo sans marge ni arrondi, quitte à la recouper. Le .wrap est neutralisé plutôt que retiré du HTML, pour ne pas casser la structure de la section. */ /* la photo pleine page ferme la section : plus de bande blanche avant le bloc sombre qui suit (demande cliente du 19/09 au soir) */ .conviction-sec{padding-bottom:0} .conviction-img{margin:clamp(34px,4.5vw,54px) 0 0;max-width:none;padding:0; overflow:hidden;height:clamp(240px,30vw,430px);background:var(--paper-2)} .conviction-img img{width:100%;height:100%;object-fit:cover;display:block} @media(max-width:820px){ .conviction-grid{grid-template-columns:1fr} .conviction-img{height:clamp(200px,44vw,280px)} } /* verbatim sur fond sombre : guillemet or, filet lateral, pas de photo (la citation est courte, une carte photo l'aurait noyee) */ .verbatim{margin:clamp(30px,4vw,46px) 0 0;max-width:62ch;position:relative} .verbatim .quote-open,.verbatim .quote-close{display:block;font-family:var(--display); font-weight:900;font-size:clamp(2.4rem,3.8vw,3.4rem);line-height:.5;color:var(--gold)} .verbatim .quote-open{margin:.4rem 0 1.15rem} .verbatim .quote-close{text-align:right;margin-top:1.15rem} .verbatim blockquote{font-family:var(--display);font-weight:700;font-style:normal; font-size:clamp(1.1rem,1.85vw,1.45rem);line-height:1.25;letter-spacing:-.02em;color:#fff} .verbatim figcaption{margin-top:1.2rem;font-size:.92rem;color:rgba(255,255,255,.66)} .verbatim figcaption b{color:#fff;font-weight:700} /* l'encart visuel de la page Approche reprend la bande de la home avec une autre image : seule l'image change, le voile et la typo sont communs */ .banner-figure-approche{background-image:url("../photos/approche-encart.jpg?v=20260919"); background-position:50% 74%} /* voile inversé : il ne couvre plus que la gauche, et moins fort, pour que la tête du cheval reste franche. Le texte passe donc à gauche, au-dessus du cerceau, qui est désormais visible en entier. */ .banner-figure-approche::before{background: radial-gradient(ellipse 52% 46% at 20% 104%, rgba(18,18,18,.66), rgba(18,18,18,.22) 62%, rgba(18,18,18,0) 86%), radial-gradient(ellipse 44% 44% at 16% 20%, rgba(255,255,255,.95), rgba(255,255,255,.62) 60%, rgba(255,255,255,0) 88%)} .banner-figure-approche .banner-inner{justify-content:flex-start;align-items:flex-start; padding-top:clamp(28px,5vw,64px)} .banner-figure-approche .banner-quote{text-align:left;max-width:15ch} @media(max-width:640px){ .banner-figure-approche{background-position:20% 74%} .banner-figure-approche::before{background: radial-gradient(ellipse 88% 34% at 26% 104%, rgba(18,18,18,.62), rgba(18,18,18,0) 84%), linear-gradient(180deg, rgba(255,255,255,.94) 0%,rgba(255,255,255,.78) 32%,rgba(255,255,255,0) 58%)} .banner-figure-approche .banner-inner{justify-content:center;padding:1.8rem var(--gut) 0} .banner-figure-approche .banner-quote{text-align:center;max-width:22ch} } /* soft skills : 6 cartes courtes, l'icone porte le sens, pas de paragraphe */ .skills-sec{background:var(--paper-2)} .skills-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,22px); margin-top:clamp(30px,4vw,46px)} .skill{display:flex;align-items:center;gap:1rem;background:var(--paper); border:1px solid var(--line);border-radius:var(--r);padding:1.25rem 1.35rem; transition:transform .3s ease,box-shadow .3s ease} .skill:hover{transform:translateY(-3px);box-shadow:0 22px 44px -32px rgba(14,14,14,.45)} .skill h3{font-size:1.02rem;margin:0;line-height:1.25} /* la cliente ne voulait plus de pictogrammes : un simple rond ambre. inline-flex obligatoire : sur un span inline, width/height sont ignores */ .skill-ico{width:20px;height:20px;flex:0 0 auto;border-radius:50%; background:var(--gold);display:inline-block} @media(max-width:900px){.skills-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.skills-grid{grid-template-columns:1fr}} @media(prefers-reduced-motion:reduce){ .skill{transition:none} .skill:hover{transform:none} } /* principes d'action : pas de photo, un numero et un filet or suffisent */ .principes-grid{display:grid;grid-template-columns:repeat(2,1fr); gap:clamp(24px,3.4vw,44px);margin-top:clamp(30px,4vw,46px)} .principe{border-top:2px solid var(--gold);padding-top:1.1rem} .principe-num{font-family:var(--display);font-weight:900;font-size:.9rem; letter-spacing:.06em;color:var(--muted)} .principe h3{font-size:1.12rem;margin:.5rem 0 .5rem} .principe p{color:var(--muted);font-size:.97rem;max-width:44ch} .principes-faq{margin-top:clamp(30px,4vw,44px);font-size:1rem;color:var(--muted)} @media(max-width:700px){.principes-grid{grid-template-columns:1fr}} /* ================================================================== PAGE FAQ Trois groupes d'accordeons : le script ferme uniquement dans le groupe courant, deux groupes peuvent donc rester ouverts en meme temps. ================================================================== */ .faq-page{background:var(--paper)} /* Listes sans puce « / » : déroulé horaire d'une journée type, et blocs « situation / public » dont l'intitulé fait office de sous-titre. */ .faq-a .horaires li,.faq-a .cas li{padding-left:0} .faq-a .horaires li::before,.faq-a .cas li::before{content:none} .faq-a .horaires{gap:.62rem} .faq-a .horaires li{display:flex;gap:.9rem} .faq-a .horaires li b{flex:0 0 3.2rem;color:var(--ink)} .faq-a .cas{gap:1.05rem} .faq-a .cas li b{display:block;margin-bottom:.2rem;color:var(--ink)} .faq-a .cas li i{font-style:italic;color:var(--ink);opacity:.86} @media(max-width:560px){ .faq-a .horaires li{display:block} .faq-a .horaires li b{margin-bottom:.1rem} } .faq-page .faq-list{margin-top:clamp(24px,3vw,34px)} .faq-alt{background:var(--paper-2)} /* ================================================================== PAGE EQUICOACHING PARIS (ex-Lieux) ================================================================== */ .lieux-intro{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,5vw,64px);align-items:start} .lieux-intro-texte p + p{margin-top:1rem} .lieux-intro-texte p:not(.lead){color:var(--muted);font-size:1rem;line-height:1.65;max-width:62ch} .lieux-intro-texte b{color:var(--ink);font-weight:700} @media(max-width:820px){ .lieux-intro{grid-template-columns:1fr} .lieux-intro-texte{margin-top:1.2rem} } .lieux-sec{background:var(--paper)} .lieux-alt{background:var(--paper-2)} .lieux-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem; margin-top:clamp(30px,4vw,46px)} .lieu{background:var(--paper);border:1px solid var(--line);border-radius:var(--r); overflow:hidden;display:flex;flex-direction:column; transition:transform .3s ease,box-shadow .3s ease} .lieux-alt .lieu{background:var(--paper)} .lieu:hover{transform:translateY(-3px);box-shadow:0 22px 44px -32px rgba(14,14,14,.45)} .lieu-img{margin:0;height:clamp(170px,18vw,215px);overflow:hidden;background:var(--paper-2)} .lieu-img img{width:100%;height:100%;object-fit:cover;display:block; transition:transform .9s cubic-bezier(.2,.7,.2,1)} .lieu:hover .lieu-img img{transform:scale(1.05)} .lieu-corps{padding:1.3rem 1.4rem 1.5rem;display:flex;flex-direction:column;gap:.55rem;flex:1} .lieu-corps h3{font-size:1.1rem;line-height:1.25;margin:0} .lieu-corps p{color:var(--muted);font-size:.95rem;line-height:1.6;margin:0} .lieu-corps b{color:var(--ink);font-weight:700} .lieu-corps i{font-style:italic} .lieu-lien{margin-top:auto !important;padding-top:.4rem;font-size:.9rem} @media(prefers-reduced-motion:reduce){ .lieu{transition:none} .lieu:hover{transform:none} .lieu:hover .lieu-img img{transform:none} } @media(max-width:1000px){.lieux-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:660px){.lieux-grid{grid-template-columns:1fr}} .final-lieux::before{background: radial-gradient(ellipse 70% 66% at 50% 50%, rgba(18,18,18,.74), rgba(18,18,18,.08) 82%), linear-gradient(rgba(18,18,18,.14),rgba(18,18,18,.24)), url("../photos/lieux/lieux-cta.jpg?v=20260922") no-repeat center 38%/cover} @media(max-width:640px){ .final-lieux::before{background: radial-gradient(ellipse 96% 60% at 50% 56%, rgba(18,18,18,.68), rgba(18,18,18,.14) 84%), linear-gradient(rgba(18,18,18,.62) 0%, rgba(18,18,18,.32) 36%, rgba(18,18,18,.16) 100%), url("../photos/lieux/lieux-cta.jpg?v=20260922") no-repeat center 38%/cover} } /* ================================================================== PAGE EQUIPE Profils en bandes alternees : la photo change de cote d'un profil a l'autre, ce qui evite l'effet catalogue d'une grille de portraits. ================================================================== */ .equipe-intro .lead{max-width:70ch;font-size:clamp(1.12rem,1.8vw,1.4rem);color:var(--ink)} .equipe-intro b{font-weight:700} .profils-sec{background:var(--paper-2)} .profils-liste{display:flex;flex-direction:column;gap:clamp(34px,4.6vw,58px); margin-top:clamp(30px,4vw,46px)} .profil{display:grid;grid-template-columns:.42fr .58fr;gap:clamp(24px,3.4vw,46px); align-items:center;background:var(--paper);border:1px solid var(--line); border-radius:var(--r);overflow:hidden} .profil:nth-child(even) .profil-img{order:2} .profil-img{margin:0;height:100%;min-height:clamp(260px,26vw,340px); overflow:hidden;background:var(--paper-2)} .profil-img img{width:100%;height:100%;object-fit:cover;display:block} .profil-corps{padding:clamp(22px,2.6vw,34px) clamp(22px,2.6vw,38px)} .profil-corps h3{font-size:clamp(1.18rem,2vw,1.55rem);margin:0} .profil-role{font-family:var(--display);font-weight:700;font-size:.82rem; letter-spacing:.05em;text-transform:uppercase;color:var(--gold-deep); margin:.45rem 0 1rem} .profil-corps p:not(.profil-role){color:var(--muted);font-size:.98rem;line-height:1.65; margin-bottom:.75rem;max-width:56ch} .profil-corps p:last-child{margin-bottom:0} .profil-corps b{color:var(--ink);font-weight:700} .equipe-notes{margin-top:clamp(34px,4.4vw,54px);max-width:66ch} .equipe-notes p{color:var(--muted);font-size:1rem;line-height:1.65} .equipe-notes p + p{margin-top:.8rem} .equipe-notes b{color:var(--ink);font-weight:700} @media(max-width:820px){ .profil{grid-template-columns:1fr} .profil:nth-child(even) .profil-img{order:0} .profil-img{min-height:clamp(220px,52vw,300px)} } .final-equipe::before{background: radial-gradient(ellipse 70% 66% at 50% 50%, rgba(18,18,18,.76), rgba(18,18,18,.10) 82%), linear-gradient(rgba(18,18,18,.18),rgba(18,18,18,.28)), url("../photos/equipe/equipe-cta.jpg?v=20260922") no-repeat center 34%/cover} @media(max-width:640px){ .final-equipe::before{background: radial-gradient(ellipse 96% 60% at 50% 56%, rgba(18,18,18,.70), rgba(18,18,18,.16) 84%), linear-gradient(rgba(18,18,18,.64) 0%, rgba(18,18,18,.34) 36%, rgba(18,18,18,.18) 100%), url("../photos/equipe/equipe-cta.jpg?v=20260922") no-repeat center 34%/cover} } /* >>> RETOURS DU 23/09 <<< */ /* ================================================================== RETOURS DU 23/09 - RESPIRATIONS ET FILETS La cliente trouve le blanc trop grand entre le premier paragraphe et la premiere section de lieux, et entre le chapo de la page Equipe et les profils. Deux modificateurs suffisent, plutot que de toucher .section qui sert partout. ================================================================== */ .section-serree{padding-bottom:clamp(30px,4vw,52px)} .section-haut-serre{padding-top:clamp(30px,4vw,52px)} /* la « barre jaune » demandee sur le premier paragraphe de la page Lieux : meme filet que .principe et .idee, pour rester iso avec le reste du site */ .lieux-intro-texte{border-top:2px solid var(--gold);padding-top:1.15rem} /* vignettes de lieux : barre or au survol, exactement comme les cartes d'offres */ .lieu{position:relative} .lieu::before{content:"";position:absolute;top:0;left:0;width:0;height:4px; background:var(--gold);transition:width .35s ease;z-index:3} .lieu:hover::before{width:100%} @media(prefers-reduced-motion:reduce){ .lieu::before{transition:none} } /* ================================================================== PAGE EQUIPE - FORMAT RESSERRE (retour du 23/09) Les profils passaient en bandes pleine largeur : quatre ecrans de defilement pour quatre personnes. Ils reprennent le format carte des autres pages, deux par ligne, photo en haut. ================================================================== */ .equipe-intro .lead{font-size:clamp(1.02rem,1.25vw,1.16rem);max-width:74ch;color:var(--ink)} .profils-liste{display:grid;grid-template-columns:repeat(2,1fr); gap:clamp(20px,2.6vw,30px);margin-top:clamp(26px,3.4vw,38px)} .profil{grid-template-columns:1fr;gap:0;align-items:stretch} .profil:nth-child(even) .profil-img{order:0} /* le cadrage reste piloté profil par profil, en style en ligne : chaque photo a son sujet à une hauteur différente, une valeur globale en décadre trois sur quatre */ .profil-img{min-height:0;height:clamp(200px,19vw,248px)} .profil-corps{padding:1.3rem 1.5rem 1.6rem} .profil-corps h3{font-size:clamp(1.1rem,1.5vw,1.3rem)} .profil-role{font-size:.78rem;margin:.4rem 0 .85rem} .profil-corps p:not(.profil-role){font-size:.94rem;line-height:1.6;max-width:none} .equipe-notes{margin-top:clamp(26px,3.4vw,40px)} @media(max-width:820px){ .profils-liste{grid-template-columns:1fr} .profil-img{height:clamp(200px,44vw,270px)} } /* accueil : separation entre les deux liens de « Pourquoi le cheval » */ .why-sep{color:rgba(255,255,255,.42);margin:0 .5rem;font-weight:700} /* ================================================================== PAGE EN IMAGES - RENVOI VERS LA PAGE LIEUX (retour du 23/09) ================================================================== */ .galerie-renvoi{margin-top:clamp(22px,2.6vw,32px);padding-top:1.1rem; border-top:2px solid var(--gold);max-width:56ch;font-size:1.02rem} /* ================================================================== ACCUEIL - BANDE « NOS LIEUX » (retour du 23/09) Placee apres « En images » : les photos donnent l'ambiance, la bande nomme les lieux et pousse la page /equicoaching-paris/, qui porte le mot-cle sur lequel le site decroche. ================================================================== */ .hp-lieux{background:var(--paper)} .hp-lieux-in{display:grid;grid-template-columns:.85fr 1.15fr; gap:clamp(28px,4.4vw,60px);align-items:center} .hp-lieux-texte p.lead{margin-top:1rem;max-width:44ch} .hp-lieux-texte .more{margin-top:1.3rem;display:inline-flex} .hp-lieux-mosaique{display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem} .hp-lieu{position:relative;margin:0;border-radius:var(--r);overflow:hidden; height:clamp(150px,15vw,190px);background:var(--paper)} .hp-lieu img{width:100%;height:100%;object-fit:cover;display:block; transition:transform .9s cubic-bezier(.2,.7,.2,1)} .hp-lieu:hover img{transform:scale(1.05)} .hp-lieu figcaption{position:absolute;left:0;right:0;bottom:0; padding:1.6rem .9rem .7rem;color:#fff;font-family:var(--display); font-weight:700;font-size:.86rem;letter-spacing:.01em; background:linear-gradient(rgba(18,18,18,0),rgba(18,18,18,.82))} @media(prefers-reduced-motion:reduce){ .hp-lieu img{transition:none} .hp-lieu:hover img{transform:none} } @media(max-width:900px){ .hp-lieux-in{grid-template-columns:1fr} .hp-lieu{height:clamp(140px,34vw,200px)} } /* <<< RETOURS DU 23/09 >>> */ /* ================================================================== PAGE CLIENTS + ETUDES DE CAS ================================================================== */ /* En-tête Clients : photo lumineuse à droite, le halo derrière le texte est donc un cran plus marqué que le réglage commun. */ .page-hero-clients.page-hero-clair::after{background: radial-gradient(ellipse 66% 82% at 26% 48%, rgba(18,18,18,.76), rgba(18,18,18,.04) 80%), linear-gradient(96deg, rgba(18,18,18,.52) 0%, rgba(18,18,18,.30) 58%, rgba(18,18,18,0) 82%), linear-gradient(rgba(18,18,18,.10),rgba(18,18,18,.18))} .page-hero-haut{min-height:clamp(430px,60vw,870px);display:flex;align-items:flex-end; padding-bottom:clamp(44px,5vw,72px)} /* en flex, le .wrap se calerait sur son contenu et se centrerait : il doit rester pleine largeur pour que le texte garde son alignement a gauche */ .page-hero-haut > .wrap{width:100%} /* le bandeau etant beaucoup plus haut, le texte descend en bas a gauche : le halo doit l'y suivre, sinon il eclaire une zone vide et le chapo passe sur les parties claires de la photo. */ .page-hero-clients.page-hero-haut.page-hero-clair::after{background: radial-gradient(ellipse 62% 44% at 30% 86%, rgba(18,18,18,.86), rgba(18,18,18,.06) 78%), linear-gradient(0deg, rgba(18,18,18,.72) 0%, rgba(18,18,18,.34) 26%, rgba(18,18,18,0) 52%), linear-gradient(rgba(18,18,18,.10),rgba(18,18,18,.14))} .page-hero-haut .page-hero-bg img{object-fit:cover} @media(max-width:820px){.page-hero-haut{min-height:clamp(380px,86vw,560px)}} .cas-sec{background:var(--paper)} .cas-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem; margin-top:clamp(30px,4vw,46px)} .cas{background:var(--paper-2)} /* l'intitule de format remplace la date : il dit d'un coup d'oeil de quelle brique de l'offre releve le cas */ .cas-format{font-family:var(--display);font-weight:700;font-size:.72rem; letter-spacing:.09em;text-transform:uppercase;color:var(--gold-deep)} .cas h3{font-size:1.1rem;line-height:1.28;margin:.15rem 0 0} .cas h3 a{color:inherit} .cas h3 a:hover{color:var(--muted)} .cas p{font-size:.95rem} @media(max-width:1000px){.cas-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:660px){.cas-grid{grid-template-columns:1fr}} /* verbatims : mosaique de citations courtes, sans photo ni auteur (ils sont anonymes, issus des evaluations). Le premier porte le chiffre, il est mis en avant sur deux colonnes. */ .verbatims-sec{background:var(--paper-2)} .verbatims-grid{display:grid;grid-template-columns:repeat(3,1fr); gap:1.2rem;margin-top:clamp(30px,4vw,46px)} .vbt{background:var(--paper);border:1px solid var(--line);border-radius:var(--r); padding:1.5rem 1.6rem;font-family:var(--body);font-weight:400;font-size:.97rem; line-height:1.6;letter-spacing:0;color:var(--muted);position:relative} .vbt::before{content:"\201C";position:absolute;top:.5rem;right:1rem; font-family:var(--display);font-weight:900;font-size:2.6rem;line-height:1; color:var(--gold-deep)} .vbt-note{margin-top:1.4rem;font-size:.86rem;color:var(--muted);opacity:.8} .vbt-presse{margin-top:clamp(26px,3.4vw,40px)} @media(max-width:900px){ .verbatims-grid{grid-template-columns:repeat(2,1fr)} } @media(max-width:620px){ .verbatims-grid{grid-template-columns:1fr} } /* CTA de la page Clients et des etudes de cas : encore une autre photo */ .final-clients::before{background: radial-gradient(ellipse 68% 64% at 50% 50%, rgba(18,18,18,.70), rgba(18,18,18,.04) 82%), linear-gradient(rgba(18,18,18,.10),rgba(18,18,18,.18)), url("../photos/clients/clients-cta.jpg?v=20260922b") no-repeat center 42%/cover} @media(max-width:640px){ .final-clients::before{background: radial-gradient(ellipse 96% 60% at 50% 56%, rgba(18,18,18,.68), rgba(18,18,18,.14) 84%), linear-gradient(rgba(18,18,18,.62) 0%, rgba(18,18,18,.32) 36%, rgba(18,18,18,.16) 100%), url("../photos/clients/clients-cta.jpg?v=20260922b") no-repeat center 42%/cover} } /* mentions propres aux etudes de cas */ .cas-anonyme{font-size:.9rem;color:var(--muted);opacity:.85;font-style:italic; border-left:2px solid var(--gold);padding-left:.9rem;margin-bottom:.4rem} .article-corps .cas-lieu{font-size:.92rem;color:var(--muted);opacity:.85} .article-corps i{font-style:italic} /* le visuel des etudes de cas est une photo, pas une illustration : on la recadre en bandeau plutot que de la laisser en pleine hauteur */ .cas-media img{aspect-ratio:16/9;object-fit:cover} /* ================================================================== PAGE ARTICLE En-tête sans photo (le visuel de l'article est juste dessous, le redoubler en fond ferait doublon), corps sur une colonne de lecture de 68 caractères, objections numérotées comme les principes d'action. ================================================================== */ .page-hero-article{padding:clamp(64px,8vw,104px) 0 clamp(50px,6vw,78px)} .page-hero-article::after{background: radial-gradient(ellipse 78% 92% at 26% 46%, rgba(255,255,255,.05), rgba(255,255,255,0) 78%)} .page-hero-article h1{max-width:24ch} .page-hero-article .lead{max-width:60ch} /* le visuel suit la colonne de lecture et garde ses proportions : une hauteur imposee laisserait des bandes vides sur les illustrations */ .article-media{max-width:68ch;margin:0 auto clamp(34px,4.5vw,54px); border-radius:var(--r);overflow:hidden;background:var(--paper-2)} .article-media img{width:100%;height:auto;display:block} .article-corps{max-width:68ch;margin:0 auto} .article-corps p{font-size:1.04rem;line-height:1.72;color:var(--muted);margin-bottom:1.1rem} .article-corps p b{color:var(--ink);font-weight:700} .article-corps .chapo{font-size:1.16rem;line-height:1.6;color:var(--ink);font-weight:500} .article-corps ul{list-style:none;margin:0 0 1.1rem;display:flex;flex-direction:column;gap:.55rem} .article-corps li{position:relative;padding-left:1.35rem;font-size:1.02rem;line-height:1.6;color:var(--muted)} .article-corps li::before{content:"/";position:absolute;left:0;top:0; font-family:var(--display);font-weight:800;color:var(--gold-deep)} .article-corps .concl{font-family:var(--display);font-weight:700;font-style:italic; color:var(--ink);font-size:1.08rem;line-height:1.4} .idee{margin-top:clamp(34px,4.6vw,56px);border-top:2px solid var(--gold);padding-top:1.2rem} .idee-num{font-family:var(--display);font-weight:900;font-size:.9rem; letter-spacing:.06em;color:var(--muted)} .idee h2{font-size:clamp(1.3rem,2.4vw,1.8rem);margin:.5rem 0 1.1rem;max-width:22ch} .idee-fin{border-top-width:3px} .article-retour{margin-top:clamp(34px,4.6vw,56px)} .article-retour .rnd{transform:none} .article-retour .more:hover .rnd{transform:translateX(-3px)} /* ================================================================== PAGE BLOG ================================================================== */ .post-une{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,50px); align-items:center;margin-top:clamp(24px,3vw,34px)} .post-une-img{display:block;border-radius:var(--r);overflow:hidden; aspect-ratio:16/10;background:var(--paper-2)} .post-une-img img{width:100%;height:100%;object-fit:cover;display:block; transition:transform .6s cubic-bezier(.2,.7,.2,1)} .post-une:hover .post-une-img img{transform:scale(1.04)} .post-une-corps h2{font-size:clamp(1.4rem,2.6vw,2.05rem);margin:0 0 .9rem;max-width:20ch} .post-une-corps p{color:var(--muted);max-width:52ch} .posts-sec{background:var(--paper-2)} .posts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem; margin-top:clamp(30px,4vw,46px)} .post{background:var(--paper)} /* recadrages demandés par la cliente : on remonte le cadre pour garder les oreilles du cheval, et on décale à droite pour garder la personne. */ .post-img-oreilles img{object-position:50% 5%} /* dessin au trait : un recadrage couperait le texte de l'illustration, on l'affiche donc en entier sur le fond papier */ .post-img-illu{background:var(--paper-2)} .post-img-illu img{object-fit:contain} .post-img-personne img{object-position:88% 50%} .post .offre-body{gap:.6rem} .post h3{font-size:1.06rem;line-height:1.28} .post h3 a{color:inherit} .post h3 a:hover{color:var(--muted)} .post p{font-size:.94rem} @media(max-width:1000px){.posts-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:820px){ .post-une{grid-template-columns:1fr} } @media(max-width:620px){.posts-grid{grid-template-columns:1fr}} @media(prefers-reduced-motion:reduce){ .post-une-img img{transition:none} .post-une:hover .post-une-img img{transform:none} } /* CTA des pages Approche / FAQ / Blog : photos distinctes de celles de l'accueil et de la page Offres ("ne pas avoir la meme sur toutes les pages") */ .final-approche::before{background: radial-gradient(ellipse 74% 70% at 50% 50%, rgba(18,18,18,.80), rgba(18,18,18,.14) 84%), linear-gradient(rgba(18,18,18,.24),rgba(18,18,18,.34)), url("../photos/approche-cta.jpg?v=20260919") no-repeat center 38%/cover} .final-ressources::before{background: radial-gradient(ellipse 74% 70% at 50% 50%, rgba(18,18,18,.80), rgba(18,18,18,.14) 84%), linear-gradient(rgba(18,18,18,.24),rgba(18,18,18,.34)), url("../photos/ressources-cta.jpg?v=20260919") no-repeat center 30%/cover} @media(max-width:640px){ .final-approche::before{background: radial-gradient(ellipse 96% 60% at 50% 56%, rgba(18,18,18,.68), rgba(18,18,18,.14) 84%), linear-gradient(rgba(18,18,18,.62) 0%, rgba(18,18,18,.32) 36%, rgba(18,18,18,.16) 100%), url("../photos/approche-cta.jpg?v=20260919") no-repeat center 38%/cover} .final-ressources::before{background: radial-gradient(ellipse 96% 60% at 50% 56%, rgba(18,18,18,.68), rgba(18,18,18,.14) 84%), linear-gradient(rgba(18,18,18,.62) 0%, rgba(18,18,18,.32) 36%, rgba(18,18,18,.16) 100%), url("../photos/ressources-cta.jpg?v=20260919") no-repeat center 30%/cover} } /* ===== AJOUTS DU 21/09/2026 : pages d'expertise, galerie, articles ===== */ /* --- pied de page : une 4e colonne pour les pages d'expertise --- */ .ft-grid-4{grid-template-columns:1.3fr 1fr 1.1fr 1fr} @media(max-width:900px){.ft-grid-4{grid-template-columns:1fr 1fr}} @media(max-width:560px){.ft-grid-4{grid-template-columns:1fr}} /* --- pages d'expertise : meme colonne de lecture que les articles --- */ .texte-sec-alt{background:var(--paper-2)} .texte-entete{max-width:68ch;margin:0 auto clamp(22px,3vw,34px)} .texte-entete h2{margin-top:.7rem;font-size:clamp(1.5rem,3vw,2.2rem);max-width:26ch} .texte-intro{max-width:56ch;margin-top:1.1rem;color:var(--muted);font-size:1.02rem;line-height:1.65} .texte-corps{max-width:68ch;margin:0 auto} .texte-corps p{font-size:1.04rem;line-height:1.72;color:var(--muted);margin-bottom:1.1rem} .texte-corps p b{color:var(--ink);font-weight:700} .texte-corps .chapo{font-size:1.16rem;line-height:1.6;color:var(--ink);font-weight:500} .texte-corps h3{font-size:1.16rem;margin:clamp(26px,3.4vw,38px) 0 .7rem; padding-top:1rem;border-top:2px solid var(--gold);max-width:30ch} .texte-corps h3:first-child{margin-top:0} .texte-corps ul{list-style:none;margin:0 0 1.1rem;display:flex;flex-direction:column;gap:.62rem} .texte-corps li{position:relative;padding-left:1.35rem;font-size:1.02rem;line-height:1.62;color:var(--muted)} .texte-corps li::before{content:"/";position:absolute;left:0;top:0; color:var(--gold-deep);font-family:var(--display);font-weight:900} .texte-corps li b{color:var(--ink);font-weight:700} .texte-corps .concl{font-family:var(--display);font-weight:700;font-style:italic; color:var(--ink);font-size:1.06rem;line-height:1.5;margin:1.4rem 0 1.1rem} .texte-note{margin-top:1.6rem;padding-top:1.1rem;border-top:1px solid rgba(18,18,18,.12); font-size:.92rem;line-height:1.6;color:var(--muted)} .texte-corps sup{font-size:.7em;vertical-align:super;line-height:0} /* les pages d'expertise enchainent plusieurs paragraphes dans la section sombre */ .why-simple .lead + .lead{margin-top:1.1rem} .why-simple .why-top + .lead{margin-top:clamp(18px,2.4vw,28px)} /* --- maillage interne : 4 cartes vers les autres pages d'expertise --- */ .suite-sec{background:var(--paper-2)} .suite-grid{display:grid;grid-template-columns:repeat(2,1fr); gap:clamp(14px,1.8vw,22px);margin-top:clamp(28px,3.6vw,44px)} .suite-carte{display:grid;grid-template-columns:1fr auto;align-items:center; column-gap:1rem;row-gap:.35rem;background:var(--paper);border-radius:18px; padding:1.3rem 1.4rem;transition:transform .25s ease,box-shadow .25s ease} .suite-carte:hover{transform:translateY(-3px);box-shadow:0 22px 44px -32px rgba(14,14,14,.45)} .suite-titre{font-family:var(--display);font-weight:800;font-size:1.06rem; line-height:1.25;color:var(--ink)} .suite-resume{grid-column:1;font-size:.94rem;line-height:1.5;color:var(--muted);max-width:40ch} .suite-carte .rnd{grid-column:2;grid-row:1 / span 2} .suite-carte:hover .rnd{background:var(--gold);border-color:var(--gold);transform:translateX(3px)} @media(max-width:700px){.suite-grid{grid-template-columns:1fr}} @media(prefers-reduced-motion:reduce){ .suite-carte{transition:none} .suite-carte:hover{transform:none} } /* --- galerie « En images » : mosaique de vignettes, photo pleine au clic --- */ .galerie-sec-alt{background:var(--paper-2)} .galerie-intro{max-width:58ch;margin-top:1rem;color:var(--muted);font-size:1.02rem;line-height:1.65} .galerie-grille{display:grid;grid-template-columns:repeat(4,1fr); gap:clamp(10px,1.2vw,16px);margin-top:clamp(26px,3.4vw,42px)} .photo{padding:0;border:0;background:var(--paper-2);border-radius:16px;overflow:hidden; cursor:zoom-in;aspect-ratio:4/3;display:block;width:100%; transition:transform .25s ease,box-shadow .25s ease} .photo img{width:100%;height:100%;object-fit:cover;display:block} .photo:hover{transform:translateY(-3px);box-shadow:0 22px 44px -30px rgba(14,14,14,.5)} .photo:focus-visible{outline:3px solid var(--gold);outline-offset:3px} @media(max-width:900px){.galerie-grille{grid-template-columns:repeat(3,1fr)}} @media(max-width:620px){.galerie-grille{grid-template-columns:repeat(2,1fr)}} @media(prefers-reduced-motion:reduce){ .photo{transition:none} .photo:hover{transform:none} } /* --- visionneuse : superposition plein ecran, fermeture au clic ou Echap --- */ .visionneuse{position:fixed;inset:0;z-index:120;display:flex;align-items:center; justify-content:center;gap:clamp(8px,2vw,24px);padding:clamp(14px,3vw,40px); background:rgba(12,12,12,.94)} .visionneuse[hidden]{display:none} .visionneuse-figure{max-width:min(1200px,92vw);max-height:88vh;margin:0; display:flex;flex-direction:column;gap:.9rem;align-items:center} .visionneuse-figure img{max-width:100%;max-height:78vh;width:auto;height:auto; border-radius:14px;display:block} .visionneuse-figure figcaption{color:rgba(255,255,255,.76);font-size:.92rem; text-align:center;max-width:60ch;line-height:1.5} .visionneuse button{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.26); color:#fff;width:46px;height:46px;border-radius:50%;font-size:1.2rem;cursor:pointer; flex:0 0 auto;transition:background .2s,border-color .2s} .visionneuse button:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)} .visionneuse-fermer{position:absolute;top:clamp(14px,3vw,28px);right:clamp(14px,3vw,28px)} @media(max-width:620px){ .visionneuse-prec,.visionneuse-suiv{position:absolute;bottom:clamp(14px,4vw,28px)} .visionneuse-prec{left:24%} .visionneuse-suiv{right:24%} .visionneuse-figure figcaption{padding-bottom:3.6rem} } /* --- articles de blog repris au format valide : titres separes par un filet ambre, comme les objections de l'article modele --- */ .article-corps h2{font-size:clamp(1.3rem,2.4vw,1.8rem);max-width:24ch; margin:clamp(34px,4.6vw,56px) 0 1.1rem;padding-top:1.2rem;border-top:2px solid var(--gold)} .article-corps h2:first-child{margin-top:0} .article-corps h3{font-size:1.16rem;margin:clamp(22px,2.8vw,32px) 0 .7rem;max-width:30ch} .article-corps blockquote{margin:1.6rem 0;padding:0 0 0 1.2rem; border-left:3px solid var(--gold);font-family:var(--display);font-weight:600; font-style:italic;color:var(--ink);font-size:1.06rem;line-height:1.5} .article-corps em{font-style:italic} .article-corps sup{font-size:.7em;vertical-align:super;line-height:0} .idee h2{margin-top:.5rem;padding-top:0;border-top:0} /* ===== FIN DES AJOUTS DU 21/09/2026 ===== */ /* >>> RETOURS DU 25/09 <<< */ /* ================================================================== 1. HEADER - LISERÉ OR SUR LA SECTION COURANTE « Mettre un liseret jaune dans le header pour savoir dans quelle section on est ». L'attribut aria-current="page" existait déjà sur chaque page (il sert aux lecteurs d'écran), il n'était pas stylé. ================================================================== */ .nav-links a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--gold)} .nav .btn-primary[aria-current="page"]{box-shadow:none} @media(max-width:900px){ .nav-links.open a[aria-current="page"]{box-shadow:none;color:var(--gold-deep)} } /* ================================================================== 2. PHOTOS D'EN-TÊTE ET DE CTA « ÉCLAIRCIES AU MAX » On pousse la luminosité et on allège les voiles. Le halo derrière le texte est conservé : c'est lui qui tient le contraste du titre, sans assombrir le reste de l'image. ================================================================== */ .hero-bg img{filter:brightness(1.24) contrast(1.02)} .hero::after{background: radial-gradient(ellipse 70% 58% at 50% 48%, rgba(18,18,18,.48), rgba(18,18,18,.03) 78%), linear-gradient(rgba(18,18,18,.06),rgba(18,18,18,.14))} .page-hero-clair .page-hero-bg img{filter:brightness(1.28) contrast(1.02)} .page-hero-clair::after{background: radial-gradient(ellipse 76% 86% at 27% 50%, rgba(18,18,18,.56), rgba(18,18,18,.02) 80%), linear-gradient(96deg, rgba(18,18,18,.36) 0%, rgba(18,18,18,.16) 54%, rgba(18,18,18,0) 78%), linear-gradient(rgba(18,18,18,.04),rgba(18,18,18,.10))} .page-hero-plus-clair .page-hero-bg img{filter:brightness(1.36) contrast(1.03)} .page-hero-clients.page-hero-clair::after{background: radial-gradient(ellipse 64% 80% at 26% 48%, rgba(18,18,18,.62), rgba(18,18,18,.03) 80%), linear-gradient(96deg, rgba(18,18,18,.40) 0%, rgba(18,18,18,.20) 58%, rgba(18,18,18,0) 82%), linear-gradient(rgba(18,18,18,.04),rgba(18,18,18,.10))} .final::before{background: radial-gradient(ellipse 62% 56% at 50% 52%, rgba(18,18,18,.54), rgba(18,18,18,.03) 82%), linear-gradient(rgba(18,18,18,.04),rgba(18,18,18,.12)), url("../photos/cta-groupe.jpg?v=20260813") no-repeat center 40%/cover} .final-offres::before{background: radial-gradient(ellipse 66% 60% at 50% 50%, rgba(18,18,18,.58), rgba(18,18,18,.04) 82%), linear-gradient(rgba(18,18,18,.06),rgba(18,18,18,.16)), url("../photos/offres-cta.jpg?v=20260813") no-repeat center 32%/cover} @media(max-width:640px){ .final::before{background: radial-gradient(ellipse 92% 54% at 50% 58%, rgba(18,18,18,.50), rgba(18,18,18,.05) 84%), linear-gradient(rgba(18,18,18,.62) 0%, rgba(18,18,18,.24) 34%, rgba(18,18,18,.04) 62%, rgba(18,18,18,.10) 100%), url("../photos/cta-groupe.jpg?v=20260813") no-repeat center 40%/cover} .final-offres::before{background: radial-gradient(ellipse 96% 56% at 50% 56%, rgba(18,18,18,.56), rgba(18,18,18,.06) 84%), linear-gradient(rgba(18,18,18,.50) 0%, rgba(18,18,18,.22) 36%, rgba(18,18,18,.08) 100%), url("../photos/offres-cta.jpg?v=20260813") no-repeat center 32%/cover} } /* ================================================================== 3. ACCUEIL - CONSTAT ET BANDEAU CLIENTS « "Transformations durables" n'a pas la même police » : la phrase de chute était la seule du bloc en Archivo, tout le reste de la colonne est en Hanken Grotesk. Elle rejoint la police du corps, la barre or et la taille tenant seules l'accent. ================================================================== */ .constat-body p.constat-punch{font-family:var(--body);font-weight:700; font-size:clamp(1.06rem,1.7vw,1.3rem);line-height:1.45;letter-spacing:0} .constat-punch b{font-weight:800} /* « Réduire espace blanc en bas » */ .constat{padding-bottom:clamp(36px,5vw,64px)} /* « Réduire la hauteur de la section » (bandeau clients) */ .clients{padding:clamp(34px,4.2vw,54px) 0} .clients .logo-marquee{margin-top:clamp(20px,2.6vw,30px)} /* ================================================================== 4. VERBATIMS - GUILLEMET AU BON JAUNE « je pense que les guillemets ne sont pas du même jaune que le reste » : exact, .vbt::before était en --gold-deep quand tous les autres guillemets du site sont en --gold. ================================================================== */ .vbt::before{color:var(--gold)} /* ================================================================== 5. APPROCHE - BANDEAU ALEZAN ET SOFT SKILLS ================================================================== */ /* .banner-figure-approche .banner-quote impose max-width:15ch (0,2,0) : il faut la même spécificité pour laisser la phrase tenir sur 3 lignes. */ .banner-figure-approche .banner-quote-3l{max-width:none;width:max-content} @media(max-width:640px){ .banner-figure-approche .banner-quote-3l{max-width:22ch;width:auto} .banner-quote-3l br{display:none} } /* « je ne suis pas fan du graphisme : [...] avec des traits jaunes en haut et en bas pour séparer les skills ». Les cartes deviennent une liste de lignes séparées par des filets or, sur trois colonnes. */ .skills-filets{display:grid;grid-template-columns:repeat(3,1fr); gap:0 clamp(24px,3vw,44px);margin-top:clamp(28px,3.6vw,44px); border-top:2px solid var(--gold)} .skills-filets .skill{background:none;border:0;border-radius:0;box-shadow:none; padding:1.05rem 0;border-bottom:1px solid var(--line);gap:.85rem} .skills-filets .skill:hover{transform:none;box-shadow:none} /* les trois dernières lignes de la grille portent le filet or de clôture */ .skills-filets .skill:nth-last-child(-n+3){border-bottom:2px solid var(--gold)} .skills-filets .skill-ico{width:8px;height:8px;background:var(--gold);border:0} .skills-filets .skill h3{font-size:1.06rem} @media(max-width:900px){ .skills-filets{grid-template-columns:repeat(2,1fr)} .skills-filets .skill:nth-last-child(-n+3){border-bottom:1px solid var(--line)} .skills-filets .skill:nth-last-child(-n+2){border-bottom:2px solid var(--gold)} } @media(max-width:560px){ .skills-filets{grid-template-columns:1fr} .skills-filets .skill:nth-last-child(-n+2){border-bottom:1px solid var(--line)} .skills-filets .skill:last-child{border-bottom:2px solid var(--gold)} } /* ================================================================== 6. OFFRES - VIGNETTES DE FORMATS, CAS CLIENTS, « EN PRATIQUE » ================================================================== */ .offres-grid-page{margin-top:clamp(28px,3.6vw,44px); margin-bottom:clamp(30px,4vw,52px)} .offre-voir{margin-top:1.05rem;padding:.62rem 1.15rem;font-size:.92rem} .offre-voir .arr{transition:transform .3s ease} .offre:hover .offre-voir .arr{transform:translateX(3px)} .formats-chute{max-width:72ch;margin-top:clamp(26px,3.2vw,40px); padding-top:1.15rem;border-top:2px solid var(--gold); color:var(--muted);font-size:1.02rem;line-height:1.65} .formats-chute b{color:var(--ink)} /* « Cas clients : mettre fond en noir pour en faire une section à part » */ .avant-cta-sombre{background:var(--ink)} .avant-cta-sombre .avant-cta-texte{color:var(--paper)} .avant-cta-sombre .lk{color:var(--paper);border-bottom-color:rgba(255,255,255,.34)} .avant-cta-sombre .lk:hover{border-bottom-color:var(--gold)} .avant-cta-sombre .rnd{background:transparent;border-color:rgba(255,255,255,.4); color:var(--paper)} .avant-cta-sombre .more:hover .rnd{background:var(--gold);border-color:var(--gold); color:var(--ink)} /* « Faire 3 sections (séparée par traits jaunes) sans photo sur une même ligne » : les quatre vignettes photo laissent place à trois colonnes de texte, chacune ouverte par un filet or. */ .pratique-filets{display:grid;grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,44px);margin-top:clamp(28px,3.6vw,44px)} .pf{border-top:2px solid var(--gold);padding-top:1.25rem} .pf h3{font-size:1.1rem;margin-bottom:.6rem;max-width:22ch} .pf p{color:var(--muted);font-size:.97rem;line-height:1.65} .pf-lien{margin-top:1rem} @media(max-width:900px){.pratique-filets{grid-template-columns:1fr}} /* ================================================================== 7. ACCUEIL - TEXTE SEO « PLANQUÉ AU MAX » Fond noir, pas de gras, corps réduit. Le plancher reste ~14 px et le contraste réel : en dessous, ou en texte de la couleur du fond, Google traite le bloc comme dissimulé et le dévalorise - l'effet serait l'inverse de celui recherché. ================================================================== */ .seo-text-sombre{background:var(--ink);padding:clamp(34px,4.2vw,56px) 0} .seo-text-sombre .seo-acc{border-color:rgba(255,255,255,.14)} .seo-text-sombre .seo-acc summary h2, .seo-text-sombre .seo-text h2{color:rgba(246,242,233,.62)} .seo-text-sombre h2{font-size:clamp(.94rem,1.2vw,1.04rem);font-weight:500; letter-spacing:0;color:rgba(246,242,233,.62)} .seo-text-sombre summary:hover h2{color:var(--paper)} .seo-text-sombre .seo-acc-i{color:rgba(246,242,233,.62)} .seo-text-sombre p,.seo-text-sombre li{color:rgba(246,242,233,.60);font-size:.86rem} .seo-text-sombre p b,.seo-text-sombre li b{color:rgba(246,242,233,.78);font-weight:400} .seo-text-sombre .lk{color:rgba(246,242,233,.78); border-bottom-color:rgba(255,255,255,.28)} .seo-text-sombre .lk:hover{color:var(--paper);border-bottom-color:var(--gold)} .seo-text-sombre li::before{color:rgba(246,242,233,.45)} /* ================================================================== 8. EN IMAGES - RENVOI FINAL « changer ligne grise du bas par une ligne jaune » : le soulignement gris de .lk sous le lien de renvoi. ================================================================== */ .galerie-renvoi .lk{border-bottom-color:var(--gold)} /* ================================================================== 9. PAGE « QU'EST-CE QUE L'ÉQUICOACHING ? » « contrairement aux autres pages, il y a beaucoup d'alignements différents des textes » : .texte-entete et .texte-corps sont centrés (margin:0 auto) alors que les sections en grille se calent à gauche dans le .wrap. Sur cette page, tout part du même bord gauche. ================================================================== */ .page-definition .texte-entete, .page-definition .texte-corps{margin-left:0;margin-right:0;max-width:72ch} .page-definition .texte-entete h2, .page-definition .principes-grid + .cartes-plus, .page-definition h2{max-width:30ch} .page-definition .texte-intro{max-width:72ch} /* « Mettre section "pour aller plus loin" en blanc » */ .page-definition .suite-sec{background:var(--paper)} .page-definition .suite-carte{background:var(--paper-2)} .cartes-plus{margin-top:clamp(26px,3.2vw,38px)} .suite-chute{margin-top:clamp(24px,3vw,34px);padding-top:1.15rem; border-top:2px solid var(--gold);font-family:var(--display);font-weight:700; font-size:clamp(1.05rem,1.7vw,1.3rem);letter-spacing:-.01em} @media(prefers-reduced-motion:reduce){ .offre-voir .arr{transition:none} } /* <<< RETOURS DU 25/09 >>> */ /* >>> RETOURS DU 26/09 <<< */ /* ================================================================== 1. ACCUEIL - ALTERNANCE BLANC / GRIS EN BAS DE PAGE « Comme on a remonte la section "lieux", il y a des sections de la meme couleur d'affile en bas de la page : retablir alternance blanc / gris. » La bande Lieux, remontee le 25/09, s'est retrouvee blanche juste apres le verbatim, blanc lui aussi ; et la galerie grise juste avant la FAQ, grise elle aussi. Les deux fonds sont inverses, ce qui remet l'alternance sur toute la fin de page : verbatim blanc, Lieux gris, galerie blanche, FAQ grise, CTA noire. ================================================================== */ .hp-lieux{background:var(--paper-2);border-top:1px solid var(--line)} .gallery{background:var(--paper)} /* ================================================================== 2. APPROCHE - « LA PHOTO EST VRAIMENT BLANCHE EN HAUT » (TELEPHONE) Deux causes cumulees. La luminosite avait ete poussee a 1,36 le 25/09 pour toutes les largeurs. Et le halo de l'en-tete reste ancre a 27 % de la largeur alors que le texte, sur telephone, occupe toute la colonne : le haut de l'image ne recoit donc presque aucun voile (alpha 0,04). On rend du contraste a l'image et on recentre le halo, sans revenir a la photo sombre dont la cliente se plaignait. ================================================================== */ @media(max-width:820px){ .page-hero-plus-clair .page-hero-bg img{ filter:brightness(1.12) contrast(1.10) saturate(1.10)} .page-hero-plus-clair.page-hero-clair::after{background: radial-gradient(ellipse 112% 68% at 50% 58%, rgba(18,18,18,.62), rgba(18,18,18,.06) 86%), linear-gradient(rgba(18,18,18,.22) 0%, rgba(18,18,18,.12) 46%, rgba(18,18,18,.20) 100%)} } /* ================================================================== 3. APPROCHE - VERBATIM « LES MOTS SONT COLLES » (TELEPHONE) La citation est coupee en trois lignes par des
masques sur telephone. Masquer un
ne cree aucune espace : « davantage » et « d'un cheval » se retrouvaient soudes. Les espaces sont maintenant ecrites dans le balisage (voir 07_approche.py) ; ici on s'assure que la coupure de mot ne revienne pas par la marge. ================================================================== */ .banner-quote-3l{overflow-wrap:break-word} /* ================================================================== 4. FAQ - LA JOURNEE TYPE « Mettre "09h00" aligner » : la colonne des heures est elargie et passe en chiffres a largeur fixe, pour que 09h00 et 10h00 tombent l'un sous l'autre au pixel. « Sur telephone il n'y a pas d'espaces entre heures et texte » : la ligne passait bien en bloc, mais pas l'heure elle-meme, qui restait en ligne collee a son libelle. L'heure prend sa propre ligne. ================================================================== */ .faq-a .horaires li b{flex:0 0 4rem;font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1} @media(max-width:820px){ .faq-a .horaires li b{display:block;flex:none;margin-bottom:.2rem} } /* ================================================================== 5. OFFRES - LES 4 FORMATS EN LIGNES « Mettre le texte descriptif a droite des vignettes (sans bouton d'ouverture). Dans ce cas les 4 vignettes sont a la suite les une des autres. » Une ligne par format : vignette a gauche, descriptif complet a droite. Plus d'accordeon, donc plus de contenu masque au chargement. ================================================================== */ .formats-lignes{margin-top:clamp(28px,3.6vw,46px);border-top:1px solid var(--line)} .format-ligne{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:clamp(22px,3.2vw,46px);align-items:start; padding:clamp(26px,3.2vw,44px) 0;border-bottom:1px solid var(--line); scroll-margin-top:110px} .format-img{margin:0;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3; background:linear-gradient(160deg,#23292b,#0E0E0E)} .format-img img{width:100%;height:100%;object-fit:cover;display:block; transition:transform .9s cubic-bezier(.2,.7,.2,1)} .format-ligne:hover .format-img img{transform:scale(1.04)} .format-num{display:block;font-family:var(--display);font-weight:900; color:var(--gold-deep);font-size:.95rem;letter-spacing:.06em} .format-corps h3{font-size:clamp(1.25rem,2.1vw,1.62rem);letter-spacing:-.02em; margin:.3rem 0 .9rem;max-width:26ch} .format-chapo{color:var(--ink);font-size:1.02rem;line-height:1.65;max-width:70ch} .format-corps h4{font-family:var(--body);font-size:.76rem;letter-spacing:.16em; text-transform:uppercase;color:var(--muted);font-weight:700; margin:1.45rem 0 .8rem} .format-duree{margin-top:1.35rem;padding-top:.95rem; border-top:2px solid var(--gold);font-family:var(--display);font-weight:800; font-size:1rem} .format-duree span{color:var(--gold-deep)} @media(max-width:820px){ .format-ligne{grid-template-columns:1fr;gap:1.25rem} .format-img{aspect-ratio:16/10} } @media(prefers-reduced-motion:reduce){ .format-img img{transition:none} .format-ligne:hover .format-img img{transform:none} } /* ================================================================== 6. PAGE DE DEFINITION - LES SOURCES EN BAS DE PAGE « Comme demande, mettre les sources tout en bas de la page. » Derniere bande de contenu avant la CTA, volontairement discrete : c'est une note de bas de page, pas une section a part entiere. ================================================================== */ .sources-sec{background:var(--paper-2);border-top:1px solid var(--line); padding:clamp(28px,3.4vw,44px) 0} .sources-titre{font-family:var(--body);font-size:.76rem;letter-spacing:.16em; text-transform:uppercase;color:var(--muted);font-weight:700;margin:0 0 .85rem} .sources-liste{margin:0;padding-left:1.45rem;display:flex;flex-direction:column; gap:.5rem;max-width:88ch} .sources-liste li{font-size:.86rem;line-height:1.6;color:var(--muted)} .sources-liste li::marker{color:var(--gold-deep)} /* <<< RETOURS DU 26/09 >>> */ /* >>> RETOURS DU 27/09 <<< */ /* ================================================================== 1. SURLIGNAGE JAUNE : UNE CLASSE, UTILISABLE PARTOUT « Il n'y a aucun surlignage a part la 1ere section de la home page : ne faudrait-il pas en mettre ailleurs ? » Le traitement existait, mais seulement sous deux selecteurs de l'accueil (.constat h2 em et .banner-quote em). Il devient une classe, posee sur le premier grand titre de chacune des 18 autres pages (voir 04_surlignages.py). Meme geometrie que l'original, pour que les deux soient indiscernables : barre aux bouts arrondis en ::after, isolation:isolate obligatoire, sans quoi le z-index negatif ferait passer la barre derriere le fond de la section. `nowrap` empeche la barre de se couper en deux sur telephone : c'est pour cela que les mots surlignes sont courts. ================================================================== */ em.surligne{font-style:normal;position:relative;isolation:isolate; white-space:nowrap} em.surligne::after{content:"";position:absolute;z-index:-1; left:-.05em;right:-.05em;bottom:.12em;height:.17em; border-radius:99px;background:var(--gold)} /* ================================================================== 2. ACCUEIL - LA PHRASE « SIGNATURE » MISE EN EXERGUE « Il faudrait mettre en exergue la phrase suivante, elle est importante (gras / police plus grande ?) » Elle passe au-dessus du corps de la colonne (1,09 rem au maximum) sans atteindre la phrase de chute « transformations durables » (1,3 rem), qui doit rester le dernier mot du bloc. Le texte quitte le gris pour le noir du corps de page : a cette taille, le gris secondaire ne tient plus. Le selecteur reprend `.constat-body p` pour passer devant lui. ================================================================== */ .constat-body p.constat-signature{font-size:clamp(1.09rem,1.7vw,1.24rem); line-height:1.5;color:var(--ink);max-width:54ch} /* ================================================================== 3. OFFRES - « AUGMENTER LA POLICE DES TEXTES QUI PRESENTENT LES OFFRES » Les descriptifs des quatre formats etaient le point bas de la page : 0,97 rem pour les listes, 1,02 rem pour les chapos, quand l'accroche de l'en-tete monte a 1,26 rem. L'ecart se voyait d'autant plus depuis que les formats sont en pleine largeur (26/09). Hausse mesuree, pas une refonte : +7 % environ sur le texte courant, +10 % sur les titres de format. Les valeurs restent en clamp(), la lecture sur telephone ne change donc pas. ================================================================== */ .format-chapo{font-size:clamp(1.08rem,1.4vw,1.16rem);line-height:1.62} .format-corps .brique-liste li{font-size:clamp(1.02rem,1.3vw,1.09rem); line-height:1.6} .format-corps h3{font-size:clamp(1.35rem,2.3vw,1.78rem)} .format-duree{font-size:1.06rem} .formats-chute{font-size:clamp(1.08rem,1.4vw,1.16rem);line-height:1.62} /* <<< RETOURS DU 27/09 >>> */ /* >>> PHOTOS DU 27/09 <<< */ /* ================================================================== 1. ACCUEIL - LE BANDEAU « IL RÉVÈLE EN QUELQUES MINUTES » La photo noir et blanc d'origine est remplacée par la photo 1 du PPT. Le voile blanc de droite, qui porte la phrase, est conservé tel quel : la nouvelle image y est déjà claire. ================================================================== */ /* 28/09 : `.banner-figure` seul ecrasait `.banner-figure-approche`, de meme specificite mais declaree plus haut. La page Approche affichait donc le bandeau de l'accueil. Le modificateur est desormais exclu nommement. */ .banner-figure:not(.banner-figure-approche){ background-image:url("../photos/accueil/bandeau.jpg?v=20260927"); background-position:50% 42%} @media(max-width:640px){ .banner-figure:not(.banner-figure-approche){background-position:42% 52%} } /* ================================================================== 2. BANDES CTA - PHOTOS DE LA REVUE DU 27/09 ================================================================== */ .final-approche::before{background: radial-gradient(ellipse 74% 70% at 50% 50%, rgba(18,18,18,.80), rgba(18,18,18,.14) 84%), linear-gradient(rgba(18,18,18,.24),rgba(18,18,18,.34)), url("../photos/approche-cta.jpg?v=20260927") no-repeat center 46%/cover} .final-clients::before{background: radial-gradient(ellipse 74% 70% at 50% 50%, rgba(18,18,18,.80), rgba(18,18,18,.14) 84%), linear-gradient(rgba(18,18,18,.24),rgba(18,18,18,.34)), url("../photos/clients/clients-cta.jpg?v=20260927") no-repeat center 44%/cover} .final-lieux::before{background: radial-gradient(ellipse 74% 70% at 50% 50%, rgba(18,18,18,.80), rgba(18,18,18,.14) 84%), linear-gradient(rgba(18,18,18,.24),rgba(18,18,18,.34)), url("../photos/lieux/lieux-cta.jpg?v=20260927") no-repeat center 52%/cover} .final-equipe::before{background: radial-gradient(ellipse 74% 70% at 50% 50%, rgba(18,18,18,.80), rgba(18,18,18,.14) 84%), linear-gradient(rgba(18,18,18,.24),rgba(18,18,18,.34)), url("../photos/equipe/equipe-cta.jpg?v=20260927") no-repeat center 44%/cover} .final-blog::before{background: radial-gradient(ellipse 74% 70% at 50% 50%, rgba(18,18,18,.80), rgba(18,18,18,.14) 84%), linear-gradient(rgba(18,18,18,.24),rgba(18,18,18,.34)), url("../photos/blog-cta.jpg?v=20260927") no-repeat center 46%/cover} .final-faq::before{background: radial-gradient(ellipse 74% 70% at 50% 50%, rgba(18,18,18,.80), rgba(18,18,18,.14) 84%), linear-gradient(rgba(18,18,18,.24),rgba(18,18,18,.34)), url("../photos/faq-cta.jpg?v=20260927") no-repeat center 48%/cover} @media(max-width:640px){ .final-approche::before{background: radial-gradient(ellipse 96% 60% at 50% 56%, rgba(18,18,18,.68), rgba(18,18,18,.14) 84%), linear-gradient(rgba(18,18,18,.62) 0%, rgba(18,18,18,.32) 36%, rgba(18,18,18,.16) 100%), url("../photos/approche-cta.jpg?v=20260927") no-repeat center 46%/cover} .final-clients::before{background: radial-gradient(ellipse 96% 60% at 50% 56%, rgba(18,18,18,.68), rgba(18,18,18,.14) 84%), linear-gradient(rgba(18,18,18,.62) 0%, rgba(18,18,18,.32) 36%, rgba(18,18,18,.16) 100%), url("../photos/clients/clients-cta.jpg?v=20260927") no-repeat center 44%/cover} .final-lieux::before{background: radial-gradient(ellipse 96% 60% at 50% 56%, rgba(18,18,18,.68), rgba(18,18,18,.14) 84%), linear-gradient(rgba(18,18,18,.62) 0%, rgba(18,18,18,.32) 36%, rgba(18,18,18,.16) 100%), url("../photos/lieux/lieux-cta.jpg?v=20260927") no-repeat center 52%/cover} .final-equipe::before{background: radial-gradient(ellipse 96% 60% at 50% 56%, rgba(18,18,18,.68), rgba(18,18,18,.14) 84%), linear-gradient(rgba(18,18,18,.62) 0%, rgba(18,18,18,.32) 36%, rgba(18,18,18,.16) 100%), url("../photos/equipe/equipe-cta.jpg?v=20260927") no-repeat center 44%/cover} .final-blog::before{background: radial-gradient(ellipse 96% 60% at 50% 56%, rgba(18,18,18,.68), rgba(18,18,18,.14) 84%), linear-gradient(rgba(18,18,18,.62) 0%, rgba(18,18,18,.32) 36%, rgba(18,18,18,.16) 100%), url("../photos/blog-cta.jpg?v=20260927") no-repeat center 46%/cover} .final-faq::before{background: radial-gradient(ellipse 96% 60% at 50% 56%, rgba(18,18,18,.68), rgba(18,18,18,.14) 84%), linear-gradient(rgba(18,18,18,.62) 0%, rgba(18,18,18,.32) 36%, rgba(18,18,18,.16) 100%), url("../photos/faq-cta.jpg?v=20260927") no-repeat center 48%/cover} } /* <<< PHOTOS DU 27/09 >>> */ /* >>> VOILE DES EN-TÊTES, 27/09 <<< */ .page-hero-clair .page-hero-bg img{filter:brightness(1.14) contrast(1.04)} .page-hero-clair::after{background: radial-gradient(ellipse 104% 100% at 32% 50%, rgba(18,18,18,.74), rgba(18,18,18,.12) 86%), linear-gradient(96deg, rgba(18,18,18,.58) 0%, rgba(18,18,18,.44) 58%, rgba(18,18,18,.10) 94%), linear-gradient(rgba(18,18,18,.14),rgba(18,18,18,.26))} .page-hero-plus-clair .page-hero-bg img{filter:brightness(1.18) contrast(1.05)} .page-hero-plus-clair.page-hero-clair::after{background: radial-gradient(ellipse 100% 100% at 30% 50%, rgba(18,18,18,.76), rgba(18,18,18,.10) 84%), linear-gradient(96deg, rgba(18,18,18,.56) 0%, rgba(18,18,18,.42) 60%, rgba(18,18,18,.08) 92%), linear-gradient(rgba(18,18,18,.12),rgba(18,18,18,.22))} .page-hero-clients.page-hero-clair::after{background: radial-gradient(ellipse 104% 100% at 32% 50%, rgba(18,18,18,.74), rgba(18,18,18,.12) 86%), linear-gradient(96deg, rgba(18,18,18,.58) 0%, rgba(18,18,18,.44) 58%, rgba(18,18,18,.10) 94%), linear-gradient(rgba(18,18,18,.14),rgba(18,18,18,.26))} @media(max-width:820px){ .page-hero-clair::after{background: radial-gradient(ellipse 130% 92% at 50% 52%, rgba(18,18,18,.72), rgba(18,18,18,.18) 88%), linear-gradient(rgba(18,18,18,.34) 0%, rgba(18,18,18,.26) 50%, rgba(18,18,18,.38) 100%)} .page-hero-plus-clair.page-hero-clair::after{background: radial-gradient(ellipse 128% 92% at 50% 54%, rgba(18,18,18,.70), rgba(18,18,18,.16) 88%), linear-gradient(rgba(18,18,18,.30) 0%, rgba(18,18,18,.22) 48%, rgba(18,18,18,.34) 100%)} } /* <<< VOILE DES EN-TÊTES, 27/09 >>> */ /* >>> CTA DE LA PAGE EN IMAGES, 28/09 <<< */ /* Photo de groupe demandee le 28/09. Modificateur propre a la page En images : `.final-ressources` sert aussi la page de definition, qui garde sa photo. */ .final-galerie::before{background: radial-gradient(ellipse 74% 70% at 50% 50%, rgba(18,18,18,.78), rgba(18,18,18,.12) 84%), linear-gradient(rgba(18,18,18,.20),rgba(18,18,18,.30)), url("../photos/galerie/en-images-cta.jpg?v=20260928") no-repeat center 42%/cover} @media(max-width:640px){ .final-galerie::before{background: radial-gradient(ellipse 96% 60% at 50% 56%, rgba(18,18,18,.66), rgba(18,18,18,.12) 84%), linear-gradient(rgba(18,18,18,.60) 0%, rgba(18,18,18,.30) 36%, rgba(18,18,18,.14) 100%), url("../photos/galerie/en-images-cta.jpg?v=20260928") no-repeat center 42%/cover} } /* <<< CTA DE LA PAGE EN IMAGES, 28/09 >>> */ /* >>> SURVOL DES CARTES EQUIPE, 28/09 <<< */ .profil{position:relative; transition:transform .3s ease,box-shadow .3s ease} .profil::before{content:"";position:absolute;top:0;left:0;width:0;height:4px; background:var(--gold);transition:width .35s ease;z-index:3} .profil:hover::before{width:100%} .profil:hover{transform:translateY(-3px);box-shadow:0 22px 44px -32px rgba(14,14,14,.45)} .profil-img img{transition:transform .9s cubic-bezier(.2,.7,.2,1)} .profil:hover .profil-img img{transform:scale(1.05)} @media(prefers-reduced-motion:reduce){ .profil{transition:none} .profil:hover{transform:none} .profil:hover .profil-img img{transform:none} } /* <<< SURVOL DES CARTES EQUIPE, 28/09 >>> */ /* >>> BANDEAU DE L'ACCUEIL EN BLANC, 28/09 <<< */ /* Le selecteur porte `.banner-band` pour ne viser QUE l'accueil : la page Approche reutilise `.banner-figure`, avec son propre voile clair. */ .banner-band .banner-figure::before{background: linear-gradient(90deg, rgba(18,18,18,0) 26%, rgba(18,18,18,.40) 56%, rgba(18,18,18,.70) 84%)} .banner-band .banner-quote{color:#fff} .banner-band .banner-quote em{color:#fff} @media(max-width:640px){ .banner-band .banner-figure::before{background: linear-gradient(180deg, rgba(18,18,18,.70) 0%, rgba(18,18,18,.46) 40%, rgba(18,18,18,0) 72%)} } /* <<< BANDEAU DE L'ACCUEIL EN BLANC, 28/09 >>> */ /* >>> LUMINOSITÉ, 2e PASSE DU 28/09 <<< */ /* --- 1. LA BASE, restaurée telle qu'elle était AVANT le 27/09 ----------- Valeurs reprises au centième près de `maquette-avant-20260927.tar.gz`. Ne pas les « améliorer » : c'est ce rendu précis que la cliente demande. */ .page-hero-clair .page-hero-bg img{filter:brightness(1.28) contrast(1.02)} .page-hero-clair::after{background: radial-gradient(ellipse 76% 86% at 27% 50%, rgba(18,18,18,.56), rgba(18,18,18,.02) 80%), linear-gradient(96deg, rgba(18,18,18,.36) 0%, rgba(18,18,18,.16) 54%, rgba(18,18,18,0) 78%), linear-gradient(rgba(18,18,18,.04),rgba(18,18,18,.10))} .page-hero-plus-clair .page-hero-bg img{filter:brightness(1.36) contrast(1.03)} .page-hero-plus-clair.page-hero-clair::after{background: radial-gradient(ellipse 68% 76% at 27% 50%, rgba(18,18,18,.78), rgba(18,18,18,.02) 80%), linear-gradient(96deg, rgba(18,18,18,.42) 0%, rgba(18,18,18,.26) 60%, rgba(18,18,18,0) 84%), linear-gradient(rgba(18,18,18,.04),rgba(18,18,18,.10))} .page-hero-clients.page-hero-clair::after{background: radial-gradient(ellipse 64% 80% at 26% 48%, rgba(18,18,18,.62), rgba(18,18,18,.03) 80%), linear-gradient(96deg, rgba(18,18,18,.40) 0%, rgba(18,18,18,.20) 58%, rgba(18,18,18,0) 82%), linear-gradient(rgba(18,18,18,.04),rgba(18,18,18,.10))} @media(max-width:820px){ .page-hero-clair::after{background: radial-gradient(ellipse 108% 72% at 50% 54%, rgba(18,18,18,.66), rgba(18,18,18,.10) 84%), linear-gradient(rgba(18,18,18,.24),rgba(18,18,18,.30))} .page-hero-plus-clair .page-hero-bg img{ filter:brightness(1.12) contrast(1.10) saturate(1.10)} .page-hero-plus-clair.page-hero-clair::after{background: radial-gradient(ellipse 112% 68% at 50% 58%, rgba(18,18,18,.62), rgba(18,18,18,.06) 86%), linear-gradient(rgba(18,18,18,.22) 0%, rgba(18,18,18,.12) 46%, rgba(18,18,18,.20) 100%)} } /* --- 2. LES TROIS RETOUCHES QU'ELLE NOMME ------------------------------- « Peut encore éclaircir le cheval sans toucher à la femme ? » : sur ces deux photos le cheval est À GAUCHE, donc précisément sous le halo qui porte le texte. On l'allège et on le resserre au lieu de toucher à la luminosité, qui atteindrait aussi la femme, à droite. */ .page-hero-approche.page-hero-clair::after{background: radial-gradient(ellipse 60% 72% at 24% 50%, rgba(18,18,18,.62), rgba(18,18,18,.02) 76%), linear-gradient(96deg, rgba(18,18,18,.30) 0%, rgba(18,18,18,.16) 56%, rgba(18,18,18,0) 80%), linear-gradient(rgba(18,18,18,.03),rgba(18,18,18,.08))} /* « Les cheveux de la femme sont très jaunes » : c'est la saturation, pas la luminosité. On la passe SOUS 1, le reste de la photo ne bouge pas. */ .page-hero-approche .page-hero-bg img{ filter:brightness(1.36) contrast(1.03) saturate(.90)} .page-hero-offres.page-hero-clair::after{background: radial-gradient(ellipse 62% 78% at 24% 50%, rgba(18,18,18,.50), rgba(18,18,18,.02) 76%), linear-gradient(96deg, rgba(18,18,18,.28) 0%, rgba(18,18,18,.12) 54%, rgba(18,18,18,0) 76%), linear-gradient(rgba(18,18,18,.03),rgba(18,18,18,.08))} /* « Éclaircir la partie droite pour faire ressortir l'herbe » : le voile plat tombe à presque rien et le dégradé latéral s'éteint plus tôt. */ .page-hero-lieux.page-hero-clair::after{background: radial-gradient(ellipse 72% 86% at 26% 50%, rgba(18,18,18,.56), rgba(18,18,18,.02) 74%), linear-gradient(96deg, rgba(18,18,18,.34) 0%, rgba(18,18,18,.12) 50%, rgba(18,18,18,0) 70%), linear-gradient(rgba(18,18,18,.02),rgba(18,18,18,.05))} .page-hero-lieux .page-hero-bg img{filter:brightness(1.32) contrast(1.02)} /* Sur ces deux pages le chapô courait jusqu'à ~86 % de la largeur, ce qui obligeait à un halo large... qui assombrissait la femme, à droite, alors que Sandra demande justement de ne pas y toucher. On resserre donc la COLONNE DE TEXTE au lieu d'élargir le voile : le halo peut rester à gauche et léger, et la moitié droite de la photo garde sa luminosité. */ .page-hero-approche .lead, .page-hero-equipe .lead{max-width:44ch} /* --- 3. RENFORTS LOCAUX, posés uniquement d'après la mesure ------------- */ .page-hero-approche.page-hero-clair::after{background: radial-gradient(ellipse 66% 92% at 25% 50%, rgba(18,18,18,0.64), rgba(18,18,18,.02) 78%), linear-gradient(96deg, rgba(18,18,18,0.371) 0%, rgba(18,18,18,0.167) 56%, rgba(18,18,18,0) 80%), linear-gradient(rgba(18,18,18,.03),rgba(18,18,18,.08))} .page-hero-blog.page-hero-clair::after{background: radial-gradient(ellipse 66% 92% at 25% 50%, rgba(18,18,18,0.8), rgba(18,18,18,.02) 78%), linear-gradient(96deg, rgba(18,18,18,0.464) 0%, rgba(18,18,18,0.209) 56%, rgba(18,18,18,0) 80%), linear-gradient(rgba(18,18,18,.03),rgba(18,18,18,.08))} .page-hero-contact.page-hero-clair::after{background: radial-gradient(ellipse 66% 92% at 25% 50%, rgba(18,18,18,0.88), rgba(18,18,18,.02) 78%), linear-gradient(96deg, rgba(18,18,18,0.51) 0%, rgba(18,18,18,0.23) 56%, rgba(18,18,18,0) 80%), linear-gradient(rgba(18,18,18,.03),rgba(18,18,18,.08))} .page-hero-definition.page-hero-clair::after{background: radial-gradient(ellipse 66% 92% at 25% 50%, rgba(18,18,18,0.8), rgba(18,18,18,.02) 78%), linear-gradient(96deg, rgba(18,18,18,0.464) 0%, rgba(18,18,18,0.209) 56%, rgba(18,18,18,0) 80%), linear-gradient(rgba(18,18,18,.03),rgba(18,18,18,.08))} .page-hero-equipe.page-hero-clair::after{background: radial-gradient(ellipse 66% 92% at 25% 50%, rgba(18,18,18,0.8), rgba(18,18,18,.02) 78%), linear-gradient(96deg, rgba(18,18,18,0.464) 0%, rgba(18,18,18,0.209) 56%, rgba(18,18,18,0) 80%), linear-gradient(rgba(18,18,18,.03),rgba(18,18,18,.08))} .page-hero-faq.page-hero-clair::after{background: radial-gradient(ellipse 66% 92% at 25% 50%, rgba(18,18,18,0.88), rgba(18,18,18,.02) 78%), linear-gradient(96deg, rgba(18,18,18,0.51) 0%, rgba(18,18,18,0.23) 56%, rgba(18,18,18,0) 80%), linear-gradient(rgba(18,18,18,.03),rgba(18,18,18,.08))} .page-hero-galerie.page-hero-clair::after{background: radial-gradient(ellipse 66% 92% at 25% 50%, rgba(18,18,18,0.8), rgba(18,18,18,.02) 78%), linear-gradient(96deg, rgba(18,18,18,0.464) 0%, rgba(18,18,18,0.209) 56%, rgba(18,18,18,0) 80%), linear-gradient(rgba(18,18,18,.03),rgba(18,18,18,.08))} .page-hero-lieux.page-hero-clair::after{background: radial-gradient(ellipse 66% 92% at 25% 50%, rgba(18,18,18,0.64), rgba(18,18,18,.02) 78%), linear-gradient(96deg, rgba(18,18,18,0.371) 0%, rgba(18,18,18,0.167) 56%, rgba(18,18,18,0) 80%), linear-gradient(rgba(18,18,18,.03),rgba(18,18,18,.08))} .page-hero-offres.page-hero-clair::after{background: radial-gradient(ellipse 66% 92% at 25% 50%, rgba(18,18,18,0.88), rgba(18,18,18,.02) 78%), linear-gradient(96deg, rgba(18,18,18,0.51) 0%, rgba(18,18,18,0.23) 56%, rgba(18,18,18,0) 80%), linear-gradient(rgba(18,18,18,.03),rgba(18,18,18,.08))} /* --- 3 bis. LES MÊMES RENFORTS, VERSION TÉLÉPHONE ----------------------- */ @media(max-width:820px){ .page-hero-approche.page-hero-clair::after{background: radial-gradient(ellipse 132% 96% at 50% 52%, rgba(18,18,18,0.62), rgba(18,18,18,.14) 88%), linear-gradient(rgba(18,18,18,0.322) 0%, rgba(18,18,18,0.174) 50%, rgba(18,18,18,0.248) 100%)} .page-hero-blog.page-hero-clair::after{background: radial-gradient(ellipse 132% 96% at 50% 52%, rgba(18,18,18,0.7), rgba(18,18,18,.14) 88%), linear-gradient(rgba(18,18,18,0.364) 0%, rgba(18,18,18,0.196) 50%, rgba(18,18,18,0.28) 100%)} .page-hero-clients.page-hero-clair::after{background: radial-gradient(ellipse 132% 96% at 50% 52%, rgba(18,18,18,0.62), rgba(18,18,18,.14) 88%), linear-gradient(rgba(18,18,18,0.322) 0%, rgba(18,18,18,0.174) 50%, rgba(18,18,18,0.248) 100%)} .page-hero-contact.page-hero-clair::after{background: radial-gradient(ellipse 132% 96% at 50% 52%, rgba(18,18,18,0.62), rgba(18,18,18,.14) 88%), linear-gradient(rgba(18,18,18,0.322) 0%, rgba(18,18,18,0.174) 50%, rgba(18,18,18,0.248) 100%)} .page-hero-definition.page-hero-clair::after{background: radial-gradient(ellipse 132% 96% at 50% 52%, rgba(18,18,18,0.62), rgba(18,18,18,.14) 88%), linear-gradient(rgba(18,18,18,0.322) 0%, rgba(18,18,18,0.174) 50%, rgba(18,18,18,0.248) 100%)} .page-hero-equipe.page-hero-clair::after{background: radial-gradient(ellipse 132% 96% at 50% 52%, rgba(18,18,18,0.7), rgba(18,18,18,.14) 88%), linear-gradient(rgba(18,18,18,0.364) 0%, rgba(18,18,18,0.196) 50%, rgba(18,18,18,0.28) 100%)} .page-hero-galerie.page-hero-clair::after{background: radial-gradient(ellipse 132% 96% at 50% 52%, rgba(18,18,18,0.62), rgba(18,18,18,.14) 88%), linear-gradient(rgba(18,18,18,0.322) 0%, rgba(18,18,18,0.174) 50%, rgba(18,18,18,0.248) 100%)} .page-hero-lieux.page-hero-clair::after{background: radial-gradient(ellipse 132% 96% at 50% 52%, rgba(18,18,18,0.7), rgba(18,18,18,.14) 88%), linear-gradient(rgba(18,18,18,0.364) 0%, rgba(18,18,18,0.196) 50%, rgba(18,18,18,0.28) 100%)} .page-hero-offres.page-hero-clair::after{background: radial-gradient(ellipse 132% 96% at 50% 52%, rgba(18,18,18,0.7), rgba(18,18,18,.14) 88%), linear-gradient(rgba(18,18,18,0.364) 0%, rgba(18,18,18,0.196) 50%, rgba(18,18,18,0.28) 100%)} } /* --- 4. LES QUATRE BANDES CTA qu'elle avait nommées ce matin ------------- */ .final-approche::before{background: radial-gradient(ellipse 76% 82% at 50% 48%, rgba(18,18,18,.76), rgba(18,18,18,.06) 82%), linear-gradient(rgba(18,18,18,.10),rgba(18,18,18,.18)), url("../photos/approche-cta.jpg?v=20260927") no-repeat center 46%/cover} .final-lieux::before{background: radial-gradient(ellipse 76% 82% at 50% 48%, rgba(18,18,18,.76), rgba(18,18,18,.06) 82%), linear-gradient(rgba(18,18,18,.10),rgba(18,18,18,.18)), url("../photos/lieux/lieux-cta.jpg?v=20260927") no-repeat center 52%/cover} .final-equipe::before{background: radial-gradient(ellipse 76% 82% at 50% 48%, rgba(18,18,18,.76), rgba(18,18,18,.06) 82%), linear-gradient(rgba(18,18,18,.10),rgba(18,18,18,.18)), url("../photos/equipe/equipe-cta.jpg?v=20260927") no-repeat center 44%/cover} .final-faq::before{background: radial-gradient(ellipse 76% 82% at 50% 48%, rgba(18,18,18,.76), rgba(18,18,18,.06) 82%), linear-gradient(rgba(18,18,18,.10),rgba(18,18,18,.18)), url("../photos/faq-cta.jpg?v=20260927") no-repeat center 48%/cover} @media(max-width:640px){ .final-approche::before{background: radial-gradient(ellipse 96% 62% at 50% 54%, rgba(18,18,18,.66), rgba(18,18,18,.08) 86%), linear-gradient(rgba(18,18,18,.62) 0%, rgba(18,18,18,.26) 40%, rgba(18,18,18,.10) 100%), url("../photos/approche-cta.jpg?v=20260927") no-repeat center 46%/cover} .final-lieux::before{background: radial-gradient(ellipse 96% 62% at 50% 54%, rgba(18,18,18,.66), rgba(18,18,18,.08) 86%), linear-gradient(rgba(18,18,18,.62) 0%, rgba(18,18,18,.26) 40%, rgba(18,18,18,.10) 100%), url("../photos/lieux/lieux-cta.jpg?v=20260927") no-repeat center 52%/cover} .final-equipe::before{background: radial-gradient(ellipse 96% 62% at 50% 54%, rgba(18,18,18,.66), rgba(18,18,18,.08) 86%), linear-gradient(rgba(18,18,18,.62) 0%, rgba(18,18,18,.26) 40%, rgba(18,18,18,.10) 100%), url("../photos/equipe/equipe-cta.jpg?v=20260927") no-repeat center 44%/cover} .final-faq::before{background: radial-gradient(ellipse 96% 62% at 50% 54%, rgba(18,18,18,.66), rgba(18,18,18,.08) 86%), linear-gradient(rgba(18,18,18,.62) 0%, rgba(18,18,18,.26) 40%, rgba(18,18,18,.10) 100%), url("../photos/faq-cta.jpg?v=20260927") no-repeat center 48%/cover} } /* <<< LUMINOSITÉ, 2e PASSE DU 28/09 >>> */