/* ==========================================================================
   agencewebdijon.com — feuille de style unique
   Direction : « Rouge direct » — blocs francs, typographie grasse.
   Rouge d'action, noir d'autorité, blanc de clarté.
   ========================================================================== */

:root{
	--rouge:#d62828;
	--rouge-fonce:#ab1d1d;
	--rouge-clair:#fdeceb;
	--rouge-texte:#c11f1f;
	--noir:#111111;
	--blanc:#ffffff;
	--gris-fond:#f4f4f2;
	--gris-ligne:#e0e0dc;
	--gris-txt:#5a5a56;
	--gris-clair:#8a8a84;
	--vert:#1f7a4d;

	--sans:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;

	--h1:clamp(2rem,4.4vw,3.4rem);
	--h2:clamp(1.5rem,2.9vw,2.2rem);
	--h3:1.12rem;
	--corps:1.0625rem;

	--e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px;
	--e6:32px; --e7:48px; --e8:72px; --e9:96px;
	--larg:1200px;
	--gut:clamp(20px,4.5vw,52px);
	--tr:170ms ease;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--blanc);color:var(--noir);font-family:var(--sans);font-size:var(--corps);line-height:1.65;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
p{margin:0 0 1em}
h1,h2,h3,h4{margin:0;line-height:1.1;letter-spacing:-.03em;font-weight:800}
:focus-visible{outline:3px solid var(--rouge);outline-offset:3px}
::selection{background:var(--rouge);color:#fff}

.wrap{max-width:var(--larg);margin:0 auto;padding:0 var(--gut)}
.evit{position:absolute;left:-9999px;background:var(--noir);color:#fff;padding:14px 20px;z-index:400}
.evit:focus{left:16px;top:16px}

/* ---------- Bandeau d'annonce ---------- */
.annonce{background:var(--noir);color:#fff;font-size:.79rem}
.annonce__in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:40px;flex-wrap:wrap}
.annonce strong{color:#fff;font-weight:700}
.annonce span{display:flex;align-items:center;gap:8px}
.annonce__pt{width:6px;height:6px;border-radius:50%;background:var(--rouge);flex:none}

/* ---------- En-tête ---------- */
.tete{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--gris-ligne)}
.tete__in{display:flex;align-items:center;justify-content:space-between;gap:var(--e5);height:78px}
.logo{display:flex;align-items:center;gap:11px;font-weight:800;letter-spacing:-.03em;font-size:1.05rem}
.logo__carre{width:34px;height:34px;background:var(--rouge);border-radius:3px;display:grid;place-items:center;color:#fff;font-size:1.05rem;font-weight:800;letter-spacing:-.05em;flex:none}
.logo small{display:block;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:#6f6f6a;font-weight:600;margin-top:1px}

.menu{display:flex;align-items:center;gap:var(--e5)}
.menu a{font-size:.9rem;font-weight:600;color:var(--noir);padding:8px 0;border-bottom:2px solid transparent;transition:border-color var(--tr),color var(--tr)}
.menu a:hover{color:var(--rouge);border-bottom-color:var(--rouge)}
.menu a[aria-current="page"]{color:var(--rouge);border-bottom-color:var(--rouge)}
.menu .btn{color:#fff}
.menu .tel{display:inline-flex;align-items:center;gap:7px;font-variant-numeric:tabular-nums}

/* Sous-menu des prestations */
.menu__rub{position:relative}
.sous{position:absolute;top:100%;left:-16px;min-width:250px;background:#fff;border:1px solid var(--gris-ligne);
	box-shadow:0 18px 40px -28px rgba(0,0,0,.45);padding:8px;display:none;flex-direction:column}
.menu__rub:hover .sous,.menu__rub:focus-within .sous{display:flex}
.sous a{display:block;padding:10px 12px;border-bottom:0;font-weight:500;font-size:.9rem}
.sous a:hover{background:var(--gris-fond);color:var(--rouge)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 22px;border-radius:3px;
	font-family:var(--sans);font-size:.94rem;font-weight:700;border:2px solid transparent;cursor:pointer;
	transition:background var(--tr),color var(--tr),border-color var(--tr)}
.btn--rouge{background:var(--rouge);color:#fff}
.btn--rouge:hover{background:var(--rouge-fonce)}
.btn--noir{background:var(--noir);color:#fff}
.btn--noir:hover{background:var(--rouge)}
.btn--contour{background:transparent;color:var(--noir);border-color:var(--noir)}
.btn--contour:hover{background:var(--noir);color:#fff}

.burger{display:none;width:46px;height:46px;border:1px solid var(--gris-ligne);background:#fff;border-radius:3px;
	align-items:center;justify-content:center;cursor:pointer;color:var(--noir)}
.burger i{width:18px;height:2px;background:currentColor;position:relative}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor}
.burger i::before{top:-6px}.burger i::after{top:6px}

/* ---------- Bandeau de page ---------- */
.hero-page{padding:clamp(28px,4vw,52px) 0 clamp(24px,3vw,36px);border-bottom:1px solid var(--gris-ligne);background:var(--gris-fond)}
.ariane{font-size:.8rem;color:var(--gris-txt);margin-bottom:var(--e3);display:flex;gap:8px;flex-wrap:wrap}
.ariane a{color:var(--gris-txt);text-decoration:underline;text-underline-offset:3px}
.ariane a:hover{color:var(--rouge)}
.hero-page h1{font-size:var(--h1);max-width:22ch}
.hero-page__chapo{margin-top:var(--e4);font-size:1.1rem;color:var(--gris-txt);max-width:62ch;line-height:1.55}
.hero-page--large{padding:clamp(40px,6vw,84px) 0 clamp(32px,4vw,48px)}
.hero-page--large h1{font-size:clamp(2.3rem,5.4vw,4.4rem)}

/* ---------- Contenu éditorial ---------- */
.contenu{padding:clamp(32px,4vw,56px) var(--gut) var(--e9);max-width:920px}
.contenu h2{font-size:var(--h2);margin:var(--e7) 0 var(--e4);letter-spacing:-.03em}
.contenu h2:first-child{margin-top:0}
.contenu h3{font-size:1.12rem;font-weight:700;margin:var(--e5) 0 var(--e2);letter-spacing:-.02em}
.contenu p{color:#2a2a28;max-width:74ch}
.contenu ul,.contenu ol{color:#2a2a28;padding-left:1.2em;margin:0 0 var(--e4);max-width:74ch}
.contenu li{margin-bottom:.4em}
.contenu a{color:var(--rouge-texte);text-decoration:underline;text-underline-offset:3px}
.contenu a:hover{color:var(--noir)}
.contenu strong{font-weight:700}
.contenu .note{font-size:.85rem;color:var(--gris-txt);margin-top:var(--e4)}

/* Encadré d'appel */
.encart{background:var(--gris-fond);border-left:4px solid var(--rouge);padding:var(--e5);margin:var(--e6) 0;max-width:74ch}
.encart p:last-child{margin-bottom:0}
.encart strong{color:var(--noir)}

/* Liste de communes */
.villes{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--gris-ligne);margin:var(--e4) 0 var(--e6)}
.villes li{border-bottom:1px solid var(--gris-ligne)}
.villes a{display:block;padding:14px 0;font-weight:600;font-size:.95rem;color:var(--noir)}
.villes a:hover{color:var(--rouge)}

/* ---------- Prestations ---------- */
.serv{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--e4);margin:var(--e6) 0}
.svc{background:#fff;border:1px solid var(--gris-ligne);border-radius:3px;padding:var(--e5);transition:border-color var(--tr),transform var(--tr)}
.svc:hover{border-color:var(--noir);transform:translateY(-3px)}
.svc__t{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.svc__n{width:26px;height:26px;flex:none;background:var(--rouge-clair);color:var(--rouge-texte);border-radius:2px;
	display:grid;place-items:center;font-size:.7rem;font-weight:800}
.svc h3{font-size:1rem;letter-spacing:-.02em;font-weight:700;margin:0}
.svc p{font-size:.87rem;color:var(--gris-txt);line-height:1.5;margin:0}

/* ---------- Chiffres ---------- */
.preuves{background:var(--noir);color:#fff;padding:clamp(28px,4vw,44px) 0;margin:var(--e8) 0}
.preuves__g{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,3vw,40px)}
.preuve__v{font-size:clamp(1.05rem,1.5vw,1.3rem);font-weight:800;letter-spacing:-.02em;line-height:1.15;margin:0}
.preuve__l{font-size:.78rem;color:#b4b4ae;margin-top:6px;line-height:1.35;margin-bottom:0}

/* ---------- Tarifs ---------- */
.tab{width:100%;border-collapse:collapse;margin:var(--e5) 0 var(--e4)}
.tab th,.tab td{text-align:left;padding:16px 14px;border-bottom:1px solid var(--gris-ligne);vertical-align:top}
.tab thead th{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gris-txt);font-weight:800;border-bottom:2px solid var(--noir)}
.tab tbody th{font-weight:700;font-size:1rem;width:30%}
.tab .prix{font-weight:800;white-space:nowrap}
.tab td{font-size:.9rem;color:var(--gris-txt)}
.tab tbody tr:hover td,.tab tbody tr:hover th{background:var(--gris-fond)}

/* ---------- Étapes ---------- */
.et{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--e4);margin:var(--e6) 0}
.etape{border-top:3px solid var(--noir);padding-top:var(--e4)}
.etape__n{font-size:2.1rem;font-weight:800;letter-spacing:-.05em;color:var(--rouge-texte);line-height:1;margin-bottom:10px}
.etape h3{font-size:.96rem;font-weight:700;letter-spacing:-.02em;margin-bottom:6px}
.etape p{font-size:.85rem;color:var(--gris-txt);line-height:1.45;margin:0}

/* ---------- FAQ ---------- */
.faq{margin:var(--e5) 0 var(--e7);max-width:820px}
.faq details{border-bottom:1px solid var(--gris-ligne)}
.faq details:first-of-type{border-top:1px solid var(--noir)}
.faq summary{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;padding:18px 0;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{font-size:.98rem;font-weight:700;letter-spacing:-.015em;margin:0}
.faq summary i{flex:none;width:20px;height:20px;background:var(--rouge-clair);color:var(--rouge-texte);border-radius:2px;
	display:grid;place-items:center;font-style:normal;font-weight:800;font-size:.9rem;transition:background var(--tr),color var(--tr)}
.faq details[open] summary i{background:var(--rouge);color:#fff}
.faq p{padding:0 0 20px;font-size:.92rem;color:var(--gris-txt);max-width:66ch;margin:0}

/* ---------- Réalisations ---------- */
.rea{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e4);margin:var(--e6) 0}
.rz{border:1px solid var(--gris-ligne);border-radius:3px;overflow:hidden;background:#fff;transition:border-color var(--tr)}
.rz:hover{border-color:var(--noir)}
.rz__v{aspect-ratio:4/3;position:relative;display:flex;align-items:flex-end;padding:14px}
.rz__v--1{background:linear-gradient(145deg,#efe5d3,#c2a679 65%,#8d6d3e)}
.rz__v--2{background:linear-gradient(145deg,#dfe8e4,#93b1a4 65%,#5a7d6e)}
.rz__v--3{background:linear-gradient(145deg,#ece2e0,#c2a29d 65%,#8a625c)}
.rz__tag{background:rgba(17,17,17,.85);color:#fff;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;padding:5px 9px;border-radius:2px;font-weight:700}
.rz__t{padding:var(--e4)}
.rz__t h3{font-size:1rem;font-weight:700;letter-spacing:-.02em;margin-bottom:2px}
.rz__t p{font-size:.82rem;color:var(--gris-txt);margin:0}

/* ---------- Comparatif ---------- */
.comp{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--gris-ligne);border-radius:3px;overflow:hidden;background:#fff;margin:var(--e6) 0}
.comp__c{padding:var(--e5)}
.comp__c--g{background:var(--gris-fond);border-right:1px solid var(--gris-ligne)}
.comp__t{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:800;margin-bottom:var(--e4);display:flex;align-items:center;gap:8px}
.comp__c--g .comp__t{color:#6f6f6a}
.comp__c--d .comp__t{color:var(--rouge-texte)}
.comp ul{list-style:none;margin:0;padding:0}
.comp li{display:grid;grid-template-columns:20px 1fr;gap:10px;padding:12px 0;border-top:1px solid var(--gris-ligne);font-size:.92rem;color:#2a2a28}
.comp li:first-child{border-top:0;padding-top:0}
.comp svg{flex:none;margin-top:3px}
.comp__c--g svg{color:var(--gris-clair)}
.comp__c--d svg{color:var(--vert)}

/* ---------- Formulaire ---------- */
.form{background:var(--gris-fond);border-radius:3px;padding:clamp(24px,3vw,40px);margin:var(--e6) 0}
.form h3{font-size:1.3rem;margin-bottom:6px}
.form__a{font-size:.85rem;color:var(--gris-txt);margin-bottom:var(--e5)}
.gr{display:grid;grid-template-columns:1fr 1fr;gap:var(--e4)}
.ch{display:flex;flex-direction:column;gap:6px}
.ch--l{grid-column:1/-1}
.ch label{font-size:.78rem;font-weight:700;color:var(--noir)}
.ch input,.ch select,.ch textarea{font-family:var(--sans);font-size:.94rem;color:var(--noir);background:#fff;
	border:1px solid #cfcfc9;border-radius:3px;padding:11px 12px;min-height:46px;width:100%;transition:border-color var(--tr)}
.ch textarea{min-height:92px;resize:vertical}
.ch input:hover,.ch select:hover,.ch textarea:hover{border-color:var(--gris-clair)}
.ch input:focus,.ch select:focus,.ch textarea:focus{border-color:var(--rouge);outline:2px solid rgba(214,40,40,.16)}
.champ--erreur input,.champ--erreur select,.champ--erreur textarea{border-color:var(--rouge)}
.champ__erreur{font-size:.76rem;color:var(--rouge-texte);font-weight:600}
.form__p{display:flex;flex-wrap:wrap;gap:var(--e4);align-items:center;margin-top:var(--e5)}
.form__p .btn{flex:1 1 200px}
.form__n{font-size:.74rem;color:var(--gris-txt);flex:1 1 200px;margin:0}

.alerte{padding:14px 16px;border-radius:3px;font-size:.9rem;margin-bottom:var(--e4)}
.alerte--ok{background:#e8f5ee;color:#145c39;border-left:4px solid var(--vert)}

/* ---------- Pied de page ---------- */
.pied{background:var(--noir);color:#a8a8a2;padding:var(--e8) 0 var(--e5);font-size:.85rem;margin-top:var(--e8)}
.pied__g{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:var(--e6);padding-bottom:var(--e6);border-bottom:1px solid #2a2a2a}
.pied h4{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:var(--e4);font-weight:800}
.pied ul{list-style:none;margin:0;padding:0}
.pied li{padding:4px 0}
.pied a:hover{color:#fff}
.pied__l{display:flex;align-items:center;gap:10px;color:#fff;font-weight:800;font-size:1rem;margin-bottom:var(--e4)}
.pied__b{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:var(--e5);color:#8f8f89}

/* ---------- Bandeau de mesure d'audience ---------- */
.bandeau-mesure{position:fixed;left:0;right:0;bottom:0;z-index:300;background:#fff;border-top:2px solid var(--noir);
	box-shadow:0 -18px 40px -30px rgba(0,0,0,.45);padding:var(--e4) var(--gut);display:flex;gap:var(--e5);
	align-items:center;justify-content:space-between;flex-wrap:wrap}
.bandeau-mesure__texte{flex:1 1 420px;font-size:.85rem;color:var(--gris-txt);line-height:1.45}
.bandeau-mesure__texte p{margin:0 0 4px}
.bandeau-mesure__texte p:first-child{color:var(--noir);font-size:.9rem}
.bandeau-mesure__texte a{color:var(--rouge-texte);text-decoration:underline}
.bandeau-mesure__actions{display:flex;gap:10px;flex-wrap:wrap}
.bandeau-mesure[hidden]{display:none}
@media (max-width:640px){.bandeau-mesure{padding:var(--e4)}.bandeau-mesure__actions{width:100%}
	.bandeau-mesure__actions .btn{flex:1}}

/* ---------- Retour en haut ---------- */
.retour-haut{position:fixed;right:20px;bottom:20px;width:46px;height:46px;border-radius:3px;background:var(--noir);
	color:#fff;display:grid;place-items:center;font-size:1.2rem;z-index:90;opacity:0;transition:opacity var(--tr),background var(--tr)}
.retour-haut:hover{background:var(--rouge)}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
	.serv{grid-template-columns:repeat(2,1fr)}
	.et{grid-template-columns:repeat(3,1fr);gap:var(--e5)}
	.preuves__g{grid-template-columns:repeat(2,1fr);gap:var(--e5)}
	.villes{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:980px){
	.menu{position:fixed;inset:118px 0 auto;flex-direction:column;align-items:stretch;gap:0;background:#fff;
		border-bottom:1px solid var(--gris-ligne);padding:8px var(--gut) 20px;transform:translateY(-10px);opacity:0;
		visibility:hidden;transition:opacity var(--tr),transform var(--tr),visibility var(--tr);
		box-shadow:0 20px 40px -30px rgba(0,0,0,.4);max-height:80vh;overflow:auto}
	.menu.ouv{opacity:1;visibility:visible;transform:none}
	.menu a{padding:15px 0;border-bottom:1px solid var(--gris-ligne)}
	.menu .btn{margin-top:14px}
	.menu__rub{display:block}
	.sous{position:static;display:flex;border:0;box-shadow:none;padding:0 0 0 12px;min-width:0}
	.sous a{font-size:.9rem;color:var(--gris-txt)}
	.burger{display:flex}
	.contenu{padding-left:var(--gut);padding-right:var(--gut)}
	.comp{grid-template-columns:1fr}
	.comp__c--g{border-right:0;border-bottom:1px solid var(--gris-ligne)}
	.rea{grid-template-columns:1fr 1fr}
	.pied__g{grid-template-columns:1fr 1fr}
	.tab thead{display:none}
	.tab,.tab tbody,.tab tr,.tab th,.tab td{display:block;width:100%}
	.tab tr{padding:14px 0;border-bottom:1px solid var(--gris-ligne)}
	.tab th,.tab td{border:0;padding:2px 0}
	.tab tbody th{width:auto}
}
@media (max-width:640px){
	:root{--e9:64px;--e8:52px}
	.gr{grid-template-columns:1fr}
	.rea,.et,.serv,.villes{grid-template-columns:1fr}
	.pied__g{grid-template-columns:1fr}
	.annonce__in{justify-content:center;text-align:center;padding:6px 0}
	.annonce__in span:last-child{display:none}
	.tete__in{height:70px}
	.menu{inset:110px 0 auto}
	.contenu .encart{padding:var(--e4)}
}

@media (prefers-reduced-motion:reduce){
	html{scroll-behavior:auto}
	*{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* ---------- Impression ---------- */
@media print{
	.annonce,.tete,.pied,.form,.burger{display:none}
	body{font-size:11pt}
	.contenu{max-width:none;padding:0}
}