/* ═══════════════════════════════════════════════════════════════════════════ ⚠️ C'EST **CETTE** FEUILLE QUE LE SITE PUBLIC CHARGE. ⚠️ ═══════════════════════════════════════════════════════════════════════════ `landing/style.css` ← VOUS ÊTES ICI, 15 pages publiques la chargent `landing/styles.css` ← une AUTRE feuille, un « s » d'écart, 0 page de vente MESURÉ le 21/08 : `index`, `prix`, `commander`, `cgv`, `faq`, `fonctionnement`, `contact`, `merci`, `bienvenue`, `bienvenue-pclurq`, `mentions-legales`, `confidentialite`, `guide-google`, `5-gestes`, `404`. `styles.css`, elle, n'est chargée que par `design-system.html` (page de travail interne) et une maquette de conception. ⚠️ POURQUOI CET EN-TÊTE EXISTE : le 20/08, une correction du bandeau de consentement a été écrite dans `styles.css` et **n'a rien changé**. Le diff la montrait, la campagne était verte, la page se rechargeait — et `body padding-bottom` valait toujours `0px`. Vingt minutes pour comprendre que seize pages sur dix-sept chargent l'autre fichier. Un garde s'écrit LÀ OÙ ON LE VIOLE (règle 1 decies) : ici, dans les deux premières lignes que voit celui qui ouvre le fichier pour l'éditer. Gardé par la suite 227. ═══════════════════════════════════════════════════════════════════════════ */ /* iaPilote — V12, TEMPLATE refait le 19/08 (Houssem : « quand je dis de changer le thème je ne parle pas des couleurs mais du template »). L'ancien template (V11) : des bandeaux pleine largeur empilés bord à bord, chacun un aplat plein — la grammaire Afterpay. Celui-ci en est un AUTRE : une grille de TUILES (bento) — cartes arrondies de tailles variées, posées dans une largeur contenue sur fond clair, où chaque tuile porte une idée et où les scènes animées vivent DANS les tuiles. Composition Linear/Vercel-2025 par la structure, jamais par les valeurs. Palette conservée du 19/08 (le changement précédent) : marine #16324E (couleur de marque verrouillée, CLAUDE.md §5), cuivre, crème. Aucune règle reprise de landing/ — toujours zéro héritage. */ @font-face{font-family:"Archivo Black";font-style:normal;font-weight:400;font-display:swap; src:url("assets/fonts/archivo-black-latin.woff2") format("woff2")} @font-face{font-family:"DM Sans";font-style:normal;font-weight:100 900;font-display:swap; src:url("assets/fonts/dm-sans-latin.woff2") format("woff2")} :root{ --ck-reserve:0px; --marine:#16324e; --marine-fonce:#0f2740; --blanc:#fff; --creme:#f4f1ea; --cuivre:#e08a3c; --cuivre-sombre:#9c5a1e; /* #5d646d, pas plus clair : mesuré, #68707a ne faisait que 4,45:1 sur le fond crème — sous le seuil AA. Celui-ci tient 5,1:1 sur crème. */ --gris:#5d646d; --ligne:rgba(22,50,78,.12); --ligne-sur-marine:rgba(255,255,255,.16); --rayon:20px; --afficheur:"Archivo Black","Arial Black",sans-serif; --texte:"DM Sans",Arial,sans-serif; /* CIBLE TACTILE — le site n'avait AUCUN équivalent de app/theme/tokens.css jusqu'au 23/08 : les 44 px y étaient tenus À LA MAIN, écran par écran, sur un dépôt de 15 pages publiques (mesuré : npm run mesure:site rendait 0 défaut, mais par la discipline de chaque édition, jamais par une valeur qu'on ne pouvait PAS descendre par erreur). Mêmes valeurs que l'application — le même artisan ouvre les deux depuis le même téléphone. */ --cible-min:44px; --cible-confort:52px; } *{box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:84px} body{margin:0;background:var(--creme);color:var(--marine);font:17px/1.55 var(--texte);-webkit-font-smoothing:antialiased;overflow-x:clip; /* ⚠️ RÉSERVATION DU BANDEAU DE CONSENTEMENT — SUR LE DOCUMENT, PLUS SUR LE PIED DE PAGE. Jusqu'au 20/08 elle était attachée à `.pied` : elle protégeait le bloc pour lequel on l'avait écrite le 12/08, et RIEN D'AUTRE. Le premier bloc neuf posé en bas d'une page repassait dessous — et c'est arrivé sur `/commander`, où le bandeau recouvrait deux cases de consentement CONTRACTUELLES et le bouton qui encaisse, à 360 px. Sur `body`, plus aucun contenu ne peut passer dessous, quelle que soit la page et quel que soit le bloc qu'on ajoutera demain. */ padding-bottom:var(--ck-reserve)} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font:inherit;cursor:pointer} h1,h2,h3{margin:0;font-family:var(--afficheur);font-weight:400;letter-spacing:-.02em;line-height:1.02} p{margin:0} :focus-visible{outline:3px solid var(--cuivre);outline-offset:3px} .saut{position:fixed;left:14px;top:10px;z-index:300;background:var(--cuivre);color:var(--marine);padding:10px 16px;font-weight:700;transform:translateY(-140%);transition:transform .15s} .saut:focus{transform:none} .masque{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .cadre{width:min(100% - 40px,1180px);margin:0 auto} /* Avatars ILLUSTRÉS façon Notion (finitions 5, 19/08 : « des avatars à la Notion ») — un petit personnage dessiné en monoline dans une pastille teintée. Le SVG vit dans le HTML ; ici, la pastille et la taille du dessin. Quatre teintes de fond, un seul style de trait. */ .avatar{border-radius:50%;display:grid;place-items:center;background:#dfe7ee;flex:none;overflow:clip} .avatar svg{width:72%;height:72%;color:var(--marine)} .avatar--2{background:#f2dfc9} .avatar--3{background:#dce9e0} .avatar--4{background:#eae2d5} /* Révélation au défilement (finitions 4 : « des animations sur chaque section ») — script.js pose .vu à l'entrée dans l'écran ; sans JS ou en mouvement réduit, tout est visible d'emblée (la classe .animer ne cache RIEN tant que html.js n'est pas posé). */ html.js .animer{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease} html.js .animer.vu{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){html.js .animer{opacity:1;transform:none;transition:none}} /* ══════════════════════════════════════════════════════════════ EN-TÊTE — pilule flottante façon Granola, demandée aux finitions (19/08 : « revoir le header idem que granola »). Référence mesurée plus tôt sur granola.ai : une pilule centrée, TRANSPARENTE en haut de page, qui devient blanche opaque avec bordure et ombre sur les ~150 premiers pixels de défilement — jamais un blanc dur immédiat. script.js pose --defile (0→1) sur .tete à chaque défilement ; tout le reste est calculé ici depuis cette seule valeur. Repli sans JS : la variable vaut 1 par défaut dans le HTML (pilule opaque dès le départ, toujours lisible) — le JS la met à 0 au chargement puis l'anime. */ .tete{position:fixed;left:0;right:0;top:12px;z-index:100;display:flex;justify-content:center;pointer-events:none} .tete-cadre{pointer-events:auto;width:min(100% - 32px,1060px);min-height:60px;padding:0 12px 0 20px;display:flex;align-items:center;gap:32px;border-radius:999px;background:rgba(255,255,255,calc(var(--defile,1) * .96));border:1px solid rgba(22,50,78,calc(var(--defile,1) * .12));box-shadow:0 2px 6px rgba(22,50,78,calc(var(--defile,1) * .05)),0 12px 32px rgba(22,50,78,calc(var(--defile,1) * .08));backdrop-filter:blur(calc(var(--defile,1) * 10px));transition:background .1s linear} .marque{display:flex;align-items:center;gap:10px;color:var(--marine);font-family:var(--afficheur);font-size:19px;min-height:var(--cible-min);margin-right:auto} .marque img{width:30px;height:30px} .nav-princ{display:flex;align-items:center;gap:28px;font-size:14.5px;font-weight:600} .nav-princ a{color:var(--marine);opacity:.72;min-height:var(--cible-min);display:inline-flex;align-items:center;transition:opacity .15s} .nav-princ a:hover{opacity:1} .tete-cta{display:flex;align-items:center;gap:18px} .tete-cta>a:first-child{font-size:14.5px;font-weight:600;opacity:.72;min-height:var(--cible-min);display:inline-flex;align-items:center} .bouton-nav{background:var(--marine);color:var(--blanc);font-weight:700;font-size:14.5px;padding:0 20px;min-height:var(--cible-min);display:inline-flex;align-items:center;border-radius:999px;border:0;transition:background .15s} .bouton-nav:hover{background:var(--marine-fonce)} .declencheur{display:none;width:44px;height:44px;align-items:center;justify-content:center;background:transparent;border:0;color:var(--marine)} .declencheur svg{width:22px;height:22px} .tiroir{position:fixed;inset:0;z-index:150;background:var(--marine);color:var(--blanc);padding:20px;transform:translateX(100%);visibility:hidden;transition:transform .4s cubic-bezier(.22,.8,.28,1),visibility .4s} .tiroir.ouvert{transform:none;visibility:visible} .tiroir-haut{display:flex;justify-content:space-between;align-items:center;min-height:var(--cible-min)} .tiroir-marque{font-family:var(--afficheur);font-size:19px} .tiroir-fermer{width:44px;height:44px;border:0;background:transparent;color:var(--blanc);font-size:26px} .tiroir-liens{margin-top:56px;display:grid} .tiroir-liens a{padding:18px 0;border-top:1px solid var(--ligne-sur-marine);font:30px/1.05 var(--afficheur);min-height:var(--cible-min);display:flex;align-items:center} .tiroir-bas{margin-top:32px;display:grid;gap:10px} .tiroir-bas .bouton-nav{width:100%;justify-content:center;background:var(--cuivre);color:var(--marine)} body.tiroir-ouvert{overflow:hidden} @media(max-width:900px){.nav-princ,.tete-cta>a:first-child{display:none}.declencheur{display:flex}} @media(max-width:480px){.tete-cta .bouton-nav{display:none}} /* ══════════════════════════════════════════════════════════════ HÉROS — deux colonnes depuis les finitions du 19/08 (« il faut un visuel à côté du texte sous la section header ») : texte à gauche, téléphone stylisé à droite où trois demandes arrivent et se font classer en boucle — le principe du produit, montré à l'endroit où on le promet. Espacement resserré au même passage (18/28 au lieu de 20-22/32 : le rythme vertical suivait trois valeurs différentes sans raison). ══════════════════════════════════════════════════════════════ */ .heros{padding:150px 0 48px} .heros-grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:56px;align-items:center} .heros-etiquette{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:13px;letter-spacing:.05em;text-transform:uppercase} .heros-etiquette::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--cuivre)} .heros h1{font-size:clamp(40px,5.4vw,68px);letter-spacing:-.03em;margin-top:18px;max-width:15ch} .heros-copie{font-size:19px;line-height:1.5;color:var(--gris);margin-top:18px;max-width:48ch} .heros-gestes{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px} @media(max-width:900px){.heros-grille{grid-template-columns:1fr;gap:40px}} @media(max-width:560px){.heros{padding-top:118px}} /* Téléphone stylisé — cadre marine, écran crème, les toasts défilent dedans (mêmes cartes que partout ailleurs : un langage, pas trois). */ /* Téléphone V2 (finitions 3, 19/08 : « plus animé, interactif et réel »). Réel : barre de statut, en-tête d'app, cartes avec PHOTO, nom et extrait de message — plus des barres grises anonymes. Interactif : script.js incline légèrement le téléphone en 3D en suivant le pointeur (--tx/--ty, coupé par prefers-reduced-motion et sans effet au tactile). */ .tel{width:min(100%,330px);margin:0 auto;background:var(--marine);border-radius:38px;padding:12px;box-shadow:0 30px 60px rgba(22,50,78,.2);transform:perspective(900px) rotateY(var(--tx,0deg)) rotateX(var(--ty,0deg));transition:transform .15s ease-out;will-change:transform} .tel-ecran{background:var(--creme);border-radius:28px;min-height:380px;display:flex;flex-direction:column;overflow:clip} .tel-statut{display:flex;justify-content:space-between;align-items:center;padding:10px 18px 0;font-size:11px;font-weight:700;color:var(--marine)} .tel-statut svg{width:38px;height:11px;display:block} .tel-tete{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--gris);padding:12px 16px;border-bottom:1px solid var(--ligne);background:var(--blanc)} .tel-tete img{width:20px;height:20px;border-radius:5px} .tel-tete b{color:var(--marine)} .tel-tete .pastille{margin-left:auto;background:var(--cuivre);color:var(--marine);font-size:10.5px;padding:2px 8px;border-radius:999px} .tel-corps{flex:1;display:grid;gap:10px;align-content:start;padding:14px 12px} /* La confirmation en bas d'écran — l'accusé de réception part, on le VOIT. */ .tel-reponse{margin:0 12px 14px;display:flex;align-items:center;gap:8px;justify-content:center;background:rgba(224,138,60,.15);color:var(--cuivre-sombre);font-size:12.5px;font-weight:700;padding:11px 12px;border-radius:12px;opacity:0;animation:reponse-part 7.5s ease-in-out infinite} .tel-reponse svg{width:15px;height:15px;flex:none} @keyframes reponse-part{ 0%,44%{opacity:0;transform:translateY(8px)} 50%,88%{opacity:1;transform:none} 95%,100%{opacity:0;transform:translateY(-4px)} } @media(prefers-reduced-motion:reduce){.tel{transform:none}.tel-reponse{animation:none;opacity:1;transform:none}} @media(max-width:900px){.tel-ecran{min-height:330px}} /* ── Boutons — système unifié aux finitions du 19/08 (« tous les boutons de tout le site sont à revoir ») : une seule forme (pilule, comme l'en-tête Granola), une seule hauteur (52px), une seule taille de texte, un seul survol (élévation + ombre). Trois rôles, pas plus : plein (marine), cuivre (sur fond marine), ligne (secondaire). ── */ .geste{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:var(--cible-confort);padding:0 28px;font-weight:700;font-size:15.5px;border-radius:999px;border:0;transition:transform .15s,background .15s,box-shadow .15s,color .15s;flex-shrink:0} .geste:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(22,50,78,.18)} .geste--plein{background:var(--marine);color:var(--blanc)} .geste--plein:hover{background:var(--marine-fonce)} .geste--ligne{background:transparent;color:var(--marine);box-shadow:inset 0 0 0 1.5px rgba(22,50,78,.28)} .geste--blanc{background:var(--blanc);color:var(--marine)} .geste--blanc:hover{background:var(--creme)} .geste--ligne:hover{box-shadow:inset 0 0 0 1.5px var(--marine),0 10px 24px rgba(22,50,78,.12)} /* ══════════════════════════════════════════════════════════════ BENTO — le cœur du nouveau template. Une grille 12 colonnes de tuiles arrondies, chacune UNE idée, les scènes animées logées dedans. Remplace : bandeau ticker + section problème + section capacités + section suivi de l'ancien template. ══════════════════════════════════════════════════════════════ */ .bento{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;padding:16px 0 0} .tuile{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--rayon);padding:30px;position:relative;overflow:clip} .tuile--marine{background:var(--marine);border-color:var(--marine);color:var(--blanc)} .tuile--cuivre{background:var(--cuivre);border-color:var(--cuivre);color:var(--marine)} .t-radar{grid-column:span 7;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center;min-height:360px} .t-suivi{grid-column:span 12} .t-capa{grid-column:span 4} .t-honnete{grid-column:span 8} /* En classe, jamais en style inline : le premier jet posait grid-column:span 4 en inline sur cette tuile — un style inline bat toute media query, donc à 360px la tuile restait comprimée sur un tiers de l'écran (vu sur capture, pas supposé). */ .t-probleme{grid-column:span 4} .t-chiffre{grid-column:span 5;display:flex;flex-direction:column;justify-content:space-between;gap:24px} @media(max-width:980px){ .t-radar,.t-chiffre{grid-column:span 12} .t-capa,.t-probleme{grid-column:span 6} .t-honnete{grid-column:span 12} } @media(max-width:640px){ .bento{gap:12px} .t-capa,.t-probleme{grid-column:span 12} .tuile{padding:24px} .t-radar{grid-template-columns:1fr;min-height:0} } .tuile-etiquette{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase} .tuile-etiquette::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cuivre)} .tuile--marine .tuile-etiquette::before{background:var(--cuivre)} .tuile h3{font-size:clamp(20px,2.2vw,26px);margin-top:14px} .tuile-texte{margin-top:10px;font-size:15.5px;line-height:1.5;color:var(--gris)} .tuile--marine .tuile-texte{color:rgba(255,255,255,.75)} /* Marine PLEIN sur cuivre : à 78% d'opacité le mélange ne faisait que 3,59:1 (mesuré) — le cuivre est un fond clair, tout texte y reste marine à 100%. */ .tuile--cuivre .tuile-texte{color:var(--marine)} @keyframes radar-tourne{from{transform:rotate(0)}to{transform:rotate(360deg)}} @keyframes point-eclat{ 0%,4%{opacity:0;transform:scale(1)} 8%{opacity:1;transform:scale(2.4)} 16%,100%{opacity:0;transform:scale(1)} } @keyframes etiquette-eclat{ 0%,4%{opacity:0} 9%,20%{opacity:1} 28%,100%{opacity:0} } @media(prefers-reduced-motion:reduce){ .radar-balayage{animation:none;opacity:.35} .radar-point::after,.radar-etiquette{animation:none;opacity:1} } @media(max-width:640px){.radar{width:230px;height:230px}.radar-anneau--2{inset:29px}.radar-anneau--3{inset:58px}} @keyframes carte-passe{ 0%{opacity:0;transform:translateY(10px)} 5%,22%{opacity:1;transform:none} 27%,100%{opacity:0;transform:translateY(-8px)} } /* Blanc plein, pas cuivre : cuivre sur marine ne fait que 3,77:1 — trop peu pour un libellé de 11,5px, même en gras (mesuré aux finitions). */ @keyframes colonne-active{ 0%,4%{color:rgba(255,255,255,.6)} 6%,22%{color:var(--blanc)} 27%,100%{color:rgba(255,255,255,.6)} } @media(prefers-reduced-motion:reduce){ .kanban-carte{animation:none;opacity:1;transform:none} .kanban-titre{animation:none} } @media(max-width:640px){.kanban{grid-template-columns:repeat(2,1fr)}} /* Tuiles capacité — badge d'icône dessiné (finitions 19/08 : « icônes à améliorer, design original ») : pastille cuivre clair, tracé marine, accent cuivre DANS le dessin — un langage duotone à nous, plus des pictos de librairie posés nus. */ .capa-badge{width:54px;height:54px;border-radius:16px;background:rgba(224,138,60,.16);display:grid;place-items:center;margin-bottom:16px} .t-capa .capa-ic{width:28px;height:28px;color:var(--marine)} .capa-ic .accent{color:var(--cuivre-sombre)} .t-capa h3{font-size:19px} /* Tuile honnêteté — deux colonnes internes. */ .honnete-grille{display:grid;grid-template-columns:minmax(0,240px) 1fr;gap:24px;align-items:start;margin-top:8px} .honnete-grille h3{font-size:clamp(20px,2vw,24px)} .honnete-liste{display:grid;gap:12px} .honnete-liste li{display:flex;gap:10px;align-items:center;font-size:15px;font-weight:600} .honnete-ic{width:19px;height:19px;flex:none;color:#b9beb4} .honnete-ic--ok{color:var(--cuivre-sombre)} @media(max-width:700px){.honnete-grille{grid-template-columns:1fr;gap:16px}} /* Tuile chiffre — le « 7 jours » en très grand. */ .t-chiffre .chiffre{font-family:var(--afficheur);font-size:clamp(64px,8vw,110px);line-height:.9;letter-spacing:-.03em} .t-chiffre .chiffre small{font-family:var(--texte);font-size:17px;font-weight:600;letter-spacing:0;display:block;margin-top:10px} /* ══════════════════════════════════════════════════════════════ SECTIONS CLASSIQUES restantes — toutes dans la même largeur contenue, titres à gauche, plus aucun bandeau pleine largeur. ══════════════════════════════════════════════════════════════ */ /* 64/36/14 — rythme unique depuis les finitions du 19/08 : les marges internes suivaient quatre valeurs (72/40/16/18) sans logique. */ .section{padding:64px 0} .entete-section{margin-bottom:36px} .etiquette{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:13px;letter-spacing:.05em;text-transform:uppercase} .etiquette::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--cuivre)} .titre-section{font-size:clamp(30px,3.8vw,46px);letter-spacing:-.028em;margin-top:14px} .chapeau{font-size:18px;line-height:1.5;color:var(--gris);margin-top:14px;max-width:56ch} /* Étapes — trois cartes reliées, reprises dans le langage tuile. */ .etapes{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:18px;align-items:start} /* Variante 4 cartes sans flèches (réécriture du 19/08) : à quatre, les flèches sortaient l'ensemble de l'écran — le numéro suffit à dire l'ordre. */ .etapes--quatre{grid-template-columns:repeat(4,1fr)} @media(max-width:980px){.etapes--quatre{grid-template-columns:1fr 1fr}} @media(max-width:640px){.etapes--quatre{grid-template-columns:1fr}} .etape-carte{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--rayon);padding:28px 24px} .etape-tete{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px} .etape-num{font-family:var(--afficheur);color:var(--cuivre-sombre);font-size:15px} .etape-badge{width:50px;height:50px;border-radius:14px;background:rgba(224,138,60,.16);display:grid;place-items:center} .etape-badge .capa-ic{width:26px;height:26px;color:var(--marine)} .etape-carte h3{font-size:19px} .etape-carte p{margin-top:10px;color:var(--gris);font-size:15px;line-height:1.5} .etape-fleche{color:#c9c4b8;width:22px;align-self:center;padding-top:70px} .etape-fleche svg{width:100%;height:auto} @media(max-width:900px){.etapes{grid-template-columns:1fr}.etape-fleche{display:none}} /* Comparatif — trois tuiles. */ /* Versus — TABLEAU depuis les finitions du 19/08 (« la section ni un logiciel à configurer... est à retravailler ») : trois cartes de texte se comparaient mal — un tableau critère par critère se lit en un balayage. Colonne iaPilote teintée cuivre clair, en-tête en chip. Sur mobile le tableau défile DANS SON conteneur (overflow-x:auto), jamais la page. */ .versus{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--rayon);overflow:hidden} .versus-defile{overflow-x:auto;-webkit-overflow-scrolling:touch} .versus table{width:100%;min-width:640px;border-collapse:collapse} .versus th,.versus td{padding:14px 16px;border-top:1px solid var(--ligne);font-size:14px;text-align:center} .versus thead th{border-top:0;padding-top:20px;padding-bottom:16px;font-family:var(--afficheur);font-weight:400;font-size:15px} .versus th:first-child,.versus td:first-child{text-align:left} .versus td:first-child{font-weight:600;color:var(--marine)} /* Finitions 5 : « le tableau doit mettre plus en avant iaPilote » — la colonne passe en marine PLEIN, texte et coches blanches sur pastille cuivre : elle domine visuellement les deux autres, qui restent en grisé. */ /* La colonne mise en valeur est iaPilote (2e) — celle que la page RECOMMANDE. Elle était sur Sur-Mesure : la matrice contredisait la tuile « Recommandé » et envoyait l'œil sur l'offre la plus rare (revue du 21/08). */ .versus th:nth-child(2),.versus td:nth-child(2){background:var(--marine);color:var(--blanc)} .versus td:nth-child(2) .v-oui{background:var(--cuivre);border-radius:50%;padding:4px;color:var(--marine);width:26px;height:26px} .versus .v-chip{display:inline-block;background:var(--cuivre);color:var(--marine);padding:6px 16px;border-radius:999px;font-size:14.5px} .versus .v-oui{width:20px;height:20px;color:var(--cuivre-sombre);vertical-align:middle} /* Mise en avant iaPilote (finitions 4) : à l'entrée du tableau dans l'écran, les coches de la colonne iaPilote POPPENT l'une après l'autre et le chip d'en-tête pulse deux fois — la colonne se démontre, elle ne se contente plus d'exister. Sans JS ou en mouvement réduit : tout est posé d'emblée. */ /* ⚠️ La révélation est clé sur `.animer.vu .versus`, PAS sur `.versus.vu` : l'observateur de script.js ne pose `.vu` que sur les éléments `.animer` (la SECTION parente) — un sélecteur `.versus.vu` attendait une classe que personne ne pose jamais, et les coches de la colonne marine restaient à scale(0) POUR TOUJOURS chez un vrai visiteur (piège n°30 : écrite, jamais branchée — trouvé par Houssem à l'écran le 21/08, invisible à nos sondes qui forcent l'état révélé avant de mesurer, piège n°28). */ html.js .versus td:nth-child(2) .v-oui{transform:scale(0);transition:transform .45s cubic-bezier(.34,1.56,.64,1)} html.js .animer.vu .versus td:nth-child(2) .v-oui{transform:scale(1)} html.js .animer.vu .versus tbody tr:nth-child(1) td:nth-child(2) .v-oui{transition-delay:.15s} html.js .animer.vu .versus tbody tr:nth-child(2) td:nth-child(2) .v-oui{transition-delay:.3s} html.js .animer.vu .versus tbody tr:nth-child(3) td:nth-child(2) .v-oui{transition-delay:.45s} html.js .animer.vu .versus tbody tr:nth-child(4) td:nth-child(2) .v-oui{transition-delay:.6s} html.js .animer.vu .versus tbody tr:nth-child(5) td:nth-child(2) .v-oui{transition-delay:.75s} html.js .animer.vu .versus .v-chip{animation:chip-pulse 1.6s .9s 2} @keyframes chip-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}} @media(prefers-reduced-motion:reduce){ html.js .versus td:nth-child(2) .v-oui{transform:none;transition:none} html.js .versus.vu .v-chip{animation:none} } .versus .v-non{width:18px;height:18px;color:#b9beb4;vertical-align:middle} .versus .v-note{font-size:12.5px;color:var(--gris);font-weight:400} .versus td:nth-child(2) .v-note{color:rgba(255,255,255,.55)} .versus-legende{margin-top:14px;font-size:13px;color:var(--gris)} /* ── Mobile : AVANT le 21/08, la matrice n'affichait QUE les libellés à 360 px — les trois colonnes de coches étaient hors écran, sans aucun indice de défilement : la section « tout ce qui est inclus » ne montrait RIEN d'inclus (trouvé à l'œil, invisible aux sondes : l'overflow vit dans un conteneur overflow-x:auto, donc « largeur tenue »). Le remède : libellés en colonne COLLANTE, colonnes de données assez étroites pour que la colonne recommandée soit visible dès l'ouverture (et la suivante entamée — c'est elle, l'indice naturel de défilement), plus une consigne écrite au-dessus du tableau. */ .versus-indice{display:none} @media(max-width:760px){ .versus table{min-width:460px} .versus th,.versus td{padding:12px 10px;font-size:13.5px} .versus th:first-child,.versus td:first-child{position:sticky;left:0;z-index:1;background:var(--blanc);min-width:168px;max-width:190px;box-shadow:8px 0 12px -8px rgba(22,50,78,.14)} .versus th:not(:first-child),.versus td:not(:first-child){min-width:92px} .versus-indice{display:block;margin:0 0 10px;font-size:13px;color:var(--gris)} } /* Tarif — une grande tuile marine, carte blanche dedans. */ .tarif-tuile{background:var(--marine);color:var(--blanc);border-radius:var(--rayon);padding:48px;display:grid;grid-template-columns:1fr minmax(0,340px);gap:48px;align-items:center} .tarif-tuile .titre-section{margin-top:14px} .tarif-inclus{margin-top:26px;display:grid;gap:13px} .tarif-inclus li{display:flex;gap:12px;align-items:center;font-size:15.5px;color:rgba(255,255,255,.82)} .tarif-ic{width:20px;height:20px;flex:none;color:var(--cuivre)} .tarif-carte{background:var(--blanc);color:var(--marine);border-radius:16px;padding:34px} .tarif-nom{font-weight:700;font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:var(--gris)} .tarif-prix{font-family:var(--afficheur);font-size:54px;letter-spacing:-.02em;margin-top:10px} .tarif-prix span{font-family:var(--texte);font-size:16px;color:var(--gris);font-weight:400;letter-spacing:0} .tarif-sous{margin-top:6px;color:var(--gris);font-size:14.5px} .geste--cuivre{background:var(--cuivre);color:var(--marine);width:100%;margin-top:20px} .geste--cuivre:hover{background:var(--marine);color:var(--blanc)} .tarif-garantie{margin-top:16px;font-size:13px;color:var(--gris);text-align:center} @media(max-width:820px){.tarif-tuile{grid-template-columns:1fr;padding:32px}} @keyframes toast-entre{ 0%,3%{opacity:0;transform:translateX(40px)} 8%,88%{opacity:1;transform:translateX(0)} 95%,100%{opacity:0;transform:translateX(-16px)} } /* L'étiquette apparaît APRÈS la carte — on voit la lecture se faire, pas un état déjà fini. */ @keyframes tag-arrive{ 0%,4%{opacity:0;transform:scale(.8)} 9%,86%{opacity:1;transform:scale(1)} 93%,100%{opacity:0} } @media(prefers-reduced-motion:reduce){.toast,.toast-tag{animation:none;opacity:1;transform:none}} /* ── Offres (prix.html) — DEUX tuiles côte à côte (iaPilote, Sur-Mesure). ⚠️ RÉDUIT DE TROIS À DEUX LE 13/09 (mission-offre-unique) : iaPilote+ est retirée du catalogue avec sa tuile marine « Recommandé ». `span 4` (trois tuiles de 12 colonnes) devient `span 6` (deux tuiles) — cette classe n'est consommée que par prix.html, le changement n'a aucun autre effet de bord. */ .t-offre{grid-column:span 6;display:flex;flex-direction:column} .offre-nom{font-size:clamp(24px,2.4vw,30px);margin-top:14px} .offre-prix{font-family:var(--afficheur);font-size:46px;letter-spacing:-.02em;margin-top:12px} .offre-prix span{font-family:var(--texte);font-size:16px;color:var(--gris);font-weight:400;letter-spacing:0} /* Le MONTANT (premier span) garde la taille du prix, seul le « HT/mois » passe en petit. Avant le 21/08 ce rôle vivait sur span[data-montant] — l'attribut est parti avec la bascule annuelle, et les prix sont retombés en 16 px gris (vu sur capture, DEUX fois pour la même cause : un sélecteur qui vise un attribut de mécanisme meurt avec lui). */ .offre-prix span:first-child{font-family:var(--afficheur);font-size:inherit;color:inherit;font-weight:inherit;letter-spacing:inherit} .tuile--marine .offre-prix span{color:rgba(255,255,255,.65)} .offre-sous{margin-top:4px;font-size:14.5px;color:var(--gris)} .tuile--marine .offre-sous{color:rgba(255,255,255,.72)} /* align-content:start — sans lui, la grille remplit le flex:1 et RÉPARTIT ses lignes : la liste courte de Sur-Mesure s'étirait avec des trous à 1440 (revue du 21/08). flex:1 reste : c'est lui qui aligne les boutons. */ .offre-liste{margin-top:20px;display:grid;gap:12px;flex:1;align-content:start} .offre-liste li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;line-height:1.45;color:var(--gris)} .tuile--marine .offre-liste li{color:rgba(255,255,255,.82)} .offre-liste .tarif-ic{margin-top:1px} /* Coche sombre sur tuile claire : le cuivre clair (#e08a3c) sur blanc ne fait que 2,2:1 — décoratif acceptable sur marine, illisible ici. */ .tarif-ic--sombre{color:var(--cuivre-sombre)} .offre-note{margin-top:14px;font-size:13px;color:var(--gris);line-height:1.5} .tuile--marine .offre-note{color:rgba(255,255,255,.6)} .t-offre .geste{margin-top:20px} @media(max-width:980px){.t-offre{grid-column:span 12}} /* FAQ — accordéon dans une tuile blanche. */ .faq{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--rayon);padding:12px 28px} .faq details{border-top:1px solid var(--ligne);padding:20px 0} .faq details:first-child{border-top:0} .faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;cursor:pointer;font-size:17.5px;font-weight:600;min-height:var(--cible-min)} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";font-family:var(--afficheur);font-size:22px;color:var(--cuivre-sombre);flex:none} .faq details[open] summary::after{content:"–"} .faq-corps{margin-top:12px;color:var(--gris);font-size:15.5px;line-height:1.6;max-width:64ch} /* Rappel — tuile cuivre, carte blanche. */ .rappel-tuile{background:var(--cuivre);color:var(--marine);border-radius:var(--rayon);padding:48px;display:grid;grid-template-columns:1fr minmax(0,400px);gap:48px;align-items:center} /* Même mesure que .tuile--cuivre .tuile-texte : 75% ne tenait pas. */ .rappel-tuile .chapeau{color:var(--marine)} .rappel-ic{width:30px;height:30px;flex:none;color:var(--marine);transform-origin:70% 30%;animation:sonnerie 2.6s ease-in-out infinite} @keyframes sonnerie{ 0%,70%,100%{transform:rotate(0)} 74%{transform:rotate(-12deg)} 78%{transform:rotate(10deg)} 82%{transform:rotate(-8deg)} 86%{transform:rotate(4deg)} 90%{transform:rotate(0)} } @media(prefers-reduced-motion:reduce){.rappel-ic{animation:none}} .rappel-carte{background:var(--blanc);padding:34px;border-radius:16px} .champ{width:100%;min-height:54px;padding:0 16px;border:1.5px solid var(--ligne);border-radius:12px;font-size:16px;font-family:var(--texte);background:var(--blanc);color:var(--marine);margin-bottom:14px} textarea.champ{min-height:130px;padding:14px 16px;resize:vertical} .champ:focus{outline:none;border-color:var(--marine)} .geste--marine{background:var(--marine);color:var(--blanc);width:100%} .geste--marine:hover{background:var(--marine-fonce)} .rappel-note{margin-top:14px;font-size:13.5px;color:var(--gris);text-align:center} .retour{margin-top:14px;font-size:14.5px;font-weight:600;text-align:center} @media(max-width:820px){.rappel-tuile{grid-template-columns:1fr;padding:32px}} /* Les conditions d'engagement, une par ligne — sur la tuile cuivre. */ .engagement-points{margin-top:16px;display:grid;gap:9px;max-width:64ch;list-style:none;padding:0} .engagement-points li{position:relative;padding-left:22px;font-size:16px;line-height:1.55;color:var(--marine)} .engagement-points li::before{content:"—";position:absolute;left:0;font-weight:700} /* ══════════════════════════════════════════════════════════════ PIED — clair, même langage que l'en-tête : filet, pas d'aplat. ══════════════════════════════════════════════════════════════ */ .pied{border-top:1px solid var(--ligne);margin-top:40px;padding:56px 0 32px;font-size:14.5px;color:var(--gris)} .pied-grille{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px} .pied-marque-bloc{grid-column:1} .pied-marque{color:var(--marine);font-family:var(--afficheur);font-size:19px} .pied-baseline{margin-top:12px;max-width:32ch;line-height:1.5} .pied-titre{color:var(--marine);font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase;margin-bottom:16px} .pied-liens{display:flex;flex-direction:column;gap:0} /* 44px, pas 24 : mesuré au pouce (finitions 19/08), les liens du pied étaient sous le plancher tactile sur les deux pages. */ .pied-liens a{min-height:var(--cible-min);display:inline-flex;align-items:center} .pied-liens a:hover{color:var(--marine)} .pied-bas{grid-column:1/-1;margin-top:24px;padding-top:24px;border-top:1px solid var(--ligne);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px} @media(max-width:700px){.pied-grille{grid-template-columns:1fr 1fr;row-gap:32px}.pied-marque-bloc{grid-column:1/-1}} /* ── Bande de logos (finitions 3, 19/08 : « il faut les logos d'entreprises ») — les outils sur lesquels le système s'appuie, en mots-marques sobres, gris, qui reprennent leur couleur au survol. Des MOTS-MARQUES typographiés, pas les logos déposés recopiés : suffisant pour la reconnaissance, sans embarquer des SVG de marques qu'on n'a pas le droit de redistribuer. ── */ .logos{padding:36px 0 8px} .logos-titre{text-align:center;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gris);margin-bottom:22px} /* RUBAN DÉFILANT (finitions 4 : « le ruban doit défiler ») : la ligne est DOUBLÉE dans le HTML (aria-hidden sur la copie) et translate de -50% en boucle — le point où la copie prend le relais est invisible. Pause au survol, et à l'arrêt complet en mouvement réduit (la ligne passe alors en repli multi-lignes centré, tout reste lisible). */ /* display:flex : sans lui, la ligne dupliquée s'empilait SOUS la première (vu en production, signalé par Houssem) au lieu de la suivre à droite pour le défilement continu. */ .logos-fenetre{display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .logos-ligne{display:flex;align-items:center;gap:56px;width:max-content;padding-right:56px;animation:ruban 28s linear infinite} .logos-fenetre:hover .logos-ligne{animation-play-state:paused} @keyframes ruban{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media(prefers-reduced-motion:reduce){ .logos-ligne{animation:none;width:auto;flex-wrap:wrap;justify-content:center;gap:16px 32px} .logos-ligne[aria-hidden]{display:none} .logos-fenetre{-webkit-mask-image:none;mask-image:none} } /* .62, pas .45 : mesuré, marine à 45% sur crème ne fait que 2,51:1 — sous le seuil 3:1 des grands textes. À 62% : 3,88:1. */ .logo-mot{display:inline-flex;align-items:center;gap:7px;font-size:19px;font-weight:700;letter-spacing:-.01em;color:var(--marine);opacity:.62;filter:grayscale(1);transition:opacity .15s,filter .15s;white-space:nowrap} .logo-mot:hover{opacity:1;filter:none} .logo-mot svg{width:20px;height:20px;flex:none} @media(max-width:640px){.logo-mot{font-size:16px}} /* ── Maquette navigateur (finitions 4 : « mettre plus en avant le site qu'on crée ou recrée ») — une fenêtre de navigateur stylisée avec le squelette d'un site d'artisan qui se compose. ── */ .navig{background:var(--blanc);border-radius:14px;overflow:clip;box-shadow:0 24px 50px rgba(22,50,78,.14);border:1px solid var(--ligne)} .navig-barre{display:flex;align-items:center;gap:6px;background:#eceae3;padding:10px 12px} .navig-barre i{width:9px;height:9px;border-radius:50%;background:#d5d2c8} .navig-barre i:first-child{background:var(--cuivre)} .navig-url{margin-left:10px;flex:1;background:var(--blanc);border-radius:6px;font-size:10.5px;font-weight:700;color:var(--gris);padding:4px 10px} .navig-corps{padding:14px 16px 16px} /* V2 (finitions 5 : « le visuel est incompréhensible ») : de VRAIS mots — un nom d'entreprise fictif, un titre, un bouton « Demander un devis », trois services nommés. On comprend d'un regard que c'est le site d'un artisan. */ .navig-menu{display:flex;align-items:center;gap:8px;padding-bottom:12px} .navig-menu b{font-family:var(--afficheur);font-size:12px;color:var(--marine);margin-right:auto} .navig-menu span{width:26px;height:6px;border-radius:3px;background:#e4e1d8} .navig-hero{background:var(--marine);border-radius:10px;padding:18px 16px;display:grid;gap:10px;justify-items:start} .navig-titre{font-family:var(--afficheur);font-size:15px;line-height:1.25;color:var(--blanc)} .navig-cta{display:inline-block;background:var(--cuivre);color:var(--marine);font-size:11px;font-weight:700;padding:7px 13px;border-radius:999px} .navig-blocs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px} .navig-blocs i{display:grid;place-items:center;height:48px;border-radius:8px;background:var(--creme);font-style:normal;animation:bloc-pousse 5s ease-in-out infinite;transform-origin:center;animation-delay:calc(var(--b) * .5s)} .navig-blocs em{font-style:normal;font-size:11px;font-weight:700;color:var(--marine)} @keyframes bloc-pousse{0%,8%{transform:scale(.6);opacity:0}14%,86%{transform:scale(1);opacity:1}94%,100%{opacity:0;transform:scale(.85)}} @media(prefers-reduced-motion:reduce){.navig-blocs i{animation:none;opacity:1;transform:none}} /* ── Réseaux sociaux au pied (finitions 4). ── */ .pied-social{display:flex;gap:8px;margin-top:14px} .pied-social a{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.08);display:grid;place-items:center;transition:background .15s} .pied-social a:hover{background:rgba(255,255,255,.18)} .pied-social svg{width:20px;height:20px;fill:rgba(255,255,255,.85)} /* ── Widget Trustpilot au pied (finitions 3 : « l'intégration du widget qu'on a mis ») — même bloc que le site actuel : le lien de repli est fonctionnel sans script, script.js charge le bootstrap Trustpilot quand le pied devient visible. ── */ /* Centré (finitions 5 : « le widget n'est pas bien centré ») : l'iframe Trustpilot se centre elle-même dans son conteneur — on borne le conteneur à la largeur de la colonne et on aligne tout à GAUCHE, comme le texte au-dessus. */ .pied-avis{margin-top:16px;min-height:52px;max-width:240px} .pied-avis .trustpilot-widget{text-align:left} .pied-avis .trustpilot-widget a{color:rgba(255,255,255,.6);text-decoration:underline;min-height:var(--cible-min);display:inline-flex;align-items:center} .whatsapp{position:fixed;right:20px;bottom:20px;z-index:120;width:56px;height:56px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.25)} .whatsapp svg{width:28px;height:28px;fill:#fff} /* ── Bascule mensuel / annuel (finitions 5, prix.html) — -10 % si l'année est payée en une fois. script.js échange les montants affichés via data-mensuel / data-annuel. ── */ /* ── Refonte prix du 22/08 (brief Houssem) — familles, à-venir, métiers, preuve. Tout consomme les jetons existants, aucune couleur en dur. ── */ .heros-reassurance{margin-top:18px;font-size:13.5px;font-weight:600;color:var(--gris)} /* Les ancres du héros (#offres, #inclus) atterrissent SOUS le header collant sans cette marge — l'en-tête recouvrirait la bascule. */ #offres,#inclus{scroll-margin-top:96px} .famille-nom{display:inline-block;margin-top:14px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--cuivre-sombre)} .famille-liste{margin-top:12px;display:grid;gap:8px;list-style:none;padding:0} .famille-liste li{position:relative;padding-left:24px;font-size:14px;line-height:1.5;color:var(--gris)} /* La coche est dessinée en CSS (pas un SVG par ligne : 30 lignes de balisage en moins) ; les entrées « À venir » la troquent contre un cercle vide. */ .famille-liste li::before{content:"";position:absolute;left:2px;top:5px;width:10px;height:6px;border-left:2px solid var(--cuivre-sombre);border-bottom:2px solid var(--cuivre-sombre);transform:rotate(-45deg)} .famille-liste li.venir{color:var(--gris);opacity:.85} .famille-liste li.venir::before{width:8px;height:8px;border:1.5px solid var(--ligne);border-radius:50%;transform:none;top:5px;left:1px} .famille-liste .v-venir{margin-left:6px} .venir-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px} .venir-carte{background:var(--blanc);border:1px solid var(--ligne);border-radius:14px;padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:700;color:var(--marine);font-size:14.5px} .metiers-grille{display:flex;flex-wrap:wrap;gap:10px} .metier-chip{background:var(--blanc);border:1px solid var(--ligne);border-radius:999px;padding:10px 18px;font-size:14px;font-weight:600;color:var(--marine);min-height:var(--cible-min);display:inline-flex;align-items:center} .marques{display:flex;flex-wrap:wrap;gap:16px 44px;align-items:center;justify-content:center;margin-top:8px} .marques b{font-family:var(--afficheur);font-weight:400;font-size:22px;letter-spacing:.04em;color:var(--marine);opacity:.72} /* Bascule mensuel/annuel — rétablie le 22/08 AVEC sa source (PRICING.md, régime annuel −10 %). Au-dessus des tuiles : c'est elles qu'elle gouverne, plus le héros. */ .bascule-zone{display:flex;flex-direction:column;align-items:center;gap:10px;padding-bottom:10px} .bascule{display:inline-flex;background:var(--blanc);border:1px solid var(--ligne);border-radius:999px;padding:4px;gap:4px} .bascule button{border:0;background:transparent;border-radius:999px;min-height:var(--cible-min);padding:0 20px;font-weight:700;font-size:14.5px;color:var(--gris);transition:background .15s,color .15s} .bascule button[aria-pressed="true"]{background:var(--marine);color:var(--blanc)} .bascule .remise{margin-left:6px;background:rgba(224,138,60,.2);color:var(--cuivre-sombre);font-size:11.5px;padding:2px 8px;border-radius:999px} .bascule button[aria-pressed="true"] .remise{background:var(--cuivre);color:var(--marine)} /* L'économie, écrite en toutes lettres quand l'annuel est choisi — le min-height évite le saut de mise en page entre les deux états. */ .bascule-note{font-size:13.5px;color:var(--cuivre-sombre);font-weight:600;min-height:20px;text-align:center} @keyframes jalon-pose{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}} @keyframes jalon-fin-pose{from{opacity:0}to{opacity:1}} @keyframes jalon-flotte{from{transform:translateY(-4px)}to{transform:translateY(4px)}} @media(prefers-reduced-motion:reduce){.jalon-carte{animation:none}html.js .jalon,html.js .jalon-fin{animation:none;opacity:1;transform:none}} @media(max-width:900px){.jalon-scene{display:none}} /* ── Matrice des fonctions par forfait (prix.html) — mêmes styles que .versus, avec la pastille « À venir » honnête. ── */ .v-venir{display:inline-block;background:rgba(224,138,60,.18);color:var(--cuivre-sombre);font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:999px;white-space:nowrap} .versus td:nth-child(2) .v-venir{background:rgba(255,255,255,.16);color:var(--blanc)} /* ── Encart Cal.com (contact.html) — rien ne se charge avant le clic. ── */ .cal-encart{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--rayon);padding:32px;text-align:center} .cal-cadre{margin-top:20px;border-radius:14px;overflow:clip;border:1px solid var(--ligne)} .cal-cadre iframe{display:block;width:100%;height:620px;border:0} /* ── FAQ en deux colonnes au format large (finitions 5). ── */ .faq-deux{display:grid;grid-template-columns:minmax(0,300px) 1fr;gap:40px;align-items:start} @media(max-width:900px){.faq-deux{grid-template-columns:1fr;gap:20px}.faq-deux .entete-section{position:static}} /* ── Exemple concret dans la tuile IA (retour relecteur, 19/08 : « on imagine mal comment elle classe ») — un vrai message, le mot qui pèse souligné au cuivre, la flèche, l'étiquette. ── */ .exemple-ia{margin-top:18px;display:flex;align-items:center;gap:10px;flex-wrap:wrap} .exemple-bulle{background:rgba(255,255,255,.12);border-radius:12px 12px 12px 4px;padding:10px 14px;font-size:13.5px;color:rgba(255,255,255,.92);font-style:italic} .exemple-bulle mark{background:none;color:#f0ac68;font-weight:700;font-style:normal;text-decoration:underline;text-underline-offset:3px} .exemple-fleche{color:var(--cuivre);width:20px;flex:none} .exemple-fleche svg{width:100%;height:auto;display:block} .exemple-tag{background:var(--cuivre);color:var(--marine);font-size:12px;font-weight:800;padding:5px 12px;border-radius:999px;letter-spacing:.03em} /* ── Mini-visuels des étapes (fonctionnement.html — retour relecteur : « pour chaque étape, une illustration simple ») ── */ .etape-visuel{margin-top:16px;background:var(--creme);border-radius:12px;padding:14px} .mini-form i{display:block;height:9px;background:#e3e0d8;border-radius:5px;margin-bottom:7px} .mini-form i:nth-child(2){width:70%} .mini-form b{display:inline-block;margin-top:4px;background:var(--cuivre);color:var(--marine);font-size:10.5px;font-weight:700;padding:5px 12px;border-radius:999px} .mini-ia{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .mini-ia .bulle{background:var(--blanc);border-radius:10px 10px 10px 3px;padding:8px 10px;font-size:11.5px;font-style:italic;color:var(--gris)} .mini-ia .bulle mark{background:none;color:var(--cuivre-sombre);font-weight:700;font-style:normal} .mini-ia .tag{background:var(--cuivre);color:var(--marine);font-size:10px;font-weight:800;padding:3px 9px;border-radius:999px} .mini-appli{display:grid;gap:6px} .mini-appli>span{display:flex;align-items:center;justify-content:space-between;background:var(--blanc);border-radius:8px;padding:7px 10px;font-size:11px;font-weight:700;color:var(--marine)} .mini-appli em{font-style:normal;font-size:9.5px;font-weight:800;padding:2px 8px;border-radius:999px;background:rgba(224,138,60,.2);color:var(--cuivre-sombre)} .mini-appli em.ok{background:rgba(22,50,78,.1);color:var(--marine)} .mini-relance{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:11px;font-weight:700;color:var(--gris)} .mini-relance b{background:var(--blanc);color:var(--marine);padding:5px 10px;border-radius:999px;font-size:10.5px} .mini-relance svg{width:16px;height:16px;color:var(--cuivre-sombre);flex:none} /* ── Résumé punch au-dessus du tableau (retour relecteur : « trop de texte autour »). ── */ .punch{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 28px} .punch span{display:inline-flex;align-items:center;gap:8px;background:var(--blanc);border:1px solid var(--ligne);border-radius:999px;padding:9px 16px;font-size:14px;font-weight:700} .punch svg{width:16px;height:16px;color:var(--cuivre-sombre);flex:none} /* ── Grand prix immédiat en tête de prix.html (retour relecteur : « le prix doit être affiché en gros dès l'arrivée »). ── */ .prix-grand{margin-top:20px;font-family:var(--afficheur);font-size:clamp(34px,4.6vw,54px);letter-spacing:-.02em} .prix-grand small{font-family:var(--texte);font-size:16px;font-weight:600;color:var(--gris);letter-spacing:0} /* ── Maquette de l'application (relecture 3 : « même une simple maquette de l'application rendrait la promesse concrète ») — une fenêtre PC DESSINÉE : barre latérale, liste des demandes, statuts. Jamais une capture réelle (consigne Houssem du 18/08) : une maquette stylisée, dans le langage graphique du site. ── */ .app-fenetre{background:var(--blanc);border:1px solid var(--ligne);border-radius:16px;overflow:clip;box-shadow:0 24px 50px rgba(22,50,78,.12)} .app-corps{display:grid;grid-template-columns:200px 1fr;min-height:320px} .app-nav{background:var(--marine);color:var(--blanc);padding:16px 12px;display:flex;flex-direction:column;gap:4px} .app-nav b{display:flex;align-items:center;gap:8px;font-family:var(--afficheur);font-weight:400;font-size:14px;padding:0 8px 14px} .app-nav b img{width:20px;height:20px;border-radius:5px} .app-nav span{padding:9px 10px;border-radius:8px;font-size:13px;font-weight:600;color:rgba(255,255,255,.68)} .app-nav .actif{background:rgba(255,255,255,.14);color:var(--blanc)} .app-main{padding:16px 18px} .app-titre{display:flex;align-items:center;justify-content:space-between;font-weight:800;font-size:14.5px;padding-bottom:12px} .app-titre em{font-style:normal;background:var(--cuivre);color:var(--marine);font-size:11px;font-weight:800;padding:3px 10px;border-radius:999px} .app-ligne{display:flex;align-items:center;gap:12px;padding:11px 4px;border-top:1px solid var(--ligne);font-size:13.5px} .app-ligne .avatar{width:32px;height:32px} .app-nom{font-weight:700;line-height:1.25} .app-nom small{display:block;font-size:11.5px;font-weight:600;color:var(--gris)} .chip{margin-left:auto;font-size:10.5px;font-weight:800;padding:4px 10px;border-radius:999px;background:rgba(22,50,78,.1);color:var(--marine);white-space:nowrap} .chip--urgence{background:rgba(224,138,60,.22);color:var(--cuivre-sombre)} .app-heure{font-size:11px;font-weight:600;color:var(--gris);width:38px;text-align:right} @media(max-width:700px){ .app-corps{grid-template-columns:1fr;min-height:0} .app-nav{flex-direction:row;overflow-x:auto;padding:10px 12px} .app-nav b{padding:0 8px 0 0} .app-nav span{white-space:nowrap} .app-heure{display:none} } /* ── Pilote+ mis en avant visuellement (relecture 5) : bordure cuivre — l'offre d'upsell ne se fond plus dans la tuile blanche. Le badge « Le forfait supérieur » (::before à cheval sur le bord haut) a été RETIRÉ le 21/08 : empilé sur l'étiquette « Visibilité gérée », il faisait DEUX labels sur la même tuile, et « supérieur » disputait le « Recommandé » de la tuile d'à côté — deux tuiles qui réclament l'attention, personne ne l'a. La bordure suffit à distinguer l'upsell. */ .t-offre--plus{border:2px solid var(--cuivre);position:relative} /* Accroche intégrée au-dessus du tableau (relecture 5 : les pastilles flottaient sans rôle clair) — une phrase forte, puis la transition. */ .accroche-versus{font-size:clamp(19px,2.2vw,24px);font-weight:700;line-height:1.35;max-width:44ch;margin-top:18px} .accroche-versus b{color:var(--cuivre-sombre)} /* ══════════ Greffe éditoriale (mandat du 18/08) ══════════ Les visuels V11 ci-dessus sont RESTAURÉS À L'IDENTIQUE (e700ff2) et PROTÉGÉS : tout remplacement doit être proposé avec un avant/après et validé par Houssem AVANT implémentation. Ce bloc ne porte que les sections éditoriales validées, stylées dans le langage V11. */ /* Exemple concret sous chaque bénéfice — un résultat observable, pas une promesse abstraite. */ .exemple{margin-top:12px;padding-top:10px;border-top:1px dashed var(--ligne);font-size:13px;line-height:1.45;color:var(--gris)} .exemple b{color:var(--cuivre-sombre);font-weight:800} /* Étapes reliées — un système CONTINU : un connecteur entre les cartes au format large, pour que les quatre temps se lisent comme un seul flux. */ .etapes--quatre .etape-carte{position:relative} @media(min-width:981px){ .etapes--quatre .etape-carte:not(:last-child)::after{content:"";position:absolute;top:49px;right:-19px;width:20px;height:2px;background:var(--cuivre);opacity:.5} } /* Aperçu app enrichi — volet de détail calqué sur la vraie fiche : résumé, réponse partie, prochaine action conseillée. */ .app-corps{grid-template-columns:190px 1fr minmax(0,300px)} .app-detail{border-left:1px solid var(--ligne);padding:16px;display:grid;gap:12px;align-content:start} .app-detail-titre{display:flex;align-items:center;justify-content:space-between;gap:8px;font-weight:800;font-size:13.5px} .app-detail-resume{font-size:12.5px;line-height:1.5;color:var(--gris);background:var(--creme);border-radius:10px;padding:10px 12px} .app-detail-ok{display:flex;gap:8px;align-items:center;font-size:12.5px;font-weight:700;color:var(--cuivre-sombre)} .app-detail-ok svg{width:15px;height:15px;flex:none} .app-detail-brouillon{background:var(--creme);border:1px dashed var(--cuivre);border-radius:10px;padding:10px 12px;font-size:12px;font-weight:700;color:var(--marine)} .app-detail-brouillon em{display:block;font-style:italic;font-weight:500;color:var(--gris);margin:5px 0 7px;font-size:12px} .app-detail-brouillon b{display:inline-block;background:var(--marine);color:var(--blanc);font-size:10.5px;font-weight:800;padding:4px 10px;border-radius:999px} .app-action{background:var(--marine);color:var(--blanc);border-radius:10px;padding:12px;font-size:12px;font-weight:700;line-height:1.4} .app-action small{display:block;font-size:10px;letter-spacing:.06em;color:var(--cuivre);margin-bottom:4px} @media(max-width:1000px){.app-corps{grid-template-columns:190px 1fr}.app-detail{display:none}} @media(max-width:700px){.app-corps{grid-template-columns:1fr}} /* Avant / Après — cinq paires à en-têtes stables, la colonne « avec » porte la marque. Jamais un tableau Excel. */ .avap{display:grid;gap:12px;margin-top:8px} .avap-ligne{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:stretch} .avap-sans,.avap-avec{border-radius:14px;padding:16px 18px;font-size:14.5px;line-height:1.45;display:flex;align-items:center} .avap-sans{background:var(--blanc);border:1px solid var(--ligne);color:var(--gris)} .avap-avec{background:var(--marine);color:var(--blanc);font-weight:700} .avap-fleche{align-self:center;color:var(--cuivre-sombre);width:22px} .avap-fleche svg{width:100%;height:auto;display:block} .avap-entetes{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;margin-bottom:4px} .avap-entetes span{font-size:12.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--gris);padding:0 18px} .avap-entetes span:last-child{color:var(--marine)} .avap-entetes i{width:22px} @media(max-width:700px){ .avap-ligne{grid-template-columns:1fr;gap:8px} .avap-fleche{transform:rotate(90deg);justify-self:center;width:18px} .avap-entetes{display:none} } /* Contrôle humain — ce qu'iaPilote fait / ce qui reste entre vos mains, côte à côte, la colonne de l'artisan en marine. */ .controle{display:grid;grid-template-columns:1fr 1fr;gap:16px} .controle-col{border-radius:16px;padding:28px} .controle-col--fait{background:var(--blanc);border:1px solid var(--ligne)} .controle-col--vous{background:var(--marine);color:var(--blanc)} .controle-titre{font-family:var(--afficheur);font-size:18px;margin-bottom:16px} .controle-col--vous .controle-titre{color:var(--cuivre)} .controle-liste{display:grid;gap:11px} .controle-liste li{display:flex;gap:10px;align-items:center;font-size:15px;font-weight:600} .controle-liste svg{width:18px;height:18px;flex:none;color:var(--cuivre-sombre)} .controle-col--vous .controle-liste svg{color:var(--cuivre)} @media(max-width:820px){.controle{grid-template-columns:1fr}} /* Garanties réelles — six faits contractuels, pas un témoignage fabriqué. Cartes pleines, lisibles, alignées à gauche. */ .garanties{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:36px} .garantie{background:var(--blanc);border:1px solid var(--ligne);border-radius:14px;padding:20px;display:flex;gap:14px;align-items:flex-start} .garantie svg{width:26px;height:26px;color:var(--cuivre-sombre);flex:none;margin-top:2px} .garantie b{display:block;font-size:15px;line-height:1.3} .garantie small{display:block;margin-top:5px;font-size:12.5px;color:var(--gris)} @media(max-width:900px){.garanties{grid-template-columns:1fr 1fr}} @media(max-width:600px){.garanties{grid-template-columns:1fr}} /* ══════════ Pages du tunnel (portage du 19/08) ══════════ */ /* Portes (404, espace clients, merci) — un seul bloc centré. */ .porte{padding-top:150px} .porte-centre{max-width:760px;margin:0 auto;text-align:center} .porte-aide{margin-top:18px;font-size:14.5px;color:var(--gris)} .porte-aide a{text-decoration:underline;min-height:var(--cible-min);display:inline-flex;align-items:center} /* Liens en prose : la surface tactile atteint le plancher sans changer la ligne (padding-block sur element en ligne — meme motif que .ck-text a). ⚠️ RAPATRIÉE DE `consent.css` LE 14/09 — cette règle n'a rien à voir avec le consentement, l'extraction du 13/09 l'avait emportée par voisinage physique dans l'ancien fichier. Mesuré : aucun écart de valeur calculée entre les deux emplacements (aucune @media de style.css ne la visait), le déplacement est donc une correction de rangement, pas un correctif de rendu. Elle reste ici : `consent.css` ne porte que le bandeau. */ .faq-corps a,.chapeau a,.porte-aide a{padding-block:13px;position:relative} .coche-ronde{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--marine);color:var(--blanc);margin:0 auto 22px} .coche-ronde svg{width:30px;height:30px} .puce-temps{display:inline-block;background:var(--creme);color:var(--cuivre-sombre);font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:4px 11px;border-radius:999px;margin-bottom:12px} .ic-mail{width:17px;height:17px;vertical-align:-3px;margin-right:4px} .note-alerte{margin:22px auto 0;max-width:34rem;text-align:left;background:var(--creme);border-left:4px solid var(--cuivre);border-radius:0 10px 10px 0;padding:14px 18px;font-size:14.5px;color:var(--gris);line-height:1.55} .note-alerte strong{color:var(--marine)} .note-alerte a{text-decoration:underline} /* Commande — la carte d'ordre et ses consentements. */ .cmd-grille{display:grid;grid-template-columns:1.1fr 1fr;gap:28px;align-items:start} @media(max-width:900px){.cmd-grille{grid-template-columns:1fr}} .cmd-carte h2{font-family:var(--afficheur);font-size:26px;margin-top:6px} .cmd-lignes{margin-top:18px;display:grid} .cmd-ligne{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid var(--ligne);font-size:15px;align-items:baseline} .cmd-ligne small{display:block;font-size:12.5px;color:var(--gris);font-weight:500} .cmd-ligne b{white-space:nowrap;font-size:16px} .cmd-ligne .cmd-b-doux,.cmd-ligne .order-phrase{white-space:normal;text-align:right;font-size:14.5px} .cmd-note{margin-top:12px;font-size:12.5px;color:var(--gris);line-height:1.5} /* ⚠️ RELEVÉ LE 23/08 (direction visuelle) — 13,5px était sous le plancher de lisibilité (16px) demandé pour un texte que l'artisan doit vraiment lire, pas survoler : c'est un consentement, pas un libellé de filtre. Interligne resserré à 1.4 (mesuré : 543px pour les trois cases à 360px de large, sous la fenêtre dégagée de 555px de cette page) — « deux lignes serrées » plutôt que trois à 1.5, autorisé nommément par Houssem pour CETTE zone. */ .consentement{display:flex;gap:10px;align-items:flex-start;margin-top:14px;font-size:16px;line-height:1.4;color:var(--gris);cursor:pointer} .consentement input{margin-top:3px;width:18px;height:18px;flex:none;accent-color:var(--marine)} .consentement a{text-decoration:underline} .geste.est-inactif{opacity:.55;cursor:not-allowed} /* ⚠️ RAPATRIÉE DE `consent.css` LE 14/09 — cette règle n'a rien à voir avec le bandeau, l'extraction du 13/09 l'avait emportée par voisinage rédactionnel (le commentaire ci-dessous discute le recouvrement possible avec `.ck`). Chargée depuis `consent.css` (donc APRÈS ce fichier), sa valeur inconditionnelle gagnait la cascade même sous 900px, à spécificité égale avec l'override `margin-top:10px` de la media query ci-dessous — l'override était MORT. Mesuré (`getComputedStyle`, 360×800) : `margin-top` rendait `14px` au lieu de `10px` sous 900px ; à 1440×900 aucun écart (aucune media query n'y régit cette valeur). Corrigée en ramenant la règle ICI, à sa place d'origine, avant la media query qui la corrige — exactement l'agencement d'avant le 13/09. ⚠️ QUATRE MESURES avant la forme retenue pour la POSITION du bouton (ce qui suit ne parle plus de cascade mais du geste lui-même) — les trois premières ont toutes tourné autour de la MÊME idée (« coller le bouton en bas d'écran pendant qu'on lit les cases ») et l'ont abandonnée chacune pour une raison différente : 1. `fixed` : reste à l'écran PARTOUT sur la page, sans lien avec le scroll — 7 chevauchements avec la ligne de prix et « Formulaire de démarrage » ; 2. `sticky` dans `.cmd-carte` (1360px) : se déclenchait dès scrollY=0, RECOUVRANT tout ce qui suivait — 4 chevauchements de plus ; 3. `sticky` dans `.cmd-paiement-zone` (~688px), `bottom:0` : collait au bord du viewport, exactement là où le bandeau de cookies (`.ck`, fixed, z-index:1000) s'ancre aussi — recouvert EN ENTIER, invisible à `mesure-defilement.js` (aucun des points de défilement mesurés ne coïncidait avec l'instant précis du recouvrement) ; 4. `sticky` avec `bottom:var(--ck-reserve)` (le mécanisme du 12/08, exactement fait pour ce cas) : corrige le n°3, MAIS révèle un problème structurel plus profond que la position du bouton — la zone entière (cases 543px + geste 130px ≈ 688px) ne tient PAS dans les 555px de fenêtre dégagée, cases ET bouton confondus. Sticky ne pousse QUE ce qui vient après lui dans le flux (rien, ici) ; les cases, elles, continuent de défiler normalement et peuvent passer SOUS le bouton déjà collé — recouvrement mesuré (4860px², suite 507) à un point de défilement parfaitement naturel (`data-bloc-atteignable` centré à l'écran), invisible aux TROIS premières mesures qui ne visitaient jamais ce point précis. **LA VRAIE RÉPONSE N'ÉTAIT PAS UNE 5ᵉ POSITION, C'ÉTAIT D'ABANDONNER LE PRINCIPE.** Un bouton « toujours visible en scrollant » (le raffinement) ne peut PAS coexister avec « ne recouvre jamais le texte légal qu'on est en train de lire » (la clarté) tant que les deux ensemble dépassent la fenêtre — et sur une case dont le texte est CONTRACTUELLEMENT figé (skill frontend-design, arbitrage §1 : « quand le raffinement et la clarté se contredisent, la clarté gagne »), il n'y a qu'une issue : le geste redevient un élément de FLUX NORMAL, exactement comme au format desktop (aucune règle de positionnement n'existe au-dessus de 900px). Les trois cases (543px) tiennent SEULES dans la fenêtre dégagée (555px, item 22) ; le bouton est le prochain élément qu'on atteint en scrollant un peu plus — jamais superposé à rien, puisqu'un élément en flux ne recouvre jamais ce qui le précède. */ .cmd-paiement-geste{margin-top:14px} @media(max-width:900px){ .cmd-paiement-geste{padding-bottom:env(safe-area-inset-bottom)} /* ⚠️ LA ZONE CONTRACTUELLE TIENT ENTIÈRE DANS LA FENÊTRE DÉGAGÉE — cases ET geste, pas les cases seules (durcissement demandé par Houssem le 24/08). L'ancienne garantie s'arrêtait aux trois cases (543px sous 555px) ; le bouton venait « juste après en scrollant ». Mesuré à 360×800 : première case → bas du bouton = 625px pour 555px dégagés (800 − en-tête 60 − bandeau cookies 185), soit 70px de trop. AUCUN MOT N'EST TOUCHÉ, et c'est la contrainte qui gouverne tout le reste : les trois cases portent le FAIT consenti, jamais un renvoi. Ce qui change est la place donnée au texte, pas le texte : — le padding latéral de la carte passe de 24 à 16px, ce qui REND 32px de largeur au texte (235 → 267px). Élargir retire des LIGNES sans rien retirer à la lisibilité : c'est le seul levier qui gagne de la hauteur en améliorant la lecture, donc il passe en premier ; — les respirations verticales passent de 14 à 10px. L'interligne (1.4) et la taille (16px) ne bougent PAS : ils étaient déjà au plancher arbitré le 23/08 pour cette zone précise. Bornée à 900px — le même palier que `.cmd-grille`, et JAMAIS une `@media` sous 480px : la garantie « ce qui passe à 360 passe à 390 » repose entièrement sur leur absence (suite 141). */ /* La gouttière de `.cadre` (40px au total) est rendue au texte à 24px sur CETTE section seulement — `.cadre` est partagée par dix pages, on ne la touche pas (corollaire du piège n°45 : une classe partagée se modifie en demandant d'abord qui d'autre la consomme). */ .cmd-cadre{width:min(100% - 24px,1180px)} .cmd-carte{padding-left:16px;padding-right:16px} /* LE GISEMENT PRINCIPAL — la case à cocher réservait 28px de largeur (18px + 10px de gouttière) sur CHACUNE des lignes du paragraphe, alors qu'elle n'en occupe qu'UNE. En la sortant du flux, les lignes 2 et suivantes récupèrent ces 28px : le texte passe de 267 à 295px utiles sans qu'un seul mot, ni l'interligne (1.4), ni la taille (16px) ne bougent. C'est ce qui retire les deux lignes qui manquaient — élargir retire des lignes en AMÉLIORANT la lecture, contrairement à resserrer. Le `