/* Electrobora — feuille de style commune */
:root {
  --marine: #0E2A47;
  --marine-fonce: #0A1F36;
  --cyan: #19B5D6;
  --violet: #4B47C9;
  --gris: #EEF1F4;
  --gris-trait: #D5DCE3;
  --blanc: #FFFFFF;
  --encre: #142233;
  --encre-douce: #4A5A6B;
  --mesure: 68ch;
  --rayon: 6px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: "Archivo", Arial, Helvetica, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--encre);
  background: var(--blanc);
}
img { max-width: 100%; display: block; }
a { color: var(--violet); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }

.conteneur { width: min(1120px, 100% - 2.5rem); margin-inline: auto; }

/* ---------- En-tête ---------- */
.entete { background: var(--marine-fonce); color: var(--blanc); }
.entete .conteneur {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: 0.9rem; flex-wrap: wrap;
}
.logo {
  color: var(--blanc); text-decoration: none;
  font-weight: 800; font-size: 1.45rem; letter-spacing: -0.01em;
  font-stretch: 112%;
}
.logo span { color: var(--cyan); }
.menu { display: flex; flex-wrap: wrap; gap: 0.25rem 1.4rem; align-items: center; }
.menu a { color: #C9D6E3; text-decoration: none; font-weight: 500; padding-block: 0.3rem; border-bottom: 2px solid transparent; }
.menu a:hover { color: var(--blanc); }
.menu a[aria-current="page"] { color: var(--blanc); border-bottom-color: var(--cyan); }
.menu .menu-boutique {
  color: var(--marine-fonce); background: var(--cyan);
  padding: 0.45rem 0.9rem; border-radius: var(--rayon); border: 0; font-weight: 700;
}
.menu .menu-boutique:hover { color: var(--marine-fonce); background: #4CC8E2; }

/* ---------- Boutons ---------- */
.bouton {
  display: inline-block; text-decoration: none; font-weight: 700;
  padding: 0.8rem 1.4rem; border-radius: var(--rayon);
  background: var(--cyan); color: var(--marine-fonce);
}
.bouton:hover { background: #4CC8E2; }
.bouton-ligne { background: transparent; color: var(--blanc); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.55); }
.bouton-ligne:hover { background: rgba(255,255,255,0.08); }
.bouton-violet { background: var(--violet); color: var(--blanc); }
.bouton-violet:hover { background: #5C58DA; }
.actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.8rem; }

/* ---------- Accueil : héros ---------- */
.heros { background: var(--marine); color: var(--blanc); overflow: hidden; }
.heros .conteneur {
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 3rem;
  align-items: center; padding-block: 4.5rem 5rem;
}
.heros h1 {
  font-size: clamp(2.3rem, 5.2vw, 3.9rem); line-height: 1.04;
  font-weight: 800; font-stretch: 115%; letter-spacing: -0.02em;
  margin: 0 0 1.2rem;
}
.heros h1 + p { color: #C9D6E3; font-size: 1.15rem; max-width: 44ch; margin: 0; }

/* L'étiquette d'atelier : l'élément marquant du site */
.etiquette {
  position: relative; justify-self: center;
  width: min(340px, 100%);
  background: var(--blanc); color: var(--encre);
  padding: 2.6rem 1.8rem 1.6rem;
  border-radius: 10px 10px 10px 10px;
  clip-path: polygon(14% 0, 86% 0, 100% 9%, 100% 100%, 0 100%, 0 9%);
  transform: rotate(3deg);
  box-shadow: 0 24px 50px rgba(5, 15, 30, 0.45);
}
.etiquette::before {
  content: ""; position: absolute; top: 0.9rem; left: 50%;
  width: 18px; height: 18px; margin-left: -9px; border-radius: 50%;
  background: var(--marine); box-shadow: inset 0 0 0 4px #DCE3EA;
}
.etiquette-titre { color: var(--marine); font-weight: 800; font-size: 1.15rem; font-stretch: 112%; margin: 0.4rem 0 0.2rem; }
.etiquette-sous { color: var(--encre-douce); font-size: 0.92rem; margin: 0 0 1rem; }
.etiquette ul { list-style: none; margin: 0; padding: 0; }
.etiquette li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.55rem 0; border-top: 1px dashed var(--gris-trait); font-size: 0.98rem;
}
.etiquette li span:last-child { color: var(--violet); font-weight: 700; }
.etiquette-pied { margin-top: 1rem; font-size: 0.85rem; color: var(--encre-douce); }

/* ---------- Sections ---------- */
.bloc { padding-block: 4.5rem; }
.bloc-gris { background: var(--gris); }
.bloc-marine { background: var(--marine); color: var(--blanc); }
.bloc-marine p { color: #C9D6E3; }
h2 {
  font-size: clamp(1.75rem, 3.4vw, 2.5rem); line-height: 1.12;
  font-weight: 800; font-stretch: 110%; letter-spacing: -0.015em;
  margin: 0 0 1rem; color: var(--marine);
}
.bloc-marine h2 { color: var(--blanc); }
h3 { font-size: 1.2rem; line-height: 1.25; margin: 0 0 0.4rem; color: var(--marine); font-weight: 700; }
.intro { max-width: var(--mesure); color: var(--encre-douce); font-size: 1.12rem; margin: 0 0 2.5rem; }
.bloc-marine .intro { color: #C9D6E3; }
.texte { max-width: var(--mesure); }

/* Deux colonnes texte / image */
.deux-col { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; }
.photo { border-radius: var(--rayon); overflow: hidden; }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo-haute { aspect-ratio: 4 / 5; }
.legende { font-size: 0.88rem; color: var(--encre-douce); margin-top: 0.6rem; }

/* Liste d'appareils réparés */
.appareils {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 2px solid var(--marine);
}
.appareil { padding: 1.6rem 1.6rem 1.8rem 0; border-bottom: 1px solid var(--gris-trait); }
.appareil + .appareil { padding-left: 1.6rem; border-left: 1px solid var(--gris-trait); }
.appareil:nth-child(3n + 1) { padding-left: 0; border-left: 0; }
.appareil p { margin: 0; color: var(--encre-douce); }

/* Étapes : une vraie séquence */
.etapes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; counter-reset: etape; }
.etapes li { counter-increment: etape; }
.etapes li::before {
  content: counter(etape); display: grid; place-items: center;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: var(--cyan); color: var(--marine-fonce); font-weight: 800; margin-bottom: 0.9rem;
}
.etapes p { margin: 0; }

/* Rayons de matériel */
.rayons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.rayon { padding: 0 2rem; border-left: 4px solid var(--cyan); }
.rayon:nth-child(2) { border-left-color: var(--violet); }
.rayon:nth-child(3) { border-left-color: var(--marine); }
.rayon ul { margin: 0.6rem 0 0; padding-left: 1.1rem; color: var(--encre-douce); }
.rayon li { margin-bottom: 0.25rem; }

/* Bande îles */
.iles { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.4rem 0 0; padding: 0; list-style: none; }
.iles li { background: rgba(255,255,255,0.1); padding: 0.45rem 0.9rem; border-radius: 999px; color: var(--blanc); font-weight: 500; }

/* Coordonnées */
.coordonnees { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 3rem; max-width: 760px; }
.coordonnees dt { font-weight: 700; color: var(--marine); }
.coordonnees dd { margin: 0.2rem 0 0; color: var(--encre-douce); }

.a-completer { background: #FFF1B8; color: #5A4500; padding: 0 0.3rem; border-radius: 3px; }

/* En-tête de page intérieure */
.titre-page { background: var(--marine); color: var(--blanc); padding-block: 3.5rem 3rem; }
.titre-page h1 {
  font-size: clamp(2rem, 4.5vw, 3.1rem); line-height: 1.08; font-weight: 800;
  font-stretch: 115%; letter-spacing: -0.02em; margin: 0 0 0.8rem;
}
.titre-page p { color: #C9D6E3; max-width: 60ch; margin: 0; font-size: 1.12rem; }

/* Pied de page */
.pied { background: var(--marine-fonce); color: #AFC0D1; padding-block: 2.5rem; font-size: 0.95rem; }
.pied .conteneur { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem; }
.pied a { color: #DDE7F0; }
.pied p { margin: 0.2rem 0; }

/* Galeries photo */
.galerie { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: 0 0 2.5rem; }
.galerie-3 { grid-template-columns: repeat(3, 1fr); margin-bottom: 0; }
.galerie figure { margin: 0; }
.galerie img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--rayon); }
.galerie figcaption { font-size: 0.9rem; color: var(--encre-douce); margin-top: 0.45rem; }
.bandeau { aspect-ratio: 21 / 8; margin-bottom: 3.5rem; }

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
  .heros .conteneur, .deux-col { grid-template-columns: 1fr; gap: 2.5rem; }
  .heros .conteneur { padding-block: 3rem 3.5rem; }
  .etiquette { transform: rotate(2deg); }
  .appareils { grid-template-columns: 1fr 1fr; }
  .appareil, .appareil + .appareil { padding: 1.4rem 1.2rem 1.4rem 0; border-left: 0; }
  .appareil:nth-child(even) { padding-left: 1.2rem; border-left: 1px solid var(--gris-trait); }
  .etapes { grid-template-columns: 1fr 1fr; }
  .rayons { grid-template-columns: 1fr; gap: 2rem; }
  .galerie, .galerie-3 { grid-template-columns: 1fr 1fr; }
  .bandeau { aspect-ratio: 16 / 9; }
  .photo-haute { aspect-ratio: 4 / 3; }
}
@media (max-width: 560px) {
  .conteneur { width: calc(100% - 2rem); }
  .menu { gap: 0.2rem 1rem; font-size: 0.95rem; }
  .appareils, .etapes, .coordonnees { grid-template-columns: 1fr; }
  .appareil:nth-child(even) { padding-left: 0; border-left: 0; }
  .bloc { padding-block: 3.2rem; }
}