/* ==========================================================================
   cionco-avocat.fr — feuille de style unique
   --------------------------------------------------------------------------
   CSS natif, sans framework (ni Bootstrap ni jQuery : décision du 2026-11-05).
   Écrit « mobile d'abord » : les règles de base visent le téléphone, les
   @media (min-width) ajoutent la mise en page des grands écrans.

   Identité reprise du logo : bleu marine #0A3250 et doré #B59317, police
   Josefin Sans pour les titres. Contrastes vérifiés (norme WCAG AA, 4,5:1
   minimum pour un texte courant) :
     - doré du logo sur blanc = 2,94 → JAMAIS pour du texte, seulement pour
       le décor (traits, hexagones) et en fond de bouton avec texte marine (4,51) ;
     - doré foncé --or-texte sur blanc = 5,62 → pour du texte doré sur fond clair ;
     - doré clair --or-clair sur marine = 6,58 → pour du texte doré sur fond marine.
   ========================================================================== */

/* --- Police auto-hébergée ------------------------------------------------
   Adresses relatives à CE fichier (« ../fonts/… ») et non à la racine du site :
   elles restent justes que le site soit installé à la racine ou dans un dossier
   d'aperçu (/version-a/), voir CHEMIN_SITE dans inc/config.php.
   Un seul fichier variable couvre toutes les graisses de 300 à 700.
   font-display: swap : le texte s'affiche tout de suite avec la police de
   secours, puis bascule quand Josefin Sans est arrivée (jamais de texte
   invisible). Si le contenu du fichier change, CHANGER SON NOM : il est mis
   en cache un an, sans revalidation (voir .htaccess). */
@font-face {
  font-family: "Josefin Sans";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/josefin-sans-latin-v34.woff2") format("woff2");
}

/* --- Variables ------------------------------------------------------------ */
:root {
  --marine: #0a3250;
  --marine-fonce: #072339;
  --or: #b59317;
  --or-texte: #7d650b;
  --or-clair: #d4b44a;
  --creme: #f6f3ea;
  --trait: #e3ded0;
  --texte: #24313d;
  --texte-doux: #4a5563;
  --blanc: #fff;

  /* Josefin Sans pour les titres ; le texte courant reste dans la police du
     système : Josefin, très géométrique, fatigue l'œil sur de longs paragraphes
     (articles, mentions), et la police système ne coûte aucun téléchargement. */
  --police-titres: "Josefin Sans", "Century Gothic", "Avenir Next", sans-serif;
  --police-texte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --largeur: 1160px;
  --marge: 20px;
  --rayon: 4px;
  --ombre: 0 10px 30px rgba(10, 50, 80, 0.08);
}

/* --- Base ----------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* Défilement doux vers les ancres (#cabinet…), et marge pour que l'en-tête
     collant ne masque pas le titre de la section visée. */
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
  -webkit-text-size-adjust: 100%;
}

/* Les personnes sensibles au mouvement (réglage du système) n'ont pas d'animation. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition: none !important;
  }
}

body {
  margin: 0;
  font-family: var(--police-texte);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--texte);
  background: var(--blanc);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--marine);
  text-decoration-color: var(--or);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--or-texte);
}

/* Contour de focus bien visible pour la navigation au clavier (accessibilité).
   Il doit contraster à 3:1 au moins avec le fond (WCAG 1.4.11) : le doré du logo
   n'y arrive pas sur blanc (2,94) ; marine sur fond clair, doré clair sur fond
   marine. */
:focus-visible {
  outline: 3px solid var(--marine);
  outline-offset: 2px;
}

.bandeau-infos :focus-visible,
.heros :focus-visible,
.section--marine :focus-visible,
.encart--marine :focus-visible,
.pied :focus-visible {
  outline-color: var(--or-clair);
}

h1,
h2,
h3,
h4 {
  font-family: var(--police-titres);
  font-weight: 600;
  color: var(--marine);
  line-height: 1.2;
  margin: 0 0 0.6em;
}

h1 {
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.1rem);
}

h2 {
  font-size: clamp(1.6rem, 1.3rem + 1.3vw, 2.2rem);
}

/* .h3 : donne l'aspect d'un h3 à un autre niveau de titre, quand la structure
   du document impose un h2 (ex. l'encart latéral) mais que le design le veut petit. */
h3,
.h3 {
  font-size: 1.3rem;
}

p,
ul,
ol {
  margin: 0 0 1.1em;
}

address {
  font-style: normal;
}

/* Masque un texte à l'écran tout en le laissant aux lecteurs d'écran. */
.visuellement-cache {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Lien d'évitement : invisible jusqu'à ce qu'il reçoive le focus clavier. */
.evitement {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--marine);
  color: var(--blanc);
}

.evitement:focus {
  top: 8px;
}

.conteneur {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--marge);
}

/* --- Boutons ---------------------------------------------------------------
   Josefin Sans a des métriques verticales particulières : ses lettres
   « flottent » au-dessus du centre. Le padding haut un peu plus grand que le
   bas recentre le texte à l'œil dans le bouton. */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.95em 1.5em 0.8em;
  border: 2px solid var(--marine);
  border-radius: var(--rayon);
  background: var(--marine);
  color: var(--blanc);
  font-family: var(--police-titres);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.bouton:hover {
  background: var(--marine-fonce);
  border-color: var(--marine-fonce);
  color: var(--blanc);
}

/* Doré du logo en fond, texte marine : contraste 4,51 (conforme). */
.bouton--or {
  background: var(--or);
  border-color: var(--or);
  color: var(--marine);
}

.bouton--or:hover {
  background: var(--or-clair);
  border-color: var(--or-clair);
  color: var(--marine);
}

/* Bouton en contour, pour les fonds marine. */
.bouton--contour {
  background: transparent;
  border-color: var(--blanc);
  color: var(--blanc);
}

.bouton--contour:hover {
  background: var(--blanc);
  border-color: var(--blanc);
  color: var(--marine);
}

.boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* --- Bandeau de coordonnées (tout en haut) ------------------------------- */
.bandeau-infos {
  background: var(--marine-fonce);
  color: #c9d3dc;
  font-size: 0.85rem;
}

.bandeau-infos__ligne {
  display: flex;
  justify-content: center;
  gap: 24px;
  padding-block: 6px;
}

.bandeau-infos a {
  color: var(--blanc);
  text-decoration: none;
}

.bandeau-infos a:hover {
  color: var(--or-clair);
}

/* Sur téléphone, on ne garde que le numéro (cliquable pour appeler). */
.bandeau-infos__adresse,
.bandeau-infos__email {
  display: none;
}

@media (min-width: 700px) {
  .bandeau-infos__ligne {
    justify-content: flex-end;
  }
  .bandeau-infos__adresse,
  .bandeau-infos__email {
    display: inline;
  }
  .bandeau-infos__adresse {
    margin-right: auto;
  }
}

/* --- En-tête et menu ------------------------------------------------------ */
.entete {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--blanc);
  border-bottom: 1px solid var(--trait);
}

.entete__ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 72px;
}

/* Le mot « CIONCO AVOCAT » du logo d'origine est très fin. Depuis le 2026-11-11,
   à la demande de la cliente (« plus gros ou marqué »), l'en-tête et le pied
   utilisent une copie aux traits épaissis (logo-cionco-avocat-entete.svg et
   -pied.svg : chaque tracé reçoit un contour de sa couleur), et le logo est un
   peu agrandi. Sur un petit téléphone (320 px), 240 px laissent encore la place
   au bouton du menu. */
.entete__logo img {
  width: 240px;
  height: auto;
}

/* Bouton « burger » : trois barres dessinées en CSS (pas d'icône à charger). */
.entete__burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--blanc);
  cursor: pointer;
}

.entete__burger-barres,
.entete__burger-barres::before,
.entete__burger-barres::after {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--marine);
  transition: transform 0.2s, background-color 0.2s;
}

.entete__burger-barres {
  position: relative;
}

.entete__burger-barres::before,
.entete__burger-barres::after {
  content: "";
  position: absolute;
  left: 0;
}

.entete__burger-barres::before {
  top: -7px;
}

.entete__burger-barres::after {
  top: 7px;
}

/* Menu ouvert : les trois barres deviennent une croix. */
.entete__burger[aria-expanded="true"] .entete__burger-barres {
  background: transparent;
}

.entete__burger[aria-expanded="true"] .entete__burger-barres::before {
  transform: translateY(7px) rotate(45deg);
}

.entete__burger[aria-expanded="true"] .entete__burger-barres::after {
  transform: translateY(-7px) rotate(-45deg);
}

/* Menu mobile : panneau sous l'en-tête, caché tant que le bouton est fermé. Hauteur limitée
   à l'écran restant (72 px d'en-tête + ~30 px de bandeau) et défilement interne : en
   paysage ou avec un fort zoom, les dernières entrées restaient sinon hors d'atteinte. */
.menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: calc(100dvh - 72px);
  overflow-y: auto;
  padding: 8px var(--marge) 24px;
  background: var(--blanc);
  border-bottom: 1px solid var(--trait);
  box-shadow: var(--ombre);
}

.menu.est-ouvert {
  display: block;
}

/* Sans JavaScript, le bouton ne pourrait rien ouvrir : c'est assets/css/sans-js.css,
   chargée dans un <noscript>, qui déplie alors le menu. */

.menu__liste {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}

.menu__liste a {
  display: block;
  padding: 12px 0 10px;
  border-bottom: 1px solid var(--trait);
  font-family: var(--police-titres);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--marine);
}

.menu__liste a:hover,
.menu__liste a[aria-current="page"] {
  color: var(--or-texte);
}

.menu__rdv {
  width: 100%;
}

/* Grand écran : menu en ligne, burger masqué. Seuil à 1200 px : logo + six
   entrées + bouton de rendez-vous occupent ~1 120 px ; en dessous, les intitulés
   passaient sur deux lignes (constaté à 1 100 et 1 280 px le 2026-11-05).
   Piège constaté le 2026-11-11 : le menu, en nowrap, ÉCRASAIT le logo (145 px au
   lieu de 240 à 1 200 px de large), d'où la remarque de la cliente sur sa
   lisibilité. Désormais le logo ne rétrécit plus (flex: none) et, pour lui faire
   la place, la ligne de l'en-tête est un peu plus large que le contenu des pages
   (+80 px) et le menu un peu plus serré. Mesuré à 1 200 px : 33 px de marge entre
   le logo et le menu. Toute entrée ajoutée au menu est à remesurer. */
@media (min-width: 1200px) {
  .entete__ligne {
    min-height: 88px;
    max-width: calc(var(--largeur) + 80px);
  }
  .entete__logo {
    flex: none;
  }
  .entete__logo img {
    width: 240px;
  }
  .entete__burger {
    display: none;
  }
  .menu {
    display: flex;
    align-items: center;
    gap: 16px;
    position: static;
    max-height: none;
    overflow: visible;
    padding: 0;
    border: 0;
    box-shadow: none;
  }
  .menu__liste {
    display: flex;
    gap: 12px;
    margin: 0;
  }
  /* nowrap : un intitulé de menu ne se coupe jamais sur deux lignes. */
  .menu__liste a {
    position: relative;
    padding: 6px 0 4px;
    border: 0;
    font-size: 0.85rem;
    letter-spacing: 0.03em;
    white-space: nowrap;
  }
  /* Trait doré sous l'entrée de la page en cours. */
  .menu__liste a[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 2px;
    background: var(--or);
  }
  .menu__rdv {
    width: auto;
    padding: 0.85em 1em 0.7em;
    font-size: 0.82rem;
    white-space: nowrap;
  }
}

/* --- Fil d'Ariane --------------------------------------------------------- */
.ariane ol {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 16px 0 0;
  font-size: 0.85rem;
  color: var(--texte-doux);
}

.ariane li:not(:last-child)::after {
  content: "›";
  margin-left: 6px;
  color: var(--or-texte);
}

.ariane a {
  color: var(--texte-doux);
}

/* --- Sections ------------------------------------------------------------- */
.section {
  padding-block: 64px;
}

.section--creme {
  background: var(--creme);
}

.section--marine {
  background: var(--marine);
  color: #dbe3ea;
}

.section--marine h2,
.section--marine h3 {
  color: var(--blanc);
}

.section--marine a:not(.bouton) {
  color: var(--blanc);
}

@media (min-width: 900px) {
  .section {
    padding-block: 96px;
  }
}

/* Surtitre : petite ligne en capitales espacées au-dessus d'un titre, avec un
   hexagone doré, clin d'œil aux O hexagonaux du logo. */
.surtitre {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-family: var(--police-titres);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--or-texte);
}

.surtitre::before {
  content: "";
  width: 12px;
  height: 14px;
  background: var(--or);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.section--marine .surtitre,
.heros .surtitre {
  color: var(--or-clair);
}

.titre-section {
  max-width: 720px;
  margin-bottom: 40px;
}

.titre-section--centre {
  margin-inline: auto;
  text-align: center;
}

.chapo {
  font-size: 1.15rem;
  color: var(--texte-doux);
}

/* --- Grilles ------------------------------------------------------------- */
.grille-2,
.grille-3 {
  display: grid;
  gap: 24px;
}

@media (min-width: 760px) {
  .grille-2 {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }
  .grille-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .grille-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --- Héros de l'accueil -------------------------------------------------- */
.heros {
  position: relative;
  overflow: hidden;
  background: var(--marine);
  color: #dbe3ea;
}

/* Motif d'hexagones dorés, en décor (fichier SVG, pas d'image lourde). */
.heros::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -180px;
  width: 620px;
  height: 500px;
  transform: translateY(-50%);
  background: url("../img/motif-hexagones.svg") no-repeat center / contain;
  opacity: 0.35;
  pointer-events: none;
}

.heros__contenu {
  position: relative;
  z-index: 1;
  max-width: 720px;
  padding-block: 72px 80px;
}

.heros h1 {
  color: var(--blanc);
}

.heros__texte {
  font-size: 1.15rem;
  margin-bottom: 32px;
}

@media (min-width: 900px) {
  .heros::after {
    right: -60px;
    opacity: 0.6;
  }
  .heros__contenu {
    padding-block: 112px 120px;
  }
}

/* Trois engagements sous le héros. */
.engagements {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--trait);
  border: 1px solid var(--trait);
}

.engagements li {
  padding: 28px 24px;
  background: var(--blanc);
}

/* Titre de chaque engagement : simple paragraphe et non un <h3>, car ce bloc vient
   avant le premier <h2> de la page (sauter du h1 au h3 gêne les lecteurs d'écran). */
.engagements__titre {
  margin: 0 0 0.3em;
  font-family: var(--police-titres);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--marine);
}

.engagements p {
  margin: 0;
  color: var(--texte-doux);
}

@media (min-width: 760px) {
  .engagements {
    grid-template-columns: repeat(3, 1fr);
    margin-top: -48px;
    position: relative;
    z-index: 2;
    box-shadow: var(--ombre);
  }
}

/* --- Présentation (portrait + texte) ------------------------------------- */
.presentation {
  display: grid;
  gap: 40px;
  align-items: start;
}

.presentation__portrait {
  position: relative;
  max-width: 360px;
  margin: 0 auto;
}

/* Cadre doré décalé derrière la photo. */
.presentation__portrait::before {
  content: "";
  position: absolute;
  inset: 16px -16px -16px 16px;
  border: 2px solid var(--or);
  border-radius: var(--rayon);
}

.presentation__portrait img {
  position: relative;
  border-radius: var(--rayon);
}

@media (min-width: 900px) {
  .presentation {
    grid-template-columns: 360px 1fr;
    gap: 72px;
  }
}

/* Liste à puces hexagonales dorées. */
.liste-hex {
  list-style: none;
  padding: 0;
}

.liste-hex li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 0.55em;
}

.liste-hex li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 11px;
  height: 12px;
  background: var(--or);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

/* --- Cartes ---------------------------------------------------------------- */
.carte {
  display: flex;
  flex-direction: column;
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  overflow: hidden;
}

.carte__image {
  aspect-ratio: 3 / 2;
  width: 100%;
  object-fit: cover;
}

.carte__corps {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 28px 24px;
}

.carte__corps > :last-child {
  margin-bottom: 0;
}

/* Le lien « En savoir plus » se cale en bas de la carte, quelle que soit la
   longueur du texte : les cartes côte à côte restent alignées. */
.carte__lien {
  margin-top: auto;
  padding-top: 8px;
  font-family: var(--police-titres);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.9rem;
}

.carte__meta {
  margin-bottom: 0.5em;
  font-size: 0.85rem;
  color: var(--texte-doux);
}

.carte h2 a,
.carte h3 a {
  text-decoration: none;
}

/* Étiquettes des domaines d'intervention. */
.etiquettes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.etiquettes li {
  padding: 8px 14px 6px;
  border: 1px solid var(--trait);
  border-radius: 999px;
  background: var(--blanc);
  font-size: 0.95rem;
}

/* --- Consultations (tarifs et liens consultation.avocat.fr) ------------- */
.consultations {
  display: grid;
  gap: 20px;
}

@media (min-width: 900px) {
  .consultations {
    grid-template-columns: repeat(3, 1fr);
  }
}

.consultation {
  display: flex;
  flex-direction: column;
  padding: 28px 24px;
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-top: 3px solid var(--or);
  border-radius: var(--rayon);
}

.consultation h3 {
  margin-bottom: 16px;
}

.consultation ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.consultation li {
  padding: 14px 0;
  border-top: 1px solid var(--trait);
}

.consultation li:first-child {
  border-top: 0;
  padding-top: 0;
}

.consultation__prix {
  display: block;
  margin: 4px 0 8px;
  font-family: var(--police-titres);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--marine);
}

.consultation a {
  font-weight: 600;
}

.note {
  font-size: 0.9rem;
  color: var(--texte-doux);
}

/* --- Avis Google -----------------------------------------------------------
   Rangée qui défile horizontalement (au doigt ou à la molette), avec
   « aimantation » de chaque carte : un carrousel sans une ligne de JavaScript. */
.avis__piste {
  /* position: relative est INDISPENSABLE : les textes réservés aux lecteurs
     d'écran (« 5 étoiles sur 5 », en position absolue) prendraient sinon la page
     entière comme repère. Ceux des cartes hors de l'écran sortaient alors de la
     rangée et élargissaient la page à 2 761 px sur mobile (constaté le 2026-11-05). */
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(86%, 380px);
  gap: 20px;
  margin: 0;
  padding: 4px 4px 20px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
}

/* Les <li> de la rangée ont tous la hauteur du plus grand ; en flex, la carte
   qu'ils contiennent la prend aussi, et l'auteur se cale en bas de chaque carte. */
.avis__piste > li {
  display: flex;
}

.avis__carte {
  flex: 1;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 28px 24px;
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
}

.avis__etoiles {
  margin-bottom: 12px;
  color: var(--or);
  font-size: 1.15rem;
  letter-spacing: 3px;
}

.avis__texte {
  flex: 1;
  margin: 0 0 16px;
  white-space: pre-line;
}

.avis__texte p {
  margin: 0;
}

/* Avis longs : coupés à 7 lignes, le bouton « Lire la suite » (site.js) les
   déplie (classe est-deplie). Sans JavaScript, sans-js.css annule la coupe. */
.avis__texte:not(.est-deplie) p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
  overflow: hidden;
}

.avis__suite {
  align-self: flex-start;
  margin: -8px 0 16px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--marine);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--or);
  text-underline-offset: 3px;
  cursor: pointer;
}

.avis__auteur {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.9rem;
  color: var(--texte-doux);
}

/* Initiales dans un hexagone à la place de la photo Google : charger les
   photos depuis googleusercontent.com transmettrait l'IP des visiteurs à Google. */
.avis__initiales {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 46px;
  background: var(--marine);
  color: var(--blanc);
  font-family: var(--police-titres);
  font-weight: 600;
  padding-top: 3px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.avis__auteur strong {
  display: block;
  color: var(--texte);
}

/* --- Contact ---------------------------------------------------------------- */
.contact {
  display: grid;
  gap: 40px;
}

@media (min-width: 900px) {
  .contact {
    grid-template-columns: 5fr 7fr;
    gap: 64px;
    /* Sans cela, le cadre du formulaire s'étire jusqu'en bas de la colonne
       des coordonnées (plus haute, avec la photo) et laisse un grand vide. */
    align-items: start;
  }
}

.coordonnees__titre {
  margin-top: 1.4em;
  font-size: 1.1rem;
}

.coordonnees__titre:first-child {
  margin-top: 0;
}

.photo-cabinet {
  margin-top: 28px;
  border-radius: var(--rayon);
}

/* --- Formulaire ------------------------------------------------------------- */
.formulaire {
  padding: 32px 24px;
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
}

@media (min-width: 600px) {
  .formulaire {
    padding: 40px;
  }
  .formulaire__ligne {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
}

.champ {
  margin-bottom: 20px;
}

.champ label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: 0.95rem;
}

.champ input,
.champ select,
.champ textarea {
  width: 100%;
  padding: 12px 14px;
  /* Bordure à 3,6:1 sur blanc : le contour d'un champ doit se voir (WCAG 1.4.11,
     3:1 minimum). L'ancienne teinte #b9b3a3 n'était qu'à 2,1:1. */
  border: 1px solid #8c8676;
  border-radius: var(--rayon);
  background: var(--blanc);
  color: var(--texte);
  font: inherit;
}

.champ textarea {
  min-height: 160px;
  resize: vertical;
}

/* Champ actif : bordure et contour marine (le doré du logo est trop pâle sur blanc). */
.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  border-color: var(--marine);
  outline: 2px solid var(--marine);
  outline-offset: 0;
}

.champ--erreur input,
.champ--erreur textarea,
.champ--erreur select {
  border-color: #b3261e;
}

.champ__erreur {
  margin: 6px 0 0;
  color: #b3261e;
  font-size: 0.9rem;
}

.champ__aide {
  font-weight: 400;
  color: var(--texte-doux);
}

/* Champ piège pour les robots : hors de l'écran (et non display:none, que
   certains robots savent repérer), ignoré des lecteurs d'écran. */
.piege {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.message {
  margin-bottom: 24px;
  padding: 16px 20px;
  border-radius: var(--rayon);
  border-left: 4px solid;
}

.message--succes {
  background: #edf6ee;
  border-color: #2e7d32;
}

.message--erreur {
  background: #fbeceb;
  border-color: #b3261e;
}

.message p:last-child {
  margin-bottom: 0;
}

/* --- En-tête des pages intérieures --------------------------------------- */
.page-entete {
  padding-block: 32px 48px;
}

.page-entete h1 {
  max-width: 820px;
}

.page-entete .chapo {
  max-width: 760px;
  margin-bottom: 0;
}

/* Espace avant le pied de page, quand la page se termine par un bloc qui n'est
   pas une .section (qui a déjà ses propres marges). */
.page-fin {
  padding-bottom: 80px;
}

/* --- Texte long : articles, compétences, mentions ------------------------ */
.prose {
  max-width: 760px;
}

.prose h2 {
  margin-top: 1.8em;
  font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.75rem);
}

.prose h3 {
  margin-top: 1.5em;
  font-size: 1.2rem;
}

.prose > :first-child {
  margin-top: 0;
}

.prose li {
  margin-bottom: 0.4em;
}

/* Mise en page « texte + colonne latérale » des pages de compétence. */
.mise-en-page {
  display: grid;
  gap: 48px;
}

@media (min-width: 1000px) {
  .mise-en-page {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 72px;
    align-items: start;
  }
  .mise-en-page__cote {
    position: sticky;
    top: 110px;
  }
}

.encart {
  padding: 28px 24px;
  background: var(--creme);
  border-left: 3px solid var(--or);
  border-radius: var(--rayon);
}

.encart > :last-child {
  margin-bottom: 0;
}

.encart--marine {
  background: var(--marine);
  border-left-color: var(--or);
  color: #dbe3ea;
}

.encart--marine h2,
.encart--marine h3 {
  color: var(--blanc);
}

.encart--marine a:not(.bouton) {
  color: var(--blanc);
}

.encart .bouton {
  width: 100%;
  margin-top: 8px;
}

/* Illustration en tête d'article. */
.illustration {
  margin: 0 0 40px;
}

.illustration img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--rayon);
}

.article__meta {
  margin: 0;
  color: var(--texte-doux);
  font-size: 0.95rem;
}

/* --- Pied de page ------------------------------------------------------------ */
.pied {
  background: var(--marine);
  color: #c9d3dc;
  font-size: 0.95rem;
}

.pied a {
  color: var(--blanc);
  text-decoration-color: rgba(212, 180, 74, 0.6);
}

.pied a:hover {
  color: var(--or-clair);
}

.pied__grille {
  display: grid;
  gap: 36px;
  padding-block: 56px;
}

@media (min-width: 760px) {
  .pied__grille {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .pied__grille {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
  }
}

/* Même logo épaissi que l'en-tête, en blanc (voir .entete__logo). */
.pied__logo {
  width: 240px;
  margin-bottom: 20px;
}

.pied__titre {
  margin-bottom: 14px;
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--or-clair);
}

.pied__liens {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pied__liens li {
  margin-bottom: 8px;
}

.pied__bas {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.85rem;
}

.pied__bas-ligne {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding-block: 18px;
}

.pied__bas p {
  margin: 0;
}

/* --- Page 404 ---------------------------------------------------------------- */
.introuvable {
  padding-block: 96px;
  text-align: center;
}

.introuvable .boutons {
  justify-content: center;
}