/*
 * Page « Qui sommes-nous ? »
 * Chaque collègue est affichée avec le même modèle ; ses couleurs arrivent par les variables
 * --perso-fond (carte Formations), --perso-texte (titres colorés) et --perso-clair (fond de l'encadré).
 */

/* ---------- Bandeau photo ---------- */

.bandeau { position: relative; height: clamp(260px, 50vw, 420px); overflow: hidden; }
.bandeau-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bandeau-degrade {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(46, 42, 40, .7) 0, rgba(46, 42, 40, .3) 40%, rgba(46, 42, 40, 0) 70%);
}
.bandeau-titres {
  position: absolute; left: 0; right: 0; bottom: clamp(56px, 10vw, 72px);
  max-width: 1040px; margin: 0 auto; padding: 0 24px; display: flex; flex-direction: column; gap: 8px;
}
.bandeau-surtitre { font-family: Delius, sans-serif; font-size: 22px; color: #F7B9CF; }
.bandeau h1 {
  margin: 0; font-family: Delius, sans-serif; font-weight: 700; font-size: clamp(32px, 8vw, 44px);
  line-height: 1.1; color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}
.bandeau-vague { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 80px; display: block; }

/* ---------- Les mots de l'équipe (post-it) ---------- */

.postits {
  max-width: 1040px; margin: 0 auto; padding: 8px 24px;
  display: flex; flex-wrap: nowrap; gap: 12px; justify-content: center; align-items: center; overflow-x: auto;
}
.postit {
  flex: none; background: var(--fond); color: var(--encre); font-family: Delius, sans-serif; font-size: 16px;
  padding: 14px; text-align: center; border-radius: 4px; box-shadow: 0 8px 20px rgba(80, 60, 40, .12);
  transform: rotate(var(--rot)); transition: transform .3s;
}
.postit:hover { transform: rotate(0deg) translateY(-5px); }

/* ---------- Une collègue ---------- */

.collegue { position: relative; padding: 120px 24px 72px; }
.collegue--blanc { background: #FFFFFF; }
.collegue--beige { background: var(--beige); }
.collegue--premiere { padding-top: 96px; background: linear-gradient(to bottom, var(--creme) 0, #FFFFFF 110px); }

.collegue-int { max-width: 1040px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; position: relative; }

.collegue-haut {
  display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 24px; align-items: center;
  max-width: 820px; margin: 0 auto; width: 100%; position: relative;
}
.collegue--photo-droite .collegue-haut { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); }

.collegue-texte { display: flex; flex-direction: column; gap: 12px; padding-right: 24px; }
.collegue--photo-droite .collegue-texte { padding-right: 0; padding-left: 24px; }
.collegue-titre { font-family: Delius, sans-serif; font-size: 22px; color: var(--perso-texte); }
.collegue h2 {
  margin: 0; font-family: Delius, sans-serif; font-weight: 700; font-size: clamp(30px, 8vw, 38px);
  color: var(--encre); line-height: 1.1;
}
.collegue-intro { margin: 0; font-size: 18px; line-height: 1.55; color: var(--encre-fonce); text-wrap: pretty; }
.collegue-presentation { margin: 0; font-size: 16px; line-height: 1.7; text-wrap: pretty; }
/* « Prendre rendez-vous avec … » : pastille douce dans la couleur de la collègue (un peu foncée pour se lire),
   bien détachée du texte et de la carte Formations en dessous (40 px d'air : la carte remonte de 16 px sous le texte) */
.collegue-rdv {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin: 10px 0 56px;
  color: var(--perso-texte); color: color-mix(in srgb, var(--perso-texte) 78%, #000); background: var(--perso-clair);
  font-weight: 600; font-size: 14px; padding: 9px 16px; border-radius: 999px; transition: background .2s, color .2s;
}
/* Première fiche : la place réservée au bonhomme debout sur la carte fait déjà l'espace */
.collegue--premiere .collegue-rdv { margin: 4px 0 0; }
.collegue-rdv:hover { background: var(--perso-fond); color: #fff; }
.collegue-rdv svg { flex-shrink: 0; }

.collegue-photo { display: flex; justify-content: flex-start; padding: 16px 0; }
.collegue--photo-droite .collegue-photo { justify-content: flex-end; }
.polaroid {
  background: #fff; padding: 12px 12px 34px; border-radius: 6px; box-shadow: var(--ombre-polaroid);
  width: 324px; max-width: 100%; box-sizing: border-box; position: relative;
  margin-left: -16px; transform: rotate(var(--rot)); transition: transform .4s;
}
.collegue--photo-droite .polaroid { margin-left: 0; margin-right: -16px; }
.polaroid:hover { transform: rotate(0deg) scale(1.03); }
.polaroid-cadre { aspect-ratio: 4 / 5; overflow: hidden; background: #EFE6DA; }
.polaroid-cadre img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Carte colorée « Formations » */
.collegue-bas { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; align-items: flex-start; width: 100%; }
.collegue-cartes { --haut: 20px; position: relative; width: 100%; padding-top: var(--haut); margin-top: -24px; }
.collegue--premiere .collegue-cartes { --haut: 44px; margin-top: 0; }

.carte-formations {
  position: relative; width: 92%; z-index: 2; color: #fff; box-sizing: border-box;
  border-radius: 44px 14px 40px 60px; padding: 26px 100px 28px 44px;
  display: flow-root; transform: rotate(-1deg);
  box-shadow: 0 14px 34px rgba(80, 60, 40, .12); background: var(--perso-fond);
}
.carte-titre { font-family: Delius, sans-serif; font-size: 26px; line-height: 1.1; transform: rotate(1deg); padding-bottom: 6px; }
/* Liste en bloc (pas en flex) : ses lignes contournent l'étiquette posée en flottant */
.carte-formations ul {
  transform: rotate(1deg); margin: 0; padding: 0 0 0 20px; font-size: 14.5px; line-height: 1.5;
}
.carte-formations li + li { margin-top: 6px; }
/* Icône centrée verticalement dans la place libre de la marge droite (entre top et bottom) */
.carte-icone {
  position: absolute; right: 28px; top: 0; bottom: 0; margin: auto 0; width: 64px; height: 64px; opacity: .9;
  transform: rotate(1deg);
}
/* Étiquette en haut à droite : l'icône se centre sous elle */
.carte-formations--etiquette { min-height: 185px; }
.carte-formations--etiquette .carte-icone { top: 93px; bottom: 28px; }
/* Encadré orange qui remonte sur le bas de la carte : l'icône se centre au-dessus.
   Les hauteurs minimales laissent toujours la place à l'icône, la carte grandit au besoin. */
.carte-formations--autres { min-height: 150px; }
.carte-formations--autres .carte-icone { bottom: 66px; }
.carte-formations--etiquette.carte-formations--autres { min-height: 225px; }
/* Longue liste : deux colonnes, l'icône remonte en haut à droite et la liste commence sous elle */
.carte-formations--2col { padding-right: 44px; }
.carte-formations--2col .carte-titre { min-height: 73px; }
.carte-formations--2col ul {
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; row-gap: 6px;
  font-size: 14px; line-height: 1.45;
}
.carte-formations--2col li + li { margin-top: 0; }
.carte-formations--2col .carte-icone { top: 14px; bottom: auto; margin: 0; width: 72px; height: 67px; }
/* Deux colonnes avec l'étiquette en haut à droite : l'icône se range à gauche de l'étiquette */
.carte-formations--2col.carte-formations--etiquette .carte-icone { right: 300px; }

/* Étiquette « Diplômée d'État » suspendue à la carte */
.etiquette { position: relative; z-index: 6; transform-origin: 50% 0; animation: cemSwing 5s ease-in-out infinite; }
/* Dans le titre de la carte, en flottant : les formations la contournent et ne passent jamais dessous.
   Elle dépasse du haut de la carte et déborde dans la marge de droite, comme sur la maquette. */
.carte-titre .etiquette {
  float: right; margin: -41px -56px 8px 10px;
  font: 400 16px/normal Figtree, sans-serif; color: var(--texte);
}
.carte-formations--2col .carte-titre .etiquette { margin-right: 0; }
/* Première collègue : l'étiquette suit le titre, les formations commencent dessous */
.collegue--premiere .carte-titre .etiquette { float: none; display: inline-block; vertical-align: top; margin: -43px 0 8px 86px; }
/* Exemplaire sous la carte, dans le flux : sert sur téléphone, ou seul s'il n'y a pas de formations */
.carte-formations + .etiquette { display: none; }
.collegue-cartes > .etiquette { width: max-content; max-width: 100%; margin: 14px 0 48px; }
.etiquette svg { width: 40px; height: 34px; display: block; margin: 0 auto; overflow: visible; }
.etiquette-carton {
  background: var(--creme-clair); border: 1.5px solid #E4D8C6; border-radius: 6px 6px 6px 18px;
  padding: 10px 16px 10px 14px; box-shadow: 0 8px 18px rgba(80, 60, 40, .14);
  display: flex; flex-direction: column; gap: 2px; position: relative;
}
.etiquette-coin {
  position: absolute; left: -1px; top: -1px; width: 14px; height: 14px; background: var(--creme);
  border-right: 1.5px solid #E4D8C6; border-bottom: 1.5px solid #E4D8C6; border-radius: 0 0 4px 0;
}
.etiquette-petit { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--framboise); font-weight: 600; }
.etiquette-grand { font-family: Delius, sans-serif; font-size: 17px; color: var(--encre-fonce); }

/* Petits bonshommes dessinés : chacun à sa place de la maquette, accroché à un élément pour le suivre */
.collegue-dessin { position: absolute; width: auto; z-index: 3; pointer-events: none; }
/* En haut à droite de la carte Formations */
.collegue-dessin--coin-carte { top: 25px; right: -2%; height: 132px; transform: rotate(6deg); }
/* Debout sur le haut de la carte Formations, à droite de l'étiquette. Il dépasse de 72 px dans la zone
   du texte : le texte s'arrête au-dessus de lui, quelle que soit sa longueur */
.collegue-dessin--sur-carte { top: calc(var(--haut) - 120px); left: 420px; height: 149px; transform: rotate(-6deg); }
.collegue--dessin-sur-carte .collegue-texte { padding-bottom: 84px; }
/* Debout sur l'encadré pointillé (qui remonte de 30 px sous la carte), à droite de la carte */
.collegue-dessin--sur-encadre { bottom: 29px; right: calc(12px - 2%); height: 132px; transform: rotate(6deg); }
/* Accroché au bord droit de la carte, vers le bas : suit la hauteur de la carte */
.collegue-dessin--bord-carte { bottom: 28px; left: calc(92% - 7px); height: 121px; transform: rotate(6deg); }
/* Suspendu sous le petit encadré orange (déjà incliné de 2°), qui lui réserve la place en dessous */
.collegue-dessin--sous-encadre { top: 100%; left: 44px; height: 123px; z-index: 9; transform: rotate(4deg); }
/* Sur le petit encadré orange, pieds sur son trait et incliné avec lui. L'encadré glisse vers la droite
   (--debord, moins sur les écrans étroits pour rester visible) et dépasse de la carte. L'encadré pointillé
   s'élargit d'autant, pour que l'orange chevauche toujours son coin. */
/* Debout, sur le fond beige à côté de la carte */
.collegue-dessin--sur-autres { bottom: calc(100% + 1px); left: calc(110px - var(--debord)); height: 132px; z-index: 6; }
/* En marche, la main sur le bord de la carte (un peu dessus sur les écrans étroits) */
.collegue-dessin--marche-autres { bottom: calc(100% + 1px); left: 110px; height: 121px; z-index: 6; }
@media (min-width: 761px) {
  .collegue--dessin-sur-autres, .collegue--dessin-marche-autres { --debord: clamp(12px, calc(50vw - 430px), 22px); }
  :is(.collegue--dessin-sur-autres, .collegue--dessin-marche-autres) .collegue-encadres--autres .autres-diplomes { margin-right: calc(-1 * var(--debord)); }
  :is(.collegue--dessin-sur-autres, .collegue--dessin-marche-autres) .collegue-encadres--autres .encadre { width: calc(92% + var(--debord) - 160px); }
}

/* Encadré pointillé (Sensibilisation, Expériences…) et « Autres diplômes » */
.collegue-encadres { position: relative; width: 100%; }
.encadre {
  width: 92%; margin-left: 8%; margin-top: -30px; position: relative; z-index: 0; box-sizing: border-box;
  border: 2px dotted var(--perso-fond); border-radius: 60px 40px 44px 14px; background: var(--perso-clair);
  padding: 40px 40px 28px 44px; display: flex; flex-direction: column; gap: 6px;
}
.collegue-encadres--autres .encadre { width: 66%; }
.encadre-titre { font-family: Delius, sans-serif; font-size: 26px; color: var(--perso-texte); line-height: 1.1; }
.encadre ul {
  color: var(--texte); margin: 0; padding: 0 0 0 20px;
  display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; line-height: 1.5;
}
.encadre strong { color: var(--encre-fonce); }

/* Petit encadré « Extras » : fond crème, contour et titre dans la couleur de la collègue, un peu foncée
   (le contour se voit sur tout le tour, même là où il chevauche la carte Formations) */
.autres-diplomes {
  position: absolute; right: 53px; top: -48px; width: 200px; z-index: 5; box-sizing: border-box;
  background: var(--creme-clair); border: 2px solid var(--perso-fond); border-radius: 14px 40px 44px 30px;
  border-color: color-mix(in srgb, var(--perso-fond) 78%, #000);
  padding: 18px 18px 20px; transform: rotate(2deg); box-shadow: 0 10px 24px rgba(80, 60, 40, .12);
  display: flex; flex-direction: column; gap: 10px;
}
.autres-titre { font-family: Delius, sans-serif; font-size: 18px; color: var(--perso-texte); color: color-mix(in srgb, var(--perso-texte) 85%, #000); }
.autres-liste { display: flex; flex-direction: column; gap: 10px; font-size: 13px; line-height: 1.45; color: #4A4644; }
.autres-liste strong { color: var(--encre-fonce); display: block; }
/* Avec l'encadré pointillé : tous deux dans la même case de grille. Le petit encadré chevauche
   le coin de l'autre et, s'il est le plus long, la section s'agrandit au lieu de déborder. */
.collegue-encadres--autres { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
.collegue-encadres--autres > * { grid-area: 1 / 1; }
.collegue-encadres--autres .autres-diplomes { position: relative; top: auto; right: auto; justify-self: end; margin: -48px 53px 0 0; }
.collegue-encadres--autres .autres-diplomes--dessin { margin-bottom: 105px; }
/* Sans encadré à côté, le petit encadré se place simplement sous la carte */
.collegue-encadres--seul .autres-diplomes { position: static; width: 100%; margin-top: 16px; transform: none; }

/* ---------- Et aussi… ---------- */

.et-aussi-vague { position: relative; padding-top: 48px; }
.et-aussi {
  max-width: 1040px; margin: 0 auto; padding: 24px 24px 40px;
  display: flex; flex-direction: column; gap: 24px; align-items: center; text-align: center;
}
.et-aussi h2 { margin: 0; font-family: Delius, sans-serif; font-weight: 700; font-size: clamp(28px, 7vw, 34px); color: var(--encre); }
.et-aussi-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 24px; width: 100%; }
.et-aussi-grille .polaroid { width: 100%; margin: 0; }
.et-aussi-grille .polaroid-cadre { aspect-ratio: 4 / 3; }

/* ---------- Téléphone ---------- */

@media (max-width: 760px) {
  .postits { flex-wrap: wrap; }
  .collegue-haut, .collegue--photo-droite .collegue-haut { grid-template-columns: minmax(0, 1fr); }
  .collegue-texte, .collegue--photo-droite .collegue-texte { padding-left: 0; padding-right: 0; }
  .collegue--dessin-sur-carte .collegue-texte { padding-bottom: 0; }
  .collegue-rdv { margin-bottom: 40px; }
  .collegue-photo, .collegue--photo-droite .collegue-photo { justify-content: center; }
  .collegue-haut .polaroid { margin: 0; width: min(100%, 304px); }
  .carte-formations, .carte-formations--2col { width: 100%; padding: 24px 22px 26px; }
  .carte-formations--2col .carte-titre { min-height: 0; }
  .carte-formations--2col ul { grid-template-columns: 1fr; margin-top: 14px; }
  .carte-formations--etiquette, .carte-formations--autres, .carte-formations--etiquette.carte-formations--autres { min-height: 0; }
  .carte-titre .etiquette, .collegue--premiere .carte-titre .etiquette { display: none; }
  .carte-formations + .etiquette { display: block; }
  .collegue-cartes > .etiquette { animation: none; transform: none; }
  .encadre, .collegue-encadres--autres .encadre { width: 100%; margin-left: 0; padding: 40px 22px 26px; }
  .collegue-encadres--autres { display: block; }
  .autres-diplomes, .collegue-encadres--autres .autres-diplomes { position: static; width: 100%; margin: 16px 0 0; transform: none; padding: 24px 22px 26px; }
  .autres-titre { font-size: 26px; line-height: 1.1; }
  .autres-liste { font-size: 14.5px; line-height: 1.5; }
}