.elementor-kit-4{--e-global-color-primary:#0d0e13;--e-global-color-secondary:#5b5d66;--e-global-color-text:#5b5d66;--e-global-color-accent:#1212ff;--e-global-typography-primary-font-family:"Satoshi";--e-global-typography-primary-font-weight:300;--e-global-typography-secondary-font-family:"Satoshi";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Satoshi";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Satoshi";--e-global-typography-accent-font-weight:500;}.elementor-kit-4 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:960px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:760px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}:root { --font-sans:Satoshi; --font-serif:Cormorant Garamond; --bg:#f8f8f8; --white:#ffffff; --ink:#0d0e13; --ink-2:#5b5d66; --ink-3:#9a9ca4; --line:#e4e2de; --blue:#1212ff; --on-blue:#ffffff; --sand:#e0ccbb; --sand-muted:rgba(224,204,187,0.6); --blue-mark:rgba(18,18,255,0.08); --space-10:10px; --space-12:12px; --space-20:20px; --space-28:28px; --space-44:44px; --space-72:72px; --space-96:96px; --space-168:168px; --nav-height:76px; --content-max:1360px; --radius-focus:4px; --radius-frame:10px; --radius-card:12px; --radius-panel:18px; --radius-stack:24px; --radius-pill:999px; --size-intro-title:clamp(56px, 9.4vw, 140px); --size-display:clamp(38px, 5.2vw, 84px); --size-hero:clamp(34px, 4.6vw, 76px); --size-marquee:clamp(56px, 9vw, 150px); --size-figure:clamp(40px, 4vw, 60px); --size-title-l:clamp(28px, 3.4vw, 52px); --size-title-m:38px; --size-title-s:19px; --size-quote:23px; --size-faq:18px; --size-lede:17px; --size-body:16px; --size-small:15px; --size-button:15px; --size-label:13px; --size-logo-ali:23px; --size-logo-aboudou:28px; --size-quote-mark:440px; }
/* Start custom CSS *//* ali/aboudou — ce que les classes globales d'Elementor 4 ne savent pas porter (S10, étape 3).
   Les variables (--ink, --space-10…) et les classes (.btn, .tag…) sont sur le site, aux noms de la charte ;
   cette feuille, posée dans le CSS personnalisé du site (Elementor Pro), ajoute seulement :
   pseudo-éléments, sélecteurs descendants, survols réservés aux souris, focus clavier, états posés
   par le script, mouvement réduit et thème contraste. Source : charte/components/bundle.css et charte/tokens.css. */
:root{
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-io:cubic-bezier(.77,0,.175,1);
  --ease-soft:cubic-bezier(.16,1,.3,1);
  --ease-titre:cubic-bezier(0,.202,.204,1);   /* « M0,0 C0,0.202 0.204,1 1,1 » d'exoape.com : les lignes de titre */
}
body{background:var(--bg);color:var(--ink);font-family:var(--font-sans),system-ui,sans-serif;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:var(--radius-focus)}
/* un lien dans un texte : Elementor le remet à zéro (.e-paragraph-base a{outline:unset}), plus fort que la règle ci-dessus */
html .elementor :is(.e-paragraph-base,.e-heading-base) a:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:var(--radius-focus)}

/* Liens et lien d'évitement de Hello Elementor (rose #c36, gris #eee) : aux couleurs de la charte, comme .skip
   de la maquette. Les classes (.elementor .btn, 0,2,0) l'emportent toujours sur ces règles (audit S10). */
a,a:hover,a:active{color:inherit}
.skip-link.screen-reader-text:focus{left:16px;top:12px;z-index:120;padding:12px 20px;border-radius:999px;background:var(--white);color:var(--ink);
  font-size:15px;font-weight:500;line-height:normal;border:1px solid var(--line)}

/* Logo ali/aboudou (G2) : « ali » et « aboudou » sont dans le même titre */
.logo b{font-weight:500}
.logo em{font-family:var(--font-serif),Georgia,serif;font-style:italic;font-weight:500;font-size:1.22em;letter-spacing:-.01em}
.logo--foot .logo-sep{color:var(--sand-muted)}

/* Survols : souris seulement */
@media (hover:hover) and (pointer:fine){
  .btn--blue:hover{background:var(--ink)}
  .btn--line:hover{border-color:var(--ink)}
  .btn-o:hover{background:var(--ink);color:var(--bg)}
  /* le texte du bouton est un paragraphe Elementor qui porte sa propre couleur : il restait noir sur noir (12/11/2026) */
  html .elementor .btn-o:hover *,html .btn-o:hover *{color:var(--bg)}
  .choice:hover{border-color:var(--blue);color:var(--blue)}
  .ul:hover::after{transform:scaleX(0);transform-origin:right center}
  .ul-in:hover::after{transform:scaleX(1);transform-origin:left center}
}

/* Étiquette de section : la barre oblique rappelle le logo */
.tag::before{content:"/";font-weight:300;color:var(--ink-3);margin-right:-2px}

/* Pilule choisie (posée par le script) */
.choice.on,.choice[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:var(--on-blue)}

/* Lien souligné animé */
.ul::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1px;background:currentColor;
  transform:scaleX(1);transform-origin:left center;transition:transform .6s cubic-bezier(1,0,0,1)}
.ul-in::after{transform:scaleX(0);transform-origin:right center}

/* Offres côte à côte */
.price + .price{padding-left:36px;border-left:1px solid var(--line)}
.price__num{font-variant-numeric:tabular-nums}
.price__num small{font-size:.32em;letter-spacing:0;color:var(--ink-2);margin-left:6px}

/* FAQ : l'accordéon natif d'Elementor rend des <details> */
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;padding:24px 0;font-size:18px;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{flex:none;width:14px;height:14px;position:relative;margin-top:7px}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:0;top:6px;width:14px;height:1px;background:var(--ink);transition:transform .25s var(--ease-out)}
.faq summary i::after{transform:rotate(90deg)}
.faq details[open] summary i::after{transform:rotate(0)}
.faq details p{padding:0 40px 26px 0;margin:0;color:var(--ink-2);max-width:62ch}

/* Avis */
.q__by b{color:var(--ink);font-weight:500}

/* Étapes de méthode (posé par le script) */
.rstep:last-child{padding-bottom:0}
.rstep.on,html .elementor .rstep.on{opacity:1}   /* plus fort que la classe globale « .elementor .rstep » (0,28), chargée après (12/11) */

/* Apparitions (ali-motion.js) : lignes masquées et fondu, seulement sous html.js-motion ;
   .d-1 à .d-3 posent --d, le retard */
/* chaque ligne reste une ligne même sans mouvement (sinon « votre site,une question » : le <br> a été remplacé) */
.lines .ln{display:block}
.js-motion .lines .ln{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
/* chaque ligne monte d'une hauteur en se redressant de 7° (pivot en haut à gauche) et passe de transparente à opaque, 1 s ;
   relevé sur exoape.com, choisi par Ali le 05/11/2026 (maquette : base.css) ; 0,1 s d'écart entre lignes (ali-motion.js) */
.js-motion .lines .ln > span{display:inline-block;transform:translateY(100%) rotate(7deg);transform-origin:top left;opacity:0;
  transition:transform 1s var(--ease-titre),opacity 1s var(--ease-titre)}
.js-motion .is-in .ln > span,.js-motion .lines.is-in .ln > span{transform:none;opacity:1}
.js-motion .fade{opacity:0;transform:translateY(20px);transition:opacity .9s var(--ease-soft),transform 1.1s var(--ease-soft);transition-delay:var(--d,0s)}
.js-motion .is-in .fade,.js-motion .fade.is-in{opacity:1;transform:none}
/* L'en-tête des pages intérieures (.phead) n'attend pas les scripts : son fondu part au premier affichage, en CSS, avec
   la même courbe et les mêmes retards. Sa réponse est le plus grand texte de l'écran, celui que mesure le LCP (S11, étape 7). */
@keyframes ali-fade{from{opacity:0;transform:translateY(20px)}}
.js-motion .phead .fade{opacity:1;transform:none;animation:ali-fade 1.1s var(--ease-soft) var(--d,0s) both}
/* La place des dessins d'en-tête est réservée dès le HTML (--hl-ratio, posé par charte.php), seulement quand JavaScript
   tourne : sans lui, pas de dessin, et pas de boîte vide (S11, fin de sprint). */
html.js .elementor .ill .hl{aspect-ratio:var(--hl-ratio,auto)}

/* Thème contraste du module d'accessibilité (A-29) : mêmes noms, autres valeurs */
[data-theme="contraste"]{
  --bg:#ffffff;--white:#ffffff;--ink:#000000;--ink-2:#2e2f36;--ink-3:#4a4c55;--line:#6b6d76;
  --blue:#1212ff;--on-blue:#ffffff;--sand:#f2e6db;--sand-muted:#f2e6db;--blue-mark:rgba(18,18,255,0.08);
}

/* En-tête et pied de page du site (S11, parties du site de Pro) : ce que les styles locaux ne savent pas porter.
   Sous 860 px, le menu ne garde que « Prendre rendez-vous », comme dans la maquette (.nav__links). */
@media (max-width:860px){.elementor-location-header nav .ul{display:none}}
.elementor-location-footer :focus-visible,html .elementor-location-footer :is(.e-paragraph-base,.e-heading-base) a:focus-visible{outline-color:var(--sand)}
.elementor .logo--foot .logo-sep{color:var(--sand-muted)}
/* La barre est fixe : les pages de Hello (404, recherche, archives) commencent sous elle, en attendant leur gabarit */
.error404 #content,.search #content,.archive #content{padding-top:calc(var(--nav-height) + var(--space-44))}

/* Accueil, écran 2 (S11) : la phrase en classe .mots ; ses mots-clés en <em> passent au bleu,
   ses <br> ne coupent que sur ordinateur (sur mobile, la phrase passe à la ligne d'elle-même) */
.mots em{font-style:italic;color:var(--blue)}
@media (max-width:760px){.mots br{display:none}}

/* Accueil, réalisations : la piste .defile boucle une fois copiée par ali-motion.js (is-dup), pause au survol ;
   en mouvement réduit ou en pause du module, elle reste immobile */
html.js-motion .defile.is-dup{animation:marq 60s linear infinite}
@media (hover:hover){.defile:hover{animation-play-state:paused}}
@keyframes marq{to{transform:translateX(-50%)}}
/* Logos clients : tous en encre (Elementor écrit brightness(0px), valeur invalide : le filtre est posé ici) ;
   sur mobile, deux colonnes séparées par un filet, logos réduits à 82 % (zoom : la place est rendue), comme dans la maquette */
html .elementor .logo-client{filter:brightness(0)}
@media (hover:hover) and (pointer:fine){html .elementor .logo-client:hover{opacity:.85}}
@media (max-width:640px){
  html .elementor .logos-rang{display:grid;grid-template-columns:repeat(2,1fr);gap:0;row-gap:0;border-top:1px solid var(--line)}
  html .elementor .logos-rang .logo-client{justify-self:center;align-self:center;margin:calc(22px / .82) 0;zoom:.82}
  html .elementor .e-con:has(> * > .logos-rang){padding-bottom:72px}
}

/* Accueil, Méthode : l'étape au centre s'allume (accueil.js) ; sans mouvement, toutes restent allumées ; sur téléphone aussi, elles s'allument au défilement (Ali, 12/11).
   L'en-tête de la section reste collé pendant les étapes, sauf sur un écran bas où il ne tiendrait pas */
html:not(.js-motion) .elementor .rstep{opacity:1}
@media (min-width:961px) and (max-height:879px){html .elementor .recipe__head{position:static}}

/* Accueil, études de cas : sous 560 px, les repères l'un sous l'autre, pour que « Multilingue » tienne (A-50) */
@media (max-width:560px){html .elementor .case__kpi{flex-direction:column;gap:18px}}

/* Accueil, agences : sous 560 px, la précision passe sous l'intitulé */
@media (max-width:560px){html .elementor .ag__row{flex-direction:column;gap:4px;padding:16px 0}html .elementor .ag__v{text-align:left}}

/* Accueil, avis : le texte lu est « 5 étoiles sur 5 », les étoiles sont dessinées ici avec un texte de remplacement vide
   (Elementor 4 retire aria-label et aria-hidden) */
.elementor .stars.etoiles{font-size:0}
.elementor .stars.etoiles::before{content:"★★★★★";content:"★★★★★" / "";font-size:var(--size-label);line-height:1.55}

/* Accueil, texte défilant : bords fondus, point bleu entre les desserts ; la piste est copiée et animée par accueil.js */
.mq{-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq__item span{color:var(--blue);padding:0 .3em 0 .05em}

/* FAQ en accordéon natif d'Elementor (<details>) : la croix est dessinée sur le <summary>, sa barre verticale s'efface à l'ouverture */
html .elementor .faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;padding:24px 0;font-size:18px;line-height:1.55;letter-spacing:-.01em;color:var(--ink);text-align:left}
.elementor .faq summary::after{content:"";flex:none;width:14px;height:14px;margin-top:7px;
  background:linear-gradient(var(--ink),var(--ink)) center/14px 1px no-repeat,linear-gradient(var(--ink),var(--ink)) center/1px 14px no-repeat;
  transition:background-size .25s var(--ease-out)}
.elementor .faq details[open] summary::after{background-size:14px 1px,1px 0}
html .elementor .faq details > div{padding:0}
.faq details a{text-decoration:underline;text-underline-offset:3px}

/* Défilement fluide (Lenis) : Hello pose scroll-behavior:smooth sur la page ; Lenis déplace la page image par image et le
   navigateur lisse chacun de ses pas : la page se fige puis saute. Réglage de lenis.css, sans le reste (la maquette n'a pas Hello). */
html.lenis,html.lenis body{height:auto}
html.lenis,html.lenis-smooth{scroll-behavior:auto!important}
html.lenis-stopped{overflow:hidden}

/* Accueil, écran 1 (la question) : posé par-dessus tout le site sous html.js-intro (accueil.js, charte.php) ;
   sans script, il ne s'affiche pas et la page commence à l'écran 2. Dans l'éditeur, il reste dans le flux. */
html:not(.js-intro) body:not(.elementor-editor-active) .intro{display:none}
.js-intro .intro{position:fixed;inset:0;z-index:50;min-height:0}
html.intro-on,html.intro-on body{overflow:hidden}
html.intro-on .elementor-location-header > *{transform:translateY(-100%)}
.elementor-location-header > *{transition:transform .9s var(--ease-soft)}
.intro .choice.on{background:var(--blue);border-color:var(--blue);color:var(--on-blue)}
.intro__drip{flex:none;width:1px;height:28px;background:var(--line);overflow:hidden;position:relative}
.intro__drip::after{content:"";position:absolute;inset:0;background:var(--ink-2);animation:drip 2.2s var(--ease-io) infinite}
@keyframes drip{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}
/* apparition : le portrait s'ouvre en cercle, les lignes montent, les desserts arrivent en fondu */
/* retards de la maquette : l'amorce à .45 s, la question à .6 s, les desserts de .9 à 1,05 s, l'indication à 1,6 s */
.intro__kicker{--d:.45s}.intro__title{--d:.6s}.intro__hint{--d:1.6s}
.intro__choices > :nth-child(1){--d:.9s}.intro__choices > :nth-child(2){--d:.95s}.intro__choices > :nth-child(3){--d:1s}.intro__choices > :nth-child(4){--d:1.05s}
.js-motion .intro .avatar{clip-path:circle(0% at 50% 100%);transition:clip-path 1.2s var(--ease-soft) .15s}
.js-motion .intro .avatar img{transform:scale(1.25);transition:transform 1.6s var(--ease-soft) .15s}
.js-motion .intro.ready .avatar{clip-path:circle(50% at 50% 50%)}
.js-motion .intro.ready .avatar img{transform:none}

/* Le rideau bleu et l'autocollant (créés par accueil.js, décoratifs) */
.ali-wipe{position:fixed;inset:0;z-index:60;background:var(--blue);color:var(--on-blue);display:grid;place-items:center;text-align:center;
  visibility:hidden;clip-path:circle(0px at 50% 50%);will-change:clip-path,transform}
.ali-wipe p{margin:0;overflow:hidden}
.ali-wipe p span{display:inline-block}
.ali-wipe__small{font-size:15px;opacity:.75;margin-bottom:14px!important}
.ali-wipe__big{font-weight:300;font-size:var(--size-intro-title);line-height:1;letter-spacing:-.045em}
.ali-sticker{position:fixed;left:0;top:0;z-index:90;width:64px;height:64px;pointer-events:none;opacity:0;will-change:transform}
.ali-sticker img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 14px rgba(13,14,19,.16));transform:scale(.4) rotate(-20deg);opacity:0}
.ali-sticker.pop{opacity:1}
.ali-sticker.pop img{animation:pop .6s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes pop{to{transform:scale(1) rotate(-6deg);opacity:1}}
@media (hover:none),(max-width:1023px){.ali-sticker{display:none}}

/* Accueil, arrivée d'une autre page du site (html.depuis-le-site, posée dans le <head> par charte.php ; demande d'Ali,
   05/11/2026) : la question est passée, l'écran 2 est rempli dès le premier affichage ; seule la phrase monte, à la fin
   du rideau de la transition entre pages (html.tp-attente, transition.js) */
html.depuis-le-site .intro{visibility:hidden}
html.depuis-le-site .attend .fade{opacity:1;transform:none;transition:none}
html.depuis-le-site .attend .mots .w{opacity:1;transform:none;filter:none}
html.tp-attente .attend .mots{visibility:hidden}
html.tp-attente .attend .mots .w{opacity:0!important;transform:translateY(.35em)!important;filter:blur(8px)!important;transition:none!important}

/* Accueil, écran 2 : la phrase apparaît mot par mot (A-23), les mots-clés passent ensuite au bleu */
.js-motion .attend .mots .w{display:inline-block;opacity:0;transform:translateY(.35em);filter:blur(8px);
  transition:opacity .7s var(--ease-out),transform .7s var(--ease-out),filter .7s var(--ease-out);transition-delay:var(--d,0s)}
.js-motion .attend.is-in .mots .w{opacity:1;transform:none;filter:none}
.js-motion .attend .mots .kw{color:var(--ink)}
.js-motion .attend.is-in .mots .kw{color:var(--blue);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out),filter .7s var(--ease-out),color .5s ease;
  transition-delay:var(--d,0s),var(--d,0s),var(--d,0s),1.3s}

/* Dessins hairline (A-67) : bloc HTML <div class="hl" data-hl="nom" data-vb="…">, monté par hairline.js */
.hl{--hairline-plate:var(--bg);--hairline-hi:var(--blue);--hairline-edge:var(--ink-2);--hairline-mid:var(--ink-3);--hairline-lo:var(--line);--hairline-stroke:1;cursor:crosshair}
.hl--blanc{--hairline-plate:var(--white)}
.hl .hi{--hl-sw:calc(var(--hairline-stroke,1) * 1.8)}
.hl svg{display:block;width:100%;height:auto}

/* Mouvement réduit */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* Pages intérieures (S11, étape 4) : la mise en page de maquette-v6/assets/pages.css pour les pages d'offre, de ville,
   de bassin et les guides. Les classes sont celles de la maquette quand elles existent ; les parties d'un bloc
   (crumbs__i, facts__k…) sont des classes à part, chaque partie étant un élément Elementor. Préfixe « html .elementor » :
   les classes d'Elementor (chargées après ce CSS) l'emporteraient sinon (voir le journal du 01/11). */
:root{--pad:clamp(20px,4.4vw,72px)}
html .elementor .sec{padding:clamp(96px,14vh,168px) 0}
html .elementor .sec--white{background:var(--white)}
html .elementor .wrap{width:100%;max-width:var(--content-max);margin:0 auto;padding:0 var(--pad)}
html .elementor .center{text-align:center}
html .elementor .center .tag{justify-content:center}
html .elementor .tag{margin-bottom:28px}   /* à l'accueil, chaque étiquette porte sa marge ; ici, la classe */

/* En-tête de page */
html .elementor .phead{padding:calc(var(--nav-height) + clamp(48px,9vh,104px)) 0 clamp(72px,10vh,120px)}
html .elementor .phead .wrap{container-type:inline-size}
html .elementor .crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;font-size:13px;color:var(--ink-2);margin-bottom:clamp(40px,7vh,72px)}
html .elementor .crumbs__i{display:inline-block;padding:6px 0}
html .elementor .crumbs__i + .crumbs__i::before{content:"/";color:var(--ink-3);margin-right:8px}
html .elementor .phead__h1{font-weight:300;font-size:clamp(36px,calc(100cqi / (var(--l,20) * .46)),96px);line-height:1.02;letter-spacing:-.04em}
html .elementor .phead__grid{margin-top:clamp(40px,6vh,64px);padding-top:32px;border-top:1px solid var(--line);display:grid;grid-template-columns:1.2fr 1fr;gap:32px var(--pad);align-items:start}
html .elementor .phead__answer{font-size:clamp(18px,1.5vw,21px);line-height:1.5;max-width:46ch}
html .elementor .phead__why{color:var(--ink-2);font-size:15px;max-width:46ch}
html .elementor .phead__ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
html .elementor .facts{margin-top:clamp(48px,7vh,72px);display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
html .elementor .facts__i{padding:24px 24px 0 0}
html .elementor .facts__i + .facts__i{padding-left:24px;border-left:1px solid var(--line)}
html .elementor .facts__k{font-size:13px;color:var(--ink-2);margin-bottom:8px}
html .elementor .facts__big{display:block;font-weight:300;font-size:clamp(28px,2.6vw,38px);letter-spacing:-.04em;line-height:1.05;margin-bottom:4px;font-variant-numeric:tabular-nums}
html .elementor .facts__v{font-size:16px;line-height:1.45}
@media (max-width:960px){
  html .elementor .phead__grid{grid-template-columns:1fr}
  html .elementor .facts{grid-template-columns:1fr 1fr}
  html .elementor .facts__i:nth-child(3){padding-left:0;border-left:0}
  html .elementor .facts__i:nth-child(n+3){margin-top:24px;border-top:1px solid var(--line)}
}
@media (max-width:560px){
  html .elementor .facts{grid-template-columns:1fr}
  html .elementor .facts__i,html .elementor .facts__i + .facts__i{padding:20px 0 0;border-left:0}
  html .elementor .facts__i + .facts__i{margin-top:20px;border-top:1px solid var(--line)}
}

/* Ce qui est compris, déroulé, offres sœurs : colonnes séparées par des filets */
html .elementor .incl{margin-top:64px;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
html .elementor .incl__i{padding:28px 28px 32px 0;border-bottom:1px solid var(--line)}
html .elementor .incl__i:not(:nth-child(4n+1)){padding-left:28px;border-left:1px solid var(--line)}
html .elementor .incl__t{display:block;font-weight:500;font-size:16px;margin-bottom:6px}
html .elementor .incl__x{font-size:14px;color:var(--ink-2)}
html .elementor .excl{margin-top:40px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px 0;font-size:15px}
html .elementor .excl__t{font-weight:500;font-size:16px}
html .elementor .excl__l{grid-column:2 / -1;padding-left:28px;color:var(--ink-2);display:flex;flex-direction:column;gap:10px;max-width:calc(70ch + 28px)}
html .elementor .excl__i{position:relative;padding-left:22px}
html .elementor .excl__i::before{content:"–";color:var(--ink-3);position:absolute;left:0}
html .elementor .proc{margin-top:64px;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
html .elementor .proc__i{padding:28px 28px 0 0}
html .elementor .proc__i + .proc__i{padding-left:28px;border-left:1px solid var(--line)}
html .elementor .proc__n{display:block;font-size:13px;color:var(--blue);margin-bottom:18px;font-variant-numeric:tabular-nums}
html .elementor .proc__t{font-weight:500;font-size:18px;letter-spacing:-.01em;margin-bottom:8px}
html .elementor .proc__x{font-size:15px;color:var(--ink-2)}
html .elementor .sibs{margin-top:56px;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
html .elementor .sibs__i{display:block;height:100%;padding:24px 24px 28px 0}
html .elementor .sibs__i + .sibs__i{padding-left:24px;border-left:1px solid var(--line)}
html .elementor .sibs__t{display:block;font-weight:500;font-size:17px;margin-bottom:6px}
/* la flèche est dessinée ici : Elementor n'admet pas <i> dans un paragraphe (elle y devenait du texte noir, lu « flèche droite ») */
html .elementor .sibs__t::after{content:"→";content:"→" / "";font-style:normal;color:var(--blue);display:inline-block;margin-left:6px;transition:transform .3s var(--ease-out)}
@media (hover:hover) and (pointer:fine){html .elementor .sibs__i:hover .sibs__t::after{transform:translateX(4px)}}
html .elementor .sibs__x{font-size:14px;color:var(--ink-2)}
/* Par où commencer (Services, étape 6) : une situation par ligne, l'offre à droite ; flèche dessinée comme sibs__t */
html .elementor .choose{margin-top:64px;padding:0;border-top:1px solid var(--line)}
html .elementor .choose__i{display:grid;grid-template-columns:1fr 1fr;gap:8px var(--pad);padding:22px 0;align-items:baseline;border-bottom:1px solid var(--line)}
html .elementor .choose__s{font-size:clamp(18px,1.5vw,21px);letter-spacing:-.015em}
html .elementor .choose__b{font-weight:500;font-size:15px}
html .elementor .choose__b::after{content:"→";content:"→" / "";font-style:normal;color:var(--blue);display:inline-block;margin-left:6px;transition:transform .3s var(--ease-out)}
@media (hover:hover) and (pointer:fine){html .elementor .choose__i:hover .choose__b::after{transform:translateX(4px)}}
@media (max-width:760px){html .elementor .choose__i{grid-template-columns:1fr}}
@media (max-width:960px){
  html .elementor :is(.incl){grid-template-columns:1fr 1fr}
  html .elementor .incl__i:not(:nth-child(4n+1)){padding-left:0;border-left:0}
  html .elementor .incl__i:nth-child(even){padding-left:24px;border-left:1px solid var(--line)}
  html .elementor .excl{grid-template-columns:1fr 1fr}
  html .elementor .excl__l{padding-left:24px}
  html .elementor .proc{grid-template-columns:1fr 1fr;row-gap:32px}
  html .elementor .proc__i:nth-child(3){padding-left:0;border-left:0}
  html .elementor .sibs{grid-template-columns:1fr 1fr}
  html .elementor .sibs__i:nth-child(3){padding-left:0;border-left:0}
  html .elementor .sibs__i:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:560px){
  html .elementor .incl,html .elementor .excl,html .elementor .proc,html .elementor .sibs{grid-template-columns:1fr}
  html .elementor .incl__i,html .elementor .incl__i:nth-child(even){padding:20px 0;border-left:0}
  html .elementor .excl__l{grid-column:auto;padding-left:0}
  html .elementor .proc__i,html .elementor .proc__i + .proc__i{padding:24px 0 0;border-left:0}
  html .elementor .proc__i + .proc__i{border-top:1px solid var(--line)}
  html .elementor .sibs__i + .sibs__i{padding-left:0;border-left:0;border-top:1px solid var(--line)}
}

/* Le prix : montant à gauche, exemples en lignes à droite */
html .elementor .pbox{margin-top:64px;display:grid;grid-template-columns:1fr 1.3fr;gap:var(--pad);align-items:start}
html .elementor .pbox__lab{font-size:13px;color:var(--ink-2)}
html .elementor .pbox__amt{display:block;font-weight:300;font-size:clamp(56px,6.4vw,104px);letter-spacing:-.05em;line-height:1;color:var(--ink);margin:10px 0 0;font-variant-numeric:tabular-nums;white-space:nowrap}
html .elementor .pbox__ht{font-size:clamp(13px,1.5vw,21.6px);letter-spacing:0;color:var(--ink-2);margin-left:8px}
html .elementor .pbox__why{margin-top:24px;font-size:15px;color:var(--ink-2);max-width:40ch}
html .elementor .pbox__cap{font-size:13px;color:var(--ink-2);padding-bottom:12px}
html .elementor .pbox__row{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:14px 0;border-top:1px solid var(--line);font-size:15px}
/* lignes : 3 ou 4 selon l'offre ; une ligne sans valeur est masquée, la dernière visible porte le filet du bas */
html .elementor .pbox__row:not(:has(.pbox__val:not(:empty))){display:none}
html .elementor .pbox__row:not(:has(+ .pbox__row .pbox__val:not(:empty))){border-bottom:1px solid var(--line)}
html .elementor .pbox__val{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
html .elementor .pbox__ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
@media (max-width:960px){html .elementor .pbox{grid-template-columns:1fr}}
@media (max-width:420px){html .elementor .pbox__val{white-space:normal}}
/* « Sur devis » (SEO, agences) : sans « HT » après le montant, le montant est plus petit et les valeurs vont à la ligne */
html .elementor .pbox:not(:has(.pbox__ht:not(:empty))) .pbox__amt{font-size:clamp(44px,4.8vw,76px)}
html .elementor .pbox:not(:has(.pbox__ht:not(:empty))) .pbox__val{white-space:normal;padding-left:32px}
/* Réalisations citées par une offre (intégration, boutique) */
html .elementor .refs{margin-top:64px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--pad)}
html .elementor .refs__i{border-top:1px solid var(--line);padding:22px 0 0}   /* un bloc Elementor a 10 px de marge intérieure par défaut */
html .elementor .refs__k{font-size:13px;color:var(--ink-2);margin:0 0 8px}
html .elementor .refs__t{font-weight:500;font-size:19px;letter-spacing:-.01em;margin:0 0 6px}
html .elementor .refs__x{font-size:15px;color:var(--ink-2);margin:0}
@media (max-width:760px){html .elementor .refs{grid-template-columns:1fr;gap:28px}}

/* Réalisations (S9b, A-84 à A-86) : cartes de projet (page Réalisations et pages d'offre), comme .works de pages.css ;
   l'image est un élément natif en position absolue (un bloc Elementor n'a pas de hauteur propre à remplir) */
html .elementor .works{margin-top:64px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:72px var(--pad)}
html .elementor .works--3{grid-template-columns:repeat(3,minmax(0,1fr));gap:64px var(--pad)}
html .elementor .works--1{grid-template-columns:1fr}
html .elementor .works + .works{margin-top:72px}
html .elementor .work{min-width:0;padding:0}
html .elementor .work__img{position:relative;aspect-ratio:16/10;padding:0;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--bg)}
html .elementor .work__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;display:block;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover) and (pointer:fine){html .elementor .work:hover .work__img img{transform:scale(1.025)}}
html .elementor .work__pages{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0}
html .elementor .work__pages > :first-child{grid-column:1 / -1}
html .elementor .work__meta{margin:22px 0 0;font-size:13px;color:var(--ink-2)}
html .elementor .work__t{margin:8px 0 0;font-weight:400;font-size:clamp(24px,2.2vw,30px);letter-spacing:-.025em;line-height:1.15}
html .elementor .works--3 .work__t{font-size:clamp(22px,1.8vw,26px)}
html .elementor .work__txt{margin:8px 0 0;color:var(--ink-2);max-width:48ch}
html .elementor .work__links{margin:14px 0 0;font-size:15px}
html .elementor .work__links a{margin-right:22px}
html .elementor .works--1 .work{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:0 var(--pad);align-items:center}
html .elementor .work__corps{padding:0}
html .elementor .works--1 .work__corps .work__meta{margin-top:0}
@media (max-width:960px){html .elementor .works--3{grid-template-columns:1fr 1fr}}
@media (max-width:760px){html .elementor :is(.works,.works--3){grid-template-columns:1fr;gap:56px}html .elementor .works + .works{margin-top:56px}
  html .elementor .works--1 .work{grid-template-columns:1fr}html .elementor .works--1 .work__corps .work__meta{margin-top:22px}}
@media (prefers-reduced-motion:reduce){html .elementor .work__img img{transition:none}}
/* la page entière défile dans son cadre (Réalisations, A-84) ; realisations.js règle la course et la pause ; à la main en mouvement réduit */
html .elementor .work__defile{cursor:pointer}
html .elementor .work__defile img{inset:auto;top:0;left:0;height:auto;object-fit:initial;transition:none}
html.js .elementor .work__defile img{animation:defile var(--t,20s) cubic-bezier(.45,0,.55,1) .6s infinite alternate both;animation-play-state:paused;will-change:transform}
html.js .elementor .work__defile.vu img{animation-play-state:running}
html.js .elementor .work__defile.vu.pause img{animation-play-state:paused}
@media (hover:hover) and (pointer:fine){html.js .elementor .work__defile.vu:hover img{animation-play-state:paused}html .elementor .work:hover .work__defile img{transform:none}}
@keyframes defile{0%,10%{transform:translateY(0)}90%,100%{transform:translateY(var(--y,0px))}}
html .elementor .work__defile:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
@media (prefers-reduced-motion:reduce){html.js .elementor .work__defile img{animation:none}html .elementor .work__defile{overflow-y:auto;cursor:auto}html .elementor .work__defile img{position:static}}
html[data-a11y-pause] .elementor .work__defile img{animation:none!important;transform:none!important;position:static!important}
html[data-a11y-pause] .elementor .work__defile{overflow-y:auto!important}

/* « Ils m'ont fait confiance » (bande C, Ali 06/11 ; sur téléphone deux colonnes sans filets, Ali 07/11) : accueil, À propos, Agences.
   Chaque logo est dans sa case (.confiance__logo), sa hauteur en --h posée sur la case. */
html .elementor .logos-sec{padding:56px 0 clamp(96px,14vh,168px)}
html .elementor .confiance{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:32px var(--pad);align-items:center}
html .elementor .confiance__phrase{font-weight:300;font-size:clamp(24px,2.4vw,34px);letter-spacing:-.03em;line-height:1.15;margin:0;text-wrap:balance}
html .elementor .confiance__phrase em{font-style:italic;color:var(--blue)}   /* l'italique bleu du site (.b-it), plus le Cormorant (Ali, 06/11) */
html .elementor .confiance__grille{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:0}
/* filets entre les cases seulement, sans contour (Ali, 12/11) */
html .elementor .confiance__logo{display:grid;place-items:center;height:96px;padding:0 12px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
html .elementor .confiance__logo:nth-child(4n){border-right:0}html .elementor .confiance__logo:nth-last-child(-n+4){border-bottom:0}
html .elementor .confiance__logo img{height:var(--h);width:auto;max-width:100%;object-fit:contain;filter:brightness(0);opacity:.55;transition:opacity .4s ease}
@media (hover:hover) and (pointer:fine){html .elementor .confiance__logo img:hover{opacity:.85}}
@media (max-width:760px){html .elementor .confiance{grid-template-columns:1fr}
  html .elementor .confiance__grille{grid-template-columns:repeat(2,1fr);gap:34px 16px;border:0;padding-top:6px}
  html .elementor .confiance__logo{height:40px;padding:0;border:0}html .elementor .confiance__logo img{height:calc(var(--h) * .82)}}
/* sur À propos et Agences, la bande suit l'en-tête : l'alternance des fonds reprend après elle */
html .elementor .logos-sec ~ .sec:not(.faq-sec):nth-child(odd){background:var(--white)}
html .elementor .logos-sec ~ .sec:not(.faq-sec):nth-child(even):not(.sec--white){background:transparent}
html .elementor .logos-sec ~ .cta:nth-child(odd) + .faq-sec{background:var(--white)}
html .elementor .logos-sec ~ .cta:nth-child(even) + .faq-sec{background:transparent}

/* Accueil, études de cas en deux vues (A-84) : l'ordinateur, et une vue en portrait qui le chevauche */
html .elementor .case__dv{position:relative;width:84%;padding:0 0 9% 0}
html .elementor .case__img .dv__a{position:static;display:block;width:84%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:8px;border:1px solid var(--line);background:var(--white)}
html .elementor .case__img .dv__b{position:absolute;inset:auto 0 0 auto;width:27%;height:auto;aspect-ratio:9/16;object-fit:cover;object-position:top;border-radius:12px;border:3px solid var(--white);box-shadow:0 14px 30px -14px rgba(13,14,19,.35)}
/* Études de cas en rangée à balayer (présentation 3, choisie par Ali le 12/11/2026 ; remplace les cartes empilées), comme
   la maquette : la classe globale .case garde la carte collante d'avant (cadre, top), neutralisée ici ; le conteneur des
   cartes est repéré par :has. Compteur et flèches (.ra__barre) ajoutés par accueil.js */
html .elementor .e-con:has(> .case){flex-direction:row;gap:clamp(16px,2vw,28px);overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  scrollbar-width:none;margin:56px calc(var(--pad) * -1) 0;padding:0 var(--pad) 4px;scroll-padding:0 var(--pad);
  width:calc(100% + 2 * var(--pad));max-width:none}
html .elementor .e-con:has(> .case)::-webkit-scrollbar{display:none}
html .elementor .e-con:has(> .case):focus-visible{outline:2px solid var(--blue);outline-offset:4px}
html .elementor .e-con > .case{position:relative;inset:auto;display:block;flex:none;width:min(78vw,520px);scroll-snap-align:start;padding:0;margin:0;border:0;border-radius:0;background:none;box-shadow:none}
html .elementor .case > .case__img{margin-bottom:24px}
html .elementor .case .case__title{font-size:clamp(24px,2.2vw,32px)}
html .elementor .case .case__kpi{gap:32px;margin-top:24px;padding-top:20px}
html .elementor .case .case__kpi-n{font-size:clamp(28px,2.4vw,38px)}
html .elementor .ra__barre{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:48px}
html .elementor .ra__barre + .e-con:has(> .case){margin-top:24px}
html .elementor .ra__compte{font-size:14px;color:var(--ink-2);font-variant-numeric:tabular-nums;margin:0}
html .elementor .ra__fl{display:flex;gap:8px}
html .elementor .ra__fl button{width:48px;height:48px;padding:0;border:1px solid var(--ink);border-radius:999px;background:none;color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:background-color .2s ease,color .2s ease,opacity .2s ease,transform .16s ease}
html .elementor .ra__fl button:disabled{opacity:.3;cursor:default}
html .elementor .ra__fl button:active:not(:disabled){transform:scale(.96)}
@media (hover:hover) and (pointer:fine){html .elementor .ra__fl button:hover:not(:disabled){background:var(--ink);color:var(--bg)}}

/* Appel final */
html .elementor .cta__h2{max-width:14ch;margin:0 auto}
html .elementor .cta__btns{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:44px}
/* Elementor retire la classe d'un <span> du texte : le mot en italique bleu (.b-it) s'écrit <em> dans les titres */
html .elementor :is(.phead__h1,.cta__h2) em{font-style:italic;color:var(--blue)}
/* … et l'insécable (.nw) s'écrit <span> nu : un nom à trait d'union ne se coupe pas au tiret (« Aix- / en-Provence ») */
html .elementor :is(.e-paragraph-base,.e-heading-base) span:not([class]):not(.ln > span){white-space:nowrap}
html .elementor .facts__big:empty{display:none}
/* Fonds en alternance (la maquette : une section sur deux en blanc) : par la position, pas par une classe, pour qu'un
   composant garde le même fond en changeant de place. La FAQ prolonge l'appel final : même fond, sans filet entre eux. */
html .elementor .sec:nth-child(even){background:var(--white)}
html .elementor .sec--white{background:var(--white)}
html .elementor .cta:has(+ .faq-sec){padding-bottom:0}
html .elementor .faq-sec{padding-top:64px;text-align:center;background:var(--white)}
html .elementor .cta:nth-child(odd) + .faq-sec{background:transparent}
html .elementor .faq-sec .faq{margin:0 auto;max-width:780px}
/* Lien dans un texte des pages intérieures : Elementor retire la classe .ul du lien, son soulignement est repris ici */
html .elementor :is(.t-lede,.tools__v,.work__links) a{position:relative;display:inline-block}
html .elementor :is(.t-lede,.tools__v,.work__links) a::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1px;background:currentColor;
  transform:scaleX(1);transform-origin:left center;transition:transform .6s cubic-bezier(1,0,0,1)}
@media (hover:hover){html .elementor :is(.t-lede,.tools__v,.work__links) a:hover::after{transform:scaleX(0);transform-origin:right center}}
html[data-a11y-liens] .elementor :is(.t-lede,.tools__v,.work__links) a::after{display:none}

/* Liste des offres (pages de ville et de bassin) : une ligne par offre, rangées par famille, comme sur Tarifs */
html .elementor .plist{margin-top:64px}
html .elementor .pgroup{display:grid;grid-template-columns:220px 1fr;gap:0 var(--pad);border-top:1px solid var(--line)}
html .elementor .pgroup__t{padding:28px 0;font-weight:300;font-size:clamp(26px,2.2vw,34px);letter-spacing:-.035em;line-height:1.05}
html .elementor .pgroup__rows{display:flex;flex-direction:column}
html .elementor .prow{display:grid;grid-template-columns:1fr auto;gap:8px 48px;padding:28px 0;align-items:baseline}
html .elementor .prow + .prow{border-top:1px solid var(--line)}
html .elementor .prow__name{font-weight:500;font-size:19px;letter-spacing:-.01em}
html .elementor .prow__name::after{content:"→";content:"→" / "";font-style:normal;color:var(--blue);display:inline-block;margin-left:6px;transition:transform .3s var(--ease-out)}
@media (hover:hover) and (pointer:fine){html .elementor .prow:hover .prow__name::after{transform:translateX(4px)}}
html .elementor .prow__desc{grid-column:1;color:var(--ink-2);font-size:15px;max-width:58ch}
html .elementor .prow__amt{grid-column:2;grid-row:1 / span 2;text-align:right;font-size:13px;color:var(--ink-2);white-space:nowrap}
html .elementor .prow__big{display:block;font-weight:300;font-size:clamp(34px,3.2vw,48px);letter-spacing:-.045em;line-height:1;color:var(--ink);margin-top:4px;font-variant-numeric:tabular-nums}
html .elementor .prow__big--quote{font-size:clamp(24px,2.2vw,32px);letter-spacing:-.03em}
html .elementor .prow__small{font-size:clamp(12px,1.1vw,16px);letter-spacing:0;color:var(--ink-2);margin-left:5px}
html .elementor .agency{padding:24px 0;border-top:1px solid var(--line);font-size:15px;color:var(--ink-2)}
html .elementor .agency b{font-weight:500;color:var(--ink);margin-right:6px}
@media (max-width:760px){
  html .elementor .pgroup{grid-template-columns:1fr}
  html .elementor .pgroup__t{padding:28px 0 4px}
  html .elementor .prow{grid-template-columns:1fr;padding:20px 0 24px}
  html .elementor .prow__amt{grid-column:1;grid-row:auto;text-align:left;margin-top:10px}
}

/* En-tête à dessin (villes, bassins) : le dessin (.ill, posé dans la page par le script) prend la colonne de droite sur
   la hauteur du titre et du texte d'accroche ; il n'est pas dans le composant, puisqu'il change à chaque page. */
html .elementor .ill{margin:0;padding:0}
html .elementor .ill .hl{width:100%}
html .elementor .ill__cap{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);max-width:40ch;font-size:13px;line-height:1.5;color:var(--ink-2);text-wrap:balance}
html .elementor .ill__ia{display:block;color:var(--ink-2);text-wrap:nowrap}
@media (min-width:961px){
  html .elementor .phead:has(.ill) .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);column-gap:var(--pad);align-items:start}
  html .elementor .phead:has(.ill) .crumbs,html .elementor .phead:has(.ill) .facts{grid-column:1 / -1}
  html .elementor .phead:has(.ill) .phead__h1{grid-column:1;grid-row:2;font-size:clamp(36px,calc((100cqi - 460px - var(--pad)) / (var(--l,20) * .46)),96px)}
  html .elementor .phead:has(.ill) .ill{grid-column:2;grid-row:2 / span 2;align-self:center}
  html .elementor .phead:has(.ill) .phead__grid{grid-column:1;grid-row:3;grid-template-columns:1fr;gap:24px}
}
@media (max-width:960px){html .elementor .phead .ill{max-width:400px;margin-top:24px}}
html .elementor .sec .t-lede{margin-top:24px;max-width:44ch}
html .elementor .sec .t-lede + .t-lede{margin-top:14px}

/* Les communes d'un bassin : une rangée par secteur (dt à gauche, la liste à droite) */
html .elementor .tools{margin-top:64px;border-top:1px solid var(--line)}
html .elementor .tools__i{display:grid;grid-template-columns:220px 1fr;gap:6px var(--pad);padding:22px 0;border-bottom:1px solid var(--line);align-items:baseline}
html .elementor .tools__k{font-weight:500;font-size:16px}
html .elementor .tools__v{font-size:clamp(18px,1.5vw,21px);letter-spacing:-.015em}
@media (max-width:760px){html .elementor .tools__i{grid-template-columns:1fr}}

/* À propos (étape 6) : la photo ronde à gauche, le parcours à droite ; « Ma façon de travailler » sur trois colonnes */
html .elementor .about,html .elementor .about > *{padding:0}
html .elementor .about{margin-top:64px;display:grid;grid-template-columns:220px minmax(0,1fr);gap:32px var(--pad);align-items:start}
html .elementor .about__ph{width:180px;aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--line)}
html .elementor .about__ph img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 22%}
html .elementor .about .t-lede{margin-top:0;max-width:60ch}
html .elementor .about .t-lede + .t-lede{margin-top:14px}
@media (max-width:760px){html .elementor .about{grid-template-columns:1fr}html .elementor .about__ph{width:140px}}
html .elementor .incl--3{grid-template-columns:repeat(3,1fr)}
html .elementor .incl--3 .incl__i:not(:nth-child(4n+1)){padding-left:0;border-left:0}
html .elementor .incl--3 .incl__i:not(:nth-child(3n+1)){padding-left:28px;border-left:1px solid var(--line)}
@media (max-width:960px){
  html .elementor .incl--3{grid-template-columns:1fr 1fr}
  html .elementor .incl--3 .incl__i:not(:nth-child(3n+1)){padding-left:0;border-left:0}
  html .elementor .incl--3 .incl__i:nth-child(even){padding-left:24px;border-left:1px solid var(--line)}
}
@media (max-width:560px){html .elementor .incl--3{grid-template-columns:1fr}html .elementor .incl--3 .incl__i:nth-child(even){padding-left:0;border-left:0}}

/* Guides : un article WordPress, mis en page par la partie du site « Guide (article) » ; le sommaire (.art__toc) est
   construit par ali-motion.js à partir des H2 du corps. Colonne de lecture et sommaire collant, grille de 220 px des autres pages. */
html .elementor .art{display:grid;grid-template-columns:220px minmax(0,1fr);gap:32px var(--pad);align-items:start}
html .elementor .art__toc{position:sticky;top:100px;font-size:14px}
html .elementor .art__toc:empty{display:none}
html .elementor .art__toc p{font-size:13px;color:var(--ink-2);margin-bottom:12px}
html .elementor .art__toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
html .elementor .art__toc a{display:block;padding:6px 0 6px 16px;color:var(--ink-2);transition:color .2s ease}
@media (hover:hover) and (pointer:fine){html .elementor .art__toc a:hover{color:var(--ink)}}
html .elementor .art__body{max-width:68ch}
/* Pages légales (étape 6) : le texte est fait d'éléments Elementor (pas de <ul>) ; une ligne de liste est un paragraphe .art__li */
html .elementor :is(.art,.art__toc,.art__body){padding:0}
html .elementor .art__body .art__li{position:relative;padding-left:22px}
html .elementor .art__body .art__li::before{content:"–";color:var(--ink-3);position:absolute;left:0}
html .elementor .art__body .art__li + .art__li{margin-top:10px}
html .elementor .art__body :is(p:not(.art__li),h3) + .art__li,html .elementor .art__body .art__li + p:not(.art__li){margin-top:14px}
html .elementor .art__body h2{font-weight:300;font-size:clamp(28px,2.6vw,40px);letter-spacing:-.035em;line-height:1.08;margin:80px 0 20px;scroll-margin-top:96px;text-wrap:balance}
html .elementor .art__body h2:first-child{margin-top:0}
html .elementor .art__body h3{font-weight:500;font-size:18px;letter-spacing:-.01em;margin:36px 0 8px}
html .elementor .art__body p,html .elementor .art__body li{font-size:17px;line-height:1.65}
html .elementor .art__body p + p{margin-top:14px}
html .elementor .art__body ul{list-style:none;margin:14px 0;padding:0;display:flex;flex-direction:column;gap:10px}
html .elementor .art__body li{position:relative;padding-left:22px}
html .elementor .art__body li::before{content:"–";color:var(--ink-3);position:absolute;left:0}
html .elementor .art__body table{width:100%;border-collapse:collapse;font-size:16px;margin:8px 0 24px}
html .elementor .art__body th,html .elementor .art__body td{text-align:left;font-weight:400;padding:14px 0;border-top:1px solid var(--line);vertical-align:baseline}
html .elementor .art__body td{text-align:right;padding-left:24px;font-variant-numeric:tabular-nums}
html .elementor .art__body tr:last-child th,html .elementor .art__body tr:last-child td{border-bottom:1px solid var(--line)}
/* Le corps du guide est le texte de l'article (blocs de WordPress), pas des éléments Elementor : le reset de Hello
   s'y applique (tableau quadrillé et zébré, marges des paragraphes). On le ramène à la maquette (pages.css). */
html .elementor .art__body p{margin:0}
html .elementor .art__body h3{line-height:1.55}
html .elementor .art__body .pbox__ctas{margin-top:36px}
html .elementor .art__body p + p{margin-top:14px}
html .elementor .art__body :is(th,td){border-left:0;border-right:0;line-height:inherit;background:none!important}
html .elementor .art__body td{white-space:nowrap}
@media (max-width:420px){html .elementor .art__body td{white-space:normal}}
html .elementor .art__body caption{text-align:left;font-size:13px;color:var(--ink-2);padding-bottom:12px}
html .elementor .art__body .art__src{margin-top:48px;padding-top:20px;border-top:1px solid var(--line);font-size:14px;line-height:1.75;color:var(--ink-2)}
html .elementor .art__body span:not([class]){white-space:nowrap}
@media (max-width:960px){html .elementor .art{grid-template-columns:1fr}html .elementor .art__toc{position:static}}

/* Pied de page : les trois liens légaux côte à côte (étape 6, comme .foot__links de la maquette) */
html .elementor .foot__links{display:flex;flex-wrap:wrap;gap:8px 24px;padding:0;flex-shrink:0;width:auto}
html .elementor :has(> .foot__links){flex-wrap:wrap;gap:12px 24px}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Satoshi';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url('https://aliaboudou.fr/wp-content/uploads/2026/10/Satoshi-300-normal.woff2') format('woff2');
}
@font-face {
	font-family: 'Satoshi';
	font-style: italic;
	font-weight: 300;
	font-display: swap;
	src: url('https://aliaboudou.fr/wp-content/uploads/2026/10/Satoshi-300-italic.woff2') format('woff2');
}
@font-face {
	font-family: 'Satoshi';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('https://aliaboudou.fr/wp-content/uploads/2026/10/Satoshi-400-normal.woff2') format('woff2');
}
@font-face {
	font-family: 'Satoshi';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('https://aliaboudou.fr/wp-content/uploads/2026/10/Satoshi-400-italic.woff2') format('woff2');
}
@font-face {
	font-family: 'Satoshi';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('https://aliaboudou.fr/wp-content/uploads/2026/10/Satoshi-500-normal.woff2') format('woff2');
}
@font-face {
	font-family: 'Satoshi';
	font-style: italic;
	font-weight: 500;
	font-display: swap;
	src: url('https://aliaboudou.fr/wp-content/uploads/2026/10/Satoshi-500-italic.woff2') format('woff2');
}
@font-face {
	font-family: 'Satoshi';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('https://aliaboudou.fr/wp-content/uploads/2026/10/Satoshi-700-normal.woff2') format('woff2');
}
@font-face {
	font-family: 'Satoshi';
	font-style: italic;
	font-weight: 700;
	font-display: swap;
	src: url('https://aliaboudou.fr/wp-content/uploads/2026/10/Satoshi-700-italic.woff2') format('woff2');
}
/* End Custom Fonts CSS */