:root{ --encre:#16212A; --texte:#474C51; --texte-2:#52565B; --gris:#78787A; --vert:#33722A; --vert-btn:#3E6C30; --vert-sed:#2C6A1A; --vert-lien:#2D6D33; --ambre:#F1B314; --ambre-titre:#EC9B01; --ambre-fond:#FEF6E3; --sed:#F8F9F0; --tra:#FEF8E8; --bord:#E6E9E3; --bord-clair:#F1F1EC; --bord-creme:#EFE7D4; --fond:#FFFFFF; --fond-creme:#FDFBF2; --ombre:0 6px 24px rgba(30,42,50,.05); --ombre-forte:0 12px 34px rgba(30,42,50,.10); } *{box-sizing:border-box} html{scroll-behavior:smooth} html,body{margin:0;padding:0} body{ background:var(--fond); color:var(--texte); font-family:Inter,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; font-size:16px; line-height:1.62; } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important} } /* ---------------------------------------------- bandeau de navigation */ /* Meme cadre 1536 que la maquette : la barre est donc a l'identique de celle de l'accueil quelle que soit la largeur de l'ecran. */ .barre{container-type:inline-size; position:relative; width:100%; aspect-ratio:1536/104; min-width:900px; background:var(--fond); z-index:20} .barre .e{position:absolute; margin:0} .barre img{display:block} .barre a{text-decoration:none} .barre .lib{white-space:nowrap; letter-spacing:-.004em} /* ⚠️ z-index INDISPENSABLE. La scène de l'accueil est `position:relative` et ses éléments portent des z-index jusqu'à 9 : sans z-index propre, la barre collée est peinte DERRIÈRE eux — elle est bien là (mesurée à top:0, hauteur 59), mais `elementFromPoint` rend la scène. C'est le défaut que Pierre décrivait le 28/08/2026 : « le contenu du site passe derrière le menu et on ne devrait pas le voir ». 70 : au-dessus de la scène (9) et de la barre mobile (60), en dessous de la modale des mentions légales (80/81), qui doit tout recouvrir. */ .cadre-barre{width:100%; overflow-x:auto; overflow-y:hidden; position:sticky; top:0; z-index:70; background:var(--fond); border-bottom:1px solid var(--bord-clair)} /* l'accueil reproduit la maquette, qui porte deja son propre bandeau : la barre partagee ferait doublon. */ body[data-page="accueil"] .cadre-barre{display:none} /* ── La barre condensee, montree des qu'on defile ──────────────────── Pierre, 28/08/2026 : « lorsqu'on scrolle, le menu du haut devrait se reduire un peu pour laisser plus de place au contenu ». La barre de repos est une homothetie de la maquette : sa hauteur SUIT sa largeur (130 px sur un ecran de 1920). Celle-ci est une mise en page normale, donc de hauteur fixe quelle que soit la largeur. */ .barre-reduite{display:none} body.defile .barre{display:none} body.defile .barre-reduite{display:flex; align-items:center; gap:26px; height:58px; padding:0 24px; background:var(--fond); min-width:900px} body.defile .cadre-barre{box-shadow:0 2px 10px rgba(30,42,50,.06)} .br-logo{line-height:0; flex:0 0 auto} .br-logo img{height:30px; width:auto; display:block} .br-liens{display:flex; gap:2px; flex:1; justify-content:center} .br-liens a{display:inline-flex; align-items:center; gap:7px; padding:7px 11px; border-radius:9px; font-size:13.5px; font-weight:500; color:var(--encre); text-decoration:none; white-space:nowrap} .br-liens a:hover{background:var(--sed)} .br-liens .picto{flex:0 0 auto; color:var(--gris)} .br-btn{flex:0 0 auto; display:inline-flex; align-items:center; height:34px; padding:0 14px; border-radius:10px; font-size:13px; font-weight:600; text-decoration:none; white-space:nowrap} .br-vide{background:#fff; color:var(--encre); border:1px solid var(--bord)} .br-plein{background:var(--vert-btn); color:#fff; border:1px solid transparent} /* L'onglet courant : meme repere que sur la barre de repos, le vert. */ body[data-page="accueil"] .br-liens a[data-p="accueil"], body[data-page="explorer"] .br-liens a[data-p="explorer"], body[data-page="prospection"] .br-liens a[data-p="prospection"], body[data-page="mes-ruchers"] .br-liens a[data-p="mes-ruchers"], body[data-page="tarifs"] .br-liens a[data-p="tarifs"], body[data-page="ressources"] .br-liens a[data-p="ressources"]{ background:var(--sed); color:var(--vert); font-weight:600} body[data-page="accueil"] .br-liens a[data-p="accueil"] .picto, body[data-page="explorer"] .br-liens a[data-p="explorer"] .picto, body[data-page="prospection"] .br-liens a[data-p="prospection"] .picto, body[data-page="mes-ruchers"] .br-liens a[data-p="mes-ruchers"] .picto, body[data-page="tarifs"] .br-liens a[data-p="tarifs"] .picto, body[data-page="ressources"] .br-liens a[data-p="ressources"] .picto{ color:var(--vert)} /* ⚠️ L'accueil n'affiche pas la barre partagee au repos — mais des qu'on defile, la barre de la maquette est partie vers le haut et il ne reste RIEN. La barre condensee s'y montre donc, elle. */ body[data-page="accueil"].defile .cadre-barre{display:block} /* ⚠️ Une ancre place sa cible en haut de la fenetre — c'est-a-dire SOUS la barre collee, qui la recouvre. Le titre de la section visee disparaissait derriere le menu (Pierre, 28/08/2026 : « le contenu du site passe derriere le menu »). La marge de defilement vaut la hauteur de la barre condensee, puisque c'est elle qui est affichee des qu'on a defile. */ #contact, .page > section[id], [id^="doc-"]{scroll-margin-top:78px} /* ---------------------------------------------- structure des pages */ .page{display:none} .page.actif{display:block} .large{width:100%; overflow-x:auto} .contenu{max-width:1290px; margin:0 auto; padding:0 24px} /* ⚠️ PADDING EN LONGHAND, PAS EN RACCOURCI. Ces deux blocs portent aussi la classe `.contenu`, qui pose les marges laterales de toute la mise en page. Ecrit `padding:64px 0 8px`, le raccourci REMET CES MARGES A ZERO — et `section.bloc` (0,1,1) l'emporte meme sur un `.contenu` (0,1,0) declare plus loin. Resultat mesure au rendu : sur telephone, les titres de section et leurs chapeaux touchaient le bord de l'ecran pendant que les cartes, elles, gardaient leur marge. Une feuille qui arrive apres une autre n'ajoute que ce qui manque : jamais un raccourci sur une propriete qu'elle ne possede pas. */ .entete{padding-top:64px; padding-bottom:8px} .fil{font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--vert); margin:0 0 14px} h1.titre{font-size:clamp(34px,3.4vw,50px); line-height:1.1; font-weight:700; color:var(--encre); letter-spacing:-.018em; margin:0 0 20px; text-wrap:balance; max-width:22ch} h1.titre .v{color:var(--vert)} .chapo{font-size:clamp(17px,1.35vw,20px); color:var(--texte); max-width:62ch; margin:0} .trait{width:26px; height:3px; border-radius:2px; background:var(--ambre); margin:26px 0 0} section.bloc{padding-top:56px; padding-bottom:56px} h2.section{font-size:clamp(23px,2vw,29px); line-height:1.22; font-weight:700; color:var(--encre); letter-spacing:-.012em; margin:0 0 8px; text-wrap:balance} h2.section + .sous{margin:0 0 30px; color:var(--texte); max-width:64ch} h3{font-size:17px; font-weight:700; color:var(--encre); margin:0 0 8px; line-height:1.35} p{margin:0 0 14px} p:last-child{margin-bottom:0} a{color:var(--vert-lien)} a:focus-visible{outline:2px solid var(--vert); outline-offset:3px; border-radius:3px} strong{color:var(--encre)} .centre{text-align:center} .centre h2.section{margin-left:auto;margin-right:auto} .centre .sous{margin-left:auto;margin-right:auto} .centre .trait{margin-left:auto;margin-right:auto} /* ---------------------------------------------- briques */ .grille{display:grid; gap:22px} .g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))} .g3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))} .g4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))} /* ⚠️ `auto-fit` range les cartes selon la PLACE, pas selon le propos : six angles morts sortaient en 4 + 2, avec une première carte trois fois plus haute que ses voisines. Quand le nombre de cartes compte (deux lignes de trois, demandé par Pierre le 27/08), la grille se déclare — elle ne se laisse pas calculer. */ .g-trois{grid-template-columns:repeat(3,minmax(0,1fr))} @media (max-width:900px){ .g-trois{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:560px){ .g-trois{grid-template-columns:minmax(0,1fr)} } .carte{background:#fff; border:1px solid var(--bord-clair); border-radius:20px; padding:26px 24px; box-shadow:var(--ombre)} .carte.creme{background:var(--tra); border-color:#F5E7C4} .carte.olive{background:var(--sed); border-color:#EAEDDC} .carte img.ico{width:44px; height:44px; display:block; margin:0 0 14px} /* ⭐ Le picto d'une carte est un dessin, pas une image : il prend la couleur qu'on lui donne et reste net a n'importe quelle definition d'ecran. L'epaisseur de trait est relevee a 1.5 parce qu'a 44 px le trait de 1.7 du jeu de 26 px s'epaissit visiblement. */ .carte svg.ico{width:44px; height:44px; display:block; margin:0 0 14px; color:var(--vert); stroke-width:1.5} .carte.amb svg.ico{color:var(--ambre-titre)} .carte p{font-size:14.5px; color:var(--texte-2)} .carte ul{margin:10px 0 0; padding-left:19px; font-size:14.5px; color:var(--texte-2)} .carte li{margin:0 0 6px} .etape{display:flex; gap:18px; align-items:flex-start} .num{flex:0 0 auto; width:34px; height:34px; border-radius:50%; background:var(--vert-btn); color:#fff; font-weight:700; font-size:15px; display:grid; place-items:center; font-variant-numeric:tabular-nums} .bandeau{background:var(--fond-creme); border-top:1px solid var(--bord-creme); border-bottom:1px solid var(--bord-creme)} .btn{display:inline-flex; align-items:center; gap:10px; border-radius:12px; padding:13px 22px; font-weight:600; font-size:15px; text-decoration:none; border:1.5px solid transparent} .btn-plein{background:var(--vert-btn); color:#fff} .btn-plein:hover{background:#355C29} /* ⚠️ 27/08/2026 : le contour valait `--bord` (#E6E9E3) — 1,05:1 sur du blanc, c'est-à-dire RIEN. Sur la page Tarifs, trois appels à l'action sur quatre s'affichaient en texte nu : le bouton plein ressemblait à la seule offre cliquable. Un repère fin se vérifie sur le fond où il tombe, pas dans la feuille de style. */ .btn-vide{background:#fff; color:var(--encre); border-color:#7E9A76} .btn-vide:hover{border-color:var(--vert)} .boutons{display:flex; flex-wrap:wrap; gap:14px; margin-top:26px} .pastille{display:inline-block; background:var(--ambre-fond); color:#7A5A08; border:1px solid #F3DFA8; border-radius:999px; padding:5px 12px; font-size:12.5px; font-weight:600} .pastille.verte{background:#EFF4EC; color:#2C5A21; border-color:#D6E4CF} /* tableaux : toujours defilables, jamais de debordement de la page */ .tableau{overflow-x:auto; border:1px solid var(--bord-clair); border-radius:16px; background:#fff; box-shadow:var(--ombre)} table{border-collapse:collapse; width:100%; min-width:640px; font-size:14.5px} th,td{text-align:left; padding:13px 18px; border-bottom:1px solid var(--bord-clair); vertical-align:top} thead th{background:var(--fond-creme); color:var(--encre); font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; border-bottom:1px solid var(--bord-creme); white-space:nowrap} tbody tr:last-child td{border-bottom:0} td.num-col{font-variant-numeric:tabular-nums; white-space:nowrap} /* calendrier de floraison */ .cal{display:grid; grid-template-columns:repeat(12,1fr); gap:3px; margin-top:10px} .cal span{height:20px; border-radius:4px; background:#EFF1EC; font-size:9.5px; color:#8B9089; display:grid; place-items:center} .cal span.on{background:var(--ambre); color:#5A4200; font-weight:700} .cal span.pol{background:#CFE0C6; color:#2C5A21; font-weight:700} .note{font-size:13.5px; color:var(--gris)} .liste-nette{list-style:none; margin:0; padding:0} .liste-nette li{position:relative; padding-left:22px; margin:0 0 10px} .liste-nette li::before{content:""; position:absolute; left:0; top:.62em; width:8px; height:8px; border-radius:2px; background:var(--ambre)} .liste-nette.verte li::before{background:var(--vert)} /* tarifs */ .prix{font-size:38px; font-weight:800; color:var(--encre); letter-spacing:-.02em; line-height:1.1; font-variant-numeric:tabular-nums} .prix small{font-size:14px; font-weight:500; color:var(--gris); letter-spacing:0} /* ⚠️ `.carte p` (0,1,1) bat `.prix` (0,1,0) : DANS une carte, le prix sortait à 14,5 px — la taille du texte courant. Le tarif, qui est l'information que le lecteur cherche, était le plus petit élément de sa carte. Signalé par Pierre le 27/08. Une règle plus spécifique le rétablit ; changer `.carte p` déplacerait le défaut ailleurs. */ .offre .prix{font-size:34px; line-height:1.05; margin:14px 0 2px} .offre .prix small{font-size:15px} .offre{display:flex; flex-direction:column; height:100%; align-items:flex-start} .offre > *{width:100%} .offre .pastille{width:auto} /* Le picto de l'offre, à gauche de sa pastille. Le dessin vient de `mire.PICTOS` (une seule définition pour le site et le produit) ; ici on ne fait que le poser. */ .offre-tete{display:flex;align-items:center;gap:10px;width:auto} .offre-tete .picto{flex:0 0 auto;color:var(--vert)} /* « Sans engagement, sans carte bancaire » : la seule ligne de la carte gratuite qui leve une objection au lieu d'annoncer une fonction. Elle se lit donc AVANT la liste, et elle est verte. */ .offre .sans-ce{margin:0 0 14px; font-size:13.5px; font-weight:600; color:var(--vert); line-height:1.45} .offre .boutons{margin-top:auto; padding-top:22px} .offre.mise{border-color:var(--vert); box-shadow:0 14px 38px rgba(51,114,42,.13)} /* pied de page (identique sur toutes les pages) */ .pied{background:var(--fond-creme); border-top:1px solid var(--bord-creme); color:var(--texte); font-size:14px; line-height:1.65; padding:56px 6vw 0} .pied-grille{max-width:1400px; margin:0 auto; display:grid; gap:40px 56px; grid-template-columns:minmax(260px,1.4fr) repeat(3,minmax(150px,1fr))} .pied h2{font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--encre); margin:0 0 14px} .pied ul{list-style:none; margin:0; padding:0} .pied li{margin:0 0 8px} .pied a{color:var(--texte); text-decoration:none; border-bottom:1px solid transparent} .pied a:hover,.pied a:focus-visible{color:var(--vert); border-bottom-color:var(--vert)} .pied-marque img{width:210px; height:auto; display:block; margin-bottom:14px} .pied-marque p{margin:0 0 12px; max-width:38ch} .pied-legal{max-width:1400px; margin:44px auto 0; padding:26px 0 34px; border-top:1px solid var(--bord-creme); font-size:12.5px; color:#6B7075} .pied-legal dl{margin:14px 0 0; display:grid; gap:4px 18px; grid-template-columns:max-content 1fr} .pied-legal dt{font-weight:600; color:var(--encre)} .pied-legal dd{margin:0} .pied-legal .vide{color:#9A7A22; background:#FDF6E4; border:1px dashed #E3C775; border-radius:5px; padding:1px 7px; font-size:12px} .pied-bas{display:flex; flex-wrap:wrap; gap:8px 22px; align-items:baseline; margin-top:22px; padding-top:18px; border-top:1px solid var(--bord-creme)} @media (max-width:900px){ .pied-grille{grid-template-columns:1fr 1fr} .pied{padding:44px 24px 0} .entete{padding-top:44px; padding-bottom:4px} section.bloc{padding-top:40px; padding-bottom:40px} } @media (max-width:560px){ .pied-grille{grid-template-columns:1fr} .pied-legal dl{grid-template-columns:1fr} } /* ---------------------------------------------- scene de l'accueil */ .cadre{width:100%; overflow-x:auto; overflow-y:hidden} .scene{container-type:inline-size; position:relative; width:100%; min-width:900px; margin:0 auto; aspect-ratio:1536/1024; background:var(--fond); overflow:hidden} .scene::before,.scene::after{content:""; position:absolute; pointer-events:none; z-index:0} .scene::before{left:-8%;top:-6%;width:56%;height:62%; background:radial-gradient(closest-side,#FEFCF4 0%,rgba(254,252,244,0) 100%)} .scene::after{right:-10%;top:22%;width:46%;height:70%; background:radial-gradient(closest-side,#FAFCF5 0%,rgba(250,252,245,0) 100%)} .scene .e{position:absolute; margin:0} .scene img.e{display:block; object-fit:fill} /* ⭐ Les deux boutons d'en-tête de la scène sont de VRAIS liens : ils étaient trois calques (un fond, une icône, un texte) posés côte à côte, donc rien n'était cliquable ni atteignable au clavier. */ .sc-btn{cursor:pointer; transition:opacity .15s, box-shadow .15s; line-height:1; font-family:Inter,system-ui,sans-serif} .sc-btn:hover{opacity:.9} .sc-btn:focus-visible{outline:2px solid var(--vert-sed); outline-offset:2px} .sc-btn svg{flex:0 0 auto} /* ── Les trois arguments du hero ───────────────────────────────── ⚠️ Ils étaient neuf éléments posés un par un, à 0,599 cqw de corps — 9,2 px sur un écran de 1536 — et chaque picto tombait à une ordonnée différente de son texte. Un bloc unique : le navigateur aligne, et le corps remonte à une taille lisible. (Pierre, 28/08/2026) */ .scene .args{display:flex; align-items:center; gap:2.1cqw} .scene .arg{display:flex; align-items:center; gap:.66cqw; white-space:nowrap} .scene .arg .picto{flex:0 0 auto; color:var(--vert); stroke-width:1.6} .scene .arg-txt{display:flex; flex-direction:column; line-height:1.25} .scene .arg-txt b{font-size:.80cqw; font-weight:700; color:var(--encre)} .scene .arg-txt i{font-size:.74cqw; font-weight:400; font-style:normal; color:var(--gris)} .scene .t{letter-spacing:-0.004em} .scene .t .v{color:var(--vert)} .scene .t .fl{font-weight:600} .entete.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,600px); gap:28px;align-items:center} .entete.duo .duo-txt{min-width:0} .illus-couches{width:100%;height:auto;display:block;overflow:visible} .illus-couches .cp{transform-origin:center; animation:cp-monte .9s cubic-bezier(.2,.7,.3,1) both} .illus-couches .cp0{animation-delay:.05s} .illus-couches .cp1{animation-delay:.16s} .illus-couches .cp2{animation-delay:.27s} .illus-couches .cp3{animation-delay:.38s} .illus-couches .cp4{animation-delay:.49s} @keyframes cp-monte{from{opacity:0;transform:translateY(26px)} to{opacity:1;transform:translateY(0)}} @media (prefers-reduced-motion:reduce){ .illus-couches .cp{animation:none}} @media(max-width:900px){.entete.duo{grid-template-columns:1fr} .illus-couches{max-width:460px;margin:8px auto 0}} .illus-p{width:100%;height:auto;display:block;overflow:visible} .illus-p .ip{animation:ip-monte .8s cubic-bezier(.2,.7,.3,1) both} .illus-p .ip0{animation-delay:.05s} .illus-p .ip1{animation-delay:.16s} .illus-p .ip2{animation-delay:.27s} .illus-p .ip3{animation-delay:.38s} .illus-p .ip4{animation-delay:.49s} @keyframes ip-monte{from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)}} @media (prefers-reduced-motion:reduce){.illus-p .ip{animation:none}} @media(max-width:900px){.illus-p{max-width:460px;margin:8px auto 0}} .cta-bande{background:var(--vert-btn)} .cta-in{display:flex;gap:34px;align-items:center;justify-content:space-between; flex-wrap:wrap;padding-top:38px;padding-bottom:38px} .cta-txt{flex:1 1 420px;min-width:0} .cta-titre{font-size:25px;font-weight:700;color:#fff;margin:0 0 8px; line-height:1.24;text-wrap:balance} .cta-p{font-size:15px;color:rgba(255,255,255,.86);margin:0;max-width:58ch; line-height:1.6} .cta-btns{display:flex;gap:12px;flex-wrap:wrap;flex:0 0 auto} /* ⚠️ NE PAS redéclarer `.btn` ici. Cette feuille arrive APRÈS `site_css`, et son raccourci `border:` remettait le contour de TOUS les boutons du site à `transparent` : `.btn-vide` n'avait plus de contour du tout, sur les six pages, depuis la v8. Personne ne l'a vu parce que la règle n'échoue pas — elle repeint. Quatrième collision de nom générique du projet, après `.app`, `.rang` et `.reglette`. On n'ajoute ici que ce qui manque vraiment, et rien qui touche au contour. ⚠️ `font-family` sert au