/* ===== Interdroit – nouvelle mise en page (2026) ===== */
:root {
  --rouge: #be1522;
  --rouge-fonce: #8e0f19;
  --encre: #1a1a1a;
  --gris: #6b6b6b;
  --filet: #cfcfcf;
  --carre: #0f2a36;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  color: var(--encre);
  background: #fff;
  line-height: 1.55;
}

a { color: var(--rouge); }
a:hover { color: var(--rouge-fonce); }

.page { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

/* ---------- En-tête ---------- */
.entete {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
  padding: 28px 0 20px;
  border-bottom: 1px solid var(--filet);
}
.entete img { height: 48px; width: auto; display: block; }
.entete nav a {
  margin-left: 22px; text-decoration: none; color: var(--encre);
  font-size: 15px; letter-spacing: .02em;
}
.entete nav a:hover, .entete nav a.actif { color: var(--rouge); }

/* ---------- Titres ---------- */
h1.titre {
  color: var(--rouge); text-transform: uppercase; font-weight: bold;
  font-size: 30px; letter-spacing: .02em; margin: 48px 0 32px;
}
h2.rubrique {
  font-size: 20px; font-weight: bold; margin: 28px 0 10px;
  padding-bottom: 4px; border-bottom: 1px solid var(--gris);
}
h2.rubrique:first-child { margin-top: 0; }

/* ---------- Accueil : logo-menu ---------- */
.accueil-logo { text-align: center; padding: 40px 0 0; }
.accueil-logo img { height: 64px; width: auto; }

.triangle { display: block; width: 100%; max-width: 980px; margin: 10px auto 40px; }
.triangle .carre { fill: none; stroke: var(--carre); stroke-width: 2.5; }
.triangle .tri { fill: none; stroke: var(--rouge); stroke-width: 3; }
.triangle text {
  fill: var(--rouge); font-family: Georgia, "Times New Roman", serif;
  font-weight: bold; font-size: 30px; letter-spacing: .02em;
  transition: fill .15s;
}
.triangle a:hover text, .triangle a:focus text { fill: var(--rouge-fonce); text-decoration: underline; }
.triangle a circle { fill: var(--rouge); transition: r .15s; }
.triangle a:hover circle { r: 11; }

/* Sur petit écran : liste simple sous le dessin */
.menu-mobile { display: none; list-style: none; padding: 0; margin: 0 0 40px; text-align: center; }
.menu-mobile li { margin: 14px 0; }
.menu-mobile a {
  color: var(--rouge); font-weight: bold; text-transform: uppercase;
  text-decoration: none; font-size: 18px;
}

/* ---------- Deux colonnes (Qui sommes-nous / Contact) ---------- */
.deux-colonnes {
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: start;
  margin-bottom: 56px;
}
.deux-colonnes img.photo { width: 100%; height: auto; display: block; filter: grayscale(100%); }
.texte-etude p { margin: 0 0 18px; text-align: justify; hyphens: auto; }

/* ---------- Pictogrammes (Que faisons-nous) ---------- */
.pictos {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 32px;
  margin-bottom: 64px; align-items: start;
}
.pictos .picto { display: block; text-align: center; }
.pictos img { width: 100%; max-width: 170px; aspect-ratio: 340 / 260; height: auto; display: block; margin: 0 auto 14px; }
.pictos span {
  display: block; color: var(--rouge); font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 18px; line-height: 1.3; min-height: 2.6em;
}
/* 2e rangée centrée, comme sur la maquette */
.pictos .picto:nth-child(5) { grid-column: 2; }

/* ---------- Contact ---------- */
.carte iframe { width: 100%; height: 420px; border: 0; display: block; }
.coordonnees p { margin: 0 0 14px; }
.coordonnees .note { font-style: italic; }

/* ---------- Pied de page ---------- */
.pied {
  border-top: 1px solid var(--filet); margin-top: 24px; padding: 18px 0 32px;
  text-align: center; font-size: 13px; color: var(--gris);
}
.pied a { color: var(--encre); }

/* ---------- Mobile ---------- */
@media (max-width: 760px) {
  .page { padding: 0 16px; }
  .entete { justify-content: center; }
  .entete nav { text-align: center; }
  .entete nav a { margin: 0 8px; display: inline-block; }
  h1.titre { font-size: 24px; margin: 32px 0 24px; }
  .deux-colonnes { grid-template-columns: 1fr; gap: 28px; }
  .pictos { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
  .pictos .picto:nth-child(5) { grid-column: auto; }
  .triangle-grand { display: none; }
  .triangle-mobile { display: block; }
  .carte iframe { height: 300px; }
  .accueil-logo img { height: auto; max-width: 85%; }
  .entete img { height: 40px; }
}

/* ===== Version une seule page (défilement) ===== */
html { scroll-behavior: smooth; }
.bloc { scroll-margin-top: 80px; border-top: 1px solid var(--filet); padding-top: 8px; }
h2.titre {
  color: var(--rouge); text-transform: uppercase; font-weight: bold;
  font-size: 30px; letter-spacing: .02em; margin: 48px 0 32px;
}
/* Barre fixe en haut, visible pendant le défilement */
.barre {
  position: sticky; top: 0; z-index: 10; background: #fff;
  border-bottom: 1px solid var(--filet);
}
.barre-int { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 64px; }
.barre img { height: 34px; width: auto; display: block; }
.barre nav a { margin-left: 20px; text-decoration: none; color: var(--encre); font-size: 15px; }
.barre nav a:hover { color: var(--rouge); }
@media (max-width: 760px) {
  h2.titre { font-size: 23px; margin: 32px 0 22px; }
  .barre-int { height: 56px; }
  .barre img { height: 26px; }
  .barre nav a { margin-left: 10px; font-size: 13px; }
  .barre nav a:first-child { display: none; }
  .bloc { scroll-margin-top: 64px; }
}
@media (max-width: 340px) { .barre nav { display: none; } }

/* ===== L'équipe en livret ===== */
.livret {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  margin: 0 0 56px;
}
.fiche {
  display: flex; flex-direction: column; text-decoration: none; color: var(--encre);
  border: 1px solid var(--filet); background: #fff; padding: 0 0 18px;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.fiche:hover { border-color: var(--rouge); transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0,0,0,.08); color: var(--encre); }
.fiche-photo {
  position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #efefef;
}
.fiche-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(100%); z-index: 1; transition: filter .2s;
}
.fiche:hover .fiche-photo img { filter: grayscale(0%); }
.initiales {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 44px; color: var(--rouge); letter-spacing: .05em;
}
.fiche-nom { font-weight: bold; font-size: 17px; margin: 16px 16px 2px; }
.fiche-role { font-size: 14px; color: var(--gris); margin: 0 16px; }
.fiche-langues { font-size: 13px; color: var(--gris); margin: 2px 16px 0; font-style: italic; }
.fiche-lien { margin: auto 16px 0; padding-top: 12px; font-size: 14px; color: var(--rouge); }

/* Sur téléphone : on feuillette le livret en glissant le doigt */
@media (max-width: 760px) {
  .livret {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px;
    margin: 0 -16px 48px; padding: 4px 16px 12px; -webkit-overflow-scrolling: touch;
  }
  .fiche { flex: 0 0 62%; scroll-snap-align: center; }
  .texte-etude p { text-align: left; }
}

/* ===== Ajustements : triangle mobile, texte justifié ===== */
.triangle-mobile { display: none; max-width: 420px; }
.triangle-mobile text { font-size: 17px; }
.triangle-mobile a:hover circle { r: 8; }
.coordonnees p.justifie { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
@media (max-width: 760px) { .pictos span { font-size: 16px; } }
@media (max-width: 760px) {
  .triangle-grand { display: none; }
  .triangle-mobile { display: block !important; margin: 0 auto 32px; }
}

/* Le texte du triangle ne doit jamais être coupé */
.triangle { overflow: visible; }

/* ===== Pages intérieures (fiches, activités, protection des données) ===== */
.retour { margin: 28px 0 0; font-size: 15px; }
.retour a { text-decoration: none; }
.pictos a.picto { text-decoration: none; transition: transform .15s; }
.pictos a.picto:hover { transform: translateY(-4px); }
.fiche-page { margin-bottom: 48px; }
.photo.portrait { filter: grayscale(100%); max-width: 420px; }
.fonction { font-style: italic; color: var(--gris); margin: 0 0 22px; }
.coordonnees a { color: var(--rouge); }
.activite {
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; align-items: start;
  padding: 36px 0; border-top: 1px solid var(--filet); scroll-margin-top: 80px;
}
.activite:first-of-type { border-top: 0; }
.activite .photo { width: 100%; height: auto; display: block; filter: grayscale(100%); }
.activite .ico { height: 34px; width: auto; vertical-align: -6px; margin-right: 12px; }
.activite h2.rubrique { color: var(--rouge); margin-top: 0; }
.texte-long { max-width: 820px; margin-bottom: 48px; }
.texte-long h2.rubrique { margin-top: 32px; }
p.justifie { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
@media (max-width: 760px) {
  .activite { grid-template-columns: 1fr; gap: 20px; padding: 28px 0; }
  .photo.portrait { max-width: 100%; }
}