/* ============================================================ v4-accueil.css — ACCUEIL hygiene-alimentaire-haccp.com Genere depuis _maquettes/v4.css le 08/10/2026. TOUTES les regles sont confinees sous .v4 : cette feuille ne peut pas toucher une page qui n'a pas
. Chargee par header.php uniquement quand $index==1, donc l'accueil seul. NE PAS EDITER ICI : editer _maquettes/v4.css puis relancer prefixer.py ============================================================ */ /* ========================================================================= v4.css — feuille commune aux maquettes de hygiene-alimentaire-haccp.com Samy, 08/10/2026. Un seul fichier pour l'accueil, les articles, les pages ville / departement / region et la page formation : c'est ce qui rend les pages coherentes entre elles, et c'est aussi ce qui simplifiera le portage. AU PORTAGE : prefixer toutes ces regles (par ex. sous #hav4) — les feuilles de ce parc sont partagees par les 14 sites, une regle d'element nue y casse autre chose. ========================================================================= */ /* ========================================================================= RÉGLAGES — tout ce qui se change rapidement est ici, et nulle part ailleurs. Changer une valeur ci-dessous la change sur TOUTES les pages du site. ========================================================================= */ .v4{ /* ---------- 1. LES COULEURS DE LA MARQUE ---------- */ --bleu:#242fa8; /* le bleu du logo : liens, numéros d'étape, accents */ --bleu-nuit:#18205e; /* fond du bandeau de titre et du pied de page */ --rouge:#e62117; /* boutons d'action — c'est la couleur qui fait cliquer */ --vert:#2e9e63; /* coches de réassurance */ --jaune:#ffd34d; /* le mot mis en avant dans le titre */ /* ---------- 2. LES GRIS ET LES FONDS ---------- */ --encre:#141a3c; /* titres et texte fort */ --texte:#4a5068; /* texte courant */ --gris:#7d86a1; /* mentions secondaires, légendes */ --filet:#e4e7f1; /* traits de séparation, bords de cartes */ --voile:#f5f7fc; /* fond des sections claires */ --bleu-pale:#eef1fa; /* fond des encadrés et des vignettes */ --bleu-clair:#dbe1f0; /* bords des champs de formulaire */ /* ---------- 3. LE BANDEAU DE TITRE (pages intérieures) ---------- Pour l'éclaircir : remplacer --tete-fond par var(--bleu). Pour le passer en clair : --tete-fond:var(--voile); --tete-texte:var(--encre); --tete-sous:var(--texte); --tete-filet:var(--filet). Pour le raccourcir : baisser --tete-haut et --tete-bas. */ --tete-fond:var(--bleu-nuit); --tete-texte:#fff; --tete-sous:#ccd2ec; --tete-filet:rgba(255,255,255,.16); --tete-haut:26px; /* espace au-dessus du titre */ --tete-bas:24px; /* espace sous la bande de preuve */ --tete-titre:33px; /* taille du titre du bandeau */ /* ---------- 4. LES BOUTONS ---------- */ --bouton-fond:var(--rouge); --bouton-survol:#c81b12; --bouton-rayon:10px; --bouton-ombre:0 4px 12px rgba(230,33,23,.22); /* ---------- 5. LES CARTES ---------- */ --carte-rayon:12px; --carte-bord:var(--filet); --carte-ombre:0 1px 2px rgba(17,24,39,.05); /* ---------- 6. LA LARGEUR DE PAGE ---------- */ --largeur:1180px; /* largeur maximale du contenu */ --gouttiere:20px; /* marge à gauche et à droite sur téléphone */ } .v4 *{box-sizing:border-box} .v4{ margin:0; /* Samy 08/10/2026 : pile de polices RELEVEE sur permis-de-exploitation.com (rendu navigateur, pas la feuille supposee). pe.com ne charge aucune webfont : l'Oswald qu'on y voit charge vient du widget d'avis, pas du site. */ font:400 16px/1.6 system-ui,-apple-system,"system-ui","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; color:var(--texte); background:#fff; } .v4 h1,.v4 h2,.v4 h3{color:var(--encre);margin:0 0 .4em;line-height:1.22;font-weight:700} .v4 h1{font-size:40px} .v4 h2{font-size:26px} .v4 h3{font-size:18px} .v4 p{margin:0 0 .9em} .v4 a{color:var(--bleu)} .v4 .wrap{max-width:var(--largeur);margin:0 auto;padding:0 var(--gouttiere)} /* --- bandeau de maquette (n'ira pas en ligne) --- */ .v4 .maquette{background:#141a3c;color:#fff;text-align:center;font-size:12px;letter-spacing:.08em;padding:7px;text-transform:uppercase} /* --- bandeau contact --- */ .v4 .contact-bar{background:var(--bleu-nuit);color:#fff;font-size:13.5px} .v4 .contact-bar .wrap{display:flex;flex-wrap:wrap;gap:6px 22px;align-items:center;justify-content:space-between;padding-top:9px;padding-bottom:9px} .v4 .contact-bar b{font-size:15px} .v4 .contact-bar span{color:#c3c9e6} /* --- en-tete --- */ .v4 .entete{border-bottom:1px solid var(--filet);background:#fff} .v4 .entete .wrap{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;justify-content:space-between;padding-top:14px;padding-bottom:14px} .v4 .logo{font-weight:700;font-size:21px;color:var(--bleu);letter-spacing:-.01em} .v4 .logo em{color:var(--rouge);font-style:normal} .v4 .menu-bascule{position:absolute;opacity:0;pointer-events:none} .v4 .menu-bouton{display:none;cursor:pointer;padding:10px;border:1px solid var(--filet);border-radius:8px;background:#fff} .v4 .menu-bouton span{display:block;width:22px;height:2px;background:var(--encre);border-radius:2px} .v4 .menu-bouton span+span{margin-top:5px} .v4 .menu-bascule:focus-visible+.menu-bouton{outline:2px solid var(--bleu);outline-offset:2px} .v4 .menu{display:flex;flex-wrap:wrap;gap:4px 20px;font-size:14.5px} .v4 .menu a{color:var(--encre);text-decoration:none} .v4 .menu a:hover{color:var(--bleu)} /* --- hero --- */ .v4 .hero{position:relative;background:var(--bleu-nuit);color:#fff;padding:46px 0 0} .v4 .hero h1{color:#fff;max-width:none;font-size:44px} /* titre sur toute la largeur */ .v4 .hero h1 em{color:var(--jaune);font-style:normal} .v4 .hero .accroche{color:#ccd2ec;max-width:76ch;font-size:17px;margin-bottom:26px} .v4 .hero .accroche b{color:#fff} .v4 .hero-bas{display:flex;flex-wrap:wrap;gap:22px 48px;align-items:center;justify-content:space-between;padding-bottom:26px} .v4 .faits{display:flex;flex-wrap:wrap;gap:16px 40px;align-items:baseline} .v4 .faits b{font-size:28px;color:#fff;display:block;line-height:1.1} .v4 .faits span{font-size:13.5px;color:#aab2d8} .v4 .cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center} .v4 .cta .bouton{width:auto;padding-left:28px;padding-right:28px} .v4 .bouton-2{ display:inline-block;padding:12px 22px;border-radius:10px;text-decoration:none; border:1px solid rgba(255,255,255,.45);color:#fff;font-weight:700;font-size:16px; } .v4 .bouton-2:hover{background:rgba(255,255,255,.12)} .v4 .bouton-2:focus-visible{outline:2px solid #fff;outline-offset:2px} /* bande de preuve, dans le premier ecran */ .v4 .preuve{ display:flex;flex-wrap:wrap;gap:12px 36px;align-items:center; border-top:1px solid var(--tete-filet);padding:15px 0;font-size:14.5px;color:var(--tete-sous); } .v4 .preuve b{color:#fff} .v4 .p-item{display:flex;align-items:center;gap:9px} .v4 .etoiles{color:#ffd34d;letter-spacing:1px;font-size:15px} .v4 .pastille{display:inline-flex;align-items:center;justify-content:center;background:#fff;border-radius:8px;padding:5px 9px;height:38px} .v4 .pastille img{display:block;height:26px;width:auto} /* --- la formation en deux temps + le bloc de reservation unique --- */ .v4 .offres{background:var(--voile);padding:34px 0 38px;border-bottom:1px solid var(--filet)} .v4 .offres .intro{text-align:center;margin-bottom:24px} .v4 .offres .intro p{color:var(--gris);margin:0;max-width:62ch;margin-inline:auto} .v4 .grille2{display:grid;grid-template-columns:1fr 1fr;gap:20px} .v4 .temps{background:#fff;border:1px solid var(--filet);border-radius:12px;box-shadow:0 1px 2px rgba(17,24,39,.05);display:flex;gap:0;overflow:hidden} .v4 .temps .photo{flex:0 0 250px;background:var(--bleu-pale);display:flex;align-items:center} .v4 .temps .photo img{display:block;width:250px;height:auto} .v4 .corps-temps{padding:18px 20px} .v4 .num{display:block;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--bleu);margin-bottom:6px} .v4 .temps h3{font-size:17.5px;margin-bottom:6px} .v4 .temps p{margin:0;font-size:14.8px} .v4 .reserver{ margin-top:22px;background:#fff;border:1px solid var(--filet);border-radius:12px; box-shadow:0 1px 2px rgba(17,24,39,.05);padding:20px 24px; display:grid;grid-template-columns:1fr 1.25fr;gap:18px 30px;align-items:center; } .v4 .r-prix b{display:block;font-size:34px;color:var(--encre);line-height:1} .v4 .r-prix span{color:var(--gris);font-size:14.5px} .v4 .r-form{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end} .v4 .r-form label{grid-column:1/-1;font-size:13px;font-weight:700;color:var(--encre);margin-bottom:-4px} .v4 .r-form select{padding:12px;border:1px solid var(--bleu-clair);border-radius:8px;font:inherit;font-size:15px;color:var(--encre);background:#fff} .v4 .r-form .bouton{width:auto;padding-left:26px;padding-right:26px;white-space:nowrap} .v4 .bouton{ display:block;width:100%;text-align:center;border:0;cursor:pointer; background:var(--bouton-fond);color:#fff;font:inherit;font-weight:700;font-size:16px; padding:13px 16px;border-radius:var(--bouton-rayon);text-decoration:none; box-shadow:var(--bouton-ombre); } .v4 .bouton:hover{background:var(--bouton-survol)} .v4 .bouton:focus-visible{outline:2px solid var(--encre);outline-offset:2px} /* --- prochaines sessions --- */ .v4 .sessions{padding:34px 0 10px} .v4 .sessions h2{text-align:center} .v4 .sessions .sous{text-align:center;color:var(--gris);margin-bottom:22px} .v4 .grille4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .v4 .session{border:1px solid var(--filet);border-radius:12px;padding:16px;background:#fff;box-shadow:0 1px 2px rgba(17,24,39,.05)} .v4 .session .ville{font-weight:700;color:var(--encre);font-size:17px} .v4 .session .cp{color:var(--gris);font-size:13px;font-weight:400} .v4 .session .dates{color:var(--texte);font-size:14.5px;margin:6px 0 10px} .v4 .session .bas{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:11px} .v4 .session .tarif{font-weight:700;color:var(--rouge);font-size:17px} .v4 .session .places{font-size:12.5px;color:var(--gris)} .v4 .toutes{text-align:center;margin:18px 0 0} /* --- textes explicatifs --- */ .v4 .detail{padding:36px 0} .v4 .detail .grille2{align-items:start} .v4 .panneau{background:#fff;border:1px solid var(--filet);border-radius:12px;padding:24px;box-shadow:0 1px 2px rgba(17,24,39,.05)} .v4 .panneau h2{font-size:21px} .v4 .vignette{display:block;width:100%;height:190px;object-fit:cover;border-radius:9px;margin-bottom:16px} .v4 .panneau ul{padding-left:19px;margin:0 0 .9em} .v4 .panneau li{margin-bottom:4px} .v4 .panneau li{margin-bottom:4px} .v4 .panneau .plus{display:inline-block;margin-top:4px;font-weight:700;text-decoration:none} .v4 .panneau .plus:hover{text-decoration:underline} /* --- encadre reglementaire --- */ .v4 .loi{background:var(--bleu-pale);border-left:4px solid var(--bleu);border-radius:0 10px 10px 0;padding:18px 22px;margin:26px 0 0;font-size:15px} .v4 .loi b{color:var(--encre)} /* --- rassurance --- */ .v4 .rassure{background:var(--voile);border-top:1px solid var(--filet);border-bottom:1px solid var(--filet);padding:30px 0} .v4 .grille4b{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .v4 .fait{display:flex;gap:11px;align-items:flex-start;font-size:15px} .v4 .coche{flex:0 0 20px;height:20px;border-radius:50%;background:var(--vert);position:relative;margin-top:2px} .v4 .coche::after{content:"";position:absolute;left:6.5px;top:3.5px;width:5px;height:9px;border:2px solid #fff;border-top:0;border-left:0;transform:rotate(42deg)} /* --- villes --- */ .v4 .villes{padding:36px 0} .v4 .villes h2{text-align:center} .v4 .villes .sous{text-align:center;color:var(--gris);margin-bottom:22px} .v4 .villes ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:9px 18px} .v4 .villes a{color:var(--encre);text-decoration:none;font-size:15px} .v4 .villes a:hover{color:var(--bleu);text-decoration:underline} /* --- logos (taille native : 210x67, 398x127, 352x143 -- jamais agrandis) --- */ .v4 .logo-img{display:block;height:46px;width:auto} .v4 .logo-conf{display:block;height:34px;width:auto} .v4 .avis{display:block;border:0;background:#fff;width:300px;height:135px} /* --- confiance --- */ .v4 .confiance{border-top:1px solid var(--filet);padding:24px 0} .v4 .confiance .wrap{display:flex;flex-wrap:wrap;gap:16px 44px;align-items:center;justify-content:center;color:var(--gris);font-size:14px} .v4 .confiance b{color:var(--encre);font-size:17px} .v4 .jeton{border:1px solid var(--filet);border-radius:8px;padding:7px 14px;font-weight:700;color:var(--encre);font-size:14px;background:#fff} /* --- appel final --- */ .v4 .final{background:var(--bleu-nuit);color:#fff;text-align:center;padding:44px 0} .v4 .final h2{color:#fff;font-size:28px} .v4 .final p{color:#ccd2ec;max-width:56ch;margin:0 auto 22px} .v4 .final .bouton{display:inline-block;width:auto;padding-left:34px;padding-right:34px} /* --- pied --- */ .v4 .pied{background:#101640;color:#aab2d8;padding:34px 0 0;font-size:14.5px} .v4 .pied-grille{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:26px} .v4 .pied h3{color:#fff;font-size:13px;letter-spacing:.07em;text-transform:uppercase;margin-bottom:12px} .v4 .pied ul{list-style:none;margin:0;padding:0} .v4 .pied li{margin-bottom:7px} .v4 .pied a{color:#aab2d8;text-decoration:none} .v4 .pied a:hover{color:#fff} .v4 .pied-bas{border-top:1px solid #222a5e;margin-top:28px;padding:16px 0;display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;font-size:13px} /* --- telephone --- */ @media(max-width:860px){ .v4 h1{font-size:30px} .v4 h2{font-size:22px} .v4 .hero{padding:30px 0 0} .v4 .hero h1{font-size:30px} .v4 .hero-bas{gap:18px;padding-bottom:16px} .v4 .cta{width:100%} .v4 .cta .bouton,.v4 .bouton-2{width:100%;text-align:center} .v4 .preuve{gap:10px 22px;font-size:13.5px} .v4 .grille2,.v4 .grille4,.v4 .grille4b,.v4 .pied-grille{grid-template-columns:1fr} .v4 .temps{flex-direction:column} .v4 .temps .photo{flex:none;justify-content:center;padding:14px 0} .v4 .reserver{grid-template-columns:1fr} .v4 .r-form{grid-template-columns:1fr} .v4 .r-form .bouton{width:100%} .v4 .grille4{gap:12px} .v4 .villes ul{grid-template-columns:repeat(2,1fr)} .v4 .faits{gap:14px 26px} .v4 .faits b{font-size:23px} /* le menu se replie derriere le bouton ; il se deploie quand la case est cochee */ /* wrap conserve : c'est lui qui permet au menu de passer SOUS l'en-tete, pleine largeur */ .v4 .entete .wrap{flex-wrap:wrap;gap:12px;justify-content:space-between} .v4 .menu-bouton{display:block;flex:0 0 auto} .v4 .menu{ display:none;order:3;flex-basis:100%;flex-direction:column;gap:0; border-top:1px solid var(--filet);margin-top:12px;padding-top:4px; } .v4 .menu a{display:block;padding:12px 2px;border-bottom:1px solid var(--filet);font-size:15.5px} .v4 .menu a:last-child{border-bottom:0} .v4 .menu-bascule:checked~.menu{display:flex} } @media(min-width:861px) and (max-width:1100px){ .v4 .grille4,.v4 .grille4b{grid-template-columns:repeat(2,1fr)} .v4 .villes ul{grid-template-columns:repeat(3,1fr)} } /* ========================================================================= AJOUTS pour les pages interieures (article, ville, departement, region, formation) ========================================================================= */ /* --- fil d'Ariane --- */ .v4 .ariane{font-size:13.5px;color:var(--gris);padding:14px 0 0} .v4 .ariane a{color:var(--gris);text-decoration:none} .v4 .ariane a:hover{color:var(--bleu);text-decoration:underline} .v4 .ariane span{margin:0 7px;color:var(--bleu-clair)} /* --- en-tete de page interieure (plus sobre que l'accueil) --- */ .v4 .tete{background:var(--tete-fond);color:var(--tete-texte);padding:var(--tete-haut) 0 var(--tete-bas)} .v4 .tete h1{color:var(--tete-texte);font-size:var(--tete-titre);margin-bottom:10px} .v4 .tete .sous{color:var(--tete-sous);max-width:76ch;margin:0} .v4 .tete .preuve{margin-top:16px} /* --- gabarit a deux colonnes : contenu + colonne de droite --- */ .v4 .deux-col{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:28px;padding:30px 0 40px;align-items:start} .v4 .colonne-d{display:flex;flex-direction:column;gap:16px;position:sticky;top:16px} /* --- corps d'article --- */ .v4 .article{background:#fff} .v4 .article h2{font-size:23px;margin-top:1.5em} .v4 .article h2:first-of-type{margin-top:.3em} .v4 .article p{font-size:16.5px;line-height:1.72;max-width:72ch} .v4 .article ul{max-width:72ch;padding-left:20px} .v4 .article li{margin-bottom:6px;line-height:1.65} .v4 .chapo{font-size:18px;line-height:1.65;color:var(--encre);border-left:4px solid var(--bleu-clair);padding-left:18px;margin-bottom:26px} .v4 .meta-art{font-size:13.5px;color:var(--gris);border-bottom:1px solid var(--filet);padding-bottom:14px;margin-bottom:22px} /* --- sommaire --- */ .v4 .sommaire{background:var(--voile);border:1px solid var(--filet);border-radius:12px;padding:18px 22px;margin:0 0 28px} .v4 .sommaire b{display:block;color:var(--encre);margin-bottom:10px;font-size:15px} .v4 .sommaire ol{margin:0;padding-left:20px} .v4 .sommaire li{margin-bottom:6px;line-height:1.5} .v4 .sommaire a{color:var(--texte);text-decoration:none} .v4 .sommaire a:hover{color:var(--bleu);text-decoration:underline} /* --- encart d'appel dans la colonne de droite --- */ .v4 .encart{background:#fff;border:1px solid var(--filet);border-radius:12px;box-shadow:0 1px 2px rgba(17,24,39,.05);padding:20px} .v4 .encart.bleu{background:var(--bleu-nuit);border-color:var(--bleu-nuit);color:#fff} .v4 .encart.bleu h3,.v4 .encart.bleu b{color:#fff} .v4 .encart.bleu p{color:#ccd2ec} .v4 .encart h3{font-size:17px;margin-bottom:8px} .v4 .encart p{font-size:14.5px;margin-bottom:14px} .v4 .encart .tarif{font-size:30px;font-weight:700;color:var(--encre);line-height:1;display:block;margin-bottom:4px} .v4 .encart.bleu .tarif{color:#fff} /* --- liste de liens de la colonne de droite --- */ .v4 .liens-liste{list-style:none;margin:0;padding:0} .v4 .liens-liste li{border-bottom:1px solid var(--filet)} .v4 .liens-liste li:last-child{border-bottom:0} .v4 .liens-liste a{display:block;padding:10px 0;color:var(--encre);text-decoration:none;font-size:14.8px;line-height:1.45} .v4 .liens-liste a:hover{color:var(--bleu)} /* --- tableau des sessions --- */ .v4 .sessions-tab{width:100%;border-collapse:separate;border-spacing:0;font-size:15px} .v4 .sessions-tab th{text-align:left;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--gris);font-weight:700;padding:0 14px 8px} .v4 .sessions-tab td{background:#fff;border-top:1px solid var(--filet);border-bottom:1px solid var(--filet);padding:14px} .v4 .sessions-tab tr td:first-child{border-left:1px solid var(--filet);border-radius:10px 0 0 10px} .v4 .sessions-tab tr td:last-child{border-right:1px solid var(--filet);border-radius:0 10px 10px 0;text-align:right;white-space:nowrap} .v4 .sessions-tab tr+tr td{padding-top:14px} .v4 .sessions-tab .lieu{font-weight:700;color:var(--encre)} .v4 .sessions-tab .adr{color:var(--gris);font-size:13.5px} .v4 .sessions-tab .date{color:var(--texte)} .v4 .sessions-tab .tarif{font-weight:700;color:var(--rouge)} .v4 .sessions-tab .bouton{display:inline-block;width:auto;padding:9px 18px;font-size:14.5px} .v4 .espace-lignes{height:10px} /* --- grille de liens (villes, departements, regions) --- */ .v4 .liens-grille{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:8px 18px} .v4 .liens-grille a{color:var(--encre);text-decoration:none;font-size:15px} .v4 .liens-grille a:hover{color:var(--bleu);text-decoration:underline} @media(max-width:980px){ .v4 .deux-col{grid-template-columns:1fr;gap:22px} .v4 .colonne-d{position:static} .v4 .liens-grille{grid-template-columns:repeat(2,1fr)} .v4 .tete h1{font-size:25px} .v4 .sessions-tab,.v4 .sessions-tab tbody,.v4 .sessions-tab tr,.v4 .sessions-tab td{display:block;width:100%} .v4 .sessions-tab thead{display:none} .v4 .sessions-tab tr{background:#fff;border:1px solid var(--filet);border-radius:12px;margin-bottom:12px;padding:4px 0} .v4 .sessions-tab td{border:0;padding:6px 14px} .v4 .sessions-tab tr td:first-child,.v4 .sessions-tab tr td:last-child{border:0;border-radius:0;text-align:left} .v4 .sessions-tab .bouton{width:100%;text-align:center;margin-top:6px} } /* --- les cartes « en deux temps » placees DANS une colonne : photo au-dessus --- Samy 08/10/2026 : a cote d'une colonne de droite, la colonne principale fait ~780 px ; une photo de 250 px en vis-a-vis ne laisse que ~130 px au texte. On empile. */ .v4 .deux-col .temps{flex-direction:column} .v4 .deux-col .temps .photo{flex:none;justify-content:center;text-align:center;padding:14px 0} .v4 .deux-col .temps .photo img{margin:0 auto} .v4 .deux-col .corps-temps{padding:16px 18px 18px} /* ========================================================================= Formulaire (contact) et tableau d'informations (mentions legales) ========================================================================= */ .v4 .formulaire{max-width:620px} .v4 .champ{margin-bottom:16px} .v4 .champ label{display:block;font-size:14px;font-weight:700;color:var(--encre);margin-bottom:6px} .v4 .champ input,.v4 .champ textarea,.v4 .champ select{ width:100%;padding:11px 12px;border:1px solid var(--bleu-clair);border-radius:8px; font:inherit;font-size:15.5px;color:var(--encre);background:#fff; } .v4 .champ textarea{resize:vertical;line-height:1.55} .v4 .champ input:focus,.v4 .champ textarea:focus,.v4 .champ select:focus{outline:2px solid var(--bleu);outline-offset:1px;border-color:var(--bleu)} .v4 .oblig{color:var(--rouge)} .v4 .note-champs{font-size:13.5px;color:var(--gris);margin:-4px 0 16px} .v4 .captcha{display:flex;gap:12px;align-items:center} .v4 .captcha-img{ font-family:ui-monospace,Menlo,Consolas,monospace;font-size:19px;letter-spacing:5px;font-weight:700; color:var(--encre);background:var(--voile);border:1px solid var(--bleu-clair);border-radius:8px; padding:10px 16px;user-select:none; } .v4 .infos{width:100%;border-collapse:collapse;margin:0 0 1.2em;font-size:16px} .v4 .infos th{ text-align:left;vertical-align:top;width:190px;padding:11px 16px 11px 0; color:var(--gris);font-weight:400;font-size:14.5px;border-bottom:1px solid var(--filet); } .v4 .infos td{padding:11px 0;color:var(--encre);border-bottom:1px solid var(--filet)} @media(max-width:620px){ .v4 .infos,.v4 .infos tbody,.v4 .infos tr,.v4 .infos th,.v4 .infos td{display:block;width:100%} .v4 .infos th{padding:10px 0 0;border:0} .v4 .infos td{padding:2px 0 10px} .v4 .captcha{flex-wrap:wrap} } /* --- compte de sessions au-dessus du tableau --- */ .v4 .compte{color:var(--gris);margin:0 0 14px;font-size:15px} .v4 .compte b{color:var(--encre)} .v4 .sessions-tab .cp{color:var(--gris);font-weight:400;font-size:13.5px} /* lignes serrees : avec 50 sessions, l'espace entre les lignes doit disparaitre */ .v4 .sessions-tab td{padding:11px 14px} .v4 .sessions-tab tbody tr:nth-child(even) td{background:var(--voile)} .v4 .sessions-tab .tarif{white-space:nowrap} .v4 .sessions-tab td:nth-child(3){white-space:nowrap;width:1%} .v4 .sessions-tab .lieu{display:inline-block} /* --- plan du site --- */ .v4 .plan-bloc{padding:24px 0;border-bottom:1px solid var(--filet)} .v4 .plan-bloc:last-child{border-bottom:0} .v4 .plan-bloc h2{font-size:21px;margin-bottom:14px} .v4 .plan-liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:7px 28px} .v4 .plan-liste a{color:var(--texte);text-decoration:none;font-size:15.5px;line-height:1.5;display:block;padding:3px 0} .v4 .plan-liste a:hover{color:var(--bleu);text-decoration:underline} .v4 .article h3{font-size:17px;margin-top:1.3em;color:var(--encre)} @media(max-width:860px){ .v4 .plan-liste{grid-template-columns:1fr} } /* ========================================================================= Tunnel d'inscription : barre d'etapes, recapitulatif, moyens de paiement ========================================================================= */ .v4 .etapes{list-style:none;display:flex;gap:8px;margin:18px 0 0;padding:0;flex-wrap:wrap} .v4 .etapes li{flex:1 1 150px;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:9px; background:rgba(255,255,255,.07);color:#aab2d8;font-size:14.5px} .v4 .etapes .num{flex:0 0 26px;height:26px;border-radius:50%;background:rgba(255,255,255,.14); display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13.5px} .v4 .etapes li.actif{background:#fff;color:var(--encre);font-weight:700} .v4 .etapes li.actif .num{background:var(--bleu);color:#fff} .v4 .etapes li.fait{color:#fff} .v4 .etapes li.fait .num{background:var(--vert);color:#fff} .v4 .etapes li.fait .num::after{content:"✓";font-size:13px} .v4 .etapes li.fait .num{font-size:0} .v4 .duo{display:grid;grid-template-columns:1fr 1fr;gap:0 18px} .v4 .aide{font-size:13px;color:var(--gris);margin:6px 0 0} .v4 .nav-etapes{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:24px} .v4 .nav-etapes .bouton-2{display:inline-block;padding:12px 22px;border-radius:var(--bouton-rayon); border:1px solid var(--bleu-clair);text-decoration:none;font-weight:700} .v4 .recap{border-color:var(--bleu-clair)} .v4 .recap-liste{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 14px;font-size:14.8px} .v4 .recap-liste dt{color:var(--gris)} .v4 .recap-liste dd{margin:0;color:var(--encre);font-weight:700} .v4 .recap-liste .adr{font-weight:400;color:var(--gris);font-size:13.5px} .v4 .recap-total{display:flex;justify-content:space-between;align-items:baseline; border-top:1px solid var(--filet);margin-top:16px;padding-top:14px} .v4 .recap-total b{font-size:28px;color:var(--encre)} .v4 .recap-note{font-size:13px;color:var(--gris);margin:4px 0 0} .v4 .rassur li{display:flex;gap:9px;align-items:center;padding:9px 0;font-size:14.5px;border-bottom:1px solid var(--filet)} .v4 .rassur li:last-child{border-bottom:0} .v4 .paiements{display:grid;gap:12px;margin-top:16px} .v4 .moyen{display:flex;gap:13px;align-items:flex-start;background:#fff;border:1px solid var(--filet); border-radius:var(--carte-rayon);padding:16px 18px;cursor:pointer} .v4 .moyen:hover{border-color:var(--bleu-clair)} .v4 .moyen input{margin-top:3px;width:18px;height:18px;accent-color:var(--bleu)} .v4 .moyen:has(input:checked){border-color:var(--bleu);box-shadow:0 0 0 2px rgba(36,47,168,.12)} .v4 .moyen-corps{display:block} .v4 .moyen-corps b{display:block;color:var(--encre);font-size:16.5px;margin-bottom:3px} .v4 .moyen-corps span{display:block;color:var(--texte);font-size:14.5px} .v4 .cgv-case{display:flex;gap:11px;align-items:flex-start;margin-top:20px;font-size:15px} .v4 .cgv-case input{margin-top:3px;width:18px;height:18px;accent-color:var(--bleu)} @media(max-width:860px){ .v4 .duo{grid-template-columns:1fr} .v4 .etapes li{flex:1 1 100%} } /* --- tunnel : formulaire pleine largeur, sans colonne laterale --- */ .v4 .formulaire.tunnel{max-width:820px} .v4 .trio-date{display:grid;grid-template-columns:90px 90px 110px;gap:10px} .v4 .resume th{width:210px} .v4 .resume td{font-size:16px} .v4 .nav-etapes .bouton-2{background:#fff} /* --- page commande : titres de bloc et recap du stage --- */ .v4 .bloc-titre{font-size:19px;color:var(--encre);margin:26px 0 12px;padding-bottom:8px;border-bottom:1px solid var(--filet)} .v4 .recap-stage{margin-bottom:6px} .v4 .recap-stage th{width:220px} .v4 .recap-stage .adr{color:var(--gris);font-size:14px} .v4 .tete + .wrap .bloc-titre:first-child{margin-top:22px} /* --- barre d'etapes posee sur fond CLAIR (page commande) --- */ .v4 .wrap > .etapes li{background:var(--voile);color:var(--gris);border:1px solid var(--filet)} .v4 .wrap > .etapes .num{background:var(--bleu-clair);color:var(--encre)} .v4 .wrap > .etapes li.actif{background:var(--bleu-pale);color:var(--encre);border-color:var(--bleu-clair)} .v4 .wrap > .etapes li.actif .num{background:var(--bleu);color:#fff} .v4 .wrap > .etapes li.fait{background:#fff;color:var(--texte)} .v4 .wrap > .etapes li.fait .num{background:var(--vert);color:#fff} /* placeholders : lisibles sans etre confondus avec une valeur saisie */ .v4 .formulaire input::placeholder{color:var(--gris);opacity:1} /* ========================================================================= PAGE COMMANDE — reprise fidele de la page servie, dans le style du site ========================================================================= */ /* tableau « Informations generales » : colonne de libelles coloree a gauche */ .v4 .tab-infos{width:100%;border-collapse:collapse;margin:0 0 10px;font-size:15.5px} .v4 .tab-infos th{ width:38%;background:var(--bleu);color:#fff;font-weight:700;text-align:right; padding:13px 18px;border-bottom:1px solid rgba(255,255,255,.18); } .v4 .tab-infos td{padding:13px 18px;text-align:center;color:var(--texte);border-bottom:1px solid var(--filet)} .v4 .tab-infos tr:nth-child(odd) td{background:var(--voile)} .v4 .tab-infos td b{color:var(--encre)} .v4 .tab-infos tr:first-child th{border-radius:8px 0 0 0} .v4 .tab-infos tr:last-child th{border-radius:0 0 0 8px;border-bottom:0} /* jauge d'etapes : pastilles sur une ligne */ .v4 .jauge{list-style:none;display:flex;margin:22px 0 6px;padding:0} .v4 .jauge li{flex:1;text-align:center;position:relative;color:var(--gris);font-size:13.5px} .v4 .jauge .t{display:block;color:var(--encre);font-size:15px;margin-bottom:10px} .v4 .jauge .pt{display:block;width:16px;height:16px;border-radius:50%;background:var(--bleu-clair);margin:0 auto 10px;position:relative;z-index:1} .v4 .jauge li::before{content:"";position:absolute;top:calc(1.5em + 7px);left:0;right:0;height:3px;background:var(--bleu-clair)} .v4 .jauge li:first-child::before{left:50%} .v4 .jauge li:last-child::before{right:50%} .v4 .jauge li.actif .pt{background:var(--rouge);box-shadow:0 0 0 4px rgba(230,33,23,.18)} .v4 .jauge li.actif::before{background:var(--rouge)} .v4 .jauge li.actif::before{right:50%} .v4 .jauge li.actif .l,.v4 .jauge li.actif .t{color:var(--encre);font-weight:700} /* etape deja franchie — classe « passee » et NON « fait » : .fait sert aux coches de reassurance de l'accueil (display:flex), elle casserait l'empilement de la jauge. */ .v4 .jauge li.passee{display:list-item} .v4 .jauge li.passee .pt{background:var(--rouge)} .v4 .jauge li.passee::before{background:var(--rouge)} .v4 .jauge .l{display:block;padding:0 6px;line-height:1.35} /* champs : pleine largeur, un par ligne, lisere rouge quand obligatoire */ .v4 .form-cmd{margin-top:8px} .v4 .champ-l{margin-bottom:12px} .v4 .champ-l input,.v4 .champ-l select{ width:100%;padding:12px 14px;border:1px solid var(--bleu-clair);border-radius:8px; font:inherit;font-size:15.5px;color:var(--encre);background:#fff; } .v4 .champ-l input::placeholder{color:var(--gris);opacity:1} .v4 .champ-l.oblig-l input,.v4 .champ-l.oblig-l select{border-left:4px solid var(--rouge)} .v4 .champ-l input:focus,.v4 .champ-l select:focus{outline:2px solid var(--bleu);outline-offset:1px} .v4 .trio{display:grid;grid-template-columns:repeat(3,1fr);gap:0 14px} .v4 .cgv-ligne{border-top:1px solid var(--filet);margin-top:18px;padding:16px 0} .v4 .cgv-ligne label{display:flex;gap:10px;align-items:flex-start;font-size:15px;cursor:pointer} .v4 .cgv-ligne input{margin-top:3px;width:17px;height:17px;accent-color:var(--bleu)} .v4 .cgv-ligne a{color:var(--rouge)} .v4 .cmd-bas{border-top:1px solid var(--filet);padding-top:18px;text-align:center} .v4 .cmd-bas .bouton{display:inline-block;width:auto;padding-left:30px;padding-right:30px} @media(max-width:700px){ .v4 .tab-infos th{width:42%;text-align:left;font-size:14.5px;padding:11px 12px} .v4 .tab-infos td{padding:11px 12px;text-align:left} .v4 .trio{grid-template-columns:1fr} .v4 .jauge .l{font-size:12px} } /* la barre rouge part du bord gauche jusqu'a la pastille de l'etape en cours */ .v4 .jauge li.actif:first-child::before{left:0} /* --- etape 3 : resume, moyens de paiement en images, tableau de commande --- */ .v4 .sous-titre{font-size:16px;font-weight:700;color:var(--encre);text-transform:uppercase;letter-spacing:.03em;margin:26px 0 12px} .v4 .date-cmd{color:var(--gris);font-size:14.5px;margin:-4px 0 18px} .v4 .moyens-img{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:6px} .v4 .moyens-img label{display:flex;align-items:center;gap:11px;border:1px solid var(--filet);border-radius:var(--carte-rayon); padding:12px 18px;background:#fff;cursor:pointer;min-height:76px} .v4 .moyens-img label:hover{border-color:var(--bleu-clair)} .v4 .moyens-img label:has(input:checked){border-color:var(--bleu);box-shadow:0 0 0 2px rgba(36,47,168,.12)} .v4 .moyens-img input{width:18px;height:18px;accent-color:var(--bleu)} .v4 .moyens-img img{display:block;height:50px;width:auto} .v4 .tab-cmd{width:100%;border-collapse:collapse;font-size:15.5px;margin-bottom:6px} .v4 .tab-cmd th{background:var(--bleu);color:#fff;font-weight:700;padding:11px 16px;text-align:center;font-size:14px} .v4 .tab-cmd th:first-child{text-align:left;border-radius:8px 0 0 0} .v4 .tab-cmd th:last-child{border-radius:0 8px 0 0} .v4 .tab-cmd td{padding:14px 16px;text-align:center;border-bottom:1px solid var(--filet);color:var(--texte)} .v4 .tab-cmd td.lib{text-align:left;color:var(--encre)} .v4 .tab-cmd tfoot td{background:var(--voile);font-weight:700;color:var(--encre);text-align:right} .v4 .tab-cmd tfoot td:last-child{text-align:center} .v4 .erreur-cmd{font-size:14px;color:var(--gris);margin:14px 0 0} @media(max-width:700px){ .v4 .tab-cmd th{font-size:12.5px;padding:9px 8px} .v4 .tab-cmd td{padding:11px 8px;font-size:14.5px} .v4 .moyens-img label{flex:1 1 100%} } /* ========================================================================== FICHE CENTRE — centre.html — ajoute le 08/10/2026 Tous les selecteurs sont NOUVEAUX (prefixes .ct-, plus .proche et .neuf) : aucune regle ecrite plus haut n'est redefinie, les 13 autres maquettes ne bougent pas d'un pixel. ========================================================================== */ /* le surlignage des propositions — reutilisable par les prochaines maquettes */ /* la couleur d'encre est FORCEE : sans elle, un .neuf pose sur le bandeau bleu nuit ou dans l'encart de reservation herite d'un texte clair -> jaune sur jaune. */ .v4 .neuf,.v4 .neuf b{background:#fff3b0;color:var(--encre);border-radius:3px;padding:1px 3px} .v4 .neuf{box-shadow:inset 0 -2px 0 #e8c547} .v4 .neuf b{box-shadow:none;padding:0} .v4 .ct-legende{ background:#fff3b0;border-left:4px solid #e8c547;border-radius:0 8px 8px 0; padding:12px 18px;margin:18px 0 0;font-size:14.5px;color:var(--encre); } /* l'encart de reservation de la colonne de droite */ .v4 .ct-resa{padding:0;overflow:hidden} .v4 .ct-resa .ct-bloc{padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.14)} .v4 .ct-resa .ct-bloc:last-child{border-bottom:0} .v4 .ct-resa h3{font-size:15px;text-transform:uppercase;letter-spacing:.04em;margin-bottom:7px} .v4 .ct-adr{font-size:15.5px;line-height:1.5} .v4 .ct-adr b{display:block;font-size:16.5px} .v4 .ct-lien-plan{font-size:13.5px;color:#aab4e0;text-decoration:underline} .v4 .ct-date{font-size:16.5px;font-weight:700;line-height:1.4} .v4 .ct-heures{font-size:14px;color:#ccd2ec;margin-top:3px} .v4 .ct-places{ display:inline-block;margin-top:9px;background:rgba(46,158,99,.18);color:#8fe3b4; border:1px solid rgba(46,158,99,.45);border-radius:20px;padding:3px 11px;font-size:13px;font-weight:700; } .v4 .ct-prix{display:block;font-size:31px;font-weight:700;line-height:1} .v4 .ct-prix span{font-size:14px;font-weight:400;color:#ccd2ec} .v4 .ct-choix label{display:block;font-size:13px;font-weight:700;margin-bottom:5px} .v4 .ct-choix select{ width:100%;padding:11px;border:1px solid var(--bleu-clair);border-radius:8px; font:inherit;font-size:14.5px;color:var(--encre);background:#fff; } .v4 .ct-tel{font-size:19px;font-weight:700;line-height:1.5} .v4 .ct-tel a{color:#fff;text-decoration:none} .v4 .ct-note{font-size:13px;color:#ccd2ec;margin-top:6px} /* « Votre formation a … » : la liste des faits */ .v4 .ct-faits{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:9px} .v4 .ct-faits li{ position:relative;padding-left:26px;font-size:15.5px;color:var(--texte); } .v4 .ct-faits li::before{ content:"";position:absolute;left:0;top:7px;width:14px;height:8px; border-left:2.5px solid var(--vert);border-bottom:2.5px solid var(--vert); transform:rotate(-45deg); } .v4 .ct-faits b{color:var(--encre)} /* les trois gages, sur une ligne */ .v4 .ct-gages{ display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center; background:var(--voile);border:1px solid var(--filet);border-radius:10px; padding:13px 18px;margin:16px 0 0;font-size:14px;color:var(--texte); } .v4 .ct-gages b{color:var(--encre)} /* les centres a proximite : une carte par centre, avec la distance */ .v4 .ct-proches{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:6px} .v4 .proche{ position:relative;border:1px solid var(--filet);border-radius:12px;padding:15px 16px; background:#fff;box-shadow:0 1px 2px rgba(17,24,39,.05); } .v4 .proche .km{ display:inline-block;background:var(--bleu-pale);color:var(--bleu); border-radius:20px;padding:2px 10px;font-size:12.5px;font-weight:700;margin-bottom:7px; } .v4 .proche .ville{display:block;font-weight:700;color:var(--encre);font-size:16.5px} .v4 .proche .ville .cp{color:var(--gris);font-size:13px;font-weight:400} .v4 .proche .adr{display:block;color:var(--gris);font-size:13.5px;margin:2px 0 7px} .v4 .proche .quand{display:block;font-size:14px;color:var(--texte)} .v4 .proche .bas{ display:flex;align-items:baseline;justify-content:space-between; margin-top:10px;padding-top:10px;border-top:1px solid var(--filet); } .v4 .proche .tarif{font-weight:700;color:var(--rouge);font-size:16px} .v4 .proche .voir{font-size:14px;color:var(--bleu);text-decoration:none;font-weight:700} .v4 .proche .voir:hover{text-decoration:underline} /* « Les etapes de votre inscription » */ .v4 .ct-etapes{list-style:none;margin:10px 0 0;padding:0;counter-reset:et;display:grid;gap:13px} .v4 .ct-etapes li{position:relative;padding-left:44px;counter-increment:et;font-size:15.5px;color:var(--texte)} .v4 .ct-etapes li::before{ content:counter(et);position:absolute;left:0;top:-1px; width:30px;height:30px;border-radius:50%;background:var(--bleu);color:#fff; font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center; } .v4 .ct-etapes b{color:var(--encre)} /* le rappel des textes de loi, variante de .loi avec une source citee */ .v4 .ct-loi{margin-top:14px} .v4 .ct-loi .src{display:block;font-size:13.5px;color:var(--gris);margin-top:7px;font-style:italic} @media (max-width:860px){ .v4 .ct-proches{grid-template-columns:1fr} } /* ------------------------------------------------------------------ L'accueil est servi a l'interieur du
ouvert par header_3.php. Sans ceci, les bandeaux pleine largeur (.hero, .tete, .final, .confiance) s'arreteraient au bord du container. Le container etant centre, calc(50% - 50vw) ramene exactement les bords de .v4 sur ceux de la fenetre. ------------------------------------------------------------------ */ .v4{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)} .v4 .wrap{max-width:1180px;margin:0 auto;padding:0 20px} /* calc(50% - 50vw) compte la barre de defilement dans 50vw : il reste quelques pixels de debordement horizontal sur mobile. C'est .v4 LUI-MEME qui deborde, donc overflow sur .v4 n'y peut rien : il faut le couper sur un ancetre. Cette regle n'est pas confinee, et c'est volontaire : la feuille n'est chargee que sur l'accueil ($index==1 dans header.php), donc elle ne peut toucher aucune autre page. */ html,body{overflow-x:hidden} /* le logo du site, en haut du bandeau : pastille blanche car il est dessine pour du fond clair, et taille native 210x67 (jamais agrandi) */ .v4 .hero-logo{margin:0 0 18px} .v4 .hero-logo img{background:#fff;border-radius:9px;padding:8px 12px;display:inline-block} /* ------------------------------------------------------------------ MENU DEROULANT — les articles de chaque rubrique, au survol. En CSS pur : l'en-tete du nouveau design n'utilise pas la nav Bootstrap, donc son javascript de dropdown ne s'applique pas ici. :focus-within ouvre aussi au clavier. ------------------------------------------------------------------ */ .v4 .menu .m-item{position:relative} .v4 .menu .m-item>a{display:inline-block;padding:6px 0} .v4 .menu .m-item.a-sous>a::after{content:" \25be";font-size:11px;color:var(--gris)} .v4 .sous-menu{ display:none;position:absolute;top:100%;left:-14px;z-index:60; min-width:265px;max-width:340px;max-height:62vh;overflow-y:auto; background:#fff;border:1px solid var(--filet);border-radius:10px; box-shadow:0 12px 32px rgba(17,24,39,.16); list-style:none;margin:0;padding:7px 0; } .v4 .menu .m-item:hover>.sous-menu, .v4 .menu .m-item:focus-within>.sous-menu{display:block} /* les deux dernieres rubriques s'ouvrent vers la gauche, sinon elles sortent de l'ecran */ .v4 .menu .m-item:nth-last-child(-n+2) .sous-menu{left:auto;right:-14px} .v4 .sous-menu li{margin:0} .v4 .sous-menu a{ display:block;padding:8px 16px;font-size:14px;line-height:1.35; color:var(--texte);text-decoration:none; } .v4 .sous-menu a:hover{background:var(--bleu-pale);color:var(--bleu)} @media(max-width:860px){ /* sur mobile le menu est deja deplie : les sous-menus suivent, en retrait */ .v4 .menu .m-item{width:100%;border-bottom:1px solid var(--filet)} .v4 .menu .m-item>a{display:block;padding:12px 2px;font-size:15.5px} .v4 .sous-menu{ display:block;position:static;max-height:none;min-width:0; border:0;border-radius:0;box-shadow:none;padding:0 0 10px 14px; } .v4 .sous-menu a{padding:7px 0;font-size:14.5px} } /* ========================================================================== PAGES ARTICLE (list.php) — 08/10/2026 ========================================================================== */ /* le fil d'Ariane du site est un
    porteur des microdonnees schema.org. On ne touche ni a sa structure ni a ses balises : seul l'habillage change. */ .v4 .ariane-ol{ list-style:none;margin:0;padding:14px 0 0;display:flex;flex-wrap:wrap; align-items:center;gap:4px 8px;font-size:13.5px;color:var(--gris);background:none; } .v4 .ariane-ol li{display:inline-flex;align-items:center;gap:8px;margin:0} .v4 .ariane-ol li+li::before{content:"\203a";color:var(--filet);font-size:15px} .v4 .ariane-ol a{color:var(--gris);text-decoration:none} .v4 .ariane-ol a:hover{color:var(--bleu);text-decoration:underline} .v4 .ariane-ol .ariane{color:inherit} .v4 .ariane-ol li:last-child .ariane{color:var(--encre);font-weight:600} /* un article sans « A lire egalement » occupe toute la largeur */ .v4 .deux-col.sans-colonne{grid-template-columns:minmax(0,1fr)} /* le corps de l'article : on habille ce que le redacteur a saisi dans le panel, sans rien changer au HTML stocke en base */ .v4 .article .content_list{font-size:16px;line-height:1.72;color:var(--texte)} .v4 .article .content_list h2{margin:30px 0 12px} .v4 .article .content_list h3{margin:22px 0 9px} .v4 .article .content_list p{margin:0 0 15px} .v4 .article .content_list ul,.v4 .article .content_list ol{margin:0 0 15px 22px} .v4 .article .content_list li{margin:0 0 7px} .v4 .article .content_list img{max-width:100%;height:auto;border-radius:9px} .v4 .article .content_list table{width:100%;border-collapse:collapse;margin:0 0 18px} .v4 .article .content_list td,.v4 .article .content_list th{ border:1px solid var(--filet);padding:9px 11px;text-align:left;vertical-align:top; } .v4 .article .content_list th{background:var(--voile);color:var(--encre)} .v4 .article .content_list a{color:var(--bleu)} /* la liste « A lire egalement », dans l'encart de la colonne */ .v4 .colonne-d .liens-liste{list-style:none;margin:0;padding:0} .v4 .colonne-d .liens-liste li{margin:0;border-bottom:1px solid var(--filet)} .v4 .colonne-d .liens-liste li:last-child{border-bottom:0} .v4 .colonne-d .liens-liste a{ display:block;padding:9px 0;font-size:14.5px;line-height:1.4; color:var(--encre);text-decoration:none; } .v4 .colonne-d .liens-liste a:hover{color:var(--bleu)} .v4 .colonne-d .encart .tarif{display:block;font-size:30px;font-weight:700;line-height:1;margin-bottom:6px} /* ========================================================================== UNIFORMISATION DES POLICES — 08/10/2026 Constat avant correction sur une page article : DEUX familles cohabitaient (system-ui pour le menu, le fil d'Ariane, la colonne et le pied ; Lato pour le titre, le texte et les encarts) et CINQ tailles dans le corps de l'article (16,5 / 16 / 18 / 20 / 23 px), venues des classes .sizeXX du site et de 20 attributs style= saisis dans le panel. On retient LATO : c'est la police du site, deja chargee par header.php (Google Fonts). Rien de nouveau n'est telecharge. ========================================================================== */ .v4,.v4 *{font-family:"Lato","Helvetica Neue",Helvetica,Arial,sans-serif} /* les icones gardent leur propre fonte, sinon elles deviennent des carres */ .v4 .fa,.v4 [class^="fa-"],.v4 [class*=" fa-"]{font-family:FontAwesome} /* --- une seule echelle de tailles dans le corps de l'article --- Les attributs style="font-size:..." et les classes .sizeXX du site sont neutralises A L'AFFICHAGE : le contenu en base n'est pas modifie. */ .v4 .article .content_list{font-size:16.5px;line-height:1.75} .v4 .article .content_list [style*="font-size"], .v4 .article .content_list .size12, .v4 .article .content_list .size14, .v4 .article .content_list .size16, .v4 .article .content_list .size20, .v4 .article .content_list .size26, .v4 .article .content_list font{font-size:inherit} .v4 .article .content_list h2, .v4 .article .content_list h2.size20, .v4 .article .content_list h2[style*="font-size"]{font-size:24px;line-height:1.3;font-weight:700;color:var(--encre)} .v4 .article .content_list h3, .v4 .article .content_list h3.size20, .v4 .article .content_list h3[style*="font-size"]{font-size:19px;line-height:1.35;font-weight:700;color:var(--encre)} .v4 .article .content_list h4{font-size:17px;font-weight:700;color:var(--encre)} .v4 .article h1{font-size:34px;line-height:1.2} /* le pied heritait d'un corps a 20 px */ .v4 .pied p,.v4 .pied li,.v4 .pied a{font-size:14.5px} .v4 .pied h3{font-size:15px} /* ========================================================================== LA ZONE DE LECTURE — fond et bordure (demande de Samy) ========================================================================== */ .v4.page-article{background:var(--voile)} .v4.page-article .deux-col{padding-top:22px;padding-bottom:34px} .v4 .article{ background:#fff;border:1px solid var(--filet);border-radius:14px; padding:30px 34px;box-shadow:0 1px 3px rgba(17,24,39,.05); } /* le sommaire ##SOMMAIRE## du site : meme traitement que les autres encadres */ .v4 .article .content_list .sommaire, .v4 .article .content_list div[style*="background-color:#eafaf8"]{ background:var(--bleu-pale)!important;border:1px solid var(--filet); border-radius:11px;padding:18px 22px!important;margin:26px 0!important; } .v4 .article .content_list div[style*="background-color:#eafaf8"] a{color:var(--bleu)} @media (max-width:860px){ .v4 .article{padding:22px 18px;border-radius:11px} } /* --- deux causes distinctes restaient apres la premiere passe --- 1) : un attribut style= en ligne bat TOUTE feuille, il faut !important pour le neutraliser ; 2) les
  1. du sommaire etaient a 20 px sans style en ligne : c'est une regle d'element du site qui gagnait, faute d'une taille posee de notre cote. */ .v4 .article .content_list [style*="font-size"]{font-size:inherit!important} .v4 .article .content_list li, .v4 .article .content_list p, .v4 .article .content_list span, .v4 .article .content_list div, .v4 .article .content_list td, .v4 .article .content_list th{font-size:inherit} /* le titre « Sommaire » etait en #ff3131, un rouge qui n'est pas celui de la charte */ .v4 .article .content_list [style*="color:#ff3131"], .v4 .article .content_list [style*="color: #ff3131"]{color:var(--encre)!important;font-weight:700} /* le fil d'Ariane porte la classe Bootstrap .breadcrumb, qui lui met un fond gris et un fond blanc sur chaque element : on neutralise, la structure reste intacte */ .v4 .ariane-ol,.v4 .ariane-ol li,.v4 .ariane-ol span{background:none!important;padding-left:0;padding-right:0} .v4 .ariane-ol{padding:16px 0 0} .v4 .ariane-ol li::after{content:none} /* ========================================================================== PAGES CATEGORIE (cat.php) — 08/10/2026 La page liste ses articles dans des blocs .cadre-rouge (classe du site) : titre en lien + extrait de 300 caracteres. On les habille en cartes. ========================================================================== */ .v4 .article .cadre-rouge{ background:#fff;border:1px solid var(--filet);border-left:4px solid var(--rouge); border-radius:10px;padding:17px 21px;margin:0 0 14px; box-shadow:0 1px 2px rgba(17,24,39,.04); } .v4 .article .cadre-rouge h3{margin:0 0 7px;font-size:18px;line-height:1.3} .v4 .article .cadre-rouge h3 a,.v4 .article .cadre-rouge a.color-texte{ color:var(--encre);text-decoration:none; } .v4 .article .cadre-rouge h3 a:hover{color:var(--bleu)} .v4 .article .cadre-rouge{font-size:15.5px;color:var(--texte);line-height:1.6} /* ========================================================================== LE TABLEAU DES SESSIONS — produit par affiche_liste6() Sert aux pages region, departement et ville. On garde EXACTEMENT les memes colonnes et les memes espacements qu'avant : seul le style change. ========================================================================== */ .v4 .article table.table-fill{ width:100%;border-collapse:collapse;margin:0 0 20px;font-size:14.5px; background:#fff;border:1px solid var(--filet);border-radius:11px;overflow:hidden; } .v4 .article table.table-fill td{ padding:11px 12px;border:0;border-bottom:1px solid var(--filet); vertical-align:middle;text-align:left; } .v4 .article table.table-fill tr:last-child td{border-bottom:0} .v4 .article table.table-fill tr:nth-child(even) td{background:var(--voile)} .v4 .article table.table-fill tr:hover td{background:var(--bleu-pale)} /* la ville */ .v4 .article table.table-fill td.lieu a, .v4 .article table.table-fill a.colblack{ color:var(--encre);text-decoration:none;font-weight:700;font-size:15.5px; } .v4 .article table.table-fill td.lieu a:hover{color:var(--bleu)} /* les dates et la disponibilite */ .v4 .article table.table-fill td.date{color:var(--texte);font-size:14px} .v4 .article table.table-fill .colgreen{color:var(--vert);font-style:normal;font-weight:700;font-size:12.5px} .v4 .article table.table-fill .colred{color:var(--rouge);font-style:normal;font-weight:700;font-size:12.5px} /* la vignette du type de stage */ .v4 .article table.table-fill img{max-height:36px;width:auto} /* le prix */ .v4 .article table.table-fill td span[content]{font-weight:700;color:var(--rouge);font-size:16px} /* le bouton « S'inscrire » : meme place, style de la charte */ .v4 .article table.table-fill a.btn, .v4 .article table.table-fill a.button-purple{ display:inline-block;background:var(--bouton-fond);color:#fff!important; border:0;border-radius:var(--bouton-rayon);padding:9px 18px; font-weight:700;font-size:14px;text-decoration:none;white-space:nowrap; box-shadow:var(--bouton-ombre); } .v4 .article table.table-fill a.btn:hover{background:var(--bouton-survol);color:#fff!important} /* le bandeau e-learning de la page region, dans la charte */ .v4 .article .cadre_pref2{ background:var(--voile);border:1px solid var(--filet);border-radius:12px; padding:16px 20px;margin:0 0 20px; } .v4 .article .cadre_pref2 .btn-primary{ display:inline-block;background:var(--bouton-fond);color:#fff!important;border:0; border-radius:var(--bouton-rayon);padding:11px 22px;font-weight:700;text-decoration:none; } .v4 .article .cadre_pref2 .btn-primary:hover{background:var(--bouton-survol)} @media (max-width:860px){ .v4 .article table.table-fill td{padding:9px 7px;font-size:13.5px} } /* --- correction : les DATES portent elles aussi un attribut content (Jeu 15 Octobre), donc le selecteur du prix les colorait en rouge. On les remet en texte courant. --- */ .v4 .article table.table-fill td.date span[content]{ color:var(--texte);font-weight:400;font-size:14px; } .v4 .article table.table-fill td.date b{font-weight:700} /* le bandeau e-learning : les colonnes Bootstrap flottaient et tronquaient le titre */ .v4 .article .cadre_pref2{display:flex;gap:20px;align-items:center;flex-wrap:wrap;text-align:left} .v4 .article .cadre_pref2>div{float:none!important;width:auto!important;padding:0;flex:1 1 260px} .v4 .article .cadre_pref2>div:first-child{flex:0 0 auto} .v4 .article .cadre_pref2 img{max-width:235px;height:auto;border-radius:9px;display:block} .v4 .article .cadre_pref2 .size20{font-size:19px;color:var(--encre);margin-bottom:6px} .v4 .article .cadre_pref2 .size20 b[style]{color:var(--rouge)!important;font-size:22px!important} /* le chapo en italique sous le H1 */ .v4 .article h2.size22{font-size:18px;font-weight:400;color:var(--gris);margin:0 0 18px} .v4 .article h2.size22 i{font-style:italic} /* --- fil d'Ariane : le DERNIER element (celui sans lien) etait decale vers le bas. Une regle du site met .ariane en display:block avec des marges : dans les autres elements le span est enferme dans un , qui absorbait l'effet, mais pas dans le dernier. Mesure : 50 px de haut contre 24 pour les autres. --- */ .v4 .ariane-ol .ariane{ display:inline;padding:0;margin:0;line-height:inherit;background:none; font-size:inherit;float:none; } .v4 .ariane-ol li,.v4 .ariane-ol li>a{min-height:0} /* ========================================================================== PAGES VILLE — les cartes de centres Chaque centre est un
    … Les colonnes Bootstrap flottent : les cartes se desalignaient des que leurs titres n'avaient pas la meme hauteur. On les passe en blocs reguliers. ========================================================================== */ .v4 .article > .col-md-4{ float:none;display:inline-block;vertical-align:top; width:calc(33.333% - 11px);padding:0;margin:0 7px 14px 0; } .v4 .article .panel{ border:1px solid var(--filet);border-radius:11px;overflow:hidden;background:#fff; box-shadow:0 1px 2px rgba(17,24,39,.05);margin:0;height:100%; } .v4 .article .panel-heading{ background:var(--bleu-nuit);color:#fff;padding:11px 14px; font-weight:700;font-size:14.5px;line-height:1.3;border:0; } .v4 .article .panel-body{ padding:12px 14px;font-size:14.5px;color:var(--texte); display:flex;align-items:center;gap:9px; } .v4 .article .panel-body img{width:22px;height:auto;flex:0 0 auto} .v4 .article .col-md-4 a{text-decoration:none;display:block} .v4 .article .col-md-4 a:hover .panel{border-color:var(--bleu-clair);box-shadow:0 4px 14px rgba(17,24,39,.09)} @media (max-width:860px){ .v4 .article > .col-md-4{width:100%;margin-right:0} } /* la rangee de cartes de centres (page ville) */ .v4 .article .centres-grille{ display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:18px 0 22px; } .v4 .article .centres-grille>.col-md-4{ width:auto;margin:0;display:block;float:none; } @media (max-width:860px){ .v4 .article .centres-grille{grid-template-columns:1fr} } /* ========================================================================== FICHE CENTRE (lieux_detail.php) — 08/10/2026 La page empile deux col-md-6 (presentation / session) a l'interieur de la carte de contenu. A 772 px de large, deux colonnes de 386 px ecrasaient le tableau de la session (un mot par ligne). On les met l'une sous l'autre. ========================================================================== */ .v4 .article .col-md-6{width:100%;float:none;padding:0;margin:0 0 18px} /* le bloc de la prochaine session */ .v4 .article .col-md-6 .cadre_pref, .v4 .article .cadre_pref{ background:#fff;border:1px solid var(--filet);border-radius:11px;padding:18px 20px; } .v4 .article table{width:100%;border-collapse:collapse} .v4 .article .cadre_pref table td{ padding:9px 12px;border-bottom:1px solid var(--filet);vertical-align:middle; white-space:normal;font-size:15px; } .v4 .article .cadre_pref table tr:last-child td{border-bottom:0} /* le titre « Prochaine session … » */ .v4 .article .cadre_pref .panel-heading, .v4 .article h3.panel-title{font-size:16px} /* la fiche centre a sa propre colonne : on la laisse respirer */ .v4 .article h2{font-size:22px;margin:0 0 12px} /* le bloc « Autres formations … » (fonction bloc_autres_formations du site) */ .v4 .article .ct-autres .cadre_pref2{background:none;border:0;padding:0;margin:0} .v4 .article .ct-autres h3{font-size:22px;margin:32px 0 12px;color:var(--encre)} .v4 .article .ct-autres h3 span{font-weight:700} .v4 .article .ct-autres ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px 18px} .v4 .article .ct-autres li{margin:0} .v4 .article .ct-autres a{color:var(--bleu);text-decoration:none;font-size:15px} .v4 .article .ct-autres a:hover{text-decoration:underline} @media (max-width:860px){ .v4 .article .ct-autres ul{grid-template-columns:1fr} } /* ========================================================================== FICHE CENTRE — RYTHME ET RESPIRATION (08/10/2026) Mesure avant : les H2 n'avaient que 6,6 px de marge haute et collaient au bloc precedent ; la carte avait 30 px de padding ; le tableau des dates occupait 879 px a lui seul. Rien n'etait hierarchise. ========================================================================== */ .v4.page-article .article{ padding:42px 46px;border-radius:16px;border-color:#eceff6; box-shadow:0 2px 16px rgba(17,24,39,.055); } /* le rythme vertical : un titre de section respire au-dessus */ .v4 .article h2{ font-size:25px;line-height:1.25;margin:48px 0 18px; letter-spacing:-.01em;color:var(--encre); } .v4 .article > h2:first-of-type, .v4 .article > .ct-autres h3{margin-top:0} .v4 .article h2+p{margin-top:0} /* la liste de faits */ .v4 .ct-faits{display:grid;gap:14px;margin:0 0 24px} .v4 .ct-faits li{font-size:16px;line-height:1.55} .v4 .ct-gages{margin:24px 0 0;padding:17px 21px;gap:12px 28px;border-radius:12px} /* le tableau des dates */ .v4 .article table.sessions-tab{margin-bottom:0;border-radius:13px;overflow:hidden;border:1px solid var(--filet)} .v4 .article table.sessions-tab td{padding:14px 14px} .v4 .article table.sessions-tab thead th{ padding:12px 14px;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase; color:var(--gris);background:var(--voile);border-bottom:1px solid var(--filet);font-weight:700; } .v4 .article .toutes{margin:18px 0 0;text-align:center} /* les centres a proximite */ .v4 .ct-proches{gap:16px;margin-top:4px} .v4 .proche{padding:18px 20px;border-radius:13px;border-color:#eceff6} .v4 .proche .ville{font-size:17px} .v4 .proche .bas{margin-top:13px;padding-top:13px} /* les etapes */ .v4 .ct-etapes{gap:17px;margin:18px 0 0} .v4 .ct-etapes li{font-size:16px;line-height:1.55;padding-left:48px} /* les encadres de loi */ .v4 .article .loi{padding:20px 24px;margin:18px 0 0;border-radius:0 12px 12px 0;font-size:15.5px;line-height:1.6} /* la colonne de reservation */ .v4 .colonne-d{gap:18px} .v4 .ct-resa .ct-bloc{padding:18px 22px} .v4 .colonne-d .encart{border-radius:14px;border-color:#eceff6;padding:22px} .v4 .ct-prix{font-size:34px} /* le bandeau de titre */ .v4 .tete{padding:34px 0 30px} .v4 .tete h1{font-size:33px;line-height:1.18;letter-spacing:-.015em} .v4 .tete .sous{margin-top:10px;font-size:16px} .v4 .tete .preuve{margin-top:26px;padding-top:22px} @media (max-width:860px){ .v4.page-article .article{padding:24px 20px} .v4 .article h2{font-size:22px;margin:36px 0 14px} } /* ========================================================================== LES LISTES DE MAILLAGE EN BAS DE PAGE — 08/10/2026 En grille a 4 colonnes, les noms longs (« Boulogne-Billancourt (92) », « Champigny-sur-Marne (94) ») cassaient sur deux lignes, le rythme devenait irregulier et la grille laissait des trous. Les liens, en noir, ne se voyaient pas comme des liens. -> pastilles : elles s'adaptent a la longueur, pas de trou, et on voit tout de suite que c'est cliquable. ========================================================================== */ .v4 .article .liens-grille, .v4 .article .ct-autres ul{ display:flex;flex-wrap:wrap;gap:9px; list-style:none;margin:0;padding:0; grid-template-columns:none; /* annule la grille heritee */ } .v4 .article .liens-grille li, .v4 .article .ct-autres li{margin:0;padding:0} .v4 .article .liens-grille a, .v4 .article .ct-autres a{ display:inline-block;padding:8px 15px;border-radius:999px; background:var(--voile);border:1px solid #e8ebf4; color:var(--encre);text-decoration:none; font-size:14.5px;line-height:1.25;white-space:nowrap; transition:background .12s, border-color .12s, color .12s; } .v4 .article .liens-grille a:hover, .v4 .article .ct-autres a:hover{ background:var(--bleu-pale);border-color:var(--bleu-clair);color:var(--bleu); } /* « Autres formations » : libelles plus longs, on les laisse respirer */ .v4 .article .ct-autres a{white-space:normal;font-weight:600} /* un titre de maillage est secondaire : plus discret que les titres de section */ .v4 .article h2:is(.maillage){font-size:19px} /* ========================================================================== LES GAGES, AVEC LEURS LOGOS (fiche centre) — 08/10/2026 Trois lignes de texte gris ne rassuraient personne. On montre les marques : Qualiopi, le cadenas du paiement securise, PayPal 4x — puis les moyens de paiement acceptes. Toutes les images viennent du site et sont REDUITES, jamais agrandies (natif : Qualiopi 398x127, cadenas 50x50, pp4f 352x143). ========================================================================== */ .v4 .ct-confiance{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:26px 0 0} .v4 .ct-confiance .gage{ display:flex;flex-direction:column;align-items:center;text-align:center;gap:11px; background:var(--voile);border:1px solid #e8ebf4;border-radius:13px;padding:18px 14px; } .v4 .ct-confiance .gage img{height:34px;width:auto;max-width:100%} .v4 .ct-confiance .gage span{font-size:14px;line-height:1.4;color:var(--texte)} .v4 .ct-confiance .gage b{color:var(--encre)} .v4 .ct-moyens{ display:flex;align-items:center;flex-wrap:wrap;gap:10px 15px; margin:14px 0 0;padding:13px 18px; border:1px solid #e8ebf4;border-radius:12px;background:#fff; } .v4 .ct-moyens .lib{ font-size:11.5px;color:var(--gris);font-weight:700; letter-spacing:.07em;text-transform:uppercase;margin-right:4px; } .v4 .ct-moyens img{height:25px;width:auto} @media (max-width:860px){ .v4 .ct-confiance{grid-template-columns:1fr} .v4 .ct-confiance .gage{flex-direction:row;text-align:left;gap:14px;padding:14px 16px} .v4 .ct-confiance .gage img{height:30px;flex:0 0 auto} } /* le bloc du selecteur de date est sur fond blanc a l'interieur de l'encart bleu : son libelle heritait du blanc de l'encart et devenait invisible */ .v4 .ct-resa .ct-bloc[style*="background:#fff"] h3, .v4 .ct-resa .ct-choix label{color:var(--encre)} .v4 .ct-resa .ct-choix{margin-top:2px} /* les logos de paiement fournis par Samy : meme cadre (192x128 / 120x80), donc meme hauteur rendue et un alignement regulier */ .v4 .ct-moyens img{height:30px;width:auto;display:block} .v4 .ct-moyens{gap:10px 10px;padding:12px 18px} /* ========================================================================== LES GAGES — alignement et fonds (08/10/2026, retour de Samy) Les logos Qualiopi et PayPal 4x portent un FOND BLANC dans l'image : sur le gris des cartes, ils faisaient des rectangles blancs qui tranchaient. Les cartes passent donc en blanc, et la zone du logo recoit une hauteur fixe pour que les trois logos soient cales sur la meme ligne malgre des ratios tres differents (Qualiopi 398x127, cadenas 50x50, pp4f 352x143). ========================================================================== */ .v4 .ct-confiance .gage{ background:#fff;border:1px solid #e8ebf4;border-radius:13px; padding:20px 16px 18px;gap:0;justify-content:flex-start; } .v4 .ct-confiance .gage img{ height:auto;max-height:38px;max-width:100%;width:auto; object-fit:contain;display:block;margin:0 auto; } /* la zone du logo : hauteur constante, logo centre dedans */ .v4 .ct-confiance .gage::before{content:none} .v4 .ct-confiance .gage > img{ margin-bottom:14px; } .v4 .ct-confiance .gage span{margin-top:auto} /* la ligne des moyens de paiement : meme fond blanc, logos cales */ .v4 .ct-moyens{background:#fff;align-items:center;gap:12px 16px;padding:14px 18px} .v4 .ct-moyens img{height:28px;width:auto;object-fit:contain} /* la boite qui aligne : meme hauteur pour les trois, logo centre dedans */ .v4 .ct-confiance .gage .logo{ display:flex;align-items:center;justify-content:center; height:46px;width:100%;margin-bottom:13px; } .v4 .ct-confiance .gage .logo img{max-height:40px;margin:0} .v4 .ct-confiance .gage > img{margin-bottom:0} /* les trois libelles tiennent desormais sur une ligne : hauteur egale */ .v4 .ct-confiance .gage span{font-size:14.5px;white-space:nowrap} /* ========================================================================== LA COLONNE DE RESERVATION — fin de la rupture blanche (08/10/2026) Le bloc du selecteur de date etait sur fond blanc au milieu de l'encart bleu nuit : il coupait la colonne en deux. Il reste sur le bleu ; seul le champ est blanc, comme un champ de formulaire doit l'etre. ========================================================================== */ .v4 .ct-resa .ct-action{background:transparent} .v4 .ct-resa .ct-action .ct-choix label{color:#fff;font-size:12px;letter-spacing:.04em;text-transform:uppercase} .v4 .ct-resa .ct-action .ct-choix select{ width:100%;background:#fff;color:var(--encre); border:1px solid rgba(255,255,255,.3);border-radius:9px;padding:11px 12px; } .v4 .ct-resa .ct-action .bouton{margin-top:12px} .v4 .ct-resa .ct-action .ct-note{color:#ccd2ec!important;text-align:center} /* ========================================================================== LA COLONNE DE RESERVATION — refaite le 08/10/2026 L'ancienne empilait cinq blocs separes par des traits, tous du meme poids : « vieillot, impersonnel ». Ici l'ordre suit la decision d'achat — le prix, l'action, puis les details — et les traits cedent la place a des fonds. ========================================================================== */ .v4 .resa{ background:#fff;border:1px solid #e8ebf4;border-radius:16px;overflow:hidden; box-shadow:0 2px 16px rgba(17,24,39,.06); } /* --- le haut : prix + action, sur le bleu de la marque --- */ .v4 .resa-haut{background:var(--bleu-nuit);color:#fff;padding:22px 22px 24px} .v4 .resa-eyebrow{ margin:0;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase; color:#9fa9d4;font-weight:700; } .v4 .resa-prix{margin:4px 0 0;display:flex;align-items:baseline;gap:7px} .v4 .resa-prix b{font-size:40px;line-height:1;font-weight:800;letter-spacing:-.02em} .v4 .resa-prix span{font-size:13px;color:#ccd2ec} .v4 .resa-4x{ margin:10px 0 0;display:flex;align-items:center;gap:8px; font-size:13.5px;color:#ccd2ec; } .v4 .resa-4x img{height:19px;width:auto;background:#fff;border-radius:4px;padding:2px 4px} .v4 .resa-choix{margin-top:18px} .v4 .resa-choix label{ display:block;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase; color:#9fa9d4;font-weight:700;margin-bottom:6px; } .v4 .resa-choix select{ width:100%;padding:12px 13px;border:0;border-radius:10px; background:#fff;color:var(--encre);font:inherit;font-size:14.5px; } .v4 .resa-cta{margin-top:12px;font-size:16.5px;padding:15px 16px;border-radius:11px} .v4 .resa-mini{ margin:12px 0 0;display:flex;align-items:center;justify-content:center;gap:7px; font-size:12.5px;color:#aab4e0;text-align:center; } .v4 .resa-mini svg{width:14px;height:14px;fill:currentColor;flex:0 0 auto} /* --- le bas : les details, un pictogramme par ligne --- */ .v4 .resa-infos{list-style:none;margin:0;padding:6px 6px 8px} .v4 .resa-infos li{ display:flex;gap:13px;align-items:flex-start; padding:15px 16px;margin:0;border-radius:12px; } .v4 .resa-infos li+li{margin-top:2px} .v4 .resa-infos li:hover{background:var(--voile)} .v4 .resa-infos svg{ width:19px;height:19px;flex:0 0 auto;fill:var(--bleu);margin-top:2px;opacity:.85; } .v4 .resa-infos div{display:flex;flex-direction:column;gap:3px;min-width:0} .v4 .resa-infos b{font-size:15.5px;color:var(--encre);line-height:1.3} .v4 .resa-infos b a{color:inherit;text-decoration:none} .v4 .resa-infos span{font-size:13.5px;color:var(--gris);line-height:1.4} .v4 .resa-infos a{color:var(--bleu);font-size:13.5px;text-decoration:none} .v4 .resa-infos a:hover{text-decoration:underline} .v4 .resa-infos .dispo{ display:inline-block;width:fit-content;margin-top:4px; background:rgba(46,158,99,.12);color:#1f7a4c;border:1px solid rgba(46,158,99,.3); border-radius:20px;padding:3px 10px;font-size:12px;font-weight:700; } .v4 .resa-infos .dispo.tendu{background:rgba(230,33,23,.1);color:#b3170f;border-color:rgba(230,33,23,.3)} .v4 .resa-infos .dispo.complet{background:var(--voile);color:var(--gris);border-color:var(--filet)} /* le theme du site met un border-bottom sur TOUT