/* ==========================================================================
   Monclar Group — feuille de styles commune
   Charte : bleu #225378, crème, ivoire, or. Inter en graisses 200-500.
   Aucune dépendance externe : aucune police, image ou script tiers.
   ========================================================================== */

:root{
  --bleu:#225378; --bleu-nuit:#1b4260;
  --creme:#f4f0e8; --ivoire:#f4f1ea; --encre:#1c3a52;
  --doux:#dfe7ed; --brume:#b3c4d1; --brume-encre:#4f6478; --or:#d5c099;
  --or-sombre:#81683d; --courant:#40566b;
  /* Contrastes vérifiés WCAG AA, 4,5:1 minimum :
       or #d5c099 sur bleu 4,59        or-sombre #81683d sur ivoire 4,68
       brume #b3c4d1 sur bleu 4,55     brume-encre #4f6478 sur ivoire 5,43
     Recontrôler ces rapports avant toute retouche de la palette. */
  --filet-bleu:rgba(244,240,232,.22); --filet-clair:rgba(28,58,82,.34);
  --sans:'Inter','Inter var',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --serif:'Iowan Old Style','Palatino Linotype',Palatino,'Book Antiqua','Liberation Serif',Georgia,serif;
}

/* --------------------------------------------------------------------------
   POLICE — Google Fonts a été retiré : le chargement depuis
   fonts.googleapis.com transmettait l'adresse IP des visiteurs à Google,
   en contradiction avec les mentions légales du site.
   Pour retrouver Inter à l'identique, déposer les quatre fichiers .woff2
   dans /polices/ puis décommenter le bloc ci-dessous.
   --------------------------------------------------------------------------
@font-face{font-family:"Inter";font-style:normal;font-weight:200;font-display:swap;src:url("/polices/inter-200.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:300;font-display:swap;src:url("/polices/inter-300.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("/polices/inter-400.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("/polices/inter-500.woff2") format("woff2")}
   -------------------------------------------------------------------------- */

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
/* --------------------------------------------------------------------------
   FONDS
   Ne jamais faire reposer la couleur de fond sur html/body seuls : certains
   navigateurs intégrés (aperçu in-app, lecteurs, extensions) imposent leur
   propre fond blanc, et le texte crème devient alors illisible. Chaque bloc
   de premier niveau porte donc son fond explicitement, avec une valeur
   littérale en repli si les variables ne sont pas résolues.
   -------------------------------------------------------------------------- */
html,body{background:#225378;background:var(--bleu);min-height:100%}
body{color:var(--creme);font-family:var(--sans);font-weight:300;line-height:1.9;
  text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
main{background:#225378;background:var(--bleu)}
section{background:#225378;background:var(--bleu)}
.hero{background:#225378;background:var(--bleu)}
.bandeau{background:#225378;background:var(--bleu)}
.claire{background:#f4f1ea;background:var(--ivoire)}
footer{background:#1b4260;background:var(--bleu-nuit)}
a{color:inherit}

/* --------------------------------------------------------------------------
   LIENS
   Sans traitement propre, un lien inséré dans un paragraphe est strictement
   indistinguable du texte : même couleur, aucun soulignement. Le maillage
   interne devient alors invisible pour le lecteur. Le soulignement est ici
   permanent — un simple survol ne suffit pas, il n'existe pas sur mobile.
   -------------------------------------------------------------------------- */
.corps a, .texte a{
  color:var(--or);
  text-decoration:none;
  border-bottom:1px solid rgba(213,192,153,.55);
  padding-bottom:1px;
  transition:color .3s ease,border-color .3s ease;
}
.corps a:hover, .texte a:hover{border-bottom-color:var(--or)}
.claire .corps a, .claire .texte a{
  color:var(--or-sombre);
  border-bottom-color:rgba(129,104,61,.55);
}
.claire .corps a:hover, .claire .texte a:hover{border-bottom-color:var(--or-sombre)}
img{max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--or);outline-offset:3px}
.claire :focus-visible{outline-color:var(--or-sombre)}

/* ---------- Navigation ---------- */
.saut{position:fixed;left:18px;top:-80px;z-index:100;background:var(--ivoire);color:var(--encre);
  padding:10px 14px;text-decoration:none;transition:top .2s}
.saut:focus{top:14px}
.tete{position:sticky;top:0;z-index:50;background:rgba(18,49,74,.86);backdrop-filter:blur(18px) saturate(120%);
  border-bottom:1px solid rgba(244,240,232,.16)}
.tete-int{max-width:1240px;margin:0 auto;padding:12px 28px;display:flex;align-items:center;gap:22px}
.tete .logo{display:flex;align-items:center;gap:14px;text-decoration:none;flex-shrink:0}
.tete .logo img{height:38px;width:auto;flex-shrink:0}
.tete .logo span{font-family:var(--serif);font-size:.82rem;letter-spacing:.26em;text-transform:uppercase;color:var(--creme);white-space:nowrap}
.nav{margin-left:auto;display:flex;align-items:center;gap:14px 20px;flex-wrap:wrap;
  justify-content:flex-end}
.nav-set{display:contents}
html[lang="fr"] .nav-en,html[lang="en"] .nav-fr{display:none}
@media(min-width:901px){.nav{max-width:74%}}
.nav a{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brume);
  text-decoration:none;padding:6px 0;border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.nav a:hover{color:var(--creme)}
.nav a[aria-current="page"]{color:var(--creme);border-bottom-color:var(--or)}
.bascule{font-size:.7rem;letter-spacing:.18em;flex-shrink:0}
.bascule a{color:var(--brume);text-decoration:none;padding:4px}
.bascule a:hover{color:var(--creme)}
.bascule a.on{color:var(--or)}
.bascule i{color:#54799a;font-style:normal}
.ouvrir{display:none;margin-left:auto;background:none;border:0;color:var(--creme);
  font:inherit;font-size:1.4rem;line-height:1;cursor:pointer;padding:6px 10px}

@media(max-width:900px){
  .ouvrir{display:block}
  .nav{position:fixed;inset:63px 0 auto;flex-direction:column;align-items:stretch;gap:0;
    background:var(--bleu-nuit);border-bottom:1px solid var(--filet-bleu);
    padding:8px 26px 26px;margin:0;display:none;max-height:calc(100svh - 63px);overflow-y:auto}
  .tete.deploye .nav{display:flex}
  .nav a{padding:15px 0;border-bottom:1px solid var(--filet-bleu);font-size:.75rem}
  .bascule{order:-1}
}

/* ---------- Hero d'accueil ---------- */
.hero{min-height:calc(100svh - 63px);display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:clamp(74px,11vh,120px) 26px clamp(66px,9vh,96px);position:relative;isolation:isolate;
  background:#15364f url('/assets/images/img-29f22010fad7.webp') center 48%/cover no-repeat}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;
  background:linear-gradient(180deg,rgba(7,24,37,.42),rgba(7,24,37,.34) 44%,rgba(7,24,37,.82))}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(circle at 50% 42%,rgba(34,83,120,.08),rgba(8,29,44,.42) 76%)}
.hero img{height:112px;width:auto;flex-shrink:0;margin-bottom:38px;filter:drop-shadow(0 10px 26px rgba(0,0,0,.2))}
.hero .sur-titre{font-size:.64rem;letter-spacing:.4em;text-transform:uppercase;color:var(--or);margin-bottom:20px}
.hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(1.95rem,4.8vw,3.5rem);
  letter-spacing:.01em;line-height:1.34;max-width:900px;color:var(--creme);text-shadow:0 3px 24px rgba(5,20,31,.42)}
.hero h1 b{font-weight:200;color:var(--or)}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:38px}
.hero-actions a{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 23px;
  border:1px solid rgba(244,240,232,.5);text-decoration:none;font-size:.66rem;letter-spacing:.24em;
  text-transform:uppercase;transition:background .25s,color .25s,border-color .25s}
.hero-actions a:first-child{background:var(--creme);border-color:var(--creme);color:var(--bleu-nuit)}
.hero-actions a:hover{background:var(--or);border-color:var(--or);color:var(--bleu-nuit)}
@media(max-width:760px){
  .hero{min-height:calc(100svh - 61px);background-position:38% center}
  .hero img{height:82px;margin-bottom:30px}
  .hero-actions{width:100%;max-width:330px}.hero-actions a{width:100%}
}

/* ---------- Bandeau des pages intérieures ---------- */
.bandeau{padding:130px 26px 90px;text-align:center;border-bottom:1px solid var(--filet-bleu)}
.bandeau .fil{font-size:.66rem;letter-spacing:.34em;text-transform:uppercase;color:var(--or);margin-bottom:26px}
.bandeau h1{font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,4.2vw,2.45rem);
  line-height:1.5;letter-spacing:.01em;max-width:780px;margin:0 auto;color:var(--creme)}
.bandeau .chapo{margin:34px auto 0;max-width:620px;font-size:1.05rem;color:var(--brume)}

/* ---------- Bandes photo ----------
   Chaque bande appelle un fichier local à déposer dans /images/.
   Tant qu'un fichier est absent, le dégradé de la même règle s'affiche seul.
   Les replis vers Unsplash ont été supprimés : images de banque identifiables
   par recherche inversée, et dépendance à un serveur tiers. */
.photo{height:clamp(420px,64vh,720px);position:relative;overflow:hidden;isolation:isolate;
  background-color:#102f46;background-size:cover;background-position:center;background-repeat:no-repeat}
.photo::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,24,37,.04),rgba(7,24,37,.14));
  box-shadow:inset 0 1px rgba(255,255,255,.08),inset 0 -1px rgba(0,0,0,.22)}
.photo .voile{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,
  rgba(8,29,44,.10) 0%,rgba(8,29,44,0) 34%,rgba(8,29,44,0) 68%,rgba(8,29,44,.18) 100%)}
/* Séquence photographique fournie par Monclar Group, optimisée pour le web. */
.photo.p-hero{background-image:url('/assets/images/img-29f22010fad7.webp'),linear-gradient(160deg,#1b4260 0%,#225378 45%,#2e6389 100%);background-position:center 48%}
.photo.p-horizon,.photo.p-geneve{background-image:url('/assets/images/img-0df1e790fdc8.webp'),linear-gradient(160deg,#1b4260 0%,#225378 45%,#2e6389 100%);background-position:center 48%}
.photo.p-salle,.photo.p-bibliotheque{background-image:url('/assets/images/img-7571e8a7e7a4.webp'),linear-gradient(160deg,#1b4260 0%,#225378 45%,#2e6389 100%);background-position:36% center}
.photo.p-matiere,.photo.p-paris{background-image:url('/assets/images/img-594af82b4cf8.webp'),linear-gradient(160deg,#1b4260 0%,#225378 45%,#2e6389 100%);background-position:66% center}
.photo--courte{height:clamp(300px,44vh,500px);min-height:0}
/* Sur les pages d'accueil, Paris est présenté en pleine largeur :
   l'image entière reste visible et la tour Eiffel n'est pas coupée. */
#p-fr > main > .photo.p-matiere,
#p-en > main > .photo.p-matiere{
  width:100%;height:auto;min-height:0;aspect-ratio:2048/1361;
  margin:0;background-size:contain;background-position:center;
  background-color:var(--bleu-nuit)
}
@media(max-width:760px){
  .photo{height:58vh;min-height:360px}
  .photo--courte{height:40vh;min-height:280px}
  .photo.p-hero{background-position:44% center}
  .photo.p-horizon{background-position:48% center}
  #p-fr > main > .photo.p-matiere,
  #p-en > main > .photo.p-matiere{width:100%;margin:0}
}
@media(max-width:480px){.tete .logo span{display:none}}

/* ---------- Sections ---------- */
section{padding:130px 30px}
.colonne{max-width:640px;margin:0 auto}
.colonne--large{max-width:760px}
.label{font-size:.7rem;font-weight:400;letter-spacing:.38em;text-transform:uppercase;
  color:var(--or);text-align:center;margin-bottom:48px}
.texte p{font-size:clamp(1.05rem,1.9vw,1.25rem);color:var(--doux);margin-bottom:30px;text-align:center}
.texte p:last-child{margin-bottom:0}
.texte .fort{color:var(--creme)}

.claire{background:var(--ivoire);color:var(--encre)}
.claire .label{color:var(--or-sombre)}
.claire .texte p{color:var(--courant)}
.claire .texte .fort{color:var(--encre)}

/* ---------- Corps rédactionnel des pages d'expertise ---------- */
.corps{max-width:680px;margin:0 auto}
.corps h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.2rem,2.6vw,1.45rem);letter-spacing:.04em;
  color:var(--creme);margin:64px 0 26px;padding-top:34px;border-top:1px solid var(--filet-bleu)}
.corps h2:first-child{margin-top:0;padding-top:0;border-top:0}
.corps p{font-size:1.06rem;color:var(--doux);margin-bottom:26px}
.corps ul{list-style:none;margin:0 0 30px}
.corps ul li{position:relative;padding:11px 0 11px 26px;color:var(--doux);
  border-bottom:1px solid var(--filet-bleu);font-size:1rem}
.corps ul li::before{content:'';position:absolute;left:0;top:24px;width:11px;height:1px;background:var(--or)}
.claire .corps h2{color:var(--encre);border-top-color:var(--filet-clair)}
.claire .corps ul li::before{background:var(--or-sombre)}
.claire .corps p,.claire .corps ul li{color:var(--courant)}
.claire .corps ul li{border-bottom-color:var(--filet-clair)}

/* ---------- Trois temps ---------- */
.temps{display:grid;grid-template-columns:repeat(3,1fr);gap:60px;max-width:960px;margin:0 auto}
.temps div{border-top:1px solid var(--filet-clair);padding-top:34px;text-align:center}
.temps h2{margin:0;font-family:var(--serif);letter-spacing:.26em}
.temps h2{font-weight:400;font-size:1rem;letter-spacing:.3em;text-transform:uppercase;
  margin-bottom:24px;color:var(--encre)}
.temps p{font-size:1rem;color:var(--courant);line-height:2.1;margin:0}

/* ---------- Liste d'expertises : intitulé cliquable + phrase courte ---------- */
.expertises{list-style:none;max-width:640px;margin:0 auto}
.expertises li{padding:26px 0;border-bottom:1px solid var(--filet-bleu);text-align:center}
.expertises li:first-child{border-top:1px solid var(--filet-bleu)}
@media(min-width:920px){
  /* En grand écran, la colonne unique s'étirait à l'infini : deux colonnes
     alignées à gauche, séparées par des filets, rythment la lecture. */
  .expertises{max-width:1040px;display:grid;grid-template-columns:1fr 1fr;gap:0 72px}
  .expertises li{text-align:left;border-top:1px solid var(--filet-bleu);border-bottom:0;
    padding:30px 0 32px}
  .expertises li:first-child{border-top:1px solid var(--filet-bleu)}
  .claire .expertises li{border-top-color:var(--filet-clair);border-bottom:0}
}
.expertises li a{display:inline-block;font-family:var(--serif);font-size:clamp(1.1rem,2.1vw,1.3rem);color:var(--creme);
  text-decoration:none;border-bottom:1px solid rgba(213,192,153,.5);padding-bottom:3px;
  transition:color .3s,border-color .3s}
.expertises li a:hover{color:var(--or);border-bottom-color:var(--or)}
.expertises li span{display:block;margin-top:12px;font-size:.95rem;line-height:1.9;color:var(--doux)}
.claire .expertises li{border-bottom-color:var(--filet-clair)}
.claire .expertises li:first-child{border-top-color:var(--filet-clair)}
.claire .expertises li a{color:var(--encre);border-bottom-color:rgba(129,104,61,.5)}
.claire .expertises li a:hover{color:var(--or-sombre);border-bottom-color:var(--or-sombre)}
.claire .expertises li span{color:var(--courant)}

/* ---------- Listes nues ---------- */
.liste{list-style:none;text-align:center}
@media(min-width:920px){
  .liste{max-width:880px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:0 72px}
  .liste li:nth-child(2){border-top:1px solid var(--filet-bleu)}
}
.liste li{font-family:var(--serif);font-weight:400;font-size:clamp(1.05rem,2vw,1.25rem);color:var(--creme);
  padding:22px 0;border-bottom:1px solid var(--filet-bleu)}
.liste li:first-child{border-top:1px solid var(--filet-bleu)}
.liste a{text-decoration:none;border-bottom:1px solid rgba(213,192,153,.5);
  padding-bottom:3px;transition:color .3s,border-color .3s}
.liste a:hover{color:var(--or);border-bottom-color:var(--or)}
/* Les entrées non cliquables restent en retrait pour que la différence
   entre lien et simple mention soit lisible d'un coup d'œil. */
.liste li{color:var(--doux)}
.liste li:has(a){color:var(--creme)}

.suite{display:inline-block;font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--or);text-decoration:none;border-bottom:1px solid rgba(213,192,153,.5);
  padding-bottom:6px;transition:color .3s,border-color .3s}
.suite:hover{color:var(--creme);border-bottom-color:var(--or)}
.claire .suite{color:var(--or-sombre);border-bottom-color:rgba(129,104,61,.5)}
.claire .suite:hover{color:var(--encre);border-bottom-color:var(--or-sombre)}

/* ---------- Ligne de portée : badge centré entre deux sections ---------- */
.portee-sec{padding:54px 26px}
.portee{max-width:900px;margin:0 auto;text-align:center;font-size:.72rem;font-weight:400;
  letter-spacing:.34em;text-transform:uppercase;color:var(--or);line-height:2}

/* ---------- Maillage interne ---------- */
.voisines{max-width:960px;margin:0 auto}
.voisines-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;
  background:var(--filet-bleu)}
.voisines-grille a{display:block;padding:34px 28px;background:var(--bleu);text-decoration:none;
  transition:background .35s}
.voisines-grille a:hover{background:var(--bleu-nuit)}
.voisines-grille .sur{font-size:.64rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--or);display:block;margin-bottom:14px}
.voisines-grille .tit{font-family:var(--serif);font-size:1.1rem;color:var(--creme);line-height:1.6}

/* ---------- Présence / contact ---------- */
.presence{text-align:center}
.presence .villes{font-family:var(--serif);font-weight:400;font-size:clamp(1.8rem,5vw,3rem);letter-spacing:.3em;
  text-transform:uppercase;color:var(--creme);padding-left:.3em}
.presence p{margin-top:34px;font-size:.95rem;color:var(--brume)}
.contact{text-align:center}
.contact .mail{display:inline-block;margin-top:40px;font-weight:300;
  font-size:clamp(1.05rem,2.4vw,1.4rem);letter-spacing:.04em;color:var(--creme);
  text-decoration:none;border-bottom:1px solid var(--or);padding-bottom:7px}
.contact .mail:hover{color:var(--or)}
.contact .villes{margin-top:30px;font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;color:var(--brume)}

/* ---------- Mentions légales ---------- */
.legal .colonne{max-width:680px}
.legal h2{font-weight:500;font-size:.95rem;letter-spacing:.05em;margin:38px 0 10px;color:var(--creme)}
.legal h2:first-of-type{margin-top:0}
.legal p{font-size:.9rem;line-height:1.9;color:var(--doux)}
.legal a{border-bottom:1px solid var(--or);text-decoration:none}

/* ---------- Pied ---------- */
footer{border-top:1px solid var(--filet-bleu);padding:70px 26px 60px;background:var(--bleu-nuit)}
.pied-int{max-width:1080px;margin:0 auto;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:44px}
.pied-int h2{font-size:.64rem;font-weight:400;letter-spacing:.3em;text-transform:uppercase;
  color:var(--or);margin-bottom:18px}
.pied-int ul{list-style:none}
.pied-int li{margin-bottom:11px}
.pied-int a{font-size:.86rem;color:var(--brume);text-decoration:none;transition:color .3s}
.pied-int a:hover{color:var(--creme)}
.pied-int p{font-size:.86rem;color:var(--brume)}
.pied-bas{max-width:1080px;margin:56px auto 0;padding-top:34px;border-top:1px solid var(--filet-bleu);text-align:center}
.pied-bas img{height:30px;width:auto;opacity:.85;margin-bottom:16px}
.pied-bas p{font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:var(--brume)}

/* ---------- Apparitions ---------- */
.r{transition:opacity 1.6s ease,transform 1.6s cubic-bezier(.16,.6,.2,1)}



@media(max-width:760px){
  section{padding:90px 24px}
  .temps{grid-template-columns:1fr;gap:44px}
  .photo{height:58vh;min-height:360px}
  .photo--courte{height:40vh;min-height:280px}
  .bandeau{padding:100px 24px 70px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .r{transition:none}
  .page-apercu:target{animation:none}

}


/* ---- habillage propre a l'apercu, absent du site livre ---- */
.barre-apercu{background:#12314a;border-bottom:1px solid rgba(244,240,232,.2);
  padding:15px 20px;font-family:var(--sans)}
.barre-apercu .t{font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:#d5c099}
.barre-apercu .s{font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;
  color:#b3c4d1;margin-top:7px;line-height:1.7}
.sommaire{display:flex;flex-wrap:wrap;gap:9px 14px;margin-top:15px}
.sommaire a{font-size:.68rem;color:#b3c4d1;text-decoration:none;
  border-bottom:1px solid rgba(179,196,209,.45);padding-bottom:2px}
.page-apercu{border-top:3px solid #d5c099}
.etiquette-page{background:#12314a;color:#b3c4d1;font-family:var(--sans);
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  padding:12px 20px;margin:0}

/* Mode site : une seule page affichée à la fois */
.barre-apercu,.etiquette-page{display:none!important}
.page-apercu{display:none;border-top:0}
.page-apercu:target{display:block;animation:page-entree .38s ease both}
body:not(:has(.page-apercu:target)) #p-fr{display:block}
@keyframes page-entree{from{opacity:.72}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.page-apercu:target{animation:none}}

/* Mode de relecture : toutes les pages réunies dans un seul document. */
html.mode-apercu .barre-apercu{display:block!important}
html.mode-apercu .etiquette-page{display:block!important}
html.mode-apercu .page-apercu,
html.mode-apercu .page-apercu:target{display:block!important;border-top:3px solid #d5c099}

/* Production multi-pages */
.barre-apercu,.etiquette-page{display:none!important}
.page-apercu{display:block!important;border-top:0!important}