/* ==========================================================================
   EXZA — feuille de style unique
   Palette : voir Brand/Tests vince/Palette.png
   Aucune animation d'image, aucun défilement automatique, aucun GIF.
   ========================================================================== */

/* --- Fontes ------------------------------------------------------------- */
@font-face{font-family:Inter;src:url(../fonts/inter-latin-300-normal.woff2) format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/inter-latin-400-normal.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/inter-latin-500-normal.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Newsreader;src:url(../fonts/newsreader-latin-300-normal.woff2) format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:Newsreader;src:url(../fonts/newsreader-latin-400-normal.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Newsreader;src:url(../fonts/newsreader-latin-400-italic.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}

/* --- Variables ---------------------------------------------------------- */
:root{
  --blanc:#f2efea;   /* blanc cassé lumineux — fond principal */
  --beige:#d8cfc4;   /* beige calcaire chaud */
  --terre:#a88f78;   /* terre méditerranéenne */
  --vert:#5e6b5a;    /* vert pin — accent, liens */
  --gris:#4a4a48;    /* gris minéral profond */
  --noir:#2b2b2a;    /* noir chaud */

  --trait:rgba(43,43,42,.16);
  --trait-clair:rgba(242,239,234,.22);

  --sans:Inter,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --serif:Newsreader,'Iowan Old Style',Georgia,serif;

  --marge:clamp(1.25rem,5vw,5rem);
  --large:1560px;
  --texte:70ch;
}

/* --- Base --------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}

body{
  margin:0;
  background:var(--blanc);
  color:var(--noir);
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(1rem,.95rem + .2vw,1.0625rem);
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--vert);outline-offset:3px}
::selection{background:var(--terre);color:var(--blanc)}

h1,h2,h3,h4{margin:0;font-weight:400;letter-spacing:-.015em;overflow-wrap:break-word}
.insecable{white-space:nowrap}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}
hr{border:0;border-top:1px solid var(--trait);margin:0}

/* --- Utilitaires de mise en page ---------------------------------------- */
.enveloppe{max-width:var(--large);margin-inline:auto;padding-inline:var(--marge)}
.pleine-largeur{width:100%}
.mesure{max-width:var(--texte)}
.saut-contenu{position:absolute;left:-9999px}
.saut-contenu:focus{left:var(--marge);top:.5rem;z-index:100;background:var(--noir);color:var(--blanc);padding:.6rem 1rem}

.section{padding-block:clamp(3.5rem,9vw,7.5rem)}
.section--serre{padding-block:clamp(2.5rem,6vw,5rem)}
.section--sombre{background:var(--noir);color:var(--blanc)}
.section--sombre a{color:var(--blanc)}
.section--beige{background:var(--beige)}
.section + .section:not(.section--sombre):not(.section--beige){border-top:1px solid var(--trait)}

/* --- Typographie -------------------------------------------------------- */
.surtitre{
  font-size:.6875rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:400;
  color:var(--terre);
  margin:0 0 1.75rem;
}
.section--sombre .surtitre{color:var(--terre)}

.titre-geant{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(2.35rem,6.2vw,5.25rem);
  line-height:1.03;
  letter-spacing:-.025em;
}
.titre-section{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(1.8rem,3.2vw,2.7rem);
  line-height:1.1;
  letter-spacing:-.02em;
}
.titre-bloc{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(1.35rem,2.1vw,1.85rem);
  line-height:1.2;
}
.titre-petit{
  font-family:var(--sans);
  font-size:.75rem;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.chapeau{
  font-size:clamp(1.0625rem,1rem + .45vw,1.3125rem);
  line-height:1.6;
  color:var(--gris);
  font-weight:300;
}
.section--sombre .chapeau{color:rgba(242,239,234,.78)}
.serif{font-family:var(--serif);font-weight:300}
.discret{color:var(--gris);font-size:.875rem;line-height:1.55}
.section--sombre .discret{color:rgba(242,239,234,.6)}

/* --- Liens -------------------------------------------------------------- */
.lien{
  color:var(--vert);
  border-bottom:1px solid currentColor;
  padding-bottom:1px;
  transition:color .18s ease;
}
.lien:hover{color:var(--noir)}
.section--sombre .lien{color:var(--blanc);opacity:.9}
.section--sombre .lien:hover{opacity:1;color:var(--terre)}

.bouton{
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  font-size:.75rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:500;
  padding:.95rem 1.6rem;
  border:1px solid var(--noir);
  color:var(--noir);
  background:transparent;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.bouton:hover{background:var(--noir);color:var(--blanc)}
.bouton--plein{background:var(--noir);color:var(--blanc)}
.bouton--plein:hover{background:var(--vert);border-color:var(--vert)}
.section--sombre .bouton{border-color:rgba(242,239,234,.5);color:var(--blanc)}
.section--sombre .bouton:hover{background:var(--blanc);color:var(--noir);border-color:var(--blanc)}
.bouton .fleche{font-size:1em;line-height:1}

/* --- En-tête ------------------------------------------------------------ */
.entete{
  position:sticky;top:0;z-index:50;
  background:var(--blanc);
  border-bottom:1px solid var(--trait);
}
.entete__barre{
  max-width:var(--large);margin-inline:auto;padding-inline:var(--marge);
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
  /* respiration garantie au-dessus et au-dessous du logo, quelle que soit la largeur */
  padding-block:clamp(.9rem,1.6vw,1.35rem);
}
.entete__logo{display:block;color:var(--noir)}
.entete__logo :is(img,svg){width:clamp(100px,11vw,128px);height:auto;display:block}

.nav{display:flex;align-items:center;gap:clamp(1.1rem,2.4vw,2.4rem)}
.nav a{
  font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;font-weight:400;
  color:var(--gris);padding-block:.35rem;border-bottom:1px solid transparent;
  transition:color .18s ease,border-color .18s ease;
}
.nav a:hover{color:var(--noir)}
.nav a[aria-current=page]{color:var(--noir);border-bottom-color:var(--terre)}

.menu-bouton{
  display:none;background:none;border:0;padding:.5rem;margin-right:-.5rem;
  cursor:pointer;color:var(--noir);font:inherit;
}
.menu-bouton span{display:block;width:22px;height:1px;background:currentColor;margin:5px 0}

@media (max-width:820px){
  .menu-bouton{display:block}
  .nav{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:flex-start;gap:0;
    background:var(--blanc);border-bottom:1px solid var(--trait);
    padding:.5rem var(--marge) 1.5rem;
  }
  .nav[data-ouvert=true]{display:flex}
  .nav a{width:100%;padding-block:.85rem;border-bottom:1px solid var(--trait)}
  .nav a[aria-current=page]{border-bottom-color:var(--terre)}
}

/* --- Héros -------------------------------------------------------------- */
.heros{padding-block:clamp(3.5rem,10vw,8rem) clamp(2.5rem,6vw,4.5rem)}
.heros__grille{display:grid;gap:clamp(1.75rem,4vw,3.5rem)}
@media (min-width:900px){
  .heros__grille{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);align-items:end}
}
.heros__texte .titre-geant{max-width:9.5em}
.heros__annexe{border-top:1px solid var(--trait);padding-top:1.5rem}
.heros__actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2rem}

/* --- Figures ------------------------------------------------------------ */
figure{margin:0}
.figure img{width:100%}
.figure figcaption,.legende{
  margin-top:.85rem;
  font-size:.75rem;line-height:1.5;color:var(--gris);
  letter-spacing:.02em;
  display:flex;flex-wrap:wrap;gap:.4rem 1rem;justify-content:space-between;
}
.section--sombre .figure figcaption{color:rgba(242,239,234,.6)}
.credit{color:var(--terre)}

.bande-image{padding-inline:var(--marge);max-width:var(--large);margin-inline:auto}
.bande-image--bord{padding-inline:0;max-width:none}

/* --- Grilles génériques ------------------------------------------------- */
.grille{display:grid;gap:clamp(1.75rem,3.5vw,3rem)}
.grille--2{grid-template-columns:1fr}
.grille--3{grid-template-columns:1fr}
.grille--4{grid-template-columns:1fr 1fr}
@media (min-width:760px){
  .grille--2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grille--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grille--4{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.grille--intro{gap:clamp(1.5rem,4vw,4.5rem)}
@media (min-width:960px){
  .grille--intro{grid-template-columns:minmax(0,22rem) minmax(0,1fr)}
}

/* --- Cartes de service -------------------------------------------------- */
.carte{border-top:1px solid var(--noir);padding-top:1.35rem}
.carte__numero{
  font-size:.6875rem;letter-spacing:.16em;color:var(--terre);
  display:block;margin-bottom:1.1rem;
}
.carte h3{margin-bottom:.7rem}
.carte ul{margin:1rem 0 0;padding:0;list-style:none}
.carte li{
  font-size:.9375rem;color:var(--gris);line-height:1.5;
  padding:.5rem 0;border-top:1px solid var(--trait);
}
.carte li:first-child{border-top:0;padding-top:0}
.section--sombre .carte{border-top-color:var(--trait-clair)}
.section--sombre .carte li{color:rgba(242,239,234,.72);border-top-color:var(--trait-clair)}

/* --- Phases numérotées -------------------------------------------------- */
.phases{border-top:1px solid var(--trait)}
.phase{
  display:grid;gap:.5rem 2.5rem;
  padding-block:clamp(1.5rem,3vw,2.25rem);
  border-bottom:1px solid var(--trait);
}
@media (min-width:760px){
  .phase{grid-template-columns:5rem minmax(0,22ch) minmax(0,1fr);align-items:baseline}
}
.phase__numero{font-size:.75rem;letter-spacing:.16em;color:var(--terre)}
.phase__titre{font-family:var(--serif);font-weight:300;font-size:1.35rem;line-height:1.25}
.phase__texte{color:var(--gris);font-size:.9375rem;line-height:1.6;margin:0}

/* --- Projets ------------------------------------------------------------ */
.projet{display:grid;gap:clamp(1.5rem,3.5vw,3.5rem);align-items:center}
@media (min-width:900px){
  .projet{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
  .projet--inverse .projet__media{order:2}
}
.projet + .projet{margin-top:clamp(3rem,7vw,6rem);padding-top:clamp(3rem,7vw,6rem);border-top:1px solid var(--trait)}
.projet__media img{width:100%}
.projet__meta{
  font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--terre);margin:0 0 1rem;
}
.projet__titre{margin-bottom:1rem}
.projet__lien{margin-top:1.75rem;display:inline-flex}

/* --- Fiche technique ---------------------------------------------------- */
.fiche{margin:0;border-top:1px solid var(--noir)}
.fiche__ligne{
  display:grid;grid-template-columns:minmax(0,11ch) minmax(0,1fr);
  gap:.5rem 1.5rem;padding:.7rem 0;border-bottom:1px solid var(--trait);
}
.fiche dt{
  font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gris);padding-top:.2rem;
}
.fiche dd{margin:0;font-size:.9375rem;line-height:1.5}

/* --- Galerie (statique, sans interaction) ------------------------------- */
.galerie{display:grid;gap:clamp(.75rem,1.6vw,1.5rem)}
.galerie--2{grid-template-columns:1fr}
@media (min-width:760px){.galerie--2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.galerie figure{display:flex;flex-direction:column}
.galerie img{width:100%}
.galerie--pleine{grid-template-columns:1fr}

/* --- Citations / recommandations ---------------------------------------- */
.citation{margin:0;border-top:1px solid var(--noir);padding-top:1.5rem}
.section--sombre .citation{border-top-color:var(--trait-clair)}
.citation blockquote{
  margin:0 0 1.5rem;
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.2rem,1.8vw,1.5rem);line-height:1.4;
  letter-spacing:-.01em;
}
.citation figcaption{font-size:.8125rem;line-height:1.5;color:var(--gris)}
.section--sombre .citation figcaption{color:rgba(242,239,234,.66)}
.citation figcaption strong{font-weight:500;color:var(--noir);display:block}
.section--sombre .citation figcaption strong{color:var(--blanc)}

/* --- Manifeste ---------------------------------------------------------- */
.manifeste{font-family:var(--serif);font-weight:300}
.manifeste p{
  font-size:clamp(1.125rem,1rem + .6vw,1.4375rem);
  line-height:1.62;margin-bottom:1.4em;
}
.manifeste p:first-of-type::first-letter{
  float:left;font-size:3.4em;line-height:.82;
  padding:.06em .12em 0 0;color:var(--terre);
}
.manifeste .signature{
  font-family:var(--sans);font-size:.75rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--terre);margin-top:2.5rem;
}

/* --- Tableau de références ---------------------------------------------- */
.references{border-top:1px solid var(--noir)}
.reference{
  display:grid;gap:.35rem 2rem;
  padding-block:1.15rem;border-bottom:1px solid var(--trait);
}
@media (min-width:860px){
  .reference{grid-template-columns:minmax(0,26ch) minmax(0,1fr) minmax(0,16ch);align-items:baseline}
}
.reference__nom{font-family:var(--serif);font-size:1.1875rem;font-weight:300;line-height:1.25}
.reference__detail{font-size:.875rem;color:var(--gris);line-height:1.5}
.reference__mission{
  font-size:.6875rem;letter-spacing:.13em;text-transform:uppercase;color:var(--terre);
}

/* --- Liste de faits (chiffres) ------------------------------------------ */
.faits{display:grid;gap:1.5rem;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:760px){.faits{grid-template-columns:repeat(4,minmax(0,1fr))}}
.fait{border-top:1px solid var(--trait);padding-top:1rem}
.fait__valeur{font-family:var(--serif);font-weight:300;font-size:clamp(1.6rem,3vw,2.4rem);line-height:1}
.fait__libelle{font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);margin-top:.6rem}
.section--sombre .fait{border-top-color:var(--trait-clair)}
.section--sombre .fait__libelle{color:rgba(242,239,234,.6)}

/* --- CV ----------------------------------------------------------------- */
.cv{border-top:1px solid var(--noir)}
.cv__entree{
  display:grid;gap:.3rem 2rem;padding-block:1.1rem;border-bottom:1px solid var(--trait);
}
@media (min-width:700px){
  .cv__entree{grid-template-columns:minmax(0,10ch) minmax(0,1fr)}
}
.cv__date{font-size:.75rem;letter-spacing:.1em;color:var(--terre);padding-top:.25rem}
.cv__poste{font-size:.9375rem;line-height:1.5}
.cv__poste strong{font-weight:500}
.cv__lieu{color:var(--gris);font-size:.875rem}

/* --- Coordonnées -------------------------------------------------------- */
.coordonnees{display:grid;gap:1.75rem}
@media (min-width:700px){.coordonnees{grid-template-columns:repeat(3,minmax(0,1fr))}}
.coordonnee{border-top:1px solid var(--trait-clair);padding-top:1rem}
.coordonnee dt{
  font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(242,239,234,.55);margin-bottom:.55rem;
}
.coordonnee dd{margin:0;font-size:1.0625rem;line-height:1.5}

/* --- Pied de page ------------------------------------------------------- */
.pied{background:var(--noir);color:var(--blanc);padding-block:clamp(3rem,6vw,4.5rem) 2rem}
.pied a{color:rgba(242,239,234,.75);transition:color .18s ease}
.pied a:hover{color:var(--blanc)}
.pied__haut{display:grid;gap:2.5rem;padding-bottom:2.75rem;border-bottom:1px solid var(--trait-clair)}
@media (min-width:860px){
  .pied__haut{grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));gap:3rem}
}
.pied__logo{color:var(--blanc);display:block;margin-bottom:1.5rem}
.pied__logo :is(img,svg){width:150px;height:auto}
.pied h2{
  font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(242,239,234,.55);margin-bottom:1.1rem;font-weight:400;
}
.pied ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.pied li{font-size:.9375rem}
.pied__bas{
  display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem;justify-content:space-between;
  padding-top:1.75rem;font-size:.75rem;color:rgba(242,239,234,.5);
}

/* --- Logo « Inscrit à l'Ordre des architectes » -------------------------- */
.logo-ordre{display:flex;align-items:center;gap:.85rem;flex-wrap:wrap}
.logo-ordre img{width:145px;height:auto}
.logo-ordre--grand img{width:210px}
.bloc-ordre{
  display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.75rem;
  border-top:1px solid var(--trait);padding-top:1.35rem;margin-top:1.5rem;
}
.section--sombre .bloc-ordre{border-top-color:var(--trait-clair)}

/* --- Divers ------------------------------------------------------------- */
.liste-nue{list-style:none;margin:0;padding:0}
.liste-traits{list-style:none;margin:1.25rem 0 0;padding:0;border-top:1px solid var(--trait)}
.liste-traits li{padding:.65rem 0;border-bottom:1px solid var(--trait);font-size:.9375rem;color:var(--gris)}
.section--sombre .liste-traits,.section--sombre .liste-traits li{border-color:var(--trait-clair)}
.section--sombre .liste-traits li{color:rgba(242,239,234,.75)}

.rubrique + .rubrique{margin-top:clamp(2.5rem,5vw,4rem)}
.pile > * + *{margin-top:1.5rem}
.pile-large > * + *{margin-top:clamp(2rem,4vw,3.5rem)}

@media print{
  .entete,.pied,.bouton{display:none}
  body{background:#fff;color:#000;font-size:11pt}
}