/* DJ Djal — reprise de la mise en page de dj-djal.com */
@font-face{font-family:"Audiowide";src:url(../fonts/audiowide-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Lato";src:url(../fonts/lato-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Lato";src:url(../fonts/lato-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Open Sans";src:url(../fonts/opensans-600.woff2) format("woff2");font-weight:600;font-display:swap}

:root{
	--bleu:#005ABB;       /* bandeau lecteur / témoignages */
	--bleu-pied:#0659BA;
	--bleu-bas:#2E86E6;
	--ciel:#5B9BE6;       /* bandeau « Nos services », en-tête des pages */
	--marine:#1C2470;     /* bloc devis */
	--bouton:#2B7DE9;
	--texte:#222;
	--gris:#666;
	--f-titre:"Audiowide","Arial Black",sans-serif;
	--f-texte:"Lato",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
	--f-label:"Open Sans",var(--f-texte);
	--l:min(1210px,100% - 2.5rem);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font:400 1rem/1.7 var(--f-texte);color:var(--texte);background:#fff}
img{max-width:100%;height:auto;display:block}
a{color:var(--bouton)}
a:hover{color:var(--bleu)}
:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 5px var(--bouton)}
h1,h2,h3{font-family:var(--f-titre);font-weight:400;line-height:1.15;margin:0 0 .6em;text-transform:uppercase}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lien-evitement:focus{position:fixed!important;top:.5rem;left:.5rem;width:auto;height:auto;clip:auto;z-index:999;background:#fff;padding:.6rem 1rem}

.bouton{display:inline-block;padding:.7rem 1.9rem;border:0;border-radius:3px;background:var(--bouton);color:#fff;font:400 .95rem/1.2 var(--f-texte);text-decoration:none;cursor:pointer;transition:background .2s}
.bouton:hover{background:var(--bleu);color:#fff}
.bouton--petit{padding:.45rem .9rem;font-size:.85rem}

/* En-tête */
.entete{position:relative;z-index:50;background:#67A7EC;color:#fff;padding-top:118px;border-bottom:1px solid rgba(255,255,255,.3)}
.entete--accueil{position:absolute;inset:0 0 auto;background:transparent}
.entete-logo{position:absolute;top:0;left:50%;transform:translateX(-50%);line-height:0;z-index:2}
.entete-logo a{display:block;line-height:0}
.entete-logo img,.entete-logo .custom-logo{display:block;width:212px;max-width:none;height:auto}
.logo-texte{display:block;padding:1.2rem 0}
.logo-texte{font-family:var(--f-titre);color:var(--bleu);text-decoration:none;font-size:1.3rem}
.entete-reseaux{position:absolute;top:44px;right:2.5rem}
.reseaux{list-style:none;margin:0;padding:0;display:flex;gap:.9rem}
.reseaux a{color:#fff;display:block;padding:.2rem;opacity:.95}
.reseaux a:hover{opacity:1;color:#fff}
.nav .menu{list-style:none;margin:0;padding:0;display:flex;justify-content:center;gap:.4rem}
.nav .menu>li{position:relative;display:flex;align-items:center}
.nav .menu a{display:block;padding:.55rem 1rem;color:#fff;text-decoration:none;font:700 .95rem/1.2 var(--f-texte);letter-spacing:-.01em}
.nav .menu>li>a{position:relative}
.nav .menu>li>a::after{content:"";position:absolute;left:1rem;right:1rem;bottom:.15rem;height:2px;background:#fff;transform:scaleX(0);transition:transform .2s}
.nav .menu>li>a:hover::after,.nav .menu>.current-menu-item>a::after,.nav .menu>.current-menu-ancestor>a::after,.nav .menu>.current_page_item>a::after{transform:scaleX(1)}
.nav .sub-menu,.nav .children{list-style:none;margin:0;padding:.45rem 0;position:absolute;top:calc(100% + 10px);left:50%;min-width:240px;background:var(--bleu);border-radius:6px;box-shadow:0 14px 34px -8px rgba(0,20,60,.55);opacity:0;visibility:hidden;transform:translate(-50%,8px);transition:opacity .18s,transform .18s,visibility .18s;z-index:60}
.nav .sub-menu::before,.nav .children::before{content:"";position:absolute;top:-7px;left:50%;margin-left:-7px;border:7px solid transparent;border-top:0;border-bottom-color:var(--bleu)}
.nav .sub-menu::after,.nav .children::after{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.nav .sub-menu li,.nav .children li{display:block}
.nav .sub-menu li+li,.nav .children li+li{border-top:1px solid rgba(255,255,255,.12)}
.nav .sub-menu a,.nav .children a{position:relative;font:400 .98rem/1.3 var(--f-texte);padding:.75rem 1.4rem;white-space:nowrap;transition:background .15s,padding-left .15s}
.nav .sub-menu a::before,.nav .children a::before{content:"";position:absolute;left:0;top:20%;bottom:20%;width:3px;border-radius:0 2px 2px 0;background:#fff;transform:scaleY(0);transition:transform .15s}
.nav .sub-menu a:hover,.nav .children a:hover,.nav .sub-menu .current-menu-item>a{background:rgba(255,255,255,.1);padding-left:1.7rem}
.nav .sub-menu a:hover::before,.nav .children a:hover::before,.nav .sub-menu .current-menu-item>a::before{transform:scaleY(1)}
.nav li:hover>.sub-menu,.nav li:focus-within>.sub-menu,.nav li:hover>.children,.nav li:focus-within>.children{opacity:1;visibility:visible;transform:translate(-50%,0)}
.sous-menu-bascule,.menu-bascule{display:none}

/* Scène */
.scene{position:relative;min-height:min(100vh,1000px);display:grid;place-items:center;text-align:center;color:#fff;background:#1d1240;overflow:hidden;padding:160px 1.25rem 110px}
.scene-fond{position:absolute;inset:0}
.scene-fond img{width:100%;height:100%;object-fit:cover}
.scene-fond::after{content:"";position:absolute;inset:0;background:rgba(10,5,30,.25)}
.scene-texte{position:relative}
.scene-titre{font-size:clamp(2.8rem,7vw,5.2rem);margin:0 0 .15em;letter-spacing:.02em;text-shadow:0 2px 10px rgba(0,0,0,.35)}
.scene-accroche{font-size:clamp(1.3rem,2.4vw,2.1rem);margin:0;text-shadow:0 2px 8px rgba(0,0,0,.4)}

/* Bandeau bleu : bio, lecteur, témoignages */
.cabine{background:var(--bleu);color:#fff;padding:3rem 0 4.5rem}
.cabine-int{display:grid;grid-template-columns:25% 1fr 26%;gap:2.5rem;align-items:start;padding-right:2.5rem}
.bio-carte{background:#fff;color:var(--texte);text-align:center;padding:0 1.5rem 1.6rem;margin-top:calc(-3rem - 105px);position:relative}
.bio-carte img{width:100%;max-width:300px;margin:0 auto 1.4rem;aspect-ratio:290/300;object-fit:cover}
.bio-titre{font-size:1.15rem;margin:0 0 .8rem;color:#111}
.lecteur{border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.05);padding:.7rem}
.lecteur-tete{display:flex;align-items:center;gap:1rem;min-height:68px;padding:.3rem 0 .6rem}
.lecteur-icone{width:48px;height:62px;background:#9aa1ab;flex:none;clip-path:polygon(0 0,70% 0,100% 22%,100% 100%,0 100%);position:relative}
.lecteur-icone::after{content:"\266B";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:1.7rem}
.lecteur-courant{font-weight:700;font-size:.95rem}
.lecteur-audio{width:100%;height:36px;display:block;margin-bottom:.4rem;filter:invert(1) hue-rotate(180deg) brightness(1.1)}
.lecteur-liste{list-style:none;margin:0;padding:0}
.lecteur-piste{width:100%;display:flex;justify-content:space-between;gap:1rem;padding:.45rem .4rem;background:none;border:0;border-top:1px solid rgba(255,255,255,.22);color:#fff;font:400 .85rem/1.4 var(--f-texte);text-align:left;cursor:pointer}
.lecteur-piste:hover,.lecteur-piste.actif{background:rgba(255,255,255,.08);font-weight:700}
.lecteur-duree{flex:none;font-weight:700}
.temoignages{text-align:center}
.temoignages-titre{font-size:1.75rem;margin:.2rem 0 2rem}
.avis-diapo{margin:0;text-align:left}
.avis-diapo blockquote{margin:0 0 1rem;font-size:.95rem;line-height:1.75}
.avis-diapo blockquote p{margin:0 0 .3em}
.avis-diapo figcaption{text-align:center;font-weight:700;margin-top:1.4rem}
.avis-points{display:flex;justify-content:center;gap:.5rem;margin-top:1rem}
.avis-point{width:10px;height:10px;border-radius:50%;border:0;padding:0;background:rgba(255,255,255,.35);cursor:pointer}
.avis-point.actif{background:#fff}

/* Bandeau Nos services */
.bande-services{position:relative;background:var(--ciel);color:#fff;text-align:center;padding:3rem 1.25rem 3.2rem}
.bande-services::after{content:"";position:absolute;left:50%;bottom:-18px;margin-left:-20px;border:20px solid transparent;border-bottom:0;border-top-color:var(--ciel);border-top-width:18px}
.bande-titre{font-size:clamp(1.8rem,3.5vw,2.5rem);margin:0 0 .6rem}
.bande-texte{margin:0 auto;max-width:900px;font-size:1rem}

/* Grille prestations */
.services{padding:4rem 0 5rem}
.services--page{padding-top:0}
.section-int{width:var(--l);margin:auto}
.section-int--etroit{width:var(--l)}
.devis{max-width:725px;margin:0 auto}
.services-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:4.5rem 4.2rem}
.service-titre{font-size:clamp(1.35rem,2.2vw,2rem);margin:0 0 1.2rem;letter-spacing:.02em}
.service-titre a{color:#000;text-decoration:none}
.service-titre a:hover{color:var(--bleu)}
.service-img{display:block;width:70%;margin:0 auto 1.4rem}
.service-img img{width:100%;aspect-ratio:1;object-fit:cover}
.service-texte{color:var(--gris);font-size:1rem;line-height:1.75}
.service-texte p{margin:0 0 1em}

/* Texte libre */
.texte-accueil{padding:0 0 4rem}
.prose{max-width:none}
.prose h2{font-size:1.7rem;margin-top:1.5em}
.prose h3{font-size:1.3rem;margin-top:1.4em}

/* Devis */
.bloc-devis{position:relative;background:var(--marine);color:#fff;padding:5rem 0 4.5rem}
.bloc-devis::before{content:"";position:absolute;left:50%;top:0;margin-left:-20px;border:20px solid transparent;border-bottom:0;border-top-color:#fff;border-top-width:18px}
.devis-titre{font:600 clamp(1.6rem,3.2vw,2.9rem)/1.2 var(--f-label);text-transform:uppercase;text-align:center;margin:0 0 2rem}
.devis-grille{display:grid;grid-template-columns:1fr 1fr;gap:.55rem}
.champ{margin:0}
.champ--large{grid-column:1/-1}
.champ input,.champ select{font:400 .95rem/1.3 var(--f-texte);width:100%;padding:.85rem 1rem;border:1px solid #e1e1e1;border-radius:0;background:#f8f8f8;color:#444;text-align:center}
.champ select{text-align:left;appearance:auto}
.champ input::placeholder{color:#9a9a9a}
.champ input:focus,.champ select:focus{outline:none;border-color:var(--bouton);background:#fff}
.champ--case{display:flex;align-items:flex-start;gap:.6rem;font-size:.85rem;color:rgba(255,255,255,.85);margin-top:.4rem}
.champ--case input{width:1.1rem;height:1.1rem;margin-top:.15rem;flex:none}
.champ--case a{color:#fff}
.devis-envoi{text-align:center;margin:1rem 0 0}
.devis-envoi .bouton{padding:.95rem 2.8rem}
.devis-miel{position:absolute;left:-9999px}
.devis-retour{padding:.9rem 1.1rem;margin:0 0 1.2rem;font-weight:700;text-align:center}
.devis-retour--succes{background:#e3f7ec;color:#105a31}
.devis-retour--erreur{background:#fde7ef;color:#8a1240}

/* Pages intérieures */
.bandeau{background:var(--ciel);padding:5.5rem 0 3.2rem}
.bandeau-titre{font-size:clamp(2.2rem,5vw,4.2rem);color:#000;margin:0;letter-spacing:.01em}
.bandeau-chapo{color:#000;font-size:1.15rem;margin:.4rem 0 0}
.page-corps{padding:3.5rem 0 4rem}
.page-avec-visuel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:3rem;align-items:start}
.page-visuel,.article-visuel{margin:0 0 2rem}
.cartes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:2.5rem 2rem}
.carte-lien{display:flex;flex-direction:column;color:inherit;text-decoration:none}
.carte-img{display:block;aspect-ratio:4/3;overflow:hidden;margin-bottom:1rem}
.carte-img img{width:100%;height:100%;object-fit:cover}
.carte-titre{font-family:var(--f-titre);text-transform:uppercase;font-size:1.2rem;color:#000}
.carte-texte{color:var(--gris)}
.nav-links{display:flex;gap:.5rem;margin-top:3rem}
.page-numbers{padding:.4rem .8rem;background:#eef3fb;text-decoration:none}
.page-numbers.current{background:var(--bouton);color:#fff}

/* Pied */
.pied{background:var(--bleu-pied);color:#fff;position:relative}
.pied-int{width:var(--l);margin:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;padding:3.8rem 0 4.2rem}
.pied-titre{font:600 1.1rem/1.3 var(--f-label);text-transform:uppercase;letter-spacing:.06em;margin:0 0 .9rem}
.pied ul{list-style:none;margin:0;padding:0}
.pied li{margin:0 0 .55rem}
.pied a{color:#fff;text-decoration:none;font-size:.88rem}
.pied a:hover{text-decoration:underline}
.pied-col p{margin:0 0 .5rem}
.pied-nom{color:#8FB4E6;text-transform:uppercase}
.pied-tel span{color:#8FB4E6}
.pied-tel a,.pied-mail a{font-size:1rem}
.pied-bas{background:var(--bleu-bas);padding:.9rem 0}
.pied-bas p{width:var(--l);margin:auto;font-size:.75rem}
.pied-bas a{font-size:.75rem}
.haut{position:fixed;right:1.2rem;bottom:1.2rem;width:44px;height:44px;border-radius:3px;background:rgba(0,0,0,.35);opacity:0;visibility:hidden;transition:opacity .2s}
.haut::after{content:"";position:absolute;left:50%;top:55%;width:12px;height:12px;border-left:2px solid #fff;border-top:2px solid #fff;transform:translate(-50%,-50%) rotate(45deg)}
.defile .haut{opacity:1;visibility:visible}

/* Responsive */
@media (max-width:1100px){
	.cabine-int{grid-template-columns:1fr 1fr;padding:0 1.25rem}
	.bio-carte{grid-column:1/-1;max-width:340px;justify-self:center}
}
@media (max-width:900px){
	.services-grille{grid-template-columns:repeat(2,1fr);gap:3rem 2.5rem}
	.pied-int{grid-template-columns:repeat(2,1fr)}
	.entete{padding-top:110px;text-align:center}
	.entete-reseaux{top:20px;right:1rem}
	.menu-bascule{display:inline-flex;align-items:center;gap:.6rem;margin:0 auto .6rem;background:none;border:0;color:#fff;font:700 1rem var(--f-texte);cursor:pointer;padding:.5rem 1rem}
	.menu-bascule-barres,.menu-bascule-barres::before,.menu-bascule-barres::after{display:block;width:22px;height:2px;background:#fff;position:relative}
	.menu-bascule-barres::before,.menu-bascule-barres::after{content:"";position:absolute;left:0}
	.menu-bascule-barres::before{top:-7px}.menu-bascule-barres::after{top:7px}
	.nav{display:none;background:var(--bleu);text-align:left}
	.menu-ouvert .nav{display:block}
	.nav .menu{flex-direction:column;gap:0;padding:.5rem 0}
	.nav .menu>li{flex-wrap:wrap}
	.nav .menu>li>a{flex:1;padding:.8rem 1.25rem}
	.nav .menu>li>a::after{display:none}
	.nav .sub-menu,.nav .children{position:static;flex-basis:100%;opacity:1;visibility:visible;transform:none;box-shadow:none;border-radius:0;min-width:0;background:rgba(0,0,0,.15);display:none}
	.nav .sub-menu::before,.nav .children::before,.nav .sub-menu::after,.nav .children::after{display:none}
	.nav .sub-menu a:hover,.nav .children a:hover{padding-left:2.2rem}
	.nav li.ouvert>.sub-menu,.nav li.ouvert>.children{display:block}
	.nav .sub-menu a{padding-left:2.2rem}
	.sous-menu-bascule{display:block;width:48px;height:44px;background:none;border:0;cursor:pointer;position:relative}
	.sous-menu-bascule::after{content:"";position:absolute;top:50%;left:50%;width:8px;height:8px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:translate(-50%,-70%) rotate(45deg)}
	.ouvert>.sous-menu-bascule::after{transform:translate(-50%,-30%) rotate(-135deg)}
	.entete--accueil .nav{position:absolute;left:0;right:0}
	.page-avec-visuel{grid-template-columns:1fr}
}
@media (max-width:640px){
	.services-grille,.pied-int,.cabine-int{grid-template-columns:1fr}
	.devis-grille{grid-template-columns:1fr}
	.entete-logo img,.entete-logo .custom-logo{width:170px}
	.entete{padding-top:96px}
	.bandeau{padding:3.5rem 0 2.5rem}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}

/* Contenus repris d'Enfold */
.avc-section{display:flex;flex-wrap:wrap;gap:1.5rem 2.5rem;margin:0 0 2rem}
.avc-col{flex:1 1 100%;min-width:0}
.avc-1-2{flex-basis:calc(50% - 1.25rem)}
.avc-1-3{flex-basis:calc(33.333% - 1.667rem)}
.avc-2-3{flex-basis:calc(66.666% - .833rem)}
.avc-1-4{flex-basis:calc(25% - 1.875rem)}
.avc-3-4{flex-basis:calc(75% - .625rem)}
.avc-1-5{flex-basis:calc(20% - 2rem)}
.avc-2-5{flex-basis:calc(40% - 1.5rem)}
.avc-3-5{flex-basis:calc(60% - 1rem)}
.avc-4-5{flex-basis:calc(80% - .5rem)}
.avc-titre{font-size:clamp(1.3rem,2.4vw,1.9rem);margin:0 0 .8rem}
h2.avc-titre{text-align:center}
.avc-sous-titre{color:var(--gris);margin-top:-.4rem}
.avc-texte h1,.avc-texte h2{font-size:clamp(1.4rem,2.6vw,2rem);text-align:center}
.avc-image{margin:0 0 1.2rem}
.avc-image--center img{margin:0 auto}
.avc-image--right img{margin-left:auto}
.avc-diaporama{margin:0 0 2rem}
.avc-diapo{margin:0 0 1rem}
.avc-diapo figcaption{margin-top:.4rem;color:var(--gris)}
.avc-bouton--center{text-align:center}
.avc-bouton--right{text-align:right}
.avc-trait{border:0;border-top:1px solid #e1e1e1;margin:2rem 0}
.prose .alignleft{float:left;margin:.3rem 1.8rem 1rem 0;max-width:45%}
.prose .alignright{float:right;margin:.3rem 0 1rem 1.8rem;max-width:45%}
.prose .aligncenter{margin:0 auto 1rem}
.prose::after{content:"";display:table;clear:both}
.prose .devis{color:var(--texte)}
.prose .champ--case,.prose .champ--case a{color:var(--texte)}
.prose .lecteur{background:var(--bleu);color:#fff}
@media (max-width:900px){.avc-col{flex-basis:100%}.prose .alignleft,.prose .alignright{float:none;margin:0 0 1rem;max-width:100%}}