/* * Cabinet Anam — surcouche maison * ================================ * * On écrit ici, jamais dans les CSS du thème (main.css, responsive.css, * shortcode.css). Raison : ces fichiers appartiennent au thème Invess. Si * l'éditeur publie une mise à jour, on la réapplique sans perdre notre travail — * à condition de ne l'avoir mise nulle part ailleurs. * * Chargé en dernier dans le , donc il gagne à spécificité égale : les * sélecteurs ci-dessous sont repris *mot pour mot* du thème, seule la valeur * change. C'est pourquoi il n'y a aucun !important dans ce fichier. * * SOMMAIRE * 1. Palette — tirée du logo * 2. Accessibilité — pourquoi deux bleus et pas un * 3. Neutralisation du vert du thème (#8cbc43 → notre bleu) * 4. Corrections de lisibilité * 5. En-tête — logo et nom * 6. Formulaires — étiquettes que le thème n'avait pas * 7. Pages légales * 8. Grille des services — fixe, icônes visibles * 9. Panneau publicitaire de l'éditeur du thème — retiré * 10. Débordement horizontal — le -500px en dur du thème * 11. Pages de service — tableaux, remarques, appel de fin * 12. Retours de formulaire — messages, piège à robots * 13. Capitalisation — convention anglaise, faute en français * 14. Parcours « Créer ma société » — vue plein écran, fil d'étapes */ /* ========================================================================== 1. PALETTE — relevée dans capture/cabinet-anam-logo.png ========================================================================== */ :root { /* Les deux couleurs du logo, mesurées sur les pixels opaques. */ --anam-bleu: #0070FC; /* la cible et la flèche — 13,6 % du logo */ --anam-gris: #707073; /* l'ombre portée — 3,2 % du logo */ /* Déclinaisons du bleu. Voir § 2 : le bleu du logo ne passe pas le seuil d'accessibilité pour du texte courant, il lui faut des variantes. */ --anam-bleu-fort: #005FD6; /* texte et aplats à texte blanc — 5,82:1 */ --anam-bleu-sombre: #004EB0; /* survols — 7,73:1 */ --anam-bleu-clair: #0086FF; /* sur fond sombre — 5,22:1 */ /* Neutres — repris du thème pour ne pas introduire de gris parasites. */ --anam-encre: #1b1b1b; --anam-ardoise: #202426; --anam-fond-gris: #f8f8f8; /* Bordure éclaircie : #e5e5e5 dessinait un cadre net autour de chaque bloc, et le site en compte beaucoup. Une bordure qu'on devine sépare aussi bien qu'une bordure qu'on voit, et elle ne découpe pas la page. */ --anam-bordure: #ececec; --anam-bordure-appuyee: #dcdcdc; /* en-têtes de tableau, séparateurs forts */ /* |----------------------------------------------------------------------- | Rayons |----------------------------------------------------------------------- | Le thème Invess arrondit à 3px — c'est-à-dire presque pas. Le résultat | a l'air anguleux à côté de ce que produisent les outils actuels, et le | cabinet l'a remarqué en comparant avec mylegal.ma. | | L'échelle ci-dessous est celle de mylegal, relevée dans sa feuille de | style (Tailwind : --radius 0.5rem, rounded-xl 12px, rounded-2xl 16px, | rounded-3xl 24px). Ce n'est pas une copie servile : c'est l'échelle | courante, et elle a l'avantage d'être déjà connue du cabinet. | | Quatre valeurs, pas davantage. Une échelle à huit crans ne se tient | pas : au troisième écran, on ne sait plus lequel employer. | | sm 8px pastilles, étiquettes, petits contrôles | md 12px champs, boutons, menus déroulants | lg 16px cartes, encadrés, tableaux | xl 24px grands blocs pleine largeur |----------------------------------------------------------------------- */ --anam-r-sm: 8px; --anam-r-md: 12px; --anam-r-lg: 16px; --anam-r-xl: 24px; --anam-r-pilule: 999px; /* | Une seule ombre pour tout le site. | | Le thème en compte 58 variantes, de densités et de couleurs | différentes. Empilées sur une même page, elles donnent cette impression | de relief brouillon qu'on cherche à supprimer. Celle-ci se devine sans | se voir : elle décolle la carte du fond, rien de plus. */ --anam-ombre: 0 1px 2px rgba(27, 27, 27, .04), 0 4px 16px rgba(27, 27, 27, .05); --anam-ombre-forte: 0 2px 4px rgba(27, 27, 27, .05), 0 12px 32px rgba(27, 27, 27, .08); } /* ========================================================================== 2. ACCESSIBILITÉ — pourquoi deux bleus Le bleu du logo (#0070FC) donne 4,45:1 sur blanc. Le seuil WCAG AA est de 4,5:1 pour du texte courant et 3:1 pour les éléments d'interface et le grand texte. Il manque donc trois centièmes — assez pour qu'un audit le relève, et surtout assez pour gêner une lecture longue. La règle appliquée dans tout ce fichier : surfaces, icônes, traits décoratifs, grands titres → --anam-bleu c'est la couleur de la marque, on ne la trahit pas là où elle se voit texte courant, liens dans un paragraphe, aplats portant du texte blanc → --anam-bleu-fort Le gris du logo (#707073) donne 4,94:1 sur blanc : il passe tel quel. ========================================================================== */ /* ========================================================================== 3. NEUTRALISATION DU VERT DU THÈME Le thème Invess est livré en vert #8cbc43 : 17 occurrences dans main.css, 8 dans shortcode.css, 2 dans responsive.css. Les sélecteurs qui suivent en sont la copie exacte. ========================================================================== */ /* -- 3.1 Sélection de texte ------------------------------------------------ */ *::-moz-selection, ::-moz-selection { background: var(--anam-bleu); } ::selection { background: var(--anam-bleu); } /* -- 3.2 Champs de formulaire au focus ------------------------------------- */ .form-control:focus, select:focus, textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="tel"]:focus, input[type="color"]:focus, .first-footer .newsletter-form input[type="email"]:focus { border: 1px solid var(--anam-bleu-fort); } /* -- 3.3 Citations --------------------------------------------------------- */ .blockquote_2 blockquote { border-left: 3px solid var(--anam-bleu); } .blockquote_1 blockquote { border-bottom: 3px solid var(--anam-bleu); } .ttm-blog-single blockquote { border-bottom: 3px solid var(--anam-bleu); } /* -- 3.4 Tout ce qui portait `color: #8cbc43` ------------------------------ */ .ttm-textcolor-skincolor, .ttm-textcolor-skincolor h1, .ttm-textcolor-skincolor h2, .ttm-textcolor-skincolor h3, .ttm-textcolor-skincolor h4, .ttm-textcolor-skincolor h5, .ttm-textcolor-skincolor h6, .ttm-textcolor-skincolor a, .ttm-textcolor-skincolor i, :not(.ttm-bgcolor-darkgrey) .ttm-textcolor-skincolor a, :not(.ttm-bgcolor-darkgrey) .ttm-textcolor-skincolor i, a.ttm-textcolor-skincolor, i.ttm-textcolor-skincolor, :not(.ttm-bgcolor-darkgrey) a.ttm-textcolor-skincolor, :not(.ttm-bgcolor-darkgrey) i.ttm-textcolor-skincolor, :not(.ttm-bgcolor-darkgrey) .ttm-textcolor-skincolor, .ttm-bgcolor-darkgrey .ttm-textcolor-skincolor h1, .ttm-bgcolor-darkgrey .ttm-textcolor-skincolor h2, .ttm-bgcolor-darkgrey .ttm-textcolor-skincolor h3, .ttm-bgcolor-darkgrey .ttm-textcolor-skincolor h4, .ttm-bgcolor-darkgrey .ttm-textcolor-skincolor h5, .ttm-bgcolor-darkgrey .ttm-textcolor-skincolor h6, .ttm-btn-color-skincolor, blockquote:before, .ttm-blog-single blockquote .qoute-text:before, .ttm-bgcolor-grey .ttm-btn-color-skincolor, .ttm-list-icon-color-skincolor li i, .ttm-icon_element-border.ttm-icon_element-color-skincolor, .ttm-icon_element-border.ttm-icon_element-color-grey, .ttm-icon_element-fill.ttm-icon_element-color-grey i, .ttm-btn-style-border.ttm-btn-color-skincolor, .ttm-icon_element-fill.ttm-icon_element-color-white, .ttm-icon_element-fill.ttm-icon_element-color-white i, .ttm-icon_element-color-skincolor, .ttm-icon_element-color-skincolor:not(.ttm-icon_element-fill) i, .top_bar .top_bar_contact_item .top_bar_icon i, .top_bar .top_bar_contact_item a, nav.main-menu ul.menu li > ul.mega-submenu li a:hover, nav.main-menu ul.menu li ul.mega-submenu li.active > a, nav.main-menu ul.menu li.active > a, nav.main-menu ul.menu li > a:hover, nav.main-menu, #site-header-menu .site-navigation ul.menu > li >a:hover, .ttm-header-style-03 nav.main-menu ul.menu li > ul.mega-submenu li a:hover, .ttm-header-style-03 nav.main-menu ul.menu li ul.mega-submenu li.active > a, .ttm-header-style-03 nav.main-menu ul.menu li.active > a, .ttm-header-style-03 nav.main-menu ul.menu li > a:hover, .ttm-header-style-03 .header_search i:hover, .ttm-header-style-02 nav.main-menu ul.menu li > ul.mega-submenu li a:hover, .ttm-header-style-02 nav.main-menu ul.menu li ul.mega-submenu li.active > a, .ttm-header-style-02 nav.main-menu ul.menu li.active > a, .ttm-header-style-02 nav.main-menu ul.menu li > a:hover, .ttm-header-style-02 .header_search i:hover, .ttm-header-style-04 nav.main-menu ul.menu li > ul.mega-submenu li a:hover, .ttm-header-style-04 nav.main-menu ul.menu li ul.mega-submenu li.active > a, .ttm-header-style-04 nav.main-menu ul.menu li.active > a, .ttm-header-style-04 nav.main-menu ul.menu li > a:hover, .ttm-header-style-04 .top_bar_contact_item a:hover, .ttm-header-style-04 .header_extra .header_btn a:hover, .blockquote_1 .qoute-text:before, .section-title h3, .section-title h2 span, .ttm-bgcolor-darkgrey .section-title h3, .widget ul#menu-footer-quick-links li a:before, .featured-imagebox-portfolio.style1 .featured-content .featured-title h3 a:hover, .breadcrumb-wrapper span, .widget ul.ttm-recent-post-list>li .post-date i, .widget .call_detail h3, h3 span, .ttm-fid-view-circle-progress .ttm-fid-number, .widget.widget-nav-menu ul li.active a, .widget.offer_widget h2, .widget.offer_widget h3, .featured-imagebox-post.style2 .featured-content .post-meta span i, .slick-active.slick-current .testimonials.ttm-testimonial-box-view-style2 .testimonial-content blockquote:before, .ttm-highlight-quote blockquote:before, .ttm-play-icon-btn.style4 .ttm-play-icon-btn-content .ttm-play-icon-description, .ttm-p_table-amount, .ttm-p_table-price, .featured-icon-box.style8 .featured-title h3 span, .ttm-vertical-text h4 span, .ttm-fid.ttm-fid-with-icon.style1 .ttm-fid-icon-wrapper i, .featured-imagebox-post .ttm-btn i, #site-header-menu .site-navigation ul.menu > li.active >a, .featured-imagebox-post.style1 .post-category span.category, .ttm-blog-classic .post-meta .ttm-meta-line i, .ttm-blog-single .post-meta .ttm-meta-line i, .pricing-plan.style1 ul.features-list li:before, .ttm-blogbox-footer-readmore .ttm-btn i, .ttm-tags-links-title i, .ttm-highlight-fid.style2 .ttm-fid-contents .ttm-fid-inner span, .ttm-list.ttm-list-style-icon.style2 li i, .widget.widget-download .download li i, .featured-imagebox-team.style1:hover a.ttm-btn, .bottom-footer-text .copyright span a, .featured-icon-box.style11 .featured-icon .ttm-icon i, .ttm-header-style-03 .top_bar_contact_item a:hover, .ttm-header-style-02 .top_bar_contact_item a:hover, .ttm-header-style-03 .header_search .search_btn i:hover, .ttm-header-style-02 .header_search .search_btn i:hover, .ttm-header-style-01 .header_search .search_btn i:hover, .ttm-blog-single .social-media-block .ttm-tags-links a:hover, .ttm-pf-single-detail-box .ttm-pf-detailbox-list li a:hover, .section-title .ttm-btn:hover, .featured-imagebox .category span, .featured-icon-box.style5 .featured-icon .ttm-icon i, .featured-icon-box.style5 .featured-content .ttm-btn:hover, .featured-icon-box.style5 .featured-content .ttm-btn:hover i, .ttm-tabs.ttm-tab-style-01 ul.tabs li:before, .inside.ttm-fid-without-icon.style1 h4 span, .ttm-post-prev-next-content a.ttm-btn, .featured-icon-box.style12 .featured-content .featured-desc a { color: var(--anam-bleu); } /* Sur fond sombre, le bleu du logo tombe à 4,21:1 : on l'éclaircit. */ .ttm-bgcolor-darkgrey .ttm-textcolor-skincolor h1, .ttm-bgcolor-darkgrey .ttm-textcolor-skincolor h2, .ttm-bgcolor-darkgrey .ttm-textcolor-skincolor h3, .ttm-bgcolor-darkgrey .ttm-textcolor-skincolor h4, .ttm-bgcolor-darkgrey .ttm-textcolor-skincolor h5, .ttm-bgcolor-darkgrey .ttm-textcolor-skincolor h6, .ttm-bgcolor-darkgrey .section-title h3, .ttm-bgcolor-darkgrey .ttm-btn-color-skincolor, .ttm-bgcolor-darkgrey .ttm-btn-color-skincolor i, .ttm-bgcolor-darkgrey .ttm-icon_element-color-skincolor i, .ttm-bgcolor-darkgrey a:hover, .ttm-bgcolor-darkgrey a:hover i, .ttm-textcolor-white a:hover, .ttm-bgcolor-darkgrey .section-title .title-desc p.ttm-play-icon-description { color: var(--anam-bleu-clair); } /* -- 3.5 Tout ce qui portait `background-color: #8cbc43` ------------------- */ .ttm-bgcolor-skincolor, .ttm-bgcolor-skincolor > .ttm-bg-layer, .ttm-bgcolor-skincolor > .ttm-bg-layer > .ttm-col-wrapper-bg-layer-inner, .ttm-bgcolor-skincolor > .ttm-bg-layer > .ttm-bg-layer-inner, .ttm-icon_element-fill.ttm-icon_element-color-skincolor, .ttm-btn.ttm-btn-style-border.ttm-btn-color-skincolor:not(.btn-inline):hover:after, .ttm-btn.ttm-btn-style-fill.ttm-btn-color-dark:not(.btn-inline):hover:after, .ttm-btn.ttm-btn-style-border.ttm-btn-color-skincolor:not(.btn-inline):hover:before, .ttm-btn.ttm-btn-style-fill.ttm-btn-color-dark:not(.btn-inline):hover:before, .ttm-btn.ttm-btn-style-fill.ttm-btn-color-white:hover:before, .ttm-btn.ttm-btn-style-fill.ttm-btn-color-white:hover:after, .ttm-btn.ttm-btn-style-border.ttm-btn-color-grey:hover:before, .ttm-btn.ttm-btn-style-border.ttm-btn-color-grey:hover:after, .ttm-bgcolor-darkgrey .ttm-btn.ttm-btn-style-fill.ttm-btn-color-white:not(.btn-inline):hover:after, .ttm-bgcolor-darkgrey .ttm-btn.ttm-btn-style-fill.ttm-btn-color-white:not(.btn-inline):hover:before, .ttm-bgcolor-grey .tooltip:after, .ttm-bgcolor-grey [data-tooltip]:after, .ttm-bgcolor-darkgrey .tooltip:after, .ttm-bgcolor-darkgrey [data-tooltip]:after, .ttm-textcolor-skincolor .tooltip:after, .ttm-textcolor-skincolor [data-tooltip]:after, .slick_slider.slick-dots-style1 .slick-dots li.slick-active button, .slick_slider.slick-dots-style2 .slick-dots li.slick-active button, .slick_slider.slick-arrows-style1 .slick-prev:hover, .slick_slider.slick-arrows-style1 .slick-next:hover, .slide .slide__content--headings > h3:before, .slide .slide__content--headings > h3:after, .banner_slider_wrapper .slider-social-links-wrapper li a:hover, .banner_slider_3 .slide .slide__content--headings .highlight_text::after, nav.main-menu ul.menu li ul.mega-submenu li a:before, nav.main-menu ul.menu > li > a:before, .top_bar_icon.ttm-highlight-right:after, .section-title .title-header h3:after, .section-title.style2 .title-header.text-right h3:after, .section-title.title-style-center_text .title-header h3:before, .second-footer .widget.widget_nav_menu li a:before, .slide .slide__content--headings a.ttm-btn:hover, .featured-icon-box.style2:hover .featured-icon .ttm-icon:before, .featured-imagebox-portfolio.style1:hover .featured-iconbox a, .ttm-play-icon-btn .ttm-play-icon-animation.ttm-play-icon-animation-skincolor:before, .ttm-play-icon-btn .ttm-play-icon-animation.ttm-play-icon-animation-skincolor:after, .progress-bar-color-bar_white.progress-bar, .progress-bar-color-bar_white.progress-bar:before, .ttm-progress-bar .progress-bar.progress-bar-color-bar_skincolor, .progress-bar-inner .progress-bar.progress-bar-color-bar_skincolor:before, .footer .widget .widget-title:before, .footer .widget .widget-title:after, .breadcrumb-wrapper span:first-child:after, .ttm-team-member-single-content .ttm-social-links-wrapper ul li a:hover, .widget.widget-nav-menu ul li a:before, .sidebar .widget-area .widget .widget-title:after, .ttm-blog-classic .ttm-box-post-date, .ttm-blog-single .ttm-box-post-date, .testimonials.style2 .testimonial-content:before, .ttm-blog-single blockquote:before, .ttm-social-share-wrapper ul li a:hover, .widget .tagcloud a:hover, .ttm-play-icon-btn.style3 .ttm-play-icon-animation:after, .ttm-play-icon-btn.style3 .ttm-play-icon-animation:before, .pagination-block .page-numbers:hover, .slick_slider.slick-arrows-style3 .slick-arrow:hover, .pagination-block .page-numbers.current, .testimonials.style1 .testimonial-avatar:before, #totop.top-visible, .ttm-tabs.ttm-tab-style-01 ul.tabs li.active a, .ttm-play-icon-btn.style4 .ttm-play-icon-animation:after, .ttm-play-icon-btn.style4 .ttm-play-icon-animation:before, .accordion .toggle.ttm-style-classic.active .toggle-title a, .accordion .toggle.ttm-style-classic.active .toggle-title a:after, .accordion .toggle.ttm-toggle_style_classic .toggle-title a.active, .featured-imagebox-team.style1 .media-block a.media-btn, #site-header-menu .site-navigation .menu li span.label-new, .header_search_content button.close-search, .featured-imagebox-post.style1:hover .ttm-box-view-overlay .ttm-icon, .featured-imagebox-team.style1 .media-block .social-icons li:hover a, .ttm-header-style-04 .header_extra .header_search, .ttm-bottom-view-overlay .highlight-line:before, .featured-icon-box.style11 .featured-icon .fea_num, .featured-icon-box.style13 .featured-icon .fea_num, .featured-imagebox-post.style1 .featured-content:before, .pricing-plan.style1.active .pricing-title, .widget-Categories ul li a:before { background-color: var(--anam-bleu); } /* Aplats qui portent du texte blanc : bleu plus dense, pour passer AA. */ .ttm-btn-style-fill.ttm-btn-color-skincolor, .pricing-plan.style1.active .pricing-title, .ttm-blog-classic .ttm-box-post-date, .ttm-blog-single .ttm-box-post-date, .accordion .toggle.ttm-style-classic.active .toggle-title a, .ttm-tabs.ttm-tab-style-01 ul.tabs li.active a, .pagination-block .page-numbers.current, .pagination-block .page-numbers:hover { background-color: var(--anam-bleu-fort); } /* -- 3.6 Bordures ---------------------------------------------------------- */ .ttm-btn-style-fill.ttm-btn-color-skincolor, .ttm_single_image-wrapper.border-style, .ttm-btn.ttm-btn-style-fill.ttm-btn-color-dark:hover, .ttm-btn.ttm-btn-style-fill.ttm-btn-color-white:hover, .ttm-bgcolor-darkgrey .ttm-btn.ttm-btn-style-fill.ttm-btn-color-white:not(.btn-inline):hover, .ttm-icon.ttm-icon_element-border.ttm-icon_element-color-skincolor, .banner_slider_wrapper .slider-social-links-wrapper li a:hover, .ttm-page-title-row-inner .row, .social-icons.circle li>a:hover, :not(.ttm-bgcolor-darkgrey) .ttm-textcolor-skincolor a, :not(.ttm-bgcolor-darkgrey) .ttm-textcolor-skincolor i, .featured-imagebox-procedure:hover .featured-thumbnail img, .widget .tagcloud a:hover { border-color: var(--anam-bleu); } .ttm-bgcolor-darkgrey .tooltip-top:before, .ttm-bgcolor-darkgrey .tooltip:before, .ttm-textcolor-skincolor .tooltip-top:before, .ttm-textcolor-skincolor .tooltip:before, .ttm-bgcolor-grey .tooltip-top:before, .ttm-bgcolor-grey .tooltip:before, .ttm-bgcolor-grey [data-tooltip]:before, .ttm-bgcolor-skincolor .bottom-angle, nav.main-menu, .header_search .header_search_content { border-top-color: var(--anam-bleu); } .featured-icon-box.style2 .featured-desc:after, .ttm-tabs.ttm-tab-style-01 ul.tabs li:before, .featured-icon-box.style2:hover .featured-desc:after, .ttm-blog-single blockquote, .header_search .header_search_content:before, .header_btn:before, .ttm-bgcolor-darkgrey .tooltip-bottom:before, .ttm-header-style-04 .header_search .header_search_content:before { border-bottom-color: var(--anam-bleu); } #site-header-menu .site-navigation .menu li span.label-new { border-right-color: var(--anam-bleu); } .header_search .header_search_content, .ttm-header-style-04 .header_search .header_search_content { border-top: 3px solid var(--anam-bleu); } .featured-icon-box.style6:after { border-right: 14px solid var(--anam-bleu); } /* ========================================================================== 4. CORRECTIONS DE LISIBILITÉ Le thème colore `a:hover` en couleur d'accent, y compris au milieu d'un paragraphe. C'est là que le seuil AA compte vraiment : on y met le bleu dense, pas celui du logo. ========================================================================== */ a:hover { color: var(--anam-bleu-fort); } .ttm-btn.ttm-btn-style-fill.ttm-btn-color-skincolor:hover { background-color: var(--anam-bleu-sombre); border-color: var(--anam-bleu-sombre); } /* Le gris du logo, pour les mentions secondaires (4,94:1 sur blanc). */ .ttm-textcolor-grey, .top_bar .top_bar_contact_item .top_bar_text { color: var(--anam-gris); } /* ========================================================================== 5. EN-TÊTE — logo et nom Le logo fourni est un symbole seul : il ne porte pas le nom du cabinet. On l'accompagne donc du nom en texte, jusqu'à réception d'un logo complet (A5.1ter). L'en-tête de ce thème se superpose à un bandeau sombre, d'où le blanc. ========================================================================== */ .site-branding .home-link { gap: 12px; text-decoration: none; } .site-branding #logo-img { width: 52px; height: 52px; flex: 0 0 auto; } .footer-logo { gap: 12px; margin-bottom: 18px; } .footer-logo #logo-img-1 { width: 48px; height: 48px; flex: 0 0 auto; } .footer-logo .anam-marque { font-size: 23px; } .anam-marque { font-family: 'Rajdhani', sans-serif; font-size: 26px; font-weight: 700; letter-spacing: .5px; line-height: 1; color: #fff; white-space: nowrap; } /* Barre de contact : un peu d'air entre l'icône et le texte. */ .top_bar .top_bar_contact_item { white-space: nowrap; } @media (max-width: 991px) { .anam-marque { font-size: 21px; } .site-branding #logo-img { width: 42px; height: 42px; } } /* ========================================================================== 6. FORMULAIRES Le gabarit du thème n'a que des `placeholder`, sans étiquette. Un champ sans n'est pas annoncé aux lecteurs d'écran, et le placeholder disparaît dès la première frappe : l'utilisateur ne sait plus ce qu'il remplit. On pose donc de vraies étiquettes, et on les rend visibles. ========================================================================== */ .anam-form label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; color: var(--anam-encre); } /* La case de consentement garde son étiquette sur la même ligne. */ .anam-form .cookies label { display: inline; font-weight: 400; font-size: 13px; line-height: 1.5; } .anam-form .anam-facultatif { font-weight: 400; color: var(--anam-gris); } /* Le construit sa hauteur à partir de la hauteur de ligne héritée, un

est exclu — il doit pouvoir grandir.
*/
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
select {
    height: 55px;
    padding: 0 16px;
    line-height: normal;
}

/* Le remplissage vertical d'un textarea reste nécessaire : c'est lui qui
   éloigne la première ligne du bord. */
textarea { padding: 14px 16px; }

/* La flèche native du select est collée au bord droit par le navigateur :
   on lui laisse la place que le nouveau rayon réclame. */
select { padding-right: 38px; }

/* Les cases à cocher et boutons radio du thème restent carrés : on les
   arrondit légèrement et on leur donne la couleur de la marque. */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--anam-bleu-fort);
    width: 17px;
    height: 17px;
}

input[type="checkbox"] { border-radius: 4px; }

/* -- 15.2 Boutons ---------------------------------------------------------- */

.ttm-btn.ttm-btn-shape-rounded { border-radius: var(--anam-r-md); }
.ttm-btn.ttm-btn-shape-round   { border-radius: var(--anam-r-pilule); }

button,
input[type="submit"],
input[type="button"],
.anam-btn-suivant,
.anam-carte-bouton {
    border-radius: var(--anam-r-md);
}

/* Les icônes rondes du thème gardent leur cercle — c'est leur forme, pas un
   angle qu'on aurait oublié d'arrondir. */
.ttm-icon_element-style-round,
.ttm-icon_element-style-round i { border-radius: 50%; }

/* Les carrés d'icône, en revanche, deviennent des carrés arrondis. */
.ttm-icon_element-style-square { border-radius: var(--anam-r-md); }

/* -- 15.3 Cartes, encadrés et vignettes ------------------------------------ */

/*
   Tout ce qui forme un bloc : même rayon, même ombre, aucune bordure quand
   l'ombre suffit. C'est ce qui donne l'impression d'un site dessiné d'un
   seul tenant plutôt que d'un assemblage de gabarits.
*/
.featured-imagebox,
.featured-icon-box.box-shadow,
.ttm-fid,
.widget,
.anam-bloc-form,
.blockquote_2 blockquote,
.ttm-team-member-single-list,
.anam-carte-gerant {
    border-radius: var(--anam-r-lg);
}

/* La vignette d'une carte doit épouser les angles de la carte, sinon on voit
   les coins de l'image dépasser du cadre arrondi. */
.featured-imagebox,
.featured-thumbnail,
.ttm_fatured_image-wrapper,
.anam-pourquoi-visuel,
.anam-portrait-absent {
    overflow: hidden;
}

.featured-thumbnail img,
.ttm_fatured_image-wrapper img,
.ttm-featured-wrapper img { border-radius: inherit; }

.ttm_fatured_image-wrapper,
.anam-pourquoi-visuel { border-radius: var(--anam-r-lg); }

/* Une bordure OU une ombre. Le thème mettait les deux sur les mêmes blocs. */
.featured-icon-box.box-shadow,
.box-shadow {
    box-shadow: var(--anam-ombre);
    border: none;
}

/*
   La carte de service du thème n'est pas un bloc mais un montage : la
   vignette est encartée de 20px, et le texte remonte par-dessus elle de
   50px avec sa propre ombre. L'enveloppe extérieure ne sert qu'au
   positionnement — lui donner une ombre et un rayon dessinerait un second
   cadre autour du premier.

On arrondit donc les deux pièces séparément : la vignette sur ses quatre
   angles puisqu'elle flotte, et le bloc de texte sur les siens.
*/
.featured-imagebox-sevices.style1 {
    box-shadow: none;
    border: none;
    border-radius: 0;
}

.featured-imagebox-sevices.style1 .featured-thumbnail {
    border-radius: var(--anam-r-lg);
    overflow: hidden;
}

.featured-imagebox-sevices.style1 .featured-content {
    border-radius: var(--anam-r-lg);
    box-shadow: var(--anam-ombre);
    transition: box-shadow .2s ease;
}

.featured-imagebox-sevices.style1:hover .featured-content { box-shadow: var(--anam-ombre-forte); }

/* Le pictogramme est collé au coin bas-gauche de la vignette par le thème.
   Une fois la vignette arrondie, l'arrondi lui coupait un angle : il avait
   l'air d'avoir été rogné. On le décolle du coin et on l'arrondit lui aussi,
   ce qui le fait lire comme un élément posé plutôt que comme un accident. */
.featured-imagebox-sevices.style1 .ttm-media-link {
    bottom: 14px;
    left: 14px;
}

.featured-imagebox-sevices.style1 .ttm-media-link a { border-radius: var(--anam-r-md); }

/* -- 15.4 Nos propres composants ------------------------------------------- */

.anam-carte-tarif,
.anam-etape-mission,
.anam-erreur,
.anam-etape,
.anam-note,
.anam-appel-parcours,
.anam-message,
.anam-cta-service,
.anam-encadre-cta,
.anam-recap-conseil,
.anam-recap-envoye,
.anam-carte-choix {
    border-radius: var(--anam-r-lg);
}

/*
   Bordure OU ombre, selon le fond.

Un bloc blanc posé sur du gris se détache déjà par sa couleur : lui
   ajouter une bordure le cerne inutilement, et c'est ce cernage qui donnait
   au site son air de planche-contact. Une ombre à peine perceptible suffit.

Sur fond blanc, l'inverse : l'ombre ne se verrait pas, la bordure reste.
*/
.anam-etape,
.anam-erreur,
.anam-etape-mission,
.anam-carte-tarif,
.anam-fiche-gerant .ttm-team-member-single-list {
    border: none;
    box-shadow: var(--anam-ombre);
}

/* La formule mise en avant garde son cadre bleu : c'est lui qui la
   distingue, pas une ombre plus marquée. */
.anam-carte-tarif-avant {
    border: 2px solid var(--anam-bleu-fort);
    box-shadow: var(--anam-ombre-forte);
}

/* Le portrait et la carte d'identité du gérant forment un seul bloc : le
   trait qui les séparait n'a plus lieu d'être une fois l'ombre posée. */
.anam-fiche-gerant .featured-thumbnail.anam-portrait-absent {
    border: none;
    border-radius: var(--anam-r-lg) var(--anam-r-lg) 0 0;
}

.anam-fiche-gerant .ttm-team-member-single-list {
    border-radius: 0 0 var(--anam-r-lg) var(--anam-r-lg);
}

/* Les blocs pleine largeur prennent le grand rayon : à cette échelle, 16px
   ne se voient plus. */
.anam-carte,
.anam-tableau { border-radius: var(--anam-r-xl); overflow: hidden; }

.anam-tableau { border: 1px solid var(--anam-bordure); }

/* Le tableau perd son quadrillage : seules les lignes horizontales restent,
   et l'en-tête bleu n'a plus besoin d'être séparé du reste par un trait. */
.anam-tableau table { border-collapse: collapse; }
.anam-tableau th,
.anam-tableau td { border-bottom: 1px solid var(--anam-bordure); }
.anam-tableau tbody tr:last-child td { border-bottom: none; }

.anam-etape-boutons,
.anam-recap-bloc,
.anam-recap-envoi { border-color: var(--anam-bordure); }

/* Les petites étiquettes deviennent des pastilles. */
.anam-tarif-etiquette,
.anam-fil li a,
.anam-fil li > span { border-radius: var(--anam-r-pilule); }

/* Les pastilles numérotées du parcours et du récapitulatif restent rondes. */
.anam-fil-num,
.anam-recap-pieces li::before,
.anam-erreur-liens li::before,
.anam-liens-colonne li::before,
.anam-liste-legale li::before,
.anam-tarif-liste li::before { border-radius: 50%; }

/* -- 15.5 Accordéons et menus ---------------------------------------------- */

.accordion .toggle,
.accordion .toggle.ttm-style-classic .toggle-title a,
nav.main-menu ul.menu li ul.mega-submenu {
    border-radius: var(--anam-r-md);
}

/* Le sous-menu déroulant : un seul rayon, une seule ombre, pas de bordure.

SURTOUT PAS `overflow: hidden`. Le menu a trois niveaux — « Création de
   société » et « Juridique des sociétés » ouvrent chacun une liste qui sort
   LATÉRALEMENT de son parent. Masquer le débordement du deuxième niveau
   rognait donc entièrement le troisième : les huit formes juridiques et les
   quatre actes devenaient inatteignables au menu.

Pour arrondir sans couper, ce sont les premier et dernier éléments qui
   portent le rayon : leur fond de survol est le seul à pouvoir dépasser de
   l'angle arrondi du panneau. */
nav.main-menu ul.menu li ul.mega-submenu {
    box-shadow: var(--anam-ombre-forte);
    border: none;
}

nav.main-menu ul.menu li ul.mega-submenu > li:first-child > a {
    border-radius: var(--anam-r-md) var(--anam-r-md) 0 0;
}

nav.main-menu ul.menu li ul.mega-submenu > li:last-child > a {
    border-radius: 0 0 var(--anam-r-md) var(--anam-r-md);
}

/* -- 15.5bis Les images de fond en colonne --------------------------------- */

/*
   Le thème pose ses grandes images de section en fond de colonne
   (`ttm-col-bgimage-yes`) plutôt qu'en <img>. Elles restaient donc à angles
   vifs au milieu d'une page devenue arrondie, et c'est le genre de détail
   qui fait tout de suite « assemblé ».
*/
.ttm-col-bgimage-yes,
.ttm-col-bgimage-yes .ttm-col-wrapper-bg-layer,
.ttm-equal-height-image {
    border-radius: var(--anam-r-lg);
    overflow: hidden;
}

/* -- 15.5ter Le pastillage sombre du bandeau bleu -------------------------- */

/*
   Les quatre encadrés du haut d'accueil portent une flèche dans un disque
   NOIR (#111), posée sur le bandeau bleu de la marque. Trois couleurs pour
   un lien secondaire, dont une qui n'appartient pas à la palette.

Le disque passe au gris très clair, la flèche au bleu : le lien reste
   repérable et cesse de percer la page.
*/
/* La couleur est posée sur le <i> autant que sur le <a> : le thème colore la
   flèche elle-même, et changer seulement le fond la laissait blanche sur
   gris clair, donc invisible. */
.featured-icon-box.style9 .bottom_icon,
.featured-icon-box.style9 .bottom_icon i {
    color: var(--anam-bleu-fort);
}

.featured-icon-box.style9 .bottom_icon {
    background-color: #fff;
    border: 1px solid var(--anam-bordure-appuyee);
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.featured-icon-box.style9:hover .bottom_icon,
.featured-icon-box.style9:hover .bottom_icon i {
    color: #fff;
}

.featured-icon-box.style9:hover .bottom_icon {
    background-color: var(--anam-bleu-fort);
    border-color: var(--anam-bleu-fort);
}

/* -- 15.6 De l'air ---------------------------------------------------------- */

/*
   L'épuration passe autant par l'espace que par le trait. Les blocs du thème
   sont serrés : leur contenu touche presque le cadre, ce qui donne cette
   impression de page dense même quand elle ne dit pas grand-chose.
*/

.widget { padding: 28px 26px; }
.widget .widget-title { margin-bottom: 16px; }

.anam-cta-service,
.anam-encadre-cta { padding: 30px 32px; }

.anam-note,
.anam-appel-parcours { padding: 22px 26px; }

/* La mesure de ligne : au-delà d'une soixantaine de signes, l'œil perd la
   ligne suivante en revenant à la marge. Les colonnes larges du thème
   dépassaient les 110. */
.anam-service p,
.anam-service li,
.anam-texte-legal p { max-width: 68ch; }

/* Les intitulés de section en capitales : le thème les espace de 2px, ce qui
   les fait ressembler à un tampon. 0,08em suffit à les distinguer. */
.section-title .title-header h3 { letter-spacing: .08em; }

/* -- 15.7 Ce qui reste anguleux, et pourquoi -------------------------------- */

/*
   · Le bandeau de titre de page (.ttm-page-title-row) et le pied de page
     restent à angles vifs : ce sont des bandes pleine largeur, et arrondir
     un bloc qui touche les deux bords de l'écran ne se voit pas — ça ne
     fait que creuser quatre encoches blanches aux coins.

· Les images de fond en pleine largeur, pour la même raison.

· Le bandeau d'accueil : idem.
*/

/* ==========================================================================
   16. ANIMATIONS À L'APPARITION

Le cabinet veut le rendu de modiom-tech : chaque cadre, chaque titre, chaque
   bloc arrive en fondu quand on descend dans la page.

MÊME RENDU, AUTRE MÉCANIQUE — et c'est un choix, pas un raccourci.

modiom-tech emploie WOW.js avec animate.css complet : 87 Ko de CSS pour
   soixante-dix-sept animations dont cinq servent, plus GSAP, ScrollTrigger et
   SplitText, soit 113 Ko de JavaScript supplémentaires. Reprendre cet
   attelage ici annulerait l'étape M, où l'on vient de ramener le JavaScript de
   336 à 256 Ko et animate.css de 68 Ko à 2.

Ce qui suit obtient le même résultat avec l'observateur d'intersection du
   navigateur — une cinquantaine de lignes dans cabinet-anam.js, aucune
   bibliothèque — et trois avantages que WOW.js n'a pas :

· il respecte `prefers-reduced-motion`, que WOW.js ignore ;
     · il n'anime que `opacity` et `transform`, donc sans recalcul de mise en
       page : la stabilité visuelle que mesure Google n'en souffre pas ;
     · il cesse d'observer un élément une fois révélé.

── POURQUOI LES CIBLES SONT DÉSIGNÉES EN CSS, ET NON PAR LE JAVASCRIPT ──

Une première version faisait poser une classe `.anam-anim` par le script.
   Résultat, visible à la capture : le contenu s'affichait, PUIS disparaissait
   le temps que le script s'exécute, PUIS revenait en fondu. Un clignotement à
   l'ouverture de chaque page.

La cause est d'ordre : un script différé s'exécute après le premier rendu.
   modiom-tech n'a pas ce défaut parce que ses classes `wow` sont écrites dans
   le balisage, donc présentes dès le premier pixel — au prix d'annoter chaque
   bloc de chaque vue à la main.

Ici, la liste des cibles est écrite une fois, en CSS. Elle vaut pour les
   trente-cinq pages et pour celles qu'on ajoutera, sans rien annoter, et elle
   s'applique dès le premier rendu.

── LE FILET DE SÉCURITÉ ──

Rien n'est masqué tant que `anam-anim-prete` n'est pas sur <html>. Cette
   classe est posée par `anim-prete.js`, chargé en tête et non différé, qui ne
   la pose QUE si le navigateur sait observer les intersections et que le
   visiteur n'a pas demandé à limiter les animations.

Sans JavaScript, avec un vieux navigateur, ou si le script échoue : la
   classe n'existe pas, rien n'est masqué, le site s'affiche normalement. Et
   `cabinet-anam.js` la retire de lui-même si l'observateur ne révèle rien au
   bout de quatre secondes.
   ========================================================================== */

/* -- 16.1 Les cibles -------------------------------------------------------- */

/*
   Ce que le cabinet appelle « chaque cadre, chaque titre et autre ».
   L'ordre suit celui de la page : titres, cadres, encadrés d'appel, tableaux
   et listes, visuels, texte d'introduction.
*/
.anam-anim-prete .section-title,
.anam-anim-prete .anam-titre-bloc,
.anam-anim-prete .anam-faq-rubrique,
.anam-anim-prete .ttm-team-member-single-title,

.anam-anim-prete .featured-imagebox,
.anam-anim-prete .featured-icon-box,
.anam-anim-prete .anam-carte-tarif,
.anam-anim-prete .anam-etape-mission,
.anam-anim-prete .anam-erreur,
.anam-anim-prete .anam-fiche-gerant,
.anam-anim-prete .widget,
.anam-anim-prete .blockquote_2,

.anam-anim-prete .anam-cta-service,
.anam-anim-prete .anam-encadre-cta,
.anam-anim-prete .anam-note,
.anam-anim-prete .anam-appel-parcours,
.anam-anim-prete .anam-bloc-form,

.anam-anim-prete .anam-tableau,
.anam-anim-prete .accordion .toggle,
.anam-anim-prete .anam-liste-pourquoi li,
.anam-anim-prete .anam-erreur-liens li,
.anam-anim-prete .anam-liens-colonne li,

.anam-anim-prete .ttm_fatured_image-wrapper,
.anam-anim-prete .anam-pourquoi-visuel,
.anam-anim-prete .ttm-col-bgimage-yes,

.anam-anim-prete .anam-chapo,
.anam-anim-prete .anam-chapo-services,
.anam-anim-prete .anam-sous-titre-bloc {
    opacity: 0;
    transform: translateY(30px);

/*
       UNE SECONDE, et c'est la valeur de modiom-tech.

Le premier réglage était à 0,7 s avec un décalage de 0,09 s entre
       éléments plafonné à quatre — la séquence entière durait donc 0,36 s et
       le cabinet a trouvé, à juste titre, que « ça s'affiche trop vite ».

modiom-tech anime en 1 s (la valeur par défaut de WOW.js, poussée à
       1,5 s sur seize blocs) avec des délais échelonnés de 0,1 à 0,8 s
       posés à la main sur chaque bloc. Le décalage entre éléments est
       calculé ici par cabinet-anam.js, à 0,15 s par rang.

La course est aussi allongée de 24 à 30 px : sur une seconde, un
       déplacement trop court donne l'impression que rien ne bouge.
    */
    transition:
        opacity   1s cubic-bezier(.22, .61, .36, 1),
        transform 1s cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform;
}

/* -- 16.2 Les variantes ----------------------------------------------------- */

/* Nommées comme chez modiom-tech pour qu'on s'y retrouve d'un projet à
   l'autre. Elles se posent à la main sur un élément : `data-anim="gauche"`. */
.anam-anim-prete [data-anim="gauche"] { transform: translateX(-34px); }
.anam-anim-prete [data-anim="droite"] { transform: translateX(34px); }
.anam-anim-prete [data-anim="zoom"]   { transform: scale(.95); }
.anam-anim-prete [data-anim="fondu"]  { transform: none; }

/* -- 16.3 L'état révélé ----------------------------------------------------- */

/* `!important` est nécessaire ici, et seulement ici : la liste de cibles du
   § 16.1 compte deux classes, donc une seule classe ne peut pas la battre. */
.anam-anim-prete .anam-anim-vu {
    opacity: 1 !important;
    transform: none !important;
}

/* `will-change` est relâché après coup : le laisser en place réserve de la
   mémoire graphique pour un mouvement qui n'aura plus lieu. */
.anam-anim-prete .anam-anim-fini { will-change: auto; }

/* -- 16.4 Ce qu'on n'anime pas ---------------------------------------------- */

/*
   · Le bandeau d'accueil : le thème l'anime déjà par `data-animation`, et
     deux animations sur le même élément se contrarient.

· Le parcours « Créer ma société » : c'est un formulaire, et chaque étape
     recharge la page. Un fondu à chaque validation ajouterait une demi-seconde
     d'attente à chacune des neuf étapes.

· L'en-tête et le pied de page : ils sont là avant qu'on descende.
*/
.anam-parcours-page [class],
.anam-parcours-page [class] *,
.slide__content--headings [class],
.header [class],
.footer [class] {
    opacity: 1 !important;
    transform: none !important;
    will-change: auto !important;
}

/* ==========================================================================
   17. LE SURTITRE DU BANDEAU D'ACCUEIL

Le thème met cette ligne à 55 px — presque la taille du titre qu'elle
   surmonte. Les deux se disputaient l'attention, et la phrase qui compte
   (« Nous créons votre société, ainsi que le suivi ») perdait son rang.

Un surtitre sert à situer, pas à annoncer : il se lit avant, se retient
   après, et n'a besoin d'être ni gros ni gras. 18 px espacés suffisent à le
   distinguer du paragraphe qui suit, et le titre reprend toute la place.
   ========================================================================== */

.banner_slider_3 .slide .slide__content--headings h3 {
    font-size: 18px;
    line-height: 1.5;
    font-weight: 600;
    letter-spacing: .06em;
    margin-bottom: 14px;
}

/* L'astérisque bleu qui ouvre la ligne suivait la taille du texte : à 55 px
   il faisait la moitié de la hauteur, il devient un simple repère. */
.banner_slider_3 .slide .slide__content--headings h3 .ttm-textcolor-skincolor {
    color: var(--anam-bleu-clair);
    margin-right: 2px;
}

@media only screen and (max-width: 991px) {
    .banner_slider_3 .slide .slide__content--headings h3 { font-size: 16px; margin-bottom: 12px; }
}

@media only screen and (max-width: 600px) {
    .banner_slider_3 .slide .slide__content--headings h3 { font-size: 14px; margin-bottom: 10px; }
}

/* ==========================================================================
   18. LE VOILE DU BANDEAU — d'un aplat à un dégradé
   --------------------------------------------------------------------------
   Le thème posait un noir uniforme à 65 % sur toute la largeur du bandeau
   (main.css:3295, repris en responsive.css:545). Tant que la photo était un
   fond abstrait, cela ne coûtait rien.

Le bandeau montre maintenant deux personnes qui se serrent la main, et
   c'est la seule image du site où l'on voit des visages. Un aplat à 65 %
   les efface : on ne distingue plus que des silhouettes sombres.

Le voile devient donc directionnel. Il reste dense à gauche, où le titre
   blanc a besoin de son contraste, et s'allège vers la droite, où se tient
   la scène. Le texte garde sa lisibilité, la photo garde sa lumière, et
   l'œil va naturellement de la phrase vers les visages.
   ========================================================================== */

.banner_slider_3 .slide_img:before {
    background-color: transparent;
    background-image: linear-gradient(
        90deg,
        rgba(7, 7, 7, .80) 0%,
        rgba(7, 7, 7, .76) 42%,
        rgba(7, 7, 7, .50) 66%,
        rgba(7, 7, 7, .34) 100%
    );
}

/* L'image elle-même. Deux corrections au thème :

— Le WebP d'abord, le JPEG en repli. La première déclaration sert les
     navigateurs qui ignorent image-set(), la seconde les autres. Sur cette
     photo, 109 Ko de JPEG deviennent 52 Ko.

— L'ancrage. Le thème ne posait aucun background-position : la valeur par
     défaut est le coin haut-gauche, donc tout le débord était retiré à droite.
     La slide fait 800 px de haut (main.css:3083) pour une image en 2,40:1 :
     dès qu'une fenêtre est moins large que 1920 px, l'image déborde
     horizontalement, et c'est la personne de droite qui disparaissait. */
.anam-bandeau-image {
    background-image: url('../images/slides/bandeau-accueil.jpg');
    background-image: image-set(
        url('../images/slides/bandeau-accueil.webp') type('image/webp'),
        url('../images/slides/bandeau-accueil.jpg') type('image/jpeg')
    );
    background-position: center center;
    background-repeat: no-repeat;
}

/* Le composant <x-photo> enveloppe chaque image dans un <picture>, qui est un
   élément de plus dans le flux. `display: contents` l'en retire : la mise en
   page se comporte exactement comme avant, avec le <img> pour seul enfant du
   parent d'origine. Sans cette ligne, toutes les règles du thème écrites pour
   un <img> enfant direct rateraient leur cible. */
picture {
    display: contents;
}

/* ==========================================================================
   19. LES TROIS FONDS DÉCLARÉS DANS SHORTCODE.CSS
   --------------------------------------------------------------------------
   Trois photographies du site ne sont référencées nulle part dans les vues :
   elles sont posées en `background-image` par `shortcode.css`, sur des classes
   du thème (`col-bg-img-six`, `-nine`, `-thirteen`). L'inventaire des images,
   fait en lisant les gabarits, les avait donc manquées — et elles portaient
   encore le stock de démonstration du thème, hors licence.

Celle de `col-bg-img-thirteen` était la plus visible : elle s'affiche sur
   les sept pages de prestation et sur toutes les fiches, à côté de « Le
   premier rendez-vous est gratuit », et montrait trois personnes penchées sur
   des plans d'architecte.

Deux corrections ici :

— Le chemin passe de .png à .jpg pour deux d'entre elles. Le thème servait
     des photographies en PNG, format sans perte conçu pour les aplats : 486 Ko
     et 1,1 Mo pour ce qu'un JPEG rend en une centaine.

— Le WebP est servi en premier, le JPEG en repli, comme pour les <img> qui
     passent par <x-photo>.
   ========================================================================== */

.col-bg-img-six.ttm-col-bgimage-yes > .ttm-col-wrapper-bg-layer {
    background-image: url('../images/bg-img/col-bgimage-6.jpg');
    background-image: image-set(
        url('../images/bg-img/col-bgimage-6.webp') type('image/webp'),
        url('../images/bg-img/col-bgimage-6.jpg') type('image/jpeg')
    );
}

.col-bg-img-nine.ttm-col-bgimage-yes > .ttm-col-wrapper-bg-layer {
    background-image: url('../images/bg-img/col-bgimage-9.jpg');
    background-image: image-set(
        url('../images/bg-img/col-bgimage-9.webp') type('image/webp'),
        url('../images/bg-img/col-bgimage-9.jpg') type('image/jpeg')
    );
}

.col-bg-img-thirteen.ttm-col-bgimage-yes > .ttm-col-wrapper-bg-layer {
    background-image: url('../images/bg-img/col-bgimage-13.jpg');
    background-image: image-set(
        url('../images/bg-img/col-bgimage-13.webp') type('image/webp'),
        url('../images/bg-img/col-bgimage-13.jpg') type('image/jpeg')
    );
}

/* ==========================================================================
   20. LE BANDEAU DE TITRE — l'image la plus vue du site
   --------------------------------------------------------------------------
   `main.css:2417` pose `pagetitle-bg.jpg` sur `.ttm-page-title-row`, et cette
   classe se retrouve dans quinze gabarits : c'est le bandeau de **35 des 36
   pages**, tout sauf l'accueil. Comme les trois fonds de la section 19, elle
   n'apparaît dans aucune vue et l'inventaire l'avait donc manquée.

Une bizarrerie du thème méritait d'être défaite. La couche de voile
   (`.ttm-bg-layer`) est réglée à `opacity: .02` — autant dire rien. Ce n'est
   pas que le thème renonce à assombrir : c'est que **l'assombrissement est
   cuit dans le fichier JPEG**. L'image livrée est déjà noircie.

C'est une mauvaise façon de faire. Elle interdit de régler le contraste sans
   repasser par un éditeur d'image, et elle oblige à fournir une photographie
   déjà abîmée. Le voile redevient donc un vrai dégradé CSS, dense à gauche où
   se posent le titre blanc et le fil d'Ariane, plus ouvert à droite.
   ========================================================================== */

.ttm-page-title-row {
    background-image: url('../images/pagetitle-bg.jpg');
    background-image: image-set(
        url('../images/pagetitle-bg.webp') type('image/webp'),
        url('../images/pagetitle-bg.jpg') type('image/jpeg')
    );
}

/* Le dégradé s'allège plus tôt et plus progressivement qu'au premier essai.
   Le mur en ombre de la photographie occupe déjà le tiers gauche : y superposer
   le point le plus dense du voile faisait coïncider deux zones sombres, et la
   bande se lisait comme un rectangle noir collé à une photo, avec une arête
   verticale nette là où le mur s'arrête. En ouvrant dès 25 % on laisse la
   chaleur du mur transparaître et la couture disparaît. */
.ttm-page-title-row.ttm-bg.ttm-bgimage-yes > .ttm-bg-layer {
    opacity: 1;
    background-color: transparent;
    background-image: linear-gradient(
        90deg,
        rgba(7, 7, 7, .78) 0%,
        rgba(7, 7, 7, .72) 25%,
        rgba(7, 7, 7, .60) 55%,
        rgba(7, 7, 7, .46) 100%
    );
}

/* Sous 991 px le titre occupe toute la largeur : le dégradé passe à la
   verticale, comme pour le bandeau d'accueil. */
@media only screen and (max-width: 991px) {
    .ttm-page-title-row.ttm-bg.ttm-bgimage-yes > .ttm-bg-layer {
        background-image: linear-gradient(
            180deg,
            rgba(7, 7, 7, .80) 0%,
            rgba(7, 7, 7, .78) 60%,
            rgba(7, 7, 7, .66) 100%
        );
    }
}

/* ==========================================================================
   21. LES RÉPERTOIRES — métiers, pays, lexique
   --------------------------------------------------------------------------
   Trois nouvelles familles de pages partagent la même mécanique : une grille
   de portes d'entrée, puis une fiche. Elles ont donc le même vocabulaire
   visuel, et il tient en peu de chose.

Le parti est celui du reste du site, poussé un cran plus loin : une bordure
   fine plutôt qu'une ombre, le blanc comme respiration, une seule couleur
   d'accent. Sur une grille de vingt-huit cartes, la moindre ombre portée se
   multiplie par vingt-huit et la page devient bruyante.
   ========================================================================== */

/* Le titre de catégorie. Il sépare sans peser : pas de fond, pas de trait
   plein, juste un repère coloré qui reprend le vocabulaire des titres de
   section déjà en place. */
.anam-repertoire-categorie {
    font-size: 22px;
    margin: 34px 0 18px;
    padding-left: 14px;
    border-left: 3px solid var(--anam-bleu);
    line-height: 1.3;
}

/* La carte d'un métier ou d'un pays. Toute la carte est cliquable, donc elle
   doit le montrer : au survol, la bordure prend la couleur d'accent et la
   carte se soulève de deux pixels. Sans ce retour, un bloc cliquable passe
   pour un bloc mort. */
.anam-carte-metier {
    display: flex;
    flex-direction: column;
    height: calc(100% - 24px);
    margin-bottom: 24px;
    padding: 24px 24px 20px;
    background: #fff;
    border: 1px solid var(--anam-bordure);
    border-radius: var(--anam-r-md);
    color: inherit;
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.anam-carte-metier:hover,
.anam-carte-metier:focus-visible {
    border-color: var(--anam-bleu);
    transform: translateY(-2px);
    box-shadow: var(--anam-ombre);
    color: inherit;
}

.anam-carte-metier h4 {
    font-size: 19px;
    margin-bottom: 10px;
    line-height: 1.3;
}

.anam-carte-metier p {
    flex: 1 1 auto;
    margin-bottom: 14px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--anam-gris);
}

.anam-carte-lien {
    font-size: 14px;
    font-weight: 600;
    color: var(--anam-bleu-fort);
}

.anam-carte-lien i {
    margin-left: 6px;
    font-size: 11px;
    vertical-align: middle;
}

/* Les repères en tête de fiche : la réponse avant le premier paragraphe.
   Quelqu'un qui ouvre « Restaurant » veut savoir quelle forme et quelle TVA ;
   le lui faire chercher dans un paragraphe est une perte de temps. */
.anam-reperes {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    margin: 26px 0 34px;
    background: var(--anam-bordure);
    border: 1px solid var(--anam-bordure);
    border-radius: var(--anam-r-md);
    overflow: hidden;
}

.anam-repere {
    flex: 1 1 220px;
    padding: 18px 22px;
    background: #fff;
}

.anam-repere-etiquette {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--anam-gris);
}

.anam-repere strong {
    display: block;
    font-size: 16px;
    line-height: 1.5;
    color: var(--anam-encre);
}

.anam-repere-detail {
    display: block;
    margin-top: 4px;
    font-size: 14px;
    color: var(--anam-gris);
}

/* Le renvoi vers une prestation, depuis une fiche métier. Plus petit qu'une
   carte de service ordinaire : c'est un raccourci, pas une offre. */
.anam-carte-service {
    display: flex;
    align-items: center;
    gap: 12px;
    height: calc(100% - 16px);
    margin-bottom: 16px;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid var(--anam-bordure);
    border-radius: var(--anam-r-sm);
    color: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    transition: border-color .2s ease, color .2s ease;
}

.anam-carte-service:hover,
.anam-carte-service:focus-visible {
    border-color: var(--anam-bleu);
    color: var(--anam-bleu-fort);
}

.anam-carte-service i {
    flex: 0 0 auto;
    font-size: 22px;
    color: var(--anam-bleu);
}

/* La réserve et la mention de délai. Elles ne crient pas : une réserve mise
   en rouge se lit comme un avertissement de danger, alors qu'elle dit
   seulement « voici la règle générale, votre cas se regarde ». */
.anam-reserve {
    display: flex;
    gap: 14px;
    padding: 18px 20px;
    background: var(--anam-fond-gris);
    border-left: 3px solid var(--anam-bleu);
    border-radius: var(--anam-r-sm);
}

.anam-reserve i {
    flex: 0 0 auto;
    margin-top: 3px;
    font-size: 18px;
    color: var(--anam-bleu);
}

.anam-reserve p {
    margin: 0;
    font-size: 15px;
    line-height: 1.65;
    color: var(--anam-gris);
}

.anam-mention-delai {
    margin-top: 14px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--anam-gris);
}

.anam-mention-delai i {
    margin-right: 6px;
    color: var(--anam-bleu);
}

/* Un encadré latéral, et sa variante « franche » — celle qui sert à dire ce
   que le cabinet ne fait PAS. Elle mérite d'être vue, pas d'être évitée. */
.anam-encadre {
    padding: 26px 28px;
    background: #fff;
    border: 1px solid var(--anam-bordure);
    border-radius: var(--anam-r-md);
}

.anam-encadre h4 {
    font-size: 19px;
    margin-bottom: 14px;
    line-height: 1.35;
}

.anam-encadre-franc {
    background: var(--anam-fond-gris);
    border-color: var(--anam-bordure-appuyee);
}

.anam-encadre-franc p {
    font-size: 15px;
    line-height: 1.7;
}

.anam-encadre-franc .ttm-btn {
    margin-top: 8px;
}

/* Le lexique. Le sigle porte tout le poids typographique, parce que c'est
   lui qu'on cherche des yeux en balayant la page. */
.anam-terme {
    height: calc(100% - 20px);
    margin-bottom: 20px;
    padding: 20px 22px;
    background: #fff;
    border: 1px solid var(--anam-bordure);
    border-radius: var(--anam-r-md);
}

.anam-terme h4 {
    margin-bottom: 8px;
    line-height: 1.3;
}

.anam-terme-sigle {
    display: block;
    font-size: 19px;
    color: var(--anam-bleu-fort);
}

.anam-terme-nom {
    display: block;
    margin-top: 2px;
    font-size: 14px;
    font-weight: 500;
    color: var(--anam-gris);
}

.anam-terme p {
    margin: 0;
    font-size: 15px;
    line-height: 1.65;
}

/* La bande compacte de l'accueil : les six sigles qu'on reçoit à la création.
   Voir écrit ce qu'on va obtenir rassure plus qu'une phrase de promesse. */
.anam-lexique-bande {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.anam-lexique-jeton {
    padding: 8px 15px;
    background: #fff;
    border: 1px solid var(--anam-bordure);
    border-radius: var(--anam-r-pilule);
    font-size: 14px;
    font-weight: 600;
    color: var(--anam-encre);
    transition: border-color .2s ease, color .2s ease;
}

.anam-lexique-jeton:hover,
.anam-lexique-jeton:focus-visible {
    border-color: var(--anam-bleu);
    color: var(--anam-bleu-fort);
}

.anam-lexique-intro {
    margin: 22px 0 0;
    font-weight: 600;
    color: var(--anam-encre);
}

/* Le dernier jeton n'est pas un sigle mais une question : c'est lui qui
   dit que la bande est cliquable. Sans lui, six pastilles alignées passent
   pour une décoration. */
.anam-lexique-jeton-plus {
    background: transparent;
    border-style: dashed;
    font-weight: 500;
    color: var(--anam-gris);
}

/* Le lien WhatsApp et sa mention. Le numéro garde son poids, la promesse
   passe en dessous en plus petit : elle rassure sans voler la vedette au
   geste qu'on attend du visiteur, qui est de cliquer. */
.anam-whatsapp {
    display: inline-flex;
    align-items: flex-start;
    gap: 10px;
    color: inherit;
}

.anam-whatsapp:hover,
.anam-whatsapp:focus-visible {
    color: var(--anam-bleu-fort);
}

.anam-whatsapp > i {
    margin-top: 4px;
    font-size: 17px;
    color: #25d366;
}

.anam-whatsapp small {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--anam-gris);
}

/* La référence du dossier, au bout du parcours. Elle est la seule chose de
   l'écran qu'on recopie sur un papier : elle a donc droit à sa boîte, et au
   caractère à chasse fixe qui rend les chiffres faciles à relire. */
.anam-reference {
    margin: 0 0 22px;
    padding: 18px 22px;
    background: var(--anam-fond-gris);
    border: 1px dashed var(--anam-bordure-appuyee);
    border-radius: var(--anam-r-md);
}

.anam-reference > span {
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--anam-gris);
}

.anam-reference > strong {
    display: block;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 26px;
    letter-spacing: .04em;
    color: var(--anam-bleu-fort);
}

.anam-reference > small {
    display: block;
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--anam-gris);
}

/* Le pied d'un menu latéral : « Tous les métiers ». */
.anam-widget-pied {
    margin: 14px 0 0;
    font-size: 14px;
    font-weight: 600;
}

@media only screen and (max-width: 767px) {
    .anam-repertoire-categorie { font-size: 20px; margin-top: 26px; }
    .anam-carte-metier { padding: 20px; }
    .anam-repere { flex-basis: 100%; }
}

/* ==========================================================================
   22. TARIFS — ce qui n'est pas compris, et l'avertissement provisoire
   --------------------------------------------------------------------------
   Une liste d'inclusions rassure. C'est la liste d'EXCLUSIONS qui évite la
   mauvaise surprise, et un forfait qui ne la donne pas laisse le client la
   découvrir sur sa facture.

Elle est donc traitée avec le même soin que l'autre : même place, même
   taille de texte, une seule différence de marqueur. La mettre en petit et
   en gris reviendrait à la cacher tout en prétendant l'avoir dite.
   ========================================================================== */

.anam-tarif-intitule-hors {
    margin-top: 22px;
}

.anam-tarif-liste-hors li {
    color: var(--anam-gris);
}

/* Le marqueur passe de la coche au tiret. Pas de croix rouge : ce n'est pas
   un échec, c'est une limite de périmètre. */
.anam-tarif-liste-hors li::before {
    content: "–";
    color: var(--anam-bordure-appuyee);
    font-weight: 700;
}

/* L'avertissement sur les montants provisoires. Il doit se voir depuis
   l'autre bout de la page : c'est sa seule raison d'être. */
.anam-avertissement {
    display: flex;
    gap: 16px;
    max-width: 780px;
    margin: 0 auto 34px;
    padding: 20px 24px;
    background: #fff8e6;
    border: 1px solid #f0d9a0;
    border-radius: var(--anam-r-md);
    text-align: left;
}

.anam-avertissement i {
    flex: 0 0 auto;
    margin-top: 3px;
    font-size: 20px;
    color: #b57d00;
}

.anam-avertissement strong {
    display: block;
    margin-bottom: 4px;
    color: #7a5400;
}

.anam-avertissement p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: #7a5400;
}

/* Le comparatif « seul / avec le cabinet ». La première colonne porte le
   critère, les deux autres se valent : aucune n'est mise en avant, sans quoi
   le tableau cesse d'être une comparaison pour devenir une réclame. */
.anam-comparatif table {
    table-layout: fixed;
}

.anam-comparatif thead th:first-child {
    width: 18%;
}

.anam-comparatif tbody td:first-child {
    font-weight: 600;
    color: var(--anam-encre);
}

.anam-comparatif tbody td {
    vertical-align: top;
    font-size: 15px;
    line-height: 1.6;
}

@media only screen and (max-width: 767px) {
    .anam-comparatif table { table-layout: auto; }
    .anam-comparatif thead th:first-child { width: auto; }
    .anam-avertissement { flex-direction: column; gap: 10px; }
}

/* Sous 991 px la colonne de texte prend toute la largeur : le dégradé
   horizontal n'a plus de sens, il passe à la verticale — dense là où le
   texte se pose, ouvert en bas où la photo respire. */
@media only screen and (max-width: 991px) {
    .banner_slider_3 .slide_img:before {
        background-color: transparent;
        background-image: linear-gradient(
            180deg,
            rgba(7, 7, 7, .78) 0%,
            rgba(7, 7, 7, .74) 55%,
            rgba(7, 7, 7, .52) 100%
        );
    }
}

/* ==========================================================================
   23. LE CHEMIN DE CRÉATION — six étapes, et non six tuiles
   --------------------------------------------------------------------------
   Le titre annonce « six étapes ». La grille du thème affichait six tuiles
   détachées, chacune avec son icône flottante et sa pastille numérotée : elle
   disait « voici six choses », pas « voici l'ordre dans lequel elles
   arrivent ». Quelqu'un qui veut savoir où il en sera dans dix jours n'y
   trouvait pas sa réponse.

Trois décisions portent la nouvelle version.

LE RAIL. Une ligne relie les numéros d'une même rangée. C'est peu de chose
   — un pixel de haut — mais c'est ce qui transforme une grille en parcours.
   Il s'arrête à la dernière étape de chaque rangée : une ligne qui part dans
   le vide donne l'impression qu'il manque une case.

LES ÉTIQUETTES. L'organisme et le délai étaient noyés dans la phrase
   (« Compter 24 à 48 heures »). Sortis du texte, ils s'alignent d'une étape à
   l'autre et se comparent d'un coup d'œil. C'est exactement ce que le
   paragraphe d'introduction promet : « voici le chemin, avec les organismes
   et les délais ».

LE FOND. La section est passée du noir au gris clair, et les cartes du
   transparent au bleu plein. Le rapport s'inverse : ce n'est plus le fond
   qui porte l'attention, ce sont les six étapes. Six aplats de couleur sur
   un gris neutre se repèrent de loin et découpent le chemin avant même
   qu'on lise.

Le bleu retenu est `--anam-bleu-fort` (#005FD6) et non le bleu de marque
   (#0070FC). Deux raisons : sur six grandes surfaces, le bleu de marque
   sature l'écran ; et le garder en réserve laisse au bouton « Créer ma
   société » de quoi ressortir au milieu de tout ce bleu.
   ========================================================================== */

.anam-chemin {
    margin-top: 10px;
}

/* La carte est une colonne flex pour une seule raison : pousser le bloc
   d'étiquettes en bas. Sans cela, il flotte à la fin de la description, et
   comme les descriptions n'ont pas la même longueur, les trois lignes
   « Auprès de / Délai / Débours » d'une rangée se décalent les unes des
   autres. Alignées, elles se comparent d'un coup d'œil — c'est tout l'objet
   de les avoir sorties du texte. */
.anam-etape {
    position: relative;
    display: flex;
    flex-direction: column;
    height: calc(100% - 30px);
    margin-bottom: 30px;
    padding: 26px 26px 22px;
    background: var(--anam-bleu-fort);
    border-radius: var(--anam-r-md);
    box-shadow: 0 2px 4px rgba(0, 78, 176, .12), 0 12px 28px rgba(0, 78, 176, .16);
    transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}

/* Au survol la carte se soulève franchement. Sur un aplat de couleur, une
   variation de teinte seule passe inaperçue : c'est l'ombre qui dit que
   l'élément réagit. */
.anam-etape:hover {
    transform: translateY(-4px);
    background: var(--anam-bleu-sombre);
    box-shadow: 0 4px 8px rgba(0, 78, 176, .16), 0 20px 40px rgba(0, 78, 176, .24);
}

/* Le rail. Il part du bord droit de la carte et traverse la gouttière
   (30 px chez Bootstrap) pour rejoindre la carte suivante. Sur le gris
   clair, il est bleu : c'est la seule chose qui relie deux aplats. */
.anam-etape-rail {
    position: absolute;
    top: 48px;
    left: 100%;
    width: 30px;
    height: 2px;
    background: var(--anam-bleu-fort);
    opacity: .35;
}

.anam-etape-tete {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

/* Le numéro s'inverse : pastille blanche, chiffre bleu. Sur un fond bleu,
   un badge bleu disparaîtrait ; le blanc en fait le repère le plus net de
   la carte, ce qu'il doit être puisqu'il porte l'ordre des étapes. */
.anam-etape-numero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    background: #fff;
    border-radius: 50%;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--anam-bleu-fort);
}

.anam-etape-tete i {
    font-size: 30px;
    color: rgba(255, 255, 255, .45);
    transition: color .25s ease;
}

.anam-etape:hover .anam-etape-tete i {
    color: rgba(255, 255, 255, .75);
}

/* Le thème colore les titres en encre foncée. Sur du bleu plein, il faut
   le blanc — et la règle doit être assez spécifique pour passer devant
   `.ttm-bgcolor-grey h3` du thème. */
.anam-etape h3,
.ttm-bgcolor-grey .anam-etape h3 {
    font-size: 20px;
    line-height: 1.3;
    margin-bottom: 10px;
    color: #fff;
}

.anam-etape > p,
.ttm-bgcolor-grey .anam-etape > p {
    margin-bottom: 18px;
    font-size: 15px;
    line-height: 1.65;
    color: rgba(255, 255, 255, .80);
}

/* Les étiquettes. Une liste de définitions, parce que c'en est une :
   « Auprès de » / « OMPIC » est un couple terme-définition, pas un tableau. */
.anam-etape-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin: auto 0 0;          /* `auto` en haut : le bloc colle au bas de la carte */
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, .22);
}

.anam-etape-meta dt {
    margin-bottom: 2px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .58);
}

.anam-etape-meta dd {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: #fff;
}

/* Le pied de section. */
.anam-chemin-pied {
    margin-top: 24px;
}

.anam-chemin-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding-top: 34px;
}

/* Un bouton PLEIN de la couleur d'accent a toujours un texte blanc.

Le thème mélange deux cas sous le même nom. `.ttm-btn-color-skincolor`
   sert aux boutons bordés, dont le TEXTE prend la couleur d'accent, et aux
   boutons pleins, dont c'est le FOND qui la prend. `main.css:945` colore
   donc le texte en #8cbc43 — le vert du thème — dès qu'un tel bouton se
   trouve en section grise, et la neutralisation du vert (§ 3.4) a remplacé
   ce vert par notre bleu. D'où du texte bleu sur un bouton bleu.

Le défaut était latent : aucun bouton plein ne se trouvait en section
   grise avant que celle-ci ne le devienne. La correction vaut pour tout le
   site, pas seulement pour cette section. */
.ttm-bgcolor-grey .ttm-btn-style-fill.ttm-btn-color-skincolor,
.ttm-bgcolor-grey .ttm-btn-style-fill.ttm-btn-color-skincolor i,
.ttm-bgcolor-darkgrey .ttm-btn-style-fill.ttm-btn-color-skincolor,
.ttm-bgcolor-darkgrey .ttm-btn-style-fill.ttm-btn-color-skincolor i {
    color: #fff;
}

.anam-lien-discret {
    font-size: 15px;
    font-weight: 600;
    color: var(--anam-bleu-fort);
    border-bottom: 1px solid var(--anam-bordure-appuyee);
    padding-bottom: 2px;
}

.anam-lien-discret:hover,
.anam-lien-discret:focus-visible {
    color: var(--anam-bleu-sombre);
    border-bottom-color: var(--anam-bleu-sombre);
}

/* Les pastilles du lexique.

Elles étaient invisibles tant que la section était sombre : `main.css:1186`
   impose `color: #fff` à tout lien d'une section `ttm-bgcolor-darkgrey`, avec
   une spécificité (0,2,1) que `.anam-lexique-jeton` (0,1,0) ne pouvait pas
   battre. Du blanc sur du blanc.

Le passage de la section au gris clair règle la cause : le fond blanc des
   pastilles et leur texte encre redeviennent lisibles, et les surcharges
   écrites pour le fond sombre ont été retirées plutôt que laissées mortes.
   Seul le fond blanc mérite d'être appuyé, pour qu'il se détache du gris. */
.ttm-bgcolor-grey a.anam-lexique-jeton {
    background: #fff;
    border-color: var(--anam-bordure-appuyee);
    color: var(--anam-encre);
}

.ttm-bgcolor-grey a.anam-lexique-jeton:hover,
.ttm-bgcolor-grey a.anam-lexique-jeton:focus-visible {
    border-color: var(--anam-bleu);
    color: var(--anam-bleu-fort);
}

.ttm-bgcolor-grey a.anam-lexique-jeton-plus {
    background: transparent;
    border-style: dashed;
    color: var(--anam-gris);
}

@media only screen and (min-width: 992px) {
    /* Trois par rangée : le rail s'arrête à la troisième. */
    .anam-chemin > [class*='col-']:nth-child(3n) .anam-etape-rail { display: none; }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    /* Deux par rangée. */
    .anam-chemin > [class*='col-']:nth-child(2n) .anam-etape-rail { display: none; }
}

@media only screen and (max-width: 767px) {
    /* Une colonne : le rail devient vertical et relie le bas d'une carte au
       haut de la suivante, en traversant la gouttière de 30 px. */
    .anam-etape { padding: 22px; }
    .anam-etape-rail {
        top: 100%;
        left: 43px;
        width: 2px;
        height: 30px;
    }
    .anam-chemin > [class*='col-']:last-child .anam-etape-rail { display: none; }
    .anam-chemin-actions { padding-top: 10px; }
}

/* ==========================================================================
   24. QUELLE FORME CHOISIR — donner la réponse avant le tableau
   --------------------------------------------------------------------------
   La section annonce « la décision qui engage le plus loin » et n'offrait
   qu'un tableau de huit lignes. Une référence complète n'aide pas à décider :
   elle aide à vérifier, une fois qu'on sait ce qu'on cherche.

Les trois raccourcis donnent la réponse d'abord. Ils sont volontairement
   plus hauts et plus colorés que le tableau qui suit : c'est par eux qu'on
   entre, le tableau justifie ensuite.
   ========================================================================== */

.anam-raccourcis {
    margin-top: 30px;
}

.anam-raccourci {
    display: flex;
    flex-direction: column;
    height: calc(100% - 24px);
    margin-bottom: 24px;
    padding: 26px 26px 22px;
    background: #fff;
    border: 1px solid var(--anam-bordure);
    border-radius: var(--anam-r-md);
    color: inherit;
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.anam-raccourci:hover,
.anam-raccourci:focus-visible {
    border-color: var(--anam-bleu);
    transform: translateY(-2px);
    box-shadow: var(--anam-ombre);
    color: inherit;
}

.anam-raccourci > i {
    font-size: 30px;
    margin-bottom: 14px;
    color: var(--anam-bleu);
}

.anam-raccourci-situation {
    display: block;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--anam-encre);
}

.anam-raccourci-detail {
    display: block;
    flex: 1 1 auto;
    margin: 8px 0 18px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--anam-gris);
}

/* La réponse, détachée par un filet. C'est la seule ligne que le visiteur
   cherche vraiment ; elle ne doit pas se confondre avec la description. */
.anam-raccourci-reponse {
    display: block;
    padding-top: 16px;
    border-top: 1px solid var(--anam-bordure);
}

.anam-raccourci-etiquette {
    display: block;
    margin-bottom: 2px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--anam-gris);
}

.anam-raccourci-reponse strong {
    font-size: 22px;
    line-height: 1.2;
    color: var(--anam-bleu-fort);
}

/* La réserve sous les raccourcis. Elle dit que trois cartes ne sont pas une
   règle — sans elle, le site donnerait un conseil juridique à quelqu'un dont
   il ne connaît ni l'activité ni le capital. */
.anam-raccourcis-note {
    max-width: 760px;
    margin: 6px 0 34px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--anam-gris);
}

/* ==========================================================================
   25. POURQUOI NOUS CHOISIR — trois colonnes de texte nu
   --------------------------------------------------------------------------
   Ces six raisons ont été des puces, puis des cartes, puis une liste à
   filets. Deux enseignements de ce chemin.

Le cadre était de trop. L'accueil en comptait VINGT-CINQ — six étapes, six
   prestations, trois raccourcis, trois ressources, quatre encadrés du haut,
   six raisons. Passé un certain nombre, un cadre ne distingue plus rien.

Et la liste à filets réglait le cadre sans régler la mise en page : elle
   restait une colonne étroite à côté d'un titre coincé sur quatre douzièmes,
   qui se lisait sur trois lignes là où tous les autres titres de la page
   tiennent en pleine largeur.

Ici, le titre reprend sa place en tête, et les six raisons occupent la
   largeur en trois colonnes. Pour tout ornement, un trait bleu court au-
   dessus de chaque titre : il dit où commence une raison, et six traits de
   vingt-huit pixels ne pèsent pas ce que pesaient six cadres.
   ========================================================================== */

.anam-raisons {
    margin-top: 10px;
}

.anam-raison {
    padding-top: 22px;
    margin-bottom: 34px;
}

/* Le trait. Court et fin : il ponctue, il ne souligne pas. Un filet pleine
   largeur redessinerait les lignes d'un tableau. */
.anam-raison::before {
    content: "";
    display: block;
    width: 28px;
    height: 3px;
    margin-bottom: 16px;
    background: var(--anam-bleu);
    border-radius: 2px;
}

.anam-raison h4 {
    font-size: 18px;
    line-height: 1.35;
    margin-bottom: 8px;
}

.anam-raison p {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--anam-gris);
}

.anam-pourquoi-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px 24px;
    margin-top: 6px;
}

/* ==========================================================================
   26. LE CABINET — « depuis 2006 » sorti du titre
   --------------------------------------------------------------------------
   Accroché à la fin d'une phrase, « depuis 2006 » se lisait comme une
   virgule de plus. Posé à côté du titre, il devient ce qu'il est : la preuve
   qui appuie ce que le titre affirme.
   ========================================================================== */

.anam-anciennete {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: 14px 0 0;
}

.anam-anciennete-depuis {
    padding: 5px 14px;
    background: var(--anam-bleu);
    border-radius: var(--anam-r-pilule);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #fff;
}

.anam-anciennete-duree {
    font-size: 15px;
    color: var(--anam-gris);
}

/* La section rendez-vous, recomposée.

Le thème l'articulait autour d'une photo : un encadré blanc posé dessus en
   `position-absolute`, et deux classes d'espacement taillées pour ce
   chevauchement — `spacing-5` (margin-top 230 px, margin-right 85 px) et
   `spacing-6` (margin-left −170 px, padding-bottom 150 px).

La photo retirée, ces marges n'avaient plus rien à compenser : le bloc de
   gauche descendait de 230 px et se faisait couper à droite, celui de droite
   débordait par le bas jusque dans la section suivante.

Un seul panneau, deux moitiés séparées par un filet. Un cadre au lieu de
   deux, et plus une seule marge négative. */
.anam-rdv {
    padding: 44px 48px;
    background: var(--anam-fond-gris);
    border-radius: var(--anam-r-lg);
}

/* `height: 100%` pour que le filet coure sur toute la hauteur du panneau.
   Sans lui il s'arrête au bas du numéro WhatsApp, et la séparation a l'air
   inachevée sous un formulaire deux fois plus haut. */
.anam-rdv-appel {
    height: 100%;
    padding-right: 34px;
    border-right: 1px solid var(--anam-bordure-appuyee);
}

.anam-rdv-appel h4 {
    font-size: 28px;
    line-height: 1.25;
    margin-bottom: 14px;
}

.anam-rdv-form {
    padding-left: 34px;
}

/* Les champs sont blancs sur le panneau gris : sans cela ils se confondent
   avec le fond et le formulaire disparaît. */
.anam-rdv-form input,
.anam-rdv-form select,
.anam-rdv-form textarea {
    background-color: #fff;
}

@media only screen and (max-width: 991px) {
    .anam-rdv { padding: 30px 24px; }
    .anam-rdv-appel {
        padding-right: 0;
        padding-bottom: 30px;
        margin-bottom: 30px;
        border-right: none;
        border-bottom: 1px solid var(--anam-bordure-appuyee);
    }
    .anam-rdv-form { padding-left: 0; }
    .anam-rdv-appel h4 { font-size: 24px; }
}

@media only screen and (max-width: 767px) {
    .anam-raccourci { padding: 22px; }
    .anam-raison { padding-top: 18px; margin-bottom: 26px; }
    .anam-pourquoi-actions { flex-direction: column; align-items: flex-start; }
}