> .e-con -> modeles deja importes (aucun reimport requis) ============================================================ */ /* ------------------------------------------------------------------ Marge interne par défaut des conteneurs Elementor. Elementor pose sur CHAQUE conteneur une marge interne que ni le modèle ni cette feuille n'ont demandée : elle vient du Kit du site (10px de série, mais le réglage appartient au site). Elle s'ajoute à la nôtre — d'où des visuels un peu plus étroits que la maquette et de fines bandes blanches sous les images. On remet la valeur PAR DÉFAUT à zéro. Les variables se transmettent aux conteneurs imbriqués ; `:where()` ne pèse rien en spécificité, donc toute règle de cette feuille continue de l'emporter, comme les marges réglées dans Elementor. Ajout postérieur à l'import : recoller cette feuille suffit, il n'y a pas à réimporter le modèle. ------------------------------------------------------------------ */ .nav, .hero, .pain, .objectives, .programme, .who-why, .testimonials, .faq, .final, .sticky-cta, .site-footer{ --container-default-padding-block-start:0px; --container-default-padding-block-end:0px; --container-default-padding-inline-start:0px; --container-default-padding-inline-end:0px; } :where(.nav, .hero, .pain, .objectives, .programme, .who-why, .testimonials, .faq, .final, .sticky-cta, .site-footer) .e-con{ padding:0; } .cia-container, .hero > .e-con, .pain > .e-con, .objectives > .e-con, .programme > .e-con, .who-why > .e-con, .testimonials > .e-con, .faq > .e-con, .final > .e-con, .site-footer > .e-con{ max-width:1180px !important; width:100% !important; margin-left:auto !important; margin-right:auto !important; padding-left:24px !important; padding-right:24px !important; } /* Elementor ajoute parfois un wrapper interne : il ne doit rien re-contraindre. */ .cia-container > .e-con-inner, .hero > .e-con > .e-con-inner, .pain > .e-con > .e-con-inner, .objectives > .e-con > .e-con-inner, .programme > .e-con > .e-con-inner, .who-why > .e-con > .e-con-inner, .testimonials > .e-con > .e-con-inner, .faq > .e-con > .e-con-inner, .final > .e-con > .e-con-inner, .site-footer > .e-con > .e-con-inner{ max-width:none !important; width:100% !important; padding-left:0 !important; padding-right:0 !important; } /* ============================================================ CONTENEURS DE MISE EN PAGE — aucun retrait interieur Elementor applique une marge interieure par defaut a chaque conteneur. Sur les conteneurs de STRUCTURE (grilles, rangees), ce retrait s'ajoute a celui de .cia-container et retrecit le contenu d'environ 24px : assez pour faire passer le « ? » du titre du hero a la ligne suivante. Les CARTES gardent evidemment leur marge interieure (obj-card, day-card, t-card, pain-quote, countdown-card, persona, form-card...). ============================================================ */ .hero .hero-grid, .hero .hero-badges, .hero .hero-ctas, .hero .hero-facts, .hero .hero-fact, .pain .pain-quotes, .pain .pain-cta-line, .objectives .obj-intro, .objectives .obj-grid, .programme .timeline, .who-why .ww-grid, .who-why .ww-col, .who-why .why-item, .testimonials .t-grid, .testimonials .t-person, .testimonials .logos-row, .final .final-grid, .final .final-left, .final .final-detail, .site-footer .footer-top, .site-footer .footer-cols, .site-footer .footer-col, .site-footer .footer-bottom, .section-head, .nav .nav-links, .nav .nav-cta{ padding:0 !important; } /* ============================================================ DISPOSITIONS FLEX — imposees ici, pas via les reglages Elementor Le reglage « Justify Content » du conteneur Elementor ne s'est pas applique de facon fiable (constate sur la navigation). Toutes les dispositions qui comptent sont donc definies ici, ce qui les rend independantes des reglages de l'editeur. ============================================================ */ /* --- Groupes en ligne, alignes au centre --- */ .nav-cta, .hero .hero-fact, .testimonials .t-person, .final .final-detail, .hero .hero-ctas{ display:flex !important;flex-direction:row !important; align-items:center !important; } /* --- Groupes en ligne, alignes en haut (icone + texte multiligne) --- */ .objectives .obj-highlight, .who-why .persona, .who-why .why-item{ display:flex !important;flex-direction:row !important; align-items:flex-start !important; } /* --- Groupes en ligne avec repartition aux extremites --- */ .sticky-cta, .site-footer .footer-top, .site-footer .footer-bottom{ display:flex !important;flex-direction:row !important; justify-content:space-between !important; align-items:center !important; } .site-footer .footer-top{align-items:flex-start !important;} /* --- Groupes en ligne centres --- */ .testimonials .logos-row{ display:flex !important;flex-direction:row !important; justify-content:center !important;align-items:center !important; } /* --- Groupes en ligne simples --- */ .hero .hero-badges, .hero .hero-facts, .site-footer .footer-cols{ display:flex !important;flex-direction:row !important; align-items:center !important; } .site-footer .footer-cols{align-items:flex-start !important;} /* --- Blocs empiles verticalement --- */ .hero .countdown-card, .objectives .obj-card, .programme .day-card, .who-why .ww-col, .testimonials .t-card, .final .final-left, .final .form-card, .pain .pain-cta-line{ display:flex !important;flex-direction:column !important; } /* --- Blocs empiles et centres --- */ .objectives .obj-intro, .section-head{ display:flex !important;flex-direction:column !important; align-items:center !important; } /* Les espacements entre elements viennent d'Elementor (Gap) ; on ne les force que la ou la maquette impose une valeur precise. */ .hero .hero-badges{gap:10px;} .hero .hero-ctas{gap:18px;} .hero .hero-facts{gap:26px;} .hero .hero-fact{gap:10px;} .objectives .obj-highlight{gap:16px;} .who-why .persona{gap:16px;} .who-why .why-item{gap:14px;} .testimonials .t-person{gap:12px;} .testimonials .logos-row{gap:44px;} .final .final-detail{gap:14px;} .sticky-cta{gap:16px;} .site-footer .footer-top{gap:30px;} .site-footer .footer-cols{gap:50px;} .site-footer .footer-bottom{gap:10px;} /* ------------------------------------------------------------ LARGEUR DES ENFANTS DE RANGEE Elementor attribue width:100% aux enfants d'un conteneur flex. Combine a flex-wrap:wrap, chaque enfant occupe alors toute une ligne et la rangee s'empile verticalement (constate sur le pied de page et les reperes du hero). On leur rend leur largeur naturelle. La barre collante etait epargnee simplement parce qu'elle n'a pas flex-wrap. ------------------------------------------------------------ */ /* Blocs d'une rangee : largeur du contenu */ .hero .hero-badges > *, .hero .hero-ctas > *, .hero .hero-facts > *, .testimonials .logos-row > *, .site-footer .footer-cols > *, .site-footer .footer-bottom > *, .sticky-cta > *{ width:auto !important;flex:0 0 auto !important; } /* Pied de page : bloc marque a gauche, colonnes a droite */ .site-footer .footer-top > *{width:auto !important;flex:0 1 auto !important;} /* Icones : jamais compressees */ .hero .hero-fact-ico, .who-why .persona-ico, .who-why .why-item-ico, .final .final-detail-ico, .objectives .obj-highlight-icon, .testimonials .t-avatar{width:auto !important;flex:0 0 auto !important;} /* Textes accolés à une icone : occupent le reste de la ligne */ .hero .hero-fact-txt, .who-why .persona-txt, .who-why .why-item-txt, .final .final-detail-txt, .objectives .obj-highlight > .elementor-widget-text-editor, .testimonials .t-person > .e-con{ width:auto !important;flex:1 1 auto !important; } /* Ces groupes doivent pouvoir passer a la ligne sur petit ecran */ .hero .hero-badges, .hero .hero-ctas, .hero .hero-facts, .testimonials .logos-row, .site-footer .footer-top, .site-footer .footer-cols, .site-footer .footer-bottom{flex-wrap:wrap !important;} /* ============================================================ HERO ============================================================ */ .hero{ position:relative; min-height:100vh; display:flex;align-items:center; padding:140px 0 90px; overflow:hidden; isolation:isolate; background: radial-gradient(ellipse 900px 700px at 82% 8%, rgba(206,14,45,.55), transparent 60%), radial-gradient(ellipse 700px 600px at 95% 45%, rgba(150,38,44,.45), transparent 60%), radial-gradient(ellipse 600px 500px at 10% 90%, rgba(206,14,45,.18), transparent 60%), linear-gradient(180deg,var(--navy-950),var(--navy-900) 55%, var(--navy-800)); } .hero::before{ content:"";position:absolute;inset:0;z-index:-1; background-image:radial-gradient(rgba(255,255,255,.55) 1px, transparent 2px); background-size:34px 34px;opacity:.06; } .hero .hero-grid{ display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center; position:relative;z-index:2; } .hero h1{color:#fff;font-size:clamp(37px,4.6vw,58px);font-weight:800;} .hero h1 .grad{ background:linear-gradient(100deg,var(--red-light),var(--red)); -webkit-background-clip:text;background-clip:text;color:transparent; } .hero .lead{color:var(--gray-300);font-size:19px;max-width:560px !important;} .hero .hero-badges{flex-wrap:wrap;} .hero .hero-ctas{flex-wrap:wrap;align-items:center;} .hero .hero-facts{flex-wrap:wrap;} .hero .hero-fact{align-items:center;} .hero .hero-fact svg{width:19px;height:19px;color:var(--red-light);flex-shrink:0;display:block;} .hero .hero-fact-txt{color:var(--gray-300);font-size:15px !important;font-weight:600;} .hero .hero-fact-txt p{color:inherit;font-size:inherit;margin:0;} /* Losanges flottants */ .hero .hero-sparkles{position:absolute;inset:0;pointer-events:none;z-index:1;} .hero .sparkle-diamond{ position:absolute; filter:drop-shadow(0 0 22px rgba(206,14,45,.55)); animation:cia-float 7s ease-in-out infinite; } .hero .sparkle-diamond.s1{width:150px;top:8%;right:6%;animation-delay:0s;opacity:.9;} .hero .sparkle-diamond.s2{width:52px;top:2%;right:22%;animation-delay:1.4s;opacity:.75;} .hero .sparkle-diamond.s3{width:34px;top:34%;right:2%;animation-delay:2.6s;opacity:.6;} @keyframes cia-float{ 0%,100%{transform:translateY(0) rotate(0deg);} 50%{transform:translateY(-18px) rotate(4deg);} } /* Carte compte à rebours */ .hero .countdown-card{ position:relative;z-index:2; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12); border-radius:20px;padding:30px; backdrop-filter:blur(6px); } .hero .countdown-card h3{color:#fff;font-size:16px;margin-bottom:4px;} .hero .countdown-card .sub p{color:var(--gray-400);font-size:14px !important;margin:0 0 20px;} /* Mode liste d'attente : bloc « Dates à venir » (widget HTML) à la place du compte à rebours. Le sous-titre .sub passe SOUS ce bloc. */ .hero .cia-date-avenir{ display:flex;align-items:center;gap:16px; padding:18px 20px;border-radius:14px;margin:6px 0 12px; background:linear-gradient(135deg,rgba(206,14,45,.16),rgba(206,14,45,.05)); border:1px solid rgba(230,130,142,.32); } .hero .cia-date-avenir .dav-ico{ flex:0 0 auto;display:flex;align-items:center;justify-content:center; width:44px;height:44px;border-radius:11px; background:rgba(206,14,45,.9);color:#fff; } .hero .cia-date-avenir .dav-ico svg{width:22px;height:22px;} .hero .cia-date-avenir .dav-txt{display:flex;flex-direction:column;gap:3px;min-width:0;} .hero .cia-date-avenir .dav-txt strong{ font-size:21px;line-height:1.15;font-weight:700;color:#fff;letter-spacing:.2px; } .hero .cia-date-avenir .dav-txt span{ font-size:13.5px;line-height:1.35;color:rgba(255,255,255,.6); display:flex;align-items:center;gap:7px; } .hero .cia-date-avenir .dav-txt span::before{ content:"";width:7px;height:7px;border-radius:50%; background:var(--red-light);flex:0 0 auto; animation:cia-dav-pulse 2.4s ease-in-out infinite; } @keyframes cia-dav-pulse{0%,100%{opacity:1;}50%{opacity:.25;}} @media (prefers-reduced-motion:reduce){ .hero .cia-date-avenir .dav-txt span::before{animation:none;} } @media (max-width:480px){ .hero .cia-date-avenir{padding:16px;} .hero .cia-date-avenir .dav-txt strong{font-size:19px;} } /* La maquette avait .countdown-grid{margin-bottom:24px} : sans cela le bouton se colle aux boitiers du compte a rebours. */ .hero .cia-countdown{margin-bottom:24px !important;} .hero .cia-countdown .elementor-countdown-wrapper{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;} .hero .cia-countdown .elementor-countdown-item{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:12px;padding:14px 4px;text-align:center; } .hero .cia-countdown .elementor-countdown-digits{ font-size:27px;font-weight:800;color:#fff;line-height:1.6; } .hero .cia-countdown .elementor-countdown-label{ font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--gray-400); line-height:1.6; } .hero .divider-soft{height:1px;background:rgba(255,255,255,.1);margin:22px 0;} .hero .mini-detail{ display:flex;justify-content:space-between; font-size:14px;color:var(--gray-300);padding:7px 0; } .hero .mini-detail b{color:#fff;font-weight:600;} /* ============================================================ CONSTAT (pain) ============================================================ */ .pain{background:var(--navy-900);} .pain .pain-quotes{display:grid;grid-template-columns:1fr 1fr;gap:24px;} .pain .pain-quote{ background:var(--navy-800);border:1px solid rgba(255,255,255,.08); border-radius:var(--radius);padding:30px;position:relative; } .pain .pain-quote::before{ content:"";position:absolute;top:0;left:26px;width:36px;height:4px; background:linear-gradient(90deg,var(--red),var(--maroon));border-radius:4px; } .pain .pain-quote p{font-size:17px !important;color:var(--gray-300);font-style:italic;padding-top:12px;margin:0;} .pain .pain-cta-line{max-width:700px;margin-left:auto;margin-right:auto;text-align:center;} .pain .pain-cta-line h3{color:#fff;font-size:clamp(26px,3vw,34px);font-weight:800;} .pain .pain-cta-line .accent{color:var(--red-light);} .pain .pain-cta-line p{color:var(--gray-400);font-size:17px !important;} /* ============================================================ OBJECTIFS ============================================================ */ .objectives{background:var(--gray-100);} .objectives .obj-intro{max-width:700px;margin-left:auto;margin-right:auto;text-align:center;} .objectives .obj-intro p{color:var(--gray-600);font-size:17px !important;} .objectives .obj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;} .objectives .obj-card{ background:#fff;border-radius:var(--radius);padding:34px 28px; box-shadow:var(--shadow-md);border:1px solid rgba(20,26,44,.05); transition:transform .25s ease, box-shadow .25s ease; } .objectives .obj-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);} .objectives .obj-card h3{font-size:18px;color:var(--navy-900);} .objectives .obj-card p{color:var(--gray-600);font-size:15px !important;} /* Tuile d'icone en degrade. Le style porte sur le WIDGET lui-meme, pas sur .elementor-widget-container : ce div interne disparait quand l'option « Optimized Markup » d'Elementor est active, ce qui faisait disparaitre la tuile (et l'icone blanche devenait invisible sur la carte blanche). `display:contents` neutralise ce wrapper lorsqu'il existe, pour que le

: Elementor leur impose line-height:1, alors que la maquette leur donnait l'interlignage du corps de texte (1.6). Le role, sur deux lignes, etait donc ecrase. */ .testimonials .t-name .elementor-heading-title{ font-weight:700;font-size:14px;color:#fff;line-height:1.6; } .testimonials .t-role .elementor-heading-title{ font-size:12px;color:var(--gray-400);font-weight:400;line-height:1.6; } .testimonials .logos-caption p{ text-align:center;color:var(--gray-600);font-size:12px; letter-spacing:.1em;text-transform:uppercase;margin:0; } .testimonials .logos-row{ flex-wrap:wrap;padding-top:36px;border-top:1px solid rgba(255,255,255,.08); } .testimonials .logos-row .elementor-heading-title{ font-weight:700;color:var(--gray-400);font-size:16px;letter-spacing:.02em; opacity:.75;transition:opacity .2s, color .2s; } .testimonials .logos-row .elementor-widget:hover .elementor-heading-title{opacity:1;color:#fff;} /* ============================================================ FAQ (widget Accordéon natif d'Elementor) ============================================================ */ .faq{background:#fff;} .faq .faq-list{ width:100% !important;max-width:760px !important; margin-left:auto !important;margin-right:auto !important; } .faq .faq-list .elementor-accordion .elementor-accordion-item{ border:none;border-bottom:1px solid rgba(20,26,44,.1); } /* Le widget Accordeon place son icone AVANT le titre ; la maquette la veut a droite, avec le texte a gauche. On reordonne en flex. */ .faq .faq-list .elementor-tab-title{ background:none;padding:22px 4px; font-weight:700;font-size:16px;color:var(--navy-900); display:flex !important;align-items:center !important; justify-content:space-between !important;gap:16px; } .faq .faq-list .elementor-accordion-title{order:1;flex:1 1 auto;text-align:left;} .faq .faq-list .elementor-accordion-icon{ order:2;flex:0 0 auto; float:none !important;margin:0 !important; width:auto !important;padding:0 !important; } .faq .faq-list .elementor-tab-title a{color:var(--navy-900);} .faq .faq-list .elementor-tab-content{ border:none;padding:0 4px 22px; } .faq .faq-list .elementor-tab-content p{color:var(--gray-600);font-size:15px !important;max-width:680px;margin:0;} /* Icone "+" : le trace SVG d'origine (M12 5v14M5 12h14), injecte en CSS pour ne pas dependre d'une police d'icones. */ .faq .faq-list .elementor-accordion-icon i, .faq .faq-list .elementor-accordion-icon svg{display:none;} .faq .faq-list .elementor-accordion-icon::before{ content:"";display:block;width:20px;height:20px; transition:transform .25s ease; background:url('data:image/svg+xml;utf8,') no-repeat center/contain; } .faq .faq-list .elementor-active .elementor-accordion-icon::before{transform:rotate(45deg);} /* ============================================================ INSCRIPTION + FORMULAIRE ============================================================ */ .final{ background: radial-gradient(ellipse 800px 500px at 15% 15%, rgba(206,14,45,.28), transparent 60%), radial-gradient(ellipse 700px 600px at 90% 90%, rgba(206,14,45,.35), transparent 60%), linear-gradient(180deg,var(--navy-900),var(--navy-950)); } .final .final-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:start;} .final .final-left h2{color:#fff;font-size:clamp(30px,3.2vw,40px);} .final .final-left > .elementor-widget-text-editor p{color:var(--gray-300);font-size:17px !important;} .final .final-detail{align-items:center;} /* La maquette utilisait des marges distinctes par element. */ .final .final-left{gap:0 !important;} .final .final-left h2{margin-bottom:18px;} .final .final-left > .elementor-widget-text-editor{margin-bottom:28px;} .final .final-detail{margin-bottom:16px;} .final .final-badge-wrap{margin-top:20px;} .final .final-detail-ico svg{width:22px;height:22px;display:block;color:var(--red-light);flex-shrink:0;} .final .final-detail-txt{color:var(--gray-300);font-size:16px !important;} .final .final-detail-txt p{color:inherit;font-size:inherit;margin:0;} .final .final-detail-txt b{color:#fff;} .final .final-badge-free{ display:inline-flex;align-items:center;gap:8px; background:rgba(47,191,113,.15);border:1px solid rgba(47,191,113,.4);color:#7fe8ac; padding:9px 16px;border-radius:100px;font-weight:700;font-size:14px; } .final .final-badge-free svg{width:16px;height:16px;flex-shrink:0;} /* Carte formulaire */ .final .form-card{ background:#fff;border-radius:20px;padding:36px; color:var(--navy-900);box-shadow:var(--shadow-lg); } .final .form-card h3{font-size:19px;color:var(--navy-900);margin-bottom:6px;} .final .form-card .sub p{color:var(--gray-600);font-size:14px !important;margin:0 0 22px;} /* --------------------------------------------------------------- GRAVITY FORMS — balisage « gravity-theme » (GF 2.5+), sans le Theme Framework (classe gform-theme--no-framework sur ce site). L'API de variables d'Orbital n'est donc pas disponible : on cible les selecteurs. La carte blanche ci-dessus reste celle de la page ; tout ce qui suit habille le formulaire lui-meme. La specificite (.final + .gform_wrapper.gravity-theme) passe devant la feuille de style par defaut de Gravity Forms. --------------------------------------------------------------- */ /* Le wrapper ne doit rien ajouter : la carte porte deja la marge. */ .final .form-card .gform_wrapper.gravity-theme{margin:0;padding:0;} .final .form-card .gform_wrapper.gravity-theme form{margin:0;} /* Espacement entre les champs. En 2.5, .gform_fields est une grille CSS : les largeurs (moitie / pleine) viennent du reglage « Field Width » de Gravity Forms, il n'y a rien a ecrire pour cela. */ .final .form-card .gform_wrapper.gravity-theme .gform_fields{ grid-row-gap:14px;grid-column-gap:14px; } /* Libelles */ .final .form-card .gform_wrapper.gravity-theme .gfield_label{ font-family:var(--ff-body); font-size:13px;font-weight:600;color:var(--navy-800); margin-bottom:6px;padding:0; } .final .form-card .gform_wrapper.gravity-theme .gfield_required{ color:var(--red);margin-left:2px; } /* Champs de saisie */ .final .form-card .gform_wrapper.gravity-theme input[type="text"], .final .form-card .gform_wrapper.gravity-theme input[type="email"], .final .form-card .gform_wrapper.gravity-theme input[type="tel"], .final .form-card .gform_wrapper.gravity-theme select, .final .form-card .gform_wrapper.gravity-theme textarea{ font-family:var(--ff-body);font-size:15px; border:2px solid #e2e5ee;border-radius:10px; padding:12px 14px; transition:border-color .15s; } .final .form-card .gform_wrapper.gravity-theme input:focus, .final .form-card .gform_wrapper.gravity-theme select:focus, .final .form-card .gform_wrapper.gravity-theme textarea:focus{ outline:none;border-color:var(--red);box-shadow:none; } .final .form-card .gform_wrapper.gravity-theme ::placeholder{color:var(--gray-600);opacity:1;} /* Consentement : case a gauche, texte a droite, 10px entre les deux */ .final .form-card .gform_wrapper.gravity-theme .gfield--type-consent{ margin:16px 0 20px; } .final .form-card .gform_wrapper.gravity-theme .ginput_container_consent{ display:flex;align-items:flex-start;gap:10px; } .final .form-card .gform_wrapper.gravity-theme .ginput_container_consent input[type="checkbox"]{ margin:3px 0 0;flex:0 0 auto; } .final .form-card .gform_wrapper.gravity-theme .ginput_container_consent label{ font-size:12px;color:var(--gray-600);line-height:1.5;margin:0; } /* le libelle du champ consentement est vide dans la maquette */ .final .form-card .gform_wrapper.gravity-theme .gfield--type-consent > .gfield_label{display:none;} /* Bouton d'envoi — meme traitement que les boutons de la page */ .final .form-card .gform_wrapper.gravity-theme .gform_footer{ margin:0;padding:0; } .final .form-card .gform_wrapper.gravity-theme .gform_footer input[type="submit"], .final .form-card .gform_wrapper.gravity-theme .gform_button{ width:100%; font-family:var(--ff-body);font-weight:700;font-size:16px; padding:16px 30px;border:none;border-radius:100px; background:linear-gradient(135deg,var(--red),var(--maroon)); color:#fff;cursor:pointer; box-shadow:0 14px 30px -8px rgba(206,14,45,.55); transition:transform .18s ease, box-shadow .18s ease, filter .18s ease; } .final .form-card .gform_wrapper.gravity-theme .gform_footer input[type="submit"]:hover{ transform:translateY(-2px);filter:brightness(1.04); } /* Titre et description du formulaire : la page fournit deja les siens (« Réserver ma place » + sous-titre). Le parametre title="false" du shortcode ne suffit pas toujours selon la facon dont le formulaire est insere : on masque aussi en CSS. */ .final .form-card .gform_wrapper.gravity-theme .gform_heading, .final .form-card .gform_wrapper.gravity-theme .gform_title, .final .form-card .gform_wrapper.gravity-theme .gform_description, /* mention « * indicates required fields » : redondante, et en anglais */ .final .form-card .gform_wrapper.gravity-theme .gform_required_legend, /* piege anti-robot : doit etre invisible ET sans hauteur */ .final .form-card .gform_wrapper.gravity-theme .gform_validation_container, .final .form-card .gform_wrapper.gravity-theme .gfield_visibility_hidden{ display:none !important; } /* Rien ne doit ajouter de retrait en haut du formulaire. */ .final .form-card .gform_wrapper.gravity-theme form, .final .form-card .gform_wrapper.gravity-theme .gform-body, .final .form-card .gform_wrapper.gravity-theme .gform_body{ margin-top:0 !important;padding-top:0 !important; } /* Indicateur de champ obligatoire. Gravity Forms affiche par defaut « (Required) » — en anglais, sur un formulaire francais, et plus lourd que l'asterisque de la maquette. On remplace le texte par « * » sans dependre du reglage du formulaire. */ .final .form-card .gform_wrapper.gravity-theme .gfield_required_text{ font-size:0 !important; } .final .form-card .gform_wrapper.gravity-theme .gfield_required_text::after{ content:"*";font-size:13px;color:var(--red); } .final .form-card .gform_wrapper.gravity-theme .gfield_required_asterisk{ color:var(--red); } /* ------------------------------------------------------------------ Icones Material injectees par le theme Le theme insere des dans le formulaire : fleche apres les boutons, chevron dans les listes deroulantes. La police d'icones n'etant pas chargee dans ce contexte, le navigateur ecrit le nom de la ligature en toutes lettres (« arrow_forward », « expand_more ») — et comme le span est positionne en absolu, ce texte se superpose a celui du champ. On masque l'injection partout dans le formulaire, puis on redessine le chevron nous-memes en fond du