/* =========================================================
   Callon Avocat & Conseil - composants des pages interieures
   Charge UNIQUEMENT par les pages interieures, jamais par l'accueil
   (cf. PERFORMANCE.md section 5 : pas d'asset global pour un template).

   Contraintes de direction artistique reprises de l'accueil :
   - jamais de blanc pur ni de noir pur (--bg / --ink)
   - pas de cartes : uniquement des filets fins et des aplats pleine largeur
   - sections numerotees en chiffres romains (.section-tag)
   ========================================================= */

/* ====================================================
   EN-TETE DE PAGE
   Premiere section du <main> : exemptee du reveal JS par
   `main > section:first-child` -> le H1 (element LCP) peint
   avec le CSS seul (cf. PERFORMANCE.md section 2).
   ==================================================== */
/* L'en-tete est pose sur l'aplat beige : sur fond creme, le seul filet ne
   suffisait pas a le detacher du premier bloc. L'alternance beige / creme
   qui en decoule rythme ensuite toute la page, sans ajouter de composant. */
.page-head {
  background: var(--bg-alt);
  padding: clamp(56px, 8vw, 104px) 0 clamp(48px, 6vw, 80px);
  border-bottom: 1px solid var(--rule);
}
.page-head__num {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(15px, 1.2vw, 18px);
  color: var(--or);
  letter-spacing: 0.02em;
  display: block;
  margin-bottom: 14px;
}
.page-head__title {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(40px, 5.6vw, 78px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
  max-width: 14em;
}
.page-head__title em {
  font-style: italic;
  color: var(--or);
}
/* Page reduite a son titre (mentions legales, en attente de redaction) :
   sans contenu dessous, l'en-tete doit respirer davantage. */
.page-head--seul {
  padding-bottom: clamp(80px, 12vw, 180px);
  border-bottom: 0;
}
/* Chapeau : sous le titre, jamais en colonne laterale */
.page-head__deck {
  font-family: var(--display);
  font-size: clamp(19px, 1.6vw, 24px);
  line-height: 1.5;
  font-weight: 500;
  color: var(--ink-soft);
  max-width: 38em;
  margin: clamp(24px, 3vw, 36px) 0 0;
}

/* Variante centree : sert a la page « Le cabinet », dont le premier bloc
   est lui aussi compose en colonne centree. */
.page-head--centre { text-align: center; }
.page-head--centre .page-head__title { max-width: 16em; margin-inline: auto; }
.page-head--centre .page-head__deck { margin-inline: auto; }

/* ====================================================
   RUBRIQUES GENERIQUES
   ==================================================== */
.rubrique { padding: var(--section-y) 0; }
.rubrique--alt {
  background: var(--bg-alt);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.rubrique--deep {
  background: var(--bg-deep);
  color: rgba(251, 250, 246, 0.92);
}
.rubrique--deep .section-tag { color: rgba(251, 250, 246, 0.55); }
.rubrique--deep .section-tag::before { background: rgba(251, 250, 246, 0.3); }
.rubrique--deep .section-title { color: var(--bg); }
/* Colonne de texte sur l'aplat sombre : `.prose` impose sinon `--ink-soft`,
   un brun fonce illisible sur `--bg-deep`. Le cas n'existait pas dans la
   maquette (seuls les « domaines connexes » passaient en sombre, et ils n'ont
   pas de prose) ; il apparait avec la rubrique « Notre approche ». */
.rubrique--deep .prose { color: rgba(251, 250, 246, 0.75); }
.rubrique--deep .prose h3,
.rubrique--deep .prose strong { color: var(--bg); }

.rubrique--serre { padding: clamp(56px, 8vw, 104px) 0; }

/* Colonne de texte longue : on ne depasse jamais ~66 caracteres */
.prose {
  max-width: 34em;
  color: var(--ink-soft);
}
.prose > *:last-child { margin-bottom: 0; }
.prose h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(23px, 2.1vw, 30px);
  line-height: 1.25;
  color: var(--ink);
  margin: 44px 0 16px;
}
.prose strong { color: var(--ink); }
/* Le reset de style.css supprime puces et retrait de TOUTES les listes
   (`ul, ol { padding: 0; list-style: none }`), ce qui convient aux listes
   dessinees du site mais pas a une liste tapee dans l'editeur : elle
   ressortait en paragraphes colles. On les retablit dans la seule colonne
   de texte redactionnel. */
.prose ul,
.prose ol {
  margin: 0 0 1.1em;
  padding-left: 1.4em;
}
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: 0.5em; }
.prose li::marker { color: var(--or); }
.prose li > ul,
.prose li > ol { margin: 0.5em 0 0; }

/* Pages legales : colonne large et texte justifie.
   Les 34em de la colonne redactionnelle valent pour de la lecture suivie ;
   un texte de mentions se parcourt en diagonale, on y cherche un numero ou
   une adresse. La colonne est centree comme l'en-tete des pages interieures,
   qui l'est toujours (regle du 03/08) : alignee a gauche sous un titre
   centre, elle laissait 270px de vide a droite. */
.prose--legal {
  max-width: 900px;
  margin-inline: auto;
  text-align: justify;
  /* Justifier sans cesure ouvre des rivieres blanches : le francais a des
     mots longs et la colonne est large. La page est servie en `lang="fr-FR"`,
     le navigateur dispose donc des motifs de cesure francais. */
  hyphens: auto;
}
/* Les intitules de rubrique sont des `h2` et non des `h3` : sous le `h1` de la
   page, un `h3` sauterait un niveau. Ils reprennent les proportions de
   `.prose h3`, dont ils tiennent le role, et passent a l'or profond.

   `--or` (#C08030) ne donne que 3,15:1 sur `--bg` : a 23px en graisse 500, un
   intitule n'est pas du « grand texte » au sens WCAG et doit donc atteindre
   4,5:1. `--or-deep` (#9A6624) mesure 4,68:1 — c'est deja l'or retenu pour le
   message d'erreur du formulaire, pour la meme raison. */
.prose--legal h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(23px, 2.1vw, 30px);
  line-height: 1.25;
  color: var(--or-deep);
  margin: 44px 0 16px;
  /* Un intitule ne se justifie pas : sur deux lignes, la premiere se
     retrouverait etiree sur toute la largeur. */
  text-align: left;
}
/* Filet de securite si un h3 est tape depuis l'editeur. */
.prose--legal h3 { color: var(--or-deep); text-align: left; }

/* Introduction centree : marqueur, titre, chapeau.
   Le marqueur reprend un filet de chaque cote : centre avec un seul tiret a
   gauche, il paraissait decale. */
.intro {
  max-width: 46em;
  margin: 0 auto;
  text-align: center;
}
.intro .section-tag::after {
  content: "";
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--rule-strong);
  vertical-align: middle;
  margin-left: 12px;
}
.intro .section-title { margin-bottom: 28px; }
.intro p { color: var(--ink-soft); }
.intro p.lead { color: var(--ink); margin-bottom: 0; }
.intro > *:last-child { margin-bottom: 0; }

/* Les paragraphes de developpement passent en pleine largeur, sur deux
   colonnes : centres sur 46em ils etaient trop etroits, plein cadre sur une
   seule colonne la ligne serait illisible. */
.intro__colonnes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 4vw, 72px);
  margin-top: clamp(36px, 4vw, 56px);
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--rule);
}
.intro__colonnes p {
  margin: 0;
  color: var(--ink-soft);
  text-align: justify;
  hyphens: auto;
}
.intro__figure {
  margin: clamp(48px, 6vw, 80px) 0 0;
  border: 1px solid var(--rule);
}
.intro__figure img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

/* Deux colonnes : titre a gauche, texte a droite */
.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.duo--large { grid-template-columns: 0.9fr 1.1fr; }
.duo .section-title { margin-bottom: 32px; }

/* ====================================================
   LISTE NUMEROTEE EN CHIFFRES ROMAINS
   Sert aux « interventions » et aux « domaines connexes ».
   ==================================================== */
.items {
  /* filet de tete au meme poids que les separations internes */
  border-top: 1px solid var(--rule);
}
.items > li {
  display: grid;
  grid-template-columns: 68px 1fr;
  gap: clamp(20px, 3vw, 56px);
  padding: 30px 0;
  border-bottom: 1px solid var(--rule);
}
.items__num {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(26px, 2.8vw, 38px);
  line-height: 1.05;
  color: var(--or);
}
.items__body > *:last-child { margin-bottom: 0; }
.items__body h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(21px, 1.9vw, 27px);
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 10px;
}
.items__body p {
  color: var(--ink-soft);
  margin-bottom: 0;
}
.rubrique--deep .items { border-top-color: rgba(251, 250, 246, 0.22); }
.rubrique--deep .items > li { border-bottom-color: rgba(251, 250, 246, 0.14); }
.rubrique--deep .items__body h3 { color: var(--bg); }
.rubrique--deep .items__body p { color: rgba(251, 250, 246, 0.75); }

/* ====================================================
   ACCORDEONS - « Affaires recentes » et foire aux questions
   Le dessin des panneaux depliants est dans style.css, en commun avec la
   FAQ : celle-ci existe aussi sur l'accueil, qui ne charge pas cette
   feuille. Ne rien redefinir ici, sauf ce qui ne concerne QUE les pages
   interieures - ci-dessous, la place de la FAQ dans l'alternance des fonds.
   ==================================================== */
/* La FAQ ferme la page, apres « Domaines connexes » qui est pose sur un
   aplat (beige ou sombre selon la page). Un aplat se separe deja tout seul :
   le filet de tete de la FAQ ferait un double trait sous le beige, et ne
   servirait a rien sous le sombre. */
.rubrique--alt + .faq,
.rubrique--deep + .faq { border-top: 0; }

/* ====================================================
   ENCART « L'AVOCAT EN CHARGE »
   Pas de carte : un filet en haut, un portrait etroit, du texte.
   ==================================================== */
.signataire {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
  /* filet de tete au meme poids que les separations internes */
  border-top: 1px solid var(--rule);
  padding-top: clamp(32px, 4vw, 48px);
}
.signataire__portrait {
  border: 1px solid var(--rule-strong);
  background: #E5DFCD;
}
.signataire__portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}
.signataire__body h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.15;
  margin: 0 0 10px;
  color: var(--ink);
}
.signataire__role {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(17px, 1.3vw, 19px);
  color: var(--turquoise);
  line-height: 1.4;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--rule);
}
.signataire__body p { color: var(--ink-soft); }
.signataire__body > *:last-child { margin-bottom: 0; }
/* Deux intervenants sur une meme rubrique (patrimoine culturel) : le filet de
   tete du second fait deja la separation, il lui manque seulement de l'air. */
.signataire + .signataire { margin-top: clamp(36px, 4.5vw, 56px); }

/* ====================================================
   DOMAINES CONNEXES (bas de page domaine)
   ==================================================== */
/* Pas de numerotation ici : les chiffres reprenaient le rang du domaine dans
   la liste generale (II, III, V), ce qui donnait une suite illisible. */
.connexes .items > li {
  grid-template-columns: 1fr;
  align-items: baseline;
}
.connexes a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(21px, 1.9vw, 28px);
  line-height: 1.25;
  background-image: none !important;
  transition: color 200ms ease;
}
/* Couleur : le selecteur global `a:not(.btn-outline):not(.link-arrow):not(.brand)`
   de style.css pese 0,3,1. Il faut reprendre ses negations pour reprendre la main,
   sinon les renvois heritent du turquoise des liens de contenu. */
.connexes a:not(.btn-outline):not(.link-arrow):not(.brand) { color: var(--ink); }
.connexes a:not(.btn-outline):not(.link-arrow):not(.brand):hover,
.connexes a:not(.btn-outline):not(.link-arrow):not(.brand):focus-visible { color: var(--or-deep); }
.rubrique--deep.connexes a:not(.btn-outline):not(.link-arrow):not(.brand) { color: var(--bg); }
.rubrique--deep.connexes a:not(.btn-outline):not(.link-arrow):not(.brand):hover,
.rubrique--deep.connexes a:not(.btn-outline):not(.link-arrow):not(.brand):focus-visible { color: var(--or); }
.connexes a::after {
  content: "\2192";
  font-family: var(--body);
  font-size: 17px;
  color: var(--or);
  transition: transform 240ms ease;
  flex: none;
}
.connexes a:hover::after { transform: translateX(5px); }

/* ====================================================
   EQUIPE - complements page interieure
   Les parcours sont plus longs que sur l'accueil : justifies, comme les
   textes des domaines sur la page d'accueil.
   ==================================================== */
.membre__body p:not(.membre__role) {
  text-align: justify;
  hyphens: auto;
}

/* ====================================================
   PAGE CONTACT - complements
   ==================================================== */
/* L'en-tete etant deja beige, le bloc formulaire repasse en creme et
   l'acces reprend le beige : l'alternance reste lisible. */
.contact--page { background: var(--bg); }
.acces .items__body p { color: var(--ink-soft); }
.acces__note {
  margin-top: 28px;
  font-style: italic;
  color: var(--ink-muted);
  font-size: 0.95em;
}

/* ====================================================
   RESPONSIVE
   ==================================================== */
@media (max-width: 1100px) {
  .signataire { grid-template-columns: 200px 1fr; }
}

@media (max-width: 900px) {
  .duo,
  .duo--large { grid-template-columns: 1fr; }
  .intro__colonnes { grid-template-columns: 1fr; gap: 1.1em; }
}

@media (max-width: 768px) {
  .page-head__title,
  .page-head--centre .page-head__title { max-width: none; }
  .items > li {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 26px 0;
  }
  .affaires > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .signataire {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .signataire__portrait { max-width: 260px; }
}

/* ====================================================
   FORMULAIRE DE CONTACT (plugin ND Manager)
   Le plugin apporte sa propre feuille, volontairement neutre :
   angles arrondis, blanc pur, focus bleu, bouton gris. Rien de
   tout cela n'existe dans la charte du cabinet. On la remet donc
   au dessin de la maquette validee.

   Les selecteurs sont prefixes par `.contact__form` pour peser plus
   lourd que ceux du plugin (`.ndm-form input[type="text"]` = 0,2,1)
   quel que soit l'ordre de chargement des deux feuilles.
   ==================================================== */

/* Le panneau est dessine par `.contact__form` dans style.css : il habille
   maintenant le conteneur du theme et non plus le <form> lui-meme.

   Ecart assume avec la maquette (demande du 03/08) : elle posait un panneau
   creme sur une section creme, donc un bloc que seul son filet detachait du
   fond. On passe sur l'aplat beige, le meme que le domaine mis en avant de
   l'accueil — le formulaire se lit enfin comme une zone a part, sans devenir
   une carte pour autant (ni ombre, ni angle arrondi). */
.contact__form {
  background: var(--bg-alt);
  border-color: var(--rule-strong);
}

.contact__form .ndm-form {
  /* colonne : permet de remonter le message de retour au-dessus des champs,
     le plugin le place structurellement en fin de formulaire. */
  display: flex;
  flex-direction: column;
  font-size: inherit;
  line-height: inherit;
  max-width: none;
}
.contact__form .ndm-form p { margin: 0 0 1.1em; }

/* --- Champs ------------------------------------------------------- */
.contact__form .ndm-form label {
  display: block;
  font-family: var(--body);
  font-size: 15px;
  font-weight: 400;
  color: var(--ink-muted);
  margin-bottom: 8px;
}
.contact__form .ndm-form input[type="text"],
.contact__form .ndm-form input[type="email"],
.contact__form .ndm-form input[type="tel"],
.contact__form .ndm-form select,
.contact__form .ndm-form textarea {
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule-strong);
  border-radius: 0;
  padding: 10px 0;
  width: 100%;
  box-shadow: none;
  transition: border-color 200ms ease;
}
.contact__form .ndm-form textarea { min-height: 120px; resize: vertical; }
.contact__form .ndm-form select {
  padding-right: 24px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 7'%3E%3Cpath fill='none' stroke='%237D7466' stroke-width='1' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  background-size: 12px 7px;
}
.contact__form .ndm-form input:focus,
.contact__form .ndm-form select:focus,
.contact__form .ndm-form textarea:focus {
  outline: none;
  border-bottom-color: var(--or);
  box-shadow: none;
}

/* --- Bouton d'envoi : reprend .btn-outline--solid ------------------ */
.contact__form .ndm-form button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  height: 56px;
  padding: 0 32px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 0;
  transition: background 240ms ease, border-color 240ms ease;
}
.contact__form .ndm-form button[type="submit"]:hover,
.contact__form .ndm-form button[type="submit"]:focus-visible {
  background: var(--or-deep);
  border-color: var(--or-deep);
  box-shadow: none;
}
.contact__form .ndm-form.is-submitting { opacity: 0.6; }

/* --- Message de retour --------------------------------------------
   Pose SOUS le bouton d'envoi, la ou le regard arrive apres avoir clique.
   Le plugin le place deja en dernier dans le formulaire : il suffit de ne
   pas le remonter (un `order: -1` le portait au-dessus des champs, loin du
   geste qui vient de le declencher).

   Encadre plein plutot que simple filet lateral : le message doit se
   detacher du panneau beige sur lequel il est pose. Plus petit que le
   corps de texte — c'est un accuse de reception, pas un paragraphe. */
.contact__form .ndm-form-feedback {
  margin: 24px 0 0;
  padding: 14px 18px;
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  background: var(--bg-alt);
  color: var(--ink-soft);
  font-size: 0.88em;
  line-height: 1.55;
}
.contact__form .ndm-form-feedback > *:last-child { margin-bottom: 0; }

/* Succes : le vert du site (--turquoise) en fond tres dilue, en filet plein
   et en texte. Le texte est assombri par rapport au filet — le turquoise de
   la charte sur ce fond clair ne passait pas les 4,5:1 du contraste AA. */
.contact__form .ndm-form-feedback.is-success {
  background: rgba(80, 160, 144, 0.12);
  border-color: var(--turquoise);
  color: #2C6355;
}
/* Erreur : meme dessin, dans l'or profond deja utilise par les messages
   d'erreur de champ. Pas de rouge — il n'en existe pas dans la charte. */
.contact__form .ndm-form-feedback.is-error {
  background: rgba(154, 102, 36, 0.12);
  border-color: var(--or-deep);
  color: #7A4E15;
}
/* Attente : neutre, le temps de l'envoi. Texte en --ink-soft et non en
   --ink-muted : ce dernier tombe a 3,9:1 sur le beige, sous le seuil AA. */
.contact__form .ndm-form-feedback.is-pending {
  background: var(--bg-alt);
  border-color: var(--rule-strong);
  color: var(--ink-soft);
}

/* --- Erreur par champ --------------------------------------------- */
/* `hidden` n'est pas dans la whitelist KSES du plugin : le paragraphe d'erreur
   est donc rendu vide au chargement. On le masque tant qu'il l'est. */
.contact__form .ndm-form .ndm-form-error:empty { display: none; }
.contact__form .ndm-form .ndm-form-error {
  font-family: var(--body);
  font-size: 13px;
  font-style: italic;
  color: var(--or-deep);
  margin: 6px 0 0;
}
.contact__form .ndm-form [aria-invalid="true"] {
  border-bottom-color: var(--or-deep);
  box-shadow: none;
}