/* CLARIS' — chrome.css : header (logo + MENU + 5 langues) et footer communs à TOUTES les pages.
   Une seule source : assets/inc/header.php et assets/inc/footer.php. */
.chip-header,.site-footer{
  --paper:#FDFCFB; --ink:#211F1B; --stone:#948C7E; --coral:#FF7A5C; --coral-soft:#FFECE5;
  --sage:#6FA484; --sage-soft:#E9F2EC;
  --tone-marine:#5A87A8; --tone-marine-soft:#E7EFF3; --tone-sand:#D9A24E; --tone-sand-soft:#F8EDDC;
  --tone-plum:#A8789A; --tone-plum-soft:#F3E7EE; --footer-bg:#F3F8F4;
  --line:rgba(33,31,27,0.07); --maxw:1180px; --ease:cubic-bezier(.22,.61,.36,1);
  font-family:'Raleway',sans-serif; color:var(--ink); box-sizing:border-box;
}
.chip-header *,.chip-header *::before,.chip-header *::after,
.site-footer *,.site-footer *::before,.site-footer *::after{ box-sizing:border-box; }
.chip-header a,.site-footer a{ color:inherit; text-decoration:none; }
.chip-header img,.site-footer img{ max-width:100%; display:block; }
.site-footer .eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--stone); font-weight:700; }
.site-footer .eyebrow::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--coral); flex-shrink:0; }
:where(.site-footer) p{ margin:0; }

/* ---------- HEADER (chips flottants, jamais de bandeau) ---------- */
.chip-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:clamp(16px, 3vw, 30px) clamp(16px, 4vw, 44px);
  pointer-events:none;
}

.chip{
  pointer-events:auto;
  background:rgba(251,249,244,0.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-radius:100px;
  box-shadow:0 4px 24px rgba(33,31,27,0.06);
  border:1px solid rgba(33,31,27,0.05);
}

.logo-chip{
  display:flex;
  align-items:center;
  padding:8px 20px 8px 12px;
  text-decoration:none;
  background:transparent;
  border:none;
  box-shadow:none;
  pointer-events:auto;
}

.logo-chip img{ height:72px; width:auto; }

.logo-fallback{
  font-weight:800;
  font-size:16px;
  letter-spacing:.01em;
  color:var(--ink);
}

.logo-fallback span{ color:var(--coral); }

.lang-toggle{
  display:flex;
  align-items:center;
  gap:2px;
  padding:4px;
}

.lang-toggle a{
  appearance:none;
  border:0;
  background:transparent;
  color:var(--stone);
  font-family:'Raleway', sans-serif;
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
  padding:9px 13px;
  min-width:36px;
  border-radius:100px;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition: background .3s var(--ease), color .3s var(--ease);
}

.lang-toggle a:hover{ color:var(--ink); }

.lang-toggle a[aria-current="page"]{ background:var(--coral); color:#fff; }

.lang-toggle a[data-lang="fr"][aria-current="page"]{ background:var(--tone-marine); }

.lang-toggle a[data-lang="en"][aria-current="page"]{ background:var(--coral); }

.lang-toggle a[data-lang="es"][aria-current="page"]{ background:var(--sage); }

.lang-toggle a[data-lang="it"][aria-current="page"]{ background:var(--tone-sand); }

.lang-toggle a[data-lang="de"][aria-current="page"]{ background:var(--tone-plum); }

/* ---------- FOOTER — carte arrondie posée sur la page ---------- */
.site-footer{
  padding:0 clamp(12px, 3vw, 32px) clamp(24px, 4vw, 40px);
}

.footer-card{
  max-width:var(--maxw);
  margin:0 auto;
  background:var(--footer-bg);
  animation: footer-bg-cycle 55s linear infinite;
  border-radius:clamp(28px, 4vw, 44px);
  padding:clamp(44px, 7vw, 72px) clamp(24px, 5vw, 56px) 28px;
}

@keyframes footer-bg-cycle{
  0%{ background:var(--tone-marine-soft); }
  18.18%{ background:var(--tone-marine-soft); }
  20%{ background:var(--coral-soft); }
  38.18%{ background:var(--coral-soft); }
  40%{ background:var(--sage-soft); }
  58.18%{ background:var(--sage-soft); }
  60%{ background:var(--tone-sand-soft); }
  78.18%{ background:var(--tone-sand-soft); }
  80%{ background:var(--tone-plum-soft); }
  98.18%{ background:var(--tone-plum-soft); }
  100%{ background:var(--tone-marine-soft); }
}

.footer-top{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:44px;
  padding-bottom:40px;
  border-bottom:1px solid var(--line);
}

.footer-mark{ margin:0; line-height:0; }

.footer-mark img{ height:36px; width:auto; }

.footer-mark-fallback{
  font-weight:800;
  font-size:clamp(24px, 3.4vw, 32px);
  letter-spacing:-.01em;
  color:var(--ink);
}

.footer-mark-fallback span{ color:var(--coral); }

.footer-tagline{
  margin-top:14px;
  font-size:13.5px;
  font-weight:300;
  color:#5c584f;
  max-width:30ch;
  line-height:1.7;
}

.footer-contacts{ display:flex; gap:clamp(32px, 6vw, 72px); flex-wrap:wrap; }

.contact-col .eyebrow{ margin-bottom:14px; }

.contact-col .eyebrow::before{
  width:9px; height:9px;
  animation: footer-dot-cycle 55s linear infinite;
}

.contact-col:nth-child(2) .eyebrow::before{
  animation-delay: -22s; /* toujours décalé de 2 couleurs par rapport à la 1re colonne */
}

@keyframes footer-dot-cycle{
  0%{ background:var(--tone-marine); }
  18.18%{ background:var(--tone-marine); }
  20%{ background:var(--coral); }
  38.18%{ background:var(--coral); }
  40%{ background:var(--sage); }
  58.18%{ background:var(--sage); }
  60%{ background:var(--tone-sand); }
  78.18%{ background:var(--tone-sand); }
  80%{ background:var(--tone-plum); }
  98.18%{ background:var(--tone-plum); }
  100%{ background:var(--tone-marine); }
}

.contact-pill{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:14px;
  font-weight:500;
  padding:9px 16px;
  margin-bottom:6px;
  color:#33322d;
  background:var(--paper);
  border-radius:100px;
  width:fit-content;
  transition:background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}

.contact-pill:hover{ background:var(--coral); color:#fff; transform:translateY(-2px); }

.contact-pill svg{ width:14px; height:14px; flex-shrink:0; }

.footer-bottom{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  padding-top:22px;
  font-size:11.5px;
  font-weight:500;
  color:#928c7d;
  letter-spacing:.03em;
}

.footer-legal, .footer-meta{
  display:flex;
  flex-wrap:wrap;
  gap:4px 16px;
}

.footer-ai-note{
  font-style:italic;
  color:#a29c8e;
}

.footer-ai-note[hidden]{ display:none; }

/* ---------- MENU (hamburger, à gauche du sélecteur de langue) ---------- */
.header-right{ display:flex; align-items:center; gap:10px; pointer-events:none; }
.menu{ position:relative; pointer-events:auto; }
.menu summary{
  display:flex; align-items:center; gap:9px; cursor:pointer; list-style:none; user-select:none;
  padding:0 16px; height:38px;
  background:rgba(251,249,244,0.72); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-radius:100px; box-shadow:0 4px 24px rgba(33,31,27,0.06); border:1px solid rgba(33,31,27,0.05); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--stone);
  transition:color .3s var(--ease);
}
.menu summary::-webkit-details-marker{ display:none; }
.menu summary svg{ width:16px; height:11px; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; fill:none; flex-shrink:0; }
.menu summary:hover,.menu[open] summary{ color:var(--coral); }
.menu summary:focus-visible{ outline:2px solid var(--coral); outline-offset:3px; border-radius:100px; }
.menu-panel{
  position:absolute; right:0; top:calc(100% + 12px); z-index:120; min-width:250px; padding:10px; border-radius:22px;
  background:#FDFCFB; border:1px solid rgba(33,31,27,0.07);
  box-shadow:0 18px 50px rgba(33,31,27,.14),0 3px 12px rgba(33,31,27,.06);
}
.menu-panel a{
  display:flex; align-items:center; gap:10px; padding:11px 16px; border-radius:14px;
  font-size:15px; font-weight:400; letter-spacing:.01em; text-transform:none; color:#211F1B; white-space:nowrap;
}
.menu-panel a:hover{ background:#f4f1ec; }
.menu-panel a[aria-current]::before{ content:""; width:6px; height:6px; border-radius:50%; background:#FF7A5C; flex:none; }

@media (max-width:640px){
  .chip-header{ padding:14px; }
  .logo-chip img{ height:48px; }
  .lang-toggle a{ padding:8px 10px; font-size:10px; min-width:28px; }
  .footer-contacts{ gap:28px; }
  .footer-bottom{ flex-direction:column; }
  .header-right{ gap:6px; }
  .menu summary{ padding:0 12px; }
  .menu summary span{ display:none; }
  .menu-panel{ position:fixed; top:70px; right:14px; left:auto; min-width:220px; max-width:calc(100vw - 28px); }
}