/* ═══════════════════════════════════════════════════════════════
   VITAS CONSULT – Feuille de styles
   © Connec'TIC - Michel Demarez
   ─────────────────────────────────────────────────────────────
   Couleurs : Bordeaux #980A29 · Orange #F36F21
   Structure :
     1. Reset & base       7. Contact info
     2. Variables CSS      8. Formulaire
     3. Boutons            9. Partenaires (bandeau)
     4. Header / Logo     10. Footer
     5. Hero              11. Responsive
     6. Services
═══════════════════════════════════════════════════════════════ */


/* ─── ACCESSIBILITÉ – Contenu réservé aux lecteurs d'écran ──── */
/*
  Masque visuellement sans retirer du flux d'accessibilité.
  À ne jamais remplacer par display:none ou visibility:hidden,
  qui supprimeraient le contenu pour les lecteurs d'écran.
*/
.visually-hidden {
  position: absolute;
  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;
}

/* ─── ACCESSIBILITÉ – Lien d'évitement ───────────────────────── */
/*
  Hors écran par défaut, il devient visible dès qu'il reçoit le focus
  clavier : c'est le premier élément atteignable avec la touche Tab.
*/
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  transform: translateY(-120%);
  background-color: #980A29;
  color: #ffffff;
  padding: 12px 20px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 6px 0;
}

.skip-link:focus {
  transform: translateY(0);
}

/* ─── ACCESSIBILITÉ – Indicateur de focus clavier ────────────── */
/*
  Contour épais et contrasté sur tout élément atteignable au clavier.
  :focus-visible n'apparaît pas au clic souris : la navigation à la
  souris reste visuellement identique à la maquette validée.
*/
:focus-visible {
  outline: 3px solid #980A29;
  outline-offset: 3px;
  border-radius: 3px;
}

/* Sur fond bordeaux, un contour bordeaux serait invisible : contour blanc. */
.hero a:focus-visible,
.site-footer a:focus-visible {
  outline-color: #ffffff;
}

/* Repli pour les navigateurs sans :focus-visible */
@supports not selector(:focus-visible) {
  a:focus,
  button:focus,
  input:focus,
  select:focus,
  textarea:focus {
    outline: 3px solid #980A29;
    outline-offset: 3px;
  }
}

/* ─── SÉCURITÉ – Champ honeypot (invisible, hors flux visuel) ── */
.hp-field {
  position: absolute;
  left: -9999px;
  opacity: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* ─── 1. RESET & BASE ─────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
}

/*
  Défilement animé uniquement si l'utilisateur n'a pas demandé de
  réduction des animations dans les préférences de son système.
*/
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
  color: #2c2c2c;
  background-color: #e0e0e0; /* fond gris : visible autour de la carte sur desktop */
  overflow-x: hidden;
  line-height: 1.6;
}

/* ─── CARTE CENTRÉE (max 850px) ──────────────────────────── */
.site-card {
  max-width: 850px;
  margin: 0 auto;
  background-color: var(--white);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.18);
  overflow: hidden; /* contient le clip-path du hero */
  position: relative;
}

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

a {
  color: inherit;
}


/* ─── 2. VARIABLES CSS ───────────────────────────────────── */
/*
  ACCESSIBILITÉ – contrastes (WCAG 2.1 niveau AA)
  ───────────────────────────────────────────────────────────
  L'orange de la charte (#F36F21) est conservé tel quel : c'est la
  couleur d'identité de Vitas Consult. En revanche, du texte blanc
  posé dessus ne donne que 2,96:1, très en dessous des 4,5:1 requis.
  Les libellés de boutons passent donc en gris très foncé (#2c2c2c),
  ce qui porte le contraste à 4,72:1 sans toucher à la couleur.

  --orange-strong est une variante plus profonde du même orange,
  réservée aux cas où l'orange sert lui-même de couleur de TEXTE sur
  fond blanc (astérisque des champs obligatoires, survol des liens de
  contact) : l'orange vif y tomberait à 2,96:1.

  Contrastes mesurés :
    bordeaux #980A29 / blanc       → 8,71:1  ✔
    #2c2c2c sur orange #F36F21     → 4,72:1  ✔  (libellés de boutons)
    --orange-strong / blanc        → 4,56:1  ✔  (orange en tant que texte)
    blanc sur orange #F36F21       → 2,96:1  ✘  (écarté)
*/
:root {
  --bordeaux    : #980A29;
  --bordeaux-dark: #7A0822;
  --orange      : #F36F21;   /* teinte de marque – fonds et pastilles */
  --orange-strong: #BC5A0D;  /* même famille – orange utilisé comme texte */
  --btn-text-dark: #2c2c2c;  /* libellé des boutons orange */
  --white       : #ffffff;
  --grey-light  : #f5f5f5;
  --grey-mid    : #e0e0e0;
  --border-input: #767676;   /* 4,54:1 sur blanc – bordures de champs (1.4.11) */
  --dark        : #2c2c2c;
  --text-secondary: #555;
  --text-muted  : #6b6b6b;   /* 5,33:1 sur blanc – textes secondaires */
  --error       : #b02a1c;
  --success     : #1a6f3d;
}


/* ─── 3. BOUTONS ─────────────────────────────────────────── */
.btn {
  display: inline-block;
  padding: 14px 36px;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  border: none;
  transition: opacity 0.2s ease, transform 0.15s ease;
  letter-spacing: 0.02em;
}

/*
  Le survol assombrit légèrement le fond au lieu de baisser l'opacité :
  une opacité réduite délave le bouton ET son libellé, ce qui ferait
  chuter le contraste sous le seuil AA pendant le survol.
*/
.btn:hover,
.btn:focus-visible {
  filter: brightness(0.94);
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
  filter: none;
}

/*
  Orange de la charte conservé ; le libellé passe en gris très foncé
  pour atteindre 4,72:1 (du blanc n'aurait donné que 2,96:1).
*/
.btn-orange {
  background-color: var(--orange);
  color: var(--btn-text-dark);
}

.btn-full {
  display: block;
  width: 100%;
}


/* ─── 4. HEADER / LOGO BAR ───────────────────────────────── */
.site-header {
  position: relative;
  background-color: var(--white);
}

/*
  Logo-bar : zone blanche minimale, logo proche du haut.
  Hauteur totale ≈ 92px (logo 68px + padding 14px+10px).
*/
.logo-bar {
  background-color: var(--white);
  padding: 14px 24px 10px;
  position: relative;
  z-index: 5;
}

.site-logo {
  height: 68px;   /* plus visible que 58px, proportions préservées */
  width: auto;
  display: block;
}


/* ─── 5. HERO – BANDEAU BORDEAUX ─────────────────────────── */
/*
  Forme V ASYMÉTRIQUE fidèle à la maquette validée.

  Lire depuis la maquette :
    - La pente GAUCHE descend légèrement depuis x=0 vers le creux
    - Le CREUX est légèrement à gauche du centre (≈ 42% de la largeur)
    - La pente DROITE remonte fortement du creux vers le coin supérieur-droit
    - Le coin supérieur-droit du bandeau est au niveau du bas de la logo-bar (y=0)

  Coordonnées dans l'élément .hero (qui commence après la logo-bar) :
    ① (0, 14px)          gauche : 14px sous le bas de la logo-bar
    ② (42%, 72px)        creux  : 72px sous le bas de la logo-bar, légèrement à gauche
    ③ (100%, 0)          droite : ras du bas de la logo-bar (bandeau commence haut à droite)
    ④ (100%, calc-55px)  bas-droit : plus haut (oblique G-BAS → D-HAUT)
    ⑤ (0, 100%)          bas-gauche : plus bas

  padding-top = creux_depth (72px) + respiration (40px) = 112px
*/
.hero {
  background-color: var(--bordeaux);
  clip-path: polygon(
    0 14px,
    42% 72px,
    100% 0,
    100% calc(100% - 55px),
    0 100%
  );
  padding: 112px 28px 88px;
  margin-top: 0;
  position: relative;
  z-index: 1;
}

/* Contenu limité à 520px, texte plus grand, proche de la maquette */
.hero-inner {
  max-width: 520px;
  margin: 0;
  text-align: left;
}

.hero-text {
  color: var(--white);
  font-size: 1.28rem;
  font-weight: 700;
  line-height: 1.52;
  margin-bottom: 24px;
}

/* Bouton hero : orange, petits coins arrondis, compact */
.hero .btn {
  padding: 11px 28px;
  font-size: 0.92rem;
  border-radius: 30px;
}


/* ─── 6. SERVICES – NOS DOMAINES D'INTERVENTION ─────────── */
.services {
  padding: 48px 28px 56px;
  background-color: var(--white);
}

.section-title {
  text-align: center;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 38px;
  line-height: 1.3;
}

/* Liste sémantique (<ul>) présentée sans puces : l'ordre et le nombre
   de domaines sont ainsi annoncés par les lecteurs d'écran. */
.services-grid {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 12px;           /* gap réduit pour tenir 3 icônes en 1 rangée sur mobile */
  flex-wrap: nowrap;   /* forcer 1 seule rangée comme sur la maquette */
  max-width: 860px;
  margin: 0 auto;
  list-style: none;
}

.service-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  flex: 1;             /* chaque item prend 1/3 de la largeur disponible */
  min-width: 0;
  text-align: center;
}

.service-icon {
  width: 72px;
  height: 72px;
  background-color: var(--orange);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(243, 111, 33, 0.28);
}

.service-icon svg,
.service-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.service-item p {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--dark);
  line-height: 1.35;
}


/* ─── 7. CONTACT INFO – COORDONNÉES ─────────────────────── */
.contact-info {
  background-color: var(--grey-light);
  padding: 60px 28px 56px;
  text-align: center;
}

.contact-title {
  margin-bottom: 28px;
}

/* Texte d'introduction : rappelle les trois moyens de contact */
.contact-intro {
  max-width: 520px;
  margin: 0 auto 26px;
  font-size: 0.95rem;
  color: var(--text-secondary);
}

.contact-details {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-bottom: 34px;
  list-style: none;
}

/*
  min-height 44px : la zone cliquable dépasse la taille minimale
  recommandée pour un usage tactile ou à la souris imprécise.
*/
.contact-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 4px 8px;
  text-decoration: none;
  color: var(--dark);
  font-size: 1.1rem;
  font-weight: 600;
  transition: color 0.2s ease;
}

.contact-link:hover,
.contact-link:focus-visible {
  color: var(--orange-strong);
  text-decoration: underline;
}

/* L'icône garde la teinte de marque via currentColor sur son propre
   élément : elle reste orange même quand le lien change de couleur. */
.contact-icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  color: var(--orange);
}


/* ─── 8. FORMULAIRE ─────────────────────────────────────── */
.form-section {
  background-color: var(--white);
  padding: 60px 28px 70px;
}

.form-container {
  max-width: 720px;
  margin: 0 auto;
}

.form-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--bordeaux);
  margin-bottom: 32px;
  text-align: center;
}

/* Disposition 2 colonnes sur les lignes nom/prénom et tél/email */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 20px;
}

.form-intro {
  font-size: 0.92rem;
  color: var(--text-secondary);
  margin-bottom: 26px;
  text-align: center;
}

.form-field label {
  font-size: 0.87rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.required-star {
  color: var(--orange-strong);
}

/* Mention « (facultatif) » : texte visible, lu par tous — la
   distinction ne repose ni sur la couleur ni sur un symbole. */
.field-optional {
  font-weight: 400;
  color: var(--text-muted);
}

/*
  Bordure à 4,54:1 sur blanc : les limites du champ restent
  perceptibles pour une vision faible ou un écran peu contrasté
  (WCAG 1.4.11 – contraste des éléments non textuels).
*/
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--border-input);
  border-radius: 8px;
  font-size: 0.95rem;
  color: var(--dark);
  background-color: var(--white);
  font-family: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
}

.contact-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' stroke='%23555' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}

/* Le focus clavier conserve en plus le contour global :focus-visible */
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: var(--orange-strong);
  box-shadow: 0 0 0 3px rgba(188, 90, 13, 0.18);
}

/*
  Champ en erreur : la couleur n'est jamais le seul indicateur.
  Elle est doublée d'une bordure plus épaisse, d'un message texte
  sous le champ et de aria-invalid pour les technologies d'assistance
  (WCAG 1.4.1 – utilisation de la couleur).
*/
.contact-form input[aria-invalid="true"],
.contact-form select[aria-invalid="true"],
.contact-form textarea[aria-invalid="true"],
.contact-form input.error,
.contact-form select.error,
.contact-form textarea.error {
  border-color: var(--error);
  border-width: 2px;
  box-shadow: 0 0 0 3px rgba(176, 42, 28, 0.12);
}

.contact-form textarea {
  resize: vertical;
  min-height: 120px;
}

/* Indice sous un champ (format attendu, usage de la donnée) */
.field-hint {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.45;
}

/* Message d'erreur propre au champ, relié par aria-describedby */
.field-error {
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--error);
  line-height: 1.45;
}

.field-error::before {
  content: "⚠ ";
}

/* Résumé des erreurs affiché en tête de formulaire */
.form-errors {
  border: 2px solid var(--error);
  border-radius: 8px;
  background-color: #fdf3f2;
  padding: 16px 18px;
  margin-bottom: 24px;
}

.form-errors:focus-visible {
  outline: 3px solid var(--error);
  outline-offset: 3px;
}

.form-errors-title {
  font-weight: 700;
  color: var(--error);
  margin-bottom: 8px;
  font-size: 0.95rem;
}

.form-errors ul {
  margin: 0;
  padding-left: 20px;
}

.form-errors li {
  font-size: 0.9rem;
  margin-bottom: 4px;
}

.form-errors a {
  color: var(--error);
  font-weight: 600;
}

.form-feedback {
  margin-bottom: 16px;
  font-size: 0.9rem;
  font-weight: 600;
  min-height: 24px;
}

.form-feedback.success {
  color: var(--success);
}

.form-feedback.error-msg {
  color: var(--error);
}

/*
  Information sur le traitement des données, juste au-dessus du
  bouton d'envoi.

  Discrète mais pas décorative : --text-secondary (#555) tient 7,4:1
  sur blanc, bien au-delà du seuil AA, et la taille reste au-dessus
  du plancher de lisibilité. Une mention d'information illisible ne
  remplit pas son office.
*/
.form-privacy {
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 18px;
  max-width: 68ch;
}

.form-required-note {
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 14px;
}

/* Message affiché lorsque JavaScript est désactivé */
.noscript-note {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
  font-size: 0.95rem;
  color: var(--dark);
  background-color: var(--grey-light);
  border-left: 4px solid var(--bordeaux);
  padding: 16px 20px;
}

.form-container .noscript-note {
  margin-bottom: 24px;
  text-align: left;
}


/* ─── 9. PARTENAIRES – BANDEAU DÉFILANT ──────────────────── */
.partners-section {
  padding: 60px 0;
  background: #ffffff;
  overflow: hidden;
  text-align: center;
}

.partners-section h2 {
  margin-bottom: 35px;
  font-size: 16px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.partners-marquee {
  width: 100%;
  overflow: hidden;
}

/*
  Sans JavaScript, la liste est le repli HTML : un seul jeu de logos,
  présenté en grille fixe centrée (la mise en page du mode « animations
  réduites »). script.js ajoute le jeu de boucle puis la classe
  is-defilant, qui seule déclenche le défilement : un jeu unique qui
  défilerait sauterait à mi-course.
*/
.partners-track {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 34px 44px;
  padding: 0 24px;
  list-style: none;
}

.partners-track.is-defilant {
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 70px;
  width: max-content;
  padding: 0;
  animation: partnersScroll 25s linear infinite;
}

/*
  Le défilement se met en pause au survol de la souris ET dès qu'un
  logo reçoit le focus clavier : un lien atteint avec la touche Tab
  ne s'échappe donc jamais sous le curseur.
*/
.partners-track:hover,
.partners-track:focus-within {
  animation-play-state: paused;
}

.partners-track > li {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 150px;
}

.partners-track a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 150px;
  text-decoration: none;
}

.partners-track img {
  max-height: 48px;
  max-width: 160px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.75;
  transition: all 0.25s ease;
}

.partners-track a:hover img,
.partners-track a:focus-visible img {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.05);
}

@keyframes partnersScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.partner-name-fallback {
  font-size: .78rem;
  font-weight: 700;
  color: var(--text-muted);
  text-align: center;
  white-space: nowrap;
  padding: 0 8px;
}

@media (max-width: 479px) {
  .partners-track img { max-height: 36px; max-width: 130px; }
}


/* ─── 10. FOOTER ─────────────────────────────────────────── */
.site-footer {
  background-color: #2c2c2c;
  color: #bbb;
  text-align: center;
  padding: 34px 28px;
}

/* Mention légale obligatoire : lisible, discrète, centrée */
.legal-mention {
  font-size: 0.86rem;
  line-height: 1.6;
  color: #b5b5b5;      /* 7,0:1 sur #2c2c2c */
  font-style: italic;
  max-width: 680px;
  margin: 0 auto 16px;
}

.footer-copy {
  font-size: 0.82rem;
  color: #a0a0a0;      /* 5,3:1 sur #2c2c2c – l'ancien #777 tombait à 3,1:1 */
}


/* ─── 10 bis. ANIMATIONS RÉDUITES ────────────────────────── */
/*
  Respect de la préférence système « réduire les animations »
  (Windows : Paramètres › Accessibilité › Effets visuels ;
   macOS/iOS : Accessibilité › Réduire les animations).
  Le bandeau partenaires cesse totalement de défiler et les
  transitions décoratives sont neutralisées ; aucun contenu n'est
  perdu, les logos restent visibles et navigables au clavier.
*/
@media (prefers-reduced-motion: reduce) {
  .partners-track,
  .partners-track.is-defilant {
    animation: none;
    /* Sans défilement, le bandeau devient une grille statique que l'on
       parcourt à son rythme plutôt qu'un contenu qui s'échappe. */
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 34px 44px;
    padding: 0 24px;
  }

  /* Le second jeu de logos ne sert qu'à la boucle du défilement :
     sans animation, il ferait doublon à l'écran. */
  .partners-track > li[aria-hidden="true"] {
    display: none;
  }

  .partners-track img {
    transition: none;
  }

  .partners-track a:hover img,
  .partners-track a:focus-visible img {
    transform: none;
  }

  .btn,
  .contact-link,
  .contact-form input,
  .contact-form select,
  .contact-form textarea {
    transition: none;
  }

  .btn:hover,
  .btn:focus-visible,
  .btn:active {
    transform: none;
  }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}


/* ─── 11. RESPONSIVE ─────────────────────────────────────── */

/* ── Mobile compact (< 480px) ── */
@media (max-width: 479px) {
  .site-logo { height: 58px; }
  .logo-bar  { padding: 12px 20px 8px; }

  /* V asymétrique adapté au petit écran */
  .hero {
    clip-path: polygon(0 12px, 42% 62px, 100% 0, 100% calc(100% - 44px), 0 100%);
    padding: 98px 20px 76px;
  }

  .hero-text { font-size: 1.12rem; }

  .services-grid { gap: 20px; }
  .service-icon  { width: 64px; height: 64px; padding: 14px; }
}

/* Tablette (≥ 600px) */
@media (min-width: 600px) {
  .contact-details {
    flex-direction: row;
    justify-content: center;
    gap: 44px;
  }

  .hero-text { font-size: 1.3rem; }
}

/* ≥ 768px — carte 850px max, paddings internes confortables */
@media (min-width: 768px) {
  .logo-bar  { padding: 16px 32px 12px; }
  .site-logo { height: 72px; }

  /* Même V asymétrique, légèrement plus profond */
  .hero {
    clip-path: polygon(0 16px, 42% 78px, 100% 0, 100% calc(100% - 58px), 0 100%);
    padding: 118px 32px 92px;
  }

  .hero-text { font-size: 1.32rem; }

  .services {
    padding: 50px 50px 60px;
  }

  .section-title {
    font-size: 1.35rem;
  }

  .service-icon {
    width: 90px;
    height: 90px;
    padding: 20px;
  }

  .services-grid {
    gap: 36px;
  }

  .service-item p {
    font-size: 0.9rem;
  }

  .contact-info {
    padding: 66px 50px 60px;
  }

  .form-section {
    padding: 68px 50px 76px;
  }
}

/* Desktop (≥ 1024px) — carte max 850px */
@media (min-width: 1024px) {
  .logo-bar  { padding: 18px 36px 14px; }
  .site-logo { height: 74px; }

  /* V asymétrique — même géométrie, carte 850px */
  .hero {
    clip-path: polygon(0 18px, 42% 82px, 100% 0, 100% calc(100% - 60px), 0 100%);
    padding: 124px 36px 96px;
  }

  .hero-text {
    font-size: 1.35rem;
    line-height: 1.52;
  }

  .services {
    padding: 52px 44px 60px;
  }

  .section-title {
    font-size: 1.3rem;
  }

  .services-grid {
    gap: 48px;
  }

  .service-icon {
    width: 90px;
    height: 90px;
    padding: 20px;
  }

  .service-item p {
    font-size: 0.95rem;
  }

  .contact-info {
    padding: 74px 70px 68px;
  }

  .form-section {
    padding: 74px 70px 84px;
  }
}

/* ── Grand écran (≥ 1280px) ── */
@media (min-width: 1280px) {
  .hero-inner {
    max-width: 780px;
  }

  .hero-text {
    font-size: 1.65rem;
  }
}


/* ═══════════════════════════════════════════════════════════════
   12. LIEN ACCESSIBILITÉ DANS LE PIED DE PAGE
   Discret, mais toujours lisible : 7,0:1 sur le fond #2c2c2c.
═══════════════════════════════════════════════════════════════ */
.footer-links {
  margin-top: 12px;
}

.footer-link {
  font-size: 0.82rem;
  color: #b5b5b5;
  text-decoration: underline;
  /* Cible d'au moins 24 px de haut, même dans un pied de page compact */
  display: inline-block;
  padding: 6px 8px;
}

.footer-link:hover,
.footer-link:focus-visible {
  color: #ffffff;
}

/*
  Séparateur entre les liens du pied de page. Purement décoratif —
  il porte aria-hidden dans le HTML — et retiré du flux de lecture
  des technologies d'assistance, qui annoncent déjà deux liens.
  Sur écran étroit, les liens passent à la ligne : le séparateur les
  suit sans créer de rupture disgracieuse.
*/
.footer-sep {
  color: #b5b5b5;
  font-size: 0.82rem;
  /* Aligné sur le rembourrage des liens qui l'encadrent */
  padding: 6px 0;
  user-select: none;
}


/* ═══════════════════════════════════════════════════════════════
   13. PAGES DE CONTENU (page Accessibilité)
   Réutilise la charte de la page d'accueil : mêmes couleurs, même
   typographie, même carte centrée. Aucune identité visuelle nouvelle.
   La géométrie en V du bandeau d'accueil lui reste propre : sur une
   page de contenu, un bandeau droit porte simplement le titre.
═══════════════════════════════════════════════════════════════ */

/* Le logo redevient un lien vers l'accueil sur les pages internes */
.logo-link {
  display: inline-block;
  text-decoration: none;
}

.page-hero {
  background-color: var(--bordeaux);
  padding: 34px 28px;
}

.page-hero-title {
  color: var(--white);
  font-size: 1.65rem;
  font-weight: 700;
  line-height: 1.25;
  max-width: 780px;
}

.content-page {
  background-color: var(--white);
  padding: 40px 28px 48px;
}

.content-section {
  max-width: 720px;
  margin: 0 auto 48px;
}

/*
  Séparateur discret entre les sections : rythme la lecture et rend la
  page plus facile à parcourir, sans ajouter d'ornement.
*/
.content-section + .content-section {
  border-top: 1px solid #ececec;
  padding-top: 44px;
}

.content-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--bordeaux);
  margin-bottom: 18px;
  line-height: 1.3;
}

/*
  Largeur de ligne limitée à environ 68 caractères : au-delà, l'œil
  perd le début de la ligne suivante. Confort de lecture, en particulier
  pour les personnes dyslexiques ou fatigables.
*/
.content-section p,
.measure-list li,
.contact-choices li {
  max-width: 68ch;
}

.content-section p {
  margin-bottom: 16px;
  line-height: 1.7;
}

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

/*
  Bloc de texte administrable : son contenu est reconstruit en
  paragraphes à partir de la valeur enregistrée. L'espacement reste
  identique, que le bloc vienne du HTML ou de l'administration.
*/
.prose > p:last-child {
  margin-bottom: 0;
}

.prose:not(:last-child) {
  margin-bottom: 16px;
}

/* Liste des mesures : intitulé en gras puis explication en clair */
.measure-list {
  list-style: none;
  margin-top: 20px;
}

.measure-list li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 20px;
  line-height: 1.65;
}

.measure-list li:last-child {
  margin-bottom: 0;
}

/* Puce décorative : masquée aux lecteurs d'écran, qui annoncent
   déjà la liste et le rang de chaque élément. */
.measure-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--orange);
}

.measure-list strong {
  color: var(--dark);
}

/* Encadré de mise en avant, repris du bordeaux de la charte */
.info-box {
  background-color: var(--grey-light);
  border-left: 4px solid var(--bordeaux);
  padding: 18px 20px;
  margin: 18px 0 22px;
  border-radius: 0 8px 8px 0;
}

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

.contact-choices {
  list-style: none;
  margin: 6px 0 16px;
}

.contact-choices li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 14px;
  line-height: 1.6;
}

.contact-choices li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--orange);
}

/* Liens dans le corps du texte : soulignés, jamais signalés par la
   seule couleur, et suffisamment contrastés (--orange-strong = 4,56:1). */
.inline-link {
  color: var(--orange-strong);
  font-weight: 600;
  text-decoration: underline;
  /* Interligne préservé même sur une cible agrandie */
  padding: 2px 0;
}

.inline-link:hover,
.inline-link:focus-visible {
  color: var(--bordeaux);
}

/* Raccourcis clavier cités dans le texte */
kbd {
  display: inline-block;
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 0.85em;
  line-height: 1;
  padding: 3px 6px;
  border: 1px solid #767676;
  border-bottom-width: 2px;
  border-radius: 4px;
  background-color: var(--grey-light);
  color: var(--dark);
  white-space: nowrap;
}

abbr[title] {
  text-decoration: underline dotted;
  cursor: help;
}

.note-media {
  font-size: 0.92rem;
  color: var(--text-secondary);
  margin-top: 20px;
}

.last-update {
  max-width: 720px;
  margin: 0 auto 28px;
  font-size: 0.88rem;
  color: var(--text-muted);
  padding-top: 22px;
  border-top: 1px solid var(--grey-mid);
}

.back-home {
  max-width: 720px;
  margin: 0 auto;
}

/*
  Sous-titre de section (h3). Il descend d'un cran sous .content-title
  sans changer de famille : la hiérarchie se lit à la taille et à la
  couleur, jamais à la seule graisse.
*/
.content-subtitle {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--dark);
  margin: 28px 0 12px;
  line-height: 1.35;
}

/* Nom de domaine ou valeur technique citée dans le texte */
.mono-inline {
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 0.92em;
  background-color: var(--grey-light);
  padding: 1px 5px;
  border-radius: 4px;
  word-break: break-word;
}

/* ═══════════════════════════════════════════════════════════════
   14. REPÈRES DE RÉDACTION (page Confidentialité)
   ───────────────────────────────────────────────────────────────
   Ces deux styles n'existent que pour rendre VISIBLE ce qui n'est
   pas encore renseigné. Ils disparaissent de la page le jour où les
   informations manquantes sont complétées — et les règles peuvent
   alors être retirées d'ici.

   Volontairement voyants : un repère discret finirait par être
   publié sans qu'on le remarque.
═══════════════════════════════════════════════════════════════ */

/* Bandeau « version de travail », en tête de la page Confidentialité */
.draft-notice {
  max-width: 720px;
  margin: 0 auto 40px;
  background-color: #fdf3d8;
  border: 1px solid #a5730a;
  border-left-width: 5px;
  border-radius: 0 8px 8px 0;
  padding: 18px 20px;
}

.draft-notice-title {
  font-weight: 700;
  /* 8,1:1 sur #fdf3d8 */
  color: #6b4a02;
  margin-bottom: 10px;
}

.draft-notice p {
  line-height: 1.65;
  margin-bottom: 0;
}

/*
  Valeur non encore confirmée. Le fond et le contour portent
  l'information visuellement ; les crochets du texte la portent pour
  tous les autres — lecteur d'écran, impression en noir et blanc,
  copier-coller. La couleur n'est donc jamais seule.
*/
.placeholder {
  display: inline-block;
  background-color: #fdf3d8;
  border: 1px dashed #a5730a;
  border-radius: 4px;
  /* 8,1:1 sur #fdf3d8 */
  color: #6b4a02;
  font-weight: 600;
  font-size: 0.94em;
  padding: 1px 7px;
  /* Un repère long ne doit pas élargir la page sur petit écran */
  word-break: break-word;
}

/* ── Pages de contenu : adaptations d'écran ── */
@media (max-width: 479px) {
  .page-hero       { padding: 26px 20px; }
  .page-hero-title { font-size: 1.4rem; }
  .content-page    { padding: 32px 20px 40px; }

  /* Sur petit écran, on resserre légèrement le rythme vertical
     sans coller les sections les unes aux autres. */
  .content-section                    { margin-bottom: 36px; }
  .content-section + .content-section { padding-top: 34px; }
  .measure-list li                    { margin-bottom: 18px; }
}

@media (min-width: 768px) {
  .page-hero       { padding: 42px 32px; }
  .page-hero-title { font-size: 1.9rem; }
  .content-page    { padding: 48px 50px 56px; }
}

@media (min-width: 1024px) {
  .page-hero       { padding: 46px 36px; }
  .content-page    { padding: 52px 70px 64px; }
}