/* =========================================================================
   Numeris Conseil — feuille de style (dérivée de Numeris Patrimoine v0.2)
   -------------------------------------------------------------------------
   Direction : les nuances de blanc de Numeris Patrimoine, un héros sombre façon
   « billboard » (vidéo sous voile) et une bande sombre pour les métiers, à la demande.

   Le rythme vient de l'alternance blanc / papier et de filets fins — jamais
   d'une bande de couleur. La seule surface sombre est le pied de page.
   Trois matières, trois rôles :
     · le papier (#F6F5F2)  = le fond des sections alternées
     · la carte  (#FFFFFF)  = ce qui est posé dessus, ombré
     · l'accent  (#E26F55)  = l'annotation : filet, surtitre, survol — jamais un fond.
       Terracotta du groupe (numeris-groupe.fr), qui a remplacé l'or de Numeris Patrimoine
       le 14 septembre 2026 ; en texte sur fond clair, la teinte foncée --accent-texte.
   Typographie : Abril Fatface (titres, comme la plaquette), Barlow (étiquettes
   en capitales espacées), Poppins (texte), Plex Mono (chiffres des simulateurs).
   ========================================================================= */

:root {
  --blanc:       #FFFFFF;
  --papier:      #F6F5F2;
  --pierre:      #ECEBE7;
  --filet:       rgba(13, 28, 63, .10);
  --filet-fort:  rgba(13, 28, 63, .18);
  --encre:       #0D1C3F;
  --ardoise:     #374362;
  --sourdine:    #6B7386;
  --nuit:        #0D162B;
  --accent:       #E26F55;
  --accent-texte: #C2482B;
  --accent-pale:  rgba(226, 111, 85, .14);

  --f-display:  "Abril Fatface", Georgia, "Times New Roman", serif;
  --f-label:    "Barlow", "Helvetica Neue", Arial, sans-serif;
  --f-corps:    "Poppins", "Segoe UI", system-ui, sans-serif;
  --f-registre: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  /* Ressorts. Aucune transition ne doit être linéaire ou ease-in-out. */
  --sortie:  cubic-bezier(.16, 1, .3, 1);
  --entree:  cubic-bezier(.32, .72, 0, 1);
  --ressort: cubic-bezier(.34, 1.56, .64, 1);

  --gouttiere: clamp(1.25rem, 4vw, 2.75rem);
  --largeur:   1240px;
  --souffle:   clamp(5rem, 9vw, 8.5rem);
  --rayon:     18px;
  --ombre:     0 24px 60px -28px rgba(13, 28, 63, .22), 0 1px 0 rgba(13, 28, 63, .04);
  --ombre-haute: 0 34px 70px -30px rgba(13, 28, 63, .28), 0 1px 0 rgba(13, 28, 63, .04);

  --z-page: 1;
  --z-flottant: 10;
  --z-entete: 40;
}

/* ---------------------------------------------------------------- Socle */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 6.5rem; }

body {
  margin: 0;
  background: var(--blanc);
  color: var(--ardoise);
  font-family: var(--f-corps);
  font-size: 16.5px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* height:auto : sans lui, l'attribut height des <img> (réservé au CLS) écrase les aspect-ratio. */
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3 {
  font-family: var(--f-display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.005em;
  color: var(--encre);
  margin: 0 0 .55em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 5.2vw, 4.4rem); line-height: 1.04; }
h2 { font-size: clamp(1.9rem, 3.2vw, 2.7rem); line-height: 1.12; }
h3 { font-size: clamp(1.2rem, 1.7vw, 1.4rem); }
h1 em, h2 em, h3 em { font-style: normal; color: var(--accent-texte); }

/* h4 est une étiquette, pas un titre : Barlow, capitales, or sourd. */
h4 {
  font-family: var(--f-label); font-weight: 600; font-size: .68rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--sourdine);
  margin: 0 0 1.1rem;
}

p { margin: 0 0 1.15em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
strong { color: var(--encre); font-weight: 600; }

.container {
  width: 100%; max-width: var(--largeur);
  margin-inline: auto; padding-inline: var(--gouttiere);
  position: relative; z-index: var(--z-page);
}

.surtitre {
  font-family: var(--f-label); font-size: .74rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent-texte); margin: 0 0 1.3rem;
  display: flex; align-items: center; gap: .8rem;
}

.chapo { font-size: clamp(1.02rem, 1.35vw, 1.12rem); color: var(--ardoise); max-width: 58ch; }
.sourdine { color: var(--sourdine); }

:focus-visible { outline: 2px solid var(--encre); outline-offset: 4px; border-radius: 2px; }

.saut-contenu {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--encre); color: #fff; padding: .85rem 1.3rem; border-radius: 999px;
}
.saut-contenu:focus { left: 1rem; top: 1rem; }

/* ---------------------------------------------------------------- Boutons */
.btn {
  display: inline-flex; align-items: center; gap: .9rem;
  font-family: var(--f-label); font-size: .78rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .5rem .5rem .5rem 1.45rem;
  border: 1px solid transparent; border-radius: 999px;
  cursor: pointer; position: relative; line-height: 1.2;
  transition: background .6s var(--entree), color .6s var(--entree),
              border-color .6s var(--entree), transform .5s var(--ressort),
              box-shadow .6s var(--entree);
}
.btn:active { transform: scale(.975); }
.btn .rond {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; font-size: .95rem;
  transition: transform .6s var(--entree), background .6s var(--entree);
}
.btn:hover .rond { transform: translate(3px, -3px) scale(1.06); }

.btn-encre { background: var(--encre); color: #fff; }
.btn-encre .rond { background: rgba(255, 255, 255, .14); }
.btn-encre:hover { background: #17284f; box-shadow: var(--ombre); }

.btn-accent { border-color: var(--accent); color: var(--encre); background: transparent; }
.btn-accent .rond { background: var(--accent-pale); }
.btn-accent:hover { background: var(--accent-pale); }

.btn-filet { border-color: var(--filet-fort); color: var(--encre); background: transparent; }
.btn-filet .rond { background: var(--papier); }
.btn-filet:hover { border-color: var(--encre); }

button.btn { font: inherit; font-family: var(--f-label); font-size: .78rem; font-weight: 600; }

.lien-texte {
  display: inline-flex; align-items: center; gap: .55rem;
  font-weight: 600; font-size: .92rem; color: var(--encre);
  position: relative; padding-bottom: 3px;
}
.lien-texte::after {
  content: ""; position: absolute; left: 0; right: 30px; bottom: 0; height: 1px;
  background: var(--accent); opacity: .55; transition: opacity .5s var(--entree), right .6s var(--entree);
}
.lien-texte:hover::after { opacity: 1; }
.lien-texte span {
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent-pale); color: var(--accent-texte); font-size: .85rem;
  transition: transform .5s var(--entree), background .5s var(--entree), color .5s var(--entree);
}
.lien-texte:hover span { transform: translateX(4px); background: var(--encre); color: #fff; }

/* ---------------------------------------------------------------- En-tête */
/* Blanc, pleine largeur, un filet qui apparaît au défilement. */
.site-entete {
  position: fixed; inset: 0 0 auto; z-index: var(--z-entete);
  background: rgba(255, 255, 255, .84);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: background .7s var(--entree), border-color .7s var(--entree), box-shadow .7s var(--entree);
}
.site-entete.condense {
  background: rgba(255, 255, 255, .96);
  border-bottom-color: var(--filet);
  box-shadow: 0 12px 30px -24px rgba(13, 28, 63, .25);
}
.entete-inner {
  max-width: 1400px; margin-inline: auto;
  display: flex; align-items: center; gap: 1.1rem;
  padding: .8rem var(--gouttiere);
  transition: padding .7s var(--entree);
}
.site-entete.condense .entete-inner { padding-block: .55rem; }

.marque { display: flex; align-items: center; gap: .85rem; flex-shrink: 0; }
.marque img { height: 46px; width: auto; transition: height .7s var(--entree); } /* logo agrandi, retour Pastel 1 */
.site-entete.condense .marque img { height: 38px; }
.marque .branche {
  font-family: var(--f-label); font-size: .68rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--accent-texte);
  padding-left: .85rem; border-left: 1px solid var(--filet-fort);
}

.nav-principale { margin-left: auto; }
.nav-principale .nav-rdv { display: none; }   /* lien mobile seulement (voir le bloc 1100 px) */
.nav-principale ul { display: flex; align-items: center; gap: 1.15rem; list-style: none; margin: 0; padding: 0; }
.nav-principale a {
  font-size: .84rem; font-weight: 500; color: var(--ardoise); white-space: nowrap;
  position: relative; padding-block: .35rem;
  transition: color .5s var(--entree);
}
.nav-principale a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; right: 100%;
  background: var(--accent); transition: right .6s var(--entree);
}
.nav-principale a:hover { color: var(--encre); }
.nav-principale a:hover::after, .nav-principale .actif a::after { right: 0; }
.nav-principale .actif a { color: var(--encre); }

.entete-cta { padding: .42rem .42rem .42rem 1.1rem; font-size: .72rem; flex-shrink: 0; }
.entete-cta .rond { width: 28px; height: 28px; font-size: .8rem; }

.bascule-nav {
  display: none; width: 42px; height: 42px; margin-left: auto; flex-shrink: 0;
  background: var(--papier); border: 1px solid var(--filet);
  border-radius: 50%; cursor: pointer; padding: 0; position: relative;
}
.bascule-nav span {
  position: absolute; left: 50%; width: 16px; height: 1.5px; background: var(--encre);
  transform: translateX(-50%); transition: transform .6s var(--entree), opacity .35s var(--entree);
}
.bascule-nav span:nth-child(1) { top: 15px; }
.bascule-nav span:nth-child(2) { top: 20px; }
.bascule-nav span:nth-child(3) { top: 25px; }
.bascule-nav[aria-expanded="true"] span:nth-child(1) { transform: translate(-50%, 5px) rotate(45deg); }
.bascule-nav[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.bascule-nav[aria-expanded="true"] span:nth-child(3) { transform: translate(-50%, -5px) rotate(-45deg); }

/* ---------------------------------------------------------------- Sections */
.section { padding-block: var(--souffle); position: relative; }
.section-papier, .section-creux { background: var(--papier); }
.entete-section { max-width: 800px; margin-bottom: clamp(2.6rem, 5vw, 4.2rem); }
.entete-section .chapo { max-width: 60ch; }
.entete-ligne {
  max-width: none; display: flex; align-items: flex-end; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap;
}
.entete-ligne h2 { margin-bottom: 0; }

/* ---------------------------------------------------------------- La carte */
/* Une carte blanche ombrée sur le papier ; sur le blanc, elle devient papier
   et perd son ombre — la matière du fond change, la carte s'y adapte. */
.carte {
  background: var(--blanc); color: var(--ardoise);
  border: 1px solid var(--filet); border-radius: var(--rayon);
  box-shadow: var(--ombre); padding: 1.9rem 2rem;
}
.section:not(.section-papier) .carte { background: var(--papier); box-shadow: none; }
.carte-pierre { background: var(--pierre) !important; box-shadow: none !important; }
.carte h2, .carte h3 { color: var(--encre); }

/* ---------------------------------------------------------------- Édito */
.edito { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.edito-haut, .edito-axe { align-items: start; }
.edito-axe { grid-template-columns: .9fr 1.1fr; }

/* ---------------------------------------------------------------- Triptyque */
.triptyque { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 1.1rem; align-items: start; }
.tuile {
  display: block; padding: 1.9rem 1.8rem; border-radius: 22px;
  border: 1px solid var(--filet); background: var(--papier);
  transition: border-color .7s var(--entree), transform .7s var(--sortie), background .7s var(--entree), box-shadow .7s var(--entree);
}
.tuile:hover { background: var(--blanc); box-shadow: var(--ombre); transform: translateY(-5px); }
.triptyque .tuile:nth-child(1) { padding-block: 2.6rem; }
.triptyque .tuile:nth-child(2) { margin-top: 1.8rem; }
.triptyque .tuile:nth-child(3) { margin-top: 3.6rem; }
.tuile .cle {
  font-family: var(--f-label); font-size: .68rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent-texte); display: block; margin-bottom: 1rem;
}
.tuile h3 { font-size: 1.15rem; margin-bottom: .6rem; }
.tuile p { font-size: .92rem; color: var(--sourdine); margin: 0; }

/* ---------------------------------------------------------------- Partenaires */
.partenaires { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; }
.partenaire {
  aspect-ratio: 3 / 2; display: grid; place-items: center; padding: 1.2rem; border-radius: 14px;
}
.partenaire img { max-height: 46px; max-width: 80%; width: auto; height: auto; object-fit: contain; filter: grayscale(1) opacity(.7); transition: filter .6s var(--entree); }
.partenaire:hover img { filter: none; }
.partenaire-attente {
  border: 1px dashed var(--filet-fort);
  font-family: var(--f-label); font-size: .66rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--sourdine);
}

/* ---------------------------------------------------------------- Actualités */
.articles-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem 1.5rem; }
.article-carte { display: block; }
.article-media { border-radius: 16px; overflow: hidden; background: var(--pierre); }
.article-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 1.3s var(--sortie); }
.article-carte:hover .article-media img { transform: scale(1.04); }
.article-carte .surtitre { justify-content: space-between; margin: 1.2rem 0 .6rem; }
.article-carte .surtitre time { color: var(--sourdine); font-weight: 500; letter-spacing: .06em; }
.article-carte h3 { font-size: 1.3rem; margin-bottom: .5rem; transition: color .5s var(--entree); }
.article-carte:hover h3 { color: var(--accent-texte); }
.article-texte p:last-child { font-size: .9rem; color: var(--sourdine); }

.articles-liste .article-carte.large {
  grid-column: 1 / -1; display: grid; grid-template-columns: 1.2fr 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; margin-bottom: 1rem;
}
.article-carte.large .article-media img { aspect-ratio: 16 / 9; }
.article-carte.large h3 { font-size: clamp(1.7rem, 2.6vw, 2.3rem); }
.article-carte.large .article-texte p:last-child { font-size: 1rem; }

.article-corps { max-width: 70ch; margin-inline: auto; }
.article-meta {
  display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; margin-bottom: 2.4rem;
  padding-bottom: 1.2rem; border-bottom: 1px solid var(--filet);
  font-family: var(--f-label); font-size: .7rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--sourdine);
}
.article-corps h2 { font-size: clamp(1.5rem, 2.4vw, 1.95rem); margin: 2.6rem 0 .8rem; }
.article-corps h3 { font-size: 1.25rem; margin: 2rem 0 .6rem; }
.article-corps p { color: var(--ardoise); }
.article-corps a { color: var(--accent-texte); text-decoration: underline; text-underline-offset: 3px; }
.article-corps ul, .article-corps ol { padding-left: 1.3rem; margin: 0 0 1.3rem; }
.article-corps li { margin-bottom: .5rem; }
.article-corps li::marker { color: var(--accent); }
.article-corps blockquote {
  margin: 2.2rem 0; padding-left: 1.5rem; border-left: 2px solid var(--accent);
}
.article-corps blockquote p { font-family: var(--f-display); font-size: 1.35rem; line-height: 1.35; color: var(--encre); }
.article-corps table { width: 100%; border-collapse: collapse; margin: 1.8rem 0; font-size: .92rem; }
.article-corps th {
  text-align: left; font-family: var(--f-label); font-size: .68rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--sourdine);
  padding: .6rem .9rem; border-bottom: 1px solid var(--filet-fort);
}
.article-corps td { padding: .75rem .9rem; border-bottom: 1px solid var(--filet); color: var(--ardoise); font-variant-numeric: tabular-nums; }
.article-corps tr:hover td { background: var(--papier); }
.article-corps hr { border: 0; border-top: 1px solid var(--filet); margin: 2.6rem 0; }
.article-corps em { color: var(--sourdine); }

/* ---------------------------------------------------------------- Contact */
.contact-grille { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.implantations { display: grid; gap: 1.1rem; }
.implantations-4 { grid-template-columns: repeat(4, 1fr); }
.formulaire-hote { max-width: 880px; margin: 2.6rem auto 0; }
.implantation .surtitre { margin-bottom: .8rem; }
.implantation .adresse { font-size: 1.02rem; font-weight: 500; color: var(--encre); margin-bottom: .5rem; }
.implantation .tel { margin-bottom: .3rem; }
.implantation .tel a { font-family: var(--f-display); font-size: 1.45rem; color: var(--encre); transition: color .5s var(--entree); }
.implantation .tel a:hover { color: var(--accent-texte); }
.implantation .sourdine { font-size: .86rem; }
.referent {
  display: flex; align-items: center; gap: .85rem; margin-top: 1.3rem; padding-top: 1.1rem;
  border-top: 1px solid var(--filet); font-size: .92rem; color: var(--encre); font-weight: 500; line-height: 1.35;
}
.referent img { width: 68px; height: 68px; border-radius: 50%; object-fit: cover; object-position: center 22%; background: var(--pierre); } /* plus gros, visage centré : Pastel 103 */
.referent small { font-weight: 400; font-size: .78rem; color: var(--sourdine); }

.rdv-bande { text-align: center; }
.rdv-bande .surtitre { justify-content: center; }
.rdv-bande h2 { max-width: 20ch; margin-inline: auto; }
.rdv-bande .chapo { margin: 0 auto 2.4rem; }
.rdv-bande .actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }

/* ---------------------------------------------------------------- Formulaire */
.form-grille { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem 1.3rem; }
.champ { display: flex; flex-direction: column; gap: .45rem; }
.champ.pleine { grid-column: 1 / -1; }
.champ label {
  font-family: var(--f-label); font-size: .68rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--sourdine);
}
.champ input, .champ select, .champ textarea {
  font-family: var(--f-corps); font-size: .95rem; color: var(--encre);
  padding: .85rem 1rem; background: var(--papier);
  border: 1px solid var(--filet-fort); border-radius: 12px;
  transition: border-color .5s var(--entree), box-shadow .5s var(--entree), background .5s var(--entree);
}
.champ textarea { min-height: 148px; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: none; background: var(--blanc); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-pale);
}
.consentement { grid-column: 1 / -1; display: flex; gap: .8rem; align-items: flex-start; }
.consentement input { margin-top: .32rem; accent-color: var(--encre); }
.consentement label { font-size: .83rem; color: var(--ardoise); line-height: 1.55; }
.consentement a { color: var(--accent-texte); text-decoration: underline; text-underline-offset: 2px; }
.form-etat { grid-column: 1 / -1; font-size: .9rem; margin: 0; }
.form-etat.ok { color: #1e6b4a; }
.form-etat.ko { color: #8c2f2f; }
.form-grille .btn { grid-column: 1 / -1; justify-self: start; }
/* Envoi en cours : champs grisés et figés, bouton avec roue de chargement.
   Bloc commun à tous les sites du groupe (même code dans chaque style.css). */
form[aria-busy="true"] { cursor: progress; }
form[aria-busy="true"] label { opacity: .6; }
form[aria-busy="true"] :is(input, select, textarea):disabled {
  background: #eef1f5; border-color: #dde2ea; color: #6b7280; opacity: 1; cursor: progress;
}
form button[type="submit"]:disabled { opacity: .7; cursor: progress; transform: none; }
.spinner {
  display: inline-block; width: .85em; height: .85em; margin-right: .55em; vertical-align: -.1em;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; border-right-color: currentColor; opacity: .6; } }

.prefill-note {
  grid-column: 1 / -1; margin: -.4rem 0 0; font-size: .82rem; color: var(--accent-texte);
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
}
.prefill-note[hidden] { display: none; }
.prefill-vider {
  font: inherit; font-size: .8rem; color: var(--ardoise); background: none; border: 0;
  border-bottom: 1px solid var(--filet-fort); padding: 0 0 1px; cursor: pointer;
  transition: color .4s var(--entree), border-color .4s var(--entree);
}
.prefill-vider:hover { color: var(--encre); border-color: var(--encre); }

/* ---------------------------------------------------------------- Bandeau final */
.bandeau-final { background: var(--papier); text-align: center; }
.bandeau-final .surtitre { justify-content: center; }
.bandeau-final h2 { max-width: 18ch; margin-inline: auto; font-size: clamp(2.1rem, 4.4vw, 3.4rem); }
.bandeau-final .chapo { margin: 0 auto 2.6rem; }
.bandeau-final .actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }

/* ---------------------------------------------------------------- Texte long */
.texte-long { max-width: 70ch; }
.texte-long h2 { font-size: clamp(1.4rem, 2.4vw, 1.75rem); margin-top: 3rem; }
.texte-long h2:first-child { margin-top: 0; }
.texte-long p { color: var(--ardoise); }
.texte-long a { color: var(--accent-texte); text-decoration: underline; text-underline-offset: 3px; }
.a-completer {
  display: inline-block; background: var(--accent-pale); border-left: 2px solid var(--accent);
  padding: .35rem .7rem; font-family: var(--f-label); font-size: .82rem; color: var(--encre);
}

/* ---------------------------------------------------------------- Pied */
.site-pied { background: var(--nuit); color: rgba(255, 255, 255, .72); padding-block: clamp(4rem, 7vw, 6rem) 2.2rem; }
.pied-haut { display: grid; grid-template-columns: 1.5fr 1fr 1fr .8fr 1.1fr; gap: 2.4rem; }
.pied-marque img { height: 40px; width: auto; margin-bottom: 1.4rem; }
.pied-marque p { font-size: .88rem; max-width: 30ch; color: rgba(255, 255, 255, .6); }
.site-pied h3 {
  font-family: var(--f-label); font-weight: 600; font-size: .66rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 1.2rem;
}
.site-pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.site-pied li, .site-pied a { font-size: .87rem; color: rgba(255, 255, 255, .8); }
.site-pied a { transition: color .5s var(--entree); }
.site-pied a:hover { color: #fff; }
.pied-ville {
  font-family: var(--f-label); font-size: .64rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent); margin-right: .35rem;
}
.avertissement, .reglementaire {
  margin-top: 2rem; padding-top: 1.6rem; border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: .74rem; line-height: 1.7; color: rgba(255, 255, 255, .5); max-width: 92ch;
}
.reglementaire { margin-top: 1.2rem; padding-top: 0; border-top: 0; }
.pied-bas {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  margin-top: 2.6rem; padding-top: 1.6rem; border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: .76rem; color: rgba(255, 255, 255, .55);
}

/* ---------------------------------------------------------------- Histoire */
.jalons { max-width: 920px; }
.jalon {
  display: grid; grid-template-columns: 150px 1fr; gap: 2rem; padding: 1.9rem 0;
  border-top: 1px solid var(--filet);
}
.jalon:last-child { border-bottom: 1px solid var(--filet); }
.jalon-date { font-family: var(--f-display); font-size: 1.7rem; line-height: 1.1; color: var(--accent-texte); margin: 0; }
.jalon h3 { font-size: 1.3rem; margin-bottom: .45rem; }
.jalon p:last-child { color: var(--ardoise); font-size: .95rem; }

/* ---------------------------------------------------------------- Équipe */
.equipe-ville + .equipe-ville { margin-top: calc(var(--souffle) * .8); }
.equipe-grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem 1.2rem; }
.membre img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top;
  border-radius: 14px; background: var(--pierre); margin-bottom: 1rem;
}
.membre h3 { font-size: 1.22rem; margin-bottom: .25rem; }
.membre-titre {
  font-family: var(--f-label); font-size: .68rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent-texte); margin-bottom: .6rem; line-height: 1.5;
}
.membre-bio { font-size: .87rem; color: var(--sourdine); }
.equipe-referents { grid-template-columns: 1fr 1fr 2fr; }
.membre-duo img { aspect-ratio: 3 / 2; }


/* =========================================================================
   Numeris Conseil : modules propres au site
   -------------------------------------------------------------------------
   Le héros « billboard » (référence dinancompany.com) : une vidéo ou une photo
   sous un voile sombre, un filet vertical à gauche du texte, un surtitre en
   capitales, le grand titre serif, l'accroche, deux boutons blancs.
   ========================================================================= */
.billboard {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--nuit); color: #fff;
  min-height: min(88vh, 860px); display: flex; align-items: flex-end;
}
.billboard-page { min-height: min(62vh, 560px); }
.billboard-fond { position: absolute; inset: 0; z-index: -2; }
.billboard-fond video, .billboard-fond img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.billboard-voile {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(13,22,43,.84) 0%, rgba(13,22,43,.5) 45%, rgba(13,22,43,.12) 100%),
    linear-gradient(180deg, rgba(13,22,43,.12) 0%, rgba(13,22,43,0) 50%, rgba(13,22,43,.6) 100%); /* voile allégé, Pastel 90 */
}
.billboard .container { padding-top: clamp(8rem, 14vw, 11rem); padding-bottom: clamp(3.5rem, 6vw, 5.5rem); }
.billboard-contenu { position: relative; max-width: 780px; padding-left: clamp(1.4rem, 3vw, 2.6rem); }
.billboard-contenu::before {
  content: ""; position: absolute; left: 0; top: .3rem; bottom: .3rem; width: 1px;
  background: linear-gradient(180deg, var(--accent), rgba(226,111,85,.25));
  transform: scaleY(0); transform-origin: top; transition: transform 1.4s var(--sortie) .2s;
}
body.pret .billboard-contenu::before { transform: scaleY(1); }
.billboard .surtitre { color: rgba(255,255,255,.62); }
.billboard h1 { color: #fff; font-size: clamp(2.7rem, 5.6vw, 4.9rem); max-width: 19ch; margin-bottom: 1.2rem; }
.billboard-page h1 { font-size: clamp(2.3rem, 4.4vw, 3.6rem); }
.billboard h1 em { color: var(--accent); }
.billboard .chapo { color: rgba(255,255,255,.84); max-width: 60ch; font-size: clamp(1.05rem, 1.4vw, 1.2rem); }
.billboard-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.2rem; }
.billboard-large .billboard-contenu { max-width: 1000px; } /* trois boutons sur une ligne (Pastel 100) */
.billboard-large h1 { max-width: 30ch; }
.btn-blanc { background: #fff; color: var(--encre); }
.btn-blanc .rond { background: var(--accent-pale); color: var(--encre); }
.btn-blanc:hover { background: var(--papier); box-shadow: var(--ombre); }
.btn-blanc-filet { border-color: rgba(255,255,255,.55); color: #fff; background: transparent; }
.btn-blanc-filet .rond { background: rgba(255,255,255,.12); }
.btn-blanc-filet:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.billboard-mention {
  position: absolute; right: var(--gouttiere); bottom: 1.4rem; z-index: 1;
  font-family: var(--f-label); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.4);
}

/* Chiffres en ligne, séparés par des filets (référence : la grille à colonnes de Dinan). */
.chiffres-ligne { display: grid; grid-template-columns: repeat(4, 1fr); }
.chiffre-col { padding: .4rem clamp(1.2rem, 3vw, 2.6rem); border-left: 1px solid var(--filet-fort); }
.chiffre-col:first-child { border-left: 0; padding-left: 0; }
.chiffre-col strong {
  display: block; font-family: var(--f-display); font-weight: 400;
  font-size: clamp(2.4rem, 4vw, 3.6rem); line-height: 1; color: var(--encre); margin-bottom: .6rem;
  font-variant-numeric: tabular-nums;
}
.chiffre-col strong small { font-size: .55em; color: var(--accent-texte); margin-left: .1em; }
.chiffre-col p { font-size: .92rem; color: var(--sourdine); margin: 0; max-width: 22ch; }

/* La bande sombre des métiers : cartes transparentes, pictogrammes or. */
.section-sombre { background: var(--encre); color: rgba(255,255,255,.8); }
.section-sombre h2, .section-sombre h3 { color: #fff; }
.section-sombre .surtitre { color: var(--accent); }
.section-sombre .chapo { color: rgba(255,255,255,.72); }
.metiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.metier {
  display: flex; flex-direction: column; padding: 2.2rem 2rem 2rem; border-radius: 22px;
  border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04);
  transition: border-color .7s var(--entree), background .7s var(--entree), transform .7s var(--sortie);
}
.metier:hover { border-color: rgba(226,111,85,.6); background: rgba(255,255,255,.07); transform: translateY(-5px); }
.metier .picto { display: block; width: 54px; height: 54px; margin-bottom: 1.6rem; color: var(--accent); }
.metier .picto svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.metier h3 { font-size: 1.45rem; margin-bottom: .7rem; }
.metier p { font-size: .95rem; color: rgba(255,255,255,.7); margin-bottom: 1.6rem; }
.metier .lien-texte { margin-top: auto; color: #fff; }
.metier .lien-texte::after { background: var(--accent); }
.metier .lien-texte span { background: rgba(255,255,255,.1); color: var(--accent); }
.metier .lien-texte:hover span { background: var(--accent); color: var(--encre); }

/* Opérations : cartes avec la plaque de l'opération, la date, le secteur, le rôle. */
.operations { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.operation {
  display: flex; flex-direction: column; border-radius: 22px; overflow: hidden;
  background: var(--blanc); border: 1px solid var(--filet); box-shadow: var(--ombre);
  transition: transform .7s var(--sortie), box-shadow .7s var(--entree);
}
.section:not(.section-papier) .operation { background: var(--papier); box-shadow: none; }
.operation:hover { transform: translateY(-5px); box-shadow: var(--ombre-haute); }
.operation img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.operation-corps { padding: 1.5rem 1.6rem 1.7rem; display: flex; flex-direction: column; flex: 1; }
.operation .surtitre { justify-content: space-between; margin-bottom: .8rem; font-size: .66rem; }
.operation .surtitre time { color: var(--sourdine); font-weight: 500; letter-spacing: .06em; }
.operation h3 { font-size: 1.22rem; margin-bottom: .6rem; }
.operation .deal { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .5rem; font-family: var(--f-display); font-size: 1.15rem; color: var(--encre); margin-bottom: .8rem; }
.operation .deal small { font-family: var(--f-label); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-texte); }
.operation p.role { font-size: .84rem; color: var(--sourdine); margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--filet); }

/* Tombstones : les 60 opérations du track record (retours Pastel 61 et 63), quatre par ligne.
   Composition centrée et lisible : pastille du type, client (logo puis nom), ligne « a été cédée à »
   entre deux filets, contrepartie, secteur en pied (retour de Rayane, 17 septembre 2026). */
.tombstones { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.tombstone {
  display: flex; flex-direction: column; align-items: center; text-align: center; min-height: 300px;
  padding: 1.35rem 1.25rem 1.1rem; border-radius: 18px;
  background: var(--blanc); border: 1px solid var(--filet);
  transition: transform .6s var(--sortie), box-shadow .6s var(--entree);
}
.tombstone:hover { transform: translateY(-4px); box-shadow: var(--ombre); }
.ts-type {
  display: inline-block; font-family: var(--f-label); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase;
  padding: .32rem .75rem; border-radius: 999px; margin-bottom: 1.1rem;
  background: rgba(13,28,63,.07); color: var(--encre);
}
/* Une couleur par type (Pastel 104, 24/09/2026) : cession corail, acquisition marine, financement vert, conseil or. */
.ts-type-cession { background: rgba(226,111,85,.14); color: var(--accent-texte); }
.ts-type-acquisition { background: rgba(13,28,63,.09); color: var(--encre); }
.ts-type-financement { background: rgba(31,122,86,.16); color: #1C6B4B; }
.ts-type-conseil { background: rgba(177,159,105,.32); color: #6B5A2A; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.ts-partie { display: flex; flex-direction: column; align-items: center; gap: .45rem; width: 100%; }
/* Taille des logos revenue à celle d'avant le 2 octobre (retour du 5 octobre : le « trop petit » venait des marges blanches des
   fichiers, recadrées depuis dans assets/img/tombstones/ par tools/fcs_logos_marges.py). */
.ts-partie img { display: block; width: auto; max-width: 72%; height: auto; max-height: 52px; object-fit: contain; }
.ts-partie strong { font-family: var(--f-corps); font-weight: 600; font-size: 1.02rem; line-height: 1.3; color: var(--encre); }
.ts-partie .ts-nom { font-size: .84rem; margin-top: .1rem; }
.ts-contre strong { font-size: .98rem; }
.ts-contre img { max-height: 44px; }
.ts-lien { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .6rem; width: 100%; margin: .85rem 0; }
.ts-lien::before, .ts-lien::after { content: ""; height: 1px; background: var(--filet); }
.ts-lien span { font-size: .78rem; font-style: italic; color: var(--sourdine); white-space: nowrap; }
.ts-mission { font-size: .9rem; color: var(--ardoise); margin: .9rem 0 0; }
.ts-secteur {
  margin-top: auto; padding-top: .9rem; width: 100%; border-top: 1px solid var(--filet); margin-top: auto;
  font-family: var(--f-label); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sourdine);
}
.ts-secteur { margin-top: 1rem; }
.tombstone .ts-secteur { margin-top: auto; padding-top: 1rem; }
.tombstone.masque { display: none; }
.tombstones-filtres { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin: 0 0 2rem; }
.tombstones-filtres button {
  font-family: var(--f-label); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  padding: .65rem 1.15rem; border-radius: 999px; border: 1px solid var(--filet); background: var(--blanc); color: var(--encre); cursor: pointer;
  transition: background .3s, color .3s, border-color .3s;
}
.tombstones-filtres button:hover { border-color: var(--encre); }
.tombstones-filtres button[aria-pressed="true"] { background: var(--encre); color: #fff; border-color: var(--encre); }
.tombstones-note { text-align: center; font-size: .85rem; color: var(--sourdine); margin: 1.8rem 0 0; }
.equipe-note { text-align: center; color: var(--sourdine); margin: 1.6rem 0 0; }

/* Mur de logos clients : le gabarit partenaires de Patrimoine, en quatre colonnes. */
.clients { grid-template-columns: repeat(4, 1fr); }
.clients .partenaire { background: var(--blanc); border: 1px solid var(--filet); }
.section:not(.section-papier) .clients .partenaire { background: var(--papier); }
.clients .partenaire img { max-height: 52px; }

/* Quatre tuiles (la méthode, les valeurs) : le triptyque sans décalage. */
.quatuor { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.quatuor .tuile { margin-top: 0 !important; padding-block: 1.9rem !important; }
.tuile .picto { display: block; width: 40px; height: 40px; color: var(--accent-texte); margin-bottom: 1.1rem; }
.picto-inline { display: inline-grid; place-items: center; width: 20px; height: 20px; color: var(--accent-texte); }
.picto-inline svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tuile .picto svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Détail des services : édito image + liste à puces or, en alternance. */
.service-detail { padding-block: clamp(2rem, 4vw, 3.2rem); border-top: 1px solid var(--filet); }
.service-detail:first-of-type { border-top: 0; padding-top: 0; }
.service-detail.inverse .edito-media { order: 2; }
.edito-media { margin: 0; }
.edito-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 22px; box-shadow: var(--ombre); }
.puces { list-style: none; margin: 1.2rem 0 1.6rem; padding: 0; display: grid; gap: .55rem; }
.puces li { position: relative; padding-left: 1.5rem; font-size: .96rem; color: var(--ardoise); }
.puces li::before { content: ""; position: absolute; left: 0; top: .62rem; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.puces li strong { display: block; color: var(--encre); }
.sous-puces { list-style: none; margin: .35rem 0 0; padding: 0 0 0 1rem; display: grid; gap: .3rem; }
.sous-puces li { font-size: .9rem; color: var(--sourdine); padding-left: 1.1rem; }
.sous-puces li::before { width: 5px; height: 5px; background: var(--filet-fort); top: .58rem; }

/* Équipe sans portrait : monogramme sur pierre. */
.membre-mono {
  width: 100%; aspect-ratio: 4 / 5; border-radius: 14px; background: var(--pierre);
  display: grid; place-items: center; margin-bottom: 1rem;
  font-family: var(--f-display); font-size: 2.6rem; color: var(--encre); opacity: .55;
}
.equipe-trio { grid-template-columns: repeat(3, 1fr); max-width: 980px; }
.equipe-trois { grid-template-columns: repeat(3, 1fr); gap: 2rem 1.6rem; } /* trois par ligne, Pastel 89 (24/09/2026) */
.equipe-trois .membre h3 { font-size: 1.22rem; }
.equipe-trois .membre-bio { font-size: .88rem; }
@media (max-width: 700px) { .equipe-trois { grid-template-columns: 1fr 1fr; gap: 1.4rem 1rem; } }
@media (max-width: 480px) { .equipe-trois { grid-template-columns: 1fr; } }

/* Actualités : la carte Patrimoine, avec une plaque d'opération ou une photo. */
.article-media img.contenu { object-position: center; }

/* Carte d'accès */
.carte-acces { border-radius: 22px; overflow: hidden; border: 1px solid var(--filet); }
.carte-acces iframe { width: 100%; height: 360px; border: 0; display: block; filter: grayscale(1) contrast(1.05); }

@media (max-width: 1080px) {
  .metiers, .operations, .tombstones { grid-template-columns: 1fr 1fr; }
  .quatuor, .clients { grid-template-columns: 1fr 1fr; }
  .chiffres-ligne { grid-template-columns: 1fr 1fr; row-gap: 2rem; }
  .chiffre-col:nth-child(3) { border-left: 0; padding-left: 0; }
  .equipe-trio { grid-template-columns: 1fr 1fr; }
  .service-detail.inverse .edito-media { order: 0; }
}
@media (max-width: 700px) {
  .metiers, .operations, .quatuor, .clients, .equipe-trio, .tombstones { grid-template-columns: 1fr; }
  .chiffres-ligne { grid-template-columns: 1fr 1fr; }
  .chiffre-col { padding-inline: 1rem; }
  .billboard { min-height: 0; }
  .billboard .container { padding-top: 7rem; }
  .billboard-actions .btn { width: 100%; justify-content: space-between; }
  .billboard-mention { display: none; }
}


/* =========================================================================
   Disposition des sections de l'accueil (référence choreoadvisors.com) :
   une idée par écran, texte d'un côté et pile de deux photos de l'autre,
   liste de services à chevrons, chiffres sur fond sombre rayonnant, bandeau
   photo, rangée de cartes photo + panneau sombre, contact en deux colonnes.
   ========================================================================= */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.duo > div { max-width: 520px; }
.duo.inverse > .pile { order: 2; }
.duo .btn { margin-top: .6rem; }

/* La pile : une grande photo, une petite qui la chevauche en bas à droite. */
.pile { position: relative; margin: 0; padding-bottom: 14%; }
.pile img { display: block; object-fit: cover; }
.pile-grande { width: 72%; aspect-ratio: 4 / 5; border-radius: 4px; }
.pile-petite { position: absolute; right: 0; bottom: 0; width: 54%; aspect-ratio: 5 / 6; border-radius: 4px; box-shadow: var(--ombre-haute); }
.pile-inverse .pile-grande { margin-left: auto; }
.pile-inverse .pile-petite { right: auto; left: 0; }

/* Liste de services à chevrons. */
.liste-chevrons { list-style: none; margin: 0; padding: 0; }
.liste-chevrons li { border-bottom: 1px solid var(--filet); }
.liste-chevrons li:first-child { border-top: 1px solid var(--filet); }
.liste-chevrons a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .95rem .2rem; font-size: clamp(1.05rem, 1.4vw, 1.25rem); font-weight: 500; color: var(--encre);
  transition: color .5s var(--entree), padding-left .5s var(--sortie);
}
.liste-chevrons a::after { content: "\203A"; font-family: var(--f-display); font-size: 1.6rem; line-height: 1; color: var(--accent); transition: transform .5s var(--sortie); }
.liste-chevrons a:hover { color: var(--accent-texte); padding-left: .6rem; }
.liste-chevrons a:hover::after { transform: translateX(4px); }
.liste-chevrons small { display: block; font-size: .78rem; font-weight: 400; color: var(--sourdine); }

/* Le réseau : fond sombre rayonnant, tout centré, chiffres sur une ligne. */
.section-reseau {
  color: rgba(255,255,255,.82); text-align: center;
  background: radial-gradient(ellipse 70% 60% at 50% 0%, #2a3c70 0%, var(--encre) 55%, var(--nuit) 100%);
}
.section-reseau .surtitre { justify-content: center; color: rgba(255,255,255,.55); }
.section-reseau h2 { color: #fff; max-width: 24ch; margin: 0 auto 3rem; }
.section-reseau h2 em { color: var(--accent); }
.chiffres-reseau { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; text-align: left; margin-bottom: 2.6rem; }
.chiffres-reseau strong {
  display: block; font-family: var(--f-display); font-weight: 400; font-size: clamp(2.6rem, 4.4vw, 3.8rem);
  line-height: 1; color: #fff; margin-bottom: .6rem; font-variant-numeric: tabular-nums;
}
.chiffres-reseau strong small { font-size: .6em; color: var(--accent); margin-left: .05em; }
.chiffres-reseau p { font-size: .92rem; color: rgba(255,255,255,.7); margin: 0; max-width: 22ch; }
.section-reseau .note { display: block; text-align: right; font-size: .74rem; color: var(--accent); margin-top: 2rem; }

/* Bandeau photo : la photo sous un voile, un titre blanc centré, un bouton. */
/* Bande photo de l'accueil (7 octobre 2026, Xavier Jeunot) : la bande montre le haut de la photo (les visages ne sont plus coupés)
   et le texte descend sous les visages, dans le bas de l'image, au lieu de passer devant Benjamin. */
.bandeau-photo { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 2.6 / 1; min-height: 460px; min-width: 0; width: 100%; text-align: center; color: #fff; padding-block: clamp(3rem, 6vw, 5rem) clamp(1.6rem, 2.5vw, 2.2rem); }
/* Sur mobile (13 octobre 2026) : sans « min-width: 0 », le navigateur déduisait la largeur du min-height par le ratio (460 × 2,6 = 1196 px)
   et toute la page débordait ; sous 1080 px le ratio est abandonné, la bande prend une hauteur fixe. */
@media (max-width: 1080px) { .bandeau-photo { aspect-ratio: auto; min-height: 420px; } .bandeau-photo img { object-position: 50% 30%; } }
@media (max-width: 700px) { .bandeau-photo { min-height: 380px; } .bandeau-photo h2 { font-size: 1.5rem; } }
.bandeau-photo img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
.bandeau-photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(13,22,43,.35) 0%, rgba(13,22,43,.45) 45%, rgba(13,22,43,.82) 100%); }
.bandeau-photo h2 { color: #fff; font-size: clamp(1.7rem, 2.5vw, 2.4rem); max-width: 20ch; margin: 0 auto 1.2rem; }
.bandeau-photo h2 em { color: var(--accent); }

/* Rangée d'opérations : photo à gauche, panneau sombre à droite, flèches. */
.entete-rangee { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 2.2rem; }
.entete-rangee h2 { margin: 0; max-width: 24ch; }
.fleches { display: flex; gap: .6rem; flex-shrink: 0; }
.fleche {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--filet-fort); background: transparent;
  color: var(--encre); cursor: pointer; display: grid; place-items: center; font-size: 1.1rem;
  transition: background .5s var(--entree), color .5s var(--entree), border-color .5s var(--entree);
}
.fleche:hover { background: var(--encre); color: #fff; border-color: var(--encre); }
.rangee { display: grid; grid-auto-flow: column; grid-auto-columns: calc(50% - .6rem); gap: 1.2rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: .3rem; }
.rangee::-webkit-scrollbar { display: none; }
.temoin { display: grid; grid-template-columns: .9fr 1.1fr; min-height: 380px; scroll-snap-align: start; border-radius: 4px; overflow: hidden; }
.temoin img { width: 100%; height: 100%; object-fit: cover; object-position: left center; } /* la plaque est à droite : on montre la photo */
.temoin-panneau { background: var(--encre); color: rgba(255,255,255,.85); padding: 2rem 2rem 1.8rem; display: flex; flex-direction: column; }
.temoin-panneau .surtitre { color: var(--accent); margin-bottom: 1rem; }
.temoin-panneau .deal { font-family: var(--f-display); font-size: clamp(1.2rem, 1.7vw, 1.5rem); line-height: 1.3; color: #fff; margin: 0 0 1.2rem; }
.temoin-panneau .deal em { font-style: normal; color: var(--accent); }
.temoin-panneau .role { font-size: .9rem; color: rgba(255,255,255,.7); margin-top: auto; padding-top: 1.1rem; border-top: 1px solid rgba(255,255,255,.25); }
.temoin-panneau .role strong { color: #fff; display: block; margin-bottom: .2rem; }
.temoin-panneau .lien-texte { color: #fff; margin-top: 1rem; align-self: flex-start; }
.temoin-panneau .lien-texte span { background: rgba(255,255,255,.12); color: var(--accent); }

/* Contact en deux colonnes, champs soulignés. */
.connect { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.connect h2 { max-width: 16ch; }
.form-lignes .champ input, .form-lignes .champ select, .form-lignes .champ textarea {
  background: transparent; border: 0; border-bottom: 1px solid var(--encre); border-radius: 0; padding: .55rem 0;
}
.form-lignes .champ input:focus, .form-lignes .champ textarea:focus, .form-lignes .champ select:focus { box-shadow: none; border-bottom-color: var(--accent); background: transparent; }
.form-lignes .champ label { color: var(--ardoise); }
.form-lignes .btn { margin-top: .6rem; }
.mention-legale { grid-column: 1 / -1; font-size: .74rem; color: var(--sourdine); margin: 0; }
.mention-legale a { color: var(--encre); text-decoration: underline; text-underline-offset: 2px; }

/* Actualités compactes. */
.actus-compactes { display: grid; grid-template-columns: 1fr 2fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.actus-compactes .articles-grille { grid-template-columns: 1fr; gap: 0; }
.actus-compactes .article-carte { display: grid; grid-template-columns: 120px 1fr; gap: 1.2rem; align-items: center; padding: 1rem 0; border-bottom: 1px solid var(--filet); }
.actus-compactes .article-carte:first-child { border-top: 1px solid var(--filet); }
.actus-compactes .article-media img { aspect-ratio: 4 / 3; }
.actus-compactes .article-carte .surtitre { margin: 0 0 .3rem; }
.actus-compactes .article-carte h3 { font-size: 1.1rem; margin: 0; }
.actus-compactes .article-texte p:last-child { display: none; }

@media (max-width: 1080px) {
  .duo, .connect, .actus-compactes { grid-template-columns: 1fr; }
  .duo > div { max-width: none; }
  .duo.inverse > .pile { order: 0; }
  .chiffres-reseau { grid-template-columns: 1fr 1fr; }
  .rangee { grid-auto-columns: 85%; }
  .temoin { grid-template-columns: 1fr; min-height: 0; }
  .temoin img { aspect-ratio: 16 / 9; }
}
@media (max-width: 700px) {
  .chiffres-reseau { grid-template-columns: 1fr 1fr; gap: 1.4rem; }
  .entete-rangee { flex-direction: column; align-items: flex-start; }
  .actus-compactes .article-carte { grid-template-columns: 90px 1fr; }
}

/* ---------------------------------------------------------------- Motion */
/* Entrée lourde : le flou qui se dissipe est ce qui donne la sensation de
   masse. Sans lui, un fade-up fait « template ». */
.js [data-reveal] { opacity: 0; transform: translateY(26px); filter: blur(7px); }
body.pret [data-reveal] { transition: opacity .95s var(--sortie), transform .95s var(--sortie), filter .95s var(--sortie); }
[data-reveal].vu { opacity: 1; transform: none; filter: none; }
[data-serie] > * { transition-delay: calc(var(--i, 0) * 90ms); }

.ligne { display: block; overflow: hidden; padding-bottom: .06em; }
.ligne-inner { display: block; transition: transform 1.15s var(--sortie); }
.js .ligne-inner { transform: translateY(108%); }
body.pret .ligne-inner { transform: none; }
.ligne:nth-child(2) .ligne-inner { transition-delay: .11s; }
.ligne:nth-child(3) .ligne-inner { transition-delay: .22s; }

.js [data-fondu] { opacity: 0; transform: translateY(18px); filter: blur(6px); }
body.pret [data-fondu] {
  opacity: 1; transform: none; filter: none;
  transition: opacity 1s var(--sortie) var(--retard, .45s), transform 1s var(--sortie) var(--retard, .45s), filter 1s var(--sortie) var(--retard, .45s);
}

/* ---------------------------------------------------------------- Responsive */
@media (max-width: 1080px) {
  .heros-grille, .edito, .edito-axe, .contact-grille, .groupe, .citation-bloc { grid-template-columns: 1fr; }
  .heros-media { order: -1; }
  .heros-media img { aspect-ratio: 16 / 11; }
  .heros-media::before { display: none; }
  .carte-preuve { grid-template-columns: 1fr 1fr; }
  .pourquoi, .domaines, .solutions, .articles-grille { grid-template-columns: 1fr 1fr; }
  .partenaires { grid-template-columns: repeat(3, 1fr); }
  .citation-media { aspect-ratio: 16 / 9; max-height: 320px; }
  .methode { grid-template-columns: repeat(2, 1fr); row-gap: 2.5rem; }
  .triptyque { grid-template-columns: 1fr 1fr; }
  .triptyque .tuile:nth-child(n) { margin-top: 0; }
  .pied-haut { grid-template-columns: 1fr 1fr; }
  .signaux-grille, .simu, .simu-hypotheses-corps, .cas { grid-template-columns: 1fr; }
  .panneau-hote { position: static; }
  .cas:nth-child(even) .cas-releve { order: 0; }
  .cas-releve .carte { position: static; }
  .qr-liste { columns: 1; }
  .centre-lien { margin-top: 0; }
  .axe-tete { grid-template-columns: 1fr auto; }
  .axe-corps { grid-template-columns: 1fr 1fr; }
  .axe-corps .axe-vide { display: none; }
  .articles-liste .article-carte.large { grid-template-columns: 1fr; }
  .portraits .portrait:nth-child(2) { margin-top: 0; }
}

@media (max-width: 1340px) {
  .marque .branche { display: none; }
}

@media (max-width: 1100px) {
  .nav-principale {
    position: fixed; left: var(--gouttiere); right: var(--gouttiere); top: 5.2rem;
    background: #fff;   /* fond plein : avec un flou d'arrière-plan dans l'en-tête déjà flouté, le panneau se rendait transparent (13/10/2026) */
    border: 1px solid var(--filet); border-radius: 22px; box-shadow: var(--ombre-haute);
    max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height .8s var(--entree), opacity .5s var(--entree);
  }
  .nav-principale.ouverte { max-height: 70vh; overflow-y: auto; opacity: 1; }
  .nav-principale ul { flex-direction: column; align-items: stretch; gap: 0; padding: .6rem 1.4rem 1.2rem; }
  .nav-principale a { display: block; padding: .9rem 0; border-bottom: 1px solid var(--filet); }
  .nav-principale li:last-child a { border-bottom: 0; }
  .nav-principale a::after { display: none; }
  .nav-principale li { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--sortie), transform .5s var(--sortie); }
  .nav-principale.ouverte li { opacity: 1; transform: none; }
  .nav-principale.ouverte li:nth-child(1) { transition-delay: .08s; }
  .nav-principale.ouverte li:nth-child(2) { transition-delay: .14s; }
  .nav-principale.ouverte li:nth-child(3) { transition-delay: .2s; }
  .nav-principale.ouverte li:nth-child(4) { transition-delay: .26s; }
  .nav-principale.ouverte li:nth-child(5) { transition-delay: .32s; }
  .nav-principale.ouverte li:nth-child(6) { transition-delay: .38s; }
  .bascule-nav { display: block; }
  .entete-cta { display: none; }
  /* Le bouton Prendre rendez-vous de l'en-tête disparaît sous 1100 px : il revient en dernière ligne du menu. */
  .nav-principale .nav-rdv { display: block; }
  .nav-principale .nav-rdv a { color: var(--accent); font-weight: 600; }
}

@media (max-width: 700px) {
  .carte-preuve, .pourquoi, .domaines, .solutions, .articles-grille, .portraits, .methode, .triptyque, .form-grille { grid-template-columns: 1fr; }
  .partenaires { grid-template-columns: 1fr 1fr; }
  .pied-haut { grid-template-columns: 1fr; }
  .carte-preuve { padding: 1.6rem 1.5rem; }
  .heros-actions .btn, .bandeau-final .btn, .rdv-bande .btn { width: 100%; justify-content: space-between; }
  .axe-tete { grid-template-columns: 1fr auto; row-gap: .55rem; }
  .axe-cle { grid-column: 1 / -1; }
  .axe-corps { grid-template-columns: 1fr; gap: 1.8rem; }
  .marque .branche { display: none; }
}

/* ---------------------------------------------------------------- Sobriété */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  [data-reveal], [data-fondu], .axe-corps { opacity: 1 !important; transform: none !important; filter: none !important; }
  .ligne-inner { transform: none !important; }
}


/* =========================================================================
   v0.3 : sous-menus, pages de section, équipe, histoire, implantations
   ========================================================================= */


/* Pas de texte penché : le mot mis en avant ne change que de couleur (demande du 3 septembre). */
em, i, .article-corps em, .article-corps blockquote p { font-style: normal; }

/* Galerie « La vie du cabinet » : photos du shooting dans les bureaux (30 septembre 2026) */
.galerie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.galerie figure { margin: 0; }
.galerie img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; display: block; }
.galerie figure:nth-child(1) { grid-column: span 2; }
.galerie figure:nth-child(1) img { aspect-ratio: 8 / 3; }
@media (max-width: 720px) { .galerie { grid-template-columns: 1fr 1fr; } .galerie figure:nth-child(1) { grid-column: span 2; } }

/* Équipe : parcours replié, photo de groupe avant les cartes (30 septembre 2026) */
.membre-parcours { margin-top: .5rem; }
.membre-parcours summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.membre-parcours summary::-webkit-details-marker { display: none; }
.membre-parcours summary::after { content: "+"; font-size: 1rem; line-height: 1; }
.membre-parcours[open] summary::after { content: "–"; }
.membre-parcours .membre-bio { margin-top: .5rem; }
.equipe-photo { margin: 0 0 clamp(2rem, 4vw, 3rem); }
.equipe-photo img { width: 100%; aspect-ratio: 2.5 / 1; object-fit: cover; border-radius: 4px; display: block; }
.equipe-photo figcaption { font-size: .85rem; color: var(--sourdine); margin-top: .7rem; }