/* Marque Contente : feuille de styles unique. Règles dans DESIGN.md. */

@font-face { font-family: "Bebas Neue"; font-weight: 400; font-style: normal; font-display: swap; src: url("/polices/bebas-neue-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Oswald"; font-weight: 400; font-style: normal; font-display: swap; src: url("/polices/oswald-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Oswald"; font-weight: 700; font-style: normal; font-display: swap; src: url("/polices/oswald-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Libre Baskerville"; font-weight: 400; font-style: normal; font-display: swap; src: url("/polices/libre-baskerville-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Libre Baskerville"; font-weight: 400; font-style: italic; font-display: swap; src: url("/polices/libre-baskerville-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Libre Baskerville"; font-weight: 700; font-style: normal; font-display: swap; src: url("/polices/libre-baskerville-latin-700-normal.woff2") format("woff2"); }

:root {
  --jaune: #F5C400;
  --terra: #C05621;
  --terra-clair: #E07A3F;
  --bleu: #2B6CB0;
  --bleu-fonce: #1A3F6F;
  --noir: #1A1200;
  --blanc: #FFFDF0;
  --gris-clair: rgba(255, 253, 240, .75);
  --gris: rgba(255, 253, 240, .55);
  --gris-fonce: rgba(255, 253, 240, .15);
  --voile: rgba(255, 253, 240, .03);
  --whatsapp: #1FA855;
  --whatsapp-fonce: #17864A;

  --affiche: "Bebas Neue", Impact, sans-serif;
  --etroite: "Oswald", "Arial Narrow", sans-serif;
  --texte: "Libre Baskerville", Georgia, serif;

  --rayon: 0;
  --e1: 8px; --e2: 16px; --e3: 24px; --e4: 32px; --e6: 48px; --e8: 64px; --e12: 96px;
  --largeur: 1200px;
  --duree: 150ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--noir);
  color: var(--blanc);
  font-family: var(--texte);
  font-size: 1rem;
  line-height: 1.7;
}
img { max-width: 100%; height: auto; display: block; border-radius: var(--rayon); }
svg.icone { width: 20px; height: 20px; stroke-width: 1.75; flex: none; }
a { color: var(--jaune); text-underline-offset: 3px; transition: color var(--duree); }
a:hover { color: var(--blanc); }
:focus-visible { outline: 2px solid var(--jaune); outline-offset: 2px; }

h1, h2, h3 { font-family: var(--affiche); font-weight: 400; letter-spacing: .02em; line-height: 1; margin: 0 0 var(--e3); color: var(--jaune); text-transform: uppercase; }
h1 { font-size: clamp(48px, 7vw, 96px); text-shadow: 5px 5px 0 var(--terra); max-width: 16ch; }
h2 { font-size: clamp(36px, 5vw, 64px); max-width: 22ch; }
h3 { font-size: clamp(24px, 3vw, 32px); color: var(--blanc); }
p, ul, ol { margin: 0 0 var(--e2); max-width: 68ch; }
strong { color: var(--blanc); }
.souligne { color: var(--blanc); }
.petit { font-size: 0.875rem; line-height: 1.5; color: var(--gris); }
.chapo { font-size: 1.125rem; color: var(--gris-clair); max-width: 56ch; }
.etiquette {
  display: flex; align-items: center; gap: var(--e1);
  font-family: var(--etroite); font-size: 0.75rem; letter-spacing: 5px; text-transform: uppercase;
  color: var(--terra-clair); margin-bottom: var(--e3);
}
.etiquette::before { content: ""; width: 30px; height: 2px; background: var(--terra); display: inline-block; }

.cadre { max-width: var(--largeur); margin: 0 auto; padding: 0 clamp(16px, 5vw, 48px); }
section { padding: clamp(48px, 8vw, 96px) 0; }
section + section { border-top: 1.5px solid var(--gris-fonce); }

.evitement { position: absolute; left: -9999px; }
.evitement:focus { left: var(--e2); top: var(--e2); background: var(--jaune); color: var(--bleu-fonce); padding: var(--e1) var(--e2); z-index: 200; }

/* En-tête */
.entete { background: var(--noir); border-bottom: 1.5px solid var(--gris-fonce); position: sticky; top: 0; z-index: 100; }
.entete .cadre { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); min-height: 72px; }
.logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--affiche); font-size: 22px; letter-spacing: 3px; color: var(--blanc); text-decoration: none; }
.logo:hover { color: var(--jaune); }
.point { width: 10px; height: 10px; background: var(--jaune); border: 1.5px solid var(--terra); border-radius: 50%; display: inline-block; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: var(--e4); max-width: none; }
.nav a { font-family: var(--etroite); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--gris-clair); text-decoration: none; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--jaune); }
.nav .bouton { color: var(--bleu-fonce); min-height: 40px; padding: 0 var(--e3); }
.nav .bouton:hover { color: var(--jaune); }
.bouton-menu { display: none; background: none; border: 2px solid var(--jaune); color: var(--jaune); padding: 6px; cursor: pointer; }
.bande { height: 8px; background: repeating-linear-gradient(90deg, var(--terra) 0 18px, var(--bleu) 18px 36px, var(--jaune) 36px 54px); }

/* Boutons */
.bouton, .bouton-2 {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 0 var(--e4);
  font-family: var(--etroite); font-size: 13px; letter-spacing: 3px; text-transform: uppercase; font-weight: 400;
  border: 2px solid var(--jaune); border-radius: var(--rayon);
  text-decoration: none; cursor: pointer; transition: background-color var(--duree), color var(--duree), border-color var(--duree);
}
.bouton { background: var(--jaune); color: var(--bleu-fonce); }
.bouton:hover { background: transparent; color: var(--jaune); }
.bouton-2 { background: transparent; color: var(--jaune); }
.bouton-2:hover { background: var(--jaune); color: var(--bleu-fonce); }
.actions { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e4); }

/* Haut de page */
.ouverture { padding: clamp(64px, 10vw, 120px) 0 clamp(48px, 8vw, 96px); }
.fil { font-family: var(--etroite); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--gris); margin-bottom: var(--e3); }
.fil a { color: var(--gris-clair); text-decoration: none; }
.fil a:hover { color: var(--jaune); }

/* Affiche d'accueil : bloc jaune + bloc bleu */
.affiche { display: grid; grid-template-columns: 1.15fr 1fr; min-height: 70vh; padding: 0; border-top: 0; }
.affiche > div { padding: clamp(48px, 6vw, 80px) clamp(16px, 5vw, 64px); display: flex; flex-direction: column; justify-content: center; }
.affiche .gauche { background: var(--jaune); color: var(--noir); }
.affiche .gauche h1 { color: var(--bleu-fonce); }
.affiche .gauche .etiquette { color: var(--bleu-fonce); }
.affiche .gauche .chapo { color: var(--noir); }
.affiche .gauche .petit { color: var(--noir); }
.affiche .gauche .bouton { background: var(--bleu-fonce); border-color: var(--bleu-fonce); color: var(--jaune); }
.affiche .gauche .bouton:hover { background: transparent; color: var(--bleu-fonce); }
.affiche .gauche .bouton-2 { color: var(--bleu-fonce); border-color: var(--bleu-fonce); }
.affiche .gauche .bouton-2:hover { background: var(--bleu-fonce); color: var(--jaune); }
.affiche .droite { background: var(--bleu); }
.tuiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e2); }
.tuile { display: block; border: 1.5px solid rgba(255, 253, 240, .35); padding: var(--e3); color: var(--blanc); text-decoration: none; transition: border-color var(--duree), background-color var(--duree); }
.tuile:hover { border-color: var(--jaune); background: rgba(255, 253, 240, .08); color: var(--blanc); }
.tuile .quoi { display: block; font-family: var(--etroite); font-weight: 700; font-size: 15px; letter-spacing: 2px; text-transform: uppercase; }
.tuile .combien { display: block; font-family: var(--etroite); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--blanc); opacity: .85; margin-top: 4px; }
.tuile.express { border-color: var(--jaune); }
.tuile.express .combien { color: var(--jaune); opacity: 1; }

/* Grilles et cartes */
.grille { display: grid; gap: var(--e4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: var(--e6); }
.grille-2 { display: grid; gap: var(--e6); grid-template-columns: 1fr 1fr; margin-top: var(--e6); }
.carte { background: var(--voile); border: 1.5px solid var(--gris-fonce); border-radius: var(--rayon); padding: var(--e4); display: flex; flex-direction: column; }
.carte h3 { font-family: var(--etroite); font-size: 16px; letter-spacing: 3px; color: var(--jaune); line-height: 1.3; margin-bottom: var(--e2); }
.carte p { color: var(--gris-clair); font-size: 0.9375rem; }
.carte p:last-child { margin-bottom: 0; }
.carte .bas { margin-top: auto; padding-top: var(--e2); }
a.carte { color: var(--blanc); text-decoration: none; transition: border-color var(--duree), background-color var(--duree); }
a.carte:hover { border-color: var(--jaune); background: rgba(255, 253, 240, .06); }
.carte-offre { border: 2px solid var(--jaune); }
.pastille { display: inline-block; background: var(--jaune); color: var(--bleu-fonce); font-family: var(--etroite); font-size: 11px; letter-spacing: 3px; text-transform: uppercase; padding: 2px var(--e1); margin-bottom: var(--e2); align-self: flex-start; }
.prix, .carte .prix { font-family: var(--affiche); font-size: 56px; line-height: 1; color: var(--jaune); margin: var(--e1) 0 var(--e2); letter-spacing: .02em; }
.faits { list-style: none; padding: 0; margin: var(--e2) 0; }
.faits li { display: flex; gap: var(--e2); align-items: flex-start; padding: 6px 0; color: var(--gris-clair); }
.faits li svg { margin-top: 3px; color: var(--jaune); }

/* Étapes */
.etapes { list-style: none; padding: 0; margin: var(--e6) 0 0; display: grid; gap: var(--e4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); max-width: none; counter-reset: etape; }
.etapes li { counter-increment: etape; color: var(--gris-clair); font-size: 0.9375rem; }
.etapes li::before {
  content: counter(etape, decimal-leading-zero);
  width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
  background: var(--bleu); color: var(--jaune); font-family: var(--affiche); font-size: 22px;
  border: 2px solid var(--bleu-fonce); box-shadow: 3px 3px 0 var(--terra); margin-bottom: var(--e2);
}
.etapes strong { display: block; font-family: var(--etroite); font-weight: 400; font-size: 14px; letter-spacing: 2px; text-transform: uppercase; color: var(--jaune); margin-bottom: 6px; }

/* Section bleue */
.encre { background: var(--bleu-fonce); }
.encre p, .encre .faits li { color: var(--gris-clair); }
section.encre + section { border-top: 0; }

/* Questions fréquentes */
.faq { margin-top: var(--e4); max-width: 800px; }
.faq details { border-top: 1.5px solid var(--gris-fonce); padding: var(--e3) 0; }
.faq details:last-child { border-bottom: 1.5px solid var(--gris-fonce); }
.faq summary { font-family: var(--etroite); font-size: 15px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--blanc); cursor: pointer; }
.faq summary:hover { color: var(--jaune); }
.faq details p { margin: var(--e2) 0 0; color: var(--gris-clair); }

/* Formulaire */
.formulaire { background: var(--voile); border: 1.5px solid var(--gris-fonce); padding: var(--e4); max-width: 640px; }
.formulaire label { display: block; font-family: var(--etroite); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--terra-clair); margin: var(--e3) 0 var(--e1); }
.formulaire label:first-of-type { margin-top: 0; }
.formulaire .facultatif { color: var(--gris); }
input, select, textarea {
  width: 100%; font: inherit; font-size: 15px; color: var(--blanc); background: rgba(255, 253, 240, .05);
  border: 1.5px solid var(--gris-fonce); border-radius: var(--rayon); padding: 12px 14px;
}
select option { background: var(--noir); color: var(--blanc); }
input:focus, select:focus, textarea:focus { border-color: var(--jaune); outline: none; }
textarea { min-height: 120px; resize: vertical; }
::placeholder { color: var(--gris); }
.piege { position: absolute; left: -9999px; }
.contact-duo { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--e8); align-items: start; margin-top: var(--e6); }
.coordonnees { list-style: none; padding: 0; }
.coordonnees li { display: flex; gap: var(--e2); align-items: flex-start; margin-bottom: var(--e3); }
.coordonnees svg { margin-top: 4px; color: var(--jaune); }

/* Réalisations */
.etiquettes { display: flex; flex-wrap: wrap; gap: var(--e2); margin-bottom: var(--e1); }
.etiquettes span { font-family: var(--etroite); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--terra-clair); }
.fiche { display: grid; grid-template-columns: 2fr 1fr; gap: var(--e8); }
.fiche dl { margin: 0; }
.fiche dt { font-family: var(--etroite); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--terra-clair); margin-top: var(--e3); }
.fiche dt:first-child { margin-top: 0; }
.fiche dd { margin: 4px 0 0; color: var(--gris-clair); font-size: 0.9375rem; }
.visuel { margin: var(--e6) 0 0; border: 1.5px solid var(--gris-fonce); }

/* Pied de page */
.pied { background: var(--noir); border-top: 2px solid var(--gris-fonce); padding: clamp(48px, 5vw, 64px) 0 var(--e3); }
.pied p { color: var(--gris-clair); font-size: 0.875rem; font-style: italic; }
.pied .colonnes { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--e4); }
.pied h2 { font-family: var(--etroite); font-size: 11px; letter-spacing: 3px; color: var(--terra-clair); margin-bottom: var(--e2); text-shadow: none; }
.pied ul { list-style: none; padding: 0; margin: 0; }
.pied li { margin-bottom: var(--e1); font-size: 0.875rem; color: var(--gris-clair); }
.pied li a { color: var(--gris-clair); text-decoration: none; }
.pied li a:hover { color: var(--jaune); }
.pied .legal { border-top: 1px solid var(--gris-fonce); margin-top: var(--e6); padding-top: var(--e3); display: flex; flex-wrap: wrap; gap: var(--e3); justify-content: space-between; font-family: var(--etroite); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--gris); }
.pied .legal a, .pied .legal button { color: var(--gris); text-decoration: none; }
.pied .legal a:hover, .pied .legal button:hover { color: var(--jaune); }
.pied .legal button { background: none; border: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; padding: 0; }

/* Bandeau cookies */
.cookies { position: fixed; left: var(--e2); right: var(--e2); bottom: var(--e2); max-width: 560px; background: var(--noir); border: 2px solid var(--jaune); padding: var(--e3); z-index: 150; }
.cookies p { margin-bottom: var(--e2); font-size: 0.9375rem; }
.cookies .actions { margin-top: 0; }
.cookies[hidden] { display: none; }

/* Icônes dans les titres de cartes */
.carte h3 svg.icone { vertical-align: -4px; margin-right: 8px; }

/* Mobile */
@media (max-width: 900px) {
  .bouton-menu { display: inline-flex; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--noir); border-bottom: 1.5px solid var(--gris-fonce); padding: var(--e2) var(--e3) var(--e3); }
  .nav.ouvert { display: block; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav li { border-bottom: 1px solid var(--gris-fonce); }
  .nav li:last-child { border-bottom: 0; padding-top: var(--e2); }
  .nav a { display: block; padding: var(--e2) 0; }
  .nav .bouton { display: inline-flex; padding: 0 var(--e3); }
  .affiche, .grille-2, .contact-duo, .fiche { grid-template-columns: 1fr; }
  .affiche { min-height: 0; }
  .pied .colonnes { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .tuiles { grid-template-columns: 1fr; }
  .formulaire { padding: var(--e3); }
  .pied .colonnes { grid-template-columns: 1fr; }
  .actions .bouton, .actions .bouton-2 { width: 100%; justify-content: center; }
  .prix, .carte .prix { font-size: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Réalisations avec vignette */
.carte-projet { padding: 0; overflow: hidden; }
.grille:has(.carte-projet) { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.carte-projet .corps { padding: var(--e3) var(--e4) var(--e4); }
.vignette { aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 1.5px solid var(--gris-fonce); background: var(--bleu-fonce); }
.vignette img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.vignette-vide { display: flex; align-items: center; justify-content: center; color: var(--jaune); }
.vignette-vide svg.icone { width: 56px; height: 56px; stroke-width: 1.25; }

/* Icône en tête de carte et de tuile */
.carte > svg.icone:first-child { width: 32px; height: 32px; color: var(--jaune); margin-bottom: var(--e2); }
.tuile svg.icone { display: block; color: var(--jaune); margin-bottom: var(--e1); width: 24px; height: 24px; }

/* Portrait */
.portrait { max-width: 320px; margin: 0 0 var(--e4); }
.portrait img { width: 100%; border: 2px solid var(--jaune); box-shadow: 5px 5px 0 var(--terra); }
.portrait figcaption { font-family: var(--etroite); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--gris); margin-top: var(--e2); }
.fondateur { display: grid; grid-template-columns: 280px 1fr; gap: var(--e6); align-items: start; }
@media (max-width: 700px) { .fondateur { grid-template-columns: 1fr; } .portrait { max-width: 240px; } }

/* WhatsApp */
.bouton-whatsapp svg.icone { width: 20px; height: 20px; }
.whatsapp-flottant {
  position: fixed; right: var(--e3); bottom: var(--e3); z-index: 140;
  width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;
  background: var(--whatsapp); color: var(--blanc); border: 2px solid var(--noir); border-radius: 50%;
  box-shadow: 3px 3px 0 var(--terra); transition: background-color var(--duree);
}
.whatsapp-flottant:hover { background: var(--whatsapp-fonce); color: var(--blanc); }
.whatsapp-flottant svg.icone { width: 30px; height: 30px; }
.cookies:not([hidden]) ~ .whatsapp-flottant { display: none; }
@media (max-width: 600px) { .whatsapp-flottant { right: var(--e2); bottom: var(--e2); width: 56px; height: 56px; } }