/* ============================================================
   IONIS — feuille de style du site
   Dérivée de l'ordre ionique : pierre, encre, proportion.
   ============================================================ */

@font-face {
  font-family: 'Marcellus';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Marcellus-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Literata-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/Literata-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Literata';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Literata-italic.woff2') format('woff2');
}

:root {
  /* Palette : pierre et encre. Le marbre grec est gris-blanc, pas
     crème ; l'encre sert au texte comme à tout ce qui se clique.
     Aucun accent chromatique : la terre cuite ne marque que le focus. */
  --marbre:        #E8E8E4;
  --marbre-clair:  #F2F2EE;
  --veine:         #CFCFC8;
  --terre:         #94462A;
  --encre:         #1B1A17;

  --fond:              var(--marbre);
  --fond-surface:      var(--marbre-clair);
  --fond-inverse:      var(--encre);

  --texte:             var(--encre);
  --texte-doux:        #4F4D48;
  --texte-tenu:        #666460;
  --texte-inverse:     var(--marbre-clair);
  --texte-accent:      var(--encre);

  --filet:             var(--veine);
  --filet-fort:        #B3B3AC;

  --action-fond:       var(--encre);
  --action-fond-survol:#33312C;
  --action-texte:      var(--marbre-clair);

  --focus:             var(--terre);

  --police-titre: 'Marcellus', Georgia, serif;
  --police:       'Literata', Georgia, 'Times New Roman', serif;
  --police-champ: system-ui, -apple-system, 'Segoe UI', sans-serif;

  --t-legende:  0.8125rem;
  --t-corps:    1rem;
  --t-chapo:    1.25rem;
  --t-titre-3:  1.5625rem;
  --t-titre-2:  clamp(1.9rem, 3.6vw, 2.9rem);
  --t-titre-1:  clamp(2.4rem, 4.8vw, 4.2rem);
  --t-affiche:  clamp(2.8rem, 6vw, 5.5rem);

  --mesure: 68ch;

  --e-1:  0.25rem;
  --e-2:  0.5rem;
  --e-3:  0.75rem;
  --e-4:  1rem;
  --e-6:  1.5rem;
  --e-8:  2rem;
  --e-12: 3rem;
  --e-16: 4rem;
  --e-24: 6rem;
  --e-32: 8rem;

  --rayon:       0;
  --rayon-champ: 2px;

  --cadre: 1100px;
  --bord: var(--e-8);
  --bord-gauche: max(var(--bord), env(safe-area-inset-left, 0px));
  --bord-droit:  max(var(--bord), env(safe-area-inset-right, 0px));
}

/* --- Socle ---------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--fond); color-scheme: light; overflow-x: clip; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police);
  font-size: var(--t-corps);
  line-height: 1.65;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--texte-accent); }
a, button { -webkit-tap-highlight-color: transparent; }

::selection { background: var(--encre); color: var(--marbre-clair); }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.base :focus-visible, .ligne:focus-visible { outline-color: var(--marbre-clair); }

h1, h2, h3 {
  font-family: var(--police-titre);
  font-weight: 400;
  margin: 0;
  text-wrap: balance;
  hyphens: auto;
  overflow-wrap: anywhere;
}

.evitement {
  position: absolute;
  z-index: 3;
  left: var(--e-4);
  top: -100px;
  padding: var(--e-3) var(--e-4);
  background: var(--encre);
  color: var(--marbre-clair);
  text-decoration: none;
}
.evitement:focus { top: var(--e-4); }

/* --- En-tête -------------------------------------------------- */

.entete {
  border-bottom: 1px solid var(--filet);
  position: relative;
  z-index: 2;
  background: var(--fond);
}
.entete-int {
  max-width: var(--cadre);
  margin: 0 auto;
  padding: var(--e-6) var(--bord-droit) var(--e-6) var(--bord-gauche);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-8);
}
.logo-lien { display: inline-flex; color: var(--texte); }
.entete nav { display: flex; align-items: center; gap: var(--e-4); }
.entete nav a {
  display: inline-block;
  padding-block: var(--e-3);
  margin-block: calc(-1 * var(--e-3));
  color: var(--texte);
  text-decoration: none;
}
.entete nav a:hover { text-decoration: underline; text-decoration-color: var(--encre); text-underline-offset: 0.3em; }
.entete nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--filet-fort); text-underline-offset: 0.3em; }
.median { color: var(--texte); }

/* --- Boutons -------------------------------------------------- */

.bouton {
  display: inline-block;
  padding: var(--e-4) var(--e-8);
  background: var(--action-fond);
  color: var(--action-texte);
  border: 0;
  border-radius: var(--rayon);
  font-family: var(--police);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.65;
  text-decoration: none;
  cursor: pointer;
  transition: background 160ms ease;
}
.bouton:hover, .bouton:active { background: var(--action-fond-survol); }
.bouton--inverse { background: var(--fond-surface); color: var(--encre); }
.bouton--inverse:hover, .bouton--inverse:active { background: var(--fond); }

/* --- Héros (accueil) ------------------------------------------ */

.heros {
  position: relative;
  overflow: hidden;
  overflow: clip;
  min-height: max(640px, calc(100vh - 73px));
  min-height: max(640px, calc(100svh - 73px));
  z-index: 1;
  display: flex;
  align-items: center;
}
#volute {
  --w: clamp(760px, 66vw, 1260px);
  position: absolute;
  top: 52%;
  right: calc(var(--w) * -0.5 + 7vw);
  width: var(--w);
  height: var(--w);
  margin-top: calc(var(--w) * -0.5);
  pointer-events: none;
  z-index: 0;
}
#volute path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: volute-trace 2600ms cubic-bezier(0.22, 1, 0.36, 1) 240ms both;
}
#hero-contenu {
  position: relative;
  z-index: 1;
  max-width: var(--cadre);
  margin: 0 auto;
  padding: var(--e-8) var(--bord-droit) var(--e-8) var(--bord-gauche);
  width: 100%;
}
#hero-contenu h1 {
  font-size: var(--t-affiche);
  line-height: 0.98;
  letter-spacing: -0.01em;
  max-width: 11em;
}
#hero-contenu .chapo {
  font-size: var(--t-chapo);
  color: var(--texte-doux);
  max-width: 46ch;
  margin: var(--e-8) 0 var(--e-12);
  text-wrap: pretty;
}
@keyframes volute-trace {
  0%   { stroke-dashoffset: 1; opacity: 0; }
  3%   { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes settle { from { opacity: 0; transform: translateY(0.35em); } }
#hero-contenu > h1 { animation: settle 700ms cubic-bezier(0.16, 1, 0.3, 1) both; }
#hero-contenu > p  { animation: settle 700ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both; }
#hero-contenu > a  { animation: settle 700ms cubic-bezier(0.16, 1, 0.3, 1) 240ms both; }

/* --- En-tête de page (pages intérieures) ---------------------- */

.tete-int {
  max-width: var(--cadre);
  margin: 0 auto;
  padding: var(--e-24) var(--bord-droit) var(--e-12) var(--bord-gauche);
}
.tete h1 {
  font-size: var(--t-titre-1);
  line-height: 1;
  letter-spacing: -0.01em;
  max-width: 14em;
}
.tete .chapo {
  font-size: var(--t-chapo);
  color: var(--texte-doux);
  max-width: 46ch;
  margin: var(--e-6) 0 0;
  text-wrap: pretty;
}
.tete--animee h1    { animation: settle 1000ms cubic-bezier(0.33, 1, 0.68, 1) both; }
.tete--animee .chapo { animation: settle 1000ms cubic-bezier(0.33, 1, 0.68, 1) 160ms both; }

/* --- La colonne : fût et contenu ------------------------------ */

#colonne, .base {
  --marge:  max(0px, calc((100% - var(--cadre)) / 2 + 2rem - 220px));
  --gauche: calc(var(--marge) + 220px);
  --droite: max(var(--bord-droit), calc((100% - var(--cadre)) / 2 + 2rem));
}
#colonne { position: relative; overflow-x: hidden; overflow-x: clip; }
#fut {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--marge);
  width: 130px;
  background-image: repeating-linear-gradient(to right, var(--veine) 0, var(--veine) 5px, transparent 5px, transparent 15px);
}
#contenu { padding: var(--e-32) var(--droite) var(--e-32) var(--gauche); }
.tete + #colonne #contenu { padding-top: var(--e-16); }

/* --- Services (liste de l'accueil) ---------------------------- */

#services { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--e-12); align-items: start; }
#services h2 { position: sticky; top: var(--e-8); font-size: var(--t-titre-3); line-height: 1.15; }
#services .liste { border-top: 1px solid var(--filet); }
.ligne {
  position: relative;
  isolation: isolate;
  display: block;
  padding: var(--e-8) 0;
  border-bottom: 1px solid var(--filet);
  color: inherit;
  text-decoration: none;
  transition: color 220ms ease;
}
.ligne::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -1px; bottom: -1px;
  left: calc(-1 * var(--e-6));
  right: -100vw;
  background: var(--encre);
  opacity: 0;
  transition: opacity 220ms ease;
}
.ligne h3 { font-size: var(--t-titre-2); line-height: 1.05; }
.ligne p { margin: var(--e-2) 0 0; color: var(--texte-doux); max-width: var(--mesure); transition: color 220ms ease; }
.ligne:hover, .ligne:focus-visible, .ligne:active,
.ligne:hover p, .ligne:focus-visible p, .ligne:active p { color: var(--texte-inverse); }
.ligne:hover::before, .ligne:focus-visible::before, .ligne:active::before { opacity: 1; }
.ligne:focus-visible { outline-offset: -3px; }

/* --- Méthode et publics (accueil) ----------------------------- */

#methode { margin-top: var(--e-32); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--e-16); align-items: start; }
#methode h2 { font-size: var(--t-titre-2); line-height: 1.05; max-width: 16ch; }
#methode p { color: var(--texte-doux); max-width: var(--mesure); margin: 0 0 var(--e-4); text-wrap: pretty; }
#methode p:last-child { margin-bottom: 0; }

#publics { margin-top: var(--e-32); }
#publics h2 { font-size: var(--t-titre-2); line-height: 1.05; max-width: 18ch; }
#publics > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e-12);
  margin-top: var(--e-12);
  padding-top: var(--e-8);
  border-top: 1px solid var(--filet);
}
#publics p { color: var(--texte-doux); margin: 0; text-wrap: pretty; }
#publics strong { font-weight: 500; color: var(--texte); }

/* --- Services (page) ------------------------------------------ */

.prestations { border-bottom: 1px solid var(--filet); }
.prestation {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--e-8);
  padding: var(--e-12) 0;
  border-top: 1px solid var(--filet);
  scroll-margin-top: var(--e-8);
}
a.prestation { display: grid; padding: var(--e-12) 0; border-bottom: 0; }
.prestation h2 { font-size: var(--t-titre-2); line-height: 1.05; }
.prestation p { margin: 0; color: var(--texte-doux); max-width: var(--mesure); text-wrap: pretty; }
.prestation p + p { margin-top: var(--e-4); }

/* --- Contact (page) ------------------------------------------- */

.contact-grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--e-16); align-items: start; }
.coordonnees h2 { font-size: var(--t-titre-3); line-height: 1.15; margin-bottom: var(--e-4); }
.coordonnees p { margin: 0 0 var(--e-2); color: var(--texte-doux); }
.coordonnees a, .formulaire a, .juridique a {
  color: var(--texte);
  text-decoration: underline;
  text-decoration-color: var(--filet-fort);
  text-underline-offset: 0.3em;
  transition: text-decoration-color 160ms ease;
}
.coordonnees a:hover, .formulaire a:hover, .juridique a:hover { text-decoration-color: var(--encre); }

.formulaire { display: grid; gap: var(--e-6); }
.formulaire label { display: block; font-weight: 500; margin-bottom: var(--e-2); }
.champ {
  width: 100%;
  padding: var(--e-3) var(--e-4);
  background: var(--fond-surface);
  border: 1px solid var(--texte-tenu);
  border-radius: var(--rayon-champ);
  font-family: var(--police-champ);
  font-size: var(--t-corps);
  line-height: 1.5;
  color: var(--texte);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.champ::placeholder { color: var(--texte-tenu); }
.champ:focus { border-color: var(--encre); outline: none; box-shadow: 0 0 0 3px rgba(27, 26, 23, 0.12); }
textarea.champ { min-height: 12rem; resize: vertical; }
.formulaire .note { font-size: var(--t-legende); color: var(--texte-tenu); max-width: var(--mesure); margin: 0; }
.formulaire .actions { margin-top: var(--e-2); }

/* --- Pages juridiques et pages simples ------------------------ */

.juridique { max-width: var(--mesure); }
.juridique .date { font-size: var(--t-legende); color: var(--texte-tenu); margin: 0 0 var(--e-12); }
.juridique h2 { font-size: var(--t-titre-3); line-height: 1.15; margin: var(--e-12) 0 var(--e-4); }
.juridique h3 { font-size: var(--t-chapo); line-height: 1.2; margin: var(--e-8) 0 var(--e-3); }
.juridique p { margin: 0 0 var(--e-4); color: var(--texte-doux); text-wrap: pretty; }
.juridique ul { list-style: none; padding: 0; margin: 0 0 var(--e-6); border-bottom: 1px solid var(--filet); }
.juridique li { padding: var(--e-2) 0; color: var(--texte-doux); border-top: 1px solid var(--filet); }
.juridique strong { font-weight: 500; color: var(--texte); }

/* --- Page service détaillée --------------------------------- */

.article section {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--e-16);
  padding: var(--e-12) 0;
  border-top: 1px solid var(--filet);
}
.article section:first-child { border-top: 0; padding-top: 0; }
.article section:last-child { padding-bottom: 0; }
.article h2 { font-size: var(--t-titre-2); line-height: 1.05; max-width: 14ch; }
.article p { margin: 0 0 var(--e-4); color: var(--texte-doux); max-width: var(--mesure); text-wrap: pretty; }
.article p:last-child { margin-bottom: 0; }
.article ul { list-style: none; padding: 0; margin: 0; max-width: var(--mesure); border-bottom: 1px solid var(--filet); }
.article li { padding: var(--e-3) 0; color: var(--texte-doux); border-top: 1px solid var(--filet); text-wrap: pretty; }
.article a {
  color: var(--texte);
  text-decoration: underline;
  text-decoration-color: var(--filet-fort);
  text-underline-offset: 0.3em;
  transition: text-decoration-color 160ms ease;
}
.article a:hover { text-decoration-color: var(--encre); }

.simple { max-width: var(--mesure); }
.simple p { color: var(--texte-doux); margin: 0 0 var(--e-8); text-wrap: pretty; }

/* --- La base : bande contact ---------------------------------- */

.base { background: var(--fond-inverse); color: var(--texte-inverse); }
.base > div {
  padding: var(--e-32) var(--droite) var(--e-32) var(--gauche);
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--e-16);
  align-items: end;
}
.base h2 { font-size: var(--t-titre-2); line-height: 1.05; max-width: 20ch; }
.base p { margin: var(--e-6) 0 0; font-size: var(--t-chapo); color: var(--veine); }
.base ::selection { background: var(--marbre-clair); color: var(--encre); }
.base .courriel {
  color: var(--texte-inverse);
  text-decoration: underline;
  text-decoration-color: var(--filet-fort);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  transition: text-decoration-color 160ms ease;
}
.base .courriel:hover { text-decoration-color: var(--texte-inverse); }

/* --- Pied de page --------------------------------------------- */

.pied { background: var(--fond-surface); border-top: 1px solid var(--filet-fort); }
.pied-int {
  max-width: var(--cadre);
  margin: 0 auto;
  padding: var(--e-12) var(--bord-droit) var(--e-12) var(--bord-gauche);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-8);
  flex-wrap: wrap;
}
.pied-liens { display: flex; align-items: center; gap: var(--e-6); flex-wrap: wrap; font-size: var(--t-legende); color: var(--texte-doux); overflow-wrap: anywhere; }
.pied a {
  display: inline-block;
  padding-block: var(--e-3);
  margin-block: calc(-1 * var(--e-3));
  color: var(--texte);
  text-decoration: underline;
  text-decoration-color: var(--filet-fort);
  text-underline-offset: 0.3em;
  transition: text-decoration-color 160ms ease;
}
.pied a:hover { text-decoration-color: var(--encre); }
.pied-lieu { width: 100%; margin: var(--e-6) 0 0; font-size: var(--t-legende); color: var(--texte-doux); max-width: var(--mesure); text-wrap: pretty; }
.pied-copie { width: 100%; margin: var(--e-2) 0 0; font-size: var(--t-legende); color: var(--texte-tenu); }

/* --- Réalisations (accueil) ----------------------------------- */

#realisations { margin-top: var(--e-32); }
.realisations-tete {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--e-12);
  align-items: end;
  padding-bottom: var(--e-8);
  border-bottom: 1px solid var(--filet);
}
.realisations-tete h2 { font-size: var(--t-titre-3); line-height: 1.15; }
.realisations-tete p { margin: 0; color: var(--texte-doux); max-width: var(--mesure); text-wrap: pretty; }
.realisations-tete a, .realisation-lien {
  color: var(--texte);
  text-decoration: underline;
  text-decoration-color: var(--filet-fort);
  text-underline-offset: 0.3em;
  transition: text-decoration-color 160ms ease;
}
.realisations-tete a:hover, .realisation-lien:hover { text-decoration-color: var(--encre); }
.vitrine {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e-8) var(--e-6);
  margin-top: var(--e-8);
}
.piece { display: block; color: inherit; text-decoration: none; }
.piece-nom { display: block; margin-top: var(--e-3); font-family: var(--police-titre); font-size: var(--t-chapo); line-height: 1.2; }
.piece-lieu { display: block; font-size: var(--t-legende); color: var(--texte-tenu); }
.piece:hover .piece-nom { text-decoration: underline; text-decoration-color: var(--filet-fort); text-underline-offset: 0.3em; }

/* Les captures : posées sur la pierre, en couleur. */
.capture {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
  border: 1px solid var(--filet);
  background: var(--fond-surface);
  mix-blend-mode: multiply;
}

/* --- Réalisations (page) -------------------------------------- */

.realisations { border-bottom: 1px solid var(--filet); }
.realisation { padding: var(--e-12) 0; border-top: 1px solid var(--filet); scroll-margin-top: var(--e-8); }
.realisation:first-child { border-top: 0; padding-top: 0; }
.realisation-image { display: block; }
.realisation-corps {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--e-8) var(--e-16);
  margin-top: var(--e-8);
}
.realisation h2 { font-size: var(--t-titre-2); line-height: 1.05; }
.realisation-lieu { margin: var(--e-2) 0 var(--e-4); color: var(--texte-tenu); }
.realisation-corps p { margin: 0 0 var(--e-4); color: var(--texte-doux); max-width: var(--mesure); text-wrap: pretty; }
.realisation-traits {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-3);
  font-size: var(--t-legende);
  color: var(--texte-tenu);
}
.realisation-traits li:not(:last-child)::after { content: "·"; margin-left: var(--e-3); }

/* --- Écrans étroits ------------------------------------------- */

@media (max-width: 900px) {
  #colonne { --marge: 0px; --gauche: 88px; }
  .base { --marge: 0px; --gauche: var(--bord-gauche); }
  .base h2 { font-size: var(--t-titre-3); line-height: 1.15; max-width: none; }
  .base p { font-size: var(--t-corps); }
  .base .bouton { max-width: 100%; }
  #fut { width: 56px; }
  #contenu { padding-top: var(--e-16); padding-bottom: var(--e-16); }
  .tete-int { padding-top: var(--e-16); padding-bottom: var(--e-8); }
  #services, #methode, .prestation, .contact-grille, .article section, .realisation-corps { grid-template-columns: 1fr; gap: var(--e-8); }
  .realisations-tete { grid-template-columns: 1fr; gap: var(--e-4); }
  .vitrine { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #services h2 { position: static; }
  #methode, #publics, #realisations { margin-top: var(--e-24); }
  #publics > div { grid-template-columns: 1fr; gap: var(--e-6); }
  .base > div { padding-top: var(--e-12); padding-bottom: var(--e-12); grid-template-columns: 1fr; gap: var(--e-8); }
  .base > div > div { min-width: 0; }
  #volute { display: none; }
}

@media (max-width: 480px) {
  :root { --bord: var(--e-6); }
  #colonne { --gauche: 72px; }
  #fut { width: 40px; }
  .vitrine { grid-template-columns: 1fr; }
  .entete-int { padding-top: var(--e-4); padding-bottom: var(--e-4); gap: var(--e-4); flex-wrap: wrap; }
  .entete .logo-lien svg { width: 110px; height: 21px; }
  .entete nav { gap: var(--e-3); }
}

@media (max-width: 380px) {
  :root { --bord: var(--e-4); }
}

/* --- Impression ----------------------------------------------- */

@media print {
  html, body { background: #fff; color: #000; }
  .entete nav, .evitement, #fut, #volute, .base { display: none; }
  #colonne, .base { --gauche: 0px; --droite: 0px; }
  #contenu, .tete-int { padding: 0; }
  .juridique, .simple { max-width: none; }
  .capture { mix-blend-mode: normal; }
  a { color: #000; text-decoration: none; }
  .juridique a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}

/* --- Mouvement réduit ----------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; }
  #volute path { animation: none !important; stroke-dashoffset: 0 !important; opacity: 1 !important; }
  #hero-contenu > *, .tete--animee h1, .tete--animee .chapo { animation: none !important; }
}