/* LE PIED DE PAGE COMMUN (scripts/footer.mjs ; cahier d'Hakim, 11 oct.) : quatre colonnes à l'ordinateur —
   l'identité, Nos créations, Informations utiles, Votre projet —, puis, après un filet fin, le droit d'auteur et les
   liens légaux. Petits titres en capitales de 12 px, liens de 14 px, zones tactiles de 40 px au téléphone. Les
   intitulés longs passent à la ligne d'eux-mêmes. */
.site-footer{padding:40px 6% 18px;background:#fff;border-top:1px solid var(--line);font-weight:400}
.site-footer .footer-layout,.site-footer .footer-bottom{max-width:1100px;margin-inline:auto}
.footer-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.25fr) minmax(0,1fr) minmax(0,1.2fr);grid-template-areas:"identite creations infos projet";gap:28px 36px;align-items:start}
.footer-brand{grid-area:identite}.footer-creations{grid-area:creations}.footer-infos{grid-area:infos}.footer-projet{grid-area:projet}
.footer-layout>*{min-width:0}
.site-footer .footer-logo,.site-footer .footer-logo img{display:block;width:96px;height:96px;object-fit:contain}
.footer-brand>p{margin:14px 0 6px;font-size:.875rem;line-height:1.65;color:var(--muted)}
.site-footer .footer-heading{font-family:var(--sans);font-size:.75rem;font-weight:500;line-height:1.5;letter-spacing:.12em;text-transform:uppercase;color:var(--doux);margin:0 0 10px}
.footer-titre-tel{display:none}
.footer-layout ul{list-style:none;margin:0;padding:0}
.footer-layout nav a{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding-block:4px;font-size:.875rem;line-height:1.45}
.footer-maison{display:flex;flex-direction:column;align-items:flex-start}
.footer-socials{display:flex;flex-wrap:wrap;gap:0 18px}
.footer-socials svg{flex:none}
.site-footer a{border-radius:0;text-decoration:none;text-underline-offset:5px;text-decoration-thickness:1px}
.site-footer a:hover,.site-footer a:focus-visible{text-decoration:underline}
.site-footer .footer-logo:hover,.site-footer .button:hover,.site-footer .button:focus-visible{text-decoration:none}

/* VOTRE PROJET : le petit intitulé, le titre, la phrase, le bouton noir — l'action principale —, puis deux liens
   discrets. */
.footer-projet-titre{margin:0 0 8px;font-size:clamp(1.5rem,.8vw + 1.1rem,1.9rem);line-height:1.1}
.footer-projet-texte{margin:0 0 16px;font-size:.875rem;line-height:1.65;color:var(--muted)}
.site-footer .footer-soumission{display:flex;width:100%;max-width:280px;min-width:0;min-height:51px;padding:13px 20px;font-size:.9375rem;line-height:1.4;color:#fff}
.footer-projet-liens{display:flex;flex-wrap:wrap;gap:0 20px;margin-top:6px}
.footer-layout .footer-projet-liens a{color:var(--doux)}

/* LA DERNIÈRE RANGÉE, sous un filet fin : le droit d'auteur à gauche, les liens légaux à droite. */
.site-footer .footer-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 16px;margin-top:28px;padding-top:10px;border-top:1px solid var(--line);font-size:.8125rem;line-height:1.6;color:var(--muted)}
.site-footer .footer-bottom nav{display:flex;flex-wrap:wrap;gap:0 22px}
.site-footer .footer-bottom a{display:inline-flex;align-items:center;min-height:36px}

/* Tablette : deux colonnes — l'identité et Votre projet, puis Nos créations et Informations utiles. */
@media(max-width:1050px){
 .footer-layout{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"identite projet" "creations infos";gap:30px 40px}
}

/* Téléphone : Votre projet d'abord, puis l'identité, puis Nos créations et Informations utiles, qui se replient (le
   bouton de leur titre, avec son +, dit s'il est ouvert ; app.js), puis la dernière rangée. Sans script, les deux
   listes restent ouvertes. */
@media(max-width:759.98px){
 .site-footer{padding:28px 6% 14px}
 .footer-layout{grid-template-columns:minmax(0,1fr);grid-template-areas:"projet" "identite" "creations" "infos";gap:0}
 .footer-projet{padding-bottom:22px}
 .site-footer .footer-soumission{max-width:none}
 .footer-layout .footer-projet-liens a{min-height:44px}
 .footer-brand{display:grid;grid-template-columns:72px minmax(0,1fr);gap:0 16px;align-items:center;padding:18px 0;border-top:1px solid var(--line)}
 .site-footer .footer-logo{grid-row:1/span 2}
 .site-footer .footer-logo,.site-footer .footer-logo img{width:72px;height:72px}
 .footer-brand>p{margin:0 0 2px;line-height:1.55}
 .footer-maison{grid-column:2}
 .footer-layout .footer-maison a{min-height:40px;padding-block:2px}
 .footer-titre-ordi{display:none}
 .site-footer .footer-titre-tel{display:block;margin:0}
 .footer-col{border-top:1px solid var(--line)}
 .footer-repli{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:52px;padding:0;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;text-align:left;cursor:pointer}
 .footer-plus{position:relative;flex:none;width:44px;height:44px;margin-right:-12px}
 .footer-plus::before,.footer-plus::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1px;background:#000;transform:translate(-50%,-50%)}
 .footer-plus::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .15s ease}
 .footer-repli[aria-expanded="true"] .footer-plus::after{transform:translate(-50%,-50%) rotate(0)}
 html.js .footer-col:not(.ouvert)>ul{display:none}
 .footer-col>ul{padding-bottom:10px}
 .footer-layout .footer-col a{min-height:40px}
 .site-footer .footer-bottom{flex-direction:column;align-items:flex-start;gap:0;margin-top:0}
 .site-footer .footer-bottom a{min-height:44px}
}
@media(prefers-reduced-motion:reduce){.footer-plus::after{transition:none}}

/* NOS SECTEURS EN BANDEAU NOIR (demandes d'Hakim, 10 et 11 oct.), sur toutes les pages juste avant le pied de page,
   pleine largeur, moins haut depuis le 11 oct. : le titre à gauche, les villes et la livraison à droite (l'un sous
   l'autre au téléphone). */
.bandeau-secteurs{padding:24px 0 26px;background:#000;color:#fff}
.bandeau-secteurs-dedans{display:grid;gap:12px;width:min(1100px,88%);margin:0 auto}
.bandeau-secteurs .eyebrow{margin:0 0 6px;color:#c9c9c9}
.bandeau-secteurs h2{margin:0;color:#fff;font-size:clamp(1.3rem,.8vw + 1rem,1.75rem);line-height:1.2;text-wrap:balance}
.bandeau-secteurs .service-cities{margin:0;color:#d6d6d6;font-size:.9375rem;line-height:1.7}
.bandeau-secteurs .service-cities strong{font-weight:500;color:#fff}
.bandeau-secteurs .service-delivery-note{margin:6px 0 0;color:#bdbdbd;font-size:.875rem;line-height:1.6}
@media(min-width:900px){.bandeau-secteurs{padding:30px 0 32px}.bandeau-secteurs-dedans{grid-template-columns:minmax(0,1fr) minmax(0,1.45fr);gap:48px;align-items:center}}