/* ========================================================================== Com Factory — pont WordPress / Elementor Chargé après comfactory.css (le système de design, identique au site statique). Trois rôles : relier nos classes de section aux conteneurs Elementor, habiller les widgets natifs avec nos jetons, et remplacer les styles qui étaient écrits en ligne dans les pages HTML. ========================================================================== */ /* ------------------------------------------- 1. Barre d'admin WordPress */ .admin-bar .header{top:32px} @media (max-width:782px){.admin-bar .header{top:46px}} /* ------------------------------- 2. Conteneurs Elementor = nos sections Elementor pilote ses marges par variables CSS : on les redéfinit plutôt que de lutter à coups de !important. */ .e-con.section,.elementor-section.section{ --padding-block-start:var(--section-y); --padding-block-end:var(--section-y); } /* Gouttière latérale du design (jusqu'à 40 px) plutôt que les 10 px d'Elementor. Sans elle, le texte colle au bord sur tablette et mobile. */ .e-con.section,.e-con.hero,.e-con.page-hero{ --padding-inline-start:var(--gutter); --padding-inline-end:var(--gutter); } .e-con.section--soft{background-color:var(--bg-soft)} .e-con.section--dark{background-color:var(--section-bg,var(--navy-900))} .e-con.section--flush{--padding-block-start:0} /* Largeur de contenu alignée sur la maquette */ .e-con-boxed>.e-con-inner{max-width:var(--container)} /* Nos utilitaires de mise en page appliqués aux conteneurs Elementor. Un conteneur « boxed » place ses enfants dans .e-con-inner : c'est donc là que la grille doit s'appliquer. Un conteneur « full » les porte directement. */ .e-con.grid,.e-con.split,.e-con.steps{display:block} .e-con.grid>.e-con-inner, .e-con.split>.e-con-inner, .e-con.steps>.e-con-inner, .e-con-full.grid,.e-con-full.split,.e-con-full.steps{display:grid;gap:clamp(1rem,2vw,1.5rem)} .e-con.grid-2>.e-con-inner,.e-con-full.grid-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr))} .e-con.grid-3>.e-con-inner,.e-con-full.grid-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,17.5rem),1fr))} .e-con.grid-4>.e-con-inner,.e-con-full.grid-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))} @media (min-width:900px){ .e-con.split>.e-con-inner,.e-con-full.split{grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center} } @media (min-width:760px){ .e-con.steps>.e-con-inner,.e-con-full.steps{grid-template-columns:repeat(4,1fr)} } /* Les cartes restent des conteneurs flex en colonne, sur toute la hauteur */ .e-con.card,.e-con.svc,.e-con.work,.e-con.post,.e-con.step{--flex-direction:column;height:100%} /* Les conteneurs qui portent déjà une marge dans le système de design ne doivent pas recevoir en plus celle d'Elementor. */ .e-con.svc__body,.e-con.work__body,.e-con.post__body, .e-con.section-head,.e-con.split__media,.e-con.hero__inner, .e-con.btn-row,.e-con.form-wrap{ --padding-block-start:0;--padding-block-end:0; --padding-inline-start:0;--padding-inline-end:0; } .e-con.svc__body{--padding-block-start:clamp(1.25rem,2.2vw,1.7rem);--padding-block-end:clamp(1.25rem,2.2vw,1.7rem);--padding-inline-start:clamp(1.25rem,2.2vw,1.7rem);--padding-inline-end:clamp(1.25rem,2.2vw,1.7rem)} .e-con.work__body,.e-con.post__body{--padding-block-start:1.25rem;--padding-block-end:1.5rem;--padding-inline-start:1.4rem;--padding-inline-end:1.4rem} /* .e-flex est ajouté pour passer devant la règle .e-con.e-flex d'Elementor, de même spécificité mais chargée après la feuille du thème. */ .e-con.e-flex.btn-row{--flex-direction:row;--flex-wrap:wrap;--align-items:center;--gap:.85rem} /* Un widget Elementor occupe 100 % de la largeur par défaut : dans une rangée de boutons, il doit au contraire se réduire à son contenu. */ .e-con.btn-row>.elementor-widget{width:auto} /* En-tête de page interne */ .e-con.page-hero{ position:relative;overflow:hidden;background-color:var(--bg-soft); border-bottom:1px solid var(--border); --padding-block-start:clamp(2.75rem,6vw,4.5rem); --padding-block-end:clamp(2.75rem,6vw,4.5rem); } /* Carte d'appel à l'action posée dans une section sombre : aplat orange, texte foncé — le contraste reste largement au-dessus du seuil AA. */ .e-con.card--accent{background:#F28A1E;border-color:transparent;color:#1A1206} .e-con.card--accent .elementor-heading-title{color:#1A1206} .e-con.card--accent .elementor-widget-text-editor{color:rgba(26,18,6,.82)} .e-con.card--accent .elementor-widget-button .elementor-button{background:#0A2E5C;color:#fff} /* Cartes centrées (équipe) */ .e-con.card--center{--align-items:center;text-align:center} .e-con.card--center .elementor-widget-image img{ width:150px;height:150px;object-fit:cover;object-position:top center; border-radius:50%;background:var(--brand-100);box-shadow:none; } .elementor-widget-image.img-round img{border-radius:50%} /* Un conteneur imbriqué ne rejoue pas les marges de section */ .e-con .e-con.section{--padding-block-start:0;--padding-block-end:0} /* Le filtre du portfolio masque les cartes via l'attribut hidden : les conteneurs Elementor ont display:flex, il faut donc le neutraliser. */ .e-con[hidden],.elementor-widget[hidden]{display:none!important} /* ------------------------------------------- 3. Widgets natifs Elementor */ .elementor-widget-heading .elementor-heading-title{ font-family:var(--font-display);color:var(--text); line-height:1.2;letter-spacing:-.015em;font-weight:600; } /* Échelle par défaut, calée sur celle du site statique. */ .elementor-widget-heading h1.elementor-heading-title{font-size:clamp(1.4rem,3.1vw,2.4rem);letter-spacing:-.022em} .elementor-widget-heading h2.elementor-heading-title{font-size:clamp(1.18rem,2.2vw,1.85rem)} .elementor-widget-heading h3.elementor-heading-title{font-size:clamp(1.02rem,1.3vw,1.15rem)} .elementor-widget-heading h4.elementor-heading-title{font-size:1rem} /* Quand une classe de taille (h-display, h1, h2, h3) est posée sur le widget, c'est elle qui décide : le titre hérite alors du conteneur. */ .elementor-widget-heading.h-display .elementor-heading-title, .elementor-widget-heading.h1 .elementor-heading-title, .elementor-widget-heading.h2 .elementor-heading-title, .elementor-widget-heading.h3 .elementor-heading-title{ font-size:inherit;font-weight:inherit;letter-spacing:inherit; } .elementor-widget-text-editor{color:var(--text-muted);font-family:var(--font-body)} .elementor-widget-text-editor a{color:var(--brand-600);text-decoration:underline} [data-theme="dark"] .elementor-widget-text-editor a{color:var(--brand-400)} /* Boutons : le style Elementor est neutralisé pour laisser parler nos classes */ .elementor-widget-button .elementor-button{ font-family:var(--font-display);font-weight:600;border-radius:999px; padding:.9rem 1.6rem;font-size:.94rem;line-height:1.4; transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease); } .elementor-widget-button .elementor-button:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)} .elementor-widget-button.btn-primary .elementor-button{background:var(--accent-500);color:#1A1206} .elementor-widget-button.btn-primary .elementor-button:hover{background:var(--accent-600);color:#fff} .elementor-widget-button.btn-brand .elementor-button{background:var(--brand-600);color:#fff} .elementor-widget-button.btn-ghost .elementor-button{background:transparent;color:var(--text);border:1px solid var(--border-strong)} .elementor-widget-button.btn-ghost .elementor-button:hover{border-color:var(--brand-500);color:var(--brand-600)} .section--dark .elementor-widget-button.btn-ghost .elementor-button, .hero .elementor-widget-button.btn-ghost .elementor-button{color:#fff;border-color:rgba(255,255,255,.4)} .section--dark .elementor-widget-button.btn-ghost .elementor-button:hover, .hero .elementor-widget-button.btn-ghost .elementor-button:hover{border-color:#fff;background:rgba(255,255,255,.12)} /* Accordéon natif, utilisé pour la FAQ */ .elementor-accordion .elementor-accordion-item{ border:1px solid var(--border);border-radius:var(--radius); background:var(--surface);margin-bottom:.75rem;overflow:hidden; } .elementor-accordion .elementor-tab-title{ font-family:var(--font-display);font-weight:600;font-size:1rem; padding:1.15rem 1.35rem;border:0;color:var(--text); } .elementor-accordion .elementor-tab-title.elementor-active{color:var(--brand-600)} [data-theme="dark"] .elementor-accordion .elementor-tab-title.elementor-active{color:var(--brand-400)} .elementor-accordion .elementor-tab-content{ border:0;padding:0 1.35rem 1.35rem;color:var(--text-muted);font-size:.95rem; } .elementor-accordion .elementor-accordion-icon{color:var(--brand-600)} .section--dark .elementor-accordion .elementor-accordion-icon{color:var(--brand-400)} /* Témoignages natifs */ .elementor-testimonial-wrapper{ background:var(--surface);border:1px solid var(--border); border-radius:var(--radius-lg);padding:clamp(1.5rem,3vw,2rem);height:100%; } .elementor-testimonial-content{ font-family:var(--font-display);font-weight:400;font-size:1.02rem; line-height:1.6;color:var(--text); } .elementor-testimonial-name{font-family:var(--font-display);font-weight:600;color:var(--text)} .elementor-testimonial-job{color:var(--text-muted);font-size:.86rem} /* Listes à puces natives */ .elementor-icon-list-item{color:var(--text-muted);font-size:.92rem} .elementor-icon-list-icon svg,.elementor-icon-list-icon i{color:var(--accent-500)} /* Images */ .elementor-widget-image img{border-radius:var(--radius-lg)} .elementor-widget-image.img-plain img{border-radius:0} .elementor-widget-image.img-shadow img{box-shadow:var(--shadow-lg)} /* ------------------------------------- 4. Hero piloté par Elementor L'image de fond se règle dans l'éditeur (onglet Style du conteneur). Le voile dégradé reste ici : il garantit la lisibilité quelle que soit la photo choisie. */ .e-con.hero{ position:relative;isolation:isolate;overflow:hidden; min-height:min(86vh,700px); --padding-block-start:clamp(3.5rem,9vw,6.5rem); --padding-block-end:clamp(3.5rem,9vw,6.5rem); --justify-content:center; color:#F2F7FC; } .e-con.hero::before{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background: linear-gradient(102deg,rgba(4,14,26,.95) 0%,rgba(4,14,26,.88) 34%,rgba(4,14,26,.6) 66%,rgba(4,14,26,.42) 100%), linear-gradient(180deg,rgba(4,14,26,.5) 0%,rgba(4,14,26,.18) 42%,rgba(4,14,26,.72) 100%); } .e-con.hero>.e-con-inner{max-width:var(--container)} .e-con.hero .elementor-heading-title{color:#fff} .e-con.hero .elementor-widget-text-editor{color:rgba(255,255,255,.78)} .e-con.hero .stat__num{color:#fff} .e-con.hero .stat__label{color:rgba(255,255,255,.68)} .e-con.hero .hero__proof{border-top-color:rgba(255,255,255,.2)} .e-con.hero .pill{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22);color:rgba(255,255,255,.86);box-shadow:none} .e-con.hero .pill b{background:var(--accent-500);color:#1A1206} .e-con.hero .title-accent{color:var(--brand-400)} /* La colonne de texte du hero ne dépasse jamais la moitié gauche en grand écran */ .hero__inner{max-width:46rem} /* ------------------------------------- 5. Styles anciennement en ligne */ .footer__newsletter{margin-top:1.4rem;gap:.6rem} .footer__newsletter label{color:#9FB4CA;font-size:.85rem} .footer__newsletter-row{display:flex;gap:.5rem;flex-wrap:wrap} .footer__newsletter input{ flex:1;min-width:11rem;padding:.7rem .9rem;border-radius:999px; border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#fff; } .footer__newsletter input::placeholder{color:rgba(255,255,255,.45)} .footer__newsletter .btn{padding:.7rem 1.2rem} .footer__newsletter small{color:#9FB4CA;font-size:.8rem} .footer__legal{display:flex;flex-wrap:wrap;gap:.35rem 1rem;align-items:center;list-style:none;margin:0;padding:0} .footer__legal li{position:relative;padding-right:1rem} .footer__legal li::after{content:"·";position:absolute;right:0;color:#5C738C} .footer__legal li:last-child{padding-right:0} .footer__legal li:last-child::after{content:none} /* ------------------------------------- 6. Menus WordPress wp_nav_menu rend des