/* ========================================================================== Smakoo — page d'accueil publique Refonte du 03/10/2026 guidée par le skill UI/UX Pro Max. Système retenu (design-system/smakoo/MASTER.md) : · Style : « Vibrant & Block-based » — blocs larges, formes géométriques, contrastes élevés, grande typographie. · Structure : « App Store Style Landing » + hero, preuve sociale, CTA. · Typographie: Calistoga (titres) + Inter (texte). · Couleurs : CHARTE JAUNE/NOIR depuis le 07/10/2026, esprit Bumble — accent #FFC629, j'aime #FFC629, encre #14171A. · Rythme : blocs espacés de 56 px, transitions 200–300 ms. Contraintes de performance tenues (leçons du 03/10) : · aucun filtre SVG (bloquait le rendu de la page), · aucun calcul en 100vw (boucle de mise en page), · animations limitées à transform / opacity, · prefers-reduced-motion respecté. ========================================================================== */ :root{ /* Couleurs officielles */ --accent:#FFC629; --accent-fonce:#E0A400; --accent-clair:#FFF3CE; /* Contraste — CHARTE JAUNE/NOIR, bascule du 07/10/2026. Le jaune de marque #FFC629 est une teinte CLAIRE : du texte blanc dessus ne donne que 1,57:1, très en dessous des 4,5:1 exigés. La répartition est donc stricte : · bordures, halos de focus et aplats SANS texte -> --accent (#FFC629) ; · fonds d'accent QUI PORTENT du texte -> --accent-appui (#FFC629) avec un texte ENCRE (--encre) : 11,45:1. C'est le parti de Bumble, qui pose du noir sur son jaune, jamais du blanc ; · texte d'accent posé sur un fond clair -> --accent-texte (#7A5A00, or foncé) : 6,38:1 sur blanc, 5,87:1 sur --surface ; · texte d'accent posé sur un fond SOMBRE (bandeau « histoire ») -> --accent (#FFC629) : 11,45:1 sur l'encre. Le survol des fonds pleins s'assombrit en #E0A400, texte encre : 8,12:1. Toutes ces valeurs sont calculées selon la formule de contraste WCAG 2.1. */ --accent-texte:#7A5A00; --accent-appui:#FFC629; --accent-appui-fonce:#E0A400; --like:#FFC629; --like-fonce:#E0A400; --encre:#14171A; --gris:#5B6672; --blanc:#FFFFFF; /* Étoiles de notation : ambre foncé à 5,0:1 sur blanc (l'ambre clair #FFB020 ne donnait que 1,8:1). */ --etoiles:#B45309; /* Surfaces et neutres chauds */ --surface:#F7F5F2; --surface-2:#FDF3F5; --trait:#E7E2DA; --trait-fonce:#2A2F35; /* Rythme */ --bloc:56px; --rayon:26px; --rayon-sm:14px; --largeur:1240px; /* Gouttiere laterale unique : en-tete, sections et pied de page la partagent, ce qui garantit que leurs contenus s'alignent au pixel. Une seule valeur a changer par point de rupture. */ --gouttiere:28px; /* Cible tactile minimale (regle du skill : 44 px). */ --cible:44px; /* Typographie */ --titre:'Calistoga',Georgia,'Times New Roman',serif; --texte:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; /* Élévations cohérentes */ --ombre-1:0 4px 14px rgba(20,23,26,.06); --ombre-2:0 14px 38px rgba(20,23,26,.10); --ombre-3:0 26px 60px rgba(20,23,26,.16); /* Durées (skill : 200–300 ms) */ --t-court:200ms; --t-long:300ms; --courbe:cubic-bezier(.2,.8,.3,1); } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} body.smk-page{ margin:0; font-family:var(--texte); font-size:17px; line-height:1.65; color:var(--encre); background:var(--blanc); -webkit-font-smoothing:antialiased; overflow-x:hidden; } .smk-contenu{max-width:var(--largeur);margin:0 auto;padding:0 var(--gouttiere)} .smk-contenu--etroit{max-width:880px} /* Accessibilité : lien d'évitement */ .smk-evit{ position:absolute;left:-9999px;top:0;z-index:200; background:var(--encre);color:#fff;padding:12px 20px;border-radius:0 0 12px 0; font-weight:600;text-decoration:none; } .smk-evit:focus{left:0} /* Focus visible partout */ body.smk-page a:focus-visible, body.smk-page button:focus-visible, body.smk-page input:focus-visible, body.smk-page select:focus-visible{ outline:3px solid var(--like); outline-offset:3px; border-radius:6px; } /* ---------- Titres ---------- */ .smk-hero__titre, .smk-section__titre, .smk-histoire__citation, .smk-app__texte h2, .smk-atout__titre, .smk-etape__marque, .smk-final__titre, .smk-legal__titre, .smk-legal__article h2, .smk-legal__article h3{ font-family:var(--titre); font-weight:400; letter-spacing:-.02em; line-height:1.06; margin:0; /* Les traductions (allemand, russe…) comportent des mots longs : sans cela un mot unique peut elargir la page sur un ecran de 320 px. */ overflow-wrap:break-word; } /* ---------- Boutons ---------- */ .smk-btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; min-height:52px;padding:15px 32px; font-family:var(--texte);font-weight:600;font-size:16px;line-height:1; border:0;border-radius:999px;cursor:pointer;text-decoration:none; background:var(--accent-appui);color:var(--encre); box-shadow:0 8px 22px rgba(255, 198, 41,.26); transition:transform var(--t-court) var(--courbe), background var(--t-court) ease, box-shadow var(--t-court) ease; } .smk-btn:hover{background:var(--accent-appui-fonce);color:var(--encre);text-decoration:none;transform:translateY(-2px);box-shadow:0 14px 30px rgba(255,198,41,.32)} .smk-btn:active{transform:translateY(0)} .smk-btn--like{background:var(--like);color:var(--encre);box-shadow:0 8px 22px rgba(255,198,41,.28)} .smk-btn--like:hover{background:var(--like-fonce);box-shadow:0 14px 30px rgba(255,198,41,.34)} .smk-btn--encre{background:var(--encre);color:#fff;box-shadow:0 8px 22px rgba(20,23,26,.22)} .smk-btn--encre:hover{background:#000;box-shadow:0 14px 30px rgba(20,23,26,.28)} .smk-btn--fantome{background:transparent;color:var(--encre);border:2px solid var(--trait);box-shadow:none} .smk-btn--fantome:hover{background:var(--encre);color:#fff;border-color:var(--encre);box-shadow:none} .smk-btn--blanc{background:#fff;color:var(--encre);box-shadow:0 8px 22px rgba(0,0,0,.14)} .smk-btn--blanc:hover{background:#fff;color:var(--accent-texte)} .smk-btn--large{min-height:60px;padding:18px 40px;font-size:17px} /* ---------- Étiquette de section ---------- */ .smk-eyebrow{ display:inline-flex;align-items:center;gap:10px;margin:0 0 18px; font-family:var(--texte);font-size:12.5px;font-weight:700; letter-spacing:.1em;text-transform:uppercase;color:var(--gris); } .smk-eyebrow span{display:inline-block;width:28px;height:2px;background:var(--like);border-radius:2px} .smk-eyebrow--centre{justify-content:center} .smk-eyebrow--clair{color:rgba(255,255,255,.62)} /* ========================================================================== BANDEAU COOKIES -------------------------------------------------------------------------- Le bandeau est construit par `js/vendor/cookieinfo.min.js`. Son fond et son texte viennent du panneau (`cookiesLaw_bg` -> jaune de marque, `cookiesLaw_font_color` -> encre) ; le bouton de fermeture est un aplat clair (`cookiesLaw_btn_bg`) a texte or. Seul le lien « Plus d'infos » echappe au panneau : la bibliotheque le peint en dur en bleu (#31A8F0), une teinte hors charte qui ne donne que 1,67:1 sur le jaune. On le reprend ici — encre sur jaune, 11,45:1 — et on le souligne pour qu'il reste distinguable du texte. ========================================================================== */ body .cookieinfo{ color:var(--encre) !important } body .cookieinfo a{ color:var(--encre) !important; text-decoration:underline !important } /* ========================================================================== EN-TÊTE ========================================================================== */ .smk-nav{ position:sticky;top:0;z-index:60;background:#fff; border-bottom:1px solid var(--trait); } /* min-height et non height : la barre peut ainsi passer a la ligne au lieu de deborder. C'est la garantie « jamais de debordement » pour toutes les langues, y compris celles dont les libelles sont plus longs qu'en francais. */ .smk-nav__inner{ display:flex;align-items:center;gap:34px;row-gap:6px;flex-wrap:wrap; min-height:82px;padding-top:10px;padding-bottom:10px; } .smk-nav__logo{display:flex;align-items:center;flex:0 0 auto;text-decoration:none;min-height:var(--cible)} .smk-nav__logo img{height:38px;width:auto;display:block} .smk-nav__liens{display:flex;gap:30px;margin-left:8px} .smk-nav__liens a{ position:relative;color:var(--encre);font-weight:600;font-size:15px; text-decoration:none;padding:11px 0; } .smk-nav__liens a::after{ content:'';position:absolute;left:0;bottom:5px;height:2px;width:0; background:var(--like);border-radius:2px; transition:width var(--t-court) var(--courbe); } .smk-nav__liens a:hover::after{width:100%} .smk-nav__actions{margin-left:auto;display:flex;align-items:center;gap:16px;flex-wrap:wrap;row-gap:6px;min-width:0} .smk-nav__actions .smk-lien{ display:inline-flex;align-items:center;min-height:var(--cible); color:var(--encre);font-weight:600;font-size:15px;text-decoration:none;padding:8px 4px; } .smk-nav__actions .smk-lien:hover{color:var(--like)} .smk-nav .smk-btn{min-height:var(--cible);padding:12px 26px;font-size:15px} /* Sélecteur de langue */ .smk-langue{ display:inline-flex;align-items:center;justify-content:center;gap:7px; min-height:48px; border:2px solid var(--trait);border-radius:999px;padding:0 14px; transition:border-color var(--t-court) ease; } .smk-langue:hover{border-color:var(--accent)} .smk-langue__globe{font-size:15px;line-height:1;display:flex;align-items:center} .smk-langue__globe svg{display:block} .smk-langue select{ appearance:none;-webkit-appearance:none;border:0;background:transparent; font-family:var(--texte);font-weight:600;color:var(--encre); /* 16 px : en dessous, iOS agrandit la page des que le selecteur recoit le focus. */ cursor:pointer;outline:none;min-height:var(--cible);font-size:16px; } /* ========================================================================== BANDEAU D'ACCUEIL ========================================================================== */ .smk-hero{padding:72px 0 92px;position:relative;overflow:hidden;background:#fff} .smk-hero__forme{position:absolute;border-radius:50%;pointer-events:none;z-index:0} .smk-hero__forme--1{width:540px;height:540px;top:-210px;right:-150px;background:radial-gradient(circle,rgba(255, 198, 41,.20),rgba(255, 198, 41,0) 70%)} .smk-hero__forme--2{width:440px;height:440px;bottom:-200px;left:-140px;background:radial-gradient(circle,rgba(255,198,41,.16),rgba(255,198,41,0) 70%)} .smk-hero__forme--3{ width:180px;height:180px;top:126px;left:43%; background:linear-gradient(135deg,rgba(255, 198, 41,.14),rgba(255,198,41,.14)); border-radius:44px;transform:rotate(18deg); } .smk-hero__grille{ position:relative;z-index:1; display:grid;grid-template-columns:1.02fr .98fr;gap:var(--bloc);align-items:center; } .smk-hero__titre{font-size:clamp(42px,5.4vw,78px);line-height:1.0;margin:0 0 24px} .smk-hero__titre em{font-style:normal;color:var(--accent-texte)} /* 5,8:1 sur blanc */ .smk-hero__titre b{font-weight:400;color:var(--like)} .smk-hero__texte{font-size:18px;line-height:1.7;color:var(--gris);margin:0 0 34px;max-width:520px} .smk-hero__form{display:flex;gap:12px;max-width:540px} .smk-hero__form input{ flex:1;min-width:0;min-height:56px; font-family:var(--texte);font-size:16px;font-weight:500; padding:16px 24px;border-radius:999px;border:2px solid var(--trait); background:#fff;outline:none; transition:border-color var(--t-court) ease, box-shadow var(--t-court) ease; } .smk-hero__form input::placeholder{color:#9AA4AE} .smk-hero__form input:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(255, 198, 41,.14)} /* Preuve sociale */ .smk-preuve{display:flex;align-items:center;gap:16px;margin-top:28px;flex-wrap:wrap} .smk-preuve__visages{display:flex} .smk-preuve__visages img{ width:42px;height:42px;border-radius:50%;object-fit:cover; border:2.5px solid #fff;margin-left:-12px;display:block; } .smk-preuve__visages img:first-child{margin-left:0} .smk-preuve__texte{font-size:14.5px;color:var(--gris);line-height:1.45} .smk-preuve__etoiles{color:var(--etoiles);letter-spacing:1px;font-size:15px} .smk-preuve__texte b{color:var(--encre);font-weight:700} /* Collage de portraits */ .smk-collage{position:relative;height:520px} .smk-collage__item{ position:absolute;border-radius:var(--rayon);overflow:hidden; box-shadow:var(--ombre-3);background:#EEE9E3; transition:transform var(--t-long) var(--courbe); } .smk-collage__item img{width:100%;height:100%;object-fit:cover;display:block} .smk-collage__item--a{width:250px;height:340px;left:0;top:34px;transform:rotate(-3.5deg);z-index:2} .smk-collage__item--b{width:300px;height:438px;left:50%;top:0;margin-left:-142px;transform:rotate(1.2deg);z-index:3} .smk-collage__item--c{width:224px;height:308px;right:0;top:96px;transform:rotate(4deg);z-index:1} .smk-collage:hover .smk-collage__item--a{transform:rotate(-4.5deg) translateY(-6px)} .smk-collage:hover .smk-collage__item--b{transform:rotate(0) translateY(-8px)} .smk-collage:hover .smk-collage__item--c{transform:rotate(5deg) translateY(-6px)} .smk-collage__nom{ position:absolute;left:16px;bottom:15px;color:#fff;font-weight:600;font-size:15px; text-shadow:0 2px 14px rgba(0,0,0,.6); } .smk-collage__badge{ position:absolute;padding:8px 15px;border-radius:999px;background:#fff; font-size:13px;font-weight:700;box-shadow:var(--ombre-2);color:var(--encre); } .smk-collage__badge--coeur{right:6px;top:56px;color:var(--like);z-index:4} .smk-collage__badge--verif{left:8px;bottom:78px;z-index:4} /* ========================================================================== COMMENT ÇA MARCHE ========================================================================== */ .smk-etapes{background:var(--encre);color:#fff;padding:96px 0 104px} .smk-etapes__grille{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--bloc);margin-top:38px} .smk-etape{border-top:2px solid var(--trait-fonce);padding-top:30px;position:relative} .smk-etape::before{content:'';position:absolute;top:-2px;left:0;width:56px;height:2px;background:var(--accent)} .smk-etape__marque{font-size:38px;line-height:1;color:var(--accent);margin-bottom:16px} .smk-etape__texte{font-size:16.5px;line-height:1.7;color:rgba(255,255,255,.75);margin:0} /* ========================================================================== SECTIONS ========================================================================== */ .smk-section{padding:104px 0} .smk-section--surface{background:var(--surface)} .smk-section--rose{background:var(--surface-2)} .smk-section--centre{text-align:center} .smk-section__titre{font-size:clamp(32px,3.8vw,54px);margin:0 0 20px} .smk-section__intro{font-size:17.5px;line-height:1.72;color:var(--gris);max-width:640px;margin:0 0 52px} .smk-section--centre .smk-section__intro{margin-left:auto;margin-right:auto} /* ========================================================================== CARTES THÉMATIQUES ========================================================================== */ .smk-cartes{display:grid;grid-template-columns:repeat(3,1fr);gap:28px} .smk-carte{ position:relative;display:block;border-radius:var(--rayon);overflow:hidden; aspect-ratio:4/3.15;text-decoration:none;color:#fff; box-shadow:var(--ombre-2);border:0; transition:transform var(--t-long) var(--courbe),box-shadow var(--t-long) ease; } .smk-carte:nth-child(2){transform:translateY(-20px)} .smk-carte:hover{transform:translateY(-8px);box-shadow:var(--ombre-3)} .smk-carte:nth-child(2):hover{transform:translateY(-28px)} .smk-carte img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 500ms var(--courbe)} .smk-carte:hover img{transform:scale(1.06)} .smk-carte::after{ content:'';position:absolute;inset:0; background:linear-gradient(to top,rgba(20,23,26,.88) 0%,rgba(20,23,26,.25) 52%,rgba(255, 198, 41,.10) 100%); } .smk-carte__label{ position:absolute;left:0;right:0;bottom:0;z-index:2; padding:56px 24px 22px;font-family:var(--titre);font-size:22px;line-height:1.2; } .smk-carte:focus,.smk-carte:hover,.smk-carte:active{border:0;outline:0;text-decoration:none;color:#fff} /* ========================================================================== BLOC DUO ========================================================================== */ .smk-duo{display:grid;grid-template-columns:1.04fr .96fr;gap:64px;align-items:center} .smk-duo--serre{gap:56px} .smk-duo__image{ position:relative;border-radius:var(--rayon);overflow:hidden; box-shadow:var(--ombre-3);background:#EEE9E3; } .smk-duo__image img{width:100%;height:auto;display:block} .smk-duo__image--penche{transform:rotate(-1.2deg)} .smk-liste{list-style:none;padding:0;margin:30px 0 0} .smk-liste li{display:flex;gap:14px;align-items:flex-start;margin-bottom:18px;font-size:16.5px;line-height:1.6} .smk-liste__puce{ flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--accent-appui); color:var(--encre);display:flex;align-items:center;justify-content:center; font-size:13px;font-weight:700;margin-top:2px; } .smk-atout{margin-bottom:36px} .smk-atout:last-child{margin-bottom:0} .smk-atout__titre{font-size:26px;line-height:1.25;margin-bottom:10px} .smk-atout__texte{font-size:16.5px;line-height:1.72;color:var(--gris);margin:0} /* ========================================================================== TÉMOIGNAGE ========================================================================== */ .smk-histoire{background:var(--encre);color:#fff;padding:112px 0;position:relative;overflow:hidden} .smk-histoire__forme{ position:absolute;top:-160px;left:-120px;width:520px;height:520px;border-radius:50%; background:radial-gradient(circle,rgba(255, 198, 41,.22),rgba(255, 198, 41,0) 70%); } .smk-histoire .smk-contenu{position:relative;z-index:1} .smk-histoire__citation{font-size:clamp(26px,3.2vw,44px);line-height:1.22;margin:0 0 30px} .smk-histoire__signature{color:var(--accent);font-weight:700;font-size:14px;letter-spacing:.09em;text-transform:uppercase} .smk-histoire .smk-duo__image{box-shadow:0 26px 64px rgba(0,0,0,.55);background:#1D2228} /* ========================================================================== APPLICATION ========================================================================== */ .smk-app{background:linear-gradient(150deg,#EAF6FE 0%,var(--surface) 62%);padding:72px 0} .smk-app__grille{ max-width:var(--largeur);margin:0 auto;padding:0 var(--gouttiere); display:grid;grid-template-columns:.78fr 1.22fr;gap:56px;align-items:center; } .smk-app__texte{padding:0} .smk-app__texte h2{font-size:clamp(30px,3.4vw,48px);margin:0 0 18px} .smk-app__texte p{font-size:17px;line-height:1.72;color:var(--gris);margin:0 0 32px;max-width:430px} .smk-app__boutons{display:flex;gap:14px;flex-wrap:wrap} .smk-app__visuel{display:flex;align-items:center;justify-content:center} .smk-app__visuel img{ width:100%;height:auto;display:block; border-radius:var(--rayon); box-shadow:var(--ombre-3); background:#fff; } /* ========================================================================== APPEL FINAL ========================================================================== */ .smk-final{background:var(--like);color:#fff;padding:88px 0;text-align:center;position:relative;overflow:hidden} .smk-final__forme{position:absolute;right:-120px;top:-140px;width:460px;height:460px;border-radius:50%;background:rgba(255,255,255,.10)} .smk-final .smk-contenu{position:relative;z-index:1} .smk-final__titre{font-size:clamp(30px,3.6vw,50px);line-height:1.1;margin:0 0 16px} .smk-final__texte{font-size:17.5px;line-height:1.7;color:rgba(255,255,255,.92);margin:0 auto 34px;max-width:620px} .smk-final__boutons{display:flex;gap:14px;justify-content:center;flex-wrap:wrap} /* ========================================================================== PIED DE PAGE ========================================================================== */ .smk-pied{border-top:1px solid var(--trait);padding:52px 0;background:#fff} .smk-pied__inner{display:flex;align-items:center;gap:26px;flex-wrap:wrap} .smk-pied__logo{display:flex;align-items:center;min-height:var(--cible)} .smk-pied__logo img{height:30px;width:auto;display:block} .smk-pied__liens{display:flex;gap:28px;margin-left:auto;flex-wrap:wrap} .smk-pied__liens a{ display:inline-flex;align-items:center;min-height:var(--cible); color:var(--gris);font-weight:600;font-size:14px;text-decoration:none; transition:color var(--t-court) ease; } .smk-pied__liens a:hover{color:var(--like)} .smk-pied__mention{margin-top:22px;font-size:13.5px;color:var(--gris)} /* ========================================================================== PAGES LÉGALES ========================================================================== */ .smk-legal{background:var(--surface);min-height:60vh} .smk-legal__hero{background:#fff;border-bottom:1px solid var(--trait);padding:64px 0 46px;position:relative;overflow:hidden} .smk-legal__hero::before{ content:'';position:absolute;top:-180px;right:-120px;width:460px;height:460px;border-radius:50%; background:radial-gradient(circle,rgba(255, 198, 41,.15),rgba(255, 198, 41,0) 70%); } .smk-legal__fil{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--gris);margin-bottom:20px;position:relative;z-index:1} .smk-legal__fil a{ display:inline-flex;align-items:center;min-height:var(--cible); color:var(--gris);text-decoration:none;font-weight:600; } .smk-legal__fil a:hover{color:var(--accent-texte)} .smk-legal__titre{font-size:clamp(32px,3.8vw,56px);position:relative;z-index:1} /* CORRECTIF 03/10/2026 : `padding:64px 0 96px` ecrasait la gouttiere laterale de .smk-contenu (raccourci `padding` = 4 cotes). La carte legale se retrouvait collee aux bords de l'ecran (0 px de marge a 768 px) alors que l'en-tete et le pied gardaient 28 px. On ne touche plus qu'a la verticale. */ .smk-legal__corps{padding:64px var(--gouttiere) 96px} .smk-legal__article{ background:#fff;border:1px solid var(--trait);border-radius:var(--rayon); padding:56px 60px;max-width:720px;margin:0 auto;box-shadow:var(--ombre-1); } .smk-legal__article h2{font-size:34px;margin:0 0 24px} .smk-legal__article h3{font-size:22px;line-height:1.3;margin:40px 0 12px} .smk-legal__article p{font-size:16.5px;line-height:1.78;color:#3D4348;margin:0 0 16px} .smk-legal__article ul,.smk-legal__article ol{margin:0 0 18px;padding-left:24px} .smk-legal__article li{font-size:16.5px;line-height:1.78;color:#3D4348;margin-bottom:10px} .smk-legal__article strong{color:var(--encre);font-weight:700} .smk-legal__article a{color:var(--accent-texte);text-decoration:none;border-bottom:1px solid rgba(122, 90, 0,.35)} .smk-legal__article a:hover{border-bottom-color:var(--accent-texte)} .smk-legal__article em{color:var(--gris);font-style:normal;font-size:14px} .smk-legal__article > h2:first-child{margin-top:0} /* ========================================================================== RÉVÉLATION AU DÉFILEMENT transform/opacity uniquement ; sans JavaScript tout reste visible. ========================================================================== */ .smk-revele{opacity:0;transform:translateY(26px);transition:opacity 620ms var(--courbe),transform 620ms var(--courbe)} .smk-revele.smk-vu{opacity:1;transform:none} /* ========================================================================== ADAPTATIONS D'ÉCRAN (375 / 768 / 1024 / 1440) ========================================================================== */ @media (max-width:1160px){ /* Fenetre 1025–1160 px : le menu complet ne tenait plus sur une ligne et provoquait un debordement (le bandeau n'avait pas le droit de passer a la ligne). On resserre les ecarts au lieu de rogner le contenu. */ .smk-nav__inner{gap:18px} .smk-nav__liens{gap:14px;margin-left:0} .smk-nav__liens a{font-size:14.5px} .smk-nav__actions{gap:12px} } @media (max-width:1024px){ .smk-hero__grille{grid-template-columns:1fr;gap:52px} .smk-collage{order:-1;height:430px} .smk-collage__item--a{width:200px;height:272px} .smk-collage__item--b{width:240px;height:350px;margin-left:-114px} .smk-collage__item--c{width:180px;height:248px;top:78px} .smk-etapes__grille{grid-template-columns:1fr;gap:30px} .smk-duo{grid-template-columns:1fr;gap:40px} .smk-app{padding:56px 0} .smk-app__grille{grid-template-columns:1fr;gap:36px;padding:0 28px} .smk-app__texte{padding:0;text-align:center} .smk-app__texte p{max-width:none;margin-left:auto;margin-right:auto} .smk-app__boutons{justify-content:center} .smk-cartes{grid-template-columns:1fr 1fr;gap:20px} .smk-carte:nth-child(2){transform:none} .smk-nav__liens{display:none} .smk-duo__image--penche{transform:none} /* La marge laterale reste a 60 px : avec 36 px, le texte des pages legales remontait a 79-81 signes par ligne en 1024 px, au-dessus de la cible de 75. Seule la marge verticale diminue. */ .smk-legal__article{padding:44px 60px} .smk-section{padding:80px 0} } @media (max-width:640px){ /* Une seule gouttiere a changer : en-tete, sections et pied suivent. */ :root{--gouttiere:20px} body.smk-page{font-size:16px} .smk-section{padding:64px 0} /* En-tete compact. Avant, le groupe d'actions mesurait 239 px + 138 px de logo : 410 px de contenu dans un ecran de 320 px, soit 90 px de debordement horizontal mesure. Desormais tout tient sur une ligne des 360 px et, si une langue produit des libelles plus longs, la barre passe a la ligne au lieu de deborder (flex-wrap herite de la regle de base). */ .smk-nav__inner{min-height:64px;gap:10px;row-gap:6px;padding-top:8px;padding-bottom:8px} .smk-nav__logo img{height:26px} .smk-nav__actions{gap:10px} .smk-nav__actions .smk-lien{display:none} .smk-nav .smk-btn{min-height:var(--cible);padding:12px 18px;font-size:14px} /* Selecteur de langue : pastille ronde de 44 px. Le