/* Toutes les mesures sont en rem (filets de 1 ou 2 px en px) ; la taille de base et la mise en page fluide sont réglées en fin de fichier. */

/* macklos.com */
:root {
  --papier: #f5f1ea;
  --papier-2: #ebe5da;
  --carte: #fffdf9;
  --encre: #1b1c19;
  --discret: #62605a;
  --trait: #dcd5c8;
  --vert: #1f4e46;
  --vert-clair: #dfece7;
  --brique: #c2502f;
  --nuit: #16211e;
  --nuit-2: #1f2d29;
  --sur-nuit: #f2efe8;
  --sur-nuit-discret: #a9b5b0;
  --titres: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --texte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --rayon: 0.875rem;
}
@media (prefers-color-scheme: dark) {
  :root {
    --papier: #141513;
    --papier-2: #1b1d1a;
    --carte: #1e201d;
    --encre: #eeebe4;
    --discret: #a5a299;
    --trait: #33362f;
    --vert: #8fcfbf;
    --vert-clair: #1c2f2a;
    --brique: #ec8a66;
    --nuit: #0e1513;
    --nuit-2: #17211e;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5.25rem; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--papier); color: var(--encre); font: 1.0625rem/1.6 var(--texte); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--vert); text-underline-offset: 0.1875rem; }
h1, h2, h3 { font-family: var(--titres); font-weight: 600; line-height: 1.12; letter-spacing: -.015em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.35rem, 5.4vw, 4.1rem); }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.75rem); }
h3 { font-size: 1.3rem; line-height: 1.25; }
p { margin: 0 0 1em; }
code { font: .86em var(--mono); background: var(--papier-2); border-radius: 0.3125rem; padding: 1px 0.3125rem; }
:focus-visible { outline: 2px solid var(--brique); outline-offset: 0.1875rem; border-radius: 0.25rem; }

.cadre { width: 100%; max-width: 72.5rem; margin: 0 auto; padding: 0 1.5rem; }
.evitement { position: absolute; left: -624.9375rem; top: 0.5rem; background: var(--encre); color: var(--papier); padding: 0.5rem 0.875rem; border-radius: 0.5rem; z-index: 50; }
.evitement:focus { left: 0.5rem; }
.surtitre { margin: 0 0 0.875rem; font-size: .78rem; font-weight: 650; letter-spacing: .13em; text-transform: uppercase; color: var(--brique); }

/* En-tête */
.entete { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--papier) 88%, transparent); backdrop-filter: blur(0.625rem); -webkit-backdrop-filter: blur(0.625rem); border-bottom: 1px solid var(--trait); }
.entete-int { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; min-height: 4.125rem; }
.marque { font-family: var(--titres); font-size: 1.55rem; font-weight: 700; letter-spacing: -.02em; color: var(--encre); text-decoration: none; margin: 0; }
.marque span { color: var(--brique); }
.menu { display: flex; align-items: center; gap: 0.375rem; }
.menu a { padding: 0.5rem 0.75rem; border-radius: 0.5rem; color: var(--encre); text-decoration: none; font-size: .96rem; font-weight: 550; }
.menu a:hover { background: var(--papier-2); }
.menu a.menu-contact { margin-left: 0.5rem; background: var(--encre); color: var(--papier); padding: 0.5625rem 1rem; }
.menu a.menu-contact:hover { background: var(--vert); color: var(--papier); }
.menu-bouton { display: none; font: inherit; font-weight: 600; color: var(--encre); background: none; border: 1px solid var(--trait); border-radius: 0.5rem; padding: 0.4375rem 0.875rem; cursor: pointer; }

/* Boutons */
.bouton { display: inline-block; padding: 0.8125rem 1.375rem; border-radius: 0.625rem; border: 1.5px solid var(--encre); background: var(--encre); color: var(--papier); font: inherit; font-weight: 650; text-decoration: none; cursor: pointer; transition: transform .15s ease, background .15s ease; }
.bouton:hover { background: var(--vert); border-color: var(--vert); transform: translateY(-1px); }
.bouton.clair { background: transparent; color: var(--encre); }
.bouton.clair:hover { background: var(--papier-2); border-color: var(--encre); }
@media (prefers-reduced-motion: reduce) { .bouton { transition: none; } .bouton:hover { transform: none; } }

/* Ouverture */
.hero { padding: clamp(3rem, 8vw, 6.5rem) 0 clamp(3.5rem, 8vw, 6rem); overflow: hidden; }
.hero-int { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.hero h1 em { font-style: italic; color: var(--brique); }
.chapo { margin: 1.625rem 0 0; font-size: clamp(1.08rem, 1.5vw, 1.24rem); color: var(--discret); max-width: 36em; }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 2rem 0 0; }
.atouts { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem 1.375rem; margin: 1.875rem 0 0; padding: 0; font-size: .93rem; color: var(--discret); }
.atouts li { position: relative; padding-left: 1.25rem; }
.atouts li::before { content: ""; position: absolute; left: 0; top: .52em; width: 0.625rem; height: 0.375rem; border-left: 2px solid var(--vert); border-bottom: 2px solid var(--vert); transform: rotate(-45deg); }

.hero-visuel { position: relative; padding: 0 0 5.25rem 0; }
.fenetre { background: var(--carte); border: 1px solid var(--trait); border-radius: 1rem; box-shadow: 0 1.875rem 3.75rem -1.875rem rgba(27, 28, 25, .35), 0 2px 0 rgba(255, 255, 255, .5) inset; overflow: hidden; transform: rotate(1.2deg); }
.fenetre-barre { display: flex; align-items: center; gap: 0.875rem; padding: 0.6875rem 0.875rem; background: var(--papier-2); border-bottom: 1px solid var(--trait); }
.pastilles { display: flex; gap: 0.375rem; }
.pastilles i { width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--trait); }
.adresse { display: flex; align-items: center; gap: 0.4375rem; flex: 1; min-width: 0; padding: 0.3125rem 0.75rem; border-radius: 62.4375rem; background: var(--carte); font: .76rem var(--mono); color: var(--discret); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adresse svg { flex: none; color: var(--vert); }
.fenetre-corps { padding: 1.875rem 1.875rem 2rem; }
.fenetre-corps p { margin: 0; }
.f-surtitre { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--discret); }
.f-titre { font-family: var(--titres); font-size: 1.6rem; font-weight: 600; margin-top: 0.25rem !important; }
.f-texte { font-size: .88rem; color: var(--discret); margin-top: 0.625rem !important; max-width: 30em; }
.f-label { font-size: .8rem; font-weight: 650; margin-top: 1.25rem !important; }
.f-champ { display: flex; gap: 0.625rem; margin-top: 0.375rem !important; padding: 0.6875rem 0.875rem; border: 1px solid var(--trait); border-radius: 0.5625rem; font: 1rem var(--mono); letter-spacing: .12em; color: var(--discret); }
.f-bouton { display: inline-block; margin-top: 0.875rem !important; padding: 0.5625rem 1.25rem; border-radius: 0.5625rem; background: var(--vert); color: var(--carte); font-weight: 650; font-size: .9rem; }
.journal { position: absolute; left: -1.625rem; bottom: 0; border: 1px solid rgba(255, 255, 255, .1); width: min(18.75rem, 78%); padding: 0.875rem 1rem 0.75rem; background: var(--nuit); color: var(--sur-nuit); border-radius: 0.75rem; box-shadow: 0 1.375rem 2.5rem -1.375rem rgba(0, 0, 0, .55); transform: rotate(-2deg); font-size: .8rem; }
.journal p { margin: 0 0 0.3125rem; display: flex; align-items: center; gap: 0.5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.journal .journal-titre { font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sur-nuit-discret); margin-bottom: 0.5625rem; }
.point { flex: none; width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: #6fd0b5; }
.point.non { background: #f08b6a; }

/* Blocs */
.bloc { padding: clamp(4rem, 9vw, 7.25rem) 0; }
.bloc h2 { max-width: 17em; }
.intro { margin: 1.25rem 0 0; max-width: 40em; font-size: 1.1rem; color: var(--discret); }
.creme { background: var(--papier-2); }
.sombre { background: var(--nuit); color: var(--sur-nuit); }
.sombre .surtitre { color: #f0a283; }
.sombre .intro { color: var(--sur-nuit-discret); }
.sombre a { color: #a6e0d1; }
.deux { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(1.75rem, 5vw, 5rem); align-items: start; }
.grand { font-family: var(--titres); font-size: clamp(1.25rem, 2vw, 1.55rem); line-height: 1.4; }

/* Offres */
.offres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 3rem; border-top: 1px solid var(--encre); }
.offre { padding: 1.625rem 1.625rem 1.875rem 0; border-bottom: 1px solid var(--trait); }
.offre + .offre { padding-left: 1.625rem; border-left: 1px solid var(--trait); }
.offre p { margin: 0; color: var(--discret); font-size: .98rem; }
.offre .numero { font: 600 .8rem var(--mono); color: var(--brique); margin-bottom: 1.875rem; }
.offre h3 { margin-bottom: 0.75rem; }
.bandeau { margin: 2.125rem 0 0; padding: 1.125rem 1.375rem; background: var(--vert-clair); border-radius: var(--rayon); font-weight: 550; }


/* Réalisations */
.projets { display: grid; gap: clamp(2.25rem, 5vw, 4rem); margin-top: 3.25rem; }
.projet { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.projet:nth-child(even) .projet-visuel { order: 2; }
.projet-visuel { display: block; aspect-ratio: 16 / 10; border-radius: 1.125rem; overflow: hidden; text-decoration: none; border: 1px solid var(--trait); transition: transform .25s ease; }
.projet-visuel:hover { transform: translateY(-0.25rem); }
@media (prefers-reduced-motion: reduce) { .projet-visuel { transition: none; } .projet-visuel:hover { transform: none; } }
.projet-visuel img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.affiche { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; padding: clamp(1.375rem, 4vw, 2.75rem); color: #fff; overflow: hidden; }
.affiche-nom { position: relative; z-index: 1; font-family: var(--titres); font-weight: 600; font-size: clamp(1.9rem, 4.2vw, 3.3rem); line-height: 1.02; letter-spacing: -.02em; }
.affiche-ligne { position: relative; z-index: 1; margin-top: 0.625rem; font-size: clamp(.9rem, 1.4vw, 1.05rem); opacity: .86; }
.p-guitami .affiche { background: linear-gradient(140deg, #2a1c52 0%, #5b2a86 55%, #e0567a 115%); }
.p-bivouac .affiche { background: linear-gradient(150deg, #23352b 0%, #40604a 60%, #d8a24a 125%); }
.p-quizz .affiche { background: linear-gradient(140deg, #24103d 0%, #57298f 56%, #f6a921 128%); }
.cordes { position: absolute; inset: 0 0 0 44%; display: flex; flex-direction: column; justify-content: center; gap: 9%; transform: rotate(-8deg) scale(1.3); opacity: .5; }
.cordes i { display: block; height: 2px; background: linear-gradient(90deg, transparent, #fff 30%, #fff); }
.cordes i:nth-child(n+4) { height: 0.1875rem; }
.relief { position: absolute; inset: 0; }
.relief i { position: absolute; bottom: 0; background: rgba(255, 255, 255, .13); clip-path: polygon(0 100%, 50% 0, 100% 100%); }
.relief i:nth-child(1) { right: -6%; width: 62%; height: 78%; }
.relief i:nth-child(2) { right: 30%; width: 46%; height: 52%; background: rgba(255, 255, 255, .09); }
.relief i:nth-child(3) { right: 8%; top: 14%; bottom: auto; width: 3.375rem; height: 3.375rem; border-radius: 50%; clip-path: none; background: rgba(255, 233, 180, .5); }
.scene { position: absolute; right: 9%; top: 40%; width: 25%; aspect-ratio: 1; transform: translateY(-50%); }
.scene i { position: absolute; inset: 0; border-radius: 50%; }
.scene i:nth-child(1) { inset: -150%; background: rgba(255, 255, 255, .045); }
.scene i:nth-child(2) { inset: -100%; background: rgba(255, 255, 255, .055); }
.scene i:nth-child(3) { inset: -58%; background: rgba(255, 255, 255, .07); }
.scene i:nth-child(4) { inset: -24%; background: rgba(255, 233, 180, .2); }
.scene i:nth-child(5) { background: #a3160d; transform: translateY(11%); }
.scene i:nth-child(6) { background: #e8382b; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .14); }
.etiquette { margin: 0 0 0.75rem; font-size: .78rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--discret); }
.projet-texte h3 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin-bottom: 0.875rem; }
.projet-texte p { color: var(--discret); }
.lien-fleche { font-weight: 650; text-decoration: none; border-bottom: 1.5px solid currentColor; padding-bottom: 1px; }
.lien-fleche::after { content: " ↗"; }

/* Questions */
.faq details { border-top: 1px solid var(--trait); }
.faq details:last-child { border-bottom: 1px solid var(--trait); }
.faq summary { display: flex; justify-content: space-between; gap: 1.25rem; align-items: baseline; padding: 1.25rem 2px; cursor: pointer; list-style: none; font-family: var(--titres); font-size: 1.24rem; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font: 400 1.5rem/1 var(--texte); color: var(--brique); }
.faq details[open] summary::after { content: "–"; }
.faq p { margin: -0.25rem 0 1.375rem; color: var(--discret); max-width: 46em; }

/* Contact */
.coordonnees { list-style: none; margin: 2.125rem 0 0; padding: 0; }
.coordonnees li { display: grid; grid-template-columns: 6.875rem minmax(0, 1fr); gap: 0.75rem; padding: 0.8125rem 0; border-top: 1px solid rgba(255, 255, 255, .14); overflow-wrap: anywhere; }
.coordonnees span { color: var(--sur-nuit-discret); font-size: .9rem; }
.coordonnees a { color: var(--sur-nuit); font-weight: 600; }
.a-completer { margin-top: 1.75rem; padding: 0.75rem 1rem; border: 1px dashed rgba(255, 255, 255, .35); border-radius: 0.625rem; font-size: .9rem; color: var(--sur-nuit-discret); }
.a-completer code { background: rgba(255, 255, 255, .1); }
.formulaire { background: var(--nuit-2); border: 1px solid rgba(255, 255, 255, .1); border-radius: 1.125rem; padding: clamp(1.375rem, 3vw, 2.125rem); }
.formulaire p { margin: 0 0 1rem; }
.champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
.formulaire label { display: block; margin-bottom: 0.375rem; font-size: .9rem; font-weight: 600; }
.formulaire label span { font-weight: 400; color: var(--sur-nuit-discret); }
.formulaire input, .formulaire select, .formulaire textarea { width: 100%; padding: 0.75rem 0.8125rem; font: inherit; color: var(--sur-nuit); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .2); border-radius: 0.5625rem; }
.formulaire select option { color: #1b1c19; }
.formulaire textarea { resize: vertical; min-height: 8.75rem; }
.formulaire input:focus-visible, .formulaire select:focus-visible, .formulaire textarea:focus-visible { outline: 2px solid #f0a283; outline-offset: 1px; }
.formulaire .bouton { background: #f0a283; border-color: #f0a283; color: #16211e; }
.formulaire .bouton:hover { background: #f6b79d; border-color: #f6b79d; }
.formulaire .bouton[disabled] { opacity: .6; cursor: progress; transform: none; }
.envoi { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.125rem; margin: 0.375rem 0 0 !important; }
.note { font-size: .86rem; color: var(--sur-nuit-discret); }
.piege { position: absolute !important; left: -624.9375rem; width: 1px; height: 1px; overflow: hidden; }
.retour { padding: 0.75rem 1rem; border-radius: 0.625rem; font-weight: 550; }
.retour.ok { background: rgba(111, 208, 181, .16); border: 1px solid rgba(111, 208, 181, .5); }
.retour.erreur { background: rgba(240, 139, 106, .14); border: 1px solid rgba(240, 139, 106, .55); }

/* Pied */
.pied { background: var(--papier-2); border-top: 1px solid var(--trait); padding: 3.25rem 0 1.625rem; font-size: .95rem; color: var(--discret); }
.pied-int { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; }
.pied a { color: var(--encre); }
.pied .marque { margin-bottom: 0.625rem; }
.pied-titre { font-size: .76rem; font-weight: 650; letter-spacing: .11em; text-transform: uppercase; margin-bottom: 0.625rem; }
.pied-bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem; margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--trait); font-size: .88rem; }
.pied-bas p { margin: 0; }

/* Pages de texte */
.texte { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.texte .cadre { max-width: 48.75rem; }
.texte h1 { font-size: clamp(2rem, 4vw, 2.9rem); margin-bottom: 1.75rem; }
.texte h2 { font-size: 1.45rem; margin: 2.5rem 0 0.75rem; }
.texte p, .texte li { color: var(--discret); }
.texte strong { color: var(--encre); }

/* Écrans moyens et petits */
@media (max-width: 980px) {
  .offres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .offre:nth-child(odd) { padding-left: 0; border-left: 0; }
}
@media (max-width: 820px) {
  body { font-size: 1.0313rem; }
  .menu-bouton { display: block; }
  .menu { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 2px; padding: 0.75rem 1.5rem 1.25rem; background: var(--papier); border-bottom: 1px solid var(--trait); }
  .menu.ouvert { display: flex; }
  .menu a { padding: 0.75rem; }
  .menu a.menu-contact { margin: 0.5rem 0 0; text-align: center; }
  .hero-int, .deux, .projet { grid-template-columns: minmax(0, 1fr); }
  .hero-visuel { max-width: 32.5rem; padding-left: 1.125rem; }
  .journal { left: 0; }
  .projet:nth-child(even) .projet-visuel { order: 0; }
  .pied-int { grid-template-columns: minmax(0, 1fr); gap: 1.375rem; }
}
@media (max-width: 560px) {
  .cadre { padding: 0 1.125rem; }
  .offres, .champs { grid-template-columns: minmax(0, 1fr); }
  .offre, .offre + .offre { padding: 1.375rem 0 1.5rem; border-left: 0; }
  .offre .numero { margin-bottom: 0.875rem; }
  .actions .bouton { flex: 1 1 100%; text-align: center; }
  .fenetre-corps { padding: 1.375rem 1.25rem 1.5rem; }
  .coordonnees li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}


/* ===== Mise en page fluide : le site occupe toute la largeur de la fenêtre et suit ses redimensionnements ===== */
html { font-size: clamp(16px, calc(14px + .15vw), 20px); }
.cadre { max-width: none; padding-inline: clamp(1.5rem, 4.5vw, 6rem); }
h1 { font-size: clamp(2.35rem, 1rem + 3.4vw, 6rem); }
h2 { font-size: clamp(1.8rem, 1rem + 1.9vw, 3.6rem); }
/* Accueil : texte et visuel côte à côte au-delà de 820 px ; en dessous, la règle de la section « max-width: 820px » les met l'un sous l'autre */
@media (min-width: 821px) { .hero-int { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
.hero-visuel { width: 100%; max-width: 46rem; justify-self: center; }
.chapo { max-width: 40em; }
/* Réalisations : image et texte côte à côte quand la place le permet, l'un sous l'autre sinon */
.projet { display: flex; flex-wrap: wrap; }
.projet-visuel { flex: 1 1 26rem; }
.projet-texte { flex: 1 1 20rem; }
@media (min-width: 1500px) {
  .projets { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
  .projets .projet .projet-visuel { order: -1; }
}
.formulaire { max-width: 60rem; }

/* Logo dans l'en-tête : symbole M, « Macklos » et point orange (SVG dans inc/commun.php) */
.entete .marque { display: inline-flex; align-items: center; }
.marque-logo { display: block; height: 1.45rem; width: auto; overflow: visible; }
.marque-point { fill: var(--brique); }

/* Bouton « Revenir en haut » (assets/app.js) */
.haut-page { position: fixed; right: calc(1.25rem + env(safe-area-inset-right, 0px)); bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)); z-index: 18; display: grid; place-items: center; width: 2.9rem; height: 2.9rem; padding: 0; color: var(--encre); background: var(--papier); background: color-mix(in srgb, var(--papier) 85%, transparent); border: 1px solid var(--trait); border-radius: 50%; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; visibility: hidden; transform: translateY(.5rem); transition: opacity .25s, transform .25s, visibility .25s, color .2s, border-color .2s; }
.haut-page.visible { opacity: 1; visibility: visible; transform: none; }
.haut-page:hover, .haut-page:focus-visible { color: var(--brique); border-color: var(--brique); }
.haut-page:focus-visible { outline: 2px solid var(--brique); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .haut-page { transition: none; } }