/* ══════════════════════════════════════════════════════════════════════
   La porte de l'agence — /rousseau-5

   Un seul mouvement : ease-out expo, 1,1 s. Une seule famille : le serif
   du thème, très grand, très calme. Aucune boîte : des filets et de l'air.
   ══════════════════════════════════════════════════════════════════════ */

.porte {
	--po-ease: cubic-bezier(.16, 1, .3, 1);
	--po-duree: 1.1s;
	--po-x: clamp(20px, 6vw, 96px);
	background: #fff;
	color: var(--green, #081938);
	font-family: var(--font-sans);
}
.porte-col { max-width: 1040px; margin: 0 auto; padding: 0 var(--po-x); }
.porte-col-large { max-width: 1440px; }

/* Complément de titre lu par les moteurs et les lecteurs d'écran, jamais
   affiché : « Cinq personnes. » reste le mot du design, le sujet suit. */
.porte .screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* <address> est en italique par défaut dans tous les navigateurs */
.porte-contact-adresse { font-style: normal; }

/* Typographie */
.porte-h2 {
	font-family: var(--font); font-weight: normal; letter-spacing: -.02em;
	font-size: clamp(40px, 6vw, 88px); line-height: .98; margin: 0;
}
.porte-sous {
	font-family: var(--font); font-size: clamp(22px, 2.6vw, 34px);
	color: var(--gold, #8B6F47); margin: 14px 0 0; font-style: italic;
}
.porte-tete { margin-bottom: clamp(48px, 7vw, 96px); }

/* ── L'entrée ─────────────────────────────────────────────────────── */
.porte-entree {
	min-height: 100vh; min-height: 100svh;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	text-align: center; position: relative;
	padding: calc(var(--r5-header-h, 72px) + 40px) var(--po-x) 96px;
	background: linear-gradient(180deg, #fff 0%, var(--cream, #F5F2ED) 100%);
}
.porte-entree-mot {
	font-family: var(--font); font-weight: normal; letter-spacing: -.035em;
	font-size: clamp(54px, 12vw, 168px); line-height: .92; margin: 0;
}
.porte-entree-sous {
	font-family: var(--font); font-weight: normal; font-style: italic;
	font-size: clamp(17px, 1.9vw, 24px); line-height: 1.5; letter-spacing: 0;
	color: rgba(8,25,56,.66); margin: 30px auto 0; max-width: 34em;
}
.porte-entree-filet { display: block; width: 1px; height: 64px; background: var(--gold, #8B6F47); margin: 48px auto 0; }
.porte-entree-descendre {
	position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%);
	display: flex; flex-direction: column; align-items: center; gap: 10px;
	font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
	color: var(--gold, #8B6F47); text-decoration: none;
}
.porte-entree-descendre i {
	display: block; width: 1px; height: 28px; background: currentColor; opacity: .6;
	animation: porte-goutte 2.4s var(--po-ease) infinite;
}
@keyframes porte-goutte { 0% { transform: scaleY(0); transform-origin: top; } 45% { transform: scaleY(1); transform-origin: top; } 46% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ── Le manifeste ─────────────────────────────────────────────────── */
.porte-manifeste { padding: clamp(96px, 14vw, 200px) 0; }
.porte-manifeste-txt {
	font-family: var(--font); font-weight: normal; letter-spacing: -.015em;
	font-size: clamp(28px, 3.6vw, 52px); line-height: 1.28; margin: 0;
}
.porte-manifeste-txt span { display: block; }
.porte-manifeste-txt span + span { margin-top: .55em; }
.porte-manifeste-txt span:last-child { color: var(--gold, #8B6F47); }

/* ── L'immeuble, épinglé ───────────────────────────────────────────
   On est dehors. La façade reste en place pendant que l'équipe monte
   dessus — pur CSS : un conteneur plus haut que l'écran, une image
   collante d'un écran de haut. */
.porte-immeuble { height: 170vh; position: relative; z-index: 1; }
.porte-immeuble-fixe { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--green, #081938); }
.porte-immeuble-fixe img {
	position: absolute; inset: -6% 0; width: 100%; height: 112%;
	object-fit: cover; object-position: center 28%; display: block; will-change: transform;
}
.porte-immeuble-fixe::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(8,25,56,.08) 0%, rgba(8,25,56,0) 35%, rgba(8,25,56,.55) 100%);
}
.porte-immeuble-legende {
	position: absolute; left: var(--po-x); bottom: 64px; z-index: 1; margin: 0; color: #fff;
	font-size: 11px; letter-spacing: .24em; text-transform: uppercase;
}
.porte-immeuble-legende em { display: block; margin-top: 10px; font-family: var(--font); font-style: italic; font-size: clamp(20px, 2.2vw, 30px); letter-spacing: 0; text-transform: none; }

/* ── L'équipe — on est dedans ─────────────────────────────────────── */
.porte-equipe {
	position: relative; z-index: 2;
	margin-top: -70vh;
	background: var(--green, #081938); color: #fff;
	border-radius: 40px 40px 0 0;
	padding: clamp(88px, 11vw, 150px) 0 clamp(96px, 12vw, 160px);
	box-shadow: 0 -30px 80px rgba(8,25,56,.35);
}
.porte-tete-clair .porte-h2 { color: #fff; }
.porte-tete-clair .porte-sous { color: var(--gold-light, #A88B63); }
.porte-portraits {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.2vw, 32px);
}
.porte-portrait {
	min-width: 0; display: grid; grid-template-columns: minmax(200px, 38%) minmax(0, 1fr);
	background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.09);
	border-radius: 28px; overflow: hidden;
	transition: background .8s var(--po-ease), border-color .8s var(--po-ease), transform .9s var(--po-ease);
}
.porte-portrait:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); transform: translateY(-4px); }
/* Une personne seule sur la dernière ligne : centrée, même largeur que les autres. */
.porte-portrait:last-child:nth-child(odd) { grid-column: 1 / -1; width: calc(50% - clamp(9px, 1.1vw, 16px)); justify-self: center; }
.porte-portrait-img { overflow: hidden; position: relative; min-height: 320px; }
.porte-portrait-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 15%; display: block; transform: scale(1.02); transition: transform 1.4s var(--po-ease); }
.porte-portrait:hover .porte-portrait-img img { transform: scale(1.06); }
.porte-portrait-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,25,56,0) 70%, rgba(8,25,56,.35) 100%), linear-gradient(180deg, rgba(8,25,56,.02) 0%, rgba(8,25,56,.3) 100%); }
.porte-portrait-txt { padding: clamp(26px, 3vw, 40px) clamp(24px, 3vw, 40px); display: flex; flex-direction: column; }
.porte-portrait-nom { font-family: var(--font); font-weight: normal; font-size: clamp(24px, 2.1vw, 32px); margin: 0 0 8px; letter-spacing: -.015em; color: #fff; line-height: 1.08; }
.porte-portrait-role { margin: 0 0 20px; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-light, #A88B63); }
.porte-portrait-focus { margin: 0 0 16px; font-size: 13px; line-height: 1.6; color: rgba(255,255,255,.55); }
.porte-portrait-bio { margin: 0; font-size: 15px; line-height: 1.75; color: rgba(255,255,255,.82); max-width: 44ch; }
/* Les coordonnées ferment la fiche, sous un filet : on les lit quand on a
   déjà décidé à qui écrire, pas avant. Repoussées en bas par margin-top:auto
   afin que toutes les fiches d'une même rangée alignent leur pied, quelle
   que soit la longueur de la bio. */
.porte-portrait-contact {
	margin: auto 0 0; padding-top: clamp(20px, 2.2vw, 28px);
	border-top: 1px solid rgba(255,255,255,.09);
	display: flex; flex-wrap: wrap; gap: 8px 22px;
	font-size: 13px; letter-spacing: .01em;
}
.porte-portrait-contact a,
.porte-portrait-contact .porte-portrait-ecrire {
	display: inline-flex; align-items: center; gap: 7px;
	color: rgba(255,255,255,.62); text-decoration: none;
	transition: color .5s var(--po-ease);
}
.porte-portrait-contact .porte-portrait-ecrire { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
.porte-portrait-contact a:hover,
.porte-portrait-contact a:focus-visible,
.porte-portrait-contact .porte-portrait-ecrire:hover,
.porte-portrait-contact .porte-portrait-ecrire:focus-visible { color: var(--gold-light, #A88B63); }
.porte-portrait-contact svg { flex: none; opacity: .75; }
/* Quand les coordonnées existent, c'est elles qui portent le margin-top:auto ;
   LinkedIn se contente alors de suivre. */
.porte-portrait-contact + .porte-portrait-linkedin { margin-top: 0; padding-top: 16px; }
.porte-portrait-linkedin {
	margin-top: auto; padding-top: 24px; align-self: flex-start;
	/* 18 px de large : l'icône seule, sans texte, était un point à viser.
	   On lui donne une cible carrée sans déplacer quoi que ce soit —
	   le padding haut absorbe déjà l'espace. */
	min-width: 24px; min-height: 24px;
	display: inline-flex; align-items: center; gap: 8px;
	color: rgba(255,255,255,.5); text-decoration: none; transition: color .6s var(--po-ease);
}
.porte-portrait-linkedin:hover { color: #fff; }
.porte-portrait-linkedin.est-vide { color: rgba(255,255,255,.22); }
.porte-portrait-linkedin.est-vide small { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.porte-portrait-linkedin.est-vide:hover { color: var(--gold-light, #A88B63); }

/* ── Les chiffres — une ligne, dans le noir ───────────────────────── */
.porte-chiffres { background: var(--green, #081938); color: #fff; padding: clamp(88px, 11vw, 150px) 0; }
.porte-chiffres-ligne { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.porte-chiffre { border-top: 1px solid rgba(255,255,255,.18); padding-top: 24px; }
.porte-chiffres { border-radius: 0 0 40px 40px; position: relative; z-index: 2; }
.porte-chiffre dt { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: 18px; }
.porte-chiffre dd {
	margin: 0; font-family: var(--font); font-size: clamp(52px, 6.4vw, 104px); line-height: .9;
	letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: #fff;
}

/* ── La méthode — quatre chapitres ───────────────────────────────── */
.porte-methode { padding: clamp(120px, 16vw, 220px) 0; }
.porte-methode-intro { margin: 28px 0 0; max-width: 54ch; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.7; color: rgba(8,25,56,.74); }
.porte-principes { list-style: none; margin: 0; padding: 0; }
.porte-principe {
	position: relative; overflow: hidden;
	display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 88px);
	padding: clamp(56px, 7vw, 104px) 0; border-top: 1px solid var(--border, #E0DCD4);
}
.porte-principe:last-child { border-bottom: 1px solid var(--border, #E0DCD4); }
.porte-principe-filigrane {
	position: absolute; right: -2vw; top: 50%; transform: translateY(-50%);
	font-family: var(--font); font-size: clamp(180px, 26vw, 380px); line-height: 1;
	color: rgba(8,25,56,.035); pointer-events: none; user-select: none; letter-spacing: -.04em;
}
.porte-principe-tete { position: relative; }
.porte-principe-num { display: block; font-family: var(--font); font-size: 13px; letter-spacing: .28em; color: var(--gold, #8B6F47); margin-bottom: 22px; }
.porte-principe h3 { font-family: var(--font); font-weight: normal; font-size: clamp(36px, 4.6vw, 64px); margin: 0 0 14px; letter-spacing: -.025em; line-height: 1; }
.porte-principe-accroche { margin: 0; font-family: var(--font); font-style: italic; font-size: clamp(18px, 1.8vw, 24px); color: var(--gold, #8B6F47); line-height: 1.35; }
.porte-principe-corps { position: relative; padding-top: clamp(0px, 2vw, 34px); }
.porte-principe-corps > p:first-child { margin: 0 0 28px; font-size: clamp(16px, 1.4vw, 20px); line-height: 1.72; color: rgba(8,25,56,.8); max-width: 58ch; }
.porte-principe-preuve { margin: 0; padding: 22px 0 0; border-top: 1px solid rgba(139,111,71,.35); display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: baseline; }
.porte-principe-preuve span { font-size: 14px; line-height: 1.6; color: rgba(8,25,56,.62); max-width: 44ch; }
.porte-principe-preuve a { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold, #8B6F47); text-decoration: none; white-space: nowrap; border-bottom: 1px solid rgba(139,111,71,.35); padding-bottom: 3px; }
.porte-principe-preuve a:hover { border-bottom-color: currentColor; }

/* ══════════════════════════════════════════════════════════════════
   /services — trois actes, trois pièces

   L'alternance clair / sombre est structurelle : chaque pilier est une
   pièce, on doit sentir qu'on en change. Plutôt que de réécrire chaque
   règle en double, chaque acte publie sa palette dans quatre variables
   et tout le contenu s'y accorde.
   ══════════════════════════════════════════════════════════════════ */
.srv-acte {
	--srv-titre: var(--green, #081938);
	--srv-txt: rgba(8,25,56,.78);
	--srv-filet: rgba(8,25,56,.13);
	--srv-sourdine: rgba(8,25,56,.52);
	--srv-fond-carte: rgba(8,25,56,.028);
	padding: clamp(96px, 13vw, 190px) 0;
	position: relative;
}
/* Chaque acte est une dalle qui flotte sur le blanc de la page, séparée
   de la suivante par une couture. Sans cette couture, les coins arrondis
   d'une dalle sombre laissent voir des encoches blanches contre la dalle
   claire qui la suit — le défaut se voit à 40 px de rayon. */
.srv-acte { border-radius: clamp(24px, 2.6vw, 40px); }
.srv-acte + .srv-acte { margin-top: clamp(10px, 1.2vw, 18px); }
.srv-acte-clair { background: var(--cream, #F5F2ED); }
.srv-acte-sombre {
	--srv-titre: #fff;
	--srv-txt: rgba(255,255,255,.78);
	--srv-filet: rgba(255,255,255,.15);
	--srv-sourdine: rgba(255,255,255,.5);
	--srv-fond-carte: rgba(255,255,255,.045);
	background: var(--green, #081938);
}

/* ── Le sommaire : trois portes avant d'entrer ───────────────────── */
.srv-sommaire { padding: 0 0 clamp(56px, 7vw, 104px); }
.srv-sommaire-liste {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
	border-top: 1px solid var(--border, #E0DCD4);
	border-bottom: 1px solid var(--border, #E0DCD4);
}
.srv-sommaire-item + .srv-sommaire-item { border-left: 1px solid var(--border, #E0DCD4); }
.srv-sommaire-item a {
	display: flex; flex-direction: column; height: 100%;
	padding: clamp(28px, 3.2vw, 44px) clamp(22px, 2.6vw, 36px);
	color: inherit; text-decoration: none; position: relative;
	transition: background .6s var(--po-ease);
}
/* Le filet or sous le numéro s'étire au survol : c'est lui qui dit
   « ceci est une porte », sans bouton. */
.srv-sommaire-num {
	display: flex; align-items: center; gap: 14px; margin-bottom: 22px;
	font-family: var(--font); font-size: 11px; letter-spacing: .22em;
	color: var(--gold, #8B6F47);
}
.srv-sommaire-num::after {
	content: ""; display: block; height: 1px; width: 56px;
	background: var(--gold, #8B6F47); transition: width .8s var(--po-ease);
}
.srv-sommaire-item a:hover .srv-sommaire-num::after,
.srv-sommaire-item a:focus-visible .srv-sommaire-num::after { width: 120px; }
.srv-sommaire-item a:hover { background: rgba(8,25,56,.025); }
.srv-sommaire-item strong {
	font-family: var(--font); font-weight: normal; margin-bottom: 8px;
	font-size: clamp(24px, 2.4vw, 34px); line-height: 1.08; letter-spacing: -.02em;
	color: var(--green, #081938);
}
.srv-sommaire-mots { font-size: 13px; letter-spacing: .02em; color: rgba(8,25,56,.55); margin-bottom: 26px; }
.srv-sommaire-aller {
	margin-top: auto; align-self: flex-start;
	font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold, #8B6F47);
}
.srv-sommaire-aller i { font-style: normal; display: inline-block; transition: transform .5s var(--po-ease); }
.srv-sommaire-item a:hover .srv-sommaire-aller i { transform: translateX(5px); }

/* Les ancres des trois actes : on s'arrête sous le header, pas derrière */
.srv-acte { scroll-margin-top: calc(var(--r5-header-h, 72px) + 16px); }
/* Une fiche visée depuis l'accueil (#david-abergel…) doit s'arrêter sous
   l'en-tête collant, pas derrière lui. */
.porte-portrait { scroll-margin-top: calc(var(--r5-header-h, 68px) + 24px); }
/* La fiche visée depuis l'accueil se distingue : liseré doré sur le
   portrait, nom en doré. Un seul portrait par ligne sur téléphone, mais
   sur grand écran plusieurs se partagent la vue — sans repère, l'œil ne
   sait pas qui est visé (Gary, 04/09/2026). */
.porte-portrait:target .porte-portrait-img { box-shadow: 0 0 0 3px var(--gold, #b08d57); border-radius: 50%; }
.porte-portrait:target .porte-portrait-nom { color: var(--gold, #b08d57); }
@media (prefers-reduced-motion: no-preference) {
  .porte-portrait:target .porte-portrait-img { animation: porte-cible 1.6s ease-out 1; }
  @keyframes porte-cible { 0% { box-shadow: 0 0 0 0 rgba(176,141,87,0); } 30% { box-shadow: 0 0 0 10px rgba(176,141,87,.28); } 100% { box-shadow: 0 0 0 3px var(--gold, #b08d57); } }
}

/* ── L'ouverture d'un acte ───────────────────────────────────────── */
.srv-ouverture { position: relative; margin-bottom: clamp(48px, 6vw, 84px); }
.srv-filigrane {
	position: absolute; right: -1vw; top: 50%; transform: translateY(-52%);
	font-family: var(--font); font-size: clamp(150px, 22vw, 320px); line-height: 1;
	color: var(--srv-titre); opacity: .05; letter-spacing: -.04em;
	pointer-events: none; user-select: none;
}
.srv-pilier {
	margin: 0 0 20px; font-size: 10.5px; letter-spacing: .28em;
	text-transform: uppercase; color: var(--gold-light, #A88B63);
}
.srv-titre {
	font-family: var(--font); font-weight: normal; margin: 0 0 16px;
	font-size: clamp(38px, 5.4vw, 78px); line-height: .98; letter-spacing: -.028em;
	color: var(--srv-titre); position: relative;
}
.srv-accroche {
	margin: 0; font-family: var(--font); font-style: italic;
	font-size: clamp(19px, 2.1vw, 30px); line-height: 1.3;
	color: var(--gold-light, #A88B63); position: relative;
}

/* ── Les chiffres d'un acte ──────────────────────────────────────── */
.srv-chiffres {
	margin: 0 0 clamp(48px, 6vw, 84px);
	display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: clamp(20px, 3vw, 48px);
}
.srv-chiffre { border-top: 1px solid var(--srv-filet); padding-top: 20px; }
.srv-chiffre dd {
	margin: 0 0 10px; font-family: var(--font); line-height: .9;
	font-size: clamp(44px, 5.2vw, 80px); letter-spacing: -.03em;
	font-variant-numeric: tabular-nums; color: var(--srv-titre);
}
.srv-chiffre dt {
	font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
	color: var(--srv-sourdine);
}
/* Un chiffre qui mène quelque part : toute la cellule est cliquable via le
   pseudo-élément du lien, le filet du haut passe à l'or au survol, et le
   chiffre lui-même s'éclaire. Le lien reste un vrai <a> dans le dt, donc
   lisible au clavier et par les lecteurs d'écran. */
.srv-chiffre-lie { position: relative; transition: border-color .5s var(--po-ease); }
.srv-chiffre-lien { color: inherit; text-decoration: none; }
.srv-chiffre-lien::after { content: ""; position: absolute; inset: 0; }
.srv-chiffre-lien span { display: inline-block; transition: transform .5s var(--po-ease); }
.srv-chiffre-lie:hover { border-top-color: var(--gold, #8B6F47); }
.srv-chiffre-lie:hover dd { color: var(--gold-light, #A88B63); }
.srv-chiffre-lie:hover .srv-chiffre-lien span { transform: translateX(4px); }
.srv-chiffre-lie:focus-within { border-top-color: var(--gold, #8B6F47); }
.srv-chiffre-lie dd { transition: color .5s var(--po-ease); }

/* ── Le corps de texte : deux colonnes, comme un magazine ────────── */
.srv-texte {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(28px, 4vw, 72px);
	margin-bottom: clamp(56px, 7vw, 104px);
}
.srv-texte p {
	margin: 0; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.75;
	color: var(--srv-txt);
}

/* ── Un bloc secondaire dans un acte ─────────────────────────────── */
.srv-bloc { margin-bottom: clamp(56px, 7vw, 104px); }
.srv-legende {
	margin: 0 0 clamp(24px, 3vw, 40px); padding-bottom: 14px;
	border-bottom: 1px solid var(--srv-filet);
	font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase;
	color: var(--gold-light, #A88B63);
}

/* ── Le processus en cinq étapes ─────────────────────────────────── */
.srv-etapes {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
	border-top: 1px solid var(--srv-filet);
}
.srv-etape { position: relative; padding: 30px clamp(14px, 1.6vw, 26px) 0 0; }
.srv-etape + .srv-etape { padding-left: clamp(14px, 1.6vw, 26px); border-left: 1px solid var(--srv-filet); }
/* Le point sur la ligne : c'est lui qui fait lire la frise comme une
   progression, et pas comme cinq colonnes indépendantes. */
.srv-etape::before {
	content: ""; position: absolute; top: -3.5px; left: 0;
	width: 7px; height: 7px; border-radius: 50%;
	background: var(--gold-light, #A88B63);
}
.srv-etape + .srv-etape::before { left: clamp(14px, 1.6vw, 26px); transform: translateX(-50%); }
.srv-etape-num {
	display: block; font-family: var(--font); font-size: 12px;
	letter-spacing: .2em; color: var(--gold-light, #A88B63); margin-bottom: 16px;
}
.srv-etape h3 {
	font-family: var(--font); font-weight: normal; margin: 0 0 10px;
	font-size: clamp(17px, 1.5vw, 21px); line-height: 1.18; letter-spacing: -.01em;
	color: var(--srv-titre);
}
.srv-etape p { margin: 0; font-size: 13.5px; line-height: 1.62; color: var(--srv-sourdine); }

/* ── Les deux voies de vente ─────────────────────────────────────── */
.srv-voies { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.srv-voie {
	background: var(--srv-fond-carte); border-radius: 24px;
	padding: clamp(30px, 3.4vw, 48px);
	border-top: 2px solid var(--srv-filet);
	display: flex; flex-direction: column;
}
.srv-voie-or { border-top-color: var(--gold, #8B6F47); }
.srv-voie-etiq {
	margin: 0 0 14px; font-size: 10px; letter-spacing: .24em;
	text-transform: uppercase; color: var(--gold-light, #A88B63);
}
.srv-voie h3 {
	font-family: var(--font); font-weight: normal; margin: 0 0 16px;
	font-size: clamp(26px, 2.8vw, 38px); line-height: 1.05; letter-spacing: -.02em;
	color: var(--srv-titre);
}
.srv-voie p { margin: 0 0 26px; font-size: 15px; line-height: 1.72; color: var(--srv-txt); }
.srv-voie .srv-lien { margin-top: auto; align-self: flex-start; }

/* ── Types de biens, volets de conseil, accompagnement ───────────── */
.srv-types, .srv-volets, .srv-integral { list-style: none; margin: 0; padding: 0; display: grid; }
.srv-types, .srv-volets { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 40px); }
.srv-integral { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 40px); }
.srv-type, .srv-volet, .srv-integral > li { border-top: 1px solid var(--srv-filet); padding-top: 22px; }
.srv-type h3, .srv-volet h3, .srv-integral h3 {
	font-family: var(--font); font-weight: normal; margin: 0 0 10px;
	font-size: clamp(19px, 1.75vw, 25px); line-height: 1.15; letter-spacing: -.015em;
	color: var(--srv-titre);
}
.srv-type p, .srv-volet p, .srv-integral p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--srv-sourdine); }
.srv-type p { color: var(--gold-light, #A88B63); font-size: 12.5px; letter-spacing: .04em; }

/* ── Ce que nous publions : trois portes vers le savoir ──────────── */
.srv-savoir-txt {
	margin: 0 0 clamp(24px, 3vw, 36px); max-width: 60ch;
	font-size: clamp(15px, 1.25vw, 18px); line-height: 1.72; color: var(--srv-txt);
}
.srv-savoir-portes {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px);
}
.srv-savoir-portes a {
	display: flex; flex-direction: column; gap: 8px; height: 100%;
	padding: clamp(22px, 2.4vw, 32px);
	background: var(--srv-fond-carte); border-radius: 20px;
	border: 1px solid var(--srv-filet);
	color: inherit; text-decoration: none;
	transition: border-color .5s var(--po-ease), transform .5s var(--po-ease);
}
.srv-savoir-portes a:hover,
.srv-savoir-portes a:focus-visible { border-color: var(--gold, #8B6F47); transform: translateY(-3px); }
.srv-savoir-portes strong {
	font-family: var(--font); font-weight: normal;
	font-size: clamp(20px, 1.9vw, 26px); line-height: 1.1; letter-spacing: -.015em;
	color: var(--srv-titre);
}
.srv-savoir-portes strong::after { content: " →"; color: var(--gold-light, #A88B63); font-size: .8em; }
.srv-savoir-portes span { font-size: 13.5px; line-height: 1.55; color: var(--srv-sourdine); }

/* ── Les actes de fin de pilier ──────────────────────────────────── */
.srv-actes { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 32px; }
.srv-lien-fort {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 15px 30px; border-radius: 999px;
	background: var(--gold, #8B6F47); color: #fff; text-decoration: none;
	font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase;
	transition: background .5s var(--po-ease), transform .5s var(--po-ease);
}
.srv-lien-fort:hover { background: var(--gold-light, #A88B63); transform: translateY(-2px); }
.srv-lien {
	font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase;
	color: var(--gold-light, #A88B63); text-decoration: none;
	border-bottom: 1px solid var(--srv-filet); padding-bottom: 4px;
	transition: border-color .5s var(--po-ease);
}
.srv-lien:hover { border-bottom-color: currentColor; }

@media (max-width: 1100px) {
	.srv-etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: none; }
	.srv-etape { border-top: 1px solid var(--srv-filet); padding-right: 0; }
	.srv-etape + .srv-etape { border-left: none; padding-left: 0; }
	.srv-etape::before, .srv-etape + .srv-etape::before { left: 0; transform: none; }
	.srv-types, .srv-volets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
	.srv-acte { padding: clamp(72px, 16vw, 110px) 0; }
	.srv-texte { grid-template-columns: 1fr; }
	.srv-etapes, .srv-voies, .srv-types, .srv-volets, .srv-integral, .srv-savoir-portes { grid-template-columns: 1fr; }
	.srv-sommaire-liste { grid-template-columns: 1fr; }
	.srv-sommaire-item + .srv-sommaire-item { border-left: none; border-top: 1px solid var(--border, #E0DCD4); }
	.srv-chiffres { grid-template-columns: 1fr; gap: 22px; }
	.srv-filigrane { font-size: 140px; right: -4vw; opacity: .045; }
	.srv-actes { gap: 14px 22px; }
	.srv-lien-fort { padding: 14px 24px; }
}

/* ── L'adresse ────────────────────────────────────────────────────── */
.porte-adresse { background: var(--cream, #F5F2ED); padding: clamp(96px, 13vw, 180px) 0; border-radius: 40px; margin: 0 var(--po-x); }
.porte-adresse-titre {
	font-family: var(--font); font-weight: normal; letter-spacing: -.02em;
	font-size: clamp(34px, 5vw, 72px); line-height: 1.05; margin: 0 0 clamp(40px, 5vw, 64px);
}
.porte-adresse-infos { margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px; }
.porte-adresse-infos dt { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold, #8B6F47); margin-bottom: 10px; }
.porte-adresse-infos dd { margin: 0; font-size: 15px; line-height: 1.6; }
.porte-adresse-infos a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(8,25,56,.25); }
.porte-adresse-infos a:hover { border-bottom-color: currentColor; }
/* Le courriel est un bouton (formulaire → Apimo), habillé comme le lien qu'il remplace. */
.porte-adresse-infos .porte-adresse-ecrire { background: none; border: 0; padding: 0; cursor: pointer;
	font: inherit; color: inherit; border-bottom: 1px solid rgba(8,25,56,.25); }
.porte-adresse-infos .porte-adresse-ecrire:hover,
.porte-adresse-infos .porte-adresse-ecrire:focus-visible { border-bottom-color: currentColor; }

/* ── La porte ─────────────────────────────────────────────────────── */
.porte-sortie { padding: clamp(120px, 16vw, 220px) 0; text-align: center; }
.porte-citation {
	font-family: var(--font); font-weight: normal; font-style: italic; letter-spacing: -.015em;
	font-size: clamp(26px, 3.4vw, 48px); line-height: 1.3; margin: 0 auto; max-width: 24em;
}
.porte-citation::before { content: "«\00a0"; color: var(--gold, #8B6F47); }
.porte-citation::after { content: "\00a0»"; color: var(--gold, #8B6F47); }
.porte-sortie-acte { margin: clamp(40px, 5vw, 64px) 0 0; }
.porte-btn {
	display: inline-block; padding: 20px 44px;
	font-size: 12px; letter-spacing: .28em; text-transform: uppercase;
	color: #fff; background: var(--green, #081938); text-decoration: none; border-radius: 999px;
	transition: background .6s var(--po-ease), letter-spacing .6s var(--po-ease);
}
.porte-btn:hover { background: var(--gold, #8B6F47); letter-spacing: .34em; }

/* ── Communes ─────────────────────────────────────────────────────── */
.porte-communes { border-top: 1px solid var(--border, #E0DCD4); padding: 40px 0 56px; }
.porte-communes-liste { margin: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; }
.porte-communes-liste a { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgba(8,25,56,.55); text-decoration: none; }
.porte-communes-liste a:hover { color: var(--green, #081938); }
.porte-communes-liste .porte-communes-tout { color: var(--gold, #8B6F47); }

/* ══ Le mouvement ═══════════════════════════════════════════════════
   Visible par défaut. Les états de départ n'existent que sous .anim,
   que le script pose juste avant d'observer. */
.porte.anim [data-reveal] { opacity: 0; transform: translateY(28px); }
.porte.anim [data-reveal].in { opacity: 1; transform: none; transition: opacity var(--po-duree) var(--po-ease), transform var(--po-duree) var(--po-ease); }

/* Le manifeste, ligne après ligne */
.porte.anim .porte-manifeste-txt span:nth-child(2).in { transition-delay: .18s; }
.porte.anim .porte-manifeste-txt span:nth-child(3).in { transition-delay: .36s; }

/* Les portraits se lèvent un à un — jamais deux ensemble */
.porte.anim [data-portrait] { opacity: 0; transform: translateY(44px); }
.porte.anim [data-portrait].in { opacity: 1; transform: none; transition: opacity 1.3s var(--po-ease), transform 1.3s var(--po-ease); transition-delay: calc(var(--i, 0) * .14s); }

/* Les chapitres de la méthode, l'un après l'autre */
.porte.anim .porte-principe.in { transition-delay: calc(var(--i, 0) * .1s); }

/* Les chiffres, en cascade */
.porte.anim .porte-chiffre.in { transition-delay: calc(var(--i, 0) * .12s); }
.porte.anim .srv-chiffre.in, .porte.anim .srv-etape.in, .porte.anim .srv-voie.in,
.porte.anim .srv-type.in, .porte.anim .srv-volet.in, .porte.anim .srv-integral > li.in { transition-delay: calc(var(--i, 0) * .09s); }

/* L'entrée, au chargement : le mot, puis la phrase, puis le filet */
.porte.anim [data-entree] { opacity: 0; transform: translateY(16px); }
.porte.anim.ouverte [data-entree] { opacity: 1; transform: none; transition: opacity 1.4s var(--po-ease), transform 1.4s var(--po-ease); }
.porte.anim.ouverte [data-entree="2"] { transition-delay: .5s; }
.porte.anim.ouverte [data-entree="3"] { transition-delay: .9s; transform-origin: top; }
.porte.anim.ouverte [data-entree="4"] { transition-delay: 1.5s; }
.porte.anim [data-entree="3"] { transform: scaleY(0); }
.porte.anim.ouverte [data-entree="3"] { transform: scaleY(1); }
.porte.anim [data-entree="4"] { transform: translate(-50%, 8px); }
.porte.anim.ouverte [data-entree="4"] { transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
	.porte.anim [data-reveal], .porte.anim [data-portrait], .porte.anim [data-entree] {
		opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important;
	}
	.porte.anim [data-entree="4"] { transform: translateX(-50%) !important; }
	.porte-entree-descendre i { animation: none; }
	.porte-portrait, .porte-portrait-img img, .porte-btn { transition: none; }
	.srv-lien-fort, .srv-lien, .srv-chiffre-lie, .srv-chiffre-lie dd, .srv-chiffre-lien span, .srv-savoir-portes a, .srv-sommaire-item a, .srv-sommaire-num::after, .srv-sommaire-aller i { transition: none; }
	.porte-portrait-contact a { transition: none; }
}

/* ══ Responsive ═════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
	.porte-portraits { grid-template-columns: 1fr; gap: 18px; }
	.porte-portrait:last-child:nth-child(odd) { width: auto; grid-column: auto; }
	.porte-principe { grid-template-columns: 1fr; gap: 20px; }
	.porte-principe-corps { padding-top: 0; }
	.porte-principe-filigrane { font-size: 200px; right: -4vw; top: 20px; transform: none; }
	.porte-chiffres-ligne, .porte-adresse-infos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Sous 768 px, base.css pose « section { padding: 20px !important } » pour
   les pages statiques. Ici chaque section gère son propre rythme, et
   l'immeuble doit toucher les bords : on reprend la main, au même poids. */
/* base.css impose sous 768 px « h1 { font-size: … !important } » et la
   même chose pour h2, pour rattraper les anciens gabarits. Nos titres sont
   des h1/h2 : sans cette reprise, « Cinq personnes. » tombait à 20 px —
   plus petit que le sous-titre italique posé juste dessous, qui reste un
   <p> et échappe à la règle. Le seul moyen de reprendre la main sur un
   !important est un !important plus spécifique. */
@media (max-width: 768px) {
	.porte h1.porte-entree-sous { font-size: clamp(15px, 4.2vw, 19px) !important; }
	.porte h2.porte-h2 { font-size: clamp(34px, 9vw, 46px) !important; }
	.porte h2.srv-titre { font-size: clamp(30px, 8.4vw, 42px) !important; }
}

@media (max-width: 768px) {
	.porte > section { padding-left: 0 !important; padding-right: 0 !important; }
	.porte-immeuble { padding: 0 !important; }
	.porte-immeuble-fixe { width: 100vw; margin-left: calc(50% - 50vw); }
	.porte-entree, .porte-manifeste, .porte-methode, .porte-sortie { padding-top: clamp(64px, 12vw, 120px) !important; padding-bottom: clamp(64px, 12vw, 120px) !important; }
	.porte-entree { min-height: 100svh; padding-top: calc(var(--r5-header-h, 72px) + 40px) !important; }
	.porte-equipe, .porte-chiffres { padding-top: 72px !important; padding-bottom: 80px !important; }
	.porte-adresse { padding-top: 72px !important; padding-bottom: 72px !important; }
	.porte-communes { padding-top: 36px !important; padding-bottom: 48px !important; }
}

@media (max-width: 700px) {
	.porte-portraits { grid-template-columns: 1fr; gap: 16px; }
	.porte-portrait { grid-template-columns: 1fr; border-radius: 22px; }
	.porte-portrait-img { min-height: 0; aspect-ratio: 4 / 3; }
	.porte-portrait-txt { padding: 22px 20px 24px; }
	.porte-portrait-nom { font-size: 24px; }
	.porte-portrait-contact { gap: 6px 16px; font-size: 12.5px; }
	.porte-immeuble { height: 130vh; }
	.porte-equipe { margin-top: -30vh; border-radius: 28px 28px 0 0; }
	.porte-chiffres { border-radius: 0 0 28px 28px; }
	.porte-adresse { border-radius: 24px; margin: 0 12px; }
	.porte-immeuble-legende { bottom: 40vh; }
	.porte-principe { grid-template-columns: 1fr; gap: 10px; }
	.porte-principe-num { padding-top: 0; }
	.porte-entree-descendre { bottom: 24px; }
	.porte-adresse-infos, .porte-chiffres-ligne { grid-template-columns: 1fr; gap: 26px; }
	.porte-chiffre dd { font-size: 64px; }
}

/* ══ Services et Contact — la même langue ═══════════════════════════ */

/* Une entrée plus courte : le mot reste, l'écran entier n'est pas dû. */
.porte-entree-courte { min-height: 78vh; min-height: 78svh; }
.porte-entree-courte .porte-entree-mot { font-size: clamp(48px, 10vw, 140px); }
.porte-manifeste-courte { padding: clamp(80px, 11vw, 150px) 0 clamp(40px, 6vw, 80px); }
.porte-methode-haut { padding-top: clamp(24px, 4vw, 56px); }
.porte-principe h2 { font-family: var(--font); font-weight: normal; font-size: clamp(36px, 4.6vw, 64px); margin: 0 0 14px; letter-spacing: -.025em; line-height: 1; }

/* ══════════════════════════════════════════════════════════════════
   Contact : l'immeuble, puis un panneau CRÈME qui le recouvre.

   Le formulaire est clair — Gary préfère le clair au foncé — et c'est
   juste : on entre dans une pièce éclairée, pas dans un coffre. Les
   coordonnées à gauche restent sur une colonne navy étroite : c'est le
   seul rappel de la façade qu'on vient de quitter.
   ══════════════════════════════════════════════════════════════════ */
.porte-immeuble-court { height: 150vh; }
.ct-panneau {
	position: relative; z-index: 2; margin-top: -55vh;
	background: var(--cream, #F5F2ED); border-radius: 40px 40px 0 0;
	padding: clamp(56px, 7vw, 104px) 0 clamp(88px, 11vw, 140px);
}
.ct-grille { display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }

.ct-kicker { margin: 0 0 14px; font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--gold, #8B6F47); }
.ct-h2 { font-family: var(--font); font-weight: normal; letter-spacing: -.02em; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.05; margin: 0; color: var(--green, #081938); }

/* La colonne des coordonnées : navy, arrondie, comme une carte posée */
.ct-coord { background: var(--green, #081938); color: #fff; border-radius: 28px; padding: clamp(28px, 3.2vw, 44px); position: sticky; top: calc(var(--r5-header-h, 72px) + 20px); }
.ct-coord .ct-kicker { color: var(--gold-light, #A88B63); }
.ct-coord .ct-h2 { color: #fff; margin-bottom: 34px; }

.ct-adresse { font-style: normal; }
.ct-infos { margin: 0; display: flex; flex-direction: column; gap: 20px; }
.ct-infos div { border-top: 1px solid rgba(255,255,255,.12); padding-top: 14px; }
.ct-infos dt { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-light, #A88B63); margin-bottom: 8px; }
.ct-infos dd { margin: 0; font-family: var(--font); font-size: clamp(17px, 1.4vw, 20px); line-height: 1.4; color: #fff; }
.ct-infos dd small { display: block; font-family: var(--font-sans); font-size: 12px; color: rgba(255,255,255,.5); margin-top: 4px; }
.ct-infos a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.25); transition: border-color .5s var(--po-ease); }
.ct-infos a:hover { border-bottom-color: var(--gold-light, #A88B63); }
.ct-itineraire { display: inline-block; margin-top: 30px; font-size: 13px; color: #fff; text-decoration: none; border-bottom: 1px solid var(--gold-light, #A88B63); padding-bottom: 3px; }

/* Le formulaire : blanc sur crème, champs crème, pilules fines */
.ct-form { background: #fff; border-radius: 28px; padding: clamp(26px, 3.4vw, 48px); border: 1px solid rgba(8,25,56,.06); }
.ct-form .ct-h2 { margin-bottom: 26px; }

.ct-intentions { border: 0; margin: 0 0 26px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ct-pilule input { position: absolute; opacity: 0; width: 0; height: 0; }
.ct-pilule span {
	display: inline-block; padding: 12px 22px; border-radius: 999px; cursor: pointer;
	border: 1px solid rgba(8,25,56,.18); color: var(--green, #081938); font-size: 14px;
	transition: background .4s var(--po-ease), color .4s var(--po-ease), border-color .4s var(--po-ease);
}
.ct-pilule input:checked + span { background: var(--green, #081938); color: #fff; border-color: var(--green, #081938); }
.ct-pilule input:focus-visible + span { outline: 2px solid var(--gold, #8B6F47); outline-offset: 2px; }
.ct-pilule span:hover { border-color: var(--green, #081938); }

/* Le bloc d'une intention : crème clair, filet navy à gauche */
.ct-bloc { background: #F7F6F3; border-left: 2px solid var(--green, #081938); border-radius: 0 18px 18px 0; padding: clamp(18px, 2.2vw, 28px); margin-bottom: 26px; }
.ct-bloc-titre { margin: 0 0 16px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--green, #081938); }
.ct-groupe { margin-bottom: 16px; }
.ct-groupe:last-child { margin-bottom: 0; }
.ct-etiq, .ct-champ > span { display: block; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: rgba(8,25,56,.6); margin-bottom: 8px; }
.ct-puces { display: flex; flex-wrap: wrap; gap: 8px; }
.ct-puce input { position: absolute; opacity: 0; width: 0; height: 0; }
.ct-puce span {
	display: inline-block; padding: 8px 14px; border-radius: 999px; cursor: pointer; background: #fff;
	border: 1px solid rgba(8,25,56,.16); color: var(--green, #081938); font-size: 13px;
	transition: background .35s var(--po-ease), color .35s var(--po-ease), border-color .35s var(--po-ease);
}
.ct-puce input:checked + span { background: var(--green, #081938); color: #fff; border-color: var(--green, #081938); }
.ct-puce input:focus-visible + span { outline: 2px solid var(--gold, #8B6F47); outline-offset: 2px; }
.ct-puce span:hover { border-color: var(--green, #081938); }

.ct-ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ct-champ { display: block; margin-bottom: 16px; }
.ct-form input[type="text"], .ct-form input[type="email"], .ct-form input[type="tel"], .ct-form select, .ct-form textarea {
	width: 100%; padding: 14px 16px; font-size: 15px; color: var(--green, #081938);
	background: var(--cream, #F5F2ED); border: 1px solid rgba(8,25,56,.1); border-radius: 12px;
	font-family: var(--font-sans); transition: border-color .4s var(--po-ease), background .4s var(--po-ease);
	-webkit-appearance: none; appearance: none;
}
.ct-form select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23081938' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; }
.ct-form input::placeholder, .ct-form textarea::placeholder { color: rgba(8,25,56,.38); }
.ct-form input:focus, .ct-form select:focus, .ct-form textarea:focus { outline: none; border-color: var(--gold, #8B6F47); background: #fff; }
.ct-form textarea { resize: vertical; min-height: 110px; line-height: 1.6; }
.porte-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.ct-pied { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 8px; }
.ct-envoyer {
	display: inline-flex; align-items: center; gap: 10px; padding: 16px 30px; border-radius: 999px; border: 0; cursor: pointer;
	background: var(--gold, #8B6F47); color: #fff; font-family: var(--font-sans); font-size: 14px; font-weight: 500;
	transition: background .5s var(--po-ease), transform .5s var(--po-ease);
}
.ct-envoyer:hover { background: var(--green, #081938); transform: translateY(-2px); }
.ct-discret { margin: 0; font-size: 12px; line-height: 1.5; color: rgba(8,25,56,.5); max-width: 30em; }
.ct-discret a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.ct-discret a:hover { color: var(--green, #081938); }
.ct-form .r5-form-status { margin: 16px 0 0; font-size: 13px; color: var(--green, #081938); }
.ct-form .r5-form-status:empty { display: none; }

@media (max-width: 1000px) {
	.ct-grille { grid-template-columns: 1fr; gap: 28px; }
	.ct-coord { position: static; }
}
@media (max-width: 700px) {
	.porte-entree-courte { min-height: 64svh; }
	.porte-immeuble-court { height: 120vh; }
	.ct-panneau { margin-top: -28vh; border-radius: 28px 28px 0 0; }
	.ct-ligne { grid-template-columns: 1fr; gap: 0; }
	.ct-form { padding: 22px 18px; border-radius: 22px; }
	.ct-coord { padding: 24px 20px; border-radius: 22px; }
	.ct-bloc { padding: 16px; }
	.ct-pied { flex-direction: column; align-items: stretch; }
	.ct-envoyer { justify-content: center; }
	.ct-intentions { gap: 8px; }
	.ct-pilule span { padding: 10px 16px; font-size: 13.5px; }
}

/* Même règle sur /contact : le courriel ouvre la modale.

   Il est donc un <button>, et deux règles globales le trahissaient :
   l'arrondi de 100 px posé sur TOUT <button>, et le halo de focus. Au
   clic, les deux dessinaient une pilule grise autour de l'adresse,
   alors que le téléphone juste au-dessus reste un lien sobre. Le
   courriel se lit désormais comme ses voisins — blanc, filet sous le
   texte, doré au survol — et son état de focus redevient un contour
   franc, visible au clavier sans salir le clic. */
.ct-infos .ct-ecrire {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; text-align: left; color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.25);
  border-radius: 0 !important;
  transition: border-color .5s var(--po-ease);
}
.ct-infos .ct-ecrire:hover { border-bottom-color: var(--gold-light, #A88B63); }
/* Le clic ne doit rien dessiner ; le clavier, si. */
.ct-infos .ct-ecrire:focus { box-shadow: none !important; }
.ct-infos .ct-ecrire:focus-visible {
  outline: 2px solid var(--gold-light, #A88B63) !important;
  outline-offset: 3px !important;
  box-shadow: none !important;
}