/* ========================================================= SénéTrad — Design system v2 (canonique) Base : maquette Claude (fidèle au brief) + héro/réassurance façon Stitch. Palette : vert forêt (structure) · or (conversion) · neutres chauds. Type : Inter 600/700 (titres) · Poppins 400/500/600 (corps). Polices chargées via Google Fonts dans le de chaque page. (Auto-hébergement .woff2 dans /fonts/ = bloquant à régler avant prod ; voir fonts/README.txt. Bascule @font-face possible plus tard.) ========================================================= */ :root{ /* — Verts — */ --vert-900:#0E2A1F; /* aplats très profonds (footer) */ --vert-800:#123528; /* fonds sombres, réassurance, titres */ --vert-700:#1B4332; /* signature */ --vert-600:#245C44; /* survols */ /* — Or / ambre — */ --or-600:#C4861A; /* survol CTA */ --or-500:#E0A22B; /* CTA, accents */ --or-400:#EDBE5E; /* décor clair */ /* — Neutres chauds — */ --creme:#FAF6EF; /* « le blanc » */ --sable:#F1E9DB; /* fond alterné */ --encre:#25231E; /* texte courant */ --encre-60:#5b574d; /* texte secondaire (AA sur crème) */ --terre:#B5654A; /* touche <5% — évocation, jamais cliché */ /* — Lignes / surfaces — */ --ligne:#E7DECF; --ligne-sombre:rgba(250,246,239,.16); /* — Rayons — */ --r-s:12px; --r-m:16px; --r-l:22px; --r-pill:999px; /* — Ombres diffuses, légères — */ --sh-1:0 1px 2px rgba(14,42,31,.05), 0 8px 24px rgba(14,42,31,.06); --sh-2:0 2px 6px rgba(14,42,31,.06), 0 18px 40px rgba(14,42,31,.10); --sh-or:0 8px 22px rgba(196,134,26,.28); /* — Espace — */ --pad-section:clamp(3.5rem, 7vw, 6.5rem); --maxw:1140px; --measure:68ch; /* — Polices — */ --font-titre:"Inter",system-ui,-apple-system,sans-serif; /* titres */ --font-corps:"Poppins",system-ui,-apple-system,sans-serif; /* corps */ } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ margin:0; font-family:var(--font-corps); font-size:1.0625rem; line-height:1.6; color:var(--encre); background:var(--creme); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } h1,h2,h3{ font-family:var(--font-titre); font-weight:700; line-height:1.14; letter-spacing:-.02em; margin:0; text-wrap:balance; } h1{font-size:clamp(2.3rem,1.4rem + 4.2vw,4rem)} h2{font-size:clamp(1.85rem,1.2rem + 2.6vw,2.7rem)} h3{font-size:1.3rem;line-height:1.25} p{margin:0} a{color:inherit} img,svg{display:block;max-width:100%} .wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(1.15rem,4vw,2rem)} .section{padding-block:var(--pad-section)} .measure{max-width:var(--measure)} /* Phrase factuelle clé (« money sentence ») */ .money{ font-weight:600; font-size:1.2rem; line-height:1.5; margin-top:.85rem; } .eyebrow{ font-size:.8rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--vert-700); margin:0 0 .9rem; } /* Bloc de texte courant (sections informatives) */ .prose{max-width:var(--measure)} .prose p{margin-top:1.05rem;color:var(--encre-60)} .prose p:first-child{margin-top:0} .prose a{color:var(--vert-700);font-weight:600} .prose a:hover{color:var(--or-600)} .prose h3{margin-top:1.9rem;color:var(--vert-800)} .prose ul,.prose ol{margin:1rem 0 0;padding-left:1.25rem} .prose li{margin-top:.45rem;color:var(--encre-60)} .prose li::marker{color:var(--or-600)} .prose .links{margin-top:1.3rem;display:flex;flex-wrap:wrap;gap:.5rem 1.6rem} /* Deux colonnes de contenu (ex. sens des documents) */ .split2{display:grid;gap:1.6rem;margin-top:2.4rem} @media(min-width:760px){.split2{grid-template-columns:repeat(2,1fr)}} .split2 .panel{background:#fff;border:1px solid var(--ligne);border-radius:var(--r-m); padding:1.5rem 1.6rem;box-shadow:var(--sh-1)} .split2 .panel h3{color:var(--vert-800);font-size:1.15rem;display:flex;align-items:center;gap:.55rem} .split2 .panel ul{margin:1rem 0 0;padding-left:1.2rem} .split2 .panel li{margin-top:.5rem;color:var(--encre-60)} .split2 .panel li::marker{color:var(--or-600)} /* ---------- Icônes (au trait, arrondies, un seul style) ---------- */ .ico{width:24px;height:24px;flex:none;stroke:currentColor;stroke-width:1.7; fill:none;stroke-linecap:round;stroke-linejoin:round} .ico-lg{width:30px;height:30px} /* ---------- Boutons ---------- */ .btn{ display:inline-flex;align-items:center;gap:.55rem; min-height:52px;padding:.5rem 1.4rem; border-radius:var(--r-pill); font-family:inherit;font-size:1rem;font-weight:600; text-decoration:none;cursor:pointer;border:1.5px solid transparent; transition:background-color .18s ease,border-color .18s ease, color .18s ease,transform .18s ease,box-shadow .18s ease; } .btn:active{transform:translateY(1px)} .btn .ico{width:21px;height:21px} /* Or = conversion. Texte vert foncé sur l'or (jamais d'or en texte clair). */ .btn-or{background:var(--or-500);color:var(--vert-900);box-shadow:var(--sh-or)} .btn-or:hover{background:var(--or-600)} .btn-ghost{background:transparent;color:var(--vert-800);border-color:var(--vert-700)} .btn-ghost:hover{background:var(--vert-800);color:var(--creme);border-color:var(--vert-800)} .btn-creme{background:var(--creme);color:var(--vert-800)} .btn-creme:hover{background:#fff} :where(a,button,summary,input):focus-visible{ outline:3px solid var(--or-500);outline-offset:2px;border-radius:6px; } /* ========================================================= 1 · EN-TÊTE COLLANT ========================================================= */ .site-header{ position:sticky;top:0;z-index:50; background:rgba(250,246,239,.86); backdrop-filter:saturate(150%) blur(10px); border-bottom:1px solid var(--ligne); } .header-row{display:flex;align-items:center;gap:1.25rem; min-height:74px;justify-content:space-between} .brand{display:inline-flex;align-items:center;gap:.6rem; text-decoration:none;color:var(--vert-800)} .brand-mark{ width:38px;height:38px;border-radius:11px;flex:none; display:grid;place-items:center; background:var(--vert-800);color:var(--or-400); font-family:var(--font-titre);font-weight:600;font-size:1.35rem; } .brand-name{font-family:var(--font-titre);font-weight:600; font-size:1.5rem;letter-spacing:-.01em} .brand-name b{color:var(--or-600);font-weight:600} .nav{display:none} @media(min-width:920px){ .nav{display:flex;align-items:center;gap:2rem} .nav a{text-decoration:none;font-weight:500;font-size:.98rem; color:var(--encre);padding:.4rem 0;border-bottom:2px solid transparent} .nav a:hover,.nav a[aria-current="page"]{color:var(--vert-700);border-bottom-color:var(--or-500)} } .header-cta{display:none} @media(min-width:560px){.header-cta{display:inline-flex}} /* ========================================================= FIL D'ARIANE ========================================================= */ .breadcrumb{padding-block:1rem .25rem} .breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem; margin:0;padding:0;font-size:.9rem;color:var(--encre-60)} .breadcrumb li{display:inline-flex;align-items:center;gap:.5rem} .breadcrumb li + li::before{content:"\203A";color:var(--encre-60)} .breadcrumb a{color:var(--vert-700);text-decoration:none;font-weight:500} .breadcrumb a:hover{text-decoration:underline} .breadcrumb [aria-current="page"]{color:var(--encre-60)} /* ========================================================= 2 · HÉRO (texte à gauche, média + cachet à droite) ========================================================= */ .hero{position:relative;overflow:hidden; background: radial-gradient(120% 90% at 92% 0%,rgba(237,190,94,.16),transparent 55%), linear-gradient(180deg,var(--creme),var(--sable));} .hero-grid{display:grid;gap:clamp(2rem,5vw,3.5rem);align-items:center} @media(min-width:900px){.hero-grid{grid-template-columns:1.05fr .95fr}} .badge{ display:inline-flex;align-items:center;gap:.55rem; padding:.5rem .95rem .5rem .7rem; background:#fff;border:1px solid var(--ligne); border-radius:var(--r-pill);box-shadow:var(--sh-1); font-size:.92rem;font-weight:600;color:var(--vert-800); } .badge .seal{width:26px;height:26px;border-radius:50%;flex:none; display:grid;place-items:center;background:var(--vert-800);color:var(--or-400)} .badge .seal .ico{width:15px;height:15px;stroke-width:2} .badge::before{content:"";width:8px;height:8px;border-radius:50%; background:var(--terre);flex:none} .hero h1{margin-top:1.25rem} .hero .lede{margin-top:1.1rem;color:var(--encre-60);font-size:1.1rem;max-width:48ch} .hero-cta{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:1.8rem} /* Ligne de contact NAP cliquable, sous les boutons */ .hero-contact{margin-top:1.1rem;font-size:1rem;font-weight:600;color:var(--vert-800)} .hero-contact a{color:var(--vert-700);text-decoration:none} .hero-contact a:hover{text-decoration:underline} .hero-trust{display:flex;flex-wrap:wrap;gap:1.3rem;margin-top:1.5rem; color:var(--encre-60);font-size:.92rem} .hero-trust span{display:inline-flex;align-items:center;gap:.45rem} .hero-trust .ico{width:18px;height:18px;color:var(--vert-700)} /* Média du héro : vraie image + cachet incrusté */ .photo{ position:relative;border-radius:var(--r-l);overflow:hidden; box-shadow:var(--sh-2);border:1px solid var(--ligne); aspect-ratio:4/3;background-color:var(--sable);margin:0; } .photo img{width:100%;height:100%;object-fit:cover;object-position:center;display:block} .photo .stamp{ position:absolute;right:14px;bottom:14px; width:104px;height:104px;border-radius:50%; border:2px dashed rgba(196,134,26,.85);color:var(--vert-800); display:grid;place-items:center;text-align:center; font-family:var(--font-titre);font-weight:600;font-size:.72rem;line-height:1.15; background:rgba(250,246,239,.92);transform:rotate(-9deg);padding:.4rem} /* ========================================================= 3 · BANDEAU RÉASSURANCE (vert profond) ========================================================= */ .reassure{background:var(--vert-800);color:var(--creme)} .reassure .eyebrow{color:var(--or-400)} .reassure h2{color:#fff} .reassure .intro{color:rgba(250,246,239,.82);margin-top:.9rem;max-width:64ch;font-size:1.08rem} .reassure-top{display:grid;gap:2.2rem;align-items:center;margin-top:.5rem} @media(min-width:860px){.reassure-top{grid-template-columns:1.15fr .85fr}} .reassure-figure{border-radius:var(--r-l);overflow:hidden;box-shadow:var(--sh-2); border:1px solid var(--ligne-sombre);aspect-ratio:4/3;margin:0;background:var(--vert-700)} .reassure-figure img{width:100%;height:100%;object-fit:cover;display:block} .reassure-grid{display:grid;gap:1.3rem;margin-top:2.6rem} @media(min-width:740px){.reassure-grid{grid-template-columns:repeat(3,1fr)}} .rcard{background:var(--vert-700);border:1px solid var(--ligne-sombre); border-radius:var(--r-m);padding:1.6rem 1.5rem} .rcard .ico-wrap{width:46px;height:46px;border-radius:12px; display:grid;place-items:center;background:rgba(237,190,94,.16); color:var(--or-400);margin-bottom:1rem} .rcard h3{color:#fff;font-size:1.18rem} .rcard p{color:rgba(250,246,239,.78);margin-top:.5rem;font-size:.98rem} /* ========================================================= 4 & 5 · GRILLES (langues, documents) ========================================================= */ .sec-head{max-width:var(--measure)} .sec-head .intro{color:var(--encre-60);margin-top:.85rem} .cards{display:grid;gap:1rem;margin-top:2.6rem; grid-template-columns:repeat(auto-fill,minmax(150px,1fr))} .docs.cards{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))} .card{ background:#fff;border:1px solid var(--ligne);border-radius:var(--r-m); padding:1.3rem;box-shadow:var(--sh-1); display:flex;flex-direction:column; transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; } .card:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--or-400)} .card .ico-wrap{width:44px;height:44px;border-radius:12px; display:grid;place-items:center;background:var(--sable);color:var(--vert-700); margin-bottom:.9rem} .card h3{font-size:1.12rem;color:var(--vert-800)} .card p{color:var(--encre-60);font-size:.92rem;margin-top:.35rem} .card .more{margin-top:auto;padding-top:.85rem;font-weight:600;font-size:.92rem; color:var(--vert-700);text-decoration:none;display:inline-flex;align-items:center;gap:.35rem} .card .more:hover{color:var(--or-600);text-decoration:underline} .lang-card{flex-direction:row;align-items:center;gap:.85rem;padding:1.05rem 1.2rem} .lang-card .ico-wrap{margin:0;width:40px;height:40px} .lang-card h3{font-size:1.05rem} .lang-card small{display:block;color:var(--encre-60);font-weight:400; font-family:var(--font-corps);font-size:.82rem;letter-spacing:0} .alt{background:var(--sable)} /* ========================================================= 6 · TARIFS (vrai tableau) ========================================================= */ .price-wrap{margin-top:2.4rem;border:1px solid var(--ligne); border-radius:var(--r-m);overflow:hidden;box-shadow:var(--sh-1);background:#fff} .table-scroll{overflow-x:auto} table.tarifs{width:100%;border-collapse:collapse;min-width:560px} table.tarifs caption{text-align:left;padding:1.1rem 1.3rem; font-weight:600;color:var(--encre);background:#fff; border-bottom:1px solid var(--ligne)} table.tarifs th,table.tarifs td{padding:.95rem 1.3rem;text-align:left; border-bottom:1px solid var(--ligne);vertical-align:middle} table.tarifs thead th{background:var(--vert-800);color:var(--creme); font-size:.86rem;font-weight:600;letter-spacing:.03em} table.tarifs tbody tr:nth-child(even){background:var(--creme)} table.tarifs tbody tr:last-child td{border-bottom:none} table.tarifs .doc{font-weight:600} table.tarifs .prix{font-weight:600;white-space:nowrap;color:var(--vert-700)} .price-note{display:flex;align-items:flex-start;gap:.6rem; padding:1rem 1.3rem;background:var(--sable);color:var(--encre-60);font-size:.9rem} .price-note .ico{width:18px;height:18px;color:var(--vert-700);margin-top:2px;flex:none} /* ========================================================= 7 · COMMENT ÇA MARCHE ========================================================= */ .steps{display:grid;gap:1.1rem;margin-top:2.6rem;counter-reset:step; grid-template-columns:repeat(auto-fit,minmax(220px,1fr))} .step{position:relative;background:#fff;border:1px solid var(--ligne); border-radius:var(--r-m);padding:1.6rem 1.4rem 1.4rem;box-shadow:var(--sh-1)} .step .num{counter-increment:step;width:40px;height:40px;border-radius:50%; display:grid;place-items:center;background:var(--vert-800);color:var(--or-400); font-family:var(--font-titre);font-weight:600;font-size:1.15rem;margin-bottom:.95rem} .step .num::before{content:counter(step)} .step h3{font-size:1.1rem;color:var(--vert-800)} .step p{color:var(--encre-60);font-size:.94rem;margin-top:.4rem} /* ========================================================= 8 · FAQ (details / summary natifs — aucun JS) ========================================================= */ .faq{max-width:780px;margin-top:2.4rem} .faq details{background:#fff;border:1px solid var(--ligne); border-radius:var(--r-m);margin-bottom:.85rem;box-shadow:var(--sh-1); overflow:hidden} .faq summary{ list-style:none;cursor:pointer;display:flex;align-items:center; justify-content:space-between;gap:1rem; padding:1.15rem 1.35rem;font-weight:600;font-size:1.06rem; color:var(--vert-800);min-height:48px; } .faq summary::-webkit-details-marker{display:none} .faq summary .chev{width:22px;height:22px;flex:none;color:var(--vert-700); transition:transform .2s ease} .faq details[open] summary .chev{transform:rotate(180deg)} .faq details[open] summary{color:var(--vert-700)} .faq .answer{padding:0 1.35rem 1.25rem;color:var(--encre-60);max-width:66ch} .faq .answer a{color:var(--vert-700);font-weight:600} /* ========================================================= 9 · APPEL FINAL ========================================================= */ .final{background: radial-gradient(120% 120% at 0% 0%,rgba(237,190,94,.18),transparent 50%), var(--vert-800);color:var(--creme)} .final .inner{display:grid;gap:1.4rem;align-items:center;text-align:center; justify-items:center} .final .eyebrow{color:var(--or-400)} .final h2{color:#fff;max-width:20ch} .final p{color:rgba(250,246,239,.85);max-width:56ch} .final .hero-cta{justify-content:center} /* ========================================================= 10 · PIED DE PAGE ========================================================= */ .site-footer{background:var(--vert-900);color:rgba(250,246,239,.8); padding-block:clamp(3rem,6vw,4.5rem) 2rem;font-size:.95rem} .footer-grid{display:grid;gap:2.2rem} @media(min-width:760px){.footer-grid{grid-template-columns:1.4fr 1fr 1.1fr}} .site-footer h4{font-family:var(--font-titre);font-weight:600;font-size:1.1rem; color:var(--creme);margin:0 0 1rem} .site-footer .brand-name{color:var(--creme)} .site-footer .brand-mark{background:var(--vert-700)} .footer-about{color:rgba(250,246,239,.68);margin-top:1rem;max-width:38ch} .footer-list{list-style:none;margin:0;padding:0;display:grid;gap:.6rem} .footer-list a{color:rgba(250,246,239,.82);text-decoration:none} .footer-list a:hover{color:var(--or-400)} .footer-contact{display:grid;gap:.7rem} .footer-contact a{color:var(--creme);text-decoration:none;font-weight:600} .footer-contact a:hover{color:var(--or-400)} .footer-line{display:flex;align-items:center;gap:.6rem} .footer-line .ico{width:18px;height:18px;color:var(--or-400);flex:none} .pay{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem} .pay span{font-size:.8rem;border:1px solid var(--ligne-sombre); border-radius:var(--r-pill);padding:.3rem .75rem;color:rgba(250,246,239,.85)} .footer-bottom{border-top:1px solid var(--ligne-sombre);margin-top:2.6rem; padding-top:1.6rem;display:flex;flex-wrap:wrap;gap:.6rem 1.4rem; justify-content:space-between;color:rgba(250,246,239,.55);font-size:.85rem} /* ========================================================= WhatsApp flottant (permanent, mobile et desktop) ========================================================= */ .wa-float{ position:fixed;right:clamp(1rem,4vw,1.6rem);bottom:clamp(1rem,4vw,1.6rem); z-index:60;width:60px;height:60px;border-radius:50%; background:var(--or-500);color:var(--vert-900); display:grid;place-items:center;box-shadow:var(--sh-or); text-decoration:none;transition:background-color .18s ease,transform .18s ease; } .wa-float:hover{background:var(--or-600);transform:scale(1.05)} .wa-float svg{width:32px;height:32px} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}