/* Composant 1 : l'en-tête. Les soulignés et le bouton de devis sont la vraie peinture du logo :
   la jambe du P couchée à l'horizontale (bleu), et le même pinceau à l'encre du S (rouge). */
/* En se resserrant, l'en-tête garde la même place dans la page (la marge compense les 18 px perdus) : rien ne bouge sous le doigt,
   et le navigateur ne « corrige » pas le défilement (sinon l'en-tête s'ouvrait et se fermait en boucle en haut de page). */
.entete { position: sticky; top: 0; z-index: 50; background: var(--fond); transition: box-shadow 0.25s, margin-bottom 0.3s cubic-bezier(0.2, 0.7, 0.2, 1); }
.entete.colle { box-shadow: 0 1px 0 var(--filet); margin-bottom: 18px; }
.entete__barre {
  display: flex; align-items: center; gap: var(--espace-6); height: 84px; max-width: 1440px; margin: 0 auto;
  padding-left: max(var(--espace-7), env(safe-area-inset-left, 0px)); padding-right: max(var(--espace-7), env(safe-area-inset-right, 0px));
  transition: height 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.entete.colle .entete__barre { height: 66px; }

/* La marque : monogramme + nom en Arvo (règle de la charte pour les bandes étroites). */
.marque { display: grid; grid-template-columns: auto auto; column-gap: 12px; align-items: center; text-decoration: none; flex: none; }
.marque img { grid-row: 1 / 3; height: 44px; width: auto; transition: height 0.3s; }
.entete.colle .marque img { height: 38px; }
.marque__nom { font-family: var(--font-titre); font-weight: 700; font-size: 19px; line-height: 22px; align-self: end; white-space: nowrap; }
.marque__lieu { font-size: 12.5px; line-height: 16px; color: var(--texte-doux); align-self: start; white-space: nowrap; }

/* Navigation : un coup de pinceau bleu se peint sous le lien survolé, de gauche à droite. */
.nav { display: flex; align-items: center; gap: var(--espace-5); margin-left: auto; }
.nav ul { display: flex; align-items: center; gap: 22px; list-style: none; margin: 0; padding: 0; }
.nav a { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 10px 0; text-decoration: none; font-size: 15.5px; font-weight: 500; white-space: nowrap; }
.nav a::after, .menu-mobile__liens a::after {
  content: ""; position: absolute; left: -6px; right: -8px; bottom: 0; height: 12px;
  background: url(/assets/img/pinceau-bleu.webp) center / 100% 100% no-repeat;
  clip-path: inset(0 100% 0 0); transition: clip-path 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
  pointer-events: none;
}
.nav a:hover::after, .nav a:focus-visible::after, .nav a[aria-current="page"]::after, .nav a.demo-survol::after { clip-path: inset(0 0 0 0); }
.nav__marques { padding-left: 22px; border-left: 1px solid var(--filet); }

/* Les marques sœurs portent leur matière : une diode allumée, une bande rétroréfléchissante. */
.diode { flex: none; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff 0 22%, #9cc8ff 45%, #2b6cff 78%); box-shadow: 0 0 0 1px rgba(12, 77, 219, 0.25), 0 0 7px 2px rgba(64, 140, 255, 0.5); transition: box-shadow 0.3s; }
a:hover .diode { box-shadow: 0 0 0 1px rgba(12, 77, 219, 0.3), 0 0 12px 4px rgba(64, 140, 255, 0.75); }
.bande { flex: none; width: 15px; height: 10px; border-radius: 1px; background: linear-gradient(#dceb1e 0 28%, #b9bfc5 28% 40%, #f6f8fa 40% 60%, #b9bfc5 60% 72%, #dceb1e 72%); box-shadow: inset 0 0 0 1px rgba(10, 10, 11, 0.1); }

.entete__droite { display: flex; align-items: center; gap: var(--espace-5); flex: none; }
.langues { display: flex; gap: 12px; font-size: 14px; }
.langues a { text-decoration: none; color: var(--texte-doux); padding: 6px 1px; }
.langues a[aria-current] { color: var(--texte); font-weight: 600; }
.langues a[lang="ar"] { font-family: var(--font-arabe); }

/* Le bouton de devis : un coup de pinceau rouge, texte noir (au moins 4,7:1 sur toute la texture). */
.devis { position: relative; isolation: isolate; display: inline-flex; align-items: center; height: 48px; padding: 0 26px; text-decoration: none; font-weight: 600; font-size: 15px; color: var(--sur-action); white-space: nowrap; }
.devis::before { content: ""; position: absolute; inset: -5px -14px -4px -12px; z-index: -1; background: url(/assets/img/pinceau-rouge.webp) center / 100% 100% no-repeat; transform-origin: 0 50%; transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
.devis:hover::before, .devis.demo-survol::before { transform: scaleX(1.07); }
.devis .fleche { display: inline-block; margin-left: 8px; transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
.devis:hover .fleche, .devis.demo-survol .fleche { transform: translateX(4px); }
.devis .court { display: none; }

/* Bouton du menu : le double trait du M ; ouvert, les deux traits se croisent. */
.menu { display: none; align-items: center; gap: 10px; height: 44px; padding: 0 4px; background: none; border: 0; font: inherit; font-size: 15px; font-weight: 500; color: var(--texte); cursor: pointer; }
.menu__traits { position: relative; width: 22px; height: 20px; }
.menu__traits i { position: absolute; left: -1px; width: 24px; height: 2.6px; background: currentColor; transform: rotate(var(--angle-double-trait)); transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), top 0.35s; }
/* Deux traits parallèles, décalés perpendiculairement à leur pente (comme les deux traits du M). */
.menu__traits i:first-child { top: 6.5px; left: 1.5px; }
.menu__traits i:last-child { top: 11.5px; left: -3.5px; }
.menu[aria-expanded="true"] .menu__traits i:first-child { top: 8.5px; left: -1px; }
.menu[aria-expanded="true"] .menu__traits i:last-child { top: 8.5px; left: -1px; transform: rotate(calc(-1 * var(--angle-double-trait))); }

/* Menu du téléphone : une feuille de papier qui se déroule depuis l'en-tête. */
.menu-mobile { position: fixed; left: 0; right: 0; top: var(--haut-entete, 66px); bottom: 0; z-index: 49; overflow: auto; background: var(--fond);
  padding: var(--espace-6) max(var(--espace-4), env(safe-area-inset-right, 0px)) var(--espace-7) max(var(--espace-4), env(safe-area-inset-left, 0px));
  clip-path: inset(0 0 100% 0); transition: clip-path 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
.menu-mobile.ouvert { clip-path: inset(0 0 0 0); }
.menu-mobile__liens { list-style: none; margin: 0; padding: 0; }
.menu-mobile__liens li { border-bottom: 1px solid var(--filet); }
.menu-mobile__liens a { position: relative; display: flex; align-items: center; gap: 12px; padding: 16px 0 14px; font-family: var(--font-titre); font-weight: 700; font-size: 30px; line-height: 36px; text-decoration: none; width: fit-content; }
.menu-mobile__liens a::after { bottom: 8px; height: 11px; }
.menu-mobile__liens a:hover::after, .menu-mobile__liens a:focus-visible::after { clip-path: inset(0 0 0 0); }
.menu-mobile__liens .diode { width: 10px; height: 10px; }
.menu-mobile__liens .bande { width: 20px; height: 13px; }
.menu-mobile__pied { display: grid; gap: var(--espace-4); margin-top: var(--espace-6); font-size: 15px; color: var(--texte-doux); }
.menu-mobile__pied .langues { font-size: 16px; }
.menu-mobile__pied strong { color: var(--texte); font-weight: 600; user-select: all; }

@media (min-width: 1241px) and (max-width: 1400px) {
  .entete__barre { gap: var(--espace-4); padding-left: max(var(--espace-6), env(safe-area-inset-left, 0px)); padding-right: max(var(--espace-6), env(safe-area-inset-right, 0px)); }
  .nav { gap: var(--espace-4); }
  .nav a { font-size: 15px; }
  .entete__droite { gap: var(--espace-4); }
  .langues { gap: 9px; }
}
@media (min-width: 1241px) and (max-width: 1320px) { .entete .devis .long { display: none; } .entete .devis .court { display: inline; } }
@media (max-width: 1240px) {
  .nav, .entete__droite .langues { display: none; }
  .menu { display: inline-flex; }
  .entete__droite { margin-left: auto; gap: var(--espace-4); }
}
@media (max-width: 760px) {
  .entete__barre { height: 66px; gap: var(--espace-3); padding-left: max(var(--espace-4), env(safe-area-inset-left, 0px)); padding-right: max(var(--espace-4), env(safe-area-inset-right, 0px)); }
  .marque img, .entete.colle .marque img { height: 34px; }
  .entete.colle { margin-bottom: 0; }
  .marque__nom { font-size: 15px; line-height: 16px; max-width: 7.2em; white-space: normal; }
  .marque__lieu { display: none; }
  .marque { grid-template-columns: auto auto; }
  .marque img { grid-row: 1; }
  .devis { height: 40px; padding: 0 16px; font-size: 14px; }
  .devis .long { display: none; }
  .devis .court { display: inline; }
  .menu__mot { display: none; }
}

/* Partagés par toutes les pages : le grand bouton de devis et le lien WhatsApp avec son numéro. */
.devis--grand { height: 58px; padding: 0 32px; font-size: 17px; }
.heros__whatsapp { display: grid; gap: 2px; text-decoration: none; font-size: 14px; line-height: 18px; color: var(--texte-doux); }
.heros__whatsapp strong { font-size: 17px; line-height: 22px; color: var(--texte); font-weight: 600; }
.heros__whatsapp:hover strong { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 420px) { .devis--grand { height: 52px; padding: 0 26px; font-size: 16px; } }