/* Correctifs et compléments du thème (hors fichiers de la maquette v2.1) */

/* Newsletter Lùkla Pulse : formulaire WPForms présenté comme la maquette v2.1 (champ e-mail + bouton sur une ligne) */
.l21-news-box .wpforms-container.l21-wpf-news{margin:clamp(.8rem,1.6vw,1.1rem) 0 0!important}
.l21-news-box .l21-wpf-news .wpforms-form{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start}
.l21-news-box .l21-wpf-news .wpforms-field-container{flex:1 1 260px;min-width:0}
.l21-news-box .l21-wpf-news .wpforms-field{padding:0!important;margin:0!important}
.l21-news-box .l21-wpf-news input[type=email]{width:100%!important;max-width:none!important;height:auto!important;min-height:52px;padding:0 20px!important;border-radius:999px!important;border:1px solid #cfc2e6!important;background:#fff!important;box-shadow:none!important;font:500 1rem/1 Gantari,sans-serif!important;color:#1f1a2e!important}
.l21-news-box .l21-wpf-news input[type=email]:focus-visible,.l21-news-box .l21-wpf-news .wpforms-submit:focus-visible{outline:3px solid #6814af;outline-offset:2px}
.l21-news-box .l21-wpf-news .wpforms-submit-container{flex:0 0 auto;padding:0!important;margin:0!important}
.l21-news-box .l21-wpf-news .wpforms-submit.oc-cta{min-height:52px;height:auto!important}
.l21-news-box .l21-wpf-news label.wpforms-error{margin-top:6px;font-size:.85rem}
.l21-news-box .wpforms-confirmation-container-full{margin:0!important;padding:0!important;border:0!important;background:none!important;font-weight:700;color:#1b7a3a!important}
html[data-theme="dark"] .l21-news-box .l21-wpf-news input[type=email]{background:#1f1830!important;border-color:#5a4a80!important;color:#fff!important}
html[data-theme="dark"] .l21-news-box .wpforms-confirmation-container-full{color:#8ee3a8!important}

/* Ligne « pulse » du bandeau Lùkla Pulse : avec vector-effect:non-scaling-stroke, le tiret (pathLength 1) est mesuré
   sur la longueur affichée, plus longue que le dessin dès que le bandeau dépasse 1200 px : la ligne s'arrêtait avant
   le bord droit. Tiret et décalage doublés : la ligne couvre toute la largeur jusqu'à 2400 px de bandeau. */
.l21-pulse .pl-line path{stroke-dasharray:2 2;animation-name:plDrawFull}
@keyframes plDrawFull{from{stroke-dashoffset:2}to{stroke-dashoffset:0}}

/* Barre de recherche (actualités, références) : même largeur que la grille de cartes (la maquette la limitait à 1240 px, centrée) */
.wp-block-query > .l21-search.l21-sbar,.l21-search.l21-sbar{max-width:none!important;margin-left:0!important;margin-right:0!important;width:100%;box-sizing:border-box}

/* Blocs éditables : couleurs portées par la position (la maquette les mettait en style en ligne) */
.oc-tl-track>li:nth-child(8n+1){--dot:#eb7eff}.oc-tl-track>li:nth-child(8n+2){--dot:#9100e9}.oc-tl-track>li:nth-child(8n+3){--dot:#ff9f8f}.oc-tl-track>li:nth-child(8n+4){--dot:#6874fe}
.oc-tl-track>li:nth-child(8n+5){--dot:#d0267d}.oc-tl-track>li:nth-child(8n+6){--dot:#ff7e13}.oc-tl-track>li:nth-child(8n+7){--dot:#ffcf00}.oc-tl-track>li:nth-child(8n+8){--dot:#4512f1}
.l21-pillars li:nth-child(4n+1){--g:linear-gradient(135deg,#f05ea8,#ffa493)}.l21-pillars li:nth-child(4n+2){--g:linear-gradient(135deg,#a10098,#f05ea8)}
.l21-pillars li:nth-child(4n+3){--g:linear-gradient(135deg,#ff8100,#ffd000)}.l21-pillars li:nth-child(4n+4){--g:linear-gradient(135deg,#8300e0,#a700ff)}

/* Sélecteur de langue WPML de pied de page : remplacé par celui du header (absent de la maquette) */
.wpml-ls-statics-footer{display:none}

/* Page agence : contenu libre de la fiche, entre « Expertises » et « Notre approche » */
.l21-ag .ag-txt{margin:0 0 clamp(3rem,6vw,5rem);line-height:1.7;color:#2b2440}
.l21-ag .ag-txt>*{margin-top:0;margin-bottom:.9rem}
.l21-ag .ag-txt :is(h2,h3,h4){margin:1.8rem 0 .6rem}
.l21-ag .ag-txt>:first-child{margin-top:0}
.l21-ag .ag-txt h2{font-size:clamp(1.35rem,2.4vw,1.8rem)}
.l21-ag .ag-txt :is(h3,h4){font:800 1.2rem/1.3 Gantari,sans-serif;color:#1d0f4a}
.l21-ag .ag-txt :is(ul,ol){padding-left:1.2rem}
.l21-ag .ag-txt img{max-width:100%;height:auto;border-radius:20px}
html[data-theme="dark"] .l21-ag .ag-txt{color:#e4dcf3}
html[data-theme="dark"] .l21-ag .ag-txt :is(h3,h4){color:#fff}
/* Carrousel des agences : photos de même hauteur (images à la une de proportions variées), zone et nom collés sous la photo */
.l21-agsl .oc-slide .ph{display:block;aspect-ratio:254/262}
.l21-agsl .oc-slide .city{margin:10px 0 2px 4px}
.l21-agsl .oc-slide .name{margin-left:4px}
/* Carrousel de labels (galerie « Carrousel de labels ») : cartes de même hauteur, lien facultatif */
.l21-labels-car .oc-track{align-items:stretch;padding:8px 4px 24px}
.l21-labels-car .oc-slide>a{display:block;height:100%;text-decoration:none;color:inherit}
.l21-labels-car .lab{height:100%;box-sizing:border-box}
/* Offre « Nos écosystèmes & partenaires » : logos seuls (sans légende), centrés dans des cartes de même hauteur */
.l21-part-card{align-items:center;justify-content:center;min-height:110px;box-sizing:border-box}
.l21-part-card img{height:48px;max-width:180px}
html[data-theme="dark"] .l21-part-card img{height:56px}
/* Agence : composition « Agence – Cartes d'atouts » (Groupe .ag-hum › Titre, Paragraphe .ag-lead, Groupe .ag-hum-cards › Groupes .ag-hum-card) : design de la section .ag-hum de la maquette */
.l21-ag .ag-hum>*{margin-block:0}
.l21-ag .ag-hum>h2{margin-bottom:.8rem}
.l21-ag .ag-hum>.ag-lead{margin:0 auto 1.6rem}
.l21-ag .ag-hum-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;text-align:left}
.l21-ag .ag-hum-cards>.ag-hum-card{margin:0;padding:18px 20px;border-radius:18px;background:#fff7f2;box-shadow:inset 0 0 0 1px rgba(255,129,0,.14);display:flex;flex-direction:column;gap:.4rem}
.l21-ag .ag-hum-card>*{margin:0}
.l21-ag .ag-hum-card h3{font:800 1.05rem/1.2 Gantari,sans-serif;color:#1d0f4a}
/* font-size : la règle générale « main p:not(…) » de la maquette est plus spécifique */
.l21-ag .ag-hum-card p{font-size:.93rem!important;line-height:1.5;color:#3d3650}
html[data-theme="dark"] .l21-ag .ag-hum-cards>.ag-hum-card{background:#2a1f48}
html[data-theme="dark"] .l21-ag .ag-hum-card h3{color:#fff}
html[data-theme="dark"] .l21-ag .ag-hum-card p{color:#e4dcf3}

/* Page agence : icône de l'offre dans le carré coloré */
.l21-ag .ag-off-grid .dot{display:grid;place-items:center}
.l21-ag .ag-off-grid .dot img{width:24px;height:24px;display:block}
/* Page agence : composition « Notre approche », colonnes alignées en haut */
.l21-ag .ag-why>*{margin-block:0}
.l21-ag .ag-why-h>*:last-child{margin-bottom:0}
/* Page agence : composition « Expertises », colonnes alignées en haut */
.l21-ag .ag-off>*{margin-block:0}
/* Page agence : prise de rendez-vous centrée, marge intérieure comprise dans la largeur */
.l21-ag .l21-rdv-ag{box-sizing:border-box;margin:0 auto clamp(3rem,6vw,5rem)}
/* Page agence : composition « Titre », même style que le nom de l'agence (partie surlignée en dégradé) */
.l21-ag .ag-ttl{margin:0 0 clamp(1.5rem,3vw,2.5rem)}
.l21-ag .ag-ttl h2{margin:0!important;font:900 italic clamp(2.3rem,4.4vw,3.6rem)/1.05 Gantari,sans-serif!important;color:#1d0f4a!important}
@media (max-width:560px){.l21-ag .ag-ttl h2{font-size:clamp(1.9rem,8vw,2.3rem)!important}}
html[data-theme="dark"] .l21-ag .ag-ttl h2{color:#fff!important}

/* Liens dans les paragraphes : gras, indigo clair (hors paragraphes sur fond coloré, en blanc ou dont la couleur des liens est choisie dans l’éditeur) */
main p:not(.has-background,.has-white-color,.has-link-color) a:not([class]){font-weight:700;color:var(--wp--preset--color--light-indigo)!important}
html[data-theme="dark"] main p:not(.has-background,.has-white-color,.has-link-color) a:not([class]){color:#d6a8ff!important}

/* Article et référence client : bouton « Toutes nos … » non repris par le style des cartes « Découvrir plus » */
.l21-art .art-more .art-acts .oc-cta{display:inline-flex;flex-direction:row;height:auto;border-radius:80px;overflow:visible;background:var(--oc-purple);box-shadow:none;color:#fff!important}
.l21-art .art-more .art-acts .oc-cta:hover{transform:none;background:#fff;color:var(--oc-purple)!important}

/* Référence client : présentation de l'article, corps plus large pour les colonnes image + texte */
.l21-ref .art-body{max-width:1040px}
.l21-ref .art-ph{background:#fff}
.l21-ref .art-ph img{object-fit:contain;padding:clamp(16px,4vw,48px);box-sizing:border-box}
.l21-ref .art-more .ph{background:#fff;border-bottom:1px solid #eee8f5}
.l21-ref .art-more .ph img{object-fit:contain;padding:18px;box-sizing:border-box}
.l21-ref .art-body .section-title{align-items:flex-start!important;margin:2.4rem 0 .9rem!important}
.l21-ref .art-body .section-title h2{margin:0!important;text-align:left!important;font:800 clamp(1.5rem,2.6vw,2rem)/1.2 Gantari,sans-serif!important;text-transform:none!important;color:#1d0f4a!important}
.l21-ref .art-body .section-title h2::before,.l21-ref .art-body .section-title h2::after{display:none!important}
.l21-ref .art-body > :first-child{margin-top:0!important}
html[data-theme="dark"] .l21-ref .art-body .section-title h2{color:#fff!important}

/* Menu principal : ouverture des sous-menus au survol, quel que soit le type de pointeur.
   WordPress 7.0 limite cette règle à @media (hover: hover) : sur Edge / PC à écran tactile (hover: none), les sous-menus ne s'ouvraient plus. */
.wp-block-navigation .has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container{height:auto;min-width:200px;opacity:1;overflow:visible;visibility:visible;width:auto}

/* Menu mobile : l'effet « verre » de l'en-tête au défilement (backdrop-filter) faisait de l'en-tête le cadre du menu en position fixe :
   ouvert après défilement, le menu ne faisait que la hauteur de l'en-tête (≈ 70 px) avec un ascenseur horizontal. On coupe l'effet tant que le menu est ouvert. */
html.has-modal-open header.wp-block-template-part,
header.wp-block-template-part:has(.wp-block-navigation__responsive-container.is-menu-open){-webkit-backdrop-filter:none!important;backdrop-filter:none!important;transition:none!important} /* sans transition : sinon le menu reste 0,35 s enfermé dans l'en-tête */
/* Menu mobile ouvert : la largeur mini des sous-menus du bureau (330 px + marges) débordait de l'écran (ascenseur horizontal) */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container{min-width:0!important;max-width:100%;box-sizing:border-box}
.wp-block-navigation__responsive-container.is-menu-open .l3-lang{width:auto!important;max-width:calc(100% - 18px);box-sizing:border-box} /* bloc Langue : largeur 100 % + marges = 18 px de trop */