/* ==========================================================================
   LA FIDUCIAIRE 2B — feuille de style unique
   --------------------------------------------------------------------------
   Organisation du fichier :
   1. Variables (couleurs, tailles)      -> pour changer les couleurs, tout est ici
   2. Base et typographie
   3. Bandeau d'alerte
   4. En-tete et menu
   5. Boutons
   6. Sections et grilles
   7. Blocs specifiques (missions, equipe, etapes, FAQ, transports...)
   8. Formulaires
   9. Pied de page
   10. Adaptations ordinateur (le site est concu mobile d'abord)
   ========================================================================== */


/* ==========================================================================
   1. VARIABLES
   Pour changer une couleur sur tout le site, modifiez uniquement cette zone.
   ========================================================================== */
:root {
  --rouge: #E30613;          /* rouge du logo, boutons et accents */
  --rouge-fonce: #B00410;    /* rouge au survol des boutons */
  --rouge-pale: #FCEDED;     /* fond tres clair pour les encadres */
  --gris-fonce: #2E2E30;     /* titres */
  --gris-texte: #55555A;     /* texte courant */
  --gris-doux: #8A8A90;      /* mentions secondaires */
  --gris-clair: #F6F6F6;     /* fonds de sections alternees */
  --bordure: #E4E4E6;        /* traits fins */
  --blanc: #FFFFFF;
  --largeur-max: 1140px;     /* largeur du contenu sur grand ecran */
  --rayon: 6px;

  /* Police : pile systeme a rendu geometrique, aucun appel exterieur.
     Aucune donnee n'est envoyee a un service tiers, conformement a la
     politique de confidentialite du site.
     Si vous voulez la police Jost, telechargez-la, deposez les fichiers
     dans assets/ et ajoutez une regle @font-face ici. */
  --police: "Avenir Next", Avenir, "Century Gothic", "Futura",
            system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}


/* ==========================================================================
   2. BASE ET TYPOGRAPHIE
   ========================================================================== */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--police);
  font-size: 17px;
  line-height: 1.7;
  color: var(--gris-texte);
  background: var(--blanc);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  color: var(--gris-fonce);
  line-height: 1.25;
  font-weight: 500;
  margin: 0 0 14px;
}
h1 { font-size: 32px; letter-spacing: -0.01em; }
h2 { font-size: 25px; }
h3 { font-size: 18px; }

p { margin: 0 0 16px; }
a { color: var(--rouge); }
img { max-width: 100%; height: auto; display: block; }

/* Lien invisible qui permet la navigation au clavier */
.saut-contenu {
  position: absolute; left: -9999px; top: 0;
  background: var(--gris-fonce); color: #fff; padding: 10px 16px; z-index: 100;
}
.saut-contenu:focus { left: 0; }

/* Contour visible lors de la navigation au clavier — ne pas supprimer */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--rouge);
  outline-offset: 2px;
}

.conteneur {
  width: 100%;
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: 0 20px;
}


/* ==========================================================================
   3. BANDEAU D'ALERTE FACTURATION ELECTRONIQUE
   Pour le retirer apres 2027 : supprimez le bloc <div class="bandeau-alerte">
   au debut de chaque page HTML.
   ========================================================================== */
.bandeau-alerte {
  background: var(--rouge);
  color: #fff;
  font-size: 14px;
  line-height: 1.45;
  padding: 9px 0;
}
.bandeau-alerte .conteneur {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; flex-wrap: wrap; text-align: center;
}
.bandeau-alerte a { color: #fff; text-decoration: underline; white-space: nowrap; }
.bandeau-alerte .fermer {
  background: none; border: 0; color: #fff; font-size: 18px;
  line-height: 1; cursor: pointer; padding: 0 4px;
}


/* ==========================================================================
   4. EN-TETE ET MENU
   ========================================================================== */
.entete {
  background: #fff;
  border-bottom: 1px solid var(--bordure);
  position: sticky; top: 0; z-index: 50;
}
.entete .conteneur {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding-top: 12px; padding-bottom: 12px;
}
.logo { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.logo img { width: 34px; height: 34px; }
.logo-texte {
  font-size: 16px; letter-spacing: 0.06em; color: var(--gris-fonce);
  white-space: nowrap;
}
.logo-texte .bloc-2b {
  background: var(--gris-fonce); color: #fff; padding: 1px 5px; margin-left: 2px;
}

.nav { display: none; }                    /* masque sur mobile, affiche par le bouton */
.nav.ouvert {
  display: block; position: absolute; top: 100%; left: 0; right: 0;
  background: #fff; border-bottom: 1px solid var(--bordure); padding: 8px 20px 18px;
}
.nav a {
  display: block; padding: 12px 0; color: var(--gris-fonce);
  text-decoration: none; font-size: 16px; border-bottom: 1px solid var(--bordure);
}
.nav a:last-child { border-bottom: 0; }
.nav a.actif { color: var(--rouge); }

.actions-entete { display: flex; align-items: center; gap: 10px; }
.tel-entete { display: none; color: var(--gris-fonce); text-decoration: none; font-size: 15px; }

.bouton-menu {
  background: none; border: 1px solid var(--bordure); border-radius: var(--rayon);
  padding: 8px 10px; cursor: pointer; line-height: 0;
}
.bouton-menu span {
  display: block; width: 18px; height: 2px; background: var(--gris-fonce); margin: 3px 0;
}


/* ==========================================================================
   5. BOUTONS
   ========================================================================== */
.btn {
  display: inline-block; text-align: center; text-decoration: none;
  font-size: 16px; font-family: inherit; padding: 13px 22px;
  border-radius: var(--rayon); border: 1px solid transparent; cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.btn-principal { background: var(--rouge); color: #fff; }
.btn-principal:hover { background: var(--rouge-fonce); }
.btn-secondaire { background: #fff; color: var(--gris-fonce); border-color: #C8C8CC; }
.btn-secondaire:hover { border-color: var(--gris-fonce); }
.btn-clair { background: #fff; color: var(--gris-fonce); }
.btn-petit { padding: 9px 14px; font-size: 14px; }
.groupe-boutons { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.mention-bouton { font-size: 14px; color: var(--gris-doux); margin: 0; }


/* ==========================================================================
   6. SECTIONS ET GRILLES
   ========================================================================== */
.section { padding: 48px 0; }
.section-grise { background: var(--gris-clair); }
.section-sombre { background: var(--gris-fonce); color: #D6D6DA; }
.section-sombre h2, .section-sombre h3 { color: #fff; }

.intro-section { max-width: 640px; margin-bottom: 28px; }
.centre { text-align: center; }
.centre .intro-section { margin-left: auto; margin-right: auto; }

.grille { display: grid; gap: 16px; }
.grille-2 { grid-template-columns: 1fr; }
.grille-3 { grid-template-columns: 1fr; }
.grille-4 { grid-template-columns: 1fr 1fr; }

/* Carte blanche standard */
.carte {
  background: #fff; border: 1px solid var(--bordure);
  border-radius: 10px; padding: 22px;
}
.carte h3 { margin-bottom: 8px; }
.carte p { margin-bottom: 0; font-size: 15px; }
.carte-accent { border: 2px solid var(--rouge); }


/* ==========================================================================
   7. BLOCS SPECIFIQUES
   ========================================================================== */

/* --- En-tete de page d'accueil --- */
.heros { padding: 40px 0 44px; }
.heros h1 { margin-bottom: 16px; }
.heros .accroche-soutien { font-size: 18px; margin-bottom: 24px; }
.heros-grille { display: grid; gap: 28px; }

/* Composition de carres qui remplace la photo.
   Pour mettre une photo a la place : remplacez le bloc .motif-carres
   par <img src="assets/votre-photo.jpg" alt="..."> dans le HTML. */
.motif-carres {
  position: relative; height: 220px; background: var(--gris-clair);
  border-radius: 10px; overflow: hidden; margin-top: 28px;
}
.motif-carres span { position: absolute; display: block; transform: rotate(45deg); }
.c1 { top: 30px;  left: 14%; width: 66px; height: 66px; background: var(--rouge); }
.c2 { top: 82px;  left: 34%; width: 52px; height: 52px; background: #F0A9A6; }
.c3 { top: 40px;  left: 52%; width: 44px; height: 44px; background: #9E9EA2; }
.c4 { top: 118px; left: 20%; width: 34px; height: 34px; background: #D9D9DD; }
.c5 { top: 96px;  left: 66%; width: 60px; height: 60px; background: #E9E9ED; }

/* --- Bandeau de reassurance --- */
.reassurance { background: var(--gris-clair); padding: 26px 0; }
.reassurance .grille { gap: 18px; }
.reassurance div p {
  margin: 0; font-size: 15px; color: var(--gris-fonce);
  border-left: 3px solid var(--rouge); padding-left: 12px;
}

/* --- Cartes de missions --- */
.carte-mission { display: block; text-decoration: none; color: inherit; }
.carte-mission:hover { border-color: #B8B8BC; }
.icone-carre {
  width: 30px; height: 30px; background: var(--rouge);
  transform: rotate(45deg); margin-bottom: 20px;
}
.icone-carre.grise { background: #9E9EA2; }
.lien-carte { color: var(--rouge); font-size: 15px; display: inline-block; margin-top: 10px; }

/* --- Equipe : initiales dans un carre --- */
.membre { text-align: center; }
.initiales {
  width: 84px; height: 84px; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 24px; letter-spacing: 0.04em; border-radius: 8px;
}
.initiales.rouge { background: var(--rouge); }
.initiales.gris { background: #6C6C72; }
.membre strong { display: block; color: var(--gris-fonce); font-weight: 500; }
.membre span { font-size: 14px; color: var(--gris-doux); }

/* --- Etapes numerotees --- */
.etape .numero {
  width: 34px; height: 34px; background: var(--rouge); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; margin-bottom: 14px;
}
.section-sombre .etape .numero { background: #fff; color: var(--gris-fonce); }

/* --- Encadres --- */
.encadre {
  background: var(--rouge-pale); border-left: 4px solid var(--rouge);
  padding: 20px 22px; margin: 22px 0;
}
.encadre h3 { margin-bottom: 10px; }
.encadre ul { margin: 0 0 12px; padding-left: 20px; }
.encadre p:last-child { margin-bottom: 0; }

.note-grise {
  background: var(--gris-clair); border-left: 4px solid #C8C8CC;
  padding: 18px 20px; font-size: 15px; margin: 20px 0;
}
.note-grise p:last-child { margin-bottom: 0; }

/* --- Dates cles --- */
.date-cle { border-top: 3px solid var(--rouge); padding-top: 14px; }
.date-cle strong { display: block; font-size: 22px; color: var(--gris-fonce); }
.section-sombre .date-cle strong { color: #fff; }
.date-cle span { font-size: 15px; }

/* --- Sommaire d'ancres --- */
.sommaire { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.sommaire a {
  font-size: 14px; text-decoration: none; color: var(--gris-fonce);
  border: 1px solid var(--bordure); border-radius: 40px; padding: 7px 14px;
}
.sommaire a:hover { border-color: var(--rouge); color: var(--rouge); }

/* --- Bloc mission de la page missions --- */
.mission { padding: 40px 0; border-top: 1px solid var(--bordure); }
.mission:first-of-type { border-top: 0; }
.mission h2 { display: flex; align-items: center; gap: 12px; }
.mission h2::before {
  content: ""; width: 16px; height: 16px; background: var(--rouge);
  transform: rotate(45deg); flex: none;
}
.pour-qui { font-size: 15px; color: var(--gris-fonce); margin-bottom: 14px; }
.pour-qui strong { color: var(--rouge); }
.liste-prestations { margin: 0 0 18px; padding-left: 20px; }
.liste-prestations li { margin-bottom: 6px; }

/* --- FAQ depliable --- */
.faq details {
  border-bottom: 1px solid var(--bordure); padding: 4px 0;
}
.faq summary {
  cursor: pointer; padding: 16px 0; font-size: 17px; color: var(--gris-fonce);
  list-style: none; display: flex; justify-content: space-between; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--rouge); font-size: 22px; line-height: 1; }
.faq details[open] summary::after { content: "\2013"; }
.faq details p { padding-bottom: 14px; margin: 0; font-size: 16px; }

/* --- Bloc transports (page contact) --- */
.transports { margin-top: 8px; }
.transports h3 { font-size: 15px; color: var(--gris-doux); margin: 22px 0 10px; }
.ligne-transport {
  display: flex; align-items: center; gap: 12px; padding: 7px 0;
  border-bottom: 1px solid var(--bordure); font-size: 15px;
}
.ligne-transport:last-child { border-bottom: 0; }
.badge-ligne {
  flex: none; min-width: 34px; text-align: center; padding: 3px 8px;
  border-radius: 4px; font-size: 14px; color: var(--gris-fonce); background: #EDEDEF;
}
.badge-ligne.metro9 {
  background: #D5C900; color: #3F3A00; border-radius: 50%;
  width: 28px; height: 28px; min-width: 28px; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.badge-ligne.noctilien { background: #0B3A63; color: #fff; }
.ligne-transport .desservi { flex: 1; color: var(--gris-texte); }
.ligne-transport .duree { color: var(--gris-doux); font-size: 14px; white-space: nowrap; }

/* --- Coordonnees --- */
.bloc-coordonnees p { margin-bottom: 10px; }
.bloc-coordonnees strong { color: var(--gris-fonce); }
.tel-grand {
  font-size: 26px; color: var(--gris-fonce); text-decoration: none;
  display: inline-block; margin-bottom: 6px;
}

/* --- Appel a l'action final --- */
.cta-final { background: var(--gris-fonce); color: #D6D6DA; padding: 52px 0; text-align: center; }
.cta-final h2 { color: #fff; }
.cta-final .groupe-boutons { justify-content: center; }
.cta-final .mention-bouton { color: #9C9CA2; }

/* --- Chiffres cles --- */
.chiffre strong { display: block; font-size: 28px; color: var(--rouge); line-height: 1.2; }
.chiffre span { font-size: 15px; }


/* ==========================================================================
   8. FORMULAIRES
   ========================================================================== */
.formulaire { max-width: 620px; }
.partie-formulaire {
  border-top: 1px solid var(--bordure); padding-top: 22px; margin-top: 28px;
}
.partie-formulaire:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.partie-formulaire > h3 { color: var(--rouge); font-size: 15px; letter-spacing: .04em; }

.champ { margin-bottom: 18px; }
.champ label { display: block; font-size: 15px; color: var(--gris-fonce); margin-bottom: 6px; }
.champ .aide { display: block; font-size: 14px; color: var(--gris-doux); margin-top: 4px; }

input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  width: 100%; font-family: inherit; font-size: 16px; color: var(--gris-fonce);
  padding: 12px 14px; border: 1px solid #C8C8CC; border-radius: var(--rayon);
  background: #fff;
}
textarea { min-height: 120px; resize: vertical; }
select { appearance: none; background-image: none; }

.cases { display: grid; gap: 8px; grid-template-columns: 1fr; }
.case-a-cocher { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; }
.case-a-cocher input { margin-top: 4px; flex: none; }

.erreur { color: var(--rouge); font-size: 14px; margin: 6px 0 0; }
.champ-en-erreur input, .champ-en-erreur select, .champ-en-erreur textarea { border-color: var(--rouge); }

.message-confirmation {
  background: var(--rouge-pale); border-left: 4px solid var(--rouge);
  padding: 20px 22px; margin-top: 20px;
}
.message-confirmation p:last-child { margin-bottom: 0; }
.cache { display: none; }


/* ==========================================================================
   9. PIED DE PAGE
   ========================================================================== */
.pied { background: var(--gris-clair); padding: 44px 0 20px; font-size: 15px; }
.pied h3 { font-size: 15px; color: var(--gris-fonce); margin-bottom: 12px; }
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin-bottom: 8px; }
.pied a { color: var(--gris-texte); text-decoration: none; }
.pied a:hover { color: var(--rouge); }
.pied .grille { gap: 32px; }
.bas-de-page {
  border-top: 1px solid var(--bordure); margin-top: 32px; padding-top: 18px;
  font-size: 14px; color: var(--gris-doux);
}

/* Pages de texte legal */
.page-texte { max-width: 760px; }
.page-texte h2 { font-size: 20px; margin-top: 34px; }


/* ==========================================================================
   10. ADAPTATIONS ORDINATEUR
   Le site est concu pour mobile. Ces regles s'appliquent au-dela de 860 px.
   ========================================================================== */
@media (min-width: 860px) {
  body { font-size: 18px; }
  h1 { font-size: 46px; }
  h2 { font-size: 31px; }

  .section { padding: 72px 0; }
  .heros { padding: 64px 0 72px; }
  .heros-grille { grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
  .motif-carres { height: 320px; margin-top: 0; }

  .grille-2 { grid-template-columns: 1fr 1fr; gap: 40px; }
  .grille-3 { grid-template-columns: repeat(3, 1fr); }
  .grille-4 { grid-template-columns: repeat(4, 1fr); }

  .logo-texte { font-size: 18px; }
  .logo img { width: 40px; height: 40px; }

  .mission { display: grid; grid-template-columns: 1fr 1.6fr; gap: 40px; padding: 56px 0; }
  .mission h2 { margin-top: 0; }
  .cases { grid-template-columns: 1fr 1fr; }
}

/* Respect du reglage systeme « animations reduites » */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* --------------------------------------------------------------------------
   EN-TETE : passage du menu deroulant au menu horizontal
   Le menu ne s'affiche en ligne qu'a partir de 1080 px, sinon les libelles
   se coupent en deux. Le telephone n'apparait qu'a partir de 1240 px.
   Pour afficher le menu horizontal plus tot, baissez les valeurs ci-dessous.
   -------------------------------------------------------------------------- */
.nav a, .tel-entete, .actions-entete .btn, .logo-texte { white-space: nowrap; }

@media (min-width: 1080px) {
  .nav { display: flex; gap: 20px; }
  .nav a { border: 0; padding: 0; font-size: 16px; }
  .bouton-menu { display: none; }
}

@media (min-width: 1240px) {
  .tel-entete { display: inline-block; }
  .nav { gap: 24px; }
}