/* Site vitrine The Pencil Method. Généré par tools/build-site.mjs, ne pas éditer à la main. */ :root{ --encre:#09090B; --encre-2:#3F3F46; --gris:#71717A; --gris-2:#A1A1AA; --papier:#FAFAFA; --papier-2:#F4F4F5; --blanc:#FFFFFF; --filet:#E4E4E7; --filet-2:#D4D4D8; --accent:#B8862B; --gouttiere:clamp(20px,5vw,64px); --respire:clamp(64px,9vw,132px); } *{box-sizing:border-box;} /* Skill ui-ux-pro-max, priorite 2 « Touch & Interaction » : sans cela un tap attend 300 ms avant d'agir, et le site parait mou sur telephone. Enferme dans « hover:none » : le grand ecran est valide, il ne bouge pas d'un pixel. */ @media (hover:none){a,button,input,select,summary,label{touch-action:manipulation;}} html{-webkit-text-size-adjust:100%;} body{margin:0;background:var(--papier);color:var(--encre); font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif; font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;} img{max-width:100%;height:auto;display:block;} a{color:inherit;} /* Un titre démesuré doit pouvoir CASSER : « Draw Realistically Step-by-Step » à 102 px débordait la fenêtre en anglais et créait un défilement horizontal, que la QA a attrapé. Une typographie géante sans césure est une typographie qui casse la page. */ h1,h2,h3{font-family:'Playfair Display',Georgia,serif;font-weight:700;line-height:.98;margin:0;letter-spacing:-.035em; overflow-wrap:break-word;word-break:break-word;hyphens:auto;} ::selection{background:var(--encre);color:var(--papier);} :focus-visible{outline:2px solid var(--accent);outline-offset:3px;} .wrap{max-width:1240px;margin:0 auto;padding-left:var(--gouttiere);padding-right:var(--gouttiere);} section{padding:var(--respire) 0;} /* Numéro de section : le repère éditorial qui remplace les fonds colorés. */ .titre-sec{display:flex;align-items:flex-start;gap:clamp(16px,3vw,44px);margin-bottom:clamp(30px,4vw,56px);} /* Le repère de gauche porte tantôt un numéro (« 01 » au catalogue), tantôt une étiquette (« Le Déclic, PDF offert » sur l'accueil) : il doit pouvoir revenir à la ligne, sinon l'étiquette pousse le titre hors de l'écran. */ .titre-sec .no{font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--gris-2);padding-top:1em; text-transform:uppercase;max-width:11em;flex:none;} .titre-sec h2{font-size:clamp(30px,5.4vw,68px);flex:1;} .titre-sec .d{color:var(--gris);font-size:16px;max-width:34em;margin:14px 0 0;} /* --- apparition au défilement : jamais au prix du contenu --- L'état invisible n'existe que sous `.js-vu`, posée par un script du . Sans JavaScript, page entière. Défaut vécu le 11/08/2026 : trois sections blanches. */ .js-vu [data-vu]{opacity:0;transform:translateY(14px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);} .js-vu [data-vu].vu{opacity:1;transform:none;} @media (prefers-reduced-motion:reduce){.js-vu [data-vu]{opacity:1;transform:none;transition:none;}} /* --- navigation : un filet, rien d'autre --- */ .nav{position:sticky;top:0;z-index:40;background:var(--papier);border-bottom:1px solid transparent;transition:border-color .2s;} .nav.colle{border-bottom-color:var(--filet);} .nav-in{max-width:1240px;margin:0 auto;padding:20px var(--gouttiere);display:flex;align-items:center;gap:24px;} .brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--encre);} .brand .mark{width:13px;height:22px;color:var(--encre);} .brand-txt{font-weight:600;font-size:14px;letter-spacing:.06em;text-transform:uppercase;display:block;} .brand-txt small{display:none;} .links{margin-left:auto;display:flex;gap:28px;} .links a{text-decoration:none;font-size:14px;font-weight:500;color:var(--encre-2);} .links a:hover{color:var(--encre);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;} .langs{display:flex;gap:2px;flex-wrap:wrap;justify-content:flex-end;} .langs a{text-decoration:none;font-size:11.5px;font-weight:600;letter-spacing:.08em;color:var(--gris-2);padding:5px 7px;} .langs a:hover{color:var(--encre);} .langs a.on{color:var(--encre);text-decoration:underline;text-underline-offset:4px;} /* --- boutons : rectangulaires, francs, un seul primaire par écran --- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--encre);color:var(--papier); text-decoration:none;font-family:inherit;font-weight:600;font-size:15px;letter-spacing:.01em; padding:17px 34px;border-radius:2px;border:1px solid var(--encre);cursor:pointer; transition:background .18s,color .18s,transform .1s;} .btn:hover{background:transparent;color:var(--encre);} .btn:active{transform:translateY(1px);} .btn.big{font-size:16px;padding:20px 42px;} .btn.ghost{background:transparent;color:var(--encre);} .btn.ghost:hover{background:var(--encre);color:var(--papier);} .lien-souligne{text-decoration:none;font-weight:600;font-size:14px;border-bottom:1px solid var(--encre);padding-bottom:3px;white-space:nowrap;} .lien-souligne:hover{border-bottom-color:var(--accent);color:var(--accent);} /* ============================================================ PAGE DE CAPTURE (accueil). Le tiers supérieur de la page appartient au formulaire : c'est la seule chose qu'un visiteur puisse y faire (Brunson, DotCom Secrets, Secret 5). Le titre reste grand, mais il partage l'écran avec la boîte de capture au lieu de l'occuper seul. ============================================================ */ .capture{padding:clamp(34px,5vw,72px) 0 clamp(40px,6vw,84px);} /* Le texte explicatif passe SOUS le formulaire sur téléphone : sinon le bouton tombe au-delà de la première hauteur d'écran, et un visiteur mobile ne voit jamais l'unique chose qu'on lui demande de faire. Le titre, lui, reste en premier. */ .cap-in{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,3.4vw,56px) clamp(30px,5vw,72px); align-items:start;grid-template-areas:"txt box" "lede box";} .cap-txt{grid-area:txt;} .cap-lede{grid-area:lede;} .cap-box{grid-area:box;} .cap-txt .surtitre{font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gris);margin:0 0 clamp(20px,3vw,34px);} .cap-txt h1{font-size:clamp(36px,5.6vw,78px);font-weight:900;letter-spacing:-.045em;text-wrap:balance;} .cap-lede{font-size:clamp(16px,1.3vw,18.5px);color:var(--encre-2);margin:0;max-width:34em;} .cap-box{border:2px solid var(--encre);background:var(--blanc);padding:clamp(24px,2.6vw,36px);} /* Le visuel du cadeau, au-dessus du formulaire : on demande une adresse en échange d'un objet, il faut donc voir l'objet. C'est le PDF réel, pas une image d'ambiance. */ .cap-img{width:100%;max-width:340px;margin:0 auto clamp(20px,2.4vw,28px); filter:drop-shadow(0 18px 30px rgba(9,9,11,.16));} .cap-form .cap-t{font-family:'Playfair Display',Georgia,serif;font-size:clamp(20px,2vw,26px);line-height:1.12; letter-spacing:-.02em;margin:0 0 20px;} .cap-fields{display:grid;gap:2px;} .cap-form input{width:100%;padding:15px 0;font-family:inherit;font-size:16px;color:var(--encre);background:transparent; border:0;border-bottom:1px solid var(--filet-2);border-radius:0;transition:border-color .18s;} .cap-form input::placeholder{color:var(--gris-2);} .cap-form input:focus{outline:none;border-bottom-color:var(--encre);} .cap-form .btn{width:100%;margin-top:22px;} .cap-form .btn:disabled{opacity:.55;cursor:progress;} .cap-note{font-size:12.5px;color:var(--gris);margin:16px 0 0;line-height:1.5;} .cap-msg{margin:16px 0 0;font-size:14.5px;line-height:1.5;} .cap-msg[hidden]{display:none;} .cap-msg.ok{color:var(--encre);border-left:2px solid var(--accent);padding-left:14px;} .cap-msg.ko{color:#B91C1C;} /* Une fois l'adresse donnée, les champs n'ont plus rien à faire là : ils invitaient à se réinscrire, ce qui ne renvoie rien (la capture est idempotente côté serveur). */ .cap-form.envoye .cap-fields,.cap-form.envoye .btn,.cap-form.envoye .cap-note{display:none;} /* Les trois exercices de l'aimant. */ .exos{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,52px);} .exo{border-top:2px solid var(--encre);padding-top:22px;} .exo .n{font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--gris-2);margin:0 0 14px;} .exo h3{font-size:clamp(20px,2vw,26px);margin-bottom:12px;letter-spacing:-.02em;} .exo p{margin:0;color:var(--encre-2);font-size:15.5px;} .planche{margin:clamp(40px,5vw,72px) 0 0;text-align:center;} .planche img{margin:0 auto;max-width:640px;width:100%;border:1px solid var(--filet);} .planche figcaption{margin-top:16px;font-size:13.5px;color:var(--gris);max-width:40em;margin-left:auto;margin-right:auto;} /* La lettre du Personnage Attirant : elle porte la page, donc elle se lit comme une lettre, pas comme un bloc de marketing. Colonne étroite, sérif, signature. */ .lettre{border-top:1px solid var(--filet);border-bottom:1px solid var(--filet);background:var(--papier-2);} .lettre-in{max-width:none;} .lettre .surtitre{font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gris);margin:0 0 clamp(22px,3vw,36px);} .lettre-txt{max-width:34em;} .lettre-txt p{font-family:'Playfair Display',Georgia,serif;font-size:clamp(18px,1.9vw,24px);line-height:1.45; letter-spacing:-.015em;margin:0 0 1em;} .lettre-txt .sign{font-family:'Inter',sans-serif;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap; font-size:13.5px;color:var(--gris);margin-top:clamp(22px,3vw,34px);} .lettre-txt .sign b{font-size:15px;color:var(--encre);letter-spacing:0;} /* Rappel du formulaire au milieu de la page. */ .relance-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);align-items:center; border-top:2px solid var(--encre);padding-top:clamp(28px,3.4vw,44px);} .relance-in h2{font-size:clamp(28px,4vw,52px);font-weight:900;letter-spacing:-.04em;} .relance-in .lede{color:var(--encre-2);margin:18px 0 0;font-size:16.5px;} /* Dernier rappel, sur le bloc noir. */ .final .cap-form{max-width:520px;margin:clamp(28px,4vw,44px) auto 0;text-align:left;} .final .cap-form .cap-t{color:var(--papier);} .final .cap-form input{color:var(--papier);border-bottom-color:#3F3F46;} .final .cap-form input::placeholder{color:#71717A;} .final .cap-form input:focus{border-bottom-color:var(--papier);} .final .cap-note{color:var(--gris-2);} .final .cap-msg.ok{color:var(--papier);} .final .cap-msg.ko{color:#FCA5A5;} /* --- héros : la typographie EST l'image --- */ .hero{padding:clamp(28px,3.5vw,56px) 0 clamp(24px,3vw,44px);} .hero .surtitre{font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gris);margin:0 0 clamp(16px,2.5vw,28px);} /* AY-20260825-005 : le titre montait a 116 px et mangeait 60 % du premier ecran, ce qui repoussait le seul produit achetable sous la ligne de flottaison. Plafonne a 66 px : il reste large, et le produit entre dans l'ecran avec lui. */ .hero h1{font-size:clamp(34px,5.4vw,66px);font-weight:900;letter-spacing:-.04em;text-wrap:balance;max-width:16em;} .hero h1 i{font-style:normal;color:var(--gris-2);} .hero-bas{display:grid;grid-template-columns:1fr auto;gap:clamp(24px,4vw,56px);align-items:end;margin-top:clamp(20px,2.5vw,34px);} .hero .lede{font-size:clamp(16px,1.35vw,19px);color:var(--encre-2);margin:0;max-width:30em;} .hero .ctas{display:flex;gap:12px;flex-wrap:wrap;} /* Le produit phare dans le heros : nom, prix et bouton, visibles sans defiler. */ .hero-prod{display:flex;align-items:center;gap:18px;text-decoration:none;color:inherit;border:1px solid var(--filet);padding:14px 18px;transition:border-color .2s,background .2s;} .hero-prod:hover{border-color:var(--encre);background:var(--papier-2,#fff);} .hero-prod .hp-i{flex:0 0 92px;display:block;} .hero-prod .hp-i img{width:92px;height:auto;display:block;} .hero-prod .hp-i.cut img{mix-blend-mode:multiply;} .hero-prod .hp-t{display:flex;flex-direction:column;gap:4px;align-items:flex-start;} .hero-prod .format{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--or,#b98a3a);} .hero-prod .hp-nom{font-family:var(--titre,inherit);font-size:clamp(20px,2.2vw,28px);font-weight:700;line-height:1.1;} .hero-prod .prix{font-family:var(--titre,inherit);font-size:20px;font-weight:700;} .hero-plus{margin-top:16px;} /* Bandeau d'images pleine largeur : les dessins, seuls éléments riches de la page. */ .bandeau{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--filet);border-top:1px solid var(--filet);border-bottom:1px solid var(--filet);} .bandeau figure{margin:0;background:var(--papier);position:relative;overflow:hidden;} .bandeau img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform 1.2s cubic-bezier(.16,1,.3,1);} .bandeau figure:hover img{transform:scale(1.04);} .bandeau figcaption{position:absolute;left:0;bottom:0;padding:14px 18px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--encre);background:var(--papier);} .bandeau .b3{display:flex;align-items:center;justify-content:center;padding:clamp(24px,3vw,44px);} .bandeau .b3 p{font-family:'Playfair Display',Georgia,serif;font-size:clamp(20px,2.1vw,30px);line-height:1.2;letter-spacing:-.02em;margin:0;} /* --- repères chiffrés : une ligne, sans boîte --- */ .reperes{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--filet);} .rep{padding:clamp(22px,3vw,38px) 20px clamp(22px,3vw,38px) 0;border-right:1px solid var(--filet);} .rep:last-child{border-right:0;} .rep b{display:block;font-family:'Playfair Display',Georgia,serif;font-size:clamp(24px,3.2vw,44px);font-weight:700;letter-spacing:-.03em;line-height:1;} .rep span{display:block;margin-top:9px;font-size:12.5px;color:var(--gris);} /* --- principes : trois colonnes, filets, aucun fond --- */ .principes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,52px);} .principe{border-top:2px solid var(--encre);padding-top:22px;} .principe .n{font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--gris-2);margin:0 0 14px;} .principe h3{font-size:clamp(21px,2.1vw,27px);margin-bottom:12px;letter-spacing:-.02em;} .principe p{margin:0;color:var(--encre-2);font-size:15.5px;} /* --- catalogue : DES FICHES QUI MONTRENT LA COUVERTURE --- AY-20260825-005. Avant, chaque produit etait une ligne de sommaire et sa couverture n'apparaissait qu'au SURVOL : sur grand ecran, un magasin de livres de dessin n'affichait aucun livre. Une fiche montre ce qu'elle vend, tout le temps, sans survol, sans clic, sur telephone comme sur ordinateur. Simple : couverture, format, nom, prix. Rien d'autre. */ .lignes{display:grid;gap:clamp(18px,2.2vw,30px); grid-template-columns:repeat(auto-fill,minmax(210px,1fr));padding-top:clamp(18px,2vw,28px);} .fiche{display:flex;flex-direction:column;gap:9px;text-decoration:none;color:inherit; padding:14px 14px 18px;border:1px solid var(--filet);background:#fff; transition:border-color .2s,transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s;} .fiche:hover,.fiche:focus-visible{border-color:var(--encre);transform:translateY(-3px); box-shadow:0 16px 30px rgba(9,9,11,.10);} .fiche .f-img{display:block;background:var(--papier,#f7f7f5);} .fiche .f-img img{display:block;width:100%;height:auto;aspect-ratio:1/1; object-fit:contain;object-position:center;} /* Une couverture detouree se pose sur le papier ; une couverture a fond plein garde son cadre, sinon les PNG detoures flottaient dans une boite grise. */ .fiche.cut .f-img{background:transparent;} .fiche.cut .f-img img{mix-blend-mode:multiply;} .fiche .format{font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase; color:var(--accent);margin:6px 0 0;line-height:1.35;} .fiche h3{font-size:clamp(17px,1.5vw,21px);line-height:1.2;letter-spacing:-.02em;margin:0;} .fiche .prix{font-family:'Playfair Display',Georgia,serif;font-size:19px;letter-spacing:-.02em;margin-top:auto;padding-top:4px;} @media (prefers-reduced-motion:reduce){ .fiche,.fiche:hover{transition:none;transform:none;} } /* --- citation --- */ .citation{border-top:1px solid var(--filet);border-bottom:1px solid var(--filet);} .citation blockquote{margin:0;font-family:'Playfair Display',Georgia,serif; font-size:clamp(23px,3.4vw,46px);line-height:1.16;letter-spacing:-.03em;max-width:16em;} .citation .sign{margin:clamp(24px,3vw,40px) 0 0;display:flex;align-items:baseline;gap:14px;font-size:13.5px;color:var(--gris);flex-wrap:wrap;} .citation .sign b{font-size:15px;color:var(--encre);} /* --- garanties --- */ .trust{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.6vw,40px);} .tr{border-top:1px solid var(--filet);padding-top:18px;} .tr b{display:block;font-size:15px;margin-bottom:8px;} .tr span{font-size:14px;color:var(--gris);line-height:1.55;} /* --- FAQ --- */ .faq details{border-bottom:1px solid var(--filet);padding:24px 0;} .faq details:first-of-type{border-top:1px solid var(--filet);} .faq summary{cursor:pointer;font-weight:600;font-size:clamp(16px,1.5vw,19px);list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center;} .faq summary::-webkit-details-marker{display:none;} .faq summary::after{content:"+";font-weight:400;color:var(--gris-2);font-size:22px;line-height:1;} .faq details[open] summary::after{content:"\2212";} .faq p{margin:16px 0 0;color:var(--encre-2);max-width:52em;} /* --- bloc final, plein noir --- */ .final{background:var(--encre);color:var(--papier);text-align:center;padding:clamp(72px,10vw,148px) 0;} .final h2{font-size:clamp(32px,7vw,96px);font-weight:900;letter-spacing:-.045em;} .final p{color:var(--gris-2);max-width:40em;margin:24px auto 38px;} .final .btn{background:var(--papier);color:var(--encre);border-color:var(--papier);} .final .btn:hover{background:transparent;color:var(--papier);} /* A SIGNALER, PAS A TRANCHER : sur grand ecran les deux boutons du bloc final sont IDENTIQUES, tous deux blancs sur noir, parce que « .final .btn » ecrase le style du second (« .btn.ghost », prevu secondaire). Deux boutons primaires cote a cote, c'est aucun bouton primaire. Le grand ecran est valide par l'operateur : on ne le retouche pas sans lui. La correction ci-dessous ne vaut QUE sur telephone, ou les deux boutons s'empilent en pleine largeur et ou l'ambiguite est la pire. */ /* --- pied de page --- */ .ft{border-top:1px solid var(--filet);padding:clamp(44px,5vw,72px) 0 30px;} .ft-in{max-width:1240px;margin:0 auto;padding:0 var(--gouttiere);display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:30px;} .ft-brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;} .ft-brand .mark{width:12px;height:20px;} .ft-col{display:flex;flex-direction:column;gap:11px;} .ft-col a{text-decoration:none;font-size:14px;color:var(--gris);} .ft-col a:hover{color:var(--encre);} .ft-legal{max-width:1240px;margin:36px auto 0;padding:0 var(--gouttiere);font-size:12.5px;color:var(--gris-2);} /* --- en-tête de page --- */ .phead{padding:clamp(44px,6vw,90px) 0 0;} .phead h1{font-size:clamp(40px,9vw,120px);font-weight:900;letter-spacing:-.05em;} .phead .lede{font-size:17px;color:var(--encre-2);margin:24px 0 0;max-width:40em;} /* --- page produit --- */ .prod{padding:clamp(30px,4vw,64px) 0 0;} .prod-fil{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 clamp(18px,2.5vw,30px);} .prod h1{font-size:clamp(38px,8vw,104px);font-weight:900;letter-spacing:-.05em;text-wrap:balance;} .prod-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:start;margin-top:clamp(30px,4vw,54px);} .prod-i{position:relative;} .prod-i img{width:100%;height:auto;} .prod-i.cut img{filter:drop-shadow(0 30px 46px rgba(9,9,11,.20));} .prod-t .lede{font-size:17.5px;color:var(--encre-2);margin:0 0 30px;} .achat{display:flex;align-items:center;gap:clamp(18px,3vw,32px);flex-wrap:wrap;padding:26px 0;border-top:1px solid var(--filet);border-bottom:1px solid var(--filet);} .prod-price{font-family:'Playfair Display',Georgia,serif;font-weight:700;font-size:clamp(34px,4.4vw,56px);letter-spacing:-.03em;margin:0;} /* AY-20260828-010 : le prix du site est le prix PUBLIC et il se lit « Tarif : 47 € ». Le libelle reste discret, c'est le montant qui doit sauter aux yeux. */ .prod-price .pp-label{font-family:Inter,system-ui,sans-serif;font-weight:500;font-size:15px;letter-spacing:0;color:var(--gris);display:block;margin-bottom:2px;} /* Prix barre des pages de PROMO (01/09/2026, AY-20260901-003 : « le livre est 12 euros au lieu de 47 euros qui est le prix sur le site »). Il reste nettement plus petit que le prix paye : c'est le 12 qu'on doit lire en premier, pas le 47. Les pages du SITE n'en portent aucun, elles vendent AU prix public. */ .pp-old{font-size:.5em;color:var(--gris);text-decoration:line-through;font-weight:500;margin-right:.25em;} .ba-prix .pp-old{font-size:.85em;} .total-row .pp-old,.now .pp-old{font-size:.6em;} .facts{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:13px;} .facts li{position:relative;padding-left:22px;font-size:14.5px;color:var(--gris);} .facts li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:1px;background:var(--encre);} .contenu{max-width:none;} .liste{list-style:none;padding:0;margin:0;border-top:1px solid var(--filet);counter-reset:pt;} .liste li{position:relative;padding:19px 0 19px 52px;border-bottom:1px solid var(--filet);font-size:clamp(15.5px,1.5vw,18px);color:var(--encre);} .liste li::before{counter-increment:pt;content:counter(pt,decimal-leading-zero);position:absolute;left:0;top:21px; font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--gris-2);} .liste.petite li{padding:12px 0 12px 36px;font-size:13.5px;} .liste.petite li::before{top:14px;font-size:11px;} .garantie{padding-top:0;} .gar{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3vw,36px);align-items:center;border-top:2px solid var(--encre);padding-top:28px;} .gar-sceau{font-family:'Playfair Display',Georgia,serif;font-size:clamp(48px,6vw,86px);font-weight:900;line-height:.9;letter-spacing:-.05em;} .gar h3{font-size:clamp(19px,2vw,25px);margin-bottom:10px;} .gar p{margin:0;color:var(--encre-2);font-size:15.5px;max-width:44em;} /* --- bon de commande --- */ .order{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,4vw,64px);align-items:start;} .order-l{border-top:2px solid var(--encre);padding-top:28px;} .order-r{border-top:1px solid var(--filet);padding-top:28px;position:sticky;top:96px;} .order-r h3{font-size:20px;margin:0 0 8px;} .order-r .recap-price{font-family:'Playfair Display',Georgia,serif;font-weight:700;font-size:30px;margin:0 0 18px;letter-spacing:-.03em;} .order-r .recap-d{font-size:13.5px;color:var(--gris);margin:0 0 12px;} .recap-i{margin-bottom:20px;} .recap-i img{max-height:220px;width:auto;margin:0 auto;} .step{font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gris);margin:30px 0 14px;} .order-l .step:first-child{margin-top:0;} .field{margin-bottom:10px;} .field input{width:100%;padding:15px 0;font-family:inherit;font-size:16px;color:var(--encre);background:transparent; border:0;border-bottom:1px solid var(--filet-2);border-radius:0;transition:border-color .18s;} .field input::placeholder{color:var(--gris-2);} .field input:focus{outline:none;border-bottom-color:var(--encre);} .pay-method{border-bottom:1px solid var(--filet);} .pm-head{display:flex;align-items:center;gap:12px;padding:17px 0;cursor:pointer;font-weight:600;font-size:15px;} .pm-head input{width:16px;height:16px;accent-color:var(--encre);cursor:pointer;} .pm-body{padding:0;max-height:0;overflow:hidden;transition:max-height .25s ease,padding .25s ease;} .pay-method.open .pm-body{padding:0 0 20px;max-height:600px;} .sep{display:flex;align-items:center;color:var(--gris-2);font-size:12.5px;margin:14px 0;} .sep::before,.sep::after{content:"";flex:1;height:1px;background:var(--filet);} .sep span{padding:0 12px;} .sep[hidden]{display:none;} #paypal-button-container{min-height:46px;} .total-row{display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:16px;margin-top:26px;padding-top:20px;border-top:2px solid var(--encre);} .total-row .total-amount{font-family:'Playfair Display',Georgia,serif;font-weight:700;font-size:30px;letter-spacing:-.03em;} .btn.pay{width:100%;margin-top:22px;} .btn.pay:disabled{opacity:.5;cursor:not-allowed;} .err{color:#B91C1C;font-size:14px;margin-top:12px;min-height:1em;text-align:center;} .reassure{text-align:center;color:var(--gris-2);font-size:12.5px;margin:12px 0 0;} .spin{display:inline-block;width:17px;height:17px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:tourne .7s linear infinite;vertical-align:middle;} /* Une animation infinie doit se calmer quand le systeme le demande. On la RALENTIT au lieu de la couper : un sablier immobile pendant un paiement ferait croire a un ecran gele, ce qui serait pire que l'animation. */ @media (prefers-reduced-motion:reduce){.spin{animation-duration:2.4s;}} @keyframes tourne{to{transform:rotate(360deg)}} /* --- barre d'achat mobile --- */ .barre-achat{position:fixed;left:0;right:0;bottom:0;z-index:45;display:none;align-items:center;gap:14px; background:var(--papier);border-top:1px solid var(--filet-2);padding:12px var(--gouttiere);} .barre-achat[hidden]{display:none;} .ba-nom{font-weight:600;font-size:13.5px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .ba-prix{font-family:'Playfair Display',Georgia,serif;font-weight:700;font-size:20px;} .barre-achat .btn{padding:13px 22px;font-size:14px;} /* --- confirmation de commande --- */ .ok{max-width:760px;} .ok h1{font-size:clamp(32px,6vw,72px);font-weight:900;letter-spacing:-.045em;} .ok .lede{font-size:17.5px;color:var(--encre-2);margin:22px 0 30px;} .ok .btn{margin:6px 8px 6px 0;} .pending{border-left:2px solid var(--accent);padding:14px 0 14px 20px;color:var(--encre-2);margin:20px 0;} .ok .note{font-size:14px;color:var(--gris);margin-top:28px;} @media (max-width:1000px){ .cap-in{grid-template-columns:1fr;gap:28px;grid-template-areas:"txt" "box" "lede";} .exos{grid-template-columns:1fr;gap:30px;} .relance-in{grid-template-columns:1fr;gap:28px;} .bandeau{grid-template-columns:1fr 1fr;} .bandeau .b3{grid-column:1 / -1;} .principes{grid-template-columns:1fr;gap:30px;} .trust{grid-template-columns:1fr 1fr;} .prod-in,.order{grid-template-columns:1fr;} .order-r{position:static;order:-1;border-top:0;padding-top:0;} .ft-in{grid-template-columns:1fr 1fr;} } @media (max-width:760px){ .order-r{display:none;} .barre-achat:not([hidden]){display:flex;} body{padding-bottom:72px;} .reperes{grid-template-columns:1fr 1fr;} .rep:nth-child(2){border-right:0;} .rep:nth-child(3),.rep:nth-child(4){border-top:1px solid var(--filet);} } @media (max-width:640px){ body{font-size:16px;} /* Le visuel du cadeau reste, mais il ne repousse plus le bouton hors de l'écran. */ .cap-img{max-width:186px;} .cap-box{padding:20px;} .capture{padding-top:22px;} .cap-txt .surtitre{margin-bottom:16px;} .nav-in{padding:14px var(--gouttiere);} .links{gap:16px;} .links a{font-size:13px;} .links a[href^="mailto"]{display:none;} /* HUIT langues depuis le 23/08/2026 : sur un telephone la liste sortait de l'ecran a droite (mesure a 390 px). Elle passe donc sur sa propre ligne, sous la marque et les liens, au lieu d'etre coupee. */ .nav-in{flex-wrap:wrap;row-gap:6px;} .langs{width:100%;order:3;justify-content:flex-start;gap:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;} .langs::-webkit-scrollbar{display:none;} /* ============================================================ PASSE TÉLÉPHONE du 23/08/2026, conduite avec le skill « ui-ux-pro-max ». Ce qui a été MESURÉ avant, en 390 x 844 dans un navigateur sans écran : - 24 liens de moins de 44 px de haut sur l'accueil (les huit langues à 26 px, les liens du menu et du pied à 21-22 px) ; - du texte courant à 11 px et 14,5 px, sous le minimum de 16 px sur téléphone (le skill : "readable-font-size") ; - un accueil de 11 596 px de haut, soit près de quatorze écrans, parce que les vingt-quatre produits s'empilaient en pavés de texte SANS COUVERTURE ; - une page produit dont le prix et le bouton tombaient hors du premier écran. Les trois règles CRITIQUES du skill appliquées ici : cible tactile de 44 px, écart de 8 px entre deux cibles, contenu essentiel d'abord (« content-priority »). La charte (typographie, noir et blanc, accent unique) n'est PAS touchée : elle est validée, on ne redesigne pas ce qui est validé. ============================================================ */ /* --- 1. CIBLES TACTILES : 44 px de haut, partout où l'on clique --- */ .links a, .ft-col a, .brand{min-height:44px;display:inline-flex;align-items:center;} /* Un lien souligné ne peut pas grandir par min-height : le filet du bas se décrocherait du texte. Il grandit par sa marge intérieure, et le soulignement redevient un vrai soulignement, collé au mot. */ .lien-souligne{display:inline-block;border-bottom:0;padding:12px 0;align-self:flex-start; text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;} /* Huit chips de 44 px de haut tiennent dans 350 px de large : 8 x 40 = 320. */ .langs a{min-width:40px;min-height:44px;display:inline-flex;align-items:center;justify-content:center; font-size:12.5px;padding:0 3px;flex:none;} .pm-head input{width:20px;height:20px;} /* --- 2. LISIBILITÉ : plus rien sous 12,5 px, texte courant à 16 px --- */ .hero-prod .format{font-size:12.5px;letter-spacing:.1em;} .tr span{font-size:15px;} /* Un surtitre en capitales espacees a 12 px est le texte le plus dur a lire de la page : capitales, gris, interlettrage. Trouve par la gate mobile-ux. */ .hero .surtitre,.cap-txt .surtitre,.lettre .surtitre{font-size:13px;letter-spacing:.14em;} .rep span{font-size:13.5px;} .titre-sec .no{font-size:12.5px;} .ft-col a{font-size:15px;} /* Le consentement SMS est un texte CONTRACTUEL sur la page qui encaisse, et il etait a 12 px. La gate ne le voyait pas : elle ne lisait pas les balises div. Trouve au deuxieme tour de revue croisee, 23/08/2026. Le mot-cle important bat le style en ligne du gabarit, qu'on ne touche pas pour laisser le grand ecran identique au pixel. */ .sms-note{font-size:13px !important;line-height:1.5 !important;} /* --- 3. LE CATALOGUE, EN DEUX COLONNES --- AY-20260825-005. La fiche est la meme que sur grand ecran, juste plus petite : deux par ligne, couverture visible, nom, prix. Deux colonnes plutot qu'une seule divisent la hauteur de page par deux et laissent la couverture lisible a 165 px de large sur un telephone de 390 px. */ .lignes{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding-top:16px;} .fiche{padding:10px 10px 14px;gap:7px;} .fiche h3{font-size:16px;} /* La gate mobile-ux refuse tout texte sous 12,5 px : un format en capitales grises et espacees est deja le texte le plus dur a lire de la page. Il tient sur deux lignes dans une fiche de 165 px, et c'est le bon compromis. */ .fiche .format{font-size:12.5px;letter-spacing:.08em;} .fiche .prix{font-size:17px;} /* --- 4. LE HÉROS TIENT DANS L'ÉCRAN, ET LE PRODUIT AUSSI --- */ .hero-bas{grid-template-columns:1fr;gap:22px;align-items:start;} .hero-prod{gap:12px;padding:14px;align-items:center;} .hero-prod .hp-i{flex:0 0 74px;} .hero-prod .hp-i img{width:74px;} .hero-prod .hp-t{gap:6px;width:100%;min-width:0;} /* « Commencer par le livre » passait sur deux lignes : la marge intérieure de 34 px héritée du grand écran ne laissait plus la place au texte dans une colonne de 246 px. Un bouton d'achat sur deux lignes se lit comme une hésitation. */ .hero-prod .btn{width:100%;margin-top:4px;padding:15px 12px;font-size:14.5px;text-align:center;} /* « Mit dem Buch beginnen » et « Commencer par le livre » passaient sur deux lignes sous 390 px. Un bouton d'achat sur deux lignes se lit comme une hesitation : la marge interieure heritee du grand ecran (34 px de chaque cote) mangeait la place du texte. Elle tombe a 14 px sur telephone, pour TOUS les boutons. */ .btn{padding-left:16px;padding-right:16px;} .btn.big{font-size:15px;padding:18px 16px;} .hero .ctas .btn{width:100%;} /* Sans wrapper, les deux boutons du bloc final se chevauchaient en passant a la ligne sur telephone (vu en 390 px). Ils s'empilent, pleine largeur, separes. */ .final .btn{display:flex;width:100%;margin:10px 0 0;} /* --- 5. PAGE PRODUIT : le prix et le bouton avant le deuxième écran --- La couverture faisait 390 px de côté, soit la moitié de la hauteur du téléphone à elle seule ; le prix arrivait après. On la borne. */ /* --- 5. PAGE PRODUIT : le prix et le bouton AVANT le deuxieme ecran --- Mesure du 23/08/2026, apres deux tours de revue croisee : le bouton d'achat tombait hors du premier ecran dans les HUIT langues (923 px en allemand pour une fenetre de 844). Une premiere passe n'avait ete mesuree que sur UN produit francais, dont le texte est court : un echantillon n'est pas une liste. Deux leviers, aucun qui touche le grand ecran : - la couverture est bornee (elle faisait la moitie de la hauteur du telephone) ; - le PRIX et le BOUTON remontent au-dessus de la description. Le skill ui-ux-pro-max le demande deux fois : « content-priority » (l'essentiel d'abord sur telephone) et « primary-action » (un seul appel a l'action, en evidence). La description reste juste en dessous, elle n'est pas perdue. */ .prod{padding-top:8px;} .prod-in{margin-top:10px;gap:14px;} .prod-i img{max-height:26vh;width:auto;margin-left:auto;margin-right:auto;} .prod-t{display:flex;flex-direction:column;} .prod-t .kicker{order:1;margin-bottom:6px;} .prod-t h1{order:2;} .prod-t .achat{order:3;margin-top:14px;} .prod-t .lede{order:4;font-size:16px;margin:16px 0 0;} .prod-t .facts{order:5;} .prod-price{font-size:32px;} .achat{padding:14px 0;gap:14px;} .achat{flex-wrap:wrap;gap:14px;} .achat .btn{width:100%;} /* --- 6. DENSITÉ : moins de vide, sans serrer ce qui se touche --- Douze sections x 128 px de respiration verticale font 1 500 px de vide sur un téléphone. Le skill demande une échelle d'espacement, pas une constante d'écran large recopiée. Les images avant/après passent de 4:5 (487 px chacune, presque un écran) à 4:3 : on voit les deux dessins d'un seul coup d'œil, ce qui est exactement ce que la comparaison sert à montrer. */ :root{--respire:clamp(48px,7vw,132px);} /* DEFAUT PREEXISTANT trouve par la revue croisee du 23/08/2026, puis mesure : la regle des tablettes laissait les quatre garanties sur DEUX colonnes jusqu'en bas. Deux colonnes de 150 px ne tiennent pas « Lieferung per E-Mail », ni « Levering per e-mail », ni « Livraison par email » : en 320 px les QUATRE langues testees debordaient, francais compris. Une colonne, et l'adresse email peut casser plutot que pousser la page. */ .trust{grid-template-columns:1fr;gap:18px;} .tr span,.tr b,.faq p,.fiche h3{overflow-wrap:anywhere;} .bandeau{grid-template-columns:1fr;} /* Les dessins avant/apres sont des fichiers CARRES (900 x 900). Les forcer en 4:3 avec « object-fit:cover » recadrait le haut du crane et le menton : on coupait exactement ce qu'on vend. Carre : aucun recadrage, et 100 px de moins que le 4:5. */ .bandeau img{aspect-ratio:1/1;} /* --- 7. FAQ : une question se tape, elle doit faire 44 px --- */ .faq details{padding:14px 0;} .faq summary{min-height:44px;} .faq p{font-size:16px;} .titre-sec{flex-direction:column;gap:8px;} .titre-sec .no{padding-top:0;max-width:none;} .ft-in{grid-template-columns:1fr;} } /* --- TRES PETIT ECRAN (iPhone SE et assimiles) --- A 320 px, la couverture du heros et le bouton se partagent 166 px : « Commencer par le livre », « Empieza por el libro » et « Mit dem Buch beginnen » passaient sur deux lignes. La carte s'empile : la couverture au-dessus, le bouton sur toute la largeur. */ @media (max-width:365px){ .hero-prod{flex-direction:column;align-items:flex-start;gap:10px;} .hero-prod .hp-i{flex:none;} .hero-prod .hp-i img{width:96px;} } /* ============================================================ BON DE COMMANDE DU SITE = CELUI DES TUNNELS (AY-20260828-010) L'operateur, 28/08/2026 : « je veux des orders, des pages de paiements comme ceux du tunnel, meme structure ». Ce bloc est le CLONE de la feuille de style du bon de commande publicitaire commande-livre-couleur.html, deja valide et deja vendeur, porte ici tel quel et SCOPE sous .tunnel-order pour qu'il ne deborde pas sur le reste du site editorial. Ne rien y redesigner : une charte validee est gelee. ============================================================ */ :root{ --sio-green:#2f8f4e; --sio-btn:#2f8f4e; --sio-btn-d:#256f3d; --sio-dark:#2a2620; --sio-red:#b23b3b; --sio-bump-bg:#fbf6ec; --sio-bump-green:#974f12; --sio-field-b:#c9c0b1; --sio-page:#f6f1e8; } /* Le formulaire du site etait une grille a deux colonnes (.order). Le bon de commande des tunnels porte SA propre grille (.grid), a l'interieur du .panel : sans cette remise a zero, tout le panneau se tassait dans la premiere colonne de l'ancienne grille et la moitie droite de l'ecran restait vide (vu au navigateur en 1280 px). */ /* Le lien « Voir tout le catalogue » vit maintenant dans le recapitulatif du bon de commande. Mesure de la gate mobile en 390 px : 179 x 20 px, sous les 44 px qu'un pouce vise sans se tromper. On lui donne sa hauteur de cible, sans changer son apparence. */ .tunnel-order .more{display:inline-flex;align-items:center;min-height:44px;} .tunnel-order .order{display:block;} .tunnel-order .panel{max-width:1120px;margin:20px auto;} .tunnel-order .sec{text-align:center;} .tunnel-order .container{ max-width:1120px; margin:0 auto; padding:0 10px; } .tunnel-order .help-bar{ background:var(--sio-dark); width:100%; } .tunnel-order .help-bar .inner{ max-width:1120px; margin:0 auto; padding:18px 10px; display:flex; justify-content:flex-end; } .tunnel-order .help-bar p{ font-family:Montserrat,Arial,sans-serif; font-size:18px; line-height:24px; text-align:right; color:#fff; padding:0; margin:0; max-width:430px; } .tunnel-order .help-bar .green{ color:#e6b873; } .tunnel-order .help-bar a{ color:#fff; text-decoration:none; } @media (max-width:800px){.tunnel-order .help-bar .inner{ justify-content:center; padding:10px 15px; }.tunnel-order .help-bar p{ font-size:14px; line-height:18px; text-align:center; }} .tunnel-order .promo{ text-align:center; padding:14px 0 0; } .tunnel-order .promo .h-main{ font-family:"Passion One",Arial,sans-serif; font-size:35px; line-height:37px; color:#23201c; } .tunnel-order .promo .h-main .green{ color:var(--sio-green); } .tunnel-order .promo .h-sub{ font-family:Quicksand,Arial,sans-serif; font-size:21px; line-height:28px; color:#23201c; margin-top:14px; } @media (max-width:800px){.tunnel-order .promo .h-main{font-size:24px;line-height:27px;}.tunnel-order .promo .h-sub{font-size:16px;line-height:21px;}} .tunnel-order .panel{ background:#fffdf9; border:1px solid #e4dccd; border-radius:8px; box-shadow:0 1px 4px rgba(40,30,10,.06); margin-top:20px; padding:20px 30px; } @media (max-width:800px){.tunnel-order .panel{ padding:5px; }} .tunnel-order .grid{ display:flex; flex-wrap:wrap; align-items:flex-start; } .tunnel-order .col-left{ flex:0 0 58.333%; max-width:58.333%; padding:0 15px; } .tunnel-order .col-right{ flex:0 0 41.666%; max-width:41.666%; padding:0 15px 0 35px; } @media (max-width:800px){.tunnel-order .col-left, .tunnel-order .col-right{ flex:0 0 100%; max-width:100%; padding:0 5px; }.tunnel-order .col-right{ padding-top:25px; }} .tunnel-order .step-bar{ background:var(--sio-dark); color:#fff; font-family:Montserrat,Arial,sans-serif; font-size:18px; line-height:36px; text-align:center; padding:10px; margin:30px 0 13px; } .tunnel-order .step-bar:first-child{ margin-top:0; } @media (max-width:800px){.tunnel-order .step-bar{ font-size:16px; line-height:26px; }} .tunnel-order .field{ margin-top:20px; } .tunnel-order .field input{ width:100%; padding:12px 14px; font-family:Quicksand,Arial,sans-serif; font-size:15px; color:#23201c; background:#fff; border:1px solid var(--sio-field-b); border-radius:4px; box-shadow:inset 1px 1px 1px rgba(130,120,100,.18); } .tunnel-order .field input::placeholder{ color:#8a8275; } .tunnel-order .field input:focus{ outline:none; border-color:var(--sio-green); } .tunnel-order .product-line{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:14px 0; font-family:Quicksand,Arial,sans-serif; font-size:15px; border-bottom:1px solid #ece4d6; } .tunnel-order .product-line .pl-name{ font-weight:700; } .tunnel-order .product-line .pl-price{ font-weight:700; } .tunnel-order .product-line[hidden]{ display:none; } .tunnel-order .bump{ margin:15px 0; padding:12px; background:var(--sio-bump-bg); border:3px dashed #c8b48f; display:flex; gap:10px; align-items:flex-start; } .tunnel-order .bump > input{ margin-top:6px; width:18px; height:18px; flex:0 0 auto; accent-color:var(--sio-bump-green); cursor:pointer; } .tunnel-order .bump label{ cursor:pointer; display:block; } .tunnel-order .bump .bump-title{ font-family:Montserrat,Arial,sans-serif; font-weight:700; font-size:16px; line-height:1.35; color:var(--sio-bump-green); display:block; } .tunnel-order .bump .bump-arrow{ color:var(--sio-red); font-weight:700; } .tunnel-order .bump .bump-body{ font-family:Quicksand,Arial,sans-serif; font-size:14px; color:#3a352d; display:block; margin-top:10px; line-height:1.5; } .tunnel-order .bump .bump-body strong{ font-weight:700; } .tunnel-order .pay-block{ margin-top:13px; } .tunnel-order .pay-method{ border:1px solid var(--sio-field-b); background:#fff; border-radius:6px; margin-top:10px; overflow:hidden; } .tunnel-order .pay-method .pm-head{ display:flex; align-items:center; gap:10px; padding:14px 14px; cursor:pointer; font-family:Quicksand,Arial,sans-serif; font-size:15px; font-weight:700; } .tunnel-order .pay-method .pm-head input{ width:18px; height:18px; accent-color:var(--sio-btn); cursor:pointer; } .tunnel-order .pay-method .pm-head .pm-icons{ margin-left:auto; color:#7a705f; font-size:22px; letter-spacing:4px; } .tunnel-order .pay-method .pm-body{ padding:0 14px; max-height:0; overflow:hidden; transition:max-height .2s ease, padding .2s ease; } .tunnel-order .pay-method.open .pm-body{ padding:0 14px 16px; max-height:480px; } .tunnel-order #payment-element{ margin-top:4px; } .tunnel-order #express-checkout-element:not(:empty){ margin-top:14px; margin-bottom:4px; } .tunnel-order .sep.express-sep[hidden]{ display:none; } .tunnel-order .total-row{ display:flex; justify-content:space-between; align-items:center; font-family:Quicksand,Arial,sans-serif; font-weight:700; font-size:18px; margin-top:18px; padding-top:14px; border-top:1px solid #e4dccd; } .tunnel-order .total-row .total-amount{ color:var(--sio-btn); font-size:22px; } .tunnel-order .cta{ width:100%; border:0; cursor:pointer; background:var(--sio-btn); color:#fff; font-family:Arial,Helvetica,sans-serif; font-size:21px; font-weight:700; padding:18px 10px; margin-top:20px; border-radius:6px; transition:background .15s; } .tunnel-order .cta:hover{ background:var(--sio-btn-d); } .tunnel-order .cta:disabled{ opacity:.6; cursor:not-allowed; } .tunnel-order .spin{ display:inline-block;width:18px;height:18px;border:3px solid #fff;border-top-color:transparent;border-radius:50%;animation:s .7s linear infinite;vertical-align:middle; } @keyframes s{ to { transform:rotate(360deg);} } .tunnel-order .err{ color:#b23b3b; font-family:Quicksand,Arial,sans-serif; font-size:14px; margin-top:10px; min-height:1em; text-align:center; } .tunnel-order .reassure{ text-align:center; color:#6c655b; font-size:13px; margin-top:14px; } .tunnel-order .sep{ display:flex; align-items:center; text-align:center; color:#6c655b; font-family:Quicksand,Arial,sans-serif; margin:14px 0; font-size:13px; } .tunnel-order .sep::before, .tunnel-order .sep::after{ content:""; flex:1; height:1px; background:#e4dccd; } .tunnel-order .sep span{ padding:0 12px; } .tunnel-order #paypal-button-container{ min-height:46px; } .tunnel-order .recap-price{ font-family:"Passion One",Arial,sans-serif; text-align:center; margin:18px 0 13px; } .tunnel-order .recap-price h1{ font-size:28px; line-height:33px; font-weight:400; } .tunnel-order .recap-price .strike{ color:var(--sio-red); } .tunnel-order .recap-price .strike s{ text-decoration:line-through; } .tunnel-order .recap-price .now{ color:var(--sio-green); } .tunnel-order .recap-img{ text-align:center; margin:0 0 13px; } .tunnel-order .recap-img img{ max-width:210px; width:100%; height:auto; } .tunnel-order .recap-h{ font-family:"Passion One",Arial,sans-serif; font-size:24px; line-height:27px; margin:13px 0; text-align:center; } .tunnel-order .recap-h u{ text-decoration:underline; } .tunnel-order .recap ul{ list-style:none; padding:0; margin:0; font-family:Quicksand,Arial,sans-serif; font-size:16px; line-height:25px; } .tunnel-order .recap li{ display:flex; align-items:flex-start; gap:8px; margin:6px 0; } .tunnel-order .recap li i{ color:var(--sio-green); margin-top:4px; flex:0 0 auto; } .tunnel-order .recap .prixref{ color:#b23b3b; font-style:italic; font-weight:700; } .tunnel-order .recap-eco{ font-family:"Passion One",Arial,sans-serif; font-size:25px; line-height:1.2; text-align:center; margin-top:10px; } .tunnel-order .recap-eco .green{ color:var(--sio-green); } .tunnel-order .guarantee-box{ border:1px solid #e4dccd; background:#fff; border-radius:8px; padding:15px; margin-top:10px; } .tunnel-order .guarantee-box p{ font-family:"Passion One",Arial,sans-serif; font-size:24px; line-height:1.25; text-align:center; } .tunnel-order .guarantee-box .g14{ font-family:Quicksand,Arial,sans-serif; font-size:16px; font-style:italic; font-weight:700; text-align:center; margin-top:8px; } .tunnel-order .ft{ width:100%; background:var(--sio-dark); margin-top:30px; padding:30px 10px 36px; } .tunnel-order .ft .ft-inner{ max-width:1120px; margin:0 auto; text-align:center; } .tunnel-order .ft .ft-disclaimer{ font-family:Quicksand,Arial,sans-serif; color:#f4ead9; font-size:11px; line-height:1.5; max-width:960px; margin:0 auto; } .tunnel-order .ft .ft-copy{ font-family:Montserrat,Arial,sans-serif; color:#fff; font-size:11px; margin-top:18px; } .tunnel-order .ft .ft-links{ font-family:Montserrat,Arial,sans-serif; font-size:11px; font-weight:700; color:#fff; margin-top:14px; } .tunnel-order .ft a{ color:#fff; text-decoration:none; }